/* Vibary UI — man_con.css (chủ: FE biểu đồ + 6 màn con, vòng 2 25/10). Nối vào index.html SAU den.css.
   Các tệp man/*.js tự nạp tệp này nếu index.html chưa có (link[data-man-con]). Chỉ sửa trong .tq (màn con). */

/* #42: bỏ viền kép trên ô KPI (giữ đèn 10px cạnh nhãn) */
.tq .kpi::before, .tq .kpi.kpi-co-den::before { display: none; }
.tq .kpi { border-top: 1px solid var(--vien, #E3E9F2); }

/* #N09 #N08: chú thích KPI 1 dòng ≤ 8 từ, nghiêng, dưới số */
.tq .kpi-nhan .chu-thich { display: none; }
.tq .kpi-cuoi, .tq .kpi-cuoi .chu-thich { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.tq .kpi-giua { display: flex; align-items: center; flex-wrap: wrap; gap: var(--k4, 4px) var(--k8, 8px); }
.tq .kpi-dau-than { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; line-height: 22px; font-weight: 700; cursor: help; }

/* #41 #43: không thanh tiến độ giả 100% (JS đã gỡ); thanh tỷ lệ thật 1 màu */
.tq .kpi-thanh > span { background: var(--xanh, #1565D8); }
.tq .kpi-chua-tin .kpi-thanh > span { background: var(--vang, #DC6803); }

/* #N12: bỏ gradient loang ở dòng "Cần khắc phục", chỉ viền trái */
.tq .dkp-dong, .tq .dkp-do, .tq .dkp-vang, .tq .dkp-xam, .tq .dkp-xanh { background: var(--the, #fff); }

/* #N04 #N05 #N07: bảng — cột mã/STT/ngày/trạng thái không gãy chữ (width 1% = vừa nội dung); cột tiêu đề 1 dòng + "…"; cột dài xuống dòng theo từ; số canh phải */
.tq table.bang th.so, .tq table.bang td.so { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tq table.bang th.o-tieu-de { width: auto; }
@media (min-width: 641px) {
  .tq table.bang th.o-ma, .tq table.bang td.o-ma { white-space: nowrap; overflow-wrap: normal; width: 1%; }
  .tq table.bang td.o-tieu-de { display: table-cell; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; min-width: 110px; }
  .tq table.bang td.o-dai { white-space: normal; overflow-wrap: break-word; }
  .tq table.bang td.so { overflow: hidden; }
  .tq table.bang .o-thanh .thanh { max-width: 40px; }
}
/* #N05: bảng ≥ 5 cột trong ô hẹp (span 5/12): ẩn cột thứ 5 trở đi dưới 1600px (vẫn có trong CSV + thẻ mobile) */
@media (min-width: 641px) and (max-width: 1599px) { .tq .tq-bang table.bang .o-phu { display: none; } }
@media (max-width: 640px) {
  .tq table.bang td.o-ma::before, .tq table.bang td.o-dai::before { white-space: nowrap; }
}

/* #66: khối "Số nào tin được" dạng bảng 2 cột tên · chip */
.tq .tin-duoc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--k4, 4px) var(--k8, 8px); align-items: center; margin: 0; }
.tq .tin-duoc dt { font-weight: 700; color: var(--chu, #0B1B33); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.tq .tin-duoc dd { margin: 0; text-align: right; }
.tq .tin-duoc dd .nhan { cursor: help; }

/* #N19 #70: khung biểu đồ chiều cao cố định → chặn vòng lặp Chart.js tự phình theo khối (he_thong 2.600px); mobile 280px */
.tq .khoi-bd .khoi-than { display: flex; flex-direction: column; min-height: 0; }
.tq .khoi-bd .bd-khung { flex: none; height: 340px; min-height: 0; }
@media (min-width: 1024px) and (max-height: 820px) { .tq .khoi-bd .bd-khung { height: 280px; } }
@media (max-width: 640px) {
  .tq .khoi-bd .bd-khung { height: 280px; }
  .tq.tq-dkp > .tq-bd1 { height: auto; min-height: 0; }
  .tq .kpi-giua { gap: var(--k4, 4px); }
}