/* ═══════════════════════════════════════════════════════════════════════
   _shared/erp-unify.css — LỚP ÁO THỐNG NHẤT (đợt 1 đồng bộ giao diện, 06/09/2026)

   Nạp CUỐI CÙNG trong index.html, sau theme / design-system / erp-ui.
   Chuẩn: _mockups/MOCKUP_QUANTRI_V1_2026-08-31.html (Alex chốt 31/08 + 06/09:
   "V1 thắng mọi mockup cũ"). Bài thử _tests/test_erp_unify_khop_v1.js đọc số
   THẲNG từ file V1 và so với file này — đừng đổi số ở đây mà không đổi ở V1.

   NGUYÊN TẮC
   · Chỉ CSS. Không DOM, không JS, không SQL. Hoàn nguyên = gỡ một dòng <link>.
   · Số lấy từ V1: nút 32 (nhỏ 26) · ô nhập 32 · hàng bảng 32 · badge 20 ·
     bo --radius-lg 8 / --radius 6 · chữ 16/14/13/12/11/10 · số KPI 26.
   · Màu chỉ qua biến CÓ THẬT trong theme.css. Chữ trên nền --b400 dùng
     var(--surface) chứ không phải #fff (chế độ Tối cần chữ tối trên xanh sáng).
   · Khối A dùng !important CÓ CHỦ Ý: các fragment khai bảng biến --v-* trên
     #id (#bp-root, #sbom-root…) và <style> của fragment nằm SAU file này trong
     DOM, nên chỉ !important mới bắc cầu được. Ngoài khối A, mỗi !important phải
     có chú thích "/* !important vì … */" cùng dòng (đối chọi luật gốc cũng !important).
   · KHÔNG chạm: bản in (.bc-a4, [class*="print"], .isod-*), svg, canvas,
     mobile.css/mobile-lite.css, trang đứng riêng (tools/, m/, iframe).
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   A. CẦU BIẾN — mọi bảng biến riêng đổ về theme.css
   ─────────────────────────────────────────────────────────────────────── */
*{
  /* Báo Giá · Tra Giá · BOM · Materials · NPD · Vault · Order-costing (--v-*) */
  --v-fg:var(--text) !important;      --v-fg2:var(--text-2) !important;
  --v-fg3:var(--text-3) !important;   --v-fg4:var(--text-4) !important;
  --v-fg5:var(--text-5) !important;
  --v-pn:var(--surface) !important;   --v-pn2:var(--surface-1) !important;
  --v-pn3:var(--surface-2) !important; --v-bg:var(--surface-2) !important;
  --v-bg2:var(--surface-2) !important; --v-bd:var(--border) !important;
  --v-ln:var(--border) !important;    --v-ln2:var(--border-2) !important;
  --v-ln3:var(--border-strong) !important;
  --v-ac:var(--b400) !important;      --v-ac2:var(--b300) !important;
  --v-acbg:var(--b50) !important;     --v-acln:var(--b200) !important;
  --v-acfg:var(--surface) !important;
  --v-ok:var(--ok) !important;        --v-okbg:var(--ok2) !important;
  --v-wn:var(--warn) !important;      --v-wnbg:var(--warn2) !important;
  --v-er:var(--err) !important;       --v-erbg:var(--err2) !important;
  --v-sh1:var(--shadow) !important;   --v-sh2:var(--shadow) !important;
  --v-sh4:var(--shadow-md) !important;
  --v-ui:var(--font-sans) !important; --v-mo:var(--font-mono) !important;
  --mo:var(--font-mono) !important;
  /* thang chữ / bo góc riêng của nhóm Báo Giá–BOM → thang V1 */
  --td:26px !important;               --tt:var(--fs-h1) !important;
  --tl:var(--fs-h2) !important;       --tm:var(--fs-base) !important;
  --ts:var(--fs-sm) !important;       --t2:var(--fs-micro) !important;
  /* --tx CỐ Ý KHÔNG cầu: mes/cmms/style.css:8 và crm-app dùng --tx làm MÀU CHỮ.
     Chỗ khai --tx:11px sẽ được đợt 2 thay thẳng bằng var(--fs-xs). */
  --r1:var(--radius) !important;      --r2:var(--radius-lg) !important;
  --r3:var(--radius-lg) !important;   --r4:var(--radius-lg) !important;
  --v-row:var(--row-h) !important;
  /* cây trái Tra Giá (--cay-*) → cây V1: mục 30px · chữ 13 · bo 3 */
  --cay-h:30px !important;            --cay-ts:var(--fs-base) !important;
  --cay-t2:var(--fs-sm) !important;   --cay-r1:3px !important; --cay-r2:3px !important;
}
:root{
  /* design-system.css */
  --row-h:32px;
  /* erp-ui.css (.eu-*) */
  --eu-h-sm:26px; --eu-h-md:32px; --eu-h-lg:36px;
  --eu-fs-xs:var(--fs-xs); --eu-fs-sm:var(--fs-sm); --eu-fs-base:var(--fs-base);
  --eu-radius:var(--radius-lg); --eu-radius-sm:var(--radius); --eu-radius-md:var(--radius-lg);
  --eu-radius-lg:var(--radius-lg); --eu-radius-xl:var(--radius-lg);
  --eu-primary-fg:var(--surface);
  --eu-shadow-xs:var(--shadow); --eu-shadow-sm:var(--shadow);
}

/* ───────────────────────────────────────────────────────────────────────
   B. NỀN CHỮ
   ─────────────────────────────────────────────────────────────────────── */
body,#content{ font-family:var(--font-sans); font-size:var(--fs-base); color:var(--text); }
#content h1{ font-size:var(--fs-h1); font-weight:700; letter-spacing:-.2px; }
#content h2{ font-size:var(--fs-h1); font-weight:700; letter-spacing:-.2px; }
#content h3{ font-size:var(--fs-h2); font-weight:700; }
#content h4{ font-size:var(--fs-base); font-weight:700; }
.ph-tt{ font-size:var(--fs-h1); font-weight:700; letter-spacing:-.2px; }
.card-title,.panel-tt{ font-size:var(--fs-h2); font-weight:700; letter-spacing:0; }
.card-subtitle{ font-family:var(--font-sans); font-size:var(--fs-sm); color:var(--text-4); }

/* ───────────────────────────────────────────────────────────────────────
   C. NÚT — V1 .btn / .btn.pri / .btn.sm
   ─────────────────────────────────────────────────────────────────────── */
.btn,.eu-btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-danger,.btn-success{
  height:32px; padding:0 12px; gap:6px;
  border-radius:var(--radius-lg); border:1px solid var(--border-2);
  background:var(--surface); color:var(--text-2);
  font-family:inherit; font-size:var(--fs-sm); font-weight:500; line-height:1;
  display:inline-flex; align-items:center; white-space:nowrap; cursor:pointer;
  box-shadow:none;
}
.btn:hover,.eu-btn.outline:hover,.eu-btn.secondary:hover{ background:var(--surface-1); border-color:var(--border-strong); }
.btn:focus-visible,.eu-btn:focus-visible{ outline:none; border-color:var(--b400);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--b400) 45%,transparent); }
.btn-sm,.btn.sm,.eu-btn.sm{ height:26px; padding:0 8px; font-size:var(--fs-xs); border-radius:var(--radius); }
.btn-xs,.eu-btn.xs{ height:22px; padding:0 6px; font-size:var(--fs-micro); border-radius:var(--radius); }
.btn-primary,.btn.primary,.btn.pri,.btn-accent,.btn.accent,.eu-btn:not(.outline):not(.secondary):not(.ghost):not(.link):not(.danger){
  background:var(--b400); border-color:var(--b400); color:var(--surface); font-weight:600; box-shadow:none;
}
.btn-primary:hover,.btn.primary:hover,.btn.pri:hover,.btn-accent:hover,.btn.accent:hover{
  background:var(--b500); border-color:var(--b500); color:var(--surface); filter:none;
}
.btn-secondary,.eu-btn.outline,.eu-btn.secondary{ background:var(--surface); color:var(--text-2); border-color:var(--border-2); }
.btn-ghost,.eu-btn.ghost,.eu-btn.link{ background:transparent; border-color:transparent; color:var(--text-2); }
.btn-danger,.btn.ng,.eu-btn.danger{ background:var(--surface); color:var(--err); border-color:var(--err2); }
.btn-danger:hover,.btn.ng:hover,.eu-btn.danger:hover{ background:var(--err2); }
.btn-success{ background:var(--surface); color:var(--ok); border-color:var(--ok2); }
.btn:disabled,.eu-btn:disabled{ opacity:.5; cursor:not-allowed; }
.eu-btn.icon{ width:32px; padding:0; justify-content:center; }
.eu-btn.icon.sm{ width:26px; }

/* ───────────────────────────────────────────────────────────────────────
   D. THẺ — V1 .card / .card>.ch / thẻ số .st
   ─────────────────────────────────────────────────────────────────────── */
.card,.panel,.eu-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
}
.card-header,.panel-hd,.eu-card-hd{ padding:10px 12px; border-bottom:1px solid var(--border); }
.card-body,.panel-body{ padding:12px; }
.eu-card{ gap:12px; padding:12px 0; }
.eu-card-hd,.eu-card-ct,.eu-card-ft{ padding-left:12px; padding-right:12px; }
.kpi,.eu-stat{ border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow); padding:10px 12px; }
.kpi-value,.kpi-val,.eu-stat .v{
  font-size:26px; font-weight:700; letter-spacing:-.6px; line-height:1.15;
  font-variant-numeric:tabular-nums; color:var(--text);
}
.kpi-label,.eu-stat .l{ font-size:var(--fs-sm); color:var(--text-4); }

/* ───────────────────────────────────────────────────────────────────────
   E. BẢNG — V1 table.tb: th 32px 12px/600 nền --surface-1 · td 6px 8px
   ─────────────────────────────────────────────────────────────────────── */
table{ font-size:var(--fs-base); }
thead th,table.eu-tb th{
  height:var(--row-h); padding:0 8px; text-align:left;
  font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:600;
  letter-spacing:0; text-transform:none;
  color:var(--text-3); background:var(--surface-1); border-bottom:1px solid var(--border);
  white-space:nowrap;
}
tbody td,table.eu-tb td{
  height:auto; padding:6px 8px; font-size:var(--fs-base);
  color:var(--text-2); border-bottom:1px solid var(--border); vertical-align:middle;
}
tbody tr:hover td{ background:var(--surface-1); }
tbody tr.sel td,tbody tr.selected td{ background:var(--b50); }
td.r,th.r,td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.td-primary,td.nm{ color:var(--text); font-weight:600; }
table.eu-tb{ font-size:var(--fs-base); }

/* ───────────────────────────────────────────────────────────────────────
   F. BADGE / CHIP — V1 .bg: cao 20 · bo 9999 · 12px/600
   ─────────────────────────────────────────────────────────────────────── */
.badge,.eu-bg,.erp-chip{
  display:inline-flex; align-items:center; gap:4px;
  height:20px; padding:0 8px; border-radius:9999px;
  font-size:var(--fs-sm); font-weight:600; line-height:1; white-space:nowrap;
  background:var(--surface-3); color:var(--text-3); border:0;
}
.badge-ok,.badge.ok,.badge.green,.eu-bg.ok{ background:var(--ok2); color:var(--ok); }
.badge-warn,.badge.warn,.badge.amber,.eu-bg.warn{ background:var(--warn2); color:var(--warn); }
.badge-err,.badge.err,.badge.red,.badge-danger,.eu-bg.err,.eu-bg.destructive{ background:var(--err2); color:var(--err); }
.badge-info,.badge.info,.badge.blue,.eu-bg.info{ background:var(--b50); color:var(--b400); }
.badge-neutral,.badge.gray,.badge.slate{ background:var(--surface-3); color:var(--text-3); }
.badge.outline,.eu-bg.outline{ background:none; border:1px solid var(--border-2); color:var(--text-3); }

/* ───────────────────────────────────────────────────────────────────────
   G. Ô NHẬP — V1 .inp: cao 32 · bo 8 · 12px · vòng focus 3px
   ─────────────────────────────────────────────────────────────────────── */
.form-inp,.inp-sm,.eu-inp,.eu-sel,.tb-search input{
  height:32px; padding:0 10px; border-radius:var(--radius-lg);
  border:1px solid var(--border-2); background:var(--surface); color:var(--text);
  font-family:inherit; font-size:var(--fs-sm); box-shadow:none; outline:none;
}
textarea.form-inp,.eu-ta{ height:auto; padding:8px 10px; line-height:1.5; }
.eu-inp.sm,.eu-sel.sm,.inp-sm{ height:26px; font-size:var(--fs-xs); border-radius:var(--radius); }
.form-inp:focus,.inp-sm:focus,.eu-inp:focus,.eu-sel:focus,.eu-ta:focus,.tb-search input:focus{
  outline:none; border-color:var(--b400);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--b400) 45%,transparent);
}
.form-inp::placeholder,.inp-sm::placeholder,.eu-inp::placeholder{ color:var(--text-4); }
.form-label,.eu-lbl{ font-size:var(--fs-sm); font-weight:500; color:var(--text-2); }

/* ───────────────────────────────────────────────────────────────────────
   H. TAB · PHÂN ĐOẠN · PHÂN TRANG
   ─────────────────────────────────────────────────────────────────────── */
.tabs{ display:flex; gap:0; border-bottom:1px solid var(--border); }
.tab,.tabs .tb2{
  height:32px; padding:0 12px; border:none; background:none; font:inherit;
  font-size:var(--fs-sm); font-weight:500; color:var(--text-4); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:0;
}
.tab.active,.tab.on,.tabs .tb2.on{ color:var(--text); font-weight:600; border-bottom-color:var(--b400); background:none; }
.seg,.eu-seg{ height:32px; border-radius:var(--radius-lg); }
.pgbtn{ width:30px; height:30px; border-radius:var(--radius); font-size:var(--fs-sm); }

/* ───────────────────────────────────────────────────────────────────────
   I. DẢI CẢNH BÁO — V1 .al
   ─────────────────────────────────────────────────────────────────────── */
.al,.alert,.eu-alert{
  border-radius:var(--radius-lg); padding:9px 12px; font-size:var(--fs-sm);
  line-height:1.55; border:1px solid transparent;
}
.al.warn,.alert-warn,.alert.warn{ background:var(--warn2); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 25%,transparent); }
.al.err,.alert-err,.alert.err,.alert-danger{ background:var(--err2); color:var(--err); border-color:color-mix(in srgb,var(--err) 25%,transparent); }
.al.ok,.alert-ok,.alert.ok,.alert-success{ background:var(--ok2); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 25%,transparent); }
.al.info,.alert-info,.alert.info{ background:var(--b50); color:var(--b400); border-color:var(--b200); }

/* ───────────────────────────────────────────────────────────────────────
   K. ĐỢT 3 — BỐ TRÍ ba màn đã có mockup "SAU" trong
      _mockups/RA_SOAT_DONG_BO_GIAO_DIEN_2026-09-06.html (Alex gật 06/09).
      Chỉ CSS phạm vi màn, đặc hiệu cao (html #root …) để thắng <style> của
      fragment nằm sau trong DOM. Không đổi DOM, không đổi JS.
      Màn khác: CHỜ Alex chỉ định, có mockup trước/sau riêng.
   ─────────────────────────────────────────────────────────────────────── */
/* ① crm · Tra Giá — cây trái 250 như V1 · thanh công cụ phẳng (V1 .bar) · khung bo 8
      · "tray" tổng đen thành hàng tổng cùng ngôn ngữ bảng */
html #bp-root #bp-tgpro-view .tgp-tree{ width:250px; min-width:250px; }
@media(max-width:1240px){ html #bp-root #bp-tgpro-view .tgp-tree{ width:200px; min-width:200px; } }
html #bp-root #bp-tgpro-view .tgp-slim{ background:transparent; border:0; border-radius:0; padding:0; margin-bottom:10px; gap:8px; font-size:var(--fs-sm); box-shadow:none; }
html #bp-root #bp-tgpro-view .tgp-shell{ border-radius:var(--radius-lg); }
html #bp-root #bp-tgpro-view .tgp-card{ border-radius:var(--radius-lg); }
html #bp-root #bp-tgpro-view .tgp-hd{ padding:10px 12px; }
html #bp-root #bp-tgpro-view .tgp-hd2{ padding:8px 12px; }
html #bp-root #bp-tgpro-view .tgp-grid{ padding:0 12px 4px; }
html #bp-root #bp-tgpro-view .tgp-pname{ font-family:var(--font-sans); font-size:var(--fs-h2); font-weight:700; letter-spacing:0; }
html #bp-root #bp-tgpro-view .tgp-tray{ background:var(--surface-1); color:var(--text); border-top:1px solid var(--border); border-radius:0; box-shadow:none; margin:0; padding:6px 12px; }
html #bp-root #bp-tgpro-view .tgp-grand{ font-family:var(--font-sans); font-size:var(--fs-h2); color:var(--text); letter-spacing:0; }
html #bp-root #bp-tgpro-view .tgp-btn.teal{ color:var(--surface); }
/* ② plm · BOM — lưới 250 | 1fr | 360 · đầu đối tượng gọn 12/12 · tab 32 · đầu bảng một tầng 32 */
html #sbom-root .v11{ grid-template-columns:250px minmax(0,1fr) 360px; border-radius:var(--radius-lg); }
@media(max-width:1280px){ html #sbom-root .v11{ grid-template-columns:200px minmax(0,1fr); } }
html #sbom-root .v11-navh{ padding:10px 12px; }
html #sbom-root .v11-oh{ padding:12px 12px 0; }
html #sbom-root .v11-oh.snap{ padding:8px 12px 0; }
html #sbom-root .v11-code{ font-family:var(--font-sans); font-size:var(--fs-h1); font-weight:700; letter-spacing:-.2px; }
html #sbom-root .v11-tabs{ height:var(--row-h); padding:0 12px; }
html #sbom-root .v11 table.sb-bom thead tr.sb-g1 th{ height:var(--row-h); }
html #sbom-root .v11 table.sb-bom thead tr.sb-g2 th{ height:var(--row-h); top:var(--row-h) !important; } /* !important vì sheet-bom.html:1808 gõ top:26px!important — tầng 1 giờ cao --row-h nên tầng 2 phải dính đúng dưới nó */
html #sbom-root .v11 table.sb-bom tfoot td{ height:36px; }
html #sbom-root .v11-insp-h{ height:40px; }
/* ③ mes · Tối ưu quy trình (trang đứng riêng, tự nạp file này) — cây trái 250 · nút có chiều cao
      · đầu bảng cấu hình BOM không còn nền xanh đặc · tiêu đề khối h2 */
html body.mesv12 .gantt-nav-sidebar{ width:250px; }
html body.mesv12 .gantt-nav-sidebar.collapsed{ width:40px; }
html body.mesv12 .btn-primary,html body.mesv12 .btn-secondary,html body.mesv12 .btn-danger,html body.mesv12 .btn-run,html body.mesv12 .btn-export,html body.mesv12 .btn-hdr{
  height:32px; padding:0 12px; border-radius:var(--radius-lg); font-size:var(--fs-sm); display:inline-flex; align-items:center; gap:6px; }
html body.mesv12 .btn-sm,html body.mesv12 .btn-ic,html body.mesv12 .btn-edit,html body.mesv12 .btn-demo-sm{ height:26px; padding:0 8px; border-radius:var(--radius); font-size:var(--fs-xs); }
html body.mesv12 .bom-config-table th{ background:var(--surface-1); color:var(--text-3); }
html body.mesv12 .panel-title{ font-size:var(--fs-h1); }
html body.mesv12 .sdp-section-title{ font-size:var(--fs-xs); letter-spacing:.04em; }
html body.mesv12 .card{ border-radius:var(--radius-lg); border-color:var(--border); }
html body.mesv12 .proc-search-inp:focus,html body.mesv12 .gantt-search-inp:focus{ border-color:var(--b400); box-shadow:0 0 0 3px color-mix(in srgb,var(--b400) 45%,transparent); }

/* ───────────────────────────────────────────────────────────────────────
   J. LOẠI TRỪ — bản in và hình vẽ không mặc lớp áo này
   ─────────────────────────────────────────────────────────────────────── */
.bc-a4 table,.bc-a4 th,.bc-a4 td,[class*="print"] table,[class*="print"] th,[class*="print"] td,
.isod-doc table,.isod-doc th,.isod-doc td{ height:auto; font-size:inherit; background:inherit; color:inherit; }
svg text{ font-family:var(--font-sans); }