/* ════════════════════════════════════════════════════════════════
   Plan v3 — C.A + C.S về một màn hình (Design System v2 "Monday")
   ------------------------------------------------------------------
   Cặp với js/plan-v3.js. Chỉ đổi MÀU · KHOẢNG CÁCH · CÁCH XẾP KHỐI:
   không ẩn/bỏ bất kỳ trường thông tin nào — thẻ KPI, chart, cột bảng
   và nút thao tác đều là khối GỐC được di chuyển sang chỗ mới.
   Thứ ẩn đi chỉ là tiêu đề lặp (h4 khu vực, nhãn tháng trong pane,
   tiêu đề bảng) vì tab C.A|C.S và tab tháng đã nói đúng điều đó rồi.
   TẮT: ?planv3=0
   ════════════════════════════════════════════════════════════════ */

body.plan-v3 {
  --pv3-surface:#FFFFFF; --pv3-surface-2:#F5F6F8;
  --pv3-text:#323338; --pv3-muted:#676879; --pv3-soft:#9699A6;
  --pv3-primary:#0073EA; --pv3-primary-soft:#CCE5FF; --pv3-primary-ink:#0056B0;
  --pv3-done:#00C875; --pv3-working:#FDAB3D; --pv3-stuck:#E2445C; --pv3-purple:#A25DDC;
  --pv3-working-bg:#FFF4E5; --pv3-working-ink:#B4730F;
  --pv3-line:#E6E9EF; --pv3-line-2:#D0D4E4;
  --pv3-sh:0 1px 2px rgba(0,0,0,.05);
}

body.plan-v3 :is(#tab-plan-ca, .v3-csmount) {
  font-family: 'Public Sans','Be Vietnam Pro','Figtree',system-ui,sans-serif;
  color: var(--pv3-text);
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-i,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .ic {
  width: 15px; height: 15px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.75;
}
/* .ic KHÔNG có rule kích thước dùng chung trong repo (chỉ có bản scope theo
   từng workspace). <svg> chỉ có viewBox mà thành flex item thì width:auto →
   nhận kích thước thay thế mặc định 300px: nút "Plan today" phình ra 398px. */

/* ── Tiêu đề lặp: tab C.A|C.S + tab tháng đã nói đủ ────────────── */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-section-title,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-kpi-pane-title,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-table-month-header { display: none !important; }
/* Vỏ rỗng còn lại sau khi thẻ KPI / chart đã dời sang dải cân đối */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-kpi-pair,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-funnel-chart-row { display: none !important; }

/* ── Tab tháng: hiện tại | tiếp theo ───────────────────────────── */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-month-nav {
  display: flex; gap: 2px; border-bottom: 1px solid var(--pv3-line);
  background: none; padding: 0; margin: 0 0 12px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-sub-tab {
  padding: 9px 14px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--pv3-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-sub-tab:hover { color: var(--pv3-text); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-sub-tab.active {
  color: var(--pv3-text); font-weight: 700; border-bottom-color: var(--pv3-primary); background: none;
}

/* ── Dải cân đối: bảng 3 dòng + phễu bên phải ──────────────────
   Thay 9 thẻ KPI xếp 3 tầng. Bảng cho phép đọc SO SÁNH THEO CỘT
   (Target/Actual/Plan/Còn thiếu) và hiện cả C.A lẫn C.S cùng lúc,
   không phải đổi tab mới thấy số bên kia. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-recon {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 0 0 12px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-bal {
  /* Chia đôi băng với phễu: bảng cân đối chỉ 3 dòng nên không cần rộng hơn,
     còn phễu 5 bậc có nhãn dài (116.071.821/6.000.000 · 3 outlet) thì càng
     rộng càng đọc được. */
  flex: 1 1 0; min-width: 380px;
  background: var(--pv3-surface); border-radius: 8px; box-shadow: var(--pv3-sh);
  padding: 10px 13px 11px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-bal-h {
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--pv3-soft); margin-bottom: 8px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-bal-tbl {
  width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-bal-tbl th,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-bal-tbl td {
  padding: 6px 9px; text-align: right; font-size: 12.5px; white-space: nowrap;
  border-bottom: 1px solid var(--pv3-line);
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-bal-tbl thead th {
  font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--pv3-soft); padding-top: 0; border-bottom: 1px solid var(--pv3-line-2);
}
/* KHÔNG dùng display:flex cho <th>: ô mất tư cách table-cell → gạch chân
   chỉ dài bằng chữ và cột lệch khỏi thead. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-bal-tbl tbody th {
  text-align: left; font-weight: 700; font-size: 12.5px; padding-left: 0;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-bal-tbl tbody th em {
  font-style: normal; font-weight: 400; font-size: 11px; color: var(--pv3-soft); margin-left: 6px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 99px;
  margin-right: 7px; vertical-align: middle;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-bal-tbl tbody tr:last-child th,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-bal-tbl tbody tr:last-child td { border-bottom: 0; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-bal-tbl tr.pv3-tot th,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-bal-tbl tr.pv3-tot td {
  font-weight: 800; border-top: 1px solid var(--pv3-line-2); background: var(--pv3-surface-2);
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-gap { color: var(--pv3-stuck); font-weight: 700; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-nil { color: var(--pv3-soft); font-weight: 400; }
/* Ô Actual bấm được vì forward sang thẻ KPI gốc (mở danh sách từng đơn) */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-act[data-pv3-open] {
  cursor: pointer; color: var(--pv3-primary-ink); font-weight: 700;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-act[data-pv3-open]:hover { background: #F0F6FF; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-pcth,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-pc { width: 96px; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-pc { display: flex; align-items: center; gap: 7px; justify-content: flex-end; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-track {
  flex: 1; height: 5px; border-radius: 99px; background: #EBECF0; overflow: hidden;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-track i { display: block; height: 100%; background: var(--pv3-primary); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-pc b { font-size: 12px; color: var(--pv3-muted); }

/* Ô không thuộc 4 cột tiền (số outlet đã pick ngày, sales target…) — giữ đủ, không bỏ */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chip {
  font-size: 11.5px; color: var(--pv3-muted); background: var(--pv3-surface-2);
  border-radius: 99px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 5px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chip i {
  font-style: normal; font-weight: 700; font-size: 10px; color: var(--pv3-soft);
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chip b { color: var(--pv3-text); font-variant-numeric: tabular-nums; }
/* Thẻ KPI gốc: GIỮ trong DOM (ẩn) để onclick "xem từng đơn" không mất */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-src { display: none; }

/* ── Phễu ─────────────────────────────────────────────────────
   5 bậc (Raw Lead → Won) nên cần ~250px, ép thấp hơn là cắt mất bậc. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox {
  flex: 1 1 0; min-width: 380px;
  background: var(--pv3-surface); border-radius: 8px; box-shadow: var(--pv3-sh); overflow: hidden;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .plan-funnel-chart-wrap {
  border: 0 !important; border-radius: 0 !important; padding: 10px 12px !important; background: none !important;
}
/* KHÔNG ép chiều cao khung: phễu thật là HTML (.fnl2-*, funnel-shape.js), không
   phải canvas Chart.js — ép thấp là bị overflow:hidden cắt cụt bậc cuối chứ nó
   không co lại. plan-editor đã set height:auto cho khung này, cứ để vậy và NÉN
   CHÍNH CÁC HÀNG cho vừa. */

/* ── Phễu nén cho ô 50% ────────────────────────────────────────
   Bản gốc (sales-os-revamp.css) hàng cao 42px + gap 12px + pill % thò xuống
   dưới thanh 11px ⇒ 5 bậc ~258px. Ở đây: thanh 22px, gap 7px, pill % nằm
   TRONG thanh ⇒ ~150px, vừa ô mà vẫn đủ 5 bậc. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2 { gap: 7px !important; margin-top: 4px !important; max-width: none !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row {
  grid-template-columns: 74px 1fr auto !important; gap: 9px !important;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-label {
  font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .3px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-bar {
  height: 22px !important; min-width: 40px !important; border-radius: 5px !important;
  box-shadow: none !important; animation: none !important;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row:hover .fnl2-bar { transform: none !important; box-shadow: none !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-base { border-radius: 5px 0 0 5px !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-bar > .fnl2-base:last-child { border-radius: 5px !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-ext {
  border-radius: 0 5px 5px 0 !important;
  /* Vạch trắng = MỐC TARGET: nhìn là biết phần đã đạt dừng ở đâu so với target */
  border-left: 2px solid #fff;
}
/* % chuyển đổi: bản gốc treo dưới thanh (bottom:-11px) nên hàng nào cũng phải
   chừa thêm ~11px. Đưa vào TRONG thanh, canh giữa → hàng gọn hẳn. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-pct {
  left: 7px !important; bottom: auto !important; top: 50% !important;
  transform: translateY(-50%);
  background: transparent !important; box-shadow: none !important;
  color: #fff !important; font-size: 10px !important; padding: 0 !important;
  text-shadow: 0 1px 2px rgba(20,24,40,.35);
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-val b { font-size: 12.5px !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-val .fnl2-gap { font-size: 9.5px !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-sep { margin-top: 8px !important; padding-top: 7px !important; }
/* % so target do plan-v3 tính thêm (bản gốc chỉ có số tuyệt đối ▼/✓) */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .pv3-pt { font-weight: 800; opacity: .85; }

/* ── Bảng màu phễu theo Monday ─────────────────────────────────
   funnel-shape.js dùng thang cầu vồng (chàm → xanh → cyan → cam → lục) và
   tô GRADIENT. Hai thứ đó ngược với DS v2:
     • luật 2 — màu là TRẠNG THÁI, không trang trí: thang cầu vồng khiến
       "Customer Sampling" (cyan) trông khác loài với "SQL" (xanh) dù cả hai
       chỉ là hai nấc của cùng một tiến trình;
     • ô status của Monday tô PHẲNG, gradient làm nhoè ranh giới segment
       (đúng chỗ đang phải đọc: mốc target nằm đâu).
   Nay: một dải xanh đậm dần theo mức tiến gần chốt (nguyên tắc "ranking
   1-hue"), còn các bậc KẾT CỤC giữ đúng màu ngữ nghĩa của DS.
   Chỉ áp trong tab Plan — phễu ở Dashboard giữ nguyên. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-base { background-image: none !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="Raw Lead"] .fnl2-base,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="New Opening"] .fnl2-base { background-color: #AECFFF !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="SQL"] .fnl2-base,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="Grow Organic"] .fnl2-base { background-color: #7FB4FA !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="Customer Sampling"] .fnl2-base,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="Grow Selective"] .fnl2-base { background-color: #579BFC !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="Proposal Sent"] .fnl2-base,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="Revenue"] .fnl2-base { background-color: #0073EA !important; }
/* Kết cục: đạt = done · cần can thiệp = working · hỏng = stuck · treo = purple · bỏ = trung tính */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="Won"] .fnl2-base,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="Maintain"] .fnl2-base { background-color: #00C875 !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="Reactive"] .fnl2-base { background-color: #FDAB3D !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="Nuturing"] .fnl2-base { background-color: #A25DDC !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="Fail"] .fnl2-base,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="Delete NE"] .fnl2-base { background-color: #E2445C !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="Delete WE"] .fnl2-base { background-color: #C4C4C4 !important; }

/* Phần còn thiếu: nền phẳng thay vì gạch chéo — gạch chéo tạo nhiễu thị giác
   ngay cạnh mốc target, thứ đang cần đọc rõ nhất. Phần vượt: done phẳng. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-ext.fnl2-gap { background: #E6E9EF !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-ext.fnl2-over { background: #00C875 !important; }
/* Hai bậc đầu nền nhạt → chữ trắng tụt xuống ~2:1, không đọc được.
   Đổi sang mực đậm cùng tông xanh (Monday cũng đổi màu chữ theo độ đậm ô status). */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="Raw Lead"] .fnl2-pct,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="New Opening"] .fnl2-pct,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="SQL"] .fnl2-pct,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="Grow Organic"] .fnl2-pct,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-row[data-stage="Delete WE"] .fnl2-pct {
  color: #1F3A63 !important; text-shadow: none !important;
}

/* Radius về đúng 3 mức của DS (4 / 8 / 99) */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-bar,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-bar > .fnl2-base:last-child { border-radius: 4px !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-base { border-radius: 4px 0 0 4px !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox .fnl2-ext { border-radius: 0 4px 4px 0 !important; }

/* Chỉ hiện phễu của tab đang chọn; thu hết khi tắt bằng nút "Phễu" */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-ca [data-pv3-chart="cs"],
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-cs [data-pv3-chart="ca"],
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-nofnl .pv3-chartbox { display: none !important; }

/* ── Thanh tab C.A | C.S + nút thao tác mượn từ bảng ───────────── */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tabs {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--pv3-line); margin: 0 0 10px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tabrow { display: flex; gap: 2px; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 9px 13px; border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--pv3-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab:hover { color: var(--pv3-text); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab.on { color: var(--pv3-text); font-weight: 700; border-bottom-color: var(--pv3-primary); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab .n {
  font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 7px;
  background: #EBECF0; color: var(--pv3-muted); font-variant-numeric: tabular-nums;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab.on .n { background: var(--pv3-primary-soft); color: var(--pv3-primary-ink); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-acts {
  display: flex; align-items: center; gap: 6px; margin: 0 0 6px auto; flex-wrap: wrap;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-acts > button {
  flex: none; width: auto !important;   /* .btn-secondary trong app có width 100% → không chặn là nút giãn hết hàng */
  height: 30px; border-radius: 6px !important; font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 0 12px !important; display: inline-flex; align-items: center; gap: 6px;
}
/* Nút gốc mang style inline (vàng kem / viền cam) từ thời chưa có DS v2 → ghi đè
   về đúng bảng màu: một primary xanh duy nhất, còn lại là nút phụ nền trắng. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-acts > button {
  background: var(--pv3-surface) !important; color: var(--pv3-text) !important;
  border: 1px solid var(--pv3-line-2) !important;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-acts > button:hover { background: var(--pv3-surface-2) !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-acts > .btn-primary,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-acts > .plan-add-month-btn {
  background: var(--pv3-primary) !important; color: #fff !important; border: 0 !important;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-acts > .btn-primary:hover,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-acts > .plan-add-month-btn:hover { background: #0060B9 !important; }
/* Nút thu/mở phễu — mở thì tô nhạt như một nút đang bật */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-fnl.on {
  background: var(--pv3-primary-soft) !important; color: var(--pv3-primary-ink) !important;
  border-color: transparent !important;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cv { width: 12px; height: 12px; opacity: .55; transition: transform .15s; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-fnl.on .pv3-cv { transform: rotate(180deg); opacity: 1; }
/* Nút thuộc phễu nào chỉ hiện ở tab phễu đó — không để sales bấm
   "Thêm outlet C.S" trong lúc đang nhìn bảng C.A rồi tưởng thêm nhầm. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-ca [data-pv3-act="cs"],
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-cs [data-pv3-act="ca"] { display: none !important; }

/* ── Bảng: chỉ bảng của phễu đang chọn, chiếm trọn bề ngang ────── */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-tables-full { margin-top: 0; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-ca .pv3-t-cs,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-cs .pv3-t-ca { display: none !important; }

/* ── Chọn sales (dropdown sẵn có) ──────────────────────────────── */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-sub-nav { background: none; padding: 0 0 10px; }

@media (max-width: 1180px) {
  body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-chartbox { flex: 1 1 100%; }
}

/* ══ Bảng chi tiết Plan (C.A / C.S) ══════════════════════════════
   Bảng đã nhóm theo stage sẵn; ở đây làm nhóm đúng kiểu Monday:
   nền tint nhạt + vạch accent 3px bên trái theo màu stage + chevron
   thu gọn. Vạch dùng chung bảng màu với phễu phía trên nên nhìn là
   nối được nhóm nào ứng với bậc nào. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-stage-scroll {
  border: 0; border-radius: 8px; box-shadow: var(--pv3-sh);
  background: var(--pv3-surface); margin-bottom: 8px; overflow: hidden;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) tr.plan-stage-group td {
  background: var(--pv3-surface-2) !important;
  box-shadow: inset 3px 0 0 var(--pv3-acc, var(--pv3-line-2));
  border-bottom: 1px solid var(--pv3-line) !important;
  padding: 8px 12px !important;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) tr.plan-stage-group:hover td { background: #EFF1F6 !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .psg-target,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .psg-plan { font-size: 11.5px; font-variant-numeric: tabular-nums; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .psg-plan.psg-ok { color: var(--pv3-done); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .psg-plan.psg-warn { color: var(--pv3-working); }

/* Chevron thu gọn nhóm */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cvg {
  width: 20px; height: 20px; flex: none; padding: 0; border: 0; cursor: pointer;
  background: transparent; border-radius: 4px; color: var(--pv3-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cvg:hover { background: #E3E6EE; color: var(--pv3-text); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cvg .pv3-cv { transform: rotate(-90deg); transition: transform .15s; opacity: .8; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cvg.on .pv3-cv { transform: none; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-stage-scroll.pv3-col tbody tr:not(.plan-stage-group) { display: none; }

/* Dòng dữ liệu: cao đều, hover sáng cả dòng, số căn phải tabular-nums */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-list-table tbody tr:not(.plan-stage-group) td {
  padding: 8px 12px; border-bottom: 1px solid var(--pv3-line);
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-list-table tbody tr:not(.plan-stage-group):hover td { background: #F5F8FF; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-list-table td.num,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-list-table th.num { font-variant-numeric: tabular-nums; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-list-head thead th {
  background: var(--pv3-surface-2); font-size: 10px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--pv3-soft); font-weight: 700;
}

/* Nền vàng kem của dòng "ngoài plan" → tint working của DS (luật 11 cấm nền
   vàng kem kiểu cũ). Giữ ý nghĩa "cần chú ý" bằng vạch accent bên trái. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-list-table tr[style*="fffbeb"] td:first-child {
  box-shadow: inset 3px 0 0 var(--pv3-working);
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-list-table tr[style*="fffbeb"] td {
  background: #FFF7EC !important;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-ca-outlet-cell span[style*="fef3c7"] {
  background: #FFF4E5 !important; color: #B4730F !important; font-weight: 700 !important;
}

/* ── Dòng outlet: một hàng thay vì ba ──────────────────────────
   Bản gốc: tên outlet / "4 SP" (display:block) / nút Giao việc (div riêng)
   xếp chồng ⇒ ~90px mỗi dòng. Nay "4 SP" nằm ngay sau tên, nút Giao việc
   do plan-v3 chuyển sang ô Đề xuất (xem compactRows). */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-ca-outlet-cell small.muted {
  display: inline !important; margin: 0 0 0 8px !important; font-size: 11px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-ca-outlet-name { text-decoration: none !important; font-weight: 700; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-ca-outlet-name:hover { text-decoration: underline !important; }

/* Ô Đề xuất = chỗ đứng chung của mọi hành động trên dòng */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .cs-program-cell { white-space: normal; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .cs-program-cell .pv3-actcell {
  display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-left: 4px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .cs-program-cell .cs-program-btn,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .cs-program-cell .ta-assign-btn {
  margin-top: 0 !important; height: 24px; padding: 0 9px !important;
  border-radius: 4px; font-size: 11.5px; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; gap: 4px;
}

/* Ô "Tiềm năng": pill vàng cao 36px là thứ đẩy chiều cao dòng lên */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-ca-potential {
  height: 26px; padding: 0 22px 0 9px; font-size: 11.5px; border-radius: 4px;
  /* min-width THẮNG max-width trong CSS, nên chỉ đặt max-width là vô hiệu:
     select giữ nguyên 130px = trọn bề rộng cột (đã gồm padding) rồi tràn
     12px sang cột Ngày DT, nhìn như hai ô dính nhau. */
  min-width: 0 !important; width: 100% !important; max-width: 100%;
}

/* Bề ngang: cột Outlet vốn KHÔNG đặt width nên nuốt hết chỗ thừa (~1200px trên
   màn rộng) còn các cột khác bị dồn. Ghim Outlet lại, cho ô Đề xuất — nơi vừa
   nhận thêm nút — hưởng phần dôi ra. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-list-table col:first-child { width: 330px; }
/* Cột Tiềm năng 130px không đủ cho "Rất tiềm năng" sau khi select được ép
   nằm gọn trong ô (130 - 24 padding = 106px) → chữ bị cắt. Nới lên 158px. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-list-table col:nth-child(2) { width: 158px !important; }
/* !important là BẮT BUỘC: <col style="width:130px"> là style inline, rule thường
   thua nó. Không thắng được thì cả bảng rơi về "chia đều phần dôi theo tỉ lệ" —
   cột Outlet lại phình ra 505px còn ô Đề xuất hẹp tới mức nút xuống dòng. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-list-table col:nth-child(5) { width: auto !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-list-table tbody tr:not(.plan-stage-group) td { padding: 6px 12px; }

/* ── Block phân bổ theo stage (đứng trước danh sách chi tiết) ───
   Một thanh tỉ lệ + hàng chip đếm. Thanh trả lời "đọng ở bậc nào",
   chip trả lời "bao nhiêu cái" — bấm chip là nhảy tới nhóm đó. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dist {
  background: var(--pv3-surface); border-radius: 8px; box-shadow: var(--pv3-sh);
  padding: 10px 13px 11px; margin: 0 0 10px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dist-h {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--pv3-soft); margin-bottom: 8px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dist-tot {
  margin-left: auto; letter-spacing: 0; text-transform: none;
  font-size: 12px; color: var(--pv3-text); font-variant-numeric: tabular-nums;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dbar {
  display: flex; height: 26px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--pv3-surface-2);
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dbar i {
  display: flex; align-items: center; justify-content: center; min-width: 3px; overflow: hidden;
  font-style: normal; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dchips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dchip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--pv3-line); background: var(--pv3-surface); border-radius: 99px;
  padding: 3px 10px 3px 8px; font-family: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--pv3-muted); cursor: default;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dchip[data-pv3-jump] { cursor: pointer; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dchip[data-pv3-jump]:hover {
  border-color: var(--pv3-primary); color: var(--pv3-primary-ink); background: #F2F8FF;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-ddot { width: 8px; height: 8px; border-radius: 99px; flex: none; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dchip b {
  color: var(--pv3-text); font-weight: 800; font-variant-numeric: tabular-nums;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dchip em {
  font-style: normal; font-size: 10.5px; color: var(--pv3-soft); font-variant-numeric: tabular-nums;
}

/* ── C.A: phễu đọc ngược Won → Raw Lead ────────────────────────
   Trang lên plan xuất phát từ số phải chốt rồi lần ngược ra số lead cần có.
   Dùng column-reverse thay vì đảo DOM → funnel-shape.js không phải biết gì. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) [data-pv3-chart="ca"] .fnl2 { flex-direction: column-reverse; }
/* Vạch ngăn bậc "ngoài phễu" (Nuturing/Fail) vốn là border-TOP; đảo chiều rồi
   thì nó rơi sai khe — chuyển xuống border-bottom mới đúng ranh giới. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) [data-pv3-chart="ca"] .fnl2-sep {
  margin: 0 0 8px !important; padding: 0 0 7px !important;
  border-top: 0 !important; border-bottom: 1px dashed var(--pv3-line-2) !important;
}

/* ── C.S dùng .plan-stage-card (không phải .plan-stage-scroll như C.A) ──
   Cùng ngôn ngữ: nền tint + vạch accent 3px theo stage + chevron gấp. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-stage-card {
  border: 0; border-radius: 8px; box-shadow: var(--pv3-sh);
  background: var(--pv3-surface); margin-bottom: 8px; overflow: hidden;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-stage-card-header {
  background: var(--pv3-surface-2) !important;
  box-shadow: inset 3px 0 0 var(--pv3-acc, var(--pv3-line-2));
  border-bottom: 1px solid var(--pv3-line);
  padding: 8px 12px !important; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-stage-card.pv3-col .plan-stage-card-body { display: none; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-stage-card-table tbody tr td {
  padding: 7px 10px; border-bottom: 1px solid var(--pv3-line);
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-stage-card-table tbody tr:hover td { background: #F5F8FF; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-stage-card-table thead th {
  background: var(--pv3-surface-2); font-size: 10px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--pv3-soft); font-weight: 700;
}

/* ── (1) Ô "Tiềm năng" về bảng màu DS ──────────────────────────
   Lớp pot-high/mid/low VỐN ĐÃ mang nghĩa (xanh/vàng/đỏ) — chỉ là dùng tông
   tailwind cũ, tô nhạt. Đưa về status palette v2 và tô ĐẦY như ô status của
   Monday (luật 9) để đọc được mức tiềm năng từ xa. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-ca-potential {
  border: 0 !important; font-weight: 700; border-radius: 4px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-ca-potential.pot-high { background: #00C875 !important; color: #fff !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-ca-potential.pot-mid  { background: #FDAB3D !important; color: #fff !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-ca-potential.pot-low  { background: #E2445C !important; color: #fff !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-ca-potential.pot-empty {
  background: var(--pv3-surface-2) !important; color: var(--pv3-muted) !important;
  box-shadow: inset 0 0 0 1px var(--pv3-line-2);
}

/* ── (4) C.S: cột thẳng hàng giữa các card + đề mục dùng chung ──
   Mỗi card tự tính bề rộng nên cột lệch nhau. table-layout:fixed + ghim cột
   đầu ⇒ phần còn lại chia đều, mọi card (và hàng đề mục chung) trùng khít.
   Cách này đúng cho CẢ hai biến thể 9 cột (tháng hiện tại) và 6 cột (tháng
   sau) vì không ghim theo nth-child. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-stage-card-table { table-layout: fixed; width: 100%; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-stage-card-table th:first-child,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-stage-card-table td:first-child { width: 22%; }
/* Biến thể 9 cột (tháng hiện tại): chia đều làm "Actual / Gap" bị cắt mất số,
   nên đặt tỉ lệ theo lượng chữ thật của từng cột. Tháng sau (6 cột) để chia đều. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cs9 .plan-stage-card-table th:nth-child(1),
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cs9 .plan-stage-card-table td:nth-child(1) { width: 18%; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cs9 .plan-stage-card-table th:nth-child(2),
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cs9 .plan-stage-card-table td:nth-child(2) { width: 9%; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cs9 .plan-stage-card-table th:nth-child(3),
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cs9 .plan-stage-card-table td:nth-child(3) { width: 10%; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cs9 .plan-stage-card-table th:nth-child(4),
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cs9 .plan-stage-card-table td:nth-child(4) { width: 10%; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cs9 .plan-stage-card-table th:nth-child(5),
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cs9 .plan-stage-card-table td:nth-child(5) { width: 9%; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cs9 .plan-stage-card-table th:nth-child(6),
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cs9 .plan-stage-card-table td:nth-child(6) { width: 17%; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cs9 .plan-stage-card-table th:nth-child(7),
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cs9 .plan-stage-card-table td:nth-child(7) { width: 11%; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cs9 .plan-stage-card-table th:nth-child(8),
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cs9 .plan-stage-card-table td:nth-child(8) { width: 8%; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-stage-card-table td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-stage-card .plan-stage-card-table thead { display: none; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cshead {
  margin-bottom: 6px; border-radius: 8px; overflow: hidden;
  box-shadow: var(--pv3-sh); background: var(--pv3-surface);
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-cshead thead { display: table-header-group; }

/* ── (3) Ô tìm gộp — lọc xuyên mọi bảng con của danh sách ───────── */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-qbox {
  display: inline-flex; align-items: center; gap: 6px; height: 30px;
  padding: 0 10px; border: 1px solid var(--pv3-line-2); border-radius: 6px;
  background: var(--pv3-surface); color: var(--pv3-soft);
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-qbox:focus-within { border-color: var(--pv3-primary); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-q {
  border: 0; outline: none; background: none; font-family: inherit;
  font-size: 12.5px; color: var(--pv3-text); width: 150px; padding: 0;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-qn {
  font-size: 11px; color: var(--pv3-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── C.S: danh sách ngang toàn màn hình như C.A ─────────────────
   .plan-stage-grid vốn column-count:2 → mỗi card chỉ được nửa bề ngang, 9 cột
   nhét vào đó nên chữ bị cắt ("chưa c…", "31/08/202"). Về 1 cột. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-stage-grid { column-count: 1 !important; column-gap: 0 !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-ca-autowon { vertical-align: middle; }

/* ── Tab thứ ba: "Thiếu forecast" ───────────────────────────────
   Dải .cs-missing-banner là việc ĐỐI SOÁT giữa Sales OS và Commercial Plan
   (outlet còn mua hàng nhưng CP chưa nhập forecast), không phải việc lên plan
   C.A hay C.S — nằm chèn giữa danh sách C.S thì vừa che mất chỗ vừa lạc đề.
   Tách thành view riêng, chỉ hiện khi thật sự có outlet lệch. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab-warn { color: var(--pv3-working-ink, #B4730F); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab-warn .n { background: #FFF4E5; color: #B4730F; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab-warn.on { border-bottom-color: var(--pv3-working); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab-warn.on .n { background: var(--pv3-working); color: #fff; }

/* Ở hai view lên plan: giấu dải cảnh báo đi */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-ca .cs-missing-banner,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-cs .cs-missing-banner { display: none !important; }

/* Ở view đối soát: chỉ còn dải cảnh báo. Vẫn giữ bảng cân đối phía trên làm
   ngữ cảnh, nhưng bỏ phễu và bỏ mọi bảng danh sách. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-miss .pv3-t-ca,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-miss .pv3-chartbox,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-miss .pv3-dist,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-miss .pv3-cshead,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-miss .plan-stage-grid,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-miss [data-pv3-act],
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-miss .pv3-qbox,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-miss .pv3-fnl { display: none !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-f-miss .pv3-t-cs { display: block !important; }

/* Dải cảnh báo về đúng tông DS: nền working nhạt + vạch accent, bỏ viền cam đậm */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .cs-missing-banner {
  background: #FFF7EC !important; border: 0 !important;
  box-shadow: inset 3px 0 0 var(--pv3-working), var(--pv3-sh);
  border-radius: 8px !important; padding: 12px 14px !important;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .cs-missing-banner .cs-miss-add {
  background: var(--pv3-primary) !important; font-weight: 700 !important;
}

/* ── Khối phân bổ: đổi thứ tự + lọc theo stage ──────────────────
   Chip đổi từ "nhảy tới nhóm" thành "lọc còn nhóm đó" — với 116 outlet thì
   nhảy tới vẫn phải cuộn qua các nhóm khác, lọc mới thật sự thu hẹp. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dsort {
  display: inline-flex; gap: 2px; margin-left: 10px;
  background: var(--pv3-surface-2); border-radius: 6px; padding: 2px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dsort button {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px; text-transform: none;
  color: var(--pv3-muted); padding: 3px 9px; border-radius: 4px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dsort button:hover { color: var(--pv3-text); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dsort button.on {
  background: var(--pv3-surface); color: var(--pv3-text); box-shadow: var(--pv3-sh);
}
/* Chip đang lọc */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dchip.on {
  border-color: var(--pv3-primary); background: var(--pv3-primary); color: #fff;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dchip.on b,
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dchip.on em { color: #fff; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dchip.on::after {
  content: "✕"; font-size: 10px; opacity: .8; margin-left: 2px;
}
/* Đang lọc → nói rõ đây không phải toàn bộ danh sách */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-dist.pv3-filtered {
  box-shadow: inset 3px 0 0 var(--pv3-primary), var(--pv3-sh);
}

/* ── Nút lọc cột (tự dựng, chạy xuyên các bảng con) ─────────────
   Nút của table-filter chỉ lọc trong một <table> nên vô dụng ở đây; những nút
   này gom giá trị từ MỌI bảng con của danh sách. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-colbtn {
  background: transparent; border: 0; cursor: pointer; padding: 0 4px; margin-left: 4px;
  color: var(--pv3-soft); border-radius: 3px; line-height: 1; vertical-align: middle;
  display: inline-flex; align-items: center; gap: 3px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-colbtn:hover { background: #E3E6EE; color: var(--pv3-text); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-fi { width: 13px; height: 13px; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-colbtn .n:not(:empty) {
  font-size: 9.5px; font-weight: 800; background: var(--pv3-primary); color: #fff;
  border-radius: 99px; padding: 0 5px; line-height: 14px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) th.pv3-colon {
  background: var(--pv3-primary-soft) !important; color: var(--pv3-primary-ink) !important;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) th.pv3-colon .pv3-colbtn { color: var(--pv3-primary-ink); }

body.plan-v3 .pv3-colpop {
  position: absolute; top: 100%; left: 0; z-index: 60; min-width: 220px; max-width: 320px;
  background: var(--pv3-surface); border: 1px solid var(--pv3-line);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(20,24,40,.16); padding: 8px;
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--pv3-text);
}
body.plan-v3 .pv3-colpop-h { display: flex; gap: 6px; margin-bottom: 6px; }
body.plan-v3 .pv3-colq {
  flex: 1; min-width: 0; border: 1px solid var(--pv3-line-2); border-radius: 4px;
  padding: 4px 7px; font-family: inherit; font-size: 12px; outline: none;
}
body.plan-v3 .pv3-colq:focus { border-color: var(--pv3-primary); }
body.plan-v3 .pv3-colclear {
  border: 1px solid var(--pv3-line-2); background: var(--pv3-surface); border-radius: 4px;
  font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--pv3-muted);
  padding: 0 8px; cursor: pointer; white-space: nowrap;
}
body.plan-v3 .pv3-colpop-b { max-height: 260px; overflow-y: auto; }
body.plan-v3 .pv3-colpop-b label {
  display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 4px;
  font-size: 12.5px; cursor: pointer;
}
body.plan-v3 .pv3-colpop-b label:hover { background: var(--pv3-surface-2); }
body.plan-v3 .pv3-colpop-b label span {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.plan-v3 .pv3-colpop-b label em {
  font-style: normal; font-size: 11px; color: var(--pv3-soft); font-variant-numeric: tabular-nums;
}
body.plan-v3 .pv3-colpop-b label i { color: var(--pv3-soft); }

/* Sắp xếp trong popover lọc cột */
body.plan-v3 .pv3-colsort { display: flex; gap: 4px; margin-bottom: 6px; }
body.plan-v3 .pv3-colsort button {
  flex: 1; border: 1px solid var(--pv3-line-2); background: var(--pv3-surface);
  border-radius: 4px; font-family: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--pv3-muted); padding: 4px 6px; cursor: pointer; white-space: nowrap;
}
body.plan-v3 .pv3-colsort button:hover { border-color: var(--pv3-primary); color: var(--pv3-primary-ink); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-colbtn .ar:not(:empty) {
  font-size: 11px; font-weight: 800; color: var(--pv3-primary-ink);
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) th.pv3-sorted { color: var(--pv3-primary-ink) !important; }

/* ── Tab C.A / C.S tô theo màu phễu ─────────────────────────────
   Trước là chữ trơn, nhìn không ra đây là hai tab chuyển qua lại được.
   Dùng ĐÚNG bảng màu đã đặt ở bảng cân đối (chấm C.A cam · C.S xanh) để
   nhìn tab là biết đang ở nhánh nào, không phải đọc chữ. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab[data-pv3-fn="ca"] .pv3-i { color: var(--pv3-working); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab[data-pv3-fn="cs"] .pv3-i { color: var(--pv3-primary); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab[data-pv3-fn="ca"] .n {
  background: var(--pv3-working-bg); color: var(--pv3-working-ink);
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab[data-pv3-fn="cs"] .n {
  background: var(--pv3-primary-soft); color: var(--pv3-primary-ink);
}
/* Tab đang chọn: gạch chân + huy hiệu tô đặc cùng màu */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab[data-pv3-fn="ca"].on { border-bottom-color: var(--pv3-working); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab[data-pv3-fn="ca"].on .n {
  background: var(--pv3-working); color: #fff;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab[data-pv3-fn="cs"].on { border-bottom-color: var(--pv3-primary); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab[data-pv3-fn="cs"].on .n {
  background: var(--pv3-primary); color: #fff;
}
/* Tab cảnh báo đổi sang đỏ để KHÔNG trùng màu với C.A — ba tab ba màu, mỗi
   màu một nghĩa: cam = outlet mới đang push · xanh = outlet hiện hữu ·
   đỏ = dữ liệu lệch, cần xử lý. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab-warn { color: var(--pv3-stuck); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab-warn .pv3-i { color: var(--pv3-stuck); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab-warn .n { background: #FCE8EB; color: #C32E43; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab-warn.on { border-bottom-color: var(--pv3-stuck); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab-warn.on .n { background: var(--pv3-stuck); color: #fff; }

/* ── Tab: chữ ăn màu, tab đang chọn thành viên thuốc tô đặc ─────
   Chữ trơn màu xám thì dù icon/huy hiệu có màu vẫn không "nổi". Cho CHỮ ăn
   luôn màu của nhánh, và tab đang chọn tô đặc cả nền — nhìn một cái là thấy
   mình đang đứng ở đâu. */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab {
  border-radius: 6px 6px 0 0; padding: 8px 14px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab[data-pv3-fn="ca"] { color: var(--pv3-working-ink); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab[data-pv3-fn="cs"] { color: var(--pv3-primary-ink); }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab.pv3-tab-warn { color: #C32E43; }

body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab[data-pv3-fn="ca"].on {
  background: var(--pv3-working); color: #fff;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab[data-pv3-fn="cs"].on {
  background: var(--pv3-primary); color: #fff;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab.pv3-tab-warn.on {
  background: var(--pv3-stuck); color: #fff;
}
/* Trên nền đã tô đặc thì icon + huy hiệu phải đảo sang trắng */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab.on .pv3-i { color: #fff !important; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab.on .n {
  background: rgba(255,255,255,.26) !important; color: #fff !important;
}
/* Tô đặc rồi thì gạch chân thành thừa */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab.on { border-bottom-color: transparent; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-tab:not(.on):hover { background: var(--pv3-surface-2); }

/* Icon cho tab tháng */
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-sub-tab {
  display: inline-flex; align-items: center; gap: 7px;
}
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .pv3-mi { opacity: .7; }
body.plan-v3 :is(#tab-plan-ca, .v3-csmount) .plan-sub-tab.active .pv3-mi { opacity: 1; color: var(--pv3-primary); }