/* Màu, chữ, bo góc theo Cổng SSO và các app Tài liệu / Công việc / Nhân sự / Vận hành (tailwind.config.js của SSO): primary #01458e, accent #e87a1e, nền surface #f5f7fa, chữ Be Vietnam Pro */
:root{--p:#01458e;--p5:#0567b8;--pc:#e8f0fa;--o:#e87a1e;--oh:#d06a12;--ol:#fff3e8;--bg:#f5f7fa;--line:#e0e3e6;--ov:#c3c6d7;--tx:#191c1e;--mu:#5b5f6e;--ok:#15803d;--er:#ba1a1a;--r:12px;--rl:16px;--sh:0 1px 2px rgba(0,0,0,.05),0 2px 8px rgba(0,83,219,.06)}
*{box-sizing:border-box}body{margin:0;font:14px/1.5 "Be Vietnam Pro",system-ui,"Segoe UI",Roboto,sans-serif;color:var(--tx);background:var(--bg)}
.center{padding:60px;text-align:center}.muted{color:var(--mu)}.small{font-size:12px}
/* Bố cục giống các app khác (Tài liệu, Công việc, Nhân sự, Vận hành): menu trái nền xám nhạt 256px, mục đang mở nền trắng chữ xanh;
   thanh trên trắng cao 56px, giữa là logo + tên công ty; tab con gạch chân. */
.shell{display:flex;min-height:100vh}
.side{width:256px;flex-shrink:0;background:#f2f4f7;border-right:1px solid var(--ov);position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;transition:width .2s ease}
.sbrand{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;border-bottom:1px solid var(--ov);flex-shrink:0;font-weight:700;color:var(--tx);white-space:nowrap}
.sico{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--p),var(--p5));color:#fff;display:grid;place-items:center;flex-shrink:0}.sico .ms{font-size:19px}
.sname{overflow:hidden;text-overflow:ellipsis}.sname .hl{color:var(--p)}
.snav{display:flex;flex-direction:column;gap:2px;padding:8px}
.tab{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:none;color:#434655;font:inherit;font-weight:500;text-align:left;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.tab:hover{background:#eceef1;color:var(--tx)}.tab.on{background:#fff;color:var(--p);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}
.tab.on .ms{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}
.ms{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;font-size:20px;line-height:1;display:inline-flex;vertical-align:middle;user-select:none;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}
.shell.mini .side{width:72px}.shell.mini .sbrand{justify-content:center;padding:0}.shell.mini .sname,.shell.mini .tab .tl{display:none}.shell.mini .tab{justify-content:center;padding:10px 8px}
.mainwrap{flex:1;min-width:0;display:flex;flex-direction:column}
header.top{position:sticky;top:0;z-index:20;height:56px;display:flex;align-items:center;gap:8px;padding:0 16px 0 8px;background:#fff;border-bottom:1px solid var(--ov);box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1)}
.ibtn{width:40px;height:40px;border-radius:99px;border:0;background:none;color:#434655;display:inline-grid;place-items:center;cursor:pointer;flex-shrink:0}.ibtn:hover{background:#eceef1;color:var(--tx)}#bell{width:36px;height:36px}
.co{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:40%;font-weight:600;pointer-events:none;white-space:nowrap}.co img{height:24px;width:auto;flex-shrink:0}.co span{overflow:hidden;text-overflow:ellipsis}
.tright{margin-left:auto;display:flex;align-items:center;gap:6px;min-width:0}
.me{display:flex;align-items:center;gap:8px;min-width:0}.me b{font-weight:500;white-space:nowrap}
.rpill{background:#fee2e2;color:#b91c1c;border-radius:99px;padding:1px 9px;font-size:12px;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.ava{width:36px;height:36px;border-radius:99px;background:var(--p);color:#fff;display:grid;place-items:center;font-weight:700;flex-shrink:0}
.sideback{display:none}
@media(max-width:900px){
  .side{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .2s ease}
  .shell.open .side{transform:none;box-shadow:0 4px 12px rgba(0,0,0,.1)}.shell.open .sideback{display:block;position:fixed;inset:0;background:#0006;z-index:55}
  .shell.mini .side{width:256px}.shell.mini .sname,.shell.mini .tab .tl{display:revert}.shell.mini .tab{justify-content:flex-start;padding:10px 12px}.shell.mini .sbrand{justify-content:flex-start;padding:0 16px}
  .co{display:none}.me b{display:none}
  .sub:has(>button.btn[data-t]){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.sub>button.btn[data-t]{white-space:nowrap}
}
@media(max-width:560px){.rpill{display:none}}
main{padding:24px;width:100%}
@media(max-width:560px){main{padding:12px}}
.card{background:#fff;border:0;border-radius:var(--rl);padding:20px;margin-bottom:14px;box-shadow:var(--sh)}
h2{margin:0 0 10px;font-size:18px;font-weight:600}h3{margin:14px 0 8px;font-size:15px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.grow{flex:1}
select,input,textarea{font:inherit;padding:6px 10px;border:1px solid var(--ov);border-radius:10px;background:#fff;max-width:100%;color:var(--tx)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 2px rgba(1,69,142,.18)}
input[type=checkbox]{width:auto}
button.btn{font:inherit;font-weight:600;padding:7px 14px;border-radius:var(--r);border:1px solid var(--p);background:var(--p);color:#fff;cursor:pointer;transition:background .15s,filter .15s}
button.btn:hover{filter:brightness(1.1)}button.btn.sec{background:#fff;color:var(--p);border-color:var(--ov)}button.btn.sec:hover{filter:none;background:var(--pc);border-color:var(--p)}button.btn.warn{background:var(--o);border-color:var(--o)}button.btn.warn:hover{filter:none;background:var(--oh);border-color:var(--oh)}
button.btn.red{background:#fff;color:var(--er);border-color:#f3b4b4}button.btn:disabled{opacity:.45;cursor:not-allowed}button.btn.sm{padding:4px 10px;font-size:12px;border-radius:10px}
table{border-collapse:collapse;width:100%;background:#fff}th,td{border:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top}
th{background:#f2f4f7;font-weight:600;position:sticky;top:0;z-index:2}td.n,th.n{text-align:right;white-space:nowrap}
.scroll{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:var(--r)}.scroll table{border:0}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;background:#e8edf7;color:#26406b}
.badge.draft{background:#fef3c7;color:#92400e}.badge.pending_l1,.badge.pending_l2,.badge.pending_l3,.badge.submitted,.badge.pending_dir{background:#dbeafe;color:#1e40af}
.badge.adjusting{background:#ffedd5;color:#9a3412}.badge.locked{background:#dcfce7;color:#166534}.badge.not_started,.badge.none{background:#eee;color:#555}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--rl);padding:14px;cursor:pointer;box-shadow:var(--sh);transition:border-color .15s,box-shadow .15s}.tile:hover{border-color:var(--o);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.att td.c{padding:0;width:30px;min-width:30px;text-align:center;font-size:11px;cursor:pointer;user-select:none;height:28px}
.att th.c{padding:2px;text-align:center;min-width:30px;font-size:11px}.att .sun{background:#fff1f2}.att th.sun{background:#ffe4e6}.att .hol{background:#ffe0b2}.att th.hol{background:#ffb74d}
.att td.chg{outline:2px solid var(--o);outline-offset:-2px}.att td.dirty{box-shadow:inset 0 0 0 2px #2563eb}
.att td.name{position:sticky;left:0;background:#fff;z-index:1;min-width:190px;white-space:nowrap}
.palette{display:flex;gap:6px;flex-wrap:wrap}.chip{padding:4px 9px;border-radius:7px;border:2px solid transparent;cursor:pointer;font-size:12px}.chip.on{border-color:var(--p);font-weight:700}
.modalback{position:fixed;inset:0;background:#0007;z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:30px 12px;overflow:auto}
.modal{background:#fff;border-radius:var(--rl);padding:20px;box-shadow:0 8px 28px rgba(0,0,0,.18);width:min(760px,100%);max-height:none}.modal.wide{width:min(1100px,100%)}
.modal h2{display:flex;justify-content:space-between}.x{cursor:pointer;color:var(--mu)}
.field{margin-bottom:10px}.field label{display:block;font-size:12px;color:var(--mu);margin-bottom:3px}.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{width:100%}
.err{background:#fee2e2;color:#7f1d1d;padding:10px 12px;border-radius:8px;margin-bottom:10px;white-space:pre-line}.info{background:#e0ecff;color:#1e3a8a;padding:10px 12px;border-radius:8px;margin-bottom:10px}
.warnbox{background:var(--ol);color:#4a2800;padding:10px 12px;border-radius:var(--r);margin-bottom:10px}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;gap:6px}
#toast div{background:#2d3133;color:#eff1f4;padding:10px 16px;border-radius:var(--r);box-shadow:0 4px 12px rgba(0,0,0,.15)}#toast div.bad{background:var(--er)}
.checks{display:flex;flex-wrap:wrap;gap:4px 14px}.checks label{display:flex;align-items:center;gap:5px;font-size:13px}
/* Thanh trang con (Quản trị, Phép năm…): tab gạch chân như trang Cài đặt của Tài liệu / Công việc */
.sub{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.sub:has(>button.btn[data-t]){gap:4px;margin-bottom:16px;border-bottom:1px solid var(--ov)}
.sub>button.btn[data-t]{border:0;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-1px;background:none;color:#434655;font-weight:500;padding:10px 14px}
.sub>button.btn[data-t]:hover{filter:none;color:var(--tx);border-bottom-color:var(--ov);background:none}
.sub>button.btn[data-t]:not(.sec){color:var(--p);border-bottom-color:var(--p);font-weight:600}

/* Phân quyền */
.perm{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.box{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fafbfe}
.box h3{margin:0 0 6px;font-size:14px}.box .hint{font-size:12px;color:var(--mu);margin-bottom:6px}
.opt{display:flex;align-items:flex-start;gap:8px;padding:5px 6px;border-radius:6px;cursor:pointer;font-size:13px}
.opt:hover{background:#eef2fa}.opt input{margin-top:3px;flex:none}.opt small{display:block;color:var(--mu);font-size:11px}
.optlist{max-height:260px;overflow:auto}
.grp{font-weight:600;font-size:12px;color:var(--p);margin:8px 0 2px;text-transform:uppercase;letter-spacing:.3px}
.pill{display:inline-flex;align-items:center;gap:6px;background:#eaf1fb;color:#1e3a6e;border-radius:99px;padding:2px 4px 2px 10px;margin:2px;font-size:12px}
.pill a{color:#b91c1c;text-decoration:none;font-weight:700;padding:0 6px;border-radius:99px}.pill a:hover{background:#fde2e2}
.deptgrp{margin:0 0 12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.deptgrp>h3{margin:0;padding:8px 12px;background:#f0f3fa;font-size:14px}
.err{background:#ffdad6;color:#93000a;padding:10px 12px;border-radius:var(--r)}.info{background:var(--pc);color:#002040;padding:10px 12px;border-radius:var(--r);margin-bottom:8px}

.scopesplit{display:grid;grid-template-columns:260px 1fr;gap:14px;margin-top:10px}
.scopelist{border:1px solid var(--line,#e5e7eb);border-radius:8px;max-height:560px;overflow:auto}
.scopeitem{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 10px;text-decoration:none;color:inherit;border-bottom:1px solid var(--line,#f1f5f9);font-size:14px}
.scopeitem:hover{background:#f8fafc}.scopeitem.on{background:#e0f2fe;font-weight:600}
.scopepanel{min-width:0}.rolegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-top:10px}
.rolecard{border:1px solid var(--line,#e5e7eb);border-radius:8px;padding:10px;background:#fff}
@media(max-width:800px){.scopesplit{grid-template-columns:1fr}}

.rtb td,.rtb th{white-space:nowrap;font-size:12px;padding:6px 8px}.selfcard{border-color:#bfdbfe;background:#f8fbff}

.coeftb td.sk,.coeftb th.sk{position:sticky;left:0;z-index:3;box-shadow:2px 0 0 var(--line)}.coeftb td.sk{background:#fff;z-index:1}.coeftb tr:hover td.sk{background:#f6f8fd}

/* v6.17 chấm công thông minh */
.attbar{position:sticky;top:0;z-index:20;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:8px 10px;margin-bottom:8px;box-shadow:0 2px 6px rgba(15,23,42,.08)}
.attbar .curcode .chip{font-size:15px;padding:3px 12px}
.attbar .typed{margin-left:8px;padding:3px 8px;background:#fef9c3;border-radius:7px}
.attwrap{max-height:calc(100vh - 230px);overflow:auto}
.att thead th{position:sticky;top:0;z-index:4;background:#f1f5f9}
.att thead th:first-child{left:0;z-index:6}
.att th.c{cursor:pointer}
.att td.c{width:34px;min-width:34px;height:32px;font-size:12px;font-weight:600;scroll-margin-left:210px;scroll-margin-top:50px}
.att td.c.selc{box-shadow:inset 0 0 0 100px rgba(37,99,235,.18)}
.att td.c.selfocus{outline:2px solid #1d4ed8;outline-offset:-2px}
.att td.c.ro{background:repeating-linear-gradient(45deg,#f1f5f9,#f1f5f9 4px,#e2e8f0 4px,#e2e8f0 8px);cursor:not-allowed}
.att th.hl,.att td.name.hl{background:#fde68a!important}
.att td.name .rowtool{float:right;border:1px solid #cbd5e1;background:#fff;border-radius:6px;cursor:pointer;padding:0 7px;margin-left:6px;font-weight:700}
.att td.name .rowtool:hover{background:#e0f2fe}

/* v6.19 nhân sự: chỉnh rồi mới lưu */
.pplsave{position:sticky;top:56px;z-index:25;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#fffbeb;border:1px solid #f59e0b;border-radius:10px;padding:8px 12px;margin:8px 0;box-shadow:0 2px 8px rgba(15,23,42,.12)}
.pplsave[hidden]{display:none}
tr.rowdirty td:first-child+td{box-shadow:inset 3px 0 0 #f59e0b}
td.chgtd{background:#fef3c7}
.undochip{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;background:#eef2ff;border:1px solid #c7d2fe;border-radius:8px;padding:4px 10px}

/* v6.19 bảng hệ số: cố định cột thao tác bên phải */
.coeftb th.skr,.coeftb td.skr{position:sticky;right:0;z-index:3;box-shadow:-2px 0 0 var(--line)}.coeftb td.skr{background:#fff;z-index:1}.coeftb tr:hover td.skr{background:#f6f8fd}

/* v6.19 bảng hệ số gọn: không cần kéo ngang */
.coeftb{width:100%;font-size:12px}
.coeftb th,.coeftb td{padding:5px 5px;white-space:normal;line-height:1.25}
.coeftb th{font-size:11.5px;vertical-align:bottom}
.coeftb th.n,.coeftb td.n{text-align:center}
.coeftb th.sk,.coeftb td.sk{width:120px;min-width:110px;max-width:130px}
.coeftb td.skr{width:1%;min-width:96px}
.coeftb td.skr .btn{display:block;width:100%;margin:0 0 3px;padding:3px 6px;font-size:11.5px;white-space:nowrap}
.coeftb td .small{font-size:11px}

/* v6.19b: cột hệ số rất hẹp (hệ số chỉ vài chữ số) */
.coeftb{table-layout:auto}
.coeftb th.cf,.coeftb td.cf{width:54px;min-width:44px;max-width:60px;padding:5px 3px;white-space:normal;word-break:break-word;text-align:center;font-size:11.5px}
.coeftb th.cf.amt,.coeftb td.cf.amt{width:78px;max-width:90px;min-width:64px}
.coeftb th.gr,.coeftb td.gr{width:84px;max-width:96px;min-width:70px}
.coeftb th.dt,.coeftb td.dt{width:74px;max-width:80px}
.coeftb th.cf{font-size:10.5px;line-height:1.2;hyphens:auto}
.coeftb td.dp{width:84px;max-width:110px}.coeftb td.tp{width:58px;white-space:nowrap}
.coeftb td.cf{white-space:nowrap;word-break:normal}.coeftb th.cf,.coeftb td.cf{width:58px;max-width:64px}

/* Bảng hệ số: cột Chức vụ riêng (giữa Phòng và Loại) */
.coeftb th.ps,.coeftb td.ps{width:110px;min-width:90px;max-width:140px}
.coeftb tr.grprow td{background:#e0e7ff;color:#1e3a8a;font-weight:700;font-size:13px;text-transform:uppercase;padding:7px 8px}
.coeftb tr.dptrow td{background:#f1f5f9;font-weight:600;font-style:italic;padding:5px 8px}
/* Bảng chấm công gọn: đủ 31 ngày + cột chức danh trên một màn hình, không cần kéo ngang */
.att th,.att td{padding:3px 4px}
.att td.name{min-width:0;width:1%;max-width:160px;white-space:normal}
.att td.name>b{white-space:nowrap}
.att td.name .badge{padding:0 5px;font-size:10.5px}
.att th.pos,.att td.pos{min-width:0;width:1%;max-width:76px;white-space:normal;font-size:11px;line-height:1.25}
.att th.c{min-width:22px;padding:2px 0;font-size:10px;line-height:1.2}
.att td.c{width:22px;min-width:22px;height:30px;font-size:10px;letter-spacing:-.4px;scroll-margin-left:130px}
.att th.n,.att td.n{padding:3px 2px;font-size:11px}
.att thead th.n{white-space:normal;line-height:1.2;max-width:44px}
.att th.rt,.att td.rt{padding:2px 1px;font-size:10.5px;text-align:center}
.att td.rt select{padding:3px 1px;font-size:12px}
/* Bảng lương trên màn hình: chữ gọn, tên không xuống dòng, vừa một màn hình */
.paytb th,.paytb td{padding:4px 4px;font-size:12px}
.paytb thead th.n{white-space:normal;line-height:1.2;vertical-align:bottom}
.paytb td.nm{white-space:nowrap;min-width:150px}
.paytb td.ps{font-size:11.5px;white-space:nowrap}
.paytb td.n{padding:4px 3px}
.paytb td.dp{font-size:11.5px;min-width:90px}

/* Thống kê năm: thuế TNCN theo năm, nhập giảm trừ, quỹ lương; Lương của tôi: bảng kê thuế TNCN */
.pittb th,.pittb td{padding:5px 6px}
.pittb thead th{white-space:normal;line-height:1.2;vertical-align:bottom}.pittb thead th.a{min-width:92px}
.pittb th.nm,.pittb td.nm{position:sticky;left:-1px;z-index:1;background:#fff;min-width:150px}
.pittb th.nm{z-index:3;background:#f0f3fa}
.pittb th.a{background:#e8eef9}.pittb td.a{background:#f8fafc}
.pittb td.unl{font-style:italic;color:var(--mu)}
.pittb tr.clk{cursor:pointer}.pittb tr.clk:hover td{background:#eef4ff}
.pittb tr.tot td,.fundtb tr.tot td{font-weight:700;background:#f3f4f6}
.pittb sup{color:#b45309;font-weight:700}
.pitsteps{width:auto;min-width:min(620px,100%)}
.pitsteps td{border:0;border-bottom:1px solid var(--line);padding:5px 10px}
.pitsteps td.n{min-width:130px}
.pitsteps tr.sum td{border-top:2px solid #94a3b8;border-bottom:2px solid #94a3b8;background:#f8fbff}
.tdtb td{vertical-align:middle}.tdtb input.mny{width:130px;text-align:right;padding:4px 6px}
.tdtb tr.chg td{background:#fffbeb}
.tdtb input.over{border-color:#f59e0b;background:#fff7ed}
.fundtb{table-layout:fixed;min-width:1180px}.fundtb th:first-child{width:250px}.fundtb th:nth-child(2){width:70px}
.fundtb thead th{white-space:normal;line-height:1.2;vertical-align:bottom}.fundtb td:first-child{white-space:normal}
.fundtb th.em,.fundtb td.em{background:#f8fbff}
.fundlist{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px}
/* Quản trị: thuế TNCN (biểu thuế, người phụ thuộc), quỹ lương */
.pithelp{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#fafbfe;margin:8px 0 4px;font-size:13px}
.pithelp summary{cursor:pointer;font-weight:600;color:var(--p)}
.pithelp .cols{columns:2 440px;column-gap:28px;margin-top:6px}
.pithelp p{margin:0 0 6px;break-inside:avoid}.pithelp ul{margin:0 0 8px 18px;padding:0}.pithelp li{margin:2px 0;break-inside:avoid}
.pithelp .ex{background:#fff;border:1px dashed #cbd5e1;border-radius:8px;padding:8px 10px;margin:4px 0 8px;break-inside:avoid;line-height:1.55}
.pithelp .legal{background:#fff7ed;color:#9a3412;border-radius:8px;padding:8px 10px}
tr.pitrow{cursor:pointer}tr.pitrow:hover td{background:#f6f8fd}tr.pitrow.on td{background:#e0f2fe}
.pited{border:1px solid #bfdbfe;border-radius:10px;padding:12px;background:#f8fbff;margin-top:10px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 14px}
table.pitbr{width:auto;min-width:min(720px,100%)}.pitbr input{width:160px;text-align:right}.pitbr input.rate{width:80px}
.pitopt{display:block;margin:4px 0;font-size:13px}
input.bad,select.bad{border-color:var(--er);background:#fef2f2}
.pited [hidden]{display:none}
/* v6.24 bảng lương: tab "Lương + thuế TNCN" và phần thuế trong chi tiết từng người */
.pittb th.pitkey{background:#e8eefc}
.pittb tr.pitdpt td{background:#f1f5f9;font-weight:600;font-style:italic;padding:5px 8px}
.pittb .pitnote{white-space:normal;max-width:210px;font-size:11px;color:var(--mu);line-height:1.25;margin-top:2px}
.pitneg{color:var(--ok)}.pittb .pitsub{font-size:10.5px;color:var(--mu)}
.pithead{margin:10px 0 8px}
.pitbanner{background:#fef3c7;color:#78350f;border:1px solid #f59e0b;border-radius:8px;padding:8px 12px;margin-bottom:8px}
.pitbanner b{font-size:14px}
.pitbrk{font-size:12px;margin:2px 0}.pitbrk th,.pitbrk td{padding:3px 6px}.pitbrk th{position:static;background:#f6f8fc}
/* v6.24: bảng con trong popup chi tiết dòng lương (bậc thuế, quyết toán) không làm popup rộng quá màn hình điện thoại */
.modal td > .scroll { max-width: calc(100vw - 80px); }
/* v6.25: tab Nhân sự — trình duyệt chỉ dựng (layout) các nhóm đang trong màn hình, nhóm ở dưới dựng khi cuộn tới → mở tab nhanh dù có hàng trăm người */
.deptgrp.pgrp{content-visibility:auto;contain-intrinsic-size:auto 900px}
/* v6.25: bảng chấm công / chấm ăn: cột Họ tên, Chức danh, cột tổng vừa đủ chữ; phần còn lại chia đều cho các cột ngày (ô ngày rộng hơn, không cần kéo ngang) */
.att th.pos,.att td.pos{white-space:nowrap;max-width:none}
.att th.c,.att td.c{width:3%}
.att th.n,.att td.n,.att th.rt,.att td.rt{width:1%}
/* Trợ giúp */
/* ===== Trợ giúp ===== */
.helpbtn{display:inline-flex;align-items:center;gap:4px}.helpbtn .ms{font-size:16px}.sub .helpbtn{margin-left:auto}
.helphero{background:linear-gradient(135deg,#fff 0%,#fff 60%,var(--ol) 100%);position:relative;overflow:hidden}
.helphero:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--p),var(--o))}
.helpsearch{margin:12px 0 10px}.helpsearch input{width:100%;padding:10px 14px;font-size:15px;border-radius:var(--r)}
.hgfilter{display:flex;gap:6px;flex-wrap:wrap}
.hgchip{font:inherit;font-size:13px;padding:4px 12px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--mu);cursor:pointer}
.hgchip:hover{border-color:var(--p);color:var(--p)}.hgchip.on{background:var(--p);border-color:var(--p);color:#fff}
.helproles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:14px}
.rolecard2{background:#fff;border:1px solid var(--line);border-radius:var(--rl);padding:14px;box-shadow:var(--sh)}
.rchead{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.rcicon{width:40px;height:40px;border-radius:var(--r);background:var(--pc);color:var(--p);display:flex;align-items:center;justify-content:center;flex:none}
.rolecard2:nth-child(2n) .rcicon{background:var(--ol);color:var(--o)}
.rcsteps{list-style:none;counter-reset:st;margin:0;padding:0}
.rcsteps li{counter-increment:st;position:relative;padding:4px 0 4px 30px;font-size:13px;line-height:1.45}
.rcsteps li:before{content:counter(st);position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:99px;background:var(--p);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.rcsteps a{color:var(--tx);text-decoration:none}.rcsteps a:hover{color:var(--p);text-decoration:underline}
.helpwrap{display:grid;grid-template-columns:270px 1fr;gap:14px;align-items:start}
.helptoc{position:sticky;top:64px;max-height:calc(100vh - 80px);overflow:auto;font-size:13px;padding:10px}
.helptoc .tochead{font-weight:600;color:var(--mu);font-size:12px;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px 6px}
.helptoc ul{list-style:none;padding:0;margin:0}.helptoc li{margin:1px 0}
.helptoc a{display:flex;gap:8px;align-items:baseline;padding:5px 8px;border-radius:10px;color:var(--tx);text-decoration:none}
.helptoc a:hover{background:#eceef1}.helptoc a.on{background:var(--pc);color:var(--p);font-weight:600}
.dot{width:8px;height:8px;border-radius:99px;flex:none;display:inline-block;background:var(--mu)}
.dot.start{background:var(--o)}.dot.daily{background:#15803d}.dot.config{background:var(--p)}.dot.faq{background:#7c3aed}
.hgtag{font-size:11px;padding:2px 9px;border-radius:99px;white-space:nowrap}.hgtag.start{background:var(--ol);color:#9a4a0b}.hgtag.daily{background:#e7f6ec;color:#166534}.hgtag.config{background:var(--pc);color:var(--p)}.hgtag.faq{background:#f1eafe;color:#5b21b6}
.hsechead{display:flex;gap:10px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:8px}.hsechead h2{margin:0}
.helpmain section{scroll-margin-top:64px}
.helpdoc{line-height:1.65}.helpdoc h3{margin:18px 0 6px;color:var(--p);font-size:15px}
.helpdoc a{color:var(--p5)}
.helpdoc img{max-width:100%;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);background:#fff}
.helpdoc .flow{max-width:100%;height:auto}.helpdoc code{background:#eceef1;padding:0 5px;border-radius:5px;font-size:12.5px}
.helpdoc .tip,.helpdoc .note{background:var(--pc);border-left:4px solid var(--p);padding:8px 12px;margin:10px 0;border-radius:0 var(--r) var(--r) 0}
.helpdoc .warn{background:var(--ol);border-left:4px solid var(--o);padding:8px 12px;margin:10px 0;border-radius:0 var(--r) var(--r) 0;color:#4a2800}
.helpdoc .note:before{content:"💡 "}.helpdoc .warn:before{content:"⚠️ "}
.helpdoc figure{margin:12px 0 16px;text-align:center}.helpdoc figcaption{font-size:12.5px;color:var(--mu);margin-top:4px}
.helpdoc table{border-collapse:collapse;width:100%;font-size:13.5px;margin:8px 0;border-radius:var(--r);overflow:hidden}.helpdoc th,.helpdoc td{border:1px solid var(--line);padding:6px 9px;vertical-align:top;text-align:left}.helpdoc th{background:#f2f4f7}
.helpdoc ul{padding-left:22px}
/* Danh sách đánh số = các bước: số tròn như SSO */
.helpdoc>ol,.helpdoc li>ol{list-style:none;counter-reset:st;padding-left:0}
.helpdoc>ol>li,.helpdoc li>ol>li{counter-increment:st;position:relative;padding:3px 0 3px 34px;margin:4px 0}
.helpdoc>ol>li:before,.helpdoc li>ol>li:before{content:counter(st);position:absolute;left:0;top:4px;width:24px;height:24px;border-radius:99px;background:var(--p);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
@media (max-width:800px){.helpwrap{grid-template-columns:1fr}.helptoc{position:static;max-height:none}}

/* Tiêu đề bộ phận / mục trong bảng (chấm công, bảng lương, ăn ca) */
tr.deptrow td,tr.deptrow th{background:#e0e7ff;font-weight:700;color:#1e3a8a;text-align:left}
tr.deptrow td.n{text-align:right}
tr.secrow td{background:#f1f5f9;font-weight:600;font-style:italic;padding-left:18px}
tr.deptrow .stick,tr.secrow .stick{position:sticky;left:8px;display:inline-block}
/* v6.31 Công thức lương */
.fxhero{border-color:#bcd0ee;background:linear-gradient(180deg,#f4f8ff,#fff 70%)}
.fxflow{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px}.fxflow i{align-self:center;color:var(--mu);font-style:normal;font-size:18px}
.fxbox{flex:1 1 150px;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid #bcd0ee;border-radius:10px;background:#fff;color:var(--tx);text-decoration:none}
.fxbox b{color:var(--p)}.fxbox span{font-size:12px;color:var(--mu)}a.fxbox:hover{border-color:var(--p);box-shadow:0 2px 8px #01458e1a}
.fxbox.end{background:#ecfdf3;border-color:#a7e3bf}.fxbox.end b{color:var(--ok)}
.fxguide{margin-top:10px;border:1px dashed #bcd0ee;border-radius:10px;padding:6px 10px;background:#fff}.fxguide summary{cursor:pointer;font-weight:600;color:var(--p)}.fxguide ul{margin:6px 0 2px 18px;padding:0}.fxguide li{margin:3px 0}
.fxsample{padding:8px 10px;border-radius:10px;background:#fff7ed;border:1px solid #fed7aa}
.fxnav{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.fxnav a{padding:3px 10px;border-radius:99px;background:#e8edf7;color:#26406b;text-decoration:none}.fxnav a:hover{background:var(--p);color:#fff}
.fxwho{margin-top:8px;font-size:12px;color:#26406b}
code.fxc{font:12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:5px;padding:0 4px;color:#0f3d75;white-space:pre-wrap;word-break:break-word}
.badge.fxbadge{background:#ede9fe;color:#5b21b6}
.fxpk table{margin-bottom:6px}
.fxstep{border:1px solid var(--line);border-left:4px solid var(--p);border-radius:10px;padding:10px 12px;margin:10px 0;background:#fcfdff}
.fxdef{margin:4px 0;color:var(--mu)}
textarea.fxin{width:100%;font:13px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;margin-top:4px;resize:vertical}textarea.fxin[readonly]{background:#f4f6fa;color:#475069}
.fxmsg{margin-top:3px;min-height:16px}.fxmsg.fxok{color:var(--ok)}.fxmsg.fxbad{color:var(--er);font-weight:600}
label.fxradio{display:block;margin:8px 0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer}label.fxradio:has(input:checked){border-color:var(--p);background:#f4f8ff}label.fxradio ul{margin:4px 0 0 22px;padding:0}
.gchip{display:inline-flex;align-items:center;gap:4px;margin-right:6px}
#fx1,#fx2,#fx3,#fx4,#fx5,#fx6,#fx7{scroll-margin-top:70px}
a.btn{display:inline-flex;align-items:center;gap:4px;font-weight:600;padding:4px 10px;font-size:12px;border-radius:10px;border:1px solid var(--ov);background:#fff;color:var(--p);text-decoration:none;white-space:nowrap}a.btn:hover{background:var(--pc);border-color:var(--p)}
/* Điện thoại: thanh trang cuộn ngang như SSO, không xuống nhiều dòng */
@media (max-width:800px){.bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:0 8px}.bar::-webkit-scrollbar{display:none}.tab{padding:14px 10px}.brand{white-space:nowrap;margin-right:6px;padding-right:8px}.me{display:none}#bell{flex:none}}
/* Trợ lý AI trong Payroll (cấu hình ở Cổng SSO): nút tròn góc phải dưới + khung trò chuyện, giống nút ✨ của Cổng */
.aiw{display:none!important}body.ai-on .aiw{display:inline-block!important}
#aifab{position:fixed;right:16px;bottom:16px;z-index:45;width:48px;height:48px;border-radius:99px;border:0;color:#fff;font-size:20px;cursor:pointer;background:linear-gradient(135deg,var(--p),var(--o));box-shadow:0 4px 14px rgba(0,0,0,.2)}#aifab:hover{transform:scale(1.05)}#aifab.hide{display:none}
#aipanel{position:fixed;right:16px;bottom:16px;z-index:46;width:min(420px,calc(100vw - 32px));height:min(600px,calc(100vh - 90px));background:#fff;border:1px solid var(--line);border-radius:var(--rl);box-shadow:0 8px 30px rgba(0,0,0,.18);display:flex;flex-direction:column}
.aihead{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--p)}
.ailist{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}.ailist .aisug{display:block;width:100%;text-align:left;margin-bottom:6px;font-weight:500}
.aimsg{padding:8px 11px;border-radius:12px;max-width:92%;overflow-wrap:anywhere}.aimsg p{margin:0 0 6px}.aimsg p:last-child{margin:0}.aimsg ul,.aimsg ol{margin:0 0 6px;padding-left:20px}
.aimsg.user{align-self:flex-end;background:var(--p);color:#fff}.aimsg.assistant{align-self:flex-start;background:#f2f4f7}.aimsg.err{background:#fdecec;color:var(--er)}
.aimsg table{font-size:12px;margin:4px 0;display:block;overflow:auto}.aimsg code{background:#e6e9ee;padding:0 4px;border-radius:4px}
.aifoot{display:flex;gap:6px;padding:8px 10px 4px;border-top:1px solid var(--line)}.aifoot textarea{flex:1;resize:none}.aileft{padding:0 12px 8px}