/* MAIN LAYOUT -------------------------------------------------- */
#jackpot-section{
    display:flex;
    justify-content:space-between;
    max-width:1400px;
    margin:40px auto;
    padding:0 10px;
    font-family:Arial, sans-serif;
}
.jackpot-left,.jackpot-right{width:25%;}
.jackpot-mid{width:45%;text-align:center;}

#jackpot-section h2{
    color:#e60000;
    font-size:32px;
    font-weight:800;
    text-align:center;
    margin-bottom:20px;
}

/* SCROLL LIST -------------------------------------------------- */
.scroll-box{
    height:260px;
    overflow:hidden;
}
.scroll-list{
    animation:jackpotScroll 9s linear infinite;
    list-style:none;
    margin:0;
    padding:0;
}
.scroll-list li{
    display:flex;
    align-items:center;
    gap:12px;
    height:70px;
}
@keyframes jackpotScroll{
    0%{transform:translateY(0);}
    100%{transform:translateY(-50%);}
}

/* LEFT ITEMS -------------------------------------------------- */
.jp-icon-wrap{
    display:flex;
    align-items:center;
    gap:4px;
    width:120px;
}
.jp-logo{width:32px;}
.jp-game{
    width:60px;
    height:60px;
    border-radius:10px;
}
.jp-info p{margin:0;font-size:14px;font-weight:600;}
.jp-info span{color:#e60000;font-size:16px;font-weight:800;}

/* RIGHT ITEMS -------------------------------------------------- */
.avt{
    width:50px;
    height:50px;
    border-radius:50%;
}
.top-info span{
    color:#e60000;
    font-size:16px;
    font-weight:800;
}

/* JACKPOT NUMBER – soft glow premium */
.jackpot-number{
    display:flex;
    justify-content:center;
    gap:15px;                     /* GIÃN CÁCH ĐÚNG MẪU */
    padding:20px 40px;
    background: radial-gradient(circle, #7a0000, #4c0000);
    border-radius:40px;
    border:2px solid #ffcc66;
    box-shadow:
        0 0 25px rgba(255,200,80,0.9),
        0 0 60px rgba(255,200,80,0.6),
        inset 0 0 40px rgba(255,200,80,0.4);
}

/* Digit style giống UI mềm */
.jackpot-digit{
    font-size:46px;                    /* NHỎ HƠN – ĐẸP HƠN */
    font-weight:700;
    color:#ffe9a3;
    text-shadow:
        0 0 12px rgba(255,230,120,0.9),
        0 0 20px rgba(255,180,60,0.6);
    width:34px;
    text-align:center;
    perspective:500px;
}

/* dấu chấm mảnh & thấp */
.jackpot-digit.comma{
    font-size:40px;
    width:16px;
    padding-top:6px;
}

/* Flip animation mềm hơn */
.flip-card{
    display:inline-block;
    animation:softFlip 0.35s ease-out;
}

@keyframes softFlip{
    0%{ transform:rotateX(80deg); opacity:0.2;}
    60%{ transform:rotateX(20deg); opacity:1;}
    100%{ transform:rotateX(0deg); opacity:1;}
}

/* FLIP EFFECT -------------------------------------------------- */
@keyframes jackpotFlip{
    0%{transform:rotateX(90deg);opacity:0;filter:brightness(.4);}
    40%{transform:rotateX(30deg);opacity:1;}
    70%{filter:brightness(1.5);text-shadow:0 0 12px #fff6c2,0 0 6px #ffdd55;}
    100%{transform:rotateX(0);opacity:1;filter:brightness(1);}
}

/* JACKPOT GAMES -------------------------------------------------- */
.jackpot-games{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:25px;
}
.jackpot-games img{
    width:110px;
    height:110px;
    border-radius:15px;
}

/* BUTTON -------------------------------------------------- */
.jackpot-btn{
    display:inline-block;
    padding:15px 50px;
    background:#ff4b00;
    color:#fff;
    font-size:22px;
    font-weight:900;
    border-radius:25px;
    text-decoration:none;
    box-shadow:0 7px 0 #b82b00;
}
.jackpot-btn:hover{
    transform:translateY(2px);
    box-shadow:0 4px 0 #b82b00;
}

/* RESPONSIVE -------------------------------------------------- */
@media(max-width:1024px){
    #jackpot-section{
        flex-direction:column;
        align-items:center;
    }
    .jackpot-left,.jackpot-mid,.jackpot-right{
        width:100%;
        max-width:600px;
        margin-bottom:20px;
    }
}