/* CSS duy nhất của portal. Không framework, không font ngoài, không CDN (SPEC-P2-UX).
   Style: Swiss/minimal cho web nội bộ dữ liệu — chữ đen trên nền sáng, màu chỉ dùng
   để phân mức cảnh báo, mọi màu đều kèm CHỮ (không dùng màu làm kênh duy nhất). */
:root {
  --vien: #d3dae4;
  --nhat: #f2f5f9;
  --nen: #ffffff;
  --muc: #16202e;
  --muc-nhat: #475569;          /* 7:1 trên nền trắng */
  --chinh: #1b4fa8;             /* xanh dương chính — link, focus, nhấn */
  --do-nen: #fdecec;
  --do-vien: #b3261e;
  --vang-nen: #fff4d6;
  --vang-vien: #8a6100;         /* đủ 4.5:1 khi dùng làm màu chữ */
  --xanh-nen: #e6f5ec;
  --xanh-vien: #1e7a3c;
  --lam-nen: #e9f0fb;
}
* { box-sizing: border-box; }
body {
  font: 14px/1.5 "Segoe UI", system-ui, Arial, sans-serif;
  margin: 0 auto; padding: 0 16px 56px; max-width: 1600px;
  color: var(--muc); background: var(--nen);
}
h1 { font-size: 21px; margin: 18px 0 4px; }
h2 { font-size: 16px; margin: 26px 0 6px; }
h3 { font-size: 14px; margin: 18px 0 4px; }
a { color: var(--chinh); }
a:hover { text-decoration: none; }
:focus-visible { outline: 3px solid var(--chinh); outline-offset: 2px; }

/* ───────────────────────── khung chung: header · nav · footer ───────────────────────── */
.bo-qua {
  position: absolute; left: -9999px; top: 0; background: var(--nen);
  padding: 8px 12px; border: 2px solid var(--chinh); z-index: 5;
}
.bo-qua:focus { left: 8px; }

.thanh-tren {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  justify-content: space-between; padding: 12px 0 8px;
  border-bottom: 2px solid var(--chinh);
}
.thanh-tren .ten { font-size: 16px; font-weight: 600; color: var(--muc); text-decoration: none; }
.thanh-tren .ai { font-size: 12px; color: var(--muc-nhat); }
.thanh-tren .ai strong { color: var(--muc); }

nav.dieu-huong {
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  padding: 8px 0; border-bottom: 1px solid var(--vien); margin-bottom: 14px;
}
nav.dieu-huong .nhom { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
nav.dieu-huong .nhan {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muc-nhat); margin-right: 4px;
}
nav.dieu-huong a {
  display: inline-block; padding: 7px 9px; border-radius: 4px;
  text-decoration: none; color: var(--chinh); min-height: 34px;
}
nav.dieu-huong a:hover, nav.dieu-huong a:focus-visible { background: var(--lam-nen); }

footer.chan-trang {
  margin-top: 40px; padding-top: 10px; border-top: 1px solid var(--vien);
  font-size: 12px; color: var(--muc-nhat);
}

/* ───────────────────────── cảnh báo 3 mức ───────────────────────── */
.alert {
  border: 1px solid var(--vien); border-left-width: 5px;
  padding: 10px 14px; margin: 10px 0; max-width: 1000px;
}
.alert p { margin: 4px 0 0; }
.alert .viec { font-weight: 600; }
.alert-loi { border-color: var(--do-vien); background: var(--do-nen); }
.alert-canh-bao { border-color: var(--vang-vien); background: var(--vang-nen); }
.alert-thong-tin { border-color: var(--chinh); background: var(--lam-nen); }
.alert-xong { border-color: var(--xanh-vien); background: var(--xanh-nen); }
.tieu-de { font-weight: 600; margin: 0; }
pre.mo-ta { margin: 4px 0 0; white-space: pre-wrap; font: inherit; }

/* ───────────────────────── thẻ số ───────────────────────── */
.hang-the { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.the {
  border: 1px solid var(--vien); border-top: 3px solid var(--vien); border-radius: 4px;
  padding: 8px 14px; background: var(--nhat); min-width: 108px;
}
.the b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.the .nhan { font-size: 12px; color: var(--muc-nhat); }
.the.chan { border-top-color: var(--do-vien); background: var(--do-nen); }
.the.canh-bao { border-top-color: var(--vang-vien); background: var(--vang-nen); }
.the.dat { border-top-color: var(--xanh-vien); background: var(--xanh-nen); }
.the.chinh { border-top-color: var(--chinh); background: var(--lam-nen); }
.chan { color: var(--do-vien); }
.canh-bao { color: var(--vang-vien); }

/* ───────────────────────── badge trạng thái ───────────────────────── */
.bd {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px;
  border: 1px solid var(--vien); background: var(--nhat); white-space: nowrap;
}
.bd-xam { background: var(--nhat); color: var(--muc-nhat); }
.bd-xanh { background: var(--xanh-nen); border-color: var(--xanh-vien); color: #145c2c; }
.bd-do { background: var(--do-nen); border-color: var(--do-vien); color: var(--do-vien); }
.bd-vang { background: var(--vang-nen); border-color: var(--vang-vien); color: #6d4d00; }
.bd-lam { background: var(--lam-nen); border-color: var(--chinh); color: var(--chinh); }
.bd-dam { background: #40506a; border-color: #40506a; color: #fff; }

/* ───────────────────────── form ───────────────────────── */
form.doc-ngang { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
form.doc-doc > div { margin-bottom: 10px; }
label { display: block; font-size: 12px; color: var(--muc-nhat); }
input, select, button, textarea { font: inherit; padding: 6px 8px; min-height: 36px; }
input, select, textarea { border: 1px solid #9aa6b6; border-radius: 3px; background: #fff; }
button {
  cursor: pointer; border: 1px solid var(--chinh); border-radius: 3px;
  background: var(--chinh); color: #fff; padding: 7px 14px;
}
button:hover { background: #16407f; }
button.phu { background: #fff; color: var(--chinh); }
button.dac-quyen { background: #8c1d18; border-color: #8c1d18; }
button.dac-quyen:hover { background: #6f1713; }
.goi-y { font-size: 12px; color: var(--muc-nhat); margin: 2px 0 0; }

/* ───────────────────────── bảng ───────────────────────── */
table { border-collapse: collapse; margin: 8px 0; }
th, td {
  border: 1px solid var(--vien); padding: 4px 7px; text-align: left;
  vertical-align: top; white-space: nowrap;
}
th { background: var(--nhat); font-size: 12px; position: sticky; top: 0; z-index: 1; }
tbody tr:nth-child(even) { background: #fafbfd; }
td.so, th.so { text-align: right; font-variant-numeric: tabular-nums; }
td.ly-do { white-space: normal; min-width: 220px; max-width: 460px; }
.cuon { overflow-x: auto; border: 1px solid var(--vien); max-width: 100%; }
caption { caption-side: top; text-align: left; font-size: 12px; color: var(--muc-nhat);
          padding-bottom: 4px; }

/* Ô lỗi — tô đúng ô như chấm tay (SPEC §5) */
td.o-block { background: var(--do-nen); box-shadow: inset 0 0 0 2px var(--do-vien); }
td.o-warn  { background: var(--vang-nen); box-shadow: inset 0 0 0 2px var(--vang-vien); }
td.o-block, td.o-warn { cursor: help; }
td.yn-y { color: #145c2c; font-weight: 600; text-align: center; }
td.yn-n { background: var(--do-nen); color: var(--do-vien); font-weight: 600;
          text-align: center; }

.chu-giai { font-size: 12px; color: var(--muc-nhat); margin: 6px 0; }
.chu-giai .o { display: inline-block; padding: 0 8px; margin-right: 2px; border-radius: 2px; }
.chu-giai .o-block { background: var(--do-nen); box-shadow: inset 0 0 0 2px var(--do-vien); }
.chu-giai .o-warn { background: var(--vang-nen); box-shadow: inset 0 0 0 2px var(--vang-vien); }

/* ───────────────────────── khối phụ trợ ───────────────────────── */
.buoc-tiep {
  border: 1px solid var(--chinh); border-left-width: 5px; background: var(--lam-nen);
  padding: 10px 14px 10px 28px; margin: 16px 0; max-width: 1000px;
}
.buoc-tiep .tieu-de { margin-left: -14px; }
.buoc-tiep ol, .buoc-tiep ul { margin: 6px 0 0; padding-left: 18px; }
.buoc-tiep li { margin: 3px 0; }
.trong {
  border: 1px dashed var(--vien); background: var(--nhat); padding: 14px;
  margin: 8px 0; max-width: 1000px; color: var(--muc-nhat);
}
.trong strong { color: var(--muc); }
.chu-thich { color: var(--muc-nhat); font-size: 12px; max-width: 1000px; }
td.cot-loi { white-space: normal; min-width: 900px; max-width: 1100px; }
td.cot-loi li em { display: block; color: var(--muc-nhat); }
ul.loi-dong { margin: 0; padding-left: 16px; white-space: normal; font-size: 12px; line-height: 1.35; }
ul.loi-dong li { margin: 2px 0; }
ul.gon { margin: 4px 0; padding-left: 18px; }
dl.tham-so { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px;
             margin: 6px 0; font-size: 13px; }
dl.tham-so dt { color: var(--muc-nhat); }
dl.tham-so dd { margin: 0; }
pre.json {
  background: var(--nhat); border: 1px solid var(--vien); padding: 8px; margin: 8px 0;
  max-height: 340px; overflow: auto; white-space: pre-wrap;
  font: 12px/1.4 Consolas, "Courier New", monospace;
}
td form.doc-ngang { gap: 6px; flex-wrap: nowrap; align-items: center; }
td form.doc-ngang input { min-width: 140px; }

/* ───────────────────────── màn hẹp (điện thoại ~390px) ───────────────────────── */
@media (max-width: 700px) {
  body { padding: 0 10px 40px; }
  .thanh-tren { padding-top: 10px; }
  nav.dieu-huong { gap: 2px 10px; }
  nav.dieu-huong .nhom { width: 100%; }
  form.doc-ngang { flex-direction: column; align-items: stretch; }
  form.doc-ngang > div, form.doc-ngang button { width: 100%; }
  td form.doc-ngang { flex-direction: row; }
  .the { flex: 1 1 42%; }
  .cuon { max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}