/* DooVina · Concept C · CSS riêng của agent V3 (nạp sau c.css):
   1) Mọi hộp thoại (UI.modal → .lp-dlg) theo ngôn ngữ C: panel tối, nhãn mono, bước đánh số; điện thoại = tấm đáy.
   2) Bộ phận hộp thoại: .c-eb .c-seg2 .c-choices .c-swr .c-facts .c-diff .c-note .c-crit .c-ladder · dừng khẩn .c-kh .c-kprog.
   3) Màn Chi phí, Cảnh báo, Nền tảng, Chất lượng (tiền tố .v3-, phạm vi #app.v-<màn>).
   Cỡ chữ: 11 · 13 · 16 · 20/24. Lưới 8 px. Tôn trọng prefers-reduced-motion. */

/* =====================================================================
   1 · KHUNG HỘP THOẠI
   ===================================================================== */
.lp-scrim{background:rgba(5,7,10,.66); backdrop-filter:blur(2px)}
.lp-dlg{width:min(520px, calc(100% - 32px)); top:max(24px, 6vh); max-height:calc(100vh - 48px); background:var(--panel); border:1px solid var(--line2); border-radius:16px; box-shadow:0 30px 70px rgba(0,0,0,.55); font-size:13px; line-height:1.45; color:var(--tx)}
.lp-dlg.wide{width:min(680px, calc(100% - 32px))}
.lp-dlg.dg{border-top:1px solid var(--line2); box-shadow:0 0 0 1px color-mix(in srgb, var(--bad) 35%, transparent), 0 30px 70px rgba(0,0,0,.55)}
.lp-dlg header{position:relative; padding:18px 64px 14px 20px; display:grid; gap:4px; border-bottom:1px solid var(--line)}
.lp-dlg header b{display:flex; align-items:center; gap:10px; font:700 20px/28px var(--sans); letter-spacing:-.01em; font-size:20px}
.lp-dlg header small{font:500 11px/16px var(--font-mono); color:var(--tx3); letter-spacing:.02em}
.lp-dlg header small .lp-lvl{font-size:11px; padding:0 4px; margin-right:2px}
.c-hg{width:16px; height:16px; flex:none; display:inline-grid; place-items:center}
.c-hg svg{width:16px; height:16px; display:block}
.lp-dlg .lp-x{top:14px; right:14px; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--tx2); background:transparent; border:1px solid var(--line2); font-size:14px}
.lp-dlg .lp-x:hover{color:var(--tx); border-color:var(--tx3)}
.lp-dlg{grid-template-columns:minmax(0,1fr)}
.lp-dlg .lp-db{padding:16px 20px 20px; gap:12px; font-size:13px; overscroll-behavior:contain; grid-template-columns:minmax(0,1fr)}
.lp-dlg .lp-db > *, .c-stack2 > *{min-width:0}
.lp-dlg select.lp-in{min-width:0; max-width:100%; text-overflow:ellipsis}
.lp-dlg .lp-db > p{color:var(--tx2)}
.lp-dlg footer{padding:12px 20px; gap:8px; background:var(--panel); border-top:1px solid var(--line); align-items:center}
.lp-dlg footer .lp-b{min-height:40px; padding:0 16px; font-size:13px; border-radius:10px}
.lp-dlg footer .lp-b.ok{background:var(--ok); border-color:var(--ok); color:var(--on-solid)}
.lp-dlg .lp-b.dg{color:var(--on-solid)}
.lp-dlg footer .lp-b.ok:hover{filter:brightness(1.08)}
.lp-dlg .c1-dlgerr{display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid color-mix(in srgb, var(--bad) 55%, transparent); background:color-mix(in srgb, var(--bad) 9%, var(--bg)); color:var(--tx); border-radius:10px; padding:10px 12px; font-size:13px}
.lp-dlg .c1-dlgerr::before{content:"▲"; color:var(--bad); font-size:11px; margin-right:-2px}
.lp-dlg .c1-dlgerr{justify-content:flex-start}
.lp-dlg .c1-dlgerr .lp-b{margin-left:auto}

/* trường nhập trong hộp */
.lp-dlg .lp-lbl{display:grid; gap:6px; font:600 11px/16px var(--font-mono); color:var(--tx3); text-transform:uppercase; letter-spacing:.06em}
.lp-dlg .lp-lbl > label{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.lp-dlg .lp-lbl .cnt{font:500 11px var(--font-mono); color:var(--tx3); letter-spacing:0; text-transform:none}
.lp-dlg .lp-lbl small{font:400 11px/16px var(--sans); color:var(--tx3); text-transform:none; letter-spacing:0}
.lp-dlg .lp-in{min-height:40px; border-radius:10px; background:var(--bg); border:1px solid var(--line2); color:var(--tx); font:500 13px/1.4 var(--sans); padding:8px 12px; text-transform:none; letter-spacing:0; width:100%}
.lp-dlg .lp-in.mono, .lp-dlg .lp-in.num{font-family:var(--font-mono)}
.lp-dlg .lp-in.c-big{font-size:16px; font-weight:700}
.lp-dlg .lp-in:focus{outline:2px solid var(--acc2); outline-offset:1px; border-color:var(--acc)}
.lp-dlg .lp-in[aria-invalid="true"]{border-color:var(--bad)}
.lp-dlg textarea.lp-in{min-height:72px; resize:vertical}
.lp-dlg select.lp-in{cursor:pointer}
.lp-dlg .lp-note{border-radius:10px; padding:10px 12px; font-size:13px; background:var(--bg); border:1px solid var(--line2); color:var(--tx2)}

/* =====================================================================
   2 · BỘ PHẬN HỘP THOẠI
   ===================================================================== */
.c-eb{font:600 11px/16px var(--font-mono); color:var(--tx3); letter-spacing:.06em; text-transform:uppercase; margin-top:4px}
.lp-db > .c-eb + *{margin-top:-4px}
.c-hint{font-size:11px; line-height:16px; color:var(--tx3)}
.c-hint.c-need{color:var(--need)}
.c-stack2{display:grid; gap:12px; grid-template-columns:minmax(0,1fr)}
.c-grid2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
.c-why2{display:grid; gap:4px; font-size:13px; color:var(--tx2)}
.c-why2 .c-eb{margin:0}
.c-lnk{display:inline-flex; align-items:center; gap:4px; min-height:32px; border:0; background:none; padding:0; color:var(--acc2); font:600 13px var(--sans); cursor:pointer; text-decoration:none}
.c-lnk:hover{text-decoration:underline}

/* nhóm nút liền (radio/checkbox ẩn) */
fieldset.c-seg2, fieldset.c-choices{border:0; margin:0; padding:0; min-width:0}
fieldset.c-seg2 > legend, fieldset.c-choices > legend{float:left; width:100%; padding:0; margin:0 0 8px}
.c-segs{clear:both; display:flex; flex-wrap:wrap; gap:4px; padding:3px; background:var(--bg); border:1px solid var(--line2); border-radius:12px}
.c-segs label{flex:1 1 0; min-width:max-content; position:relative; display:flex; min-height:36px}
.c-segs input{position:absolute; inset:0; opacity:0; margin:0; pointer-events:none}
.c-segs span{flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 12px; border-radius:9px; font:600 13px var(--sans); color:var(--tx2); cursor:pointer; text-align:center; white-space:nowrap}
.c-segs span:hover{color:var(--tx); background:var(--panel2)}
.c-segs input:checked + span{background:var(--accbg); color:var(--acc2); box-shadow:inset 0 0 0 1px var(--acc)}
.c-segs input:focus-visible + span{outline:2px solid var(--acc2); outline-offset:1px}
.c-segs b.mono{font-size:13px}

/* lựa chọn lớn có số bên phải */
.c-choices{display:grid; gap:8px}
.c-choices > legend + .c-ch{clear:both}
.c-ch{position:relative; display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 16px 8px 14px; border:1px solid var(--line2); border-radius:14px; background:var(--bg); cursor:pointer}
.c-ch:hover{border-color:var(--tx3)}
.c-ch input{position:absolute; opacity:0; pointer-events:none; width:1px; height:1px}
.c-ch .rd{width:20px; height:20px; border-radius:50%; border:2px solid var(--tx3); flex:none; display:grid; place-items:center}
.c-ch .t{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3}
.c-ch .t b{font:600 16px/22px var(--sans)}
.c-ch .t small{font:500 11px/16px var(--font-mono); color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.c-ch .n{font:700 20px/1 var(--font-mono); color:var(--tx2); font-variant-numeric:tabular-nums}
.c-ch:has(input:checked){border-color:var(--acc); background:color-mix(in srgb, var(--acc) 9%, var(--bg))}
.c-ch:has(input:checked) .rd{border-color:var(--acc)}
.c-ch:has(input:checked) .rd::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--acc)}
.c-ch:has(input:checked) .n{color:var(--acc2)}
.c-ch input:focus-visible + .rd{outline:2px solid var(--acc2); outline-offset:2px}

/* công tắc */
.c-swr{position:relative; display:flex; align-items:center; gap:12px; min-height:44px; cursor:pointer}
.c-swr input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.c-swi{width:36px; height:20px; border-radius:10px; background:var(--line2); position:relative; flex:none; transition:background .2s}
.c-swi::after{content:""; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:var(--tx2); transition:transform .2s}
.c-swr input:checked + .c-swi{background:var(--acc)}
.c-swr input:checked + .c-swi::after{transform:translateX(16px); background:var(--bg)}
.c-swr input:focus-visible + .c-swi{outline:2px solid var(--acc2); outline-offset:2px}
.c-swr .t{display:flex; flex-direction:column; font:500 13px/18px var(--sans); color:var(--tx)}
.c-swr .t small{font:500 11px/16px var(--font-mono); color:var(--tx3)}

/* ô số nhỏ */
.c-facts{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.c-facts > div{background:var(--bg); padding:10px 12px; display:grid; gap:2px; min-width:0}
.c-facts .k{font:500 11px/16px var(--font-mono); color:var(--tx3); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.c-facts .v{font:700 16px/22px var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.c-facts .v small{font-size:11px; font-weight:500; color:var(--tx3)}
.c-facts .need .v{color:var(--need)} .c-facts .ok .v{color:var(--ok)} .c-facts .bad .v{color:var(--bad)}

/* thay đổi trước → sau */
.c-diff{border:1px solid var(--line); border-radius:12px; overflow:hidden; font:500 13px/1.45 var(--font-mono)}
.c-diff > div{display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; padding:8px 12px}
.c-diff .m{background:color-mix(in srgb, var(--bad) 8%, var(--bg)); color:var(--tx2)}
.c-diff .m i{color:var(--bad); font-style:normal; font-weight:700}
.c-diff .p{background:color-mix(in srgb, var(--ok) 8%, var(--bg)); color:var(--tx)}
.c-diff .p i{color:var(--ok); font-style:normal; font-weight:700}

/* ghi chú */
.c-note{border:1px solid var(--line2); border-radius:10px; padding:10px 12px; font-size:13px; color:var(--tx2); background:var(--bg)}
.c-note b{color:var(--tx); font-weight:600}
.c-note.w{border-color:color-mix(in srgb, var(--need) 45%, transparent); background:color-mix(in srgb, var(--need) 7%, var(--bg))}
.c-note.b{border-color:color-mix(in srgb, var(--bad) 50%, transparent); background:color-mix(in srgb, var(--bad) 8%, var(--bg))}
.c-note.g{border-color:color-mix(in srgb, var(--ok) 45%, transparent); background:color-mix(in srgb, var(--ok) 7%, var(--bg))}
.c-note .c-lnk{min-height:0; margin-left:4px}

/* danh sách ✓ / ✕ */
.c-crit{list-style:none; margin:0; padding:0; display:grid; gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.c-crit li{display:flex; align-items:baseline; gap:8px; padding:8px 12px; font-size:13px; color:var(--tx2); background:var(--bg)}
.c-crit li + li{border-top:1px solid var(--line)}
.c-crit li i{font-style:normal; font-weight:700; width:12px; flex:none}
.c-crit li.ok i{color:var(--ok)} .c-crit li.no i{color:var(--bad)}
.c-crit li b{color:var(--tx); font-weight:600; white-space:nowrap}

/* thang nút (bậc, quyết định cổng, giờ làm) */
.c-ladder{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px}
.c-ladder > button{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:56px; padding:6px 4px; border-radius:12px; border:1px solid var(--line2); background:var(--bg); color:var(--tx2); cursor:pointer; text-align:center}
.c-ladder > button b{font:700 16px/20px var(--sans); color:var(--tx)}
.c-ladder > button b.mono{font-family:var(--font-mono)}
.c-ladder > button span{font-size:11px; line-height:14px}
.c-ladder > button:hover{border-color:var(--tx3)}
.c-ladder > button.on{border-color:var(--acc); background:var(--accbg); color:var(--acc2)}
.c-ladder > button.on b{color:var(--acc2)}

/* hai cột vẫn chạy / đóng băng */
.c-cols{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
.c-cols > div{border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--bg); display:grid; gap:6px; align-content:start}
.c-cols .ok{border-color:color-mix(in srgb, var(--ok) 40%, var(--line))}
.c-cols .need{border-color:color-mix(in srgb, var(--need) 40%, var(--line))}
.c-cols .ok .c-eb{color:var(--ok)} .c-cols .need .c-eb{color:var(--need)}
.c-cols .c-eb{margin:0}
.c-cols ul{margin:0; padding:0 0 0 16px; font-size:13px; color:var(--tx2); display:grid; gap:2px}

/* thước đã dùng (đổi trần) */
.c-use{display:grid; gap:6px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--bg)}
.c-use .c-eb{margin:0}
.c-use b{font:700 20px/24px var(--font-mono)}
.c-use b small{font-size:13px; font-weight:500; color:var(--tx3)}
.c-use > small{font-size:11px; color:var(--tx3)}

/* 6 bước sự cố an ninh (xem trước trong hộp) */
.c-6s{display:block; width:100%; height:auto; max-width:420px; margin:0 auto}
.c-6s .ln{stroke:var(--line2); stroke-width:2}
.c-6s circle.now{fill:color-mix(in srgb, var(--bad) 18%, var(--bg)); stroke:var(--bad); stroke-width:2}
.c-6s circle.nx{fill:var(--bg); stroke:var(--line2); stroke-width:2}
.c-6s .n{font:700 11px var(--font-mono); fill:var(--tx); text-anchor:middle}
.c-6s .l{font:600 11px var(--sans); fill:var(--tx2); text-anchor:middle}
.c-6s .t{font:500 11px var(--font-mono); fill:var(--tx3); text-anchor:middle}

/* hành động đang giữ (chạy lại) */
.c-held{display:grid; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.c-hrow{display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 12px; background:var(--bg); cursor:pointer}
.c-hrow + .c-hrow{border-top:1px solid var(--line)}
.c-hrow input{width:16px; height:16px; accent-color:var(--acc); flex:none}
.c-hrow .t{display:flex; flex-direction:column; min-width:0; font-size:13px}
.c-hrow .t small{font-size:11px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ----- dừng khẩn ----- */
.c-dlg-kill .c-ch:has(input:checked){border-color:var(--bad); background:color-mix(in srgb, var(--bad) 9%, var(--bg))}
.c-dlg-kill .c-ch:has(input:checked) .rd{border-color:var(--bad)}
.c-dlg-kill .c-ch:has(input:checked) .rd::after{background:var(--bad)}
.c-dlg-kill .c-ch:has(input:checked) .n{color:var(--bad)}
.c-dlg-kill textarea.lp-in{min-height:44px; height:44px}
.c-dlg-kill .lp-lbl > small{display:none}
.c-tgt .lp-lbl{grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px}
.c-imp{display:flex; flex-wrap:wrap; gap:4px 16px; font:500 11px/16px var(--font-mono); color:var(--tx3); padding:8px 12px; border:1px dashed var(--line2); border-radius:10px}
.c-imp b{color:var(--tx); font-weight:700}
.c-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:-4px}
.c-chip{min-height:32px; padding:0 12px; border-radius:16px; border:1px solid var(--line2); background:var(--bg); color:var(--tx2); font:500 13px var(--sans); cursor:pointer}
.c-chip:hover{color:var(--tx); border-color:var(--tx3)}
.c-chip.on{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 55%, transparent); background:color-mix(in srgb, var(--bad) 9%, var(--bg))}
.c-hold2{display:flex; align-items:center; gap:16px; min-height:88px}
.c-kh{position:relative; width:80px; height:80px; border-radius:50%; flex:none; border:0; background:none; padding:0; touch-action:none; user-select:none; -webkit-user-select:none; cursor:pointer}
.c-kh.c-hold{overflow:visible}
.c-kh.c-hold::before{display:none}
.c-kh.c-hold.done{background:none; color:inherit}
.c-kh > svg{position:absolute; inset:0; width:80px; height:80px; transform:rotate(-90deg)}
.c-kh .trk, .c-kprog .trk{fill:none; stroke:color-mix(in srgb, var(--bad) 22%, transparent); stroke-width:5}
.c-kh .prg{fill:none; stroke:var(--bad); stroke-width:5; stroke-dasharray:226.2; stroke-dashoffset:calc(226.2px * (1 - var(--p, 0)))}
.c-kh .core{position:absolute; inset:13px; border-radius:50%; background:color-mix(in srgb, var(--bad) 14%, var(--panel)); border:1px solid color-mix(in srgb, var(--bad) 60%, transparent); display:grid; place-items:center; color:var(--bad); transition:background .15s}
.c-kh .core svg{width:20px; height:20px}
.c-kh:not(:disabled):hover .core{background:color-mix(in srgb, var(--bad) 22%, var(--panel))}
.c-kh:disabled{cursor:not-allowed}
.c-kh:disabled .core{opacity:.45}
.c-kh:disabled .trk{stroke:var(--line2)}
.c-kh.done .core{background:var(--bad); color:var(--bg)}
.c-kh:focus-visible{outline:2px solid var(--acc2); outline-offset:4px}
.c-hold2 .tx{display:flex; flex-direction:column; line-height:1.35; min-width:0}
.c-hold2 .tx b{font:700 20px/26px var(--sans)}
.c-hold2 .tx #kWho{font-size:13px; color:var(--tx2)}
.c-hold2 .tx #kTime{font:700 11px/16px var(--font-mono); color:var(--bad); margin-top:2px}
.c-hold2 .tx #kTime.c-need{color:var(--need)}
.c-alt{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
.c-alt > span{font-size:11px; color:var(--tx3)}
#kType .lp-in{font-size:16px; font-weight:700; letter-spacing:.12em}
/* tiến độ thu hồi khoá */
.c-kprog{display:grid; gap:16px}
.c-kprog .top{position:relative; display:flex; align-items:center; gap:16px}
.c-kprog .top > svg{width:80px; height:80px; transform:rotate(-90deg); flex:none}
.c-kprog .prg{fill:none; stroke:var(--bad); stroke-width:5; transition:stroke-dashoffset .25s linear}
.c-kprog #progN{position:absolute; left:0; top:0; width:80px; height:80px; display:grid; place-items:center; font:700 16px var(--font-mono)}
.c-kprog .tx{display:flex; flex-direction:column; gap:2px; min-width:0}
.c-kprog .tx b{font:700 16px/22px var(--sans)}
.c-kprog .tx span{font-size:11px; color:var(--tx3)}
.c-kprog .grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(56px, 1fr)); gap:6px}
.c-kprog .grid span{font:600 11px/24px var(--font-mono); text-align:center; border:1px solid var(--line2); border-radius:6px; color:var(--tx3); background:var(--bg); transition:background .2s, color .2s, border-color .2s}
.c-kprog .grid span.on{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 55%, transparent); background:color-mix(in srgb, var(--bad) 10%, var(--bg))}
.c-kprog .lp-prog{height:4px; border-radius:2px; background:var(--line2)}
.c-kprog .lp-prog i{background:var(--bad)}
.c-done .c-kprog #progT{color:var(--ok)}
.c-done .c-kprog .top::after{content:""}

/* =====================================================================
   3 · HỘP THOẠI TRÊN ĐIỆN THOẠI = TẤM ĐÁY
   ===================================================================== */
@media (max-width:899px){
  .lp-dlg{top:auto; bottom:0; left:0; right:0; transform:none; width:100%; max-height:calc(100dvh - 12px); border-radius:24px 24px 0 0; border:1px solid var(--line2); border-bottom:0; box-shadow:0 -20px 50px rgba(0,0,0,.5); background:var(--panel2)}
  .lp-dlg.wide{width:100%}
  .lp-dlg.dg{box-shadow:0 0 0 1px color-mix(in srgb, var(--bad) 35%, transparent), 0 -20px 50px rgba(0,0,0,.5)}
  .lp-dlg header{padding:24px 64px 12px 16px; background:var(--panel2)}
  .lp-dlg header::before{content:""; position:absolute; top:8px; left:50%; width:40px; height:5px; margin-left:-20px; border-radius:3px; background:var(--line2)}
  .lp-dlg .lp-x{width:44px; height:44px; top:14px; right:12px; border:0}
  .lp-dlg .lp-db{padding:12px 16px 16px}
  .lp-dlg footer{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:8px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--panel2)}
  .lp-dlg footer .lp-b{min-height:48px; font-size:16px; border-radius:14px; white-space:normal; line-height:1.2}
  .lp-dlg footer .left{margin-right:0}
  .lp-dlg .lp-in{min-height:44px; font-size:16px}
  .lp-dlg .c-segs label{min-height:44px}
  .c-chip{min-height:44px; padding:0 14px; flex:none}
  .c-chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:-16px; padding-right:16px}
  .c-chips::-webkit-scrollbar{display:none}
  .c-imp{gap:2px 12px; padding:8px 10px}
  .c-ch{min-height:60px}
  .c-ladder > button{min-height:60px}
  .c-dlg-kill textarea.lp-in{min-height:48px; height:48px}
  .c-facts .v{font-size:16px; white-space:normal}
  .c-cols{grid-template-columns:1fr}
}

/* =====================================================================
   4 · MÀN SỨC KHOẺ · phần chung
   ===================================================================== */
.v3-page{gap:16px}
.v3-page .c-head h1{font-size:24px}
.v3-g{width:12px; height:12px; flex:none; display:inline-block; vertical-align:-1px}
.v3-page .c-btn .c-ico{flex:none}
.v3-page .c-btn.sm .c-ico.xs, .v3-page .c-btn .c-ico.xs{width:12px; height:12px}
.v3-page .c-btn.solid-danger{background:var(--bad); border-color:var(--bad); color:var(--on-solid)}
.v3-page .c-btn.danger:hover{background:color-mix(in srgb, var(--bad) 10%, transparent)}
.v3-g2{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; align-items:start}
.v3-g2b{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.v3-col{display:grid; gap:16px; min-width:0}
.v3-tiles .c-tile .v{font-size:24px}
.v3-tiles .c-tile .s{gap:6px}
.v3-tiles .c-tile .s .c-bar{flex:1; min-width:40px}
.v3-tiles .v3-tb .v{color:var(--bad)}
.v3-tiles .v3-tw .v{color:var(--need)}
.v3-btns{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.v3-empty{display:flex; align-items:center; gap:8px; padding:16px; font-size:13px; color:var(--tx3)}
.v3-dim{color:var(--tx3)}
.v3-note{padding:0 0 4px; text-transform:none; letter-spacing:.02em}
.v3-dot{display:inline-block; width:8px; height:8px; border-radius:2px; background:var(--c); flex:none}
.v3-sel{width:auto; min-height:32px; padding:4px 32px 4px 10px; font-size:13px; border-radius:8px; max-width:100%}
.v3-tier{display:inline-flex; align-items:center; gap:4px; font:600 11px var(--font-mono); color:var(--tx2); white-space:nowrap}
.v3-tier.need{color:var(--need)} .v3-tier.bad{color:var(--bad)}
.v3-tier .v3-g{width:11px; height:11px}
.v3-ib{width:32px; padding:0; justify-content:center}
.v3-seg{display:inline-flex; border:1px solid var(--line2); border-radius:8px; overflow:hidden; flex:none}
.v3-seg button{display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 10px; border:0; background:none; color:var(--tx3); font:600 12px var(--sans); cursor:pointer; white-space:nowrap}
.v3-seg button + button{border-left:1px solid var(--line)}
.v3-seg button b{font-size:11px; color:var(--tx2)}
.v3-seg button.on{background:var(--accbg); color:var(--acc2)}
.v3-seg button.on b{color:var(--acc2)}
.v3-chip{display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px; border-radius:16px; border:1px solid var(--line2); background:var(--panel); color:var(--tx2); font:500 12px var(--sans); cursor:pointer; white-space:nowrap}
.v3-chip b{font-size:11px; color:var(--tx)}
.v3-chip:hover{border-color:var(--tx3)}
.v3-chip.on{border-color:var(--acc); background:var(--accbg); color:var(--tx)}
.v3-h4{margin:4px 0 0; display:flex; align-items:center; gap:8px}
.v3-h4 .v3-vt{text-transform:none; letter-spacing:0}

/* bảng mono */
.v3-tw{overflow-x:auto}
.v3-tbl{width:100%; border-collapse:collapse; font-size:13px; table-layout:auto}
.v3-tbl th{font:600 11px/16px var(--font-mono); color:var(--tx3); letter-spacing:.06em; text-transform:uppercase; text-align:left; height:36px; padding:0 12px; border-bottom:1px solid var(--line); white-space:nowrap; background:transparent; vertical-align:middle}
.v3-tbl th.num, .v3-tbl td.num{text-align:right}
.v3-tbl td{height:44px; padding:0 12px; border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:middle}
.v3-tbl td.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.v3-tbl tbody tr:last-child td{border-bottom:0}
.v3-tbl tfoot td{border-top:1px solid var(--line2); border-bottom:0; color:var(--tx2); height:44px}
.v3-tbl tr.click{cursor:pointer}
.v3-tbl tr.click:hover td{background:var(--panel2)}
.v3-tbl tr.sel td{background:var(--accbg)}
.v3-tbl tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
.v3-thb{display:inline-flex; align-items:center; gap:4px; border:0; background:none; padding:0; color:inherit; font:inherit; line-height:16px; vertical-align:middle; letter-spacing:inherit; text-transform:inherit; cursor:pointer}
.v3-thb.on{color:var(--acc2)}
.v3-thb i{font-style:normal; width:8px}
th.num .v3-thb{flex-direction:row-reverse}
.v3-agc{display:flex; align-items:center; gap:8px; max-width:220px; min-width:0}
.v3-agc .lp-g{flex:none}
.v3-agc b{font-size:13px; font-weight:600; flex:none}
.v3-agc span{overflow:hidden; text-overflow:ellipsis; color:var(--tx3); font-size:13px; min-width:0}
.v3-use{display:flex; align-items:center; gap:8px; min-width:176px}
.v3-use .mono{font-size:13px; min-width:64px}
.v3-use .mono small{color:var(--tx3); font-size:11px}
.v3-use .c-bar{flex:1; min-width:48px}
.v3-use .v3-tier{min-width:44px; justify-content:flex-end}
.v3-kb{display:inline-flex; align-items:center; gap:4px; font:600 11px var(--font-mono); color:var(--bad); min-width:44px}
.v3-act{width:48px; text-align:right}
.v3-foot{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 16px; border-top:1px solid var(--line)}
.v3-foot .c-sub{margin-left:auto; text-transform:none; letter-spacing:.02em}

/* chú giải và danh sách nhỏ */
.v3-legend{display:flex; flex-wrap:wrap; gap:4px 16px; font-size:11px; color:var(--tx3); padding:4px 0 0}
.v3-legend span{display:inline-flex; align-items:center; gap:6px}
.v3-legend .sw{display:inline-block; width:4px; height:12px; border-radius:2px}
.v3-legend .sw.acc{background:var(--acc)} .v3-legend .sw.need{background:var(--need)} .v3-legend .sw.bad{background:var(--bad)}
.v3-legend .sw.cap{width:16px; height:0; border-top:2px dashed var(--bad); border-radius:0}
.v3-list{list-style:none; margin:0; padding:0; display:grid}
.v3-list li{display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:4px 10px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px}
.v3-list li:last-child{border-bottom:0}
.v3-list li > small{grid-column:1 / -1; font-size:11px; color:var(--tx3)}
.v3-list li > .v3-g{align-self:center}
.v3-list li span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--tx2)}
.v3-list li.hl{box-shadow:inset 3px 0 0 var(--acc)}

/* đường mảnh */
.v3-spark{display:block; width:100%; height:24px}
.v3-spark .ln{fill:none; stroke:var(--acc); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.v3-spark .base{stroke:var(--line2); stroke-width:1; stroke-dasharray:3 3; vector-effect:non-scaling-stroke}
.v3-spark .dot{fill:var(--ok)}
.v3-spark .dot.s-warn{fill:var(--need)} .v3-spark .dot.s-bad{fill:var(--bad)} .v3-spark .dot.s-gray{fill:var(--tx3)}

/* biểu đồ chung (30 ngày, 24 giờ) */
.v3-c30, .v3-hc{display:block; width:100%; height:auto}
.v3-mb{display:none !important}
@media (max-width:1599px){ .v3-hx{display:none} }
.v3-c30 .gl, .v3-hc .gl{stroke:var(--line); stroke-width:1; stroke-dasharray:2 4}
.v3-c30 .ax, .v3-hc .ax{stroke:var(--line2); stroke-width:1}
.v3-c30 .b{fill:var(--acc)} .v3-c30 .b.need{fill:var(--need)} .v3-c30 .b.bad{fill:var(--bad)} .v3-c30 .b.nil{fill:var(--line2)}
.v3-c30 .b:not(.now){opacity:.72}
.v3-c30 .b:hover{opacity:1}
.v3-c30 .today{fill:var(--accbg)}
.v3-c30 .vl{font:700 11px var(--font-mono); fill:var(--tx); text-anchor:middle}
.v3-c30 .cap, .v3-hc .cap{stroke:var(--bad); stroke-width:1.5; stroke-dasharray:5 4}
.v3-c30 .capl, .v3-hc .capl{font:600 11px var(--font-mono); fill:var(--bad); paint-order:stroke; stroke:var(--panel); stroke-width:4px; stroke-linejoin:round}
.v3-c30 .xl, .v3-hc .xl, .v3-hc .yl{font:500 11px var(--font-mono); fill:var(--tx3)}
.v3-hc .ln{fill:none; stroke:var(--acc); stroke-width:1.75; stroke-linejoin:round; stroke-linecap:round}
.v3-hc .pt{fill:var(--panel); stroke:var(--ok); stroke-width:2}
.v3-hc .pt.s-need{stroke:var(--need)} .v3-hc .pt.s-bad{stroke:var(--bad); fill:color-mix(in srgb, var(--bad) 25%, var(--panel))} .v3-hc .pt.s-gray{stroke:var(--tx3)}

/* =====================================================================
   5 · CHI PHÍ
   ===================================================================== */
.v3-mrs{display:grid; gap:4px}
.v3-mr{display:grid; grid-template-columns:minmax(0,1fr) auto 48px; grid-template-areas:"nm v t" "bar bar bar" "x x x"; gap:4px 12px; align-items:center; padding:8px 0}
.v3-mr + .v3-mr{border-top:1px solid var(--line)}
.v3-mr .nm{grid-area:nm; display:flex; align-items:center; gap:8px; font-size:13px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.v3-mr > b{grid-area:v; font-size:13px; font-weight:600; white-space:nowrap}
.v3-mr > b small{font-size:11px; color:var(--tx3); font-weight:500}
.v3-mr .v3-tier{grid-area:t; justify-content:flex-end}
.v3-mr .c-bar{grid-area:bar}
.v3-mr .x{grid-area:x; font-size:11px; color:var(--tx3)}
.v3-agsel{margin-top:8px; padding-top:12px; border-top:1px dashed var(--line2); display:grid; gap:4px}
.v3-agsel .v3-sel{width:100%}
.v3-agsel .v3-mr{border:0; padding:6px 0 4px}
.v3-ovr{margin-top:12px; padding:10px 12px; border:1px solid color-mix(in srgb, var(--acc) 45%, var(--line)); border-radius:10px; background:var(--accbg); display:grid; gap:4px; font-size:13px}
.v3-ovr small{color:var(--tx3); font-family:var(--sans)}
.v3-models{display:grid}
.v3-models .hd, .v3-mdl{display:grid; grid-template-columns:minmax(0,1fr) 112px 104px; gap:4px 12px; align-items:center}
.v3-models .hd{padding:0 0 6px; border-bottom:1px solid var(--line); text-transform:uppercase}
.v3-models .hd span:nth-child(n+2){text-align:right}
.v3-mdl{grid-template-areas:"nm a b" "hb hb hb"; padding:8px 0 10px; border-bottom:1px solid var(--line)}
.v3-mdl:last-child{border-bottom:0}
.v3-mdl .nm{grid-area:nm; display:flex; align-items:center; gap:8px; font-size:13px; min-width:0; flex-wrap:wrap}
.v3-mdl .nm small{font-size:11px; color:var(--tx3)}
.v3-mdl > b{font-size:13px; font-weight:600; text-align:right; white-space:nowrap}
.v3-mdl > b small{font-size:11px; color:var(--tx3); font-weight:500}
.v3-mdl .hb{grid-area:hb; height:3px; border-radius:2px; background:var(--line); overflow:hidden; display:block}
.v3-mdl .hb i{display:block; height:100%; background:var(--c); border-radius:2px}
.v3-models + .v3-note{padding-top:8px}

/* =====================================================================
   6 · CẢNH BÁO & SỰ CỐ
   ===================================================================== */
.v3-ring{position:fixed; inset:0; pointer-events:none; z-index:35; opacity:0; transition:opacity .3s}
.v3-ring.on{opacity:1; box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--bad) 85%, transparent), inset 0 0 42px color-mix(in srgb, var(--bad) 26%, transparent)}
.anim .v3-ring.on{animation:v3Pulse 1.8s ease-in-out infinite}
@keyframes v3Pulse{0%,100%{opacity:1} 50%{opacity:.45}}
.v3-okband{display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-height:56px; padding:12px 16px; border:1px solid color-mix(in srgb, var(--ok) 35%, var(--line)); border-radius:12px; background:color-mix(in srgb, var(--ok) 6%, var(--panel))}
.v3-okband .v3-g{width:16px; height:16px}
.v3-okband b{font:600 16px var(--sans)}
.v3-heros{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap:16px}
.v3-inc{container-type:inline-size; padding:16px; border:1px solid color-mix(in srgb, var(--bad) 55%, transparent); border-radius:16px; background:color-mix(in srgb, var(--bad) 7%, var(--panel)); scroll-margin:96px}
.v3-inc.warn{border-color:color-mix(in srgb, var(--need) 50%, transparent); background:color-mix(in srgb, var(--need) 5%, var(--panel))}
.v3-inc.stop{border-color:color-mix(in srgb, var(--bad) 70%, transparent); background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--bad) 9%, var(--panel)) 0 12px, color-mix(in srgb, var(--bad) 5%, var(--panel)) 12px 24px)}
.v3-inc.hl{box-shadow:0 0 0 2px var(--acc)}
.v3-inc .tp{display:flex; justify-content:space-between; gap:12px; font:700 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--tx2)}
.v3-inc .tp span{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.v3-inc .tp span:last-child{font-weight:500; color:var(--tx2)}
.v3-inc h2{font:700 20px/28px var(--sans); letter-spacing:-.01em; margin-top:6px}
.v3-inc h2 .mono{font-weight:700}
.v3-inc p{font-size:13px; color:var(--tx2); margin-top:2px; display:grid; gap:2px}
.v3-inc p small{font-size:11px; color:var(--tx3)}
.v3-inc .fg{min-width:0; display:grid; gap:8px; align-content:center}
.v3-inc .ac{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.v3-inc .ac .c-btn{min-height:36px}
.v3-inc .ac .c-btn.v3-run{background:var(--ok); border-color:var(--ok); color:var(--on-solid)}
.v3-figt{font-size:11px; color:var(--tx3)} .v3-figt b{color:var(--tx)}
.v3-incg{display:grid; grid-template-columns:minmax(0,1fr); gap:12px}
@container (min-width:760px){
  .v3-incg{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto; align-items:center; gap:16px 32px}
  .v3-inc .ac{flex-direction:column; align-items:stretch; min-width:168px}
}
.v3-gauge{display:block; width:100%; max-width:420px; height:auto}
.v3-gauge .tr{fill:var(--line2)}
.v3-gauge .rz{fill:color-mix(in srgb, var(--bad) 28%, transparent)}
.v3-gauge .vl{fill:var(--acc)} .v3-gauge .vl.bad{fill:var(--bad)}
.v3-gauge .tk{stroke:var(--bad); stroke-width:1.5; stroke-dasharray:3 2}
.v3-gauge .mk{fill:var(--bg); stroke:var(--bad); stroke-width:2.5}
.v3-gauge .tv{font:700 13px var(--font-mono); fill:var(--bad); text-anchor:middle}
.v3-gauge .tl{font:600 11px var(--font-mono); fill:var(--bad); text-anchor:middle}
.v3-gauge .t0{font:500 11px var(--font-mono); fill:var(--tx3)}
.v3-tries{display:block; width:100%; max-width:420px; height:auto}
.v3-tries .l1{stroke:color-mix(in srgb, var(--bad) 50%, transparent); stroke-width:2; stroke-dasharray:4 3}
.v3-tries .l2, .v3-chain .l2{stroke:var(--tx3); stroke-width:1.5; fill:none}
.v3-tries .d{fill:var(--bad)}
.v3-tries .n{font:700 11px var(--font-mono); fill:var(--bg); text-anchor:middle}
.v3-tries .lb{font:600 11px var(--font-mono); fill:var(--bad); text-anchor:middle}
.v3-tries .bk{fill:color-mix(in srgb, var(--need) 10%, var(--bg)); stroke:var(--need)}
.v3-tries .bt{font:600 11px var(--font-mono); fill:var(--need)}
.v3-chain{display:block; width:100%; height:auto}
.v3-chain .ck{fill:var(--bg); stroke:var(--line2)}
.v3-chain .ck.bad{stroke:var(--bad); fill:color-mix(in srgb, var(--bad) 10%, var(--bg))}
.v3-chain .ck.need{stroke:var(--need); fill:color-mix(in srgb, var(--need) 9%, var(--bg))}
.v3-chain .ct{font:600 11px var(--font-mono); fill:var(--tx2)}
.v3-chain .ct.bad{fill:var(--bad)} .v3-chain .ct.need{fill:var(--need)}
.v3-keys{display:block; width:100%; height:18px}
.v3-keys rect{fill:var(--line2)}
.v3-keys rect.on{fill:var(--bad)}
.v3-hmini{display:grid; gap:4px}
.v3-hmini .v3-spark{height:36px}
.v3-hmini .v3-spark .ln{stroke:var(--bad)}
.v3-hmini span{font-size:11px; color:var(--tx3)}
.v3-6h{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); max-width:480px}
.c-6h{margin:0 auto; width:100%}
.v3-6h.c-6h .now i{border-color:var(--bad); color:var(--bad); background:color-mix(in srgb, var(--bad) 14%, var(--bg))}
.v3-6h.c-6h .now time{color:var(--bad)}
.v3-6h li{position:relative; display:grid; justify-items:center; gap:2px; text-align:center; min-width:0}
.v3-6h li::before{content:""; position:absolute; top:11px; right:50%; width:100%; height:2px; background:var(--line2); z-index:0}
.v3-6h li:first-child::before{display:none}
.v3-6h li.ok::before, .v3-6h li.ok + li::before{background:var(--ok)}
.v3-6h li.ok + li.nx::before{background:var(--line2)}
.v3-6h i{position:relative; z-index:1; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font:700 11px var(--font-mono); font-style:normal; background:var(--bg); border:2px solid var(--line2); color:var(--tx2)}
.v3-6h .ok i{background:var(--ok); border-color:var(--ok); color:var(--bg)}
.v3-6h .now i{border-color:var(--need); color:var(--need); background:color-mix(in srgb, var(--need) 14%, var(--bg))}
.v3-6h .late i{border-color:var(--bad); color:var(--bad); background:color-mix(in srgb, var(--bad) 18%, var(--bg))}
.v3-6h b{font:600 11px/14px var(--sans); color:var(--tx2); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.v3-6h time{font:500 11px/14px var(--font-mono); color:var(--tx3); white-space:nowrap}
.v3-6h .now time{color:var(--need)} .v3-6h .late time{color:var(--bad)}

.v3-alp .pn-h{flex-wrap:wrap; row-gap:8px; padding-top:6px; padding-bottom:6px}
.v3-filt{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line)}
.v3-als{list-style:none; margin:0; padding:0}
.v3-al{display:grid; grid-template-columns:44px 12px minmax(0,1fr) auto; gap:12px; align-items:start; padding:12px 16px; border-bottom:1px solid var(--line); scroll-margin:96px}
.v3-al:last-child{border-bottom:0}
.v3-al > time{font:500 11px/20px var(--font-mono); color:var(--tx3); white-space:nowrap}
.v3-al > .v3-g{margin-top:4px}
.v3-al .bd{min-width:0; display:grid; gap:2px}
.v3-al .r1{display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap}
.v3-al .r1 b{font:600 13px/20px var(--sans)}
.v3-al .r1 .ag{font-size:11px; font-weight:600; color:var(--tx2); border:1px solid var(--line2); border-radius:5px; padding:0 6px; line-height:18px}
.v3-al .r1 .x{font-size:11px; color:var(--tx3)}
.v3-al p{font-size:13px; color:var(--tx2)}
.v3-al small{font-size:11px; color:var(--tx3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.v3-al .ac{display:flex; gap:6px; align-items:center}
.v3-al.s-bad{box-shadow:inset 3px 0 0 var(--bad)}
.v3-al.s-need{box-shadow:inset 3px 0 0 var(--need)}
.v3-al.ack{opacity:.68}
.v3-al.ack.hl, .v3-al.hl{background:var(--accbg); opacity:1}
.v3-rules{list-style:none; margin:0; padding:4px 0}
.v3-rules button{display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:12px; align-items:start; width:100%; text-align:left; padding:10px 16px; border:0; background:none; color:var(--tx); cursor:pointer}
.v3-rules button:hover{background:var(--panel2)}
.v3-rules button.on{background:var(--accbg); box-shadow:inset 3px 0 0 var(--acc)}
.v3-rules .v3-g{margin-top:4px}
.v3-rules .t{display:grid; gap:2px; min-width:0}
.v3-rules .t b{font:600 13px/20px var(--sans)}
.v3-rules .t small{font-size:11px; line-height:16px; color:var(--tx3)}
.v3-rules .n{font-size:16px; line-height:20px; color:var(--tx3)}
.v3-steps-key{padding-top:12px; margin-top:4px; border-top:1px dashed var(--line2)}

/* =====================================================================
   7 · NỀN TẢNG
   ===================================================================== */
.v3-lights{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px}
.v3-lt{--c:var(--ok); position:relative; display:grid; gap:6px; text-align:left; padding:16px 16px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--tx); cursor:pointer; overflow:hidden; min-width:0}
.v3-lt:hover{border-color:var(--line2)}
.v3-lt.s-need{--c:var(--need)} .v3-lt.s-bad{--c:var(--bad)} .v3-lt.s-gray{--c:var(--tx3)} .v3-lt.s-stop{--c:var(--bad)}
.v3-lt .bar{position:absolute; left:0; right:0; top:0; height:3px; background:var(--c); opacity:.9}
.v3-lt.s-ok .bar{opacity:.35}
.v3-lt.s-bad .bar, .v3-lt.s-need .bar{box-shadow:0 0 12px var(--c)}
.v3-lt.s-bad{border-color:color-mix(in srgb, var(--bad) 45%, var(--line)); background:color-mix(in srgb, var(--bad) 6%, var(--panel))}
.v3-lt.s-need{border-color:color-mix(in srgb, var(--need) 40%, var(--line))}
.v3-lt.on{border-color:var(--acc); box-shadow:0 0 0 1px var(--acc)}
.v3-lt .r1{display:flex; align-items:center; gap:8px; min-width:0}
.v3-lt .r1 b{font:600 13px var(--sans); white-space:nowrap}
.v3-lt .r1 small{font-size:11px; color:var(--tx3); border:1px solid var(--line2); border-radius:4px; padding:0 4px; line-height:16px; text-transform:uppercase}
.v3-lt .r1 small.c-bad{border-color:color-mix(in srgb, var(--bad) 50%, transparent); color:var(--bad); text-transform:none}
.v3-lt .m{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.v3-lt.s-bad .m{color:var(--bad)} .v3-lt.s-need .m{color:var(--need)}
.v3-lt .t{font-size:11px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.v3-lt .v3-spark .ln{stroke:var(--c)}
.v3-lt.s-ok .v3-spark .ln{stroke:var(--acc)}
.v3-now{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.v3-now .st{display:inline-flex; align-items:center; gap:6px; font:700 11px var(--font-mono); text-transform:uppercase; letter-spacing:.06em}
.v3-now b{font-size:16px}
.v3-now .c-sub{text-transform:none; letter-spacing:.02em}
.v3-mini{display:flex; flex-wrap:wrap; gap:4px 16px; font-size:11px; color:var(--tx3); padding:8px 0 12px; border-bottom:1px solid var(--line)}
.v3-mini span{display:inline-flex; align-items:center; gap:4px}
.v3-mini b{color:var(--tx)}
.v3-kv{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 24px; margin:12px 0 16px}
.v3-kv div{display:grid; gap:2px; min-width:0}
.v3-kv dt{display:flex; align-items:center; gap:6px; font:600 11px var(--font-mono); color:var(--tx3); text-transform:uppercase; letter-spacing:.06em}
.v3-kv dd{margin:0; font-size:13px; color:var(--tx2)}
.v3-route{display:block; width:100%; max-width:360px; height:auto; margin:0 auto}
.v3-route .ln{stroke:var(--line2); stroke-width:2; stroke-dasharray:4 4}
.v3-route .n{fill:var(--bg); stroke:var(--line2); stroke-width:2}
.v3-route .n.on{fill:var(--accbg); stroke:var(--acc)}
.v3-route .n.cool{stroke:var(--need); stroke-dasharray:3 3}
.v3-route .core{fill:var(--acc)}
.v3-route .l{font:600 13px var(--sans); fill:var(--tx2); text-anchor:middle}
.v3-route .l.on{fill:var(--tx)}
.v3-route .t{font:500 11px var(--font-mono); fill:var(--tx3); text-anchor:middle}
.v3-chg{list-style:none; margin:0; padding:0}
.v3-chg li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2px 12px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line); font-size:13px}
.v3-chg li:last-child{border-bottom:0}
.v3-chg time{font:500 11px var(--font-mono); color:var(--tx3)}
.v3-chg .tr{display:inline-flex; align-items:center; gap:6px}
.v3-chg .tr i{font-style:normal; color:var(--tx3)}
.v3-chg small{grid-column:2 / -1; font-size:11px; color:var(--tx3)}

/* =====================================================================
   8 · CHẤT LƯỢNG
   ===================================================================== */
.v3-clt .pn-h{flex-wrap:wrap; row-gap:8px; padding-top:6px; padding-bottom:6px}
.v3-can{display:inline-flex; align-items:center; gap:6px; margin-left:8px; font-size:11px; color:var(--info)}
.v3-can .c-bar{width:40px}
.v3-can .c-bar i{background:var(--info)}
.v3-ne{display:inline-flex; align-items:center; gap:8px; min-width:120px}
.v3-ne .mono{min-width:40px; text-align:right; font-size:13px}
.v3-ne .c-bar{flex:1; min-width:56px}
.v3-ne.need .mono{color:var(--need)} .v3-ne.ok .mono{color:var(--ok)}
.v3-lad{display:inline-flex; align-items:center; gap:3px}
.v3-lad i{width:6px; height:12px; border-radius:2px; background:var(--line2)}
.v3-lad i.on{background:var(--acc)}
.v3-lad b{margin-left:6px; font-size:13px}
.v3-who{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; margin-bottom:12px}
.v3-canary{display:grid; gap:6px; padding:10px 12px; margin-bottom:12px; border:1px solid color-mix(in srgb, var(--info) 45%, var(--line)); border-radius:10px; background:color-mix(in srgb, var(--info) 6%, var(--bg))}
.v3-canary .c-bar i{background:var(--info)}
.v3-canary small{font-size:11px; color:var(--tx3)}
.v3-facts{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:12px}
.v3-facts > div{background:var(--bg); padding:10px 12px; display:grid; gap:2px; min-width:0}
.v3-facts .k{font:500 11px var(--font-mono); color:var(--tx3); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.v3-facts .v{font:700 16px/22px var(--font-mono); white-space:nowrap}
.v3-facts .v small{font-size:11px; font-weight:500; color:var(--tx3)}
.v3-facts .need .v{color:var(--need)} .v3-facts .bad .v{color:var(--bad)}
.v3-crit{list-style:none; margin:4px 0 12px; padding:0; display:grid; gap:4px}
.v3-crit li{display:flex; align-items:baseline; gap:8px; font-size:13px; color:var(--tx3)}
.v3-crit li .v3-g{align-self:center}
.v3-crit li b{color:var(--tx); font-weight:600}
.v3-crit li.no b{color:var(--bad)}
.v3-vt{display:inline-flex; align-items:center; gap:4px; font:600 11px var(--font-mono)}
.v3-cld .v3-tw{margin:4px -16px 12px}
.v3-tbl td .mono > .v3-g{margin-right:4px}
@media (min-width:1101px){ .v3-cld{position:sticky; top:calc(var(--top) + 16px); max-height:calc(100vh - var(--top) - 32px); overflow:auto} }
.v3-cld .v3-tbl td{height:40px}
.v3-evh{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:4px 0 8px; font-size:13px}
.v3-evh > b{font-size:16px}
.v3-evh .mono{font-size:11px; color:var(--tx3)}
.v3-evh > span:last-child{display:inline-flex; align-items:center; gap:4px; font:600 11px var(--font-mono)}
.v3-types{display:grid; gap:6px; margin-bottom:8px}
.v3-types > div{display:grid; grid-template-columns:minmax(0,140px) minmax(0,1fr) 44px 56px; gap:8px; align-items:center; font-size:13px}
.v3-types .hb{height:4px; border-radius:2px; background:var(--line2); overflow:hidden}
.v3-types .hb i{display:block; height:100%; background:var(--ok)}
.v3-types .hb.bad i{background:var(--need)}
.v3-types b{text-align:right; font-size:13px}
.v3-types small{font-size:11px; color:var(--tx3)}
.v3-fails{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:16px}
.v3-fc{font-size:11px; color:var(--bad); border:1px solid color-mix(in srgb, var(--bad) 45%, transparent); border-radius:5px; padding:0 6px; line-height:20px}

/* =====================================================================
   9 · ĐIỆN THOẠI & MÀN HẸP
   ===================================================================== */
@media (max-width:1279px){
  .v3-lights{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:1100px){
  .v3-g2, .v3-g2b{grid-template-columns:minmax(0,1fr)}
  .v-chi-phi .v3-g2 > .v3-col{display:contents}
  .v3-o1{order:1} .v3-o2{order:2} .v3-o3{order:3} .v3-o4{order:4} .v3-o5{order:5}
}
@media (max-width:899px){
  .v3-page{gap:12px}
  .v3-page .c-head{gap:8px}
  .v3-page .c-head h1{font-size:24px}
  .v3-page .c-head .c-sub{flex-basis:100%; order:3; margin-left:0}
  .v3-page .c-head .c-hsp{display:none}
  .v3-page .c-head > .c-btn{margin-left:auto; min-height:44px}
  .v3-page .c-head > .c-btn + .c-btn{margin-left:0}
  .v3-tiles{grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
  .v3-tiles .c-tile{padding:12px}
  .v3-tiles .c-tile .v{font-size:20px; line-height:24px}
  .v3-tiles .c-tile .s{flex-wrap:wrap; white-space:normal; row-gap:2px}
  .v3-hm{display:none}
  .v3-tw{overflow-x:hidden}
  .v3-tbl th, .v3-tbl td{padding:0 8px}
  .v3-agc{max-width:44vw}
  .v3-agc span{display:none}
  .v3-use{min-width:0}
  .v3-use{min-width:0}
  .v3-use .v3-tier, .v3-use .v3-kb{display:none}
  .v3-use .c-bar{min-width:32px}
  .v3-dk{display:none !important}
  .v3-mb{display:block !important}
  .v3-page .pn-h{flex-wrap:wrap; row-gap:2px; padding-top:8px; padding-bottom:8px}
  .v3-page .pn-h .meta{white-space:normal}
  .v3-ib{width:44px; min-height:44px}
  .v3-tbl td{height:52px}
  .c-btn, .v3-page .c-btn.sm{min-height:44px}
  .v3-seg button{min-height:40px}
  .v3-chip{min-height:40px}
  .v3-sel{min-height:44px}
  .v3-heros{grid-template-columns:minmax(0,1fr)}
  .v3-inc{padding:14px 16px}
  .v3-inc h2{font-size:20px}
  .v3-inc .ac .c-btn{flex:1 1 auto}
  .v3-al{grid-template-columns:12px minmax(0,1fr); gap:4px 10px}
  .v3-al > time{grid-column:2; grid-row:2; line-height:16px}
  .v3-al > .v3-g{grid-row:1}
  .v3-al .bd{grid-column:2; grid-row:1}
  .v3-al .ac{grid-column:2; grid-row:3; flex-wrap:wrap}
  .v3-al small{white-space:normal}
  .v3-alp .pn-h .v3-seg{order:5; width:100%}
  .v3-alp .pn-h .v3-seg button{flex:1; justify-content:center}
  .v3-filt{padding:10px 12px}
  .v3-lights{grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
  .v3-lt{padding:14px 12px 10px}
  .v3-lt .r1 small:not(.c-bad){display:none}
  .v3-lt .m{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:18px; min-height:36px}
  .v3-kv{grid-template-columns:minmax(0,1fr)}
  .v3-facts{grid-template-columns:repeat(2, minmax(0,1fr))}
  .v3-models .hd, .v3-mdl{grid-template-columns:minmax(0,1fr) 96px 88px}
  .v3-types > div{grid-template-columns:minmax(0,1fr) 64px 40px; }
  .v3-types small{display:none}
  .v3-clt .pn-h .v3-seg{order:5; width:100%; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--line)}
  .v3-clt .pn-h .v3-seg button{justify-content:center; background:var(--panel); border:0}
  .v3-clt .pn-h .v3-seg button.on{background:var(--accbg)}
  .v3-ne{min-width:0}
  .v3-ne .c-bar{min-width:32px}
  .v3-foot .c-sub{margin-left:0; flex-basis:100%}
  .v3-steps-key{display:none}
  .v3-6h b{white-space:normal; overflow:visible; overflow-wrap:normal}
}
@media (prefers-reduced-motion: reduce){
  .v3-ring.on{animation:none; opacity:1}
  .c-kprog .prg, .c-kprog .grid span{transition:none}
}