/* ============ Design tokens (theo palette đã validate) ============ */
:root {
  --surface-1: #fcfcfb;
  --page: #f9f9f7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --series-1: #2a78d6;   /* CPQC — blue */
  --series-2: #1baf7a;   /* Doanh thu — aqua */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --good-text: #006300;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface-1: #1a1a19;
    --page: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --grid: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --series-1: #3987e5;
    --series-2: #199e70;
    --good-text: #0ca30c;
    --shadow: 0 1px 3px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--text-primary);
  font-size: 14px;
}
.hidden { display: none !important; }

/* ============ Login — hướng A (GĐ duyệt 04/09): trái tầm nhìn + hình GIÀU TOÀN DIỆN · phải logo + đăng nhập ============ */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif; color: #1c2024; }
.login-left { background: #f6f6f3; position: relative; display: flex; flex-direction: column; padding: 34px 44px 26px; }
.login-left::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 30% 30%, #ffffff 0%, rgba(255,255,255,0) 70%), radial-gradient(60% 50% at 85% 90%, #ffe9dc 0%, rgba(255,233,220,0) 70%); }
.login-left > * { position: relative; }
.lgn-brand { display: flex; align-items: center; gap: 10px; }
.lgn-brand img { width: 26px; height: auto; }
.lgn-brand b { font-weight: 800; font-size: 13px; letter-spacing: .06em; color: #d0261f; }
.lgn-brand small { display: block; font-size: 9.5px; letter-spacing: .18em; color: #7c848c; font-weight: 600; }
.lgn-eyebrow { font-size: 10.5px; letter-spacing: .24em; font-weight: 700; color: #d0261f; margin-top: 26px; }
.lgn-hl { font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin: 6px 0 4px; color: #1c2024; }
.lgn-hl span { color: #d0261f; }
.lgn-sub { color: #5b636a; font-size: 14px; max-width: 40ch; line-height: 1.55; }
.lgn-art { flex: 1; display: grid; place-items: center; padding: 14px 0 8px; }
.login-muctieu { width: min(100%, 520px, calc(100vh - 300px)); height: auto; display: block; border-radius: 14px; box-shadow: 0 24px 50px rgba(30, 40, 50, .14), 0 2px 6px rgba(30, 40, 50, .06); }
.lgn-pillars { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 10.5px; letter-spacing: .14em; font-weight: 700; color: #5b636a; }
.lgn-pillars i { width: 4px; height: 4px; border-radius: 50%; background: #f37021; }
.login-card { background: #fff; display: flex; flex-direction: column; padding: 26px 44px; }
.lgn-form { margin: auto 0; width: 100%; max-width: 360px; align-self: center; display: flex; flex-direction: column; }
.login-logo { width: 118px; height: auto; display: block; margin: 0 0 8px; }
.lgn-h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0; text-align: left; color: #1c2024; }
.lgn-h2s { color: #7c848c; font-size: 12.5px; margin: 2px 0 16px; }
.lgn-form label { font-size: 11.5px; font-weight: 700; color: #4b5258; margin: 10px 0 5px; }
.lgn-in { display: flex; align-items: center; gap: 8px; border: 1px solid #e4e6e9; border-radius: 10px; padding: 0 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.lgn-in:focus-within { border-color: #f37021; box-shadow: 0 0 0 3px rgba(243, 112, 33, .15); }
.lgn-in .ic { color: #9aa1a8; font-size: 14px; flex: none; }
.lgn-in select, .lgn-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 11px 0; font: inherit; font-size: 13.5px; color: #1c2024; }
.lgn-in input::placeholder { color: #9aa1a8; }
.lgn-eye { border: 0; background: transparent; color: #9aa1a8; font: inherit; font-size: 12px; cursor: pointer; padding: 4px 0 4px 6px; flex: none; }
.lgn-eye:hover { color: #d0261f; }
.lgn-row { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 14px; font-size: 12px; color: #4b5258; }
.login-rem { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; cursor: pointer; user-select: none; font-weight: 600; }
.login-rem input { width: 15px; height: 15px; accent-color: #d0261f; margin: 0; }
.lgn-forgot { border: 0; background: transparent; color: #d0261f; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.login-card #login-btn { background: linear-gradient(90deg, #f37021, #d0261f); border: 0; font-weight: 800; letter-spacing: .01em; padding: 12px; border-radius: 11px; box-shadow: 0 8px 20px rgba(208, 38, 31, .22); font-family: inherit; }
.form-error { color: var(--critical); font-size: 13px; min-height: 18px; text-align: center; margin: 8px 0 0; }
.lgn-hint { font-size: 12px; color: #5b636a; background: #fbf1ec; border: 1px solid #f6d2c8; border-radius: 10px; padding: 8px 10px; margin: 6px 0 0; }
.lgn-foot { display: flex; justify-content: space-between; color: #9aa1a8; font-size: 10.5px; margin-top: auto; padding-top: 14px; }
.login-quick { display: flex; flex-direction: column; gap: 6px; margin: 0 0 4px; }
.lqa { display: flex; align-items: center; gap: 10px; border: 1px solid #e4e6e9; border-radius: 12px; padding: 8px 10px; cursor: pointer; background: #fff; font: inherit; text-align: left; width: 100%; position: relative; transition: border-color .15s, box-shadow .15s; color: #1c2024; }
.lqa:hover { border-color: #f37021; box-shadow: 0 4px 14px rgba(243, 112, 33, .14); }
.lqa .av { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 11px; flex: none; }
.lqa .tx { min-width: 0; }
.lqa .nm { display: block; font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lqa .rl { display: block; font-weight: 500; color: #7c848c; font-size: 11px; }
.lqa .go { margin-left: auto; color: #d0261f; font-weight: 700; font-size: 11.5px; white-space: nowrap; flex: none; }
.lqa .rm { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #e4e6e9; background: #fff; color: #7c848c; font-size: 11px; cursor: pointer; display: none; line-height: 20px; text-align: center; }
.lqa:hover .rm, .lqa .rm:focus { display: block; }
@media (hover: none) { .lqa .rm { display: block; } }
.login-or { display: flex; align-items: center; gap: 10px; color: #9aa1a8; font-size: 11px; margin: 6px 0 8px; }
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: #e4e6e9; }
@media (max-width: 860px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-card { order: 1; padding: 22px 20px 16px; }
  .lgn-form { margin: 0 auto; }
  .login-logo { width: 96px; margin: 0 auto 6px; }
  .lgn-h2, .lgn-h2s { text-align: center; }
  .lgn-foot { display: none; }
  .login-left { order: 2; padding: 18px 20px 24px; }
  .lgn-brand, .lgn-eyebrow, .lgn-hl, .lgn-sub { display: none; }
  .lgn-art { padding: 0 0 10px; }
  .login-muctieu { width: min(100%, 420px); }
  .lgn-pillars { justify-content: center; }
}

/* ============ Layout ============ */
.app { min-height: 100vh; display: flex; flex-direction: column; }
/* Thanh đầu trang (đã duyệt 16/07): logo huy hiệu gradient, tab viên thuốc có icon,
   bên phải gọn = chọn tháng · chuông · thẻ người dùng (bấm mới sổ menu) */
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 9px 16px;
  background: var(--surface-1); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 10px rgba(15, 30, 60, .05);
}
.brand { display: flex; align-items: center; gap: 9px; white-space: nowrap; flex: none; }
.brand .mk {
  width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; background: #fff; border: 1px solid #f6d2c8;
  box-shadow: 0 2px 8px rgba(208, 38, 31, .22); /* 🔥 04/09: ô logo nền trắng cho ngọn lửa G7 */
}
.brand .mk img { width: 26px; height: 29px; object-fit: contain; display: block; }
.brand .bt b { color: #d0261f; }
.brand .bt { line-height: 1.15; }
.brand .bt b { font-size: 15px; letter-spacing: .01em; }
.brand .bt small { display: block; font-size: 9px; font-weight: 700; letter-spacing: .09em; color: var(--text-muted); }
.tabs {
  display: flex; gap: 3px; margin: 0 auto;
  background: var(--page); border: 1px solid var(--grid); border-radius: 99px; padding: 3px;
  /* Menu dài hơn màn hình (GĐ nhiều tab) thì tự cuộn NGANG TRONG thanh —
     cả trang không bao giờ tràn ngang / bị kéo lệch nữa (GĐ báo 30/07) */
  flex: 0 1 auto; min-width: 0; overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: 6px; border: none; background: transparent;
  padding: 7px 13px; border-radius: 99px; white-space: nowrap;
  font-size: 13px; font-weight: 700; cursor: pointer; color: var(--text-secondary); font-family: inherit;
}
.tab .tic { font-size: 14px; line-height: 1; }
.tab:hover { background: var(--surface-1); color: var(--text-primary); }
.tab.active {
  background: linear-gradient(135deg, var(--series-1), #2e6dc2); color: #fff;
  box-shadow: 0 2px 7px rgba(46, 109, 194, .35);
}
.badge {
  background: var(--critical); color: #fff; border-radius: 10px; padding: 1px 7px;
  font-size: 11px; font-weight: 700; margin-left: 4px;
}
/* 🧭 gom nhóm thanh công cụ (GĐ duyệt demo v2 07/08): icon hạt tròn + chip tab đang
   mở trong nút xanh + chấm đỏ bám góc nút + vạch ngăn sau Tổng quan */
.tabs { padding: 5px 6px; }
/* 📐 07/09: menu nhóm ghim theo nút (position: fixed do JS đặt) — thanh menu giữ cuộn ngang, không còn mở tràn đè cụm phải */
.navgrp { position: relative; display: inline-flex; flex: none; }
.tab { position: relative; padding: 5px 13px 5px 7px; color: var(--text-secondary); }
.tab .tic { width: 26px; height: 26px; border-radius: 99px; background: var(--surface-1);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13.5px; flex: none; }
.tab.active .tic { background: rgba(255, 255, 255, .22); }
#main-tabs .tab > .badge { position: absolute; top: -4px; right: 1px; margin: 0; font-size: 10px;
  padding: 0 5px; min-width: 16px; line-height: 1.35; text-align: center; border: 2px solid var(--page); }
.navsep { width: 1px; height: 22px; background: var(--grid); margin: 0 3px; flex: none; align-self: center; }
.tab .gcar { font-size: 8px; opacity: .5; margin-left: 2px; }
.tab.active .gcar { opacity: .9; }
.tab .gcur { display: inline-block; background: rgba(255, 255, 255, .92); color: #2e6dc2;
  font-size: 11px; font-weight: 800; border-radius: 99px; padding: 2px 9px; margin-left: 6px; }
.tab .gcur:empty { display: none; }
.navmenu {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 240; min-width: 205px;
  background: var(--page); border: 1px solid var(--grid); border-radius: 12px; padding: 6px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .18); display: none;
}
.navgrp.open .navmenu { display: block; }
.navmi {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font: inherit;
  font-weight: 650; color: var(--text-primary); background: transparent; border: none;
  border-radius: 9px; padding: 8px 11px; cursor: pointer; white-space: nowrap;
}
.navmi .tic { width: 28px; height: 28px; border-radius: 9px; background: var(--surface-1);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; flex: none; }
.navmi:hover { background: var(--surface-1); }
.navmi.on { background: linear-gradient(135deg, var(--series-1), #2e6dc2); color: #fff; }
.navmi.on .tic { background: rgba(255, 255, 255, .22); }
.navmi .badge { margin-left: auto; }
.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.month-picker {
  padding: 7px 10px; border: 1px solid var(--baseline); border-radius: 8px;
  background: var(--page); color: var(--text-primary); font-family: inherit;
}
.topbar .month-picker { border-radius: 99px; padding: 6px 12px; font-weight: 700; font-size: 12.5px; background: var(--surface-1); border-width: 1.5px; }
/* 📅 bộ chọn tháng mới trên topbar (GĐ nhờ 02/08) */
.mp-wrap { position: relative; display: flex; align-items: center; gap: 4px; }
.mp-nav {
  border: 1.5px solid var(--baseline); background: var(--surface-1); color: var(--text-primary);
  border-radius: 99px; width: 28px; height: 28px; cursor: pointer; font-size: 15px; line-height: 1; font-family: inherit; flex: none;
}
.mp-btn {
  display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--baseline); border-radius: 99px;
  padding: 5px 13px; background: var(--surface-1); color: var(--text-primary); cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 12.5px; white-space: nowrap;
}
.mp-btn .mp-car { font-size: 9px; color: var(--text-muted); }
.mp-nav:hover, .mp-btn:hover { border-color: var(--series-1); color: var(--series-1); }
.mp-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; width: 238px;
  background: var(--surface-1); border: 1px solid var(--baseline); border-radius: 14px;
  padding: 10px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}
.mp-yr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14.5px; }
.mp-yr button {
  border: 1px solid var(--baseline); background: transparent; color: var(--text-primary);
  border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-size: 14px; font-family: inherit;
}
.mp-yr button:hover { border-color: var(--series-1); color: var(--series-1); }
.mp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mp-grid button {
  border: 1px solid var(--grid); background: transparent; color: var(--text-primary);
  border-radius: 9px; padding: 9px 0; cursor: pointer; font-weight: 700; font-size: 12.5px; font-family: inherit;
}
.mp-grid button:hover { border-color: var(--series-1); color: var(--series-1); }
.mp-grid button.now { border-style: dashed; border-color: var(--baseline); }
.mp-grid button.on { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.mp-now {
  margin-top: 8px; width: 100%; border: none; background: transparent; color: var(--series-1);
  font-weight: 700; cursor: pointer; font-family: inherit; font-size: 12px; padding: 5px 0;
}
.mp-now:hover { text-decoration: underline; }
.user-menu { position: relative; }
.mechip {
  display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--baseline); border-radius: 99px;
  padding: 3px 11px 3px 3px; background: var(--surface-1); cursor: pointer; font-family: inherit; white-space: nowrap;
}
.mechip .av {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; letter-spacing: .02em;
  background: linear-gradient(135deg, #3f86df, #1d4e94);
}
.mechip .who { line-height: 1.12; text-align: left; }
.mechip .who b { font-size: 12px; color: var(--text-primary); }
.mechip .who small { display: block; font-size: 9px; color: var(--text-muted); font-weight: 700; letter-spacing: .05em; }
.mechip .car { color: var(--text-muted); font-size: 9px; }
.memenu {
  position: absolute; right: 0; top: calc(100% + 7px); z-index: 60; min-width: 185px;
  background: var(--surface-1); border: 1px solid var(--grid); border-radius: 12px; padding: 5px;
  box-shadow: 0 8px 26px rgba(15, 30, 60, .16);
}
.memenu button {
  display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit;
  font-size: 13px; font-weight: 650; color: var(--text-primary); padding: 9px 11px; border-radius: 8px; cursor: pointer;
}
.memenu button:hover { background: var(--page); }
.topbar .bellbtn {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--baseline);
  background: var(--surface-1); font: inherit; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: none;
}
/* Thanh điều hướng dưới đáy — chỉ hiện trên điện thoại */
.bnav { display: none; }

main { padding: 20px; max-width: 1280px; margin: 0 auto; width: 100%; }

/* ============ Buttons ============ */
.btn {
  border: 1px solid transparent; border-radius: 8px; padding: 9px 16px; font-size: 14px;
  cursor: pointer; font-family: inherit; font-weight: 500; display: inline-flex;
  align-items: center; gap: 6px; transition: filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn-primary { background: var(--series-1); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn-danger { background: transparent; color: var(--critical); border-color: var(--critical); }
.btn-good { background: var(--good); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; margin-top: 12px; }

/* ============ Cards & stat tiles ============ */
.card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 18px; margin-bottom: 18px;
}
.card h3 { font-size: 14px; color: var(--text-secondary); font-weight: 600; margin-bottom: 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-tile {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 14px 16px;
}
.stat-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.stat-value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.stat-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h2 { font-size: 18px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filters select {
  padding: 7px 10px; border: 1px solid var(--baseline); border-radius: 8px;
  background: var(--surface-1); color: var(--text-primary); font-family: inherit;
}

/* ============ Tables ============ */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; padding: 9px 10px; color: var(--text-muted); font-size: 12px;
  border-bottom: 1px solid var(--baseline); white-space: nowrap; font-weight: 600;
}
td { padding: 9px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
tr:hover td { background: color-mix(in srgb, var(--series-1) 5%, transparent); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.name-cell { font-weight: 600; white-space: nowrap; }
.sub { color: var(--text-muted); font-size: 12px; }
tfoot td { font-weight: 700; border-top: 2px solid var(--baseline); }

/* ============ Status pills ============ */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid;
}
.pill-cho_leader { color: var(--serious); border-color: var(--serious); }
.pill-cho_gd { color: var(--warning); border-color: var(--warning); }
.pill-cho_ketoan { color: var(--series-1); border-color: var(--series-1); }
.pill-da_chuyen { color: var(--good-text); border-color: var(--good); }
.pill-tu_choi { color: var(--critical); border-color: var(--critical); }

/* ============ Forms / modal ============ */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.modal {
  background: var(--surface-1); border-radius: 16px; box-shadow: var(--shadow);
  padding: 24px; width: 100%; max-width: 560px; border: 1px solid var(--border);
}
.modal h3 { font-size: 16px; margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--baseline); border-radius: 8px;
  background: var(--page); color: var(--text-primary); font-size: 14px; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--series-1); outline-offset: -1px; }
.money-preview { font-size: 12px; color: var(--series-1); font-weight: 600; min-height: 16px; margin-top: 2px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ============ Charts ============ */
.chart-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 980px) { .chart-grid { grid-template-columns: 3fr 2fr; } }
.chart-box svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 16px; margin-bottom: 8px; font-size: 12.5px; color: var(--text-secondary); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.chart-tooltip {
  position: fixed; z-index: 200; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow); padding: 8px 12px; font-size: 12.5px;
  pointer-events: none; max-width: 260px;
}
.chart-tooltip .tt-title { font-weight: 700; margin-bottom: 4px; }
.chart-tooltip .tt-row { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.chart-tooltip .tt-row b { color: var(--text-primary); margin-left: auto; font-variant-numeric: tabular-nums; }

/* ============ Toast ============ */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--text-primary); color: var(--page); padding: 11px 20px;
  border-radius: 10px; font-size: 14px; z-index: 300; box-shadow: var(--shadow);
}

/* ============ History timeline ============ */
.history { margin-top: 10px; border-left: 2px solid var(--grid); padding-left: 12px; display: flex; flex-direction: column; gap: 6px; }
.history .h-item { font-size: 12.5px; color: var(--text-secondary); }
.history .h-item b { color: var(--text-primary); }

.empty { text-align: center; color: var(--text-muted); padding: 30px 10px; }
.mono { font-variant-numeric: tabular-nums; }
.pos { color: var(--good-text); font-weight: 600; }
.neg { color: var(--critical); font-weight: 600; }

@media (max-width: 700px) {
  main { padding: 12px; }
  .topbar { padding: 8px 10px; gap: 8px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ============ Bản 3: Chi phí cá nhân theo tài khoản ============ */
:root { --warn-text: #8a6400; }
@media (prefers-color-scheme: dark) { :root { --warn-text: #fab219; } }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.chip {
  border: 1px solid var(--baseline); background: var(--surface-1); color: var(--text-secondary);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.chip:hover { border-color: var(--series-1); color: var(--series-1); }
.chip.active { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.day-chips { row-gap: 6px; }
.chip.day { padding: 4px 10px; font-variant-numeric: tabular-nums; }
.chip.has-data:not(.active)::after { content: '•'; margin-left: 4px; color: var(--series-2); }

.matrix input.mx-in {
  width: 108px; padding: 6px 8px; text-align: right; font-size: 13px;
  border: 1px solid var(--baseline); border-radius: 7px; background: var(--page);
  color: var(--text-primary); font-variant-numeric: tabular-nums; font-family: inherit;
}
.matrix input.mx-in:focus { outline: 2px solid var(--series-1); outline-offset: -1px; }
.matrix .acc-name { font-weight: 600; white-space: nowrap; }
.matrix .total-row td { background: color-mix(in srgb, var(--series-1) 7%, transparent); font-weight: 700; }

.pct-pill {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
  padding: 2px 10px; font-weight: 700; font-size: 12px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pct-ok { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-text); }
.pct-warn { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warn-text); }
.pct-bad { background: color-mix(in srgb, var(--critical) 13%, transparent); color: var(--critical); }

.rev-bar {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--grid);
}
.rev-bar .field { min-width: 160px; flex: 1; max-width: 220px; }
.rev-bar .btn { margin-left: auto; }

.metric-strip {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
  margin-top: 12px; background: var(--page); border: 1px solid var(--grid);
  border-radius: 10px; padding: 10px 14px;
}
.metric-strip .m { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.metric-strip .m b { display: block; font-size: 14px; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ===== CPCN Theo tài khoản kiểu ma trận Ví NCC (GĐ duyệt 24/07) ===== */
.pacclist { display: flex; flex-direction: column; gap: 8px; }
.pacc { background: var(--surface-1); border: 1px solid var(--grid); border-radius: 13px; overflow: hidden; }
.pacc.dim .pacc-head { opacity: .55; }
.pacc-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; flex-wrap: wrap; }
.pacc-head:hover { background: color-mix(in srgb, var(--series-1) 4%, transparent); }
.pacc.open .pacc-head { border-bottom: 1px solid var(--grid); background: color-mix(in srgb, var(--series-1) 4%, var(--surface-1)); opacity: 1; }
.pacc-head .car { font-size: 10px; color: var(--text-muted); width: 12px; flex: none; }
.pacc-head .nm b { font-size: 13.5px; }
.pacc-head .nm small { color: var(--text-secondary); font-size: 11px; font-weight: 600; display: block; }
.pacc-head .nm .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.pacc-head .nm .dot.on { background: #22c55e; }
.pacc-head .nm .dot.off { background: #9aa3b5; }
.pacc-head .sums { margin-left: auto; display: flex; gap: 16px; text-align: right; flex-wrap: wrap; }
.pacc-head .sums .l { font-size: 9px; font-weight: 800; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; display: block; }
.pacc-head .sums .n { font-size: 13px; font-weight: 800; white-space: nowrap; }
.pacc-head .sums .n.end { color: var(--series-1); }
.pacc-head .sums .n.neg { color: var(--critical); }
.pgrid .pgctl { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--grid); }
.pgrid .pgctl label { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: var(--text-muted); }
.pgrid .pgctl select, .pgrid .pgctl input { display: block; margin-top: 3px; padding: 6px 9px; border: 1.5px solid var(--grid); border-radius: 9px; background: var(--surface-1); color: var(--text-primary); font: inherit; font-size: 12.5px; min-width: 150px; }
.pgrid .pgctl .aidbox { margin: 0; }
.pgrid .pgbtns { margin-left: auto; display: flex; gap: 6px; }
.pgrid .pgscroll { overflow-x: auto; }
.pgrid table { border-collapse: collapse; font-size: 12px; white-space: nowrap; width: 100%; }
.pgrid th { color: var(--text-muted); font-size: 9.5px; letter-spacing: .04em; text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--grid); background: var(--page); }
.pgrid th.lb0 { text-align: left; position: sticky; left: 0; z-index: 2; background: var(--page); }
.pgrid td { padding: 5px 8px; border-bottom: 1px solid var(--grid); text-align: right; min-width: 76px; }
.pgrid td:first-child { text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--text-secondary); position: sticky; left: 0; background: var(--surface-1); z-index: 1; min-width: 104px; }
.pgrid th.tot, .pgrid td.tot { position: sticky; right: 0; background: var(--page); font-weight: 800; border-left: 1.5px solid var(--series-1); z-index: 2; }
.pgrid tr.opn td { background: var(--page); color: var(--text-muted); font-size: 11px; }
.pgrid tr.opn td:first-child { color: var(--series-1); background: var(--page); }
.pgrid tr.mu td { color: var(--text-muted); }
.pgrid tr.mu td:first-child { color: var(--text-muted); }
.pgrid tr.end td { background: color-mix(in srgb, var(--series-1) 7%, var(--surface-1)); font-weight: 800; border-top: 1.5px solid var(--series-1); }
.pgrid tr.end td:first-child { color: var(--series-1); background: color-mix(in srgb, var(--series-1) 7%, var(--surface-1)); }
.pgrid .neg { color: var(--critical); }
.pgrid .pen { color: #d97706; }
.pgrid .h-in { width: 72px; padding: 4px 6px; border: 1.5px solid var(--grid); border-radius: 7px; background: var(--surface-1); color: var(--text-primary); font: inherit; font-size: 12px; text-align: right; }
.pgrid .h-in:focus { border-color: var(--series-1); outline: 0; }
.pgrid .h-in.chg { border-color: #d97706; }
.filters #acc-sort { max-width: 240px; }

.acc-layout { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 980px) { .acc-layout { grid-template-columns: 3fr 2fr; } }
.acc-detail { background: var(--page); border: 1px solid var(--grid); border-radius: 12px; padding: 14px; }
.group-row td {
  background: var(--page); color: var(--text-muted); font-size: 11.5px;
  font-weight: 700; letter-spacing: .04em; padding: 6px 10px;
}
.acc-row { cursor: pointer; }
.acc-row.sel td { background: color-mix(in srgb, var(--series-1) 10%, transparent); }
.day-row { cursor: pointer; }

.mini-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.mini-tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.mini-tile .lb { font-size: 10px; color: var(--text-muted); font-weight: 700; letter-spacing: .03em; }
.mini-tile .vl { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }

.search-input {
  padding: 7px 12px; border: 1px solid var(--baseline); border-radius: 8px;
  background: var(--surface-1); color: var(--text-primary); font-family: inherit; min-width: 210px;
}

/* Ô tự tính (TK Facebook): chỉ đọc, nét đứt */
.matrix input.mx-ro {
  background: transparent; border-style: dashed; color: var(--text-secondary);
  cursor: default; pointer-events: none;
}

/* ============ Thiết kế lại mục "Theo tài khoản" (đã duyệt) ============ */
.sumline { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sum { background: var(--page); border: 1px solid var(--grid); border-radius: 10px; padding: 9px 12px; }
.sum .lb { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); }
.sum .vl { font-size: 16.5px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 1px; }
.sum.hero { background: color-mix(in srgb, var(--series-1) 9%, transparent); border-color: var(--series-1); }
.sum.hero .lb { color: var(--series-1); }

.group-lb { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--text-muted); margin: 10px 2px 6px; }
.acc-card {
  display: grid; grid-template-columns: minmax(170px, 1.35fr) 1fr 0.9fr 0.9fr 1fr; gap: 8px;
  align-items: center; background: var(--page); border: 1px solid var(--grid);
  border-radius: 10px; padding: 10px 12px; cursor: pointer; margin-bottom: 8px;
}
.acc-card:hover { border-color: var(--series-1); }
.acc-card.sel { border-color: var(--series-1); background: color-mix(in srgb, var(--series-1) 8%, transparent); }
.acc-card .who .nm { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acc-card .m { text-align: right; }
.acc-card .m .lb { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); }
.acc-card .m .vl { font-weight: 600; font-size: 13px; line-height: 1.35; }
.acc-card .fixhint {
  grid-column: 1 / -1; font-size: 11.5px; color: var(--warn-text);
  background: color-mix(in srgb, var(--warning) 16%, transparent); border-radius: 7px; padding: 4px 9px;
}
.plat-badge { font-size: 9.5px; font-weight: 800; border-radius: 5px; padding: 1px 6px; letter-spacing: .02em; }
.plat-badge.fb { background: color-mix(in srgb, var(--series-1) 12%, transparent); color: var(--series-1); }
.plat-badge.yt { background: color-mix(in srgb, var(--critical) 11%, transparent); color: var(--critical); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot.on { background: var(--good); } .dot.off { background: var(--text-muted); }
.balpill { display: inline-block; border-radius: 8px; padding: 3px 10px; font-weight: 800; font-size: 14px; }
.balpill.pos { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good-text); }
.balpill.neg { background: color-mix(in srgb, var(--critical) 11%, transparent); color: var(--critical); }
.balpill.zero { background: var(--page); color: var(--text-muted); border: 1px dashed var(--baseline); font-weight: 600; }

.totalbar {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  border-top: 2px solid var(--baseline); margin-top: 10px; padding-top: 10px;
  font-weight: 700; font-size: 13.5px;
}
.totalbar .sub { font-weight: 400; }
.totalbar .pos { color: var(--good-text); } .totalbar .neg { color: var(--critical); }

.ladder { border: 1px solid var(--grid); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.lrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--grid); font-size: 13.5px; }
.lrow:last-child { border-bottom: none; }
.lrow .op { color: var(--text-muted); width: 16px; font-weight: 700; flex: none; }
.lrow .what { flex: 1; color: var(--text-secondary); }
.lrow .amt { font-weight: 600; flex: none; }
.lrow.result { background: color-mix(in srgb, var(--series-1) 9%, transparent); font-weight: 800; }
.lrow.result .what, .lrow.result .amt { color: var(--text-primary); font-size: 14px; }
.lrow.dim .amt, .lrow.dim .what { color: var(--text-muted); font-weight: 400; }
.lrow .amt.neg { color: var(--critical); }

@media (max-width: 640px) {
  .acc-card { grid-template-columns: 1fr 1fr; }
  .acc-card .who { grid-column: 1 / -1; }
  .acc-card .m { text-align: left; }
}

/* ============ Bảng tháng — thiết kế A (đã duyệt): gom khối ============ */
.legend-line { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: -4px 0 12px; font-size: 12px; color: var(--text-secondary); }

.mtable th.grp {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--text-muted);
  text-align: left; padding: 4px 10px 2px; border-bottom: none;
}
.mtable th.grp.money { color: var(--series-1); }
.mtable th.grp.result { color: var(--series-2); }
.mtable th.col {
  font-size: 11px; color: var(--text-muted); font-weight: 600; text-align: right;
  padding: 3px 10px 7px; border-bottom: 2px solid var(--baseline); white-space: nowrap;
}
.mtable .sep { border-left: 1px solid var(--grid); }
.mtable td { text-align: right; white-space: nowrap; }
.mtable td.date-cell { text-align: left; font-variant-numeric: tabular-nums; }
.mtable .z { color: var(--text-muted); opacity: .5; }
.mtable td.main { font-weight: 700; }
.mtable tr.wknd td { background: color-mix(in srgb, var(--text-primary) 2.5%, transparent); }
.mtable tr.day-row { cursor: pointer; }
.mtable .barcell { position: relative; padding-bottom: 12px; }
.mtable .bar { position: absolute; right: 10px; bottom: 5px; height: 3px; border-radius: 2px; display: inline-block; }
.mtable .bar.chi { background: var(--series-1); }
.mtable .bar.ds { background: var(--series-2); }

/* Bảng tháng full: ngày chưa có số liệu mờ, ngày tương lai mờ hơn */
.mtable tr.noda td { opacity: .72; }
.mtable tr.noda td .z { opacity: .4; }
.mtable tr.fut td { opacity: .38; }
.mtable tr.fut { cursor: default; }

/* Nút ngày chưa tới: mờ, không bấm được */
.chip.fut, .chip:disabled { opacity: .35; cursor: default; }
.chip.fut:hover { border-color: var(--baseline); color: var(--text-secondary); }

/* ============ Khung cuộn cho bảng nhập liệu & bảng tháng ============ */
.scrollbox { max-height: 460px; overflow: auto; }
/* Tiêu đề ghim trên khi cuộn */
.scrollbox thead th {
  position: sticky; top: 0; background: var(--surface-1); z-index: 3;
  box-shadow: 0 1px 0 var(--baseline);
}
.scrollbox .mtable thead tr:first-child th, .scrollbox.mtable thead tr:first-child th { height: 24px; }
#month-table thead tr:first-child th { top: 0; box-shadow: none; }
#month-table thead tr:last-child th { top: 24px; }
/* Dòng tổng ghim dưới khi cuộn */
.matrix .total-row td {
  position: sticky; bottom: 0; z-index: 2;
  background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1));
  box-shadow: 0 -1px 0 var(--baseline);
}
#month-table tfoot td {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--surface-1);
  box-shadow: 0 -2px 0 var(--baseline);
}
/* TK khớp tìm kiếm: nổi bật + viền trái xanh */
.matrix tr.hit td { background: color-mix(in srgb, var(--series-1) 6%, transparent); }
.matrix tr.hit td:first-child { border-left: 3px solid var(--series-1); }

/* ============ Nhập liệu ngày — thiết kế mới (đã duyệt) ============ */
.toprow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 12px; }
.searchbox { flex: 1; min-width: 230px; max-width: 360px; position: relative; }
.searchbox input {
  width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--baseline); border-radius: 999px;
  background: var(--surface-1); color: var(--text-primary); font: inherit;
}
.searchbox::before { content: '🔍'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; }
.searchbox input:focus { outline: 2px solid var(--series-1); outline-offset: -1px; }
.seg { display: inline-flex; background: var(--page); border: 1px solid var(--grid); border-radius: 999px; padding: 3px; }
.seg button {
  border: none; background: transparent; color: var(--text-secondary); font: inherit; font-weight: 600;
  font-size: 12.5px; padding: 6px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.seg button.on { background: var(--series-1); color: #fff; }

.datestrip { display: flex; align-items: stretch; gap: 6px; margin-bottom: 14px; }
.dnav {
  flex: none; width: 34px; border: 1px solid var(--grid); border-radius: 10px;
  background: var(--surface-1); color: var(--text-secondary); font-size: 16px; cursor: pointer; font-family: inherit;
}
.dnav:hover { border-color: var(--series-1); color: var(--series-1); }
.days { display: flex; gap: 5px; overflow-x: auto; scroll-behavior: smooth; padding: 2px; scrollbar-width: thin; }
.dtile {
  flex: none; width: 52px; border: 1px solid var(--grid); border-radius: 10px; background: var(--surface-1);
  padding: 6px 0 5px; text-align: center; cursor: pointer; font-family: inherit; color: var(--text-primary);
}
.dtile:hover { border-color: var(--series-1); }
.dtile .wd { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: var(--text-muted); }
.dtile .dn { font-size: 16.5px; font-weight: 750; margin-top: 1px; font-variant-numeric: tabular-nums; }
.dtile .st { height: 6px; margin-top: 2px; }
.dtile .st .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--series-2); }
.dtile.wknd { background: var(--page); }
.dtile.wknd .wd { color: var(--critical); opacity: .7; }
.dtile.sel { background: var(--series-1); border-color: var(--series-1); }
.dtile.sel .wd, .dtile.sel .dn { color: #fff; }
.dtile.sel .st .dot { background: #fff; }
.dtile.fut, .dtile:disabled { opacity: .35; cursor: default; }
.dtile.fut:hover { border-color: var(--grid); }
.today-btn {
  flex: none; border: 1px solid var(--series-1); color: var(--series-1);
  background: color-mix(in srgb, var(--series-1) 8%, transparent);
  border-radius: 10px; font: inherit; font-weight: 700; font-size: 12px; padding: 0 12px; cursor: pointer;
}

/* Panel chốt kết quả ngày */
.closing {
  margin-top: 14px; border: 1px solid color-mix(in srgb, var(--series-1) 35%, var(--grid));
  background: color-mix(in srgb, var(--series-1) 6%, transparent); border-radius: 14px; padding: 14px 16px;
}
.closing .head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.closing .head h3 { font-size: 13px; letter-spacing: .02em; color: var(--text-primary); margin: 0; }
.close-grid { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: stretch; }
@media (max-width: 860px) { .close-grid { grid-template-columns: 1fr; } }
.inputs3 { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 10px; }
@media (max-width: 640px) { .inputs3 { grid-template-columns: 1fr; } }
.fld label { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--text-secondary); margin-bottom: 4px; }
.fld input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--baseline); border-radius: 10px;
  background: var(--surface-1); color: var(--text-primary); font: inherit; font-size: 15px; font-weight: 650;
  text-align: right; font-variant-numeric: tabular-nums;
}
.fld input:focus { outline: 2px solid var(--series-1); outline-offset: -1px; }
.fld .hint { font-size: 11px; color: var(--text-muted); margin-top: 3px; text-align: right; min-height: 14px; }
.savecol { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 190px; }
.savecol .day-sum { text-align: right; font-size: 12px; color: var(--text-secondary); }
.savecol .day-sum b { display: block; font-size: 17px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.btn-save {
  border: none; border-radius: 12px; background: var(--series-1); color: #fff; font: inherit;
  font-weight: 800; font-size: 15px; padding: 13px 22px; cursor: pointer; box-shadow: var(--shadow);
}
.btn-save:hover { filter: brightness(1.08); }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin-top: 12px; }
.mt { background: var(--surface-1); border: 1px solid var(--grid); border-radius: 10px; padding: 7px 10px; }
.mt .lb { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: var(--text-muted); }
.mt .vl { font-size: 14.5px; font-weight: 750; font-variant-numeric: tabular-nums; margin-top: 1px; }
.mt .vl .z { color: var(--text-muted); opacity: .55; font-weight: 500; }
.mt.hero.b-ok { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--surface-1)); }
.mt.hero.b-ok .lb, .mt.hero.b-ok .vl { color: var(--good-text); }
.mt.hero.b-warn { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, var(--surface-1)); }
.mt.hero.b-warn .lb, .mt.hero.b-warn .vl { color: var(--warn-text); }
.mt.hero.b-bad { border-color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, var(--surface-1)); }
.mt.hero.b-bad .lb, .mt.hero.b-bad .vl { color: var(--critical); }

.warnline { margin-top: 10px; font-size: 12.5px; font-weight: 700; border-radius: 8px; padding: 6px 12px; display: inline-block; }
.warnline.w-ok { color: var(--good-text); background: color-mix(in srgb, var(--good) 12%, transparent); }
.warnline.w-warn { color: var(--warn-text); background: color-mix(in srgb, var(--warning) 18%, transparent); }
.warnline.w-bad { color: var(--critical); background: color-mix(in srgb, var(--critical) 11%, transparent); }

/* ============ Ứng tiền — bản mới (đã duyệt) ============ */
.adv-table tr.today td { background: color-mix(in srgb, var(--series-1) 7%, transparent); }
.adv-table tr.today td:first-child { border-left: 4px solid var(--series-1); }
.today-badge {
  display: inline-block; background: var(--series-1); color: #fff; font-size: 9.5px; font-weight: 800;
  letter-spacing: .05em; border-radius: 5px; padding: 2px 6px; margin-left: 6px; vertical-align: 1px;
}
.datecell b { font-size: 14px; font-variant-numeric: tabular-nums; }
.tkcell .tkname { font-weight: 650; font-size: 12.5px; white-space: nowrap; }
.tkcell .tknum { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tkcell .tknum .bank { color: var(--text-muted); }
.copybtn { border: none; background: transparent; cursor: pointer; font-size: 12px; color: var(--series-1); padding: 0 3px; }
.rowbtns { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.btn-copy { color: var(--series-1); border-color: color-mix(in srgb, var(--series-1) 45%, transparent); font-weight: 600; white-space: nowrap; }
.btn-copy:hover { background: color-mix(in srgb, var(--series-1) 8%, transparent); }

.bill-thumb {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--grid); border-radius: 8px;
  padding: 3px 8px 3px 4px; background: var(--page); cursor: pointer; font-size: 11.5px;
  color: var(--text-secondary); text-decoration: none; white-space: nowrap;
}
.bill-thumb img { width: 26px; height: 26px; object-fit: cover; border-radius: 5px; }
.bill-thumb:hover { border-color: var(--series-1); color: var(--series-1); }

.copied-note {
  font-size: 12px; color: var(--good-text); background: color-mix(in srgb, var(--good) 12%, transparent);
  border-radius: 8px; padding: 6px 10px; margin: 6px 0 14px; display: inline-block; font-weight: 600;
}

.pastezone {
  border: 2px dashed var(--baseline); border-radius: 12px; padding: 16px; text-align: center;
  color: var(--text-muted); background: var(--page); cursor: pointer; outline: none; transition: border-color .15s;
}
.pastezone:focus, .pastezone:hover { border-color: var(--series-1); color: var(--series-1); }
.pastezone.hasimg { border-style: solid; border-color: var(--series-2); padding: 10px; cursor: default; }
.pastezone img { max-width: 100%; max-height: 220px; border-radius: 8px; display: block; margin: 0 auto; }
.pastezone .ok { color: var(--good-text); font-weight: 700; font-size: 12.5px; margin-top: 8px; }
.pastezone .big { font-size: 24px; }
.pastezone .pz-pick { color: var(--series-1); cursor: pointer; text-decoration: underline; }
/* 07/08 GĐ duyệt: ô dán giữ NHIỀU ảnh — thumbnail + số thứ tự + ✕ bỏ từng ảnh */
.pastezone .pz-shots { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; justify-content: center; }
.pastezone .pzshot { position: relative; width: 96px; }
.pastezone .pzshot img { width: 96px; height: 68px; object-fit: cover; border-radius: 8px; border: 1px solid var(--grid); display: block; }
.pastezone .pzshot .no { position: absolute; left: 4px; top: 4px; background: rgba(0,0,0,.55); color: #fff;
  font-size: 10px; font-weight: 800; border-radius: 7px; padding: 0 5px; }
.pastezone .pz-x { position: absolute; right: -6px; top: -6px; width: 19px; height: 19px; border-radius: 50%;
  border: none; background: #b3261e; color: #fff; font-size: 10px; font-weight: 800; line-height: 19px; padding: 0; cursor: pointer; }
.pastezone .pz-cnt { font-weight: 700; margin-top: 6px; }
.pastezone.hasimg { cursor: pointer; }
.pastezone .pz-clear {
  border: 1px solid var(--baseline); background: transparent; color: var(--text-secondary);
  border-radius: 6px; font: inherit; font-size: 11px; padding: 1px 8px; cursor: pointer; margin-left: 6px;
}

/* Ứng tiền: 6 cột vừa màn hình — chỉ cuộn dọc, không cuộn ngang */
.adv-table { table-layout: auto; }
.adv-table td { vertical-align: top; }
.adv-table .whocell { white-space: nowrap; width: 130px; }
.adv-table .who-name { font-weight: 700; margin-top: 3px; }
.type-tag {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  border-radius: 5px; padding: 1px 7px; margin-top: 5px; border: 1px solid var(--grid);
  background: var(--page); color: var(--text-muted);
}
.type-tag.ads { color: var(--series-1); border-color: color-mix(in srgb, var(--series-1) 40%, transparent); }
.type-tag.tn { color: var(--warn-text); border-color: color-mix(in srgb, var(--warning) 50%, transparent); }
.adv-table .purpose { min-width: 130px; overflow-wrap: anywhere; }
.adv-table .tkcell { min-width: 150px; }
.adv-table .tkcell .tkname, .adv-table .tkcell .tknum { white-space: normal; overflow-wrap: anywhere; }
.adv-table .billcell { width: 120px; }
.adv-table .billcell .rowbtns { flex-direction: column; align-items: flex-start; }
.adv-table .statecell { width: 150px; }
.adv-table .statecell .rowbtns { flex-direction: column; align-items: flex-start; gap: 4px; }

/* ============ Ứng tiền bản 2 (đã duyệt): dải tổng ghim + thẻ lệnh ============ */
.sumstrip {
  position: sticky; top: 54px; z-index: 30;
  background: var(--page); padding: 6px 0 10px;
  display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 10px;
}
.stile {
  border: 1px solid var(--grid); border-radius: 12px; padding: 10px 14px;
  background: var(--surface-1); cursor: pointer; text-align: left; font-family: inherit;
  box-shadow: var(--shadow); color: var(--text-primary);
}
.stile .lb { font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--text-muted); display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.stile .vl { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stile .ct { font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }
.stile.hero { background: var(--series-1); border-color: var(--series-1); cursor: default; }
.stile.hero .lb, .stile.hero .vl, .stile.hero .ct { color: #fff; }
.stile.hero .lb { opacity: .85; }
.stile.on { outline: 2px solid var(--series-1); outline-offset: 1px; }
.stile .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.d-lead { background: var(--serious); } .dot.d-wait { background: var(--series-1); }
.dot.d-done { background: var(--good); } .dot.d-today { background: var(--critical); }

.filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 14px; }
.filterbar select {
  padding: 8px 11px; border: 1px solid var(--baseline); border-radius: 10px;
  background: var(--surface-1); color: var(--text-primary); font: inherit;
}

.advlist { display: flex; flex-direction: column; gap: 9px; max-height: 640px; overflow-y: auto; padding: 2px; }
.adv {
  display: grid; grid-template-columns: 58px 1.15fr 1.5fr auto; gap: 4px 16px; align-items: center;
  background: var(--surface-1); border: 1px solid var(--grid); border-radius: 12px; padding: 12px 14px;
}
.adv.today {
  border-color: color-mix(in srgb, var(--series-1) 55%, transparent);
  background: color-mix(in srgb, var(--series-1) 5%, var(--surface-1));
  border-left: 4px solid var(--series-1);
}
.adv .datebox { text-align: center; border-right: 1px solid var(--grid); padding-right: 12px; }
.adv .datebox .d { font-size: 21px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.adv .datebox .w { font-size: 10px; color: var(--text-muted); font-weight: 700; margin-top: 2px; }
.today-badge.tb-block { display: inline-block; font-size: 8.5px; padding: 1px 4px; margin: 3px 0 0; }
.adv .who .nm { font-weight: 750; }
.adv .who .purpose { color: var(--text-secondary); font-size: 12.5px; margin-top: 1px; overflow-wrap: anywhere; }
.adv .mid .tkname { font-weight: 650; font-size: 12.5px; overflow-wrap: anywhere; }
.adv .mid .tknum { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.adv .mid .tknum .bank { color: var(--text-muted); }
.adv .mid .bills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.adv .right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 190px; }
.adv .right .amt { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .sumstrip { grid-template-columns: repeat(2, 1fr); position: static; }
  .adv { grid-template-columns: 58px 1fr; }
  .adv .mid, .adv .right { grid-column: 2; }
  .adv .right { align-items: flex-start; text-align: left; }
}

/* ============ Báo cáo ngày (đã duyệt): 3 khung × nhãn sản phẩm ============ */
.frames { display: flex; gap: 6px; flex-wrap: wrap; }
.frame {
  border: 1px solid var(--grid); background: var(--surface-1); color: var(--text-secondary);
  font: inherit; font-weight: 700; font-size: 12.5px; border-radius: 10px;
  padding: 7px 13px; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
}
.frame .t { font-size: 12.5px; }
.frame .s { font-size: 10px; font-weight: 600; color: var(--text-muted); }
.frame.on { background: var(--series-1); border-color: var(--series-1); }
.frame.on .t, .frame.on .s { color: #fff; }

.products { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 12px; }
.product {
  border: 1px solid var(--grid); border-radius: 12px; padding: 10px 14px; cursor: pointer;
  background: var(--surface-1); text-align: left; font-family: inherit; color: var(--text-primary);
  display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow);
}
.product .ic { font-size: 22px; }
.product .pn { font-size: 13.5px; font-weight: 800; letter-spacing: .02em; }
.product .ps { font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.product.on {
  border-color: var(--series-1);
  background: color-mix(in srgb, var(--series-1) 7%, var(--surface-1));
  outline: 2px solid var(--series-1); outline-offset: -1px;
}
.pct-pill.pct-over { background: color-mix(in srgb, #7c3aad 14%, transparent); color: #7c3aad; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .pct-pill.pct-over { color: #b98ee0; } }

/* Bảng Báo cáo ngày bản 7.5 (đã duyệt): trắng tối giản, hàng 34px,
   tiêu đề 2 tầng phân vùng nhập/máy tính, dòng tổng đổ gradient xanh */
.drt { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.drt th.grp { height: 26px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-align: left; padding: 0 12px; border-bottom: none; }
.drt th.grp.nt { background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1)) !important; color: var(--series-1); }
.drt th.grp.ct { background: var(--page) !important; color: var(--text-secondary); }
.drt th.col {
  height: 28px; font-size: 10.5px; color: var(--text-primary); font-weight: 700; letter-spacing: .04em; text-align: right;
  padding: 0 8px; border-bottom: 1px solid var(--baseline); white-space: nowrap;
}
.drt th.col.u { color: var(--text-secondary); font-weight: 650; }
.drt .sep { border-left: 1px solid var(--baseline); }
.drt tbody tr:not(.total):not(.team):hover td { background: color-mix(in srgb, var(--series-1) 6%, transparent); }
.drt td { padding: 0 8px; height: 34px; border-bottom: 1px solid var(--grid); white-space: nowrap; font-weight: 500; }
/* cột máy tính: chữ xám lùi ra sau, không tô nền */
.drt tbody tr:not(.total):not(.team) td[data-ct] { color: var(--text-secondary); font-size: 12.5px; }
.drt td.name { font-weight: 650; text-align: left; }
/* TỔNG NGÀY: đổ gradient xanh đậm chữ trắng — mỏ neo, ghim khi cuộn */
.drt tr.total td {
  background: linear-gradient(180deg, #3f86df, #2e6dc2); color: #fff; font-weight: 800; font-size: 13.5px;
  height: 38px; padding: 0 8px; border-bottom: 0; position: sticky; top: 28px; z-index: 3; /* 26/08: bỏ dải nhãn → mốc ghim hạ 54→28 (hết khoảng trắng) */
}
.drt tr.total td.name { font-size: 13px; letter-spacing: .02em; }
.drt tr.total td .z { color: rgba(255,255,255,.6); opacity: 1; }
.drt tr.total .pct-pill { background: rgba(255,255,255,.94); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.drt tr.total .pct-pill.pct-ok { color: #0a7d0a; }
.drt tr.total .pct-pill.pct-warn { color: #8a6400; }
.drt tr.total .pct-pill.pct-bad { color: #c22525; }
.drt tr.total .pct-pill.pct-over { color: #7c3aad; }
/* TEAM: băng mảnh gradient xám-xanh dịu, nhãn mực — số nhạt */
.drt tr.team td {
  background: linear-gradient(180deg, color-mix(in srgb, var(--series-1) 5%, var(--surface-1)), color-mix(in srgb, var(--series-1) 11%, var(--page)));
  font-weight: 800; font-size: 11px; letter-spacing: .05em; color: var(--text-primary);
  height: 27px; padding: 0 8px; border-top: 0; border-bottom: 1px solid var(--baseline);
}
.drt tr.team td:not(.name) { color: var(--text-secondary); font-weight: 650; font-size: 12px; }
.drt tr.team td.name { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.drt tr.team td.name::before { content: 'Σ '; opacity: .7; }
/* Ô tự nhảy từ tab Chi phí cá nhân (khung BÁO CÁO NGÀY) */
.drt td.auto { background: color-mix(in srgb, var(--series-2) 10%, transparent); font-weight: 650; }
.drt th.col .lnk { font-size: 9px; margin-right: 2px; }
.legend-line .auto-chip { background: color-mix(in srgb, var(--series-2) 11%, transparent); border-radius: 6px; padding: 1px 7px; font-weight: 700; }
/* Dòng nhân viên: %CP là chữ màu + chấm ● (viên màu chỉ ở dòng tổng) */
.drt .pv { font-weight: 750; }
.drt .pv i { font-style: normal; font-size: 8px; vertical-align: 1.5px; margin-right: 2px; }
.drt .pv-ok { color: var(--good-text); }
.drt .pv-warn { color: var(--warn-text); }
.drt .pv-bad { color: var(--critical); }
.drt .pv-over { color: #7c3aad; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .drt .pv-over { color: #b98ee0; } }
:root[data-theme="dark"] .drt .pv-over { color: #b98ee0; }
/* trạng thái nộp + tên */
.drt .stt2 { display: inline-block; width: 16px; text-align: center; margin-right: 4px; }
.drt td.name .rl { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.drt tr[data-me="1"] td.name { box-shadow: inset 2.5px 0 0 var(--series-1); font-weight: 800; }
/* ô nhập chìm: nền phớt, trỏ vào mới hiện viền */
.drt td input {
  width: 98px; height: 26px; padding: 0 8px; text-align: right; font: inherit; font-size: 13px; font-weight: 650;
  border: 1px solid transparent; border-radius: 7px; background: var(--page);
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.drt td input:hover { border-color: var(--baseline); }
.drt td input:focus { outline: none; border-color: var(--series-1); background: var(--surface-1); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--series-1) 18%, transparent); }
.drt td input.narrow { width: 56px; }
.drt td.locked { color: var(--text-primary); }
.drt .z { color: var(--text-muted); }
.datepick { padding: 7px 10px; border: 1px solid var(--baseline); border-radius: 9px; background: var(--surface-1); color: var(--text-primary); font: inherit; }
.savebar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.btn-save { border: none; border-radius: 10px; background: var(--series-1); color: #fff; font: inherit; font-weight: 800; font-size: 14px; padding: 11px 20px; cursor: pointer; box-shadow: var(--shadow); }
.mynote { font-size: 12px; color: var(--text-secondary); }
@media (max-width: 860px) { .products { grid-template-columns: 1fr; } }

/* ============ Tổng quan bản mới (đã duyệt) ============ */
/* 📊 Thẻ SỐ CHÍNH (GĐ duyệt 26/07) — thay cụm 7 thẻ cũ (hero %ADS + 2 thẻ to +
   4 ô nhỏ) bằng 1 bảng: 4 số chính + 8 ô phụ gấp sau nút ▾ Chi tiết. Nhờ vậy
   2 thẻ sản phẩm và bảng Theo nhân viên được đẩy lên trên nếp gấp màn hình. */
.dsum { padding: 0 !important; overflow: hidden; margin-bottom: 12px; }
.dsum-hd { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 16px; background: color-mix(in srgb, var(--grid) 28%, var(--surface-1));
  border-bottom: 1px solid var(--border); }
.dsum-hd .t { font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.dsum-hd .s { font-size: 11.5px; color: var(--text-muted); font-weight: 600; margin-left: auto; }
.dsum-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds1 { padding: 15px 16px 14px; min-width: 0; border-left: 1px solid var(--border); }
.ds1:first-child { border-left: 0; }
.ds1 .lab { font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 4px; white-space: nowrap; }
.ds1 .v { font-size: 24px; font-weight: 900; letter-spacing: -.025em; white-space: nowrap;
  display: flex; align-items: center; gap: 7px; }
.ds1 .d { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds1 .d em { font-style: normal; font-weight: 800; }
.ds1 .d em.up { color: var(--critical); }
.ds1 .d em.dn { color: var(--good-text); }
.ds1 .d .dmut { font-weight: 600; }
.dsum-more { width: 100%; border: 0; border-top: 1px solid var(--border); background: var(--surface-1);
  color: var(--series-1); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
  padding: 9px 16px; text-align: left; }
.dsum-more:hover { background: color-mix(in srgb, var(--grid) 25%, var(--surface-1)); }
.dsum-ex { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border); background: color-mix(in srgb, var(--grid) 22%, var(--surface-1)); }
.dse { padding: 10px 16px; border-left: 1px solid var(--border); min-width: 0; }
.dse:first-child { border-left: 0; }
.dse .lab { font-size: 9.5px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap; }
.dse .v { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 2px; }
.dse .s { font-size: 10.5px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
@media (max-width: 860px) {
  .dsum-row, .dsum-ex { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds1:nth-child(3) { border-left: 0; }
  .ds1:nth-child(n+3) { border-top: 1px solid var(--border); }
  .dse:nth-child(odd) { border-left: 0; }
  .ds1 .v { font-size: 21px; }
}

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.kpi { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 14px; }
.kpi .lab { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--text-muted); }
.kpi .v { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 1px; }
.kpi .s { font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; font-variant-numeric: tabular-nums; }

/* 📐 Thẻ GỘP giữa Tổng quan (27/07 GĐ duyệt bản tối giản): sản phẩm + gia hạn
   + biểu đồ ngày trong MỘT thẻ. Chi tiết bấm mới hiện. */
.midc { padding: 0 !important; overflow: hidden; margin-bottom: 12px; }
.midc .mrow { display: flex; align-items: center; gap: 8px; padding: 10px 14px; flex-wrap: wrap; }
.mpchip { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit;
  cursor: pointer; padding: 5px 10px; border-radius: 8px; color: var(--text-primary); }
.mpchip:hover, .mpchip.open { background: color-mix(in srgb, var(--grid) 34%, transparent); }
.mpchip .nm { font-size: 13px; font-weight: 700; letter-spacing: -.005em; }
.mpchip .v { font-size: 15px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mpchip .v.ok { color: var(--good-text); }
.mpchip .v.warn { color: var(--warn-text); }
.mpchip .v.bad, .mpchip .v.over { color: var(--critical); }
.mpchip .sh { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mpchip .cv { width: 12px; height: 12px; color: var(--text-muted); transition: transform .15s; }
.mpchip.open .cv { transform: rotate(180deg); }
.mvr { width: 1px; height: 18px; background: var(--grid); }
.mrn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px;
  color: var(--text-secondary); border: 0; background: none; font-family: inherit; cursor: pointer;
  padding: 5px 10px; border-radius: 8px; font-weight: 600; }
.mrn:hover { background: color-mix(in srgb, var(--grid) 34%, transparent); }
.mrn .d { font-size: 10px; font-weight: 800; border-radius: 5px; padding: 2px 7px; letter-spacing: .02em; }
.mrn .d.warn { background: var(--warning); color: #3d2900; }
.mrn .d.bad { background: var(--critical); color: #fff; }
.mrn .m { color: var(--text-muted); font-weight: 500; }
.midc .mdet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  border-top: 1px solid var(--grid); padding: 11px 16px; }
.midc .mdet.hidden { display: none; }
.midc .mdet .l { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--text-muted); }
.midc .mdet .v { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; letter-spacing: -.015em; }
.midc .mdet .v.tm { font-weight: 500; font-size: 12px; color: var(--text-secondary); }
.midc .mrnp { border-top: 1px solid var(--grid); padding: 11px 16px; }
.midc .mrnp-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.midc .mch { border-top: 1px solid var(--grid); }
.midc .mch-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px 0; }
.midc .mch-hd .t { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--text-muted); }
.midc .mch-hd .lg { display: flex; gap: 12px; margin-left: auto; font-size: 11px; color: var(--text-secondary); }
.midc .mch-hd .lg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: -.5px; }
.mlnk { border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--text-muted);
  cursor: pointer; padding: 2px 8px; border-radius: 6px; font-weight: 600; }
.mlnk:hover { background: color-mix(in srgb, var(--grid) 34%, transparent); color: var(--text-primary); }
.midc .mplot { padding: 4px 8px 2px; }
.midc .mplot.hidden { display: none; }
.midc .mtv { padding: 0 16px 12px; max-height: 260px; overflow: auto; }
.midc .mtv.hidden { display: none; }
@media (max-width: 760px) { .midc .mdet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mrn { margin-left: 0; } }

.teambars .trow { display: grid; grid-template-columns: 92px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--grid); }
.teambars .trow:last-child { border-bottom: none; }
.teambars .tn { font-weight: 700; font-size: 12.5px; }
.teambars .tb { height: 12px; border-radius: 999px; background: var(--grid); overflow: hidden; }
.teambars .tb i { display: block; height: 100%; background: var(--series-1); border-radius: 999px; }
.teambars .tv { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

td.rank { font-weight: 800; color: var(--text-muted); width: 36px; }
td.rank .medal { font-size: 15px; }
.cpbar { display: inline-block; width: 92px; height: 7px; border-radius: 999px; background: var(--grid); margin-left: 8px; vertical-align: 2px; overflow: hidden; }
.cpbar i { display: block; height: 100%; background: var(--series-1); border-radius: 999px; }
.cpbar.ds i { background: var(--series-2); }

@media (max-width: 980px) {
  .hero, .prods { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .cpbar { display: none; }
}

/* Biểu đồ ngày bản 2 + bảng nhân viên ghim tổng */
.lgd { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 3px 0 7px; vertical-align: -1px; }
.uscroll { max-height: 1150px; overflow: auto; border: 1px solid var(--grid); border-radius: 10px; }
/* Bảng Theo nhân viên rộng rãi (18/07): ô thoáng hơn, ~15–20 hàng mới phải cuộn */
.uscroll > table { min-width: 1100px; }
.uscroll th, .uscroll td { padding: 11px 14px; }
.uscroll tr.udet > td { padding: 0 !important; }
.uscroll table { border-collapse: collapse; width: 100%; }
.uscroll thead th { position: sticky; top: 0; background: var(--surface-1); z-index: 3; }
.uscroll thead tr.tot td {
  position: sticky; top: 31px; z-index: 2; background: var(--series-1); color: #fff;
  font-weight: 800; font-size: 13.5px; padding: 9px 8px; border-bottom: 2px solid var(--series-1);
  white-space: nowrap;
}
.uscroll thead tr.tot .pct-pill { background: #fff; }
.uscroll thead tr.tot .pct-warn { color: #8a6400; }
.uscroll thead tr.tot .pct-ok { color: #0a7d0a; }
.uscroll thead tr.tot .pct-bad { color: #c22525; }
.uscroll thead tr.tot .pct-pill.pct-over { color: #7c3aad; }

/* ============ Nhân sự bản mới (đã duyệt) ============ */
.hr-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
.hr-kpi { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.hr-kpi .ic { font-size: 20px; }
.hr-kpi .v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hr-kpi .l { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); }

.board { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border: 1.5px dashed var(--baseline); border-radius: 12px; margin-bottom: 14px; background: var(--page); }
.board .bt { font-size: 11px; font-weight: 800; letter-spacing: .05em; color: var(--text-muted); margin-right: 6px; }
.org-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.org-prod { border: 1.5px solid var(--grid); border-radius: 14px; padding: 12px; background: var(--page); }
.org-prod .ph { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.org-prod .ph .ic { font-size: 22px; }
.org-prod .ph .pn { font-weight: 800; font-size: 13.5px; letter-spacing: .02em; }
.org-prod .ph .pc { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }
.org-team { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px; margin-bottom: 10px; }
.org-team:last-child { margin-bottom: 0; }
.org-team .th2 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.org-team .tname { font-weight: 800; font-size: 13px; }
.org-team .tmeta { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.members { display: flex; gap: 6px; flex-wrap: wrap; }
.mchip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--grid);
  border-radius: 999px; padding: 3px 10px 3px 3px; font-size: 12px; font-weight: 600;
  background: var(--page); cursor: pointer; font-family: inherit; color: var(--text-primary);
}
.mchip:hover { border-color: var(--series-1); }
.mchip .av { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; color: #fff; flex: none; }
.mchip.lead { border-color: color-mix(in srgb, var(--series-1) 45%, transparent); background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1)); }
.av.c0, .uav.c0 { background: var(--series-1); }
.av.c1, .uav.c1 { background: var(--series-2); }
.av.c2, .uav.c2 { background: var(--serious); }
.av.cx, .uav.cx { background: var(--text-muted); }

.hr-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.hr-search { flex: 1; min-width: 220px; max-width: 340px; padding: 9px 13px; border: 1.5px solid var(--baseline); border-radius: 10px; background: var(--page); color: var(--text-primary); font: inherit; }
.hr-search:focus { outline: 2px solid var(--series-1); outline-offset: -1px; }
.fchip { border: 1px solid var(--baseline); background: var(--surface-1); color: var(--text-secondary); border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.fchip.on { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.fchip.lock { margin-left: auto; }

.hrt td { vertical-align: middle; }
.hrt tbody tr.lockrow td { opacity: .55; }
.uav { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; margin-right: 10px; vertical-align: middle; }
.uname { font-weight: 700; }
.usub { font-size: 11.5px; color: var(--text-muted); }
.rtag { display: inline-block; border-radius: 7px; padding: 2px 9px; font-size: 11.5px; font-weight: 800; }
.r-gd { background: color-mix(in srgb, #7c3aad 12%, transparent); color: #7c3aad; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .r-gd { color: #b98ee0; } }
.r-kt { background: color-mix(in srgb, var(--serious) 16%, transparent); color: color-mix(in srgb, var(--serious) 80%, var(--text-primary)); }
.r-tp { background: color-mix(in srgb, var(--series-1) 10%, transparent); color: var(--series-1); }
.r-ld { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good-text); }
.r-nv { background: color-mix(in srgb, var(--text-primary) 7%, transparent); color: var(--text-secondary); }
.stt { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.stt .dot { width: 8px; height: 8px; border-radius: 50%; }
.stt.on { color: var(--good-text); } .stt.on .dot { background: var(--good); }
.stt.off { color: var(--critical); } .stt.off .dot { background: var(--critical); }
.hr-act { display: flex; gap: 6px; justify-content: flex-end; }
.hr-act .udel[data-arm="1"] { color: #ff6b6b; border-color: #ff6b6b88; font-weight: 700; }

.struct { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 14px; }
.struct h4 { font-size: 12.5px; margin-bottom: 8px; display: flex; align-items: center; }
.struct h4 .add { margin-left: auto; }
.srow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--grid); border-radius: 10px; margin-bottom: 7px; background: var(--page); font-size: 12.5px; flex-wrap: wrap; }
.srow b { font-size: 13px; }
.srow .m { margin-left: auto; color: var(--text-muted); font-size: 11px; }
.srow select { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--baseline); border-radius: 7px; background: var(--surface-1); color: var(--text-primary); }
.prodchip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--grid); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; background: var(--page); margin: 0 6px 8px 0; }
.prodchip .e { cursor: pointer; opacity: .6; }
.prodchip .e:hover { opacity: 1; }
@media (max-width: 980px) {
  .org-cols, .struct { grid-template-columns: 1fr; }
  .hr-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ============ Chi phí cá nhân bản 4 (đã duyệt): thẻ TK + bảng tháng gọn ============ */
.sumbar {
  position: sticky; top: 54px; z-index: 20; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--surface-1); border: 1.5px solid color-mix(in srgb, var(--series-1) 35%, transparent);
  border-radius: 12px; box-shadow: var(--shadow); padding: 9px 12px; margin-bottom: 12px;
}
.sumbar .si { font-size: 11.5px; color: var(--text-secondary); font-weight: 700; letter-spacing: .02em; }
.sumbar .si b { display: block; font-size: 15.5px; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.sumbar .sep2 { width: 1px; height: 26px; background: var(--grid); }
.sumbar .btn-save { margin-left: auto; padding: 9px 16px; font-size: 13.5px; }

.accscroll { max-height: 460px; overflow-y: auto; border: 1px solid var(--grid); border-radius: 12px; padding: 8px; background: var(--page); }
/* Bản 5 (đã duyệt): mỗi tài khoản = 1 dòng kéo dài hết khung */
.accgrid { display: flex; flex-direction: column; gap: 10px; }
.acard { background: var(--surface-1); border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow); padding: 12px; }
.acard.hasval { border-color: color-mix(in srgb, var(--series-2) 45%, transparent); }
.acard.hit { outline: 2px solid var(--series-1); outline-offset: -1px; }
.acard .ahead { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.acard .pf { font-size: 10px; font-weight: 800; letter-spacing: .04em; border-radius: 6px; padding: 2px 7px; white-space: nowrap; margin-top: 2px; }
.pf.fb { background: color-mix(in srgb, var(--series-1) 9%, transparent); color: var(--series-1); }
.pf.yt { background: color-mix(in srgb, var(--critical) 10%, transparent); color: var(--critical); }
.pf.ot { background: color-mix(in srgb, var(--text-primary) 8%, transparent); color: var(--text-secondary); }
.acard .aname { font-weight: 750; font-size: 13px; }
.acard .aid { font-size: 11px; color: var(--text-muted); }
.balpill2 { margin-left: auto; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.balpill2.ok { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good-text); }
.balpill2.neg { background: color-mix(in srgb, var(--critical) 11%, transparent); color: var(--critical); }
.afields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.afields.one { grid-template-columns: 1fr; }
.af label { display: block; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--text-secondary); margin-bottom: 3px; }
.af input {
  width: 100%; padding: 9px 10px; text-align: right; font: inherit; font-size: 15px; font-weight: 700;
  border: 1.5px solid var(--baseline); border-radius: 9px; background: var(--page); color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.af input:focus { outline: 2px solid var(--series-1); outline-offset: -1px; }
/* Khung ID tài khoản QC: nổi bật, bấm để sao chép */
.aidbox {
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  border: 1.5px solid color-mix(in srgb, var(--series-1) 45%, transparent);
  background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1));
  border-radius: 9px; padding: 6px 10px; cursor: pointer; user-select: all;
}
.aidbox:hover { border-color: var(--series-1); }
.aidbox .k { font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--series-1); background: color-mix(in srgb, var(--series-1) 14%, transparent); border-radius: 5px; padding: 2px 6px; flex: none; }
.aidbox .id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14.5px; font-weight: 800; letter-spacing: .04em; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aidbox .cp { margin-left: auto; font-size: 13px; opacity: .55; flex: none; }
.aidbox:hover .cp { opacity: 1; }
.autoline { margin-top: 8px; font-size: 11.5px; color: var(--text-secondary); background: color-mix(in srgb, var(--series-2) 8%, transparent); border-radius: 8px; padding: 6px 9px; font-variant-numeric: tabular-nums; line-height: 1.7; }
.autoline b { color: var(--text-primary); }
.hoanline { margin-top: 7px; font-size: 11.5px; }
.hoanline a { color: var(--series-1); cursor: pointer; font-weight: 700; text-decoration: none; }
.hoanbox { margin-top: 7px; display: none; }
.hoanbox.open { display: block; }
.closing .inputs3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }

/* Bản 5 (đã duyệt): dòng trên = kênh + tên + ID kéo dài + còn lại;
   dòng dưới = ô nhập + dòng máy tính + hoàn tiền */
.acard .atop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.acard .atop .pf { margin-top: 0; }
.acard .anb { flex: none; min-width: 150px; }
.acard .atop .aidbox { flex: 1; min-width: 240px; margin: 0; }
.acard .atop .aidbox .id { font-size: 15.5px; }
.acard .aidfill { flex: 1; }
.acard .atop .balpill2 { margin-left: 0; font-size: 12px; padding: 4px 11px; }
.acard .abot { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.acard .abot .afields { display: flex; gap: 10px; flex: none; }
.acard .abot .afields.one { grid-template-columns: none; }
.acard .abot .afields .af { width: 185px; }
.acard .abot .autoline { flex: 1; min-width: 230px; margin-top: 0; }
.acard .abot .hoanline { margin: 0 0 9px; flex: none; }
.acard .hoanbox .af { max-width: 320px; }

/* ============ Bảng tháng — PA 1 Ô LỊCH (mẫu đã duyệt) ============ */
.mscroll { max-height: 400px; overflow: auto; border: 1px solid var(--grid); border-radius: 12px; }
.mcols { display: grid; grid-template-columns: 96px 1.05fr 1.15fr .8fr .65fr .85fr .8fr .8fr 1.15fr 100px 48px 24px; gap: 6px; align-items: center; padding: 0 8px; font-variant-numeric: tabular-nums; }
.mhead { position: sticky; top: 0; z-index: 3; background: var(--surface-1); border-bottom: 1.5px solid var(--baseline); min-height: 30px; font-size: 10px; font-weight: 700; color: var(--text-secondary); letter-spacing: .05em; }
.mhead span { text-align: right; }
.mhead span:first-child { text-align: left; }
.mhead .strong { color: var(--text-primary); }
.mrow { border-bottom: 1px solid var(--grid); cursor: pointer; min-height: 46px; }
.mrow:hover { background: color-mix(in srgb, var(--series-1) 7%, transparent); }
/* ô ngày kiểu lịch: số to trong ô vuông bo góc + thứ/tháng xếp dọc */
.mrow .d { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.mrow .dnum { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; background: var(--page); color: var(--text-primary); flex: none; }
.mrow .dmeta { display: flex; flex-direction: column; line-height: 1.05; }
.mrow .dmeta .wd { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--text-secondary); }
.mrow .dmeta .mm { font-size: 9.5px; color: var(--text-muted); }
.mrow .d.wknd .dnum { background: color-mix(in srgb, var(--critical) 11%, var(--surface-1)); color: var(--critical); }
.mrow .d.wknd .dmeta .wd { color: var(--critical); opacity: .85; }
.mrow.today .dnum { background: var(--series-1); color: #fff; box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--series-1) 30%, transparent); }
.mrow.today .dmeta .wd { color: var(--series-1); }
.mrow .v { text-align: right; font-weight: 750; font-size: 13px; }
.mrow .v.mut { font-weight: 550; font-size: 12.5px; color: var(--text-secondary); }
.mrow .zz, .mrow .z { color: var(--text-muted); opacity: .7; font-weight: 400; }
.mrow .p { text-align: right; white-space: nowrap; }
.mrow .don { white-space: nowrap; }
.mrow .caret { text-align: center; color: var(--text-muted); font-size: 12px; }
.mrow.hasdata .caret { color: var(--series-1); font-weight: 700; }
.mrow.fut { opacity: .45; }
.mrow.mtotal { position: sticky; top: 30px; z-index: 2; background: linear-gradient(180deg, #3f86df, #2e6dc2); cursor: default; min-height: 46px; border-bottom: 0; }
.mrow.mtotal .v, .mrow.mtotal .don { color: #fff; font-weight: 800; font-size: 13.5px; }
.mrow.mtotal .mon { display: flex; flex-direction: column; line-height: 1.15; }
.mrow.mtotal .mon .m1 { color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .03em; }
.mrow.mtotal .mon .m2 { color: rgba(255,255,255,.78); font-size: 9px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.mrow.mtotal .pct-pill { background: rgba(255,255,255,.94) !important; }
.mrow.mtotal .z, .mrow.mtotal .zz { color: rgba(255,255,255,.65); opacity: 1; }
.msub {
  position: sticky; top: 71px; z-index: 2;
  background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1));
  padding: 6px 10px; font-size: 11.5px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--grid); line-height: 1.8;
}
.msub b { color: var(--text-primary); }
/* Viên %ADS trong bảng tháng: nền đặc kiểu cảnh báo (mẫu đã duyệt) */
.mrow .pct-pill { font-size: 12px; padding: 2px 10px; }
.mrow .pct-pill.pct-ok { background: color-mix(in srgb, var(--good) 16%, var(--surface-1)); color: var(--good-text); }
.mrow .pct-pill.pct-warn { background: color-mix(in srgb, var(--warning) 28%, var(--surface-1)); color: var(--warn-text); }
.mrow .pct-pill.pct-bad { background: color-mix(in srgb, var(--critical) 16%, var(--surface-1)); color: var(--critical); }
.mdetail { display: none; padding: 10px 8px 12px; border-bottom: 1px solid var(--grid); background: var(--page); }
.mdetail.open { display: block; }
.mdetail .dg { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.mdetail .di { background: var(--surface-1); border: 1px solid var(--grid); border-radius: 9px; padding: 7px 10px; }
.mdetail .di .l { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: var(--text-muted); }
.mdetail .di .x { font-size: 13.5px; font-weight: 750; font-variant-numeric: tabular-nums; }

/* Báo cáo ngày: bảng cuộn trong khung, ghim tiêu đề + dòng tổng */
#dr-tbl { max-height: 70vh; overflow: auto; }
.drt thead tr:first-child th { position: sticky; top: 0; background: var(--surface-1); z-index: 4; }
.drt thead tr:nth-child(2) th { position: sticky; top: 26px; background: var(--surface-1); z-index: 4; }

/* ============ Báo cáo khung giờ trên điện thoại — thẻ nhập của tôi (đã duyệt 15/07) ============ */
.drpick { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; scrollbar-width: none; }
.drpick::-webkit-scrollbar { display: none; }
.drpick .pk {
  flex: none; display: flex; align-items: center; gap: 5px; font: inherit; font-size: 11.5px; font-weight: 800;
  padding: 6px 11px; border-radius: 99px; border: 1.5px solid var(--baseline);
  background: var(--surface-1); color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.drpick .pk.on { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.drme {
  background: var(--surface-1); border: 1.5px solid var(--series-1); border-radius: 14px; padding: 12px;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--series-1) 12%, transparent);
}
.drme .hd { display: flex; align-items: center; gap: 8px; }
.drme .hd .t { font-size: 12.5px; font-weight: 800; }
.drme .st { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--warn-text); white-space: nowrap; }
.drme .st.ok { color: var(--good-text); }
.drme .who { font-size: 11px; color: var(--text-secondary); margin: 2px 0 10px; }
.drme .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drme .f { position: relative; min-width: 0; }
.drme .f.full { grid-column: 1 / 3; }
.drme .f .lb { font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--text-secondary); margin: 0 0 3px 2px; }
.drme .f .lb b { color: var(--series-1); }
.drme .f .lnk { font-size: 9.5px; }
.drme .f input {
  width: 100%; height: 46px; font: inherit; font-size: 18px; font-weight: 800; text-align: right; padding: 0 12px;
  border-radius: 10px; border: 1.5px solid var(--baseline); background: var(--surface-1); color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.drme .f input:focus { outline: 2.5px solid var(--series-1); outline-offset: -1px; }
.drme .f input.auto { background: color-mix(in srgb, var(--good) 12%, var(--surface-1)); border-color: transparent; color: var(--good-text); font-weight: 750; }
.drme .f .hint { position: absolute; left: 12px; bottom: 13px; font-size: 10px; color: var(--text-muted); font-weight: 700; pointer-events: none; }
.drme .live { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 11px; color: var(--text-secondary); }
.drme .live b { color: var(--text-primary); }
.drme .live .pl { margin-left: auto; }
.drme .live .pl .pct-pill { font-size: 13px; padding: 3px 12px; }
.drme-save {
  width: 100%; height: 48px; margin-top: 12px; border: 0; border-radius: 11px;
  background: var(--series-1); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
.drme-save:active { filter: brightness(.92); }
.drteam { margin-top: 12px; background: var(--surface-1); border: 1px solid var(--grid); border-radius: 13px; overflow: hidden; }
.drteam .bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.drteam .bar .n { color: var(--text-secondary); font-weight: 700; font-size: 11.5px; }
.drteam .bar .car { margin-left: auto; color: var(--series-1); font-size: 11px; font-weight: 800; }
.drteam .tname { padding: 6px 12px 4px; font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--text-muted); border-top: 1px solid var(--grid); background: var(--page); }
.drteam .trow { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--grid); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.drteam .trow .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.drteam .trow .nm small { color: var(--text-secondary); font-weight: 600; }
.drteam .trow .ds { margin-left: auto; font-weight: 750; }
.drteam .trow .pct-pill { font-size: 10.5px; padding: 1px 8px; }
.drteam.closed .body { display: none; }
@media (max-width: 700px) {
  /* thẻ nhập có nút Lưu riêng — giấu thanh lưu của bảng lớn */
  .savebar { display: none; }
}

/* ============ Sửa lịch sử tháng trong chi tiết TK (đã duyệt 16/07) ============ */
.histedit { max-height: 340px; overflow: auto; }
.histedit table { border-collapse: separate; border-spacing: 0; }
.histedit thead tr:first-child th { position: sticky; top: 0; z-index: 3; background: var(--surface-1); border-bottom: 2px solid var(--baseline); }
.histedit thead .hauto { display: block; font-size: 8.5px; font-weight: 700; color: var(--series-2); letter-spacing: 0; }
.histedit thead tr.htot td {
  position: sticky; top: 38px; z-index: 2; background: linear-gradient(180deg, #3f86df, #2e6dc2);
  color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; padding: 8px 10px; border-bottom: 0; white-space: nowrap;
}
.histedit thead tr.htot td small { font-weight: 700; opacity: .8; }
.histedit td { white-space: nowrap; }
.histedit td.sub { color: var(--text-secondary); }
.histedit .h-in {
  width: 104px; height: 30px; font: inherit; font-size: 12.5px; font-weight: 700; text-align: right; padding: 0 8px;
  border-radius: 7px; border: 1.5px solid var(--baseline); background: var(--surface-1); color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.histedit .h-in:focus { outline: 2px solid var(--series-1); outline-offset: -1px; }
.histedit .h-in.hoan { border-style: dashed; }
.histedit .h-in.hoan:not(:placeholder-shown) { border-color: color-mix(in srgb, var(--critical) 50%, transparent); color: var(--critical); }
.histedit .h-in.chg { border-color: var(--series-1); background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1)); }
@media (max-width: 700px) { .histedit .h-in { width: 88px; } }

/* ============ Gõ chữ tìm nhanh nhân viên + nhãn nghỉ việc (đã duyệt 16/07) ============ */
.findbox { position: relative; display: inline-flex; align-items: center; }
.findbox .fic { position: absolute; left: 10px; font-size: 13px; opacity: .55; pointer-events: none; }
.findbox input {
  width: 200px; height: 36px; font: inherit; font-size: 13px; font-weight: 600; padding: 0 10px 0 32px;
  border-radius: 9px; border: 1.5px solid var(--baseline); background: var(--surface-1); color: var(--text-primary);
}
.findbox input:focus { outline: 2.5px solid var(--series-1); outline-offset: -1px; }
.findbox .fList {
  position: absolute; left: 0; top: 40px; z-index: 30; min-width: 260px; max-height: 300px; overflow-y: auto;
  background: var(--surface-1); border: 1px solid var(--baseline); border-radius: 11px;
  box-shadow: 0 10px 28px rgba(15, 30, 60, .18); display: none;
}
.findbox .fList.open { display: block; }
.findbox .fi { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--grid); }
.findbox .fi:last-child { border-bottom: 0; }
.findbox .fi:hover, .findbox .fi.hl { background: color-mix(in srgb, var(--series-1) 9%, var(--surface-1)); }
.findbox .fi .fnm { font-weight: 700; }
.findbox .fi .fnm b { color: var(--series-1); }
.findbox .fi small { color: var(--text-secondary); margin-left: auto; flex: none; }
.offtag {
  font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
  background: color-mix(in srgb, var(--critical) 13%, var(--surface-1)); color: var(--critical);
  border-radius: 99px; padding: 1px 7px; margin-left: auto; flex: none;
}
td .offtag, option .offtag { margin-left: 4px; }
@media (max-width: 700px) { .findbox input { width: 150px; } }

/* Nhân sự: danh sách cuộn trong khung, ghim tiêu đề */
.hr-scroll { max-height: 480px; overflow-y: auto; }
.hr-scroll thead th { position: sticky; top: 0; background: var(--surface-1); z-index: 2; }

/* ============ Mobile toàn site ============ */
@media (max-width: 700px) {
  .page-head h2 { font-size: 15.5px; }
  .page-head .actions { width: 100%; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .hero, .prods, .chart-grid, .org-cols, .struct { grid-template-columns: 1fr; }
  .kpis, .hr-kpis { grid-template-columns: 1fr 1fr; }
  .acc-layout { grid-template-columns: 1fr; }
  /* Thẻ TK 1 dòng trên điện thoại: ID xuống dòng riêng full ngang, 2 ô nhập cạnh nhau */
  .acard .anb { flex: 1; }
  .acard .atop .aidbox { min-width: 100%; order: 5; }
  .acard .abot .afields { flex: 1 1 100%; }
  .acard .abot .afields .af { width: auto; flex: 1; }
  .acard .abot .autoline { min-width: 100%; }
  .mcols { grid-template-columns: 58px 1fr 1fr 64px 22px 12px; gap: 4px; padding-left: 6px; padding-right: 6px; }
  .mcols .hidemb { display: none; }
  .mrow { min-height: 42px; }
  .mrow .d { gap: 6px; }
  .mrow .dnum { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
  .mrow .dmeta .mm { display: none; }
  .mrow .v { font-size: 12px; }
  .mrow .p .pct-pill { font-size: 10.5px; padding: 1px 6px; }
  .mrow.mtotal { top: 30px; min-height: 42px; }
  .mrow.mtotal .v { font-size: 12px; }
  .mrow.mtotal .mon .m1 { font-size: 11px; letter-spacing: 0; white-space: nowrap; }
  .mrow.mtotal .mon .m2 { display: none; }
  .msub { top: 66px; }
  .sumbar { top: 100px; }
  .sumbar .si b { font-size: 13.5px; }
  .uscroll { max-height: 60vh; }
  .modal { width: 94vw; }
  .fchip.lock { margin-left: 0; }
  .sumline { flex-wrap: wrap; }
}

/* ============ Chống nhầm ngày & ghi đè + lịch sử ô (đã duyệt) ============ */
/* Băng rôn ngày: hôm qua (ngày chuẩn) = xanh, ngày khác = vàng cảnh báo */
.daybanner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-radius: 10px; padding: 9px 13px; margin: 10px 0 4px;
  font-size: 14px; border: 1px solid transparent;
}
.daybanner.ok {
  color: var(--good-text);
  background: color-mix(in srgb, var(--good) 11%, transparent);
  border-color: color-mix(in srgb, var(--good) 30%, transparent);
}
.daybanner.warn {
  color: var(--warn-text);
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
}
.daybanner .bsub { font-weight: 400; font-size: 12.5px; opacity: .85; }
.btn-yday {
  margin-left: auto; font: inherit; font-size: 13px; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--warning) 55%, transparent);
  background: var(--surface-1); color: var(--text-primary);
  border-radius: 8px; padding: 5px 12px; cursor: pointer;
}
.dtile.yd .wd { color: var(--good-text); font-weight: 800; }

/* Menu chuột phải trên ô nhập */
.cellctx {
  position: fixed; z-index: 200; min-width: 200px; padding: 5px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(8, 14, 25, .22);
}
.cellctx.hidden { display: none; }
.cellctx button {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 14px;
  font-weight: 600; background: none; border: 0; border-radius: 7px;
  padding: 9px 12px; cursor: pointer; color: var(--text-primary);
}
.cellctx button:hover { background: color-mix(in srgb, var(--series-1) 10%, transparent); }

/* Danh sách lịch sử / nhật ký trong modal */
.histbox { max-height: 55vh; overflow-y: auto; margin: 4px 0 12px; }
.hrow {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.hrow:last-child { border-bottom: 0; }
.hrow .hwhen { color: var(--text-muted); font-size: 12px; width: 88px; flex: none; }
.hrow .hwho { font-weight: 700; min-width: 150px; }
.hrow .old, .difftb .old, .ovitem .old { color: var(--critical); text-decoration: line-through; }
.hrow .new, .difftb .new { font-weight: 700; color: var(--good-text); }
.hrow .hnote {
  font-size: 11.5px; color: var(--text-secondary); border-radius: 6px; padding: 2px 8px;
  background: color-mix(in srgb, var(--series-1) 10%, transparent);
}

/* Bảng so sánh cũ → mới trong modal chặn ghi đè */
.difftb { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.difftb th { font-size: 11px; color: var(--text-muted); text-align: left; letter-spacing: .04em; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.difftb td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.difftb .arr { color: var(--text-muted); }
.ovwarn {
  border-radius: 9px; padding: 8px 12px; margin-bottom: 10px; font-size: 13.5px; font-weight: 600;
  color: var(--warn-text);
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
}

/* Nhật ký ghi đè: mỗi lần lưu 1 khối */
.ovrow { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; margin-bottom: 9px; background: var(--surface-2, transparent); }
.ovhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.ovhead .btn-restore { margin-left: auto; padding: 3px 10px; font-size: 12.5px; }
.ovitem { font-size: 13px; padding: 2px 0; }

@media (max-width: 700px) {
  .daybanner { font-size: 13px; }
  .btn-yday { margin-left: 0; }
  .hrow .hwho { min-width: 0; }
}

/* Chỉ xem bảng người khác (đã chốt 15/07): ô khóa mờ nhẹ, có nhãn 👁 */
.viewonly {
  font-size: 12px; font-weight: 700; color: var(--warn-text);
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  border-radius: 7px; padding: 3px 10px; vertical-align: 2px;
}
input.ro { opacity: .75; cursor: default; }

/* ============ Chi phí cá nhân bản 5.4 (đã duyệt): đầu trang gọn + bảng ID cố định ============ */
/* Dải ngày mỏng hơn ~40% */
.dtile { width: 44px; padding: 3px 0 3px; border-radius: 8px; }
.dtile .wd { font-size: 8.5px; }
.dtile .dn { font-size: 14px; margin-top: 0; }
.dtile .st { height: 5px; margin-top: 1px; }
/* Băng rôn 1 dòng mỏng */
.daybanner { padding: 6px 11px; margin: 8px 0 0; font-size: 13px; border-radius: 9px; }
.btn-yday { padding: 3px 10px; font-size: 12px; }

/* Khối Lưu + Chốt kết quả ngày gộp 1 hàng */
.savebox { border: 1.5px solid var(--series-1); border-radius: 12px; padding: 10px 12px; margin-top: 10px; background: var(--surface-1); }
.savebox .sb1 { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.savebox .sf { flex: 1; min-width: 150px; }
.savebox .sf label { display: block; font-size: 10px; color: var(--text-secondary); font-weight: 800; letter-spacing: .04em; margin-bottom: 3px; }
.savebox .sf input {
  width: 100%; height: 38px; font: inherit; font-size: 15px; font-weight: 700; text-align: right; padding: 0 10px;
  border-radius: 8px; border: 1.5px solid var(--baseline); background: var(--page); color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.savebox .sf input:focus { outline: 2px solid var(--series-1); outline-offset: -1px; }
/* 4 chỉ số chốt ngày tự đồng bộ từ API Sandbox — ô khóa 🔗 chỉ xem (17/07) */
.savebox .sf input.auto { background: color-mix(in srgb, var(--good) 12%, var(--surface-1)); border-color: transparent; color: var(--good-text); cursor: default; }
.savebox #mx-pct { align-self: center; margin-top: 12px; font-size: 14px; padding: 6px 13px; }
.savebox .btn-save { margin-left: 0; }
.savebox .sb2 { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.savebox .sb2 b { color: var(--text-primary); }
.savebox .warnline { margin-top: 6px; font-size: 12px; padding: 4px 10px; }

/* Bảng ID bản 5.5 (đã duyệt): hàng 44px dày đặc, cột số cố định,
   2 cột chữ (ID+tên, máy tính) tự giãn lấp hết chiều ngang; hoàn gốc trên dòng */
/* Bảng gọn (đã duyệt 15/07): khung cao ~7 dòng, cuộn bên trong,
   vệt mờ dần ở đáy + nhãn "còn N dòng ⌄" (bindScrollMore trong app.js) */
.idscroll { overflow: auto; max-height: 440px; border: 1px solid var(--grid); border-radius: 11px; }
.idscroll::after, .mscroll::after, .accscroll::after {
  content: ''; position: sticky; bottom: 0; left: 0; display: block; height: 24px; margin-top: -24px;
  background: linear-gradient(180deg, transparent, var(--surface-1)); pointer-events: none;
}
.scmore {
  position: sticky; bottom: 6px; left: 12px; z-index: 4; display: block; width: fit-content;
  margin: -22px auto 4px 12px; font-size: 10px; font-weight: 800; color: var(--series-1);
  background: var(--surface-1); border: 1px solid var(--grid); border-radius: 99px; padding: 1px 9px;
  pointer-events: none; white-space: nowrap;
}
.idtable { min-width: 850px; width: 100%; }
.idrow {
  display: grid; grid-template-columns: 44px minmax(200px, 1.1fr) 118px 118px 108px minmax(150px, 1fr) 100px 72px;
  gap: 8px; align-items: center; height: 58px; padding: 0 10px;
  border-bottom: 1px solid var(--grid); background: var(--surface-1);
}
/* Kẻ sọc: mỗi dòng TK kèm 1 panel 📅 phía sau → nhịp 2 phần tử, dòng lẻ tính từ vị trí 3 */
.idtable > .idrow:nth-child(4n+3):not(.head):not(.mhead2) { background: var(--page); }
/* Tiêu đề đậm, chữ tối, ghim khi cuộn (đã duyệt) */
.idrow.head {
  position: sticky; top: 0; z-index: 3; height: 30px;
  background: var(--surface-1); font-size: 11px; font-weight: 800; letter-spacing: .05em; color: var(--text-primary);
  border-bottom: 2px solid var(--baseline); box-shadow: 0 2px 6px rgba(15, 30, 60, .06);
}
.idrow.head .sm { color: var(--text-muted); font-weight: 600; letter-spacing: 0; }
.idrow.mhead2 { display: none; }
.idrow .pf { font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 3px 0; text-align: center; white-space: nowrap; margin: 0; }
.idcell { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.25; row-gap: 2px; }
.idcell .l1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.idcell .mtx { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idcell .mtx b { color: var(--text-primary); font-weight: 750; font-size: 11.5px; }
/* Đảo lại (đã duyệt 16/07): TÊN đậm ở trên + ✏️ sửa tại chỗ, ID khung nhỏ ở dưới — vẫn bấm copy */
.idrow .nmline { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.idrow .acnm {
  font-size: 13px; font-weight: 750; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 100%;
}
/* tên được ưu tiên hiện đủ — phần "tiêu tháng" tự co lại khi chật */
.idrow .mtx2 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.idrow .pen { border: 0; background: none; font-size: 11px; cursor: pointer; opacity: .35; padding: 0 2px; flex: none; line-height: 1; }
.idrow:hover .pen { opacity: .9; }
.idrow .idline { display: flex; align-items: center; gap: 6px; margin-top: 2px; min-width: 0; }
.idrow .nmedit { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.idrow .nmedit input {
  flex: 1; min-width: 0; font: inherit; font-size: 12.5px; font-weight: 700; padding: 4px 8px;
  border-radius: 7px; border: 1.5px solid var(--series-1); background: var(--surface-1); color: var(--text-primary); outline: none;
}
.idrow .nmedit .okbtn, .idrow .nmedit .nobtn {
  border: 0; border-radius: 7px; font-size: 12px; font-weight: 800; cursor: pointer;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex: none; font-family: inherit;
}
.idrow .nmedit .okbtn { background: var(--series-1); color: #fff; }
.idrow .nmedit .nobtn { background: var(--grid); color: var(--text-secondary); }
/* ID đóng khung nhỏ (đã duyệt 16/07): chữ xám 11,5px, vẫn bấm để copy */
.idrow .idnum {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 750;
  color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  border: 1px solid var(--baseline); background: color-mix(in srgb, var(--series-1) 5%, var(--surface-1));
  border-radius: 6px; padding: 2px 8px;
}
.idrow .idnum:hover { border-color: var(--series-1); color: var(--text-primary); }
/* idnum dùng chung hành vi copy của .aidbox — khung hộp lấy theo .idrow .idnum ở trên */
.idrow .aidbox { display: inline-block; margin: 0; }
.idrow .idnum.noid { cursor: default; color: var(--text-muted); font-weight: 600; font-size: 12px; background: none; border-style: dashed; }
/* Ô nhập bọc trong .inwrap để gắn nhãn NẠP/CHI/HOÀN trên điện thoại */
.idrow .inwrap { position: relative; min-width: 0; }
.idrow .inwrap .mx-in { width: 100%; }
.idrow .inwrap .tag {
  display: none; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  font-size: 8.5px; font-weight: 800; letter-spacing: .05em; color: var(--text-muted); opacity: .8;
  pointer-events: none; font-style: normal; white-space: nowrap;
}
.idcell .cpico { flex: none; font-size: 13px; opacity: .35; }
.idrow:hover .cpico { opacity: 1; }
.idrow input.mx-in {
  width: 118px; height: 36px; font: inherit; font-size: 14px; font-weight: 700; text-align: right; padding: 0 8px;
  border-radius: 7px; border: 1.5px solid var(--baseline); background: var(--surface-1); color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.idrow input.mx-in.hoan { width: 108px; border-style: dashed; }
.idrow input.mx-in.hoan:not(:placeholder-shown) {
  border-color: color-mix(in srgb, var(--critical) 50%, transparent); color: var(--critical);
}
.idrow input.mx-in:focus { outline: 2px solid var(--series-1); outline-offset: -1px; }
.idrow input.mx-in.auto { opacity: .55; }
.idrow .autocell { font-size: 11px; color: var(--text-secondary); line-height: 1.35; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.idrow .autocell b { color: var(--text-primary); }
.idrow .autocell .z { opacity: .55; }
.idrow .autocell input.mx-in.mini { width: 62px; height: 28px; font-size: 12px; padding: 0 6px; }
.idrow .balcell { text-align: right; font-weight: 800; font-size: 13px; }
.idrow .balcell.pos { color: var(--good-text); }
.idrow .balcell.neg { color: var(--critical); }
.idrow.hit { outline: 2px solid var(--series-1); outline-offset: -2px; }
.idrow.hasval { box-shadow: inset 3px 0 0 var(--series-2); }
/* 📅 Tháng (đã duyệt 16/07): nút cuối dòng TK + panel cả tháng trải ra ngay dưới dòng */
.mxmbtn {
  font: inherit; font-size: 11px; font-weight: 800; padding: 5px 6px; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--baseline); background: var(--surface-1); color: var(--series-1); white-space: nowrap;
}
.mxmbtn:hover { border-color: var(--series-1); }
.mxmbtn.on { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.mxmp { display: none; }
.mxmp.open { display: block; border-bottom: 1px solid var(--grid); background: var(--page); padding: 10px 12px; }
.mxmp .ttl { font-size: 12.5px; font-weight: 800; margin-bottom: 8px; }
.mxmp .ttl small { color: var(--text-muted); font-weight: 600; }
.mxmp .histedit { background: var(--surface-1); border: 1px solid var(--grid); border-radius: 10px; }
.mxmp table { width: 100%; min-width: 520px; font-size: 12.5px; }
.mxmp td small.mwd { color: var(--text-muted); font-weight: 700; font-size: 9.5px; letter-spacing: .03em; }
.mxmp tr.wknd td:first-child, .mxmp tr.wknd td:first-child small.mwd { color: var(--critical); }
.mxmp tr.today td:first-child, .mxmp tr.today td:first-child small.mwd { color: var(--series-1); font-weight: 800; }
.mxmp .zz { opacity: .4; }
.mxmp .btnrow { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
/* mở panel → bỏ trần cuộn của khung TK để xem cả bảng tháng thoải mái */
.idscroll:has(.mxmp.open) { max-height: none; }

@media (max-width: 700px) {
  /* điện thoại: bảng ID gập thành thẻ nhỏ — hàng 1: kênh + ID + còn lại;
     hàng 2: 3 ô nhập (nạp · chi · hoàn) có nhãn trong ô; hàng 3: máy tự tính */
  .idtable { min-width: 0; width: 100%; }
  /* thẻ gập cao hơn dòng bàn phím lớn → khung cuộn nới theo màn hình */
  .idscroll { max-height: 62vh; }
  .idrow { grid-template-columns: 46px 1.4fr 1fr 1fr; height: auto; padding: 8px 10px; row-gap: 7px; }
  .idrow.head { display: none; }
  /* tiêu đề ghim 2 tầng (đã duyệt): tầng 1 tài khoản/còn lại, tầng 2 đúng cột 3 ô nhập */
  .idrow.mhead2 {
    display: grid; position: sticky; top: 0; z-index: 3; row-gap: 2px; padding: 6px 10px 5px;
    background: var(--surface-1); font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--text-primary);
    border-bottom: 2px solid var(--baseline); box-shadow: 0 2px 6px rgba(15, 30, 60, .08);
  }
  .idrow.mhead2 .h-acc { grid-column: 1 / 4; }
  .idrow.mhead2 .h-bal { grid-column: 4 / 5; text-align: right; }
  .idrow.mhead2 .h-nap { grid-column: 1 / 3; color: var(--series-1); }
  .idrow.mhead2 .h-chi { grid-column: 3 / 4; text-align: right; color: var(--series-1); }
  .idrow.mhead2 .h-hoan { grid-column: 4 / 5; text-align: right; color: var(--series-1); }
  .idcell { grid-column: 2 / 4; }
  .idrow .balcell { grid-column: 4 / 5; }
  .idrow input.mx-in, .idrow input.mx-in.hoan { width: 100%; }
  .idrow .inwrap.w-nap { grid-column: 1 / 3; }
  .idrow .inwrap.w-chi { grid-column: 3 / 4; }
  .idrow .inwrap.w-hoan { grid-column: 4 / 5; }
  /* nhãn NẠP/CHI/HOÀN dính góc trái trong ô — luôn hiện kể cả khi đã gõ số */
  .idrow .inwrap .tag { display: block; }
  .idrow .inwrap .mx-in { padding-left: 40px; }
  .idrow .inwrap .mx-in::placeholder { color: transparent; }
  .idrow .autocell { grid-column: 1 / 5; white-space: normal; }
  /* nút 📅 Tháng thành hàng riêng full chiều ngang cho dễ bấm */
  .idrow .mxmbtn { grid-column: 1 / 5; width: 100%; padding: 7px 8px; }
  .mxmp.open { padding: 10px 8px; }
  .savebox #mx-pct { margin-top: 0; }
}

/* Điện thoại to / xoay ngang / máy tính bảng (701–1080px): bảng ID co vừa
   màn hình — giấu cột TÊN TK + MÁY TỰ TÍNH để Ô NHẬP và CÒN LẠI luôn hiện,
   hết cảnh phải cuộn ngang mới thấy chỗ điền */
@media (max-width: 1080px) and (min-width: 701px) {
  .idtable { min-width: 0; width: 100%; }
  .idrow { grid-template-columns: 40px minmax(130px, 1.2fr) 100px 100px 90px 86px 62px; gap: 7px; }
  .idrow .autocell { display: none; }
  .idrow.head span:nth-child(6) { display: none; }
  .idrow input.mx-in, .idrow input.mx-in.hoan { width: 100%; }
}
/* Màn hình vừa (701–1080px): tab rút còn icon để 1 hàng không tràn */
@media (max-width: 1080px) and (min-width: 701px) {
  .tabs { overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 0 1 auto; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab .tlb { display: none; }
  .tab { padding: 7px 11px; }
  .tab .tic { font-size: 16px; }
  .brand .bt small { display: none; }
  .mechip .who, .mechip .car { display: none; }
  .mechip { padding: 2px; }
}

/* ============ Nhắc báo cáo + phạt (đã duyệt 15/07) ============ */
.bellbtn { position: relative; }
.bellnum {
  position: absolute; top: -5px; right: -6px; min-width: 16px; height: 16px;
  background: var(--critical); color: #fff; border-radius: 99px;
  font-size: 10px; font-weight: 800; line-height: 16px; padding: 0 4px; text-align: center;
}
.ntc { display: flex; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); font-size: 13px; align-items: baseline; }
.ntc:last-child { border-bottom: 0; }
.ntc .hwhen { flex: none; width: 88px; color: var(--text-muted); font-size: 11.5px; }
.ntc .ntx { white-space: pre-line; line-height: 1.5; }
.ntc.unread .ntx { font-weight: 600; }
.ntc.t-fine .ntx { color: var(--critical); }
.ntc.t-remind .ntx { color: var(--warn-text); }
.badge-link { font-size: 12px; font-weight: 700; border-radius: 7px; padding: 3px 9px; }
.badge-link.on { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good-text); }
.finetb { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.finetb th { font-size: 10.5px; letter-spacing: .05em; color: var(--text-muted); padding: 6px 8px; border-bottom: 1.5px solid var(--baseline); text-align: right; }
.finetb th:first-child, .finetb td:first-child { text-align: left; }
.finetb td { padding: 8px; border-bottom: 1px solid var(--grid); text-align: right; }
.finetb tr.tot td { font-weight: 800; background: var(--page); }
.finetb .miss { color: var(--critical); font-weight: 700; }
.finetb tr.clickable { cursor: pointer; }
.finetb tr.clickable:hover td { background: color-mix(in srgb, var(--series-1) 6%, transparent); }
.finetb input[type="time"] { font: inherit; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--baseline); background: var(--surface-1); color: var(--text-primary); }
.hval.miss { color: var(--critical); font-weight: 700; }

/* ============ Pháo hoa + lời sếp sau khi Lưu (đã duyệt 15/07) ============ */
#fx { position: fixed; inset: 0; z-index: 300; display: none; }
#fx.on { display: block; }
#fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#fx .veil { position: absolute; inset: 0; background: rgba(8, 12, 20, .45); }
#fx.bad .veil { background: radial-gradient(ellipse at center, rgba(120, 10, 10, .28), rgba(60, 4, 4, .55)); animation: fxpulse 1.1s ease-in-out infinite; }
@keyframes fxpulse { 50% { opacity: .75; } }
#fxcard {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: min(480px, 88vw); background: var(--surface-1); border-radius: 18px;
  padding: 26px 26px 20px; text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  border-top: 6px solid var(--good); animation: fxpop .45s cubic-bezier(.2, 1.6, .4, 1);
}
#fx.warn #fxcard { border-top-color: var(--warning); }
#fx.bad #fxcard { border-top-color: var(--critical); animation: fxpop .45s cubic-bezier(.2, 1.6, .4, 1), fxshake .5s .5s ease-in-out; }
@keyframes fxpop { from { transform: translate(-50%, -38%) scale(.6); opacity: 0; } }
@keyframes fxshake { 20%, 60% { transform: translate(-50.8%, -50%); } 40%, 80% { transform: translate(-49.2%, -50%); } }
#fxcard .big { font-size: 44px; line-height: 1; }
#fxcard .pct { font-size: 30px; font-weight: 900; margin: 8px 0 2px; }
#fx.good #fxcard .pct { color: var(--good-text); }
#fx.warn #fxcard .pct { color: var(--warn-text); }
#fx.bad #fxcard .pct { color: var(--critical); }
#fxcard .m { font-size: 16.5px; font-weight: 700; line-height: 1.6; margin: 6px 0 14px; white-space: pre-line; color: var(--text-primary); }
#fxcard .close { font: inherit; font-weight: 700; border: 0; border-radius: 9px; padding: 9px 22px; cursor: pointer; background: var(--page); color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { #fxcard, #fx .veil, #fx.bad #fxcard { animation: none; } }
/* ô lời nhắn trong modal cấu hình */
.fxmsgs { display: grid; gap: 8px; margin-bottom: 10px; }
.fxm { display: grid; grid-template-columns: 86px 1fr; gap: 8px; align-items: start; }
.fxm .tag { font-size: 11.5px; font-weight: 800; border-radius: 7px; padding: 5px 0; text-align: center; }
.fxm .tag.g { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good-text); }
.fxm .tag.w { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warn-text); }
.fxm .tag.b { background: color-mix(in srgb, var(--critical) 11%, transparent); color: var(--critical); }
.fxm textarea { font: inherit; font-size: 13px; width: 100%; min-height: 46px; border-radius: 8px; border: 1px solid var(--baseline); background: var(--page); color: var(--text-primary); padding: 7px 10px; resize: vertical; }

/* ============ Xí xóa hàng loạt + thêm/xóa nhanh nhân sự (đã duyệt) ============ */
.bulkbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
  background: color-mix(in srgb, var(--series-1) 7%, var(--surface-1));
  border: 1px solid var(--baseline); border-radius: 10px; padding: 7px 12px; font-size: 13px;
}
.bulkbar b { color: var(--series-1); }
.finetb input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--series-1); cursor: pointer; }
.finetb tr.picked td { background: color-mix(in srgb, var(--series-1) 9%, transparent); }
.tagx { font-size: 10.5px; font-weight: 700; color: var(--good-text); background: color-mix(in srgb, var(--good) 12%, transparent); border-radius: 6px; padding: 2px 7px; }
/* nút ✕ khóa nhanh trên thẻ thành viên */
.mchip { position: relative; cursor: pointer; }
.mchip .mx-x {
  position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--critical); color: #fff; border: 2px solid var(--surface-1);
  font-size: 10px; line-height: 13px; text-align: center; cursor: pointer; padding: 0;
  opacity: 0; transition: opacity .15s;
}
.mchip:hover .mx-x, .mchip .mx-x[data-arm="1"] { opacity: 1; }
@media (hover: none) { .mchip .mx-x { opacity: .85; } }
/* Người nghỉ việc: vẫn nằm trong thẻ team (tính doanh số/lương), mờ đi + nhãn đỏ */
.mchip.off { opacity: .75; border-style: dashed; }
.mchip.off .av { filter: grayscale(1); }
.mchip .offtag { margin-left: 2px; }
.mchip .mx-x.back { background: color-mix(in srgb, var(--good) 15%, var(--surface-1)); color: var(--good-text); }
@media (prefers-reduced-motion: reduce) { .mchip .mx-x { transition: none; } }
/* thêm nhanh trong thẻ team */
.addchip {
  display: inline-flex; align-items: center; gap: 6px; border: 1.5px dashed var(--series-1);
  border-radius: 99px; padding: 4px 12px; font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--series-1); background: none; cursor: pointer;
}
.addbox {
  display: none; align-items: center; gap: 7px; background: var(--surface-1);
  border: 1.5px solid var(--series-1); border-radius: 99px; padding: 2px 5px 2px 12px;
}
.addbox.open { display: inline-flex; }
.addbox input { border: 0; background: none; font: inherit; font-size: 13px; outline: none; width: 150px; color: var(--text-primary); }
.addbox .ok {
  border: 0; background: var(--series-1); color: #fff; border-radius: 99px;
  font: inherit; font-size: 12px; font-weight: 800; padding: 4px 12px; cursor: pointer;
}

/* 🏆 Bảng vàng vinh danh theo sản phẩm (đã duyệt 16/07): cá nhân + team xuất sắc,
   dải ngang dưới các ô số đầu Tổng quan — thay khung "Xếp hạng team" cũ */
.hof { --gold: #a8720b; --gold2: #e3ac2d; --gold-bg1: #fffaf0; --gold-bg2: #fdf0d2; --gold-line: #ecd192; margin-bottom: 16px; }
.hof-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.hof-head .t { font-size: 16px; font-weight: 850; letter-spacing: .01em; }
.hof-sp { border: 1.5px solid var(--gold-line); border-radius: 13px; overflow: hidden; margin-bottom: 14px;
  background: linear-gradient(115deg, var(--gold-bg2), var(--gold-bg1) 40%, var(--surface-1) 78%); }
.hof-sp:last-child { margin-bottom: 0; }
.hof-sphead { display: flex; align-items: center; gap: 9px; padding: 10px 14px 0; }
.hof-sphead .ic { font-size: 19px; }
.hof-sphead .nm { font-size: 14.5px; font-weight: 850; letter-spacing: .04em; }
.hof-sphead .meta { margin-left: auto; font-size: 10px; color: var(--text-muted); font-weight: 750; letter-spacing: .04em; text-align: right; }
.hof-cols { display: grid; grid-template-columns: 1.05fr 1fr; padding: 8px 4px 10px; }
.hof-col { padding: 2px 12px; min-width: 0; }
.hof-col + .hof-col { border-left: 1px dashed var(--gold-line); }
.hof-col .clb { font-size: 10px; font-weight: 850; letter-spacing: .09em; color: var(--gold); margin: 4px 2px 8px; }
.hof-champ { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center;
  background: var(--surface-1); border: 2px solid var(--gold2); border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 3px 14px rgba(200, 150, 30, .16); }
.hof-champ .medal { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 28px; background: radial-gradient(circle at 32% 28%, #ffe9ad, #f4c95d 58%, #d99a17);
  box-shadow: inset 0 -2px 5px rgba(140, 90, 0, .35), 0 2px 6px rgba(200, 150, 30, .35); }
.hof-champ .who { min-width: 0; }
.hof-champ .tag { font-size: 9px; font-weight: 850; letter-spacing: .08em; color: var(--gold); }
.hof-champ .nm { font-size: 17px; font-weight: 850; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hof-champ .tm { font-size: 11.5px; color: var(--text-secondary); font-weight: 650; margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hof-champ .val { text-align: right; }
.hof-champ .ds { font-size: 20px; font-weight: 850; color: var(--gold); white-space: nowrap; line-height: 1.1; cursor: help; }
.hof-champ .dsl { font-size: 9px; font-weight: 850; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 2px; }
.hof-rest { margin-top: 7px; }
.hof-row { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 9px; align-items: center; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; }
.hof-row:nth-child(odd) { background: color-mix(in srgb, var(--surface-1) 55%, transparent); }
.hof-row .rk { font-size: 15px; text-align: center; color: var(--text-muted); font-weight: 800; }
.hof-row .nm { font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hof-row .nm small { color: var(--text-muted); font-weight: 600; margin-left: 5px; }
.hof-row .ds { font-weight: 800; white-space: nowrap; cursor: help; }
.hof-row.z { opacity: .55; }
@media (max-width: 820px) {
  .hof-cols { grid-template-columns: 1fr; }
  .hof-col + .hof-col { border-left: 0; border-top: 1px dashed var(--gold-line); margin-top: 8px; padding-top: 10px; }
  .hof-champ { grid-template-columns: 44px 1fr auto; padding: 9px 10px; gap: 9px; }
  .hof-champ .medal { width: 42px; height: 42px; font-size: 22px; }
  .hof-champ .nm { font-size: 15px; }
  .hof-champ .ds { font-size: 16px; }
}

/* ============ Thanh điều hướng dưới đáy màn hình — điện thoại (đã duyệt 16/07) ============ */
.bnav .bt {
  display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative;
  font-family: inherit; font-size: 9.5px; font-weight: 750; color: var(--text-muted);
  border: 0; background: none; cursor: pointer; padding: 3px 0 1px; border-radius: 10px;
}
.bnav .bt .ic { font-size: 19px; line-height: 1.1; }
.bnav .bt.on { color: var(--series-1); }
.bnav .bt.on::before {
  content: ''; position: absolute; top: -6px; left: 26%; right: 26%; height: 3px;
  border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #3f86df, var(--series-1));
}
.bnav .bt .bdg {
  position: absolute; top: -2px; right: calc(50% - 19px); min-width: 15px; height: 15px;
  border-radius: 99px; background: var(--critical); color: #fff; font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
@media (max-width: 700px) {
  /* đầu trang gọn: logo + tháng + chuông + ảnh đại diện; tab dời xuống thanh đáy */
  main { padding-bottom: 84px; }
  .topbar { padding: 7px 10px; gap: 8px; }
  .tabs { display: none; }
  .brand { gap: 7px; }
  .brand .mk { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; }
  .brand .mk img { width: 22px; height: 24px; }
  .brand .bt small { display: none; }
  .brand .bt b { font-size: 13.5px; }
  .topbar .month-picker { padding: 5px 7px; font-size: 11px; max-width: 122px; min-width: 0; }
  .mp-nav { width: 25px; height: 25px; font-size: 13px; }
  .mp-btn { padding: 4px 9px; font-size: 11px; gap: 4px; }
  .mp-pop { right: -40px; }
  .topbar .bellbtn { width: 30px; height: 30px; font-size: 13px; }
  .mechip { padding: 2px; }
  .mechip .who, .mechip .car { display: none; }
  .mechip .av { width: 26px; height: 26px; font-size: 10px; }
  .bnav {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: var(--surface-1); border-top: 1px solid var(--grid);
    padding: 6px 4px calc(7px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -3px 12px rgba(15, 30, 60, .08);
  }
}

/* Thanh CPQC tách kênh trong bảng Theo nhân viên (đã duyệt 16/07): FB xanh · YT đỏ · khác tím */
.cpsplit { display: flex; height: 7px; width: 120px; max-width: 100%; border-radius: 99px; overflow: hidden; background: var(--grid); margin: 3px 0 1px auto; }
.cpsplit i { display: block; height: 100%; }
.cpsplit .f { background: var(--series-1); }
.cpsplit .y { background: #e04b3f; }
.cpsplit .o { background: #b08fd8; }
.cpsl { display: block; font-size: 10px; font-weight: 750; color: var(--text-muted); white-space: nowrap; }
.cpsl .f { color: var(--series-1); }
.cpsl .y { color: #d63a2e; }
.cpsl .o { color: #9a6fd0; }
tr.tot .cpsplit, .cpsplit.tt { background: rgba(255, 255, 255, .28); }
tr.tot .cpsplit .f, .cpsplit.tt .f { background: #9ec4f5; }
tr.tot .cpsplit .y, .cpsplit.tt .y { background: #ffb0a6; }
tr.tot .cpsl, tr.tot .cpsl .f, tr.tot .cpsl .y, tr.tot .cpsl .o,
.cpsl.tt, .cpsl.tt .f, .cpsl.tt .y, .cpsl.tt .o { color: #dce9fb; }

/* ============ Báo cáo ngày: thẻ nhận diện + thanh chọn khung ghim (đã duyệt 16/07) ============ */
.mecard {
  display: flex; align-items: center; gap: 11px; background: var(--surface-1);
  border: 1.5px solid var(--series-1); border-radius: 13px; padding: 10px 14px; margin-bottom: 10px;
}
.mecard .av {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 850; color: #fff; background: linear-gradient(135deg, #3f86df, #1d4e94); flex: none;
}
.mecard .who { line-height: 1.25; min-width: 0; }
.mecard .who b { font-size: 15px; }
.mecard .tags { display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.mecard .chip { font-size: 10.5px; font-weight: 800; border-radius: 99px; padding: 2px 9px; background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)); color: var(--series-1); white-space: nowrap; }
.mecard .chip.sp { background: #fdf0d2; color: #a8720b; }
.mecard .note { margin-left: auto; font-size: 11px; color: var(--text-muted); text-align: right; line-height: 1.4; flex: none; }
.mecard .note b { color: var(--text-primary); font-size: 12px; }
/* thanh ngày + 3 khung — ghim dưới thanh menu khi cuộn */
.drbar {
  position: sticky; top: 55px; z-index: 30; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--surface-1); border: 1px solid var(--grid); border-bottom: 1.5px solid var(--series-1);
  border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; box-shadow: 0 4px 14px rgba(15, 30, 60, .10);
}
/* dòng của chính mình trong bảng: nền xanh nhạt cho khỏi phải tìm */
.drt tr[data-me="1"] td { background: color-mix(in srgb, var(--series-1) 7%, var(--surface-1)); }
.drt tr.team .minetag { font-size: 10px; font-weight: 800; color: var(--series-1); letter-spacing: .03em; }
@media (max-width: 700px) {
  .drbar { top: 45px; padding: 7px 9px; }
  .mecard { padding: 8px 11px; }
  .mecard .av { width: 32px; height: 32px; font-size: 12px; }
  .mecard .who b { font-size: 13.5px; }
  .mecard .note { font-size: 9.5px; }
  .mecard .note b { font-size: 10.5px; }
}

/* Chọn phí NCC trong modal Thêm/Sửa TK (đã duyệt 16/07) */
.pcts { display: flex; gap: 8px; flex-wrap: wrap; }
.pctbtn {
  flex: 1; min-width: 76px; border: 1.5px solid var(--baseline); border-radius: 10px; padding: 8px 6px;
  text-align: center; cursor: pointer; background: var(--surface-1); line-height: 1.2; font-family: inherit;
}
.pctbtn b { font-size: 16px; display: block; color: var(--text-primary); }
.pctbtn small { font-size: 9px; color: var(--text-muted); font-weight: 750; letter-spacing: .03em; }
.pctbtn.on { border-color: var(--series-1); background: color-mix(in srgb, var(--series-1) 9%, var(--surface-1)); }
.pctbtn.on b { color: var(--series-1); }
.autonote {
  display: flex; align-items: center; gap: 7px; background: color-mix(in srgb, var(--good) 11%, var(--surface-1));
  color: var(--good-text); font-size: 12px; font-weight: 750; border-radius: 9px; padding: 8px 11px;
}
.reqmark { color: var(--critical); font-weight: 700; font-size: 10.5px; }
#acc-phi-other { width: 100%; font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px; border: 1.5px solid var(--series-1); background: var(--surface-1); color: var(--text-primary); }

/* Thẻ Lưu ngày (đã duyệt 16/07): 4 ô đồng bộ tông vàng của Doanh số chốt,
   không chú thích phụ — cả hàng thẳng đáy. DS chốt vẫn tự đổ sang BÁO CÁO NGÀY */
.savebox .sf label { color: #a8720b; }
.savebox .sf input {
  border-color: #e3ac2d; background: color-mix(in srgb, #e3ac2d 10%, var(--surface-1));
  box-shadow: 0 2px 8px rgba(180, 125, 16, .12);
}

/* Thanh Lưu trên đầu bảng Báo cáo ngày + nút LƯU BÁO CÁO mẫu A (đã duyệt 16/07) */
.savebar.savetop {
  justify-content: flex-start; margin: 0 0 12px;
  background: color-mix(in srgb, var(--series-1) 5%, var(--surface-1));
  border: 1.5px solid color-mix(in srgb, var(--series-1) 45%, transparent);
  border-radius: 12px; padding: 9px 12px;
}
.btn-saveA {
  display: flex; align-items: center; gap: 10px; border: 0; cursor: pointer; font-family: inherit;
  background: linear-gradient(135deg, #3f86df, #1d4e94); color: #fff; border-radius: 99px;
  padding: 7px 20px 7px 8px;
  box-shadow: 0 4px 14px rgba(46, 109, 194, .38), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .12s, box-shadow .12s;
}
.btn-saveA:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(46, 109, 194, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-saveA .ic {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .92);
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none;
}
.btn-saveA .t { text-align: left; line-height: 1.15; }
.btn-saveA .t b { font-size: 13.5px; letter-spacing: .02em; display: block; }
.btn-saveA .t small { font-size: 10px; font-weight: 750; opacity: .85; }
@media (max-width: 700px) {
  /* điện thoại: giữ nguyên như cũ — thẻ nhập có nút Lưu riêng, thanh trên chỉ còn nút 📸 */
  .savebar.savetop { display: flex; background: none; border: 0; padding: 0; }
  .savebar.savetop #dr-save, .savebar.savetop .mynote { display: none; }
  .savebar.savetop #dr-shot { margin-left: 0; }
}

/* 🔀 Kéo thả xếp thứ tự TK (đã duyệt 16/07): tay nắm ⠿ mép trái mỗi dòng */
.idrow { padding-left: 26px; }
.idrow.head, .idrow.mhead2 { padding-left: 26px; }
.idrow .grab {
  position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 30px; border: 0; background: none; cursor: grab;
  color: var(--text-muted); font-size: 14px; line-height: 1; padding: 0;
  touch-action: none; opacity: .5;
}
.idrow:hover .grab { opacity: 1; }
.idrow { position: relative; }
.idrow.dragging { opacity: .96; outline: 1.5px solid var(--series-1); border-radius: 10px; z-index: 6;
  box-shadow: 0 8px 22px rgba(15, 30, 60, .22); }
.idrow.dropover { box-shadow: inset 0 3px 0 var(--series-1); }
@media (max-width: 700px) {
  .idrow, .idrow.head, .idrow.mhead2 { padding-left: 24px; }
  .idrow .grab { left: 1px; height: 40px; }
}

/* 📌 Thanh LƯU BÁO CÁO ghim dính khi cuộn (đã duyệt 16/07) — nằm dưới thanh menu + thanh khung giờ */
.savebar.savetop { position: sticky; top: 118px; z-index: 25; box-shadow: 0 4px 16px rgba(46, 109, 194, .18); }
@media (max-width: 700px) {
  .savebar.savetop { position: static; box-shadow: none; }
}

/* ---------- Tab Kết nối API Sandbox ---------- */
.sbx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .sbx-grid2 { grid-template-columns: 1fr; } }
th.r, td.r { text-align: right; font-variant-numeric: tabular-nums; }
.json-preview { margin-top: 10px; }
.json-preview summary { cursor: pointer; }
.json-preview pre {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--page);
  border: 1px solid var(--grid);
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  max-height: 320px;
  overflow: auto;
}
#sbx-ord-out tr.sel td { background: color-mix(in srgb, var(--series-1) 12%, transparent); }

/* ---------- Tab Kết nối API: bảng cuộn trong khung, ghim tiêu đề + dòng tổng ---------- */
.sbx-scroll { max-height: 420px; overflow: auto; }
.sbx-scroll thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface-1);
  box-shadow: 0 1px 0 var(--baseline);
}
.sbx-scroll tfoot td {
  position: sticky; bottom: 0; z-index: 2;
  background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1));
  box-shadow: 0 -1px 0 var(--baseline);
}

/* Nút lưu riêng từng dòng ở Báo cáo khung giờ */
.dr-rowsave {
  float: right; margin-left: 6px; padding: 1px 7px;
  font-size: 12px; line-height: 1.5; cursor: pointer;
  background: transparent; border: 1px solid var(--grid); border-radius: 7px;
}
.dr-rowsave:hover { border-color: var(--series-1); background: color-mix(in srgb, var(--series-1) 10%, transparent); }

/* 3 mục con trong tab Kết nối API (đã duyệt 17/07): Sandbox / Facebook / Google */
.sbxtabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.sbxtab {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  padding: 8px 18px; border-radius: 99px; border: 1.5px solid var(--grid);
  background: var(--surface-1); color: var(--text-secondary);
}
.sbxtab:hover { border-color: var(--series-1); color: var(--text-primary); }
.sbxtab.on { background: var(--series-1); border-color: var(--series-1); color: #fff; }

/* 📒 Sổ tháng ứng MKT (đã duyệt 17/07) — như sổ Excel: vàng = tự trừ HKD, xanh = hôm nay */
.advledt td { white-space: nowrap; }
.advledt tr.hkd td { background: color-mix(in srgb, var(--warning) 16%, transparent); }
.advledt tr.ledtoday td { background: color-mix(in srgb, var(--good) 13%, transparent); }
.advledt tr.ledtot td { font-weight: 800; background: color-mix(in srgb, var(--series-1) 10%, transparent); font-variant-numeric: tabular-nums; }
.advledt tbody tr:hover td { background: color-mix(in srgb, var(--series-1) 7%, transparent); }

/* Bảng ứng gọn 2 tab (đã duyệt 17/07): dòng thấp, STK to rõ, cuộn trong khung */
.advledt th { padding: 8px 8px 6px; }
.advledt td { padding: 5px 8px; font-size: 13px; }
.advledt .pill { font-size: 10.5px; padding: 1px 8px; }
.advledt .today-badge { font-size: 9px; padding: 1px 6px; }
.advledt .copybtn { padding: 0 6px; }

/* ============ BẢNG ỨNG TÔNG QUÝ TỘC (đã duyệt 17/07) ============
   Kem ngà + nhãn vàng đồng + dải tổng xanh rêu chữ vàng + tiền xanh lục */
.advux-wrap {
  --ux-panel: #fffdf6; --ux-ink: #2c2517; --ux-sub: #8a7a58; --ux-line: #e6dcc2;
  --ux-gold: #a07d2a; --ux-gold2: #c2a04f; --ux-green: #1f6b43; --ux-greenbg: #e7f1e3;
  --ux-wait: #96700f; --ux-waitbg: #f7ecd2; --ux-row: #fffdf6;
  --ux-hovsh: 0 5px 16px rgba(160,125,42,.22); --ux-tot1: #2e5e42; --ux-tot2: #224531;
  background: #f4efe4; border: 1px solid var(--ux-line); border-radius: 14px; padding: 12px 14px;
  color: var(--ux-ink);
}
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .advux-wrap {
  --ux-panel: #211c14; --ux-ink: #efe6d2; --ux-sub: #a4926c; --ux-line: #3a3221;
  --ux-gold: #d5b264; --ux-gold2: #b3903f; --ux-green: #8fd4ab; --ux-greenbg: #1d3527;
  --ux-wait: #e8c162; --ux-waitbg: #3a2f14; --ux-row: #262013;
  --ux-hovsh: 0 5px 16px rgba(0,0,0,.5); --ux-tot2: #1d3a2a;
  background: #181410;
} }
:root[data-theme="dark"] .advux-wrap {
  --ux-panel: #211c14; --ux-ink: #efe6d2; --ux-sub: #a4926c; --ux-line: #3a3221;
  --ux-gold: #d5b264; --ux-gold2: #b3903f; --ux-green: #8fd4ab; --ux-greenbg: #1d3527;
  --ux-wait: #e8c162; --ux-waitbg: #3a2f14; --ux-row: #262013;
  --ux-hovsh: 0 5px 16px rgba(0,0,0,.5); --ux-tot2: #1d3a2a;
  background: #181410;
}
.advux-scroll { overflow: auto; max-height: 640px; border-radius: 12px; }
table.advux { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-variant-numeric: tabular-nums; font-size: 13px; }
.advux thead th { position: sticky; top: 0; z-index: 3; background: #f4efe4;
  font-size: 10.5px; letter-spacing: .09em; color: var(--ux-gold); font-weight: 800; text-align: left;
  padding: 2px 8px 7px; border-bottom: 1.5px solid var(--ux-line); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .advux thead th { background: #181410; } }
:root[data-theme="dark"] .advux thead th { background: #181410; }
.advux thead th.r { text-align: right; }
.advux thead tr.uxtot th { top: 25px; padding: 0; border-bottom: 0; }
.advux .totbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--ux-tot1), var(--ux-tot2)); color: #f3ecd8;
  border: 1px solid rgba(213,178,100,.5); border-radius: 11px; padding: 9px 16px; margin: 6px 0 2px;
  box-shadow: 0 3px 12px rgba(34,69,49,.35); }
.advux .totbar .t1 { font: 800 13px/1 Georgia, serif; letter-spacing: .08em; color: #e8d49a; }
.advux .totbar .big { font-weight: 800; font-size: 18px; margin-left: auto; color: #f5e5b8; }
.advux .totbar .mini { display: flex; gap: 6px; align-items: center; font-size: 11.5px; font-weight: 650;
  background: rgba(243,236,216,.14); border: 1px solid rgba(232,212,154,.25); border-radius: 99px; padding: 3px 11px; }
.advux tbody tr { cursor: pointer; }
.advux tbody td { background: var(--ux-row); border-top: 1px solid var(--ux-line); border-bottom: 1px solid var(--ux-line);
  padding: 7px 5px; white-space: nowrap; vertical-align: middle; color: var(--ux-ink);
  transition: box-shadow .12s, border-color .12s; }
/* nén bề ngang cho vừa 1 màn hình (GĐ 22/07: thêm cột GHI CHÚ không được tràn bảng) */
.advux .bk { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
.advux div.who { max-width: 165px; gap: 6px; }
.advux .who .nm { max-width: 132px; }
.advux .who .nd { max-width: 132px; }
.advux .uxav { width: 22px; height: 22px; font-size: 10px; }
.advux .db { gap: 5px; }
.advux .db .d { font-size: 16px; }
.advux tbody td:first-child { border-left: 1px solid var(--ux-line); border-radius: 11px 0 0 11px; }
.advux tbody td:last-child { border-right: 1px solid var(--ux-line); border-radius: 0 11px 11px 0; }
.advux tbody tr:hover td { border-color: var(--ux-gold2); box-shadow: var(--ux-hovsh); }
.advux tr.uxtoday td { background: color-mix(in srgb, var(--ux-gold) 9%, var(--ux-row)); }
.advux tr.uxtoday td:first-child { border-left: 3px solid var(--ux-gold); padding-left: 7px; }
.advux .db { display: flex; align-items: center; gap: 7px; }
.advux .db .d { font: 800 18px/1 Georgia, serif; }
.advux .db .m { font-size: 10px; font-weight: 700; color: var(--ux-sub); }
.advux .uxtag { display: inline-block; padding: 2px 8px; border-radius: 99px;
  background: linear-gradient(180deg, var(--ux-gold2), var(--ux-gold)); color: #fffdf6;
  font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.advux div.who { display: flex; align-items: center; gap: 7px; max-width: 200px; }
.advux .uxav { width: 26px; height: 26px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  color: #f6efdd; font-weight: 800; font-size: 11.5px; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.advux .who .nm { font-weight: 750; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.advux .who .nd { display: block; font-weight: 500; color: var(--ux-sub); font-size: 11px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.advux .bk { display: inline-block; vertical-align: middle; border-radius: 99px; padding: 2px 9px;
  font-size: 10.5px; font-weight: 750; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: color-mix(in srgb, var(--ux-gold) 12%, var(--ux-panel)); color: var(--ux-gold);
  border: 1px solid color-mix(in srgb, var(--ux-gold) 30%, var(--ux-line)); }
.advux .bk i { width: 6px; height: 6px; border-radius: 99px; background: var(--ux-gold); display: inline-block; }
.advux .stk { font-size: 14px; font-weight: 800; letter-spacing: .05em; }
/* GĐ duyệt 07/08: NGÂN HÀNG + SỐ TK gộp 1 cột TK NHẬN 2 hàng · tên chủ TK xuống 2 dòng */
.advux .tk2 { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.advux .tk2 .bk { max-width: 190px; }
.advux .stkrow { display: inline-flex; align-items: center; gap: 6px; }
.advux .nm2 { font-weight: 800; font-size: 12.5px; line-height: 1.25; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; max-width: 190px; }
/* GĐ duyệt 07/08: ô NGÀY gọn — chỉ số ngày, HÔM NAY = viền vàng + nhãn NAY (bỏ thứ) */
.advux .db2 { display: inline-flex; flex-direction: column; align-items: center; min-width: 36px;
  padding: 3px 7px; border: 1px solid var(--ux-line); border-radius: 9px; background: var(--ux-panel); line-height: 1.15; }
.advux .db2 .d { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.advux .db2.today { border-color: var(--ux-gold); background: color-mix(in srgb, var(--ux-gold) 13%, var(--ux-panel)); }
.advux .db2 .nay { font-size: 8.5px; font-weight: 800; color: #fffdf6; background: var(--ux-gold);
  border-radius: 6px; padding: 0 5px; margin-top: 2px; letter-spacing: .05em; }
.advux .uxcp { border: 1px solid var(--ux-line); background: var(--ux-panel); border-radius: 7px; cursor: pointer;
  padding: 1px 7px; font-size: 12px; margin-left: 6px; color: var(--ux-sub); }
.advux .uxcp:hover { border-color: var(--ux-gold); color: var(--ux-gold); }
.advux .amt { text-align: right; }
.advux .amt b { font-size: 14.5px; font-weight: 800; color: var(--ux-green); }
.advux .amt .u { color: var(--ux-sub); font-size: 10.5px; margin-left: 2px; }
.advux .uxpill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 750; }
.advux .uxpill i { width: 7px; height: 7px; border-radius: 99px; display: inline-block; }
.advux .uxpill.ok { background: var(--ux-greenbg); color: var(--ux-green); } .advux .uxpill.ok i { background: var(--ux-green); }
.advux .uxpill.wait { background: var(--ux-waitbg); color: var(--ux-wait); } .advux .uxpill.wait i { background: var(--ux-wait); animation: uxblink 1.4s infinite; }
.advux .uxpill.rej { background: #f4dede; color: #a03636; } .advux .uxpill.rej i { background: #a03636; }
@keyframes uxblink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .advux .uxpill.wait i { animation: none; } }
.advux .ck { display: block; color: var(--ux-sub); font-size: 10.5px; margin-top: 2px; }
.advux .uxdup { border: 1px solid var(--ux-line); background: var(--ux-panel); border-radius: 8px; cursor: pointer;
  padding: 2px 7px; font-size: 12.5px; color: var(--ux-sub); }
.advux .uxdup:hover { border-color: var(--ux-gold); color: var(--ux-gold); }
.advux-note { font-size: 12px; color: var(--ux-sub); margin: 8px 0 0; }

/* ============ Sổ xuống chi tiết từng ngày — bảng Theo nhân viên (đã duyệt 18/07) ============ */
tr.urow { cursor: pointer; }
tr.urow:hover td { background: color-mix(in srgb, var(--grid) 32%, transparent); }
.ucaret { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border: 1px solid var(--grid); border-radius: 6px; font-size: 10px; color: var(--text-muted);
  margin-right: 7px; vertical-align: -3px; transition: transform .18s, background .18s, color .18s; }
tr.urow.open .ucaret { transform: rotate(180deg); background: var(--series-1); border-color: var(--series-1); color: #fff; }
tr.udet > td { padding: 0 !important; background: var(--page); }
.udbox { padding: 12px 14px 14px; }
.udhead { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; margin-bottom: 9px; }
.udhead .t { font-weight: 800; font-size: 13px; }
.udhead .kpi { display: inline-flex; align-items: baseline; gap: 5px; font-size: 11.5px; color: var(--text-muted);
  background: var(--surface-1); border: 1px solid var(--grid); border-radius: 999px; padding: 2px 10px; }
.udhead .kpi b { color: var(--text-primary); font-size: 12px; }
.udscroll { max-height: 340px; overflow: auto; border: 1px solid var(--grid); border-radius: 11px; background: var(--surface-1); }
table.udtab { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.udtab th { position: sticky; top: 0; z-index: 2; background: var(--surface-1); font-size: 10.5px;
  color: var(--text-muted); font-weight: 700; text-align: right; padding: 6px 9px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
.udtab td { padding: 5px 9px; text-align: right; border-bottom: 1px solid var(--grid); white-space: nowrap; font-size: 12px; }
.udtab td.day { text-align: left; font-weight: 750; color: var(--text-muted); }
.udtab tr.cn td.day { color: #b45309; }
.udtab tbody tr:hover td { background: color-mix(in srgb, var(--grid) 30%, transparent); }
.udtab tfoot td { position: sticky; bottom: 0; z-index: 3; background: var(--page); font-weight: 800; border-top: 2px solid var(--baseline); }
.udtab tfoot td:first-child { text-align: left; }
.udbar { display: inline-block; vertical-align: middle; width: 52px; height: 5px; border-radius: 99px;
  background: var(--grid); overflow: hidden; margin-left: 6px; }
.udbar i { display: block; height: 100%; border-radius: 99px; }
.udbar.c i { background: var(--series-1); }
.udbar.g i { background: var(--good, #16a34a); }

/* ============ 💰 CHI PHÍ CÁ NHÂN v2 (đã duyệt 18/07) ============
   KPI 1 dải mỏng · banner pill · bỏ khung 4 chỉ số API · bảng TK gọn (gợi ý trong ô,
   bỏ cột máy tự tính) · thanh Lưu dính đáy · tab gộp · cảnh báo ngày chưa báo cáo */
.kband { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-bottom: 14px; }
@media (max-width: 980px) { .kband { grid-template-columns: repeat(2, 1fr); } }
.kb { background: var(--surface-1); border: 1px solid var(--grid); border-radius: 12px; box-shadow: var(--shadow); padding: 8px 13px; display: flex; flex-direction: column; gap: 2px; }
.kb .l { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--text-muted); }
.kb .v { font-size: 17px; font-weight: 800; }
.kb .v.neg { color: var(--critical); }
.kb .v .pct-pill { font-size: 13px; padding: 3px 11px; }
.kb .s { font-size: 10.5px; color: var(--text-muted); }
.mx-h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dband { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; }
.dband.ok { background: color-mix(in srgb, var(--good) 13%, transparent); color: var(--good-text); }
.dband.warn { background: color-mix(in srgb, var(--warning) 17%, transparent); color: #8a6400; }
.dband .bsub { font-weight: 600; opacity: .85; font-size: 11px; }
.dband .btn-yday { border: 0; background: var(--series-1); color: #fff; border-radius: 99px; font: inherit; font-size: 11px; font-weight: 800; padding: 2px 10px; cursor: pointer; }
.syncline { font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; font-weight: 700; }
.syncline .c { background: var(--surface-1); border: 1px solid var(--grid); border-radius: 999px; padding: 2px 10px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.syncline .c b { color: var(--text-primary); }
.savebar { position: sticky; bottom: 10px; z-index: 6; margin-top: 11px; display: flex; align-items: center; gap: 13px; flex-wrap: wrap; background: var(--surface-1); border: 1.5px solid var(--series-1); border-radius: 13px; padding: 9px 16px; box-shadow: 0 6px 24px rgb(0 0 0 / .15); }
.savebar .m { font-size: 11.5px; color: var(--text-muted); font-weight: 800; letter-spacing: .03em; }
.savebar .m b { color: var(--text-primary); font-size: 13.5px; }
.savebar .grow { flex: 1; }
.savebar .btn-save { margin: 0; }
.savebar #mx-pct { font-size: 13px; padding: 4px 12px; }
/* bảng TK v2: 8 cột co giãn khít khung — không tràn ngang */
.idtable.v2 { min-width: 0; }
.idrow.v2 { grid-template-columns: 26px 56px minmax(190px, 1.4fr) minmax(104px, 1fr) minmax(104px, 1fr) minmax(96px, 1fr) 104px 42px; gap: 8px; height: 56px; padding: 0 8px; }
.idrow.v2.head { height: 34px; font-size: 11.5px; font-weight: 900; color: var(--text-primary); letter-spacing: .04em; }
.idrow.v2 input.mx-in, .idrow.v2 input.mx-in.hoan { width: 100%; }
.idrow.v2 input.mx-in::placeholder { color: var(--text-muted); font-size: 11.5px; font-weight: 650; }
.idrow.v2 .grab.off { opacity: 0; pointer-events: none; }
.idrow.v2 .idcell { cursor: pointer; }
.idrow.v2 .pen { border: 0; background: none; font-size: 11px; opacity: .35; padding: 0 2px; flex: none; line-height: 1; }
.idrow.v2:hover .pen { opacity: .9; }
.idrow.v2 .sttag { font-size: 9px; font-weight: 800; border-radius: 5px; padding: 1px 6px; font-style: normal; flex: none; white-space: nowrap; }
.idrow.v2 .sttag.warn { background: color-mix(in srgb, var(--warning) 18%, transparent); color: #8a6400; }
.idrow.v2 .sttag.die { background: color-mix(in srgb, var(--critical) 14%, transparent); color: var(--critical); }
.idrow.v2 .otln { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 0 4px 8px; }
.idrow.v2:has(.otln) { height: auto; padding-top: 5px; }
.idrow.v2 input.mx-in.mini { width: 96px; height: 28px; font-size: 12px; padding: 0 6px; }
.idtable.v2 > .idrow:nth-child(4n+3):not(.head) { background: var(--page); }
/* tab gộp Bảng tháng / Theo tài khoản */
.pvtabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.pvtabs button { border: 1px solid var(--grid); background: var(--surface-1); color: var(--text-primary); border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 12.5px; font-weight: 750; cursor: pointer; }
.pvtabs button.on { background: var(--series-1); border-color: var(--series-1); color: #fff; }
/* tiêu đề bảng tháng đậm */
.mhead span { font-weight: 900; color: var(--text-primary); font-size: 10.5px; }
/* hàng ⚠ chưa báo cáo trong bảng tháng */
.mrow.mwarn { cursor: pointer; background: color-mix(in srgb, var(--warning) 12%, transparent); min-height: 44px; }
.mrow.mwarn .wtxt { grid-column: 2 / -1; font-size: 11.5px; font-weight: 800; color: #8a6400; text-align: left; }
.mrow.mwarn:hover { background: color-mix(in srgb, var(--warning) 20%, transparent); }
/* ngày ⚠ nhưng máy ĐÃ kéo doanh số/data về: cảnh báo chỉ chiếm cột chi phí, số vẫn hiện cột phải */
.mrow.mwarn.wdata .wtxt { grid-column: 2 / 7; }
.mscroll.gcredit .mrow.mwarn.wdata .wtxt { grid-column: 2 / 8; }
@media (max-width: 900px) {
  .mrow.mwarn.wdata .wtxt, .mscroll.gcredit .mrow.mwarn.wdata .wtxt { grid-column: 2 / 3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
/* ô ngày ⚠ trên dải chọn ngày */
.dtile.missd:not(.sel) { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
.mwd2 { font-size: 8px; color: #8a6400; line-height: 1; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .dband.warn,
  :root:where(:not([data-theme="light"])) .mrow.mwarn .wtxt,
  :root:where(:not([data-theme="light"])) .idrow.v2 .sttag.warn,
  :root:where(:not([data-theme="light"])) .mwd2 { color: var(--warning); } }
:root[data-theme="dark"] .dband.warn, :root[data-theme="dark"] .mrow.mwarn .wtxt,
:root[data-theme="dark"] .idrow.v2 .sttag.warn, :root[data-theme="dark"] .mwd2 { color: var(--warning); }
@media (max-width: 900px) {
  .idrow.v2 { grid-template-columns: 20px 44px minmax(130px, 1.2fr) minmax(84px, 1fr) minmax(84px, 1fr) minmax(78px, 1fr) 84px 34px; gap: 5px; }
  .savebar { gap: 9px; padding: 8px 11px; }
}
/* dải ngày không được đẩy trang tràn ngang (18/07) */
.datestrip .days { flex: 1 1 0; min-width: 0; }
/* v2: nút ⠿ chiếm hẳn 1 cột lưới (bỏ absolute của bản cũ) */
.idrow.v2, .idrow.v2.head { padding-left: 8px; }
.idrow.v2 .grab { position: static; transform: none; width: auto; height: auto; }

/* ============ CPCN v2.1 (đã duyệt 18/07): ghim đầu trang + ô lịch + cuộn 20 ngày ============ */
.pinhead { position: sticky; top: 56px; z-index: 20; background: var(--page);
  padding: 6px 0 10px; margin: -6px 0 0;
  box-shadow: 0 10px 16px -12px rgba(0, 0, 0, .22); }
.pinhead .page-head { margin-bottom: 12px; }
.pinhead .kband { margin-bottom: 0; }
/* ô ngày dạng lịch: thứ nhỏ + số to + thanh %ADS dưới chân (xanh ≤50 · vàng 50–55 · đỏ ≥55) */
.cal2 { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 1px solid var(--grid); border-radius: 13px; gap: 1px; padding-bottom: 6px;
  background: linear-gradient(180deg, var(--surface-1), var(--page)); box-shadow: 0 1px 2.5px rgba(0,0,0,.07); }
.cal2 .w { font-size: 7.5px; font-weight: 800; letter-spacing: .14em; color: var(--text-muted); line-height: 1; }
.cal2 .n { font-size: 17px; font-weight: 800; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cal2 .u { position: absolute; bottom: 5px; width: 18px; height: 3px; border-radius: 99px; background: var(--grid); }
.cal2 .u.ok { background: var(--good); }
.cal2 .u.wn { background: var(--warning); }
.cal2 .u.bd { background: var(--critical); }
.cal2.wk { background: linear-gradient(180deg, var(--surface-1), color-mix(in srgb, var(--critical) 9%, var(--page)));
  border-color: color-mix(in srgb, var(--critical) 22%, var(--grid)); }
.cal2.wk .w { color: var(--critical); }
.cal2.msd { border-color: var(--warning); background: linear-gradient(180deg, var(--surface-1), color-mix(in srgb, var(--warning) 14%, var(--page)));
  animation: calblink 1.8s ease-in-out infinite; }
.cal2.msd .w { color: #8a6400; }
@keyframes calblink { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 24%, transparent); } }
@media (prefers-reduced-motion: reduce) { .cal2.msd { animation: none; } }
.cal2.today { background: linear-gradient(160deg, #4a90e8, #1e5fb0); border-color: transparent;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--series-1) 45%, transparent); }
.cal2.today .w, .cal2.today .n { color: #fff; }
.cal2.today .u { background: rgba(255, 255, 255, .55); }
.cal2.fut2 { opacity: .5; box-shadow: none; background: var(--page); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .cal2.msd .w { color: var(--warning); } }
:root[data-theme="dark"] .cal2.msd .w { color: var(--warning); }
/* khung bảng tháng cao ~20 ngày, hàng cao hơn để vừa ô lịch */
.mscroll { max-height: 1190px; }
.mrow { min-height: 54px; }
.mrow .d { padding: 4px 0; }
@media (max-width: 700px) {
  .pinhead { position: static; box-shadow: none; padding: 0; margin: 0; }
  .cal2 { width: 40px; height: 40px; border-radius: 11px; }
  .cal2 .n { font-size: 14.5px; }
  .mscroll { max-height: 60vh; }
}

/* ============ 🚨 Bảng phạt v2 (đã duyệt 18/07): cột ✔ đã nộp phạt + ẩn NV nghỉ ============ */
.finetb .paidcell { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; }
.finetb .paidcell input { width: 17px; height: 17px; accent-color: var(--good); cursor: pointer; }
.finetb .paidcell .when { font-size: 10px; color: var(--good-text); font-weight: 700; line-height: 1.2; text-align: left; }
.finetb tr.paidrow td { background: color-mix(in srgb, var(--good) 8%, transparent); }
.finetb tr.paidrow .miss { color: var(--good-text); }
/* 🚨 nộp một phần (28/07): nộp rồi bị phạt thêm — nền vàng, tách Đã nộp / Còn thiếu */
.finetb tr.partrow td { background: color-mix(in srgb, var(--warning, #e0a33e) 9%, transparent); }
.tagp { font-size: 10.5px; font-weight: 700; color: var(--warn-text); background: color-mix(in srgb, var(--warning, #e0a33e) 15%, transparent); border-radius: 6px; padding: 2px 7px; }
.tagn { font-size: 10.5px; font-weight: 700; color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, transparent); border-radius: 6px; padding: 2px 7px; }
.finetb .fpaid { color: var(--good-text); font-weight: 700; }
.finetb .fowe { color: var(--warn-text); font-weight: 700; }
.finetb .fwhen { display: block; font-size: 10px; color: var(--text-muted); line-height: 1.25; font-weight: 400; }
.finetb .fthu { border-color: var(--good); color: var(--good-text); white-space: nowrap; }
.fpill { font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 2px 8px; white-space: nowrap; }
.fpill.ok { color: var(--good-text); background: color-mix(in srgb, var(--good) 12%, transparent); }
.fpill.no { color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, transparent); }
.fsums { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 11px; }
.fsums .sumc { background: var(--page); border: 1px solid var(--grid); border-radius: 10px; padding: 7px 13px; font-size: 11px; color: var(--text-muted); font-weight: 800; letter-spacing: .04em; }
.fsums .sumc b { display: block; font-size: 15px; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.fsums .sumc.owe b { color: var(--critical); }
.fsums .sumc.paid b { color: var(--good-text); }
.offnote { margin-top: 10px; font-size: 12px; color: var(--text-muted); background: var(--page); border: 1px dashed var(--grid); border-radius: 10px; padding: 8px 12px; }
.offnote b { color: var(--text-secondary); }

/* ============ 💸 ỨNG TIỀN v2 (đã duyệt 18/07): nền trắng chữ rõ · chip người nhận ·
   biểu đồ ngày · tổng ngày · trạng thái 3 màu · cột bill mua/CK ============ */
.advux-wrap { --ux-panel: #ffffff; --ux-ink: #241d0e; --ux-sub: #6b5c38; --ux-line: #e7e2d2; --ux-row: #ffffff; background: #ffffff; }
.advux .totbar .t1 { font: 800 13px/1 inherit; font-family: inherit; letter-spacing: .08em; color: #e8d49a; }
.advux .totbar .big { font-family: inherit; font-weight: 800; font-variant-numeric: tabular-nums; }
.advux .db .d { font: 800 17px/1 inherit; font-family: inherit; font-variant-numeric: tabular-nums; }
.advux .who .nm, .advux td .nm { font-size: 13px; font-weight: 800; }
.advux .who .nd { font-size: 11.5px; font-weight: 600; }
.advux .stk { font-size: 12px; font-weight: 700; background: #f6f4ec; letter-spacing: .02em; }
.advux .amt b { font-size: 14.5px; }
.rcphead2 { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--ux-gold, #a07d2a); margin: 2px 0 8px; }
.rcps2 { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.rcp2 { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #e7e2d2;
  border-radius: 11px; padding: 6px 12px; cursor: pointer; font: inherit; color: #241d0e; text-align: left; }
.rcp2:hover { border-color: #c2a04f; }
.rcp2.on { border-color: #a07d2a; box-shadow: 0 0 0 2px rgba(160, 125, 42, .25); }
.rcp2 .uxav { width: 30px; height: 30px; font-size: 11px; }
.rcp2 .nm { font-weight: 800; font-size: 13px; line-height: 1.25; }
.rcp2 .st { font-size: 11.5px; color: #6b5c38; font-weight: 600; }
.rcp2 .st b { color: #1f6b43; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.chartbox2 { background: #fff; border: 1px solid #e7e2d2; border-radius: 11px; padding: 10px 12px 6px; }
.chartbox2 .t { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: #a07d2a; margin-bottom: 4px; }
.chartbox2 canvas { width: 100%; height: 88px; display: block; }
.advux tr.uxdtot td { background: none; border: 0; box-shadow: none; padding: 2px 46px 6px 0; text-align: right;
  font-size: 11.5px; color: #6b5c38; font-weight: 700; font-variant-numeric: tabular-nums; }
.advux tr.uxdtot td b { color: #1f6b43; }
.advux tr.uxpend td:first-child { box-shadow: inset 3px 0 0 #e3ac2d; }
.uxpill.tr2 { color: #1e5fb0; background: #e3edfb; }
.uxpill.tr2 i { background: #1e5fb0; }
.uxpill.nb { color: #8a5f10; background: #f3ede0; border: 1px dashed #d8c48a; }
.uxpill.nb i { background: #b98e33; }
.advux td.ctr { text-align: center; }
.uxbill { border: 1px solid #e7e2d2; background: #fff; border-radius: 8px; height: 30px; width: 46px;
  cursor: pointer; font: inherit; font-size: 13px; color: #6b5c38; position: relative; }
.uxbill.has { border-color: #1f6b43; background: #e7f1e3; }
.uxbill.add { border-style: dashed; color: #a07d2a; }
.uxbill:hover { border-color: #a07d2a; }
/* 27/07 nhiều ảnh: số nhỏ góc ô 🧾 = đang có mấy ảnh bill */
.uxbill .cnt { position: absolute; right: -7px; top: -7px; min-width: 17px; height: 17px; border-radius: 9px;
  background: var(--series-1); color: #fff; font-size: 10px; font-weight: 900; line-height: 17px;
  padding: 0 4px; box-shadow: 0 0 0 2px var(--surface-1); }
/* Lưới ảnh trong modal bill nhiều ảnh */
.blm-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 11px; }
.blm-shot { position: relative; border: 1px solid var(--grid); border-radius: 10px; overflow: hidden;
  background: var(--page); aspect-ratio: 3 / 4; }
.blm-shot a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.blm-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blm-shot .no { position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,.62); color: #fff;
  font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 1px 6px; pointer-events: none; }
.blm-shot .x { position: absolute; right: 5px; top: 5px; width: 22px; height: 22px; border-radius: 50%;
  border: 0; cursor: pointer; background: rgba(0,0,0,.62); color: #fff; font-size: 13px; line-height: 22px; padding: 0; }
.blm-shot .x:hover { background: var(--critical); }
.blm-shot .mv { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between;
  background: linear-gradient(transparent, rgba(0,0,0,.55)); padding: 14px 4px 4px; }
.blm-shot .mv button { border: 0; background: rgba(0,0,0,.55); color: #fff; border-radius: 6px;
  width: 22px; height: 20px; font-size: 11px; cursor: pointer; padding: 0; }
.blm-shot .mv button:disabled { opacity: .28; cursor: default; }
.blm-cnt { margin-top: 9px; font-weight: 700; }
.stile.noclick { cursor: default; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .advux-wrap {
  --ux-panel: #211c14; --ux-ink: #efe6d2; --ux-sub: #a4926c; --ux-line: #3a3221; background: #181410; }
  :root:where(:not([data-theme="light"])) .rcp2 { background: #211c14; border-color: #3a3221; color: #efe6d2; }
  :root:where(:not([data-theme="light"])) .rcp2 .st { color: #a4926c; }
  :root:where(:not([data-theme="light"])) .rcp2 .st b { color: #8fd4ab; }
  :root:where(:not([data-theme="light"])) .chartbox2 { background: #211c14; border-color: #3a3221; }
  :root:where(:not([data-theme="light"])) .advux .stk { background: #181410; }
  :root:where(:not([data-theme="light"])) .uxbill { background: #211c14; border-color: #3a3221; color: #a4926c; }
  :root:where(:not([data-theme="light"])) .uxbill.has { background: #1d3527; border-color: #8fd4ab; }
  :root:where(:not([data-theme="light"])) .advux tr.uxdtot td { color: #a4926c; }
  :root:where(:not([data-theme="light"])) .advux tr.uxdtot td b { color: #8fd4ab; } }
:root[data-theme="dark"] .advux-wrap { --ux-panel: #211c14; --ux-ink: #efe6d2; --ux-sub: #a4926c; --ux-line: #3a3221; background: #181410; }
:root[data-theme="dark"] .rcp2 { background: #211c14; border-color: #3a3221; color: #efe6d2; }
:root[data-theme="dark"] .rcp2 .st { color: #a4926c; }
:root[data-theme="dark"] .rcp2 .st b { color: #8fd4ab; }
:root[data-theme="dark"] .chartbox2 { background: #211c14; border-color: #3a3221; }
:root[data-theme="dark"] .advux .stk { background: #181410; }
:root[data-theme="dark"] .uxbill { background: #211c14; border-color: #3a3221; color: #a4926c; }
:root[data-theme="dark"] .uxbill.has { background: #1d3527; border-color: #8fd4ab; }
:root[data-theme="dark"] .advux tr.uxdtot td { color: #a4926c; }
:root[data-theme="dark"] .advux tr.uxdtot td b { color: #8fd4ab; }

/* ============ 📱 CPCN v2 trên điện thoại (19/07): hàng TK dạng thẻ 2 dòng ============ */
@media (max-width: 700px) {
  .idrow.v2.head { display: none; } /* nhãn cột đã nằm trong ô nhập (placeholder) */
  .idrow.v2:not(.head) {
    display: flex; flex-wrap: wrap; align-items: center;
    height: auto; min-height: 0; padding: 8px 8px 9px; gap: 6px;
  }
  .idrow.v2:not(.head) .grab { order: 0; flex: 0 0 auto; }
  .idrow.v2:not(.head) .pf { order: 1; flex: 0 0 auto; }
  .idrow.v2:not(.head) .idcell { order: 2; flex: 1 1 110px; min-width: 0; }
  .idrow.v2:not(.head) .balcell { order: 3; flex: 0 0 auto; font-size: 12px; }
  .idrow.v2:not(.head) .balcell:not(:empty)::before {
    content: 'còn '; font-size: 10px; font-weight: 700; color: var(--text-muted); }
  .idrow.v2:not(.head) .mxmbtn { order: 4; flex: 0 0 auto; grid-column: auto; width: auto; padding: 5px 9px; }
  .idrow.v2:not(.head)::after { content: ''; order: 5; flex: 1 1 100%; height: 0; margin: -3px 0 0; } /* ngắt dòng: ô nhập luôn xuống hàng 2 */
  .idrow.v2:not(.head) .inwrap { order: 6; flex: 1 1 28%; min-width: 0; }
  .idrow.v2:not(.head) .inwrap input.mx-in { width: 100%; padding-left: 8px; }
  .idrow.v2:not(.head) .inwrap input.mx-in::placeholder { color: var(--text-muted); }
  .idrow.v2:not(.head) .otln { order: 7; flex: 1 1 100%; justify-content: flex-end; padding: 0; }
  .idrow.v2:not(.head) input[type="hidden"] { display: none; }
}

/* ============ 🔐 Phân quyền tài khoản (đã duyệt demo 19/07) ============ */
.permrows { border: 1px solid var(--grid); border-radius: 12px; padding: 2px 14px; }
.permrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--grid); flex-wrap: wrap; }
.permrow:last-child { border-bottom: none; }
.permrow .pa { font-weight: 700; font-size: 13px; min-width: 0; }
.permrow .pa small { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-muted); }
.permseg { display: inline-flex; border: 1px solid var(--grid); border-radius: 9px; overflow: hidden; flex: none; }
.permseg button { border: none; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 650; padding: 6px 12px; cursor: pointer; border-right: 1px solid var(--grid); }
.permseg button:last-child { border-right: none; }
.permseg button.on.p-h { background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-primary); }
.permseg button.on.p-v { background: color-mix(in srgb, var(--series-1) 14%, transparent); color: var(--series-1); }
.permseg button.on.p-e { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good-text); font-weight: 800; }
.permtag { font-style: normal; font-size: 9.5px; font-weight: 800; color: #8a6400; background: color-mix(in srgb, var(--warning) 20%, transparent); border-radius: 99px; padding: 1px 6px; vertical-align: 1px; }
@media (max-width: 700px) { .permrow { align-items: flex-start; flex-direction: column; } }
/* 🔐 03/09 (GĐ duyệt demo): hộp phân quyền MỨC + PHẠM VI — 3 cột: khu · mặc định theo vai · quyền riêng */
.permrow .pa { flex: 0 0 200px; }
.permrow .pmacw9 { flex: 0 0 130px; font-size: 12px; white-space: nowrap; }
.permrow .prw9 { flex: 1; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.permrow.pmh9 { border-bottom: none; padding: 4px 2px 2px; }
.permrow.pmh9 .pa, .permrow.pmh9 .pmacw9, .permrow.pmh9 .prw9 { font-weight: 800; font-size: 10.5px; color: var(--text-muted); }
.permrow.prg9 { background: color-mix(in srgb, var(--series-1) 5%, transparent); border-radius: 8px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.pmac9 { font-weight: 700; border-radius: 6px; padding: 1px 6px; font-size: 11.5px; }
.pmac9.pm-h { color: var(--text-muted); }
.pmac9.pm-v { color: var(--series-1); background: color-mix(in srgb, var(--series-1) 10%, transparent); }
.pmac9.pm-e { color: var(--good-text); background: color-mix(in srgb, var(--good) 12%, transparent); }
.pseg9 { display: inline-flex; border: 1px solid var(--grid); border-radius: 8px; overflow: hidden; flex: none; }
.pseg9 button { border: none; background: transparent; color: var(--text-muted); font: inherit; font-size: 11px; font-weight: 700; padding: 4px 7px; cursor: pointer; border-right: 1px solid var(--grid); white-space: nowrap; }
.pseg9 button:last-child { border-right: none; }
.pseg9 button.on.p-h { background: color-mix(in srgb, var(--critical, #c53030) 14%, transparent); color: var(--critical, #c53030); }
.pseg9 button.on.p-v { background: color-mix(in srgb, var(--warning) 20%, transparent); color: #8a6400; }
.pseg9 button.on.p-e { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good-text); }
.pseg9.pv9 button.on { background: color-mix(in srgb, var(--series-1) 14%, transparent); color: var(--series-1); }
.pcap9 { border: 1px dashed var(--grid); background: none; color: var(--series-1); border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.pcap9:hover { border-color: var(--series-1); }
.pbo9 { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.pbo9:hover { color: var(--critical, #c53030); }
/* 🧭 03/09 (GĐ duyệt demo): bảng công CẢ NHÁNH / TOÀN VP — dòng kẻ nhóm theo phòng */

/* 🔐 TAB PHÂN QUYỀN (GĐ duyệt demo 03/09) — bảng nhánh × cấp bậc, ô mức + phạm vi */
.pqw9 { overflow: auto; max-height: 64vh; border: 1px solid var(--grid); border-radius: 12px; background: var(--bg-card, #fff); }
.pqtb9 { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.pqtb9 th, .pqtb9 td { border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); padding: 3px 5px; text-align: center; white-space: nowrap; }
.pqtb9 thead tr.g9 th { background: var(--bg-muted, #eef1f5); font-size: 10.5px; position: sticky; top: 0; z-index: 4; height: 20px; }
.pqtb9 thead tr.r29 th { background: var(--bg-muted, #eef1f5); color: var(--text-muted); font-size: 10px; position: sticky; top: 27px; z-index: 4; height: 17px; }
.pqtb9 td:first-child, .pqtb9 th:first-child { text-align: left; position: sticky; left: 0; background: var(--bg-card, #fff); z-index: 2; font-weight: 600; border-right: 2px solid var(--grid); font-size: 12.5px; }
.pqtb9 thead th:first-child { background: var(--bg-muted, #eef1f5); z-index: 5; }
.pqtb9 th.gs9, .pqtb9 td.gs9 { border-right: 2px solid var(--grid); }
.pqc9 { cursor: pointer; font-weight: 700; user-select: none; min-width: 33px; }
.pqc9.pm-h { background: color-mix(in srgb, var(--critical, #c53030) 8%, transparent); color: var(--critical, #c53030); }
.pqc9.pm-v { background: color-mix(in srgb, var(--warning) 14%, transparent); color: #8a6400; }
.pqc9.pm-e { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good-text); }
.pqc9.doi9 { outline: 2px solid #7c3aed; outline-offset: -2px; }
.pqc9:hover { outline: 2px solid var(--series-1); outline-offset: -2px; }
.pqc9.lk9 { cursor: not-allowed; opacity: .7; }
.pqs9 { display: block; font-size: 8.5px; font-weight: 600; opacity: .85; line-height: 1.05; }
#pqpop9 { position: fixed; z-index: 60; background: var(--bg-card, #fff); border: 1px solid var(--grid); border-radius: 12px; box-shadow: 0 8px 26px rgba(0, 0, 0, .22); padding: 10px; min-width: 230px; }
#pqpop9[hidden] { display: none !important; }
#pqpop9 .pqpt9 { font-size: 10.5px; color: var(--text-muted); font-weight: 700; margin: 2px 0 5px; }
#pqpop9 .pqrow9 { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 7px; }
#pqpop9 button { border: 1px solid var(--grid); background: var(--bg-card, #fff); color: var(--text-primary, #1c2430); border-radius: 8px; padding: 4px 9px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
#pqpop9 button.on { background: color-mix(in srgb, var(--series-1) 14%, transparent); border-color: var(--series-1); color: var(--series-1); }
#pqpop9 button:hover { border-color: var(--series-1); }

#cc-tb .ccgr9 td.ccgr9c { position: sticky; left: 0; background: color-mix(in srgb, var(--series-1) 7%, var(--bg-card, #fff)); color: var(--text-muted); font-size: 10.5px; font-weight: 800; letter-spacing: .4px; padding: 3px 10px; border-top: 1px solid var(--grid); }

@media (max-width: 700px) { .permrow .pa, .permrow .pmacw9 { flex: none; } .permrow .prw9 { justify-content: flex-start; } }

/* ============ 📊 Xuất báo cáo + 💬 ghi chú ứng tài nguyên (đã duyệt demo 19/07) ============ */
.expbar { display: inline-flex; gap: 6px; align-items: center; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--grid); }
.advux .gnote { display: inline-flex; align-items: center; gap: 6px; max-width: 160px; }
.advux .gnote .tx { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; max-width: 120px; text-align: left; }
.advux .gnote .gwho { display: block; font-size: 9.5px; color: var(--text-muted); text-align: left; }
.gbtn { border: 1px dashed var(--series-1); background: color-mix(in srgb, var(--series-1) 10%, transparent); color: var(--series-1); border-radius: 7px; font-size: 11px; padding: 3px 8px; cursor: pointer; font-weight: 700; white-space: nowrap; }
.gbtn.has { border-style: solid; background: transparent; padding: 3px 6px; }
@media (max-width: 700px) { .expbar { border-left: none; padding-left: 0; } }

/* ============ 🏦 Ví NCC — thuê TK quảng cáo (đã duyệt demo 19/07) ============ */
.nccrow2 { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 13px; }
.nccchip { border: 1.5px solid var(--grid); border-radius: 12px; background: var(--surface-1); padding: 8px 14px; cursor: pointer; font: inherit; text-align: left; color: var(--text-primary); }
.nccchip b { display: block; font-size: 13px; }
.nccchip span { font-size: 11px; color: var(--text-muted); }
.nccchip .bal { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.nccchip.on { border-color: var(--series-1); background: color-mix(in srgb, var(--series-1) 10%, transparent); }
.nccchip.low .bal { color: var(--critical); }
.kb.kwarn { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
.kb.kwarn .v { color: #8a6400; }
/* 🧾 tất toán tài khoản (GĐ duyệt demo 06/08) */
.nccchip .ttkept { display: block; font-size: 10.5px; font-weight: 800; color: var(--critical); }
.kband.ttk4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .kband.ttk4 { grid-template-columns: repeat(2, 1fr); } }
.ttalert { border: 1.5px solid var(--critical); background: color-mix(in srgb, var(--critical) 8%, transparent); border-radius: 10px; padding: 9px 13px; font-size: 13px; cursor: pointer; margin-bottom: 10px; }
.ttalert b { color: var(--critical); }
.ttalert.ok { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); cursor: default; }
.ttbar { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.ttbar input { flex: 1; min-width: 170px; }
.ttbar select { font: inherit; font-size: 12px; cursor: pointer; border: 1px solid var(--grid); background: var(--surface-1); color: var(--text); border-radius: 99px; padding: 4px 9px; }
.ttfb { font: inherit; font-size: 12px; cursor: pointer; border: 1px solid var(--grid); background: var(--surface-1); color: var(--text-muted); border-radius: 99px; padding: 4px 11px; }
.ttfb.on { border-color: var(--series-1); color: var(--series-1); font-weight: 700; background: color-mix(in srgb, var(--series-1) 8%, transparent); }
.ttst { font-size: 10px; font-weight: 800; border-radius: 5px; padding: 1px 7px; white-space: nowrap; }
.ttst.a { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-text); }
.ttst.c { background: color-mix(in srgb, var(--warning) 16%, transparent); color: #8a6400; }
.ttst.d { background: color-mix(in srgb, var(--text-muted) 15%, transparent); color: var(--text-muted); }
.ttst.s { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-text); }
.ttxa { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 5px; font-size: 10px; font-weight: 800; white-space: nowrap; background: color-mix(in srgb, var(--warning) 18%, transparent); color: #8a6400; cursor: help; }

/* ⬆⬇ 3 nấc Leader + 🌳 cây thăng tiến (12/08) */
.nacchip { font-size: 9.5px; font-weight: 800; border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.nacchip.n1 { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-text); }
.nacchip.n2 { background: color-mix(in srgb, var(--warning) 18%, transparent); color: #8a6400; }
.nacchip.n3 { background: color-mix(in srgb, var(--critical) 12%, transparent); color: var(--critical); }
/* ⬆⬇ ô chọn nấc Leader trong bảng lương + bảng tích duy trì theo tháng (15/08) */
.nacsel { font-size: 10px; font-weight: 700; border-radius: 6px; padding: 1px 3px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); max-width: 172px; cursor: pointer; }
.nacsel.n1 { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.nacsel.n2 { border-color: color-mix(in srgb, var(--warning) 60%, transparent); }
.nacsel.n3 { border-color: color-mix(in srgb, var(--critical) 50%, transparent); }
.nacgrid { border-collapse: collapse; font-size: 10.5px; margin: 7px 0 3px; }
.nacgrid th, .nacgrid td { padding: 2px 6px; text-align: center; border: 1px solid var(--border); }
.nacgrid th { color: var(--text-muted); font-size: 9.5px; }
.nacgrid td:first-child { text-align: left; color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.nactick { min-width: 27px; padding: 1px 5px; border-radius: 5px; border: 1px dashed var(--border); background: transparent; color: var(--text-muted); cursor: pointer; font-weight: 800; font-size: 11px; }
span.nactick { cursor: default; }
.nactick.ok { color: var(--good-text); background: color-mix(in srgb, var(--good) 12%, transparent); border-color: transparent; }
.nactick.no { color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, transparent); border-color: transparent; }
.nactick.tay { border: 1.5px solid currentColor; }
.nacmini { font-size: 9.5px; font-weight: 800; border-radius: 4px; padding: 1px 5px; color: var(--text-muted); }
.nacmini.m1 { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-text); }
.nacmini.m2 { background: color-mix(in srgb, var(--warning) 18%, transparent); color: #8a6400; }
.nacmini.m3 { background: color-mix(in srgb, var(--critical) 12%, transparent); color: var(--critical); }
/* ⚙ cơ chế lương: chia khu cho dễ đọc (15/08) */
.cfsec { border: 1px solid var(--grid); border-radius: 10px; padding: 10px 12px 12px; margin-bottom: 12px; }
.cfhead { font-size: 11.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--series-1); margin-bottom: 9px; }
.cfsec .field label { font-size: 11px; }
.cfrow { display: grid; gap: 8px 10px; margin-bottom: 8px; }
.cfrow.c2 { grid-template-columns: 1fr 1fr; }
.cfrow.c3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 680px) { .cfrow.c2, .cfrow.c3 { grid-template-columns: 1fr; } }
.cfta { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-1); color: var(--text-primary); }
.cfpair { display: flex; gap: 6px; }
.cfpair input { min-width: 0; }
.cfhint { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--text-muted); }
.cfck { display: flex; gap: 5px; align-items: center; cursor: pointer; }
/* 📌 danh mục điều kiện trên cây thăng tiến — rõ ràng như nhau, không chữ mờ (17/08) */
.creq { margin: 7px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--text-primary); }
.creq li { display: flex; gap: 7px; align-items: flex-start; padding: 2.5px 0; line-height: 1.45; }
.creq .ci { flex: none; }
.cnode.far.info .ccard { opacity: .95; border-style: solid; }
/* 🏢 cây phòng ban (17/08) */
.pbtree { display: flex; flex-direction: column; gap: 6px; }
.pbnest { margin-left: 22px; display: flex; flex-direction: column; gap: 6px; border-left: 2px solid var(--grid); padding-left: 12px; }
.pbrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--grid); border-radius: 9px; padding: 6px 10px; font-size: 12.5px; }
.pbrow .pbic { font-size: 15px; }
.pbrow select, .pbrow input { font-size: 11.5px; padding: 2px 5px; border: 1px solid var(--grid); border-radius: 7px; background: var(--surface-1); color: var(--text-primary); max-width: 200px; }
.pbcty { border-width: 2px; border-color: color-mix(in srgb, var(--series-1) 45%, transparent); }
.pbphong { border-color: color-mix(in srgb, var(--series-1) 30%, transparent); }
.pbmem { border-style: dashed; font-size: 12px; padding: 4px 10px; }
/* 🏢 SƠ ĐỒ TỔ CHỨC full màn (GĐ duyệt 17/08) — khối nối dây liền mạch */
#sdov { position: fixed; inset: 0; z-index: 90; background: var(--page); display: flex; flex-direction: column; }
/* 👥 Tab Nhân sự gộp (GĐ duyệt 17/08): sơ đồ nằm NGAY TRONG tab con 🏢 Phòng ban */
#sdov.sd-inline { position: relative; inset: auto; z-index: 1; height: calc(100vh - 265px); min-height: 460px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.ns-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ns-tab { border: 1px solid var(--baseline); background: var(--surface-1); color: var(--text-secondary); border-radius: 11px; padding: 8px 15px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ns-tab.on { background: var(--series-1); border-color: var(--series-1); color: #fff; }
/* ⚖️ DUYỆT BÀI QUẢNG CÁO (GĐ duyệt 18/08) — pháp chế gác cổng trước khi chạy */
.bqlist { display: flex; flex-direction: column; gap: 10px; }
.bqit { background: var(--surface-1); border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow); padding: 11px 15px; display: flex; gap: 12px; align-items: flex-start; }
.bqit.cho { border-left: 4px solid var(--warning); }
.bqit.ok { border-left: 4px solid var(--good); }
.bqit.no { border-left: 4px solid var(--critical); }
.bqav { flex: none; width: 34px; height: 34px; border-radius: 10px; color: #fff; font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.bqbody { flex: 1; min-width: 0; }
.bqt1 { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.bqt1 b { font-size: 13.5px; }
.bqsp { font-size: 10px; font-weight: 700; background: color-mix(in srgb, var(--surface-1) 60%, var(--page)); border: 1px solid var(--grid); border-radius: 6px; padding: 0 6px; color: var(--text-muted); }
.bqstt { font-size: 10px; font-weight: 800; border-radius: 6px; padding: 1px 7px; }
.bqstt.cho { background: color-mix(in srgb, var(--warning) 18%, transparent); color: #8a6400; }
.bqstt.ok { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good-text); }
.bqstt.no { background: color-mix(in srgb, var(--critical) 14%, transparent); color: var(--critical); }
/* 🆕 bài vừa xử lý trong 1 giờ — nổi lên đầu tab kết quả (GĐ chốt 20/08) */
.bqmoi { font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 8px; background: var(--series-1); color: #fff; white-space: nowrap; }
.bqlnk { display: inline-block; max-width: min(560px, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--series-1); font-size: 12.5px; text-decoration: underline; }
.bqmeta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.bqlau { color: #8a6400; font-weight: 700; }
.bqlydo { margin-top: 5px; font-size: 12px; background: color-mix(in srgb, var(--critical) 11%, transparent); color: var(--critical); border-radius: 8px; padding: 4px 10px; }
.bqgc { margin-top: 5px; font-size: 12px; background: color-mix(in srgb, var(--good) 11%, transparent); color: var(--good-text); border-radius: 8px; padding: 4px 10px; }
/* ✍️ ghi chú ngay trên card duyệt bài (GĐ yêu cầu 18/08) — rời ô là tự lưu ·
   19/08: ô TỰ GIÃN theo nội dung để đọc được HẾT note dài */
.bqnote { display: block; width: 100%; max-width: 640px; margin-top: 6px; border: 1px dashed var(--grid); border-radius: 8px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; line-height: 1.5; padding: 4px 10px; resize: none; overflow: hidden; }
.bqnote:focus { border-style: solid; border-color: var(--series-1); outline: none; color: var(--text-primary); }
.bqnote::placeholder { color: var(--text-muted); }
.bqnotero { margin-top: 6px; font-size: 12px; color: var(--text-secondary); white-space: pre-wrap; background: color-mix(in srgb, var(--series-1) 6%, transparent); border-radius: 8px; padding: 4px 10px; max-width: 640px; }
/* 💬 trao đổi trên bài duyệt QC (GĐ duyệt demo 20/08) */
.bqchatbtn { position: relative; }
.bqbdg { position: absolute; top: -7px; right: -7px; background: var(--critical); color: #fff; font-size: 9.5px; font-weight: 800; border-radius: 10px; padding: 0 5px; min-width: 16px; text-align: center; line-height: 1.5; }
.bqchatbox { margin-top: 8px; border: 1px solid var(--grid); border-radius: 11px; background: color-mix(in srgb, var(--series-1) 3%, var(--surface-1)); padding: 9px 11px; max-width: 640px; }
.bqchatbox .clb { font-size: 9.5px; font-weight: 800; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 6px; }
.bqmsgs { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; }
.bqm { max-width: 80%; align-self: flex-start; background: color-mix(in srgb, var(--warning) 14%, var(--surface-1)); border-radius: 11px; padding: 5px 10px; font-size: 12.5px; line-height: 1.5; }
.bqm.toi { align-self: flex-end; background: color-mix(in srgb, var(--series-1) 11%, var(--surface-1)); }
.bqm .who { display: block; font-size: 10px; font-weight: 800; color: #8a5600; }
.bqm.toi .who { color: var(--series-1); }
.bqm .who i { font-style: normal; font-weight: 500; opacity: .65; margin-left: 6px; font-size: 9.5px; }
.bqctype { display: flex; gap: 7px; margin-top: 8px; }
.bqctype input { flex: 1; border: 1px solid var(--grid); border-radius: 9px; font: inherit; font-size: 12.5px; padding: 5px 10px; background: var(--surface-1); color: var(--text-primary); }
/* ✅ dấu ĐÃ CHECK từng TK theo tháng — ma trận Ví NCC (GĐ duyệt demo 20/08) */
.nacc.ckon { background: color-mix(in srgb, var(--good) 7%, var(--surface-1)); border-color: color-mix(in srgb, var(--good) 32%, var(--grid)); border-left: 4px solid var(--good); }
.nacc.ckdoi { background: color-mix(in srgb, var(--warning) 9%, var(--surface-1)); border-left: 4px solid var(--warning); }
.ckchip { display: inline-block; font-size: 9.5px; font-weight: 800; background: var(--good); color: #fff; border-radius: 10px; padding: 1px 8px; margin-left: 7px; vertical-align: 2px; cursor: help; }
.ckchip.doi { background: var(--warning); color: #3a2f14; }
.ckbtn { border: 1px solid var(--grid); border-radius: 8px; padding: 3px 10px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; background: var(--surface-1); color: var(--text-muted); white-space: nowrap; }
.ckbtn:hover { border-color: var(--good); color: var(--good-text, #177a45); }
.ckbtn.on { background: var(--good); border-color: var(--good); color: #fff; }
.ckbtn.doi { background: var(--warning); border-color: var(--warning); color: #3a2f14; }
/* 🔎 ô lọc tab duyệt bài (GĐ thêm 19/08): nhân viên · ngày gửi · người duyệt */
.bqloc { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: -2px 0 12px; font-size: 12px; color: var(--text-muted); }
.bqloc label { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.bqloc select, .bqloc input[type=date] { border: 1px solid var(--grid); border-radius: 8px; padding: 3px 8px; font: inherit; font-size: 12px; background: var(--surface-1); color: var(--text-primary); }
/* 🔍 quét kịch bản (GĐ duyệt demo 19/08): soi từ cấm + gợi ý thay + 🎧 nghe video */
.qkb-line { display: flex; align-items: center; gap: 7px; margin-top: 6px; flex-wrap: wrap; }
.qkb-mini { font-size: 10.5px; font-weight: 800; color: var(--good-text, #177a45); }
.qkb-mini.vi { color: var(--critical); }
.qkb-box { margin-top: 7px; border: 1px dashed var(--grid); border-radius: 10px; padding: 8px 11px; max-width: 680px; }
.qkb-vi { border-left: 3px solid var(--critical); border-radius: 6px; background: color-mix(in srgb, var(--critical) 6%, transparent); padding: 5px 9px; margin-bottom: 6px; font-size: 12.5px; line-height: 1.6; }
.qkb-vi.nhac { border-left-color: #e0a800; background: color-mix(in srgb, #e0a800 8%, transparent); }
.qkb-vi mark { background: color-mix(in srgb, var(--critical) 16%, transparent); color: var(--critical); font-weight: 800; border-radius: 4px; padding: 0 3px; }
.qkb-vi.nhac mark { background: color-mix(in srgb, #e0a800 22%, transparent); color: #8a5600; }
.qkb-goiy { display: inline-block; font-size: 11.5px; color: var(--good-text, #177a45); background: color-mix(in srgb, var(--good) 10%, transparent); border-radius: 6px; padding: 1px 8px; margin: 2px 4px 0 0; }
.qkb-sach { font-size: 12.5px; font-weight: 700; color: var(--good-text, #177a45); }
.qkb-raw { margin-top: 7px; border-top: 1px dashed var(--grid); padding-top: 6px; font: 11.5px/1.6 inherit; white-space: pre-wrap; color: var(--text-muted); max-height: 150px; overflow: auto; }
.btnrow9 { display: flex; gap: 7px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
#kbe-t, #tc-t { width: 100%; border: 1px solid var(--grid); border-radius: 10px; font: inherit; font-size: 12.5px; line-height: 1.6; padding: 8px 11px; background: var(--surface-1); color: var(--text-primary); }
/* ⛔ hủy duyệt (GĐ duyệt demo 19/08): thanh hiệu lực 2 khúc xanh/đỏ kèm khoảng ngày */
.bqit.ok.huy { border-left-color: var(--critical); }
.bqstt.huy { background: color-mix(in srgb, var(--critical) 14%, transparent); color: var(--critical); }
.bqrun { margin-top: 8px; max-width: 640px; }
.bqrbar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; border: 1px solid var(--grid); }
.bqrbar i { font-style: normal; font-size: 10px; font-weight: 800; display: grid; place-items: center; background: color-mix(in srgb, var(--good) 13%, var(--surface-1)); color: var(--good-text); min-width: 0; white-space: nowrap; overflow: hidden; }
.bqrbar i.h { background: color-mix(in srgb, var(--critical) 11%, var(--surface-1)); color: var(--critical); }
.bqhuybtn { color: var(--critical); }
/* 📌 phân bổ pháp chế (GĐ duyệt demo 19/08): bảng tải + dòng phân trên card */
.bqtai { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 11px; }
.bqtaii { display: flex; align-items: center; gap: 8px; border: 1px solid var(--grid); border-radius: 11px; padding: 6px 11px; background: var(--surface-1); }
.bqtaii .bqav { width: 26px; height: 26px; font-size: 10px; }
.bqtaii b { display: block; font-size: 12px; line-height: 1.25; }
.bqtaii small { font-size: 10.5px; color: var(--text-muted); }
.bqtaii small i { font-style: normal; font-weight: 800; color: var(--series-1); }
.bqtaii.tre { border-color: color-mix(in srgb, var(--critical) 45%, var(--grid)); }
.bqtaii.tre small { color: var(--critical); }
.bqpb { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 5px; font-size: 12px; color: var(--text-muted); }
.bqwho { background: color-mix(in srgb, var(--series-1) 12%, transparent); color: var(--series-1); border-radius: 8px; padding: 1px 9px; font-size: 11.5px; }
.bqwho.me { background: var(--series-1); color: #fff; }
.bqmay { font-size: 10.5px; color: var(--text-muted); }
.bqphan { border: 1px dashed var(--grid); border-radius: 8px; padding: 2px 7px; font: inherit; font-size: 11px; background: var(--surface-1); color: var(--text-muted); cursor: pointer; }
.bqphan:hover { border-color: var(--series-1); color: var(--series-1); }
/* 🔧 trạng thái YÊU CẦU SỬA (GĐ bổ sung 19/08) */
.bqit.sua { border-left: 4px solid #e08c00; }
.bqstt.sua { background: color-mix(in srgb, #e08c00 18%, transparent); color: #8a5600; }
.bqlydo.sua { background: color-mix(in srgb, #e08c00 12%, transparent); color: #8a5600; }
.bqsua { color: #8a5600; }
.bqkq { margin-top: 5px; font-size: 11.5px; color: var(--good-text); }
.bqacts { display: flex; gap: 6px; flex-direction: column; align-items: stretch; flex: none; }
.bqacts .btn { white-space: nowrap; }
.bqacts .bqno { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); }
.bqhist { padding: 5px 0; border-bottom: 1px solid var(--grid); font-size: 12.5px; }
/* 🗓 BẢNG CHẤM CÔNG full màn (GĐ duyệt 17/08) — chọn là tự lưu */
#ccov { position: fixed; inset: 0; z-index: 90; background: var(--page); display: flex; flex-direction: column; }
/* 🗓 tab Chấm công riêng (GĐ duyệt 18/08): bảng nằm TRONG trang thay vì overlay */
#ccov.cc-inline { position: relative; inset: auto; z-index: 1; height: calc(100vh - 158px); min-height: 420px; border: 1px solid var(--grid); border-radius: 14px; overflow: hidden; }
.cc-quick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--grid); font-size: 12px; background: color-mix(in srgb, var(--surface-1) 90%, transparent); }
.cc-quick b { font-size: 10.5px; color: var(--text-muted); }
.ccpen { border: 1px solid var(--grid); background: var(--surface-1); border-radius: 8px; padding: 3px 10px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; color: var(--text-secondary); }
.ccpen.on { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.cc-quick select { border: 1px solid var(--grid); border-radius: 8px; padding: 3px 8px; font: inherit; font-size: 11.5px; background: var(--surface-1); color: var(--text-primary); }
.cc-wrap { flex: 1; overflow: auto; }
.cc-tb { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cc-tb thead th { position: sticky; top: 0; z-index: 4; background: var(--series-1); color: #fff; font-size: 10px; padding: 4px 2px; text-align: center; min-width: 36px; }
.cc-tb thead th.nm { left: 0; z-index: 5; text-align: left; padding-left: 12px; min-width: 210px; }
.cc-tb thead th.cn { background: color-mix(in srgb, var(--series-1) 72%, #a33); }
.cc-tb thead th.tot, .cc-tb thead th.phep { min-width: 62px; background: color-mix(in srgb, var(--series-1) 82%, #000); }
.cc-tb td { border: 1px solid var(--grid); text-align: center; font-size: 11.5px; padding: 0; position: relative; background: var(--surface-1); }
.cc-tb td.nm { text-align: left; padding: 4px 12px; white-space: nowrap; position: sticky; left: 0; z-index: 3; border-right: 2px solid var(--grid); font-weight: 600; }
.cc-tb td.nm b { cursor: pointer; }
.cc-tb td.nm b:hover { color: var(--series-1); }
.cc-tb td.nm .b2 { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.ccms { display: inline-block; font-size: 9px; font-weight: 800; border-radius: 5px; padding: 0 5px; margin-left: 6px; background: color-mix(in srgb, var(--warning) 20%, transparent); color: #8a6400; }
.ccms.qua { background: color-mix(in srgb, var(--critical) 16%, transparent); color: var(--critical); }
.cc-tb td.c { cursor: pointer; min-width: 36px; height: 28px; user-select: none; }
.cc-tb td.c:hover { outline: 2px solid var(--series-1); outline-offset: -2px; }
.cc-tb td.cn2 { background: color-mix(in srgb, var(--critical) 6%, var(--surface-1)); }
.cc-tb td.v05 { background: color-mix(in srgb, var(--warning) 16%, var(--surface-1)); color: #8a6400; font-weight: 700; }
.cc-tb td.v0 { background: color-mix(in srgb, var(--critical) 14%, var(--surface-1)); color: var(--critical); font-weight: 700; }
.cc-tb td.gioc { background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)); color: var(--series-1); font-weight: 800; font-size: 10.5px; }
.cc-tb i.sc { font-style: normal; font-size: 8.5px; vertical-align: 3px; font-weight: 800; }
.cc-tb i.nd { font-style: normal; position: absolute; top: 1px; right: 2px; font-size: 8px; color: var(--critical); line-height: 1; }
.cc-tb td.tot { font-weight: 800; font-size: 12.5px; }
.cc-tb td.ccg2 { color: var(--series-1); }
/* 📆 ngày chưa tới: ô trống mờ — chấm tay trước (đăng ký nghỉ) thì lại tính bình thường */
.cc-tb td.off { background: color-mix(in srgb, var(--text-muted) 5%, var(--surface-1)); }
/* 🗑 kéo BÔI nhiều ô (bút quét tắt) → Delete xóa cả loạt về nền */
/* 🎨 quét ô kiểu EXCEL (GĐ chốt 07/09): nền xanh lá nhạt, viền 2px bao ngoài vùng (JS đặt theo cạnh), ô neo trắng, tiêu đề + tên sáng lên, chấm kéo góc */
:root { --xl9: #107c41; }
@media (prefers-color-scheme: dark) { :root { --xl9: #5fcf8e; } }
.cc-tb td.msel { background: color-mix(in srgb, var(--xl9) 10%, var(--surface-1)) !important; }
.cc-tb td.msel.mselA { background: var(--surface-1) !important; }
.cc-tb td.msel.mselR::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px; background: var(--xl9); border: 1px solid var(--surface-1); z-index: 3; }
.cc-tb th.mselH { background: color-mix(in srgb, var(--xl9) 18%, var(--surface-2, var(--surface-1))) !important; color: var(--xl9) !important; }
.cc-tb td.nm.mselH { background: color-mix(in srgb, var(--xl9) 10%, var(--surface-1)) !important; box-shadow: inset -2px 0 0 var(--xl9); }
#ccov.selon9 .cc-tb td.c:hover { box-shadow: none; } #ccov.selon9 .cc-tb td.c:hover:not(.mselR)::after { content: none; }
.ccselc9 { position: fixed; right: 18px; bottom: 18px; z-index: 60; background: var(--xl9); color: #fff; font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 9px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.45); pointer-events: none; font-variant-numeric: tabular-nums; }
.cc-inline .ccselc9 { position: absolute; }
/* 🌗 ô CHIA ĐÔI (GĐ duyệt 18/08 lần 2): trên CÔNG · dưới 🕐 giờ hoặc ĐM/VS */
.cc-tb .ct2 { display: block; line-height: 1.2; }
.cc-tb .cb2 { display: block; font-size: 8.5px; font-weight: 800; line-height: 1.2; border-top: 1px dashed var(--grid); margin-top: 1px; padding-top: 1px; white-space: nowrap; }
.cc-tb .cb2.g { color: var(--series-1); }
.cc-tb .cb2.m { color: #8a6400; }
.cc-tb td.phep { font-weight: 800; font-size: 12px; background: color-mix(in srgb, var(--warning) 14%, var(--surface-1)); color: #8a6400; }
#cc-pop { position: fixed; z-index: 95; background: var(--surface-1); border: 1px solid var(--grid); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); padding: 10px 12px; width: 400px; font-size: 12px; }
/* 📖 popup chấm công bản DỄ HIỂU (GĐ góp ý 18/08): mục đánh số + giải nghĩa từng nút */
#cc-pop .cc-sec { margin: 9px 0 4px; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; color: var(--text-muted); }
#cc-pop .cc-sec i { font-weight: 600; font-style: normal; opacity: .8; }
#cc-pop .o small { display: block; font-weight: 500; font-size: 9px; line-height: 1.25; opacity: .72; }
#cc-pop #cc-exp { margin: 7px 0 2px; padding: 6px 9px; border-radius: 8px; font-size: 11px; line-height: 1.5; background: color-mix(in srgb, var(--series-1) 9%, transparent); border: 1px solid color-mix(in srgb, var(--series-1) 25%, transparent); color: var(--text-primary); }
#cc-pop .row { display: flex; gap: 5px; flex-wrap: wrap; margin: 7px 0; align-items: center; }
#cc-pop .row[hidden] { display: none; }
#cc-pop .o { border: 1px solid var(--grid); background: var(--page); border-radius: 8px; padding: 3px 9px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; color: var(--text-primary); }
#cc-pop .o.on { background: var(--series-1); border-color: var(--series-1); color: #fff; }
#cc-pop .o.ms.on { background: var(--warning); border-color: var(--warning); color: #3a2f14; }
#cc-pop .mslb { font-size: 10px; color: var(--text-muted); }
#cc-pop input[type=text] { width: 100%; border: 1px solid var(--grid); border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 12px; background: var(--surface-1); color: var(--text-primary); }
#cc-pop .row input[type=text] { width: auto; }
#cc-pop .hint { font-size: 10px; color: var(--text-muted); margin-top: 6px; }
#cc-pop .hint.qua { color: var(--critical); font-weight: 700; }
/* 🌗 popup CHẤM THEO BUỔI bản gọn (GĐ duyệt 18/08 lần 2) */
#cc-pop .cc-head { display: flex; align-items: center; gap: 8px; }
#cc-pop .cc-head b { font-size: 13px; }
#cc-pop .ccx { margin-left: auto; border: 1px solid var(--grid); background: var(--surface-1); border-radius: 7px; font: inherit; font-size: 11px; font-weight: 800; padding: 2px 9px; cursor: pointer; color: var(--text-muted); }
#cc-pop .ccx:hover { color: var(--critical); border-color: var(--critical); }
#cc-pop .cc-brow { display: grid; grid-template-columns: 48px 1fr; gap: 6px; align-items: center; margin: 5px 0; }
#cc-pop .cc-brow > b { font-size: 11px; }
#cc-pop .cc-brow .row { margin: 0; }
#cc-pop .ccg { font-size: 11px; color: var(--text-muted); margin: 3px 0 3px 54px; }
/* 🕘 lịch sử sửa từng ô (GĐ yêu cầu 18/08) */
#cc-pop .cc-hist { max-height: 92px; overflow: auto; border: 1px dashed var(--grid); border-radius: 8px; padding: 4px 8px; }
#cc-pop .cc-hist .hrow { font-size: 10px; color: var(--text-secondary); line-height: 1.6; border-bottom: 1px dotted color-mix(in srgb, var(--grid) 60%, transparent); }
#cc-pop .cc-hist .hrow:last-child { border-bottom: 0; }
#cc-pop .cc-hist .ht { color: var(--text-muted); font-variant-numeric: tabular-nums; }
#cc-pop .cc-hist .trong { color: var(--text-muted); font-style: italic; }
/* 💵 bảng lương bản GỌN (GĐ duyệt 17/08): nhãn % trong ô · sổ "của ai" · khấu trừ */
.lgt .pct { margin-left: 5px; }
.lgbacbtn { border: 1px solid var(--grid); background: var(--surface-1); border-radius: 6px; font-size: 10px; padding: 0 4px; cursor: pointer; }
.lgbacbtn:hover { border-color: var(--series-1); }
.lgwhy { cursor: help; border-bottom: 1px dotted var(--text-muted); }
.lgvet { display: inline-block; font-size: 9.5px; font-weight: 800; background: color-mix(in srgb, var(--warning) 18%, transparent); color: #8a6400; border-radius: 6px; padding: 0 5px; cursor: help; }
.lgdnbtn { border: 1px solid var(--grid); background: var(--surface-1); color: var(--text-muted); border-radius: 7px; font: inherit; font-size: 9.5px; font-weight: 800; padding: 0 6px; cursor: pointer; margin-left: 5px; }
.lgdnbtn:hover { border-color: var(--series-1); color: var(--series-1); }
tr.lgdnrow td { background: color-mix(in srgb, var(--series-1) 5%, var(--surface-1)); padding: 3px 8px; font-size: 11.5px; border-top: 1px dashed var(--grid); }
tr.lgdnrow .dnmem { text-align: left; padding-left: 46px; color: var(--text-muted); font-weight: 600; }
tr.lgdnsum td { font-weight: 800; }
tr.lgdnsum .dnmem { color: var(--text-primary); }
.lgt .lgneg .lg-in { color: var(--critical); }
.lg-note { display: block; width: 110px; margin: 2px 0 0 auto; border: 1px dashed var(--grid); border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 10px; padding: 1px 6px; text-align: right; }
.lg-note:focus { border-style: solid; border-color: var(--series-1); outline: none; color: var(--text-primary); }
/* ⚠ ô "tạm thiếu" — tháng đang chạy dưới mốc: ✗ vàng, chưa tính trượt */
.nactick.tam { color: #b45309; border: 1px dashed color-mix(in srgb, var(--warning) 65%, transparent); background: color-mix(in srgb, var(--warning) 12%, transparent); }
/* 📈 điều kiện LÊN tích lũy: tiêu đề + nút GĐ xác nhận tay */
.lenhead { font-size: 10.5px; font-weight: 800; color: var(--text-muted); letter-spacing: .3px; margin: 8px 0 2px; }
.lentick { border: 1px solid var(--baseline); background: var(--surface-1); color: var(--text-secondary); border-radius: 7px; font-size: 10px; font-weight: 700; padding: 1px 8px; cursor: pointer; margin-left: auto; flex: none; }
.lentick:hover { border-color: var(--series-1); color: var(--series-1); }
.lentick.on { background: color-mix(in srgb, var(--good) 14%, transparent); border-color: var(--good); color: var(--good-text); }
/* 🧍 dải người TỰ DO (đã rút khỏi team, chờ đưa về team mới với ngày chuyển) */
.sd-tudo { margin: 34px auto 0; max-width: 720px; border: 2px dashed var(--baseline); border-radius: 13px; padding: 12px 16px; }
.sd-tudo > b { font-size: 11.5px; color: var(--text-muted); display: block; margin-bottom: 8px; }
.sd-tudolist { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-tudolist .sd-mem { border-style: dashed; }
.sd-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--grid); background: color-mix(in srgb, var(--surface-1) 90%, transparent); }
.sd-bar b { font-size: 14px; }
.sd-hint { font-size: 11.5px; color: var(--text-muted); }
.sd-bar .btn.sd-on { border-color: var(--series-1); color: var(--series-1); font-weight: 700; }
.sd-canvas { flex: 1; overflow: auto; padding: 34px 40px 60px; cursor: grab; }
.sd-canvas.sd-keo { cursor: grabbing; user-select: none; }
.sd-oc { min-width: max-content; margin: 0 auto; }
.sd-tier { display: flex; justify-content: center; }
.sd-node { display: flex; flex-direction: column; align-items: center; }
.sd-kids { display: flex; align-items: flex-start; gap: 26px; padding-top: 26px; position: relative; }
.sd-kids::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-1px); width: 2px; height: 27px; background: var(--baseline); }
.sd-kids > .sd-node { position: relative; padding-top: 26px; }
.sd-kids > .sd-node::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 26px; background: var(--baseline); }
.sd-kids > .sd-node::after { content: ""; position: absolute; top: 0; left: -13px; right: -13px; height: 2px; background: var(--baseline); }
.sd-kids > .sd-node:first-child::after { left: 50%; }
.sd-kids > .sd-node:last-child::after { right: 50%; }
.sd-kids > .sd-node:only-child::after { display: none; }
.sd-card { border-radius: 11px; box-shadow: var(--shadow); padding: 10px 14px; min-width: 200px; position: relative; text-align: left; }
.sd-cnt { position: absolute; top: -9px; right: -9px; background: #ec4899; color: #fff; font-size: 10px; font-weight: 800; border-radius: 99px; min-width: 19px; height: 19px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.sd-cty { background: var(--series-1); color: #fff; }
.sd-cty .sd-sub2 { color: rgba(255, 255, 255, .85); }
.sd-phong { background: #14b8a6; color: #fff; cursor: pointer; }
.sd-phong .sd-sub2 { color: rgba(255, 255, 255, .9); }
.sd-team { background: var(--surface-1); border: 1px solid var(--grid); cursor: pointer; }
.sd-card:hover.sd-team, .sd-card:hover.sd-phong { outline: 2px solid color-mix(in srgb, var(--series-1) 55%, transparent); }
.sd-tname { font-weight: 800; font-size: 13px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.sd-sub2 { font-size: 11px; margin-top: 2px; }
.sd-tach { font-size: 9.5px; font-weight: 800; border-radius: 5px; padding: 1px 6px; margin-top: 4px; display: inline-block; background: color-mix(in srgb, var(--warning) 22%, transparent); color: #8a6400; }
.sd-mems { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; width: 236px; }
.sd-mem { display: flex; gap: 8px; align-items: center; background: var(--surface-1); border: 1px solid var(--grid); border-radius: 9px; padding: 6px 9px; cursor: pointer; }
.sd-mem:hover { border-color: var(--series-1); }
.sd-av { width: 26px; height: 26px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; }
.sd-nm { font-weight: 700; font-size: 12px; line-height: 1.25; }
.sd-sub { font-size: 10.5px; color: var(--text-muted); }
.sd-ghichu { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.sd-lead { font-size: 9.5px; font-weight: 800; border-radius: 5px; padding: 0 6px; background: color-mix(in srgb, var(--series-1) 13%, transparent); color: var(--series-1); }
.sd-kemtag { font-size: 9px; font-weight: 800; color: var(--good-text); }
.sd-kemnest { margin-left: 20px; display: flex; flex-direction: column; gap: 6px; position: relative; padding-left: 14px; }
.sd-kemnest::before { content: ""; position: absolute; left: 2px; top: -3px; bottom: 12px; width: 2px; background: color-mix(in srgb, var(--good) 55%, var(--baseline)); }
.sd-kemnest .sd-mem { position: relative; border: 1px solid color-mix(in srgb, var(--good) 45%, var(--grid)); }
.sd-kemnest .sd-mem::before { content: ""; position: absolute; left: -12px; top: 50%; width: 12px; height: 2px; background: color-mix(in srgb, var(--good) 55%, var(--baseline)); }




.lgnm { cursor: pointer; }
.lgnm:hover { color: var(--series-1); text-decoration: underline; }
.naccard { border: 1px solid var(--grid); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.nachead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.nacline { display: flex; gap: 10px; align-items: center; font-size: 12.5px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.nacline .l { flex: 1; color: var(--text-muted); }
.nacline b.ok { color: var(--good-text); }
.nacline b.no { color: var(--critical); }
.nacverdict { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; background: color-mix(in srgb, var(--text-muted) 8%, transparent); }
.nacverdict.ok { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good-text); }
.nacverdict.warn { background: color-mix(in srgb, var(--warning) 16%, transparent); color: #8a6400; }
.ctree { position: relative; padding-left: 42px; max-height: 62vh; overflow: auto; }
.ctree::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 4px; border-radius: 99px; background: var(--grid); }
.cnode { position: relative; margin: 0 0 10px; }
.cnode .cdot { position: absolute; left: -36px; top: 6px; width: 24px; height: 24px; border-radius: 99px; border: 3px solid var(--grid); background: var(--surface-1); display: flex; align-items: center; justify-content: center; font-size: 11px; }
.cnode.done .cdot { border-color: color-mix(in srgb, var(--good) 55%, transparent); background: color-mix(in srgb, var(--good) 12%, var(--surface-1)); }
.cnode.cur .cdot { border-color: var(--series-1); background: var(--series-1); color: #fff; }
.cnode.next .cdot { border-color: var(--series-1); border-style: dashed; }
.ccard { border: 1px solid var(--grid); border-radius: 10px; padding: 8px 11px; }
.cnode.done .ccard { background: color-mix(in srgb, var(--good) 8%, transparent); padding: 6px 11px; }
.cnode.cur .ccard { border-color: var(--series-1); box-shadow: 0 2px 8px color-mix(in srgb, var(--series-1) 18%, transparent); }
.cnode.next .ccard { border-color: var(--series-1); border-style: dashed; }
.cnode.far .ccard { opacity: .8; }
.cttl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cttl b { font-size: 13px; }
.clcb { margin-left: auto; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ctag { font-size: 8.5px; font-weight: 800; letter-spacing: .5px; border-radius: 99px; padding: 1px 6px; }
.ctag.cur { background: var(--series-1); color: #fff; }
.ctag.next { background: color-mix(in srgb, var(--series-1) 10%, transparent); color: var(--series-1); border: 1px dashed var(--series-1); }
.ctag.done { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good-text); }
.cbar { margin: 7px 0 2px; font-variant-numeric: tabular-nums; }
.cbar .clb { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; margin-bottom: 3px; }
.cbar .cneed { color: var(--text-muted); white-space: nowrap; }
.ctrack { height: 8px; background: color-mix(in srgb, var(--text-muted) 12%, transparent); border-radius: 99px; overflow: hidden; }
.cfill { height: 100%; border-radius: 99px; background: var(--series-1); }
.cfill.ok { background: var(--good); }
.cmiss { font-size: 11px; color: var(--critical); font-weight: 700; margin-top: 2px; }
.chit { font-size: 11px; color: var(--good-text); font-weight: 700; margin-top: 2px; }
.cdim { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.cnac { margin-top: 6px; font-size: 11.5px; padding: 6px 9px; border-radius: 8px; background: color-mix(in srgb, var(--warning) 14%, transparent); color: #8a6400; }
.ttclip { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid var(--grid); background: var(--surface-1); color: var(--text-muted); border-radius: 7px; padding: 3px 9px; white-space: nowrap; }
.cpid { font: inherit; font-size: 12px; cursor: pointer; border: none; background: none; color: var(--text-muted); padding: 0 4px; margin-left: 2px; border-radius: 5px; vertical-align: 1px; }
.cpid:hover { color: var(--series-1); background: color-mix(in srgb, var(--series-1) 10%, transparent); }
.ttclip.has { border-color: var(--series-1); color: var(--series-1); background: color-mix(in srgb, var(--series-1) 7%, transparent); }
tr.ttdie td { color: var(--text-muted); }
tr.ttsettled td { opacity: .55; }
.ttbtn { border-color: var(--good); color: var(--good-text); font-weight: 700; }
.nctb { font-variant-numeric: tabular-nums; }
.nctb th.r, .nctb td.r { text-align: right; }
.nctb th { font-weight: 800; font-size: 10.5px; }
.nctb td { white-space: nowrap; }
tr.nctot td { font-weight: 800; background: color-mix(in srgb, var(--series-1) 9%, transparent); border-top: 1.5px solid var(--series-1); }
/* (thẻ đăng nhập 1 chạm — CSS đã gộp vào khối Login phía trên, 04/09) */

/* 📅 thanh chọn KHOẢNG NGÀY trong tháng của Ví NCC (GĐ duyệt demo 20/08) */
.ncdaybar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; padding: 9px 13px; border: 1px solid var(--grid); border-radius: 12px; background: var(--surface-1); font-size: 12.5px; }
.ncdaybar .ncdlb { font-weight: 800; color: var(--text-secondary); }
.ncdaybar label { display: flex; gap: 6px; align-items: center; font-weight: 700; color: var(--text-secondary); margin: 0; }
.ncdaybar input[type="date"] { padding: 5px 8px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-1); font: inherit; font-size: 12px; color: var(--text-primary); }
.ncdaybar .fchip { padding: 4px 11px; font-size: 11.5px; }
.ncdaybar .ncdang { margin-left: auto; font-weight: 800; color: var(--series-1); }
.ncdaybar .ncdrong { color: var(--warn-text); }
.nm3 .ncrong { font-size: 11.5px; font-style: italic; color: var(--text-muted); align-self: center; }
@media (max-width: 760px) { .ncdaybar .ncdang { margin-left: 0; width: 100%; } }

/* ⚖ BÙ KHỚP SỐ (GĐ duyệt 20/08): cột cuối sau ngày 31 — Ví NCC (.ncbu) + CPCN (.bu9) */
.ncmx th.ncbuh, .pgrid th.bu9h { background: color-mix(in srgb, var(--warning) 22%, var(--surface-1)); color: var(--warn-text); border-left: 2.5px solid color-mix(in srgb, var(--warning) 70%, transparent); white-space: nowrap; }
.ncmx td.ncbu, .pgrid td.bu9 { background: color-mix(in srgb, var(--warning) 10%, var(--surface-1)); border-left: 2.5px solid color-mix(in srgb, var(--warning) 70%, transparent); text-align: right; }
.ncmx td.ncbu .buin, .pgrid td.bu9 .buin9 { width: 96px; font-weight: 800; text-align: right; }
.pgrid .lock9 { margin: 6px 10px 0; padding: 6px 11px; border-radius: 9px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--warning) 14%, var(--surface-1)); color: var(--warn-text); }
#month-table .mrow.mbu { background: color-mix(in srgb, var(--warning) 9%, var(--surface-1)); border-top: 1.5px dashed color-mix(in srgb, var(--warning) 60%, transparent); }
/* 💵 BẢNG LƯƠNG GỌN (GĐ duyệt 21/08): 📌 ghim cột TÊN + THỰC NHẬN, hàng đều ô,
   1 nút 📋 sổ hàng con thẳng cột (đội nhóm gồm ai + bóc khấu trừ & thuế) */
.lgt2 { border-collapse: separate; border-spacing: 0; }
/* nền Ô PHẢI ĐẶC (không transparent) — cột ghim đè lên cột khác không bị xuyên chữ */
.lgt2 th, .lgt2 td { background: var(--surface-1) !important; }
.lgt2 tbody tr:hover td { background: color-mix(in srgb, var(--series-1) 4%, var(--surface-1)) !important; }
/* khung cao bằng màn hình: tiêu đề DÍNH TRÊN khi lăn dọc + thanh kéo ngang
   LUÔN NẰM ĐÁY vùng nhìn — khỏi lăn hết bảng mới kéo được (GĐ góp ý 21/08) */
.lgscroll:has(.lgt2) { max-height: calc(100vh - 150px); overflow: auto; overscroll-behavior: contain; }
.lgt2 thead th { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)) !important; box-shadow: 0 2px 6px -3px rgba(15, 30, 60, .25); }
.lgt2 th:first-child, .lgt2 td:first-child { position: sticky; left: 0; z-index: 3; box-shadow: 6px 0 8px -6px rgba(15, 30, 60, .16); }
.lgt2 th:last-child, .lgt2 td:last-child { position: sticky; right: 0; z-index: 3; box-shadow: -6px 0 8px -6px rgba(15, 30, 60, .16); }
.lgt2 thead th:first-child { left: 0; top: 0; z-index: 7; }
.lgt2 thead th:last-child { right: 0; top: 0; z-index: 7; }
.lgt2 tr.lgsum td { background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)) !important; }
.lgt2 .lgok9 { color: var(--good-text); font-weight: 700; }
.lgt2 .lgct9 { margin-left: 6px; }
tr.lgdr > td { background: color-mix(in srgb, var(--series-1) 3%, var(--surface-1)) !important; font-size: 13px; color: var(--text-primary); border-bottom: 1px dashed var(--grid); padding-top: 5px; padding-bottom: 5px; }
/* lưới 3 số của hàng con đội nhóm: tên · CHI PHÍ ĐN · %ADS thẳng nhau */
tr.lgdr .dn3 { display: inline-grid; grid-template-columns: minmax(170px, 1fr) 180px 100px; gap: 14px; align-items: center; width: calc(100% - 26px); vertical-align: middle; }
tr.lgdr .dn3 .so3 { text-align: right; font-weight: 700; }
tr.lgdr .dn3 .so3 i { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .3px; color: var(--text-muted); display: block; }
/* số hàng con thẳng mép với số trong Ô NHẬP của hàng chính (input có padding riêng) */
tr.lgdr td.v9i { padding-right: 18px; } /* = đệm ô + viền + đệm trong của input */
tr.lgdr td.lb1 { text-align: left; padding-left: 28px; white-space: normal; line-height: 1.35; }
tr.lgdr td.lb1::before { content: '↳ '; color: #9fb0c6; }
tr.lgdr td.lb1 b { color: var(--text-primary); font-weight: 700; }
tr.lgdr td.lb1 small { color: var(--text-muted); display: block; }
tr.lgdr td.lbx { text-align: left; color: var(--text-muted); font-size: 12px; white-space: normal; }
tr.lgdr td.lbx b { color: var(--text-primary); }
tr.lgdr td.v9 { font-weight: 600; color: var(--text-primary); text-align: right; }
tr.lgdr.cg td.v9, tr.lgdr.cg td.lbx9 b { font-weight: 800; }
tr.lgdr.gt td.lbx9 .gtbox { background: color-mix(in srgb, var(--warning) 14%, var(--surface-1)); border-radius: 8px; padding: 2px 9px; display: inline-block; } /* vàng chỉ ôm cụm số + nhãn như demo (22/08) */
tr.lgdr.th td.v9, tr.lgdr.th td.lb b { color: var(--critical); }
tr.lgdr.cg > td { background: color-mix(in srgb, var(--series-1) 9%, var(--surface-1)) !important; border-bottom: 2px solid color-mix(in srgb, var(--series-1) 55%, transparent); }
tr.lgdr .v9tn { color: var(--good-text); font-weight: 800; text-align: right; }
tr.lgdr .lg-note { width: 140px; }

/* 🧾 thuế TNCN — POPOVER sổ ngay tại ô (GĐ góp ý 21/08) */
.lgtxbtn { margin-left: 5px; }
#lgtx-pop { position: fixed; z-index: 260; background: var(--surface-1); border: 1px solid var(--grid); border-radius: 13px; box-shadow: 0 14px 40px rgba(10, 25, 50, .22); padding: 10px 13px 11px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
#lgtx-pop .tph { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 6px; }
#lgtx-pop .tph b { flex: 1; }
#lgtx-pop .tph button { margin-left: auto; border: 0; background: transparent; font: inherit; font-size: 14px; cursor: pointer; color: var(--text-muted); }
#lgtx-pop .tp { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 4px 8px; border-radius: 7px; background: color-mix(in srgb, var(--warning) 9%, var(--surface-1)); margin-bottom: 3px; }
#lgtx-pop .tp span { font-size: 10px; font-weight: 800; letter-spacing: .3px; color: var(--warn-text); white-space: nowrap; }
#lgtx-pop .tp b { font-weight: 800; text-align: right; }
#lgtx-pop .tp b small { font-weight: 600; color: var(--text-muted); }
#lgtx-pop .tp.tpt { background: var(--surface-2, color-mix(in srgb, var(--grid) 30%, var(--surface-1))); }
#lgtx-pop .tp.tpt span { color: var(--text-muted); }
#lgtx-pop .tp.tpthue { background: color-mix(in srgb, var(--critical) 9%, var(--surface-1)); }
#lgtx-pop .tp.tpthue span, #lgtx-pop .tp.tpthue b { color: var(--critical); }
#lgtx-pop input { width: 42px; border: 1px solid var(--grid); border-radius: 6px; padding: 2px 5px; font: inherit; font-weight: 800; text-align: center; background: var(--surface-1); color: var(--text-primary); }
#lgtx-pop .tpn { font-size: 11px; color: var(--text-muted); margin-top: 5px; max-width: 380px; white-space: normal; }
.txr { font-style: normal; font-size: 10px; font-weight: 800; color: var(--warn-text); }
/* 🧾 bảng thuế TNCN riêng — trình bày như Excel (GĐ góp ý 21/08) */
.tncnt th, .tncnt td { white-space: nowrap; text-align: right; padding: 7px 11px; }
.tncnt .tcnm, .tncnt th:first-child { text-align: left; }
.tncnt th.tcgt { background: color-mix(in srgb, var(--warning) 20%, var(--surface-1)); color: var(--warn-text); border-top: 2.5px solid color-mix(in srgb, var(--warning) 75%, transparent); }
.tncnt td.tcgt { background: color-mix(in srgb, var(--warning) 8%, var(--surface-1)); }
.tncnt th.tcthue { color: var(--critical); }
.tncnt td.tcthue { background: color-mix(in srgb, var(--critical) 9%, var(--surface-1)); color: var(--critical); }
.tncnt .tcam { color: var(--critical); font-weight: 800; }
.tncnt .tcok { color: var(--good-text); }

/* 🔎 thanh tìm + sắp xếp và khung cuộn của Ma trận từng tài khoản */
.ncmxbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.ncmxbar input[type="search"] { flex: 1; min-width: 200px; padding: 8px 12px; border: 1px solid var(--grid); border-radius: 10px; background: var(--surface-1); font: inherit; }
.ncmxbar select { padding: 8px 10px; border: 1px solid var(--grid); border-radius: 10px; background: var(--surface-1); font: inherit; }
.naccscroll { max-height: 620px; overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; }
/* dòng ĐẦU KỲ ghim đầu bảng — cuối tháng trước tự gối sang */
tr.ncopenrow td { font-weight: 800; background: color-mix(in srgb, var(--series-1) 5%, transparent); border-bottom: 1.5px dashed color-mix(in srgb, var(--series-1) 45%, transparent); }
.ncpos { color: var(--good-text); font-weight: 700; }
.ncneg { color: var(--critical); font-weight: 700; }
.nacc { border: 1px solid var(--grid); border-radius: 12px; margin-bottom: 9px; overflow: hidden; background: var(--surface-1); }
.nacch { display: flex; align-items: center; gap: 11px; padding: 9px 13px; cursor: pointer; flex-wrap: wrap; }
.nacch:hover { background: color-mix(in srgb, var(--series-1) 7%, transparent); }
.nacch .nid { font-weight: 800; font-size: 13px; }
.nacch .nwho { font-size: 11px; color: var(--text-muted); }
.nacch .nm3 { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.nacch .nm3 b { display: block; font-size: 12.5px; color: var(--text-primary); }
.nacch .car { transition: .15s; font-size: 12px; }
.nacc.open .car { transform: rotate(90deg); }
.naccb { display: none; border-top: 1px solid var(--grid); }
.nacc.open .naccb { display: block; }
.ncmx { overflow-x: auto; }
.ncmx table { min-width: 1080px; font-variant-numeric: tabular-nums; border-collapse: collapse; width: 100%; }
.ncmx th { font-size: 9.5px; font-weight: 800; color: var(--text-muted); padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--grid); }
.ncmx th:first-child { text-align: left; position: sticky; left: 0; background: var(--surface-1); z-index: 2; }
.ncmx td { font-size: 11px; padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--grid); white-space: nowrap; }
.ncmx td:first-child { text-align: left; font-weight: 800; font-size: 10.5px; color: var(--text-muted); position: sticky; left: 0; background: var(--surface-1); z-index: 2; }
.ncmx tr.nctot td:first-child { background: var(--page); }
.ncmx .napin { width: 74px; font: inherit; font-size: 11px; text-align: right; padding: 3px 5px; border: 1px solid var(--grid); border-radius: 6px; background: var(--surface-1); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ncmx .napin:focus { border-color: var(--series-1); outline: none; }
.unrow2 { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--grid); flex-wrap: wrap; font-size: 12.5px; }
.unrow2:last-child { border-bottom: none; }
.unrow2 select { margin-left: auto; font: inherit; font-size: 12px; padding: 5px 8px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-1); color: var(--text-primary); }
.recon2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.recon2 input { font: inherit; font-variant-numeric: tabular-nums; text-align: right; padding: 8px 11px; border: 1px solid var(--grid); border-radius: 9px; width: 180px; background: var(--surface-1); color: var(--text-primary); }
.chip2 { font-weight: 800; border-radius: 99px; padding: 5px 13px; font-size: 12.5px; }
.chip2.ok { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good-text); }
.chip2.bd { background: color-mix(in srgb, var(--critical) 13%, transparent); color: var(--critical); }
@media (max-width: 700px) { .nacch .nm3 { gap: 9px; font-size: 10.5px; } .recon2 input { width: 140px; } }

/* Ví NCC tràn toàn màn hình (GĐ yêu cầu 19/07) */
main.fullwide { max-width: none; padding-left: 26px; padding-right: 26px; }
@media (max-width: 700px) { main.fullwide { padding-left: 12px; padding-right: 12px; } }

/* Ví NCC bản màn rộng: phóng chữ + giãn bố cục (GĐ yêu cầu 19/07) */
main.fullwide .nccchip { padding: 11px 18px; border-radius: 13px; }
main.fullwide .nccchip b { font-size: 15px; }
main.fullwide .nccchip span { font-size: 12.5px; }
main.fullwide .kband { gap: 12px; margin-bottom: 18px; }
main.fullwide .kb { padding: 15px 18px; border-radius: 13px; }
main.fullwide .kb .l { font-size: 11.5px; }
main.fullwide .kb .v { font-size: 24px; margin-top: 4px; }
main.fullwide .kb .s { font-size: 12px; margin-top: 2px; display: block; }
main.fullwide .page-head h2 { font-size: 20px; }
main.fullwide h3 { font-size: 16px !important; }
main.fullwide h3 .sub { font-size: 12.5px; }
main.fullwide .nctb th { font-size: 12px; padding: 10px 16px; }
main.fullwide .nctb td { font-size: 14.5px; padding: 10px 16px; }
main.fullwide .nacch { padding: 13px 18px; gap: 14px; }
main.fullwide .nacch .nid { font-size: 15px; }
main.fullwide .nacch .nwho { font-size: 12.5px; }
main.fullwide .nacch .nm3 { gap: 22px; font-size: 12.5px; }
main.fullwide .nacch .nm3 b { font-size: 15px; margin-top: 1px; }
main.fullwide .nacch .car { font-size: 14px; }
main.fullwide .ncmx th { font-size: 11px; padding: 7px 8px; }
main.fullwide .ncmx td { font-size: 13px; padding: 6px 8px; }
main.fullwide .ncmx td:first-child { font-size: 12px; }
main.fullwide .ncmx .napin { width: 92px; font-size: 13px; padding: 4px 6px; }
main.fullwide .ncmx table { min-width: 1400px; }
main.fullwide .unrow2 { font-size: 14px; padding: 10px 4px; }
main.fullwide .unrow2 select { font-size: 13px; padding: 7px 10px; }
main.fullwide .recon2 { font-size: 14.5px; padding: 16px 18px; }
main.fullwide .recon2 input { font-size: 15px; padding: 10px 13px; width: 210px; }
main.fullwide .chip2 { font-size: 13.5px; padding: 6px 15px; }
@media (max-width: 700px) {
  main.fullwide .kb .v { font-size: 18px; }
  main.fullwide .nctb th, main.fullwide .nctb td { padding: 8px 10px; font-size: 13px; }
  main.fullwide .nacch .nm3 { gap: 11px; }
}
.nctb td:not(:first-child) { text-align: right; }

/* ============ 🏦 Ví NCC v2 (đã duyệt demo 20/07): hero + hoàn + cuộn 10 dòng ============ */
.kband.ncck { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr; }
@media (max-width: 1100px) { .kband.ncck { grid-template-columns: repeat(3, 1fr); } .kb.nchero { grid-column: 1 / -1; } }
.kb.nchero { background: linear-gradient(135deg, color-mix(in srgb, var(--series-1) 14%, transparent), var(--surface-1)); border-color: var(--series-1); }
main.fullwide .kb.nchero .v { font-size: 30px; color: var(--series-1); }
.kb.nchero.kwarn { border-color: var(--warning); }
main.fullwide .kb.nchero.kwarn .v { color: #8a6400; }
.ncscroll { overflow-y: auto; max-height: 470px; border: 1px solid var(--grid); border-radius: 12px; } /* ~10 dòng */
.ncscroll .nctb thead th { position: sticky; top: 0; z-index: 3; background: var(--page); }
.ncscroll .nctb tfoot td { position: sticky; bottom: 0; z-index: 3; background: var(--surface-1); }
.ncscroll .nctb tfoot tr.nctot td { background: color-mix(in srgb, var(--series-1) 12%, var(--surface-1)); }
.nctb tr.nctoday td { background: color-mix(in srgb, var(--series-1) 7%, transparent); }
.ncmx tr.ncin td { background: color-mix(in srgb, var(--series-1) 6%, transparent); }
.ncmx tr.ncin td:first-child { background: color-mix(in srgb, var(--series-1) 12%, var(--surface-1)); }
/* 💚 hàng GG HOÀN trong ma trận TK — xanh lá, tách khỏi các hàng nạp/hoàn */
.ncmx tr.nchq td { background: color-mix(in srgb, #16a34a 7%, transparent); }
.ncmx tr.nchq td:first-child { background: color-mix(in srgb, #16a34a 14%, var(--surface-1)); color: var(--good-text); }
.ncmx tr.nchq td:last-child { color: var(--good-text); }
.ncmx th:last-child, .ncmx td:last-child { position: sticky; right: 0; z-index: 2; background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)); border-left: 1.5px solid var(--series-1); font-weight: 800; }

/* ============ 📘 Ví NCC — TK Facebook theo mốc ngày (đã duyệt demo 20/07) ============ */
.ntl { display: flex; height: 26px; border-radius: 8px; overflow: hidden; margin: 0 16px 10px; border: 1px solid var(--grid); }
.ntlseg { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; padding: 0 6px; background: #8a8578; }
.ntlseg.on { background: var(--series-1); }
.ntlseg.none { background: transparent; color: var(--text-muted); border-right: 1px dashed var(--grid); }
.ncmx td.ncoff, .ncmx th.ncoff { opacity: .32; }
.ncmx td.ncoff { text-decoration: line-through; text-decoration-color: var(--text-muted); }
.fmrow { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--grid); font-size: 13px; flex-wrap: wrap; }
.fmrow:last-child { border-bottom: none; }
.fmrow input, .fmrow select { font: inherit; font-size: 12.5px; padding: 6px 9px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-1); color: var(--text-primary); }
.fmdel { margin-left: auto; border: none; background: none; color: var(--critical); cursor: pointer; font-size: 14px; }
.unrow2 input[type="date"] { font: inherit; font-size: 12px; padding: 5px 8px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-1); color: var(--text-primary); margin-left: auto; }
.unrow2 input[type="date"] + select { margin-left: 0; }

/* ============ 💼📺 Ví NCC 2 số dư (đã duyệt demo 20/07) ============ */
.kb.nchero2 { background: linear-gradient(135deg, color-mix(in srgb, #2f4a6b 13%, transparent), var(--surface-1)); border-color: #2f4a6b; }
main.fullwide .kb.nchero2 .v { font-size: 30px; color: #2f4a6b; }
.ncvi { color: var(--series-1); }
.nctk { color: #2f4a6b; }
.ncsub { font-size: 10.5px; color: var(--text-muted); font-weight: 400; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .kb.nchero2 { border-color: #8fb1dd; }
  :root:where(:not([data-theme="light"])) main.fullwide .kb.nchero2 .v { color: #8fb1dd; }
  :root:where(:not([data-theme="light"])) .nctk { color: #8fb1dd; } }
:root[data-theme="dark"] .kb.nchero2 { border-color: #8fb1dd; }
:root[data-theme="dark"] main.fullwide .kb.nchero2 .v { color: #8fb1dd; }
:root[data-theme="dark"] .nctk { color: #8fb1dd; }

/* 📘 BM bổ sung (nhiều BM Facebook — 20/07) */
.fbbm { display: grid; grid-template-columns: 1fr 1.6fr 1fr 38px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--grid); }
.fbbm:last-child { border-bottom: none; }
.fbbm input { font: inherit; font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-1); color: var(--text-primary); min-width: 0; }
@media (max-width: 820px) { .fbbm { grid-template-columns: 1fr 1fr; } .fbbm .bm-token { grid-column: 1 / -1; } }

/* ===== 📅 Chọn ngày 1 chạm + 📊 chi tiêu theo kênh (Tổng quan — đã duyệt 20/07) ===== */
.dbar { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
/* 27/07: chip khoảng + dải ngày GỘP một hàng cuộn ngang; bỏ dòng "Đang xem" */
.drow { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: thin; padding-bottom: 3px; }
.drow .dchips, .drow .dstrip { flex: none; display: flex; overflow: visible; padding: 0; }
.drow .dchips { gap: 6px; }
.dvr { flex: none; width: 1px; height: 20px; background: var(--grid); margin: 0 4px; }
.fdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.dchips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dchip { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.dchip:hover { border-color: var(--series-1); }
.dchip.on { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.dchip.hidden { display: none; }
.dstrip { display: flex; gap: 3px; overflow-x: auto; padding: 2px 1px 5px; scrollbar-width: thin; }
.dday { min-width: 33px; height: 39px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-1); color: var(--text-primary); cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; padding: 0; }
.dday b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dday span { font-size: 8.5px; color: var(--text-muted); text-transform: uppercase; }
.dday.today b { color: var(--series-1); }
.dday.in { background: color-mix(in srgb, var(--series-1) 16%, var(--surface-1)); border-color: transparent; }
.dday.pick { background: var(--series-1); border-color: var(--series-1); }
.dday.pick b, .dday.pick span { color: #fff; }
.dcustom { display: none; gap: 8px; align-items: center; }
.dcustom.open { display: flex; }
.dstatus { font-size: 12.5px; color: var(--text-secondary); }
.dstatus b { color: var(--series-1); }
.knl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 10px; }
.knl-card { border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px;
  display: flex; flex-direction: column; gap: 3px; }
.knl-card .kh { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 12.5px; }
.knl-card .kdot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.knl-card .kv { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.knl-card .ks { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.knl-card.tot { background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)); border-color: transparent; }
.knl-bar { height: 10px; border-radius: 999px; overflow: hidden; display: flex; margin: 11px 0 5px; }
.knl-bar i { height: 100%; }
.knl-lb { display: flex; gap: 14px; font-size: 12px; font-weight: 700; margin-bottom: 10px;
  color: var(--text-secondary); align-items: center; }
.knl-lb .kdot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

/* ===== Bảng Theo nhân viên kiểu mới (đã duyệt demo 20/07) ===== */
.uins { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.uins .ins { border-radius: 10px; padding: 7px 12px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.uins .ins.bad { background: color-mix(in srgb, var(--critical) 12%, var(--surface-1)); color: var(--critical); }
.uins .ins.good { background: color-mix(in srgb, var(--good) 12%, var(--surface-1)); color: var(--good-text); }
.uins .ins.info { background: color-mix(in srgb, var(--series-1) 12%, var(--surface-1)); color: var(--series-1); }
.uctr { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.uctr input { border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; background: var(--surface-1); color: var(--text-primary); font: inherit; font-size: 12.5px; width: 190px; }
.ufchip { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.ufchip.on { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.ufchip i { font-style: normal; opacity: .65; font-weight: 600; }
#u-fchips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.useg { margin-left: auto; display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.useg button { border: 0; background: var(--surface-1); color: var(--text-secondary); padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.useg button.on { background: var(--series-1); color: #fff; }
.upill { display: inline-block; min-width: 58px; text-align: center; border-radius: 999px; padding: 3px 9px; font-weight: 800; font-size: 12px; }
.upill.g { background: color-mix(in srgb, var(--good) 14%, var(--surface-1)); color: var(--good-text); }
.upill.w { background: color-mix(in srgb, var(--warning) 18%, var(--surface-1)); color: #8a6100; }
.upill.b { background: color-mix(in srgb, var(--critical) 13%, var(--surface-1)); color: var(--critical); }
.ugap { display: block; font-size: 9.5px; color: var(--text-muted); margin-top: 2px; }
tr.urow.hl-b .name-cell { box-shadow: inset 3px 0 0 var(--critical); }
tr.urow.hl-w .name-cell { box-shadow: inset 3px 0 0 var(--warning); }
.kbar2 { display: inline-flex; height: 5px; width: 56px; border-radius: 99px; overflow: hidden; margin-left: 8px; vertical-align: 2px; background: var(--grid); }
.kbar2 i { height: 100%; background: #1877f2; }
.kbar2 i.y { background: #e02f2f; }
td.mut2 { color: var(--text-muted); }
.nctb .ncmut { color: var(--text-muted); }

/* ===== ⏰ Nhắc gia hạn (Tổng quan — 21/07) ===== */
.rn-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.rn-row:first-child { border-top: none; }
.rn-badge { flex: none; min-width: 130px; text-align: center; border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 800; }
.rn-badge.ok { background: color-mix(in srgb, var(--good) 13%, var(--surface-1)); color: var(--good-text); }
.rn-badge.warn { background: color-mix(in srgb, var(--warning) 18%, var(--surface-1)); color: #8a6100; }
.rn-badge.bad { background: color-mix(in srgb, var(--critical) 13%, var(--surface-1)); color: var(--critical); }
.rn-nm { display: flex; flex-direction: column; }
.rn-nm small { color: var(--text-secondary); font-size: 11px; }
.rn-act { margin-left: auto; display: flex; gap: 6px; }

/* ===== 💚 GG HOÀN — cột bảo mật GĐ/kế toán (21/07) ===== */
.idtable.gcredit .idrow.v2 { grid-template-columns: 26px 56px minmax(180px, 1.35fr) minmax(94px, 1fr) minmax(94px, 1fr) minmax(86px, 1fr) minmax(86px, 1fr) 98px 42px; }
.mx-in.ghq { color: #0d9488; font-weight: 700; }
.mx-in.ghq::placeholder { color: #0d948899; }
.mscroll.gcredit .mcols { grid-template-columns: 96px 1.05fr 1.15fr .8fr .8fr .65fr .85fr .8fr .8fr 1.15fr 100px 48px 24px; }
.mcols .ghqc, .mdetail .ghqc { color: #0d9488; font-weight: 700; }
@media (max-width: 700px) {
  .mscroll.gcredit .mcols { grid-template-columns: 58px 1fr 1fr 64px 22px 12px; }
}

/* ============ 🩺 Tab Sức khỏe nhân sự (GĐ duyệt demo 21/07) ============ */
.hh-note { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 12px; }
.hh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.hh-kb { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.hh-kb .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 800; }
.hh-kb .v { font-size: 23px; font-weight: 800; }
.hh-kb .s { font-size: 11px; color: var(--text-muted); }
.hh-kb.bad .v { color: var(--critical); }
.hh-kb.warn .v { color: #8a6100; }
.hh-kb.good .v { color: var(--good-text); }
.hh-fbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.hh-fbar .hh-note { margin: 0 0 0 auto; }
.hh-fchip { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.hh-fchip.on { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.hh-fchip i { font-style: normal; opacity: .65; font-weight: 600; }
.hh-list { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.hh-prow { display: flex; gap: 14px; padding: 13px 16px; border-top: 1px solid var(--grid); flex-wrap: wrap; align-items: flex-start; }
.hh-prow:first-child { border-top: none; }
.hh-prow.sev-bad { box-shadow: inset 4px 0 0 var(--critical); }
.hh-prow.sev-warn { box-shadow: inset 4px 0 0 var(--warning); }
.hh-prow.sev-good { box-shadow: inset 4px 0 0 var(--good); }
.hh-pinfo { min-width: 190px; }
.hh-pinfo b { font-size: 14.5px; }
.hh-pinfo .tm { font-size: 11.5px; color: var(--text-muted); }
.hh-spark { margin-top: 6px; display: block; }
.hh-sparklb { font-size: 9.5px; color: var(--text-muted); }
.hh-tags { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 280px; }
.hh-tag { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; border-radius: 9px; padding: 7px 10px; }
.hh-tag.bad { background: color-mix(in srgb, var(--critical) 11%, var(--surface-1)); }
.hh-tag.warn { background: color-mix(in srgb, var(--warning) 15%, var(--surface-1)); }
.hh-tag.good { background: color-mix(in srgb, var(--good) 11%, var(--surface-1)); }
.hh-tag b { font-weight: 800; }
.hh-tag small { color: var(--text-secondary); display: block; font-size: 11px; }
.hh-act { font-size: 11.5px; color: var(--series-1); font-weight: 700; margin-top: 4px; display: block; }
.hh-nums { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 6px 16px; min-width: 240px; }
.hh-nums .l { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
.hh-nums .v { font-size: 14px; font-weight: 800; }
.hh-nums .v.bad { color: var(--critical); }
.hh-nums .v.warn { color: #8a6100; }
.hh-nums .v.good { color: var(--good-text); }
@media (max-width: 700px) {
  .hh-nums { min-width: 100%; grid-template-columns: repeat(2, 1fr); }
}

/* ============ 🕐 Báo cáo ngày GIAO DIỆN MỚI (GĐ duyệt 21/07) ============ */
/* 3 khung to 2 tầng, khung chọn nền xanh */
.frame { padding: 8px 18px; border-radius: 11px; }
.frame .t { font-size: 12.5px; letter-spacing: .02em; }
.frame .s { font-size: 10.5px; }
/* thanh lưu mới: tên người nhập + 📸 — nút Lưu tổng ẩn (đã có 💾 từng dòng),
   vẫn nằm trong DOM để thẻ nhập điện thoại bấm hộ */
.savebar.savetop.v2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.savebar.savetop.v2 #dr-save { display: none; }
.savebar.savetop.v2 .sb-ic {
  width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, #3f86df, #1d4e94);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none;
}
.savebar.savetop.v2 .sb-tt b { display: block; font-size: 12px; letter-spacing: .05em; color: var(--series-1); }
.savebar.savetop.v2 .sb-tt small { color: var(--text-secondary); font-size: 11px; font-weight: 700; }
.savebar.savetop.v2 .mynote { border-left: 1px solid var(--grid); padding-left: 12px; }
/* ===== Báo cáo ngày TỐI GIẢN (GĐ duyệt 24/07): 1 thẻ số + 1 dòng điều khiển ===== */
/* GHIM khi cuộn (GĐ yêu cầu 24/07): dính ngay dưới thanh menu, nền che bảng
   trượt phía sau. Điện thoại: khối cao chiếm nửa màn nên KHÔNG ghim */
.drpin { position: sticky; top: 55px; z-index: 30; background: var(--page); padding-bottom: 8px; }
.drpin::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; background: var(--page); }
@media (max-width: 700px) { .drpin { position: static; padding-bottom: 0; } .drpin::before { display: none; } }
.drboard {
  background: var(--surface-1); border: 1px solid var(--grid); border-top: 3px solid var(--series-1);
  border-radius: 14px; box-shadow: 0 6px 22px rgba(15, 30, 60, .13); overflow: hidden;
}
.drbtop {
  display: flex; align-items: stretch; flex-wrap: wrap; border-bottom: 1px solid var(--grid);
  background: color-mix(in srgb, var(--series-1) 4%, var(--surface-1));
}
.drbtop .ptab {
  border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 700;
  padding: 12px 16px 10px; cursor: pointer; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.drbtop .ptab.on { color: var(--text-primary); border-bottom-color: var(--series-1); }
.drbtop .pc { font-size: 10.5px; font-weight: 800; border-radius: 8px; padding: 1px 7px; }
.drbtop .pc-ok { background: color-mix(in srgb, var(--good-text) 14%, transparent); color: var(--good-text); }
.drbtop .pc-warn { background: color-mix(in srgb, #d97706 16%, transparent); color: #d97706; }
.drbtop .pc-bad, .drbtop .pc-over { background: color-mix(in srgb, var(--critical) 13%, transparent); color: var(--critical); }
.drbtop .when { margin-left: auto; align-self: center; padding: 6px 16px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.drbtop .when b { color: var(--text-primary); font-weight: 800; }
.drstats { display: grid; grid-template-columns: repeat(6, 1fr); padding: 13px 4px; }
.drstats .st { padding: 0 14px; min-width: 0; }
.drstats .st + .st { border-left: 1px solid var(--grid); }
.drstats .lb { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 2px; white-space: nowrap; }
.drstats .v { font-size: 19px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.drstats .v.b-warn { color: #d97706; }
.drstats .v.b-bad, .drstats .v.b-over { color: var(--critical); }
.drstats .d { font-size: 10.5px; font-weight: 700; color: var(--text-muted); margin-top: 1px; white-space: nowrap; }
.drstats .d i { font-style: normal; font-weight: 800; }
.drstats .d i.dn { color: var(--critical); }
.drstats .d i.up { color: var(--good-text); }
@media (max-width: 860px) {
  .drstats { grid-template-columns: repeat(3, 1fr); row-gap: 13px; }
  .drstats .st:nth-child(4) { border-left: 0; }
  .drbtop .when { flex-basis: 100%; padding: 0 16px 8px; margin-left: 0; }
}
.drctl {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-top: 1px solid var(--grid); background: color-mix(in srgb, var(--series-1) 4%, var(--surface-1));
}
/* khung TO 2 dòng — dải lịch NHỎ dồn phải (GĐ duyệt 24/07) */
.drseg { display: flex; background: var(--surface-1); border: 1.5px solid var(--grid); border-radius: 12px; padding: 4px; gap: 3px; flex: none; }
.drseg .fseg { border: 0; border-radius: 9px; background: none; color: var(--text-secondary); font: inherit; font-weight: 800; padding: 7px 17px; cursor: pointer; white-space: nowrap; text-align: center; line-height: 1.2; }
.drseg .fseg b { display: block; font-size: 14px; font-weight: 800; }
.drseg .fseg small { display: block; font-size: 10px; font-weight: 600; opacity: .8; }
.drseg .fseg.on { background: var(--series-1); color: #fff; }
.drdays { display: flex; gap: 4px; overflow-x: auto; flex: 0 1 auto; max-width: 420px; margin-left: auto; padding: 3px 2px; scrollbar-width: none; scroll-behavior: smooth; }
.drdays::-webkit-scrollbar { display: none; }
.dnav2 { flex: none; width: 28px; height: 44px; border: 1px solid var(--grid); border-radius: 10px; background: var(--surface-1); color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
/* ===== Ứng tiền bản TỐI GIẢN (GĐ duyệt bản 1 · 25/07): 1 thẻ 3 băng ===== */
.uboard {
  background: var(--surface-1); border: 1px solid var(--grid); border-top: 3px solid var(--series-1);
  border-radius: 14px; box-shadow: 0 6px 22px rgba(15, 30, 60, .10); overflow: hidden;
}
.ubtop {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--grid);
  background: color-mix(in srgb, var(--series-1) 4%, var(--surface-1)); padding-right: 10px;
}
.uptab {
  border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 700;
  padding: 12px 16px 10px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
}
.uptab.on { color: var(--text-primary); border-bottom-color: var(--series-1); }
.ubtop .uact { margin-left: auto; display: flex; gap: 6px; align-items: center; padding: 6px 0; }
.ustats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 13px 4px; }
.ustats .st { padding: 0 16px; min-width: 0; overflow: hidden; cursor: pointer; border: 0; background: none; font: inherit; text-align: left; border-left: 1px solid var(--grid); }
.ustats .st:first-child { border-left: 0; }
.ustats .st .lb { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ustats .st .v { font-size: 17px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; color: var(--text-primary); }
.ustats .st .v.wn { color: #d97706; }
.ustats .st .d { font-size: 10.5px; font-weight: 700; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ustats .st.uhero .lb, .ustats .st.uhero .v { color: var(--series-1); }
.ustats .st.on .lb, .ustats .st.on .v { color: var(--series-1); }
.ustats .st.noclick { cursor: default; }
@media (max-width: 860px) { .ustats { grid-template-columns: repeat(3, 1fr); row-gap: 12px; } .ustats .st:nth-child(4) { border-left: 0; } }
/* người nhận: thẻ 2 dòng, 1 hàng kéo ngang + mũi tên (GĐ duyệt 25/07) */
.urcp { display: flex; gap: 8px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--grid); min-width: 0; }
.urcp .t { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--text-muted); white-space: nowrap; flex: none; }
.urcp .urcs { display: flex; gap: 6px; align-items: stretch; overflow-x: auto; flex: 1; min-width: 0; padding: 2px 1px; scrollbar-width: none; scroll-behavior: smooth; }
.urcp .urcs::-webkit-scrollbar { display: none; }
.rc {
  flex: none; border: 1px solid var(--grid); border-radius: 11px; background: var(--surface-1); color: var(--text-primary);
  padding: 5px 12px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; text-align: left; line-height: 1.25; max-width: 220px;
}
.rc b { display: block; font-weight: 800; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc span { display: block; color: var(--text-muted); font-weight: 700; white-space: nowrap; }
.rc span em { font-style: normal; color: var(--text-primary); }
.rc.on { border-color: var(--series-1); background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)); }
.rc.on b, .rc.on span em { color: var(--series-1); }
.rnav { flex: none; width: 24px; height: 40px; border: 1px solid var(--grid); border-radius: 9px; background: var(--surface-1); color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.rnav:hover { border-color: var(--series-1); color: var(--series-1); }
@media (max-width: 700px) { .rnav { display: none; } }
/* 👤 băng rôn đang lọc tài nguyên theo NV (27/07 đã duyệt) */
.nvfil { display: flex; align-items: center; gap: 9px; padding: 8px 14px; border-top: 1px solid var(--grid);
  background: color-mix(in srgb, var(--series-1) 6%, var(--surface-1)); font-size: 12.5px; font-weight: 700; }
.nvfil b { color: var(--series-1); }
.nvfil .x { margin-left: auto; border: 1px solid var(--grid); border-radius: 20px; background: var(--surface-1);
  color: var(--text-secondary); font: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 12px; cursor: pointer; }
.nvfil .x:hover { border-color: var(--critical); color: var(--critical); }
.uctl {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex-wrap: wrap;
  border-top: 1px solid var(--grid); background: color-mix(in srgb, var(--series-1) 4%, var(--surface-1));
}
.uctl input[type=text] { flex: 0 1 230px; padding: 7px 11px; border: 1.5px solid var(--grid); border-radius: 9px; background: var(--surface-1); color: var(--text-primary); font: inherit; font-size: 12.5px; }
.uctl select { padding: 7px 9px; border: 1.5px solid var(--grid); border-radius: 9px; background: var(--surface-1); color: var(--text-primary); font: inherit; font-size: 12px; font-weight: 700; max-width: 170px; }
@media (max-width: 700px) { .uctl .drdays { order: 9; flex-basis: 100%; } }

/* bảng lệnh trắng sạch */
.advcl { background: var(--surface-1); border: 1px solid var(--grid); border-radius: 14px; overflow: hidden; }
.advcl .scroll { overflow-x: auto; }
.advcl table { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.advcl th { color: var(--text-muted); font-size: 9.5px; letter-spacing: .05em; text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--grid); background: var(--page); }
.advcl th.r { text-align: right; }
.advcl th.ctr, .advcl td.ctr { text-align: center; }
.advcl td { padding: 9px 12px; border-bottom: 1px solid var(--grid); }
.advcl td.r { text-align: right; font-weight: 800; }
.advcl tbody tr { cursor: pointer; }
.advcl tbody tr:hover td { background: color-mix(in srgb, var(--series-1) 4%, transparent); }
.advcl tr.pend td.dt { box-shadow: inset 3px 0 0 #d97706; }
.advcl tr.sumr td { background: var(--page); font-weight: 800; border-bottom: 1.5px solid var(--series-1); }
.advcl tr.sumr td.r { color: var(--series-1); font-size: 13px; }
.advcl tr.dsum td { background: var(--page); color: var(--text-muted); font-size: 11px; font-weight: 700; padding: 6px 12px; cursor: default; }
.advcl td.who b { display: block; font-size: 12.5px; }
.advcl td.who small { color: var(--text-muted); font-size: 10.5px; display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.advcl .bank { color: var(--text-muted); font-size: 11px; }
.advcl .cpb { border: 1px solid var(--grid); border-radius: 7px; background: var(--surface-1); color: var(--text-muted); padding: 1px 7px; font-size: 11px; cursor: pointer; margin-left: 6px; }
.advcl .cpb:hover { border-color: var(--series-1); color: var(--series-1); }
.advcl .stt { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; border-radius: 8px; padding: 2px 9px; }
.advcl .stt i { width: 6px; height: 6px; border-radius: 50%; font-style: normal; }
.advcl .stt.ok { background: color-mix(in srgb, var(--good-text) 13%, transparent); color: var(--good-text); }
.advcl .stt.ok i { background: var(--good-text); }
.advcl .stt.wt { background: color-mix(in srgb, #d97706 15%, transparent); color: #d97706; }
.advcl .stt.wt i { background: #d97706; }
.advcl .stt.tr { background: color-mix(in srgb, var(--series-1) 12%, transparent); color: var(--series-1); }
.advcl .stt.tr i { background: var(--series-1); }
.advcl .stt.rj { background: color-mix(in srgb, var(--critical) 12%, transparent); color: var(--critical); }
.advcl .stt.rj i { background: var(--critical); }
.advcl .uxbill { border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-1); font-size: 13px; padding: 2px 8px; cursor: pointer; }
.advcl .uxbill.add { opacity: .75; }
.advcl .uxbill:hover { border-color: var(--series-1); }
.advcl .nd { color: var(--text-muted); }
.advcl .gbtn { border: 1px solid var(--grid); border-radius: 7px; background: var(--surface-1); color: var(--text-muted); padding: 1px 7px; font-size: 11px; cursor: pointer; }
.advcl .gbtn.has, .advcl .gbtn:hover { border-color: var(--series-1); color: var(--series-1); }
.advcl .gnote { display: inline-flex; align-items: center; gap: 6px; }
.advcl .gnote .tx { font-size: 11.5px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
.advcl .gnote .gwho { display: block; font-size: 9.5px; color: var(--text-muted); }

/* Ứng tiền — dải chọn ngày ứng (GĐ duyệt 24/07) */
.udayrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.udayrow .drdays .dday .n2 { display: block; font-size: 8px; font-weight: 800; color: var(--good-text); line-height: 1.1; min-height: 9px; white-space: nowrap; }
.udayrow .drdays .dday.pick .n2 { color: #fff; }
.udayrow .dnav2 { display: block; }
@media (max-width: 700px) { .udayrow .dnav2 { display: none; } }
.dnav2:hover { border-color: var(--series-1); color: var(--series-1); }
#dr-dprev { margin-left: auto; }
.drdays#dr-strip { margin-left: 0; }
.drdays .dday {
  flex: none; min-width: 34px; text-align: center; border: 1px solid var(--grid); border-radius: 9px;
  background: var(--surface-1); color: var(--text-primary); padding: 3px 4px 4px; cursor: pointer;
  font: inherit; line-height: 1.15; box-shadow: 0 1px 2px rgba(15, 30, 60, .06);
}
.drdays .dday b { display: block; font-size: 13.5px; font-weight: 800; }
.drdays .dday .wd { display: block; font-size: 8px; font-weight: 800; letter-spacing: .03em; color: var(--text-muted); }
.drdays .dday .wd.red { color: var(--critical); }
.drdays .dday .wd.sp { color: var(--series-1); }
.drdays .dday:hover:not(.off) { border-color: var(--series-1); }
.drdays .dday.pick { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.drdays .dday.pick .wd, .drdays .dday.pick .wd.red, .drdays .dday.pick .wd.sp { color: #ffffffcc; }
.drdays .dday.off { opacity: .4; cursor: default; box-shadow: none; }
.drtools { display: flex; gap: 6px; align-items: center; flex: none; }
.drdatehid { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.dric { border: 1px solid var(--grid); border-radius: 10px; background: var(--surface-1); color: var(--text-primary); padding: 7px 10px; font-size: 13.5px; cursor: pointer; line-height: 1; }
.dric:hover { background: color-mix(in srgb, var(--series-1) 9%, var(--surface-1)); }
.dric.on { border-color: var(--series-1); background: color-mix(in srgb, var(--series-1) 13%, var(--surface-1)); }
@media (max-width: 700px) { .drctl { flex-wrap: wrap; } .drdays { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; } .dnav2 { display: none; } }

/* dải 6 KPI — LUÔN 1 hàng, màn hẹp kéo ngang */
.drkpis { display: grid; grid-template-columns: repeat(6, minmax(146px, 1fr)); gap: 10px; overflow-x: auto; margin-bottom: 10px; padding-bottom: 2px; }
.drkpis .kb { background: var(--surface-1); border: 1px solid var(--grid); border-radius: 13px; padding: 10px 12px 0; box-shadow: var(--shadow); overflow: hidden; }
.drkpis .kb .l { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: var(--text-muted); white-space: nowrap; }
.drkpis .kb .v { font-size: 17.5px; font-weight: 800; white-space: nowrap; margin: 1px 0; }
.drkpis .kb .d { font-size: 10px; font-weight: 700; white-space: nowrap; }
.drkpis .kb .d.up { color: var(--good-text); }
.drkpis .kb .d.dn { color: var(--critical); }
.drkpis .kb .d.mu { color: var(--text-muted); }
.drkpis .kb svg { display: block; width: calc(100% + 24px); margin: 3px -12px 0; }
/* nút 💾 Lưu từng dòng: neo giữa hàng ở mép phải cột tên → chữ và nút đều
   căn giữa dòng, thẳng 1 hàng dọc (GĐ góp ý 21/07: chữ bị lệch giữa hàng) */
/* CHỈ dòng nhân viên (tr[data-row]) — không đụng dòng tổng/team đang ghim sticky */
.drt tbody tr[data-row] td.name { position: relative; vertical-align: middle; padding-right: 78px; }
.dr-rowsave {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 1px solid var(--series-1); background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1));
  color: var(--series-1); border-radius: 8px; padding: 2px 10px; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer;
}
.dr-rowsave:active { transform: translateY(calc(-50% + 1px)); }
/* ô nhập + mọi ô số căn giữa hàng cho đều */
.drt td { vertical-align: middle; }
.drt td.num input { height: 26px; vertical-align: middle; }
/* thu gọn team: mũi tên xoay, con trỏ tay */
.drt tr.team { cursor: pointer; user-select: none; }
.drt tr.team .car { display: inline-block; width: 15px; transition: transform .15s; font-size: 10px; }
.drt tr.team.closed .car { transform: rotate(-90deg); }
/* cột máy tính: chữ RÕ hơn (GĐ góp ý 21/07) */
.drt tbody tr:not(.total):not(.team) td[data-ct] { color: var(--text-secondary); font-weight: 650; font-size: 12.5px; }
/* ô nhập nền xanh dương nhạt cho dễ nhận */
.drt td.num input:not(.auto) { background: color-mix(in srgb, var(--series-1) 5%, var(--surface-1)); border-radius: 7px; }
@media (max-width: 700px) {
  .savebar.savetop.v2 .sb-ic, .savebar.savetop.v2 .sb-tt { display: none; }
  .drkpis { grid-template-columns: repeat(6, minmax(146px, 1fr)); }
}
/* dải ngày 1 chạm trong thanh Báo cáo ngày (GĐ yêu cầu 21/07) */
.drbar .drstrip { flex-basis: 100%; order: 9; margin-top: 2px; }
@media (max-width: 700px) { .drbar .drstrip .dday { min-width: 30px; height: 36px; } }

/* ============ 🎯 SET ADS đợt 1 (GĐ duyệt 26/07) ============ */
.saboard { background: var(--surface-1); border: 1px solid var(--border); border-top: 3px solid var(--series-1);
  border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.sabtop { display: flex; align-items: stretch; flex-wrap: wrap; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--series-1) 4%, var(--surface-1)); }
.sabtop .ptab { border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 700;
  padding: 12px 14px 10px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; position: relative; }
.sabtop .ptab.on { color: var(--text-primary); border-bottom-color: var(--series-1); }
.sabdg { position: absolute; top: 5px; right: -2px; background: var(--critical); color: #fff; font-size: 9px; font-weight: 800;
  border-radius: 12px; padding: 0 5px; line-height: 1.5; }
.saact { margin-left: auto; display: flex; gap: 8px; align-items: center; padding: 6px 12px 6px 6px; flex-wrap: wrap; }
.sawhen { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.sawhen b { color: var(--good-text); }
.sastats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 13px 4px; border-bottom: 1px solid var(--border); }
.sastats .st { padding: 0 14px; min-width: 0; border-left: 1px solid var(--border); }
.sastats .st:first-child { border-left: 0; }
.sastats .lb { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 2px; white-space: nowrap; }
.sastats .v { font-size: 18px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums; }
.sastats .d { font-size: 10.5px; font-weight: 700; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.safire { color: var(--serious) !important; }
.sabad { color: var(--critical) !important; }
.sawarn { color: var(--warning) !important; }
.sabanner { padding: 9px 16px; font-size: 12.5px; font-weight: 700; color: var(--serious);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface-1)); border-bottom: 1px solid var(--border); }
.sabanner.sainfo { color: var(--series-1); background: color-mix(in srgb, var(--series-1) 6%, var(--surface-1)); }
.sanote { padding: 9px 16px; font-size: 11.5px; color: var(--text-muted); border-top: 1px dashed var(--border); }
/* TK + hàng 3 cấp */
.saacc { border-bottom: 1px solid var(--border); }
.saacc-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; flex-wrap: wrap;
  background: color-mix(in srgb, var(--series-1) 3%, var(--surface-1)); }
.saacc-head b { font-size: 13px; }
.sawho { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); }
.saagg { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sacar { flex: none; width: 13px; color: var(--text-muted); font-size: 11px; transition: transform .15s; }
.sacar.open { transform: rotate(90deg); }
.sarow { display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px; border-top: 1px solid var(--border);
  cursor: pointer; border-left: 4px solid transparent; }
.sarow:hover { background: color-mix(in srgb, var(--series-1) 3%, var(--surface-1)); }
.sarow.lv2 { padding-left: 34px; background: color-mix(in srgb, var(--series-1) 2%, var(--surface-1)); }
.sarow.lv3 { padding-left: 60px; background: color-mix(in srgb, var(--series-1) 3.5%, var(--surface-1)); }
.sarow.sst-fire { border-left-color: var(--serious); }
.sarow.sst-bad { border-left-color: var(--critical); }
.sarow.sst-warn { border-left-color: var(--warning); }
.saname { flex: 1; min-width: 0; }
.saname b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saname small { color: var(--text-muted); font-size: 10.5px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.savch { flex: none; font-size: 9.5px; font-weight: 800; border-radius: 20px; padding: 3px 8px; letter-spacing: .02em;
  cursor: pointer; border: 0; font-family: inherit; }
.savch.fire { background: color-mix(in srgb, var(--serious) 14%, var(--surface-1)); color: var(--serious); }
.savch.ok { background: color-mix(in srgb, var(--good) 12%, var(--surface-1)); color: var(--good-text); }
.savch.watch { background: color-mix(in srgb, var(--warning) 16%, var(--surface-1)); color: var(--warning); }
.savch.bad { background: color-mix(in srgb, var(--critical) 12%, var(--surface-1)); color: var(--critical); }
.savch.off { background: var(--grid); color: var(--text-muted); }
.sanum { flex: none; width: 92px; text-align: right; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sanum .a { font-size: 12.5px; font-weight: 800; }
.sanum .b { font-size: 9.5px; color: var(--text-muted); font-weight: 700; }
@media (max-width: 860px) { .sanum.hidemb { display: none; } .sanum { width: 76px; } .saagg { flex-basis: 100%; } }
/* nhật ký cảnh báo */
.salog { display: flex; gap: 10px; align-items: baseline; padding: 9px 16px; border-top: 1px solid var(--border); font-size: 12.5px; }
.salog .sat { flex: none; width: 92px; color: var(--text-muted); font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums; }
.salog .sak { flex: none; }
.salog .sax { flex: 1; min-width: 0; }
.salog .satg { flex: none; opacity: .5; }
.salog .satg.ok { opacity: 1; }
@media (max-width: 640px) { .salog { flex-wrap: wrap; } }
/* quy tắc */
.sarules { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.sagrp { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--text-muted); }
.sagrp small { font-weight: 600; letter-spacing: 0; text-transform: none; }
.satbl { border-collapse: collapse; max-width: 560px; }
.satbl th { font-size: 10px; font-weight: 800; color: var(--text-muted); text-align: left; padding: 4px 8px; }
.satbl td { padding: 3px 8px 3px 0; }
.satbl input, .sagrid input { padding: 6px 9px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface-1);
  color: var(--text-primary); font: inherit; font-size: 12.5px; font-weight: 700; width: 130px; }
.satbl input:disabled, .sagrid input:disabled { opacity: .7; }
.sarnum { width: 110px !important; text-align: right; }
.sagrid { display: flex; flex-direction: column; gap: 8px; }
.sagrid label { font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sagrid input { width: 92px; text-align: right; }
.saruleact { border-top: 1px solid var(--border); padding-top: 12px; }
.sasw { gap: 10px !important; }
@media (max-width: 820px) { .sastats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; } .sastats .st:nth-child(4) { border-left: 0; } }
.samut { color: var(--text-muted); font-weight: 600; font-size: 11.5px; }

/* ============ 🔄 Đồng bộ chốt khung (GĐ duyệt 26/07) ============ */
.drsbx {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-radius: 10px; padding: 8px 13px; margin: 8px 0 0;
  font-size: 12.5px; font-weight: 600; border: 1px solid transparent;
}
.drsbx.info { color: var(--text-secondary); background: color-mix(in srgb, var(--series-1) 6%, transparent); border-color: color-mix(in srgb, var(--series-1) 20%, transparent); }
.drsbx.run { color: var(--series-1); background: color-mix(in srgb, var(--series-1) 10%, transparent); border-color: color-mix(in srgb, var(--series-1) 30%, transparent); }
.drsbx.ok { color: var(--good-text); background: color-mix(in srgb, var(--good) 11%, transparent); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.drsbx.err { color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, transparent); border-color: color-mix(in srgb, var(--critical) 30%, transparent); }
.drsbx button { margin-left: auto; }
.drt td.num.sbxlk { color: var(--text-muted); background: color-mix(in srgb, var(--series-1) 5%, transparent); position: relative; }
.drt td.num.sbxlk::after { content: '🔒'; font-size: 9px; margin-left: 3px; opacity: .8; }
.drt td.num.sbxlkgd input { border-color: color-mix(in srgb, var(--series-1) 45%, transparent); }
.drme .f .auto { opacity: .85; }

/* ============ 📋 BÁO CÁO KPI PHÒNG MKT (GĐ duyệt demo 28/07) ============ */
.mbtop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mbtop input[type="date"] { font: inherit; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--baseline); background: var(--surface-1); color: var(--text-primary); }
.seg3 { display: inline-flex; border: 1px solid var(--baseline); border-radius: 9px; overflow: hidden; }
.seg3 button { font: 600 12.5px/1 inherit; border: 0; background: transparent; color: var(--text-muted); padding: 8px 16px; cursor: pointer; }
.seg3 button.on { background: var(--series-1); color: #fff; }
.mbc .mbttl { font-size: 23px; font-weight: 800; letter-spacing: .03em; text-align: center; margin: 6px 0 2px; color: var(--series-1); }
.mbc .mbttl::after { content: ""; display: block; width: 130px; height: 3px; border-radius: 3px; background: var(--series-1); margin: 8px auto 0; }
.mbc .mbck { text-align: center; font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.mbc .mbsect { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 9px 14px; border-radius: 9px;
  background: color-mix(in srgb, var(--series-1) 9%, transparent); border-left: 4px solid var(--series-1);
  font-size: 14.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-primary); }
.mbtb td { vertical-align: top; }
.mbd { display: block; font-size: 11px; font-weight: 600; margin-top: 1px; }
.mbd.up { color: var(--good-text); } .mbd.dn { color: var(--critical); } .mbd.fl { color: var(--text-muted); }
.mbbar { position: relative; background: var(--page); border: 1px solid var(--grid); border-radius: 20px; height: 17px; min-width: 150px; overflow: hidden; display: inline-block; vertical-align: middle; }
.mbbar i { position: absolute; inset: 0 auto 0 0; border-radius: 20px; }
.mbbar i.g { background: color-mix(in srgb, var(--good) 30%, transparent); }
.mbbar i.y { background: color-mix(in srgb, var(--warning, #e0a33e) 32%, transparent); }
.mbbar i.r { background: color-mix(in srgb, var(--critical) 26%, transparent); }
.mbbar b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; }
.mbpv.ok { color: var(--good-text); } .mbpv.warn { color: var(--warn-text); } .mbpv.bad { color: var(--critical); }
.mchip { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 2px 8px; margin: 1px 2px 1px 0; white-space: nowrap; }
.mchip.ok { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good-text); }
.mchip.warn { background: color-mix(in srgb, var(--warning, #e0a33e) 15%, transparent); color: var(--warn-text); }
.mchip.bad { background: color-mix(in srgb, var(--critical) 10%, transparent); color: var(--critical); }
.mbwhy { margin-top: 8px; font-size: 13.5px; }
.mbwhy .li { display: flex; gap: 9px; padding: 3.5px 0; }
.mdot { width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; flex: none; }
.mdot.b { background: var(--critical); } .mdot.w { background: var(--warning, #e0a33e); } .mdot.k { background: var(--series-1); }
.mbgp { margin-top: 9px; font-size: 13.5px; }
.mbgp > b { font-size: 14px; }
.mbgpe { white-space: pre-wrap; padding: 5px 9px; border-radius: 8px; border: 1px solid transparent; outline: 0; line-height: 1.6; }
.mbgpe:hover { border-color: var(--grid); }
.mbgpe:focus { border-color: var(--series-1); background: var(--page); }
/* ⚡ 06/08: NGUYÊN NHÂN & KHẮC PHỤC theo cặp + bằng chứng giá số/chủ lực */
.mbsub { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); text-transform: none; letter-spacing: 0; }
.mbins { margin-top: 12px; }
.mbins + .mbins { margin-top: 20px; }
.mbinh b { font-size: 14px; }
.mbars { display: flex; align-items: flex-end; gap: 5px; margin: 8px 0 4px; }
.mbcol { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 40px; }
.mbcol i { display: block; width: 100%; max-width: 38px; background: color-mix(in srgb, var(--series-1) 38%, var(--surface-1)); border-radius: 3px 3px 0 0; }
.mbcol.hot i { background: color-mix(in srgb, var(--bad-text, #c22f2f) 55%, var(--surface-1)); }
.mbcol .v { font-size: 10.5px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.mbcol.hot .v { color: var(--bad-text, #c22f2f); }
.mbcol .d { font-size: 10px; color: var(--text-secondary); }
.mbnote { align-self: center; margin-left: 10px; font-size: 12px; color: var(--text-secondary); }
.mbcl { margin: 6px 0 4px; }
.mbdrop { color: var(--bad-text, #c22f2f); font-weight: 700; }
.mpair { border: 1px solid var(--grid); border-left: 4px solid var(--series-1); border-radius: 0 8px 8px 0; padding: 9px 13px 11px; margin-top: 9px; }
.mpair.bad { border-left-color: var(--bad-text, #c22f2f); }
.mpair.warn { border-left-color: var(--warn-text, #b26a05); }
.mpair.good { border-left-color: var(--good-text, #177a45); }
.mpair.mut { border-left-color: var(--grid); }
.mph { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mph b { font-size: 12.5px; letter-spacing: .03em; }
.medited { display: none; font-size: 11px; font-weight: 700; color: var(--good-text, #177a45); background: color-mix(in srgb, var(--good-text, #177a45) 12%, transparent); border-radius: 12px; padding: 1px 9px; }
.mundo { display: none; margin-left: auto; font: inherit; font-size: 12px; border: 1px solid var(--grid); background: transparent; color: var(--text-secondary); border-radius: 6px; padding: 1px 8px; cursor: pointer; }
.mpair.dirty .medited { display: inline-block; }
.mpair.dirty .mundo { display: inline-block; }
.mprow { display: flex; gap: 10px; align-items: baseline; }
.mprow + .mprow { margin-top: 5px; }
.mlb { flex: 0 0 86px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--text-secondary); text-transform: uppercase; }
.mpe { flex: 1; min-width: 0; white-space: pre-wrap; line-height: 1.55; border-radius: 6px; border: 1px solid transparent; outline: 0; padding: 2px 7px; margin: -2px -7px; cursor: text; }
.mpe:hover { border-color: var(--grid); }
.mpe:focus { border-color: var(--series-1); background: var(--page); }
@media (max-width: 560px) { .mprow { flex-direction: column; gap: 2px; } .mlb { flex: none; } }
/* form cũ: ô sửa nằm NGAY trong dòng nguyên nhân / khối giải pháp */
.mbwhy .mpe { display: inline; flex: none; margin: 0; padding: 1px 5px; }
.mbgp .mbgpe.mpe { display: block; flex: none; margin: 0; }
/* GĐ chốt 07/08: báo cáo KHÔNG hiện nhãn "đã sửa tay" — nút ↺ chỉ ló khi rê chuột/đang sửa dòng đó */
.mbwline .medited, .mbgp .medited, .mbwline .mundo, .mbgp .mundo { display: none; }
.mbwline.dirty:hover .mundo, .mbgp.dirty:hover .mundo,
.mbwline.dirty:focus-within .mundo, .mbgp.dirty:focus-within .mundo { display: inline-block; margin-left: 5px; }
.mbnote { margin-top: 10px; font-size: 11.5px; color: var(--text-muted); border-top: 1px dashed var(--grid); padding-top: 7px; }
/* ⚙ KPI MKT — ô suy ra nhảy sống (GĐ duyệt demo 28/07) */
td.mkfl { animation: mkfl .5s; }
@keyframes mkfl { 0% { background: color-mix(in srgb, var(--good) 18%, transparent); } 100% { background: transparent; } }
.mbct { font-size: 12.5px; color: var(--text-muted); border-top: 1px dashed var(--grid); margin-top: 8px; padding-top: 7px; line-height: 1.7; }
.mbct b { color: var(--series-1); }

/* 🤖 SỐ MÁY chờ GĐ duyệt (30/07) — dải vàng + nhắc đỏ dưới ô lệch máy */
.drsbx.pend { color: var(--warn-text); background: color-mix(in srgb, var(--warning) 13%, transparent); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.drsbx button + button { margin-left: 8px; }
.mayv { display: block; font-size: 10px; font-weight: 800; line-height: 1.3; color: var(--critical); text-align: right; }
.drme .f .mayv { text-align: left; }

/* 🦊 Ma trận Sale × MKT từ Foxia (31/07) */
.fxmx th .fxu { display: block; font-weight: 400; font-size: 10px; text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
.fxmx td { vertical-align: top; white-space: nowrap; }
.fxmx .fxd { font-weight: 800; }
.fxmx .fxd small { font-weight: 600; color: var(--text-secondary); }
.fxmx .fxv { font-size: 12px; color: var(--text-secondary); }
.fxmx tr.fxoff td { opacity: .42; }
.fxmx tr.fxoff td:first-child { opacity: .72; }
.fxmx .fxtk { display: flex; gap: 8px; align-items: center; cursor: pointer; margin: 0; font-weight: 600; white-space: nowrap; }
.fxmx .fxtk small { color: var(--text-secondary); font-weight: 400; }
.fxmx tr.fxtot td { font-weight: 800; border-top: 2px solid var(--baseline); background: color-mix(in srgb, var(--good) 8%, transparent); }
.fxmx tr.fxtot .fxv { color: var(--good-text); font-weight: 700; }
.fxmx tr.fxteam td { background: color-mix(in srgb, var(--series-1) 8%, transparent); font-weight: 800; border-top: 2px solid var(--baseline); }
.fxmx .fxtag { font-size: 10px; font-weight: 800; border-radius: 6px; padding: 1px 7px; background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-text); text-transform: uppercase; }
.fxmx .fxtag.re { background: color-mix(in srgb, var(--series-1) 14%, transparent); color: var(--series-1); }
.fxmx .fxxn { font-size: 11px; font-weight: 700; color: var(--good-text); }

/* 💰 Nạp tiền qua nhóm Telegram NCC (03/08) */
.napnccrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.napncc { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--baseline); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 700; background: var(--surface-1); }
.napncc small { font-weight: 500; color: var(--text-secondary); }
.napncc.on { border-color: color-mix(in srgb, var(--good) 55%, transparent); background: color-mix(in srgb, var(--good) 8%, var(--surface-1)); }
.naptbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.naptbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); padding: 7px 8px; border-bottom: 1px solid var(--baseline); white-space: nowrap; }
.naptbl td { padding: 8px; border-bottom: 1px solid color-mix(in srgb, var(--baseline) 55%, transparent); vertical-align: middle; white-space: nowrap; }
.naptbl code { font-size: 12px; background: color-mix(in srgb, var(--series-1) 8%, transparent); border-radius: 5px; padding: 1px 6px; }
.naptbl .napact { text-align: right; }
.naptbl .napact .btn + .btn { margin-left: 4px; }
.napcfg-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--baseline) 55%, transparent); }
.napcfg-row:last-of-type { border-bottom: 0; }
.napcfg-row .ncname { flex: 0 0 230px; min-width: 180px; }
.napcfg-row .ncun { flex: 1; display: flex; gap: 6px; min-width: 240px; }
.napcfg-row .ncun input { flex: 1; }
.napcfg-row .ncact { display: flex; gap: 6px; }
@media (max-width: 720px) {
  .napcfg-row .ncname { flex-basis: 100%; }
}

/* 📊 Gói 3 chỉnh 04/08: nút tắt H.QUA/H.NAY + ô tên bảng Báo cáo ngày gọn vừa nội dung */
.dric.drjump { width: auto; padding: 8px 9px; font-size: 10px; font-weight: 800; letter-spacing: .03em; }
.drt td.name, .drt th.col[style*="left"] { width: 1%; white-space: nowrap; padding-right: 14px; }

/* 📊 04/08 (GĐ báo tràn bảng): khung Cả ngày 12 cột — nén cho lọt màn hình:
   tiêu đề cột được xuống dòng (không nong bề rộng), đệm hẹp, viên % gọn */
.drt.n12 th.col { white-space: normal; line-height: 1.2; font-size: 9.5px; padding: 3px 6px; max-width: 72px; }
.drt.n12 td { padding: 0 6px; font-size: 12.3px; }
.drt.n12 .pct-pill { padding: 2px 7px; font-size: 10.5px; }
.drt.n12 .pv { font-size: 11px; }

/* 📊 Bộ lọc + gộp nhóm bảng Lệnh nạp (04/08) */
.napfil { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.napfil input[type="date"], .napfil select { max-width: 170px; }
.napfil #napf-q { flex: 1; min-width: 170px; max-width: 280px; }
.naptbl tr.napgrp td { background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1)); font-size: 12.3px; font-weight: 600; border-top: 2px solid var(--baseline); }

/* ============ 🔒 KHÓA ĐIỀN CHI PHÍ NGÀY ĐÃ QUA (GĐ duyệt 05/08) ============ */
.lkbadge { background: var(--critical); color: #fff; border-radius: 99px; font-size: 10.5px; font-weight: 800; padding: 1px 6px; margin-left: 3px; }
.dband.lockband { background: color-mix(in srgb, var(--critical) 14%, transparent); color: var(--critical); }
.dtile.lockd:not(.sel) { opacity: .55; border-style: dashed; }
.savebar.lockbar { border-color: var(--critical); }
.savebar.lockbar .btn-save { background: var(--critical); }
/* modal lịch khóa */
.lkreqs { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.lkreq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); border-radius: 9px; padding: 7px 10px; font-size: 12.5px; }
.lkscope { display: flex; gap: 7px; align-items: center; flex-wrap: nowrap; margin-bottom: 8px; }
.lkscope > button { font: inherit; font-size: 12.5px; padding: 4px 11px; border-radius: 99px; border: 1px solid var(--grid); background: var(--surface-1); color: var(--text-primary); cursor: pointer; white-space: nowrap; flex: none; }
.lkscope > button.on, .lkchips button.on { background: var(--series-1); border-color: var(--series-1); color: #fff; font-weight: 800; }
.lkscope input[type=search] { font: inherit; font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--grid); border-radius: 99px; background: var(--surface-1); color: var(--text-primary); width: 130px; flex: none; }
.lkchips { display: flex; gap: 7px; flex-wrap: nowrap; overflow: hidden; flex: 1; min-width: 0; }
.lkchips button { font: inherit; font-size: 12.5px; padding: 4px 11px; border-radius: 99px; border: 1px solid var(--grid); background: var(--surface-1); color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.lknav { font: inherit; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--grid); background: var(--surface-1); color: var(--text-primary); cursor: pointer; flex: none; }
.lknav:disabled { opacity: .35; cursor: default; }
.lkquick { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 8px; }
.lkquick input[type=number] { width: 52px; font: inherit; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--grid); border-radius: 7px; background: var(--surface-1); color: var(--text-primary); text-align: center; }
.lkhead { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; flex-wrap: wrap; }
.lkcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.lkdow { font-size: 10px; font-weight: 800; color: var(--text-muted); text-align: center; text-transform: uppercase; letter-spacing: .04em; padding: 2px 0; }
.lkday { position: relative; border: 1px solid var(--grid); border-radius: 8px; min-height: 46px; padding: 4px 6px; font-size: 12px; cursor: pointer; user-select: none; background: var(--surface-1); }
.lkday:hover { border-color: var(--series-1); }
.lkday .n { font-weight: 800; }
.lkday .ic { position: absolute; right: 5px; top: 4px; font-size: 11.5px; }
.lkday .lb { position: absolute; left: 6px; bottom: 3px; font-size: 9.5px; color: var(--text-muted); white-space: nowrap; }
.lkday.lklock { background: color-mix(in srgb, var(--text-muted) 12%, transparent); border-style: dashed; color: var(--text-muted); }
.lkday.lkrieng { border-color: var(--series-1); border-style: solid; }
.lkday.lkgrant { background: color-mix(in srgb, var(--warning) 15%, transparent); border-color: var(--warning); }
.lkday.lktoday { outline: 2px solid var(--series-1); outline-offset: -1px; }
.lkday.lkfut { opacity: .3; cursor: default; pointer-events: none; }
.lkday.lkout { visibility: hidden; }
@media (max-width: 640px) { .lkscope input[type=search] { width: 90px; } .lkday { min-height: 40px; } .lkday .lb { display: none; } }

/* ============ 💳 CHỌN THẲNG NCC KHI KHAI TK (GĐ duyệt 05/08) ============ */
.akncc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .akncc { grid-template-columns: 1fr; } }
.akcard { position: relative; font: inherit; text-align: left; cursor: pointer; border: 1.5px solid var(--grid); border-radius: 10px; padding: 9px 11px; background: var(--surface-1); color: var(--text-primary); display: flex; flex-direction: column; gap: 2px; transition: border-color .12s; }
.akcard:hover { border-color: var(--series-1); }
.akcard.on { border-color: var(--series-1); box-shadow: 0 0 0 1px var(--series-1) inset; background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1)); }
.akcard.on::after { content: "✅"; position: absolute; right: 8px; top: 7px; font-size: 13px; }
.akcard b { font-size: 12.5px; line-height: 1.25; padding-right: 20px; }
.akcard .akpct { font-size: 18px; font-weight: 800; color: var(--series-1); }
.akcard.akgd .akpct { color: var(--warning); }
.akcard .aks { font-size: 10.5px; color: var(--text-muted); }
.akcard.akoff { opacity: .5; }
.akcard.akoff:hover { border-color: var(--grid); }
.akcard.akoff .aks { color: var(--critical); font-weight: 700; }
.akplats { display: flex; gap: 4px; margin-top: 4px; }
.akplats i { font-style: normal; font-size: 10px; font-weight: 800; border: 1px solid var(--grid); border-radius: 5px; padding: 1px 6px; color: var(--text-muted); }
.akplats i.has { border-color: var(--series-1); color: var(--series-1); background: color-mix(in srgb, var(--series-1) 9%, transparent); }
.akplats i.cansv { cursor: pointer; }
.akplats i.cansv:hover { border-color: var(--series-1); }

/* ============ 🚫 XỬ LÝ TRÙNG ID TK (GĐ duyệt 05/08) ============ */
.dupacts { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 7px; }
#acc-id-err b { font-weight: 800; }
.dsgroup { border: 1px solid var(--grid); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.dsgroup .dsid { font-weight: 800; font-size: 13px; }
.dsrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; padding: 7px 0 6px; border-top: 1px dashed var(--grid); margin-top: 6px; }
.dsrow .dswho { flex: 1; min-width: 200px; line-height: 1.35; }
.dstag { font-size: 10px; font-weight: 800; border-radius: 5px; padding: 2px 8px; flex: none; }
.dstag.keep { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-text); }
.dstag.trash { background: color-mix(in srgb, var(--critical) 13%, transparent); color: var(--critical); }
.dsrestore { border: 1px dashed var(--grid); border-radius: 10px; padding: 10px 12px; margin-top: 12px; font-size: 12.5px; }
.dsrestore input { font: inherit; font-size: 12.5px; padding: 6px 9px; border: 1px solid var(--grid); border-radius: 7px; background: var(--surface-1); color: var(--text-primary); }

/* 📗 thanh Xuất dữ liệu trên Tổng quan (GĐ duyệt 06/08) */
.gsbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px;
  border: 1px solid color-mix(in srgb, #16a34a 30%, var(--grid)); border-left: 4px solid #16a34a;
  background: color-mix(in srgb, #16a34a 5%, var(--surface-1, var(--page)));
  border-radius: 0 10px 10px 0; padding: 9px 14px; }
.gsic { font-size: 17px; }
.gsst { flex: 1; min-width: 220px; }
.gsst b { font-size: 13px; }
.gsst .s { display: block; font-size: 12px; color: var(--text-secondary); }
.gsdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--good-text, #177a45); margin-right: 5px; vertical-align: 1px; }
.gsdot.off { background: var(--text-secondary); }
.gsbt { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

/* ============================================================
   💵 TAB LƯƠNG S99 (GĐ duyệt demo 07/08) — full màn, 2 khối CN/ĐN
   băng tiêu đề liền 1 dải xanh, ô sửa tay ✍ + ↺, bảng phạt riêng
   ============================================================ */
.lgcard { overflow: hidden; }
.lgbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lgbar .lglock { margin-left: auto; }
.lglocked { margin-top: 9px; background: color-mix(in srgb, var(--warning) 12%, transparent);
  border-radius: 9px; padding: 7px 12px; font-size: 12.5px; }
.lgscroll { margin-top: 12px; }
table.lgt { border-collapse: collapse; width: 100%; min-width: 1280px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lgt th.grp { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-align: center;
  padding: 6px 8px 5px; border-bottom: none; color: #fff;
  background: linear-gradient(135deg, var(--series-1), #2e6dc2); }
.lgt th.grp:first-child { border-radius: 9px 0 0 0; text-align: left; }
.lgt th.grp:last-child { border-radius: 0 9px 0 0; }
.lgt th.grp.ca { border-left: 2.5px solid rgba(255, 255, 255, .45); }
.lgt thead tr:last-child th { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-align: right;
  padding: 8px 9px; border-bottom: 2.5px solid var(--grid); white-space: nowrap;
  background: color-mix(in srgb, var(--series-1) 8%, transparent);
  color: color-mix(in srgb, var(--series-1) 75%, var(--text-primary)); }
.lgt th:first-child, .lgt td:first-child { text-align: left; }
.lgt td { padding: 9px; border-bottom: 1px solid var(--grid); text-align: right; white-space: nowrap; }
.lgt tbody tr:hover td { background: color-mix(in srgb, var(--series-1) 4%, transparent); }
.lgt .sepL { border-left: 2.5px solid var(--grid); }
.lgwho { display: inline-flex; align-items: center; gap: 9px; vertical-align: middle; }
.lgav { width: 30px; height: 30px; border-radius: 10px; font-size: 11px; }
.lgt .wcol { display: flex; flex-direction: column; gap: 2px; }
.lgt .wcol > b { font-size: 13px; }
.lgt .wsub { display: flex; gap: 5px; align-items: center; }
.lgbac { display: inline-block; font-size: 10px; font-weight: 800; border-radius: 99px; padding: 1px 9px;
  background: color-mix(in srgb, var(--series-1) 12%, transparent); color: var(--series-1); cursor: pointer; }
.lgbac:hover { outline: 1.5px solid var(--series-1); }
.lgt .tchip { display: inline-block; font-size: 10px; font-weight: 700; color: var(--text-secondary);
  border: 1px solid var(--grid); border-radius: 99px; padding: 0 8px; }
.lgt .exp { display: block; font-size: 10.5px; color: var(--text-secondary); font-weight: 400; }
.lgt .pct { font-weight: 800; }
.lgt .pct.g, .lghs.g { color: var(--good-text, #177a45); }
.lgt .pct.w, .lghs.w { color: #96700f; }
.lgt .pct.b, .lghs.b { color: var(--critical); }
.lghs { display: inline-block; font-size: 10.5px; font-weight: 800; border-radius: 99px; padding: 1px 8px; }
.lghs.g { background: color-mix(in srgb, var(--good-text, #177a45) 13%, transparent); }
.lghs.w { background: color-mix(in srgb, #96700f 13%, transparent); }
.lghs.b { background: color-mix(in srgb, var(--critical) 12%, transparent); }
.lgt .ttca b, .lgt .tttm b { font-size: 13.5px; color: var(--series-1); }
.lgt td.lgtot { background: color-mix(in srgb, var(--good-text, #177a45) 5%, transparent); }
.lgt .lgtot b { font-size: 14.5px; color: var(--good-text, #177a45); }
/* 💸 trả 2 đợt (GĐ chốt 18/08): ① mùng 10 lương cơ bản · ② ngày 25 chốt thừa thiếu */
.lgdot { display: block; margin-top: 4px; padding-top: 3px; border-top: 1px dashed var(--grid); font-size: 10px; color: var(--text-muted); text-align: right; }
.lgdot .dr { display: block; white-space: nowrap; line-height: 1.7; }
.lgdot .dr b { font-size: 10.5px; color: var(--text-secondary); }
.lgdot .dr.am b { color: var(--critical, #c0392b); }
.lgdot .lg-d1 { width: 84px; font-size: 10.5px; padding: 0 4px; text-align: right; }
.lgmut { color: var(--text-muted); }
.lgt tr.lgsum td { font-weight: 800; background: color-mix(in srgb, var(--series-1) 6%, transparent); border-top: 2px solid var(--grid); }
.lgein { display: inline-flex; align-items: center; gap: 3px; flex-direction: row-reverse; } /* ↺ nằm TRÁI pill — mép phải ô nhập cố định, sổ 📋 thẳng cột mọi trạng thái (22/08) */
.lg-in { width: 112px; font: inherit; font-weight: 800; text-align: right; border: 1px solid var(--grid);
  border-radius: 7px; padding: 3px 7px; background: var(--page); color: var(--text-primary); }
.lg-in:focus { border-color: var(--series-1); outline: none; }
.lg-in.lg-cong { width: 46px; text-align: center; }
td.lgedited .lg-in { border-color: #b98c1a; background: color-mix(in srgb, #b98c1a 8%, var(--page)); }
.lg-undo { border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 12px; padding: 0 2px; }
.lgchip { display: block; font-size: 9.5px; font-weight: 800; color: #96700f; }
.lgsoi { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.lgsoirow { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--grid); border-radius: 11px; padding: 9px 13px; font-size: 12.5px; }
.lgsoirow .t b { display: block; }
.lgsoirow .t span { color: var(--text-secondary); font-size: 11.5px; }
.lgsoirow.up { border-color: color-mix(in srgb, var(--good-text, #177a45) 45%, transparent); background: color-mix(in srgb, var(--good-text, #177a45) 6%, transparent); }
.lgsoirow.down { border-color: color-mix(in srgb, var(--critical) 40%, transparent); background: color-mix(in srgb, var(--critical) 5%, transparent); }
table.lgft { border-collapse: collapse; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lgft th { font-size: 10.5px; font-weight: 800; color: var(--text-secondary); text-align: right; padding: 6px 9px; border-bottom: 2px solid var(--grid); }
.lgft td { padding: 8px 9px; border-bottom: 1px solid var(--grid); text-align: right; }
.lgft td:first-child { text-align: left; }
.lgft tr.lgsum td { font-weight: 800; border-top: 2px solid var(--grid); }
/* 🧾 phiếu lương cá nhân trong tab Chi phí */
.lgphieu { max-width: 460px; }
.lgph { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed var(--grid); padding-bottom: 7px; margin-bottom: 4px; }
.lgpl { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12.5px; }
.lgpl.lgplsum { border-top: 2px solid var(--grid); margin-top: 5px; padding-top: 8px; font-weight: 800; font-size: 14px; }
.lgpl.lgplsum span:last-child { color: var(--good-text, #177a45); }
/* 🏃 công tắc "chạy ads như NV MKT" trong modal phân quyền (08/08) */
.permrun { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px;
  border: 1.5px dashed var(--series-1); border-radius: 11px; cursor: pointer; font-size: 13px; }
.permrun input { margin-top: 3px; }
.permrun small { display: block; color: var(--text-secondary); font-weight: 400; margin-top: 2px; }

/* 🧮 Đối soát CSV NCC (21/08) — chip tóm tắt xử lý file + nút ⚖ bù trong bảng lệch */
.dsch { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.dsch span { background: color-mix(in srgb, var(--text-primary) 4%, transparent); border: 1px solid var(--grid);
  border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--text-secondary); }
.dsch span b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dsch span.hl { border-color: var(--series-1); color: var(--series-1); }
.dsch span.hl b { color: inherit; }
.dsch span.bad { border-color: var(--critical); color: var(--critical); }
.ds-bu { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-bu:disabled { opacity: .75; color: var(--good-text); border-color: var(--good-text); }
.ds-map { max-width: 240px; font-size: 12px; }
.modal:has(#ds-file) { max-width: 1100px; } /* modal đối soát: bảng 6 cột cần rộng */
.modal .ncscroll { max-width: 100%; overflow-x: auto; } /* bảng trong modal không được tràn ra ngoài khung */
.dstb th, .dstb td { padding: 6px 8px; font-size: 12.5px; } /* bảng đối soát nén lại cho đủ 6 cột */
.dstb td:first-child { white-space: normal; max-width: 250px; }
.dstb .ds-bu { padding: 3px 8px; font-size: 12px; }

/* 📋 sổ lương "SỐ TRƯỚC — TÊN SAU" (GĐ duyệt demo 22/08) */
.lgt2 tr.lgdr td.lbx9 { text-align: left; color: var(--text-primary); font-size: 12.5px; white-space: normal; line-height: 1.4; }
.lgt2 tr.lgdr td.lbx9 b { font-weight: 700; }
.lgt2 tr.lgdr td.lbx9 small { color: var(--text-muted); margin-left: 6px; font-weight: 400; }
.lgt2 .dsp { display: inline-block; border: 1px solid var(--baseline); border-radius: 8px; padding: 1px 8px; background: var(--surface-1); font-weight: 800; } /* số DSTC mang "áo" ô nhập của bảng chính */
.lgt2 tr.lgh9 > td { font-size: 9.5px; font-weight: 800; letter-spacing: .4px; color: var(--text-muted) !important; padding-top: 6px; padding-bottom: 1px; border-bottom: none; }
.lgt2 tr.lgh9 td.hL { text-align: left; }
.lgt2 tr.lgh9 td.lb1h::before { content: ''; }
.lgt2 tr.lgh9 td.lb1h { font-size: 9.5px; letter-spacing: .4px; padding-left: 28px; }
.lgt2 tr.lgdr.z9 td, .lgt2 tr.lgdr.z9 td .dsp { color: var(--text-muted); font-weight: 400; opacity: .8; }
.gtv9 { color: var(--warn-text, #93590a); font-weight: 800; }
/* cột mini SỐ TIỀN trong khối trừ của sổ 📋 — số nào cũng thẳng một đường (22/08) */
.lgt2 tr.lgdr .n0, .lgt2 tr.lgh9 .n0 { display: inline-block; min-width: 112px; text-align: right; margin-right: 12px; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: middle; }
.lgt2 tr.lgdr .n0.lgneg { color: var(--critical); }
/* nhãn khối trừ đứng ngay sau cụm số (giống tên thành viên đội nhóm) — công thức xuống dòng nhỏ (22/08) */
.lgt2 tr.lgdr td.lbx9 > small { display: block; margin-left: 0; margin-top: 1px; }
.lgt2 tr.lgdr td.lbx9 .gtbox small { display: block; margin-left: 0; }
/* 💵 bảng lương gọn ô + kẻ sọc xen kẽ (GĐ yêu cầu 22/08) */
.lgt2 td { padding: 7px 8px; }
.lgt2 td:first-child { width: 185px; }
.lgt2 .lg-in { width: 106px; }
.lgt2 tr.zeb > td { background: color-mix(in srgb, var(--text-primary) 6%, var(--surface-1)) !important; }

/* 💬 thẻ rê chuột bảng lương (GĐ duyệt demo 22/08) */
.lgt2 td.hv9 { cursor: help; }
.lgt2 td.hv9:hover { background: color-mix(in srgb, var(--series-1) 9%, var(--surface-1)) !important; }
.lgt2 .num9 { border-bottom: 1.5px dotted color-mix(in srgb, var(--series-1) 55%, transparent); padding-bottom: 1px; }
#lgpop9 { position: fixed; z-index: 300; min-width: 280px; max-width: 400px; background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--series-1) 40%, var(--grid)); border-radius: 12px; box-shadow: 0 16px 48px rgba(10, 25, 50, .28); padding: 10px 13px 11px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
#lgpop9.hidden { display: none; }
#lgpop9 h4 { margin: 0 0 6px; font-size: 12px; display: flex; justify-content: space-between; gap: 12px; }
#lgpop9 h4 span { color: var(--text-muted); font-weight: 400; }
#lgpop9 .r { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 2.5px 0; }
#lgpop9 .r span { color: var(--text-secondary); }
#lgpop9 .r b { font-weight: 600; white-space: nowrap; }
#lgpop9 .r.tot { border-top: 1px solid var(--grid); margin-top: 4px; padding-top: 5px; }
#lgpop9 .r.tot b { font-weight: 800; }
#lgpop9 .r.gt { background: color-mix(in srgb, var(--warning) 12%, var(--surface-1)); border-radius: 7px; padding: 3px 7px; }
#lgpop9 .r.gt span { color: var(--warn-text); }
#lgpop9 .r.th9 b, #lgpop9 .r.th9 span { color: var(--critical); }
#lgpop9 .r.pos9 b { color: var(--good-text); }
#lgpop9 .r.z9, #lgpop9 .r.z9 b { color: var(--text-muted); font-weight: 400; }
#lgpop9 .lg-in { width: 64px; }
/* ⛔ ô X — chưa vào làm/đã nghỉ việc (22/08): mờ, không công không phép */
.cc-tb td.c.vx { color: var(--text-muted); font-weight: 800; background: color-mix(in srgb, var(--text-primary) 5%, var(--surface-1)); }
/* 🔎 lọc + sort bảng lương (22/08) */
.lgbar #lg-q, .lgbar #lg-fteam, .lgbar #lg-fphong { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-1); color: var(--text-primary); }
.lgt2 thead th.lgth9 { cursor: pointer; user-select: none; }
.lgt2 thead th.lgth9:hover { filter: brightness(.96); }
/* ✍ ghi chú lương khác nằm NGAY DƯỚI ô số (22/08 — hết phải rê thẻ) */
.lgt2 .lgkn { display: block; width: 118px; margin-top: 3px; font-size: 11px; padding: 2px 6px; border: 1px dashed var(--grid); border-radius: 6px; background: var(--surface-1); color: var(--text-secondary); }
.lgt2 .lgkn:focus { border-style: solid; border-color: var(--series-1); outline: none; color: var(--text-primary); }
.lgt2 .lgkn-ro { display: block; font-size: 10.5px; color: var(--text-muted); max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
/* 🔟 chip chế độ thuế (22/08) */
.lgt2 .tmode { display: inline-block; font-size: 9px; font-weight: 800; border-radius: 99px; padding: 1px 7px; cursor: pointer; user-select: none; }
.lgt2 .tmode.bac { background: color-mix(in srgb, var(--series-1) 12%, var(--surface-1)); color: var(--series-1); }
.lgt2 .tmode.tv { background: color-mix(in srgb, var(--warning) 16%, var(--surface-1)); color: var(--warn-text); }
/* ✅ nút check lương từng người (22/08) */
.lgt2 .lgckb { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--grid); background: var(--surface-1); color: transparent; font-size: 12px; font-weight: 800; cursor: pointer; margin-right: 6px; vertical-align: middle; padding: 0; line-height: 1; flex: none; }
.lgt2 .lgckb:hover { border-color: var(--good-text); color: color-mix(in srgb, var(--good-text) 45%, transparent); }
.lgt2 .lgckb.on { background: var(--good-text); border-color: var(--good-text); color: #fff; }
.lgt2 .lgckb.ro { cursor: default; display: inline-block; text-align: center; }

/* ================== 🎨 BẢNG LƯƠNG PHẲNG KIỂU QUỐC TẾ (GĐ duyệt demo 22/08) ==================
   Chữ tương phản cao · dòng tách bạch (kẻ ngang rõ + sọc nhẹ + ô cao) · bỏ kẻ dọc
   · ô nhập "tàng hình" (viền hiện khi rê dòng, xanh khi gõ, sửa tay = gạch chân hổ phách) */
.lgt2 thead th { background: var(--page) !important; color: var(--text-secondary) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .05em; border-bottom: 2px solid var(--baseline) !important; box-shadow: none !important; }
.lgt2 thead th:hover { color: var(--text-primary) !important; }
.lgt2 tbody td { padding: 11px 10px; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--grid); }
.lgt2 th.sepL, .lgt2 td.sepL { border-left: none; }
.lgt2 tr.zeb > td { background: color-mix(in srgb, var(--text-primary) 3%, var(--surface-1)) !important; }
.lgt2 tbody tr:hover td { background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1)) !important; }
.lgt2 .lg-in { border-color: transparent; background: transparent; font-weight: 600; }
.lgt2 tbody tr:hover .lg-in { border-color: var(--grid); background: var(--surface-1); }
.lgt2 .lg-in:focus { border-color: var(--series-1) !important; background: var(--surface-1) !important; }
.lgt2 td.lgedited .lg-in { border-color: transparent; background: transparent; border-bottom: 2px solid #b45309; border-radius: 4px 4px 0 0; }
.lgt2 tbody tr:hover td.lgedited .lg-in { border-color: var(--grid); border-bottom: 2px solid #b45309; background: var(--surface-1); }
.lgt2 .lgkn { border-color: transparent; background: transparent; }
.lgt2 tbody tr:hover .lgkn { border-color: var(--grid); }
/* nút Check kiểu Ví NCC — bấm xong đổi màu, dòng nhuộm xanh nhạt */
.lgt2 .ckb { font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: 7px; border: 1px solid var(--grid); background: var(--surface-1); color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.lgt2 .ckb:hover { border-color: var(--good-text); color: var(--good-text); }
.lgt2 .ckb.on { background: var(--good-text); border-color: var(--good-text); color: #fff; }
.lgt2 .ckb.ro { cursor: default; }
.lgt2 .lgckn { display: block; font-size: 10px; color: var(--good-text); font-weight: 600; margin-top: 2px; }
.lgt2 tr.lgdone > td { background: color-mix(in srgb, var(--good) 8%, var(--surface-1)) !important; }
.lgt2 tr.lgdone:hover td { background: color-mix(in srgb, var(--good) 12%, var(--surface-1)) !important; }
.lgt2 td.lgckc { text-align: center; }

/* 🎨 đợt 2 làm sạch (GĐ soi bản thật 23/08): giấu phụ kiện — chỉ hiện khi rê dòng */
.lgt2 .lg-in { background: transparent !important; border-color: transparent !important; }
.lgt2 tbody tr:hover .lg-in { border-color: var(--grid) !important; background: var(--surface-1) !important; }
.lgt2 .lg-in:focus { border-color: var(--series-1) !important; background: var(--surface-1) !important; }
.lgt2 td.lgedited .lg-in { border-bottom: 2px solid #b45309 !important; }
/* 23/08 (GĐ báo cột nhảy khi rê): mọi thứ GIỮ CHỖ SẴN — chỉ đổi màu, không đổi kích thước */
.lgt2 .lg-undo { visibility: hidden; }
.lgt2 tbody tr:hover .lg-undo { visibility: visible; }
.lgt2 .lgkn { display: none; }
.lgt2 .lgkn.has, .lgt2 td:focus-within .lgkn { display: block; } /* ghi chú trống: bấm vào ô mới bung, rê không nhảy */
/* chip thuế → chữ nhỏ gạch chấm như demo */
.lgt2 .tmode { background: none !important; border-radius: 0; padding: 0; font-size: 10.5px; font-weight: 600; color: var(--text-muted); border-bottom: 1px dotted var(--baseline); }
.lgt2 .tmode.tv { color: #b45309; border-bottom-color: #b45309; }
/* số phẳng: bỏ gạch chấm + bỏ màu xanh dương/lá tràn lan — màu chỉ cho trạng thái */
.lgt2 .num9 { border-bottom: none; padding-bottom: 0; }
.lgt2 td.ttca b, .lgt2 td.tttm b, .lgt2 .lgok9, .lgt2 td.lgtot b { color: var(--text-primary); }
.lgt2 tr.lgdone td.lgtot b { color: var(--good-text); }
.lgt2 .lgneg, .lgt2 .lgneg b { color: var(--critical); }
/* % nhỏ xám — chỉ đỏ khi vượt ngưỡng xấu */
.lgt2 .pct { background: none !important; color: var(--text-muted) !important; font-weight: 600; padding: 0; }
.lgt2 .pct.b { color: var(--critical) !important; }
/* bậc/nấc dưới tên: chữ xám trơn, select tàng hình tới khi rê dòng */
.lgt2 .lgbac { background: none; border: none; padding: 0; color: var(--text-muted); font-size: 11px; font-weight: 600; }
.lgt2 .nacchip { background: none !important; border: none !important; padding: 0; font-size: 11px; }
.lgt2 select.nacsel { font-size: 11px; border: 1px solid transparent; background: transparent; color: var(--text-muted); padding: 2px 4px; max-width: 150px; }
.lgt2 tbody tr:hover select.nacsel { border-color: var(--grid); background: var(--surface-1); }
.lgt2 .lgbacbtn { opacity: 0; }
.lgt2 tbody tr:hover .lgbacbtn { opacity: 1; }
/* chú thích nhỏ dưới số (🕐, 🧧, ghi chú cắt gọn) mờ nhẹ */
.lgt2 .exp { color: var(--text-muted); font-weight: 500; }
.lgt2 .tmode.bac { color: var(--text-muted) !important; border-bottom-color: var(--baseline); }

/* 📌 23/08 (GĐ): thanh kéo ngang luôn nằm trong khung + dòng TỔNG ghim đáy khung */
.lgscroll:has(.lgt2) { max-height: calc(100vh - 165px); }
.lgt2 tr.lgsum td { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -2px 6px -3px rgba(15, 30, 60, .25); }
.lgt2 tr.lgsum td:first-child { z-index: 8; }
.lgt2 tr.lgsum td:last-child { z-index: 8; }
/* 23/08 (GĐ): BỎ HẾT gạch chân hổ phách dưới số sửa tay — ô sửa tay chỉ còn nhận biết qua ↺ khi rê dòng */
.lgt2 td.lgedited .lg-in, .lgt2 tbody tr:hover td.lgedited .lg-in { border-bottom: 1px solid transparent !important; border-radius: 7px; }
.lgt2 tbody tr:hover td.lgedited .lg-in { border-color: var(--grid) !important; }
.lgt2 .lg-in:focus, .lgt2 td.lgedited .lg-in:focus { border-color: var(--series-1) !important; }
/* 📌 23/08 (GĐ): ghim cả CỤM cột cuối (ĐÃ TRẢ 10 → XÁC NHẬN) khi cuộn ngang — right do JS đo từng cột */
.lgt2 .lgpin { position: sticky; z-index: 3; }
.lgt2 thead th.lgpin { z-index: 7; }
.lgt2 tr.lgsum td.lgpin { z-index: 8; }
.lgt2 td.lgpin, .lgt2 th.lgpin { box-shadow: none; }
.lgt2 td.lgpinL { box-shadow: -6px 0 8px -6px rgba(15, 30, 60, .16); }
.lgt2 th.lgpinL { border-left: 1px solid var(--grid); }
.lgt2 td.lgpinL { border-left: 1px solid var(--grid); }
/* 🎨 23/08 (GĐ): tiêu đề bảng nền màu nhẹ nhàng cho tách biệt với thân bảng */
.lgt2 thead th { background: color-mix(in srgb, var(--series-1) 7%, var(--surface-1)) !important; border-bottom: 2px solid color-mix(in srgb, var(--series-1) 30%, var(--grid)) !important; }
/* 🗂 23/08 (GĐ): NHÓM CỘT — băng nhãn TÊN · CÁ NHÂN · ĐỘI NHÓM · KHÁC · THỰC NHẬN + kẻ dọc ở ranh giới nhóm */
.lgt2 thead tr.lggr9 th { top: 0 !important; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .14em; padding: 5px 8px; color: color-mix(in srgb, var(--series-1) 70%, var(--text-secondary)); background: color-mix(in srgb, var(--series-1) 13%, var(--surface-1)) !important; border-bottom: 1px solid color-mix(in srgb, var(--series-1) 25%, var(--grid)) !important; box-shadow: none !important; cursor: default; }
.lgt2 thead tr.lggr9 th + th { border-left: 1.5px solid color-mix(in srgb, var(--series-1) 30%, var(--grid)); }
/* kẻ dọc thân bảng đúng mép nhóm: tab 25 cột 2·8·10·15 — tab M10 cột 2·5·8 */
.lgt2.lg25 tr:not(.lggr9) > *:nth-child(2), .lgt2.lg25 tr:not(.lggr9) > *:nth-child(8), .lgt2.lg25 tr:not(.lggr9) > *:nth-child(10), .lgt2.lg25 tr:not(.lggr9) > *:nth-child(15),
.lgt2.lgm10 tr:not(.lggr9) > *:nth-child(2), .lgt2.lgm10 tr:not(.lggr9) > *:nth-child(5), .lgt2.lgm10 tr:not(.lggr9) > *:nth-child(8) { border-left: 1.5px solid color-mix(in srgb, var(--series-1) 22%, var(--grid)) !important; }
/* 📐 23/08 (GĐ duyệt demo): TIÊU ĐỀ & CON SỐ chung MỘT MÉP PHẢI — không gì được chen sau con số
   · ↺ dời sang BÊN TRÁI số (row-reverse) · chip %/🕐/🔀 xuống DÒNG DƯỚI số · đệm phải th = td = 14px
   · ô nhập lấn -6px vào đệm để CHỮ SỐ trong input đứng đúng mép với số thường + tiêu đề */
.lgt2 thead tr:not(.lggr9) th { padding-left: 8px; padding-right: 14px; }
.lgt2 tbody td { padding-right: 14px; }
.lgt2 .lgein { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 4px; }
.lgt2 .lg-in { text-align: right; padding: 3px 6px; margin-right: -6px; }
.lgt2 td .pct { display: block; margin-left: 0; }
.lgt2 td .exp { display: block; }
.lgt2 td .lgvet { display: block; margin-left: 0; }
.lgt2 .lgkn, .lgt2 .lgkn-ro { margin-left: auto; }
/* 📆 23/08 (GĐ): cột VIỀN TUẦN tháng kề trên bảng chấm công — mờ, sọc chéo nhẹ, CHỈ XEM
   (để soi suất nghỉ tuần vắt tháng: tuần T2→CN chỉ được nghỉ 1 buổi, quá là phép) */
.cc-tb th.vien9, .cc-tb td.vien9 { opacity: .55; pointer-events: none; background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--text-primary) 5%, transparent) 5px 7px) var(--surface-1); }
.cc-tb th.vien9 i { font-style: normal; font-size: 8.5px; font-weight: 800; color: var(--series-1); }
.cc-tb td.vien9.v0 { background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--critical) 9%, transparent) 5px 7px) color-mix(in srgb, var(--critical) 7%, var(--surface-1)); }
/* 🚚 23/08 (GĐ duyệt demo): bảng lương VẬN ĐƠN — kẻ dọc nhóm cột 2·6·11·16·20 + ô đơn nén */
.lgt2.lgvd tr:not(.lggr9) > *:nth-child(2), .lgt2.lgvd tr:not(.lggr9) > *:nth-child(4), .lgt2.lgvd tr:not(.lggr9) > *:nth-child(8), .lgt2.lgvd tr:not(.lggr9) > *:nth-child(12), .lgt2.lgvd tr:not(.lggr9) > *:nth-child(13), .lgt2.lgvd tr:not(.lggr9) > *:nth-child(17), .lgt2.lgvd tr:not(.lggr9) > *:nth-child(21), .lgt2.lgvd tr:not(.lggr9) > *:nth-child(22), .lgt2.lgvd tr:not(.lggr9) > *:nth-child(27) { border-left: 1.5px solid color-mix(in srgb, var(--series-1) 22%, var(--grid)) !important; }
.lgt2.lgvd .lg-in { width: 120px; } /* 3 ô TIỀN mỗi khối — đủ chỗ số tỷ */
.lgt2.lgvd td:first-child { width: 205px; }
/* sub dưới số (🕐/🌙/XN%/TC%) — LUÔN xuống DÒNG DƯỚI để cột không phình ngang (GĐ 25/08) */
.lgt2 .vdcs { display: block; font-size: 10px; color: var(--text-muted); font-weight: 600; margin-top: 2px; margin-left: 0; }
.lgt2.lgvd .vdhs { font-size: 10px; font-weight: 800; color: var(--good-text); }
/* 🏢 23/08 (GĐ duyệt demo): hàng chip PHÒNG BAN — mục con của kỳ lương, có mặt cả bảng chấm công */
.lgpbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--grid); background: color-mix(in srgb, var(--series-1) 4%, var(--surface-1)); }
.lgpbar .lb9 { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--text-muted); }
.pb9 { font: inherit; font-size: 12px; font-weight: 700; padding: 5px 13px; border-radius: 8px; border: 1.5px solid var(--grid); background: var(--surface-1); color: var(--text-secondary); cursor: pointer; }
.pb9:hover { border-color: var(--series-1); color: var(--series-1); }
.pb9.on { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.pb9 .n9 { font-size: 10px; font-weight: 600; opacity: .75; margin-left: 5px; }
.ccpbar { border-bottom: 1px solid var(--grid); }
/* kẻ dọc nhóm cột: bảng M10 phòng (2·5·8) + bảng CƠ BẢN (2·7·11) */
.lgt2.lgm10b tr:not(.lggr9) > *:nth-child(2), .lgt2.lgm10b tr:not(.lggr9) > *:nth-child(5), .lgt2.lgm10b tr:not(.lggr9) > *:nth-child(8),
.lgt2.lgcb tr:not(.lggr9) > *:nth-child(2), .lgt2.lgcb tr:not(.lggr9) > *:nth-child(7), .lgt2.lgcb tr:not(.lggr9) > *:nth-child(11) { border-left: 1.5px solid color-mix(in srgb, var(--series-1) 22%, var(--grid)) !important; }
/* 🏢 23/08 (GĐ duyệt demo 3 tầng): hàng CÔNG CỤ của phòng — dưới hàng chip, nhẹ hơn thanh kỳ */
.lgbar.lgtool { border-bottom: 1px solid var(--grid); padding-top: 7px; padding-bottom: 7px; }
/* 🔎 23/08 (GĐ): lọc phòng + team trên danh sách nhân viên */
.hr-filters .hr-fsel { font: inherit; font-size: 12.5px; padding: 6px 10px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-1); color: var(--text-primary); }
/* 🚚 24/08 (GĐ duyệt): hàng MỤC TO (khối Sale/Chăm sóc) — tầng 2 của tiêu đề */
.lgt2 thead tr.lggr9b th { background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1)) !important; letter-spacing: .1em; font-size: 9.5px; }
/* ⚙ 24/08 (GĐ duyệt demo): màn cơ chế TRỰC QUAN — thẻ lương cứng + thang bậc dấu ≥/< + Ô THỬ */
.cfmo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.cfmo .mo9 { border: 1px solid var(--grid); border-radius: 11px; padding: 9px 11px; background: color-mix(in srgb, var(--series-1) 3%, var(--surface-1)); }
.cfmo .lb9 { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--text-muted); text-transform: uppercase; }
.cfmo input { font: inherit; font-weight: 800; font-size: 14px; width: 100%; border: 1px dashed var(--grid); border-radius: 7px; padding: 3px 8px; margin-top: 3px; background: var(--surface-1); color: var(--text-primary); text-align: right; }
.cfmo .u9 { font-size: 10.5px; color: var(--text-muted); font-weight: 500; margin-top: 3px; }
.ladt { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; margin-top: 4px; }
.ladt th { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 7px 9px; border-bottom: 2px solid var(--grid); text-align: center; background: color-mix(in srgb, var(--series-1) 5%, var(--surface-1)); }
.ladt td { padding: 6px 9px; border-bottom: 1px solid var(--grid); text-align: center; font-weight: 700; }
.ladt input { font: inherit; font-weight: 700; width: 66px; text-align: right; border: 1px dashed var(--grid); border-radius: 7px; padding: 2px 6px; background: var(--surface-1); color: var(--text-primary); }
.lopg { color: var(--series-1); font-weight: 800; font-size: 14px; margin-right: 3px; }
.lopr { color: var(--critical); font-weight: 800; font-size: 14px; margin-right: 3px; }
.ladt .ladhs input { font-weight: 800; }
.ladt tr.ladzero td { background: color-mix(in srgb, var(--critical) 8%, var(--surface-1)); color: var(--critical); font-weight: 700; }
.ladt tr.ladhit td { background: color-mix(in srgb, var(--warning) 22%, var(--surface-1)) !important; box-shadow: inset 3px 0 0 var(--warn-text); }
.ladt .ladx { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 12px; }
.ladt .ladx:hover { color: var(--critical); }
.ladtry { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1)); border: 1px solid var(--grid); border-radius: 9px; padding: 7px 11px; margin-top: 8px; font-size: 12.5px; font-weight: 600; }
.ladtry input { font: inherit; font-weight: 800; width: 76px; text-align: right; border: 1.5px solid var(--series-1); border-radius: 7px; padding: 3px 8px; background: var(--surface-1); color: var(--text-primary); }
.ladok { color: var(--good-text); font-weight: 800; }
.ladno { color: var(--critical); font-weight: 800; }
/* 🩸 24/08 (GĐ duyệt): dòng ĐỘI THEO NHÃN SP dưới dòng Leader Vận Đơn */
.lgt2 tr.lgspr > td { background: color-mix(in srgb, var(--series-1) 6%, var(--surface-1)) !important; border-bottom: 1px dashed var(--grid); padding-top: 6px; padding-bottom: 6px; font-size: 12px; }
.lgt2 tr.lgspr > td:first-child { padding-left: 24px; }
/* 🩸 24/08: chip SP đang chạy dưới tên ở bảng lương Vận Đơn */
.lgt2 .vdprod { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 99px; padding: 0 7px; background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)); color: var(--series-1); }
/* ▾ 24/08 (GĐ duyệt): nút bung/ẩn dòng nhãn đội của Leader Vận Đơn */
.lgt2 tr.lgnhide { display: none; }
.lgt2 .bung9 { font: inherit; font-size: 10.5px; font-weight: 700; border: 1px solid var(--series-1); color: var(--series-1); background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1)); border-radius: 99px; padding: 0 9px; cursor: pointer; margin-left: 6px; white-space: nowrap; }
.lgt2 .bung9:hover { background: var(--series-1); color: #fff; }

/* ============ 🎨 ÁO MỚI BẢNG CHẤM CÔNG (GĐ duyệt demo 25/08 — áp mọi phòng) ============
   Nguyên tắc: số liệu giữ nguyên, ngày BÌNH THƯỜNG in nhạt — chỉ NGOẠI LỆ nổi màu.
   CN = cột xám nhạt (không hồng); 🌙 icon góc trên ô, ⏰ muộn/sớm góc dưới. */
.cc-tb thead th { background: var(--surface-2, #f4f6f9); color: var(--text-muted); font-weight: 800; border-bottom: 1.5px solid var(--grid); }
.cc-tb thead th .thd9 { display: block; font-size: 11.5px; color: var(--text-primary); }
.cc-tb thead th.cn { background: color-mix(in srgb, var(--text-muted) 10%, var(--surface-1)); color: var(--text-muted); }
.cc-tb thead th.nm { background: var(--surface-2, #f4f6f9); }
.cc-tb thead th.tot, .cc-tb thead th.phep { background: var(--surface-2, #f4f6f9); border-left: 1px solid var(--grid); color: var(--text-primary); }
.cc-tb td { border-color: color-mix(in srgb, var(--grid) 55%, transparent); }
.cc-tb td.c { font-weight: 500; color: var(--text-muted); font-size: 11.5px; height: 30px; }
.cc-tb td.cn2 { background: color-mix(in srgb, var(--text-muted) 6%, var(--surface-1)); }
.cc-tb td.v05 { background: color-mix(in srgb, var(--warning) 18%, var(--surface-1)); color: #8a6400; font-weight: 800; }
.cc-tb td.v0 { background: color-mix(in srgb, var(--critical) 11%, var(--surface-1)); color: var(--critical); font-weight: 800; }
.cc-tb td.c.vx { color: var(--text-muted); font-weight: 700; background: color-mix(in srgb, var(--text-primary) 6%, var(--surface-1)); }
.cc-tb td.gioc { background: color-mix(in srgb, var(--series-1) 9%, var(--surface-1)); }
.cc-tb .ccgo9 { color: var(--series-1); font-weight: 800; font-size: 10px; }
.cc-tb .ct2 { font-weight: 800; color: #8a6400; }
.cc-tb .cb2 { border-top: none; font-size: 8px; }
.ccbm9 { position: absolute; top: -1px; right: 0; font-size: 8.5px; line-height: 1; pointer-events: none; }
.ccbs9 { position: absolute; bottom: -1px; right: 0; font-size: 8px; line-height: 1; pointer-events: none; }
/* dải ký hiệu — nhìn 3 giây là thuộc */
.cc-lg9 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 6px 16px; border-bottom: 1px solid var(--grid); font-size: 11px; color: var(--text-muted); background: var(--surface-1); }
.cc-lg9 .it9 { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cc-lg9 .s9 { font-style: normal; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 24px; height: 22px; border-radius: 6px; font-size: 10px; font-weight: 800; padding: 0 4px; line-height: 1.05; }
.cc-lg9 .sdu { color: var(--text-muted); font-weight: 500; border: 1px solid var(--grid); }
.cc-lg9 .s05 { background: color-mix(in srgb, var(--warning) 18%, var(--surface-1)); color: #8a6400; }
.cc-lg9 .s0 { background: color-mix(in srgb, var(--critical) 11%, var(--surface-1)); color: var(--critical); }
.cc-lg9 .sx { background: color-mix(in srgb, var(--text-primary) 6%, var(--surface-1)); color: var(--text-muted); }
.cc-lg9 .sg { background: color-mix(in srgb, var(--series-1) 9%, var(--surface-1)); color: var(--series-1); }
.cc-lg9 .smx { background: color-mix(in srgb, var(--warning) 18%, var(--surface-1)); color: #8a6400; }
.cc-lg9 .smx u { text-decoration: none; color: var(--series-1); font-size: 8px; }
/* popup: ô giờ vào/ra */
#cc-pop .ccio9 { font: inherit; font-size: 11.5px; padding: 2px 4px; border: 1px solid var(--grid); border-radius: 6px; background: var(--surface-1); color: var(--text-primary); }

/* ============ 🎨 BẢNG CÔNG v2 — GIỐNG 100% DEMO (GĐ 25/08): CHIP BO GÓC GIỮA Ô,
   bỏ kẻ dọc, hàng thoáng, CN nghỉ để trống, cột 🌙 TỐI chip tím ============ */
.cc-tb td { border: none; border-bottom: 1px solid color-mix(in srgb, var(--grid) 60%, transparent); }
.cc-tb td.c { height: 40px; min-width: 37px; padding: 3px 2px; background: var(--surface-1); font-weight: 500; }
.cc-tb td.nm { border-right: 1.5px solid var(--grid); }
.cc-tb td.cn2 { background: color-mix(in srgb, var(--text-muted) 7%, var(--surface-1)); }
.cc-tb td.off { background: color-mix(in srgb, var(--text-muted) 4%, var(--surface-1)); }
/* màu chuyển từ Ô sang CHIP */
.cc-tb td.v05, .cc-tb td.v0, .cc-tb td.gioc, .cc-tb td.c.vx { background: var(--surface-1); color: inherit; font-weight: 500; }
.cc-tb td.cn2.v05, .cc-tb td.cn2.v0, .cc-tb td.cn2.gioc, .cc-tb td.cn2.vx { background: color-mix(in srgb, var(--text-muted) 7%, var(--surface-1)); }
.cq9 { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; font-size: 11.5px; font-weight: 500; color: var(--text-muted); line-height: 1.05; }
.cc-tb td.v05 .cq9 { background: color-mix(in srgb, var(--warning) 22%, var(--surface-1)); color: #8a6400; font-weight: 800; font-size: 10.5px; }
.cc-tb td.v0 .cq9 { background: color-mix(in srgb, var(--critical) 12%, var(--surface-1)); color: var(--critical); font-weight: 800; }
.cc-tb td.vcn0 .cq9 { background: color-mix(in srgb, var(--text-muted) 14%, var(--surface-1)); color: var(--text-muted); font-weight: 700; } /* CN ghi 0: xám, nghỉ CN là bình thường */
.cc-tb td.vx .cq9 { background: color-mix(in srgb, var(--text-primary) 7%, var(--surface-1)); color: var(--text-muted); font-weight: 700; }
.cc-tb td.gioc .cq9 { background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)); }
.cc-tb td.gioc .cq9:has(.ct2) { background: color-mix(in srgb, var(--warning) 22%, var(--surface-1)); }
.cc-tb .ccgo9 { color: var(--series-1); font-weight: 800; font-size: 9.5px; }
.cc-tb .ct2 { display: block; font-size: 9.5px; font-weight: 800; color: #8a6400; line-height: 1.1; }
.cc-tb .cb2 { display: block; border: none; margin: 0; padding: 0; font-size: 8px; font-weight: 800; line-height: 1.1; }
.cc-tb td.c:hover { outline: none; }
.cc-tb td.c:hover .cq9 { outline: 2px solid var(--series-1); outline-offset: 1px; }
.cc-tb td.c:hover { background: color-mix(in srgb, var(--series-1) 6%, var(--surface-1)); }
.ccbm9 { top: -6px; right: -7px; font-size: 10px; }
.ccbs9 { bottom: -5px; right: -7px; font-size: 9px; }
/* cột tổng: TỔNG CÔNG đậm · 🌙 TỐI chip tím · NGHỈ PHÉP/CÔNG PHÉP nền trắng */
.cc-tb td.tot { font-weight: 800; font-size: 13px; border-left: 1px solid var(--grid); background: var(--surface-1); }
.ccmt9 { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 2px 10px; background: color-mix(in srgb, #5b46c9 11%, var(--surface-1)); color: #5b46c9; white-space: nowrap; }
.ccmut9 { color: var(--text-muted); font-weight: 500; }
.cc-tb td.phep { background: var(--surface-1); color: var(--text-primary); font-weight: 700; border-left: 1px solid var(--grid); }
.cc-tb thead th.tot, .cc-tb thead th.phep { border-left: 1px solid var(--grid); }
/* tiêu đề ngày: số to + thứ nhỏ, nền sáng sạch */
.cc-tb thead th { min-width: 37px; padding: 6px 2px; font-size: 9.5px; }
.cc-tb thead th .thd9 { font-size: 12px; font-weight: 800; }
/* 🌙 bám chặt góc chip — không lơ lửng lấn hàng trên */
.ccbm9 { top: -3px; right: -6px; font-size: 9px; }
.ccbs9 { bottom: -3px; right: -6px; font-size: 8.5px; }

/* ✍ Ô NHẬP CÔNG PHÉP KIỂU MỀM (GĐ duyệt 25/08): nhìn như số thường — rê chuột
   lộ viền đứt, bấm vào mới nổi khung xanh; 0 in mờ; sửa tay nền vàng + nút ↺ */
.cc-tb td.phep .lgein { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
input.cc-cphep { font: inherit; font-variant-numeric: tabular-nums; width: 56px; text-align: center; padding: 5px 6px; border: 1.5px dashed transparent; border-radius: 9px; background: transparent; color: var(--text-primary); font-weight: 700; font-size: 12.5px; cursor: text; }
input.cc-cphep:hover { border-color: var(--grid); background: color-mix(in srgb, var(--text-muted) 5%, var(--surface-1)); }
input.cc-cphep:focus { outline: none; border: 1.5px solid var(--series-1); background: var(--surface-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--series-1) 14%, transparent); color: var(--text-primary); font-weight: 700; }
input.cc-cphep.cp0 { color: var(--text-muted); font-weight: 500; }
input.cc-cphep.ccpe { background: color-mix(in srgb, var(--warning) 16%, var(--surface-1)); color: #8a6400; }
button.cc-cphep-undo { border: none; background: none; color: #8a6400; cursor: pointer; font-size: 12px; padding: 0 2px; opacity: .7; }
button.cc-cphep-undo:hover { opacity: 1; }

/* ============ 🎨 ÁO BẢNG LƯƠNG QUỐC TẾ (GĐ duyệt demo 25/08 — áp toàn công ty) ============
   Chữ Be Vietnam Pro · số IBM Plex (chữ số đều nhau → thẳng cột) · dải thẻ tổng quan ·
   avatar chữ cái theo team + ✓ cạnh tên · ô nhập MỀM gõ trực tiếp · THỰC NHẬN nền xanh */
.lgt2, .lgcard, .lgpbar, .lgbar { font-family: "Be Vietnam Pro", system-ui, sans-serif; }
.lgt2 td, .lgt2 .lg-in, .lgkpi b { font-family: "IBM Plex Sans", "Be Vietnam Pro", sans-serif; font-variant-numeric: tabular-nums; }
.lgt2 td:first-child { font-family: "Be Vietnam Pro", system-ui, sans-serif; }
.lgt2 td { padding-top: 9px; padding-bottom: 9px; }
.lgt2 tbody tr:hover td { background: color-mix(in srgb, var(--series-1) 6%, var(--surface-1)); }
/* dải thẻ tổng quan */
.lgkpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 10px 14px 2px; }
.lgkpi .kp9 { background: var(--surface-1); border: 1px solid var(--grid); border-radius: 12px; padding: 10px 14px; box-shadow: 0 1px 2px rgba(23,28,38,.04); }
.lgkpi .l9 { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 3px; }
.lgkpi b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--text-primary); }
.lgkpi .d9 { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.lgkpi .kp9.pay b { color: var(--good-text, #177a45); }
.lgkpi .kp9.kt b { color: var(--critical); }
/* avatar chữ cái + dấu ✓ cạnh tên */
.lgav9 { width: 30px; height: 30px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; color: #fff; flex: none; letter-spacing: .02em; }
.lgckd9 { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 99px; background: color-mix(in srgb, var(--good-text, #177a45) 14%, var(--surface-1)); color: var(--good-text, #177a45); font-size: 9.5px; font-weight: 800; vertical-align: 1px; margin-left: 2px; }
/* nút XÁC NHẬN dạng viên */
.ckb { border-radius: 99px !important; font-weight: 700; }
.ckb.on { background: color-mix(in srgb, var(--good-text, #177a45) 13%, var(--surface-1)) !important; color: var(--good-text, #177a45) !important; border-color: transparent !important; }
/* ô nhập MỀM — gõ trực tiếp tại ô (đồng bộ kiểu CÔNG PHÉP đã duyệt) */
.lgt2 .lg-in { border: 1.5px dashed transparent; border-radius: 9px; background: transparent; font-weight: 700; padding: 4px 7px; }
.lgt2 tbody tr:hover .lg-in { border-color: color-mix(in srgb, var(--grid) 80%, transparent); background: transparent; }
.lgt2 .lg-in:hover { border-color: var(--grid); background: var(--surface-1); }
.lgt2 .lg-in:focus { border: 1.5px solid var(--series-1) !important; background: var(--surface-1) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--series-1) 14%, transparent); }
.lgt2 td.lgedited .lg-in { background: color-mix(in srgb, #b98c1a 13%, var(--surface-1)); border-color: transparent; color: #8a6400; }
/* cột THỰC NHẬN nền xanh nhạt chạy suốt */
.lgt td.lgtot { background: color-mix(in srgb, var(--good-text, #177a45) 7%, var(--surface-1)); }
.lgt2 tbody tr:hover td.lgtot { background: color-mix(in srgb, var(--good-text, #177a45) 12%, var(--surface-1)); }
.lgt .lgtot b { color: var(--good-text, #177a45); }

/* 🎨 khớp 100% demo (GĐ 25/08): tiêu đề "Bảng lương" + nút kỳ dạng viên trắng,
   hàng tiêu đề cột nền sáng chữ ghi, băng nhóm xanh nhạt chữ xanh */
.lgttl9 { font-family: "Be Vietnam Pro", system-ui, sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--text-primary); }
.lgttl9 .mo9t { font-style: normal; color: var(--text-muted); font-weight: 500; font-size: 13px; }
.lgseg9 { display: inline-flex; background: var(--surface-1); border: 1px solid var(--grid); border-radius: 10px; padding: 3px; box-shadow: 0 1px 2px rgba(23,28,38,.05); }
.lgseg9 button { font: inherit; font-family: "Be Vietnam Pro", system-ui, sans-serif; font-size: 12.5px; font-weight: 700; padding: 7px 18px; border: none; border-radius: 7px; background: transparent; color: var(--text-muted); cursor: pointer; }
.lgseg9 button.on { background: var(--series-1); color: #fff; }
.lgt2 thead th { background: var(--surface-2, #f7f8fa) !important; color: var(--text-muted) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .06em; border-bottom: 1.5px solid var(--grid) !important; font-family: "Be Vietnam Pro", system-ui, sans-serif; }
.lgt2 thead th:hover { color: var(--text-primary) !important; }
.lgt2 thead tr.lggr9 th { background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)) !important; color: var(--series-1) !important; letter-spacing: .13em; border-bottom: 1px solid color-mix(in srgb, var(--series-1) 22%, var(--grid)) !important; }

/* 🎨 25/08 (GĐ): hàng công cụ GỘP vào hàng chip PHÒNG — bảng cao thêm một hàng */
.lgpbar { flex-wrap: wrap; row-gap: 6px; }
.lgpbar .pbsep9 { width: 1px; height: 20px; background: var(--grid); margin: 0 4px; }
.lgpbar .pbq9 { font: inherit; font-size: 12px; padding: 5px 10px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-1); color: var(--text-primary); width: 128px; }
.lgpbar .pbsel9 { font: inherit; font-size: 12px; padding: 5px 8px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-1); color: var(--text-primary); }
.lgpbar .sub { font-size: 11.5px; }
.lgpbar .btn { padding: 5px 11px; }

/* ============ 🚚 BẢNG LƯƠNG VĐ GỘP KHỐI (GĐ duyệt demo 25/08) — lgvd2 ============
   Mỗi người 2 dòng (📣 Sale / 💬 Chăm sóc) chung 4 cột DS; ô chung cao 2 dòng.
   Kẻ đứt mảnh giữa 2 dòng cùng người, kẻ liền giữa người; nền xen kẽ THEO NGƯỜI. */
.lgvd2 td[rowspan] { vertical-align: middle; border-bottom: 1px solid var(--grid); }
.lgvd2 tr.lgra9 > td:not([rowspan]) { border-bottom: 1px dashed color-mix(in srgb, var(--grid) 75%, transparent); }
.lgvd2 tr.lgrb9 td { border-bottom: 1px solid var(--grid); }
.lgvd2 .lgkhoi9 { text-align: left; white-space: nowrap; }
.kchip9 { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; border-radius: 99px; padding: 2px 9px; white-space: nowrap; font-family: "Be Vietnam Pro", system-ui, sans-serif; }
.kchip9.sale9 { background: color-mix(in srgb, #b8563f 12%, var(--surface-1)); color: #b8563f; }
.kchip9.cs9 { background: color-mix(in srgb, var(--series-1) 11%, var(--surface-1)); color: var(--series-1); }
.lgvd2 tr.lgalt9 td { background: color-mix(in srgb, var(--series-1) 3.5%, var(--surface-1)); }
.lgvd2 tbody tr:hover td { background: color-mix(in srgb, var(--series-1) 7%, var(--surface-1)); }
.lgvd2 td.lgtot { background: color-mix(in srgb, var(--good-text, #177a45) 7%, var(--surface-1)); }
.lgvd2 tr.lgspr td:first-child { padding-left: 26px; font-size: 12px; }

/* 🩹 25/08 (GĐ báo kéo ngang đè chữ): dòng DƯỚI của cặp + dòng nhãn con KHÔNG
   được dính mép — chỉ ô NHÂN SỰ (dòng trên, rowspan) và KHỐI THỰC NHẬN được ghim */
.lgvd2 tr.lgrb9 td:first-child, .lgvd2 tr.lgrb9 td:last-child { position: static; box-shadow: none; width: auto; }
/* nền xen kẽ theo NGƯỜI + màu cột THỰC NHẬN + hover — thắng luật nền !important cũ */
.lgvd2 tr.lgalt9 td { background: color-mix(in srgb, var(--series-1) 4%, var(--surface-1)) !important; }
.lgt2 td.lgtot { background: color-mix(in srgb, var(--good-text, #177a45) 8%, var(--surface-1)) !important; }
.lgt2 tbody tr:hover td { background: color-mix(in srgb, var(--series-1) 7%, var(--surface-1)) !important; }
.lgt2 tbody tr:hover td.lgtot { background: color-mix(in srgb, var(--good-text, #177a45) 13%, var(--surface-1)) !important; }
.lgt2 tr.lgsum td, .lgt2 tr.lgsum td.lgtot { background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)) !important; }
/* kẻ dọc PHÂN KHỐI/NHÓM trở lại (GĐ 25/08: "chưa phân biệt các khối") — mảnh, không thô */
.lgt2 th.sepL, .lgt2 td.sepL { border-left: 1.5px solid color-mix(in srgb, var(--grid) 130%, var(--text-muted) 12%); }
/* 🩹 25/08 (GĐ: "1 cột bị lệch hàng"): THƯỞNG CN + CỘNG ĐN kẹp giữa các cột
   chạy theo dòng — căn THẲNG LÊN DÒNG TRÊN (Sale) thay vì lơ lửng giữa cặp */
.lgvd2 td.ckq9[rowspan] { vertical-align: top; }
/* 🧾 phiếu lương chi tiết: đề mục nhỏ + dòng cộng khối */
.lgphieu .lgph2 { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; color: var(--text-muted); margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--grid); }
.lgphieu .lgplsum2 { font-weight: 800; }
.lgphieu .lgplsum2 span:last-child { color: var(--good-text, #177a45); }
/* 🧾 phiếu lương trên màn hẹp: có THANH KÉO SANG — dòng không bể chữ (GĐ 25/08) */
.lgphieu { overflow-x: auto; }
.lgphieu .lgpl, .lgphieu .lgph2 { min-width: 470px; }
.lgphieu .lgph b { white-space: nowrap; }
/* 👑 DẢI PHIẾU GẠT NGANG (GĐ 25/08): phiếu xếp cạnh nhau, gạt/kéo thanh để
   chuyển người — tên nhân sự nằm ngay tiêu đề từng phiếu */
.phrow9 { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 2px 14px; overscroll-behavior-x: contain; }
.phrow9 .phcard9 { flex: 0 0 auto; width: min(490px, 88vw); scroll-snap-align: start; }
.phrow9.one9 .phcard9 { width: min(560px, 100%); }
.phcard9 .lgphieu { margin: 0; overflow-x: visible; height: 100%; }
.phcard9 .lgpl, .phcard9 .lgph2 { min-width: 0; }
.phrow9::-webkit-scrollbar { height: 10px; }
.phrow9::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 35%, transparent); border-radius: 99px; }

/* 📊 PHIẾU KIỂU BẢNG GỐC (GĐ duyệt 25/08): khuôn bảng lương + GHI CHÚ dưới từng số */
.phrow9.bang9r .phcard9 { width: min(980px, 94vw); }
.pbg9 .scr9 { overflow-x: auto; border: 1px solid var(--grid); border-radius: 12px; background: var(--surface-1); }
.pbg9 table { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
.pbg9 thead tr.bands9 th { font-size: 11px; letter-spacing: .04em; color: var(--series-1); text-align: center; background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)); border-bottom: 1px solid var(--grid); padding: 7px 10px; }
.pbg9 thead th { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--text-muted); text-align: right; padding: 8px 10px; background: var(--surface-2, #f7f8fa); border-bottom: 1.5px solid var(--grid); white-space: nowrap; }
.pbg9 th.lft9 { text-align: left; }
.pbg9 th.gb9, .pbg9 td.gb9 { border-left: 1.5px solid var(--grid); }
.pbg9 td { font-family: "IBM Plex Sans", "Be Vietnam Pro", sans-serif; padding: 9px 10px; text-align: right; white-space: nowrap; font-weight: 600; font-size: 12.5px; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--grid) 60%, transparent); }
.pbg9 td.lft9 { text-align: left; font-family: "Be Vietnam Pro", sans-serif; }
.pbg9 td[rowspan] { vertical-align: top; }
.pbg9 tr.rA9 > td:not([rowspan]) { border-bottom: 1px dashed color-mix(in srgb, var(--grid) 75%, transparent); }
.pbg9 .ct9 { display: block; font-size: 9.5px; color: var(--text-muted); font-weight: 500; margin-top: 2px; white-space: normal; max-width: 185px; margin-left: auto; font-family: "Be Vietnam Pro", sans-serif; line-height: 1.35; }
.pbg9 td.lft9 .ct9 { margin-left: 0; }
.pbg9 .hs9 { color: var(--good-text, #177a45); font-weight: 800; }
.pbg9 .neg9c { color: var(--critical); }
.pbg9 td.pay9c { background: color-mix(in srgb, var(--good-text, #177a45) 7%, var(--surface-1)); }
.pbg9 th.pay9c { border-left: 1px solid var(--grid); }
.pbg9 .tn9 { font-weight: 800; color: var(--good-text, #177a45); font-size: 13px; }
/* 📊 kiểu BẢNG GỐC: các bảng xếp DỌC — VUỐT LÊN/XUỐNG chuyển người (GĐ 25/08),
   kéo ngang chỉ để xem cột trong TỪNG bảng; kiểu phiếu dọc vẫn gạt ngang */
.phrow9.bang9r { flex-direction: column; overflow-x: visible; scroll-snap-type: none; }
.phrow9.bang9r .phcard9 { width: 100%; }

/* ============ 💳 CHI PHÍ CÁ NHÂN GỌN (GĐ duyệt demo 26/08 — 2 phần) ============
   ① đầu trang: 1 hàng công cụ (bỏ tiêu đề tên) + KPI DẢI MỎNG (chú thích → tooltip)
   ② khu nhập: tìm TK + lọc TRƯỚC · dải ngày SAU cùng hàng · không chữ giải thích */
.mxchip9 { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 4px 11px; background: var(--page); color: var(--text-muted); white-space: nowrap; flex: none; }
.mxmenu9 { position: relative; flex: none; }
.mxmenu9list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; background: var(--surface-1); border: 1px solid var(--grid); border-radius: 10px; box-shadow: 0 6px 18px rgba(15, 30, 60, .16); display: flex; flex-direction: column; min-width: 200px; padding: 5px; }
.mxmenu9list.hidden { display: none; }
.mxmenu9list button { font: inherit; text-align: left; background: none; border: none; padding: 8px 11px; border-radius: 7px; cursor: pointer; color: var(--text-primary); font-size: 12.5px; font-weight: 600; }
.mxmenu9list button:hover { background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1)); }
/* KPI 5 thẻ → dải mỏng 1 hàng — chú thích ẩn, rê chuột đọc tooltip */
.kband { display: flex; gap: 0; border: 1px solid var(--grid); border-radius: 12px; overflow: hidden; padding: 0; background: var(--surface-1); }
.kband .kb { flex: 1; min-width: 0; border: none; border-left: 1px solid var(--grid); border-radius: 0; padding: 7px 14px; margin: 0; box-shadow: none; background: var(--surface-1); cursor: default; }
.kband .kb:first-child { border-left: none; }
.kband .kb .l { font-size: 9px; }
.kband .kb .v { font-size: 16px; white-space: nowrap; }
.kband .kb .s { display: none; }
/* khu nhập: 1 hàng tìm + lọc + (chip bất thường) + dải ngày */
.mxrow9 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mxrow9 .searchbox { flex: 0 1 280px; min-width: 150px; }
.mxrow9 .seg { flex: none; }
.mxrow9 .datestrip { flex: 1 1 420px; min-width: 300px; margin: 0; }
.mxrow9 #mx-banner { flex: none; display: none; font-size: 11px; border-radius: 99px; padding: 4px 11px; margin: 0; white-space: nowrap; }
.mxrow9 #mx-banner .btn-yday { margin-left: 6px; }
.datestrip.mxgon9 .dtile { min-width: 34px; padding: 2px 4px 1px; }
.datestrip.mxgon9 .dtile .dn { font-size: 13.5px; }
.datestrip.mxgon9 .dtile .wd { font-size: 8.5px; }
.datestrip.mxgon9 .dtile .st { height: 5px; margin-top: 1px; }
.toprow .syncline, .syncline { margin: 2px 0 10px; }
/* thắng luật fullwide cũ đang nới padding thẻ KPI */
main.fullwide .kband { gap: 0; margin-bottom: 14px; }
main.fullwide .kband .kb { padding: 7px 14px; }
main.fullwide .kband .kb .l { font-size: 9px; }
.kband .kb { gap: 0; }
.kband .kb .v { font-size: 15.5px; }
.kband .kb .v .pct-pill { font-size: 12px; padding: 2px 9px; }

/* 🏢 SƠ ĐỒ: khối 🧍 trực thuộc phòng + team 💤 toàn người nghỉ (GĐ duyệt demo 30/08) */
.sd-card.sd-truc9 { border-style: dashed; }
.sd-card.sd-truc9 .sd-tname { color: var(--tk-ok, #0f9d8a); }
.sd-card.sd-off9 { opacity: .55; }
.sd-cnt.sd-cnt0 { background: #9aa4b2; }

/* 🧭 SƠ ĐỒ 4 CẤP: thẻ NHÁNH (GĐ chốt 30/08) */
.sd-card.sd-khoi9 { background: linear-gradient(135deg, #35507a, #24385a); color: #fff; border: 0; }
.sd-card.sd-khoi9 .sd-tname { color: #fff; letter-spacing: .5px; }

/* 🎌 NGÀY LỄ trên bảng chấm công (GĐ duyệt demo 30/08) */
#cc-tb th.ccle9 { background: #fdeaea; color: #c53030; cursor: pointer; }
#cc-tb th[data-ccth] { cursor: pointer; }
#cc-tb th .ccleic9 { display: block; font-size: 10px; line-height: 1; }
#cc-tb th.ccleh9, #cc-tb td.ccleh9 { color: #c53030; }
#cc-tb td.vle9 .cq9 { background: #fdeaea; color: #c53030; }
.ccletag9 { font-size: 9px; margin-left: 1px; }
.exp.lgle9 { color: #c53030; }
#cc-tb td.vle9 .cb2.le9 { color: #c53030; font-size: 9.5px; }

/* 🧭 chip NHÁNH ở dải chọn 3 tầng (GĐ duyệt demo 02/09) */
.lgpbar .pb9.kh9 { font-weight: 800; letter-spacing: .3px; }
.lgpbar .pb9.kh9.on { background: #35507a; border-color: #35507a; color: #fff; }

/* 🧭 ĐƯỜNG DẪN 1 HÀNG + dải bút gọn (GĐ duyệt demo 02/09) */
.ccone9 { flex-wrap: wrap; gap: 6px; }
.ccbc9 { display: inline-flex; align-items: center; gap: 2px; background: var(--card, #fff); border: 1px solid var(--grid, #e4e8ee); border-radius: 9px; padding: 2px 4px; }
.bcseg9 { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 7px; cursor: pointer; font-weight: 700; font-size: 12.5px; white-space: nowrap; position: relative; }
.bcseg9:hover { background: var(--bg, #f6f7f9); }
.bcseg9 small { color: var(--muted, #6b7686); font-weight: 400; font-size: 9px; text-transform: uppercase; letter-spacing: .4px; display: block; line-height: 1.1; }
.bccar9 { color: var(--muted, #6b7686); font-size: 9px; }
.bcsep9 { color: var(--muted, #6b7686); opacity: .5; }
.mxmenu9-pop { position: absolute; z-index: 40; background: var(--surface-1, #fff); border: 1px solid var(--grid, #e4e8ee); border-radius: 10px; box-shadow: 0 8px 22px rgba(15, 30, 60, .16); padding: 7px 9px; }
.mxmenu9-pop.bcmenu9 { left: 0; right: auto; top: calc(100% + 5px); min-width: 200px; max-height: 300px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.bcmi9 { padding: 6px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap; font-weight: 600; font-size: 13px; }
.bcmi9:hover { background: var(--bg, #f6f7f9); }
.bcmi9.on { background: #e8f1fd; color: #0f6bd7; }
.bcmi9 small { color: var(--muted, #6b7686); margin-left: 6px; font-weight: 400; }
.ccsep9 { width: 1px; height: 22px; background: var(--grid, #e4e8ee); margin: 0 2px; }
.ccmenu9 .mxmenu9-pop { top: calc(100% + 5px); }
#cc-appop9 { left: 0; right: auto; display: flex; flex-direction: column; gap: 7px; min-width: 230px; }
#cc-appop9:not([hidden]) { display: flex; }
.cchelp9 { right: 0; left: auto; width: 330px; font-size: 12.5px; display: flex; flex-direction: column; gap: 5px; }
.cchelp9:not([hidden]) { display: flex; }
.apr9 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ccq9h { border-radius: 50%; width: 26px; padding: 3px 0; text-align: center; }
.mxmenu9-pop[hidden] { display: none !important; }
.vptag9 { display: inline-block; background: var(--surface-2, #eef1f5); border-radius: 6px; padding: 1px 7px; font-size: 11.5px; font-weight: 600; }

/* 🩸 chip gán nhãn theo team (GĐ duyệt demo 03/09) */
.nhchip9 { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--grid, #e4e8ee); border-radius: 99px; padding: 3px 12px; cursor: pointer; font-weight: 600; font-size: 12.5px; margin: 2px 6px 2px 0; color: var(--text-secondary, #6b7686); white-space: nowrap; }
.nhchip9.on { background: #e8f1fd; border-color: #0f6bd7; color: #0f6bd7; }
.nhchip9.mut9.on { background: var(--surface-2, #eef1f5); border-color: var(--grid, #e4e8ee); color: var(--text-secondary, #6b7686); }

/* 👥 ô chọn team trong form nhân sự (GĐ duyệt demo 03/09) */
.tlist9 { border: 1px solid var(--grid, #e4e8ee); border-radius: 9px; max-height: 180px; overflow: auto; margin-top: 5px; background: var(--surface-1, #fff); }
.ti9 { padding: 6px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ti9:hover { background: var(--bg, #f6f7f9); }
.ti9.on { background: #e8f1fd; }
.ti9 b { font-size: 13px; }
.ti9 small { color: var(--text-secondary, #6b7686); white-space: nowrap; }
.tkq9 { margin-top: 6px; background: #e7f6ed; color: #0f9d58; border-radius: 8px; padding: 5px 11px; font-weight: 600; font-size: 12.5px; }

/* 📅 Đăng ký lịch làm việc (GĐ duyệt demo 03/09) */
.wk9 { background: var(--surface-2, #eef1f5); border: 1px solid var(--grid, #e4e8ee); border-radius: 9px; padding: 4px 13px; }
.lvt9 td, .lvt9 th { text-align: center; }
.lvc9 { cursor: pointer; position: relative; min-width: 84px; user-select: none; color: var(--text-secondary, #8b94a3); }
.lvc9:hover { outline: 2px solid #0f6bd7; }
.lvc9.lvn { background: #fdeaea; color: #c53030; font-weight: 700; }
.lvc9.lvs { background: #fdf3df; color: #b7791f; font-weight: 700; }
.lvc9.lvo { background: #f1eafd; color: #7c3aed; font-weight: 700; }
.lvc9.lvk { background: #e8f1fd; color: #0f6bd7; font-weight: 700; }
.lvc9.lvro9 { cursor: not-allowed; opacity: .75; }
.lvtoi9 { position: absolute; top: 1px; right: 3px; font-size: 9px; }
.lvlate9 { color: #c53030; font-size: 11px; font-weight: 700; }

/* 📅 GĐ 03/09: bảng giới hạn độ cao — nhiều thì cuộn, đầu bảng ghim */
.lvcuon9 { max-height: 62vh; overflow: auto; }
.lvcuon9 thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2, #eef1f5); }
#lv-tk > div > div { max-height: 190px; overflow: auto; }
.hlp9 .cchelp9 { right: 0; left: auto; top: calc(100% + 5px); }

/* 📥 xem trước nhập bảng công (GĐ duyệt demo 03/09) */
.ccntom9 { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pill9 { border-radius: 7px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; }
.p-ok9 { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-text); }
.p-wn9 { background: color-mix(in srgb, var(--warning) 20%, transparent); color: #8a6400; }
.p-bad9 { background: color-mix(in srgb, var(--critical, #c53030) 10%, transparent); color: var(--critical, #c53030); }
.p-mut9 { background: var(--bg-muted, #eef1f5); color: var(--text-muted); }
.ccnw9 { overflow: auto; max-height: 52vh; border: 1px solid var(--grid); border-radius: 10px; }
.ccnt9 { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.ccnt9 th { background: var(--bg-muted, #eef1f5); color: var(--text-muted); font-size: 10.5px; padding: 4px 6px; position: sticky; top: 0; text-align: center; white-space: nowrap; }
.ccnt9 td { border-top: 1px solid var(--grid); padding: 3px 6px; text-align: center; white-space: nowrap; }
.ccnt9 td:first-child, .ccnt9 th:first-child { text-align: left; position: sticky; left: 0; background: var(--bg-card, #fff); font-weight: 600; }
.ccnm9 { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good-text); font-weight: 800; }
.ccnd9 { background: color-mix(in srgb, var(--warning) 24%, transparent); color: #8a6400; font-weight: 800; }
.ccnb9 { background: var(--bg-muted, #eef1f5); color: var(--text-muted); }
.ccnl9 { background: color-mix(in srgb, var(--critical, #c53030) 12%, transparent); color: var(--critical, #c53030); font-weight: 800; }
.ccnt9 td.ccntr9 { outline: 2px dashed color-mix(in srgb, var(--critical, #c53030) 70%, transparent); outline-offset: -2px; color: var(--critical, #c53030); } /* ⬜ ô trống trong file → ghi 0 */

/* 🌐 OL làm online + 🚫 X tự động (GĐ duyệt demo 03/09) */
.cc-tb td.c.vol9 { background: color-mix(in srgb, #0a7ea4 12%, var(--surface-1)); color: #0a7ea4; font-weight: 800; }
.cc-tb td.c .ccol9t { font-weight: 800; letter-spacing: .3px; }
.cc-tb td.c .cb2.ol9 { color: #0a7ea4; font-weight: 800; }
.ccpen.ccol9 { color: #0a7ea4; }
.ccpen.ccol9.on { background: color-mix(in srgb, #0a7ea4 16%, transparent); border-color: #0a7ea4; }
.cc-tb td.c.vx.vxa9 { opacity: .55; font-style: italic; font-weight: 700; }
.modal.wide9 { max-width: min(1180px, 96vw); }
.modal.wide9 .ccnt9 td, .modal.wide9 .ccnt9 th { white-space: nowrap; }

/* ✏️ sửa hồ sơ tại chỗ + lọc đủ/thiếu (GĐ duyệt demo 04/09) */
.hr-du9 { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 10px; background: var(--surface-2, #f4f6f9); border: 1px solid var(--baseline); border-radius: 12px; margin-bottom: 10px; }
.hr-du9 .duLb9 { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); margin-right: 4px; }
.hr-du9 .dusep9 { width: 1px; height: 18px; background: var(--baseline); margin: 0 4px; }
.hr-du9 .duq9 { width: 26px; height: 26px; padding: 0; border-radius: 50%; font-weight: 800; margin-left: auto; }
.duchip9 { padding: 4px 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.duchip9 b { font-weight: 800; margin-left: 2px; }
.duchip9.th { color: #b7690a; } .duchip9.th.on { background: #b7690a; border-color: #b7690a; color: #fff; }
.duchip9.du { color: #1c7c3f; } .duchip9.du.on { background: #1c7c3f; border-color: #1c7c3f; color: #fff; }
.ed9 { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; margin: -2px -6px; border-radius: 7px; border: 1px solid transparent; cursor: pointer; max-width: 100%; }
.ed9:hover { border-color: var(--baseline); background: var(--surface-1); }
.ed9:hover::after { content: "✎"; font-size: 10px; color: var(--text-secondary); }
.ed9.miss9 { margin: 0; border: 1px dashed #b7690a; color: #b7690a; background: color-mix(in srgb, #b7690a 10%, var(--surface-1)); font-size: 11.5px; font-weight: 600; }
.ed9.miss9::after { content: ""; }
.edin9 { font: inherit; font-size: 12.5px; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--series-1); border-radius: 6px; padding: 2px 6px; outline: none; max-width: 240px; }
.edoff9 { display: inline-flex; gap: 4px; align-items: center; }
.thmiss9 { font-size: 11px; color: #b7690a; font-weight: 600; }
tr.rowmiss9 td:first-child { box-shadow: inset 3px 0 0 #b7690a; }
.spc9 { display: inline-flex; gap: 4px; align-items: baseline; border: 1px solid var(--baseline); border-radius: 7px; padding: 1px 7px; font-size: 11.5px; margin: 1px 3px 1px 0; white-space: nowrap; cursor: pointer; opacity: .45; }
.spc9:hover { opacity: 1; border-color: var(--series-1); }
.spc9.on { opacity: 1; border-color: var(--series-1); background: color-mix(in srgb, var(--series-1) 12%, var(--surface-1)); font-weight: 700; }
.spc9.tm { opacity: 1; border-style: dashed; }
.spc9 i { font-style: normal; font-size: 9.5px; opacity: .6; }
.permtag.adm9 { background: #1f5fbf; color: #fff; border-color: #1f5fbf; }
/* 🧧 04/09 (GĐ duyệt demo công phép): sổ phép tích lũy — bảng công 3 cột cuối + sổ năm + hồ sơ */
.cc-tb td.ccpcon9 b { color: var(--good-text); }
.ccpkl9 { display: inline-block; margin-left: 3px; font-size: 10px; color: var(--critical, #c53030); font-weight: 800; }
.ccpcn9 { font-size: 11px; margin-left: 2px; }
.pnT9 td { text-align: center; white-space: nowrap; font-size: 12px; }
.pnT9 td .pnP9, .pnT9 p .pnP9 { color: var(--good-text); font-weight: 800; }
.pnP9 { color: var(--good-text); font-weight: 800; }
.pnU9 { color: var(--critical, #c53030); font-weight: 800; margin-left: 3px; }
.pnK9 { color: var(--critical, #c53030); font-weight: 700; margin-left: 3px; font-size: 11px; }
.pnK9 i { font-style: normal; font-size: 9px; margin-left: 1px; }
.pnG9 { color: #8a6400; background: color-mix(in srgb, var(--warning) 22%, transparent); border-radius: 6px; padding: 0 5px; font-weight: 800; margin-left: 3px; }
.vtTv9 { color: var(--warning-text, #8a6400); }
/* 🧭 05/09 (GĐ duyệt demo): BỘ CHỌN VỊ TRÍ 3 cột Nhánh → Phòng → Team */
.xp9 { background: var(--surface-1, #fff); border: 1px solid var(--grid, #dfe4ec); border-radius: 14px; overflow: hidden; width: min(880px, 100%); font-size: 13px; }
.xp9.xpf9 { position: absolute; z-index: 1200; width: min(880px, calc(100vw - 16px)); box-shadow: 0 14px 40px rgba(0, 0, 0, .18); }
.xph9 { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--grid); flex-wrap: wrap; }
.xpc9 { display: grid; grid-template-columns: 1fr 1.25fr 1.25fr; min-height: 220px; }
.xpcol9 { border-right: 1px solid var(--grid); display: flex; flex-direction: column; min-width: 0; }
.xpcol9:last-child { border-right: 0; }
.xpct9 { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); padding: 8px 12px 4px; font-weight: 700; }
.xpcol9 input { margin: 0 10px 6px; border: 1px solid var(--grid); border-radius: 8px; padding: 5px 9px; font: inherit; font-size: 12.5px; background: var(--bg, #f6f7f9); color: inherit; }
.xpcol9 ul { list-style: none; margin: 0; padding: 0 6px 8px; overflow: auto; max-height: 250px; }
.xpcol9 li { padding: 6px 10px; border-radius: 9px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.xpcol9 li:hover { background: var(--bg, #f6f7f9); }
.xpcol9 li.on { background: #e8f1fd; color: #1f5fbf; font-weight: 700; }
.xpcol9 li.act { border: 1px dashed var(--grid); margin-top: 4px; color: var(--text-secondary); font-size: 12.5px; }
.xpcol9 li.act.on { color: #1f5fbf; border-color: #1f5fbf; }
.xpcol9 li small { color: var(--text-secondary); font-weight: 500; font-size: 11px; }
.xpcol9 li .n { background: var(--bg, #f6f7f9); color: var(--text-secondary); border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 700; }
.xpe9 { color: var(--text-secondary); font-size: 12.5px; padding: 8px 12px; }
.xpft9 { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--grid); background: var(--bg, #f6f7f9); flex-wrap: wrap; }
.xpft9 [data-xres] b { color: var(--good-text, #1c7c3f); }
.ed9.on9 { outline: 2px solid #1f5fbf; }
/* 💵 05/09 (GĐ duyệt demo): bảng lương GOM nhiều phòng — chọn đến đâu ra đến đó */
.lggomtop9 { margin-bottom: 10px; }
.lgsec9 { border: 1px solid var(--grid); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--surface-1); }
.lgsech9 { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 14px; background: color-mix(in srgb, var(--series-1) 5%, var(--surface-1)); font-weight: 800; font-size: 13px; cursor: pointer; flex-wrap: wrap; }
.lgsech9 .k9 { font-size: 10.5px; color: var(--text-muted); letter-spacing: .05em; }
.lgsech9 .n9 { color: var(--text-secondary); font-weight: 500; font-size: 12.5px; }
.lgsech9 .car9 { font-style: normal; display: inline-block; transition: transform .15s; }
.lgsec9.gap9 .lgsech9 .car9 { transform: rotate(-90deg); }
.lgsec9.gap9 .lgsecb9 { display: none; }
.lgkind9 { font-size: 10px; border-radius: 999px; padding: 1px 7px; font-weight: 700; margin-left: 8px; background: var(--bg, #f6f7f9); color: var(--text-secondary); }
.lgkind9.lk-mkt { background: #fde9d6; color: #a4531b; } .lgkind9.lk-vd { background: #dcf3ec; color: #1b6f57; } .lgkind9.lk-cb { background: #e9e4fb; color: #5b3fb5; }
.lgkind9.lk-sale { background: #fce4ec; color: #a4204a; } .lgkind9.lk-cskh { background: #e0f0ff; color: #1f5fbf; }
/* 📒 05/09 (GĐ duyệt demo): bảng lương Sale / Chăm sóc theo 01/S99-2026 + thanh sổ đơn Foxia */
.sdbar9 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 12px; border-bottom: 1px solid var(--grid); font-size: 12px; }
.sdchip9 { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px; background: var(--bg, #f6f7f9); color: var(--text-secondary); font-weight: 600; }
.sdchip9.on { background: color-mix(in srgb, var(--good-text, #1c7c3f) 12%, var(--surface-1)); color: var(--good-text, #1c7c3f); }
.sdw9 { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; background: color-mix(in srgb, #b7690a 12%, var(--surface-1)); color: #b7690a; font-weight: 700; font-size: 11.5px; }
.sdw9.sdrun9 { background: color-mix(in srgb, var(--series-1) 12%, var(--surface-1)); color: var(--series-1); }
.sdbtn9 { border: 1px solid #b7690a; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700; }
.sdbtn9:hover { background: #b7690a; color: #fff; }
.lgt2 td.sdno9 .lg-in { border-color: #b7690a; background: color-mix(in srgb, #b7690a 7%, var(--surface-1)); }
.scbac9 { font: inherit; font-size: 11px; font-weight: 700; border: 1px dashed var(--grid); border-radius: 999px; padding: 0 6px; background: var(--surface-1); color: var(--text-secondary); max-width: 118px; cursor: pointer; }
.scbac9.ed { border-style: solid; border-color: var(--series-1); color: var(--series-1); }
.scsoi9 { font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.scsoi9.ok { color: var(--good-text, #1c7c3f); }
.scsoi9.wn { color: #b7690a; }
.scsoi9.bad { color: var(--critical); font-weight: 800; }
.sdmap9 td, .sdmap9 th { text-align: right; }
.sdmap9 select { font: inherit; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-1); color: inherit; max-width: 240px; }
.sdmap9 .sdq9 { font: inherit; font-size: 12px; width: 120px; padding: 3px 6px; margin-right: 4px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-1); color: inherit; }
.scc9 .lgph2 { margin-top: 12px; }
.scc9 .scc-n { font: inherit; font-weight: 800; width: 56px; text-align: right; border: 1px dashed var(--grid); border-radius: 7px; padding: 2px 6px; background: var(--surface-1); color: var(--text-primary); }
.scc2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.scc2 .lb9 { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.scco9 input { width: 44px; }
.pbg9 .sc9c { text-align: right; }
/* 📒 05/09 (GĐ duyệt demo): Doanh số Foxia toàn tài khoản — tab Kết nối API */
.sdfull9 .lgseg9 .sdvseg9 { margin: 0; }
.sdtk9 td.l { text-align: left; }
.sdtk9 .nm9 b, .sdmx9 .nm9 b { display: block; font-weight: 700; }
.sdtk9 .nm9 small, .sdmx9 .nm9 small { display: block; color: var(--text-muted); font-size: 10.5px; font-weight: 500; }
.tag9k { font-size: 10px; border-radius: 999px; padding: 1px 7px; font-weight: 700; background: var(--bg, #f6f7f9); color: var(--text-secondary); }
.tag9k.k-sale { background: #fce4ec; color: #a4204a; } .tag9k.k-cskh { background: #e0f0ff; color: #1f5fbf; } .tag9k.k-vd { background: #dcf3ec; color: #1b6f57; } .tag9k.k-mkt { background: #fde9d6; color: #a4531b; } .tag9k.k-kho { background: #ece9e1; color: #6b5a3a; }
.sdgan9 { border: 1px solid #b7690a; color: #b7690a; font-weight: 700; background: color-mix(in srgb, #b7690a 8%, var(--surface-1)); }
.sdgan9:hover { background: #b7690a; color: #fff; }
.sdlink9 { border: none; background: none; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 11px; }
.sdlink9:hover { color: var(--series-1); }
.sdmx9 th { text-align: right; white-space: nowrap; }
.sdmx9 th:first-child { text-align: left; }
.sdmx9 th .fxu { display: block; font-weight: 400; font-size: 10px; text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
.sdmx9 td { text-align: right; white-space: nowrap; vertical-align: top; }
.sdmx9 td:first-child { text-align: left; }
.sdmx9 td .sub { display: block; font-size: 10.5px; color: var(--text-muted); }
.sdmx9 td.c1 { background: color-mix(in srgb, var(--series-1) 6%, var(--surface-1)); }
.sdmx9 td.c2 { background: color-mix(in srgb, var(--series-1) 14%, var(--surface-1)); }
.sdmx9 td.c3 { background: color-mix(in srgb, var(--series-1) 24%, var(--surface-1)); font-weight: 700; }
.sdmx9 th:first-child, .sdmx9 td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface-1); box-shadow: 6px 0 8px -6px rgba(15, 30, 60, .16); }
.sdmx9 thead th { position: sticky; top: 0; z-index: 3; background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1)); }
.sdmx9 thead th:first-child { z-index: 4; }
.sdtk9 thead th { position: sticky; top: 0; z-index: 3; }
/* 📌 06/09 (GĐ duyệt demo): ma trận ghim trái tên · ghim phải 3 cột tổng (mỗi ô 3 số) · ghim trên tiêu đề · ghim dưới dòng tổng — nền đặc, lớp trên, hết đè số */
:root { --cs9: #7a3fb0; }
@media (prefers-color-scheme: dark) { :root { --cs9: #c39ae8; } }
.sdmx9 th.pl, .sdmx9 td.pl { position: sticky; left: 0; z-index: 2; background: var(--surface-1); box-shadow: 6px 0 8px -6px rgba(15, 30, 60, .18); min-width: 170px; max-width: 200px; white-space: normal; }
.sdmx9 thead th.pl { top: 0; z-index: 6; background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1)); }
.sdmx9 th.pr, .sdmx9 td.pr { position: sticky; z-index: 2; min-width: 150px; width: 150px; background: var(--surface-1); padding: 5px 10px; vertical-align: middle; }
.sdmx9 thead th.pr { top: 0; z-index: 5; }
.sdmx9 .r3 { right: 0; } .sdmx9 .r2 { right: 150px; } .sdmx9 .r1 { right: 300px; }
.sdmx9 .pr.first { box-shadow: -6px 0 8px -6px rgba(15, 30, 60, .18); }
.sdmx9 .g-sale { background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)) !important; }
.sdmx9 .g-cs { background: color-mix(in srgb, var(--cs9) 10%, var(--surface-1)) !important; }
.sdmx9 .g-all { background: color-mix(in srgb, var(--series-2) 10%, var(--surface-1)) !important; }
.sdmx9 th.g-sale { color: var(--series-1); } .sdmx9 th.g-cs { color: var(--cs9); } .sdmx9 th.g-all { color: var(--series-2); }
.sdmx9 tr.lgsum td.g-sale, .sdmx9 tr.lgsum td.g-cs, .sdmx9 tr.lgsum td.g-all { filter: brightness(.96); }
.sdmx9 .st { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: baseline; font-size: 12px; text-align: right; }
.sdmx9 .st i { font-style: normal; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; text-align: left; }
.sdmx9 .st b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sdmx9 .st b.tc { font-weight: 800; font-size: 12.5px; }
.sdmx9 tr.lgsum td { position: sticky; bottom: 0; z-index: 3; background: color-mix(in srgb, var(--series-1) 6%, var(--surface-1)); }
.sdmx9 tr.lgsum td.pl { z-index: 6; } .sdmx9 tr.lgsum td.pr { z-index: 5; }
.lgt2.sdtk9 th:last-child, .lgt2.sdtk9 td:last-child { position: static; box-shadow: none; } /* không ghim cột cuối — bảng cuộn ngang bình thường */
.lgt2.sdtk9 thead th:last-child { position: sticky; right: auto; }
.sdtk9 tr.lggrp9 td { background: color-mix(in srgb, var(--series-1) 6%, var(--surface-1)) !important; font-weight: 800; font-size: 11px; letter-spacing: .05em; color: var(--text-secondary); text-align: left; padding: 7px 10px; }
.sdtk9 tr.lggrp9 td .n9 { float: none; margin-left: 14px; font-weight: 500; letter-spacing: 0; font-size: 12px; }
.sdtk9 tr.lggrp9 td .n9 b { font-weight: 800; }
.lggom9 .lgbar, .lggom9 .lgpbar, .lggom9 .lgkpi, .lggom9 .lglocked { display: none; }
.lggom9 > .card.lgcard { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
/* 🏬 05/09: mã văn phòng lạ trong danh mục — gộp về VP chuẩn */
.vpla9 { margin-top: 12px; padding: 10px 12px; border: 1px dashed #b7690a; border-radius: 10px; background: color-mix(in srgb, #b7690a 8%, var(--surface-1)); font-size: 13px; }
.vplar9 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.vplar9 select { font: inherit; font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-1); color: inherit; }
/* 🧾 05/09 (GĐ): bảng Thuế TNCN kiểu quốc tế — không tô màu, chỉ đường kẻ mảnh + chữ đậm ở số quan trọng */
.tncnt th.tcgt { background: transparent; color: var(--text-muted); border-top: 0; border-bottom: 1px solid var(--grid); }
.tncnt td.tcgt { background: transparent; }
.tncnt th.tcthue { color: var(--text-muted); }
.tncnt td.tcthue { background: transparent; color: var(--text-primary); }
.tncnt td.tcthue b { font-weight: 800; }
.tncnt th:first-child, .tncnt td:first-child { border-right: 1px solid var(--grid); }
.tncnt th.tcgt:first-of-type, .tncnt td.tcgt:first-of-type { border-left: 1px solid var(--grid); }
.tncnt th.tcgt:last-of-type, .tncnt td.tcgt:last-of-type { border-right: 1px solid var(--grid); }
.tncnt .exp { color: var(--text-muted); font-weight: 500; }
/* 🧭 05/09 (GĐ báo "lọc đang bị che"): thẻ tổng chế độ gom không cắt menu đường dẫn */
.lgcard.lggomtop9 { overflow: visible; position: relative; z-index: 6; }
.lgsec9 { position: relative; z-index: 1; }
/* 💵 05/09 (GĐ duyệt): bảng lương GỘP 2 bảng — dòng tiêu đề nhóm phòng trong bảng */
.lggomt9 tr.lggrp9 td { background: color-mix(in srgb, var(--series-1) 6%, var(--surface-1)); font-weight: 800; font-size: 11px; letter-spacing: .05em; color: var(--text-secondary); text-align: left; cursor: pointer; padding: 7px 10px; }
.lggomt9 tr.lggrp9 td .k9 { color: var(--text-muted); }
.lggomt9 tr.lggrp9 td .n9 { float: right; font-weight: 500; letter-spacing: 0; font-size: 12px; }
.lggomt9 tr.lggrp9 td .n9 b { font-weight: 800; }
.lggomt9 tr.lggrp9 .car9 { font-style: normal; display: inline-block; transition: transform .15s; }
.lggomt9 tr.lggrp9.gap9 .car9 { transform: rotate(-90deg); }
.lggomt9 tr.gomhide9 { display: none; }
/* 🧾 05/09 (GĐ báo "tiêu đề bảng thuế lộn xộn"): 2 hàng tiêu đề đều nền nhạt, canh giữa theo chiều dọc, nhóm GIẢM TRỪ canh giữa */
.tncnt thead th { background: color-mix(in srgb, var(--series-1) 5%, var(--surface-1)); vertical-align: middle; font-size: 10.5px; letter-spacing: .04em; color: var(--text-muted); border-bottom: 1px solid var(--grid); }
.tncnt thead tr:first-child th[colspan] { text-align: center; border-bottom: 1px solid var(--grid); }
.tncnt thead th.tcgt { background: color-mix(in srgb, var(--series-1) 5%, var(--surface-1)); }
.tncncard h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tncncard h3 .sub { font-weight: 500; }
.tncncard h3 .lgq9 { margin-left: 2px; }
/* 📌 05/09 (GĐ): tiêu đề 2 bảng lương RÕ NÉT + GHIM khi cuộn; bảng thuế giới hạn chiều cao, cuộn trong, ghim tiêu đề */
.lgt2 thead tr.lggr9 th { height: 26px; box-sizing: border-box; }
.lgt2 thead tr:not(.lggr9) th { top: 26px !important; font-size: 11.5px; font-weight: 800; color: var(--text-primary); letter-spacing: .04em; }
.lgt2 thead tr:not(.lggr9) th:first-child, .lgt2 thead tr:not(.lggr9) th:last-child { top: 26px !important; }
.lgscroll:has(.tncnt) { max-height: calc(100vh - 165px); overflow: auto; overscroll-behavior: contain; }
.tncnt thead th { position: sticky; top: 0; z-index: 5; font-size: 11.5px; font-weight: 800; color: var(--text-primary); background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)); box-shadow: 0 2px 6px -3px rgba(15, 30, 60, .25); }
.tncnt thead tr:first-child th { height: 26px; box-sizing: border-box; }
.tncnt thead tr:first-child th[colspan] { top: 0; font-size: 10px; letter-spacing: .14em; color: color-mix(in srgb, var(--series-1) 70%, var(--text-secondary)); }
.tncnt thead tr:nth-child(2) th { top: 26px; }
.tncnt thead tr:first-child th[rowspan] { vertical-align: middle; }
.tncnt th:first-child, .tncnt td:first-child { position: sticky; left: 0; z-index: 3; background: var(--surface-1); box-shadow: 6px 0 8px -6px rgba(15, 30, 60, .16); }
.tncnt thead th:first-child { z-index: 7; background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)); }
.tncnt td { background: var(--surface-1); }
.tncnt tr.lgsum td { background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)); }
.tncnt thead th.tcgt, .tncnt thead th.tcthue { background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)) !important; }
/* 🌳 cây thăng tiến Sale/CSKH (GĐ duyệt demo 06/09) */
.sccay9 { border: 0; background: transparent; cursor: pointer; font-size: 13px; padding: 0 2px; vertical-align: middle; }
.crung9 { display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; align-items: center; border: 1px solid var(--grid); border-radius: 8px; padding: 8px 12px; margin-top: 8px; font-size: 12.5px; }
.crung9.cur { border-color: var(--series-1); background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1)); }
.crung9.next { border-style: dashed; }
.crung9 .t b { display: block; font-weight: 700; }
.crung9 .t small { display: block; color: var(--text-muted); font-size: 10.5px; }
.crung9 .t .lb { display: inline-block; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 800; border-radius: 4px; padding: 1px 6px; background: var(--surface-2, #eef3fb); color: var(--text-secondary); margin-bottom: 2px; }
.crung9.cur .t .lb { background: var(--series-1); color: #fff; }
.crung9 .v { color: var(--text-secondary); }
.crung9 .v .sub, .cnote9 { display: block; font-size: 11px; color: var(--text-muted); }
.cbar9 { height: 7px; border-radius: 4px; background: var(--surface-2, #e3ebf7); overflow: hidden; margin: 4px 0 2px; }
.cbar9 i { display: block; height: 100%; background: var(--good-text, #1c7c3f); }
.cbar9 i.w { background: #d9822b; }
.ctick9 { margin-top: 10px; width: 100%; font-size: 12px; }
.ctick9 th, .ctick9 td { text-align: center; padding: 4px 6px; white-space: nowrap; }
.ctick9 th:first-child, .ctick9 td:first-child { text-align: left; }
.ctick9 td.y { color: var(--good-text, #1c7c3f); font-weight: 800; }
.ctick9 td.x { color: var(--critical); font-weight: 800; }
.ctick9 td.d { color: var(--text-muted); }
.ctick9 td.bm { font-size: 10.5px; font-weight: 700; color: var(--series-1); }
.ctick9 td.bm.up { color: var(--good-text, #1c7c3f); }
.ctick9 td.bm.dn { color: var(--critical); }
.cnote9 { border-left: 3px solid #d9822b; padding-left: 8px; margin-top: 8px; }
/* dòng nhóm phòng trong bảng lương gộp nhánh Sale/CSKH (06/09) */
.lgt tr.lggrp9 td { background: color-mix(in srgb, var(--series-1) 6%, var(--surface-1)) !important; font-weight: 800; font-size: 11px; letter-spacing: .05em; color: var(--text-secondary); text-align: left; position: sticky; left: 0; }
.lgt tr.lggrp9 td .n9 { margin-left: 12px; font-weight: 500; letter-spacing: 0; font-size: 12px; color: var(--text-muted); }

/* 🌳 cây Sale/CSKH theo khung MKT (GĐ duyệt 06/09) */
.choi9 { float: right; display: inline-block; width: 22px; height: 22px; line-height: 20px; text-align: center; border: 1px solid var(--grid); border-radius: 50%; font-size: 12px; color: var(--text-secondary); cursor: help; margin-left: 8px; }
.ckind9 { display: inline-block; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 800; border-radius: 4px; padding: 1px 6px; margin-right: 6px; }
.ckind9.s { background: color-mix(in srgb, var(--series-1) 12%, var(--surface-1)); color: var(--series-1); }
.ckind9.c { background: color-mix(in srgb, var(--cs9) 12%, var(--surface-1)); color: var(--cs9); }
.ctree9 { position: relative; padding-left: 24px; }
.ctree9:before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--grid); }
.ctree9 .crung9 { position: relative; display: block; margin-top: 0; margin-bottom: 8px; }
.ctree9 .crung9:before { content: ""; position: absolute; left: -22px; top: 13px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface-1); border: 2px solid var(--grid); }
.ctree9 .crung9.cur:before { background: var(--series-1); border-color: var(--series-1); }
.ctree9 .crung9.next { border: 1.5px dashed var(--series-1); }
.ctree9 .crung9.next:before { border-color: var(--series-1); }
.ctree9 .crung9.far { opacity: .85; }
.crung9 .hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.crung9 .hd b { font-size: 13.5px; }
.crung9 .hd .lb { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 800; border-radius: 4px; padding: 1px 6px; background: var(--surface-2, #eef3fb); color: var(--text-secondary); }
.crung9 .hd .lb:empty { display: none; }
.crung9.cur .hd .lb { background: var(--series-1); color: #fff; }
.crung9 .hd .pay { margin-left: auto; color: var(--text-muted); font-size: 11.5px; }
.crung9 .c80 { font-style: normal; color: #b7690a; }
.ccond9 { margin-top: 6px; font-size: 12.5px; }
.ccond9 .row { display: flex; justify-content: space-between; gap: 10px; color: var(--text-secondary); }
.cres9 { display: block; font-size: 11.5px; font-weight: 600; }
.cres9.ok { color: var(--good-text, #1c7c3f); } .cres9.no { color: var(--critical); }
.cbar9 i.b { background: var(--series-1); }
.ctl9 { margin-top: 8px; font-size: 12.5px; }
.ctl9 .t { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; font-weight: 800; color: var(--text-muted); margin-bottom: 3px; }
.cit9 { display: flex; align-items: center; gap: 8px; padding: 2px 0; color: var(--text-secondary); }
.cit9 b { font-weight: 600; }
.cpill9 { margin-left: auto; border: 1px solid var(--grid); border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--surface-1); cursor: pointer; }
.cpill9.on { border-color: var(--good-text, #1c7c3f); color: var(--good-text, #1c7c3f); background: color-mix(in srgb, var(--good-text, #1c7c3f) 10%, var(--surface-1)); }
.ctick9 td.y span, .ctick9 td.x span, .ctick9 td.d span { display: inline-block; width: 22px; height: 22px; line-height: 20px; border-radius: 5px; font-weight: 800; border: 1.5px solid transparent; }
.ctick9 td.y span { border-color: var(--good-text, #1c7c3f); background: color-mix(in srgb, var(--good-text, #1c7c3f) 10%, var(--surface-1)); }
.ctick9 td.x span { border-color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, var(--surface-1)); }
.ctick9 td.d span { border-color: var(--grid); }
.ctick9 td.nac { font-size: 10.5px; font-weight: 800; color: var(--series-1); }
.ctick9 td.nac.w { color: #b7690a; } .ctick9 td.nac.r { color: var(--critical); } .ctick9 td.nac.g { color: var(--good-text, #1c7c3f); }
.ctick9 td small { color: var(--text-muted); font-weight: 500; }
table.lgt.ctick9 { min-width: 0; width: 100%; table-layout: fixed; }
.ctick9 th:first-child, .ctick9 td:first-child { width: 42%; white-space: normal; text-align: left; }
.ctick9 th, .ctick9 td { padding: 4px 4px; }
/* bậc Sale/CSKH gọn 1 dòng như MKT (GĐ 06/09): màu theo máy dò, chữ giải thích nằm trong title */
.scbac9.sb-ok, .lgbac.sb-ok { color: var(--good-text, #1c7c3f); }
.scbac9.sb-wn, .lgbac.sb-wn { color: #b7690a; }
.scbac9.sb-bad, .lgbac.sb-bad { color: var(--critical); font-weight: 800; }
.wsub .vdprod { margin-left: 4px; }
/* ⚙ Cơ chế Sale/CSKH theo khung MKT — bảng thang bậc, ô đơn vị ngoài */
.cfrow.c4 { grid-template-columns: repeat(4, 1fr); }
.scc9 .u9 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.scc9 .u9 span { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-right: 6px; }
.scc9 .ladt.sct9 td.l { text-align: left; white-space: nowrap; font-weight: 800; }
.scc9 .ladt.sct9 td.l small { font-weight: 600; color: var(--text-muted); }
.scc9 .ladt.sct9 th small { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.scc9 .ladt.sct9 td.tot9 { font-weight: 900; color: var(--series-1); background: color-mix(in srgb, var(--series-1) 6%, var(--surface-1)); }
.scc9 .ladt.sct9 td.sub { color: var(--text-muted); font-weight: 600; }
.scc9 .ladt.sct9 input { font: inherit; font-weight: 800; text-align: right; border: 1px dashed var(--grid); border-radius: 7px; padding: 3px 6px; background: var(--surface-1); color: var(--text-primary); width: 70px; }
.scc9 .ladt.sct9 input[type="radio"] { width: auto; }
.scc9 .field > input:not(.scc-n) { width: 100%; box-sizing: border-box; }
.scc9 .scco9 td.l { text-align: left; white-space: nowrap; }
.scc9 .lgseg9 { font-size: 12px; }
@media (max-width: 900px) { .cfrow.c4, .cfrow.c3 { grid-template-columns: 1fr 1fr; } }
/* 🌙 07/09: buổi tối Sale/CSKH — ô nhập giờ + số trong hộp chấm công, 🌙 đỏ khi hụt */
.cctoi9 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.cctoi9 label { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.cctoi9 input { width: 92px; font: inherit; font-weight: 800; text-align: right; border: 1px dashed var(--grid); border-radius: 7px; padding: 3px 7px; background: var(--surface-1); color: var(--text-primary); }
.cctoi9 #cc-tg { width: 56px; }
.cctoikq9 { font-size: 12px; font-weight: 800; }
.cctoikq9.ok { color: var(--ok, #1d8a3f); } .cctoikq9.bad { color: var(--critical, #c53030); }
.ccbm9.bad9 { filter: hue-rotate(300deg) saturate(3); }

/* ============ 🎨 BẢNG CÔNG v3 — KẺ Ô CHUẨN NHƯ TRANG TÍNH (GĐ duyệt 07/09): lưới 1px rõ nét
   mọi ô, số đậm giữa ô, CN tô xám nhạt, 🌙 bám góc ô, quét vùng kiểu Tối giản ============ */
.cc-tb { border: 1px solid var(--grid); }
.cc-tb td { border: 1px solid var(--grid); }
.cc-tb td.c { height: 40px; min-width: 38px; padding: 0; font-weight: 700; font-size: 13px; color: var(--text-primary); }
.cc-tb td.nm { border-right: 2px solid var(--grid); }
.cc-tb thead th { border: 1px solid var(--grid); border-bottom: 2px solid var(--grid2, var(--grid)); }
.cq9 { width: auto; height: auto; border-radius: 0; background: transparent !important; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.cc-tb td.v05 .cq9 { color: #8a6400; font-size: 12.5px; }
.cc-tb td.v0 .cq9 { color: var(--critical); }
.cc-tb td.vcn0 .cq9 { color: var(--text-muted); }
.cc-tb td.vx .cq9 { color: var(--text-muted); }
.cc-tb td.gioc .cq9 { color: var(--series-1); }
.cc-tb .ccgo9 { font-size: 11.5px; }
.cc-tb .ct2 { font-size: 11.5px; }
.cc-tb .cb2 { font-size: 9px; }
.cc-tb td.c:hover .cq9 { outline: none; }
/* 🖱 rê chuột lên ô (GĐ chốt 07/09): ô đang trỏ như Excel — viền 2px xanh lá + chấm vuông góc phải dưới, không đổi nền */
.cc-tb td.c:hover { box-shadow: inset 0 0 0 2px var(--xl9); z-index: 2; }
.cc-tb td.c:hover::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px; background: var(--xl9); border: 1px solid var(--surface-1); z-index: 3; }
.cc-tb td.cn2, .cc-tb td.cn2.v05, .cc-tb td.cn2.v0, .cc-tb td.cn2.gioc, .cc-tb td.cn2.vx { background: color-mix(in srgb, var(--text-muted) 9%, var(--surface-1)); }
.ccbm9 { top: 1px; right: 2px; font-size: 9px; }
.ccbs9 { bottom: 1px; right: 2px; font-size: 8.5px; }
.cc-tb td.tot, .cc-tb td.phep { border-left: 1px solid var(--grid); }
.cc-tb td.c { vertical-align: middle; }
.cc-tb td.c .cq9 { width: 100%; height: 38px; }
/* 📐 hộp sửa ô chấm công: không vượt màn hình, dài quá thì cuộn trong hộp */
#cc-pop { max-height: calc(100vh - 16px); overflow-y: auto; }

/* 🚪 tài khoản đã nghỉ việc: dải báo chỉ xem ghim dưới màn hình */
#roxem9 { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 120; background: color-mix(in srgb, var(--warning, #b45309) 14%, var(--surface-1)); color: var(--text-primary); border: 1px solid color-mix(in srgb, var(--warning, #b45309) 45%, transparent); border-radius: 10px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; box-shadow: 0 8px 22px -10px rgba(0,0,0,.35); white-space: nowrap; }
#roxem9 b { color: var(--warning, #b45309); }
/* 📣 Truyền thông (GĐ duyệt demo 07/09): 4 mục con · thẻ bài kịch bản/content/ảnh */
.bqmuc9 { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.bqmuc9 button { border: 1px solid var(--grid); background: var(--surface-1); color: var(--text-muted); font: inherit; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.bqmuc9 button.on { background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)); border-color: var(--series-1); color: var(--series-1); }
.bqmuc9 button b { background: var(--critical, #c53030); color: #fff; font-size: 10.5px; border-radius: 8px; padding: 0 6px; line-height: 1.6; }
.bqttl9 { font-weight: 800; font-size: 14px; margin: 2px 0; }
.bqanh9 { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.bqanh9 img { width: 108px; height: 108px; object-fit: cover; border-radius: 9px; border: 1px solid var(--grid); display: block; }
.bqanh9 span { position: relative; display: inline-block; }
.bqanh9 span button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--grid); background: var(--surface-1); color: var(--critical, #c53030); font-size: 11px; font-weight: 800; cursor: pointer; line-height: 1; }
.page-head h2 .choi9 { margin-left: 6px; vertical-align: middle; }

/* 🚨 phạt: lần đã xí xóa ẩn hẳn — GĐ mở mục thu gọn mới thấy để tính lại */
.fxx9 { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.fxx9 summary { cursor: pointer; font-weight: 600; }
.fxx9 .hrow { opacity: .75; }

/* 🔑 tài khoản gõ tay (07/09): danh sách tài khoản theo phòng */
.tk9 tr.grp td { display: flex; align-items: center; gap: 8px; text-align: left; background: var(--surface-2, #f4f6f9); font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.tk9 tr.grp td small { font-weight: 600; text-transform: none; letter-spacing: 0; }
.tk9 td { text-align: left; }
.tk9 td.who b { display: block; } .tk9 td.who small { color: var(--text-muted); }
.tk9 td.u, .tk9 .pw, .mono9 { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; }
.tk9 td.u { color: var(--series-1); white-space: nowrap; }
.tk9 .st { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 1px 7px; }
.tk9 .st.mac { background: color-mix(in srgb, var(--warning) 16%, transparent); color: #8a6400; } .tk9 .st.doi { background: color-mix(in srgb, var(--good, #1d8a3f) 14%, transparent); color: var(--good, #1d8a3f); }
.tk9 td.act button { border: 1px solid var(--grid); background: var(--surface-1); border-radius: 7px; font: inherit; font-size: 11.5px; font-weight: 700; padding: 2px 7px; cursor: pointer; color: var(--text-muted); }
.tk9-msg { margin: 10px 0 0; background: var(--surface-2, #f4f6f9); border: 1px solid var(--grid); border-radius: 10px; padding: 10px 12px; font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; max-height: 24vh; overflow: auto; color: var(--text-secondary); }
/* 🛠 07/09 (GĐ báo bảng công lỗi hiển thị): rê dòng → nền hàng phải ĐỤC, cột tên ghim không để ô ngày cuộn phía sau lộ ra */
.cc-tb tbody tr:hover td { background: color-mix(in srgb, var(--series-1) 5%, var(--surface-1)); }
.cc-tb tbody tr:hover td.nm { background: color-mix(in srgb, var(--series-1) 5%, var(--surface-1)); }
.cc-tb tbody tr:hover td.cn2 { background: color-mix(in srgb, var(--text-muted) 12%, var(--surface-1)); }
.cc-tb tbody tr:hover td.msel { background: color-mix(in srgb, var(--xl9) 12%, var(--surface-1)) !important; }
.cc-tb tbody tr:hover td.msel.mselA { background: var(--surface-1) !important; }

/* ✍ ghi chú tại chỗ kịch bản/content (GĐ duyệt demo 07/09) */
.bqgcbox9 { max-width: none; }
.bqdoc9 { position: relative; white-space: pre-wrap; font-size: 13.5px; line-height: 1.7; background: var(--surface-2, #f4f6f9); border-radius: 9px; padding: 9px 12px; }
.bqdoc9 mark.bqm9 { background: #ffe58a; color: inherit; border-radius: 3px; padding: 0 2px; border-bottom: 2px solid #b45309; cursor: help; }
.bqdoc9 mark.bqm9.cam { background: #ffb3b3; border-bottom-color: var(--critical, #c53030); }
.bqdoc9 mark.bqm9.done { background: color-mix(in srgb, var(--good, #1d8a3f) 18%, var(--surface-1)); border-bottom-color: var(--good, #1d8a3f); }
.bqdoc9 mark.bqm9 sup { font-size: 9px; font-weight: 800; margin-left: 1px; color: var(--text-secondary); }
.bqpop9 { position: absolute; z-index: 6; background: var(--surface-1); border: 1px solid var(--grid); border-radius: 10px; box-shadow: 0 10px 26px rgba(15,23,42,.18); padding: 9px 11px; width: 330px; font-size: 12.5px; white-space: normal; }
.bqpop9 b { display: block; margin-bottom: 5px; }
.bqpop9 .qt { display: block; background: #ffe58a; color: #3a2f14; border-radius: 4px; padding: 2px 6px; margin-bottom: 6px; font-size: 12px; }
.bqpop9 textarea, .bqpop9 input, .bqpop9 select { width: 100%; border: 1px solid var(--grid); border-radius: 7px; padding: 5px 7px; font: inherit; font-size: 12.5px; background: var(--surface-1); color: var(--text-primary); margin-bottom: 5px; }
.bqpop9 .r { display: flex; gap: 5px; justify-content: flex-end; align-items: center; } .bqpop9 .r select { width: auto; margin: 0 auto 0 0; }
.bqnotes9 { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.bqnote9 { border: 1px solid var(--grid); border-left: 4px solid var(--critical, #c53030); border-radius: 9px; padding: 7px 10px; font-size: 12.5px; background: var(--surface-1); }
.bqnote9.nhac { border-left-color: #b45309; } .bqnote9.done { border-left-color: var(--good, #1d8a3f); opacity: .8; }
.bqnote9 .h { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; } .bqnote9 .h b { font-size: 11.5px; } .bqnote9 .h small { margin-left: auto; color: var(--text-muted); }
.bqnote9 .qt { background: #ffe58a; color: #3a2f14; border-radius: 4px; padding: 0 5px; font-size: 12px; } .bqnote9.cam .qt { background: #ffb3b3; }
.bqnote9 .cmt { margin: 3px 0; } .bqnote9 .goi { color: var(--good, #1d8a3f); } .bqnote9 .goi b { color: var(--good, #1d8a3f); } .bqnote9 .tl { color: var(--text-secondary); margin-top: 3px; }
.bqnote9 .ft { display: flex; gap: 6px; align-items: center; margin-top: 5px; flex-wrap: wrap; } .bqnote9 .ft label { font-size: 12px; display: flex; align-items: center; gap: 4px; color: var(--text-secondary); }
.bqdiff9 { white-space: pre-wrap; font-size: 13.5px; line-height: 1.7; background: var(--surface-2, #f4f6f9); border-radius: 9px; padding: 9px 12px; }
.bqdiff9 del { background: color-mix(in srgb, var(--critical, #c53030) 14%, transparent); color: var(--critical, #c53030); border-radius: 3px; padding: 0 2px; }
.bqdiff9 ins { background: color-mix(in srgb, var(--good, #1d8a3f) 16%, transparent); color: var(--good, #1d8a3f); text-decoration: none; border-radius: 3px; padding: 0 2px; }
.bqdiff9 .mini9 { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; font-weight: 700; }
.bqlai9 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; } .bqlai9 .lb9 { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
@media (max-width: 800px) { .bqlai9 { grid-template-columns: 1fr; } }

/* 📷 bài đăng Zalo + Page: tải ảnh/video, copy content */
.bqmedia9 { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }

/* 📖 phòng đọc kịch bản / content (GĐ duyệt demo 08/09) */
body.bqrd-on9 { overflow: hidden; }
#bqrd9 { position: fixed; inset: 0; z-index: 60; background: rgba(10, 15, 30, .55); display: grid; place-items: center; padding: 18px; }
#bqrd9 .rd9 { background: var(--surface-1); border-radius: 14px; width: min(1140px, 100%); max-height: min(820px, 100%); display: grid; grid-template-rows: auto 3px minmax(0, 1fr); box-shadow: 0 18px 50px rgba(0,0,0,.35); overflow: hidden; }
#bqrd9 .rh9 { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--grid); flex-wrap: wrap; }
#bqrd9 .rh9 b { font-size: 15px; }
#bqrd9 .rh9 .sp { flex: 1; }
#bqrd9 .qkb-mini.nh { color: #b45309; } #bqrd9 .qkb-mini.mu { color: var(--text-muted); font-weight: 600; }
#bqrd9 .rp9 { background: var(--grid); } #bqrd9 .rp9 i { display: block; height: 100%; width: 0; background: var(--xl9, #2563eb); transition: width .1s; }
#bqrd9 .rb9 { display: grid; grid-template-columns: 1fr 300px; min-height: 0; }
#bqrd9 .rt9 { overflow: auto; padding: 16px 24px; position: relative; }
#bqrd9 .rdoc9 { font-size: 15.5px; line-height: 1.75; background: transparent; padding: 0; white-space: normal; }
#bqrd9 .rdoc9 p { margin: 0 0 12px; padding-left: 36px; position: relative; max-width: 78ch; white-space: pre-wrap; }
#bqrd9 .rdoc9 p.gap { margin: 0 0 6px; }
#bqrd9 .rdoc9 p .n { position: absolute; left: 0; top: 3px; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; width: 26px; text-align: right; user-select: none; }
#bqrd9 .rs9 { border-left: 1px solid var(--grid); background: var(--surface-2, #f4f6f9); overflow: auto; padding: 12px 14px; }
#bqrd9 .rs9 h4 { margin: 10px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); } #bqrd9 .rs9 h4:first-child { margin-top: 0; }
#bqrd9 .rs9 .bqnote9[data-gcn] { cursor: pointer; } #bqrd9 .rs9 .bqnote9[data-gcn]:hover { border-color: var(--xl9, #2563eb); }
#bqrd9 .bqdiff9 { font-size: 15px; }
.rdopen9 { font-size: 11px; padding: 2px 9px; border-radius: 999px; }
@media (max-width: 820px) { #bqrd9 { padding: 0; } #bqrd9 .rd9 { border-radius: 0; height: 100%; } #bqrd9 .rb9 { grid-template-columns: 1fr; } #bqrd9 .rs9 { display: none; } }