@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ════════════════════════════════════════════════════════════
   NSCA Platform — THEME (Enterprise Design System)
   Đồng bộ giao diện toàn hệ thống bằng cách override CSS tokens.
   - KHÔNG đổi cấu trúc / chức năng — chỉ skin lại màu, font, độ bo, bóng.
   - Sáng = nền ngả xanh doanh nghiệp (mặc định).
   - Tối  = navy sâu sang trọng (data-theme="dark").
   Cách hoạt động: file này nạp SAU <style> nội tuyến nên các biến :root
   ở đây thắng, mọi component dùng var(...) tự đổi theo.
   Phiên bản: 2026-08-26.1

   ════════════════════════════════════════════════════════════
   🎨 NÂNG HỆ THIẾT KẾ — 26/08/2026 · Alex duyệt bản mockup CHỐT
   ════════════════════════════════════════════════════════════
   Alex xem ba bản mockup liên tiếp và nói giao diện "hơi tù". Nguyên nhân
   không nằm ở bố cục mà ở LỚP NỀN: bảng màu cũ (xám ngả nâu kiểu Office
   2016) nhạt đều nhau nên không có gì dẫn mắt, và font mặc định của hệ điều
   hành thì mỗi máy một kiểu.

   NGUỒN MÀU: _mockups/MOCKUP_CHOT_NSCA_CRM.html (bản Alex đã gật).
   Bài thử `_dev/test_theme_khop_mockup.js` đọc THẲNG mã màu từ tệp mockup
   rồi đối chiếu với file này — lệch một mã là ĐỎ. Đừng sửa màu ở đây bằng
   tay; sửa ở mockup trước, rồi chạy lại bài thử.

   ⚠ CHỈ ĐỔI GIÁ TRỊ, GIỮ NGUYÊN TÊN BIẾN.
   Mockup dùng bộ tên riêng (--acc, --ink, --line…) nhưng ERP đã có 200+ tệp
   bám vào tên cũ (--b400, --text, --border…). Đổi tên là phải sửa từng tệp,
   và mỗi tệp bỏ sót là một chỗ hỏng câm. Nên ở đây tên giữ nguyên, chỉ thay
   mã màu — cả hệ đổi diện mạo mà không tệp nào phải sửa.

   ⚠ KHÔNG ĐỘNG TỚI THANG CỠ CHỮ (--fs-*).
   Đổi cỡ chữ hàng loạt sẽ xô bố cục ở những màn cũ mà tôi không render kiểm
   được từ sandbox. Màu và font là thứ Alex phàn nàn; cỡ chữ để đợt sau, làm
   từng màn kèm ảnh chụp đối chứng.

   Ánh xạ tên cũ ⇄ tên mockup:
     --b400/--b500  ⇄ --acc/--acc-h    (sắc nhấn xanh)
     --b50/--b200   ⇄ --acc-w/--acc-b  (nền và viền nhạt của sắc nhấn)
     --text..text-5 ⇄ --ink..--ink-4   (bốn nấc chữ)
     --border*      ⇄ --line*          (ba nấc viền)
     --surface*     ⇄ --surface*       (trùng tên, khác giá trị)
     --ok/--warn/--err ⇄ --ok/--wn/--er
   ════════════════════════════════════════════════════════════ */

/* ───────── LIGHT (mặc định · xám trung tính, nhấn xanh) ───────── */
:root{
  /* Neutrals — thang xám trung tính, không còn ngả nâu */
  --n0:#ffffff; --n50:#F9FAFB; --n100:#F1F3F6; --n200:#E7EAEF; --n300:#D6DBE4;
  --n400:#98A2B3; --n500:#697588; --n600:#3C4757; --n700:#232C3B; --n800:#0B1220; --n900:#000000;
  /* Brand — sắc nhấn xanh (mockup: --acc) */
  --b50:#EDF1FE; --b100:#DCE6FC; --b200:#C7D5FA; --b300:#5B87F5; --b400:#1F4FD8; --b500:#1A43BB; --b600:#16389C;
  /* Semantic (mockup: --ok / --wn / --er) */
  --ok:#0E9F6E; --ok2:#E7F7F1; --warn:#B45309; --warn2:#FDF3E4; --err:#C43426; --err2:#FDECEA; --info:#1F4FD8; --info2:#EDF1FE;
  /* Surface / text / border */
  --surface:#FFFFFF; --surface-1:#F9FAFB; --surface-2:#F1F3F6; --surface-3:#E7EAEF;
  --border:#E7EAEF; --border-2:#D6DBE4; --border-strong:#BFC7D4;
  --text:#0B1220; --text-2:#3C4757; --text-3:#5A6577; --text-4:#6C7687; --text-5:#98A2B3;
  /* CTA — nút chính mực đậm */
  --ink:#0B1220; --ink-hover:#232C3B; --ink-fg:#ffffff;
  /* Thương hiệu STARDUCT — cam, chỉ dùng cho logo và điểm nhấn hiếm */
  --brand:#F26A21; --brand-w:#FEF1EA;
  /* Sidebar / topbar */
  --sb-bg:#FFFFFF; --sb-hover:#F1F3F6; --sb-active:#EDF1FE; --sb-border:#E7EAEF;
  --sb-text:#5A6577; --sb-text-a:#0B1220; --sb-accent:#1F4FD8;
  /* Shadows — nhiều lớp mỏng thay vì một lớp mờ to */
  --shadow:0 1px 2px rgba(11,18,32,.05);
  --shadow-md:0 1px 3px rgba(11,18,32,.07), 0 4px 12px rgba(11,18,32,.05);
  --shadow-lg:0 8px 28px rgba(11,18,32,.12), 0 2px 6px rgba(11,18,32,.06);
  /* Fonts — Inter đứng đầu, các font hệ thống là lưới an toàn khi chặn mạng */
  --font-sans:'Inter','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'Cascadia Code','JetBrains Mono','Consolas',ui-monospace,monospace;
  color-scheme:light;
}

/* ───────── DARK (navy sâu · cùng bộ màu bản Sáng, đảo chiều) ───────── */
:root[data-theme="dark"]{
  /* Neutral ramp đảo chiều: số nhỏ = tối, số lớn = sáng */
  --n0:#101A2C; --n50:#172238; --n100:#1E2B44; --n200:#273856; --n300:#3A4C6B;
  --n400:#6F7B8F; --n500:#8C98AB; --n600:#A3AEBF; --n700:#C3CCD8; --n800:#E8ECF2; --n900:#ffffff;
  /* Brand — nền tối, chữ sáng */
  --b50:#182643; --b100:#20325A; --b200:#2A3E68; --b300:#4A76E8; --b400:#5B87F5; --b500:#7099F8; --b600:#A6BFFC;
  /* Semantic — nền tối, màu sáng */
  --ok:#34C08A; --ok2:#0F2A22; --warn:#E0A244; --warn2:#2E2312; --err:#F2695A; --err2:#33191A; --info:#5B87F5; --info2:#182643;
  /* Surface / text / border */
  --surface:#172238; --surface-1:#131F33; --surface-2:#1E2B44; --surface-3:#273856;
  --border:#2A3A56; --border-2:#3A4C6B; --border-strong:#4A5D7E;
  --text:#E8ECF2; --text-2:#C3CCD8; --text-3:#A3AEBF; --text-4:#8C98AB; --text-5:#6F7B8F;
  /* Thương hiệu STARDUCT */
  --brand:#FF8848; --brand-w:#33200F;
  /* Sidebar / topbar */
  --sb-bg:#16253E; --sb-hover:rgba(160,185,225,.07); --sb-active:#182643; --sb-border:#2A3A56;
  --sb-text:#C3CCD8; --sb-text-a:#F2F5F9; --sb-accent:#5B87F5;
  /* CTA — nền tối dùng nút sáng */
  --ink:#F2F5F9; --ink-hover:#ffffff; --ink-fg:#131925;
  /* Shadows — sâu */
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 1px 3px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:0 8px 28px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  /* 30/10/2026 — BIẾN CHỈ CÓ Ở CHẾ ĐỘ TỐI (--toi-*). Dùng cho nền/chữ/viền SÁNG GÕ CỨNG trong module: var(--toi-do,#fdecec).
     Bản Sáng KHÔNG có biến này ⇒ dùng đúng mã cũ (y nguyên); bản Tối ⇒ màu navy dưới đây. Luật CLAUDE.md 0s · _dev/_doi_nen_sang_toi.js */
  --toi-nen:#172238; --toi-nen-1:#16253E; --toi-nen-2:#1E2B44;
  --toi-do:#3A1C26; --toi-vang:#3A2C14; --toi-xanh:#12322B; --toi-lam:#1A2E50;
  --toi-chu:#E8ECF2; --toi-chu-3:#A3AEBF; --toi-chu-4:#8C98AB;
  --toi-do-chu:#F2857A; --toi-vang-chu:#E9B45A; --toi-xanh-chu:#4FC98F; --toi-lam-chu:#8DB4F0;
  --toi-vien:#2A3A56; --toi-vien-2:#3A4C6B;
  color-scheme:dark;
}

/* ───────── Font + chuyển nền mượt ───────── */
body{ font-family:var(--font-sans); transition:background-color .2s ease, color .2s ease; }
.num,[class*="mono"]{ font-feature-settings:"tnum"; }

/* ───────── Nút chuyển Sáng/Tối trên topbar ───────── */
.tb-theme-btn{
  width:32px; height:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--sb-border);
  color:var(--sb-text); border-radius:8px; cursor:pointer;
  font-size:15px; line-height:1; margin-right:10px;
  transition:background .15s, color .15s, border-color .15s;
}
.tb-theme-btn:hover{ background:var(--sb-hover); color:var(--sb-text-a); border-color:var(--sb-accent); }

/* ───────── Polish nhẹ (không đổi layout) ───────── */
::-webkit-scrollbar-thumb{ background:var(--border-2); }
.reg-card{ transition:box-shadow .18s ease, transform .12s ease, border-color .18s ease; }

/* Dark mode: vá vài chỗ hardcode hay gặp ở shell để không bị chói */
:root[data-theme="dark"] .rcs-embedded{ background:#241a3d; color:#c4a8ff; border-color:#3a2d63; }
:root[data-theme="dark"] .rc-api.embedded,
:root[data-theme="dark"] .api-embed,
:root[data-theme="dark"] .rca-embed{ background:#241a3d; color:#c4a8ff; border-color:#3a2d63; }
:root[data-theme="dark"] .api-post{ background:#2a1d10; color:#f0a868; }
:root[data-theme="dark"] .rca-embed{ color:#fff; }
:root[data-theme="dark"] img[src*="logo"],
:root[data-theme="dark"] .invert-on-dark{ filter:none; }

/* ════════════════════════════════════════════════════════════
   SHELL RESTYLE — topbar + sidebar SÁNG theo mockup enterprise
   Re-point các màu hardcode (vốn giả định nền tối) sang biến token,
   nên tự đúng ở cả chế độ Sáng (nền trắng) lẫn Tối (navy).
   ════════════════════════════════════════════════════════════ */
/* Topbar */
.topbar{ background:var(--sb-bg); border-bottom:1px solid var(--sb-border); }
.tb-logo-name{ color:var(--sb-text-a); letter-spacing:-.01em; }
.tb-logo-ver{ color:var(--sb-text); }
.tb-mod{ color:var(--sb-text); }
.tb-mod:hover{ color:var(--sb-text-a); background:var(--sb-hover); }
.tb-mod.active{ color:var(--sb-accent); border-bottom-color:var(--sb-accent); }
.tb-mod-dot{ background:var(--sb-text); }
.tb-mod.active .tb-mod-dot{ background:var(--sb-accent); box-shadow:0 0 8px color-mix(in srgb,var(--sb-accent) 55%,transparent); }
.tb-mod-badge{ background:var(--err2); color:var(--err); border-color:color-mix(in srgb,var(--err) 28%,transparent); }
.tb-mod-badge.y{ background:var(--warn2); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 28%,transparent); }
.tb-add-mod{ color:var(--sb-text); border-left-color:var(--sb-border); }
.tb-add-mod:hover{ color:var(--sb-accent); }
.tb-right{ border-left-color:var(--sb-border); }
.tb-live{ color:var(--ok); background:var(--ok2); border-color:color-mix(in srgb,var(--ok) 25%,transparent); }
.tb-live-dot{ background:var(--ok); }
.tb-clock{ color:var(--sb-text); background:var(--sb-hover); border-color:var(--sb-border); }
.tb-user{ background:var(--sb-hover); border-color:var(--sb-border); }
.tb-user:hover{ background:var(--sb-active); }
.tb-user-name{ color:var(--sb-text-a); }
.tb-user-role{ color:var(--sb-text); }
.sb-toggle-btn:hover{ color:var(--sb-text-a); background:var(--sb-hover); }
.tb-more{ color:var(--sb-text); }
.tb-more:hover{ color:var(--sb-text-a); background:var(--sb-hover); }
.tb-more-menu{ background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-lg); }
.tb-more-item{ color:var(--text-2); }
.tb-more-item:hover{ background:var(--surface-2); color:var(--text); }
.tb-more-item.active{ background:var(--b50); color:var(--b500); }
/* User dropdown */
.tb-user-dropdown{ background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-lg); }
.tb-ud-header{ border-bottom-color:var(--border); }
.tb-ud-fullname{ color:var(--text); }
.tb-ud-email{ color:var(--text-4); }
.tb-ud-meta{ border-bottom-color:var(--border); }
.tb-ud-row{ color:var(--text-2); }
.tb-ud-row span:first-child{ color:var(--text-4); }
.tb-ud-btn{ color:var(--text-2); }
.tb-ud-btn:hover{ background:var(--surface-2); color:var(--text); }
.tb-ud-btn.danger{ color:var(--err); }
.tb-ud-btn.danger:hover{ background:var(--err2); color:var(--err); }
/* Sidebar */
.sidebar{ background:var(--sb-bg); border-right:1px solid var(--sb-border); }
.sb-label.sb-grp-head:hover{ color:var(--sb-text-a); }
.sb-admin-sec .sb-label{ color:var(--warn); }
.sb-item:hover{ background:var(--sb-hover); color:var(--sb-text-a); }
.sb-item.active{ background:var(--sb-active); color:var(--sb-text-a); }
.sb-badge.r{ background:var(--err2); color:var(--err); border-color:color-mix(in srgb,var(--err) 25%,transparent); }
.sb-badge.y{ background:var(--warn2); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 25%,transparent); }
.sb-badge.b{ background:var(--b50); color:var(--b500); border-color:var(--b100); }
.sb-badge.g{ background:var(--ok2); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 25%,transparent); }
.sb-api-info{ background:var(--b50); border-color:var(--b100); }
.sb-api-label{ color:var(--b500); }
.sb-api-url{ color:var(--text-4); }
/* Nút theme đặt cùng style cụm phải topbar */
.tb-theme-btn{ width:30px; height:30px; border-radius:6px; }

/* ───────── Responsive: lưới registry co theo bề ngang ───────── */
@media (max-width:1280px){ .registry-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:920px){ .registry-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){
  .registry-grid{ grid-template-columns:1fr; }
  .tb-theme-btn{ margin-right:6px; }
}

/* ═══ MS365: canvas kem + màu module (2026-07-10) ═══ */
body{ background:var(--canvas); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
:root{
  /* 26/08: nền kem #f5f1ea đổi sang xám lạnh theo mockup chốt. Nền kem là
     một trong hai thứ làm giao diện "tù" — nó hút hết độ tương phản của
     thẻ trắng nằm trên. */
  --canvas:#F6F7F9;
  --c-crm:#1c5fd0; --c-pkd:#1c5fd0; --c-mes:#f56a1e; --c-sx:#f56a1e; --c-fin:#12925a; --c-tckt:#12925a;
  --c-hcm:#7a3ff0; --c-hcns:#7a3ff0; --c-plm:#0b96b0; --c-rd:#0b96b0; --c-npp:#e83f92;
  --c-kpi:#3a49d6; --c-ceo:#3a49d6; --c-wms:#e0a012; --c-kho:#e0a012; --c-qms:#0e7a0b;
  --c-lib:#5b6b86; --c-flow:#7a5cff; --c-wfhub:#0f6cbd; --c-work:#0f6cbd; --c-orders:#0f6cbd; --c-tools:#605e5c;
  --grad-ai:linear-gradient(135deg,#2aa5f4,#7a5cff 55%,#e85aad);
}
:root[data-theme="dark"]{ --canvas:#101A2C; }

/* ════════════════════════════════════════════════════════════
   THANG CỠ CHỮ & KHOẢNG CÁCH — thêm 2026-07-27
   Lý do: toàn hệ thống đang rải rác 11 cỡ chữ (10 · 10.5 · 11 · 11.5 · 12 ·
   12.5 · 13 · 13.5 · 15 · 16 · 17px), mỗi màn tự chọn một kiểu nên nhìn
   KHÔNG ĐỒNG BỘ dù màu đã chuẩn (Alex nhận xét 27/07).
   Từ nay màn mới CHỈ dùng 6 bậc dưới đây, không gõ px trực tiếp nữa.
   Không đổi gì ở các màn cũ — đây chỉ là biến, ai dùng thì hưởng.
   ════════════════════════════════════════════════════════════ */
:root{
  --fs-h1:15px;     /* tiêu đề trang / tên dự án            */
  --fs-h2:13px;     /* tiêu đề khối, tên việc trong ngăn     */
  --fs-base:13px;   /* chữ thân, nội dung chính             */
  --fs-sm:12px;     /* bảng, nút, chip                      */
  --fs-xs:11px;     /* chú thích, dòng phụ                  */
  --fs-micro:11px;  /* NHÃN VIẾT HOA, badge                 */
  --row-h:32px;     /* chiều cao 1 dòng bảng chuẩn          */
  --radius:6px; --radius-lg:8px;

  /* ══ 13 BIẾN "KIỂU TRANG CHỦ" (12/09/2026, bản .316) ═══════════════════
     Alex chốt "TRANG CHỦ LÀM CHUẨN" ⇒ mọi lưới thẻ module đo theo bộ này.
     Giá trị chép THẲNG từ core/home-hub.html (#erphub) — bản chuẩn.
     Ba chỗ dùng: core/luoi-cap2.js · core/app-launcher.js ·
     core/pages/bang-ung-dung.html. Khai ở ĐÂY vì đây là tệp biến dùng chung
     mà bộ soi "biến CSS ma" (_tests/test_bang_ung_dung.js ⑧) đọc — khai ở
     :root của index.html thì mọi var(--sc-*) bị tính là BIẾN MA.
     ⚠ #sp-lop và #erphub vẫn tự khai lại cho cây con của chúng; khai gần hơn
       thì thắng, nên màn khởi động và Trang Chủ không đổi gì.
     🔴 Lệch một con so với home-hub.html là ĐỎ ở test_luoi_2cap_khop_mockup.js */
  --sc-rong:1080px;    --sc-the-r:236px;   --sc-the-dem:13px 15px;
  --sc-the-bo:11px;    --sc-khe:11px;
  --sc-ico-cd:23px;    --sc-ten-cd:13.5px; --sc-mo-cd:11.5px;
  --sc-nhom-cd:10.5px; --sc-nhom-cach:15px;
  --sc-chao-cd:19px;   --sc-phu-cd:12px;   --sc-dau-cach:20px;
}