:root {
  /* ===== TẦNG THÔ — BRAND (neo #1f6f5c, giữ nhận diện Thịnh Gia) ===== */
  --brand-50:#e9f4f0; --brand-100:#d3e9e0; --brand-200:#a9d5c4; --brand-300:#72bba1;
  --brand-400:#3b9c7c; --brand-500:#1f6f5c; --brand-600:#1a5f4f; --brand-700:#174f42;
  --brand-800:#123f35; --brand-900:#0f332b;
  /* ===== TẦNG THÔ — GRAY lạnh 11 bậc (kiểu Linear) ===== */
  --gray-25:#fcfcfd; --gray-50:#f8f9fb; --gray-100:#f1f3f6; --gray-200:#e4e8ee;
  --gray-300:#d0d7e0; --gray-400:#98a4b3; --gray-500:#6b7a8c; --gray-600:#51606f;
  --gray-700:#39485a; --gray-800:#24303e; --gray-900:#16202b;
  /* ===== SEMANTIC ===== */
  --ok:#0e7a5f;      --ok-soft:#e7f6ef;
  --warn:#9a6b00;    --warn-soft:#fdf3dd;   /* giữ hex --warn cũ */
  --danger:#b3372f;  --danger-soft:#fbe4e2; /* giữ hex --danger cũ */
  --info:#2251c5;    --info-soft:#e8effc;
  /* Chip trạng thái .st (Còn hàng/Đang cọc/Nóng/Đã bán...) */
  --st-ok-bg:var(--ok-soft);     --st-ok-fg:var(--ok);
  --st-warn-bg:var(--warn-soft); --st-warn-fg:var(--warn);
  --st-info-bg:var(--info-soft); --st-info-fg:var(--info);
  --st-hot-bg:var(--danger-soft);--st-hot-fg:var(--danger);
  --st-off-bg:#eef1f4;           --st-off-fg:var(--gray-500);
  /* Nền pastel cho icon tile KPI / quick action */
  --p-green:#e6f2ee; --p-blue:#e8f0fe; --p-amber:#fdf3dd; --p-violet:#f1eafe; --p-red:#fbe4e2;
  /* Màu biểu đồ (KHÔNG dùng cho hành động) */
  --viz-blue:#2563eb; --viz-purple:#7c3aed; --viz-amber:#b45309;
  /* Gradient thương hiệu chuẩn hóa (thay #173f34/#29a382 rải rác) */
  --grad-brand:linear-gradient(135deg,var(--brand-800),var(--brand-500));
  --grad-bar:linear-gradient(90deg,var(--brand-500),var(--brand-300));
  /* ===== RADIUS ===== */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:999px;
  /* ===== SHADOW 3 mức: card / hover / modal-drawer-pop ===== */
  --shadow-1:0 1px 2px rgba(16,24,40,.05);
  --shadow-2:0 2px 8px rgba(16,24,40,.07),0 1px 2px rgba(16,24,40,.04);
  --shadow-3:0 12px 32px rgba(16,24,40,.14),0 2px 6px rgba(16,24,40,.06);
  /* ===== SPACING nhịp 4px ===== */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  /* ===== TYPE (body 14px/1.45 — ERP density; iOS input giữ 16px trong media mobile) ===== */
  --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-kpi:24px; --lh:1.45;
  /* ===== KHUNG ===== */
  --topbar-h:56px; --sb-w:232px;
  /* ===== ALIAS TOKEN CŨ — 462 dòng CSS cũ + inline var() trong app.js đổi da ngay,
     white-label vẫn chạy (app.js:4302 setProperty('--accent') inline thắng cascade) ===== */
  --bg:var(--gray-50); --panel:#ffffff; --text:var(--gray-900); --muted:var(--gray-500);
  --line:var(--gray-200); --accent:var(--brand-500); --accent-soft:var(--brand-50);
  /* ===== SIDEBAR — MẶC ĐỊNH SÁNG kiểu Notion (đúng mockup) ===== */
  --sb-bg:#fbfcfd; --sb-line:var(--gray-200); --sb-text:var(--gray-700);
  --sb-dim:var(--gray-400); --sb-hover:var(--gray-100);
  --sb-active-bg:var(--brand-50); --sb-active-text:var(--brand-700); --sb-ind:var(--brand-500);
  /* ===== TOPBAR token (12/07): mặc định sáng; skin đậm ghi đè ở html[data-skin=dam] ===== */
  --tb-bg:#fff; --tb-line:var(--gray-200); --tb-text:var(--gray-900); --tb-mut:var(--gray-500);
  --tb-chip:var(--gray-50); --tb-hover:var(--gray-100); --tb-accent:var(--brand-500);
}
/* Skin ĐẬM cổ điển — opt-out cho người quen nền tối.
   Boot: document.documentElement.dataset.skin = localStorage.getItem('skin')||''  (nút gạt ở /account) */
html[data-skin="dam"]{
  --sb-bg:#12352d; --sb-line:rgba(255,255,255,.08); --sb-text:#cfe0da;
  --sb-dim:rgba(207,224,218,.62); --sb-hover:rgba(255,255,255,.07);
  --sb-active-bg:rgba(59,156,124,.32); --sb-active-text:#ffffff; --sb-ind:#3b9c7c;
  /* [12/07 hội đồng topbar] skin đậm ăn CẢ topbar — hết vênh trắng/xanh (kiểu Slack) */
  --tb-bg:#12352d; --tb-line:rgba(255,255,255,.1); --tb-text:#e8f1ee;
  --tb-mut:rgba(207,224,218,.72); --tb-chip:rgba(255,255,255,.06);
  --tb-hover:rgba(255,255,255,.08); --tb-accent:#6fd1b0;
}
* { box-sizing: border-box; }
td.num, .value, .kpi .v { font-variant-numeric: tabular-nums; }
body { margin: 0; font: var(--fs-md)/var(--lh) system-ui, "Segoe UI", Roboto, sans-serif;
       background: var(--bg); color: var(--text); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--danger); min-height: 1.2em; }

/* ===== Đăng nhập VIP Pro (hội đồng 13/07) — split-screen: panel thương hiệu | form.
   Dùng token sẵn; login CỐ TÌNH độc lập skin (chỉ --brand-*), 0 CDN/font/ảnh ngoài (trừ logo.png). */
.login-wrap{ --gold:#d4af37; --gold-2:#e6c667; --gold-soft:rgba(212,175,55,.16);
  min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; background:var(--gray-50); }
/* --- CỘT TRÁI: panel thương hiệu --- */
.login-brand{ position:relative; overflow:hidden; color:#fff; display:flex; align-items:center;
  justify-content:center; padding:48px; background:var(--grad-brand); }
.login-brand::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 30% 18%, var(--gold-soft), transparent 60%),
    radial-gradient(80% 70% at 85% 90%, rgba(114,187,161,.20), transparent 60%),
    radial-gradient(60% 60% at 90% 8%, rgba(255,255,255,.06), transparent 55%); }
.login-brand::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 40px);
  -webkit-mask-image:radial-gradient(120% 120% at 30% 30%, #000 40%, transparent 78%);
          mask-image:radial-gradient(120% 120% at 30% 30%, #000 40%, transparent 78%); }
.lb-inner{ position:relative; z-index:1; max-width:460px; width:100%; }
.lb-logo{ height:80px; width:auto; display:block; margin-bottom:22px;
  filter:drop-shadow(0 8px 20px rgba(212,175,55,.35)); }
.lb-word{ margin:0 0 8px; font-size:44px; line-height:1.05; font-weight:800; letter-spacing:.5px; }
.lb-word b{ color:var(--gold-2); font-weight:800; }
.lb-tag{ margin:0 0 30px; font-size:16px; color:rgba(255,255,255,.82); }
.lb-points{ list-style:none; margin:0 0 34px; padding:0; display:flex; flex-direction:column; gap:14px; }
.lb-points li{ position:relative; padding-left:26px; font-size:14.5px; color:rgba(255,255,255,.9); }
.lb-points li::before{ content:""; position:absolute; left:0; top:.45em; width:9px; height:9px; border-radius:2px;
  background:linear-gradient(150deg, var(--gold-2), var(--gold)); box-shadow:0 0 0 3px var(--gold-soft); }
.lb-copy{ margin:0; font-size:11.5px; letter-spacing:.4px; text-transform:uppercase; color:rgba(255,255,255,.55); }
/* --- CỘT PHẢI: form --- */
.login-side{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; }
.login-box{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:36px; width:min(400px,100%); display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-3); }
.login-box .login-mark-sm{ height:52px; width:auto; margin:0 auto 6px; display:none; }  /* chỉ hiện mobile */
.login-box h1{ margin:0; color:var(--gray-900); font-size:22px; font-weight:800; text-align:center; letter-spacing:.2px; }
.login-box > .muted{ margin:0 0 6px; text-align:center; font-size:13.5px; }
.login-box label{ display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:13px; color:var(--gray-700); }
.login-box .fld{ position:relative; }
.login-box .fld input{ height:44px; padding:0 12px 0 40px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--gray-50); font:inherit; color:var(--gray-900); width:100%;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.login-box .fld::before{ position:absolute; left:13px; bottom:11px; font-size:15px; opacity:.6; pointer-events:none; }
.login-box .fld-user::before{ content:"👤"; }
.login-box .fld-pass::before{ content:"🔒"; }
.login-box .fld input::placeholder{ color:var(--gray-400); }
.login-box .fld input:focus{ outline:none; background:#fff; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.login-box button{ margin-top:6px; height:46px; border:none; border-radius:var(--r-md);
  background:var(--grad-brand); color:#fff; font:inherit; font-weight:700; font-size:15px; letter-spacing:.3px; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; box-shadow:0 6px 16px rgba(18,63,53,.22); }
.login-box button:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 10px 22px rgba(18,63,53,.28); }
.login-box button:active{ transform:translateY(0); }
#login-error{ margin:2px 0 0; min-height:0; color:var(--danger); font-size:13px; text-align:center; }
#login-error:not(:empty){ padding:9px 12px; border-radius:var(--r-sm); background:var(--danger-soft); border:1px solid rgba(179,55,47,.25); }
.login-foot{ margin:18px 0 0; font-size:11.5px; color:var(--gray-400); text-align:center; }
@media (prefers-reduced-motion:reduce){ .login-box .fld input, .login-box button{ transition:none; } .login-box button:hover{ transform:none; } }
/* Responsive login (mốc RIÊNG 900px, không dùng chung 920 của app) */
@media (max-width:900px){
  .login-wrap{ grid-template-columns:1fr; }
  .login-brand{ padding:28px 24px 24px; align-items:flex-start; }
  .login-brand::after{ opacity:.35; }
  .lb-inner{ max-width:none; }
  .lb-logo{ height:56px; margin-bottom:14px; }
  .lb-word{ font-size:30px; }
  .lb-tag{ margin-bottom:0; font-size:14px; }
  .lb-points, .lb-copy{ display:none; }
  .login-side{ padding:22px 16px 34px; }
  .login-box{ box-shadow:var(--shadow-2); border-radius:var(--r-lg); padding:26px 22px; }
  .login-box .login-mark-sm{ display:block; }
}
@media (max-width:380px){ .login-brand{ padding:22px 18px 20px; } .lb-word{ font-size:26px; } .login-box{ padding:22px 18px; } }

/* Khung */
.layout { display: flex; min-height: 100vh; padding-top: var(--topbar-h); }
/* Sidebar theo token --sb-*: SÁNG kiểu Notion mặc định; skin ĐẬM qua html[data-skin="dam"] */
.sidebar { width: var(--sb-w); background: var(--sb-bg); color: var(--sb-text); display: flex;
           border-right: 1px solid var(--sb-line);
           flex-direction: column; padding: 12px 0; position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); }
/* Thương hiệu nền tảng THỊNH GIA OS + tên tổ chức white-label + chọn không gian làm việc */
.sidebar .brand-os { font-size: 19px; font-weight: 800; padding: 0 20px 2px; color: var(--sb-active-text); letter-spacing: .5px; }
.sidebar .brand-os span { color: var(--brand-400); }
.sidebar .brand { font-size: 12.5px; font-weight: 600; padding: 0 20px 6px; color: var(--sb-dim); }
/* [12/07] .ws-label đã bỏ — bộ chọn không gian giờ là chip gọn trên topbar (không nhãn) */
.ws-label-daxoa { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--sb-dim); padding: 0 20px 3px; }
#ws-bar { padding: 0 16px 12px; border-bottom: 1px solid var(--sb-line); margin-bottom: 6px; }
#ws-bar select { width: 100%; background: var(--sb-hover); color: var(--sb-text);
  border: 1px solid var(--sb-line); border-radius: 7px; padding: 6px 8px; font-size: 12.5px;
  cursor: pointer; }
#ws-bar:empty { display: none; }   /* không có chi nhánh/không đủ quyền → ẩn cả khối */
#ws-bar select:focus { outline: none; border-color: var(--sb-ind); }
#ws-bar option { color: var(--gray-900); background: #fff; }
.sidebar a { color: var(--sb-text); text-decoration: none; padding: 10px 20px; }
.sidebar a:hover, .sidebar a.active { background: var(--sb-hover); color: var(--sb-active-text); }
.sidebar .spacer { flex: 1; }
/* Điều hướng 2 cấp: phân hệ gập/mở (Đợt A #2) */
#sidebar-nav { flex: 1; overflow-y: auto; }
/* [12/07 hội đồng sidebar] header cụm = nút chính (13px/600, màu chữ chính — hết cảnh cha mờ hơn
   con), icon SVG 18px stroke currentColor, active MỘT ngôn ngữ pill (bỏ thanh chỉ dấu trái). */
.sidebar .navic { width: 18px; height: 18px; flex: 0 0 18px; color: var(--sb-dim); }
.sidebar .navhead { display: flex; align-items: center; gap: 10px; width: calc(100% - 16px);
  background: none; border: none; color: var(--sb-text); font: inherit; font-weight: 600;
  font-size: 13px; padding: 7px 12px; margin: 1px 8px; border-radius: 7px; cursor: pointer;
  text-align: left; }
.sidebar .navhead:hover { background: var(--sb-hover); }
.sidebar .navhead:hover .navic, .sidebar .navgrp.open .navhead .navic { color: currentColor; }
.sidebar .navhead .chev { margin-left: auto; font-size: 12px; opacity: .45; transition: transform .15s; }
.sidebar .navgrp:not(.open) .navhead .chev { transform: rotate(-90deg); }
.sidebar .navgrp:not(.open) .navsub { display: none; }
.sidebar .navitem { display: block; color: var(--sb-text); text-decoration: none; font-size: 13.5px;
  padding: 6px 12px 6px 40px; border-radius: 7px; margin: 0 8px; }
/* Tiêu đề cụm nhỏ trong phân hệ (MISA-style) — gom mục dài thành vài cụm dễ đọc */
.sidebar .navsec { padding: 9px 20px 3px 20px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--sb-dim); }
.sidebar .navsec:first-child { padding-top: 2px; }
.sidebar .navitem:hover { background: var(--sb-hover); color: var(--sb-active-text); }
.sidebar .navitem.active { background: var(--sb-active-bg); color: var(--sb-active-text); font-weight: 600; }
/* Mục phẳng cấp 1 (Hôm nay của tôi · Công việc · Hub) — cùng tầng và cùng ngôn ngữ SVG với navhead */
.sidebar .navitem.navflat { display: flex; align-items: center; gap: 10px; font-size: 13px;
  font-weight: 600; padding: 7px 12px; margin: 1px 8px; width: calc(100% - 16px); }
.sidebar .navitem.navflat.active .navic, .sidebar .navitem.navflat:hover .navic,
.sidebar .navitem.active .navic { color: currentColor; }
/* Nhãn DẢI cấp cao nhất (vd "HỆ THỐNG") — tách băng không đánh số khỏi bản đồ module 1→10 */
.sidebar .navband { margin: 10px 20px 2px; padding-top: 10px; border-top: 1px solid var(--sb-line);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sb-dim); }
.userbox { padding: 12px 20px; border-top: 1px solid var(--sb-line); font-size: 13px; }
/* min-width:0 — cho phép main co dưới bề rộng nội dung (flex mặc định min-width:auto khiến
   bảng rộng ĐẨY cả trang tràn ngang); bảng/kanban tự cuộn trong .table-wrap/.lead-board.
   overflow-x:clip — lưới chắn cuối: mọi nội dung rộng đã tự cuộn trong container con, nên main
   KHÔNG được để lọt tràn ngang cả trang (bắt được từ audit đa thiết bị 13/07). clip không tạo
   scroll-container nên không phá position:sticky của sidebar. */
/* [13/07 audit desktop rộng] max-width 1200→1600 + căn giữa: đo thật cho thấy 1200 khóa cứng bỏ
   trống 488px trên Full HD 1920 (~1/4 màn) · 1128px trên 2K 2560 (~nửa màn). App dày bảng/dashboard
   nên giãn rộng dùng không gian; cap 1600 để 2K không sprawl + margin auto căn giữa cho cân (laptop
   ≤1366 vẫn khít gutter 0, không đổi). Dòng chữ đọc dài do giãn được ghìm bởi .prose-cap dưới. */
main { flex: 1; min-width: 0; padding: 24px 28px; max-width: 1600px; margin-inline: auto; overflow-x: clip; }
/* Đoạn văn giới thiệu/diễn giải đầu trang: ghìm ~78ch cho dễ đọc dù main đã rộng (chuẩn typographic) */
main > p, main > .muted, .panel > p.muted { max-width: 78ch; }
/* Sảnh: KPI card click được + lối tắt phân hệ (Đợt A #3) */
a.kpi-link { text-decoration: none; color: inherit; display: block; transition: box-shadow .12s, transform .12s; }
a.kpi-link:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.ph-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.ph-chip { display: inline-block; background: var(--accent-soft); color: var(--accent); border: 1px solid #cfe6dd;
  border-radius: 16px; padding: 5px 13px; font-size: 13px; font-weight: 600; text-decoration: none; }
.ph-chip:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* [Việc hôm nay] Hàng nút "Bắt đầu nhanh" trên Sảnh — mở lên là bấm làm, đỡ ngợp */
.quick-actions { margin: 4px 0 18px; }
.qa-title { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.qa-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 1100px) { .qa-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .qa-row { grid-template-columns: repeat(2, 1fr); } }
.qa-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 78px; padding: 12px 8px; text-align: center; text-decoration: none;
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 14px; font-weight: 600; font-size: 13.5px; transition: transform .1s, border-color .12s, box-shadow .12s; }
.qa-btn:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(31,111,92,.13); transform: translateY(-1px); }
.qa-ic { font-size: 24px; line-height: 1; }
/* Thanh "đặt làm trang mặc định" — mọi trang chủ phân hệ (Đợt B) */
.home-defbar { margin-top: 18px; padding-top: 12px; border-top: 1px dashed #d7e2dc; font-size: 12.5px; }
.home-defbar a { color: var(--accent); text-decoration: none; font-weight: 600; }
.home-defbar a:hover { text-decoration: underline; }

/* Người bạn đồng hành CHỦ ĐỘNG — feed nudge (AI chủ động, Tầng 5) */
.companion { background: var(--grad-brand); color: #eafff7;
  border-radius: 10px; padding: 13px 15px; margin-bottom: 16px; }
.comp-head { font-size: 14px; margin-bottom: 9px; }
.comp-head b { color: #fff; }
.comp-list { display: flex; flex-direction: column; gap: 7px; }
.nudge { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.10);
  border-radius: 7px; padding: 8px 11px; font-size: 13px; }
.nudge-ico { font-size: 15px; flex: 0 0 auto; }
.nudge-msg { flex: 1; line-height: 1.35; }
.nudge-act { flex: 0 0 auto; color: #fff; background: rgba(255,255,255,.18); text-decoration: none;
  border-radius: 14px; padding: 3px 11px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.nudge-act:hover { background: #fff; color: #1f6f5c; }
.nudge-do { box-shadow: inset 3px 0 0 #ff6b6b; }
.nudge-vang { box-shadow: inset 3px 0 0 #ffcf5c; }
.nudge-xanh { box-shadow: inset 3px 0 0 var(--brand-200); }
.companion .ghost { color: #eafff7; border-color: rgba(255,255,255,.4); background: transparent; }

/* Bong bóng companion nổi + badge số việc khẩn */
#companion-fab { position: fixed; right: 22px; bottom: 22px; z-index: 900; }
#comp-btn { width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--grad-brand); color: #fff; font-size: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,.28); position: relative; }
#comp-btn:hover { transform: translateY(-1px); }
.comp-badge { position: absolute; top: -3px; right: -3px; background: #ff5252; color: #fff;
  font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; line-height: 18px;
  border-radius: 9px; padding: 0 4px; }
.comp-pop { position: absolute; right: 0; bottom: 62px; width: min(380px, 86vw);
  background: #fff; border: 1px solid #e3e8e6; border-radius: 12px; padding: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.22); max-height: 70vh; overflow: auto; }
.comp-pop .companion { margin-bottom: 8px; }
.navbadge { display: inline-block; background: #ff5252; color: #fff; font-size: 10.5px; font-weight: 700;
  border-radius: 9px; min-width: 17px; height: 17px; line-height: 17px; text-align: center;
  padding: 0 4px; margin-left: 6px; vertical-align: middle; }

h2 { margin: 0 0 16px; }
h3 { margin: 20px 0 8px; }

/* Thẻ số liệu */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.card { background: var(--panel); border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-1); }
.card .label { font-size: 13px; color: var(--muted); }
.card .value { font-size: 22px; font-weight: 700; margin-top: 2px; }
.card.warn .value { color: var(--warn); }

/* Hộp "➕ Thêm" gập (13/07 tối ưu desktop): form nhập gập lại → bảng dữ liệu là chính, đỡ đẩy trang.
   summary trông như nút; mở ra mới hiện form. Áp cho các trang CRUD chính (GD/lead/khách/thu chi/CN). */
.addbox { padding: 0; margin-bottom: 14px; }
.addbox > summary { list-style: none; cursor: pointer; padding: 11px 16px; font-size: 14px;
  color: var(--accent); user-select: none; display: flex; align-items: center; gap: 6px; }
.addbox > summary::-webkit-details-marker { display: none; }
.addbox > summary::after { content: "▾"; margin-left: auto; font-size: 11px; opacity: .5; transition: transform .15s; }
.addbox[open] > summary { border-bottom: 1px solid var(--line); }
.addbox[open] > summary::after { transform: rotate(180deg); }
.addbox > summary:hover { background: var(--gray-50); border-radius: var(--r-lg); }
.addbox > form { padding: 0 16px 14px; }

/* Bảng */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--gray-200); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { background: var(--gray-50); font-weight: 600; color: var(--gray-600); font-size: var(--fs-sm); text-transform: none; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px;
         background: var(--accent-soft); color: var(--accent); }
.badge.warn { background: #fdf3dd; color: var(--warn); }
.badge.danger { background: #fbe4e2; color: var(--danger); }

/* Form */
form.panel, .panel { background: var(--panel); border: 1px solid var(--gray-200);
                     border-radius: var(--r-lg); box-shadow: var(--shadow-1);
                     padding: 16px; margin-bottom: 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; }
label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 600; }
input, select, textarea { padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px;
                          font: inherit; background: #fff; }
button { padding: 8px 16px; border: none; border-radius: 6px; background: var(--accent);
         color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { filter: brightness(1.08); }
button.ghost { background: transparent; border: 1px solid currentColor; color: inherit; }
button.small { padding: 3px 10px; font-size: 13px; }
.formbar { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filterbar { display: flex; gap: 10px; align-items: end; margin-bottom: 12px; flex-wrap: wrap; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs button { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Bảng phễu lead kéo-thả */
.lead-board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; }
.lead-col { flex: 0 0 210px; background: #eef1f4; border: 1px solid var(--line);
            border-radius: 10px; padding: 8px; min-height: 120px; }
.lead-col.drop { background: var(--accent-soft); border-color: var(--accent); }
.lead-col-head { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.lead-card { background: #fff; border: 1px solid var(--line); border-radius: 8px;
             padding: 8px; margin-bottom: 8px; cursor: grab; }
.lead-card:hover { border-color: var(--accent); }
.lead-name { font-weight: 600; font-size: 14px; }

/* ---------- Đa thiết bị: desktop giữ nguyên · tablet/mobile = drawer trượt + topbar ☰ ---------- */
/* ===== TOPBAR VIP Pro (mọi thiết bị) — [brand | search ⌘K | ws + chuông + avatar] ===== */
.tb { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); background: var(--tb-bg);
  border-bottom: 1px solid var(--tb-line); display: flex; align-items: center;
  gap: var(--sp-4); padding: 0 var(--sp-5); z-index: 930; }
.tb-brand { font-weight: 800; font-size: 17px; letter-spacing: .4px; color: var(--tb-text);
  text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: 9px; }
.tb-logo { height: 26px; width: auto; display: block; }   /* logo vàng gold nền trong suốt */
.tb-brand span { color: var(--tb-accent); }
/* [12/07] ☰ hiện CẢ desktop (kiểu Gmail): desktop = gập/mở sidebar, mobile = drawer */
.tb-menu { display: block; background: none; border: none; color: var(--tb-text); font-size: 20px;
  cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm); }
.tb-menu:hover { background: var(--tb-hover); }
/* Gập sidebar trên desktop: nội dung dãn full; drawer mobile không bị ảnh hưởng (media dưới thắng) */
@media (min-width: 921px) {
  body.sb-thu .sidebar { display: none; }
}
.tb-search { flex: 0 1 520px; margin: 0 auto; height: 36px; text-align: left;
  background: var(--tb-chip); border: 1px solid var(--tb-line); border-radius: var(--r-full);
  color: var(--tb-mut); padding: 0 14px; font-size: 13px; cursor: pointer; }
.tb-search:hover { border-color: var(--tb-mut); box-shadow: var(--shadow-1); }
.tb-search kbd { float: right; background: var(--tb-chip); border: 1px solid var(--tb-line);
  border-radius: 5px; padding: 1px 6px; font-size: 11px; color: var(--tb-mut); }
.tb-right { display: flex; align-items: center; gap: var(--sp-3); }
.tb-bell { position: relative; font-size: 18px; text-decoration: none; padding: 6px 8px;
  border-radius: var(--r-sm); }
.tb-bell:hover { background: var(--tb-hover); }
/* badge kiểu FB: nhô góc trên-phải, viền ring theo nền topbar nên không "đè" chuông */
.tb-bell .navbadge { position: absolute; top: -3px; right: -4px; box-shadow: 0 0 0 2px var(--tb-bg); }
.tb-user { display: flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--tb-text); padding: 4px 8px 4px 4px; border-radius: var(--r-full); }
.tb-user:hover { background: var(--gray-100); }
.tb-un { display: flex; flex-direction: column; line-height: 1.15; }
.tb-un b { font-size: 13px; } .tb-un small { font-size: 11px; color: var(--gray-500); }
/* Panel xổ nhanh dưới chuông 🔔 / chip người dùng 👤 (12/07) */
.tb-pop-wrap { position: relative; display: flex; align-items: center; }
.tb-pop { position: absolute; right: 0; top: calc(100% + 10px); width: min(360px, calc(100vw - 20px));
  max-height: 72vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: 6px; z-index: 950; }
.tb-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tb-pop .prow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
  border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-size: 13px;
  background: none; border: none; font-family: inherit; cursor: pointer; text-align: left; }
.tb-pop .prow:hover { background: var(--accent-soft); }
.tb-pop .ptx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-pop .pfoot { border-top: 1px solid var(--line); margin-top: 4px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  color: var(--accent); font-weight: 600; }
/* Thẻ thông báo kiểu Facebook (12/07): bong bóng icon màu độ khẩn + 2 dòng không cắt cụt + chấm mới */
.tb-pop .nsec { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.tb-pop .nrow { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px;
  border-radius: var(--r-md); color: var(--text); text-decoration: none; }
.tb-pop .nrow:hover { background: var(--gray-50); }
.tb-pop .nrow.nmoi { background: var(--accent-soft); }
.tb-pop .nrow.nmoi:hover { background: var(--gray-100); }
.tb-pop .nic { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex;
  align-items: center; justify-content: center; font-size: 17px; background: var(--gray-100); }
.tb-pop .nic-do { background: var(--danger-soft); }
.tb-pop .nic-vang { background: var(--warn-soft); }
.tb-pop .ntx { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; }
.tb-pop .nt-ti { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-weight: 600; }
.tb-pop .nt-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-pop .ndot { width: 9px; height: 9px; border-radius: 50%; background: var(--info); flex: none; margin-top: 8px; }

/* ===== Command palette Ctrl/⌘+K ===== */
#cp-overlay { position: fixed; inset: 0; background: rgba(16,24,40,.4); z-index: 990;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
#cp-box { width: min(640px, 92vw); background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); overflow: hidden; }
#cp-input { width: 100%; border: none; outline: none; padding: 15px 18px; font-size: 15px;
  border-bottom: 1px solid var(--gray-200); }
#cp-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.cp-it { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm);
  cursor: pointer; font-size: 13.5px; color: var(--gray-800); }
.cp-it small { margin-left: auto; color: var(--gray-400); font-size: 11px; }
.cp-it:hover, .cp-it.sel { background: var(--brand-50); color: var(--brand-700); }
.cp-sec { padding: 8px 12px 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gray-400); }

@media (max-width: 920px) {
  .tb-menu { display: block; }
  .tb-search { flex: 1; }
  .tb-search kbd, .tb-un { display: none; }
  .tb-brand { display: none; }

  /* sidebar → drawer trượt từ trái */
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; z-index: 950;
    width: min(300px, 84vw); transform: translateX(-105%); transition: transform .2s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.3); overflow-y: auto; }
  .sidebar.open { transform: translateX(0); }
  #nav-backdrop { position: fixed; inset: 0; background: rgba(10,25,20,.45); z-index: 940; }
  #nav-backdrop.hidden { display: none; }

  main { padding: 12px 12px 70px; max-width: 100%; }   /* .layout đã chừa topbar; chừa FAB dưới */
  h2 { font-size: 19px; }
  input, select, textarea { font-size: 16px; }          /* chống iOS tự zoom khi focus */
  .cards { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  #companion-fab { right: 14px; bottom: 14px; }
  /* .login-box mobile do khối "Đăng nhập VIP Pro" @900px/@380px quản (tránh 2 rule width đá nhau) */
}
/* Lưới 6 thẻ KPI (Sảnh/Marketing/Pháp lý): 6 → 3 → 2 cột theo bề rộng */
.cards.six { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .cards.six { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .cards.six { grid-template-columns: repeat(2, 1fr); } }
/* Sảnh 2 cột (việc gấp / duyệt+trợ lý) → 1 cột khi hẹp */
.dash-2col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 980px) { .dash-2col { grid-template-columns: 1fr; } }
/* min-width:0 cho MỌI ô lưới: ô chứa bảng rộng phải để bảng cuộn trong .table-wrap,
   không được đẩy cả lưới tràn ngang (grid item mặc định min-width:auto) */
.dash-2col > *, .wgrid > *, .cards > *, .grid > * { min-width: 0; }

/* ===================== KHUNG DATAVIEW (docs/CHUAN-KHUNG-DATAVIEW.md) ===================== */
/* Bố cục cố định — CHỈ vùng bảng cuộn (mục 1) */
.dv { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - 48px); }
.dv-hd { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 10px; }
.dv-hd .ttl { font-size: 19px; font-weight: 800; }
.dv-hd .ttl small { font-size: 13px; color: var(--muted); font-weight: 500; }
.dv-hd .sp { flex: 1; }
.dv-views { display: flex; gap: 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dv-v { padding: 8px 12px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent;
        margin-bottom: -1px; cursor: pointer; background: none; font-weight: 500; }
.dv-v.on { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); }
.dv-v[disabled] { opacity: .5; cursor: not-allowed; }
.dv-status { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 9px 0; }
.dv-chip { border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 4px 11px;
           font-size: 12.5px; cursor: pointer; color: var(--text); }
.dv-chip.on { background: var(--gray-900); color: #fff; border-color: var(--gray-900); }
.dv-bulk { display: flex; gap: 8px; align-items: center; background: var(--accent-soft);
           border: 1px solid var(--accent); border-radius: 8px; padding: 7px 12px; margin-bottom: 8px; }
.dv-bulk b { color: var(--accent); }
.dv-body { flex: 1; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.dv-body table { border-collapse: separate; border-spacing: 0; }
.dv-body th { position: sticky; top: 0; z-index: 2; background: #f2f5f4; }
.dv-body th.frz, .dv-body td.frz { position: sticky; background: #fff; z-index: 1; }
.dv-body th.frz { z-index: 3; background: #f2f5f4; }
.dv-body td.frz { box-shadow: 2px 0 0 var(--line); }
.dv-body th.frz.last, .dv-body td.frz.last { box-shadow: 2px 0 0 var(--line); }
.dv-body tr.sel td { background: var(--accent-soft); }
.dv-body tr:hover td { background: #f7faf9; }
.dv-th { display: inline-flex; align-items: center; gap: 5px; }
.dv-fx { color: #9aa4ad; cursor: pointer; font-size: 12px; user-select: none; }
.dv-fx.act { color: var(--accent); }
.dv-foot { display: flex; gap: 10px; align-items: center; padding: 10px 4px 0; color: var(--muted); font-size: 13px; }
.dv-foot .pg { margin-left: auto; display: flex; gap: 4px; }
.dv-foot .pg button { border: 1px solid var(--line); background: #fff; color: var(--text);
                      border-radius: 7px; padding: 3px 9px; font-weight: 500; }
.dv-foot .pg button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.dv-foot .pg button:disabled { opacity: .4; cursor: default; }

/* Đợt 2 — các chế độ xem: Kanban · Thư viện · Lịch */
.dv-kanban { display: flex; gap: 12px; padding: 12px; align-items: flex-start; overflow-x: auto; }
.dv-kcol { flex: 0 0 260px; background: #f4f7f6; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.dv-khd { font-weight: 700; padding: 4px 6px 8px; display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.dv-klist { display: flex; flex-direction: column; gap: 8px; min-height: 20px; }
.dv-kcard { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px; cursor: pointer;
            box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.dv-kcard:hover { border-color: var(--accent); }
.dv-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 12px; }
.dv-gcard { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; cursor: pointer; }
.dv-gcard:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.dv-ctitle { font-size: 15px; margin-bottom: 4px; }
.dv-cal { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.dv-cday { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #fff; }
.dv-cdate { font-weight: 700; margin-bottom: 6px; }
.dv-cev { padding: 6px 8px; border-left: 3px solid var(--accent); background: #f7faf9; border-radius: 4px;
          margin-bottom: 4px; cursor: pointer; }
.dv-cev:hover { background: var(--accent-soft); }

/* ⑦ Gantt công việc */
.gantt { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 8px; overflow-x: auto; }
.gantt-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.gantt-label { flex: 0 0 240px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-track { position: relative; flex: 1; height: 22px; background: #f2f5f4; border-radius: 5px; min-width: 400px; }
.gantt-bar { position: absolute; top: 2px; height: 18px; border-radius: 4px; color: #fff; font-size: 11px;
             line-height: 18px; padding: 0 6px; white-space: nowrap; overflow: hidden; box-sizing: border-box; }

/* Sơ đồ hệ thống */
.sm-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.sm-group { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 12px; }
.sm-ghead { font-weight: 700; margin-bottom: 10px; }
.sm-mods { display: flex; flex-direction: column; gap: 6px; }
.sm-mod { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-decoration: none;
          color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: #fafbfb; }
.sm-mod:hover { border-color: var(--accent); }
.sm-mod.on { background: var(--accent-soft); border-color: #bfe3d5; }
.sm-name { font-size: 13px; }
.sm-n { font-weight: 700; color: var(--accent); background: #fff; border-radius: 12px; padding: 1px 9px; font-size: 12px; }
.sm-rt { font-size: 11px; color: #9aa4ad; }
.sm-empty { color: #c8ced3; }

/* Thư viện ảnh / kho chứng từ */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gthumb { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.gthumb.prim { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.gthumb img { width: 100%; height: 120px; object-fit: cover; display: block; background: #f2f5f4; }
.gthumb .fdoc { height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center;
                gap: 6px; text-decoration: none; color: var(--text); font-size: 26px; }
.gthumb .fdoc div { font-size: 11px; padding: 0 6px; text-align: center; word-break: break-word; }
.gthumb .gact { display: flex; align-items: center; gap: 6px; justify-content: space-between; padding: 5px 7px; flex-wrap: wrap; }
.dv-empty { text-align: center; color: var(--muted); padding: 40px 10px; }
.dv-sk { height: 14px; background: linear-gradient(90deg,#eef1f3,#f7f9fa,#eef1f3);
         background-size: 200% 100%; border-radius: 5px; animation: sk 1.2s infinite; }
@keyframes sk { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Cửa sổ nổi — nền mờ (mục 2) */
.ov { position: fixed; inset: 0; background: rgba(15,25,20,.45); backdrop-filter: blur(3px);
      display: flex; align-items: center; justify-content: center; z-index: 100; }
.ov.right { justify-content: flex-end; }
.modal { background: #fff; border-radius: 14px; width: 560px; max-width: 94vw; max-height: 88vh;
         overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.drawer { background: #fff; width: 560px; max-width: 96vw; height: 100vh; overflow: auto;
          box-shadow: -12px 0 40px rgba(0,0,0,.25); animation: slidein .18s ease; }
@keyframes slidein { from { transform: translateX(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.mhd { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line);
       position: sticky; top: 0; background: #fff; z-index: 1; }
.mhd h3 { margin: 0; font-size: 16px; } .mhd .sp { flex: 1; }
.mx { background: none; color: var(--muted); border: none; font-size: 20px; cursor: pointer; padding: 0 4px; }
.mbody { padding: 16px; }

/* Popover lọc theo cột */
.pop { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 12px;
       box-shadow: 0 14px 34px rgba(0,0,0,.18); padding: 12px; width: 240px; z-index: 120; }
.pop h5 { margin: 0 0 8px; font-size: 12px; color: var(--accent); }
.pop .r { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; font-weight: 400; }
.pop .rg { display: flex; gap: 8px; margin: 8px 0; }
.pop .rg input { width: 100%; }
.pop .act { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

/* Toast */
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: var(--gray-900); color: #fff; padding: 10px 14px; border-radius: 9px; font-size: 14px;
         box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: slidein .18s ease; max-width: 340px; }
.toast.err { background: var(--danger); } .toast.ok { background: var(--accent); }

/* menu nhỏ (xuất, ...) */
.menu { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 10px;
        box-shadow: 0 12px 30px rgba(0,0,0,.16); padding: 5px; z-index: 120; min-width: 200px; }
.menu button { display: flex; gap: 8px; width: 100%; text-align: left; background: none; color: var(--text);
               font-weight: 500; padding: 8px 10px; border-radius: 7px; }
.menu button:hover { background: #f2f5f4; }
.btnbar { display: inline-flex; gap: 6px; }
.tg { width: 34px; height: 19px; background: var(--accent); border-radius: 20px; position: relative;
      display: inline-block; cursor: pointer; }
.tg::after { content: ""; position: absolute; right: 2px; top: 2px; width: 15px; height: 15px;
             background: #fff; border-radius: 50%; }
.tg.off { background: #cbd5e1; } .tg.off::after { left: 2px; right: auto; }

@media (max-width: 760px) {
  .dv { height: auto; }
  .dv-body { overflow-x: auto; }
  .modal, .drawer { width: 100%; }
}

/* ===================== DASHBOARD (widget) ===================== */
.dash-hd { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; border-top: 3px solid var(--accent); }
.kpi .l { color: var(--muted); font-size: 12px; }
.kpi .v { font-size: 20px; font-weight: 800; margin-top: 3px; }
.kpi.b { border-top-color: #2563eb; } .kpi.c { border-top-color: var(--warn); }
.kpi.d { border-top-color: #7c3aed; } .kpi.e { border-top-color: var(--danger); }
.wgrid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 12px; }
.wgrid.two { grid-template-columns: 1fr 1fr; }
.wg { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 14px; }
.wg h4 { margin: 0 0 10px; font-size: 14px; }
.bars { display: flex; align-items: flex-end; gap: 12px; height: 140px; }
.bcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.bcol .bar { width: 66%; background: linear-gradient(180deg, var(--brand-500), var(--brand-300)); border-radius: 6px 6px 0 0; min-height: 3px; }
.bcol small { color: var(--muted); font-size: 11px; text-align: center; }
.fn { display: flex; flex-direction: column; gap: 5px; }
.fr { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.fr .n { width: 130px; color: var(--text); } .fr .c { width: 40px; text-align: right; color: var(--muted); }
.fr .fb { height: 18px; background: var(--grad-bar); border-radius: 5px; min-width: 2px; }
.wli { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #f0f2f4; font-size: 13px; }
.wli:last-child { border: 0; }
@media (max-width: 760px) { .wgrid, .wgrid.two { grid-template-columns: 1fr; } }

/* P1: lưới chọn quyền cho vai trò tùy biến */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 12px; }
.perm-chk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text);
  padding: 3px 0; font-family: ui-monospace, Menlo, Consolas, monospace; }
.perm-chk input { width: auto; margin: 0; }
button.small, .ghost.small { padding: 3px 9px; font-size: 12px; }

/* P2: thanh lượng dùng + thẻ gói cước */
.usebar { height: 8px; background: #eef1f0; border-radius: 5px; overflow: hidden; margin: 6px 0 2px; }
.usefill { height: 100%; background: var(--grad-bar); border-radius: 5px; }
.usefill.over { background: linear-gradient(90deg, #e0913a, var(--danger)); }
.plan-feat { margin: 8px 0 0; padding-left: 16px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.card.plan-cur { outline: 2px solid var(--accent); }

/* cấu hình versioned */
tr.cfg-cur { background: #f2fbf7; }

/* Khu tài khoản "pro": avatar + trang Hồ sơ & bảo mật */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--grad-brand); color: #fff;
  font-weight: 800; font-size: 13px; flex: 0 0 auto; }
.avatar-big { width: 56px; height: 56px; font-size: 20px; }
.user-chip { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit;
  padding: 6px 8px; border-radius: 8px; margin-bottom: 6px; }
.user-chip:hover { background: var(--sb-hover); }
.user-meta { display: flex; flex-direction: column; min-width: 0; }
.user-meta #user-name { font-weight: 700; font-size: 13px; color: #fff; }
.user-meta #user-role { font-size: 11px; }
.acc-head { display: flex; align-items: center; gap: 14px; }
.acc-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; }
.acc-grid > * { min-width: 0; }
@media (max-width: 980px) { .acc-grid { grid-template-columns: 1fr; } }
.acc-grid label { display: block; font-weight: 600; margin-top: 8px; }
.acc-grid label input { width: 100%; margin-top: 3px; }

/* Hồ sơ "VIP pro" (trang /account): hồ sơ công việc + chip thành tích */
.pf-rows { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px;
  font-size: 14px; margin-top: 6px; align-items: baseline; }
.pf-rows .pf-l { color: var(--muted); font-size: 13px; white-space: nowrap; }
.pf-rows .pf-v { min-width: 0; overflow-wrap: anywhere; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.pf-chip { background: var(--accent-soft); border: 1px solid #cfe6dd; border-radius: 8px;
  padding: 7px 14px; min-width: 92px; display: flex; flex-direction: column; align-items: center; }
.pf-chip b { font-size: 18px; line-height: 1.2; color: var(--accent); }
.pf-chip span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.pf-chip.pf-chip-danger { background: #fbe4e2; border-color: #eec4c0; }
.pf-chip.pf-chip-danger b { color: var(--danger); }

/* ===== [Cockpit Sale] Bàn làm việc theo phễu chuyển đổi ===== */
.cp-hero{background: var(--grad-brand);color:#eafff7;border-radius:16px;padding:16px 20px;margin:8px 0 16px;display:flex;align-items:center;gap:16px;box-shadow:0 6px 20px rgba(31,111,92,.2)}
.cp-hero .ic{font-size:28px}.cp-hero .big{font-size:18px;font-weight:800;margin-bottom:2px}
.cp-hero .sub{font-size:13px;color:#cdeee2}.cp-hero .cta{margin-left:auto;display:flex;gap:8px;flex-shrink:0}
.cp-hero .cta a{background:#fff;color:#1f6f5c;border-radius:10px;padding:9px 15px;font-weight:800;font-size:13.5px;text-decoration:none}
.cp-five{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.cp-cols{display:grid;grid-template-columns:1.55fr 1fr;gap:16px}
@media(max-width:940px){.cp-cols{grid-template-columns:1fr}}
.cp-funnel{display:flex;flex-direction:column;gap:5px;align-items:center}
.cp-fbar{display:flex;align-items:center;gap:12px;border-radius:8px;padding:9px 14px;color:var(--brand-800);background:#e9f3ef;border:1px solid #d3e7df;text-decoration:none;transition:transform .1s}
.cp-fbar:hover{transform:translateX(3px);border-color:var(--accent)}
.cp-fbar .stg{font-weight:700;font-size:12px;min-width:120px}.cp-fbar .cnt{font-size:18px;font-weight:800;min-width:30px;text-align:right}
.cp-fbar .ky{font-size:11.5px;color:#4a6b60;min-width:74px}.cp-fbar .heat{margin-left:auto;font-size:10px;letter-spacing:1px}
.cp-fbar.hot{border:2px solid #d9534f;background:#fbeceb}.cp-fbar.win{border:2px solid #1f6f5c;background:#dff2ea}
.cp-conv{font-size:10.5px;color:#93a}
.cp-postdiv{display:flex;align-items:center;gap:8px;margin:9px 0 4px;color:#2a6b7a;font-size:11px;font-weight:700;justify-content:center}
.cp-postdiv::before,.cp-postdiv::after{content:"";height:1px;flex:1;background:#cfe2e6}
.cp-pbar{display:flex;align-items:center;gap:12px;border-radius:8px;padding:8px 14px;color:#124b57;background:#e6f3f6;border:1px solid #cfe6ec}
.cp-pbar .stg{font-weight:700;font-size:12px;min-width:120px}.cp-pbar .cnt{font-size:17px;font-weight:800;min-width:30px;text-align:right}
.cp-pbar .note{margin-left:auto;font-size:11px;color:#3a7787}
.cp-loop{margin-top:8px;text-align:center;background:#fff7ec;border:1px dashed #e6c98a;border-radius:10px;padding:8px 12px;font-size:12px;color:#8a6a2a;font-weight:600}
.cp-ai{background: var(--grad-brand);color:#eafff7;border-radius:14px;padding:15px 17px;margin-bottom:16px}
.cp-ai h3{margin:0 0 10px;color:#fff;font-size:14.5px}
.cp-acard{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.cp-acard .t{font-size:13px;font-weight:700;margin-bottom:2px}.cp-acard .why{font-size:11.5px;color:#bfe3d6;margin-bottom:7px}
.cp-acard a{background:#fff;color:#1f6f5c;border-radius:8px;padding:5px 11px;font-weight:700;font-size:12px;text-decoration:none}
.cp-chip{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:5px 10px;font-size:11.5px;margin:3px 3px 0 0;cursor:pointer;color:#eafff7}
.cp-goal{height:24px;background:#eef2f0;border-radius:12px;overflow:hidden;position:relative;border:1px solid #e0e8e4}
.cp-goal .fill{height:100%;background:linear-gradient(90deg,#1f6f5c,#3ba883);display:flex;align-items:center;padding-left:11px;color:#fff;font-weight:800;font-size:12px;white-space:nowrap}
.cp-mkt{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:10px}
.cp-mstat{background:#f2f8f5;border:1px solid #dcebe4;border-radius:9px;padding:7px 8px;text-align:center}
.cp-mstat .v{font-size:16px;font-weight:800;color:var(--brand-800)}.cp-mstat .l{font-size:10.5px;color:#6b8a7e}
.cp-mrow{display:flex;align-items:center;gap:8px;font-size:12px;padding:5px 0;border-bottom:1px solid #eef1f0}
.cp-mrow .val{margin-left:auto;font-weight:700;color:var(--brand-800);white-space:nowrap}
.cp-tag{display:inline-block;background:#eef4f1;border:1px solid #d7e6de;border-radius:12px;padding:2px 9px;font-size:11px;font-weight:600;color:#2c6b57;margin:2px 3px 0 0}
.cp-deal{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid #eef1f0;font-size:12.5px}
.cp-deal .nm{font-weight:600}.cp-deal .mini{font-size:11px;color:#889}.cp-deal .val{margin-left:auto;font-weight:700;color:var(--brand-800);white-space:nowrap}
.cp-slot{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid #eef1f0;font-size:12.5px}
.cp-slot .hh{font-weight:800;color:#1f6f5c;min-width:44px}