/* ==========================================================================
   NapGame24h — design system
   Bám sát napgame247.net: light theme mặc định, accent #3c83f6, viền #d4d7de,
   container 1216px, header cao 103px chia 2 tầng.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
    /* Accent gốc của reference: rgb(60,131,246) = hsl(217 91% 60%) */
    --primary-h: 217;
    --primary-s: 91%;
    --primary-l: 60%;

    --primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
    /* Nền đặc (nút, chip đang chọn) — tối hơn accent gốc để chữ trắng đạt 4.5:1 */
    --primary-strong: hsl(var(--primary-h) var(--primary-s) 38%);
    --primary-soft: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 0.08);
    --primary-line: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 0.35);
    /* Chữ màu nhấn — trộn với màu nền, xem theme-override.css */
    --primary-ink: color-mix(in srgb, var(--primary) 55%, var(--fg));

    /* Ba màu trạng thái: dùng làm CHỮ (`--ok`, `--warn`, `--danger`) và
       làm NỀN đặc (`-fill`). Tách đôi vì cùng một màu không thể vừa đủ đậm
       trên nền sáng vừa đủ nhạt trên nền tối. */
    --ok: #047857;
    --warn: #b45309;
    --danger: #b91c1c;
    --ok-fill: #047857;
    --warn-fill: #b45309;
    --danger-fill: #b91c1c;
    --violet: #7e22ce;

    /* Thang bo góc của reference: 12 (ảnh game), 16 (ô lối tắt, ảnh tin), 20 (khối) */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;

    /* Reference: header fixed 103px (36 tầng nav + 67 tầng logo), main padding-top 112 */
    --header-h: 112px;
    --topbar-h: 48px;
    --wrap: 1400px;
    --main-pt: 124px;

    --font: "Signika Negative", sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Chế độ sáng — mặc định, khớp napgame247.net */
html.light,
:root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --hover: rgba(0, 0, 0, 0.03);
    --line: #d4d7de;
    --line-hover: #b6bac4;
    --fg: #020817;
    --fg-muted: #4e545e; /* >= 7.6:1 trên trắng */
    --fg-dim: #6b7280; /* 4.83:1 trên trắng, 4.62:1 trên #f8fafc */
    --card-bg: #ffffff;
    color-scheme: light;
}

/* Chế độ tối — tuỳ chọn, giữ đủ độ tương phản */
html.dark {
    --bg: #030712;
    --surface: #0b1220;
    --surface-2: #0f172a;
    --hover: rgba(255, 255, 255, 0.04);
    --line: #1e293b;
    --line-hover: #334155;
    --fg: #e2e8f0;
    --fg-muted: #b6c2d4;
    --fg-dim: #94a3b8;
    --card-bg: #0b1220;
    /* Trên nền tối phải sáng hơn mới đọc được: #f87171 ≈ 7.2:1 trên #020817 */
    --ok: #34d399;
    --warn: #fbbf24;
    --danger: #f87171;
    /* Nền đặc vẫn dùng bản đậm để chữ trắng đủ tương phản */
    --ok-fill: #047857;
    --warn-fill: #b45309;
    --danger-fill: #b91c1c;
    color-scheme: dark;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

h1,
h2,
h3,
h4,
p {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

svg {
    flex-shrink: 0;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

::selection {
    background: var(--primary-soft);
    color: var(--fg);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
/* Reference: container rộng 1216px, căn giữa, padding ngang 0 (khung ngoài lo). */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width: 1280px) {
    .wrap {
        padding: 0;
    }
}

.page {
    min-height: 60vh;
    padding: var(--main-pt) 0 32px;
}

@media (max-width: 1023px) {
    .page {
        padding-bottom: 80px;
    }
}

/* Chỉ ≤767px menu ngang bị ẩn (header còn tầng logo ~66px) nên mới chừa ít chỗ phía trên. Ở 768–1023px menu ngang vẫn hiện
   (header ~115px) → giữ --main-pt, nếu không 42px đầu trang (banner) bị header cố định đè lên. */
@media (max-width: 767px) {
    .page {
        padding-top: calc(var(--header-h) - 39px);
    }
}

/* Các khối xếp dọc, cách nhau 16px — đúng như main > div của reference. */
.section {
    margin-top: 16px;
}

.section:first-child {
    margin-top: 0;
}

/* Reference: head cách lưới 16px; tiêu đề lớn 20/700 lh32, thanh accent 4×28 cách 12px. */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    min-height: 32px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: normal;
    color: var(--fg);
}

.section-title::before {
    content: "";
    width: 4px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--primary);
    flex-shrink: 0;
}

/* Khối nhỏ trong lưới 2 cột dùng tiêu đề 15px uppercase. */
.section-title.sm {
    font-size: 15px;
    font-weight: 700;
    line-height: 26.25px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    gap: 0;
}

/* Khối "Game Hot Nhất": reference dùng 20/700, có thanh accent, không uppercase. */
.section-title.md {
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: normal;
    text-transform: none;
    gap: 12px;
}

.section-title.md::before {
    display: block;
    height: 28px;
}

.section-title.sm::before {
    display: none;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    color: var(--primary-ink);
    white-space: nowrap;
}

.section-link:hover {
    color: var(--primary-strong);
}

.wrap-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ── Topbar + header ────────────────────────────────────────────────────── */
/* Reference: header fixed, 2 tầng.
   Tầng 1 (36px): dải link phụ 12px + nút giao diện/tiền tệ.
   Tầng 2 (67px): logo 180x60 + ô tìm kiếm + nút Đăng nhập (44px). */
.topbar {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    color: #5d636f;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--topbar-h);
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    overflow: hidden;
}

.topbar-links {
    display: flex;
    align-items: center;
    gap: 24px;
    overflow: hidden;
}

.topbar-links a {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #5d636f;
    white-space: nowrap;
}

.topbar-links a:hover {
    color: var(--primary-ink);
}

.topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #5d636f;
    cursor: pointer;
}

.topbar-btn:hover {
    color: var(--primary-ink);
}

.topbar-currency {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--fg-muted);
}

.topbar-marquee {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: var(--fg-muted);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-marquee strong {
    color: var(--fg);
    font-weight: 600;
}

.hide-sm {
    display: none;
}

@media (min-width: 768px) {
    .hide-sm {
        display: flex;
    }
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
}

/* Khung ngoài của header rộng 1280, nội dung 1216 — giống reference. */
.header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 64px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 60px;
    width: 180px;
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fg);
    flex-shrink: 0;
}

.logo-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: var(--primary-strong);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}

.logo span.accent {
    color: var(--primary-ink);
}

/* Ô tìm kiếm: cao 44, bo 12, viền 1px — thay cho khoảng trống giữa logo và nút. */
.search {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    max-width: 560px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
    transition: border-color 150ms var(--ease);
}

.search:focus-within {
    border-color: var(--primary);
}

.search input {
    flex: 1;
    height: 100%;
    padding: 0 14px;
    border: 0;
    background: transparent;
    font-size: 14px;
    outline: none;
}

.search input::placeholder {
    color: var(--fg-dim);
}

.search button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--fg-muted);
    cursor: pointer;
}

.search button:hover {
    color: var(--primary-ink);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Nút đăng nhập của reference: 44px cao, padding 10/24, bo 8, chữ trắng 16px. */
.header-actions .btn,
.header-actions > a.btn {
    height: 44px;
    padding: 0 24px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: normal;
    border-radius: var(--radius-sm);
    color: #f8fafc;
}

.header-actions .btn {
    font-family: var(--font);
    letter-spacing: -0.01em;
}

.balance-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 14px;
    font-weight: 700;
    color: var(--fg);
    white-space: nowrap;
}

.balance-chip:hover {
    border-color: var(--primary-line);
    color: var(--primary-ink);
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--fg-muted);
    cursor: pointer;
    transition: background 150ms var(--ease), color 150ms var(--ease);
}

.icon-btn:hover {
    background: var(--hover);
    color: var(--fg);
}

.avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    /* Màu avatar do người dùng chọn (cam/vàng rất sáng) nên phủ một lớp tối
       để chữ trắng luôn >= 4.5:1 bất kể màu nào. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    /* Phủ tối để chữ trắng đạt >= 4.5:1 với mọi màu avatar (cam/vàng rất sáng) */
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.36);
}

@media (max-width: 1023px) {
    .header-inner {
        height: 62px;
        gap: 10px;
    }

    .topbar-inner {
        padding: 0 16px;
    }

    .search {
        display: none;
    }
}

/* Nút đổi sáng/tối. Nằm cạnh nút Đăng nhập ở header, và trong thanh trên của
   admin/CTV/tài khoản. Dùng token nên tự đúng ở cả hai theme. */
.theme-toggle-napgame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--fg-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.theme-toggle-napgame:hover {
    background: var(--hover);
    color: var(--primary-ink);
    border-color: var(--line-hover);
}
.theme-toggle-napgame:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.theme-toggle-napgame .ico-moon,
.theme-toggle-napgame .ico-sun {
    display: flex;
}
/* Nền sáng hiện mặt trăng (bấm để sang tối), nền tối hiện mặt trời */
html.light .theme-toggle-napgame .ico-sun,
html.dark .theme-toggle-napgame .ico-moon {
    display: none;
}
/* Bản nhỏ cho thanh trên của admin/CTV */
.theme-toggle-napgame.theme-toggle-sm {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

/* ── Nút ────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--primary-strong);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease);
    white-space: nowrap;
}

.btn:hover {
    background: var(--primary-strong);
}

.btn:active {
    transform: translateY(1px);
}

.btn[disabled],
.btn.disabled {
    background: var(--surface-2);
    color: var(--fg-dim);
    border-color: var(--line);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-outline {
    background: transparent;
    border-color: var(--primary-line);
    color: var(--primary-ink);
}

.btn-outline:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
}

.btn-ghost {
    background: transparent;
    border-color: var(--line);
    color: var(--fg);
}

.btn-ghost:hover {
    background: var(--hover);
    border-color: var(--line-hover);
}

.btn-danger {
    background: var(--danger-fill);
}

.btn-danger:hover {
    background: color-mix(in srgb, var(--danger-fill) 88%, #000);
}

.btn-ok {
    background: var(--ok-fill);
}

.btn-ok:hover {
    background: color-mix(in srgb, var(--ok-fill) 88%, #000);
}

.btn-sm {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

.btn-xs {
    height: 26px;
    padding: 0 9px;
    font-size: 12px;
    border-radius: var(--radius-xs);
}

.btn-lg {
    height: 48px;
    padding: 0 24px;
    font-size: 15px;
}

.btn-block {
    width: 100%;
}

.btn-icon {
    padding: 0;
    width: 40px;
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.card-pad {
    padding: 16px;
}

@media (min-width: 768px) {
    .card-pad {
        padding: 24px;
    }
}

.panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.panel-head h2,
.panel-head h3 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fg-muted);
}

/* ── Banner carousel ───────────────────────────────────────────────────── */
/* Reference: khung 1216×300, 2 banner chồng lên nhau như swiper:
   banner 1 rộng 58.2% cao 255 căn giữa dọc, banner 2 rộng 49.7% cao 217 lệch phải.
   Banner 2 bị cắt ở mép phải đúng như ảnh gốc. */
.hero {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.hero-grid {
    position: absolute;
    inset: 0;
}

.hero-banner {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-2);
}

.hero-banner:nth-child(1) {
    left: 20.48%;
    width: 58.2%;
    height: 255px;
}

.hero-banner:nth-child(2) {
    left: 68%;
    width: 49.7%;
    height: 217px;
}

.hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--ease);
}

.hero-fill {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 28px 32px;
    color: #fff;
}

.hero-kicker {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: #ffffff2e;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    max-width: 88%;
}

.hero-sub {
    font-size: 13.5px;
    line-height: 1.5;
    color: #ffffffd9;
    max-width: 80%;
}

@media (max-width: 899px) {
    .hero {
        height: auto;
        overflow: visible;
    }

    .hero-grid {
        position: static;
        display: grid;
        gap: 12px;
    }

    .hero-banner,
    .hero-banner:nth-child(1),
    .hero-banner:nth-child(2) {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        height: auto;
        aspect-ratio: 750 / 422;
    }

    .hero-fill {
        padding: 18px;
        gap: 6px;
    }

    .hero-title {
        font-size: 17px;
        max-width: 100%;
    }

    .hero-sub {
        display: none;
    }
}

/* `.hidden` dùng khắp JS để bật/tắt khối (trạng thái tóm tắt đơn hàng, dòng
   giảm giá...). Phải dùng !important vì nhiều khối có display riêng (flex/grid). */
.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Giữ carousel cũ cho trang khác dùng lại */
.carousel {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--line);
}

.carousel-track {
    display: flex;
    transition: transform 400ms var(--ease);
}

.slide {
    flex: 0 0 100%;
    min-width: 100%;
    position: relative;
    padding: 32px 24px;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(120deg, #1d4ed8, #0f172a);
    color: #fff;
}

.slide-badge {
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    background: #ffffff26;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.carousel-nav {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

.carousel-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: #ffffff73;
    cursor: pointer;
}

.carousel-dot.active {
    background: #fff;
    width: 18px;
}

/* ── Lối tắt ────────────────────────────────────────────────────────────── */
/* Reference: một khối trắng bo 20, padding 8, chứa 5 ô 240x44 bo 16.
   Mỗi ô: icon 32x32 bo 12 nền đen 4% + nhãn 14px/600. */
.quick-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-top: 0;
    padding: 8px;
    height: 60px;
    box-sizing: border-box;
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: 1px solid var(--line);
}

.quick-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    box-sizing: border-box;
    padding: 6px 12px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 600;
    line-height: 18.2px;
    color: var(--fg);
    transition: background 150ms var(--ease);
}

.quick-item:hover {
    background: var(--hover);
}

.quick-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.04);
    color: var(--fg);
}

html.dark .quick-icon {
    background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 767px) {
    .quick-row {
        padding: 6px;
    }

    .quick-item {
        flex-direction: column;
        gap: 4px;
        height: auto;
        padding: 6px 4px;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
    }

    .quick-icon {
        width: 30px;
        height: 30px;
    }
}

/* ── Flash sale ─────────────────────────────────────────────────────────── */
/* Reference: dải ngang cao 91px, thẻ rộng 270px, nền trắng bo 20,
   ảnh 48x48 bo 8 bên trái, tên 14/600, giá 15.2/700 accent, giá gốc 11.2 gạch. */
.flash-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 0 16px;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
}

.flash-card {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 270px;
    height: 91px;
    padding: 10px;
    scroll-snap-align: start;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}

.flash-card:hover {
    border-color: var(--primary-line);
    box-shadow: var(--shadow);
}

.flash-thumb {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.04);
    overflow: hidden;
    font-size: 22px;
}

.flash-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flash-tag {
    position: absolute;
    top: -2px;
    left: -2px;
    padding: 1px 5px;
    border-radius: var(--radius-full);
    background: var(--danger-fill);
    color: #fff;
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.flash-body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.flash-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--fg);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.flash-sub {
    font-size: 11.2px;
    line-height: 18.6px;
    color: var(--fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flash-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 1px;
}

.flash-price .new {
    color: var(--primary-ink);
    font-weight: 700;
    font-size: 15.2px;
    line-height: 22.8px;
}

.flash-price .old {
    color: var(--fg-dim);
    font-size: 11.2px;
    text-decoration: line-through;
}

/* ── Game grid ──────────────────────────────────────────────────────────── */
/* Reference: 6 cột, gap 16, ô 189.3px. Mỗi thẻ: ảnh 120x168 bo 12 viền 1px
   (tỉ lệ 5:7), cách chữ 8px, tên 12/500 line-height 18 (2 dòng). */
.game-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (min-width: 640px) {
    .game-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .game-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .game-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Reference: ô rộng cố định 120px, không kéo giãn hết cột 189px. */
.game-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    width: 120px;
    max-width: 120px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    transition: transform 150ms var(--ease);
}

@media (hover: hover) {
    .game-card:hover {
        transform: translateY(-2px);
    }

    .game-card:hover .game-cover-inner {
        transform: scale(1.04);
    }
}

.game-cover {
    position: relative;
    width: 120px;
    height: 168px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-2);
}

.game-cover-inner {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    transition: transform 250ms var(--ease);
    position: relative;
}

.game-cover-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-cover-inner .fallback {
    font-size: 30px;
    font-weight: 800;
    /* thumb nền sáng (#f8fafc) nên chữ trắng không đọc được: dùng màu nền đậm */
    color: var(--fg-muted);
    text-shadow: none;
    padding: 8px;
    text-align: center;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.game-flags {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    z-index: 1;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--surface-2);
    color: var(--fg-muted);
    border: 1px solid var(--line);
}

.tag.hot {
    background: var(--danger-fill);
    color: #fff;
    border-color: transparent;
}

.tag.new {
    background: var(--ok-fill);
    color: #ffffff;
    border-color: transparent;
}

.tag.warn {
    background: color-mix(in srgb, var(--warn) 10%, transparent);
    /* Chữ tag chỉ 9.5px nên cần đậm hơn --warn để đạt 4.5:1 trên nền tint */
    color: color-mix(in srgb, var(--warn) 70%, var(--fg));
    border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}

.tag.ok {
    background: color-mix(in srgb, var(--ok) 10%, transparent);
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}

.tag.danger {
    background: color-mix(in srgb, var(--danger) 16%, transparent);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.tag.info {
    background: var(--primary-soft);
    color: var(--primary-ink);
    border-color: var(--primary-line);
}

.tag.muted {
    color: var(--fg-dim);
}

/* Chữ dưới ảnh: tên 12/500, tối đa 2 dòng, cao 18px mỗi dòng. */
.game-body {
    padding: 0;
    width: 100%;
    text-align: center;
}

.game-name {
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: var(--fg);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}

.game-meta {
    margin-top: 2px;
    font-size: 11px;
    color: var(--fg-muted);
    display: flex;
    justify-content: center;
    gap: 6px;
}

.game-price {
    color: var(--primary-ink);
    font-weight: 600;
    font-size: 11px;
}

/* ── Kệ game (trang /games, /game/... liên quan) ──────────────────────────
   Đồng bộ với panel "Game Hot Nhất" ở trang chủ: panel bo 20px, lưới 8 cột,
   ảnh dọc tỉ lệ 5:7. Khác ở chỗ dùng token nên dark mode tự đúng, và không
   hardcode kích thước px để cột co giãn theo bề rộng thật. */
.game-shelf {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 18px 20px 20px;
    box-shadow: var(--shadow);
}

.game-shelf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.game-shelf-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--fg);
}

.game-shelf-title::before {
    content: "";
    width: 4px;
    height: 20px;
    border-radius: 999px;
    background: var(--primary);
}

.game-tile-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 18px 14px;
}

.game-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    min-width: 0;
    transition: transform 180ms var(--ease);
}

@media (hover: hover) {
    .game-tile:hover {
        transform: translateY(-4px);
    }

    .game-tile:hover .game-tile-cover {
        border-color: var(--primary-line);
        box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--primary) 30%, transparent);
    }

    .game-tile:hover .game-tile-name {
        color: var(--primary-ink);
    }
}

.game-tile-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 7;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-2);
    transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}

.game-tile-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.game-tile-cover .fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--fg-muted);
    letter-spacing: -.02em;
}

.game-tile-name {
    width: 100%;
    margin-top: 7px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    color: var(--fg);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 150ms var(--ease);
}

.game-tile-meta {
    margin-top: 2px;
    font-size: 11px;
    color: var(--fg-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.game-tile-price {
    color: var(--primary-ink);
    font-weight: 700;
}

/* Kiểu thẻ game "modern": ảnh vuông 64px bên trái, chữ bên phải (dạng hàng).
   classic (mặc định) là ảnh dọc 5:7 xếp trên chữ. */
html.card-modern .game-tile-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

html.card-modern .game-tile {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

html.card-modern .game-tile-cover {
    width: 64px;
    height: 64px;
    aspect-ratio: auto;
    flex-shrink: 0;
}

html.card-modern .game-tile-name {
    margin-top: 0;
    text-align: left;
    -webkit-line-clamp: 1;
    font-size: 13px;
}

html.card-modern .game-tile-meta {
    text-align: left;
    font-size: 11.5px;
}

@media (max-width: 1023px) {
    html.card-modern .game-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    html.card-modern .game-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
    html.card-modern .game-tile-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1279px) {
    .game-tile-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 12px; }
}

@media (max-width: 1023px) {
    .game-shelf { padding: 16px; }
    .game-tile-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .game-shelf { border-radius: var(--radius-lg); padding: 14px; }
    .game-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
    .game-tile-name { font-size: 11.5px; }
}

@media (max-width: 479px) {
    .game-shelf { padding: 12px; }
    .game-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
}

/* ── Panel 2×2 danh mục ────────────────────────────────────────────────── */
.cat-panels {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .cat-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cat-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 8px;
}

@media (min-width: 480px) {
    .cat-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: background 150ms var(--ease);
}

.cat-item:hover {
    background: var(--hover);
}

.cat-thumb {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}

.cat-item .name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cat-item .sub {
    font-size: 11px;
    color: var(--fg-dim);
    margin-top: 1px;
}

/* ── Product / card tiles ──────────────────────────────────────────────── */
/* Reference: khối 2 cột, mỗi cột là lưới 2 hàng x 3 ô.
   Ô sản phẩm/thẻ là một dòng cao 58px: chữ trái, không ảnh, bo 12,
   viền mảnh, hover đổi viền sang accent. */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (min-width: 900px) {
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
    transition: border-color 150ms var(--ease);
}

.product-card:hover {
    border-color: var(--primary-line);
}

.product-thumb {
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    border-bottom: 1px solid var(--line);
    position: relative;
}

.product-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.product-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fg);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-sub {
    font-size: 11.5px;
    color: var(--fg-muted);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: auto;
    padding-top: 2px;
}

.price-now {
    font-weight: 700;
    color: var(--primary-ink);
    font-size: 13.5px;
}

.price-old {
    font-size: 11px;
    color: var(--fg-dim);
    text-decoration: line-through;
}

.price-off {
    font-size: 10px;
    font-weight: 700;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 13%, transparent);
    border-radius: var(--radius-xs);
    padding: 1px 4px;
}

/* Ô dòng (sản phẩm / nhà mạng) — dùng ở các khối 2 cột của trang chủ. */
.tile-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 66px;
    padding: 6px;
    box-sizing: border-box;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    transition: background 150ms var(--ease);
}

.tile-row:hover {
    background: var(--hover);
}

/* Panel sản phẩm/thẻ cào dùng hàng thấp hơn (58px như reference). */
.tile-row.compact {
    height: 58px;
}

.tile-row.compact .tile-thumb {
    width: 34px;
    height: 34px;
}

.tile-row.compact .tile-name {
    -webkit-line-clamp: 1;
    max-height: 17px;
}

.panel-card.tight {
    padding-bottom: 30px;
}

.tile-thumb {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.04);
    font-size: 13px;
    font-weight: 700;
    color: var(--fg-muted);
    overflow: hidden;
}

.tile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tile-body {
    min-width: 0;
    flex: 1;
}

.tile-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 16.9px;
    color: var(--fg);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 33.8px;
}

.tile-sub {
    font-size: 12px;
    line-height: 18px;
    color: var(--fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nhãn giảm giá nhỏ nằm góc trên trái của ô thẻ cào. */
.tile-badge {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

/* Khối 2 cột của trang chủ (Game Trending | Game mới nhất, ...). */
.pair {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Panel chứa khối 2 cột: nền trắng, viền mảnh, bo 20, padding 16. */
.panel-card {
    border-radius: var(--radius-xl);
    background: var(--surface);
    padding: 20px;
    padding-bottom: 22px;
    overflow: hidden;
}

.panel-card > .section-head {
    margin-bottom: 16px;
    min-height: 0;
}

/* Danh sách dòng 2 cột bên trong panel (mỗi cột 3 ô). */
.tile-list {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr;
}

@media (min-width: 560px) {
    .tile-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .tile-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── Danh mục / filter ─────────────────────────────────────────────────── */
.chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 6px;
    scrollbar-width: none;
}

.chips::-webkit-scrollbar {
    display: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--fg-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 150ms var(--ease);
}

.chip:hover {
    border-color: var(--line-hover);
    color: var(--fg);
}

.chip.active {
    background: var(--primary-strong);
    border-color: var(--primary);
    color: #fff;
}

/* ── Game detail ───────────────────────────────────────────────────────── */
.game-hero {
    position: relative;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    overflow: hidden;
    padding: 20px;
    margin-top: 16px;
    background: var(--surface);
}

.game-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 260px at 12% 0%, var(--hero-tint, var(--primary-soft)), transparent 70%),
        linear-gradient(180deg, transparent, var(--bg));
    opacity: 0.9;
    pointer-events: none;
}

.game-hero-inner {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: center;
}

.game-icon-lg {
    width: 76px;
    height: 76px;
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    box-shadow: var(--shadow);
    overflow: hidden;
}

@media (min-width: 768px) {
    .game-icon-lg {
        width: 120px;
        height: 120px;
        font-size: 44px;
    }
}

.game-hero h1 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .game-hero h1 {
        font-size: 32px;
    }
}

.game-hero .tagline {
    margin-top: 6px;
    font-size: 13.5px;
    color: var(--fg-muted);
    max-width: 640px;
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--fg-muted);
    flex-wrap: wrap;
}

.stars {
    color: var(--warn);
    letter-spacing: 1px;
    font-size: 12px;
}

.detail-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 20px;
    align-items: start;
}

@media (min-width: 1024px) {
    .detail-grid {
        grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    }
}

/* Gói nạp */
.pack-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 640px) {
    .pack-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .pack-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.pack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--surface);
    cursor: pointer;
    text-align: center;
    transition: border-color 150ms var(--ease), background 150ms var(--ease);
    overflow: hidden;
}

.pack:hover {
    border-color: var(--line-hover);
}

.pack.selected {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.pack.selected::after {
    content: "✓";
    position: absolute;
    top: 6px;
    right: 8px;
    color: var(--primary-ink);
    font-weight: 800;
    font-size: 13px;
}

.pack-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px 8px 3px;
    border-bottom-right-radius: var(--radius-xs);
    background: linear-gradient(90deg, #ef4444, #f97316);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pack-icon {
    font-size: 26px;
    line-height: 1;
}

.pack-name {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 33px;
}

.pack-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-ink);
    margin-top: auto;
}

.pack-old {
    font-size: 11px;
    color: var(--fg-dim);
    text-decoration: line-through;
}

/* Panel đơn hàng */
.order-panel {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--surface);
    overflow: hidden;
}

.order-panel-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.order-panel-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
}

.summary-line .label {
    color: var(--fg-muted);
}

.summary-line .value {
    font-weight: 600;
}

.summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}

.summary-total .label {
    font-weight: 600;
}

.summary-total .value {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-ink);
    letter-spacing: -0.01em;
}

.order-panel-foot {
    padding: 0 16px 16px;
}

.empty-box {
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    padding: 24px 16px;
    text-align: center;
    color: var(--fg-dim);
    font-size: 13px;
}

.empty-box .big {
    font-size: 22px;
    margin-bottom: 6px;
    opacity: 0.55;
}

/* ── Form ───────────────────────────────────────────────────────────────── */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field > label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--fg-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.field > label .req {
    color: var(--danger);
}

.field .hint {
    font-size: 11.5px;
    color: var(--fg-dim);
    line-height: 1.4;
}

.input,
.select,
.textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface-2);
    font-size: 14px;
    transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--primary-line);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--fg-dim);
}

.textarea {
    min-height: 88px;
    resize: vertical;
    line-height: 1.5;
}

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b9ab0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 34px;
}

.form-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .form-grid.two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--fg-muted);
    cursor: pointer;
}

.checkbox input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--primary);
    flex-shrink: 0;
}

.segmented {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface-2);
}

.segmented button,
.segmented a {
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--fg-muted);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background 150ms var(--ease), color 150ms var(--ease);
}

.segmented button.active,
.segmented a.active {
    background: var(--primary-strong);
    color: #fff;
}

/* Biến thể radio: .segmented > label > input + span (dùng ở trang nạp tiền).
   Không có khối này thì input hiện thô và nhãn dính nhau. */
.segmented label {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.segmented input[type="radio"],
.segmented input[type="checkbox"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.segmented label > span {
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--fg-muted);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 150ms var(--ease), color 150ms var(--ease);
}

.segmented label:hover > span {
    color: var(--fg);
}

.segmented input:checked + span {
    background: var(--primary-strong);
    color: #fff;
    font-weight: 600;
}

.segmented input:focus-visible + span {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Danh sách bước: global reset đặt list-style:none, phải bật lại số thứ tự */
.step-list {
    list-style: decimal;
    padding-left: 20px;
}

.step-list > li::marker {
    color: var(--fg-dim);
    font-weight: 700;
}

/* ── Soft navigation: trạng thái đang tải ───────────────────────────────
   Thanh tiến trình mảnh ở đầu trang thay cho việc cả trang trắng xoá đi
   tải lại. Chỉ là tín hiệu thị giác, không chặn tương tác. */
html.is-navigating::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 9999;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: softnav-bar 900ms linear infinite;
}

@keyframes softnav-bar {
    from { background-position: -40% 0; }
    to { background-position: 140% 0; }
}

/* Nội dung mờ nhẹ trong lúc chờ — đủ để biết đang chuyển, không nhấp nháy */
html.is-navigating main.page {
    opacity: .55;
    transition: opacity 120ms var(--ease);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    html.is-navigating::before { animation: none; background: var(--primary); }
}

/* ── Tiện ích dùng khắp view ───────────────────────────────────────────────
   Các class dưới đây được dùng ở 17–71 file nhưng CHƯA TỪNG có định nghĩa
   trong CSS: phần tử rơi về style mặc định (chữ 15px màu --fg), khiến tiêu đề
   phụ, nhãn mờ, khối canh giữa… đều mất tác dụng. Định nghĩa tại đây. */
.small { font-size: 12.5px; line-height: 1.5; }
.muted { color: var(--fg-muted); }
.dim { color: var(--fg-dim); }
.mono {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.ok-text { color: var(--ok); }
.danger-text { color: var(--danger); }
.warn-text { color: var(--warn); }
.primary-text { color: var(--primary-ink); }

/* Hàng ngang có khoảng cách; .row-between đẩy hai đầu */
.row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

/* Nhãn/giá trị trong bảng tóm tắt */
.lbl { color: var(--fg-muted); }
.val { color: var(--fg); font-weight: 600; }

/* Nút chỉ có icon: vùng chạm đủ lớn, không viền */
.ico-btn {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--fg-dim);
    cursor: pointer;
    vertical-align: middle;
    transition: background 150ms var(--ease), color 150ms var(--ease);
}
.ico-btn:hover {
    background: var(--surface-2);
    color: var(--fg);
}

/* Lưới 3 cột dùng ở vài trang danh mục */
.cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 960px) {
    .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .cols-3 { grid-template-columns: minmax(0, 1fr); }
    .row-between.wrap-row { flex-wrap: wrap; }
}

/* ── Xếp dọc ───────────────────────────────────────────────────────────────
   `.stack` dùng ở ~20 view nhưng trước đây KHÔNG có định nghĩa nào trong
   app.css — view nào quên style="gap:N" thì các panel dính liền nhau (0px).
   Đặt gap mặc định ở đây để mọi .stack luôn tách rời. */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--density-gap, 14px);
}

/* Biến thể không muốn khoảng cách (dùng trong form có style gap riêng) */
.stack.is-flush { gap: 0; }

/* ── Danh sách gọn trong panel (Đơn gần đây, Biến động số dư) ─────────────
   Dùng <ul> thật thay vì nhiều <a> xếp chồng: có icon, tiêu đề, dòng phụ và
   cột số tiền canh phải thẳng hàng giữa các hàng. */
.mini-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.mini-list > li + li {
    border-top: 1px solid var(--line);
}
.mini-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    color: inherit;
    text-decoration: none;
    transition: background 120ms var(--ease);
}
a.mini-row:hover {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.mini-ico {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--fg-dim);
    flex-shrink: 0;
}
.mini-ico.is-in {
    background: color-mix(in srgb, var(--ok) 12%, transparent);
    color: var(--ok);
}
.mini-ico.is-out {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
}
.mini-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mini-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mini-meta {
    font-size: 11.5px;
    color: var(--fg-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mini-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}
.mini-amount {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .mini-row { padding: 10px 12px; gap: 9px; }
    .mini-ico { width: 26px; height: 26px; }
    .mini-side { gap: 2px; }
}

/* ── Callout ────────────────────────────────────────────────────────────── */
.callout {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--surface-2);
    font-size: 13px;
    line-height: 1.5;
    color: var(--fg-muted);
}

.callout .ico {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--primary-ink);
}

.callout.warn {
    border-color: color-mix(in srgb, var(--warn) 40%, transparent);
    background: color-mix(in srgb, var(--warn) 10%, transparent);
    color: var(--warn);
}

.callout.warn .ico {
    color: var(--warn);
}

.callout.ok {
    border-color: color-mix(in srgb, var(--ok) 40%, transparent);
    background: color-mix(in srgb, var(--ok) 10%, transparent);
    color: var(--ok);
}

.callout.ok .ico {
    color: var(--ok);
}

.callout.danger {
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
}

.callout.danger .ico {
    color: var(--danger);
}

.callout strong {
    color: var(--fg);
}

/* ── Bảng ───────────────────────────────────────────────────────────────── */
/* Bảng trong cột hẹp (sidebar): bỏ min-width 640px để không bị cắt cột */
.table-wrap.is-compact table.table {
    min-width: 0;
}

.table-wrap.is-compact .table thead th,
.table-wrap.is-compact .table tbody td {
    padding: 9px 10px;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
}

table.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    min-width: 640px;
}

/* Header dính khi cuộn bảng dài, nền đặc để hàng không lộ qua */
.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-dim);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

/* Hàng: kẻ mảnh, hover rõ, zebra rất nhẹ để không rối mắt */
.table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    color: var(--fg);
}

.table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr {
    transition: background 120ms var(--ease);
}

.table tbody tr:hover td {
    background: color-mix(in srgb, var(--primary) 7%, transparent);
}

/* Ô đầu tiên đậm hơn một chút — mắt bám vào cột định danh */
.table tbody td:first-child {
    font-weight: 500;
}

/* Cột thao tác: gom nút về bên phải, không xuống dòng */
.table td.actions {
    text-align: right;
    white-space: nowrap;
}

.table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.table .cell-main {
    font-weight: 500;
}

.table .cell-sub {
    font-size: 11.5px;
    color: var(--fg-dim);
    margin-top: 1px;
}

/* ── Trạng thái ────────────────────────────────────────────────────────── */
.status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status.ok {
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 8%, transparent);
    border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}

.status.warn {
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 8%, transparent);
    border-color: color-mix(in srgb, var(--warn) 30%, transparent);
}

.status.info {
    color: var(--primary-ink);
    background: var(--primary-soft);
    border-color: var(--primary-line);
}

.status.danger {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

.status.muted {
    color: var(--fg-dim);
    background: var(--surface-2);
    border-color: var(--line);
}

/* ── Thống kê ───────────────────────────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 1024px) {
    .stat-grid.cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.stat {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat .stat-label {
    font-size: 11.5px;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.stat .stat-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .stat .stat-value {
        font-size: 26px;
    }
}

.stat .stat-sub {
    font-size: 11.5px;
    color: var(--fg-muted);
}

.stat.accent .stat-value {
    color: var(--primary-ink);
}

.stat.ok .stat-value {
    color: var(--ok);
}

.stat.warn .stat-value {
    color: var(--warn);
}

/* Biểu đồ cột thuần CSS */
.bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 160px;
    padding: 8px 4px 0;
}

.bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    justify-content: flex-end;
    min-width: 0;
}

.bar {
    width: 100%;
    max-width: 40px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--primary), var(--primary-strong));
    min-height: 3px;
    transition: opacity 150ms var(--ease);
    position: relative;
}

.bar-col:hover .bar {
    opacity: 0.82;
}

.bar-label {
    font-size: 10px;
    color: var(--fg-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Progress */
.progress {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    overflow: hidden;
}

.progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tab {
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--fg-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 150ms var(--ease), border-color 150ms var(--ease);
}

.tab:hover {
    color: var(--fg);
}

.tab.active {
    color: var(--primary-ink);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

/* ── Tài khoản (sidebar) ───────────────────────────────────────────────── */
.account-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 1024px) {
    .account-grid {
        grid-template-columns: 240px minmax(0, 1fr);
    }
}

.side-nav {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 8px;
    position: sticky;
    top: calc(var(--header-h) + 16px);
}

.side-nav .user-mini {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
}

.side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    color: var(--fg-muted);
    transition: background 150ms var(--ease), color 150ms var(--ease);
}

.side-link:hover {
    background: var(--hover);
    color: var(--fg);
}

.side-link.active {
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-weight: 600;
}

.side-link .count {
    margin-left: auto;
    font-size: 11px;
    color: var(--fg-dim);
}

/* ── Menu quản lý: nhóm mở/đóng (details), mục con, huy hiệu ─────────────── */
.admin-side details.nav-fold > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.admin-side details.nav-fold > summary::-webkit-details-marker {
    display: none;
}

.admin-side .nav-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-side .nav-caret {
    margin-left: auto;
    display: inline-flex;
    color: var(--fg-dim);
    transition: transform 150ms var(--ease);
}

.admin-side details.nav-fold[open] > summary .nav-caret {
    transform: rotate(180deg);
}

.admin-side .side-link.has-active {
    color: var(--primary-ink);
    font-weight: 600;
}

.admin-side .nav-sub {
    margin: 2px 0 4px 17px;
    padding-left: 8px;
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.admin-side .side-link.sub {
    padding: 6px 10px;
    font-size: 13px;
}

.nav-badge {
    margin-left: auto;
    min-width: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--danger, #ef4444);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* ── Trang danh sách quản lý: thẻ thống kê, bộ lọc, bảng, phân trang ─────── */
.mgmt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.mgmt-head h2 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
}

.mgmt-head .sub {
    font-size: 12.5px;
    color: var(--fg-muted);
}

.stat-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

@media (min-width: 1024px) {
    .stat-tiles.cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .stat-tiles.cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.stat-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}

a.stat-tile:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.stat-tile .v {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.stat-tile .l {
    font-size: 12px;
    color: var(--fg-muted);
    margin-top: 2px;
}

.stat-tile .ico-box {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary-ink);
}

.stat-tile.ok .ico-box {
    background: color-mix(in srgb, var(--ok, #10b981) 16%, transparent);
    color: var(--ok, #10b981);
}

.stat-tile.warn .ico-box {
    background: color-mix(in srgb, var(--warn, #f59e0b) 18%, transparent);
    color: var(--warn, #f59e0b);
}

.stat-tile.info .ico-box {
    background: color-mix(in srgb, #06b6d4 16%, transparent);
    color: #0891b2;
}

.data-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}

.data-card > .data-card-head {
    padding: 14px 16px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-muted);
    border-bottom: 1px solid var(--line);
}

.filter-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) {
    .filter-bar {
        grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
        align-items: end;
    }
    .filter-bar.cols-3 {
        grid-template-columns: 1.6fr 1fr auto;
    }
}

.filter-bar label {
    display: block;
    font-size: 11.5px;
    color: var(--fg-muted);
    margin-bottom: 4px;
}

.data-card .table-wrap {
    border: 0;
    border-radius: 0;
}

.data-card .table thead th {
    font-size: 11.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.person-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.person-cell .who {
    min-width: 0;
}

.person-cell .who .n {
    display: block;
    font-weight: 700;
    font-size: 13px;
    color: var(--ok, #10b981);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person-cell .who .e {
    display: block;
    font-size: 11.5px;
    color: var(--fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--primary-ink);
    cursor: pointer;
    transition: background 150ms var(--ease);
}

.icon-btn:hover {
    background: var(--hover);
}

.icon-btn.danger {
    color: var(--danger, #ef4444);
}

.icon-btn.ok {
    color: var(--ok, #10b981);
}

.reject-pop {
    position: relative;
}

.reject-pop > summary {
    list-style: none;
    cursor: pointer;
}

.reject-pop > summary::-webkit-details-marker {
    display: none;
}

.reject-pop .pop {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.pager-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--fg-muted);
}

.pager-bar .pagination {
    margin: 0;
}

.side-nav-mobile {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.side-nav-mobile::-webkit-scrollbar {
    display: none;
}

@media (min-width: 1024px) {
    .side-nav-mobile {
        display: none;
    }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
/* Reference: nền trắng, cách trên 48px, 4 cột rộng 264 gap 32 trong khung 1152,
   tiêu đề 16/700 cao 28, link 14/400 màu #5c6370 line-height 21. */
.footer {
    background: var(--surface);
    margin-top: 48px;
    padding: 48px 24px;
}

/* Reference dùng container 1200 cho footer, hẹp hơn nội dung 1216. */
.footer > .wrap {
    max-width: 1200px;
    padding: 0;
    width: 100%;
}

.footer-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
    max-width: 1152px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.footer h4,
.footer h6 {
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    color: var(--fg);
    margin: 0 0 16px;
    letter-spacing: normal;
    text-transform: none;
}

.footer a,
.footer li {
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: var(--fg-muted);
}

.footer li a {
    gap: 6px;
    align-items: center;
}

/* Cột Liên Hệ trong reference có icon 16px + padding dọc → hàng cao 27px. */
.footer-grid > div:last-child li a {
    padding: 3px 0;
}

.footer li a svg {
    flex-shrink: 0;
    color: var(--fg-dim);
}

.footer li {
    margin: 0 0 8px;
}

.footer a:hover {
    color: var(--primary-ink);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1152px;
    margin: 28px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--fg-muted);
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--fg-muted);
}

/* ── Tin tức ────────────────────────────────────────────────────────────── */
/* Reference: 4 cột 280px gap 32. Ảnh 280x220 bo 16, chữ 16/600 line-height 25.6. */
.news-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
    margin-top: 32px;
}

.section:has(.news-grid) > .section-head {
    margin-bottom: 0;
}

.section:has(.news-grid) .section-link {
    font-size: 14px;
    line-height: 21px;
}

@media (min-width: 640px) {
    .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .news-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.news-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.news-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 28 / 22;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-2);
}

.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card:hover .news-thumb img {
    transform: scale(1.03);
}

.news-thumb img {
    transition: transform 300ms var(--ease);
}

.news-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 25.6px;
    color: var(--fg);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Khối SEO ───────────────────────────────────────────────────────────── */
.seo-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    padding: 32px;
}

.seo-card h2,
.seo-card h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    margin: 0 0 24px;
    color: var(--fg);
}

.seo-card p {
    font-size: 17px;
    line-height: 28.9px;
    color: var(--fg-muted);
    max-width: 1150px;
}

/* ── Dải thông báo ──────────────────────────────────────────────────────── */
.notice-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 39px;
    padding: 4px 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: #fde68a;
    text-align: center;
}

.notice-row strong {
    color: #fde68a;
    font-weight: 700;
}

/* ── Bottom nav mobile ─────────────────────────────────────────────────── */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 35;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    font-size: 10px;
    color: var(--fg-dim);
    min-height: 52px;
}

.bottom-nav a.active,
.bottom-nav a:hover {
    color: var(--primary-ink);
}

/* Nút Tìm kiếm ở giữa: hình tròn nhô lên khỏi thanh (mở lớp phủ tìm kiếm). */
.bottom-nav .bn-search {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.bottom-nav .bn-search-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-top: -22px;
    border-radius: 50%;
    background: var(--primary-strong, #2563eb);
    color: #fff;
    border: 4px solid var(--surface, #fff);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-strong, #2563eb) 40%, transparent);
    transition: transform 150ms var(--ease);
}
.bottom-nav .bn-search:active .bn-search-circle { transform: scale(.94); }
.bottom-nav .bn-search:focus-visible { outline: none; }
.bottom-nav .bn-search:focus-visible .bn-search-circle { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-strong, #2563eb) 45%, transparent); }

@media (min-width: 768px) {
    .bottom-nav {
        display: none;
    }
}

@media (max-width: 767px) {
    .footer {
        padding-bottom: 76px;
    }
}

/* ── Toast ────────────────────────────────────────────────────────────────
   Thông báo phải NHÌN THẤY ngay: góc phải phía trên, chữ 14px, có tiêu đề + biểu tượng tròn màu, nền pha màu theo loại
   (xanh = thành công, đỏ = lỗi, màu chủ đạo = thông tin) và vạch màu đậm bên trái — không còn chỉ là khung viền mảnh. */
.toast-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

/* Máy tính: nằm DƯỚI header (cố định) để không che số dư/avatar; điện thoại giữ ở mép trên cho dễ thấy */
@media (min-width: 768px) {
    .toast-stack { top: calc(var(--header-h) + 10px); }
}

.toast {
    --tone: var(--primary);
    --tone-fill: var(--primary-strong);
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent);
    border-left: 5px solid var(--tone);
    background: color-mix(in srgb, var(--tone) 13%, var(--surface));
    color: var(--fg);
    box-shadow: 0 12px 28px -10px rgba(2, 8, 23, .45), 0 2px 6px rgba(2, 8, 23, .18);
    font-size: 14px;
    line-height: 1.45;
    animation: toast-in 220ms ease-out;
}

.toast.ok { --tone: var(--ok); --tone-fill: var(--ok-fill); }
.toast.error { --tone: var(--danger); --tone-fill: var(--danger-fill); }
.toast.info { --tone: var(--primary); --tone-fill: var(--primary-strong); }

.toast .ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tone-fill);
    color: #fff;
}

.toast .ico svg { width: 15px; height: 15px; }

.toast .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast .ttl { display: block; font-weight: 700; font-size: 14px; margin-bottom: 1px; }
.toast .msg { display: block; font-weight: 500; }

.toast .close {
    flex-shrink: 0;
    margin: -4px -4px 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--fg-dim);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.toast .close:hover { background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--fg); }

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Khung thông báo ngay trong form (vd form đặt đơn ở trang game) ───────────────────────────────────────────────
   Toast nằm trên cùng màn hình nên khách đang nhìn nút "Đặt đơn" dễ bỏ sót; khung này hiện NGAY tại form và tự cuộn tới. */
.form-alert {
    --tone: var(--primary);
    --tone-fill: var(--primary-strong);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 12px;
    padding: 13px 14px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent);
    border-left: 6px solid var(--tone);
    background: color-mix(in srgb, var(--tone) 13%, var(--surface));
    color: var(--fg);
    font-size: 14.5px;
    line-height: 1.5;
    scroll-margin: 90px;
    animation: toast-in 200ms ease-out;
}

.form-alert[hidden] { display: none; }
.form-alert.ok { --tone: var(--ok); --tone-fill: var(--ok-fill); }
.form-alert.error { --tone: var(--danger); --tone-fill: var(--danger-fill); }
.form-alert.info { --tone: var(--primary); --tone-fill: var(--primary-strong); }
.form-alert .ico { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tone-fill); color: #fff; }
.form-alert .ico svg { width: 16px; height: 16px; }
.form-alert .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.form-alert .ttl { display: block; font-weight: 700; }
.form-alert .msg { display: block; font-weight: 500; }
.form-alert .msg + .msg { margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
    .toast, .form-alert { animation: none; }
}

/* ── Modal / drawer ────────────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: #000000a8;
    display: grid;
    place-items: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms var(--ease), visibility 200ms;
}

.modal-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.modal {
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 24px 48px #0009;
    transform: translateY(8px);
    transition: transform 200ms var(--ease);
}

.modal-backdrop.open .modal {
    transform: none;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.modal-head h3 {
    font-size: 16px;
    font-weight: 700;
}

.modal-body {
    padding: 20px;
}

.modal-foot {
    padding: 0 20px 20px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ── Support widget ────────────────────────────────────────────────────── */
.support-fab {
    position: fixed;
    right: 16px;
    bottom: 76px;
    z-index: 30;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    border: 0;
    background: linear-gradient(135deg, #9333ea, #a855f7);
    color: #fff;
    box-shadow: 0 8px 24px #9333ea55;
    cursor: pointer;
    transition: transform 150ms var(--ease);
}

.support-fab:hover {
    transform: translateY(-2px);
}

@media (min-width: 768px) {
    .support-fab {
        bottom: 24px;
        right: 24px;
        width: 52px;
        height: 52px;
    }
}

/* ── Auth ───────────────────────────────────────────────────────────────── */
.auth-shell {
    max-width: 440px;
    margin: 40px auto;
    padding: 0 16px;
}

.auth-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 24px;
    box-shadow: var(--shadow);
}

@media (min-width: 768px) {
    .auth-card {
        padding: 32px;
    }
}

.auth-card h1 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.auth-card .lede {
    color: var(--fg-muted);
    font-size: 13.5px;
    margin-top: 6px;
    margin-bottom: 20px;
}

.auth-switch {
    text-align: center;
    font-size: 13px;
    color: var(--fg-muted);
    margin-top: 18px;
}

.auth-switch a {
    color: var(--primary-ink);
    font-weight: 600;
}

/* ── Article ────────────────────────────────────────────────────────────── */
.prose {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--fg-muted);
}

.prose h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--fg);
    margin: 24px 0 8px;
}

.prose h3 {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--fg);
    margin: 20px 0 6px;
}

.prose p {
    margin: 10px 0;
}

.prose ul,
.prose ol {
    margin: 10px 0 10px 20px;
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

.prose li {
    margin: 4px 0;
}

.prose strong {
    color: var(--fg);
    font-weight: 600;
}

.prose a {
    color: var(--primary-ink);
    text-decoration: underline;
}

.prose code {
    font-family: var(--mono);
    font-size: 13px;
    background: var(--surface-2);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--line);
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.pagination a,
.pagination span {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--fg-muted);
}

.pagination a:hover {
    border-color: var(--primary-line);
    color: var(--primary-ink);
}

/* Dấu "…" giữa các cụm trang: không phải nút, không viền */
.pagination .gap {
    border-color: transparent;
    color: var(--fg-dim);
    cursor: default;
    min-width: 22px;
    padding: 0;
}

.pagination .disabled {
    opacity: .4;
    cursor: not-allowed;
}

.pagination .active {
    background: var(--primary-strong);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}

.pagination .disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ── Review ─────────────────────────────────────────────────────────────── */
.review {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.review:last-child {
    border-bottom: 0;
}

.review-body {
    flex: 1;
    min-width: 0;
}

.review-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.review-name {
    font-size: 13px;
    font-weight: 600;
}

.review-time {
    font-size: 11.5px;
    color: var(--fg-dim);
}

.review-content {
    font-size: 13.5px;
    color: var(--fg-muted);
    margin-top: 4px;
    line-height: 1.55;
}

/* ── Đổi sáng/tối kiểu "kéo rèm" (xem animateThemeChange trong app.js) ────────
   Ảnh trang MỚI hiện qua mask quét ngang từ trái sang phải (--vt-p do JS chạy); ảnh cũ đứng yên bên dưới. */
@property --vt-p {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 2;
    --vt-p: 0%;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--vt-p) - 18%), transparent var(--vt-p));
    mask-image: linear-gradient(90deg, #000 calc(var(--vt-p) - 18%), transparent var(--vt-p));
}

/* Dự phòng khi chưa có View Transitions: chuyển màu mượt, chỉ tồn tại trong lúc đổi. */
html.theme-fading,
html.theme-fading *,
html.theme-fading *::before,
html.theme-fading *::after {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, fill 0.25s ease, stroke 0.25s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* ── Admin shell ───────────────────────────────────────────────────────── */
.admin-shell {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

@media (min-width: 1024px) {
    .admin-shell {
        grid-template-columns: 236px minmax(0, 1fr);
    }
}

.admin-side {
    border-right: 1px solid var(--line);
    background: var(--surface);
    padding: 12px;
    display: none;
}

@media (min-width: 1024px) {
    .admin-side {
        display: block;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

.admin-side .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 10px;
}

.admin-side .nav-group {
    margin-bottom: 14px;
}

.admin-side .nav-group > .label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-dim);
    font-weight: 700;
    padding: 4px 10px;
}

.admin-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 20;
    flex-wrap: wrap;
}

.admin-top h1 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Menu tài khoản dùng chung (.dropdown / .dropdown-panel / .menu-item).
   Bản trong header.php chỉ style .dropdown-panel-napgame nên admin trước đây
   render menu trần lên trang. */
.dropdown {
    position: relative;
}

.dropdown-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 190px;
    display: none;
    padding: 6px 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 60;
}

.dropdown.open .dropdown-panel {
    display: block;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13.5px;
    color: var(--fg);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.menu-item:hover {
    background: var(--hover);
    color: var(--primary-ink);
}

.menu-item.danger,
.menu-item.danger:hover {
    color: var(--danger);
}

.menu-sep {
    height: 1px;
    margin: 4px 0;
    background: var(--line);
}

.admin-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

@media (min-width: 768px) {
    .admin-body {
        padding: 24px;
        gap: 20px;
    }
}

.admin-nav-mobile {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    scrollbar-width: none;
}

.admin-nav-mobile::-webkit-scrollbar {
    display: none;
}

@media (min-width: 1024px) {
    .admin-nav-mobile {
        display: none;
    }
}

/* ── Utilities ──────────────────────────────────────────────────────────── */
.grid-2 {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.grid-3 {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.grid-sidebar {
    display: grid;
    gap: 16px;
    /* minmax(0,1fr) chứ không phải 1fr: 1fr = minmax(auto,1fr) nên bảng rộng đẩy cả cột (và trang) tràn ngang ở mobile */
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 1024px) {
    .grid-sidebar {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

.divider {
    height: 1px;
    background: var(--line);
    margin: 12px 0;
}

.scroll-x {
    overflow-x: auto;
    scrollbar-width: thin;
}

.skeleton {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--hover) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite linear;
}

@keyframes shimmer {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

.fade-up {
    animation: fade-up 260ms ease-out both;
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Sticky mobile CTA */
.mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 52px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    transform: translateY(110%);
    transition: transform 200ms var(--ease);
}

.mobile-cta.show {
    transform: none;
}

.mobile-cta .total {
    font-size: 17px;
    font-weight: 800;
    color: var(--primary-ink);
}

@media (min-width: 1024px) {
    .mobile-cta {
        display: none;
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--line-hover);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--fg-dim);
}

/* Ảnh banner (tuỳ chọn): phủ nền, chữ vẫn nằm trên lớp gradient tối) */
.slide {
    overflow: hidden;
}

.slide-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.42;
    pointer-events: none;
}

.slide > :not(.slide-image) {
    position: relative;
    z-index: 1;
}

/* ── Vùng chạm tối thiểu trên thiết bị cảm ứng ───────────────────────────
   Nút icon và chấm carousel nhỏ hơn 44px sẽ khó bấm bằng ngón tay.
   Giữ nguyên kích thước hiển thị, nới vùng bấm bằng pseudo-element. */
@media (pointer: coarse) {
    .icon-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .header-top .icon-btn {
        width: 36px;
        height: 36px;
    }

    .chip {
        height: 36px;
    }

    .section-link {
        padding: 6px 0;
    }
}

@media (pointer: coarse) {
    /* Segmented tabs và nút tìm kiếm cũng cần đủ cao để bấm */
    .segmented button,
    .segmented a {
        height: 36px;
    }

    .search button {
        width: 40px;
        height: 40px;
        right: 0;
        top: 0;
    }

    /* Link trong footer và breadcrumb xếp dọc: nới chiều cao dòng */
    .footer ul a,
    .footer .logo {
        display: inline-block;
        padding: 3px 0;
    }
}

/* Breadcrumb và dòng pháp lý ở footer: chữ 12px cần đệm dọc để bấm được */
nav[aria-label="Breadcrumb"] a {
    padding: 6px 2px;
    display: inline-block;
}

@media (pointer: coarse) {
    /* Trên cảm ứng, breadcrumb và link trong khối thông báo cũng phải đạt 44px
       (dna-ui.md §8: vùng chạm >= 44px). */
    nav[aria-label="Breadcrumb"] a,
    .callout a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
        padding: 0 3px;
    }
}

@media (pointer: coarse) {
    /* Vùng chạm tối thiểu 44px (dna-ui.md §8) cho link chữ nhỏ. */
    .footer-legal a,
    .footer-bottom a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 2px;
    }

    .carousel-dot,
    .carousel-dot.active {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .carousel-dot::before {
        content: "";
        position: absolute;
        left: 4px;
        right: 4px;
        top: 50%;
        height: 4px;
        transform: translateY(-50%);
        border-radius: var(--radius-full);
        background: #ffffff59;
    }

    .carousel-dot.active::before {
        background: #fff;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tuỳ chỉnh giao diện (/admin/appearance)
   Giá trị mặc định khớp thiết kế gốc; chỉ ghi đè khi class trên <html> khác.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mật độ — dùng biến --density-gap/--density-pad do PHP inject */
.section,
.section-head {
    margin-top: var(--density-gap, 16px);
}
.card-pad,
.panel-head,
.stat {
    padding: var(--density-pad, 16px);
}
.card-pad > * + * {
    margin-top: var(--density-gap, 16px);
}

/* Kiểu trang chủ: modern — mỗi khối chiếm full chiều rộng thay vì chia đôi.
   classic (mặc định) giữ pair-grid 2 cột như thiết kế gốc. */
html.style-modern .home-split {
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    html.style-modern .home-split {
        grid-template-columns: 1fr;
    }
}

/* Kiểu thẻ game: modern — ảnh vuông bên trái, thông tin bên phải (dạng hàng).
   classic (mặc định) là ảnh dọc 120×168 xếp trên chữ. */
html.card-modern .game-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: auto;
    max-width: none;
    text-align: left;
}
html.card-modern .game-cover {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    margin-bottom: 0;
    border-radius: var(--radius-md);
}
html.card-modern .game-cover-inner .fallback {
    font-size: 18px;
    padding: 2px;
}
html.card-modern .game-card-body {
    min-width: 0;
    flex: 1;
}
html.card-modern .game-card .game-name,
html.card-modern .game-card .game-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kiểu modal (chọn ở /admin/appearance): enhanced = blur + scale, basic = phẳng */
html.modal-enhanced .auth-modal {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
html.modal-basic .modal-backdrop,
html.modal-basic .auth-modal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.modal-basic .modal,
html.modal-basic .auth-modal-card {
    transform: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ── Trang lỗi (403 / 404 / 405 / 500) ─────────────────────────────────────
   Dùng chung header/footer/layout; chỉ phần thân đổi theo mã lỗi.
   Toàn bộ màu lấy từ token nên dark mode tự đúng, không cần override. */
.err-shell {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    margin: 48px auto 0;
    padding: 36px 40px;
    max-width: 880px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

/* Tông màu theo loại lỗi: chỉ đổi biến cục bộ, không đổi cấu trúc */
.err-shell.tone-primary { --err-accent: var(--primary-ink); --err-wash: var(--primary-soft); --err-line: var(--primary-line); }
.err-shell.tone-warn    { --err-accent: var(--warn);        --err-wash: color-mix(in srgb, var(--warn) 10%, transparent);    --err-line: color-mix(in srgb, var(--warn) 35%, transparent); }
.err-shell.tone-danger  { --err-accent: var(--danger);      --err-wash: color-mix(in srgb, var(--danger) 10%, transparent);  --err-line: color-mix(in srgb, var(--danger) 35%, transparent); }

.err-visual {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    background: var(--err-wash, var(--surface-2));
    border: 1px solid var(--err-line, var(--line));
    overflow: hidden;
}

.err-code {
    font-size: 84px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    color: var(--err-accent, var(--primary-ink));
}

/* Icon đặt ở góc, mờ nhẹ để không tranh chấp với con số */
.err-icon {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    background: var(--surface);
    border: 1px solid var(--err-line, var(--line));
    color: var(--err-accent, var(--primary-ink));
}

.err-body { min-width: 0; }

.err-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--err-wash, var(--surface-2));
    border: 1px solid var(--err-line, var(--line));
    color: var(--err-accent, var(--primary-ink));
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.err-heading {
    margin: 12px 0 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--fg);
}

.err-desc {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--fg-muted);
}

.err-hint {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--fg-dim);
}

.err-search {
    display: flex;
    gap: 8px;
    margin: 18px 0 0;
}

.err-search .input {
    flex: 1;
    min-width: 0;
}

.err-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

/* Bốn lối tắt bên dưới khung — giữ người dùng ở lại site thay vì thoát */
.err-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 16px auto 0;
    max-width: 880px;
}

.err-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--fg);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease);
}

.err-link:hover {
    border-color: var(--primary-line);
    background: var(--surface-2);
    color: var(--primary-ink);
}

.err-link-ico {
    display: inline-flex;
    color: var(--fg-dim);
    flex-shrink: 0;
}

.err-link:hover .err-link-ico { color: var(--primary-ink); }

@media (max-width: 860px) {
    /* minmax(0,1fr) chứ không phải 1fr: 1fr = minmax(auto,1fr) sẽ không co
       dưới min-content và gây tràn ngang trên máy hẹp. */
    .err-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        margin-top: 28px;
        padding: 24px 20px;
    }

    .err-visual {
        aspect-ratio: auto;
        padding: 26px 0;
    }

    .err-code { font-size: 68px; }
    .err-heading { font-size: 21px; }
    .err-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
    .err-search { flex-wrap: wrap; }
    .err-search .btn { width: 100%; justify-content: center; }
    .err-actions .btn { flex: 1 1 auto; justify-content: center; }
    .err-links { grid-template-columns: minmax(0, 1fr); }
}

/* ── Form AJAX (ajaxform.js): nút đang gửi + vùng đang bận ───────────────── */
.btn.is-loading,
button.is-loading {
    position: relative;
    cursor: progress;
    pointer-events: none;
}

.btn.is-loading::after,
button.is-loading::after {
    content: '';
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    vertical-align: -2px;
    animation: ajaxform-spin 0.7s linear infinite;
}

@keyframes ajaxform-spin {
    to { transform: rotate(360deg); }
}

form.is-submitting {
    cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
    .btn.is-loading::after,
    button.is-loading::after { animation-duration: 1.6s; }
}

/* ── Hoá đơn chi tiết (nạp tiền, gạch thẻ) ─────────────────────────────── */
.receipt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; }
.receipt-amount { font-size: 26px; font-weight: 800; letter-spacing: -.01em; color: var(--primary-ink); }
.receipt-list { margin: 0; }
.receipt-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.receipt-row dt { font-size: 12.5px; color: var(--fg-muted); flex-shrink: 0; }
.receipt-row dd { margin: 0; font-size: 13.5px; font-weight: 600; text-align: right; word-break: break-word; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.receipt-row dd.accent { color: var(--primary-ink); font-size: 17px; font-weight: 800; }
.receipt-total { margin-top: 12px; padding: 4px 14px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.receipt-total .receipt-row:last-of-type { border-bottom: 0; }
@media print {
    .header-napgame, .footer-napgame, .floating-cskh-btn, .account-grid > aside, [data-noprint], .mobile-cta, nav { display: none !important; }
    .account-grid { display: block !important; }
    .panel { box-shadow: none !important; border-color: #ccc !important; }
}

/* ── Đăng nhập mạng xã hội (partials/social-login.php) ── */
.social-login { margin-top: 16px; }
.social-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--fg-dim);
}
.social-divider::before, .social-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.social-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 8px;
}
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--fg);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, background .15s, transform .15s;
}
.social-btn:hover { border-color: var(--primary-line); background: var(--surface-2); transform: translateY(-1px); }
.social-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 380px) { .social-btn span { display: none; } }

/* Avatar chữ cái đầu: chữ trắng trên màu ngẫu nhiên của người dùng (xanh lá/cam/cyan chỉ ~2–2.5:1) → phủ đen nhẹ cho đọc được.
   background-image !important thắng được style="background:#..." inline (không có !important). */
.avatar-napgame, .avatar-sm, .avatar { background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)) !important; }

/* ── Khung thanh toán chuyển khoản QR (hoá đơn nạp tiền + trang đơn chờ thanh toán) — chuyển từ view deposit-intent ── */
.pay-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
}
/* MoMo không có QR → một cột, nếu không pay-info sẽ bị nhét vào track auto */
.pay-grid.is-single {
    grid-template-columns: minmax(0, 1fr);
}
.pay-qr {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    /* Nền trắng cố định: QR cần độ tương phản cao, không theo theme */
    background: #ffffff;
}
.pay-qr img {
    display: block;
    border-radius: 6px;
}
.pay-info {
    min-width: 0;
}
.pay-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--line);
}
.pay-row:last-child { border-bottom: 0; }
.pay-label {
    font-size: 12.5px;
    color: var(--fg-muted);
    flex-shrink: 0;
}
.pay-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}
.pay-value.accent {
    color: var(--primary-ink);
    font-size: 19px;
    font-weight: 800;
}
@media (max-width: 620px) {
    /* minmax(0,1fr): tránh track phình theo min-content của bảng thông tin */
    .pay-grid { grid-template-columns: minmax(0, 1fr); }
    .pay-qr { justify-self: center; }
}

/* ── Chọn phương thức thanh toán (form đặt đơn) ─────────────────────────────────────────────────────────────────── */
.pay-methods { border: 0; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; min-width: 0; }
.pay-methods-title { padding: 0; margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--fg); }
.pay-method {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
    border: 1.5px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
    transition: border-color .15s, background-color .15s;
}
.pay-method:hover { border-color: var(--primary-line); }
.pay-method input { accent-color: var(--primary-strong); flex-shrink: 0; width: 16px; height: 16px; margin: 0; }
.pay-method.is-active { border-color: var(--primary-strong); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.pay-method-ico { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-ink); }
.pay-method-body { display: grid; gap: 1px; min-width: 0; }
.pay-method-body strong { font-size: 13.5px; font-weight: 700; color: var(--fg); }
.pay-method-body small { font-size: 12px; color: var(--fg-dim); line-height: 1.35; }

/* Nút trên nền QR trắng cố định: chữ/viền tối để không mờ ở giao diện tối (btn-ghost theo theme là chữ sáng) */
.pay-qr .btn-ghost { color: #0f172a; border-color: #cbd5e1; background: #fff; }
.pay-qr .btn-ghost:hover { background: #f1f5f9; }