/* Giao dien SANG la mac dinh. Giao dien TOI bat bang thuoc tinh data-theme="toi" tren the — 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; --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; --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; } .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); } .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; } } /* 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; } .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; } .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