/* ==========================================================================
   Telegram Mini App — Hoàng Khiêm
   Design system: Indigo primary · Warm accent · 4/8 spacing rhythm
   Mobile-first · Sáng/Tối độc lập · An toàn vùng notch · Icon SVG thuần
   ========================================================================== */

/* ---------- 1. TOKEN ---------- */
:root {
    /* Màu Telegram (đồng bộ khi chạy trong Telegram) */
    --tg-bg: #ffffff;
    --tg-text: #0f172a;
    --tg-hint: #64748b;
    --tg-link: #2563eb;
    --tg-btn: #2563eb;
    --tg-btn-text: #ffffff;
    --tg-secondary-bg: #f1f5f9;

    /* Brand — xanh dương (sáng, nhẹ) */
    --brand-50:  #EFF6FF;
    --brand-100: #DBEAFE;
    --brand-200: #BFDBFE;
    --brand-300: #93C5FD;
    --brand-400: #60A5FA;
    --brand-500: #3B82F6;
    --brand-600: #2563EB;
    --brand-700: #1D4ED8;
    --brand-800: #1E40AF;

    /* Accent — cam dùng cho nhãn Hot/Khuyến mãi */
    --accent-400: #FB923C;
    --accent-500: #F97316;
    --accent-600: #C2410C;

    /* Trung tính lạnh */
    --n-0:   #ffffff;
    --n-25:  #FCFCFD;
    --n-50:  #F8FAFC;
    --n-100: #F1F4F9;
    --n-200: #E7EBF3;
    --n-300: #D8DEEA;
    --n-400: #AAB3C5;
    --n-500: #7C8699;
    --n-600: #5A6478;
    --n-700: #3D4657;
    --n-800: #252C3A;
    --n-900: #141A24;
    --n-950: #0B0F16;

    /* Ngữ nghĩa */
    --success:     #0E9F6E;
    --success-ink: #046C4E;
    --success-soft:#E6F7F1;
    --danger:      #DC2626;
    --danger-ink:  #B91C1C;
    --danger-soft: #FEF2F2;
    --danger-solid:#DC2626;   /* nền đặc, chữ trắng — 4.83:1 (chỉ dùng cho huy hiệu đếm) */
    --warning:     #C2740B;
    --warning-ink: #92400E;
    --warning-soft:#FFF6E8;
    --info:        #2563EB;
    --info-soft:   #EFF5FF;

    /* Ánh xạ vai trò — nền dịu, card trắng nổi lên nhờ TƯƠNG PHẢN nền
       thay vì dựa vào đường viền. Giảm hẳn số đường kẻ trong giao diện. */
    --bg:          #F6F7F9;
    --surface:     #FFFFFF;
    --surface-2:   #F1F3F6;
    --surface-3:   #E8EBF0;
    --card:        #FFFFFF;
    --text:        var(--n-900);
    --text-strong: var(--n-950);
    --hint:        var(--n-600);
    --muted:       #5D6878;   /* 5.27:1 — chữ nhỏ phụ */
    --faint:       #66707F;   /* 4.51:1 — placeholder, giá gạch ngang */
    --primary:     var(--brand-600);
    --primary-hover: var(--brand-700);
    --primary-soft: var(--brand-50);
    --primary-ring: color-mix(in srgb, var(--primary) 28%, transparent);
    --on-primary:  #FFFFFF;    /* chữ đặt trên nền primary */
    --border:        #E4E7EC;          /* trang trí / phân cách */
    --border-soft:   #EDEFF3;
    --border-input:  #7E879A;               /* 3.25:1 — viền ô nhập (WCAG 1.4.11) */
    --purple:      #7C3AED;
    --overlay:     #FFFFFF;   /* sheet / modal */

    /* Bán kính */
    --r-xs: 8px;
    --r-sm: 10px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-2xl: 26px;
    --r-full: 999px;

    /* C alias giữ tương thích */
    --radius:    var(--r-lg);
    --radius-sm: var(--r-md);
    --radius-lg: var(--r-2xl);

    /* Nhịp không gian 4/8 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Đổ bóng nhiều lớp — nhẹ, không nặng */
    --sh-1: 0 1px 2px rgba(22,40,80,.035), 0 1px 3px rgba(22,40,80,.04);
    --sh-2: 0 4px 10px -3px rgba(22,40,80,.045), 0 12px 22px -8px rgba(22,40,80,.07);
    --sh-3: 0 12px 22px -8px rgba(22,40,80,.06), 0 28px 52px -16px rgba(22,40,80,.12);
    --sh-primary: 0 6px 16px -6px color-mix(in srgb, var(--primary) 34%, transparent);

    --shadow-sm: var(--sh-1);
    --shadow:   var(--sh-2);
    --shadow-lg: var(--sh-3);

    /* Kích thước cố định */
    --tabbar-h: 62px;
    --appbar-h: 56px;
    --tap: 44px;                 /* vùng chạm tối thiểu */
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);

    /* Cỡ chữ — thang thống nhất, dùng font hệ thống có đầy đủ dấu tiếng Việt */
    --fs-xs:   11.5px;
    --fs-sm:   13px;
    --fs-base: 15px;
    --fs-md:   16px;
    --fs-lg:   18px;
    --fs-xl:   21px;
    --fs-2xl:  26px;
    --fs-3xl:  34px;

    /* Chuyển động */
    --ease: cubic-bezier(.32, .72, 0, 1);
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dur-1: 120ms;
    --dur-2: 180ms;
    --dur-3: 260ms;

    /* Màu chữ + nền phải được áp TẠI PHẠM VI đặt theme, không phải trên <body>.
       `color` là thuộc tính kế thừa: nếu khai báo trên <body> thì nó tính một
       lần ở đó (theo biến của scope cha) và mọi phần tử con thiếu khai báo
       `color` riêng — kể cả khi nằm trong scope `data-theme="dark"` — sẽ kế
       thừa màu của scope sáng và gần như vô hình. */
    color: var(--text);
    background: var(--bg);
}

/* Telegram truyền màu qua CSS variables — dùng làm nguồn khi có */
body.tg-theme {
    --primary: var(--tg-btn);
    --primary-hover: color-mix(in srgb, var(--tg-btn) 85%, #000);
    --primary-soft: color-mix(in srgb, var(--tg-btn) 10%, transparent);
    --primary-ring: color-mix(in srgb, var(--tg-btn) 28%, transparent);
    --sh-primary: 0 6px 16px -4px color-mix(in srgb, var(--tg-btn) 42%, transparent);
}

/* Nen toi — thang do nang ro rang + chu "low white emission".
   Ba quy tac:
   1) Be mat sang dan theo do nang: nen -> card -> input -> overlay.
   2) Vien SANG HON be mat (nguoc voi light mode) de the tach khoi nen.
   3) Chu gan trang nhung KHONG #FFFFFF thuan — tranh choi/halation
      khi doc lau trong toi. */
[data-theme="dark"] {
    --bg:          #0A0A0C;
    --surface:     #121216;
    --surface-2:   #1B1B21;
    --surface-3:   #26262E;
    --card:        #17171C;
    --overlay:     #1F1F26;   /* sheet / modal — cao nhat */

    /* Chu: dich nhe khoi trang tuyet doi */
    --text:        #F4F5F8;
    --text-strong: #FDFDFF;
    --hint:        #C6C8D0;
    --muted:       #A8ABB4;
    --faint:       #93979F;

    /* Xanh chi dung lam diem nhan, khong to nen */
    --primary:     #6FA4FF;
    --primary-hover: #93BBFF;
    --primary-soft: #16223A;
    --on-primary:  #0A0C10;   /* nen primary sang nen chu phai toi */

    /* Vien sang hon be mat */
    --border:      #2C2C35;
    --border-soft: #232329;
    --border-input: #6A6A77;
    --purple:      #B7A3F2;

    --success:     #4ADE80;
    --success-ink: #86EFAC;
    --success-soft:#10241A;
    --danger:      #FF8F8F;
    --danger-ink:  #FFB8B8;
    --danger-soft: #2B1618;
    --danger-solid:#C62828;   /* nền đặc hơn để chữ trắng đạt 5.62:1 trên nền tối */
    --warning:     #F5C86B;
    --warning-ink: #FFDCA8;
    --warning-soft:#2A2210;
    --info:        #8CBBFF;
    --info-soft:   #16223A;

    /* Thẻ nổi lên nhờ 1px highlight bên trong — cảm giác "được chiếu sáng
       từ trên xuống", đặc biệt rõ trên nền tối */
    --card-edge: inset 0 1px 0 rgba(255, 255, 255, .04);
    --shadow-float: 0 2px 6px rgba(0,0,0,.5), 0 10px 30px -10px rgba(0,0,0,.7);

    /* Áp lại màu chữ/nền tại chính scope dark (xem giải thích ở :root) */
    color: var(--text);
    background: var(--bg);

    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 4px 10px -2px rgba(0,0,0,.45), 0 12px 22px -8px rgba(0,0,0,.5);
    --sh-3: 0 14px 26px -8px rgba(0,0,0,.55), 0 30px 56px -16px rgba(0,0,0,.65);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Giữ chỗ cho thanh cuộn để khoá cuộn không làm giật layout */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
                 "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
                 "Apple Color Emoji", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    font-synthesis-weight: none;
    /* KHÔNG khai báo color/background ở đây — xem giải thích bên dưới */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
    text-rendering: optimizeLegibility;
}

/* Chặn bôi chọn chữ CHỈ trên thành phần tương tác, tránh tô xanh khi lỡ chạm.
   Nội dung đọc (mã phiếu, số tài khoản, tên, mô tả, giá) vẫn bôi chọn và
   sao chép bình thường. */
button, .no-select,
.btn, .chip, .cat-chip, .tabbar-item, .icon-btn,
.product, .product-row, .switch, .qty-btn, .pager-btn,
.search-clear, .section-link, .bank-item {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable], .selectable {
    -webkit-user-select: text;
    user-select: text;
}

/* Khoá cuộn nền khi sheet / modal mở */
.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
a { color: var(--primary); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.018em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

/* Vòng focus dày hơn cho nền tối */
[data-theme="dark"] :focus-visible { outline-color: var(--primary); }

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

/* Vùng bôi chọn và thanh cuộn — cùng tông với theme để không "chói" mắt */
::selection { background: color-mix(in srgb, var(--primary) 26%, transparent); }
[data-theme="dark"] ::-webkit-scrollbar { width: 9px; height: 9px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #31313A; border-radius: 99px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #42424E; }
[data-theme="dark"] { scrollbar-color: #31313A transparent; scrollbar-width: thin; }

/* Chuẩn hoá icon SVG nội tuyến */
svg { flex: none; display: block; }
.list-icon svg, .notice-ico svg, .toast-ico svg,
.modal-icon svg, .empty-icon svg, .blocked-icon svg,
.bank-check svg { width: 100%; height: 100%; }

/* Icon nhỏ đi kèm văn bản */
.section-title .ico { display: grid; place-items: center; }
.section-title .ico svg { width: 17px; height: 17px; }
.cat-chip .emoji { display: grid; place-items: center; }
.cat-chip .emoji svg { width: 15px; height: 15px; }
.badge svg { width: 13px; height: 13px; }

/* ---------- 3. SPLASH ---------- */
.splash {
    position: fixed; inset: 0; z-index: 999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 20px; background: var(--bg); padding: 24px; text-align: center;
}
.splash[hidden] { display: none; }
.splash-logo {
    color: var(--primary);
    animation: pulse 1.8s var(--ease) infinite;
    filter: drop-shadow(0 8px 20px var(--primary-ring));
}
.splash-name { color: var(--hint); font-size: 14px; font-weight: 500; letter-spacing: .01em; }
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: .8; }
    50%      { transform: scale(1.07); opacity: 1; }
}

.spinner {
    width: 22px; height: 22px; border: 2.5px solid var(--border);
    border-top-color: var(--primary); border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 4. MÀN HÌNH CHẶN ---------- */
.blocked {
    position: fixed; inset: 0; z-index: 900;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; background: var(--bg);
}
.blocked[hidden] { display: none; }
.blocked-card {
    max-width: 380px; width: 100%; text-align: center;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-2xl); padding: 34px 26px 26px; box-shadow: var(--sh-2);
}
.blocked-icon {
    width: 72px; height: 72px; margin: 0 auto 18px;
    border-radius: var(--r-xl); display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary);
}
.blocked-icon svg { width: 34px; height: 34px; }
.blocked-icon.is-warn { background: var(--warning-soft); color: var(--warning); }
.blocked-title { font-size: 19px; margin-bottom: 10px; letter-spacing: -.02em; }
.blocked-text { color: var(--hint); font-size: 14px; line-height: 1.65; margin-bottom: 20px; }
.blocked-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.blocked-note { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ---------- 5. KHUNG APP ---------- */
.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.app[hidden] { display: none; }

/* Appbar */
.appbar {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--border-soft);
    padding-top: var(--safe-t);
    transition: box-shadow var(--dur-2) var(--ease);
}
.appbar-inner {
    height: var(--appbar-h); display: flex; align-items: center; gap: 6px;
    padding: 0 10px; max-width: 760px; margin: 0 auto;
}
.appbar-title {
    position: absolute; left: 50%; transform: translateX(-50%);
    max-width: calc(100% - 140px);
    text-align: center; font-size: 16.5px; font-weight: 680; letter-spacing: -.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;
}
.appbar-inner { position: relative; }
/* Đẩy nút cuối (đổi theme) sang mép phải khi nút quay lại bị ẩn.
   Chọn theo vị trí thay vì #id để không phụ thuộc markup. */
.appbar-inner > .icon-btn:last-child { margin-left: auto; }

.icon-btn {
    width: 40px; height: 40px; flex: none; display: grid; place-items: center;
    border-radius: var(--r-md); color: var(--hint);
    transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease);
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn:active { background: var(--surface-3); color: var(--text); transform: scale(.88); }
.icon-btn[hidden] { display: none; }

#btnTheme .ico-moon { display: none; }
[data-theme="dark"] #btnTheme .ico-sun { display: none; }
[data-theme="dark"] #btnTheme .ico-moon { display: block; }

.appbar-progress {
    position: absolute; left: 0; bottom: -1px; height: 2.5px; width: 0;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, var(--primary), var(--brand-400));
    opacity: 0; transition: width .25s var(--ease), opacity var(--dur-2);
}
.appbar-progress.on { opacity: 1; }

.content {
    flex: 1; width: 100%; max-width: 760px; margin: 0 auto;
    padding: var(--space-4) var(--space-4) calc(var(--tabbar-h) + var(--safe-b) + var(--space-6));
    outline: none;
}
.content.no-tabs { padding-bottom: calc(var(--safe-b) + var(--space-6)); }
/* Trang chi tiết sản phẩm: chừa chỗ cho thanh mua hàng cố định */
.content.has-buybar {
    padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 86px);
}

.view-enter { animation: viewIn var(--dur-3) var(--ease-out); }
@keyframes viewIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- 6. TABBAR ---------- */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; align-items: stretch;
    height: calc(var(--tabbar-h) + var(--safe-b));
    padding-bottom: var(--safe-b);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--border-soft);
}
.tabbar-item {
    position: relative;
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 7px 1px 5px;
    color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0;
    white-space: nowrap; overflow: hidden;
    transition: color var(--dur-2) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.tabbar-item svg {
    width: 23px; height: 23px; position: relative; z-index: 1;
    transition: transform var(--dur-2) var(--ease-spring);
}
.tabbar-item span {
    position: relative; z-index: 1;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.tabbar-item:active svg { transform: scale(.86); }

/* Chỉ báo mục đang chọn: nền pill mềm sau icon, tinh tế hơn vạch trên */
.tabbar-item::before {
    content: ''; position: absolute; z-index: 0;
    top: 4px; left: 50%; width: 46px; height: 30px;
    border-radius: var(--r-full);
    background: var(--primary-soft);
    opacity: 0; transform: translateX(-50%) scale(.7);
    transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-spring);
}
.tabbar-item.active { color: var(--primary); font-weight: 700; }
.tabbar-item.active::before { opacity: 1; transform: translateX(-50%) scale(1); }
.tabbar-item.active svg { transform: translateY(-1px); }
.tabbar-item:active.active svg { transform: scale(.86); }

.tabbar-item .tab-dot {
    position: absolute; top: 8px; right: 50%; transform: translateX(20px);
    width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
    border: 2px solid var(--surface);
}
.tab-dot { display: none; }
.tab-dot.show { display: block; }

/* ---------- 7. THÀNH PHẦN ---------- */

/* Card — phân tách bằng TƯƠNG PHẢN nền, không dùng shadow mặc định.
   Shadow chỉ dành cho lớp nổi thật sự: sheet, modal, toast, buy-bar. */
.card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--card-edge, none);
}
.card-pad { padding: var(--space-4); }

/* Section header */
.section {
    margin: var(--space-6) 0 var(--space-3);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.section:first-child { margin-top: 0; }
.section-title {
    font-size: 15px; font-weight: 700; letter-spacing: -.015em;
    display: flex; align-items: center; gap: var(--space-2);
}
.section-title .ico { font-size: 16px; line-height: 1; }
.section-link {
    font-size: 13px; font-weight: 650; color: var(--primary);
    display: inline-flex; align-items: center; gap: 3px;
    padding: 6px 2px; transition: opacity var(--dur-1);
}
.section-link:active { opacity: .6; }

/* Nút */
.btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--tap); padding: 0 var(--space-5);
    border-radius: var(--r-md);
    font-size: 15px; font-weight: 650; letter-spacing: -.005em;
    white-space: nowrap;
    transition: transform var(--dur-1) var(--ease),
                opacity var(--dur-2), background var(--dur-2),
                box-shadow var(--dur-2);
}
.btn:active { transform: scale(.965); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Gradient luôn tối dần xuống: điểm sáng nhất = primary (chữ trắng 5.17:1) */
.btn-primary {
    background: linear-gradient(180deg, var(--primary) 0%, var(--brand-700) 100%);
    color: #fff;
    box-shadow: var(--sh-primary);
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active { box-shadow: none; }

[data-theme="dark"] .btn-primary { color: var(--on-primary); background: var(--primary); }

.btn-ghost { background: var(--surface-3); color: var(--text); }
.btn-ghost:hover { background: var(--border); }
.btn-ghost:active { background: var(--border); }

.btn-outline {
    background: transparent; color: var(--primary);
    box-shadow: inset 0 0 0 1.5px var(--primary);
}
.btn-outline:active { background: var(--primary-soft); }

.btn-danger {
    background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 88%, #fff), var(--danger));
    color: #fff; box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--danger) 42%, transparent);
}
.btn-success {
    background: linear-gradient(180deg, color-mix(in srgb, var(--success) 88%, #fff), var(--success));
    color: #fff; box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--success) 42%, transparent);
}
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .btn-success { color: var(--on-primary); }

.btn-block { width: 100%; }
.btn-sm { min-height: 38px; height: 38px; padding: 0 var(--space-4); font-size: 13.5px; border-radius: var(--r-sm); }
.btn-sm svg { width: 16px; height: 16px; }
.btn-lg { min-height: 52px; height: 52px; font-size: 16px; border-radius: var(--r-lg); }

/* Nút nạp nhanh */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; height: 40px; padding: 0 var(--space-4);
    border-radius: var(--r-full);
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: 13.5px; font-weight: 620; color: var(--text);
    transition: transform var(--dur-1) var(--ease),
                background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.chip:active { transform: scale(.94); }
.chip.active {
    background: var(--primary); color: #fff; border-color: var(--primary);
    box-shadow: var(--sh-primary);
}
[data-theme="dark"] .chip.active { color: var(--on-primary); }

/* Badge */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: var(--r-full);
    font-size: 11.5px; font-weight: 700; line-height: 1.55;
    letter-spacing: .005em; white-space: nowrap;
}
.badge-green  { background: var(--success-soft); color: var(--success-ink); }
.badge-red    { background: var(--danger-soft);  color: var(--danger-ink); }
.badge-orange { background: var(--warning-soft); color: var(--warning-ink); }
.badge-blue   { background: var(--primary-soft); color: var(--primary); }
.badge-gray   { background: var(--surface-3);    color: var(--hint); }
[data-theme="dark"] .badge-green { color: var(--success); }
[data-theme="dark"] .badge-red   { color: var(--danger); }
[data-theme="dark"] .badge-orange{ color: var(--warning); }

/* Ô nhập */
.field { margin-bottom: var(--space-4); }
.field-label {
    display: block; font-size: 12.5px; font-weight: 650;
    color: var(--hint); margin-bottom: 7px; letter-spacing: .005em;
}
.input, .select, .textarea {
    width: 100%; min-height: var(--tap); padding: 0 var(--space-4);
    background: var(--surface-2); border: 1.5px solid var(--border-input);
    border-radius: var(--r-md); color: var(--text);
    font-size: 15px; font-family: inherit; outline: none;
    transition: border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2);
    -webkit-appearance: none; appearance: none;
}
.textarea { height: auto; min-height: 96px; padding: var(--space-3) var(--space-4); resize: vertical; line-height: 1.6; }
.select {
    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='%237C8699' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center;
    padding-right: 40px;
}
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--primary); background: var(--card);
    box-shadow: 0 0 0 3.5px var(--primary-ring);
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input-amount {
    font-size: 26px; font-weight: 720; height: 64px;
    letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}

/* Trạng thái rỗng */
.empty { text-align: center; padding: 48px 24px; color: var(--hint); }
.empty-icon {
    width: 76px; height: 76px; margin: 0 auto var(--space-4);
    border-radius: var(--r-xl); display: grid; place-items: center;
    background: var(--surface-2); color: var(--faint);
}
.empty-icon svg { width: 34px; height: 34px; }
.empty-title { font-size: 15.5px; font-weight: 680; color: var(--text); margin-bottom: 6px; letter-spacing: -.015em; }
.empty-text { font-size: 13.5px; line-height: 1.65; }

/* ---------- 8. HERO / SỐ DƯ ---------- */
/* Nền nhạt + chữ xanh đậm: giữ tương phản ≥4.5:1 mà vẫn "sáng" */
.hero {
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: var(--r-2xl); padding: var(--space-5);
    color: #0B2545; box-shadow: var(--sh-2);
    border: 1px solid #C7DAF8;
    background:
        radial-gradient(120% 120% at 6% 0%, #FFFFFF 0%, transparent 56%),
        radial-gradient(110% 110% at 98% 100%, #C3DAFF 0%, transparent 56%),
        linear-gradient(145deg, #EDF4FF 0%, #D9E7FF 100%);
}
/* Quầng sáng trang trí */
.hero::after {
    content: ''; position: absolute; z-index: 0;
    top: -48%; right: -22%; width: 250px; height: 250px; border-radius: 50%;
    background: radial-gradient(circle, rgba(96,145,227,.20) 0%, transparent 68%);
}
.hero::before {
    content: ''; position: absolute; z-index: 0;
    bottom: -58%; left: -14%; width: 210px; height: 210px; border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,.14) 0%, transparent 68%);
}
.hero > * { position: relative; z-index: 1; }

/* Hero tối: nền xanh đậm dịu, chữ sáng */
[data-theme="dark"] .hero {
    color: var(--text); border-color: #2A2C3C;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px -14px rgba(0,0,0,.85);
    background:
        radial-gradient(130% 110% at 10% -10%, rgba(96,165,250,.22) 0%, transparent 58%),
        radial-gradient(120% 120% at 100% 110%, rgba(56,189,248,.14) 0%, transparent 56%),
        linear-gradient(155deg, #171A28 0%, #0E1018 100%);
}

.hero-top { display: flex; align-items: center; gap: var(--space-3); }
.hero-avatar {
    width: 50px; height: 50px; border-radius: var(--r-full); flex: none;
    background: #CFE1FF; border: 1.5px solid #7BA9ED;
    object-fit: cover; display: grid; place-items: center;
    font-size: 19px; font-weight: 700; color: #1E40AF;
}
.hero-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
[data-theme="dark"] .hero-avatar {
    background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #DCE1EC;
}

.hero-info { flex: 1; min-width: 0; }
.hero-hello {
    font-size: 12.5px; color: #4B6B96; margin-bottom: 1px; letter-spacing: .005em;
}
.hero-name {
    font-size: 16px; font-weight: 700; letter-spacing: -.015em; color: #0B2545;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hero-balance { margin-top: var(--space-5); }
.hero-label {
    font-size: 12px; color: #4B6B96; margin-bottom: 5px;
    text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
.hero-amount {
    font-size: 34px; font-weight: 800; letter-spacing: -.035em; color: #1D4ED8;
    font-variant-numeric: tabular-nums; line-height: 1.08;
}
.hero-amount .cur { font-size: 19px; font-weight: 650; color: #4B6B96; margin-left: 4px; }

.hero-actions { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.hero-btn {
    flex: 1; min-width: 0; min-height: var(--tap); height: var(--tap);
    border-radius: var(--r-md); padding: 0 var(--space-2);
    background: #FFFFFF; border: 1px solid #7BA9ED;
    color: #1D4ED8; font-size: 14px; font-weight: 650;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    white-space: nowrap;
    transition: transform var(--dur-1) var(--ease), background var(--dur-2), border-color var(--dur-2);
}
.hero-btn:hover { background: #F1F7FF; border-color: #5D91E3; }
.hero-btn:active { transform: scale(.955); background: #E4EFFE; }
.hero-btn svg { width: 17px; height: 17px; }

[data-theme="dark"] .hero-hello,
[data-theme="dark"] .hero-label { color: var(--muted); }
[data-theme="dark"] .hero-name { color: var(--text-strong); }
[data-theme="dark"] .hero-amount { color: #82B1FF; }
[data-theme="dark"] .hero-amount .cur { color: var(--muted); }
[data-theme="dark"] .hero-btn {
    background: rgba(10, 14, 26, .42); border-color: #3C4256; color: var(--text);
}
[data-theme="dark"] .hero-btn:hover { background: rgba(16, 22, 40, .58); border-color: #4E5670; }
[data-theme="dark"] .hero-btn:active { background: rgba(8, 11, 20, .55); }

/* Thẻ thống kê */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
.stat {
    background: var(--card); border: 1px solid var(--border);
    box-shadow: var(--card-edge, none);
    border-radius: var(--r-md); padding: var(--space-3) 6px; text-align: center;
    transition: transform var(--dur-2) var(--ease);
}
.stat-value {
    font-size: 15px; font-weight: 750; margin-bottom: 2px;
    font-variant-numeric: tabular-nums; word-break: break-all; letter-spacing: -.015em;
}
.stat-label { font-size: 11.5px; color: var(--hint); font-weight: 550; }

/* ---------- 9. DANH MỤC ---------- */
.cat-scroll {
    display: flex; gap: var(--space-2); overflow-x: auto;
    padding: 2px 0 var(--space-2);
    scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    margin: 0 calc(var(--space-4) * -1);
    padding-left: var(--space-4); padding-right: var(--space-4);
    -webkit-overflow-scrolling: touch;
}
.cat-scroll::-webkit-scrollbar { display: none; }
.cat-chip {
    flex: none; scroll-snap-align: start;
    display: flex; align-items: center; gap: 7px;
    min-height: 42px; height: 42px; padding: 0 15px; border-radius: var(--r-full);
    background: var(--card); border: 1.5px solid var(--border);
    font-size: 13.5px; font-weight: 620; color: var(--text);
    transition: transform var(--dur-1) var(--ease),
                background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.cat-chip:hover { border-color: var(--faint); }
.cat-chip:active { transform: scale(.94); }
.cat-chip.active {
    background: var(--primary); border-color: var(--primary); color: #fff;
    box-shadow: var(--sh-primary);
}
[data-theme="dark"] .cat-chip.active { color: var(--on-primary); }
.cat-chip .emoji { font-size: 15px; line-height: 1; }
.cat-chip .count { font-size: 11.5px; opacity: .8; font-variant-numeric: tabular-nums; }

/* ---------- 10. LƯỚI SẢN PHẨM ---------- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 780px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.product {
    position: relative;
    background: var(--card); border: 1px solid var(--border);
    box-shadow: var(--card-edge, none);
    border-radius: var(--r-lg); overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2), border-color var(--dur-2);
    text-align: left; width: 100%;
}
.product:active {
    transform: scale(.972); border-color: var(--border);
    box-shadow: var(--sh-2);
}

.product-img {
    position: relative; aspect-ratio: 1; overflow: hidden;
    background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
}
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out); }
.product:active .product-img img { transform: scale(1.05); }

.product-tags {
    position: absolute; top: 8px; left: 8px; right: 8px;
    display: flex; gap: 5px; flex-wrap: wrap; z-index: 1;
}
.product-tag {
    padding: 3px 7px; border-radius: var(--r-xs);
    font-size: 10px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase;
    background: var(--danger); color: #fff; line-height: 1.5;
    box-shadow: 0 1px 4px rgba(0,0,0,.16);
}
.product-tag.out { background: rgba(12,16,23,.82); backdrop-filter: blur(4px); }
.product-tag.hot { background: var(--accent-500); }

.product-body { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-name {
    font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em;
}
.product-price-row {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: auto;
}
.product-price {
    font-size: var(--fs-md); font-weight: 780; color: var(--primary);
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.product-price .cur { font-size: 11.5px; font-weight: 650; }
.product-old {
    font-size: var(--fs-xs); color: var(--faint); text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}
.product-sold { font-size: var(--fs-xs); color: var(--muted); font-weight: 550; }

/* Danh sách dọc (sản phẩm nổi bật) */
.product-row {
    display: flex; gap: var(--space-3); padding: 11px;
    background: var(--card); border: 1px solid var(--border);
    box-shadow: var(--card-edge, none);
    border-radius: var(--r-lg); width: 100%; text-align: left;
    transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2);
}
.product-row:active { transform: scale(.978); box-shadow: var(--sh-2); }
.product-row + .product-row { margin-top: 10px; }
.product-row-img {
    width: 78px; height: 78px; flex: none; border-radius: var(--r-md);
    object-fit: cover; background: var(--surface-2);
}
.product-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.product-row-name {
    font-size: 14px; font-weight: 620; line-height: 1.42;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.product-row-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }

/* ---------- 11. DANH SÁCH / GIAO DỊCH ---------- */
.list { display: flex; flex-direction: column; gap: var(--space-2); }

.list-item {
    display: flex; align-items: center; gap: var(--space-3);
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: var(--space-3);
    box-shadow: var(--card-edge, none);
}
.list-icon {
    width: 44px; height: 44px; flex: none; border-radius: var(--r-md);
    display: grid; place-items: center;
}
.list-icon svg { width: 21px; height: 21px; }
.list-icon-lg { width: 64px; height: 64px; border-radius: var(--r-lg); margin: 0 auto var(--space-3); }
.list-icon-lg svg { width: 30px; height: 30px; }

.li-green  { background: var(--success-soft); color: var(--success); }
.li-blue   { background: var(--primary-soft); color: var(--primary); }
.li-orange { background: var(--warning-soft); color: var(--warning); }
.li-purple { background: color-mix(in srgb, var(--purple) 13%, transparent); color: var(--purple); }
.li-gray   { background: var(--surface-3); color: var(--hint); }
.li-red    { background: var(--danger-soft); color: var(--danger); }

.list-body { flex: 1; min-width: 0; }
.list-title {
    font-size: 14px; font-weight: 620; margin-bottom: 2px; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-sub { font-size: 12.5px; color: var(--hint); }
.list-right { text-align: right; flex: none; }
.list-amount {
    font-size: 14.5px; font-weight: 750; font-variant-numeric: tabular-nums;
    letter-spacing: -.015em; white-space: nowrap;
}
.list-amount.plus { color: var(--success); }
.list-amount.minus { color: var(--text); }
.list-time { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ---------- 12. THANH TOÁN / THÔNG TIN ---------- */
.info-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); padding: 13px 0; border-bottom: 1px solid var(--border-soft);
}
.info-row:last-child { border-bottom: none; }
.info-label { font-size: 13.5px; color: var(--hint); flex: none; }
.info-value {
    font-size: 14px; font-weight: 620; text-align: right;
    word-break: break-word; min-width: 0;
}
.info-value.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .02em; }

/* Mã nạp */
.code-box {
    position: relative; margin: var(--space-4) 0;
    padding: var(--space-5) var(--space-4); border-radius: var(--r-lg);
    background: linear-gradient(160deg, var(--primary-soft), color-mix(in srgb, var(--primary-soft) 40%, transparent));
    border: 2px dashed color-mix(in srgb, var(--primary) 45%, transparent);
    text-align: center;
}
.code-value {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 21px; font-weight: 800; color: var(--primary);
    letter-spacing: .06em; word-break: break-all; line-height: 1.4;
    padding: 0 4px;
}
.code-hint { font-size: 12px; color: var(--hint); margin-top: 7px; }
.code-copy { margin-top: var(--space-3); }

/* Số tiền nhận tiền */
.amount-box {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); padding: var(--space-4);
    border-radius: var(--r-md);
    background: var(--surface-2); border: 1px solid var(--border);
}
.amount-box .amt-label { font-size: 13px; color: var(--hint); }
.amount-box .amt-value {
    font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* Chọn ngân hàng */
.bank-list { display: flex; flex-direction: column; gap: 9px; }
.bank-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3); border-radius: var(--r-md);
    background: var(--card); border: 1.5px solid var(--border-input);
    width: 100%; text-align: left;
    transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-1) var(--ease);
}
.bank-item:active { transform: scale(.985); }
.bank-item.active { border-color: var(--primary); background: var(--primary-soft); }
.bank-logo {
    width: 42px; height: 42px; flex: none; border-radius: var(--r-sm);
    background: var(--surface-2); display: grid; place-items: center;
    font-size: 13px; font-weight: 800; color: var(--hint); overflow: hidden;
}
.bank-logo img { width: 100%; height: 100%; object-fit: contain; }
.bank-name { font-size: 14px; font-weight: 650; }
.bank-num { font-size: 12.5px; color: var(--hint); font-family: ui-monospace, monospace; }
/* Tên ngân hàng / số tài khoản dài không được đẩy dấu check ra ngoài khung */
.bank-item > div { min-width: 0; }
.bank-name, .bank-num { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-check { margin-left: auto; color: var(--primary); width: 20px; height: 20px; opacity: 0; transition: opacity var(--dur-2); }
.bank-item.active .bank-check { opacity: 1; }

/* ---------- 13. CHI TIẾT SẢN PHẨM ---------- */
.detail-hero {
    position: relative; aspect-ratio: 16 / 11;
    border-radius: var(--r-2xl); overflow: hidden;
    background: var(--surface-2); margin-bottom: var(--space-4);
    box-shadow: var(--sh-1);
}
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-thumbs {
    display: flex; gap: var(--space-2); overflow-x: auto;
    margin: -6px 0 var(--space-4); scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.detail-thumbs::-webkit-scrollbar { display: none; }
.detail-thumb {
    width: 62px; height: 62px; flex: none; border-radius: var(--r-md);
    object-fit: cover; border: 2px solid transparent; background: var(--surface-2);
    transition: border-color var(--dur-2), transform var(--dur-1) var(--ease);
}
.detail-thumb:active { transform: scale(.94); }
.detail-thumb.active { border-color: var(--primary); }

.detail-title { font-size: 19px; font-weight: 750; line-height: 1.35; margin-bottom: var(--space-3); letter-spacing: -.02em; }
.detail-price-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); padding: var(--space-4); flex-wrap: wrap;
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, var(--primary-soft), color-mix(in srgb, var(--primary-soft) 35%, transparent));
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    margin-bottom: var(--space-4);
}
.detail-price {
    font-size: 25px; font-weight: 820; color: var(--primary);
    font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.detail-price .cur { font-size: 15px; font-weight: 650; }
.detail-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.qty {
    display: inline-flex; align-items: center; gap: 0;
    background: var(--surface-2); border: 1px solid var(--border-input);
    border-radius: var(--r-md); overflow: hidden;
}
.qty-btn {
    width: var(--tap); height: var(--tap); display: grid; place-items: center;
    color: var(--text); transition: background var(--dur-1);
}
.qty-btn svg { width: 17px; height: 17px; }
.qty-btn:active:not(:disabled) { background: var(--border); }
.qty-btn:disabled { opacity: .35; }
.qty-val {
    min-width: 46px; text-align: center; font-weight: 700; font-size: 15px;
    font-variant-numeric: tabular-nums;
}

/* Thanh hành động nổi: luôn nằm NGAY TRÊN bottom nav, không che nội dung
   (khoảng đệm cho nó do .content.has-buybar đảm nhiệm) */
.buy-bar {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--tabbar-h) + var(--safe-b));
    z-index: 45;
    max-width: 760px; margin: 0 auto;
    display: flex; align-items: center; gap: var(--space-3);
    padding: 10px 14px;
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--border);
    box-shadow: var(--sh-3);
    animation: buyBarIn var(--dur-3) var(--ease-out);
}
@keyframes buyBarIn {
    from { transform: translateY(18px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.buy-bar-info { flex: 1; min-width: 0; }
.buy-bar-label { font-size: 11.5px; color: var(--hint); }
.buy-bar-price {
    font-size: 17.5px; font-weight: 780; color: var(--primary);
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.buy-bar .btn { flex: none; }

/* ---------- 14. TÌM KIẾM ---------- */
.search { position: relative; margin-bottom: var(--space-3); }
.search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--faint); pointer-events: none;
    display: grid; place-items: center; width: 18px; height: 18px;
}
.search input {
    width: 100%; min-height: var(--tap); height: var(--tap); padding: 0 var(--space-5) 0 42px;
    background: var(--card); border: 1.5px solid var(--border-input);
    border-radius: var(--r-md); color: var(--text); font-size: 15px;
    outline: none; font-family: inherit;
    transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.search input::placeholder { color: var(--faint); }
.search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--primary-ring); }
.search-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: 50%;
    display: none; place-items: center;
    background: var(--surface-3); color: var(--hint);
}
.search.has-value .search-clear { display: grid; }

/* Sắp xếp */
.sort-bar {
    display: flex; gap: var(--space-2); overflow-x: auto;
    margin-bottom: var(--space-3); scrollbar-width: none; padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}
.sort-bar::-webkit-scrollbar { display: none; }

/* ---------- 15. PHÂN TRANG ---------- */
.pager {
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-2); padding: var(--space-6) 0 var(--space-2);
}
.pager-info { font-size: 13px; color: var(--hint); font-variant-numeric: tabular-nums; }
.pager-btn {
    width: 40px; height: 40px; border-radius: var(--r-md);
    display: grid; place-items: center;
    background: var(--card); border: 1px solid var(--border);
    color: var(--text); transition: transform var(--dur-1) var(--ease), background var(--dur-2);
}
.pager-btn:hover:not(:disabled) { background: var(--surface-2); }
.pager-btn:active:not(:disabled) { transform: scale(.9); }
.pager-btn:disabled { opacity: .35; pointer-events: none; }

/* ---------- 16. SKELETON ---------- */
.skel {
    background: linear-gradient(90deg, var(--surface-2) 20%, var(--surface-3) 50%, var(--surface-2) 80%);
    background-size: 220% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--r-sm);
}
@keyframes shimmer { from { background-position: 220% 0; } to { background-position: -220% 0; } }
.skel-text { height: 12px; }
.skel-card { height: 210px; border-radius: var(--r-lg); }
.skel-row { height: 68px; border-radius: var(--r-lg); }
.skel-hero { height: 190px; border-radius: var(--r-2xl); }

/* ---------- 17. SHEET / MODAL ---------- */
.sheet-backdrop {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(10, 16, 28, .55);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    animation: fadeIn var(--dur-3) var(--ease);
}
.sheet-backdrop[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
    max-height: 88vh; max-height: 88dvh;
    display: flex; flex-direction: column;
    background: var(--overlay); border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    border-top: 1px solid var(--border);
    box-shadow: var(--sh-3);
    animation: sheetUp var(--dur-3) var(--ease-out);
    padding-bottom: var(--safe-b);
}
.sheet[hidden] { display: none; }
@keyframes sheetUp {
    from { transform: translateY(100%); }
    to   { transform: none; }
}
.sheet-grip {
    width: 40px; height: 4px; border-radius: var(--r-full);
    background: var(--border); margin: 10px auto 0; flex: none;
}
.sheet-head {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
    flex: none;
}
.sheet-title { flex: 1; font-size: 16.5px; font-weight: 720; letter-spacing: -.02em; }
.sheet-body {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: var(--space-1) var(--space-5) var(--space-6);
    overscroll-behavior: contain;
}
/* Duong phan cach trong sheet noi bat hon vi nen overlay da sang hon */
.sheet-body .info-row { border-bottom-color: var(--border); }
.sheet-body .card { border-color: var(--border); }

.modal {
    position: fixed; inset: 0; z-index: 130;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-6); background: rgba(10, 16, 28, .6);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    animation: fadeIn var(--dur-2) var(--ease);
}
.modal[hidden] { display: none; }
.modal-card {
    width: 100%; max-width: 350px; background: var(--overlay);
    border: 1px solid var(--border);
    border-radius: var(--r-2xl); padding: 28px 22px 20px;
    box-shadow: var(--sh-3); text-align: center;
    animation: popIn var(--dur-3) var(--ease-spring);
}
@keyframes popIn {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.modal-icon {
    width: 60px; height: 60px; margin: 0 auto var(--space-3);
    border-radius: var(--r-lg); display: grid; place-items: center;
    background: var(--surface-3); color: var(--hint);
}
.modal-icon svg { width: 28px; height: 28px; }
.modal-title { font-size: 17px; font-weight: 720; margin-bottom: var(--space-2); letter-spacing: -.02em; }
.modal-body { font-size: 14px; color: var(--text); opacity: .92; line-height: 1.65; margin-bottom: var(--space-5); }
.modal-body b { color: var(--text); font-weight: 680; }
.modal-actions { display: flex; gap: var(--space-2); }
.modal-actions .btn { flex: 1; }

/* ---------- 18. TOAST ---------- */
.toasts {
    position: fixed; left: 12px; right: 12px; z-index: 200;
    bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--space-3));
    display: flex; flex-direction: column; gap: var(--space-2);
    pointer-events: none; max-width: 460px; margin: 0 auto;
}
.toast {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 13px 15px; border-radius: var(--r-lg);
    background: var(--card); border: 1px solid var(--border);
    box-shadow: var(--sh-3); font-size: 13.5px; font-weight: 550;
    animation: toastIn var(--dur-3) var(--ease-out);
    pointer-events: auto; line-height: 1.45;
}
.toast.out { animation: toastOut var(--dur-2) var(--ease) forwards; }
@keyframes toastIn {
    from { transform: translateY(18px) scale(.97); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
@keyframes toastOut { to { transform: translateY(10px) scale(.98); opacity: 0; } }
.toast-ico {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface-2); color: var(--hint);
}
.toast-ico svg { width: 17px; height: 17px; }
.toast-msg { flex: 1; min-width: 0; color: var(--text); }
.toast-success { border-left: 3px solid var(--success); }
.toast-success .toast-ico { background: var(--success-soft); color: var(--success); }
.toast-error   { border-left: 3px solid var(--danger); }
.toast-error   .toast-ico { background: var(--danger-soft); color: var(--danger); }
.toast-warn    { border-left: 3px solid var(--warning); }
.toast-warn    .toast-ico { background: var(--warning-soft); color: var(--warning); }
.toast-info    { border-left: 3px solid var(--primary); }
.toast-info    .toast-ico { background: var(--primary-soft); color: var(--primary); }

/* ---------- 19. TIỆN ÍCH ---------- */
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gap-sm { gap: var(--space-2); }
.gap-md { gap: var(--space-3); }
.gap-lg { gap: var(--space-4); }
.mt-sm { margin-top: var(--space-2); }
.mt-md { margin-top: var(--space-3); }
.mt-lg { margin-top: var(--space-5); }
.mb-md { margin-bottom: var(--space-3); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11.5px; }
.text-muted { color: var(--hint); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-green { color: var(--success); }
.text-red { color: var(--danger); }
.text-primary { color: var(--primary); }
.fw-600 { font-weight: 620; }
.fw-700 { font-weight: 700; }
.nowrap { white-space: nowrap; }
.tabnum { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hide { display: none !important; }
.divider { height: 1px; background: var(--border-soft); margin: var(--space-4) 0; }

/* Cảnh báo trong nội dung */
.notice {
    display: flex; gap: 11px; padding: 13px 14px;
    border-radius: var(--r-md); font-size: 13px; line-height: 1.6;
    background: var(--primary-soft); color: var(--text);
    border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
}
.notice-ico {
    flex: none; width: 20px; height: 20px; margin-top: 1px;
    color: var(--primary);
}
.notice-warn    { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 22%, transparent); }
.notice-warn .notice-ico { color: var(--warning); }
.notice-danger  { background: var(--danger-soft);  border-color: color-mix(in srgb, var(--danger) 20%, transparent); }
.notice-danger .notice-ico { color: var(--danger); }
.notice-success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.notice-success .notice-ico { color: var(--success); }

/* Bảng (trang quản trị) */
.table-wrap {
    overflow-x: auto; border-radius: var(--r-lg);
    border: 1px solid var(--border); background: var(--card);
    -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
thead th {
    text-align: left; padding: 11px 12px; font-size: 11px; font-weight: 700;
    color: var(--hint); text-transform: uppercase; letter-spacing: .05em;
    background: var(--surface-2); white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
}
tbody td { padding: 11px 12px; border-top: 1px solid var(--border-soft); vertical-align: middle; }
tbody tr:active { background: var(--surface-2); }

/* Switch */
.switch {
    position: relative; width: 48px; height: 28px; flex: none;
    border-radius: var(--r-full); background: var(--border-input);
    transition: background var(--dur-3) var(--ease);
    cursor: pointer;
}
/* Ray cong toi phai noi ro o che do toi (trang thai tat) */
[data-theme="dark"] .switch { background: var(--border-input); }
.switch::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(16,24,40,.3);
    transition: transform var(--dur-3) var(--ease-spring);
}
.switch.on { background: var(--success); }
.switch.on::after { transform: translateX(20px); }

/* Thẻ thống kê admin */
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 520px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 780px) { .kpi-grid { grid-template-columns: repeat(6, 1fr); } }
.kpi {
    background: var(--card); border: 1px solid var(--border);
    box-shadow: var(--card-edge, none);
    border-radius: var(--r-md); padding: var(--space-3);
}
.kpi-label { font-size: 11px; color: var(--hint); margin-bottom: 4px; font-weight: 550; }
.kpi-value { font-size: 17px; font-weight: 780; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi-accent { color: var(--primary); }
.kpi-green { color: var(--success); }
.kpi-orange { color: var(--warning); }

/* ---------- 20. QUẢN TRỊ ---------- */
/* Thanh điều hướng dán (breadcrumb) — luôn nhìn thấy đang ở đâu */
.adm-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: var(--space-2);
    margin: calc(var(--space-3) * -1) calc(var(--space-5) * -1) var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: color-mix(in srgb, var(--overlay) 92%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
}
.adm-back {
    width: 34px; height: 34px; flex: none;
    display: grid; place-items: center; border-radius: var(--r-sm);
    color: var(--hint);
    transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease);
}
.adm-back:hover { background: var(--surface-3); color: var(--text); }
.adm-back:active { transform: scale(.88); }
.adm-back svg { width: 20px; height: 20px; }
.adm-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--muted); }
.adm-crumb b {
    color: var(--text); font-weight: 650; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Lưới ô quản trị */
.adm-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
}
@media (min-width: 420px) { .adm-grid { grid-template-columns: repeat(3, 1fr); } }
.adm-card {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: var(--space-4) var(--space-3);
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--card-edge, none);
    text-align: left; width: 100%; min-height: 92px;
    transition: transform var(--dur-2) var(--ease), border-color var(--dur-2), box-shadow var(--dur-2);
}
.adm-card:hover { border-color: var(--primary); }
.adm-card:active { transform: scale(.97); box-shadow: none; }
.adm-card-ico {
    width: 38px; height: 38px; border-radius: var(--r-md);
    display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary);
}
.adm-card-ico svg { width: 20px; height: 20px; }
.adm-card-label {
    font-size: 13.5px; font-weight: 650; color: var(--text); line-height: 1.3;
}
.adm-card-n {
    position: absolute; top: 10px; right: 10px;
    min-width: 20px; height: 20px; padding: 0 6px;
    display: grid; place-items: center; border-radius: var(--r-full);
    background: var(--danger-solid); color: #fff;
    font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.adm-card-n.is-quiet { background: var(--surface-3); color: var(--hint); }

/* Nhóm tiêu đề trong sheet */
.adm-group + .adm-group { margin-top: var(--space-6); }
.adm-group-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); margin-bottom: var(--space-3);
}
.adm-group-title svg { width: 14px; height: 14px; }

/* Hàng danh sách admin: nội dung | hành động tách bạch */
.adm-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 11px var(--space-3);
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--card-edge, none);
}
.adm-row + .adm-row { margin-top: var(--space-2); }
.adm-row-body { flex: 1; min-width: 0; }
.adm-row-title {
    font-size: 14px; font-weight: 620; line-height: 1.35; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-row-sub { font-size: 12px; color: var(--hint); margin-top: 2px; }
.adm-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.adm-thumb {
    width: 44px; height: 44px; flex: none;
    border-radius: var(--r-sm); object-fit: cover;
    background: var(--surface-3);
}

/* Ô số liệu tóm tắt */
.adm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.adm-stat {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: var(--space-3) 6px; text-align: center;
    box-shadow: var(--card-edge, none);
}
.adm-stat-v { font-size: 16px; font-weight: 780; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.adm-stat-l { font-size: 11px; color: var(--hint); margin-top: 1px; }

/* Lọc nhanh */
.adm-filter {
    display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
    margin-bottom: var(--space-3); scrollbar-width: none;
}
.adm-filter::-webkit-scrollbar { display: none; }
.adm-filter button {
    flex: none; min-height: 34px; padding: 0 13px; border-radius: var(--r-full);
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: 12.5px; font-weight: 620; color: var(--hint); white-space: nowrap;
    transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.adm-filter button.on {
    background: var(--primary); border-color: var(--primary); color: var(--on-primary);
}
[data-theme="dark"] .adm-filter button.on { color: var(--on-primary); }

/* ---------- 21. MÀN HÌNH HẸP (320–359px) ---------- */
/* Thu nhỏ khoảng cách và cỡ chữ để 3 nút hero không tràn ngang */
@media (max-width: 359px) {
    .content { padding-left: 12px; padding-right: 12px; }
    .hero { padding: var(--space-4); border-radius: var(--r-xl); }
    .hero-amount { font-size: 29px; }
    .hero-amount .cur { font-size: 17px; }
    .hero-actions { gap: 6px; }
    .hero-btn { font-size: 12px; gap: 0; padding: 0 2px; }
    /* 3 nút trong 320px không còn chỗ cho icon -> bỏ icon, giữ chữ */
    .hero-btn svg { display: none; }
    .btn { padding: 0 var(--space-3); }
    .btn-lg { font-size: 15px; }
    .sheet-body { padding-left: var(--space-4); padding-right: var(--space-4); }
    .code-value { font-size: 18px; letter-spacing: .04em; }
    .stat-value { font-size: 14px; }
    .tabbar-item { font-size: 10px; }
    .modal-actions { flex-direction: column-reverse; }
}

/* Màn hình rộng: dùng thoáng hơn */
@media (min-width: 430px) {
    .content { padding-left: 20px; padding-right: 20px; }
}

/* ---------- 22. DESKTOP ---------- */
@media (min-width: 860px) {
    .content { padding-left: var(--space-6); padding-right: var(--space-6); }
    .tabbar {
        max-width: 760px; left: 50%; transform: translateX(-50%);
        border-radius: var(--r-2xl) var(--r-2xl) 0 0;
        border: 1px solid var(--border); border-bottom: none;
    }
    .toasts { bottom: var(--space-6); left: auto; right: var(--space-6); width: 380px; }
    .sheet {
        max-width: 520px; left: 50%; transform: translateX(-50%);
        border-radius: var(--r-2xl); bottom: 5vh;
        max-height: 84vh;
        animation-name: sheetUpDesktop;
    }
    @keyframes sheetUpDesktop {
        from { transform: translateX(-50%) translateY(32px) scale(.98); opacity: 0; }
        to   { transform: translateX(-50%); opacity: 1; }
    }
}