/* Noibo Thế Khoa — nền giao diện lấy từ phân hệ Kế toán webseo.vn */

*{box-sizing:border-box;margin:0;padding:0}
:root{
 --nav:#1b2431;--nav2:#232f3e;--navtx:#c7d0dc;--navtxd:#8b97a7;--navact:#0e9f6e;
 --tl:#12b886;--tl2:#0ca678;--tldk:#099268;--bg:#eef1f5;--card:#fff;--bd:#e3e8ef;--bd2:#eef2f6;
 --tx:#1f2a37;--mut:#6b7684;--mut2:#98a2b3;--blue:#2f80ed;--red:#e5484d;--org:#f5893e;--grn:#2fa25a;--amber:#f0a020;
 --shadow:0 1px 2px rgba(16,24,40,.06);--shadowlg:0 12px 34px rgba(16,24,40,.16);
 --hd:52px;--sb:214px;--tab:44px;
}
html,body{height:100%}
body{font-family:'Segoe UI',system-ui,Roboto,Arial,sans-serif;font-size:13px;color:var(--tx);background:var(--bg);overflow:hidden}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:13px;color:var(--tx)}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.tar{text-align:right}.tac{text-align:center}
.nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== HEADER ===== */
.hd{height:var(--hd);background:#fff;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:14px;padding:0 14px;position:fixed;top:0;left:0;right:0;z-index:40}
.hd .apps{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#7a8698;cursor:pointer}
.hd .apps:hover{background:#f0f2f5}
.logo{display:flex;align-items:center;gap:9px}
.logo .mk{width:28px;height:28px;border-radius:50%;background:conic-gradient(from 210deg,#f04438,#f79009,#12b886,#2f80ed,#7048e8,#f04438);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 4px #fff}
.logo .mk i{width:9px;height:9px;border-radius:50%;background:#fff}
.logo b{font-size:15px;letter-spacing:.14em;color:#3b4757;font-weight:700}
.hd .co{font-weight:700;font-size:12.5px;color:#3b4757;max-width:340px}
.hd .period{display:flex;align-items:center;gap:6px;background:#f4f6f9;border:1px solid var(--bd);border-radius:16px;padding:4px 12px;font-size:12px;color:#516175;cursor:pointer;white-space:nowrap}
.hd .period .dot{width:7px;height:7px;border-radius:50%;background:var(--tl)}
.hd .sp{flex:1}
.hsearch{position:relative;width:250px}
.hsearch input{width:100%;height:32px;border:1px solid var(--bd);border-radius:17px;background:#f7f9fb;padding:0 34px 0 32px;outline:none}
.hsearch input:focus{background:#fff;border-color:var(--tl)}
.hsearch .si{position:absolute;left:10px;top:7px;color:#98a2b3}
.hsearch .ai{position:absolute;right:8px;top:6px;font-size:10px;font-weight:700;color:#7048e8;background:#efe9ff;border-radius:5px;padding:2px 5px}
.hbtns{display:flex;align-items:center;gap:2px}
.hbtn{width:32px;height:32px;border-radius:7px;border:none;background:none;color:#5b6675;display:flex;align-items:center;justify-content:center;position:relative}
.hbtn:hover{background:#f0f2f5}
.hbtn .bdg{position:absolute;top:0;right:1px;background:var(--red);color:#fff;font-size:9px;font-weight:700;border-radius:8px;min-width:14px;height:14px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.guide{display:flex;align-items:center;gap:6px;background:#eaf9f3;color:#0ca678;border:1px solid #bde9d8;border-radius:16px;padding:5px 12px;font-weight:600;font-size:12px}
.uav{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#f5893e,#e5484d);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;border:none;font-size:12px}

/* ===== SIDEBAR ===== */
.sb{position:fixed;top:var(--hd);left:0;bottom:0;width:var(--sb);background:var(--nav);display:flex;flex-direction:column;z-index:30;transition:width .16s}
.sb.mini{width:56px}
.addq{margin:12px 12px 8px;height:34px;border:1px solid #3a4a5e;border-radius:18px;background:transparent;color:var(--tl);font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px}
.addq:hover{background:#26333f}
.sb.mini .addq{margin:12px 8px;width:40px;padding:0}
.sb.mini .addq span{display:none}
.navsec{padding:6px 14px 2px;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#5f6d7e;display:flex;align-items:center;gap:5px}
.sb.mini .navsec{display:none}
.navlist{flex:1;overflow-y:auto;padding-bottom:10px}
.navlist::-webkit-scrollbar{width:6px}.navlist::-webkit-scrollbar-thumb{background:#3a4658;border-radius:3px}
.nav-i{display:flex;align-items:center;gap:11px;padding:0 14px;height:34px;color:var(--navtx);cursor:pointer;font-size:13px;position:relative;border-left:3px solid transparent}
.nav-i:hover{background:#26333f}
.nav-i.act{background:#0f1a13;color:#fff;border-left-color:var(--navact)}
.nav-i.act .nic{color:var(--tl)}
.nav-i .nic{width:20px;display:flex;justify-content:center;color:#8593a5;flex-shrink:0}
.nav-i.act .nic{color:var(--tl)}
.nav-i .ntx{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb.mini .nav-i .ntx{display:none}
.nav-i .nbg{font-size:9px;font-weight:700;color:#fff;background:var(--org);border-radius:8px;padding:1px 6px}
.nav-i .nbg.grn{background:var(--tl)}
.sb.mini .nav-i .nbg{display:none}
.collapse{height:38px;border-top:1px solid #2b3849;display:flex;align-items:center;gap:10px;padding:0 16px;color:var(--navtxd);cursor:pointer;font-size:12.5px}
.collapse:hover{color:#fff}

/* ===== MAIN ===== */
.main{position:fixed;top:var(--hd);left:var(--sb);right:0;bottom:0;display:flex;flex-direction:column;transition:left .16s}
.main.mini{left:56px}
.tabs{height:var(--tab);background:#fff;border-bottom:1px solid var(--bd);display:flex;align-items:stretch;padding:0 6px;overflow-x:auto;flex-shrink:0}
.tabs::-webkit-scrollbar{height:0}
.tab-i{display:flex;align-items:center;gap:6px;padding:0 15px;font-size:13px;color:#5b6675;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;position:relative}
.tab-i:hover{color:var(--tx)}
.tab-i.act{color:var(--tl2);font-weight:600;border-bottom-color:var(--tl)}
.tab-i .tnew{font-size:9px;font-weight:700;color:#fff;background:var(--org);border-radius:7px;padding:1px 5px}
.tabs .tsp{flex:1}
.tab-tool{display:flex;align-items:center;gap:2px;padding-right:6px}
.tab-tool .tt{width:30px;height:30px;border-radius:6px;border:none;background:none;color:#7b8794;display:flex;align-items:center;justify-content:center}
.tab-tool .tt:hover{background:#f0f2f5}
.tab-tool .tt.bulb{color:var(--tl)}
.content{flex:1;overflow:auto;padding:16px}
.content::-webkit-scrollbar{width:10px;height:10px}.content::-webkit-scrollbar-thumb{background:#cfd6df;border-radius:5px}

/* ===== LIST PAGE ===== */
.lp-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.lp-head h1{font-size:19px;font-weight:700}
.lp-head .sub{color:var(--mut);font-size:12.5px;margin-top:2px}
.lp-head .sp{flex:1}
.ribbon{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.rb{height:32px;border:1px solid var(--bd);background:#fff;border-radius:6px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#42505f;font-weight:500}
.rb:hover{background:#f7f9fb;border-color:#cfd8e2}
.rb.pri{background:var(--tl);border-color:var(--tl);color:#fff}
.rb.pri:hover{background:var(--tl2)}
.rb.dgr{color:var(--red)}.rb.dgr:hover{background:#fef2f2;border-color:#f5c2c2}
.rb:disabled{opacity:.45;cursor:default}
.rb .cv{color:#8a96a4;font-size:10px}
.rb-sp{flex:1}
.filterbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.fsearch{position:relative;width:280px}
.fsearch input{width:100%;height:32px;border:1px solid var(--bd);border-radius:6px;padding:0 30px 0 30px;outline:none}
.fsearch input:focus{border-color:var(--tl)}
.fsearch .si{position:absolute;left:9px;top:8px;color:#98a2b3}
.fsel{height:32px;border:1px solid var(--bd);border-radius:6px;padding:0 26px 0 10px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 8px center;-webkit-appearance:none;appearance:none;outline:none;color:#42505f}
.chipfilter{display:flex;gap:6px;flex-wrap:wrap}
.cf{height:28px;border:1px solid var(--bd);background:#fff;border-radius:15px;padding:0 13px;font-size:12px;color:#5b6675;display:inline-flex;align-items:center;gap:5px}
.cf.act{background:#e9f8f2;border-color:#9fe0c8;color:#0ca678;font-weight:600}
.cf .n{font-size:11px;opacity:.8}

.tablewrap{background:#fff;border:1px solid var(--bd);border-radius:8px;overflow:auto;box-shadow:var(--shadow)}
table.grid{width:100%;border-collapse:collapse;font-size:12.5px;min-width:100%}
table.grid th{background:#f6f8fa;border-bottom:1px solid var(--bd);border-right:1px solid var(--bd2);padding:8px 10px;text-align:left;font-weight:600;color:#54606e;white-space:nowrap;position:sticky;top:0;z-index:2}
table.grid th.tar{text-align:right}table.grid th.tac{text-align:center}
table.grid td{border-bottom:1px solid var(--bd2);border-right:1px solid var(--bd2);padding:7px 10px;color:#2c3742;vertical-align:top}
table.grid tbody tr:hover{background:#f4fbf8}
table.grid tbody tr.sel,table.grid tr.sel{background:#eafaf3}
table.grid td.tar{text-align:right}table.grid td.tac{text-align:center}
.ckcell{width:34px;text-align:center}
.gck{width:15px;height:15px;accent-color:var(--tl);cursor:pointer;vertical-align:middle}
.lnk{color:var(--blue);cursor:pointer;font-weight:600}
.lnk:hover{text-decoration:underline}
.rowact{display:flex;gap:4px;justify-content:center;opacity:0;transition:.1s}
tr:hover .rowact{opacity:1}
.ra{width:24px;height:24px;border:none;background:none;border-radius:5px;color:#7b8794;display:inline-flex;align-items:center;justify-content:center}
.ra:hover{background:#e7edf3;color:var(--tx)}.ra.dgr:hover{background:#fdecec;color:var(--red)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap}
.chip.gray{background:#eef1f4;color:#64717f}
.chip.grn{background:#e7f7ef;color:#0ca678}
.chip.blue{background:#e8f1fe;color:#2f80ed}
.chip.org{background:#fdf0e6;color:#e07a26}
.chip.red{background:#fdecec;color:#e5484d}
.chip.amber{background:#fdf4e0;color:#c98a05}
.chip.purple{background:#f1ecfe;color:#7048e8}
.emptyrow td{text-align:center;color:var(--mut);padding:40px}
.pager{display:flex;align-items:center;gap:12px;padding:9px 4px;color:var(--mut);font-size:12px;flex-wrap:wrap}
.pager .sp{flex:1}
.pbtn{height:28px;min-width:28px;border:1px solid var(--bd);background:#fff;border-radius:6px;padding:0 8px;color:#42505f}
.pbtn:hover:not(:disabled){background:#f4f6f9}.pbtn:disabled{opacity:.4}
.pbtn.act{background:var(--tl);border-color:var(--tl);color:#fff}
.footsum{font-weight:700;color:#1a2530}

/* dashboard */
.dcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
@media(max-width:1050px){.dcards{grid-template-columns:1fr}}
.dcard{background:#fff;border:1px solid var(--bd);border-radius:9px;overflow:hidden;box-shadow:var(--shadow)}
.dcard .dch{padding:11px 15px;color:#fff;display:flex;align-items:center;justify-content:space-between;font-weight:700}
.dcard .drow{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;border-top:1px solid var(--bd2);cursor:pointer}
.dcard .drow:first-of-type{border-top:none}
.dcard .drow:hover{background:#f8fafc}
.dcard .drow .v{font-weight:700;font-size:14px}
.dpanels{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:1050px){.dpanels{grid-template-columns:1fr}}
.dpanel{background:#fff;border:1px solid var(--bd);border-radius:9px;padding:15px;box-shadow:var(--shadow)}
.dpanel h3{font-size:14px;margin-bottom:3px}
.dpanel .big{font-size:22px;font-weight:800;color:#12b886;margin:6px 0}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
@media(max-width:900px){.statgrid{grid-template-columns:repeat(2,1fr)}}
.stat{background:#fff;border:1px solid var(--bd);border-radius:9px;padding:14px;box-shadow:var(--shadow)}
.stat .lbl{color:var(--mut);font-size:12px;display:flex;align-items:center;gap:7px}
.stat .num{font-size:22px;font-weight:800;margin-top:7px}
.stat .ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff}

/* ===== MODAL/DRAWER/TOAST ===== */
#layer{position:fixed;inset:0;z-index:60;pointer-events:none}
.ov{position:absolute;inset:0;background:rgba(20,28,38,.42);opacity:0;transition:.16s}
.ov.show{opacity:1}
.modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);background:#fff;border-radius:11px;box-shadow:var(--shadowlg);width:560px;max-width:94vw;max-height:92vh;display:flex;flex-direction:column;opacity:0;transition:.17s}
.modal.show{opacity:1;transform:translate(-50%,-50%)}
.modal.md{width:680px}.modal.lg{width:900px}.modal.xl{width:1080px}
.modal.full{width:98vw;height:96vh;max-width:98vw;max-height:96vh}.modal.full .mb{flex:1 1 auto;max-height:none!important}.modal.full .mtabs{flex:0 0 auto}.modal.full .fgroup{max-width:1200px;margin:0 auto}
.drawer{position:absolute;right:0;top:0;bottom:0;width:640px;max-width:96vw;background:#fff;box-shadow:var(--shadowlg);transform:translateX(100%);transition:.2s;display:flex;flex-direction:column}
.drawer.show{transform:none}
.mh{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--bd)}
.mh h3{font-size:15.5px;flex:1}
.mh .x{width:30px;height:30px;border:none;background:none;border-radius:7px;color:#7b8794;display:flex;align-items:center;justify-content:center}
.mh .x:hover{background:#f0f2f5}
.mb{padding:18px;overflow:auto}
.mf{padding:12px 18px;border-top:1px solid var(--bd);display:flex;gap:8px;justify-content:flex-end;align-items:center}
.mtabs{display:flex;gap:2px;padding:0 18px;border-bottom:1px solid var(--bd);background:#fafbfc}
.mtab{padding:9px 14px;font-size:13px;color:#5b6675;cursor:pointer;border-bottom:2px solid transparent}
.mtab.act{color:var(--tl2);font-weight:600;border-bottom-color:var(--tl)}
.frow{display:flex;gap:14px;margin-bottom:13px}
.fld{flex:1;display:flex;flex-direction:column;gap:5px}
.fld label{font-size:12px;color:#54606e;font-weight:500}
.fld label .rq{color:var(--red)}
.fld input,.fld select,.fld textarea{height:34px;border:1px solid var(--bd);border-radius:6px;padding:0 10px;outline:none;background:#fff}
.fld textarea{height:auto;padding:8px 10px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--tl);box-shadow:0 0 0 3px rgba(18,184,134,.12)}
.fld.err input,.fld.err select{border-color:var(--red)}
.fld .em{color:var(--red);font-size:11px}
.hint{font-size:11.5px;color:var(--mut)}
/* select2 – searchable dropdowns */
.ss2{position:relative;vertical-align:top}
.ss2 .ss2-native{position:absolute!important;left:0;top:0;width:100%!important;height:100%;opacity:0;margin:0!important;pointer-events:none}
.ss2 .ss2-inp{width:100%;height:34px;border:1px solid var(--bd);border-radius:6px;padding:0 26px 0 10px;outline:none;color:#42505f;cursor:pointer;font:inherit;box-sizing:border-box;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 8px center}
.ss2 .ss2-inp:focus,.ss2.open .ss2-inp{border-color:var(--tl);box-shadow:0 0 0 3px rgba(18,184,134,.12)}
.fld.err .ss2-inp{border-color:var(--red)}
.ss2-menu{position:fixed;z-index:130;background:#fff;border:1px solid var(--bd);border-radius:8px;box-shadow:var(--shadowlg);max-height:300px;overflow:auto;padding:4px;display:none}
.ss2-menu.show{display:block}
.ss2-opt{padding:7px 11px;font-size:13px;line-height:1.35;border-radius:5px;cursor:pointer;color:#3a4653;white-space:nowrap;display:flex;align-items:center;gap:10px}
.ss2-opt:hover{background:#f1f5f4}
.ss2-opt.hl{background:var(--tl);color:#fff}
.ss2-opt.sel{font-weight:600}
.ss2-opt.sel::after{content:'✓';margin-left:auto}
.ss2-empty{padding:9px 11px;font-size:12.5px;color:var(--mut)}

.toastwrap{position:fixed;top:62px;right:18px;z-index:90;display:flex;flex-direction:column;gap:8px}
.toast{background:#fff;border:1px solid var(--bd);border-left:4px solid var(--tl);border-radius:8px;box-shadow:var(--shadowlg);padding:11px 14px;min-width:250px;max-width:360px;display:flex;gap:10px;align-items:flex-start;transform:translateX(120%);transition:.28s}
.toast.show{transform:none}
.toast.err{border-left-color:var(--red)}.toast.warn{border-left-color:var(--amber)}.toast.info{border-left-color:var(--blue)}
.toast .tt{font-weight:700;margin-bottom:1px}
.toast .td{color:var(--mut);font-size:12px}

/* warning banner */
.warn-b{background:#fff8e6;border:1px solid #f5d78a;color:#8a6100;border-radius:8px;padding:10px 13px;display:flex;gap:9px;align-items:flex-start;margin-bottom:12px;font-size:12.5px}
.warn-b.red{background:#fdf0f0;border-color:#f3b9b9;color:#a12020}

/* dropdown menu */
.menu{position:fixed;background:#fff;border:1px solid var(--bd);border-radius:9px;box-shadow:var(--shadowlg);padding:6px;z-index:70;min-width:210px}
.menu .mi{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:6px;font-size:13px;color:#374553;cursor:pointer}
.menu .mi:hover{background:#f2f6fa}
.menu .mi .k{margin-left:auto;color:#9aa6b4;font-size:11px}
.menu .sep{height:1px;background:var(--bd2);margin:5px 0}
.menu .mi.dgr{color:var(--red)}.menu .mi.dgr:hover{background:#fdecec}

/* shortcut help */
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border:1px solid #cfd6df;border-bottom-width:2px;border-radius:5px;background:#f7f9fb;font-size:11px;font-weight:600;color:#42505f;font-family:inherit}
.klist{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px}
.krow{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px dashed var(--bd2)}
.krow .kd{flex:1;color:#42505f}
.sec-t{font-weight:700;font-size:12px;color:var(--tl2);text-transform:uppercase;letter-spacing:.04em;margin:12px 0 4px;grid-column:1/-1}

svg.i{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
svg.i.sm{width:14px;height:14px}svg.i.lg{width:20px;height:20px}
.imp-drop{border:2px dashed #cfd8e2;border-radius:9px;padding:22px;text-align:center;color:var(--mut);background:#fafbfc}
.imp-drop b{color:var(--tx)}
.steps{display:flex;gap:8px;margin-bottom:14px}
.step{flex:1;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--bd);border-radius:8px;font-size:12px;color:var(--mut)}
.step.act{border-color:var(--tl);background:#f0fbf7;color:var(--tl2);font-weight:600}
.step .n{width:20px;height:20px;border-radius:50%;background:#e5eaf0;color:#66727f;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px}
.step.act .n{background:var(--tl);color:#fff}

/* ======================================================================
   BỔ SUNG CHO NOIBO THẾ KHOA
   ====================================================================== */
button.apps{border:none;background:none}
.mob-menu{display:none!important}
.sb-ov{display:none}
.loading-screen{padding:80px;text-align:center;color:var(--mut)}
[hidden]{display:none!important}
a{color:var(--blue)}
.muted{color:var(--mut)}.small{font-size:11.5px}.b{font-weight:700}
.grn-t{color:var(--tl2)}.red-t{color:var(--red)}.org-t{color:var(--org)}.blue-t{color:var(--blue)}.amber-t{color:#c98a05}
.row-flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.card{background:#fff;border:1px solid var(--bd);border-radius:9px;box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--bd2)}
.card-h h3{font-size:14px;flex:1}
.card-b{padding:14px 15px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1100px){.grid3,.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
.mb12{margin-bottom:12px}.mb8{margin-bottom:8px}.mt12{margin-top:12px}
.hint-box{background:#f0f7ff;border:1px solid #cfe2fb;color:#1d4f91;border-radius:8px;padding:10px 13px;font-size:12.5px;margin-bottom:12px;line-height:1.55}
.ok-b{background:#ecfaf3;border:1px solid #b6e8d0;color:#0b7a55;border-radius:8px;padding:10px 13px;font-size:12.5px;margin-bottom:12px}

/* thẻ số liệu */
.stat .sub2{font-size:11.5px;color:var(--mut);margin-top:4px}
.stat .num.sm{font-size:18px}
.stat.clk{cursor:pointer}.stat.clk:hover{border-color:#bfe9d8}
.kpi-delta{font-size:11px;font-weight:700;margin-left:6px}
.kpi-delta.up{color:var(--tl2)}.kpi-delta.dn{color:var(--red)}

/* bảng: sắp xếp, ô số */
table.grid th.sortable{cursor:pointer}
table.grid th.sortable:hover{color:var(--tx)}
table.grid th .sa{font-size:9px;margin-left:3px;color:var(--tl2)}
table.grid td.num,table.grid th.num{text-align:right;font-variant-numeric:tabular-nums}
table.grid td .sub{display:block;color:var(--mut);font-size:11px;margin-top:1px;font-weight:400}
table.grid tfoot td{background:#f3f6f9;font-weight:700;border-top:1px solid var(--bd)}
table.grid.compact td{padding:5px 8px}
table.grid.compact th{padding:6px 8px}
table.grid tr.clk{cursor:pointer}
table.grid td.wrap{white-space:normal;min-width:180px}
.thumb{width:36px;height:36px;border-radius:6px;object-fit:cover;background:#f1f4f8;border:1px solid var(--bd2);vertical-align:middle}
.thumb.lg{width:56px;height:56px}
.cell-flex{display:flex;align-items:center;gap:9px}
.rowact{opacity:1}
@media(hover:hover){.rowact{opacity:0}tr:hover .rowact{opacity:1}}

/* thanh công cụ lọc */
.filterbar .fld-inline{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}
.filterbar input[type=date],.filterbar input.fin{height:32px;border:1px solid var(--bd);border-radius:6px;padding:0 8px;outline:none;background:#fff}
.bulkbar{display:flex;align-items:center;gap:8px;background:#eafaf3;border:1px solid #bfe9d8;border-radius:8px;padding:6px 10px;margin-bottom:10px;font-size:12.5px;flex-wrap:wrap}

/* biểu mẫu nhiều cột */
.fgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px 14px}
.fgrid .fld{min-width:0}
.fgrid .c2{grid-column:span 2}.fgrid .c3{grid-column:span 3}.fgrid .c4{grid-column:span 4}.fgrid .c5{grid-column:span 5}.fgrid .c6{grid-column:span 6}.fgrid .c7{grid-column:span 7}.fgrid .c8{grid-column:span 8}.fgrid .c9{grid-column:span 9}.fgrid .c12{grid-column:span 12}
@media(max-width:760px){.fgrid>*{grid-column:span 12!important}}
.fld .sub-hint{font-size:11px;color:var(--mut)}
.fld input[readonly]{background:#f6f8fa;color:#54606e}
.fsec{grid-column:span 12;font-weight:700;font-size:12px;color:var(--tl2);text-transform:uppercase;letter-spacing:.04em;margin-top:4px;padding-bottom:4px;border-bottom:1px dashed var(--bd)}
.inp-group{display:flex}
.inp-group input{border-top-right-radius:0!important;border-bottom-right-radius:0!important;flex:1;min-width:0}
.inp-group .add{height:34px;border:1px solid var(--bd);border-left:none;background:#f6f8fa;border-radius:0 6px 6px 0;padding:0 10px;display:flex;align-items:center;color:var(--mut);font-size:12px;white-space:nowrap}
.sw{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;min-height:34px}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw .tr{width:36px;height:20px;border-radius:10px;background:#cfd6df;position:relative;transition:.15s;flex-shrink:0}
.sw .tr::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sw input:checked+.tr{background:var(--tl)}
.sw input:checked+.tr::after{left:18px}
.chk-list{display:flex;flex-wrap:wrap;gap:6px}
.chk-list label{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--bd);border-radius:14px;padding:3px 10px;font-size:12px;cursor:pointer;background:#fff;user-select:none}
.chk-list label.on{background:#e9f8f2;border-color:#9fe0c8;color:#0ca678;font-weight:600}
.chk-list input{display:none}

/* ô chọn có tìm kiếm */
.pick-menu{position:fixed;z-index:140;background:#fff;border:1px solid var(--bd);border-radius:8px;box-shadow:var(--shadowlg);max-height:320px;overflow:auto;padding:4px;min-width:260px}
.pick-opt{padding:7px 10px;border-radius:5px;cursor:pointer;display:flex;gap:9px;align-items:center;font-size:13px}
.pick-opt:hover,.pick-opt.hl{background:#eefaf5}
.pick-opt .t{font-weight:600}
.pick-opt .s{font-size:11.5px;color:var(--mut)}
.pick-opt img{width:34px;height:34px;border-radius:5px;object-fit:cover;background:#f1f4f8;flex-shrink:0}
.pick-empty{padding:10px;color:var(--mut);font-size:12.5px}

/* bảng dòng hàng trong chứng từ */
.lines{border:1px solid var(--bd);border-radius:8px;overflow:auto;background:#fff}
.lines table{width:100%;border-collapse:collapse;font-size:12.5px}
.lines th{background:#f6f8fa;padding:7px 8px;text-align:left;font-weight:600;color:#54606e;border-bottom:1px solid var(--bd);white-space:nowrap}
.lines th.num{text-align:right}
.lines td{padding:4px 6px;border-bottom:1px solid var(--bd2);vertical-align:middle}
.lines td.num{text-align:right;font-variant-numeric:tabular-nums}
.lines td input,.lines td select{width:100%;height:30px;border:1px solid transparent;border-radius:5px;padding:0 7px;background:transparent;outline:none;min-width:60px}
.lines td input:hover{border-color:var(--bd)}
.lines td input:focus{border-color:var(--tl);background:#fff}
.lines td input.num{text-align:right}
.lines .add-line{padding:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lines .ln-name{font-weight:600}
.lines .ln-sub{font-size:11px;color:var(--mut)}
.totals{display:grid;grid-template-columns:auto 160px;gap:6px 18px;justify-content:end;margin-top:10px;font-size:13px;align-items:center}
.totals .l{color:var(--mut);text-align:right}
.totals .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.totals .v input{width:100%;height:30px;border:1px solid var(--bd);border-radius:5px;text-align:right;padding:0 8px}
.totals .grand{font-size:16px;color:var(--tx);font-weight:800}
.doc-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.doc-code{font-size:17px;font-weight:800}

/* dòng trạng thái */
.flow{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.flow .st{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);padding:5px 10px;border-radius:14px;background:#f1f4f8}
.flow .st.done{background:#e7f7ef;color:#0ca678;font-weight:600}
.flow .st.cur{background:var(--tl);color:#fff;font-weight:700}
.flow .st.bad{background:#fdecec;color:#e5484d;font-weight:700}
.timeline{border-left:2px solid var(--bd);margin-left:6px;padding-left:14px}
.timeline .ev{position:relative;padding:0 0 12px}
.timeline .ev::before{content:'';position:absolute;left:-20px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--tl);box-shadow:0 0 0 3px #fff}
.timeline .ev .t{font-size:11.5px;color:var(--mut)}

/* biểu đồ SVG */
.chart{width:100%;display:block;overflow:visible}
.chart .ax{stroke:#e3e8ef;stroke-width:1}
.chart .lbl{fill:#98a2b3;font-size:10.5px}
.chart .bar{fill:var(--tl)}
.chart .bar2{fill:#f5893e}
.chart .bar3{fill:#2f80ed}
.chart .ln{fill:none;stroke:var(--blue);stroke-width:2}
.chart rect:hover{opacity:.8}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.hbar{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:12.5px}
.hbar .nm{width:38%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar .tr{flex:1;background:#f1f4f8;border-radius:4px;height:14px;overflow:hidden}
.hbar .fl{height:100%;background:var(--tl);border-radius:4px}
.hbar .vv{width:110px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* ma trận phân quyền */
.permx{border-collapse:collapse;font-size:12.5px;width:100%}
.permx th,.permx td{border:1px solid var(--bd2);padding:6px 8px}
.permx th{background:#f6f8fa;position:sticky;top:0;z-index:1;white-space:nowrap}
.permx td.g{background:#fafbfc;font-weight:700;color:var(--tl2)}
.permx td.c{text-align:center}

/* tìm kiếm & thông báo */
.gs-menu{position:absolute;top:38px;left:0;right:-120px;background:#fff;border:1px solid var(--bd);border-radius:9px;box-shadow:var(--shadowlg);max-height:70vh;overflow:auto;padding:6px;z-index:80}
.gs-g{font-size:10.5px;font-weight:700;color:var(--mut);letter-spacing:.05em;text-transform:uppercase;padding:6px 8px 2px}
.gs-i{padding:7px 9px;border-radius:6px;cursor:pointer}
.gs-i:hover,.gs-i.hl{background:#eefaf5}
.gs-i .t{font-weight:600;font-size:13px}.gs-i .s{font-size:11.5px;color:var(--mut)}
.menu.notif{width:380px;max-width:94vw;max-height:70vh;overflow:auto;padding:0}
.notif .nh{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid var(--bd2);font-weight:700}
.notif .ni{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--bd2);cursor:pointer}
.notif .ni:hover{background:#f7fafc}
.notif .ni.unread{background:#f2fbf7}
.notif .ni .dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0;background:var(--blue)}
.notif .ni .dot.warn{background:var(--amber)}.notif .ni .dot.err{background:var(--red)}.notif .ni .dot.ok{background:var(--tl)}
.notif .ni .tt{font-weight:600;font-size:13px}.notif .ni .td{font-size:12px;color:var(--mut)}

/* tải ảnh */
.imgs{display:flex;flex-wrap:wrap;gap:8px}
.imgs .im{position:relative;width:84px;height:84px;border-radius:8px;overflow:hidden;border:1px solid var(--bd);background:#f6f8fa}
.imgs .im img{width:100%;height:100%;object-fit:cover}
.imgs .im .x{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:20px;padding:0}
.imgs .im .cover{position:absolute;left:0;bottom:0;right:0;background:rgba(18,184,134,.9);color:#fff;font-size:10px;text-align:center}
.imgs .add{width:84px;height:84px;border:2px dashed #cfd8e2;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--mut);cursor:pointer;font-size:24px;background:#fff}
.imgs .add:hover{border-color:var(--tl);color:var(--tl)}

/* bảng phân tích lãi lỗ */
.pl{width:100%;border-collapse:collapse;font-size:12.5px}
.pl td{padding:5px 8px;border-bottom:1px dashed var(--bd2)}
.pl td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.pl tr.tot td{font-weight:800;border-bottom:1px solid var(--bd);border-top:1px solid var(--bd)}
.pl tr.sec td{font-weight:700;color:var(--tl2);background:#f7faf9}

/* đăng nhập */
.login-body{overflow:auto;background:linear-gradient(135deg,#1b2431 0%,#243447 55%,#0e6b52 100%);min-height:100vh}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:48px;padding:24px;flex-wrap:wrap}
.login-side{color:#dbe4ee;max-width:420px}
.login-side .logo b{color:#fff}
.login-side .logo .mk{box-shadow:inset 0 0 0 4px #1b2431}
.login-side h1{font-size:30px;color:#fff;margin:22px 0 10px;line-height:1.2}
.login-side p{font-size:14px;line-height:1.6;color:#b7c4d3}
.login-side ul{margin:16px 0 0 18px;line-height:1.9;font-size:13.5px}
.login-card{background:#fff;border-radius:14px;box-shadow:0 30px 60px rgba(0,0,0,.35);padding:30px 30px 22px;width:380px;max-width:100%}
.login-card h2{font-size:21px}
.login-card .sub{color:var(--mut);margin:4px 0 18px}
.login-card .fld{margin-bottom:12px}
.login-card .fld input{height:40px;font-size:14px}
.login-btn{width:100%;height:40px;justify-content:center;font-size:14px;margin-top:6px}
.login-err{background:#fdf0f0;border:1px solid #f3b9b9;color:#a12020;border-radius:7px;padding:8px 11px;margin:6px 0;font-size:12.5px}
.login-foot{text-align:center;color:var(--mut);font-size:12px;margin-top:14px}

/* cổng đối tác (NCC / CTV / đại lý) */
body.portal{overflow:auto;height:auto;min-height:100vh}
.portal .ph{background:#1b2431;color:#fff;padding:12px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:sticky;top:0;z-index:30}
.portal .ph .logo b{color:#fff}
.portal .ph .logo .mk{box-shadow:inset 0 0 0 4px #1b2431}
.portal .ph .who{margin-left:auto;font-size:12.5px;color:#b7c4d3}
.portal .ph a{color:#9fe0c8}
.portal .pc{max-width:1400px;margin:0 auto;padding:18px 16px 60px}
.portal .ptabs{display:flex;gap:4px;border-bottom:1px solid var(--bd);margin-bottom:14px;overflow-x:auto;background:#fff;border-radius:8px 8px 0 0;padding:0 8px}
.portal .ptab{padding:10px 14px;cursor:pointer;color:#5b6675;border-bottom:2px solid transparent;white-space:nowrap}
.portal .ptab.act{color:var(--tl2);font-weight:600;border-bottom-color:var(--tl)}
.portal #layer,.portal .toastwrap{position:fixed}

@media print{
  body{overflow:visible;background:#fff}
  .hd,.sb,.tabs,.ribbon,.filterbar,.pager,.no-print{display:none!important}
  .main{position:static}
  .content{overflow:visible;padding:0}
}

/* ===== ĐIỆN THOẠI ===== */
@media(max-width:900px){
  :root{--sb:240px}
  .mob-menu{display:flex!important}
  .hd{gap:8px;padding:0 8px}
  .hd .co,.hd .period,.guide,#syncBtn{display:none}
  .hsearch{width:auto;flex:1}
  .gs-menu{right:0;position:fixed;left:8px;top:52px}
  .logo b{display:none}
  .sb{transform:translateX(-100%);transition:transform .2s;width:var(--sb)!important}
  .sb.open{transform:none}
  .sb.open+.sb-ov{display:block;position:fixed;top:var(--hd);left:0;right:0;bottom:0;background:rgba(0,0,0,.35);z-index:25}
  .sb .collapse{display:none}
  .main,.main.mini{left:0}
  .content{padding:10px}
  .lp-head h1{font-size:17px}
  .ribbon .rb .kbd-h{display:none}
  .fsearch{width:100%}
  .modal,.modal.md,.modal.lg,.modal.xl{width:100vw;max-width:100vw;max-height:100vh;height:100vh;border-radius:0;top:0;left:0;transform:none!important}
  .drawer{width:100vw}
  .frow{flex-direction:column;gap:10px}
  .totals{grid-template-columns:auto 130px}
  .toastwrap{left:10px;right:10px}
  .toast{min-width:0;max-width:none}
  .dpanels,.dcards{grid-template-columns:1fr}
  .statgrid{grid-template-columns:1fr 1fr}
  .stat .num{font-size:18px}
  .hbar .vv{width:80px}
  .tabs{padding:0}
  .tab-i{padding:0 11px}
}

.fld .ss2 .ss2-inp,.fld .ss2 input.ss2-inp[readonly]{background-color:#fff;color:#42505f}

/* ============================================================================
   GIAO DIỆN KIOTVIET — 26/09/2026
   Khách yêu cầu "giống hệt KiotViet": bỏ thanh dọc bên trái, chuyển sang thanh
   menu NGANG màu xanh ngay dưới thanh trên cùng, mỗi mục có menu xổ xuống chứa
   các màn hình con (KiotViet không có dải thẻ riêng).
   Màu lấy từ ảnh chụp màn hình KiotViet thật của shop; ảnh bị lớp phủ mờ 30%
   nên đã quy ngược (chia 0,7) — lệch một chút thì chỉnh ba biến dưới đây.
   ========================================================================== */
:root{
  --kv-xanh:#006FF3;          /* nền thanh menu ngang */
  --kv-xanh-dam:#0059C2;      /* mục đang mở */
  --kv-xanh-nhat:#E5F0FD;     /* đầu bảng, nền nhạt */
  --kv-nav-h:46px;            /* chiều cao thanh menu ngang */
  --tl:#0069D9;--tl2:#0059C2;--tldk:#004BA6;   /* nút chính: xanh thay cho xanh ngọc */
  --navact:#fff;--bg:#F2F4F7;
  --hd:48px;
}

/* ---- thanh trên cùng: trắng, logo trái, tiện ích phải ---- */
.hd{height:var(--hd);gap:12px}
.logo .mk{background:var(--kv-xanh);box-shadow:none}
.logo b{color:var(--kv-xanh);letter-spacing:.02em;font-size:16px}
.hd .period{border-radius:6px}

/* ---- thanh menu NGANG thay cho thanh dọc ---- */
.sb{position:fixed;top:var(--hd);left:0;right:0;bottom:auto;width:auto;height:var(--kv-nav-h);
    background:var(--kv-xanh);flex-direction:row;align-items:stretch;z-index:35;transition:none;overflow:visible}
.sb.mini{width:auto}
.navsec,.collapse{display:none}
.navlist{flex:1;display:flex;align-items:center;overflow:visible;padding:0 6px}
.navlist::-webkit-scrollbar{height:0}

/* Mục menu: khối bo góc lọt trong thanh, giống KiotViet (không phủ hết chiều cao) */
.nav-i{height:32px;margin:0 1px;padding:0 15px;border-left:0;color:#fff;font-size:13.5px;font-weight:500;
       display:flex;align-items:center;gap:7px;white-space:nowrap;position:relative;border-radius:6px}
.nav-i:hover{background:rgba(255,255,255,.14)}
.nav-i.act{background:#fff;color:var(--kv-xanh-dam);font-weight:600;border-left-color:transparent}
.nav-i .nic{display:none}                 /* KiotViet chỉ dùng chữ, không biểu tượng */
.nav-i .ntx{flex:none}
.nav-i .nbg{background:var(--red)}

/* menu xổ xuống chứa các màn hình con */
.nav-sub{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--bd);
         border-radius:0 0 8px 8px;box-shadow:var(--shadowlg);padding:6px 0;display:none;z-index:60;
         max-height:76vh;overflow-y:auto}
.nav-i:hover .nav-sub,.nav-i.mo .nav-sub{display:block}
.ns-i{display:block;padding:8px 16px;color:var(--tx);font-size:13px;font-weight:400;cursor:pointer;white-space:nowrap}
.ns-i:hover{background:var(--kv-xanh-nhat);color:var(--kv-xanh-dam)}
.ns-i.act{color:var(--kv-xanh-dam);font-weight:600;background:var(--kv-xanh-nhat)}

/* nút "Thêm nhanh" đứng chỗ nút "Bán hàng" của KiotViet */
.addq{order:2;margin:7px 12px 7px 6px;height:32px;padding:0 16px;border:0;border-radius:6px;
      background:#fff;color:var(--kv-xanh);font-weight:600;font-size:13px;flex-shrink:0}
.addq:hover{background:#eaf2ff}
.sb.mini .addq{width:auto;padding:0 16px;margin:7px 12px 7px 6px}
.sb.mini .addq span{display:inline}

/* ---- vùng nội dung: đẩy xuống dưới hai thanh, không còn lề trái ---- */
.main,.main.mini{left:0;top:calc(var(--hd) + var(--kv-nav-h))}
.tabs{display:none}                        /* KiotViet không có dải thẻ; thẻ nằm trong menu xổ */
.content{background:#fff}

/* ---- bảng: đầu bảng nền xanh nhạt như KiotViet ---- */
table.grid thead th{background:var(--kv-xanh-nhat);color:#2b3a4a}

/* ---- điện thoại: thanh menu cuộn ngang ---- */
@media (max-width:900px){
  .sb{overflow-x:auto}
  .navlist{padding:0 2px}
  .nav-i{padding:0 11px;font-size:13px}
  .nav-sub{position:fixed;left:8px;right:8px;min-width:0;top:calc(var(--hd) + var(--kv-nav-h))}
  .addq{margin:7px 8px;padding:0 12px}
  .hd .mob-menu{display:none}
  .sb-ov{display:none !important}
}

/* nút "Hỗ trợ" và ảnh đại diện trên thanh trên cùng — theo tông xanh KiotViet */
.hd .guide{color:var(--kv-xanh);background:#EAF2FF;border-color:#CFE2FF}
.hd .guide:hover{background:#DCEAFF}
.hd .uav{background:var(--kv-xanh);color:#fff}
.hd .hbtn:hover{background:#EAF2FF;color:var(--kv-xanh)}
/* Menu xổ xuống nằm ngay mép dưới thanh xanh. Giữa mục menu và bảng xổ có khe 7px,
   nên phải có một dải trong suốt bắc cầu — không thì chuột đi qua khe là mất hover
   và không bấm được vào mục con. */
.nav-sub{top:calc(100% + 7px);border-radius:8px}
.nav-i::after{content:'';position:absolute;left:0;right:0;top:100%;height:9px}

/* ====================================================================
   DIEN THOAI — chu shop dung dien thoai la chinh
   ==================================================================== */
@media(max-width:760px){
  /* iOS tu phong to khi bam vao o nhap nho hon 16px, roi khong tu thu lai.
     Day la ly do man hinh "zoom ra zoom vao". */
  input,select,textarea,.fld select,.fld textarea{font-size:16px!important}
  input,.fld select{height:44px}
  .fld textarea{min-height:80px}
  .fld label{font-size:13px}

  /* Menu ngang tren cung dai hon be ngang man, va da co thanh duoi thay the. */
  #sb:not(.open) .navlist{display:none}

  /* Chua cho thanh dieu huong duoi. */
  #main{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  .drawer .mf,.modal .mf{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}

  /* Nut bam to hon cho vua ngon tay. */
  .rb{height:40px;font-size:14px;padding:0 14px;border-radius:9px}
  .ribbon{gap:8px}
  .chip,.ribbon .chip{font-size:13px}

  /* Bo loc: gom lai, bam nut moi mo. */
  .fbar-nut{display:flex;align-items:center;justify-content:space-between;gap:8px;
    width:100%;min-height:46px;margin-bottom:10px;padding:0 15px;
    border:1.5px solid var(--bd);border-radius:11px;background:#fff;
    font-size:15px;font-weight:600;color:#42505f;cursor:pointer}
  .fbar-nut .n{display:flex;align-items:center;gap:9px}
  .fbar-nut .d{font-size:12.5px;font-weight:500;color:var(--mut)}
  .filterbar.gom{display:none}
}
@media(min-width:761px){
  .fbar-nut{display:none}
}

/* --------------------------------------------- thanh dieu huong duoi */
#mbnav{display:none}
@media(max-width:760px){
  #mbnav{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:45;
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:#fff;border-top:1px solid var(--bd);
    box-shadow:0 -6px 18px -12px rgba(16,24,32,.35);
  }
  #mbnav a{
    position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    height:60px;color:#8a96a4;font-size:11.5px;font-weight:600;
    text-decoration:none;-webkit-tap-highlight-color:transparent;
  }
  #mbnav a svg{width:23px;height:23px}
  #mbnav a.act{color:var(--tl)}
  #mbnav a span{line-height:1;white-space:nowrap}
  #mbnav .bdg{
    position:absolute;top:6px;left:calc(50% + 7px);min-width:17px;height:17px;padding:0 4px;
    border-radius:9px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
}

/* ------------------------------------- nut cai ra man hinh chinh */
.cai-mh{display:none}
@media(max-width:760px){
  .cai-mh{
    display:flex;align-items:center;gap:11px;width:100%;
    margin:0 0 12px;padding:12px 14px;
    border:1.5px solid #cfe2fb;border-radius:12px;background:#f0f7ff;
    color:#1d4f91;font-size:14.5px;font-weight:600;text-align:left;cursor:pointer;
  }
  .cai-mh svg{flex:0 0 auto;width:22px;height:22px}
  .cai-mh span{display:flex;flex-direction:column;gap:2px;min-width:0}
  .cai-mh i{font-style:normal;font-size:12.5px;font-weight:400;color:#4a6c96}
}

/* ---------------------------- hướng dẫn cài trên iPhone */
.cai-hd{display:grid;gap:12px;font-size:14.5px;line-height:1.6}
.cai-hd ol{margin:0;padding-left:20px;display:grid;gap:9px}
.cai-hd li b{color:var(--tx)}
.cai-hd .kh{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:6px;
  background:#eef3f8;font-weight:600;color:#2b3542}
.cai-hd .kh svg{width:15px;height:15px}

/* Bảng danh sách trên điện thoại vẫn rộng hơn màn — nói rõ là vuốt được,
   kèm vệt mờ bên phải cho thấy còn nội dung phía sau. */
@media(max-width:760px){
  .tablewrap{position:relative}
  .tablewrap::after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:26px;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.96));
  }
  .vuot-hint{
    display:flex;align-items:center;gap:6px;margin:6px 2px 0;
    font-size:12.5px;color:var(--mut);
  }
  .vuot-hint svg{width:14px;height:14px}
}
@media(min-width:761px){.vuot-hint{display:none}}

/* Điện thoại: bỏ cột số thứ tự cho bảng rộng chỗ. Ô tích vẫn giữ vì còn
   dùng để chọn nhiều dòng rồi in hàng loạt. */
@media(max-width:760px){
  table.grid .sttcell{display:none}
}