/* =============================================================================
   wayfare-core.css — COPY VERBATIM từ crm-du-hoc-v2.html gốc (dòng 16–519,
   toàn bộ khối <style> chính của file). ĐÂY LÀ NGUỒN CHUẨN DUY NHẤT cho biến
   màu (--brand, --gold...), font, và mọi class bố cục/thành phần (topbar,
   sidebar, kpi-card, table.data, .btn, .pop...) — không sửa tay file này,
   nếu bản gốc đổi thiết kế thì copy lại nguyên khối tương ứng.

   Load SAU Bootstrap CDN, TRƯỚC bootstrap-map.css, trong _Layout.cshtml.
   ============================================================================= */

:root{
  --bg:#F5F6FA; --surface:#FFFFFF; --surface-alt:#EEF1F8;
  --ink:#1B2138; --ink-soft:#616A82; --ink-faint:#98A0B4;
  --brand:#1E2A4A; --brand-light:#33436E; --brand-deep:#131B30;
  --gold:#E3A542; --gold-soft:#FCEFD8; --coral:#E8604C; --coral-soft:#FBE6E2;
  --success:#2F9E6E; --success-soft:#E2F4EC; --blue:#3B6FE0; --blue-soft:#E8ECFB;
  --purple:#8B5CF6; --purple-soft:#F1ECFE;
  --border:#E3E6EF; --shadow:0 8px 24px -12px rgba(19,27,48,0.18); --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
/* Chặn overflow ngang ngay tại .view (khung nội dung từng trang) thay vì ở body/html.
   .view không bọc topbar hay sidebar nên không ảnh hưởng position:sticky của chúng —
   đây là lý do đặt ở body/html trước đó làm mất sticky topbar trên mobile. */
body{ font-family:'Be Vietnam Pro',sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
/* overflow-x:hidden ở body: chặn các khối con quá rộng (bảng dữ liệu nhiều cột, banner...)
   kéo giãn toàn trang ra ngoài màn hình trên mobile. Các khối có overflow-x:auto riêng
   (.table-wrap) vẫn cuộn ngang bình thường TRONG khung của nó — không mất chức năng gì,
   người dùng chỉ cần vuốt ngang trong khu vực bảng thay vì cả trang bị trôi lệch.
   Không ảnh hưởng desktop vì màn hình rộng vốn không có phần tử nào vượt viewport. */
h1,h2,h3,.display{ font-family:'Be Vietnam Pro',sans-serif; }
.mono{ font-family:'IBM Plex Mono',monospace; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,select,textarea{ font-family:inherit; }

/* ================= TOPBAR ================= */
.topbar{ height:58px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 18px; gap:6px; position:sticky; top:0; z-index:50; }
.tb-brand{ display:flex; align-items:center; gap:9px; padding-right:14px; margin-right:8px; border-right:1px solid var(--border); }
.tb-logo{ width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--gold),#c97d1f); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tb-logo svg{ width:16px; height:16px; }
.tb-company{ display:flex; align-items:center; gap:5px; font-size:13.5px; font-weight:700; color:var(--ink); max-width:150px; }
.tb-company span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.toptabs{ display:flex; align-items:center; gap:2px; height:100%; }
.toptab{ position:relative; height:100%; display:flex; align-items:center; padding:0 15px; font-size:14px; font-weight:600; color:var(--ink-soft); }
.toptab:hover{ color:var(--ink); }
.toptab.active{ color:var(--ink); font-weight:700; }
.toptab.active::after{ content:''; position:absolute; left:14px; right:14px; bottom:0; height:2.5px; background:var(--brand); border-radius:2px 2px 0 0;}

/* ---- Tab trên cùng có menu xổ xuống khi rê chuột ----
   Mở bằng :hover THUẦN CSS, không cần JavaScript — menu này phải chạy được kể
   cả khi một đoạn script nào đó lỗi (đúng bài học từ lỗi wfBindToggleAllDates).
   Bọc cả nút và menu trong .toptab-wrap để chuột đi từ nút xuống menu không bị
   coi là "rời khỏi vùng hover". */
.toptab-wrap{ position:relative; height:100%; display:flex; align-items:center; }
.toptab-caret{ margin-left:5px; font-size:10px; opacity:0.65; }
.toptab-menu{
  position:absolute; top:100%; left:6px; min-width:210px; z-index:60;
  background:var(--surface,#fff); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 12px 32px rgba(19,27,48,0.14); padding:6px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
}
.toptab-wrap:hover .toptab-menu,
.toptab-wrap:focus-within .toptab-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.toptab-mi{
  display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:9px;
  font-size:13.5px; font-weight:600; color:var(--ink-soft); text-decoration:none; white-space:nowrap;
}
.toptab-mi .ic{ font-size:15px; line-height:1; }
.toptab-mi:hover{ background:var(--surface-alt); color:var(--ink); }
.toptab-mi.active{ background:var(--brand); color:#fff; }
@media (prefers-reduced-motion: reduce){ .toptab-menu{ transition:none; } }
.tb-spacer{ flex:1; }
.tb-icons{ display:flex; align-items:center; gap:4px; }
.tb-btn{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); position:relative; }
.tb-btn:hover{ background:var(--surface-alt); color:var(--ink); }
.tb-btn svg{ width:18px; height:18px; }
.tb-dot{ position:absolute; top:6px; right:6px; background:var(--coral); color:#fff; font-size:9.5px; font-weight:800; min-width:15px; height:15px; border-radius:20px; display:flex; align-items:center; justify-content:center; padding:0 3px;}
.checkin-btn{ display:flex; align-items:center; gap:7px; background:var(--surface-alt); padding:7px 12px; border-radius:10px; font-size:13px; font-weight:700; color:var(--ink-soft); margin-right:4px;}
.checkin-btn.done{ background:var(--success-soft); color:var(--success); }
.sync-indicator{ font-size:11px; font-weight:700; padding:5px 10px; border-radius:20px; margin-right:6px; cursor:default; white-space:nowrap; }
.sync-indicator.sync-ok{ color:var(--success); background:var(--success-soft); }
.sync-indicator.sync-saving{ color:var(--ink-soft); background:var(--surface-alt); }
.sync-indicator.sync-error{ color:var(--coral); background:var(--coral-soft); cursor:pointer; }
.checkin-btn svg{ width:14px; height:14px; }
.tb-avatar{ display:flex; align-items:center; gap:8px; padding:5px 8px 5px 5px; border-radius:10px; margin-left:4px; }
.tb-avatar:hover{ background:var(--surface-alt); }
.tb-avatar .av{ width:29px; height:29px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }

/* popovers */
.pop{ position:fixed; top:52px; right:14px; width:290px; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); z-index:60; display:none; overflow:hidden;}
.pop.show{ display:block; }
.pop-head{ padding:12px 15px; font-size:13px; font-weight:700; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;}
.pop-head a{ font-size:11.5px; color:var(--blue); font-weight:600; }
.pop-item{ padding:11px 15px; border-bottom:1px solid var(--border); font-size:12.5px; display:flex; gap:9px; align-items:flex-start; }
.pop-item:last-child{ border-bottom:none; }
.pop-item .d{ width:7px; height:7px; border-radius:50%; background:var(--coral); margin-top:5px; flex-shrink:0; }
.pop-item.read .d{ background:var(--border); }
.pop-item .t{ color:var(--ink-soft); font-size:10.5px; margin-top:2px;}
.pop-empty{ padding:22px 15px; text-align:center; color:var(--ink-soft); font-size:12.5px; }
.pop-menu-item{ display:block; width:100%; text-align:left; padding:11px 15px; font-size:13px; font-weight:600; color:var(--ink); }
.pop-menu-item:hover{ background:var(--surface-alt); }

/* ================= LAYOUT ================= */
.app{ display:flex; }
.sidebar{ width:224px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); height:calc(100vh - 58px); overflow-y:auto; position:sticky; top:58px; padding:14px 10px 30px; }
/* Chỉ báo "còn nội dung phía dưới" — sticky bottom bên trong sidebar cuộn được.
   height:0 + overflow:visible ở div cha để KHÔNG chiếm thêm không gian layout;
   div con sticky sẽ tự "nổi" đúng đáy khung nhìn khi còn nội dung chưa cuộn tới,
   và biến mất tự nhiên khi đã cuộn hết (vì cha nó đã hết chiều cao để sticky bám vào). */
.sidebar-fade-wrap{ height:0; overflow:visible; }
.sidebar-fade{ position:sticky; bottom:0; height:22px; margin-top:-22px; background:linear-gradient(to bottom, transparent, var(--surface)); pointer-events:none; }
.sb-head, .sb-subhead{ width:100%; display:flex; align-items:center; gap:9px; padding:9px 8px; font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); border-radius:8px; }
.sb-head svg, .sb-subhead svg{ width:15px; height:15px; }
.sb-head:hover, .sb-subhead:hover{ color:var(--brand); }
.sb-subhead{ padding-left:14px; font-size:11.5px; margin-top:4px; }
.sb-head .chev, .sb-subhead .chev{ margin-left:auto; font-size:10px; }
.sb-group-body{ margin-bottom:2px; }
.sb-leaves{ padding-left:8px; }
.sb-leaf{ display:flex; align-items:center; width:100%; text-align:left; padding:8px 10px 8px 30px; font-size:13.5px; font-weight:500; color:var(--ink-soft); border-radius:9px; margin-bottom:1px; }
.sb-leaf:hover{ background:var(--surface-alt); color:var(--ink); }
/* Trang ĐANG MỞ. Thêm vạch dọc bên trái ngoài nền xanh nhạt: nền nhạt một mình
   dễ lẫn với trạng thái di chuột (:hover cũng đổi nền), nên nhìn lướt không biết
   đang ở trang nào. Vạch màu thương hiệu thì chỉ mục đang mở mới có. */
.sb-leaf.active{ background:var(--blue-soft); color:var(--brand); font-weight:700; position:relative; }
.sb-leaf.active::before{ content:''; position:absolute; left:8px; top:7px; bottom:7px; width:3px; border-radius:2px; background:var(--brand); }
/* Tiêu đề nhóm đang chứa trang mở — thấy được cả khi dòng lá đã cuộn khuất. */
.sb-head.sb-has-active, .sb-subhead.sb-has-active{ color:var(--brand); }
.sb-leaf .badge{ margin-left:auto; background:var(--coral); color:#fff; font-size:10px; font-weight:800; padding:1px 6px; border-radius:20px; }

.main{ flex:1; min-width:0; }
/* CỐ Ý KHÔNG đặt max-width: khung nội dung này dùng chung cho MỌI trang (khai
   một lần ở _Layout.cshtml), nên trần cứng ở đây từng để bảng/biểu (vd danh
   sách Lead) chừa khoảng trắng lớn bên phải trên màn hình rộng thay vì kín
   theo đúng bề ngang thật của cửa sổ. .main đã tự co giãn theo sidebar
   (flex:1), nên .view chỉ cần width:100% + padding — responsive cho
   iPad/iPhone vẫn nguyên vẹn vì mọi @media(max-width:...) khác trong file
   này không phụ thuộc giá trị max-width đã bỏ. */
.view{ padding:24px 28px 60px; width:100%; }
.view-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap;}
.view-head h1{ font-size:23px; font-weight:600; }
.view-head p{ color:var(--ink-soft); font-size:13.5px; margin-top:4px; max-width:640px;}
.eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:0.11em; color:var(--gold); font-weight:700; margin-bottom:4px; }

.btn{ display:inline-flex; align-items:center; gap:7px; padding:9.5px 16px; border-radius:10px; font-size:13.5px; font-weight:600; white-space:nowrap;}
/* Thẻ liên kết dùng làm nút thì KHÔNG được gạch chân — trong dự án có hàng chục
   chỗ viết <a class="btn">, mỗi chỗ tự thêm text-decoration:none là sớm muộn sót.
   Khai một lần ở đây cho tất cả. */
a.btn, a.btn:hover, a.btn:focus, a.btn:visited{ text-decoration:none; }
.btn svg{ width:15px; height:15px;}
.btn-primary{ background:var(--brand); color:#fff; } .btn-primary:hover{ background:var(--brand-light); }
.btn-gold{ background:var(--gold); color:#3A2A08; }
.btn-ghost{ background:var(--surface-alt); color:var(--ink); } .btn-ghost:hover{ background:#E3E7F1; }
.btn-outline{ border:1px solid var(--border); color:var(--ink-soft); } .btn-outline:hover{ border-color:var(--brand); color:var(--brand); }
.btn-sm{ padding:6px 11px; font-size:12.5px; border-radius:8px;}
.btn-block{ width:100%; justify-content:center; }
/* Nút hành động TÍCH CỰC của Trung tâm (Khai giảng, Bắt đầu buổi học) — xanh ngọc
   tươi, tách hẳn khỏi xanh thương hiệu (điều hướng) và đỏ (nguy hiểm), để nhìn
   một cái là biết đây là nút "bắt đầu làm việc". */
.btn-teal{ background:linear-gradient(135deg,#10B981,#06B6D4); color:#fff; border:none; box-shadow:0 2px 8px rgba(16,185,129,0.28); }
.btn-teal:hover{ background:linear-gradient(135deg,#059669,#0891B2); box-shadow:0 4px 14px rgba(16,185,129,0.38); }
.btn-teal:active{ transform:translateY(1px); }
@media (prefers-reduced-motion: reduce){ .btn-teal:active{ transform:none; } }

/* ============ WORKSPACE (Bàn làm việc) ============ */
.ws-banner{ background:linear-gradient(120deg,var(--brand-deep),var(--brand) 70%); border-radius:18px; padding:24px 26px; color:#fff; position:relative; overflow:hidden; margin-bottom:18px;}
.ws-banner::after{ content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(227,165,66,0.22),transparent 70%);}
.ws-top-row{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; position:relative; z-index:1;}
.ws-hello{ display:flex; align-items:center; gap:13px;}
.ws-hello .av{ width:46px; height:46px; border-radius:12px; background:var(--gold); color:var(--brand-deep); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center;}
.ws-hello h2{ font-size:20px; font-weight:600; }
.ws-hello .role{ font-size:12.5px; color:#B7C0DC; margin-top:2px;}
.ai-briefing{ display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.12); padding:9px 14px; border-radius:20px; font-size:12.5px; font-weight:700; color:var(--gold); }
.ws-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; position:relative; z-index:1;}
.ws-stat{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); border-radius:12px; padding:14px 16px;}
.ws-stat .l{ font-size:12px; color:#B7C0DC; font-weight:600; display:block;}
.ws-stat .v{ font-size:22px; font-weight:700; margin-top:5px; font-family:'Be Vietnam Pro',sans-serif; display:block;}
/* Ô số liệu trên banner Bàn làm việc khi là liên kết — nền tối nên sáng lên khi rê
   chuột thay vì đổ bóng (bóng đen trên nền đen không thấy gì). */
a.ws-stat{ display:block; text-decoration:none; color:#fff; transition:background .12s ease, border-color .12s ease, transform .12s ease; }
a.ws-stat:hover, a.ws-stat:focus, a.ws-stat:visited{ text-decoration:none; color:#fff; }
a.ws-stat:hover{ background:rgba(255,255,255,0.13); border-color:rgba(255,255,255,0.24); transform:translateY(-2px); }
a.ws-stat:active{ transform:translateY(0); }
a.ws-stat:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ a.ws-stat{ transition:none; } a.ws-stat:hover{ transform:none; } }
.ws-stat.gold .v{ color:var(--gold); } .ws-stat.blue .v{ color:#7DA6FF; } .ws-stat.green .v{ color:#6FE0AE; } .ws-stat.pink .v{ color:#F0A8D0; }

.quick-actions{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px;}
.qa-btn{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px 10px; display:flex; flex-direction:column; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--ink); transition:.15s;}
.qa-btn:hover{ border-color:var(--brand); transform:translateY(-1px); box-shadow:var(--shadow);}
.qa-icon{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.qa-icon svg{ width:19px; height:19px; }

.ws-grid{ display:grid; grid-template-columns:2fr 2.6fr 1.6fr; gap:16px; align-items:start; }

/* ── Workspace 2026 cards ── */
.ws-card{
  background:var(--surface); border:1.5px solid var(--border); border-radius:14px;
  padding:16px 18px; transition:box-shadow .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.ws-card:hover{ box-shadow:0 3px 12px rgba(0,0,0,.07); }
.ws-card-urgent{ border-color:#FCA5A5; background:#FFF8F8; }
.ws-card-warn{ border-color:#FCD34D; background:#FFFBEB; }
.ws-card-info{ border-color:#93C5FD; background:#EFF6FF; }
.ws-action-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--border);
  transition:background .1s; border-radius:0;
}
.ws-action-row:last-child{ border-bottom:none; }
.ws-action-row[data-lead-open]:hover{ background:var(--surface-alt); border-radius:8px; padding-left:6px; padding-right:6px; margin:0 -6px; }
.av-sm{ width:32px; height:32px; border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }

/* ── Lịch nghỉ phép dạng Gantt (tab "Lịch nghỉ" trong Nhân sự) ── */
.leave-cal-grid{ border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.leave-cal-dow-row{ display:grid; grid-template-columns:repeat(7,1fr); background:var(--surface-alt); border-bottom:1px solid var(--border); }
.leave-cal-dow{ text-align:center; padding:9px 0; font-size:11px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.leave-cal-week{ border-bottom:1px solid var(--border); }
.leave-cal-week:last-child{ border-bottom:none; }
.leave-cal-daynum-row{ display:grid; grid-template-columns:repeat(7,1fr); padding-top:6px; }
.leave-cal-daynum{ text-align:center; }
.leave-cal-daynum.outside{ visibility:hidden; }
.leave-cal-daynum .num-badge{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:12.5px; font-weight:600; color:var(--ink); }
.leave-cal-daynum .num-badge.today{ background:var(--brand); color:#fff; font-weight:800; }
.leave-cal-bars-area{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px 0; padding:5px 3px 6px; }
.leave-bar{
  height:22px; border-radius:4px; margin:0 1px; display:flex; align-items:center; padding:0 7px;
  font-size:10.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer; position:relative; box-shadow:0 1px 2px rgba(0,0,0,.08); transition:transform .12s,box-shadow .12s;
}
.leave-bar:hover{ transform:translateY(-1px) scale(1.01); box-shadow:0 3px 10px rgba(0,0,0,.2); z-index:6; }
.leave-bar.seg-start{ border-top-left-radius:11px; border-bottom-left-radius:11px; padding-left:9px; }
.leave-bar.seg-end{ border-top-right-radius:11px; border-bottom-right-radius:11px; }
.leave-bar:not(.seg-start){ margin-left:0; }
.leave-bar:not(.seg-end){ margin-right:0; }
.leave-bar-label{ overflow:hidden; text-overflow:ellipsis; }
/* Tooltip lịch nghỉ — 3 tầng: tên · khoảng ngày · lý do.
   KHÔNG dùng white-space:nowrap nữa: lý do nghỉ dài tới 500 ký tự, để nowrap là
   một dải chữ chạy tràn ra khỏi màn hình. Thay bằng chiều rộng có trần và cho
   xuống dòng. */
.leave-tooltip{
  display:none; position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%);
  background:#111827; color:#fff; padding:7px 11px; border-radius:8px; font-size:11.5px; font-weight:600;
  box-shadow:0 6px 16px rgba(0,0,0,.28); z-index:30; pointer-events:none;
  min-width:150px; max-width:260px; width:max-content; text-align:left; line-height:1.45;
  white-space:normal; overflow-wrap:anywhere;
}
.leave-tooltip > span{ display:block; }
.leave-tip-name{ font-weight:800; font-size:12px; }
.leave-tip-when{ font-weight:600; color:#D1D5DB; font-size:10.5px; margin-top:1px; }
/* Lý do tách khỏi hai dòng trên bằng một vạch mờ — đọc lướt vẫn thấy ngay đâu là
   thông tin lịch, đâu là lời người xin nghỉ viết. Cắt ở 4 dòng: dài hơn nữa thì
   mở đơn mà đọc, tooltip không phải chỗ đọc văn bản. */
/* Bắt buộc viết ".leave-tooltip > span.leave-tip-why" chứ KHÔNG phải
   ".leave-tip-why": luật ".leave-tooltip > span { display:block }" ngay trên có
   độ ưu tiên CAO HƠN một tên lớp đơn lẻ, nên nó sẽ đè mất display:-webkit-box
   và -webkit-line-clamp lặng lẽ ngừng hoạt động. */
.leave-tooltip > span.leave-tip-why{
  margin-top:5px; padding-top:5px; border-top:1px solid rgba(255,255,255,.18);
  font-weight:500; color:#F3F4F6; font-style:italic;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.leave-tooltip::after{ content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#111827; }
.leave-bar:hover .leave-tooltip{ display:block; }
.leave-cal-overflow-row{ display:grid; grid-template-columns:repeat(7,1fr); padding:0 3px 6px; }
.leave-cal-overflow{ font-size:10px; color:var(--ink-soft); font-weight:600; padding-left:8px; cursor:default; }

/* ── Ký túc xá — thẻ phòng trong danh sách tòa nhà ── */
.dorm-room-card{ background:var(--surface-alt); border:1.5px solid var(--border); border-radius:11px; padding:12px 14px; cursor:pointer; transition:transform .12s,box-shadow .12s; }
.dorm-room-card:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.08); border-color:var(--brand); }
.dorm-room-card.full{ background:#FFF7F7; border-color:#FCA5A5; }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; margin-bottom:16px;}
.card h3{ font-size:14.5px; font-weight:700; }
.card .sub{ font-size:11.5px; color:var(--ink-soft); margin-top:1px;}
.card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.card-head a{ font-size:12px; color:var(--blue); font-weight:700;}
.task-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px;}
.task-row:last-child{ border-bottom:none; }
.task-chk{ width:17px; height:17px; border-radius:5px; border:1.5px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.task-chk.done{ background:var(--success); border-color:var(--success); color:#fff; font-size:11px;}
.task-row .meta{ font-size:11px; color:var(--ink-soft); margin-top:2px;}

.mini-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.mini-stat{ border-radius:10px; padding:12px 13px;}
.mini-stat .v{ font-size:18px; font-weight:800; font-family:'Be Vietnam Pro',sans-serif;}
.mini-stat .l{ font-size:11.5px; font-weight:600; margin-top:2px;}
.ms-blue{ background:var(--blue-soft); color:var(--blue); } .ms-gold{ background:var(--gold-soft); color:#9C6A11;}
.ms-coral{ background:var(--coral-soft); color:var(--coral);} .ms-green{ background:var(--success-soft); color:var(--success);}

.cps-row{ display:flex; align-items:center; gap:10px; padding:5px 0; }
.cps-name{ width:118px; flex-shrink:0; font-size:12.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cps-bar-wrap{ flex:1; height:8px; background:var(--surface-alt); border-radius:5px; overflow:hidden; }
.cps-bar{ height:100%; background:var(--blue); border-radius:5px; transition:width .3s ease; }
.cps-count{ width:24px; flex-shrink:0; text-align:right; font-size:12.5px; font-weight:700; color:var(--ink); }

.achv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.achv{ border-radius:12px; padding:18px 10px; text-align:center;}
.achv .n{ font-size:24px; font-weight:800; font-family:'Be Vietnam Pro',sans-serif; margin:6px 0 2px;}
.achv .l{ font-size:11.5px; font-weight:700;}
.achv-1{ background:var(--gold-soft); color:#9C6A11;} .achv-2{ background:var(--success-soft); color:var(--success);} .achv-3{ background:var(--purple-soft); color:var(--purple);}

/* right col */
.rc-clock{ text-align:left;}
.rc-clock .day{ font-size:13px; font-weight:700;}
.rc-clock .time{ font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:600; margin:4px 0;}
.rc-clock .status{ font-size:12px; color:var(--ink-soft);}
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.cal-nav{ width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--ink-soft);}
.cal-nav:hover{ background:var(--surface-alt);}
table.cal{ width:100%; border-collapse:collapse; }
table.cal th{ font-size:10.5px; color:var(--ink-faint); font-weight:700; padding:4px 0; }
table.cal td{ text-align:center; font-size:12.5px; padding:5px 0; color:var(--ink);}
table.cal td.other{ color:var(--ink-faint); }
table.cal td .d{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto; }
table.cal td .d.today{ background:var(--brand); color:#fff; font-weight:700;}
.progress{ height:6px; background:var(--surface-alt); border-radius:20px; overflow:hidden; margin-top:6px;}
.progress i{ display:block; height:100%; background:var(--brand); border-radius:20px; }
.leave-row, .goal-row{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px;}
.goal-block{ margin-bottom:14px;} .goal-block:last-child{ margin-bottom:0;}

/* ============ KPI / DASHBOARD ============ */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px;}
.kpi-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px;}
.kpi-card.kpi-clickable{ cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; position:relative; }
.kpi-card.kpi-clickable:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(19,27,48,0.10); }
/* Thẻ KPI bấm được là thẻ <a> THẬT (bản HTML gốc dùng div + JS) — nhờ vậy
   Ctrl+click/chuột giữa mở tab mới, phím Tab đi tới được, trình đọc màn hình đọc
   ra "liên kết". Chỉ cần gỡ phần trang trí mặc định của <a> để trông y hệt thẻ cũ. */
a.kpi-card{ display:block; text-decoration:none; color:inherit; }
a.kpi-card:hover, a.kpi-card:focus, a.kpi-card:visited{ text-decoration:none; color:inherit; }
.kpi-card.kpi-clickable:active{ transform:translateY(0); box-shadow:none; }
.kpi-card.kpi-clickable:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
/* Mũi tên chỉ hiện lúc rê chuột — cho biết thẻ này bấm được mà không làm rối mặt
   bảng khi đứng yên. */
.kpi-card.kpi-clickable::after{ content:'\2192'; position:absolute; top:12px; right:14px; font-size:14px; font-weight:700; color:var(--ink-soft); opacity:0; transform:translateX(-4px); transition:opacity .12s ease, transform .12s ease; pointer-events:none; }
.kpi-card.kpi-clickable:hover::after, .kpi-card.kpi-clickable:focus-visible::after{ opacity:.75; transform:translateX(0); }
/* Ô số liệu nền màu ở Ký túc xá / Quản sinh KHÔNG dùng .kpi-card (bản gốc vẽ
   riêng: bo 14px, nền pastel, emoji) — giữ nguyên hình thức đó, chỉ mượn thêm
   hiệu ứng rê chuột + biến thành liên kết thật. */
a.tile-clickable{ display:block; text-decoration:none; color:inherit; cursor:pointer; position:relative; transition:transform .12s ease, box-shadow .12s ease; }
a.tile-clickable:hover, a.tile-clickable:focus, a.tile-clickable:visited{ text-decoration:none; color:inherit; }
a.tile-clickable:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(19,27,48,0.10); }
a.tile-clickable:active{ transform:translateY(0); box-shadow:none; }
a.tile-clickable:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
a.tile-clickable::after{ content:'\2192'; position:absolute; top:12px; right:14px; font-size:14px; font-weight:700; opacity:0; transform:translateX(-4px); transition:opacity .12s ease, transform .12s ease; pointer-events:none; }
a.tile-clickable:hover::after, a.tile-clickable:focus-visible::after{ opacity:.6; transform:translateX(0); }
@media (prefers-reduced-motion: reduce){
  .kpi-card.kpi-clickable, .kpi-card.kpi-clickable::after,
  a.tile-clickable, a.tile-clickable::after{ transition:none; }
  .kpi-card.kpi-clickable:hover, a.tile-clickable:hover{ transform:none; }
}
/* Thanh "Lead Pipeline" ở Tổng quan CRM — bấm vào 1 giai đoạn là sang danh sách
   Lead đã lọc sẵn giai đoạn đó. */
a.crm-pipe-row{ display:flex; align-items:center; gap:12px; margin:0 -6px 9px; padding:3px 6px; border-radius:9px; text-decoration:none; color:inherit; transition:background .12s ease; }
a.crm-pipe-row:hover, a.crm-pipe-row:focus, a.crm-pipe-row:visited{ text-decoration:none; color:inherit; }
a.crm-pipe-row:hover{ background:var(--surface-alt); }
a.crm-pipe-row:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }
@media (prefers-reduced-motion: reduce){ a.crm-pipe-row{ transition:none; } }
.kpi-card .icon{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.kpi-card .icon svg{ width:17px; height:17px;}
.kpi-label{ font-size:12px; color:var(--ink-soft); font-weight:600; }
.kpi-value{ font-family:'Be Vietnam Pro',sans-serif; font-size:26px; font-weight:600; margin-top:2px;}
.kpi-delta{ font-size:11.5px; font-weight:600; margin-top:6px; }
.up{ color:var(--success); } .down{ color:var(--coral); }
.grid-2{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-bottom:20px;}

/* journey */
.journey-steps{ display:flex; justify-content:space-between; margin-top:2px; }
.journey-step{ text-align:center; flex:1; font-size:10.5px; color:var(--ink-faint); font-weight:600; }

/* ============ TABLE ============ */
.table-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow-x:auto; overflow-y:hidden;}
table.data{ width:100%; border-collapse:collapse; font-size:13.5px;}
table.data thead th{ text-align:left; padding:12px 16px; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); background:var(--surface-alt); font-weight:700; border-bottom:1px solid var(--border);}
table.data tbody td{ padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle;}
table.data tbody tr:last-child td{ border-bottom:none; }
table.data tbody tr{ transition:.12s; }
table.data tbody tr.clickable:hover{ background:#FAFBFD; cursor:pointer; }
.name-cell{ display:flex; align-items:center; gap:10px; }
.avatar{ width:34px; height:34px; border-radius:50%; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; color:var(--brand); flex-shrink:0;}
.name-cell .who .full{ font-weight:600; }
.name-cell .who .sub{ font-size:11.5px; color:var(--ink-soft); }
.phone{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-soft);}
.tag{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:20px; white-space:nowrap;}
.tag-dot{ width:6px; height:6px; border-radius:50%; }
.stars{ display:inline-flex; gap:2px; } .stars svg{ width:14px; height:14px;} .stars.lg svg{ width:19px; height:19px;}
.star-fill{ color:var(--gold);} .star-empty{ color:#E1E4EE;}
.score-badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:20px; font-size:12px; font-weight:700;}
.score-high{ background:var(--success-soft); color:var(--success);} .score-mid{ background:var(--gold-soft); color:#9C6A11;} .score-low{ background:#EDEEF3; color:var(--ink-soft);}

.filter-bar{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center;}
.chip-filter{ display:flex; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px 12px; font-size:13px; font-weight:600; color:var(--ink-soft); align-items:center;}
.chip-filter select{ border:none; outline:none; background:none; font-weight:600; color:var(--ink); font-size:13px; }

/* ============ KANBAN ============ */
.kanban{ display:flex; gap:14px; overflow-x:auto; padding-bottom:14px; }
.kcol{ min-width:250px; flex-shrink:0; background:var(--surface-alt); border-radius:var(--radius); padding:12px; }
.kcol-head{ display:flex; align-items:center; justify-content:space-between; padding:4px 6px 12px; }
.kcol-head .t{ font-size:12.5px; font-weight:700; color:var(--brand);}
.kcol-head .n{ font-size:11px; background:#fff; border-radius:20px; padding:2px 8px; font-weight:700; color:var(--ink-soft);}
.kcard{ background:#fff; border:1px solid var(--border); border-radius:11px; padding:12px; margin-bottom:10px; cursor:grab; box-shadow:0 1px 2px rgba(19,27,48,0.04);}
.kcard:hover{ border-color:var(--brand); }
.kcard.dragging{ opacity:0.4; }
.kcard .kname{ font-weight:600; font-size:13.5px; }
.kcard .kmeta{ font-size:11px; color:var(--ink-soft); margin-top:3px; }
.kcard .kfoot{ display:flex; align-items:center; justify-content:space-between; margin-top:9px; }
.kcol.dragover{ outline:2px dashed var(--brand); outline-offset:-4px; }

/* ============ PANEL / MODAL ============ */
.overlay{ position:fixed; inset:0; background:rgba(19,23,38,0.42); z-index:100; display:none; }
.overlay.show{ display:block; }
.panel{ position:fixed; top:0; right:0; height:100vh; width:440px; background:var(--surface); z-index:101; box-shadow:-16px 0 40px rgba(19,27,48,0.18); transform:translateX(100%); transition:transform .25s ease; overflow-y:auto; }
/* SỬA LỖI: bootstrap-map.css nạp SAU file này và cũng có ".panel{overflow:hidden}"
   (dành cho Bootstrap panel/card component — trùng tên, khác mục đích hoàn toàn) —
   đè mất overflow-y:auto ở trên, khiến panel trượt hồ sơ khách hàng KHÔNG cuộn được.
   Chọn theo ID (#lead-panel) để độ ưu tiên CSS luôn cao hơn class .panel bất kể thứ
   tự nạp file, đảm bảo cuộn được chắc chắn. */
#lead-panel{ overflow-y:auto !important; }
/* .panel-body CŨNG bị bootstrap-map.css định nghĩa trùng tên (padding:16px cho
   Bootstrap card component) — đè mất padding:20px 22px 40px ở dòng dưới. Không
   gây lỗi cuộn nhưng sai khoảng cách — sửa cùng cách theo phạm vi #lead-panel. */
#lead-panel .panel-body{ padding:20px 22px 40px !important; }
.panel.show{ transform:translateX(0); }
.panel-head{ padding:22px 22px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface); z-index:2;}
.panel-close{ position:absolute; top:20px; right:20px; width:30px; height:30px; border-radius:50%; background:var(--surface-alt); display:flex; align-items:center; justify-content:center;}
.panel-body{ padding:20px 22px 40px; }
.pfield{ margin-bottom:16px; }
.pfield label{ display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin-bottom:6px;}
.crit-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border); }
.crit-row:last-child{ border-bottom:none; }
.crit-name{ font-size:13px; font-weight:600; }
.crit-desc{ font-size:11px; color:var(--ink-soft); margin-top:1px; }

#contract-print-view{ display:none; }
body.printing-contract > .topbar, body.printing-contract > .app, body.printing-contract > .overlay, body.printing-contract > .mobile-nav-panel{ display:none !important; }
body.printing-contract #contract-print-view{ display:block; max-width:820px; margin:0 auto; padding:40px 48px; background:#fff; font-size:13.5px; line-height:1.7; color:#1a1a1a; }
.cpv-toolbar{ position:sticky; top:0; background:#fff; border-bottom:1px solid var(--border); padding:14px 20px; display:flex; justify-content:flex-end; gap:10px; margin:0 -48px 30px -48px; }
.cpv-body table{ page-break-inside:avoid; }
#receipt-print-view{ display:none; }
body.printing-receipt > .topbar, body.printing-receipt > .app, body.printing-receipt > .overlay, body.printing-receipt > .mobile-nav-panel{ display:none !important; }
body.printing-receipt #receipt-print-view{ display:block; max-width:820px; margin:0 auto; padding:40px 48px; background:#fff; font-size:13.5px; line-height:1.7; color:#1a1a1a; }
@media print{
  @page{ size:A4; margin:16mm; }
  .no-print{ display:none !important; }
  body.printing-contract #contract-print-view{ padding:0; }
  body.printing-receipt #receipt-print-view{ padding:0; }
}
.modal-bg{ position:fixed; inset:0; background:rgba(19,23,38,0.5); z-index:1000; display:none; align-items:center; justify-content:center; padding:20px;}
.modal-bg.show{ display:flex; }
/* Modal hiện ra nhưng lệch trái (không căn giữa) — chọn theo ID để chắc chắn
   display:flex + width:100% thắng, phòng trường hợp có luật khác đang lấn át
   tương tự lỗi .modal/.panel trước đó. */
#modal-bg.show{ display:flex !important; width:100% !important; left:0 !important; right:0 !important; top:0 !important; bottom:0 !important; }
/* CỐ Ý KHÔNG đặt max-width ở đây nữa.
   Ba dấu !important bên dưới sinh ra để sửa lỗi modal lệch trái. Nhưng
   max-width:520px !important thì đè luôn .wf-modal-lg (820px, không có
   !important), nên MỌI modal khai "rộng" vẫn bị bóp về 520px: màn hình điểm
   danh, xem trước hợp đồng, wizard 3 bước tạo hợp đồng, xếp phòng ký túc xá...
   Chiều rộng để .wf-modal / .wf-modal.wf-modal-lg tự quyết; ở đây chỉ giữ
   phần thật sự cần cho việc căn giữa. */
#generic-modal{ width:100% !important; margin:0 auto !important; flex-shrink:0; }
/* Vẫn phải mạnh hơn .wf-modal (chọn theo id) để luật rộng thắng chắc chắn. */
#generic-modal.wf-modal-lg{ max-width:820px; }
.rte-toolbar{ display:flex; flex-wrap:wrap; gap:3px; align-items:center; border:1px solid var(--border); border-bottom:none; border-radius:10px 10px 0 0; padding:7px 8px; background:#F5F6FA; }
.rte-btn{ min-width:30px; height:30px; padding:0 7px; border:1px solid transparent; border-radius:6px; background:transparent; cursor:pointer; font-size:13px; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.rte-btn:hover{ background:#E5E7EB; }
.rte-sep{ width:1px; height:20px; background:var(--border); margin:0 4px; flex-shrink:0; }
.rte-select{ height:30px; border:1px solid var(--border); border-radius:6px; font-size:12px; padding:0 4px; background:#fff; color:var(--ink); }
.rte-editor{ border:1px solid var(--border); border-radius:0 0 10px 10px; padding:16px 20px; min-height:280px; max-height:420px; overflow-y:auto; font-family:'Times New Roman',Times,serif; font-size:14px; line-height:1.6; background:#fff; }
.rte-editor:focus{ outline:2px solid #93C5FD; outline-offset:-1px; }
.rte-editor p{ margin:0 0 10px; }
.wf-modal{ background:#fff; border-radius:16px; width:100%; max-width:520px; max-height:88vh; padding:0; overflow:hidden; position:relative; z-index:1001; display:flex; flex-direction:column; }
/* Tách riêng lớp CUỘN (overflow-y:auto) khỏi lớp BO GÓC (border-radius) —
   trước đây gộp chung 1 khối khiến thanh cuộn (khi nội dung hơi cao, tuỳ màn
   hình/độ phóng đại từng máy) cắt thẳng vào 2 góc phải, nhìn không bo tròn
   mềm mại như bản gốc. Khối NGOÀI (.wf-modal) chỉ lo bo góc + overflow:hidden
   để cắt gọn mọi thứ theo đúng hình bo tròn; khối TRONG (.wf-modal-scroll)
   mới thật sự cuộn được, không có border-radius riêng nên thanh cuộn của nó
   nằm gọn bên trong, không đụng tới góc bo. */
.wf-modal-scroll{ overflow-y:auto; padding:26px; min-height:0; }
/* Trước đây dùng tên class ".modal" — TRÙNG với class ".modal" có sẵn của
   Bootstrap 3 (tải từ CDN), vốn có display:none + position:fixed;
   top:0;right:0;bottom:0;left:0; + z-index:1050 + overflow:hidden mặc định.
   CSS gộp theo TỪNG THUỘC TÍNH nên dù ghi đè display, các thuộc tính
   position/top/right/bottom/left khác của Bootstrap vẫn còn nguyên, khiến
   khối popup bị ép thành 1 lớp phủ toàn màn hình lộn xộn thay vì khối vừa
   khít nằm giữa. ĐỔI HẲN sang tên riêng ".wf-modal" (không trùng bất kỳ class
   Bootstrap nào) — triệt để, không cần ghi đè từng thuộc tính riêng lẻ nữa. */
.wf-modal.wf-modal-lg{ max-width:820px; } /* dùng riêng cho hồ sơ chuyên cần cá nhân — nội dung rộng (biểu đồ + timeline) */
.wf-modal h2{ font-size:19px; margin-top:0; margin-bottom:4px; }
.wf-modal .sub{ font-size:12.5px; color:var(--ink-soft); margin-bottom:14px; }
/* Siết khoảng cách RIÊNG bên trong modal (chỉ áp dụng khi .form-row nằm trong
   .wf-modal — không đụng tới form ở các trang danh sách/Sửa khác trong app,
   nơi .form-row margin-bottom:14px gốc vẫn giữ nguyên) — đủ chỗ để nội dung
   modal Thêm khách hàng vừa khít không cần cuộn, đúng tinh thần "tham khảo
   bản gốc, kéo gần nhau hơn" đã yêu cầu. */
.wf-modal .form-row{ margin-bottom:11px; }
.form-row{ margin-bottom:14px; }
.field-err{ display:none; color:var(--coral); font-size:11.5px; margin-top:5px; font-weight:600; }
.field-hint{ display:none; font-size:11.5px; margin-top:5px; font-weight:600; }
.field-hint.dup{ display:block; color:var(--coral); }
.field-hint.ok{ display:block; color:var(--success); }
.field-hint.checking{ display:block; color:var(--ink-faint); font-weight:500; }
.form-row label{ display:block; font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; }
.form-row input, .form-row select, .form-row textarea{ width:100%; border:1px solid var(--border); border-radius:9px; padding:10px 12px; font-size:13.5px; outline:none; background:var(--surface-alt);}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ border-color:var(--brand); background:#fff; }
.wf-password-field{ position:relative; }
.wf-password-field input{ padding-right:38px; }
.wf-password-toggle{ position:absolute; top:0; bottom:0; right:0; width:38px; background:none; border:none; cursor:pointer; color:var(--ink-faint); display:flex; align-items:center; justify-content:center; }
.wf-password-toggle:hover{ color:var(--ink-soft); }
.wf-password-toggle svg{ width:18px; height:18px; }
.wf-password-hint{ font-size:11.5px; margin-top:6px; display:flex; flex-direction:column; gap:3px; }
.wf-password-hint .wf-rule{ display:flex; align-items:center; gap:6px; color:var(--ink-faint); }
.wf-password-hint .wf-rule.ok{ color:var(--success); }
.wf-password-match{ font-size:11.5px; margin-top:5px; }
.wf-password-match.ok{ color:var(--success); }
.wf-password-match.bad{ color:var(--coral); }
.wf-spinner{ display:inline-block; width:12px; height:12px; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation:wf-spin 0.7s linear infinite; vertical-align:-1px; margin-right:7px; }
@keyframes wf-spin{ to{ transform:rotate(360deg); } }
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* Trên màn hình hẹp (điện thoại), hai cột 1fr/1fr của MỌI form-grid-2 trong app
   ép mỗi cột xuống còn quá ít chỗ — không riêng ô tiền, ô ngày và ô chọn cũng bị
   bóp theo. Gộp về MỘT cột dưới 640px thì mọi ô lấy lại đủ bề rộng của modal. */
@media (max-width:640px){ .form-grid-2{ grid-template-columns:1fr; } }
/* Ô "số tiền + loại tiền" đứng cạnh nhau.
   LỖI ĐÃ SỬA (lần 1): trước đây khối này viết thẳng style="display:flex" ở từng
   chỗ dùng, không có flex-wrap. Đặt trong một ô của .form-grid-2 (chỉ rộng
   ~210px trong modal 520px) thì ô số tiền và ô loại tiền chia nhau chỗ không đủ
   — ô loại tiền bị bóp lại còn vài chục pixel, chữ "VND" bị cắt cụt, nhìn như
   mất hẳn. Cho phép XUỐNG DÒNG: chật quá thì ô loại tiền tụt xuống dưới, vẫn đủ
   rộng để đọc, thay vì cả hai cùng bị ép.

   LỖI ĐÃ SỬA (lần 2): flex-wrap chỉ cứu được Ô LOẠI TIỀN — ô SỐ TIỀN thì không,
   vì "min-width:0" tháo bỏ hẳn sàn co giãn của trình duyệt. Khi container hẹp
   hơn 140px (form-grid-2 trên điện thoại KHÔNG có breakpoint co về 1 cột trước
   đây, mỗi cột chỉ còn ~135px), input bị flex-shrink ép xuống còn vài chục
   pixel — SỐ TIỀN BỊ CHE, con số dài như "180.000.000" chỉ còn thấy vài chữ số
   đầu, phải bấm vào ô mới cuộn ra xem hết. Đây đúng là lỗi "ô tiền hẹp quá che
   chữ". Đặt sàn min-width:90px: đủ hiện gọn số tiền 8-9 chữ số + dấu phân cách
   trước khi input chịu co tiếp; hẹp hơn nữa thì để breakpoint .form-grid-2 phía
   trên xử lý (gộp về 1 cột, ô tiền có lại đủ bề rộng modal). */
.wf-money-field{ display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start; }
.wf-money-field > input{ flex:1 1 140px; min-width:90px; }
/* Cố định bề rộng ô loại tiền: đủ cho mã 3 chữ + mũi tên, và KHÔNG co lại nữa. */
.wf-money-field > select{ flex:0 0 96px; width:96px; min-width:96px; max-width:96px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; align-items:center; }
/* Nhiều modal bọc cặp nút Hủy/Lưu trong 1 <div> để đẩy chúng về bên phải, tách
   khỏi nút Xoá bên trái. Khi đó gap:10px của .modal-actions chỉ áp cho cái <div>
   ấy chứ KHÔNG áp giữa 2 nút bên trong — nên 2 nút dính sát nhau. Cho cái bọc đó
   thành flex có gap là hết dính, không phải sửa tay từng modal. */
.modal-actions > div{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* Ô nhập trong modal thường nằm trong lưới 2–3 cột. Mặc định ô lưới có
   min-width:auto nên nội dung dài (select tên trường, số tiền lớn) đẩy rộng cột
   ra và tràn khỏi modal. Ép min-width:0 để nội dung co lại đúng bề rộng cột. */
.wf-modal .form-row{ min-width:0; }
.wf-modal .form-row input, .wf-modal .form-row select, .wf-modal .form-row textarea{ max-width:100%; }
/* Bảng/khối rộng bên trong modal tự cuộn ngang thay vì phá vỡ bề rộng modal. */
.wf-modal .table-wrap{ overflow-x:auto; }
.timeline{ margin-top:6px; }
.tl-item{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.tl-item:last-child{ border-bottom:none; }
.tl-dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); margin-top:5px; flex-shrink:0;}
.tl-item .time{ font-size:11px; color:var(--ink-faint); margin-top:2px;}

/* ---- Trang Cuộc gọi — timeline nhóm theo ngày, dải màu bên trái theo Kết quả
   để quét nhanh bằng mắt không cần đọc chữ (đây là công việc lặp lại hàng
   ngày của sale, ưu tiên "nhìn phát biết ngay" hơn là bảng dữ liệu thô). ---- */
.calls-date-group{ font-size:11.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin:22px 0 10px; }
.calls-date-group:first-child{ margin-top:4px; }
.calls-item{ display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border); border-radius:11px; padding:12px 14px; margin-bottom:8px; transition:box-shadow .15s, border-color .15s; }
.calls-item:hover{ box-shadow:0 2px 10px rgba(0,0,0,0.06); }
.calls-item.result-success{ border-left-color:var(--success); }
.calls-item.result-coral{ border-left-color:var(--coral); }
.calls-item.result-gold{ border-left-color:var(--gold); }
.calls-item .avatar{ margin-top:1px; }
.calls-item-body{ flex:1; min-width:0; }
.calls-item-row1{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; }
.calls-item-name{ font-weight:700; font-size:14px; color:var(--ink); text-decoration:none; }
.calls-item-name:hover{ text-decoration:underline; }
.calls-item-phone{ font-size:12.5px; color:var(--ink-soft); font-family:inherit; }
.calls-item-spacer{ flex:1; min-width:8px; }
.calls-item-meta{ font-size:11.5px; color:var(--ink-faint); white-space:nowrap; }
.calls-item-note{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; line-height:1.5; }
.calls-item-empty-note{ font-size:12px; color:var(--ink-faint); margin-top:6px; font-style:italic; }
.empty{ text-align:center; padding:40px 20px; color:var(--ink-soft); font-size:13px;}

/* ============ RESPONSIVE MOBILE NAV ============ */
.mobile-nav-toggle{ display:none; }
.mobile-nav-panel{ position:fixed; top:58px; left:0; right:0; background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--shadow); z-index:90; max-height:calc(100vh - 58px); overflow-y:auto; padding:12px; display:none; }
.mobile-nav-panel.show{ display:block; }
.mobile-toptabs{ display:flex; flex-wrap:wrap; gap:6px; padding:2px 4px 14px; border-bottom:1px solid var(--border); margin-bottom:10px; }
.mobile-toptabs .toptab{ height:auto; padding:8px 13px; border-radius:9px; background:var(--surface-alt); font-size:13px; }
.mobile-toptabs .toptab.active{ background:var(--brand); color:#fff; }
.mobile-toptabs .toptab.active::after{ display:none; }

/* ============ LEADS TOOLBAR & PIPELINE TABS ============ */
/* flex-wrap BẮT BUỘC: thanh này chứa 7 nút biểu tượng + ô tìm + bộ chọn khoảng
   ngày; không cho xuống dòng thì trên iPad/iPhone cả cụm dồn một hàng dài hơn
   màn hình và đẩy TOÀN TRANG cuộn ngang (đã đo: body rộng hơn khung nhìn đúng
   bằng phần thò ra của bộ chọn ngày) — chứ không phải chỉ riêng thanh này bị
   cắt. Màn rộng đủ chỗ nên không xuống dòng, giao diện không đổi. */
.lead-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }
.icon-btn{ width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); border:1px solid var(--border); background:var(--surface); flex-shrink:0; }
.icon-btn:hover{ border-color:var(--brand); color:var(--brand); }
.icon-btn svg{ width:16px; height:16px; }
.icon-btn:disabled{ opacity:0.4; cursor:not-allowed; }
.lead-toolbar .search-box{ flex:1; max-width:320px; display:flex; align-items:center; gap:8px; background:var(--surface-alt); border-radius:9px; padding:8px 12px; margin-left:auto; }
.lead-toolbar .search-box svg{ width:15px; height:15px; color:var(--ink-faint); flex-shrink:0; }
.lead-toolbar .search-box input{ border:none; background:none; outline:none; font-size:13px; width:100%; }
/* Ở trang Khoá học, ô tìm kiếm là <form> thật (Enter để tìm) chứ không phải div —
   mặc định .search-box căn phải bằng margin-left:auto, ở đây nó phải đứng đầu hàng
   nên phải huỷ, nếu không cả cụm lọc bị đẩy dồn về một bên. */
.lead-toolbar form.search-box{ margin-left:0; flex:0 1 240px; }

/* ---- Nút lọc thị trường dạng viên thuốc (trang Khoá học) ---- */
.tt-country-btn{ display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px; font-size:12.5px; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; border:1.5px solid var(--border); background:#fff; color:var(--ink-soft); transition:all .15s; }
.tt-country-btn:hover{ border-color:var(--brand); color:var(--brand); text-decoration:none; }
.tt-country-btn.active, .tt-country-btn.active:hover{ border-color:var(--brand); background:var(--brand); color:#fff; }

/* ---- Thẻ khoá học ---- */
.course-card{ background:#fff; border-radius:16px; border:1.5px solid #e2e8f0; padding:0; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.05); transition:box-shadow .2s, border-color .2s; }
.course-card:hover{ box-shadow:0 4px 16px rgba(0,0,0,.12); border-color:#3b82f6; }
.course-card.off{ opacity:.65; border-color:#e5e7eb; }
.course-card.off:hover{ box-shadow:0 2px 8px rgba(0,0,0,.05); border-color:#e5e7eb; }
.course-card-head{ padding:16px 18px 14px; position:relative; }
.course-off-badge{ position:absolute; top:12px; right:12px; background:#6b728018; color:#6b7280; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; }
.course-flag{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:20px; }
.course-title{ display:block; font-weight:800; font-size:15px; color:#111827; line-height:1.3; cursor:pointer; text-decoration:none; }
.course-title:hover{ color:var(--brand); text-decoration:none; }
.course-fact{ background:var(--surface-alt); border-radius:8px; padding:8px 10px; text-align:center; min-width:0; }
.course-fact .l{ font-size:10.5px; color:#6b7280; margin-bottom:4px; }
/* LỖI ĐÃ SỬA: ô này nằm trong lưới 3 cột của một thẻ khoá học rộng tối thiểu
   320px — cột "Học phí" chỉ còn ~88px. white-space:nowrap + text-overflow:
   ellipsis từng CẮT CỤT học phí lớn ("620.000.000đ" chỉ còn thấy "620.000.0…"),
   đúng lỗi "ô tiền hẹp quá che chữ". Bỏ nowrap để số tiền XUỐNG DÒNG thay vì bị
   giấu — 2 dòng trong một ô vuông cao ~50px vẫn gọn, và không mất một chữ số
   nào. Thời lượng/thị trường (ngắn, không bao giờ vượt 1 dòng) không bị ảnh
   hưởng gì bởi việc bỏ nowrap. */
.course-fact .v{ font-size:13px; font-weight:700; color:#374151; overflow-wrap:break-word; line-height:1.3; }

/* ---- Bảng danh sách kiểu Trung tâm (Giáo viên / Lớp học) ----
   Bản gốc vẽ khung bảng bằng style nội tuyến trên từng ô. Gom về đây để markup
   view sạch mà hình thức vẫn y hệt: khung bo 16px, header xám nhạt, sọc ngựa vằn,
   rê chuột sáng xanh. */
.tt-table-card{ background:#fff; border-radius:16px; border:1.5px solid #e2e8f0; box-shadow:0 2px 8px rgba(0,0,0,.06); overflow:hidden; }
.tt-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tt-table thead tr{ background:#f8fafc; border-bottom:1.5px solid #e2e8f0; }
.tt-table th{ padding:11px 14px; text-align:left; font-size:11.5px; font-weight:700; color:#6b7280; letter-spacing:.05em; white-space:nowrap; }
.tt-table th:first-child{ padding-left:16px; }
.tt-table th:last-child{ padding-right:16px; }
.tt-table td{ padding:13px 14px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.tt-table td:first-child{ padding-left:16px; }
.tt-table td:last-child{ padding-right:16px; }
.tt-table tbody tr{ background:#fff; transition:background .1s; }
.tt-table tbody tr:nth-child(even){ background:#fafbfc; }
.tt-table tbody tr:hover{ background:#eff6ff; }
.tt-avatar{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px; flex-shrink:0; }
.tt-name-link{ font-weight:700; font-size:13.5px; color:#3b82f6; cursor:pointer; text-decoration:none; }
.tt-name-link:hover{ text-decoration:underline; color:#2563eb; }

/* ---- 5 ô KPI bấm-để-lọc ở trang Lớp học ---- */
.tt-kpi-card{ display:block; border-radius:14px; padding:16px 18px; text-decoration:none; color:inherit; transition:all .18s; }
.tt-kpi-card:hover, .tt-kpi-card:focus, .tt-kpi-card:visited{ text-decoration:none; color:inherit; }
a.tt-kpi-card{ cursor:pointer; }
a.tt-kpi-card:hover{ transform:translateY(-2px); }
a.tt-kpi-card:active{ transform:translateY(0); }
a.tt-kpi-card:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.tt-kpi-card.static{ cursor:default; }
.tt-kpi-card .l{ font-size:11px; font-weight:700; color:#6b7280; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.tt-kpi-card .r{ display:flex; align-items:flex-end; justify-content:space-between; gap:6px; }
.tt-kpi-card .v{ font-size:30px; font-weight:800; line-height:1; }
.tt-kpi-card .i{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tt-kpi-card .i svg{ width:18px; height:18px; }
@media (prefers-reduced-motion: reduce){ .tt-kpi-card{ transition:none; } a.tt-kpi-card:hover{ transform:none; } }

/* ---- Lịch dạy: điều hướng tuần + lưới 7 cột ---- */
.sched-weeknav{ display:flex; align-items:center; gap:6px; background:#fff; border:1.5px solid #e2e8f0; border-radius:10px; padding:4px 6px; }
.sched-weeknav a{ width:30px; height:30px; border-radius:7px; font-size:16px; color:#374151; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.sched-weeknav a:hover{ background:#f1f5f9; text-decoration:none; color:var(--brand); }
.sched-weeknav span{ font-size:13px; font-weight:700; color:#111827; min-width:130px; text-align:center; }

.sched-grid-card{ background:#fff; border-radius:16px; border:1.5px solid #e2e8f0; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.sched-head-row{ display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1.5px solid #e2e8f0; }
.sched-head{ padding:12px 10px 10px; text-align:center; background:#f8fafc; border-right:1px solid #f1f5f9; }
.sched-head:last-child{ border-right:none; }
.sched-head.today{ background:#eff6ff; }
.sched-head .dn{ font-size:11.5px; font-weight:700; color:#6b7280; letter-spacing:.04em; text-transform:uppercase; }
.sched-head.today .dn{ color:#3b82f6; }
.sched-head .dd{ font-size:20px; font-weight:800; color:#374151; margin:2px 0; }
.sched-head.today .dd{ color:#3b82f6; }
.sched-head .dm{ font-size:10.5px; color:#9ca3af; }
.sched-head .dc{ margin-top:4px; display:inline-block; padding:1px 8px; border-radius:20px; font-size:10.5px; font-weight:700; background:#e2e8f0; color:#6b7280; }
.sched-head .dc.today{ background:#3b82f6; color:#fff; }
.sched-body-row{ display:grid; grid-template-columns:repeat(7,1fr); min-height:400px; align-items:start; }
.sched-col{ padding:10px 8px; border-right:1px solid #f1f5f9; min-height:300px; min-width:0; }
.sched-col:last-child{ border-right:none; }
.sched-col.today{ background:#f0f9ff; }
.sched-ses-card{ border:1.5px solid #e2e8f0; border-radius:9px; padding:9px 10px; margin-bottom:6px; background:#fff; transition:box-shadow .15s; }
.sched-ses-card:hover{ box-shadow:0 2px 8px rgba(0,0,0,.1); }
.sched-ses-card .ellip{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sched-tch-avatar{ width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,#3b82f6,#8b5cf6); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
/* Màn hẹp: lưới 7 cột không thể đọc được, chuyển thành danh sách dọc từng ngày. */
@media (max-width:1100px){
  .sched-head-row, .sched-body-row{ grid-template-columns:1fr; }
  .sched-head{ border-right:none; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:10px; text-align:left; }
  .sched-head .dd{ margin:0; }
  .sched-col{ border-right:none; min-height:0; border-bottom:1px solid #f1f5f9; }
}
@media (prefers-reduced-motion: reduce){ .sched-ses-card{ transition:none; } }

/* ---- Trang chi tiết lớp học: cột trái cố định + cột phải có tab ---- */
.cls-detail-grid{ display:grid; grid-template-columns:280px 1fr; gap:18px; align-items:start; }
.cls-side{ background:#fff; border-radius:16px; border:1.5px solid #e2e8f0; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.06); position:sticky; top:12px; }
.cls-info-row{ display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid #f8fafc; gap:8px; }
.cls-info-row span{ color:#6b7280; font-size:12.5px; flex-shrink:0; }
.cls-info-row b{ font-size:12.5px; color:#374151; font-weight:600; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cls-tab-card{ background:#fff; border-radius:16px; border:1.5px solid #e2e8f0; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.cls-tabs{ display:flex; border-bottom:1.5px solid #f1f5f9; padding:0 16px; overflow-x:auto; }
.cls-tabs a{ padding:13px 12px 11px; font-size:12.5px; font-weight:500; color:#6b7280; text-decoration:none; border-bottom:2.5px solid transparent; white-space:nowrap; flex-shrink:0; }
.cls-tabs a:hover{ color:#3b82f6; text-decoration:none; }
.cls-tabs a.active{ font-weight:700; color:#3b82f6; border-bottom-color:#3b82f6; }
@media (max-width:900px){
  .cls-detail-grid{ grid-template-columns:1fr; }
  .cls-side{ position:static; }
}

.pipeline-tabs{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; margin-bottom:14px; padding:10px 4px; border-bottom:1px solid var(--border); }
.ptab{ display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; font-size:13px; font-weight:600; color:var(--ink-soft); }
.ptab:hover{ background:var(--surface-alt); }
.ptab.active{ background:var(--blue-soft); color:var(--brand); }
.ptab .dot{ width:7px; height:7px; border-radius:50%; }
.ptab .n{ font-size:11px; font-weight:700; background:var(--surface-alt); padding:1px 6px; border-radius:20px; color:var(--ink-soft); }
.ptab.active .n{ background:#fff; }
.ptab-sep{ color:var(--border); }
.alert-bar{ display:flex; align-items:center; gap:16px; background:var(--gold-soft); color:#9C6A11; padding:11px 16px; border-radius:10px; font-size:13px; font-weight:600; margin-bottom:14px; }
.alert-bar a{ margin-left:auto; color:var(--gold); font-weight:700; }
.bulk-bar{ display:flex; align-items:center; gap:14px; background:var(--brand); color:#fff; padding:10px 16px; border-radius:10px; font-size:13px; font-weight:600; margin-bottom:12px; }
.bulk-bar button{ color:#fff; text-decoration:underline; font-weight:700; }
.row-check{ width:16px; height:16px; }
.action-menu-wrap{ position:relative; }
/* ĐỔI position:absolute -> position:fixed — trước đây định vị TƯƠNG ĐỐI theo
   .action-menu-wrap (nằm trong .table-wrap có overflow-y:hidden), khiến menu
   bị CẮT MẤT khi hàng đó gần cuối bảng/bảng ít dòng (không đủ chỗ bên dưới,
   phần dropdown tràn ra bị overflow:hidden của bảng cắt đi). Với
   position:fixed, JS (wfPositionActionMenu trong lead-panel.js) tự tính đúng
   toạ độ theo VIEWPORT mỗi lần mở — không còn phụ thuộc overflow của bất kỳ
   thẻ cha nào, luôn hiện đúng và đủ, kể cả bảng chỉ có 1 dòng duy nhất. */
.action-menu{ position:fixed; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); z-index:1500; min-width:200px; display:none; overflow:hidden; }
.action-menu.show{ display:block; }
.action-menu button, .action-menu > a{ display:block; width:100%; text-align:left; padding:10px 14px; font-size:13px; font-weight:600; color:var(--ink); border:none; background:none; text-decoration:none; box-sizing:border-box; }
.action-menu button:hover, .action-menu > a:hover{ background:var(--surface-alt); text-decoration:none; color:var(--ink); }
.action-menu button.danger{ color:var(--coral); }

/* ============ SMART SEARCH (Cuộc gọi) ============ */
.smart-search{ position:relative; display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:9px 14px; margin-bottom:14px; max-width:560px; }
.smart-search:focus-within{ border-color:var(--brand); }
.smart-search svg{ width:16px; height:16px; color:var(--ink-faint); flex-shrink:0; }
.smart-search input{ border:none; outline:none; background:none; font-size:13.5px; flex:1; min-width:0; }
.smart-search .clear-x{ color:var(--ink-faint); cursor:pointer; padding:2px 4px; font-size:13px; flex-shrink:0; }
.smart-search .clear-x:hover{ color:var(--coral); }
.search-suggest{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); z-index:45; max-height:340px; overflow-y:auto; display:none; }
.search-suggest.show{ display:block; }
.suggest-item{ display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--border); }
.suggest-item:last-child{ border-bottom:none; }
.suggest-item:hover{ background:var(--surface-alt); }
.suggest-item .meta{ font-size:11px; color:var(--ink-soft); margin-top:1px; }
.suggest-empty{ padding:18px; text-align:center; color:var(--ink-soft); font-size:12.5px; }
.suggest-hint{ padding:8px 14px; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); font-weight:700; border-bottom:1px solid var(--border); }

/* ============ PAGINATION ============ */
.pagination{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:14px 16px; border-top:1px solid var(--border); }
.pg-info{ font-size:12.5px; color:var(--ink-soft); }
.pg-controls{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.pg-btn{ min-width:32px; height:32px; padding:0 10px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--ink-soft); border:1px solid var(--border); background:#fff; }
.pg-btn:hover:not(:disabled){ border-color:var(--brand); color:var(--brand); }
.pg-btn.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.pg-btn:disabled{ opacity:0.4; cursor:not-allowed; }
.pg-ellipsis{ padding:0 4px; color:var(--ink-faint); font-size:12.5px; }

/* ============ DATE RANGE POPOVER (Cuộc gọi) ============ */
.date-range-pop{ position:absolute; top:calc(100% + 8px); left:0; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); z-index:50; display:none; width:340px; overflow:hidden; }
.date-range-pop.show{ display:flex; }
.drp-presets{ width:150px; border-right:1px solid var(--border); padding:8px; flex-shrink:0; }
.drp-preset-item{ display:block; width:100%; text-align:left; padding:9px 10px; border-radius:8px; font-size:13px; font-weight:600; color:var(--ink-soft); }
.drp-preset-item:hover{ background:var(--surface-alt); }
.drp-preset-item.active{ background:var(--blue-soft); color:var(--brand); }
.drp-custom{ flex:1; padding:14px; }
.drp-custom-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); font-weight:700; margin-bottom:10px;}
.drp-custom-row{ margin-bottom:10px; }
.drp-custom-row label{ display:block; font-size:11.5px; color:var(--ink-soft); margin-bottom:4px; font-weight:600;}
.drp-custom-row input{ width:100%; border:1px solid var(--border); border-radius:8px; padding:7px 9px; font-size:13px; }
.drp-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }

/* ============ TRANG KHÁCH HÀNG (CRM) ============ */
.cust-kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.cust-kpi-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; }
.cust-kpi-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.cust-kpi-icon{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cust-kpi-icon svg{ width:19px; height:19px; }
.cust-kpi-title{ font-size:12.5px; color:var(--ink-soft); font-weight:600; }
.cust-kpi-value{ font-size:19px; font-weight:700; margin-top:2px; }
.cust-kpi-value .unit{ font-size:12px; font-weight:600; color:var(--ink-soft); margin-left:3px; }
.cust-kpi-divider{ border-top:1px solid var(--border); margin:10px 0; }
.cust-kpi-sub{ font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.cust-kpi-sub strong{ color:var(--ink); }
.cust-page-size{ border:1px solid var(--border); border-radius:8px; padding:6px 10px; font-size:12.5px; font-weight:600; color:var(--ink-soft); background:#fff; }

/* ============ HỘP THƯ (Inbox) ============ */
.inbox-shell{ display:flex; flex-direction:column; height:calc(100vh - 58px); background:var(--surface); }
.inbox-channels-bar{ display:flex; align-items:center; gap:4px; padding:14px 24px; border-bottom:1px solid var(--border); flex-shrink:0; }
.inbox-tab{ padding:9px 16px; border-radius:9px; font-size:14px; font-weight:600; color:var(--ink-soft); }
.inbox-tab:hover{ background:var(--surface-alt); }
.inbox-tab.active{ background:var(--brand); color:#fff; }
.inbox-body{ flex:1; display:flex; min-height:0; }
.inbox-list-col{ width:320px; flex-shrink:0; border-right:1px solid var(--border); display:flex; flex-direction:column; min-height:0; }
.inbox-list-search{ padding:14px; display:flex; gap:8px; border-bottom:1px solid var(--border); flex-shrink:0; }
.inbox-search-input{ flex:1; display:flex; align-items:center; gap:8px; background:var(--surface-alt); border-radius:9px; padding:9px 12px; }
.inbox-search-input input{ border:none; background:none; outline:none; font-size:13px; width:100%; }
.inbox-icon-btn{ width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); flex-shrink:0; }
.inbox-icon-btn:hover{ background:var(--surface-alt); }
.inbox-icon-btn svg{ width:16px; height:16px; }
.inbox-list-items{ flex:1; overflow-y:auto; }
.inbox-conv-item{ display:flex; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); cursor:pointer; align-items:flex-start; }
.inbox-conv-item:hover{ background:var(--surface-alt); }
.inbox-conv-item.active{ background:var(--blue-soft); }
.inbox-conv-item .avatar{ flex-shrink:0; }
.inbox-conv-item .body{ flex:1; min-width:0; }
.inbox-conv-item .row1{ display:flex; justify-content:space-between; gap:8px; }
.inbox-conv-item .name{ font-weight:700; font-size:13.5px; }
.inbox-conv-item .time{ font-size:10.5px; color:var(--ink-faint); flex-shrink:0; white-space:nowrap;}
.inbox-conv-item .preview{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.inbox-conv-tags{ display:flex; gap:5px; margin-top:6px; flex-wrap:wrap; }
.inbox-chat-col{ flex:1; display:flex; flex-direction:column; min-width:0; }
.inbox-chat-header{ display:flex; align-items:center; gap:12px; padding:14px 22px; border-bottom:1px solid var(--border); flex-shrink:0; }
.inbox-chat-header .who .name{ font-weight:700; font-size:15px; }
.inbox-chat-header .who .sub{ font-size:12px; color:var(--blue); }
.inbox-messages{ flex:1; overflow-y:auto; padding:20px 24px; }
.inbox-msg-block{ margin-bottom:22px; }
.inbox-msg-block .meta{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.inbox-msg-block .meta .name{ font-weight:700; font-size:13px; }
.inbox-msg-block .meta .time{ font-size:11px; color:var(--ink-faint); margin-left:auto; }
.inbox-msg-block.staff{ text-align:right; }
.inbox-msg-block.staff .meta{ flex-direction:row-reverse; }
.inbox-msg-block.staff .meta .time{ margin-left:0; margin-right:auto; }
.inbox-bubble-row{ display:flex; align-items:center; gap:10px; }
.inbox-msg-block.staff .bubble-row{ justify-content:flex-end; }
.inbox-bubble{ display:inline-block; padding:11px 15px; border-radius:12px; background:var(--surface-alt); font-size:13.5px; line-height:1.5; text-align:left; max-width:480px; }
.inbox-msg-block.staff .inbox-bubble{ background:var(--brand); color:#fff; }
.inbox-copy-btn{ display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:8px; border:1px solid var(--border); font-size:12px; font-weight:600; color:var(--ink-soft); flex-shrink:0; }
.inbox-copy-btn:hover{ border-color:var(--brand); color:var(--brand); }
.inbox-chat-input{ padding:14px 22px; border-top:1px solid var(--border); flex-shrink:0; }
.inbox-chat-input textarea{ width:100%; border:none; outline:none; resize:none; font-size:14px; font-family:inherit; padding:8px 4px; }
.inbox-chat-input-bar{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.inbox-info-col{ width:300px; flex-shrink:0; border-left:1px solid var(--border); padding:20px; overflow-y:auto; }
.inbox-info-col.hidden{ display:none; }
.inbox-empty-chat{ flex:1; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:13.5px; flex-direction:column; gap:10px; }

/* ============ PERMISSIONS PAGE ============ */
.perm-staff-row{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; cursor:pointer; margin-bottom:3px; }
.perm-staff-row:hover{ background:var(--surface-alt); }
.perm-staff-row.active{ background:var(--blue-soft); }
.perm-module-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px; border:1px solid var(--border); border-radius:11px; }
.switch{ width:42px; height:24px; border-radius:20px; background:var(--border); position:relative; flex-shrink:0; transition:.15s; }
.switch .knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.25); transition:.15s; }
.switch.on{ background:var(--success); }
.switch.on .knob{ transform:translateX(18px); }

.role-check-chip{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); border-radius:20px; padding:7px 14px; font-size:12.5px; font-weight:600; cursor:pointer; }
.role-check-chip.active{ background:var(--blue-soft); border-color:var(--blue); color:var(--blue); }
.role-check-chip input{ margin:0; }

.wf-perm-module{ border:1px solid var(--border); border-radius:11px; margin-bottom:8px; overflow:hidden; }
.wf-perm-module-head{ display:flex; align-items:center; gap:10px; padding:12px 13px; flex-wrap:wrap; }
.wf-perm-expand{ width:22px; height:22px; flex-shrink:0; border:none; background:var(--surface-alt); border-radius:6px; cursor:pointer; font-size:12px; color:var(--ink-soft); transition:transform .15s; }
.wf-perm-expand.open{ transform:rotate(180deg); }
.wf-perm-expand-spacer{ width:22px; flex-shrink:0; display:inline-block; }
.wf-perm-module-info{ flex:1; min-width:140px; }
.wf-perm-module-label{ font-weight:700; font-size:13.5px; }
.wf-perm-module-desc{ font-size:11px; color:var(--ink-soft); }
.wf-perm-check{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--ink-soft); cursor:pointer; flex-shrink:0; white-space:nowrap; }
.wf-perm-check input{ margin:0; }

.wf-perm-pages{ border-top:1px solid var(--border); background:var(--surface-alt); padding:4px 13px 4px 45px; display:none; }
.wf-perm-pages.open{ display:block; }
.wf-perm-page-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.wf-perm-page-row:last-child{ border-bottom:none; }
.wf-perm-page-label{ flex:1; min-width:120px; font-size:12.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wf-perm-page-badge{ font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; background:var(--surface); color:var(--ink-faint); border:1px solid var(--border); }
.wf-perm-page-badge-custom{ background:var(--gold-soft); color:#9C6A11; border-color:transparent; }
.wf-perm-reset-btn{ font-size:11px; font-weight:600; color:var(--blue); background:none; border:none; cursor:pointer; flex-shrink:0; white-space:nowrap; padding:0; }
.wf-perm-reset-spacer{ width:80px; flex-shrink:0; display:inline-block; }

/* MỞ RỘNG — thiết kế lại lưới thẻ Vai trò (thay .role-check-chip dạng chip
   ngang cũ, giữ lại chip cũ không xoá phòng cần dùng chỗ khác) — mỗi thẻ có ô
   tick lớn + tên + mô tả ngắn, đủ khoảng đệm để không bị dính chữ khi tên vai
   trò dài. */
.wf-perm-role-card{ display:flex; align-items:flex-start; gap:10px; border:1.5px solid var(--border); border-radius:12px; padding:12px 14px; cursor:pointer; }
.wf-perm-role-card.active{ border-color:var(--blue); background:var(--blue-soft); }
.wf-perm-role-check{ width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color:var(--blue); }
.wf-perm-role-label{ font-weight:700; font-size:13.5px; }
.wf-perm-role-desc{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }

/* Trạng thái "đang lưu" của panel Phân quyền — bật khi vừa đổi vai trò và đang
   chờ máy chủ tính lại quyền. Thẻ vai trò vừa bấm VẪN sáng bình thường (đã đổi
   màu ngay ở phía trình duyệt); chỉ 2 khối quyền bên dưới bị làm mờ + chặn bấm,
   vì đó mới là phần buộc phải chờ máy chủ. Nhờ vậy thao tác cảm thấy tức thì mà
   không ai lỡ tay sửa nhầm khối quyền đang được tính lại. */
.wf-perm-busy{ position:relative; }
.wf-perm-busy .wf-perm-module{ opacity:.45; pointer-events:none; transition:opacity .12s; }
.wf-perm-busy::after{
  content:'Đang cập nhật quyền…';
  position:absolute; top:8px; right:8px; z-index:5;
  background:var(--brand); color:#fff;
  font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}

/* MỞ RỘNG — quyền Xóa (tầng nguy hiểm cao nhất, tách màu đỏ khỏi Xem/Sửa).
   Ràng buộc phân cấp Xem ⊆ Sửa ⊆ Xóa xử lý ở JS/Controller, CSS chỉ phân biệt
   màu để dễ nhận biết mức độ rủi ro cao hơn ngay từ cái nhìn đầu tiên. */
.wf-perm-check-danger{ color:#993C1D; }
.wf-perm-check-danger input{ accent-color:var(--coral); }

@media(max-width:1200px){ .ws-grid{ grid-template-columns:1fr 1fr;} }
@media(max-width:1000px){
  .kpi-grid,.ws-stats,.quick-actions,.mini-stat-grid,.achv-grid{ grid-template-columns:repeat(2,1fr);} .grid-2,.ws-grid{ grid-template-columns:1fr;} .sidebar{display:none;}
  .toptabs{ display:none; } .tb-company span{ max-width:110px; } .mobile-nav-toggle{ display:flex; }
}
@keyframes ticker-scroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
#appointment-banner:hover #appointment-ticker{ animation-play-state:paused; }
@media(max-width:640px){ .kpi-grid{ grid-template-columns:1fr 1fr;} .tb-company{ display:none; } .checkin-btn span{ display:none; } .kpi-grid[style]{ grid-template-columns:1fr 1fr !important;} }


/* =============================================================================
   KHỐI "ĐÃ HUỶ" — dữ liệu tài chính không bị xoá, chỉ chuyển sang huỷ.
   Bày ra thẳng thì bảng đang dùng bị loãng bởi những dòng không còn hiệu lực,
   nên gấp lại bằng <details> (không cần JS) và làm nhạt hẳn màu để không tranh
   sự chú ý với dữ liệu thật.
   ============================================================================= */
.wf-cancelled-box{ margin-top:18px; border:1px dashed var(--border); border-radius:11px; background:var(--surface-alt); }
.wf-cancelled-box > summary{
  list-style:none; cursor:pointer; padding:10px 14px; display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; color:var(--ink-soft); user-select:none; border-radius:11px;
}
.wf-cancelled-box > summary::-webkit-details-marker{ display:none; }
.wf-cancelled-box > summary:hover{ color:var(--ink); }
/* Mũi tên tự xoay khi mở — dấu hiệu duy nhất cho biết khối này bấm được. */
.wf-cancelled-box > summary::after{
  content:'▸'; margin-left:auto; font-size:11px; transition:transform .18s ease;
}
.wf-cancelled-box[open] > summary::after{ transform:rotate(90deg); }
.wf-cancelled-dot{ width:7px; height:7px; border-radius:50%; background:var(--ink-faint); flex-shrink:0; }
.wf-cancelled-hint{ font-weight:500; font-size:11px; color:var(--ink-faint); }
.wf-cancelled-box[open] .wf-cancelled-hint{ display:none; }
.wf-cancelled-body{ padding:0 14px 12px; }
.wf-cancelled-row{
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  padding:9px 0; border-top:1px solid var(--border);
}
.wf-cancelled-row .t{ font-size:12.5px; font-weight:600; color:var(--ink-soft); text-decoration:line-through; }
.wf-cancelled-row .s{ font-size:11px; color:var(--ink-faint); margin-top:3px; line-height:1.5; }
.wf-cancelled-tag{
  font-size:10.5px; font-weight:700; white-space:nowrap; flex-shrink:0;
  background:#fff; color:var(--ink-faint); border:1px solid var(--border); border-radius:20px; padding:2px 9px;
}

/* =============================================================================
   DỰ BÁO DÒNG TIỀN VÀO (Tổng quan kế toán)
   ============================================================================= */
/* 4 khối mốc thời gian. Dùng gradient + nâng nhẹ khi rê chuột để phân biệt hẳn
   với thẻ KPI thường — đây là con số DỰ BÁO, không phải tiền đã có. */
.fc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.fc-card{
  position:relative; overflow:hidden; border-radius:16px; padding:16px 18px; color:#fff;
  text-decoration:none; display:block; transition:transform .18s ease, box-shadow .18s ease;
}
a.fc-card:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(19,27,48,0.18); }
a.fc-card:active{ transform:translateY(-1px); }
a.fc-card:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }
/* Vệt sáng chéo — thuần trang trí, đặt dưới nội dung. */
.fc-card::after{
  content:''; position:absolute; right:-30px; top:-40px; width:120px; height:120px;
  border-radius:50%; background:rgba(255,255,255,0.13);
}
.fc-card > *{ position:relative; z-index:1; }
.fc-1{ background:linear-gradient(135deg,#0F766E,#14B8A6); }
.fc-3{ background:linear-gradient(135deg,#1D4ED8,#3B82F6); }
.fc-6{ background:linear-gradient(135deg,#7C3AED,#A78BFA); }
.fc-12{ background:linear-gradient(135deg,#B45309,#F59E0B); }
.fc-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.06em; opacity:0.85; font-weight:700; }
.fc-value{ font-size:20px; font-weight:800; margin-top:6px; line-height:1.2; }
.fc-sub{ font-size:11.5px; opacity:0.9; margin-top:4px; }
.fc-inc{ font-size:11px; opacity:0.8; margin-top:6px; border-top:1px solid rgba(255,255,255,0.25); padding-top:6px; }

/* Biểu đồ cột ngang — thuần CSS, không thư viện. Chiều rộng đặt bằng inline
   style từ máy chủ; transition làm cột "chạy" ra khi trang hiện. */
.fc-chart{ display:flex; flex-direction:column; gap:12px; }
.fc-bar-row{ display:flex; align-items:center; gap:12px; }
.fc-bar-name{ width:96px; flex-shrink:0; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.fc-bar-track{ flex:1; height:26px; background:var(--surface-alt); border-radius:8px; overflow:hidden; position:relative; }
.fc-bar-fill{
  height:100%; border-radius:8px; width:0;
  animation:fc-grow .9s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes fc-grow{ to{ width:var(--fc-w,0%); } }
.fc-bar-amount{ width:132px; flex-shrink:0; text-align:right; font-size:13px; font-weight:700; color:var(--ink); }
.fc-bar-count{ font-size:11px; font-weight:500; color:var(--ink-soft); }

/* Cơ cấu theo gói học — dải màu chồng nhau. */
.fc-stack{ display:flex; height:14px; border-radius:8px; overflow:hidden; background:var(--surface-alt); }
.fc-stack > i{ display:block; height:100%; transition:opacity .18s ease; }
.fc-stack:hover > i{ opacity:0.75; }
.fc-stack > i:hover{ opacity:1; }
.fc-legend{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:12px; }
.fc-legend-item{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-soft); }
.fc-legend-dot{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }

@media (max-width:900px){
  .fc-grid{ grid-template-columns:repeat(2,1fr); }
  .fc-bar-name{ width:70px; }
  .fc-bar-amount{ width:104px; }
}

/* Người bật "giảm chuyển động" trong hệ điều hành: bỏ hết hiệu ứng, cột hiện
   sẵn ở đúng chiều rộng thay vì chạy. */
@media (prefers-reduced-motion: reduce){
  a.fc-card:hover, a.fc-card:active{ transform:none; }
  .fc-card, .fc-stack > i, .wf-cancelled-box > summary::after{ transition:none; }
  .fc-bar-fill{ animation:none; width:var(--fc-w,0%); }
}


/* =============================================================================
   2 BIỂU ĐỒ ĐẦU TRANG TỔNG QUAN KẾ TOÁN
   Thuần CSS/SVG, không thư viện ngoài.
   ============================================================================= */
/* Dòng "Tiền hàng + VAT = Phải thu" dưới ô số tiền của từng đợt trong wizard.
   Nền hổ phách nhạt, KHÔNG dùng đỏ: đây là thông tin bình thường của một hợp đồng
   có hoá đơn, không phải cảnh báo lỗi. */
/* Dòng nhắc ở đầu bước 3 khi hợp đồng có thuế. Cùng tông hổ phách với dòng thuế
   của từng đợt, để mắt nhận ra ngay là cùng một chuyện. */
/* ═══════════════════════════════════════════════════════════════════════
   CÔNG VIỆC — CHI TIẾT VÀ DÒNG THỜI GIAN TRAO ĐỔI

   Nguyên tắc dựng hình ở đây: BÌNH LUẬN và MỐC TỰ ĐỘNG phải khác nhau ngay từ
   dáng, vì chúng khác nhau về vai trò. Bình luận là thứ để ĐỌC — có avatar, có
   nền, có khoảng thở. Mốc là thứ để LIẾC — một dòng mảnh, một chấm nhỏ, chữ xám.
   Trộn hai thứ vào cùng một kiểu thẻ thì mắt phải đọc từng dòng mới biết cái nào
   là người nói, cái nào là máy ghi.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Đầu modal chi tiết ---------- */
.tkd-head{ border-bottom:1px solid var(--border); padding-bottom:13px; margin-bottom:14px; }
.tkd-badges{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:7px; }
.tkd-status{ font-size:10.5px; font-weight:800; border-radius:999px; padding:2px 10px; }
.tkd-status.s-todo{  background:#FEF3C7; color:#92400E; }
.tkd-status.s-doing{ background:#DBEAFE; color:#1D4ED8; }
.tkd-status.s-done{  background:#D1FAE5; color:#065F46; }
.tkd-title{ font-size:18px; font-weight:800; line-height:1.35; margin:0; }
.tkd-desc{ font-size:13px; color:var(--ink-soft); line-height:1.6; margin-top:7px; white-space:pre-wrap; }

/* ---------- Bốn ô thông tin ---------- */
.tkd-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px; margin-bottom:12px;
}
.tkd-cell{ background:var(--surface-alt); border-radius:10px; padding:9px 12px; }
.tkd-lb{
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-faint);
}
.tkd-v{ font-size:13px; font-weight:700; margin-top:3px; }
.tkd-v.is-late{ color:var(--coral); }
.tkd-sup{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:12px; }

/* Dòng "chỉ người giao mới sửa được" — xám, KHÔNG dùng đỏ. Đây là một luật bình
   thường của phần mềm, không phải lỗi người dùng vừa gây ra. */
.tkd-note{
  background:var(--surface-alt); border-left:3px solid var(--ink-faint);
  border-radius:0 9px 9px 0; padding:9px 13px; margin-bottom:14px;
  font-size:12px; line-height:1.6; color:var(--ink-soft);
}

/* Gạch phân mục có chữ ở đầu dòng */
.tkd-sec{ display:flex; align-items:center; gap:10px; margin:18px 0 12px; }
.tkd-sec-n{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); white-space:nowrap;
}
.tkd-sec-line{ flex:1; height:1px; background:var(--border); }

/* ---------- Dòng thời gian ---------- */
/* Cao tối đa rồi cuộn TRONG khung: ô soạn bình luận phải luôn nhìn thấy được, chứ
   không bị đẩy xuống dưới hàng chục dòng trao đổi. */
.tkc-list{ max-height:340px; overflow-y:auto; padding-right:4px; }

.tkc-row{ display:flex; gap:10px; margin-bottom:13px; }
.tkc-av{
  flex:none; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.02em;
}
.tkc-body{
  flex:1; min-width:0;
  background:var(--surface-alt); border-radius:3px 11px 11px 11px; padding:8px 12px 9px;
}
/* Bình luận của CHÍNH MÌNH: nền xanh nhạt và bo góc lệch sang phải. Trong một cuộc
   trao đổi, thứ đầu tiên mắt cần tách ra là "câu nào của tôi". */
.tkc-row.is-mine .tkc-body{ background:var(--blue-soft); border-radius:11px 3px 11px 11px; }

.tkc-head{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:3px; }
.tkc-name{ font-size:12.5px; font-weight:800; }
.tkc-at{ font-size:11px; color:var(--ink-faint); }
.tkc-edited{ font-size:10.5px; color:var(--ink-faint); font-style:italic; }
.tkc-text{ font-size:13px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }

/* Nút sửa/xoá bình luận: mờ sẵn, rõ lên khi rê chuột vào đúng dòng đó. Hiện rõ
   lúc nào cũng như nhau thì cả danh sách đầy nút, mắt không còn chỗ nghỉ. */
.tkc-mini{
  background:none; border:none; cursor:pointer; padding:1px 3px;
  font-size:11.5px; line-height:1; opacity:0; transition:opacity .12s;
}
.tkc-row:hover .tkc-mini{ opacity:.55; }
.tkc-mini:hover{ opacity:1; }

/* ---------- Mốc tự động ---------- */
.tkc-ev{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:4px 0 4px 11px; margin-bottom:9px;
  border-left:2px solid var(--border); margin-left:15px;
}
.tkc-ev-dot{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--ink-faint); margin-left:-15px; }
.tkc-ev-tx{ font-size:12px; color:var(--ink-soft); }
.tkc-ev-at{ font-size:11px; color:var(--ink-faint); }

.tkc-del{
  font-size:12px; color:var(--ink-faint); font-style:italic;
  padding:5px 0 5px 26px; margin-bottom:9px;
}

.tkc-empty{ text-align:center; padding:22px 14px; color:var(--ink-soft); font-size:12.5px; line-height:1.6; }
.tkc-empty-ic{ font-size:26px; margin-bottom:6px; opacity:.5; }

/* ---------- Ô soạn ---------- */
.tkc-compose{ margin-top:12px; }
.tkc-input{
  width:100%; border:1.5px solid var(--border); border-radius:11px;
  padding:10px 13px; font:inherit; font-size:13px; line-height:1.6; resize:vertical;
  background:var(--surface); color:var(--ink);
}
.tkc-input:focus{ outline:none; border-color:var(--blue); }
.tkc-compose-bar{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.tkc-hint{ font-size:11.5px; color:var(--ink-faint); flex:1; min-width:0; }
.tkc-count{ font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.tkc-count.is-near{ color:var(--coral); font-weight:700; }

/* Sửa bình luận TẠI CHỖ — không nhảy sang hộp thoại khác rồi mất mạch đang đọc. */
.tkc-editbox{ margin-top:6px; }
.tkc-editta{
  width:100%; border:1.5px solid var(--blue); border-radius:9px;
  padding:8px 11px; font:inherit; font-size:13px; line-height:1.6; resize:vertical;
  background:var(--surface); color:var(--ink);
}
.tkc-editact{ display:flex; gap:7px; justify-content:flex-end; margin-top:6px; }

/* ---------- Số bình luận trên thẻ công việc ---------- */
.tk-cmt{
  font-size:11px; font-weight:700; text-decoration:none; color:var(--ink-faint);
  border-radius:999px; padding:1px 7px; line-height:1.6; white-space:nowrap;
}
.tk-cmt:hover{ background:var(--surface-alt); color:var(--ink); }
.tk-cmt.has{ background:var(--blue-soft); color:var(--blue); }

/* Tiêu đề thẻ nay bấm được — vẫn phải trông như tiêu đề, không như một liên kết. */
a.tk-title{ display:block; text-decoration:none; color:var(--ink); }
a.tk-title:hover{ color:var(--blue); }

/* ---------- Màn hình "không sửa được" ---------- */
.tk-noedit-ic{ font-size:34px; text-align:center; opacity:.55; }
.tk-noedit-box{ background:var(--surface-alt); border-radius:11px; padding:12px 15px; margin:15px 0 13px; }
.tk-noedit-title{ font-weight:700; font-size:14.5px; line-height:1.4; }
.tk-noedit-meta{ font-size:12px; color:var(--ink-soft); margin-top:4px; }
.tk-noedit-can{
  border:1px solid var(--border); border-radius:11px; padding:12px 15px; margin-bottom:6px;
}
.tk-noedit-can-h{
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-faint); margin-bottom:8px;
}
.tk-noedit-can-i{ display:flex; gap:9px; font-size:12.5px; line-height:1.6; margin-bottom:6px; }
.tk-noedit-can-i:last-child{ margin-bottom:0; }
.tk-noedit-can-i > span{ flex:none; }

/* Cảnh báo "lộ trình lệch giá trị hợp đồng" — đỏ cam, đây là sai số TIỀN thật
   chứ không phải một thông tin phụ như dòng thuế. */
.sched-warn{
  border:1px solid rgba(239,68,68,0.40); background:rgba(239,68,68,0.08);
  border-radius:10px; padding:10px 13px; margin-bottom:12px;
}
.sched-warn-t{ font-size:12.5px; font-weight:800; color:#B91C1C; }
.sched-warn-b{ font-size:11.5px; line-height:1.55; color:var(--ink); margin-top:4px; }
.sched-warn-chip{
  display:inline-block; background:rgba(239,68,68,0.12); color:#B91C1C;
  border-radius:999px; padding:2px 9px; font-size:11px; font-weight:800; white-space:nowrap;
}

.wiz-vat-hint{
  padding:9px 12px; border-radius:9px; margin-bottom:12px;
  background:rgba(245,158,11,0.10); border:1px solid rgba(245,158,11,0.30);
  font-size:12px; line-height:1.55; color:var(--ink);
}
.wiz-inst-vat:empty{ display:none; }
.wiz-inst-vat{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px;
  margin-top:6px; padding:6px 10px; border-radius:8px;
  background:rgba(245,158,11,0.10); border:1px solid rgba(245,158,11,0.30);
  font-size:11.5px; line-height:1.5; color:var(--ink);
}
.wiz-inst-vat .wiv-op{ color:var(--ink-faint); font-weight:700; }
.wiz-inst-vat .wiv-tax{ color:#B45309; font-weight:700; }
.wiz-inst-vat .wiv-due{ font-size:12.5px; }
.wiz-inst-vat .wiv-tag{
  background:rgba(245,158,11,0.22); color:#92400E; border-radius:999px;
  padding:1px 7px; font-size:10px; font-weight:700;
}
.wiz-inst-vat .wiv-note{ color:var(--ink-soft); font-style:italic; }
/* Ghi chú phụ dưới bảng đối chiếu lộ trình — xám, chỉ là điều cần biết thêm. */
.wsum-note{
  margin-top:8px; padding:7px 10px; border-radius:8px;
  background:var(--surface-alt); color:var(--ink-soft);
  font-size:11.5px; line-height:1.5;
}

/* Khối "Hành động hợp đồng" ở cuối panel hồ sơ học viên (chỉ khi mở từ trang
   Hợp đồng). Nút PHẲNG xếp dọc, cố ý KHÔNG dùng menu ⋯ như ở bảng: menu ở bảng
   mang id="action-menu-contract-<id>", render lần thứ hai trong panel là trùng id
   và getElementById sẽ mở nhầm menu của dòng bảng phía dưới. */
.ca-block{
  border:1px solid var(--border); border-radius:12px;
  padding:11px 13px; margin-bottom:10px; background:var(--surface-alt);
}
.ca-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:9px; }
.ca-head .ca-name{ font-size:13px; font-weight:700; }
.ca-row{ display:flex; flex-direction:column; gap:7px; align-items:stretch; }
.ca-row form{ display:block; }
.ca-btn{ width:100%; justify-content:flex-start; text-align:left; text-decoration:none; }

.chart-row{ display:grid; grid-template-columns:1.55fr 1fr; gap:16px; margin-bottom:20px; }

/* ─────────── KHUNG BIỂU ĐỒ ───────────
   VÌ SAO PHẢI CÓ KHUNG RIÊNG, KHÔNG ĐẶT KÍCH THƯỚC LÊN THẺ canvas:

   Chart.js ở chế độ responsive tính kích thước theo ĐÚNG THỨ TỰ này:
       height = (bề rộng THẺ CHA) / aspectRatio        ← lấy bề rộng CHƯA kẹp
       width  = min(bề rộng thẻ cha, max-width của canvas)   ← kẹp SAU đó
   Biểu đồ tròn và radar mặc định aspectRatio = 1. Nên một thẻ canvas mang
   style="max-width:200px" nằm trong thẻ cha rộng 900px sẽ ra canvas 200 x 900 —
   hình tròn bị kéo thành bầu dục cao nghều, đúng lỗi thấy ở trang Tổng quan Du học.

   Đặt kích thước lên canvas là sai cách. Phải cố định kích thước Ở THẺ CHA rồi bảo
   Chart.js đừng tự giữ tỷ lệ nữa (maintainAspectRatio:false).
   position:relative là bắt buộc — Chart.js đo thẻ cha gần nhất có kích thước xác định.
   ─────────── RÀNG BUỘC BẮT BUỘC ĐI KÈM ───────────
   Hai luật width/height 100% !important bên dưới GHI ĐÈ style inline mà chính
   Chart.js đặt lên thẻ canvas. Vì vậy MỌI biểu đồ nằm trong .chart-box hoặc
   .chart-donut BẮT BUỘC phải khai maintainAspectRatio:false trong JS. Thiếu nó thì
   Chart.js vẫn dựng bitmap VUÔNG (v4 ép aspectRatio = 1 cho tròn/quạt/radar) rồi
   bitmap vuông đó bị kéo vào khung chữ nhật — hình tròn thành bầu dục. Lỗi này đã
   tái đi tái lại ở bốn biểu đồ khác nhau, nên viết hẳn ra đây.

   Đang dùng .chart-box: Tổng quan CRM, Tổng quan Du học, Trang chủ (2 chỗ),
   Báo cáo (2 chỗ). Thêm chỗ mới thì nhớ khai maintainAspectRatio:false. */
.chart-box{ position:relative; width:100%; height:260px; }
.chart-box > canvas{ width:100% !important; height:100% !important; }

/* Biểu đồ tròn đứng CẠNH một bảng số liệu: ô vuông, không co giãn theo chiều cao bảng. */
/* Khung KHÔNG cần vuông: Chart.js vẽ vòng tròn với bán kính bằng nửa cạnh NGẮN
   của vùng vẽ, mà chú thích ở đáy đã ăn mất chừng 65px. Khung 250x250 chỉ còn
   vòng tròn đường kính ~180px; 240x290 cho vòng ~210px mà vẫn tròn đều. */
.chart-donut{ position:relative; flex:none; width:240px; height:290px; }
.chart-donut > canvas{ width:100% !important; height:100% !important; }

/* Biểu đồ tròn chiếm trọn bề ngang một thẻ: cao vừa phải và canh giữa, thay vì nở
   thành vòng tròn to bằng cả bề ngang thẻ. */
.chart-box.is-round{ height:300px; max-width:460px; margin:0 auto; }

@media (max-width:640px){
  /* Phải nhắc lại .is-round: luật .chart-box.is-round{height:300px} có độ ưu tiên
     (0,2,0) cao hơn .chart-box (0,1,0), mà độ ưu tiên THẮNG thứ tự dòng — viết
     .chart-box trần ở đây thì ba biểu đồ tròn vẫn cao 300px trên điện thoại. */
  .chart-box, .chart-box.is-round{ height:230px; }
  .chart-donut{ width:100%; height:280px; }
}
.chart-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; position:relative; overflow:hidden;
}
.chart-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:4px; flex-wrap:wrap; }
.chart-title{ font-size:15px; font-weight:700; }
.chart-sub{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.chart-year{ border:1px solid var(--border); border-radius:9px; padding:6px 10px; font-size:12.5px; background:var(--surface-alt); }

/* ---- Cột: 12 tháng, mỗi tháng 2 cột thu/chi ---- */
.bar-chart{ display:flex; align-items:flex-end; gap:6px; height:190px; margin-top:18px; padding-bottom:2px; }
.bar-month{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; min-width:0; }
.bar-stack{ flex:1; display:flex; align-items:flex-end; justify-content:center; gap:3px; width:100%; }
.bar{
  width:44%; max-width:15px; border-radius:5px 5px 0 0; height:0;
  animation:bar-rise .85s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes bar-rise{ to{ height:var(--bar-h,0%); } }
.bar-thu{ background:linear-gradient(180deg,#22C55E,#15803D); }
.bar-chi{ background:linear-gradient(180deg,#FCA5A5,#DC2626); }
.bar-month.future .bar{ opacity:0.32; }
.bar-label{ font-size:11px; color:var(--ink-soft); font-weight:600; }
/* Tháng đang xem nổi lên khi rê chuột — cả cụm sáng lên, cột khác mờ đi. */
.bar-chart:hover .bar-month{ opacity:0.5; }
.bar-chart .bar-month:hover{ opacity:1; }
.bar-month:hover .bar-label{ color:var(--brand); }
.chart-legend{ display:flex; gap:16px; margin-top:12px; font-size:12px; color:var(--ink-soft); flex-wrap:wrap; }
.chart-legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }

/* ---- Tròn: donut bằng SVG, mỗi lát 1 vòng stroke-dasharray ---- */
.donut-wrap{ display:flex; align-items:center; justify-content:center; padding:8px 0 4px; }
.donut{ transform:rotate(-90deg); }
.donut circle{ fill:none; stroke-width:20; transition:stroke-width .18s ease, opacity .18s ease; }
.donut:hover circle{ opacity:0.55; }
.donut circle:hover{ opacity:1; stroke-width:24; }
.donut-center{ text-align:center; margin-top:-104px; margin-bottom:74px; pointer-events:none; position:relative; }
.donut-center .n{ font-size:22px; font-weight:800; }
.donut-center .l{ font-size:11.5px; color:var(--ink-soft); }
.slice-list{ margin-top:6px; }
.slice-row{ display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.slice-row:last-child{ border-bottom:none; }
.slice-dot{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.slice-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slice-val{ font-weight:700; white-space:nowrap; }
.slice-pct{ color:var(--ink-soft); font-size:11.5px; width:46px; text-align:right; flex-shrink:0; }

@media (max-width:1100px){ .chart-row{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
  .bar{ animation:none; height:var(--bar-h,0%); }
  .bar-chart:hover .bar-month, .donut:hover circle{ opacity:1; }
  .donut circle{ transition:none; }
}


/* =============================================================================
   Ô TÍCH NGÀY HỌC TRONG TUẦN (form lớp học)
   Checkbox thật bị ẩn đi, cái nhìn thấy là nhãn bao quanh — vẫn bấm được bằng
   phím Tab và phím cách, mà nhìn gọn hơn hẳn hàng checkbox mặc định.
   ============================================================================= */
.day-picker{ display:flex; gap:7px; flex-wrap:wrap; }
.day-chip{ position:relative; margin:0; cursor:pointer; user-select:none; }
.day-chip input{ position:absolute; opacity:0; width:0; height:0; }
.day-chip span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; padding:9px 12px; border-radius:10px;
  border:1.5px solid var(--border); background:#fff;
  font-size:13px; font-weight:700; color:var(--ink-soft);
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.day-chip:hover span{ border-color:var(--brand); color:var(--brand); }
.day-chip input:checked + span{ background:var(--brand); border-color:var(--brand); color:#fff; transform:translateY(-1px); }
.day-chip input:focus-visible + span{ outline:2px solid var(--brand); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .day-chip span{ transition:none; }
  .day-chip input:checked + span{ transform:none; }
}


/* Lưới ngày dự kiến khi sinh lịch học — bỏ tích ngày lễ trước khi tạo. */
.gen-date-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:8px; max-height:320px; overflow-y:auto; padding:2px; }
.gen-date{ margin:0; cursor:pointer; user-select:none; }
.gen-date input{ position:absolute; opacity:0; width:0; height:0; }
.gen-date span{
  display:block; padding:9px 11px; border-radius:9px; border:1.5px solid var(--border);
  background:#fff; font-size:12.5px; color:var(--ink-soft); transition:all .14s ease;
}
.gen-date span b{ display:block; font-size:11px; font-weight:700; margin-bottom:2px; }
.gen-date:hover span{ border-color:var(--brand); }
.gen-date input:checked + span{ background:var(--blue-soft); border-color:var(--brand); color:var(--brand); }
.gen-date input:not(:checked) + span{ opacity:0.55; text-decoration:line-through; }
.gen-date input:focus-visible + span{ outline:2px solid var(--brand); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .gen-date span{ transition:none; } }


/* Chọn nhanh khoảng thời gian (Lịch dạy). */
.range-picker{ display:flex; gap:6px; flex-wrap:wrap; background:var(--surface-alt); padding:4px; border-radius:11px; }
.range-chip{
  padding:7px 13px; border-radius:8px; font-size:12.5px; font-weight:600;
  color:var(--ink-soft); white-space:nowrap; transition:background .14s ease, color .14s ease;
}
.range-chip:hover{ background:#fff; color:var(--ink); }
.range-chip.active{ background:var(--brand); color:#fff; }
@media (prefers-reduced-motion: reduce){ .range-chip{ transition:none; } }


/* =============================================================================
   LỊCH DẠY TUẦN NÀY THEO GIÁO VIÊN (Tổng quan Trung tâm)
   ============================================================================= */
.tw-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:14px; }
.tw-card{ border:1px solid var(--border); border-radius:14px; padding:14px 16px; background:var(--surface); transition:box-shadow .18s ease, transform .18s ease; }
.tw-card:hover{ box-shadow:0 8px 22px rgba(19,27,48,0.09); transform:translateY(-2px); }
.tw-head{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.tw-name{ font-weight:700; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tw-meta{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; }
/* Thanh tải giảng dạy — so tương đối với giáo viên bận nhất tuần. */
.tw-load{ height:6px; background:var(--surface-alt); border-radius:20px; overflow:hidden; margin-bottom:11px; }
.tw-load > i{ display:block; height:100%; border-radius:20px; background:linear-gradient(90deg,#3B82F6,#8B5CF6); }
.tw-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.tw-day{ background:var(--surface-alt); border-radius:9px; padding:6px 4px; min-height:66px; text-align:center; }
.tw-day.has{ background:#EFF6FF; }
.tw-day.today{ outline:2px solid var(--brand); outline-offset:-2px; }
.tw-dow{ font-size:10.5px; font-weight:800; color:var(--ink-soft); letter-spacing:0.03em; }
.tw-date{ font-size:10px; color:var(--ink-faint); margin-bottom:4px; }
.tw-ses{ background:#fff; border-radius:6px; padding:3px 4px; margin-bottom:3px; box-shadow:0 1px 2px rgba(19,27,48,0.07); }
.tw-ses b{ display:block; font-size:10.5px; color:var(--brand); }
.tw-ses span{ display:block; font-size:9.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:640px){ .tw-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .tw-card, .tw-card:hover{ transition:none; transform:none; } }


/* Khung giờ (ca) trong form lớp học — mỗi ca một thẻ riêng, thêm/xoá được. */
.slot-card{ background:#fff; border:1px solid var(--border); border-radius:11px; padding:11px 12px; margin-bottom:9px; }
.slot-head{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px; font-weight:700; color:var(--ink-soft); margin-bottom:8px; }
.slot-del{ background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:14px; line-height:1; padding:2px 5px; border-radius:6px; }
.slot-del:hover{ background:#FEF2F2; color:var(--coral); }
.slot-time{ display:flex; align-items:center; gap:8px; margin-top:9px; flex-wrap:wrap; }
.slot-time select{ border:1px solid var(--border); border-radius:9px; padding:8px 10px; font-size:13px; background:var(--surface-alt); }
.slot-end{ font-size:12px; font-weight:600; color:var(--brand); background:var(--blue-soft); border-radius:20px; padding:4px 11px; }


/* =============================================================================
   BIỂU ĐỒ GIỜ DẠY GIÁO VIÊN + LỊCH CHỌN KHOẢNG NGÀY
   ============================================================================= */
.th-chart{ display:flex; flex-direction:column; gap:9px; }
.th-row{ display:flex; align-items:center; gap:12px; }
.th-name{ width:150px; flex-shrink:0; font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.th-track{ flex:1; height:22px; background:var(--surface-alt); border-radius:7px; overflow:hidden; }
.th-fill{
  display:block; height:100%; width:0; border-radius:7px;
  background:linear-gradient(90deg,#06B6D4,#3B82F6);
  animation:th-grow .8s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes th-grow{ to{ width:var(--th-w,0%); } }
.th-val{ width:96px; flex-shrink:0; text-align:right; font-size:13px; font-weight:700; }
.th-sub{ font-size:11px; font-weight:500; color:var(--ink-soft); }

/* Ô chọn khoảng ngày dạng HAI Ô NGÀY (khác .wf-daterange dạng popup đã có ở
   thanh công cụ danh sách — cố ý đặt tên khác để không đè lên nhau). */
.wf-range-form{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wf-range-inputs{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--surface-alt); border:1px solid var(--border); border-radius:11px; padding:5px 9px;
}
.wf-range-inputs .lbl{ font-size:12px; font-weight:700; color:var(--ink-soft); letter-spacing:0.01em; }
.wf-range-inputs .ico{ font-size:14px; line-height:1; }
.wf-range-inputs .sep{ color:var(--ink-faint); font-size:12px; }
.wf-range-inputs input[type=date],
.wf-range-inputs input[type=month]{
  border:none; background:#fff; border-radius:8px; padding:6px 9px;
  font-size:12.5px; color:var(--ink); outline:none; box-shadow:0 1px 2px rgba(19,27,48,0.06);
}
.wf-range-inputs input[type=date],
.wf-range-inputs input[type=month]:hover{ box-shadow:0 1px 4px rgba(19,27,48,0.12); }
.wf-range-inputs input[type=date],
.wf-range-inputs input[type=month]:focus{ box-shadow:0 0 0 2px var(--brand); }
@media (prefers-reduced-motion: reduce){ .th-fill{ animation:none; width:var(--th-w,0%); } }


/* =============================================================================
   MODAL GHI DANH HỌC VIÊN VÀO LỚP
   ============================================================================= */
.enroll-list{ max-height:380px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding-right:4px; }
.enroll-row{
  display:flex; align-items:center; gap:11px; padding:10px 12px; cursor:pointer;
  border:1.5px solid var(--border); border-radius:11px; background:var(--surface,#fff);
  transition:border-color .12s ease, background .12s ease;
}
.enroll-row:hover{ background:var(--surface-alt); }
.enroll-row:has(input:checked){ border-color:var(--brand); background:var(--brand-soft,var(--surface-alt)); }
.enroll-row input[type=radio]{ flex-shrink:0; width:16px; height:16px; accent-color:var(--brand); }
.enroll-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.enroll-name{ font-size:13.5px; font-weight:700; color:var(--ink); }
.enroll-sub{ font-size:11.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.enroll-tags{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.enroll-note{ font-size:11px; color:var(--ink-faint); background:var(--surface-alt); border-radius:6px; padding:2px 7px; white-space:nowrap; }


/* =============================================================================
   TRANG CÔNG VIỆC (TASK)
   ============================================================================= */

/* ---- Tổng kết cá nhân ---- */
.tk-sum{ display:grid; grid-template-columns:300px 1fr; gap:16px; align-items:stretch; }
.tk-sum-chart{
  background:var(--surface,#fff); border:1.5px solid var(--border); border-radius:16px; padding:16px 18px;
}
.tk-sum-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-content:start; }
.tk-tile{
  border-radius:16px; padding:16px 18px; color:#fff; position:relative; overflow:hidden;
  box-shadow:0 6px 18px rgba(19,27,48,0.10);
}
.tk-tile .v{ font-size:32px; font-weight:800; line-height:1.1; }
.tk-tile .l{ font-size:12.5px; font-weight:600; opacity:0.92; margin-top:2px; }
.tk-tile.t-todo{  background:linear-gradient(135deg,#F59E0B,#FB923C); }
.tk-tile.t-doing{ background:linear-gradient(135deg,#3B82F6,#06B6D4); }
.tk-tile.t-done{  background:linear-gradient(135deg,#10B981,#34D399); }
.tk-tile.t-late{  background:linear-gradient(135deg,#EF4444,#F97316); }
.tk-note{
  grid-column:1 / -1; font-size:12px; color:var(--ink-soft); line-height:1.6;
  background:var(--surface-alt); border-radius:12px; padding:10px 13px;
}

/* ---- Khối nhóm task ---- */
.tk-block{ margin-top:20px; border-radius:16px; padding:14px 16px 16px; border:1.5px solid var(--border); background:var(--surface,#fff); }
.tk-block-head{ display:flex; align-items:center; gap:9px; margin-bottom:12px; flex-wrap:wrap; }
.tk-block-ic{ font-size:17px; line-height:1; }
.tk-block-name{ font-weight:800; font-size:14.5px; }
.tk-block-n{ font-size:12px; font-weight:800; background:var(--surface-alt); border-radius:999px; padding:2px 10px; }
.tk-block-sub{ font-size:12px; color:var(--ink-soft); }

/* "Task của tôi" phải nhìn là thấy ngay giữa các khối khác — đây là khối duy
   nhất chứa việc người đang xem phải TỰ LÀM. */
.tk-block-mine{
  border:2px solid transparent; background:var(--surface,#fff);
  background-image:linear-gradient(var(--surface,#fff),var(--surface,#fff)),linear-gradient(120deg,#6366F1,#06B6D4,#10B981);
  background-origin:border-box; background-clip:padding-box,border-box;
  box-shadow:0 8px 26px rgba(79,70,229,0.13);
}
.tk-block-mine .tk-block-n{ background:linear-gradient(120deg,#6366F1,#06B6D4); color:#fff; }
.tk-block-others{ background:var(--surface-alt); }
.tk-block-archive{ background:var(--surface-alt); border-style:dashed; }

/* ---- Thẻ task ---- */
.tk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.tk-card{
  border:1.5px solid var(--border); border-radius:13px; padding:12px 13px; background:var(--surface,#fff);
  display:flex; flex-direction:column; gap:7px; transition:box-shadow .15s ease, transform .15s ease;
}
.tk-card:hover{ box-shadow:0 6px 18px rgba(19,27,48,0.10); transform:translateY(-1px); }
.tk-card.tk-overdue{ border-color:#FCA5A5; background:#FEF2F2; }
.tk-card.tk-done{ opacity:0.82; }
.tk-card.tk-done .tk-title{ text-decoration:line-through; text-decoration-color:var(--ink-faint); }
.tk-top{ display:flex; align-items:center; gap:6px; }
.tk-prio{ font-size:10.5px; font-weight:800; border-radius:999px; padding:2px 9px; letter-spacing:0.02em; }
.tk-prio.p-high{ background:#FEE2E2; color:#B91C1C; }
.tk-prio.p-mid{  background:#FEF3C7; color:#92400E; }
.tk-prio.p-low{  background:#E0F2FE; color:#075985; }
.tk-flag{ font-size:10.5px; font-weight:800; color:#B91C1C; }
.tk-icon{ font-size:13px; text-decoration:none; opacity:0.55; }
.tk-icon:hover{ opacity:1; }
.tk-title{ font-weight:700; font-size:13.5px; line-height:1.45; }
.tk-desc{ font-size:12px; color:var(--ink-soft); line-height:1.5; white-space:pre-wrap; }
.tk-meta{ display:flex; flex-wrap:wrap; gap:10px; font-size:11.5px; color:var(--ink-soft); }
.tk-due-late{ color:var(--coral); font-weight:700; }
.tk-sup{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.tk-sup-lb{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); font-weight:700; }
.tk-chip{ font-size:11px; background:#EEF2FF; color:#4338CA; border-radius:999px; padding:2px 9px; font-weight:600; }
.tk-by{ font-size:11px; color:var(--ink-faint); font-style:italic; }
.tk-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.tk-move{
  border:1px solid var(--border); background:var(--surface,#fff); border-radius:8px;
  padding:4px 9px; font-size:11.5px; font-weight:600; cursor:pointer; color:var(--ink-soft);
}
.tk-move:hover{ background:var(--surface-alt); color:var(--ink); }
.tk-move.m-doing:hover{ border-color:#3B82F6; color:#1D4ED8; }
.tk-move.m-done:hover{  border-color:#10B981; color:#047857; }
.tk-move.m-todo:hover{  border-color:#F59E0B; color:#B45309; }

/* ---- Bảng hoàn thành theo nhân viên ---- */
.tk-staff-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.tk-staff{
  display:block; text-decoration:none; color:inherit;
  border:1.5px solid var(--border); border-radius:13px; padding:12px 14px; background:var(--surface,#fff);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.tk-staff:hover{ border-color:var(--brand); box-shadow:0 6px 18px rgba(19,27,48,0.10); }
.tk-staff-top{ display:flex; align-items:center; gap:10px; }
.tk-staff-name{ font-weight:700; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-staff-sub{ font-size:11.5px; color:var(--ink-soft); }
.tk-staff-pct{ font-size:19px; font-weight:800; }
.tk-staff-legend{ display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; margin-top:7px; }

/* ---- Chọn người hỗ trợ trong modal ---- */
.tk-sup-picker{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:6px;
  max-height:210px; overflow-y:auto; padding:8px; border:1px solid var(--border);
  border-radius:11px; background:var(--surface-alt);
}
.tk-sup-item{
  display:flex; align-items:center; gap:8px; padding:6px 9px; border-radius:9px;
  background:var(--surface,#fff); border:1.5px solid transparent; cursor:pointer; font-size:12.5px;
}
.tk-sup-item:hover{ border-color:var(--border); }
.tk-sup-item .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-sup-item input[type=checkbox]{ accent-color:var(--brand); width:15px; height:15px; flex-shrink:0; }
.tk-sup-item:has(input:checked){ border-color:var(--brand); background:#EEF2FF; }
.tk-sup-item.is-assignee{ opacity:0.45; cursor:not-allowed; }

@media (max-width:1000px){
  .tk-sum{ grid-template-columns:1fr; }
  .tk-sum-tiles{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce){ .tk-card{ transition:none; } .tk-card:hover{ transform:none; } }


/* =============================================================================
   MODAL ĐIỂM DANH
   ============================================================================= */
.at-bulk{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:12px 0; font-size:12.5px; color:var(--ink-soft); }
.at-bulk-btn{
  border:1.5px solid var(--border); background:var(--surface,#fff); border-radius:999px;
  padding:5px 13px; font-size:12px; font-weight:700; cursor:pointer;
}
.at-bulk-btn.at-present:hover{ border-color:#10B981; color:#047857; background:#ECFDF5; }
.at-bulk-btn.at-late:hover{    border-color:#F59E0B; color:#B45309; background:#FFFBEB; }
.at-bulk-btn.at-excused:hover{ border-color:#3B82F6; color:#1D4ED8; background:#EFF6FF; }
.at-bulk-btn.at-absent:hover{  border-color:#EF4444; color:#B91C1C; background:#FEF2F2; }

.at-list{ display:flex; flex-direction:column; gap:7px; max-height:400px; overflow-y:auto; padding-right:4px; }
.at-row{
  display:grid; grid-template-columns:150px 1fr 160px; gap:10px; align-items:center;
  border:1.5px solid var(--border); border-radius:11px; padding:8px 11px; background:var(--surface,#fff);
}
.at-name{ font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.at-view{ font-size:12.5px; color:var(--ink-soft); }
.at-opts{ display:flex; gap:5px; flex-wrap:wrap; }
.at-opt{ position:relative; cursor:pointer; }
.at-opt input[type=radio]{ position:absolute; opacity:0; width:0; height:0; }
.at-opt span{
  display:inline-block; padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:700;
  border:1.5px solid var(--border); color:var(--ink-soft); background:var(--surface-alt);
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.at-opt:hover span{ border-color:var(--ink-faint); }
.at-opt.at-present input:checked + span{ background:#10B981; border-color:#10B981; color:#fff; }
.at-opt.at-late    input:checked + span{ background:#F59E0B; border-color:#F59E0B; color:#fff; }
.at-opt.at-excused input:checked + span{ background:#3B82F6; border-color:#3B82F6; color:#fff; }
.at-opt.at-absent  input:checked + span{ background:#EF4444; border-color:#EF4444; color:#fff; }
.at-opt input:focus-visible + span{ box-shadow:0 0 0 3px rgba(59,130,246,0.35); }
.at-note{ font-size:12px; padding:6px 9px; border:1px solid var(--border); border-radius:8px; }

@media (max-width:760px){ .at-row{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .at-opt span{ transition:none; } }


/* =============================================================================
   MODAL XẾP PHÒNG KÝ TÚC XÁ
   ============================================================================= */
.kx-res-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
.kx-res{ display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:11px; background:var(--surface-alt); }
.kx-res-name{ font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kx-res-sub{ font-size:11px; color:var(--ink-soft); }

.kx-cand-list{
  display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto;
  padding:8px; border:1px solid var(--border); border-radius:11px; background:var(--surface-alt);
}
.kx-cand{
  display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:10px; cursor:pointer;
  background:var(--surface,#fff); border:1.5px solid transparent;
}
.kx-cand:hover{ border-color:var(--border); }
.kx-cand:has(input:checked){ border-color:var(--brand); background:#EEF2FF; }
.kx-cand input[type=radio]{ accent-color:var(--brand); width:16px; height:16px; flex-shrink:0; }
.kx-cand-main{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.kx-cand-name{ font-size:13px; font-weight:700; }
.kx-cand-sub{ font-size:11.5px; color:var(--ink-soft); }


/* =============================================================================
   TAB THU TIỀN KÝ TÚC XÁ — 3 bước theo đúng trình tự một kỳ
   ============================================================================= */
.kx-step{ border:1.5px solid var(--border); border-radius:16px; padding:14px 16px 16px; margin-bottom:16px; background:var(--surface,#fff); }
.kx-step-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.kx-step-n{
  width:30px; height:30px; border-radius:50%; flex-shrink:0; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
}
.kx-step-title{ font-weight:800; font-size:14.5px; }
.kx-step-sub{ font-size:12px; color:var(--ink-soft); margin-top:2px; line-height:1.5; }
.kx-step-rent{ border-color:#A7F3D0; background:linear-gradient(180deg,#F0FDF4,var(--surface,#fff) 70px); }
.kx-step-rent .kx-step-n{ background:linear-gradient(135deg,#10B981,#34D399); }
.kx-step-meter{ border-color:#BFDBFE; background:linear-gradient(180deg,#EFF6FF,var(--surface,#fff) 70px); }
.kx-step-meter .kx-step-n{ background:linear-gradient(135deg,#3B82F6,#06B6D4); }
.kx-step-collect{ border-color:#FDE68A; background:linear-gradient(180deg,#FFFBEB,var(--surface,#fff) 70px); }
.kx-step-collect .kx-step-n{ background:linear-gradient(135deg,#F59E0B,#FBBF24); }

.kx-kind{ display:inline-block; font-size:11px; font-weight:800; border-radius:999px; padding:2px 10px; white-space:nowrap; }
.kx-kind.k-rent{ background:#D1FAE5; color:#065F46; }
.kx-kind.k-util{ background:#DBEAFE; color:#1E3A8A; }
.kx-kind.k-full{ background:#F1F5F9; color:#475569; }


/* ===================================================================
   KHỐI CON TRONG FORM (.wf-subform) + NGÀY SINH 3 Ô (.wf-dob)
   -------------------------------------------------------------------
   Dùng khi một form dài chứa vài trường thuộc về MỘT người/một chủ đề
   khác (ví dụ: form tạo lead nói về người liên hệ, nhưng có một cụm
   nói về học viên). Không gom lại thì người nhập không biết ô "Giới
   tính" đang hỏi giới tính của ai.
   =================================================================== */
.wf-subform {
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    background: var(--surface-alt);
    border-radius: 12px;
    padding: 14px 16px 4px;
    margin-bottom: 4px;
}
.wf-subform-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 12px;
}
.wf-subform-title span {
    font-weight: 500;
    color: var(--ink-soft);
    font-size: 11.5px;
}

/* Ngày / Tháng / Năm — năm rộng hơn vì đó là ô hầu như luôn được điền. */
.wf-dob { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 8px; }
.wf-dob input { width: 100%; text-align: center; }

.wf-hint {
    font-size: 11.5px;
    color: var(--ink-soft);
    margin-top: 5px;
    line-height: 1.45;
}


/* ===================================================================
   NÚT "?" HƯỚNG DẪN + HỘP HƯỚNG DẪN
   -------------------------------------------------------------------
   Nút nằm cố định ở thanh trên cùng, cạnh ảnh đại diện. Có vòng sáng
   nhấp nháy nhẹ để người mới nhìn thấy được, nhưng chậm và mờ để người
   dùng quen rồi không thấy khó chịu.
   =================================================================== */
.wf-helpbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px 0 6px;
    margin-right: 10px;
    border-radius: 999px;
    text-decoration: none;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0F2FE 100%);
    border: 1px solid #C7D2FE;
    color: #3730A3;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.wf-helpbtn:hover,
.wf-helpbtn:focus {
    text-decoration: none;
    color: #312E81;
    background: linear-gradient(135deg, #E0E7FF 0%, #BAE6FD 100%);
    box-shadow: 0 4px 14px rgba(79, 70, 229, .22);
    transform: translateY(-1px);
}
.wf-helpbtn-q {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366F1 0%, #0EA5E9 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    /* Vòng sáng lan ra rồi tắt — đủ để mắt bắt được, không đủ để gây phiền. */
    animation: wfHelpPulse 3.2s ease-out infinite;
}
@keyframes wfHelpPulse {
    0%       { box-shadow: 0 0 0 0 rgba(99, 102, 241, .55); }
    45%,100% { box-shadow: 0 0 0 9px rgba(99, 102, 241, 0); }
}
/* Người đã đặt hệ điều hành ở chế độ giảm chuyển động thì tắt hẳn. */
@media (prefers-reduced-motion: reduce) {
    .wf-helpbtn-q { animation: none; }
}
/* Màn hình hẹp: giữ vòng tròn "?", bỏ chữ cho đỡ chật thanh trên. */
@media (max-width: 900px) {
    .wf-helpbtn { padding: 0 5px; }
    .wf-helpbtn-lb { display: none; }
}

/* ---------- Hộp hướng dẫn ---------- */
.wf-help { font-size: 13.5px; line-height: 1.6; }

.wf-help-head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding-bottom: 15px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.wf-help-ic {
    flex: none;
    width: 46px; height: 46px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0F2FE 100%);
    border: 1px solid #C7D2FE;
}
.wf-help-eyebrow {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 800;
    color: #6366F1;
    margin-bottom: 2px;
}
.wf-help-x {
    flex: none;
    width: 30px; height: 30px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}
.wf-help-x:hover { background: var(--surface-alt); color: var(--ink); }

.wf-help-purpose {
    background: linear-gradient(135deg, #F5F3FF 0%, #EFF6FF 100%);
    border-left: 3px solid #6366F1;
    border-radius: 0 12px 12px 0;
    padding: 13px 16px;
    font-size: 14px;
    color: var(--ink);
}

.wf-help-who, .wf-help-rel {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-top: 14px;
}
.wf-help-who-lb {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
    font-weight: 800; color: var(--ink-soft); margin-right: 3px;
}
.wf-help-chip {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #065F46;
    font-size: 11.5px;
    font-weight: 600;
}
.wf-help-chip-soft {
    background: var(--surface-alt);
    border-color: var(--border);
    color: var(--ink-soft);
}

.wf-help-sec { margin-top: 22px; }
.wf-help-sec-t {
    display: flex; align-items: center; gap: 7px;
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
    font-weight: 800; color: var(--ink);
    margin-bottom: 11px;
}
.wf-help-sec-t span { font-size: 14px; }

/* Luồng nghiệp vụ — đánh số tự động, có đường nối dọc cho thấy đây là
   một chuỗi việc nối tiếp nhau chứ không phải danh sách rời rạc. */
.wf-help-flow { list-style: none; margin: 0; padding: 0; counter-reset: wfh; }
.wf-help-flow > li {
    position: relative;
    counter-increment: wfh;
    padding: 0 0 16px 40px;
}
.wf-help-flow > li::before {
    content: counter(wfh);
    position: absolute; left: 0; top: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6366F1 0%, #0EA5E9 100%);
    color: #fff; font-size: 12.5px; font-weight: 800;
}
.wf-help-flow > li::after {
    content: "";
    position: absolute; left: 12.5px; top: 30px; bottom: 4px;
    width: 1.5px;
    background: linear-gradient(#C7D2FE, transparent);
}
.wf-help-flow > li:last-child { padding-bottom: 0; }
.wf-help-flow > li:last-child::after { display: none; }
.wf-help-flow-t { font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.wf-help-flow-d { font-size: 13px; color: var(--ink-soft); }
.wf-help-role {
    display: inline-block; margin-left: 7px;
    padding: 1.5px 8px; border-radius: 999px;
    background: #FEF3C7; border: 1px solid #FDE68A; color: #92400E;
    font-size: 10.5px; font-weight: 700; vertical-align: 1.5px;
}

.wf-help-acts { display: grid; gap: 8px; }
.wf-help-act {
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 10px 13px;
    background: var(--surface);
}
.wf-help-act-n { font-weight: 700; font-size: 13px; color: var(--ink); margin-bottom: 2px; }
.wf-help-act-d { font-size: 12.5px; color: var(--ink-soft); }

.wf-help-rules {
    margin: 0; padding: 0; list-style: none;
    display: grid; gap: 8px;
}
.wf-help-rules > li {
    position: relative;
    padding: 10px 13px 10px 34px;
    border-radius: 11px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    font-size: 12.8px;
    color: #78350F;
}
.wf-help-rules > li::before {
    content: "!";
    position: absolute; left: 12px; top: 10px;
    width: 15px; height: 15px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #F59E0B; color: #fff;
    font-size: 10.5px; font-weight: 800; line-height: 1;
}


/* ===================================================================
   KHỐI HOÁ ĐƠN GTGT TRONG FORM HỢP ĐỒNG
   -------------------------------------------------------------------
   Đặt ngay dưới khối giá và tô màu khác hẳn, vì đây là ô tick DUY NHẤT
   trong form làm thay đổi số tiền. Trước đây nó nằm lẫn giữa các ô
   hành chính ở cuối form nên người lập tick xong vẫn tưởng tổng không đổi.
   =================================================================== */
.cf-vat {
    border: 1px solid #BFDBFE;
    border-left: 3px solid var(--blue);
    background: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%);
    border-radius: 12px;
    padding: 13px 15px;
    margin-bottom: 14px;
}
.cf-vat-check {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}
.cf-vat-body { margin-top: 12px; }
.cf-vat-total {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed #BFDBFE;
    font-size: 13px;
    color: var(--ink-soft);
}
.cf-vat-total strong { font-size: 16px; color: var(--blue); }
.cf-vat-issued {
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px dashed #BFDBFE;
    font-size: 12.5px;
    color: var(--ink-soft);
}

/* ---- Cột "Xuất hoá đơn" ở danh sách hợp đồng ---- */
.vat-cell { white-space: nowrap; }
.vat-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid transparent;
}
.vat-tag.v-done { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.vat-tag.v-wait { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.vat-tag.v-none { background: var(--surface-alt); border-color: var(--border); color: var(--ink-soft); }
/* Nút bấm được (Giám đốc) — giữ nguyên hình dáng nhãn, chỉ thêm dấu hiệu bấm. */
button.vat-tag { cursor: pointer; }
button.vat-tag:hover { filter: brightness(0.96); }
.vat-rate {
    display: block;
    font-size: 10.5px;
    color: var(--ink-faint);
    margin-top: 3px;
    font-weight: 600;
}


/* Dòng ghi rõ PHẠM VI dữ liệu đang hiện trên trang. Dùng ở những trang mà mỗi
   người thấy một tập dữ liệu khác nhau — không ghi ra thì con số nhỏ hơn của
   đồng nghiệp bị đọc thành lỗi hệ thống. */
.scope-note {
    display: inline-block;
    margin-top: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1E40AF;
    font-size: 12px;
}


/* =============================================================================
   TRANG ĐÁNH GIÁ KPI  (.kpi2-*)
   -----------------------------------------------------------------------------
   Dùng tiền tố kpi2- vì .kpi-card/.kpi-grid đã có sẵn và mang nghĩa KHÁC hẳn:
   đó là thẻ số liệu bấm được ở các trang Tổng quan, không phải thẻ chấm điểm
   nhân sự. Trùng tên là hai trang kéo đổ giao diện của nhau.

   Biểu đồ dùng lại đồ có sẵn (.chart-card, .donut, .th-chart, .tk-tile) —
   chỉ vòng tròn điểm và dòng chỉ số là dựng mới.
   ============================================================================= */

/* ---------- Thanh điều hướng tháng ---------- */
.kpi2-mon{ display:flex; align-items:center; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:3px; }
.kpi2-mon a, .kpi2-mon span.dis{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; text-decoration:none;
  color:var(--ink-soft); font-size:15px; font-weight:700;
}
.kpi2-mon a:hover{ background:var(--surface-alt); color:var(--ink); text-decoration:none; }
.kpi2-mon span.dis{ opacity:0.3; cursor:not-allowed; }
.kpi2-mon .lbl{ padding:0 12px; font-size:13.5px; font-weight:700; white-space:nowrap; }

/* ---------- Băng thông báo kỳ đã chốt sổ ---------- */
.kpi2-lock{
  display:flex; align-items:flex-start; gap:11px; flex-wrap:wrap;
  background:linear-gradient(135deg,#ECFDF5,#F0FDFA); border:1px solid #A7F3D0;
  border-radius:13px; padding:12px 16px; margin-bottom:18px; font-size:13px; color:#065F46;
}
.kpi2-lock b{ display:block; font-size:13.5px; margin-bottom:2px; }
.kpi2-lock .ic{ font-size:19px; line-height:1.2; }

/* ---------- Tab bộ phận ---------- */
.kpi2-tabs{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px; }
.kpi2-tab{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:999px; text-decoration:none;
  border:1.5px solid var(--border); background:var(--surface);
  font-size:13px; font-weight:700; color:var(--ink-soft);
  transition:border-color .15s ease, color .15s ease, transform .12s ease;
}
.kpi2-tab:hover{ text-decoration:none; color:var(--ink); border-color:var(--brand); transform:translateY(-1px); }
.kpi2-tab.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.kpi2-tab .n{
  min-width:20px; padding:0 6px; height:19px; border-radius:999px;
  background:var(--surface-alt); color:var(--ink-soft);
  font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;
}
.kpi2-tab.active .n{ background:rgba(255,255,255,0.22); color:#fff; }

/* ---------- Thẻ từng nhân viên ---------- */
.kpi2-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(430px,1fr)); gap:16px; }
.kpi2-card{
  background:var(--surface); border:1.5px solid var(--border); border-radius:16px;
  padding:16px 18px 14px; display:flex; flex-direction:column;
}
.kpi2-card.is-locked{ border-color:#A7F3D0; }

.kpi2-head{ display:flex; align-items:center; gap:13px; padding-bottom:13px; border-bottom:1px solid var(--border); }
.kpi2-who{ flex:1; min-width:0; }
.kpi2-name{ font-size:15px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kpi2-role{ font-size:12px; color:var(--ink-soft); margin-top:1px; }
.kpi2-grade{
  display:inline-flex; align-items:center; gap:5px; margin-top:6px;
  padding:3px 11px; border-radius:999px; font-size:11.5px; font-weight:800; color:#fff;
}

/* Vòng tròn điểm — SVG stroke-dasharray, không thư viện. */
.kpi2-ring-wrap{ position:relative; width:86px; height:86px; flex:none; }
.kpi2-ring{ transform:rotate(-90deg); display:block; }
.kpi2-ring .bg{ fill:none; stroke:var(--surface-alt); stroke-width:9; }
.kpi2-ring .fg{ fill:none; stroke-width:9; stroke-linecap:round; transition:stroke-dasharray .9s cubic-bezier(.22,1,.36,1); }
.kpi2-ring-num{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none;
}
.kpi2-ring-num .v{ font-size:21px; font-weight:800; line-height:1; }
.kpi2-ring-num .l{ font-size:9.5px; color:var(--ink-faint); font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }

/* ---------- Nhóm theo tầng chỉ số ---------- */
.kpi2-tier{ margin-top:14px; }
.kpi2-tier-h{ display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.kpi2-tier-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.kpi2-tier-n{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.kpi2-tier-q{ font-size:11px; color:var(--ink-faint); }

/* ---------- Một dòng chỉ số ---------- */
.kpi2-m{ margin-bottom:11px; }
.kpi2-m:last-child{ margin-bottom:0; }
/* Nhãn — số đo — trọng số nằm trên MỘT hàng khi còn chỗ, TỰ XUỐNG DÒNG khi hết chỗ.

   Bản trước để flex-wrap mặc định (nowrap) cộng .kpi2-m-lb{flex:1; min-width:0}.
   Ở Trang chủ mỗi tầng chỉ số chỉ rộng chừng 350px, mà riêng "60.000.000đ /
   50.000.000đ" cộng thẻ trọng số đã chiếm gần hết. Ô nhãn bị ép xuống còn vài chục
   pixel; chữ dài hơn ô thì TRÀN RA NGOÀI ô và đè thẳng lên con số — đúng lỗi chồng
   chữ nhìn thấy ở khối KPI Trang chủ. (min-width:0 chính là thứ cho phép ô co nhỏ
   hơn cả từ dài nhất bên trong nó.)

   Nay: cho phép xuống dòng; nhãn có bề rộng cơ sở 150px nên hàng nào đủ rộng vẫn
   giữ nguyên bố cục một hàng y như trang Đánh giá KPI, hàng nào chật thì số đo và
   trọng số tự tụt xuống dòng dưới. overflow-wrap:anywhere là chốt chặn cuối: ô có
   hẹp tới đâu thì chữ cũng ngắt TRONG ô chứ không tràn ra đè lên thứ khác. */
.kpi2-m-top{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:2px 8px; margin-bottom:5px;
}
.kpi2-m-lb{
  flex:1 1 150px; min-width:0; font-size:12.5px; font-weight:600; color:var(--ink);
  overflow-wrap:anywhere; line-height:1.4;
}
/* margin-left:auto giữ số đo luôn canh phải, dù nó đứng cùng hàng với nhãn hay đã
   tụt xuống hàng riêng. */
.kpi2-m-val{
  flex:0 1 auto; min-width:0; margin-left:auto;
  font-size:12.5px; font-weight:800; text-align:right; overflow-wrap:anywhere;
}
/* Số đo và mục tiêu mỗi cái là một cụm KHÔNG được cắt đôi ("60.000.000đ" không
   được rơi thành "60.000." / "000đ"), nhưng hai cụm thì tách nhau xuống dòng
   thoải mái. */
.kpi2-m-val > .a, .kpi2-m-val > .t{ white-space:nowrap; }
.kpi2-m-val .t{ font-weight:500; color:var(--ink-faint); }
.kpi2-w{
  flex:none; padding:1px 7px; border-radius:999px; background:var(--surface-alt);
  font-size:10.5px; font-weight:700; color:var(--ink-soft); white-space:nowrap;
}
.kpi2-track{ height:9px; border-radius:6px; background:var(--surface-alt); overflow:hidden; position:relative; }
/* Vạch mốc 100%: vượt mốc này là đạt mục tiêu. Thanh chạy tới 120% nên mốc
   nằm ở 83,33% chiều rộng — có vạch thì nhìn phát biết vượt hay hụt. */
.kpi2-track::after{
  content:''; position:absolute; top:-2px; bottom:-2px; left:83.33%;
  width:1.5px; background:var(--ink-faint); opacity:.45;
}
.kpi2-fill{ height:100%; border-radius:6px; width:0; animation:kpi2-grow .9s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes kpi2-grow{ to{ width:var(--k-w,0%); } }
.kpi2-hint{ font-size:11px; color:var(--ink-faint); margin-top:4px; line-height:1.45; }
.kpi2-hint b{ color:var(--ink-soft); font-weight:700; }
.kpi2-m.no-data .kpi2-m-val{ color:var(--ink-faint); }

/* Nhãn nhỏ gắn vào chỉ số đặc biệt */
.kpi2-flag{
  display:inline-block; padding:1px 6px; border-radius:5px; margin-left:5px;
  font-size:10px; font-weight:700; vertical-align:1px;
}
.kpi2-flag.f-team{ background:var(--blue-soft); color:var(--blue); }
.kpi2-flag.f-inv{ background:var(--purple-soft); color:var(--purple); }

/* ---------- Chỉ số tham khảo (không chấm điểm) ---------- */
.kpi2-info{ margin-top:12px; padding-top:11px; border-top:1px dashed var(--border); }
.kpi2-info-row{ display:flex; align-items:baseline; gap:8px; font-size:12px; padding:3px 0; }
.kpi2-info-lb{ flex:1; min-width:0; color:var(--ink-soft); }
.kpi2-info-v{ font-weight:700; white-space:nowrap; }

/* ---------- Hộp điểm trừ & ghi chú ---------- */
.kpi2-pen{
  margin-top:12px; padding:9px 12px; border-radius:10px;
  background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; font-size:11.5px; line-height:1.5;
}
.kpi2-note{
  margin-top:8px; padding:9px 12px; border-radius:10px;
  background:var(--surface-alt); color:var(--ink-soft); font-size:11.5px; line-height:1.5;
}
.kpi2-locked-tag{ margin-top:8px; font-size:11px; color:#065F46; font-weight:700; }

/* ---------- Chú giải xếp loại ---------- */
.kpi2-legend{ display:flex; flex-wrap:wrap; gap:9px; margin-top:6px; }
.kpi2-legend-item{
  display:inline-flex; align-items:center; gap:7px; padding:5px 12px;
  border-radius:999px; border:1px solid var(--border); background:var(--surface);
  font-size:11.5px; color:var(--ink-soft);
}
.kpi2-legend-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.kpi2-legend-item b{ color:var(--ink); }

/* ---------- Bảng đặt mục tiêu trong modal ---------- */
.kpi2-tg-row{
  display:grid; grid-template-columns:1fr 120px 92px; gap:10px; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.kpi2-tg-row:last-of-type{ border-bottom:none; }
.kpi2-tg-lb{ min-width:0; }
.kpi2-tg-lb .n{ font-size:12.5px; font-weight:700; }
.kpi2-tg-lb .h{ font-size:11px; color:var(--ink-faint); margin-top:2px; line-height:1.4; }
.kpi2-tg-row input{ width:100%; text-align:right; }
.kpi2-tg-head{
  display:grid; grid-template-columns:1fr 120px 92px; gap:10px;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  font-weight:800; color:var(--ink-soft); padding-bottom:7px; border-bottom:1.5px solid var(--border);
}
.kpi2-tg-head span:not(:first-child){ text-align:right; }
.kpi2-tg-total{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:12px; padding:11px 14px; border-radius:11px;
  background:var(--surface-alt); font-size:12.5px; font-weight:700;
}
.kpi2-tg-total .sum{ font-size:17px; font-weight:800; }
.kpi2-tg-total .sum.ok{ color:var(--success); }
.kpi2-tg-total .sum.bad{ color:var(--coral); }

@media (max-width:640px){
  .kpi2-grid{ grid-template-columns:1fr; }
  .kpi2-tg-row, .kpi2-tg-head{ grid-template-columns:1fr 90px 74px; }
}
@media (prefers-reduced-motion: reduce){
  .kpi2-fill{ animation:none; width:var(--k-w,0%); }
  .kpi2-ring .fg{ transition:none; }
  .kpi2-tab:hover{ transform:none; }
}


/* =============================================================================
   GHI CHÚ DỌN LEAD TỰ ĐỘNG + NHÃN ĐIỂM NHU CẦU
   -----------------------------------------------------------------------------
   Dùng <details>/<summary> thật nên không cần JavaScript: mặc định gấp lại cho
   gọn, ai muốn biết cơ chế thì bấm mở. Cơ chế tự động động vào dữ liệu của người
   dùng thì bắt buộc phải nói ra ngay trên trang, không giấu trong tài liệu.
   ============================================================================= */
.lead-clean-note{
  background:linear-gradient(135deg,#FFFBEB,#FEF3F2);
  border:1px solid #FDE68A; border-radius:12px;
  padding:10px 14px; margin-bottom:12px; font-size:12.5px; color:#78350F;
}
.lead-clean-note > summary{
  display:flex; align-items:center; gap:9px; cursor:pointer; list-style:none;
  font-weight:600;
}
.lead-clean-note > summary::-webkit-details-marker{ display:none; }
.lead-clean-note > summary::after{
  content:'▾'; margin-left:auto; font-size:12px; opacity:.6; transition:transform .18s ease;
}
.lead-clean-note[open] > summary::after{ transform:rotate(180deg); }
.lead-clean-note .ic{ font-size:16px; flex:none; }
.lead-clean-note .body{ margin-top:11px; padding-top:11px; border-top:1px dashed #FDE68A; line-height:1.6; }
.lead-clean-note .body p{ margin:0 0 9px; }
.lead-clean-note .rules{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:10px 0; }
.lead-clean-note .col{ background:rgba(255,255,255,.7); border-radius:10px; padding:10px 12px; }
.lead-clean-note .col .h{ font-weight:800; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.lead-clean-note .col.plus .h{ color:#065F46; }
.lead-clean-note .col.minus .h{ color:#991B1B; }
.lead-clean-note .col > div{ padding:2px 0; }
.lead-clean-note .conc{ background:rgba(255,255,255,.7); border-radius:10px; padding:9px 12px; }
.lead-clean-note .safe{ color:#92400E; font-size:12px; margin-bottom:0; }
@media (max-width:760px){ .lead-clean-note .rules{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .lead-clean-note > summary::after{ transition:none; } }

/* Nhãn điểm nhu cầu trong bảng Leads. Màu nền lấy từ C# bằng cách nối hậu tố 1A
   (alpha ~10%) vào mã màu — cùng thủ thuật MarketTag đang dùng. */
.demand-tag{
  display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:11.5px; font-weight:700; white-space:nowrap;
}
.demand-countdown{ font-size:10.5px; color:var(--ink-faint); margin-top:3px; }
.demand-countdown.soon{ color:var(--coral); font-weight:700; }


/* Ô CHỈ ĐỌC trong form — giá trị do hệ thống quyết định, người dùng không sửa.
   Trông giống ô nhập để không lệch hàng, nhưng nền xám và không có con trỏ nhập
   nên nhìn phát biết là không bấm vào được. */
.cf-readonly{
  padding:10px 12px; border-radius:10px;
  border:1px dashed var(--border); background:var(--surface-alt);
  font-size:13.5px; font-weight:700; color:var(--ink);
  min-height:40px; display:flex; align-items:center;
}


/* Hàng sửa nhanh trong danh mục Nguồn giới thiệu — mỗi dòng là một form riêng,
   sửa xong bấm Lưu ngay tại chỗ thay vì mở modal cho một cái tên. */
.ls-row{ display:flex; align-items:center; gap:10px; padding:9px 16px; margin:0; flex-wrap:wrap; }
.ls-row > input[type="text"]:first-of-type{ flex:1 1 200px; min-width:150px; }
.ls-row > input[type="text"]:nth-of-type(2){ flex:1 1 220px; min-width:150px; }
.ls-row > input[type="number"]{ width:78px; text-align:center; flex:none; }
.ls-check{ display:flex; align-items:center; gap:6px; margin:0; font-size:12px; white-space:nowrap; flex:none; }
.ls-check input{ width:auto; }
.ls-used{ width:78px; text-align:right; font-size:11.5px; color:var(--ink-soft); flex:none; }
.ls-actions{ flex:none; }
.ls-del-row td{ background:transparent; }
@media (max-width:820px){
  .ls-used{ width:auto; }
}


/* Khối căn cước trong wizard hợp đồng và modal liên hệ. Ba ô nằm CÙNG MỘT HÀNG vì
   chúng đọc từ cùng một tấm thẻ — tách thành ba dòng rời thì người nhập phải nhìn
   đi nhìn lại tấm thẻ ba lần. */
.wf-idcard{ padding:10px 0; }
.wf-idcard + .wf-idcard{ border-top:1px dashed var(--border); }
.wf-idcard-who{ font-size:11.5px; color:var(--ink-soft); font-weight:700; margin-bottom:8px; }
.wf-idcard-who strong{ color:var(--ink); }
.wf-idcard-grid{ display:grid; grid-template-columns:1.1fr 0.9fr 1.4fr; gap:12px; }
.wf-idcard-grid .form-row{ margin-bottom:0; }
/* Số căn cước đọc theo nhóm chữ số nên giãn nhẹ cho dễ dò khi đối chiếu giấy tờ. */
.wf-idcard-grid input[name$="IdNumber"], .wf-idcard-grid input[name="idNumber"]{ letter-spacing:0.04em; }
.wf-idcard-warn{
  margin-top:10px; padding:8px 11px; border-radius:8px; font-size:12px;
  background:var(--amber-soft, rgba(245,158,11,0.12));
  border:1px solid rgba(245,158,11,0.35); color:var(--ink);
}
@media (max-width:760px){
  .wf-idcard-grid{ grid-template-columns:1fr; gap:8px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   KHỐI KPI Ở TRANG CHỦ  (.mykpi-* cho nhân viên, .hkpi-* cho giám đốc)

   Dùng lại gần như toàn bộ .kpi2-* của trang Đánh giá KPI — vòng tròn điểm,
   thanh chỉ số, nhãn trọng số, hai thẻ "chung bộ phận"/"càng thấp càng tốt"
   đều đã có sẵn và đã đúng. Ở đây chỉ thêm phần KHUNG: một dải hai vùng, vùng
   trái nền đậm để con số điểm nổi hẳn lên, vùng phải nền sáng chia theo tầng
   chỉ số. Mảng màu nằm ở KHUNG chứ không rắc lên từng dòng.
   ═══════════════════════════════════════════════════════════════════════ */
/* BĂNG NGANG, không còn là lưới 2 cột.
   Cột trái 260px + padding ăn mất 292px bề ngang của phần thân, nên trên laptop
   1280px ba tầng chỉ số chỉ xếp được 2 cột và tầng thứ ba mồ côi. */
.mykpi-wrap{
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow); margin-bottom:16px;
}
.mykpi-hero{
  background:linear-gradient(135deg, var(--brand-deep), var(--brand-light));
  color:#fff; padding:15px 18px;
  display:flex; flex-direction:row; align-items:center; flex-wrap:wrap;
  gap:10px 18px; text-align:left;
}
.mykpi-hero-txt{ flex:1 1 220px; min-width:0; }
.mykpi-hero-txt .kpi2-grade{ margin-top:6px; }
.mykpi-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.04em;
  color:rgba(255,255,255,0.72); text-transform:uppercase;
}
/* Vòng tròn điểm dùng lại .kpi2-ring, chỉ đổi hai màu cho hợp nền đậm. */
.mykpi-hero .kpi2-ring .bg{ stroke:rgba(255,255,255,0.18); }
.mykpi-hero .kpi2-ring-num .l{ color:rgba(255,255,255,0.6); }
.mykpi-chips{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-start; margin-left:auto; }
@media (max-width:700px){
  .mykpi-hero{ flex-direction:column; align-items:center; text-align:center; }
  .mykpi-chips{ margin-left:0; justify-content:center; }
  /* Ở trục DỌC, flex-basis chính là CHIỀU CAO — để nguyên 220px thì ô chữ cao
     cứng 220px dù chỉ có hai dòng, chừa một mảng trống to giữa dải màu đậm. */
  .mykpi-hero-txt{ flex:0 1 auto; width:100%; }
}
.mykpi-chip{
  background:rgba(255,255,255,0.14); color:#fff; border-radius:999px;
  padding:3px 9px; font-size:10.5px; font-weight:700; white-space:nowrap;
}
/* LUÔN đúng ba tầng (xem KpiCatalog: cả bốn vai trò đều có đủ 3 tầng), nên khai
   thẳng 3 cột thay vì auto-fit. auto-fit sinh ra trạng thái 2 cột trong đó tầng thứ
   ba mồ côi ở hàng dưới và chừa một ô trống toang bên phải.

   minmax(0,1fr) chứ không phải 1fr: ô lưới mặc định có min-width:auto = min-content,
   đủ để một cụm số dài kéo giãn cột và làm tràn cả khối. */
.mykpi-body{
  padding:16px; display:grid; gap:12px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
/* Ở khoảng giữa, cho tầng thứ ba trải ngang hết hàng dưới thay vì để nó mồ côi. */
@media (max-width:1080px){
  .mykpi-body{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .mykpi-body > .mykpi-col:nth-child(3):last-child{ grid-column:1 / -1; }
}
@media (max-width:720px){
  .mykpi-body{ grid-template-columns:minmax(0, 1fr); }
  .mykpi-body > .mykpi-col:nth-child(3):last-child{ grid-column:auto; }
}
/* Ba tầng chỉ số, mỗi tầng một mảng màu nhạt. Màu lấy đúng bộ màu tầng của
   trang KPI (KpiCatalog.TierColor) nên nền và chấm tròn không bao giờ lệch nhau. */
.mykpi-col{ border-radius:12px; padding:12px 14px; }
.mykpi-col.t-result{ background:var(--success-soft); }
.mykpi-col.t-behaviour{ background:var(--blue-soft); }
.mykpi-col.t-quality{ background:var(--purple-soft); }
.mykpi-col .kpi2-m:last-child{ margin-bottom:0; }

/* DÒNG CHỈ SỐ Ở TRANG CHỦ — LƯỚI 2 HÀNG CỐ ĐỊNH.
   Cột ở đây chỉ rộng chừng 250–350px (thẻ ở trang Đánh giá KPI rộng hơn nhiều), nên
   để flex tự ngắt dòng theo chỗ trống thì mỗi chỉ số ngắt một kiểu và cột số nhấp
   nhô. Ép luôn: hàng 1 là nhãn (trọn bề ngang, tha hồ xuống dòng), hàng 2 là số đo
   bên trái và trọng số bên phải.

   Nhãn và số nằm ở HAI Ô LƯỚI KHÁC NHAU nên về nguyên tắc không còn đường nào đè lên
   nhau, dù cột hẹp tới đâu.

   Bắt buộc giữ tiền tố .mykpi-col: sửa thẳng .kpi2-m-top trần sẽ biến bố cục một
   hàng đang gọn của trang Đánh giá KPI thành hai hàng. */
.mykpi-col .kpi2-m-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"lb lb" "val wgt";
  align-items:baseline;
  gap:4px 8px; margin-bottom:6px;
}
.mykpi-col .kpi2-m-lb{ grid-area:lb; }
/* margin-left:auto là thủ thuật của flex; trong lưới nó vẫn đẩy ô sang phải nên phải
   huỷ, rồi canh trái cho số thẳng cột với mép trái thanh chạy ngay bên dưới.
   tabular-nums giữ các chữ số cùng bề rộng nên cột số không nhảy khi đổi tháng. */
.mykpi-col .kpi2-m-val{
  grid-area:val; margin-left:0; text-align:left; justify-self:start;
  font-variant-numeric:tabular-nums;
}
.mykpi-col .kpi2-w{ grid-area:wgt; justify-self:end; }

/* Trên nền tầng màu nhạt, --surface-alt gần trùng màu nền nên thanh chạy và thẻ
   trọng số tan biến — đó là lý do khối trông bẹt và các dòng dính vào nhau. */
.mykpi-col .kpi2-track{ background:rgba(255,255,255,0.78); }
.mykpi-col .kpi2-w{ background:rgba(255,255,255,0.78); }
/* Vạch ngăn giữa các chỉ số trong cùng một tầng — nhìn ra ngay đâu là một chỉ số. */
.mykpi-col .kpi2-m{ margin-bottom:0; }
.mykpi-col .kpi2-m + .kpi2-m{ margin-top:11px; padding-top:11px; border-top:1px solid rgba(27,33,56,0.08); }
.mykpi-col .kpi2-tier-h{ margin-bottom:11px; padding-bottom:8px; border-bottom:1px solid rgba(27,33,56,0.09); }
.mykpi-empty{
  grid-column:1 / -1; background:var(--surface-alt); border-radius:12px;
  padding:14px 16px; font-size:12.5px; color:var(--ink-soft); line-height:1.55;
}
/* Dải nhắc "chưa đủ dữ liệu" — vàng hổ phách, KHÔNG dùng đỏ. Dòng này nói hệ
   thống còn thiếu số liệu, không nói người đọc làm kém. */
.mykpi-warn{
  grid-column:1 / -1; margin:0 16px 14px; padding:9px 12px; border-radius:9px;
  font-size:11.5px; line-height:1.5; color:var(--ink);
  background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.35);
}
.mykpi-link{ padding:0 16px 14px; text-align:right; font-size:11.5px; }
/* Ba khối này là con TRỰC TIẾP của lưới 2 cột, nên nếu không bảo chúng trải hết
   chiều ngang thì chúng tự rơi vào ô 260px bên trái: hộp điểm trừ màu đỏ mắc kẹt
   dưới mảng nền đậm, các dòng ghi chú thì luân phiên hẹp–rộng, còn liên kết
   "Xem chi tiết" canh phải theo mép ô chứ không theo mép thẻ.
   Giới hạn trong .mykpi-wrap để không đụng tới .kpi2-pen/.kpi2-note của trang KPI. */
.mykpi-wrap > .kpi2-pen,
.mykpi-wrap > .kpi2-note,
.mykpi-wrap > .mykpi-link{ grid-column:1 / -1; }

/* Chia đôi cho khối KPI bản Giám đốc. Khai cả bản trong media query ngay tại đây
   thay vì trông vào thứ tự dòng trong tệp — hai quy tắc cùng độ ưu tiên thì cái
   đứng sau thắng, mà chỗ này nằm cuối tệp nên phải tự mang theo quy tắc thu cột. */
.chart-row.hkpi-row{ grid-template-columns:1fr 1fr; }
@media (max-width:1100px){
  .chart-row.hkpi-row{ grid-template-columns:1fr; }
}

/* ---- Bản Giám đốc ---- */
/* Bảng điểm phải hiện ĐỦ mọi người: cắt "top N" là giấu đúng những người giám đốc
   cần thấy nhất. Cuộn trong khung thay vì bỏ bớt dòng. */
.hkpi-scroll{ max-height:420px; overflow-y:auto; }
/* Ô điểm ở bảng bộ phận chứa HAI cụm (điểm trung bình + mẫu số "n/m người"), không
   phải một cụm như biểu đồ giờ dạy mà .th-val vốn sinh ra để phục vụ — 96px cố định
   làm dòng ngắt sai chỗ, giữa "4/5" và "người". Cho mẫu số một dòng riêng.
   Bắt buộc có tiền tố .hkpi-row: bộ .th-* dùng chung với Tổng quan Trung tâm. */
.hkpi-row .th-val{ width:auto; min-width:106px; }
.hkpi-row .th-sub{ display:block; white-space:nowrap; }
/* Dòng của chính người đang xem — giám đốc kiêm một vai trò KPI vẫn thấy số của
   mình trong cùng bảng, không phải dựng thêm khối thứ hai. */
.hkpi-me{ background:var(--surface-alt); box-shadow:inset 3px 0 0 var(--brand); }
/* Nhãn "đo được N%" — xám, cố ý không dùng màu cảnh báo, cùng lý do như .mykpi-warn. */
.kpi2-flag.f-nodata{ background:var(--surface-alt); color:var(--ink-faint); }

/* .mykpi-wrap không còn là lưới nên media query thu cột cũ ở đây đã bỏ — xem
   khối .mykpi-hero phía trên, nay tự xuống dòng ở 700px. */


/* ═══════════════════════════════════════════════════════════════════════
   KHỐI THUẾ GTGT

   CỐ Ý không dùng dải màu gradient như bốn ô Thu/Chi ở trên. Tiền thuế không
   phải tiền của công ty — đó là khoản giữ hộ Nhà nước rồi phải nộp lại. Một
   tấm thẻ nền sáng viền hổ phách đọc như "đang giữ hộ"; một ô gradient rực rỡ
   đọc như một thành tích, mà đó đúng là hiểu nhầm cần tránh.
   ═══════════════════════════════════════════════════════════════════════ */
.vat-card{
  background:var(--surface); border:1px solid rgba(245,158,11,0.42);
  border-left:4px solid #F59E0B; border-radius:14px;
  padding:15px 17px; margin-bottom:16px; box-shadow:var(--shadow);
}
.vat-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.vat-title{ font-size:14.5px; font-weight:800; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vat-badge{
  background:rgba(245,158,11,0.16); color:#B45309; border-radius:999px;
  padding:2px 9px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.vat-sub{ font-size:12px; color:var(--ink-soft); margin-top:3px; }
.vat-pill{
  background:var(--surface-alt); color:var(--ink-soft); border-radius:999px;
  padding:4px 11px; font-size:11.5px; font-weight:700; white-space:nowrap;
}

/* Ba con số trên một hàng, có dấu + và = ở giữa: quan hệ giữa chúng đọc ra ngay,
   không phải nhẩm trong đầu. */
.vat-eq{ display:flex; align-items:stretch; gap:10px; margin-top:13px; flex-wrap:wrap; }
.vat-eq-item{ flex:1 1 190px; background:var(--surface-alt); border-radius:11px; padding:10px 13px; }
.vat-eq-item.is-tax{ background:rgba(245,158,11,0.13); border:1px solid rgba(245,158,11,0.3); }
.vat-eq-lb{ font-size:11px; color:var(--ink-soft); font-weight:700; }
.vat-eq-v{ font-size:18px; font-weight:800; margin-top:3px; }
.vat-eq-item.is-tax .vat-eq-v{ color:#B45309; }
.vat-eq-op{ display:flex; align-items:center; font-size:19px; font-weight:800; color:var(--ink-faint); flex:none; }

.vat-bar{ display:flex; height:10px; border-radius:6px; overflow:hidden; background:var(--surface-alt); margin-top:11px; }
.vat-bar-net{ background:var(--success); }
.vat-bar-tax{ background:#F59E0B; }

.vat-rates{ display:flex; gap:8px; flex-wrap:wrap; margin-top:11px; }
.vat-rate{ display:flex; align-items:baseline; gap:7px; background:var(--surface-alt); border-radius:9px; padding:6px 11px; }
.vat-rate-k{ font-size:11px; font-weight:800; color:#B45309; }
.vat-rate-v{ font-size:13px; font-weight:700; }

.vat-empty{ margin-top:11px; font-size:12px; color:var(--ink-faint); }
.vat-note{
  margin-top:12px; padding-top:11px; border-top:1px dashed var(--border);
  font-size:11.5px; line-height:1.6; color:var(--ink-soft);
}
.vat-warn{
  margin-top:10px; padding:9px 12px; border-radius:9px; font-size:11.5px; line-height:1.55;
  background:rgba(232,96,76,0.10); border:1px solid rgba(232,96,76,0.34); color:var(--ink);
}

/* Dòng thuế nhỏ dưới số tiền của từng đợt thu. */
.inst-vat{ font-size:10.5px; color:#B45309; font-weight:600; }
.inst-vat.is-warn{ color:var(--coral); }

@media (max-width:760px){
  .vat-eq-op{ display:none; }
  .vat-eq-item{ flex:1 1 100%; }
}


/* Bảng đối chiếu lộ trình ↔ tổng hợp đồng trong wizard tạo hợp đồng. */
.wiz-sched-sum{ margin-top:12px; background:var(--surface-alt); border-radius:11px; padding:11px 14px; }
.wiz-sched-sum:empty{ display:none; }
.wsum-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:12.5px; padding:2px 0; }
.wsum-lb{ color:var(--ink-soft); }
.wsum-v{ font-weight:800; }
.wsum-tax{ color:#B45309; }
.wsum-vat{ font-size:10.5px; font-weight:700; color:#B45309; background:rgba(245,158,11,0.16); border-radius:999px; padding:1px 8px; }
.wsum-ok{ margin-top:7px; font-size:11.5px; color:var(--success); font-weight:600; }
.wsum-bad{
  margin-top:8px; padding:8px 11px; border-radius:9px; font-size:11.5px; line-height:1.5;
  background:rgba(232,96,76,0.10); border:1px solid rgba(232,96,76,0.34); color:var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGE "CÓ GÌ MỚI" TRÊN TAB TASK

   Dùng màu coral đúng như badge lead chưa xử lý ở thanh bên — trong cả phần mềm
   chỉ có MỘT màu nghĩa là "có việc đang đợi bạn". Thêm màu thứ hai cho cùng một
   ý nghĩa là bắt người dùng học lại từ đầu.
   ═══════════════════════════════════════════════════════════════════════════ */
.toptab-badge{
  margin-left:6px; min-width:17px; height:17px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--coral); color:#fff; font-size:10px; font-weight:800;
  border-radius:20px; line-height:1; letter-spacing:0;
}
/* Bằng 0 thì ẩn, nhưng thẻ span VẪN nằm trong DOM để JavaScript có chỗ ghi vào
   sau khi người dùng đọc xong (xem wfCapNhatBadgeTask trong lead-panel.js). */
.toptab-badge.is-zero{ display:none; }

/* ---------- Chip "N mới" trên thẻ công việc ---------- */
/* Khác hẳn .tk-cmt (số bình luận, xanh nhạt, chỉ để tham khảo): chip này ĐÒI người
   dùng vào xem nên đặc ruột, tương phản mạnh. Hai thứ đứng cạnh nhau mà cùng sắc
   độ thì mắt không phân biệt được cái nào cần bấm. */
.tk-new{
  font-size:10.5px; font-weight:800; text-decoration:none; white-space:nowrap;
  background:var(--coral); color:#fff; border-radius:999px; padding:2px 8px; line-height:1.5;
}
.tk-new:hover{ background:#D1503D; color:#fff; text-decoration:none; }

/* Viền trái sáng lên khi thẻ có cái chưa đọc — liếc cả lưới là thấy ngay chỗ nào
   cần vào, không phải soi từng góc thẻ tìm một cái chip nhỏ.
   Đặt SAU .tk-overdue/.tk-done để thắng về thứ tự nguồn: một việc vừa quá hạn vừa
   có bình luận mới thì thứ đáng báo trước là bình luận mới — quá hạn thì hôm qua
   đã quá hạn rồi, còn bình luận mới là thứ vừa xảy ra và có người đang đợi. */
.tk-card.tk-unread{ border-left:3.5px solid var(--coral); }

/* ═══════════════════════════════════════════════════════════════════════════
   THANH BÊN — CHẾ ĐỘ THU GỌN THÀNH RAY ICON

   Thu về đúng 5 icon nhóm cấp 1 (Danh mục · Trung tâm · Kế toán · Cài đặt · Hệ
   thống). Bấm một icon là bung cả thanh ra VÀ mở sẵn nhóm đó — xem sidebar.js.

   Lớp 'sb-mini' gắn trên <html> chứ không phải <body>: script chống nháy nằm
   trong <head> chạy lúc <body> còn chưa tồn tại.

   KHÔNG cần luật riêng cho màn hình hẹp: dưới 1000px thanh bên đã display:none
   sẵn, cái ray không có cửa nào xuất hiện ở đó.
   ═══════════════════════════════════════════════════════════════════════════ */
.sb-toggle{
  width:100%; display:flex; align-items:center; gap:8px; padding:6px 8px; margin-bottom:6px;
  border:0; border-radius:8px; cursor:pointer;
  font-size:11.5px; font-weight:700; color:var(--ink-faint);
  /* Nền đặc + sticky: thanh bên cuộn được, nút phải dính ở đỉnh nếu không cuộn
     xuống một đoạn là mất nút và không còn đường bung lại. Nền trong suốt thì
     nội dung cuộn lên sẽ chạy xuyên qua chữ trên nút. */
  position:sticky; top:0; z-index:2; background:var(--surface);
}
.sb-toggle:hover{ background:var(--surface-alt); color:var(--ink); }
/* Mũi tên do CSS vẽ theo trạng thái, KHÔNG do JavaScript ghi — nhờ vậy nó đúng
   ngay từ khung hình đầu tiên, trước cả khi tệp script kịp tải xong. */
.sb-toggle-ic::before{ content:'\00AB'; font-size:14px; font-weight:800; }
html.sb-mini .sb-toggle-ic::before{ content:'\00BB'; }

.sidebar{ transition:width .16s ease; }
html.sb-mini .sidebar{ width:58px; padding-left:7px; padding-right:7px; }
html.sb-mini .sb-toggle{ justify-content:center; padding:8px 0; }
html.sb-mini .sb-toggle-tx{ display:none; }

/* Tiêu đề nhóm còn lại đúng cái icon, căn giữa. Ẩn CẢ nhãn lẫn mũi tên ▾ bằng một
   luật chung cho <span> — cấu trúc nút là <svg> + <span>nhãn</span> +
   <span class="chev">▾</span>, nên một luật là đủ cho cả hai. */
html.sb-mini .sb-head{ justify-content:center; padding:10px 0; }
html.sb-mini .sb-head > span{ display:none; }
html.sb-mini .sb-head svg{ width:19px; height:19px; }

/* !important LÀ BẮT BUỘC ở đây, không phải cẩu thả: sidebar.js đặt display thẳng
   lên thuộc tính style của phần tử để nhớ nhóm nào đang mở, mà style nội tuyến
   luôn thắng luật từ lớp CSS. Thiếu !important thì thu gọn xong các mục con vẫn
   hiện nguyên và tràn hết ra ngoài cái ray 58px. */
html.sb-mini .sb-group-body{ display:none !important; }
html.sb-mini .sidebar-fade-wrap{ display:none; }

/* Nhóm đang chứa trang mở: ở dạng ray thì nhãn bị ẩn, nên phải có gì đó cho biết
   mình đang đứng ở khu vực nào — không thì cái ray hoàn toàn câm. */
html.sb-mini .sb-head.sb-has-active{ background:var(--surface-alt); color:var(--brand); }


/* ---------- Ô tích chọn giờ hết hạn trong modal giao việc ---------- */
.tk-duetime-tick{
  display:flex; align-items:center; gap:7px; margin-top:7px; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--ink-soft);
}
.tk-duetime-tick input{ width:auto; margin:0; cursor:pointer; }
.tk-duetime-tick:hover{ color:var(--ink); }
.tk-duetime-input{ margin-top:6px; }
/* Ẩn bằng lớp riêng chứ không dùng style nội tuyến: JavaScript chỉ việc bật/tắt
   lớp, không phải nhớ giá trị display gốc là gì để trả lại. */
.tk-duetime-input.is-hidden{ display:none; }


/* ═══════════════════════════════════════════════════════════════════════════
   TỔNG KẾT CÔNG VIỆC THEO NHÂN VIÊN (chỉ Giám đốc / Giám đốc Trung tâm)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dòng tổng đặt TRÊN lưới thẻ: đọc con số chung trước rồi mới soi từng người —
   ngược lại thì phải tự cộng nhẩm cả bảng mới biết tình hình chung. */
.tk-total{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px 14px; margin-bottom:12px;
  background:var(--surface-alt); border:1px solid var(--border); border-radius:12px;
}
.tk-total-lb{ font-size:12.5px; font-weight:800; color:var(--ink); line-height:1.5; }
.tk-total-lb span{ font-weight:600; color:var(--ink-soft); font-size:11.5px; }
.tk-total-cells{ display:flex; gap:8px; flex:1; flex-wrap:wrap; min-width:0; }
.tk-total-cell{
  flex:1; min-width:78px; padding:7px 10px; border-radius:9px; background:var(--surface);
  border:1px solid var(--border); text-align:center;
}
.tk-total-cell b{ display:block; font-size:18px; font-weight:800; line-height:1.2; }
.tk-total-cell span{ font-size:10.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; }
.tk-total-cell.c-done b{ color:#047857; }
.tk-total-cell.c-doing b{ color:#1D4ED8; }
.tk-total-cell.c-todo b{ color:#B45309; }
/* Quá hạn bằng 0 thì để xám: ô đỏ mà số 0 vẫn đập vào mắt như có chuyện, trong
   khi 0 việc trễ chính là tin tốt. */
.tk-total-cell.c-late{ border-color:rgba(232,96,76,.45); background:rgba(232,96,76,.07); }
.tk-total-cell.c-late b{ color:var(--coral); }
.tk-total-cell.c-none b{ color:var(--ink-faint); }
.tk-total-pct{ text-align:center; min-width:72px; }
.tk-total-pct-n{ font-size:22px; font-weight:800; color:var(--brand); line-height:1.1; }
.tk-total-pct-t{ font-size:10.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; }

/* Vai trò đứng cạnh dòng "x/y việc đã xong" — với Giám đốc, biết người này là
   giáo viên hay kế toán mới đọc được con số của họ có hợp lý không. */
.tk-staff-role{
  display:inline-block; margin-left:6px; padding:0 6px; border-radius:20px;
  background:var(--surface-alt); color:var(--ink-soft); font-size:10px; font-weight:700;
}
/* Có việc trễ thì viền trái đỏ — cùng một quy ước với thẻ công việc chưa đọc,
   người dùng không phải học thêm ký hiệu mới. */
.tk-staff.is-late{ border-left:3.5px solid var(--coral); }
/* Chưa được giao việc nào: vẫn hiện nhưng lùi hẳn về sau, không tranh chỗ với
   người đang thật sự có việc. */
.tk-staff.is-empty{ opacity:.62; }
.tk-staff.is-empty .tk-staff-sub{ font-style:italic; }
.tk-late-on{ color:var(--coral); font-weight:800; }
.tk-late-off{ color:var(--ink-faint); }


/* =============================================================================
   CHO GIÁO VIÊN NGHỈ DẠY — hộp thoại _TeacherDeleteModal + ô trạng thái trong
   _TeacherModal. Dùng chung biến màu ở :root, không đặt mã màu tự do.
   ============================================================================= */

/* Dòng giải thích nhỏ dưới một ô nhập. Trước đây mỗi form tự viết style inline
   một kiểu; gom về một class để mọi ô giải thích trông như nhau. */
.form-hint{ font-size:11.5px; color:var(--ink-faint); margin-top:5px; line-height:1.5; }
.form-hint b{ color:var(--ink-soft); font-weight:700; }

/* ---- Thẻ nhận diện giáo viên ở đầu hộp thoại ---- */
.tt-gv-the{ background:var(--surface-alt); border-radius:10px; padding:14px 16px; margin:14px 0; }
.tt-gv-ten{ font-weight:700; font-size:15px; }
.tt-gv-phu{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
/* Ba con số nằm ngang: đã dạy / đã qua / đang chạy. Con số quyết định được xoá
   hay không nằm ở hai ô đầu, nên chúng đứng trước. */
.tt-gv-so{ display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:12.5px; color:var(--ink-soft); }
.tt-gv-so b{ font-size:15px; color:var(--ink); font-weight:800; margin-right:3px; }
/* Lớp đang chạy > 0 là thứ phải bàn giao — tô vàng để mắt dừng lại đúng chỗ đó. */
.tt-gv-so .dang b{ color:var(--gold); }
.tt-gv-nghi{
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--border);
  font-size:12px; color:var(--ink-soft); line-height:1.6;
}

/* ---- Khối "vì sao không xoá được" ---- */
.tt-vi-sao{
  background:var(--coral-soft); border-left:3.5px solid var(--coral); border-radius:8px;
  padding:12px 14px; margin-bottom:14px; font-size:12.5px; color:var(--ink); line-height:1.6;
}
.tt-vi-sao b{ display:block; margin-bottom:3px; color:var(--coral); }

/* ---- Khối lưu ý nhẹ (không phải lỗi, chỉ là điều nên biết) ---- */
.tt-luu-y{
  background:var(--gold-soft); border-radius:8px; padding:11px 14px; margin:14px 0;
  font-size:12.5px; color:var(--ink); line-height:1.6;
}

/* ---- Bàn giao lớp ---- */
.tt-ban-giao{
  background:var(--surface-alt); border-radius:10px; padding:13px 15px; margin:14px 0;
}
.tt-ban-giao-dau{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.tt-ban-giao-ds{
  list-style:none; margin:0 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:6px;
}
.tt-ban-giao-ds li{
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:3px 11px; font-size:12px; color:var(--ink-soft);
}
.tt-ban-giao-ds b{ color:var(--ink); }

/* ---- Ô tích có phần giải thích dài bên dưới ---- */
.tt-tick{ display:flex; align-items:flex-start; gap:9px; cursor:pointer; font-weight:500; }
.tt-tick input{ width:auto; margin-top:3px; flex-shrink:0; }

/* Lối xoá hẳn luôn là lối phụ, không bao giờ tranh chỗ với nút chính. */
.tt-xoa-han{ color:var(--ink-faint); font-size:12px; }
.tt-xoa-han:hover{ color:var(--coral); }
.tt-nut-xoa{ background:var(--coral); border-color:var(--coral); }

/* ---- Dòng trạng thái CHỈ ĐỌC trong form sửa giáo viên ---- */
.tt-tt-dang, .tt-tt-nghi{
  display:flex; align-items:flex-start; gap:9px; padding:10px 13px; border-radius:9px; font-size:13px;
}
.tt-tt-dang{ background:var(--success-soft); color:var(--ink); }
.tt-tt-nghi{ background:var(--surface-alt); color:var(--ink); }
.tt-tt-cham{ width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0; }
.tt-tt-dang .tt-tt-cham{ background:var(--success); }
.tt-tt-nghi .tt-tt-cham{ background:var(--ink-faint); }
.tt-tt-phu{ font-size:11.5px; color:var(--ink-soft); margin-top:3px; font-weight:500; line-height:1.55; }
.tt-tt-ngay{ font-size:12px; color:var(--ink-soft); }


/* =============================================================================
   HỢP ĐỒNG ĐÃ KÝ — hộp thoại _ContractLockedModal
   ============================================================================= */
.hd-khoa-the{ background:var(--surface-alt); border-radius:10px; padding:13px 15px; margin:14px 0; }
.hd-khoa-ten{ font-weight:700; font-size:15px; }
.hd-khoa-so{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; font-size:12.5px; color:var(--ink-soft); }
.hd-khoa-so b{ color:var(--ink); font-weight:700; }

.hd-khoa-visao{
  background:var(--gold-soft); border-left:3.5px solid var(--gold); border-radius:8px;
  padding:12px 14px; font-size:12.5px; line-height:1.65; color:var(--ink);
}
.hd-khoa-visao b{ display:block; margin-bottom:3px; }

/* Lối ra hợp lệ phải NỔI HƠN lời từ chối — người đọc cần biết đi đường nào,
   chứ không cần đọc lại lần nữa rằng mình bị chặn. */
.hd-khoa-loira{
  margin-top:14px; border:1.5px solid var(--blue-soft); background:var(--blue-soft);
  border-radius:10px; padding:13px 15px;
}
.hd-khoa-loira-dau{ font-size:13px; font-weight:700; color:var(--blue); margin-bottom:8px; }
.hd-khoa-buoc{ margin:0 0 11px 18px; padding:0; font-size:12.5px; color:var(--ink); line-height:1.8; }
.hd-khoa-chan{ font-size:12.5px; color:var(--ink); line-height:1.6; }
.hd-khoa-chan ul{ margin:5px 0 0 18px; padding:0; }
.hd-khoa-chan li{ margin-bottom:3px; }

.hd-khoa-conlam{
  margin-top:14px; font-size:12px; color:var(--ink-soft); line-height:1.65;
  padding-top:12px; border-top:1px dashed var(--border);
}


/* =============================================================================
   SỔ PHIẾU THU — Areas/KeToan/Views/Receipts/Index + _ReceiptPrintModal

   Bốn ô đầu trang vừa là con số vừa là bộ lọc. Ba ô nguồn dùng ba màu KHÁC NHAU
   và giữ đúng bộ màu ấy ở mọi chỗ khác nói về cùng ba nguồn (biểu tượng 🎓 🏫 🏠,
   nhãn nguồn trong bảng) — người dùng nhận ra nguồn bằng màu trước khi kịp đọc chữ.
   ============================================================================= */
.pt-o-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; margin-bottom:18px; }
.pt-o-tong{ background:linear-gradient(135deg,#ecfdf5,#d1fae5); border:1.5px solid #a7f3d0; }
.pt-o-tong .kpi-value{ color:#047857; }
.pt-o-dh{ background:linear-gradient(135deg,#eff6ff,#dbeafe); border:1.5px solid #bfdbfe; }
.pt-o-dh .kpi-value{ color:#1d4ed8; }
.pt-o-tt{ background:linear-gradient(135deg,#fffbeb,#fef3c7); border:1.5px solid #fde68a; }
.pt-o-tt .kpi-value{ color:#b45309; }
.pt-o-ktx{ background:linear-gradient(135deg,#faf5ff,#f3e8ff); border:1.5px solid #e9d5ff; }
.pt-o-ktx .kpi-value{ color:#7e22ce; }
/* Ô đang được dùng làm bộ lọc: viền đậm hơn để biết mình đang đứng ở đâu. */
.pt-o-grid .dang-loc{ box-shadow:0 0 0 2.5px var(--brand) inset; }

/* Lời nhắc "còn khoản chưa lập phiếu" — là một liên kết, bấm vào lọc ngay. */
.pt-nhac{
  display:flex; align-items:flex-start; gap:11px; margin-bottom:16px;
  background:var(--gold-soft); border-left:3.5px solid var(--gold); border-radius:9px;
  padding:12px 15px; font-size:13px; line-height:1.6; color:var(--ink);
}
.pt-nhac:hover{ background:#fbe9c8; }
.pt-nhac-ic{ font-size:18px; line-height:1.2; }

.pt-thanh-loc{ margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.pt-xoa-loc{ color:var(--coral); border-color:var(--coral); }
.pt-tong-loc{ font-size:12.5px; color:var(--ink-soft); align-self:center; }
.pt-tong-loc b{ color:var(--ink); }

/* ---- Bảng ---- */
/* Tên khoản thu là NÚT IN — làm cho nó trông bấm được, vì cả yêu cầu nghiệp vụ
   lẫn thói quen người dùng đều dồn vào đúng chỗ này. */
.pt-ten{ display:flex; align-items:flex-start; gap:9px; color:var(--ink); }
.pt-ten:hover .pt-ten-chinh{ color:var(--blue); text-decoration:underline; }
.pt-ic{ font-size:16px; line-height:1.3; flex-shrink:0; }
.pt-ten-chinh{ display:block; font-size:13.5px; font-weight:600; }
.pt-ten-phu{ display:block; font-size:11.5px; color:var(--ink-soft); margin-top:1px; }

.pt-nguoinop{ font-size:13px; color:var(--ink); }
.pt-tien{ text-align:right; white-space:nowrap; }
.pt-tien-chinh{ display:block; font-weight:700; font-size:13.5px; color:var(--success); }
.pt-tien-quy{ display:block; font-size:11px; color:var(--ink-faint); }
.pt-ngay{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; }
.pt-so{ font-size:12.5px; color:var(--blue); }
.pt-chua{ font-size:12px; color:var(--gold); font-weight:700; }

.pt-tt{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700; }
.pt-tt.ok{ background:var(--success-soft); color:#047857; }
.pt-tt.cho{ background:var(--gold-soft); color:#b45309; }
.pt-tt.x{ background:var(--coral-soft); color:var(--coral); }

/* Khoản đã huỷ: mờ đi và gạch ngang số tiền — nhìn lướt qua bảng phải thấy ngay
   dòng nào không còn tính vào tổng. */
.pt-huy{ opacity:.66; }
.pt-huy .pt-tien-chinh{ text-decoration:line-through; color:var(--ink-faint); }

.pt-rong{ padding:52px; text-align:center; color:var(--ink-faint); }
.pt-rong-ic{ font-size:32px; margin-bottom:8px; }

/* ---- Hộp thoại in ---- */
.pt-in-the{
  background:var(--surface-alt); border-radius:9px; padding:13px 15px; margin:14px 0;
  font-size:14px; font-weight:600; color:var(--ink);
}
/* Xem trước bản in: nền trắng như tờ giấy, khung cuộn để phiếu dài không đẩy
   nút In ra khỏi tầm mắt. */
.pt-xem-truoc{
  margin:14px 0; padding:22px 26px; background:#fff; border:1px solid var(--border);
  border-radius:9px; max-height:46vh; overflow:auto;
  font-family:'Times New Roman', Times, serif; font-size:13.5px; line-height:1.7; color:#1a1a1a;
}
.pt-xem-truoc table{ width:100%; border-collapse:collapse; }
.pt-xem-truoc p{ margin:0 0 7px; }

/* Dấu ĐÃ HUỶ đóng lên đầu bản in — do ReceiptPrinting.Ghep() chèn vào HTML. */
.pt-dau-huy{
  border:2.5px solid #dc2626; color:#dc2626; font-weight:800; letter-spacing:.12em;
  text-align:center; padding:7px; margin-bottom:16px; border-radius:6px;
  font-family:'Be Vietnam Pro', Arial, sans-serif; font-size:14px;
}

/* Liên kết "in phiếu thu" gắn trên TÊN KHOẢN THU ở các trang kế toán khác
   (đợt học phí, học viên trung tâm, hoá đơn ký túc xá). Cùng một hình dạng ở
   mọi trang để người dùng học một lần là dùng được ở khắp nơi. */
.pt-ten-lk{ color:inherit; }
.pt-ten-lk:hover{ color:var(--blue); text-decoration:underline; }

/* =============================================================================
   KỶ LUẬT KÝ TÚC XÁ trong hồ sơ học viên — _StudentDiscipline.cshtml

   Bốn mức, bốn màu, KHÔNG dùng lại màu của bất cứ khối nào khác trong hồ sơ:
   khen thưởng xanh lá, nhẹ xám, trung bình vàng, nghiêm trọng đỏ. Người đọc
   phải nhận ra mức độ trước khi kịp đọc chữ.
   ============================================================================= */
.kl-khoi{ margin-top:20px; }
.kl-dau{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.kl-dau-ten{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700; }
.kl-o{ font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:20px; white-space:nowrap; }
.kl-o.dang{ background:var(--success-soft); color:#047857; }
.kl-o.het{ background:var(--surface-alt); color:var(--ink-soft); }

/* Hồ sơ sạch cũng là một kết quả — nói ra, đừng để trống. */
.kl-sach{ font-size:12.5px; color:#047857; background:var(--success-soft); border-radius:8px; padding:10px 13px; }

.kl-so{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:11px; }
.kl-so-o{ font-size:11.5px; color:var(--ink-soft); background:var(--surface-alt); border-radius:20px; padding:3px 11px; }
.kl-so-o b{ color:var(--ink-faint); font-weight:800; margin-right:2px; }
.kl-so-o.xau b{ color:var(--gold); }
.kl-so-o.nang{ background:var(--coral-soft); } .kl-so-o.nang b{ color:var(--coral); }
.kl-so-o.tot{ background:var(--success-soft); } .kl-so-o.tot b{ color:#047857; }

.kl-ds{ display:flex; flex-direction:column; gap:8px; }
.kl-dong{ border:1px solid var(--border); border-left-width:3.5px; border-radius:10px; padding:10px 13px; }
.kl-dong.m-khen{ border-left-color:var(--success); background:#f6fdfa; }
.kl-dong.m-nhe{ border-left-color:var(--ink-faint); }
.kl-dong.m-vua{ border-left-color:var(--gold); background:#fffdf6; }
.kl-dong.m-nang{ border-left-color:var(--coral); background:#fff8f7; }
.kl-dong-dau{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.kl-loai{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }
.kl-dong.m-khen .kl-loai{ color:#047857; }
.kl-dong.m-nang .kl-loai{ color:var(--coral); }
.kl-muc{ font-size:11px; font-weight:700; padding:1px 8px; border-radius:20px; background:var(--surface-alt); color:var(--ink-soft); }
.kl-dong.m-nang .kl-muc{ background:var(--coral-soft); color:var(--coral); }
.kl-dong.m-vua .kl-muc{ background:var(--gold-soft); color:#b45309; }
.kl-ngay{ margin-left:auto; font-size:11.5px; color:var(--ink-faint); white-space:nowrap; }
.kl-tieude{ font-size:13.5px; font-weight:600; color:var(--ink); }
.kl-mota{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; line-height:1.55; }
.kl-nguoighi{ font-size:11px; color:var(--ink-faint); margin-top:5px; }

/* Ghi chú "học viên được miễn học phí vì đã ký hợp đồng" — hiện ở chi tiết lớp
   và trang công nợ học phí trung tâm. Cùng một hình dạng ở cả hai nơi vì nói
   cùng một điều. */
.hp-mien{
  margin-top:10px; background:var(--blue-soft); border-left:3.5px solid var(--blue);
  border-radius:8px; padding:10px 13px; font-size:12px; line-height:1.6; color:var(--ink);
}

/* =============================================================================
   BẢN SCAN HỢP ĐỒNG ĐÃ KÝ — _ContractFileModal + cột "Hồ sơ đã ký"
   ============================================================================= */
.hd-f-the{ background:var(--surface-alt); border-radius:10px; padding:12px 15px; margin:14px 0; }
.hd-f-ten{ font-weight:700; font-size:15px; }
.hd-f-phu{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; }

.hd-f-info{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; font-size:12px; color:var(--ink-soft); margin-bottom:10px; }
.hd-f-ok{ font-weight:800; color:#047857; background:var(--success-soft); padding:2px 10px; border-radius:20px; }

/* Khung xem PDF. Chiều cao theo màn hình chứ không cố định: hợp đồng là thứ người
   ta đọc, không phải liếc — khung 300px thì cuộn mãi không hết một trang A4. */
.hd-f-khung{ border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#f8fafc; }
.hd-f-khung iframe{ display:block; width:100%; height:min(62vh, 720px); border:0; }
.hd-f-luuy{ font-size:11.5px; color:var(--ink-faint); margin-top:7px; }
.hd-f-luuy a{ color:var(--blue); }
.hd-f-nho{ font-size:11.5px; color:var(--ink-faint); }
.hd-f-go{ color:var(--coral); font-size:12.5px; }

/* Cột "Hồ sơ đã ký" trong bảng hợp đồng — ba trạng thái, ba mức nổi bật khác nhau. */
.hd-up{ font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:20px; display:inline-block; white-space:nowrap; }
.hd-up.co{ background:var(--success-soft); color:#047857; }
.hd-up.chua{ background:var(--gold-soft); color:#b45309; }
.hd-up.chua-ky{ color:var(--ink-faint); background:none; padding-left:0; }

/* =============================================================================
   HỌC VIÊN GỬI TRUNG TÂM KHÁC — Areas/TrungTam/Views/ExternalStudents

   Bốn trạng thái, bốn màu, giữ NGUYÊN bộ màu ấy ở mọi chỗ nói về trạng thái:
   ô đầu trang, chip trong bảng, thẻ đối tác. Người dùng nhận ra trạng thái bằng
   màu trước khi kịp đọc chữ.
   ============================================================================= */
.gtt-o-grid{ grid-template-columns:repeat(5,1fr); margin-bottom:18px; }
.gtt-o.dh{ background:linear-gradient(135deg,#eff6ff,#dbeafe); border:1.5px solid #bfdbfe; }
.gtt-o.dh .kpi-value{ color:#1d4ed8; }
.gtt-o.ht{ background:linear-gradient(135deg,#f0fdf4,#dcfce7); border:1.5px solid #bbf7d0; }
.gtt-o.ht .kpi-value{ color:#15803d; }
.gtt-o.bl{ background:linear-gradient(135deg,#fffbeb,#fef3c7); border:1.5px solid #fde68a; }
.gtt-o.bl .kpi-value{ color:#b45309; }
.gtt-o.ng{ background:linear-gradient(135deg,#f8fafc,#f1f5f9); border:1.5px solid #e2e8f0; }
.gtt-o.ng .kpi-value{ color:#6b7280; }
.gtt-o.tien{ background:linear-gradient(135deg,#faf5ff,#f3e8ff); border:1.5px solid #e9d5ff; }
.gtt-o.tien .kpi-value{ color:#7e22ce; font-size:21px; }
.gtt-o-grid .dang-loc{ box-shadow:0 0 0 2.5px var(--brand) inset; }

/* Lời nhắc "quá ngày dự kiến" — là liên kết, bấm vào lọc ngay ra danh sách. */
.gtt-nhac{
  display:flex; align-items:flex-start; gap:11px; margin-bottom:16px;
  background:var(--coral-soft); border-left:3.5px solid var(--coral); border-radius:9px;
  padding:12px 15px; font-size:13px; line-height:1.6; color:var(--ink);
}
.gtt-nhac:hover{ background:#f9dbd5; }
.gtt-nhac-ic{ font-size:18px; line-height:1.2; }

/* ---- Khối thẻ theo đối tác ---- */
.gtt-dt-khoi{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow); }
.gtt-dt-dau{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:800; color:var(--ink); margin-bottom:12px; }
.gtt-dt-n{ background:var(--surface-alt); color:var(--ink-soft); border-radius:20px; padding:1px 9px; font-size:11.5px; }
.gtt-dt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.gtt-dt-the{ border:1px solid var(--border); border-radius:11px; padding:12px 14px; background:var(--surface); }
.gtt-dt-the:hover{ border-color:var(--brand-light); }
.gtt-dt-the.dang-chon{ box-shadow:0 0 0 2px var(--brand) inset; }
.gtt-dt-ten{ font-size:13.5px; font-weight:700; color:var(--ink); }
.gtt-dt-so{ display:flex; flex-wrap:wrap; gap:10px; margin-top:5px; font-size:11.5px; color:var(--ink-soft); }
.gtt-dt-so b{ color:var(--ink); font-weight:800; }
.gtt-dt-so .dh b{ color:var(--blue); }
.gtt-dt-so .tien b{ color:var(--purple); }

.gtt-loc{ margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.gtt-ngoai-dm{ font-size:11px; color:var(--ink-faint); font-style:italic; margin-top:2px; }
.gtt-den{ font-size:11.5px; color:var(--ink-faint); }
.gtt-tre{ font-size:11.5px; color:var(--coral); font-weight:700; }
.gtt-rong{ padding:52px; text-align:center; color:var(--ink-faint); }
.gtt-rong-ic{ font-size:32px; margin-bottom:8px; }

/* ---- Tình hình học tập trong panel ---- */
.gtt-tt-so{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:12px; }
.gtt-tt-o{ background:var(--surface-alt); border-radius:10px; padding:10px; text-align:center; }
.gtt-tt-n{ font-size:18px; font-weight:800; color:var(--brand); }
.gtt-tt-l{ font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; font-weight:700; margin-top:2px; }

.gtt-bc-rong{ font-size:12.5px; color:var(--ink-soft); background:var(--surface-alt); border-radius:9px; padding:12px 14px; line-height:1.6; }
.gtt-bc-ds{ display:flex; flex-direction:column; gap:9px; }
.gtt-bc{ border:1px solid var(--border); border-left:3.5px solid var(--blue); border-radius:10px; padding:11px 13px; }
.gtt-bc-dau{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gtt-bc-ngay{ font-size:12.5px; font-weight:700; color:var(--ink); }
.gtt-bc-ky{ font-size:11px; font-weight:700; background:var(--blue-soft); color:var(--blue); border-radius:20px; padding:1px 9px; }
.gtt-bc-sao{ font-size:12px; color:var(--gold); letter-spacing:1px; }
.gtt-bc-sao .mo{ color:var(--border); }
.gtt-bc-xoa{ margin:0 0 0 auto; }
.gtt-bc-xoa button{ font-size:12px; color:var(--ink-faint); padding:0 2px; }
.gtt-bc-xoa button:hover{ color:var(--coral); }
.gtt-bc-so{ display:flex; gap:12px; flex-wrap:wrap; margin-top:5px; font-size:11.5px; color:var(--ink-soft); }
.gtt-bc-so b{ font-weight:800; }
.gtt-bc-so b.tot{ color:var(--success); }
.gtt-bc-so b.vua{ color:var(--gold); }
.gtt-bc-so b.kem{ color:var(--coral); }
.gtt-bc-nd{ font-size:12.5px; color:var(--ink); line-height:1.6; margin-top:6px; }
.gtt-bc-nguoi{ font-size:11px; color:var(--ink-faint); margin-top:5px; }

/* Liên kết "Giá đào tạo" trong bảng Đối tác */
.dt-gia-lk{ font-size:11.5px; color:var(--blue); font-weight:600; }
.dt-gia-lk:hover{ text-decoration:underline; }
.dt-gia-rong{ font-size:12.5px; color:var(--ink-soft); background:var(--surface-alt); border-radius:9px; padding:12px 14px; margin:14px 0; line-height:1.6; }

/* Khung chờ của thân trang KPI — hiện trong lúc /Kpi/Body đang chấm điểm. */
.kpi2-doi{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:70px 20px; color:var(--ink-soft);
}
.kpi2-doi-quay{
  width:34px; height:34px; border-radius:50%;
  border:3.5px solid var(--border); border-top-color:var(--brand);
  animation:kpi2-quay .8s linear infinite;
}
@keyframes kpi2-quay{ to{ transform:rotate(360deg); } }
.kpi2-doi-chu{ font-size:12.5px; }


/* ═══════════════════════════════════════════════════════════════════
   THU CHI NỘI BỘ — ví tiền, giao dịch, máy đọc ảnh chuyển khoản
   ═══════════════════════════════════════════════════════════════════ */

/* ── Dải thẻ ví tiền ──
   Cuộn NGANG chứ không xuống dòng: số ví ít (2–6), và xếp chúng thành một
   hàng ngang giúp mắt so sánh số dư trực tiếp — đó là việc người dùng làm ở
   khối này. Xuống dòng thì hai ví ở hai hàng khác nhau khó so. */
.vi-dai{ display:flex; gap:13px; overflow-x:auto; padding:2px 2px 10px; scrollbar-width:thin; }
.vi-the{
  flex:0 0 232px; background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius); padding:14px 15px; position:relative;
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.vi-the:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--brand-light); }
/* Vạch màu bên trái phân biệt loại ví — nhìn lướt là biết đâu là tiền mặt,
   đâu là tài khoản công ty, đâu là tài khoản CÁ NHÂN đang giữ tiền công ty. */
.vi-the::before{
  content:''; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:0 4px 4px 0;
}
.vi-the.loai-cash::before{ background:var(--gold); }
.vi-the.loai-bank::before{ background:var(--blue); }
.vi-the.loai-personal::before{ background:var(--purple); }

.vi-dinh{ display:flex; align-items:center; gap:7px; margin-bottom:3px; }
.vi-bieu{ font-size:15px; line-height:1; }
.vi-ten{ font-size:13px; font-weight:800; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vi-phu{ font-size:10.5px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:9px; }
.vi-so{ font-size:19px; font-weight:800; color:var(--ink); font-family:'IBM Plex Mono',monospace; letter-spacing:-.4px; }
/* Số dư ÂM là dấu hiệu ghi thiếu hoặc ghi nhầm — quỹ tiền mặt không thể âm
   trong đời thực, nên phải đỏ chứ không hiện như số bình thường. */
.vi-so.am{ color:var(--coral); }
.vi-cho{
  margin-top:8px; font-size:10.5px; font-weight:700; color:#92400E;
  background:var(--gold-soft); border-radius:7px; padding:4px 8px; display:inline-block;
}
.vi-canh-ca-nhan{
  margin-top:8px; font-size:10px; color:#5B21B6; background:var(--purple-soft);
  border-radius:6px; padding:3px 7px; display:inline-block; font-weight:700;
}
.vi-the-them{
  flex:0 0 150px; border:2px dashed var(--border); background:transparent;
  border-radius:var(--radius); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:5px; color:var(--ink-faint); font-size:12px; font-weight:700;
  cursor:pointer; transition:border-color .12s, color .12s;
}
.vi-the-them:hover{ border-color:var(--brand); color:var(--brand); }

/* ── Thẻ tổng tiền đang giữ ── */
.tien-tong{
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
  color:#fff; border-radius:var(--radius); padding:17px 20px; min-width:250px;
  display:flex; flex-direction:column; justify-content:center;
}
.tien-tong-nhan{ font-size:11px; font-weight:700; opacity:.72; letter-spacing:.3px; text-transform:uppercase; }
.tien-tong-so{ font-size:26px; font-weight:800; font-family:'IBM Plex Mono',monospace; margin-top:3px; letter-spacing:-.8px; }
.tien-tong-phu{ font-size:11px; opacity:.75; margin-top:4px; }

/* ── Hàng giao dịch ── */
.gd-huong{
  display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800;
  padding:3px 9px; border-radius:20px; white-space:nowrap;
}
.gd-huong.thu{ background:var(--success-soft); color:#166534; }
.gd-huong.chi{ background:var(--coral-soft); color:#9F2D1E; }
.gd-huong.chuyen{ background:var(--blue-soft); color:#1E40AF; }

.gd-tien{ font-family:'IBM Plex Mono',monospace; font-weight:800; font-size:13px; white-space:nowrap; }
.gd-tien.thu{ color:var(--success); }
.gd-tien.chi{ color:var(--coral); }
.gd-tien.chuyen{ color:var(--blue); }

.gd-tt{ font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:6px; white-space:nowrap; }
.gd-tt.draft{ background:var(--gold-soft); color:#92400E; }
.gd-tt.posted{ background:var(--success-soft); color:#166534; }
.gd-tt.void{ background:var(--surface-alt); color:var(--ink-faint); text-decoration:line-through; }

.gd-may{
  display:inline-flex; align-items:center; gap:3px; font-size:9.5px; font-weight:800;
  background:var(--purple-soft); color:#5B21B6; padding:2px 6px; border-radius:5px; margin-left:5px;
}
.gd-anh-lk{ display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--blue); font-weight:600; }
.gd-anh-lk:hover{ text-decoration:underline; }
.gd-vi-luong{ font-size:11px; color:var(--ink-soft); white-space:nowrap; }
.gd-vi-luong b{ color:var(--ink); font-weight:700; }

/* ── Vùng thả ảnh ──
   To và rõ vì đây là ĐƯỜNG CHÍNH của trang này: người dùng chụp màn hình
   chuyển khoản trên điện thoại rồi kéo vào, chứ không gõ tay từng ô. */
.anh-tha{
  border:2.5px dashed var(--border); border-radius:var(--radius); background:var(--surface-alt);
  padding:26px 20px; text-align:center; cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s;
}
.anh-tha:hover{ border-color:var(--brand); background:var(--surface); }
.anh-tha.dang-keo{ border-color:var(--brand); background:var(--blue-soft); transform:scale(1.01); }
.anh-tha-bieu{ font-size:30px; line-height:1; margin-bottom:7px; }
.anh-tha-chinh{ font-size:13.5px; font-weight:800; color:var(--ink); }
.anh-tha-phu{ font-size:11.5px; color:var(--ink-soft); margin-top:3px; line-height:1.5; }

/* ── Màn hình "đang đọc" ──
   Máy đọc mất 1–2 giây (đã đo). Không có màn hình này thì người dùng bấm lại
   nhiều lần vì tưởng treo. */
.doc-dang{
  display:flex; flex-direction:column; align-items:center; gap:13px;
  padding:34px 20px; background:var(--surface-alt); border-radius:var(--radius);
}
.doc-quay{
  width:38px; height:38px; border-radius:50%;
  border:4px solid var(--border); border-top-color:var(--brand);
  animation:doc-xoay .8s linear infinite;
}
@keyframes doc-xoay{ to{ transform:rotate(360deg); } }
.doc-chu{ font-size:13px; font-weight:700; color:var(--ink); }
.doc-chu-phu{ font-size:11.5px; color:var(--ink-soft); text-align:center; line-height:1.55; }

/* ── Bảng kết quả máy đọc ── */
.doc-kq{ border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.doc-kq-dinh{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; background:var(--surface-alt); border-bottom:1.5px solid var(--border);
}
.doc-kq-ten{ font-size:12.5px; font-weight:800; color:var(--ink); }
.doc-tc{ font-size:11px; font-weight:800; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.doc-tc.cao{ background:var(--success-soft); color:#166534; }
.doc-tc.vua{ background:var(--gold-soft); color:#92400E; }
.doc-tc.thap{ background:var(--coral-soft); color:#9F2D1E; }

/* Ô nào do máy PHỎNG ĐOÁN (không có nhãn dẫn đường) thì viền vàng — người
   xác nhận phải nhìn kỹ đúng những ô đó, không phải mọi ô. */
.doc-doan{ border-color:var(--gold) !important; background:#FFFDF7 !important; }
.doc-doan-nhan{
  font-size:10px; font-weight:800; color:#92400E; background:var(--gold-soft);
  padding:2px 6px; border-radius:5px; margin-left:6px;
}
.doc-canh{
  font-size:11.5px; line-height:1.6; padding:10px 13px; border-radius:9px;
  background:var(--gold-soft); color:#92400E; margin-top:9px;
}
.doc-canh.nang{ background:var(--coral-soft); color:#9F2D1E; }
.doc-canh ul{ margin:4px 0 0 16px; }

/* ── Ảnh xem trước ── */
.anh-xem{
  max-width:100%; max-height:270px; border-radius:10px; border:1.5px solid var(--border);
  display:block; margin:0 auto; object-fit:contain; background:var(--surface-alt);
}
.anh-hang{ display:flex; gap:9px; flex-wrap:wrap; margin-top:9px; }
.anh-o{ position:relative; width:74px; height:74px; border-radius:9px; overflow:hidden; border:1.5px solid var(--border); }
.anh-o img{ width:100%; height:100%; object-fit:cover; }
.anh-o-xoa{
  position:absolute; top:2px; right:2px; width:19px; height:19px; border-radius:50%;
  background:rgba(17,24,39,.82); color:#fff; font-size:11px; line-height:19px; text-align:center;
}
.anh-o-xoa:hover{ background:var(--coral); }

/* ── Chọn loại giao dịch (3 nút lớn) ── */
.huong-chon{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.huong-nut{
  border:2px solid var(--border); border-radius:11px; padding:11px 8px; text-align:center;
  cursor:pointer; background:var(--surface); transition:border-color .12s, background .12s;
}
.huong-nut:hover{ border-color:var(--brand-light); }
.huong-nut.chon{ border-color:var(--brand); background:var(--surface-alt); }
.huong-nut-bieu{ font-size:17px; line-height:1; }
.huong-nut-ten{ font-size:12px; font-weight:800; color:var(--ink); margin-top:3px; }
.huong-nut-phu{ font-size:10px; color:var(--ink-faint); margin-top:1px; line-height:1.35; }

/* Ẩn ô chọn loại tiền của MoneyInput khi loại tiền đã bị nghiệp vụ quy định sẵn
   (VD: trả đối tác — đối tác báo giá bằng đúng một loại tiền). Bày một ô chọn
   không có tác dụng là mời người dùng đổi rồi thất vọng. Ô vẫn nằm trong DOM và
   vẫn gửi lên máy chủ; chỉ là máy chủ cố ý bỏ qua nó. */
.wf-an-tien-te .wf-money-field select{ display:none; }
.wf-an-tien-te .wf-money-field input{ width:100%; }

/* ── Hàng "đầu ra − đầu vào = phải nộp" trong khối thuế GTGT ──
   Cùng lối trình bày với phép cộng ở trên (tiền hàng + thuế = tổng thu): đặt ba
   con số nằm ngang có dấu phép tính ở giữa, để quan hệ giữa chúng đọc được ngay
   mà không phải nhẩm. */
.vat-nop{ margin-top:14px; padding-top:13px; border-top:1.5px dashed rgba(146,64,14,.28); }
.vat-nop-hang{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vat-nop-o{ flex:1; min-width:150px; }
.vat-nop-ket{ background:rgba(255,255,255,.65); border-radius:10px; padding:8px 12px; }
.vat-nop-lb{ font-size:10.5px; font-weight:700; color:#92400E; text-transform:uppercase; letter-spacing:.02em; }
.vat-nop-v{ font-size:17px; font-weight:800; font-family:'IBM Plex Mono',monospace; margin-top:2px; letter-spacing:-.4px; }
.vat-nop-dau{ font-size:19px; font-weight:800; color:#92400E; opacity:.55; flex:0 0 auto; }
.vat-nop-tach{ display:flex; gap:9px; flex-wrap:wrap; margin-top:3px; font-size:10.5px; color:#92400E; }
.vat-nop-ghi{ margin-top:8px; font-size:11.5px; color:#166534; font-weight:600; }
@media (max-width:760px){
  .vat-nop-dau{ display:none; }
  .vat-nop-o{ min-width:100%; }
}

/* ═════════ MỘT HỌC VIÊN CHỈ HỌC Ở MỘT NƠI TẠI MỘT THỜI ĐIỂM ═════════

   Ba khối dưới đây phục vụ cùng một luật (xem Infrastructure/HocVienBan.cs) nên
   cố ý DÙNG CHUNG một bảng màu: hổ phách cho "bị khoá, nhưng không phải lỗi của
   bạn". Không dùng đỏ — đỏ là hỏng, còn đây là một ràng buộc nghiệp vụ đang làm
   đúng việc của nó; đỏ ở đây sẽ khiến người dùng tưởng phần mềm gặp sự cố. */

/* ---- Khối "đang gửi đối tác nên chưa xếp lớp được" trong modal ghi danh ---- */
.ban-khoi{
  border:1px solid #F0D9A8; border-radius:11px; background:linear-gradient(180deg,#FEFAF1,#FDF6E7);
  margin:12px 0 14px; overflow:hidden;
}
.ban-dinh{
  display:flex; align-items:center; gap:9px; padding:11px 14px;
  background:rgba(227,165,66,.13); font-size:12.5px; color:#92400E; line-height:1.5;
}
.ban-icon{ font-size:15px; line-height:1; }
.ban-ds{ padding:4px 14px 8px; }
.ban-dong{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:7px 0; border-bottom:1px dashed rgba(146,64,14,.16);
}
.ban-dong:last-child{ border-bottom:none; }
.ban-ten{ font-size:13px; font-weight:700; color:var(--ink); }
.ban-ly{ font-size:11.5px; color:#92400E; }
.ban-chan{
  padding:9px 14px 11px; font-size:11.5px; line-height:1.6; color:#92400E;
  border-top:1px solid rgba(146,64,14,.14); background:rgba(255,255,255,.5);
}

/* ---- Dải cảnh báo dữ liệu cũ (không bấm được, khác .gtt-nhac vốn là thẻ <a>) ---- */
.gtt-nhac-do{
  background:var(--gold-soft); border-left-color:var(--gold); cursor:default;
}
.gtt-nhac-do:hover{ background:var(--gold-soft); }

/* ---- Nút "Kết thúc" trên dòng danh sách ----
   Xanh lá đặc để tách khỏi hai nút viền xám bên cạnh: đây là hành động DUY NHẤT
   giải phóng học viên, không phải một lần sửa dữ liệu bình thường. */
.gtt-nut-ketthuc{
  font-size:12px; background:var(--success); border:1px solid var(--success); color:#fff; font-weight:700;
}
.gtt-nut-ketthuc:hover{ background:#268A5E; border-color:#268A5E; color:#fff; }

/* ---- Hộp thoại Kết thúc ở đối tác ---- */
.kt-hq{
  display:flex; align-items:flex-start; gap:10px; margin:13px 0;
  background:var(--success-soft); border-left:3.5px solid var(--success); border-radius:9px;
  padding:11px 14px; font-size:12.5px; line-height:1.6; color:var(--ink);
}
.kt-hq-ic{ font-size:16px; line-height:1.3; }

.kt-chon{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kt-o{ position:relative; cursor:pointer; margin:0; }
.kt-o input{ position:absolute; opacity:0; width:0; height:0; }
.kt-o-than{
  display:block; border:1.5px solid var(--border); border-radius:11px; padding:12px 13px;
  background:var(--surface); transition:border-color .12s, box-shadow .12s, background .12s;
}
.kt-o:hover .kt-o-than{ border-color:var(--brand-light); }
.kt-o input:checked + .kt-o-than{
  border-color:var(--success); background:var(--success-soft);
  box-shadow:0 0 0 2px rgba(47,158,110,.16);
}
.kt-o-nghi input:checked + .kt-o-than{
  border-color:var(--coral); background:var(--coral-soft);
  box-shadow:0 0 0 2px rgba(232,96,76,.16);
}
.kt-o-ic{ display:block; font-size:19px; line-height:1.1; margin-bottom:5px; }
.kt-o-ten{ display:block; font-size:13px; font-weight:800; color:var(--ink); }
.kt-o-phu{ display:block; font-size:11.5px; color:var(--ink-soft); margin-top:3px; line-height:1.5; }

@media (max-width:620px){
  .kt-chon{ grid-template-columns:1fr; }
}