/* ============================================================
   DonLoc.vn — hệ thống thiết kế
   Sidebar sáng + thanh trên trắng + thẻ bo tròn, tông chủ đạo xanh mòng két.
   Có chế độ tối: đổi biến trong [data-theme="dark"].
   ============================================================ */
:root {
    /* Nền và bề mặt — nền xanh nhạt tươi thay cho xám trung tính */
    --bg: #f2f7fb;
    --surface: #ffffff;
    --surface-2: #f3f8f9;
    --sidebar: #ffffff;
    --line: #e5ecf2;
    --line-soft: #eef3f7;

    /* Chữ */
    --text: #0f172a;
    --text-2: #46556a;
    --text-muted: #8695aa;
    --text-faint: #9dabbe;
    /* Nhãn nhóm ở sidebar ngả ấm (xám nâu), không dùng xám lạnh như chữ thường */
    --text-section: #a8a29e;

    /* Màu Ý NGHĨA — tách khỏi màu thương hiệu. Dùng cho tiền và trạng thái, nơi màu mang thông
       tin chứ không phải trang trí: đỏ là tiền phải trả, xanh lá là tiền sẽ về, xanh dương là
       thứ bấm được. Đổi màu thương hiệu KHÔNG được kéo theo mấy màu này. */
    --danger: #dc2626;
    --success: #16a34a;
    --link: #1a6fd4;

    /* Màu thương hiệu — xanh mòng két tươi hơn, kèm gradient cho nút chính */
    --primary: #0d9488;
    --primary-dark: #0f766e;
    --primary-soft: #ccfbf1;
    --primary-ring: rgba(13, 148, 136, .22);
    --accent: #06b6d4;
    --primary-grad: linear-gradient(135deg, #14b8a6 0%, #0ea5e9 100%);
    --primary-grad-hover: linear-gradient(135deg, #0d9488 0%, #0284c7 100%);

    /* Màu ngữ nghĩa — tông bão hòa cao, nền nhạt tươi */
    --ok: #16a34a;
    --ok-bg: #eafcf1;
    --ok-strong: #15803d;
    --ok-strong-bg: #bbf7d0;
    --warn: #f59e0b;
    --warn-bg: #fff8e6;
    --warn-strong: #b45309;
    --warn-strong-bg: #fde68a;
    --info: #3b82f6;
    --info-bg: #e9f2ff;
    --info-strong: #1d4ed8;
    --info-strong-bg: #bfdbfe;
    --violet: #8b5cf6;
    --violet-bg: #f2edff;
    --violet-strong: #6d28d9;
    --violet-strong-bg: #ddd6fe;
    --bad: #ef4444;
    --bad-bg: #ffefef;
    --bad-strong: #b91c1c;
    --bad-strong-bg: #fecaca;
    --teal-soft-bg: #ecfdf9;
    --orange: #fb923c;
    --orange-bg: #fff3e8;
    /* Bản đậm của cam — chip trạng thái là chữ nhỏ in hoa nên phải đủ tương phản,
       cặp --orange/--orange-bg vốn dành cho icon lớn thì đọc không nổi. */
    --orange-strong: #c2410c;
    --orange-strong-bg: #fed7aa;
    --indigo: #6366f1;
    --indigo-bg: #edefff;

    /* Hình khối */
    --radius: 14px;
    --radius-md: 10px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
    --shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);

    --sidebar-w: 255px;
    --topbar-h: 66px;
}

[data-theme="dark"] {
    --bg: #0f1416;
    --surface: #171e21;
    --surface-2: #1c2427;
    --sidebar: #141b1e;
    --line: #263034;
    --line-soft: #202a2d;

    /* Sáng hơn bản nền trắng — màu đỏ/xanh đậm đặt trên nền tối thì tụt tương phản
       xuống dưới ngưỡng đọc được, mà đây lại là các con số tiền. */
    --danger: #f87171;
    --success: #4ade80;
    --link: #60a5fa;

    --text: #e8edef;
    --text-2: #b3bfc4;
    --text-muted: #8a969c;
    --text-faint: #77848a;
    --text-section: #8d8681;

    --primary: #2dd4bf;
    --primary-dark: #14b8a6;
    --primary-soft: #10312e;
    --primary-ring: rgba(45, 212, 191, .22);
    --primary-grad: linear-gradient(135deg, #14b8a6 0%, #0284c7 100%);
    --primary-grad-hover: linear-gradient(135deg, #0d9488 0%, #0369a1 100%);

    --ok: #6ee7b7;
    --ok-bg: #0d3b2e;
    --ok-strong: #86efac;
    --ok-strong-bg: #0f4436;
    --warn: #fcd34d;
    --warn-bg: #3d2f0c;
    --warn-strong: #fde68a;
    --warn-strong-bg: #46360e;
    --info: #93c5fd;
    --info-bg: #14274d;
    --info-strong: #bfdbfe;
    --info-strong-bg: #1a2f5c;
    --violet: #c4b5fd;
    --violet-bg: #2a1f4d;
    --violet-strong: #ddd6fe;
    --violet-strong-bg: #32255c;
    --bad: #fca5a5;
    --bad-bg: #451b1b;
    --bad-strong: #fecaca;
    --bad-strong-bg: #522020;
    --teal-soft-bg: #0d312e;
    --orange: #fdba74;
    --orange-bg: #43260f;
    --orange-strong: #fed7aa;
    --orange-strong-bg: #4a2a10;
    --indigo: #a5b4fc;
    --indigo-bg: #232449;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

/*
   Thuộc tính `hidden` PHẢI thắng mọi luật display của mình.

   Trình duyệt chỉ có `[hidden] { display: none }` trong bảng kiểu mặc định — mà bảng đó thua
   BẤT KỲ luật nào ta tự viết. Nên hễ một lớp đặt `display` (vd `.picked { display: flex }`) là
   thẻ mang `hidden` vẫn hiện nguyên. Lỗi này im lặng hoàn toàn: JS đặt `el.hidden = true` chạy
   đúng, biến trong máy đúng, chỉ có mắt người nhìn thấy là sai — nên nó bị đọc thành "nút không
   hoạt động" (đúng là chuyện đã xảy ra với nút bỏ khách ở trang tạo đơn).

   Trước đây chữa lẻ từng chỗ: `.modal-overlay[hidden]`, `.drawer-overlay[hidden]`. Chữa lẻ nghĩa
   là mỗi lớp mới có `display` lại dính lại từ đầu. Một luật dùng chung ở đây chặn cả họ.
*/
[hidden] { display: none !important; }

html, body { height: 100%; }

/* Font Inter tải qua Google Fonts, rơi về Helvetica Neue/Arial nếu mất mạng. Trước đây đoán là
   "Helvetica Neue" nhưng font đó không có sẵn trên Windows nên luôn hiện ra
   Arial thay thế — đây là lý do chữ từng trông không giống bản mẫu.
   Nền 14px, giãn dòng 1.5. Thang cỡ còn lại chỉ dùng 12 / 13 / 14 và 16–20 cho tiêu đề. */
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: none; }

/* Không cần font riêng cho số; chỉ cần chữ số đều bề ngang để cột tiền thẳng hàng. */
.mono {
    font-variant-numeric: tabular-nums;
}

.ico { width: 18px; height: 18px; flex: none; stroke-width: 1.75; }
.ico--sm { width: 15px; height: 15px; }
.ico--lg { width: 22px; height: 22px; }

/* ============================================================
   Bố cục: thanh đầu trang hai tầng (thương hiệu + menu ngang) rồi tới nội dung
   ============================================================ */
.masthead {
    position: sticky; top: 0; z-index: 30;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.masthead__top {
    display: flex; align-items: center; gap: 16px;
    padding: 10px 22px;
    border-bottom: 1px solid var(--line-soft);
    /* Đổ nền theo MÀU GIAO DIỆN đang chọn — dùng color-mix() trên chính --primary/--accent
       nên KHÔNG cần viết riêng cho từng mệnh: đổi mệnh (hoặc bảng Mặc định/Cơ bản) là thanh
       này tự đổi theo, và vẫn đúng ở cả chế độ tối vì --surface đổi theo data-theme. Mức pha
       nhẹ (14–9%) để chữ/icon bên trong (đang dùng var(--text-2) v.v.) vẫn đọc rõ, không phải
       đổi lại màu chữ của cả khối. */
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--primary) 14%, var(--surface)) 0%,
        color-mix(in srgb, var(--accent) 9%, var(--surface)) 100%);
}
.masthead__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Vệt đường dẫn cạnh logo, giống thanh trên của các phần mềm bán hàng */
.crumb {
    display: flex; align-items: center; gap: 8px;
    padding-left: 16px;
    border-left: 1px solid var(--line);
    color: var(--text-2);
    font-size: 14px; font-weight: 600;
}
.crumb .ico { color: var(--text-faint); }
.crumb__home { display: flex; align-items: center; color: inherit; }
.crumb__home:hover .ico { color: var(--text-2); }
.crumb__sep { color: var(--text-faint); font-weight: 400; }
.crumb__current { color: var(--text); }

/* ---------- Menu ngang ---------- */
/* overflow-x: auto tung o day de cuon ngang tren man hinh hep, nhung CSS
   khong cho phep chi cuon MOT truc — trinh duyet tu suy ra overflow-y: auto
   theo dac ta, va no cat mat moi menu dropdown (position: absolute) dinh vi
   ben duoi thanh nay. Doi sang flex-wrap: cac muc tu xuong dong khi chat cho,
   dropdown thoat ra ngoai binh thuong. */
.topnav {
    display: flex; align-items: stretch; gap: 2px;
    padding: 0 14px;
    flex-wrap: wrap;
}
.topnav__link {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px;
    color: var(--text-2);
    font-size: 14px; font-weight: 500;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.topnav__link .ico { color: var(--text-faint); }
.topnav__link:hover { color: var(--text); background: var(--surface-2); }
.topnav__link:hover .ico { color: var(--text-2); }

.topnav__link.is-active,
.topnav__group.is-active > .topnav__link {
    color: var(--primary-dark);
    background: var(--primary-soft);
    border-bottom-color: var(--primary);
    font-weight: 600;
}
.topnav__link.is-active .ico,
.topnav__group.is-active > .topnav__link .ico { color: var(--primary); }
[data-theme="dark"] .topnav__link.is-active,
[data-theme="dark"] .topnav__group.is-active > .topnav__link { color: var(--primary); }

.topnav__caret { width: 13px; height: 13px; opacity: .7; }

/* Menu con: mở khi rê chuột hoặc khi có tiêu điểm bàn phím */
.topnav__group { position: relative; display: flex; }
.topnav__panel {
    position: absolute; top: 100%; left: 6px;

    /* width: max-content — BẮT BUỘC, không phải cho đẹp.
       Bảng này position:absolute nên bề rộng "co vừa nội dung" của nó tính theo bề rộng thẻ
       cha (chính là nút "Cài đặt", ~119px), chứ KHÔNG theo mục dài nhất bên trong. Kết quả:
       bảng dừng ở khoảng 222px trong khi mục "Đơn hàng và vận chuyển" cần hơn thế — máy nào
       phông chữ rộng hơn một chút là chữ bị cắt cụt. Tệ hơn: dưới kia có overflow-y: auto, mà
       đặc tả CSS không cho cuộn một trục — trình duyệt tự suy ra overflow-x: auto, nên phần
       thừa bị CẮT và góc bo bên phải mất hẳn (xem donloc-menu-bi-cat-overflow).
       max-content thì bảng luôn rộng đúng bằng mục dài nhất, không phụ thuộc phông chữ. */
    width: max-content;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: none;
    z-index: 40;

    /* Lưới an toàn: không bao giờ rộng/cao hơn màn hình, dài quá thì tự cuộn trong bảng.
       Menu Cài đặt có tới 14 mục nên nếu không chặn nó sẽ chạy quá đáy màn hình. */
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}

/* Bảng xổ bám mép PHẢI của nhóm. Menu nằm sát rìa phải (Cài đặt) mà vẫn bám mép trái thì
   bảng tràn ra ngoài màn hình — site.js đo và gắn lớp này khi cần, thay vì đoán mục nào
   là mục cuối (số mục thay đổi theo quyền của người đăng nhập). */
.topnav__panel--phai { left: auto; right: 6px; }

/* Mở bảng: rê chuột, có tiêu điểm bàn phím, HOẶC bấm (JS thêm .is-open).
   Bấm là đường chính — xem site.js: bấm vào tên menu có mũi tên xổ thì KHÔNG mở trang,
   chỉ mở bảng. Trước đây thẻ <a> vẫn điều hướng nên bấm một cái là rời khỏi trang. */
.topnav__group:hover .topnav__panel,
.topnav__group:focus-within .topnav__panel,
.topnav__group.is-open .topnav__panel { display: block; }
.topnav__panel a {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 11px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 14px;
    white-space: nowrap;
}
.topnav__panel a .ico { color: var(--text-faint); }
.topnav__panel a:hover { background: var(--surface-2); color: var(--text); }
.topnav__panel a:hover .ico { color: var(--primary); }
.topnav__disabled {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 11px;
    color: var(--text-faint);
    font-size: 14px;
    white-space: nowrap;
    cursor: not-allowed;
}

/* Mục menu bị KHÓA THEO GÓI DỊCH VỤ: cùng độ nhạt với mục chưa làm, thêm độ mờ nhẹ để
   icon cũng dịu theo chữ. Tooltip (title) nói rõ cần gói nào — lớp chặn thật nằm ở
   PlanFeatureFilter phía máy chủ, không phải ở đây. */
.topnav__goikhoa { opacity: .55; }
span.topnav__link.topnav__goikhoa,
span.topnav__link { cursor: not-allowed; }

/* ---------- Sửa nhanh trên dòng bảng (đổi tên, kiểm kho) ---------- */
.row-edit { display: flex; align-items: center; gap: 6px; }
.row-edit .field__input--slim { min-width: 0; }

/* ---------- Trang thuộc tính: khối thuộc tính + chip giá trị ---------- */
.attr-list { display: flex; flex-direction: column; gap: 14px; }
.attr {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
.attr__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.attr__delete { margin-left: auto; }
.attr__values { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.attr__add { display: flex; align-items: center; gap: 6px; }
.attr__add .field__input--slim { width: 150px; }

.chip-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 6px 4px 12px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size: 13px; font-weight: 600;
}
[data-theme="dark"] .chip-tag { color: var(--primary); }
.chip-tag form { display: inline-flex; }
.chip-tag__x {
    border: none; background: none; cursor: pointer;
    color: inherit; opacity: .6;
    font-size: 15px; line-height: 1; padding: 2px 5px;
    border-radius: 999px;
}
.chip-tag__x:hover { opacity: 1; background: rgba(0, 0, 0, .08); }

/* ---------- Menu người dùng ---------- */
.menu { position: relative; }
.menu__btn {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 6px 4px 4px;
    background: none; border: 1px solid transparent; border-radius: 999px;
    cursor: pointer; font: inherit; color: inherit;
}
.menu__btn:hover { background: var(--surface-2); border-color: var(--line); }
.menu__who { text-align: left; line-height: 1.2; }
.menu__name { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.menu__role { display: block; font-size: 12px; color: var(--text-muted); }

.menu__panel {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 210px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: none;
    z-index: 40;
}
.menu.is-open .menu__panel { display: block; }
.menu__head {
    padding: 8px 11px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px; color: var(--text-muted);
}
.menu__item {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    padding: 9px 11px;
    background: none; border: none; border-radius: var(--radius-sm);
    font: inherit; font-size: 14px; text-align: left;
    color: var(--text-2); cursor: pointer;
}
.menu__item:hover { background: var(--surface-2); color: var(--text); }
.menu__item--danger { color: var(--bad); }
.menu__item--danger:hover { background: var(--bad-bg); }
.menu__item--current { background: var(--surface-2); color: var(--text); font-weight: 600; cursor: default; }

/* Mục menu xổ ra danh sách con ngay bên dưới (vd "Đổi trạng thái sản phẩm") */
.js-toggle-sub.is-open .ico:last-child { transform: rotate(180deg); }
.menu__sub { background: var(--surface-2); border-radius: var(--radius-sm); margin: 2px 4px 4px; padding: 2px; }
.menu__sub .menu__item { padding-left: 30px; font-size: 13px; }

/* ---------- Bố cục cũ (sidebar) giữ lại cho màn hình đăng nhập ---------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--sidebar);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

/* ---------- Thương hiệu ---------- */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
}

.brand__mark {
    width: 42px; height: 42px;
    flex: none;
    border-radius: 13px;
    /* Đi qua biến thương hiệu để giao diện ngũ hành nhuộm được cả ô logo */
    background: var(--primary-grad);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 4px 14px var(--primary-ring);
}
.brand__mark .ico { width: 21px; height: 21px; stroke-width: 2.1; }

.brand__text { min-width: 0; }
.brand__name {
    display: block;
    font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.2;
}
.brand__tld { color: var(--primary); }
.brand__sub {
    display: block;
    font-size: 12px; color: var(--text-muted); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 175px; margin-top: 1px;
}

/* ---------- Điều hướng ---------- */
.nav {
    flex: 1;
    overflow-y: auto;
    padding: 6px 12px 12px;
    display: flex; flex-direction: column;
}

.nav__section {
    font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-section);
    padding: 0 10px;
    margin: 16px 0 6px;
}
.nav__section:first-child { margin-top: 6px; }

.nav__link {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 11px;
    border-radius: var(--radius-md);
    color: var(--text-2);
    font-size: 14px; font-weight: 500;
    transition: background .14s ease, color .14s ease;
}
.nav__link .ico { color: var(--text-muted); transition: color .14s ease; }
.nav__link:hover { background: var(--surface-2); color: var(--text); }
.nav__link:hover .ico { color: var(--text-2); }

.nav__link.is-active {
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-weight: 600;
}
.nav__link.is-active .ico { color: var(--primary); }
[data-theme="dark"] .nav__link.is-active { color: var(--primary); }

.nav__badge {
    margin-left: auto;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bad-bg); color: var(--bad);
    font-size: 12px; font-weight: 700;
    display: grid; place-items: center;
}
.nav__badge--info { background: var(--primary-soft); color: var(--primary-dark); }

/* ---------- Người dùng dưới sidebar ---------- */
.sidebar__foot { padding: 10px 12px 14px; }

.user-card {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 11px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.user-card__body { min-width: 0; flex: 1; }
.user-card__name {
    font-size: 14px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-card__role { font-size: 12px; color: var(--text-muted); }
.user-card__out {
    background: none; border: none; padding: 5px; cursor: pointer;
    color: var(--text-muted); border-radius: 8px; display: grid; place-items: center;
}
.user-card__out:hover { background: var(--line); color: var(--text); }

.avatar {
    width: 34px; height: 34px; flex: none;
    border-radius: 50%;
    background: var(--primary-grad); /* theo biến để đổi theo mệnh ngũ hành */
    color: #fff;
    font-weight: 600; font-size: 14px;
    display: grid; place-items: center;
    text-transform: uppercase;
}
.avatar--sm { width: 26px; height: 26px; font-size: 12px; }
.avatar--lg { width: 38px; height: 38px; font-size: 14px; }

/* ---------- Cột phải ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: var(--topbar-h);
    flex: none;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 14px;
    padding: 0 22px;
    position: sticky; top: 0; z-index: 20;
}
.topbar__title { font-size: 18px; font-weight: 700; margin: 0; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.icon-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-2);
    display: grid; place-items: center;
    cursor: pointer; position: relative;
    transition: background .14s ease, border-color .14s ease;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn__dot {
    position: absolute; top: 7px; right: 8px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #ef4444; border: 2px solid var(--surface);
}

.workspace { padding: 22px 26px 56px; max-width: 1560px; margin: 0 auto; }

/* Thương hiệu nằm trên thanh đầu trang thì không cần đệm như khi ở sidebar */
.masthead .brand { padding: 0; }

/* ============================================================
   Biểu đồ cột doanh thu — vẽ bằng CSS, không dùng thư viện ngoài
   ============================================================ */
.chart { display: flex; gap: 12px; padding: 4px 2px 0; }
.chart__axis {
    display: flex; flex-direction: column; justify-content: space-between;
    flex: none; height: 210px;
    font-size: 12px; color: var(--text-faint);
    text-align: right;
}
.chart__plot {
    flex: 1; min-width: 0;
    display: flex; align-items: flex-end; gap: 6px;
    height: 210px;
    border-bottom: 1px solid var(--line);
    background-image: repeating-linear-gradient(to top, transparent 0 52px, var(--line-soft) 52px 53px);
}
.chart__col {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    height: 100%;
}
.chart__bar {
    width: 100%; max-width: 34px;
    min-height: 3px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
    transition: filter .14s ease;
}
.chart__col:hover .chart__bar { filter: brightness(1.08); }
.chart__bar--empty { background: var(--line); }

/* Cột chồng theo kênh bán: mỗi khúc một màu kênh */
.chart__stack {
    width: 100%; max-width: 34px;
    height: 100%;
    display: flex; flex-direction: column-reverse; align-items: stretch; justify-content: flex-start;
    border-radius: 6px 6px 0 0; overflow: hidden;
    transition: filter .14s ease;
}
.chart__col:hover .chart__stack { filter: brightness(1.08); }
.chart__stack--empty::before { content: ''; height: 3px; background: var(--line); }
.chart__seg { width: 100%; min-height: 2px; }
.chart__legend { flex-wrap: wrap; gap: 14px; }
.chart__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart__labels {
    display: flex; gap: 6px;
    margin-top: 8px;
    font-size: 12px; color: var(--text-muted);
}
.chart__labels span { flex: 1; min-width: 0; text-align: center; }
.chart__legend {
    display: flex; align-items: center; gap: 8px;
    justify-content: center;
    margin-top: 12px;
    font-size: 13px; color: var(--text-2);
}

/* ============================================================
   Mức tăng giảm trong bảng số liệu
   ============================================================ */
.delta {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 13px; font-weight: 600;
}
.delta--up { color: var(--ok); }
.delta--down { color: var(--bad); }
.delta--flat { color: var(--text-faint); font-weight: 500; }
.delta .ico { width: 13px; height: 13px; }

/* ============================================================
   Dải chỉ số có biểu tượng (khối Tồn kho)
   ============================================================ */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 18px; }
.metric { display: flex; align-items: center; gap: 13px; }
.metric__icon {
    width: 42px; height: 42px; flex: none;
    border-radius: 12px;
    display: grid; place-items: center;
}
.metric__label { font-size: 13px; color: var(--text-muted); }
.metric__value { font-size: 18px; font-weight: 700; }

/* Bảng Kênh bán: nhóm cột có vách ngăn, dòng tổng nổi, dòng kênh thụt vào */
.channel-table th, .channel-table td { padding-left: 10px; padding-right: 10px; white-space: nowrap; }
.channel-table .th-group { text-align: center; border-left: 1px solid var(--line); }
.channel-table td:nth-child(2), .channel-table td:nth-child(5),
.channel-table td:nth-child(8), .channel-table td:nth-child(10),
.channel-table td:nth-child(11) { border-left: 1px solid var(--line-soft); }
.channel-table__total td { background: var(--surface-2); font-weight: 600; }
.channel-table__child { padding-left: 26px !important; display: flex; align-items: center; gap: 8px; }

/* Số thứ tự trong bảng xếp hạng */
.rank {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px;
    border-radius: 7px;
    background: var(--surface-2);
    font-size: 12px; font-weight: 700; color: var(--text-2);
}
.rank--1 { background: var(--warn-strong-bg); color: var(--warn-strong); }
.rank--2 { background: var(--info-strong-bg); color: var(--info-strong); }
.rank--3 { background: var(--ok-strong-bg); color: var(--ok-strong); }

/* ============================================================
   Tiêu đề trang, thẻ
   ============================================================ */
.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 18px;
}
.page-title { font-size: 18px; font-weight: 700; margin: 0; }
.page-title small { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: 8px; letter-spacing: 0; }
.page-sub { margin: 3px 0 0; color: var(--text-muted); font-size: 13px; }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
    overflow: hidden;
}
.card__head {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line-soft);
}
/* Biểu tượng đầu thẻ: mỗi thẻ một màu theo chủ đề, không dùng chung một màu */
.card__icon {
    width: 32px; height: 32px; flex: none;
    border-radius: 9px;
    background: var(--primary-soft); color: var(--primary);
    display: grid; place-items: center;
}
.card__icon--blue   { background: var(--info-bg);    color: var(--info); }
.card__icon--indigo { background: var(--indigo-bg);  color: var(--indigo); }
.card__icon--amber  { background: var(--orange-bg);  color: var(--orange); }
.card__icon--red    { background: var(--bad-bg);     color: var(--bad); }
.card__icon--green  { background: var(--ok-bg);      color: var(--ok); }
.card__icon--violet { background: var(--violet-bg);  color: var(--violet); }
.card__icon--teal   { background: var(--teal-soft-bg); color: var(--primary); }

.card__title { font-size: 16px; font-weight: 700; margin: 0; color: var(--text); }
.card__sub { font-size: 12px; color: var(--text-muted); margin: 1px 0 0; font-weight: 400; }
.card__tail { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }

/* Con số nhỏ bên phải đầu thẻ, kiểu "8 việc" */
.pill {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    background: var(--surface-2); color: var(--text-2);
}
.pill--red    { background: var(--bad-bg);    color: var(--bad); }
.pill--amber  { background: var(--warn-bg);   color: var(--warn); }
.pill--green  { background: var(--ok-bg);     color: var(--ok); }
.pill--teal   { background: var(--primary-soft); color: var(--primary-dark); }
.card__body { padding: 18px; }
/* Lưới biểu mẫu đặt thẳng trong thẻ vẫn có đệm như .card__body */
.card > .grid-2, .card > .grid-3 { padding: 18px; }

.split { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
.split > * { min-width: 0; }

/* ============================================================
   Thẻ số liệu nền chuyển sắc
   ============================================================ */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}

.stat {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    padding: 17px 18px 15px;
    color: #fff;
    min-height: 132px;
    display: flex; flex-direction: column;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .1);
}
.stat__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.stat__label { font-size: 13px; font-weight: 600; opacity: .95; }
.stat__badge {
    width: 30px; height: 30px; flex: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, .22);
    display: grid; place-items: center;
}
.stat__value {
    font-size: 24px; font-weight: 700; line-height: 1.2;
    margin: 6px 0 auto;
}
.stat__value small { font-size: 14px; font-weight: 500; margin-left: 4px; letter-spacing: 0; }
.stat__chip {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    font-size: 12px; font-weight: 600;
    margin-top: 10px;
}
.stat__ghost {
    position: absolute; right: -14px; bottom: -22px;
    width: 108px; height: 108px;
    opacity: .16; color: #fff;
    pointer-events: none;
}

/* Ô "thương hiệu" trong dàn số liệu — theo biến để đổi theo mệnh ngũ hành.
   Các ô còn lại giữ màu riêng: mỗi ô một màu là để PHÂN BIỆT chỉ số, không phải trang trí. */
.stat--teal   { background: var(--primary-grad); }
.stat--blue   { background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 60%, #6366f1 100%); }
.stat--green  { background: linear-gradient(135deg, #10b981 0%, #0ea373 60%, #059669 100%); }
.stat--rose   { background: linear-gradient(135deg, #fb7185 0%, #f43f5e 60%, #e11d48 100%); }
.stat--cyan   { background: linear-gradient(135deg, #22d3ee 0%, #0ea5e9 100%); }
.stat--violet { background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 100%); }
.stat--amber  { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 55%, #f97316 100%); }
.stat--slate  { background: linear-gradient(135deg, #64748b 0%, #475569 55%, #334155 100%); }

/* Ô số liệu nền nhạt (dùng cho hàng tổng quan phụ) */
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.tile {
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    background: var(--surface-2);
    border: 1px solid var(--line);
}
.tile__value { font-size: 18px; font-weight: 700; }
.tile__label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.tile--ok    { background: var(--ok-bg);    border-color: transparent; }
.tile--ok    .tile__value { color: var(--ok); }
.tile--warn  { background: var(--warn-bg);  border-color: transparent; }
.tile--warn  .tile__value { color: var(--warn); }
.tile--bad   { background: var(--bad-bg);   border-color: transparent; }
.tile--bad   .tile__value { color: var(--bad); }
.tile--info  { background: var(--info-bg);  border-color: transparent; }
.tile--info  .tile__value { color: var(--info); }
.tile--violet{ background: var(--violet-bg);border-color: transparent; }
.tile--violet .tile__value { color: var(--violet); }
.tile--teal  { background: var(--teal-soft-bg); border-color: transparent; }
.tile--teal  .tile__value { color: var(--primary); }

/* ============================================================
   Khối chào mừng + vòng tiến độ
   ============================================================ */
.hero {
    display: flex; align-items: center; gap: 24px;
    padding: 22px 24px;
    background: linear-gradient(115deg, var(--surface) 55%, var(--primary-soft) 100%);
}
.hero__main { flex: 1; min-width: 0; }
.hero__date { font-size: 13px; color: var(--text-muted); margin: 0 0 4px; text-transform: capitalize; }
.hero__title { font-size: 24px; font-weight: 700; margin: 0 0 6px; }
.hero__sub { font-size: 14px; color: var(--text-2); margin: 0 0 16px; }
.hero__hot { color: var(--bad); }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.hero__ring {
    flex: none;
    display: flex; align-items: center; gap: 18px;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.ring { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; }
.ring__text { text-align: center; line-height: 1.15; }
.ring__value { display: block; font-size: 18px; font-weight: 700; }
.ring__label { display: block; font-size: 12px; color: var(--text-muted); }

.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: var(--text-2); }
.legend li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.dot--ok { background: #10b981; }
.dot--info { background: #3b82f6; }
.dot--bad { background: #ef4444; }

/* Danh sách nổi bật (sắp hết hàng, việc cần chú ý) */
.feed { list-style: none; margin: 0; padding: 0; }
.feed__item {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.feed__item:last-child { border-bottom: none; }
.feed__item--hot { background: var(--bad-bg); box-shadow: inset 3px 0 0 var(--bad); }
.feed__body { flex: 1; min-width: 0; }
.feed__title { font-size: 14px; font-weight: 600; }
.feed__meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; }

/* ============================================================
   Bảng
   ============================================================ */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* Tiêu đề cột chữ thường (không viết hoa), đậm vừa — đúng kiểu bảng chuẩn DonLoc.vn,
   trước đây viết hoa toàn bộ + giãn chữ là suy đoán sai, ảnh mẫu thật không vậy. */
.table th {
    text-align: left;
    padding: 12px 18px;
    font-size: 13px; font-weight: 600;
    color: var(--text-2);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.table td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-2); }
.table tfoot td {
    padding: 14px 18px; border-top: 1px solid var(--line);
    font-weight: 700; background: var(--surface-2);
}
.table--form td { padding: 9px 18px; }

.cell-main { display: flex; align-items: center; gap: 10px; }
.cell-strong { font-weight: 600; color: var(--text); }
.right { text-align: right; }
.muted { color: var(--text-muted); font-size: 13px; }
.total { font-size: 16px; }

.empty { padding: 46px 18px; text-align: center; color: var(--text-muted); }
.empty__icon {
    width: 54px; height: 54px; margin: 0 auto 12px;
    border-radius: 14px;
    background: var(--surface-2);
    display: grid; place-items: center; color: var(--text-faint);
}
.empty p { margin: 0 0 14px; }

.info { display: grid; grid-template-columns: 110px 1fr; gap: 9px 12px; margin: 0; padding: 18px; font-size: 14px; }
.info dt { color: var(--text-muted); }
.info dd { margin: 0; }
.note { margin: 0; padding: 18px; }

/* ============================================================
   Nhãn trạng thái
   ============================================================ */
.status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 7px;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em;
    white-space: nowrap;
}
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--pending   { background: var(--warn-strong-bg);   color: var(--warn-strong); }
.status--confirmed { background: var(--info-strong-bg);   color: var(--info-strong); }
.status--shipping  { background: var(--violet-strong-bg); color: var(--violet-strong); }
.status--completed { background: var(--ok-strong-bg);     color: var(--ok-strong); }
.status--cancelled { background: var(--bad-strong-bg);    color: var(--bad-strong); }
/* Hàng trả lại: cam riêng, KHÔNG dùng chung đỏ với "Đã hủy" — đơn hủy là đơn chưa từng đi,
   đơn hoàn là đơn đã đi và đã tốn cước. Người đứng kho phải tách được hai loại chỉ bằng màu. */
.status--returned  { background: var(--orange-strong-bg); color: var(--orange-strong); }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px;
    border-radius: 7px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-size: 12px; font-weight: 500; color: var(--text-2);
}

/* Thanh tiến độ */
.progress { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress__bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary-dark), var(--primary)); }
.progress-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }

/* ============================================================
   Biểu mẫu
   ============================================================ */
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.toolbar .field__input { max-width: 320px; }
.toolbar--in-card { margin: 0 0 0 auto; }

.search {
    position: relative; display: flex; align-items: center;
}
.search .ico {
    position: absolute; left: 11px;
    color: var(--text-faint); pointer-events: none;
}
.search .field__input { padding-left: 36px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: 13px; font-weight: 600; color: var(--text-2); }

.field__input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit; font-size: 14px;
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field__input::placeholder { color: var(--text-faint); }
.field__input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
select.field__input { cursor: pointer; }

/* Ô mật khẩu có nút mắt hiện/ẩn */
.field__password { position: relative; }
.field__password .field__input { padding-right: 40px; }
.field__password-toggle {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 7px;
    color: var(--text-faint); display: flex; align-items: center;
}
.field__password-toggle:hover { color: var(--text-2); }

/* Dòng đọc lại số tiền vừa gõ (kiểm tra tránh nhập nhầm) */
.field__hint { font-size: 12.5px; color: var(--text-faint); min-height: 16px; }
.field__hint:not(:empty) { color: var(--primary); }

/* Chips chọn một (kênh bán) */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips__item { cursor: pointer; }
.chips__item input { position: absolute; opacity: 0; width: 0; height: 0; }
.chips__item span {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
    color: var(--text-2);
    background: var(--surface);
    transition: all .14s ease;
}
.chips__item:hover span { border-color: var(--primary); color: var(--primary-dark); }
.chips__item input:checked + span {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary-dark);
    font-weight: 600;
}
.chips__item input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Công tắc bật/tắt (khối Giao hàng) */
.switch { position: relative; display: inline-block; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
    display: block; width: 44px; height: 24px;
    border-radius: 999px; background: var(--line);
    transition: background .18s ease;
    position: relative;
}
.switch__track::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .3);
    transition: transform .18s ease;
}
.switch input:checked + .switch__track { background: var(--primary); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Bản nhỏ — dùng cho các ô con nằm trong lưới, để chúng không to ngang mục cha. */
.switch--sm .switch__track { width: 34px; height: 19px; }
.switch--sm .switch__track::after { top: 2.5px; left: 2.5px; width: 14px; height: 14px; }
.switch--sm input:checked + .switch__track::after { transform: translateX(15px); }

/* Ô chọn gọn nằm trong đầu thẻ (bộ lọc kỳ của trang tổng quan) */
.field__input--slim { width: auto; padding: 6px 10px; font-size: 13px; }
.card__tail form { display: flex; align-items: center; gap: 8px; }

/* ============================================================
   Trang tạo đơn: combo tìm kiếm, stepper số lượng, thanh dính đáy
   ============================================================ */
.ordergrid { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.ordergrid > * { min-width: 0; }

.combo { position: relative; }
.combo__list {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    max-height: 320px; overflow-y: auto;
    padding: 5px;
}
.combo__item { padding: 9px 11px; border-radius: var(--radius-sm); cursor: pointer; }
.combo__item:hover, .combo__item.is-active { background: var(--primary-soft); }
.combo__main { font-size: 14px; font-weight: 600; }
.combo__meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.combo__item--new .combo__main { color: var(--primary); }

/* Tiêu đề nhóm trong danh sách gợi ý (vd "Đơn vị shop đang dùng" / "Danh mục chuẩn").
   Không bấm được — chỉ để mắt tách hai nhóm ra, đỡ tưởng danh sách trộn lẫn. */
.combo__nhom {
    padding: 8px 11px 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-faint);
}
.combo__nhom:first-child { padding-top: 4px; }
.combo__trong { padding: 12px; font-size: 13px; color: var(--text-muted); }

/* ============ HẠCH TOÁN THUẾ GTGT (trang Combo) ============
   Cột thuế trong bảng sản phẩm con — ẩn khi combo không có VAT.
   Dùng display:none qua lớp riêng thay vì thuộc tính hidden: ô <td>/<th> có display:table-cell
   trong bảng nên hidden bị đè (xem luật chung ở đầu tệp). */
.vat-an { display: none !important; }

.ht {
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2, var(--surface));
    overflow: hidden;
}
.ht__dau {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--primary-soft);
}
.ht__tieude { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; }
.ht__tieude .ico { color: var(--primary); }
.ht__gd { font-size: 12px; color: var(--text-muted); }

.ht__bang { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ht__bang th, .ht__bang td { padding: 8px 14px; }
.ht__bang thead th {
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted); border-bottom: 1px solid var(--line-soft);
}
.ht__bang tbody th { text-align: left; font-weight: 600; white-space: nowrap; }
.ht__bang tbody tr + tr th, .ht__bang tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.ht__bang td { font-variant-numeric: tabular-nums; }
.ht__phu { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-faint); }

/* Hai ô kết luận — thứ người dùng vào đây để đọc, nên tách hẳn khỏi bảng. */
.ht__ket {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--line-soft);
    border-top: 1px solid var(--line-soft);
}
@media (max-width: 620px) { .ht__ket { grid-template-columns: 1fr; } }
.ht__o { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--surface); }
.ht__nhan { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.ht__o strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.ht__o--lai strong { color: var(--success, #16A34A); }
.ht__o--am strong { color: var(--danger, #DC2626); }
.ht__o--thue strong { color: var(--text-1, inherit); }
.ht__ghi { font-size: 11.5px; color: var(--text-faint); }

.ht__doichieu {
    margin: 0; padding: 11px 14px;
    font-size: 12.5px; line-height: 1.6; color: var(--text-2);
    border-top: 1px solid var(--line-soft);
}
.ht__luuy {
    margin: 0; padding: 0 14px 12px;
    font-size: 11.5px; line-height: 1.7; color: var(--text-faint);
}

/* ---- Ô chọn ĐƠN VỊ TÍNH (trang sản phẩm) ---- */
.dvt { display: block; }
/* Chừa chỗ cho mũi tên bên phải để chữ dài không chạy đè lên nó. */
.dvt__o { padding-right: 38px; }
.dvt__mui {
    position: absolute; top: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    width: 36px; padding: 0;
    border: 0; background: none; cursor: pointer;
    color: var(--text-faint);
}
.dvt__mui:hover { color: var(--text-2); }
/* Danh sách đơn vị ngắn (một dòng chữ) nên để thấp hơn danh sách sản phẩm — cao 320px cho
   mấy chữ "Cái/Hộp" là một cột trống mênh mông giữa trang. */
.dvt__ds { max-height: 264px; }

/* Khách đã chọn hiện thành thẻ nhỏ */
.picked {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px;
    background: var(--primary-soft);
    border-radius: var(--radius-md);
    margin-bottom: 4px;
}
.picked__body { flex: 1; min-width: 0; }
.picked__name { font-size: 14px; font-weight: 600; }

/* Ô tạo nhanh khách */
.quick {
    margin-top: 12px; padding: 12px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    display: flex; flex-direction: column; gap: 10px;
}
.quick__title { font-size: 13px; font-weight: 700; color: var(--text-2); }

/* Stepper số lượng: bấm +/− hoặc gõ thẳng */
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.qty__btn {
    width: 28px; border: none; background: var(--surface-2);
    font-size: 16px; color: var(--text-2); cursor: pointer;
}
.qty__btn:hover { background: var(--line); }
.qty__input {
    width: 52px; border: none; text-align: center;
    font-size: 14px; background: var(--surface); color: var(--text);
    -moz-appearance: textfield;
}
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__input:focus { outline: none; }

/* Thanh hành động dính đáy màn hình */
.sticky-bar {
    position: sticky; bottom: 0; z-index: 30;
    display: flex; align-items: center; gap: 12px;
    margin-top: 4px;
    padding: 12px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 -6px 24px rgba(16, 24, 40, .08);
}
.sticky-bar__sum { flex: 1; display: flex; align-items: baseline; gap: 10px; }
.sticky-bar__total { font-size: 20px; }

@media (max-width: 1080px) {
    .ordergrid { grid-template-columns: 1fr; }
}

.field-error { color: var(--bad); font-size: 13px; }
.field-error--summary:not(:empty) {
    background: var(--bad-bg);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 11px 14px; margin-bottom: 16px;
    color: var(--bad);
}
.field-error--summary ul { margin: 0; padding-left: 18px; }

.check { display: flex; align-items: center; gap: 9px; font-size: 14px; margin: 2px 0 18px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--primary); }

.form-actions { display: flex; gap: 10px; align-items: center; }

/* ============================================================
   Nút
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
/* Nút chính dùng gradient teal → xanh dương cho tươi trẻ */
.btn--primary { background: var(--primary-grad); color: #fff; box-shadow: 0 2px 8px rgba(13, 148, 136, .25); }
.btn--primary:hover { background: var(--primary-grad-hover); }
[data-theme="dark"] .btn--primary { color: #fff; }

.btn--pill { border-radius: 999px; padding: 9px 18px; }

.btn--outline { background: var(--surface); border-color: var(--line); color: var(--text-2); }
.btn--outline:hover { background: var(--surface-2); color: var(--text); }

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

.btn--danger { background: var(--bad-bg); color: var(--bad); }
.btn--danger:hover { background: var(--bad); color: #fff; }

/* Hai màu gradient tươi thêm cho thanh công cụ bảng dữ liệu (trang Sản phẩm...) —
   cố ý khác nút chính (teal) để mỗi nhóm hành động có màu riêng, dễ phân biệt. */
.btn--amber { background: linear-gradient(135deg, #fb923c 0%, #f59e0b 100%); color: #fff; box-shadow: 0 2px 8px rgba(245, 158, 11, .28); }
.btn--amber:hover { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }

.btn--violet { background: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 100%); color: #fff; box-shadow: 0 2px 8px rgba(139, 92, 246, .28); }
.btn--violet:hover { background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); }

/* Xanh lá phẳng — nút "Thêm mới" trang Sản phẩm, đúng màu ảnh mẫu đã chọn
   (khác .btn--primary teal-gradient dùng cho CTA chính khác trong site) */
.btn--green { background: #22c55e; color: #fff; }
.btn--green:hover { background: #16a34a; }

/* ============================================================
   Giao diện "Cơ bản" — bảng màu gốc, phẳng, ít gradient hơn: Thêm mới
   xanh lá, Lọc xanh ngọc, Thao tác viền xám. Mặc định site dùng bảng
   "Tươi sáng" riêng (gradient nhiều màu hơn) — đây là lựa chọn thay
   thế, đổi qua bộ chọn giao diện ngũ hành cạnh nút sáng/tối.
   Chỉ đổi MÀU nút theo class đã có sẵn, không đổi HTML/layout nào.
   ============================================================ */
[data-palette="basic"] .btn--primary { background: #22c55e; box-shadow: none; }
[data-palette="basic"] .btn--primary:hover { background: #16a34a; }

[data-palette="basic"] .btn--amber { background: var(--primary); box-shadow: none; }
[data-palette="basic"] .btn--amber:hover { background: var(--primary-dark); }

[data-palette="basic"] .btn--violet {
    background: var(--surface); color: var(--text-2); border-color: var(--line);
    box-shadow: none;
}
[data-palette="basic"] .btn--violet:hover { background: var(--surface-2); color: var(--text); }

.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; pointer-events: none; }
.btn--disabled-link { opacity: .4; pointer-events: none; }

.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--block { width: 100%; }
.btn--icon { padding: 8px; width: 34px; height: 34px; }

/* ---------- Thanh công cụ bảng dữ liệu: lọc, thao tác hàng loạt, phân trang ---------- */
.grid-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.grid-toolbar__filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grid-toolbar__filters .field__input { width: auto; min-width: 150px; }
.grid-toolbar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.pager { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pager__info { font-size: 13px; color: var(--text-muted); margin-right: 8px; white-space: nowrap; }

.bulk-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary-dark);
    font-size: 13px; font-weight: 600;
}
[data-theme="dark"] .bulk-badge { color: var(--primary); }

/* ---------- Tab đầu trang (Sản phẩm / Lịch sử sửa xóa) ---------- */
.page-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.page-tabs a {
    padding: 10px 16px;
    color: var(--text-muted); font-weight: 600; font-size: 14px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.page-tabs a:hover { color: var(--text); }
.page-tabs a.is-active { color: var(--primary-dark); border-bottom-color: var(--primary); }
[data-theme="dark"] .page-tabs a.is-active { color: var(--primary); }
.chip-tag {
    display: inline-flex; align-items: center;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2); color: var(--text-2);
    font-size: 13px; font-weight: 500;
}
.chip-tag--current { background: var(--primary); color: #fff; }

/* ============================================================
   Ma trận phân quyền theo nhóm — ~1.200 dòng × 15 cột.
   Ba vấn đề phải giải cùng lúc: (1) tiêu đề cột trôi mất khi cuộn dọc,
   (2) tên chức năng trôi mất khi cuộn ngang, (3) thanh trượt ngang nằm tận
   đáy bảng nghìn dòng nên gần như không với tới được.
   Cách giải: khung cuộn giới hạn theo chiều cao màn hình (thanh trượt ngang
   luôn nằm ngay dưới tầm mắt) + đóng băng hàng tiêu đề và cột đầu.
   ============================================================ */
.perm-matrix {
    /* Giá trị dự phòng khi JS chưa chạy; script của trang đo thật rồi gán lại max-height cho vừa khít */
    max-height: calc(100vh - 300px);
    min-height: 320px;
    overflow: auto;
    /* Giữ chỗ cho ô góc: nếu không, hàng tiêu đề dính và cột dính chồng lên nhau ở góc trên trái */
    position: relative;
}
.perm-matrix table { border-collapse: separate; border-spacing: 0; }

.perm-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
.perm-matrix .perm-col-fn { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.perm-matrix thead .perm-col-fn { z-index: 3; }
.perm-module-row .perm-col-fn,
.perm-group-row .perm-col-fn { background: inherit; }

/* Tiêu đề cột xoay dọc: "Nhân viên thu ngân" nằm ngang bắt cột rộng 90px,
   xoay đi thì mỗi cột chỉ còn ~44px — 15 cột vừa lọt màn hình thường,
   hết cần cuộn ngang. */
.perm-matrix .perm-col-role {
    width: 44px; min-width: 44px; max-width: 44px;
    padding: 8px 2px;
    vertical-align: bottom;
    text-align: center;
}
.perm-matrix .perm-col-role span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1;
}
.perm-matrix td.perm-cell { width: 44px; text-align: center; padding: 6px 2px; }

/* Dòng đang trỏ tới sáng lên — bắt buộc với ma trận 15 cột, không thì rất dễ tích nhầm dòng */
.perm-matrix tbody tr:not(.perm-module-row):not(.perm-group-row):hover td { background: var(--surface-2); }
.perm-matrix tbody tr:not(.perm-module-row):not(.perm-group-row):hover .perm-col-fn { background: var(--surface-2); }

.perm-module-row td { background: var(--surface-2); font-size: 14px; padding-top: 10px; padding-bottom: 10px; }
.perm-group-row td { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); font-size: 13.5px; }

.perm-list { display: flex; flex-direction: column; }
.perm-row { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--line-soft); }
.perm-row:last-child { border-bottom: none; }
.perm-row__text { flex: 1; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.perm-row__label { color: var(--primary-dark); font-weight: 600; }
[data-theme="dark"] .perm-row__label { color: var(--primary); }
.perm-row__advanced { flex: none; display: flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; }

.page-tabs__disabled {
    display: inline-block;
    padding: 10px 16px;
    color: var(--text-faint); font-weight: 600; font-size: 14px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: not-allowed;
}

/* ---------- Modal / khay trượt dùng chung (Tùy chỉnh hiển thị, Bộ lọc, Gắn nhãn...) ---------- */
.modal-overlay {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(15, 23, 42, .45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}
/* (Đã bỏ `.modal-overlay[hidden] { display: none }` — luật chung `[hidden]` ở đầu tệp lo việc này
   cho MỌI lớp, thay vì phải nhớ vá lẻ từng lớp mới có đặt `display`.) */
.modal-box {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 100%; max-width: 560px;
    max-height: calc(100vh - 80px);
    display: flex; flex-direction: column;
}
.modal-box--wide { max-width: 920px; }
.modal-box__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}
.modal-box__head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.modal-box__close {
    background: none; border: none; cursor: pointer;
    font-size: 20px; line-height: 1; color: var(--text-muted); padding: 4px 8px;
}
.modal-box__close:hover { color: var(--text); }
.modal-box__body { padding: 18px 20px; overflow-y: auto; }
.modal-box__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
}

/* Khay trượt từ phải — dùng cho "Tất cả bộ lọc" */
.drawer-overlay {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(15, 23, 42, .45);
    display: flex; justify-content: flex-end;
}
/* (Cũng đã bỏ `.drawer-overlay[hidden]` — xem ghi chú ở `.modal-overlay` bên trên.) */
.drawer-box {
    background: var(--surface);
    width: 75vw; max-width: 1320px; min-width: 760px;
    height: 100%;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
}
.drawer-box__body { padding: 4px 32px; overflow-y: auto; flex: 1; }
.drawer-tabs { display: flex; gap: 6px; padding: 18px 32px 0; border-bottom: 1px solid var(--line); }
.drawer-tabs button {
    background: none; border: none; cursor: pointer;
    padding: 11px 16px; font-weight: 700; font-size: 15px; color: var(--text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.drawer-tabs button.is-active { color: var(--primary-dark); border-bottom-color: var(--primary); }
[data-theme="dark"] .drawer-tabs button.is-active { color: var(--primary); }
.drawer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 28px; padding: 22px 0; }
.drawer-grid .field-range { display: flex; gap: 6px; }
@media (max-width: 900px) {
    .drawer-box { width: 100%; min-width: 0; }
}
.drawer-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 32px;
    border-top: 1px solid var(--line);
}

/* ---------- Danh sách cột tùy chỉnh hiển thị ---------- */
.column-list { max-height: 360px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.column-list label {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer; font-size: 14px;
}
.column-list label:last-child { border-bottom: none; }
.column-list label:hover { background: var(--surface-2); }

/* ---------- Bảng sản phẩm: ảnh vừa đủ lớn, dòng phân loại con thụt vào, dòng cha in đậm ---------- */
.prod-thumb { width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--line); display: block; }
.prod-thumb--empty {
    width: 52px; height: 52px; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; color: var(--text-faint);
}
.table tr.is-variant-row td:nth-child(2) { padding-left: 32px; position: relative; }
.table tr.is-variant-row td:nth-child(2)::before { content: '↳'; position: absolute; left: 12px; color: var(--text-faint); }
.table tr.is-parent-row td { font-weight: 600; background: var(--surface-2); }

.stat-icon-col { display: inline-flex; align-items: center; gap: 3px; color: var(--text-2); font-size: 12.5px; }
.stat-icon-col .ico { width: 14px; height: 14px; color: var(--text-faint); }

/* Bảng kẻ ô đủ 4 cạnh (ngang + dọc) — GIAO DIỆN BẢNG CHUẨN của DonLoc.vn (2026-08-28:
   trang Sản phẩm là mẫu gốc, mọi bảng hiển thị dữ liệu trong site đều phải gắn thêm
   class .table-grid bên cạnh .table để nhìn rõ hàng/cột hơn — không còn là lựa chọn
   riêng cho vài trang nữa). .table đứng một mình (không .table-grid) chỉ còn dùng cho
   bảng KHÔNG phải để xem dữ liệu dạng lưới, ví dụ bảng nhập liệu trong biểu mẫu. */
.table-grid { --grid-line: #cbd5e1; }
[data-theme="dark"] .table-grid { --grid-line: #3a464b; }
.table-grid { border: 1px solid var(--grid-line); }
.table-grid th,
.table-grid td { border-right: 1px solid var(--grid-line); }
.table-grid th:last-child,
.table-grid td:last-child { border-right: none; }
.table-grid th,
.table-grid td { border-bottom: 1px solid var(--grid-line); }

/* Dòng cao ~80px, header ~52px — đo trực tiếp từ ảnh mẫu (khác padding
   mặc định .table dùng cho các bảng khác trong site) */
.table-grid td { padding: 14px 18px; }
.table-grid th { padding: 16px 18px; }

/* Header bảng kiểu chuẩn: nền xám + chữ đậm gần đen — khác .table th dùng
   chung toàn site (chữ xám nhạt, không nền) */
.table-grid th { background: var(--surface-2); color: var(--text); font-weight: 700; }

/* Ô "Thứ tự" sửa nhanh tại chỗ trong bảng (Danh mục...) — ô số nhỏ, căn giữa */
.inline-order-input {
    width: 54px; text-align: center; padding: 6px 4px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); font-family: inherit; font-size: 13px;
}
.inline-order-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-ring); }

/* Giá bán, Mã/Tên (link), Tồn trong bảng sản phẩm — đúng màu/độ đậm ảnh mẫu:
   Giá bán xanh lá KHÔNG đậm, Mã/Tên xanh dương kiểu link KHÔNG đậm, Tồn luôn
   đen đậm bất kể tồn nhiều/ít (không tô theo ngưỡng cảnh báo như trước). */
.cell-price { color: #4caf50; font-weight: 400; }
.cell-link { color: #0d6efd; font-weight: 400; }
a.cell-link:hover { text-decoration: underline; }
.stock-num { font-weight: 700; color: var(--text); }

/* Cột icon đầu bảng sản phẩm — chia 2 nhóm màu đúng ảnh mẫu: Đang giao/Mới nhập
   xanh dương, Chờ xử lý/Có thể bán đen đậm (không còn xám mờ như trước) */
.cell-num--blue { color: #0d6efd; }
.cell-num--dark { color: var(--text); font-weight: 600; }

.th-icon--blue   { color: #0d6efd; }
.th-icon--dark   { color: var(--text); }
.th-icon--orange { color: var(--orange); }
.th-icon--green  { color: var(--ok); }

/* Icon "Có thể bán" ở header — ô vuông bo góc tô đặc xanh lá + dấu tick trắng,
   khác kiểu icon 1 màu (stroke) của 3 cột icon còn lại */
.th-icon-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 4px;
    background: var(--ok); color: #fff;
}
.th-icon-badge .ico { width: 11px; height: 11px; }

/* Khối thẻ "phẳng" — bỏ viền/bóng/nền trắng, hoà vào nền xám của trang. Dùng cho
   trang Sản phẩm vì ảnh mẫu không bọc khung quanh thanh lọc + bảng. */
.card--flat { background: transparent; border: none; box-shadow: none; border-radius: 0; }
.card--flat .card__body { padding-left: 0; padding-right: 0; }

/* Nút phân trang — icon phẳng liền nhau, không khung/nền như .btn--outline */
.pager__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; color: var(--text-2);
}
.pager__btn:hover { color: var(--primary); }
.pager__btn.btn--disabled-link { color: var(--text-faint); }
.pager__btn .ico { width: 17px; height: 17px; }

/* Đường kẻ phân nhóm trong menu thả xuống (menu "Thao tác"...) */
.menu__divider { border: none; border-top: 1px solid var(--line); margin: 6px 0; }

/* Mũi tên sắp xếp cạnh tiêu đề cột — bấm để đổi chiều, mờ khi chưa phải cột đang sắp xếp */
.th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.th-sort .ico { width: 13px; height: 13px; color: var(--text-faint); }
.th-sort.is-active .ico { color: var(--primary); }

.flag-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.flag-dot--hot { background: var(--bad); }
.flag-dot--new { background: var(--info); }

.link { background: none; border: none; padding: 0; font: inherit; color: var(--primary); cursor: pointer; font-weight: 500; }
.link:hover { text-decoration: underline; }
.link--danger { color: var(--bad); }
.inline { display: inline; margin-left: 12px; }

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

/* ============================================================
   Thông báo
   ============================================================ */
.alert {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 14px; font-weight: 500;
}
.alert--ok { background: var(--ok-strong-bg); color: var(--ok-strong); }
.alert--bad { background: var(--bad-strong-bg); color: var(--bad-strong); }
/* Sắp tới hạn — vàng, đủ nổi để chú ý nhưng chưa phải lỗi */
.alert--warn { background: var(--warn-strong-bg); color: var(--warn-strong); }
/* Dòng thông tin thuần (vd hạn dùng còn xa) — không cướp sự chú ý khỏi nội dung trang */
.alert--muted { background: var(--surface-2); color: var(--text-2); font-weight: 400; border: 1px solid var(--border, transparent); }

/* ============================================================
   Màn hình đăng nhập / đăng ký
   ============================================================ */
.body--auth { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: var(--bg); }

.auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(940px, 100%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.auth__panel {
    background: linear-gradient(150deg, #0f766e 0%, #12857a 45%, #14b8a6 100%);
    color: #d7f0ec;
    padding: 38px 34px;
    display: flex; flex-direction: column;
}
.auth__panel .brand__name { color: #fff; }
.auth__panel .brand__tld { color: #99f6e4; }
.auth__panel .brand__sub { color: #a7ded7; }
.auth__panel .brand__mark { background: rgba(255,255,255,.16); box-shadow: none; }
.brand--auth { padding: 0; margin-bottom: 24px; }
.brand--auth .brand__name { font-size: 20px; }

.auth__pitch { font-size: 16px; line-height: 1.65; color: #e0f5f2; margin: 0 0 auto; }
.auth__demo { margin: 28px 0 0; font-size: 14px; }
.auth__demo dt { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: #a7ded7; font-weight: 700; margin-bottom: 7px; }
.auth__demo dd { margin: 0 0 5px; color: #f0fdfa; }

.auth__form { padding: 38px 34px; }
.auth__title { font-size: 20px; font-weight: 700; margin: 0; }
.auth__sub { color: var(--text-muted); font-size: 14px; margin: 4px 0 24px; }
.auth__form .field { margin-bottom: 15px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1280px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .tiles { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1080px) {
    .split { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
    .metrics { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .masthead__top { padding: 10px 14px; flex-wrap: wrap; }
    .crumb { display: none; }
    .masthead__actions .btn span { display: none; }
    .menu__who { display: none; }
    .topnav { padding: 0 8px; }
    .topnav__panel { display: none !important; }
    .chart__labels span:nth-child(even) { visibility: hidden; }

    .shell { flex-direction: column; }
    .sidebar { width: 100%; flex: none; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--line); }
    .nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .nav__section { display: none; }
    .workspace { padding: 18px 14px 40px; }
    .topbar { padding: 0 14px; }
    .topbar__actions .btn span { display: none; }
    .stats, .tiles { grid-template-columns: 1fr 1fr; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .auth { grid-template-columns: 1fr; }
    .auth__panel { order: 2; }
    .card { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

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

/* ===== Cài đặt chung (Setting/Index) ===== */
.setting-group { margin-bottom: 18px; }
.setting-list { display: flex; flex-direction: column; }
.setting-row {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px; border-top: 1px solid var(--line-soft);
}
.setting-row:first-child { border-top: none; }
.setting-row__body { flex: 1; min-width: 0; }
.setting-row__main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.setting-row__label { font-size: 14px; }
.setting-row__desc { margin-top: 10px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.setting-row__desc p { margin: 0 0 2px; }
.field__input--inline { width: auto; padding: 6px 10px; font-size: 13px; }
.setting-hint {
    display: inline-flex; width: 16px; height: 16px; flex: none;
    align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 50%;
    font-size: 11px; color: var(--text-muted); cursor: help;
}
.setting-note {
    margin: 0 18px 18px; padding: 12px 14px; border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--warn) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent);
    color: var(--text); font-size: 13px; line-height: 1.6;
}
.setting-info { margin-bottom: 16px; font-size: 13.5px; }
.setting-info__row { padding: 4px 0; }
.setting-logo {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 16px; margin-bottom: 8px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.setting-logo img { max-height: 48px; max-width: 180px; object-fit: contain; }

/* ---------- Bộ chọn địa chỉ hành chính (wwwroot/js/diachi.js) ---------- */
/* Dựng bằng JS nên toàn bộ kiểu dáng nằm ở đây, không rải inline trong view. */
.chon-diachi { margin-bottom: 8px; }

.diachi__thanh {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 8px; flex-wrap: wrap;
}
/* Nút chọn bộ địa giới cũ/mới — dạng hai nút dính nhau, cái đang dùng thì tô đậm. */
.diachi__che { border-color: var(--line); background: transparent; color: var(--text-2); }
.diachi__che.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.diachi__che:disabled { opacity: .45; cursor: not-allowed; }
.diachi__nhac { flex: 1; font-size: 12px; color: var(--text-faint); }

.diachi__luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
/* Bộ MỚI bỏ hẳn cấp quận/huyện nên chỉ còn hai cột. */
.diachi__luoi--2 { grid-template-columns: repeat(2, 1fr); }
.diachi__luoi .field { margin: 0; }
.diachi__sonha { margin-bottom: 8px; }

/* Ô kết quả: chính là input của model, luôn sửa tay được.
   Làm nhạt đi một chút để thấy rõ nó là kết quả ghép, không phải ô nhập chính. */
.diachi__ketqua { background: var(--surface-2); }

.diachi__loi { font-size: 12px; color: var(--bad); margin-bottom: 8px; }

@media (max-width: 640px) {
    /* Điện thoại: mỗi cấp một dòng cho dễ bấm, tên phường/xã lại thường rất dài. */
    .diachi__luoi, .diachi__luoi--2 { grid-template-columns: 1fr; }
}


/* ---------- Ô chọn nhiều: một ô xổ ở trên, các thẻ đã chọn nằm dưới ----------
   Dùng cho "Doanh nghiệp" và "Kho hàng" ở trang Nhân viên. Chọn một mục thì mục đó
   biến khỏi ô xổ và hiện thành thẻ; bấm ✕ trên thẻ thì mục quay lại ô xổ. */

.chonnhieu__the { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chonnhieu__the:empty { display: none; }

.the-chon {
    display: inline-flex; align-items: stretch;
    background: var(--primary); color: #fff;
    border-radius: var(--radius-sm); overflow: hidden;
    font-size: 14px; font-weight: 500; line-height: 1.4;
}
.the-chon__bo {
    border: none; background: rgba(0, 0, 0, .14); color: #fff;
    padding: 0 11px; cursor: pointer; font-size: 15px;
    display: flex; align-items: center;
}
.the-chon__bo:hover { background: rgba(0, 0, 0, .3); }
.the-chon__bo:disabled { opacity: .45; cursor: not-allowed; }
.the-chon__ten { padding: 9px 13px 9px 11px; }

/* ---------- Trang "Cai dat > Don hang va van chuyen" ---------- */
/* Dung theo anh mau: moi khoi co nut thu gon o goc phai, moi dong co the co nut Sua ben phai. */

.khoi__dau {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    user-select: none;
}
.khoi__ten { flex: 1; font-size: 17px; font-weight: 600; color: var(--text); margin: 0; }
.khoi__thu {
    width: 22px; height: 22px;
    color: var(--text-muted);
    transition: transform .16s ease;
}
.khoi.dathugon .khoi__thu { transform: rotate(180deg); }
.khoi.dathugon .khoi__than { display: none; }

/* Mot dong cai dat: [cong tac] [nhan + mo ta] ......... [nut Sua] */
.dong {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.dong:last-child { border-bottom: none; }
.dong__than { flex: 1; min-width: 0; }
.dong__nhan { font-size: 14px; color: var(--text); }
.dong__giatri { color: var(--primary-dark); font-weight: 600; }
.dong__mota { margin-top: 4px; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.dong__mota p { margin: 2px 0; }
.dong__phai { flex: none; }
.dong__ico { flex: none; width: 20px; color: var(--text-faint); margin-top: 2px; }

/* Khoi con: cac o tich phu thuoc mot cong tac cha (vd "Yeu cau nhap thong tin khach hang") */
.dongcon {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 18px;
    padding: 14px 18px 4px 50px;
}
.dongcon__muc { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
@media (max-width: 1100px) { .dongcon { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .dongcon { grid-template-columns: 1fr; padding-left: 18px; } }

/* Danh sach hang van chuyen — mot dong mot hang, logo ben trai, nut Ket noi ben phai */
.hangvc {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
}
.hangvc:last-of-type { border-bottom: none; }
.hangvc__logo { flex: none; display: flex; align-items: center; }

/* Logo hãng vận chuyển (xem _LogoHangVanChuyen.cshtml).
   Nền TRẮNG cố định, không dùng biến màu theo giao diện: logo mang màu thương hiệu của hãng,
   đặt lên nền tối thì đỏ ViettelPost và xanh GHTK tụt tương phản. Đây cũng là cách thông thường
   khi trình bày logo của bên thứ ba — đặt trên một tấm nền sáng riêng. */
.logohang {
    width: 140px; height: 40px; display: block; flex: none;
    background: #fff; border-radius: var(--radius-sm);
}
.logohang--trong {
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2);
}
.logohang--trong .ico { width: 22px; height: 22px; color: var(--text-faint); }

/* Hãng chưa nối API thì logo mờ đi — nhìn danh sách là biết ngay cái nào dùng được. */
.hangvc--chuanoi .logohang { opacity: .55; filter: saturate(.4); }

/* Hãng CHƯA MỞ kết nối (chưa viết mã gọi API): mờ hơn nữa, và không có nút bấm được. */
.hangvc--chuamo .logohang { opacity: .4; filter: grayscale(.75); }
.hangvc--chuamo .hangvc__ten { color: var(--text-2); }

/* Tài khoản cửa hàng đã khai với một hãng — dòng con nằm dưới tên hãng */
.hangvc__tk {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--line);
    font-size: 13.5px;
}
.hangvc__tk-ten { color: var(--text); font-weight: 500; }
.hangvc__tk-sdt { color: var(--text-muted); font-size: 13px; }
.hangvc__tk-ok { color: var(--success, #16A34A); flex: none; }
.hangvc__tk-thao { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.hangvc__tk-thao form { display: inline; }
.hangvc__tk-tt { flex-basis: 100%; font-size: 12.5px; color: var(--text-muted); }

/* Nút hành động chính của khối này — xanh dương đặc như ảnh mẫu, để phân biệt với
   nút chính màu chủ đạo (xanh ngọc) dùng cho việc lưu. */
.btn--xanh {
    background: #1A6FD4; color: #fff; border: 1px solid #1A6FD4;
}
.btn--xanh:hover { background: #1560BC; border-color: #1560BC; }
.btn--xanh .ico { color: #fff; }

/* Nút "Sửa" ở cuối mỗi dòng cài đặt — cùng màu xanh dương với ảnh mẫu. */
.dong__phai .btn { background: #1A6FD4; color: #fff; border-color: #1A6FD4; }
.dong__phai .btn:hover { background: #1560BC; border-color: #1560BC; }
.dong__phai .btn .ico { color: #fff; }

/* Giá trị hiện sau nhãn: kiểu liên kết xanh dương như ảnh, không phải chữ đậm. */
.dong__giatri { color: #1A6FD4; font-weight: 500; }
.hangvc__than { flex: 1; min-width: 0; }
.hangvc__ten { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; color: var(--text); }
.hangvc__tt { color: var(--text-faint); flex: none; cursor: help; }
.hangvc__phai { flex: none; }

/* "Xem hướng dẫn kết nối" — là <button> nhưng phải TRÔNG như liên kết: nó mở một khối chữ ngay
   tại chỗ chứ không điều hướng đi đâu, dùng thẻ <a href="#"> cho giống sẽ làm trang nhảy về đầu. */
.hangvc__huongdan {
    margin-top: 4px; padding: 0;
    background: none; border: none; cursor: pointer;
    font: inherit; font-size: 13.5px;
    color: var(--link); text-align: left;
}
.hangvc__huongdan:hover { text-decoration: underline; }

.hangvc__hd {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    font-size: 13px; line-height: 1.65; color: var(--text-2);
}
.hangvc__hd p { margin: 0 0 6px; }
.hangvc__hd p:last-child { margin-bottom: 0; }

/* Bố cục khối "Kết nối dịch vụ vận chuyển": chữ giải thích HẸP bên trái, danh sách hãng RỘNG
   bên phải — ngược với lớp .split dùng chung ("1fr 360px"). Nhét danh sách hãng vào cột 360px
   là tên hãng xuống dòng từng chữ một và các nút thao tác đè lên nhau. */
.ketnoi { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
.ketnoi__chu { padding: 18px; }
.ketnoi__chu p { margin: 0 0 10px; }
.ketnoi__ds { padding: 18px; border-left: 1px solid var(--line); min-width: 0; }
.ketnoi__loc { width: 100%; margin-bottom: 6px; }
.ketnoi__loc:disabled { cursor: help; }

/* Màn hẹp thì xếp dọc — giữ 340px ở đây sẽ ép cột danh sách về đúng lỗi vừa sửa. */
@media (max-width: 1100px) {
    .ketnoi { grid-template-columns: 1fr; }
    .ketnoi__ds { border-left: none; border-top: 1px solid var(--line); }
}


/* ==================================================================
   Trang "Đơn hàng > Danh sách đơn hàng"
   Dựng theo ảnh mẫu: thẻ trên đầu, hàng ô lọc, thanh công cụ, bảng
   nhiều dòng con cho mỗi đơn, dòng Tổng ở cuối.
   ================================================================== */

.donhang { padding: 0; overflow: visible; }

/* Khung cuộn cho bảng rộng. BẢNG tự cuộn trong khung của nó, KHÔNG để cả trang trượt ngang —
   trang trượt ngang thì thanh điều hướng và bộ lọc cũng trôi theo, người dùng mất luôn điểm tựa. */
.cuon { overflow-x: auto; }

/* ---- Thẻ ---- */
.the-don {
    display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap;
    padding: 0 16px; border-bottom: 1px solid var(--line);
}
.the-don__muc {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 14px 12px; text-decoration: none;
    color: var(--text-2); font-size: 14.5px; font-weight: 500;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.the-don__muc:hover { color: var(--text); }
.the-don__muc.is-active { color: var(--primary-dark); border-bottom-color: var(--primary); font-weight: 600; }
.the-don__so {
    min-width: 22px; padding: 1px 7px; border-radius: 100px;
    background: var(--primary); color: #fff;
    font-size: 12px; font-weight: 600; text-align: center;
    font-variant-numeric: tabular-nums;
}
.the-don__so--do { background: var(--danger, #DC2626); }

/* ---- Hàng ô lọc ---- */
.loc-don {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px; padding: 16px;
}
@media (max-width: 1200px) { .loc-don { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .loc-don { grid-template-columns: 1fr; } }
.loc-don__ngay { display: flex; align-items: center; gap: 6px; }
.loc-don__ngay .field__input { min-width: 0; }
.loc-don__nut { display: flex; gap: 10px; padding: 0 16px 16px; }

/* ---- Thanh công cụ ---- */
.thanh-cc {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 0 16px 16px;
}
.thanh-cc__phai { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.thanh-cc__trang { font-size: 13.5px; color: var(--text-2); font-variant-numeric: tabular-nums; margin-right: 6px; }
.thanh-cc .btn.is-tat { opacity: .4; pointer-events: none; }

/* Menu rộng có ô chọn bên trong */
.menu__panel--rong { min-width: 340px; padding: 8px; }
.menu__hang {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 6px; font-size: 14px; color: var(--text-2);
}
.menu__hang .field__input { flex: 1; min-width: 0; }
.menu__ngan { height: 1px; background: var(--line); margin: 6px 0; }
.menu__item--nguyhiem { color: var(--danger, #DC2626); }

/* ---- Bảng ---- */
.bang-don { font-size: 14px; }
.bang-don__chon { width: 38px; text-align: center; }
.bang-don th { white-space: nowrap; }

/* Đường kẻ ĐẬM giữa hai đơn, kẻ MỜ giữa các dòng sản phẩm trong cùng một đơn.
   Không phân biệt hai loại đường thì bảng nhìn như một danh sách phẳng và không
   ai biết dòng nào thuộc đơn nào. */
.bang-don tbody tr td { border-bottom: 1px solid var(--line-soft); }
.bang-don__dau td { border-top: 1px solid var(--line); }
.bang-don__con td:first-child { padding-left: 16px; }

.bang-don__ma { font-weight: 600; color: var(--link, #1A6FD4); text-decoration: none; }
.bang-don__ma:hover { text-decoration: underline; }
.bang-don__phu { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.bang-don__kho { font-size: 12.5px; color: var(--link, #1A6FD4); margin-top: 2px; }
/* SỐ LẦN IN dưới ô trạng thái.
   Lần 1: chữ nhỏ xám — thông tin bình thường, không cần chú ý.
   Từ lần 2: khối ĐỎ chữ đậm in hoa — in trùng nhãn là mất hàng thật, cảnh báo phải đập vào
   mắt người đang đóng gói hàng loạt chứ không chờ họ đọc kỹ. */
.tt-in {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
}
.tt-in--canhbao {
    display: inline-block;
    padding: 2px 8px;
    font-weight: 800;
    letter-spacing: .2px;
    /* Đỏ CỐ ĐỊNH, không theo token --danger: ở giao diện tối token đó nhạt đi (#f87171) cho hợp
       nền, mà chỗ này cần ngược lại — cảnh báo mất hàng phải đậm như nhau ở cả hai giao diện. */
    color: #fff;
    background: #dc2626;
    border-radius: 999px;
}
/* Nhắc nhỏ "không có mã vận đơn" ngay dưới trạng thái đã in: đơn được in khi chưa đẩy hãng.
   Màu hổ phách (nhắc nhở, không phải lỗi) — nhạt hơn khối cảnh báo in trùng ở trên. */
.tt-in--khongma { color: #b45309; font-style: italic; }

/* Modal in — danh sách các đơn chưa có mã vận đơn. */
.itm__loi { margin: 0 0 10px; color: var(--text-2); line-height: 1.5; }
.itm__ds { max-height: 260px; overflow-y: auto; border: 1px solid var(--vien, #e5e7eb); border-radius: 8px; }
.itm__ul { list-style: none; margin: 0; padding: 4px 0; }
.itm__ul li {
    padding: 6px 12px; font-family: ui-monospace, Consolas, monospace; font-size: 13px;
    border-bottom: 1px solid var(--vien, #f0f0f0);
}
.itm__ul li:last-child { border-bottom: 0; }
.bang-don__sdt { color: var(--link, #1A6FD4); }
.bang-don__sku { color: var(--text-muted); font-size: 13px; }
.bang-don__hang { font-weight: 600; color: var(--link, #1A6FD4); font-size: 13px; }
.bang-don__vandon { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bang-don__ghichu { color: var(--text-faint); }

/* Hai màu tiền: số ĐỎ là tiền hàng (đang nợ), số XANH là tiền thu hộ sẽ về.
   Giống ảnh mẫu — nhìn cột là biết ngay đơn nào có COD. */
.bang-don__tien-am  { color: var(--danger, #DC2626); font-variant-numeric: tabular-nums; }
.bang-don__tien-thu { color: var(--success, #16A34A); font-weight: 600; font-variant-numeric: tabular-nums; }

.bang-don__tong td { background: var(--surface-2); border-top: 2px solid var(--line); font-weight: 500; }

/* ---- Hộp tùy chỉnh cột ---- */
.hop-cot { display: flex; flex-direction: column; gap: 2px; max-height: 55vh; overflow-y: auto; }
.hop-cot__muc {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer;
}
.hop-cot__muc:hover { background: var(--surface-2); }
.hop-cot__muc--con { padding-left: 38px; color: var(--text-2); }

/* ---- Nút trạng thái kiêm menu thao tác của từng đơn ----
   Nhìn như một nhãn trạng thái có mũi tên, bấm ra menu. Gộp hai thứ vào một chỗ đúng như ảnh
   mẫu: cột trạng thái vốn là nơi người dùng nhìn để biết đơn đang ở đâu, cũng là nơi họ muốn
   thao tác tiếp. */
.tt-don__nut {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; padding: 0; cursor: pointer; font: inherit;
}
.tt-don__mui { color: var(--text-muted); flex: none; }
.tt-don__nut:hover .tt-don__mui { color: var(--text-2); }
.tt-don__nut .status { cursor: pointer; }
/* Menu của dòng bảng neo mép PHẢI nút, nhưng bảng hẹp thì cho nó rộng thoải mái. */
.tt-don .menu__panel { min-width: 232px; text-align: left; }
.tt-don .menu__item { white-space: nowrap; text-decoration: none; color: inherit; }

/* ============================================================
   THÔNG BÁO TỪ DONLOC.VN — khối ở cột phải trang Tổng quan.
   Nội dung do Super Admin soạn (Views/Announcement), khách chỉ đọc.
   ============================================================ */
.tinbao { list-style: none; margin: 0; padding: 0; }
.tinbao__muc {
    padding: 12px 18px 12px 15px;
    border-bottom: 1px solid var(--line-soft);
    /* Vạch màu bên trái mang thông tin (mức khẩn), không phải trang trí — nhờ nó liếc qua là
       biết dòng nào cần đọc ngay mà không phải đọc chữ. */
    box-shadow: inset 3px 0 0 var(--line-soft);
}
.tinbao__muc:last-child { border-bottom: none; }
.tinbao__muc--nhac { box-shadow: inset 3px 0 0 var(--warn); background: var(--warn-bg); }
.tinbao__muc--khan { box-shadow: inset 3px 0 0 var(--bad);  background: var(--bad-bg); }

.tinbao__dau { display: flex; align-items: center; gap: 8px; }
.tinbao__ten { font-size: 14px; font-weight: 600; line-height: 1.35; }
.tinbao__ghim { flex: none; }
.tinbao__noi {
    margin: 5px 0 0;
    font-size: 13px; line-height: 1.6; color: var(--text-2);
    /* Giữ nguyên chỗ xuống dòng người soạn gõ, nhưng vẫn tự ngắt dòng khi hết bề ngang.
       Đây là lý do nội dung in được dạng chữ thuần mà vẫn xuống dòng đúng ý — không cần <br>,
       tức là không cần cho phép HTML. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.tinbao__ngay { display: block; margin-top: 6px; font-size: 11.5px; color: var(--text-muted); }

/* Liên kết xanh nằm GIỮA câu chữ của một dòng cài đặt (vd "…khi Thêm phiếu nhập nhà cung cấp").
   Sinh ra từ dấu hiệu [chữ](đường-dẫn) trong danh mục — xem _KhoiCaiDat.cshtml. */
.dong__lienket { color: var(--link); }
.dong__lienket:hover { text-decoration: underline; }

/* "Cài đặt nâng cao" ở mép phải một dòng công tắc: mở lưới ô con đang giấu.
   Là <button> nhưng trông như liên kết — nó không điều hướng đi đâu cả. */
.dong__nangcao {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0; background: none; border: none; cursor: pointer;
    font: inherit; font-size: 13px; color: var(--text-muted);
    white-space: nowrap;
}
.dong__nangcao:hover { color: var(--link); }
.dong__nangcao:hover .ico { color: var(--link); }
.dong__nangcao.is-open { color: var(--link); }

/* ==================================================================
   Trang "Cài đặt > Hạn sử dụng"
   ================================================================== */

/* Cảnh báo mất dữ liệu. Dùng tông cam-đỏ riêng, KHÔNG dùng .alert chung: mọi .alert khác trên
   phần mềm đều là thông báo tạm (lưu xong, lỗi mạng...) và người dùng đã quen bỏ qua chúng.
   Đây là thứ duy nhất có hậu quả không đảo ngược được nên phải trông khác hẳn. */
.canhbao-han {
    margin-bottom: 18px;
    padding: 16px 20px;
    background: var(--warn-bg);
    border: 1px solid var(--warn);
    border-radius: var(--radius-md);
    font-size: 13.5px; line-height: 1.75;
}
.canhbao-han p { margin: 0 0 8px; }
.canhbao-han p:last-child { margin-bottom: 0; }
.canhbao-han strong { color: var(--bad-strong); }
.canhbao-han a { color: var(--link); text-decoration: underline; }

/* ---- Thanh lọc trang Hạn sử dụng ----

   Bản cũ: sáu ô TRẦN không nhãn dồn về phải, mỗi ô min-width:150px nên bề rộng so le, và hai ô
   ngày lúc nào cũng chỉ hiện "dd/mm/yyyy" — placeholder trên input[type=date] KHÔNG BAO GIỜ hiện
   (trình duyệt luôn vẽ mặt nạ ngày đè lên), nên hai thuộc tính placeholder="Ngày hết hạn" /
   "Ngày tạo" trong view là hai dòng code chết. Nhãn NGOÀI ô là cách duy nhất nói được ô nào lọc gì.

   Nay: mỗi ô là một cột dọc "nhãn nhỏ trên — ô nhập dưới", DÙNG LẠI NGUYÊN .bc-loc__o /
   .bc-loc__nhan của thanh lọc Báo cáo — không đẻ khuôn mới, và sau khi sửa thì trang này lọc giống
   hệt trang Báo cáo. Phần xếp chỗ dùng LƯỚI theo đúng .loc-don của trang Đơn hàng/Khách hàng (kể cả
   bộ ngắt 1200/700) để hai trang thu hẹp giống nhau. Lưới chứ không flex-wrap vì "canh hàng đều"
   chính là thứ hỏng ở bản cũ: flex-wrap để hàng cuối so le, mà .bc-loc__o lại khai sẵn
   min-width:148px nên chỉnh flex-basis cũng không cứu được.

   Cố ý bỏ justify-content:flex-end của bản cũ: khi mỗi ô đã có nhãn, canh trái mới đọc thành một
   hàng nhãn liền mạch — và mọi thanh lọc khác trong phần mềm đều canh trái. */
.loc-han {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 1200px) { .loc-han { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .loc-han { grid-template-columns: 1fr; } }

/* .bc-loc__o khai min-width:148px cho bố cục FLEX bên Báo cáo; trong lưới nó chặn cột co lại và
   làm thanh lọc tràn ngang ở màn hình hẹp. Luật cũ `.loc-han .field__input { min-width:150px }`
   bỏ đi cũng vì lý do đó — input[type=date] còn có bề rộng nội tại của trình duyệt nên phải nói
   min-width:0 thêm một lần cho chính ô nhập. */
.loc-han .bc-loc__o { min-width: 0; }
.loc-han .field__input { min-width: 0; }

/* Nút Lọc nằm ở HAI CỘT CUỐI của hàng thứ hai, ngay sau ô lọc cuối cùng — không đẻ thêm một hàng
   riêng chỉ để chứa một cái nút.
   BẪY: `3 / -1` trong lưới 2 cột là khoảng ÂM, trình duyệt sẽ đẻ ra một cột ngầm và thanh lọc tràn
   ngang — nên hai ngắt dưới phải kéo về `1 / -1`. */
.loc-han__nut { grid-column: 3 / -1; display: flex; align-items: flex-end; gap: 8px; }
@media (max-width: 1200px) { .loc-han__nut { grid-column: 1 / -1; } }
@media (max-width: 700px)  { .loc-han__nut .btn { flex: 1; justify-content: center; } }

/* ---- Dải "đang lọc" — CHỈ mọc ra khi thật sự có điều kiện ----
   Chưa lọc gì thì thanh lọc trông y hệt hôm nay, không có khoảng trắng thừa: người dùng bình
   thường không phải trả giá cho một tính năng họ chưa dùng.

   Dải này là phần CHÂN của khối lọc chứ không phải một ô lọc nữa, nên cho tràn hết bề ngang thẻ
   bằng margin âm đúng bằng padding của .loc-han. .card có overflow:hidden nên mép vẫn bo tròn đúng.
   VÌ VẬY: đừng đổi padding của .loc-han trong media query, đổi là lệch margin âm ở đây. */
.loc-han__chips {
    grid-column: 1 / -1;
    margin: 0 -18px -16px; padding: 10px 18px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    border-top: 1px solid var(--line-soft);
    background: var(--surface-2);
}

/* KHÔNG mượn .chip-tag: lớp đó bị khai HAI LẦN trong tệp này (một bản viên thuốc nền primary-soft,
   một bản hộp vuông nền surface-2) — bản sau đè bản trước, nên mượn nó là nhận về hộp xám phẳng
   chứ không phải viên thuốc như ý. Đặt tên riêng, nhưng ăn theo đúng bộ token nên tự đúng ở giao
   diện Sáng/Tối và cả 5 tông ngũ hành, không hard-code mã màu nào. */
.loc-han__chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    padding: 4px 5px 4px 11px;
    border-radius: 999px;
    background: var(--primary-soft); color: var(--primary-dark);
    font-size: 12.5px; font-weight: 600; line-height: 1.7;
}
[data-theme="dark"] .loc-han__chip { color: var(--primary); }

/* Tên trường nhạt hơn giá trị: mắt phải bắt "Cửa hàng số 1" trước, "Kho hàng" chỉ là ngữ cảnh.
   Giá trị cắt ellipsis để tên cửa hàng dài không bẻ vỡ dải; min-width:0 là điều kiện bắt buộc để
   ellipsis chạy được bên trong flex. */
.loc-han__chipnhan { font-weight: 500; opacity: .72; flex: none; }
.loc-han__chipgt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.loc-han__chipx {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; flex: none;
    border-radius: 999px;
    color: inherit; text-decoration: none; opacity: .55;
    font-size: 15px; line-height: 1;
}
.loc-han__chipx:hover { opacity: 1; background: rgba(0, 0, 0, .09); }
[data-theme="dark"] .loc-han__chipx:hover { background: rgba(255, 255, 255, .14); }
.loc-han__chipx:focus-visible { opacity: 1; outline: 2px solid var(--primary); outline-offset: 1px; }

/* "Xóa lọc" dồn cuối dải. Màn hình hẹp bỏ dồn phải, nếu không nó bị đẩy tụt xuống một dòng trống
   của riêng nó. */
.loc-han__xoa { margin-left: auto; }
@media (max-width: 700px) { .loc-han__xoa { margin-left: 0; } }

/* Con số khớp bộ lọc phải đậm hơn phần chữ xám xung quanh, nếu không nó chìm mất trong .muted. */
.thanh-han .muted strong { color: var(--text-2); font-weight: 700; }

.thanh-han {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
}
.thanh-han--duoi { justify-content: flex-end; border-top: 1px solid var(--line-soft); }

.bang-han td { vertical-align: middle; }
.han-dc { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.han-dc .ico { color: var(--text-faint); flex: none; }
.han-ok { color: var(--success, #16A34A); }

/* Ô sửa được ngay trong bảng — hẹp, để không kéo giãn cột. */
.o-luoi { width: 92px; padding: 6px 9px; font-size: 13.5px; }

/* Tiêu đề cột bấm được để sắp xếp. Con trỏ + mũi tên nhỏ cho biết bấm được;
   không có dấu hiệu gì thì không ai biết là bấm được. */
.bang-han th.sap { cursor: pointer; user-select: none; white-space: nowrap; }
.bang-han th.sap::before { content: "⇅"; margin-right: 5px; color: var(--text-faint); font-size: 11px; }
.bang-han th.sap:hover { color: var(--primary-dark); }

/* Dòng quá hạn / sắp hết hạn — đây là dòng người ta vào trang này để tìm, phải thấy ngay. */
.dong-han--het { background: var(--bad-bg); }
.dong-han--het .mono { color: var(--bad-strong); font-weight: 600; }
.dong-han--sap { background: var(--warn-bg); }

/* Nút Lưu xanh lá đặc dưới mỗi cột sửa được, theo đúng ảnh mẫu — phân biệt với nút chính
   (xanh ngọc) và nút hành động khối (xanh dương). */
.btn--luuxanh { background: #16A34A; color: #fff; border: 1px solid #16A34A; }
.btn--luuxanh:hover { background: #15803D; border-color: #15803D; }
.btn--luuxanh .ico { color: #fff; }

/* ==================================================================
   Trang "Cài đặt > Mẫu in > Thiết kế mẫu in"
   ================================================================== */

.mauin__thanh {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-soft);
}
/* Ô chọn nằm TRẦN trong thanh (không bọc .field) — luật chung `.field__input { width:100% }`
   làm chúng nở nguyên dòng và bẻ thanh thành 4 tầng, trong khi ảnh mẫu là MỘT hàng ngang.
   Ép về co theo nội dung, mỗi ô một bề rộng tối thiểu hợp lý. */
.mauin__thanh > .field__input { width: auto; flex: 0 1 auto; }
/* Nút "Từ khóa" — xanh đậm đặc như ảnh mẫu, để nó không lẫn với các ô chọn bên cạnh. */
.btn--tukhoa {
    background: #1c5f75; color: #fff; border: 1px solid #1c5f75;
    padding: 10px 22px; font-size: 14.5px; font-weight: 500;
    border-radius: var(--radius-md); cursor: pointer;
}
.btn--tukhoa:hover { background: #17505f; border-color: #17505f; }

/* Ô cửa hàng có nhãn nổi phía trên như ảnh mẫu. */
.mauin__o { position: relative; }
.mauin__nhan {
    position: absolute; top: -8px; left: 10px;
    padding: 0 5px; background: var(--surface);
    font-size: 12px; color: var(--text-muted);
}
.mauin__o .field__input { min-width: 240px; }

.mauin__soban { display: flex; align-items: center; gap: 10px; font-size: 14px; white-space: nowrap; }
.mauin__soban .field__input { width: 64px; text-align: center; }

.mauin__nutthem {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-width: 250px; cursor: pointer; background: var(--surface); text-align: left;
}
.mauin__tuychon { display: flex; align-items: center; gap: 9px; padding: 7px 10px; font-size: 13.5px; cursor: pointer; }
.mauin__tuychon:hover { background: var(--surface-2); border-radius: var(--radius-sm); }
/* Tùy chọn chưa làm được vẫn hiện nhưng mờ — bỏ hẳn thì người dùng đi tìm, mà bật được thì
   họ tin là bản in sẽ có thứ đó. */
.mauin__tuychon.la-khoa { opacity: .5; cursor: not-allowed; }

.mauin__nhac {
    padding: 11px 18px; font-size: 13.5px;
    background: var(--info-bg); border-bottom: 1px solid var(--line-soft); color: var(--text-2);
}
.mauin__nhac--daluu { background: var(--ok-bg); }
.mauin__vemacdinh {
    padding: 0; margin-left: 6px; background: none; border: none;
    font: inherit; color: var(--link); cursor: pointer; text-decoration: underline;
}

/* Hai cột: ô soạn thảo trái, bản xem trước phải. Bằng nhau vì người ta nhìn qua nhìn lại
   giữa hai bên liên tục — bên nào hẹp hơn là bên đó phải cuộn. */
.mauin__lam { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 18px; align-items: start; }
.mauin__trai, .mauin__phai { min-width: 0; }
@media (max-width: 1200px) { .mauin__lam { grid-template-columns: 1fr; } }

.mauin__luu { display: flex; justify-content: flex-end; margin-top: 12px; }

.mauin__phai { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.mauin__ptieu {
    padding: 14px; text-align: center; font-weight: 600; font-size: 15px;
    color: #111; background: #f8fafc; border-bottom: 1px solid var(--line);
}
/* Nền TRẮNG cố định, không theo giao diện sáng/tối: đây là xem trước tờ giấy sẽ in ra, mà giấy
   thì luôn trắng. Để nó đổi theo giao diện tối là người dùng canh màu chữ theo một nền không có thật. */
.mauin__khungxem { width: 100%; height: 560px; border: none; background: #fff; display: block; }

/* ---------- Ô soạn thảo tự viết (wwwroot/js/soanthao.js) ---------- */
.soanthao { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.soanthao.la-toanmanhinh {
    position: fixed; inset: 0; z-index: 200; border-radius: 0;
    display: flex; flex-direction: column;
}
.soanthao.la-toanmanhinh .soanthao__khung { flex: 1; max-height: none; }

.soanthao__thanh { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.soanthao__hang {
    display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
    padding: 6px 8px;
}
.soanthao__hang + .soanthao__hang { border-top: 1px solid var(--line-soft); }
.soanthao__ngan { width: 1px; height: 22px; margin: 0 5px; background: var(--line); }

.soanthao__nut {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--text-2); cursor: pointer;
}
.soanthao__nut svg { width: 17px; height: 17px; }
.soanthao__nut:hover { background: var(--surface); border-color: var(--line); color: var(--text); }
/* Nút đang bật (đậm/nghiêng/căn giữa...) phải nhìn ra ngay — không có dấu hiệu thì người dùng
   bấm hai lần rồi tưởng nút hỏng. */
.soanthao__nut.la-bat { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }

.soanthao__chon {
    height: 30px; padding: 0 6px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}

.soanthao__kep { position: relative; display: inline-flex; align-items: center; }
.soanthao__mui {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 30px; padding: 0;
    background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--text-muted); cursor: pointer;
}
.soanthao__mui svg { width: 12px; height: 12px; }
.soanthao__mui:hover { background: var(--surface); border-color: var(--line); }

/* Bảng màu / lưới bảng / ký tự đặc biệt — dùng chung cách hiện. */
.soanthao__bangmau, .soanthao__luoibang, .soanthao__kytu {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 60;
    display: none; padding: 8px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.soanthao__luoibang.la-mo { display: block; }

.soanthao__bangmau { grid-template-columns: repeat(6, 22px); gap: 5px; }
.soanthao__bangmau.la-mo { display: grid; }
.soanthao__omau { width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; padding: 0; }

.soanthao__luoinhan { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; text-align: center; white-space: nowrap; }
.soanthao__luoi { display: grid; grid-template-columns: repeat(6, 20px); gap: 3px; }
.soanthao__oluoi { width: 20px; height: 20px; padding: 0; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.soanthao__oluoi.la-chon { background: var(--primary-soft); border-color: var(--primary); }

.soanthao__kytu { grid-template-columns: repeat(10, 26px); gap: 3px; width: max-content; }
.soanthao__kytu.la-mo { display: grid; }
.soanthao__okytu {
    width: 26px; height: 26px; padding: 0; font-size: 14px;
    background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; color: var(--text);
}
.soanthao__okytu:hover { background: var(--surface-2); border-color: var(--line); }

/* Khung gõ: nền TRẮNG và chữ ĐEN cố định kể cả ở giao diện tối — đây là tờ giấy sẽ in ra. */
.soanthao__khung {
    min-height: 380px; max-height: 60vh; overflow: auto;
    padding: 16px; background: #fff; color: #000;
    font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5;
    outline: none;
}
.soanthao__khung:focus { box-shadow: inset 0 0 0 2px var(--primary-ring); }
.soanthao__khung table { max-width: 100%; }

.soanthao__chan {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px; border-top: 1px solid var(--line);
    font-size: 12px; color: var(--text-muted); background: var(--surface-2);
}
.soanthao__duongdan { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- Hộp Từ khóa ---------- */
.tukhoa__nhom { margin-bottom: 18px; }
.tukhoa__ten { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .03em; }
.tukhoa__luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 7px; }
.tukhoa__muc {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 8px 11px; text-align: left;
    background: var(--surface-2); border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm); cursor: pointer; font: inherit;
}
.tukhoa__muc:hover:not(.la-khoa) { background: var(--primary-soft); border-color: var(--primary); }
.tukhoa__muc.la-khoa { opacity: .55; cursor: not-allowed; }
.tukhoa__nhan { font-size: 13.5px; color: var(--text); }
.tukhoa__khoa { font-size: 11.5px; color: var(--text-muted); }
.tukhoa__chua { font-size: 11px; color: var(--bad-strong); }

.modal-box--rong { max-width: 940px; width: 94vw; }

/* Khối hướng dẫn tạo token + dòng webhook ở danh sách hãng vận chuyển. */
.hangvc__tk-hd { color: var(--text-2); background: var(--warn-bg); padding: 8px 10px; border-radius: var(--radius-sm); }
.js-chep { cursor: pointer; padding: 1px 6px; background: var(--surface-2); border-radius: 4px; border: 1px solid var(--line-soft); }
.js-chep:hover { border-color: var(--primary); }
/* ---------- Trang "Khách hàng > Danh sách khách hàng" ---------- */
/* Dùng chung .donhang / .the-don / .loc-don / .thanh-cc / .bang-don với trang Đơn hàng. */
.bang-kh th, .bang-kh td { vertical-align: middle; }
.bang-kh__link { color: var(--link); }
.bang-don__thao { width: 44px; }

/* Chú thích cuối bảng — tông xám nhạt, không tranh chú ý với dữ liệu. */
.bang-kh__ghichu {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 14px 18px; margin-top: 4px;
    background: var(--surface-2); border-top: 1px solid var(--line-soft);
    font-size: 13px; line-height: 1.7; color: var(--text-2);
}
.bang-kh__ghichu .ico { color: var(--text-faint); flex: none; margin-top: 2px; }
.bang-kh__ghichu p { margin: 0 0 4px; }
.bang-kh__ghichu p:last-child { margin-bottom: 0; }

/* Lưới ô trong modal Tìm kiếm nâng cao — 4 cột như ảnh mẫu, tự co xuống khi hẹp. */
.tk-luoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px) { .tk-luoi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tk-luoi { grid-template-columns: 1fr; } }
.tk-doi__o { display: flex; gap: 6px; }
.tk-doi__o .field__input { min-width: 0; }
/* ---------- Chuông thông báo trên thanh đầu trang ---------- */
.chuong { position: relative; display: flex; }
.chuong__panel {
    /* Bảng rộng như ảnh mẫu — tiêu đề tin dài phải đọc được trọn dòng. */
    min-width: 420px; max-width: min(560px, calc(100vw - 24px));
    padding: 0;
    max-height: 70vh; overflow-y: auto;
}
.chuong__dau {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.chuong__tieude {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 600; color: var(--link);
}
.chuong__tieude:hover { text-decoration: underline; }
.chuong__mo { display: inline-flex; color: var(--link); padding: 4px; border-radius: var(--radius-sm); }
.chuong__mo:hover { background: var(--surface-2); }

.chuong__muc { border-bottom: 1px solid var(--line-soft); }
.chuong__muc:last-child { border-bottom: none; }
.chuong__muc--khan .chuong__ten { color: var(--bad-strong); }
.chuong__ten {
    display: block; width: 100%; text-align: left;
    padding: 11px 16px;
    background: none; border: none; cursor: pointer;
    font: inherit; font-size: 14px; color: var(--text);
    line-height: 1.45;
}
.chuong__ten:hover { background: var(--surface-2); }
.chuong__noi {
    padding: 0 16px 11px;
    font-size: 13px; line-height: 1.65; color: var(--text-2);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.chuong__ngay { display: block; margin-top: 6px; font-size: 11.5px; color: var(--text-muted); }
.chuong__trong { padding: 22px 16px; font-size: 13.5px; color: var(--text-muted); text-align: center; }
/* ---------- Modal xác nhận dùng chung (thay confirm của trình duyệt) ---------- */
.xn__hop { max-width: 560px; }
.xn__cauhoi { margin: 0; font-size: 14.5px; line-height: 1.6; }
.xn__ketqua {
    margin-bottom: 14px; padding: 14px 16px;
    border-radius: var(--radius-md); font-size: 14px; line-height: 1.6;
}
.xn__ketqua--ok  { background: var(--ok-bg);  border: 1px solid var(--ok);  color: var(--ok-strong); }
.xn__ketqua--loi { background: var(--bad-bg); border: 1px solid var(--bad); color: var(--bad-strong); }
.xn__chan { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Modal "Gửi đơn hàng sang hãng vận chuyển" ---------- */
.ghvc__luuy {
    padding: 14px 16px; margin-bottom: 16px;
    background: var(--info-bg); border: 1px solid var(--info);
    border-radius: var(--radius-md); font-size: 13.5px; line-height: 1.65; color: var(--text-2);
}
.ghvc__chon { display: flex; gap: 34px; margin-bottom: 14px; font-size: 14px; }
.ghvc__chon label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ghvc__gan { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 14px; }
.ghvc__hang { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ghvc__tien {
    flex: 1; height: 18px; border-radius: 999px; overflow: hidden;
    background: var(--surface-2); border: 1px solid var(--line); position: relative;
}
.ghvc__tien-vach {
    height: 100%; width: 0%;
    background: repeating-linear-gradient(45deg, #3B82F6 0 10px, #60A5FA 10px 20px);
    transition: width .25s ease;
}
.ghvc__tien-so {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 11.5px; font-weight: 600; color: var(--text);
}
.ghvc__the { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 0; }
.ghvc__the button {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 2px; background: none; border: none; cursor: pointer;
    font: inherit; font-size: 14px; color: var(--text-2);
    border-bottom: 2px solid transparent;
}
.ghvc__the button.is-active { color: var(--link); border-bottom-color: var(--link); font-weight: 600; }
.ghvc__dem {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #fff;
}
.ghvc__dem--xanh { background: #16A34A; }
.ghvc__dem--do   { background: #DC2626; }
.ghvc__dem--den  { background: #334155; }
.ghvc__bang { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ghvc__bang th {
    text-align: left; padding: 9px 10px; font-weight: 600;
    border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.ghvc__bang td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.ghvc__bang .loi { color: var(--bad-strong); }
.ghvc__bang .ok  { color: var(--ok-strong); }
.ghvc__changhi { margin-top: 12px; font-size: 13px; color: var(--text-2); }
/* Đang tải cục bộ (chuyển thẻ/trang không tải lại) — mờ nhẹ vùng nội dung, khóa bấm. */
main.workspace.dang-tai,
section[data-khoi].dang-tai { opacity: .55; pointer-events: none; transition: opacity .15s ease; }
/* ============================================================
   GIAO DIỆN NGŨ HÀNH — [data-menh="kim|moc|thuy|hoa|tho"] trên <html>.
   Mỗi mệnh chỉ ĐỔI BIẾN màu thương hiệu (primary/accent/gradient), mọi thành
   phần đã ăn theo biến nên tự đổi màu: nút chính, thẻ đang chọn, menu ngang,
   vòng focus... Màu Ý NGHĨA (đỏ tiền phải trả, xanh lá tiền về, xanh dương
   liên kết) GIỮ NGUYÊN — chúng mang thông tin, không phải trang trí.
   Tông màu chọn trầm — mỗi mệnh một tính cách nhưng không lòe loẹt.
   ============================================================ */

/* Vệt màu trên menu ngang — "ăn theo" mệnh để thanh menu đỡ mờ nhạt.
   Mặc định dùng gradient thương hiệu; mỗi mệnh đè lại bên dưới. */
:root { --menh-vet: linear-gradient(90deg, #14b8a6, #0ea5e9); }
.topnav { position: relative; }
.topnav::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--menh-vet);
    pointer-events: none;
}

/* ---------- KIM — thép bạc, ánh vàng kim ---------- */
[data-menh="kim"] {
    --primary: #5b6b80;
    --primary-dark: #43536b;
    --primary-soft: #eceff4;
    --primary-ring: rgba(91, 107, 128, .22);
    --accent: #b08b3e;
    --primary-grad: linear-gradient(135deg, #6a7c93 0%, #9fadbf 100%);
    --primary-grad-hover: linear-gradient(135deg, #5b6b80 0%, #8494a8 100%);
    --menh-vet: linear-gradient(90deg, #7d8ba0 0%, #c9b37e 50%, #7d8ba0 100%);
}
[data-theme="dark"][data-menh="kim"] {
    --primary: #a9b6c7;
    --primary-dark: #93a3b8;
    --primary-soft: #242c37;
    --primary-ring: rgba(169, 182, 199, .22);
    --accent: #d3b36a;
    --primary-grad: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
    --primary-grad-hover: linear-gradient(135deg, #56657c 0%, #8496ad 100%);
    --menh-vet: linear-gradient(90deg, #94a3b8 0%, #d3b36a 50%, #94a3b8 100%);
}

/* ---------- MỘC — xanh lá rừng ---------- */
[data-menh="moc"] {
    --primary: #2f9e44;
    --primary-dark: #237d36;
    --primary-soft: #e2f6e7;
    --primary-ring: rgba(47, 158, 68, .22);
    --accent: #82c91e;
    --primary-grad: linear-gradient(135deg, #37a24d 0%, #74b816 100%);
    --primary-grad-hover: linear-gradient(135deg, #2f9e44 0%, #66a80f 100%);
    --menh-vet: linear-gradient(90deg, #2b8a3e, #82c91e);
}
[data-theme="dark"][data-menh="moc"] {
    --primary: #66cf7a;
    --primary-dark: #47b45e;
    --primary-soft: #12301b;
    --primary-ring: rgba(102, 207, 122, .25);
    --accent: #a9e34b;
    --primary-grad: linear-gradient(135deg, #2f9e44 0%, #66a80f 100%);
    --primary-grad-hover: linear-gradient(135deg, #268a3a 0%, #59940d 100%);
    --menh-vet: linear-gradient(90deg, #47b45e, #a9e34b);
}

/* ---------- THỦY — xanh dương biển sâu ---------- */
[data-menh="thuy"] {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #dbeafe;
    --primary-ring: rgba(37, 99, 235, .22);
    --accent: #0ea5e9;
    --primary-grad: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    --primary-grad-hover: linear-gradient(135deg, #2563eb 0%, #0891b2 100%);
    --menh-vet: linear-gradient(90deg, #1d4ed8, #22d3ee);
}
[data-theme="dark"][data-menh="thuy"] {
    --primary: #60a5fa;
    --primary-dark: #3b82f6;
    --primary-soft: #142744;
    --primary-ring: rgba(96, 165, 250, .25);
    --accent: #22d3ee;
    --primary-grad: linear-gradient(135deg, #2563eb 0%, #0e7490 100%);
    --primary-grad-hover: linear-gradient(135deg, #1d4ed8 0%, #155e75 100%);
    --menh-vet: linear-gradient(90deg, #3b82f6, #22d3ee);
}

/* ---------- HỎA — đỏ cam than hồng, trầm chứ không chói ---------- */
[data-menh="hoa"] {
    --primary: #d9480f;
    --primary-dark: #b23a0b;
    --primary-soft: #ffe9de;
    --primary-ring: rgba(217, 72, 15, .2);
    --accent: #e8590c;
    --primary-grad: linear-gradient(135deg, #f06a3a 0%, #d9480f 100%);
    --primary-grad-hover: linear-gradient(135deg, #e8590c 0%, #c23c0b 100%);
    --menh-vet: linear-gradient(90deg, #e8590c, #e03131);
}
[data-theme="dark"][data-menh="hoa"] {
    --primary: #f4845f;
    --primary-dark: #e8590c;
    --primary-soft: #3a1d10;
    --primary-ring: rgba(244, 132, 95, .25);
    --accent: #ffa94d;
    --primary-grad: linear-gradient(135deg, #e8590c 0%, #c2410c 100%);
    --primary-grad-hover: linear-gradient(135deg, #d14e0a 0%, #a8380a 100%);
    --menh-vet: linear-gradient(90deg, #f4845f, #ff6b6b);
}

/* ---------- THỔ — vàng đất, nâu trầm ---------- */
[data-menh="tho"] {
    --primary: #a87b2b;
    --primary-dark: #855f1e;
    --primary-soft: #f6eeda;
    --primary-ring: rgba(168, 123, 43, .22);
    --accent: #9a5b33;
    --primary-grad: linear-gradient(135deg, #bd913c 0%, #9a742a 100%);
    --primary-grad-hover: linear-gradient(135deg, #a87b2b 0%, #8a6420 100%);
    --menh-vet: linear-gradient(90deg, #a87b2b, #d1a95a);
}
[data-theme="dark"][data-menh="tho"] {
    --primary: #ddb45f;
    --primary-dark: #c9a04a;
    --primary-soft: #33270f;
    --primary-ring: rgba(221, 180, 95, .25);
    --accent: #e0965f;
    --primary-grad: linear-gradient(135deg, #a87b2b 0%, #8a6420 100%);
    --primary-grad-hover: linear-gradient(135deg, #966d24 0%, #79571b 100%);
    --menh-vet: linear-gradient(90deg, #c9a04a, #ddb45f);
}

/* ---------- Bộ chọn mệnh ở đầu trang ---------- */
.nguhanh__panel { min-width: 252px; }
.nguhanh__panel .menu__item { display: flex; align-items: center; gap: 10px; width: 100%; }
.nguhanh__cham {
    width: 18px; height: 18px; border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}
.nguhanh__cham--macdinh { background: linear-gradient(135deg, #14b8a6, #0ea5e9); }
.nguhanh__cham--kim     { background: linear-gradient(135deg, #8494a8, #c9b37e); }
.nguhanh__cham--moc     { background: linear-gradient(135deg, #2f9e44, #82c91e); }
.nguhanh__cham--thuy    { background: linear-gradient(135deg, #2563eb, #06b6d4); }
.nguhanh__cham--hoa     { background: linear-gradient(135deg, #e8590c, #e03131); }
.nguhanh__cham--tho     { background: linear-gradient(135deg, #bd913c, #8a6420); }
.nguhanh__cham--coban   { background: linear-gradient(135deg, #22c55e, #16a34a); }
.nguhanh__ten { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.25; }
.nguhanh__ten small { color: var(--text-muted); font-size: 11.5px; font-weight: 400; }
/* Dấu chọn: giữ chỗ sẵn (visibility) để các dòng không xê dịch khi đổi mục */
.nguhanh__chon { visibility: hidden; margin-left: auto; color: var(--primary); }
.js-menh.is-chon .nguhanh__chon { visibility: visible; }
.js-menh.is-chon { background: var(--primary-soft); }

/* ---------- Khi ĐANG chọn một mệnh: icon và hình khối phụ cũng nhuộm theo màu chủ đạo ----------
   Các luật này chỉ chạy khi <html> có data-menh — giao diện Mặc định/Cơ bản giữ nguyên
   từng pixel như cũ. Nhuộm CÓ CHỦ ĐÍCH: icon điều hướng, nút tròn đầu trang, ô trống,
   ô số liệu thương hiệu... nhưng KHÔNG đụng màu ý nghĩa (đỏ tiền phải trả, xanh lá
   tiền về, màu trạng thái đơn) — chúng mang thông tin, đổi theo mệnh là đánh lừa mắt. */

/* Icon trên menu ngang ăn theo màu mệnh — mục chưa chọn nhạt hơn một nấc cho khỏi chói */
[data-menh] .topnav__link .ico { color: var(--primary); opacity: .72; }
[data-menh] .topnav__link:hover .ico { color: var(--primary); opacity: 1; }
[data-menh] .topnav__link.is-active .ico,
[data-menh] .topnav__group.is-active > .topnav__link .ico { opacity: 1; }

/* Nút tròn đầu trang (sáng/tối, bảng màu, chuông) + nút Trang chủ ở vệt đường dẫn */
[data-menh] .icon-btn { color: var(--primary-dark); }
[data-menh] .icon-btn:hover { background: var(--primary-soft); }
[data-menh] .crumb__home { color: var(--primary); }

/* Hình khối nền nhạt: ô trống "chưa có dữ liệu", ô số liệu thương hiệu */
[data-menh] .empty__icon { background: var(--primary-soft); color: var(--primary); }
[data-menh] .tile--teal { background: var(--primary-soft); }

/* Menu xổ: mục đang rê chuột ăn nhẹ theo mệnh thay vì xám trung tính */
[data-menh] .menu__item:not(.menu__item--nguyhiem):not(.menu__item--danger):hover { background: var(--primary-soft); }

/* ============================================================
   FORM NHIỀU KHỐI (trang Thêm/Sửa sản phẩm...) — mỗi nhóm thông tin một thẻ
   card riêng, xếp dọc. Trước đây cả form là một lưới phẳng 20+ ô lẫn lộn.
   ============================================================ */
.form-khoi { display: flex; flex-direction: column; gap: 16px; }

/* Dấu * đỏ cạnh nhãn ô bắt buộc — nhìn lướt là biết ô nào không được bỏ trống. */
.batbuoc { color: var(--danger); font-weight: 700; }

/* Dòng giải thích nhỏ dưới ô nhập — khác field__hint (chỗ đọc tiền thành chữ):
   ghi chú luôn hiện và màu lặng, không đổi màu theo nội dung. */
.field__ghichu { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* Thanh nút Lưu DÍNH ĐÁY màn hình khi form dài — cuộn tới đâu nút Lưu cũng
   trong tầm bấm, không phải cuộn xuống tận cùng. Nền mờ để thấy nội dung sau. */
.form-actions--dinh {
    position: sticky; bottom: 0; z-index: 20;
    margin-top: 16px;
    padding: 12px 18px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
}

/* Chip từ khóa trong ô soạn thảo mẫu in — nền xám nguyên khối như ảnh mẫu.
   contenteditable=false nên bấm xóa là bay cả từ khóa, không đứt được nửa chừng.
   Màu cứng (không theo biến giao diện): khung soạn thảo mô phỏng tờ giấy trắng. */
.tk-chip {
    background: #e8eaed;
    border-radius: 3px;
    padding: 1px 4px;
    font-weight: 600;
    white-space: nowrap;
}

/* Bảng từ khóa chi tiết dưới trang Thiết kế mẫu in. */
.mauin-tukhoa { margin-top: 16px; }
.mauin-tukhoa__bang { font-size: 13px; }
.mauin-tukhoa__bang td { padding: 8px 12px; }
.mauin-tukhoa__bang th { padding: 10px 12px; }
.mauin-tukhoa__nhom td {
    background: var(--surface-2);
    font-weight: 700; color: var(--text);
}
.mauin-tukhoa__ma {
    background: var(--primary-soft); color: var(--primary-dark);
    border: none; border-radius: 4px; padding: 2px 7px;
    font: inherit; font-weight: 600; cursor: pointer;
}
.mauin-tukhoa__ma:hover { background: var(--primary); color: #fff; }
.mauin-tukhoa__chuaco td { opacity: .6; }

/* Khối Thông tin doanh nghiệp ở Cài đặt chung — chế độ xem/sửa. */
.dn-xem .setting-info__row { padding: 5px 0; font-size: 14px; }
.setting-logo--trong {
    display: grid; place-items: center; height: 64px;
    border: 1px dashed var(--line); border-radius: var(--radius-sm);
    color: var(--text-muted); font-size: 12.5px;
}

/* ============================================================
   GÓI DỊCH VỤ — 3 thẻ bảng giá (trang Hạn sử dụng) theo ảnh tham chiếu:
   giá gạch, huy hiệu "Mua từ 2 năm còn", giá to màu thẻ, ô mô tả đối
   tượng nền nhạt, danh sách tính năng có nhóm, nút đăng ký bản lớn.
   Mỗi thẻ một tông (cam / tím / đỏ) qua biến --goi-mau.
   ============================================================ */
.goi-luoi {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px; padding: 18px;
}
.goi-the {
    --goi-mau: #e8590c; --goi-nhat: #fff0e6;
    position: relative;
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px 20px 20px; text-align: center;
    display: flex; flex-direction: column;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.goi-the--cam { --goi-mau: #e8590c; --goi-nhat: #fff0e6; }
.goi-the--tim { --goi-mau: #9c36b5; --goi-nhat: #f9edfc; }
.goi-the--do  { --goi-mau: #c92a2a; --goi-nhat: #fdecec; }
.goi-the--dangdung { border-color: var(--goi-mau); box-shadow: 0 0 0 2px var(--goi-mau) inset; }
.goi-the__dai {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--goi-mau); color: #fff; font-size: 11.5px; font-weight: 700;
    padding: 2px 12px; border-radius: 999px; white-space: nowrap;
}
.goi-the__ten { margin: 0 0 8px; font-size: 24px; font-weight: 800; color: var(--goi-mau); }
.goi-the__giagoc { margin: 0; font-size: 15px; color: var(--text-muted); text-decoration: line-through; }
.goi-the__giagoc sup, .goi-the__gia sup { font-size: .55em; text-decoration: inherit; }
.goi-the__nhan {
    display: inline-block; background: var(--goi-mau); color: #fff;
    font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 4px; margin: 2px 0;
}
.goi-the__gia { margin: 2px 0 0; font-size: 32px; font-weight: 800; color: var(--goi-mau); }
.goi-the__donvi { margin: 0; font-size: 13px; color: var(--text-2); }
.goi-the__nguoidung { margin: 2px 0 12px; font-size: 14.5px; }
.goi-the__doituong {
    background: var(--goi-nhat); color: var(--text);
    border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13.5px; margin-bottom: 10px;
}
.goi-the__mota { margin: 0 0 8px; font-size: 13.5px; }
.goi-the__tinhnang { text-align: left; flex: 1; }
.goi-the__nhom { margin: 10px 0 4px; font-size: 13px; font-weight: 700; color: var(--goi-mau); }
.goi-the__muc {
    margin: 0 0 6px; font-size: 13px; color: var(--text-2);
    display: flex; gap: 7px; align-items: flex-start; line-height: 1.45;
}
.goi-the__muc .ico { color: var(--goi-mau); flex: none; margin-top: 1.5px; }
.goi-the__nut {
    margin-top: 14px; width: 100%;
    background: var(--goi-mau); color: #fff; border: none; border-radius: var(--radius-sm);
    padding: 12px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.goi-the__nut:hover { filter: brightness(.92); }
[data-theme="dark"] .goi-the__doituong { background: color-mix(in srgb, var(--goi-mau) 18%, var(--surface)); }

.goi-donds { padding: 0 18px 18px; }
.goi-donds__tieude { font-size: 15px; margin: 6px 0 10px; }
.pill--amber { background: var(--warn-bg); color: var(--warn-strong); }

/* ============ TRANG GỬI ZALO ============ */
.zalo-trang { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .zalo-trang { grid-template-columns: 1fr; } }
.zalo-noi { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Cột mục con — mục chưa làm để MỜ và không bấm được (con trỏ không đổi thành bàn tay). */
.zalo-menu {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-md); padding: 8px;
}
.zalo-menu__muc {
    display: block; padding: 10px 12px; border-radius: var(--radius-sm);
    font-size: 14px; color: var(--text-1); text-decoration: none;
}
.zalo-menu__muc.is-active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.zalo-menu__muc--mo { color: var(--text-muted); opacity: .55; cursor: default; }

.zalo-luuy {
    background: var(--primary-soft); border: 1px solid var(--line-soft);
    border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 14px;
}
.zalo-luuy p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.6; }
.zalo-luuy p:last-child { margin-bottom: 0; }

.zalo-trong { text-align: center; padding: 26px 16px; }
.zalo-trong .ico { width: 40px; height: 40px; color: var(--text-muted); opacity: .6; }
.zalo-trong p { margin: 8px 0 0; font-size: 14px; }

.zalo-oa { display: flex; align-items: center; gap: 10px; }
.zalo-oa__anh { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.zalo-oa__anh--chu {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; font-size: 16px;
}

.zalo-hotro {
    display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    border-top: 1px solid var(--line); font-size: 13.5px;
}

.zalo-h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }

/* --- Khối giới thiệu ZBS --- */
.zalo-gt { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; overflow: hidden; }
@media (max-width: 780px) { .zalo-gt { grid-template-columns: 1fr; } }
.zalo-gt__chu { padding: 20px; }
.zalo-gt__ten { margin: 0; font-size: 17px; font-weight: 700; }
.zalo-gt__dv { margin: 2px 0 12px; font-size: 16px; font-weight: 700; color: var(--primary); }
.zalo-gt__mo, .zalo-gt__hoi { font-size: 14px; line-height: 1.6; margin: 0 0 10px; }
.zalo-gt__hoi { font-weight: 600; }
.zalo-gt__ds { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.9; }
.zalo-gt__anh, .zalo-loi__anh, .zalo-hai__anh {
    display: flex; align-items: center; justify-content: center;
    padding: 16px; background: var(--surface-2);
}
.zalo-gt__anh svg, .zalo-loi__anh svg { max-height: 300px; width: 100%; }
.zalo-hai__anh svg { width: 100%; }

/* Bảng màu dùng chung cho MỌI hình tự vẽ — đổi một chỗ là cả trang đổi theo, và tự hợp cả hai
   giao diện sáng/tối vì đều lấy từ token. */
.zv-may   { fill: var(--text-1); opacity: .9; }
.zv-man   { fill: var(--surface); }
.zv-loa   { fill: var(--surface-2); }
.zv-bia   { fill: var(--primary); }
.zv-dau, .zv-tin, .zv-the { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.zv-the--sau { fill: var(--surface); }
.zv-vach  { fill: var(--text-1); opacity: .75; }
.zv-vach--nhat { opacity: .3; }
.zv-nut   { fill: var(--primary); }
.zv-sao   { fill: var(--warn); }
.zv-cham  { fill: var(--primary); opacity: .16; }
.zv-cham--nho { opacity: .28; }
.zv-avatar { fill: var(--primary-soft); stroke: var(--line); stroke-width: 1; }
.zv-o     { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.zv-vien  { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; opacity: .55; }
.zv-ghim  { fill: var(--primary); }
.zv-song  { fill: var(--primary); opacity: .14; }
.zv-cot   { fill: var(--primary); opacity: .45; }
.zv-cot--cao { opacity: .8; }
.zv-bong  { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.zv-bong--khach { fill: var(--primary-soft); stroke: none; }
.zv-nhan  { font-size: 10px; fill: var(--text-muted); font-family: inherit; }

/* --- Ba ô ưu điểm --- */
.zalo-uu__dau { padding-bottom: 0; }
.zalo-uu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px 18px 20px; }
@media (max-width: 900px) { .zalo-uu { grid-template-columns: 1fr; } }
.zalo-uu__o h4 { margin: 0 0 10px; font-size: 14px; font-weight: 700; text-align: center; min-height: 40px; }
.zalo-uu__hinh {
    background: var(--surface-2); border: 1px solid var(--line-soft);
    border-radius: var(--radius-md); padding: 12px;
}
.zalo-uu__hinh svg { width: 100%; display: block; }
.zalo-uu__bang { background: var(--primary); color: #fff; border-radius: var(--radius-md); padding: 14px; }
.zalo-uu__bangdau { font-weight: 700; margin-bottom: 8px; }
.zalo-uu__bang ul { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.75; }
.zalo-uu__bang strong { color: #fff; }
.zalo-uu__ghi { margin: 10px 0 0; font-size: 11.5px; opacity: .85; }

/* --- Lợi ích OA --- */
.zalo-loi { display: grid; grid-template-columns: 1.4fr 1fr; overflow: hidden; }
@media (max-width: 780px) { .zalo-loi { grid-template-columns: 1fr; } }
.zalo-loi__chu { padding: 20px; }
.zalo-loi__ds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zalo-loi__ds li {
    position: relative; padding: 11px 12px 11px 34px;
    background: var(--surface-2); border-radius: var(--radius-sm); font-size: 14px;
}
.zalo-loi__ds li::before {
    content: "✓"; position: absolute; left: 12px; top: 11px;
    color: var(--ok-strong); font-weight: 800;
}

/* --- Tương tác hai chiều --- */
.zalo-hai { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
@media (max-width: 780px) { .zalo-hai { grid-template-columns: 1fr; } }
.zalo-hai__chu { padding: 20px; }
.zalo-hai__chu p { font-size: 14px; line-height: 1.65; margin: 0; }

/* --- Năm dạng tin nhắn --- */
.zalo-dang { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 0 18px 20px; }
@media (max-width: 1100px) { .zalo-dang { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .zalo-dang { grid-template-columns: 1fr; } }
.zalo-dang__ten { text-align: center; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.zalo-dang__the {
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius-md); padding: 12px; height: 100%;
    display: flex; flex-direction: column; gap: 8px;
}
.zalo-dang__logo { font-size: 15px; font-weight: 800; color: var(--primary); line-height: 1.2; }
.zalo-dang__logo span { display: block; font-size: 10px; font-weight: 600; color: var(--text-muted); }
.zalo-dang__mo { font-size: 12.5px; line-height: 1.5; flex: 1; }
.zalo-dang__nut {
    text-align: center; padding: 7px; border-radius: var(--radius-sm);
    background: var(--primary); color: #fff; font-size: 12px; font-weight: 600;
}

/* --- Kịch bản CSKH --- */
.zalo-kb__chu { padding: 18px 18px 0; }
.zalo-kb__buoc {
    list-style: none; margin: 0; padding: 16px 18px 20px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 900px) { .zalo-kb__buoc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .zalo-kb__buoc { grid-template-columns: 1fr; } }
.zalo-kb__buoc li {
    display: flex; gap: 10px; padding: 12px;
    background: var(--surface-2); border-radius: var(--radius-md);
}
.zalo-kb__so {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-weight: 700; font-size: 13px;
}
.zalo-kb__buoc strong { font-size: 13.5px; }
.zalo-kb__buoc p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }

/* --- Hộp kết nối --- */
.zl-qr { text-align: center; }
/* Nền TRẮNG cố định cho QR: máy quét cần nền sáng, để theo giao diện tối là không quét nổi. */
.zl-qr svg {
    background: #fff; padding: 10px; border-radius: var(--radius-md);
    border: 1px solid var(--line);
}
.zl-huong { font-size: 13.5px; line-height: 1.6; margin: 14px 0; text-align: center; }
.zl-nho { font-size: 12px; color: var(--text-muted); margin: 10px 0 0; text-align: center; }

/* ============ XÁC THỰC HAI BƯỚC (2FA) ============ */
.huongdan-2fa { margin: 0 0 16px; padding-left: 20px; line-height: 1.75; font-size: 14px; }
.qr-2fa { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.qr-2fa__anh {
    flex: none; padding: 10px; background: #fff;   /* nền trắng CỐ ĐỊNH: máy quét QR cần nền sáng,
                                                      để theo giao diện tối là không quét nổi */
    border: 1px solid var(--line); border-radius: var(--radius-md);
}
.qr-2fa__tay { flex: 1 1 220px; min-width: 0; }
.qr-2fa__khoa {
    display: block; padding: 8px 10px; font-size: 14px; letter-spacing: 1.5px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
    overflow-wrap: anywhere; user-select: all;
}
/* Mã cứu hộ: lưới đều để chép ra giấy không sót dòng nào. */
.cuuho { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cuuho__ma {
    padding: 8px 10px; text-align: center; font-size: 15px; letter-spacing: 1.5px; font-weight: 600;
    background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius-sm);
    user-select: all;
}

/* ============ CỘT GHI CHÚ + HỘP SỬA GHI CHÚ ============ */

.ghichu-o { position: relative; vertical-align: middle; min-width: 120px; max-width: 190px; }
.ghichu-o__noi {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    /* Chừa chỗ cho nút bút chì góc trên phải, không thì chữ dài chui xuống dưới nút. */
    padding-right: 20px;
    font-size: 12.5px; line-height: 1.45; text-align: center;
    overflow-wrap: anywhere;
}
/* Ghi chú SẼ IN cho khách: chữ đậm, màu chữ thường — đây là thứ ra giấy. */
.ghichu-o__in { font-weight: 600; }
/* Ghi chú nội bộ: xám và nghiêng — liếc là biết "cái này khách không thấy". */
.ghichu-o__nb { color: var(--text-muted); font-style: italic; }
/* Đường đứt ngăn hai loại, đúng như phần mềm tham chiếu. */
.ghichu-o__ngan { width: 76%; border-top: 1px dashed var(--line); }

/* Bút chì: ẩn cho tới khi rê chuột vào DÒNG, hoặc khi chính nó được chọn bằng bàn phím.
   Dùng opacity chứ không display:none để nút vẫn nằm trong luồng Tab — người dùng bàn phím
   không bao giờ tìm thấy một nút chỉ tồn tại lúc có con trỏ chuột. */
.ghichu-o__sua {
    position: absolute; top: 6px; right: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text-muted);
    cursor: pointer; opacity: 0; transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
tr:hover .ghichu-o__sua,
.ghichu-o__sua:focus-visible { opacity: 1; }
.ghichu-o__sua:hover { color: var(--primary); border-color: var(--primary); }

/* --- Hộp sửa ghi chú --- */
.gc__ma { font-size: 14px; font-weight: 600; color: var(--text-muted); margin-left: 6px; }
/* Mỗi ô một dải màu bên trái: xanh = ra giấy cho khách, hổ phách = chỉ người trong nhà đọc.
   Nhầm ô là in ghi chú nội bộ lên phiếu đưa tận tay khách. */
.gc__o { border-left: 3px solid transparent; padding-left: 11px; margin-bottom: 16px; }
.gc__o--in { border-left-color: var(--primary); }
.gc__o--nb { border-left-color: var(--warn, #f59e0b); }
.gc__o .field__label { display: flex; align-items: center; gap: 6px; }
.gc__o textarea { resize: vertical; min-height: 76px; }
.gc__chan { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 4px; }
.gc__dem { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex: none; }

.gc__loi {
    padding: 9px 11px; border-radius: var(--radius-sm);
    /* --bad-bg / --bad-strong có định nghĩa ở CẢ hai giao diện (sáng và tối); --danger-bg thì
       không tồn tại, viết nhầm là hộp lỗi thành trong suốt đúng lúc cần đọc nhất. */
    background: var(--bad-bg); color: var(--bad-strong);
    font-size: 13px;
}
.gc__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gc__nut { display: flex; gap: 8px; }
.gc__meo { font-size: 12px; color: var(--text-muted); }
.gc__meo kbd {
    font: inherit; padding: 1px 5px; border: 1px solid var(--line);
    border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2);
}

/* ============ HỘP XEM NHANH ĐƠN (bấm SĐT ở danh sách đơn) ============ */

/* SĐT trong bảng là nút bấm nhưng phải TRÔNG như liên kết — nút xám có viền ở giữa ô dữ liệu
   làm bảng rối, mà bỏ hẳn dấu hiệu bấm được thì không ai biết là bấm được. */
button.bang-don__sdt {
    padding: 0; border: none; background: none;
    font: inherit; color: var(--link, #1A6FD4);
    cursor: pointer; text-align: left;
}
button.bang-don__sdt:hover { text-decoration: underline; }

.ctd__nut { display: flex; align-items: center; gap: 10px; }
.ctd__dau {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.ctd__ma { font-size: 17px; font-weight: 700; margin-right: 9px; }
.ctd__ngay { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Hai cột trên màn hình rộng; một cột khi hẹp — hộp này hay mở trên máy bán hàng màn nhỏ. */
.ctd__luoi { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 860px) { .ctd__luoi { grid-template-columns: 1fr; } }
.ctd__cot { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.ctd__khoi { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 11px 13px; }
.ctd__tieude {
    margin: 0 0 9px; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .3px; color: var(--text-2);
    display: flex; align-items: center; gap: 8px;
}

.ctd__kh { display: flex; gap: 14px; flex-wrap: wrap; }
.ctd__khten { font-size: 15px; font-weight: 600; }
.ctd__khdc { flex: 1 1 220px; min-width: 0; font-size: 13.5px; line-height: 1.5; }

.ctd__bang { font-size: 13px; }
.ctd__bang th, .ctd__bang td { padding: 6px 8px; }

/* Danh sách nhãn–giá trị: nhãn trái xám, giá trị phải đậm — đọc theo cột, không phải theo dòng. */
.ctd__dong { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: 13.5px; }
.ctd__dong dt { color: var(--text-muted); white-space: nowrap; }
.ctd__dong dd { margin: 0; text-align: right; }
.ctd__nhanmanh { font-weight: 700; color: var(--text-1) !important; }
.ctd__thu { font-size: 16px; font-weight: 800; color: var(--ok-strong, #15803d); }

.ctd__ghichu {
    margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-soft);
    font-size: 13px; line-height: 1.55; display: flex; flex-direction: column; gap: 4px;
}

/* Hộp sao chép mẫu in sang loại khác */
.mauin__chepnguon { margin: 0 0 12px; font-size: 14px; line-height: 1.55; }
.mauin__chepnhac {
    margin-top: 12px; padding: 9px 11px; font-size: 12.5px; line-height: 1.55;
    background: var(--warn-bg); border: 1px solid var(--warn); border-radius: var(--radius-sm);
}

/* Hộp đăng ký + hộp thanh toán */

/* Bộ chọn cửa hàng: danh sách tự cuộn khi chuỗi có nhiều cửa hàng, nhưng KHÔNG cuộn khi chỉ
   vài dòng — max-height chứ không phải height, để cửa hàng lẻ không nằm giữa một khung trống. */
.dk-kho {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    max-height: 240px; overflow-y: auto;
}
.dk-kho__dong {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 11px; font-size: 14px; cursor: pointer;
    border-bottom: 1px solid var(--line-soft);
}
.dk-kho__dong:last-child { border-bottom: none; }
.dk-kho__dong:hover { background: var(--hover-bg, rgba(0, 0, 0, .025)); }
.dk-kho__dong--tatca {
    /* Dính lại khi cuộn: chuỗi 20 cửa hàng thì "Chọn tất cả" phải luôn trong tầm tay. */
    position: sticky; top: 0; z-index: 1;
    background: var(--panel-soft, var(--surface-alt, #f6f7f9));
    font-weight: 600;
}
.dk-kho__dong input[type="checkbox"] { width: 16px; height: 16px; flex: none; cursor: pointer; }
.dk-kho__ten { flex: 1 1 auto; min-width: 0; }
.dk-kho__ten .mono { font-size: 12px; margin-left: 5px; }
.dk-kho__han { flex: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dk-kho__han--gap { color: var(--warn-strong); font-weight: 600; }
/* ĐÃ THỬ và BỎ: media query xếp chồng tên/hạn ở màn hình hẹp. Đo thật thì tệ hơn ở MỌI bề rộng
   (cao cố định 94px, so với 37px lúc vừa một hàng và 77px lúc tên tự xuống dòng ở 340px).
   Để flex tự xuống dòng là đủ — hai bên không bao giờ đè lên nhau. */

.dk-tien { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin: 10px 0 6px; }
.dk-tien__dong { display: flex; justify-content: space-between; padding: 3px 0; font-size: 14px; }
.dk-tien__tong { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 7px; font-size: 15px; }
.tt-luuy {
    background: var(--warn-bg); border: 1px solid var(--warn);
    border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; line-height: 1.55;
}
.tt-ma {
    text-align: center; font-size: 26px; font-weight: 800; letter-spacing: 2px;
    background: var(--primary-soft); color: var(--primary-dark);
    border-radius: var(--radius-sm); padding: 10px; margin: 12px 0;
    user-select: all;
}
.tt-dong { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; border-bottom: 1px solid var(--line-soft); }
/* Danh sách cửa hàng xuống dòng — canh phải để thẳng cột với các dòng số bên trên. */
.tt-dong--kho strong { text-align: right; font-weight: 600; line-height: 1.6; }
.tt-dong:last-of-type { border-bottom: none; }
.tt-qr { text-align: center; margin-top: 12px; }
.tt-qr svg { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; background: #fff; }

/* ============================================================
   BÁO CÁO DOANH THU (theo thời gian / theo cửa hàng)
   Mọi màu lấy từ token nên tự hợp cả 4 bố cục và 3 tông giao diện đã có —
   không đóng cứng mã màu nào ngoài chỗ bắt buộc phải nổi bật.
   ============================================================ */

/* ---- Menu Báo cáo nhiều cột ---- */
.topnav__panel--cot { padding: 12px 6px; }
.bc-menu { display: flex; gap: 4px; }
.bc-menu__cot { display: flex; flex-direction: column; min-width: 210px; }
.bc-menu__cot + .bc-menu__cot { border-left: 1px solid var(--line-soft); padding-left: 6px; }
.bc-menu__dau {
    display: flex; align-items: center; gap: 7px;
    margin: 0 0 4px; padding: 6px 11px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted);
}
.bc-menu__dau .ico { color: var(--primary); }
.bc-menu__dau--sau { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 12px; }

/* ---- Thanh lọc dùng chung ---- */
.bc-loc { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.bc-loc__o { display: flex; flex-direction: column; gap: 5px; min-width: 148px; }
.bc-loc__nhan { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.bc-loc__nut { align-self: flex-end; }

/* ---- Biểu đồ cột + đường ---- */
.bc-bieudo { padding-bottom: 10px; }
.bc-svg { width: 100%; height: 260px; display: block; }
.bc-luoi { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bc-truc { stroke: var(--line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bc-cot { fill: var(--primary); opacity: .85; }
.bc-cot:hover { opacity: 1; }
/* preserveAspectRatio="none" kéo giãn trục X, nên nét vẽ phải khai non-scaling-stroke,
   không thì đường lợi nhuận mảnh dần khi cửa sổ rộng ra. */
.bc-duong { fill: none; stroke: var(--warn-strong); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bc-diem { fill: var(--warn-strong); stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.bc-nhanx {
    display: flex; margin-top: 2px;
    font-size: 11px; color: var(--text-muted);
}
/* overflow: visible chứ KHÔNG hidden. Mỗi ô nhãn rộng đúng bằng một cột (22px khi xem 60 ngày)
   trong khi "01/07" cần 28px — hidden thì mọi nhãn đều cụt. View đã thưa nhãn ra (tối đa 20 mốc)
   nên các ô hai bên đều TRỐNG, chữ tràn sang đó không đè lên gì cả. */
.bc-nhanx span { flex: 1 1 0; min-width: 0; text-align: center; overflow: visible; white-space: nowrap; }
/* Chừa hai bên để nhãn đầu và nhãn cuối không tràn ra ngoài thẻ. */
.bc-nhanx { padding: 0 16px; }

.bc-chugiai { display: flex; gap: 20px; justify-content: center; margin-top: 12px; font-size: 13px; color: var(--text-2); }
.bc-chugiai span { display: flex; align-items: center; gap: 7px; }
.bc-o { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.bc-o--cot { background: var(--primary); }
.bc-o--duong { background: var(--warn-strong); }

/* ---- Thanh nút Xuất / In ---- */
.bc-thanhcongcu { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.bc-thanhcongcu .btn.is-tat { opacity: .45; pointer-events: none; }

/* ---- Bảng số liệu ---- */
.bc-bang { font-variant-numeric: tabular-nums; }
.bc-bang th { white-space: nowrap; }
.bc-bang .center { text-align: center; }
.bc-sohieu td {
    font-size: 11px; font-weight: 600; color: var(--text-faint);
    padding-top: 0; padding-bottom: 6px; white-space: nowrap;
    background: var(--surface-2);
}
/* Ba dòng tóm tắt nằm NGAY DƯỚI tiêu đề (không phải cuối bảng): bảng dài vài chục dòng
   thì con số quan trọng nhất phải thấy ngay, không bắt cuộn xuống đáy mới đọc được. */
.bc-tong td { background: var(--surface-2); font-weight: 700; color: var(--text); }
.bc-tong:last-of-type td { border-bottom: 2px solid var(--grid-line, var(--line)); }
/* td.bc-dt chứ không phải .bc-dt: ".bc-tong td" ở trên có độ ưu tiên (0,1,1) nên nó thắng
   ".bc-dt" (0,1,0) và cột Doanh thu trên chính dòng Tổng lại mất màu — đúng ô đáng nổi nhất. */
td.bc-dt { color: var(--primary-dark); font-weight: 700; }
[data-theme="dark"] td.bc-dt { color: var(--primary); }
.bc-so-don { color: var(--text-2); }

/* ---- Hai biểu đồ tròn cạnh nhau ---- */
.bc-tron { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bc-tron > .card { margin: 0; }
.bc-tron__o { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bc-tron__svg { width: 190px; height: 190px; flex: none; }
.bc-tron__chu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bc-tron__chu li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }

/* Sáu màu lát bánh, đều là token giao diện. Lát tô bằng fill (SVG) còn ô chú giải tô bằng
   background (HTML) — khai cả hai để một lớp dùng được ở cả hai chỗ. */
.bc-lat { stroke: var(--surface); stroke-width: 1.5; }
.bc-lat--0 { fill: var(--primary);      background: var(--primary); }
.bc-lat--1 { fill: var(--info);         background: var(--info); }
.bc-lat--2 { fill: var(--warn);         background: var(--warn); }
.bc-lat--3 { fill: var(--violet);       background: var(--violet); }
.bc-lat--4 { fill: var(--ok);           background: var(--ok); }
.bc-lat--5 { fill: var(--orange);       background: var(--orange); }

/* ---- Khối ghi chú công thức ---- */
.bc-ghichu .card__body { display: flex; gap: 13px; align-items: flex-start; }
.bc-ghichu__den .ico { color: var(--info); width: 20px; height: 20px; }
.bc-ghichu p { margin: 0 0 5px; font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.bc-ghichu p:last-child { margin-bottom: 0; }
.bc-ghichu p.muted { font-size: 12.5px; }

@media (max-width: 900px) {
    .bc-tron { grid-template-columns: 1fr; }
    .bc-menu { flex-direction: column; }
    .bc-menu__cot + .bc-menu__cot { border-left: none; padding-left: 0; border-top: 1px solid var(--line-soft); padding-top: 6px; }
}

/* Khi in: bỏ thanh lọc và thanh nút, giữ lại biểu đồ + bảng. */
@media print {
    .bc-loc, .bc-thanhcongcu { display: none !important; }
}

/* ---- Báo cáo theo nhân viên: thanh nền trong ô số ---- */
/* Thanh vẽ bằng linear-gradient trên CHÍNH ô, không thêm thẻ con: bảng này đã 22 cột, nhét thêm
   một <span> mỗi ô là hàng nghìn thẻ thừa trên một trang. Bề rộng truyền qua biến --ty.
   Dùng token nền NHẠT (--warn-bg...) chứ không phải màu đậm: chữ số nằm đè lên thanh, tô đậm là
   không đọc được. Không dùng lớp phủ ::before — chữ trong ô là text node trần, không z-index
   lên trên pseudo-element được, phủ là mất chữ. */
.bc-o-thanh { background-repeat: no-repeat; background-position: left center; }
.bc-o-thanh--vang { background-image: linear-gradient(var(--warn-bg), var(--warn-bg)); background-size: var(--ty, 0) 64%; }
.bc-o-thanh--xanh { background-image: linear-gradient(var(--info-bg), var(--info-bg)); background-size: var(--ty, 0) 64%; }
.bc-o-thanh--do   { background-image: linear-gradient(var(--bad-bg),  var(--bad-bg));  background-size: var(--ty, 0) 64%; }
.bc-o-thanh--luc  { background-image: linear-gradient(var(--ok-bg),   var(--ok-bg));   background-size: var(--ty, 0) 64%; }

/* Khối chi phí tách khỏi các nhóm trạng thái bằng nền nhạt — bảng 22 cột cần mốc nghỉ mắt. */
.bc-nv__cp { background: var(--surface-2); }
/* Doanh thu thuần ÂM: đỏ cố định, KHÔNG dùng --danger (token đó nhạt đi ở chế độ tối). */
.bc-am { color: #dc2626; font-weight: 700; }
[data-theme="dark"] .bc-am { color: #f87171; }
.bc-nv th { font-size: 12.5px; }
.bc-nv td { font-size: 13px; white-space: nowrap; }

/* ---- Trang tạo đơn: khối tổng kết (tiền hàng / chiết khấu / giảm giá / VAT) ---- */
.tk-tong { max-width: 420px; margin-left: auto; padding: 12px 4px 4px; }
.tk-tong__dong {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 6px 0; font-size: 14px; color: var(--text-2);
}
.tk-tong__dong label { color: var(--text-2); }
.tk-tru { color: var(--bad-strong); }
.tk-tong__tong {
    border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px;
    font-size: 15px; color: var(--text);
}
.tk-tong__tong .total { font-size: 20px; font-weight: 800; color: var(--primary-dark); }
[data-theme="dark"] .tk-tong__tong .total { color: var(--primary); }
.tk-tong__vat { text-align: right; font-size: 12.5px; color: var(--text-muted); padding-top: 2px; }
.tk-nhap { display: inline-flex; }

/* ============ HỘP THÔNG BÁO BỊ KHÓA (trang Đăng nhập) ============
   Hiện khi Super Admin khóa tài khoản / doanh nghiệp / cửa hàng và người dùng bị đá về đây.
   CỐ Ý dựng bằng HTML hiện SẴN chứ không chờ JavaScript mở: trang Đăng nhập phải nói được lý do
   kể cả khi JS hỏng — đây là lúc người dùng hoang mang nhất, im lặng là tệ nhất.
   Nền tối phủ toàn màn hình để không thể lướt qua, khác hẳn một dòng chữ đỏ nhỏ. */
.khoa-lop {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}
.khoa-lop[hidden] { display: none; }

.khoa-hop {
    width: 100%; max-width: 440px;
    background: var(--surface);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.khoa-hop__dau {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 20px;
    /* Đỏ CỐ ĐỊNH, không theo token --danger: ở giao diện tối token đó nhạt đi cho hợp nền, mà chỗ
       này cần ngược lại — đây là tin xấu phải đọc ra ngay, đậm như nhau ở cả hai giao diện. */
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
}
.khoa-hop__bieutuong {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none;
    border-radius: 50%;
    background: #dc2626; color: #fff;
}
.khoa-hop__tieude { margin: 0; font-size: 17px; font-weight: 700; color: #991b1b; }

.khoa-hop__than { padding: 18px 20px; }
/* Câu do máy chủ dựng (nói đúng cửa hàng nào, khóa hay hết hạn ngày nào) — đậm hơn phần giải thích
   chung, vì đó mới là thông tin riêng của người đang đọc. */
.khoa-hop__ly { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--text-1); line-height: 1.5; }
.khoa-hop__giai { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.6; }

.khoa-hop__lienhe {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}
.khoa-hop__nhan {
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 8px;
}
.khoa-hop__ds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.khoa-hop__ds li { display: flex; align-items: baseline; gap: 10px; }
.khoa-hop__kieu { min-width: 54px; font-size: 12.5px; color: var(--text-muted); }
.khoa-hop__gt { font-size: 15px; font-weight: 700; color: var(--primary); text-decoration: none; }
.khoa-hop__gt:hover { text-decoration: underline; }

.khoa-hop__chan { padding: 0 20px 18px; display: flex; justify-content: flex-end; }

/* ============ SỔ KẾ TOÁN HỘ KINH DOANH (Thông tư 152/2025/TT-BTC) ============ */
/* Đầu sổ — thông tin hộ kinh doanh, in ra giấy là phần trên cùng của mọi quyển sổ. */
.so-dau {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
    background: var(--line-soft);
    border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 1000px) { .so-dau { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .so-dau { grid-template-columns: 1fr; } }
.so-dau__o { display: flex; flex-direction: column; gap: 3px; padding: 11px 18px; background: var(--surface); }
.so-dau__nhan { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.so-dau__thieu { font-size: 12.5px; font-style: italic; color: var(--warn-strong, #b45309); }

/* Nhóm đang áp dụng — khối này quyết định lập bao nhiêu quyển sổ nên phải nổi bật. */
.so-nhom { padding: 12px 18px 14px; }
.so-nhom__ten { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 15px; }
.so-nhom__tc { margin: 6px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.6; }
.so-nhom__cc { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.6; }

.so-quyen__ma {
    display: inline-block; margin-right: 7px; padding: 1px 7px;
    border-radius: 5px; background: var(--primary-soft); color: var(--primary-dark);
    font-size: 12.5px; font-weight: 700;
}
/* Dòng "Cộng cả năm" — dòng bắt buộc của sổ kế toán, phải đọc ra ngay. */
.so-cong td { background: var(--surface-2); border-top: 2px solid var(--line); }
.so-ketluan {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 18px; border-top: 1px solid var(--line-soft); background: var(--primary-soft);
}
.so-ketluan strong { font-size: 18px; font-variant-numeric: tabular-nums; }

/* ---- Hàng công tắc rõ ràng (trang Combo) ----
   Bản cũ dùng <label class="switch"> mà thiếu <span class="switch__track">, nên luật
   `.switch input { opacity:0 }` ẩn hẳn ô tích và người dùng không thấy nút đâu mà bấm. */
.ctac {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--surface); cursor: pointer;
}
.ctac:hover { border-color: var(--primary); }
.ctac__chu { display: flex; flex-direction: column; gap: 2px; }
.ctac__ten { font-size: 13.5px; font-weight: 600; }
.ctac__mo { font-size: 11.5px; color: var(--text-muted); }

/* ---- Dòng ghi trên hoá đơn VAT (trang Combo) ---- */
.hd {
    margin-top: 14px;
    border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--surface); overflow: hidden;
}
.hd__dau {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2);
}
.hd__tieude { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; }
.hd__tieude .ico { color: var(--primary); }
.hd__bang { margin: 0; }
.hd__gia { max-width: 128px; padding: 5px 8px; font-size: 13px; }
/* Ô đã chỉnh tay: viền màu để phân biệt với ô phần mềm tự tính. */
.hd__gia--sua { border-color: var(--primary); background: var(--primary-soft); font-weight: 600; }
.hd__cong td { background: var(--surface-2); border-top: 2px solid var(--line); }
.hd__lech {
    margin: 0; padding: 10px 14px;
    border-top: 1px solid var(--line-soft);
    background: var(--warn-soft, #fffbeb); color: var(--warn-strong, #92400e);
    font-size: 12.5px; line-height: 1.6;
}
.hd__ghi { margin: 0; padding: 10px 14px; font-size: 11.5px; color: var(--text-faint); line-height: 1.6; }

/* ============ CÀI ĐẶT SÀN TMĐT ============ */
.san-luoi {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px; padding: 0 18px 18px;
}
.san-the {
    display: flex; flex-direction: column; gap: 7px;
    padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--surface);
}
.san-the--danoi { border-color: var(--primary); background: var(--primary-soft); }
.san-the__dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.san-the__ten { font-weight: 700; font-size: 14.5px; }
.san-the__ghi { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.55; }
.san-the__meta { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.san-the__xt { font-size: 11.5px; color: var(--text-faint); }
/* Nói ra chỗ nền tảng chưa khai ứng dụng đối tác — chủ shop biết đường hỏi thay vì tưởng mình sai. */
.san-the__thieu { font-size: 11.5px; color: var(--warn-strong, #b45309); font-style: italic; }
.san-the .btn { align-self: flex-start; margin-top: 4px; }

/* ---- Sổ doanh thu theo NGÀNH NGHỀ (S2a/S2b): các dòng cấu trúc in sẵn trong biểu mẫu ---- */
.so-nhomnn td { background: var(--surface-2); font-weight: 700; }
.so-tongnn td { font-weight: 600; border-top: 1px solid var(--line-soft); }
.so-thuenn td { color: var(--text-2); font-style: italic; }
/* Hai dòng tổng thuế phải nộp — con số cuối cùng người ta mang đi khai thuế. */
.so-tongthue td { background: var(--primary-soft); font-weight: 700; border-top: 2px solid var(--line); }

/* ============================================================
   HỘP THOẠI "XUẤT DỮ LIỆU" TRANG SẢN PHẨM — tiền tố .xk- để không đè lớp cũ
   ============================================================ */
.xk-hang { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.xk-luoi-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Chữ nhỏ giải thích vì sao lựa chọn "Các dòng đã chọn" đang mờ — thụt vào thẳng hàng với nhãn radio */
.xk-chu-nho { font-size: 12px; color: var(--text-faint); margin: 2px 0 0 25px; }
.xk-cot-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
/* Mỗi hàng cột: ô tích | nhãn chữ cái | tên cột | ô đổi tên — grid để 4 phần thẳng cột dọc suốt danh sách */
.xk-cot-row { display: grid; grid-template-columns: 20px 36px 1fr 230px; align-items: center; gap: 8px; padding: 5px 12px; border-bottom: 1px solid var(--line); }
.xk-cot-row:last-child { border-bottom: none; }
.xk-cot-row:hover { background: var(--surface-2); }
.xk-cot-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }
/* Nhãn chữ cái cột (A, B, C...) — JS tính lại theo thứ tự các cột ĐANG TÍCH, bỏ tích thì trống */
.xk-cot-chucai { display: inline-flex; justify-content: center; min-width: 30px; padding: 1px 4px; border-radius: 4px; background: var(--surface-2); color: var(--text-2); font-size: 12px; }
.xk-cot-row--tat .xk-cot-chucai { background: transparent; }
.xk-cot-ten { cursor: pointer; font-size: 14px; }
.xk-cot-row--tat .xk-cot-ten { color: var(--text-faint); }
.xk-cot-doiten { padding: 5px 8px; font-size: 13px; }
/* Màn hẹp: ô đổi tên xuống dòng riêng dưới tên cột, hai ô tên file/trang tính xếp dọc */
@media (max-width: 720px) {
    .xk-luoi-2 { grid-template-columns: 1fr; }
    .xk-cot-row { grid-template-columns: 20px 30px 1fr; }
    .xk-cot-doiten { grid-column: 2 / -1; }
}

/* ==================================================================
   LÁT nhap-qua — Kênh bán › Hóa đơn nháp + Nợ quà tặng (02/09/2026)
   Tiền tố .nq- để không đè lớp của trang khác. Dùng lại nguyên .loc-don /
   .bc-loc__o / .the-don / .thanh-cc / .table-grid / .status / .pill có sẵn;
   dưới đây chỉ là phần keo dán.
   ================================================================== */
/* .bc-loc__o khai min-width:148px cho bố cục FLEX bên Báo cáo; trong lưới .loc-don nó chặn cột co lại. */
.nq-loc .bc-loc__o { min-width: 0; }

/* Cột thao tác: nút + form nằm cùng hàng, canh phải; hẹp thì xuống dòng chứ không tràn ô. */
.nq-thaotac { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.nq-thaotac form { display: inline-flex; margin: 0; }

.nq-stt { width: 44px; }
.nq-phu { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* Ghi chú dài không được kéo giãn cả bảng — cắt ở 260px, rê chuột vẫn đọc được nhờ title. */
.nq-ghichu { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nq-bang .center { text-align: center; }
/* Thanh phân trang nằm dưới bảng: cách một khoảng bằng padding chuẩn của .thanh-cc. */
.nq-trang { padding-top: 14px; }

/* Form ghi nợ: ô gõ lọc đứng ngay trên ô chọn, hai ô chọn cao bằng nhau. */
.nq-form { max-width: 960px; }
.nq-form .nq-tim { margin-bottom: 2px; }
.nq-form select[size] { height: auto; padding: 4px; }
.nq-form select[size] option { padding: 6px 8px; border-radius: 6px; }
.nq-form__nut { padding: 0 18px 18px; }
.nq-don { display: flex; flex-direction: column; gap: 4px; }

/* ============================================================
   LÁT don-hang (Kênh bán 02/09/2026) — Bán sỉ / Đơn hàng sàn / Tìm hóa đơn
   ============================================================ */
/* Chip "Bán sỉ" trên trang tạo đơn: màu hổ phách để phân biệt với chip kênh (xanh) — hai thứ khác
   bản chất (giá bán vs nguồn đơn) mà cùng một màu thì người bán tưởng "Bán sỉ" là một kênh nữa. */
.chips__item--si input:checked + span { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
/* Trang Tìm hóa đơn: hai nút thao tác trên một dòng, không gãy khi cột hẹp */
.thd-nut { white-space: nowrap; }
.thd-nut .btn + .btn { margin-left: 6px; }

/* ==================================================================
   LÁT san — Kênh bán › Sàn TMĐT: Sản phẩm trên sàn + Đánh giá (02/09/2026)
   Tiền tố .sn- để không đè lớp của trang khác. Dùng lại nguyên .loc-don /
   .bc-loc__o / .the-don / .thanh-cc / .table-grid / .status / .pill / .modal-box;
   dưới đây chỉ là phần keo dán.
   ================================================================== */
/* .bc-loc__o khai min-width:148px cho bố cục FLEX bên Báo cáo; trong lưới .loc-don nó chặn cột co lại. */
.sn-loc .bc-loc__o { min-width: 0; }
.sn-tich { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 9px 0; cursor: pointer; }
.sn-tich input { width: 16px; height: 16px; accent-color: var(--primary); }

/* Ô nhập inline trong bảng: gọn hơn ô form thường, xếp dọc khi một ô có hai trường (mã sàn + SKU). */
.sn-o { width: 100%; min-width: 0; padding: 6px 8px; font-size: 13px; }
.sn-o + .sn-o { margin-top: 4px; }
.sn-o--ma { min-width: 150px; }
.sn-o--tien { min-width: 110px; text-align: right; }
.sn-o--so { min-width: 76px; text-align: right; }
.sn-chon { width: 38px; text-align: center; }
.sn-chon input { width: 16px; height: 16px; accent-color: var(--primary); }
.sn-bang td { vertical-align: top; }
.sn-bang .center { text-align: center; }
.sn-thaotac { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.sn-phu { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
/* Lỗi lần đồng bộ gần nhất — hiện tại luôn là "Chưa nối API sàn"; đỏ để không ai tưởng đã đẩy xong. */
.sn-loi { font-size: 12px; color: var(--bad); margin-top: 2px; }
/* "Chưa đăng" là trạng thái trung tính — xám, không mượn đỏ của "Đã hủy". */
.sn-status--chuadang { background: var(--surface-2); color: var(--text-2); }
/* Thanh phân trang nằm dưới bảng: cách một khoảng bằng padding chuẩn của .thanh-cc. */
.sn-trang { padding-top: 14px; }
.sn-ghi { margin-top: 0; font-size: 12.5px; line-height: 1.6; }

/* Hộp "Thêm sản phẩm lên sàn": hai ô đầu cùng hàng, khung kết quả cuộn riêng để hộp không dài vô tận. */
.sn-them-hang { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.sn-kq { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; }
.sn-kq .table-grid { border: none; }
.sn-kq .table-grid td, .sn-kq .table-grid th { padding: 8px 12px; }
.sn-kq .empty { padding: 26px; }
.sn-luoi-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Trang Đánh giá */
.sn-sao { color: #f59e0b; letter-spacing: 1px; white-space: nowrap; font-size: 15px; }
/* Nội dung dài không được kéo giãn cả bảng; giữ xuống dòng của người viết. */
.sn-noidung { max-width: 360px; white-space: pre-line; line-height: 1.5; }
.sn-tl { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.sn-tl__form { display: flex; flex-direction: column; gap: 6px; }
.sn-tl textarea { resize: vertical; min-height: 54px; font-size: 13px; }
.sn-tl__nut { display: flex; gap: 6px; justify-content: flex-end; }
.sn-traloi { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; line-height: 1.5; white-space: pre-line; }
.sn-link { background: none; border: none; padding: 0; color: var(--link, #1A6FD4); cursor: pointer; font: inherit; font-size: 12px; }
.sn-link:hover { text-decoration: underline; }
.sn-form-inline { display: inline-flex; margin: 0; }
@media (max-width: 720px) {
    .sn-them-hang, .sn-luoi-2 { grid-template-columns: 1fr; }
}

/* ==================================================================
   LÁT tra-hang — Kênh bán › Trả hàng (02/09/2026)
   Tiền tố .th- để không đè lớp của trang khác. Dùng lại nguyên .loc-don /
   .bc-loc__o / .the-don / .thanh-cc / .table-grid / .status / .pill có sẵn;
   dưới đây chỉ là phần keo dán.
   ================================================================== */
/* Nháp = xám chứ không mượn vàng của "chờ xử lý": nháp chỉ là phiếu chưa xong, không phải việc tồn. */
.th-status--nhap { background: var(--surface-2); color: var(--text-muted); }
/* .bc-loc__o khai min-width:148px cho bố cục FLEX bên Báo cáo; trong lưới .loc-don nó chặn cột co lại. */
.th-loc .bc-loc__o { min-width: 0; }
.th-thaotac { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.th-thaotac form { display: inline-flex; margin: 0; }
.th-phu { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.th-bang .center { text-align: center; }
.th-trang { padding-top: 14px; }

/* Form lập phiếu */
.th-form { max-width: 1100px; }
.th-form select[size] { height: auto; padding: 4px; }
.th-form select[size] option { padding: 6px 8px; border-radius: 6px; }
.th-form__nut { padding: 0 18px 18px; }
/* Ô số lượng / đơn giá nằm trong ô bảng: hẹp và canh phải để cột số thẳng hàng với cột thành tiền. */
.th-sl { width: 90px; text-align: right; }
.th-gia { width: 140px; text-align: right; }
.th-chon { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.th-radio { display: inline-flex; align-items: center; gap: 6px; margin: 4px 16px 4px 0; font-size: 14px; }
.th-loi { color: var(--bad-strong); font-size: 13px; margin: 10px 0 0; }
/* Đầu hóa đơn gốc: bốn ô thông tin một hàng, hẹp thì tự xuống hai hàng. */
.th-don { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; padding: 0 18px 14px; }
.th-don__nhan { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
/* In phiếu trả (window.print): giấu nút thao tác, giữ bảng và thông tin. */
@media print { .th-khongin { display: none !important; } }

/* ==================================================================
   LÁT tai-chinh — Kênh bán › Tài chính sàn TMĐT (02/09/2026)
   Tiền tố .tc- để không đè lớp của trang khác. Dùng lại nguyên .stats/.stat /
   .the-don / .loc-don / .bc-loc__o / .thanh-cc / .table-grid / .bc-tong / .status /
   .pill / .modal-box có sẵn; dưới đây chỉ là phần keo dán.
   ================================================================== */
/* Trang tổng quan có NĂM thẻ KPI (khuôn .stats mặc định bốn cột) — chia năm rồi co dần theo bề ngang. */
.stats.tc-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1400px) { .stats.tc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .stats.tc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .stats.tc-stats { grid-template-columns: 1fr; } }
/* .bc-loc__o khai min-width:148px cho bố cục FLEX bên Báo cáo; trong lưới .loc-don nó chặn cột co lại. */
.tc-loc .bc-loc__o { min-width: 0; }
/* Ô tích "chỉ hiện lệch" đứng ngang hàng với các ô nhập của lưới lọc. */
.tc-tich { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 9px 0; cursor: pointer; white-space: nowrap; }
.tc-tich input { width: 16px; height: 16px; accent-color: var(--primary); }
/* Số âm / chênh lệch: đỏ để liếc bảng là thấy — cùng biến màu với huy hiệu "Đã hủy". */
.tc-am { color: var(--bad-strong); }
.tc-thaotac { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
/* Ô nhập số sàn trả nằm trong ô bảng: hẹp, canh phải để thẳng cột với Thu hộ / Chênh lệch. */
.tc-o-tien { width: 130px; min-width: 0; padding: 6px 8px; font-size: 13px; text-align: right; }
.tc-phu { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.tc-bang td { vertical-align: top; }
.tc-ghi { margin-top: 0; font-size: 12.5px; line-height: 1.6; }
.tc-luoi-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Ghi chú chân bảng tổng quan: nói thẳng phần nào là số nhập tay. */
.tc-chan { padding: 12px 18px 16px; border-top: 1px solid var(--line-soft); }
.tc-chan p { margin: 0 0 4px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.tc-chan p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
    .tc-luoi-2 { grid-template-columns: 1fr; }
}

/* ==================================================================
   LÁT hddt — Kênh bán › Hóa đơn điện tử (02/09/2026)
   Tiền tố .hddt- để không đè lớp của trang khác. Dùng lại nguyên .loc-don /
   .bc-loc__o / .the-don / .thanh-cc / .table-grid / .pill / .info có sẵn;
   dưới đây chỉ là phần keo dán.
   ================================================================== */
/* Khối số dư ngay dưới đầu thẻ: một hàng, xuống dòng khi hẹp. */
.hddt-sodu { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 18px 14px; font-size: 13.5px; color: var(--text-2); }
.hddt-sodu .ico { color: var(--primary); }
/* Hết số dư thì con số đỏ — đây là thứ chặn phát hành khi API nối. */
.hddt-sodu__het { color: var(--bad); }
/* .bc-loc__o khai min-width:148px cho bố cục FLEX bên Báo cáo; trong lưới .loc-don nó chặn cột co lại. */
.hddt-loc .bc-loc__o { min-width: 0; }
.hddt-loc__rong { grid-column: span 2; }
.hddt-tich { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 9px 0; cursor: pointer; align-self: end; }
.hddt-tich input { width: 16px; height: 16px; accent-color: var(--primary); }
.hddt-stt { width: 44px; }
.hddt-bang .center { text-align: center; }
.hddt-bang td { vertical-align: top; }
.hddt-phu { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.hddt-diachi { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Lý do lỗi dưới huy hiệu — đỏ, cắt dòng, đọc đủ khi rê chuột (title). */
.hddt-loi { font-size: 12px; color: var(--bad); margin-top: 4px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Cột "chưa khai" trong bảng dòng — cam nhắc chứ không đỏ: chưa phải lỗi, chỉ là việc kế toán phải làm. */
.hddt-thieu { color: var(--warn-strong); font-weight: 600; }
/* "Đã hủy"/"Đã bị thay thế" xám đậm — không mượn đỏ của Lỗi (xem HoaDonDienTuListViewModel.LopTrangThai). */
.hddt-pill--huy { background: var(--surface-2); color: var(--text-2); text-decoration: line-through; }
.hddt-thaotac { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.hddt-thaotac form { display: inline-flex; margin: 0; }
.hddt-thaotac--doc { flex-direction: column; align-items: stretch; }
.hddt-thaotac--doc .btn { width: 100%; justify-content: center; }
.hddt-trang { padding-top: 14px; }
.hddt-ghi { margin: 0; padding: 12px 18px 18px; font-size: 12.5px; line-height: 1.6; }
.hddt-loi-to { margin: 0 18px 14px; }
/* Nhắc thiếu thông tin người bán — đặt trong thẻ, dưới bảng info. */
.hddt-nhac { margin: 0 18px 18px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warn-strong-bg); color: var(--warn-strong); font-size: 13px; line-height: 1.5; }
.hddt-nhac a { color: inherit; font-weight: 600; }

/* Trang tạo từ đơn */
.hddt-form { max-width: 1100px; }
.hddt-tim { padding-bottom: 6px; }
.hddt-tim__hang { display: flex; gap: 10px; }
.hddt-tim__hang .field__input { max-width: 360px; }
/* Đầu đơn gốc: bốn ô thông tin một hàng, hẹp thì tự xuống hai hàng. */
.hddt-don { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 0 18px 14px; }
.hddt-don__nhan { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.hddt-daco { margin: 0 18px 14px; }
.hddt-haicot { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hddt-haicot .field + .field { margin-top: 12px; }
.hddt-tieude { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--text); }
.hddt-info { padding: 0; grid-template-columns: 130px 1fr; }
.hddt-haicot .hddt-nhac { margin: 12px 0 0; }
.hddt-form__nut { padding: 18px; flex-wrap: wrap; }

/* Trang sản phẩm: ô nhập inline trong bảng, gọn hơn ô form thường. */
.hddt-o { width: 100%; min-width: 0; padding: 6px 8px; font-size: 13px; }
.hddt-o--ten { min-width: 220px; }
.hddt-o--dvt { min-width: 90px; }
.hddt-o--thue { min-width: 170px; }
/* Thuế suất chưa khai: viền cam để mắt bắt được dòng còn thiếu khi cuộn nhanh. */
.hddt-o--thieu { border-color: var(--warn-strong); }
.hddt-form-inline { display: inline-flex; margin: 0; }
@media (max-width: 720px) {
    .hddt-haicot { grid-template-columns: 1fr; }
    .hddt-loc__rong { grid-column: auto; }
}

/* ============================================================
   MENU KÊNH BÁN — bảng 4 cột RỘNG (02/09/2026)
   Bảng ~860px rộng hơn khoảng trống ở CẢ hai bên nút "Kênh bán" (nút nằm gần giữa thanh):
   neo trái thì tràn phải, site.js lật sang neo phải thì lòi ra ngoài mép trái. Cách duy nhất
   vừa màn hình là neo bảng theo THANH MENU (.topnav đã position:relative) chứ không theo nút:
   nhóm này bỏ position:relative để .topnav thành khối chứa, bảng bám mép trái thanh.
   Ghi đè luôn --phai để JS có lật cũng không kéo bảng đi. Báo cáo (4 cột, nằm phía phải)
   không cần vì neo phải của nó vừa.
   ============================================================ */
.topnav__group--rong { position: static; }
.topnav__group--rong .topnav__panel,
.topnav__group--rong .topnav__panel.topnav__panel--phai { left: 14px; right: auto; }

/* ---- Cột "Tổng phí sàn" trên trang Đơn hàng <sàn> (03/09/2026) ----
   Số tiền là một NÚT (bấm ra hộp chi tiết) nhưng phải trông như con số đỏ ở cột Thanh toán bên cạnh —
   cùng màu, cùng tabular-nums; chỉ thêm gạch chấm dưới để báo "bấm được". */
.bang-don__phi {
    background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
    font: inherit; color: var(--danger, #DC2626); font-variant-numeric: tabular-nums; font-weight: 600;
    text-decoration: underline dotted; text-underline-offset: 3px;
}
.bang-don__phi:hover { text-decoration-style: solid; }
.bang-don__th-phi { min-width: 128px; }
.bang-don__phi-tyle { font-size: 11.5px; font-weight: 500; color: var(--text-muted); margin-top: 2px; white-space: nowrap; }

/* Hộp "Sàn thu từng đồng như nào" */
.phi-san__bang td, .phi-san__bang th { padding: 8px 10px; }
.phi-san__mota { font-size: 12px; margin-top: 2px; line-height: 1.45; }
.phi-san__tran { font-size: 11.5px; color: #b45309; font-style: italic; }
.phi-san__tong td { font-size: 14px; }

/* ---- Cài đặt sàn › khối "Phí sàn — cửa hàng này chịu những khoản nào" (03/09/2026) ---- */
.phi-san-cai-dat { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.phi-san-khoi { border: 1px solid var(--line); border-radius: var(--radius-md); }
.phi-san-khoi__dau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; cursor: pointer; user-select: none; font-size: 14px; }
.phi-san-khoi__than { padding: 4px 14px 14px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 12px; }
.phi-san-khoi__tich { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.45; cursor: pointer; }
.phi-san-khoi__tich input { margin-top: 3px; }
.phi-san-khoi__nhom { display: flex; flex-direction: column; gap: 6px; }
.phi-san-khoi__ten { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-2); }
.phi-san-khoi__ds { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.phi-san-khoi__nut { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- Ô logo khi chứa ẢNH THẬT thay cho biểu tượng vẽ (03/09/2026) ----
   .brand__mark vốn là một ô bo tròn nền màu thương hiệu, đúng cho biểu tượng nét trắng bên trong.
   Logo DonLoc là ảnh có nền trong suốt và màu riêng (vàng kim + xanh navy) — đặt nó lên ô màu đó
   là hai lớp màu chồng nhau, logo chìm hẳn. Nhánh này bỏ nền/bóng/bo góc, để logo tự đứng.
   Dùng lớp riêng chứ không phải :has(img) để chỗ nào còn dùng biểu tượng vẽ vẫn giữ nguyên. */
.brand__mark--anh {
    background: none;
    box-shadow: none;
    border-radius: 0;
    width: auto; height: auto;
}
.brand__mark--anh img { display: block; height: auto; }
/* Trên nền teal của trang đăng nhập, logo cần thở ra một chút và không bị ô nền cũ bó lại. */
.auth__panel .brand__mark--anh { background: none; box-shadow: none; }

/* Tấm nền sáng cho logo ở cột trái trang Đăng nhập / Đăng ký.
   Logo DonLoc là navy + vàng kim; nền cột là xanh ngọc đậm. Đặt thẳng lên nhau thì phần chữ navy
   gần như biến mất. Tấm trắng hơi trong này giữ cả hai: nền vẫn đúng màu phần mềm, logo vẫn đúng
   màu thương hiệu — thay vì phải đổi màu một trong hai. */
.auth__logo {
    align-self: flex-start;
    background: #fff;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 24px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.auth__logo img { display: block; width: 196px; height: auto; }