/* khung.css - KHUNG LAM VIEC CHUNG cho mo-dun (web/js/khung.js): token ngu nghia + che do toi (thu nghiem), bang quan ly,
   thong bao xep hang + trung tam thong bao, bang lenh Ctrl+K, bang phim tat, an giao dien.
   KHONG doi kieu hien thi ban do (mau TT16 / ACI / nen) - chi khung giao dien. Nap SAU theme.css. */

/* ---------- token ngu nghia (anh xa sang token cu: --brand / --panel / --ink van dung) ---------- */
:root{
  --wg-bg:var(--panel,#fff); --wg-bg-soft:var(--surface,#f8f9fa); --wg-fg:var(--ink,#202124); --wg-fg-soft:var(--ink-soft,#5f6368);
  --wg-line:var(--line-soft,#e8eaed); --wg-accent:var(--brand,#1a73e8); --wg-accent-weak:var(--brand-weak,#e8f0fe);
  --wg-ok:var(--ok,#188038); --wg-warn:var(--warn,#e37400); --wg-err:var(--danger,#d93025); --wg-info:#1a73e8;
  --wg-z-panel:32; --wg-z-pop:58; --wg-z-toast:95; --wg-z-cmd:96;
}
/* che do toi (THU NGHIEM - bang lenh: «Giao diện tối»): chi khung giao dien, nen ban do do bo chon nen quyet dinh */
:root[data-theme="dark"]{
  --panel:#1f2329; --surface:#15181c; --ink:#e6e8eb; --ink-soft:#a8b0b9; --ink-faint:#7c8590;
  --line:#3a4048; --line-soft:#2e343b; --brand:#6aa7ff; --brand-ink:#9cc4ff; --brand-weak:#1d2b40;
  --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 4px 14px rgba(0,0,0,.45); --shadow-3:0 10px 30px rgba(0,0,0,.55);
  color-scheme:dark;
}
:root[data-theme="dark"] body{background:var(--surface);color:var(--ink)}
:root[data-theme="dark"] :is(#sidebar,.tool-body,.tg-menu,.modal-box,.ext-panel,.wg-pn,[class$="-panel"],[class*="-panel "],.dock,.card,.popup,.maplibregl-popup-content){
  background-color:var(--panel)!important;color:var(--ink);border-color:var(--line-soft)}
:root[data-theme="dark"] :is(input,select,textarea){background:#2a3038;color:var(--ink);border-color:var(--line)}

/* ---------- bang duoc khung quan ly (bang mo-dun cu tu nhan + bang moi WG.panels.open) ---------- */
.wg-ql{transition:box-shadow .15s}
.wg-ql.wg-front{box-shadow:var(--shadow-3),0 0 0 2px var(--wg-accent-weak)}
.wg-ql .wg-keo{cursor:grab;touch-action:none}
.wg-ql.wg-dang-keo{opacity:.92;user-select:none}
.wg-ql.wg-dang-keo .wg-keo{cursor:grabbing}
.wg-ql .wg-keo:focus-visible{outline:2px solid var(--wg-accent);outline-offset:2px;border-radius:6px}
.wg-pn-min,.wg-pn-ben{border:0;background:none;cursor:pointer;color:var(--wg-fg-soft);font-size:16px;line-height:1;padding:2px 6px;border-radius:6px}
.wg-pn-min:hover,.wg-pn-ben:hover{background:var(--wg-bg-soft);color:var(--wg-fg)}
.wg-ql.wg-thu{max-height:none!important;height:auto!important;overflow:hidden!important}
.wg-ql.wg-thu>:not(.wg-keo){display:none!important}

/* bang moi theo khuon chung (WG.panels.open) */
/* bang mo-dun goi WG.panels.adopt(el) ma CSS rieng khong dat vi tri -> vi tri mac dinh cua khung (:where = do uu tien 0, bang nao tu dat van giu) */
:where(.wg-ql:not(.wg-pn)){position:absolute;top:12px;right:64px;z-index:var(--wg-z-panel);max-height:calc(100% - 24px);overflow:auto}
:where(.wg-ql)[hidden]{display:none}
.wg-pn{position:absolute;top:12px;right:64px;z-index:var(--wg-z-panel);width:min(380px,calc(100vw - 96px));max-height:calc(100% - 24px);
  display:flex;flex-direction:column;background:var(--wg-bg);color:var(--wg-fg);border:1px solid var(--wg-line);border-radius:14px;
  box-shadow:var(--shadow-3);font-size:12.5px;overflow:hidden}
.wg-pn-head{display:flex;align-items:center;gap:6px;padding:8px 8px 8px 12px;border-bottom:1px solid var(--wg-line);flex:0 0 auto}
.wg-pn-head .ic{width:18px;height:18px;color:var(--wg-accent)}
.wg-pn-title{flex:1;min-width:0;font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg-pn-x{border:0;background:none;cursor:pointer;color:var(--wg-fg-soft);font-size:18px;line-height:1;padding:2px 7px;border-radius:6px}
.wg-pn-x:hover{background:var(--wg-bg-soft);color:var(--wg-fg)}
.wg-pn-body{padding:10px 12px;overflow:auto;flex:1 1 auto;display:flex;flex-direction:column;gap:8px}

/* thanh «bang dang mo» (>= 2 bang) */
#wg-mo{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;z-index:var(--wg-z-pop);display:flex;gap:4px;max-width:calc(100% - 420px);
  padding:3px;background:var(--wg-bg);border:1px solid var(--wg-line);border-radius:999px;box-shadow:var(--shadow-2);overflow-x:auto;scrollbar-width:none}
#wg-mo button{border:0;background:none;cursor:pointer;font:inherit;font-size:12px;color:var(--wg-fg-soft);padding:4px 10px;border-radius:999px;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
#wg-mo button.on{background:var(--wg-accent-weak);color:var(--wg-accent);font-weight:600}
#wg-mo button.thu{opacity:.65;font-style:italic}

/* ---------- thong bao xep hang ---------- */
#wg-toasts{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:var(--wg-z-toast);display:flex;flex-direction:column-reverse;gap:8px;
  width:min(460px,calc(100vw - 24px));pointer-events:none}
.wg-t{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:10px 10px 10px 14px;border-radius:12px;background:#202124;color:#fff;
  box-shadow:var(--shadow-3);font-weight:600;font-size:13px;line-height:1.4;border-left:5px solid #5f6368;animation:wgTin .22s cubic-bezier(.2,.7,.3,1)}
.wg-t.ok{background:#0f5132;border-left-color:#34a853} .wg-t.err{background:#7a1c14;border-left-color:#f28b82}
.wg-t.warn{background:#7a4a00;border-left-color:#fbbc04} .wg-t.info{background:#174ea6;border-left-color:#8ab4f8}
.wg-t-m{flex:1;min-width:0;overflow-wrap:anywhere}
.wg-t button{border:0;cursor:pointer;font:inherit;border-radius:8px}
.wg-t-a{background:rgba(255,255,255,.18);color:#fff;padding:3px 10px;font-size:12px}
.wg-t-a:hover{background:rgba(255,255,255,.3)}
.wg-t-x{background:none;color:rgba(255,255,255,.8);font-size:17px;line-height:1;padding:0 4px}
.wg-t-x:hover{color:#fff}
@keyframes wgTin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wg-t{animation:none}}

/* nut chuong + trung tam thong bao */
#t-thongbao{position:relative}
#t-thongbao .wg-dem{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--wg-err);color:#fff;
  font-size:10px;font-weight:700;line-height:16px;text-align:center;pointer-events:none}
#wg-tb{position:fixed;z-index:var(--wg-z-pop);width:min(380px,calc(100vw - 24px));max-height:min(520px,calc(100vh - 32px));display:flex;flex-direction:column;
  background:var(--wg-bg);color:var(--wg-fg);border:1px solid var(--wg-line);border-radius:14px;box-shadow:var(--shadow-3);font-size:12.5px}
#wg-tb header{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--wg-line)}
#wg-tb header b{flex:1;font-size:14px}
#wg-tb header button{border:0;background:none;cursor:pointer;color:var(--wg-accent);font:inherit;font-size:12px;padding:2px 6px;border-radius:6px}
#wg-tb header button:hover{background:var(--wg-accent-weak)}
#wg-tb ul{list-style:none;margin:0;padding:4px 0;overflow:auto}
#wg-tb li{display:flex;gap:8px;padding:7px 12px;border-bottom:1px solid var(--wg-line)}
#wg-tb li.moi{background:var(--wg-accent-weak)}
#wg-tb li i{flex:0 0 8px;height:8px;margin-top:5px;border-radius:50%;background:#9aa0a6}
#wg-tb li.ok i{background:var(--wg-ok)} #wg-tb li.err i{background:var(--wg-err)} #wg-tb li.warn i{background:var(--wg-warn)} #wg-tb li.info i{background:var(--wg-info)}
#wg-tb li span{flex:1;min-width:0;overflow-wrap:anywhere}
#wg-tb li time{color:var(--wg-fg-soft);font-size:11px;white-space:nowrap}
#wg-tb .wg-rong{padding:28px 16px;text-align:center;color:var(--wg-fg-soft)}

/* ---------- bang lenh Ctrl+K ---------- */
dialog#wg-cmd{z-index:var(--wg-z-cmd);border:0;padding:0;border-radius:16px;width:min(640px,calc(100vw - 24px));max-height:min(560px,calc(100vh - 80px));
  margin:10vh auto auto;background:var(--wg-bg);color:var(--wg-fg);box-shadow:var(--shadow-3);overflow:hidden}
dialog#wg-cmd[open]{display:flex;flex-direction:column}
dialog#wg-cmd::backdrop{background:rgba(32,33,36,.45);backdrop-filter:blur(2px)}
.wg-cmd-top{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--wg-line)}
.wg-cmd-top .ic{width:20px;height:20px;color:var(--wg-fg-soft)}
.wg-cmd-top input{flex:1;min-width:0;border:0;outline:0;background:none;color:inherit;font:inherit;font-size:16px}
.wg-cmd-top kbd,.wg-cmd-r kbd,.wg-ph kbd{font:600 11px/1 ui-monospace,Consolas,monospace;padding:3px 6px;border:1px solid var(--wg-line);border-bottom-width:2px;border-radius:6px;color:var(--wg-fg-soft);background:var(--wg-bg-soft)}
.wg-cmd-ds{overflow:auto;padding:6px 0}
.wg-cmd-nhom{padding:8px 16px 4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--wg-fg-soft)}
.wg-cmd-r{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer}
.wg-cmd-r .ic{width:18px;height:18px;color:var(--wg-fg-soft);flex:0 0 auto}
.wg-cmd-r div{flex:1;min-width:0}
.wg-cmd-r b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg-cmd-r small{display:block;color:var(--wg-fg-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg-cmd-r mark{background:none;color:var(--wg-accent);font-weight:700}
.wg-cmd-r.on{background:var(--wg-accent-weak)}
.wg-cmd-r.on .ic{color:var(--wg-accent)}
.wg-cmd-rong{padding:22px 16px;text-align:center;color:var(--wg-fg-soft)}
.wg-cmd-chan{display:flex;gap:14px;flex-wrap:wrap;padding:8px 14px;border-top:1px solid var(--wg-line);font-size:11.5px;color:var(--wg-fg-soft)}

/* ---------- bang phim tat (?) ---------- */
dialog#wg-ph,dialog#wg-xn{z-index:var(--wg-z-cmd);border:0;border-radius:16px;padding:0;width:min(560px,calc(100vw - 24px));background:var(--wg-bg);color:var(--wg-fg);box-shadow:var(--shadow-3)}
dialog#wg-ph::backdrop,dialog#wg-xn::backdrop{background:rgba(32,33,36,.45)}
.wg-ph{padding:16px 18px}
.wg-ph h3{margin:0 0 10px;font-size:16px}
.wg-ph table{width:100%;border-collapse:collapse;font-size:13px}
.wg-ph td{padding:6px 4px;border-bottom:1px solid var(--wg-line)}
.wg-ph td:first-child{white-space:nowrap;width:42%}
.wg-ph .wg-ph-chan{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}
.wg-ph label{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.wg-ph button{font:inherit}

/* ---------- an giao dien (Ctrl+\) - trinh chieu ---------- */
body.wg-an-gd #sidebar,body.wg-an-gd #toolbar,body.wg-an-gd #table-dock,body.wg-an-gd .wg-ql,body.wg-an-gd #wg-mo{display:none!important}
#wg-hien-gd{position:fixed;top:10px;right:10px;z-index:var(--wg-z-pop);border:1px solid var(--wg-line);background:var(--wg-bg);color:var(--wg-fg);
  border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;box-shadow:var(--shadow-2);cursor:pointer}

/* ---------- Dot 2: thanh lenh theo doi tuong (trong bang Thong tin) + menu chuot phai tren ban do ---------- */
.wg-ngc{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px;padding:6px;border:1px solid var(--wg-line);border-radius:8px;background:var(--wg-bg-soft)}
.wg-ngc .wg-ngc-b{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border:1px solid var(--wg-line);border-radius:999px;background:var(--wg-bg);color:var(--wg-fg);font:inherit;font-size:12.5px;cursor:pointer}
.wg-ngc .wg-ngc-b:hover{border-color:var(--wg-accent);color:var(--wg-accent)}
.wg-ngc .wg-ngc-b:focus-visible,#wg-ngm .wg-ngc-b:focus-visible{outline:2px solid var(--wg-accent);outline-offset:1px}
#wg-ngm{position:absolute;z-index:var(--wg-z-pop);min-width:220px;max-width:320px;padding:4px;background:var(--wg-bg);color:var(--wg-fg);border:1px solid var(--wg-line);border-radius:10px;box-shadow:var(--shadow-3,0 10px 30px rgba(0,0,0,.2))}
#wg-ngm .wg-ngm-t{padding:6px 10px 3px;font-size:11.5px;color:var(--wg-fg-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wg-ngm .wg-ngm-t:not(:first-child){border-top:1px solid var(--wg-line);margin-top:4px;padding-top:7px}
#wg-ngm .wg-ngc-b{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:none;color:inherit;font:inherit;font-size:13px;text-align:left;cursor:pointer}
#wg-ngm .wg-ngc-b:hover,#wg-ngm .wg-ngc-b:focus{background:var(--wg-accent-weak);outline:none}
#wg-ngm .wg-ngc-b .ic{flex:none;color:var(--wg-fg-soft)}
/* ---------- Dot 2: tac vu nen (WG.jobs) - nut tren thanh + bang «Tac vu» ---------- */
#t-tacvu{position:relative}
#t-tacvu .wg-dem{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--wg-accent);color:#fff;font-size:10px;line-height:16px;font-weight:600;text-align:center}
#t-tacvu .wg-dem.xong{background:var(--wg-ok)}
#t-tacvu.wg-dang::after{content:"";position:absolute;inset:3px;border:2px solid transparent;border-top-color:var(--wg-accent);border-radius:50%;animation:wg-xoay 1s linear infinite;pointer-events:none}
@keyframes wg-xoay{to{transform:rotate(360deg)}}
.wg-tv-loc{display:flex;gap:4px;align-items:center;margin-bottom:8px}
.wg-tv-loc button{padding:4px 10px;border:1px solid var(--wg-line);border-radius:999px;background:var(--wg-bg);color:var(--wg-fg-soft);font:inherit;font-size:12px;cursor:pointer}
.wg-tv-loc button[aria-selected=true]{background:var(--wg-accent-weak);border-color:var(--wg-accent);color:var(--wg-accent)}
.wg-tv-loc .wg-tv-don{margin-left:auto}
.wg-tv-ds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto}
.wg-tv{padding:8px 10px;border:1px solid var(--wg-line);border-left:3px solid var(--wg-fg-soft);border-radius:8px;background:var(--wg-bg)}
.wg-tv.cho,.wg-tv.dang_chay{border-left-color:var(--wg-accent)}
.wg-tv.xong{border-left-color:var(--wg-ok)} .wg-tv.loi{border-left-color:var(--wg-err)} .wg-tv.huy{border-left-color:var(--wg-warn)}
.wg-tv.moi{background:var(--wg-bg-soft)}
.wg-tv-h{display:flex;gap:8px;align-items:baseline}
.wg-tv-h b{flex:1;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-tv-tt{font-size:11.5px;color:var(--wg-fg-soft);white-space:nowrap}
.wg-tv.xong .wg-tv-tt{color:var(--wg-ok)} .wg-tv.loi .wg-tv-tt{color:var(--wg-err)}
.wg-tv-m{font-size:11.5px;color:var(--wg-fg-soft);margin-top:2px}
.wg-tv-b{font-size:12px;margin-top:4px;color:var(--wg-fg);word-break:break-word}
.wg-tv-bar{height:4px;margin-top:6px;border-radius:2px;background:var(--wg-line);overflow:hidden}
.wg-tv-bar i{display:block;height:100%;background:var(--wg-accent);transition:width .4s}
.wg-tv-bar.vo i{animation:wg-vo 1.4s ease-in-out infinite}
@keyframes wg-vo{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.wg-tv-a{display:flex;gap:6px;margin-top:6px}
.wg-tv-a:empty{display:none}
.wg-tv-a button{padding:3px 10px;border:1px solid var(--wg-line);border-radius:6px;background:var(--wg-bg);color:var(--wg-fg);font:inherit;font-size:12px;cursor:pointer}
.wg-tv-a button:hover{border-color:var(--wg-accent);color:var(--wg-accent)}
@media (prefers-reduced-motion:reduce){#t-tacvu.wg-dang::after,.wg-tv-bar.vo i{animation:none}}
/* ---------- Dot 2: so sanh hai ban do (sosanh.js) + ket qua phien ---------- */
.ss-b{position:absolute;top:0;bottom:0;right:0;z-index:2;background:#eaeef2}
.ss-b.canh{left:50%;border-left:2px solid var(--wg-fg)}
.ss-b.quet{left:0}
.ss-nhan{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;background:var(--wg-fg);color:var(--wg-bg);font-weight:700;font-size:12px}
#ss-nhan-a{position:absolute;z-index:3;left:12px;bottom:40px;pointer-events:none}
.ss-bar{position:absolute;z-index:4;top:10px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:5px 6px;background:var(--wg-bg);color:var(--wg-fg);border:1px solid var(--wg-line);border-radius:10px;box-shadow:var(--shadow-2,0 4px 14px rgba(0,0,0,.15));max-width:calc(50% - 16px);flex-wrap:wrap}
.ss-quet .ss-bar{max-width:calc(100% - 140px)}
.ss-bar select{max-width:180px;font:inherit;font-size:12.5px;padding:3px 4px;border:1px solid var(--wg-line);border-radius:6px;background:var(--wg-bg);color:var(--wg-fg)}
.ss-bar button{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid var(--wg-line);border-radius:6px;background:var(--wg-bg);color:var(--wg-fg);font:inherit;font-size:12.5px;cursor:pointer}
.ss-bar button:hover{border-color:var(--wg-accent);color:var(--wg-accent)}
.ss-bar button:focus-visible,.ss-tay:focus-visible{outline:2px solid var(--wg-accent);outline-offset:2px}
.ss-kieu{display:inline-flex}
.ss-kieu button{border-radius:0}
.ss-kieu button:first-child{border-radius:6px 0 0 6px}
.ss-kieu button:last-child{border-radius:0 6px 6px 0;margin-left:-1px}
.ss-kieu button[aria-checked=true]{background:var(--wg-accent-weak);border-color:var(--wg-accent);color:var(--wg-accent)}
.ss-tay{position:absolute;z-index:3;top:0;bottom:0;width:24px;margin-left:-12px;cursor:ew-resize;touch-action:none}
.ss-tay::before{content:"";position:absolute;top:0;bottom:0;left:11px;width:2px;background:var(--wg-fg);box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.ss-tay i{position:absolute;top:50%;left:0;width:24px;height:40px;margin-top:-20px;border-radius:12px;background:var(--wg-bg);border:2px solid var(--wg-fg)}
.ss-lop{position:absolute;z-index:5;min-width:240px;max-width:340px;max-height:55vh;overflow:auto;padding:8px 10px;background:var(--wg-bg);color:var(--wg-fg);border:1px solid var(--wg-line);border-radius:10px;box-shadow:var(--shadow-3,0 10px 30px rgba(0,0,0,.2))}
.ss-lop h4{margin:6px 0 4px;font-size:11.5px;font-weight:600;color:var(--wg-fg-soft);text-transform:uppercase;letter-spacing:.03em}
.ss-lop label{display:flex;gap:6px;align-items:center;padding:3px 0;font-size:13px;cursor:pointer}
.ss-rong,.ss-ghi{font-size:12px;color:var(--wg-fg-soft)}
.ss-kq{list-style:none;margin:0;padding:0}
.ss-kq li{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid var(--wg-line)}
.ss-kq label{flex:1;display:flex;gap:6px;align-items:center;font-size:13px;cursor:pointer}
.ss-kq-a{display:flex;gap:4px}
.ss-kq-a button{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border:1px solid var(--wg-line);border-radius:6px;background:var(--wg-bg);color:var(--wg-fg);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
@media (max-width:768px){.ss-b.canh{left:0;top:50%;border-left:0;border-top:2px solid var(--wg-fg)}.ss-bar{max-width:calc(100% - 16px)}.ss-canh .ss-bar{top:calc(50% + 10px)}}
@media (max-width:768px){
  #wg-mo{display:none}
  #wg-toasts{bottom:72px}
  dialog#wg-cmd{margin-top:8px;max-height:calc(100vh - 16px)}
}

/* ---------- Dot 3: di dong (body.wg-dd, duoi 768 px) - bottom sheet 3 nac + thanh tab day + vung cham 44 px ---------- */
.wg-sheet-tay,#wg-tabbar{display:none}
body.wg-dd{--wg-tab-h:calc(58px + env(safe-area-inset-bottom))}
body.wg-dd #app{height:calc(100dvh - var(--wg-tab-h))!important}
body.wg-dd #app #sidebar,body.wg-dd .sb-scrim{bottom:var(--wg-tab-h)}
body.wg-dd #toolbar{z-index:36}
body.wg-dd #wg-toasts{bottom:calc(var(--wg-tab-h) + 10px)}
body.wg-dd #wg-tabbar:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;height:var(--wg-tab-h);padding-bottom:env(safe-area-inset-bottom);background:var(--wg-bg);border-top:1px solid var(--wg-line);box-shadow:0 -2px 10px rgba(0,0,0,.08)}
#wg-tabbar button{position:relative;flex:1;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:none;color:var(--wg-fg-soft);font:inherit;font-size:11px;cursor:pointer}
#wg-tabbar button:active,#wg-tabbar button:focus-visible{background:var(--wg-accent-weak);color:var(--wg-accent);outline:none}
#wg-tabbar .wg-tab-dem{position:absolute;top:4px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--wg-accent);color:#fff;font-size:10px;line-height:16px}
/* bang -> sheet day (ghi de vi tri rieng cua tung mo-dun) */
body.wg-dd .wg-ql{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:var(--wg-tab-h)!important;width:auto!important;min-width:0!important;max-width:none!important;max-height:none!important;height:55dvh!important;margin:0!important;transform:none!important;resize:none!important;overflow:auto!important;overscroll-behavior:contain;z-index:34!important;border-radius:16px 16px 0 0!important;box-shadow:0 -6px 24px rgba(0,0,0,.2)!important}
body.wg-dd .wg-ql[data-wg-nac="1"]{height:28dvh!important}
body.wg-dd .wg-ql[data-wg-nac="3"]{height:calc(100dvh - var(--wg-tab-h) - 64px - env(safe-area-inset-top))!important}
body.wg-dd .wg-ql.wg-sau{visibility:hidden!important;pointer-events:none!important}
body.wg-dd .wg-ql .wg-pn-min,body.wg-dd .wg-ql .wg-pn-ben{display:none}
body.wg-dd .wg-ql.wg-thu>*{display:revert}
body.wg-dd .wg-sheet-tay{display:flex;position:sticky;top:0;z-index:3;align-items:center;gap:4px;padding:2px 6px;background:var(--wg-bg);border-bottom:1px solid var(--wg-line)}
.wg-sheet-nam{flex:none;width:52px;height:44px;border:0;background:none;display:grid;place-items:center;cursor:ns-resize;touch-action:none}
.wg-sheet-nam i{display:block;width:36px;height:5px;border-radius:3px;background:var(--wg-fg-soft);opacity:.45}
.wg-sheet-ten{flex:1;min-width:0;font-weight:600;font-size:13px;color:var(--wg-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-sheet-tay [data-s]{flex:none;width:44px;height:44px;border:0;border-radius:10px;background:var(--wg-bg-soft);color:var(--wg-fg);font:inherit;font-size:16px;cursor:pointer}
.wg-sheet-tay [data-s]:disabled{opacity:.35}
.wg-sheet-tay [data-s]:focus-visible,.wg-sheet-nam:focus-visible{outline:2px solid var(--wg-accent);outline-offset:-2px}
/* «bang dang mo» tren dien thoai: hang chip cuon ngang duoi banner */
body.wg-dd #wg-mo:not([hidden]){display:flex;left:8px;right:66px;top:calc(60px + env(safe-area-inset-top));bottom:auto;transform:none;max-width:none;overflow-x:auto;flex-wrap:nowrap;z-index:31}
body.wg-dd #wg-mo button{min-height:40px;white-space:nowrap}
@media (pointer:coarse){
  body.wg-dd .wg-ql button,body.wg-dd .wg-ql .btn,body.wg-dd .wg-ql select,body.wg-dd .wg-ql input:not([type=checkbox]):not([type=radio]):not([type=range]){min-height:44px}
  body.wg-dd .wg-ql input[type=checkbox],body.wg-dd .wg-ql input[type=radio]{width:22px;height:22px}
}

/* ---------- Dot 3: vung chinh co the (WG.views) - khung nhin lon cua mo-dun nam trong vung ban do ---------- */
#wg-vung:not([hidden]){position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:29;display:flex;align-items:center;gap:2px;padding:3px;background:var(--wg-bg);border:1px solid var(--wg-line);border-radius:10px;box-shadow:var(--shadow-2,0 4px 14px rgba(0,0,0,.15));max-width:calc(100% - 140px);overflow-x:auto}
#wg-vung [role=tab]{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:0;border-radius:7px;background:none;color:var(--wg-fg-soft);font:inherit;font-size:12.5px;white-space:nowrap;cursor:pointer}
#wg-vung [role=tab][aria-selected=true]{background:var(--wg-accent-weak);color:var(--wg-accent);font-weight:600}
#wg-vung .wg-kn-the{display:inline-flex;align-items:center}
#wg-vung .wg-kn-x{border:0;background:none;color:var(--wg-fg-soft);font-size:15px;line-height:1;padding:4px 6px;border-radius:6px;cursor:pointer}
#wg-vung .wg-kn-x:hover{background:var(--wg-bg-soft);color:var(--wg-err)}
#wg-vung button:focus-visible{outline:2px solid var(--wg-accent);outline-offset:-2px}
.wg-kn{position:absolute!important;inset:50px 8px 8px 8px!important;z-index:28!important;border-radius:12px}
.wg-kn.wg-kn-an{display:none!important}
body.wg-co-kn .wg-ql:not(.wg-sheet){visibility:hidden}   /* dang xem khung nhin lon: bang noi tam an, chuyen ve «Ban do» thay lai */
body.wg-dd .wg-kn{inset:50px 0 0 0!important;border-radius:0}

/* ---------- Dot 4: tro ly AI goi mo-dun - buoc mo-dun, the xem truoc / xac nhan, mien tru, @ nhac ---------- */
.ai-step.is-md{background:var(--wg-accent-weak);color:var(--wg-accent)}
.ai-step.is-md::before{content:"▣ "}
.ai-mien-tru{margin-top:6px;font-size:11px;color:var(--wg-fg-soft);font-style:italic;border-top:1px dashed var(--wg-line);padding-top:4px}
.ai-xn{margin:8px 0 2px;padding:8px 10px;border:1px solid var(--wg-warn);border-left-width:4px;border-radius:8px;background:var(--wg-bg)}
.ai-xn.xong{border-color:var(--wg-ok)} .ai-xn.loi{border-color:var(--wg-err)} .ai-xn.huy{border-color:var(--wg-line);opacity:.75}
.ai-xn-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px}
.ai-xn-h .muted{font-size:11px}
.ai-xn-tb{width:100%;border-collapse:collapse;margin:6px 0;font-size:12px}
.ai-xn-tb td{padding:2px 4px;border-bottom:1px solid var(--wg-line);vertical-align:top}
.ai-xn-tb td:first-child{color:var(--wg-fg-soft);width:34%}
.ai-xn-a{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ai-xn-a .muted{font-size:11px}
.ai-xn-tt{font-size:12px;font-weight:600}
.ai-xn.xong .ai-xn-tt{color:var(--wg-ok)} .ai-xn.loi .ai-xn-tt{color:var(--wg-err)}
.ai-nhac{display:flex;flex-direction:column;max-height:180px;overflow:auto;margin:0 8px 4px;border:1px solid var(--wg-line);border-radius:8px;background:var(--wg-bg);box-shadow:var(--shadow-2,0 4px 14px rgba(0,0,0,.15))}
.ai-nhac[hidden]{display:none}
.ai-nhac button{border:0;background:none;text-align:left;padding:6px 10px;font:inherit;font-size:12.5px;color:var(--wg-fg);cursor:pointer}
.ai-nhac button:hover{background:var(--wg-accent-weak)}

/* ---------- Dot 4: de xuat AI dung chung (WG.ui.aiSuggestion) ---------- */
.wg-ai-dx{margin:6px 0;padding:8px 10px;border:1px solid var(--wg-line);border-left:4px solid #8b5cf6;border-radius:8px;background:var(--wg-bg)}
.wg-ai-dx.dung{border-left-color:var(--wg-ok)} .wg-ai-dx.sai{border-left-color:var(--wg-err);opacity:.8}
.wg-ai-dx-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px}
.wg-ai-dx-nhan{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;color:#6d28d9;background:#ede9fe;border-radius:999px;padding:1px 7px}
:root[data-theme="dark"] .wg-ai-dx-nhan{background:#2e1065;color:#c4b5fd}
.wg-ai-dx-tin{font-size:11px;color:var(--wg-fg-soft)}
.wg-ai-dx-tt{margin-left:auto;font-size:11px;font-weight:600}
.wg-ai-dx.dung .wg-ai-dx-tt{color:var(--wg-ok)} .wg-ai-dx.sai .wg-ai-dx-tt{color:var(--wg-err)}
.wg-ai-dx-nd{margin-top:4px;font-size:12.5px}
.wg-ai-dx-nut{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.wg-ai-dx-b{padding:3px 10px;border:1px solid var(--wg-line);border-radius:6px;background:var(--wg-bg);color:var(--wg-fg);font:inherit;font-size:12px;cursor:pointer}
.wg-ai-dx-b.on{background:var(--wg-accent-weak);border-color:var(--wg-accent);color:var(--wg-accent);font-weight:600}
.wg-ai-dx-ghi{margin-top:5px;font-size:10.5px;color:var(--wg-fg-soft);font-style:italic}

/* ---------- Tuy bien giao dien (web/js/giao-dien.js) ---------- */
.tool.gd-an{display:none!important}
.brand-mark.gd-logo{background:#fff!important;padding:2px;overflow:hidden}
.gd-than{font-size:13px;gap:8px}
.gd-the{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--wg-line);padding-bottom:6px}
.gd-the button{padding:5px 10px;border:1px solid var(--wg-line);border-radius:999px;background:var(--wg-bg);color:var(--wg-fg-soft);font:inherit;font-size:12.5px;cursor:pointer}
.gd-the button[aria-selected=true]{background:var(--wg-accent-weak);border-color:var(--wg-accent);color:var(--wg-accent);font-weight:600}
.gd-nd{overflow:auto;max-height:60vh;padding-right:2px}
.gd-nd h4{margin:12px 0 6px;font-size:12.5px}
.gd-ghi{font-size:11.5px;margin:4px 0 8px}
.gd-luoi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gd-luoi label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--wg-fg-soft)}
.gd-luoi input,.gd-nut input,.gd-nut select,.gd-nhom header input,.gd-bt-them input{font:inherit;font-size:12.5px;padding:4px 7px;border:1px solid var(--wg-line);border-radius:6px;background:var(--wg-bg);color:var(--wg-fg);min-width:0}
.gd-logo-hang{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.gd-logo-xem{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--brand,#1a73e8);color:#fff;font-weight:700;overflow:hidden}
.gd-logo-xem img{width:100%;height:100%;object-fit:contain;background:#fff}
.gd-mau-san{display:flex;flex-wrap:wrap;gap:6px}
.gd-mau-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid var(--wg-line);border-radius:999px;background:var(--wg-bg);color:var(--wg-fg);font:inherit;font-size:12px;cursor:pointer}
.gd-mau-chip i{width:12px;height:12px;border-radius:50%}
.gd-mau{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:8px}
.gd-mau label{display:flex;align-items:center;gap:6px;font-size:12.5px}
.gd-mau input[type=color]{width:34px;height:26px;padding:0;border:1px solid var(--wg-line);border-radius:6px;background:none;cursor:pointer}
.gd-mau em{font-size:11px}
.gd-x{border:0;background:none;color:var(--wg-fg-soft);font-size:14px;cursor:pointer;padding:2px 5px;border-radius:5px}
.gd-x:hover{background:var(--wg-bg-soft);color:var(--wg-err)}
.gd-nhom{border:1px solid var(--wg-line);border-radius:8px;margin:8px 0;padding:6px}
.gd-nhom header{display:flex;align-items:center;gap:6px;padding-bottom:6px;border-bottom:1px dashed var(--wg-line);margin-bottom:4px}
.gd-nhom header input{flex:1;font-weight:600}
.gd-nut{display:grid;grid-template-columns:30px 1.2fr 1.3fr 110px auto auto auto;gap:4px;align-items:center;padding:3px 0}
.gd-nut.an{opacity:.5}
.gd-ic{display:grid;place-items:center;width:30px;height:28px;border:1px solid var(--wg-line);border-radius:6px;background:var(--wg-bg);color:var(--wg-fg);cursor:pointer}
.gd-ic:hover{border-color:var(--wg-accent);color:var(--wg-accent)}
.gd-nn{display:inline-flex}
.gd-nn button{border:1px solid var(--wg-line);background:var(--wg-bg);color:var(--wg-fg);width:22px;height:24px;cursor:pointer;font-size:12px}
.gd-nn button:first-child{border-radius:5px 0 0 5px} .gd-nn button:last-child{border-radius:0 5px 5px 0;margin-left:-1px}
.gd-nn button:disabled{opacity:.35;cursor:default}
.gd-an-o{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;color:var(--wg-fg-soft);white-space:nowrap}
.gd-chan{display:flex;align-items:center;gap:6px;border-top:1px solid var(--wg-line);padding-top:8px}
.gd-chan .gd-tt{flex:1;font-size:11.5px}
.gd-chon-ic{position:fixed;z-index:var(--wg-z-cmd);width:300px;padding:8px;background:var(--wg-bg);color:var(--wg-fg);border:1px solid var(--wg-line);border-radius:10px;box-shadow:var(--shadow-3,0 10px 30px rgba(0,0,0,.2));display:flex;flex-direction:column;gap:6px}
.gd-chon-ic input{font:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--wg-line);border-radius:6px}
.gd-chon-luoi{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;max-height:220px;overflow:auto}
.gd-chon-luoi button{display:grid;place-items:center;height:30px;border:1px solid transparent;border-radius:6px;background:none;color:var(--wg-fg);cursor:pointer}
.gd-chon-luoi button:hover{border-color:var(--wg-accent);background:var(--wg-accent-weak)}
.gd-bt{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.gd-bt-o{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 8px;border:1px solid var(--wg-line);border-radius:999px;font-size:12px}
.gd-bt-them{display:grid;grid-template-columns:140px 1fr auto;gap:6px}
.gd-hang{display:flex;gap:6px;flex-wrap:wrap}
.gd-ls{list-style:none;margin:0;padding:0}
.gd-ls li{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;align-items:center;padding:5px 0;border-bottom:1px solid var(--wg-line);font-size:12px}
@media (max-width:768px){.gd-luoi,.gd-mau{grid-template-columns:1fr}.gd-nut{grid-template-columns:30px 1fr 1fr;grid-auto-rows:auto}}
/* dien thoai: bang soan trong sheet - noi dung gian het chieu cao, the cuon ngang, nut Luu / Huy luon o cuoi */
body.wg-dd .wg-pn>.wg-pn-head{display:none}   /* sheet: tay nam da co ten + nut dong */
body.wg-dd .gd-nd>.gd-ghi:first-child{display:none}
body.wg-dd .gd-than{display:flex;flex-direction:column;min-height:0;height:100%}
body.wg-dd .gd-the{flex-wrap:nowrap;overflow-x:auto;flex:none}
body.wg-dd .gd-the button{flex:none}
body.wg-dd .gd-nd{max-height:none;flex:1 1 auto;min-height:120px}
body.wg-dd .gd-chan{position:sticky;bottom:0;background:var(--wg-bg);flex:none;padding-bottom:4px}
body.wg-dd .gd-nut{border-bottom:1px solid var(--wg-line);padding:6px 0;grid-template-columns:30px minmax(0,1fr) auto auto auto;column-gap:4px;row-gap:4px}
body.wg-dd .gd-nut>:nth-child(1){grid-column:1;grid-row:1}
body.wg-dd .gd-nut>:nth-child(2){grid-column:2;grid-row:1}
body.wg-dd .gd-nut>:nth-child(3){grid-column:2/-1;grid-row:2}
body.wg-dd .gd-nut>:nth-child(4){grid-column:2/-1;grid-row:3}
body.wg-dd .gd-nut>:nth-child(4):empty{display:none}
body.wg-dd .gd-nut>:nth-child(5){grid-column:3;grid-row:1}
body.wg-dd .gd-nut>:nth-child(6){grid-column:4;grid-row:1}
body.wg-dd .gd-nut>:nth-child(7){grid-column:5;grid-row:1}
body.wg-dd .gd-nhom header{flex-wrap:wrap}

/* ---------- Thong bao chi trong chuong (mac dinh): rung nhe + cham do khi co loi, nut hanh dong trong danh sach ---------- */
.wg-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes wg-rung{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
#t-thongbao.wg-rung svg.ic{animation:wg-rung .7s ease-in-out;transform-origin:50% 10%}
#t-thongbao.wg-co-loi .wg-dem{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(217,48,37,.35)}
@media (prefers-reduced-motion:reduce){#t-thongbao.wg-rung svg.ic{animation:none}}
.wg-tb-hd{display:inline-block;margin:4px 0 0;padding:2px 9px;border:1px solid var(--wg-accent);border-radius:6px;background:var(--wg-accent-weak);color:var(--wg-accent);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
#wg-tb li span{display:flex;flex-direction:column;align-items:flex-start}

/* giao dien toi: nut thuong theo token toi (truoc day nen trang chu mo) */
:root[data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger){background:var(--panel);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger):hover{background:var(--surface)}
:root[data-theme="dark"] .btn:disabled{opacity:.45}