natcom
/
LotteryV2


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Mega Loto - Kết quả Jackpot</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="css/all.min.css"/>

    <script src="lib/jquery/jquery.min.js"></script>
    <script src="js/all.min.js"></script>
</head>

<body>

<div class="main-content h-dvh max-w-[500px] mx-auto bg-[#ececec] relative overflow-hidden">

    <!-- Header gradient -->
    <div class="header-bg absolute inset-x-0 top-0 h-[160px] flex items-start justify-between px-3 pt-4 z-0">
        <button class="js-back w-6 h-6 flex items-center justify-center">
            <img src="assets/icons/arrow-left.svg" alt="Back" class="w-6 h-6"/>
        </button>
        <p class="text-white text-base font-bold">Kết quả Jackpot</p>
        <span class="w-6 h-6"></span>
    </div>

    <!-- White rounded body (overlaps header, scrollable) -->
    <div class="absolute inset-x-0 top-[56px] bottom-[88px] bg-white rounded-t-[32px] flex flex-col gap-3 px-2 pt-4 pb-2 overflow-y-auto z-10">

        <!-- Date filter + search -->
        <div class="flex items-center justify-between gap-3 shrink-0">
            <div class="flex items-center gap-3 bg-white border border-[#b9b9b9] rounded-lg h-8 px-3">
                <div class="flex items-center gap-1">
                    <img src="assets/icons/calendar.png" alt="" class="w-5 h-5"/>
                    <span class="text-xs font-bold text-black whitespace-nowrap">20/02/2026 - 20/03/2026</span>
                </div>
                <img src="assets/icons/chevron-down-2.svg" alt="" class="w-3 h-3"/>
            </div>
            <button class="bg-[#0062ff] rounded-lg w-8 h-8 flex items-center justify-center shrink-0">
                <img src="assets/icons/search.svg" alt="" class="w-4 h-4"/>
            </button>
        </div>

        <!-- Mega Jackpot banner -->
        <div class="mega-banner relative rounded-[12px] overflow-hidden px-4 py-3 border-2 border-white/70 flex flex-col shrink-0">
            <span class="mega-glow" style="left:-79px; top:-101px;"></span>
            <span class="mega-glow" style="right:-78px; top:9px;"></span>
            <span class="mega-glow" style="right:-107px; top:20px;"></span>
            <p class="mega-title relative inline-block text-white text-[22px] font-futura leading-none">
                <img src="assets/icons/crown.png" alt="" class="absolute -top-[5px] left-[26px] w-[12px] h-auto rotate-[10deg] pointer-events-none"/>
                Mega Jackpot
            </p>
            <p class="text-white text-xs mt-2">Estimate Jackpot Prize</p>
            <p class="leading-none mt-1 flex items-start" style="margin-bottom:18px;">
                <span class="mega-amount text-[40px] font-condensed text-gold-gradient tracking-tight leading-none">27.000.000</span>
                <span class="text-gold-gradient text-sm font-bold uppercase ml-1">htg</span>
            </p>
            <p class="text-white text-[10px] mt-1">Be the next millionaire</p>
            <img src="assets/images/crown-balls.png" alt="" class="absolute right-2 top-1/2 -translate-y-1/2 w-44 h-auto pointer-events-none"/>
        </div>

        <!-- List heading -->
        <div class="px-2 shrink-0">
            <div class="flex items-center justify-between font-bold">
                <p class="text-sm text-black">Danh sách kết quả Jackpot</p>
                <p class="text-xs text-[#0062ff]">Tổng cộng 16 kỳ quay</p>
            </div>

            <!-- Results list -->
            <div class="flex flex-col gap-2 pb-2">

                <!-- Card -->
                <a href="detail.html" class="result-card bg-white rounded-xl flex items-center justify-between px-3 py-2 gap-2">
                    <div class="flex flex-col gap-0.5 items-start shrink-0">
                        <span class="bg-[#0062ff] text-white text-[10px] font-bold rounded px-1 py-0.5">Kỳ #0015</span>
                        <span class="text-xs text-[#8e8e93]">Thứ Sáu</span>
                        <span class="text-[8px] font-bold text-[#8e8e93]">20/03/2026</span>
                        <span class="text-[8px] font-bold text-[#8e8e93]">21:00</span>
                    </div>
                    <div class="grid grid-cols-3 gap-1">
                        <div class="ball ball-blue ball-mini">7</div>
                        <div class="ball ball-blue ball-mini">16</div>
                        <div class="ball ball-blue ball-mini">40</div>
                        <div class="ball ball-blue ball-mini">35</div>
                        <div class="ball ball-blue ball-mini">32</div>
                        <div class="relative">
                            <img src="assets/icons/crown.png" alt="" class="absolute -top-2.5 -right-1 w-4 h-auto rotate-[15deg] pointer-events-none z-0"/>
                            <div class="ball ball-mb ball-mini relative z-10">12</div>
                            <span class="absolute -bottom-1 -right-1 bg-[#ee0033] text-white text-[6px] font-bold px-1 rounded z-20">MB</span>
                        </div>
                    </div>
                    <div class="flex flex-col gap-0.5 items-start shrink-0">
                        <span class="text-xs font-bold text-black">Jackpot</span>
                        <p class="leading-none">
                            <span class="text-base font-extrabold text-[#002bff]">30,000,000</span><span class="text-[10.32px] font-extrabold text-black align-top">HTG</span>
                        </p>
                        <span class="text-[8px] text-black">1 thuê bao trúng thưởng</span>
                        <span class="text-[8px] font-medium text-black">+509 23****67</span>
                    </div>
                    <img src="assets/icons/chevron-right.svg" alt="" class="w-2 h-3 shrink-0"/>
                </a>

                <a href="detail.html" class="result-card bg-white rounded-xl flex items-center justify-between px-3 py-2 gap-2">
                    <div class="flex flex-col gap-0.5 items-start shrink-0">
                        <span class="bg-[#0062ff] text-white text-[10px] font-bold rounded px-1 py-0.5">Kỳ #0015</span>
                        <span class="text-xs text-[#8e8e93]">Thứ Sáu</span>
                        <span class="text-[8px] font-bold text-[#8e8e93]">20/03/2026</span>
                        <span class="text-[8px] font-bold text-[#8e8e93]">21:00</span>
                    </div>
                    <div class="grid grid-cols-3 gap-1">
                        <div class="ball ball-blue ball-mini">7</div>
                        <div class="ball ball-blue ball-mini">16</div>
                        <div class="ball ball-blue ball-mini">40</div>
                        <div class="ball ball-blue ball-mini">35</div>
                        <div class="ball ball-blue ball-mini">32</div>
                        <div class="relative">
                            <img src="assets/icons/crown.png" alt="" class="absolute -top-2.5 -right-1 w-4 h-auto rotate-[15deg] pointer-events-none z-0"/>
                            <div class="ball ball-mb ball-mini relative z-10">12</div>
                            <span class="absolute -bottom-1 -right-1 bg-[#ee0033] text-white text-[6px] font-bold px-1 rounded z-20">MB</span>
                        </div>
                    </div>
                    <div class="flex flex-col gap-0.5 items-start shrink-0">
                        <span class="text-xs font-bold text-black">Jackpot</span>
                        <p class="leading-none">
                            <span class="text-base font-extrabold text-[#002bff]">30,000,000</span><span class="text-[10.32px] font-extrabold text-black align-top">HTG</span>
                        </p>
                        <span class="text-[8px] text-black">1 thuê bao trúng thưởng</span>
                        <span class="text-[8px] font-medium text-black">+509 23****67</span>
                    </div>
                    <img src="assets/icons/chevron-right.svg" alt="" class="w-2 h-3 shrink-0"/>
                </a>

                <a href="detail.html" class="result-card bg-white rounded-xl flex items-center justify-between px-3 py-2 gap-2">
                    <div class="flex flex-col gap-0.5 items-start shrink-0">
                        <span class="bg-[#0062ff] text-white text-[10px] font-bold rounded px-1 py-0.5">Kỳ #0015</span>
                        <span class="text-xs text-[#8e8e93]">Thứ Sáu</span>
                        <span class="text-[8px] font-bold text-[#8e8e93]">20/03/2026</span>
                        <span class="text-[8px] font-bold text-[#8e8e93]">21:00</span>
                    </div>
                    <div class="grid grid-cols-3 gap-1">
                        <div class="ball ball-blue ball-mini">7</div>
                        <div class="ball ball-blue ball-mini">16</div>
                        <div class="ball ball-blue ball-mini">40</div>
                        <div class="ball ball-blue ball-mini">35</div>
                        <div class="ball ball-blue ball-mini">32</div>
                        <div class="relative">
                            <img src="assets/icons/crown.png" alt="" class="absolute -top-2.5 -right-1 w-4 h-auto rotate-[15deg] pointer-events-none z-0"/>
                            <div class="ball ball-mb ball-mini relative z-10">12</div>
                            <span class="absolute -bottom-1 -right-1 bg-[#ee0033] text-white text-[6px] font-bold px-1 rounded z-20">MB</span>
                        </div>
                    </div>
                    <div class="flex flex-col gap-0.5 items-start shrink-0">
                        <span class="text-xs font-bold text-black">Jackpot</span>
                        <p class="leading-none">
                            <span class="text-base font-extrabold text-[#002bff]">30,000,000</span><span class="text-[10.32px] font-extrabold text-black align-top">HTG</span>
                        </p>
                        <span class="text-[8px] text-black">1 thuê bao trúng thưởng</span>
                        <span class="text-[8px] font-medium text-black">+509 23****67</span>
                    </div>
                    <img src="assets/icons/chevron-right.svg" alt="" class="w-2 h-3 shrink-0"/>
                </a>

            </div>

            <!-- Note -->
            <div class="flex items-center gap-2 bg-[#e6f0ff] rounded-lg px-3 py-2 mb-2 shrink-0">
                <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="#0062ff"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 5a1.25 1.25 0 1 1 0 2.5A1.25 1.25 0 0 1 12 7Zm1 10h-2v-6h2v6Z"/></svg>
                <p class="text-[10px] font-bold text-[#0062ff]">Lưu ý: Kết quả được cập nhật sau mỗi kỳ quay thưởng</p>
            </div>
        </div>
    </div>

    <!-- Bottom navigation (fixed at bottom) -->
    <nav class="navigation absolute inset-x-3 bottom-3 z-20 px-3 py-2 rounded-2xl">
        <div class="flex items-center justify-between">
            <a href="index.html" class="nav-item active flex flex-col items-center flex-1">
                <img src="assets/icons/nav-home.png" alt="" class="w-7 h-7"/>
                <span class="text-xs mt-1 text-[#0062ff] font-semibold">Home</span>
                <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
            </a>
            <a href="#" class="nav-item flex flex-col items-center flex-1">
                <img src="assets/icons/nav-rule.png" alt="" class="w-7 h-7"/>
                <span class="text-xs mt-1 text-gray-700">Rule</span>
            </a>
            <a href="#" class="nav-item flex flex-col items-center flex-1">
                <img src="assets/icons/nav-history.png" alt="" class="w-7 h-7"/>
                <span class="text-xs mt-1 text-gray-700">History</span>
            </a>
            <a href="#" class="nav-item flex flex-col items-center flex-1">
                <img src="assets/icons/nav-faq.png" alt="" class="w-7 h-7"/>
                <span class="text-xs mt-1 text-gray-700">FAQ</span>
            </a>
            <a href="#" class="nav-item flex flex-col items-center flex-1">
                <img src="assets/icons/nav-more.png" alt="" class="w-7 h-7"/>
                <span class="text-xs mt-1 text-gray-700">More</span>
            </a>
        </div>
    </nav>

</div>

</body>

</html>