:root {
  --bg: #f4f6fa;
  --card: #ffffff;
  --text: #1d2433;
  --muted: #6b7385;
  --line: #e3e7ef;
  --brand: #2f6bff;
  --brand-soft: #e8efff;
  --good: #16a34a;
  --good-soft: #e6f6ec;
  --warn: #d97706;
  --warn-soft: #fdf1e1;
  --bad: #dc2626;
  --bad-soft: #fdeaea;
  --info: #7c3aed;
  --info-soft: #f1eafe;
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }

/* Bố cục */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 230px; background: var(--card); border-right: 1px solid var(--line);
  padding: 20px 12px; position: sticky; top: 0; height: 100vh; flex-shrink: 0;
}
.brand { font-weight: 700; font-size: 18px; padding: 0 10px 18px; }
.brand small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  color: var(--text); margin-bottom: 2px;
}
.nav a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nav a .badge { margin-left: auto; }
.main { flex: 1; min-width: 0; padding: 24px 28px 90px; max-width: 1100px; }
.page-title { font-size: 22px; font-weight: 700; margin: 0 0 16px; }
.bottom-nav { display: none; }

@media (max-width: 760px) {
  .sidebar { display: none; }
  .main { padding: 16px 16px 90px; }
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--card);
    border-top: 1px solid var(--line); z-index: 10; padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav a {
    flex: 1; text-align: center; padding: 8px 2px 10px; font-size: 11px; color: var(--muted); position: relative;
  }
  .bottom-nav a .ico { display: block; font-size: 20px; line-height: 1.2; }
  .bottom-nav a.active { color: var(--brand); font-weight: 600; }
  .bottom-nav a .badge { position: absolute; top: 2px; left: 55%; }
}

/* Thẻ và lưới */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.card h3 { margin: 0 0 12px; font-size: 16px; }
.grid { display: grid; gap: 12px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat .label { color: var(--muted); font-size: 13px; }
.stat .value { font-size: 24px; font-weight: 700; margin-top: 2px; }
.stat.clickable { cursor: pointer; }
.stat.selected { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* Nút */
.btn {
  border: 1px solid var(--line); background: var(--card); padding: 9px 16px; border-radius: 10px;
  cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { border-color: #c9d0dd; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.good { background: var(--good); border-color: var(--good); color: #fff; }
.btn.bad { color: var(--bad); }
.btn.sm { padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: default; }

/* Nút chấm công tròn kiểu Lark */
.punch-wrap { text-align: center; padding: 10px 0 6px; }
.clock { font-size: 40px; font-weight: 700; letter-spacing: 1px; }
.date-line { color: var(--muted); margin-bottom: 18px; }
.punch-btn {
  width: 168px; height: 168px; border-radius: 50%; border: none; cursor: pointer; color: #fff;
  background: radial-gradient(circle at 30% 30%, #5b8cff, var(--brand));
  box-shadow: 0 10px 30px rgba(47, 107, 255, .35); font-size: 20px; font-weight: 700;
}
.punch-btn.out { background: radial-gradient(circle at 30% 30%, #ffad4d, #f08a00); box-shadow: 0 10px 30px rgba(240, 138, 0, .35); }
.punch-btn small { display: block; font-size: 13px; font-weight: 500; opacity: .9; margin-top: 4px; }
.punch-btn:disabled { opacity: .6; }
.loc-line { margin-top: 14px; font-size: 13px; color: var(--muted); }
.loc-line.ok { color: var(--good); }
.loc-line.bad { color: var(--bad); }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.timeline li:last-child { border-bottom: none; }
.timeline .t { font-weight: 700; width: 52px; }

/* Nhãn trạng thái */
.tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef0f4; color: var(--muted); white-space: nowrap; }
.tag.normal, .tag.approved, .tag.valid, .tag.exempt { background: var(--good-soft); color: var(--good); }
.tag.late, .tag.early, .tag.late_early, .tag.pending, .tag.working { background: var(--warn-soft); color: var(--warn); }
.tag.missing, .tag.absent, .tag.rejected { background: var(--bad-soft); color: var(--bad); }
.tag.leave, .tag.holiday { background: var(--info-soft); color: var(--info); }
.tag.not_yet { background: #eef0f4; color: var(--muted); }
.badge { background: var(--dh-orange); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 6px; font-weight: 700; }

/* Lịch tháng */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .wd { text-align: center; font-size: 12px; color: var(--muted); padding-bottom: 2px; }
.cal .d {
  border: 1px solid var(--line); border-radius: 10px; min-height: 62px; padding: 6px; cursor: pointer;
  background: var(--card); font-size: 12px; display: flex; flex-direction: column; gap: 2px;
}
.cal .d.empty { visibility: hidden; }
.cal .d .n { font-weight: 700; font-size: 14px; }
.cal .d.today { border-color: var(--brand); }
.cal .d.sel { box-shadow: 0 0 0 2px var(--brand); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.month-nav { display: inline-flex; align-items: center; gap: 8px; }
.dot.normal, .dot.exempt { background: var(--good); }
.dot.late, .dot.early, .dot.late_early, .dot.working { background: var(--warn); }
.dot.missing, .dot.absent { background: var(--bad); }
.dot.leave, .dot.holiday { background: var(--info); }
.dot.off, .dot.future, .dot.not_yet { background: #cfd5e0; }
.cal .d .lbl { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .cal { gap: 4px; }
  .cal .d { min-height: 48px; padding: 4px; }
  .cal .d .lbl { display: none; }
}
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }

/* Bảng */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 12px; color: var(--muted); font-weight: 600; background: #fafbfd; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: #fafbfd; }
td.num, th.num { text-align: right; }

/* Biểu mẫu */
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input, select, textarea {
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: #fff; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
input[type=checkbox], input[type=radio] { width: auto; }
.check { display: flex !important; align-items: center; gap: 8px; color: var(--text) !important; font-weight: 500 !important; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs button { border: 1px solid var(--line); background: var(--card); padding: 7px 14px; border-radius: 999px; cursor: pointer; font-weight: 600; }
.tabs button.active { background: var(--dh-grad-btn); color: #fff; border-color: transparent; }

.list-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.list-item:last-child { border-bottom: none; }
.list-item .title { font-weight: 600; }

/* Đăng nhập */
.login { max-width: 380px; margin: 10vh auto; padding: 0 16px; }
.login .logo { font-size: 26px; font-weight: 800; text-align: center; margin-bottom: 4px; }
.login .sub { text-align: center; color: var(--muted); margin-bottom: 22px; }

/* Hộp thoại và thông báo */
.modal-bg { position: fixed; inset: 0; background: rgba(20, 26, 40, .45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal { background: var(--card); border-radius: 14px; padding: 20px; width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; }
.modal h3 { margin: 0 0 14px; }
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: #1d2433; color: #fff;
  padding: 10px 18px; border-radius: 10px; z-index: 60; font-size: 14px; max-width: 90vw;
}
.toast.err { background: var(--bad); }
.empty-state { text-align: center; color: var(--muted); padding: 26px 0; }
.photo { max-width: 100%; border-radius: 10px; margin-top: 8px; }

/* Lương */
table.slip td { white-space: normal; }
table.slip tr.sec td { background: #fafbfd; font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
table.slip tr.total td { font-size: 17px; font-weight: 800; color: var(--brand); border-bottom: none; padding-top: 12px; }
tr.sum td { font-weight: 700; background: #fafbfd; }
.main.wide { max-width: 1500px; }
.modal.wide { max-width: 680px; }

/* Bảng theo dõi ứng viên */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.kanban .col { background: #f4f6fa; border-radius: var(--radius); padding: 10px; min-height: 120px; max-height: 72vh; overflow-y: auto; }
.kanban .col h4 { position: sticky; top: -10px; background: inherit; padding: 4px 0; }
.kanban .col h4 { margin: 0 0 8px; font-size: 14px; display: flex; gap: 6px; align-items: center; }
.kanban .cand { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; margin-bottom: 8px; cursor: pointer; font-size: 13px; }
.kanban .cand:hover { border-color: var(--brand); }
.kanban .cand .nm { font-weight: 600; font-size: 14px; }
.kanban .col.working { background: var(--good-soft); }
.kanban .col.dropped { background: var(--bad-soft); }
.kanban .col.ended { background: #eef0f4; }
.ms { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.ms span { font-size: 11px; border-radius: 6px; padding: 1px 5px; background: #eef0f4; color: #889; }
.ms span.reached { background: var(--good-soft); color: var(--good, #1a7f4b); }
.ms span.paid { background: var(--brand); color: #fff; }
.qr-box { text-align: center; }
.qr-box svg, .qr-box img { width: 260px; max-width: 100%; height: auto; }
.progress { height: 8px; background: #eef0f4; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress > div { height: 100%; background: var(--brand); }
.top3 { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.top3:last-child { border-bottom: none; }
.top3 .medal { font-size: 22px; width: 30px; text-align: center; }
@media (max-width: 760px) { .kanban { grid-template-columns: repeat(5, 78vw); } }

/* Các bước duyệt đơn */
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; }
.step { padding: 1px 8px; border-radius: 999px; background: #eef0f4; color: var(--muted); }
.step.approved { background: var(--good-soft); color: var(--good); }
.step.pending { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.step.rejected { background: var(--bad-soft); color: var(--bad); }
.steps .arrow { color: var(--muted); }
.alert-list .list-item { padding: 6px 0; }
.bars .bar-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0; }
.bars .bar-row .lbl { width: 130px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .bar-row .track { flex: 1; height: 10px; background: #eef0f4; border-radius: 6px; overflow: hidden; }
.bars .bar-row .fill { height: 100%; background: var(--brand); border-radius: 6px; }
.bars .bar-row .val { width: 28px; text-align: right; font-weight: 600; }


/* ---------- Giao diện mới (theo mẫu MANPOWER PRO sếp chọn) ---------- */
:root {
  --bg: #f5f7ff;
  --line: #e7eaf3;
  --brand: #3456c4;
  --brand-dark: #050a6b;
  --brand-soft: #e9f3fb;
  /* Màu theo logo DH CONNECT (sếp duyệt 30/10/2026) */
  --dh-navy: #050a6b; --dh-blue: #4169ce; --dh-teal: #3cc6cf; --dh-orange: #f26a1b; --dh-gray: #5f6364;
  --dh-grad: linear-gradient(120deg, #050a6b 0%, #4169ce 55%, #3cc6cf 100%);
  --dh-grad-btn: linear-gradient(120deg, #2b45b8, #4169ce 60%, #36b3c9);
  --radius: 16px;
  --shadow: 0 1px 2px rgba(16, 24, 64, .04), 0 4px 16px rgba(16, 24, 64, .05);
}
body { font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.card, .stat { border-color: #edf0f7; box-shadow: var(--shadow); }
.btn { border-radius: 10px; }
.btn.primary { background: var(--dh-grad-btn); border-color: transparent; box-shadow: 0 3px 10px rgba(65, 105, 206, .3); }
.btn.primary:hover { filter: brightness(1.06); }
.page-title { font-weight: 800; letter-spacing: -.01em; }
.card h3 { font-weight: 700; }

/* Thanh menu dọc: thu gọn còn biểu tượng */
.sidebar { width: 248px; display: flex; flex-direction: column; padding: 18px 12px; transition: width .2s ease; overflow: hidden; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 20px; white-space: nowrap; }
.brand .logo { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; color: #fff;
  background: var(--dh-grad); box-shadow: 0 4px 12px rgba(65, 105, 206, .35); }
.brand .brand-logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.layout.collapsed .brand .brand-logo { display: none; }
.brand .logo.small-only { display: none; }
.layout.collapsed .brand .logo.small-only { display: grid; }
.brand .logo .svg { width: 22px; height: 22px; }
.brand .lbl { font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.nav { flex: 1; overflow-y: auto; overflow-x: hidden; }
.nav a { padding: 10px 12px; white-space: nowrap; color: #4b5368; font-weight: 500; }
.nav a:hover { background: #f4f5fb; }
.nav a.active { background: linear-gradient(90deg, #e3f6f8, #eaf0fc); color: var(--dh-navy); font-weight: 700; box-shadow: inset 3px 0 0 var(--dh-teal); }
.svg { width: 20px; height: 20px; flex-shrink: 0; display: block; }
.nav a .ico { display: grid; place-items: center; width: 22px; }
.side-foot { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.me-chip { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; color: var(--text); white-space: nowrap; }
.me-chip:hover { background: #f4f5fb; }
.me-chip strong { display: block; font-size: 13px; }
.me-chip small { display: block; color: var(--brand); font-size: 12px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: inline-grid; place-items: center; font-weight: 700; font-size: 13px;
  color: var(--brand-dark); background: linear-gradient(135deg, #e3f6f8, #d6e2fa); }
.avatar.sm { width: 30px; height: 30px; font-size: 11px; }
.collapse-btn { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: none; border-radius: 10px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.collapse-btn:hover { background: #f4f5fb; color: var(--brand); }
.collapse-btn .svg { transition: transform .2s; }
.layout.collapsed .sidebar { width: 76px; }
.layout.collapsed .lbl { display: none; }
.layout.collapsed .brand { justify-content: center; padding-left: 0; padding-right: 0; }
.layout.collapsed .nav a, .layout.collapsed .collapse-btn, .layout.collapsed .me-chip { justify-content: center; }
.layout.collapsed .nav a .badge { position: absolute; margin: -22px 0 0 22px; }
.layout.collapsed .nav a { position: relative; }
.layout.collapsed .collapse-btn .svg { transform: rotate(180deg); }
.main { max-width: 1240px; }

/* Tổng quan: băng chào mừng và thẻ số liệu */
.hero { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; color: #fff; border-radius: 20px;
  padding: 26px 28px; margin-bottom: 18px; background: var(--dh-grad); box-shadow: 0 10px 30px rgba(5, 10, 107, .25); }
.hero h1 { margin: 10px 0 6px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.hero p { margin: 0; opacity: .9; max-width: 640px; }
.hero .hl { color: #b9f3f6; }
.hero-date { display: inline-block; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .12); padding: 4px 12px; border-radius: 999px; }
.hero-date::first-letter { color: #34d399; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn.hero-btn { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3); color: #fff; padding: 12px 18px; font-weight: 700; border-radius: 12px; }
.btn.hero-btn.light { background: #fff; color: var(--brand-dark); border-color: #fff; }
.stat.kpi { position: relative; padding: 18px 18px 16px; color: var(--text); }
.stat.kpi .label { text-transform: uppercase; letter-spacing: .04em; font-size: 12px; font-weight: 700; padding-right: 44px; }
.stat.kpi .value { font-size: 30px; font-weight: 800; margin: 10px 0 6px; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stat.kpi .value .of { font-size: 18px; color: var(--muted); font-weight: 600; margin-left: -6px; }
.stat.kpi .value.brand { color: var(--dh-blue); }
.stat.kpi .value.warn { color: var(--warn); }
.stat.kpi .value .tag { font-size: 11px; }
.stat.kpi:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(16, 24, 64, .08); }
.stat.kpi.attention { background: #fffbeb; border-color: #fde68a; }
.chip { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.chip.good { background: var(--good-soft); color: var(--good); }
.chip.brand { background: var(--brand-soft); color: var(--brand); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.progress > div { background: linear-gradient(90deg, var(--dh-blue), var(--dh-teal)); }
.list-item { background: #fafbff; border: 1px solid #eef0f7; border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.list-item:last-child { border-bottom: 1px solid #eef0f7; }
.top3 { background: #fafbff; border: 1px solid #eef0f7; border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; }
.top3:first-child { background: #fffbeb; border-color: #fcd34d; }
.top3:last-child { border-bottom: 1px solid #eef0f7; }

@media (max-width: 760px) {
  .sidebar { display: none; }
  .hero { padding: 20px; }
  .hero-actions .btn { flex: 1; text-align: center; }
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat.kpi { padding: 14px; }
  .stat.kpi .label { font-size: 11px; padding-right: 38px; }
  .stat.kpi .value { font-size: 22px; }
  .chip { width: 32px; height: 32px; top: 10px; right: 10px; }
  .hero h1 { font-size: 22px; }
  .bottom-nav a .ico { display: grid; place-items: center; font-size: inherit; height: 24px; }
  .bottom-nav a .svg { width: 22px; height: 22px; }
}

/* Dải tài chính trên Tổng quan */
.stat .value.brand { color: var(--brand); }
.stat .value.warn { color: var(--warn); }
.stat .value.good { color: var(--good); }

/* Biểu đồ xếp hạng tư vấn tuyển dụng */
.modal.board { max-width: 920px; }
.bar-row { display: grid; grid-template-columns: 200px 1fr 260px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eef0f6; }
.bar-name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.bar-rank { width: 24px; height: 24px; border-radius: 50%; background: #eef0ff; color: var(--brand); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bar-row:nth-child(-n+3) .bar-rank { background: var(--brand); color: #fff; }
.bar-track { position: relative; height: 14px; background: #f1f3f9; border-radius: 99px; }
.bar-fill { height: 100%; border-radius: 99px; min-width: 2px; }
.bar-goal { position: absolute; right: 0; top: -4px; bottom: -4px; border-right: 2px dashed #9aa3b8; }
@media (max-width: 720px) { .bar-row { grid-template-columns: 1fr; gap: 4px; } }
.bar-row[data-uid] { cursor: pointer; } .bar-row[data-uid]:hover { background: #f7f8ff; }

/* Menu gom nhóm theo phòng ban, bấm tên nhóm để mở / đóng */
.nav-group { margin-top: 6px; }
.nav-head { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; cursor: pointer; padding: 10px 12px 6px; font: inherit;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a91a6; text-align: left; border-radius: 10px; white-space: nowrap; }
.nav-head:hover { color: var(--brand); background: #f7f8ff; }
.nav-head .chev { margin-left: auto; font-size: 16px; line-height: 1; transition: transform .15s; }
.nav-head .badge { margin-left: auto; }
.nav-head .badge + .chev { margin-left: 6px; }
.nav-group.open .chev { transform: rotate(90deg); }
.nav-group.open .nav-head .badge { display: none; }
.nav-body { display: none; padding-left: 6px; }
.nav-group.open .nav-body { display: block; }
.layout.collapsed .nav-head { display: none; }
.layout.collapsed .nav-body { display: block; padding-left: 0; border-top: 1px solid #eef0f6; padding-top: 6px; }

/* Nút X đóng cửa sổ (mọi cửa sổ bật lên) */
.modal { position: relative; }
.modal-x { position: sticky; top: 0; float: right; margin: -6px -6px 0 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f1f3f9; color: #4b5368;
  font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 2; }
.modal-x:hover { background: #fee2e2; color: #b91c1c; }

/* Việc cần làm */
.task { display: flex; gap: 10px; align-items: flex-start; padding: 8px 4px; border-bottom: 1px solid #eef0f6; cursor: pointer; font-weight: 400; }
.task input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.task.done .title { text-decoration: line-through; color: #8a91a6; }

/* Quản lý lao động: các mốc 3/7/15/30/60/90 ngày */
.ms-row { display: flex; gap: 3px; flex-wrap: nowrap; }
.ms-chip { display: inline-block; min-width: 24px; text-align: center; font-size: 11px; font-weight: 700; padding: 2px 4px; border-radius: 6px; background: #eef0f6; color: var(--muted); }
.ms-chip.reached { background: var(--warn-soft); color: var(--warn); }
.ms-chip.paid { background: var(--good-soft); color: var(--good); }
.ms-chip.flow { background: #e8f0ff; color: #2f5bd3; }
a.ms-chip { text-decoration: none; cursor: pointer; }
a.ms-chip:hover { outline: 2px solid currentColor; }

/* Thư viện DH CONNECT */
.lib { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.lib-side { position: sticky; top: 12px; }
.lib-cats { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.lib-cats a { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 500; }
.lib-cats a span { margin-left: auto; font-size: 12px; color: var(--muted); }
.lib-cats a:hover { background: var(--brand-soft); }
.lib-cats a.active { background: var(--brand); color: #fff; }
.lib-cats a.active span { color: #fff; }
.doc-item { display: block; padding: 10px 12px; border: 1px solid #eef0f7; border-radius: 12px; margin-bottom: 8px; background: #fafbff; color: var(--text); text-decoration: none; }
.doc-item:hover { border-color: var(--brand); }
.doc-item .row { gap: 6px; }
.doc-body { line-height: 1.6; }
.doc-body h3 { font-size: 16px; margin: 16px 0 6px; }
.doc-body h4 { font-size: 14px; margin: 12px 0 4px; }
.doc-body p { margin: 6px 0; }
.doc-body ul, .doc-body ol { margin: 6px 0; padding-left: 22px; }
.attention-box { background: #fffbeb; border-color: #fde68a; }
.attention-box a { margin: 0 2px; }
@media (max-width: 760px) { .lib { grid-template-columns: 1fr; } .lib-side { position: static; } }

/* Xuất Excel theo tùy chọn */
th.pick, td.pick { width: 34px; text-align: center; padding-left: 6px; padding-right: 6px; }
th.pick input, td.pick input { width: 16px; height: 16px; cursor: pointer; margin: 0; }
.export-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 6px 0 10px; }
.export-cols fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px 8px; margin: 0; }
.export-cols legend { padding: 0 4px; font-weight: 600; }
.export-cols label.check { margin: 3px 0; font-size: 13px; }

/* Hồ sơ người lao động: hiện đủ thông tin, không phải kéo ngang */
.info-h { margin: 14px 0 8px; }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
@media (max-width: 640px) { .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.info-f { min-width: 0; margin-top: 2px; }
.info-k { font-size: 12px; color: var(--muted); }
.info-v { font-weight: 500; overflow-wrap: anywhere; }
.ep-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; display: grid; gap: 10px; }
.ms-row.wrap { flex-wrap: wrap; gap: 4px; }
.labor-table td { vertical-align: top; }
.labor-table td.small div { margin-top: 2px; }
.labor-table td.nowrap { white-space: nowrap; }
.labor-table .ms-row { flex-wrap: wrap; max-width: 130px; }
.labor-table th, .labor-table td { white-space: normal; }

/* Chi thưởng mốc: các bước của đợt chi */
.flow-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.flow-steps div { display: flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 5px; font-size: 13px; }
.flow-steps span { width: 22px; height: 22px; border-radius: 50%; background: var(--dh-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }

/* Tiến độ duyệt đơn chi thưởng */
.flow-mini { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; }
.flow-mini .fs { padding: 2px 7px; border-radius: 999px; background: #eef0f6; color: #667; white-space: nowrap; }
.flow-mini .fs.done { background: #e3f7ec; color: #15803d; }
.flow-mini .fs.current { background: #fff4e0; color: #b45309; font-weight: 600; }
.flow-mini .fs.skipped { opacity: .5; text-decoration: line-through; }
.flow-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 12px 0 4px; }
.flow-big .fb { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 8px; font-size: 13px; }
.flow-big .fb-dot { flex: 0 0 22px; height: 22px; border-radius: 50%; background: #eef0f6; color: #667; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.flow-big .fb.done .fb-dot { background: #16a34a; color: #fff; }
.flow-big .fb.current { border-color: #f59e0b; background: #fffaf0; }
.flow-big .fb.current .fb-dot { background: #f59e0b; color: #fff; }
.flow-big .fb.skipped { opacity: .5; }
@media (max-width: 760px) { .flow-big { grid-template-columns: 1fr; } }

/* Chi tiết đơn (kiểu Lark): bấm vào đơn để mở, tiến trình duyệt dạng dọc, đối chiếu từ gốc. */
.rv-click { cursor: pointer; }
.list-item.rv-click:hover { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(65, 105, 206, .1); }
tr.rv-click:hover td { background: #f6f7fd; }
.rv-box { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.rv-fact { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: #f8fafc; border: 1px dashed var(--line); font-size: 13px; }
.rv-recent { display: inline-flex; align-items: center; gap: 4px; margin: 2px 8px 2px 0; font-size: 13px; }
.rv-act { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.rv-act textarea { width: 100%; margin: 4px 0 8px; }
.tl { position: relative; margin: 4px 0 0; }
.tl-i { display: flex; gap: 10px; position: relative; padding-bottom: 12px; }
.tl-i:not(:last-child)::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--line); }
.tl-dot { flex: 0 0 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: #eef0f6; color: var(--muted); }
.tl-i.done .tl-dot { background: var(--good); color: #fff; }
.tl-i.bad .tl-dot { background: var(--bad); color: #fff; }
.tl-i.current .tl-dot { background: var(--warn-soft); color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.tl-i.skipped .tl-dot { background: #f1f3f9; }
.tl-b { flex: 1; min-width: 0; padding-top: 2px; }
.tl-note { margin-top: 4px; padding: 6px 10px; background: #f8fafc; border-left: 3px solid var(--line); border-radius: 6px; font-size: 13px; }
tr.ms-hit td { background: #fffbeb; }
tr.ms-focus td { background: #fde68a; font-weight: 600; }
.ms-chip.focus { outline: 2px solid var(--warn); }

/* Dòng nút cuối cửa sổ luôn nổi ở đáy. */
.modal-foot { position: sticky; bottom: -20px; z-index: 3; background: var(--card); margin: 12px -20px -20px !important; padding: 12px 20px; border-top: 1px solid var(--line); box-shadow: 0 -8px 16px rgba(20, 26, 40, .06); border-radius: 0 0 14px 14px; }
form.modal-foot .row { margin: 0; }
.pp-card { display: block; cursor: pointer; color: inherit; text-decoration: none; }
.pp-card:hover { border-color: var(--brand); }
.pp-price { margin: 8px 0 4px; }
.pp-price .value { font-size: 24px; display: inline; }

/* Thanh tiến trình 5 bước của người lao động; bước có nhiều lựa chọn hiện từng lựa chọn bên dưới */
.funnel { display: flex; align-items: stretch; gap: 4px; margin-bottom: 10px; overflow-x: auto; }
.funnel .fn { flex: 1 1 0; min-width: 130px; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.funnel .fn-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.funnel .fn-n { font-size: 22px; font-weight: 800; color: var(--brand); line-height: 1; }
.funnel .fn-t { font-size: 13px; font-weight: 700; color: var(--text, #222); }
.funnel .fn.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft, #e6e8ff); }
.funnel .fn-subs { display: flex; flex-wrap: wrap; gap: 4px; }
.funnel .fn-sub { border: 1px solid var(--line); background: #f6f7fb; border-radius: 999px; padding: 2px 8px; font-size: 11px; cursor: pointer; color: var(--muted); }
.funnel .fn-sub b { color: var(--brand); }
.funnel .fn-sub.bad b { color: var(--bad); }
.funnel .fn-sub.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.funnel .fn-sub.on b { color: #fff; }
.funnel .fn-arrow { align-self: center; color: var(--muted); font-size: 20px; }
.stage-grp { margin-bottom: 8px; }
.stage-grp .stage-pick { margin-top: 4px; }
.tabs button.warn:not(.active) { border-color: var(--warn); color: var(--warn); }
.stage-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.stage-opt { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; font-weight: 600; }
.stage-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft, #eef0ff); }
.stage-opt.bad:has(input:checked) { border-color: var(--bad); background: #fff0f0; }
.ep-log { margin-top: 8px; }
.ep-log summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--brand); }
@media (max-width: 700px) { .funnel { flex-wrap: wrap; } .funnel .fn { min-width: 0; flex: 1 1 40%; } .funnel .fn-arrow { display: none; } }

/* Dự án / nhà máy */
.pj-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.pj-prog .bar { height: 6px; border-radius: 3px; background: #eef0f6; overflow: hidden; margin: 4px 0; }
.pj-prog .bar span { display: block; height: 100%; background: var(--brand); }
.info-v.pre { white-space: pre-wrap; }

/* Ô nhập ngày kiểu Việt Nam ngày/tháng/năm (vn-date.js) */
.vn-date { position: relative; display: inline-block; vertical-align: middle; }
label .vn-date, .form .vn-date { display: block; }
.vn-date > input[type=text] { padding-right: 62px; }
label .vn-date > input[type=text], .form .vn-date > input[type=text] { width: 100%; }
.vn-date-btn { position: absolute; top: 50%; transform: translateY(-50%); right: 6px; border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; padding: 4px; border-radius: 6px; color: var(--muted); }
.vn-date-btn:hover { background: #eef0f7; }
.vn-date-x { right: 32px; font-size: 18px; display: none; }
.vn-date.has .vn-date-x { display: block; }
.vn-date-orig { position: absolute !important; right: 0; bottom: 0; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; padding: 0 !important; border: 0 !important; }
.vn-date.bad > input[type=text] { border-color: var(--bad, #dc2626); background: #fff5f5; }
/* Phiếu xác minh thưởng mốc: dòng tick / chọn kết quả */
.form .check-line { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 4px 0; }
.form .check-line input { width: auto; margin: 0; }
.ck-table .ck-head td { border-top: 1px solid var(--line, #e5e7eb); }
.ck-table .ck-sub td { background: var(--bg); font-size: 13px; white-space: normal; }
.ck-table td:first-child { white-space: normal; min-width: 180px; }
.ck-table td:last-child, .ck-table .btn { white-space: nowrap; }
.ck-arrow { display: inline-block; width: 14px; color: var(--brand); }

/* ---------- Làm gọn mọi trang (page-tools.js, 29/10/2026) ---------- */
/* Ô tìm kiếm, ô chọn nằm cùng một hàng, không giãn hết chiều ngang */
.row > input:not([type=checkbox]):not([type=radio]):not([type=file]), .row > select { width: auto; }
.row > input[type=search], .row > input[placeholder*="Tìm"], .row > input[placeholder*="🔍"] { flex: 1 1 220px; min-width: 180px; }
/* 1. Thu gọn khung */
/* Mẫu C (31/10/2026): 3 nút tròn bên phải tiêu đề khung */
.tt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h3.tt-head > .tt-tools, .tt-head > .tt-tools { margin-left: auto; }
.tt-tools, .tt-pagebar { display: inline-flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.tt-ic { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid var(--line, #dfe3ee); background: #f4f7fd; color: var(--dh-blue, #4169ce); font-size: 14px; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; font-weight: 600; transition: background .15s, color .15s; }
.tt-ic:hover { background: var(--dh-blue, #4169ce); color: #fff; border-color: var(--dh-blue, #4169ce); }
.tt-ic.h:hover { background: #d64545; border-color: #d64545; }
.tt-ic.cfg.on { background: var(--dh-orange, #f26a1b); color: #fff; border-color: var(--dh-orange, #f26a1b); }
.tt-pagebar { position: relative; margin-left: auto; }
.tt-pagerow { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.page-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tt-cfg { position: absolute; right: 0; top: 36px; z-index: 60; background: #fff; border: 1px solid var(--line, #dfe3ee); border-radius: 12px; box-shadow: 0 10px 30px rgba(5,10,107,.15); padding: 12px 14px; min-width: 260px; max-height: 60vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.tt-cfg label { display: flex; gap: 8px; align-items: center; cursor: pointer; font-weight: 500; }
.tt-cfg label input { width: auto; }
.tt-cfg-n { color: var(--muted); font-size: 12px; margin-top: 4px; }
.card.tt-hidden { display: none !important; }
.tt-shade { position: fixed; inset: 0; background: rgba(5,10,40,.45); z-index: 90; }
.card.tt-full { position: fixed !important; inset: 4vh 4vw; z-index: 91; overflow: auto; margin: 0 !important; box-shadow: 0 20px 60px rgba(0,0,0,.3); grid-column: auto !important; }
.card.tt-full .tt-ic.z { background: var(--dh-blue, #4169ce); color: #fff; }
body.tt-noscroll { overflow: hidden; }
@media (max-width: 640px) { .card.tt-full { inset: 0; border-radius: 0; } .tt-ic { width: 32px; height: 32px; } }
.card.tt-folded > :not(.tt-head) { display: none !important; }
.card.tt-folded > .tt-head { margin-bottom: 0 !important; }
.card.tt-folded > h3.tt-head { margin: 0; }
.card.tt-folded { padding-top: 12px; padding-bottom: 12px; }
/* 2–4. Bảng dài */
.tt-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.tt-bar .tt-q { flex: 1 1 220px; min-width: 180px; width: auto; padding: 7px 10px; }
.tt-bar .tt-g { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); font-weight: 600; }
.tt-bar .tt-g select { width: auto; padding: 7px 10px; }
.tt-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 8px; }
.tt-foot:empty { display: none; }
tr.tt-more, tr.tt-filtered { display: none; }
tr.tt-grp td { background: #f4f6fb; cursor: pointer; font-size: 13px; }
tr.tt-grp:hover td { background: #eceffa; }
.tt-arrow { display: inline-block; width: 14px; color: var(--brand); }
.tt-count { color: var(--muted); margin: 0 8px; }
.tt-sum { color: var(--muted); margin-right: 10px; }
/* 5. Hiển thị gọn */
body.compact th, body.compact td { padding: 5px 8px; }
body.compact .card { padding: 12px 14px; margin-bottom: 10px; }
body.compact .card h3 { margin-bottom: 8px; }
body.compact .stat { padding: 10px 12px; }
body.compact .page-title { margin-bottom: 8px; }
body.compact .grid { gap: 8px; }
body.compact .small { font-size: 11.5px; }
/* Chuyển trang 1 2 3... (50 dòng mỗi trang) */
.pager { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pg-btn { min-width: 34px; height: 32px; padding: 0 10px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; font-size: 13px; }
.pg-btn:hover:not([disabled]) { border-color: var(--brand); color: var(--brand); }
.pg-btn.on, .pg-btn.on:hover:not([disabled]) { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.pg-btn[disabled] { opacity: .4; cursor: default; }
.pg-gap { padding: 0 4px; color: var(--muted); }
.pg-info { margin-left: 8px; color: var(--muted); font-size: 13px; }

/* Xét duyệt › Tạo yêu cầu (xếp như Lark, nhóm thu gọn được) */
.ty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.ty-sug { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ty-card { display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); cursor: pointer; font: inherit; font-size: 14px; color: inherit; min-height: 40px; line-height: 1.3; }
.ty-card:hover { border-color: var(--brand); background: var(--brand-soft); }
.ty-card[hidden] { display: none; }
.ty-ico { font-size: 17px; width: 22px; text-align: center; flex: none; }
.ty-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: start; }
.ty-cats { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 2px; }
.ty-cats button { text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; color: inherit; cursor: pointer; }
.ty-cats button:hover { background: var(--bg); }
.ty-cats button.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.ty-list section { border-bottom: 1px solid var(--line); scroll-margin-top: 10px; }
.ty-list section:last-of-type { border-bottom: 0; }
.ty-list section[hidden] { display: none; }
.ty-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 4px; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; cursor: pointer; text-align: left; }
.ty-head:hover { color: var(--brand); }
.ty-chev { display: inline-block; transition: transform .15s; color: var(--muted); }
.ty-list section.open .ty-chev { transform: rotate(90deg); }
.ty-body { display: none; padding: 0 0 12px; }
.ty-list section.open .ty-body { display: grid; }
@media (max-width: 900px) { .ty-sug { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .ty-wrap { grid-template-columns: 1fr; }
  .ty-cats { position: static; flex-direction: row; flex-wrap: wrap; }
}
.flow-prev { border: 1px dashed var(--line, #e5e7eb); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.req { color: var(--bad, #dc2626); }

/* Bảng Hồ sơ nhân viên: ô chọn, Mã NV và Họ tên đứng yên khi kéo ngang (vị trí tính bằng JS) */
.hs-table .pick, .hs-table .hs-stick, .hs-table .hs-stick2 { position: sticky; background: var(--card); z-index: 1; }
.hs-table .hs-stick2 { box-shadow: 1px 0 0 var(--line); }
.hs-table td { white-space: nowrap; }

/* Quay lại + dòng chỉ đường (sếp duyệt 29/10/2026) */
.crumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.crumb-trail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); min-width: 0; }
.crumb-trail a { color: var(--brand); text-decoration: none; }
.crumb-trail a:hover { text-decoration: underline; }
.crumb-trail i { font-style: normal; opacity: .6; }
.crumb-trail b { color: var(--text, inherit); font-weight: 600; }

/* Nhân sự chỉ xem Tuyển dụng & Vận hành (sếp chốt 30/10/2026): ẩn nút thêm / sửa / chuyển bước / làm đơn / xác minh. */
body.tdvh-ro :is(.tdvh-act, #pj-new, #pj-edit, #pj-price, #pj-price2, [data-phase], [data-sg], [data-next], #bn-new, [data-resolve], #bs-ok, #bs-drop, #bs-make, [data-verify], [data-reopen]),
body.tdvh-ro[data-route="ung-vien"] :is(#add, #ts) { display: none !important; }


/* Trang đăng nhập (30/10/2026): 2 cột trên máy tính (khung thương hiệu + ô đăng nhập), 1 cột trên điện thoại. */
.login2 { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); }
.login-brand { background: var(--dh-grad); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px; }
.login-mark { background: #fff; border-radius: 20px; padding: 22px 28px; box-shadow: 0 12px 40px rgba(5, 10, 107, .35); display: grid; place-items: center; }
.login-mark img { width: 280px; max-width: 70vw; height: auto; display: block; }
.login-slogan { font-size: 18px; font-weight: 600; opacity: .95; letter-spacing: .3px; }
.login-name { font-size: 38px; font-weight: 800; letter-spacing: .5px; }
.login-side { display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.login-card { width: 100%; max-width: 400px; padding: 28px; }
.login-card h2 { margin: 0 0 16px; font-size: 22px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; font-size: 16px; opacity: .55; padding: 6px; }
.pw-eye.on { opacity: 1; }
.form .chk-line { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 500; color: var(--text, inherit); cursor: pointer; }
.form .chk-line input { width: auto; margin: 0; }
.login-err { color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
@media (max-width: 760px) {
  .login2 { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-brand { flex-direction: row; padding: 22px 16px; gap: 12px; }
  .login-mark { padding: 12px 16px; border-radius: 14px; }
  .login-mark img { width: 170px; }
  .login-slogan { display: none; }
  .login-side { align-items: flex-start; padding-top: 22px; }
}
.login-mark svg { width: 56%; height: 56%; stroke: #fff; }

/* Thanh lọc dùng chung */
.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 10px; background: var(--brand-soft); border-radius: 12px; }
.fbar-t { font-weight: 700; font-size: 13px; color: var(--brand-dark); }
.fbar-t b { background: var(--dh-orange); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; }
.fbar select, .fbar input[type=search] { width: auto; min-width: 150px; max-width: 240px; padding: 6px 10px; font-size: 13px; }
.fbar input[type=search] { flex: 1 1 200px; max-width: 320px; }
.fbar select.on { border-color: var(--brand); background: #fff; font-weight: 600; }
.fbar .fbar-c { font-size: 13px; margin: 0; }
@media (max-width: 700px) { .fbar select, .fbar input[type=search] { flex: 1 1 45%; max-width: none; min-width: 0; } }

/* Nút chọn thời gian gọn (Trung tâm tuyển dụng) */
.pp-wrap { position: relative; display: inline-block; }
.pp-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; display: flex; gap: 14px; background: var(--card, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 64, .16); padding: 12px; min-width: 420px; }
.pp-list { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow: auto; padding-right: 10px; border-right: 1px solid var(--line, #e5e7eb); min-width: 150px; }
.pp-list label { display: flex; align-items: center; gap: 8px; padding: 6px 4px; cursor: pointer; font-size: 14px; white-space: nowrap; }
.pp-list input { width: auto; margin: 0; }
.pp-right { display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
@media (max-width: 600px) { .pp-pop { position: fixed; left: 16px; right: 16px; top: 80px; min-width: 0; flex-direction: column; } .pp-list { border-right: 0; max-height: 200px; } }

/* Dashboard Trung tâm tuyển dụng */
.dash-kpi { padding: 14px 16px 12px; } .dash-kpi .value { margin: 4px 0 2px; font-size: 26px; }
.dash-spark { display: block; width: 100%; height: 26px; margin: 4px 0 2px; }
.dash-up { color: var(--good); font-weight: 600; } .dash-down { color: var(--bad); font-weight: 600; }
.dash-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 14px; margin-bottom: 14px; }
.dash-row3 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.dash-row2 > .card, .dash-row3 > .card { margin: 0; min-width: 0; }
.dash-funnel { display: flex; flex-direction: column; gap: 10px; }
.dash-fstep { display: grid; grid-template-columns: 110px 1fr 46px; gap: 8px; align-items: center; font-size: 13px; }
.dash-ftrack { background: #f1f4fb; border-radius: 8px; }
.dash-fbar { height: 24px; border-radius: 8px; background: linear-gradient(90deg, var(--dh-navy), var(--dh-blue)); color: #fff; font-weight: 700; font-size: 12.5px; display: flex; align-items: center; padding-left: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-fbar.last { background: linear-gradient(90deg, var(--dh-blue), var(--dh-teal)); }
.dash-pct { text-align: right; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dash-chart { width: 100%; height: auto; max-height: 230px; display: block; margin-top: 6px; }
.dash-legend { font-size: 12px; color: var(--muted); } .dash-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.dash-prj { display: flex; flex-direction: column; gap: 12px; } .dash-prj a { color: inherit; text-decoration: none; display: block; }
.dash-bar { height: 8px; background: #eaf0fc; border-radius: 99px; overflow: hidden; margin: 5px 0 3px; } .dash-bar span { display: block; height: 100%; background: var(--dh-grad); border-radius: 99px; }
.dash-rank { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.dash-rank > div { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; }
.dash-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; background: #eaf0fc; color: var(--dh-blue); } .dash-n.top { background: var(--dh-orange); color: #fff; }
.dash-src { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .dash-donut { width: 116px; height: 116px; flex: none; }
.dash-src ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; flex: 1; min-width: 150px; }
.dash-src li { display: grid; grid-template-columns: 12px 1fr auto 38px; gap: 6px; align-items: center; } .dash-src li i { width: 10px; height: 10px; border-radius: 3px; } .dash-src li .muted { text-align: right; font-size: 12px; }
.dash-shade { position: fixed; inset: 0; background: rgba(5, 10, 107, .18); z-index: 60; }
.dash-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--card); z-index: 61; box-shadow: -12px 0 32px rgba(16, 24, 64, .18); padding: 18px; overflow: auto; border-left: 4px solid var(--dh-blue); animation: dashIn .18s ease-out; }
@keyframes dashIn { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dash-drawer { animation: none; } }
@media (max-width: 1100px) { .dash-row2, .dash-row3 { grid-template-columns: 1fr; } }
@media (min-width: 1200px) { body.dash-open .main { margin-right: 480px; } .dash-shade { display: none; } body.dash-open .dash-row2, body.dash-open .dash-row3 { grid-template-columns: 1fr; } body.dash-open .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-drawer th, .dash-drawer td { white-space: normal; }
.dash-hide { display: none !important; }
.dash-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.dash-pod { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: linear-gradient(180deg, #f7f9ff, #fff); }
.dash-pod.p1 { border-color: #f9c9a8; background: linear-gradient(180deg, #fff4ec, #fff); }
.dash-ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--dh-grad); color: #fff; font-weight: 700; font-size: 14px; }
.dash-pod-name { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.dash-medal { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #eaf0fc; color: var(--dh-blue); font-size: 13px; flex: none; }
.dash-pod.p1 .dash-medal { background: var(--dh-orange); color: #fff; } .dash-pod.p2 .dash-medal { background: #9aa6c4; color: #fff; } .dash-pod.p3 .dash-medal { background: #c9925e; color: #fff; }
.dash-pod-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; text-align: center; }
.dash-pod-nums strong { display: block; font-size: 20px; color: var(--dh-navy); font-variant-numeric: tabular-nums; }
.dash-pod-nums span { font-size: 11.5px; color: var(--muted); }
.dash-ranktable td { vertical-align: middle; }
.dash-hbar { display: flex; align-items: center; gap: 8px; } .dash-hbar span { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--dh-blue), var(--dh-teal)); } .dash-hbar b { font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 800px) { .dash-podium { grid-template-columns: 1fr; } }
@media (min-width: 1200px) { body.dash-open .dash-podium { grid-template-columns: 1fr; } }
.dash-ct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
/* Màn hình rộng: trang tổng quan trải hết chiều ngang, các khung sắp theo lưới */
.main.wide { max-width: none; }
.dash-board { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-areas: "f c" "p s" "r r"; }
.dash-board > .card { margin: 0; min-width: 0; }
.da-f { grid-area: f; } .da-c { grid-area: c; } .da-p { grid-area: p; } .da-s { grid-area: s; } .da-r { grid-area: r; }
@media (min-width: 1700px) { .dash-board { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "f c c s" "p r r r"; } .dash-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .dash-board { grid-template-columns: 1fr; grid-template-areas: "f" "c" "p" "s" "r"; } }
/* Mọi trang trải hết chiều ngang màn hình (sếp 30/10/2026) */
.main, .main.wide { max-width: none; }
/* Tương thích mọi thiết bị: cột co giãn, không tràn ngang */
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.card, .stat, .grid > * { min-width: 0; }
select, input, textarea { max-width: 100%; }
@media (max-width: 1100px) { .grid.cols-4, .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } }
/* Trang Ứng viên (phương án A, sếp duyệt 30/10/2026) */
.uv-toolbar { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.uv-toolbar .fbar { flex: 1 1 600px; margin: 0; min-width: 0; }
.uv-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex: none; }
.uv-seg button { border: 0; background: var(--card); padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); }
.uv-seg button.on { background: var(--dh-navy); color: #fff; }
.uv-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.uv-tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; border-top: 4px solid var(--c); color: var(--text); text-decoration: none; }
.uv-tile:hover { box-shadow: 0 6px 18px rgba(16, 24, 64, .08); }
.uv-tile.on { outline: 2px solid var(--dh-blue); }
.uv-tile b { display: block; font-size: 22px; color: var(--c); font-variant-numeric: tabular-nums; line-height: 1.2; }
.uv-tile span { font-size: 12px; color: var(--muted); font-weight: 600; }
.uv-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.p-new { background: #eef2ff; color: #4f46e5; } .p-pv { background: #fef3c7; color: #b45309; } .p-work { background: #dcfce7; color: #15803d; } .p-off { background: #fee2e2; color: #b91c1c; } .p-end { background: #e5e7eb; color: #4b5563; }
.uv-table td { vertical-align: middle; }
.uv-kanban .col { border-top: 4px solid var(--c); }
.uv-kanban .cand { padding: 7px 9px; margin-bottom: 6px; }
.uv-kanban .cand .nm { font-size: 13.5px; }
@media (max-width: 900px) { .uv-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.uv-table .ms { flex-wrap: nowrap; }
.uv-table td:last-child { white-space: nowrap; }
/* Báo cáo tuyển dụng (sếp duyệt 30/10/2026) */
.bc-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.bc-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; border-top: 4px solid var(--c); display: flex; flex-direction: column; gap: 2px; color: var(--text); text-decoration: none; min-width: 0; }
.bc-kpi:hover { box-shadow: 0 6px 18px rgba(16, 24, 64, .1); transform: translateY(-1px); }
.bc-kpi b { font-size: 24px; color: var(--c); font-variant-numeric: tabular-nums; line-height: 1.2; }
.bc-kpi .t { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.bc-kpi .d { font-size: 11.5px; } .bc-kpi .up { color: var(--good); } .bc-kpi .down { color: var(--bad); }
.bc-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "pj ch" "rk pg"; }
.bc-a-pj { grid-area: pj; } .bc-a-ch { grid-area: ch; } .bc-a-rk { grid-area: rk; } .bc-a-pg { grid-area: pg; }
.bc-grid > .card { margin: 0; min-width: 0; }
.bc-pjs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
.bc-pj { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; color: var(--text); text-decoration: none; background: var(--card); min-width: 0; }
.bc-pj:hover { border-color: var(--dh-blue); } .bc-pj.on { outline: 2px solid var(--dh-blue); }
.bc-pj .nm { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-pj .big { font-size: 18px; }
.bc-ph { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: #dcfce7; color: #15803d; align-self: flex-start; } .bc-ph.du_nguoi { background: #e0e7ff; color: #3730a3; } .bc-ph.tam_dung { background: #fef3c7; color: #b45309; } .bc-ph.chuan_bi { background: #f1f5f9; color: #475569; } .bc-ph.ket_thuc { background: #e5e7eb; color: #4b5563; }
.bc-prog { height: 7px; border-radius: 99px; background: var(--bg); overflow: hidden; } .bc-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--dh-blue), var(--dh-teal)); border-radius: 99px; }
.bc-a-ch .sum { display: flex; gap: 22px; margin: 4px 0; } .bc-a-ch .sum div { display: flex; flex-direction: column; } .bc-a-ch .sum b { font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ac-wrap { position: relative; } .ac-svg { display: block; cursor: crosshair; }
.ac-tip { position: absolute; top: 4px; width: 210px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 12px; box-shadow: 0 6px 18px rgba(16, 24, 64, .12); pointer-events: none; }
.leg { display: flex; gap: 14px; font-size: 12px; color: var(--muted); } .leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.bc-mine { background: var(--dh-grad, linear-gradient(120deg, #2b45b8, #4169ce 60%, #36b3c9)); color: #fff; border-radius: 14px; padding: 12px 14px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.bc-mine .big { font-size: 32px; font-weight: 800; line-height: 1; }
.bc-pod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; margin-bottom: 8px; }
.bc-pod div { border: 1px solid var(--line); border-radius: 12px; padding: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.bc-pod div.first { padding-block: 14px; border-color: #f5c542; background: #fffbeb; }
.bc-pod b { font-size: 20px; color: var(--dh-navy); } .bc-pod .m { font-size: 22px; } .bc-pod .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bc-rk td { vertical-align: middle; } .bc-rk tr.me td { background: #fff7ed; font-weight: 600; } .bc-rk tr.me td:first-child { box-shadow: inset 4px 0 0 var(--dh-orange, #f26a1b); }
.bc-hb-row { display: flex; gap: 8px; align-items: center; } .bc-hb { flex: 1; height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; min-width: 70px; } .bc-hb i { display: block; height: 100%; border-radius: 99px; }
.bc-cps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.bc-cp { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; color: var(--text); text-decoration: none; background: var(--card); min-width: 0; }
.bc-cp.now { border-color: var(--dh-orange, #f26a1b); } .bc-cp.on { outline: 2px solid var(--dh-blue); }
.bc-cp .tagh { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: #fff1e8; color: #f26a1b; }
.bc-warn2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bc-warn2 .box { border-radius: 12px; padding: 10px; border: 1px solid; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bc-warn2 .box.ok { background: #f0fdf4; border-color: #bbf7d0; } .bc-warn2 .box.bad { background: #fef2f2; border-color: #fecaca; }
.bc-warn2 .p { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; background: var(--card); border-radius: 8px; padding: 5px 8px; flex-wrap: wrap; }
.bc-warn2 .p.me { outline: 2px solid var(--dh-orange, #f26a1b); }
@media (max-width: 1100px) { .bc-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pj" "ch" "rk" "pg"; } .bc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bc-warn2, .bc-cps { grid-template-columns: minmax(0, 1fr); } .bc-kpis, .bc-pjs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Hoa hồng tuyển dụng (30/10/2026) */
.hh-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); margin-bottom: 12px; }
.hh-grid > .card { margin: 0; min-width: 0; }
.hh-rt { display: grid; grid-template-columns: 120px minmax(0, 1fr) 28px; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 6px; } .hh-rt b { text-align: right; }
.hh-table td { vertical-align: middle; } .hh-table tr[data-rec] { cursor: pointer; } .hh-table tr.me td { background: #fff7ed; }
.hh-table td:last-child { white-space: normal; min-width: 200px; }
.hh-warn { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #fee2e2; color: #b91c1c; margin: 1px 0; white-space: nowrap; cursor: help; }
.hh-grid.one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .hh-grid { grid-template-columns: minmax(0, 1fr); } }
.bc-kpi.on { outline: 2px solid var(--dh-blue); } .hh-rt { cursor: pointer; border-radius: 8px; padding: 2px 4px; } .hh-rt:hover { background: var(--bg); } .hh-rt.on { outline: 2px solid var(--dh-blue); }

/* Tổng quan Trung tâm vận hành (sếp duyệt 30/10/2026) */
.tvh-kpis { display: grid; gap: 14px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tvh-kpis .dash-kpi { margin: 0; }
.tvh-chips { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.tvh-chips b { color: var(--dh-navy); }
.tvh-board { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "x c" "x p" "x k" "b b" "r r"; }
.tvh-board > .card, .tvh-board > .tvh-bonus { margin: 0; min-width: 0; }
.tv-x { grid-area: x; } .tv-c { grid-area: c; } .tv-p { grid-area: p; } .tv-b { grid-area: b; } .tv-r { grid-area: r; } .tv-k { grid-area: k; }
.tvh-ringbox { display: flex; gap: 12px; align-items: center; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: #f6f8fd; }
.tvh-ring { width: 64px; height: 64px; flex: none; }
.tvh-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; }
.tvh-sum > div { border: 1px solid var(--line); border-radius: 10px; padding: 6px 4px; }
.tvh-sum b { display: block; font-size: 18px; color: var(--dh-navy); font-variant-numeric: tabular-nums; } .tvh-sum span { font-size: 11.5px; color: var(--muted); }
.tvh-pchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tvh-pchip { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: inherit; }
.tvh-pchip.on { background: var(--dh-blue); border-color: var(--dh-blue); color: #fff; } .tvh-pchip b { margin-left: 3px; }
.tvh-feed { max-height: 560px; overflow: auto; }
.tvh-feed-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.tvh-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.tvh-dim { opacity: .5; }
.tvh-board > .tvh-bonus { padding: 0; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; }
.tvh-bonus > :not(.tvh-bhead) { margin-left: 18px; margin-right: 18px; }
.tvh-bhead { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 12px 18px; color: #fff; background: linear-gradient(110deg, var(--dh-navy), #1d2a9a 60%, var(--dh-blue)); }
.tvh-bhead a, .tvh-bhead .small { color: #fff; opacity: .9; } .tvh-bonus-link { font-size: 13px; font-weight: 600; }
.tvh-pipe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.tvh-step { --c: var(--dh-blue); --t: #eef3ff; position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 12px; border-radius: 12px; text-decoration: none; color: var(--text, #1b1f3b);
  background: var(--t); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); border-top: 5px solid var(--c); min-width: 0; transition: transform .12s, box-shadow .12s; }
.tvh-step:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16, 24, 64, .12); }
.tvh-step.s-soon { --c: #0f9fb0; --t: #e8f8fa; } .tvh-step.s-check { --c: #4169ce; --t: #edf2fd; } .tvh-step.s-lead { --c: #6d5bd0; --t: #f1effc; }
.tvh-step.s-accounting { --c: #d97706; --t: #fdf4e6; } .tvh-step.s-approving { --c: #050a6b; --t: #eceef8; } .tvh-step.s-paying { --c: #c2410c; --t: #fdefe7; } .tvh-step.s-paid { --c: #15803d; --t: #e9f7ee; }
.tvh-step.zero { --t: #f5f6fa; } .tvh-step.zero .tvh-step-n b { color: #9aa1bb; }
.tvh-step-n { display: flex; align-items: baseline; gap: 5px; } .tvh-step-n b { font-size: 28px; line-height: 1.1; color: var(--c); font-variant-numeric: tabular-nums; } .tvh-step-n small { font-size: 12px; color: var(--muted); }
.tvh-step-t { font-weight: 700; font-size: 13.5px; } .tvh-step-t small { font-weight: 400; color: var(--muted); }
.tvh-step-w { font-size: 12px; color: var(--muted); }
.tvh-late { display: inline-block; align-self: flex-start; font-size: 11.5px; font-weight: 700; color: #b42318; background: #fde8e7; border: 1px solid #f6c3bf; border-radius: 99px; padding: 1px 8px; margin-top: 2px; white-space: nowrap; }
.tvh-arrow { position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center;
  font-style: normal; font-weight: 700; font-size: 13px; color: var(--muted); z-index: 1; line-height: 1; }
.tvh-mine { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; color: #fff; background: linear-gradient(110deg, var(--dh-navy), var(--dh-blue)); border-left: 5px solid var(--dh-orange); }
.tvh-keep { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1700px) { .tvh-board { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "x c p" "x k p" "b b b" "r r r"; } }
@media (max-width: 1300px) { .tvh-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tvh-pipe { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tvh-step:nth-child(4n) .tvh-arrow { display: none; } }
@media (max-width: 1100px) { .tvh-board { grid-template-columns: 1fr; grid-template-areas: "x" "c" "p" "k" "b" "r"; } }
@media (max-width: 640px) { .tvh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tvh-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tvh-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tvh-arrow { display: none; } }

/* Bản nâng cấp Trung tâm vận hành (sếp duyệt 31/10/2026): Bộ lọc 1 thanh cuộn, Chi thưởng 4 cấp, Cập nhật trạng thái, Biểu đồ 3 cột, Dự án & 2 Bảng xếp hạng */
.tvh-ufbar { background: var(--card, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: 14px; padding: 9px 14px; margin: 10px 0 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; box-shadow: 0 2px 10px rgba(15, 23, 42, .03); }
.tvh-ufbar-lbl { font-size: 11.5px; font-weight: 800; color: var(--dh-navy, #050a6b); text-transform: uppercase; letter-spacing: .3px; display: flex; align-items: center; gap: 4px; margin-right: 2px; white-space: nowrap; }
.tvh-ufbar-search { flex: 1; min-width: 210px; position: relative; }
.tvh-ufbar-search input { width: 100%; border: 1px solid var(--line, #dbe2ef); border-radius: 9px; padding: 7px 12px 7px 30px; font: inherit; font-size: 12.5px; background: #f8fafd; color: var(--text); outline: none; }
.tvh-ufbar-search input:focus { border-color: var(--dh-blue); background: #fff; box-shadow: 0 0 0 3px rgba(65, 105, 206, .12); }
.tvh-ufbar-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); font-style: normal; pointer-events: none; }
.tvh-dd { position: relative; user-select: none; }
.tvh-dd-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line, #dbe2ef); border-radius: 9px; padding: 6px 11px; font: inherit; font-size: 12.5px; font-weight: 600; background: #f8fafd; color: var(--text); cursor: pointer; min-width: 155px; transition: .12s; white-space: nowrap; }
.tvh-dd-btn:hover { border-color: #b8c4e0; background: #fff; }
.tvh-dd.active .tvh-dd-btn, .tvh-dd-btn.filtered { border-color: var(--dh-blue); background: #eef4ff; color: var(--dh-blue); font-weight: 700; }
.tvh-dd-arr { font-size: 10px; color: var(--muted); transition: transform .15s; }
.tvh-dd.open .tvh-dd-arr { transform: rotate(180deg); }
.tvh-dd-menu { position: absolute; top: calc(100% + 5px); left: 0; min-width: 250px; max-height: 250px; overflow-y: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 11px; box-shadow: 0 12px 28px rgba(5, 10, 107, .15); padding: 5px; z-index: 95; display: none; }
.tvh-dd.open .tvh-dd-menu { display: block; }
.tvh-dd-menu::-webkit-scrollbar { width: 6px; }
.tvh-dd-menu::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 8px; }
.tvh-dd-menu::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 8px; }
.tvh-dd-grp { font-size: 10.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; padding: 6px 9px 3px; letter-spacing: .3px; }
.tvh-dd-opt { padding: 6px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tvh-dd-opt:hover { background: #f1f5f9; color: var(--dh-blue); }
.tvh-dd-opt.sel { background: var(--dh-blue); color: #fff; font-weight: 700; }
.tvh-dd-opt small { font-size: 11px; opacity: .75; font-weight: 500; }
.tvh-ufbar-reset { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 6px 11px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--muted); transition: .12s; white-space: nowrap; }
.tvh-ufbar-reset:hover { border-color: var(--bad); color: var(--bad); background: #fef2f2; }

/* Bố cục 2 cột chính: Chi thưởng (Trái 1.35fr) & Cập nhật trạng thái (Phải 1fr), và 2 cột dưới */
.tvh-main-grid { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: start; }
.tvh-bottom-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: start; }
.tvh-rank-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; align-items: start; }
.tvh-main-grid > .card, .tvh-bottom-grid > .card, .tvh-rank-grid > .card { margin: 0; min-width: 0; }

/* Khối Chi thưởng tối ưu gọn */
.tvh-bcard { padding: 0; overflow: hidden; border: 1px solid #d8e0f0; }
.tvh-bcard-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 16px; color: #fff; background: linear-gradient(110deg, var(--dh-navy, #050a6b), #1d2a9a 60%, var(--dh-blue, #4169ce)); }
.tvh-bcard-head h3 { margin: 0; font-size: 15.5px; font-weight: 800; color: #fff; }
.tvh-bcard-body { padding: 12px 14px; }
.tvh-bkpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.tvh-bkpi { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; cursor: pointer; transition: .12s; text-decoration: none; color: inherit; display: block; }
.tvh-bkpi:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(5, 10, 107, .08); border-color: var(--dh-blue); }
.tvh-bkpi.k-verify { background: #fdfaf0; border-color: #f5d88c; }
.tvh-bkpi.k-approve { background: #fff8f1; border-color: #f7c997; }
.tvh-bkpi.k-paying { background: #fef5f0; border-color: #f5bfa6; }
.tvh-bkpi.k-paid { background: #f2fbf6; border-color: #a8e4c0; }
.tvh-bkpi-lbl { font-size: 10.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .2px; margin-bottom: 3px; display: flex; justify-content: space-between; align-items: center; }
.tvh-bkpi-main { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.tvh-bkpi-num { font-size: 19px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tvh-bkpi-num small { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.tvh-bkpi-amt { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tvh-bkpi-sub { font-size: 10.5px; color: var(--muted); margin-top: 3px; display: flex; justify-content: space-between; gap: 4px; }

/* Dải 7 bước trên 1 hàng ngang */
.tvh-steps7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.tvh-s7 { border-radius: 9px; padding: 7px 7px; border: 1px solid var(--line); border-top: 3px solid var(--c, var(--dh-blue)); background: var(--t, #f8fafd); cursor: pointer; transition: .12s; min-width: 0; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 1px; }
.tvh-s7:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(5, 10, 107, .09); }
.tvh-s7.on { outline: 2px solid var(--dh-navy); }
.tvh-s7.s-soon { --c: #0f9fb0; --t: #ecfeff; } .tvh-s7.s-check { --c: #4169ce; --t: #eff4ff; } .tvh-s7.s-lead { --c: #6d5bd0; --t: #f3f0ff; }
.tvh-s7.s-accounting { --c: #d97706; --t: #fff9eb; } .tvh-s7.s-approving { --c: #050a6b; --t: #eef0fa; } .tvh-s7.s-paying { --c: #c2410c; --t: #fff2eb; } .tvh-s7.s-paid { --c: #15803d; --t: #edfcf2; }
.tvh-s7.zero { opacity: .65; background: #f8fafc; }
.tvh-s7-top { display: flex; justify-content: space-between; align-items: baseline; gap: 2px; }
.tvh-s7-top b { font-size: 16px; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; line-height: 1.1; }
.tvh-s7-top span { font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 99px; background: rgba(255,255,255,.85); border: 1px solid rgba(0,0,0,.07); color: var(--muted); white-space: nowrap; }
.tvh-s7-amt { font-size: 11px; font-weight: 800; color: var(--dh-navy); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvh-s7-lbl { font-size: 10.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Bảng phân cấp 4 tầng (Toàn công ty ▸ Phòng ban ▸ Đội nhóm ▸ Cá nhân) */
.tvh-tree-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.tvh-tree-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tvh-tree-tbl th { background: #f8fafd; color: var(--muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.tvh-tree-tbl th.num, .tvh-tree-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tvh-tree-tbl td { padding: 7px 8px; border-bottom: 1px solid #eef2f7; vertical-align: middle; }
.tvh-tree-tbl tr:last-child td { border-bottom: 0; }
.tvh-tree-tbl tr.lv-co { background: #f1f5fe; font-weight: 800; }
.tvh-tree-tbl tr.lv-dept { background: #f9fbff; font-weight: 700; }
.tvh-tree-tbl tr.lv-team { background: #fff; font-weight: 600; }
.tvh-tree-tbl tr.lv-mem { background: #fff; font-weight: 500; color: #334155; }
.tvh-tree-tbl tr.clickable { cursor: pointer; transition: background .1s; }
.tvh-tree-tbl tr.clickable:hover td { background: #eef4ff; }
.tvh-tbtn { width: 18px; height: 18px; border-radius: 4px; border: 1px solid #cbd5e1; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; cursor: pointer; margin-right: 5px; color: var(--dh-navy); font-weight: 800; padding: 0; vertical-align: middle; }
.tvh-tbtn:hover { border-color: var(--dh-blue); color: var(--dh-blue); }
.tvh-cell-sub { display: block; font-size: 10px; color: var(--muted); font-weight: 500; }
.tvh-link-hint { font-size: 10.5px; color: var(--dh-blue); font-weight: 700; margin-left: 4px; white-space: nowrap; }

/* Khung Xem sâu (Drill-down) + Nút ← Quay lại nổi bật */
.tvh-drill-box { background: #f8faff; border: 2px solid var(--dh-blue); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; animation: tvhFade .15s ease-out; }
@keyframes tvhFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.tvh-drill-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #dbe4f3; }
.tvh-back-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--dh-navy, #050a6b); color: #fff !important; border: 0; border-radius: 8px; padding: 6px 13px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px rgba(5, 10, 107, .2); transition: .12s; text-decoration: none; white-space: nowrap; }
.tvh-back-btn:hover { background: var(--dh-blue, #4169ce); transform: translateX(-2px); }
.tvh-drill-title { font-size: 14px; font-weight: 800; color: var(--dh-navy); }
.tvh-drill-crumb { font-size: 11.5px; color: var(--muted); font-weight: 600; }

/* Biểu đồ Biến động theo ngày (3 cột ghép Phỏng vấn / Đi làm / Nghỉ việc) + 3 thẻ Giữ chân */
.tvh-chart-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.tvh-chart-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tvh-cpill { border: 1px solid var(--line); background: #f1f5f9; color: #475569; border-radius: 9px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: .12s; }
.tvh-cpill:hover { border-color: var(--dh-blue); color: var(--dh-navy); }
.tvh-cpill.active { background: var(--dh-navy); border-color: var(--dh-navy); color: #fff; }
.tvh-chart-box { background: #fbfcfe; border: 1px solid #eef2f8; border-radius: 12px; padding: 10px 10px 6px; margin-bottom: 10px; }
.tvh-chart-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12.5px; }
.tvh-cleg { display: flex; flex-wrap: wrap; gap: 14px; font-weight: 600; color: #334155; }
.tvh-cleg span { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tvh-cleg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.tvh-ret-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tvh-ret-card { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 11px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; transition: .12s; }
.tvh-ret-card:hover { border-color: #16a34a; box-shadow: 0 4px 12px rgba(22, 163, 74, .1); }
.tvh-ret-card.warn { background: #fffbeb; border-color: #fde68a; }
.tvh-ret-card.empty { background: #f8fafc; border-color: #e2e8f0; }
.tvh-ret-pct { font-size: 20px; font-weight: 800; color: #15803d; font-variant-numeric: tabular-nums; }
.tvh-ret-card.warn .tvh-ret-pct { color: #b45309; }
.tvh-ret-card.empty .tvh-ret-pct { color: #94a3b8; }

/* Khối Quân số & Trạng thái dự án (Donut + Danh sách dự án kèm Trạng thái & Tiến độ tuyển) */
.tvh-prj-split { display: grid; grid-template-columns: 155px minmax(0, 1fr); gap: 14px; align-items: center; }
.tvh-donut-wrap { position: relative; width: 148px; height: 148px; margin: 0 auto; }
.tvh-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.tvh-donut-center b { font-size: 26px; font-weight: 800; color: var(--dh-navy); line-height: 1; font-variant-numeric: tabular-nums; }
.tvh-donut-center span { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.tvh-prj-list { display: flex; flex-direction: column; gap: 7px; max-height: 310px; overflow-y: auto; padding-right: 2px; }
.tvh-prj-row { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; cursor: pointer; transition: .12s; }
.tvh-prj-row:hover { border-color: var(--dh-blue); background: #f8faff; }
.tvh-prj-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.tvh-pbar { height: 5px; border-radius: 99px; background: #edf2f7; overflow: hidden; margin-top: 5px; }
.tvh-pbar > i { display: block; height: 100%; border-radius: 99px; }

/* Huy chương xếp hạng 1, 2, 3 */
.tvh-rank-medal { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: #f1f5f9; color: #475569; }
.tvh-rank-medal.m1 { background: #fef3c7; color: #b45309; border: 1px solid #f59e0b; }
.tvh-rank-medal.m2 { background: #e2e8f0; color: #334155; border: 1px solid #94a3b8; }
.tvh-rank-medal.m3 { background: #ffedd5; color: #9a3412; border: 1px solid #fb923c; }

@media (max-width: 1200px) {
  .tvh-main-grid, .tvh-bottom-grid, .tvh-rank-grid { grid-template-columns: minmax(0, 1fr); }
  .tvh-steps7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .tvh-bkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tvh-steps7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tvh-ret-cards { grid-template-columns: minmax(0, 1fr); }
  .tvh-prj-split { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Bộ quy chuẩn giao diện DH CONNECT, bước 1 (sếp duyệt Hướng A 31/10/2026, có màu chuyển sắc) =====
   Một màu chủ đạo là xanh logo; màu trạng thái có nghĩa cố định: xanh lá đạt, vàng chờ, đỏ chậm hoặc lỗi, xanh thông tin, xám kết thúc.
   Phông Be Vietnam Pro; 3 kiểu bo góc 6 / 10 / 14; nút 3 loại (chính, thường, nguy hiểm). Trang mới phải dùng các biến dưới đây. */
:root {
  --bg: #f4f6fb; --card: #ffffff; --text: #141a3a; --muted: #5f6787; --line: #e2e6f0;
  --brand: #4169ce; --brand-soft: #edf2fd;
  --good: #15803d; --good-soft: #e7f6ec; --warn: #b45309; --warn-soft: #fdf3e2; --bad: #c62828; --bad-soft: #fdecec;
  --info: #4169ce; --info-soft: #edf2fd; --off: #5f6787; --off-soft: #f0f2f7;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --radius: 14px;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-num: 28px;
  --font: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --grad-kpi: linear-gradient(90deg, var(--dh-navy), var(--dh-blue) 55%, var(--dh-teal));
  --grad-head: linear-gradient(110deg, var(--dh-navy), #1d2a9a 60%, var(--dh-blue));
}
body { font-family: var(--font); font-size: var(--fs-md); color: var(--text); background: var(--bg); }
button, input, select, textarea { font-family: var(--font); }
.page-title { font-size: var(--fs-xl); color: var(--dh-navy); }
.card { border-radius: var(--r-lg); }
.card h3 { font-size: var(--fs-lg); }
.stat { border-radius: var(--r-lg); }
table { font-size: var(--fs-sm); }
th { font-size: var(--fs-xs); background: #f4f6fb; color: var(--muted); }
/* Nút: chính (chuyển sắc xanh logo), thường (viền), nguy hiểm (viền đỏ). Nút "đồng ý" xanh lá cũ dùng kiểu nút chính. */
.btn { border-radius: var(--r-md); font-weight: 600; font-size: var(--fs-md); }
.btn.sm { font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn.primary, .btn.good { background: var(--dh-grad-btn); border-color: transparent; color: #fff; box-shadow: 0 3px 10px rgba(65, 105, 206, .28); }
.btn.primary:hover, .btn.good:hover { filter: brightness(1.06); }
.btn.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: var(--card); }
.btn.bad:hover { background: var(--bad-soft); }
.btn:focus-visible, .tabs button:focus-visible, a:focus-visible { outline: 3px solid var(--dh-teal); outline-offset: 2px; }
/* Nhãn trạng thái: chấm tròn + 5 màu có nghĩa cố định. */
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); padding: 2px 10px; background: var(--off-soft); color: var(--off); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tag.normal, .tag.approved, .tag.valid, .tag.exempt { background: var(--good-soft); color: var(--good); }
.tag.pending, .tag.late, .tag.early, .tag.late_early { background: var(--warn-soft); color: var(--warn); }
.tag.missing, .tag.absent, .tag.rejected { background: var(--bad-soft); color: var(--bad); }
.tag.leave, .tag.holiday, .tag.working { background: var(--info-soft); color: var(--info); }
.tag.not_yet { background: var(--off-soft); color: var(--off); }
/* Thẻ số (Hướng A): viền chuyển sắc phía trên, số to xanh đậm. */
.stat.kpi { overflow: hidden; }
.stat.kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad-kpi); }
.stat.kpi.attention::before { background: linear-gradient(90deg, var(--dh-orange), #f8a24f); }
.stat.kpi .label { font-size: var(--fs-xs); color: var(--muted); }
.stat.kpi .value, .dash-kpi .value { font-size: var(--fs-num); color: var(--dh-navy); }
.stat.kpi .value.brand { color: var(--dh-navy); }
.stat.kpi.attention { background: linear-gradient(180deg, #fff7ed, #fff 70%); border-color: #fbd3b0; }
.stat.selected { border-color: var(--dh-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dh-blue) 35%, transparent); }
/* Thanh chọn: nút đang chọn chuyển sắc. Khung báo: viền trái màu trạng thái. */
.tabs button { font-size: var(--fs-sm); }
.attention-box { border-left: 4px solid var(--warn); background: var(--warn-soft); border-radius: var(--r-md); }
.fbar { border-radius: var(--r-md); }
/* Khối quan trọng: thêm class "strong" vào .card để có thanh đầu chuyển sắc xanh đậm (tối đa 1 khối mỗi trang). */
.card.strong { padding-top: 0; overflow: hidden; }
.card.strong > h3:first-child, .card.strong > .tt-head:first-child { margin: 0 -18px 14px; padding: 12px 18px; background: var(--grad-head); color: #fff; }
/* Ô tìm toàn hệ thống */
.gs-open { display: flex; align-items: center; gap: 8px; width: calc(100% - 8px); margin: 0 4px 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); color: var(--muted); font-size: var(--fs-sm); cursor: pointer; text-align: left; }
.gs-open:hover { border-color: var(--dh-blue); color: var(--dh-blue); }
.layout.collapsed .gs-open { justify-content: center; padding: 8px 0; }
.gs-fab { display: none; position: fixed; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; border-radius: 50%; border: 0; z-index: 40;
  background: var(--dh-grad-btn); color: #fff; font-size: 20px; box-shadow: 0 6px 18px rgba(5, 10, 107, .3); cursor: pointer; }
@media (max-width: 800px) { .gs-fab { display: grid; place-items: center; } }
.gs-shade { position: fixed; inset: 0; background: rgba(5, 10, 107, .28); z-index: 90; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 14px 14px; }
.gs-pop { width: min(640px, 100%); background: var(--card); border-radius: var(--r-lg); box-shadow: 0 20px 50px rgba(5, 10, 107, .3); overflow: hidden; border-top: 4px solid transparent; border-image: var(--grad-kpi) 1; }
.gs-pop input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; font-size: var(--fs-lg); outline: none; border-radius: 0; }
.gs-res { max-height: 60vh; overflow: auto; padding: 6px 0 10px; }
.gs-hint { padding: 12px 18px; }
.gs-g { padding: 10px 18px 4px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.gs-it { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 18px; cursor: pointer; }
.gs-it:hover, .gs-it:focus-visible { background: var(--brand-soft); outline: none; }
.gs-it span { font-size: var(--fs-sm); color: var(--muted); }

/* Thanh lọc chung (khung chức năng bước 1): mọi trang cùng một kiểu ô lọc. */
.fbar input:not([type]), .fbar input[type=text] { width: auto; flex: 1 1 200px; min-width: 150px; max-width: 320px; padding: 6px 10px; font-size: var(--fs-sm); }
.fbar .btn.sm { padding: 5px 10px; }
.fbar select.on, .fbar input[type=search]:not(:placeholder-shown) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
@media (max-width: 700px) { .fbar input:not([type]), .fbar input[type=text] { flex: 1 1 100%; max-width: none; } }

/* Khung trang (khung chức năng bước 2): đầu trang giống nhau ở mọi trang: tiêu đề bên trái, nút việc chính bên phải. */
.page-head { flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.page-head .page-title, .page-head h1, .page-head h2 { margin: 0; }
.page-head + .small.muted { margin: -8px 0 12px; }
/* Lớp tiện ích thay cho kiểu viết thẳng trong từng trang (khung chức năng bước 2). */
.t-warn { color: var(--warn) !important; } .t-brand { color: var(--brand) !important; } .t-good { color: var(--good) !important; } .t-bad { color: var(--bad) !important; }
.m0 { margin: 0 !important; } .mt4 { margin-top: 4px !important; } .mt6 { margin-top: 6px !important; } .mt8 { margin-top: 8px !important; } .mt10 { margin-top: 10px !important; } .mt12 { margin-top: 12px !important; }
.mb6 { margin-bottom: 6px !important; } .mb8 { margin-bottom: 8px !important; } .mb10 { margin-bottom: 10px !important; } .mb12 { margin-bottom: 12px !important; } .mb16 { margin-bottom: 16px !important; }
.pointer { cursor: pointer; } .w-auto { width: auto !important; } .ws-normal { white-space: normal !important; } .nowrap { white-space: nowrap !important; }
/* Tra cứu số liệu: thanh so sánh trong bảng */
.tc-track { display: block; height: 10px; background: var(--brand-soft); border-radius: 99px; overflow: hidden; }
.tc-track i { display: block; height: 100%; background: var(--grad-kpi); border-radius: 99px; }

/* Dải nghỉ việc dùng chung các trang tổng quan (sếp duyệt 31/10/2026): viền trái theo mức rủi ro. */
.quit-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 14px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--good); border-radius: var(--r-md); color: var(--text); text-decoration: none; font-size: var(--fs-sm); }
.quit-strip:hover { box-shadow: 0 2px 10px rgba(5, 10, 107, .08); }
.quit-strip.warn { border-left-color: var(--dh-orange); } .quit-strip.bad { border-left-color: var(--bad); background: var(--bad-soft, #fdecec); }
.quit-strip .qs-t { font-weight: 700; color: var(--dh-navy); text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-xs); }
.quit-strip b { font-size: var(--fs-lg); }
.stat.kpi.quit-warn::before { background: linear-gradient(90deg, #f26a1b, #f6a04d); } .stat.kpi.quit-bad::before { background: linear-gradient(90deg, #c62828, #f26a1b); }
.attention-box { padding: 10px 14px; }

/* ---------- Bộ lọc chung Mẫu A (sếp duyệt 31/10/2026) ---------- */
.fbar.fb2 { background: none; padding: 0; gap: 8px; align-items: center; }
.fbar.fb2 input[type=search] { flex: 1 1 200px; max-width: 300px; min-width: 0; border-radius: 10px; padding: 8px 12px; font-size: var(--fs-sm, 13px); }
.fb-pills { display: contents; }
.fb-pill { position: relative; display: inline-flex; }
.fb-b { font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--line, #dfe3ee); background: #fff; color: var(--text, #141a3a); border-radius: 99px; padding: 6px 12px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; line-height: 1.3; }
.fb-b:hover { border-color: var(--dh-blue, #4169ce); color: var(--dh-blue, #4169ce); }
.fb-pill.on > .fb-b { background: #eef2fb; border-color: var(--dh-blue, #4169ce); color: var(--dh-blue, #4169ce); }
.fb-pill.chk.on > .fb-b::before { content: '✓'; }
.fb-x { font-style: normal; font-weight: 700; opacity: .65; padding-left: 2px; } .fb-x:hover { opacity: 1; color: #d64545; }
.fb-more { border-style: dashed; color: var(--muted); }
.fb-save { border-radius: 10px; }
.fb-per .pp-wrap > .btn { border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 600; background: #fff; }
.fb-mob { display: none; }
.fb-extra { margin-left: auto; }
.fb-chips { flex: 1 1 100%; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--muted); }
.fb-chips:has(.fb-n0) { display: none; }
.fb-chip { background: #eef2fb; color: var(--dh-blue, #4169ce); border-radius: 99px; padding: 2px 10px; font-weight: 600; }
.fb-n { color: var(--text, #141a3a); }
.fb-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; background: #fff; border: 1px solid var(--line, #dfe3ee); border-radius: 12px; box-shadow: 0 10px 30px rgba(5,10,107,.18); padding: 10px; min-width: 240px; max-width: 320px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.fb-pop.right { left: auto; right: 0; }
.fb-pop input[type=search] { width: 100%; max-width: none; padding: 6px 10px; }
.fb-opts { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow: auto; }
.fb-opts label { display: flex; gap: 8px; align-items: center; cursor: pointer; padding: 4px 6px; border-radius: 6px; font-weight: 500; margin: 0; }
.fb-opts label:hover { background: #f4f7fd; }
.fb-opts label input { width: auto; margin: 0; }
.fb-opts label em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 12px; }
.fb-add { color: var(--dh-blue, #4169ce); }
.fb-view { display: flex; align-items: center; gap: 8px; padding: 4px 6px; } .fb-view a { flex: 1; } .fb-view i { font-style: normal; cursor: pointer; color: var(--muted); } .fb-view i:hover { color: #d64545; }
.fb-act { display: flex; gap: 6px; justify-content: flex-end; }
.fb-pop .pp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; } .fb-pop .pp-list label { display: flex; gap: 6px; align-items: center; margin: 0; font-weight: 500; } .fb-pop .pp-list input { width: auto; }
.fb-dates { display: flex; gap: 8px; } .fb-dates label { flex: 1; display: flex; flex-direction: column; gap: 2px; } .fb-dates input { width: 100%; }
.uv-toolbar .fbar.fb2 { flex: 1 1 600px; }
@media (max-width: 700px) {
  .fbar.fb2 input[type=search] { flex: 1 1 0; max-width: none; }
  .fb-mob { display: inline-flex; }
  .fb-mob b { background: var(--dh-orange, #f26a1b); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 12px; }
  .fbar.fb2 .fb-pills { display: none; }
  .fbar.fb2.open .fb-pills { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; padding: 10px; border: 1px solid var(--line, #dfe3ee); border-radius: 12px; background: #fff; }
  .fb-pop { position: fixed; left: 8px !important; right: 8px !important; top: auto; bottom: 8px; max-width: none; max-height: 70vh; overflow: auto; }
}
/* Tùy chỉnh bộ lọc (kiểu Facebook, 31/10/2026) */
.fb-save b { background: var(--dh-orange, #f26a1b); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; }
.fb-view { border-radius: 6px; } .fb-view.cur { background: #eef2fb; } .fb-view.cur a { font-weight: 700; }
.fb-view i { font-size: 13px; padding: 2px 3px; } .fb-view i.on { color: var(--dh-orange, #f26a1b); }
.fb-pop:has(.fb-view), .fb-pop:has([data-vnew]) { min-width: 340px; } .fb-act .btn { white-space: nowrap; }
.fb-editor .fe-g { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line, #dfe3ee); border-radius: 10px; padding: 10px 12px; }
.fb-editor .fe-g > b { font-size: 13.5px; }
.fb-editor .fe-opts { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: 160px; overflow: auto; }
.fb-editor .fe-opts label.check { margin: 0; font-weight: 500; }
/* Quản lý lao động đợt 1 (31/10/2026): menu Xuất Excel, nút ⋯, ô Tính theo dạng nút */
.lb-menu { position: relative; display: inline-flex; }
.lb-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; background: #fff; border: 1px solid var(--line, #dfe3ee); border-radius: 12px; box-shadow: 0 10px 30px rgba(5,10,107,.18); padding: 6px; min-width: 290px; display: flex; flex-direction: column; }
.lb-pop button { all: unset; cursor: pointer; padding: 8px 10px; border-radius: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.lb-pop button:hover { background: #f4f7fd; } .lb-pop button span { font-size: 12px; color: var(--muted); }
select.fb-b.fb-selpill { appearance: none; -webkit-appearance: none; width: auto; padding: 6px 12px; background: #fff; }
.fb-pill.on > select.fb-selpill { background: #eef2fb; border-color: var(--dh-blue, #4169ce); color: var(--dh-blue, #4169ce); }
.lb-note { margin: -4px 0 12px; }
/* Quản lý lao động đợt 2–3 (31/10/2026): thẻ dự án gọn, ô Cần cập nhật đầu phễu, bảng 2 tầng, thanh chọn nhiều người, thẻ trên điện thoại */
.lb-pjs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
.lb-pj { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: inherit; font-size: 13px; text-decoration: none; }
.lb-pj:hover { border-color: var(--dh-blue, #4169ce); } .lb-pj.selected { border-color: var(--dh-blue, #4169ce); box-shadow: 0 0 0 2px #eef2fb; }
.lb-pj-t { font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--dh-navy, #050a6b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pj-n { font-size: 22px; color: var(--dh-blue, #4169ce); }
.lb-trk { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; } .lb-trk i { display: block; height: 100%; background: var(--dh-grad, linear-gradient(90deg,#4169ce,#3cc6cf)); }
.lb-pj-r { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; } .lb-pj-r b { color: var(--text); } .lb-pj-r .t-warn b { color: inherit; }
.lb-pj-more { align-items: center; justify-content: center; color: var(--dh-blue, #4169ce); font-weight: 600; }
.funnel .fn-alert { flex: 0.8 1 0; border-color: #f2b8b5; background: #fff5f5; } .funnel .fn-alert .fn-n { color: #b42318; }
.funnel .fn-alert.zero { border-color: var(--line); background: var(--card); } .funnel .fn-alert.zero .fn-n { color: var(--muted); }
.lb-sub { margin: 0 0 10px; align-items: center; }
.lb2 td { vertical-align: top; } .lb2 .lb-name { font-weight: 600; } .lb-st { gap: 6px; align-items: center; flex-wrap: wrap; }
.lb-selbar { position: sticky; top: 8px; z-index: 30; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--dh-navy, #050a6b); color: #fff; border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; font-size: 13.5px; }
.lb-selbar .btn { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }
@media (max-width: 700px) {
  .lb2, .lb2 tbody, .lb2 tr, .lb2 td { display: block; width: 100%; }
  .lb2 tr:first-child { display: none; }
  .lb2 tr { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; background: var(--card); position: relative; }
  .lb2 td { border: 0 !important; padding: 2px 0 2px 34%; position: relative; min-height: 20px; text-align: left !important; }
  .lb2 td::before { content: attr(data-th); position: absolute; left: 0; top: 2px; width: 32%; font-size: 12px; color: var(--muted); }
  .lb2 td.pick { position: absolute; right: 8px; top: 8px; width: auto; padding: 0; } .lb2 td.pick::before { content: none; }
  .lb2 td[data-th="Người lao động"] { padding-left: 0; padding-right: 30px; } .lb2 td[data-th="Người lao động"]::before { content: none; }
}

/* Đối chiếu bảng phí nhà máy: nút xử lý từng dòng xuống hàng khi hẹp */
.nm-acts { display: flex; flex-wrap: wrap; gap: 4px; min-width: 220px; max-width: 420px; }
.nm-acts .btn { white-space: nowrap; }

/* Tinh gọn menu (31/10/2026): dải tab đầu trang cho các trang đã gom, menu khi bấm vào tên mình */
.page-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; padding: 4px; background: var(--card, #fff); border: 1px solid var(--line, #e2e6f0); border-radius: 12px; width: fit-content; max-width: 100%; }
.page-tabs a { padding: 6px 14px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: var(--muted, #5f6787); text-decoration: none; white-space: nowrap; }
.page-tabs a:hover { background: var(--soft, #eef2fb); color: var(--text, #141a3a); }
.page-tabs a.active { background: var(--dh-grad, linear-gradient(90deg, #4169ce, #3cc6cf)); color: #fff; }
.me-pop { position: fixed; z-index: 1000; background: var(--card, #fff); border: 1px solid var(--line, #e2e6f0); border-radius: 12px; box-shadow: 0 10px 30px rgba(5, 10, 107, .18); padding: 6px; display: flex; flex-direction: column; min-width: 210px; }
.me-pop a, .me-pop button { text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--text, #141a3a); text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit; }
.me-pop a:hover, .me-pop button:hover { background: var(--soft, #eef2fb); }
.me-pop [data-logout] { color: var(--bad, #b42318); border-top: 1px solid var(--line, #e2e6f0); border-radius: 0 0 8px 8px; margin-top: 4px; }
.cd-groups { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cd-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cd-group > b { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #5f6787); min-width: 130px; }
.cd-group .tabs { margin: 0; }
.pay-info { min-width: 300px; white-space: normal; line-height: 1.5; }
.pay-info > div { margin-top: 2px; }

/* ===== Màu menu mới, phần 1 (03/11/2026): giữ nguyên các nhóm chức năng như cũ, chỉ đổi màu theo bản mẫu (nền xanh đậm) ===== */
.sidebar { background: linear-gradient(180deg, #050a6b 0%, #0b1580 60%, #10208f 100%); border-right: 0; color: #fff; }
.sidebar .brand { background: #fff; border-radius: 12px; margin: 0 2px 14px; padding: 8px 10px; justify-content: center; }
.layout.collapsed .sidebar .brand { background: transparent; padding: 4px 0; }
.sidebar .gs-open { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #c9cff0; }
.sidebar .gs-open:hover { border-color: #3cc6cf; color: #fff; }
.nav a { color: #dfe3fb; font-weight: 500; border-radius: 9px; min-width: 0; }
.nav a .lbl { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav a.active { background: linear-gradient(90deg, #4169ce, #3cc6cf); color: #fff; font-weight: 700; box-shadow: 0 4px 14px rgba(60,198,207,.25); }
.nav a .badge { background: #f26a1b; color: #fff; }
.nav-head { color: #aab2e6; }
.nav-head:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-group.open > .nav-head { color: #fff; }
.nav-head .dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.nav-head .chev { color: #aab2e6; }
.sidebar .side-foot { border-top-color: rgba(255,255,255,.14); }
.sidebar .me-chip { color: #fff; }
.sidebar .me-chip:hover, .sidebar .collapse-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .me-chip small { color: #8fe6ec; }
.sidebar .collapse-btn, .sidebar .side-foot label, .sidebar .side-foot button:not(.collapse-btn) { color: #b9c0ea; }
.layout.collapsed .nav-body { border-top-color: rgba(255,255,255,.12); }

/* ===== Phần 1 bổ sung (03/11/2026): thanh trên cùng, báo đỏ trên Tổng quan, trang 20 lưu trình ===== */
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 28px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line, #e2e6f0); }
.tb-search { display: flex; align-items: center; gap: 8px; flex: 0 1 460px; min-width: 0; padding: 8px 12px; border: 1px solid var(--line, #e2e6f0); border-radius: 10px; background: var(--bg, #f6f7fb); color: var(--muted, #5f6787); font-size: 13.5px; cursor: pointer; text-align: left; }
.tb-search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-search kbd { font: 600 11px/1 inherit; padding: 3px 6px; border: 1px solid var(--line, #e2e6f0); border-radius: 6px; background: #fff; color: var(--muted, #5f6787); }
.tb-search:hover { border-color: #4169ce; color: #4169ce; }
.tb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line, #e2e6f0); background: #fff; color: var(--text, #141a3a); font-weight: 600; font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.tb-btn.has { border-color: #f26a1b; color: #c2470a; background: #fff4ec; }
.tb-btn .badge { background: #f26a1b; color: #fff; }
.topbar .me-chip { padding: 4px 8px 4px 4px; }
.topbar .me-chip:hover { background: var(--bg, #f4f5fb); }
.topbar .me-t strong { display: block; font-size: 13px; line-height: 1.2; }
.topbar .me-t small { display: block; color: #4169ce; font-size: 12px; }
.topbar .me-chev { color: var(--muted, #5f6787); font-size: 11px; }
.main-col > .main { padding-top: 18px; }
.me-pop { position: fixed; }
@media (max-width: 760px) {
  .topbar { padding: 8px 12px; }
  .tb-search { display: none; }
  .tb-btn .tb-t, .topbar .me-t, .topbar .me-chev { display: none; }
  .main-col > .main { padding-top: 12px; }
}
/* Báo đỏ: 5 việc gấp nhất trên Tổng quan */
.red-top { border-left: 4px solid var(--bad, #d93a3a); }
.red-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; color: inherit; text-decoration: none; border-top: 1px solid var(--line, #eef0f6); }
.red-item:first-of-type { border-top: 0; }
.red-item:hover { background: var(--bg, #f6f7fb); }
.red-item .red-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--warn, #e0a100); }
.red-item.is-red .red-dot { background: var(--bad, #d93a3a); }
.red-item .red-t { flex: 1; min-width: 0; }
/* 20 lưu trình */
.chip-btn { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line, #e2e6f0); background: #fff; color: var(--text, #141a3a); font-size: 13px; font-weight: 600; cursor: pointer; }
.chip-btn.active { background: #050a6b; border-color: #050a6b; color: #fff; }
.lt-card { margin-bottom: 12px; }
.lt-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.lt-ar { align-self: center; color: var(--muted, #9aa0b5); font-weight: 700; }
.lt-st { display: flex; flex-direction: column; gap: 2px; min-width: 150px; max-width: 220px; padding: 8px 10px; border-radius: 10px; background: var(--bg, #f6f7fb); border: 1px solid var(--line, #e2e6f0); border-top: 3px solid var(--c, #5d6483); font-size: 12.5px; }
.lt-st b { font-size: 13px; }
.lt-st .lt-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, #5f6787); }
.lt-st.k-d .lt-k { color: #4169ce; } .lt-st.k-c .lt-k { color: #b2477d; } .lt-st.k-g .lt-k { color: #1f9d6b; } .lt-st.k-a .lt-k { color: #9aa0b5; } .lt-st.k-b .lt-k { color: #7a5af5; } .lt-st.k-x .lt-k { color: #1aa3ad; }
.lt-st.is-plan { border-style: dashed; border-top-style: solid; background: #fffaf3; }
.lt-st .lt-where { color: var(--muted, #5f6787); font-size: 11.5px; }
.lt-note { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #f3f6ff; color: var(--text, #141a3a); }
.lt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; background: #9aa0b5; }
.lt-dot.k-d { background: #4169ce; } .lt-dot.k-c { background: #b2477d; } .lt-dot.k-g { background: #1f9d6b; } .lt-dot.k-b { background: #7a5af5; } .lt-dot.k-x { background: #1aa3ad; }
.lt-title { font-size: 16px; font-weight: 700; }
.tb-logo { display: none; }
@media (max-width: 760px) { .tb-logo { display: block; } .tb-logo img { height: 30px; display: block; } }
.qa-sub { margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--line, #e2e6f0); font-weight: 700; font-size: 14px; }
/* Khung "Mục cần duyệt nhanh" trên Tổng quan Giám đốc (03/11/2026) */
.qk-red { margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line, #e2e6f0); }
.qk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-top: 8px; border: 1px solid var(--line, #e2e6f0); border-radius: 10px; cursor: pointer; background: var(--card, #fff); }
.qk-item:hover { border-color: #4169ce; background: #f7f9ff; }
.qk-main { flex: 1; min-width: 0; }
.qk-main strong.qk-title { display: block; font-size: 14px; margin-top: 6px; }
.qk-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.qk-pos { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.qk-line { color: var(--muted, #5b6478); margin-top: 2px; }
.qk-money { color: #0e8a4a; font-size: 14px; }
.qk-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.qk-ck { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: #eef7f1; color: #17703f; }
.qk-ck.no { background: #fde8e8; color: #c62828; }
.qk-ck.note { background: #fff4dc; color: #8a5a00; }
.qk-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.qk-btns { display: flex; gap: 6px; }
.qk-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #fff4dc; color: #a46a00; white-space: nowrap; }
.qk-tag.warn { background: #fff4dc; color: #a46a00; }
.qk-tag.bad { background: #fde8e8; color: #c62828; }
.qk-all { text-align: center; margin-top: 10px; font-weight: 600; }
.hn-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eef1f7; color: #4b5375; font-size: 12px; }
@media (max-width: 640px) { .qk-item { flex-direction: column; align-items: stretch; } .qk-side { flex-direction: row; justify-content: space-between; align-items: center; } }

/* ===== Tổng quan công ty (Ban Giám đốc, sếp duyệt 03/11/2026) ===== */
.tq-head { flex-wrap: wrap; gap: 8px; }
.tq-banner { display: flex; gap: 6px 14px; align-items: baseline; flex-wrap: wrap; background: var(--dh-grad); color: #fff; border-radius: 12px; padding: 10px 16px; margin: 4px 0 14px; font-size: 13px; }
.tq-banner strong { font-size: 15px; } .tq-banner span { opacity: .9; } .tq-banner a { color: #fff; text-decoration: underline; }
.tq-sec { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dh-navy); margin: 0 0 8px; }
.tq-six { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.tq-kpi .value { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tq-bar { margin: 12px 0 8px; height: 8px; }
.tq-dot { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; }
.tq-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.tq-dot.good { color: #15803d; } .tq-dot.good::before { background: #16a34a; }
.tq-dot.warn { color: #b45309; } .tq-dot.warn::before { background: #f59e0b; }
.tq-dot.bad { color: #b91c1c; } .tq-dot.bad::before { background: #dc2626; }
.tq-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.tq-row3 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.tq-row4 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.tq-row2 > *, .tq-row3 > *, .tq-row4 > * { margin-bottom: 14px; min-width: 0; }
.tq-row2 #tasks-box > .card { margin-bottom: 0; }
.tq-depts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tq-dept { display: block; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line, #e3e7ef); border-left-width: 4px; color: inherit; text-decoration: none; background: #fff; }
.tq-dept:hover { box-shadow: 0 2px 8px rgba(5, 10, 107, .08); }
.tq-dept.good { border-left-color: #16a34a; background: #f3fbf5; } .tq-dept.warn { border-left-color: #f59e0b; background: #fffaf0; }
.tq-dept.bad { border-left-color: #dc2626; background: #fef4f4; } .tq-dept.gray { border-left-color: #94a3b8; }
.tq-dept:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tq-prj { max-height: 330px; overflow: auto; } .tq-prj a.on { outline: 2px solid var(--dh-blue); border-radius: 8px; }
@media (max-width: 1500px) { .tq-six { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tq-row4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tq-row4 > :first-child { grid-column: 1 / -1; } }
@media (max-width: 1000px) { .tq-row2, .tq-row3, .tq-row4 { grid-template-columns: minmax(0, 1fr); } .tq-row4 > :first-child { grid-column: auto; } }
@media (max-width: 640px) { .tq-six { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tq-depts { grid-template-columns: minmax(0, 1fr); } .tq-kpi .value { font-size: 19px; } }
.tq-hero { margin: 4px 0 16px; padding: 26px 30px; background: linear-gradient(120deg, #050a6b 0%, #2a3fb0 45%, #4169ce 70%, #3cc6cf 100%); box-shadow: 0 10px 28px rgba(5, 10, 107, .18); }
.tq-hero h1 { font-size: 30px; }
.tq-hero p { max-width: 760px; font-size: 15px; line-height: 1.55; }
.tq-hero-note { margin-top: 8px; font-size: 12.5px; opacity: .8; } .tq-hero-note a { color: #fff; text-decoration: underline; }
.tq-fake { background: #fff7ed; border: 1px dashed #f26a1b; color: #9a3412; border-radius: 10px; padding: 8px 14px; margin: -6px 0 14px; font-size: 13px; }
@media (max-width: 640px) { .tq-hero { padding: 18px; } .tq-hero h1 { font-size: 22px; } }
/* Tổng quan công ty: hàng khung bằng nhau, khung bị ẩn thì khung còn lại giãn ra, biểu đồ phủ kín khung (sếp 03/11/2026) */
.tq-row2, .tq-row3, .tq-row4 { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; margin-bottom: 14px; }
.tq-row2 > *, .tq-row3 > *, .tq-row4 > * { margin: 0 !important; min-width: 0; display: flex; flex-direction: column; }
.tq-row2 > * { flex: 1 1 420px; }
.tq-row3 > :first-child { flex: 1.6 1 520px; } .tq-row3 > :last-child { flex: 1 1 360px; }
.tq-row4 > :first-child { flex: 1.3 1 480px; } .tq-row4 > * { flex: 1 1 320px; }
.tq-row2 > #tasks-box > .card { flex: 1; margin: 0; }
.tq-row2 > #tasks-box:empty, .tq-row2 > #tasks-box:not(:has(.card:not(.tt-hidden))) { display: none; }
.tq-row2 > .card.tt-hidden, .tq-row3 > .card.tt-hidden, .tq-row4 > .card.tt-hidden { display: none !important; }
.tq-row3 .dash-chart, .tq-row4 .dash-chart { max-height: none; flex: 1; }
.tq-row3 .card .dash-funnel { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.tq-row4 .dash-src { flex: 1; justify-content: center; }
.tq-row4 .tq-prj { flex: 1; max-height: 420px; }
/* Tổng quan công ty theo ảnh mẫu sếp gửi 03/11/2026: tiêu đề in hoa xanh đậm, chú thích dưới biểu đồ, phễu thanh mảnh, dự án thanh dày */
.tq-page .card h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #0b136f; }
.tq-page .card { border-radius: 14px; }
.tq-c > h3, .tq-c > .row:first-child { margin-bottom: 12px; }
.tq-chart { flex: 1; display: flex; align-items: center; min-height: 0; }
.tq-svg { width: 100%; height: auto; display: block; }
.tq-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: #4b5375; margin-top: 8px; }
.tq-leg span { display: inline-flex; align-items: center; gap: 6px; }
.tq-leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .tq-leg i.ln { height: 3px; width: 14px; border-radius: 2px; }
.tq-foot { font-size: 12.5px; color: #6a7192; margin-top: 10px; }
.tq-unit { font-size: 13px; color: #6a7192; }
.tq-more { font-size: 13px; font-weight: 600; color: #4169ce; text-decoration: none; }
.tq-fun { display: flex; flex-direction: column; gap: 12px; }
.tq-fs-h { display: grid; grid-template-columns: 1fr auto 48px; gap: 8px; align-items: baseline; font-size: 14px; color: #1d2340; margin-bottom: 5px; }
.tq-fs-h strong { font-size: 15px; } .tq-fs-h em { font-style: normal; text-align: right; color: #6a7192; font-size: 13px; }
.tq-ftrack, .tq-ptrack { height: 11px; border-radius: 999px; background: #eef1f8; overflow: hidden; }
.tq-ftrack i, .tq-ptrack i { display: block; height: 100%; border-radius: 999px; }
.tq-pj { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tq-pj a { color: inherit; text-decoration: none; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; }
.tq-pj a.on { background: #eef3ff; outline: 2px solid #4169ce; }
.tq-pj-h { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; gap: 10px; align-items: baseline; font-size: 14px; margin-bottom: 5px; }
.tq-pj-h span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tq-pj-h em { font-style: normal; text-align: right; font-size: 13px; color: #6a7192; } .tq-pj-h em.bad { color: #c0392b; } .tq-pj-h em.good { color: #16a34a; }
.tq-src { display: flex; align-items: center; gap: 22px; flex: 1; flex-wrap: wrap; }
.tq-donut { position: relative; width: 130px; height: 130px; flex: none; } .tq-donut svg { width: 100%; height: 100%; transform: none; }
.tq-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tq-donut-c strong { font-size: 20px; color: #0b136f; } .tq-donut-c span { font-size: 12px; color: #6a7192; }
.tq-src ul { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 9px; }
.tq-src li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 40px; gap: 9px; align-items: center; font-size: 14px; }
.tq-src li i { width: 11px; height: 11px; border-radius: 3px; } .tq-src li em { font-style: normal; text-align: right; color: #6a7192; font-size: 13px; }
.tq-row3 > :first-child { flex: 2 1 560px; } .tq-row3 > :last-child { flex: 1 1 340px; }
.tq-row4 > * { flex: 1 1 340px !important; }
.tq-dept { display: flex; flex-direction: column; gap: 4px; }
.nav .badge.gray { background: rgba(255,255,255,.22); color: #fff; }
.tq-area { display: block; } .tq-area .ac-wrap { width: 100%; } .tq-area .leg { display: flex; gap: 16px; font-size: 13px; margin-top: 6px; } .tq-area .leg i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* Mục Của tôi: dòng mô tả dưới tên trang và đường tới lưu trình (sếp duyệt 03/11/2026) */
.page-desc { color: var(--muted, #5d6483); font-size: 14px; margin: -4px 0 14px; }
.page-flow { margin: 18px 0 4px; padding-top: 12px; border-top: 1px dashed var(--line, #dfe3ee); font-size: 13px; color: var(--muted, #5d6483); }
.page-flow a { color: var(--dh-blue, #4169ce); }

/* Thư viện: ai được xem tài liệu (sếp duyệt 03/11/2026) */
.aud-box { border: 1px solid var(--line, #dfe3ee); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; }
.aud-h { font-weight: 600; color: var(--dh-navy, #050a6b); }
.aud-pick { display: grid; gap: 10px; }
.aud-g { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.aud-g > b { flex-basis: 100%; font-size: 13px; color: var(--muted, #5d6483); font-weight: 600; }
.aud-chk { font-weight: 400; }

/* Việc của tôi hôm nay (sếp duyệt 03/11/2026) */
.vh-tile.is-bad .value { color: var(--bad); }
.vh-row { align-items: start; }
.vh-task.late { background: #fff4f2; border-radius: 8px; }
.vh-task.today .title { font-weight: 600; }
.vh-procs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.vh-proc { border: 1px solid var(--line, #dfe3ee); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.vh-proc ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.vh-proc li { margin: 3px 0; }

/* Chấm công của tôi: Lịch / Danh sách (sếp duyệt 03/11/2026) */
.cc-view { display: inline-flex; gap: 4px; margin-right: 8px; }
.cc-view .btn.active { background: var(--dh-navy, #050a6b); color: #fff; border-color: var(--dh-navy, #050a6b); }
.cc-list td { white-space: nowrap; }

/* Hoa hồng của tôi: bảng bậc (sếp duyệt 03/11/2026) */
.hh-mine-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .hh-mine-row { grid-template-columns: minmax(0, 1fr); } }
.hh-tiers tr.hh-on td { background: #eef3ff; font-weight: 600; color: var(--dh-navy, #050a6b); }
.hh-prev .big { font-size: 28px; font-weight: 700; color: var(--dh-navy, #050a6b); }

/* Phiếu lương: Xác nhận / Khiếu nại (sếp duyệt 03/11/2026) */
.ps-grid { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 560px); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .ps-grid { grid-template-columns: minmax(0, 1fr); } }
.ps-ans { border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; background: #eef3ff; }
.ps-ans.ok { background: #ecfdf3; color: #146c43; }
.ps-ans.warn { background: #fff7e6; color: #8a5300; }
.ps-ans.ask { background: #fff7e6; border: 1px solid #f5c26b; }
.ps-draft { border: 1px dashed #f5c26b; }
.ps-hr { margin-top: 16px; }
.ps-hr input { flex: 1; min-width: 0; }

/* Máy tự soát lỗi bảng lương: dòng đỏ chưa kiểm tra, dòng xanh đã kiểm tra */
.bl-check table td { padding: 6px 8px; vertical-align: top; border-bottom: 1px solid var(--line); }
.bl-ck-open td:first-child { border-left: 3px solid var(--bad); }
.bl-ck-done { opacity: .72; }
.bl-ck-done td:first-child { border-left: 3px solid var(--good); }

/* Con mắt ẩn hiện số tiền trên Tổng quan công ty (sếp 04/11/2026) */
.tq-eye { border: 0; background: none; cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; vertical-align: middle; opacity: .75; }
.tq-eye:hover { opacity: 1; transform: scale(1.12); }

/* Tổng quan vận hành bản 2 (sếp duyệt 04/11/2026): bố cục theo trang mẫu */
.tvh2-sec { margin-bottom: 16px; }
.tvh2-sec-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tvh2-cap { font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: var(--dh-navy, #050a6b); font-weight: 800; }
.tvh-kpis.tvh2-k7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1500px) { .tvh-kpis.tvh2-k7 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1150px) { .tvh-kpis.tvh2-k7 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .tvh-kpis.tvh2-k7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tvh2-kc { margin: 0; text-decoration: none; color: inherit; }
.tvh2-kc .value { font-size: 28px; line-height: 1.1; }
.tvh2-kv { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 2px; }
.tvh2-pill { font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #eef0f5; color: #4b5368; white-space: nowrap; }
.tvh2-pill.up { background: #e3f6ec; color: #167a4f; }
.tvh2-pill.down { background: #fff1f0; color: #b42318; }
.tvh2-mini { margin-top: 4px; color: #4b5368; }
.tvh2-s7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.tvh2-s7c { border-radius: 10px; padding: 10px 12px; color: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; transition: transform .12s; }
.tvh2-s7c:hover { transform: translateY(-2px); }
.tvh2-s7c.on { outline: 3px solid #ffd43b; outline-offset: 2px; }
.tvh2-s7c b { font-size: 24px; line-height: 1.1; }
.tvh2-s7c span { font-weight: 700; font-size: 13px; }
.tvh2-s7c small { opacity: .85; font-size: 11.5px; }
.tvh2-s7c em { font-style: normal; font-size: 12px; font-weight: 700; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .3); }
@media (max-width: 1200px) { .tvh2-s7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tvh2-s7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tvh2-two { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .tvh2-two { grid-template-columns: 1fr; } }
.tvh2-prj { padding: 8px 6px; border-bottom: 1px solid #f0f2f7; cursor: pointer; border-radius: 8px; }
.tvh2-prj:hover, .tvh2-prj.on { background: #f6f8fd; }
.tvh2-prj-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.tvh2-prj-bar { height: 8px; background: #eef2fb; border-radius: 6px; overflow: hidden; margin: 6px 0 4px; }
.tvh2-prj-bar i { display: block; height: 100%; border-radius: 6px; }
.tvh2-upd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.tvh2-upd > div { background: #f6f8fd; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.tvh2-upd b { font-size: 20px; color: var(--dh-navy, #050a6b); }
.tvh2-upd b.t-warn { color: #b45309; }
.tvh2-upd span { font-size: 11.5px; color: #5f6787; line-height: 1.3; }
@media (max-width: 640px) { .tvh2-upd { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tvh2-ret tr.bad td { background: #fff1f0; }
.tvh2-ret tr.on td { background: #eef2fb; }

/* Chăm sóc người lao động (5.7) */
.grid.cs-split { grid-template-columns: minmax(0, 2.2fr) minmax(240px, 1fr); }
@media (max-width: 1000px) { .grid.cs-split { grid-template-columns: 1fr; } }
td.td-wrap { white-space: normal; min-width: 180px; }
.tvh-kpis.tvh2-k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1300px) { .tvh-kpis.tvh2-k5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .tvh-kpis.tvh2-k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fm-hide { letter-spacing: 2px; }
.fin-lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 10px; vertical-align: -1px; }
.value .fm-hide { font-size: .62em; letter-spacing: 3px; vertical-align: middle; }
.hh-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.hh-steps span { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--off-soft, #eef0f5); color: var(--muted); white-space: nowrap; }
.hh-steps span.done { background: var(--good-soft, #e3f6ec); color: var(--good, #167a4f); }
.hh-steps span.cur { background: #4169ce; color: #fff; font-weight: 600; }
.ru-in { width: 130px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 600; }
.ru-old { color: var(--bad, #b91c1c); text-decoration: line-through; }
.ru-new { color: var(--good, #167a4f); font-weight: 600; }
/* Đợt 3: Sơ đồ tổ chức */
.org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.org-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.org-p { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--card); min-width: 0; }
.org-p.head { border-color: #4169ce; background: rgba(65, 105, 206, .07); }
/* 9.1 Phễu khách mới */
.pt-funnel { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.pt-step { flex: 1; min-width: 130px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card); }
.pt-arrow { align-self: center; font-size: 22px; color: var(--muted); }

/* Bảng vinh danh top 3 (học hỏi mẫu 04/11/2026) */
.hn-pod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; margin-bottom: 10px; }
.hn-card { border: 1px solid var(--line, #e2e6f0); border-radius: 14px; padding: 10px 8px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; background: var(--card, #fff); }
.hn-card.r1 { border-color: #f5c542; background: linear-gradient(180deg, #fff8e1, #fff); padding-top: 14px; box-shadow: 0 6px 18px rgba(240, 180, 41, .18); }
.hn-card.r2 { background: linear-gradient(180deg, #f2f4f8, #fff); }
.hn-card.r3 { background: linear-gradient(180deg, #fbf0e6, #fff); }
.hn-top { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #050a6b; }
.hn-card.r1 .hn-top { color: #a46a00; }
.hn-av { margin: 2px 0; }
.hn-card.r1 .hn-av img, .hn-card.r1 .hn-av span { box-shadow: 0 0 0 3px #f5c542; }
.hn-name { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-pos { font-size: 11.5px; color: #4169ce; font-weight: 600; line-height: 1.35; }
.hn-pos span { color: var(--muted, #5b6478); font-weight: 400; }
.hn-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; margin-top: 6px; border-top: 1px dashed var(--line, #e2e6f0); padding-top: 6px; }
.hn-nums b { display: block; font-size: 17px; color: #050a6b; }
.hn-card.r1 .hn-nums b { color: #0e8a4a; }
.hn-nums small { display: block; font-size: 10.5px; color: var(--muted, #5b6478); line-height: 1.25; }
@media (max-width: 640px) { .hn-pod { grid-template-columns: 1fr; } .hn-card.r1 { order: -1; } }

/* Hồ sơ người lao động: 4 thẻ đầu + 6 ô mốc (học hỏi mẫu 04/11/2026) */
.w360-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; }
.w360-c { border: 1px solid var(--line, #e2e6f0); border-radius: 12px; padding: 10px 12px; background: linear-gradient(180deg, #f5f8ff, #fff); min-width: 0; }
.w360-c small { display: block; font-size: 11.5px; color: var(--muted, #5b6478); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.w360-c b { display: block; font-size: 17px; color: #050a6b; margin: 4px 0 2px; overflow-wrap: anywhere; }
.w360-c span { font-size: 12px; color: var(--muted, #5b6478); }
.w360-ms { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.w360-m { border: 1px solid var(--line, #e2e6f0); border-radius: 10px; padding: 8px; text-align: center; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.w360-m b { font-size: 15px; color: #050a6b; } .w360-m span { font-size: 12px; } .w360-m em { font-style: normal; font-size: 11.5px; font-weight: 700; }
.w360-m.paid { background: #e9f7ef; border-color: #9fd8b5; } .w360-m.paid em { color: #0e8a4a; }
.w360-m.flow { background: #eef3ff; border-color: #a9bff0; } .w360-m.flow em { color: #4169ce; }
.w360-m.reached { background: #fff4dc; border-color: #f0cf85; } .w360-m.reached em { color: #a46a00; }
.w360-m.run em { color: #f26a1b; } .w360-m.wait { opacity: .7; } .w360-m.wait em { color: var(--muted, #5b6478); }
@media (max-width: 760px) { .w360-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w360-ms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.w360-cards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .w360-cards.c3 { grid-template-columns: 1fr 1fr; } }

/* Thanh lọc gọn (sếp 04/11/2026): Chọn tất cả trong ô lọc, Tính theo trong nút Thời gian */
.fb-pop .fb-all { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line, #e2e6f0); font-weight: 700; cursor: pointer; }
.pp-pop .pp-by { display: flex; flex-direction: column; gap: 4px; padding-right: 12px; margin-right: 12px; border-right: 1px solid var(--line, #e2e6f0); }
.pp-pop .pp-by label { white-space: nowrap; }
.fbar.fb2 .fb-pop input.fb-ps, .fbar .fb-pop input.fb-ps { flex: none; max-width: none; width: 100%; min-width: 0; height: auto; }
.fbar.fb2 input[type=search] { flex: 1 1 180px; max-width: 240px; }

/* Quản lý lao động: lọc nhanh, nhãn cảnh báo, dòng mở rộng (sếp 04/11/2026) */
.lb-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.lb-qk { border: 1px solid var(--line, #e2e6f0); background: var(--card, #fff); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text, #1d2440); }
.lb-qk b { margin-left: 4px; }
.lb-qk.q-on.on { background: #e9f7ef; border-color: #1f9d6b; color: #0e7a4a; }
.lb-qk.q-keep.on { background: #fff4dc; border-color: #e0a526; color: #8a5a00; }
.lb-qk.q-today.on { background: #eef3ff; border-color: #4169ce; color: #2b4fae; }
.lb-qk.q-info.on { background: #f4ecff; border-color: #7a4fd0; color: #5b34a8; }
.lb-qk.q-red { color: #c62828; } .lb-qk.q-red.on { background: #fde8e8; border-color: #c62828; }
.funnel.lb-dim { opacity: .45; }
.lb-flags { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 2px; }
.lb-flag { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.lb-flag.f-red { background: #fde8e8; color: #c62828; } .lb-flag.f-warn { background: #fff4dc; color: #8a5a00; }
.lb-flag.f-info { background: #f4ecff; color: #5b34a8; } .lb-flag.f-lock { background: #eef0f4; color: #4b5468; }
.lb-caret { display: inline-block; width: 14px; color: var(--muted, #5b6478); font-size: 11px; }
table.lb2 tr.lb-row > td:first-child { border-left: 4px solid transparent; }
table.lb2 tr.lv-red > td:first-child { border-left-color: #e03131; } table.lb2 tr.lv-warn > td:first-child { border-left-color: #f0b429; }
table.lb2 tr.lv-info > td:first-child { border-left-color: #7a4fd0; } table.lb2 tr.lv-lock > td:first-child { border-left-color: #9aa3b5; }
table.lb2 tr.lb-row.open { background: #f7f9ff; }
table.lb2 tr.lb-det > td { background: #f7f9ff; border-top: 0; }
.lb-det-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px 16px; padding: 4px 0 8px; }
.lb-why { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.lb-why .f-red b { color: #c62828; } .lb-why .f-warn b { color: #8a5a00; } .lb-why .f-info b { color: #5b34a8; } .lb-why .f-lock b { color: #4b5468; }
.lb-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lb-3 > div { background: var(--card, #fff); border: 1px solid var(--line, #e2e6f0); border-radius: 10px; padding: 6px 10px; min-width: 0; }
.lb-3 small { display: block; font-size: 11.5px; color: var(--muted, #5b6478); } .lb-3 b { font-size: 14px; }
.lb-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.lb-xbar { margin-bottom: 8px; gap: 8px; }
@media (max-width: 760px) { .lb-det-in { grid-template-columns: 1fr; } .lb-3 { grid-template-columns: 1fr 1fr 1fr; } }
/* Quản lý lao động gọn (sếp duyệt 04/11/2026): một hàng trạng thái thay 5 ô bước, nhãn tối đa 2, dự án 1 dòng. */
.lb-stg, .lb-subs, .lb-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lb-stg { margin: 12px 0 0; } .lb-subs { margin: 6px 0 0 92px; } .lb-subs:empty { display: none; } .lb-quick { margin: 10px 0 12px; }
.lb-lab { width: 86px; flex: none; font-size: 12px; color: var(--muted, #5b6478); font-weight: 600; }
.lb-sc { border: 1px solid var(--line, #e2e6f0); background: var(--card, #fff); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text, #1d2440); white-space: nowrap; font-family: inherit; }
.lb-sc b { margin-left: 3px; color: var(--brand, #4169ce); }
.lb-sc.on { background: #050a6b; border-color: #050a6b; color: #fff; } .lb-sc.on b { color: #fff; }
.lb-sc.sub { font-size: 12px; padding: 3px 10px; background: #f3f5fa; font-weight: 500; }
.lb-sc.sub.bad b { color: var(--bad, #c62828); } .lb-sc.sub.on { background: var(--brand, #4169ce); border-color: var(--brand, #4169ce); color: #fff; } .lb-sc.sub.on b { color: #fff; }
.lb-stg.lb-dim, .lb-subs.lb-dim { opacity: .45; }
.lb-flag.f-more { background: #eef0f4; color: #4b5468; }
.lb-1l { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-stbtn { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; } .lb-stbtn .lb-dd { font-size: 10px; color: var(--muted, #5b6478); }
.lb-stbtn:hover .tag { filter: brightness(.95); box-shadow: 0 0 0 1px currentColor; }
.lb-dg { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 16px; font-size: 13px; }
.lb-dg small { display: block; font-size: 11.5px; color: var(--muted, #5b6478); }
table.lb2 td { padding-top: 8px; padding-bottom: 8px; } table.lb2 .lb-flags { margin: 2px 0 0; }
@media (max-width: 760px) { .lb-lab { width: 100%; } .lb-subs { margin-left: 0; } .lb-1l { max-width: none; white-space: normal; } }
table.lb2 .lb-1l { max-width: 210px; } table.lb2 th { white-space: nowrap; }
table.lb2 .ms-row { max-width: 150px; }
table.lb2 { table-layout: fixed; width: 100%; }
table.lb2 th:nth-child(1) { width: 34px; } table.lb2 th:nth-child(2) { width: 25%; } table.lb2 th:nth-child(3) { width: 19%; }
table.lb2 th:nth-child(4) { width: 13%; } table.lb2 th:nth-child(5) { width: 12%; } table.lb2 th:nth-child(6) { width: 10%; }
table.lb2 th:nth-child(7) { width: 11%; } table.lb2 th:nth-child(8) { width: 10%; }
table.lb2 .lb-1l { max-width: 100%; } table.lb2 td { overflow-wrap: anywhere; }
table.lb2 tr.lb-det > td:nth-child(2) { overflow: visible; }
.lb-xbar > .small { flex: 1 1 300px; min-width: 0; }
@media (max-width: 760px) { table.lb2 { table-layout: auto; } }
table.lb2 th { white-space: normal; } table.lb2 td.nowrap { white-space: normal; }
table.lb2 .lb-st .tag { white-space: normal; text-align: left; } table.lb2 .lb-st { flex-wrap: nowrap; align-items: flex-start; }
table.lb2 td.nowrap { white-space: normal !important; }
/* Thưởng nhà máy trong phiếu dự án (sếp 04/11/2026). */
.fb-steps { border: 1px solid var(--line, #e2e6f0); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.fbs-head, .fbs-row { display: grid; grid-template-columns: 130px 170px minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.fbs-row input { width: 100%; box-sizing: border-box; margin: 0; }
@media (max-width: 640px) { .fbs-head { display: none; } .fbs-row { grid-template-columns: 1fr 1fr 40px; } .fbs-row .fbs-n { grid-column: 1 / 3; grid-row: 2; } }

/* Sức khỏe công ty · 8 chỉ số (Tổng quan công ty, 04/11/2026) */
.tq8 { margin-bottom: 14px; }
.tq8-hd { gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tq8-cnt { border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 600; }
.tq8-cnt.g, .tq8-k.g .tq8-dot { background: var(--good-soft); color: var(--good); }
.tq8-cnt.o, .tq8-k.o .tq8-dot { background: var(--warn-soft); color: var(--warn); }
.tq8-cnt.r, .tq8-k.r .tq8-dot { background: var(--bad-soft); color: var(--bad); }
.tq8-k.x .tq8-dot { background: var(--line); color: var(--muted); }
.tq8-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1000px) { .tq8-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tq8-g { grid-template-columns: 1fr; } }
.tq8-k { font: inherit; color: inherit; text-align: left; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: 12px; padding: 12px 14px 10px; position: relative; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tq8-k:hover, .tq8-k.on { box-shadow: 0 2px 10px rgba(5, 10, 107, .1); }
.tq8-k.on { outline: 2px solid var(--brand); outline-offset: -1px; }
.tq8-k.g { border-top-color: var(--good); } .tq8-k.o { border-top-color: #f0a020; } .tq8-k.r { border-top-color: var(--bad); }
.tq8-k small { color: var(--muted); font-size: 12.5px; font-weight: 600; padding-right: 76px; }
.tq8-dot { position: absolute; top: 10px; right: 12px; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 0 8px; }
.tq8-v { font-size: 24px; font-weight: 800; color: var(--dh-navy, #050a6b); line-height: 1.2; }
.tq8-v em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); }
.tq8-c { font-size: 12.5px; overflow-wrap: anywhere; }
.tq8-up { color: var(--good); font-weight: 600; } .tq8-dn { color: var(--bad); font-weight: 600; }
.tq8-who { font-size: 11.5px; color: var(--muted); margin-top: auto; padding-top: 4px; border-top: 1px dashed var(--line); }
.tq8-drill { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--brand-soft); font-size: 13.5px; }

/* Ban Giám đốc › mỗi chỉ số một trang (04/11/2026) */
.cs8-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cs8-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 4px 12px; font-size: 13px; color: inherit; text-decoration: none; }
.cs8-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.cs8-chip.g i { background: var(--good); } .cs8-chip.o i { background: #f0a020; } .cs8-chip.r i { background: var(--bad); }
.cs8-chip.on { border-color: var(--brand); background: var(--brand-soft); font-weight: 700; }
.cs8-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .cs8-main { grid-template-columns: 1fr; } }
.cs8-k { width: 100%; cursor: default; }
.cs8-k .tq8-v { font-size: 34px; }
.cs8-list { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.cs8-go { display: inline-block; }
.cs8-rule { line-height: 1.8; }

/* Chi thưởng · dòng chảy tiền thưởng (phương án A, 04/11/2026) */
.bn-flow-card { margin-top: 10px; }
.bn-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) { .bn-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; } .bn-st::before { display: none; } }
@media (max-width: 480px) { .bn-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bn-st { position: relative; text-align: center; padding: 6px 6px 8px; border-radius: 12px; color: inherit; text-decoration: none; }
.bn-st::before { content: ""; position: absolute; top: 25px; left: -50%; width: 100%; height: 3px; background: var(--line); }
.bn-st:first-child::before { display: none; }
.bn-st.has::before, .bn-st.now::before { background: linear-gradient(90deg, var(--dh-blue, #4169ce), var(--dh-teal, #3cc6cf)); }
.bn-st .c { position: relative; z-index: 1; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 999px; margin: 0 auto; display: inline-grid; place-items: center; font-weight: 800; font-size: 15px; background: #eef0f6; color: var(--muted); border: 3px solid var(--card); }
.bn-st.has .c { background: var(--dh-blue, #4169ce); color: #fff; }
.bn-st.now .c { background: var(--dh-orange, #f26a1b); color: #fff; box-shadow: 0 0 0 4px rgba(242, 106, 27, .18); }
.bn-st b { display: block; font-size: 12.5px; margin-top: 6px; }
.bn-st small { display: block; color: var(--muted); font-size: 11.5px; }
.bn-st:hover { background: var(--brand-soft); }
.bn-st.sel { background: var(--brand-soft); outline: 2px solid var(--brand); outline-offset: -2px; }
.bn-bars { display: flex; gap: 4px; }
.bn-bars i { width: 22px; height: 6px; border-radius: 3px; background: var(--line); }
.bn-bars i.d { background: var(--good); } .bn-bars i.n { background: var(--dh-orange, #f26a1b); }

/* Người lao động kết hợp (sếp duyệt 04/11/2026): Trạng thái trong hàng bộ lọc, ô lọc tự chọn, hàng Thiếu người gọn, tải lên Excel */
.fb-pill.opt > .fb-b { border-style: dashed; }
.fb-pick { color: var(--dh-blue, #4169ce); font-weight: 600; }
.fb-pop .fb-gh { letter-spacing: .04em; font-size: 11.5px; }
.fb-pop .fb-fixed label { display: flex; align-items: center; gap: 6px; color: var(--muted, #6b7391); padding: 2px 8px; }
.fb-pop .fb-fixed label em, .lb-stpop em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--dh-blue, #4169ce); }
.lb-stp > .fb-b { font-weight: 600; }
.lb-stpop { min-width: 290px; max-height: 70vh; overflow: auto; gap: 4px; }
.lb-stpop label { display: flex; align-items: center; gap: 6px; margin: 0; padding: 3px 8px; border-radius: 6px; cursor: pointer; font-weight: 500; }
.lb-stpop label:hover { background: #f3f6fd; }
.lb-stpop .lb-cl { border-top: 1px solid var(--line, #e2e6f0); padding-top: 4px; }
.lb-stpop .lb-clh { font-weight: 700; color: var(--dh-navy, #050a6b); }
.lb-stpop .lb-cls { padding-left: 26px; }
.lb-stpop input { width: auto; }
.lb-pjs1 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.lb-pj1 { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line, #e2e6f0); border-radius: 10px; padding: 6px 10px; font-size: 12.5px; color: inherit; text-decoration: none; }
.lb-pj1:hover { border-color: var(--dh-blue, #4169ce); }
.lb-pj1.selected { border-color: var(--dh-blue, #4169ce); background: #eef2fb; }
.lb-pj1 b { color: var(--dh-navy, #050a6b); }
.lb-pj1 .lb-trk { width: 60px; height: 5px; display: inline-block; margin: 0; }
.lb-pj1 .lb-short { color: #f26a1b; font-weight: 600; }
.lb-pj1.lb-pj-more { color: var(--dh-blue, #4169ce); font-weight: 600; }
.wi-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-top: 8px; }
.wi-steps > div { border: 1px solid var(--line, #e2e6f0); border-radius: 10px; padding: 8px 10px; font-size: 13px; display: flex; gap: 8px; align-items: flex-start; }
.wi-steps b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #050a6b; color: #fff; display: grid; place-items: center; font-size: 12px; }
.wi-sum { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wi-sum span[class^=wi-] { border-radius: 999px; padding: 3px 11px; font-weight: 600; font-size: 13px; }
.wi-ok { background: #e6f6ec; color: #1f9d55; } .wi-dup { background: #fff4d6; color: #a86a08; } .wi-bad { background: #fdeaea; color: #d64545; }
table.wi-t td { white-space: normal; vertical-align: top; } table.wi-t td:last-child { min-width: 260px; }
table.lb2 .lb-st { flex-direction: column; align-items: flex-start; gap: 4px; } table.lb2 .lb-st > * { max-width: 100%; white-space: normal; }
.fb-pop label, .lb-stpop label { user-select: none; -webkit-user-select: none; }