/* =============================================================================
   kq-bo-cuc-chung.css — BỘ BỐ CỤC CHUNG (kq-bo-cuc-chung.js): lưới 12 rãnh khi người dùng đã tuỳ biến, công cụ từng ô khi đang sửa.
   ============================================================================= */
.kq-bc-cho { opacity: 0; }
.kq-bc-tuy {
  display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; grid-template-rows: none !important;
  grid-auto-rows: auto !important; grid-auto-flow: row dense;
  gap: var(--kq-khe, 8px); align-content: start;
  /* Trang «vừa khung» giữ chiều cao lưới theo khung: bố cục tuỳ biến cao hơn thì lưới TỰ CUỘN — không ô nào bị cắt (QD-054). */
  overflow-x: hidden !important; overflow-y: auto !important; min-height: 0;
}
.kq-bc-tuy > :not([data-kq-o]) { grid-column: 1 / -1; }
.kq-bc-tuy > template, .kq-bc-tuy > [hidden] { display: none !important; }
/* «Cao» h = chiều cao TỐI THIỂU (h × 88px + khe); hàng lưới luôn giãn theo nội dung nên không ô nào tràn hay bị cắt. */
/* Ô có chiều cao CỐ ĐỊNH theo bậc (vùng biểu đồ co giãn trong ô cần chiều cao xác định); nội dung tràn thì kiemTran gắn .kq-bc-tu-cao → cao theo nội dung. */
.kq-bc-tuy > [data-kq-o] { min-width: 0; grid-column: span 4; grid-row: auto !important; max-height: none !important; min-height: 184px; }
.kq-bc-w1 { grid-column: span 1 !important; } .kq-bc-w2 { grid-column: span 2 !important; } .kq-bc-w3 { grid-column: span 3 !important; }
.kq-bc-w4 { grid-column: span 4 !important; } .kq-bc-w5 { grid-column: span 5 !important; } .kq-bc-w6 { grid-column: span 6 !important; }
.kq-bc-w7 { grid-column: span 7 !important; } .kq-bc-w8 { grid-column: span 8 !important; } .kq-bc-w9 { grid-column: span 9 !important; }
.kq-bc-w10 { grid-column: span 10 !important; } .kq-bc-w11 { grid-column: span 11 !important; } .kq-bc-w12 { grid-column: span 12 !important; }
.kq-bc-tuy > .kq-bc-tu-cao { align-self: start; }
.kq-bc-h1 { height: calc(88px + var(--kq-bc-them, 0px)); min-height: calc(88px + var(--kq-bc-them, 0px)) !important; } .kq-bc-h2 { height: calc(184px + var(--kq-bc-them, 0px)); min-height: calc(184px + var(--kq-bc-them, 0px)) !important; } .kq-bc-h3 { height: calc(280px + var(--kq-bc-them, 0px)); min-height: calc(280px + var(--kq-bc-them, 0px)) !important; }
.kq-bc-h4 { height: calc(376px + var(--kq-bc-them, 0px)); min-height: calc(376px + var(--kq-bc-them, 0px)) !important; } .kq-bc-h5 { height: calc(472px + var(--kq-bc-them, 0px)); min-height: calc(472px + var(--kq-bc-them, 0px)) !important; } .kq-bc-h6 { height: calc(568px + var(--kq-bc-them, 0px)); min-height: calc(568px + var(--kq-bc-them, 0px)) !important; }
@media (max-width: 760px) { .kq-bc-tuy > [data-kq-o] { grid-column: 1 / -1 !important; } }

/* nội dung gốc bị thay bởi kiểu khác */
.kq-bc-giau { display: none !important; }
[data-kq-o].kq-bc-co-bd { display: flex; flex-direction: column; }
.kq-bc-bd { flex: 1 1 auto; min-height: 160px; display: flex; flex-direction: column; min-width: 0; margin-bottom: 18px; }
.kq-bc-ve { flex: 1 1 auto; min-height: 160px; width: 100%; }
.kq-bc-bang-boc { overflow: auto; max-height: 100%; }
.kq-bc-bang { width: 100%; font-size: var(--kq-co-1, 12px); }
.kq-bc-bang th[scope="row"] { text-align: left; font-weight: 500; }

/* nút «Bố cục» khi trang không có thanh tiêu đề */
.kq-bc-dau { display: flex; justify-content: flex-end; margin: 0 0 var(--kq-k2, 8px); }
[data-kq-bo-cuc-nut][aria-pressed="true"] { background: var(--kq-chinh-nhat); border-color: var(--kq-chinh); color: var(--kq-chinh-dam); }

/* thanh sửa */
.kq-bc-thanh {
  display: flex; align-items: center; gap: var(--kq-k2, 8px); flex-wrap: wrap; padding: 6px 10px; margin: 0 0 var(--kq-k2, 8px);
  background: var(--kq-nen-noi); border: 1px solid var(--kq-chinh); border-radius: var(--kq-bo-1, 6px); box-shadow: var(--kq-bong-noi);
  position: sticky; top: 0; z-index: calc(var(--kq-z-menu) - 1);
}
.kq-bc-thanh-td { color: var(--kq-chinh-dam); }
.kq-bc-thanh-goi { display: inline-flex; color: var(--kq-chu-mo); cursor: help; }
.kq-bc-thanh-day { flex: 1 1 auto; }

/* từng ô khi sửa */
/* Khi sửa: thanh công cụ chiếm 36px đầu ô — cộng đúng 36px vào chiều cao để phần nội dung y như lúc xem (ô tự ẩn biểu đồ theo chiều cao). */
.kq-bc-sua { --kq-bc-them: 36px; }
.kq-bc-sua > [data-kq-o] { position: relative; outline: 2px dashed var(--kq-vien-dam); outline-offset: -2px; padding-top: 36px !important; }
.kq-bc-sua > [data-kq-o].kq-bc-da-an { opacity: .45; }
.kq-bc-sua > [data-kq-o].kq-bc-dang-keo { opacity: .5; outline-color: var(--kq-chinh); }
.kq-bc-cc {
  position: absolute; top: 3px; left: 3px; right: 3px; z-index: 6; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 2px; padding: 2px;
  background: var(--kq-nen-noi); border: 1px solid var(--kq-vien); border-radius: var(--kq-bo-1, 6px); box-shadow: var(--kq-bong-noi);
}
.kq-bc-nut {
  min-width: 26px; height: 26px; padding: 0 4px; border: 0; border-radius: 4px; background: transparent; color: var(--kq-chu-2);
  cursor: pointer; font-size: 14px; line-height: 1;
}
.kq-bc-nut:hover, .kq-bc-nut:focus-visible { background: var(--kq-dong-di); color: var(--kq-chinh); }
.kq-bc-keo { cursor: grab; font-size: 16px; }
.kq-bc-kieu { height: 26px; font-size: 12px; border: 1px solid var(--kq-vien); border-radius: 4px; background: var(--kq-nen-o, transparent); color: var(--kq-chu); }
.kq-bc-co { font-size: 11px; color: var(--kq-chu-mo); padding: 0 4px; font-variant-numeric: tabular-nums; }
@media print { .kq-bc-thanh, .kq-bc-cc, [data-kq-bo-cuc-nut] { display: none !important; } }
@container (max-width: 300px) {
  .kq-bc-cc { justify-content: flex-start; }
  .kq-bc-co { display: none; }
  .kq-bc-nut { min-width: 22px; padding: 0 2px; }
}

/* nút kiểu (hình thu nhỏ + tên) và bảng chọn */
.kq-bc-kieu-nut {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px; border: 1px solid var(--kq-vien); border-radius: 4px;
  background: var(--kq-nen-o, transparent); color: var(--kq-chu); font-size: 12px; cursor: pointer; white-space: nowrap;
}
.kq-bc-kieu-nut:hover, .kq-bc-kieu-nut[aria-expanded="true"] { border-color: var(--kq-chinh); color: var(--kq-chinh); }
.kq-bc-kieu-nut .kq-bc-hinh { width: 24px; height: 16px; color: var(--kq-chinh); }
.kq-bc-mui { font-size: 10px; color: var(--kq-chu-mo); }
.kq-bc-chon {
  position: fixed; z-index: calc(var(--kq-z-goi-y) + 10); display: grid; grid-template-columns: repeat(4, 76px); gap: 4px; padding: 6px;
  background: var(--kq-nen-noi); border: 1px solid var(--kq-vien); border-radius: var(--kq-bo-1, 6px); box-shadow: var(--kq-bong-noi);
}
.kq-bc-chon-mot {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px; border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: var(--kq-chu-2); font-size: 12px; cursor: pointer;
}
.kq-bc-chon-mot .kq-bc-hinh { width: 48px; height: 32px; color: var(--kq-chinh); }
.kq-bc-chon-mot:hover, .kq-bc-chon-mot:focus-visible { background: var(--kq-dong-di); border-color: var(--kq-vien); outline: none; }
.kq-bc-chon-mot[aria-selected="true"] { border-color: var(--kq-chinh); background: var(--kq-chinh-nhat); color: var(--kq-chinh-dam); font-weight: 600; }

/* góc kéo đổi kích thước */
.kq-bc-goc {
  position: absolute; right: 2px; bottom: 2px; z-index: 6; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 3px;
  background: linear-gradient(135deg, transparent 50%, var(--kq-chinh) 50%); cursor: nwse-resize; opacity: .75; touch-action: none;
}
.kq-bc-goc:hover, .kq-bc-goc:focus-visible { opacity: 1; outline: 2px solid var(--kq-chinh); outline-offset: 1px; }
.kq-bc-sua > [data-kq-o].kq-bc-dang-co { outline-color: var(--kq-chinh); outline-style: solid; }
@media print { .kq-bc-goc, .kq-bc-chon { display: none !important; } }
.kq-bc-sua > [data-kq-o].kq-bc-dang-co::after {
  content: attr(data-kq-co); position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); z-index: 7; pointer-events: none;
  padding: 6px 12px; border-radius: 999px; background: var(--kq-chinh); color: var(--kq-chinh-chu, #fff); font-weight: 600; white-space: nowrap;
}

/* nhiều vùng cùng một bố cục (bảng HĐQT 22/10/2026): ô chọn vùng, vùng trống khi sửa là chỗ thả */
.kq-bc-vung { height: 26px; max-width: 112px; text-overflow: ellipsis; font-size: 12px; border: 1px solid var(--kq-vien); border-radius: 4px; background: var(--kq-nen-o, transparent); color: var(--kq-chu); }
.kq-bc-sua.kq-bc-vung-rong { min-height: 96px; outline: 2px dashed var(--kq-vien-dam); outline-offset: -4px; }
.kq-bc-nguon { font-size: 11px; font-weight: 600; letter-spacing: .02em; }
@container (max-width: 300px) { .kq-bc-vung { max-width: 84px; } }

/* hộp «Nguồn dữ liệu» và «Thêm ô» */
.kq-bc-hop {
  width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--kq-vien); border-radius: var(--kq-bo-2, 8px);
  background: var(--kq-nen-noi); color: var(--kq-chu); box-shadow: var(--kq-bong-noi); display: flex; flex-direction: column;
}
.kq-bc-hop:not([open]) { display: none; }
.kq-bc-hop::backdrop { background: rgb(0 0 0 / .35); }
.kq-bc-hop-dau { display: flex; align-items: center; gap: var(--kq-k2, 8px); padding: 10px 14px; border-bottom: 1px solid var(--kq-vien); }
.kq-bc-hop-dau h2 { flex: 1 1 auto; margin: 0; font-size: var(--kq-co-4, 16px); }
.kq-bc-hop-than { flex: 1 1 auto; overflow: auto; padding: 12px 14px 16px; min-height: 120px; }
.kq-bc-hop-than[aria-busy="true"] { display: grid; place-items: center; }
.kq-bc-them-loc { display: flex; gap: var(--kq-k2, 8px); margin-bottom: var(--kq-k2, 8px); }
.kq-bc-them-loc input { flex: 1 1 auto; }
.kq-bc-them-ds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kq-bc-them-mot {
  width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 0 8px; text-align: left; padding: 6px 8px; border: 1px solid var(--kq-vien);
  border-radius: 4px; background: transparent; color: var(--kq-chu); cursor: pointer;
}
.kq-bc-them-mot b { color: var(--kq-chinh-dam); font-variant-numeric: tabular-nums; }
.kq-bc-them-mot small { grid-column: 2; color: var(--kq-chu-mo); }
.kq-bc-them-mot:hover, .kq-bc-them-mot:focus-visible { border-color: var(--kq-chinh); background: var(--kq-chinh-nhat); outline: none; }