/* ============ NT-UI — chuẩn giao diện chung mọi web app Nhà Thoáng ============
   Luật đầy đủ: wiki/CHUAN-GIAO-DIEN-WEB.md · agent chấm: .claude/agents/chuyen-gia-giao-dien.md
   Cách dùng: chép nguyên file vào app (hoặc <link>) rồi CHỈ dùng biến bên dưới, không viết mã màu cứng.
   Nền tối: <html data-theme="dark"> · nền sáng: data-theme="light" (mặc định sáng). */

@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700&display=swap");

:root{
  color-scheme:light;
  /* chữ */
  --font:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --c12:12px; --c14:14px; --c16:16px; --c20:20px; --c28:28px;
  /* khoảng cách + bo góc + chạm */
  --k4:4px; --k8:8px; --k12:12px; --k16:16px; --k24:24px; --k32:32px;
  --bo-nho:8px; --bo:12px; --bo-lon:16px; --cham:44px; --cham-chinh:48px;
  --menu-trai:220px; --doc-max:960px;
  /* màu — nền sáng */
  --nen:#f4f6f5; --mat:#ffffff; --mat-2:#eef2f0; --vien:#dfe5e2;
  --chu:#1d2422; --chu-2:#5f6b67;
  --chinh:#0d5c46; --chinh-chu:#ffffff; --chinh-nhat:#e8f3ef;
  --tot:#0f8a5f; --de-y:#b7791f; --nguy:#c0392b; --tin:#2a6fb0;
  --bong:0 1px 3px rgba(0,0,0,.06),0 6px 20px rgba(0,0,0,.04);
  /* màu theo hạn — giống nhau mọi app */
  --han-xa:#2a6fb0; --han-gan:#d9a406; --han-sat:#d64541; --han-qua:#7a55b0;
  /* 3 mảng */
  --tk:#2a6fb0; --tg:#d0692b; --nt:#7a55b0;
}
:root[data-theme=dark]{
  color-scheme:dark;
  --nen:#0e1211; --mat:#171d1b; --mat-2:#212826; --vien:#2c3532;
  --chu:#e9efed; --chu-2:#9eaaa6;
  --chinh:#35b585; --chinh-chu:#06140f; --chinh-nhat:#15302a;
  --tot:#3fcf8e; --de-y:#e5b345; --nguy:#f0605a; --tin:#5b9bf0;
  --bong:0 1px 3px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font);font-size:var(--c16);line-height:1.5;background:var(--nen);color:var(--chu);
  -webkit-font-smoothing:antialiased}
h1{font-size:var(--c28);font-weight:700;line-height:1.3;margin:0 0 var(--k16)}
h2{font-size:var(--c20);font-weight:700;line-height:1.3;margin:0 0 var(--k12)}
small,.phu{font-size:var(--c14);color:var(--chu-2)}
.so{font-variant-numeric:tabular-nums}

/* thẻ */
.the{background:var(--mat);border:1px solid var(--vien);border-radius:var(--bo);padding:var(--k16);box-shadow:var(--bong)}

/* nút: 1 nút chính / màn */
.nut{min-height:var(--cham);padding:0 var(--k16);border-radius:var(--bo-nho);border:1px solid var(--vien);
  background:var(--mat);color:var(--chu);font:600 var(--c14)/1 var(--font);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;gap:var(--k8)}
.nut:hover{background:var(--mat-2)}
.nut.chinh{min-height:var(--cham-chinh);background:var(--chinh);border-color:var(--chinh);color:var(--chinh-chu);font-size:var(--c16)}
.nut.nguy{color:var(--nguy);border-color:var(--nguy)}
.nut:disabled{opacity:.55;cursor:not-allowed}

/* ô nhập */
input,select,textarea{font:var(--c16) var(--font);min-height:var(--cham);padding:0 var(--k12);border:1px solid var(--vien);
  border-radius:var(--bo-nho);background:var(--mat);color:var(--chu)}
textarea{padding:var(--k12)}
:focus-visible{outline:2px solid var(--chinh);outline-offset:2px}

/* bảng kẻ */
.bang{width:100%;border-collapse:collapse;background:var(--mat);font-size:var(--c14)}
.bang th{position:sticky;top:0;background:var(--mat-2);text-align:left;font-weight:600;color:var(--chu-2)}
.bang th,.bang td{padding:var(--k8) var(--k12);border-bottom:1px solid var(--vien)}
.bang td.so,.bang th.so{text-align:right}
.bang tr:hover td{background:var(--mat-2)}

/* nhãn trạng thái + màu theo hạn */
.nhan{display:inline-flex;align-items:center;height:24px;padding:0 var(--k8);border-radius:var(--bo-nho);
  font-size:var(--c12);font-weight:600;background:var(--mat-2);color:var(--chu-2)}
.han-xa{color:var(--han-xa)} .han-gan{color:var(--han-gan)} .han-sat{color:var(--han-sat)} .han-qua{color:var(--han-qua)}
.nen-han-xa{background:var(--han-xa);color:#fff} .nen-han-gan{background:var(--han-gan);color:#1d1a10}
.nen-han-sat{background:var(--han-sat);color:#fff} .nen-han-qua{background:var(--han-qua);color:#fff}

/* trống / đang tải */
.trong{padding:var(--k32) var(--k16);text-align:center;color:var(--chu-2);font-size:var(--c14)}

/* bố cục PC: menu trái gọn, nội dung đọc ≤ 960, bảng tràn */
@media (min-width:1024px){
  .co-menu{padding-left:var(--menu-trai)}
  .doc{max-width:var(--doc-max)}
  .tran{max-width:none}
}
@media (max-width:600px){
  body{font-size:var(--c16)}
  .le{padding-left:var(--k16);padding-right:var(--k16)}
}