:root{
  --do:#C2410C; --do-dam:#922E09; --kim:#CD9E2A; --muc:#171412; --kem:#F7F2E9; --giay:#FDFBF6;
  --vang-nhat:#FAF4E4; --xam:#5C5850; --ke:#E2D6C4; --xanh:#2F7D4F; --xanh-nhat:#E6F2EA; --do-nhat:#FBE9E1;
  --hdr-h:55px;   /* chiều cao header điện thoại (đo 375px: 55px) (dính đầu trang) — ô tìm Sơ đồ dính ngay dưới */
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;background:var(--kem);color:var(--muc);font-size:15px;line-height:1.6;padding-bottom:84px}
button,input,select,textarea{font:inherit;color:inherit}
header{background:var(--giay);border-bottom:3px solid var(--do);padding:10px 16px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:5;flex-wrap:wrap}
header svg{width:36px;height:36px;flex:none}
.brand{display:flex;flex-direction:column;line-height:1.2}
.brand b{font-weight:800;font-size:13px;letter-spacing:.04em}
.brand b span{color:var(--do)}
.brand small{color:var(--xam);font-size:13px}
.me{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--xam)}
.me select{margin:0;padding:6px 8px;max-width:240px;font-weight:700;color:var(--muc)}
main{max-width:1100px;margin:0 auto;padding:16px}
h1{font-size:22px;font-weight:800;margin:4px 0 4px}
h2{font-size:18px;font-weight:700;margin:22px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--kim);display:inline-block}
h3{font-size:16px;font-weight:700;margin:10px 0 6px}
p.sub{color:var(--xam);margin:0 0 12px}
.card{background:var(--giay);border:1px solid var(--ke);border-radius:12px;padding:14px 16px;margin:10px 0}
.card.click{cursor:pointer}.card.click:hover{border-color:var(--kim)}
.callout{background:var(--vang-nhat);border-left:4px solid var(--kim);border-radius:8px;padding:10px 14px;margin:10px 0;font-size:14px}
.callout.do{background:var(--do-nhat);border-left-color:var(--do)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.row>label{flex:1 1 180px}
label{display:block;font-size:14px;font-weight:600;color:var(--xam)}
input[type=text],input[type=password],input[type=tel],input[type=email],input[type=date],input[type=month],input[type=number],select,textarea{width:100%;padding:9px 11px;border:1px solid var(--ke);border-radius:8px;background:#fff;margin-top:4px;font-weight:400;color:var(--muc)}
textarea{min-height:60px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--do);color:#fff;border:0;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer;min-height:44px;text-decoration:none}
.btn:hover{background:var(--do-dam)}
.btn.phu{background:#fff;color:var(--muc);border:1px solid var(--ke)}
.btn.phu:hover{background:var(--vang-nhat)}
.btn.nho{min-height:34px;padding:6px 12px;font-size:14px}
.btn.xanh{background:var(--xanh)}
.btn.lon{min-height:56px;font-size:16px;flex:1 1 200px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
nav.tabs{position:fixed;bottom:0;left:0;right:0;background:var(--muc);display:flex;z-index:10;padding-bottom:env(safe-area-inset-bottom)}
nav.tabs button{flex:1;background:none;border:0;color:#cfc6b8;padding:8px 1px 10px;font-size:11.5px;font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;line-height:1.25}
nav.tabs button .ic{font-size:19px;line-height:1}
nav.tabs button.on{color:#fff}
nav.tabs button.on::before{content:"";position:absolute;top:0;left:20%;right:20%;height:3px;background:var(--kim)}
.badge{position:absolute;top:3px;right:calc(50% - 24px);background:var(--do);color:#fff;border-radius:10px;font-size:11px;padding:0 6px;line-height:16px}
.tbl-wrap{overflow-x:auto;margin:8px 0}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums;background:var(--giay)}
th,td{border-bottom:1px solid var(--ke);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--vang-nhat);font-weight:700;white-space:nowrap}
td.num,th.num{text-align:right}
tr.click{cursor:pointer}tr.click:hover td{background:var(--vang-nhat)}
.big{font-size:20px;font-weight:800;color:var(--do)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.kpi{background:var(--giay);border:1px solid var(--ke);border-radius:12px;padding:12px 14px}
.kpi.click{cursor:pointer}.kpi.click:hover{border-color:var(--do)}
.kpi small{display:block;color:var(--xam);font-size:13px;font-weight:600}
.kpi b{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.kpi.do b{color:var(--do)}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:1px 8px;border-radius:20px;background:var(--kem);border:1px solid var(--ke);white-space:nowrap}
.tag.liet{background:var(--do);color:#fff;border-color:var(--do)}
.tag.cn{background:var(--vang-nhat);border-color:var(--kim)}
.tag.ok{background:var(--xanh-nhat);color:var(--xanh);border-color:#b9d9c4}
.tag.loi{background:var(--do-nhat);color:var(--do-dam);border-color:#f0c4b1}
.tag.cho{background:#FFF3C8;color:#7a5a00;border-color:#ecd27a}
.cluster{border:1px solid var(--ke);border-radius:12px;margin:12px 0;overflow:hidden;background:var(--giay)}
.cluster-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px;background:var(--vang-nhat);font-weight:700}
.cluster-h .pts{margin-left:auto;font-variant-numeric:tabular-nums}
.cluster.fail .cluster-h{background:var(--do-nhat)}
.item{padding:10px 14px;border-top:1px solid var(--ke)}
.item-top{display:flex;gap:10px;align-items:flex-start}
.item-top .code{font-weight:800;color:var(--do);min-width:34px}
.item-top .txt{flex:1}
.pf{display:flex;gap:6px;flex:none}
.pf button{min-width:72px;min-height:40px;border-radius:8px;border:1px solid var(--ke);background:#fff;font-weight:700;cursor:pointer}
.pf button.dat.on{background:var(--xanh);color:#fff;border-color:var(--xanh)}
.pf button.khong.on{background:var(--do);color:#fff;border-color:var(--do)}
.fail-box{margin-top:8px;padding:10px;border-radius:8px;background:var(--do-nhat);display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.fail-box .full{grid-column:1/-1}
.score-bar{position:sticky;bottom:72px;background:var(--muc);color:#fff;border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:10px;margin-top:14px;z-index:4;flex-wrap:wrap}
.score-bar b{font-size:24px;color:var(--kim);font-variant-numeric:tabular-nums}
.score-bar .acts{margin-left:auto;display:flex;gap:8px}
.seg{display:inline-flex;border:1px solid var(--ke);border-radius:10px;overflow:hidden;background:#fff;flex-wrap:wrap}
.seg button{border:0;background:none;padding:8px 14px;font-weight:700;cursor:pointer;min-height:40px}
.seg button.on{background:var(--do);color:#fff}
.score-btns{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:10px 0}
.score-btns button{min-height:52px;border-radius:10px;border:1px solid var(--ke);background:#fff;font-size:18px;font-weight:800;cursor:pointer}
.score-btns button.on{background:var(--do);color:#fff;border-color:var(--do)}
.score-btns button.unhappy{grid-column:span 6;font-size:15px;background:var(--do-nhat);color:var(--do-dam)}
.score-btns button.unhappy.on{background:var(--do-dam);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.chips button{border:1px solid var(--ke);background:#fff;border-radius:20px;padding:6px 14px;font-weight:600;cursor:pointer;min-height:36px}
.chips button.on{background:var(--muc);color:#fff;border-color:var(--muc)}
.chips button.on .tag:not(.loi):not(.liet){color:var(--muc)}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.thumb{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--ke);cursor:zoom-in}
.thumb-wrap{position:relative}
.thumb-wrap .x{position:absolute;top:-8px;right:-8px;background:#fff;border-radius:50%;width:24px;height:24px;padding:0;font-size:16px;line-height:22px;border:1px solid var(--ke)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.gallery .g{background:var(--giay);border:1px solid var(--ke);border-radius:10px;overflow:hidden;cursor:pointer}
.gallery img,.gallery .noimg{width:100%;height:130px;object-fit:cover;display:block;background:var(--kem)}
.gallery .noimg{display:flex;align-items:center;justify-content:center;color:var(--xam);font-size:13px}
.gallery .g div.t{padding:6px 8px;font-size:13px;line-height:1.35}
.meta{font-size:13px;color:var(--xam)}
.empty{color:var(--xam);text-align:center;padding:24px}
.up{color:var(--xanh);font-weight:800}.down{color:var(--do);font-weight:800}.flat{color:var(--xam);font-weight:800}
.warn{color:var(--do);font-weight:700}
.muted{color:var(--xam);font-size:13px}
.script{font-size:14px;background:var(--giay);border:1px dashed var(--kim);border-radius:10px;padding:10px 14px}
.script ol{margin:4px 0;padding-left:20px}
.edit-cluster{border:1px solid var(--ke);border-radius:10px;padding:10px;margin:10px 0;background:#fff}
.edit-item{display:flex;gap:8px;align-items:center;margin:6px 0;flex-wrap:wrap}
.edit-item input[type=text]{margin:0;flex:1 1 200px;width:auto}
/* Sơ đồ V3 — màn khai: dòng đơn vị thụt theo cấp, vạch trái cho dễ thấy cha–con; điện thoại thụt ít hơn để không tràn ngang */
.dv-dong{border-left:3px solid var(--ke);padding:6px 0 6px 8px;margin-left:calc(var(--sau,0) * 16px)}
.dv-dong select.mini{max-width:100%}
@media (max-width:600px){.dv-dong{margin-left:calc(var(--sau,0) * 8px)}}
.chk{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--muc);font-size:14px;margin-right:12px}
.x{border:0;background:none;color:var(--do);font-size:20px;cursor:pointer;padding:4px 8px}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--muc);color:#fff;padding:10px 18px;border-radius:10px;font-weight:600;z-index:20;box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:90vw}
.steps{display:grid;gap:8px}
.step{display:flex;gap:12px;align-items:center;background:var(--giay);border:1px solid var(--ke);border-radius:12px;padding:10px 14px;cursor:pointer}
.step:hover{border-color:var(--kim)}
.step .n{width:32px;height:32px;border-radius:50%;background:var(--kem);border:2px solid var(--ke);display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.step.done .n{background:var(--xanh);border-color:var(--xanh);color:#fff}
.step .t{flex:1}.step .t b{display:block}.step .t span{font-size:13px;color:var(--xam)}
.step .go{color:var(--do);font-weight:700;font-size:14px;white-space:nowrap}
.back{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--do);font-weight:700;cursor:pointer;padding:4px 0;font-size:15px}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px 16px;font-size:14px}
.info div span{display:block;font-size:12px;color:var(--xam);font-weight:600}
.thread{border-top:1px solid var(--ke);margin-top:8px;padding-top:8px}
.msg{background:#fff;border:1px solid var(--ke);border-radius:10px;padding:6px 10px;margin:6px 0;font-size:14px}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:30;cursor:zoom-out}
.lightbox img{max-width:94vw;max-height:90vh;border-radius:8px}
.hide{display:none!important}
.sub-list{margin:0;padding:0;list-style:none}
.sub-list li{display:flex;gap:8px;padding:3px 0;font-size:14.5px;color:var(--xam);line-height:1.5}
.sub-list li .code{color:var(--do);font-weight:800;min-width:38px}
.sub-list li.bad{color:var(--do-dam);font-weight:600}
.pf.lon{margin-top:10px}.pf.lon button{min-width:130px;min-height:44px}
.fail-list label{display:flex;gap:8px;align-items:flex-start;font-weight:500;color:var(--muc);padding:4px 0;cursor:pointer}
.fail-list input{margin-top:5px;width:18px;height:18px;flex:none}
.auth{max-width:460px;margin:24px auto}
.me{flex-wrap:wrap;justify-content:flex-end}.me .who{white-space:nowrap}.me .who b{color:var(--muc)}
@media (max-width:600px){.me{justify-content:flex-start}.me .who{width:100%;white-space:normal}.me .btn.nho{min-height:30px;padding:4px 10px;font-size:13px}}
code{background:var(--kem);border:1px solid var(--ke);border-radius:6px;padding:0 6px;font-size:14px}
@media print{nav.tabs,.me,.no-print,.score-bar{display:none!important}body{background:#fff;padding:0}.card{break-inside:avoid}}
@media (max-width:600px){main{padding:12px 16px}h1{font-size:20px}.kpi b{font-size:20px}.item-top{flex-wrap:wrap}.pf{width:100%}.pf button{flex:1}.score-bar{padding:8px 12px}.score-bar b{font-size:20px}.score-bar .acts{width:100%}.score-bar .acts .btn{flex:1;min-height:40px;padding:6px 10px;font-size:14px}.me{margin-left:0;width:100%}.me select{max-width:none;flex:1}}
/* ===== Thêm cho bản Supabase (Kế hoạch 2): trạng thái mạng, chuông, khung thông báo ===== */
.net{font-size:12px;font-weight:700;white-space:nowrap}
.net.saving{color:var(--xam)}
.net.offline{color:var(--do)}
.bell{position:relative;background:#fff;border:1px solid var(--ke);border-radius:10px;min-height:34px;min-width:40px;padding:4px 8px;font-size:17px;line-height:1;cursor:pointer}
.bell .badge{top:-7px;right:-7px}
.notif-panel{position:fixed;top:64px;right:12px;width:min(380px,calc(100vw - 24px));max-height:70vh;overflow:auto;background:var(--giay);border:1px solid var(--ke);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:25;padding:0 0 8px}
.notif-panel .np-h{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;border-bottom:1px solid var(--ke);position:sticky;top:0;background:var(--giay)}
.notif-panel .np-h b{flex:1}
.notif-panel .np-day{font-size:12px;font-weight:700;color:var(--xam);padding:10px 14px 2px;text-transform:uppercase;letter-spacing:.03em}
.notif-item{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 14px;cursor:pointer;font-size:14px;line-height:1.4}
.notif-item:hover{background:var(--vang-nhat)}
.notif-item.unread{font-weight:700}
.notif-item.unread::before{content:"● ";color:var(--do)}
.notif-item .meta{font-weight:400}
@media print{.bell,.notif-panel,.net{display:none!important}}

/* ---- Phần 01 Sơ đồ tổ chức ---- */
/* Sơ đồ V4: cây hàng kiểu Haraworks (B3-A…I) — mỗi dòng ≥ 40px, thụt 20px (14px điện thoại), kẻ trái var(--ke); ngăn kéo Hồ sơ đơn vị */
.so-thanh{display:flex;align-items:center;gap:8px;margin:6px 0}
.so-tabs{display:flex;flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;gap:8px;align-items:center;margin:0;scrollbar-width:none}
.so-tabs button{flex:none}
.so-mohet{flex:none;border:0;background:none;color:var(--do);font-weight:700;padding:6px 4px;min-height:36px;cursor:pointer;white-space:nowrap}
.so-mohet .so-ngan{display:none}
.so-pham-vi{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--kem);border:1px solid var(--ke);border-radius:8px;padding:8px 12px;margin:8px 0;font-size:14px;color:var(--xam)}
.so-pham-vi b{color:var(--muc)}
.so-pham-vi>span{flex:1 1 0;min-width:0}
.so-pham-vi>svg.ic{flex:none}
.so-cbs{display:block;width:100%;text-align:left;background:var(--do-nhat);border:1px solid #f0c4b1;color:var(--do-dam);border-radius:8px;padding:8px 12px;margin:8px 0;font-weight:700;cursor:pointer;min-height:40px}
.so-tim{position:sticky;top:var(--hdr-h);z-index:4;display:flex;align-items:center;gap:6px;background:var(--kem);padding:6px 0}
.so-tim input{margin:0;flex:1;min-width:0}
.so-tim .so-tim-x{flex:none;width:40px;height:40px;border:1px solid var(--ke);border-radius:8px;background:#fff;font-size:18px;cursor:pointer}
.so-cay{background:var(--giay);border:1px solid var(--ke);border-radius:12px;padding:6px 8px;margin:8px 0;overflow:hidden}
.so-dong{display:flex;align-items:center;gap:6px;min-height:40px;min-width:0;padding:2px 0}
.so-dong>svg.ic{flex:none;color:var(--xam)}
.so-mui,.so-mui-trong{flex:none;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center}
.so-mui{border:0;background:none;border-radius:6px;cursor:pointer;color:var(--muc)}
.so-mui svg.ic{transition:transform .15s}
.so-mui.mo svg.ic{transform:rotate(90deg)}
.so-mui:hover{background:var(--kem)}
.so-ten{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;background:none;padding:6px 2px;font:inherit;color:var(--muc);text-align:left;cursor:pointer;min-height:36px}
.so-l-goc>.so-ten,.so-l-dv>.so-ten,.so-l-region>.so-ten,.so-l-area>.so-ten,.so-l-store>.so-ten,.so-l-vai>.so-ten,.so-l-cd>.so-ten,.so-l-chuaxep>.so-ten{font-weight:700}
.so-ten:hover{text-decoration:underline}
.so-phu{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--xam);font-size:14px}
.so-ma{flex:none;font-size:13px}
.so-dem{flex:none;display:inline-flex;align-items:center;gap:3px;background:var(--kem);border:1px solid var(--ke);border-radius:20px;padding:0 8px;font-size:13px;font-weight:700;color:var(--xam);line-height:22px}
.so-dem svg.ic{width:12px;height:12px}
.so-cham{flex:none;width:8px;height:8px;border-radius:50%;background:var(--do)}
.so-khoa{flex:none;color:var(--kim);display:inline-flex}
.so-con{margin-left:20px;padding-left:6px;border-left:1px solid var(--ke)}
.so-cay mark,.so-dv mark{background:var(--vang-nhat);color:inherit;border-radius:3px;padding:0 1px;box-shadow:0 0 0 1px var(--kim)}
.so-dv .dr-b select,.so-dv .dr-b input[type=text]{max-width:100%}
.so-dv .so-nguoi-ds{display:flex;flex-direction:column}
.so-dv .so-nguoi-ds button{text-align:left;border:0;border-bottom:1px solid var(--ke);background:none;padding:10px 4px;min-height:40px;font:inherit;cursor:pointer}
.so-dv .so-nguoi-ds button:last-child{border-bottom:0}
.so-dv .so-ve b{color:var(--do-dam)}
@media (max-width:600px){.so-con{margin-left:14px;padding-left:4px}.so-mohet .so-dai{display:none}.so-mohet .so-ngan{display:inline}.so-nguoi{flex-wrap:wrap;row-gap:0}.so-nguoi .so-ma{order:3;margin-left:auto}.so-nguoi .so-phu{order:5;flex-basis:100%;padding-left:58px;margin-top:-8px;white-space:normal}.drawer.so-dv{top:auto;bottom:0;height:90vh;border-radius:16px 16px 0 0}.bang-the tr{display:block;border:1px solid var(--ke);border-radius:10px;margin:8px 0;padding:6px 10px;background:#fff}.bang-the tr:first-child{display:none}.bang-the td{display:block;border:0;padding:4px 0}.bang-the td[data-nhan]::before{content:attr(data-nhan);display:block;font-size:13px;color:var(--xam);font-weight:600}.bang-the td input,.bang-the td select{min-width:0!important;max-width:100%!important;width:100%}}
select.mini{width:auto;max-width:220px;padding:4px 8px;margin:0;font-size:14px;display:inline-block}
ul.iss{margin:4px 0 0;padding-left:20px}
/* ---- Phần 02a Công ca ---- */
table.grid th,table.grid td{text-align:center;white-space:nowrap}
table.grid th:first-child,table.grid td:first-child{text-align:left;position:sticky;left:0;background:var(--giay);z-index:1}
table.grid th.on,table.grid td.on{background:var(--vang-nhat)}
table.grid tr.me-row td{background:var(--xanh-nhat)}
.cell{width:38px;height:34px;border-radius:8px;border:1px solid var(--ke);background:#fff;font-weight:800;cursor:pointer}
.cell.want{border-color:var(--kim);background:var(--vang-nhat)}
.cell.on{background:var(--xanh);color:#fff;border-color:var(--xanh)}
.cell[disabled]{opacity:.35}
.seg{display:inline-flex;align-items:center;gap:4px}
input[type=time]{padding:9px 11px;border:1px solid var(--ke);border-radius:8px;background:#fff;margin-top:4px;width:100%}
/* 8 tab: cuộn ngang trên điện thoại thay vì ép chữ */
nav.tabs{overflow-x:auto;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{min-width:64px}
table.grid th:first-child,table.grid td:first-child{white-space:normal;min-width:110px;max-width:140px}
table.grid th,table.grid td{padding:6px 4px}
table.grid td.num,table.grid th.num{text-align:center}
@media (max-width:600px){table.grid th:first-child,table.grid td:first-child{min-width:96px;max-width:110px;font-size:13px}.cell{width:32px;height:32px}}
/* Hàng màn anh em trong 1 tab (khung 5 tab) */
.subnav{max-width:1100px;margin:0 auto;padding:10px 16px 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.subnav:empty{display:none}
.subnav::-webkit-scrollbar{display:none}
.subnav button{flex:none;white-space:nowrap}
.subnav .sn-b{background:var(--do);color:#fff;border-radius:10px;font-size:11px;padding:0 6px;line-height:16px;margin-left:4px}
@media print{.subnav{display:none!important}}

/* Báo lỗi — nút con bọ nổi (bug-button.js). z-index cao hơn mọi popup (lightbox 30, chuông 25, toast 20). */
.bug-btn{position:fixed;left:0;top:0;width:48px;height:48px;border-radius:50%;border:2px solid var(--kim);background:var(--do);color:var(--kem);display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;padding:0;cursor:grab;z-index:2147483000;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 12px rgba(23,20,18,.28);opacity:.85;transition:opacity .15s}
.bug-btn:hover,.bug-btn:focus-visible,.bug-btn--active{opacity:1}
.bug-btn:focus-visible{outline:3px solid var(--kim);outline-offset:2px}
.bug-btn--drag{cursor:grabbing;box-shadow:0 8px 20px rgba(23,20,18,.35)}
.bug-btn--snap{transition:transform .18s ease-out,opacity .15s}
@media (prefers-reduced-motion:reduce){.bug-btn--snap{transition:opacity .15s}}
@media print{.bug-btn{display:none!important}}

/* ===== Khung máy tính kiểu Haraworks (bước 1a): thanh trên + thanh trái nền mực. Điện thoại (< 1024px) giữ nguyên khung cũ ===== */
.d-only,.side{display:none}
@media (min-width:1024px){
  :root{--side-w:232px;--top-h:58px;--hdr-h:var(--top-h)}
  body.side-mini{--side-w:56px}
  body{padding-bottom:24px}
  body.has-side{padding-top:var(--top-h);padding-left:var(--side-w)}
  .d-only{display:block}
  .m-only,nav.tabs,.subnav{display:none!important}
  body.has-side header{position:fixed;top:0;left:0;right:0;height:var(--top-h);flex-wrap:nowrap;z-index:12;padding:8px 16px}
  body.has-side header .brand{display:none}
  body.has-side header svg{width:34px;height:34px}
  body.has-side .me .who{display:none}
  .crumb{font-weight:700;font-size:15px;color:var(--muc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding-left:12px;border-left:1px solid var(--ke)}
  .crumb:empty{display:none}
  .top-gap{flex:1}
  .me{margin-left:0;flex-wrap:nowrap}
  /* Thanh trái */
  body.has-side .side{display:flex;flex-direction:column;position:fixed;top:var(--top-h);bottom:0;left:0;width:var(--side-w);background:var(--muc);color:var(--kem);z-index:11;overflow:hidden}
  .side-top{display:flex;align-items:center;gap:6px;padding:10px 8px 6px 16px;min-height:46px}
  .side-chain{flex:1;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(247,242,233,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .side-toggle{flex:none;width:32px;height:32px;border-radius:8px;border:1px solid rgba(247,242,233,.18);background:none;color:var(--kem);font-size:16px;font-weight:700;cursor:pointer;line-height:1}
  .side-toggle:hover{background:rgba(247,242,233,.08)}
  .side-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 0 16px;scrollbar-width:thin;scrollbar-color:rgba(247,242,233,.2) transparent}
  .sg{margin-top:6px}
  .sg-h{display:flex;align-items:center;width:100%;border:0;background:none;color:var(--ke);font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:8px 16px 4px;cursor:pointer;text-align:left}
  .sg-h:hover{color:var(--kem)}
  .sg-h .car{margin-left:auto;font-size:11px;transition:transform .15s}
  .sg.shut .sg-h .car{transform:rotate(-90deg)}
  .sg.shut .sg-b{display:none}
  .si{position:relative;display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:rgba(247,242,233,.86);font-size:14.5px;font-weight:500;padding:8px 12px 8px 16px;min-height:40px;cursor:pointer;text-align:left;border-left:3px solid transparent}
  .si:hover{background:rgba(247,242,233,.06);color:var(--kem)}
  .si.on{background:rgba(247,242,233,.1);border-left-color:var(--do);color:var(--kem);font-weight:700}
  .si:focus-visible,.sg-h:focus-visible,.side-toggle:focus-visible,.avatar:focus-visible{outline:2px solid var(--kim);outline-offset:-2px}
  .si .ic{flex:none;width:22px;text-align:center;font-size:17px;line-height:1}
  .si .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .si .sb{flex:none;background:var(--do);color:#fff;border-radius:10px;font-size:11px;font-weight:700;padding:0 7px;line-height:18px}
  .side-div{display:flex;align-items:center;gap:8px;margin:16px 16px 0;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--kim)}
  .side-div::before{content:"";width:14px;height:2px;background:var(--kim);flex:none}
  .side-div::after{content:"";flex:1;height:1px;background:var(--xam)}
  /* Thu gọn: chỉ còn icon (chữ hiện khi rê chuột qua title) */
  body.side-mini .side-top{padding:10px 0 6px;justify-content:center}
  body.side-mini .side-chain,body.side-mini .sg-h,body.side-mini .si .t,body.side-mini .side-div span{display:none}
  body.side-mini .sg{margin-top:2px}
  body.side-mini .si{justify-content:center;padding:8px 0}
  body.side-mini .si .sb{position:absolute;top:4px;right:6px;font-size:10px;padding:0 5px;line-height:15px}
  body.side-mini .side-div{margin:10px 12px 4px}
  body.side-mini .side-div::before{display:none}
  /* Thanh dưới không còn → hạ thanh điểm + thông báo nhỏ */
  .score-bar{bottom:12px}
  .toast{bottom:28px}
  .notif-panel{top:calc(var(--top-h) + 6px)}
}
@media print{.side,.d-only{display:none!important}body.has-side{padding:0!important}}

/* ===== Ảnh đại diện + danh sách Đổi mật khẩu / Đăng xuất (dùng chung máy tính + điện thoại) ===== */
.av-wrap{position:relative}
.avatar{width:38px;height:38px;border-radius:50%;border:2px solid var(--kim);background:var(--muc);color:var(--kem);font-weight:800;font-size:14px;cursor:pointer;padding:0;letter-spacing:.02em}
.avatar:hover,.avatar[aria-expanded="true"]{background:var(--do)}
.me-pop{position:absolute;right:0;top:46px;width:260px;background:var(--giay);border:1px solid var(--ke);border-radius:12px;box-shadow:0 10px 30px rgba(23,20,18,.18);padding:6px 0;z-index:26}
.me-pop .mp-h{padding:8px 14px 10px;border-bottom:1px solid var(--ke);margin-bottom:4px;line-height:1.4}
.me-pop .mp-h b{display:block;font-size:15px;color:var(--muc)}
.me-pop .mp-h span{font-size:13px;color:var(--xam);font-weight:500}
.me-pop button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer;color:var(--muc)}
.me-pop button:hover{background:var(--vang-nhat)}

/* ===== Khung điện thoại kiểu Haraworks (bước 2, < 1024px): thanh dưới theo vai, trang Menu, trang Duyệt. Máy tính không đổi ===== */
@media (max-width:1023px){
  header{flex-wrap:nowrap;padding:8px 16px}
  .brand{min-width:0;flex:1}
  .brand small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .me{margin-left:auto;width:auto;flex-wrap:nowrap;justify-content:flex-end}
  .me .who{display:none}
  .avatar{width:36px;height:36px;font-size:13px}
  .me-pop{width:min(260px,calc(100vw - 32px))}
  nav.tabs button{min-width:0}
}
/* Trang Menu */
.mm-me{display:flex;align-items:center;gap:12px;background:var(--giay);border:1px solid var(--ke);border-radius:12px;padding:12px 14px;margin:10px 0 8px}
.mm-me .avatar{display:inline-flex;align-items:center;justify-content:center;cursor:default;flex:none}
.mm-who{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.mm-who b{font-size:16px}
.mm-who span{font-size:13px;color:var(--xam)}
.mm-acts{margin-bottom:6px}
.mm-g h3{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--xam);margin:18px 0 6px}
.mm-b{background:var(--giay);border:1px solid var(--ke);border-radius:12px;overflow:hidden}
.mm-i{display:flex;align-items:center;gap:12px;width:100%;border:0;border-top:1px solid var(--ke);background:none;padding:10px 14px;min-height:48px;font-size:15px;font-weight:600;text-align:left;cursor:pointer;color:var(--muc)}
.mm-i:first-child{border-top:0}
.mm-i:hover,.mm-i:active{background:var(--vang-nhat)}
.mm-i .ic{width:24px;text-align:center;font-size:18px;flex:none}
.mm-i .t{flex:1;min-width:0}
.mm-i .sb{background:var(--do);color:#fff;border-radius:10px;font-size:12px;font-weight:700;padding:0 7px;line-height:18px}
.mm-i .car{color:var(--xam);font-size:20px;line-height:1}
.mm-div{display:flex;align-items:center;gap:8px;margin:24px 0 0;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--do)}
.mm-div::before{content:"";width:14px;height:2px;background:var(--kim);flex:none}
.mm-div::after{content:"";flex:1;height:1px;background:var(--ke)}
/* Trang Duyệt */
.dy-c{display:flex;align-items:center;gap:12px}
.dy-c .ic{font-size:22px;flex:none}
.dy-c .t{flex:1;min-width:0}
.dy-c.co{border-left:4px solid var(--do)}

/* ===== Báo lỗi A3: form nổi (bug-form.js), khung vẽ (bug-draw.js). Trên cả nút con bọ; khung vẽ trên form ===== */
.bug-form{position:fixed;right:24px;bottom:24px;width:420px;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--giay);border:1px solid var(--ke);border-radius:14px;box-shadow:0 14px 40px rgba(23,20,18,.3);z-index:2147483001;overflow:hidden}
.bf-h{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;background:var(--muc);color:var(--kem);cursor:move;user-select:none;-webkit-user-select:none;touch-action:none;flex:none}
.bf-h.drag{cursor:grabbing}
.bf-h b{font-size:15px}
.bf-gap{flex:1}
.bf-ic{width:34px;height:34px;border-radius:8px;border:1px solid rgba(247,242,233,.25);background:none;color:var(--kem);font-size:18px;line-height:1;cursor:pointer;padding:0}
.bf-ic:hover{background:rgba(247,242,233,.1)}
.bf-b{padding:12px 14px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:8px}
.bf-b label{margin:0}
.bf-req{color:var(--do)}
.bf-l{font-size:14px;font-weight:600;color:var(--xam);margin-top:4px}
.bf-sev{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bf-sev button{min-height:40px;border-radius:8px;border:1px solid var(--ke);background:#fff;font-weight:700;font-size:13.5px;cursor:pointer;padding:4px}
.bf-sev button.on{background:var(--muc);color:#fff;border-color:var(--muc)}
.bf-sev button.sev-nghiem_trong.on,.bf-sev button.sev-cao.on{background:var(--do);border-color:var(--do)}
.bf-sev button[disabled]{opacity:.6;cursor:default}
.bf-shot{border:1px solid var(--ke);border-radius:10px;overflow:hidden;background:var(--kem);max-height:220px;display:flex;justify-content:center}
.bf-shot img{max-width:100%;max-height:220px;object-fit:contain;cursor:crosshair;display:block}
.bf-wait{font-size:14px;color:var(--xam);padding:10px;border:1px dashed var(--ke);border-radius:10px;text-align:center}
.bf-acts{gap:6px;align-items:center}
.bf-paste{display:block;margin-top:2px}
.bf-file{font-size:14px;word-break:break-all}
.bf-tech summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--xam)}
.bf-tech table{font-size:12.5px;margin-top:6px}
.bf-tech th{white-space:nowrap;width:1%}
.bf-tech td{word-break:break-all}
.bf-msg .callout{margin:0}
.bf-f{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid var(--ke);background:var(--giay);flex:none;flex-wrap:wrap}
.bf-ask{font-weight:700;margin-right:auto}
.bug-form-pill{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));z-index:2147483001;background:var(--muc);color:var(--kem);border:2px solid var(--kim);border-radius:24px;padding:10px 18px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 6px 18px rgba(23,20,18,.3);white-space:nowrap}
@media (min-width:1024px){.bug-form-pill{bottom:24px}}
@media (max-width:599px){
  .bug-form{left:8px;right:8px;top:calc(8px + env(safe-area-inset-top));bottom:calc(8px + env(safe-area-inset-bottom));width:auto;max-width:none;max-height:none}
  .bf-h{cursor:default}
  .bf-sev{grid-template-columns:repeat(2,1fr)}
}
.bug-draw{position:fixed;inset:0;z-index:2147483002;background:rgba(23,20,18,.92);display:flex;flex-direction:column;padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
.bd-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bd-bar .seg button{min-height:34px;padding:6px 12px;font-size:14px}
.bd-gap{flex:1}
.bd-hint{color:var(--kem);font-size:13px;margin:6px 2px}
.bd-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.bd-stage canvas{touch-action:none;background:#fff;border-radius:6px;cursor:crosshair}
/* Thanh trái: chừa chỗ dưới cùng cho nút con bọ (mặc định góc dưới trái) */
.side-nav{padding-bottom:72px!important}
@media print{.bug-form,.bug-form-pill,.bug-draw{display:none!important}}

/* ===== Báo lỗi A4: màn Báo lỗi app / Lỗi tôi đã báo (mẫu danh sách 4a + ngăn kéo 4b) ===== */
.bl-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.bl-tabs button{flex:none;white-space:nowrap}
.bl-filter{margin-top:6px}
.bl-filter label{flex:1 1 140px}
.bl-filter .bl-q{flex:2 1 220px}
.bl-active{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--xam);margin:8px 0 0}
.bl-tbl td.bl-so{font-weight:800;color:var(--xam);white-space:nowrap}
.bl-tbl td.bl-t b{color:var(--do-dam)}
.bl-tbl td.bl-at{white-space:nowrap}
.bl-tbl td.bl-clip{white-space:nowrap}
.bl-tbl tr.on td{background:var(--vang-nhat)}
.bl-sev{font-size:13px;font-weight:700;white-space:nowrap}
.bl-sev::before{content:"●";margin-right:4px}
.bl-sev.sev-thap::before{color:var(--xanh)}
.bl-sev.sev-trung_binh::before{color:var(--kim)}
.bl-sev.sev-cao::before{color:var(--do)}
.bl-sev.sev-nghiem_trong{color:var(--do-dam)}
.bl-sev.sev-nghiem_trong::before{color:var(--do-dam)}
.bl-more{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0}
@media (max-width:700px){
  .bl-tbl thead{display:none}
  .bl-tbl,.bl-tbl tbody{display:block;background:none}
  .bl-tbl tr{display:grid;grid-template-columns:52px 1fr auto;gap:2px 10px;background:var(--giay);border:1px solid var(--ke);border-radius:12px;padding:10px 12px;margin:8px 0}
  .bl-tbl td{border:0;padding:0}
  .bl-tbl td.bl-so{grid-row:1}
  .bl-tbl td.bl-t{grid-column:2/4}
  .bl-tbl td:nth-child(n+3){font-size:13px}
}
/* Ngăn kéo chi tiết bên phải (≈ 2/3 màn máy tính, cả màn trên điện thoại). Dưới ảnh phóng to (30) */
.drawer-bg{position:fixed;inset:0;background:rgba(23,20,18,.35);z-index:15}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(720px,66vw);background:var(--kem);z-index:16;display:flex;flex-direction:column;box-shadow:-10px 0 30px rgba(23,20,18,.25)}
.dr-h{display:flex;align-items:center;gap:10px;background:var(--muc);color:var(--kem);padding:12px 12px 12px 16px;flex:none}
.dr-tt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.dr-tt b{font-size:17px;overflow:hidden;text-overflow:ellipsis}
.dr-tt>span{font-size:13px;color:var(--ke)}
.dr-x,.dr-back{width:36px;height:36px;border-radius:8px;border:1px solid rgba(247,242,233,.25);background:none;color:var(--kem);font-size:20px;line-height:1;cursor:pointer;flex:none}
.dr-back{display:none}
.dr-b{flex:1;overflow-y:auto;padding:12px 16px 24px}
.dr-s{background:var(--giay);border:1px solid var(--ke);border-radius:12px;padding:12px 14px;margin:10px 0}
.dr-s h3{margin:0 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--xam)}
.dr-desc{white-space:pre-wrap;word-break:break-word}
.dr-img{max-width:100%;max-height:60vh;border-radius:8px;border:1px solid var(--ke);cursor:zoom-in;display:block}
.dr-vid{width:100%;max-height:60vh;border-radius:8px;background:var(--muc)}
.dr-st{margin-bottom:8px}
.dr-xl .btn{margin-top:8px}
.dr-up{cursor:pointer;margin-top:4px}
@media (max-width:1023px){
  .drawer{width:100%;z-index:16}
  .dr-back{display:inline-block}
  .dr-x{display:none}
}
@media print{.drawer,.drawer-bg{display:none!important}}
.info div span.tag,.info div span.bl-sev{display:inline-block;color:inherit}.info div span.tag.loi{color:var(--do-dam)}.info div span.tag.cho{color:#7a5a00}.info div span.tag.ok{color:var(--xanh)}
.bl-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin-top:8px}
.bl-bar .bl-q{flex:1 1 220px;width:auto;margin:0;padding:9px 11px;border:1px solid var(--ke);border-radius:8px;background:#fff;font-weight:400}
.bl-f{flex:none}
/* Việc 5 (đợt kế): ô lọc "Người tôi quản lý" cạnh ô tìm — co lại, xuống dòng trên điện thoại (không cuộn ngang) */
.bl-bar .ns-cua-toi{flex:0 1 190px;min-width:0;margin:0;font-size:13px}
.bl-bar .ns-cua-toi select{width:100%;max-width:100%;min-height:40px}
.bl-f[open]{flex:1 1 100%}
.bl-f summary{list-style:none;position:relative}
.bl-f summary::-webkit-details-marker{display:none}
.bl-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--do)}
.bl-f .bl-filter{margin-top:8px}
@media (max-width:1023px){body.drawer-open .bug-btn{display:none}}

/* ===== Biểu tượng SVG (đợt 1b V3, web/js/icons.js — thay toàn bộ emoji). Màu theo chữ (currentColor), cỡ theo chữ (1em) ===== */
svg.ic{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.15em;overflow:visible}
.ic > svg.ic{width:1em;height:1em;vertical-align:middle}
span.ic{display:inline-flex;align-items:center;justify-content:center}
.btn svg.ic,.tag svg.ic,.callout svg.ic,.meta svg.ic,.kpi small svg.ic,h3 svg.ic,.onode-h svg.ic{margin-right:2px}
.bug-btn svg.ic{width:24px;height:24px}

/* ===== Đợt 1b V4: màn Nhân sự (danh sách 4a + ngăn kéo hồ sơ 4b), thẻ nhanh, Hồ sơ của tôi. Chỉ dùng token màu ở :root ===== */
.ns-dau{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:flex-start}
.ns-dau>div:first-child{flex:1 1 280px;min-width:0}
.ns-nut{flex:none}
.ns-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ns-tabs button{flex:none;white-space:nowrap}
/* Xem màn hình đợt 1b: máy tính không có thanh cuộn ẩn — tab xuống dòng để thấy đủ (điện thoại vẫn vuốt ngang) */
@media (min-width:1024px){.ns-tabs{flex-wrap:wrap;overflow-x:visible}}
.ns-av{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--vang-nhat);border:1px solid var(--kim);color:var(--do-dam);font-weight:800;font-size:12px;flex:none}
.ns-av.lon{width:44px;height:44px;font-size:15px}
.ns-tbl td.ns-ten .ns-ten-in{display:flex;gap:10px;align-items:center;min-width:0}
.ns-tbl td.ns-ten .ns-ten-in>span:last-child{display:flex;flex-direction:column;min-width:0}
.ns-tbl td.ns-ten b{overflow-wrap:anywhere}
.ns-tbl td.ns-vao,.ns-tbl td.ns-hd{white-space:nowrap}
.ns-tbl tr.on td{background:var(--vang-nhat)}
/* Điện thoại: thẻ 2 dòng (dòng 1 tên + mã + "Đủ x/y", dòng 2 chức danh · nơi làm) */
@media (max-width:700px){
  .ns-tbl tr{grid-template-columns:1fr auto}
  .ns-tbl td.ns-ten{grid-column:1/2}
  .ns-tbl td.ns-du{grid-column:2/3;grid-row:1;align-self:center}
  .ns-tbl td.ns-cd,.ns-tbl td.ns-noi,.ns-tbl td.ns-ql,.ns-tbl td.ns-loai,.ns-tbl td.ns-vao,.ns-tbl td.ns-hd{display:none}
  .ns-tbl td.ns-ten .ns-dong2{display:block}
}
.ns-dong2{display:none;font-size:13px;color:var(--xam)}
/* Vá soát V11 — màn Hợp đồng trên điện thoại: thẻ 2 dòng (dòng 1 tên + nhãn trạng thái / nút, dòng 2 "số HĐ · loại · còn N ngày") */
.hd-dong2{display:none;font-size:13px;color:var(--xam)}
@media (max-width:700px){
  .hd-tbl tr{grid-template-columns:minmax(0,1fr) auto}
  .hd-tbl td.hd-ten{grid-column:1/2;grid-row:1;min-width:0}
  .hd-tbl td.hd-ten b{overflow-wrap:anywhere}
  .hd-tbl td.hd-tt{grid-column:2/3;grid-row:1;align-self:center;text-align:right}
  .hd-tbl td.hd-phu{display:none}
  .hd-tbl td.hd-ten .hd-dong2{display:block}
  .ns-tbl td.ns-ten .ns-dong2 .btn{margin-top:6px}
}
.ns-dr .dr-h{flex-wrap:nowrap}
.ns-dr .dr-h .ns-av{background:var(--kem)}
.ns-lat{font-size:22px}
.ns-lat[disabled]{opacity:.35;cursor:default}
.dr-tabs{margin:0 0 4px;position:sticky;top:-12px;background:var(--kem);padding:6px 0;z-index:1}
.ns-kh{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.ns-kh h3{margin:0 0 8px}
.ns-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;font-size:14px;margin:4px 0 8px}
.ns-luoi>div{min-width:0}
.ns-luoi span{display:block;font-size:12px;color:var(--xam);font-weight:600}
.ns-luoi b{font-weight:600;overflow-wrap:anywhere}
.ns-luoi b.muted{font-weight:400}
.ns-hien{margin-top:4px}
.ns-ds{font-size:14px}
.ns-ls{list-style:none;margin:0;padding:0}
.ns-ls li{padding:6px 0;border-bottom:1px dashed var(--ke);font-size:14px}
.ns-kl{margin:10px 0 0;font-size:13px;color:var(--xam);font-style:italic}
.ns-form{margin:6px 0}
.ns-form>label{flex:1 1 200px}
.ns-luu{margin-top:10px}
.ns-dong{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:8px 0;border-bottom:1px dashed var(--ke)}
.ns-dong>label{flex:1 1 140px}
.ns-dc{flex:1 1 100%}
.ns-the-bg{position:fixed;inset:0;background:rgba(23,20,18,.35);z-index:17;display:flex;align-items:center;justify-content:center;padding:16px}
.ns-the{background:var(--giay);border:1px solid var(--ke);border-radius:14px;padding:16px;width:min(420px,100%);box-shadow:0 10px 30px rgba(23,20,18,.25)}
.ns-the-h{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.ns-the-h>div{flex:1;min-width:0}
.ns-the .ns-luoi{grid-template-columns:1fr 1fr}
.ns-du-tag{flex:none}
/* Xem màn hình đợt 1b: điện thoại — nhãn "Hồ sơ đã đủ" xuống dòng dưới tên, không bóp cột tên */
@media (max-width:600px){.ns-the-h{flex-wrap:wrap}.ns-the-h>div{flex-basis:calc(100% - 76px)}.ns-the-h .ns-du-tag{margin-left:auto}}
.callout.click{cursor:pointer}
.callout.ok{background:var(--xanh-nhat);border-left-color:var(--xanh)}
.ns-du-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ns-du-vach{flex:1 1 120px;height:8px;border-radius:8px;background:var(--ke);overflow:hidden;display:inline-block}
.ns-du-vach span{display:block;height:100%;background:var(--kim)}
.ht-muc{background:var(--giay);border:1px solid var(--ke);border-radius:12px;margin:8px 0;padding:0 14px}
.ht-muc summary{cursor:pointer;padding:12px 0;display:flex;justify-content:space-between;align-items:center;gap:8px;list-style:none;min-height:44px}
.ht-muc summary::-webkit-details-marker{display:none}
.ht-muc .dr-s{border:0;padding:0 0 8px;margin:0;background:none}
@media (max-width:700px){.ns-luoi{grid-template-columns:1fr}}
.ns-luoi b span.tag{display:inline-block;font-size:12px;color:inherit}
@media (max-width:1023px){.ns-dr .dr-h .ns-lat{display:inline-block;width:32px;flex:none}.ns-dr .dr-h{gap:6px;padding-left:10px}}
/* Đợt 1b V7 — Duyệt công lưới tuần (cong-tuan.js), Lịch tháng của tôi (toi.js), khối ngưỡng tự duyệt (setup.js). Chỉ dùng token màu. */
.lnk{background:none;border:0;padding:0;font-weight:700;color:var(--muc);text-decoration:underline;text-decoration-color:var(--kim);cursor:pointer;text-align:left}
.ct-luoi td,.ct-luoi th{min-width:96px;font-size:13px}
.ct-luoi td:first-child,.ct-luoi th:first-child{min-width:150px}
.ct-luoi td:nth-child(2),.ct-luoi th:nth-child(2){min-width:80px}
.ct-hn{background:var(--vang-nhat)!important}
.ct-d{border-left:4px solid var(--ke);padding:2px 0 2px 6px;margin:4px 0}
.ct-d .chk{margin-right:0}
.ct-p{border-left-color:var(--kim);border-left-style:dashed}
.mau-xanh{border-left-color:var(--xanh)}.mau-kim{border-left-color:var(--kim)}.mau-do{border-left-color:var(--do)}
.mau-xam{border-left-color:var(--xam)}.mau-muc{border-left-color:var(--muc)}.mau-xanh-nhat{border-left-color:var(--xanh-nhat)}
.ct-them{margin-top:4px;min-width:44px;font-size:18px}
.ct-the .ct-d{margin-top:8px}
.ct-ngay button{min-width:56px}
.ct-day{display:none;gap:8px;align-items:center;flex-wrap:wrap;position:sticky;bottom:0;background:var(--giay);border-top:2px solid var(--kim);padding:10px 0;margin-top:10px;z-index:4}
.ct-day.co{display:flex}
.ct-dk{display:flex;margin:8px 0}
@media (max-width:1023px){.ct-day{position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom));padding:10px 16px}.ct-day .btn{flex:1}}
.st-tre-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:700px){.st-tre-2{grid-template-columns:1fr}}
.lt-luoi{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:8px 0}
.lt-th{font-size:12px;font-weight:700;color:var(--xam);text-align:center}
.lt-o{background:var(--giay);border:1px solid var(--ke);border-radius:8px;min-height:74px;padding:4px 6px;font-size:12px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px;color:var(--muc);font:inherit;font-size:12px;line-height:1.3}
.lt-o.trong{visibility:hidden}
.lt-o.on{outline:2px solid var(--do)}
.lt-o.hn .lt-so{background:var(--muc);color:var(--kem);border-radius:10px;padding:0 6px}
.lt-so{font-weight:800;align-self:flex-start}
.lt-cham{width:10px;height:10px;border-radius:50%;display:inline-block;border:1px solid var(--ke);flex:none}
.lt-cham.m-xanh{background:var(--xanh)}.lt-cham.m-kim{background:var(--kim)}.lt-cham.m-do{background:var(--do)}.lt-cham.m-xam{background:var(--xam)}
.lt-cham.m-xanh-nhat{background:var(--xanh-nhat)}.lt-cham.m-vang-nhat{background:var(--vang-nhat)}.lt-cham.m-muc{background:var(--muc)}
.lt-cham.m-ke{background:var(--ke)}.lt-cham.m-kem{background:var(--kem)}
.lt-ct{display:block}
.lt-o.cho-phep{border:2px dashed var(--kim)}   /* đợt 1b V10: ngày có đơn nghỉ đang chờ duyệt */
@media (max-width:700px){.lt-o{min-height:52px;padding:4px}.lt-ct{display:none}}
.lt-gd summary{cursor:pointer;font-weight:700;min-height:36px;display:flex;align-items:center}
.lt-gd div{display:flex;align-items:center;gap:8px;margin:4px 0}
@media (max-width:1023px){body:has(.ct-day.co) main{padding-bottom:150px}}
/* đợt 1b V12: đề nghị sửa hồ sơ — băng vàng từng nhóm (Hồ sơ của tôi), tab Chờ duyệt sửa: bảng (máy tính) / thẻ "Mục — cũ → mới" (điện thoại) */
.ht-vang{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.ht-khai{flex-wrap:wrap;gap:6px;margin:8px 0}.ht-khai .btn.on{background:var(--vang-nhat);border-color:var(--kim)}
.ht-cho{margin:4px 0;color:var(--do-dam)}
.ht-form input[type=file]{max-width:100%}
.ns-dn-nut{gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0}
.ns-dn-the{display:none}.ns-dn-the .card{margin:8px 0}.ns-dn-the .meta{overflow-wrap:anywhere}
.ns-dn-ss td{overflow-wrap:anywhere}.ns-dn-ss td:first-child{white-space:nowrap}
@media (max-width:700px){.ns-dn-bang{display:none}.ns-dn-the{display:block}.ns-dn-ss td:first-child{white-space:normal}}
.ns-mk{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.1em;word-break:break-all;user-select:all}
/* Sơ đồ V6 — Bộ bậc thưởng dịch vụ (setup-bac-thuong.js) */
.bt-ds{display:flex;flex-direction:column;gap:6px}
.bt-bo{display:flex;flex-wrap:wrap;gap:6px;align-items:center;text-align:left;border:1px solid var(--ke);background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer;min-height:44px}
.bt-bo.on{border-color:var(--muc);box-shadow:0 0 0 1px var(--muc)}
.bt-bo .meta{flex-basis:100%}
.bt-bang{width:100%;border-collapse:collapse;margin:6px 0}
.bt-bang th,.bt-bang td{border-bottom:1px solid var(--ke);padding:6px;text-align:left;vertical-align:middle}
.bt-bang input{width:100%;min-width:60px}
.bt-cancu{border:1px solid var(--ke);border-radius:10px;padding:6px 12px;margin:0;min-width:0}
.bt-ch{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.bt-ch .meta{display:block;margin-left:24px}
.bt-bang td:first-child input{min-width:110px}
/* Sơ đồ V7 — Dựng từ mẫu (views/dung-mau.js) */
.dm-mau{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.dm-the{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--giay);border:2px solid var(--ke);border-radius:10px;padding:10px 12px;font:inherit;color:inherit;cursor:pointer;min-width:0}
.dm-the.on{border-color:var(--do);background:var(--vang-nhat)}
.dm-cay{max-height:70vh;overflow:auto;border:1px solid var(--ke);border-radius:10px;padding:6px 8px;background:var(--giay)}
.dm-dong{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:3px 0 3px calc(var(--sau,0) * 18px);border-bottom:1px dashed var(--ke);min-width:0}
.dm-dong .chk{margin:0;min-width:0;display:inline-flex;align-items:center;gap:6px}
.dm-dong .dm-ten{overflow-wrap:anywhere}
.dm-dong select.mini{max-width:100%;min-width:0}
.dm-vt{font-size:14px}
.dm-loi{margin:6px 0;padding-left:20px;font-size:14px}
@media (max-width:600px){.dm-dong{padding-left:calc(var(--sau,0) * 8px)}.dm-dong select.mini{flex:1 1 100%}}

/* Việc 4 — Bảng duyệt phiếu */
.pd-thanh{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:12px 0 6px}
.pd-thanh .chk{display:flex;align-items:center;gap:6px;min-height:40px}
.pd-cuon{overflow-x:auto}
.pd-bang{width:100%;border-collapse:collapse;background:var(--giay);font-size:14px}
.pd-bang th{text-align:left;font-size:13px;color:var(--xam);font-weight:600;padding:8px 6px;border-bottom:1px solid var(--ke)}
.pd-bang td{padding:8px 6px;border-bottom:1px solid var(--ke);vertical-align:top}
.pd-bang td.pd-tich input{width:22px;height:22px}
.pd-bang .pd-chua{display:flex;align-items:center;justify-content:center;width:96px;height:96px;border:1px dashed var(--ke);border-radius:8px;color:var(--xam);font-size:13px;text-align:center}
.pd-anh-o{position:relative;display:inline-block}
.pd-anh-o img{width:96px;height:96px;object-fit:cover;border-radius:8px;border:1px solid var(--ke);cursor:zoom-in;display:block}
.pd-anh-o .pd-them{position:absolute;right:4px;bottom:4px;background:var(--muc);color:var(--kem);border-radius:6px;padding:0 6px;font-size:12px}
.pd-nut{white-space:nowrap}
.pd-nut .btn{min-height:40px;margin:2px 4px 2px 0}
.pd-loi{color:var(--do-dam);font-size:13px;margin-top:4px}
.pd-tc td{background:var(--vang-nhat)}
.pd-tc textarea{width:100%;min-height:64px;font:inherit;padding:8px;border:1px solid var(--ke);border-radius:8px}
.pd-tc .row{margin-top:6px}
.pd-xn{background:var(--vang-nhat);border:1px solid var(--ke);border-radius:10px;padding:10px;margin-top:8px}
.pd-phong{position:fixed;inset:0;background:rgba(23,20,18,.88);z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px}
.pd-phong img{max-width:100%;max-height:78vh;border-radius:8px}
.pd-phong .pd-nhan{color:var(--kem);font-size:14px}
.pd-phong .pd-di{display:flex;gap:12px}
.pd-phong button{min-width:48px;min-height:44px;font-size:22px;border-radius:10px;border:0;background:var(--kem);color:var(--muc)}
@media (max-width:767px){.pd-cuon{overflow-x:visible}.pd-bang,.pd-bang tbody{display:block;background:none}.pd-bang tr.pd-dau{display:none}.pd-bang tr.pd-dong{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;border:1px solid var(--ke);border-radius:10px;margin:10px 0 0;padding:8px 10px;background:var(--giay)}.pd-bang td{display:block;grid-column:1/-1;border:0;padding:3px 0;min-width:0;overflow-wrap:anywhere}.pd-bang td[data-nhan]::before{content:attr(data-nhan);display:block;font-size:12px;color:var(--xam);font-weight:600}.pd-bang td.pd-anh{grid-column:auto}.pd-anh-o,.pd-anh-o img,.pd-bang .pd-chua{width:100%}.pd-anh-o img,.pd-bang .pd-chua{height:auto;aspect-ratio:1/1}.pd-nut{white-space:normal;display:flex!important;gap:8px}.pd-nut .btn{flex:1;margin:0}.pd-bang tr.pd-tc{display:block;margin:0 0 4px}.pd-bang tr.pd-tc td{display:block;border:1px solid var(--ke);border-top:0;border-radius:0 0 10px 10px;padding:8px 10px}}
/* Việc 1 — Ô Hôm nay (Trang chủ quản lý): Đi trễ tô vàng kim, KHÔNG đỏ; danh sách trong ngăn kéo; nút cao ≥ 40px, không cuộn ngang 375px */
.hn-dau{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.hn-dau h2{margin:0}
.hn-dau .btn{min-height:40px}
.kpi.kim{border-left:4px solid var(--kim)}.kpi.kim b{color:var(--kim)}
.hn-dong{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--ke);padding:8px 0}
.hn-dong .lnk{min-height:40px;text-align:left}
.hn-dong .btn{min-height:40px}
.hn-tre{color:var(--kim);font-weight:700}
/* Việc 2 — Ngăn kéo chi tiết buổi công (views/cong-buoi.js): máy tính bên phải như .drawer; điện thoại trượt từ dưới lên, ô nhập co theo màn */
.cb-buoi .dr-s .row{flex-wrap:wrap}
.cb-buoi label{flex:1 1 140px;min-width:0}
.cb-buoi input{width:100%;max-width:100%;min-width:0;box-sizing:border-box;min-height:40px}
.cb-buoi #cbNut .btn{min-height:40px}
.ct-buoi{min-height:32px}
@media (max-width:600px){.drawer.cb-buoi{top:auto;bottom:0;height:auto;max-height:92vh;border-radius:16px 16px 0 0}}
/* Việc 3 — Lưới công nhiều cửa hàng (views/cong-tuan.js): ô chọn, ô tìm, công tắc, tiêu đề nhóm gập / mở, xác nhận từ chối trên thanh */
.ct-chon{flex:1 1 220px;max-width:340px;min-width:0}
.ct-chon select{width:100%;min-height:40px}
.ct-loc{align-items:flex-end;gap:10px;flex-wrap:wrap}
.ct-tim{flex:1 1 200px;max-width:340px;min-width:0}
.ct-tim input{width:100%;max-width:100%;min-width:0;box-sizing:border-box;min-height:40px}
.ct-cong-tac{min-height:40px}
.ct-nhom{margin-top:12px}
.ct-nhom-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;min-height:40px;padding:8px 10px;border:0;border-left:4px solid var(--kim);background:var(--kem);color:var(--muc);text-align:left;font-size:15px;cursor:pointer;border-radius:6px}
.ct-nhom-h .meta{font-weight:400}
.ct-hoi{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%}
.ct-hoi .btn{min-height:40px}
.ct-ngay-wrap{margin-top:8px}
/* Việc 6 — cột Hiện tại → Đề nghị (thẻ 10): ngắt chữ dài, không cuộn ngang trên điện thoại */
.ns-dn-cot{overflow-wrap:anywhere;min-width:0}.ns-dn-cot>div{line-height:1.4}.ns-dn-bang td.ns-dn-cot{max-width:340px}
/* Đợt kế Việc 8: nghỉ không lương mà còn phép năm — khung gợi ý vàng kim (callout mặc định) + nút đổi loại; nhãn trên thẻ duyệt */
.ph-goiy{overflow-wrap:anywhere}
.ph-goiy .btn{min-height:40px}
.ph-goiy-tag{margin:4px 0}
/* Việc 7 — Nhật ký thay đổi */
.nk-loc{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin:8px 0}
.nk-loc label{flex:1 1 150px;min-width:0;max-width:100%}
.nk-loc .nk-tim{flex:2 1 220px}
.nk-loc select,.nk-loc input{width:100%;max-width:100%;min-width:0;box-sizing:border-box;min-height:40px}
.nk-loc input[type=search]{padding:9px 11px;border:1px solid var(--ke);border-radius:8px;background:var(--giay);margin-top:4px;font-weight:400;color:var(--muc)}
.nk-nut{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.nk-nut .btn{min-height:40px}
/* bảng 7 cột: giữ bề rộng tối thiểu → điện thoại cuộn NGANG TRONG khung .tbl-wrap, trang không cuộn ngang */
.nk-bang table{min-width:48rem}
.nk-bang td{vertical-align:top;overflow-wrap:break-word;font-size:14px;max-width:260px}
.nk-bang td>div{line-height:1.4}
.nk-bang .nk-luc{white-space:nowrap}
/* Việc 1 — Định biên nhân sự (views/dinhbien.js): mỗi nơi một thẻ, chức danh xếp dọc; thiếu đỏ, dư vàng kim; điện thoại không cuộn ngang */
.db-dau{justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px}
.db-nut{flex-wrap:wrap;gap:8px}.db-nut .btn{min-height:40px}
.db-hoi{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.db-hoi .btn{min-height:40px}
.db-loc{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin:8px 0}
.db-loc label{flex:1 1 150px;min-width:0;max-width:100%}
.db-loc select{width:100%;max-width:100%;min-width:0;box-sizing:border-box;min-height:40px}
.db-the-ds{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));margin-top:8px}
.db-the{padding:10px 12px;min-width:0}
.db-noi{display:block;margin-bottom:4px;overflow-wrap:anywhere}
.db-dong{border-top:1px solid var(--ke);padding:8px 0}
.db-dong-dau{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.db-dong-dau .btn{min-height:40px;margin-left:auto}
.db-jt{font-weight:700;overflow-wrap:anywhere}
.db-kq.do{background:var(--do-nhat);color:var(--do-dam);border-color:var(--do)}
.db-kq.kim{background:var(--vang-nhat);color:var(--muc);border-color:var(--kim)}
.db-so-hang{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:14px;color:var(--xam);margin-top:4px}
.db-so-hang b,.db-so{color:var(--muc);font-weight:700}
button.db-so{min-height:40px;min-width:40px;padding:0 6px}
.db-nguoi{padding:8px 0;border-bottom:1px solid var(--ke)}
.db-nk label{display:block;margin:8px 0}
.db-nk input,.db-nk select{width:100%;max-width:100%;min-width:0;box-sizing:border-box;min-height:40px}
.db-so-hang>span{display:inline-flex;align-items:center;gap:4px}
/* Việc 2 — Phiếu xin tuyển (views/tuyen.js): danh sách thẻ, ngăn kéo có dải bước duyệt, form 3 khối gập; điện thoại không cuộn ngang, nút ≥ 40px */
.yct-dau{justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px}.yct-dau .btn{min-height:40px}
.yct-ds{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));margin-top:8px}
.yct-dong{padding:10px 12px;min-width:0;overflow-wrap:anywhere}
.yct-dong-dau{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:4px}
.yct-buoc{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.yct-buoc li{flex:1 1 120px;min-width:0;border:1px solid var(--ke);border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.yct-buoc li.ok{background:var(--xanh-nhat);border-color:var(--xanh)}
.yct-buoc li.cho{background:var(--vang-nhat);border-color:var(--kim)}
.yct-buoc li.loi{background:var(--do-nhat);border-color:var(--do)}
.yct-buoc li.sau{border-style:dashed;color:var(--xam)}
.yct-tag{flex-wrap:wrap;gap:6px;margin:6px 0}
.yct-ngoai{font-weight:700;border-color:var(--do)}
.yct-o{padding:6px 0;border-bottom:1px solid var(--ke)}.yct-o>div{white-space:pre-wrap;overflow-wrap:anywhere}
.yct-hanh,.yct-ly{margin-top:12px}.yct-hanh label,.yct-ly label{display:block;margin:6px 0}
.yct-nk select,.yct-nk input,.yct-nk textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box;min-height:40px}
.yct-nk .btn{min-height:40px}
.yct-nk .row{flex-wrap:wrap;gap:8px}
.yct-phu,.yct-gui{margin-top:12px}
.yct-hoi{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.yct-khoi{border:1px solid var(--ke);border-radius:8px;padding:6px 10px;margin:8px 0}
.yct-khoi summary{min-height:40px;display:flex;align-items:center;cursor:pointer}
.yct-khoi label{display:block;margin:8px 0}
.yct-nguon{border:0;padding:0;margin:8px 0}.yct-nguon .chk{display:flex;align-items:center;gap:8px;min-height:40px}
.yct-nguon input[type=checkbox]{width:20px;min-height:20px}
.yct-tach{margin:8px 0}
/* Việc 3 — Đợt tuyển (views/tuyendot.js): thẻ có thanh "Đã nhận x/y", ngăn kéo vòng; điện thoại không cuộn ngang, nút ≥ 40px */
.dot-dau{justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px}
.dot-ds{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));margin-top:8px}
.dot-the{padding:10px 12px;min-width:0;overflow-wrap:anywhere}
.dot-the-dau,.dot-vong-dau{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:4px}
.dot-thanh{height:8px;border-radius:4px;background:var(--ke);overflow:hidden;margin:6px 0 2px}
.dot-thanh>span{display:block;height:100%;background:var(--xanh)}
.dot-h{margin:14px 0 6px;font-size:15px}
.dot-vong{margin:0;padding-left:20px}.dot-vong li{padding:6px 0;border-bottom:1px solid var(--ke);overflow-wrap:anywhere}
.dot-nk label{display:block;margin:8px 0}
.dot-nk input,.dot-nk select,.dot-nk textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box;min-height:40px}
.dot-nk .btn{min-height:40px}.dot-nk .row{flex-wrap:wrap;gap:8px}
.dot-vong-sua{padding:8px 10px;margin:8px 0}
.dot-nguoi{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.dot-nguoi .tag{display:inline-flex;align-items:center;gap:4px}
.dot-bo{min-width:40px;min-height:40px;border:0;background:none;cursor:pointer;font-size:18px;line-height:1;color:inherit}
.dot-tu-phieu{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}.dot-tu-phieu .btn{min-height:40px}

.tag.kim{background:var(--vang-nhat);color:var(--muc);border-color:var(--kim)}
/* Việc 4 — Ứng viên (views/tuyenuv.js): phễu thẻ — máy tính các cột nằm ngang (cuộn ngang TRONG khung phễu), điện thoại xếp dọc; nút ≥ 40px */
.uv-nut{flex-wrap:wrap;gap:8px}.uv-nut .btn{min-height:40px}
.uv-pheu{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:10px;overflow-x:auto;margin-top:10px;padding-bottom:6px}
.uv-cot{background:var(--kem);border:1px solid var(--ke);border-radius:8px;padding:8px;min-width:0}
.uv-cot-dau{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}
.uv-the{padding:8px 10px;margin:6px 0;min-width:0;overflow-wrap:anywhere;cursor:pointer}
.uv-the .btn{min-height:40px;margin-top:6px;width:100%}
.uv-trong{margin:4px 0}
.uv-tim{display:block;max-width:420px;margin:8px 0}.uv-tim input{width:100%;box-sizing:border-box;min-height:40px}
.uv-kho{padding:10px 12px;min-width:0;overflow-wrap:anywhere}
.uv-buoc{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.uv-buoc .btn{min-height:40px}
.uv-dong-y{display:flex !important;align-items:flex-start;gap:8px}.uv-dong-y input{width:auto !important;min-height:24px;margin-top:2px}
.uv-luong{flex-wrap:nowrap;gap:8px}.uv-luong label{flex:1 1 0;min-width:0}
.uv-loi{margin:8px 0;padding-left:20px;overflow-wrap:anywhere}
@media (max-width:767px){.uv-pheu{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible}}

/* Việc 5 — Phỏng vấn của tôi + phiếu chấm (Tuyển dụng T5). Điện thoại là chính: nút tròn ≥ 44px, không cuộn ngang. */
.pv-the { display: grid; gap: 4px; }
.pv-tc { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--ke); }
.pv-hang { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-nut { min-width: 44px; min-height: 44px; border-radius: 50%; border: 1px solid var(--ke); background: var(--giay); color: var(--muc);
  font: inherit; font-weight: 600; cursor: pointer; padding: 0 4px; }
.pv-nut.on { background: var(--do); border-color: var(--do); color: var(--kem); }
.pv-nut:focus-visible { outline: 2px solid var(--do); outline-offset: 2px; }
.pv-dn { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.pv-dn .btn { min-height: 40px; }
.pv-dn .btn.on { background: var(--do); border-color: var(--do); color: var(--kem); }
.pv-gio { gap: 8px; flex-wrap: wrap; }
.pv-gio label { flex: 1 1 120px; min-width: 0; }
.pv-cau { margin: 10px 0; }
.pv-cau summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.pv-cau ul { margin: 4px 0 8px; padding-left: 20px; }
.pv-phieu { display: grid; gap: 4px; margin: 6px 0; }
.pv-vong { display: grid; gap: 6px; margin: 8px 0; }
.pv-lich { border-left: 3px solid var(--ke); padding-left: 8px; display: grid; gap: 2px; }
.pv-nguoi { border: 0; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.pv-nguoi label { min-height: 40px; display: flex; align-items: center; gap: 8px; }
.pv-thang { gap: 8px; align-items: flex-end; flex-wrap: wrap; }

/* Việc 6 — Tuyển dụng: offer + chuyển sang nhận việc */
.of-the { display: grid; gap: 4px; margin: 8px 0; }
.of-the .callout { margin: 4px 0 0; }
.of-con-lai { display: grid; gap: 8px; }
.of-con-lai .btn, .of-cho .btn, .of-the + .uv-nut .btn { min-height: 40px; }
.of-cho { display: grid; gap: 4px; }
.uv-the .tag { margin-top: 4px; max-width: 100%; white-space: normal; }

/* Việc 7 — Tuyển dụng: mẫu thư (ngăn kéo ứng viên + Cài đặt › Mẫu thư) + báo cáo tuyển dụng. Điện thoại không cuộn ngang trang, nút ≥ 40px */
.mt-xem { display: grid; gap: 8px; margin: 8px 0; }
.mt-than { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.mt-noi { width: 100%; min-height: 220px; font-size: 14px; }
.mt-bien { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.mt-bien .btn { min-height: 40px; font-size: 13px; }
.thu-mau { flex-wrap: wrap; }
.thu-mau button { min-height: 40px; }
.thu-nut { flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.thu-nut .btn, .thu-nut select { min-height: 40px; }
.thu-da-gui { display: grid; gap: 2px; margin: 6px 0; }
.bc-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 8px 0; }
.bc-o { display: grid; gap: 2px; }
.bc-o b { font-size: 22px; }
.bc-loc { flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.bc-loc label { min-width: 140px; flex: 1 1 140px; }
.bc-loc select, .bc-loc input { min-height: 40px; width: 100%; }
.bc-bang { max-width: 100%; }
.bc-bang td, .bc-bang th { padding: 6px 8px; vertical-align: top; }
.bc-bang td.num, .bc-bang th.num { text-align: right; white-space: nowrap; }

/* Tuyển dụng Việc 8b — Thử việc (views/thuviec.js): thẻ danh sách, bảng chấm 3 cột (máy tính: hàng 4 cột; điện thoại: mỗi dòng một thẻ) */
.tv-the { display: grid; gap: 2px; }
.tv-gap { color: var(--do); font-weight: 700; }
.tv-nhac { margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: var(--vang-nhat); font-size: 14px; font-weight: 600; }
.tv-bang { display: grid; gap: 6px; margin: 4px 0 8px; }
.tv-dong { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(84px, 1fr)); gap: 8px; align-items: center;
  background: var(--giay); border: 1px solid var(--ke); border-radius: 10px; padding: 8px 10px; }
.tv-dau { background: none; border: 0; padding: 0 10px; font-size: 13px; font-weight: 700; color: var(--xam); }
.tv-tong { background: var(--vang-nhat); }
.tv-nd { min-width: 0; overflow-wrap: anywhere; }
.tv-o { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tv-o input { width: 100%; min-height: 44px; margin: 0; }
.tv-nhan { display: none; font-size: 13px; color: var(--xam); font-weight: 600; }
.tv-muc { display: grid; gap: 6px; margin: 6px 0; }
.tv-muc input { width: 100%; }
.tv-muc-so { gap: 8px; flex-wrap: wrap; }
.tv-muc-so label { flex: 1 1 120px; min-width: 0; }
.tv-p2 { justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ke); flex-wrap: nowrap; }
.tv-p2 span { min-width: 0; overflow-wrap: anywhere; }
.tv-p2 input { width: 84px; flex: none; min-height: 44px; margin: 0; }
@media (max-width: 700px) {
  .tv-dau { display: none; }
  .tv-dong { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tv-nd { grid-column: 1 / -1; }
  .tv-nhan { display: block; }
}

/* Tuyển dụng 2 · Việc 2 — Tin đăng tuyển (ngăn kéo Đợt tuyển, views/tuyendot.js): 7 khối sửa được, ô lương công bố, khung chữ để chép,
   ô "Đã đăng ở…". Điện thoại 375px: mọi ô co theo màn, nút xuống dòng — không cuộn ngang. */
.tin-nk label { display: block; margin: 8px 0; }
.tin-nk input, .tin-nk select, .tin-nk textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; min-height: 40px; }
.tin-nk textarea { font: inherit; line-height: 1.45; }
.tin-luong { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.tin-luong label { flex: 1 1 220px; min-width: 0; margin: 0; }
.tin-luong .btn { min-height: 40px; }
.tin-nhac { white-space: normal; overflow-wrap: anywhere; }
.tin-qua { color: var(--do); font-weight: 700; }
.tin-chep-nut { flex-wrap: wrap; gap: 8px; }
.tin-chep { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--giay); border: 1px solid var(--ke); border-radius: 8px; padding: 8px 10px; }
.tin-dang-o { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 8px 0; padding: 8px 10px; border: 1px solid var(--ke); border-radius: 10px; background: var(--giay); }
.tin-dang-o label { flex: 1 1 200px; min-width: 0; margin: 0; }
.tin-dang-o .row { flex: 1 1 100%; gap: 8px; flex-wrap: wrap; }
.tin-dang-ds { margin: 8px 0; padding-left: 18px; }
.tin-dang-ds li { overflow-wrap: anywhere; margin: 2px 0; }
.tin-dau { overflow-wrap: anywhere; }

/* Tuyển dụng 2 · Việc 3 — Chờ báo kết quả (phễu Ứng viên, views/tuyenuv.js): nút lọc có số, nhãn "Chưa báo · N ngày" trên thẻ (quá hạn:
   viền + nền vàng kim + CHỮ "quá hạn"), dòng "Đã gọi điện báo" trong ngăn kéo. Điện thoại 375px: nhãn xuống dòng, nút co theo màn. */
.bao-loc { flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.bao-loc .btn.on { background: var(--muc); color: var(--kem); border-color: var(--muc); }
.tag.bao-kq { display: inline-block; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; background: var(--giay); color: var(--xam); border-color: var(--ke); }
.tag.bao-kq.bao-qua { background: var(--vang-nhat); color: var(--muc); border-color: var(--kim); font-weight: 700; }
.bao-qua-chu { color: var(--muc); font-weight: 700; }
.bao-goi { flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 8px 0; padding: 8px 10px;
  border: 1px solid var(--kim); border-radius: 10px; background: var(--vang-nhat); }
.bao-goi span { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.bao-goi .btn { min-height: 40px; }

/* Tuyển dụng 2 · Việc 4 — Bảng hiệu suất tuyển dụng (Báo cáo tuyển dụng › tab Hiệu suất, views/tuyenbc.js): 4 ô số đầu màn, chọn nhóm, bảng nhiều
   cột cuộn NGANG TRONG khung .hs-bang (trang không cuộn ngang ở 375px), ô chặng 2 dòng (con số giữa + trung bình · số mẫu), ghi chú có CHỮ
   (quá hạn đỏ, ít dữ liệu xám không tô màu), ngăn kéo dòng thời gian của đợt. */
.hs-so .bc-o b { font-size: 20px; overflow-wrap: anywhere; }
.hs-so .bc-o.hs-o-qua { border-color: var(--kim); background: var(--vang-nhat); }
.hs-nhom { margin-top: 10px; }
.hs-chu-thich { white-space: normal; overflow-wrap: anywhere; margin: 4px 0 8px; }
.hs-bang { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hs-bang table { min-width: 72rem; border-collapse: collapse; }
.hs-bang td, .hs-bang th { padding: 6px 8px; vertical-align: top; border-bottom: 1px solid var(--ke); }
.hs-bang th { font-size: 13px; color: var(--xam); text-align: left; }
.hs-bang td.num, .hs-bang th.num { text-align: right; white-space: nowrap; }
.hs-bang tr.click { cursor: pointer; }
.hs-bang tr.click:hover td { background: var(--giay); }
.hs-ch b { display: block; white-space: nowrap; }
.hs-ch .meta { display: block; white-space: nowrap; font-size: 12px; }
.hs-ch.hs-it b { color: var(--xam); font-weight: 600; }
.hs-co { min-width: 10rem; }
.hs-co .tag { display: inline-block; margin: 2px 0; white-space: normal; }
.tag.hs-qua { background: var(--do-nhat); color: var(--do-dam); border-color: var(--do); font-weight: 700; }
.tag.hs-it { background: var(--giay); color: var(--xam); border-color: var(--ke); }
.tag.hs-nhe { background: var(--vang-nhat); color: var(--muc); border-color: var(--kim); }
.hs-tg { margin: 8px 0; padding-left: 20px; }
.hs-tg li { margin: 8px 0; overflow-wrap: anywhere; }
.hs-tg li .meta { display: block; }
.hs-mo { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 700; color: var(--do-dam); text-decoration: underline; cursor: pointer; text-align: left; min-height: 32px; }
.hs-mo:focus-visible { outline: 2px solid var(--kim); outline-offset: 2px; border-radius: 4px; }

/* Tuyển dụng 2 · Việc 5 — Link nộp hồ sơ công khai (web/ung-tuyen.html — trang riêng, không menu app) + khối link / mã QR ở ngăn kéo Đợt tuyển +
   hộp "Hồ sơ mới qua link" ở phễu Ứng viên. Điện thoại 375px: khung ≤ 100%, ô / nút ≥ 44px, không cuộn ngang, chữ dài tự xuống dòng. */
body.ut-trang { padding: 0 0 32px; overflow-x: hidden; }
.ut-trang main { max-width: 560px; margin: 0 auto; padding: 16px; }
.ut-trang .ut-the { background: var(--giay); border: 1px solid var(--ke); border-top: 4px solid var(--do); border-radius: 12px; padding: 16px; overflow-wrap: anywhere; }
.ut-trang h1 { font-size: 20px; margin: 4px 0; color: var(--muc); }
.ut-trang .ut-chuoi { margin: 0; font-weight: 700; color: var(--do); font-size: 14px; }
.ut-trang .ut-noi, .ut-trang .ut-meta { margin: 0 0 8px; color: var(--xam); font-size: 14px; }
.ut-trang form label { margin: 12px 0 0; }
.ut-trang input, .ut-trang textarea, .ut-trang select { min-height: 44px; font-size: 16px; }
.ut-trang input:not([type=radio]):not([type=checkbox]):not([type=file]), .ut-trang textarea { display: block; width: 100%; max-width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--ke); border-radius: 8px; background: var(--giay); margin-top: 4px; font-weight: 400; color: var(--muc); }
.ut-trang input[type=file] { display: block; max-width: 100%; margin-top: 4px; font-size: 14px; }
.ut-trang input[type=radio], .ut-trang input[type=checkbox] { min-height: 0; width: 22px; height: 22px; flex: 0 0 auto; margin: 2px 0 0; }
.ut-trang fieldset { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ut-trang legend { font-size: 14px; font-weight: 600; color: var(--xam); width: 100%; padding: 0; }
.ut-trang .ut-chon { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; color: var(--muc); font-weight: 500; }
.ut-trang .ut-dong-y { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--muc); font-size: 14px; line-height: 1.5; margin-top: 16px; }
.ut-trang .ut-bay { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ut-trang .ut-loi { display: block; color: var(--do-dam); font-size: 14px; font-weight: 600; margin-top: 4px; }
.ut-trang .ut-loi-chung { background: var(--do-nhat); border-left: 4px solid var(--do); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.ut-trang .cf-turnstile { margin: 16px 0 4px; min-height: 65px; max-width: 100%; overflow: hidden; }
.ut-trang button, .ut-trang .btn { min-height: 44px; width: 100%; margin-top: 12px; font-size: 16px; }
.ut-trang .ut-cho { text-align: center; color: var(--xam); margin-top: 40px; }
.ut-trang .ut-xong { border-top-color: var(--xanh); text-align: center; }
.dot-link { border: 1px solid var(--ke); border-radius: 10px; padding: 10px 12px; margin: 12px 0; background: var(--giay); overflow-wrap: anywhere; }
.dot-link .dot-link-o { display: block; width: 100%; font-size: 13px; padding: 8px 10px; border: 1px solid var(--ke); border-radius: 8px; background: var(--giay); overflow-wrap: anywhere; word-break: break-all; }
.dot-link .row { flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dot-link .qr { display: block; width: min(240px, 100%); height: auto; margin: 10px auto 0; }
.hsn-nut { margin: 8px 0; }
.hsn-dong { overflow-wrap: anywhere; }
.hsn-dong .tag { white-space: normal; margin: 2px 4px 2px 0; }
.tag.hsn-trung { background: var(--vang-nhat); border-color: var(--kim); }
.hsn-ghep { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hsn-ghep td, .hsn-ghep th { padding: 6px; border-bottom: 1px solid var(--ke); overflow-wrap: anywhere; vertical-align: top; font-size: 14px; }
.hsn-ghep th { white-space: normal; }
.hsn-ghep input[type=checkbox] { width: 22px; height: 22px; }

/* Tuyển dụng 2 · Việc 6 — hàng chờ thư: thẻ "Thư hẹn gửi · Huỷ gửi", mục "Thư tự động" ở ngăn kéo, Hộp thư thử */
.uv-the .thu-hen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.thu-tu-dong { display: grid; gap: 4px; margin: 6px 0; }
.thu-tu-dong-dong { align-items: center; gap: 8px; flex-wrap: wrap; }
.ht-thu .meta { overflow-wrap: anywhere; }
.ht-thu .mt-than { margin-top: 6px; }

/* Tuyển dụng 2 · Việc 7 — máy gợi ý sơ lọc (chữ trên thẻ, thanh lọc, khối ngăn kéo, tiêu chí của đợt) */
.tag.sl-g { white-space: normal; }
.tag.sl-phu_hop { background: var(--xanh-nhat); color: var(--xanh); border-color: var(--xanh); }
.tag.sl-can_xem { background: var(--vang-nhat); border-color: var(--kim); }
.tag.sl-chua_phu_hop { background: var(--do-nhat); color: var(--do-dam); border-color: var(--do); }
.tag.sl-khong_cham { background: var(--kem); color: var(--xam); }
.uv-the .tag.sl-g { margin-top: 4px; }
.sl-thanh { flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.sl-thanh .btn.on { border-color: var(--do); color: var(--do); }
.sl-chon { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 14px; }
.sl-ly { margin: 6px 0; padding-left: 18px; display: grid; gap: 4px; overflow-wrap: anywhere; }
.sl-cau { font-style: italic; }
.sl-tc-o label { display: block; }

/* Tuyển dụng 2 · Việc 8 — hàng chờ thư toàn chuỗi (Cài đặt › Mẫu thư › Hàng chờ thư) */
.hc-thu .meta { overflow-wrap: anywhere; }
.hc-thu .tag { white-space: normal; }
.hc-loc { margin-top: 8px; flex-wrap: wrap; }
.hc-nut { flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag.hc-loi { background: var(--do-nhat); color: var(--do-dam); border-color: var(--do); }
.tag.hc-cho, .tag.hc-dang_gui { background: var(--vang-nhat); border-color: var(--kim); }