/* ══ 📊 BÁO CÁO · 📈 ĐO LƯỜNG CỦA TÔI — web giaoanhin (24/09 · Dashboard Đợt 5 · 7 · luật 08) ══
   Nạp ở `may-chu/trang/index.html` SAU cong.css + khoi-sukids.css. Thẻ · lưới · danh sách dùng lại họ `.db-*` của màn
   admin (cong.css); file này chỉ thêm phần màn giaoanhin có. Mọi màu trỏ biến SẴN CÓ (không mã màu mới), tỉ lệ ghi
   cạnh cặp. Chữ ≥ 12px — kể cả các lớp cũ của bieu-do.js khi nằm trong màn này (`.bc-man …`, không đụng màn khác). */
.bc-man{display:flex; flex-direction:column; gap:var(--k3); min-width:0}
.bc-ten{margin:0; font-size:var(--cx-to)}
.bc-tieu{margin:var(--k2) 0 0; font-size:var(--cx)}
.bc-khoi{display:flex; flex-direction:column; gap:var(--k2); min-width:0}
.bc-phu{margin:0; font-size:12px; color:var(--chu-mo)}                                  /* 4.68:1 trên --nen · 4.51:1 trên --nen-phu */
.bc-loi{margin:0; padding:var(--k3); border-radius:var(--bo-o); background:var(--loi-100); color:var(--loi-700)}  /* 4.57:1 */
.bc-nhac{margin:var(--k2) 0 0; padding:var(--k2) var(--k3); border-radius:var(--bo-o); background:var(--vang-100); color:var(--vang-800); font-size:var(--cx-nho)}  /* 6.02:1 */
.bc-ky .bc-ky-chip{display:flex; flex-wrap:wrap; gap:var(--k2)}
.bc-ky .db-tu-chon{flex-wrap:wrap}
/* nút trong thẻ trắng: nền --nen-3 (khác mặt phẳng — luật 08 ⑤) · chữ --chu 11.11:1 · vùng bấm ≥ 44px trên điện thoại */
.bc-xem-ds,.bc-gap{display:inline-flex; align-items:center; gap:6px; min-height:var(--cao-nut); padding:0 var(--k3);
  border:1px solid var(--vien-dam); border-radius:var(--bo-o); background:var(--nen-3); color:var(--chu);
  font:inherit; font-size:var(--cx-nho); cursor:pointer; text-align:left}
.bc-xem-ds{margin-top:6px}
.bc-xem-ds[aria-expanded="true"],.bc-gap[aria-expanded="true"]{border-color:var(--chinh-500); background:var(--chinh-100); color:var(--chinh-800)}  /* 4.52:1 */
.bc-xem-ds:focus-visible,.bc-gap:focus-visible{outline:2px solid var(--chinh-500); outline-offset:2px}
.bc-gap{width:100%; font-weight:700; font-size:var(--cx)}
.bc-gap small{font-weight:400; font-size:12px; color:var(--chu-phu)}
.bc-gap-thang{margin-top:var(--k2); font-size:var(--cx-nho)}
.bc-gap-than{display:flex; flex-direction:column; gap:var(--k2); padding-left:var(--k2)}
.bc-gap-than[hidden]{display:none}
/* «Chữ bảng 12px» (anh chốt) — bảng tháng · bảng khoảng · bảng danh sách */
.bc-ks .ks-nhan,.bc-ks .ks-gt,.bc-ks .ks-phu,.bc-bang,.bc-bang th,.bc-bang td{font-size:12px}
.bc-ks{width:100%}
.bc-link{display:flex; flex-wrap:wrap; gap:var(--k3); margin-top:4px}
.bc-link a,.bc-bang a{color:var(--chinh-800)}                                           /* 4.93:1 trên --nen · 4.52:1 trên --chinh-100 */
.bc-cuon{width:100%; overflow-x:auto}
.bc-bang td.so,.bc-bang th:not(:first-child){text-align:right}
/* cột ngang có số đã nhóm dấu */
.bc-cot{display:flex; flex-direction:column; gap:6px; width:100%}
.bc-cot-dong{display:grid; grid-template-columns:minmax(0,38%) 1fr auto; align-items:center; gap:var(--k2); font-size:12.5px; color:var(--chu)}
.bc-cot-ten{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bc-cot-vach{height:12px; background:var(--nen-3); border-radius:var(--bo-tron); overflow:hidden}
.bc-cot-vach span{display:block; height:100%; background:var(--chinh-500); border-radius:var(--bo-tron)}
.bc-cot-so{font-variant-numeric:tabular-nums}
/* lớp cũ của bieu-do.js dưới sàn 12px — nâng TRONG màn này (khối concept của sale vẽ bằng chúng) */
.bc-man .cd-gt,.bc-man .cd-nhan,.bc-man .bd-cg-pt,.bc-man .xh-chu small,.bc-man .bd-cot-dong{font-size:12px}
.bc-man .db-luoi{min-width:0}
/* `<small>` trong tiêu đề thẻ `.db-ten` của khung admin ra 10,4px (83% của 12,5px — đo 24/09 bằng getComputedStyle) → nâng về sàn */
.bc-man small{font-size:12px}
@media (max-width:640px){
  .bc-xem-ds,.bc-gap,.bc-man .db-ky-nut{min-height:var(--cao-bam)}
  .bc-cot-dong{grid-template-columns:minmax(0,44%) 1fr auto}
}
/* Web giaoanhin: thân trang không đệm ngang (dải tìm của «Giao Ảnh» trải hết bề ngang) — màn này tự đệm 16px */
body.quay-day .bc-man{padding:var(--k3) var(--k4) 0}
/* Thanh đáy từ 3 lên 5 tab (24/09): chữ tab phải xuống dòng trong cột của nó — «Tất cả bộ ảnh» ở khổ 390 rộng hơn
   cột 78px và tràn đè sang cột bên (đo bằng getBoundingClientRect trong thu-bao-cao-giao-anh-chrome ①) */
body.quay-day #tab button{min-width:0}
body.quay-day #tab button .tab-chu{max-width:100%; padding:0 2px; white-space:normal; text-align:center; line-height:1.2; overflow-wrap:anywhere}


/* ══ 📞 BÁO CÁO SALE — bốn loại thẻ mới (26/09 · kế hoạch chiến dịch · L5 · luật 08) ══
   Dùng ở CẢ tab admin «📞 Báo Cáo Sale» (quan-tri.js) lẫn khối «📞 Báo cáo sale của tôi» (tab «📊 Đo lường» của sale) — nên
   KHÔNG lồng dưới `.bc-man`. Chỉ biến màu/khoảng cách/cỡ sẵn có trong cong.css; mọi cặp nền/chữ ghi tỉ lệ (≥ 4,5:1). Chữ ≥ 12px,
   đậm chỉ tên thẻ và tên ô sale (tiêu đề). Nút đứng trên thẻ trắng dùng nền `--nen-3` (khác mặt phẳng — ⑤). */
.bcs-the > *{max-width:100%}
.bcs-the .db-ten{font-size:var(--cx-nho)}
.bcs-dong{margin:0; font-size:12.5px; line-height:1.45; color:var(--chu); font-weight:400}                  /* 11.11:1 trên --nen */
.bcs-phu{color:var(--chu-phu)}                                                                              /* ≥ 4.51:1 */
.bcs-bang td,.bcs-bang th{font-size:12px}
/* cột nhãn không bị bóp còn 1–2 chữ/dòng ở 390px: bề rộng tối thiểu 3 × --k8 (144px); bảng rộng hơn thẻ thì cuộn TRONG `.bc-cuon` */
.bcs-bang th:first-child,.bcs-bang td:first-child{min-width:calc(var(--k8) * 3)}
/* dòng tóm tắt — mức theo cặp «gấp · thường · tốt» sẵn có */
.bcs-tt{cursor:default; gap:6px}
.bcs-tt-do{background:var(--loi-100); border-color:var(--loi-300); color:var(--loi-700)}                  /* 4.57:1 */
.bcs-tt-vang{background:var(--vang-100); border-color:var(--vang-300); color:var(--vang-800)}             /* 6.02:1 */
.bcs-tt-xanh{background:var(--la-100); border-color:var(--la-300); color:var(--la-800)}                  /* 4.98:1 */
.bcs-tt-cau{margin:0; font-size:var(--cx); line-height:1.5; font-weight:400}
.bcs-tt-muc{font-weight:700}
.bcs-viec{margin:0; padding-left:1.3em; font-size:12.5px; line-height:1.5; font-weight:400}
/* dải năng lực: ô trắng trên thẻ trắng → viền, không nền (không phải nút) */
.bcs-nl{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--k2); width:100%}
.bcs-nl-o{display:flex; flex-direction:column; gap:4px; padding:var(--k2) var(--k3); border:1px solid var(--vien); border-radius:var(--bo-o); min-width:0}
.bcs-nl-dau{display:flex; align-items:center; gap:var(--k2); flex-wrap:wrap}
.bcs-nl-ten{font-size:var(--cx); overflow-wrap:anywhere}
.bcs-xl{display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--bo-tron); font-size:12px; font-weight:400}
.bcs-xl-A{background:var(--la-100); color:var(--la-800)}                                                  /* 4.98:1 */
.bcs-xl-B{background:var(--chinh-100); color:var(--chinh-800)}                                            /* 4.52:1 */
.bcs-xl-C{background:var(--vang-100); color:var(--vang-800)}                                              /* 6.02:1 */
.bcs-xl-D{background:var(--loi-100); color:var(--loi-700)}                                                /* 4.57:1 */
.bcs-tap-su{background:var(--tim-100); color:var(--tim-800)}                                              /* 4.95:1 */
.bcs-chua{background:var(--nen-3); color:var(--chu-phu)}                                                  /* ≥ 4.51:1 */
/* tốc độ: thanh bốn khúc (không chữ trên khúc — số nằm ở chú giải) */
.bcs-thanh{display:flex; width:100%; height:14px; border-radius:var(--bo-tron); overflow:hidden; background:var(--nen-3)}
.bcs-thanh > span{display:block; height:100%}
.bcs-k-kip{background:var(--la-500)} .bcs-k-cham{background:var(--vang-500)} .bcs-k-sot{background:var(--loi-500)} .bcs-k-dem{background:var(--tim-300)}
.bcs-cg-hang{display:flex; flex-wrap:wrap; gap:var(--k2); width:100%}
.bcs-cg{display:inline-flex; align-items:center; gap:6px; min-height:var(--cao-nut-nho); padding:0 var(--k3); border:1px solid var(--vien-dam);
  border-radius:var(--bo-o); background:var(--nen-3); color:var(--chu); font:inherit; font-size:12.5px; font-weight:400; cursor:pointer}   /* 11.11:1 */
.bcs-cg[aria-expanded="true"]{border-color:var(--chinh-500); background:var(--chinh-100); color:var(--chinh-800)}   /* 4.52:1 */
.bcs-cg:focus-visible{outline:2px solid var(--chinh-500); outline-offset:2px}
.bcs-o{display:inline-block; width:12px; height:12px; border-radius:3px}
/* bảng điểm: tiêu đề │ «?» */
.bcs-dau{display:flex; align-items:center; gap:var(--k2); width:100%}
.bcs-dau > .db-ten{flex:1 1 auto; min-width:0}
.bcs-diem td:last-child{text-align:center}
@media (max-width:640px){
  .bcs-cg{min-height:var(--cao-bam)}
  .bcs-nl{grid-template-columns:minmax(0,1fr)}
}

/* 12/10 · VBPM+BK8C — ô tìm bộ đã hoàn thiện theo tháng (lọc tại chỗ) */
.bc-tim{display:flex; align-items:center; gap:var(--k2)}
.bc-tim-o{flex:1; min-width:0; min-height:var(--cao-nut); padding:0 var(--k3); font:inherit; font-size:var(--cx); border:1px solid var(--vien, #cbd5e1); border-radius:999px; background:var(--nen-the, #fff); color:inherit}
.bc-tim-o:focus-visible{outline:2px solid var(--chinh-500); outline-offset:2px}
.bc-tim-xoa{min-width:var(--cao-nut); min-height:var(--cao-nut); border:0; border-radius:999px; background:transparent; font:inherit; cursor:pointer; color:inherit}
.bc-tim-xoa[hidden],.bc-tim-dem[hidden],.bc-tim-khong[hidden]{display:none}
.bc-tim-dem{margin:0; font-size:12px; color:var(--chu-phu)}
.bc-ks .ks-hang[hidden],.bc-gap-thang[hidden]{display:none}
@media (max-width:640px){ .bc-tim-o,.bc-tim-xoa{min-height:var(--cao-bam)} }