/* =============================================================
   Vuibox — hệ thống giao diện
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

:root {
    --bg-main: #0b0f20;
    --bg-panel: #171f3a;
    --bg-panel-2: #1f294a;
    --bg-panel-3: #283460;
    --accent: #7c6cff;
    --accent-bright: #9c8dff;
    --accent-soft: rgba(124, 108, 255, .22);
    --accent-2: #fcc430;
    --accent-hot: #fd5d76;
    --accent-new: #34e0c4;
    --text-main: #eef1fb;
    --text-muted: #93a0c2;
    --text-faint: #5c6789;
    --border-color: #263056;
    --radius: 16px;
    --radius-sm: 10px;
    --header-h: 64px;
    --catnav-h: 46px;
    --bottomnav-h: 62px;
    --shadow-lift: 0 14px 34px rgba(3,6,20,.45);
    --shadow-lift-lg: 0 26px 60px rgba(3,6,20,.55);
    --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
.hidden { display: none !important; }

/* =============================================================
   Nền Aurora / Glassmorphism — chạy CỐ ĐỊNH phía sau toàn bộ trang.
   Toàn bộ nội dung thật của trang được bọc trong .page-shell với
   z-index dương rõ ràng (không dùng z-index âm) để tuyệt đối không
   bao giờ bị nền che mất, dù browser/engine render thế nào.
   ============================================================= */
.aurora-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--bg-main);
    pointer-events: none;
}
.aurora-bg .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .7;
    will-change: transform;
}
.aurora-bg .b1 {
    width: 640px; height: 640px;
    top: -220px; left: -160px;
    background: radial-gradient(circle at 30% 30%, var(--accent), transparent 68%);
    animation: auroraDrift1 26s ease-in-out infinite alternate;
}
.aurora-bg .b2 {
    width: 580px; height: 580px;
    top: 30%; right: -220px;
    background: radial-gradient(circle at 60% 40%, var(--accent-new), transparent 68%);
    animation: auroraDrift2 32s ease-in-out infinite alternate;
}
.aurora-bg .b3 {
    width: 540px; height: 540px;
    bottom: -240px; left: 22%;
    background: radial-gradient(circle at 50% 50%, var(--accent-2), transparent 68%);
    opacity: .46;
    animation: auroraDrift3 30s ease-in-out infinite alternate;
}
@keyframes auroraDrift1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, 50px) scale(1.12); }
}
@keyframes auroraDrift2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-50px, 40px) scale(1.08); }
}
@keyframes auroraDrift3 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -40px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
    .aurora-bg .blob { animation: none !important; }
}
@media (max-width: 720px) {
    .aurora-bg .blob { filter: blur(60px); opacity: .4; }
    .aurora-bg .b1, .aurora-bg .b2, .aurora-bg .b3 { width: 360px; height: 360px; }
}

.page-shell {
    position: relative;
    z-index: 1;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-main);
    color: var(--text-main);
    font-family: "Be Vietnam Pro", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.01em; }

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

::selection { background: var(--accent); color: #fff; }

/* scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--bg-panel-3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ===================== Header ===================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--header-h);
    background: rgba(10,14,28,.85);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-color);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
}

.logo-link { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.logo-link img { height: 36px; }

.menu-toggle {
    display: none;
    background: var(--bg-panel-2);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-main);
    font-size: 18px;
    width: 40px; height: 40px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.search-form {
    flex: 1;
    max-width: 440px;
    display: flex;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color .15s;
}
.search-form:focus-within { border-color: var(--accent); }
.search-form input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    padding: 10px 16px;
    font-size: 14px;
    font-family: inherit;
}
.search-form button {
    background: var(--accent);
    border: none;
    color: #fff;
    padding: 0 18px;
    font-size: 15px;
    flex-shrink: 0;
}
.search-form button:hover { background: var(--accent-bright); }

.header-stats {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}
.header-stats .stat-games { display: flex; align-items: center; gap: 5px; }
.header-stats .stat-games strong { color: var(--accent-2); }

.wallet-chip {
    display: flex; align-items: center; gap: 5px;
    background: var(--bg-panel-2); border: 1px solid var(--border-color);
    border-radius: 999px; padding: 7px 13px; color: var(--text-main);
    font-weight: 600;
    transition: border-color .15s;
}
.wallet-chip:hover { border-color: var(--accent-2); }
.btn-topup-small {
    background: linear-gradient(135deg, var(--accent), var(--accent-bright));
    color: #fff; border-radius: 999px;
    padding: 8px 16px; font-size: 12.5px; font-weight: 700;
    box-shadow: 0 4px 14px var(--accent-soft);
}
.btn-topup-small:hover { filter: brightness(1.08); }

/* ===================== Nav danh mục (desktop pill row) ===================== */
.category-nav {
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: none;
}
.category-nav::-webkit-scrollbar { display: none; }
.category-nav .container { display: flex; gap: 4px; padding-top: 0; padding-bottom: 0; }
.category-nav a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    transition: .15s;
}
.category-nav a:hover,
.category-nav a.active {
    color: var(--text-main);
    border-bottom-color: var(--accent-2);
    background: rgba(255,255,255,.03);
}

/* ===================== Mobile drawer ===================== */
.drawer-backdrop {
    position: fixed; inset: 0; z-index: 290;
    background: rgba(4,6,16,.6);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.mobile-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 291;
    width: min(78vw, 300px);
    background: var(--bg-panel);
    border-right: 1px solid var(--border-color);
    transform: translateX(-100%);
    transition: transform .22s ease;
    display: flex; flex-direction: column;
    overflow-y: auto;
    padding: 18px 16px calc(18px + var(--safe-b));
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mobile-drawer .drawer-head img { height: 30px; }
.mobile-drawer .drawer-close {
    background: var(--bg-panel-2); border: 1px solid var(--border-color); color: var(--text-main);
    width: 32px; height: 32px; border-radius: 8px; font-size: 16px;
}
.mobile-drawer .drawer-wallet {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--bg-panel-2); border: 1px solid var(--border-color); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 16px; font-size: 13.5px;
}
.mobile-drawer .drawer-wallet strong { color: var(--accent-2); font-size: 16px; }
.mobile-drawer nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 10px; border-radius: 10px; font-size: 14.5px; font-weight: 500;
    color: var(--text-muted);
}
.mobile-drawer nav a.active, .mobile-drawer nav a:hover { background: var(--bg-panel-2); color: var(--text-main); }
.mobile-drawer .drawer-section-label {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-faint); margin: 14px 6px 6px;
}

/* ===================== Bottom mobile nav ===================== */
.bottom-nav {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
    background: rgba(12,16,32,.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--border-color);
    padding: 6px 4px calc(6px + var(--safe-b));
}
.bottom-nav .row { display: flex; }
.bottom-nav a, .bottom-nav button {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: none; color: var(--text-muted);
    font-size: 10.5px; font-weight: 600; padding: 6px 2px;
    border-radius: 10px;
}
.bottom-nav .bn-icon { font-size: 19px; line-height: 1; }
.bottom-nav a.active, .bottom-nav button.active { color: var(--accent-2); }

/* ===================== Hero / banner ===================== */
.hero {
    margin: 22px 0;
    padding: 44px 38px;
    border-radius: 26px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 260px at 8% -10%, rgba(109,94,248,.45), transparent 60%),
        radial-gradient(700px 240px at 100% 120%, rgba(251,191,36,.18), transparent 60%),
        linear-gradient(135deg, #191f42, #0d1226 65%);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lift-lg), inset 0 1px 0 rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    isolation: isolate;
}
.hero-glow {
    position: absolute; inset: -40%;
    background: conic-gradient(from 0deg, var(--accent), var(--accent-new), var(--accent-2), var(--accent));
    filter: blur(90px);
    opacity: .16;
    z-index: -1;
    animation: heroSpin 18s linear infinite;
}
@keyframes heroSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-glow { animation: none; } }
.hero-text { max-width: 620px; }
.hero .eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--accent-soft); color: var(--accent-bright);
    border: 1px solid rgba(109,94,248,.35);
    border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 700;
    margin-bottom: 14px;
}
.hero h1 {
    margin: 0 0 10px;
    font-size: 32px;
    line-height: 1.15;
    background: linear-gradient(120deg, #fff, #cdd3f5 70%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; }
.hero-badges { display: flex; gap: 9px; flex-wrap: wrap; max-width: 380px; }
.hero-badges a {
    background: var(--bg-panel-2);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    transition: .15s;
}
.hero-badges a:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }

/* ===================== Thanh chỉ số nhanh (trang chủ) ===================== */
.stats-strip { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0 34px; }
.stat-pill {
    flex: 1; min-width: 130px;
    background: linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel) 60%);
    border: 1px solid var(--border-color); border-radius: 14px;
    padding: 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 3px;
    box-shadow: var(--shadow-lift);
}
.stat-pill .num { font-size: 22px; font-weight: 800; }
.stat-pill .lbl { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.stat-pill.live .dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e; margin-right: 5px; box-shadow: 0 0 8px #22c55e;
    animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .stat-pill.live .dot { animation: none; } }

/* ===================== Showcase 3D (carousel coverflow trang chủ) ===================== */
.showcase-3d { position: relative; margin: 6px 0 46px; padding: 20px 58px; }
.showcase-stage {
    position: relative;
    height: 300px;
    perspective: 1300px;
    overflow: hidden;
    /* Các thẻ ở xa tâm được JS đẩy ra rất xa theo trục X để tạo hiệu ứng "coverflow" —
       overflow:hidden ở đây để chúng không kéo dài vùng cuộn ngang của cả trang, vì
       .sc-card định vị absolute theo toạ độ point-of-view riêng chứ không theo layout dòng chảy. */
}
.sc-card {
    position: absolute;
    top: 50%; left: 50%;
    width: 220px; height: 230px;
    margin: -115px 0 0 -110px;
    border-radius: 20px;
    background: linear-gradient(155deg, var(--c1, var(--accent)), var(--c2, var(--bg-panel)));
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    color: #fff; text-align: center; padding: 20px;
    transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .5s ease;
    box-shadow: 0 26px 54px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.15);
    transform-style: preserve-3d;
    will-change: transform, opacity;
}
.sc-icon { font-size: 46px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.sc-title { font-weight: 800; font-size: 15px; line-height: 1.25; }
.sc-meta { font-size: 11.5px; opacity: .88; }
.sc-play {
    margin-top: 6px; background: rgba(255,255,255,.22); backdrop-filter: blur(3px);
    padding: 6px 15px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.sc-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 200;
    background: var(--bg-panel-2); border: 1px solid var(--border-color); color: var(--text-main);
    width: 42px; height: 42px; border-radius: 50%; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-lift);
}
.sc-nav:hover { border-color: var(--accent); color: var(--accent-bright); }
.sc-prev { left: 4px; } .sc-next { right: 4px; }
.sc-dots { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
.sc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-panel-3); cursor: pointer; transition: .2s; }
.sc-dot.active { background: linear-gradient(90deg, var(--accent), var(--accent-bright)); width: 22px; border-radius: 5px; }

/* ===================== Bảng xếp hạng trò chơi ===================== */
.leaderboard {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px;
}
.lb-row {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel) 60%);
    border: 1px solid var(--border-color); border-radius: 12px;
    padding: 12px 16px;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lb-row:hover { transform: translateX(4px); border-color: var(--accent); box-shadow: var(--shadow-lift); }
.lb-row.lb-top { border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border-color)); }
.lb-rank { font-weight: 800; font-size: 15px; width: 34px; flex-shrink: 0; text-align: center; }
.lb-icon { font-size: 20px; flex-shrink: 0; }
.lb-title { font-weight: 700; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-cat { font-size: 12px; color: var(--text-muted); flex-shrink: 0; display: none; }
.lb-rating { font-size: 12.5px; color: var(--accent-2); font-weight: 700; flex-shrink: 0; }
.lb-plays { font-size: 12px; color: var(--text-muted); flex-shrink: 0; min-width: 90px; text-align: right; }
@media (min-width: 640px) { .lb-cat { display: block; } }

/* ===================== Section titles ===================== */
.section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 38px 0 16px;
}
.section-title h2 {
    font-size: 21px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding-left: 14px;
}
.section-title h2::before {
    content: "";
    position: absolute; left: 0; top: 2px; bottom: 2px;
    width: 4px; border-radius: 4px;
    background: linear-gradient(180deg, var(--accent), var(--accent-new));
}
.section-title a {
    font-size: 13px;
    color: var(--accent-2);
    font-weight: 600;
}
.section-title a:hover { text-decoration: underline; }

/* ===================== Grid game ===================== */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 16px;
}

.game-card {
    --glow: var(--accent);
    position: relative;
    background: linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel) 55%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .22s cubic-bezier(.2,.9,.3,1.3), box-shadow .25s ease, border-color .25s ease;
    transform-style: preserve-3d;
    will-change: transform;
}
.game-card::after {
    /* Viền sáng dùng chính màu riêng của từng trò chơi (--glow) khi hover — cảm giác thẻ
       "phát sáng theo cá tính" thay vì một màu tím đồng loạt cho cả trăm trò chơi. */
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, color-mix(in srgb, var(--glow) 70%, transparent), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.game-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--glow) 55%, var(--border-color));
    box-shadow: var(--shadow-lift-lg), 0 0 0 1px color-mix(in srgb, var(--glow) 25%, transparent) inset,
        0 0 46px -14px color-mix(in srgb, var(--glow) 65%, transparent);
}
.game-card:hover::after { opacity: 1; }
/* Khi JS gán transform (tilt 3D) trực tiếp qua inline style, bỏ transition translateY của
   CSS để không "đánh nhau" với animation JS mượt hơn theo từng khung hình chuột di chuyển. */
@media (hover: hover) and (pointer: fine) {
    .game-card { transition: box-shadow .25s ease, border-color .25s ease; }
}
.game-card .thumb-wrap { position: relative; aspect-ratio: 460 / 300; overflow: hidden; background: var(--bg-panel-2); }
.game-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.game-card:hover img { transform: scale(1.05); }
.game-card .badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; z-index: 2; }
.badge {
    font-size: 10.5px;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 7px;
    color: #fff;
    letter-spacing: .3px;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.badge.hot { background: linear-gradient(120deg, var(--accent-hot), #f97316); }
.badge.new { background: linear-gradient(120deg, var(--accent-new), #22c55e); }

.game-card .cat-tag {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    background: rgba(6,9,20,.65); backdrop-filter: blur(4px);
    border-radius: 7px; padding: 4px 8px; font-size: 12px;
}

.game-card .play-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(10,14,28,.85), rgba(10,14,28,.15) 55%);
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 14px;
    opacity: 0; transition: opacity .18s ease;
}
.game-card:hover .play-overlay { opacity: 1; }
.play-overlay span {
    background: var(--accent);
    color: #fff;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

.game-card .info { padding: 10px 12px 12px; }
.game-card .info h3 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-card .meta {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--text-muted);
}
.game-card .meta .rating { color: var(--accent-2); font-weight: 700; }

/* ===================== Trang danh mục / tìm kiếm ===================== */
.page-heading { margin: 26px 0 4px; }
.page-heading h1 { font-size: 25px; margin: 0 0 6px; display:flex; align-items:center; gap:10px;}
.page-heading p { color: var(--text-muted); margin: 0 0 20px; }

.category-chip-row {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;
}
.category-chip-row a {
    padding: 9px 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    transition: .15s;
}
.category-chip-row a:hover { border-color: var(--accent); transform: translateY(-2px); }
.category-chip-row a.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-bright));
    border-color: var(--accent); font-weight: 700; box-shadow: 0 6px 16px var(--accent-soft);
}

/* ===================== Phân trang ===================== */
.pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; flex-wrap: wrap;
    margin: 30px 0 14px;
}
.pagination .page-btn, .pagination .page-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 14px;
    background: var(--bg-panel); border: 1px solid var(--border-color);
    border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--text-main);
    transition: .15s;
}
.pagination .page-num { min-width: 40px; padding: 0; }
.pagination .page-btn:hover, .pagination .page-num:hover { border-color: var(--accent); background: var(--bg-panel-2); }
.pagination .page-num.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-bright));
    border-color: var(--accent); color: #fff; box-shadow: 0 6px 16px var(--accent-soft);
}
.pagination .page-numbers { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pagination .page-num.ellipsis { border: none; background: none; color: var(--text-faint); min-width: 20px; }
.pagination .page-btn.disabled { opacity: .4; pointer-events: none; }

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.empty-state .icon { font-size: 46px; display:block; margin-bottom: 10px; }

/* ===================== Trang chơi game ===================== */
.play-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 22px;
    margin: 22px 0 40px;
    align-items: start;
}
.play-main {
    background: linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel) 60%);
    border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-lift-lg);
}
.play-frame-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #000;
}
.play-frame-wrap iframe { width: 100%; height: 100%; border: 0; display:block; }
.play-frame-wrap .fullscreen-btn {
    position: absolute; right: 10px; bottom: 10px; z-index: 5;
    background: rgba(6,9,20,.65); border: 1px solid rgba(255,255,255,.15); color: #fff;
    width: 36px; height: 36px; border-radius: 9px; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
}

.play-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap; gap: 10px;
}
.play-toolbar h1 { font-size: 19px; margin: 0; display:flex; align-items:center; gap:8px;}
.play-toolbar .stats { color: var(--text-muted); font-size: 13px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    position: relative;
    background: linear-gradient(135deg, var(--accent), var(--accent-bright)); color: #fff; border: none;
    padding: 10px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
    box-shadow: 0 6px 20px var(--accent-soft);
    transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
    overflow: hidden;
}
.btn::before {
    /* Vệt sáng lướt qua nhẹ để nút CTA thêm nổi bật, thu hút ánh nhìn hơn. */
    content: "";
    position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
    animation: btnShine 4.5s ease-in-out infinite;
}
@keyframes btnShine {
    0%, 30% { left: -60%; }
    60%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) { .btn::before { animation: none; display: none; } }
.btn:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 12px 28px var(--accent-soft); }
.btn.secondary { background: var(--bg-panel-2); border: 1px solid var(--border-color); box-shadow: none; }
.btn.secondary:hover { border-color: var(--accent); filter: none; box-shadow: none; }
.btn.ghost { background: transparent; border: 1px solid var(--border-color); box-shadow: none; }

.play-desc { padding: 18px; color: var(--text-muted); font-size: 14px; line-height: 1.7; }
.play-desc h3 { color: var(--text-main); font-size: 15px; margin: 0 0 6px; }
.play-desc .howto {
    margin-top: 14px; background: var(--bg-panel-2); border: 1px solid var(--border-color);
    border-radius: 12px; padding: 14px 16px;
}

.sidebar-box {
    background: linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel) 60%);
    border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 16px; margin-bottom: 18px;
    box-shadow: var(--shadow-lift);
}
.sidebar-box h3 { margin: 0 0 12px; font-size: 15px; }
.related-list { display: flex; flex-direction: column; gap: 10px; }
.related-item { display: flex; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; }
.related-item:hover { background: var(--bg-panel-2); }
.related-item img { width: 62px; height: 44px; object-fit: cover; border-radius: 8px; flex-shrink:0; }
.related-item .name { font-size: 13.5px; font-weight: 700; }
.related-item .cat { font-size: 11.5px; color: var(--text-muted); }

/* ===================== Footer ===================== */
.site-footer {
    margin-top: 54px;
    border-top: 1px solid var(--border-color);
    background: #070a15;
    padding: 38px 0 22px;
    color: var(--text-muted);
    font-size: 13.5px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 26px;
    margin-bottom: 26px;
}
.footer-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.footer-brand img { height: 28px; }
.footer-grid h4 { color: var(--text-main); font-size: 14px; margin: 0 0 12px; }
.footer-grid ul li { margin-bottom: 8px; }
.footer-grid ul li a:hover { color: var(--text-main); }
.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}

/* ===================== Responsive ===================== */
@media (max-width: 1024px) {
    .play-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    :root { --header-h: 58px; }
    body { padding-bottom: calc(var(--bottomnav-h) + var(--safe-b)); }
    .header-stats > .stat-games { display: none; }
    .header-stats .btn-topup-small { display: none; }
    .menu-toggle { display: flex; }
    .logo-link img { height: 28px; }
    .search-form { max-width: none; }
    .category-nav { display: none; }
    .bottom-nav { display: block; }
    .hero { padding: 26px 20px; border-radius: 18px; }
    .hero h1 { font-size: 23px; }
    .hero-badges { display: none; }
    .footer-grid { grid-template-columns: 1fr; }
    .game-grid { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 12px; }
    .stats-strip { gap: 8px; margin: 14px 0 24px; }
    .stat-pill { min-width: 0; padding: 10px 8px; }
    .stat-pill .num { font-size: 17px; }
    .stat-pill .lbl { font-size: 10px; }
    .showcase-3d { padding: 6px 42px; margin-bottom: 34px; }
    .showcase-stage { height: 240px; }
    .sc-card { width: 176px; height: 190px; margin: -95px 0 0 -88px; padding: 14px; }
    .sc-icon { font-size: 36px; }
    .sc-title { font-size: 13px; }
    .sc-nav { width: 34px; height: 34px; font-size: 16px; }
    .sc-prev { left: -4px; } .sc-next { right: -4px; }
    .lb-row { padding: 10px 12px; gap: 10px; }
    .lb-title { font-size: 13px; }
    .lb-plays { min-width: 0; font-size: 11px; }
    .play-toolbar { padding: 10px 14px; }
    .play-toolbar h1 { font-size: 16px; }
    .play-toolbar .stats { font-size: 12px; gap: 8px; }
    /* Chiều cao THẬT của khung được JS trong play.html gán trực tiếp bằng inline style
       (đo đúng khoảng trống còn lại của màn hình) — dòng dưới chỉ là giá trị dự phòng
       cho khoảnh khắc rất ngắn trước khi JS chạy xong, hoặc khi JS bị chặn. */
    .play-frame-wrap { aspect-ratio: auto; height: 70vh; }

    /* Trang chơi (body.play-page): ẩn thanh điều hướng dưới cùng để dành trọn không gian
       màn hình cho khung trò chơi — đây chính là phần diện tích còn thiếu khiến trước đây
       khung chơi hay bị che/tràn ở đáy màn hình trên các máy có màn hình ngắn. */
    body.play-page { padding-bottom: 0; }
    body.play-page .bottom-nav { display: none !important; }
}
@media (max-width: 420px) {
    .game-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
    /* Màn hình rất hẹp (~320-375px, ví dụ iPhone SE đời cũ): trước đây hàng header
       (nút menu + logo + ô tìm kiếm + chip lượt chơi) không đủ chỗ, khiến TOÀN BỘ
       trang bị kéo tràn ngang (cuộn ngang) — sửa bằng cách thu gọn logo/chip lượt
       chơi và ẩn bớt chữ "lượt chơi" trong header (giữ icon + số dư), chỉ ô tìm
       kiếm mới co giãn để lấp phần còn lại. */
    .header-inner { gap: 8px; }
    .logo-link img { height: 24px; }
    .wallet-chip { padding: 6px 9px; font-size: 12px; gap: 3px; }
    .wallet-chip .wc-label { display: none; }
    .search-form input { padding: 8px 10px; font-size: 13px; }
    .search-form button { padding: 0 12px; font-size: 13px; }
}