/* Vibary UI — css/crm.css (chủ tệp: FE CRM 25/10). CSS riêng màn 2.1 Quản lý khách hàng (CRM) — dùng token tokens.css, lưới den.css.
   Khối .crm-khach (.tq-bang): thanh tab + ô tìm nhanh → 2 bảng lồng (.crm-bang, 1 hiện 1 ẩn). Chip hạng RFM .crm-hang. Chip xám pipeline.
   Không chữ < 14px ngoài .chu-thich; vùng chạm ≥ 44px ở ≤1023px; không tràn ngang. */

/* ===== 1. Khối bảng khách: tab + tìm nhanh ===== */
.crm-khach { display: flex; flex-direction: column; gap: var(--k8, 8px); min-height: 0; }
.crm-bang-dau { display: flex; align-items: center; flex-wrap: wrap; gap: var(--k8, 8px); min-height: 36px; flex: none; }
.crm-tab { display: inline-flex; gap: var(--k4, 4px); flex: none; max-width: 100%; }
.crm-tab-nut { gap: var(--k4, 4px); padding: 0 var(--k12, 12px); border-radius: 999px; }
.crm-tab-nut[aria-selected="true"], .crm-tab-mo { background: var(--xanh-nhat, #E8F0FD); border-color: var(--xanh, #1565D8); color: var(--xanh, #1565D8); }
.crm-tab-nut:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--xanh-mo, rgba(21, 101, 216, 0.25)); }
.crm-tab-so { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--the, #fff); color: var(--chu-phu, #5B6A80); font-weight: 700; line-height: 1; }
.crm-tab-nut[aria-selected="true"] .crm-tab-so { background: var(--xanh, #1565D8); color: #fff; }
.crm-tim-khung { display: flex; align-items: center; gap: var(--k8, 8px); flex: 1 1 160px; min-width: 0; max-width: 320px; margin-left: auto; min-height: 36px; padding: 0 var(--k12, 12px); border: 1px solid var(--vien, #E3E9F2); border-radius: 999px; background: var(--nen, #F5F7FB); color: var(--chu-3, #7A8699); transition: box-shadow var(--chuyen-nhanh, 180ms), border-color var(--chuyen-nhanh, 180ms); }
.crm-tim-khung:focus-within { border-color: var(--xanh, #1565D8); box-shadow: 0 0 0 3px var(--xanh-mo, rgba(21, 101, 216, 0.25)); background: var(--the, #fff); }
.crm-tim-khung svg { flex: none; width: 18px; height: 18px; }
.crm-tim { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: transparent; outline: none; min-height: 34px; font-size: var(--c-thuong, 14px); color: var(--chu, #0B1B33); }
.crm-tim::placeholder { color: var(--chu-mo, #9AA7B8); }
.crm-tim::-webkit-search-cancel-button { cursor: pointer; }
.crm-khop { flex: 1 1 100%; min-width: 0; }
.crm-khop:empty { display: none; }
@media (max-width: 1023px) {
  .crm-tim-khung { min-height: var(--vung-cham, 44px); }
  .crm-tim { min-height: 42px; }
}

/* bảng lồng: bỏ viền/bóng/padding của .khoi con, cuộn nội bộ trên máy tính */
.crm-bang-than { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.crm-bang.khoi { border: 0; box-shadow: none; padding: 0; border-radius: 0; background: transparent; flex: 1 1 auto; min-height: 0; }
.crm-bang.khoi:hover { box-shadow: none; transform: none; }
/* app.css .khoi:hover scale(1.02): khối bảng 50 dòng cao ~12.000px → phóng 2% = đáy lệch ~240px, nút "Xem thêm" chui dưới thanh đáy mobile → tắt zoom cho khối khách */
.crm-khach:hover, .crm-khach.khoi:hover { transform: none; z-index: auto; }
.crm-bang .khoi-dau h2 { font-size: var(--c-thuong, 14px); }
.crm-bang .khoi-than { flex: 1 1 auto; min-height: 0; overflow: auto; }
.crm-an { display: none !important; }
.crm-bang.crm-gon tbody tr.crm-them { display: none !important; }
.crm-xem-them-khung { display: flex; align-items: center; gap: var(--k8, 8px); flex-wrap: wrap; padding: var(--k8, 8px) 0 0; }
.crm-xem-them { border-radius: 999px; }
.crm-khong-khop { padding: var(--k12, 12px); }
@media (min-width: 1024px) {
  /* hàng 3: bảng khách 7–8 cột cần rộng hơn biểu đồ → bảng 7/12, biểu đồ 5/12 (đảo so với mẫu ke_toan) */
  .tq.tq-dkp.tq-co-rieng > .crm-bd1 { grid-column: 1 / 6; }
  .tq.tq-dkp.tq-co-rieng > .crm-khach { grid-column: 6 / 13; }
  /* ô số/ngày/hạng 1 dòng, tên khách được xuống dòng; rộng hơn khung → cuộn ngang NỘI BỘ trong .bang-khung (không tràn trang) */
  .tq .crm-bang table.bang th, .tq .crm-bang table.bang td { white-space: nowrap; overflow-wrap: normal; }
  .tq .crm-bang table.bang td.o-tieu-de, .tq .crm-bang table.bang th.o-tieu-de { white-space: normal; overflow-wrap: anywhere; min-width: 150px; }
  .tq .crm-bang table.bang td[data-nhan="Việc làm"], .tq .crm-bang table.bang td[data-nhan="Việc cần làm"] { white-space: normal; min-width: 120px; }
  .crm-bang .bang-khung { overflow: auto; }
  /* hàng 3: bảng 50 dòng cuộn nội bộ (cao tối đa 560px) + biểu đồ chính khung cao cố định → hàng không phình theo canvas Chart.js */
  .tq.tq-dkp > .crm-khach { overflow: hidden; max-height: 560px; }
  .crm-bang .bang-khung { max-height: none; }
  .tq.tq-dkp > .crm-bd1 { max-height: 560px; }
  .tq.tq-dkp > .crm-bd1 .khoi-than { flex: 1 1 auto; min-height: 0; }
  .tq.tq-dkp > .crm-bd1 .bd-khung { height: 400px; max-height: 100%; }
}
@media (max-width: 1023px) {
  /* app.css ≤640 đặt .khoi-bang { max-height: 420px } + .khoi-than overflow auto → bảng lồng bị cắt, nút "Xem thêm" nằm trong khung cuộn con; mở hết */
  .crm-bang.khoi-bang, .crm-bang .khoi-than, .crm-bang .bang-khung { overflow: visible; max-height: none; }
}

/* ===== 2. Chip hạng RFM: A xanh · B vàng · C xám (màu nền từ app.css .nhan-*) ===== */
.tq .crm-hang, .crm-hang { white-space: nowrap; display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 var(--k8, 8px); border-radius: 999px; font-weight: 700; line-height: 1; letter-spacing: 0.02em; }
.crm-hang-A { box-shadow: inset 0 0 0 1px var(--la, #079455); }
.crm-hang-B { box-shadow: inset 0 0 0 1px var(--vang, #DC6803); }
.crm-hang-C { box-shadow: inset 0 0 0 1px var(--chu-mo, #9AA7B8); }
.tq table.bang td[data-hang] { white-space: nowrap; }

/* ===== 3. Chip xám "Odoo chưa dùng pipeline CRM" (khối Cảnh báo) ===== */
.crm-chip-dong { display: flex; flex-wrap: wrap; gap: var(--k8, 8px); margin: 0; }
.crm-chip-pipeline { white-space: normal; line-height: 1.25; padding: var(--k4, 4px) var(--k12, 12px); gap: var(--k8, 8px); }
.crm-chip-pipeline .den { flex: none; }

/* ===== 4. Biểu đồ cơ cấu RFM ở ô .tq-rieng (hàng 2, cột 9/13) =====
   Chart.js responsive + maintainAspectRatio:false → khung PHẢI có chiều cao xác định, nếu không canvas phình vô hạn (hàng 2 cao 7000px khi thử 25/10). */
.crm-rfm .khoi-than { position: relative; overflow: hidden; display: block; flex: 1 1 auto; min-height: 0; }
.crm-rfm .bd-khung { height: 240px; min-height: 0; max-height: 100%; }
.crm-rfm .bd-khung canvas { max-height: 100%; }
@media (min-width: 1024px) { .tq.tq-dkp > .crm-rfm { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .crm-rfm .bd-khung { height: 220px; } }
@media (min-width: 1600px) { .crm-rfm .bd-khung { height: 260px; } }
@media (max-width: 1023px) { .crm-rfm .bd-khung { height: 260px; } }

/* ===== 5. Mobile ≤640: bảng thành thẻ (app.css) — ô hạng/việc giữ 1 dòng gọn ===== */
@media (max-width: 640px) {
  .crm-bang-dau { align-items: stretch; }
  .crm-tab { width: 100%; }
  .crm-tab-nut { flex: 1 1 0; min-width: 0; }
  .crm-tim-khung { max-width: none; flex-basis: 100%; margin-left: 0; }
}