/* ==========================================================================
   KẸO DẺO — Design System cho Shopee Cashback
   Bảng màu: hồng punch trên nền kem · Hình khối: chunky sticker, bo mềm
   Font hiển thị: Baloo 2 · Font nội dung: Be Vietnam Pro

   Quy ước đặt tên:
     --c-*    màu (color)
     --r-*    bo góc (radius)
     --sh-*   đổ bóng (shadow)
     .c-*     component class dùng chung

   QUAN TRỌNG: file này là CSS thuần, KHÔNG dùng @apply.
   Tailwind nạp qua CDN nên không có build step để xử lý @apply trong file ngoài.
   ========================================================================== */

/* ==========================================================================
   1. TOKEN — CHẾ ĐỘ SÁNG
   ========================================================================== */
:root {
    /* Nền & bề mặt */
    --c-bg:          #FFF7F3;   /* nền trang, hồng kem */
    --c-surface:     #FFFFFF;   /* mặt thẻ chính */
    --c-surface-2:   #FFF1EB;   /* mặt chìm: input, ô inset, thead */
    --c-surface-3:   #FFE8E0;   /* mặt chìm sâu hơn, hover */

    /* Chữ — thang mực ám mận, không dùng xám lạnh mặc định */
    --c-ink:         #2B1B24;   /* tiêu đề, số tiền */
    --c-ink-2:       #5A4450;   /* nội dung thường */
    --c-muted:       #8C7580;   /* nhãn phụ, chú thích (đạt AA trên nền sáng) */
    --c-faint:       #B3A0AA;   /* chữ mờ nhất, chỉ dùng cho trạng thái rỗng */

    /* Đường kẻ */
    --c-line:        #F3E2DC;
    --c-line-strong: #E7CEC6;

    /* Điểm nhấn — hồng punch */
    --c-accent:      #FF4D6D;   /* nền nút, mảng màu. KHÔNG dùng làm màu chữ trên nền sáng */
    --c-accent-deep: #D62F4F;   /* màu chữ / link trên nền sáng — đạt AA 4.9:1 */
    --c-accent-dark: #A81E3A;   /* viền & bóng chunky */
    --c-accent-soft: #FFE8EC;   /* nền nhạt cho badge, chip */
    --c-accent-ink:  #FFFFFF;   /* chữ nằm trên nền accent */

    /* Ngữ nghĩa — tiền về / chờ / lỗi. Là màu chức năng, không phải màu thương hiệu */
    --c-good:        #0FB68A;
    --c-good-deep:   #067F60;
    --c-good-dark:   #05614A;
    --c-good-soft:   #DFF7EF;

    --c-warn:        #F5A524;
    --c-warn-deep:   #9A6206;
    --c-warn-dark:   #7A4E05;
    --c-warn-soft:   #FFF3DC;

    --c-bad:         #E5484D;
    --c-bad-deep:    #C2282D;
    --c-bad-dark:    #99181D;
    --c-bad-soft:    #FDE8E8;

    /* Mực đậm — dùng cho NÚT phụ tương phản cao.
       Cố ý ĐẢO ở chế độ tối: nút mực đen trên nền sáng, nút sáng trên nền tối. */
    --c-dark:        #2B1B24;
    --c-dark-hover:  #3E2836;
    --c-dark-ink:    #FFF7F3;

    /* Panel mực — dùng cho THẺ nền tối. KHÔNG đảo: thẻ phải tối ở cả hai chế độ.
       Tách khỏi --c-dark vì trộn hai thứ này làm thẻ hoá trắng-trên-trắng
       khi bật chế độ tối. */
    --c-panel:       #2B1B24;
    --c-panel-ink:   #FFF7F3;
    --c-panel-mute:  rgba(255, 255, 255, .68);

    /* Bo góc — thang rõ ràng, thẻ ngoài mềm hơn phần tử bên trong */
    --r-xs:   8px;
    --r-sm:  12px;
    --r-md:  16px;
    --r-lg:  22px;
    --r-xl:  28px;
    --r-2xl: 34px;
    --r-full: 999px;

    /* Đổ bóng — ám tông mận theo nền, không dùng đen thuần */
    --sh-xs: 0 1px 2px rgba(43, 27, 36, .05);
    --sh-sm: 0 2px 8px -2px rgba(43, 27, 36, .08);
    --sh-md: 0 6px 20px -6px rgba(43, 27, 36, .12);
    --sh-lg: 0 16px 40px -12px rgba(43, 27, 36, .18);
    --sh-accent: 0 8px 24px -8px rgba(255, 77, 109, .45);

    /* Thang z-index — thay cho các giá trị tuỳ tiện kiểu 9999 */
    --z-header:   40;
    --z-dropdown: 45;
    --z-fab:      50;
    --z-modal:    60;
    --z-toast:    70;

    /* Chuyển động */
    --ease: cubic-bezier(.2, .8, .3, 1);
}

/* ==========================================================================
   2. TOKEN — CHẾ ĐỘ TỐI
   Chỉ đổi giá trị biến. Mọi component bên dưới tự động theo,
   nên không còn phải rắc dark: lên từng dòng markup.
   ========================================================================== */
.dark {
    --c-bg:          #170E13;
    --c-surface:     #21151D;
    --c-surface-2:   #2B1C26;
    --c-surface-3:   #372430;

    --c-ink:         #FFF3F6;
    --c-ink-2:       #E0CAD4;
    --c-muted:       #A8919C;
    --c-faint:       #7A646F;

    --c-line:        #3A2633;
    --c-line-strong: #4D3443;

    --c-accent:      #FF6B85;   /* sáng hơn bản light để đủ tương phản trên nền tối */
    --c-accent-deep: #FF8299;   /* màu chữ trên nền tối */
    --c-accent-dark: #C93A58;
    --c-accent-soft: #3D1F2A;
    --c-accent-ink:  #2B0A13;

    --c-good:        #2ED3A7;
    --c-good-deep:   #4FE0BA;
    --c-good-dark:   #12836A;
    --c-good-soft:   #14382F;

    --c-warn:        #FFBC4D;
    --c-warn-deep:   #FFCE7A;
    --c-warn-dark:   #9A6E14;
    --c-warn-soft:   #3A2B12;

    --c-bad:         #FF6B70;
    --c-bad-deep:    #FF8B8F;
    --c-bad-dark:    #A32A2E;
    --c-bad-soft:    #3B1A1C;

    --c-dark:        #FFF3F6;
    --c-dark-hover:  #E8D6DE;
    --c-dark-ink:    #21151D;

    /* Panel giữ nguyên sắc tối, chỉ nhích lên một bậc so với nền trang */
    --c-panel:       #2E1E29;
    --c-panel-ink:   #FFF3F6;
    --c-panel-mute:  rgba(255, 255, 255, .64);

    --sh-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --sh-sm: 0 2px 8px -2px rgba(0, 0, 0, .45);
    --sh-md: 0 6px 20px -6px rgba(0, 0, 0, .55);
    --sh-lg: 0 16px 40px -12px rgba(0, 0, 0, .65);
    --sh-accent: 0 8px 24px -8px rgba(255, 107, 133, .35);
}

/* ==========================================================================
   3. NỀN TẢNG
   ========================================================================== */
html { scroll-behavior: smooth; }

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

/* Báo cho trình duyệt biết đang ở chế độ nào, để thanh cuộn và các ô nhập
   gốc (date picker, select trên Windows) cũng đổi theo thay vì kẹt màu sáng. */
:root { color-scheme: light; }
.dark { color-scheme: dark; }

body {
    background: var(--c-bg);
    color: var(--c-ink-2);
    font-family: "Be Vietnam Pro", system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
    /* Bỏ độ trễ 300ms khi chạm hai lần trên điện thoại */
    touch-action: manipulation;
    transition: background-color .2s var(--ease), color .2s var(--ease);
}

.font-display,
h1, h2, h3, h4 {
    font-family: "Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;
}

h1, h2, h3, h4 {
    color: var(--c-ink);
    text-wrap: balance;
}

p { text-wrap: pretty; }

/* Số tiền luôn dùng chữ số đều bề ngang để cột không nhảy khi giá trị đổi */
.num, .c-stat__value, .c-money {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Tiện ích màu theo token — thay cho text-slate-*, bg-white... rải rác */
.t-ink     { color: var(--c-ink); }
.t-ink-2   { color: var(--c-ink-2); }
.t-muted   { color: var(--c-muted); }
.t-faint   { color: var(--c-faint); }
.t-accent  { color: var(--c-accent-deep); }
.t-good    { color: var(--c-good-deep); }
.t-warn    { color: var(--c-warn-deep); }
.t-bad     { color: var(--c-bad-deep); }

.bg-surface   { background: var(--c-surface); }
.bg-surface-2 { background: var(--c-surface-2); }
.bd-line      { border-color: var(--c-line); }

/* ---------------------------------------------------------------------------
   JS bật/tắt mọi thứ bằng classList.add/remove('hidden') — modal, dropdown,
   nút tab, huy hiệu. Các component dưới đây tự khai báo display, mà Tailwind
   nạp qua CDN nên thứ tự chèn <style> không đoán trước được → cần ép hidden
   thắng, nếu không sẽ có lúc modal tự bung ra giữa màn hình.

   TUYỆT ĐỐI KHÔNG viết thành `.hidden { display: none !important }` cho toàn
   trang: như vậy sẽ đè luôn các utility hiện-theo-khổ-màn-hình của Tailwind
   (`hidden md:block`, `hidden sm:block`…) và mọi bảng bản desktop sẽ biến mất
   vĩnh viễn. Chỉ liệt kê đúng những component tự đặt display.
   --------------------------------------------------------------------------- */
.c-modal.hidden,
.c-tab.hidden,
.c-subtab.hidden,
.c-btn.hidden,
.c-badge.hidden,
.c-chip.hidden,
.c-dot-count.hidden,
.c-note.hidden,
.c-pager.hidden,
.c-stat.hidden,
.c-mcard.hidden,
.c-fab.hidden,
.c-tabbar.hidden,
.c-subtabbar.hidden { display: none !important; }

/* Ngoại lệ cho thành phần chỉ ẩn ở màn hình nhỏ ("hidden md:flex", "hidden lg:inline-flex"):
   quy tắc !important ở trên đè mất utility của Tailwind, khiến thanh tab desktop và nhãn
   "Hoàn tiền thật" không bao giờ hiện. Bật lại đúng ở khổ màn hình tương ứng. */
@media (min-width: 768px)  { .c-tabbar.hidden.md\:flex { display: flex !important; } }
@media (min-width: 1024px) { .c-badge.hidden.lg\:inline-flex { display: inline-flex !important; } }

/* Vòng focus thống nhất — bắt buộc cho điều hướng bằng bàn phím.
   Dùng :is() chứ không dùng :where(): :where() có độ ưu tiên bằng 0 nên
   bất kỳ utility focus: nào của Tailwind cũng ghi đè được, khiến ô nhập
   mất hẳn vòng focus. */
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* Ô dán link gồm input + 2 nút trong một khung: làm sáng cả khung khi
   bất kỳ phần tử con nào được focus, để thấy rõ đang đứng ở đâu. */
.c-fieldgroup:focus-within {
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}

/* Link bỏ qua điều hướng, chỉ hiện khi tab tới */
.c-skip {
    position: absolute;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    background: var(--c-accent);
    color: var(--c-accent-ink);
    font-weight: 800;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: var(--r-full);
    transition: top .2s var(--ease);
}
.c-skip:focus { top: 12px; }

/* Thanh cuộn */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--c-line-strong);
    border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }

::selection {
    background: var(--c-accent-soft);
    color: var(--c-accent-deep);
}

/* ==========================================================================
   4. THẺ (CARD)
   ========================================================================== */
.c-card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
}

/* Thẻ chìm: dùng bên trong thẻ khác, không chồng bóng lên nhau */
.c-card--inset {
    background: var(--c-surface-2);
    border-radius: var(--r-lg);
    box-shadow: none;
}

/* Thẻ phẳng: chỉ có nền, không viền không bóng */
.c-card--flat {
    border: none;
    box-shadow: none;
}

/* Thẻ hero: mảng màu accent đặc, dùng cho đúng MỘT điểm nhìn mỗi màn */
.c-card--hero {
    background: var(--c-accent);
    border: 2px solid var(--c-accent-dark);
    border-radius: var(--r-2xl);
    box-shadow: 0 6px 0 0 var(--c-accent-dark), var(--sh-md);
    color: var(--c-accent-ink);
}
.c-card--hero h1, .c-card--hero h2,
.c-card--hero h3, .c-card--hero h4 { color: var(--c-accent-ink); }

/* Thẻ mực: tương phản cao, dùng cho khu quản trị / khu dữ liệu.
   Dùng --c-panel (không đảo) chứ không phải --c-dark (có đảo). */
.c-card--ink {
    background: var(--c-panel);
    color: var(--c-panel-ink);
    border: none;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-md);
}
.c-card--ink h1, .c-card--ink h2,
.c-card--ink h3, .c-card--ink h4 { color: var(--c-panel-ink); }
.c-card--ink p { color: var(--c-panel-mute); }

.c-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-line);
}

.c-card__title {
    font-size: 17px;
    font-weight: 800;
    color: var(--c-ink);
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.25;
}

.c-card__sub {
    font-size: 12px;
    color: var(--c-muted);
    margin-top: 2px;
    font-weight: 500;
}

/* Ô vuông chứa icon ở đầu tiêu đề thẻ */
.c-card__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--c-accent-soft);
    color: var(--c-accent-deep);
}
.c-card__icon--good { background: var(--c-good-soft); color: var(--c-good-deep); }
.c-card__icon--warn { background: var(--c-warn-soft); color: var(--c-warn-deep); }
.c-card__icon--bad  { background: var(--c-bad-soft);  color: var(--c-bad-deep); }
.c-card__icon--ink  { background: var(--c-dark);      color: var(--c-dark-ink); }

/* ==========================================================================
   5. NÚT (BUTTON)
   Nền tảng chunky sticker: viền đặc + bóng đặc dưới đáy, bấm thì lún xuống.
   ========================================================================== */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 2px solid transparent;
    border-radius: var(--r-full);
    font-family: "Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    background: var(--c-surface-2);
    color: var(--c-ink);
    transition: transform .1s var(--ease), box-shadow .1s var(--ease),
                background-color .15s var(--ease), color .15s var(--ease);
}

.c-btn:disabled,
.c-btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
}

/* Biến thể chính — hồng punch */
.c-btn--primary {
    background: var(--c-accent);
    color: var(--c-accent-ink);
    border-color: var(--c-accent-dark);
    box-shadow: 0 4px 0 0 var(--c-accent-dark);
}
.c-btn--primary:hover:not(:disabled) { background: var(--c-accent-deep); }
.c-btn--primary:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 1px 0 0 var(--c-accent-dark);
}

/* Biến thể tiền về ví — bạc hà, chỉ dùng cho hành động "nhận tiền / rút tiền" */
.c-btn--good {
    background: var(--c-good);
    color: #06312B;
    border-color: var(--c-good-dark);
    box-shadow: 0 4px 0 0 var(--c-good-dark);
}
.c-btn--good:hover:not(:disabled) { background: var(--c-good-deep); color: #fff; }
.c-btn--good:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 1px 0 0 var(--c-good-dark);
}

/* Biến thể cảnh báo — vàng mật */
.c-btn--warn {
    background: var(--c-warn);
    color: #3A2705;
    border-color: var(--c-warn-dark);
    box-shadow: 0 4px 0 0 var(--c-warn-dark);
}
.c-btn--warn:hover:not(:disabled) { background: var(--c-warn-deep); color: #fff; }
.c-btn--warn:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 1px 0 0 var(--c-warn-dark);
}

/* Biến thể mực — hành động phụ tương phản cao */
.c-btn--ink {
    background: var(--c-dark);
    color: var(--c-dark-ink);
    border-color: var(--c-dark);
}
.c-btn--ink:hover:not(:disabled) { background: var(--c-dark-hover); border-color: var(--c-dark-hover); }
.c-btn--ink:active:not(:disabled) { transform: translateY(2px); }

/* Biến thể trắng — dùng khi nằm TRÊN mảng màu accent */
.c-btn--on-accent {
    background: #fff;
    color: var(--c-accent-deep);
    border-color: rgba(0, 0, 0, .12);
    box-shadow: 0 4px 0 0 rgba(0, 0, 0, .16);
}
.c-btn--on-accent:hover:not(:disabled) { background: #FFF1F4; }
.c-btn--on-accent:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, .16);
}

/* Biến thể nhẹ — viền mảnh, không bóng đặc */
.c-btn--quiet {
    background: transparent;
    color: var(--c-ink-2);
    border-color: var(--c-line-strong);
    font-weight: 600;
}
.c-btn--quiet:hover:not(:disabled) {
    background: var(--c-surface-2);
    color: var(--c-ink);
}
.c-btn--quiet:active:not(:disabled) { transform: translateY(2px); }

/* Biến thể chữ — hành động cấp ba, giảm nhiễu thị giác */
.c-btn--text {
    background: transparent;
    border-color: transparent;
    color: var(--c-accent-deep);
    padding: 6px 8px;
    font-weight: 700;
}
.c-btn--text:hover:not(:disabled) { text-decoration: underline; }

/* Biến thể nguy hiểm */
.c-btn--danger {
    background: var(--c-bad-soft);
    color: var(--c-bad-deep);
    border-color: var(--c-bad);
    font-weight: 700;
}
.c-btn--danger:hover:not(:disabled) { background: var(--c-bad); color: #fff; }

/* Kích cỡ — khai báo sau các biến thể nên sẽ ghi đè padding của chúng */
.c-btn--sm  { padding: 7px 14px;  font-size: 12px; gap: 6px; }
.c-btn--lg  { padding: 15px 28px; font-size: 16px; }
.c-btn--block { width: 100%; }

/* Nút chữ cỡ nhỏ: phải khai báo riêng, nếu không .c-btn--sm sẽ nhét lại
   padding 14px hai bên và nút "Đăng Nhập" trên header phình ra làm
   tên thương hiệu bị cắt cụt ở khổ 390px. */
.c-btn--text.c-btn--sm { padding: 5px 6px; }

/* Nút chỉ chứa icon */
.c-btn--icon {
    padding: 9px;
    border-radius: var(--r-sm);
    background: transparent;
    border-color: transparent;
    color: var(--c-muted);
}
.c-btn--icon:hover:not(:disabled) {
    background: var(--c-surface-2);
    color: var(--c-ink);
}

/* ==========================================================================
   6. THANH TAB
   switchTab() trong index.html gán đè className bằng đúng 2 chuỗi:
     'c-tab c-tab--active'  và  'c-tab'
   Sửa giao diện tab thì sửa ở đây, không cần đụng vào JS.
   ========================================================================== */
.c-tabbar {
    display: flex;
    gap: 6px;
    padding: 6px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}

.c-tab {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 8px;
    border: none;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--c-muted);
    font-family: "Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    min-width: 0;
    transition: background-color .15s var(--ease), color .15s var(--ease),
                transform .1s var(--ease);
}
.c-tab > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.c-tab:hover:not(.c-tab--active) {
    background: var(--c-surface-2);
    color: var(--c-ink);
}
.c-tab:active { transform: translateY(2px); }

.c-tab--active {
    background: var(--c-accent);
    color: var(--c-accent-ink);
    box-shadow: 0 3px 0 0 var(--c-accent-dark);
}

/* Tab bị JS ẩn qua classList: hidden/flex. Giữ hidden thắng display:flex */
.c-tab.hidden { display: none !important; }

/* Tab phụ bên trong modal ví tiền */
.c-subtab {
    flex: 1 1 0%;
    padding: 9px 12px;
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--c-muted);
    font-size: 12px;
    /* Luôn đậm sẵn, kể cả khi chưa được chọn: nếu chỉ tô đậm lúc active thì
       chữ dài ra, nút bị đẩy rộng và xuống dòng ngay khi bấm. */
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Không cho chữ xuống dòng — đây là lý do nút "Tiền vào (+)" phồng
       cao gấp đôi khi được chọn. */
    white-space: nowrap;
    min-width: 0;
    transition: background-color .15s var(--ease), color .15s var(--ease),
                box-shadow .15s var(--ease);
}
.c-subtab--active {
    background: var(--c-surface);
    color: var(--c-accent-deep);
    box-shadow: var(--sh-xs);
}

/* Vỏ chứa nhóm tab phụ */
.c-subtabbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--c-surface-2);
    border-radius: var(--r-md);
}

/* Huy hiệu đếm số lượng trên subtab */
.c-subtab__counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-mono, monospace);
    line-height: 1;
    background: var(--c-line-strong);
    color: var(--c-ink-2);
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.c-subtab--active .c-subtab__counter {
    background: var(--c-accent-soft);
    color: var(--c-accent-deep);
}

@media (max-width: 640px) {
    .c-subtab {
        padding: 6px 4px;
        font-size: 11px;
        gap: 4px;
    }
    .c-subtab__counter {
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 10px;
    }
}

/* ==========================================================================
   7. HUY HIỆU (BADGE) & CHIP
   Cố ý dùng góc bo vừa thay vì viên thuốc tròn lẳn cho badge trạng thái,
   để phân biệt rõ với nút bấm.
   ========================================================================== */
.c-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--r-xs);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--c-surface-2);
    color: var(--c-ink-2);
    border: 1px solid var(--c-line);
}
.c-badge--accent { background: var(--c-accent-soft); color: var(--c-accent-deep); border-color: var(--c-accent); }
.c-badge--good   { background: var(--c-good-soft);   color: var(--c-good-deep);   border-color: var(--c-good); }
.c-badge--warn   { background: var(--c-warn-soft);   color: var(--c-warn-deep);   border-color: var(--c-warn); }
.c-badge--bad    { background: var(--c-bad-soft);    color: var(--c-bad-deep);    border-color: var(--c-bad); }
.c-badge--solid  { background: var(--c-accent);      color: var(--c-accent-ink);  border-color: var(--c-accent-dark); }
.c-badge--onhero { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.3); }

/* Chip tròn — dùng cho nhãn ngắn kiểu "Auto Track", số thứ tự */
.c-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 700;
    background: var(--c-surface-2);
    color: var(--c-ink-2);
}

/* Chấm đếm thông báo */
.c-dot-count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: var(--r-full);
    background: var(--c-bad);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--c-surface);
}

/* ==========================================================================
   8. THẺ CHỈ SỐ (STAT)
   ========================================================================== */
.c-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px;
    background: var(--c-surface-2);
    border-radius: var(--r-lg);
}
.c-stat__label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-muted);
}
.c-stat__value {
    font-family: "Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--c-ink);
    line-height: 1.15;
    white-space: nowrap;
}
.c-stat__hint {
    font-size: 11px;
    color: var(--c-muted);
    font-weight: 500;
}

/* Thẻ chỉ số nổi bật — tiền hoàn về ví */
.c-stat--good {
    background: var(--c-good-soft);
    border: 2px solid var(--c-good);
}
.c-stat--good .c-stat__label { color: var(--c-good-deep); }
.c-stat--good .c-stat__value { color: var(--c-good-deep); font-size: 28px; }
.c-stat--good .c-stat__hint  { color: var(--c-good-deep); }

.c-stat--accent { background: var(--c-accent-soft); }
.c-stat--accent .c-stat__value { color: var(--c-accent-deep); }

/* Trên nền hero */
.c-stat--onhero { background: rgba(255, 255, 255, .16); }
.c-stat--onhero .c-stat__label,
.c-stat--onhero .c-stat__hint  { color: rgba(255, 255, 255, .8); }
.c-stat--onhero .c-stat__value { color: #fff; }

/* ==========================================================================
   9. FORM
   ========================================================================== */
.c-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-ink);
    margin-bottom: 6px;
}

.c-input,
.c-select,
.c-textarea {
    width: 100%;
    padding: 11px 14px;
    background: var(--c-surface-2);
    border: 1.5px solid var(--c-line);
    border-radius: var(--r-md);
    color: var(--c-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.c-input::placeholder,
.c-textarea::placeholder { color: var(--c-faint); }

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

.c-input--mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; }
.c-input--money { font-variant-numeric: tabular-nums; font-weight: 800; }

.c-select {
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C7580' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.c-hint {
    font-size: 11px;
    color: var(--c-muted);
    margin-top: 5px;
    font-weight: 500;
}

/* Công tắc bật/tắt */
.c-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.c-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.c-switch__track {
    width: 46px;
    height: 26px;
    border-radius: var(--r-full);
    background: var(--c-line-strong);
    transition: background-color .2s var(--ease);
    position: relative;
}
.c-switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: var(--r-full);
    background: #fff;
    box-shadow: var(--sh-xs);
    transition: transform .2s var(--ease);
}
.c-switch input:checked + .c-switch__track { background: var(--c-accent); }
.c-switch input:checked + .c-switch__track::after { transform: translateX(20px); }
.c-switch input:focus-visible + .c-switch__track { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* Ô tick — hộp vuông bo nhẹ, đủ to để bấm bằng ngón tay */
.c-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--c-surface-2);
    cursor: pointer;
    user-select: none;
    transition: background-color .15s var(--ease);
}
.c-check:hover { background: var(--c-surface-3); }
.c-check input {
    appearance: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 0;
    border: 2px solid var(--c-line-strong);
    border-radius: 6px;
    background: var(--c-surface);
    cursor: pointer;
    position: relative;
    transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.c-check input:checked {
    background: var(--c-accent);
    border-color: var(--c-accent-dark);
}
.c-check input:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
.c-check__text { font-size: 12.5px; font-weight: 600; color: var(--c-ink-2); line-height: 1.4; }

/* Một quy tắc trong hướng dẫn chống mất đơn: số thứ tự + việc nên / không nên */
.c-rule {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: var(--c-surface-2);
    border-radius: var(--r-lg);
}
.c-rule__num {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30%;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    font-family: "Baloo 2", sans-serif;
    font-weight: 800;
    font-size: 13px;
}
.c-rule__title {
    font-family: "Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--c-ink);
    line-height: 1.3;
    margin-bottom: 6px;
}
.c-rule__line {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--c-ink-2);
    margin-top: 5px;
}
/* Nhắm vào cả <i> lẫn <svg>: lucide.createIcons() THAY THẾ thẻ <i> bằng <svg>,
   nên selector viết theo tên thẻ `i` sẽ ngừng khớp ngay sau khi icon render.
   Lucide có giữ lại thuộc tính class, vậy nên selector theo class thì vẫn chạy. */
.c-rule__line > i,
.c-rule__line > svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
.c-rule__line--no  > i, .c-rule__line--no  > svg { color: var(--c-bad-deep); }
.c-rule__line--yes > i, .c-rule__line--yes > svg { color: var(--c-good-deep); }
.c-rule__tag { font-weight: 800; }
.c-rule__line--no .c-rule__tag  { color: var(--c-bad-deep); }
.c-rule__line--yes .c-rule__tag { color: var(--c-good-deep); }

/* Vùng kéo thả tệp */
.c-dropzone {
    padding: 28px 20px;
    border: 2px dashed var(--c-line-strong);
    border-radius: var(--r-lg);
    background: var(--c-surface-2);
    text-align: center;
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.c-dropzone:hover {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}

/* ==========================================================================
   10. BẢNG
   ========================================================================== */
.c-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    -webkit-overflow-scrolling: touch;
}

.c-table {
    width: 100%;
    text-align: left;
    font-size: 12px;
    border-collapse: collapse;
}

.c-table thead tr {
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-line);
}

.c-table th {
    padding: 12px 16px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c-muted);
    white-space: nowrap;
}

.c-table td {
    padding: 12px 16px;
    color: var(--c-ink-2);
    font-weight: 500;
    vertical-align: middle;
}

.c-table tbody tr { border-top: 1px solid var(--c-line); }
.c-table tbody tr:first-child { border-top: none; }
.c-table tbody tr:hover { background: var(--c-surface-2); }

.c-table .num,
.c-table .c-money { font-variant-numeric: tabular-nums; }

/* Thẻ thay bảng trên điện thoại (Mobile Order Card View) */
.c-mcard {
    padding: 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.c-mcard:active {
    transform: scale(0.99);
}
.c-mcard__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
}
.c-mcard__key { color: var(--c-muted); font-weight: 600; }
.c-mcard__val { color: var(--c-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   10b. PHÂN TRANG
   Dùng chung cho mọi bảng/danh sách qua hàm setupPager() trong index.html.
   ========================================================================== */
.c-pager {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--c-line);
    font-size: 12px;
    color: var(--c-muted);
}
@media (min-width: 640px) {
    .c-pager { flex-direction: row; align-items: center; justify-content: space-between; }
}
.c-pager.hidden { display: none !important; }

.c-pager__info { font-weight: 500; }
.c-pager__info b { color: var(--c-ink); font-variant-numeric: tabular-nums; }

.c-pager__controls {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.c-pager__btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1.5px solid var(--c-line-strong);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    color: var(--c-ink-2);
    font-family: "Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color .15s var(--ease), color .15s var(--ease),
                border-color .15s var(--ease), transform .1s var(--ease);
}
.c-pager__btn:hover:not(:disabled):not(.c-pager__btn--active) {
    background: var(--c-surface-2);
    color: var(--c-ink);
}
.c-pager__btn:active:not(:disabled) { transform: translateY(1px); }
.c-pager__btn:disabled { opacity: .4; cursor: not-allowed; }

.c-pager__btn--active {
    background: var(--c-accent);
    border-color: var(--c-accent-dark);
    color: var(--c-accent-ink);
    box-shadow: 0 2px 0 0 var(--c-accent-dark);
}

.c-pager__gap {
    padding: 0 2px;
    color: var(--c-faint);
    font-weight: 700;
}

/* ==========================================================================
   11. TRẠNG THÁI RỖNG / TẢI / LỖI
   ========================================================================== */
.c-empty {
    padding: 36px 20px;
    text-align: center;
    color: var(--c-faint);
    font-size: 13px;
    font-weight: 600;
}
.c-empty__icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: var(--r-md);
    background: var(--c-surface-2);
    color: var(--c-faint);
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-skeleton {
    background: linear-gradient(90deg,
        var(--c-surface-2) 25%,
        var(--c-surface-3) 37%,
        var(--c-surface-2) 63%);
    background-size: 400% 100%;
    animation: c-shimmer 1.4s ease infinite;
    border-radius: var(--r-sm);
}
@keyframes c-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Hộp thông báo trong luồng */
.c-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    border-radius: var(--r-md);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.55;
    background: var(--c-surface-2);
    color: var(--c-ink-2);
    border: 1px solid var(--c-line);
}
.c-note__icon { flex-shrink: 0; margin-top: 1px; }
.c-note--accent { background: var(--c-accent-soft); color: var(--c-accent-deep); border-color: var(--c-accent); }
.c-note--good   { background: var(--c-good-soft);   color: var(--c-good-deep);   border-color: var(--c-good); }
.c-note--warn   { background: var(--c-warn-soft);   color: var(--c-warn-deep);   border-color: var(--c-warn); }
.c-note--bad    { background: var(--c-bad-soft);    color: var(--c-bad-deep);    border-color: var(--c-bad); }

/* ==========================================================================
   11b. POPOVER (dropdown thông báo, menu tài khoản)
   Trên điện thoại KHÔNG neo theo nút bấm: nút nằm giữa header nên panel rộng
   320px sẽ thò hẳn ra ngoài mép màn hình. Ở khổ nhỏ dùng position: fixed căng
   theo bề ngang màn hình; từ 640px trở lên mới neo vào nút như bình thường.
   ========================================================================== */
.c-popover {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 66px;
    width: auto;
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    z-index: var(--z-dropdown);
}
.c-popover.hidden { display: none !important; }

@media (min-width: 640px) {
    .c-popover {
        position: absolute;
        left: auto;
        right: 0;
        top: calc(100% + 8px);
        width: 360px;
        max-height: 70vh;
    }
    .c-popover--sm { width: 260px; }
}

.c-popover__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-line);
    position: sticky;
    top: 0;
}

/* Một dòng trong menu tài khoản */
.c-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    background: transparent;
    border: none;
    color: var(--c-ink-2);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.c-menu-item:hover { background: var(--c-surface-2); color: var(--c-ink); }
.c-menu-item--danger { color: var(--c-bad-deep); }
.c-menu-item--danger:hover { background: var(--c-bad-soft); }

/* ==========================================================================
   12. MODAL
   ========================================================================== */
.c-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(23, 14, 19, .68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    overflow-y: auto;
    /* Cuộn hết nội dung modal thì dừng, không kéo theo trang nền phía sau */
    overscroll-behavior: contain;
}
/* JS bật/tắt bằng class hidden — phải thắng display:flex */
.c-modal.hidden { display: none !important; }

.c-modal__panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-2xl);
    box-shadow: var(--sh-lg);
    padding: 24px;
}
.c-modal__panel--wide { max-width: 680px; }
.c-modal__panel--xwide { max-width: 860px; }

.c-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--r-full);
    background: var(--c-surface-2);
    color: var(--c-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s var(--ease);
}
.c-modal__close:hover { background: var(--c-surface-3); color: var(--c-ink); }

.c-modal__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 44px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--c-line);
}
.c-modal__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--c-ink);
    line-height: 1.25;
}

/* ==========================================================================
   13. TOAST
   ========================================================================== */
.c-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 700;
    box-shadow: var(--sh-lg);
    pointer-events: auto;
    background: var(--c-dark);
    color: var(--c-dark-ink);
    animation: c-toast-in .25s var(--ease);
}
.c-toast--good { background: var(--c-good-deep); color: #fff; }
.c-toast--bad  { background: var(--c-bad-deep);  color: #fff; }
.c-toast--warn { background: var(--c-warn-deep); color: #fff; }

@keyframes c-toast-in {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ==========================================================================
   14. BỤC VINH DANH (LEADERBOARD PODIUM)
   ========================================================================== */
.c-podium { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.c-podium__avatar {
    width: 48px;
    height: 48px;
    /* squircle thay vì tròn lẳn — bớt cảm giác mặc định */
    border-radius: 34%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Baloo 2", sans-serif;
    font-weight: 800;
    font-size: 18px;
    background: var(--c-surface-3);
    color: var(--c-ink);
    border: 2px solid var(--c-line-strong);
}
.c-podium__name  { font-size: 12px; font-weight: 800; color: var(--c-ink); text-align: center; }
.c-podium__value { font-size: 12px; font-weight: 800; color: var(--c-good-deep); font-variant-numeric: tabular-nums; }
.c-podium__block {
    width: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: var(--c-surface-2);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10px;
    font-family: "Baloo 2", sans-serif;
    font-weight: 900;
    color: var(--c-muted);
}
.c-podium--1 .c-podium__block  { background: var(--c-accent); color: var(--c-accent-ink); height: 92px; }
.c-podium--1 .c-podium__avatar { width: 58px; height: 58px; font-size: 21px; border-color: var(--c-accent); }
.c-podium--2 .c-podium__block  { height: 66px; }
.c-podium--3 .c-podium__block  { height: 48px; }

/* ==========================================================================
   15. NÚT HỖ TRỢ NỔI
   ========================================================================== */
.c-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 2px solid var(--c-accent-dark);
    border-radius: var(--r-full);
    background: var(--c-accent);
    color: var(--c-accent-ink);
    font-family: "Baloo 2", sans-serif;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 0 0 var(--c-accent-dark), var(--sh-md);
    transition: transform .1s var(--ease), box-shadow .1s var(--ease);
}
.c-fab:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 0 var(--c-accent-dark), var(--sh-sm);
}
.c-fab__text {
    display: none;
}
@media (min-width: 640px) {
    .c-fab {
        width: auto;
        height: auto;
        padding: 13px 20px;
        box-shadow: 0 5px 0 0 var(--c-accent-dark), var(--sh-md);
    }
    .c-fab__text {
        display: inline;
    }
}

/* ==========================================================================
   16. MẢNG TRANG TRÍ
   Đốm sáng mờ đặt sau nội dung, dùng tiết chế để bề mặt bớt phẳng lì.
   ========================================================================== */
.c-blob {
    position: absolute;
    border-radius: var(--r-full);
    filter: blur(60px);
    /* Giữ rất nhạt: đủ để bề mặt bớt phẳng, không đủ để hút mắt khỏi nội dung */
    opacity: .16;
    pointer-events: none;
}
.dark .c-blob { opacity: .22; }

/* Lớp hạt nhiễu phủ toàn trang, phá cảm giác vector phẳng */
.c-grain::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   17. LỚP TƯƠNG THÍCH DARK MODE CHO UTILITY TAILWIND
   --------------------------------------------------------------------------
   Vì sao cần: trước đợt redesign, dark mode chưa bao giờ được làm xong —
   Tab Quản Trị có 202 dòng class mà KHÔNG dòng nào khai báo dark:, footer,
   modal đăng nhập và nút hỗ trợ nổi cũng vậy. Mọi thẻ đều bg-white cứng,
   nên bật chế độ tối là lòi ra mảng trắng chói giữa nền tối.

   Thay vì rắc dark: lên từng dòng (dễ sót, khó bảo trì), ta ánh xạ thẳng
   các utility nền sáng hay dùng sang token của hệ khi ở chế độ tối.
   Mọi chỗ chưa kịp đổi sang component class vẫn tự động đúng.

   Dùng !important vì Tailwind nạp qua CDN và chèn <style> lúc chạy, không
   đảm bảo thứ tự so với file này.

   Đây là lớp đệm, không phải đích đến — code mới nên dùng .c-* và .t-*.
   ========================================================================== */
.dark .bg-white,
.dark .bg-slate-50,
.dark .bg-slate-50\/50,
.dark .bg-slate-50\/70,
.dark .bg-slate-50\/80  { background-color: var(--c-surface) !important; }

.dark .bg-slate-100,
.dark .bg-slate-100\/80 { background-color: var(--c-surface-2) !important; }

.dark .text-slate-900,
.dark .text-slate-800   { color: var(--c-ink) !important; }
.dark .text-slate-700,
.dark .text-slate-600   { color: var(--c-ink-2) !important; }
.dark .text-slate-500,
.dark .text-slate-400   { color: var(--c-muted) !important; }
.dark .text-slate-300   { color: var(--c-faint) !important; }

.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-200\/80,
.dark .border-slate-200\/60 { border-color: var(--c-line) !important; }

/* Bạc hà — tín hiệu tiền về ví */
.dark .bg-emerald-50,
.dark .bg-emerald-100,
.dark .bg-emerald-100\/80  { background-color: var(--c-good-soft) !important; }
.dark .text-emerald-600,
.dark .text-emerald-700,
.dark .text-emerald-800    { color: var(--c-good-deep) !important; }
.dark .border-emerald-200,
.dark .border-emerald-400  { border-color: var(--c-good) !important; }

/* Vàng mật — cảnh báo & chờ duyệt */
.dark .bg-amber-50,
.dark .bg-amber-50\/70,
.dark .bg-amber-100        { background-color: var(--c-warn-soft) !important; }
.dark .text-amber-600,
.dark .text-amber-700,
.dark .text-amber-800,
.dark .text-amber-900,
.dark .text-amber-950      { color: var(--c-warn-deep) !important; }
.dark .border-amber-200,
.dark .border-amber-200\/80,
.dark .border-amber-300,
.dark .border-amber-400    { border-color: var(--c-warn) !important; }

/* Đỏ — lỗi & huỷ */
.dark .bg-rose-50,
.dark .bg-red-50,
.dark .bg-red-50\/90       { background-color: var(--c-bad-soft) !important; }
.dark .text-rose-500,
.dark .text-rose-600,
.dark .text-rose-700,
.dark .text-red-500,
.dark .text-red-600,
.dark .text-red-700        { color: var(--c-bad-deep) !important; }
.dark .border-rose-200,
.dark .border-red-200      { border-color: var(--c-bad) !important; }

/* Các màu Tailwind chưa được ánh xạ trong tailwind.config (xanh dương, chàm,
   tím...) chỉ còn xuất hiện ở icon mạng xã hội — cố ý giữ màu thật của Zalo,
   Facebook, Telegram nên không ép đổi. */

/* ==========================================================================
   18. TIỆN ÍCH
   ========================================================================== */
.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;
}

.c-divider { height: 1px; background: var(--c-line); border: none; }

/* Giới hạn bề ngang đoạn văn ~65 ký tự cho dễ đọc */
.c-prose { max-width: 62ch; }

/* Cắt dòng an toàn cho tên sản phẩm dài */
.c-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   19. THANH ĐIỀU HƯỚNG ĐÁY MÀN HÌNH (BOTTOM NAVIGATION BAR - MOBILE)
   ========================================================================== */
.c-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1.5px solid var(--c-line);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    padding-bottom: max(6px, env(safe-area-inset-bottom));
}
.dark .c-bottom-nav {
    background: rgba(23, 14, 19, 0.95);
    border-top-color: var(--c-line-strong);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
}
.c-bottom-nav__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    height: 58px;
    max-width: 500px;
    margin: 0 auto;
    padding: 0 4px;
}
.c-bottom-nav__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    padding: 4px 2px;
    border-radius: var(--r-md);
    color: var(--c-muted);
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color .15s var(--ease), transform .1s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.c-bottom-nav__btn:active {
    transform: scale(0.92);
}
.c-bottom-nav__btn.is-active {
    color: var(--c-accent);
}
.c-bottom-nav__btn.is-active i,
.c-bottom-nav__btn.is-active svg {
    stroke-width: 2.6;
    transform: translateY(-1px);
    filter: drop-shadow(0 2px 4px rgba(255, 77, 109, 0.25));
}
.pb-safe {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* ==========================================================================
   19. THANH HÀNH ĐỘNG DÍNH MUA NGAY TRÊN MOBILE (STICKY BUY BAR)
   ========================================================================== */
.c-sticky-buy-bar {
    position: fixed;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--c-line);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.dark .c-sticky-buy-bar {
    background: rgba(15, 23, 42, 0.94);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
}

.c-sticky-buy-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================================
   20. BOTTOM SHEET / MODAL TÀI KHOẢN DI ĐỘNG (.c-sheet-account)
   ========================================================================== */
.c-sheet-account {
    max-width: 480px;
    width: 100%;
}
@media (max-width: 639px) {
    .c-sheet-account {
        max-width: 100%;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        margin-bottom: 0 !important;
        max-height: 88vh;
        overflow-y: auto;
    }
    .c-stat__value {
        font-size: clamp(17px, 4.8vw, 21px);
        white-space: nowrap;
    }
    .c-stat--good .c-stat__value {
        font-size: clamp(20px, 5.5vw, 25px);
        white-space: nowrap;
    }
}

/* Bottom Sheet Modal Chi Tiết Đơn Hàng Shopee */
.c-modal--bottom {
    align-items: flex-end;
    padding: 0;
}
@media (min-width: 640px) {
    .c-modal--bottom {
        align-items: center;
        padding: 14px;
    }
}

.c-sheet-order {
    max-width: 480px;
    width: 100%;
}
@media (max-width: 639px) {
    .c-sheet-order {
        max-width: 100%;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        margin-bottom: 0 !important;
        max-height: 88vh;
        overflow-y: auto;
        padding: 16px 20px 24px;
    }
}