/* ==========================================
   VIETLOTT LIVE V2
   style.css
========================================== */

/* Reset */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    background:#f4f6f9;
    color:#333;
    min-height:100vh;
}

/* Container */
.container{
    width:95%;
    max-width:1200px;
    margin:auto;
}

/* Header */

header{
    background:#00853f;
    color:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 25px;
    box-shadow:0 3px 8px rgba(0,0,0,.15);
    position:sticky;
    top:0;
    z-index:999;
}

.logo h1{
    font-size:30px;
    font-weight:bold;
    letter-spacing:1px;
}

.admin-btn a{
    color:#fff;
    text-decoration:none;
    background:#ff9800;
    padding:10px 18px;
    border-radius:8px;
    transition:.3s;
    font-weight:bold;
}

.admin-btn a:hover{
    background:#ffb300;
}

/* Menu */

.game-nav{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    background:#fff;
    padding:20px;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.game{
    border:none;
    background:#ececec;
    padding:12px 22px;
    border-radius:30px;
    cursor:pointer;
    font-size:15px;
    transition:.25s;
    font-weight:bold;
}

.game:hover{
    background:#009245;
    color:#fff;
}

.game.active{
    background:#009245;
    color:#fff;
}

/* Main Section */

main{
    width:100%;
    padding:30px 15px;
}

/* Card */

.card{
    background:#fff;
    border-radius:16px;
    box-shadow:0 5px 18px rgba(0,0,0,.08);
    margin-bottom:25px;
    padding:25px;
}
/* ==========================================
   COUNTDOWN
========================================== */

.countdown{
    width:100%;
    background:#ffffff;
    margin:25px auto;
    padding:20px;
    border-radius:15px;
    box-shadow:0 5px 18px rgba(0,0,0,.08);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.countdown div{
    font-size:18px;
    font-weight:bold;
}

#period{
    color:#00853f;
    font-size:22px;
}

#timer{
    color:#e53935;
    font-size:30px;
    font-weight:bold;
    letter-spacing:2px;
}

/* Trạng thái */

.status{
    margin-top:10px;
    font-size:15px;
    font-weight:bold;
}

.status.wait{
    color:#ff9800;
}

.status.live{
    color:#f44336;
    animation:blink 1s infinite;
}

.status.done{
    color:#2e7d32;
}

/* ==========================================
   KẾT QUẢ
========================================== */

.numbers{
    width:100%;
    background:#fff;
    border-radius:18px;
    padding:35px 20px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    box-shadow:0 5px 18px rgba(0,0,0,.08);
    margin-bottom:25px;
}

/* Bóng số */

.ball{
    width:72px;
    height:72px;
    border-radius:50%;
    background:linear-gradient(180deg,#ffffff,#ececec);
    border:3px solid #00853f;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    font-weight:bold;
    color:#00853f;
    box-shadow:
        0 4px 10px rgba(0,0,0,.18),
        inset 0 2px 5px rgba(255,255,255,.9);
    transition:.35s;
}

.ball:hover{
    transform:scale(1.08);
}

/* Số đặc biệt */

.ball.special{
    background:linear-gradient(180deg,#ffeb3b,#ffc107);
    color:#b71c1c;
    border-color:#ff9800;
}

/* Animation khi cập nhật */

.ball.show{
    animation:ballPop .5s ease;
}

.ball.roll{
    animation:ballRoll .7s ease;
}

.ball.flash{
    animation:ballFlash 1s ease;
}

/* Mega */

.ball.mega{
    border-color:#1976d2;
    color:#1976d2;
}

/* Power */

.ball.power{
    border-color:#8e24aa;
    color:#8e24aa;
}

/* Lotto */

.ball.lotto{
    border-color:#00853f;
    color:#00853f;
}

/* Keno */

.ball.keno{
    width:60px;
    height:60px;
    font-size:22px;
}

/* Max3D */

.ball.max3d{
    width:65px;
    height:65px;
    border-radius:12px;
    font-size:26px;
}

/* ==========================================
   JACKPOT
========================================== */

.jackpot{
    background:#ffffff;
    border-radius:16px;
    padding:25px;
    text-align:center;
    box-shadow:0 5px 18px rgba(0,0,0,.08);
    margin-bottom:25px;
}

.jackpot h2{
    color:#666;
    margin-bottom:15px;
    font-size:22px;
}

#jackpot{
    color:#d32f2f;
    font-size:38px;
    font-weight:bold;
    text-shadow:0 2px 6px rgba(0,0,0,.15);
}

/* Jackpot nhấp nháy */

#jackpot.highlight{
    animation:jackpotGlow 1.5s infinite;
}
/* ==========================================
   HISTORY TABLE
========================================== */

.history{
    width:100%;
    background:#fff;
    border-radius:18px;
    padding:25px;
    margin-bottom:25px;
    box-shadow:0 5px 18px rgba(0,0,0,.08);
}

.history h2{
    font-size:24px;
    color:#00853f;
    margin-bottom:20px;
    font-weight:700;
}

.history table{
    width:100%;
    border-collapse:collapse;
    overflow:hidden;
    border-radius:12px;
}

.history thead{
    background:#00853f;
    color:#fff;
}

.history thead th{
    padding:16px 10px;
    text-align:center;
    font-size:15px;
    font-weight:600;
}

.history tbody tr{
    border-bottom:1px solid #ececec;
    transition:.25s;
}

.history tbody tr:nth-child(even){
    background:#fafafa;
}

.history tbody tr:hover{
    background:#e8f5e9;
}

.history tbody td{
    padding:15px 10px;
    text-align:center;
    font-size:15px;
}

.history .period{
    font-weight:bold;
    color:#00853f;
}

.history .date{
    color:#666;
}

.history .result{
    font-weight:bold;
    letter-spacing:1px;
    color:#d32f2f;
}

/* ==========================================
   RESULT BADGES
========================================== */

.result-balls{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
}

.result-ball{
    width:34px;
    height:34px;
    border-radius:50%;
    background:#00853f;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:14px;
    font-weight:bold;
}

.result-ball.special{
    background:#ffc107;
    color:#b71c1c;
}

/* ==========================================
   INFO CARDS
========================================== */

.info-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:25px;
}

.info-card{
    background:#fff;
    border-radius:16px;
    padding:22px;
    box-shadow:0 5px 18px rgba(0,0,0,.08);
    transition:.3s;
}

.info-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.info-card h3{
    color:#00853f;
    margin-bottom:12px;
    font-size:18px;
}

.info-card .value{
    font-size:30px;
    font-weight:bold;
    color:#d32f2f;
}

.info-card .label{
    margin-top:8px;
    color:#777;
    font-size:14px;
}

/* ==========================================
   LOADING
========================================== */

.loading{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px;
}

.spinner{
    width:42px;
    height:42px;
    border:4px solid #e0e0e0;
    border-top:4px solid #00853f;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

/* ==========================================
   MESSAGE BOX
========================================== */

.message{
    padding:16px 20px;
    border-radius:12px;
    margin-bottom:20px;
    font-size:15px;
    font-weight:600;
}

.message.success{
    background:#e8f5e9;
    color:#2e7d32;
    border-left:5px solid #2e7d32;
}

.message.error{
    background:#ffebee;
    color:#c62828;
    border-left:5px solid #c62828;
}

.message.warning{
    background:#fff8e1;
    color:#ef6c00;
    border-left:5px solid #fb8c00;
}

/* ==========================================
   FOOTER
========================================== */

footer{
    margin-top:40px;
    background:#00853f;
    color:#fff;
    text-align:center;
    padding:20px;
}

footer div{
    font-size:15px;
    letter-spacing:.5px;
}

footer a{
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}

footer a:hover{
    text-decoration:underline;
}
/* ==========================================
   DARK MODE
========================================== */

body.dark{
    background:#121212;
    color:#f1f1f1;
}

body.dark header{
    background:#0b5d2a;
}

body.dark .game-nav,
body.dark .countdown,
body.dark .numbers,
body.dark .jackpot,
body.dark .history,
body.dark .info-card,
body.dark .card{
    background:#1e1e1e;
    color:#f5f5f5;
}

body.dark .history tbody tr{
    border-color:#2c2c2c;
}

body.dark .history tbody tr:nth-child(even){
    background:#262626;
}

body.dark .history tbody tr:hover{
    background:#333;
}

body.dark .game{
    background:#2f2f2f;
    color:#fff;
}

body.dark .game.active{
    background:#00a651;
}

body.dark footer{
    background:#0b5d2a;
}

/* ==========================================
   BACK TO TOP
========================================== */

#backTop{
    position:fixed;
    right:25px;
    bottom:25px;
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    background:#00853f;
    color:#fff;
    cursor:pointer;
    display:none;
    align-items:center;
    justify-content:center;
    font-size:22px;
    box-shadow:0 8px 18px rgba(0,0,0,.25);
    transition:.3s;
    z-index:999;
}

#backTop:hover{
    transform:translateY(-5px);
    background:#00a651;
}

#backTop.show{
    display:flex;
}

/* ==========================================
   TOAST
========================================== */

.toast-container{
    position:fixed;
    top:20px;
    right:20px;
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.toast{
    min-width:280px;
    padding:16px 20px;
    border-radius:12px;
    color:#fff;
    font-weight:600;
    box-shadow:0 8px 20px rgba(0,0,0,.2);
    animation:toastIn .4s ease;
}

.toast.success{
    background:#2e7d32;
}

.toast.error{
    background:#d32f2f;
}

.toast.warning{
    background:#fb8c00;
}

.toast.info{
    background:#1976d2;
}

/* ==========================================
   MODAL
========================================== */

.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9998;
}

.modal.show{
    display:flex;
}

.modal-content{
    width:90%;
    max-width:550px;
    background:#fff;
    border-radius:18px;
    padding:25px;
    position:relative;
    animation:modalShow .3s ease;
}

body.dark .modal-content{
    background:#1f1f1f;
}

.modal-title{
    font-size:24px;
    margin-bottom:20px;
    color:#00853f;
}

.modal-close{
    position:absolute;
    top:15px;
    right:18px;
    font-size:28px;
    cursor:pointer;
    color:#999;
}

.modal-close:hover{
    color:#d32f2f;
}

/* ==========================================
   POPUP RESULT
========================================== */

.result-popup{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:92%;
    max-width:700px;
    background:#fff;
    border-radius:20px;
    padding:30px;
    box-shadow:0 12px 40px rgba(0,0,0,.3);
    display:none;
    z-index:9999;
}

.result-popup.show{
    display:block;
    animation:popupZoom .35s ease;
}

body.dark .result-popup{
    background:#1f1f1f;
}

.result-popup h2{
    text-align:center;
    color:#00853f;
    margin-bottom:25px;
}

.result-popup .popup-numbers{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

/* ==========================================
   BADGE
========================================== */

.badge{
    display:inline-block;
    padding:6px 12px;
    border-radius:20px;
    font-size:13px;
    font-weight:bold;
}

.badge.success{
    background:#4caf50;
    color:#fff;
}

.badge.warning{
    background:#ff9800;
    color:#fff;
}

.badge.danger{
    background:#e53935;
    color:#fff;
}

.badge.info{
    background:#2196f3;
    color:#fff;
}

/* ==========================================
   PROGRESS BAR
========================================== */

.progress{
    width:100%;
    height:12px;
    background:#e0e0e0;
    border-radius:30px;
    overflow:hidden;
}

.progress-bar{
    width:0;
    height:100%;
    background:#00a651;
    transition:.5s;
}
/* ==========================================
   TRANSITIONS
========================================== */

.fade-in{
    animation:fadeIn .5s ease forwards;
}

.fade-out{
    animation:fadeOut .4s ease forwards;
}

.slide-left{
    animation:slideLeft .35s ease;
}

.slide-right{
    animation:slideRight .35s ease;
}

.zoom-in{
    animation:zoomIn .3s ease;
}

.zoom-out{
    animation:zoomOut .3s ease;
}

/* ==========================================
   UTILITIES
========================================== */

.hidden{
    display:none !important;
}

.text-center{
    text-align:center;
}

.text-right{
    text-align:right;
}

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}

.w-100{
    width:100%;
}

/* ==========================================
   KEYFRAMES
========================================== */

@keyframes blink{
    0%,100%{
        opacity:1;
    }
    50%{
        opacity:.3;
    }
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@keyframes fadeOut{
    from{
        opacity:1;
    }
    to{
        opacity:0;
    }
}

@keyframes slideLeft{
    from{
        opacity:0;
        transform:translateX(40px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes slideRight{
    from{
        opacity:0;
        transform:translateX(-40px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes zoomIn{
    from{
        opacity:0;
        transform:scale(.8);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes zoomOut{
    from{
        opacity:1;
        transform:scale(1);
    }
    to{
        opacity:0;
        transform:scale(.8);
    }
}

@keyframes ballPop{
    0%{
        transform:scale(.2);
        opacity:0;
    }
    60%{
        transform:scale(1.15);
    }
    100%{
        transform:scale(1);
        opacity:1;
    }
}

@keyframes ballRoll{
    0%{
        transform:rotate(-360deg) scale(.5);
        opacity:0;
    }
    100%{
        transform:rotate(0deg) scale(1);
        opacity:1;
    }
}

@keyframes ballFlash{
    0%,100%{
        box-shadow:0 0 0 rgba(255,193,7,0);
    }
    50%{
        box-shadow:0 0 25px rgba(255,193,7,.9);
    }
}

@keyframes jackpotGlow{
    0%,100%{
        text-shadow:0 0 5px rgba(255,193,7,.4);
    }
    50%{
        text-shadow:
            0 0 12px rgba(255,193,7,.8),
            0 0 28px rgba(255,193,7,.6);
    }
}

@keyframes modalShow{
    from{
        opacity:0;
        transform:translateY(-30px) scale(.9);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes popupZoom{
    from{
        opacity:0;
        transform:translate(-50%,-50%) scale(.8);
    }
    to{
        opacity:1;
        transform:translate(-50%,-50%) scale(1);
    }
}

@keyframes toastIn{
    from{
        opacity:0;
        transform:translateX(100%);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#f2f2f2;
}

::-webkit-scrollbar-thumb{
    background:#00853f;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#00a651;
}

/* ==========================================
   SELECTION
========================================== */

::selection{
    background:#00853f;
    color:#fff;
}

/* ==========================================
   PRINT
========================================== */

@media print{

header,
footer,
.game-nav,
.admin-btn,
#backTop{
    display:none;
}

body{
    background:#fff;
}

.card,
.history,
.jackpot{
    box-shadow:none;
    border:1px solid #ccc;
}

}

/* ==========================================
   END OF FILE
========================================== */

/* Bổ sung hoàn thiện giao diện */
.logo{display:flex;align-items:center;gap:12px}.logo-mark{width:48px;height:48px;border-radius:50%;background:#fff;color:#00853f;display:grid;place-items:center;font-size:28px;font-weight:900}.logo p{opacity:.9;margin-top:2px}.header-right{display:flex;align-items:center;gap:10px}.header-right>a.admin-btn,.header-right .admin-btn{display:inline-block;color:#fff;text-decoration:none;background:#ff9800;padding:10px 18px;border-radius:8px;font-weight:bold}.header-right>a.admin-btn:hover{background:#ffb300}#darkMode{border:0;background:rgba(255,255,255,.18);color:#fff;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:20px}#loading{position:fixed;inset:0;background:rgba(255,255,255,.92);z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}#loading.hide{display:none}.result-header{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:10px}.draw-info h2{color:#00853f;margin-bottom:8px}.draw-info p{margin:5px 0;color:#666}.source-note{text-align:center;color:#777;font-size:13px;margin-top:10px}.error-detail{white-space:pre-wrap;word-break:break-word;font-size:13px}.history .result-balls{min-width:210px}.empty-row{padding:24px!important;color:#777}.admin-link-note{font-size:13px;color:#777;margin-top:12px}.chart-wrap{position:relative;min-height:280px}.result-card.loading-data{opacity:.65}.game[disabled]{opacity:.55;cursor:not-allowed}.jackpot.hidden-game{display:none}.modal-content .game{margin:5px}.admin-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.admin-actions .game{width:100%}
@media(max-width:700px){header{padding:12px 14px}.logo h1{font-size:20px}.logo p{font-size:12px}.logo-mark{width:40px;height:40px}.header-right>a.admin-btn{padding:9px 12px;font-size:13px}.game-nav{padding:12px 8px;gap:7px}.game{padding:10px 13px;font-size:13px}.card{padding:17px}.numbers{gap:10px;padding:25px 10px}.ball{width:54px;height:54px;font-size:22px}.result-header{flex-direction:column}.history{overflow-x:auto}.history table{min-width:650px}#jackpot{font-size:29px}.admin-actions{grid-template-columns:1fr}}

/* Max3D / Max3D Pro prize layout */
.numbers:has(.max3d-prize-row){display:block;padding:20px;}
.max3d-prize-row{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid #ececec;}
.max3d-prize-row:last-child{border-bottom:0;}
.max3d-prize-label{font-weight:700;color:#00853f;text-align:right;}
.max3d-prize-balls{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;}
.max3d-prize-balls .ball.max3d{width:64px;height:54px;font-size:23px;}
body.dark .max3d-prize-row{border-color:#333;}
@media(max-width:600px){.max3d-prize-row{grid-template-columns:1fr}.max3d-prize-label{text-align:left}.max3d-prize-balls .ball.max3d{width:58px;height:50px;font-size:21px;}}

/* Winner statistics */
.winner-stat-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.winner-stat-header h2{color:#00853f;margin-bottom:6px}.winner-stat-header p{color:#777}
.winner-total-box{min-width:180px;padding:14px 20px;border-radius:14px;background:#e8f5e9;text-align:center;border:1px solid #c8e6c9}
.winner-total-box span{display:block;color:#557;font-size:13px}.winner-total-box strong{display:block;color:#00853f;font-size:30px;margin-top:4px}
.winner-table-wrap{overflow-x:auto}.winner-table{width:100%;border-collapse:collapse;min-width:560px}
.winner-table th{background:#00853f;color:#fff;padding:14px;text-align:center}.winner-table td{padding:14px;border-bottom:1px solid #eee;text-align:center}
.winner-table tbody tr:hover{background:#f3fbf6}.prize-rank{font-weight:700;color:#00853f}.rank-0{color:#d32f2f}.winner-number{font-size:18px;font-weight:800;color:#d32f2f}.prize-value{font-weight:700}
body.dark .winner-total-box{background:#173d29;border-color:#24613e}body.dark .winner-table td{border-color:#333}body.dark .winner-table tbody tr:hover{background:#25352b}
@media(max-width:600px){.winner-stat-header{align-items:stretch}.winner-total-box{width:100%}.winner-table th,.winner-table td{padding:11px 8px;font-size:14px}}

/* LIVE number animation: balls stay fixed, only text changes */
.ball.live-number{
  box-shadow:0 0 0 4px rgba(229,57,53,.12),0 5px 18px rgba(0,0,0,.16);
  border-color:#e53935 !important;
}
.ball.number-locked{
  animation:numberLock .32s ease;
}
@keyframes numberLock{
  0%{transform:scale(.9)}
  60%{transform:scale(1.14)}
  100%{transform:scale(1)}
}
.status.live::before{content:"● ";}
.ball.power-ball{
    background:#ffd400;
    border:3px solid #e6a400;
    color:#7b1fa2;
}