/* ═══════════════════════════════════════════════════════════════════════════
   ĐỒNG PHỤC HẢI ANH — Design System v1  ·  chốt 15/08/2026
   Dùng chung cho MỌI web nội bộ. Chép file này vào project rồi <link> vào,
   hoặc dán thẳng vào <style> nếu web là 1 file đơn (bản offline, base64…).

   Mặc định = NỀN TỐI (dashboard vận hành, mở hằng ngày).
   Báo cáo gửi cấp trên / khách in ra giấy  ->  <html data-theme="light">

   Nguyên tắc + lý do đằng sau: memory/company/brand-visual.md — ĐỌC TRƯỚC KHI SỬA.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Màu thương hiệu — đo từ file logo gốc, KHÔNG đoán từ ảnh ─────────── */
:root{
  --ha-indigo:#303388;        /* indigo gốc — dùng trên NỀN SÁNG (10,74:1) */
  --ha-cyan:#19a9e1;          /* cyan gốc — dùng trên NỀN TỐI (7,42:1) */
  --ha-indigo-lift:#7b71e8;   /* indigo nâng sáng — BẮT BUỘC khi vẽ trên nền tối,
                                 vì #303388 trên nền tối chỉ đạt 1,86:1 */
}

/* ── 2. Bảng màu — nền tối (mặc định) ────────────────────────────────────── */
:root{
  --bg:#0d0d17;               /* đen ngả indigo, KHÔNG phải xám trung tính */
  --bg-side:#08080f;          /* sidebar TỐI HƠN khung chính (nền sáng thì ngược lại) */
  --surface:#12121f;
  --surface-2:#171725;
  --raise:#1e1e2e;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.15);

  --ink:#e9eaf6;              /* không trắng tinh — ngả xanh cho dịu mắt */
  --ink-2:#9fa1bd;
  --ink-3:#6c6e8a;

  --accent:var(--ha-cyan);    /* màu nhấn: cyan trên nền tối */
  --series-1:var(--ha-indigo-lift);
  --series-1-deep:var(--ha-indigo);
  --series-2:var(--ha-cyan);

  --good:#2ecc8f;  --warn:#f5b53d;  --bad:#ff6b6b;
  --good-bg:rgba(46,204,143,.12);
  --warn-bg:rgba(245,181,61,.12);
  --bad-bg:rgba(255,107,107,.12);
  --good-bd:rgba(46,204,143,.26);
  --warn-bd:rgba(245,181,61,.26);
  --bad-bd:rgba(255,107,107,.26);

  --grid:rgba(255,255,255,.08);   /* lưới biểu đồ */
  --axis:rgba(255,255,255,.16);
}

/* ── 3. Bảng màu — nền sáng (báo cáo, bản in) ────────────────────────────── */
:root[data-theme="light"]{
  --bg:#ffffff;
  --bg-side:#fbfbfa;          /* nền sáng: sidebar SÁNG HƠN nội dung */
  --surface:#ffffff;
  --surface-2:#f7f7f5;
  --raise:#ffffff;
  --line:#e7e6e3;
  --line-2:#d9d7d3;

  --ink:#1d1c1a;  --ink-2:#6d6b66;  --ink-3:#98958f;

  --accent:var(--ha-indigo);  /* nền sáng đổi màu nhấn sang indigo — cyan chỉ 2,69:1 */
  --series-1:var(--ha-indigo);
  --series-1-deep:var(--ha-indigo);
  --series-2:var(--ha-cyan);

  /* Màu trạng thái PHẢI đậm hơn hẳn bản tối, không dùng chung được */
  --good:#128a5c;  --warn:#a5691a;  --bad:#b3352f;
  --good-bg:#e9f5ef;  --warn-bg:#fbf1e2;  --bad-bg:#fbecea;
  --good-bd:#c9e6d9;  --warn-bd:#f0dcb8;  --bad-bd:#f0d5d2;

  --grid:#efeeeb;
  --axis:#e7e6e3;
}

/* ── 4. Chữ · khoảng cách · bo góc ───────────────────────────────────────── */
:root{
  /* Be Vietnam Pro — thiết kế riêng cho tiếng Việt, dấu sắc nét.
     NHÚNG THẲNG, không gọi Google Fonts: chép nội dung font-be-vietnam-pro.css
     vào <style> của trang (các build script đã tự làm qua chỗ thay __FONT__).
     Vì sao không dùng <link> Google: mất mạng / mạng công ty chặn -> rơi về font
     hệ thống, và bản offline luôn bị rơi. Nặng thêm ~99 KB mỗi trang.
     Dựng lại font: python3 memory/company/assets/lam-font.py */
  --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;

  --fs-micro:9.5px;   /* nhãn ALL-CAPS trong bảng, thẻ KPI */
  --fs-tiny:10.5px;
  --fs-sm:11.5px;     /* ghi chú phụ */
  --fs:13px;          /* cỡ chữ nền */
  --fs-h2:13px;       /* tiêu đề thẻ */
  --fs-h1:15px;
  --fs-kpi:23px;
  --fs-kpi-lead:33px; /* số chủ đạo — chỉ MỘT số mỗi màn được cỡ này */

  --sp-1:4px;  --sp-2:6px;  --sp-3:8px;  --sp-4:10px;
  --sp-5:12px; --sp-6:14px; --sp-7:16px; --sp-8:18px; --sp-9:24px;

  /* BO GÓC VUÔNG — Dũng chốt 15/08. Chỉ chip và chấm trạng thái được bo. */
  --r:0px; --r-sm:2px; --r-chip:3px;
}

/* ── 5. Nền tảng ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--ink);
     font-size:var(--fs);line-height:1.5}
.num{font-variant-numeric:tabular-nums}   /* CHỈ đặt ở cột số cần thẳng hàng */

/* ── 6. Khung: sidebar trái + khung chính ────────────────────────────────── */
.app{display:flex;min-height:100vh}
aside{width:232px;flex:none;background:var(--bg-side);border-right:1px solid var(--line);
      display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:11px;padding:var(--sp-6) var(--sp-7);
       border-bottom:1px solid var(--line)}
/* Logo: tỉ lệ thật 1,683:1 — ĐẶT height, để width:auto. Ép vào khung vuông là méo.
   Nền tối dùng assets/logo-mark-dark.png · nền sáng dùng assets/logo-mark.png
   KHÔNG bọc logo trong ô nền trắng — Dũng đã bác. */
.brand img{height:20px;width:auto;display:block;flex:none}
.brand b{font-size:var(--fs);font-weight:600;letter-spacing:-.01em;display:block;line-height:1.35}
.brand span{display:block;font-size:var(--fs-micro);color:var(--ink-3);font-weight:500;
            letter-spacing:.09em;text-transform:uppercase}

nav{display:flex;flex-direction:column;padding:var(--sp-2) 0}
.nav-h{font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
       color:var(--ink-3);padding:var(--sp-6) var(--sp-7) var(--sp-2)}
nav a{display:flex;align-items:center;gap:var(--sp-4);padding:7px var(--sp-7);color:var(--ink-2);
      text-decoration:none;font-weight:500;font-size:var(--fs);border-left:2px solid transparent}
nav a:hover{background:rgba(127,127,160,.08);color:var(--ink)}
/* Mục đang chọn: vạch màu bên trái — KHÔNG dùng viên thuốc bo tròn khi trang bo vuông */
nav a.on{background:rgba(123,113,232,.13);color:var(--ink);border-left-color:var(--accent)}
nav a .ic{width:15px;text-align:center;font-size:12px;opacity:.7}
nav a.on .ic{opacity:1;color:var(--accent)}
nav a .cnt{margin-left:auto;font-size:var(--fs-tiny);background:var(--bad);color:#fff;
           border-radius:var(--r-chip);padding:0 5px;min-width:17px;text-align:center;font-weight:700}
.side-foot{margin-top:auto;padding:var(--sp-5) var(--sp-7);border-top:1px solid var(--line);
           font-size:11px;color:var(--ink-3)}

main{flex:1;min-width:0;display:flex;flex-direction:column}
header{border-bottom:1px solid var(--line);padding:var(--sp-5) var(--sp-9);display:flex;
       align-items:center;gap:var(--sp-7);flex-wrap:wrap;position:sticky;top:0;z-index:5;
       background:var(--bg);   /* dự phòng cho trình duyệt cũ chưa có color-mix */
       background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px)}
h1{font-size:var(--fs-h1);font-weight:600;letter-spacing:-.01em}
.sub{font-size:var(--fs-sm);color:var(--ink-3);margin-top:2px}
/* max-width + margin:0 auto — PHẢI có cả hai. Chỉ đặt max-width thì trên màn rộng
   nội dung dạt sang trái, chừa một mảng trống kỳ cục bên phải.
   header cũng phải dùng CHUNG bề rộng này, nếu không tiêu đề và bộ lọc lệch nhau. */
.wrap{padding:var(--sp-8) var(--sp-9) 48px;display:flex;flex-direction:column;gap:var(--sp-6);
      max-width:1400px;margin:0 auto;width:100%}

/* ── 7. Bộ chọn kỳ — MỘT hàng, nằm trên tất cả, không đặt riêng trong từng thẻ ── */
.seg{margin-left:auto;display:flex;background:var(--surface);border:1px solid var(--line);
     border-radius:var(--r-sm);overflow:hidden}
.seg button{font:inherit;font-size:12px;font-weight:500;border:0;border-left:1px solid var(--line);
            background:none;color:var(--ink-2);padding:5px 12px;cursor:pointer}
.seg button:first-child{border-left:0}
.seg button.on{background:var(--raise);color:var(--ink)}
:root[data-theme="light"] .seg button.on{box-shadow:0 1px 2px rgba(0,0,0,.07)}

/* ── 8. Thẻ ──────────────────────────────────────────────────────────────── */
/* min-width:0 + overflow:hidden là BẮT BUỘC: thiếu nó, thẻ nằm trong grid sẽ không
   co được và bảng bên trong đẩy tràn ngang cả trang (đã dính lỗi này 15/08). */
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
      min-width:0;overflow:hidden}
.card>h2{font-size:var(--fs-h2);font-weight:600;padding:var(--sp-5) var(--sp-7);display:flex;
         align-items:center;gap:var(--sp-4);border-bottom:1px solid var(--line)}
.card>h2 .hint{margin-left:auto;font-weight:400;font-size:var(--fs-sm);color:var(--ink-3)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}

/* ── 9. Thẻ KPI — 1 hàng, khe 1px lộ nền làm đường chia ──────────────────── */
.kpis{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr 1fr;gap:1px;
      background:var(--line);border:1px solid var(--line)}
.kpi{padding:var(--sp-6) var(--sp-7);background:var(--surface)}
.kpi.lead{background:var(--surface-2)}
.lb{font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-3)}
.kpi .v{font-size:var(--fs-kpi);font-weight:600;letter-spacing:-.02em;margin-top:var(--sp-3);
        line-height:1.15}
.kpi.lead .v{font-size:var(--fs-kpi-lead)}
.kpi .v small{font-size:13px;font-weight:400;color:var(--ink-2);letter-spacing:0}
.kpi .foot{display:flex;align-items:center;gap:7px;margin-top:var(--sp-4);flex-wrap:wrap}
.note{font-size:var(--fs-sm);color:var(--ink-3)}

/* ── 10. Chip — MÀU KHÔNG BAO GIỜ ĐỨNG MỘT MÌNH ──────────────────────────
   Chip trạng thái luôn có chấm màu KÈM CHỮ ("Winner" / "Nên tắt").
   Chip biến động luôn có mũi tên ▲▼ KÈM SỐ. Người mù màu vẫn đọc được.       */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
      padding:2px 7px;border-radius:var(--r-chip);line-height:1.6;border:1px solid transparent}
.chip i{width:5px;height:5px;border-radius:50%;background:currentColor;font-style:normal}
.chip.up{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-bd)}
.chip.down{color:var(--good);background:var(--good-bg);border-color:var(--good-bd)}
.chip.flat{color:var(--ink-2);background:var(--surface-2);border-color:var(--line)}
.chip.st-good{color:var(--good);background:var(--good-bg);border-color:var(--good-bd)}
.chip.st-warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-bd)}
.chip.st-bad{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-bd)}

/* ── 11. Cảnh báo ────────────────────────────────────────────────────────── */
.alert{display:flex;align-items:flex-start;gap:11px;border:1px solid var(--bad-bd);
       border-left:3px solid var(--bad);background:var(--bad-bg);border-radius:var(--r);
       padding:var(--sp-5) var(--sp-6)}
.alert .dot{width:6px;height:6px;border-radius:50%;background:var(--bad);margin-top:6px;flex:none}
.alert p{font-size:12.5px}
.alert b{font-weight:600}
.alert a{margin-left:auto;flex:none;font-size:12px;font-weight:600;color:var(--bad);
         text-decoration:none;border:1px solid var(--bad-bd);padding:5px 12px;border-radius:var(--r-sm)}

/* ── 12. Bảng ────────────────────────────────────────────────────────────── */
.tw{overflow-x:auto}   /* LUÔN bọc <table> trong div này — bảng rộng cuộn trong thẻ,
                          không đẩy tràn ngang cả trang */
table{width:100%;border-collapse:collapse}
th{font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
   color:var(--ink-3);text-align:right;padding:9px var(--sp-7);border-bottom:1px solid var(--line);
   white-space:nowrap;background:rgba(0,0,0,.2)}
:root[data-theme="light"] th{background:var(--surface-2)}
th:first-child{text-align:left}
td{padding:9px var(--sp-7);border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
td:first-child{text-align:left;font-weight:500;width:1%}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(127,127,160,.06)}
/* Thanh tỉ trọng trong ô đầu — thay cho một cột "%" riêng */
.bar{height:4px;background:var(--surface-2);width:66px;display:inline-block;vertical-align:middle;
     margin-left:var(--sp-4);overflow:hidden}
.bar i{display:block;height:100%;
       background:linear-gradient(90deg,var(--series-1-deep),var(--series-1))}
.tag{font-size:var(--fs-tiny);color:var(--ink-3);font-weight:400}
.st{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--ink-2)}
.st i{width:5px;height:5px;border-radius:50%;font-style:normal}
.st.run i{background:var(--good)}
.st.stop i{background:var(--ink-3)}

/* ── 13. Biểu đồ (khung SVG tự vẽ) ───────────────────────────────────────── */
.chart-body{padding:var(--sp-7) var(--sp-7) var(--sp-3)}
.ct{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
    display:flex;gap:var(--sp-4);align-items:baseline;margin-bottom:3px}
.ct em{font-style:normal;font-weight:400;letter-spacing:0;text-transform:none;font-size:11px}
svg{display:block;width:100%}

/* ── 14. Co theo màn hình ────────────────────────────────────────────────── */
@media(max-width:1150px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .two{grid-template-columns:1fr}
}
@media(max-width:820px){ aside{display:none} }

/* ── 15. In ra giấy — luôn ép về nền sáng ────────────────────────────────── */
@media print{
  aside,.seg{display:none}
  body{background:#fff;color:#000}
  .card{break-inside:avoid}
}
