/* =====================================================================
   /d · hoat_dong.css — Bàn giám sát Hoạt động sale.

   Mọi luật SCOPE dưới `.hd-page` để không đụng các trang khác. Nếp giống
   `van_tai.css`: bung khung `.main .khung:has()`, popover peek dùng token
   chung ở /shared/tokens.css.

   Không hardcode màu (L3) — mọi màu qua var(--*).
   ===================================================================== */

/* Bàn quản lý cần nguyên bề ngang màn. Shell mặc định gói `.khung` ở
   1280px — 27-32" sẽ để phí 30% màn. `:has()` chỉ áp khi bên trong có
   `.hd-page`; trang khác vẫn 1280px. (Cùng nếp `van_tai.css:19`.) */
.main .khung:has(.hd-page) { max-width: none; }

/* -------------------------------------------------- Trục dọc chung 4 tab
   Filterbar bung được — ở màn 13" các control có chỗ tự xuống dòng. */
.hd-page .filterbar { flex-wrap: wrap; }
.hd-page .filterbar .select,
.hd-page .filterbar .input { min-width: 0; }
/* Cụm 2 ô date (Từ → Đến) ở tab Lượt chạm: giữ CẠNH NHAU trên 1 dòng dù
   filterbar wrap ở màn hẹp. flex:none để cả cụm là một khối, không tách. */
.hd-page .filterbar .lc-dates {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
}
.hd-page .filterbar .lc-dates .input { width: 138px; }

/* Cụm KPI + biểu đồ ở tab Tổng quan — auto-fit 2/3/4 cột theo bề ngang */
.hd-page .grid-2 {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
.hd-page .kpi-row {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* -------------------------------------------------- Bảng lượt chạm/KH tuần
   3 bảng ở 3 tab đều dùng .table nguyên bản. Chỉ nới cột đầu vừa đủ để
   tên sale + khu vực không xuống dòng khi bung khung. */
.hd-page .table th, .hd-page .table td { vertical-align: middle; }

/* -------------------------------------------------- LỊCH HOẠT ĐỘNG SALE
   Layout phương án A · CEO chốt 21/08 (2 vòng co gọn):
     Bảng LUÔN = 100% khung, KHÔNG cuộn ngang. Cột chia theo %:
       Sale 10% + SL m² 4% + 3 KPI × 3% (9%) + nhãn 1.5% + 31 ngày × ~2.44%
     Ở 1920 sau bung khung → Sale ~185px, ngày ~45px.
     Ở 1366 → Sale ~137px, ngày ~33px.

   `.lt-tbl` bên kit.css có `min-width: 100%` — override về 100% để bảng
   KHÔNG dài hơn khung (tránh scroll ngang). `table-layout: fixed` vẫn giữ
   để `%` widths có hiệu lực. */
.hd-page .lt-tbl { min-width: 0; width: 100%; }

.hd-page .lt-tbl .lt-sale {
  width: 10%;
  background: var(--panel);
  padding-top: 6px; padding-bottom: 6px;
}
/* Cell Sale có 3 dòng: mã sale (b) → tên đầy đủ (i, nhỏ) → khu vực (mờ) */
.hd-page .lt-tbl .lt-sale b {
  display: block; line-height: 1.25; font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hd-page .lt-tbl .lt-sale .lt-sale-ten {
  display: block; font-style: italic; font-size: 10.5px; color: var(--ink);
  line-height: 1.2; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hd-page .lt-tbl .lt-sale .sub {
  font-size: 10px; color: var(--muted); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* KPI: cột đầu SL m² rộng gấp ~1.4 lần 3 cột còn lại vì số 5-6 chữ số */
.hd-page .lt-tbl .lt-kpi        { width: 3%; padding-top: 4px; padding-bottom: 4px; }
.hd-page .lt-tbl .lt-kpi.lt-slm2{ width: 4%; }
.hd-page .lt-tbl thead th.lt-kpi {
  font-weight: 600; color: var(--muted); line-height: 1.15;
  white-space: normal;
}

/* Ô ngày — chia đều phần còn lại (~1.76% mỗi ô). KHÔNG đặt min-width để
   không bung khung — user chọn "không trượt ngang". */
.hd-page .lt-tbl .lt-day { width: auto; min-width: 0; padding-left: 2px; padding-right: 2px; }
.hd-page .lt-tbl .lt-day.lt-cell-hd {
  font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
}
.hd-page .lt-tbl .lt-cell-hd.lt-clickable { cursor: pointer; }
.hd-page .lt-tbl .lt-cell-hd.lt-clickable:hover {
  outline: 2px solid var(--accent-text); outline-offset: -2px;
}

/* Block KH tuần "chưa lập" — tuần trống (không có phiếu record) là ngữ nghĩa
   giống hệt trạng thái `chua_lap`, phải cùng tông đỏ san hô nóng với chip
   `.tt-kht.chua_lap` (CEO chốt 21/08). Trước đây xám sọc mờ → mắt không bắt
   được đây là "tuần cần lập". Giữ pattern sọc chéo để phân biệt với ô có
   chip, chỉ đổi màu nền + sọc + chữ sang tông coral. */
.hd-page .lt-tbl .lt-cell-kh { cursor: pointer; }
.hd-page .lt-tbl .lt-cell-kh.trong {
  color: #B4290C; font-size: 10px; font-weight: 700; letter-spacing: .3px;
  background-color: #FFDDD6;
  background-image: repeating-linear-gradient(
    45deg, transparent 0 4px, rgba(220,60,19,.12) 4px 8px);
}
.hd-page .lt-tbl .lt-cell-kh:hover {
  outline: 2px solid var(--accent-text); outline-offset: -2px;
}

/* Cột nhãn "HĐ" / "KH" — 1.5% (~20px @1366, ~28px @1920), vừa nhãn 2 ký tự */
.hd-page .lt-tbl .lt-lbl { width: 1.5%; min-width: 0; padding-left: 2px; padding-right: 2px; }

/* Chiều cao khung bảng: fill hết vùng còn lại của trang, cuộn trong bảng
   (không cuộn body) — user không phải cuộn 2 lần khi header ẩn đi. */
.hd-page .lt-wrap { max-height: calc(100vh - 220px); }

/* -------------------------------------------------- POPOVER PEEK
   Floating panel neo cạnh cell — dùng cho cả HĐ (danh sách lượt chạm) và
   KH tuần (thông tin phiếu). KHÔNG phải slideover: chiếm ít chỗ, click
   ngoài đóng. Vị trí + kích thước do JS gán inline style top/left/width.

   Layer thấp hơn modal (`--z-over`) để khi bấm 1 dòng, modal chi tiết đè
   lên trên. Popover đóng đồng thời khi mở modal (JS gọi `_hdDongPop`). */
/* KHÔNG dùng backdrop chắn màn — nếu chắn, click cell khác sẽ bị backdrop
   "nuốt" và không mở được popover khác. Click ngoài đóng bằng document
   listener trong app.js (`_hdGanClickNgoai`). Giữ selector cho tương thích
   tránh vỡ, đặt display:none trong mọi trường hợp. */
.hd-pop-bg { display: none; }

.hd-pop {
  position: fixed; z-index: calc(var(--z-over) - 1);
  width: 380px; max-width: 96vw;
  min-height: 180px;   /* skeleton + content cùng cỡ → không nhảy vị trí */
  max-height: 70vh; display: none; flex-direction: column;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--e3);
  opacity: 0;
  transition: opacity var(--mo-fast, .18s) var(--ease-out, ease-out);
}
.hd-pop.mo { display: flex; opacity: 1; }
.hd-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); padding: 10px 12px 8px;
  border-bottom: 1px solid var(--line); flex: none;
}
.hd-pop-head b { font-size: var(--fs-sm); }
.hd-pop-head .sub { font-size: var(--fs-xs); color: var(--muted); display: block; }
.hd-pop-head .btn.icon.ghost { padding: 2px 4px; min-height: 24px; height: 24px; }
.hd-pop-body {
  flex: 1; overflow-y: auto; padding: 4px 0;
}
.hd-pop-item {
  display: grid; gap: 2px; padding: 8px 12px;
  border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background var(--mo-fast, .18s);
}
.hd-pop-item:hover { background: var(--panel-2); }
.hd-pop-item:last-child { border-bottom: 0; }
.hd-pop-item .r1 {
  display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
  font-weight: 600; color: var(--ink);
}
.hd-pop-item .r1 .gio {
  font-variant-numeric: tabular-nums; color: var(--muted);
  font-weight: 500; font-size: var(--fs-xs);
}
.hd-pop-item .r1 .tag { flex: none; }
.hd-pop-item .r2 {
  font-size: var(--fs-xs); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.35; max-height: 2.7em;
}
.hd-pop-item .r3 {
  font-size: var(--fs-xs); color: var(--faint);
}
.hd-pop-item .warn-chip { color: var(--warn); font-weight: 600; }

.hd-pop-empty {
  padding: 20px 12px; text-align: center;
  color: var(--muted); font-size: var(--fs-sm);
}
.hd-pop-foot {
  border-top: 1px solid var(--line);
  padding: 8px 12px; flex: none; text-align: right;
}
.hd-pop-foot .btn.sm { padding: 4px 10px; height: 28px; min-height: 28px; }

/* Popover cho KH TUẦN — layout gọn 1 khối, không phải list */
.hd-pop-kht { padding: 12px; }
.hd-pop-kht .r {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  padding: 4px 0; border-bottom: 1px dashed var(--line);
  font-size: var(--fs-sm);
}
.hd-pop-kht .r:last-child { border-bottom: 0; }
.hd-pop-kht .r label { color: var(--muted); }
.hd-pop-kht .r b { font-weight: 600; text-align: right; }

/* -------------------------------------------------- Tổng quan — grid card
   Cluster theo người, hoạt động, ngày. Cùng nếp .vt-cum: auto-fit min 380 */
.hd-page .hd-cluster {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

/* ============================================================
   Kế hoạch tuần — thanh tiến độ nhiệm vụ + chip loại phiếu (D157 · 23/08)
   Đặt ở đây (không phải kit.css) vì chỉ trang #ke_hoach_tuan dùng; kit.css là
   token dùng chung cho cả hai vỏ.
   ============================================================ */
.kht-td{display:flex;align-items:center;gap:8px;min-width:140px}
.kht-td-bar{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.kht-td-bar i{display:block;height:100%;border-radius:99px;transition:width .25s}
.kht-td-bar i.ok{background:var(--good)}
.kht-td-bar i.warn{background:var(--warn)}
.kht-td-bar i.bad{background:var(--bad)}
.kht-td-so{font-variant-numeric:tabular-nums;font-size:var(--fs-xs);color:var(--fg-2);white-space:nowrap}
.kht-td-pt{font-variant-numeric:tabular-nums;font-size:var(--fs-xs);font-weight:600;min-width:34px;text-align:right}
.kht-td-pt.ok{color:var(--good)} .kht-td-pt.warn{color:var(--warn)} .kht-td-pt.bad{color:var(--bad)}

/* Chip "được giao" — tím để tách hẳn khỏi chip trạng thái (teal/vàng/đỏ) */
.chip.tim{background:color-mix(in srgb, var(--c-4) 18%, transparent);color:var(--c-4)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}

/* Dải tổng đầu bảng danh sách */
.kht-tong{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center;
  font-size:var(--fs-sm);color:var(--fg-2)}
.kht-tong b{color:var(--fg-1);font-variant-numeric:tabular-nums}

/* Bảng người nhận trong modal giao — cột "→ ai nhận" phải đọc được ngay */
.kht-giao-nhan{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm)}
.kht-giao-nhan .ic{width:15px;height:15px;color:var(--fg-3)}
.kht-giao-nhan.trong{color:var(--bad)}

/* Dòng thiếu hành động khi bấm Lưu — nháy đỏ để mắt bắt được ngay */
.loi-nhay{animation:kht-nhay 1.2s ease-out 2}
@keyframes kht-nhay{0%,100%{background:transparent}30%{background:var(--bad-bg)}}

/* Chip "+N" trên ô heatmap: việc được giao thêm trong tuần (D157) */
.kht-bs{margin-left:4px;padding:0 4px;border-radius:6px;font-size:10px;font-weight:700;
  background:color-mix(in srgb, var(--c-4) 28%, transparent);color:var(--c-4)}

/* ============================================================
   Dòng đại lý trong modal kế hoạch — ĐẢO TRỌNG SỐ (CEO 23/08)
   Việc cần làm là khối chính; nhận định/kết quả là dòng phụ.
   Đặt sau kit.css nên đè được .kht-dong-row cũ mà không phải sửa kit.
   ============================================================ */
.kht-ten-kh{color:var(--fg-2);font-size:var(--fs-xs);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:28ch}

/* Khối VIỆC CẦN LÀM — nền nhấn, viền trái teal, chữ to hơn phần còn lại */
.kht-viec{margin:8px 0 6px;padding:8px 10px;border-radius:8px;
  border-left:3px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 7%, transparent)}
.kht-viec-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kht-viec-ten{display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-md);font-weight:650;color:var(--fg-1)}
.kht-viec-ten .ic{width:15px;height:15px;color:var(--accent-text)}
.kht-viec-ten.trong{color:var(--warn);font-weight:600}
.kht-viec-ten.trong .ic{color:var(--warn)}
.kht-viec-mt{display:flex;align-items:flex-start;gap:4px;margin-top:4px;
  font-size:var(--fs-sm);color:var(--fg-1)}
.kht-viec-mt .ic{width:13px;height:13px;flex:none;margin-top:3px;color:var(--muted)}

/* Dòng dưới: chip lượt chạm + nhận định phụ */
.kht-dong-duoi{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kht-phu{font-size:var(--fs-xs);color:var(--muted);flex:1;min-width:0}

.kht-chip-cham{display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  border:1px solid var(--good);border-radius:99px;padding:2px 10px;
  background:var(--good-bg);color:var(--good);font-size:var(--fs-xs);
  font-weight:600;font-family:inherit}
.kht-chip-cham:hover{filter:brightness(1.06)}
.kht-chip-cham .ic{width:13px;height:13px}
.kht-chip-mui{transition:transform .15s}
.kht-chip-cham.dang-mo .kht-chip-mui{transform:rotate(180deg)}
.kht-chua-cham{display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-xs);color:var(--muted)}
.kht-chua-cham .ic{width:13px;height:13px}

/* Hộp lượt chạm bung tại chỗ */
.kht-cham-hop{margin-top:8px;border-top:1px dashed var(--line);padding-top:6px}
.kht-cham-tai{font-size:var(--fs-xs);color:var(--muted);padding:4px 2px;
  display:flex;align-items:center;gap:5px}
.kht-cham-tai.loi{color:var(--bad)}
.kht-cham-dong{display:grid;grid-template-columns:42px 1fr auto;gap:8px;
  width:100%;text-align:left;align-items:baseline;cursor:pointer;
  border:0;border-radius:6px;padding:5px 6px;background:transparent;
  font:inherit;color:var(--fg-1)}
.kht-cham-dong:hover{background:var(--panel-2)}
.kht-cham-ngay{font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.kht-cham-noi{display:flex;flex-direction:column;gap:2px;min-width:0}
.kht-cham-noi b{font-size:var(--fs-sm)}
.kht-cham-phu{font-size:var(--fs-xs);color:var(--fg-2)}
.kht-cham-meta{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}

/* ============================================================
   Modal kế hoạch — 4 nâng cấp CEO duyệt 23/08 chiều
   (1) gom cụm theo trạng thái · (2) bung hết lượt chạm
   (3) mini-KPI cột phải     · (4) lọc nhanh khi phiếu dài
   ============================================================ */

/* (1) Cụm gom dòng đại lý */
.kht-cum{margin-bottom:10px;border:1px solid var(--line);border-radius:var(--radius-panel);
  overflow:hidden;background:var(--panel)}
.kht-cum-hd{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;
  padding:7px 10px;background:var(--panel-2);font-size:var(--fs-sm);
  list-style:none;border-bottom:1px solid transparent}
.kht-cum-hd::-webkit-details-marker{display:none}
.kht-cum[open] .kht-cum-hd{border-bottom-color:var(--line)}
.kht-cum-hd:hover{background:color-mix(in srgb,var(--accent) 6%,var(--panel-2))}
.kht-cum-hd .ic{width:14px;height:14px;color:var(--muted)}
.kht-cum-dem{margin-left:auto;min-width:22px;text-align:center;padding:0 6px;
  border-radius:99px;background:var(--line);color:var(--fg-2);
  font-size:var(--fs-xs);font-weight:700;font-variant-numeric:tabular-nums}
.kht-cum[data-cum="chua_cham"] .kht-cum-dem{background:var(--warn-bg);color:var(--warn)}
.kht-cum[data-cum="xong"] .kht-cum-dem{background:var(--good-bg);color:var(--good)}
.kht-cum .list{padding:8px}
/* Mũi chỉ hướng mở/đóng */
.kht-cum-hd::after{content:"▸";margin-left:6px;color:var(--muted);
  font-size:11px;transition:transform .15s;order:9}
.kht-cum[open] .kht-cum-hd::after{transform:rotate(90deg)}

/* (2)+(4) Thanh công cụ trên danh sách dòng */
.kht-thanh-cong-cu{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:8px 0 10px}
.kht-thanh-cong-cu .seg.sm button{font-size:var(--fs-xs);padding:3px 10px}

/* (3) Mini-KPI cột phải — vòng tròn tiến độ vẽ bằng conic-gradient, không thư viện */
.kht-mini{display:flex;align-items:center;gap:14px;padding:12px;margin-bottom:10px;
  border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--panel-2)}
.kht-mini-vong{--pt:0;position:relative;width:76px;height:76px;flex:none;border-radius:50%;
  background:conic-gradient(var(--vong-mau) calc(var(--pt) * 1%), var(--line) 0)}
.kht-mini-vong::after{content:"";position:absolute;inset:8px;border-radius:50%;
  background:var(--panel-2)}
.kht-mini-vong.ok{--vong-mau:var(--good)}
.kht-mini-vong.warn{--vong-mau:var(--warn)}
.kht-mini-vong.bad{--vong-mau:var(--bad)}
.kht-mini-pt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:1;font-size:var(--fs-lg);font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--fg-1)}
.kht-mini-pt i{font-style:normal;font-size:var(--fs-xs);margin-left:1px;color:var(--muted)}
.kht-mini-so{display:flex;flex-direction:column;gap:5px;min-width:0}
.kht-mini-so div{display:flex;flex-direction:column;line-height:1.25}
.kht-mini-so b{font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.kht-mini-so span{font-size:var(--fs-xs);color:var(--muted)}

.kht-dang-cho{display:flex;align-items:center;gap:6px;margin-bottom:12px;
  padding:6px 10px;border-radius:8px;font-size:var(--fs-sm);
  background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent-text)}
.kht-dang-cho .ic{width:14px;height:14px;flex:none}

/* ============================================================
   Chốt kết quả ngay trên /d (CEO 23/08) — trước chỉ /m làm được
   ============================================================ */
/* Ô chốt trong từng dòng đại lý */
.kht-o-chot{margin-top:8px;padding:8px 10px;border-radius:8px;
  border:1px dashed var(--line);background:var(--panel-2);
  display:flex;flex-direction:column;gap:6px}
.kht-o-chot.da-chot{border-style:solid;border-color:var(--good);
  background:color-mix(in srgb,var(--good) 6%,transparent)}
.kht-o-chot.luu-loi{border-color:var(--bad);border-style:solid;
  background:color-mix(in srgb,var(--bad) 7%,transparent)}
.kht-o-chot-hd{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);
  color:var(--fg-2)}
.kht-o-chot-hd .ic{width:13px;height:13px;color:var(--muted)}
.kht-o-chot.da-chot .kht-o-chot-hd .ic{color:var(--good)}
.kht-o-chot-vet{margin-left:auto;font-size:var(--fs-xs);color:var(--muted);
  font-variant-numeric:tabular-nums}
.kht-o-chot-vet.loi{color:var(--bad);font-weight:700}
.kht-o-chot .select,.kht-o-chot .input{width:100%}

/* Khối hành động kết quả ở cột phải */
.kht-chot-hop{padding:12px;margin-bottom:12px;border-radius:var(--radius-panel);
  border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.kht-chot-tieu-de{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm)}
.kht-chot-tieu-de .ic{width:15px;height:15px;color:var(--accent-text)}
.kht-chot-hop .btn.block{width:100%;justify-content:center}
.kht-chot-hop .btn:disabled{opacity:.55;cursor:not-allowed}