/* ZAKAS — nền + thành phần dùng chung (đặc tả 6.6). Cần zakas-tokens.css nạp trước. Mobile-first 390px. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-2)/1.5 var(--font);
  -webkit-text-size-adjust: 100%; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: var(--fs-3); }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.so, .num { font-variant-numeric: tabular-nums; }
.num { text-align: right; white-space: nowrap; }
.phu { color: var(--muted); font-size: var(--fs-1); }
.an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* nút + ô nhập (vùng chạm ≥ 44px) */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap);
  padding: 0 var(--sp-4); border-radius: var(--r-1); border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font-weight: 600; text-decoration: none; cursor: pointer; }
.nut.chinh { background: var(--green); border-color: var(--green); color: #f4f1e6; }
.nut.phu-nut { background: none; }
.nut:disabled { opacity: .45; cursor: not-allowed; }
.o-nhap { width: 100%; min-height: var(--tap); padding: 0 var(--sp-3); border-radius: var(--r-1);
  border: 1px solid var(--line); background: var(--card); }
label { display: grid; gap: var(--sp-1); font-size: var(--fs-1); color: var(--muted); }

/* thẻ số: nhãn · giá trị · so sánh · nhãn độ mới · nút nguồn */
.the { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--sp-4); min-width: 0; }
.the-so { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4);
  display: grid; gap: var(--sp-1); min-width: 0; }
.the-so .nhan { font-size: var(--fs-1); color: var(--muted); }
.the-so .gia-tri { font-size: var(--fs-4); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; }
.the-so .so-sanh { font-size: var(--fs-1); color: var(--muted); }
.the-so .so-sanh .tang { color: var(--ok-ink); }
.the-so .so-sanh .giam { color: var(--err); }
.the-so button.gia-tri { all: unset; font-size: var(--fs-4); font-weight: 700; cursor: pointer; text-decoration: underline dotted; }
.chua-du { color: var(--muted); font-weight: 600; font-size: var(--fs-3); }
.chua-du small { display: block; font-weight: 400; font-size: var(--fs-1); }

/* nhãn độ mới dữ liệu: xanh / vàng (trễ) / đỏ (lỗi) — luôn có chữ, không chỉ màu */
.nhan-moi { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 1px 8px; border-radius: 99px;
  font-size: 12px; font-weight: 600; background: var(--ok-bg); color: var(--ok-ink); }
.nhan-moi.tre { background: var(--warn-bg); color: var(--warn-ink); }
.nhan-moi.loi { background: var(--err-bg); color: var(--err); }

/* dải cảnh báo đầu màn */
.dai-canh-bao { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line);
  border-radius: var(--r-1); padding: var(--sp-3) var(--sp-4); font-weight: 600; }
.dai-canh-bao.do { background: var(--err-bg); color: var(--err); border-color: var(--err); }
.dai-canh-bao.xanh { background: var(--ok-bg); color: var(--ok-ink); border-color: transparent; }

/* bảng: cuộn ngang trên điện thoại */
.bang { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-1);
  background: var(--card); }
.bang table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: var(--fs-1); }
.bang th, .bang td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; }
.bang th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--card); }
.bang td.num, .bang th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ngăn kéo nguồn (drawer) */
.ngan-keo { position: fixed; inset: auto 0 0 0; max-height: 85vh; overflow: auto; background: var(--card);
  border-top-left-radius: var(--r-2); border-top-right-radius: var(--r-2); box-shadow: 0 -8px 30px #0003;
  padding: var(--sp-4); z-index: 30; }
@media (min-width: 1024px) {
  .ngan-keo { inset: 0 0 0 auto; width: 480px; max-height: none; border-radius: 0; }
}

/* chip kỳ */
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--sp-3); border-radius: 99px;
  border: 1px solid var(--line); background: var(--card); font-size: var(--fs-1); font-weight: 600; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* lưới ô theo quyền */
.luoi-o { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 640px) { .luoi-o { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .luoi-o { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.luoi-o .o { position: relative; display: grid; align-content: start; gap: var(--sp-1); min-height: 96px;
  padding: var(--sp-3); border-radius: var(--r-2); border: 1px solid var(--line); background: var(--card);
  color: var(--ink); text-decoration: none; }
.luoi-o a.o:hover { border-color: var(--accent); }
.luoi-o .o .ten { font-weight: 700; }
.luoi-o .o .mo-ta { font-size: var(--fs-1); color: var(--muted); }
.luoi-o .o.sap-mo { opacity: .7; border-style: dashed; }
.luoi-o .o.khong-quyen { opacity: .5; background: transparent; }
.luoi-o .o .badge { position: absolute; top: var(--sp-2); right: var(--sp-2); min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 99px; background: var(--gold); color: #3b2d10; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.luoi-o .o .trang-thai { font-size: 12px; font-weight: 600; color: var(--muted); }

/* biểu đồ SVG (static/shared/bieu_do): chữ dùng màu chữ, không dùng màu dãy */
.bd { width: 100%; height: auto; display: block; }
.bd-txt { font-size: 10px; fill: var(--muted); font-family: var(--font); }
.bd-ten { fill: var(--ink); font-size: 11px; }
.bd-gt { fill: var(--ink); font-weight: 700; }
.bd-luoi { stroke: var(--line); stroke-width: 1; }
.bd-truc { stroke: var(--muted); stroke-width: 1; }
.bd-cot { fill: var(--accent); }
.bd-hit { fill: transparent; }
.bd-truoc { fill: none; stroke: var(--truoc); stroke-width: 1.5; stroke-dasharray: 4 3; }
.bd-diem { fill: var(--truoc); }
.bd-duong { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bd-khe { stroke: var(--card); stroke-width: 2; }
.bd-m1 { fill: var(--bd-1); stroke: var(--bd-1); } .bd-m2 { fill: var(--bd-2); stroke: var(--bd-2); }
.bd-m3 { fill: var(--bd-3); stroke: var(--bd-3); } .bd-m4 { fill: var(--bd-4); stroke: var(--bd-4); }
.bd-m5 { fill: var(--bd-5); stroke: var(--bd-5); } .bd-mk { fill: var(--bd-khac); stroke: var(--bd-khac); }
.bd-duong.bd-m1, .bd-duong.bd-m2, .bd-duong.bd-m3, .bd-duong.bd-m4, .bd-duong.bd-m5, .bd-duong.bd-mk { fill: none; }
.bd-n0 { fill: var(--card); stroke: var(--line); } .bd-n1 { fill: var(--bd-n1); } .bd-n2 { fill: var(--bd-n2); }
.bd-n3 { fill: var(--bd-n3); } .bd-n4 { fill: var(--bd-n4); } .bd-n5 { fill: var(--bd-n5); }
.bd-giam { fill: var(--bd-xau); } .bd-moc { fill: var(--bd-tot); }
.bd-chua-du { fill: url(#bd-soc); stroke: var(--muted); stroke-dasharray: 3 2; }
.bd-soc-net { stroke: var(--muted); stroke-width: 1; }
.bd-vung { fill: var(--accent); fill-opacity: .18; stroke: var(--accent); stroke-width: 2; }
.bd-chon .bd-cot, .bd-chon rect:not(.bd-hit), .bd-chon path, .bd-chon circle { stroke: var(--ink); stroke-width: 2; }
g[role=button] { cursor: pointer; }
g[role=button]:focus-visible { outline: none; }
g[role=button]:focus-visible rect:not(.bd-hit), g[role=button]:focus-visible path { stroke: var(--gold); stroke-width: 2; }
.bd-doc { min-height: 1.5em; font-size: var(--fs-1); color: var(--ink); font-variant-numeric: tabular-nums; }
@media (forced-colors: active) { .bd-m1, .bd-m2, .bd-m3, .bd-m4, .bd-m5, .bd-mk, .bd-cot { fill: CanvasText; } }
.bd-o-chu { fill: #fff; font-weight: 600; }