/* =====================================================================
   ISE CASE TRACKING — Bảng màu nội bộ phòng ISE
   Đỏ · Xanh · Vàng trên nền trắng.
   ===================================================================== */
:root{
  /* --- Màu thương hiệu --- */
  --brand-red:#D6001C;      /* đỏ - nhận diện chính của công cụ */
  --brand-red-dark:#A80016;
  --brand-blue:#0B4EA2;     /* xanh - màu tương tác chính */
  --brand-blue-dark:#083A79;
  --brand-gold:#F5A800;     /* vàng - cảnh báo / chờ xử lý */

  /* --- Nền & khối --- */
  --bg:#F2F5F9;
  --panel:#FFFFFF;
  --panel-2:#F7F9FC;
  --panel-3:#EDF1F6;
  --border:#DCE3EB;
  --border-strong:#C3CEDA;

  /* --- Chữ --- */
  --text:#16202B;
  --text-muted:#59697A;
  --text-faint:#8A9AAB;

  /* --- Trạng thái --- */
  --accent:var(--brand-blue);
  --accent-dim:#D6E2F4;
  --good:#1B8A5A;
  --warn:var(--brand-gold);
  --bad:var(--brand-red);
  --purple:#6B4FBB;
  --teal:#0E8C8C;

  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius:10px;
  --shadow:0 1px 2px rgba(22,32,43,0.05), 0 2px 8px rgba(22,32,43,0.04);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
::selection{background:var(--accent-dim);}

/* ---------------- Dấu nhận diện ISE ---------------- */
.ise-mark{display:flex;align-items:center;gap:9px;}
.ise-mark .badge-ise{
  font-family:var(--sans);font-weight:800;font-size:15px;letter-spacing:0.06em;
  color:#fff;background:var(--brand-red);padding:5px 10px;border-radius:7px;line-height:1;
}
.ise-mark .mark-txt{line-height:1.15;}
.ise-mark .mark-txt .t1{font-size:12.5px;font-weight:700;color:var(--text);letter-spacing:0.01em;}
.ise-mark .mark-txt .t2{font-size:10px;color:var(--text-faint);}
/* dải chuyển sắc trang trí đầu khung */
.brand-strip{height:3px;background:linear-gradient(90deg,var(--brand-red),#EE5A24,var(--brand-gold));}

/* ---------------- Đăng nhập ---------------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(160deg,#FFFFFF 0%,#F2F5F9 55%,#E8EEF6 100%);}
.login-box{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--border);
  border-radius:14px;padding:0 0 26px 0;box-shadow:0 8px 30px rgba(11,78,162,0.10);overflow:hidden;}
.login-head{padding:26px 26px 18px 26px;border-bottom:1px solid var(--border);}
.login-box .sub{font-size:12px;color:var(--text-muted);margin-top:12px;}
.login-body{padding:20px 26px 0 26px;}
.login-error{color:var(--bad);font-size:12px;margin-top:10px;min-height:14px;}
.login-foot{text-align:center;font-size:10.5px;color:var(--text-faint);margin-top:16px;padding:0 26px;}

/* ---------------- Khung ứng dụng ---------------- */
.shell{display:flex;min-height:100vh;}
.rail{width:224px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:0 0 18px 0;}
.rail-brand{padding:18px 18px 16px 18px;border-bottom:1px solid var(--border);}
.rail nav{display:flex;flex-direction:column;gap:2px;padding:12px 10px;}
.rail button.tab{all:unset;cursor:pointer;padding:10px 12px;border-radius:8px;font-size:13px;
  color:var(--text-muted);display:flex;align-items:center;gap:9px;}
.rail button.tab .dot{width:6px;height:6px;border-radius:50%;background:var(--border-strong);flex-shrink:0;}
.rail button.tab:hover{background:var(--panel-2);color:var(--text);}
.rail button.tab.active{background:#EAF1FA;color:var(--brand-blue);font-weight:600;}
.rail button.tab.active .dot{background:var(--brand-red);}
.rail-foot{margin-top:auto;padding:14px 18px 0 18px;border-top:1px solid var(--border);
  font-size:10.5px;color:var(--text-faint);line-height:1.65;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;
  border-bottom:1px solid var(--border);background:var(--panel);}
.topbar .title{font-size:15px;font-weight:700;}
.topbar .sub{font-family:var(--mono);font-size:11.5px;color:var(--text-muted);margin-top:2px;}
.content{padding:24px 28px 60px 28px;max-width:1400px;width:100%;}

.content.full{max-width:none;}

h1.page-title{font-size:19px;margin:0 0 4px 0;font-weight:700;}
p.page-sub{color:var(--text-muted);font-size:12.5px;margin:0 0 22px 0;max-width:760px;}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow);}
.panel-title{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-faint);
  font-weight:700;margin:0 0 14px 0;display:flex;align-items:center;justify-content:space-between;}

/* ---------------- Thẻ KPI ---------------- */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px;}
.kpi-cell{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow);border-top:3px solid var(--brand-blue);}
.kpi-cell .num{font-family:var(--mono);font-size:26px;font-weight:700;}
.kpi-cell .lbl{font-size:11px;color:var(--text-muted);margin-top:4px;}

.bar-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--border);}
.bar-row:first-child{border-top:none;}
.bar-row .name{width:130px;flex-shrink:0;font-size:12px;color:var(--text-muted);}
.bar-track{flex:1;height:8px;background:var(--panel-3);border-radius:4px;overflow:hidden;}
.bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--brand-blue),#3D7FD6);}
.bar-row .val{width:60px;flex-shrink:0;text-align:right;font-family:var(--mono);font-size:11.5px;color:var(--text-muted);}

/* ---------------- Bảng ---------------- */
table.list{width:100%;border-collapse:collapse;font-size:12.5px;}
table.list th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--text-faint);padding:9px 8px;border-bottom:2px solid var(--border);font-weight:700;white-space:nowrap;}
table.list td{padding:9px 8px;border-bottom:1px solid var(--border);vertical-align:middle;}

/* Bảng Danh sách Case 13 cột: nén tối đa để hiện đủ, không phải kéo ngang */
table.list.case-table{font-size:11px;table-layout:auto;}
table.list.case-table th{padding:7px 5px;font-size:9.5px;letter-spacing:0.02em;vertical-align:bottom;}
table.list.case-table td{padding:7px 5px;}
table.list.case-table .badge{font-size:9.5px;padding:2px 5px;}
table.list.case-table .c-no{font-family:var(--mono);white-space:nowrap;font-weight:700;}
table.list.case-table .c-date{font-family:var(--mono);white-space:nowrap;font-size:10.5px;}
table.list.case-table .cell-wrap{display:block;max-width:92px;line-height:1.3;}
table.list.case-table .th-sub{font-size:8.5px;}
table.list.case-table .nw{white-space:nowrap;}   /* [G4-B U2] ten nguoi khong be giua */
table.list.case-table .cell-wrap.c-nguon{max-width:118px;}
table.list tr:last-child td{border-bottom:none;}
table.list tr.rowlink{cursor:pointer;}
table.list tr.rowlink:hover{background:#F4F8FD;}
table.list tr.overdue td{background:#FEF3F4;}
.empty-state{text-align:center;padding:40px 20px;color:var(--text-faint);font-size:12.5px;}

.badge{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10.5px;font-weight:700;
  padding:3px 8px;border-radius:5px;white-space:nowrap;}
.pill{display:inline-flex;align-items:center;font-size:11px;padding:5px 11px;border-radius:20px;
  border:1px solid var(--border);color:var(--text-muted);white-space:nowrap;background:var(--panel-2);}

/* ---------------- Biểu mẫu ---------------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center;}
select, input[type=text], input[type=date], input[type=password], textarea{
  background:#fff;border:1px solid var(--border-strong);border-radius:6px;color:var(--text);
  font-family:var(--sans);font-size:12.5px;padding:8px 10px;width:100%;}
select:focus, input:focus, textarea:focus{outline:2px solid var(--accent-dim);border-color:var(--brand-blue);}
textarea{resize:vertical;min-height:60px;font-family:var(--sans);}

.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:11.5px;color:var(--text-muted);font-weight:600;}
.field .hint{font-size:10.5px;color:var(--text-faint);margin-top:2px;}
.field.full{grid-column:1/-1;}

/* box-sizing: BAT BUOC - `all:unset` xoa ca box-sizing, khien nut dat width:100%
   bi cong them padding 2 ben va tran ra ngoai khung (thay ro o man hinh dang nhap). */
.btn{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--sans);font-size:12.5px;font-weight:600;
  padding:9px 16px;border-radius:8px;background:var(--brand-blue);color:#fff;text-align:center;}
.btn:hover{background:var(--brand-blue-dark);}
.btn.secondary{background:#fff;color:var(--text);border:1px solid var(--border-strong);}
.btn.secondary:hover{background:var(--panel-2);}
.btn.good{background:var(--good);color:#fff;}
.btn.bad{background:var(--brand-red);color:#fff;}
.btn.bad:hover{background:var(--brand-red-dark);}
.btn:disabled{opacity:0.4;cursor:not-allowed;}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}

.backlink{all:unset;cursor:pointer;font-family:var(--mono);font-size:11.5px;color:var(--brand-blue);
  display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;}
.backlink:hover{text-decoration:underline;}

/* ---------------- Chi tiết case ---------------- */
.case-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:6px;}
.case-head h1{margin:0;font-size:20px;}
.meta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px;}
.meta-cell .k{font-size:10.5px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-faint);margin-bottom:4px;font-weight:600;}
.meta-cell .v{font-size:13px;}

.dev-wrap{margin-top:10px;}
.dev-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:12px;}
.dev-label{width:170px;flex-shrink:0;color:var(--text-muted);}
.dev-val{font-family:var(--mono);font-size:12px;color:var(--text-muted);}
.dev-val b{color:var(--brand-gold);}

.timeline{display:flex;flex-direction:column;}
.tl-item{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--border);}
.tl-item:first-child{border-top:none;}
.tl-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-blue);margin-top:5px;flex-shrink:0;}
.tl-body .date{font-family:var(--mono);font-size:10.5px;color:var(--text-faint);}
.tl-body .txt{font-size:12.5px;margin-top:2px;}

.ar-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;
  border-top:1px solid var(--border);flex-wrap:wrap;}
.ar-item:first-child{border-top:none;}
.ar-item .ar-main{flex:1;min-width:220px;}
.ar-item .ar-main .t{font-size:12.5px;}
.ar-item .ar-main .m{font-size:11px;color:var(--text-faint);margin-top:2px;}
.ar-item select{width:auto;}

/* ---------------- Lịch công việc (lưới ngang kiểu Excel) ---------------- */
.board-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--panel);box-shadow:var(--shadow);}
table.board{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:12px;}
table.board th{background:var(--panel-2);padding:7px 6px;text-align:center;font-weight:700;
  border-bottom:2px solid var(--border);border-right:1px solid var(--border);white-space:nowrap;}
table.board th.wknd{background:var(--panel-3);}
table.board th.today, table.board td.today{box-shadow:inset 0 0 0 2px var(--brand-blue);}
.hdr-d{font-family:var(--mono);font-size:11.5px;color:var(--text);}
.hdr-w{font-size:9.5px;color:var(--text-faint);margin-top:1px;}
.hdr-name{min-width:160px;text-align:left !important;}

table.board td{padding:0;border-bottom:1px solid var(--border);border-right:1px solid var(--border);
  vertical-align:top;min-width:98px;}
.sticky-col{position:sticky;left:0;z-index:2;background:var(--panel);}
th.sticky-col{z-index:3;background:var(--panel-2);}
.name-col{padding:8px 10px !important;min-width:160px;border-right:2px solid var(--border);}
.name-col .nm{font-size:12.5px;font-weight:700;}
.name-col .db{font-size:10.5px;color:var(--brand-blue);margin-top:2px;}

/* Moi o lich deu bam duoc de XEM chi tiet cong viec trong ngay (Dot E4).
   Class 'editable' chi con y nghia: nguoi dung nay dat lich tay duoc. */
td.cell{cursor:pointer;}
td.cell:hover .cell-in{filter:brightness(0.96);}
.cell-in{position:relative;min-height:54px;padding:6px 7px;}
.cell-lbl{font-size:11px;font-weight:700;line-height:1.3;}
.cell-note{font-size:10px;color:var(--text-muted);margin-top:2px;line-height:1.3;}
.cell-case{font-size:9.5px;color:var(--text-faint);margin-top:3px;font-family:var(--mono);line-height:1.25;word-break:break-word;}
.manual-dot{position:absolute;top:3px;right:4px;font-size:8px;color:var(--brand-red);}

.legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px;}
.lg-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted);}
.lg-item i{width:10px;height:10px;border-radius:3px;display:inline-block;}
.hint-line{font-size:11px;color:var(--text-faint);margin-top:10px;}

/* ---------------- Hộp thoại ---------------- */
.modal-bg{position:fixed;inset:0;background:rgba(22,32,43,0.45);display:flex;align-items:flex-start;
  justify-content:center;padding:40px 16px;z-index:50;overflow-y:auto;}
.modal{background:var(--panel);border-radius:12px;padding:22px 24px;max-width:560px;width:100%;
  box-shadow:0 12px 40px rgba(22,32,43,0.22);}
.modal h3{margin:0 0 4px 0;font-size:15px;}
.modal p.d{color:var(--text-muted);font-size:12px;margin:0 0 16px 0;}

.callout{border:1px solid #F3D5A0;background:#FEF8EC;border-radius:9px;padding:12px 15px;
  font-size:12px;color:#7A5A12;margin-bottom:16px;}
.callout b{color:#B37800;}

/* [G3-P1g U2] Thong bao len GOC TREN ben phai, duoi thanh tieu de - truoc day o goc duoi phai,
   trung vi tri va bi nut "len dau trang" (z-index 80) de len. Chu to hon, bam de dong. */
.toast{position:fixed;top:72px;right:20px;max-width:420px;background:var(--text);border-radius:8px;
  border-left:4px solid var(--brand-blue);padding:12px 16px;font-size:13px;line-height:1.45;color:#fff;
  opacity:0;transform:translateY(-8px);transition:all .25s;pointer-events:none;z-index:95;
  box-shadow:0 8px 24px rgba(22,32,43,0.3);}
.toast.show{opacity:1;transform:translateY(0);pointer-events:auto;cursor:pointer;}
@media (max-width:760px){
  .toast{top:calc(10px + env(safe-area-inset-top,0px));left:12px;right:12px;max-width:none;font-size:13.5px;}
}

/* [G3-P1g U1] Dai co dinh "Dang xem ..." + nut quay lai noi bat - cung kieu dai o Hieu suat doi ngu. */
.dai-xem{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 16px;margin-bottom:14px;border-radius:var(--radius);background:var(--accent);color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.12);}
.dai-xem .btn-quaylai{background:#fff;color:var(--accent);font-weight:700;border:0;}
.dai-xem .btn-quaylai:hover{background:#fff;opacity:.9;}

/* [G3-P1g U3] Dong tieu de nhom trong bang Nguoi dung (Quan tri). */
tr.qt-nhomdong td{background:var(--panel-2);font-weight:700;font-size:12.5px;padding:6px 12px;}

@media (max-width: 760px){
  .shell{flex-direction:column;}
  .rail{width:100%;padding:0;}
  .rail-brand{padding:12px 16px;}
  .rail nav{flex-direction:row;padding:6px 10px;gap:4px;overflow-x:auto;}
  .rail-foot{display:none;}
  .content{padding:18px 16px 60px 16px;}
  .topbar{padding:12px 16px;flex-wrap:wrap;gap:8px;}
  table.list{font-size:11.5px;}
}

/* ---------------- Chữ ký & bổ sung ---------------- */
.dev-credit{margin-top:10px;padding-top:8px;border-top:1px solid var(--border);
  font-size:9.5px;color:var(--text-faint);letter-spacing:0.03em;}

/* Quy tắc mật khẩu mạnh */
.pw-rules{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;}
.pw-rule{font-size:10.5px;color:var(--text-faint);display:flex;align-items:center;gap:5px;}
.pw-rule span{font-size:11px;width:11px;display:inline-block;}
.pw-rule.ok{color:var(--good);}

/* Danh sách chọn nhiều team */
.chk-list{display:flex;flex-wrap:wrap;gap:6px 14px;border:1px solid var(--border-strong);
  border-radius:6px;padding:9px 11px;background:#fff;max-height:130px;overflow-y:auto;}
.chk{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text);font-weight:400;cursor:pointer;}
.chk input{width:auto;}

.tag-warn{font-size:9.5px;color:var(--brand-gold);margin-top:2px;font-family:var(--sans);}
.tag-sub{font-size:10px;color:var(--text-faint);margin-top:2px;}

/* ---------------- Chuông thông báo & cảnh báo ---------------- */
.bell, .icobtn{all:unset;cursor:pointer;position:relative;width:36px;height:36px;border-radius:9px;
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:var(--panel-2);}
.bell:hover, .icobtn:hover{background:var(--panel-3);}
.bell-ico{font-size:15px;line-height:1;}
.bell-count{position:absolute;top:-5px;right:-5px;background:var(--brand-red);color:#fff;
  font-size:9.5px;font-weight:700;min-width:17px;height:17px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--panel);}

/* [G3-P1j U6] Hai so tach mau: DO (tren) = Can xu ly gap - tu het khi viec xong; XANH (duoi) = thong bao chua doc. */
.bell-count-tb{top:auto;bottom:-5px;background:#1F6FD1;}
.notif-chu{padding:7px 16px;font-size:11px;color:var(--text-muted);border-bottom:1px solid var(--border);line-height:1.5;}
.notif-chu .cham{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle;}
.notif-panel{position:fixed;top:64px;right:20px;width:400px;max-width:calc(100vw - 32px);
  max-height:70vh;overflow-y:auto;background:var(--panel);border:1px solid var(--border);
  border-radius:12px;box-shadow:0 14px 44px rgba(22,32,43,0.20);z-index:55;}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;
  border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel);z-index:2;}
.notif-head .t{font-size:13px;font-weight:700;}
.notif-sec{padding:10px 16px 4px 16px;font-size:10px;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--text-faint);font-weight:700;}
.notif-item{display:flex;gap:10px;padding:10px 16px;border-top:1px solid var(--border);cursor:pointer;}
.notif-item:hover{background:var(--panel-2);}
.notif-item.unread{background:#F3F7FD;}
.notif-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px;}
.notif-body .tt{font-size:12.3px;line-height:1.4;}
.notif-body .mm{font-size:10.5px;color:var(--text-faint);margin-top:3px;}
.notif-empty{padding:26px 16px;text-align:center;color:var(--text-faint);font-size:12px;}

/* Bảng cảnh báo trên trang Tổng quan */
.alert-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border);cursor:pointer;}
.alert-row:first-child{border-top:none;}
.alert-row:hover{background:var(--panel-2);}
.alert-tag{font-family:var(--mono);font-size:9.5px;font-weight:700;padding:3px 7px;border-radius:4px;
  white-space:nowrap;flex-shrink:0;}
.alert-main{flex:1;min-width:0;}
.alert-main .t{font-size:12.5px;}
.alert-main .m{font-size:10.5px;color:var(--text-faint);margin-top:2px;}
.alert-han{font-family:var(--mono);font-size:11px;color:var(--text-muted);flex-shrink:0;}

/* [G2] Cot "Người cần xử lý" trong khối Cần xử lý ngay */
.alert-nguoi{flex-shrink:0;width:150px;text-align:right;line-height:1.3;}
.alert-nguoi .n{font-size:12px;color:var(--text);}
.alert-nguoi .n .ban{color:var(--text-faint);font-style:italic;}
.alert-nguoi .cv{font-size:10px;color:var(--text-faint);margin-top:1px;}

/* Màn hình hẹp: cột riêng sẽ bóp nát nội dung -> xuống dòng thành nhãn */
@media (max-width: 900px) {
  .alert-row{flex-wrap:wrap;}
  .alert-nguoi{width:100%;text-align:left;order:3;padding-left:2px;margin-top:3px;}
  .alert-nguoi .n::before{content:'Cần xử lý: ';color:var(--text-faint);font-size:10px;}
  .alert-nguoi .cv{display:inline;margin-left:4px;}
  .alert-han{order:4;}
}
.quote-box{background:var(--panel-2);border-left:3px solid var(--brand-blue);border-radius:0 7px 7px 0;
  padding:10px 13px;font-size:12.3px;color:var(--text-muted);margin-bottom:12px;}
.quote-box b{color:var(--text);}

/* ---------------- Ô mật khẩu: nút Hiện/Ẩn ---------------- */
.pw-wrap{position:relative;display:flex;align-items:center;}
.pw-wrap input{padding-right:56px;}
.pw-eye{all:unset;cursor:pointer;position:absolute;right:8px;font-size:11px;font-weight:600;
  color:var(--brand-blue);padding:4px 7px;border-radius:5px;user-select:none;}
.pw-eye:hover{background:var(--panel-3);}

.link-btn{all:unset;cursor:pointer;font-size:11.5px;color:var(--brand-blue);}
.link-btn:hover{text-decoration:underline;}
.th-sub{font-size:9px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-faint);margin-top:1px;}

/* ---------------- Ngày nghỉ lễ ---------------- */
.hol-list{display:flex;flex-wrap:wrap;gap:6px;}
.hol-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);
  border:1px solid var(--border);border-radius:20px;padding:4px 5px 4px 11px;font-size:11px;color:var(--text-muted);}
.hol-x{all:unset;cursor:pointer;width:17px;height:17px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:13px;color:var(--text-faint);background:var(--panel-3);}
.hol-x:hover{background:var(--brand-red);color:#fff;}

/* ==================== DASHBOARD ====================
   Bố cục theo thứ tự câu hỏi quản lý thường đặt ra:
   1) Có gì gấp?  2) Sức khỏe chung?  3) Ai đang làm gì?  4) Phân bố ra sao?
   Vụ việc điều tra là nghiệp vụ lõi -> chiếm nhiều diện tích hơn.
   ==================================================== */

/* --- Hàng 1: chính 62% | phụ 38% --- */
.dash-top{display:grid;grid-template-columns:1.62fr 1fr;gap:16px;align-items:start;margin-bottom:16px;}
.dash-main, .dash-side{min-width:0;}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-left:4px solid var(--brand-blue);padding:1px 0 1px 11px;margin-bottom:11px;flex-wrap:wrap;}
.sec-title{font-size:14.5px;font-weight:700;}
.sec-sum{font-size:11px;color:var(--text-faint);font-family:var(--mono);}

/* Thẻ số lớn (vụ việc) */
.k-row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px;}
.k-card{background:var(--panel);border:1px solid var(--border);border-radius:9px;
  box-shadow:var(--shadow);min-width:0;}
.k-card.big{border-top:3px solid var(--brand-blue);padding:11px 11px 12px 11px;}
.k-num{font-family:var(--mono);font-size:25px;font-weight:700;line-height:1.05;}
.k-lbl{font-size:10.5px;color:var(--text-muted);margin-top:4px;line-height:1.3;}
.k-sub{font-size:9px;color:var(--text-faint);margin-top:3px;line-height:1.25;}

/* Thẻ số nhỏ (nhiệm vụ khác) - xếp dọc, viền trái */
.k-col{display:flex;flex-direction:column;gap:8px;}
.k-card.sm{border-left:3px solid var(--purple);padding:9px 12px;display:flex;
  align-items:baseline;gap:9px;}
.k-num.sm{font-size:19px;}
.k-card.sm .k-lbl{margin-top:0;font-size:11px;}

/* Phễu quy trình */
.fn-row{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;border-radius:6px;}
.fn-row:hover{background:var(--panel-2);}
.fn-lbl{width:170px;flex-shrink:0;font-size:11.5px;color:var(--text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fn-wait{font-size:8.5px;background:var(--panel-3);color:var(--text-faint);
  padding:1px 5px;border-radius:8px;vertical-align:middle;}
.fn-bar{flex:1;height:16px;background:var(--panel-3);border-radius:4px;overflow:hidden;min-width:40px;}
.fn-fill{height:100%;border-radius:4px;transition:width .3s;}
.fn-num{width:26px;text-align:right;font-family:var(--mono);font-size:13px;font-weight:700;flex-shrink:0;}

/* Ô tỷ lệ hoàn thành */
.side-ratio{text-align:center;padding:15px 16px 16px 16px;margin-bottom:12px;}
.ratio-num{font-family:var(--mono);font-size:38px;font-weight:700;line-height:1;}
.ratio-lbl{font-size:11px;color:var(--text-muted);margin-top:5px;line-height:1.35;}
.ratio-bar{height:8px;background:var(--panel-3);border-radius:4px;overflow:hidden;margin:11px 0 7px 0;}
.ratio-fill{height:100%;border-radius:4px;transition:width .3s;}
.ratio-note{font-size:10.5px;color:var(--text-faint);}

/* --- Hàng 3: 4 ô phân bố ngang hàng --- */
.dash-analytics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.dash-analytics .panel{margin-bottom:16px;padding:14px 15px;}
.dash-analytics .bar-row{padding:5px 0;}
.dash-analytics .bar-row .name{width:auto;flex:1;font-size:11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dash-analytics .bar-track{flex:0 0 44px;height:7px;}
.dash-analytics .bar-row .val{width:24px;font-size:11px;}

/* Bảng "Ai đang làm gì" */
table.list.staff-table{font-size:11.5px;}
table.list.staff-table th{padding:7px 8px;font-size:9.5px;}
table.list.staff-table td{padding:8px;}
table.list.staff-table .grp{text-align:center;border-bottom:2px solid var(--border);}
table.list.staff-table .grp-case{color:var(--brand-blue);background:#EEF4FC;}
table.list.staff-table .grp-nv{color:var(--purple);background:#F2EFFA;}
table.list.staff-table .sub-th{text-align:center;font-size:9px;}
table.list.staff-table .num-cell{text-align:center;font-family:var(--mono);font-size:12.5px;}
table.list.staff-table .sep{border-left:2px solid var(--border);}
/* [I2-a] O so BAM DUOC. Chi gan cho o co gia tri > 0 - o bang 0 ma bam duoc thi
   hop thoai rong, sai hoan toan y nguoi dung (bai hoc 25 cua I1). */
table.list.staff-table .sn-click{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;}
table.list.staff-table .sn-click:hover{background:var(--panel-2);}
table.list.staff-table .cell-wrap{max-width:160px;display:block;}

/* Màn hình hẹp hoặc cửa sổ thu nhỏ */
@media (max-width: 1180px){
  .dash-top{grid-template-columns:1fr;}
  .k-col{flex-direction:row;}
  .k-card.sm{flex:1;}
  .dash-analytics{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 720px){
  .k-row-4{grid-template-columns:repeat(2,1fr);}
  .dash-analytics{grid-template-columns:1fr;}
  .k-col{flex-direction:column;}
}

/* ---------------- Case / nhiệm vụ đã hủy ---------------- */
.huy-box{background:#FEF3F4;border:1px solid #F5C6CC;border-radius:9px;padding:12px 15px;margin-bottom:4px;}
.huy-line{font-size:12.3px;color:var(--text-muted);line-height:1.6;}
.huy-line b{color:var(--brand-red);}
.ar-btn{padding:4px 9px !important;font-size:11px !important;}

/* ---------------- Kế hoạch quản lý ---------------- */
.mp-item{position:relative;padding:4px 6px;margin-bottom:3px;border-radius:0 5px 5px 0;
  cursor:pointer;font-size:10.5px;line-height:1.3;}
.mp-item:hover{filter:brightness(0.94);}
.mp-t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:88px;}

/* Đề xuất giãn thời hạn sau khi duyệt nghỉ */
.shift-item{border:1px solid var(--border);border-radius:9px;padding:12px 14px;margin-bottom:12px;
  background:var(--panel-2);}
.shift-head{font-size:12.8px;}
.shift-item .form-grid{grid-template-columns:repeat(3,1fr);gap:9px;}
.shift-item .field label{font-size:10.5px;}

/* ---------------- Biểu đồ phân tích ---------------- */
.chart-legend{display:flex;gap:16px;margin-bottom:12px;}
.bar-chart{display:flex;align-items:flex-end;height:170px;gap:4px;padding-bottom:22px;position:relative;}
.bc-col{display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative;}
.bc-bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%;}
.bc-bar{width:16px;min-height:2px;border-radius:3px 3px 0 0;position:relative;transition:height .3s;}
.bc-val{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:9.5px;
  font-family:var(--mono);color:var(--text-muted);}
.bc-lbl{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:10px;color:var(--text-faint);}

/* Công tắc bật/tắt quyền */
.sw{position:relative;display:inline-block;width:36px;height:19px;cursor:pointer;}
.sw input{opacity:0;width:0;height:0;position:absolute;}
.sw span{position:absolute;inset:0;background:var(--border-strong);border-radius:19px;transition:.2s;}
.sw span:before{content:"";position:absolute;height:15px;width:15px;left:2px;top:2px;
  background:#fff;border-radius:50%;transition:.2s;}
.sw input:checked + span{background:var(--good);}
.sw input:checked + span:before{transform:translateX(17px);}

/* ---------------- Ô chọn địa bàn có gõ lọc (combobox) ---------------- */
.cbx{position:relative;}
.cbx-list{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 2px);max-height:210px;overflow-y:auto;
  background:#fff;border:1px solid var(--border-strong);border-radius:6px;
  box-shadow:0 6px 18px rgba(16,32,56,.14);display:none;}
.cbx-list.open{display:block;}
.cbx-opt{padding:6px 10px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border);}
.cbx-opt:last-child{border-bottom:none;}
.cbx-opt:hover,.cbx-opt.hi{background:#EEF3FA;}
.cbx-opt.none{color:var(--text-faint);cursor:default;font-style:italic;}
.cbx-opt.none:hover{background:transparent;}

/* ---- Giao nhieu vu viec / nhiem vu (C2) ---- */
.chk-box { display:flex; flex-wrap:wrap; gap:6px 14px; padding:8px 10px;
  border:1px solid var(--border); border-radius:6px; background:var(--panel-2); min-height:38px; align-items:center; }
.chk { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:400; cursor:pointer; }
.chk input { width:auto; margin:0; }
.hint-inline { font-size:11.5px; font-weight:400; color:var(--text-faint); }
.sub-panel { border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-bottom:12px; background:var(--panel-2); }
.sub-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.btn-link { background:none; border:none; cursor:pointer; font-size:12.5px; padding:2px 4px; color:var(--text-muted); text-align:left; }   /* [G3-P1b3] nut <button> mac dinh can giua: ten dai xuong dong bi lech le */
.btn-link.danger { color:var(--bad); }
.callout.danger { border-left:3px solid var(--bad); background:#D6001C0F; }

/* ---- Khoi "Viec cho chinh ban xu ly" tren Tong quan ---- */
.todo-panel { border-left:4px solid var(--bad); background:#D6001C08; margin-bottom:18px; }
.todo-sub { font-size:12.5px; color:var(--text-muted); margin-bottom:8px; }
/* Cot Case No. bo hep lai, cac cot con lai chia deu -> tieu de va noi dung thang hang */
table.list.todo-tbl { width:100%; table-layout:fixed; }
table.list.todo-tbl th, table.list.todo-tbl td { text-align:left; padding:8px 10px; }
table.list.todo-tbl th:first-child, table.list.todo-tbl td:first-child { width:22%; }
.todo-row { cursor:pointer; }
.todo-row:hover { background:#F4F8FD; }
.badge-mini { font-size:10px; font-weight:700; padding:1px 5px; border-radius:3px; vertical-align:middle; }
.k-card.k-clickable { cursor:pointer; transition:transform .08s, box-shadow .08s; }
.k-card.k-clickable:hover { transform:translateY(-1px); box-shadow:0 3px 10px rgba(11,78,162,.12); }

/* ---- Trang thai Kien nghi: to mau de nhan su nhin thay ngay ---- */
select.arStatus { font-weight:700; border-width:2px; }
select.ar-khong_co_kien_nghi { color:#59697A; border-color:#C3CEDA; background-color:#F7F9FC; }
select.ar-dang_xu_ly { color:#0B4EA2; border-color:#0B4EA2; background-color:#EAF1FA; }
select.ar-hoan_tat   { color:#1B8A5A; border-color:#1B8A5A; background-color:#E9F5EF; }
select.ar-huy_kien_nghi { color:#D6001C; border-color:#D6001C; background-color:#FCECEE; }
/* Luoi 5 o thong ke - o nho lai de vua mot hang */
.k-row-5{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px;}
.k-row-5 .k-card.big{padding:11px 9px;}
.k-row-5 .k-num{font-size:26px;}
.k-row-5 .k-lbl{font-size:10.5px;}
.k-row-5 .k-sub{font-size:9.5px;}
@media (max-width:900px){ .k-row-5{grid-template-columns:repeat(2,1fr);} }
/* Bang xac nhan nhan viec hang loat */
table.list.xn-tbl{width:100%;font-size:11.5px;}
table.list.xn-tbl th{padding:7px 6px;font-size:9.5px;vertical-align:bottom;}
table.list.xn-tbl td{padding:8px 6px;vertical-align:top;}
table.list.xn-tbl input[type=checkbox]{width:auto;margin:0;cursor:pointer;}
/* Dong nhiem vu / case da huy: lam mo, khong to do nhu viec tre han */
tr.row-huy td { opacity:.55; }
tr.row-huy.overdue { background:transparent !important; }
/* Bang cong viec trong ngay (bam vao o lich) */
table.list.day-tbl{width:100%;font-size:12px;}
table.list.day-tbl th{padding:7px 8px;font-size:9.5px;}
table.list.day-tbl td{padding:8px;vertical-align:top;}
table.list.day-tbl tr.rowlink{cursor:pointer;}
table.list.day-tbl tr.rowlink:hover{background:var(--panel-3);}
/* Dong khai bao do he thong tu sinh - phan biet voi dong nhan su tu khai */
tr.row-auto td { background:#0B4EA208; }
.k-card.k-on { box-shadow:0 0 0 2px var(--brand-blue) inset; }

/* =====================================================================
   ĐỢT E1 — THU GỌN TỪNG PHẦN + NÚT LÊN ĐẦU TRANG
   Khối nào có thuộc tính data-collapse="<khoá>" thì dòng tiêu đề
   (.panel-title hoặc .sec-head — phải là CON TRỰC TIẾP) sẽ bấm được để
   thu gọn / mở lại. Trạng thái nhớ theo từng máy (localStorage).
   ===================================================================== */
/* [TG-ABC] Nut thu gon TO va RO hon.
   Truoc: ~18x12px, mau --text-faint (mo nhat bang mau) -> tren dien thoai gan nhu
   khong nhan ra la nut. Ca DONG TIEU DE von da bam duoc, nen day KHONG phai van de
   vung cham ma la van de NHAN BIET -> them vien + bo goc de trong ra dang cai nut.
   min-height cua .clp-head giu cho nut khong tran ra de len noi dung ben duoi. */
.clp-head{cursor:pointer;user-select:none;position:relative;
  padding-right:40px;min-height:30px;}
.clp-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:30px;height:30px;padding:0;line-height:1;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--border);border-radius:8px;
  cursor:pointer;font-size:15px;color:var(--text-muted);
  transition:color .12s, border-color .12s;}
.clp-head:hover .clp-btn{color:var(--brand-blue);border-color:var(--brand-blue);}
[data-collapse].clp-closed > *:not(.clp-head){display:none !important;}
[data-collapse].clp-closed{padding-bottom:12px;}

/* [TG-ABC] Khoi A/B/C tab Phan tich - the boc de thu gon CA KHOI.
   Truoc day .pt-sec chi la dong chu, cac panel la ANH EM ngang hang nen khong co
   gi de an. Nay moi khoi co the boc rieng. Khong dat margin o day: giu nguyen
   khoang cach von do .pt-sec quyet dinh. */
.pt-khoi{display:block;}
/* Khi khoi bi thu, dong tieu de khong con margin duoi thua */
.pt-khoi.clp-closed > .pt-sec{margin-bottom:0;}
.clp-tag{font-size:10px;font-weight:600;color:var(--text-faint);margin-left:8px;
  text-transform:none;letter-spacing:0;font-family:var(--mono);}

/* Nút quay lại đầu trang — nổi góc dưới bên phải, hiện khi đã cuộn xuống */
/* [G3-P1g U2] Nen xanh dac, mu ten trang dam, to hon va CAO hon goc duoi (truoc: nen trang, vien mo, sat day). */
#btnTop{position:fixed;right:20px;bottom:32px;z-index:80;width:50px;height:50px;
  border-radius:50%;border:2px solid #fff;background:var(--brand-blue);
  color:#fff;font-size:24px;font-weight:800;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(22,32,43,.35);padding:0;
  display:none;align-items:center;justify-content:center;}
#btnTop.show{display:flex;}
#btnTop:hover{filter:brightness(.9);}
@media (max-width:760px){
  #btnTop{right:14px;bottom:calc(26px + env(safe-area-inset-bottom,0px));width:54px;height:54px;font-size:26px;}
}

/* ---------- Ô chọn NHIỀU địa bàn (Địa bàn phụ trách) — Đợt E2 ---------- */
.db-multi{display:flex;flex-direction:column;gap:7px;}
.db-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:24px;align-items:center;}
.db-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;
  background:#EAF1FA;color:var(--brand-blue);border:1px solid #C9DBF1;
  border-radius:14px;padding:3px 5px 3px 10px;line-height:1.3;}
.db-x{background:none;border:none;cursor:pointer;color:var(--brand-blue);
  font-size:11px;line-height:1;padding:2px 4px;border-radius:50%;}
.db-x:hover{background:var(--brand-blue);color:#fff;}

/* ---------- Khối "Kết quả chung 4 nhóm" (Tổng quan Trưởng phòng) — Đợt E2 ---------- */
.tp-sub{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-faint);margin:2px 0 8px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tp-sub:not(:first-of-type){margin-top:14px;}
.tp-gio{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--purple);
  background:#6B4FBB14;border-radius:10px;padding:1px 8px;letter-spacing:0;text-transform:none;}

/* Chấm báo "nhân sự có đơn nghỉ đang chờ duyệt" trên ô lịch — Đợt E3 */
.leave-dot{position:absolute;bottom:3px;right:4px;font-size:9px;color:var(--brand-gold);}

/* =====================================================================
   ĐỢT I1 — TAB PHÂN TÍCH
   ===================================================================== */

/* [I1-Q6] VÁ LỖI CŨ: renderPhanTich dùng .dash-2col từ trước nhưng class này
   CHƯA TỪNG được định nghĩa -> hai panel "SLA" và "Thời gian vụ việc đang mở"
   đang xếp chồng dọc thay vì hai cột. */
.dash-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.pt-grid4{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}

/* Đầu mỗi khối A / B / C */
.pt-sec{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:24px 0 10px 0;padding-left:11px;border-left:3px solid var(--brand-blue);}
.pt-sec b{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text);}
.pt-sec i{font-style:normal;font-size:11.5px;color:var(--text-faint);}

/* Chú thích cố định: phân biệt "trễ hạn deadline" với "SLA phòng" */
.pt-note{font-size:11px;color:var(--text-faint);line-height:1.5;margin-top:11px;}

/* Hàng bấm được (phễu, thời gian tại khâu, bảng nút thắt) */
.pt-click{cursor:pointer;}
.pt-click:hover{background:var(--panel-2);}

/* --- Thanh HAI LỚP: xanh = số lượng · đỏ lồng bên trong = trễ hạn deadline --- */
.hl-row{display:flex;align-items:center;gap:9px;padding:6px 2px;border-radius:6px;
  border-top:1px solid var(--border);}
.hl-row:first-child{border-top:none;}
.hl-lbl{width:116px;flex-shrink:0;font-size:11.5px;color:var(--text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hl-track{flex:1;height:14px;min-width:36px;background:var(--panel-3);
  border-radius:4px;overflow:hidden;}
.hl-fill{height:100%;border-radius:4px;}
.hl-late{height:100%;border-radius:4px 0 0 4px;}
.hl-val{width:32px;flex-shrink:0;text-align:right;font-family:var(--mono);
  font-size:12.5px;font-weight:700;}
.hl-pct{width:74px;flex-shrink:0;text-align:right;font-family:var(--mono);font-size:10.5px;}

/* Bảng nút thắt cổ chai */
.nt-tbl td.nt-num{text-align:center;font-family:var(--mono);font-size:12.5px;font-weight:700;}
.nt-ban{font-style:italic;color:var(--text-faint);}

@media (max-width:1100px){
  .dash-2col, .pt-grid4{grid-template-columns:1fr;}
}

/* [TG-ABC] Tren dien thoai: nut thu gon to hon cho vua dau ngon tay */
@media (max-width:760px){
  .clp-head{padding-right:46px;min-height:36px;}
  .clp-btn{width:36px;height:36px;font-size:16px;}
}

/* =====================================================================
   [G3-P1i U8] SỌC XEN KẼ cho mọi bảng danh sách (kiểu bảng Excel): dòng lẻ nền trắng, dòng chẵn xanh
   nhạt. Lớp .soc do app.js keSoc() gắn — bỏ qua dòng tiêu đề nhóm (đếm lại sau mỗi nhóm) và dòng
   chi tiết bung. Dòng có màu riêng (trễ hạn, đang mở, tiêu đề nhóm) giữ màu riêng.
   ===================================================================== */
table.list > tbody > tr.soc{background:#E6EFFA;}
table.list > tbody > tr.rowlink:hover{background:#D3E3F7;}
table.list > tbody > tr.kn-open{background:#CFE0F5;}
table.list > tbody > tr.kn-open > td{font-weight:600;}

/* [G3-P1i U7] BUNG / THU MƯỢT: nội dung dòng chi tiết trượt mở / thu, dòng vừa bấm đứng yên. */
#content table.list{overflow-anchor:none;}
tr.kn-chitiet > td.kn-ct-o{padding:0;background:var(--panel-2);border-bottom:2px solid var(--border-strong);}
.kn-truot{overflow:hidden;transition:height .26s ease, opacity .22s ease;}
.kn-ct-trong{padding:10px 10px 12px 10px;}
.kn-mui{display:inline-block;width:12px;color:var(--brand-blue);}
@media (prefers-reduced-motion: reduce){ .kn-truot{transition:none;} }
/* [G3-P1i U7] Trong nhip tai lai cung man hinh: giu nguyen noi dung (khong nhay) nhung khoa bam de khong gui trung. */
#content.dang-tai-lai{pointer-events:none;cursor:progress;}

/* ---------------- [G4-A1 T3] O chon (select) - mui ten thong nhat toan ung dung ----------------
   Bo mui ten mac dinh cua trinh duyet (moi trinh duyet ve mot kieu, tren Windows rat tho) ->
   mot mui ten chevron mong, can giua, cach mep phai deu. Ap cho MOI <select> mot dong (khong ap
   select nhieu dong [multiple]/[size]). Mau mui ten di theo trang thai: xam -> xanh khi re chuot/
   dang chon; o kien nghi co mau trang thai thi mui ten cung mau do. */
select:not([multiple]):not([size]){
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2359697A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px 12px;
  padding-right:30px;cursor:pointer;text-overflow:ellipsis;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;}
select:not([multiple]):not([size])::-ms-expand{display:none;}
select:not([multiple]):not([size]):hover:not(:disabled){border-color:#8FA6C1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%230B4EA2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
select:not([multiple]):not([size]):focus{outline:none;border-color:var(--brand-blue);box-shadow:0 0 0 3px var(--accent-dim);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%230B4EA2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
select:not([multiple]):not([size]):disabled{cursor:not-allowed;background-color:var(--panel-2);color:var(--text-faint);border-color:var(--border);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23B4C0CD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
select option{color:var(--text);background:#fff;}
select option:disabled{color:var(--text-faint);}
/* O chon dang loc (khac "Tat ca/Moi ...") trong thanh loc: vien xanh nhat de biet ngay dang loc gi */
.filter-bar select.dang-loc{border-color:var(--brand-blue);background-color:#F3F7FD;color:var(--brand-blue-dark);font-weight:600;}
/* O trang thai kien nghi: mui ten cung mau trang thai */
select.ar-khong_co_kien_nghi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2359697A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
select.ar-dang_xu_ly{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%230B4EA2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;}
select.ar-hoan_tat{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%231B8A5A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;}
select.ar-huy_kien_nghi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23D6001C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;}

/* [G4-A1 T4] Dong case vua xem - to dam + vach mau ben trai; tu cuon toi khi quay lai danh sach */
table.list tr.row-vuaxem td{background:#D9E6F8 !important;font-weight:700;color:var(--brand-blue-dark);}
table.list tr.row-vuaxem td:first-child{box-shadow:inset 4px 0 0 var(--brand-blue);}
table.list tr.row-vuaxem.overdue td{background:#FADDE1 !important;}
.filter-bar select{max-width:260px;}

/* ---------------- [G4-A2] Danh muc nguon vu viec + chuan hoa mot lan ---------------- */
.nv-bang td{vertical-align:middle;}
.nv-bang tr.nv-nhom td{background:var(--panel-3);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);padding-top:9px;padding-bottom:7px;}
.nv-bang tr.nv-nhom .nv-dem{font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-faint);margin-left:6px;}
.nv-bang tr.nv-mo td b{color:var(--text-muted);font-weight:600;}
.nv-bang .link-btn + .link-btn{margin-left:12px;}
.nv-bang .link-btn.nv-tat{color:var(--text-muted);}
.nv-badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid;white-space:nowrap;line-height:1.5;}
.nv-badge.dung{color:#1B8A5A;border-color:#B5DCC8;background:#EEF8F2;}
.nv-badge.cu{color:#59697A;border-color:#D3DCE6;background:#F4F7FA;}
.nv-badge.ngung{color:#8A6A12;border-color:#EBD9A6;background:#FCF7E8;}
.nv-pb{font-size:12px;color:var(--brand-blue-dark);background:#EEF3FB;border:1px solid #D6E2F4;border-radius:5px;padding:1px 7px;}
.nv-them{display:grid;grid-template-columns:minmax(200px,2fr) minmax(160px,1.3fr) minmax(170px,1.3fr) auto;gap:10px;align-items:end;margin:14px 0 4px 0;padding:12px;border:1px dashed var(--border-strong);border-radius:8px;background:var(--panel-2);}
@media (max-width:820px){.nv-them{grid-template-columns:1fr;}}
.ch-khung{margin-top:18px;border:1px solid #D6E2F4;border-left:4px solid var(--brand-blue);border-radius:10px;padding:14px 16px;background:linear-gradient(180deg,#F7FAFE 0,#fff 70%);}
.ch-khung.ch-khoa{border-color:var(--border);border-left-color:#8A9AAB;background:var(--panel-2);}
.ch-tieu{font-size:13.5px;margin-bottom:6px;display:flex;align-items:center;flex-wrap:wrap;gap:4px;}
.ch-mo-ta{font-size:12.5px;color:var(--text-muted);line-height:1.6;}
.ch-buoc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 6px 0;}
@media (max-width:900px){.ch-buoc{grid-template-columns:1fr;}}
.ch-o{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:8px;padding:11px 12px;font-size:12.5px;}
.ch-so{flex:0 0 24px;height:24px;border-radius:50%;background:var(--brand-blue);color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;}
.ch-tom{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 8px 0;}
.ch-chip{font-size:12px;padding:3px 10px;border-radius:999px;background:var(--panel-3);color:var(--text-muted);border:1px solid var(--border);}
.ch-chip b{color:var(--text);font-variant-numeric:tabular-nums;}
.ch-chip.doi{background:#EAF1FA;border-color:#C9D9F0;color:var(--brand-blue-dark);} .ch-chip.doi b{color:var(--brand-blue);}
.ch-chip.loi{background:#FCECEE;border-color:#F3C4CB;color:#A80016;} .ch-chip.loi b{color:var(--brand-red);}
.ch-bang{max-height:300px;overflow:auto;border:1px solid var(--border);border-radius:8px;margin-bottom:10px;}
.ch-bang table.list{margin:0;}
.ch-bang table.ch-loi td:last-child{color:#A80016;}
.ch-chan{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
.btn.danger-outline{background:#fff;color:var(--brand-red);border:1px solid #EDB3BC;}
.btn.danger-outline:hover{background:#FCECEE;border-color:var(--brand-red);}

/* ===================== [G4-B KT] KHOA TRUY CAP KHI DEPLOY ===================== */
.bt-banner{display:flex;align-items:center;gap:12px;padding:10px 18px;font-size:13px;line-height:1.45;position:sticky;top:0;z-index:60;border-bottom:1px solid transparent;}
.bt-banner.bt-dem{background:#FFF4CC;border-bottom-color:#F0D27A;color:#5A4300;}
.bt-banner.bt-tp{background:#FCECEE;border-bottom-color:#EDB3BC;color:var(--brand-red-dark);}
.bt-banner .bt-ico{font-size:18px;flex:none;}
.bt-banner .bt-txt{flex:1;min-width:0;}
.bt-banner .bt-phu{display:inline-block;margin-left:6px;color:inherit;opacity:.85;}
.bt-banner .bt-dong-ho{font-family:var(--mono);font-size:14px;font-weight:700;white-space:nowrap;}
.bt-banner .bt-nut{all:unset;cursor:pointer;flex:none;white-space:nowrap;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:7px;border:1px solid var(--brand-red);color:var(--brand-red);background:#fff;}
.bt-banner .bt-nut:hover{background:var(--brand-red);color:#fff;}
.login-baotri{margin-top:12px;padding:10px 12px;border-radius:8px;background:#FFF4CC;border:1px solid #F0D27A;color:#5A4300;font-size:12.5px;line-height:1.5;}
.login-baotri b{display:block;margin-bottom:2px;}
.bt-khung .bt-mo-ta{color:var(--text-muted);font-size:12.5px;margin:0 0 10px 0;line-height:1.55;}
.bt-khung .bt-hang{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px;font-size:12.5px;}
.bt-khung .bt-nhan{color:var(--text-muted);font-weight:600;white-space:nowrap;}
.bt-khung .bt-ds{display:flex;flex-wrap:wrap;gap:6px;}
.bt-khung .bt-nguoi{padding:2px 9px;border-radius:999px;background:var(--panel-3);border:1px solid var(--border);white-space:nowrap;font-size:12px;}
.bt-the{display:inline-block;padding:3px 10px;border-radius:999px;font-weight:600;font-size:12px;white-space:nowrap;border:1px solid;}
.bt-the-mo{color:var(--good);background:#E6F4EC;border-color:#B7DEC8;}
.bt-the-dem{color:#7A5A00;background:#FFF4CC;border-color:#F0D27A;}
.bt-the-khoa{color:var(--brand-red-dark);background:#FCECEE;border-color:#EDB3BC;}

/* ===================== [G4-B U1] KHUNG THONG TIN VU VIEC - can doi cot, khong gay cum chu =====================
   Truoc: 9 o cung be rong (minmax 150px) -> o "Nguon vu viec" nhan dai bi bop 3 dong, o ngan
   ("Uu tien", "Nhan su ho tro") thua khoang trong; o thu 9 roi mot minh xuong hang 2.
   Nay: moi o rong THEO NOI DUNG, khoang cach cot DEU NHAU; cum chu (.nw) khong bi bẻ giua chung -
   khong du cho thi ca cum xuong dong. */
.mg-wrap{container-type:inline-size;}
.meta-grid.mg-can{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 28px;align-items:start;}
.meta-grid.mg-can .meta-cell{min-width:0;}
.meta-grid.mg-can .mg-rong{grid-column:span 2;}
@container (max-width:600px){ .meta-grid.mg-can{grid-template-columns:repeat(3,minmax(0,1fr));} .meta-grid.mg-can .mg-rong{grid-column:span 3;} }
@container (max-width:460px){ .meta-grid.mg-can{grid-template-columns:repeat(2,minmax(0,1fr));} .meta-grid.mg-can .mg-rong{grid-column:span 2;} }
.meta-cell .k .nw, .meta-cell .v .nw{white-space:nowrap;}
.meta-cell .k .k-phu{text-transform:none;letter-spacing:0;font-weight:500;font-size:11px;color:var(--text-muted);}
.meta-cell .v.v-dong{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;}
.the-nguon-cu{display:inline-block;padding:0 7px;border-radius:999px;font-size:10.5px;font-weight:600;color:#7A5A00;background:#FFF4CC;border:1px solid #F0D27A;white-space:nowrap;line-height:17px;}
.btn-sua-nho{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:3px;padding:1px 10px;border-radius:6px;font-size:11.5px;font-weight:600;line-height:19px;
  color:var(--brand-blue);background:var(--accent-dim);border:1px solid #A9C1E6;white-space:nowrap;}
.btn-sua-nho:hover{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);}
.btn-sua-nho:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px;}

/* ===================== [G4-B] NHAP EXCEL VU VIEC DA DONG ===================== */
.nx-nhan{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin:10px 0 6px 0;}
.nx-nhan.loi{color:var(--brand-red-dark);}
#nxKhung td.nw, #nxKhung .nw{white-space:nowrap;}
#nxKhung td.nx-cb{font-size:11.5px;color:#7A5A00;min-width:260px;}
.the-nhap-excel{display:inline-block;padding:1px 9px;border-radius:999px;font-size:11px;font-weight:600;color:#5B3FA8;background:#EFEAFB;border:1px solid #D3C6F2;white-space:nowrap;}

/* ===================== [G4-A3 P1] PHAN TRANG DUNG CHUNG ===================== */
.pg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:8px 0;font-size:12.5px;color:var(--text-muted);}
.pg-bar .pg-dem{white-space:nowrap;}
.pg-bar .pg-dem b{color:var(--text);font-variant-numeric:tabular-nums;}
.pg-bar .pg-nut{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;}
.pg-bar .pg-so{all:unset;cursor:pointer;min-width:30px;height:28px;padding:0 9px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border-strong);border-radius:7px;background:var(--panel);color:var(--text);font-size:12.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;}
.pg-bar .pg-so:hover:not([disabled]):not(.pg-hien){border-color:var(--brand-blue);color:var(--brand-blue);background:var(--accent-dim);}
.pg-bar .pg-so.pg-hien{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff;cursor:default;}
.pg-bar .pg-so[disabled]{opacity:.4;cursor:default;}
.pg-bar .pg-so:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px;}
.pg-bar .pg-cach{padding:0 2px;color:var(--text-faint);}
.pg-bar .pg-co{display:inline-flex;align-items:center;gap:6px;margin-left:auto;white-space:nowrap;}
.pg-bar .pg-co select{width:auto;padding-top:3px;padding-bottom:3px;}
.btn-xoa-loc{all:unset;cursor:pointer;white-space:nowrap;padding:5px 11px;border-radius:7px;font-size:12px;font-weight:600;
  color:var(--brand-red-dark);background:#FCECEE;border:1px solid #EDB3BC;}
.btn-xoa-loc:hover{background:var(--brand-red);border-color:var(--brand-red);color:#fff;}

/* ===================== [G4-B4] HIEU SUAT DOI NGU: M2 thanh chon ky · M4 co dinh tieu de cot · M1 thang mau =====================
   M2: lop .btn-sm truoc day KHONG duoc dinh nghia (G4-A3..G4-B3) -> nut hien kieu mac dinh trinh duyet; o ngay an width:100%
   cua input chung -> gian het chieu ngang. */
.btn-sm{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;
  border-radius:6px;border:1px solid var(--border-strong);background:#fff;color:var(--text);font-family:var(--sans);font-size:12.5px;
  font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;}
.btn-sm:hover{filter:brightness(0.96);}
.btn-sm:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px;}
.bc-ky{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.bc-ky input[type=date]{width:auto;flex:0 0 auto;height:32px;padding:4px 8px;}
/* M4: bang nam trong VUNG CUON RIENG - dong tieu de cot dinh o dau vung khi cuon danh sach nhan su;
   chuot ngoai vung thi trang cuon binh thuong. overscroll-behavior:contain - cuon het bang khong keo trang theo. */
.bc-cuon{overflow:auto;max-height:calc(100vh - 160px);min-height:280px;overscroll-behavior:contain;}
.bc-cuon table.list thead th{position:sticky;top:0;z-index:3;background:var(--panel);border-bottom:0;box-shadow:inset 0 -2px 0 var(--border);}
/* M1: o "Dung han" duoi nguong so vu - chu xam kem so vu */
.bc-dh-it{color:var(--text-muted);}
.bc-dh-so{display:block;font-size:10.5px;font-weight:500;color:var(--text-faint);}
/* [G4-B4 M3] Hop "Sua thong tin nhap Excel" - rong, luoi 3 cot, tu ve 2 / 1 cot */
.modal.modal-rong{max-width:920px;max-height:90vh;overflow-y:auto;}
.nxs-nhom{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin:12px 0 6px 0;}
.nxs-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 14px;}
.nxs-luoi .field{margin:0;}
.nxs-luoi .field label .hint-inline{text-transform:none;}
@media (max-width:760px){ .nxs-luoi{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:520px){ .nxs-luoi{grid-template-columns:1fr;} }
.modal-rong input[type=number]{background:#fff;border:1px solid var(--border-strong);border-radius:6px;color:var(--text);font-family:var(--sans);font-size:12.5px;padding:8px 10px;width:100%;box-sizing:border-box;}