/* =====================================================================
   EFIS Nội bộ – hệ thống giao diện dùng chung (design system)
   Nguyên tắc: nền trung tính, chữ số màu trung tính; màu thương hiệu chỉ dùng cho điểm nhấn;
   màu tốt/xấu chỉ khi là tín hiệu thật; nhấn bằng cỡ chữ + khoảng trắng, không dùng icon trang trí.
   Khoảng cách theo hệ 4px / 8px. Thẻ bo 12px, nút bo 8px.
   ===================================================================== */
:root {
  /* thương hiệu */
  --blue: #0875d1; --blue-600: #0560ad; --blue-700: #064e8c; --blue-50: #eef6fd; --blue-100: #d6e9fa;
  --navy: #142b49;
  --green: #16a34a; --green-50: #ecfdf3;

  /* nền & chữ */
  --bg: #f5f7fb;          /* nền trang */
  --panel: #ffffff;       /* thẻ, bảng */
  --sub: #f8fafc;         /* nền phụ: tiêu đề bảng, dòng tổng */
  --ink: #142b49;         /* chữ chính */
  --ink-2: #475569;       /* chữ phụ */
  --muted: #64748b;       /* chú thích */
  --faint: #c5cdd8;       /* số 0, dấu gạch */
  --line: #e5eaf1;        /* viền */
  --line-2: #eef2f6;      /* đường kẻ trong bảng */
  --hover: #f6f9fc;
  --line-3: #cfd8e3;      /* viền khi rê chuột */
  --fill: #eef1f6;        /* nền nút gộp, badge trung tính */

  /* trạng thái (chữ đậm hơn một bậc so với màu gốc để đọc được trên nền nhạt) */
  --up: #15803d; --up-bg: #e8f6ed;
  --down: #dc2626; --down-bg: #fdecec;
  --warn: #b45309; --warn-bg: #fef3e2;

  --shadow-sm: 0 1px 2px rgba(20, 43, 73, .05);
  --shadow: 0 1px 3px rgba(20, 43, 73, .06), 0 6px 16px rgba(20, 43, 73, .05);
  --shadow-lg: 0 20px 50px rgba(20, 43, 73, .18);
  --r: 12px; --r-sm: 8px;
  --nav-w: 248px;
  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'Inter', 'Be Vietnam Pro', system-ui, sans-serif;   /* vùng số liệu */

  /* biểu đồ */
  --s1: #0875d1; --s2: #eb6834; --s3: #16a34a; --s4: #eda100; --s-mute: #c5cdd8; --grid: #eef2f6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f141b; --panel: #161c25; --sub: #1a212c; --ink: #e8ecf2; --ink-2: #b6c0ce; --muted: #8e99ab; --faint: #4a5566;
    --line: #262f3c; --line-2: #1f2733; --line-3: #3a4656; --hover: #1c2531; --fill: #202835;
    --blue-50: #13283d; --blue-100: #173651; --green-50: #14281a;
    --up: #5cc87a; --up-bg: #15301e; --down: #ff8a80; --down-bg: #3a1a19; --warn: #f0b84c; --warn-bg: #352812;
    --shadow-sm: none; --shadow: none; --shadow-lg: 0 20px 50px rgba(0,0,0,.5);
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s-mute: #4a5566; --grid: #222b37;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { color: var(--ink); }
.hidden { display: none !important; }
a { color: var(--blue); }
::selection { background: var(--blue-100); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Input · Select ---------- */
label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin: 12px 0 6px; }
input, select, textarea {
  width: 100%; min-height: 36px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); outline: none; transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
input:hover, select:hover, textarea:hover { border-color: var(--line-3); }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8, 117, 209, .14); }
input:disabled, select:disabled, textarea:disabled { background: var(--sub); color: var(--muted); cursor: default; }
input[type=checkbox], input[type=radio] { min-height: 0; }
select { cursor: pointer; }
textarea { min-height: 72px; resize: vertical; }

/* ---------- Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink);
  font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--hover); border-color: var(--line-3); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--blue-600); border-color: var(--blue-600); }
.btn.small { min-height: 30px; padding: 4px 10px; font-size: 13px; }
.btn.block { width: 100%; margin-top: 12px; min-height: 40px; }
.btn svg { width: 18px; height: 18px; }
.err { color: var(--down); font-size: 13px; margin-top: 10px; min-height: 18px; }
.note { color: var(--muted); font-size: 12.5px; margin-top: 12px; line-height: 1.6; }

/* nút gộp (segmented) */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--fill); border-radius: 10px; max-width: 100%; overflow-x: auto; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 7px; cursor: pointer; font-weight: 500; color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 43, 73, .12); }

/* ---------- Filter Bar ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.toolbar select, .toolbar input[type=date] { width: auto; max-width: 100%; }
.toolbar input[type=search], .toolbar input:not([type]) { flex: 1 1 200px; }
.toolbar .sp { flex: 1; }
/* thanh lọc đầu trang (kỳ, ngày, tìm kiếm…) đứng yên dưới tiêu đề khi cuộn xuống; --top-h do app.js đo chiều cao tiêu đề */
.page > .toolbar { position: sticky; top: var(--top-h, 64px); z-index: 3; background: var(--bg); margin: -8px -24px 12px; padding: 8px 24px; }
@media (max-width: 860px) { .page > .toolbar { margin-inline: -16px; padding-inline: 16px; } }
@media (max-width: 720px) { .page > .toolbar { position: static; } }   /* điện thoại: thanh lọc nhiều dòng, dính lại che mất nội dung */
.check { display: flex; gap: 8px; align-items: center; margin-top: 12px; color: var(--ink); font-size: 13.5px; font-weight: 400; cursor: pointer; }
.check input { width: auto; accent-color: var(--blue); }

/* ---------- Card (khung chung cho mọi loại thẻ) ---------- */
.kpi, .chart-card, .ca-card, .ca-head, .viec, .tile {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm);
}

/* ---------- đăng nhập ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-art {
  color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(160deg, #142b49 0%, #0a4f8f 60%, #0875d1 120%);
}
.login-art .logo-row { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 18px; }
.login-art .logo-row img { width: 44px; height: 44px; border-radius: 50%; background: #fff; padding: 2px; }
.login-art h2 { font-size: 30px; line-height: 1.3; margin: 0 0 12px; font-weight: 700; max-width: 440px; color: #fff; }
.login-art p { margin: 0; opacity: .85; max-width: 420px; font-size: 15px; }
.login-art .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.login-art .chips span { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: 4px 12px; border-radius: 999px; font-size: 13px; }
.login-form { display: grid; place-items: center; padding: 24px 16px; background: var(--bg); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 32px; width: 100%; max-width: 400px; }
.card .card-logo { display: block; width: 88px; margin: 0 auto 12px; }
.card h1 { margin: 0; text-align: center; font-size: 20px; }
.card p { margin: 6px 0 20px; color: var(--muted); text-align: center; }
@media (max-width: 860px) { .login { grid-template-columns: 1fr; } .login-art { display: none; } }

/* ---------- Sidebar ---------- */
.shell { display: flex; min-height: 100vh; }
.nav {
  width: var(--nav-w); flex: none; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: 16px 12px 12px; background: var(--panel); border-right: 1px solid var(--line);
}
.nav .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 16px; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink); }
.nav .brand img { width: 36px; height: 36px; flex: none; border-radius: 50%; }
.nav .brand small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); }
.nav nav { flex: 1; overflow: auto; margin: 0 -4px; padding: 0 4px; }
.nav .grp-title {
  display: flex; align-items: center; gap: 8px; padding: 16px 10px 6px; font-weight: 600; color: var(--muted);
  font-size: 12px;
}
.nav .grp-title .soon { margin-left: auto; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--faint); }
.nav a.item {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 10px; margin: 2px 0; border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; transition: background .12s, color .12s;
}
.nav a.item .ic { width: 18px; height: 18px; flex: none; color: var(--muted); transition: color .12s; }
.nav a.item:hover { background: var(--hover); color: var(--ink); }
.nav a.item.on { background: var(--blue-50); color: var(--blue-700); font-weight: 600; }
.nav a.item.on .ic { color: var(--blue); }
@media (prefers-color-scheme: dark) { .nav a.item.on { color: #9fd0f5; } }
.nav .item .pill { margin-left: auto; }
.nav .me { border-top: 1px solid var(--line); margin-top: 8px; padding: 12px 4px 0; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.nav .me .avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-700); font-weight: 600; font-size: 14px; }
.nav .me b { color: var(--ink); font-weight: 600; display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.nav .me .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }

/* ---------- Page Header ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top {
  position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 24px; min-height: 64px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.crumb { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.crumb small { font-size: 12px; font-weight: 500; color: var(--muted); }
.crumb b { font-size: 20px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.top-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.menu-btn { display: none; padding: 0; width: 36px; }
.page { padding: 20px 24px 32px; min-width: 0; }
.hello { margin: 4px 0 20px; }
.hello h2 { margin: 0; font-size: 20px; font-weight: 700; }
.hello p { margin: 4px 0 0; color: var(--muted); }
.placeholder { background: var(--panel); border: 1px dashed var(--line); border-radius: var(--r); padding: 48px 24px; text-align: center; color: var(--muted); }
.placeholder h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tile { padding: 16px 20px; text-decoration: none; color: var(--ink); display: block; transition: border-color .15s, box-shadow .15s; }
.tile:hover { border-color: var(--blue-100); box-shadow: var(--shadow); }
.tile .m { font-size: 12px; font-weight: 500; color: var(--muted); }
.tile .t { font-size: 15px; font-weight: 600; margin-top: 2px; }
.tile .d { color: var(--muted); font-size: 13px; margin-top: 4px; }

@media (max-width: 860px) {
  .nav { position: fixed; left: 0; top: 0; z-index: 30; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-lg); }
  .nav.open { transform: none; }
  .nav.open + .main::after { content: ''; position: fixed; inset: 0; z-index: 20; background: rgba(20, 43, 73, .35); }
  .menu-btn { display: inline-flex; }
  .page { padding: 16px; }
  .top { padding: 8px 16px; min-height: 56px; }
  .crumb b { font-size: 18px; }
}

/* ---------- thẻ chỉ số (KPI) ---------- */
.meta { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.meta.warn { color: var(--warn); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { padding: 16px 20px; min-width: 0; }
.kpi .l { color: var(--muted); font-size: 13px; font-weight: 500; }
.kpi .v { font: 700 28px/1.2 var(--font-num); margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
.kpi .s { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
/* Performance có 6 thẻ: 6 cột trên màn rộng, 3 cột trên laptop/tablet, 2 cột trên điện thoại (luôn đều hàng) */
#pfKpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1500px) { #pfKpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { #pfKpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi { padding: 14px 16px; } .kpi .v { font-size: 22px; } }
@media (max-width: 420px) { .kpi { padding: 12px; } .kpi .v { font-size: 18px; } }   /* đủ chỗ cho doanh thu 10 chữ số trên 1 dòng */

/* ---------- Table ---------- */
.tablewrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: auto; max-height: calc(100vh - 260px); }
.tablewrap::-webkit-scrollbar { height: 10px; width: 10px; }
.tablewrap::-webkit-scrollbar-thumb { background: #d3dae4; border-radius: 6px; border: 2px solid var(--panel); }
table.grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
table.grid th, table.grid td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); text-align: right; white-space: nowrap; }
table.grid td { font-family: var(--font-num); }
table.grid td.txt, table.grid td.name { font-family: var(--font); }
table.grid th {
  position: sticky; top: 0; z-index: 2; background: var(--sub); color: var(--ink-2); font-weight: 600; font-size: 12px;
  white-space: normal; min-width: 72px; line-height: 1.35; border-bottom: 1px solid var(--line); vertical-align: bottom;
}
table.grid th.txt { text-align: left; }
table.grid tbody tr:last-child td { border-bottom: 0; }
/* bảng có 2 hàng tiêu đề: hàng trên là tên nhóm cột */
table.grid thead tr:first-child:not(:last-child) th:not([rowspan]) {
  height: 34px; padding-top: 0; padding-bottom: 0; vertical-align: middle; text-align: left; color: var(--ink); border-bottom: 1px solid var(--line-2);
}
table.grid thead tr:nth-child(2) th { top: 34px; }
table.grid th.grp-start, table.grid td.grp-start { border-left: 1px solid var(--line); }
/* bảng nhiều cột số (Performance, Ca làm cả team): kẻ dọc từng cột, ranh giới nhóm đậm hơn, tiêu đề nhóm có nền riêng */
table.cols th, table.cols td { border-right: 1px solid var(--line); }
table.cols th:last-child, table.cols td:last-child { border-right: 0; }
table.cols th.grp-start, table.cols td.grp-start { border-left: 2px solid var(--line-3); }
/* tiêu đề: in đậm, căn giữa, có màu – hàng tên cột nền xanh nhạt chữ navy; hàng tên nhóm (và ô "Sale") nền xanh EFIS chữ trắng */
table.cols thead th, table.cols thead th.txt, table.cols thead th.name {
  text-align: center; vertical-align: middle; font-weight: 700; font-size: 12.5px; color: var(--ink);
  background: var(--blue-50); border-right-color: var(--blue-100); border-bottom: 2px solid var(--blue-100);
}
table.cols thead tr:first-child:not(:last-child) th:not([rowspan]), table.cols thead tr:first-child:not(:last-child) th.name {
  text-align: center; font-size: 13px; color: #fff; background: var(--blue-600); border-right-color: rgba(255, 255, 255, .25); border-bottom-color: var(--blue-600);
}
table.cols thead tr:first-child:not(:last-child) th.grp-start { border-left-color: rgba(255, 255, 255, .6); }
table.cols thead th.grp-start { border-left-color: var(--blue); }
/* số liệu căn giữa dưới tiêu đề; cột chữ (ghi chú, mã…) vẫn căn trái */
table.cols tbody td:not(.txt):not(.name) { text-align: center; }
table.cols .rate { justify-content: center; }
/* tiêu đề dính cả khối thead (không phụ thuộc chiều cao hàng 1, tránh hàng 2 bị cắt / đè): ô cột đơn cao 2 hàng cùng màu hàng nhóm; hàng tổng nằm ngay dưới tiêu đề */
table.grid.sticky-head thead { position: sticky; top: 0; z-index: 3; }
table.grid.sticky-head thead th { top: auto; }
table.grid.sticky-head thead th:not(.name) { position: static; }
table.cols.sticky-head thead tr:first-child:not(:last-child) th[rowspan] {
  color: #fff; background: var(--blue-600); border-right-color: rgba(255, 255, 255, .25); border-bottom-color: var(--blue-600);
}
table.grid tr.tong td { background: var(--fill); color: var(--ink); font-weight: 700; text-align: center; border-bottom: 2px solid var(--line-3); }
table.grid tr.tong td.txt, table.grid tr.tong td.name { text-align: left; }
table.grid tr.tong td small { display: inline; }
table.cols tbody tr:where(:nth-child(even)) td { background: var(--sub); }
table.grid td.name, table.grid th.name { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--panel); min-width: 180px; border-right: 1px solid var(--line); }
table.grid td.name { font-weight: 500; }
table.cols td.name, table.cols th.name { border-right: 2px solid var(--line-3); }
table.cols tbody tr:where(:nth-child(even)) td.name { background: var(--sub); }
table.grid th.name { z-index: 3; background: var(--sub); vertical-align: middle; }
table.grid tbody tr:hover td { background: var(--hover); }
table.grid tr.team td { background: var(--sub); font-weight: 700; border-bottom: 1px solid var(--line); }
table.grid tr.team td.name { background: var(--sub); }
table.grid td.txt { text-align: left; max-width: 260px; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
table.grid td.name.txt { color: var(--ink); }
table.grid td.strong { font-weight: 600; color: var(--ink); }
table.grid .zero { color: var(--faint); font-weight: 400; }
table.grid td small { color: var(--muted); display: block; font-weight: 400; }
table.grid tr.sel td, table.grid tr.sel td.name { background: var(--blue-50); }
table.grid tr.sel td.name { box-shadow: inset 3px 0 0 var(--blue); }
@media (max-width: 640px) { table.grid td.name, table.grid th.name { min-width: 140px; } table.grid th, table.grid td { padding: 9px 12px; } }
/* tỷ lệ: số màu trung tính + dấu so với TB team */
.rate { display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; }
.cmp { font-size: 10px; line-height: 1; padding: 2px 3px; border-radius: 4px; }
.cmp.up { color: var(--up); background: var(--up-bg); }
.cmp.down { color: var(--down); background: var(--down-bg); }
table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.list th, table.list td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); text-align: left; }
table.list th { background: var(--sub); font-size: 12px; font-weight: 600; color: var(--ink-2); position: sticky; top: 0; white-space: nowrap; }
table.list tbody tr:hover td { background: var(--hover); }
table.list tbody tr:last-child td { border-bottom: 0; }

/* ---------- Badge · nút chữ ---------- */
.up { color: var(--up); } .down { color: var(--down); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-weight: 500; font-size: 12px; line-height: 1.5; white-space: nowrap; }
.p-good { background: var(--up-bg); color: var(--up); }
.p-warn { background: var(--warn-bg); color: var(--warn); }
.p-bad { background: var(--down-bg); color: var(--down); }
.p-mute { background: var(--fill); color: var(--muted); }
a.lk { color: var(--blue); cursor: pointer; text-decoration: none; font-weight: 500; }
a.lk:hover { color: var(--blue-600); text-decoration: underline; }
a.lk.danger { color: var(--down); }
@media (prefers-color-scheme: dark) { a.lk { color: #6fb6ea; } a.lk:hover { color: #9fd0f5; } }
.empty { padding: 48px 24px; text-align: center; color: var(--muted); }
.banner { border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 12px; font-size: 13.5px; }
.banner.warn { background: var(--warn-bg); color: var(--warn); }

/* ---------- cửa sổ ---------- */
.modal { position: fixed; inset: 0; background: rgba(20, 43, 73, .4); display: grid; place-items: center; padding: 16px; z-index: 40; animation: fade .15s ease-out; }
.sheet { background: var(--panel); border-radius: 14px; width: 100%; max-width: 780px; max-height: 92vh; overflow: auto; box-shadow: var(--shadow-lg); animation: rise .18s ease-out; }
.sheet.wide { max-width: 1200px; }
.sheet .hd { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.sheet .hd h2 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sheet .bd { padding: 4px 20px 20px; }
.sheet .ft { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--panel); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 16px; }
fieldset { border: 1px solid var(--line); border-radius: var(--r); margin: 16px 0 0; padding: 4px 16px 16px; min-width: 0; }
legend { font-weight: 600; font-size: 13.5px; padding: 0 8px; color: var(--ink); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 640px) { .sheet .hd, .sheet .ft { padding-left: 16px; padding-right: 16px; } .sheet .bd { padding: 4px 16px 16px; } }

/* ---------- biểu đồ ---------- */
.charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.charts .wide { grid-column: 1 / -1; }
@media (max-width: 1100px) { .charts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .charts { grid-template-columns: 1fr; } }
.chart-card { padding: 16px 20px 20px; min-width: 0; }
.chart-card h3 { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.chart-card .sub { margin: 0 0 16px; color: var(--muted); font-size: 12.5px; }
.chart-box { position: relative; height: 200px; }
.chart-box.tall { height: 260px; }
.donut-wrap { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; }
.donut-wrap .chart-box { height: 150px; }
@media (max-width: 420px) { .donut-wrap { grid-template-columns: 1fr; } }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.legend li { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 8px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend .n { font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums; }
.legend .p { font-family: var(--font-num); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.funnel { display: grid; gap: 10px; }
.funnel .row { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); }
.funnel .bar { position: relative; height: 30px; background: var(--grid); border-radius: 6px; overflow: hidden; }
.funnel .bar span { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--s1); border-radius: 6px; min-width: 2px; }
/* thanh ngắn: số nằm ngay sau thanh (không đè lên màu); thanh dài: số trắng nằm trong thanh */
.funnel .bar b { position: absolute; left: calc(var(--w, 0%) + 8px); top: 50%; transform: translateY(-50%); font: 600 13px var(--font-num); color: var(--ink); font-variant-numeric: tabular-nums; }
.funnel .bar.on-fill b { left: 10px; color: #fff; }
.funnel .conv { color: var(--muted); font-size: 12px; padding-left: 80px; margin-top: -4px; }
.rank { display: grid; gap: 8px; max-height: 230px; overflow: auto; }
.rank .row { display: grid; grid-template-columns: 110px 1fr 74px; gap: 8px; align-items: center; font-size: 13px; }
.rank .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.rank .row.sel .nm { color: var(--blue); font-weight: 600; }
.rank .track { height: 8px; background: var(--grid); border-radius: 4px; overflow: hidden; }
.rank .track span { display: block; height: 100%; background: var(--s1); border-radius: 4px; }
.rank .val { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; }
.rank .val small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.pf-stt { display: inline-block; min-width: 22px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
table.grid tr.sep td { background: var(--sub); color: var(--muted); font-size: 12px; font-weight: 600; padding-top: 6px; padding-bottom: 6px; border-top: 1px solid var(--line); }
table.grid tr.sep td.name { background: var(--sub); }
.conv-table { overflow: auto; max-height: 420px; border: 1px solid var(--line-2); border-radius: 10px; }
.conv-table table.grid { width: 100%; }
.conv-table small.trung { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 11px; font-weight: 600; white-space: nowrap; cursor: help; }
.trung-ds { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.trung-ds summary { cursor: pointer; }
.trung-ds summary b { color: var(--warn); }
.charts-sep { margin: 8px 0 -2px; padding-top: 14px; border-top: 1px solid var(--line, var(--grid)); color: var(--muted); font-size: 12.5px; }
.charts-sep b { color: var(--ink); font-size: 14px; font-weight: 600; margin-right: 6px; }
.funnel.b .bar span, .rank.b .track span { background: var(--s4); }
.funnel.b .bar.on-fill b { color: #142b49; }
#pfSale { width: auto; min-width: 170px; }

/* ---------- Ca làm ---------- */
.ca-wrap { max-width: 760px; }
.ca-card { padding: 20px; }
.ca-card h2 { margin: 0; font-size: 18px; font-weight: 700; }
.ca-card h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.ca-card .tscroll { overflow-x: auto; }
.ca-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 16px 20px; margin-bottom: 16px; }
.ca-head h2 { margin: 0; font-size: 18px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ca-head .meta { margin: 4px 0 0; }
.ca-head .sp { flex: 1; }
.ca-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .ca-pick { grid-template-columns: 1fr 1fr; } .ca-card { padding: 16px; } .ca-head { padding: 16px; } .ca-head .btn { flex: 1; } }
.ca-pick button { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-sm); padding: 10px 12px; cursor: pointer; display: grid; gap: 2px; transition: border-color .15s, background .15s; }
.ca-pick button b { font-size: 15px; font-weight: 600; }
.ca-pick button span { color: var(--ink-2); font-size: 12.5px; }
.ca-pick button small { color: var(--muted); font-size: 12px; }
.ca-pick button:hover:not(:disabled) { border-color: var(--blue); }
.ca-pick button.on { border-color: var(--blue); background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue); }
.ca-pick button:disabled { opacity: .5; cursor: default; }
.viec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.viec-grid.compact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-top: 12px; }
.viec { padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.viec > .pill, .viec > .lk { align-self: flex-start; }
.viec.dat { border-color: #b7e3c5; }
@media (prefers-color-scheme: dark) { .viec.dat { border-color: #24523a; } }
.v-top { display: flex; align-items: center; gap: 8px; }
.v-so { font-weight: 600; color: var(--muted); font-size: 12px; }
.v-loai { margin-left: auto; font-size: 11.5px; line-height: 1.5; padding: 1px 8px; border-radius: 999px; background: var(--blue-50); color: var(--blue-700); font-weight: 500; }
.v-loai.khai { background: var(--warn-bg); color: var(--warn); }
.v-loai.cho { background: var(--fill); color: var(--muted); }
@media (prefers-color-scheme: dark) { .v-loai { color: #9fd0f5; } }
.v-ten { font-size: 14px; font-weight: 600; line-height: 1.4; min-height: 40px; }
.v-num { font: 700 28px/1.15 var(--font-num); font-variant-numeric: tabular-nums; }
.v-num small { font-size: 14px; font-weight: 500; color: var(--muted); }
.v-num.mute { color: var(--faint); }
.v-mota { color: var(--muted); font-size: 12px; line-height: 1.5; }
.pbar { height: 6px; background: var(--grid); border-radius: 3px; overflow: hidden; }
.pbar span { display: block; height: 100%; background: var(--blue); border-radius: 3px; transition: width .25s; }
.pbar span.ok { background: var(--green); }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button { width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); font-size: 18px; line-height: 1; cursor: pointer; color: var(--ink-2); transition: border-color .15s, color .15s, background .15s; }
.stepper button:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-50); }
.stepper .v-num { min-width: 28px; text-align: center; }

/* ---------- Phiếu thu & Cam kết ---------- */
.qpt td.wrap { white-space: normal; min-width: 200px; max-width: 380px; }
.qpt .gon { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; cursor: pointer; }
.qpt .gon.mo { display: block; -webkit-line-clamp: unset; white-space: pre-line; }
.qpt td, .qpt th { padding-top: 8px; padding-bottom: 8px; }
.qpt td.row-no { color: var(--muted); }
.qpt td.act { white-space: nowrap; max-width: none; overflow: visible; }   /* không cắt số phiếu / nút / nhãn cảnh báo */
.qpt .act b { font-family: var(--font-num); font-weight: 600; color: var(--ink); }
.qpt .act .lk { margin-left: 10px; font-size: 13px; }
.qpt-ref { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; white-space: pre-wrap; margin-top: 12px; }
.qpt-ref b { display: block; font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.qpt-so { font-size: 13px; color: var(--muted); margin-top: 12px; }
.qpt-so b { color: var(--ink); }
.qpt-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
.qpt-row4 { display: grid; grid-template-columns: 1.4fr .7fr .7fr 1fr 1fr; gap: 0 16px; align-items: end; }
.ck-h { font-size: 14px; font-weight: 600; margin: 18px 0 2px; color: var(--ink); }
.ck-chk { display: flex; align-items: center; gap: 8px; margin-top: 26px; font-weight: 500; }
.ck-chk input { width: auto; }
@media (max-width: 720px) { .qpt-row3, .qpt-row4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .qpt-row3 { grid-template-columns: 1fr; } }

/* Thanh chọn khóa của mảng (vd Quản lý lớp: LE · Tourguide · IELTS & TOEIC · Tất cả) – nằm cạnh tiêu đề trang */
.top .mod-bar { margin-left: 12px; flex-shrink: 0; }
@media (max-width: 720px) { .top .mod-bar { order: 5; margin-left: 0; width: 100%; } }

/* Lớp học › chuyên cần: ô điểm danh từng buổi (✓ đi học / ✗ vắng, số nhỏ bên dưới = bài tập) · điều kiện đi tour */
table.grid th.dd-h { text-align: center; padding: 6px 6px; min-width: 40px; }
table.grid th.dd-h small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
table.grid td.dd-o { text-align: center; padding: 6px 6px; color: var(--ink-2); line-height: 1.15; }
table.grid td.dd-o small { display: block; font-size: 11px; color: var(--muted); }
table.grid td.dd-vang span { color: var(--down); font-weight: 600; }
table.grid td.dd-chua { color: var(--faint); }
.dk-ok { color: var(--up); font-weight: 600; }
.dk-thieu { color: var(--down); font-weight: 600; }

/* Lớp học: thẻ giảng viên / lớp (bấm vào để đi sâu) */
.lh-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.lh-the { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.lh-the:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.lh-dong { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.lh-the h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.lh-the .sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.lh-bar { height: 6px; border-radius: 4px; background: var(--fill); overflow: hidden; margin-top: 10px; }
.lh-bar > i { display: block; height: 100%; background: var(--blue); }
/* Bảng điểm danh 3 dòng tiêu đề giống file Excel – nền nhạt, mỗi nhóm cột một vạch màu mảnh trên đầu, đường kẻ mảnh */
table.grid.xl { border-collapse: separate; border-spacing: 0; }
table.grid.xl th, table.grid.xl td { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
table.grid.xl thead th { white-space: nowrap; padding: 6px 10px; height: 34px; box-sizing: border-box; text-align: center; font-weight: 600; color: var(--ink-2); border-color: var(--line); }
table.grid.xl thead tr:nth-child(1) th { top: 0; font-size: 13px; font-weight: 700; text-align: left; }
table.grid.xl thead tr:nth-child(2) th { top: 34px; font-size: 12.5px; color: var(--ink); background: var(--panel); }
table.grid.xl thead tr:nth-child(3) th { top: 68px; font-size: 12px; color: var(--muted); background: var(--sub); border-bottom: 1px solid var(--line-3); }
table.grid.xl thead th[rowspan] { vertical-align: middle; }
table.grid.xl thead th.gd { background: #eef2f8; color: var(--navy); font-weight: 700; box-shadow: inset 0 3px 0 var(--navy); border-bottom: 1px solid var(--line-3); }
table.grid.xl thead tr:nth-child(1) th.g0 { background: #eaf3fc; color: #0560ad; box-shadow: inset 0 3px 0 #0875d1; }
table.grid.xl thead tr:nth-child(1) th.g1 { background: #e9f6ef; color: #12753f; box-shadow: inset 0 3px 0 #16a34a; }
table.grid.xl thead tr:nth-child(1) th.g2 { background: #fdeee8; color: #b4491f; box-shadow: inset 0 3px 0 #eb6834; }
table.grid.xl thead tr:nth-child(1) th.g3 { background: #eceefc; color: #3b3fb4; box-shadow: inset 0 3px 0 #5560e0; }
table.grid.xl thead tr:nth-child(1) th.g4 { background: #e6f5f6; color: #0b6f78; box-shadow: inset 0 3px 0 #0e9aa7; }
table.grid.xl thead tr:nth-child(1) th.g5 { background: #fdf4dd; color: #8a6200; box-shadow: inset 0 3px 0 #eda100; }
table.grid.xl thead tr:nth-child(1) th.g6 { background: #edf0f4; color: #475569; box-shadow: inset 0 3px 0 #94a3b8; }
table.grid.xl thead th.grp-start, table.grid.xl td.grp-start { border-left: 1px solid var(--line-3); }
table.grid.xl td { padding: 8px 10px; }
table.grid.xl td.dd-o { text-align: center; padding: 8px 8px; }
table.grid.xl tbody tr:nth-child(even) td { background: #fafbfd; }
table.grid.xl tbody tr:hover td { background: var(--blue-50); }
/* ô chọn ẩn / hiện nhóm cột: gọn, nằm trên 1 dòng, cuộn ngang nếu thiếu chỗ */
.lh-chip-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 6px 0 10px; font-size: 12.5px; overflow-x: auto; padding-bottom: 2px; }
.lh-chip-bar b { font-weight: 600; color: var(--muted); margin-right: 2px; white-space: nowrap; }
.lh-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--line-3); border-radius: 999px; background: var(--panel); color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
.lh-chip.on { background: var(--blue-50); border-color: #b7d7f3; color: var(--blue-700); font-weight: 600; }
.lh-chip input { width: auto; margin: 0; accent-color: var(--blue); }
/* ô điểm danh hệ thống tự tính vì file Excel để trống */
.tu-tinh { border-bottom: 1px dotted var(--muted); cursor: help; }
/* Hàng lọc gọn: ô tìm, ô lọc, nút cùng một hàng, cao 30px, chữ 12.5px — để dành chỗ cho bảng bên dưới */
.gon-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.gon-bar input, .gon-bar select, .gon-bar .btn { width: auto; height: 30px; min-height: 0; padding: 3px 8px; font-size: 12.5px; margin: 0; border-radius: 7px; }
.gon-bar select { max-width: 170px; padding-right: 22px; }
.gon-bar select.dang-loc { border-color: var(--blue); background-color: var(--blue-50); color: var(--blue-700); font-weight: 600; }
.gon-bar .lk { font-size: 12.5px; margin: 0 2px; }
.gon-bar .lh-cot { margin: 0; }
.gon-bar .lh-cot summary { height: 30px; padding: 5px 10px; border-radius: 7px; box-sizing: border-box; }.lh-cot { position: relative; display: inline-block; margin: 6px 0 10px; font-size: 12.5px; }
.lh-cot summary { list-style: none; cursor: pointer; user-select: none; padding: 5px 12px; border: 1px solid var(--line-3); border-radius: 8px; background: var(--panel); color: var(--ink-2); }
.lh-cot summary::-webkit-details-marker { display: none; }
.lh-cot summary::after { content: ' ▾'; color: var(--muted); }
.lh-cot[open] summary { border-color: var(--blue); }
.lh-cot-ds { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 280px; padding: 6px; background: var(--panel); border: 1px solid var(--line-3); border-radius: 8px; box-shadow: var(--shadow); }
.lh-cot-ds label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0; border-radius: 6px; cursor: pointer; color: var(--ink); font-weight: 400; white-space: nowrap; }
.lh-cot-ds label:hover { background: var(--blue-50); }
.lh-cot-ds input { width: auto; margin: 0; accent-color: var(--blue); }
/* Điểm danh trên app: ô bấm được */
table.grid.xl td.sua-o { cursor: pointer; }
table.grid.xl td.sua-o:hover { background: var(--blue-50) !important; box-shadow: inset 0 0 0 1px var(--blue); }
table.grid.xl td.dd-o .dd-co { color: var(--up); font-weight: 600; }
table.grid.xl td.dd-o .dd-vang { color: var(--down); font-weight: 600; }
table.grid.xl td.dd-o .dd-giua { color: var(--warn); font-weight: 600; }
table.grid.xl td.dd-o .dd-trong { color: var(--faint); }
table.grid.xl td .o-nhap { width: 100%; min-width: 90px; padding: 3px 6px; font-size: 13px; }
table.grid.xl th.sua-ngay { cursor: pointer; text-decoration: underline dotted; }
table.grid.xl th a.lk { margin-left: 4px; font-size: 12px; }
table.grid.xl .nhom-sel { display: none; font-size: 11px; padding: 1px 2px; margin-top: 2px; max-width: 110px; }
table.grid.xl tbody tr:hover .nhom-sel { display: block; }

/* ---------- Khách hàng › chi tiết khách: bố cục giống trang chi tiết bản ghi của Pancake CRM ----------
   Đo từ CRM 22/10/2026: cửa sổ ~95% màn hình, nền #f2f4f7, thẻ trắng bo 12px; tab 16px/500 (đang chọn #1677ff);
   thanh tiến độ cao 32px, bước đang chọn #1677ff chữ trắng, bước khác #eaecf0 chữ #667085;
   tab Chi tiết: khối 1000px giữa, tiêu đề phần 15px/600 kẻ dưới, 2 cột, nhãn 197px căn phải, ô 32px viền #d0d5dd bo 6px,
   dấu * #ff4d4f, chữ gợi ý #667085. */
.sheet.crm { max-width: 96vw; width: 96vw; max-height: 94vh; padding: 0; background: var(--crm-bg); border-radius: 12px; }
.sheet.crm { --crm-bg: #f2f4f7; --crm-card: #fff; --crm-ink: rgba(0,0,0,.88); --crm-ink2: #475467; --crm-mut: #667085; --crm-line: #d9d9d9;
  --crm-in: #d0d5dd; --crm-blue: #1677ff; --crm-step: #eaecf0; --crm-req: #ff4d4f; font-size: 14px; color: var(--crm-ink); }
@media (prefers-color-scheme: dark) {
  .sheet.crm { --crm-bg: #0f141b; --crm-card: #161c25; --crm-ink: #e8ecf2; --crm-ink2: #b6c0ce; --crm-mut: #8e99ab; --crm-line: #2b3442;
    --crm-in: #3a4656; --crm-step: #202835; }
}
.crm-hd { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--crm-card); position: sticky; top: 0; z-index: 3; border-radius: 12px 12px 0 0; }
.crm-av { width: 36px; height: 36px; border-radius: 50%; background: #5dbb46; color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 500; flex: none; }
.crm-tit { font-size: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-chu { color: var(--crm-mut); font-size: 13px; white-space: nowrap; }
.crm-x { width: 32px; height: 32px; border-radius: 6px; border: 0; background: transparent; color: var(--crm-ink2); font-size: 20px; line-height: 1; cursor: pointer; }
.crm-x:hover { background: var(--crm-step); }
.crm-tabs { display: flex; align-items: center; gap: 24px; padding: 0 20px; height: 44px; background: var(--crm-card); border-top: 1px solid var(--crm-step); position: sticky; top: 60px; z-index: 3; }
.crm-tabs a { font-size: 16px; font-weight: 500; color: var(--crm-ink2); cursor: pointer; padding: 9px 0; border-bottom: 2px solid transparent; text-decoration: none; }
.crm-tabs a.on { color: var(--crm-blue); border-bottom-color: var(--crm-blue); }
.crm-tabs .nav2 { font-size: 14px; font-weight: 400; color: var(--crm-ink); }
.crm-tabs .nav2.tat { color: var(--crm-mut); pointer-events: none; opacity: .5; }
.crm-body { padding: 18px; }
.crm-card { background: var(--crm-card); border-radius: 12px; margin-bottom: 18px; }
.crm-card-hd { height: 52px; padding: 0 20px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--crm-step); font-size: 16px; font-weight: 600; }
.crm-card-bd { padding: 16px 20px 20px; }
.crm-2c { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 18px; align-items: start; }
.crm-trong { text-align: center; color: var(--crm-mut); padding: 36px 12px; }
.crm-trong b { display: block; color: var(--crm-ink); font-weight: 500; margin-bottom: 4px; }
/* Trao đổi: nội dung các mục tư vấn (15, 28, 29) */
.crm-tv { margin-bottom: 14px; }
.crm-tv .crm-lb { text-align: left; padding-top: 0; color: var(--crm-mut); margin-bottom: 4px; }
.crm-tv-nd { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
/* thanh tiến độ (46. Tiến độ chăm sóc) dạng mũi tên */
.crm-step { display: flex; height: 32px; }
.crm-step span { flex: 1 1 0; min-width: 0; display: block; line-height: 32px; text-align: center; padding: 0 12px 0 20px; background: var(--crm-step); color: var(--crm-mut); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); margin-left: -6px; }
.crm-step span:first-child { border-radius: 8px 0 0 8px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); margin-left: 0; padding-left: 14px; }
.crm-step span:last-child { border-radius: 0 8px 8px 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); }
.crm-step span.on { background: var(--crm-blue); color: #fff; }
/* tab Chi tiết */
.crm-form { max-width: 1000px; margin: 0 auto; }
.crm-sec { font-size: 15px; font-weight: 600; padding: 0 0 7px; border-bottom: 1px solid var(--crm-line); margin: 26px 0 18px; }
.crm-sec:first-child { margin-top: 4px; }
.crm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.crm-it { display: grid; grid-template-columns: 197px minmax(0, 1fr); gap: 8px; align-items: start; margin-bottom: 20px; }
.crm-lb { text-align: right; padding-top: 6px; line-height: 1.4; }
.crm-lb i { color: var(--crm-req); font-style: normal; margin-right: 4px; }
.crm-o { min-height: 32px; border: 1px solid var(--crm-in); border-radius: 6px; padding: 5px 11px; background: var(--crm-card); white-space: pre-wrap; word-break: break-word; line-height: 1.45; position: relative; }
.crm-o.trong { color: var(--crm-mut); }
.crm-o.so { text-align: right; }
.crm-o.chon, .crm-o.ngay { padding-right: 30px; }
.crm-o.chon::after { content: ''; position: absolute; right: 12px; top: 12px; width: 6px; height: 6px; border: solid var(--crm-mut); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.crm-o.ngay::after { content: '▦'; position: absolute; right: 10px; top: 5px; color: var(--crm-mut); font-size: 13px; }
.crm-o.chu { border-width: 0 0 1px; border-radius: 0; padding-left: 0; }
.crm-o img { width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; margin-right: 6px; }
.crm-note { text-align: center; color: var(--crm-mut); margin: 0 0 6px; }
/* tab Lịch sử */
.crm-ls-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.crm-ls-bar select, .crm-ls-bar button { height: 32px; border: 1px solid var(--crm-in); border-radius: 6px; background: var(--crm-card); color: var(--crm-ink); padding: 0 11px; font: inherit; width: auto; margin: 0; }
.crm-ls-bar button { color: var(--crm-blue); border-color: var(--crm-blue); cursor: pointer; }
.crm-ls { position: relative; padding-left: 24px; }
.crm-ls::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; border-left: 1px solid var(--crm-line); }
.crm-ls-it { position: relative; background: var(--crm-bg); border-radius: 4px; margin-bottom: 40px; }
.crm-ls-it::before { content: ''; position: absolute; left: -24px; top: 12px; width: 7px; height: 7px; border: 1.5px solid var(--crm-blue); border-radius: 50%; background: var(--crm-card); }
.crm-ls-hd { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 42px; cursor: pointer; font-weight: 500; }
.crm-ls-hd .mui { display: inline-block; width: 12px; transition: transform .15s; }
.crm-ls-it.mo .crm-ls-hd .mui { transform: rotate(90deg); }
.crm-ls-hd .bdg { background: var(--crm-blue); color: #fff; border-radius: 4px; padding: 1px 7px; font-size: 12px; font-weight: 400; }
.crm-ls-hd .ai { margin-left: auto; font-weight: 400; }
.crm-ls-bd { display: none; padding: 0 14px 12px; line-height: 1.6; }
.crm-ls-it.mo .crm-ls-bd { display: block; }
.crm-ls-bd b { font-weight: 500; }
/* Chuyển QLL: bảng kiểm thông tin đăng ký trên CRM */
.cq-ds { display: grid; grid-template-columns: 220px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin: 8px 0 12px; }
.cq-ds > div { padding: 7px 10px; border-bottom: 1px solid var(--line-2); white-space: pre-wrap; word-break: break-word; }
.cq-ds > div:nth-child(odd) { color: var(--ink-2); background: var(--sub); }
.cq-ds > div.thieu { color: var(--down); background: var(--down-bg); font-weight: 500; }
@media (max-width: 900px) {
  .crm-2c, .crm-cols { grid-template-columns: 1fr; }
  .crm-it { grid-template-columns: 1fr; gap: 4px; }
  .crm-lb { text-align: left; padding-top: 0; }
  .crm-tabs { gap: 14px; overflow-x: auto; }
  .cq-ds { grid-template-columns: 1fr; }
}

/* ---------- Khách hàng › danh sách: bảng giống bảng "Tiềm năng" của Pancake CRM ----------
   Đo từ CRM 22/10/2026: tiêu đề cột nền #f2f4f7 cao 42px chữ 14px/600 #344054, kẻ cột #eaecf0;
   dòng cao 41px kẻ #f0f0f0, dòng chẵn #f9fafa; cột "46. Tiến độ" ghim phải, tô kín ô theo màu tiến độ, chữ trắng 12px. */
.crm-lh-tit { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.crm-lh-tit b { font-size: 20px; font-weight: 600; }
.crm-dem { background: var(--blue-50); color: var(--blue-700); border-radius: 6px; padding: 0 7px; font-size: 12px; }
.crm-trang { font-size: 13px; color: var(--ink-2); margin-right: 4px; white-space: nowrap; }
.crm-bang { border: 1px solid #eaecf0; border-radius: 8px; max-height: calc(100vh - 200px); overflow: auto; }
table.crm-grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 14px; color: rgba(0,0,0,.88); background: #fff; }
table.crm-grid th { position: sticky; top: 0; z-index: 2; background: #f2f4f7; color: #1d2939; font-weight: 500; height: 42px; padding: 0 12px; text-align: left;
  border-right: 1px solid #eaecf0; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
table.crm-grid td { height: 41px; padding: 4px 12px; border-bottom: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0; white-space: nowrap;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; background: #fff; }
table.crm-grid tbody tr:nth-child(even) td { background: #f9fafa; }
table.crm-grid tbody tr { cursor: pointer; }
table.crm-grid tbody tr:hover td { background: #eef4ff; }
table.crm-grid .stt { position: sticky; left: 0; z-index: 1; width: 48px; min-width: 48px; text-align: center; color: rgba(0,0,0,.88); padding: 0 6px; }
table.crm-grid th.stt { z-index: 3; }
table.crm-grid .ghim-phai { position: sticky; right: 0; z-index: 1; width: 133px; min-width: 133px; box-shadow: -4px 0 6px -4px rgba(0,0,0,.12); }
table.crm-grid th.ghim-phai { z-index: 3; }
table.crm-grid td.o-td { padding: 4px; }
table.crm-grid td.o-td span { display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 2px; color: #fff; font-size: 12px; padding: 0 7px;
  overflow: hidden; text-overflow: ellipsis; }
.crm-nv { display: inline-flex; align-items: center; gap: 6px; }
.crm-nv .av { position: relative; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; background: #d6e4ff; color: #1d4ed8; font-size: 11px; font-weight: 600; display: grid; place-items: center; flex: none; }
.crm-nv .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.crm-dt::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
  background: #1677ff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (prefers-color-scheme: dark) {
  .crm-bang { border-color: var(--line); }
  table.crm-grid { background: var(--panel); color: var(--ink); }
  table.crm-grid th { background: var(--sub); color: var(--ink-2); border-color: var(--line); }
  table.crm-grid td { background: var(--panel); border-color: var(--line-2); }
  table.crm-grid tbody tr:nth-child(even) td { background: var(--sub); }
  table.crm-grid tbody tr:hover td { background: var(--hover); }
}
/* ô tick đầu dòng như CRM: hiện số thứ tự, rê chuột / đã tick thì hiện ô tick */
table.crm-grid .stt input { display: none; width: 16px; height: 16px; margin: 0; cursor: pointer; vertical-align: middle; }
table.crm-grid th.stt input, table.crm-grid tr:hover .stt input, table.crm-grid tr.chon .stt input { display: inline-block; }
table.crm-grid tr:hover .stt span, table.crm-grid tr.chon .stt span { display: none; }
table.crm-grid tbody tr.chon td { background: #e6f4ff; }
.crm-chon { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 6px 12px; border-radius: 8px; background: var(--blue-50); color: var(--blue-700); font-size: 13px; }
.crm-chon[hidden] { display: none; }
/* tên khách chữ thường như CRM (vẫn bấm được để mở chi tiết); nguồn khách = biểu tượng kênh + tên page (đo CRM 23/10/2026) */
table.crm-grid a.crm-ten { color: inherit; text-decoration: none; font-weight: 400; }
table.crm-grid a.crm-ten:hover { color: #1677ff; text-decoration: underline; }
.crm-nguon { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; overflow: hidden; white-space: nowrap; vertical-align: middle; }
.crm-nguon .kenh { flex: none; position: relative; overflow: hidden; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
.crm-nguon .kenh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }   /* ảnh page che biểu tượng kênh; ảnh lỗi thì tự gỡ */
.crm-nguon .k-fb { background: #1877f2; }
.crm-nguon .k-zl { background: #0068ff; }
.crm-nguon .k-tt { background: #111; }
.crm-nguon .k-ig { background: linear-gradient(45deg, #f58529, #dd2a7b 55%, #8134af); }
.crm-nguon .k-khac { width: 6px; height: 6px; margin: 0 6px; background: #98a2b3; }
.crm-nguon .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* kéo mép phải tiêu đề = đổi độ rộng cột; kéo tiêu đề = đổi chỗ cột (vạch xanh chỉ chỗ thả) */
table.crm-grid th .th-keo { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 2; }
table.crm-grid th .th-keo:hover, body.dang-keo-cot table.crm-grid th .th-keo:active { background: #1677ff; }
table.crm-grid th.keo-di { opacity: .45; }
table.crm-grid th.keo-truoc { box-shadow: inset 3px 0 0 #1677ff; }
table.crm-grid th.keo-sau { box-shadow: inset -3px 0 0 #1677ff; }
body.dang-keo-cot, body.dang-keo-cot * { cursor: col-resize !important; user-select: none; }
/* nút trên dòng (rê chuột vào dòng, ở cột đầu tiên như CRM): mở chi tiết · chép link · hội thoại Pancake */
table.crm-grid td.co-nut:not(.ghim-trai):not(.ghim-phai) { position: relative; }

.dong-nut { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; padding-left: 6px; background: inherit; }
table.crm-grid tbody tr:hover .dong-nut { display: inline-flex; }
.dong-nut button, .dong-nut a { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #475467; cursor: pointer; }
.dong-nut button:hover, .dong-nut a:hover { background: #e4e7ec; color: #1677ff; }
.dong-nut .xong { color: #12b76a; }
/* chiều cao hàng: Ngắn (1 dòng, mặc định) · Vừa (2 dòng) · Cao (4 dòng) */
table.crm-grid.cao-vua td { height: 58px; }
table.crm-grid.cao-cao td { height: 92px; }
table.crm-grid .oc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; word-break: break-word; line-height: 1.4; }
table.crm-grid.cao-cao .oc { -webkit-line-clamp: 4; }
/* hàng tổng cuối bảng, dính đáy khung cuộn */
table.crm-grid tfoot td { position: sticky; bottom: 0; z-index: 2; height: 40px; background: #f9fafb; border-top: 1px solid #eaecf0; color: #475467; }
table.crm-grid tfoot td.so { text-align: right; font-weight: 600; }
table.crm-grid tfoot td.stt, table.crm-grid tfoot td.ghim-trai, table.crm-grid tfoot td.ghim-phai { z-index: 3; }
@media (prefers-color-scheme: dark) {
  table.crm-grid tfoot td { background: var(--sub); border-color: var(--line); color: var(--ink-2); }
  .dong-nut button, .dong-nut a { color: var(--ink-2); }
  .dong-nut button:hover, .dong-nut a:hover { background: var(--hover); }
}

/* ---------- Menu trái thu gọn (nút ‹‹ cạnh logo, chỉ trên máy tính): còn dải biểu tượng 64px, rê chuột xem tên trang ---------- */
.nav .brand { position: relative; }
.nav-thu { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
.nav-thu:hover { background: var(--hover); color: var(--ink); }
.nav-thu .ic { width: 18px; height: 18px; transition: transform .15s; }
@media (min-width: 861px) {
  body.nav-gon .nav { width: 64px; padding: 16px 8px 12px; }
  body.nav-gon .nav .brand { flex-direction: column; padding: 0 0 12px; gap: 8px; }
  body.nav-gon .nav .brand > div, body.nav-gon .nav .grp-title, body.nav-gon .nav a.item .t, body.nav-gon .nav a.item .pill,
  body.nav-gon .nav .me .who, body.nav-gon .nav .me .btn { display: none; }
  body.nav-gon .nav-thu { margin: 0; }
  body.nav-gon .nav-thu .ic { transform: rotate(180deg); }
  body.nav-gon .nav .grp + .grp { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
  body.nav-gon .nav a.item { justify-content: center; padding: 9px 0; }
  body.nav-gon .nav .me { justify-content: center; padding: 12px 0 0; }
}
@media (max-width: 860px) { .nav-thu { display: none; } }
/* Khách hàng: tiêu đề + phân trang chung 1 dòng, bớt khoảng trống phía trên */
.page:has(> .crm-lh-tit) { padding-top: 12px; }
.crm-lh-tit { margin: 0 0 8px; align-items: center; }
.crm-lh-tit b { font-size: 18px; }
.crm-lh-tit .phai { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.crm-lh-tit .phai .btn { height: 28px; min-height: 0; padding: 0 9px; margin: 0; }
/* Khách hàng › menu ⋯ trên tiêu đề cột (Lọc · Sắp xếp · Cố định · Ẩn), như CRM */
/* 27/10: tiêu đề dùng hết bề rộng cột như CRM (trước đây chừa ~50px cho nút ⋯ nên "3. Tên data" bị cắt); nút ⋯ chỉ hiện đè lên khi rê chuột */
table.crm-grid th .th-t { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
table.crm-grid th .th-menu { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: 0; border-radius: 4px; padding: 0;
  background: #f2f4f7; color: #667085; font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; box-shadow: -6px 0 6px #f2f4f7; }
table.crm-grid th:hover .th-menu, table.crm-grid th.dang-loc .th-menu { opacity: 1; }
table.crm-grid th .th-menu:hover { background: #e4e7ec; }
table.crm-grid th.dang-loc { background: var(--blue-50); color: var(--blue-700); }
table.crm-grid .ghim-trai { position: sticky; z-index: 1; }
table.crm-grid th.ghim-trai { z-index: 3; }
table.crm-grid .ghim-trai-cuoi { box-shadow: 4px 0 6px -4px rgba(0,0,0,.12); }
.cot-pop { position: fixed; z-index: 50; width: 260px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-lg); padding: 6px; font-size: 13.5px; }
.cot-pop-tit { font-weight: 600; padding: 6px 8px 8px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cot-pop > button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--ink); font: inherit; }
.cot-pop > button:hover { background: var(--hover); }
.cot-pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.cot-pop select, .cot-pop input[type=text], .cot-pop input[type=number], .cot-pop input[type=date] { width: 100%; height: 30px; margin: 0 0 8px; font-size: 13px; padding: 3px 8px; }
.cot-pop .cot-ds { max-height: 260px; overflow: auto; margin: 0 0 8px; padding: 0 4px; }
.cot-pop .cot-ds .check { display: flex; margin: 4px 0; }
.cot-pop .cot-khoang { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cot-pop .cot-khoang input { margin: 0; flex: 1; min-width: 0; }
.cot-pop .cot-nut { display: flex; gap: 6px; padding: 4px 2px 2px; border-top: 1px solid var(--line); }
/* sửa ô khách trên app (sale/sua-o.js): ô sửa được viền khi rê chuột; đang lưu chữ mờ; vừa lưu / lỗi tô nền nhạt */
.sua-duoc { cursor: pointer; }
td.sua-duoc:hover, .crm-o.sua-duoc:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.dang-luu { opacity: .55; font-style: italic; }
.cham-luu { box-shadow: inset 0 -2px 0 var(--warn); }
.vua-luu { background: var(--up-bg) !important; }
.loi-luu { background: var(--down-bg) !important; }
.sua-pop { width: 300px; }
.sua-pop.rong { width: 440px; }
.sua-pop textarea { width: 100%; margin: 0 0 8px; font: inherit; font-size: 13px; padding: 6px 8px; resize: vertical; }
.sua-pop input[type=datetime-local] { width: 100%; height: 30px; margin: 0 0 8px; font-size: 13px; padding: 3px 8px; }
/* 46. Tiến độ chăm sóc: bảng ô màu 3 cột như CRM */
.sua-pop.tien-do-pop { width: 560px; }
.tien-do-luoi { display: grid; grid-auto-flow: column; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 6px 10px; }
.tien-do-luoi button { border: 0; border-radius: 4px; color: #fff; font: inherit; font-size: 13.5px; padding: 8px 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tien-do-luoi button:hover { filter: brightness(1.08); }
.tien-do-luoi button.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); }
.tien-do-luoi button:disabled { opacity: .6; cursor: default; }
.sua-pop .sua-loi { color: var(--down); font-size: 12.5px; margin: 0 4px 8px; }
.sua-pop .sua-ghi { margin-left: auto; align-self: center; color: var(--muted); font-size: 12px; }
.cot-loc-ds { font-size: 13px; color: var(--ink-2); margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cot-loc-ds:empty { display: none; }
.cot-loc-ds .pill a { margin-left: 2px; text-decoration: none; }
@media (prefers-color-scheme: dark) { table.crm-grid th .th-menu { background: var(--sub); box-shadow: -6px 0 6px var(--sub); } table.crm-grid th .th-menu:hover { background: var(--line); } }
/* Khách hàng › khung "Bộ lọc" nhiều điều kiện như CRM (trường · kiểu lọc · giá trị, khớp tất cả / bất kỳ) */
.cot-pop.bl-pop { width: 720px; max-width: calc(100vw - 16px); padding: 12px 14px; }
.bl-pop .bl-hd { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.bl-pop .bl-hd b { font-size: 15px; }
.bl-pop .bl-hd select { width: auto; margin: 0; height: 30px; border: 0; background: transparent; font-weight: 500; color: var(--ink); cursor: pointer; }
.bl-pop .bl-dong { display: grid; grid-template-columns: 210px 140px minmax(0, 1fr) 28px; gap: 8px; align-items: start; margin: 0 0 8px; }
.bl-pop .bl-dong select, .bl-pop .bl-dong input { margin: 0; height: 32px; }
.bl-pop .bl-gt { min-width: 0; }
.bl-pop .bl-khoang { display: flex; align-items: center; gap: 6px; }
.bl-pop .bl-khoang input { flex: 1; min-width: 0; }
.bl-pop .bl-chon { position: relative; }
.bl-pop .bl-chon summary { list-style: none; height: 32px; line-height: 30px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); position: relative; }
.bl-pop .bl-chon summary::-webkit-details-marker { display: none; }
.bl-pop .bl-chon summary::after { content: ''; position: absolute; right: 11px; top: 11px; width: 6px; height: 6px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.bl-pop .bl-chon[open] summary { border-color: var(--blue); }
.bl-pop .bl-ds { position: absolute; z-index: 2; left: 0; right: 0; top: 36px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-lg); padding: 8px; }
.bl-pop .bl-ds .bl-tim { width: 100%; height: 30px; margin: 0 0 6px; }
.bl-pop .bl-ds .cot-ds { max-height: 240px; overflow: auto; margin: 0; }
.bl-pop .bl-xoa { width: 28px; height: 32px; border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; border-radius: 6px; }
.bl-pop .bl-xoa:hover { background: var(--hover); color: var(--ink); }
.bl-pop .bl-them { border: 0; background: transparent; color: var(--blue); padding: 6px 4px; cursor: pointer; font: inherit; margin: 2px 0 10px; }
.bl-pop .bl-them:hover { text-decoration: underline; }
.bl-pop .cot-nut { border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 760px) { .bl-pop .bl-dong { grid-template-columns: 1fr 1fr 28px; } .bl-pop .bl-gt { grid-column: 1 / 3; } }

/* ---------- QLL › File master (xem đủ cột) ---------- */
table.fm-t th, table.fm-t td { padding: 6px 10px; border-right: 1px solid var(--line-2); }
table.fm-t td { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.fm-t td.so { text-align: right; font-variant-numeric: tabular-nums; }
table.fm-t thead tr:nth-child(1) th { text-align: left; font-size: 12.5px; background: #eef2f8; color: var(--navy); border-bottom: 1px solid var(--line-3); }
table.fm-t thead tr:nth-child(2) th { top: 31px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
table.fm-t td.sd { cursor: cell; }
table.fm-t td.sd:hover { background: var(--blue-50); }
table.fm-t td.fm-cho, table.fm-t td.fm-da_sua { background: var(--warn-bg); }
table.fm-t td.fm-da_sua { background: var(--up-bg); }
table.fm-t td.fm-xung_dot, table.fm-t td.fm-loi, table.fm-t td.fm-o_cong_thuc { background: var(--down-bg); }
table.fm-t td.fm-dang { padding: 2px 4px; }
input.fm-in { width: 100%; min-width: 120px; height: 28px; padding: 3px 6px; font-size: 13px; margin: 0; border: 1px solid var(--blue); border-radius: 6px; box-sizing: border-box; }
details.fm-ls { margin-top: 12px; font-size: 13px; }
details.fm-ls summary { cursor: pointer; padding: 6px 0; color: var(--ink-2); }
.p-bad { background: var(--down-bg); color: var(--down); }
/* File master: bảng độ rộng cố định theo <colgroup>, nhóm cột có màu, dòng lớp màu vàng như file Excel */
table.fm-t { table-layout: fixed; width: max-content; border-collapse: separate; border-spacing: 0; }
table.fm-t thead tr:nth-child(1) th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
table.fm-t thead tr:nth-child(2) th { white-space: normal; line-height: 1.25; vertical-align: bottom; max-width: none; font-weight: 600; }
table.fm-t th.gs, table.fm-t td.gs { border-left: 1px solid var(--line-3); }
table.fm-t td.zero { color: var(--muted); }
table.fm-t thead tr:nth-child(1) th.fm-g0 { background: #eaf3fc; color: #0560ad; box-shadow: inset 0 3px 0 #0875d1; }
table.fm-t thead tr:nth-child(1) th.fm-g1 { background: #e9f6ef; color: #12753f; box-shadow: inset 0 3px 0 #16a34a; }
table.fm-t thead tr:nth-child(1) th.fm-g2 { background: #fdeee8; color: #b4491f; box-shadow: inset 0 3px 0 #eb6834; }
table.fm-t thead tr:nth-child(1) th.fm-g3 { background: #eceefc; color: #3b3fb4; box-shadow: inset 0 3px 0 #5560e0; }
table.fm-t thead tr:nth-child(1) th.fm-g4 { background: #e6f5f6; color: #0b6f78; box-shadow: inset 0 3px 0 #0e9aa7; }
table.fm-t thead tr:nth-child(1) th.fm-g5 { background: #fdf4dd; color: #8a6200; box-shadow: inset 0 3px 0 #eda100; }
table.fm-t thead tr:nth-child(1) th.fm-g6 { background: #edf0f4; color: #475569; box-shadow: inset 0 3px 0 #94a3b8; }
.fm-lop { background: #fff2b3; color: #5c4400; border: 1px solid #ecd060; border-bottom: 0; border-radius: var(--r) var(--r) 0 0; padding: 7px 14px; font-size: 13.5px; }
.fm-lop b { font-weight: 700; letter-spacing: .2px; }
.tablewrap.co-band { border-top-left-radius: 0; border-top-right-radius: 0; }
@media (prefers-color-scheme: dark) {
  .fm-lop { background: #4a3f12; color: #f5e08a; border-color: #6b5a1a; }
  table.fm-t thead tr:nth-child(1) th[class*="fm-g"] { background: var(--sub); color: var(--ink); }
}
/* File master: dòng vàng ngăn từng lớp nằm trong bảng (như tab Excel); chữ đứng yên khi cuộn ngang */
table.fm-t tr.fm-lop-tr td { background: #fff2b3; color: #5c4400; padding: 6px 12px; border-top: 1px solid #ecd060; border-bottom: 1px solid #ecd060; white-space: nowrap; overflow: visible; }
table.fm-t tr.fm-lop-tr:hover td { background: #fff2b3; }
.fm-lop-in { position: sticky; left: 12px; display: inline-block; font-size: 13.5px; }
.fm-lop-in b { font-weight: 700; letter-spacing: .2px; }
@media (prefers-color-scheme: dark) { table.fm-t tr.fm-lop-tr td, table.fm-t tr.fm-lop-tr:hover td { background: #4a3f12; color: #f5e08a; border-color: #6b5a1a; } }
/* File master: kéo mép phải tiêu đề để đổi độ rộng cột */
table.fm-t th .th-keo { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 3; }
table.fm-t th .th-keo:hover { background: var(--blue); }
.lh-cot-ds .zero { color: var(--muted); }
/* File master: kéo mép phải tiêu đề để đổi độ rộng cột */
table.fm-t th .th-keo { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 3; }
table.fm-t th .th-keo:hover { background: var(--blue); }
.lh-cot-ds .zero { color: var(--muted); }

/* ---------- HCNS › Phỏng vấn ---------- */
.pv-head { position: sticky; top: var(--top-h, 64px); z-index: 3; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 16px; box-shadow: var(--shadow-sm); }
.pv-diem-tong { font: 700 26px/1.1 var(--font-num); color: var(--blue); font-variant-numeric: tabular-nums; min-width: 3.2ch; }
.pv-tam { font-size: 11px; font-weight: 400; color: var(--muted); }
.pv-head-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pv-head-t small { color: var(--muted); font-size: 12.5px; }
.pv-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; margin-top: 4px; }
.pv-sec { margin-top: 22px; }
.pv-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; border-bottom: 2px solid var(--blue); padding-bottom: 4px; }
.pv-sec-h h3 { margin: 0; font-size: 15px; }
.pv-sec-h span { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pv-goiy { font-size: 12.5px; color: var(--ink-2); background: var(--blue-50); border-radius: var(--r-sm); padding: 8px 10px; margin: 8px 0 4px; }
.pv-q { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.pv-q.on { border-color: var(--up); }
.pv-tick { width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 2px solid var(--line-3); background: var(--panel); color: var(--up); font-size: 17px; font-weight: 700; cursor: pointer; display: grid; place-items: center; }
.pv-q.on .pv-tick { background: var(--up-bg); border-color: var(--up); }
.pv-qt { min-width: 0; }
.pv-qt b { color: var(--blue); font-variant-numeric: tabular-nums; }
.pv-ctl { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.pv-ctl textarea { flex: 1 1 200px; min-width: 0; min-height: 34px; font-size: 13px; }
.pv-diem { display: flex; gap: 4px; }
.pv-diem button { width: 36px; height: 32px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 600 14px var(--font-num); cursor: pointer; }
.pv-diem button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.pv-flag { display: flex; gap: 10px; align-items: center; margin: 6px 0 0; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: 14px; font-weight: 400; color: var(--ink); cursor: pointer; }
.pv-flag input { width: 18px; height: 18px; min-height: 0; flex: none; accent-color: var(--down); }
.pv-flag.on { border-color: var(--down); background: var(--down-bg); }
.pv-hoi { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--down); background: var(--down-bg); border-radius: var(--r-sm); font-size: 13px; }
@media (max-width: 720px) { .pv-head { top: 0; } }
/* Danh sách ứng viên: 2 cột trái cố định khi cuộn ngang */
table.pv-ds td { vertical-align: top; }
table.pv-ds .pv-c0, table.pv-ds .pv-c1, table.pv-ds .pv-c2 { position: sticky; z-index: 1; background: var(--panel); text-align: left; white-space: normal; }
table.pv-ds .pv-c0 { left: 0; width: 48px; min-width: 48px; max-width: 48px; text-align: center; color: var(--muted); }
table.pv-ds .pv-c1 { left: 48px; width: 190px; min-width: 190px; max-width: 190px; }
table.pv-ds .pv-c2 { left: 238px; width: 170px; min-width: 170px; max-width: 170px; box-shadow: inset -1px 0 0 var(--line-3); }
table.pv-ds th.pv-c0, table.pv-ds th.pv-c1, table.pv-ds th.pv-c2 { z-index: 3; background: var(--blue-50); }
table.pv-ds tbody tr:hover td.pv-c0, table.pv-ds tbody tr:hover td.pv-c1, table.pv-ds tbody tr:hover td.pv-c2 { background: var(--hover); }
table.pv-ds .pv-c1 small, table.pv-ds .pv-c2 small { display: block; font-size: 12px; margin-top: 2px; color: var(--muted); }
table.pv-ds td.pv-tt { max-width: none; white-space: nowrap; font-size: 12.5px; line-height: 1.6; }
table.pv-ds .pv-tom { width: 420px; min-width: 420px; max-width: 420px; white-space: normal; }
table.pv-ds td.pv-tom { font-size: 12.5px; line-height: 1.5; }
table.pv-ds td.pv-tom ul { margin: 0; padding-left: 16px; }
table.pv-ds td.pv-tom li + li { margin-top: 3px; }
table.pv-ds .pv-kl { width: 300px; min-width: 300px; max-width: 300px; white-space: pre-line; }
table.pv-ds td.pv-kl { font-size: 12.5px; line-height: 1.5; }
@media (max-width: 640px) { table.pv-ds .pv-c1 { width: 130px; min-width: 130px; max-width: 130px; } table.pv-ds .pv-c2 { position: static; } }
.pv-chon { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 12px; border-color: var(--line); background: var(--panel); }
.pv-tc { margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; font-size: 13px; }
.pv-tc summary { cursor: pointer; font-weight: 600; color: var(--blue); }
.pv-tc b { display: block; margin-top: 8px; }
.pv-tc ul { margin: 4px 0 0; padding-left: 18px; }
table.pv-ds .pv-cv { display: inline-flex; margin-top: 6px; min-height: 26px; padding: 2px 10px; font-size: 12px; }
.pv-cv-row { margin-bottom: 0; }
.pv-cv-row input#pvCvLink { flex: 1 1 260px; }
table.pv-ds td.pv-ngay { display: grid; grid-template-columns: auto auto; gap: 2px 10px; font-size: 12.5px; line-height: 1.5; max-width: none; }
table.pv-ds td.pv-ngay > span { color: var(--muted); }
table.pv-ds td.pv-ngay b { font-weight: 600; color: var(--ink); font-family: var(--font-num); }
/* Phiếu PV: trước phỏng vấn, ghi âm */
.pv-o2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 12px; }
.pv-o2 .pv-full { grid-column: 1 / -1; }
.pv-ga { margin: 8px 0; }
.pv-ga .pv-dang-ghi { background: var(--down); border-color: var(--down); }
.pv-ga-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pv-ga-f span { flex: 1 1 220px; }
.pv-ga-f audio { flex: 1 1 260px; max-width: 100%; height: 36px; }
#pvGaDs > a { display: inline-block; margin: 6px 0; font-weight: 600; color: var(--down); }
.pv-loc { width: auto; min-width: 200px; margin: 0 0 0 8px; }
.pv-chon[hidden] { display: none; }
.pv-ai-ga { font-size: 13px; margin: 6px 0 10px; line-height: 1.8; }