/* theme-0811: lớp vỏ theo bảng thiết kế v95 (cùng bộ màu, chữ, menu với canvas). Nạp sau app.css, chỉ đổi vỏ, không đổi bố cục trang. */
:root{--ink:#0E2740;--ink2:#34506B;--ink3:#51698A;--line:#D3DDE7;--line2:#E6ECF2;--bg:#F2F5F9;--sf:#FFFFFF;--sf2:#F7F9FC;
--rail:#0F2B47;--rail2:#16395C;--railtx:#B7C8DA;--or:#F26522;--or2:#D9520F;--ortx:#B9440B;--orbg:#FFF1E8;--orbtn:#C84B0B;
--ok:#0F7A55;--okbg:#DCF2E8;--wa:#975800;--wabg:#FFEFD2;--er:#B8233A;--erbg:#FCE2E6;--in:#1D5DBA;--inbg:#E2ECFB;--aq:#0A6C72;--aqbg:#DAF3F2;--pu:#5B3FB5;--pubg:#ECE7FB;--ne:#34506B;--nebg:#E8EEF4}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:'Be Vietnam Pro',system-ui,sans-serif}
a{color:var(--ortx)}a:hover{color:var(--or2)}
.muted,.cap.muted{color:var(--ink3)!important}
.lbl{color:var(--ink2)!important;text-transform:none;letter-spacing:0;font-size:12px;font-weight:700}
.h1{color:var(--ink);font-size:24px;line-height:32px;font-weight:700;letter-spacing:-.015em}
.h2,.card .h2{color:var(--ink);font-weight:700}
main.page{padding:16px 24px 24px;gap:12px}
main.page > header.hdr .h1{font-size:22px;line-height:30px}
main.page > header.hdr .btn{min-height:36px;padding:0 12px;font-size:13px}
main.page > header.hdr .chip{font-size:11.5px;padding:1px 7px}
/* thẻ */
.card{background:var(--sf);border:1px solid var(--line);border-radius:12px;box-shadow:none}
.card.pad,.pad{padding:14px 18px}
/* nút, chọn */
.btn{border-radius:9px;background:var(--sf);color:var(--ink);border:1px solid var(--line)}
.btn:hover{background:var(--sf2)}
.btn-p,.qa-p,.qa.qa-p,a.btn-p{background:var(--orbtn)!important;border-color:var(--orbtn)!important;color:#FFFFFF!important;box-shadow:none!important}
.btn-p:hover,.qa-p:hover,a.btn-p:hover{background:#B03F06!important;border-color:#B03F06!important}
.btn-g{background:var(--sf)!important;border:1px solid var(--line)!important;color:var(--ink)!important}
.btn-r{background:#FFFFFF!important;color:var(--er)!important;border:1px solid #F1C4CF}
.qa{border-radius:6px;background:var(--sf2);color:var(--ink);border:1px solid var(--line2)}
.qa:hover{background:#EEF2F7}
.seg{background:#E8EEF4;border-radius:9px;padding:3px}
.seg button,.seg a,.seg > *{color:var(--ink2);border-radius:6px}
.seg .seg-on,.seg button.seg-on,.seg a.seg-on{background:#FFFFFF;color:var(--ink);box-shadow:0 1px 2px rgba(14,39,64,.14)}
.tg{border-radius:6px;border-color:var(--line);color:var(--ink);background:var(--sf)}
.tg .n{color:var(--ink3);font-weight:700}
.tg-on,.pill-on{background:var(--rail)!important;border-color:var(--rail)!important;color:#FFFFFF!important}
.tg-on .n{color:#FFFFFF}
.chip{border-radius:6px;background:var(--nebg);color:var(--ne)}
.chip.i-soft{background:var(--nebg);color:var(--ne)}
.chip.i-mint,.i-mint.chip{background:var(--okbg);color:var(--ok)}
.chip.i-butter{background:var(--wabg);color:var(--wa)}
.chip.i-rose{background:var(--erbg);color:var(--er)}
.chip.i-sky{background:var(--inbg);color:var(--in)}
.chip.i-peach{background:var(--orbg);color:var(--ortx)}
.chip.i-aqua,.chip.i-lav{background:var(--aqbg);color:var(--aq)}
.sla-tre{background:var(--erbg);color:var(--er)}.sla-sap{background:var(--wabg);color:var(--wa)}.sla-ok{background:var(--nebg);color:var(--ne)}
.ico.i-mint{background:var(--okbg);color:var(--ok)}.ico.i-sky{background:var(--inbg);color:var(--in)}.ico.i-aqua,.ico.i-lav{background:var(--aqbg);color:var(--aq)}
.ico.i-butter{background:var(--wabg);color:var(--wa)}.ico.i-peach{background:var(--orbg);color:var(--ortx)}.ico.i-rose{background:var(--erbg);color:var(--er)}.ico.i-soft{background:var(--nebg);color:var(--ne)}
.ico{border-radius:10px}
.who{background:#E8EDF3;color:var(--ink);border-radius:7px}
.nvc{background:var(--sf2);color:var(--ink)}
.kbd,kbd{display:inline-flex;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:#FFFFFF;font:700 11px/18px 'Be Vietnam Pro',sans-serif;color:var(--ink2);justify-content:center;vertical-align:middle}
.info{border-color:var(--line);color:var(--ink2)}
.fld input,.fld select,.fld textarea,.inp{border-color:var(--line);color:var(--ink);border-radius:8px}
.fld input:focus,.fld select:focus,.fld textarea:focus,.inp:focus{outline:2px solid #BCD3F3;outline-offset:1px;border-color:#9FBDE6}
.ck input{accent-color:var(--orbtn)}
/* bảng: chữ thường, không in hoa */
.ls th{font-size:12px;line-height:16px;color:var(--ink2);font-weight:700;text-transform:none;letter-spacing:0;border-bottom:1px solid var(--line)}
.ls td{border-bottom:1px solid var(--line2);color:var(--ink)}
.ls tr.row-on td{background:#EEF4FB}.ls tr.row-on td:first-child{box-shadow:inset 3px 0 0 var(--or)}
.ls tr.click:hover td{background:var(--sf2)}
.empty{color:var(--ink3)}
.toast{background:var(--rail);color:#fff;border-radius:12px}
.toast.err{background:var(--erbg);color:var(--er)}
.pill-red,.rbadge{background:var(--orbtn)}
.su-strip{background:#FFF4EC;border:1px solid #FFD3BC;border-radius:12px}
.su-strip .su-av{background:var(--aq)}
.drawer{box-shadow:-12px 0 32px rgba(14,39,64,.18);border-left:1px solid var(--line)}
.kv>span,.kv dt{color:var(--ink3)}
/* cách dùng màn này */
details.howto{align-self:flex-start;max-width:100%}
details.howto > summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:600 12px/16px 'Be Vietnam Pro',sans-serif;border:1px solid var(--line);background:var(--sf);color:var(--ink2);border-radius:999px;min-height:28px;padding:0 12px}
details.howto > summary::-webkit-details-marker{display:none}
details.howto > summary::before{content:"?";width:16px;height:16px;border-radius:50%;border:1.6px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
details.howto[open] > summary{border-color:#BCD3F3;color:var(--in)}
details.howto > ol{margin:8px 0 0;padding:12px 16px 12px 34px;background:var(--inbg);border:1px solid #BCD3F3;border-radius:10px;color:#173F78;font-size:13px;line-height:20px;max-width:900px}
details.howto li + li{margin-top:4px}
/* menu trái: xanh đậm, rộng 220, chữ cạnh biểu tượng, nhóm có nhãn và vạch ngăn */
nav.side{flex:0 0 220px;max-width:220px;width:220px;background:var(--rail);border-right:0;padding:14px 12px 18px;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#24496E transparent}
nav.side *{box-sizing:border-box}
nav.side .rb{display:flex;align-items:center;gap:10px;padding:2px 38px 14px 6px;margin-bottom:6px;border-bottom:1px solid #24496E;position:relative}
nav.side .rb > .logo{width:36px;height:36px;margin:0;border-radius:10px;background:var(--or);box-shadow:none;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font:800 18px/1 'Be Vietnam Pro',sans-serif;text-decoration:none;flex:none;padding:0}
nav.side .rb > div{display:flex;flex-direction:column;min-width:0;line-height:16px;overflow:hidden}
nav.side .rb b{color:#FFFFFF;font-size:15px;line-height:20px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
nav.side .rb div > span{color:#9FB6CC;font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
nav.side .rail-bell{position:absolute;right:2px;top:5px;width:30px;height:30px;border:0;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#B7C8DA;background:transparent;cursor:pointer;padding:0;margin:0}
nav.side .rail-bell:hover{background:var(--rail2);color:#FFFFFF}
nav.side .rail-bell svg{width:18px;height:18px}
nav.side .rail-bell .nb{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--orbtn);color:#FFFFFF;font:700 10px/16px 'Be Vietnam Pro',sans-serif;text-align:center}
nav.side .rail-q{display:flex;align-items:center;margin:0 0 6px;background:#12304D;border:1px solid #24496E;border-radius:8px;min-height:36px;padding:0 4px 0 10px}
nav.side .rail-q input{flex:1;min-width:0;border:0;background:transparent;color:#FFFFFF;font:500 13px/18px 'Be Vietnam Pro',sans-serif;outline:none;padding:0}
nav.side .rail-q input::placeholder{color:#7F99B3}
nav.side .rail-qb{width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:#8FA9C2;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
nav.side .rail-qb svg{width:16px;height:16px}
nav.side .rail-qb:hover{background:var(--rail2);color:#FFFFFF}
nav.side .rail-tog{display:flex;align-items:center;gap:10px;margin:0 0 4px;padding:7px 10px;min-height:38px;border:0;border-radius:8px;background:transparent;color:var(--railtx);font:500 14px/20px 'Be Vietnam Pro',sans-serif;cursor:pointer;text-align:left;width:100%}
nav.side .rail-tog:hover{background:var(--rail2);color:#FFFFFF}
nav.side .rail-tog .rt{width:22px;height:22px;color:#8FA9C2;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:0;box-shadow:none}
nav.side .rail-tog svg{width:18px;height:18px}
nav.side .rflow{display:flex;gap:2px;margin:0 0 4px;padding:2px;border-radius:8px;background:#12304D}
nav.side .rflow button{flex:1;border:0;border-radius:6px;padding:5px 0;background:transparent;color:#9FB6CC;font:600 11px/14px 'Be Vietnam Pro',sans-serif;cursor:pointer}
nav.side .rflow button.on{background:#FFFFFF;color:var(--ink)}
nav.side .rflow button.on.f-kh{background:var(--okbg);color:var(--ok)}
nav.side .rflow button.on.f-dt{background:var(--orbg);color:var(--ortx)}
nav.side > span.rg{display:block;text-align:left;text-transform:none;letter-spacing:0;font:600 12px/16px 'Be Vietnam Pro',sans-serif;color:#8FA9C2;padding:12px 10px 6px;margin:6px 0 0;border-top:1px solid #24496E}
nav.side .rb + span.rg,nav.side .rail-q + span.rg,nav.side .rail-tog + span.rg,nav.side .rflow + span.rg{border-top:0;margin-top:0;padding-top:2px}
nav.side > button.rg-fold{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;text-align:left;text-transform:none;letter-spacing:0;font:600 12px/16px 'Be Vietnam Pro',sans-serif;color:#8FA9C2;padding:12px 10px 6px;margin:6px 0 0;border:0;border-top:1px solid #24496E;background:none;cursor:pointer;border-radius:0}
nav.side > button.rg-fold > span:first-child{flex:1}
nav.side > button.rg-fold:hover{color:#FFFFFF}
nav.side > button.rg-fold .car{font-size:11px;opacity:.8}
nav.side > button.rg-fold .rbadge{position:static;box-shadow:none;margin:0}
nav.side > a{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:7px 10px;border-radius:8px;font:500 14px/20px 'Be Vietnam Pro',sans-serif;color:var(--railtx);text-align:left;position:relative;min-height:38px;text-decoration:none;transition:none}
nav.side > a:hover{background:var(--rail2);color:#FFFFFF}
nav.side > a.on{background:var(--rail2);color:#FFFFFF;font-weight:700}
nav.side > a.on::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:4px;border-radius:0 3px 3px 0;background:var(--or)}
nav.side > a .rt{width:22px;height:22px;border-radius:0;background:transparent!important;box-shadow:none!important;transform:none!important;color:#8FA9C2;flex:none;display:flex;align-items:center;justify-content:center;position:static}
nav.side > a.on .rt{color:var(--or)!important}
nav.side > a:hover .rt{color:#FFFFFF}
nav.side > a .rl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav.side > a .rbadge{position:static;box-shadow:none;flex:none}
nav.side svg{width:18px;height:18px}
nav.side .rolechip{margin:auto 0 0;align-self:stretch;text-align:left;background:#12304D;border:1px solid #24496E;color:#DCE7F2;border-radius:8px;padding:8px 10px;font:600 12px/17px 'Be Vietnam Pro',sans-serif;cursor:pointer;white-space:normal;line-height:17px}
nav.side .rolechip:hover{background:var(--rail2)}
/* menu thu gọn: còn biểu tượng, rê chuột hiện tên, nút Mở menu */
nav.side.mini{flex:0 0 72px;max-width:72px;width:72px;padding:14px 10px}
nav.side.mini .rb{padding:2px 0 44px;justify-content:center}
nav.side.mini .rb > div,nav.side.mini > span.rg,nav.side.mini .rail-tl,nav.side.mini > a .rl,nav.side.mini .rolechip,nav.side.mini > button.rg-fold > span:first-child,nav.side.mini > button.rg-fold .car{display:none}
nav.side.mini .rail-bell{right:50%;transform:translateX(50%);top:46px}
nav.side.mini .rail-q{padding:0;justify-content:center;border-color:transparent;background:transparent}
nav.side.mini .rail-q input{display:none}
nav.side.mini > a,nav.side.mini .rail-tog{justify-content:center;padding:9px 0;gap:0}
nav.side.mini > a.on::before{left:-10px}
nav.side.mini .rail-tog svg{transform:scaleX(-1)}
nav.side.mini > button.rg-fold{justify-content:center;padding:10px 4px 4px}
nav.side.mini > a .rbadge{position:absolute;top:2px;right:4px}
nav.side.mini .rflow{flex-direction:column}
/* nhóm duyệt, ngăn chi tiết (Cần quyết) */
.grpi{border-color:var(--line2);background:var(--sf2)}
.ba{background:var(--orbg)}
/* điện thoại: giữ thanh dưới của app, menu trái ẩn như cũ */
@media (max-width:760px){nav.side{display:none}}
/* đầu trang, khối nổi bật: trắng, viền, vạch cam trái (như bảng thiết kế), bỏ quầng màu */
.hero2{background:var(--sf)!important;border:1px solid var(--line)!important;border-left:3px solid var(--or)!important;border-radius:12px!important;box-shadow:none!important;padding:18px 22px}
.hero2::before{display:none}
.focal,.hero2 .hr2.focal,.hero2 .st2.focal{background:var(--orbg)!important;border:1px solid #F6D2BC;color:var(--ink)!important;box-shadow:none!important;border-radius:10px}
.focal .big2{color:var(--ortx)!important}.focal .fo-l,.focal .fo-s,.focal .fo-t{color:var(--ink2)!important}.focal .fl{background:#FFFFFF!important;color:var(--ink)!important}
.big2{color:var(--ink)}
.kpi.wt,.hero2 .kpi,.hero2 .card{background:var(--sf2)!important;border:1px solid var(--line2)!important;box-shadow:none!important}
.sec > .hdr .h2::before,.card > .hdr .h2::before,.card > .h2::before{background:var(--or)}
a.card:hover,a.kpi:hover{transform:none;box-shadow:0 1px 3px rgba(14,39,64,.08)}
.track{background:var(--line2)}.track .fill{background:var(--or)}
.bar i{background:var(--in)}
.msg.me{background:var(--orbg)}
.overlay{background:rgba(14,39,64,.45)}
.ls tbody tr.click:hover td{background:var(--sf2)}
.tabbar a.on{color:var(--ortx)}
.stat{border-radius:10px}
.pill{background:var(--sf2);border:1px solid var(--line);color:var(--ink)}
/* chọn nhiều việc để nhận (Việc của tôi, Cần quyết) */
.pk-c{text-align:center}.pk-c input,.pk-all{width:16px;height:16px;accent-color:var(--orbtn);margin:0;vertical-align:middle;cursor:pointer}
.pk-bar{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 14px;border-radius:10px;background:var(--orbg);border:1px solid #F6D2BC}
.pk-bar[hidden]{display:none}.pk-bar .btn{min-height:34px}
.ls tr.pk-on td{background:#FFF7F3}
/* lô việc (08/11) */
.lo-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:#F3F7FC;border:1px solid #D9E6F5;min-width:0;font-size:12px;line-height:16px}
.lo-bar{width:140px;height:8px;border-radius:999px;background:var(--line2);overflow:hidden}.lo-bar i{display:block;height:100%;background:var(--ok);border-radius:999px}
.lo-ck{width:16px;height:16px;accent-color:var(--ok);margin:0;vertical-align:middle;cursor:pointer}
.ls tr.lo-done td{color:var(--ink3)}

/* hướng dẫn từng bước (08/11 20h45, thiết kế bản 115): màn tối 4 mảnh quanh chỗ sáng, vòng trắng, khung chữ; dưới cửa sổ bật lên (900) */
.tour-mask{position:fixed;z-index:880;background:rgba(12,28,46,.55)}
.tour-mask-full{inset:0}
.tour-ring{position:fixed;z-index:881;border-radius:12px;box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(200,75,11,.55);pointer-events:none}
.tour-pop{position:fixed;z-index:882;box-sizing:border-box;background:#fff;border-radius:14px;box-shadow:0 18px 44px rgba(12,28,46,.38);padding:14px 16px 12px;color:#1B3A5C;display:flex;flex-direction:column;gap:8px;text-align:left;font-family:'Be Vietnam Pro',system-ui,sans-serif}
.tour-pop.tour-sheet{border-radius:16px;box-shadow:0 -6px 30px rgba(12,28,46,.35);padding:10px 16px calc(12px + env(safe-area-inset-bottom))}
.tour-grab{width:40px;height:4px;border-radius:2px;background:#D5DEE8;align-self:center}
.tour-ar{position:absolute;width:14px;height:14px;background:#fff;transform:rotate(45deg);display:none}
.tour-top{display:flex;align-items:center;gap:10px;font:600 12px/16px 'Be Vietnam Pro',sans-serif;color:#5A7089}
.tour-bar{display:flex;gap:4px;flex:1;min-width:60px}
.tour-bar i{flex:1;height:4px;border-radius:2px;background:#E3ECF3}
.tour-bar i.on{background:#C84B0B}
.tour-x{border:0;background:transparent;color:#5A7089;font-size:20px;line-height:18px;padding:0 2px;cursor:pointer}
.tour-h{font:700 16px/22px 'Be Vietnam Pro',sans-serif;margin:0;color:#1B3A5C}
.tour-b{font-size:13px;line-height:20px;margin:0;color:#2B4766;white-space:normal}
.tour-try{display:flex;gap:8px;align-items:flex-start;background:#FFF1E8;border:1px solid #F6C9AE;color:#8A3307;border-radius:10px;padding:8px 10px;font-size:12.5px;line-height:18px}
.tour-ft{display:flex;align-items:center;gap:6px;margin-top:2px}
.tour-ft .btn{min-height:34px;padding:0 14px}
.tour-ft .sp,.tour-key .sp{flex:1}
.tour-key{font-size:11.5px;line-height:16px;color:#5A7089;border-top:1px solid #EEF3F8;padding-top:7px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tour-key a{color:#5A7089;text-decoration:underline}
details.howto li.howto-ft{list-style:none;margin:10px 0 0 -18px;padding-top:10px;border-top:1px solid #BCD3F3;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
details.howto li.howto-ft .btn{min-height:30px;padding:0 12px;font-size:12px}
details.howto li.howto-ft a.lnk{color:#173F78;font-weight:600;text-decoration:underline}
details.howto li.howto-ft .cap{color:#3D5E86}
.howto-new{display:inline-block;margin-left:2px;padding:0 6px;border-radius:999px;background:#C84B0B;color:#fff;font-size:10px;line-height:16px;font-weight:700}
@media (prefers-reduced-motion:no-preference){.tour-pop{animation:tourIn .16s ease-out}@keyframes tourIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}}

/* tài khoản NVC (08/11 21h30, thiết kế bản 116): nhãn như trên đơn mysupership */
.tk{display:inline-block;font:500 11px/16px ui-monospace,Menlo,monospace;padding:1px 6px;border-radius:6px;background:#F3F6FA;border:1px solid #DCE5EE;color:#1B3A5C;white-space:nowrap}
.tkl{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.tkwarn{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:10px;background:#FFF7E0;border:1px solid #F3DFA2;color:#6B4A00;font-size:12.5px;line-height:19px;margin:6px 0}
table.ls tr.gh td{background:#F6F9FC;font-size:12px;color:#1B3A5C;padding:6px 10px}
table.ls tr.muted td{opacity:.6}
/* 08/11 22h10: Cài đặt · Tích hợp, từng kết nối một dòng */
.igl{display:flex;flex-direction:column;margin-top:6px}
.igr{display:grid;grid-template-columns:minmax(170px,1fr) minmax(240px,2fr) 260px;gap:6px 14px;align-items:start;padding:10px 4px;border-top:1px solid var(--line)}
.igr:first-child{border-top:0}
.igr-bad{background:#FFF4F5;border-radius:8px}
.igc .chip{margin-right:4px}
.iga{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.aig{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 14px;margin:8px 0 10px}
.aicmp td.up{color:var(--ok);font-weight:600}.aicmp td.dn{color:var(--er);font-weight:600}
@media (max-width:720px){.igr{grid-template-columns:1fr}.iga{justify-content:flex-start}}
.qa:disabled,.btn:disabled,.qa.qa-p:disabled,.btn-p:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.seg button:disabled{cursor:not-allowed;opacity:.55}
.seg button.seg-on:disabled{opacity:1}

/* 09/11 (bản 124): dải luồng kiện vấn đề trên màn Việc NVC */
.kvf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.kvs{flex:1 1 150px;min-width:140px;display:flex;flex-direction:column;gap:2px}
.kva{color:#5A7089;display:inline-flex}
.kvd{flex:0 0 1px;align-self:stretch;background:#E3ECF3;margin:0 6px}
@media(max-width:700px){.kva,.kvd{display:none}.kvs{flex-basis:45%}}