/* =====================================================================
   V21 – Giao diện mới theo bộ poster UI/UX V20.3 (nạp SAU khối <style> trong index.html)
   Đợt 1: bảng màu sáng, thanh đầu trang xanh navy gọn, thanh bên navy, trang Tổng quan mới.
   Chỉ đổi cách hiển thị; không đổi logic. Điện thoại (<1000 px) giữ bố cục đã tối ưu.
   ===================================================================== */

/* ---------- Bảng màu sáng (giao diện tối giữ nguyên) ---------- */
:root[data-theme="light"]{--bg:#f0f3f9;--fg:#14213d;--mut:#5b6b86;--card:#fff;--card2:#f5f7fb;--bd:#e2e8f2;--bd2:#c9d3e3;
 --ac:#1f66e5;--acfg:#fff;--acbg:#e8f0fe;--sh:0 1px 2px #0f1c3a0a,0 8px 24px #0f1c3a10;--hdr:#fff}
.card{border-radius:14px}

/* ---------- Mục đi tắt + chân thanh bên (mọi kích thước) ---------- */
.ni{width:21px;height:21px;flex:none}
.sidenav .gonav{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 12px;margin-bottom:2px;border:0;border-radius:9px;background:none;color:var(--fg);font-size:14px;font-weight:700;cursor:pointer}
.sidenav .gonav:hover,.sidefoot .gonav:hover{background:var(--card2)}
.sidenav button[data-sidetab] svg.ni,.gonav svg.ni{color:var(--ac)}
.sidenav button.nokids::after,.sidenav button[data-sidetab="o"]::after{display:none!important}
.sidefoot{padding-top:8px;border-top:1px solid var(--bd)}
.sidefoot .gonav{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:9px;background:none;color:var(--fg);font-size:14px;font-weight:700;cursor:pointer}
.sideinfo{display:flex;flex-direction:column;gap:1px;padding:8px 12px 2px;font-size:12px;color:var(--mut)}.sideinfo b{color:var(--fg);font-weight:600}
.sys21,.kbd21{display:none}

/* ---------- Máy tính (>=1000 px) ---------- */
@media(min-width:1000px){
 /* Thanh đầu trang: một hàng gọn, nền xanh navy */
 header.app{display:flex;align-items:stretch;background:linear-gradient(90deg,#0a2a6b 0%,#0b3b8c 58%,#0a4aa0 100%);border:0;box-shadow:0 2px 12px #0a1f4a47}
 header.app .banner,header.app.sc .banner{min-height:0;height:68px;flex:0 0 auto;padding:0 18px 0 16px;background:none;overflow:visible}
 header.app .banner::before{display:none}
 .banner .brand{margin:0;flex:none;gap:14px;align-items:center}
 .banner .brand .logo.evn,header.app.sc .brand .logo.evn{height:48px;width:auto}
 .brand h1.sys{display:none}
 .sys21{display:flex;align-items:center;gap:12px;color:#fff;font-weight:700;font-size:17.5px;white-space:nowrap}
 .verpill{font-style:normal;font-size:12px;font-weight:600;letter-spacing:.3px;padding:3px 11px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(255,255,255,.1)}
 .navrow{flex:1;min-width:0;background:none;border:0;padding:0 18px 0 0;gap:16px}
 .gsrch{flex:0 1 560px;margin:0 auto;position:relative}
 .gsrch input{height:42px;padding:0 90px 0 42px;border:0;border-radius:12px;background:#fff;color:#14213d;box-shadow:0 1px 3px #0003}
 .gsrch input::placeholder{color:#6b7a95}
 .gsrch>svg{left:14px;color:#51607b;width:18px;height:18px}
 .kbd21{display:block;position:absolute;right:10px;top:50%;transform:translateY(-50%);padding:2px 8px;border:1px solid #cfd8e6;border-radius:6px;font:600 11.5px/1.5 inherit;color:#5b6b86;background:#f4f6fb;pointer-events:none}
 .navrow .tools{gap:10px;color:#fff}
 .navrow .tools .clk{display:none}
 header.app .tools .ib{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:10px}
 header.app .tools .ib:hover{background:rgba(255,255,255,.22);border-color:#fff}
 #whot{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;padding:5px 14px 5px 5px}
 #whot .av{background:#2f7bff;color:#fff;width:34px;height:34px;font-size:15px}
 #whot .nm b{color:#fff;font-size:13.5px}#whot .nm small{color:#b9c9ea}
 #lgb{background:#fff;color:#0b3b8c;border-color:#fff;font-weight:700}

 /* Thanh bên navy */
 body:not(.fs) #side{width:244px;padding:16px 12px 10px;background:linear-gradient(180deg,#0a2a63 0%,#081f4d 100%);border-right:0;color:#e7eefc;
  --fg:#e7eefc;--mut:#9db2dc;--card:rgba(255,255,255,.07);--card2:rgba(255,255,255,.09);--bd:rgba(255,255,255,.14);--bd2:rgba(255,255,255,.24);--acbg:rgba(255,255,255,.12);--ac:#8db8ff}
 body:not(.fs) main,body:not(.fs) footer{margin-left:244px}
 body:not(.fs) .navrow{padding-left:0}
 #side .sidenav{padding-right:2px}
 #side .sidenav button[data-sidetab],#side .sidenav .gonav,#side .sidefoot .gonav{padding:11px 14px;margin-bottom:3px;border-radius:12px;font-size:14.5px;font-weight:600;color:#dce6fb}
 #side .sidenav button[data-sidetab] svg.ni,#side .gonav svg.ni{color:#c9d9f7}
 #side .sidenav button[data-sidetab]:hover,#side .sidenav .gonav:hover,#side .sidefoot .gonav:hover{background:rgba(255,255,255,.09)}
 #side .sidenav button[data-sidetab].on,#side .sidenav .gonav.on{background:#1f66e5;color:#fff;box-shadow:0 6px 16px #1f66e55c}
 #side .sidenav button[data-sidetab].on svg.ni,#side .sidenav .gonav.on svg.ni{color:#fff}
 #side .sidenav button[data-sidetab]::after{color:#8fa6d3}
 #side .sidekids .it.on,#side #dsb .it.on,#side #dsb .gh.on{background:rgba(255,255,255,.16);color:#fff}
 #side .sidekids .it:hover,#side #dsb .it:hover{background:rgba(255,255,255,.1)}
 #side .sidenav .sidekids,#side .sidenav #dsb{border-left-color:rgba(255,255,255,.18)}
 #side .sidefoot{border-top-color:rgba(255,255,255,.14)}
 #side .sideinfo{color:#9db2dc}#side .sideinfo b{color:#dce6fb}
 #side input{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.22)}#side input::placeholder{color:#9db2dc}

 main{padding:22px 26px 28px}
}

/* ---------- Sơ đồ logic: thanh công cụ gọn theo nhóm, vùng vẽ bo góc (máy tính) ---------- */
@media(min-width:1000px){
 #pv .ctl{padding:12px 16px 10px;border-radius:14px}
 #pv .ctl .bc{margin-bottom:4px}
 #pv .ctl .dtt{font-size:17px;font-weight:750}
 #pv .ctl #st{padding:6px 14px;font-size:12px}
 #pv .ctl .bar{gap:8px;margin-top:8px;padding-top:0;border-top:0;align-items:center}
 #pv .ctl .bar>button,#pv .ctl .bar>.xw>button{height:36px;min-height:0;padding:0 13px;border-radius:10px;font-size:13px;font-weight:600;border-color:var(--bd2);background:var(--card);white-space:nowrap}
 #pv .ctl .bar>button:hover,#pv .ctl .bar>.xw>button:hover{border-color:var(--ac);color:var(--ac);background:var(--acbg)}
 #pv .ctl .bar>button[aria-pressed=true]{background:var(--acbg);border-color:var(--ac);color:var(--ac)}
 #pv .ctl .bar .sep{height:22px;align-self:center;margin:0 2px;background:var(--bd2)}
 #pv .ctl .zg{gap:0;padding:2px;border:1px solid var(--bd2);border-radius:10px;background:var(--card)}
 #pv .ctl .zg .ib,#pv .ctl .zg button,#pv .ctl .zg select{height:30px;min-height:0;border:0;background:none;border-radius:8px;font-weight:600}
 #pv .ctl .zg .ib{width:30px}
 #pv .ctl .zg button:hover,#pv .ctl .zg select:hover{background:var(--acbg);color:var(--ac)}
 #pv .ctl .ctlg{gap:6px}#pv .ctl .ctlg select{height:36px;min-height:0;border-radius:10px}
 #pv .tabbar .tbt{border-radius:10px}
 #pv .box{border-radius:14px;border:1px solid var(--bd);box-shadow:var(--sh)}
}

/* ---------- Trình xem PDF: khung tín hiệu liên kết ---------- */
.pdmain{display:flex;gap:10px;flex:1;min-height:0}.pdmain .pdb{flex:1;min-width:0}
.pdl{display:none;width:270px;flex:none;overflow:auto;padding:12px 14px;border:1px solid var(--bd);border-radius:10px;background:var(--card)}
.pdl h3{margin:0 0 4px;font-size:14.5px}
.pdl-l{list-style:none;margin:8px 0 0;padding:0}.pdl-l li{padding:7px 0;border-top:1px solid var(--bd);display:flex;flex-direction:column}
.pdl-l .link{text-align:left;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;font-weight:600;word-break:break-all}.pdl-l small{color:var(--mut);font-size:12px}
@media(min-width:1100px){.pdl{display:block}}

/* ---------- Phân quyền: dải số liệu ---------- */
.rsum{margin:8px 0 14px}.rsum h3{margin:14px 0 6px;font-size:14px}
.rsum-t{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.rsum-t>div{padding:12px 14px;border:1px solid var(--bd);border-radius:12px;background:var(--card2)}.rsum-t b{display:block;font-size:22px;line-height:1.1}.rsum-t small{color:var(--mut)}
.rsum-t>div.warn{background:var(--warnbg);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}.rsum-t>div.warn b{color:var(--warn)}
.rsum-l{list-style:none;margin:0;padding:0}.rsum-l li{display:flex;gap:12px;padding:7px 0;border-top:1px solid var(--bd);font-size:13px}.rsum-l time{flex:none;min-width:110px;color:var(--mut)}

/* ---------- Phiên bản: nhãn trạng thái, nút gọn ---------- */
.vchip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:700;margin:1px 0}
.vchip.cur{background:var(--acbg);color:var(--ac)}.vchip.use{background:#e5f6ee;color:#12a35e}.vchip.ok{background:var(--okbg);color:var(--ok)}
.vchip.no{background:var(--badbg);color:var(--bad)}.vchip.wait{background:var(--warnbg);color:var(--warn)}
:root[data-theme="dark"] .vchip.use{background:#213b30;color:#5fc998}
.vnote{display:block;color:var(--mut);font-size:12px;margin-top:3px}
#sbvl td:last-child{white-space:nowrap}#sbvl td:last-child button{padding:4px 11px;font-size:12.5px;border-radius:8px;margin:2px 3px 2px 0}

/* ---------- Nguồn dữ liệu: khung trạng thái ---------- */
.src-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.src-b{padding:14px 16px;border:1px solid var(--bd);border-radius:12px;background:var(--card2)}
.src-t{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.src-t b{font-size:14.5px}
.src-b ul{list-style:none;margin:0;padding:0;font-size:13px;color:var(--mut)}.src-b li{margin:4px 0;word-break:break-word}.src-b li b{color:var(--fg)}
#src-status{margin-bottom:16px}

.guestnote{margin-bottom:14px;padding:12px 16px;background:var(--warnbg);border-color:color-mix(in srgb,var(--warn) 35%,transparent);color:var(--fg);font-size:13.5px}

/* ---------- Khách: không in / lưu PDF được (trang in ra trống) ---------- */
@media print{html:not([data-adm="1"]) body>*{display:none!important}html:not([data-adm="1"]) body::before{content:"Chức năng in / xuất chỉ dành cho tài khoản đã đăng nhập.";display:block;padding:40px;font:16px sans-serif;color:#000}}

/* ---------- Điện thoại: thanh điều hướng dưới đáy ---------- */
#bnav{display:none}
@media(max-width:700px){
 #bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:47;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--bd2);box-shadow:0 -4px 14px #0f1c3a1f}
 #bnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:48px;padding:4px 2px;border:0;border-radius:10px;background:none;color:var(--mut);font-size:11px;font-weight:600}
 #bnav button svg{width:22px;height:22px}
 #bnav button.on{color:var(--ac);background:var(--acbg)}
 body[data-tab="v"] #bnav,body.nav-open #bnav,body.fs #bnav{display:none}
 body:not([data-tab="v"]) main{padding-bottom:84px}
 body:not([data-tab="v"]) #totop{bottom:calc(76px + env(safe-area-inset-bottom))}
 body:not([data-tab="v"]) .aifab{bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* ---------- Tìm kiếm chung: kết quả chia nhóm ---------- */
#res{max-height:min(480px,70vh);color:var(--fg)}
#res .rs-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:1;background:var(--card);cursor:default}
#res .rs-tabs button{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--bd2);background:var(--card);color:var(--mut);min-height:0}
#res .rs-tabs button i{font-style:normal;opacity:.75;margin-left:2px}
#res .rs-tabs button[aria-pressed=true]{background:var(--ac);border-color:var(--ac);color:var(--acfg)}
#res .rs-h{padding:5px 12px;font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.6px;background:var(--card2);cursor:default}
#res .rs-none{padding:14px 12px;color:var(--mut);cursor:default}

/* ---------- Tín hiệu, Tài liệu, Quản trị: cùng phong cách thẻ / bảng / nút ---------- */
#pt .sth h2,#pd h2,#pn h2,#pc h2,#pw h2{font-size:19px;font-weight:750}
#sxl{background:var(--ac);border-color:var(--ac);color:var(--acfg);font-weight:600}#sxl:hover{filter:brightness(1.08);background:var(--ac);color:var(--acfg)}
#pt .row{margin:12px 0}#pt .srch input,#pt .row select{height:40px;border-radius:10px}
#pt .row select{min-width:150px}
table.tb th{background:var(--card2);font-size:11.5px;letter-spacing:.5px;white-space:nowrap}
table.tb td{padding:10px 12px}
table.tb tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--card2) 45%,transparent)}
table.tb tbody tr:hover td{background:var(--acbg)}
.tw{border:1px solid var(--bd);border-radius:10px}
.sg-st{padding:3px 11px;font-weight:700;font-size:11.5px;display:inline-flex;align-items:center;gap:6px}
.sg-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.sg-st.off{background:var(--okbg);border-color:transparent;color:var(--ok)}
.sg-st.on{background:var(--badbg);border-color:transparent;color:var(--bad)}
#smb{min-width:160px}
@media(min-width:1000px){
 table.sig td:nth-child(2){min-width:200px;max-width:340px}
 table.sig td:nth-child(9),table.sig td:nth-child(10){max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 table.sig td:nth-child(5){white-space:nowrap}
}
.subtabs button{border-radius:10px}
.qmenu{border-radius:14px;box-shadow:var(--sh)}
.qmenu button.on{background:var(--acbg);color:var(--ac)}.qmenu button.on i{color:var(--ac)}
#dtree{border-radius:14px}#dtree .dt.on{background:var(--acbg);color:var(--ac)}

/* ---------- Trang Bảng biến (toàn hệ thống) ---------- */
#tw,#tz,#tx{display:none!important}
#px{max-width:1400px;margin:0 auto}
.xd-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;align-items:start}.xd-grid>.card+.card{margin-top:0}
.xd-h{margin:16px 0 6px;font-size:14px}
.xd-sets,.xd-fmt{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:6px}
.xd-sets .rd,.xd-fmt .rd{margin:0;align-items:flex-start}.xd-sets .rd small,.xd-fmt .rd small{font-size:12px}
#xd-scope{width:100%;max-width:520px}
.xd-act{display:flex;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--bd)}.xd-act>div{flex:1;min-width:0}.xd-act b{display:block}.xd-act .sub{margin:2px 0 0}
@media(max-width:1000px){.xd-grid{grid-template-columns:minmax(0,1fr)}}
#pz{max-width:1500px;margin:0 auto}
.tv-s{margin:10px 0 0;max-width:620px;flex:none}.tv-s input{width:100%;height:42px;border-radius:10px}
.tv-res{margin-top:6px;max-width:620px;max-height:300px;overflow:auto;border:1px solid var(--bd2);border-radius:10px;background:var(--card)}
.tv-res button{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;padding:8px 12px;border:0;border-bottom:1px solid var(--bd);border-radius:0;background:none}
.tv-res button:hover{background:var(--acbg)}.tv-res small{color:var(--mut);font-size:12px}
.tv-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px;margin-top:18px;align-items:start}.tv-grid>.card+.card{margin-top:0}
.tv-h{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}.tv-h h3{margin:2px 0 0;font-size:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;word-break:break-all}.tv-h small{color:var(--mut)}
.tv-list{margin-top:8px;max-height:calc(calc(var(--vh,1vh)*100) - var(--hh,68px) - 300px);min-height:160px;overflow:auto;border:1px solid var(--bd);border-radius:10px;padding:4px 0}
.tv-r{display:flex;align-items:center;gap:10px;padding:6px 12px;border-bottom:1px solid var(--bd);font-size:13px;min-width:0}.tv-r:last-child{border-bottom:0}
.tv-r.note{color:var(--mut);font-size:12.5px}
.tv-r .tv-n{flex:none;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;font-weight:600;text-align:left;word-break:break-all}
.tv-r small{color:var(--mut);font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-v{display:inline-flex;align-items:center;flex:none;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.3px}
.tv-v.on{background:var(--badbg);color:var(--bad)}.tv-v.off{background:var(--okbg);color:var(--ok)}
.tv-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 6px}.tv-bar .seg{margin:0;flex:1 1 320px}
.tv-hint{margin:2px 0 6px;font-size:12.5px}
.tv-k{display:inline-block;padding:0 7px;border-radius:5px;font-weight:700;font-size:11.5px}.tv-k.on{background:var(--badbg);color:var(--bad)}.tv-k.off{background:var(--okbg);color:var(--ok)}
.tv-ex{position:sticky;top:calc(var(--hh,68px) + 10px);max-height:calc(calc(var(--vh,1vh)*100) - var(--hh,68px) - 30px);display:flex;flex-direction:column}
.tv-ex>h3{margin:0 0 6px;font-size:16px}
.tv-eb{overflow:auto;min-height:0;font-size:13.5px;line-height:1.55;padding-right:4px}
.tv-eb p{margin:6px 0}.tv-eb h4{margin:14px 0 4px;font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}
.tv-eh small{display:block;color:var(--mut);font-size:12px}.tv-eh h3{margin:2px 0 6px;font-size:17px;line-height:1.3}
.tv-ok{color:var(--ok);font-weight:600}.tv-no{color:var(--bad);font-weight:600}
.tv-l{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:5px}
.tv-c{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 10px;border-radius:10px;border:1px solid var(--bd2);background:var(--card);font-size:13px;line-height:1.35}
.tv-c i{width:9px;height:9px;border-radius:50%;flex:none;background:var(--ok)}.tv-c.on i{background:var(--bad)}
.tv-c em{margin-left:auto;flex:none;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.3px;padding:2px 7px;border-radius:999px;background:var(--okbg);color:var(--ok)}
.tv-c.on em{background:var(--badbg);color:var(--bad)}.tv-c:hover{border-color:var(--ac);background:var(--acbg)}
.tv-ea{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tv-view{margin:0 0 6px;max-width:260px}
.tv-graph{margin-top:8px;max-height:calc(calc(var(--vh,1vh)*100) - var(--hh,68px) - 300px);min-height:200px;overflow:auto;border:1px solid var(--bd);border-radius:10px;background-color:var(--card);background-image:radial-gradient(var(--grid) 1px,transparent 1px);background-size:18px 18px}
.tv-graph svg{display:block}
.tv-graph.hand{cursor:grab;user-select:none}.tv-graph.hand.drag{cursor:grabbing}.tv-graph.hand svg g{cursor:inherit!important}
.tv-pan{display:flex;align-items:center;gap:10px;margin-top:6px}.tv-pan small{color:var(--mut);font-size:12px}
#tv-hand[aria-pressed=true]{background:var(--acbg);border-color:var(--ac);color:var(--ac);font-weight:600}
@media(max-width:1100px){.tv-grid{grid-template-columns:minmax(0,1fr)}.tv-list,.tv-graph{max-height:none}}
#pw{max-width:1700px;margin:0 auto}
.bb-f{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 12px}.bb-f .srch{flex:1 1 280px;max-width:420px}.bb-f select{min-width:150px}
.bb-wrap{overflow:auto;max-height:calc(calc(var(--vh,1vh)*100) - var(--hh,68px) - 270px);min-height:240px;border:1px solid var(--bd);border-radius:10px}
.bb-t{border-collapse:separate;border-spacing:0;min-width:1000px}
.bb-t th{position:sticky;top:0;z-index:2;white-space:nowrap}
.bb-t td{white-space:nowrap}.bb-t td.d{white-space:normal;min-width:240px;max-width:520px;color:var(--mut)}
.bb-t th.fix,.bb-t td.fix{position:sticky;left:0;z-index:1;background:var(--card);border-right:1px solid var(--bd)}.bb-t th.fix{z-index:3;background:var(--card2)}
.bb-t tbody tr:hover td.fix{background:var(--acbg)}
.bb-t td.bbv{font-weight:600}.bb-t td.bbv.on{color:var(--bad)}
@media(max-width:700px){.bb-f select,.bb-f .srch{flex:1 1 100%;max-width:none}.bb-wrap{max-height:none}}

/* ---------- Trang Tổng quan mới ---------- */
.d21{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;max-width:1760px;margin:0 auto}
.d21-main{display:flex;flex-direction:column;gap:18px;min-width:0}.d21-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.d21-hero{position:relative;border-radius:16px;overflow:hidden;min-height:196px;display:flex;flex-direction:column;justify-content:center;padding:26px 32px;color:#fff;
 background:linear-gradient(90deg,rgba(7,28,70,.86) 0%,rgba(7,28,70,.45) 52%,rgba(7,28,70,0) 100%),url(../img/banner-dam.jpg) center/cover no-repeat}
.d21-hero small{font-size:14px;opacity:.92}.d21-hero h2{font-size:30px;line-height:1.2;margin:4px 0 8px;font-weight:800;color:#fff;letter-spacing:.2px}
.d21-hero p{margin:0 0 14px;opacity:.95;max-width:560px}.d21-hero .verpill{align-self:flex-start;font-style:normal;font-size:12.5px;font-weight:600;padding:3px 12px;border:1px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(255,255,255,.14)}
.d21-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.d21-kpi{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:14px;background:var(--card);border:1px solid var(--bd);box-shadow:var(--sh);text-align:left;cursor:pointer;color:var(--fg)}
.d21-kpi:hover,.d21-tile:hover{border-color:var(--ac)}
.d21-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;flex:none}.d21-ic svg{width:25px;height:25px}
.d21-kpi.b .d21-ic{background:#e3ecff;color:#1f66e5}.d21-kpi.g .d21-ic{background:#ddf4e8;color:#12a35e}.d21-kpi.p .d21-ic{background:#eee6ff;color:#7a4fe0}
.d21-kpi.ok .d21-ic{background:#ddf4e8;color:#12a35e}.d21-kpi.warn .d21-ic{background:#fff0d9;color:#e58a1f}.d21-kpi.bad .d21-ic{background:#fde4e1;color:#d93a2d}
.d21-kpi b{display:block;font-size:26px;line-height:1.1;font-weight:800}.d21-kpi.ok b,.d21-kpi.warn b,.d21-kpi.bad b{font-size:19px}
.d21-kpi .t{display:block;font-size:13px;font-weight:600;color:var(--fg)}.d21-kpi small{display:block;color:var(--mut);font-size:12px;margin-top:1px}
.d21-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.d21-tile{display:flex;gap:14px;align-items:center;padding:18px 20px;border-radius:14px;background:var(--card);border:1px solid var(--bd);box-shadow:var(--sh);text-align:left;cursor:pointer;color:var(--fg)}
.d21-tile .d21-ic{color:#fff;width:54px;height:54px;border-radius:15px}
.d21-tile.c1 .d21-ic{background:#2f6fed}.d21-tile.c2 .d21-ic{background:#14a56a}.d21-tile.c3 .d21-ic{background:#8a4fe8}.d21-tile.c4 .d21-ic{background:#f08a24}.d21-tile.c5 .d21-ic{background:#0ea5b7}.d21-tile.c6 .d21-ic{background:#1fa05a}
.d21-tile h3{margin:0 0 3px;font-size:16.5px}.d21-tile p{margin:0;font-size:12.5px;color:var(--mut);line-height:1.4}
.d21-tile::after{content:"›";margin-left:auto;font-size:24px;color:var(--mut);line-height:1}
.d21-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.d21-card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:16px 18px;box-shadow:var(--sh);min-width:0}
.d21-card h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15.5px}
.d21-card h3 .all{margin-left:auto;padding:0;border:0;background:none;font-size:12.5px;font-weight:600;color:var(--ac)}.d21-card h3 .all:hover{text-decoration:underline;background:none}
.d21-list{list-style:none;margin:0;padding:0}
.d21-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--bd);font-size:13.5px;min-width:0}.d21-list li:first-child{border-top:0}
.d21-list .go{flex:1;min-width:0;text-align:left;padding:0;border:0;background:none;color:var(--fg);font-weight:600}.d21-list .go:hover{color:var(--ac);background:none}
.d21-list .go small{display:block;color:var(--mut);font-weight:400;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d21-list time{flex:none;color:var(--mut);font-size:12px}
.d21-dot{width:10px;height:10px;border-radius:50%;flex:none;background:#2f6fed}
.d21-fi{width:30px;height:34px;border-radius:7px;display:grid;place-items:center;flex:none;font-size:10.5px;font-weight:800;color:#fff;background:#e5483b}.d21-fi.x{background:#1d9e5f}.d21-fi.o{background:#6b7a95}
.d21-bar{display:flex;align-items:center;gap:14px;padding:12px 18px;border-radius:12px;background:var(--okbg);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);color:var(--fg);font-size:13.5px}
.d21-bar button{margin-left:auto;flex:none}
.d21-note{margin:8px 0 0;color:var(--mut);font-size:12.5px}
.d21-side .ov-st li{padding:9px 0}
.d21-seg{display:flex;gap:4px;margin:0 0 6px;padding:3px;background:var(--card2);border:1px solid var(--bd);border-radius:10px}
.d21-seg button{flex:1;border:0;background:none;padding:6px 8px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--mut)}
.d21-seg button[aria-pressed=true]{background:var(--ac);color:var(--acfg)}
.d21-stats{list-style:none;margin:0;padding:0}
.d21-stats li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--bd);font-size:13.5px}.d21-stats li:first-child{border-top:0}
.d21-stats .d21-ic{width:36px;height:36px;border-radius:10px}.d21-stats .d21-ic svg{width:19px;height:19px}
.d21-stats .d21-ic.b{background:#e3ecff;color:#1f66e5}.d21-stats .d21-ic.p{background:#eee6ff;color:#7a4fe0}.d21-stats .d21-ic.o{background:#fff0d9;color:#e58a1f}.d21-stats .d21-ic.g{background:#ddf4e8;color:#12a35e}
.d21-stats .t{flex:1;min-width:0}.d21-stats b{font-size:17px;font-weight:800}
.d21-stats em{font-style:normal;font-size:12px;font-weight:700;min-width:54px;text-align:right;color:var(--mut)}.d21-stats em.up{color:#12a35e}.d21-stats em.dn{color:#d93a2d}

@media(max-width:1400px){.d21{grid-template-columns:minmax(0,1fr)}.d21-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
@media(max-width:1200px){.d21-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.d21-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.d21-two{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){
 .d21{gap:12px}.d21-main,.d21-side{gap:12px}
 .d21-hero{min-height:150px;padding:18px}.d21-hero h2{font-size:21px}
 .d21-kpis{gap:8px}.d21-kpi{padding:12px;gap:10px}.d21-ic{width:40px;height:40px}.d21-kpi b{font-size:21px}
 .d21-tiles{grid-template-columns:minmax(0,1fr);gap:8px}.d21-tile{padding:12px 14px}.d21-tile .d21-ic{width:44px;height:44px}
 .d21-bar{flex-wrap:wrap}
}

/* Nút lên đầu trang nằm TRÊN nút Trợ lý, không chồng nhau */
body #totop{bottom:calc(72px + env(safe-area-inset-bottom))!important;right:16px!important}
@media(max-width:700px){body:not([data-tab="v"]) #totop{bottom:calc(136px + env(safe-area-inset-bottom))!important}}

/* Truy vết: không gian xem rộng hơn, toàn màn hình, cây nguyên nhân gốc rễ */
.tv-grid{grid-template-columns:minmax(0,2.2fr) minmax(300px,1fr)}
.tv-graph{max-height:calc(calc(var(--vh,1vh)*100) - var(--hh,68px) - 190px);min-height:380px}
.tv-grid.big{position:fixed;inset:0;z-index:400;margin:0;padding:10px;background:var(--bg);grid-template-columns:minmax(0,1fr) 400px;gap:10px;align-items:stretch;overflow:hidden}
.tv-grid.big>.card{overflow:auto;margin:0;max-height:none}
.tv-grid.big .tv-graph{max-height:calc(calc(var(--vh,1vh)*100) - 190px);min-height:300px}
.tv-grid.big .tv-ex{position:static}
body.tv-big{overflow:hidden}
@media(max-width:1100px){.tv-grid,.tv-grid.big{grid-template-columns:minmax(0,1fr)}.tv-grid.big{overflow:auto}.tv-graph{min-height:300px}}
.tv-why{margin:8px 0 12px;padding:10px 12px;border:1px solid var(--bd2);border-radius:10px;background:var(--acbg)}
.tv-why h4{margin:0 0 4px}
.tv-t .tv-t{margin:5px 0 2px 14px;padding-left:10px;border-left:2px solid var(--bd2)}
.tv-nt{font-size:12px;color:var(--mut);margin:2px 0 0 18px}
/* Nút Trợ lý: tròn gọn, chỉ biểu tượng; khung chat có thu nhỏ */
.aifab{width:48px;height:48px;padding:0!important;gap:0!important;justify-content:center;border-radius:50%!important;background:var(--ac);color:var(--acfg)}
.aifab svg{width:24px;height:24px;display:block}
.aifab:hover{filter:brightness(1.08)}
.aipanel{bottom:74px!important}
@media(max-width:700px){body:not([data-tab="v"]) .aipanel{bottom:calc(134px + env(safe-area-inset-bottom))!important}}
.aih{display:flex;align-items:center;gap:6px}
.aih b{margin-right:auto;font-size:15px}
.aipanel.min{height:auto!important}
.aipanel.min>:not(.aih){display:none!important}
/* Admin: tạo tài khoản trên web */
.admc{margin:10px 0;border:1px solid var(--bd2);border-radius:10px;padding:8px 12px;background:var(--acbg)}
.admc summary{cursor:pointer;font-weight:700}
.adm-cf{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;align-items:end;margin-top:10px}
.adm-cf label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--mut)}
.adm-cf .pwr{display:flex;gap:6px}.adm-cf .pwr input{flex:1;min-width:0}
.tb button.danger{color:var(--bad);border-color:var(--bad)}.tb button.danger:hover:not(:disabled){background:var(--badbg)}

.tb button.danger.armed{background:var(--bad);color:#fff}

/* Thanh bên: mũi tên to hơn, xoay xuống khi rê chuột hoặc khi mở; rê chuột xem trước mục con (không giữ), bấm để giữ mở, bấm lần nữa để đóng */
#side .sidenav button[data-sidetab]:not(.nokids):not([data-sidetab="o"])::after{content:"▸"!important;display:block;margin-left:auto;width:22px;text-align:center;font-size:21px;line-height:1;transition:transform .2s ease}
#side[data-open="v"]:not(.shut) [data-sidetab="v"]::after,#side[data-open="t"]:not(.shut) [data-sidetab="t"]::after,#side[data-open="d"]:not(.shut) [data-sidetab="d"]::after,#side[data-open="n"]:not(.shut) [data-sidetab="n"]::after{transform:rotate(90deg)}
/* đã bấm đóng: mục con ẩn thật sự (quy tắc mở có độ ưu tiên cao hơn nên phải nâng độ ưu tiên) */
#side.shut[data-open="t"] #sk-t,#side.shut[data-open="d"] #sk-d,#side.shut[data-open="n"] #sk-n,#side.shut[data-open="v"] #dsb{display:none!important}
@media(hover:hover) and (min-width:1000px){
 #side:not(.nohover) .sidenav button[data-sidetab]:not(.nokids):not([data-sidetab="o"]):hover::after{transform:rotate(90deg)}
 #side:not(.nohover) .sidenav button[data-sidetab="t"]:hover+#sk-t,#side:not(.nohover) #sk-t:hover,
 #side:not(.nohover) .sidenav button[data-sidetab="d"]:hover+#sk-d,#side:not(.nohover) #sk-d:hover,
 #side:not(.nohover) .sidenav button[data-sidetab="n"]:hover+#sk-n,#side:not(.nohover) #sk-n:hover,
 #side:not(.nohover) .sidenav button[data-sidetab="v"]:hover+#dsb,#side:not(.nohover) #dsb:hover{display:block!important}
}
/* Trình xem PDF: bàn tay kéo trang, tìm kiếm, tô sáng kết quả */
#pdb.hand{cursor:grab;user-select:none}#pdb.hand.drag{cursor:grabbing}
#pdhd[aria-pressed="true"]{background:var(--acbg);border-color:var(--ac);color:var(--ac)}
.pdsb{align-items:center;gap:6px;margin:6px 0}.pdsb input{flex:1 1 220px;min-width:120px;max-width:420px}
.pdsh{position:absolute;pointer-events:none;background:rgba(255,213,0,.42);mix-blend-mode:multiply;border-radius:2px}
.pdsh.cur{background:rgba(255,122,0,.5);outline:2px solid #ff7a00}
/* Chuông thông báo cạnh nút sáng/tối (js/thongbao.js) */
#bell{position:relative}
#bell.has{color:var(--ac)}
.bellc{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;font:700 10.5px/17px system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px var(--card)}
#bell.ring svg{animation:bellring .9s ease 1}
@keyframes bellring{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}}
.bell-p{position:fixed;z-index:300;width:min(380px,calc(100vw - 16px));max-height:min(70vh,520px);display:flex;flex-direction:column;background:var(--card);color:var(--fg);border:1px solid var(--bd);border-radius:14px;box-shadow:var(--sh);overflow:hidden}
.bell-p[hidden]{display:none}
.bell-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--bd2)}
.bell-h b{font-size:15px}.bell-r{font-size:12.5px}
.bell-l{overflow:auto;padding:6px}
.bell-e{margin:0;padding:22px 12px;text-align:center;color:var(--mut);font-size:13.5px}
.bell-i{display:flex;gap:10px;align-items:flex-start;width:100%;padding:10px;border:0;border-radius:10px;background:none;color:inherit;text-align:left;cursor:pointer}
.bell-i:hover{background:var(--acbg)}
.bell-ic{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--acbg);font-size:16px}
.bell-t{display:flex;flex-direction:column;gap:2px;min-width:0}.bell-t b{font-size:13.5px}.bell-t small{color:var(--mut);font-size:12px;line-height:1.35;overflow-wrap:anywhere}
/* Nút Trợ lý = linh vật EVN Ialy (img/ai-bot.webp); thu nhỏ chỉ còn nút này */
.aifab{width:64px!important;height:64px!important;padding:0!important;border-radius:50%!important;background:var(--card)!important;border:2px solid var(--ac)!important;box-shadow:var(--sh);overflow:hidden}
.aifab img{width:56px;height:56px;display:block;object-fit:contain;pointer-events:none;transition:transform .2s ease}
.aifab:hover img{transform:scale(1.08)}
.aiav{width:28px;height:28px;flex:none;object-fit:contain}
.aipanel{bottom:90px!important}
body #totop{bottom:calc(96px + env(safe-area-inset-bottom))!important}
@media(max-width:700px){body:not([data-tab="v"]) .aipanel{bottom:calc(150px + env(safe-area-inset-bottom))!important}body:not([data-tab="v"]) #totop{bottom:calc(152px + env(safe-area-inset-bottom))!important}}
.aipanel{max-height:calc(100vh - 102px)!important}
@media(max-width:700px){body:not([data-tab="v"]) .aipanel{max-height:calc(100vh - 162px)!important}}