/* Giao dien SANG la mac dinh. Giao dien TOI bat bang thuoc tinh data-theme="toi"
   tren the <html> — do common.js dat theo lua chon cua nguoi dung hoac theo he
   dieu hanh. Chi co MOT khoi mau toi duy nhat nen sua mau khong bi lech hai noi. */
:root {
  --bg:#f4f5f7; --card:#fff; --fg:#15181c; --muted:#697280;
  --line:#e2e5ea; --accent:#2563eb; --on:#16a34a; --off:#9ca3af;
  --warn:#d97706; --err:#dc2626; --soft:#eef0f4; --pill:#fff;
  /* Bac mau cho KHOI LONG trong the (dai gap, nhom con) —
     phai khac ca --bg lan --card thi mat moi thay ranh gioi. */
  --khoi:#e9edf3;
  --do-noi:0 1px 2px rgba(16,24,40,.09), 0 0 0 1px rgba(16,24,40,.04);
  --c-pv:#22c55e; --c-bat:#0284c7; --c-grid:#dc2626; --c-load:#f97316;
  --c-mui:#e0a800;
}
:root[data-theme="toi"] {
  --bg:#111417; --card:#1a1e22; --fg:#e8eaed; --muted:#98a0a9;
  --line:#2a3037; --accent:#5b9dff; --on:#4ade80; --off:#6b7280;
  --warn:#fbbf24; --err:#f87171; --soft:#191d21; --pill:#333b44;
  /* O nen toi --card (#1a1e22) va --soft (#191d21) gan nhu
     trung mau, nen khoi long trong the bien mat. Bac nay nhat
     hon han ca hai. */
  --khoi:#242a31;
  --do-noi:0 1px 2px rgba(0,0,0,.35);
  --c-pv:#4ade80; --c-bat:#38bdf8; --c-grid:#f87171; --c-load:#fb923c;
  --c-mui:#f0c14b;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
       -webkit-text-size-adjust:100%; }
.wrap { max-width:1000px; margin:0 auto; padding:14px 14px 40px; }
.wrap.hasbar { padding-bottom:96px; }

/* ---------- dau trang + dieu huong ---------- */
.top { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
       margin-bottom:14px; }
h1 { font-size:19px; margin:0; }
.sub { color:var(--muted); font-size:13px; margin:1px 0 0; }
/* Dieu huong, chon chu de va cac dai chon khoang deu dung chung mot kieu:
   mot RANH chim mau nhat, muc dang chon la mot VIEN THUOC noi len. Tranh kieu
   to dac mau xanh — no bat qua manh so voi phan con lai cua trang. */
.nav, .seg { display:flex; gap:2px; padding:3px;
       background:var(--soft); border:1px solid var(--line); border-radius:11px; }
.themebtn { display:flex; }
.nav a, .seg button {
       display:flex; align-items:center; justify-content:center;
       padding:8px 14px; min-height:34px; border:0; border-radius:8px;
       background:transparent; color:var(--muted); font:inherit; font-size:13.5px;
       font-weight:650; text-decoration:none; cursor:pointer; white-space:nowrap;
       transition:background .18s ease, color .18s ease, box-shadow .18s ease; }
.nav a.active, .seg button.active {
       background:var(--pill); color:var(--accent); box-shadow:var(--do-noi); }
@media (hover:hover) {
  .nav a:not(.active):hover, .seg button:not(.active):hover { color:var(--fg); }
}
/* O trong dai dieu huong chi chua bieu tuong thi thu gon lai cho vuong van */
.nav a.bieutuong { padding:8px 12px; }
.nav a.bieutuong svg { width:19px; height:19px; }
/* Dieu huong va nut chu de di chung mot hang, ke ca tren dien thoai —
   tach ra thi nut chu de roi xuong mot dong rieng, trong rat trong. */
.dieukhien { display:flex; align-items:center; gap:8px; margin-left:auto; }
.nav { margin-left:0; }
@media (max-width:520px) {
  .dieukhien { margin-left:0; width:100%; }
  .nav { flex:1; } .nav a { flex:1; }
}

h2 { font-size:12px; margin:0 0 12px; text-transform:uppercase;
     letter-spacing:.07em; color:var(--muted); font-weight:700; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px;
        padding:16px; margin-bottom:12px; }

/* ---------- trang thai ---------- */
.hero { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.big { font-size:40px; font-weight:650; font-variant-numeric:tabular-nums;
       letter-spacing:-.02em; line-height:1.1; }
/* Don vi A to bang con so, chu mo ta van nho */
.big.dv { color:var(--muted); margin:0 2px 0 6px; }
.unit { font-size:15px; color:var(--muted); }
/* MUC PIN dung dau va to gap ruoi — doc duoc tu xa, khong phai phong to man
   hinh (yeu cau chu nha 20/08). Dong sac/xa lui xuong hang duoi, van du to de
   doc. Hai hang xep doc nen cot phai (ba den tinh trang) khong bi day di. */
.hero { flex-direction:column; align-items:flex-start; gap:0; }
.hero-soc, .hero-dong { display:flex; align-items:baseline; flex-wrap:wrap; }
/* HANG "dong xa pin" KHONG DUOC BE DONG.
   Chu nha 22/09/2026: *"cai dong xa pin no cu nhay xuong dong lam khong
   dep"*. Do o kho 390px thi hang nay vua khit (187/211px) — nhung may nao
   dat co chu he thong to hon la nhan roi xuong dong, va do dung la anh chu
   nha chup. Hai viec: con so lam tron mot chu so le (`lamGonDong`), va cam
   be dong o day. Nhan duoc phep co lai va cat duoi bang dau ba cham — thua
   mot chut chu con hon ca hang vo lam hai. */
.hero-dong { flex-wrap:nowrap; min-width:0; }
.hero-dong .unit { white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; min-width:0; }
.big.xl { font-size:58px; }
.big.sm { font-size:26px; }
.hero-soc .unit, .hero-dong .unit { margin-left:8px; }
/* Pin can kiet thi con so do len — khoi phai doc chu moi biet */
.big.xl.thap { color:var(--err); }
.big.xl.day  { color:var(--on); }
@media (max-width:380px) { .big.xl { font-size:48px; } }
/* So lieu chinh va tinh trang ket noi nam cung mot hang: cot phai von trong,
   dat ba dong tinh trang vao do thi khong ton them chieu cao nao. */
.tt-dau { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero { flex:1 1 150px; min-width:0; }
.tt-mach { display:grid; gap:5px; flex:none; margin-left:auto; }
.tt-dong { display:flex; align-items:center; gap:8px; font-size:12px;
           color:var(--muted); white-space:nowrap; }
.tt-dong .d { width:7px; height:7px; border-radius:50%; flex:none;
              background:var(--on);
              box-shadow:0 0 0 3px color-mix(in srgb,var(--on) 20%,transparent); }
/* Chua hoi lan nao thi khong phai hong: xam mo, cham nhat, khong dam.
   Ba trang thai: cho (xam) - binh thuong (xanh) - hong (do). */
.tt-dong.cho { color:var(--muted); opacity:.72; }
.tt-dong.cho .d { background:var(--muted);
              box-shadow:0 0 0 3px color-mix(in srgb,var(--muted) 18%,transparent);
              animation:tt-tho 1.6s ease-in-out infinite; }
@keyframes tt-tho { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .tt-dong.cho .d { animation:none; } }
.tt-dong.xau { color:var(--err); font-weight:650; }
.tt-dong.xau .d { background:var(--err);
              box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 20%,transparent); }
@media (max-width:520px) { .tt-mach { margin-left:0; } }
/* Dong "Gánh tải: 1, 2, 3" — so hieu cac kenh dang ganh (chu nha chot 20/09:
   *"ghi số kênh thôi"* · *"1, 2, 3"*). Voi ba kenh thi dong nay ngan, khong
   tran duoc; nhung nha nhieu kenh hon thi chuoi so dai ra, ma `.tt-dong` von
   cam xuong dong. Nen rieng dong nay duoc xuong dong — chan tran ngang bang
   CAU TRUC, khong phai bang cach do thu mot truong hop roi mong cac truong
   hop khac cung vua. Cham xanh nhich len dau dong cho thang hang voi dong
   chu dau tien. */
.tt-dong.tt-ganh { white-space:normal; align-items:flex-start; }
.tt-dong.tt-ganh .d { margin-top:4px; }

/* NHAN "Gánh tải: 1, 2, 3" NGANG HANG VOI TIEU DE THE TRANG THAI.
   Chu nha 21/09/2026: *"đưa nó lên ngang hàng với chữ trạng thái và cho cái
   hiệu ứng gì đó nhấp nháy hoặc màu sắc"*.
   Truoc do nhan nay la dong THU TU trong cot tinh trang ben phai — noi dung
   dung, nhung no lan giua ba dong mau xam cung co chu 12px nen chu nha nhin
   ma khong thay (anh 11:29 ngay 21/09 co du chu "Gánh tải: 3" tren man hinh).
   Nay tach han ra: mau cam, nam canh tieu de, co cham tho.
   NHAY BANG CHAM chu khong nhay ca cai nhan: chop nguyen mang chu thi doc
   mot luc la moi mat, va no cung se dap vao phan con lai cua tieu de. */
/* CAC NHAN DI THANH MOT CUM — het cho thi CA CUM xuong dong, khong bo lai
   cai nao. Chu nha 26/09/2026 (anh 20:58): *"xuống dòng rất xấu"*.
   Do that o 390px: tieu de + hai nhan can 349px, cho trong trong the chi co
   330px — thieu 19px nen nhan "✋ Bật tay: BNL Tầng 2" roi xuong mot minh,
   nhin so le, lai chi cach hang tren 5px vi dong tieu de cao 18px ma nhan
   cao 20px. Thu chu cung khong cuu duoc: bo han hai chu "Bật tay" van thieu
   cho o kho 320px. Nen cho no xuong dong cho DEP: goi hai nhan vao mot hop
   `inline-flex` — mot nhan thi van ngang hang tieu de nhu luat 21/09, hai
   nhan khong du cho thi ca cum xuong hang rieng, cach deu 6px.
   `:not(:empty)` de luc khong co nhan nao thi khong de lai 8px thua. */
#ttGanh:not(:empty) { display:inline-flex; flex-wrap:wrap; align-items:center;
                      gap:6px; vertical-align:middle; margin-left:8px; }
/* 2px tren duoi: le cua thanh phan flex lam CAO ca cai hop, nho the hang
   nhan tach han khoi hang chu chu khong dinh vao no (le doc cua mot hop
   inline thuong thi khong an thua — no khong day duoc hang chu ra). */
#ttGanh .ganh-nhan { margin:4px 0; }
.ganh-nhan { display:inline-flex; align-items:center; gap:6px;
             padding:2px 9px; border-radius:999px;
             font-size:11px; font-weight:700; letter-spacing:.03em;
             text-transform:none; white-space:nowrap;
             color:#b45309; background:rgba(245,158,11,.16);
             border:1px solid rgba(245,158,11,.55); vertical-align:middle; }
@media (prefers-color-scheme: dark) { .ganh-nhan { color:#fcd34d; } }
/* ✋ BẬT BẰNG TAY trên dải Trạng thái — chủ nhà 26/09/2026: *"tôi muốn trên
   trạng thái cũng phải có icon và thông báo bật tay"*. Màu XANH LƠ để không
   lẫn với nhãn cam "Gánh tải" đứng ngay cạnh: hai nhãn nói hai chuyện khác
   nhau (máy đang làm việc / người đang cầm công tắc). */
.ganh-nhan.tay { color:#0369a1; border-color:#0369a1;
                 background:color-mix(in srgb,#0369a1 12%,transparent); }
.ganh-nhan.tay .d { display:none; }
@media (prefers-color-scheme: dark) {
  .ganh-nhan.tay { color:#7dd3fc; border-color:#7dd3fc; }
}
.ganh-nhan .d { width:7px; height:7px; border-radius:50%; flex:none;
                background:#f59e0b;
                box-shadow:0 0 0 3px color-mix(in srgb,#f59e0b 22%,transparent);
                animation:ganh-tho 1.4s ease-in-out infinite; }
@keyframes ganh-tho { 0%,100% { opacity:.3; transform:scale(.85); }
                      50%     { opacity:1;  transform:scale(1); } }
@media (prefers-reduced-motion:reduce) { .ganh-nhan .d { animation:none; } }

/* NGUONG DANG AP DUNG — moi luat MOT CAU, khong phai o nhan/gia tri.
   Chu nha 27/09/2026 chup dung khoi cu: *"phần này tôi đọc chả hiểu gì"*.
   Bon o "PV TU / DONG SAC DUOI / GIU BAT-NGUNG 300/300 s / FAIL-SAFE" chi
   doc duoc neu da biet trong ma co gi. */
.ng-luat { list-style:none; margin:0; padding:0; }
.ng-luat li { display:flex; gap:9px; padding:9px 0; line-height:1.5;
              border-top:1px solid var(--line); }
.ng-luat li:first-child { border-top:0; padding-top:0; }
.ng-luat .bt { flex:none; width:22px; text-align:center; font-size:15px;
               line-height:1.5; }
/* So va don vi khong duoc be doi giua dong ("5.000" xuong dong roi "W"). */
.ng-luat b { white-space:nowrap; }

/* Luoi deu cot cho cac cong tac — xep tu do bang flex thi moi o mot chieu dai,
   nhin rat vun. Ten o tren, trang thai o duoi. */
.swstrip { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
/* Man hep: ten "BNL Tang 3" khong du cho trong luoi 3 cot -> xuong 1 cot,
   moi cong tac mot hang nam ngang, chu khong bao gio bi cat */
@media (max-width:560px) {
  .swstrip { grid-template-columns:1fr; gap:6px; }
  /* O co 4 phan tu (ten, trang thai, so phut, thanh gio) — ep flex ngang la
     giam len nhau. Luoi 2 cot: hang tren ten|trang thai, hang duoi phut,
     thanh gio keo suot. `.swstrip .sw` de thang luat `.sw` phia duoi. */
  .swstrip .sw { display:grid; grid-template-columns:1fr auto;
                 align-items:center; gap:1px 10px; padding:8px 12px; }
  .swstrip .sw .ten { grid-column:1; justify-self:start; }
  .swstrip .sw .st { grid-column:2; justify-self:end; }
  .swstrip .sw .gio { grid-column:1; justify-self:start; }
  .swstrip .sw .thanhgio { grid-column:1 / -1; }
}
.sw { display:flex; flex-direction:column; align-items:center; gap:3px;
      padding:9px 8px; border-radius:10px; border:1px solid var(--line);
      background:var(--bg); min-width:0; }
.sw .ten { display:flex; align-items:center; gap:6px; font-size:12.5px;
           font-weight:650; max-width:100%; min-width:0; white-space:nowrap; }
.sw .ten span { flex:none; }
.sw.on { border-color:var(--on); color:var(--on);
         background:color-mix(in srgb,var(--on) 9%,transparent); }
.sw .st { font-size:10.5px; font-weight:800; letter-spacing:.06em;
          color:var(--muted); }
.sw.on .st { color:var(--on); }

/* Bo cuc the 2x2 hoc tu ung dung LuxPower: dai mau tieu de + gia tri nam TREN,
   nhan nho nam DUOI. Xep doc nhu vay thi cot hep van khong cat chu. */
.zones { display:grid; grid-template-columns:1fr 1fr; gap:9px;
         margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
@media (min-width:900px) { .zones { grid-template-columns:repeat(4,1fr); } }
/* Luoi so lieu ben trong the BMS */
.kvgrid { display:grid; grid-template-columns:1fr; gap:0 16px; }
@media (min-width:420px) { .kvgrid { grid-template-columns:1fr 1fr; } }
.zone { border:1px solid var(--line); border-radius:10px; background:var(--bg);
        min-width:0; overflow:hidden; }   /* min-width:0 -> o luoi moi co lai duoc */
.zhead { background:var(--z, var(--muted)); color:#fff; padding:5px 9px;
         font-size:10px; font-weight:700; letter-spacing:.05em;
         text-transform:uppercase; display:flex; align-items:center; gap:5px; }
.zbody { padding:9px 10px 11px; }
/* Mau phan biet 4 khoi, hoc cach SolarBox tach NLMT / Pin / Luoi / Tai */
.zone.pv   { --z:var(--c-pv); }   /* nang luong mat troi — xanh la */
.zone.bat  { --z:var(--c-bat); }   /* pin luu tru      — xanh nuoc bien */
.zone.grid { --z:var(--c-grid); }   /* luoi EVN         — do */
.zone.load { --z:var(--c-load); }   /* tai nha          — cam */
.zt { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
      color:var(--z, var(--muted)); margin-bottom:5px; }
.zmain { font-size:21px; font-weight:700; font-variant-numeric:tabular-nums;
         line-height:1.1; letter-spacing:-.01em; color:var(--z, var(--fg)); }
.zmain small { font-size:11px; color:var(--muted); font-weight:500; }
/* Cap gia tri / nhan xep doc — cach cua LuxPower, khong bao gio bi cat chu */
.kv { margin-top:8px; }
.kvv { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
       line-height:1.2; }
.kvv.hi { color:var(--z, var(--accent)); }
.kvl { font-size:9px; color:var(--muted); font-weight:600; letter-spacing:.03em;
       text-transform:uppercase; margin-top:1px; }
/* Dong PHU: nho hon va sat hon, cho nhung con so de doi chieu chu khong phai
   de liec. Chu nha 03/09/2026: *"tôi muốn bố trí gọn hơn 1 chút. Từ sản lượng
   bám tải cũ cho cỡ chữ nhỏ đi"* — ba dong cuoi the NLMT (bam tai cu, tong
   san luong, tien tiet kiem) la so ca doi, khong doi tung giay nhu may dong
   tren, nen khong can to bang. */
.kv.phu { margin-top:5px; }
.kv.phu .kvv { font-size:11px; font-weight:600; }
.kv.phu .kvl { font-size:8px; }
/* SO PHU TRONG NGOAC, dung ngay canh so chinh — vi du "0.2 kWh (1.05 MWh)".
   Chu nha 06/09/2026, kem anh chup the vo lam hai dong: *"tớ không muốn nó
   xuống dòng"*. Hai viec de no khong roi hang: chu nho hon han so chinh, va
   cam ngat dong giua cum. */
.kvv .ngoac { font-size:10px; font-weight:600; color:var(--muted);
              white-space:nowrap; }
.kvv .mot-hang { white-space:nowrap; }
/* CUM LIEN MACH — khong duoc ngat o giua.
   Chu nha 06/09/2026, kem anh: *"những chỗ bị khuất kiểu này rồi xuống dòng
   ngắt câu liền mạch. hãy điều chỉnh"*. Cach chua chung: nhung dong ghep tu
   nhieu cum bang dau `·` thi boc TUNG CUM lai, de cho ngat chi con roi vao
   dung cho dau cham giua — doc van lien. Do bang `tools/soi_vo_dong.py`. */
.lien { white-space:nowrap; }
/* Man hinh rat hep (hoac chu he thong dat rat to): nhan viet hoa 9px con
   giai chu nen dai hon be ngang the, "Sản lượng hôm nay" be lam hai dong.
   Thu nho nhan mot chut o kho nay — do bang `tools/soi_vo_dong.py` o 300px:
   can 100px trong cho chi co 93px. */
@media (max-width: 340px) {
  .kvl { font-size:8px; letter-spacing:0; }
  /* So trong ngoac cung phai co lai, khong thi cum "0.2 kWh (1045.2 kWh)"
     tran ra khoi vien the — do o 300px: can 114px trong cho 93px. */
  .kvv .ngoac { font-size:8px; }
}
/* Kho cuc hep (may cu, hoac chu he thong dat to nhat): co lai them mot nac
   nua de so trong ngoac van nam trong vien. Do o 300px. */
@media (max-width: 315px) {
  .kvv .ngoac { font-size:7px; }
  .kvv { font-size:12px; }
}
.zrow { display:flex; justify-content:space-between; gap:6px; font-size:12.5px;
        margin-top:5px; color:var(--muted); align-items:baseline; min-width:0; }
.zrow span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
             min-width:0; flex:1 1 auto; }
.zrow b { color:var(--fg); font-variant-numeric:tabular-nums; font-weight:600;
          white-space:nowrap; flex:none; }
.zrow.hi b { color:var(--z, var(--accent)); }

/* Ly do cua quyet dinh gan nhat — vien trai thay cho khoi nen xam kin, nhe hon
   ma van tach bach voi phan tren. */
.escnote { margin-top:14px; padding:2px 0 2px 12px; font-size:13.5px;
           border-left:3px solid var(--line); }
.escnote b { display:block; font-size:12px; color:var(--muted);
             text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px; }
/* Icon "Tro tai" (nguoi vac bao tien) dau dong TRO TAI — mang mau cam cua tai
   nha cho noi len giua dong chu xam, khong lan voi chu. */
.escnote b .ictt { width:17px; height:17px; vertical-align:-3.5px;
                   margin-right:5px; color:var(--c-load); }
/* Khoi "TAI THONG MINH": mot tieu de chung cho hai tinh nang cung lo viec bat
   binh nuoc nong, ben duoi moi tinh nang mot dong mang bieu tuong cua chinh no
   (nguoi vac bao tien = ganh tai, ngon lua = dun bu). Chot 16/08 sau khi chu
   nha thay hai dong roi rac trung y het tieu de. */
.ttm-ten { font-size:12.5px; font-weight:800; letter-spacing:.06em;
           text-transform:uppercase; color:var(--fg); margin-bottom:8px; }
.ttm-muc + .ttm-muc { margin-top:10px; }
/* Dong phu: viec CHUA chay (dun bu con dang cho gio) — khong bieu tuong, chu
   nho hon, de mat chi thay MOT bieu tuong cho viec dang thuc su chay. */
.ttm-phu { margin-top:9px; font-size:12.5px; color:var(--muted); }

/* Cuoi muc Nhat ky: ung dung dang an bao nhieu CPU/RAM/o dia cua may chu
   (yeu cau chu nha 16/08). Ba con so nam ngang, xuong dong duoc tren dien
   thoai; phan trong ngoac nho va xam vi la chu thich, khong phai con so chinh. */
.tainguyen { margin-top:12px; padding-top:11px; border-top:1px solid var(--line); }
.tn-ten { font-size:12px; color:var(--muted); text-transform:uppercase;
          letter-spacing:.05em; margin-bottom:6px; }
.tn-hang { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13.5px;
           font-variant-numeric:tabular-nums; }
.tn-hang b { font-weight:700; color:var(--muted); margin-right:5px;
             text-transform:none; letter-spacing:0; }
.tn-phu { font-size:12px; color:var(--muted); }

/* Bieu tuong dau dong trang thai khi no la ANH chu khong phai ky tu — vi du
   "Bảo vệ pin yếu" dung anh chu nha gui 17/08. CHI dat chieu cao, be ngang tu
   tinh: anh vuong hay anh cao deu vao vua, khong bi bop meo. */
.ic-anh { height:19px; width:auto; vertical-align:-5px; margin-right:6px;
          border-radius:4px; }
.tainguyen .tn-phu { margin-top:5px; }
/* Checklist tung buoc dieu kien: dat xanh, chua dat xam */
.dklist { display:flex; flex-direction:column; gap:6px; margin-top:9px; }
.dk { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.dk .tick { flex:none; width:15px; font-style:normal; font-weight:800; text-align:center; }
.dk .dkic { flex:none; display:inline-flex; }
.dk .dkic svg { width:15px; height:15px; }
.dk b { display:inline; font-size:13px; text-transform:none; letter-spacing:0;
        color:var(--fg); font-variant-numeric:tabular-nums; margin:0; }
.dk.ok { color:var(--fg); }
.dk.ok .tick { color:var(--on); }
.dk.cho .tick { color:var(--muted); }
/* Mat troi vang, pin xanh — cho de nhan, khong doi theo dat/chua */
.dk .dkic-sun { color:var(--warn); }
.dk .dkic-pin { color:var(--c-pv); }

/* ---------- form ---------- */
label { display:block; font-size:12px; color:var(--muted); margin:0 0 5px;
        font-weight:600; }
input, select, textarea { width:100%; padding:11px 12px; border-radius:9px;
  border:1px solid var(--line); background:var(--bg); color:var(--fg);
  font:inherit; font-size:16px; }          /* 16px: iOS khong tu zoom khi focus */
textarea { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent);
  outline-offset:-1px; border-color:var(--accent); }
.fld { margin-bottom:12px; }
.subhead { font-size:12.5px; font-weight:700; color:var(--fg);
           margin:18px 0 10px; padding-top:14px; border-top:1px solid var(--line); }
.subhead:first-of-type { margin-top:14px; }

/* ---------- nut cham than: giai thich chi hien khi bam ----------
   De trang khong bi chu dai trai kin. Nut nam canh nhan cua o nhap,
   o giai thich nam ngay duoi va mac dinh an. */
.ib { display:inline-flex; align-items:center; justify-content:center;
      width:17px; height:17px; min-height:0; margin-left:6px; padding:0; flex:none;
      border-radius:50%; border:1px solid var(--line); background:var(--soft);
      color:var(--muted); font:inherit; font-size:11px; font-weight:800;
      line-height:1; cursor:pointer; vertical-align:-3px; box-shadow:none;
      /* h2 va label co uppercase + letter-spacing; bo di keo dau ! lech tam */
      text-transform:none; letter-spacing:0; text-indent:0;
      transition:background .12s, color .12s, border-color .12s; }
.ib:hover { color:var(--accent); border-color:var(--accent); }
.ib[aria-expanded="true"] { background:var(--accent); border-color:var(--accent);
      color:#fff; }
.ibox { margin-top:8px; padding:10px 12px; border-radius:8px;
        background:var(--soft); border:1px solid var(--line); }
.ibox[hidden] { display:none; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
@media (max-width:560px) { .grid3 { grid-template-columns:1fr 1fr; } }

button { appearance:none; -webkit-appearance:none;
  padding:10px 16px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--fg); font:inherit; font-size:14px;
  font-weight:600; cursor:pointer; min-height:42px; box-shadow:var(--do-noi);
  transition:border-color .16s ease, background .16s ease, transform .06s ease; }
@media (hover:hover) {
  button:hover { border-color:color-mix(in srgb,var(--fg) 22%,var(--line)); }
}
button:active { transform:translateY(1px); }
button:disabled { box-shadow:none; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.sm { padding:7px 12px; min-height:36px; font-size:13px; }

.seg button { flex:1; padding:8px 6px; font-size:13px;
       /* Bo do tre 300ms cho lan cham thu hai tren mot so trinh duyet di dong */
       touch-action:manipulation; }
/* Dai nut chon che do trong the kenh la thu bam nhieu nhat tren dien thoai,
   ma 34px thi hut so voi muc toi thieu 44px cua iOS (Android khuyen 48dp).
   Chi noi rong rieng cho no, khong dung toi dai dieu huong tren dau trang. */
#chans .seg button { min-height:46px; font-size:13.5px; }

.dot { display:inline-block; width:10px; height:10px; border-radius:50%;
       background:var(--off); flex:none; }
.dot.on { background:var(--on); box-shadow:0 0 0 3px color-mix(in srgb,var(--on) 22%,transparent); }

.chcard { border:1px solid var(--line); border-radius:10px; padding:12px;
          margin-bottom:10px; background:var(--bg);
          border-left:4px solid var(--off); }
.chcard.on { border-left-color:var(--on);
             background:color-mix(in srgb,var(--on) 6%,var(--bg)); }

/* Huy hieu TRANG THAI THAT cua cong tac — phai doc duoc ngay, khong lan
   voi dai nut chon che do ben duoi. */
.state { margin-left:auto; padding:6px 13px; border-radius:999px;
         font-size:12.5px; font-weight:700; letter-spacing:.03em;
         white-space:nowrap; display:inline-flex; align-items:center; gap:7px; }
.state.on  { background:var(--on); color:#fff; }
.state.off { background:var(--soft); color:var(--muted); border:1px solid var(--line); }
.state.unknown { background:color-mix(in srgb,var(--warn) 16%,transparent);
                 color:var(--warn); border:1px solid currentColor; }
.sw.unknown { border-color:var(--warn); color:var(--warn); }
.state .b { width:8px; height:8px; border-radius:50%; background:currentColor; }
.state.on .b { background:#fff; }
.modelbl { font-size:11px; color:var(--muted); font-weight:650;
           text-transform:uppercase; letter-spacing:.05em; margin:4px 0 5px; }
.chcard:last-child { margin-bottom:0; }
.chhead { display:flex; align-items:center; gap:9px; margin-bottom:8px; flex-wrap:wrap; }
.chhead .nm { font-weight:650; }
.tag { font-size:11px; color:var(--muted); background:var(--soft);
       padding:2px 7px; border-radius:5px; white-space:nowrap; }
.chnote { font-size:12.5px; color:var(--muted); margin-top:8px; }
/* ---------- CONG TAC GAT (kieu truot) ----------
   Chu nha 03/10/2026: *"ma toi bao la cong tac chu co bao dau check dau"*.
   O tich vuong trong nhu mot muc chon trong bieu mau — nguoi dung khong
   biet gat no la AN LIEN. Cai nay nhin la biet gat: xam = dang bat sac,
   xanh + nut truot sang phai = da tat.

   Ben trong VAN la <input type=checkbox>, chi an di: giu nguyen su kien
   `change`, giu `checked`, bam phim cach van gat duoc. Dung `display:none`
   thi ban phim khong toi duoc o nua, nen phai `opacity:0` + `position`. */
.gat { display:flex; align-items:center; gap:10px; font-size:14px;
       font-weight:600; color:var(--fg); margin:0; cursor:pointer;
       -webkit-user-select:none; user-select:none; }
.gat input { position:absolute; width:1px; height:1px; opacity:0;
             margin:0; pointer-events:none; }
.gat .ray { position:relative; flex:none; display:block;
            width:48px; height:28px; border-radius:14px;
            background:var(--off); border:1px solid var(--line);
            transition:background .18s ease; }
.gat .ray::after { content:""; position:absolute; top:3px; left:3px;
                   width:20px; height:20px; border-radius:50%;
                   background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.35);
                   transition:transform .18s ease; }
.gat input:checked + .ray { background:var(--on); border-color:var(--on); }
.gat input:checked + .ray::after { transform:translateX(20px); }
.gat input:focus-visible + .ray { outline:2px solid var(--accent);
                                  outline-offset:2px; }
.gat input:disabled + .ray { opacity:.55; }
@media (prefers-reduced-motion:reduce) {
  .gat .ray, .gat .ray::after { transition:none; }
}

.chk { display:flex; align-items:center; gap:8px; font-size:14px;
       font-weight:600; color:var(--fg); margin:0; }
.chk input { width:20px; height:20px; flex:none; }
/* Hang o tick kem nut cham than. Nut de NGOAI <label> vi bam vao nut ma nam
   trong label thi trinh duyet lat luon o tick. */
/* PHẢI CHO XUỐNG DÒNG.
   Hàng chỉ có [ô tick] + [nút !] thì một dòng là vừa. Nhưng hàng nào nhét
   thêm câu giải thích dài (mục "Lệnh bật/tắt không xuống được công tắc") thì
   ở khổ 390px mỗi thứ bị bóp còn MỘT CHỮ MỖI DÒNG, chữ chồng lên nhau, đọc
   không ra. 4.014 bài kiểm và cả khuôn chụp ảnh đều báo ĐẠT vì không ai đo
   BỀ RỘNG chữ — nhìn ảnh mới thấy (20/09/2026). */
.chkrow { display:flex; align-items:center; margin-bottom:10px;
          flex-wrap:wrap; gap:8px; }
.chkrow .hint { flex-basis:100%; margin:0; }

details { border:1px solid var(--line); border-radius:10px; padding:0 12px;
          background:var(--bg); margin-top:12px; }
details[open] { padding-bottom:12px; }
summary { cursor:pointer; padding:12px 0; font-size:13px; font-weight:650;
          color:var(--muted); list-style:none; }
summary::-webkit-details-marker { display:none; }
summary::before { content:"\25b8  "; }
details[open] summary::before { content:"\25be  "; }

.log { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
       max-height:340px; overflow:auto; background:var(--bg);
       border:1px solid var(--line); border-radius:9px; padding:10px;
       -webkit-overflow-scrolling:touch; }
.log div { padding:1.5px 0; white-space:pre-wrap; word-break:break-word; }
.log .error { color:var(--err); } .log .warn { color:var(--warn); }

.hint { font-size:12px; color:var(--muted); margin-top:6px; line-height:1.45; }
.hint code { background:var(--soft); padding:1px 4px; border-radius:4px; font-size:11.5px; }
.banner { padding:11px 13px; border-radius:9px; margin-bottom:12px; font-size:13.5px; }
.banner.err { background:color-mix(in srgb,var(--err) 13%,transparent); color:var(--err); }
.banner.ok { background:color-mix(in srgb,var(--on) 13%,transparent); color:var(--on); }
/* DAI BAO CO CAU TRUC — hoc tu bang bao cua SolarBox (chu nha 07/09/2026:
   *"hãy học theo cái thông báo lỗi này"*): ten thiet bi · hau qua · danh sach
   viec phai xem tan noi · nut huong dan. Mot dong chu do thi doc xong van
   khong biet phai lam gi. */
.banner .ban-t { font-weight:700; line-height:1.4; }
.banner .ban-p { margin-top:4px; opacity:.85; line-height:1.45; }
/* Cach xu ly GAP LAI. Chu nha 13/09/2026: *"nhieu chu kinh khung"* — dai
   bao chi can noi con nao hong va co sao khong; ai muon sua thi bung ra. */
.banner .ban-chi { margin-top:6px; }
.banner .ban-chi > summary { cursor:pointer; opacity:.85; font-size:13px; }
.banner .ban-may { margin-top:6px; opacity:.7; font-size:12px;
                   word-break:break-word; }
.banner .ban-ds { margin:8px 0 0; padding-left:18px; line-height:1.5; }
.banner .ban-ds li { margin-top:4px; }
.banner .ban-ds b { font-weight:700; }
.banner .ban-nut { display:inline-block; margin-top:10px; padding:7px 12px;
  border-radius:8px; border:1px solid currentColor; color:inherit;
  text-decoration:none; font-weight:600; font-size:13px; }
.banner .ban-nut:hover { background:color-mix(in srgb,currentColor 12%,transparent); }
.banner + .banner { margin-top:-4px; }
.foot { display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap; }

.savebar { position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--card); border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex; gap:10px; align-items:center; }
.savebar .primary { flex:0 0 auto; min-width:150px; }
/* Toast bao da luu: noi ngay TREN thanh Luu, tu tan sau vai giay */
.savetoast { position:absolute; left:50%; transform:translateX(-50%);
             bottom:calc(100% + 10px); background:var(--on); color:#fff;
             font-size:13.5px; font-weight:650; padding:9px 16px;
             border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.25);
             white-space:nowrap; animation:toastHien .25s ease; }
.savetoast[hidden] { display:none; }
@keyframes toastHien { from { opacity:0; transform:translate(-50%, 6px); }
                       to { opacity:1; transform:translate(-50%, 0); } }
.savebar .dieukhien { margin-left:auto; }
.savebar button { white-space:nowrap; }
@media (max-width:560px) {
  .savebar { gap:7px; padding-left:10px; padding-right:10px; }
  .savebar .primary { min-width:0; }
  .savebar .hint { flex:0 1 auto; }   /* chu bao luu khong day cum nut ra mep */
}

/* ---------- BMS: luoi dien ap tung cell ---------- */
/* Bo cuc thanh ngang hoc tu SolarBox: nen lap day theo dien ap, so thu tu
   dang vien thuoc ben trai, dien ap ben phai. Mau van la bang mau cua minh. */
.cells { display:grid; grid-template-columns:repeat(2,1fr); gap:5px; margin-top:12px; }
@media (min-width:560px) { .cells { grid-template-columns:repeat(3,1fr); } }
@media (min-width:820px) { .cells { grid-template-columns:repeat(4,1fr); } }
.cell { position:relative; overflow:hidden; z-index:0; display:flex;
        align-items:center; gap:5px; padding:5px 7px; border-radius:7px;
        background:var(--soft); border:1px solid transparent; }
.cell .nen { position:absolute; inset:0 auto 0 0; z-index:-1; border-radius:7px;
             background:color-mix(in srgb,var(--c-bat) 17%,transparent);
             transition:width .5s ease-out; }
.cell .n { flex:none; min-width:21px; padding:1px 5px; border-radius:999px;
           background:var(--c-bat); color:#fff; font-size:10.5px; font-weight:700;
           text-align:center; }
.cell .v { flex:1; text-align:right; font-size:12.5px; font-weight:700;
           font-variant-numeric:tabular-nums; color:var(--fg); }
.cell.hi { border-color:var(--c-grid); }
.cell.hi .v { color:var(--c-grid); }
.cell.hi .n { background:var(--c-grid); }
.cell.hi .nen { background:color-mix(in srgb,var(--c-grid) 15%,transparent); }
.cell.lo { border-color:var(--c-pv); }
.cell.lo .v { color:var(--c-pv); }
.cell.lo .n { background:var(--c-pv); }
.cell.lo .nen { background:color-mix(in srgb,var(--c-pv) 17%,transparent); }
/* Dong tom tat cao nhat / lech / thap nhat duoi luoi cell */
.celltt { display:flex; justify-content:space-between; align-items:center;
          gap:8px; margin-top:8px; font-size:12.5px; font-weight:700;
          font-variant-numeric:tabular-nums; }
.celltt .hi { color:var(--c-grid); }
.celltt .lo { color:var(--c-bat); }
.bmshead { display:flex; gap:8px; flex-wrap:wrap; align-items:center;
           margin-bottom:4px; }

/* Chan moi kha nang cuon ngang o cap trang */
/* `overflow-x:hidden` o day se GIET position:sticky cua thanh dieu huong
   (moi to tien co overflow khac visible deu pha sticky). `clip` van chan
   tran ngang ma khong dung den co che cuon. */
html, body { max-width:100%; overflow-x:clip; }

/* ---------- So do dong nang luong (hoc cach LuxPower) ---------- */
.flowwrap { width:100%; display:flex; justify-content:center; }
/* Dong chu duoi so do phai tho ra, dung dinh vao hinh.
   Chu nha 31/08/2026: *"cai dong chu cuoi cung dang sat bieu do qua"*.
   So do cao thap khac nhau tuy nha (mot dan hay nhieu dan, co pin hay
   khong) nen khong the chua khoang trong san trong hinh — phai de o
   chinh dong chu. */
/* CHUA CHO SAN HAI DONG. Chu nha 23/09/2026: *"dong chu duoi bieu do cu nhay
   len nhay xuong"*. Cau chu dai ngan tuy luc (co menh de pin hay khong), o be
   ngang dien thoai no nhay giua MOT va HAI dong — moi lan doi la the "Trang
   thai" ben duoi nhich theo. Chua san hai dong thi o khong doi cao nua.
   2,9em = 2 x 1,45 (line-height cua .hint) tinh theo co chu 12px cua chinh no.
   Gop luon quy tac `text-align` trung lap nam o cuoi tep truoc day. */
#flowNote { margin-top:26px; text-align:center; min-height:2.9em; }
/* Man hinh lon khong de so do gian het chieu rong — nhin rat to va troi. */
.flowwrap svg { width:100%; max-width:420px; height:auto; display:block; }
.fbox { fill:var(--bg); stroke:var(--line); stroke-width:1.5; }
.fbox.pv   { stroke:var(--c-pv); }  .fbox.bat  { stroke:var(--c-bat); }
.fbox.grid { stroke:var(--c-grid); } .fbox.load { stroke:var(--c-load); }
.ic       { fill:var(--muted); }
.ic.pv    { fill:var(--c-pv); }  .ic.bat  { fill:var(--c-bat); }
.ic.grid  { fill:var(--c-grid); } .ic.load { fill:var(--c-load); }
.flbl { font-size:8.5px; font-weight:700; letter-spacing:.05em;
        text-transform:uppercase; fill:var(--muted); }
.fval { font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; fill:var(--fg); }
/* Muc phat PV: duoi 1000 de nguyen, tu 1000 xanh, tu 4000 vang, tu 5000 do */
.fval.d-den  { fill:var(--fg); }
.fval.d-xanh { fill:var(--on); }
.fval.d-vang { fill:var(--warn); }
.fval.d-do   { fill:var(--err); font-weight:800; }

/* Nang gan cham tran dan pin — nhap nhay do.
   Chu nha 01/09/2026: *"Nha nay PV cao nhat 3000W nen hay de cai nhap nhay
   chu do o tam pin nguong 2800W"*.

   Nhay bang do MO chu khong bang mau: doi mau qua lai lam con so kho doc,
   ma cai can bao la "dang gan het co", khong phai "co gi do hong". */
.fval.d-nhay { fill:var(--err); font-weight:800; animation:pvNhay 1.1s ease-in-out infinite; }
@keyframes pvNhay { 0%,100% { opacity:1; } 50% { opacity:.28; } }
/* Bo hieu ung chuyen dong thi thoi nhay. GIU SAT `@keyframes pvNhay`. */
@media (prefers-reduced-motion: reduce) {
  .fval.d-nhay { animation:none; }
  .muathang.vuot .so { animation:none; }
}

/* CONG TAC "TAT SAC PIN DEM" — chi hien khi co khuyen cao, va nhay cho de
   thay. Chu nha 03/10/2026: *"khi hien len thi cho cai nhap nhay de de nhan
   ra"*. Nhay ca KHOI (khuyen cao + cong tac) chu khong chi cai o tich: o
   tich 18px nhay thi van de truot mat. */
#tsdKhoi.tsd-nhay { border:1px solid var(--err); border-radius:10px;
                    padding:8px 10px; margin-top:8px;
                    animation:tsdNhay 1.4s ease-in-out infinite; }
@keyframes tsdNhay { 0%,100% { background:transparent; }
                     50% { background:rgba(255,86,86,.18); } }
@media (prefers-reduced-motion:reduce) {
  #tsdKhoi.tsd-nhay { animation:none; background:rgba(255,86,86,.12); }
}

/* DIEN MUA GIO DAT TRONG THANG — chu nha 18/09/2026: *"có cảnh báo nhấp nháy
   nếu vượt ngưỡng (200 số)"*. Dung lai dung nhip nhay `pvNhay` o tren, khong
   dung them mot hieu ung thu hai.
   `.fval.d-nhay` dung `fill` nen chi an tren SVG; day la the HTML thuong nen
   phai dat `color`. */
.muathang { font-variant-numeric:tabular-nums; }
.muathang .so { font-size:26px; font-weight:800; }
.muathang.vuot .so { color:var(--err); animation:pvNhay 1.1s ease-in-out infinite; }
.muathang.vuot .canhbao { color:var(--err); font-weight:650; }
.fsub { font-size:8px; fill:var(--muted); font-variant-numeric:tabular-nums; }
/* Muc dong pin: duoi 30 A de nguyen, tu 30 xanh, tu 60 vang, tu 80 do */
.fsub tspan.d-den  { fill:var(--fg); font-weight:700; }
.fsub tspan.d-xanh { fill:var(--on); font-weight:700; }
.fsub tspan.d-vang { fill:var(--warn); font-weight:700; }
.fsub tspan.d-do   { fill:var(--err); font-weight:800; }
.ftong { font-size:19px; font-weight:700; fill:var(--c-pv);
         font-variant-numeric:tabular-nums; }
/* Bieu tuong tinh nang dang chay, nam giua hai chuoi PV tren so do. Mau cam
   la cho nguoi vac bao tien (Tro tai) — cac bieu tuong con lai la emoji nen
   tu co mau rieng. KHONG hieu ung hien dan: trang ve lai moi 3 giay nen hieu
   ung bien thanh nhap nhay (chu nha bat duoc 15/08) — bieu tuong phai dung
   yen, chi doi khi den luot cai khac. */
#fTinhNang { color:var(--c-load); }
.ftn { font-size:26px; }
.fchia { stroke:var(--line); stroke-width:1; }

.fline { fill:none; stroke:var(--line); stroke-width:2.5; stroke-linecap:round; }

/* Mui ten chevron chay doc duong noi.
   .pos dat vi tri + huong; .ch chi lo phan truot doc truc X cuc bo.
   Tach 2 lop nhu vay moi vua dat duoc huong vua chay duoc bang CSS. */
.mui use { stroke:var(--c-mui); }            /* vang ho phach giong LuxPower */
/* Nhanh mang dien MOT CHIEU to xanh la: tam pin -> bien tan va
   pin luu tru <-> bien tan. Cac nhanh xoay chieu giu mau ho phach. */
.mui.dc use { stroke:var(--c-pv); }
/* Nhanh luoi to do, cung mau voi o Luoi EVN — nhin mui ten la biet
   dang dinh den dien mua chu khong phai dien nha lam ra. */
.mui.luoi use { stroke:var(--c-grid); }
/* Dang SAC pin ma van phai MUA dien luoi -> mui ten nap pin doi sang do
   (cung mau nhanh luoi): dien nap vao pin luc nay khong phai cua nha lam ra.
   Dat SAU .mui.dc de cung do dac hieu thi luat nay thang khi ap vao #aBat. */
.mui.sacluoi use { stroke:var(--c-grid); }
/* Dang XA pin khi NLMT = 0 (dem, hoac may che het) -> mui ten to xanh nuoc
   bien cung mau o Pin: ca nha luc nay song bang pin, khong con dien mat troi. */
.mui.xapin use { stroke:var(--c-bat); }
/* Mui ten BIEN TAN -> NHA to mau theo thu dang nuoi nha.
   Chu nha 01/09/2026: *"khi khong lay luoi thi mui ten tu bien tan vao nha
   phai mau xanh"*.

   Khong lay luoi -> tung watt vao nha la nang nha lam ra -> xanh la, cung
   mau o NLMT. Dang mua dien -> do, cung mau o Luoi EVN. Nhin mui ten la biet
   dien dang vao nha co phai tra tien hay khong. */
.mui.tunang use { stroke:var(--c-pv); }
/* Nang gop voi luoi: vang ho phach — dung mau mac dinh cua cac nhanh xoay
   chieu, nen nhin ra ngay la "pha tron", khong hoan toan sach cung khong
   hoan toan mua. */
.mui.tuca   use { stroke:var(--c-mui); }
.mui.tuluoi use { stroke:var(--c-grid); }
/* Mui ten bam theo duong noi bang offset-path — nho vay chay duoc ca duong
   gap khuc (ba chuoi PV chum ve bien tan), khong chi duong thang. */
.mui .ch { offset-path:path(var(--duong)); offset-rotate:auto; opacity:0; }
.mui.chay .ch { animation:chevChay var(--gy,1.4s) linear infinite; }
.mui.chay .d2 { animation-delay:calc(var(--gy,1.4s) / -3); }
.mui.chay .d3 { animation-delay:calc(var(--gy,1.4s) / -1.5); }
/* Chay nguoc thi phai xoay dau mui ten 180 do, vi offset-rotate luon lay
   huong tien cua duong chu khong theo chieu chuyen dong. */
.mui.nguoc .ch { animation-direction:reverse; offset-rotate:auto 180deg; }
@keyframes chevChay {
  from { offset-distance:0%;   opacity:0; }
  18%  { opacity:1; }
  82%  { opacity:1; }
  to   { offset-distance:100%; opacity:0; }
}

/* ---------- Chon giao dien sang / toi ---------- */
/* Nut tron chi co bieu tuong — dung cho nut doi giao dien */
button.bieutuong { width:42px; min-height:42px; padding:0; border-radius:11px;
                   display:flex; align-items:center; justify-content:center;
                   color:var(--muted); }
button.bieutuong svg { width:20px; height:20px; }
@media (hover:hover) { button.bieutuong:hover { color:var(--fg); } }

/* Mach chi thi canh bao cua BMS: thanh mau + kim chi vi tri */
.chithi { margin-top:12px; display:grid; gap:12px; }
.ct-dau { display:flex; justify-content:space-between; align-items:baseline;
          gap:8px; font-size:12.5px; color:var(--muted); }
.ct-dau b { font-size:14px; font-variant-numeric:tabular-nums; }
.ct-thanh { position:relative; height:9px; border-radius:5px; margin-top:5px; }
.ct-kim { position:absolute; top:-4px; width:3px; height:17px; border-radius:2px;
          background:var(--fg); box-shadow:0 0 0 2px var(--card);
          transform:translateX(-50%); }
.ct-moc { position:relative; height:14px; margin-top:3px; }
.ct-moc span { position:absolute; transform:translateX(-50%); font-size:9.5px;
               color:var(--muted); white-space:nowrap; }
.ct-moc span.dau { left:0; transform:none; }
.ct-moc span.cuoi { transform:translateX(-100%); }

/* Mau chu theo muc canh bao — dung chung voi thang o tren */
.mucchu.ok   { color:var(--on); }
.mucchu.vang { color:#a16207; }
.mucchu.cam  { color:#c2410c; }
.mucchu.do   { color:#991b1b; }
:root[data-theme="toi"] .mucchu.vang { color:#facc15; }
:root[data-theme="toi"] .mucchu.cam  { color:#fb923c; }
:root[data-theme="toi"] .mucchu.do   { color:#f87171; }

/* ── Hai bieu do lay tu SolarBox ───────────────────────────────────── */
.bdthanh { display:flex; flex-wrap:wrap; gap:8px; align-items:center;
           justify-content:space-between; margin-bottom:10px; }
.bdthanh .seg { flex:1 1 240px; }
.bdngay { display:flex; align-items:center; gap:6px; }
.bdngay button.sm { min-width:34px; padding:0 9px; font-size:17px; line-height:1; }
.bdngay button.sm:disabled { opacity:.35; }
.bdngay input[type="date"] { min-height:40px; padding:0 9px; font-size:13px;
       border:1px solid var(--line); border-radius:9px; background:var(--card);
       color:var(--fg); font-family:inherit; }
/* Chart.js can mot khung co chieu cao that de tu co gian theo be ngang */
.bdkhung { position:relative; height:260px; }
@media (min-width:700px) { .bdkhung { height:320px; } }

/* ── Khoi BMS: dai dau mo phong (hoc cach SolarBox) ─────────────────── */
.bmstop { display:flex; align-items:center; justify-content:center;
          gap:2px; margin:10px 0 14px; }
.bcuc { flex:0 0 84px; text-align:center; }
.btron { width:52px; height:52px; margin:0 auto 6px; border-radius:50%;
         background:var(--card); border:2px solid var(--line);
         display:flex; align-items:center; justify-content:center; }
.btron img { width:26px; height:26px; object-fit:contain; }
.btron.bat { border-color:var(--c-bat); }
.bten { font-size:11.5px; color:var(--muted); }
.btt { font-size:12px; font-weight:800; margin-top:2px; }
.btt.on { color:var(--on); } .btt.off { color:var(--off); }
.bw { font-size:15px; font-weight:800; font-variant-numeric:tabular-nums;
      margin-top:2px; }
.bnoi { flex:1 1 40px; max-width:110px; height:56px; }
.bnoi path { stroke-dasharray:9 7; }
/* Hai duong deu duoc VE theo dung chieu nang luong chay — trai: tam pin ->
   vong SoC (nap), phai: vong SoC -> tai (xa) — nen ca hai chay xuoi.
   Lop `dao` chi de lat gradient mau, khong dung cho chieu chuyen dong. */
.bnoi.chay path { animation:noiChay .8s linear infinite; }
@keyframes noiChay { to { stroke-dashoffset:-16; } }

/* Vong SoC */
.vsoc { flex:0 0 128px; width:128px; height:138px; }
.vsoc .nen { fill:none; stroke:var(--soft); stroke-width:9; }
.vsoc .tri { fill:none; stroke:var(--c-soc); stroke-width:9;
             stroke-linecap:round; transition:stroke-dashoffset .6s ease; }
.vsoc text { text-anchor:middle; font-family:inherit; }
.vsoc .l { font-size:12px; fill:var(--muted); }
.vsoc .s { font-size:26px; font-weight:800; fill:var(--c-soc);
           font-variant-numeric:tabular-nums; }
.vsoc .a { font-size:11px; fill:var(--muted); font-variant-numeric:tabular-nums; }

/* Cac o so lieu, vach mau nam trong day o */
.btiles { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (min-width:760px) { .btiles { grid-template-columns:repeat(3,1fr); } }
.btile { background:var(--card); border:1px solid var(--line); border-radius:11px;
         padding:9px 11px 7px; text-align:center; min-width:0; }
.bt-ten { font-size:11px; color:var(--muted); }
/* Con so chinh cua o pin: XUONG DONG chu dung cat.
   Ban quet nghiem thu 04/10/2026 bat duoc o 320 px dong "51.1 V · -67.7 A"
   bi cat cut — hai so dinh nhau thi het be ngang. Cat mot con so do dien ap
   thi no thanh con so khac, nguy hon la khong hien. */
.bt-tri { font-size:16px; font-weight:800; margin-top:2px;
          font-variant-numeric:tabular-nums; white-space:normal;
          overflow-wrap:anywhere; line-height:1.2; }
/* Dong phu xuong hang thay vi cat cut — cat mat chu quan trong nhu gioi han
   dong hay so chu ky con lai thi o do coi nhu vo nghia. */
.bt-phu { font-size:10px; color:var(--muted); margin-top:1px; line-height:1.3; }
.btile .ct-thanh { margin-top:7px; height:7px; }
.btile .ct-moc { height:12px; }
/* Moc trong o hep phai nho lai, neu khong nhan cuoi se de len nhan ke cuoi */
.btile .ct-moc span { font-size:7.5px; }
.btile .ct-moc span.cuoi { transform:translateX(-100%); }
.btile .ct-kim { top:-3px; height:13px; }

@media (max-width:430px) {
  .bcuc { flex-basis:70px; }
  .btron { width:44px; height:44px; }
  .vsoc { flex-basis:106px; width:106px; height:116px; }
  .bnoi { flex-basis:20px; height:44px; }
}

/* ── Cong tac gat (che do tu dong) ─────────────────────────────────── */
/* Num dat TUYET DOI theo `left`, khong dung flex/margin. Ly do: Safari ep can
   giua noi dung cua <button> nen margin cua phan tu con khong an, va :active
   tren cam ung con bam lai sau khi tha tay neu dung transform. */
button.gat { position:relative; display:block; flex:none; padding:0;
             width:52px; height:30px; min-height:30px;
             border-radius:999px; border:0; background:var(--off);
             box-shadow:inset 0 1px 2px rgba(0,0,0,.12); cursor:pointer;
             appearance:none; -webkit-appearance:none;
             transition:background .2s ease; }
button.gat .num { position:absolute; top:3px; left:3px;
             width:24px; height:24px; border-radius:50%; background:#fff;
             box-shadow:0 1px 3px rgba(0,0,0,.28);
             transition:left .2s cubic-bezier(.4,0,.2,1); }
button.gat.bat { background:var(--on); }
button.gat.bat .num { left:25px; }
button.gat:disabled { opacity:.5; cursor:default; }

/* ── Dong ho gio chay hom nay tren tung o cong tac ──────────────────── */
.sw .gio { font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums;
           margin-top:2px; }
.sw .gio.du { color:var(--on); font-weight:700; }
.sw .thanhgio { display:block; width:100%; height:3px; border-radius:2px;
                background:var(--soft); overflow:hidden; margin-top:3px; }
.sw .thanhgio i { display:block; height:100%; background:var(--accent);
                  border-radius:2px; transition:width .5s ease; }
.sw .thanhgio.du i { background:var(--on); }
/* Thoi gian nhap theo dang HH:MM dung chung kieu voi cac o nhap khac */
/* iOS/WebKit: input time co be rong noi tai, KHONG tu co theo cot luoi ->
   tran sang cot ben canh ("giao dien nat"). Ep chiem dung be rong o. */
input[type="time"] { font-variant-numeric:tabular-nums; width:100%;
                     min-width:0; box-sizing:border-box;
                     -webkit-appearance:none; appearance:none; }
/* Tam nghi vi ngoai khung gio: num nam ben trai nhu khi tat, nhung ranh mau
   ho phach de phan biet voi "nguoi dung da tat han". */
button.gat.nghi { background:var(--warn); }

/* ── Cua so bieu do bat len khi bam vao o BMS ───────────────────────── */
.lopphu { position:fixed; inset:0; z-index:60; display:flex;
          align-items:center; justify-content:center; padding:14px;
          background:rgba(10,14,18,.55); backdrop-filter:blur(2px); }
.lopphu[hidden] { display:none; }
.hopbd { background:var(--card); border:1px solid var(--line); border-radius:14px;
         padding:14px; width:100%; max-width:760px; max-height:92vh;
         overflow:auto; box-shadow:0 18px 50px rgba(0,0,0,.28); }
.hopbd-dau { display:flex; align-items:center; justify-content:space-between;
             gap:10px; margin-bottom:10px; }
.hopbd-dau span { font-size:14.5px; font-weight:700; }
.hopbd .seg { margin-bottom:10px; }
.hopbd .bdkhung { height:300px; }
@media (max-width:560px) { .hopbd .bdkhung { height:250px; } }

/* O bam duoc: hien con tro va mot dau hieu nho o goc nhan */
.btile.bam, .cells.bam { cursor:pointer; }
.bd-dh { margin-left:5px; font-size:9px; color:var(--accent); vertical-align:1px; }
@media (hover:hover) {
  .btile.bam:hover { border-color:var(--accent); }
  .cells.bam:hover { outline:1px solid var(--accent); outline-offset:3px;
                     border-radius:8px; }
}
.btile.bam:focus-visible, .cells.bam:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }

/* Dong ho in tren man hinh cua anh bien tan, hoc cach SolarBox */
/* Nam tren o TRANG cua anh bien tan (anh PNG nen khong doi theo chu de),
   nen mau chu phai co dinh toi — dung var(--fg) se tang hinh o giao dien toi. */
.dongho { font-size:10.2px; font-weight:700; fill:#2b3138;
          font-variant-numeric:tabular-nums; letter-spacing:.02em; }

/* ── Nhat ky su co (trang Cai dat) ─────────────────────────────────── */
/* Moi su co la mot the co VACH MAU ben trai theo muc do — nhin luot la biet
   ngay co dong do nao khong, khong phai doc tung chu. */
/* GON LAI 25/08: chu nha *"nhat ky su co ... hien nay no trai dai het phan
   cai dat"*. Truoc day 20 su co x ~60px = ~1.200px, ma tep giu toi 500 dong
   nen no chi dai them. Nay moi su co la MOT DONG; chi tiet giau trong the
   <details>, bam vao moi mo. Ca danh sach nam trong khung cuon cao toi da
   340px nen phan Cai dat ben duoi luon o ngay tam mat. */
.sclist { display:flex; flex-direction:column; gap:5px;
          max-height:340px; overflow-y:auto; padding-right:4px; }
.scmuc { border:1px solid var(--line); border-left:4px solid var(--off);
         border-radius:8px; padding:5px 9px; background:var(--soft); }
.scmuc.nguy { border-left-color:var(--err); }
.scmuc.canh { border-left-color:var(--warn); }
.scmuc.het  { border-left-color:var(--on); }
.scdau { display:flex; align-items:baseline; gap:8px; flex-wrap:nowrap;
         cursor:default; }
/* Bo tam giac mac dinh cua <details> — vach mau ben trai da du de nhan biet */
details.scmuc > summary { list-style:none; cursor:pointer; }
details.scmuc > summary::-webkit-details-marker { display:none; }
details.scmuc > summary::after { content:'⌄'; margin-left:6px;
                                 color:var(--muted); font-size:12px; }
details.scmuc[open] > summary::after { content:'⌃'; }
/* Tieu de mot dong, dai qua thi cat bang dau ba cham — khong xuong dong lam
   the cao gap doi. Mo the ra thi doc duoc day du o phan chi tiet. */
.scdau b { font-size:13.5px; overflow:hidden; text-overflow:ellipsis;
           white-space:nowrap; min-width:0; }
.scgio { margin-left:auto; color:var(--muted); font-size:11.5px;
         font-variant-numeric:tabular-nums; white-space:nowrap; }
.scct { color:var(--muted); font-size:12.5px; margin-top:5px;
        white-space:pre-wrap; }
.scrong { color:var(--muted); font-size:13px; padding:6px 2px; }

/* ── Hoa tiet mat tam pin phu tren ba khung PV ─────────────────────── */
/* Vien o cell dam hon mot chut, hai thanh dan trong o thi rat mo — dam qua
   se doc mat con so cong suat nam de len tren. */
.pin-vien { stroke:var(--c-pv); stroke-width:.55; opacity:.12; fill:none; }
.pin-dan  { stroke:var(--c-pv); stroke-width:.4; opacity:.055; fill:none; }
.opin { pointer-events:none; }

/* Canh bao mat dien luoi — treo tren dau, dinh man hinh khi cuon */
/* `display:flex` duoi day la bo chon theo LOP nen thang quy tac
   [hidden]{display:none} cua trinh duyet — khong co dong nay thi thuoc tinh
   `hidden` vo tac dung va bang canh bao luon hien. Dong nay co do uu tien
   cao hon (.lop + [thuoc-tinh]) nen thang, khong phu thuoc thu tu. */
.matdien[hidden] { display:none; }

/* Ghim cung vao dinh man hinh — `sticky` bi tuot khi cuon nen khong dung */
.matdien { position:fixed; top:0; left:0; right:0; z-index:200;
           display:flex; align-items:center; gap:11px; background:#7f1d1d;
           color:#fff; box-shadow:0 2px 12px rgba(0,0,0,.35);
           padding:12px 16px calc(12px);
           padding-top:calc(12px + env(safe-area-inset-top, 0px)); }
.matdien { justify-content:center; text-align:center; }
.matdien b { font-size:15px; line-height:1.3; }
.mdcham { flex:0 0 auto; width:12px; height:12px; border-radius:50%;
          background:#fca5a5; box-shadow:0 0 0 0 rgba(252,165,165,.75);
          animation:mdNhap 1.5s ease-out infinite; }
@keyframes mdNhap {
  0%   { box-shadow:0 0 0 0 rgba(252,165,165,.75); }
  70%  { box-shadow:0 0 0 11px rgba(252,165,165,0); }
  100% { box-shadow:0 0 0 0 rgba(252,165,165,0); }
}
/* O Luoi phai tu no gay chu y, khong chi doi bang canh bao o tren dau */
body.co-matdien .zone.grid { outline:2px solid #b91c1c; outline-offset:-2px;
                             animation:luoiTho 1.6s ease-in-out infinite; }
@keyframes luoiTho {
  0%, 100% { outline-color:#b91c1c; }
  50%      { outline-color:#fca5a5; }
}
/* Trong so do: bieu tuong cot dien chop tat, khung do lan toa nhu song */
body.co-matdien #anhLuoi { animation:luoiChop 1.1s steps(1, end) infinite; }
@keyframes luoiChop { 0%, 54% { opacity:1; } 55%, 100% { opacity:.18; } }
body.co-matdien #oLuoi { stroke:#ef4444; stroke-width:2.5;
                         animation:luoiLanToa 1.6s ease-out infinite; }
@keyframes luoiLanToa {
  0%   { stroke-width:2.5; stroke-opacity:1; }
  70%  { stroke-width:6;   stroke-opacity:0; }
  100% { stroke-width:2.5; stroke-opacity:0; }
}
/* Pin rat yeu (<20%): vach duoi cung nhay do. Lop phu la anh 7 (vach trang)
   nam tren anh 6 (vach do) — chop tat lop phu thi vach cuoi doi do/trang.
   Mac dinh AN han de cac muc pin khac khong bi anh 7 de len. */
#batNhay { opacity:0; }
#batNhay.nhay { animation:pinNhay 1s steps(1, end) infinite; }
@keyframes pinNhay { 0%, 49% { opacity:0; } 50%, 100% { opacity:1; } }

/* Xa manh (dong xa vuot nguong): mo dam CA bieu tuong pin. Dung nhip khac va
   kieu chuyen muot, de khong lan voi kieu chop dut khoat cua vach cuoi o tren
   — hai hieu ung co the cung chay khi pin vua yeu vua bi rut dong lon. */
#batNhom.xamanh { animation:pinXaManh .9s ease-in-out infinite; }
@keyframes pinXaManh { 0%, 100% { opacity:1; } 50% { opacity:.28; } }

/* Pin gan DAY (>97%) van dang sac: nhap nhay nhe ca bieu tuong, nhip cham hon
   xa manh de khong nham. Bao "sap day, sap ngung sac". */
#batNhom.daysac { animation:pinDaySac 1.4s ease-in-out infinite; }
@keyframes pinDaySac { 0%, 100% { opacity:1; } 50% { opacity:.45; } }

@media (prefers-reduced-motion: reduce) {
  .mdcham, body.co-matdien .zone.grid, body.co-matdien #anhLuoi,
  body.co-matdien #oLuoi { animation:none; }
  /* Khong nhay nua nhung van phai thay mau do canh bao -> giu anh 6 */
  #batNhay.nhay { animation:none; opacity:0; }
  /* Bo nhap nhay khi xa manh; con so cong suat van to do nen khong mat canh bao */
  #batNhom.xamanh { animation:none; opacity:1; }
  #batNhom.daysac { animation:none; opacity:1; }
}

/* Dai thong so cai dat bien tan trong the Trang thai */
#btStrip { margin-top:14px; }
.btts { font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--muted);
        margin-bottom:7px; }
.btkv { display:flex; flex-wrap:wrap; gap:6px 8px; }
.btkv span { display:inline-flex; align-items:baseline; gap:6px;
             background:var(--soft); border-radius:8px; padding:5px 10px;
             font-size:12.5px; }
.btkv i { font-style:normal; color:var(--muted); font-size:11.5px; }
.btkv em { font-style:normal; font-size:13px; line-height:1; }

/* Man hep: chip tung dong mot rat ton cho — chuyen sang luoi 2 cot gon,
   moi o nhan trai / gia tri phai, chu nho lai mot nac */
@media (max-width:560px) {
  .btkv { display:grid; grid-template-columns:1fr 1fr; gap:5px 7px; }
  /* Luoi 3 cot trong tung o: icon — nhan — gia tri. Truoc dung
     space-between nen cai nhan bi day di day lai theo do dai gia tri, nhin
     nhu chu khong thang hang (chu nha bat duoc 16/08). Cot giua an het cho
     thua nen nhan luon bat dau cung mot cho, gia tri luon sat mep phai. */
  .btkv span { display:grid; grid-template-columns:auto 1fr auto;
               align-items:baseline; padding:5px 9px;
               font-size:11.5px; gap:4px; min-width:0; }
  .btkv b { text-align:right; }
  /* Nhan DAI thi cho XUONG DONG, dung cat bot bang dau "..." — ten o nay
     phai doc duoc tron ven de tra sang man hinh bien tan (chu nha 04/10).
     Cat cut mot cai ten thi no thanh ten khac. */
  .btkv i { font-size:10.5px; white-space:normal; overflow-wrap:anywhere;
            line-height:1.25; }
  .btkv span { align-items:center; }
  .btkv b { white-space:nowrap; }
  .btkv em { font-size:11.5px; }
  .btts { margin-bottom:6px; }
  /* Danh sach dieu kien va cac khoi trang thai cung bo t lai */
  .dklist { gap:4px; margin-top:7px; }
  .dk, .dk b { font-size:12px; }
  .escnote { font-size:12.5px; padding-left:10px; margin-top:10px; }
}
.btkv b { font-variant-numeric:tabular-nums; }

/* Bang canh bao vang (khoa chinh tay khi tu dong dang chay) */
.banner.warn { background:color-mix(in srgb,var(--warn) 14%,transparent);
               color:var(--warn); padding:10px 13px; border-radius:9px;
               font-size:13.5px; margin-bottom:10px; }

/* ── Trang Cai dat: tieu de nhom + thanh nhay nhanh ─────────────────── */
.sechead { font-size:13px; font-weight:800; letter-spacing:.07em;
           text-transform:uppercase; color:var(--muted);
           margin:26px 2px 10px; padding-top:6px; }
.sechead:first-of-type { margin-top:10px; }
/* Treo dinh man hinh — cuon toi dau cung nhay nhanh duoc */
.secnav { display:flex; flex-wrap:wrap; gap:6px; position:sticky;
          top:env(safe-area-inset-top, 0px);   /* ne tai tho iPhone */
          z-index:60; padding:10px 0;
          background:color-mix(in srgb, var(--bg) 92%, transparent);
          backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
          margin-bottom:8px; }
/* May tinh: chip xuong dong; dropdown an */
.secchon { display:none; }
/* Man hep: chip nho kho bam — thay bang MOT dropdown to, de cham */
@media (max-width:560px) {
  .secnav a { display:none; }
  .secchon { display:block; width:100%; font-size:15px; padding:12px 14px;
             border-radius:10px; border:1px solid var(--line);
             background:var(--card); color:var(--fg); }
}
/* O TIM tren trang Cai dat (chu nha 19/09/2026: *"cai dat roi ram deo biet
   sua o dau luon"*). Thanh `.secnav` la flex: man HEP thi `.secnav a` bi
   `display:none`, chi con moi `.secchon`. Neu tha mot <input> vao day ma
   khong dat luat thi no dung canh dropdown va bop dropdown lai — dung lai
   canh chat choi ma chu nha vua keu. Nen man hep cho no chiem tron mot hang
   nhu `.secchon`. */
.timcd { flex:1 1 220px; min-width:0; font-size:13px; padding:7px 10px;
         border-radius:8px; border:1px solid var(--line);
         background:var(--card); color:var(--fg); }
.timcd-bao { align-self:center; font-size:12px; color:var(--muted); }
@media (max-width:560px) {
  .timcd { flex:1 1 100%; width:100%; font-size:15px; padding:12px 14px;
           border-radius:10px; }
}
.secnav a.noibat { border-color:var(--accent); color:var(--accent); }
/* Chip DANG XEM: bam xong ma khong biet minh dang o muc nao thi cung nhu cu. */
.secnav a.dangXem { background:var(--accent); color:#fff; border-color:var(--accent); }
/* Bang "he dang nghi cho nang" ngay tren so do dong nang luong.
   Nha bam tai khong co pin: ban dem so do trong tron, khong noi ro thi khach
   tuong he hong. */
#dangNghi { margin:8px 0 4px; padding:10px 12px; border-radius:10px;
            background:var(--soft); border:1px solid var(--line);
            font-size:13.5px; line-height:1.5; }
/* Neo khong bi thanh treo che mat dau the */
.sechead, .card { scroll-margin-top:96px; }
.secnav a { font-size:12.5px; text-decoration:none; color:var(--fg);
            background:var(--card); border:1px solid var(--line);
            border-radius:999px; padding:6px 12px; white-space:nowrap; }
.secnav a:active { background:var(--soft); }
html { scroll-behavior:smooth; }

/* ---- Bieu do du bao nang (bang Trang thai) ----
   Nguoi dung chon kieu nay 14/08 vi ban toan chu "lam chu qua". Mau theo
   CUONG DO nang: r4 nang gat -> r1 it nang (xanh). Xanh cung la dau hieu
   "hom do sac du them", nen mau phai khop voi quyet dinh cua ke hoach. */
.db-tom { font-size:13.5px; margin-bottom:9px; }
.db-tom .n { font-weight:700; color:var(--fg); }
.db-tom .db-phu { color:var(--muted); }
.db-hang { display:flex; gap:5px; align-items:flex-end; }
/* Dong keu len khi ba noi du bao vench nhau qua nguong — mau canh bao chu
   khong phai mau loi: so van dung duoc, chi la kem chac hon moi ngay. */
.db-lech { margin-top:9px; padding:7px 9px; border-radius:8px; font-size:12.5px;
           color:var(--warn); line-height:1.45;
           background:color-mix(in srgb,var(--warn) 12%,transparent); }
/* `.escnote b` la kieu tieu de (display:block, viet hoa) — trong dong nay chu
   dam chi de nhan con so, phai keo ve inline khong thi moi so xuong mot dong. */
.db-lech b { display:inline; font-size:inherit; color:inherit; margin:0;
             text-transform:none; letter-spacing:0;
             font-variant-numeric:tabular-nums; }
.db-ngay { flex:1; text-align:center; padding:7px 2px 5px; border-radius:9px; }
.db-ic { font-size:15px; line-height:1; }
.db-so { font-size:12.5px; font-weight:700; margin:3px 0 4px;
         font-variant-numeric:tabular-nums; }
.db-cot { height:34px; display:flex; align-items:flex-end; justify-content:center; }
.db-cot i { display:block; width:72%; border-radius:4px 4px 0 0; }
.db-thu { font-size:10.5px; color:var(--muted); margin-top:5px; }
/* VANG = ngay du nang (khong sac du); XANH = duoi nguong, hom do sac du
   them. Mau noi dung QUYET DINH, dam nhat noi cuong do. */
.db-ngay.r4 .db-cot i { background:linear-gradient(180deg,#f97316,#f9731655); }
.db-ngay.r3 .db-cot i { background:linear-gradient(180deg,var(--warn),#f59e0b55); }
.db-ngay.r2 .db-cot i { background:linear-gradient(180deg,#7dd3fc,#7dd3fc55); }
.db-ngay.r1 .db-cot i { background:linear-gradient(180deg,var(--c-bat),#0284c755); }
.db-ngay.dat { background:#ffffff0d; box-shadow:inset 0 0 0 1px var(--line); }
.db-ngay.dat .db-thu { color:var(--fg); font-weight:700; }

/* Nut quay ve MUC KHUYEN CAO, dat canh tieu de tung muc trong trang Cai dat.
   Muc khuyen cao = con so da qua kich ban kiem thu, khong phai so go tay thu
   (yeu cau chu nha 15/08/2026). Bam chi DIEN vao o nhap, chua luu. */
/* min-height:42px cua the <button> chung lam nut nay cao gap doi dong tieu de,
   nhin nhu bi hat len tren — phai tra ve 0 va can giua theo chieu doc. */
.nutkc { background:none; border:0; padding:2px 4px; margin-left:6px;
         min-height:0; box-shadow:none; border-radius:6px;
         display:inline-flex; align-items:center; justify-content:center;
         color:var(--muted); cursor:pointer; vertical-align:-3px;
         touch-action:manipulation; }
.nutkc svg { width:16px; height:16px; display:block; }
.nutkc:hover { color:var(--accent); }
.nutkc:disabled { opacity:.4; cursor:default; }

/* Thanh chon nhom nguong O nha / Di vang trong trang Cai dat. Truoc day hai
   nhom trai dai chong len nhau, phai cuon rat lau moi het (yeu cau 15/08). */
.segnhom { margin:10px 0 6px; }
.segnhom button { flex:1; font-size:14px; padding:9px 6px; }

/* ---- Trang Cai dat tren DIEN THOAI ----
   Chu nha bao 15/08: "cac o nhay lon xon", "mat khau manh tao xong thi khuat
   chu", "toi da noi la phai toi uu cho mobile". Goc la `.grid2` giu nguyen HAI
   cot o moi be ngang: tren may 390px moi o chi con ~170px — chuoi 20 ky tu bi
   cat, va nhom le so o thi mo coi mot minh mot hang. Duoi 560px xep MOT cot. */
@media (max-width:560px) {
  .grid2 { grid-template-columns:1fr; }
  .foot { gap:8px; }
  .foot .sm { flex:1 1 auto; min-height:44px; }   /* du to de cham tay */
}
/* Luoi 3 cot tren dien thoai da xuong 2 cot (dong 210). O le cuoi cung dung
   nam mot minh nua o hang cuoi — keo cho no chiem tron be ngang. */
@media (max-width:560px) {
  .grid3 > *:last-child:nth-child(odd) { grid-column:1 / -1; }
}

/* O chiem tron be ngang du dang nam trong luoi 2 cot */
.fld.rong { grid-column:1 / -1; }

/* Mat khau vua sinh — hien mot dong rieng, doc va chep duoc het */
.mkhien { margin:6px 0 2px; padding:10px 12px; border-radius:10px;
          background:var(--soft); border:1px dashed var(--line);
          font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
          font-size:15px; letter-spacing:.5px; word-break:break-all;
          user-select:all; }

/* Tieu de NHOM CON trong mot the cai dat. The "Quan ly pin ban dem" co 23 o
   nam lien tuc, chu nha bao 15/08: "hay tach cac cai dat theo nhom de de dang
   dieu chinh tranh roi". */
.nhomcon { margin:18px 0 2px; padding-top:12px; border-top:1px solid var(--line);
           font-size:12px; font-weight:700; letter-spacing:.05em;
           text-transform:uppercase; color:var(--muted); }
/* Nhom dau tien chi can sat len tren mot chut — KHONG xoa
   padding nua, khong thi vet mau cua rieng no bi det lai. */
.card > .nhomcon:first-of-type { margin-top:10px; }

/* Bang nho trong o giai thich — vi du bang "nang/it nang/mua x o nha/di vang" */
.bang-nho { margin:8px 0 2px; border-collapse:collapse; font-size:13px; }
.bang-nho th, .bang-nho td { padding:4px 10px; border:1px solid var(--line);
                             text-align:center; }
.bang-nho th { color:var(--muted); font-weight:600; }

/* Vung thao tac can can nhac — tach han ra khoi cac nut thuong */
.vungnguy { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.vungnguy-ten { font-size:11px; letter-spacing:.06em; text-transform:uppercase;
                color:var(--muted); margin-bottom:8px; }
.sm.nguy { color:var(--err); border-color:var(--err); }
/* Nguon du bao da bi loai vi doan bay — van hien nhung mo di */
.db-loai { opacity:.55; text-decoration:line-through; }


/* ── Nhà không có pin ────────────────────────────────────────────────────
   Chủ nhà 30/08/2026: *"biết khách dùng biến tần không có pin thì những tính
   năng liên quan đến pin cần ẩn hết đi"*.

   Một công tắc duy nhất: `<body class="khong-pin">`. Mọi thứ thuộc về pin chỉ
   cần mang lớp `can-pin` là tự biến mất. Thêm tính năng pin mới thì đánh dấu
   là xong, không phải nhớ sửa chỗ nào khác.

   `!important` ở đây là cố ý: nhiều chỗ đặt `style="display:flex"` ngay trong
   thẻ, không mạnh tay thì ẩn không nổi. */
body.khong-pin .can-pin { display: none !important; }

/* ── Dau pham vi tren trang quan tri ──────────────────────────────────────
   Chu nha 30/08/2026: *"cach khoanh vung cua ban khien toi khong biet dau la
   cau hinh chung va dau la cau hinh rieng cho tung nha"*. Nen moi the deu
   deo mot dau, va o dau trang co mot the noi ro dang mo hop cua ai. */
.pvi { display:inline-block; font-size:11px; font-weight:600; line-height:1;
       padding:4px 8px; border-radius:999px; border:1px solid transparent;
       vertical-align:middle; white-space:nowrap; }
.pvi-rieng { background:rgba(56,189,248,.14); border-color:rgba(56,189,248,.45);
             color:#0369a1; }
.pvi-chung { background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.5);
             color:#a16207; }
@media (prefers-color-scheme: dark) {
  .pvi-rieng { color:#7dd3fc; }
  .pvi-chung { color:#fcd34d; }
}
.card h2 .pvi { margin-left:8px; }

/* Muc trong danh muc nha o trang quan tri. */
.mucNha { cursor:pointer; padding:10px 12px; border:1px solid var(--line);
          border-radius:10px; margin-bottom:8px; background:var(--soft); }
.mucNha:hover { border-color:var(--muted); }
.mucNha.dangChon { border-color:#22c55e; border-width:2px; padding:9px 11px; }
.mucNha .hint { margin-top:2px; }

/* Bon nhom tren trang quan tri. Gap lai de mo trang ra chi thay thu can dung.
   Chu nha 30/08/2026: *"lon xon loan xi ngau"* — dung, muoi mot the mot trang. */
details.nhom { margin:18px 0 6px; }
details.nhom > summary { cursor:pointer; font-size:15px; letter-spacing:.04em;
                         padding:8px 0; text-transform:uppercase; }
details.nhom > summary::marker { color:var(--muted); }
details.nhom[open] > summary { border-bottom:1px solid var(--line);
                               margin-bottom:4px; }

/* Bang tinh nang tren trang quan tri. Doc tren dien thoai nen cho cuon ngang
   trong chinh no, dung de ca trang bi keo ngang. */
table.bang { width:100%; border-collapse:collapse; font-size:14px; }
table.bang th, table.bang td {
  text-align:left; padding:8px 10px; border-bottom:1px solid var(--line);
  vertical-align:top;
}
table.bang th { font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; }
/* KHONG cam xuong dong theo VI TRI cot nua.
   Loi that 02/09/2026: luat cu la `td:nth-child(2,3,4) { nowrap }` — dat tu
   hoi bang chi co may cot ngan. Bang "Link da cap" co cot 3 la cau nhac dai
   ("Nap bo ESP32-C3 SuperMini nha chu nha"), khong xuong dong duoc nen bang
   phinh ngang va cot cuoi "Tinh trang" bi cat mat. Chu nha chup man hinh:
   *"hay kiem tra lai khuat chu kieu nay"*.
   Vi tri cot thi moi bang mot khac; muon cam xuong dong thi danh dau TUNG O
   bang class `lien` — o do tu biet minh chua gi. */
table.bang td { overflow-wrap:anywhere; }
table.bang td.lien { white-space:nowrap; }

/* ---- BANG tren DIEN THOAI: thoi bay thanh bang ----
   Chu nha 19/09/2026 21:26, kem anh chup bang "Cong tac da khai" bi keo ngang:
   *"deo ai hien thi kieu truot ngang the nay tren dien thoai"*.

   Do bang trinh duyet o 390px: bang can 683px. Bang co TAM cot, cot cuoi xep
   5 nut. Khong cach nao nhet 8 cot vao 390px.

   ⚠ Cai bang nay da doi kieu BA LAN, lan nao cung chi xoay giua "cho xuong
   dong" va "cam xuong dong":
     1. cam theo VI TRI cot  -> bang phinh, cot cuoi bi cat   -> anh chup
     2. overflow-wrap:anywhere -> nut vo moi dong mot chu cai -> anh chup 19/09
     3. td.lien cho o nut      -> cot gian that -> TRUOT NGANG -> anh chup lai
   `chay_thu_kho_ban` da ghi bai hoc tu 05/09: "Chong loi cu thi de loi moi;
   phai do ca hai dau." Nen lan nay KHONG van cai num do nua — bo han cot.

   Duoi 560px: moi dong thanh MOT THE, moi o mot hang, nhan cot in ngay tren
   gia tri bang `data-nhan`. Het cot thi het chuyen tranh nhau be ngang, va
   ca hai loi cu cung chet.

   Giu nguyen the <tr>/<td> la co y: `tools/chay_thu_bang_cong_tac.py` doc ket
   qua bang `split('<tr>')` va 5 bai kiem cua no phai xanh nguyen. */
@media (max-width:560px) {
  table.bang-the, table.bang-the tbody, table.bang-the tr, table.bang-the td {
    display:block; width:100%;
  }
  table.bang-the thead { display:none; }
  /* Chu nha 19/09 22:10, kem anh chup khoi cong tac: *"sao may khong
     dong 1 vien mau cai nao cung nhom"*, *"de biet khung nao cua cai nao ma
     chinh"*. Vien cu 1px mau `--line` — o nen toi (#2a3037) gan nhu trung
     nen, nen khoi no dinh lien khoi kia. Dong han thanh KHUNG: vet mau 4px
     ben trai (dung loi `.chcard` da dung tu truoc), them mot bac nen rieng,
     va gian khoang cach giua cac khoi ra. */
  table.bang-the tr { margin:0 0 14px; padding:10px 12px;
    border:1px solid var(--line); border-left:4px solid var(--accent);
    border-radius:10px; background:var(--khoi); }
  /* O DAU TIEN la ten cua khoi ("Dung cho: BNL Tang 3") — in to len lam tieu
     de thi nhin phat biet khung nay la cua cai nao. Nhan `data-nhan` co co
     chu 11px rieng nen van nho, chi gia tri to len. */
  table.bang-the td:first-child { font-size:15px; font-weight:650;
    color:var(--fg); }
  table.bang-the td { padding:4px 0; border-bottom:0; }
  table.bang-the td + td { border-top:1px dashed var(--line); padding-top:6px;
    margin-top:6px; }
  table.bang-the td[data-nhan]::before {
    content:attr(data-nhan) ": "; color:var(--muted); font-size:11px;
    letter-spacing:.06em; text-transform:uppercase; }
  /* Het cot roi thi khong con gi de cam xuong dong nua — tra lai binh thuong,
     khong thi o nut lai gian ra keo ca the di. */
  table.bang-the td.lien { white-space:normal; }
}

/* URL dai trong o giai thich: phai be duoc xuong dong. Do 19/09 o kho 320px:
   URL Telegram can 349px trong khung 320px, day ca khoi ra ngoai man hinh. */
.hint code { overflow-wrap:anywhere; }

/* Luoi 3 cot: duoi 430px thi mot cot. Do 19/09: o kho hep no van giu HAI cot
   (~150px moi o) nen nhan dai 34-38 ky tu ("Phao dem nguoc rieng kenh (giay)")
   bi be lam 2-3 dong, va chinh no tu cuon ngang 289px trong khung 320px. */
@media (max-width:430px) {
  .grid3 { grid-template-columns:1fr; }
}

/* Nut ro-le: CHU KHONG DOI, chi doi mau.
   Chu nha 31/08/2026: *"dung lam kieu thay chu trong nut vi nhu the tren dien
   thoai se rat xau"*. Chu doi -> nut doi chieu rong -> ca hang nut nhay moi
   lan bam. Mau thi noi du y ma khong xe dich gi. */
.nutrole { min-width:104px; }
.nutrole.bat {
  background:#16a34a; border-color:#16a34a; color:#fff; font-weight:700;
}
.nutrole.bat:hover { background:#15803d; border-color:#15803d; }

/* Dong "dang doi lenh" nam ngay trong the kenh vua bam — dung de tren dau
   trang, nguoi bam o duoi khong nhin thay (loi that 31/08/2026). */
.dangcho { margin-top:8px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ── O nhap gia lap chong len so do ────────────────────────────────────
   Chi hien khi nguon la "Nhap tay". Dat ngoai SVG nen chu khong bi phong to
   thu nho theo khung. */
.flowwrap { position:relative; }
#moPhong { position:absolute; pointer-events:none; }
.mophong { position:absolute; z-index:2; pointer-events:auto; }
.mophong.canh { transform:translateY(-6px); }
.mophong.day  { transform:translateX(-4px); }
.mp-nhan { font-size:11px; color:var(--muted); margin-bottom:2px; }
.mp-hang { display:flex; align-items:center; gap:4px; }
.mophong input[type=range] { width:74px; accent-color:var(--chinh, #2563eb); }
.mophong input[type=number] {
  width:62px; padding:2px 4px; font-size:12px; text-align:right;
  border:1px solid var(--line); border-radius:6px;
  background:var(--card); color:inherit;
}

/* Khoi gia lap phai GON: no chong len so do, tran ra la che mat hinh.
   Xep thanh truot va o so thanh hai dong thay vi mot hang dai. */
.mophong { width:92px; }
.mp-hang { flex-wrap:wrap; gap:3px; }
.mophong input[type=range] { width:88px; }
.mophong input[type=number] { width:56px; }
/* O Nang: dat BEN PHAI o tong, cach ra mot chut. Keo sang trai la no de len
   chinh con so trong o (that 31/08/2026). */
.mophong.canh { transform:translateY(-6px); }
/* Chua cho hai khoi duoi day, khong thi chung de len dong chu ben duoi. */
/* Do duoc 31/08/2026: khoi gia lap cao khoang 88 diem (nhan + thanh
   truot + o so), dat sat day so do nen phai chua du chung ay. */
.flowwrap.cogialap { padding-bottom:96px; }

/* Bang bao dang xem so gia lap. Nhap nhay cham thoi — nhay nhanh qua thi
   doc met ma cung khong ai nhin lau. */
#baoGiaLap {
  text-align:center; font-weight:700; font-size:13px; letter-spacing:.03em;
  color:#b45309; background:#fef3c7; border:1px solid #f59e0b;
  border-radius:10px; padding:7px 10px; margin-bottom:10px;
  animation:nhapNhayGiaLap 1.6s ease-in-out infinite;
}
@keyframes nhapNhayGiaLap { 0%,100% { opacity:1 } 50% { opacity:.45 } }
/* Nguoi bi say khi thay chop tat thi tat hieu ung, van doc duoc chu. */
@media (prefers-reduced-motion:reduce) {
  #baoGiaLap { animation:none; }
}
@media (max-width:430px) {
  .mophong input[type=range] { width:58px; }
  .mophong input[type=number] { width:54px; }
}


/* Huy hieu "ai da bat cai nay" — nam canh ĐANG BẬT / ĐANG TẮT.
   Chu nha 01/09/2026: *"neu bom dang bat bang tay thi thong bao cho khach
   biet la dang bat tay hay tu dong"*.

   Mau khac han hai mau on/off cua huy hieu trang thai: hai thu tra loi hai
   cau hoi khac nhau (dang bat khong / ai bat), de cung mau thi doc luot qua
   tuong la mot. */
.aibat {
  font-size:.66rem; font-weight:800; letter-spacing:.04em;
  padding:3px 8px; border-radius:999px; white-space:nowrap;
  border:1px solid transparent;
}
.aibat.tay { color:#b45309; background:#fef3c7; border-color:#fcd34d; }
.aibat.he  { color:#1d4ed8; background:#dbeafe; border-color:#93c5fd; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aibat.tay {
    color:#fcd34d; background:#78350f33; border-color:#a1620988; }
  :root:not([data-theme="light"]) .aibat.he {
    color:#93c5fd; background:#1e3a8a33; border-color:#1d4ed888; }
}
:root[data-theme="dark"] .aibat.tay {
  color:#fcd34d; background:#78350f33; border-color:#a1620988; }
:root[data-theme="dark"] .aibat.he {
  color:#93c5fd; background:#1e3a8a33; border-color:#1d4ed888; }


/* ── Trang quan tri: dau the co cong cu ────────────────────────────────
   Chu nha 01/09/2026: *"bạn cần thiết kế trang quản trị theo hướng phần mềm
   chuyên nghiệp chứ không phải kiểu liệt kê tạm bợ thế... cái giao diện của
   bạn cực kỳ củ chuối khó dùng"*.

   Dung. Truoc do moi the la mot doan chu dai roi toi mot dong nut — doc het
   moi lam duoc viec. Nay: tieu de mot ben, cong cu mot ben, phan giai thich
   gap lai sau dau "!" cho ai can. */
.tbhead { display:flex; align-items:center; justify-content:space-between;
          gap:12px; flex-wrap:wrap; }
.tbcong { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Huy hieu trang thai trong bang — doc luot qua la thay ngay hang nao can
   dong toi, khong phai do chu. */
.vien { display:inline-block; font-size:11px; font-weight:700;
        letter-spacing:.03em; padding:2px 8px; border-radius:999px;
        border:1px solid transparent; white-space:nowrap; }
.vien.cho  { color:#b45309; background:#fef3c7; border-color:#fcd34d; }
.vien.nhan { color:#15803d; background:#dcfce7; border-color:#86efac; }
/* "Đang phát" — nhãn ĐẶC, chữ trắng trên nền xanh đậm.
   Chủ nhà 05/09/2026: *"cái chữ đang chạy để cái màu khó đọc quá"*. Nhãn ấy
   dùng chung kiểu `.vien.nhan`: chữ xanh #15803d trên nền xanh nhạt #dcfce7,
   tỉ lệ tương phản 4,6:1 — vừa đủ cho chữ THƯỜNG, nhưng đây là chữ 11px in
   đậm nằm cạnh số hiệu bản, nhìn trên màn sáng thì nhoè vào nền.
   Để riêng một lớp thay vì sửa `.vien.nhan`: lớp ấy còn dùng cho nhãn "Đã
   nhận" ở bảng thiết bị, đổi chung là đổi cả chỗ không ai kêu.
   Nền đặc nên đọc được ở cả giao diện sáng lẫn tối, không cần hai bản. */
.vien.dangphat { color:#fff; background:#15803d; border-color:#15803d; }

/* ══ Nút MỞ KHOÁ KHẨN CẤP ══
   Đỏ đặc, chữ trắng: người đang hoảng phải nhìn ra nó trong một giây, và
   phải thấy ngay đây là nút "phá kính". */
/* Khung bao quanh nút cứu: viền đỏ nhạt để mắt bắt được ngay cả khi cả trang
   toàn ô nhập. Luôn hiện, kể cả lúc hệ đang nghỉ — xem ghi chú trong
   `settings.html`. */
.khancapHop { margin:10px 0 14px; padding:10px 12px; border-radius:10px;
              border:1px solid #dc262666; background:#dc26260f; }
.btn.khancap { background:#dc2626; border-color:#dc2626; color:#fff;
               font-weight:800; }
.btn.khancap:hover { background:#b91c1c; border-color:#b91c1c; }

/* ══ Dải tab của thẻ "Các năm" (sản lượng · tiền) ══ */
.tabnam { display:flex; gap:8px; margin:2px 0 12px; flex-wrap:wrap; }
.tabnam[hidden] { display:none; }
.tabnut { padding:6px 14px; border-radius:999px; font-size:13px;
          font-weight:700; cursor:pointer; white-space:nowrap;
          border:1px solid var(--line); background:var(--soft);
          color:var(--muted); min-height:0; box-shadow:none; }
.tabnut[hidden] { display:none; }
.tabnut:hover { color:var(--accent); border-color:var(--accent); }
.tabnut.dangXem { background:var(--accent); border-color:var(--accent);
                  color:#fff; }

/* ══ Hộp báo có bản phần mềm mới (trang Cài đặt) ══
   Đặt màu bằng biến sẵn có nên tự đúng ở cả giao diện sáng lẫn tối. */
#bmNen { position:fixed; inset:0; z-index:90; display:flex;
         align-items:center; justify-content:center; padding:16px;
         background:rgba(15,23,42,.55); }
#bmNen[hidden] { display:none; }
#bmHop { width:min(560px,100%); max-height:86vh; overflow:auto;
         background:var(--card); color:var(--fg); border:1px solid var(--line);
         border-radius:14px; padding:18px 18px 16px;
         box-shadow:0 18px 48px rgba(0,0,0,.35); }
#bmHop h2 { margin:0 0 6px; font-size:19px; }
#bmGhiChu { margin:10px 0; padding:10px 12px; border-radius:8px;
            background:var(--soft); border:1px solid var(--line);
            line-height:1.6; }
/* Khung cảnh báo: viền vàng đậm, chữ đủ tương phản ở cả hai giao diện. */
#bmCanhBao { margin:10px 0 4px; padding:10px 12px; border-radius:8px;
             line-height:1.6; color:#7c2d12; background:#fff7ed;
             border:1px solid #fdba74; }
#bmCanhBao div { margin-top:6px; }
#bmNut { display:flex; gap:10px; justify-content:flex-end; margin-top:14px;
         flex-wrap:wrap; }
#bmNut .bmChinh { background:var(--accent); border-color:var(--accent);
                  color:#fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #bmCanhBao {
    color:#fed7aa; background:#7c2d1233; border-color:#c2410c88; }
}
:root[data-theme="dark"] #bmCanhBao {
  color:#fed7aa; background:#7c2d1233; border-color:#c2410c88; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vien.cho {
    color:#fcd34d; background:#78350f33; border-color:#a1620988; }
  :root:not([data-theme="light"]) .vien.nhan {
    color:#86efac; background:#14532d33; border-color:#15803d88; }
}
:root[data-theme="dark"] .vien.cho {
  color:#fcd34d; background:#78350f33; border-color:#a1620988; }
:root[data-theme="dark"] .vien.nhan {
  color:#86efac; background:#14532d33; border-color:#15803d88; }

/* O chon trong bang: vua khit hang, khong keo cao ca dong. */
.oNho { padding:5px 8px; font-size:13px; width:auto; max-width:220px;
        border:1px solid var(--line); border-radius:6px;
        background:var(--card); color:inherit; }

/* Dang noi that su — mot cham xanh nho, khong phai ca cau chu. */
.dsong { color:#16a34a; font-weight:600; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dsong { color:#4ade80; }
}
:root[data-theme="dark"] .dsong { color:#4ade80; }

table.bang code { font-size:12.5px; }

/* ---- MOI MUC MOT MAU VET ----
   Chu nha 19/09/2026 22:22: *"May lam duoc moi mot muc chu con nhung muc
   khac thi sao"*. Toi do moi dong khung duoc khoi cong tac va 5 nhom trong
   the "Quan ly pin ban dem"; ca trang co 4 muc lon / 19 the.

   ⚠ Vi sao phai gan `data-muc` cho tung the chu khong lam bang CSS thuan:
   4 muc KHONG phai khung boc cac the — chung nam NGANG HANG voi the (xem
   `locMuc`: duyet con cua `.wrap` roi NHO muc dang mo). Nen
   `#sec-... ~ .card` se trung ca the cua cac muc PHIA SAU nua.

   Mau lay tu bo TRANG TRI co san, co y TRANH mau do: trong trang nay `--err`
   dang mang nghia "hong", dung do cho muc Su co thi nhin vao tuong co loi. */
/* ⚠ Chi an vao dau muc cua TRANG CAI DAT (deu bat dau `sec-`).
   `quan-tri.html` da dung `data-muc` tu truoc — 26 cho, 16 gia tri
   (`thiet-bi`, `kho-fw`, `nha-mach`...) — va dung de AN/HIEN tung
   muc. Bat chung chung `[data-muc]` la ve vet len 21 the ben do. */
.card[data-muc^="sec-"] { border-left:4px solid var(--muted); }
.card[data-muc="sec-ieu-khi-n-binh-n-ng-l-nh"] { border-left-color:var(--c-load); }
.card[data-muc="sec-pin-bien-t-n"]             { border-left-color:var(--c-bat); }
.card[data-muc="sec-thong-so-he-thong"]        { border-left-color:var(--muted); }
.card[data-muc="sec-su-co"]                    { border-left-color:var(--c-mui); }

/* Tieu de muc cung mang dung mau ay, de mat noi duoc tu cai tieu de xuong
   cac the ben duoi no. */
.sechead { border-left:4px solid var(--muted); padding-left:10px; }
#sec-ieu-khi-n-binh-n-ng-l-nh { border-left-color:var(--c-load); }
#sec-pin-bien-t-n             { border-left-color:var(--c-bat); }
#sec-thong-so-he-thong        { border-left-color:var(--muted); }
#sec-su-co                    { border-left-color:var(--c-mui); }


/* ---- VET MAU NGAN CACH CAC NHOM CAI DAT ----
   Chu nha 19/09/2026 21:48: *"may phai co nhung vet mau ngan cach cac phan
   cung nhom dang cai chu trai cung mau kieu do deo biet chinh cai nao cho
   cai nao"*.

   Do bang trinh duyet o 390px, ca hai nen: ca trang chi co HAI mau nen
   (#111417 nen trang va #1a1e22 nen the — gan nhu trung nhau o nen toi), 30
   dai gap dung DUNG mau nen trang, va `.nhomcon` chi co mot gach manh phia
   tren voi chu 12px mau mo. Mot o cai dat nam sau trung binh 5 lop khung ma
   di ra ngoai chi doi mau 1-2 lan.

   Chua theo dung loi da dung ba cho trong nha (`.escnote`, `.chcard`,
   `.scmuc`): VET MAU DOC BEN TRAI + nen pha nhat. Chu thich cua `.escnote`
   noi ro vi sao chon loi nay: "vien trai thay cho khoi nen xam kin, nhe hon
   ma van tach bach". */

/* Dai gap noi len khoi nen trang — 30 cai, truoc day trung mau y het. */
details { background:var(--khoi); }

/* Tieu de NHOM CON thanh mot vet mau thuc su, khong con la gach manh + chu mo */
.nhomcon { border-top:0; border-left:4px solid var(--accent);
           border-radius:8px; padding:8px 10px;
           background:color-mix(in srgb,var(--accent) 10%,var(--khoi));
           color:var(--fg); }

/* Vach song Bluetooth - nho bang bieu tuong song dien thoai, dat truoc so dBm.
   Mau lay theo chu (currentColor) nen tu doi theo muc do/cam/vang/ok. */
.song-vach { display:inline-flex; align-items:flex-end; gap:1.5px;
  height:12px; margin-right:5px; vertical-align:-1px; }
.song-vach i { width:3px; border-radius:1px; background:currentColor;
  opacity:.2; }
.song-vach i.sang { opacity:1; }
.song-vach i:nth-child(1) { height:4px; }
.song-vach i:nth-child(2) { height:6.5px; }
.song-vach i:nth-child(3) { height:9px; }
.song-vach i:nth-child(4) { height:12px; }

/* NHAN SONG NAM CANH TIEU DE THE BMS.
   Chu nha 21/09/2026: *"sua cai cho hien thi cuong do song bluetooth bms cho
   gon gang nhu vach song dien thoai thoi"*. Ban truoc la mot O TO chiem tron
   mot hang, to ngang cac o do lech cell / nhiet cell — trong khi no chi la
   chi so phu. `h2` von in hoa va gian chu, nen tra hai thu ay ve binh thuong
   cho con so de doc. Mau do `.mucchu` dat, vach an theo `currentColor`. */
/* Nhan day sang NGOAI CUNG BEN PHAI cua hang tieu de (chu nha 21/09/2026:
   *"day cai bieu tuong vach song bluetooth sang ngoai cung ben phai"*).
   `margin-left:auto` trong mot hang flex — khong dung `float` vi float lay
   phan tu ra khoi dong, keo theo chieu cao tieu de tinh sai khi nhan cao hon
   chu. Lop `co-nhan` dat tay o dung the `h2` ay, khong dung `:has()`. */
.card h2.co-nhan { display:flex; align-items:center; }
/* Day cho CAI VO `<span id="bmsSong">`, khong phai cho `.song-nhan` ben
   trong. Vo moi la phan tu con cua hang flex; dat `margin-left:auto` cho cai
   nam BEN TRONG vo thi vo van la inline, le auto quy ve 0 va nhan dinh sat
   chu tieu de. Do that 21/09/2026: da vap dung cho nay mot lan, anh chup ra
   "PIN — CHI TIET BMS▮▮ -86 dBm" dinh lien nhau. */
.card h2.co-nhan > span { margin-left:auto; }
.card h2 .song-nhan { margin-left:8px; }
.song-nhan { display:inline-flex; align-items:center; font-size:11px;
  font-weight:700; letter-spacing:0; text-transform:none;
  white-space:nowrap; vertical-align:middle; }
/* Cho tut sau nhat trong 15 phut qua — nho va mo hon con so chinh, vi no la
   chuyen DA QUA chu khong phai muc dang chay (chu nha 22/09/2026). */
.song-nhan .song-tut { font-style:normal; font-weight:600; font-size:10px;
  opacity:.65; margin-left:5px; }