/* ==========================================================================
   UNIG · HỆ THỐNG QUẢN TRỊ — DESIGN SYSTEM
   --------------------------------------------------------------------------
   BỘ NHẬN DIỆN THƯƠNG HIỆU UNIG v1.0 (công ty chốt 27/09/2026):
     · UNIG CHARCOAL  #1E1E1E — màu CHỦ ĐẠO (nút, tiêu đề, chữ)
     · UNIG YELLOW    #FFCC00 — màu ĐIỂM NHẤN (không dùng làm nền chữ trắng)
     · LIGHT GREY     #F5F7FA — nền
     · WHITE          #FFFFFF — nền phụ
     · Montserrat = font chính (logo & headline) · Inter = font phụ (nội dung)

   Kết cấu (token + lớp) vốn lấy từ repo Annie2802/Website-ERP — bản rút gọn cho web
   app công nợ, không có Tailwind/Next.js. ⚠ TỪ 27/09/2026 PHẦN MÀU & CHỮ Ở ĐÂY ĐÃ
   ĐỔI THEO NHẬN DIỆN MỚI, nên KHÔNG còn khớp token của repo ERP kia nữa — muốn đồng
   bộ lại thì phải đổi bên đó theo cùng bảng màu.

   QUY TẮC:
     · Không tham chiếu thang màu thô (--neutral-*, --primary-*) trong UI,
       chỉ dùng token ngữ nghĩa (--fg-primary, --bg-surface, --action…).
     · Không bịa tên lớp mới. Lớp nào không có trong file này thì chưa có style.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- 1.1 Bảng màu thô (không dùng trực tiếp trong UI) --- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FCFCFD;
  --neutral-50:  #F8FAFC;
  --neutral-100: #F1F4F8;
  --neutral-150: #E9EDF3;
  --neutral-200: #DFE4EC;
  --neutral-300: #C9D1DD;
  --neutral-400: #9AA3B5;
  --neutral-500: #7A8296;
  --neutral-600: #667082;
  --neutral-700: #454B5C;
  --neutral-800: #2A3040;
  --neutral-900: #1B2130;
  --neutral-950: #0C0F17;

  /* UNIG CHARCOAL #1E1E1E — màu CHỦ ĐẠO (Brand Guideline v1.0, 27/09/2026).
     Giữ nguyên TÊN token `--primary-*` để mọi CSS thành phần không phải sửa; chỉ đổi
     giá trị. Thang này chạy từ gần trắng tới đen. */
  --primary-50:  #F4F4F5;
  --primary-100: #E7E7E9;
  --primary-200: #D0D0D3;
  --primary-300: #A9A9AE;
  --primary-400: #6F6F76;
  --primary-500: #1E1E1E;
  --primary-600: #111111;
  --primary-700: #000000;
  --primary-800: #000000;
  --primary-900: #000000;
  --primary-950: #000000;

  --success-50:  #ECFDF3;
  --success-100: #D1FADF;
  --success-200: #A6F4C5;
  --success-500: #17A35A;
  --success-600: #128347;
  --success-700: #0E6638;

  --warning-50:  #FFFAEB;
  --warning-100: #FEF0C7;
  --warning-200: #FEDF89;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-700: #B45309;

  --danger-50:   #FEF3F2;
  --danger-100:  #FEE4E2;
  --danger-200:  #FECDCA;
  --danger-500:  #E5484D;
  --danger-600:  #CE2C31;
  --danger-700:  #A91B1F;

  /* UNIG YELLOW #FFCC00 — màu ĐIỂM NHẤN.
     ⚠ KHÔNG dùng vàng làm nền có chữ trắng: #FFCC00 trên #FFF chỉ đạt tương phản
     ~1,5:1 (cần ≥ 4,5:1). Vàng đi với chữ CHARCOAL (11:1) — đúng như guideline:
     vàng là "điểm nhấn", charcoal mới là "chủ đạo". Cần CHỮ vàng trên nền trắng thì
     dùng `--accent-700` (~5:1, đạt AA). */
  --accent-50:   #FFFBE6;
  --accent-100:  #FFF3BF;
  --accent-500:  #FFCC00;
  --accent-600:  #E0B400;
  --accent-700:  #8A6A00;

  /* --- Biểu đồ ---
     chart-1 = charcoal, chart-2 = vàng thương hiệu: hai dải dùng nhiều nhất mang đúng
     màu nhận diện; các dải còn lại giữ tông phân biệt được với nhau.

     ⚠ RIÊNG chart-2 (#FFCC00) chỉ đạt ~1,5:1 trên nền trắng — DƯỚI ngưỡng 3:1 cho thành
     phần đồ hoạ. Vẫn giữ vì: (1) đây là màu điểm nhấn của thương hiệu, (2) mọi cột biểu
     đồ đều in KÈM CON SỐ ở bên phải (`.bar-row .amt`), nên không có thông tin nào chỉ
     dựa vào việc phân biệt màu cột. Nếu sau này làm biểu đồ KHÔNG kèm số thì phải đổi
     chart-2 sang --accent-600 (#E0B400) hoặc thêm viền cho cột. */
  --chart-1: #1E1E1E;
  --chart-2: #FFCC00;
  --chart-3: #0E9A92;
  --chart-4: #EC4899;
  --chart-5: #3B62F0;
  --chart-6: #17A35A;

  /* --- 1.2 Chữ ---
     Theo Brand Guideline v1.0: Montserrat là "Font chính (Logo & Headline)", Inter là
     "Font phụ (Nội dung, văn bản)". Cả hai đều có bộ dấu tiếng Việt đầy đủ.
     Mã vật tư / số liệu vẫn dùng chữ ĐẲNG WIDTH (mono) để cột số thẳng hàng — guideline
     không quy định chữ mono nên giữ IBM Plex Mono cho phần số liệu. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif;
  --font-display: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Cỡ chữ: nâng lên một bậc so với bản cũ (13→14 · 12→13 · 11→12) vì trên màn hình
     rộng, chữ 13px trong bảng và tiêu đề cột 10.5px là quá nhỏ để đọc lâu. */
  --text-display: 30px;  --lh-display: 38px;
  --text-h1: 26px;       --lh-h1: 33px;
  --text-h2: 21px;       --lh-h2: 29px;
  --text-h3: 17px;       --lh-h3: 25px;
  --text-body-lg: 15.5px; --lh-body-lg: 24px;
  --text-body: 15px;     --lh-body: 22px;
  --text-sm: 14px;       --lh-sm: 20px;
  --text-caption: 13px;  --lh-caption: 18px;
  --text-micro: 12px;    --lh-micro: 16px;

  --tracking-tight: -0.015em;
  --tracking-snug: -0.005em;
  --tracking-wide: 0.03em;

  /* --- 1.3 Bề mặt --- */
  --bg-app: #F5F7FA;                       /* UNIG Light Grey */
  /* Quầng nền: bản cũ là tím/xanh/hồng (Aurora). Nhận diện mới tối giản nên quầng chỉ
     còn hơi vàng rất nhạt + một chút charcoal, để nền vẫn có chiều sâu mà không phá
     tông trung tính. */
  --bg-canvas-orb-1: rgba(255,204,0,.18);
  --bg-canvas-orb-2: rgba(30,30,30,.045);
  --bg-canvas-orb-3: rgba(255,204,0,.08);
  --bg-surface: rgba(255,255,255,.60);
  --bg-subtle: rgba(27,33,48,.05);
  --bg-muted: rgba(27,33,48,.07);
  /* ---------------------------------------------------------------------------
     NỀN ĐỤC cho DÒNG TIÊU ĐỀ / DÒNG TỔNG của bảng.
     Vì sao cần: `.tbl thead th` là `position: sticky`, mà nền tiêu đề lại là màu
     TRONG SUỐT (`--bg-muted` 7%) ⇒ khi bảng cuộn, chữ và nút của dòng phía dưới
     **LỘ XUYÊN QUA** dải tiêu đề (lỗi thấy thật ở bảng "Định mức mẫu (BOM)" ngày
     01/10/2026: chữ "Áo khoác" và nút đen nằm đè lên hàng tiêu đề).
     Hai màu dưới đây ĐÚNG BẰNG màu cũ khi phủ trên `--bg-app`, nhưng ĐỤC. */
  --tbl-head-bg: #E6E8EC;   /* = --bg-muted (7%) phủ trên --bg-app #F5F7FA */
  --tbl-foot-bg: #EBEDF0;   /* = --bg-subtle (5%) phủ trên --bg-app */
  --bg-inverse: #1B2130;
  --bg-sidebar: rgba(255,255,255,.58);

  --glass-bg: rgba(255,255,255,.60);
  --glass-bg-soft: rgba(255,255,255,.50);
  --glass-bg-strong: rgba(255,255,255,.92);
  --glass-border: rgba(255,255,255,.80);
  --glass-blur: 20px;
  --glass-saturate: 1.5;

  /* --- 1.4 Chữ ngữ nghĩa --- */
  --fg-primary: var(--neutral-900);
  --fg-secondary: var(--neutral-700);
  --fg-muted: var(--neutral-600);
  --fg-disabled: var(--neutral-400);
  --fg-on-primary: var(--neutral-0);
  --fg-inverse: var(--neutral-0);

  /* --- 1.5 Viền --- */
  --border-subtle: rgba(27,33,48,.06);
  --border-default: rgba(27,33,48,.10);
  --border-strong: rgba(27,33,48,.18);
  --border-focus: var(--primary-500);

  /* --- 1.6 Tương tác --- */
  --action: var(--primary-500);
  --action-hover: var(--primary-600);
  --action-active: var(--primary-700);
  --action-subtle: rgba(30,30,30,.06);
  --action-grad: linear-gradient(135deg, #2E2E2E, #1E1E1E);
  --link: var(--primary-600);
  /* Viền tiêu điểm dùng CHARCOAL chứ không dùng vàng: vàng trên nền trắng quá nhạt
     để thấy rõ khi tab bàn phím. */
  --focus-ring: 0 0 0 3px rgba(30,30,30,.28);

  /* --- 1.7 Trạng thái --- */
  --status-success-fg: var(--success-700);
  --status-success-bg: rgba(23,163,90,.12);
  --status-warning-fg: var(--warning-700);
  --status-warning-bg: rgba(245,158,11,.14);
  --status-danger-fg: var(--danger-600);
  --status-danger-bg: rgba(229,72,77,.10);
  --status-info-fg: var(--primary-700);
  --status-info-bg: rgba(30,30,30,.07);
  /* Chữ badge "neutral" dùng --neutral-700 chứ không phải --neutral-600: trên nền badge
     có pha màu (rgba(27,33,48,.06)), #667082 chỉ đạt 4,45:1 — THIẾU 0,05 so với ngưỡng
     AA 4,5:1 của WCAG. #454B5C đạt ~8,7:1, vẫn là tông xám trung tính. */
  --status-neutral-fg: var(--neutral-700);
  --status-neutral-bg: rgba(27,33,48,.06);

  /* --- 1.8 Khoảng cách (lưới 4px) --- */
  --space-0: 0px;   --space-1: 2px;   --space-2: 4px;   --space-3: 6px;
  --space-4: 8px;   --space-5: 12px;  --space-6: 16px;  --space-7: 20px;
  --space-8: 24px;  --space-9: 32px;  --space-10: 40px; --space-11: 48px;
  --space-12: 64px;

  /* --- 1.9 Bo góc --- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 14px;
  --radius-xl: 17px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* --- 1.10 Đổ bóng --- */
  --shadow-xs: 0 1px 2px rgba(31,38,135,.05);
  --shadow-sm: 0 2px 8px rgba(31,38,135,.06);
  --shadow-md: 0 4px 16px rgba(31,38,135,.06);
  --shadow-lg: 0 6px 20px rgba(31,38,135,.06);
  --shadow-xl: 0 8px 28px rgba(31,38,135,.08);
  --shadow-glow-primary: 0 6px 18px rgba(30,30,30,.22), inset 0 1px 0 rgba(255,255,255,.20);
  --shadow-pill: 0 2px 8px rgba(31,38,135,.10);
  --ring-inset: inset 0 0 0 1px rgba(255,255,255,.75);

  /* --- 1.11 Chuyển động --- */
  --ease-standard: cubic-bezier(.2,0,.13,1);
  --ease-emphasis: cubic-bezier(.16,1,.3,1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;

  /* --- 1.12 Bố cục ---
     VỎ SÁT MÉP (Công ty chốt 19/10/2026): sidebar 250px dính mép trái, thanh trên cao 60px.
     `--shell-gap` giữ tên biến cho tương thích nhưng KHÔNG còn dùng làm khoảng đệm vỏ
     (xem khối "VỎ SÁT MÉP" ở cuối tệp). */
  --sidebar-w: 250px;
  --topbar-h: 60px;
  --shell-gap: 0px;
  --content-max: 1280px;
}

/* ==========================================================================
   2. LỚP CHỮ NGỮ NGHĨA
   ========================================================================== */
.ds-display { font: var(--fw-bold) var(--text-display)/var(--lh-display) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-primary); }
.ds-h1 { font: var(--fw-semibold) var(--text-h1)/var(--lh-h1) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-primary); }
.ds-h2 { font: var(--fw-semibold) var(--text-h2)/var(--lh-h2) var(--font-display); letter-spacing: var(--tracking-snug); color: var(--fg-primary); }
.ds-h3 { font: var(--fw-semibold) var(--text-h3)/var(--lh-h3) var(--font-display); color: var(--fg-primary); }
.ds-body-lg { font: var(--fw-regular) var(--text-body-lg)/var(--lh-body-lg) var(--font-sans); color: var(--fg-secondary); }
.ds-body { font: var(--fw-regular) var(--text-body)/var(--lh-body) var(--font-sans); color: var(--fg-secondary); }
.ds-sm { font: var(--fw-regular) var(--text-sm)/var(--lh-sm) var(--font-sans); color: var(--fg-secondary); }
.ds-caption { font: var(--fw-regular) var(--text-caption)/var(--lh-caption) var(--font-sans); color: var(--fg-muted); }
.ds-eyebrow { font: var(--fw-semibold) var(--text-micro)/var(--lh-micro) var(--font-sans); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); }
.ds-mono { font: var(--fw-regular) var(--text-sm)/var(--lh-sm) var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-secondary); }
.ds-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ==========================================================================
   3. NỀN TẢNG
   ========================================================================== */
* { box-sizing: border-box; }

/* Thuộc tính `hidden` của HTML phải thắng mọi CSS khác.
   Không có dòng này thì .drawer/.modal (position:fixed; inset:0) sẽ luôn hiện
   và lớp phủ .scrim chặn toàn bộ cú click của trang. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--fg-secondary);
  font: var(--fw-regular) var(--text-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Quầng nền phía sau các tấm kính — nay theo tông thương hiệu (vàng rất nhạt + charcoal),
   không còn tím/xanh/hồng như bản Aurora cũ. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(720px 520px at 6% -8%, var(--bg-canvas-orb-1), transparent 62%),
    radial-gradient(680px 480px at 96% 2%, var(--bg-canvas-orb-2), transparent 60%),
    radial-gradient(760px 620px at 52% 108%, var(--bg-canvas-orb-3), transparent 62%);
}

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

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Thanh cuộn */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(27,33,48,.16); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(27,33,48,.26); background-clip: content-box; }

/* Tấm kính dùng chung */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg), var(--ring-inset);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   4. VỎ ỨNG DỤNG — sidebar + topbar + nội dung
   ========================================================================== */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: var(--shell-gap);
  padding: var(--shell-gap);
  min-height: 100vh;
  align-items: start;
}

/* --- 4.1 Sidebar --- */
.sidebar {
  position: sticky;
  top: var(--shell-gap);
  align-self: start;
  max-height: calc(100vh - var(--shell-gap) * 2);
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg), var(--ring-inset);
  overflow: hidden;
}

.sb-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.sb-logo {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--action-grad);
  color: var(--fg-on-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-bold); font-size: 13px; letter-spacing: .3px;
  box-shadow: var(--shadow-glow-primary);
}

/* ==========================================================================
   CHỖ GẮN LOGO THƯƠNG HIỆU — THẢ TỆP LÀ XONG, KHÔNG PHẢI SỬA MÃ

   Tệp nằm trong `src/public/` (xem `LOGO-THUONG-HIEU.md`):
     · `logo-unig.png`      — BỘ KHOÁ ĐẦY ĐỦ (UNiG + UNIFORM INNOVATION GROUP + tagline)
     · `logo-unig-mark.png` — CHỈ chữ UNiG
   Ưu tiên bản `.svg` nếu có (nét sắc ở mọi cỡ); không có thì dùng `.png`.
   Thiếu tệp -> giữ ô chữ "UN" nền charcoal làm dấu tạm.

   HAI CỠ, vì hai chỗ rộng hẹp khác hẳn nhau:
     · SIDEBAR (272px, chỗ gắn chỉ ~240px) -> `logo-unig-mark.png`, cao 34px.
       Bộ khoá đầy đủ ở đây thì hai dòng chữ nhỏ bị bóp còn ~4px, không đọc được.
       Sidebar CHỈ có logo: bỏ cả ô chữ "UN", dòng tên "UNIG" và dòng phụ đề
       — logo đã nói tên thương hiệu rồi, thêm chữ nữa chỉ rối (công ty chốt 28/09/2026).
     · TRANG ĐĂNG NHẬP (thẻ 430px) -> bộ khoá đầy đủ, cao 100px, đặt trên dòng tên
       phần mềm "Hệ thống quản trị UNiG" có sẵn trong HTML.

   `branding.js` hỏi `/api/branding` MỘT LẦN rồi mới chèn <img>. Không để thẻ <img> trong
   HTML tự thử-rồi-lỗi: mỗi lần tải trang sẽ sinh 1–2 dòng `404` trong console, mà bộ kiểm
   tra giao diện coi mọi lỗi console là hỏng.
   ========================================================================== */
.sb-brand-logo { display: none; max-height: 34px; max-width: 100%; width: auto; object-fit: contain; }
.sb-brand.co-logo .sb-brand-logo { display: block; }
/* Có logo thì sidebar CHỈ hiện logo — ẩn cả khối chữ (ô "UN" · tên · dòng mô tả) */
.sb-brand.co-logo .sb-logo,
.sb-brand.co-logo .sb-brand-txt { display: none; }

.login-brand-logo {
  display: none; max-height: 100px; max-width: 100%; width: auto;
  object-fit: contain; margin-bottom: 10px;
}
.login-brand.co-logo { display: block; }
.login-brand.co-logo .login-brand-logo { display: block; }
.login-brand.co-logo .sb-logo { display: none; }
.login-brand.co-logo > div { margin-top: 0; }
.sb-brand-txt { min-width: 0; }
.sb-name { font: var(--fw-semibold) var(--text-body)/1.2 var(--font-display); color: var(--fg-primary); letter-spacing: var(--tracking-tight); }
.sb-sub { font: var(--fw-regular) var(--text-micro)/1.3 var(--font-sans); color: var(--fg-muted); margin-top: 2px; }

/* --- Chọn phân hệ (module) — PHƯƠNG ÁN A: Ô CHỌN, không phải danh sách nút ---
   Công ty chốt 29/09/2026. Đo trên laptop 1366×768: danh sách 7 phân hệ chiếm 310px
   (42% chiều cao sidebar) mà chỉ dùng vài lần mỗi ngày, còn danh sách mục con (dùng
   liên tục) chỉ được 267px nên 7/16 mục bị đẩy xuống dưới đáy màn hình. Ô chọn tốn
   ~50px và nhả lại ~260px cho mục con.
   Ô chọn KHÁC HẲN về hình thức với danh sách mục con — hết chuyện hai cấp trông giống
   nhau như bản cũ. */
.sb-mods-wrap { padding: 10px 10px 12px; border-bottom: 1px solid var(--border-subtle); }
.sb-mod-lbl {
  display: block;
  font: var(--fw-semibold) var(--text-micro)/var(--lh-micro) var(--font-sans);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--fg-muted); padding: 2px 2px 6px;
}
.sb-mod-sel {
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-muted);
  color: var(--fg-primary);
  font: var(--fw-semibold) var(--text-sm)/var(--lh-sm) var(--font-display);
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  /* Mũi tên tự vẽ — ô chọn mặc định của trình duyệt trông lệch với phần còn lại */
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%),
                    linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.sb-mod-sel:hover { border-color: var(--action-600); }
.sb-mod-sel:focus-visible { outline: 2px solid var(--action-600); outline-offset: 1px; }

/* --- 11 PHÂN HỆ LUÔN HIỆN (19/10/2026) -------------------------------------
   Bản vẽ chốt: sidebar có đủ 11 nhóm, đánh số 01..11 như màn demo. Mỗi dòng là một
   NÚT (bấm được bằng chuột / Enter / Tab). Phân hệ đang xem tô nền nhẹ; danh sách mục
   của nó nằm ngay dưới trong `#nav`. Danh sách 11 dòng cao ~300px nên vẫn thấy hết
   trên màn 1366×768 mà không phải cuộn qua lại như danh sách nút cũ. */
.sb-mod-list { display: flex; flex-direction: column; gap: 1px; }
.sb-mod-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 5px 9px; border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-md);
  font: var(--fw-medium) var(--text-sm)/1.25 var(--font-sans);
  color: var(--fg-secondary);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast);
}
.sb-mod-btn:hover { background: var(--bg-muted); color: var(--fg-primary); }
.sb-mod-btn:focus-visible { outline: 2px solid var(--action-600); outline-offset: -2px; }
.sb-mod-btn.on {
  background: var(--action-subtle); color: var(--fg-primary);
  font-weight: var(--fw-semibold);
}
.sb-mod-btn .so {
  flex: none; width: 18px;
  font: var(--fw-semibold) var(--text-micro)/1 var(--font-mono);
  color: var(--fg-muted);
}
.sb-mod-btn.on .so { color: var(--status-info-fg); }
.sb-mod-btn .ic { flex: none; width: 16px; text-align: center; opacity: .85; }
.sb-mod-btn .ten {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Ô CHỌN phân hệ CŨ: giữ trong DOM cho bộ kiểm / lối tắt cũ, nhưng KHÔNG hiện ra.
   1×1px + off-screen (không dùng display:none — trình duyệt tự động hoá vẫn phải chọn được). */
.sb-mod-sel-cu {
  position: absolute; left: -9999px; top: 0;
  width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
}

.sb-nav { overflow-y: auto; padding: 10px; flex: 1; }
/* --- NHÓM MỤC trong thanh bên (29/09/2026) — gấp/mở được.
   Vì sao: phân hệ Kế toán 16 mục để phẳng thì vượt vùng hiển thị ở màn 1366×768
   (nội dung 628px / vùng 490px ⇒ 4 mục bị cắt). Gom nhóm + gấp lại còn 419–457px.
   Tiêu đề nhóm là <button> để bấm được bằng chuột, Enter và Tab. --- */
.sb-group + .sb-group { margin-top: 10px; }
.sb-group-lbl {
  display: flex; align-items: center; gap: 6px;
  width: 100%; border: 0; background: none; cursor: pointer;
  font: var(--fw-semibold) var(--text-micro)/var(--lh-micro) var(--font-sans);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--fg-muted); padding: 7px 9px 5px;
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast);
}
.sb-group-lbl:hover { background: var(--bg-muted); color: var(--fg-secondary); }
.sb-group-lbl:focus-visible { outline: 2px solid var(--action-600); outline-offset: -2px; }
.sb-group-mui { flex: none; width: 10px; text-align: center; opacity: .75; }
.sb-group-ten {
  flex: 1 1 auto; min-width: 0; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Nhóm đang GẤP: chỉ ẩn MỤC, tiêu đề vẫn hiện để biết có nhóm gì.
   Màn hẹp (≤1024px) hiện lại hết — xem khối media ở cuối tệp. */
.sb-group.gap > .sb-item { display: none; }
.sb-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 8px 10px; margin-bottom: 2px;
  border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-md);
  font: var(--fw-medium) var(--text-sm)/var(--lh-sm) var(--font-sans);
  color: var(--fg-secondary);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast);
}
.sb-item:hover { background: var(--bg-muted); color: var(--fg-primary); }
.sb-item.on {
  background: var(--glass-bg-strong);
  color: var(--fg-primary);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-pill);
}
.sb-item .ic { width: 17px; text-align: center; flex: none; opacity: .85; }
/* Nhan dai phai co gian va cat bot — neu khong se xuong dong, day badge
   "sắp có" xuong duoi va lam lech ca danh sach. */
.sb-item > span:not(.ic):not(.count),
.sb-mod  > span:not(.ic) {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-item .count,
.sb-group-lbl .count {
  margin-left: auto; flex: none;
  font: var(--fw-semibold) var(--text-micro)/1 var(--font-mono);
  background: var(--bg-subtle); color: var(--fg-muted);
  padding: 3px 7px; border-radius: var(--radius-full);
}
.sb-item.on .count { background: var(--action-subtle); color: var(--status-info-fg); }
/* Nhóm không có việc nào thì KHÔNG hiện badge rỗng */
.sb-group-lbl .count:empty { display: none; }
.sb-foot { padding: 10px; border-top: 1px solid var(--border-subtle); }

/* --- 4.2 Khu vực chính --- */
.main { min-width: 0; display: flex; flex-direction: column; gap: var(--shell-gap); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  height: auto; min-height: var(--topbar-h);
  padding: 9px 14px;
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg), var(--ring-inset);
  position: sticky; top: var(--shell-gap); z-index: 30;
}
.tb-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tb-title { font: var(--fw-semibold) var(--text-h3)/var(--lh-h3) var(--font-display); color: var(--fg-primary); letter-spacing: var(--tracking-snug); }
.tb-sub { font: var(--fw-regular) var(--text-caption)/var(--lh-caption) var(--font-sans); color: var(--fg-muted); margin-top: 1px; }
.tb-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.content { padding-bottom: var(--space-10); }

/* Người dùng trên topbar */
.who { display: flex; align-items: center; gap: 9px; padding-left: 11px; border-left: 1px solid var(--border-subtle); }
.who-txt { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.who-name { font: var(--fw-semibold) var(--text-caption)/1.2 var(--font-sans); color: var(--fg-primary); }
.who-role { font: var(--fw-regular) var(--text-micro)/1.3 var(--font-sans); color: var(--fg-muted); }
.av {
  width: 32px; height: 32px; flex: none; border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--action-subtle); color: var(--status-info-fg);
  font: var(--fw-semibold) var(--text-caption)/1 var(--font-sans);
}
.av-sq { border-radius: var(--radius-sm); }

/* ==========================================================================
   5. THÀNH PHẦN
   ========================================================================== */

/* --- 5.1 Nút --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: var(--fw-semibold) var(--text-sm)/1 var(--font-sans);
  border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; padding: 0 13px; height: 36px; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast), box-shadow var(--dur-fast);
  background: none; color: var(--fg-secondary);
}
.btn-primary { background: var(--action-grad); color: var(--fg-on-primary); box-shadow: var(--shadow-glow-primary); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { filter: brightness(.95); }
.btn-secondary {
  background: var(--glass-bg-strong); color: var(--fg-primary);
  border-color: var(--border-default); box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { background: var(--neutral-0); border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--fg-secondary); }
.btn-ghost:hover { background: var(--bg-muted); color: var(--fg-primary); }
.btn-danger { background: var(--danger-500); color: var(--fg-on-primary); }
.btn-danger:hover { background: var(--danger-600); }
.btn-success { background: var(--success-500); color: var(--fg-on-primary); }
.btn-success:hover { background: var(--success-600); }
.btn-sm { height: 29px; padding: 0 10px; font-size: var(--text-caption); gap: 5px; }
.btn-lg { height: 42px; padding: 0 18px; font-size: var(--text-body); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn-icon {
  width: 36px; height: 36px; padding: 0; flex: none;
  border-radius: var(--radius-md); background: transparent;
  display: inline-grid; place-items: center; cursor: pointer;
  border: 1px solid transparent; color: var(--fg-secondary);
  transition: background var(--dur-fast);
}
.btn-icon:hover { background: var(--bg-muted); color: var(--fg-primary); }
.btn-icon.on { background: var(--action-subtle); color: var(--status-info-fg); }
.btn-icon.sm { width: 29px; height: 29px; }

/* --- 5.2 Nhãn --- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: var(--radius-full);
  font: var(--fw-semibold) 11.5px/1 var(--font-sans); white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
/* Chấm của badge dùng tông ĐẬM (-700) chứ không dùng tông tươi (-500): chấm nằm TRÊN
   nền badge có pha màu nên tông tươi chỉ đạt 1,9–2,9:1 — dưới ngưỡng 3:1 cho thành phần
   đồ hoạ (WCAG 2.1 SC 1.4.11). Tông đậm đạt 4,4–6,2:1. Nhãn chữ của badge vẫn là thứ
   mang thông tin chính, chấm chỉ để nhìn nhanh. */
.badge.success { background: var(--status-success-bg); color: var(--status-success-fg); }
.badge.success .dot { background: var(--success-700); }
.badge.warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.badge.warning .dot { background: var(--warning-700); }
.badge.danger  { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.badge.danger .dot { background: var(--danger-500); }
.badge.info    { background: var(--status-info-bg); color: var(--status-info-fg); }
.badge.info .dot { background: var(--primary-500); }
.badge.neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.badge.neutral .dot { background: var(--neutral-600); }
/* Dấu chấm của badge "accent" dùng --accent-700 (vàng sẫm) chứ KHÔNG dùng --accent-500:
   #FFCC00 trên nền kem #FFF3BF chỉ đạt tương phản ~1,4:1 — chấm coi như vô hình. Vàng
   sẫm #8A6A00 đạt ~4,5:1, thấy rõ mà vẫn đúng tông thương hiệu. */
.badge.accent  { background: var(--accent-100); color: var(--accent-700); }
.badge.accent .dot { background: var(--accent-700); }
.badge.pill-lg { height: 26px; padding: 0 11px; font-size: var(--text-caption); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px; border-radius: var(--radius-full);
  font: var(--fw-medium) var(--text-caption)/1 var(--font-sans);
  background: var(--bg-subtle); color: var(--fg-secondary);
  border: 1px solid var(--border-subtle); white-space: nowrap;
}
.chip.on { background: var(--action-subtle); color: var(--status-info-fg); border-color: transparent; font-weight: var(--fw-semibold); }
/* Trạng thái dùng / ngừng dùng của danh mục (mã NPL, vật tư…). Chỉ dùng hai tông
   này để "đang dùng" và "đã ngừng" không lẫn với các nhãn trung tính khác. */
.chip.ok { background: var(--success-50, #ecfdf5); color: var(--success-700, #047857); border-color: transparent; font-weight: var(--fw-semibold); }
.chip.warn { background: var(--warning-50, #fffbeb); color: var(--warning-700, #b45309); border-color: transparent; font-weight: var(--fw-semibold); }

/* --- 5.3 Thẻ --- */
.card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), var(--ring-inset);
}
.card-pad { padding: 16px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border-subtle);
}
.card-head h3 { margin: 0; font: var(--fw-semibold) var(--text-h3)/var(--lh-h3) var(--font-display); color: var(--fg-primary); }
.card-head .link { color: var(--link); font: var(--fw-medium) var(--text-sm)/1 var(--font-sans); text-decoration: none; }

/* Khối có tiêu đề (Block) */
.m-block { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg), var(--ring-inset); }
.block-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
.block-h h3 { margin: 0; font: var(--fw-semibold) var(--text-h3)/var(--lh-h3) var(--font-display); color: var(--fg-primary); }
.block-b { padding: 16px; }

/* ---------- KHỐI GẤP/MỞ + THANH TÓM TẮT (hộp thoại Phương án kinh doanh) ----------
   Công ty yêu cầu 23/09/2026: hộp thoại dài quá, cần expand/collapse cho gọn. Khi gấp
   lại, tiêu đề vẫn hiện TÓM TẮT BẰNG SỐ (`.kd-gap-tt`) nên không mất thông tin. */
.kd-gap > .kd-gap-h { justify-content: flex-start; gap: 10px; padding: 10px 14px; }
.kd-gap > .kd-gap-h h3 { font: var(--fw-semibold) var(--text-body)/var(--lh-body) var(--font-display); }
.kd-gap > .block-b { padding: 14px; }
.kd-gap-nut {
  flex: none; width: 26px; height: 26px; padding: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 12px; line-height: 1;
  color: var(--fg-secondary); background: var(--panel-2);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
}
.kd-gap-nut:hover { color: var(--fg-primary); border-color: var(--border-strong); }
.kd-gap-tt { font: var(--fw-regular) var(--text-micro)/var(--lh-micro) var(--font-sans); color: var(--fg-muted); }

/* Thanh tóm tắt: GỌN MỘT DÒNG — luôn nhìn thấy khi cuộn mà không chiếm màn hình.
   ⚠ Bản đầu dùng 4 thẻ KPI cỡ lớn ở đây và bị Công ty phản ánh *"Thanh tóm tắt bị quá
   lớn nên chiếm hết trang"* (24/09/2026). Nay chỉ là chữ "nhãn + số" nằm ngang. */
.kd-tom-tat {
  position: sticky; top: 0; z-index: 2;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 8px 12px; margin-bottom: 10px;
}
.kd-tom-tat-h {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font: var(--fw-semibold) var(--text-body)/var(--lh-body) var(--font-sans); color: var(--fg-primary);
}
.kd-tom-tat-h .btn { padding: 3px 8px; font-size: 12px; }
.kd-tt-dong { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 4px; }
.kd-tt-o { display: inline-flex; align-items: baseline; gap: 6px; }
.kd-tt-nhan {
  font: var(--fw-medium) var(--text-micro)/var(--lh-micro) var(--font-sans);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted);
}
.kd-tt-o b { font: var(--fw-semibold) var(--text-body)/var(--lh-body) var(--font-sans); }

@media print { .kd-tom-tat { position: static; } .kd-gap > .block-b[hidden] { display: block; } }

/* --- 5.4 Thẻ KPI --- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-6); }
.kpi {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 15px 16px; display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.kpi.click { cursor: pointer; }
.kpi.click:hover { box-shadow: var(--shadow-xl); border-color: var(--border-strong); }
/* Thẻ KPI BẤM ĐƯỢC (dựng bằng `<button>`): bấm là mở danh sách đã lọc sẵn.
   Phải tự đặt lại font/text-align vì `<button>` không thừa hưởng như `<div>`. */
.kpi.kpi-bam { cursor: pointer; font: inherit; color: inherit; text-align: left; }
.kpi.kpi-bam:hover { box-shadow: var(--shadow-xl); border-color: var(--border-strong); }
.kpi.kpi-bam:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kpi-lbl {
  font: var(--fw-semibold) var(--text-micro)/var(--lh-micro) var(--font-sans);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted);
}
.kpi-ic {
  width: 34px; height: 34px; flex: none; border-radius: var(--radius-md);
  display: grid; place-items: center; font-size: 16px;
  background: var(--primary-50); color: var(--primary-600);
}
.kpi-val {
  font: var(--fw-bold) 23px/1.15 var(--font-mono);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--fg-primary);
}
.kpi-val small { font-size: 13px; font-weight: var(--fw-medium); color: var(--fg-muted); margin-left: 3px; }
.kpi-foot { font: var(--fw-regular) var(--text-caption)/var(--lh-caption) var(--font-sans); color: var(--fg-muted); }
.kpi.tone-danger .kpi-val { color: var(--danger-600); }
.kpi.tone-danger .kpi-ic { background: var(--status-danger-bg); color: var(--danger-600); }
.kpi.tone-warning .kpi-val { color: var(--warning-700); }
.kpi.tone-warning .kpi-ic { background: var(--status-warning-bg); color: var(--warning-700); }
.kpi.tone-success .kpi-val { color: var(--success-700); }
.kpi.tone-success .kpi-ic { background: var(--status-success-bg); color: var(--success-700); }
.kpi.tone-accent .kpi-ic { background: var(--accent-100); color: var(--accent-700); }

/* --- 5.5 Bảng --- */
/* =============================================================================
   BẢNG RỘNG: CHO CHỮ XUỐNG DÒNG + CỘT ĐẦU DÍNH (16/10/2026)
   -----------------------------------------------------------------------------
   VÌ SAO SỬA: `style.css` đặt `th, td { white-space: nowrap }` cho MỌI bảng, nên bảng nhiều cột bị
   đẩy rộng gấp đôi màn hình — đo thật ngày 16/10/2026: "Phải thu khách hàng" CẦN 2402px trong khung
   CHỈ 1044px (khuất 1358px — hơn nửa bảng!), "Nhập kho & chứng từ" 2320px, "Tiền đặt cọc" 2142px.
   Hệ quả: muốn nhập ô ở cột cuối phải KÉO NGANG, mà kéo xong thì mất tên dòng → Công ty phản ánh
   "form bị lớn ngoài màn hình, khó nhập".
   NAY: (1) chữ được XUỐNG DÒNG (trừ SỐ và MÃ — cắt số/mã thì đọc sai), (2) CỘT ĐẦU DÍNH bên trái
   để kéo ngang vẫn luôn biết đang ở dòng nào, (3) ô bảng gọn hơn một chút.
   ============================================================================= */
.tbl tbody td, .tbl thead th, .tbl tfoot td { white-space: normal; }
/* SỐ thì KHÔNG cắt (đọc sai số là tai hại). MÃ cho xuống dòng ở dấu gạch/chấm — mã chứng từ dài
   (THU-BT-CANTRU-91317) là một trong những chỗ ăn bề rộng nhất; `anywhere` để không tràn khỏi ô. */
.tbl td.num, .tbl th.num, .tbl td .badge, .tbl th .badge { white-space: nowrap; }
.tbl td.mono { white-space: normal; overflow-wrap: anywhere; }
/* Nút trong bảng nhỏ gọn hơn (cột "Thao tác" từng rộng 320–338px). */
.tbl .acts .btn-sm { padding: 4px 7px; }
.tbl thead th, .tbl tbody td { padding: 9px 12px; }
/* Cột đầu DÍNH: nền phải ĐỤC, không thì chữ của các cột cuộn phía dưới lộ qua. */
.tbl thead th:first-child { position: sticky; left: 0; z-index: 4; background: var(--tbl-head-bg); }
.tbl tbody td:first-child, .tbl tfoot td:first-child {
  position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--border-subtle);
}
.tbl.rows tbody tr:hover td:first-child { background: var(--bg-subtle); }
/* Bảng dựng TRỰC TIẾP trong `.tbl-wrap` (không qua lớp `.tbl`) cũng cần như vậy. */
.tbl-wrap > table td, .tbl-wrap > table th { white-space: normal; }
.tbl-wrap > table td.num, .tbl-wrap > table td.mono { white-space: nowrap; }

/* CHẾ ĐỘ THU GỌN MENU (Công ty chốt 20/10/2026 — lỗi ③).
   Thay hẳn `body.rong` cũ (nút "⛶ Rộng" trên thanh trên ẩn HẲN sidebar). Nay sidebar thu
   về DẢI HẸP 56px, CHỈ CÒN ICON — vẫn bấm được 11 phân hệ, vẫn thấy tên qua tooltip.
   Cơ chế: đổi DUY NHẤT biến `--sidebar-w` trên `body`; `.shell` (grid 2 cột) và `.sidebar`
   đều đọc biến này nên CỘT MENU HẸP LẠI và VÙNG NỘI DUNG TỰ GIÃN RỘNG tương ứng, không
   phải sửa `grid-template-columns` ở từng chỗ (bài học 16/10/2026: ẩn sidebar mà không đổi
   cột grid thì `.main` bị xếp vào cột đầu, nội dung co còn 270px).
   Toàn bộ luật thu gọn nằm trong `@media (min-width: 901px)` — dưới 900px sidebar vốn đã
   xếp NGANG thành dải trên cùng nên không thu gọn được. */
body.menu-gon { --sidebar-w: 56px; }

/* CHẾ ĐỘ RỘNG CŨ: giữ tương thích nếu tệp/công cụ khác còn bật `body.rong`. */
body.rong .shell { grid-template-columns: 1fr; }
body.rong .sidebar { display: none; }
/* Nhắc kéo ngang — chỉ hiện khi bảng THẬT SỰ rộng hơn khung (JS tự kiểm rồi mới chèn). */
.nhac-cuon-ngang {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px;
  color: var(--fg-secondary); background: var(--warning-50, #FEF6E7);
  border-bottom: 1px solid var(--border-subtle);
}

/* Hàng CHI TIẾT mở rộng (16/10/2026): bấm vào dòng để xem các cột đã được gộp/ẩn đi. */
.dong-ct > td { background: var(--bg-subtle); padding: 10px 14px; }
.dong-ct .kv { margin: 0; grid-template-columns: 170px 1fr; }
.dong-ct .kv dt { color: var(--fg-secondary); }
.dong-ct .kv dd { color: var(--fg-primary); }

.tbl-wrap {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), var(--ring-inset);
  overflow: hidden;
}
.tbl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.tbl-scroll { overflow: auto; max-height: 70vh; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
/* Tiêu đề cột: trước đây 10.5px IN HOA giãn chữ — quá nhỏ để đọc. Nay 12px, vẫn in
   hoa nhưng giãn chữ nhẹ, và nền đậm hơn một chút để tách khỏi dữ liệu. */
.tbl thead th {
  text-align: left; font-size: var(--text-micro); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--fg-secondary); padding: 10px 14px; background: var(--tbl-head-bg);
  border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.tbl tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--fg-secondary); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl.rows tbody tr { transition: background var(--dur-fast); }
.tbl.rows tbody tr:hover { background: var(--bg-subtle); }
.tbl tbody tr.sel { background: var(--action-subtle); }
.tbl tfoot td { padding: 11px 14px; background: var(--tbl-foot-bg); font-weight: var(--fw-semibold); color: var(--fg-primary); border-top: 1px solid var(--border-subtle); position: sticky; bottom: 0; }
.tbl .num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.tbl .mono { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--fg-secondary); }
.tbl .wrap { white-space: normal; min-width: 150px; max-width: 280px; }
.tbl .strong { font-weight: var(--fw-semibold); color: var(--fg-primary); }
.tbl .link { color: var(--link); font-weight: var(--fw-medium); cursor: pointer; text-decoration: none; }
.tbl .link:hover { text-decoration: underline; }
.tbl .acts { display: flex; gap: 5px; }

/* =============================================================================
   BẢNG DANH SÁCH ĐƠN — DÒNG BẤM ĐƯỢC (bản vẽ 20/10/2026)
   -----------------------------------------------------------------------------
   Bấm DÒNG để mở hồ sơ đơn (hai nút trong dòng vẫn bấm riêng được — JS dừng lan
   sự kiện). Chỉ thêm con trỏ + vòng focus, KHÔNG đổi màu nền/sọc của `.tbl`.
   ============================================================================= */
.tbl tbody tr.dong-bam { cursor: pointer; }
.tbl tbody tr.dong-bam:focus-visible {
  outline: 2px solid var(--action); outline-offset: -2px;
}
/* Khối bảng size trong hồ sơ đơn: khi mở từ nút "Bảng size" thì được tô viền để
   người dùng thấy ngay mình vừa được đưa tới đâu (không đổi nội dung bảng). */
.kd-bang-size { scroll-margin-top: 12px; }
.kd-bang-size.kd-size-toi {
  outline: 3px solid var(--action); outline-offset: 2px; border-radius: 6px;
}

/* --- 5.6 Ô nhập --- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label { font: var(--fw-semibold) var(--text-caption)/var(--lh-caption) var(--font-sans); color: var(--fg-secondary); }
.field .req { color: var(--danger-500); margin-left: 2px; }
.field .help { font: var(--fw-regular) var(--text-micro)/var(--lh-micro) var(--font-sans); color: var(--fg-muted); }
.input, .select, .textarea {
  font: var(--fw-regular) var(--text-sm)/var(--lh-sm) var(--font-sans);
  width: 100%; height: 36px; padding: 0 11px;
  color: var(--fg-primary);
  background: var(--glass-bg-strong);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.textarea { height: auto; padding: 9px 11px; resize: vertical; min-height: 72px; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-disabled); }
.input:disabled, .select:disabled { background: var(--bg-subtle); color: var(--fg-muted); cursor: not-allowed; }
.select { cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%); background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }

/* --- 5.7 Thẻ chọn (Tabs) --- */
.tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--border-subtle); overflow-x: auto; }
.tab {
  position: relative; padding: 11px 13px;
  font: var(--fw-medium) var(--text-sm)/1 var(--font-sans);
  color: var(--fg-muted); cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  background: none; border: none; white-space: nowrap;
  transition: color var(--dur-fast);
}
.tab:hover { color: var(--fg-primary); }
.tab .count { font: var(--fw-semibold) var(--text-micro)/1 var(--font-mono); background: var(--bg-subtle); padding: 3px 6px; border-radius: var(--radius-full); }
.tab.on { color: var(--fg-primary); font-weight: var(--fw-semibold); }
.tab.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--action); border-radius: 2px; }
.tab.on .count { background: var(--action-subtle); color: var(--status-info-fg); }

/* --- 5.8 Nhóm chọn kiểu viên (Segmented) --- */
.seg { display: inline-flex; background: var(--bg-subtle); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.seg button {
  border: 0; background: none; cursor: pointer;
  padding: 6px 12px; border-radius: var(--radius-sm);
  font: var(--fw-medium) var(--text-caption)/1 var(--font-sans); color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 6px; transition: all var(--dur-fast);
}
.seg button:hover { color: var(--fg-primary); }
.seg button.on { background: var(--glass-bg-strong); color: var(--fg-primary); font-weight: var(--fw-semibold); box-shadow: var(--shadow-pill); }

/* --- 5.9 Thanh tiến độ --- */
.prog { height: 6px; border-radius: 999px; background: var(--neutral-200); overflow: hidden; }
.prog > i { display: block; height: 100%; border-radius: 999px; background: var(--action); }
.prog.tone-success > i { background: var(--success-500); }
.prog.tone-warning > i { background: var(--warning-500); }
.prog.tone-danger > i { background: var(--danger-500); }

/* --- 5.10 Thanh tuổi nợ --- */
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 180px 1fr 150px; gap: 12px; align-items: center; font-size: var(--text-sm); }
.bar-row .lbl { color: var(--fg-secondary); }
.bar-track { height: 20px; background: var(--bg-subtle); border-radius: var(--radius-sm); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--radius-sm); transition: width var(--dur-slow) var(--ease-emphasis); min-width: 2px; }
.bar-row .amt { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--fg-primary); }

/* --- 5.11 Cảnh báo --- */
.alert { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border-radius: var(--radius-md); font-size: var(--text-sm); border: 1px solid; }
.alert.info { background: var(--status-info-bg); border-color: rgba(30,30,30,.18); color: var(--status-info-fg); }
.alert.warn { background: var(--status-warning-bg); border-color: rgba(245,158,11,.28); color: var(--status-warning-fg); }
.alert.danger { background: var(--status-danger-bg); border-color: rgba(229,72,77,.24); color: var(--status-danger-fg); }
.alert.success { background: var(--status-success-bg); border-color: rgba(23,163,90,.24); color: var(--status-success-fg); }
.alert b { font-weight: var(--fw-semibold); }

/* --- 5.12 Trạng thái rỗng --- */
.empty { text-align: center; padding: 40px 24px; color: var(--fg-muted); display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 460px; margin-inline: auto; }
.empty .eic { width: 46px; height: 46px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--bg-subtle); font-size: 20px; color: var(--fg-muted); margin-bottom: 4px; }
.empty .et { font: var(--fw-semibold) var(--text-body)/var(--lh-body) var(--font-sans); color: var(--fg-primary); }

/* --- 5.13 Khuôn nhập liệu --- */
.drawer-panel { display: flex; flex-direction: column; height: 100%; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); }
.drawer-head h2 { margin: 0; font: var(--fw-semibold) var(--text-h3)/var(--lh-h3) var(--font-display); color: var(--fg-primary); }
.drawer-head .sub { font: var(--fw-regular) var(--text-caption)/var(--lh-caption) var(--font-sans); color: var(--fg-muted); margin-top: 2px; }
.drawer-body { padding: 16px 18px 26px; overflow-y: auto; flex: 1; }
.drawer-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 13px 18px; border-top: 1px solid var(--border-subtle); }

/* --- 5.14 Modal / Drawer + lớp phủ --- */
/* --------------------------------------------------------------------------
   QUAN TRONG: #modalWrap / #drawerWrap la phan tu bao ngoai duoc bat/tat
   bang thuoc tinh `hidden`. Neu de nguyen `display:block` thi chieu cao = 0
   va toa do nam CUOI TRANG, khien:
     · trinh duyet bao phan tu khong hien (getBoundingClientRect 1440x0)
     · .scrim (position:fixed;inset:0) khong phu kin man hinh
   Vi vay phai phu kin viewport ngay tu lop bao ngoai.
   -------------------------------------------------------------------------- */
#modalWrap, #drawerWrap {
  position: fixed; inset: 0; z-index: 55;
  display: flex;
  align-items: center; justify-content: center;
}
#drawerWrap { justify-content: flex-end; }

.scrim { position: fixed; inset: 0; background: rgba(11,14,19,.40); z-index: 60; }
.modal-wrap { position: absolute; inset: 0; z-index: 61; display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.modal {
  position: relative; width: 540px; max-width: 100%;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--radius-2xl);
  box-shadow: 0 24px 64px rgba(31,38,135,.18);
  animation: pop var(--dur-base) var(--ease-emphasis);
  margin: auto;
}
.modal.w560 { width: 560px; }
.modal.w640 { width: 640px; }
.modal.w760 { width: 760px; }
.modal.w920 { width: 920px; }
.modal.w1040 { width: 1040px; }
/* Hộp thoại rộng: bề rộng thật do openModal đặt bằng style (xem app.js).
   Ở đây chỉ lo phần BÊN TRONG cho khỏi tràn: nội dung dài thì cuộn, không đẩy
   nút Lưu ra khỏi màn hình. */
.modal.rong { max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.modal.rong .modal-body { overflow-y: auto; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 17px 18px 15px; border-bottom: 1px solid var(--border-subtle); }
.modal-head h2 { margin: 0; font: var(--fw-semibold) var(--text-h3)/var(--lh-h3) var(--font-display); color: var(--fg-primary); }
.modal-body { padding: 18px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border-subtle); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

.drawer-wrap { position: absolute; inset: 0; z-index: 61; display: flex; justify-content: flex-end; }
.drawer {
  position: relative; width: 520px; max-width: 100%; height: 100%;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
  border-left: 1px solid rgba(255,255,255,.9);
  box-shadow: -24px 0 64px rgba(31,38,135,.16);
  animation: slide var(--dur-base) var(--ease-emphasis);
  display: flex; flex-direction: column;
}
.drawer.wide { width: min(1400px, 97vw); }

/* Nút đóng luôn nằm trong tầm mắt, dù cuộn tới đâu — tránh bị "kẹt" trong khung. */
.drawer-head {
  position: sticky; top: 0; z-index: 3;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
@keyframes slide { from { transform: translateX(24px); opacity: .5; } to { transform: none; opacity: 1; } }

/* --- 5.15 Thông báo nổi --- */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 90; max-width: min(720px, 92vw);
  padding: 12px 16px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--action);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  font: var(--fw-medium) var(--text-sm)/1.5 var(--font-sans);
  color: var(--fg-primary); white-space: pre-wrap;
}
.toast.ok { border-left-color: var(--success-500); }
.toast.err { border-left-color: var(--danger-500); }

/* --- 5.16 Bảng mô tả (dl) --- */
.kv { display: grid; grid-template-columns: 176px 1fr; gap: 7px 16px; font-size: var(--text-sm); margin: 0 0 18px; }
.kv dt { color: var(--fg-muted); }
.kv dd { margin: 0; color: var(--fg-primary); }
.kv dd.mono { font-family: var(--font-mono); font-size: var(--text-caption); }

/* --- 5.17 Tổng kết --- */
.totals { display: flex; flex-wrap: wrap; gap: 8px 22px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px 15px; font-size: var(--text-sm); margin-top: 14px; }
.totals b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-primary); }

/* --- 5.18 Ma trận phân quyền --- */
.perm-grid { display: grid; gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: auto; }
.perm-head { background: var(--bg-subtle); padding: 9px 12px; font-size: var(--text-micro); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); position: sticky; top: 0; z-index: 2; }
.perm-group { background: var(--bg-muted); padding: 7px 12px; font-size: var(--text-micro); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--status-info-fg); }
.perm-name { background: var(--glass-bg-strong); padding: 7px 12px; font-size: var(--text-sm); }
.perm-cell { background: var(--glass-bg-strong); display: grid; place-items: center; padding: 3px; }

/* --- 5.19 Ô đánh dấu --- */
.ck {
  width: 19px; height: 19px; flex: none; border-radius: var(--radius-xs);
  border: 1.5px solid var(--border-strong); background: var(--glass-bg-strong);
  display: grid; place-items: center; cursor: pointer; color: transparent;
  font-size: 12px; line-height: 1; transition: all var(--dur-fast);
}
.ck:hover { border-color: var(--action); }
.ck.on { background: var(--action); border-color: var(--action); color: var(--fg-on-primary); }
.check-list { display: flex; flex-direction: column; gap: 7px; background: var(--glass-bg-strong); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 11px 12px; }
.check { display: flex; align-items: center; gap: 9px; font-size: var(--text-sm); cursor: pointer; }

/* --- 5.20 Bảng xem trước giá trị tự tính --- */
.preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 18px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 13px 15px; font-size: var(--text-caption); margin-top: 8px; }
.preview .muted { color: var(--fg-muted); }

/* --- 5.21 Tiện ích --- */
.muted { color: var(--fg-muted); }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.toolbar { display: flex; align-items: center; gap: 11px; margin: 14px 0; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--shell-gap); }
.section { font: var(--fw-semibold) var(--text-h3)/var(--lh-h3) var(--font-display); color: var(--fg-primary); margin: 26px 0 12px; }
.section:first-child { margin-top: 0; }
.stack { display: flex; flex-direction: column; gap: var(--shell-gap); }
.loading { padding: 48px; text-align: center; color: var(--fg-muted); }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   6. TRANG ĐĂNG NHẬP
   ========================================================================== */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: min(430px, 100%);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl), var(--ring-inset);
  padding: 28px 26px 24px;
}
.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.login-brand h1 { margin: 0; font: var(--fw-bold) var(--text-h2)/var(--lh-h2) var(--font-display); color: var(--fg-primary); letter-spacing: var(--tracking-snug); }
/* KHÔNG còn quy tắc `.login-brand p`: dòng mô tả dưới tên phần mềm đã bỏ 28/09/2026 */
.login-btn { width: 100%; margin-top: 8px; height: 42px; }
.login-error { margin-top: 14px; padding: 11px 13px; border-radius: var(--radius-md); font-size: var(--text-sm); background: var(--status-danger-bg); border: 1px solid rgba(229,72,77,.24); color: var(--status-danger-fg); }
.login-error.lock { background: var(--status-warning-bg); border-color: rgba(245,158,11,.28); color: var(--status-warning-fg); }
.login-help { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border-subtle); font-size: var(--text-caption); color: var(--fg-muted); }
.login-help summary { cursor: pointer; color: var(--link); font-weight: var(--fw-medium); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.mini { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: var(--text-micro); }
table.mini th, table.mini td { border: 1px solid var(--border-subtle); padding: 5px 8px; text-align: left; color: var(--fg-secondary); white-space: nowrap; }
table.mini th { background: var(--bg-subtle); color: var(--fg-muted); font-weight: var(--fw-semibold); }

/* ==========================================================================
   7. BĂNG BÁO CHẾ ĐỘ TEST
   ========================================================================== */
.mode-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 var(--shell-gap);
  padding: 11px 16px;
  background: var(--status-warning-bg);
  border: 1px solid rgba(245,158,11,.28);
  border-radius: var(--radius-lg);
  font: var(--fw-medium) var(--text-caption)/var(--lh-caption) var(--font-sans);
  color: var(--status-warning-fg);
}
.mode-banner b { font-weight: var(--fw-bold); }
.mode-hint { color: var(--fg-muted); font-size: var(--text-micro); }
.mode-hint code { background: var(--glass-bg-strong); border: 1px solid var(--border-subtle); padding: 2px 6px; border-radius: var(--radius-xs); font-family: var(--font-mono); color: var(--fg-primary); }

/* ==========================================================================
   8. TRANG IN PO (khổ A4)
   ========================================================================== */
.po-page { background: #fff; color: #111; max-width: 210mm; margin: 18px auto; padding: 16mm 14mm; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.po-page h1 { font-family: var(--font-display); font-size: 17px; text-align: center; margin: 16px 0 4px; }
.po-page .head { display: flex; justify-content: space-between; gap: 20px; }
.po-page .head .col { flex: 1; }
.po-page table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 11.5px; }
.po-page th, .po-page td { border: 1px solid #333; padding: 4px 6px; color: #111; background: none; }
.po-page th { background: #eee; text-align: center; position: static; }
.po-page .num { text-align: right; font-variant-numeric: tabular-nums; }
.po-page .sign { display: flex; justify-content: space-between; margin-top: 28px; text-align: center; }
.po-page .sign div { flex: 1; }
.po-page .muted { color: #555; }
.po-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 16px; margin-bottom: 16px; background: var(--glass-bg-soft); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); }
@media print {
  .po-toolbar { display: none; }
  body { background: #fff; }
  body::before { display: none; }
  .po-page { margin: 0; padding: 10mm; max-width: none; border: 0; box-shadow: none; }
}

/* ==========================================================================
   8C. IN PHIẾU — BÁO GIÁ · PAKD · BAN HÀNH SẢN XUẤT · HỢP ĐỒNG
   --------------------------------------------------------------------------
   Phiếu in KHÔNG nằm trong hộp thoại của giao diện: hộp thoại có thanh bên và
   nền mờ, in ra sẽ lẫn cả giao diện. Nên phiếu nằm trong lớp phủ riêng ở cấp
   cao nhất, và khi in thì CSS ẩn TOÀN BỘ giao diện, chỉ chừa khổ giấy A4.

   Bố cục theo chuẩn văn bản Việt Nam: đầu trang có tên công ty + MST, giữa là
   tiêu đề và số phiếu, cuối là khối chữ ký.
   ========================================================================== */

.in-wrap {
  position: fixed; inset: 0; z-index: 400;
  overflow: auto; background: var(--bg-app);
  padding: 0 0 40px;
}
.in-toolbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 18px; background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border);
}
.in-toolbar-ten { font-weight: var(--fw-bold); font-size: var(--text-body); }
.in-toolbar-mach { color: var(--fg-muted); font-size: var(--text-caption); }

/* --- Tờ giấy A4 --- */
.in-trang {
  width: 210mm; min-height: 297mm; margin: 20px auto;
  padding: 15mm 15mm 18mm; background: #fff; color: #111;
  /* Nhận diện mới: thân phiếu dùng INTER (font phụ của thương hiệu). Bản cũ dùng
     Times New Roman — không có trong bộ nhận diện. Bề rộng chữ đổi nên các bài kiểm
     tra bố cục bản in (bề rộng cột, xuống dòng, lề) được chạy lại để xác nhận. */
  font-family: var(--font-sans);
  font-size: 12px; line-height: 1.5;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
}
/* Khổ NGANG cho phiếu nhiều cột (Phiếu đề xuất may mẫu có bảng 11 cột): in dọc thì
   chữ bị bóp lại, khó đọc — công ty yêu cầu 22/09/2026. Khổ IN (`@page`) do
   `inDatKhoGiay()` trong in-phieu.js chèn riêng, vì `@page` là quy tắc cấp tài liệu. */
.in-trang.in-ngang { width: 297mm; min-height: 210mm; }
/* Báo giá in DỌC có lề: màn xem trước dùng ĐÚNG lề của khổ in (15mm trên/dưới ·
   14mm trái/phải) để người dùng thấy trước bản in thật, không bị "dàn sát mép". */
.in-trang.in-co-le { padding: 15mm 14mm; }

/* --- Tệp thiết kế / thông số: phiếu in CHỈ ghi số tệp, KHÔNG in nội dung ---
   (công ty chốt 23/09/2026: tự in tệp ngoài cho dễ) nên không còn khối ảnh/PDF/lưới
   ô Excel trong phiếu in — đã bỏ các lớp CSS `.in-anh-tk`, `.in-pdf-tk`, `.in-phu-luc`,
   `.in-bang-thong-so` cho gọn. */
.in-trang h1 { font-family: var(--font-display); font-size: 19px; margin: 0 0 3px; letter-spacing: .5px; text-align: center; }

/* --------------------------------------------------------------------------
   BẢNG BÁO GIÁ in theo ĐÚNG FORM EXCEL CỦA CÔNG TY (24/09/2026) + TRAU CHUỖI LẠI.
   Khác các phiếu khác: KHÔNG khối đầu trang kiểu hoá đơn (logo · địa chỉ · MST) và
   KHÔNG khối chữ ký — file mẫu của Công ty không có hai phần đó. Địa chỉ/MST/website
   nằm ở DÒNG CUỐI; điều khoản nằm trong khối GHI CHÚ.

   Nguyên tắc trình bày (bản in đẹp + in đen trắng vẫn rõ):
     · một MÀU NHẤN duy nhất (#1E1E1E = UNIG Charcoal) dùng rất tiết chế: dải dưới
       tiêu đề, đường kẻ
       đậm của bảng, dòng TỔNG CỘNG — in đen trắng vẫn thành xám đậm, không mất thông tin;
     · bảng KHÔNG kẻ ô vuông: chỉ đường kẻ ngang mảnh → mắt đọc theo dòng, không bị rối;
     · số căn phải + chữ số đều nhau (tabular) để cột tiền thẳng hàng;
     · khối GHI CHÚ đóng khung nhạt, thụt lề treo (hanging indent) cho dễ đọc.
   -------------------------------------------------------------------------- */
.in-bg { font-size: 12.5px; color: #111; }
/* Tên công ty ở ĐẦU trang đã BỎ (công ty yêu cầu 25/09/2026: *"bỏ dòng chữ CTCP… vì
   nhìn form không hợp lý"*) — tên công ty chỉ còn ở DÒNG CUỐI (`.in-bg-foot`). */
/* ĐẦU TRANG báo giá: LOGO ở GÓC TRÊN TRÁI, cao 60px (~16mm), KHÔNG viền; tiêu đề
   "BẢNG BÁO GIÁ" căn giữa NGAY DƯỚI logo (Công ty yêu cầu 20/10/2026).
   Logo lấy theo CÔNG TY BÁN của đơn (`GET /api/company-logo/<mã công ty>`); công ty chưa
   khai logo thì dùng `/logo-unig.png` — xem `logoSrc` trong in-phieu.js.
   Máy in tắt ảnh vẫn còn tên công ty ở DÒNG CUỐI (`.in-bg-foot`). */
/* DÒNG ĐẦU = MỘT HÀNG: logo DÁN Ở LỀ TRÁI, tiêu đề căn GIỮA TỜ (không đặt sát cạnh
   logo). Logo định vị tuyệt đối nên bề rộng logo KHÔNG đẩy tiêu đề lệch khỏi tâm tờ;
   `min-height` bằng đúng chiều cao logo để dòng đầu cao đều, không bị nhảy khi ảnh chậm.
   Logo 60px nằm trong khoảng mẫu chuẩn 56–64px. */
.in-bg-dau {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 64px;
}
.in-bg-logo-o {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; height: 60px;
}
.in-bg .in-bg-logo {
  width: auto; height: 60px; max-width: 55mm; object-fit: contain;
  display: block; border: 0; padding: 0; background: none;
}
/* Tiêu đề "BẢNG BÁO GIÁ": IN ĐẬM · CHỮ HOA · CĂN GIỮA · ~16px (Công ty chốt 20/10/2026).
   ⚠ Phải dùng `.in-bg .in-bg-td` (2 lớp): quy tắc chung `.in-trang h1` (19px) có độ ưu
   tiên cao hơn một lớp nên nếu chỉ khai `.in-bg-td` thì cỡ chữ bị đè về 19px. */
.in-bg .in-bg-td {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  text-align: center; text-transform: uppercase; letter-spacing: 2px; margin: 0;
  flex: 1 1 auto;
}
/* Đường kẻ MẢNH dưới dòng đầu (mẫu chuẩn: 1px) — không dùng dải đậm 2px. */
.in-bg-rule { height: 1px; background: #1E1E1E; margin: 8px 0 12px; }

/* Khối thông tin: TRÁI = khách hàng, PHẢI = ngày + số báo giá (2 cột thẳng hàng) */
.in-bg-meta { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 10px; }
.in-bg-meta-trai { max-width: 55%; min-width: 0; }
.in-bg-meta-phai {
  display: grid; grid-template-columns: auto auto; gap: 2px 10px;
  justify-items: end; align-items: baseline; white-space: nowrap; min-width: 0;
}
/* Số chứng từ dài (mã đơn dài) KHÔNG được đẩy tràn ra ngoài lề phải tờ giấy —
   bản in 25/09/2026 bị cắt cụt số báo giá vì ô này `nowrap` mà không cho co lại. */
.in-bg .in-bg-so { white-space: normal; overflow-wrap: anywhere; text-align: right; }
/* Nhãn 9px CHỮ HOA XÁM (KÍNH GỬI · NGÀY · SỐ BÁO GIÁ) — đúng mẫu chuẩn. */
.in-bg-nhan { font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: #5C5C5C; }
.in-bg-khach { font-weight: 700; font-size: 13px; text-transform: uppercase; margin-top: 1px; }
.in-bg-diachi { font-size: 11.5px; color: #333; margin-top: 2px; }

/* Bảng: KẺ Ô ĐẦY ĐỦ (dọc + ngang) như mẫu Công ty gửi 20/10/2026 — mỗi ô là một ô
   kẻ, nền tiêu đề xám nhạt, chữ tiêu đề in hoa nhỏ.
   ⚠ `table-layout: fixed` + bề rộng cột khai rõ: nếu để `auto`, trình duyệt tự chia cột
   theo nội dung và các ô TIỀN bị bóp — "67.000 đ" rớt chữ "đ" xuống dòng (lỗi Công ty
   thấy trên bản in 25/09/2026). */
.in-bg .in-bang { margin-top: 8px; border-collapse: collapse; table-layout: fixed; }
.in-bg .in-bang th {
  background: #F2F2F2; border: 1px solid #BFBFBF; border-bottom: 1.5px solid #1E1E1E;
  font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 4px;
  line-height: 1.25;
}
.in-bg .in-bang td { border: 1px solid #C6C6C6; padding: 7px 4px; vertical-align: top; }
/* Ô SỐ luôn nằm 1 dòng — "125.000 đ" mà rớt chữ "đ" xuống dòng là sai (lỗi 25/09/2026).
   Đặt ở đây thay vì cờ `nowrap` của TỪNG cột: cờ đó gắn cả vào `<th>`, mà tiêu đề dài
   ("ĐƠN GIÁ (CHƯA VAT)") gặp `nowrap` thì TRÀN sang ô bên cạnh (lỗi thấy trên bản in
   25/09/2026). Số thì không bao giờ cần xuống dòng, còn tiêu đề thì cần. */
.in-bg .in-bang td.num { white-space: nowrap; }
/* BẢNG BÁO GIÁ IN KHỔ DỌC (20/10/2026): 11 cột trong vùng in 182mm nên hạ cỡ chữ
   để tiêu đề không dồn vào nhau và ô tiền không rớt chữ "đ". Cỡ in (9px) khai riêng
   trong `@media print` bên dưới — màn hình để 9,5–10px cho dễ đọc.
   KHÔNG xoay ngang giấy: mọi cột vẫn nằm trong 100% bề rộng in được. */
.in-bg .in-bang td { font-size: 10px; padding: 5px 3px; }
/* Dòng TỔNG (tfoot) có nền nhạt + in đậm — con số quan trọng nhất của tờ báo giá. */
.in-bg .in-bang tfoot td {
  background: #F2F2F2; border: 1px solid #C6C6C6; font-weight: 700;
  padding: 6px 4px;
}
.in-bg .in-bang tfoot tr:first-child td { border-top: 1.5px solid #1E1E1E; }
/* Dòng TỔNG CỘNG: nền nhạt + đậm — con số quan trọng nhất của tờ báo giá */
.in-bg .in-bang tfoot td.in-bg-tong { background: #F2F2F2; font-weight: 700; }
.in-bg .in-bang { page-break-inside: auto; }
.in-bg .in-bang tr { page-break-inside: avoid; }
.in-bg .in-bang thead { display: table-header-group; }   /* sang trang vẫn có tiêu đề cột */

/* Giữ NGUYÊN dấu xuống dòng người dùng gõ (công ty yêu cầu 25/09/2026: *"nếu khi nhập
   tôi nhập xuống dòng thì lúc in cũng xuống dòng"*). Ô `<input>`/`<textarea>` lưu `\n`,
   mặc định HTML gộp thành dấu cách — `pre-wrap` giữ đúng từng dòng mà vẫn tự ngắt dòng. */
.in-bg .in-giu-dong { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Cột ẢNH trên bảng báo giá — HIỆN TRỌN ẢNH, không cắt, không méo.
   Mẫu chuẩn 20/10/2026: ảnh của TỪNG DÒNG cao ~44–48px, canh giữa ô. Vẫn là
   `width/height:auto` + `max-*` (KHÔNG dùng khung vuông `cover`) để ảnh dọc không bị
   cắt mất hai đầu như bản in 25/09/2026; ảnh nhỏ hơn khung giữ nguyên cỡ, không vỡ nét.
   ⚠ `max-width:100%` là CHỐT AN TOÀN: ảnh không bao giờ tràn sang ô bên cạnh. */
.in-bg .in-anh-sp {
  width: auto; height: auto; max-width: min(18mm, 100%); max-height: 48px;
  object-fit: contain; display: block; margin: 0 auto;
  background: #fff;
}
/* Ô ảnh: căn giữa cả ngang lẫn dọc cho hàng bảng nhìn đều */
.in-bg .in-bang td.in-o-anh, .in-bg .in-bang th.in-o-anh { text-align: center; vertical-align: middle; }
.in-bg .in-bang th { white-space: normal; }
/* Khổ NGANG: bảng rộng 267mm nên tiêu đề cột không phải bóp chữ */
.in-trang.in-ngang .in-bg .in-bang th { padding: 6px 7px; }
.in-trang.in-ngang .in-bg .in-bang td { padding: 6px 7px; }

/* GHI CHÚ: khung nhạt, thụt lề treo */
.in-bg-note {
  margin-top: 14px; padding: 10px 12px; background: #F7F7F7;
  border: 1px solid #DCDCDC; border-left: 3px solid #1E1E1E; border-radius: 3px;
  break-inside: avoid;
}
.in-bg-note-td { font-weight: 700; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; color: #1E1E1E; }
.in-bg-note-dong { font-size: 12px; line-height: 1.5; padding-left: 12px; text-indent: -12px; }
.in-bg-lienhe { margin-top: 5px; padding-left: 0; text-indent: 0; }

/* Dòng cảm ơn: NGHIÊNG · CĂN GIỮA · có ĐƯỜNG KẺ MẢNH phía trên (mẫu chuẩn). */
.in-bg-camon {
  text-align: center; font-style: italic; font-weight: 700;
  margin: 18px 0 8px; padding-top: 9px;
  border-top: 1px solid #DCDCDC; break-inside: avoid;
}
/* Chân trang: TÊN CÔNG TY IN HOA ĐẬM + địa chỉ | MST | website, CĂN GIỮA.
   Không kẻ thêm đường ngang (đã có đường kẻ trên dòng cảm ơn) để hai nét không sát nhau. */
.in-bg-foot { text-align: center; font-size: 11.5px; color: #333; line-height: 1.5; padding-top: 2px; }
.in-bg-foot-cty { font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.in-trang h2 { font-size: 13px; margin: 16px 0 6px; }
.in-trang h3 { font-size: 12px; margin: 12px 0 5px; font-style: italic; }
.in-muc { text-transform: uppercase; border-bottom: 1px solid #333; padding-bottom: 3px; }
.in-muc2 { font-weight: 700; font-style: normal; }
/* KHỔ NGANG (Phiếu đề xuất may mẫu): bảng rộng nên chữ ít xuống dòng → phải SIẾT khoảng
   cách dọc, nếu không phần thân + khối chữ ký không đủ một trang và chữ ký bị đẩy sang
   trang riêng (đã gặp thật: trang 2 chỉ có mỗi khối chữ ký). */
.in-trang.in-ngang .in-dau { margin-bottom: 8px; }
.in-trang.in-ngang .in-tieude { margin-top: 6px; }
.in-trang.in-ngang .in-khach { margin: 6px 0; }
.in-trang.in-ngang h2, .in-trang.in-ngang .in-muc { margin: 10px 0 5px; }
.in-trang.in-ngang .in-bang th, .in-trang.in-ngang .in-bang td { padding: 3px 5px; }
.in-trang.in-ngang .in-bang { margin: 4px 0 6px; }
.in-trang.in-ngang .in-ky { margin-top: 16px; }
.in-trang.in-ngang .in-kyghichu { margin-bottom: 34px; }

/* --- Bảng ĐẶT KÍCH BO trên phiếu Ban hành sản xuất --- */
.in-chu-thich { font-size: 10.5px; font-style: italic; color: #333; margin-bottom: 5px; }
.in-van-ban { white-space: pre-line; font-size: 11.5px; line-height: 1.5; margin: 0 0 8px; }
.in-bang-bo { font-size: 10.5px; }
.in-bang-bo th, .in-bang-bo td { padding: 2px 4px; border: 1px solid #666; }
.in-bang-bo tbody tr.in-bo-dau td {
  background: #EFEFEF; font-weight: 700; text-align: left;
  text-transform: uppercase; font-size: 10.5px;
}
.in-bang-bo { page-break-inside: auto; }
.in-bang-bo tr { page-break-inside: avoid; }

/* --- Đầu trang --- */
.in-dau { margin-bottom: 14px; }
.in-congty { text-align: left; }
.in-ten-cty { font-weight: 700; font-size: 13px; }
.in-diachi { font-size: 11px; color: #333; }
.in-tieude { margin-top: 12px; text-align: center; }
.in-sophieu { font-size: 12px; }
.in-ngay { font-size: 11px; font-style: italic; }

/* --- Khối thông tin --- */
.in-khach { margin: 10px 0; }
.in-khach > div { margin-bottom: 2px; }
.in-tongchu { margin: 8px 0; font-size: 12px; }
.in-dieukhoan { margin-top: 12px; font-size: 11.5px; }
.in-dieukhoan-td { font-weight: 700; margin-bottom: 4px; }
.in-dieukhoan ul { margin: 4px 0 0 18px; padding: 0; }
.in-dieukhoan li { margin-bottom: 2px; }
.in-hd-mo { margin: 10px 0; }
.in-hd-ben { font-weight: 700; margin: 8px 0 3px; }
.in-hd-khoan { font-size: 11.5px; white-space: pre-line; }
.in-hd-cuoi { margin-top: 10px; font-style: italic; font-size: 11.5px; }

/* --- Bảng --- */
.in-bang { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
.in-bang th, .in-bang td { border: 1px solid #666; padding: 4px 6px; vertical-align: top; }
.in-bang th { background: #EDEDED; text-align: center; font-weight: 700; }
.in-bang td.num, .in-bang th.num { text-align: right; font-variant-numeric: tabular-nums; }
.in-bang tfoot td { background: #F7F7F7; font-weight: 700; }
.in-bang-tin td { border: 0; padding: 2px 4px; }
.in-bang-tin .in-nhan { width: 34%; color: #333; }
/* Cột hẹp không cho xuống dòng (nhãn dài như "Ngày cần mẫu" mà xuống 3 dòng thì bảng cao) */
.in-bang th.in-khong-wrap, .in-bang td.in-khong-wrap { white-space: nowrap; }
.in-nhom td { background: #F3F3F3; font-weight: 700; }
.in-am { color: #B00020; }

/* --- Chữ ký --- */
.in-ky { display: flex; justify-content: space-between; gap: 8px; margin-top: 26px; text-align: center; }
.in-ky-o { flex: 1; }
.in-ky-chuc { font-weight: 700; font-size: 11.5px; text-transform: uppercase; }
.in-kyghichu { font-size: 10.5px; font-style: italic; color: #444; margin-bottom: 46px; }
.in-ky-ten { font-weight: 700; font-size: 12px; }

/* --- Khi in: ẩn HẾT giao diện, chỉ chừa tờ phiếu --- */
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; }
  /* Ẩn mọi thứ ở cấp cao nhất của ứng dụng */
  body > *:not(.in-wrap) { display: none !important; }
  /* Thanh công cụ (nút In/Đóng + dòng "Khổ A4 …") KHÔNG BAO GIỜ ra giấy. */
  .in-toolbar, .no-print { display: none !important; }
  .in-wrap { position: static; inset: auto; overflow: visible; background: #fff; padding: 0; }
  .in-trang {
    width: auto; min-height: 0; margin: 0; padding: 0;
    box-shadow: none; font-size: 11.5px;
  }
  /* Báo giá có lề RIÊNG của khổ in: `.in-trang.in-co-le` (2 lớp) mạnh hơn `.in-trang`
     nên phải khai lại ở đây, nếu không lề bị cộng HAI LẦN (page margin + padding). */
  .in-trang.in-co-le { padding: 0; }
  /* Không cắt bảng qua trang ở giữa một dòng */
  .in-bang tr { break-inside: avoid; page-break-inside: avoid; }
  .in-bang thead { display: table-header-group; }
  .in-ky { break-inside: avoid; page-break-inside: avoid; }

  /* ---- BẢNG BÁO GIÁ in DỌC 182mm: co chữ để 10–11 cột nằm gọn ----
     @page của báo giá (A4 portrait · lề 15mm 14mm) do `inDatKhoGiay()` trong
     in-phieu.js chèn SAU tệp này nên thắng quy tắc `@page` mặc định ở trên. */
  .in-bg .in-bang { width: 100%; max-width: 100%; }
  .in-bg .in-bang th {
    font-size: 8.2px; padding: 5px 4px; letter-spacing: .01em; line-height: 1.2;
  }
  .in-bg .in-bang td { font-size: 9px; padding: 5px 4px; line-height: 1.35; }
  /* Cột tiền hẹp ~10–10,5% (≈19–20mm). Ô tiền của báo giá KHÔNG in hậu tố "đ" nữa
     (20/10/2026 — `inTienKhongD` trong in-phieu.js: chỉ `20.088.000`), nên cỡ 8,7px dư
     chỗ cho số 13 chữ số; số luôn 1 dòng nhờ `td.num { white-space: nowrap }`. */
  .in-bg .in-bang td.num { font-size: 8.7px; padding-left: 3px; padding-right: 3px; }
  /* Ảnh sản phẩm giữ đúng cao 44–48px (12,7mm) như mẫu chuẩn, KHÔNG tràn sang ô bên cạnh. */
  .in-bg .in-anh-sp { max-width: 100%; max-height: 48px; }
  /* Dòng TỔNG chỉ in MỘT LẦN ở cuối bảng: `tfoot` mặc định là `table-footer-group`,
     một số trình in LẶP nó ở mọi trang (số tổng của trang 1 sẽ sai). */
  .in-bg .in-bang tfoot { display: table-row-group; }
  .in-bg .in-bang tfoot tr { break-inside: avoid; page-break-inside: avoid; }
  /* Chân trang (công ty · MST · website) + lời cảm ơn CHỈ ở trang cuối, không bị cắt
     đôi giữa hai trang. */
  .in-bg-dau, .in-bg-camon, .in-bg-foot {
    break-inside: avoid; page-break-inside: avoid;
  }
}

/* ==========================================================================
   8B. PHÂN HỆ KINH DOANH — pipeline, cổng chặn, ma trận size
   ========================================================================== */

/* --- 8B.1 Dải 6 bước của một đơn hàng --- */
.kd-steps { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 2px 0; }
.kd-step {
  flex: 1 1 0; min-width: 132px; position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 12px 11px 22px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--border-subtle); border-right: 0;
  font-size: var(--text-caption); color: var(--fg-muted);
}
.kd-step:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); padding-left: 14px; }
.kd-step:last-child { border-right: 1px solid var(--border-subtle); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.kd-step .n {
  font: var(--fw-bold) var(--text-micro)/1 var(--font-mono);
  width: 18px; height: 18px; border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--bg-muted); color: var(--fg-muted);
}
.kd-step .t { font-weight: var(--fw-semibold); color: var(--fg-secondary); line-height: 1.3; }
.kd-step .s { font-size: 10.5px; color: var(--fg-muted); }
.kd-step.on { background: var(--action-subtle); border-color: var(--primary-200); }
.kd-step.on .n { background: var(--action); color: var(--fg-on-primary); }
.kd-step.on .t { color: var(--status-info-fg); }
.kd-step.done .n { background: var(--success-500); color: #fff; }
.kd-step.done .t { color: var(--fg-primary); }

/* --- 8B.2 Cổng chặn quy trình --- */
.kd-gates { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: var(--space-5); }
.kd-gate {
  display: flex; gap: 10px; padding: 12px 13px;
  border-radius: var(--radius-lg); border: 1px solid var(--border-subtle);
  background: var(--glass-bg-strong);
}
.kd-gate .ic {
  width: 22px; height: 22px; flex: none; border-radius: var(--radius-full);
  display: grid; place-items: center; font-size: 12px; font-weight: var(--fw-bold);
}
.kd-gate .t { font-weight: var(--fw-semibold); font-size: var(--text-sm); color: var(--fg-primary); }
.kd-gate .d { font-size: var(--text-caption); color: var(--fg-muted); margin-top: 3px; line-height: 1.45; }
.kd-gate.mo { border-color: rgba(23,163,90,.32); background: var(--status-success-bg); }
.kd-gate.mo .ic { background: var(--success-500); color: #fff; }
.kd-gate.chan { border-color: rgba(229,72,77,.26); background: var(--status-danger-bg); }
.kd-gate.chan .ic { background: var(--danger-500); color: #fff; }

/* --- 8B.3 Ma trận tỷ lệ size --- */
.mt-size { width: 100%; border-collapse: collapse; font-size: var(--text-caption); }
.mt-size th, .mt-size td { border: 1px solid var(--border-subtle); padding: 6px 8px; text-align: center; }
.mt-size th { background: var(--bg-subtle); color: var(--fg-muted); font-weight: var(--fw-semibold); font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.mt-size th.l, .mt-size td.l { text-align: left; white-space: nowrap; }
.mt-size td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-secondary); }
.mt-size td.l { font-family: var(--font-sans); color: var(--fg-primary); font-weight: var(--fw-medium); }
.mt-size td.zero { color: var(--neutral-300); }
.mt-size tr.sum td { background: var(--bg-subtle); font-weight: var(--fw-bold); color: var(--fg-primary); }
.mt-size tr.grp td { background: var(--action-subtle); color: var(--status-info-fg); font-weight: var(--fw-semibold); text-align: left; }

/* --- 8B.4 Ô số trong bảng chi tiết giá thành --- */
.kd-cost-in {
  width: 100%; height: 28px; padding: 0 7px; text-align: right;
  border: 1px solid transparent; border-radius: var(--radius-xs);
  background: transparent; color: var(--fg-primary);
  font: var(--fw-regular) var(--text-caption)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   BỀ RỘNG TỐI THIỂU CỦA Ô SỐ.

   Ô nhập số trong bảng bị bóp theo nội dung cột, nên không hiện hết con số —
   ví dụ đơn giá 245.000 chỉ thấy một phần. Đây là bảng nhập liệu nên các ô này
   phải đủ rộng cho số tiền có dấu phân cách nghìn.

   Lưu ý: ô `type=number` còn chừa chỗ cho nút tăng/giảm ở bên phải, nên phải
   nới rộng hơn con số thuần. Đã đo thực tế trong trình duyệt để chọn số này.
   -------------------------------------------------------------------------- */
.kd-cost-in { min-width: 10ch; }
.kd-cost-in.tien { min-width: 15ch; }          /* 1.250.000 — số tiền lớn */
.kd-cost-in.sl { min-width: 9ch; }             /* 1.594 — số lượng */
.kd-cost-in.pt { min-width: 9ch; }             /* 12,5 — phần trăm / tỷ lệ */
input.kd-cost-in[type=number] { text-align: right; }

/* Ẩn nút tăng/giảm của ô số trong bảng nhập liệu: vừa chiếm chỗ của con số,
   vừa khó bấm khi bảng có nhiều dòng. Người dùng gõ số trực tiếp. */
.tbl input[type=number].kd-cost-in::-webkit-outer-spin-button,
.tbl input[type=number].kd-cost-in::-webkit-inner-spin-button {
  -webkit-appearance: none; appearance: none; margin: 0;
}

/* --------------------------------------------------------------------------
   Ô CHỮ DÀI TRONG BẢNG (`kdOTextDai`) — mô tả vải, ghi chú.

   Công ty yêu cầu 24/09/2026: *"Form nhập bảng báo giá, chỗ mô tả là dạng text dài,
   có thể xuống dòng"*. Ô `<input>` một dòng làm chữ dài bị CẮT; đây là `<textarea>`
   nên chữ tự xuống dòng, và JS tự nới chiều cao theo nội dung.

   Khác ô số: chữ căn TRÁI, font thường (không phải mono), và cao theo số dòng.
   -------------------------------------------------------------------------- */
textarea.kd-cost-in.kd-ta {
  height: auto;
  min-height: 34px;
  padding: 5px 7px;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: var(--fw-regular) var(--text-caption)/1.35 var(--font-sans);
  font-variant-numeric: normal;
  vertical-align: top;
}
.tbl td:has(> textarea.kd-ta) { vertical-align: top; padding-top: 6px; }
.tbl input[type=number].kd-cost-in { -moz-appearance: textfield; appearance: textfield; }
.kd-cost-in:hover { border-color: var(--border-strong); background: var(--glass-bg-strong); }
.kd-cost-in:focus { outline: 2px solid var(--action); border-color: transparent; background: var(--bg-surface); }
.kd-cost-in.txt { text-align: left; font-family: var(--font-sans); }
select.kd-cost-in { text-align: left; font-family: var(--font-sans); cursor: pointer; }

/* --- 8B.5 Thẻ chọn phương án báo giá --- */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }
.opt {
  border: 1.5px solid var(--border-default); border-radius: var(--radius-lg);
  padding: 13px 14px; background: var(--glass-bg-strong); cursor: pointer;
  transition: all var(--dur-fast);
}
.opt:hover { border-color: var(--action); }
.opt.on { border-color: var(--action); background: var(--action-subtle); box-shadow: var(--shadow-glow-primary); }
.opt .v { font-weight: var(--fw-semibold); color: var(--fg-primary); font-size: var(--text-sm); }
.opt .g { font: var(--fw-bold) var(--text-h2)/1.2 var(--font-mono); color: var(--status-info-fg); margin: 7px 0 3px; }
.opt .m { font-size: var(--text-caption); color: var(--fg-muted); }

/* --- 8B.6 Ảnh mẫu của chủng loại --- */
.kd-anh {
  min-height: 92px;
  display: grid; place-items: center;
  background: var(--bg-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 6px; overflow: hidden;
}
.kd-anh img {
  max-width: 100%; max-height: 190px; border-radius: var(--radius-sm);
  display: block; object-fit: contain;
}
.kd-anh-empty {
  width: 34px; height: 34px; border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--glass-bg-strong); color: var(--fg-muted); font-size: 15px;
}

/* Ảnh thu nhỏ trong bảng */
.kd-thumb {
  width: 46px; height: 46px; object-fit: cover; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); display: block; cursor: zoom-in;
}

/* --- 8B.7 Khối chữ in cho hợp đồng / báo giá --- */
.doc-text { font: var(--fw-regular) var(--text-sm)/1.65 var(--font-sans); color: var(--fg-secondary); white-space: pre-wrap; }
.doc-text b { color: var(--fg-primary); }

/* ==========================================================================
   8C. PHÂN HỆ KINH DOANH — giao diện đã chuẩn hóa
   --------------------------------------------------------------------------
   Ba thành phần chính:
     .kd-viec*  — danh sách VIỆC (mở app là biết hôm nay làm gì)
     .kd-next   — khối "VIỆC KẾ TIẾP" nổi bật trong hồ sơ đơn
     .kd-phan   — từng phần của hồ sơ, thay cho 7 tab cũ
   ========================================================================== */

/* --- 8C.1 Danh sách việc --- */
.kd-viec-list { display: flex; flex-direction: column; gap: 10px; }
.kd-viec {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--neutral-300);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md), var(--ring-inset);
  padding: 13px 15px;
}
.kd-viec-cao { border-left-color: var(--danger-500); }
.kd-viec-vua { border-left-color: var(--warning-500); }
.kd-viec-thap { border-left-color: var(--neutral-300); }
.kd-viec-main { flex: 1 1 320px; min-width: 0; }
.kd-viec-ten { font: var(--fw-semibold) var(--text-body-lg)/var(--lh-body-lg) var(--font-sans); color: var(--fg-primary); }
.kd-viec-mo { font: var(--fw-regular) var(--text-caption)/var(--lh-caption) var(--font-sans); color: var(--fg-muted); margin-top: 3px; }
.kd-viec-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px;
  font: var(--fw-regular) var(--text-caption)/1 var(--font-sans); color: var(--fg-secondary); }
.kd-viec-nut { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.kd-viec-cho { display: flex; align-items: center; gap: 7px;
  font: var(--fw-regular) var(--text-caption)/1 var(--font-sans); color: var(--fg-muted); }

/* ==========================================================================
   8C.1b MÀN "VIỆC HÔM NAY" — MỘT DÒNG TÓM TẮT + DANH SÁCH DÒNG GỌN

   Vì sao có: màn cũ xếp 3 thẻ KPI (đều hiện cùng một số) + 6 khối đầu mục gấp/mở, cao
   tổng 2158px — phải cuộn 2,3 màn mới hết, mà việc thật đầu tiên nằm ở 589px. Nay tóm
   tắt bằng MỘT dòng, còn mỗi việc là MỘT dòng cao ~52px thay cho thẻ ~146px.
   ========================================================================== */
.kd-tom-tat {
  display: flex; align-items: center; gap: 14px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md), var(--ring-inset);
  padding: 12px 16px; margin-bottom: 12px;
}
.kd-tom-tat-so {
  flex: none; min-width: 46px; height: 46px; padding: 0 8px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--action-grad); color: var(--fg-on-primary);
  font: var(--fw-bold) 22px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.kd-tom-tat-so.xong { background: var(--success-600); }
.kd-tom-tat-chinh { font: var(--fw-semibold) var(--text-body-lg)/1.3 var(--font-display); color: var(--fg-primary); }
.kd-tom-tat-phu { font: var(--fw-regular) var(--text-caption)/1.4 var(--font-sans); color: var(--fg-muted); margin-top: 2px; }

/* Một KHỐI duy nhất chứa mọi dòng việc, ngăn bằng đường kẻ — thay vì nhiều thẻ rời. */
.kd-ds-viec {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md), var(--ring-inset);
  overflow: hidden;
}
.kd-dong {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  /* 7px (không phải 9px): với 15 việc, 2px × 15 = 30px — đủ để cả danh sách lọt trong
     một màn hình 950px thay vì phải cuộn thêm. */
  padding: 7px 14px;
  border-bottom: 1px solid var(--border-subtle);
  border-left: 3px solid transparent;
}
.kd-dong:last-child { border-bottom: 0; }
.kd-dong.tre { border-left-color: var(--danger-500); }
.kd-dong.khan { border-left-color: var(--warning-500); }
.kd-dong.canh { border-left-color: var(--neutral-300); }
.kd-dong-buoc {
  flex: 0 0 132px;
  font: var(--fw-semibold) var(--text-micro)/1.3 var(--font-sans);
  color: var(--fg-secondary); white-space: nowrap;
}
.kd-dong-than { flex: 1 1 260px; min-width: 0; }
.kd-dong-viec { font: var(--fw-semibold) var(--text-body)/1.3 var(--font-sans); color: var(--fg-primary); }
/* Một dòng, cắt bằng dấu … — câu mô tả dài nằm ở tooltip của tên việc */
.kd-dong-don {
  font: var(--fw-regular) var(--text-micro)/1.4 var(--font-sans); color: var(--fg-muted);
  margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kd-dong-han {
  flex: 0 0 auto; white-space: nowrap;
  font: var(--fw-semibold) var(--text-caption)/1.2 var(--font-mono);
  color: var(--fg-secondary); font-variant-numeric: tabular-nums;
}
.kd-dong-han.tre { color: var(--danger-600); }
.kd-dong-han.khan { color: var(--warning-600); }
.kd-dong-han.canh { color: var(--fg-muted); font-family: var(--font-sans); font-weight: var(--fw-regular); }
.kd-dong-nut { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

/* Khối PHỤ (đang chờ người khác · khâu chưa có việc) — gấp lại, không chiếm chỗ */
.kd-phu { margin-top: 12px; }.kd-phu > summary {
  cursor: pointer; padding: 8px 12px; border-radius: var(--radius-md);
  font: var(--fw-semibold) var(--text-caption)/1.3 var(--font-sans); color: var(--fg-secondary);
  border: 1px solid var(--border-subtle); background: var(--bg-subtle);
}
.kd-phu > summary:hover { color: var(--fg-primary); border-color: var(--border-strong); }

/* --------------------------------------------------------------------------
   NHÓM VIỆC THEO BƯỚC QUY TRÌNH (28/09/2026: "gom nhóm các việc cần làm cho dễ theo dõi")
   Mỗi nhóm là một <details open> — bấm tiêu đề để gấp/mở. Nhóm rỗng KHÔNG vẽ.
   -------------------------------------------------------------------------- */
.kd-nhom { margin-bottom: 2px; }
.kd-nhom > summary {
  display: flex; align-items: center; gap: 9px;
  cursor: pointer; list-style: none;
  padding: 4px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font: var(--fw-semibold) var(--text-caption)/1.3 var(--font-sans);
  color: var(--fg-primary);
  user-select: none;
}
.kd-nhom > summary::-webkit-details-marker { display: none; }
.kd-nhom > summary:hover { background: var(--bg-subtle); border-color: var(--border-subtle); }
/* Mũi tên tự vẽ: ▾ khi mở, ▸ khi gấp */
.kd-nhom > summary .kd-nhom-mui::before { content: '▾'; color: var(--fg-muted); font-size: 10px; }
.kd-nhom:not([open]) > summary .kd-nhom-mui::before { content: '▸'; }
.kd-nhom-ten { white-space: nowrap; }
.kd-nhom-so {
  flex: none; min-width: 20px; padding: 1px 6px;
  border-radius: 999px; text-align: center;
  background: var(--accent-600); color: #1E1E1E;
  font: var(--fw-bold) var(--text-micro)/1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* Nhóm "⚠ Cần xử lý trước" và "⚠ Cảnh báo dữ liệu" có sắc đỏ */
.kd-nhom.gap > summary .kd-nhom-so { background: var(--danger-600); color: var(--neutral-0); }
.kd-nhom.canhbao > summary .kd-nhom-so { background: var(--neutral-300); color: var(--fg-primary); }
.kd-nhom-ghi {
  font: var(--fw-regular) var(--text-micro)/1.3 var(--font-sans);
  color: var(--warning-600); white-space: nowrap;
}
.kd-nhom-mo {
  font: var(--fw-regular) var(--text-micro)/1.4 var(--font-sans);
  color: var(--fg-muted); padding: 0 12px 6px 33px;
}

/* ==========================================================================
   PHÂN HỆ KẾ TOÁN — DÒNG NHẬP BÚT TOÁN
   Một dòng = một cặp TK Nợ / TK Có / số tiền, xếp ngang cho gõ nhanh như bảng tính.
   ========================================================================== */
.kt-dong-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 4px 6px; border-bottom: 1px solid var(--border-subtle);
  font: var(--fw-semibold) var(--text-micro)/1.3 var(--font-sans);
  color: var(--fg-secondary); text-transform: uppercase; letter-spacing: .04em;
}
.kt-dong {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 0; border-bottom: 1px solid var(--border-subtle);
}
.kt-dong:last-child { border-bottom: 0; }
/* Hàng CHÍNH: TK Nợ · TK Có · số tiền · đối tượng · mã đơn · diễn giải */
.kt-dong-chinh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Hàng PHỤ: DT/CP · N/X · số hoá đơn · ngày hoá đơn — thụt vào cho thẳng với TK Nợ */
.kt-dong-phu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-left: 30px; }
.kt-dong > .input, .kt-dong-chinh > .input, .kt-dong-phu > .input { flex: 0 0 auto; }
/* Ô "diễn giải dòng" co giãn hết chỗ còn lại */
.kt-dong-chinh > .input:last-of-type { flex: 1 1 200px; min-width: 140px; }
.kt-dong-so {
  flex: none; width: 22px; text-align: right;
  font: var(--fw-semibold) var(--text-micro)/1 var(--font-mono); color: var(--fg-muted);
}

/* --- 8C.2 Khối VIỆC KẾ TIẾP --- */
.kd-next {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  margin: 14px 0 6px;
  padding: 15px 17px;
  background: var(--action-subtle);
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.kd-next-tag {
  font: var(--fw-bold) var(--text-micro)/1 var(--font-sans);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  background: var(--action); color: var(--fg-on-primary);
  padding: 5px 9px; border-radius: var(--radius-full); flex: none;
}
.kd-next-body { flex: 1 1 300px; min-width: 0; }
.kd-next-ten { font: var(--fw-semibold) var(--text-h3)/var(--lh-h3) var(--font-sans); color: var(--fg-primary); }
.kd-next-mo { font: var(--fw-regular) var(--text-caption)/var(--lh-caption) var(--font-sans); color: var(--fg-secondary); margin-top: 3px; }
.kd-next-nut { display: flex; align-items: center; gap: 8px; flex: none; }

/* --- 8C.3 Từng phần của hồ sơ --- */
.kd-phan {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), var(--ring-inset);
  margin-bottom: var(--space-6);
  overflow: hidden;
}
.kd-phan-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
}
.kd-phan-head h2 { margin: 0; font: var(--fw-semibold) var(--text-h3)/var(--lh-h3) var(--font-display); color: var(--fg-primary); }
.kd-phan-nut { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.kd-phan-body { padding: 15px 16px; }
.kd-phan-body > .tbl-wrap:last-child { border: 0; box-shadow: none; background: none; }
.kd-phan-body > .alert:last-child { margin-bottom: 0; }

/* Dòng tóm tắt trong mỗi phần */
.kd-tom-tat { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font: var(--fw-regular) var(--text-sm)/var(--lh-sm) var(--font-sans); color: var(--fg-secondary); }
.kd-tom-tat b { color: var(--fg-primary); font-family: var(--font-mono); }

/* Khung trống gọn trong một phần */
.kd-trong {
  padding: 14px 15px; border-radius: var(--radius-md);
  background: var(--bg-subtle); border: 1px dashed var(--border-strong);
  font: var(--fw-regular) var(--text-sm)/var(--lh-sm) var(--font-sans); color: var(--fg-muted);
}

/* Dải 6 bước gọn lại cho hồ sơ một trang */
.kd-phan + .kd-phan, .kd-next + .kd-phan { margin-top: 0; }
#view > .kd-steps { margin-bottom: 4px; }

/* --- 8C.4 Chọn một trong vài lựa chọn có giải thích (chính sách cọc…) --- */
.kd-chon-nhom { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-5); }
.kd-chon {
  display: block; text-align: left;
  padding: 12px 13px; cursor: pointer;
  background: var(--glass-bg-strong);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: all var(--dur-fast);
}
.kd-chon:hover { border-color: var(--action); }
.kd-chon.on { border-color: var(--action); background: var(--action-subtle); box-shadow: var(--shadow-glow-primary); }
.kd-chon .t { display: block; font: var(--fw-semibold) var(--text-sm)/var(--lh-sm) var(--font-sans); color: var(--fg-primary); }
.kd-chon .d { display: block; margin-top: 4px; font: var(--fw-regular) var(--text-caption)/var(--lh-caption) var(--font-sans); color: var(--fg-muted); }
.kd-chon.on .t { color: var(--status-info-fg); }

/* Số tiền gọn trong một ô: không cho "đ" xuống dòng làm con số bị cắt
   (bảng giá thành PAKD có 10 cột nên cột hẹp, chữ "đ" hay rớt xuống dòng). */
.tbl td.num, .tbl th.num { white-space: nowrap; }
.tbl td.num .mono { white-space: nowrap; }

/* --- 8B.8 Ô đính kèm trong phiếu may mẫu (chỉ TỆP thiết kế / thông số, tối đa 5) ---
   Phải GỌN: ô này nằm trong một cột của bảng 13 cột. Ô chọn file mặc định hiện
   chữ "No file chosen" rất dài, làm cột phình ra và tràn sang cột bên cạnh —
   nên dùng ô file ẩn + nút "＋ Chọn tệp" nhỏ. Mỗi tệp một dòng, có nút ✕ để XOÁ. */
.kd-dk { display: flex; flex-direction: column; gap: 3px; max-width: 246px; }
.kd-dk-hang { display: flex; align-items: center; gap: 5px; }
.kd-dk-dau { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.kd-dk-nhan2 {
  font: var(--fw-medium) var(--text-micro)/1.15 var(--font-sans);
  color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.kd-dk-dem {
  flex: none; font: var(--fw-medium) var(--text-micro)/1 var(--font-mono);
  color: var(--fg-muted);
}
/* Một dòng tệp: tên file dài thì CẮT BẰNG "…" (không đẩy nút ✕ ra ngoài cột) */
.kd-dk-tep { display: flex; align-items: center; gap: 4px; min-width: 0; }
.kd-dk-ten {
  display: inline-flex; align-items: center; gap: 3px; min-width: 0; flex: 1 1 auto;
  font: var(--fw-medium) var(--text-micro)/1.3 var(--font-sans);
  color: var(--action); text-decoration: none;
}
.kd-dk-ten:hover { text-decoration: underline; }
.kd-dk-ten-chu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-dk-trong2 { font: var(--fw-regular) var(--text-micro)/1.3 var(--font-sans); color: var(--neutral-300); }
.kd-dk-xoa {
  flex: none; cursor: pointer; line-height: 1; padding: 3px 5px;
  font: var(--fw-semibold) var(--text-micro)/1 var(--font-sans);
  border: 1px solid var(--border-default); border-radius: var(--radius-xs);
  background: var(--bg-surface); color: var(--fg-muted);
}
.kd-dk-xoa:hover { border-color: var(--danger, #C0392B); color: var(--danger, #C0392B); }
/* Ảnh logo của DỮ LIỆU CŨ — chỉ hiện để bỏ đi, không còn nút tải ảnh */
.kd-dk-anhcu { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.kd-dk-anh-o { display: inline-flex; align-items: center; gap: 2px; }
/* Nhãn nói RÕ VỊ TRÍ nên phải rộng hơn 56px cũ, nếu không sẽ bị cắt cụt. */
.kd-dk-nhan { flex: none; width: 118px; white-space: normal; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis;
  font: var(--fw-medium) var(--text-micro)/1.15 var(--font-sans);
  color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.kd-dk-anh img { width: 28px; height: 28px; object-fit: cover; border-radius: var(--radius-xs);
  border: 1px solid var(--border-default); display: block; flex: none; }
.kd-dk-anh:hover img { border-color: var(--action); }
.kd-dk-trong { flex: none; width: 28px; text-align: center; color: var(--neutral-300); }
.kd-dk-file-link {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  font: var(--fw-medium) var(--text-micro)/1 var(--font-sans);
  color: var(--action); text-decoration: none;
}
.kd-dk-file-link:hover { text-decoration: underline; }
.kd-dk-nut {
  flex: none; cursor: pointer;
  font: var(--fw-medium) var(--text-micro)/1 var(--font-sans);
  padding: 4px 7px;
  border: 1px solid var(--border-default); border-radius: var(--radius-xs);
  background: var(--bg-surface); color: var(--fg-secondary);
}
.kd-dk-nut:hover { border-color: var(--action); color: var(--action); }

/* --- 8B.9 Phần ký của Phương án kinh doanh --- */
.pakd-ky { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-5); }
.pakd-ky-o { text-align: center; padding: 10px 8px; border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm); background: var(--bg-subtle); }
.pakd-ky-nhan { font: var(--fw-semibold) var(--text-micro)/1 var(--font-sans);
  color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.pakd-ky-ten { font: var(--fw-semibold) var(--text-body)/1.5 var(--font-sans);
  color: var(--fg-primary); margin: 6px 0 2px; min-height: 20px; }

/* --- 8B.10 Dòng vật tư chưa khớp mã NPL trong phiếu kho ---
   Tên trong đơn mua hàng không khớp tên nào trong danh mục NPL, nên chưa có mã
   để theo dõi tồn. Tô vàng để người dùng biết cần chọn lại. */
.tbl tbody tr.dong-thieu-ma { background: var(--warning-50, #FEF6E7); }
.tbl tbody tr.dong-thieu-ma td { border-left: 3px solid var(--accent-500, #FFCC00); }

/* --- 8B.11 Cột cảnh báo TRÙNG TÊN vật tư trong bảng NPL ---
   Tên gần giống một vật tư đã có → để nguyên sẽ sinh mã trùng, kho không cộng
   được tồn. Tô vàng và cho nút gắn vào mã đang có. */
.kd-col-canhbao { min-width: 132px; }
.kd-canh-bao-trung {
  border-left: 3px solid var(--accent-500, #FFCC00);
  padding: 3px 0 3px 6px; border-radius: var(--radius-xs);
  background: var(--warning-50, #FEF6E7); color: var(--warning-700, #8A5A00);
}

/* Cùng một mã mà chủng loại này có giá, chủng loại kia để 0 → giá thành sai.
   Tô ĐỎ vì đây là lỗi dữ liệu, không phải nhắc nhở. */
.kd-canh-bao-gia {
  border-left: 3px solid var(--danger-500, #DC2626);
  padding: 3px 0 3px 6px; border-radius: var(--radius-xs);
  background: var(--danger-50, #FEF2F2); color: var(--danger-700, #991B1B);
}

/* --- 8B.12 Màn xem PAKD: thẻ từng chủng loại ---
   Trước đây mọi vật tư của mọi chủng loại dồn vào một bảng 128 dòng, đọc không
   ra chủng loại nào cần gì. Nay mỗi chủng loại một thẻ, vật tư chia theo khối. */
.pakd-cl { border-left: 3px solid var(--action); }
.pakd-cl .block-h { align-items: baseline; }
.pakd-khoi-h {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 12px 0 6px; padding: 6px 10px;
  background: var(--bg-subtle, #F6F7FB);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  font-size: var(--text-caption);
}
.pakd-khoi-ma {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 5px;
  background: var(--action); color: #fff; border-radius: var(--radius-sm);
  font: var(--fw-bold) 11px/1 var(--font-mono);
}
.pakd-khoi-trong {
  padding: 6px 10px; margin-bottom: 6px; font-size: var(--text-caption);
  color: var(--fg-muted); font-style: italic;
}
.pakd-gia-thanh { margin-top: 12px; }
.pakd-gia-thanh > summary {
  cursor: pointer; padding: 7px 10px; font-size: var(--text-caption);
  background: var(--bg-subtle, #F6F7FB); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); user-select: none;
}
.pakd-gia-thanh > summary:hover { background: var(--bg-hover, #EEF1F8); }
.pakd-gia-thanh[open] > summary { border-radius: var(--radius-md) var(--radius-md) 0 0; }

/* --- 8B.13 Ô CHỌN VẬT TƯ CÓ GỢI Ý (nhập nhanh trong bảng định mức) ---
   Gõ mã HOẶC tên → hiện danh sách gợi ý kèm mã · tên · ĐVT · đơn giá.
   Bấm một dòng là điền hết, không phải gõ tay từng ô. */
.kd-pick { position: relative; }
.kd-pick-hop {
  position: absolute; z-index: 60; top: calc(100% + 2px); left: 0;
  min-width: 340px; max-width: 460px; max-height: 264px; overflow: auto;
  background: var(--bg-surface, #fff); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg, 0 10px 28px rgba(15,23,42,.18));
}
/* Ô GỢI Ý NEO VÀO <body> — LỖI THẬT: để trong ô của bảng thì bảng chi phí
   (`.tbl-scroll` overflow:auto, `.kd-nhom-cp` overflow:hidden) CẮT MẤT ô gợi ý, mà
   tổ tiên có `backdrop-filter` lại tạo containing block nên `position:fixed` cũng bị
   cắt. Neo ra <body> thì không tổ tiên nào cắt được; bề rộng và toạ độ do JS đặt
   theo ô nhập (xem `datTri` trong kdOVatTu). z-index 200: TRÊN hộp thoại (61) và
   DƯỚI thông báo (400). */
.kd-pick-hop.kd-noi {
  position: fixed; top: 0; left: 0; z-index: 200;
  min-width: 0; max-width: none;
}
/* Dòng "Mã sẽ được đặt: VAI-..." trong form tạo mã tại chỗ */
.kd-pick-tao-ma { font-size: 12px; }
.kd-pick-dong {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  padding: 6px 9px; cursor: pointer; font-size: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.kd-pick-dong:last-child { border-bottom: 0; }
.kd-pick-dong:hover, .kd-pick-dong.chon { background: var(--bg-hover, #EEF1F8); }
.kd-pick-dong .ma { font-family: var(--font-mono); font-weight: var(--fw-bold); color: var(--action); }
.kd-pick-dong .ten { flex: 1 1 140px; }
.kd-pick-dong .phu { color: var(--fg-muted); font-size: 11px; }
.kd-pick-dong.tao-moi { color: var(--action); font-weight: var(--fw-semi); }
/* Dòng gợi ý là VẬT TƯ CỦA KHÁCH KHÁC — nhãn / thẻ / bao bì in dùng lẫn là in nhầm
   logo của khách khác. Tô nền để nhìn là thấy, không chỉ dựa vào cái nhãn nhỏ. */
.kd-pick-dong.khac-khach { background: var(--warning-50, #FFFAEB); }
.kd-pick-trong { padding: 9px; font-size: 12px; color: var(--fg-muted); }

/* Vạch ngăn giữa các nhóm nút trên thanh công cụ */
.kd-vach { width: 1px; align-self: stretch; margin: 2px 4px;
  background: var(--border-subtle); }

/* Khoảng đệm nhỏ trong hộp thoại (giữa 2 tầng) */
.kd-gap { margin: 4px 0 12px; }

/* --------------------------------------------------------------------------
   8D. BAN HÀNH SẢN XUẤT — bảng ĐẶT KÍCH BO + danh sách tệp đính kèm
   -------------------------------------------------------------------------- */
/* Danh sách tệp đã tải lên (dùng chung cho mọi ô đính kèm nhiều tệp) */
.kd-tep-list { display: flex; flex-direction: column; gap: 6px; }
.kd-tep-dong {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border: 1px solid var(--border-subtle); border-radius: 8px;
  background: var(--bg-app);
}
.kd-tep-dong a { color: var(--action); text-decoration: none; }
.kd-tep-dong a:hover { text-decoration: underline; }
.kd-tep-dong img { display: block; }

/* Bảng đặt kích bo: mỗi chủng loại một bảng, dòng 2 đầu là nhãn */
.bang-dat-bo { margin-bottom: 14px; }
.bang-dat-bo thead th { white-space: nowrap; }
.bang-dat-bo thead tr:first-child th {
  background: var(--primary-100, #E7E7E9); color: var(--primary-700, #000000);
  font-weight: var(--fw-semibold); text-align: left;
}
.bang-dat-bo td .kd-cost-in {
  font-family: var(--font-mono); font-size: 12.5px;
}
.bang-dat-bo tbody tr:nth-child(2n) { background: var(--bg-subtle); }

/* --------------------------------------------------------------------------
   8E. BAN HÀNH SẢN XUẤT (chuẩn hóa lại) — tỷ lệ size chốt tay + văn bản tự do
   -------------------------------------------------------------------------- */
/* Bảng tỷ lệ size: nửa trái là số khách đặt (chỉ đọc), nửa phải là số sản xuất
   (sửa được). Tách hai nửa bằng đường kẻ để không nhìn nhầm cột. */
.bang-ty-le-size thead tr:first-child th { text-align: center; }
.bang-ty-le-size thead tr:first-child th:nth-child(3) {
  background: var(--action-subtle); color: var(--status-info-fg);
}
.bang-ty-le-size thead tr:first-child th:nth-child(5) {
  background: var(--primary-100, #E7E7E9); color: var(--primary-700, #000000);
}
.bang-ty-le-size td.num.zero, .bang-ty-le-size td.zero { color: var(--fg-muted); }
.bang-ty-le-size tbody td:nth-child(n+2) { border-left: 1px solid var(--border-subtle); }

/* Văn bản Kinh doanh noted — hiện đúng các dòng đã xuống */
.kd-van-ban {
  white-space: pre-wrap; font-size: var(--text-sm); line-height: 1.55;
  background: var(--bg-subtle); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 11px 13px;
}
/* Ô GHI văn bản sản xuất: phải đủ cao để nhìn thấy 5–6 dòng khi điền */
.kd-van-ban-o {
  min-height: 210px; line-height: 1.6; font-size: var(--text-sm);
  white-space: pre-wrap; resize: vertical;
}

/* Khối DÁN BẢNG từ Excel (trong hộp thoại Ban hành sản xuất) */
.kd-dan-hop {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-subtle); padding: 11px 12px; margin-top: 10px;
}
.kd-dan-huong { font-size: 12px; color: var(--fg-secondary); margin-bottom: 7px; }
.kd-dan-hop textarea { width: 100%; min-height: 110px; }

/* Khối ĐỌC SỐ LIỆU TỪ FILE WORD hợp đồng (hộp thoại hợp đồng) */
.kd-doc-word { display: flex; flex-direction: column; gap: 10px; }
.kd-doc-kq:empty { display: none; }
.bang-doc-word { font-size: 12.5px; }
.bang-doc-word td { vertical-align: top; }
.kd-doc-vanban {
  white-space: pre-wrap; font-family: var(--font-mono); font-size: 11.5px;
  line-height: 1.5; max-height: 60vh; overflow: auto; margin: 0;
  background: var(--bg-subtle); padding: 10px 12px; border-radius: var(--radius-md);
}

/* Bảng LỊCH THANH TOÁN trong hộp thoại hợp đồng */
.bang-thanh-toan { font-size: 13px; }
.bang-thanh-toan td { vertical-align: middle; }
.bang-thanh-toan input[type="date"] { min-width: 150px; }
.bang-thanh-toan tfoot td { background: var(--bg-subtle); }

/* Ảnh mẫu khách đã chốt — xem lại trong phiếu Ban hành sản xuất */
.kd-anh-nhom { margin-bottom: 12px; }
.kd-anh-ten { font-size: var(--text-sm); margin-bottom: 6px; }
.kd-anh-hang { display: flex; gap: 10px; flex-wrap: wrap; }
.kd-anh-o { flex: 0 0 auto; }
.kd-anh-nhan {
  font-size: 11px; color: var(--fg-muted); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); margin-bottom: 3px;
}
.kd-anh-hinh {
  width: 108px; height: 108px; object-fit: cover; display: block;
  border: 1px solid var(--border-default); border-radius: var(--radius-md, 8px);
  background: var(--bg-subtle); cursor: zoom-in;
}
.kd-anh-trong {
  width: 108px; height: 108px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md, 8px);
  color: var(--fg-muted); font-size: 11px; text-align: center; padding: 4px;
}

/* ==========================================================================
   9. MÀN HÌNH HẸP
   Ngưỡng 900px (đổi từ 1024 ngày 19/10/2026): ở 1024 vỏ vẫn SÁT MÉP với sidebar
   dọc 250px như bản vẽ; chỉ dưới 900px mới xếp dọc sidebar thành dải ngang.
   ========================================================================== */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; max-height: none; }
  /* Bo chon phan he thanh mot hang cuon ngang */
  .sb-mods-wrap { padding: 8px 8px 0; }
  .sb-mods { flex-direction: row; gap: 2px; overflow-x: auto; padding-bottom: 8px; }
  .sb-mod { width: auto; white-space: nowrap; flex: none; }
  .sb-mod-list { flex-direction: row; gap: 2px; overflow-x: auto; padding-bottom: 6px; }
  .sb-mod-btn { width: auto; flex: none; white-space: nowrap; }
  .sb-nav { display: flex; gap: 10px; overflow-x: auto; padding: 8px; flex: none; }
  .sb-group { display: flex; gap: 2px; align-items: center; }
  .sb-group + .sb-group { margin-top: 0; }
  .sb-group-lbl { display: none; }
  /* Màn hẹp không có chỗ cho nhóm gấp/mở (không còn tiêu đề để bấm) nên HIỆN LẠI HẾT */
  .sb-group.gap > .sb-item { display: flex; }
  .sb-item { width: auto; white-space: nowrap; margin-bottom: 0; flex: none; }
  .sb-item > span:not(.ic):not(.count) { flex: none; overflow: visible; }
  .bar-row { grid-template-columns: 130px 1fr 110px; }
}

/* ============================================================================
   NHÓM CHI PHÍ THEO CHỦNG LOẠI (phiếu đề xuất may mẫu)
   ----------------------------------------------------------------------------
   Mỗi chủng loại một khối riêng, có dòng tiêu đề kèm số dòng và tổng của nhóm —
   để nhìn vào là biết dòng nào của chủng loại nào, thay vì một bảng phẳng.
   ============================================================================ */
.kd-nhom-cp { border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  margin-bottom: 10px; overflow: hidden; }
.kd-nhom-cp-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px;
  background: var(--bg-subtle); border-bottom: 1px solid var(--border-default);
  font: var(--fw-medium) var(--text-sm)/1.2 var(--font-sans); }
.kd-nhom-cp-head .muted { font-size: var(--text-micro); }
.kd-nhom-cp .muted[style] { padding: 8px 10px !important; font-size: var(--text-xs); }
/* ============================================================================
   FORM TAO VAT TU NGAY TRONG DANH SACH GOI Y (khong mo hop thoai)
   ----------------------------------------------------------------------------
   `openModal` cua ung dung chi co MOT hop thoai: mo hop thoai moi la ghi de hop
   thoai dang mo, nen khong the mo "Tao vat tu" tu trong mot hop thoai khac ma
   khong mat du lieu. Form nay nam ngay trong danh sach goi y.
   ============================================================================ */
.kd-pick-tao { padding: 9px 10px; display: flex; flex-direction: column; gap: 7px; }
.kd-pick-tao-ten { font-size: 12px; }
.kd-pick-tao-dong { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.kd-pick-tao-dong .phu { color: var(--fg-muted); font-size: 11px; }
.kd-pick-tao-nut { display: flex; align-items: center; gap: 6px; }
.kd-pick-loi { color: var(--danger-600); font-size: 11.5px; }

/* ============================================================================
   THẺ HỒ SƠ (card) — dùng cho danh sách đơn hàng, khách hàng, danh mục NPL
   ----------------------------------------------------------------------------
   VÌ SAO ĐỔI TỪ BẢNG SANG THẺ (Công ty yêu cầu 22/09/2026: "module phòng kinh doanh
   toàn là dạng list, khó đọc và khó nhìn"):
     · Bảng 6–13 cột, tiêu đề cột 10.5px IN HOA, quá nửa ô là "—" → mắt phải quét
       ngang qua rất nhiều ô trống mới tới thông tin cần.
     · Thông tin quan trọng (mã đơn, khách, giá trị, VIỆC CẦN LÀM) bị chia ra nhiều
       cột ngang hàng nhau nên không có thứ bậc — đọc xong không biết việc gì trước.
   Thẻ gom một bản ghi thành MỘT khối đọc theo chiều dọc:
     dòng 1: MÃ (đậm, chữ đẳng width) + SỐ TIỀN (to, bên phải)
     dòng 2: tên khách / tên vật tư (đậm vừa)
     dòng 3: các nhãn phụ (chủng loại, ngày, trạng thái…)
     dòng 4: tiến độ 5 bước (vạch màu) — nhìn là biết đơn đang ở đâu
     dòng 5: VIỆC KẾ TIẾP + nút hành động
   ============================================================================ */
.the-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}
.the {
  display: flex; flex-direction: column; gap: 9px;
  padding: 15px 17px 13px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.the:hover { box-shadow: var(--shadow-md); }
/* Dải màu bên trái = MỨC ĐỘ CẦN CHÚ Ý, không phải trang trí:
   vàng = có việc phải làm ngay · đỏ = trễ/khẩn · xanh = đã xong · xám = đang chờ ai */
.the.can-lam { border-left-color: var(--warning-500); }
.the.tre { border-left-color: var(--danger-500); }
.the.xong { border-left-color: var(--success-500); }
.the.cho { border-left-color: var(--border-strong); }
.the-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.the-ma {
  font: var(--fw-bold) var(--text-h3)/var(--lh-h3) var(--font-mono);
  color: var(--fg-primary); cursor: pointer; letter-spacing: -0.01em;
}
.the-ma:hover { color: var(--action); text-decoration: underline; }
.the-tien {
  font: var(--fw-bold) var(--text-h3)/var(--lh-h3) var(--font-mono);
  color: var(--fg-primary); white-space: nowrap;
}
.the-ten { font: var(--fw-semibold) var(--text-body)/var(--lh-body) var(--font-sans); color: var(--fg-primary); }
.the-sub { font: var(--fw-regular) var(--text-caption)/var(--lh-caption) var(--font-sans); color: var(--fg-secondary); }
.the-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.the-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--border-subtle); padding-top: 10px; margin-top: 1px;
}
.the-viec { display: flex; align-items: center; gap: 7px; min-width: 0; }
.the-viec b { font-weight: var(--fw-semibold); color: var(--fg-primary); }
/* Tiến độ 5 bước: 5 vạch ngắn. Vạch đã xong tô đậm, vạch đang làm tô vàng.
   Vạch CHƯA làm dùng `--border-strong` (không dùng `--bg-muted`): nền quá nhạt thì
   5 vạch trông như chỉ có 2, người dùng không đếm được đang ở bước mấy. */
.the-buoc { display: flex; align-items: center; gap: 3px; }
.the-buoc i {
  display: block; width: 20px; height: 5px; border-radius: 3px;
  background: var(--border-strong);
}
.the-buoc i.xong { background: var(--primary-500); }
.the-buoc i.dang { background: var(--accent-500); }
.the-buoc-nhan {
  font: var(--fw-regular) var(--text-micro)/var(--lh-micro) var(--font-sans);
  color: var(--fg-muted); margin-left: 4px;
}
/* Thẻ nhỏ dùng trong lưới hẹp (danh mục vật tư) */
.the.nho { padding: 12px 14px 11px; gap: 7px; border-left-width: 3px; }
.the.nho .the-ma { font-size: var(--text-body); line-height: var(--lh-body); }
@media (max-width: 1100px) {
  .the-grid { grid-template-columns: 1fr; }
}

/* Bảng NỘI DUNG FILE THÔNG SỐ: ĐÃ BỎ (23/09/2026) — phiếu in chỉ ghi số tệp đính kèm,
   công ty tự in tệp ngoài. Lớp `.in-bang-thong-so` không còn nơi dùng. */
/* Văn bản đọc từ file Word (.docx) */
.in-van-ban { font-size: 11.5px; line-height: 1.45; }

/* =============================================================================
   BẢNG ĐỊNH MỨC MẪU (BOM) — dòng TIÊU ĐỀ KHỐI nằm TRONG bảng (01/10/2026)
   -----------------------------------------------------------------------------
   Vì sao: bản trước mỗi khối là một THẺ riêng, lặp lại 4 lần hàng tiêu đề cột ⇒ rối
   và dài. Nay MỘT bảng, mỗi khối là một dòng nhóm — nhìn liền mạch, bớt cuộn.
   ============================================================================= */
.kd-bom-bang { table-layout: fixed; }
.kd-bom-bang tbody td { padding: 7px 10px; }
.kd-bom-bang input.num-in { text-align: right; }
.kd-bom-nhom > td {
  background: var(--tbl-head-bg); padding: 8px 12px !important;
  border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
}
.kd-bom-nhom .nd { display: flex; align-items: center; gap: 10px; }
.kd-bom-nhom .nd > b { font-size: var(--text-sm); color: var(--fg-primary); letter-spacing: 0; }

/* =============================================================================
   KHUNG ĐẦU TRANG: BỎ GHIM + KHÔNG PHÌNH (Công ty báo 15/10/2026)
   -----------------------------------------------------------------------------
   LỖI THẬT (đo được): `.topbar` đặt `position: sticky; top: 16px` và nền chỉ
   `rgba(255,255,255,.50)` — nền trang lộ qua nên trông như mảng vàng kem. Khi CUỘN nội dung,
   khung này ĐỨNG YÊN và CHE nội dung (đo: sau khi cuộn 214px nó vẫn chiếm 76px đầu màn hình).
   Ở màn ≤ ~1300px nó còn XUỐNG DÒNG thành 133px (đo ở 1200px) nên che càng nhiều — đúng cái
   Công ty thấy là "lớn một cách bất hợp lý".
   SỬA:
     1. Bỏ ghim (position: static). Thanh menu bên trái `.sidebar` VẪN ghim nên vẫn đổi phân hệ,
        đổi mật khẩu, thoát được — không mất chức năng nào.
     2. Không cho xuống dòng + cho ô CÔNG TY co lại ⇒ giữ nguyên một hàng ở mọi cỡ màn.
     3. Dưới 860px (điện thoại) mới cho xuống dòng để không tràn.
   ============================================================================= */
.topbar { position: static; flex-wrap: nowrap; }
.tb-right { flex-wrap: nowrap; }
.tb-right select, .topbar select { min-width: 0; flex: 1 1 auto; max-width: 340px; }
@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; }
  .tb-right { flex-wrap: wrap; }
}

/* =============================================================================
   ĐỊNH MỨC MẪU (BOM) — GỌN LẠI PHẦN NHẬP (Công ty yêu cầu 17/10/2026: "form nhập thì
   thể hiện quá lớn, dàn trải, list chủng loại cũng hơi lớn").
   ĐO TRƯỚC KHI SỬA (ảnh màn 17/10/2026): dòng trong hộp thoại ~47px vì ô nhập ĐÓNG KHUNG
   bo tròn; dải tên khối cao; cột Ghi chú rộng thừa.
   NAY: theo ĐÚNG mật độ màn nhập định mức NPL mà Công ty đã ưng — ô nhập chỉ còn gạch chân
   mảnh, chữ 13px, dòng ~30px. KHÔNG ẩn cột nào, KHÔNG đổi số liệu, KHÔNG đổi cách lưu.
   ============================================================================= */
.kd-bom-bang { table-layout: fixed; }
.kd-bom-bang td, .kd-bom-bang th { padding: 2px 6px; }
.kd-bom-bang tr[data-khoi] { height: 30px; }
/* Ô nhập trong bảng: bỏ khung bo tròn -> chỉ còn gạch chân mảnh (như màn nhập định mức NPL) */
.kd-bom-bang tr[data-khoi] .input {
  border: 0; border-bottom: 1px dashed #cbd5e1; border-radius: 0; background: none;
  padding: 2px 4px; height: 24px; font-size: var(--text-caption); box-shadow: none;
}
.kd-bom-bang tr[data-khoi] .input:focus {
  outline: none; border-bottom-color: var(--accent); background: #eff6ff; box-shadow: none;
}
.kd-bom-bang tr[data-khoi] .input::placeholder { color: #c3cbd8; }
/* Dải tên khối: thấp lại, chữ nhỏ, nút "＋ Thêm dòng" gọn */
.kd-bom-bang tr.kd-bom-nhom td { padding: 3px 8px; }
.kd-bom-bang tr.kd-bom-nhom .nd { min-height: 24px; }
.kd-bom-bang tr.kd-bom-nhom b { font-size: var(--text-caption); }
.kd-bom-bang tr.kd-bom-nhom .btn { padding: 2px 9px; font-size: var(--text-micro); }
/* Nút xoá 🗑 gọn, không đẩy dòng cao lên */
.kd-bom-bang tr[data-khoi] .btn { padding: 1px 6px; font-size: var(--text-micro); line-height: 1.4; }
/* Cột: thu bớt chỗ thừa (Vai trò vừa đủ đọc, Ghi chú co giãn) */
.kd-bom-bang col.kd-bom-c1 { width: 240px; }
.kd-bom-bang col.kd-bom-c2 { width: 84px; }
.kd-bom-bang col.kd-bom-c3 { width: 104px; }
.kd-bom-bang col.kd-bom-c5 { width: 40px; }

/* =============================================================================
   HỘP THOẠI ĐỊNH MỨC MẪU (BOM): TIÊU ĐỀ CỘT KHÔNG GHIM NỮA.
   Công ty báo 17/10/2026 (kèm ảnh): "phần tên chung (vai trò) che nội dung rồi" — ảnh cho thấy dòng
   tiêu đề cột NỔI GIỮA KHUNG và CẮT NGANG dòng phía trên (dòng "III · Bao bì" bị chém đôi).
   Nguyên nhân: `.tbl thead th` toàn cục là `position: sticky; top: 0` — trong hộp thoại (khung cuộn
   nhỏ, có thanh tiêu đề riêng) mốc ghim bị lệch nên nó phủ lên dòng đang xem.
   Trong hộp thoại nhỏ thì tiêu đề CUỘN THEO BẢNG là đủ và không thể che nội dung. KHÔNG ảnh hưởng
   các bảng ngoài màn (vẫn ghim bình thường).
   ============================================================================= */
.kd-bom-bang { position: relative; }
.kd-bom-bang thead th { position: static !important; top: auto !important; z-index: auto !important;
  background: #f1f5f9; }

/* =============================================================================
   SIDEBAR 19/10/2026 — MỤC CON NẰM NGAY DƯỚI PHÂN HỆ ĐANG CHỌN (đúng bản vẽ)
   -----------------------------------------------------------------------------
   Trước: 11 nút phân hệ ở trên, rồi MỘT danh sách `.sb-item` RIÊNG ở dưới (vì chỉ vẽ
   phân hệ đang xem nên khi ở Dashboard chỉ còn đúng một mục lẻ "Bảng điều khiển" —
   trông như rác). Nay `buildNav()` (app.js) gắn `#nav` vào CHÍNH hàng `.sb-mod-row`
   của phân hệ đang chọn:
     · mục con THỤT LỀ + GẠCH DỌC MẢNH bên trái (như prototype);
     · giữ NHÓM mục — tiêu đề nhóm in hoa nhỏ, gấp/mở được;
     · mục con ĐANG MỞ: nền xám đậm nhẹ + chữ đậm + vạch vàng trái 3px (như mục phân hệ);
     · badge số bên phải nút phân hệ, KHÔNG có số thì ẩn hẳn (không bịa).
   Chỉ có MỘT vùng menu: `#nav` nằm trong `#modList`; `.sb-mods-wrap` là vùng cuộn.
   ============================================================================= */

/* Vùng 11 phân hệ + mục con là vùng CUỘN của sidebar (trước đây `#nav` tự cuộn).
   Mật độ gọn hơn bản cũ một chút để màn 1366×768 vẫn thấy đủ 11 phân hệ + mục con
   của phân hệ đang chọn mà không phải cuộn (đo lại sau khi thêm mục con). */
.sb-mods-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 10px 8px; }
.sb-mod-list { gap: 1px; }
.sb-mod-row { display: flex; flex-direction: column; }
.sb-mod-row.on { position: relative; }
.sb-mod-btn { padding: 4px 9px; }

/* MỤC CON: thụt lề + gạch dọc mảnh, nằm trong cùng khối với nút phân hệ đang chọn. */
.sb-mod-row > .sb-nav {
  flex: none;
  overflow: visible;
  margin: 1px 2px 4px 17px;
  padding: 1px 0 1px 10px;
  border-left: 1px solid var(--border-strong, #C9D2DE);
}
.sb-mod-row > .sb-nav .sb-item {
  padding: 5px 8px;
  margin-bottom: 0;
  gap: 8px;
  border-radius: 4px !important;
}
.sb-mod-row > .sb-nav .sb-group-lbl { padding: 5px 6px 3px; }
.sb-mod-row > .sb-nav .sb-group + .sb-group { margin-top: 6px; }
/* Nhóm đầu tiên trong menu con không cần khoảng hở phía trên. */
.sb-mod-row > .sb-nav > .sb-group:first-child { margin-top: 0; }
/* MỤC CON ĐANG MỞ: nền xám RẤT NHẸ + chữ đậm + vạch vàng trái 3px (Công ty chốt
   19/10/2026: bỏ nền đen cho nhẹ mắt — mục đang chọn KHÔNG còn tối như trước). */
.sb-mod-row > .sb-nav .sb-item.on {
  background: #F4F6FA !important;
  color: #1B2130 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  position: relative;
}
.sb-mod-row > .sb-nav .sb-item.on:before {
  content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px;
  background: #FFCC00; border-radius: 0 3px 3px 0;
}
.sb-mod-row > .sb-nav .sb-item.on .ic { color: #B88600; opacity: 1; }

/* BADGE SỐ LIỆU bên phải nút phân hệ. Rỗng = ẩn (không có số thì không hiện gì). */
.sb-mod-badge {
  flex: none; margin-left: auto;
  min-width: 18px; padding: 3px 6px;
  font: var(--fw-semibold) var(--text-micro)/1 var(--font-mono);
  text-align: center;
  background: var(--bg-subtle); color: var(--fg-muted);
  border-radius: var(--radius-full);
}
.sb-mod-badge:empty { display: none; }
.sb-mod-btn.on .sb-mod-badge { background: #FFF3BF; color: #8A6A00; }

/* Màn hẹp: 11 phân hệ xếp DỌC (không phải hàng cuộn ngang nữa) để mục con vẫn nằm
   ngay dưới phân hệ đang chọn — cấu trúc hai tầng giữ nguyên như màn rộng.
   Ngưỡng 900px (đổi từ 1024 ngày 19/10/2026) — xem khối "VỎ SÁT MÉP" ở cuối tệp. */
@media (max-width: 900px) {
  .sb-mods-wrap { padding: 8px 8px 10px; overflow: visible; }
  .sb-mod-list { flex-direction: column; overflow: visible; }
  .sb-mod-btn { width: 100%; white-space: normal; }
  .sb-mod-row > .sb-nav { display: block; overflow: visible; }
  .sb-group { display: block; }
  .sb-group + .sb-group { margin-top: 10px; }
  .sb-group-lbl { display: flex; }
  .sb-item { width: 100%; white-space: nowrap; }
  .sb-item > span:not(.ic):not(.count) { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
}

/* =============================================================================
   ĐẦU TRANG MÀN NGÀY 19/10/2026 (Công ty yêu cầu — cho app giống bản vẽ prototype)
   -----------------------------------------------------------------------------
   Đường dẫn nhỏ › TIÊU ĐỀ LỚN › một câu mô tả, nằm TRÊN nội dung màn và NGOÀI thẻ.
   Dữ liệu do `veDauTrangMan()` (app.js) điền từ phân hệ + mục menu đang mở.
   ⚠ Viền KPI 3px và ô tìm kiếm trên topbar (②③ cũ) đã DỒN xuống khối "GIAO DIỆN C"
   ở CUỐI TỆP — chỉ còn MỘT nơi khai báo giao diện C.
   ============================================================================= */

/* --- ① Đầu trang màn -------------------------------------------------------- */
.page-head { margin: 1px 0 12px; min-width: 0; }
.ph-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  font: var(--fw-regular) var(--text-caption)/1.45 var(--font-sans);
  color: var(--fg-muted);
}
.ph-crumb .ph-sep { color: var(--neutral-400); }
.ph-crumb .ph-leaf { color: var(--fg-secondary); font-weight: var(--fw-semibold); }
.ph-title {
  margin: 2px 0 0;
  font: var(--fw-bold) 22px/1.22 var(--font-display);
  letter-spacing: -.02em; text-transform: uppercase;
  color: var(--fg-primary);
}
.ph-desc {
  margin: 2px 0 0; max-width: 900px;
  font: var(--fw-regular) 12.5px/1.45 var(--font-sans);
  color: var(--fg-muted);
}
.ph-desc:empty { display: none; }
@media (max-width: 860px) {
  .ph-title { font-size: 19px; }
}

/* =============================================================================
   GIAO DIỆN **C · CHẮC** — CSS CỦA BẢN VẼ, DỊCH MỘT LẦN SANG APP THẬT
   Ngày 19/10/2026 — Công ty yêu cầu: "sao không dùng CSS của bản demo cho app thật
   luôn, mà cứ phải đối chiếu từng chỗ?" Đúng. Khối này thay cách làm cũ (thêm từng
   mẩu, đoán lớp) bằng MỘT bản dịch đầy đủ: BASE + theme C của bản vẽ
   (`demo-toan-bo.html` + `.t-c` trong `demo-4-giao-dien.html`) áp lên ĐÚNG lớp
   thật của app.

   ĐÃ GỘP 5 KHỐI RỜI (nay xoá khỏi chỗ cũ, không còn chồng chéo):
     ① GIAO DIỆN C · CHẮC — KIỂU KẾ TOÁN
     ② C · BỔ SUNG: FORM NHẬP + MENU
     ③ C · BẢNG DỄ DÒ THEO CỘT
     ④ C · MENU 11 PHÂN HỆ (mục đang chọn)
     ⑤ THANH TRÊN 1 HÀNG GỌN
   (kèm phần viền KPI 3px và ô tìm kiếm của khối "BA VIỆC GIAO DIỆN" — cũng dồn
   về đây để chỉ còn MỘT nơi khai báo giao diện C.)

   BẢNG ÁNH XẠ LỚP demo → app (căn cứ để dịch, KHÔNG đoán):
     .side → .sidebar · .nav button → .sb-mod-btn/.sb-item · .nav .hdr → .sb-group-lbl
     .nav button.on → .sb-mod-btn.on / .sb-item.on · .main → #view
     .top → .topbar · h1 → .ph-title · .top .sub → .ph-desc
     .g4 → .kpi-grid · .kpi → .kpi (.kpi-top/-lbl/-val/-foot)
     .panel → .card/.m-block/.tbl-wrap · .panel .head → .card-head/.modal-head/.block-h
     .table-wrap → .tbl-wrap · table.tbl → .tbl · .sw → .gop-tab > .btn
     .btn → .btn (+ -primary/-secondary/-ghost/-danger/-success/-sm)
     .inp → .input/.inp/.select/.textarea · .field label → .field > span:first-child
     .chip → .chip/.badge · .badge → .count/.sb-mod-badge
     .modal → .modal/#modalBox · .tabs button → .gop-tab .btn
     .sw (nút đổi theme của bản vẽ) → KHÔNG có trong app — bỏ.

   CHỈ dùng lớp thật + thẻ; KHÔNG dùng [class*="…"] (đã hai lần làm hỏng giao diện).
   Không đổi tên lớp bộ kiểm dùng: .sb-item .sb-mod-btn #nav .tbl .btn .kpi
   .page-head .ph-title .tb-search-inp.
   ============================================================================= */

/* ---- 0. TOKEN: đổi đúng biến của app sang giá trị theme C của bản vẽ ---- */
:root {
  --bg-app: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --glass-bg: #FFFFFF;
  --glass-bg-soft: #FFFFFF;
  --glass-bg-strong: #FFFFFF;
  --glass-border: #D8DFE9;
  --border-subtle: #E4EAF2;
  --border-default: #C9D2DE;
  --border-strong: #AFBAC9;
  --tbl-head-bg: #E9EEF5;
  --tbl-foot-bg: #F3F6FA;
}
/* Bản C nền TRẮNG phẳng — bỏ quầng màu trang trí của bản kính */
body { background: #FFFFFF; }
body::before { display: none; }

/* ---- 1. VỎ: sidebar · topbar · thẻ · khung bảng · hộp thoại ----
   Demo C: nền #FFFFFF, viền 1px #D8DFE9, bo 5px, KHÔNG bóng, KHÔNG kính mờ. */
.sidebar, .topbar, .card, .m-block, .tbl-wrap, .modal {
  background: #FFFFFF;
  border: 1px solid #D8DFE9;
  border-radius: 5px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Thẻ đơn hàng (.the — màn Đơn hàng) + ngăn kéo chi tiết (.drawer): cùng ngôn ngữ C —
   phẳng, viền 1px #D8DFE9, bo 5px. GIỮ dải màu 4px bên trái của .the (mức cần chú ý);
   .the.can-lam / .tre / .xong đặt màu riêng nên vẫn thắng. */
.the {
  background: #FFFFFF;
  border: 1px solid #D8DFE9;
  border-left: 4px solid var(--border-strong);
  border-radius: 5px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.the:hover { box-shadow: 0 2px 10px -4px rgba(16, 24, 40, .20); }
.drawer {
  background: #FFFFFF;
  border-left: 1px solid #D8DFE9;
  box-shadow: -18px 0 48px -12px rgba(16, 24, 40, .28);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.drawer-head {
  background: #F3F6FA;
  border-bottom: 1px solid #C9D2DE;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* ---- 2. THANH TRÊN 1 HÀNG GỌN — ĐÚNG THỨ TỰ BẢN VẼ (19/10/2026) ----
   Bản vẽ `demo-toan-bo.html`: bên TRÁI là CÔNG TY + ô chọn rồi ngay sau là ô tìm,
   bên PHẢI là Kỳ · ⛶ Rộng · ↻ Tải lại · người dùng. KHÔNG có khoảng trống lớn bên trái.
   Trước đây CÔNG TY + ô tìm nằm trong `.tb-right` (flex:1, justify-end) nên bị dồn hết
   sang phải, còn nửa trái thanh trên trống. Nay tách thành HAI nhóm thật:
     · `.tb-main`  — nhóm trái, flex:1 nhưng justify-content:flex-start ⇒ bám lề trái;
     · `.tb-right` — nhóm phải, flex:none, justify-content:flex-end ⇒ bám lề phải.
   Ô tìm co giãn được (min-width 110–120px) nên 1366/1024 không tràn, không xuống dòng. */
.topbar {
  min-height: 0;
  padding: 7px 12px;
  /* Bản C: thanh trên là DẢI phẳng — chỉ có đường kẻ dưới, không đóng khung.
     Nhờ vậy vùng trống bên trái (đã ẩn .tb-left) hoà vào nền trắng, không thành ô rỗng. */
  border: 0;
  border-bottom: 1px solid #D8DFE9;
  border-radius: 0;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}
.topbar .tb-left { display: none !important; }

/* Nhóm TRÁI: CÔNG TY + ô chọn ĐỨNG TRƯỚC, ô tìm ĐỨNG SAU, sát lề trái. */
.tb-main {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 12px; flex: 1 1 auto; min-width: 0;
}
.tb-cty {
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto; min-width: 0; white-space: nowrap;
}
.tb-cty > .ds-eyebrow {
  font-size: 10.5px; font-weight: 700; line-height: 1.2;
  letter-spacing: .06em; text-transform: uppercase; color: #5A6577;
}
/* Chỉ viền nhẹ cho ô chọn — không đóng khung cả cụm CÔNG TY (tránh "hộp trong hộp"). */
.tb-cty .select {
  width: auto; height: 33px;
  flex: 0 1 190px; min-width: 0; max-width: 190px;
  padding: 0 28px 0 10px;
  background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
  font-size: 12.5px; font-weight: 600; color: #1B2130;
}
/* Ô TÌM KIẾM toàn cục — viền #C9D2DE, focus VÀNG thương hiệu (đúng 19/10/2026) */
.tb-search {
  position: relative; display: flex; align-items: center;
  flex: 1 1 260px; min-width: 120px; max-width: 460px;
}
.tb-search-ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; flex: none; color: #8A93A3; pointer-events: none;
}
.tb-search-ico circle, .tb-search-ico path {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.tb-search-inp {
  width: 100%; min-width: 0; height: 33px;
  padding: 0 12px 0 31px;
  border: 1px solid #C9D2DE; border-radius: 4px;
  background: #F8FAFC; color: #1B2130;
  font: var(--fw-regular) 12.5px/1 var(--font-sans);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.tb-search-inp::placeholder { color: #7A8296; }
.tb-search-inp:focus, .tb-search-inp:focus-visible {
  border-color: #FFCC00; background: #FFFDF2;
  box-shadow: 0 0 0 2px rgba(255, 204, 0, .28);
}
.tb-search-inp::-webkit-search-cancel-button,
.tb-search-inp::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.tb-search:hover .tb-search-ico { color: #454B5C; }

/* Nhóm PHẢI: "Cập nhật: …" · "↻ Tải lại" — một hàng, bám sát góc phải, không xuống dòng.
   KHỐI NGƯỜI DÙNG (`.tb-who`) ĐÃ BỎ khỏi thanh trên 20/10/2026: nó trùng y hệt khối ở
   CHÂN MENU TRÁI (nơi Đổi mật khẩu / Thoát vẫn nằm). */
.tb-right {
  display: flex; align-items: center; justify-content: flex-end;
  flex: 0 0 auto; min-width: 0; flex-wrap: nowrap; gap: 10px;
}
/* NHÃN "Cập nhật: dd/mm/yyyy · HH:mm" — chữ nhỏ, xám, sát góc phải, KHÔNG phải bộ lọc.
   Luôn hiện (không ẩn ở màn hẹp như dòng "Kỳ …" cũ): nó chỉ chiếm ~135px và là thông tin
   duy nhất cho biết dữ liệu được tải lúc nào. */
.tb-capnhat {
  font-size: 11px; line-height: 1.2; font-weight: 400;
  color: #7A8296; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1180px) {
  .tb-cty .select { flex-basis: 150px; max-width: 170px; }
  .tb-search { flex-basis: 180px; min-width: 110px; max-width: 300px; }
}
@media (max-width: 1024px) {
  /* 1024×768: thu gọn ô chọn để ô tìm còn chỗ co giãn mà không tràn ngang;
     nhãn CÔNG TY vẫn giữ (đúng bản vẽ). */
  .tb-main { gap: 10px; }
  .tb-cty .select { flex-basis: 128px; max-width: 140px; }
  .tb-capnhat { font-size: 10.5px; }
}
@media (max-width: 960px) {
  .tb-cty > .ds-eyebrow { display: none; }
}
@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; height: auto; }
  .tb-main { flex: 1 1 100%; }
  .tb-search { flex: 1 1 100%; max-width: none; }
  .tb-right { flex-wrap: wrap; }
}

/* ---- 3. MENU TRÁI (④ — NHẸ LẠI theo yêu cầu Công ty 19/10/2026) ----
   Mục PHÂN HỆ đang chọn: nền xám rất nhẹ #EEF2F7 + chữ charcoal đậm 700 + vạch vàng
   #FFCC00 3px; KHÔNG nền đen (#232C38 cũ), KHÔNG bóng — Công ty nói "cột phân hệ nhìn
   hơi nặng, khi click vào chuyển qua màu đen cũng bị nặng".
   Mục thường: chữ #3F4756 đậm 500, icon mờ hơn (opacity .75).
   SỐ THỨ TỰ 01..11: ĐÃ BỎ KHỎI MẶT NÚT (Công ty yêu cầu 19/10/2026 — "không cần số thứ
   tự, làm cột menu nặng thêm"). Phần tử `.so` VẪN nằm trong DOM (cùng `data-so`) để bộ
   kiểm / công cụ nội bộ đọc được, nhưng `display:none` + `aria-hidden` nên không hiện.
   Mục CON đang mở: nền #F4F6FA + chữ đậm 600 + vạch vàng 3px (không dùng nền đậm). */
.sb-mod-btn {
  border-radius: 4px;
  transition: background .12s, color .12s;
  color: #3F4756;
  font-weight: 500;
}
/* ② KHÔNG HIỆN SỐ 01..11 Ở CỘT PHÂN HỆ — giữ trong DOM, chỉ ẩn. */
.sb-mod-btn .so { display: none; font-size: 10.5px; font-weight: 600; color: #98A1AF; }
.sb-mod-btn .ic { opacity: .75; }
.sb-mod-btn:hover { background: #F4F6FA !important; }
.sb-mod-btn.on {
  background: #EEF2F7 !important; color: #1B2130 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  position: relative;
}
.sb-mod-btn.on .so, .sb-mod-btn.on .ic { color: #8A6A00 !important; opacity: 1; }
.sb-mod-btn.on:before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: #FFCC00; border-radius: 0 3px 3px 0;
}
.sb-mod-badge { background: #EEF2F7; color: #5A6577; }
.sb-mod-btn.on .sb-mod-badge { background: #FFF3BF; color: #8A6A00; }
.sb-group-lbl {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; color: #5A6577;
}
.sb-item {
  border: 0 !important; border-radius: 4px !important;
  box-shadow: none !important; transition: background .12s;
}
.sb-item:hover { background: #F1F4F8 !important; }
.sb-item.on { background: #F4F6FA !important; color: #1B2130 !important; font-weight: 600 !important; }
.sb-mod-row > .sb-nav .sb-item {
  padding: 5px 8px; margin-bottom: 0; gap: 8px; border-radius: 4px !important;
}
.sb-mod-row > .sb-nav .sb-item.on {
  background: #F4F6FA !important; color: #1B2130 !important;
  font-weight: 600 !important; box-shadow: none !important;
  position: relative;
}
.sb-mod-row > .sb-nav .sb-item.on:before {
  content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px;
  background: #FFCC00; border-radius: 0 3px 3px 0;
}
.sb-mod-row > .sb-nav .sb-item.on .ic { color: #B88600; opacity: 1; }

/* ---- 4. THẺ KPI ----
   Viền trên 3px theo tone (đã chốt) + nền #FBFCFE, viền #C9D2DE, bo 5px. */
.kpi-grid { gap: 12px; }
.kpi {
  background: #FBFCFE !important;
  border: 1px solid #C9D2DE !important;
  border-top: 3px solid #1E1E1E !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.kpi-lbl { font-size: 11px; letter-spacing: .06em; color: #5A6577; font-weight: 800; }
.kpi-val { font-size: 24px; }
.kpi-foot { color: #667082; }
.kpi.kpi-bam:hover { box-shadow: 0 2px 10px -4px rgba(16, 24, 40, .25) !important; }
.kpi.tone-accent { border-top-color: #1E1E1E !important; }                 /* accent → charcoal */
.kpi.tone-success, .kpi.tone-ok { border-top-color: #17A35A !important; }
.kpi.tone-warning, .kpi.tone-warn { border-top-color: #F59E0B !important; }
.kpi.tone-danger { border-top-color: #E5484D !important; }
.kpi.tone-info { border-top-color: #3B62F0 !important; }

/* ---- 5. BẢNG (③ + C) ----
   Ô KẺ ĐẦY ĐỦ (dọc + ngang) · tiêu đề #E9EEF5 chữ hoa nhỏ · sọc #FAFBFD ·
   hover #EFF5FF · số căn phải + chữ số đều · dòng gọn 7px. */
.tbl-wrap { background: #FFFFFF; }
.tbl {
  border: 1px solid #D8DFE9 !important;
  border-radius: 5px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}
/* Bảng nằm trong khung .tbl-wrap thì khung đã có viền — bỏ viền thứ hai */
.tbl-wrap .tbl { border: 0 !important; border-radius: 0 !important; }
/* Bảng ĐỊNH MỨC MẪU (BOM) không có .tbl-wrap: tự mang viền */
.kd-bom-bang { border: 1px solid #D8DFE9 !important; border-radius: 5px !important; }
.tbl th, .tbl td {
  border-right: 1px solid #E1E7F0 !important;
  border-bottom: 1px solid #E1E7F0 !important;
  padding: 7px 10px !important;
}
/* BOM là bảng NHẬP DÀY: giữ nguyên mật độ 2px 6px (Công ty chốt 17/10/2026) */
.kd-bom-bang td, .kd-bom-bang th { padding: 2px 6px !important; }
.kd-bom-bang tr.kd-bom-nhom td { padding: 3px 8px !important; }
.tbl th:last-child, .tbl td:last-child { border-right: 0 !important; }
.tbl tbody tr:last-child td { border-bottom: 0 !important; }
.tbl thead th {
  background: #E9EEF5 !important; color: #33404F !important;
  font-size: 11px !important; letter-spacing: .05em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid #C9D2DE !important;
}
/* Cột đầu DÍNH (base tô nền riêng) — phải cùng màu tiêu đề + cùng sọc */
.tbl thead th:first-child { background: #E9EEF5 !important; }
.tbl tbody tr:nth-child(even) td { background: #FAFBFD !important; }
.tbl tbody tr:hover td { background: #EFF5FF !important; }
.tbl tbody td:first-child { box-shadow: none !important; }
.tbl tfoot td { background: #F3F6FA !important; border-top: 1px solid #C9D2DE !important; }
.tbl .num, .tbl th.num, .tbl .mono { font-variant-numeric: tabular-nums; }
.tbl .num, .tbl th.num { text-align: right; }
/* Hàng CHI TIẾT mở rộng có khoảng đệm riêng — đừng để luật 7px ở trên ép nhỏ */
.dong-ct > td { padding: 10px 14px !important; }

/* ---- 6. NÚT ----
   Nút thường: nền chuyển sắc trắng→#F3F6FA, viền #C9D2DE, bo 4px.
   Nút CHÍNH: charcoal #3A4553→#232C38 (giữ đúng đặc trưng C). */
.btn {
  border: 1px solid #C9D2DE;
  border-radius: 4px;
  background: linear-gradient(#FFFFFF, #F3F6FA);
  color: #1B2130;
  box-shadow: none;
}
.btn:hover { border-color: #AFBAC9; background: linear-gradient(#FFFFFF, #EEF3F9); }
.btn-primary {
  background: linear-gradient(#3A4553, #232C38);
  border-color: #232C38; color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .18);
}
.btn-primary:hover { background: linear-gradient(#46525F, #2A343F); border-color: #232C38; }
.btn-secondary {
  background: linear-gradient(#FFFFFF, #F3F6FA);
  border-color: #C9D2DE; color: #1B2130;
}
.btn-secondary:hover { background: linear-gradient(#FFFFFF, #EEF3F9); border-color: #AFBAC9; }
.btn-ghost { background: transparent; border-color: transparent; color: #475569; }
.btn-ghost:hover { background: #F1F4F8; border-color: transparent; color: #1B2130; }
.btn-danger { background: #E5484D; border-color: #E5484D; color: #FFFFFF; }
.btn-danger:hover { background: #CE2C31; border-color: #CE2C31; }
.btn-success { background: #17A35A; border-color: #17A35A; color: #FFFFFF; }
.btn-success:hover { background: #128347; border-color: #128347; }
.btn-sm, .btn-icon { border-radius: 3px; }
.btn:focus-visible { outline: 2px solid #FFCC00; outline-offset: 2px; box-shadow: none; }

/* ---- 7. Ô NHẬP · NHÃN TRƯỜNG (②) ----
   Viền #C9D2DE, bo 3px, nền trắng; FOCUS viền VÀNG #FFCC00 + quầng vàng nhạt.
   KHÔNG đụng `input` trần (ô mảnh trong bảng định mức / bảng nhập sẽ vỡ mật độ). */
.input, .inp, .select, .textarea,
.field > input:not([type="checkbox"]):not([type="radio"]),
.field > select, .field > textarea {
  border: 1px solid #C9D2DE !important;
  border-radius: 3px !important;
  background-color: #FFFFFF !important;
  box-shadow: none !important;
}
.input:hover, .inp:hover, .select:hover, .textarea:hover { border-color: #AFBAC9 !important; }
.input:focus, .inp:focus, .select:focus, .textarea:focus,
.field > input:focus:not([type="checkbox"]):not([type="radio"]),
.field > select:focus, .field > textarea:focus {
  border-color: #FFCC00 !important;
  background-color: #FFFDF2 !important;
  box-shadow: 0 0 0 2px rgba(255, 204, 0, .28) !important;
  outline: none !important;
}
.input:disabled, .select:disabled { background-color: #F5F7FA !important; color: #8A93A3; }
/* Nhãn trường: nhỏ, đậm, màu xám như sổ kế toán.
   ⚠ KHÔNG dùng text-transform: uppercase ở đây: bộ kiểm đọc innerText của hộp thoại NCC
   và so khớp đúng chữ "Số tài khoản" / "Ngân hàng — chi nhánh"; in hoa sẽ làm hỏng phép
   so khớp (đã thử 19/10/2026). Giữ nguyên chữ người dùng nhập, chỉ đổi cỡ/độ đậm. */
.field > span:first-child {
  font-size: 11px; font-weight: 700; line-height: 1.3;
  letter-spacing: .02em; color: #5A6577;
}
.field .help { font-size: 11.5px; color: #7A8296; }
/* Ô nhập trong BẢNG ĐỊNH MỨC: giữ đúng kiểu "chỉ gạch chân" đã chốt 17/10/2026 */
.kd-bom-bang tr[data-khoi] .input {
  border: 0 !important;
  border-bottom: 1px dashed #CBD5E1 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  padding: 2px 4px !important;
  height: 24px !important;
  box-shadow: none !important;
}
.kd-bom-bang tr[data-khoi] .input:focus {
  border-bottom-color: #FFCC00 !important;
  background-color: #FFFDF2 !important;
  box-shadow: none !important;
}

/* ---- 8. TAB · NHÃN TRẠNG THÁI ---- */
.gop-tab .btn { border-radius: 3px; }
.gop-tab .btn-primary {
  background: linear-gradient(#3A4553, #232C38) !important;
  border-color: #232C38 !important; color: #FFFFFF !important;
}
.chip { border-radius: 3px; border-color: #C9D2DE; background: #FFFFFF; }
.chip.on, .chip.ok, .chip.warn { border-color: currentColor; }
.badge { border-radius: 3px; border: 1px solid currentColor; }

/* ---- 9. THẺ / HỘP THOẠI ----
   Thẻ: khoảng thở 14px, bo 5px. Đầu hộp thoại nền #F3F6FA như .panel .head của C. */
.card-pad { padding: 14px; }
.card + .card { margin-top: 10px; }
.card-head, .block-h {
  background: #F3F6FA;
  border-bottom: 1px solid #C9D2DE;
  padding: 11px 14px;
}
.card-head h3, .block-h h3 { letter-spacing: -.01em; }
.modal {
  background: #FFFFFF !important;
  border: 1px solid #C9D2DE;
  border-radius: 5px;
  box-shadow: 0 18px 50px -12px rgba(16, 24, 40, .30);
}
.modal-head {
  background: #F3F6FA;
  border-bottom: 1px solid #C9D2DE;
  padding: 14px 16px;
}
.modal-body { padding: 16px; }
.modal-foot {
  background: #F8FAFC;
  border-top: 1px solid #C9D2DE;
  padding: 12px 16px;
}
/* Dải nút Lưu/Huỷ của hộp thoại (openModal dựng bằng .form-actions): kéo hết bề
   ngang hộp thoại + nền xám nhạt, đúng kiểu chân .panel của bản vẽ C. */
.modal .form-actions {
  margin: 16px -16px -16px;
  padding: 12px 16px;
  background: #F8FAFC;
  border-top: 1px solid #C9D2DE;
}
#modalTitle { letter-spacing: -.01em; }
/* Hộp cảnh báo/ghi chú: bo 5px cho đồng bộ với thẻ C */
.alert { border-radius: 5px; }

/* ---- 10. CHỮ SỐ / TIÊU ĐỀ KHỐI ---- */
.section { letter-spacing: -.01em; }
.num, .mono, .kpi-val, .tbl .num, .tbl .mono { font-variant-numeric: tabular-nums; }

/* =============================================================================
   VỎ SÁT MÉP — ĐÚNG BẢN VẼ (Công ty chốt 19/10/2026)
   -----------------------------------------------------------------------------
   TRƯỚC (lưới nổi): `.shell` là grid có `gap: 16px` + `padding: 16px`; sidebar và
   thanh trên là "tấm kính" bo góc, có viền + đổ bóng; nội dung cách mép ~16px.
   NAY (sát mép):
     · Sidebar : dính `left:0 / top:0`, cao đúng 100vh (`bottom:0`), rộng 250px
                 (`--sidebar-w`), nền trắng, viền PHẢI 1px #D8DFE9, KHÔNG bo góc,
                 KHÔNG đổ bóng, không kính mờ.
     · Topbar  : bắt đầu tại mép phải sidebar (`x = sidebar.right`), trải hết phần
                 còn lại, cao 60px (`--topbar-h`), chỉ có viền DƯỚI 1px, KHÔNG bo,
                 KHÔNG đổ bóng.
     · Nội dung: `.page-head` + `#view` nằm ngay dưới topbar, đệm trong 18–20px.
   GIỮ NGUYÊN: 11 phân hệ + mục con trong sidebar, badge, hiệu ứng mục đang chọn,
   khối `.page-head` (breadcrumb › .ph-title › mô tả).
   ĐỔI 20/10/2026 (③): nút "⛶ Rộng" trên thanh trên ĐÃ BỎ — chức năng "rộng" nay là nút
   THU GỌN ‹ › ở thanh "PHẦN HỆ", bật lớp `menu-gon` trên `body` (xem khối cuối tệp).
   Chỉ dùng lớp thật (`.shell`, `.sidebar`, `.topbar`, `.page-head`, `.content`);
   KHÔNG dùng [class*="…"].
   ============================================================================= */

/* 1. Lưới vỏ: một cột sidebar cố định + phần còn lại. `minmax(0,1fr)` để bảng rộng
      co lại và cuộn TRONG khung, không đẩy tràn ngang cả trang. */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: stretch;
  gap: 0;
  padding: 0;
  min-height: 100vh;
}

/* 2. Sidebar dính mép trái, chạy hết chiều cao. `position: sticky` + `height:100vh`
      giữ sidebar đứng yên khi cuộn nội dung mà không cần `position: fixed` (nhờ vậy
      vẫn nằm đúng cột grid, không phải tính `margin-left` cho `.main`). */
.sidebar {
  position: sticky;
  top: 0;
  left: 0;
  align-self: start;
  width: var(--sidebar-w);
  height: 100vh;
  max-height: 100vh;
  background: #FFFFFF;
  border: 0;
  border-right: 1px solid #D8DFE9;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 3. Thanh trên: nằm trong cột phải của grid nên tự bắt đầu tại `sidebar.right` và
      trải hết phần còn lại. Cao 60px, phẳng, chỉ viền dưới.
      KHÔNG ghim (position: static) — giữ đúng kết luận 15/10/2026: thanh trên ghim sẽ
      CHE nội dung khi cuộn (đo được: chiếm 76px đầu màn hình) và chặn cú bấm vào nút
      nằm sát mép trên. Sidebar vẫn ghim nên điều hướng không mất. */
.main { gap: 0; min-width: 0; }
.topbar {
  position: static;
  z-index: auto;
  /* Cao CỐ ĐỊNH 60px (không dùng `var(--topbar-h)` cho chiều cao): `syncTopbarHeight()`
     (app.js) ghi lại chiều cao THẬT vào biến này; nếu chiều cao lại đọc từ biến đó thì
     sau khi đi qua màn hẹp (topbar tự cao hơn) quay về màn rộng sẽ bị "dính" chiều cao
     màn hẹp. Biến vẫn giữ để tương thích, chỉ không lái chiều cao nữa. */
  height: 60px;
  min-height: 60px;
  padding: 0 20px;
  background: #FFFFFF;
  border: 0;
  border-bottom: 1px solid #D8DFE9;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 4. Nội dung ngay dưới topbar, đệm trong 18–20px (đầu trang 18 · hai bên 20 ·
      đáy 40 như cũ). `#view` chính là `.content` nên không phải sửa HTML. */
.page-head { margin: 0; padding: 18px 20px 0; }
.content { padding: 12px 20px 40px; }

/* 5. Màn hẹp (≤900px): xếp dọc như cũ — sidebar thành dải ngang trên cùng, KHÔNG
      ghim chiều cao, để điện thoại/máy tính bảng nhỏ không bị chồng nội dung.
      (Ngưỡng hạ từ 1024 → 900 để 1024 vẫn giữ sidebar 250px sát mép như bản vẽ.) */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    width: auto;
    height: auto;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid #D8DFE9;
  }
  .topbar {
    position: static;
    height: auto;
    min-height: 56px;
    padding: 8px 14px;
  }
  .page-head { padding: 14px 14px 0; }
  .content { padding: 10px 14px 36px; }
}

/* =============================================================================
   SỌC DÒNG CHO **MỌI** BẢNG DỮ LIỆU (Công ty chốt 19/10/2026)
   -----------------------------------------------------------------------------
   ĐO TRƯỚC KHI SỬA (5188, màn Hộp duyệt): `getComputedStyle(tr).backgroundColor`
   của MỌI dòng = `rgba(0, 0, 0, 0)` — kể cả dòng chẵn. Nguyên nhân: theme C chỉ tô
   nền ở Ô (`.tbl tbody tr:nth-child(even) td`), thẻ DÒNG (`tr`) không có nền nào;
   thêm nữa các bảng không mang lớp `.tbl` (bảng size `.mt-size`, bảng dựng thẳng
   trong `.tbl-wrap`, bảng trong hộp thoại) KHÔNG khớp selector nên không có sọc.
   Nay đặt nền ở CẢ `tr` và `td` cho đúng 4 kiểu markup thật của app:
     · `.tbl`                 — bảng dữ liệu chuẩn (Hộp duyệt, Sổ cái, Tồn kho, Đơn hàng…)
     · `.tbl-scroll > table`  — bảng trong khung cuộn, gồm bảng size `.mt-size`
     · `.tbl-wrap > table`    — bảng dựng trực tiếp trong khung (hộp thoại chứng từ)
     · `.modal table`         — bảng trong hộp thoại (vd kết quả gửi Zalo OA)
   Dòng CHẴN #FAFBFD · dòng LẺ giữ trắng · HOVER #EFF5FF (khai báo SAU sọc để thắng).
   LƯU Ý QUAN TRỌNG — HÀNG CHI TIẾT ẨN: `table()` (app.js) chèn một `<tr class="dong-ct">`
   `display:none` sau MỖI dòng dữ liệu (tính năng bấm dòng để xem thêm). `:nth-child(even)`
   đếm CẢ dòng ẩn nên mọi dòng NHÌN THẤY đều rơi vào vị trí LẺ ⇒ bảng không có sọc dù
   computed style của dòng ẩn vẫn đúng. Vì vậy dùng `:nth-child(even of :not(.dong-ct))`
   — chỉ đếm dòng dữ liệu thật, đúng "dòng chẵn" mà mắt thấy. `.dong-ct` là lớp thật
   của app, không phải [class*="…"].
   KHÔNG dùng [class*="…"]; chỉ lớp thật + thẻ.
   ============================================================================= */
/* (a) DỰ PHÒNG cho trình duyệt CHƯA hiểu `:nth-child(… of …)` (Chrome < 111):
   vẫn đúng với mọi bảng KHÔNG có hàng chi tiết ẩn — tức phần lớn bảng của app. */
.tbl tbody tr:nth-child(even),
.tbl tbody tr:nth-child(even) > td,
.tbl-scroll > table tbody tr:nth-child(even),
.tbl-scroll > table tbody tr:nth-child(even) > td,
.tbl-wrap > table tbody tr:nth-child(even),
.tbl-wrap > table tbody tr:nth-child(even) > td,
.modal table tbody tr:nth-child(even),
.modal table tbody tr:nth-child(even) > td {
  background-color: #FAFBFD !important;
}
/* (b) ĐÚNG cho MỌI bảng, kể cả bảng có hàng chi tiết ẩn `.dong-ct`. */
.tbl tbody tr:nth-child(even of :not(.dong-ct)),
.tbl tbody tr:nth-child(even of :not(.dong-ct)) > td,
.tbl-scroll > table tbody tr:nth-child(even of :not(.dong-ct)),
.tbl-scroll > table tbody tr:nth-child(even of :not(.dong-ct)) > td,
.tbl-wrap > table tbody tr:nth-child(even of :not(.dong-ct)),
.tbl-wrap > table tbody tr:nth-child(even of :not(.dong-ct)) > td,
.modal table tbody tr:nth-child(even of :not(.dong-ct)),
.modal table tbody tr:nth-child(even of :not(.dong-ct)) > td {
  background-color: #FAFBFD !important;
}

/* Dòng LẺ: nền TRẮNG đặt ngay trên `tr` (ô vẫn trong suốt để không đè các nền đặc
   biệt của ô); nhờ vậy `getComputedStyle(tr)` cũng đọc được "dòng lẻ trắng" đúng
   như nhìn thấy, không phải giá trị trong suốt. */
.tbl tbody tr:nth-child(odd of :not(.dong-ct)),
.tbl-scroll > table tbody tr:nth-child(odd of :not(.dong-ct)),
.tbl-wrap > table tbody tr:nth-child(odd of :not(.dong-ct)),
.modal table tbody tr:nth-child(odd of :not(.dong-ct)) {
  background-color: #FFFFFF !important;
}

/* HOVER: giữ đúng #EFF5FF, áp cho cả dòng và ô. Dùng `:hover:not(.dong-ct)` để
   ĐỘ ƯU TIÊN bằng luật sọc `:nth-child(… of :not(.dong-ct))` ở trên (nếu thấp hơn,
   dòng CHẴN sẽ giữ nền sọc và mất hover — đã đo được lỗi này trước khi thêm). */
.tbl tbody tr:hover:not(.dong-ct),
.tbl tbody tr:hover:not(.dong-ct) > td,
.tbl-scroll > table tbody tr:hover:not(.dong-ct),
.tbl-scroll > table tbody tr:hover:not(.dong-ct) > td,
.tbl-wrap > table tbody tr:hover:not(.dong-ct),
.tbl-wrap > table tbody tr:hover:not(.dong-ct) > td,
.modal table tbody tr:hover:not(.dong-ct),
.modal table tbody tr:hover:not(.dong-ct) > td {
  background-color: #EFF5FF !important;
}

/* GIỮ NGUYÊN NỀN của các DÒNG ĐẶC BIỆT — sọc không được "nuốt" màu cảnh báo/nhóm.
   Đều là lớp thật đang dùng trong app:
     · `.dong-thieu-ma` — dòng cảnh báo thiếu mã (nền vàng nhạt)
     · `.sel`           — dòng đang chọn
     · `.dong-ct`       — hàng chi tiết mở rộng của bảng
     · `.sum` / `.grp`  — dòng tổng và dòng nhóm của bảng size `.mt-size`
     · `.kd-bom-nhom`   — dòng tiêu đề khối của bảng định mức mẫu (BOM) */
.tbl tbody tr.dong-thieu-ma,
.tbl tbody tr.dong-thieu-ma > td,
.tbl-scroll > table tbody tr.dong-thieu-ma > td { background-color: #FEF6E7 !important; }
.tbl tbody tr.sel,
.tbl tbody tr.sel > td,
.tbl-scroll > table tbody tr.sel > td { background-color: var(--action-subtle) !important; }
.tbl tbody tr.dong-ct > td,
.tbl-scroll > table tbody tr.dong-ct > td { background-color: var(--bg-subtle) !important; }
.mt-size tbody tr.sum > td { background-color: var(--bg-subtle) !important; }
.mt-size tbody tr.grp > td { background-color: var(--action-subtle) !important; }
.kd-bom-bang tbody tr.kd-bom-nhom > td { background-color: #E9EEF5 !important; }

/* =============================================================================
   DASHBOARD 02 (19/10/2026) — BỐ CỤC THEO BẢN VẼ `demo-toan-bo.html`
   -----------------------------------------------------------------------------
   4 thẻ KPI (dùng .kpi sẵn có) · hai cột 2/3 + 1/3 · bảng đơn hàng · panel việc cần
   duyệt · thanh doanh số theo công ty. CHỈ thêm lớp MỚI (tiền tố `dash-`) — không đổi
   tên lớp nào bộ kiểm đang dùng (.tbl .card .kpi .btn .badge .sb-… giữ nguyên).
   ============================================================================= */

/* Nút góc phải trên: "Hộp duyệt (n)" + "Mở đơn hàng" như bản vẽ. */
.dash-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; margin: 0 0 10px;
}
.dash-actions:empty { display: none; }

/* Hai cột: bảng đơn hàng ~2/3, cột phải ~1/3. Màn hẹp thì xếp dọc. */
.dash-hai-cot {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 12px; align-items: start; margin-top: 12px;
}
.dash-cot-phai { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* .card + .card có margin-top mặc định 10px — trong cột đã có gap nên bỏ để không hở đôi. */
.dash-cot-phai > .card + .card { margin-top: 0; }
.dash-card { min-width: 0; overflow: hidden; }
@media (max-width: 1100px) {
  .dash-hai-cot { grid-template-columns: minmax(0, 1fr); }
}

/* Tiêu đề phụ trong .card-head (khác .muted vì cần cỡ chữ nhỏ cố định). */
.dash-head-sub { font-size: 12px; line-height: 1.4; color: #7A8296; margin-top: 2px; }

/* Bảng "Đơn hàng": gọn hơn bảng dữ liệu thường, dòng bấm được. */
.dash-bang { font-size: 13px; }
.dash-bang thead th { font-size: 10.5px; letter-spacing: .05em; }
.dash-bang tbody td { vertical-align: top; padding-top: 8px; padding-bottom: 8px; }
/* MÃ ĐƠN không được bẻ dòng: "RT HOLDINGS-05" xuống 3 dòng thì cột đầu cao gấp ba. */
.dash-bang td:first-child, .dash-ma { white-space: nowrap; }
.dash-dong-don { cursor: pointer; }
.dash-dong-don:hover td { background: #EFF5FF !important; }
.dash-ma { font-family: var(--font-mono); font-size: 12.5px; color: #1B2130; letter-spacing: -.01em; }
.dash-kh { min-width: 170px; }
.dash-kh b { color: #1B2130; font-weight: 600; }
.dash-sub { display: block; font-size: 11px; line-height: 1.35; color: #7A8296; margin-top: 2px; }
.dash-tien { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-cl { min-width: 118px; }
.dash-chip-ma {
  display: inline-block; margin: 0 3px 3px 0; padding: 1px 6px;
  border: 1px solid #D8DFE9; border-radius: 3px; background: #F8FAFC;
  font: 600 10.5px/1.7 var(--font-mono); color: #3F4756; white-space: nowrap;
}
.dash-chip-them { color: #7A8296; background: #EEF2F7; }

/* Panel "Việc cần duyệt": mỗi dòng là một NÚT — bấm mở Hộp duyệt. */
.dash-viec {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 9px;
  width: 100%; padding: 9px 14px;
  border: 0; border-top: 1px solid #EDF1F6; background: none;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.dash-viec:nth-of-type(1) { border-top: 0; }
.dash-viec:hover { background: #F7F9FC; }
.dash-viec-ten {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; color: #3F4756;
}
.dash-viec-ten b { color: #1B2130; font-weight: 600; }
.dash-viec-phai { text-align: right; }
.dash-viec-phai .dash-tien { display: block; font-size: 12px; font-weight: 600; color: #1B2130; }
.dash-viec-ngay { display: block; font-size: 10.5px; color: #7A8296; margin-top: 2px; }
.dash-ghi-chu { padding: 10px 14px; font-size: 12px; line-height: 1.45; color: #7A8296; border-top: 1px solid #EDF1F6; }

/* Thanh "Doanh số theo công ty": dùng .bars/.bar-row/.bar-track/.bar-fill sẵn có. */
.dash-bars { padding: 12px 14px; gap: 11px; }
.dash-bar { grid-template-columns: minmax(0, 1fr) 92px; gap: 10px; }
.dash-bar .bar-track { grid-column: 1; grid-row: 2; height: 10px; }
.dash-bar .lbl { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dash-bar .amt {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 12px; white-space: nowrap;
}
.dash-ten-cty {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: #1B2130;
}
@media (max-width: 1100px) {
  .dash-bar { grid-template-columns: minmax(0, 1fr) 120px; }
}

/* =============================================================================
   ③ DASHBOARD GỌN TRONG ĐÚNG MỘT TRANG (Công ty yêu cầu 19/10/2026)
   -----------------------------------------------------------------------------
   MỤC TIÊU ĐO ĐƯỢC: ở 1920×1080 và 1366×768, KHÔNG có thanh cuộn dọc —
     `#view.scrollHeight ≤ #view.clientHeight` và
     `document.scrollingElement.scrollHeight ≤ innerHeight + 4`.
   CÁCH LÀM (chỉ thêm lớp tiền tố `dash-`, không đổi lớp bộ kiểm đang dùng):
     · KPI gọn hơn (~88px): bớt đệm, cỡ số 21px — vẫn đủ 4 thẻ một hàng;
     · Bảng "Đơn hàng" cao CỐ ĐỊNH: khoảng 6–8 dòng nhìn thấy, dài hơn thì CUỘN TRONG
       bảng (`.dash-bang-scroll`) — trang không cuộn;
     · Panel phải gọn: 5 dòng "Việc cần duyệt" + 3 thanh "Doanh số theo công ty";
     · KHÔNG còn khối "Cơ cấu tuổi nợ" (đã thay bằng liên kết ở `.dash-actions`).
   ============================================================================= */

/* Dòng liên kết "Xem cơ cấu tuổi nợ →" nằm BÊN TRÁI hàng nút, không chiếm thêm chiều cao. */
.dash-link-tuoi-no { margin-right: auto; color: #3B62F0; }
.dash-link-tuoi-no:hover { color: #2449C8; }

.dash-actions { margin-bottom: 8px; }
.dash-hai-cot { margin-top: 10px; gap: 10px; align-items: stretch; }
.dash-cot-phai { gap: 10px; }

/* --- KPI gọn (~88px) --- */
.dash-kpi { gap: 10px; }
.dash-kpi .kpi { padding: 8px 12px !important; gap: 3px; }
.dash-kpi .kpi-lbl { font-size: 10.5px; line-height: 1.25; }
.dash-kpi .kpi-val { font-size: 21px; line-height: 1.12; }
.dash-kpi .kpi-foot { font-size: 10.5px; line-height: 1.28; }

/* --- Đầu thẻ gọn --- */
.dash-card .card-head { padding: 4px 12px; }
.dash-card .card-head h3 { font-size: 13.5px; line-height: 1.25; }
.dash-head-sub { font-size: 10.5px; line-height: 1.25; margin-top: 0; }

/* --- Bảng đơn: khung cao cố định, cuộn BÊN TRONG --- */
.dash-card-don { display: flex; flex-direction: column; min-height: 0; }
.dash-bang-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dash-bang-scroll { flex: 1 1 auto; min-height: 0; max-height: 360px; overflow: auto; }
.dash-bang { font-size: 12px; }
.dash-bang thead th { font-size: 10px; padding: 5px 7px !important; }
.dash-bang tbody td { padding: 6px 7px !important; vertical-align: middle; line-height: 1.25; }
.dash-bang .dash-ma { font-size: 11.5px; }
.dash-bang .dash-sub { font-size: 10px; line-height: 1.25; margin-top: 1px; }
.dash-bang .badge { font-size: 9.5px; padding: 1px 5px; }
.dash-bang .dash-chip-ma { font-size: 9.5px; padding: 0 4px; line-height: 1.6; margin: 0 2px 2px 0; }
.dash-bang .dash-kh { min-width: 140px; }
.dash-bang .dash-kh b {
  display: block; max-width: 230px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-bang .dash-cl { min-width: 100px; }

/* --- Panel "Việc cần duyệt": 5 dòng, mỗi dòng MỘT hàng --- */
.dash-viec { padding: 5px 12px; gap: 8px; }
.dash-viec-ten { font-size: 11.5px; }
.dash-viec .badge { font-size: 9.5px; padding: 1px 5px; }
.dash-viec-phai {
  display: flex; flex-direction: row; align-items: baseline; gap: 6px; white-space: nowrap;
}
.dash-viec-phai .dash-tien { display: inline; font-size: 11.5px; }
.dash-viec-ngay { display: inline; font-size: 9.5px; margin-top: 0; }

/* --- "Doanh số theo công ty": 3 thanh, nhãn một hàng --- */
.dash-bars { padding: 6px 12px; gap: 7px; }
.dash-bar { grid-template-columns: minmax(0, 1fr) 82px; gap: 4px 8px; }
.dash-bar .bar-track { height: 6px; }
.dash-bar .lbl { flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; }
.dash-bar .lbl .dash-ten-cty { flex: 0 1 auto; min-width: 0; }
.dash-bar .lbl .dash-sub { flex: none; margin-top: 0; font-size: 10px; white-space: nowrap; }
.dash-bar .amt { font-size: 11.5px; }
.dash-ten-cty { font-size: 11.5px; }

/* =============================================================================
   ④ SỬA DASHBOARD 20/10/2026 — 4 lỗi Công ty nêu (chỉ thêm lớp `dash-*`, không đổi
   tên lớp nào bộ kiểm đang dùng; mọi khối vẫn nằm trong MỘT trang, không cuộn).
   ============================================================================= */

/* --- ④ Ô chọn KỲ (lọc THẬT): nằm trên hàng nút, không chiếm thêm chiều cao trang --- */
.dash-ky { display: flex; align-items: center; gap: 6px; margin-right: 8px; }
.dash-ky-lbl { font-size: 11.5px; color: #7A8296; white-space: nowrap; }
.dash-ky .select {
  height: 28px; padding: 0 26px 0 8px; font-size: 11.5px; line-height: 26px;
  min-width: 118px;
}

/* --- ① Dòng GOM ĐƠN RỖNG dưới bảng: một dòng nhỏ, bấm được --- */
.dash-gom-rong {
  display: block; width: 100%; text-align: left;
  padding: 5px 12px; border: 0; border-top: 1px solid #EDF1F6;
  background: #FAFBFD; color: #3B62F0;
  font: inherit; font-size: 11px; line-height: 1.3; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-gom-rong:hover { background: #F1F5FF; color: #2449C8; text-decoration: underline; }
/* Dòng gom phải BÁM NGAY dưới dòng cuối của bảng, không trôi xuống đáy thẻ (thẻ cao bằng
   cột phải): cho khung bảng lấy đúng chiều cao nội dung thay vì giãn hết thẻ. */
.dash-card-don .dash-bang-wrap { flex: 0 1 auto; }

/* --- ② "đang xem: <công ty>" trong TIÊU ĐỀ khối doanh số + thanh của công ty đó ĐẬM --- */
.dash-dang-xem-ten { font-size: 10.5px; font-weight: 500; color: #7A8296; }
.dash-bar-dang-xem .dash-ten-cty { font-weight: 800; color: #10151F; }
.dash-bar-dang-xem .dash-sub { color: #B45309; font-weight: 600; }
.dash-bar-dang-xem .bar-track { height: 9px; }
.dash-bar-dang-xem .bar-fill {
  box-shadow: inset 0 0 0 1px rgba(16, 21, 31, .35);
  filter: saturate(1.35) brightness(.92);
}
.dash-bar-dang-xem .amt { font-weight: 800; color: #10151F; }

/* --- ③ "N trễ hạn" trong phụ chú KPI "Đơn đang sản xuất": đỏ khi có đơn trễ --- */
.dash-tre-han { font-weight: 700; }
.dash-tre-han-co { color: #D92D20; }

/* Màn 1366: cột khách hàng hẹp lại để ĐỦ 6 CỘT trong khung, không phải kéo ngang.
   (Đo thật: bảng 735px trong khung 674px ⇒ cột "Tiến độ" bị cắt.) */
@media (max-width: 1500px) {
  .dash-bang .dash-kh b { max-width: 170px; }
  .dash-bang thead th, .dash-bang tbody td { padding-left: 6px !important; padding-right: 6px !important; }
}

/* Màn hẹp (≤1100px) hai cột xếp dọc — luật này phải đứng SAU để vẫn thắng. */
@media (max-width: 1100px) {
  .dash-hai-cot { grid-template-columns: minmax(0, 1fr); }
  .dash-bang-scroll { max-height: none; }
}

/* =============================================================================
   ICON SVG TỐI GIẢN TRONG MENU TRÁI (Công ty yêu cầu 20/10/2026)

   Emoji màu (biểu đồ, người, giỏ hàng…) đã thay bằng line icon vẽ tay trong `app.js` (`iconSvg`).
   Quy ước hiển thị — CHỈ áp cho `.ic` của menu trái:
     · 16×16px, nét 1.5, đầu nét bo tròn, fill none;
     · `stroke: currentColor` ⇒ icon cùng màu chữ của mục;
     · opacity .8 khi thường, 1 khi mục đang chọn;
     · căn giữa theo chiều dọc trong nút (flex, không lệch baseline).
   Không đổi tên lớp (`.ic`, `.sb-item`, `.sb-mod-btn`, `#nav`) để bộ kiểm vẫn đọc được.
   ========================================================================== */
.ic svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.sb-mod-btn .ic,
.sb-item .ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  min-width: 16px;
  opacity: .8;
}
/* Mục đang chọn: icon đậm lên theo đúng màu chữ — KHÔNG tô màu riêng từng icon. */
.sb-mod-btn.on .ic,
.sb-item.on .ic { opacity: 1; }
.sb-mod-btn.on .ic,
.sb-mod-row > .sb-nav .sb-item.on .ic { color: inherit !important; }

/* =============================================================================
   5 KHỐI MỚI CỦA DASHBOARD (Công ty yêu cầu 20/10/2026)
   -----------------------------------------------------------------------------
   BỐ TRÍ (vẫn ĐÚNG MỘT TRANG ở 1920×1080 và 1366×768):
     Hàng A: 4 thẻ KPI (giữ nguyên)
     Hàng B: ⑤ dải 4 số (1/2) | ① dòng tiền 30 ngày (1/2)
     Hàng C: ② cảnh báo (1/3) | bảng Đơn hàng 5 dòng (1/3) | Việc cần duyệt (1/3)
     Hàng D: ③ biểu đồ 12 tháng + lãi gộp (2/3) | ④ top khách + top chủng loại (1/3)

   CHỈ THÊM LỚP MỚI (tiền tố `dash-`), không đổi tên lớp nào bộ kiểm đang dùng.
   Mọi bề cao đều bị chặn để `#view.scrollHeight ≤ clientHeight`.
   ============================================================================= */

/* --- Khung 3 hàng: mỗi hàng là một lưới riêng --- */
.dash-hang-b,
.dash-hang-c,
.dash-hang-d { display: grid; gap: 10px; margin-top: 8px; align-items: stretch; }
.dash-hang-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.dash-hang-c { grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr) minmax(0, 1fr); }
.dash-hang-d { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.dash-hang-b > .card,
.dash-hang-c > .card,
.dash-hang-d > .card { margin: 0; min-width: 0; }

/* --- ⑤ DẢI 4 SỐ ĐÃ XOÁ (Công ty chốt 20/10/2026): khối "Tiền & NH / Phải thu / Phải trả /
   Chênh lệch" không còn trên Dashboard. Giữ lại TÊN LỚP cũ ở đây là vô nghĩa vì không
   phần tử nào dùng nữa — đã bỏ hẳn luật `.dash-strip` / `.dash-so-*`. --- */

/* --- ① DÒNG TIỀN 30 NGÀY TỚI (~64px): đầu khối 1 dòng + 4 ô --- */
.dash-dong-tien { height: 64px; display: flex; flex-direction: column; overflow: hidden; }
.dash-dt-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 3px 10px 0; min-width: 0;
}
.dash-dt-head b { font-size: 10.5px; line-height: 1.2; color: #10151F; letter-spacing: -.01em; }
.dash-dt-ky { font-size: 9px; color: #7A8296; white-space: nowrap; }
.dash-dt-hang { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1 1 auto; min-height: 0; }
.dash-dt-o {
  min-width: 0; padding: 0 10px 4px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0;
  border-left: 1px solid #EDF1F6;
}
.dash-dt-o:first-child { border-left: 0; }
.dash-dt-lbl { font-size: 9px; line-height: 1.2; font-weight: 700; color: #6B7485; white-space: nowrap; }
.dash-dt-val {
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.25; font-weight: 800;
  color: #10151F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-dt-am .dash-dt-val { color: #D92D20; }
.dash-dt-sub {
  font-size: 8.5px; line-height: 1.2; color: #7A8296;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- ② CẢNH BÁO: mỗi dòng là một NÚT, icon tam giác + chữ + số lượng --- */
.dash-cb {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center; gap: 6px;
  width: 100%; padding: 4px 10px; border: 0; border-top: 1px solid #EDF1F6;
  background: none; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.dash-cb:first-of-type { border-top: 0; }
.dash-cb:hover { background: #F7F9FC; }
.dash-cb-ic { display: flex; align-items: center; justify-content: center; color: #B45309; }
.dash-cb-ic svg {
  display: block; width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.dash-cb-danger .dash-cb-ic { color: #D92D20; }
.dash-cb-warning .dash-cb-ic { color: #B45309; }
.dash-cb-ten { min-width: 0; display: flex; align-items: baseline; gap: 6px; font-size: 11px; line-height: 1.3; }
.dash-cb-ten b { color: #10151F; font-weight: 700; white-space: nowrap; }
.dash-cb-mo {
  min-width: 0; font-size: 9.5px; color: #7A8296;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-cb-so { font-family: var(--font-mono); font-size: 12px; font-weight: 800; color: #D92D20; }
.dash-cb-warning .dash-cb-so { color: #B45309; }
.dash-cb-khong { display: flex; align-items: center; gap: 6px; padding: 8px 10px; color: #17A35A; font-size: 11.5px; }
.dash-cb-khong .dash-cb-ic { color: #17A35A; }
.dash-cb-them { padding: 2px 10px; font-size: 9.5px; color: #7A8296; }
.dash-canh-bao .card-head { padding: 3px 10px; }
.dash-canh-bao .card-head h3 { font-size: 12.5px; }
.dash-canh-bao .badge { height: 16px; font-size: 9px; padding: 0 5px; }

/* Nút "N chờ · tất cả →" trong đầu thẻ — cao 1 dòng, không đẩy đầu thẻ lên 29px. */
.dash-head-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: 600 10px/1.2 var(--font-sans); color: #3B62F0; white-space: nowrap;
}
.dash-head-link:hover { color: #2449C8; text-decoration: underline; }

/* --- Hàng C: bảng đơn 4 cột, 5 dòng, dòng thấp; panel việc cần duyệt 5 dòng --- */
.dash-hang-c .card-head { padding: 3px 10px; }
.dash-hang-c .card-head h3 { font-size: 12.5px; line-height: 1.25; }
.dash-hang-c .dash-bang-scroll { max-height: 132px; overflow: hidden; }
.dash-hang-c .dash-bang { table-layout: fixed; font-size: 11px; }
.dash-hang-c .dash-bang thead th {
  padding: 3px 5px !important; font-size: 9px; letter-spacing: .03em; line-height: 1.2;
}
.dash-hang-c .dash-bang tbody td {
  padding: 3px 5px !important; font-size: 10.5px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-hang-c .dash-bang th:nth-child(1) { width: 25%; }
.dash-hang-c .dash-bang th:nth-child(2) { width: 31%; }
.dash-hang-c .dash-bang th:nth-child(3) { width: 24%; }
.dash-hang-c .dash-bang th:nth-child(4) { width: 20%; }
.dash-hang-c .dash-bang .dash-ma { font-size: 10px; }
.dash-hang-c .dash-bang .dash-kh b {
  display: block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-hang-c .dash-bang .badge { font-size: 8px; padding: 0 3px; line-height: 1.5; }
.dash-hang-c .dash-gom-rong { padding: 2px 8px; font-size: 9.5px; line-height: 1.3; }
.dash-bang-trong { padding: 8px; font-size: 10px; line-height: 1.3; color: #7A8296; white-space: normal; }
.dash-hang-c .dash-viec { padding: 2px 10px; gap: 6px; }
.dash-hang-c .dash-viec-ten { font-size: 10.5px; }
.dash-hang-c .dash-viec .badge { font-size: 8px; padding: 0 3px; }
.dash-hang-c .dash-viec-phai .dash-tien { font-size: 10.5px; }
.dash-hang-c .dash-viec-ngay { font-size: 9px; }
.dash-hang-c .dash-ghi-chu { padding: 6px 10px; font-size: 10.5px; }
.dash-card-don .dash-bang-wrap { flex: 0 1 auto; }

/* --- ③ BIỂU ĐỒ 12 THÁNG (~110px): SVG cột + đường lãi gộp + nhãn tháng HTML --- */
.dash-bieu-do { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.dash-bieu-do .card-head { padding: 3px 10px; min-width: 0; }
.dash-bieu-do .card-head > div { min-width: 0; }
.dash-bieu-do .card-head h3 { font-size: 12.5px; line-height: 1.25; }
.dash-bieu-do .dash-head-sub {
  font-size: 9px; line-height: 1.2; margin-top: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 430px;
}
.dash-bd-cty {
  flex: none; max-width: 42%; font-size: 9px; line-height: 1.2; color: #3F4756;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-bd { flex: 1 1 auto; min-height: 0; padding: 2px 10px 4px; }
.dash-bd-svg { display: block; width: 100%; height: 60px; overflow: visible; }
.dash-bd-luoi { stroke: #E7ECF3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash-bd-bar { fill: #8FA8F5; }
.dash-bd-cot:hover .dash-bd-bar { fill: #3B62F0; }
.dash-bd-hit { fill: transparent; cursor: pointer; }
.dash-bd-lai {
  fill: none; stroke: #C2410C; stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.dash-bd-cham { stroke: #C2410C; stroke-width: 2; vector-effect: non-scaling-stroke; }
/* Chấm LÃI GỘP của tháng lẻ: HTML để tròn đều (SVG bị kéo giãn ngang). */
.dash-bd-khung { position: relative; height: 60px; }
.dash-bd-khung .dash-bd-svg { height: 60px; }
.dash-bd-diem {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #C2410C; box-shadow: 0 0 0 2px #FFFFFF;
  transform: translate(-50%, -50%); cursor: help;
}
.dash-bd-thang { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 1px; }
.dash-bd-th {
  text-align: center; font-size: 8.5px; line-height: 1.15; color: #7A8296;
  white-space: nowrap; overflow: hidden;
}

/* --- ④ TOP 5 KHÁCH + TOP 5 CHỦNG LOẠI (~110px): hai cột nhỏ trong một thẻ --- */
.dash-top { overflow: hidden; }
.dash-top-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 5px 10px 6px; }
.dash-top-cot { min-width: 0; }
.dash-top-cot + .dash-top-cot { border-left: 1px solid #EDF1F6; padding-left: 8px; }
.dash-top-td {
  font-size: 9px; line-height: 1.2; font-weight: 800; color: #5A6577;
  letter-spacing: .02em; text-transform: uppercase; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-top-dong { padding: 1px 0 1px; }
.dash-top-hang { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.dash-top-ten {
  flex: 1 1 auto; min-width: 0; font-size: 9.5px; line-height: 1.25; color: #3F4756;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-top-ma {
  flex: none; max-width: 74px; padding: 0 3px;
  font: 700 8.5px/1.5 var(--font-mono); color: #10151F;
  background: #EEF2F7; border-radius: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-top-so { flex: none; font: 700 10px/1.25 var(--font-mono); color: #10151F; }
.dash-top-bar { height: 3px; margin-top: 1px; border-radius: 2px; background: #EDF1F6; overflow: hidden; }
.dash-top-bar i { display: block; height: 100%; border-radius: 2px; background: #3B62F0; }
.dash-top-trong { padding: 4px 0; font-size: 9.5px; line-height: 1.3; color: #7A8296; white-space: normal; }

/* --- Màn hẹp: xếp dọc (giữ luật này SAU để thắng các lưới phía trên) --- */
@media (max-width: 1100px) {
  .dash-hang-b, .dash-hang-c, .dash-hang-d { grid-template-columns: minmax(0, 1fr); }
  .dash-strip, .dash-dong-tien { height: auto; min-height: 56px; }
  .dash-hang-c .dash-bang-scroll { max-height: none; overflow: auto; }
  .dash-hang-c .dash-bang { table-layout: auto; }
  .dash-bieu-do .dash-head-sub { max-width: none; }
}

/* Màn 1366: thu chữ thêm một nhịp để 4 cột vẫn đọc được, không phải kéo ngang. */
@media (max-width: 1500px) {
  .dash-hang-c { gap: 8px; }
  .dash-hang-c .dash-bang tbody td { padding: 3px 4px !important; font-size: 10px; }
  .dash-bd-cty { max-width: 38%; font-size: 8.5px; }
  .dash-bd-th { font-size: 8px; }
  .dash-top-ten { font-size: 9px; }
  .dash-so-o { padding: 0 6px; }
  .dash-so-lbl { font-size: 8.5px; }
  .dash-so-val { font-size: 11.5px; }
  .dash-dt-val { font-size: 12.5px; }
  .dash-dt-sub { font-size: 8px; }
}

/* =============================================================================
   DASHBOARD — ĐÚNG 7 KHỐI, MỖI KHỐI MỘT QUYỀN (Công ty chốt 20/10/2026)
   -----------------------------------------------------------------------------
   BỐ TRÍ (vẫn ĐÚNG MỘT TRANG ở 1920×1080 và 1366×768; đo thật trên cổng 5188):
     Hàng A: ① 4 thẻ KPI
     Hàng B: ② dòng tiền 30 ngày · ③ cảnh báo (GỘP mọi việc phải xử lý)
     Hàng C: ④ bảng Đơn hàng 5 dòng · ⑥ top khách
     Hàng D: ⑤ biểu đồ 12 tháng + lãi gộp · ⑦ top chủng loại

   ĐÃ XOÁ (theo yêu cầu): dải 4 số (`.dash-strip`) · khối "Doanh số theo công ty" riêng
   (nay là MỘT DÒNG dưới tiêu đề biểu đồ — `.dash-cty-dong`) · panel "Việc cần duyệt"
   riêng (nay là MỘT DÒNG "Chờ duyệt" trong khối cảnh báo).

   VÌ SAO LÀ FLEX CHỨ KHÔNG PHẢI GRID CỘT CỐ ĐỊNH: mỗi khối chỉ được dựng khi tài khoản
   có quyền tương ứng. Grid chia cột cứng sẽ để lại Ô RỖNG khi một khối bị ẩn; flex thì
   các khối còn lại TỰ GIÃN RA lấp đầy hàng — đúng yêu cầu "ẩn hẳn, không để khung rỗng".

   CHỈ THÊM LỚP MỚI (tiền tố `dash-`), không đổi tên lớp nào bộ kiểm đang dùng.
   ============================================================================= */

/* --- Khung hàng: FLEX, mỗi con chia đều rồi ghi đè tỉ lệ bên dưới --- */
.dash-hang {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 8px;
  align-items: stretch;
  min-width: 0;
}
.dash-hang > * { flex: 1 1 0; min-width: 0; margin: 0; }
/* Hàng A chỉ có khối KPI: cho nó chiếm trọn bề ngang. */
.dash-hang-a > .kpi-grid { flex: 1 1 100%; }
/* Tỉ lệ từng hàng — bảng đơn và biểu đồ cần rộng hơn thẻ top. */
.dash-hang-b > .dash-dong-tien { flex: 1 1 0; }
.dash-hang-b > .dash-canh-bao { flex: 1.1 1 0; }
.dash-hang-c > .dash-card-don { flex: 1.45 1 0; }
.dash-hang-c > .dash-top-khach { flex: 1 1 0; }
.dash-hang-d > .dash-bieu-do { flex: 1.75 1 0; }
.dash-hang-d > .dash-top-loai { flex: 1 1 0; }

/* --- ① 4 THẺ KPI: giữ nguyên chiều cao cũ (~74px) --- */
.dash-hang-a { margin-top: 0; }

/* --- ② DÒNG TIỀN 30 NGÀY: bỏ chiều cao cứng 64px để GIÃN theo hàng (cảnh báo cao hơn) --- */
.dash-dong-tien {
  height: auto;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dash-dong-tien .dash-dt-hang { flex: 1 1 auto; min-height: 0; }
.dash-dong-tien .dash-dt-o { justify-content: center; padding-bottom: 5px; }

/* --- ③ CẢNH BÁO: 5 dòng thấp, mỗi dòng là một nút --- */
.dash-canh-bao { display: flex; flex-direction: column; overflow: hidden; }
.dash-canh-bao .dash-cb {
  padding: 3px 10px;
  grid-template-columns: 13px minmax(0, 1fr) auto;
  gap: 6px;
}
.dash-canh-bao .dash-cb-ten { font-size: 10.5px; line-height: 1.3; }
.dash-canh-bao .dash-cb-so { font-size: 11.5px; }

/* --- ④ BẢNG ĐƠN HÀNG: 5 dòng + dòng "＋ N đơn chưa nhập chủng loại" --- */
.dash-card-don { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.dash-card-don .dash-bang-wrap { flex: 0 1 auto; min-height: 0; }
.dash-card-don .dash-bang-scroll { max-height: 126px; overflow: hidden; }

/* --- ⑥⑦ TOP KHÁCH / TOP CHỦNG LOẠI: MỖI CÁI MỘT THẺ RIÊNG (trước đây chung một thẻ) --- */
.dash-top-khach,
.dash-top-loai { display: flex; flex-direction: column; overflow: hidden; }
.dash-top-khach .dash-top-b,
.dash-top-loai .dash-top-b {
  display: block;
  padding: 3px 10px 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.dash-top-khach .dash-top-dong,
.dash-top-loai .dash-top-dong { padding: 1px 0; }
/* Thanh tỉ lệ chỉ để SO SÁNH trong cùng thẻ — không cho kéo hết bề ngang (thẻ nay rộng
   gấp đôi thẻ cũ nên thanh 100% trông như đường kẻ ngang). */
.dash-top-khach .dash-top-bar,
.dash-top-loai .dash-top-bar { max-width: 320px; }

/* --- ⑤ BIỂU ĐỒ 12 THÁNG + LÃI GỘP: thêm dòng doanh số 3 công ty dưới tiêu đề --- */
.dash-bieu-do .dash-bd-dau { min-width: 0; }
/* DÒNG NHỎ NGAY DƯỚI TIÊU ĐỀ: "UN 171,5 tr · KMT 0 · SU 0" — công ty ĐANG XEM in ĐẬM. */
.dash-cty-dong {
  font-size: 10.5px;
  line-height: 1.3;
  color: #5A6577;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.dash-cty-dong .dash-cty-dang-xem {
  font-weight: 800;
  color: #10151F;
}

/* --- KHÔNG CÒN KHỐI NÀO: một dòng thông báo, không để màn trắng --- */
.dash-khong-quyen { padding: 18px 20px; }
.dash-khong-quyen > b { display: block; font-size: 14px; color: #10151F; }
.dash-khong-quyen .dash-ghi-chu { padding: 6px 0 0; border-top: 0; }

/* --- Màn hẹp (< 1100px): xếp dọc, không giữ tỉ lệ cột --- */
@media (max-width: 1100px) {
  .dash-hang { flex-direction: column; }
  .dash-hang > *,
  .dash-hang-b > .dash-dong-tien,
  .dash-hang-b > .dash-canh-bao,
  .dash-hang-c > .dash-card-don,
  .dash-hang-c > .dash-top-khach,
  .dash-hang-d > .dash-bieu-do,
  .dash-hang-d > .dash-top-loai { flex: 0 0 auto; }
}

/* --- Màn 1366–1500: thu chữ một nhịp cho 5 dòng vẫn đọc được --- */
@media (max-width: 1500px) {
  .dash-hang { gap: 8px; }
  .dash-canh-bao .dash-cb-ten { font-size: 10px; }
  .dash-cty-dong { font-size: 9.5px; }
  .dash-top-khach .dash-top-ten,
  .dash-top-loai .dash-top-ten { font-size: 9px; }
  .dash-top-khach .dash-top-so,
  .dash-top-loai .dash-top-so { font-size: 9.5px; }
}



/* =============================================================================
   THANH TIÊU ĐỀ "PHẦN HỆ" + NÚT THU GỌN MENU ‹ / ›  (Công ty chốt 20/10/2026 — ③)
   -----------------------------------------------------------------------------
   Nút "⛶ Rộng" ĐÃ BỎ khỏi thanh trên. Chức năng "rộng" vẫn còn nhưng dưới dạng NÚT THU
   GỌN ở thanh tiêu đề "PHẦN HỆ" (đầu menu trái): bấm ‹ ⇒ sidebar thu về dải hẹp 56px,
   CHỈ CÒN ICON (ẩn chữ, ẩn badge, ẩn mục con); bấm › ⇒ mở rộng lại như cũ.
   Trạng thái do `datThuGonMenu()` (app.js) bật/tắt lớp `menu-gon` trên `body` + nhớ trong
   localStorage (`erp-sb-gon`).
   Nút ~22×22, KHÔNG viền đậm, icon SVG line (mũi tên ‹ ›) — cùng bộ icon tối giản đang dùng.
   ============================================================================= */

/* --- Tiêu đề "PHẦN HỆ" + nút thu gọn trên CÙNG MỘT HÀNG ------------------------ */
.sb-mod-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  padding: 2px 2px 6px;
}
.sb-mod-head .sb-mod-lbl {
  flex: 1 1 auto; min-width: 0; padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-gon {
  flex: none;
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  padding: 0; margin: 0;
  border: 1px solid transparent;         /* không viền đậm */
  border-radius: 4px;
  background: none;
  color: #6B7280;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.sb-gon:hover { background: #F4F6FA; color: #1B2130; border-color: #D8DFE9; }
.sb-gon:focus-visible { outline: 2px solid #FFCC00; outline-offset: 1px; }
.sb-gon-ico { display: block; width: 14px; height: 14px; }
.sb-gon-ico .sb-gon-mui {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- CHẾ ĐỘ THU GỌN: sidebar 56px, CHỈ CÒN ICON -------------------------------
   Chỉ áp dụng từ 901px trở lên: dưới 900px sidebar vốn xếp NGANG thành dải trên cùng
   (xem khối "MÀN HÌNH HẸP" ở trên) nên không có gì để thu gọn. */
@media (min-width: 901px) {
  /* Nhịp chuyển mượt khi hẹp/mở: CỘT GRID và BỀ RỘNG sidebar cùng chạy theo biến
     `--sidebar-w`, nên chỉ cần chuyển hai thuộc tính này là vùng nội dung giãn ra khớp. */
  .shell { transition: grid-template-columns .16s ease; }
  .sidebar { transition: width .16s ease; }

  /* Khối thương hiệu: chỉ còn DẤU LOGO (hoặc ô "UN"), canh giữa */
  body.menu-gon .sb-brand { justify-content: center; padding: 14px 6px 12px; gap: 0; }
  body.menu-gon .sb-brand-txt { display: none; }
  body.menu-gon .sb-brand-logo { max-width: 34px; }

  /* Vùng menu + thanh "PHẦN HỆ": bỏ chữ, giữ nút mũi tên để mở rộng lại */
  body.menu-gon .sb-mods-wrap { padding: 8px 6px; }
  body.menu-gon .sb-mod-head { justify-content: center; padding: 0 0 6px; }
  body.menu-gon .sb-mod-head .sb-mod-lbl { display: none; }

  /* 11 PHÂN HỆ: chỉ icon, canh giữa. `title` của mỗi nút (đặt trong `buildNav()`) vẫn
     còn nên RÊ CHUỘT VÀO ICON LÀ HIỆN TÊN PHÂN HỆ. */
  body.menu-gon .sb-mod-btn {
    justify-content: center; gap: 0;
    padding: 7px 0;
  }
  body.menu-gon .sb-mod-btn .ic { width: 18px; font-size: 15px; opacity: .9; }
  body.menu-gon .sb-mod-btn .ten,
  body.menu-gon .sb-mod-btn .so,
  body.menu-gon .sb-mod-btn .sb-mod-badge { display: none; }

  /* Ẩn MỤC CON (`#nav`) khi thu gọn — đúng yêu cầu ③ */
  body.menu-gon .sb-mod-row > .sb-nav { display: none !important; }

  /* CHÂN MENU: giữ AVATAR (biết đang đăng nhập ai), ẩn tên · vai trò + hàng nút
     "Đổi mật khẩu / Thoát" — dải 56px không đủ chỗ; mở rộng menu là hai nút đó hiện lại
     nguyên vẹn (chúng KHÔNG bị xoá, chỉ ẩn khi thu gọn). */
  body.menu-gon .sb-foot { padding: 10px 6px; }
  body.menu-gon .sb-foot > .row:first-child { justify-content: center; gap: 0; }
  body.menu-gon .sb-foot .who-name,
  body.menu-gon .sb-foot .who-role { display: none; }
  body.menu-gon .sb-foot > .row:last-child { display: none; }
}

/* =============================================================================
   CỘT "THAO TÁC" BẢNG BÁO GIÁ — 5 ICON 16px + TOOLTIP TỰ VẼ (Công ty chốt 21/10/2026)
   -----------------------------------------------------------------------------
   VÌ SAO: 5 nút CHỮ cũ (Mở/Xem · In · Chuyển đơn · Chuyển may mẫu · Tạo bản sao sửa đổi)
   chiếm ~430px nên bảng Báo giá rộng hơn màn 1366px, phải kéo ngang mới bấm được nút cuối.
   NAY: 5 nút ICON 28×28 (SVG line 16px), cột còn ~172px (5×28 + 4×3 khoảng cách + đệm)
   ⇒ đo lại `scrollWidth ≤ clientWidth` của khung bảng ở 1366px.

   Phân lớp (KHÔNG đổi tên lớp bộ kiểm dùng: `.tbl` · `.btn` · `.kpi`):
     · `.bg-thao-tac`      ô THAO TÁC: xếp icon + dòng chữ nhỏ "Chưa duyệt — không in được";
     · `.bg-thao-tac-hang` hàng 5 icon, không xuống dòng;
     · `.bg-nut-ic`        nút CHỈ ICON vuông 28×28 (icon 16px căn giữa, đệm 0);
     · `.bg-cot-thao-tac`  riêng ô THAO TÁC: đệm ngang nhỏ hơn để cột hẹp đúng ~172px;
     · `.bg-tip`           bong bóng tooltip tự vẽ (JS đặt left/top), nền đậm chữ trắng.
   ============================================================================= */
.bg-thao-tac {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.bg-thao-tac-hang {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 3px;
  white-space: nowrap;
}
/* Nút chỉ có icon: vuông 28px, đệm 0, canh giữa — không còn bề rộng của nhãn chữ. */
.bg-nut-ic {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  flex: 0 0 28px;
  gap: 0;
}
.bg-nut-ic .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  pointer-events: none;
}
/* Icon 16px đúng bộ icon line của app (`.ic svg` đã đặt 16px · nét 1.5 · currentColor). */
.bg-nut-ic .ic svg { width: 16px; height: 16px; display: block; }
/* Ô THAO TÁC: siết đệm ngang (mặc định 12px) để cột ~172px. */
.tbl td.bg-cot-thao-tac,
.tbl th.bg-cot-thao-tac {
  padding-left: 6px;
  padding-right: 8px;
  white-space: nowrap;
}
/* Bảng Báo giá: chữ trong ô được xuống dòng (trừ SỐ/ngày) để không đẩy bảng rộng quá màn. */
.kd-bang-bao-gia .tbl tbody td { padding-left: 10px; padding-right: 10px; }
.kd-bang-bao-gia .tbl tbody td.bg-cot-thao-tac { padding-left: 6px; padding-right: 8px; }

/* --- BẢNG MAY MẪU: CÙNG CHUẨN bảng Báo giá (7 cột, cột THAO TÁC là icon) --------------
   Bảng May mẫu cũng 7 cột nên phải siết đệm y như bảng Báo giá, nếu không tổng bề rộng
   cột vượt khung và bảng phải kéo ngang ở màn 1366px. Dùng CHUNG bộ lớp
   `.bg-thao-tac` / `.bg-nut-ic` / `.bg-cot-thao-tac` — chỉ thêm lớp riêng cho phần đệm
   của bảng này, KHÔNG đổi tên lớp nào bộ kiểm dùng (`.tbl` · `.btn` · `.kpi`). */
.kd-bang-may-mau .tbl tbody td { padding-left: 10px; padding-right: 10px; }
.kd-bang-may-mau .tbl tbody td.bg-cot-thao-tac { padding-left: 6px; padding-right: 8px; }
/* Cột THAO TÁC rộng ~152px (4 icon 28px + khoảng cách + đệm) — nằm trong khoảng 150–180px
   và vẫn hẹp hơn bảng Báo giá (5 icon ≈ 172px), nên bảng không phải kéo ngang ở 1366px. */
.kd-bang-may-mau .tbl td.bg-cot-thao-tac,
.kd-bang-may-mau .tbl th:last-child { min-width: 152px; }
/* Ô chọn KẾT QUẢ: rộng đúng bằng nội dung, không kéo cột rộng thêm. */
.kd-bang-may-mau .tbl .mm-kq-sel { max-width: 132px; }


/* --- TOOLTIP TỰ VẼ: bong bóng nhỏ nền đậm, chữ trắng, KHÔNG cắt chữ ------------------- */
.bg-tip {
  position: fixed;
  z-index: 9999;
  max-width: min(340px, calc(100vw - 16px));
  padding: 6px 9px;
  border-radius: 6px;
  background: #1B2130;
  color: #FFFFFF;
  font: 500 12px/1.35 var(--font-sans);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .28);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}
.bg-tip.hien { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bg-tip { transition: none; } }