/* ERP FIBC · Minh Sơn — theo Figma "24 — ERP App UI" (Brand Audit Phase 1).
   Token màu đặt đúng tên biến trên Figma; chữ Be Vietnam Pro; số kỹ thuật dạng tabular. */
:root {
  /* Vạch đánh dấu (chủ dự án 20/10/2026): mọi vạch màu bên trái (mục đang chọn, thẻ, thông báo,
     khối chú ý) cùng một kiểu, thẳng, không bo góc. Dùng --accent-w hoặc lớp .accent-left; khối có
     vạch thì hai góc trái để 0. Kiểm tra tự động: tests/test_shared_ui.py. Mẫu: /giao-dien/#vach-dau-dong. */
  --accent-w: 3px;
  /* Thang cỡ chữ (D30): mọi font-size trong app dùng một biến dưới đây, không đặt số px trực tiếp.
     Kiểm tra tự động: tests/test_type_scale.py. Mẫu: /giao-dien/#co-chu. */
  --fs-note: 12px;      /* chữ phụ: ghi chú, nhãn ô nhập, nhãn, tiêu đề cột bảng, chữ nhỏ viết hoa */
  --fs-table: 13px;     /* mọi chữ trong bảng, kể cả dòng lồng (phụ lục), mã, ngày; link chữ nhỏ */
  --fs-input: 13px;     /* chữ trong mọi ô nhập, ô chọn, nút chọn, ô tích, nút bấm, danh sách chọn (tối đa 13px, D49, D62) */
  --fs-body: 14px;      /* chữ thường, giá trị hồ sơ */
  --fs-heading: 16px;   /* tiêu đề thẻ / mục, tiêu đề thanh trên cùng */
  --fs-touch: 16px;     /* ô nhập và nút lớn trên điện thoại (dưới 16px iPhone tự phóng to) */
  --fs-title-sm: 18px;  /* tiêu đề trang trên điện thoại, số liệu trong thẻ số */
  --fs-title: 20px;     /* tiêu đề trang, tên hồ sơ, tiêu đề ngăn kéo */
  --fs-hero: 24px;      /* số lớn ở trang tổng quan, tiêu đề trang đăng nhập */
  --fs-display: 48px;   /* số tiền thực lĩnh trên phiếu lương (chủ dự án 03/11/2026, Figma 26) và số lỗi 404 (08/11/2026) */
  --lh-note: 18px;
  --lh-table: 1.4;
  --lh-body: 1.5;
  --brand-green-900: #0b3d24;
  --brand-green-800: #0a5430;
  --brand-green-700: #006938;
  --brand-green-50: #f2f8f4;
  --brand-harvest-500: #e2a82b;
  --text-primary: #111814;
  --text-secondary: #434c47;
  --text-muted: #5f6b64;
  --text-inverse: #ffffff;
  --text-inverse-muted: #c6e2d0;
  --surface-primary: #ffffff;
  --surface-secondary: #f6f8f7;
  --border-subtle: #edf0ee;
  --border-default: #dce2de;
  --border-strong: #111814;
  --neutral-100: #edf0ee;
  --neutral-300: #bcc3bf;
  --neutral-400: #9ba49f;
  --success: #2e8540;
  --success-bg: #eaf5ec;
  --success-text: #1d5c2a;
  --warning: #b7791f;
  --warning-bg: #fdf6e7;
  --warning-text: #7a4e0e;
  --warning-border: #f0d29a;
  --error: #c4321f;
  --error-bg: #fdecea;
  --error-text: #8e2416;
  --info: #2563a8;
  --info-bg: #eaf1fa;
  --info-text: #1a467a;
  --border-focus: #3e9466;
  --side-w: 80px;
  --top-h: 56px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-secondary);
  -webkit-text-size-adjust: 100%;
  /* Không để một chữ rơi một mình xuống dòng cuối (chủ dự án 16/10/2026): trình duyệt tự dàn lại
     câu nhiều dòng; tiêu đề, nhãn ngắn thì chia đều các dòng. */
  text-wrap: pretty;
}
h1, h2, h3, h4, dt, th, .callout-title, .acct-item .sub, .toc-link, .stat-label { text-wrap: balance; }
a { color: var(--brand-green-700); }
h1, h2, h3 { margin: 0; }
h2 { font-size: var(--fs-heading); font-weight: 700; }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-note); }
/* Lớp theo thang cỡ chữ (D30), dùng khi không có thành phần chuẩn phù hợp. */
.fs-note { font-size: var(--fs-note); line-height: var(--lh-note); }
.fs-table { font-size: var(--fs-table); line-height: var(--lh-table); }
.fs-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.fs-heading { font-size: var(--fs-heading); line-height: 1.35; font-weight: 700; }
.fs-title-sm { font-size: var(--fs-title-sm); line-height: 1.3; font-weight: 700; }
.fs-title { font-size: var(--fs-title); line-height: 1.3; font-weight: 800; }
.fs-hero { font-size: var(--fs-hero); line-height: 1.2; font-weight: 700; }
.type-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) minmax(0, 1.2fr); align-items: baseline; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
@media (max-width: 640px) { .type-row { grid-template-columns: minmax(0, 1fr); } }
.type-scale code { font-size: var(--fs-note); color: var(--text-secondary); }
.nowrap { white-space: nowrap; }
.num, .table td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Icon: lấy hình từ static/icons, tô bằng màu chữ hiện tại (class ic-<tên> trong icons.css). */
.ic {
  display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.ic.sm { width: 16px; height: 16px; }
.ic.xs { width: 14px; height: 14px; }
.ic.lg { width: 32px; height: 32px; }

/* Nhãn nhóm: chữ hoa nhỏ, giãn chữ. */
.eyebrow { font-size: var(--fs-note); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-green-700); }
.nav-label { flex: none; font-size: var(--fs-note); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); padding: 12px 12px 4px; }

/* --- Khung --------------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; }

/* Thanh bên (Figma 25.1 — Sidebar · 2 trạng thái). Khối này là trạng thái thu gọn: 80 px nền trắng,
   icon + nhãn 12 px. Trạng thái mở rộng 272 px nằm trong khối [data-side="expanded"] bên dưới. */
.rail {
  width: var(--side-w); flex: none; display: flex; flex-direction: column; align-items: center;
  background: var(--surface-primary); color: var(--text-secondary); border-right: 1px solid var(--border-default);
  position: sticky; top: 0; height: 100vh; z-index: 30;
}
/* Đầu thanh cao bằng thanh trên: hai đường kẻ dưới thẳng hàng. */
.rail-head {
  flex: none; width: 100%; height: var(--top-h); display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border-subtle);
}
.rail-logo { display: block; }
.rail-logo img { display: block; width: 32px; height: 32px; }
.drawer-logo { display: none; }
.rail-nav {
  flex: 1; min-height: 0; width: 100%; overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px;
}
.rail-nav::-webkit-scrollbar { display: none; }
.rail-foot {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 12px;
  border-top: 1px solid var(--border-subtle);
}
.rail-sep { flex: none; width: 40px; height: 1px; border: 0; margin: 2px 0; background: var(--border-subtle); }
.rail-item { width: 100%; }
.rail-btn {
  width: 72px; min-height: 56px; margin: 0 auto; padding: 6px 2px; border: 0; border-radius: 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--fs-note); font-weight: 500; line-height: 1.2;
}
.rail-btn .ic { width: 22px; height: 22px; }
.rail-btn:hover, .rail-item.open > .rail-btn { background: var(--neutral-100); color: var(--text-primary); }
.rail-btn.active, .rail-item.open > .rail-btn.active { background: var(--brand-green-50); color: var(--brand-green-700); font-weight: 600; }
.rail-label { display: block; max-width: 68px; text-align: center; overflow-wrap: anywhere; }
.rail-chev { display: none; }
/* Nút « / › ở đáy thanh. */
.side-toggle { display: flex; justify-content: center; width: 100%; padding-top: 4px; }
.side-toggle button {
  width: 28px; height: 28px; padding: 0; border: 1px solid var(--border-default); border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: var(--surface-primary); color: var(--text-secondary);
}
.side-toggle button:hover { background: var(--neutral-100); color: var(--text-primary); }
.side-toggle .side-collapse { display: none; }
.rail-btn:focus-visible, .side-toggle button:focus-visible, .fly-btn:focus-visible, .fly-link:focus-visible {
  outline: 2px solid var(--brand-green-700); outline-offset: -2px;
}

/* Menu cấp 2 khi thu gọn (Figma: tấm cao hết màn, sát phải thanh bên, trượt 200 ms). Rộng 272 px thay
   vì 256 px của Figma để "Định mức vật tư (BOM)" kèm nhãn sprint nằm trên một dòng. */
.flyout {
  display: none; position: fixed; left: var(--side-w); top: 0; bottom: 0; width: 272px; flex-direction: column;
  background: var(--surface-primary); color: var(--text-primary);
  border-right: 1px solid var(--border-default); box-shadow: 8px 0 24px rgb(17 24 20 / 0.08);
}
.rail-item.open > .flyout { display: flex; animation: fly-in 0.2s ease-out; }
@keyframes fly-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rail-item.open > .flyout { animation: none; } }
.fly-head {
  flex: none; height: var(--top-h); display: flex; align-items: center; gap: 2px; padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--border-subtle);
}
/* Tên phân hệ: gạch xanh nhỏ + chữ in hoa (dùng chung cho tên nhóm khi mở rộng). */
.fly-title {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-green-700);
}
.fly-title::before { content: ""; flex: none; width: 10px; height: 2px; border-radius: 1px; background: currentColor; }
.fly-btn {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.fly-btn:hover { background: var(--neutral-100); color: var(--text-primary); }
.fly-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 2px; padding: 8px; }
.fly-foot { flex: none; padding: 10px 16px; border-top: 1px solid var(--border-subtle); font-size: var(--fs-note); color: var(--text-muted); }
.fly-recent { display: grid; gap: 2px; }
.fly-label { font-size: var(--fs-note); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); padding: 12px 8px 4px; }
.fly-label:first-child { padding-top: 4px; }
.fly-search {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; margin-bottom: 6px;
  background: var(--surface-secondary); border-radius: 10px; color: var(--text-muted);
}
.fly-search:focus-within { outline: 2px solid var(--brand-green-700); outline-offset: 1px; }
.fly-search input[type="search"] {
  flex: 1; min-width: 0; min-height: 0; height: auto; padding: 0; border: 0; border-radius: 0;
  background: transparent; font: inherit; font-size: var(--fs-input); color: var(--text-primary); outline: none;
}
/* Mục trang (Figma 1.7): cao 36 px, chữ 14 Medium #111814; mục đang mở nền xanh nhạt + vạch xanh bên trái. */
.fly-link, .nav-item {
  position: relative; flex: none; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 2px 10px;
  border-radius: 8px; color: var(--text-primary); text-decoration: none; font-size: var(--fs-body); font-weight: 500;
}
.fly-link > .ic, .nav-item .ic { color: var(--text-secondary); }
.fly-link:hover, .nav-item:hover { background: var(--brand-green-50); }
.fly-link .label, .nav-item span.label { flex: 1; min-width: 0; }
.fly-link .sub { display: block; font-size: var(--fs-note); font-weight: 400; color: var(--text-muted); }
.fly-empty { margin: 0; padding: 6px 8px; font-size: var(--fs-table); color: var(--text-muted); }
.fly-empty .ic { vertical-align: -2px; }
.nav-item.active, .fly-link.active { background: var(--brand-green-50); color: var(--brand-green-800); font-weight: 600; }
.nav-item.active .ic, .fly-link.active > .ic { color: var(--brand-green-700); }
/* Vạch đánh dấu mục đang chọn (D38): vạch thẳng 3px, không bo góc, dùng chung cho menu, mục lục, thông báo. */
.nav-item.active::before, .fly-link.active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: var(--accent-w); border-radius: 0; background: var(--brand-green-700);
}
.nav-item.todo { color: var(--text-muted); }
.nav-item.todo .ic { color: var(--text-muted); }
.count {
  flex: none; font-size: var(--fs-note); font-weight: 600; line-height: 1.5; padding: 1px 7px; border-radius: 999px;
  background: var(--neutral-100); color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.nav-item.active .count { background: var(--brand-green-700); color: var(--text-inverse); }

/* Mở rộng 272 px (Figma 264 px; rộng thêm để "Định mức vật tư (BOM)" kèm nhãn sprint nằm trên một dòng),
   mặc định ≥ 1600 px hoặc người dùng chọn: logo chữ, nhóm theo phân hệ có gạch xanh +
   tên in hoa, bấm để đóng/mở ngay trong thanh; đáy chỉ còn nút « thu gọn. */
@media (min-width: 861px) {
  [data-side="expanded"] { --side-w: 272px; }
  [data-side="expanded"] .rail { align-items: stretch; }
  [data-side="expanded"] .rail-head { justify-content: flex-start; padding: 0 20px; }
  [data-side="expanded"] .rail-logo { display: none; }
  [data-side="expanded"] .drawer-logo { display: block; }
  [data-side="expanded"] .drawer-logo img { display: block; width: 120px; height: auto; }
  [data-side="expanded"] .rail-nav { align-items: stretch; gap: 0; padding: 8px 12px; scrollbar-width: thin; }
  [data-side="expanded"] .rail-sep { display: none; }
  [data-side="expanded"] [data-acc] > .rail-btn {
    width: 100%; min-height: 32px; margin-top: 6px; padding: 0 8px; flex-direction: row; justify-content: flex-start; gap: 8px;
    background: transparent; color: var(--brand-green-700); font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  }
  [data-side="expanded"] [data-acc] > .rail-btn::before { content: ""; flex: none; width: 10px; height: 2px; border-radius: 1px; background: currentColor; }
  [data-side="expanded"] [data-acc] > .rail-btn:hover { background: var(--neutral-100); }
  [data-side="expanded"] [data-acc] > .rail-btn > .ic:first-child { display: none; }
  [data-side="expanded"] .rail-label { flex: 1; max-width: none; text-align: left; }
  [data-side="expanded"] .rail-chev { display: block; width: 16px; height: 16px; color: var(--text-muted); }
  [data-side="expanded"] .is-open > .rail-btn .rail-chev { transform: rotate(90deg); }
  [data-side="expanded"] [data-acc] > .flyout { position: static; width: auto; background: transparent; border: 0; box-shadow: none; animation: none; }
  [data-side="expanded"] [data-acc].is-open > .flyout { display: block; }
  [data-side="expanded"] [data-acc]:not(.is-open) > .flyout,
  [data-side="expanded"] [data-acc] .fly-head,
  [data-side="expanded"] [data-acc] .fly-foot,
  [data-side="expanded"] [data-acc] .fly-recent,
  [data-side="expanded"] [data-acc] .fly-search { display: none; }
  [data-side="expanded"] .searching .fly-search { display: flex; }
  [data-side="expanded"] [data-acc] .fly-body { overflow: visible; padding: 2px 0 4px; }
  [data-side="expanded"] .rail-foot { align-items: stretch; padding: 8px 12px 12px; }
  [data-side="expanded"] .side-toggle { justify-content: flex-start; padding-left: 4px; }
  [data-side="expanded"] .side-toggle .side-expand { display: none; }
  [data-side="expanded"] .side-toggle .side-collapse { display: inline-flex; }
}
.side-scrim { display: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
header.top {
  position: sticky; top: 0; z-index: 20; height: var(--top-h);
  display: flex; align-items: center; gap: 12px; padding: 0 24px;
  background: var(--surface-primary); border-bottom: 1px solid var(--border-subtle);
}
.top .spacer { flex: 1; }
.top .actions { display: flex; gap: 8px; align-items: center; }
/* Breadcrumb 14 px Medium + tiêu đề trang 16 px Bold + nút ghim (Figma SX-D1: "Kho / Tồn kho nguyên vật liệu ☆"). */
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crumb { font-size: var(--fs-body); font-weight: 500; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
a.crumb:hover { color: var(--brand-green-700); }
.crumbs .sep { color: var(--text-muted); }
/* Nút "‹ Danh sách …" trên trang hồ sơ (D54): về đúng tìm / lọc / trang đã xem. */
.rec-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px; font-size: var(--fs-table); font-weight: 600; color: var(--text-secondary); text-decoration: none; }
.rec-back:hover { color: var(--brand-green-700); }
.crumbs .crumb-cur { color: var(--text-primary); font-weight: 600; }
/* Đầu trang danh sách (D52): tiêu đề lớn + dòng mô tả; thanh trên chỉ còn đường dẫn. */
.page-head { margin: 0 0 16px; }
.page-head h1 { margin: 0; font-size: var(--fs-title); font-weight: 700; line-height: 1.3; }
.page-desc { margin: 2px 0 0; font-size: var(--fs-table); color: var(--text-secondary); }
.crumbs h1 { font-size: var(--fs-heading); font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-form { display: flex; }
.fav-btn {
  width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.fav-btn:hover { background: var(--neutral-100); color: var(--brand-green-700); }
.fav-btn.on { color: var(--brand-green-700); }
.kbd {
  font-size: var(--fs-note); font-weight: 600; color: var(--text-muted); background: var(--surface-primary);
  border: 1px solid var(--border-default); border-radius: 5px; padding: 2px 6px; white-space: nowrap;
}
.content { padding: 20px 24px 32px; width: 100%; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  background: none; border: 0; padding: 0; cursor: pointer; border-radius: 10px; color: var(--text-secondary);
}
.icon-btn:hover { background: var(--neutral-100); }
.nav-toggle { display: none; }

/* --- Tài khoản ---------------------------------------------------------- */
/* Avatar một kiểu cho cả app (D34, {% avatar %} trong apps/core/templatetags/avatar.py): nền vàng, chữ xanh đậm. */
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand-harvest-500); color: var(--brand-green-900);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-body); font-weight: 700; flex: none;
}
.avatar.md { width: 36px; height: 36px; font-size: var(--fs-body); }
.avatar.lg { width: 56px; height: 56px; font-size: var(--fs-title); }
/* Tài khoản góc trên phải thanh trên (Figma 25.1 · SX / Tài khoản · Nút 40 px + Menu 320 px). */
.top-sep { flex: none; width: 1px; height: 24px; margin: 0 4px; background: var(--border-default); border-radius: 1px; }
.top:not(:has(.actions > *)) .top-sep { display: none; }
/* Nút "Ẩn giá" (chỉ người được xem giá bán): đang ẩn thì nền hổ phách nhạt để nhớ là đang che. */
.price-toggle { flex: none; margin: 0; }
.price-toggle .btn.on { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.price-mask { color: var(--text-muted); letter-spacing: 1px; }
/* Bấm "Ẩn giá" là che ngay, không tải lại trang: số giá bán trong .sp đổi thành •••; ô nhập đơn giá
   (hợp đồng) hiện dấu chấm tròn; bảng tiền trong bản xem hợp đồng, file hợp đồng đã ký bị làm mờ.
   Giá mua, giá nguyên vật liệu không gắn dấu này nên vẫn hiện. Bản in không bị che. */
/* Tăng / giảm so với số trước kiểu bảng chứng khoán ({% change %}, apps/core/templatetags/change.py):
   tăng ▲ xanh, giảm ▼ đỏ, không đổi xám; .warn nền hổ phách khi vượt ngưỡng. */
.chg { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chg-a { font-size: var(--fs-note); }
.chg.warn { padding: 0 6px; border-radius: 999px; background: var(--warning-bg); }
.chg.up { color: var(--success-text); }
.chg.down { color: var(--error-text); }
.chg.flat { color: var(--text-muted); }
.sp-m { display: none; color: var(--text-muted); letter-spacing: 1px; }
@media screen {
  html[data-prices="hidden"] .sp-v { display: none; }
  html[data-prices="hidden"] .sp-m { display: inline; }
  html[data-prices="hidden"] [data-sales-price]:not(input) { filter: blur(6px); user-select: none; }
  html[data-prices="hidden"] input[data-sales-price] { -webkit-text-security: disc; }
}
.acct { position: relative; flex: none; }
.acct-btn {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 4px; border: 0; border-radius: 10px;
  background: none; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer;
}
.acct-btn .avatar { width: 32px; height: 32px; }
.acct-btn:hover, .acct.open > .acct-btn { background: var(--neutral-100); }
.acct-btn:focus-visible, .acct-item:focus-visible { outline: 2px solid var(--brand-green-700); outline-offset: -2px; }
.acct-who { display: grid; min-width: 0; max-width: 180px; line-height: 1.25; }
.acct-who .name { font-size: var(--fs-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-who .role { font-size: var(--fs-note); color: var(--text-muted); white-space: nowrap; }
.acct-chev { color: var(--text-secondary); transition: transform .15s; }
.acct.open > .acct-btn .acct-chev { transform: rotate(180deg); }
.acct-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 35; width: 320px;
  max-height: calc(100vh - var(--top-h) - 16px); overflow-y: auto;
  background: var(--surface-primary); color: var(--text-primary);
  border: 1px solid var(--border-subtle); border-radius: 14px; box-shadow: 8px 8px 28px rgb(0 0 0 / 0.16);
}
.acct.open > .acct-menu { display: block; }
.acct-menu .fly-body { overflow: visible; gap: 4px; }
/* Thẻ chào: email, ảnh đại diện lớn, "Xin chào, [Tên]!", họ tên, nhãn vai trò. */
.acct-hello {
  display: grid; justify-items: center; gap: 6px; padding: 14px 12px 16px; margin-bottom: 4px;
  background: var(--brand-green-50); border-radius: 12px; text-align: center;
}
.acct-hello .email { font-size: var(--fs-table); color: var(--text-secondary); overflow-wrap: anywhere; }
.acct-hello .greet { font-size: var(--fs-title-sm); font-weight: 700; line-height: 1.3; }
.acct-hello .full { font-size: var(--fs-table); color: var(--text-secondary); }
.acct-role {
  padding: 2px 8px; border-radius: 4px; background: var(--brand-green-900); color: var(--text-inverse);
  font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.acct-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-radius: 10px;
  background: none; color: var(--text-primary); font: inherit; font-size: var(--fs-body); font-weight: 600; text-align: left;
  text-decoration: none; cursor: pointer;
}
.acct-item:hover, .acct-item.active, .acct-item[aria-expanded="true"] { background: var(--surface-secondary); }
.acct-item > .ic { flex: none; width: 20px; height: 20px; color: var(--text-secondary); }
.acct-item .text { flex: 1; min-width: 0; }
.acct-item .sub { display: block; font-size: var(--fs-note); font-weight: 400; color: var(--text-muted); }
.acct-item[aria-expanded="true"] .acct-chev { transform: rotate(90deg); }
.acct-out { margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--border-subtle); }
.acct-item.danger, .acct-item.danger > .ic { color: var(--error); }
.acct-item.danger { min-height: 44px; }
.acct-item.danger:hover { background: var(--error-bg); }

/* --- Thành phần --------------------------------------------------------- */
.card { background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.card.flush { padding: 0; overflow: hidden; }
/* D76: clip giữ góc bo như hidden nhưng không tạo khung cuộn, để tiêu đề bảng bên trong dính được. */
@supports (overflow: clip) { .card.flush { overflow: clip; } }
.card-head { display: grid; gap: 2px; margin-bottom: 14px; }
.card-head.pad { padding: 18px 20px 0; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.toolbar p { margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-size: var(--fs-input); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn.primary { background: var(--brand-green-700); color: var(--text-inverse); }
.btn.primary:hover { background: var(--brand-green-800); }
.btn.ghost { background: var(--surface-primary); border-color: var(--border-default); color: var(--text-primary); }
.btn.ghost:hover { border-color: var(--brand-green-700); color: var(--brand-green-700); }
/* Nút tính tự động (Tính quãng đường): nền xanh nhạt viền xanh, nổi hơn nút phụ, nhẹ hơn nút Lưu. */
.btn.calc { background: var(--brand-green-50); border-color: var(--brand-green-700); color: var(--brand-green-700); }
.btn.calc:hover { background: var(--brand-green-700); color: var(--text-inverse); }
.btn.calc:disabled { opacity: 0.7; cursor: progress; }
/* Nhóm nút liền nhau (Xem trước PDF · Tải PDF · Chia sẻ, partials/doc_actions.html): chung viền, chỉ
   hai đầu bo góc; nút đang rê chuột nổi lên trên để viền xanh không bị nút bên cạnh che. */
.btn-group { display: inline-flex; }
.btn-group > .btn { position: relative; border-radius: 0; }
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group > .btn:first-child { border-radius: 10px 0 0 10px; }
.btn-group > .btn:last-child { border-radius: 0 10px 10px 0; }
.btn-group > .btn:hover, .btn-group > .btn:focus-visible { z-index: 1; }
/* Ngăn kéo Xem trước PDF (doc-actions.js): rộng 960, thân là khung PDF chiếm hết chiều cao. */
.pdf-view .pdf-view-panel { width: min(960px, 100%); }
/* Nút mở rộng: ngăn kéo chiếm 3/4 chiều ngang màn hình (chủ dự án 18/10/2026). */
.pdf-view.is-wide .pdf-view-panel { width: max(min(960px, 100%), 75vw); }
.pdf-view .pd-titlebar .btn { flex: none; }
.pdf-view-body { position: relative; flex: 1; min-height: 0; background: var(--surface-secondary, #eef1ee); }
.pdf-view-body iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.pdf-view-wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-secondary); font-size: var(--fs-body); }
.pdf-view-wait[hidden] { display: none; }
.btn.danger { background: var(--surface-primary); border-color: var(--error); color: var(--error-text); }
.btn.link { background: none; color: var(--brand-green-700); padding: 0 4px; }
.btn.block { width: 100%; }
.btn[hidden] { display: none; }
.btn.sm { min-height: 32px; padding: 0 10px; font-size: var(--fs-note); }

/* Nhãn trạng thái: chấm màu + chữ, theo App / Status Pill. Riêng cảnh báo (hổ phách) luôn là ⚠ + chữ
   thay cho chấm (Figma 25.0), nên mọi template dùng .pill.warning đều có biểu tượng. */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: var(--fs-note); font-weight: 600; line-height: 1.25; white-space: nowrap;
  background: var(--neutral-100); color: var(--text-secondary);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neutral-400); flex: none; }
.pill.success { background: var(--success-bg); color: var(--success-text); }
.pill.success::before { background: var(--success); }
.pill.warning { background: var(--warning-bg); color: var(--warning-text); }
.pill.warning::before {
  width: 12px; height: 12px; border-radius: 0; background: var(--warning);
  -webkit-mask: url("../icons/alert.0647895f2f07.svg") center / contain no-repeat; mask: url("../icons/alert.0647895f2f07.svg") center / contain no-repeat;
}
.pill.error { background: var(--error-bg); color: var(--error-text); }
.pill.error::before { background: var(--error); }
.pill.info { background: var(--info-bg); color: var(--info-text); }
.pill.info::before { background: var(--info); }
.pill.brand { background: var(--brand-green-900); color: var(--text-inverse); }
.pill.brand::before { background: var(--brand-harvest-500); }

/* ==== Bộ thành phần chuẩn: nhãn, ghi chú, chú ý, cảnh báo (D28; Figma 25.0 quy tắc màu, SX-D3) ====
   Cả app chỉ dùng các lớp này; trang mẫu /giao-dien/ hiện đủ kiểu.
   - Trạng thái .pill: bo tròn + chấm (đang giao dịch, tạm ngưng...). Một bản ghi một trạng thái.
   - Nhãn .tag: góc 6 px, không chấm; đánh dấu thêm cạnh giá trị / tiêu đề (Sau sáp nhập, Hết hạn).
   - Số đếm .count: viên xám chữ số (mục lục, tiêu đề thẻ).
   - Ghi chú .note: dòng chữ nhỏ dưới giá trị hoặc cuối mục.
   - Khối chú ý .callout: khối nền màu có biểu tượng, tiêu đề, lời nhắc, nút xử lý.
   Màu: không thêm lớp là xám; .success xanh lá (đúng, đã xác nhận) ✓; .info xanh dương (thông
   tin, đang xử lý); .warning hổ phách, luôn kèm ⚠ (cần xem lại); .error đỏ (lỗi, quá hạn). */
.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px;
  font-size: var(--fs-note); font-weight: 600; line-height: 16px; white-space: nowrap; vertical-align: middle;
  background: var(--neutral-100); color: var(--text-secondary);
}
.tag .ic { --ic-size: 12px; width: 12px; height: 12px; }
a.tag { text-decoration: none; }
a.tag:hover { text-decoration: underline; }
.tag.success { background: var(--success-bg); color: var(--success-text); }
.tag.info { background: var(--info-bg); color: var(--info-text); }
.tag.warning { background: var(--warning-bg); color: var(--warning-text); }
.tag.error { background: var(--error-bg); color: var(--error-text); }
/* Nhãn nguồn trong Lịch sử thay đổi (profile.SOURCE_CHIPS, Đ10): Hợp đồng màu thương hiệu, Sheet
   màu vàng thu hoạch (không phải cảnh báo nên không kèm ⚠). */
.tag.brand { background: var(--brand-green-50); color: var(--brand-green-800); }
.tag.harvest { background: var(--warning-bg); color: var(--text-primary); }
/* Hàng nhãn liền nhau (partials/label_row.html, chủ dự án 30/10/2026 theo mẫu app Nông sản): các
   nhãn trạng thái của một dòng ghép thành một dải dưới tên / mã ở ô đầu bảng, bo góc ở hai đầu, vạch
   trắng ngăn giữa; màu theo bộ chuẩn, cảnh báo vẫn kèm ⚠. Dải dài thì xuống dòng giữa các nhãn. */
.label-row { display: flex; flex-wrap: wrap; row-gap: 2px; margin-top: 4px; width: max-content; max-width: 100%; }
.lr-seg {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: var(--fs-note); font-weight: 600;
  line-height: 16px; white-space: nowrap; background: var(--neutral-100); color: var(--text-secondary);
  border-right: 1px solid var(--surface-primary);
}
.lr-seg:first-child { border-radius: 6px 0 0 6px; }
.lr-seg:last-child { border-radius: 0 6px 6px 0; border-right: 0; }
.lr-seg:only-child { border-radius: 6px; }
/* Điện thoại (L453): dải dễ xuống dòng nên mỗi nhãn bo đủ 4 góc, cách nhau 3 px, không còn góc vuông lẻ. */
@media (max-width: 600px) {
  .label-row { gap: 3px; }
  .lr-seg, .lr-seg:first-child, .lr-seg:last-child { border-radius: 6px; border-right: 0; }
}
.lr-seg.success { background: var(--success-bg); color: var(--success-text); }
.lr-seg.info { background: var(--info-bg); color: var(--info-text); }
.lr-seg.warning { background: var(--warning-bg); color: var(--warning-text); }
.lr-seg.error { background: var(--error-bg); color: var(--error-text); }
.lr-seg.brand { background: var(--brand-green-50); color: var(--brand-green-800); }
.lr-seg.warning::before {
  content: ""; flex: none; width: 12px; height: 12px; background: var(--warning);
  -webkit-mask: url("../icons/alert.0647895f2f07.svg") center / contain no-repeat; mask: url("../icons/alert.0647895f2f07.svg") center / contain no-repeat;
}
.count.warning { background: var(--warning-bg); color: var(--warning-text); }
.count.error { background: var(--error-bg); color: var(--error-text); }
.note { display: flex; align-items: flex-start; gap: 4px; margin: 2px 0 0; font-size: var(--fs-note); font-weight: 400; line-height: var(--lh-note); color: var(--text-secondary); }
.note.success { color: var(--success-text); }
.note.info { color: var(--info-text); }
.note.warning { color: var(--warning-text); }
.note.error { color: var(--error-text); }
/* Biểu tượng đứng trước theo màu: ⚠ cho cảnh báo / lỗi, ✓ cho đúng (Figma SX-D3). */
.tag.warning::before, .note.warning::before, .note.error::before, .note.success::before,
.callout.warning::before, .callout.error::before, .callout.success::before, .callout.info::before {
  content: ""; flex: none; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("../icons/alert.0647895f2f07.svg") center / contain no-repeat; mask: url("../icons/alert.0647895f2f07.svg") center / contain no-repeat;
}
.tag.warning::before { background: var(--warning); }
.note::before { margin-top: 3px; }
.note.warning::before { background: var(--warning); }
.note.error::before { background: var(--error); }
.note.success::before, .callout.success::before { -webkit-mask-image: url("../icons/check.1008da5c24d3.svg"); mask-image: url("../icons/check.1008da5c24d3.svg"); }
.note.success::before { background: var(--success); }
/* Ghi chú cuối mục (cả mục, không gắn một ô): ngăn với các dòng trên bằng khoảng trống. */
.note.sec-foot { margin-top: 12px; }
/* Ghi chú dưới giá trị trong ô hẹp (MST + kết quả Cục Thuế): chia đều các dòng, ngày không rơi một mình. */
.kv-item .note { text-wrap: balance; }
.callout {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  background: var(--surface-secondary); color: var(--text-secondary); font-size: var(--fs-table); line-height: 19px;
}
.callout.success::before, .callout.info::before, .callout.warning::before, .callout.error::before { width: 18px; height: 18px; margin-top: 1px; }
.callout.compact::before { width: 16px; height: 16px; }
.callout.success { background: var(--success-bg); }
.callout.success::before { background: var(--success); }
.callout.info { background: var(--info-bg); }
.callout.info::before { background: var(--info); -webkit-mask-image: url("../icons/bell.7c4693321dae.svg"); mask-image: url("../icons/bell.7c4693321dae.svg"); }
.callout.warning { background: var(--warning-bg); }
.callout.warning::before { background: var(--warning); }
.callout.error { background: var(--error-bg); }
.callout.error::before { background: var(--error); }
.callout-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.callout-title { margin: 0; font-size: var(--fs-body); font-weight: 700; line-height: 21px; color: var(--text-primary); }
.callout.success .callout-title { color: var(--success-text); }
.callout.info .callout-title { color: var(--info-text); }
.callout.warning .callout-title { color: var(--warning-text); }
.callout.error .callout-title { color: var(--error-text); }
.callout p { margin: 0; }
.callout-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.callout-actions form { display: contents; }
.callout.compact { padding: 10px 12px; }
.callout[hidden] { display: none; }
/* Thông báo trong form (lỗi, chú ý; trước là .flash, rà soát quy tắc R28): cách phần dưới 12px. */
.callout.msg { margin-bottom: 12px; }
/* Khối chú ý đầu trang (trên form): không rộng quá form. */
.callout.top { max-width: 880px; margin-bottom: 12px; }
/* Chip quãng đường cạnh địa chỉ kho (Figma SX-D3 "Di chuyển 1 ngày"): nhãn xám, canh trên. */
.kv-chip { align-self: start; }
/* Trang mẫu /giao-dien/. */
.ui-kit .sec-head .tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; }
.ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; font-size: var(--fs-body); }
.ui-stack { display: grid; gap: 12px; margin-top: 12px; }
.callout.compact .callout-title { font-size: var(--fs-body); }

/* Thẻ chỉ số, theo App / KPI Card. */
/* Trang chủ: mỗi phân hệ một thẻ (số chính, các dòng số liệu có link, lối tắt). */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; gap: 16px; margin-bottom: 16px; }
.mod-grid .card { margin-bottom: 0; }
.mod-card { display: grid; align-content: start; gap: 12px; }
.mod-head { display: flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none; }
.mod-head h2 { flex: 1; }
.mod-head:hover { color: var(--brand-green-700); }
.mod-value { font-size: var(--fs-body); }
.mod-value .num { font-size: var(--fs-hero); font-weight: 700; font-variant-numeric: tabular-nums; }
.mod-stats { list-style: none; margin: 0; padding: 0; display: grid; }
.mod-stats li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border-subtle); font-size: var(--fs-table); }
.mod-stats .num { font-weight: 600; font-variant-numeric: tabular-nums; }
.mod-stats .num.warning { color: var(--warning-text); }
.mod-links { display: flex; flex-wrap: wrap; gap: 8px; }
.mod-card.upcoming { background: transparent; border-style: dashed; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi { display: grid; gap: 6px; padding: 18px 20px; border-radius: 14px; background: var(--surface-primary); border: 1px solid var(--border-subtle); }
.kpi .k-label { font-size: var(--fs-note); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.kpi .k-value { font-size: var(--fs-hero); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi .k-sub { font-size: var(--fs-table); color: var(--text-secondary); }
.kpi.dark { background: var(--brand-green-900); border-color: var(--brand-green-900); color: var(--text-inverse); }
.kpi.dark .k-label, .kpi.dark .k-sub { color: var(--text-inverse-muted); }

/* Danh sách dạng dòng (người dùng…). */
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.list-row:last-child { border-bottom: 0; }
.list-row .who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.list-row .who .name { font-size: var(--fs-body); font-weight: 600; }
.list-row .who .sub { font-size: var(--fs-table); color: var(--text-muted); overflow-wrap: anywhere; }
/* Bảng người dùng: ảnh đại diện + tên / email trong ô đầu. */
.user-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-cell .who { display: grid; gap: 2px; min-width: 0; }
.user-cell .who .name { font-weight: 600; }
.user-cell .who .sub { font-size: var(--fs-note); color: var(--text-muted); overflow-wrap: anywhere; }
.toolbar.filters > p { margin: 0; }
.list-row .meta { display: grid; gap: 4px; justify-items: end; text-align: right; font-size: var(--fs-note); color: var(--text-muted); }


/* Toast góc dưới bên trái (partials/toasts.html + js/toast.js): tránh rail, chồng lên nhau, mới nhất ở dưới. */
.toasts {
  position: fixed; z-index: 80; left: calc(var(--side-w) + 16px);
  bottom: calc(16px + var(--toast-lift, 0px) + env(safe-area-inset-bottom, 0px));
  width: min(400px, calc(100vw - var(--side-w) - 32px)); display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; transition: bottom 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) { .toasts { transition: none; } }
.toasts:empty { display: none; }
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 8px 12px 14px;
  border-radius: 0 12px 12px 0; border: 1px solid var(--border-subtle); border-left: var(--accent-w) solid var(--info);
  background: var(--surface-primary); color: var(--text-primary); box-shadow: 8px 8px 28px rgb(0 0 0 / 0.16);
  animation: toast-in 0.2s ease-out;
}
.toast-ic { margin-top: 1px; color: var(--info); }
.toast-msg { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-body); line-height: 21px; font-weight: 500; overflow-wrap: anywhere; }
.toast-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px 0;
  background: none; border: 0; padding: 0; border-radius: 8px; cursor: pointer; color: var(--text-secondary);
}
.toast-act {
  flex: none; margin: -6px 0; min-height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-body); font-weight: 600; color: var(--brand-green-700);
}
.toast-act:hover { background: var(--brand-green-50); }
.toast-act:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.toast-x:hover { background: var(--surface-secondary); color: var(--text-primary); }
/* Nút "Hoàn tác" của toast xoá vào thùng rác là form POST (partials/toasts.html): form không chiếm chỗ riêng. */
.toast-form { display: contents; }

/* Hộp xác nhận xoá vào thùng rác (partials/trash_dialog.html, RS10): hỏi lý do xoá. */
.confirm-dialog {
  width: min(440px, calc(100vw - 32px)); padding: 16px 16px 14px 20px; border: 1px solid var(--border-subtle);
  border-radius: 12px; background: var(--surface-primary); color: var(--text-primary); box-shadow: 8px 8px 28px rgb(0 0 0 / 0.16);
}
.confirm-dialog::backdrop { background: rgb(0 0 0 / 35%); }
.confirm-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.confirm-head h2 { flex: 1; margin: 4px 0 0; font-size: var(--fs-heading); }
.confirm-text { margin: 0 0 14px; font-size: var(--fs-body); color: var(--text-secondary); }
.confirm-dialog textarea { width: 100%; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.toast-x:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.toast.success { border-left-color: var(--success); }
.toast.success .toast-ic { color: var(--success); }
.toast.warning { border-left-color: var(--warning); background: var(--warning-bg); color: var(--warning-text); }
.toast.warning .toast-ic { color: var(--warning); }
.toast.error { border-left-color: var(--error); background: var(--error-bg); color: var(--error-text); }
.toast.error .toast-ic { color: var(--error); }
.toast.leaving { animation: toast-out 0.18s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(-12px); } }
@keyframes toast-gone { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.leaving { animation: none; } }
/* Không có JavaScript: ẩn nút × (không bấm được), toast tự mờ đi để không che nội dung; rê chuột thì dừng. */
@media (scripting: none) {
  .toast-x { display: none; }
  .toast { animation: toast-gone 0.3s ease 6s forwards; }
  .toast.warning, .toast.error { animation-delay: 15s; }
  .toast:hover { animation-play-state: paused; }
}
@media (max-width: 860px) {
  .toasts { left: 16px; right: 16px; width: auto; }
  .toast-x { width: 40px; height: 40px; margin: -10px -2px; }
}

/* Trạng thái rỗng / chưa có quyền / lỗi, theo 24.5 — Trạng thái. */
.state { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 60px 24px; max-width: 420px; margin: 0 auto; }
.state-tile { width: 72px; height: 72px; border-radius: 24px; display: flex; align-items: center; justify-content: center; background: var(--warning-bg); color: var(--warning); }
.state-tile.error { background: var(--error-bg); color: var(--error); }
.state-tile.brand { background: var(--brand-green-50); color: var(--brand-green-700); }
.state h1, .state h2 { font-size: var(--fs-title-sm); font-weight: 700; }
.state p { margin: 0; font-size: var(--fs-body); line-height: 21px; color: var(--text-secondary); }

/* Bảng: tiêu đề cột dính khi cuộn, vuốt ngang trên điện thoại, cột đầu đứng yên. */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px; border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: middle; }
.table th {
  font-size: var(--fs-note); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-secondary); background: var(--brand-green-50); white-space: nowrap;
  border-bottom: 2px solid var(--brand-green-700);
}
/* Figma 25.0: chế độ Vừa, dòng bảng cao 44 px. Chữ trong bảng 13px (chủ dự án 16/10/2026). */
.table td { height: 44px; font-size: var(--fs-table); line-height: var(--lh-table); }
/* Mã trong bảng chỉ đậm vừa (D30). */
.table td b, .table td strong { font-weight: 600; }
.table.sticky-head th { position: sticky; top: 0; z-index: 1; }
/* D76 (chủ dự án 03/11/2026, như app Nông sản): mọi bảng trong .table-wrap giữ hàng tiêu đề khi
   cuộn. Bảng vừa khung (app.js gắn .fits): khung không cuộn riêng, tiêu đề dính ngay dưới thanh trên
   khi cuộn trang. Bảng rộng hơn khung (vuốt ngang): khung cao tối đa vừa màn hình và tự cuộn, tiêu đề
   dính ở đầu khung. Ô tiêu đề của cột dính trái (sao, logo, cột đầu) nằm trên các ô khác. */
.table-wrap:not(.fits) { overflow: auto; max-height: calc(100vh - var(--top-h) - 24px); max-height: calc(100dvh - var(--top-h) - 24px); }
.table-wrap.fits { overflow-x: clip; overflow-y: visible; }
.table-wrap > .table > thead > tr > th { position: sticky; top: 0; z-index: 2; }
.table-wrap.fits > .table > thead > tr > th { top: var(--top-h); }
.table-wrap > .table > thead > tr > th:is(.star-col, .logo-col, .first-col) { z-index: 3; }
.table tbody tr:hover { background: var(--brand-green-50); }
.table td.wrap { min-width: 220px; }
.table td.actions { text-align: right; white-space: nowrap; }
.table td.actions form { display: inline; }
/* Cột xoá riêng (D59): hẹp, cố định, sau cột sửa; ô trống khi dòng không xoá được. */
.table .del-col { width: 44px; padding-left: 4px; text-align: center; }

/* Biểu mẫu: không dùng type=number (số kiểu Việt Nam đọc ở server). */
.form { max-width: 880px; }
.form.narrow { max-width: 480px; }
.section-title { margin: 0 0 4px; font-size: var(--fs-heading); font-weight: 700; }
.inline-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 12px; }
.inline-form .field { flex: 1 1 260px; margin: 0; }
.pw-gen { margin-top: 6px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field { margin-bottom: 14px; }
.field label, fieldset legend { display: block; font-size: var(--fs-table); font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="number"], select, textarea {
  width: 100%; min-height: 40px; padding: 8px 12px; font: inherit; font-size: var(--fs-input); color: var(--text-primary);
  background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 10px;
}
/* L317: ô chọn file, ô ẩn không theo cỡ chữ mặc định của trình duyệt (13.33px), vẫn 13px (D49). */
input[type="file"], input[type="hidden"] { font: inherit; font-size: var(--fs-input); }
input:focus, select:focus, textarea:focus, .btn:focus-visible, .nav-item:focus-visible, summary:focus-visible, .icon-btn:focus-visible {
  outline: 2px solid var(--brand-green-700); outline-offset: 1px;
}
/* Ô chọn (select): bỏ mũi tên mặc định của trình duyệt, mũi tên riêng cách lề phải 12px. */
select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background: var(--surface-primary) url("../icons/chevron-down.2b6eceea7f70.svg") right 12px center / 18px 18px no-repeat;
  text-overflow: ellipsis; white-space: nowrap;
}
select:disabled, input:disabled, textarea:disabled { background-color: var(--neutral-100); color: var(--text-secondary); cursor: not-allowed; }
select:hover:not(:disabled), input:hover:not(:disabled):not([type="checkbox"]), .select-trigger:hover:not(:disabled) { border-color: var(--text-muted); }

/* Ô chọn dựng lại trên máy tính (app.js): nút giống ô nhập + danh sách bật xuống. Điện thoại dùng
   danh sách gốc của máy (dễ bấm hơn). Thẻ select gốc vẫn nằm trong form để gửi dữ liệu. */
.select { position: relative; width: 100%; }
.select > select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.select-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 12px 8px 12px;
  font: inherit; font-size: var(--fs-input); text-align: left; color: var(--text-primary); cursor: pointer;
  background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 10px;
}
.select-trigger .value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-trigger .value.placeholder { color: var(--text-muted); }
.select-trigger .ic { width: 18px; height: 18px; color: var(--text-secondary); transition: transform .15s; }
.select.open .select-trigger { border-color: var(--brand-green-700); }
.select.open .select-trigger .ic { transform: rotate(180deg); }
.select-trigger:focus-visible { outline: 2px solid var(--brand-green-700); outline-offset: 1px; }
.select-trigger:disabled { background: var(--neutral-100); color: var(--text-secondary); cursor: not-allowed; }
.has-error .select-trigger { border-color: var(--error); }
.select-pop {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 60; display: none;
  min-width: 100%; width: max-content; max-width: min(420px, 90vw); padding: 6px;
  background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: 12px;
  box-shadow: 8px 8px 28px rgb(0 0 0 / 0.16);
}
.select-list { max-height: 288px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.select.up .select-pop { top: auto; bottom: calc(100% + 4px); }
.select.open .select-pop { display: block; }
/* Ô chọn có ô tìm (D31): ô tìm trên cùng, danh sách lọc theo chữ gõ, không phân biệt dấu. */
.select.searchable .select-pop { width: max(100%, 320px); }
.select-search { width: 100%; min-height: 36px; margin-bottom: 6px; padding: 6px 10px; font-size: var(--fs-input); }
.select-list li[hidden] { display: none; }
.select-list li.select-empty { color: var(--text-muted); cursor: default; }
/* Dòng "+ Thêm … «chữ đã gõ»" của ô chọn có thêm nhanh vào danh mục (SearchSelect create_url). */
.select-list li.select-create { color: var(--brand-green-700); font-weight: 600; white-space: normal; }
.select-list.two-col li.select-create { grid-column: 2 / -1; }
.select-list.two-col.starred li.select-create { grid-column: 3 / -1; }
.select-list li {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; border-radius: 8px;
  font-size: var(--fs-input); color: var(--text-primary); cursor: pointer; white-space: nowrap;
}
.select-list li .ic { width: 16px; height: 16px; color: var(--brand-green-700); visibility: hidden; }
.select-list li[aria-selected="true"] { font-weight: 600; color: var(--brand-green-700); }
.select-list li[aria-selected="true"] .ic { visibility: visible; }
.select-list li.active { background: var(--brand-green-50); }
.select-list li[aria-disabled="true"] { color: var(--text-muted); cursor: default; }
/* Ô nhiều nhãn (TagInput, tag-input.js): khung giống ô nhập, nhãn .tag có ×, ô gõ chiếm phần còn lại;
   gợi ý dùng lại danh sách bật xuống của ô chọn. */
.tag-box {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%;
  min-height: 40px; padding: 5px 8px; background: var(--surface-primary);
  border: 1px solid var(--border-default); border-radius: 10px; cursor: text;
}
.tag-box:hover { border-color: var(--text-muted); }
.tag-box:focus-within { outline: 2px solid var(--brand-green-700); outline-offset: 1px; }
.has-error .tag-box { border-color: var(--error); }
.tag-list { display: contents; }
.tag-chip { gap: 2px; padding: 2px 4px 2px 8px; font-size: var(--fs-input); font-weight: 500; line-height: 20px; color: var(--text-primary); white-space: normal; }
.tag-x {
  display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--text-secondary); font: inherit; font-size: var(--fs-input); line-height: 1; cursor: pointer;
}
.tag-x:hover { background: var(--neutral-300); color: var(--text-primary); }
.tag-box input.tag-entry {
  flex: 1 1 80px; width: auto; min-width: 80px; min-height: 28px; padding: 0 4px;
  border: 0; outline: 0; background: none;
}
.tag-box .tag-source { display: none; }
.tag-box.open .tag-pop { display: block; }
.tag-pop { width: max(100%, 280px); }
.tag-pop .select-list li { justify-content: space-between; }
.tag-hint { color: var(--text-muted); font-size: var(--fs-note); font-weight: 400; }
.tag-pop li.tag-new { color: var(--brand-green-700); font-weight: 600; }
/* Lựa chọn "MÃ · Tên": hai cột thẳng hàng, cột mã rộng theo mã dài nhất, mã đậm (chủ dự án 16/10/2026). */
.select-list.two-col { display: grid; grid-template-columns: 16px max-content minmax(0, 1fr); column-gap: 12px; }
.select-list.two-col li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: 16px; }
.select-list.two-col li[hidden] { display: none; }
.select-list.two-col .opt-code { font-weight: 600; }
.select-list.two-col .opt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.select-list .opt-tag { margin-left: 8px; vertical-align: 1px; white-space: nowrap; }
/* Nhãn nằm dòng dưới tên để không bị cắt khi danh sách hẹp. */
.select-list .opt-name.has-tag { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.select-list .opt-name.has-tag .opt-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-list .opt-name.has-tag .opt-tag { margin-left: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.select-list.two-col .opt-wide, .select-list.two-col li.select-empty { grid-column: 2 / -1; }
/* Sao "yêu thích" luôn ở cột hẹp riêng (D62): trong bảng là cột sao đầu bảng, trong danh sách chọn là
   cột trước mã; dòng không sao để trống ô nên mã và tên vẫn thẳng hàng. */
.select-list.two-col.starred { grid-template-columns: 16px 14px max-content minmax(0, 1fr); }
.select-list.two-col.starred .opt-wide, .select-list.two-col.starred li.select-empty { grid-column: 3 / -1; }
.select-list.two-col .opt-star { color: var(--warning); text-align: center; }
.filters .select { width: auto; min-width: 180px; }

/* Tra cứu MST: ô nhập + nút, bảng so sánh app với Cục Thuế (chiếm cả 2 cột). */
.input-action { display: flex; gap: 8px; }
.input-action input { flex: 1; min-width: 0; }
.input-action .btn { flex: none; }
.tax-result { grid-column: 1 / -1; margin: -4px 0 14px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--brand-green-50); font-size: var(--fs-table); }
.tax-result[hidden] { display: none; }
.tax-result .head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.tax-result .muted { color: var(--text-muted); }
.tax-result table { width: 100%; border-collapse: collapse; }
.tax-result th, .tax-result td { text-align: left; vertical-align: top; padding: 6px 8px; border-top: 1px solid var(--border-default); }
.tax-result th { font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.tax-result td.new { color: var(--brand-green-700); font-weight: 600; }
.tax-result td.act { width: 1%; white-space: nowrap; }

/* Ô ngày dd/mm/yyyy + nút lịch; lịch tiếng Việt, tuần bắt đầu thứ Hai. */
.date-field { position: relative; width: 100%; }
/* Cặp ngày (Từ ngày - Đến ngày, Ngày ký - Ngày hết hạn...): luôn chung một dòng, ngày bắt đầu bên
   trái; nằm trong .grid-2 thì chiếm cả hàng. Màn rất hẹp (dưới 340 px) mới xuống hai dòng liền. */
.date-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; grid-column: 1 / -1; align-items: start; }
.date-pair > .field { min-width: 0; }
.date-pair > .field select, .date-pair > .field > .select { width: 100%; min-width: 0; }
/* Cặp ngày trong ngăn kéo mà cả hai ô đang ẩn (ô người ký khi đại diện PL ký): ẩn luôn khung. */
.date-pair:not(:has(> :not([hidden]))) { display: none; }
.date-pair .date-field input { padding-right: 38px; }
.date-pair > .field > label:has(.date-span) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-pair .date-span { font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.date-pair .date-span::before { content: " · "; }
.date-pair .date-span.warn { color: var(--error-text); }
@media (max-width: 339px) { .date-pair { grid-template-columns: 1fr; } }
.date-field input { padding-right: 44px; font-variant-numeric: tabular-nums; }
.date-btn {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-secondary); cursor: pointer;
}
.date-btn:hover { background: var(--brand-green-50); color: var(--brand-green-700); }
.date-btn:focus-visible { outline: 2px solid var(--brand-green-700); }
.date-btn .ic { width: 18px; height: 18px; }
.date-pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; width: min(296px, calc(100vw - 16px)); padding: 12px;
  font-size: var(--fs-input);
  transform: translateX(var(--pop-x, 0px));
  background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: 14px;
  box-shadow: 8px 8px 28px rgb(0 0 0 / 0.16);
}
.date-pop[hidden] { display: none; }
.date-field.up .date-pop { top: auto; bottom: calc(100% + 4px); }
.date-head { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; }
.date-head .title { flex: 1; text-align: center; font-weight: 600; font-size: var(--fs-input); }
.date-head button {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--fs-input);
}
.date-head button:hover { background: var(--brand-green-50); color: var(--brand-green-700); }
.date-head .ic { width: 16px; height: 16px; }
.date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-grid .dow { text-align: center; font-size: var(--fs-note); font-weight: 600; color: var(--text-muted); padding: 4px 0; }
.date-grid .dow.sun { color: var(--error-text); }
.date-grid button {
  height: 36px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: var(--fs-input);
  color: var(--text-primary); cursor: pointer; font-variant-numeric: tabular-nums;
}
.date-grid button.out { color: var(--text-muted); }
.date-grid button:hover { background: var(--brand-green-50); }
.date-grid button.today { box-shadow: inset 0 0 0 1px var(--brand-green-700); }
.date-grid button.focus { outline: 2px solid var(--brand-green-700); outline-offset: -2px; }
.date-grid button[aria-selected="true"] { background: var(--brand-green-700); color: var(--text-inverse); font-weight: 600; }
.date-foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }

/* Ô chọn: vuông bo 6px, viền đậm; khi chọn nền xanh dấu tích trắng (theo ma trận quyền). */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; cursor: pointer;
  border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
input[type="checkbox"]::after {
  content: ""; width: 11px; height: 11px; background: transparent;
  -webkit-mask: url("../icons/check-box.74ed6a4b658d.svg") center / contain no-repeat; mask: url("../icons/check-box.74ed6a4b658d.svg") center / contain no-repeat;
}
input[type="checkbox"]:checked { background: var(--brand-green-700); border-color: var(--brand-green-700); }
input[type="checkbox"]:checked::after { background: var(--text-inverse); }
input[type="checkbox"]:disabled { opacity: 0.45; cursor: default; }
/* Ô tích / nút tròn (chủ dự án 16/10/2026 "outline quá sát chữ"): vòng chọn cách ô 2px, chỉ hiện khi
   dùng bàn phím; ô cách chữ 8px, cân giữa dòng chữ 14px. */
input[type="checkbox"]:focus, input[type="radio"]:focus { outline: none; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.has-error input, .has-error select { border-color: var(--error); }
.field-error { color: var(--error-text); font-size: var(--fs-note); margin-top: 4px; }
.field-help { color: var(--text-secondary); font-size: var(--fs-note); margin-top: 4px; }
.field-help.is-danger { color: var(--error-text); font-weight: 600; }
.field-help.is-warning { color: var(--warning-text); font-weight: 600; }
/* Ô bị khoá (Đ21): ổ khoá + lý do + link tới chỗ sửa thật (partials/lock_help.html). */
.lock-help .ic-lock { margin-right: 4px; vertical-align: -1px; }
.lock-help a { white-space: nowrap; }
/* Khối "Dữ liệu khoá" đầu ngăn kéo (20/10/2026, partials/locked_block.html): ô không sửa được gom
   một chỗ, chỉ đọc, lưới nhiều cột như thẻ hồ sơ (D64); lý do gộp ở cuối khối. */
.lock-block { background: var(--surface-secondary); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px 14px 10px; margin-bottom: 16px; }
.lock-block-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-body); color: var(--text-primary); }
.lock-block-head .ic-lock { color: var(--text-secondary); }
.lock-block-sub { color: var(--text-secondary); font-size: var(--fs-note); }
.lock-block .kv.grid { column-gap: 20px; padding-bottom: 0; }
.lock-block .kv.grid .kv-item { padding: 6px 0; }
.lock-block .kv.grid .kv-item.wide:not(:first-child) { border-top: 0; margin-top: 0; padding-top: 6px; }
.lock-block .kv-val { font-size: var(--fs-table); }
.lock-block-note { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: var(--fs-note); }
.lock-block-note + .lock-block-note { border-top: 0; margin-top: 2px; padding-top: 0; }
.lock-block-note b { font-weight: 600; color: var(--text-primary); }
.lock-block-note.err, .lock-block-note.err b { color: var(--error-text); }
.ui-lock-sample { max-width: 560px; }
input:disabled { background: var(--neutral-100); color: var(--text-secondary); cursor: not-allowed; }
.code-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-note); }
.code-suggest-label { color: var(--text-muted); }
.chip {
  min-height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-default);
  background: var(--surface-primary); color: var(--text-primary); font: inherit; font-size: var(--fs-body);
  font-weight: 600; letter-spacing: 0.04em; cursor: pointer;
}
.chip:hover { border-color: var(--brand-green-700); }
.chip[aria-pressed="true"] { background: var(--brand-green-50); border-color: var(--brand-green-700); color: var(--brand-green-700); }
fieldset.pages { border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px 18px; margin: 0 0 14px; }
/* Bảng quyền theo trang (D37): một dòng mỗi trang, bốn cột mức quyền; bấm cả ô để chọn. */
.access-wrap { margin: 6px 0 4px; border: 1px solid var(--border-subtle); border-radius: 10px; }
.table.perm-groups td.rights-col { min-width: 320px; }
.table.access-table th.lvl, .table.access-table td.lvl { width: 1%; text-align: center; white-space: nowrap; padding: 0; }
.table.access-table thead th.lvl { padding: 8px 10px; }
.table.access-table td.lvl label { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; cursor: pointer; }
.table.access-table td.lvl input:disabled { cursor: not-allowed; opacity: 0.35; }
.table.access-table tbody th {
  font-size: var(--fs-table); font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--text-primary); background: none; border-bottom: 1px solid var(--border-subtle);
  white-space: normal; padding: 6px 12px; min-width: 170px;
}
.table.access-table td { height: auto; padding: 0; }
.table.access-table tr.access-all th { font-weight: 600; }
.table.access-table tbody th .sub { display: block; font-size: var(--fs-note); font-weight: 400; color: var(--text-muted); }
.table.access-table tr.access-all > * { border-bottom: 2px solid var(--border-subtle); }
.table.access-table tr.access-group th {
  font-size: var(--fs-note); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-secondary); padding: 10px 12px 4px;
}
.table.access-table tbody tr.access-group:hover { background: none; }
.table.access-table tr.access-group th .sub { display: block; font-size: var(--fs-note); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.table.access-table tr.access-group td.lvl { padding-top: 10px; }
.table.access-table .lvl-short { display: none; }
@media (max-width: 600px) {
  .table-wrap .table.access-table { min-width: 0; }
  fieldset.pages { padding: 10px 8px; }
  .table.access-table .lvl-full { display: none; }
  .table.access-table .lvl-short { display: inline; }
  .table.access-table thead th.lvl { padding: 8px 6px; letter-spacing: 0; }
  .table.access-table td.lvl label { padding: 0 6px; }
  .table.access-table tbody th { min-width: 120px; padding: 6px 8px; }
}
.check { display: flex; align-items: center; gap: 8px; min-height: 34px; cursor: pointer; font-size: var(--fs-input); }
/* Trong .field, nhãn ô tích không theo kiểu nhãn ô nhập (khối, 13px đậm xám) mà cùng hàng với ô tích. */
.field label.check { display: flex; margin-bottom: 0; font-size: var(--fs-input); font-weight: 500; color: var(--text-primary); }
/* Nút chọn một (phương thức giao hàng): tròn, cùng cỡ và màu với ô chọn. */
input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer;
  border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
input[type="radio"]::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
input[type="radio"]:checked { border-color: var(--brand-green-700); }
input[type="radio"]:checked::after { background: var(--brand-green-700); }
/* Nhóm nút tròn gọn (D32, chủ dự án 16/10/2026 "tinh tế và nhỏ hơn"): nút 16px + chữ thường trên
   một hàng cao bằng ô nhập, không khung, không nền; lựa chọn đang chọn chỉ đậm hơn. */
.radio-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; min-height: 40px; }
.field label.radio, .radio {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin: 0; padding: 0;
  border: 0; background: none; color: var(--text-primary); font-size: var(--fs-input); font-weight: 400; cursor: pointer;
}
.radio input[type="radio"], .radio input[type="checkbox"] { width: 16px; height: 16px; }
.radio input[type="radio"]::after { width: 8px; height: 8px; }
.radio input[type="checkbox"] { border-radius: 4px; }
.radio input[type="checkbox"]::after { width: 10px; height: 10px; }
.radio:hover input { border-color: var(--brand-green-700); }
.radio:has(input:checked) { font-weight: 500; }
/* Lựa chọn không khớp ô liên quan (vd phương thức giao hàng NCC theo bên chở): mờ, không bấm được. */
.field label.radio:has(input:disabled), .radio:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.radio-group + .field-help { margin-top: 2px; }
.radio-group + .valid-hint { margin-top: 6px; }
.field-legend, .ef-legend { display: block; font-size: var(--fs-table); font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.ef-label .ef-legend { margin: 0; color: var(--text-primary); }
.field .req { color: var(--error); font-weight: 700; margin-left: 2px; }
.check.strong { font-weight: 600; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; }
.form-meta { max-width: 880px; margin: 12px 0; color: var(--text-muted); font-size: var(--fs-note); }
.danger-zone { max-width: 880px; display: flex; justify-content: flex-end; }

/* Nhóm trường trên form đối tác / công ty, và các dòng con (tài khoản ngân hàng, hợp đồng). */
.form-section { font-size: var(--fs-table); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-green-700); margin: 6px 0 12px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.form > .form-section:first-of-type, .form > .callout + .form-section { border-top: 0; padding-top: 0; }
.subform { margin: 6px 0 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.subform-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.subform-head h2 { font-size: var(--fs-table); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-green-700); }
.subform-row {
  position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; align-items: start;
  padding: 12px 12px 0; margin-bottom: 10px; border: 1px solid var(--border-default); border-radius: 12px;
}
.subform-row[hidden] { display: none; }
.subform-row.new { border-color: var(--brand-green-700); background: var(--brand-green-50); }
.subform-row .check-field { align-self: end; }
/* Nút × xoá dòng (partials/formset_row.html, data-formset-del): góc trên phải mỗi dòng, thay ô tích "Xoá dòng". */
.row-del {
  position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--text-muted);
}
.row-del:hover { background: var(--error-bg); color: var(--error-text); }
.row-del:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.subform-empty { margin: 0 0 10px; }
.subform-empty[hidden] { display: none; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0 0 16px; }
.facts dt { font-size: var(--fs-note); font-weight: 600; color: var(--text-secondary); }
.facts dd { margin: 2px 0 0; }
.source-log { max-width: none; }
.changes { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: var(--fs-table); }
@media (max-width: 860px) {
  .facts { grid-template-columns: 1fr; }
  .subform-row { grid-template-columns: 1fr; }
}

/* --- Đăng nhập: nền xanh đậm, logo trắng, biểu tượng thóc chìm (theo M1). --- */
body.auth { background: var(--brand-green-900); color: var(--text-inverse); min-height: 100vh; overflow-x: hidden; }
.auth-bg { position: fixed; z-index: 0; left: 50%; top: 90px; width: 490px; height: 490px; margin-left: -45px; pointer-events: none; }
.auth-wrap { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 0 28px; }
.auth-body { width: 100%; max-width: 334px; margin: auto 0; padding: 48px 0 24px; display: grid; gap: 28px; }
.auth-body .logo { display: block; width: 220px; height: 44px; }
.auth-title { display: grid; gap: 8px; }
.auth-title h1 { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.auth-title p { margin: 0; font-size: var(--fs-body); line-height: 22px; color: var(--text-inverse-muted); }
.auth-actions { display: grid; gap: 12px; }
.btn-auth {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 16px;
  border-radius: 14px; font: inherit; font-size: var(--fs-body); font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--surface-primary); color: var(--text-primary); border: 1px solid var(--surface-primary);
}
.btn-auth.outline { background: transparent; color: var(--text-inverse); border-color: var(--text-inverse-muted); }
.btn-auth .g { width: 20px; height: 20px; flex: none; }
.auth-note { border-radius: 14px; padding: 12px 14px; font-size: var(--fs-body); background: rgb(255 255 255 / 0.08); color: var(--text-inverse); }
.auth-note b { color: var(--brand-harvest-500); }
.auth-acc { display: flex; gap: 10px; align-items: center; font-size: var(--fs-table); }
.auth-acc .sub { color: var(--text-inverse-muted); font-size: var(--fs-note); }
.dev-login { display: grid; gap: 8px; padding-top: 16px; border-top: 1px dashed rgb(198 226 208 / 0.4); }
.dev-login label { font-size: var(--fs-note); color: var(--text-inverse-muted); }
.dev-login input[type="email"] { background: rgb(255 255 255 / 0.08); border-color: rgb(198 226 208 / 0.5); color: var(--text-inverse); min-height: 48px; border-radius: 14px; }
.auth-form { display: grid; gap: 8px; }
.auth-form label { font-size: var(--fs-table); font-weight: 500; color: var(--text-inverse-muted); }
.auth-form input { background: rgb(255 255 255 / 0.08); border-color: rgb(198 226 208 / 0.5); color: var(--text-inverse); min-height: 48px; border-radius: 14px; font-size: var(--fs-input); }
.auth-form .btn-auth { margin-top: 8px; }
.auth-err { font-size: var(--fs-table); color: var(--brand-harvest-500); }
.auth-form input::placeholder, .dev-login input::placeholder { color: var(--text-inverse-muted); }
.auth-foot { padding: 24px 0 30px; display: grid; gap: 4px; text-align: center; font-size: var(--fs-note); }
.auth-foot .domain { font-weight: 500; color: var(--text-inverse-muted); }
.auth-foot .help { font-weight: 600; color: var(--brand-harvest-500); }
.auth-foot .help a { color: inherit; }

/* --- Chế độ Xưởng (D57): dòng bảng 56px, nút to cho máy tính bảng ở xưởng. --- */
.density-factory .table td { height: 56px; }
.density-factory .table td .icon-btn, .density-factory .table td.star-col .star-btn { width: 40px; height: 40px; }
.density-factory .btn, .density-factory .icon-btn { min-height: 44px; }

/* --- Chế độ Gọn: nhiều dòng hơn trên màn hình máy bàn (dòng bảng 36px). ---
   Chỉ áp dụng màn hình rộng; điện thoại / máy tính bảng xưởng giữ nút 44px cho tay đeo găng. */
@media (min-width: 861px) {
  .density-compact .content { padding: 12px 24px 24px; }
  .density-compact .card { padding: 14px; margin-bottom: 12px; }
  .density-compact .card.flush { padding: 0; }
  .density-compact .card-head.pad { padding: 12px 14px 0; }
  .density-compact .card-head { margin-bottom: 10px; }
  .density-compact .kpi-row { gap: 12px; margin-bottom: 12px; }
  .density-compact .kpi { padding: 12px 14px; gap: 2px; }
  .density-compact .kpi .k-value { font-size: var(--fs-title); }
  /* Figma 25.0: dòng bảng Gọn cao đúng 36 px, kể cả dòng có nút sửa cuối dòng. */
  .density-compact .table th, .density-compact .table td { padding: 3px 10px; height: 36px; }
  .density-compact .table td .icon-btn { width: 28px; height: 28px; }
  .density-compact .table th { height: 32px; }
  .density-compact .list-row { padding: 6px 14px; }
  .density-compact .avatar.md { width: 30px; height: 30px; }
  .density-compact .btn { min-height: 32px; padding: 0 12px; }
  .density-compact .btn.sm { min-height: 28px; }
  .density-compact .icon-btn { width: 32px; height: 32px; }
  .density-compact input[type="text"], .density-compact input[type="email"], .density-compact input[type="password"], .density-compact input[type="date"], .density-compact input[type="time"], .density-compact input[type="number"], .density-compact select, .density-compact textarea { min-height: 32px; padding: 4px 10px; }
  .density-compact select { padding-right: 36px; background-position: right 10px center; }
  .density-compact .select-trigger { min-height: 32px; padding: 4px 10px; }
  /* Ô nhiều nhãn cao bằng ô nhập gọn (32px): ô gõ bên trong không theo ô nhập gọn. */
  .density-compact .tag-box { min-height: 32px; padding: 1px 6px; }
  .density-compact .tag-box input.tag-entry { min-height: 28px; padding: 0 4px; }
  .density-compact .date-btn { width: 28px; height: 28px; }
  .density-compact .field { margin-bottom: 10px; }
  .density-compact .check { min-height: 28px; }
  .density-compact .pill { padding: 2px 8px 2px 6px; }
}

/* --- Điện thoại: thiết kế riêng, không chỉ co lại ---------------------- */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  /* Điện thoại: rail thành ngăn kéo trắng, mọi nhóm trang mở sẵn. */
  .rail {
    position: fixed; z-index: 40; left: 0; top: 0; width: 300px; height: 100vh; overflow-y: auto;
    align-items: stretch; background: var(--surface-primary); color: var(--text-primary);
    transform: translateX(-100%); transition: transform 0.18s ease; box-shadow: 0 0 24px rgb(0 0 0 / 0.18);
  }
  .nav-open .rail { transform: none; }
  .nav-open .side-scrim { display: block; position: fixed; inset: 0; z-index: 30; background: rgb(17 24 20 / 0.4); }
  .rail-logo, .rail-btn, .rail-sep, .side-toggle, .fly-btn, .fly-foot, .rail-item:not(.fav) .fly-recent { display: none; }
  .rail-head { height: auto; justify-content: flex-start; border-bottom: 0; }
  .drawer-logo { display: block; padding: 20px 20px 8px; }
  .drawer-logo img { display: block; }
  .rail-nav, .rail-foot { flex: none; overflow: visible; align-items: stretch; padding: 0 8px; gap: 0; }
  .rail-foot { padding-bottom: 24px; border-top: 0; }
  .flyout, .rail-item.open > .flyout {
    display: block; position: static; width: auto; max-height: none; overflow: visible; animation: none;
    box-shadow: none; border: 0; border-radius: 0; padding: 0 0 8px;
  }
  /* Tên nhóm giống thanh bên mở rộng: gạch xanh + chữ in hoa. */
  .fly-head { height: auto; border-bottom: 0; padding: 12px 12px 4px; }
  .fly-body { overflow: visible; padding: 0 4px; }
  header.top { padding: 0 12px 0 8px; gap: 8px; }
  .crumb, .crumbs .sep { display: none; }
  /* Tài khoản: chỉ ảnh đại diện; menu rộng hết màn ngay dưới thanh trên. */
  .top-sep, .acct-who, .acct-btn > .acct-chev { display: none; }
  .price-toggle .pt-label { display: none; }
  .acct-btn { padding: 0 4px; }
  .acct-menu { position: fixed; left: 0; right: 0; top: var(--top-h); width: auto; max-height: calc(100vh - var(--top-h)); border-radius: 0 0 14px 14px; }
  .acct-item { min-height: 56px; }
  /* Nút thao tác trên thanh trên chỉ còn icon để giữ chỗ cho tiêu đề. */
  .top .actions .btn { font-size: 0; gap: 0; padding: 0 12px; }
  /* Hộp xác nhận xoá (thùng rác) nằm trong vùng nút này: nút trong hộp giữ chữ. */
  .top .actions .confirm-dialog .btn { font-size: var(--fs-touch); gap: 6px; padding: 0 14px; }
  .fly-search { height: 44px; }
  .fly-search .kbd { display: none; }
  .fly-search input[type="search"] { font-size: var(--fs-touch); }
  .content { padding: 16px 16px 24px; }
  .card { padding: 16px; }
  .grid-2 { grid-template-columns: 1fr; }
  .toolbar { flex-direction: column; align-items: stretch; }
  /* Ô nhập 16px để Safari trên iPhone không tự phóng to; nút và ô chọn cao ≥ 44px cho tay đeo găng. */
  input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], select, textarea { font-size: var(--fs-touch); min-height: 44px; }
  /* L43: ô chọn có tìm (SearchSelect) cao và cỡ chữ như ô chọn thường đứng cạnh nó. */
  .select-trigger { font-size: var(--fs-touch); min-height: 44px; }
  .date-btn { width: 40px; height: 40px; }
  .date-grid button { height: 40px; }
  .btn { min-height: 44px; }
  .btn.sm { min-height: 40px; }
  .nav-item, .fly-link { min-height: 44px; }
  .check { min-height: 44px; }
  .list-row { flex-wrap: wrap; }
  /* Điện thoại: tên + email chiếm cả hàng, nhãn vai trò / đăng nhập xuống dưới, không ép chữ xuống dòng. */
  .list-row .who { flex-basis: calc(100% - 96px); }
  .list-row .meta { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-left: 48px; text-align: left; }
  .table-wrap .table { min-width: 560px; }
  .table .first-col { position: sticky; left: 0; background: var(--surface-primary); z-index: 1; }
  .auth-bg { left: 150px; margin-left: 0; }
}

/* --- Trang lỗi (không có khung) ---------------------------------------- */
.center-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.error-card { width: 100%; max-width: 480px; margin: 0; padding: 24px; }
.error-card .logo { display: block; width: 140px; height: 28px; }
/* Nội dung thẻ lỗi căn trái, thẳng hàng logo (chủ dự án 08/11/2026 "căn lề trái"). */
.error-card .state { justify-items: start; text-align: left; max-width: none; margin: 0; padding: 32px 0 16px; }
.err-path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-table); background: var(--surface-secondary); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 1px 6px; color: var(--text-primary); overflow-wrap: anywhere; }
/* Trang 404 trong khung ERP (errors/not_found.html, chủ dự án 08/11/2026): khối chính + cột phải gợi ý. */
.nf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 16px; align-items: start; }
.nf-grid .card { margin-bottom: 0; }
.nf-side { display: grid; gap: 16px; }
.nf-body { display: grid; gap: 16px; padding: 20px 24px 24px; }
/* Số lỗi lớn (chủ dự án 08/11/2026 "lỗi 404 cần to và nổi bật hơn"): dùng --fs-display 48px. */
.err-code { font-size: var(--fs-display); line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--brand-green-700); font-variant-numeric: tabular-nums; }
.nf-head { display: flex; align-items: center; gap: 20px; padding: 24px; background: var(--brand-green-50); border-bottom: 1px solid var(--border-subtle); }
.nf-head .err-code { padding-right: 20px; border-right: 1px solid var(--neutral-300); }
.nf-head h2 { margin: 2px 0 0; }
.nf-path { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.nf-path-label, .nf-label { font-size: var(--fs-note); font-weight: 600; color: var(--text-secondary); }
.nf-why { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--text-secondary); }
.nf-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nf-search { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.nf-search-row { display: flex; gap: 8px; }
.nf-search-row input { flex: 1; min-width: 0; }
.nf-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; }
.nf-links.one { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.nf-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border-radius: 8px; color: var(--text-primary); text-decoration: none; }
.nf-link:hover { background: var(--brand-green-50); }
.nf-link:hover b { color: var(--brand-green-700); }
.nf-link > .ic:first-child { color: var(--brand-green-700); flex: none; }
.nf-link b { display: block; font-weight: 600; }
.nf-link .sub { display: block; font-size: var(--fs-note); color: var(--text-muted); overflow-wrap: anywhere; }
.nf-link .nf-go { margin-left: auto; color: var(--text-muted); flex: none; }
.nf-sub { padding: 12px 8px 4px; }
@media (max-width: 900px) {
  .nf-grid { grid-template-columns: minmax(0, 1fr); }
  .nf-body { padding: 16px; }
  .nf-head { padding: 20px 16px; gap: 16px; }
  .nf-head .err-code { padding-right: 16px; }
}

/* --- Thanh lọc trên bảng danh mục (tìm + trạng thái) ------------------- */
.filters { justify-content: flex-start; flex-wrap: wrap; align-items: flex-end; }
/* Ô lọc có tiêu đề (D35): tiêu đề nhỏ nằm trên ô, các ô trên một hàng căn đáy với nhau. */
.filter-field { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; }
.filter-field > label { font-size: var(--fs-note); line-height: var(--lh-note); font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
/* Bảng màu trạng thái trên /giao-dien/ (D33). */
.status-map { display: grid; gap: 8px; margin: 0; }
.status-map-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 16px; align-items: center; }
.status-map dt { font-size: var(--fs-note); font-weight: 600; color: var(--text-secondary); }
.status-map dd { margin: 0; }
@media (max-width: 640px) { .status-map-row { grid-template-columns: minmax(0, 1fr); } }
.filter-search {
  display: flex; align-items: center; gap: 8px; width: 360px; max-width: 100%; height: 40px; padding: 0 12px;
  background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 10px; color: var(--text-muted);
}
.filter-search:focus-within { outline: 2px solid var(--brand-green-700); outline-offset: 1px; }
.filter-search input[type="search"] {
  flex: 1; min-width: 0; min-height: 0; height: auto; padding: 0; border: 0; border-radius: 0;
  background: transparent; font: inherit; font-size: var(--fs-input); color: var(--text-primary); outline: none;
}
.filters select { width: auto; min-width: 180px; }
/* Chờ duyệt tạm ngưng (D19): nút lọc trên thanh công cụ, thanh chọn nhiều, ghi chú trên form sửa. */
.pause-link { margin-left: auto; border-color: var(--warning); color: var(--warning-text); }
.pause-link.on { background: var(--warning-bg); }
.pause-review .card-head p { margin: 0; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 20px 12px; }
.bulk-bar .spacer { flex: 1; }
.table th.pick, .table td.pick { width: 1%; padding-right: 0; }
.table td.actions .btn + .btn { margin-left: 6px; }
.table td.empty { text-align: center; color: var(--text-muted); padding: 32px 12px; }
/* Bảng danh sách trống (D52, partials/empty_table.html): biểu tượng, tiêu đề, gợi ý, một nút. */
.table tr[data-href]:focus { outline: none; }
.table tr[data-href]:focus-visible td { background: var(--brand-green-50); box-shadow: inset 0 1px 0 var(--brand-green-700), inset 0 -1px 0 var(--brand-green-700); }
.table tr.empty-row td { padding: 0; border-bottom: 0; }
.table tr.empty-row:hover td { background: none; }
.empty-table { display: grid; justify-items: center; gap: 6px; padding: 48px 16px 52px; text-align: center; }
.empty-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 50%; background: var(--brand-green-50); color: var(--brand-green-700); }
.empty-ic .ic { width: 24px; height: 24px; }
.empty-title { margin: 0; font-size: var(--fs-heading); font-weight: 700; color: var(--text-primary); }
/* Câu gợi ý xuống dòng dù ô bảng đặt nowrap (L691: bị cắt ở mép phải trên điện thoại). */
.empty-text { max-width: 420px; margin: 0 0 8px; white-space: normal; font-size: var(--fs-table); color: var(--text-secondary); }
.empty-text:empty { display: none; }
.table-foot { margin: 8px 2px 0; font-size: var(--fs-table); color: var(--text-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Ô tìm dùng chung (static/js/live-search.js, apps/core/search.py): gợi ý dưới ô tìm. Cỡ chữ theo
   thang D30 (--fs-*). Mỗi dòng gợi ý một hàng, chữ dài thì "…" (không rơi chữ lẻ). */
.live-search { position: relative; }
.live-search.loading .ic-search { opacity: .45; }
.live-swap { display: contents; }
.live-pop {
  position: absolute; left: -1px; top: calc(100% + 6px); z-index: 60;
  width: max(100% + 2px, 420px); max-width: calc(100vw - 32px); overflow: hidden;
  background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: 12px;
  box-shadow: 8px 8px 28px rgb(0 0 0 / 0.16); color: var(--text-primary); cursor: default;
}
.live-pop[hidden] { display: none; }
.live-pop ul { max-height: min(400px, 60vh); overflow-y: auto; margin: 0; padding: 6px; list-style: none; }
.live-pop ul:empty { display: none; }
.live-pop li { display: grid; gap: 2px; min-width: 0; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.live-pop li.active { background: var(--brand-green-50); }
.live-pop .sp-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.live-pop .sp-code { flex: none; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.live-pop .sp-name, .live-pop .sp-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-pop .sp-sub { color: var(--text-muted); font-size: var(--fs-table); }
.live-pop b { font-weight: 700; color: var(--text-primary); }
.live-pop-foot { margin: 0; padding: 8px 16px; font-size: var(--fs-note); border-top: 1px solid var(--border-subtle); color: var(--text-muted); text-wrap: pretty; }
.live-pop ul:empty + .live-pop-foot { border-top: 0; }
@media (min-width: 861px) {
  .density-compact .filter-search { height: 32px; }
}
@media (max-width: 860px) {
  .filter-search { width: 100%; height: 44px; }
  .filter-search input[type="search"] { font-size: var(--fs-touch); }
  .filters select, .filters .select { width: 100%; }
  .pause-link { margin-left: 0; }
  .bulk-bar { padding: 0 16px 12px; }
  .bulk-bar .spacer { display: none; }
}

/* --- Hồ sơ khách hàng / NCC (Figma 25 · SX-D3 xem, SX-D4 sửa theo mục) ------------------
   3 cột: mục lục 212px | nội dung | việc cần xử lý + lịch sử 520px (1920). Hẹp thì xếp chồng. */
.pager { display: flex; align-items: center; gap: 4px; }
.pager-pos { font-size: var(--fs-table); font-weight: 500; color: var(--text-secondary); margin-right: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sq-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none;
  border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-primary);
  color: var(--text-primary); text-decoration: none; cursor: pointer;
}
.sq-btn.lg { width: 36px; height: 36px; }
.sq-btn:hover { border-color: var(--brand-green-700); color: var(--brand-green-700); }
.sq-btn.off { color: var(--neutral-400); cursor: default; }
.sq-btn.off:hover { border-color: var(--border-default); color: var(--neutral-400); }
/* Số trang dưới bảng danh sách (D53, partials/pagination.html). */
.pager.pages { flex-wrap: wrap; justify-content: flex-end; }
.pager.pages .sq-btn { width: auto; min-width: 32px; padding: 0 8px; font-size: var(--fs-table); font-variant-numeric: tabular-nums; }
.pager.pages .sq-btn.on { border-color: var(--brand-green-700); background: var(--brand-green-700); color: var(--text-inverse); font-weight: 700; cursor: default; }
.page-gap { min-width: 20px; text-align: center; color: var(--text-muted); font-size: var(--fs-table); }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 240px; padding: 6px; display: grid; gap: 2px;
  background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: 8px 8px 28px rgb(0 0 0 / 0.16);
}
.menu-list a, .menu-list button {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 8px;
  background: none; font: inherit; font-size: var(--fs-body); color: var(--text-primary); text-decoration: none; cursor: pointer; text-align: left; width: 100%;
}
.menu-list a:hover, .menu-list button:hover { background: var(--brand-green-50); }
.menu-list .ic { color: var(--text-secondary); }
.menu-list button.danger, .menu-list a.danger { color: var(--error-text); }
.menu-list button.danger .ic, .menu-list a.danger .ic { color: var(--error); }
/* Lối tắt trên thanh trên (hồ sơ khách → Đơn hàng): màn rộng là nút, màn hẹp nằm trong menu "Thao tác khác". */
.menu-list a.top-narrow { display: none; }
@media (max-width: 1279px) {
  .top .actions .top-wide { display: none; }
  .menu-list a.top-narrow { display: flex; }
}

/* Khuôn trang hồ sơ dùng chung (templates/layouts/record.html): nội dung (đầu hồ sơ + các mục) và cột
   phải; .has-toc thêm cột mục lục bên trái (hồ sơ khách hàng / NCC). */
.rec-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 24px; align-items: start; }
.p-log > .card { margin: 0; max-width: none; padding-inline: 20px; } /* thẳng lề chữ với các mục .sec */
.p-log .history { display: grid; gap: 12px; scroll-margin-top: calc(var(--top-h) + 20px); }
.p-log .history .subform-head { margin: 0; }
input.ls-all[type="checkbox"] { display: none; }
@media (max-width: 1279px) {
  .rec-page:not(.has-toc) { grid-template-columns: minmax(0, 1fr); }
}
.rec-page.has-toc { grid-template-columns: 212px minmax(0, 1fr) minmax(360px, 520px); }
/* Hồ sơ không có cột phải (vd Thông tin công ty): cột giữa lấy hết bề ngang (D64). */
.rec-page.has-toc:has(> .p-rail:empty) { grid-template-columns: 212px minmax(0, 1fr); }
.rec-page.has-toc > .p-rail:empty { display: none; }
.p-main, .p-rail, .p-head, .p-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; align-content: start; }
.rail-card, .sec-pair { grid-template-columns: minmax(0, 1fr); }
/* Nguồn dữ liệu, lịch sử thay đổi: luôn ở cuối cột nội dung giữa, cùng mép trái / phải với các mục
   phía trên (D66, chủ dự án 17/10/2026). Cột phải trống thì nội dung chiếm hết bề ngang. */
.p-log { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.p-log:empty, .p-rail:empty { display: none; }
.rec-page:not(.has-toc):has(> .p-rail:empty) { grid-template-columns: minmax(0, 1fr); }
/* Bảng lịch sử: mặc định chỉ dòng đầu; ô "Xem thêm" (checkbox ẩn #ls-all) mở các dòng còn lại. */
.ls-title { display: flex; gap: 8px; align-items: baseline; }
.ls-title .tl-dot { margin-top: 0; align-self: center; }
.ls-all:not(:checked) ~ .table-wrap .ls-more, .ls-all:not(:checked) ~ .tl-more .ls-load,
.ls-all:not(:checked) ~ .tl-more .ls-load + .muted { display: none; }
/* Lịch sử sản xuất trên hồ sơ mặt hàng: bảng 6 cột vừa cột giữa (~700px ở màn 1440). */
.table.prod-table th, .table.prod-table td { padding-left: 8px; padding-right: 8px; }
.prod-sum { margin: 0 0 8px; }
/* Ca thấp cần xử lý (SX2, 04/11/2026): ô xử lý gọn trong cột, căn cứ nguyên nhân xuống dòng. */
.alert-cause { min-width: 180px; max-width: 240px; }
.alert-act { min-width: 200px; }
.alert-act .inline-form { display: flex; flex-direction: column; gap: 6px; align-items: stretch; margin: 4px 0 0; }
.alert-act .inline-form .input { width: 100%; min-width: 0; }
.alert-act .inline-form .btn { align-self: flex-start; }
.sec-head.sub { margin-top: 20px; }

/* Mục lục bên trái + thẻ "Hồ sơ đầy đủ N%". */
.p-toc {
  position: sticky; top: calc(var(--top-h) + 20px); display: grid; gap: 2px; min-width: 0; align-content: start;
  /* Mở "Xem thêm mục thiếu" làm cột dài hơn màn hình: cuộn trong cột, không bị cắt đáy. */
  max-height: calc(100vh - var(--top-h) - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
/* Figma SX-D3: thẻ trắng bo 12 px; tiêu đề xanh có gạch nhỏ như tên nhóm ở thanh bên (.fly-title). */
/* Cột mục lục co đúng bề ngang cột (188 px ở 1440 px): thẻ không tràn ra và bị cắt mép phải. */
.p-toc { grid-template-columns: minmax(0, 1fr); }
.toc-card { display: grid; gap: 6px; padding: 12px 8px 10px; border-radius: 12px; background: var(--surface-primary); border: 1px solid var(--border-subtle); min-width: 0; }
.toc-title {
  display: flex; align-items: center; gap: 8px; padding: 0 8px 2px;
  font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-green-700);
}
.toc-title::before { content: ""; flex: none; width: 10px; height: 2px; border-radius: 1px; background: currentColor; }
.toc { display: grid; gap: 1px; }
.toc-link {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; min-height: 30px;
  color: var(--text-primary); text-decoration: none; font-size: var(--fs-table); font-weight: 500; line-height: 1.3;
}
.toc-link .t { flex: 1; min-width: 0; }
.toc-link:hover { background: var(--neutral-100); }
/* Mục đang xem: nền xanh đậm hơn + vạch xanh bên trái để nổi rõ so với hover (chủ dự án 15/10/2026). */
.toc-link.on { background: #e1f0e6; color: var(--brand-green-800); font-weight: 700; }
/* Vạch thẳng (D38): bóng inset trên nền bo góc bị cong như dấu ngoặc, nên vẽ bằng ::before. */
.toc-link.on::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: var(--accent-w); border-radius: 0; background: var(--brand-green-700); }
.ui-toc { max-width: 280px; }
.ui-toast-sample { max-width: 400px; margin-top: 12px; animation: none; }
.toc-link.on:hover { background: #d5eadc; }
/* Số đếm là pill nhỏ: xám = số thường, vàng nhạt = còn thiếu, đỏ nhạt = hết hạn (Figma SX-D3). */
.toc-meta {
  flex: none; min-width: 18px; padding: 1px 6px; border-radius: 999px; text-align: center;
  font-size: var(--fs-note); font-weight: 600; line-height: 16px; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--neutral-100); color: var(--text-secondary);
}
.toc-meta.warn { background: var(--warning-bg); color: var(--warning-text); }
.toc-meta.error { background: var(--error-bg); color: var(--error-text); }
.toc-warn { color: var(--warning); }
.done-card { margin-top: 14px; display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: var(--surface-primary); border: 1px solid var(--border-subtle); }
.done-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.done-title { font-size: var(--fs-body); font-weight: 700; }
.done-meter { display: flex; align-items: center; gap: 8px; }
.done-meter .done-bar { flex: 1; }
.done-pct { flex: none; font-size: var(--fs-note); line-height: 16px; color: var(--text-secondary); }
.done-hint { margin: 0; font-size: var(--fs-note); line-height: 17px; color: var(--text-secondary); }
.done-bar { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--neutral-100); color: var(--brand-green-700); }
.done-bar::-webkit-progress-bar { background: var(--neutral-100); border-radius: 999px; }
.done-bar::-webkit-progress-value { background: var(--brand-green-700); border-radius: 999px; }
.done-bar::-moz-progress-bar { background: var(--brand-green-700); border-radius: 999px; }
.done-missing { margin: 0; font-size: var(--fs-note); line-height: 17px; color: var(--text-secondary); }
/* Trường thiếu nhóm theo mục: tiêu đề mục + số thiếu, mỗi trường một dòng có chấm đỏ nhỏ. */
.miss { display: grid; gap: 12px; padding-top: 4px; border-top: 1px solid var(--border-subtle); }
.miss-group { display: grid; gap: 4px; min-width: 0; }
.miss-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; }
.miss-title { min-width: 0; white-space: nowrap; font-size: var(--fs-note); font-weight: 600; line-height: 17px; color: var(--text-primary); }
.miss-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.miss-list li { position: relative; padding-left: 12px; font-size: var(--fs-note); line-height: 17px; color: var(--text-secondary); overflow-wrap: anywhere; }
.miss-list li::before { content: ""; position: absolute; left: 1px; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--error); }
/* Dòng thiếu là việc cần nhập, không phải đường dẫn: chữ thường, gạch chân khi trỏ chuột. */
.miss-link { color: var(--text-primary); font-weight: 400; text-decoration: none; }
.miss-link:hover, .miss-link:focus-visible { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }
.miss-more { padding-top: 0; border-top: 0; }

/* Đầu hồ sơ (Figma SX-D3 "Record header"): ô logo mã, tên, tên quốc tế, trạng thái, mã khoá, MST +
   nhãn Cục Thuế; dưới vạch ngăn là hàng tab vai trò sát đáy thẻ. */
.rec-head { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 0; border-radius: 14px; background: var(--surface-primary); border: 1px solid var(--border-subtle); min-width: 0; }
.rec-top { display: flex; align-items: center; gap: 18px; min-width: 0; }
/* Đầu hồ sơ không có hàng tab dưới (đơn hàng...): chừa lề đáy như lề trên. */
.rec-top:last-child { padding-bottom: 20px; }
.logo-tile {
  flex: none; width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--brand-green-900); color: var(--brand-harvest-500); font-size: var(--fs-title-sm); font-weight: 800; letter-spacing: 0.02em;
  white-space: nowrap;
}
.rec-main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
/* Ô điều khiển đầu hồ sơ (block record_aside: chọn tháng...): cột phải căn giữa; tên và dòng thông tin
   luôn sát nhau, không bị ô có nhãn cao hơn đẩy xuống (chủ dự án 05/11/2026). Hẹp thì xuống hàng dưới. */
.rec-top:has(> .rec-aside) { flex-wrap: wrap; }
.rec-top:has(> .rec-aside) > .rec-main { flex: 1 1 240px; }
.rec-aside { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-left: auto; }
.rec-aside > form { margin: 0; }
/* Dòng phụ trống (tên quốc tế, ghi chú... chưa có) không chiếm chỗ và không cộng thêm khoảng cách lưới. */
.rec-intl:empty, .rec-meta:empty, .rec-title:empty, .rec-aside:empty, .stat-sub:empty, .page-desc:empty, .sec-sub:empty { display: none; }
.rec-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rec-name { font-size: var(--fs-title); font-weight: 800; letter-spacing: -0.005em; line-height: 1.25; overflow-wrap: anywhere; text-wrap: balance; }
.pill.lg { font-size: var(--fs-table); padding: 3px 10px 3px 8px; }
.rec-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--fs-table); font-weight: 500; color: var(--text-secondary); }
.rec-meta .m { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.rec-meta b { color: var(--text-primary); font-weight: 700; overflow-wrap: anywhere; }
.rec-meta .m:first-child, .rec-meta .m-code { gap: 4px; }
.rec-meta > .pill { flex: none; }
.rec-meta .ic-lock { color: var(--text-secondary); }
.rec-meta .add { font-weight: 600; color: var(--brand-green-700); text-decoration: none; }
.rec-meta .add:hover { text-decoration: underline; }
.rec-meta a.m-updated { color: inherit; text-decoration: none; }
.rec-meta a.m-updated:hover b { text-decoration: underline; }
.rec-intl { font-size: var(--fs-table); font-weight: 500; letter-spacing: 0.02em; color: var(--text-secondary); overflow-wrap: anywhere; text-wrap: pretty; }

/* Dải chỉ số. */
/* 5 ô bằng nhau trên một hàng từ 1024 px (Figma SX-D3); điện thoại 2 cột. Cột nội dung có thể hẹp
   (1440 px khi thanh bên mở rộng 272 px) nên ô co chữ theo bề ngang dải (container query). */
.stats { container-type: inline-size; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: 14px; background: var(--surface-primary); border: 1px solid var(--border-subtle); overflow: hidden; }
.stat { display: grid; gap: 2px; align-content: start; padding: 14px 18px; min-width: 0; box-shadow: 1px 0 0 var(--border-subtle), 0 1px 0 var(--border-subtle); }
.stat-label { font-size: var(--fs-table); font-weight: 500; color: var(--text-secondary); }
/* Giá trị luôn hiện đủ, không cắt "…": ô hẹp thì xuống dòng giữa hai từ, chia đều hai dòng
   (balance) để không còn một từ lẻ ở dòng cuối ("Thanh toán ngay" → "Thanh / toán ngay"). */
.stat-value { font-size: var(--fs-title-sm); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: break-word; text-wrap: balance; }
.stat-sub { font-size: var(--fs-table); font-weight: 500; color: var(--text-secondary); text-wrap: balance; }
.stat-badge { margin: 2px 0; }
/* Chỉ khi 5 cột (≥ 861 px); tiền tố .stats để thắng các luật @media cùng độ ưu tiên đặt phía sau. */
@media (min-width: 861px) {
  @container (max-width: 720px) {
    .stats .stat { padding: 12px 10px; }
    .stats .stat-label, .stats .stat-sub { font-size: var(--fs-note); }
    .stats .stat-value { font-size: var(--fs-heading); }
  }
  @container (max-width: 560px) {
    .stats .stat { padding: 10px 8px; }
    .stats .stat-value { font-size: var(--fs-body); }
  }
}
.stat-sub.warning { color: var(--warning-text); }
.stat-sub.error { color: var(--error-text); }

/* Mục: tiêu đề chữ hoa xanh, "Sửa mục này", trường dạng đọc 2 cột hoặc nhãn trái. */
.sec { background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 0 20px 6px; min-width: 0; scroll-margin-top: calc(var(--top-h) + 20px); }
.sec.flagged { border-color: var(--warning-border); }
.sec.table-sec { padding-bottom: 12px; }
.sec-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sec-head { display: flex; align-items: center; gap: 8px; padding: 16px 0 10px; min-width: 0; }
.sec-head h2 { font-size: var(--fs-table); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-green-700); }
.sec-head .spacer { flex: 1; }
/* Thẻ bảng (Tài khoản, Hợp đồng): tiêu đề ngắn không bẻ dòng; nút thêm xuống hàng dưới khi hẹp. */
.table-sec .sec-head { flex-wrap: wrap; row-gap: 6px; }
.table-sec .sec-head h2 { white-space: nowrap; }
.sec-count { font-size: var(--fs-table); font-weight: 600; color: var(--text-secondary); }
/* Dòng đầu bảng nằm trong thân một mục (vd bảng văn bản của mục Hợp đồng, phụ lục và ghi chú). */
.sec-sub-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.doc-block { margin-bottom: 16px; }
.sec-sub { font-size: var(--fs-table); font-weight: 500; color: var(--text-secondary); }
.sec-edit { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-table); font-weight: 600; color: var(--brand-green-700); text-decoration: none; white-space: nowrap; padding: 4px 2px; }
.sec-edit:hover { text-decoration: underline; }
.sec-empty { margin: 0 0 12px; color: var(--text-secondary); }
/* Nút của thẻ (nút "Cột", nút viền "+ Thêm …", nút phụ thứ hai) dồn bên phải tiêu đề, luôn hiện
   khi sửa được, kể cả lúc thẻ trống; điện thoại: xuống hàng dưới tiêu đề (xem @media 640px). */
.sec-actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
/* Trạng thái trống dùng chung (partials/empty_state.html): một dòng chữ xám, không link. */
.empty-state { margin: 0 0 12px; font-size: var(--fs-body); color: var(--text-secondary); }
.kv { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kv-item { display: grid; gap: 3px; align-content: start; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); min-width: 0; }
.kv-item.wide { grid-column: 1 / -1; }
/* Dòng cuối của thẻ không có gạch dưới. */
.kv-item:last-child { border-bottom: 0; }
/* Lưới nhãn/giá trị gọn (quy tắc chung, chủ dự án 17/10/2026: tận dụng bề ngang, hiện thông tin
   gọn): số cột tự tăng theo bề ngang thẻ (mỗi ô ≥ 160 px, điện thoại ≥ 140 px), giá trị ngắn
   nằm cạnh nhau; không kẻ gạch dưới từng ô; ô cả hàng (địa chỉ, ghi chú) có một gạch phân cách
   phía trên. Mọi mục layout "grid" (hồ sơ đối tác, đơn hàng, mặt hàng, người dùng) dùng lưới này. */
.kv.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); column-gap: 24px; padding-bottom: 4px; }
.kv.grid .kv-item { border-bottom: 0; padding: 8px 0; }
.kv.grid .kv-item.span2 { grid-column: span 2; }
.kv.grid .kv-item.wide:not(:first-child) { border-top: 1px solid var(--border-subtle); margin-top: 4px; padding-top: 12px; }
.kv dt { display: flex; align-items: center; gap: 6px; font-size: var(--fs-table); font-weight: 500; color: var(--text-secondary); }
.kv dd { margin: 0; min-width: 0; }
.kv-val { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-body); font-weight: 500; overflow-wrap: anywhere; }
.kv-val .v { min-width: 0; }
.kv-val .v.warn { color: var(--text-secondary); }
.kv-val .empty { font-weight: 400; color: var(--text-secondary); }
.kv-val .dot { color: var(--text-secondary); margin: 0 -4px; }
.kv-val .add { font-size: var(--fs-table); font-weight: 600; color: var(--brand-green-700); text-decoration: none; }
.kv-val .add:hover { text-decoration: underline; }
.kv-val .ic-alert { color: var(--warning); }
/* Nhãn bên trái (mục nửa bề ngang). */
.kv.rows { grid-template-columns: minmax(0, 1fr); }
.kv.rows .kv-item { grid-template-columns: minmax(110px, 170px) minmax(0, 1fr); gap: 12px; padding: 9px 0; align-items: start; }
.kv.rows .kv-val { font-size: var(--fs-body); font-weight: 600; }
.kv.rows .kv-val .empty { font-size: var(--fs-body); }
.kv.rows .kv-val .add { font-weight: 500; }
/* Phiên bản bao: nút Spec PDF + Sửa gom thành cụm bên phải mỗi dòng (chủ dự án 03/11/2026). */
.kv.rows.versions .kv-item { grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) 112px; }
/* Desktop: Sửa trên, Spec PDF dưới, cùng bề rộng, thẳng hàng; điện thoại: ngang hàng (chủ dự án 03/11/2026). */
.ver-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.ver-actions .btn { white-space: nowrap; justify-content: flex-start; }
/* Spec thuộc bản duyệt khác bản ảnh (vd ảnh Bản 9, spec bản 8): ghi nhỏ dưới nút (L568). */
.ver-note { text-align: center; }
/* Thông tin chung gộp Địa chỉ (Figma SX-D3): tên nhãn trái cả hàng, 4 trường ngắn một hàng, tiêu
   đề con "Địa chỉ" (neo #dia-chi, cờ Cần kiểm tra), địa chỉ nhãn trái, chip "Di chuyển N ngày". */
.kv.info { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kv.info .kv-item:not(.wide) { padding-right: 12px; }
.kv.info .kv-item:last-child { border-bottom: 1px solid var(--border-subtle); }
.kv.info .kv-item.wide, .kv.rows.part .kv-item { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 9px 0; align-items: start; }
.kv.rows.part .kv-item.has-chip { grid-template-columns: 120px minmax(0, 1fr) auto; }
/* Phần Địa chỉ dạng lưới (Đ2): chip "Di chuyển N ngày" bên phải nhãn, giá trị dòng dưới. */
.kv.grid .kv-item.has-chip { grid-template-columns: minmax(0, 1fr) auto; }
.kv.grid .kv-item.has-chip dd { grid-column: 1 / -1; grid-row: 2; }
.kv.grid .kv-item.has-chip .kv-chip { grid-column: 2; grid-row: 1; }
/* Ô gọn thành một dòng link (địa chỉ cũ khi đối tác không có HĐ ký trước sáp nhập). */
.kv .kv-item.kv-collapsed { display: block; padding: 4px 0; }
.kv-collapsed .add { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-table); font-weight: 500; color: var(--brand-green-700); text-decoration: none; }
.kv-collapsed .add:hover { text-decoration: underline; }
.sec-part { display: flex; align-items: center; gap: 8px; padding: 14px 0 2px; scroll-margin-top: calc(var(--top-h) + 20px); }
/* Thông tin chung 4 cột cố định (chủ dự án 18/10/2026 "gọn gàng chuyên nghiệp hơn"): ô ngắn 1 cột,
   ô dài (tên, địa chỉ, kho, quãng đường) 2 cột đứng thành cặp; phần con (Địa chỉ, Đăng ký kinh
   doanh) cách bằng một vạch mảnh; nguồn Cục Thuế một dòng cuối thẻ kèm ổ khoá. */
.kv.grid.cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kv.grid.cols4 .kv-item.span2 { grid-column: span 2; }
.kv.grid.cols4 + .sec-part, .sec .reg-in + .sec-part { margin-top: 6px; border-top: 1px solid var(--border-subtle); }
.kv.grid.cols4 + .sec-part { padding-top: 14px; }
.reg-in { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 24px; row-gap: 8px; align-items: start; padding: 8px 0 4px; }
.reg-in .reg-file { margin-bottom: 0; }
.reg-in-side { display: grid; gap: 6px; padding-top: 4px; color: var(--text-secondary); }
.reg-in-side p { margin: 0; }
.reg-in-side .reg-search { margin: 0; }
.sec-foot .ic-lock { margin-right: 4px; vertical-align: -1px; }
.rec-abbr { white-space: nowrap; }
.sec-part .sec-edit { margin-left: auto; }
.sec-part-title { margin: 0; font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.toc-link.sub { padding-left: 22px; font-size: var(--fs-note); }
.toc-link.sub .t::before { content: "•"; margin-right: 6px; }
.pd-part { margin: 6px 0 -4px; padding-top: 14px; border-top: 1px solid var(--border-subtle); font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
@media (max-width: 1279px) {
  .kv.info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .kv.grid.cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .kv.grid.cols4 .kv-item.span2 { grid-column: 1 / -1; }
  .reg-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .kv.info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv.info .kv-item.wide, .kv.rows.part .kv-item { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .kv.rows.part .kv-item.has-chip { grid-template-columns: minmax(0, 1fr) auto; }
  .kv.rows.part .kv-item.has-chip dd { grid-column: 1 / -1; grid-row: 2; }
  .kv.rows.part .kv-item.has-chip .kv-chip { grid-column: 2; grid-row: 1; }
}

/* Mục đang sửa trong ngăn kéo: viền vàng trên hồ sơ phía sau. */
/* Viền dày 2px vẽ bằng bóng (inset 1px + viền 1px sẵn có), không đổi kích thước thẻ: nội dung không xô. */
.sec.target { border-color: var(--brand-harvest-500); box-shadow: inset 0 0 0 1px var(--brand-harvest-500), 0 0 0 4px rgb(226 168 43 / 0.18); }

/* Ô sửa: nhãn, "Đã sửa" (viền vàng 2px như Figma 25 D3), "Trước: giá trị cũ". */
.ef { display: grid; gap: 6px; min-width: 0; align-content: start; }
.ef > .field { margin-bottom: 0; }
.ef-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-table); font-weight: 600; color: var(--text-primary); }
.ef-label label { margin: 0; font-size: var(--fs-table); font-weight: 600; color: var(--text-primary); }
.ef .req { color: var(--error); font-weight: 700; }
.ef.is-indefinite .req { display: none; }
.tag-changed { display: none; padding: 1px 6px; border-radius: 4px; background: var(--warning-bg); color: var(--warning-text); font-size: var(--fs-note); font-weight: 700; }
.ef.is-changed .tag-changed { display: inline-block; }
.ef.is-changed input[type="text"], .ef.is-changed input[type="email"], .ef.is-changed input[type="url"], .ef.is-changed textarea, .ef.is-changed .select-trigger, .ef.is-changed select { border-color: var(--brand-harvest-500); box-shadow: inset 0 0 0 1px var(--brand-harvest-500); }
.ef.is-changed .tag-box { border-color: var(--brand-harvest-500); box-shadow: inset 0 0 0 1px var(--brand-harvest-500); }
.ef-was { display: none; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--surface-secondary); color: var(--text-secondary); font-size: var(--fs-table); overflow-wrap: anywhere; }
.ef-was b { font-size: var(--fs-note); margin-right: 6px; }
.ef.is-changed .ef-was { display: block; }
.ef .field-help, .ef .field-error { margin-top: 0; }
.input-unit { position: relative; }
.input-unit input { padding-right: 56px; }
.input-unit .unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: var(--fs-input); font-weight: 500; color: var(--text-secondary); pointer-events: none; }
.locked-value { display: flex; align-items: center; min-height: 40px; font-size: var(--fs-body); font-weight: 600; }

/* Ngăn kéo sửa hồ sơ (SX-D4: trượt từ phải, rộng 600, 250 ms; nền mờ 36% vẫn thấy hồ sơ).
   Điện thoại (SX-M1): bảng trượt từ dưới, cao 88%, thanh kéo xám, footer cố định. */
/* Giữ sẵn chỗ thanh cuộn: khi ngăn kéo mở và khoá cuộn trang, thanh cuộn biến mất
   mà nội dung phía sau không bị xô sang phải (chủ dự án báo 27/10/2026). */
html { scrollbar-gutter: stable; }
html:has(.pd-root:not([hidden])) { overflow: hidden; }
.pd-root { position: fixed; inset: 0; z-index: 70; }
.pd-scrim { position: absolute; inset: 0; background: rgb(10 26 18 / 0.36); cursor: default; }
.pd {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(600px, 100%); display: flex; flex-direction: column;
  background: var(--surface-primary); box-shadow: -12px 0 40px rgb(0 0 0 / 0.22);
}
/* Ngăn kéo rộng cho form có dòng con (Thêm đơn hàng, 03/11/2026); điện thoại vẫn là bảng trượt từ dưới. */
@media (min-width: 861px) { .pd.pd-wide { width: min(960px, 100%); } }
.pd-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pd:focus { outline: none; }
.pd { -webkit-tap-highlight-color: transparent; }
.pd-default { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.pd-anim .pd-scrim { animation: pd-fade 250ms ease-out both; }
.pd-anim .pd { animation: pd-in-right 250ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pd-root.closing .pd-scrim { animation: pd-fade 200ms ease-in reverse both; }
.pd-root.closing .pd { animation: pd-out-right 200ms ease-in both; }
@keyframes pd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pd-in-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes pd-out-right { from { transform: none; } to { transform: translateX(100%); } }
@keyframes pd-in-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pd-out-down { from { transform: var(--pd-drag, none); } to { transform: translateY(100%); } }

.pd-head { flex: none; display: grid; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--border-subtle); min-width: 0; }
.pd-grab { display: none; }
.pd-titlebar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pd-titles { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pd-eyebrow { font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-green-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-title { font-size: var(--fs-title); font-weight: 800; letter-spacing: -0.005em; line-height: 1.3; overflow-wrap: anywhere; }
.pd-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid var(--border-default); border-radius: 10px; color: var(--text-primary); background: var(--surface-primary);
}
.pd-x:hover { border-color: var(--brand-green-700); color: var(--brand-green-700); }
.pd-x:focus-visible { outline: 2px solid var(--brand-green-700); outline-offset: 1px; }
/* Tab chọn dùng chung (chủ dự án 30/10/2026, quy tắc chung "Tab"): khay xám bo tròn, tab đang chọn
   là ô trắng nổi nhẹ, tab khác chữ xám; mọi hàng tab trong app dùng .seg-tabs / .seg-tab (tests/
   test_tabs.py). Nhiều tab thì khay cuộn ngang, không xuống dòng. */
.seg-tabs {
  display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: var(--neutral-100);
  max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; vertical-align: middle;
}
.seg-tabs::-webkit-scrollbar { display: none; }
.seg-tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border: 0; border-radius: 9px;
  background: transparent; color: var(--text-muted); font-size: var(--fs-body); font-weight: 600; line-height: 1.3;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
a.seg-tab:hover { color: var(--text-primary); }
.seg-tab.on { background: var(--surface-primary); color: var(--text-primary); box-shadow: 0 1px 2px rgb(17 24 20 / 0.1), 0 0 0 1px rgb(17 24 20 / 0.04); cursor: default; }
.seg-tab:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
/* Công tắc chọn một (radio) cũng dùng khay tab chung (rà soát L452): ô radio ẩn, nhãn được chọn là ô trắng. */
label.seg-tab { position: relative; cursor: pointer; }
label.seg-tab > input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
label.seg-tab:has(> input:checked) { background: var(--surface-primary); color: var(--text-primary); box-shadow: 0 1px 2px rgb(17 24 20 / 0.1), 0 0 0 1px rgb(17 24 20 / 0.04); cursor: default; }
label.seg-tab:has(> input:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 1px; }
label.seg-tab:has(> input:disabled) { opacity: 0.5; cursor: not-allowed; }
.pd-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding: 2px 24px; min-width: 0; }
.pd-tabs::-webkit-scrollbar { display: none; }
/* Nhiều mục (hồ sơ người lao động 6 tab): khay xuống dòng, mọi tab nằm trong khay xám và thấy hết
   (chủ dự án 03/11/2026: tab "Liên hệ" tràn ra ngoài khay). */
.pd-tabs > .seg-tabs { overflow: visible; max-width: 100%; flex-wrap: wrap; row-gap: 2px; }
.pd-tab { gap: 4px; padding: 0 12px; }
.pd-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-harvest-500); }
.pd-dot[hidden] { display: none; }

.pd-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 18px; padding: 20px 24px; }
.pd-body > .callout { margin: 0; }
.paused-warning-help { display: block; }
.pd-body textarea { resize: vertical; min-height: 72px; line-height: 22px; }
/* Ô ghi chú tự giãn (D49): cao một dòng như ô nhập, chữ dài xuống dòng, ô cao theo nội dung. */
textarea[data-autogrow], .pd-body textarea[data-autogrow] { field-sizing: content; min-height: 40px; resize: none; overflow: hidden; line-height: 22px; }
.pd-body textarea[data-autogrow] { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.pd-body input[type="text"], .pd-body input[type="email"], .pd-body input[type="url"], .pd-body textarea, .pd-body select { font-size: var(--fs-input); }
.pd-body input[type="text"], .pd-body input[type="email"], .pd-body input[type="url"], .pd-body .select-trigger, .pd-body select { min-height: 44px; }
.ef.short { max-width: 240px; }
.ef[hidden] { display: none; }
.pd-mst { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pd-mst .ef-was { flex: 1 1 200px; padding: 8px 12px; font-size: var(--fs-note); }
/* Ô tích có giải thích (D28): một dòng ô tích + nhãn, không khung, không nền; câu giải thích xám
   12px ngay dưới nhãn. "Cần kiểm tra" đang bật chỉ đổi câu giải thích sang ghi chú cảnh báo ⚠. */
.pd-check-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.pd-check-text { display: grid; min-width: 0; }
.pd-check-title { font-size: var(--fs-body); font-weight: 500; line-height: 20px; }
.pd-check-sub { display: flex; align-items: flex-start; gap: 4px; font-size: var(--fs-note); font-weight: 400; line-height: 18px; color: var(--text-secondary); }
.pd-check:not(.pd-signer).on .pd-check-sub { color: var(--warning-text); }
.pd-check:not(.pd-signer).on .pd-check-sub::before {
  content: ""; flex: none; width: 12px; height: 12px; margin-top: 3px; background: var(--warning);
  -webkit-mask: url("../icons/alert.0647895f2f07.svg") center / contain no-repeat; mask: url("../icons/alert.0647895f2f07.svg") center / contain no-repeat;
}
.ef-signer { padding-left: 14px; border-left: var(--accent-w) solid var(--border-default); }
.pd-fields { display: grid; gap: 16px; }
/* Ngăn kéo một hợp đồng: khối "Đã thay thế" / "Xác nhận theo bản đã ký" trên các ô (partners/_contract_lock.html). */
.hd-enter { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.hd-lock { margin-bottom: 12px; }
.hd-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: 1px; font-weight: 400; }
.hd-newer { color: var(--warning-text); font-weight: 600; }
.hd-lock .callout-actions { align-items: center; }
.hd-unlock { margin-top: 8px; display: grid; gap: 8px; }
.hd-unlock > summary { list-style: none; width: max-content; }
.hd-unlock > summary::-webkit-details-marker { display: none; }
.hd-unlock[open] > summary { display: none; }
.hd-unlock > .btn { width: max-content; }
/* Quãng đường (D22): ô "Tự tính theo địa chỉ", một hàng ba ô gọn có đơn vị, một dòng giải thích. */
.pd-distance { display: grid; gap: 10px; container-type: inline-size; }
/* Nhãn ba ô một dòng (không rơi chữ ở 390px): cột rộng ít nhất bằng nhãn, phần còn lại chia đều. */
.ef-row3 { display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); gap: 12px; align-items: start; }
/* Nút "Tính quãng đường" là ô thứ tư cùng hàng, thẳng hàng với ô nhập (nhãn trống giữ chỗ). Hẹp
   thì xuống hàng riêng cả bề ngang. */
.ef-row3:has(.ef-calc) { grid-template-columns: repeat(3, minmax(min-content, 1fr)) auto; }
.ef-calc .btn { min-height: 44px; }
.pd-distance .distance-calc-result { margin: -4px 0 0; }
@container (max-width: 520px) { .ef-row3:has(.ef-calc) { grid-template-columns: repeat(3, minmax(min-content, 1fr)); } .ef-calc { grid-column: 1 / -1; } .ef-calc .ef-label { display: none; } .ef-calc .btn { width: 100%; } }
/* Nhãn cao cố định để ô nhập và nút "Tính quãng đường" (nhãn trống) thẳng một hàng. */
.ef-row3 .ef-label { height: 20px; flex-wrap: nowrap; }
.ef-row3 .ef-label label { white-space: nowrap; }
/* Ô hẹp đã sửa (chủ dự án 20/10/2026 "Sửa lại giao diện lỗi"): không chen nhãn "Đã sửa" vào dòng nhãn
   (rơi xuống dòng làm lệch ô); viền cam của ô nhập báo đã sửa, "Trước:" là một dòng chữ ngắn màu cảnh báo
   ngay dưới ô. Ba ô và nút luôn cùng một hàng thẳng. */
.ef-row3 .tag-changed, .ef-row3 .ef.is-changed .tag-changed { display: none; }
.ef-row3 .ef-was { padding: 0; background: none; border-radius: 0; color: var(--warning-text); font-size: var(--fs-note); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ef-row3 .ef-was b { margin-right: 4px; }
.ef-row3 .input-unit, .ef-row3 .input-unit input { min-width: 0; width: 100%; }
.ef-row3 .input-unit input { padding-right: 48px; }
.input-unit input[readonly] { background: var(--surface-secondary); color: var(--text-secondary); cursor: default; }
.input-unit input[readonly]::placeholder { color: var(--text-secondary); font-size: var(--fs-input); }
.pd-distance > .field-help { margin: 0; }
.pd-distance-src { color: var(--text-secondary); overflow-wrap: anywhere; }
.pd-distance-src[hidden] { display: none; }
/* Nút "Tính quãng đường" (partials/distance_calc.html): nút và dòng kết quả. */
.distance-calc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.distance-calc-result { margin: 0; color: var(--text-secondary); }
.distance-calc-result[hidden] { display: none; }
.pd-fields .grid-2 { grid-template-columns: minmax(0, 1fr); }
/* Khách nhận tại kho Minh Sơn (đề xuất 21): kho giao hàng và quãng đường thu gọn một dòng, bấm để mở. */
.pd-pickup { border: 1px solid var(--border-default); border-radius: 10px; }
.pd-pickup-sum { display: grid; gap: 2px; padding: 12px 40px 12px 14px; cursor: pointer; list-style: none; position: relative; }
.pd-pickup-sum::-webkit-details-marker { display: none; }
.pd-pickup-sum::after { content: "▾"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: var(--fs-note); color: var(--text-secondary); }
.pd-pickup[open] > .pd-pickup-sum::after { content: "▴"; }
.pd-pickup-title { font-size: var(--fs-body); font-weight: 600; }
.pd-pickup-sub { font-size: var(--fs-note); font-weight: 500; color: var(--text-secondary); }
.pd-pickup-body { display: grid; gap: 18px; padding: 4px 14px 14px; }
.pd-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-subtle); min-width: 0; }
.pd-row.off { background: var(--surface-secondary); }
.pd-row-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.pd-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.pd-row-sub { font-size: var(--fs-table); color: var(--text-secondary); overflow-wrap: anywhere; }

.pd-foot { flex: none; display: grid; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid var(--border-subtle); background: var(--surface-primary); }
.pd-foot-row { display: flex; align-items: center; gap: 8px 10px; min-width: 0; }
.pd-foot-row .spacer { flex: 1; }
.pd-more { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pd-foot-ic { color: var(--success); }
.pd-count { font-size: var(--fs-body); font-weight: 700; white-space: nowrap; }
.pd-reason-error { margin: -6px 0 0; text-align: right; }
.pd-actions .btn { min-height: 40px; padding: 0 16px; }
.pd-save-m, .pd-tab-m { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pd-anim .pd, .pd-anim .pd-scrim, .pd-root.closing .pd, .pd-root.closing .pd-scrim { animation: none; }
}

/* Bảng tài khoản / hợp đồng: gọn, đủ cột, trạng thái bằng pill. */
.table.rows th { padding: 8px; letter-spacing: 0.04em; color: var(--text-secondary); font-weight: 700; }
.table.rows td { padding: 10px 8px; font-size: var(--fs-table); }
.table.rows tbody tr:last-child td { border-bottom: 0; }
.table.rows td.acct { font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table.rows td.first-col.acct { color: var(--text-primary); }
.table.rows td.num-l, .table.users td.num-l { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table.rows td.note { color: var(--text-secondary); min-width: 140px; }
.table.rows tr.off td { color: var(--text-muted); }
.table.rows .pill { font-size: var(--fs-note); }
.table.rows td.first-col b, .table.rows td.kind { white-space: nowrap; }
.cell-sub { font-size: var(--fs-table); font-weight: 400; color: var(--text-secondary); }
/* Số điện thoại dưới tên người liên hệ: dòng riêng, không bao giờ ngắt giữa số. */
.table td.contact { min-width: 20ch; }
.cell-sub.phone { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.file-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.file-link:hover { text-decoration: underline; }
/* Hai link trong cột File (Mở file, Bản đã ký) xếp dọc, sát nhau. */
.file-links { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* Cột phải: thẻ "Việc cần xử lý" và lịch sử dạng dòng thời gian. */
.rail-card { background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 18px; display: grid; gap: 12px; min-width: 0; scroll-margin-top: calc(var(--top-h) + 20px); }
.rc-head { display: flex; align-items: center; gap: 8px; }
.rc-head h2 { font-size: var(--fs-heading); font-weight: 700; }
.rc-head .spacer { flex: 1; }
.reg-list { display: grid; gap: 10px; margin: 0; }
.reg-row { display: grid; gap: 2px; }
.reg-row dt { font-size: var(--fs-note); color: var(--text-secondary); }
.reg-row dd { margin: 0; display: grid; gap: 2px; min-width: 0; }
.reg-v { font-size: var(--fs-body); color: var(--text-primary); overflow-wrap: anywhere; }
/* "Trùng app" là tag chung ngắn; tên các ô trùng là chữ thường sau tag (cột hẹp xuống dòng gọn). */
.reg-same { margin: 0; color: var(--text-secondary); font-size: var(--fs-note); line-height: 1.6; }
.reg-more > summary { cursor: pointer; font-size: var(--fs-note); font-weight: 600; color: var(--brand-green-700); }
.reg-more[open] > summary { margin-bottom: 10px; }
/* Bản ĐKKD (partners/_registration_file.html): dòng file đã gắn; ô dán link Drive có nút Lưu ngay
   cạnh, chọn / kéo thả PDF là tải lên luôn. */
.reg-file { display: grid; gap: 10px; margin-bottom: 12px; }
.reg-file > p { margin: 0; overflow-wrap: anywhere; }
.reg-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-primary); }
.reg-doc-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: var(--brand-green-50); color: var(--brand-green-700); font-size: var(--fs-note); font-weight: 700; }
.reg-doc-text { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.reg-doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.reg-doc-actions form { margin: 0; }
.reg-form { display: grid; gap: 8px; padding: 2px; border-radius: 8px; }
.reg-form.is-collapsed { display: none; }
.reg-form.is-over { outline: 2px dashed var(--brand-green-700); outline-offset: 4px; background: var(--brand-green-50); }
.reg-link { display: flex; gap: 8px; }
.reg-link > input { flex: 1 1 auto; min-width: 0; }
.reg-link > .btn { flex: none; }
.reg-or { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--fs-note); color: var(--text-secondary); }
/* Ảnh đại diện người lao động (chủ dự án 03/11/2026) phủ kín ô logo. */
.logo-tile { overflow: hidden; }
.logo-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-meta .act-form { display: inline; margin: 0; }
.reg-upload { position: relative; cursor: pointer; }
.reg-upload > input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.reg-upload:focus-within { outline: 2px solid var(--brand-green-700); outline-offset: 2px; }
/* Nút tải file trong hàng nút đầu trang (Thêm từ CCCD): form không chiếm chỗ riêng. */
.act-form { display: contents; }
/* Bảng đối chiếu hồ sơ với mã QR căn cước: dòng khác nhau tô vàng. */
.cccd-check { margin: 12px 0; display: grid; gap: 8px; }
.cccd-check tr.is-diff td { background: var(--warning-bg); }
.reg-search { margin: 8px 0 0; color: var(--text-secondary); }
.inbox-empty { margin: 0; font-size: var(--fs-table); color: var(--text-secondary); }
.csv-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-table); font-weight: 600; color: var(--text-secondary); text-decoration: none; }
.csv-link:hover { color: var(--brand-green-700); }
/* Chip lọc nguồn: chỉ nguồn có trong lịch sử của hồ sơ; luôn một hàng (Figma SX-D3), thừa thì
   cuộn ngang thay vì xuống hàng 2. */
.fchips { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; min-width: 0; }
.fchips > .fchip { flex: none; }
.fchip {
  display: inline-flex; align-items: center; min-height: 26px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border-default);
  font-size: var(--fs-note); font-weight: 600; color: var(--text-primary); text-decoration: none; white-space: nowrap;
}
.fchip:hover { border-color: var(--brand-green-700); }
.fchip.on { background: var(--brand-green-900); border-color: var(--brand-green-900); color: var(--text-inverse); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tl-item { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.tl-dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--neutral-400); }
.tl-dot.info { background: var(--info); }
.tl-dot.brand { background: var(--brand-green-700); }
.tl-dot.success { background: var(--success); }
.tl-dot.harvest { background: var(--warning); }
.tl-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.tl-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--fs-body); }
.tl-title time { font-size: var(--fs-note); font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.tl-meta { font-size: var(--fs-note); font-weight: 500; color: var(--text-secondary); }
.tl-diff { font-size: var(--fs-table); overflow-wrap: anywhere; }
.tl-diff .old { color: var(--text-secondary); }
.tl-diff.more { color: var(--text-secondary); font-size: var(--fs-note); }
.tl-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: var(--fs-note); font-weight: 600; }
.tl-actions a { text-decoration: none; }
.tl-actions a:hover { text-decoration: underline; }
.tl-details { order: -1; }
.tl-details[open] { flex-basis: 100%; }
.tl-details summary { cursor: pointer; color: var(--brand-green-700); list-style: none; }
.tl-details summary::-webkit-details-marker { display: none; }
.tl-details[open] summary { margin-bottom: 6px; }
.tl-tech { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0 0 6px; padding: 8px 10px; border-radius: 8px; background: var(--surface-secondary); font-weight: 400; }
.tl-tech dt { color: var(--text-secondary); font-weight: 600; }
.tl-tech dd { margin: 0; overflow-wrap: anywhere; }
.tl-details .changes { font-weight: 400; font-size: var(--fs-note); }
.tl-more { margin: 0; font-size: var(--fs-table); font-weight: 600; }
.tl-more a { text-decoration: none; }
.tl-more .muted { font-weight: 500; }

@media (max-width: 1599px) {
  .rec-page.has-toc { grid-template-columns: 188px minmax(0, 1fr) minmax(320px, 380px); gap: 20px; }
  .rec-page.has-toc:has(> .p-rail:empty) { grid-template-columns: 188px minmax(0, 1fr); }
  .stat { padding: 12px 14px; }
  .stat-value { font-size: var(--fs-heading); }
  .sec-pair { grid-template-columns: minmax(0, 1fr); }
}
/* SX-D3b: từ 1440 px, mục lục và cột phải dính dưới top bar khi cuộn; cột phải cao tối đa một
   màn hình, "Việc cần xử lý" luôn thấy, dòng thời gian lịch sử cuộn bên trong, chip lọc đứng yên. */
.rail-tab { display: none; }
@media (min-width: 1440px) {
  .has-toc .p-rail {
    position: sticky; top: calc(var(--top-h) + 20px); max-height: calc(100vh - var(--top-h) - 40px);
    display: flex; flex-direction: column;
  }
  .has-toc .p-rail > * { flex: none; }
  /* Cột phải quá cao thì cả cột cuộn. */
  .has-toc .p-rail { overflow-y: auto; overscroll-behavior: contain; }
}
/* Dưới 1440 px: cột phải thành khối "Việc & lịch sử" ở đầu, ngay dưới đầu hồ sơ, không dính. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .rec-page.has-toc { grid-template-columns: 200px minmax(0, 1fr); }
  .rec-page.has-toc:has(> .p-rail:empty) { grid-template-columns: 200px minmax(0, 1fr); }
  .has-toc .p-main { display: contents; }
  .has-toc .p-toc { grid-column: 1; grid-row: 1 / span 3; }
  .has-toc .p-head { grid-column: 2; grid-row: 1; }
  .has-toc .p-rail { grid-column: 2; grid-row: 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .rail-tab {
    display: block; grid-column: 1 / -1; font-size: var(--fs-table); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--brand-green-700);
  }
  .has-toc .p-body { grid-column: 2; grid-row: 3; }
  .has-toc .p-log { grid-column: 2; grid-row: 4; }
  .has-toc:has(> .p-rail:empty) .p-body { grid-row: 2; }
  .has-toc:has(> .p-rail:empty) .p-log { grid-row: 3; }
}
@media (max-width: 1023px) {
  /* Xếp chồng: đầu hồ sơ, việc cần xử lý, mục lục, các mục, lịch sử. */
  .rec-page.has-toc { display: flex; flex-direction: column; gap: 16px; }
  .has-toc .p-main, .has-toc .p-rail { display: contents; }
  .has-toc .p-head { order: 1; }
  .has-toc .inbox { order: 2; }
  .has-toc .p-toc { order: 3; align-self: stretch; position: static; max-height: none; overflow: visible; }
  .has-toc .p-body { order: 4; }
  .has-toc .p-log { order: 5; }
  /* Các thẻ cột phải khác (vd. Đăng ký kinh doanh) nằm sau mục lục, không chen lên trên đầu hồ sơ. */
  .has-toc .p-rail > :not(.inbox) { order: 3; align-self: stretch; }
  .has-toc .inbox { align-self: stretch; }
  /* Hồ sơ mặt hàng: việc cần xử lý ngay dưới đầu hồ sơ; quy đổi, dùng trong sau mục lục. */
  .item-rec .p-rail > * { order: 3; align-self: stretch; }
  .item-rec #viec-can-xu-ly { order: 2; }
  /* Hồ sơ đơn hàng (D72): "Đơn của khách" xuống cuối, sau các mục và nguồn dữ liệu. */
  .has-toc #don-cua-khach { order: 6; align-self: stretch; }
  .toc { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .stat:last-child { grid-column: auto / -1; }
  .done-card { margin-top: 8px; }
}
@media (max-width: 860px) {
  /* Đ13: điện thoại: mục lục hồ sơ là hàng chip cuộn ngang, dính dưới thanh trên cùng, thay cho
     thẻ mục lục dài gần cả màn hình giữa trang. Thẻ "Thông tin còn thiếu" vẫn nằm sau đầu hồ sơ. */
  .has-toc .p-toc { display: contents; }
  .has-toc .toc-card {
    order: 2; position: sticky; top: var(--top-h); z-index: 5; padding: 8px 0; gap: 0;
    border: 0; border-radius: 0; border-bottom: 1px solid var(--border-subtle); background: var(--surface-secondary);
  }
  .has-toc .done-card { order: 3; margin-top: 0; }
  .has-toc .toc-title { display: none; }
  .has-toc .toc { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .has-toc .toc::-webkit-scrollbar { display: none; }
  .has-toc .toc-link {
    flex: none; min-height: 36px; padding: 4px 12px; border: 1px solid var(--border-subtle); border-radius: 999px;
    background: var(--surface-primary); white-space: nowrap;
  }
  .has-toc .toc-link.sub { display: none; }
  .has-toc .toc-link.on { border-color: var(--brand-green-700); }
  .has-toc .toc-link.on::before { display: none; }
}
@media (max-width: 860px) {
  .pager-pos { display: none; }
  .rec-head { padding: 16px 16px 0; gap: 12px; }
  .rec-top { gap: 12px; align-items: flex-start; }
  .rec-top:last-child { padding-bottom: 16px; }
  .rec-aside { flex: 1 1 100%; margin-left: 0; }
  .rec-aside > form { flex: 1 1 100%; }
  .rec-aside .filter-field, .rec-aside select { width: 100%; }
  .logo-tile { width: 48px; height: 48px; border-radius: 12px; font-size: var(--fs-body); }
  .rec-name { font-size: var(--fs-title-sm); }
  /* Tab vai trò trên điện thoại: bỏ nhãn "VAI TRÒ" (đã có trong aria-label), hai tab chia đều bề
     ngang, cao 44 px cho dễ chạm; không làm trang rộng hơn màn hình. */
  .role-label { display: none; }
  .role-tabs { flex-wrap: nowrap; }
  .role-tabs > .seg-tabs { flex: 1 1 auto; min-width: 0; }
  .role-tab { flex: 1 1 0; justify-content: center; min-width: 0; min-height: 40px; padding: 0 8px; }
  .role-add { flex: 0 1 auto; margin: 6px 0 6px 8px; min-height: 32px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Ô lẻ cuối (Tài khoản NH) trải hết hàng, không để trống nửa trái. */
  .stats .stat:last-child { grid-column: auto; }
  .stats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat { padding: 12px 14px; }
  .stat-value { font-size: var(--fs-heading); }
  .sec { padding: 0 16px 6px; }
  .p-log > .card { padding-inline: 16px; }
  .sec-pair, .kv { grid-template-columns: minmax(0, 1fr); }
  .kv.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); column-gap: 16px; }
  .kv.grid .kv-item.span2 { grid-column: 1 / -1; }
  .kv.rows .kv-item, .kv.rows.versions .kv-item { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .ver-actions { flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 6px; }
  .toc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .toc-link { min-height: 44px; }
  .rail-card { padding: 16px; }
  .callout { padding: 12px; }
  .callout-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 860px) {
  /* SX-M1: bảng trượt từ dưới. --pd-vh / --pd-kb do profile.js đặt theo visualViewport để footer
     nằm trên bàn phím khi gõ. */
  .pd {
    top: auto; left: 0; right: 0; bottom: var(--pd-kb, 0px); width: auto; height: calc(var(--pd-vh, 100dvh) * 0.88);
    border-radius: 24px 24px 0 0; box-shadow: 0 -8px 28px rgb(0 0 0 / 0.2);
  }
  .pd-anim .pd { animation: pd-in-up 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .pd-root.closing .pd { animation: pd-out-down 220ms ease-in both; }
  .pd.dragging { transition: none; }
  .pd.settle { transition: transform 0.2s ease; }
  .pd-head { gap: 10px; padding: 0 16px 12px; }
  .pd-grab { display: flex; justify-content: center; padding: 8px 0 2px; margin: 0 -16px; cursor: grab; }
  .pd-grab, .pd-titlebar { touch-action: none; }
  .pd-grab span { width: 40px; height: 5px; border-radius: 3px; background: var(--neutral-300); }
  .pd-eb-name, .pd-callout-note { display: none; }
  .pd-title { font-size: var(--fs-title-sm); }
  .pd-x { border: 0; border-radius: 999px; background: var(--neutral-100); }
  .pd-tabs { margin: 0 -16px; padding: 2px 16px; }
  .pd-body { padding: 16px; gap: 16px; }
  .ef-row3 { gap: 8px; }
  .ef-row3 .ef-label, .ef-row3 .ef-label label { font-size: var(--fs-note); }
  /* Ô hẹp (~114px): chừa đủ chỗ cho đơn vị "ngày" để chữ gợi ý "Chưa tính" không đè lên. */
  .ef-row3 .input-unit input { padding-right: 46px; padding-left: 8px; }
  .ef-row3 .input-unit input::placeholder, .ef-row3 .input-unit input[readonly]::placeholder { font-size: var(--fs-note); }
  .ef-row3 .input-unit .unit { right: 8px; font-size: var(--fs-table); }
  .pd-body input[type="text"], .pd-body input[type="email"], .pd-body input[type="url"], .pd-body textarea, .pd-body select { font-size: var(--fs-touch); }
  .pd-body textarea { min-height: 80px; line-height: 23px; }
  .pd-mst .btn { flex: 1 1 100%; min-height: 48px; font-size: var(--fs-body); border-radius: 12px; }
  .pd-foot { gap: 10px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .pd-reason-error { text-align: left; }
  .pd-actions .kbd-hint, .pd-actions .spacer, .pd-next, .pd-save-d { display: none; }
  .pd-save-m, .pd-tab-m { display: inline; }
  .pd-tab-d { display: none; }
  .pd-actions .btn { min-height: 52px; border-radius: 14px; font-size: var(--fs-touch); }
  .pd-actions .btn.ghost { flex: 0 0 110px; }
  .pd-actions .btn.primary { flex: 1; font-weight: 700; }
  .pd-actions .btn.primary .ic { display: none; }
  .pd-row .btn { min-height: 40px; }
}
@media (max-width: 480px) {
  .pager { display: none; }
  .pager.pages { display: flex; }
  .toc { grid-template-columns: minmax(0, 1fr); }
}

/* Hàng tab vai trò (phương án B, Figma SX-D3 / SX-D3c): nhãn "VAI TRÒ", tab Khách hàng / Nhà cung cấp
   gạch chân xanh khi đang xem, tích xanh khi đã có vai trò; vai trò chưa có là nút tròn "+ Thêm". */
.role-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding-top: 12px; border-top: 1px solid var(--border-subtle); min-width: 0; }
.role-label { margin-right: 8px; font-size: var(--fs-note); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.role-tab { gap: 8px; }
.role-tab .pill { min-height: 20px; }
.role-ok { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-green-700); color: var(--text-inverse); }
.role-ok .ic { width: 9px; height: 9px; }
.role-add {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 6px 14px 6px 12px; border-radius: 999px;
  background: var(--surface-secondary); font-size: var(--fs-table); font-weight: 600; color: var(--brand-green-800); text-decoration: none; white-space: nowrap;
}
.role-add:hover { background: var(--brand-green-50); }
.pill.role { background: var(--info-bg); color: var(--info-text); text-decoration: none; }
.pill.role::before { background: var(--info); }
/* Khối quãng đường: đối tác nước ngoài (.intl) ẩn ô tự tính / km, hiện ô cảng và nhãn "đến cảng". */
.pd-distance.intl [data-intl-hide], .pd-distance:not(.intl) [data-intl-show] { display: none; }
/* Danh sách KH / NCC: cột hẹp "Cũng là", nhãn nhỏ NCC / KH mở hồ sơ vai trò kia. */
.table td.role-col { text-align: center; }

/* Đơn hàng (S2): dòng quy cách nhiều dòng. */
.table.rows td .cell-sub.spec { max-width: 420px; white-space: normal; }
/* Hồ sơ đơn: lần giao theo phiếu xuất kho dưới trạng thái dòng (apps/orders/shipment.py). */
.ship-cell { margin-top: 4px; }
.order-note { margin: 0 0 14px; white-space: pre-line; }
.list-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.table.orders td.nowrap { white-space: nowrap; }
/* Ô đầu: mã đơn, dòng phụ khách · PO, hàng nhãn (danh mục, hợp đồng, trạng thái; 30/10/2026). */
.table.orders td.first-col { min-width: 300px; max-width: 420px; }
.table.orders td.first-col .sub b { font-weight: 600; color: var(--text-secondary); }
.table.orders td.product { min-width: 160px; max-width: 360px; white-space: normal; }
/* "+N dòng" ở cột Sản phẩm là link mở các dòng còn lại của đơn, chữ nhỏ (chủ dự án 04/11/2026). */
/* Mã dài (vải, đai: trên 20 ký tự) chữ 12px để cột gọn (chủ dự án 04/11/2026). */
.table.orders td.product b.code-long { font-size: var(--fs-note); line-height: 1.35; }
.table.orders .more-lines { display: inline; }
.table.orders .more-lines > summary { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; color: var(--brand-green-700); cursor: pointer; list-style: none; white-space: nowrap; }
.table.orders .more-lines > summary::-webkit-details-marker { display: none; }
.table.orders .more-lines > summary:hover { text-decoration: underline; }
.table.orders .more-lines .ml-open, .table.orders .more-lines[open] .ml-closed { display: none; }
.table.orders .more-lines[open] .ml-open { display: inline; }
.table.orders .more-lines[open] > summary .ic { transform: rotate(180deg); }
.table.orders .more-lines ol { margin: 4px 0 0; padding: 0; list-style: none; font-size: var(--fs-note); line-height: 1.45; }
.table.orders .more-lines li { display: flex; flex-wrap: wrap; gap: 0 6px; }
.table.orders .more-lines li b { font-weight: 600; overflow-wrap: anywhere; }
.table.orders .more-lines li span { color: var(--text-muted); white-space: nowrap; }
.table.orders .more-lines li.off { text-decoration: line-through; color: var(--text-muted); }
/* Khối Bao / Vải / Đai / Sợi / Khác (04/11/2026): tiêu đề khối + tổng khối, dòng tổng in đậm. */
.table.orders tbody.grp tr.grp-head > th { padding: 10px 14px 6px; background: var(--brand-green-50); border-bottom: 1px solid var(--border-subtle); text-align: left; text-transform: none; letter-spacing: 0; font-size: var(--fs-table); font-weight: 400; color: var(--text-muted); position: static; }
.table.orders tbody.grp tr.grp-head .grp-name { margin-right: 8px; font-size: var(--fs-body); font-weight: 600; color: var(--brand-green-900); }
.table.orders tbody.grp tr.grp-total > td { font-weight: 600; background: var(--surface-secondary); }
.table.orders tbody.grp + tbody.grp tr.grp-head > th { border-top: 8px solid var(--surface-secondary); }
/* Năm / Tháng EXF nằm ngoài ngăn kéo Lọc, hàng ô lọc dưới thanh công cụ (04/11/2026). */
.filters > .attr-row.order-period { flex: 1 1 auto; align-items: flex-end; }
.order-period > .period-thang { flex: 0 1 320px; }
.order-period > .live-swap { align-self: center; margin-top: 18px; }
.table.orders tbody tr.late td.first-col .lr-seg { border-right-color: var(--error-bg); }
.table.rows td .cell-sub.spec { min-width: 136px; }
/* Danh sách đơn hàng (Figma 25.1 SX-DH-D1 / D4b): thẻ chỉ số bấm để lọc; đơn quá EXF tô đỏ nhạt cả
   dòng, ngày EXF đỏ; dòng "Tổng trang này" cuối bảng. */
.kpi-links { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpi.link { color: inherit; text-decoration: none; transition: border-color 0.15s; }
.kpi.link:hover { border-color: var(--brand-green-700); }
.kpi.link:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.kpi.link.on { border-color: var(--brand-green-700); box-shadow: inset 0 0 0 1px var(--brand-green-700); }
.kpi .k-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-table); font-weight: 600; color: var(--text-secondary); }
.kpi .k-head .k-name { flex: 1; min-width: 0; }
.kpi .k-head .ic { color: var(--brand-green-700); }
.kpi .k-head .ic:last-child { color: var(--text-muted); }
.kpi-links .kpi .k-value { font-size: var(--fs-title); }
.kpi.warning .k-value { color: var(--warning-text); }
.kpi.error .k-value, .kpi.error .k-sub { color: var(--error-text); }
.kpi.error .k-head .ic:first-child { color: var(--error); }
.kpi.warning .k-head .ic:first-child { color: var(--warning); }
.chip-q.all, .chip-q.st { --c-bg: var(--brand-green-50); --c-border: var(--border-default); --c-text: var(--text-primary); --c-on: var(--brand-green-900); }
.chip-q.all .chip-count, .chip-q.st .chip-count { background: var(--surface-secondary); color: var(--text-secondary); }
.table.orders tbody tr.late > td { background: var(--error-bg); }
.table.orders .late-date { color: var(--error-text); font-weight: 600; }
/* Dòng nhỏ dưới EXF (03/11/2026): còn n ngày xám, trong 7 ngày / hôm nay vàng, trễ đỏ. */
.table.orders .exf-left { display: block; margin-top: 2px; font-size: var(--fs-note); color: var(--text-muted); white-space: nowrap; }
.table.orders .exf-left.soon { color: var(--warning-text); font-weight: 600; }
.table.orders .exf-left.late { color: var(--error-text); font-weight: 600; }
.table.orders tfoot td { padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--border-default); background: var(--surface-secondary); font-weight: 700; font-variant-numeric: tabular-nums; }
.table.orders tfoot td.first-col { white-space: normal; }
/* Hồ sơ khách: thẻ "Đơn hàng" ở cột phải (partners/_orders_card.html, 19/10/2026). 4 ô chỉ số 2 × 2
   bấm mở danh sách đơn lọc theo khách (trễ đỏ, sắp xuất xưởng vàng); danh sách ngắn, đơn quá EXF
   tô đỏ nhạt như danh sách đơn. */
.ord-rail .sec-add { white-space: nowrap; }
.ord-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ord-kpi {
  display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--surface-secondary); color: var(--text-primary); text-decoration: none; min-width: 0;
}
.ord-kpi:hover { border-color: var(--brand-green-700); }
.ord-kpi .v { font-size: var(--fs-heading); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ord-kpi .l { font-size: var(--fs-note); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord-kpi.warning { background: var(--warning-bg); border-color: transparent; }
.ord-kpi.warning .v { color: var(--warning-text); }
.ord-kpi.error { background: var(--error-bg); border-color: transparent; }
.ord-kpi.error .v { color: var(--error-text); }
.ord-list { list-style: none; margin: 0; padding: 0; display: grid; font-size: var(--fs-table); }
.ord-list li { padding: 8px 6px; border-top: 1px solid var(--border-subtle); min-width: 0; }
.ord-list li:first-child { border-top: 0; }
.ord-list li.late { background: var(--error-bg); border-radius: 8px; }
.ord-list li.on { background: #e1f0e6; border-radius: 8px; } /* đơn đang xem trên hồ sơ đơn (D72) */
.ol-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ol-code { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ol-st { margin-left: auto; flex: none; }
.ord-list .cell-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord-list .late-date { color: var(--error-text); font-weight: 600; }
.ord-rail > .btn { justify-self: start; }
/* Thẻ Người liên hệ (bảng) và Hoá đơn (danh sách email) thay thẻ "Liên hệ & hoá đơn" (19/10/2026). */
.ct-table td .pill { margin: 1px 0; }
.ct-table td.actions { width: 1%; white-space: nowrap; }
.inv-list { list-style: none; margin: 0; padding: 0; display: grid; }
.inv-list li { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--border-subtle); min-width: 0; }
.inv-list li:first-child { border-top: 0; padding-top: 0; }
.inv-main { flex: 1; min-width: 0; }
.inv-email { font-weight: 600; overflow-wrap: anywhere; }
/* Chỉ số đơn hàng của khách: một hàng chip (Đ3), trễ đỏ, sắp xuất xưởng vàng. */
.ord-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ord-chips .fchip { gap: 6px; }
.ord-chips .fchip .ic { color: var(--brand-green-700); }
/* Chip lọc thẻ Hợp đồng (L81): số đếm sau nhãn, vạch mảnh ngăn nhóm tình trạng / năm / tháng. */
.hd-chips { margin: 0 0 10px; }
.fchip-n { margin-left: 6px; font-weight: 600; color: var(--text-secondary); }
.fchip.on .fchip-n { color: inherit; opacity: 0.85; }
.hd-chip-sep { align-self: stretch; width: 1px; margin: 4px 4px; background: var(--border-default); }
.fchip.warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.fchip.error { background: var(--error-bg); border-color: var(--error-text); color: var(--error-text); }
.fchip.warning .ic, .fchip.error .ic { color: inherit; }
/* Điện thoại (SX-DH-M1): mỗi đơn là một thẻ: mã + trạng thái, khách · sản phẩm, TL và EXF. */
@media (max-width: 600px) {
  .kpi-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi-links .kpi { padding: 10px 12px; gap: 2px; }
  .kpi-links .kpi .k-sub { display: none; }
  .kpi-links .kpi .k-head { font-size: var(--fs-note); }
  html:not([data-tbl-view="bang"]) .table.orders thead, html:not([data-tbl-view="bang"]) .table.orders tfoot, html:not([data-tbl-view="bang"]) .table.orders td.odate, html:not([data-tbl-view="bang"]) .table.orders td.actions { display: none; }
  html:not([data-tbl-view="bang"]) .table.orders, html:not([data-tbl-view="bang"]) .table.orders tbody { display: block; width: 100%; min-width: 0; }
  html:not([data-tbl-view="bang"]) .table.orders tbody tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "sao ma ma ma" "sp sp sp sp" "sl sl tl exf";
    gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle);
  }
  html:not([data-tbl-view="bang"]) .table.orders tbody td { display: block; height: auto; min-height: 0; padding: 0; border: 0; background: none; text-align: left; line-height: 1.4; }
  html:not([data-tbl-view="bang"]) .table.orders tbody tr.late { background: var(--error-bg); }
  html:not([data-tbl-view="bang"]) .table.orders tbody td.first-col { grid-area: ma; min-width: 0; max-width: none; }
  html:not([data-tbl-view="bang"]) .table.orders tbody td.star-col { grid-area: sao; width: auto; min-width: 0; margin: -4px 0 -4px -6px; }
  html:not([data-tbl-view="bang"]) .table.orders tbody td.product { grid-area: sp; }
  html:not([data-tbl-view="bang"]) .table.orders tbody td.pcs { grid-area: sl; }
  html:not([data-tbl-view="bang"]) .table.orders tbody tr.grp-head { display: block; padding: 0; }
  html:not([data-tbl-view="bang"]) .table.orders tbody tr.grp-head > th { display: block; }
  html:not([data-tbl-view="bang"]) .table.orders tbody tr.grp-total { display: none; }
  html:not([data-tbl-view="bang"]) .table.orders tbody td.weight { grid-area: tl; }
  html:not([data-tbl-view="bang"]) .table.orders tbody td.exf { grid-area: exf; text-align: right; }
  html:not([data-tbl-view="bang"]) .table.orders tbody td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-note); color: var(--text-muted); font-weight: 400; }
  html:not([data-tbl-view="bang"]) .table.orders tbody td.empty { grid-column: 1 / -1; text-align: center; padding: 16px 0; }
}

/* Hợp đồng chia thẻ theo loại (HĐ nguyên tắc / gia công / mua bán / Phụ lục), bảng gọn như SX-D3;
   "N phụ lục ▾" mở danh sách phụ lục ngay dưới dòng hợp đồng gốc. */
.hd-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
/* "n đơn thiếu PL / PO" cuối hàng thẻ, bấm mở danh sách đơn đã lọc. */
.hd-missing { margin-left: auto; align-self: center; text-decoration: none; white-space: nowrap; }
.hd-missing:hover .pill { text-decoration: underline; }
.hd-tab-count { font-size: var(--fs-note); font-weight: 600; opacity: 0.8; font-variant-numeric: tabular-nums; }
.table.rows .clip { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table.rows tr.orphan td { background: var(--warning-bg); }
.table.rows .parent-no { white-space: nowrap; }
.pick-parent { font-size: var(--fs-table); font-weight: 600; color: var(--warning-text); white-space: nowrap; }
.pl-cell { white-space: nowrap; }
.pl-toggle, .pl-add { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-table); font-weight: 600; color: var(--brand-green-700); text-decoration: none; white-space: nowrap; }
.pl-toggle:hover, .pl-add:hover { text-decoration: underline; }
.pl-toggle .ic { transition: transform 0.15s ease; }
.pl-toggle.on .ic, .pl-toggle[aria-expanded="true"] .ic { transform: rotate(180deg); }
/* Phụ lục: các dòng riêng cùng cột với hợp đồng gốc (tbody.pl-sub), nền nhạt, vạch xanh ở cột đầu.
   Mỗi hợp đồng có phụ lục đóng tbody riêng: giữ vạch ngăn dưới dòng cuối của tbody không phải cuối bảng. */
.table.rows tbody:not(:last-child) tr:last-child td { border-bottom: 1px solid var(--border-subtle); }
.table.rows tbody.pl-sub tr:hover { background: transparent; }
.table.rows tbody.pl-sub td { padding-top: 6px; padding-bottom: 6px; height: auto; background: var(--surface-secondary); }
.table.rows tbody.pl-sub td.first-col { padding-left: 14px; border-left: var(--accent-w) solid var(--brand-green-700); }
.table.rows tbody.pl-sub .pl-code { font-weight: 600; }
.table.rows tbody.pl-sub .pl-add-row td { padding-left: 16px; }
.acct-sub { font-variant-numeric: tabular-nums; }
.table.rows .cell-sub.official { white-space: nowrap; }
.hd-panel .table.rows th, .hd-panel .table.rows td { padding-left: 6px; padding-right: 6px; }
.hd-panel .table.rows td .cell-sub .pill { margin-top: 3px; }
.hd-panel .table.rows th.wrap-h { white-space: normal; min-width: 96px; }
/* Thẻ ẩn của bảng Hợp đồng luôn ẩn (lớp khác không được ghi đè display). */
.hd-panel[hidden] { display: none; }
/* Nhóm loại hợp đồng trong bảng chung (HĐNT / HĐGC / HĐMB): dòng tiêu đề nhóm, cột thẳng hàng. */
.table.rows tr.hd-group th { padding: 8px 6px 6px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-subtle); text-align: left; text-transform: none; letter-spacing: 0; font-size: var(--fs-table); font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.table.rows tbody.hd-group-head + tbody tr:first-child td { border-top: 0; }
tr.hd-group .tag { margin-right: 8px; }
tr.hd-group .count { margin-left: 8px; }
.sec-head.has-filter { flex-wrap: wrap; row-gap: 10px; }
.sec-head.has-filter h2 { white-space: nowrap; }
.hd-chips .hd-filter-clear { min-height: 32px; font-size: var(--fs-table); }
.hd-no-match { padding: 8px 0; }
@media (max-width: 860px) {
  .hd-tabs { flex-wrap: nowrap; }
}

/* Loại mặt hàng (D24): danh mục dùng chung; trang sửa là bảng, mỗi loại một dòng. */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip-row .chip.on { background: var(--brand-green-900); border-color: var(--brand-green-900); color: var(--text-inverse); }
.item-type-help { margin: 0 0 12px; font-size: var(--fs-table); }
.table.item-types td.nowrap { white-space: nowrap; }
.table.type-edit td { vertical-align: top; padding-top: 8px; padding-bottom: 8px; }
.table.type-edit input[type="text"], .table.type-edit input[type="number"] { width: 100%; min-height: 34px; }
.table.type-edit .c-order { width: 90px; }
.table.type-edit .c-code { width: 130px; }
.table.type-edit .c-check { width: 84px; text-align: center; }
.table.type-edit .c-check input { margin-top: 8px; }
.table.type-edit .field-error { font-size: var(--fs-note); }
.table.type-edit tr.new td { background: var(--brand-green-50); }
@media (max-width: 860px) {
  .table-wrap .table.type-edit, .table.type-edit tbody { display: block; width: 100%; min-width: 0; }
  .table.type-edit thead { display: none; }
  .table.type-edit tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 0; border-bottom: 1px solid var(--border-default); }
  .table.type-edit td { border: 0; padding: 0; min-width: 0; }
  .table.type-edit td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: var(--fs-note); font-weight: 600; color: var(--text-muted); }
  .table.type-edit .c-code { grid-column: span 2; }
  .table.type-edit .c-name, .table.type-edit .c-note { grid-column: 1 / -1; }
  .table.type-edit .c-check { width: auto; text-align: left; }
  .table.type-edit .c-check input { margin-top: 2px; }
  .table.type-edit .c-order, .table.type-edit .c-code { width: auto; }
}

/* --- Bảng dữ liệu dùng chung (apps/core/tables.py) --------------------- */
/* Tiêu đề sắp xếp: cả ô là link, mũi tên ▲/▼ ở cột đang xếp, ↕ mờ ở cột khác. */
.table th .th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.table th .th-sort:hover { color: var(--brand-green-700); }
.table th .th-sort.on { color: var(--text-primary); }
/* Hai link sắp xếp trong một tiêu đề (Column.also): "Mã sản phẩm · tên". */
.table th .th-also { margin: 0 6px; color: var(--text-muted); }
/* Link sắp xếp phụ ở dòng 2 tiêu đề (Column.more, vd PO · danh mục · hợp đồng · trạng thái trong ô mã đơn). */
.table th .th-more { display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 2px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.table th .th-more .th-sort { color: var(--text-muted); }
.table th .th-more .th-sort.on { color: inherit; }
/* Mũi tên sắp xếp vẽ bằng CSS, không dùng chữ ▲▼↕: ký tự này lấy từ phông dự phòng nên mỗi máy nằm một
   độ cao, trên Mac ▼ tụt xuống dưới chữ tiêu đề (chủ dự án 31/10/2026 "căn giữa"). Ô cao đúng một dòng
   chữ (1lh) và căn đầu link, nên mũi tên luôn giữa dòng tên cột, kể cả cột có đơn vị ở dòng 2. */
.table th .th-sort { align-items: flex-start; }
.th-arrow { --th-arrow: var(--brand-green-700); position: relative; flex: none; width: 8px; height: 1lh; overflow: hidden; color: transparent; }
.th-arrow::before, .th-arrow::after { content: ""; position: absolute; left: 0; width: 8px; height: 4px; background: var(--th-arrow); }
/* Chưa xếp: hai tam giác ▲ ▼ chồng nhau; đang xếp: một tam giác 5px. */
.th-arrow::before { top: calc(50% - 5px); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.th-arrow::after { top: calc(50% + 1px); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.th-arrow.up::before, .th-arrow.down::before { top: calc(50% - 2.5px); height: 5px; }
.th-arrow.up::after, .th-arrow.down::after { display: none; }
.th-arrow.down::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* Đơn vị của cột luôn ở dòng 2 (quy tắc chung "Bảng dữ liệu", 20/10/2026). */
.th-text { display: inline-block; }
.th-unit { display: block; }
/* Đơn vị giữ đúng chữ thường / hoa (kgf, kg, g/m²) dù tiêu đề cột viết hoa (chủ dự án 22/10/2026). */
.table thead .th-unit { text-transform: none; }
/* Tên cột thẳng một hàng (căn trên) dù cột có đơn vị ở dòng 2 (chủ dự án 20/10/2026). */
.table thead th { vertical-align: top; }
.th-sort:not(.on) .th-arrow { --th-arrow: var(--neutral-300); }
.th-sort:not(.on):hover .th-arrow { --th-arrow: var(--brand-green-700); }
/* Cột số: tiêu đề căn phải thẳng mép số; mũi tên sắp xếp nằm bên trái chữ để chữ sát mép phải.
   width 1%: cột số chỉ rộng vừa nội dung, phần thừa dồn cho cột chữ (D64). */
.table th.num { text-align: right; width: 1%; }
.table th.num .th-sort { flex-direction: row-reverse; }
.table .col-off { display: none; }
/* Dòng mở hồ sơ khi bấm (tr[data-href], table-tools.js): con trỏ tay, nền khi rê chuột. */
.table tr[data-href] { cursor: pointer; }
.table tr[data-href]:hover td { background: var(--brand-green-50); }
/* Link mã ở ô đầu: màu thương hiệu, đậm, không gạch chân (chỉ gạch khi focus bằng bàn phím). */
.table td.first-col a { color: var(--brand-green-700); font-weight: 600; text-decoration: none; }
.table td.first-col a:hover { text-decoration: none; }
.table td.first-col a:focus-visible { text-decoration: underline; }
/* Không để một chữ đứng trơ ở dòng cuối: tiêu đề cột không xuống dòng (trừ wrap-h, xuống dòng cân
   đối), ô dài xuống dòng "pretty" và đủ rộng; trên điện thoại ô ngắn giữ một dòng, bảng cuộn ngang. */
table[data-table] th { white-space: nowrap; }
table[data-table] th.wrap-h { white-space: normal; text-wrap: balance; }
table[data-table] td { text-wrap: pretty; }
table[data-table] td.nowrap { white-space: nowrap; }
table[data-table] td.wrap, table[data-table] td.note { min-width: 18ch; text-wrap: balance; }
.table-sec .sec-head h2 { text-wrap: balance; }
@media (max-width: 640px) {
  table[data-table] td:not(.wrap):not(.note) { white-space: nowrap; }
  /* Đầu mục bảng trên điện thoại: tên mục một dòng, nút "Cột" / "Thêm" xuống hàng dưới khi chật. */
  .table-sec .sec-head { flex-wrap: wrap; row-gap: 6px; }
  .table-sec .sec-head h2 { white-space: nowrap; }
  .sec-head .sec-actions { flex-basis: 100%; justify-content: flex-start; margin-left: 0; }
  .sec-head .sec-actions .col-menu > summary { min-height: 40px; }
  /* Nút giãn đều cho kín hàng; 3 nút không vừa một hàng thì nút cuối nằm trọn hàng dưới. */
  .sec-head .sec-actions > * { flex: 1 1 auto; }
  .sec-head .sec-actions > form > .btn { width: 100%; justify-content: center; }
  .sec-head .sec-actions .col-menu > summary { width: 100%; }
}
/* Nút "Cột": menu checkbox ẩn / hiện cột, nằm cuối thanh công cụ. */
.filters .col-menu { margin-left: auto; }
/* Đ11: "Cột" + "Xuất Excel" một khối bên phải thanh công cụ, xuống dòng thì cùng xuống. */
/* "Cột" + "Xuất Excel" luôn một hàng, ở mọi chỗ có bảng (thanh công cụ, đầu thẻ, trang thống kê). */
.tbl-tools { display: inline-flex; flex: none; flex-wrap: nowrap; align-items: center; gap: 8px; white-space: nowrap; }
.tbl-tools > .col-menu { margin-left: 0; }
.filters .tbl-tools { gap: 12px; margin-left: auto; }
.filters .tbl-tools .col-menu { margin-left: 0; }
/* Nhiều chip kho (Tồn kho, Phiếu kho): chip xuống hàng riêng dưới thanh công cụ. */
.filters > .quick-chips.own-row { order: 1; flex: 1 1 100%; }
.col-menu > summary { cursor: pointer; }
.col-count { font-weight: 500; color: var(--text-muted); }
.col-list { min-width: 220px; max-height: 60vh; overflow-y: auto; }
.col-opt { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: 8px; font-size: var(--fs-body); cursor: pointer; }
.col-opt:hover { background: var(--brand-green-50); }
.col-opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-green-700); }
.menu-list button.col-reset { border-top: 1px solid var(--border-subtle); border-radius: 0 0 8px 8px; color: var(--brand-green-700); font-weight: 600; }
/* Nút "Cột" trong đầu mục (hồ sơ: Tài khoản, Hợp đồng; Nguồn dữ liệu): cỡ nhỏ như nút sm. */
.sec-head .col-menu > summary, .subform-head .col-menu > summary { min-height: 32px; padding: 0 10px; font-size: var(--fs-note); }
.subform-head .col-menu, .chip-row .col-menu { margin-left: auto; }
.filters .chip-row { margin-bottom: 0; }
.card-head:has(.col-menu) { grid-template-columns: 1fr auto; }
.card-head .col-menu { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
/* Bảng Hợp đồng trên hồ sơ: chỉ hiện nút "Cột" của thẻ đang mở (3 thẻ hợp đồng chung một nút, thẻ Phụ lục, thẻ PO mỗi thẻ một nút). */
#hop-dong:has(#hd-tab-phu-luc[aria-selected="true"]) .col-menu[data-col-menu="hd-doi-tac"],
#hop-dong:has(#hd-tab-po[aria-selected="true"]) .col-menu[data-col-menu="hd-doi-tac"],
#hop-dong:not(:has(#hd-tab-phu-luc[aria-selected="true"])) .col-menu[data-col-menu="pl-doi-tac"],
#hop-dong:not(:has(#hd-tab-po[aria-selected="true"])) .col-menu[data-col-menu="po-doi-tac"] { display: none; }

/* Cột "% đủ": số + thanh nhỏ, màu theo mức (đỏ < 50, hổ phách < 80, xanh). */
.done { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.done-bar { width: 44px; height: 6px; border-radius: 999px; background: var(--neutral-100); overflow: hidden; }
.done-bar > span { display: block; height: 100%; border-radius: inherit; background: currentColor; }
.done.success { color: var(--success-text); }
.done.success .done-bar > span { background: var(--success); }
.done.warning { color: var(--warning-text); }
.done.warning .done-bar > span { background: var(--warning); }
.done.error { color: var(--error-text); }
.done.error .done-bar > span { background: var(--error); }
.bar-0 { width: 0; } .bar-1 { width: 10%; } .bar-2 { width: 20%; } .bar-3 { width: 30%; }
.bar-4 { width: 40%; } .bar-5 { width: 50%; } .bar-6 { width: 60%; } .bar-7 { width: 70%; }
.bar-8 { width: 80%; } .bar-9 { width: 90%; } .bar-10 { width: 100%; }

/* Chip lọc nhanh ngay sau nút "Lọc" (Figma SX-D1): gọn, có số đếm, màu theo nhãn trên bảng.
   Tắt: nền nhạt viền màu; bật: nền đặc chữ trắng + dấu ×. */
.quick-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-q {
  --c-bg: var(--warning-bg); --c-border: var(--warning-border); --c-text: var(--warning-text); --c-on: var(--warning-text);
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 10px; border-radius: 999px;
  border: 1px solid var(--c-border); background: var(--surface-primary); color: var(--c-text);
  font-size: var(--fs-table); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.chip-q:hover { background: var(--c-bg); border-color: var(--c-on); }
.chip-q:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.chip-q .chip-count {
  min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--c-bg); color: var(--c-text);
  font-size: var(--fs-note); line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.chip-q .chip-warn { color: var(--warning); font-size: var(--fs-body); line-height: 1; }
.chip-q.check { background: var(--warning-bg); }
.chip-q.check .chip-count { background: var(--surface-primary); }
.chip-q.both, .chip-q.export, .chip-q.inner { --c-bg: var(--info-bg); --c-border: color-mix(in srgb, var(--info) 35%, var(--surface-primary)); --c-text: var(--info-text); --c-on: var(--info); }
.chip-q.on { background: var(--c-on); border-color: var(--c-on); color: var(--text-inverse); padding-right: 8px; }
.chip-q.on .chip-count { background: rgb(255 255 255 / 0.2); color: var(--text-inverse); }
.chip-q.on .chip-warn { color: var(--text-inverse); }
.chip-q.on:hover { filter: brightness(1.1); }
/* Bộ lọc nâng cao (D47, partials/filter.html): nút "Lọc" có số bộ lọc đang bật; chip "Nhãn: giá trị ×"
   dưới thanh công cụ; ngăn kéo dùng khung .pd của ngăn kéo sửa. */
.flt-open.on { border-color: var(--brand-green-700); color: var(--brand-green-700); }
.flt-count {
  min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand-green-700); color: var(--text-inverse);
  font-size: var(--fs-note); line-height: 20px; text-align: center; font-variant-numeric: tabular-nums;
}
.flt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 12px; }
.chip-q.flt { --c-bg: var(--brand-green-50); --c-border: var(--brand-green-700); --c-text: var(--brand-green-700); --c-on: var(--brand-green-700); max-width: 100%; }
.chip-q.flt { white-space: normal; height: auto; min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
.flt-k { font-weight: 500; opacity: 0.85; }
.flt-root .pd-body .date-pair { margin: 0; }
/* Ô chọn nhiều trong ngăn kéo: cao bằng ô nhập của ngăn kéo (44px), nhãn trong ô không làm ô cao thêm. */
.pd-body .tag-box { min-height: 44px; padding: 5px 8px; }
.pd-body .tag-box input.tag-entry { min-height: 30px; }
@media (min-width: 861px) {
  /* L43: mọi ô và nút trên thanh công cụ danh sách cao 32px (ô tìm, Lọc, chip, Cột, Xuất Excel). */
  .density-compact .filters .chip-q, .density-compact .filters .btn.sm { height: 32px; min-height: 32px; }
}
@media (max-width: 860px) {
  /* Điện thoại: chip xuống dòng khi không đủ chỗ, không tràn trang. */
  .filters { min-width: 0; flex-direction: row; flex-wrap: wrap; }
  .filters > .filter-search, .filters > select, .filters > .filter-field, .filters > .select, .filters > .quick-chips { flex: 1 1 100%; }
  /* L43: Lọc, Bỏ lọc, Cột, Xuất Excel chung một hàng, không mỗi nút một dòng. */
  .filters > .btn.ghost { flex: 0 0 auto; }
  .filters > .quick-chips, .filters > .chip-row { order: 1; flex: 1 1 100%; }
  .quick-chips { min-width: 0; }
  .chip-q { height: 40px; }
  .filters .col-menu, .filters .tbl-tools { margin-left: auto; }
  .filters > .tbl-tools { flex: 0 0 auto; }
}

/* Khuôn hồ sơ dùng chung (apps/core/record.py · templates/record/): trang chỉ có nội dung, không
   mục lục / cột phải như hồ sơ đối tác; các mục, ngăn kéo sửa dùng chung lớp .sec / .kv / .pd. */
.record { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1200px; min-width: 0; align-content: start; }
@media (min-width: 861px) {
  .record .sec-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.record > .card { max-width: none; margin: 0; }
.check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
@media (max-width: 860px) { .check-list { grid-template-columns: minmax(0, 1fr); } }
/* Ô chọn nhiều (bộ phận sử dụng CCDC) trên form tạo mã: chiếm cả hàng, ba cột ô tích. */
.field.multi-check { grid-column: 1 / -1; }
.field.multi-check .label { display: block; font-size: var(--fs-table); font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.field.multi-check .check-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .field.multi-check .check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Sao "yêu thích" khách hàng / NCC của từng người (templates/partners/_fav_star.html): sau tên hồ sơ
   trên dòng tiêu đề và trước mã trên dòng danh sách. Rỗng = chưa, đặc màu hổ phách = đã yêu thích.
   Khác nút ghim trang vào "Hay dùng" (biểu tượng ghim, chỉ ở trang danh sách). */
.star-form { display: inline-flex; margin: 0; flex: none; }
.star-btn {
  width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.star-btn:hover { background: var(--neutral-100); color: var(--warning-text); }
.star-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.star-btn.on { color: var(--warning); }
.star-btn:disabled { cursor: progress; }
/* Trên danh sách: cột riêng hẹp ngoài cùng bên trái, căn giữa, nên sao thẳng hàng dù mã dài ngắn.
   Tiêu đề cột là biểu tượng sao (link sắp xếp: có sao lên đầu). Lề âm giữ nút không làm cao dòng. */
.table th.star-col, .table td.star-col { width: 44px; min-width: 44px; padding-left: 6px; padding-right: 0; text-align: center; }
.table th.star-col .th-sort { justify-content: center; gap: 2px; }
.table td.star-col .star-form { vertical-align: middle; margin: -6px 0; }
.table td.star-col .star-btn { width: 28px; height: 28px; }
.table td.star-col + .first-col { padding-left: 4px; }
@media (max-width: 860px) {
  .star-btn { width: 40px; height: 40px; }
  .table td.star-col .star-btn { width: 36px; height: 36px; }
  .table td.star-col .star-form { margin: -10px 0; }
  /* Điện thoại: cột sao và cột mã cùng dính bên trái khi cuộn ngang. */
  .table th.star-col, .table td.star-col { width: 48px; min-width: 48px; position: sticky; left: 0; background: var(--surface-primary); z-index: 1; }
  .table .star-col + .first-col { left: 48px; }
}

/* Form ghép mã sợi, vải, đai (D41): form bên trái, mã xem trước bên phải; hẹp thì xếp dọc. */
.create-layout { display: grid; grid-template-columns: minmax(0, 880px) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
.create-layout .form { max-width: none; }
fieldset.form-group { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
fieldset.form-group + fieldset.form-group { border-top: 1px solid var(--border-subtle); padding-top: 14px; }
fieldset.form-group > legend.section-title { color: var(--text-primary); font-size: var(--fs-heading); margin-bottom: 10px; }
.code-preview { position: sticky; top: 16px; }
.blend-part { display: inline-block; margin-right: 14px; }
/* Tiêu chuẩn kỹ thuật (MS / ngành): nguồn in nhỏ dưới mỗi chỉ tiêu. */
.std-title { margin-top: 18px; }
.std-group + .std-group { margin-top: 10px; }
.std-group dd p { margin: 2px 0 0; }
.std-source { color: var(--text-muted); margin: 2px 0 0; font-size: var(--fs-note); }
/* Bảng so sánh tiêu chuẩn trên hồ sơ sợi: Quốc tế / Minh Sơn tính toán / Test gần nhất, mỗi ô có
   giá trị đậm, ghi chú và nguồn nhỏ bên dưới. Cột chỉ tiêu hẹp, ba cột so sánh chia đều. */
.std-table { table-layout: fixed; width: 100%; }
.std-table th:first-child { width: 112px; }
.std-table td { overflow-wrap: anywhere; }
.std-ref { font-size: var(--fs-note); font-weight: 600; line-height: 0; }
.std-ref a { color: var(--brand-green-700); text-decoration: none; padding: 0 2px; }
.std-notes { margin: 8px 0 0; padding-left: 20px; font-size: var(--fs-note); line-height: var(--lh-note); color: var(--text-muted); }
.std-notes li + li { margin-top: 2px; }
/* Điện thoại: mỗi chỉ tiêu một thẻ, tên cột ghi trên giá trị (rà soát 18/10/2026, L82). */
@media (max-width: 720px) {
  .table.std-table { table-layout: auto; }
  .table.std-table thead { display: none; }
  .table.std-table, .table.std-table tbody, .table.std-table tr, .table.std-table td { display: block; width: auto; }
  .table.std-table tbody tr { padding: 10px 0; border-bottom: 1px solid var(--border-default); }
  .table.std-table tbody td { padding: 4px 0; border: 0; height: auto; }
  .table.std-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-note); color: var(--text-muted); font-weight: 400; }
}
.std-table td { vertical-align: top; }
.std-metric b { display: block; font-weight: 600; }
.std-sub, .std-note, .std-source { display: block; margin-top: 2px; font-size: var(--fs-note); line-height: var(--lh-note); }
.std-sub, .std-note { color: var(--text-secondary); }
.std-source { color: var(--text-muted); }
.std-v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.std-table + .note, .table-wrap + .note { margin-top: 8px; }
/* Thẻ "Dùng trong": chip sắp xếp, 3 mã đầu, "Xem thêm" mở phần còn lại. Mã dài xuống dòng sau dấu
   chấm (<wbr>), không cắt giữa chữ số. */
.used-sort { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.used-sort .chip-q { height: 28px; padding: 0 10px; }
.sib-list a b.code-break { overflow-wrap: normal; word-break: normal; }
/* Cột Qua mã của mục Khách hàng (khách gián tiếp): mã dài xuống dòng sau dấu chấm. */
.table td.via-cell { min-width: 14rem; max-width: 22rem; }
.more-toggle + .muted { margin-top: 6px; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin-top: 4px; }
.check-row .check-field { margin: 0; }
.code-preview .code-name { margin: 0 0 4px; }
.code-preview .preview-tiles { margin: 10px 0; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.code-preview .ok-note { color: var(--text-success, var(--brand-green-800)); margin: 8px 0; }
.code-preview .dup-warn { margin: 10px 0; }
.code-preview .code-big { margin: 8px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-heading); font-weight: 700; overflow-wrap: anywhere; }
/* Tiêu đề phụ trong thẻ (h3): 14px đậm, trong thang cỡ chữ (rà soát quy tắc R26). */
.sub-title { margin: 0; font-size: var(--fs-body); font-weight: 700; }
.code-preview .sub-title { margin: 14px 0 4px; }
.code-preview .kv-val, .code-preview .callout { overflow-wrap: anywhere; min-width: 0; }
.spec-text { margin: 0; line-height: 1.6; }
/* Khung xem trước mã (chủ dự án 06/11/2026 "làm lại UI UX chuyên nghiệp hơn"): đầu khung có nhãn
   trạng thái mã, mã trong nền xám, ô giải mã đổi nền vàng "Đã sửa" (D52), chỉ tiêu tính toán là các
   thẻ số lớn; đổi so với mã gốc thì vạch trái thẳng (D38) + ▲ xanh tăng / ▼ đỏ giảm như {% change %}. */
.cp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-head .section-title { margin: 0; }
.cp-code { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-secondary); }
.cp-code .code-big { margin: 0 0 2px; }
.cp-code .code-name { margin: 0; color: var(--text-secondary); }
.code-tiles .ct.is-changed { background: var(--warning-bg); }
.code-tiles .ct-was { font-size: var(--fs-note); color: var(--warning-text); overflow-wrap: anywhere; }
.cp-sub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 16px 0 8px; }
.code-preview .cp-sub .sub-title { margin: 0; }
.cp-sum { color: var(--text-secondary); }
.cp-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cp-metric { display: grid; gap: 2px; align-content: start; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-primary); min-width: 0; }
/* Vạch trái thẳng (D38): viền trái var(--accent-w), cạnh trái không bo, như .toast. */
.cp-metric.is-up, .cp-metric.is-down { border-color: transparent; border-left: var(--accent-w) solid; border-radius: 0 8px 8px 0; padding-left: 10px; }
.cp-metric.is-up { background: var(--success-bg); border-left-color: var(--success); }
.cp-metric.is-down { background: var(--error-bg); border-left-color: var(--error); }
.cp-m-label { font-size: var(--fs-note); color: var(--text-secondary); }
.cp-m-val { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cp-m-val b { font-size: var(--fs-title-sm); font-weight: 700; color: var(--text-primary); }
.cp-metric.is-up .cp-m-val b { color: var(--success-text); }
.cp-metric.is-down .cp-m-val b { color: var(--error-text); }
.cp-m-unit { font-size: var(--fs-table); color: var(--text-secondary); }
.cp-m-delta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: var(--fs-table); }
.cp-m-was { font-size: var(--fs-note); color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Ô nhập đã đổi so với mã gốc (form sửa thông số, nhân bản): viền vàng "Đã sửa" (D52) và dòng
   "Trước: …" màu cảnh báo ngay dưới ô (js/code-preview.js). */
.create-layout .field.is-changed input[type="text"], .create-layout .field.is-changed select, .create-layout .field.is-changed .select-trigger { border-color: var(--brand-harvest-500); box-shadow: inset 0 0 0 1px var(--brand-harvest-500); }
.field-was { margin-top: 4px; font-size: var(--fs-note); color: var(--warning-text); overflow-wrap: anywhere; }
.field-was b { margin-right: 4px; }
/* Thông số kỹ thuật mặt hàng: số đậm, đơn vị nhỏ xám cạnh số; ghi chú công thức dưới mục. */
/* Hồ sơ mặt hàng (Figma 25 F, khung 468:2620): bảng thông số kỹ thuật nhóm theo mục, ô giải mã ở đầu
   hồ sơ, thẻ quy đổi đơn vị và danh sách cùng mặt hàng gốc ở cột phải. */
.spec-table tbody th[scope="row"] {
  font-size: var(--fs-table); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-primary);
  background: transparent; border-bottom: 1px solid var(--border-subtle); white-space: normal;
}
.spec-table td { height: 40px; }
.spec-table td.num b { font-variant-numeric: tabular-nums; }
.spec-table td.num a.code { font-weight: 600; color: var(--brand-green-700); overflow-wrap: anywhere; }
.spec-table td.note { white-space: normal; font-size: var(--fs-note); }
/* Tiêu đề nhóm thông số (chủ dự án 06/11/2026: cần nổi bật hơn dòng): nền xanh nhạt, vạch trái thẳng 3px (D38) vẽ bằng nền để không ghép chéo với viền dưới tiêu đề bảng, chữ xanh đậm 13px. */
.spec-table tbody tr.grp th { border-bottom: 1px solid var(--border-subtle); padding-top: 9px; padding-bottom: 9px; font-size: var(--fs-table); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-green-800); text-align: left; background: linear-gradient(to right, var(--brand-green-700) var(--accent-w), var(--brand-green-50) var(--accent-w)); }
.spec-table tr.grp-note td { font-size: var(--fs-note); color: var(--text-secondary); white-space: normal; }
.code-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0; margin-top: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; }
.code-tiles .ct { display: grid; gap: 1px; padding: 10px 12px; min-width: 0; box-shadow: 1px 0 0 var(--border-subtle), 0 1px 0 var(--border-subtle); }
.code-tiles .ct-code { font-size: var(--fs-table); color: var(--brand-green-800); overflow-wrap: anywhere; }
.code-tiles .ct-label { font-size: var(--fs-note); color: var(--text-muted); }
.code-tiles .ct-val { font-size: var(--fs-table); font-weight: 600; overflow-wrap: anywhere; }
.conv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.conv-tile { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--neutral-100); }
.conv-tile .muted { font-size: var(--fs-note); }
.conv-tile b { font-size: var(--fs-heading); font-variant-numeric: tabular-nums; }
.conv-calc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.conv-calc .conv-in { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-primary); }
.conv-calc input { width: 110px; border: 0; padding: 8px 0; font-size: var(--fs-input); background: transparent; }
.conv-calc .unit { font-size: var(--fs-table); color: var(--text-secondary); }
.conv-calc output { font-size: var(--fs-heading); font-weight: 700; color: var(--brand-green-700); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .table-wrap .spec-table { min-width: 0; }
  .spec-table thead th:nth-child(5), .spec-table tbody td:nth-child(5), .spec-table td.note { display: none; }
  .spec-table .spec-note { display: none; }
  .spec-table th, .spec-table td { padding: 10px 6px; }
  .spec-table tbody th[scope="row"] { width: 40%; }
  .spec-table td.num { white-space: normal; overflow-wrap: break-word; }
}
.sib-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sib-list li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border-subtle); }
.sib-list li:first-child { border-top: 0; }
.sib-list a { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.sib-list a b { display: block; font-size: var(--fs-table); color: var(--brand-green-700); overflow-wrap: anywhere; }
.sib-list a .sub { display: block; font-size: var(--fs-note); color: var(--text-muted); }
/* Hồ sơ sợi, vải, đai (Figma 25.2): ô màu mẫu thay chữ nhóm, tên dưới mã, hàng nhãn, nút sao chép,
   dải chỉ số tự chia cột, hộp việc cần xử lý màu hổ phách, bảng tỷ lệ pha. */
.rec-top:has(.swatch-fill) { align-items: flex-start; }
.logo-tile:has(.swatch-fill) { padding: 6px; background: var(--neutral-100); border: 1px solid var(--border-subtle); }
.swatch-fill { position: relative; display: block; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
.swatch-fill i { position: absolute; inset: 0; }
/* Hai màu (sợi dọc / ngang): nửa sau cắt chéo. */
.swatch-fill i + i { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.sw-whi { background: #f4f3ee; }
.sw-nat { background: #ece4d0; }
.sw-bei { background: #d8c6a0; }
.sw-cre { background: #efe6cc; }
.sw-yel { background: #e8c547; }
.sw-ora { background: #e8873a; }
.sw-red { background: #c4321f; }
.sw-pin { background: #e89ab8; }
.sw-vio { background: #7b4fa0; }
.sw-pur { background: #7b4fa0; }
.sw-blu { background: #2f5da8; }
.sw-nav { background: #22345e; }
.sw-gre { background: #3c8d5a; }
.sw-bro { background: #7a5230; }
.sw-gra { background: #9aa0a6; }
.sw-gry { background: #9aa0a6; }
.sw-sil { background: #c0c4c8; }
.sw-bla { background: #222222; }
.rec-sub { margin: 0; font-size: var(--fs-table); font-weight: 500; color: var(--text-secondary); overflow-wrap: anywhere; text-wrap: pretty; }
/* Tên tiếng Anh tự tạo (chủ dự án 20/10/2026): dòng phụ dưới tên tiếng Việt, nhãn EN nhỏ. */
.rec-sub-en, .kv-val-en { margin: 0; font-size: var(--fs-table); color: var(--text-secondary); overflow-wrap: anywhere; text-wrap: pretty; }
.kv-val-en { margin-top: 2px; }
.lang-tag { display: inline-block; margin-right: 6px; padding: 0 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--border-default); font-size: var(--fs-note); font-weight: 600; color: var(--text-secondary); vertical-align: 1px; }
.rec-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Nhãn dài ("Mua của Công ty TNHH …") xuống dòng trong nhãn, không làm trang tràn ngang (R27). */
.rec-pills .tag, .rec-pills .pill { max-width: 100%; white-space: normal; }
.tag.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-default); }
.copy-btn { flex: none; }
.stats.item-stats, .stats.list-stats, .stats.rec-stats, .stats.bom-weights { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* Dải tóm tắt hồ sơ sản phẩm: 5 ô một hàng như Figma 25.2 (468:2620); chữ tự nhỏ lại theo @container. */
@media (min-width: 861px) { .stats.item-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.todo-box { display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; background: var(--warning-bg); border: 1px solid var(--warning-border); }
.todo-box + .todo-box { margin-top: 8px; }
.todo-title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-table); font-weight: 700; color: var(--warning-text); }
.todo-title .ic { color: var(--warning); }
.todo-box p:not(.todo-title) { margin: 0; font-size: var(--fs-table); color: var(--text-primary); overflow-wrap: anywhere; }
.todo-box .btn { justify-self: start; }
.blend-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.blend-table td.num { font-variant-numeric: tabular-nums; }
.spec-note { display: block; margin-top: 2px; font-size: var(--fs-note); font-weight: 400; color: var(--text-muted); }
/* Hẹp: mã xem trước lên đầu, bấm "Tính mã" xong thấy ngay. */
@media (max-width: 1200px) { .create-layout { grid-template-columns: minmax(0, 1fr); } .code-preview { position: static; order: -1; } }
@media (max-width: 640px) { .create-layout .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* Tồn kho (D63, Figma SX-KHO-M1): điện thoại mỗi dòng là một thẻ: mã (tên dưới mã), kho, tồn cuối và kg. */
@media (max-width: 600px) {
  .table.stock thead, .table.stock td.s-group, .table.stock td.s-unit, .table.stock td.s-open, .table.stock td.s-in, .table.stock td.s-out, .table.stock td.s-lots, .table.stock tfoot { display: none; }
  .table.stock, .table.stock tbody { display: block; width: 100%; min-width: 0; }
  .table.stock tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ma age" "kho kho" "ton kg"; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
  .table.stock tbody td { display: block; height: auto; min-height: 0; padding: 0; border: 0; background: none; text-align: left; line-height: 1.4; }
  .table.stock tbody td.first-col { grid-area: ma; overflow-wrap: anywhere; }
  .table.stock tbody td.s-kho { grid-area: kho; font-size: var(--fs-note); }
  .table.stock tbody td.s-close { grid-area: ton; }
  .table.stock tbody td.s-kg { grid-area: kg; text-align: right; }
  .table.stock tbody td.s-age { grid-area: age; text-align: right; font-size: var(--fs-note); }
  .table.stock tbody td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-note); color: var(--text-muted); font-weight: 400; }
  .table.stock tbody tr.empty-row { display: block; }
  .table.stock td.s-close .cell-unit { display: none; }
}
.table.voucher-lines a.code { overflow-wrap: anywhere; }
/* Biên bản kiểm kê: ô gõ số đếm, kg cân, ghi chú ngay trong bảng dòng (bảng dùng chung vẫn sắp xếp,
   ẩn / hiện cột được); dòng có ô sai tô đỏ nhạt. */
.table.count-lines a.code { overflow-wrap: anywhere; }
.table.count-lines td.c-input input { width: 110px; min-height: 30px; text-align: right; }
.table.count-lines td.c-note input { width: 100%; min-width: 160px; min-height: 30px; }
.table.count-lines tr.has-error td { background: var(--error-bg); }
.count-filter { margin: 0 0 10px; }
.table.count-lines .m-only { display: none; }
/* Điện thoại: thủ kho đếm tại kho, ô Số đếm phải thấy ngay; bỏ cột #, đơn vị, kg sổ. */
@media (max-width: 640px) {
  .table.count-lines .m-hide { display: none; }
  .table.count-lines .m-only { display: block; }
  .table.count-lines td.c-input input { width: 84px; }
}
.count-add { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-default); }
/* Form phiếu kho nháp (D63): kho và loại phiếu cố định ở đầu form; ô mặt hàng và ô lô rộng gấp đôi. */
.voucher-fixed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 12px; color: var(--text-secondary); }
.voucher-fixed b { color: var(--text-primary); }
.voucher-lines-form .subform-row > .field:nth-of-type(-n+2) { grid-column: span 2; }
@media (max-width: 860px) {
  .voucher-lines-form .subform-row { grid-template-columns: minmax(0, 1fr); }
  .voucher-lines-form .subform-row > .field:nth-of-type(-n+2) { grid-column: auto; }
}

/* Bàn làm việc kho và việc hằng ngày (D63, phương án Kho 6.2 A–B): điện thoại trước, ô số to. */
.desk { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.desk-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-heading); margin: 0 0 8px; }
.desk-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.desk-task {
  display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border-default); border-radius: 12px;
  color: var(--text-primary); text-decoration: none; min-height: 56px;
}
a.desk-task:hover { border-color: var(--brand-green-700); background: var(--brand-green-50); }
.desk-task.off { color: var(--text-secondary); background: var(--surface-secondary); }
.desk-kind { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--brand-green-50); color: var(--brand-green-700); font-weight: 700; font-size: var(--fs-note); }
.desk-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.roll-in { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.roll-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.roll-form input.big-num { font-weight: 600; min-height: 48px; }
.roll-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.roll-head h2 { font-size: var(--fs-heading); margin: 0; }
.roll-sum { margin: 0; }
.roll-rows { list-style: none; margin: 0 0 12px; padding: 0; }
.roll-row { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 40px 10px 0; border-bottom: 1px solid var(--border-subtle); }
.roll-row .roll-item, .roll-row .roll-note { grid-column: 1 / -1; overflow-wrap: anywhere; }
.roll-row .roll-qty { grid-column: 2; grid-row: 1; white-space: nowrap; }
.roll-row form { position: absolute; top: 6px; right: 0; }
.roll-row .row-del { position: static; }
.roll-post { display: flex; justify-content: flex-end; gap: 10px; }
.error-text { color: var(--error-text); }
@media (max-width: 860px) { .roll-in { grid-template-columns: minmax(0, 1fr); } }

/* Nhu cầu NVL (S9): dải chỉ số + bảng tuần + bảng dòng của tuần đang chọn. */
.need-page { display: grid; gap: 16px; }
.sec-note { margin: 4px 0 8px; font-size: var(--fs-note); color: var(--text-secondary); }
.chip-q.kind { --c-bg: var(--brand-green-50); --c-border: var(--border-subtle); --c-text: var(--text-primary); --c-on: var(--brand-green-700); }
.table tr.on > td { background: var(--brand-green-50); }

/* Danh sách Mặt hàng (Figma 25 F, khung 467:2406): menu loại hàng bên trái có số đếm, dải giải mã cấu
   trúc mã, cột mã kèm tên ở dòng dưới. Điện thoại: menu thành dải cuộn ngang trên đầu. */
.list-nav-page { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 20px; align-items: start; }
.list-nav-main { min-width: 0; }
.type-nav { position: sticky; top: calc(var(--top-h) + 20px); min-width: 0; }
.type-nav .nav-sec {
  padding: 8px 8px 2px; font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.code-strip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 12px; padding: 10px 14px;
  border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-primary); font-size: var(--fs-note);
}
.code-strip .cs-title { font-weight: 700; color: var(--text-secondary); margin-right: 4px; }
.code-strip .cs-seg { display: inline-flex; align-items: baseline; gap: 5px; color: var(--text-muted); }
.code-strip .cs-seg .code { font-size: var(--fs-table); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.code-strip .cs-dot { color: var(--text-muted); }
.table td.code-cell { min-width: 220px; max-width: 440px; white-space: normal; }
/* Mã giữ một dòng, không bẻ ở dấu "/" hay giữa số (rà soát quy tắc R34). */
.table td.code-cell b { white-space: nowrap; }
/* Mã dài (filter code_break): chỉ xuống dòng sau dấu chấm, mỗi đoạn một khối liền. */
.code-br { white-space: normal; }
.code-br .cb-seg { white-space: nowrap; }
.table td.code-cell .sub { display: block; font-size: var(--fs-note); color: var(--text-muted); white-space: normal; }
.table td.muted { color: var(--text-muted); }
.item-stats, .list-stats { margin-bottom: 12px; }
.stats a.stat.on { background: var(--brand-green-50); }
@media (min-width: 861px) {
  .stats.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.stats a.stat { color: inherit; text-decoration: none; }
.stats a.stat:hover { background: var(--neutral-100); }
.stat-unit { margin-left: 4px; font-size: var(--fs-table); font-weight: 500; color: var(--text-secondary); }
.stat-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.stat-col { display: grid; gap: 2px; align-content: start; min-width: 0; }
.stat-value.warning { color: var(--warning-text); }
.stat-value.error { color: var(--error-text); }
/* RS3 (chủ dự án 04/11/2026): dưới 1200 px (tablet ngang 1024, tablet dọc 768, điện thoại) menu trái
   thành hàng chip trên đầu để bảng lấy hết bề ngang. */
@media (max-width: 1199px) {
  .list-nav-page { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .type-nav { position: static; }
  /* Dải cuộn ngang theo kiểu tab chung (khay xám, mục chọn ô trắng; rà soát L452). */
  .type-nav .toc-card {
    display: flex; gap: 2px; padding: 4px; border: 0; border-radius: 12px; background: var(--neutral-100);
    overflow-x: auto; scrollbar-width: none;
  }
  .type-nav .toc-card::-webkit-scrollbar { display: none; }
  .type-nav .toc-title, .type-nav .nav-sec { display: none; }
  .type-nav .toc { display: flex; gap: 2px; }
  .type-nav .toc-link { flex: none; min-height: 36px; padding: 0 12px; border-radius: 9px; white-space: nowrap; color: var(--text-muted); font-weight: 600; }
  .type-nav .toc-link:hover { background: transparent; color: var(--text-primary); }
  .type-nav .toc-link.on, .type-nav .toc-link.on:hover {
    background: var(--surface-primary); color: var(--text-primary); font-weight: 600;
    box-shadow: 0 1px 2px rgb(17 24 20 / 0.1), 0 0 0 1px rgb(17 24 20 / 0.04);
  }
  .type-nav .toc-link.on::before { display: none; }
  .type-nav .toc-meta { background: var(--surface-primary); }
  .type-nav .toc-link.on .toc-meta { background: var(--neutral-100); }
}
/* Nạp dữ liệu (D51): trang một nguồn — form chạy thử, lịch sử, báo cáo lệnh nạp. */
.data-load-page { display: grid; gap: 16px; }
.data-load-page .form-stack { display: grid; gap: 12px; max-width: 560px; }
.data-load-page .callout form { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.load-output { margin: 8px 0 0; padding: 12px; max-height: 480px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-secondary); border: 1px solid var(--border-subtle); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-note); line-height: 1.5; }
.data-load-page .sub-head { margin: 16px 0 0; font-size: var(--fs-body); font-weight: 600; }
.toolbar .grow { flex: 1 1 320px; margin: 0; }
.data-load-page input[type="file"], .ct-sign input[type="file"] { font-size: var(--fs-input); max-width: 100%; }
.data-load-page input[type="file"]::file-selector-button, .ct-sign input[type="file"]::file-selector-button { margin-right: 10px; padding: 6px 12px; font: inherit; font-weight: 600; color: var(--text-primary); background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 8px; cursor: pointer; }
.sheet-status { margin: 0 0 8px; overflow-wrap: anywhere; }
.sheet-status .ic { margin-right: 4px; vertical-align: -2px; }

/* --- Thiết lập của tôi (D57, templates/accounts/my_settings.html) ------------------------- */
.set-desc { margin: 0 0 16px; }
.set-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.set-grid .card { margin-bottom: 0; }
.set-side { display: grid; gap: 16px; }
.set-field { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.set-legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: var(--fs-body); }
.set-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.set-opt { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 10px; cursor: pointer; }
.set-opt:hover { background: var(--brand-green-50); }
.set-opt:has(input:checked) { border-color: var(--brand-green-700); background: var(--brand-green-50); }
.set-opt input { margin-top: 3px; flex: none; }
.set-opt .sub { display: block; font-size: var(--fs-note); color: var(--text-muted); font-weight: 400; }
.set-list { list-style: none; margin: 0; padding: 0; }
.set-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.set-list li:last-child { border-bottom: 0; }
.set-list li > a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); }
.set-list form { margin: 0; }
#mat-khau .muted { margin: 0 0 12px; }
@media (max-width: 860px) { .set-grid { grid-template-columns: minmax(0, 1fr); } }

/* Thống kê đơn hàng (D58): biểu đồ theo kỹ năng dataviz. Màu nhóm cố định theo thứ tự (không xoay
   vòng, đã chạy validate_palette: CVD ΔE ≥ 9,1); chữ luôn dùng màu chữ, màu chỉ ở vạch / ô khoá.
   Cột ≤ 24px, đầu bo 4px, đáy vuông, khe 2px màu nền giữa các đoạn; lưới mảnh 1px. */
.dash { display: grid; gap: 16px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
.viz-card { padding-bottom: 16px; }
.list-main > .viz-card + .viz-card { margin-top: 16px; }
.view-tabs { margin-bottom: 12px; align-self: flex-start; }
@media (max-width: 600px) { .viz-vs { display: none; } }
.s1 { --viz: #2a78d6; } .s2 { --viz: #eb6834; } .s3 { --viz: #1baf7a; } .s4 { --viz: #eda100; } .s0 { --viz: #9aa39e; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; padding: 0; list-style: none; font-size: var(--fs-table); color: var(--text-secondary); }
.viz-legend li { display: inline-flex; align-items: center; gap: 6px; }
.viz-key { width: 10px; height: 10px; border-radius: 2px; background: var(--viz); }
.viz-plot { position: relative; height: 320px; margin-left: 44px; }
.viz-grid { position: absolute; inset: 0 0 22px 0; }
.viz-tick { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border-subtle); }
.viz-tick span { position: absolute; right: calc(100% + 8px); top: -8px; font-size: var(--fs-note); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.viz-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.viz-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 22px; outline: none; cursor: default; border-radius: 6px; }
.viz-col:hover, .viz-col:focus-visible { background: color-mix(in srgb, var(--surface-secondary) 80%, transparent); }
.viz-col:focus-visible { box-shadow: 0 0 0 2px var(--border-focus); }
.viz-bars { height: 100%; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.viz-stack { width: min(24px, 60%); display: flex; flex-direction: column-reverse; gap: 2px; min-height: 0; }
/* So sánh nhiều năm (tối đa 3): các cột năm đứng cạnh nhau trong tháng, năm cũ nhạt hơn. */
.viz-bars.n2 .viz-stack { width: min(18px, 42%); }
.viz-bars.n3 .viz-stack { width: min(14px, 30%); }
.viz-stack.shade-1 { opacity: 0.6; }
.viz-stack.shade-2 { opacity: 0.35; }
.viz-key.yr { background: var(--text-secondary); }
.viz-key.shade-1 { opacity: 0.6; }
.viz-key.shade-2 { opacity: 0.35; }
.viz-legend-sep { width: 1px; height: 12px; background: var(--border-default); }
.viz-tip-year { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-subtle); font-weight: 600; }
.viz-tip-year b { font-variant-numeric: tabular-nums; }
.viz-tip-year .chg { margin-left: auto; }
.filters > .year-field { min-width: 200px; }
.viz-seg { display: block; background: var(--viz); min-height: 0; }
.viz-seg:last-child { border-radius: 4px 4px 0 0; }
.viz-x { position: absolute; bottom: 0; font-size: var(--fs-note); color: var(--text-secondary); }
.viz-col.now .viz-x { color: var(--text-primary); font-weight: 700; }
.viz-tip { position: absolute; top: 0; z-index: 2; min-width: 170px; padding: 10px 12px; border-radius: 10px; background: var(--surface-primary); border: 1px solid var(--border-default); box-shadow: 0 8px 24px rgb(17 24 20 / 0.12); font-size: var(--fs-table); pointer-events: none; }
.viz-tip-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: var(--text-secondary); }
.viz-tip-head b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.viz-tip-head > * { white-space: nowrap; }
/* Dòng gợi ý: màu, tên nhóm bên trái, số căn phải (chủ dự án 05/11/2026). */
.viz-tip-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
.viz-tip-row b { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.viz-tip-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.viz-line { width: 12px; height: 2px; border-radius: 1px; background: var(--viz); }
.hbars { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "track track"; gap: 4px 12px; font-size: var(--fs-table); outline: none; border-radius: 6px; }
.hbar:focus-visible { box-shadow: 0 0 0 2px var(--border-focus); }
.hbar-name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-val { grid-area: val; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hbar-track { grid-area: track; height: 10px; }
.hbar-fill { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: #2a78d6; }
.hbar.other .hbar-fill { background: #9aa39e; }
.table tfoot th, .table tfoot td { border-top: 1px solid var(--border-default); font-weight: 700; background: var(--surface-secondary); }
@media (max-width: 860px) { .viz-plot { height: 220px; margin-left: 36px; } .viz-stack { width: min(16px, 70%); } .viz-bars.n2 .viz-stack { width: 42%; } .viz-bars.n3 .viz-stack { width: 30%; } }
/* Ô chọn thuộc tính trên danh sách sợi, vải, đai: rộng vừa nội dung; điện thoại hai ô một hàng. */
.filters > .attr-row { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.attr-row > .attr-field { flex: 0 1 180px; min-width: 120px; }
.attr-row > .attr-field.start-thang_vao { flex: 0 1 360px; }
/* Ô chọn trong ô thuộc tính co theo ô (điện thoại hai ô một hàng không tràn mép phải). */
.filters .attr-row > .attr-field > select { width: 100%; min-width: 0; }
@media (max-width: 860px) {
  .attr-row > .attr-field { flex: 1 1 calc(50% - 6px); }
  .attr-row > .attr-field.start-thang_vao { flex: 1 1 100%; }
}
/* Màn ≤ 1280px: ngăn kéo thường (960px) đã ≥ 3/4 màn hình nên không cần nút mở rộng. */
@media (max-width: 1280px) { .pdf-view [data-pv-wide] { display: none; } .pdf-view.is-wide .pdf-view-panel { width: min(960px, 100%); } }

/* Logo ngân hàng (apps/core/banks.py, {% bank_logo %}): ô vuông bo góc kiểu icon app; trong bảng
   tài khoản là cột hẹp riêng ngoài cùng bên trái, như cột sao. */
/* Bảng tài khoản: dòng ngừng dùng gập lại, ô tích ẩn #tk-off-all mở ra (Đ4). */
input.fold-all[type="checkbox"] { display: none; }
.fold-all:not(:checked) ~ .table-wrap .tk-off { display: none; }
.bank-logo { flex: none; display: block; width: 20px; height: 20px; border-radius: 5px; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px var(--border-subtle); }
svg.bank-logo { box-shadow: none; background: none; }
.table th.logo-col, .table td.logo-col { width: 36px; min-width: 36px; padding-left: 8px; padding-right: 0; }
.table td.logo-col + .first-col { padding-left: 8px; }
.pd-row > .bank-logo { width: 32px; height: 32px; border-radius: 8px; }
@media (max-width: 860px) {
  .table th.logo-col, .table td.logo-col { position: sticky; left: 0; background: var(--surface-primary); z-index: 1; }
  .table th.logo-col { background: var(--brand-green-50); }
  .table .logo-col + .first-col { left: 36px; }
}

/* Ngăn kéo "Các thay đổi đã làm" trên trang chủ (templates/core/_changes_drawer.html). */
.chg-day { display: grid; gap: 8px; }
.chg-date { margin: 0; font-size: var(--fs-table); font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.chg-ok { flex: none; min-width: 76px; justify-content: center; }
.chg-ok.on { color: var(--success); }

/* Ô tải file dùng chung (core/widgets/file_drop.html, Đ5): nút "Chọn file …" và vùng kéo thả. */
.file-drop { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px; border: 1px dashed var(--border-default); border-radius: 8px; background: var(--surface-primary); cursor: pointer; font-size: var(--fs-input); }
.file-drop > input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-drop:focus-within { outline: 2px solid var(--brand-green-700); outline-offset: 2px; }
.file-drop.is-over { border-color: var(--brand-green-700); background: var(--brand-green-50); }
.file-drop-text { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.file-drop-name { flex: 1 1 100%; overflow-wrap: anywhere; }
.file-drop.has-file .file-drop-name { color: var(--text-primary); font-weight: 600; }

/* Menu "…" trong dòng bảng (Lịch sử thay đổi, Đ10): bảng cuộn ngang nên menu mở ngay dưới nút,
   trong ô, không bị cắt. */
.row-menu { display: inline-block; text-align: left; }
.row-menu > .menu-list { position: static; margin-top: 4px; min-width: 0; box-shadow: none; }
/* Điện thoại không kéo thả được: bỏ dòng gợi ý kéo thả (tên file đã chọn vẫn hiện). */
@media (max-width: 720px) { .reg-form:not(.has-file) .reg-drop-hint { display: none; } }

/* Lực dự kiến theo tỷ lệ pha (thẻ cột phải hồ sơ sợi) */
.force-calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 16px; align-items: start; }
.force-in { display: grid; }
.force-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: 8px; min-height: 36px; padding: 2px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-table); color: var(--text-secondary); white-space: nowrap; }
.force-row:last-of-type { border-bottom: 0; }
.force-row.pp { color: var(--text-primary); font-weight: 600; }
.force-row.pp b { text-align: right; padding-right: 10px; font-variant-numeric: tabular-nums; }
.force-row .conv-in { display: flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-primary); }
.force-row input { width: 100%; min-width: 0; border: 0; padding: 5px 0; font-size: var(--fs-table); text-align: right; background: transparent; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.force-row .unit { font-size: var(--fs-note); color: var(--text-secondary); }
.force-in .callout { margin: 6px 0 0; }
.force-out { display: grid; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--neutral-100); }
.force-main, .force-std { display: grid; gap: 2px; }
.force-main b { font-size: var(--fs-hero); line-height: 1.15; font-variant-numeric: tabular-nums; }
.force-std { padding-top: 8px; border-top: 1px solid var(--border-default); }
.force-std b { font-size: var(--fs-heading); font-variant-numeric: tabular-nums; }
.force-verdict { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-variant-numeric: tabular-nums; }
.force-warn { color: var(--warning-text); }
.force-how summary { list-style: none; cursor: pointer; }
.force-how summary::-webkit-details-marker { display: none; }
.force-how p { margin: 6px 0 0; }
/* Ô dùng chung với trang khác (Đ16): biểu tượng liên kết cạnh nhãn, chú thích khi rê chuột. */
.kv-linked { color: var(--brand-green-700); cursor: help; }

/* Giấy uỷ quyền trong ngăn kéo mục Đại diện (partners/_authorization_file.html, 18/10/2026). */
.uq-box .reg-file { margin-bottom: 0; }
.uq-read { display: grid; gap: 4px; justify-items: start; }
.uq-read > [hidden] { display: none; }
.uq-msg { display: grid; gap: 2px; }
.kv-val .kv-link { font-size: var(--fs-note); font-weight: 600; }
.uq-box .reg-doc[hidden] { display: none; }

/* Tỷ lệ pha so sánh các bản (19/10/2026): mỗi bản một cột, bản đang chạy tô nền. */
/* Tồn kho theo loại kho (đề xuất Kho 19/10/2026): một ô mỗi kho, bấm để lọc; dải thống kê của kho đang chọn. */
.house-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin-bottom: 12px; }
.house-tile { min-width: 0; display: grid; gap: 2px; align-content: start; padding: 10px 12px; border-radius: 10px; background: var(--surface-primary); border: 1px solid var(--border-subtle); color: var(--text-primary); text-decoration: none; font-size: var(--fs-table); }
.house-tile:hover { border-color: var(--brand-green-700); }
.house-tile:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.house-tile.on { border-color: var(--brand-green-700); box-shadow: inset 0 0 0 1px var(--brand-green-700); background: var(--brand-green-50); }
.ht-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 6px; font-weight: 600; }
.ht-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-big { font-size: var(--fs-title-sm); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.ht-unit { margin-left: 3px; font-size: var(--fs-note); font-weight: 500; color: var(--text-secondary); }
.ht-sep { margin: 0 4px; color: var(--text-muted); font-weight: 400; }
.ht-none { font-size: var(--fs-table); font-weight: 500; color: var(--text-muted); }
.ht-io { display: flex; flex-wrap: wrap; gap: 0 8px; font-variant-numeric: tabular-nums; }
.ht-in { color: var(--success-text); }
.ht-out { color: var(--error-text); }
.ht-note, .ht-sub { color: var(--text-muted); white-space: normal; }
.ht-badges .tag { white-space: normal; }
.ht-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.chip-q.error .chip-count { background: var(--error-bg); color: var(--error-text); }
.chip-q.warning .chip-count { background: var(--warning-bg); color: var(--warning-text); }
/* Bảng nhiều đơn vị (tồn kho mọi nhóm): đơn vị của dòng ngay sau số, chữ nhạt. */
.table td .cell-unit { margin-left: 4px; color: var(--text-muted); font-weight: 400; }
td.s-age.warn { color: var(--warning-text); font-weight: 600; }
.house-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; margin-bottom: 12px; }
.house-panel { display: grid; gap: 8px; align-content: start; padding: 12px 14px; border-radius: 10px; background: var(--surface-primary); border: 1px solid var(--border-subtle); min-width: 0; }
.hd-title { margin: 0; font-size: var(--fs-table); font-weight: 600; color: var(--text-secondary); }
.hd-ages { display: grid; gap: 6px; }
.hd-age { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: var(--fs-note); }
.hd-age progress { width: 100%; height: 8px; appearance: none; border: 0; border-radius: 4px; background: var(--border-subtle); overflow: hidden; }
.hd-age progress::-webkit-progress-bar { background: var(--border-subtle); border-radius: 4px; }
.hd-age progress::-webkit-progress-value { background: var(--brand-green-700); border-radius: 4px; }
.hd-age progress::-moz-progress-bar { background: var(--brand-green-700); border-radius: 4px; }
.hd-age.old progress::-webkit-progress-value { background: var(--warning); }
.hd-age.old progress::-moz-progress-bar { background: var(--warning); }
.hd-age .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-chart { width: 100%; height: 110px; }
.hd-axis { stroke: var(--border-default); }
.hd-in { fill: var(--brand-green-700); }
.hd-out { fill: var(--warning); }
.hd-legend { margin: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: var(--fs-note); color: var(--text-muted); }
.hd-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.hd-key.in { background: var(--brand-green-700); }
.hd-key.out { background: var(--warning); margin-left: 6px; }
.hd-kv { margin: 0; display: grid; gap: 10px; }
.hd-kv dt { font-size: var(--fs-note); color: var(--text-secondary); }
.hd-kv dd { margin: 0; }
.hd-kv dd.num { font-size: var(--fs-title-sm); font-weight: 700; font-variant-numeric: tabular-nums; text-align: left; }
.stock-chips .fchip { gap: 6px; }
.hd-note, .hd-empty { margin: 0; font-size: var(--fs-note); color: var(--text-muted); }
@media (max-width: 600px) {
  .house-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .house-tile { padding: 8px 10px; }
  .ht-big { font-size: var(--fs-heading); }
}
input[data-blend-pp] { background: var(--surface-secondary); font-weight: 600; cursor: default; }
input[data-blend-pp].is-invalid { color: var(--error-text); }
.quick-chips .chip-gap { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--border-default); }

/* Thẻ Tỷ lệ pha: mỗi bản một khối, thành phần trái, kết quả test phải. */
.blend-list { display: grid; gap: 10px; margin-bottom: 8px; }
.blend-ver { border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px 14px; background: var(--surface-primary); }
.blend-ver.running { border-color: var(--brand-green-700); background: linear-gradient(var(--brand-green-50), var(--brand-green-50)) top / 100% 44px no-repeat, var(--surface-primary); }
.bv-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; }
.bv-head h3 { margin: 0; font-size: var(--fs-body); font-weight: 700; }
.bv-when { font-size: var(--fs-table); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bv-note { font-size: var(--fs-table); }
.bv-head .spacer { flex: 1; }
.bv-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px 24px; align-items: start; }
.mix-bar { display: block; width: 100%; height: 10px; border-radius: 5px; overflow: hidden; background: var(--neutral-100); }
.mix-list { display: grid; margin: 8px 0 0; }
.mix-list > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-table); }
.mix-list > div:last-child { border-bottom: 0; }
.mix-list dt { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-secondary); font-weight: 500; white-space: nowrap; }
.mix-list dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mix-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.mix-pp { background: var(--brand-green-700); fill: var(--brand-green-700); }
.mix-taical { background: var(--neutral-400); fill: var(--neutral-400); }
.mix-color { background: var(--brand-harvest-500); fill: var(--brand-harvest-500); }
.mix-uv { background: var(--info); fill: var(--info); }
.mix-recycled { background: var(--warning); fill: var(--warning); }
.mix-lldpe { background: var(--brand-green-900); fill: var(--brand-green-900); }
.bv-tests { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.bv-stat { display: grid; gap: 1px; align-content: start; padding: 7px 10px; border-radius: 8px; background: var(--neutral-100); min-width: 0; }
.bv-stat .l { font-size: var(--fs-note); color: var(--text-secondary); white-space: nowrap; }
.bv-stat b { font-size: var(--fs-table); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-stat .s { font-size: var(--fs-note); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bv-stat.success { background: var(--success-bg); }
.bv-stat.success b { color: var(--success-text); }
.bv-stat.error { background: var(--error-bg); }
.bv-stat.error b { color: var(--error-text); }
.bv-stat.warning { background: var(--warning-bg); box-shadow: inset 0 0 0 1px var(--warning-border); }
.bv-stat.warning b, .bv-stat.warning .s { color: var(--warning-text); }
.bv-stat.wide { grid-column: 1 / -1; }
.bv-stat.wide b { white-space: normal; overflow: visible; }
.bv-empty { margin: 0; }
/* Ngăn kéo thêm / sửa bản tỷ lệ pha: ô nhựa PP tự tính chỉ đọc, hiện như số. */
.pd-part-first { margin-top: 0; padding-top: 0; border-top: 0; }
.blend-form .pp-val { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.blend-form .pp-val input { width: 100%; border: 0; padding: 5px 0; background: transparent; text-align: right; font-weight: 700; font-size: var(--fs-table); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.blend-form .pp-val input.is-invalid { color: var(--error-text); }
.blend-form .pp-val .unit { font-size: var(--fs-note); color: var(--text-secondary); padding-right: 9px; }
.force-row.has-error .conv-in { border-color: var(--error); }
.blend-rows { max-width: 420px; }
.force-row .conv-in:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 2px var(--brand-green-50); }
.force-row .conv-in input:focus, .force-row .conv-in input:focus-visible { outline: 0; box-shadow: none; border: 0; }
/* Thẻ Đại diện ký hợp đồng (partners/_signer_body.html, chủ dự án 19/10/2026): mỗi người một khối,
   hai khối cạnh nhau khi đủ chỗ; người ký có viền trái xanh và nhãn "Ký hợp đồng"; giấy uỷ quyền
   nằm trong khối người ký. */
.sg-people { display: grid; gap: 8px; padding-top: 4px; }
.sg-person { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 20px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border-subtle); border-left-width: var(--accent-w); border-radius: 0 10px 10px 0; }
.sg-who { flex: 1 1 200px; display: grid; gap: 3px; min-width: 0; }
.sg-person.signs { border-left-color: var(--brand-green-700); background: var(--brand-green-50); }
.sg-role { display: flex; align-items: center; gap: 8px; font-size: var(--fs-note); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .02em; flex-wrap: wrap; row-gap: 4px; }
.sg-role .pill { text-transform: none; letter-spacing: 0; }
.sg-name { font-size: var(--fs-body); font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.sg-sub { font-size: var(--fs-table); color: var(--text-secondary); }
.sg-person .add { font-size: var(--fs-table); font-weight: 600; color: var(--brand-green-700); text-decoration: none; white-space: nowrap; }
.sg-person .add:hover { text-decoration: underline; }
.sg-doc { flex: 1 1 250px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0; min-width: 0; font-size: var(--fs-table); }
.sg-doc dt { color: var(--text-secondary); white-space: nowrap; }
.sg-doc dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-weight: 600; }
.sg-doc .kv-link { font-size: var(--fs-note); font-weight: 600; }
.sg-doc .empty { font-weight: 400; color: var(--text-secondary); }
.sg-doc .v.warn { color: var(--text-secondary); }
.sg-doc .note { flex-basis: 100%; margin: 0; font-weight: 400; }

/* Danh sách đơn hàng: "Cách tìm" mở khung gợi ý cú pháp ngay dưới ô tìm. */
.search-help { position: relative; align-self: center; }
.search-help > summary {
  list-style: none; cursor: pointer; color: var(--brand-green-700); font-size: var(--fs-table); font-weight: 600; white-space: nowrap;
}
.search-help > summary::-webkit-details-marker { display: none; }
.search-help > summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 4px; }
.search-help-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 360px; max-width: calc(100vw - 32px); padding: 12px 14px;
  display: grid; gap: 8px; background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: 12px;
  box-shadow: 8px 8px 28px rgb(0 0 0 / 0.16); font-size: var(--fs-table); color: var(--text-primary);
}
.search-help-pop p { margin: 0; }
.search-help-pop ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.search-help-pop li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.search-help-pop code { font-family: inherit; font-weight: 600; color: var(--brand-green-800); white-space: nowrap; }
.search-help-pop li span { color: var(--text-secondary); }
@media (max-width: 860px) {
  .search-help-pop { left: 0; right: auto; }
}

/* Ô tiền (MoneyField, apps/core/forms.py): hậu tố loại tiền trong ô (35.250 đ, 4,30 USD); chip dưới
   ô số khi dán số hiểu được hai cách ("Đã hiểu là 35.250") hay ô VND có số lẻ (đề xuất Đ20, L86). */
.money-in { position: relative; display: block; min-width: 0; }
.money-in input { padding-right: 46px; }
.money-cur {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font-size: var(--fs-note); color: var(--text-muted); white-space: nowrap;
}
.num-hint { display: block; margin-top: 4px; font-size: var(--fs-note); line-height: 1.3; color: var(--text-muted); white-space: nowrap; }
.num-hint.warn { color: var(--warning-text); }
.num-hint .num-pick { padding: 0; border: 0; background: none; font: inherit; color: var(--brand-green-700); text-decoration: underline; cursor: pointer; }

/* Vạch đánh dấu dùng chung (chủ dự án 20/10/2026): khối có vạch màu bên trái, thẳng, không bo hai
   góc trái. Màu theo --accent-c (mặc định xanh thương hiệu). */
.accent-left { border-left: var(--accent-w) solid var(--accent-c, var(--brand-green-700)); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ui-accent-demo { display: grid; gap: 8px; max-width: 520px; margin-top: 12px; }
.ui-accent-box { padding: 10px 12px; border-radius: 0 10px 10px 0; background: var(--surface-secondary); }
/* Nút "Đọc từ HĐNT gần nhất" trên đầu ngăn kéo Sản phẩm & thanh toán (_contract_terms.html). */
.hd-read { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.hd-read-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.hd-read-row .field-help { margin: 0; }
.hd-read > [hidden] { display: none; }

/* Trang thêm khách hàng / NCC (partners/add.html, chủ dự án 20/10/2026): cùng khuôn hồ sơ; form nhập
   là cột trái trượt từ trái vào, hồ sơ trống bên phải hiện dần theo ô đã nhập. Form dính dưới thanh
   trên, cuộn bên trong, nút Lưu luôn thấy. Màn hẹp: form trước, hồ sơ sau, thanh Lưu dính đáy. */
.rec-page.has-form, .rec-page.has-form:has(> .p-rail:empty) { grid-template-columns: minmax(440px, 560px) minmax(0, 1fr); }
.p-form {
  position: sticky; top: calc(var(--top-h) + 20px); height: calc(100vh - var(--top-h) - 40px); min-width: 0; display: flex;
  border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-primary); box-shadow: 12px 0 32px rgb(0 0 0 / 0.08);
  animation: af-in 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes af-in { from { transform: translateX(-48px); opacity: 0; } to { transform: none; opacity: 1; } }
.af { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.af-head { flex: none; display: grid; gap: 2px; padding: 16px 20px 12px; border-bottom: 1px solid var(--border-subtle); min-width: 0; }
.af-head .pd-tabs { margin: 10px -20px 0; padding: 2px 20px; }
/* Cột form rộng: chip nhóm xuống dòng thay vì cuộn ngang bị cắt chữ (rà soát L154); màn hẹp vẫn cuộn ngang. */
@media (min-width: 1024px) {
  .af-head .pd-tabs { flex-wrap: wrap; overflow: visible; row-gap: 6px; }
  /* Rà soát L442: khay xám xuống dòng cùng tab, không để tab tràn ra ngoài khay ở 1024–1440 px. */
  .af-head .pd-tabs > .seg-tabs { flex-wrap: wrap; row-gap: 2px; max-width: 100%; }
}
.af-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 24px; padding: 16px 20px 24px; }
.af-body > .callout { margin: 0; }
.af-start { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-secondary); scroll-margin-top: 8px; }
.af-start > .field-help { margin: 0; }
.af-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; scroll-margin-top: 8px; }
.af-group .grid-2 { gap: 14px 16px; }
.af-title { margin: 0; font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-green-700); }
.af-dkkd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.af-dkkd [hidden] { display: none; }
.af-file { flex: 1 1 160px; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.af-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border-subtle); background: var(--surface-primary); border-radius: 0 0 12px 12px; }
.af-foot .spacer { flex: 1; }
.af-foot .btn { min-height: 40px; }
.rec-name .empty, .rec-meta b.empty { color: var(--text-secondary); font-weight: 600; }
@media (max-width: 1439px) {
  .rec-page.has-form, .rec-page.has-form:has(> .p-rail:empty) { grid-template-columns: minmax(400px, 480px) minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 1023px) {
  .rec-page.has-form, .rec-page.has-form:has(> .p-rail:empty) { display: flex; flex-direction: column; gap: 16px; }
  .p-form { position: static; height: auto; width: 100%; box-shadow: none; }
  .af-body { overflow: visible; }
  .af-foot { position: sticky; bottom: 0; z-index: 5; }
  .af-foot .kbd-hint { display: none; }
  .af-file { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .p-form { animation: none; } }

/* Lực dự kiến so với lực MS tính và lực quốc tế; chi phí NVL / kg theo tỷ lệ pha (20/10/2026). */
.force-stds { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 12px; padding-top: 8px; border-top: 1px solid var(--border-default); }
.force-stds .force-std { padding-top: 0; border-top: 0; align-content: start; }
.force-stds .force-std b { font-size: var(--fs-body); }
.force-stds .force-verdict { gap: 4px 6px; }
.blend-cost { grid-column: 1 / -1; display: grid; gap: 6px; }
.bc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bc-title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); }
.bc-month select { min-height: 32px; padding: 4px 8px; font-size: var(--fs-table); }
.bc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); font-variant-numeric: tabular-nums; }
.bc-table th, .bc-table td { padding: 5px 6px; border-bottom: 1px solid var(--border-subtle); text-align: left; font-weight: 400; white-space: nowrap; }
.bc-table thead th { font-size: var(--fs-note); color: var(--text-secondary); }
.bc-table .num { text-align: right; }
.bc-table tbody th { color: var(--text-primary); }
.bc-src { display: block; }
.bc-table tfoot th, .bc-table tfoot td { border-bottom: 0; font-weight: 600; color: var(--text-primary); }
.bc-table tfoot tr[data-partial] td, .bc-table tfoot tr[data-partial] b { font-weight: 400; color: var(--text-secondary); }
.blend-cost-slot, .force-calc > .bc-month { grid-column: 1 / -1; }
.blend-cost-slot:empty { display: none; }
.force-calc > .bc-month { display: flex; align-items: center; gap: 8px; }
.create-layout .blend-form.force-calc { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.force-calc > .bc-month { order: 3; justify-content: flex-end; }
.force-calc > .bc-month span { white-space: nowrap; }
.force-calc > .bc-month select { width: auto; min-width: 160px; }
.force-calc > .blend-cost-slot { order: 4; }

/* Lịch sử giá bán trên hồ sơ sản phẩm: cột Đối chiếu là nhãn + dòng chứng từ so sánh bên dưới. */
.gb-cross { min-width: 160px; }
.gb-cross .small { display: block; margin-top: 2px; white-space: normal; overflow-wrap: normal; }
/* Nút "Xem thêm / Thu gọn" dùng chung (partials/more_toggle.html, 20/10/2026). */
.more-toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 4px 0; border: 0; background: none; color: var(--brand-green-700); font: inherit; font-size: var(--fs-note); font-weight: 600; cursor: pointer; }
.more-toggle:hover { text-decoration: underline; }
[data-more-panel][hidden] { display: none; }
.sib-list + .sib-list { margin-top: -12px; }  /* thẻ là lưới gap 12px: nối liền danh sách trên */
.sib-list + .sib-list li:first-child { border-top: 1px solid var(--border-subtle); }
.more-toggle .when-open, .more-toggle[aria-expanded="true"] .when-closed { display: none; }
.more-toggle[aria-expanded="true"] .when-open { display: inline; }
.more-toggle .ic { transition: transform .15s ease; }
.more-toggle[aria-expanded="true"] .ic { transform: rotate(180deg); }
/* Kiểu gập bằng ô tích ẩn (label.more-toggle for=…): ô tích đứng trước khối .tl-more. */
input:checked ~ .tl-more label.more-toggle .when-closed { display: none; }
input:checked ~ .tl-more label.more-toggle .when-open { display: inline; }
input:checked ~ .tl-more label.more-toggle .ic { transform: rotate(180deg); }
.tl-more .more-toggle { margin: 0 12px 0 0; }

/* Tồn kho: xem cả tháng (21/10/2026) */
.month-nav { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.month-nav .btn.on { font-weight: 600; color: var(--text-primary); }

/* Cài đặt › Đơn vị tính: khối "Tra mã quốc tế" trong ngăn kéo (catalog/_unit_drawer.html, js/unit-lookup.js). */
.ul-box { gap: 8px; }
.ul-row { display: flex; gap: 8px; align-items: center; }
.ul-row input { flex: 1 1 auto; min-width: 0; }
.ul-row .btn { flex: none; }
.ul-out[hidden] { display: none; }
.ul-out { display: grid; gap: 8px; }
.ul-out > .field-help, .ul-src { margin: 0; }
.ul-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ul-item { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-primary); }
.ul-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ul-head .code { font-size: var(--fs-table); }
.ul-head .ul-name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-table); }
.ul-sub, .ul-desc { font-size: var(--fs-note); color: var(--text-secondary); }
.ul-desc { color: var(--text-muted); }
/* ===== Hướng dẫn sử dụng (menu tài khoản, chủ dự án 20/10/2026; apps/guide) =====
   Trang chủ: ô tìm lớn, "Bắt đầu nhanh" đánh số, thẻ chủ đề, cột "Mới cập nhật". Trang bài: chủ đề trái, bài
   giữa (bước đánh số + ảnh), "Trong bài này" phải. Chữ theo thang --fs-*, vạch đánh dấu thẳng (D38). */
.guide { display: grid; gap: 24px; }
.guide-hero {
  display: grid; gap: 10px; justify-items: center; text-align: center; padding: 32px 20px 28px; border-radius: 14px;
  background: linear-gradient(180deg, var(--brand-green-50), var(--surface-primary)); border: 1px solid var(--border-subtle);
}
.guide-hero h2 { margin: 0; font-size: var(--fs-hero); line-height: 1.25; color: var(--text-primary); }
.guide-search.filter-search { width: min(640px, 100%); }
.guide-search input { height: 44px; border-radius: 10px; }
.guide-hero-sub { margin: 0; max-width: 640px; font-size: var(--fs-table); color: var(--text-secondary); }
.guide-h2 { margin: 0; font-size: var(--fs-heading); font-weight: 700; }
.guide-sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.guide-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-path-card {
  display: grid; gap: 6px; align-content: start; height: 100%; padding: 16px; border-radius: 12px; text-decoration: none; color: inherit;
  background: var(--surface-primary); border: 1px solid var(--border-subtle); transition: border-color 0.15s, box-shadow 0.15s;
}
.guide-path-card:hover { border-color: var(--brand-green-700); box-shadow: 0 2px 10px rgb(0 0 0 / 6%); }
.guide-path-t { font-size: var(--fs-body); font-weight: 700; color: var(--text-primary); }
.guide-path-s, .guide-row-s { font-size: var(--fs-table); color: var(--text-secondary); line-height: 1.45; }
.guide-row-m { font-size: var(--fs-note); color: var(--text-muted); }
.guide-num {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--brand-green-700); color: var(--text-inverse); font-size: var(--fs-table); font-weight: 700; font-variant-numeric: tabular-nums;
}
.guide-cols { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.guide-topic-grid { display: grid; gap: 12px; margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.guide-topic { margin: 0; padding: 16px; display: grid; gap: 6px; align-content: start; }
.guide-topic-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.guide-topic h3 { margin: 0; font-size: var(--fs-body); font-weight: 700; }
.guide-topic p { margin: 0; }
.guide-links { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.guide-links a { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: var(--fs-table); color: var(--brand-green-800); text-decoration: none; }
.guide-links a:hover { text-decoration: underline; }
.guide-links .ic { color: var(--neutral-400); }
.guide-updates { margin: 0; position: sticky; top: calc(var(--top-h) + 20px); display: grid; gap: 6px; }
.guide-updates p { margin: 0; }
.guide-feed { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; }
.guide-feed li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-subtle); font-size: var(--fs-table); }
.guide-feed li:first-child { border-top: 0; }
.guide-feed-d { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.guide-feed a { display: grid; gap: 2px; color: inherit; text-decoration: none; }
.guide-feed a b { color: var(--brand-green-800); }
.guide-feed a span { color: var(--text-secondary); }
.guide-feed a:hover b { text-decoration: underline; }
.guide-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.guide-row { display: grid; gap: 3px; padding: 14px 16px; border-radius: 12px; background: var(--surface-primary); border: 1px solid var(--border-subtle); text-decoration: none; color: inherit; }
.guide-row:hover { border-color: var(--brand-green-700); }
.guide-row-t { font-size: var(--fs-body); font-weight: 700; color: var(--brand-green-800); }

.guide-page { display: grid; gap: 24px; grid-template-columns: 220px minmax(0, 1fr) 200px; align-items: start; }
.guide-nav { position: sticky; top: calc(var(--top-h) + 20px); max-height: calc(100vh - var(--top-h) - 40px); overflow-y: auto; scrollbar-width: thin; }
.guide-article { min-width: 0; max-width: 880px; display: grid; gap: 24px; }
.guide-head { display: grid; gap: 8px; }
.guide-head .eyebrow { margin: 0; }
.guide-title { margin: 0; font-size: var(--fs-hero); line-height: 1.25; }
.guide-lead { margin: 0; font-size: var(--fs-heading); line-height: 1.5; color: var(--text-secondary); }
.guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: var(--fs-table); color: var(--text-muted); }
.guide-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.guide-open { margin-left: auto; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.guide-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding-bottom: 28px; scroll-margin-top: calc(var(--top-h) + 20px); }
/* Đường nối các bước như dòng thời gian. */
.guide-step::before { content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; background: var(--border-default); }
.guide-step:last-child::before { display: none; }
.guide-step-body { min-width: 0; display: grid; gap: 8px; }
.guide-step h3 { margin: 3px 0 0; font-size: var(--fs-heading); font-weight: 700; }
.guide-step p { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text-primary); }
.guide-step strong, .guide-tips strong, .guide-faq strong { font-weight: 700; color: var(--text-primary); }
.guide-shot { margin: 4px 0 0; }
.guide-shot a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-default); box-shadow: 0 2px 12px rgb(0 0 0 / 6%); cursor: zoom-in; background: var(--surface-secondary); }
.guide-shot img { display: block; width: 100%; height: auto; }
.guide-shot-empty { display: flex; align-items: center; gap: 8px; padding: 16px; border-radius: 10px; border: 1px dashed var(--border-default); font-size: var(--fs-table); color: var(--text-muted); }
.guide-tips { margin: 0; scroll-margin-top: calc(var(--top-h) + 20px); }
.guide-tips ul { margin: 2px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--fs-body); }
.guide-faq { display: grid; gap: 8px; scroll-margin-top: calc(var(--top-h) + 20px); }
.guide-faq h3, .guide-changes h3 { margin: 0; font-size: var(--fs-heading); font-weight: 700; }
.guide-faq details { border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-primary); padding: 0 14px; }
.guide-faq summary { cursor: pointer; padding: 12px 0; font-size: var(--fs-body); font-weight: 600; }
.guide-faq details p { margin: 0 0 12px; font-size: var(--fs-body); line-height: 1.6; color: var(--text-secondary); }
.guide-changes { margin: 0; display: grid; gap: 4px; scroll-margin-top: calc(var(--top-h) + 20px); }
.guide-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.guide-pager a { display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--surface-primary); text-decoration: none; color: var(--brand-green-800); font-size: var(--fs-body); }
.guide-pager a:hover { border-color: var(--brand-green-700); }
.guide-pager-r { text-align: right; grid-column: 2; }
.guide-toc { max-width: 200px; }
.guide-zoom { padding: 0; border: 0; border-radius: 12px; max-width: min(96vw, 1600px); max-height: 94vh; background: var(--surface-primary); }
.guide-zoom::backdrop { background: rgb(0 0 0 / 60%); }
.guide-zoom img { display: block; max-width: 100%; max-height: 94vh; height: auto; }
.guide-zoom .pd-x { position: absolute; top: 8px; right: 8px; background: var(--surface-primary); border-radius: 50%; }
@media (max-width: 1279px) {
  .guide-page { grid-template-columns: 200px minmax(0, 1fr); }
  .guide-toc { display: none; }
}
@media (max-width: 1023px) {
  .guide-cols { grid-template-columns: minmax(0, 1fr); }
  .guide-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-updates { position: static; }
}
@media (max-width: 767px) {
  .guide-page { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .guide-path { grid-template-columns: minmax(0, 1fr); }
  .guide-nav { position: static; max-height: none; }
  .guide-nav .toc-card { display: flex; gap: 4px; padding: 6px; overflow-x: auto; scrollbar-width: thin; }
  .guide-nav .toc-title, .guide-nav .nav-sec { display: none; }
  .guide-nav .toc { display: flex; gap: 4px; }
  .guide-nav .toc-link { flex: none; white-space: nowrap; }
  .guide-hero { padding: 24px 16px 20px; }
  .guide-hero h2, .guide-title { font-size: var(--fs-title); }
  .guide-lead { font-size: var(--fs-body); }
  .guide-open { margin-left: 0; }
  .guide-step { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
  .guide-num { width: 24px; height: 24px; }
  .guide-step::before { left: 11px; top: 28px; }
  .guide-pager { grid-template-columns: minmax(0, 1fr); }
  .guide-pager-r { grid-column: 1; }
}

/* Ảnh KCS (chủ dự án 25/10/2026): ảnh nhỏ bấm mở trên Drive. */
.kcs-thumbs { display: flex; flex-wrap: wrap; gap: 4px; min-width: 228px; max-width: 460px; }
.kcs-thumbs + .kcs-thumbs { margin-top: 4px; }
.kcs-thumb { position: relative; display: block; width: 72px; height: 72px; border: 1px solid var(--border-default); border-radius: 4px; overflow: hidden; background: var(--surface-secondary); }
.kcs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kcs-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--fs-16); text-shadow: 0 0 4px rgba(0, 0, 0, .6); }
/* Album Ảnh KCS (static/js/kcs-album.js): nền tối, ảnh vừa khung, nút ‹ › hai bên. */
.kcs-album { padding: 0; border: 0; border-radius: 12px; width: min(96vw, 1400px); max-width: none; max-height: 94vh; background: #141614; color: #fff; overflow: hidden; }
.kcs-album::backdrop { background: rgb(0 0 0 / 75%); }
.kcs-album-head, .kcs-album-foot { display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-size: var(--fs-body); }
.kcs-album-head a { color: #cfe8d4; white-space: nowrap; }
.kcs-album-count, .kcs-album-foot { color: rgb(255 255 255 / 70%); white-space: nowrap; }
.kcs-album-foot { min-height: 36px; overflow: hidden; text-overflow: ellipsis; }
.kcs-album-x { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 12%); color: #fff; cursor: pointer; }
.kcs-album-stage { position: relative; display: flex; align-items: center; justify-content: center; height: calc(94vh - 104px); min-height: 240px; }
.kcs-album-stage img, .kcs-album-stage video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.kcs-album-nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 85%); color: #141614; cursor: pointer; }
.kcs-album-nav[hidden] { display: none; }
.kcs-album-note { margin: 0; padding: 0 24px; color: rgb(255 255 255 / 80%); text-align: center; }
.kcs-album-note[hidden] { display: none; }
.kcs-album-prev { left: 8px; }
.kcs-album-next { right: 8px; }

/* Chấm công (chủ dự án 31/10/2026, templates/attendance/): bảng tháng mỗi người một dòng, ô ngày hẹp; Chủ nhật nền xám nhạt,
   ca đêm chữ xanh đậm, "+x" giờ tăng ca chữ nhỏ cam, 0 (có chấm, không giờ) chữ xám. */
.table th.day-col, .table td.att-day { min-width: 34px; padding-left: 4px; padding-right: 4px; text-align: center; }
.table th.day-col.sun, .table td.att-day.sun { background: var(--surface-secondary); }
.table td.att-day b { font-weight: 600; }
.table td.att-day.night b, .att-grid td.att-day.night { color: var(--brand-green-800); }
.table td.att-day.off, .att-cell-sample.off { color: var(--text-muted); }
.att-ot { display: block; font-size: var(--fs-note); color: var(--warning-text); line-height: 1.2; }
.att-mark { font-size: var(--fs-note); color: var(--text-secondary); }
.att-legend .att-cell-sample { display: inline-flex; gap: 2px; align-items: baseline; padding: 0 4px; border: 1px solid var(--border-subtle); }
.att-legend .att-cell-sample .att-ot { display: inline; }
.att-legend .att-cell-sample.night b { color: var(--brand-green-800); }
/* Lệch máy chấm công (chủ dự án 31/10/2026 chọn "Tính công, đối chiếu"): ô viền cam trong, dòng "Máy" chữ phụ. */
.table td.att-day.att-diff, .att-cell-sample.att-diff { box-shadow: inset 0 0 0 2px var(--warning-border); background: var(--warning-bg); }
.att-grid tr.att-machine td { color: var(--text-secondary); }
.att-grid-title { margin: 16px 0 8px; font-size: var(--fs-body); font-weight: 600; }
.att-exempt { margin: 4px 0 12px; }
.att-exempt summary { cursor: pointer; color: var(--text-secondary); }
.att-exempt .inline-form { display: inline-flex; margin: 0 0 0 8px; vertical-align: middle; }
details.att-exempt .inline-form { display: flex; margin-top: 8px; }
.table.rows tr.on td { background: var(--surface-secondary); }
/* Ảnh sản phẩm đã duyệt (chủ dự án 02/11/2026): mỗi mẫu một khối trên hồ sơ sản phẩm, ảnh lớn hơn ảnh KCS. */
.approved-row + .approved-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-default); }
.approved-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.approved-row p { margin: 0 0 8px; }
.kcs-thumbs.approved-big { max-width: none; }
.kcs-thumbs.approved-big .kcs-thumb { width: 120px; height: 120px; }
.kcs-thumb picture { display: contents; }
/* Điện thoại: ảnh có bản dọc 3:4 hiện ô dọc (chủ dự án 02/11/2026). */
@media (max-width: 860px) {
  .kcs-thumb.has-doc { height: 96px; }
  .kcs-thumbs.approved-big .kcs-thumb.has-doc { height: 160px; }
}
.approved-images .approved-name { white-space: normal; width: 240px; }
@media (max-width: 640px) { .approved-images .approved-name { width: 150px; } }
/* Mã bao cần làm ảnh (06/11/2026): cột Đặc tính đủ rộng cho 8 đặc tính trên 2 dòng. */
.bag-image-plan .bag-feats { white-space: normal; min-width: 380px; }
@media (max-width: 640px) { .bag-image-plan .bag-feats { min-width: 240px; } }
/* Ảnh chờ duyệt (07/11/2026): thanh duyệt nhiều mẫu, ô ghi chú yêu cầu sửa từng mẫu. */
.pending-bulk { padding: 12px 16px; margin-bottom: 12px; }
.pending-bulk textarea { width: 100%; }
.pending-bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pending-fix { display: inline-block; margin-left: 6px; vertical-align: top; }
.pending-fix[open] { display: block; margin: 8px 0 0; min-width: 240px; }
.pending-fix textarea { width: 100%; margin-bottom: 6px; }
.pending-images .pending-note { white-space: normal; max-width: 220px; margin-top: 4px; }
/* Ảnh hay video đang ẩn trong album không chiếm chỗ (display: block ở trên đè thuộc tính hidden). */
.kcs-album-stage img[hidden], .kcs-album-stage video[hidden] { display: none; }
.add-cccd { margin-bottom: 14px; } .add-cccd .btn { margin-top: 8px; }

/* Mục Ảnh trên hồ sơ mã CCDC (03/11/2026): ảnh đầu là ảnh chính, nút xoá / ẩn ở góc ảnh. */
.item-photo { position: relative; }
.item-photo-main { position: absolute; left: 4px; bottom: 4px; padding: 0 6px; border-radius: 4px; background: var(--brand-green-700); color: #fff; font-size: var(--fs-note); line-height: 18px; }
.item-photo-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(0 0 0 / 55%); color: #fff; cursor: pointer; }
.item-photo-x:hover, .item-photo-x:focus-visible { background: rgb(0 0 0 / 75%); }
#anh.is-over { outline: 2px dashed var(--brand-green-700); outline-offset: 4px; }

/* Quét email của khách trong ngăn kéo Thêm đơn hàng (03/11/2026, apps/orders/mail_scan.py). */
.mail-scan { min-width: 0; margin: 8px 0 16px; padding: 16px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-secondary); }
.mail-scan .subform-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mail-scan h3 { font-size: var(--fs-body); font-weight: 700; }
.mail-card { min-width: 0; margin-top: 12px; padding: 12px; border: 1px solid var(--border-subtle); border-left: var(--accent-w) solid var(--brand-green-700); border-radius: 0 8px 8px 0; background: var(--surface-primary); }
.mail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mail-title { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.mail-sub, .mail-card .muted { font-size: var(--fs-note); color: var(--text-secondary); }
.mail-card .muted { display: block; }
.mail-sum { margin: 8px 0; }
.mail-rows { margin-top: 8px; font-size: var(--fs-table); }
.mail-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: start; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); }
.mail-rows.has-price .mail-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); }
.mail-row-head { font-size: var(--fs-note); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); background: var(--surface-secondary); border-bottom: 2px solid var(--brand-green-700); }
.mail-row-head .th-unit { text-transform: none; letter-spacing: 0; font-weight: 500; }
.mail-row .num { text-align: right; }
.mail-k { display: none; }
@media (max-width: 860px) {
  .mail-row, .mail-rows.has-price .mail-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 8px 0; }
  .mail-row-head { display: none; }
  .mail-row .num { text-align: left; }
  .mail-k { display: block; font-size: var(--fs-note); color: var(--text-secondary); }
}
.mail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; }
.mail-actions > .mail-sub { margin-right: auto; min-width: 0; overflow-wrap: anywhere; }
/* Kết quả quét theo từng đơn (chủ dự án 03/11/2026): mã đơn in đậm, đơn khớp nhạt màu. */
.mail-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; }
.mail-summary p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mail-order { font-size: var(--fs-heading); font-weight: 700; color: var(--text-primary); }
a.mail-order { color: var(--brand-green-700); }
.mail-group .mail-rows .mail-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.3fr); }
.mail-group .mail-rows.has-price .mail-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr); }
.mail-group.is-khop { border-left-color: var(--border-subtle); }
.mail-row.is-gone { color: var(--text-secondary); }
.mail-row .input.sm { width: 100%; }
.mail-matched { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
/* Mã đơn mới tự sinh trong ngăn kéo Thêm đơn hàng, không sửa. */
.order-code { display: grid; gap: 2px; margin: 0 0 12px; }
.order-code-label { font-size: var(--fs-note); font-weight: 700; color: var(--text-secondary); }
.order-code-value { font-size: var(--fs-title); font-weight: 700; color: var(--text-primary); }
@media (max-width: 860px) {
  .mail-group .mail-rows .mail-row, .mail-group .mail-rows.has-price .mail-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Báo cáo ca (03/11/2026, templates/catalog/shift_report.html): ô gửi trái, các lần đã gửi phải
   như khung chat; điện thoại xếp dọc, ô gửi ở trên, nút Gửi to dễ bấm. */
.shift-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.shift-page .card { margin-bottom: 0; }
.shift-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.shift-msg { position: relative; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-secondary); }
.shift-msg.mine { background: var(--success-bg); border-color: transparent; }
.shift-msg-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-note); color: var(--text-muted); }
.shift-machine { font-weight: 600; color: var(--text-primary); font-size: var(--fs-table); }
.shift-time { margin-left: auto; font-variant-numeric: tabular-nums; }
.shift-msg-body { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; font-size: var(--fs-body); }
.shift-msg-body .code { font-weight: 600; overflow-wrap: anywhere; }
.shift-qty { font-weight: 700; font-size: var(--fs-heading); }
.shift-msg-foot { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-top: 2px; }
.shift-msg-meta { flex: 1; min-width: 0; font-size: var(--fs-note); color: var(--text-muted); }
.shift-page .shift-del { flex: none; width: auto; margin: 0 0 0 auto; }
.shift-sim { display: grid; grid-template-columns: auto minmax(0, 360px) minmax(0, 1fr); gap: 8px 12px; align-items: center; margin-bottom: 16px; }
.shift-sim .form-meta { margin: 0; }
.shift-sim.on { border-color: var(--warning); background: var(--warning-bg); }
.shift-sim-label { font-weight: 600; }
/* Ô Đơn hàng của Báo cáo ca có thêm Đã xong / Nhập kho (04/11/2026): chữ xuống dòng, không cắt "…". */
.select:has(select[name$="don_hang"]) .select-list.two-col .opt-name { white-space: normal; overflow: visible; }
.shift-page .shift-photo { grid-column: 1 / -1; max-width: none; width: auto; }
/* Kế hoạch Kéo sợi - Dệt / Hoàn thiện (05/11/2026): đầu trang tab xem + chọn ngày, tab đội; hai bảng
   cạnh nhau trên màn rộng (hôm qua hẹp, hôm nay rộng), xếp dọc dưới 1280 px. */
.plan-head { display: grid; gap: 12px; margin-bottom: 16px; }
.plan-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.plan-date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.plan-date .field { margin: 0; flex: 0 1 170px; min-width: 0; }
.plan-date .field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.plan-date-text { font-size: var(--fs-body); min-width: 104px; text-align: center; }
.plan-teams { overflow-x: auto; max-width: 100%; }
.plan-teams .pill { margin-left: 6px; }
.plan-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.plan-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.plan-card { margin-bottom: 0; }
.plan-sec-head { padding: 12px 16px 8px; flex-wrap: wrap; }
.plan-tools { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.plan-note { margin: 0 16px 10px; font-size: var(--fs-table); }
.plan-table .plan-in { width: 100%; min-width: 72px; padding: 4px 8px; font-size: var(--fs-table); }
.plan-table .plan-in.num { text-align: right; max-width: 120px; }
.plan-table td.plan-input { width: 1%; }
.plan-table tr.plan-suggest td { background: var(--warning-bg); }
.plan-save { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); }
.plan-extra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.plan-extra .card { margin-bottom: 0; }
.plan-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.day-plan-bad { margin: 0 0 12px; padding-left: 18px; }
.day-plan-bad code { white-space: pre-wrap; word-break: break-word; }
@media (max-width: 1279px) { .plan-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  /* Điện thoại: mỗi dòng một thẻ, nhãn cột đứng trên số (data-label), ô nhập rộng hết thẻ. */
  .plan-table thead { display: none; }
  .table.plan-table, .table.plan-table tbody { display: block; width: 100%; min-width: 0; }
  .plan-table tbody tr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); }
  .table.plan-table tbody td { display: block; height: auto; padding: 0; border: 0; text-align: left; min-width: 0; width: auto; background: none; }
  .plan-table tbody tr.plan-suggest { background: var(--warning-bg); }
  .plan-table tbody td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-note); color: var(--text-secondary); }
  .plan-table tbody td.first-col { grid-column: 1 / -1; padding-right: 32px; }
  .plan-table tbody td.first-col::before, .plan-table tbody td.act::before { content: none; }
  .plan-table tbody td.act { position: absolute; top: 6px; right: 8px; }
  .plan-table tbody td.plan-input, .plan-table tbody td.act ~ td, .plan-table tbody tr:has(td.act) td:nth-last-child(2) { grid-column: span 3; }
  .table.plan-table .plan-in.num { max-width: none; width: 100%; text-align: left; }
  .plan-table tbody td.empty-cell, .plan-table tbody tr:only-child td { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .plan-extra, .plan-stats { grid-template-columns: minmax(0, 1fr); }
  .plan-fields { grid-template-columns: minmax(0, 1fr); }
}
.shift-page .shift-plan { grid-column: 1 / -1; }
.shift-plan-row { margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; align-items: center; }
.shift-plan-row input { width: 100%; }
.shift-stop-add { margin-top: 12px; }
.shift-stop-add > summary { list-style: none; display: inline-flex; cursor: pointer; }
.shift-stop-add > summary::-webkit-details-marker { display: none; }
.shift-stop-add[open] > summary { margin-bottom: 12px; }
.shift-read .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.shift-photo-body { display: grid; grid-template-columns: minmax(200px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.shift-photo-img { display: block; border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; background: var(--surface-secondary); }
.shift-photo-img img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; }
.shift-read-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.shift-read { padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-secondary); }
.shift-read.has-error { border-color: var(--error); }
.shift-read-pick { display: flex; align-items: center; gap: 8px; font-size: var(--fs-note); color: var(--text-muted); margin-bottom: 6px; }
.shift-read-pick input { width: 20px; height: 20px; flex: none; }
.shift-read-pick q { color: var(--text-primary); }
.shift-read-warn { color: var(--error-text); margin: 0 0 6px; }
.shift-camera { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
@media (max-width: 900px) {
  .shift-read .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .shift-page { grid-template-columns: 1fr; }
  .shift-sim { grid-template-columns: 1fr; }
  .shift-photo-body { grid-template-columns: 1fr; }
  .shift-camera-btn { width: 100%; justify-content: center; min-height: 44px; font-size: var(--fs-touch); }
  .shift-send { width: 100%; justify-content: center; min-height: 44px; font-size: var(--fs-touch); }
  .shift-compose .form-actions { justify-content: stretch; }
}

/* --- Tablet và điện thoại (RS3, RS4, chủ dự án 04/11/2026) ----------------------------------- */
/* Đường dẫn trên thanh trên: tên trang dài thì cắt "…" thay vì bị nút đè. */
.crumbs .crumb-cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Nút phụ đầu trang danh sách gom vào "⋯" dưới 1200 px (app.js chuyển nút vào / ra theo cỡ màn);
   nút chính (xanh) vẫn ở ngoài. Trong menu, nút hiện như một dòng menu. */
.top .actions .top-more[hidden] { display: none; }
.top .actions .top-more .menu-list .btn, .top .actions .top-more .menu-list label.btn {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 36px; padding: 6px 10px;
  border: 0; border-radius: 8px; background: none; box-shadow: none; font-size: var(--fs-body); font-weight: 400; color: var(--text-primary);
}
.top .actions .top-more .menu-list .btn:hover { background: var(--brand-green-50); }
.top .actions .top-more .menu-list form { display: block; margin: 0; }
.top .actions .top-more .menu-sep { height: 1px; margin: 4px 6px; background: var(--border-subtle); }
/* Dòng "Chưa có / Không có … khớp bộ lọc" của bảng rộng hơn khung: canh giữa theo phần đang thấy
   (--wrap-w do app.js đo) chứ không theo cả bề ngang bảng, nên chữ không bị cắt. */
.table-wrap:not(.fits) .empty-table { position: sticky; left: 0; box-sizing: border-box; width: var(--wrap-w, 100%); }
/* Nút "Xem dạng bảng / thẻ" chỉ có trên điện thoại. */
.tbl-view, .tbl-view[hidden] { display: none; }
@media (max-width: 600px) {
  .tbl-view:not([hidden]) { display: inline-flex; }
  .filters .tbl-tools:has(.tbl-view:not([hidden])) { gap: 6px; }
  .filters .tbl-tools:has(.tbl-view:not([hidden])) .btn { padding-inline: 10px; }
  /* Dạng thẻ (L648): thêm ô "Sắp xếp" (thẻ không có tiêu đề cột để bấm), xuống dòng riêng cùng các
     nút; "Cột" vẫn chọn trường nào hiện trong thẻ và trong "Xem thêm". */
  html.has-cards:not([data-tbl-view="bang"]) .filters .tbl-tools:has(.card-sort) { display: flex; flex: 1 1 100%; flex-wrap: wrap; row-gap: 8px; max-width: 100%; margin-left: 0; }
  html.has-cards:not([data-tbl-view="bang"]) .card-sort { display: block; order: -1; flex: 1 1 100%; min-width: 0; }
  html.has-cards:not([data-tbl-view="bang"]) .filters .tbl-tools:has(.card-sort) { column-gap: 6px; }
  html.has-cards:not([data-tbl-view="bang"]) .filters .tbl-tools .tbl-view .ic { display: none; }
  html.has-cards:not([data-tbl-view="bang"]) .card-sort > summary { width: 100%; justify-content: flex-start; min-width: 0; }
  .card-sort-k { color: var(--text-muted); font-weight: 400; }
  .card-sort-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .card-sort .menu-list { left: 0; right: 0; max-height: 60vh; overflow-y: auto; }
  .card-sort .menu-list a.on { font-weight: 600; color: var(--brand-green-700); }
  /* RS4: mỗi dòng bảng danh sách là một thẻ (vai trò ô ở td[data-card], table-tools.js). */
  html:not([data-tbl-view="bang"]) .table.cards thead, html:not([data-tbl-view="bang"]) .table.cards tfoot { display: none; }
  html:not([data-tbl-view="bang"]) .table.cards, html:not([data-tbl-view="bang"]) .table.cards tbody { display: block; width: 100%; min-width: 0; }
  html:not([data-tbl-view="bang"]) .table.cards tbody tr {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle);
  }
  html:not([data-tbl-view="bang"]) .table.cards tbody td {
    display: none; position: static; height: auto; min-width: 0; max-width: none; padding: 0; border: 0; background: none;
    text-align: left; line-height: 1.4; white-space: normal;
  }
  html:not([data-tbl-view="bang"]) .table.cards tbody td[data-card="star"] { display: block; order: 0; flex: none; width: auto; margin: -6px -4px -6px -8px; }
  html:not([data-tbl-view="bang"]) .table.cards tbody td[data-card="title"] { display: block; order: 1; flex: 1 1 0; font-size: var(--fs-body); }
  html:not([data-tbl-view="bang"]) .table.cards tbody td[data-card="status"] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; order: 2; flex: 0 1 auto; max-width: 55%; }
  html:not([data-tbl-view="bang"]) .table.cards tbody td[data-card="name"] { display: block; order: 3; flex: 1 1 100%; color: var(--text-secondary); }
  html:not([data-tbl-view="bang"]) .table.cards tbody td[data-card="field"] { display: block; order: 4; flex: 1 1 calc(50% - 12px); }
  html:not([data-tbl-view="bang"]) .table.cards tbody td[data-card="field"]::before {
    content: attr(data-label); display: block; font-size: var(--fs-note); font-weight: 400; color: var(--text-muted);
  }
  /* Dòng mở hồ sơ khi bấm: nút "Mở / Sửa" trùng việc nên ẩn; dòng không mở được thì giữ nút. */
  html:not([data-tbl-view="bang"]) .table.cards tbody tr:not([data-href]) td[data-card="act"] { display: block; order: 5; flex: 1 1 100%; text-align: right; }
  html:not([data-tbl-view="bang"]) .table.cards tbody td[data-card].col-off { display: none; }
  html:not([data-tbl-view="bang"]) .table.cards tbody tr.empty-row { display: block; padding: 0; }
  html:not([data-tbl-view="bang"]) .table.cards tbody tr.empty-row td, html:not([data-tbl-view="bang"]) .table.cards tbody td.empty { display: block; flex: 1 1 100%; }
  html:not([data-tbl-view="bang"]) .table.cards tbody td[data-card="title"] .sub { display: block; }
  /* "Xem thêm" (L649, Đ59): mở các cột còn lại của thẻ, cùng kiểu nhãn với trường chính. */
  html:not([data-tbl-view="bang"]) .table.cards tbody tr.card-open td[data-card="hide"]:not(.col-off):not(.card-blank) { display: block; order: 5; flex: 1 1 calc(50% - 12px); }
  html:not([data-tbl-view="bang"]) .table.cards tbody tr.card-open td[data-card="hide"]::before {
    content: attr(data-label); display: block; font-size: var(--fs-note); font-weight: 400; color: var(--text-muted);
  }
  /* Nút là .more-toggle dùng chung (chữ, màu, mũi tên); ở đây chỉ đặt chỗ trong thẻ (L730). */
  html:not([data-tbl-view="bang"]) .table.cards tbody tr > .card-more {
    display: flex; order: 6; flex: 1 1 100%; justify-content: flex-start; margin-top: 0; padding: 4px 0 0;
  }
}
/* Ô "Sắp xếp" và nút "Xem thêm" chỉ có ở dạng thẻ trên điện thoại. */
.card-sort, .table tr > .card-more { display: none; }
/* Biểu đồ giá bán và giá hạt nhựa trên hồ sơ sản phẩm (04/11/2026): đường vẽ bằng SVG co giãn
   theo khung (nét không giãn), cột rê chuột dùng chung .viz-col / .viz-tip của biểu đồ thống kê. */
.pr-chart { margin: 4px 0 16px; }
.pr-chart .viz-plot { height: 240px; }
.pr-lines { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 22px); overflow: visible; pointer-events: none; }
.pr-lines path { fill: none; stroke: var(--viz); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pr-lines path.resin { stroke-width: 3; stroke-dasharray: none; }
.pr-lines line.base { stroke: var(--border-default); stroke-width: 1; stroke-dasharray: 4 4; }
.pr-chart .viz-cols.flex { display: flex; }
.pr-chart .viz-cols.flex .viz-col { flex: 1 1 0; min-width: 0; border-radius: 4px; }
.pr-chart .viz-x { white-space: nowrap; }
.pr-chart .viz-tip { min-width: 240px; }
.pr-chart .viz-tip-row { padding: 2px 0; }
.pr-chart .viz-tip-row span { white-space: normal; }
.pr-legend li { display: block; }
.pr-legend .viz-line { display: inline-block; vertical-align: middle; margin-right: 6px; }
.pr-legend .chg { margin-left: 2px; }
@media (max-width: 600px) { .pr-chart .viz-x.alt { display: none; } }
@media (max-width: 860px) { .pr-chart .viz-plot { height: 200px; } .pr-chart .viz-tip { min-width: 0; max-width: 260px; } }
.pr-chart.pr-year { margin: 0 0 16px; padding: 16px 20px; }
.pr-chart.pr-year .viz-plot { margin-left: 56px; }
/* Điện thoại (chủ dự án 04/11/2026): chữ phụ của biểu đồ giá xuống cỡ nhỏ nhất (12px), bỏ chữ
   phụ không cần để biểu đồ rộng hơn. */
@media (max-width: 600px) {
  .pr-legend, .pr-chart .viz-tip, .pr-chart > p.small { font-size: var(--fs-note); }
  .pr-legend .pr-opt { display: none; }
  .pr-chart .viz-tip { padding: 8px 10px; }
  .pr-chart .viz-tip-row { gap: 6px; }
  .table .cell-sub.vat { font-size: var(--fs-note); }
}
@media (max-width: 600px) { .pr-chart.pr-year { padding: 12px; } .pr-chart.pr-year .viz-plot { margin-left: 48px; } .pr-chart .viz-tip { min-width: 0; } }

/* Bộ lọc kiểu nhóm (chủ dự án 04/11/2026, Figma 25.2 SX-SP-M2a / M2b; apps/core/filters.py, partials/filter.html):
   khối Đang lọc, tìm trong bộ lọc, mục viết hoa, mỗi ô một dòng thu gọn ghi giá trị đang chọn, nút lựa chọn có số
   (chọn: nền xanh nhạt viền xanh kèm dấu tích; mờ: không còn mã nào), Hoặc khoảng Từ – Đến, chân Đặt lại + Xem n mã. */
.fx .pd-body { gap: 0; padding-top: 12px; }
.fx-sub { font-size: var(--fs-note); color: var(--text-secondary); }
.fx-on { flex: none; display: grid; gap: 8px; padding: 12px 24px; background: var(--brand-green-50); border-bottom: 1px solid var(--border-subtle); }
.fx-on-head { display: flex; align-items: center; gap: 8px; }
.fx-on-t { flex: 1; font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.fx-on-head .btn.link { font-size: var(--fs-table); font-weight: 700; padding: 0; min-height: 0; }
.fx-on-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--brand-green-700); background: var(--surface-primary); color: var(--text-primary);
  font-size: var(--fs-table); text-decoration: none; white-space: nowrap;
}
.fx-chip b { color: var(--brand-green-800); font-weight: 700; }
.fx-chip-k { color: var(--text-secondary); }
.fx-chip:hover { background: var(--brand-green-50); }
.fx-hint { margin: 0 0 12px; }
.fx-hint .callout-body { display: grid; gap: 2px; }
.fx-hint p { margin: 0; }
.fx-hint-t { font-weight: 700; color: var(--warning-text); }
.fx-hint .btn.link { justify-self: start; padding: 0; min-height: 0; font-weight: 700; }
.fx-find { position: relative; margin: 0 0 8px; }
.fx-find .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.fx-find .fx-find-in, .fx-g-body .fx-g-find { width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--border-default); border-radius: 8px; font-size: var(--fs-input); background: var(--surface-primary); }
.fx-g-body .fx-g-find { height: 36px; padding-left: 12px; margin-bottom: 0; }
.fx-sec + .fx-sec { margin-top: 4px; }
.fx-sec-t { margin: 0; padding: 12px 0 2px; font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.fx-g { border-bottom: 1px solid var(--border-subtle); }
.fx-g-head { display: flex; align-items: center; gap: 8px; min-height: 52px; cursor: pointer; list-style: none; }
.fx-g-head::-webkit-details-marker { display: none; }
.fx-g-head:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.fx-g-label { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); }
.fx-g-val { display: inline-flex; align-items: center; gap: 6px; max-width: 55%; font-size: var(--fs-table); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-g.on .fx-g-val { color: var(--brand-green-700); font-weight: 700; }
.fx-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-green-700); }
.fx-g-ic { flex: none; color: var(--text-muted); transition: transform 0.15s ease; }
.fx-g[open] .fx-g-ic { transform: rotate(90deg); }
.fx-g-body { padding: 0 0 16px; display: grid; gap: 10px; }
.fx-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-opt {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border-default); background: var(--surface-primary); color: var(--text-primary);
  font-size: var(--fs-input); cursor: pointer; user-select: none;
}
.fx-opt[hidden] { display: none; }
.fx-opt:hover { border-color: var(--brand-green-700); }
.fx-in { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.fx-opt:has(.fx-in:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.fx-opt .ic-check { display: none; }
.fx-opt.on, .fx-opt:has(.fx-in:checked) { border-color: var(--brand-green-700); background: var(--brand-green-50); color: var(--brand-green-800); font-weight: 700; }
.fx-opt:has(.fx-in:checked) .ic-check { display: inline-block; }
.fx-n { color: var(--text-muted); font-size: var(--fs-note); font-variant-numeric: tabular-nums; font-weight: 500; }
.fx-opt.on .fx-n { color: var(--brand-green-700); font-weight: 700; }
.fx-opt.off { color: var(--text-muted); border-color: var(--border-subtle); opacity: 0.6; }
.fx-span { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; }
.fx-span-t { font-size: var(--fs-note); color: var(--text-secondary); }
.fx-box { position: relative; display: block; }
.fx-box input { width: 100%; height: 36px; padding: 0 34px 0 10px; border: 1px solid var(--border-default); border-radius: 8px; font-size: var(--fs-input); text-align: right; }
.fx-u { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: var(--fs-note); color: var(--text-muted); pointer-events: none; }
.fx-note { margin: 0; font-size: var(--fs-note); color: var(--text-muted); }
.fx-none { margin: 12px 0; color: var(--text-muted); }
.fx-foot { gap: 8px; }
.fx-foot .btn { height: 44px; }
.fx-foot .btn.ghost { flex: 0 0 auto; min-width: 120px; justify-content: center; }
.fx-foot .btn.primary { flex: 1; justify-content: center; }
.fx-foot .btn.primary:disabled { background: var(--neutral-100); border-color: var(--neutral-100); color: var(--text-muted); cursor: not-allowed; }
.fx-foot-note { margin: 6px 0 0; text-align: center; font-size: var(--fs-note); color: var(--text-muted); }
.fx-pins { margin-top: 4px; }
@media (max-width: 860px) {
  .fx-on { padding: 12px 16px; }
  .fx-find .fx-find-in, .fx-g-body .fx-g-find, .fx-box input { font-size: var(--fs-touch); }
}
/* Biểu đồ mặc định trang danh sách (D77, partials/list/chart.html): dưới thẻ tóm tắt, trên thanh tìm.
   Thấp hơn biểu đồ trang thống kê để bảng vẫn thấy ngay; thu gọn thì chỉ còn một dòng tiêu đề. */
.list-chart { margin: 0 0 12px; padding: 12px 16px; }
.list-chart-head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.list-chart-head h2 { margin: 0; font-size: var(--fs-table); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-green-700); }
.list-chart-head .ic-chart { color: var(--text-secondary); }
.list-chart-total { font-size: var(--fs-table); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.list-chart-head .more-toggle { margin-top: 0; white-space: nowrap; flex-shrink: 0; }
.list-chart-head h2 { min-width: 0; }
.list-chart-body { margin-top: 10px; }
.list-chart .viz-legend { margin-bottom: 8px; }
.list-chart .viz-plot { height: 180px; }
.list-chart .viz-cols { display: flex; }
.list-chart .viz-col { flex: 1 1 0; min-width: 0; color: inherit; text-decoration: none; }
a.viz-col { cursor: pointer; }
.list-chart .viz-col.on { background: var(--brand-green-50); }
.list-chart .viz-col.on .viz-x { color: var(--brand-green-700); font-weight: 700; }
.list-chart .viz-x { white-space: nowrap; }
.list-chart-note { margin: 8px 0 0; font-size: var(--fs-note); color: var(--text-muted); }
.list-chart .chart-tabs { margin: 0 0 0 8px; }
.list-chart .chart-tabs { padding: 2px; border-radius: 10px; }
.list-chart .chart-tabs .seg-tab { min-height: 28px; padding: 0 10px; border-radius: 8px; font-size: var(--fs-table); }
.list-chart.closed .chart-tabs { display: none; }
.list-chart .list-chart-total b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.viz-lines { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 22px); overflow: visible; pointer-events: none; }
.viz-lines path { fill: none; stroke: var(--viz); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.viz-lines path.s1 { stroke-width: 3; }
.list-chart-view[hidden] { display: none; }
/* Biểu đồ tròn là thẻ riêng (chủ dự án 05/11/2026, trang Khách hàng: "tách thành 2 khối riêng"):
   thẻ cột bên trái giãn theo màn hình, thẻ tròn bên phải rộng cố định 420px; thu gọn biểu đồ thì thẻ
   tròn ẩn theo, thẻ cột chiếm cả hàng; điện thoại xếp dọc. */
.list-chart-pair { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 12px; align-items: stretch; margin: 0 0 12px; }
.list-chart-pair > .sec { margin: 0; min-width: 0; }
.list-chart-pair:has(> .list-chart.closed) { grid-template-columns: minmax(0, 1fr); }
.list-chart-pair:has(> .list-chart.closed) > .list-chart-side { display: none; }
.list-chart-side { padding: 12px 16px; }
.list-chart-side .list-chart-head { min-height: 32px; margin-bottom: 10px; }
.list-chart-pie { margin: 0; min-width: 0; }
.list-chart-pie figcaption { margin-bottom: 8px; }
.pie-body { display: flex; align-items: center; gap: 24px; }
.pie { flex: 0 0 auto; width: 180px; height: 180px; }
.pie-seg { fill: none; stroke: var(--viz); stroke-width: 9; }
.pie-legend { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; flex: 1 1 auto; min-width: 0; font-size: var(--fs-table); }
.pie-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; }
.pie-legend .pie-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-legend b { font-variant-numeric: tabular-nums; text-align: right; }
.pie-legend .pie-val { grid-column: 2 / 4; color: var(--text-muted); font-size: var(--fs-note); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .list-chart-pair { grid-template-columns: minmax(0, 1fr); }
  .pie { width: 140px; height: 140px; }
}
/* Thanh ngang của khối biểu đồ danh sách (kind "hbar"): hai cột trên máy tính, một cột điện thoại. */
.list-hbars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
.list-hbars > li { min-width: 0; }
.list-hbars a.hbar { color: inherit; text-decoration: none; padding: 2px 4px; margin: -2px -4px; }
.list-hbars a.hbar:hover .hbar-name { text-decoration: underline; }
.list-hbars .hbar.on { background: var(--brand-green-50); }
.list-hbars .hbar.on .hbar-name { color: var(--brand-green-700); font-weight: 700; }
@media (max-width: 600px) { .list-hbars { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .list-chart .viz-plot { height: 140px; margin-left: 36px; } }
@media (max-width: 600px) {
  .list-chart, .list-chart-side { padding: 10px 12px; }
  .list-chart-note, .list-chart-head .ic-chart { display: none; }
  .list-chart-head { flex-wrap: wrap; }
  .list-chart .chart-tabs { order: 5; margin: 6px 8px 0 0; }
  .list-chart-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .list-chart .viz-tip { min-width: 0; max-width: 260px; }
  .list-chart .viz-cols.n12 .viz-col:nth-child(even) .viz-x { visibility: hidden; }
}

/* Hiệu suất đội (05/11/2026): ô Đạt dưới 100 % chữ hổ phách. */
.table td.num.below { color: var(--warning-text); font-weight: 600; }
/* Thẻ điện thoại: mã chiếm cả dòng (bảng không có cột tên phụ / trạng thái). */
@media (max-width: 600px) {
  html:not([data-tbl-view="bang"]) .table.cards tbody td.perf-code[data-card="title"] { flex: 1 1 100%; }
}
/* Trọng lượng một chiếc bao trên trang BOM (catalog/bom_detail.html): nhãn "đang dùng" xuống dòng riêng. */
.stats.bom-weights .stat-label .tag { margin-left: 4px; }
.stats.bom-weights .stat-badge { margin-top: 6px; }
.stats.bom-weights .tag { white-space: normal; }
/* Danh sách BOM: cột mã bao đủ rộng cho mã + tên bản. */
.boms td.bom-code { min-width: 200px; }
.boms .bom-ver { display: none; }
@media (max-width: 600px) {
  html:not([data-tbl-view="bang"]) .table.cards.boms tbody td.bom-code[data-card="title"] { flex: 1 1 55%; min-width: 0; }
  html:not([data-tbl-view="bang"]) .table.cards.boms .bom-ver { display: inline; }
}

/* Sửa BOM nháp (templates/catalog/bom_edit.html): ô nhập gọn trong bảng dòng vật tư. */
.bom-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bom-actions form { margin: 0; }
.bom-edit-lines td { vertical-align: top; }
.bom-edit-lines input, .bom-edit-lines select { width: 100%; min-width: 0; }
.bom-edit-lines td > input + input, .bom-edit-lines td > select + input { margin-top: 4px; }
.bom-edit-lines .bom-in-part { min-width: 160px; }
.bom-edit-lines .bom-in-code { min-width: 230px; }
.bom-edit-lines td.num input { width: 76px; text-align: right; }
.bom-edit-lines td.bom-in-shape input { width: 76px; }
.bom-edit-lines td.num input + input { display: block; margin: 4px 0 0 auto; }
.bom-edit-lines .bom-in-weight { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.bom-edit-lines .bom-in-tol input { width: 64px; }
.bom-edit-lines .bom-in-tol input + input { margin-top: 4px; }
.bom-edit-lines tr.has-error td { background: var(--error-bg); }
.bom-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bom-opts li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 10px; }
.bom-opts li.picked { border-color: var(--brand-green-700); background: var(--brand-green-50); }
.bom-opts li.done { opacity: .6; }
.bom-opt-main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.bom-ratio-note { margin: 0; padding: 12px 20px 16px; }
@media (max-width: 600px) { .bom-opts li { flex-wrap: wrap; } }

/* So sánh hai bản định mức (templates/catalog/bom_compare.html). */
.bom-cmp-pick { min-width: 240px; flex: 1 1 260px; }
.bom-cmp-swap { align-self: flex-end; margin-bottom: 4px; }
.bom-cmp-counts { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: 8px; }
/* Hai cột A | B, nút chuyển ở giữa (chủ dự án 06/11 09:04). */
.cmp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cmp-total { border: 1px solid var(--border-subtle); border-radius: 8px; padding: 12px 16px; display: grid; gap: 8px; align-content: start; }
.cmp-total.live { border-color: var(--warning-text); }
.cmp-total-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-total-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.cmp-total-nums div { display: grid; gap: 2px; }
.cmp-total-nums dt { color: var(--text-secondary); font-size: var(--fs-note); }
.cmp-total-nums dd { margin: 0; font-size: var(--fs-title); font-weight: 600; white-space: nowrap; }
.cmp-total-nums .key dd { color: var(--brand-green-800); }
.cmp-verdict:empty { display: none; }
.cmp-total-groups { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px 16px; font-size: var(--fs-note); }
.cmp-total-groups li { display: flex; justify-content: space-between; gap: 8px; }
.cmp-letter { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; background: var(--surface-secondary); font-weight: 700; font-size: var(--fs-note); flex: none; }
.cmp-pair { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: 8px; align-items: stretch; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.cmp-pair.cmp-head { border-bottom: 2px solid var(--brand-green-700); padding: 4px 0 8px; position: sticky; top: var(--top-h, 0); background: var(--surface-primary); z-index: 2; }
.cmp-col-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cmp-side { display: grid; gap: 4px; padding: 8px 10px; border-radius: 6px; min-width: 0; align-content: start; font-size: var(--fs-table); }
.cmp-side.edit { background: var(--warning-bg); }
.cmp-side.empty { display: flex; gap: 8px; align-items: center; color: var(--text-muted); border: 1px dashed var(--border-default); }
.cmp-giong .cmp-side:not(.edit) { color: var(--text-secondary); }
.cmp-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cmp-part { overflow-wrap: anywhere; }
.cmp-g { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; font-weight: 600; margin-left: auto; font-size: var(--fs-body); }
.cmp-mat { min-width: 0; }
.cmp-mat .select, .cmp-mat select, .cmp-mat input { width: 100%; }
.cmp-dims { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.cmp-f { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.cmp-diff { color: var(--warning-text); }
.cmp-deltas { display: flex; gap: 12px; flex-wrap: wrap; }
.cmp-deltas:empty { display: none; }
/* Số sửa tại chỗ: trông như chữ, rê chuột hiện viền, bấm vào là ô nhập. */
.cmp-side input.cmp-in { width: 5.5ch; field-sizing: content; min-width: 3ch; max-width: 10ch; padding: 1px 3px; border: 1px solid transparent; background: transparent; border-radius: 4px; font: inherit; font-size: var(--fs-input); }
.cmp-side .cmp-g input.cmp-in { width: 9ch; font-weight: 600; text-align: right; }
.cmp-side input.cmp-in[name$="-weight_minus"] { width: 7ch; }
.cmp-side input.cmp-in:hover { border-color: var(--border-default); background: var(--surface-primary); }
.cmp-side input.cmp-in:focus { border-color: var(--border-focus); background: var(--surface-primary); outline: none; }
.cmp-side input.cmp-in.changed { color: var(--info-text); font-weight: 600; }
.cmp-mid { display: flex; align-items: center; justify-content: center; }
.cmp-move { display: inline-flex; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--brand-green-700); background: var(--surface-primary); color: var(--brand-green-800); font: inherit; font-size: var(--fs-note); font-weight: 600; cursor: pointer; }
.cmp-move:hover { background: var(--brand-green-50); }
.cmp-move.add { border-style: dashed; }
.cmp-move.done { border-color: var(--border-subtle); color: var(--text-muted); }
.cmp-same { color: var(--text-muted); font-weight: 600; }
.cmp-same.tone-warning { color: var(--warning-text); }
.cmp-save { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px 16px; margin: 12px 0; background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: 8px; box-shadow: 0 -4px 12px rgb(0 0 0 / 6%); }
.cmp-save.dirty { border-color: var(--warning-text); }
@media (max-width: 760px) {
  .cmp-two { grid-template-columns: 1fr; }
  .cmp-pair { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cmp-pair.cmp-head { display: none; }
  .cmp-mid { justify-content: flex-start; }
  .cmp-move .ic-chevron-left { transform: rotate(90deg); }
  .cmp-move .ic-chevron-right { transform: rotate(90deg); }
}
.bom-cmp-lines td.code-break { max-width: 180px; min-width: 140px; }
/* Bản vẽ kỹ thuật vải từ thông số (06/11/2026, templates/catalog/_fabric_drawing.html): Chú ý trên cùng, hình bấm
   mở cửa sổ phóng to (static/js/drawing-zoom.js), hai thẻ Thông số / Cơ lý. Điện thoại cuộn ngang hình để giữ cỡ chữ. */
.fd-notices { display: grid; gap: 8px; margin-bottom: 12px; }
.fd-notices .callout { margin: 0; }
.fd-figure { position: relative; display: block; max-width: 100%; padding: 8px 0; overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-primary); cursor: zoom-in; }
.fd-figure:hover { border-color: var(--border-default); }
.fd-figure:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.fd-figure svg { display: block; width: 100%; min-width: 600px; height: auto; }
.fd-zoom-hint { position: sticky; float: left; margin: 0 0 -24px 8px; z-index: 1; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--neutral-100); font-size: var(--fs-note); color: var(--text-secondary); }
.fd-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 0; font-size: var(--fs-note); color: var(--text-secondary); }
.fd-legend .muted { margin-left: auto; }
.fd-key { display: inline-block; width: 18px; height: 10px; }
.fd-key + .fd-key, .fd-legend .fd-key.mark { margin-left: 12px; }
.fd-key.band { border: 1px solid #434c47; background: repeating-linear-gradient(45deg, #fff 0 3px, #8fa6cf 3px 4.5px); }
.fd-key.idline { width: 12px; background: linear-gradient(90deg, #2f5da8 0 2.5px, transparent 2.5px 9.5px, #2f5da8 9.5px); }
.fd-key.mark { height: 0; border-top: 2px dashed #2f5da8; }
.fd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.fd-card { padding: 12px 16px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-secondary); }
.fd-card h3 { margin: 0 0 8px; font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--brand-green-700); }
.fd-card dl { margin: 0; }
.fd-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border-subtle); font-size: var(--fs-table); }
.fd-card dl div:first-child { border-top: 0; }
.fd-card dt { color: var(--text-secondary); }
.fd-card dd { margin: 0; text-align: right; white-space: nowrap; }
.fd-card dd span { color: var(--text-muted); }
.fd-card-note { margin: 8px 0 0; font-size: var(--fs-note); color: var(--text-muted); }
.fd-dialog { padding: 0; border: 0; border-radius: 12px; width: min(96vw, 1400px); max-width: none; height: min(90vh, 900px); max-height: none; background: var(--surface-primary); overflow: hidden; }
.fd-dialog[open] { display: flex; flex-direction: column; }
.fd-dialog::backdrop { background: rgb(0 0 0 / 60%); }
.fd-dialog-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-body); }
.fd-dialog-head form { margin: 0; }
.fd-dialog-code { font-size: var(--fs-table); color: var(--text-secondary); overflow-wrap: anywhere; }
.fd-zoom-val { min-width: 48px; font-size: var(--fs-table); text-align: center; font-variant-numeric: tabular-nums; }
.fd-x { background: var(--neutral-100); color: var(--text-primary); }
.fd-stage { position: relative; flex: 1; overflow: hidden; background: #fff; cursor: grab; touch-action: none; }
.fd-stage:active { cursor: grabbing; }
.fd-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.fd-canvas svg { display: block; }
.fd-dialog-foot { padding: 6px 12px; border-top: 1px solid var(--border-subtle); font-size: var(--fs-note); color: var(--text-muted); }
.fd-dialog { position: fixed; inset: 0; margin: auto; }
@media (max-width: 860px) {
  .fd-dialog { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .fd-dialog-code { display: none; }
}

/* Hệ số lực kéo vải (templates/catalog/fabric_strength.html, chủ dự án 06/11/2026). */
.fst-formula { margin: 0 0 10px; padding: 8px 12px; border-left: var(--accent-w) solid var(--brand-green-700); background: var(--brand-green-50); font-weight: 500; }
.fst-code { min-width: 260px; word-break: break-all; font-weight: 600; }
.fst-list { margin: 0 0 8px; padding-left: 18px; }
.fst-list li { margin: 0 0 4px; }
.table tr.on td { background: var(--brand-green-50); }