natcom
/
LotteryV2


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
							<!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 - Detail</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 flex-col items-center pt-4 px-3 z-0">
        <div class="w-full flex items-center justify-between">
            <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>
        <p class="text-white/80 text-xs -mt-1">Draw #<span class="font-bold">0015</span></p>
    </div>

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

        <!-- Top: Draw info + MB ball + Jackpot prize -->
        <div class="flex items-start justify-between shrink-0">
            <div class="flex flex-col gap-1 items-start">
                <span class="bg-[#0062ff] text-white text-base font-bold rounded-xl px-2 py-1">Draw #0015</span>
                <div class="flex items-center gap-1">
                    <img src="assets/icons/calendar.png" alt="" class="w-5 h-5"/>
                    <span class="text-xs text-black">Friday, Mar 20, 2026</span>
                </div>
                <div class="flex items-center gap-1">
                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="#0062ff" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2" stroke-linecap="round"/></svg>
                    <span class="text-xs text-black">21:00</span>
                </div>
            </div>

            <div class="flex items-center gap-2 relative">
                <div class="relative">
                    <img src="assets/icons/crown.png" alt="" class="absolute -top-3 -right-1 w-5 h-auto rotate-[15deg] z-0 pointer-events-none"/>
                    <div class="ball ball-mb relative z-10" style="width:52px;height:52px;font-size:22px;">12</div>
                    <span class="absolute -bottom-1 -right-1 bg-[#ee0033] text-white text-[10px] font-bold px-1 py-0.5 rounded z-20">MB</span>
                </div>
                <div class="flex flex-col">
                    <span class="text-xs font-bold text-black">Jackpot Prize</span>
                    <p class="leading-none mt-1">
                        <span class="text-[28px] font-condensed font-bold text-[#002bff] tracking-tight">30,000,000</span><span class="text-xs font-bold text-black ml-1 align-top">HTG</span>
                    </p>
                    <span class="text-[8px] font-bold text-[#8e8e93] mt-1">Mega Jackpot</span>
                </div>
            </div>
        </div>

        <!-- Winning Numbers box -->
        <div class="result-box rounded-[32px] py-3 flex flex-col gap-2 shrink-0">
            <p class="text-xs font-bold text-black text-center">Winning Numbers</p>
            <div class="flex items-center justify-center gap-3 px-4">
                <div class="ball ball-blue">7</div>
                <div class="ball ball-blue">16</div>
                <div class="ball ball-blue">32</div>
                <div class="ball ball-blue">35</div>
                <div class="ball ball-blue">40</div>
                <div class="relative">
                    <img src="assets/icons/crown.png" alt="" class="absolute -top-4 -right-1 w-7 h-auto rotate-[15deg] z-0 pointer-events-none"/>
                    <div class="ball ball-mb relative z-10">12</div>
                    <span class="absolute -bottom-1 -right-2 bg-[#ee0033] text-white text-[8px] font-bold px-1.5 py-0.5 rounded z-20">MB</span>
                </div>
            </div>
        </div>

        <!-- Winning Subscribes -->
        <div class="result-box rounded-xl py-3 flex flex-col gap-2 shrink-0">
            <div class="flex flex-col px-5 gap-1">
                <p class="text-xs font-bold text-black">Winning Subscribes (10)</p>
                <p class="text-xs text-black">10 subscribers won the jackpot prize</p>
            </div>
            <div class="grid grid-cols-2 gap-1 px-5">
                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
            </div>
        </div>

        <!-- Draw information -->
        <div class="result-box rounded-xl py-3 flex flex-col gap-2 px-5">
            <p class="text-xs font-bold text-black">Draw information</p>
            <div class="grid grid-cols-2 gap-x-1 gap-y-1 text-xs">
                <p class="text-[#8e8e93]">Game Type</p>
                <p class="font-bold text-black">Mega Jackpot</p>
                <p class="text-[#8e8e93]">Total Participants</p>
                <p class="font-bold text-black">125.689</p>
                <p class="text-[#8e8e93]">Draw Date &amp; Time</p>
                <p class="font-bold text-black">Mar 20, 2026 - 21:05</p>
            </div>
        </div>

        <!-- Note -->
        <div class="bg-[#ecf3fd] rounded-xl px-3 py-2 flex flex-col gap-1 shrink-0">
            <div class="flex items-center gap-1">
                <span class="bg-[#0062ff] text-white text-sm font-bold rounded-xl w-[17px] h-5 flex items-center justify-center leading-none">i</span>
                <p class="text-[10px] font-bold text-[#0062ff]">Note</p>
            </div>
            <div class="text-xs text-[#8e8e93] leading-tight">
                <p>The result is public announced and verified</p>
                <p>Thank you for your trust and support</p>
            </div>
        </div>

        <!-- Back button -->
        <a href="kq.html" class="bg-[#0062ff] text-white text-sm font-bold text-center rounded-xl px-3 py-3 mt-2 mb-1 shrink-0">Back to Results list</a>

    </div>

</div>

</body>

</html>