/* =============================================================================
   CHIA VÙNG — bố cục nhiều vùng dùng chung (ADR-0110). Hành vi ở js/chia-vung.js.

   Người dùng (28/09, kèm ảnh «Bộ báo cáo chuẩn»):
     1. khoảng cách giữa các vùng chỉ 2–4px, không để khoảng trống rộng giữa các khung;
     2. thanh kéo chia vùng giữa hai vùng trái–phải / trên–dưới (chuột, chạm, bàn phím), nhớ theo trang;
     3. vùng trái, vùng phải cuộn TRONG vùng — cả trang không cuộn; thanh điều hướng, hàng tiêu đề/lọc, chân trang đứng
        yên; chiều cao vùng = khung nhìn trừ phần cố định.

   Ba tầng:
     · body.bo-cuc-vung (ViewData["BoCucVung"] = true): <main> thôi cuộn, xếp cột; con của nó giữ cao tự nhiên, riêng
       .cv-khung (hoặc lớp bọc .cv-lap trên đường tới nó) ăn phần còn lại.
     · .cv-khung: lưới hai/ba rãnh + rãnh 4px cho thanh kéo. Khe giữa hai vùng = đúng bề rộng thanh (4px), không thêm gap.
       Biến: --cv-1 / --cv-2 (cỡ đang đặt, JS ghi khi người dùng kéo), --cv-mac-dinh-1 / --cv-mac-dinh-2 (cỡ mặc định của
       trang), --cv-san-1 / --cv-san-2 / --cv-san-3 (sàn px của vùng đầu / vùng giữa-co-giãn / vùng cuối).
         .cv-khung          hai vùng, thanh giữ vùng TRÁI (danh mục + xem)
         .cv-khung.cv-phai  hai vùng, thanh giữ vùng PHẢI (nội dung + khối bên)
         .cv-khung.cv-ba    ba vùng, thanh 1 giữ vùng trái, thanh 2 giữ vùng phải (trình vẽ mẫu in)
         .cv-khung.cv-doc   hai vùng trên–dưới, thanh giữ vùng TRÊN (danh sách + chi tiết)
     · .cv-vung: tự cuộn (overflow:auto), một thanh cuộn mỗi vùng (luật 17). Vùng chứa lưới lấp đầy thì lưới cuộn, vùng
       không cuộn thêm (chiều cao lưới = vùng).
   Chế độ chia chỉ bật ở màn > 900 rộng và ≥ 600 cao, và chỉ trên màn hình. Màn hẹp, điện thoại: vùng xếp chồng, bỏ thanh,
   cả trang cuộn như thường. Khi in: mọi vùng trả về chiều cao tự nhiên — biểu mẫu báo cáo không bị cắt ở mép vùng cuộn.
   Màu chỉ từ biến (luật 15). Không :has(), không @container (Firefox ESR 102).
   ============================================================================= */

.cv-khung { --cv-thanh: 4px; min-width: 0; }
.cv-khung > .cv-vung { min-width: 0; margin: 0; }

/* ---- Thanh kéo ---------------------------------------------------------------------------------------------------------
   Rãnh lưới 4px (đúng khe giữa hai vùng); vùng bắt chuột/chạm nới ra 5px mỗi bên bằng ::before (phần tử giả thuộc chính thanh
   nên vẫn nhận sự kiện; không dùng lề âm — thanh đè lên vùng là «chồng nhau» với CHONG_NHAU), vạch 2px giữa rãnh vẽ bằng ::after.
   Thanh không có nền, viền hay bóng, không có chữ — không phải một «khối». */
.cv-thanh {
  position: relative;
  z-index: 3;
  display: none;
  touch-action: none;
  outline: none;
  cursor: col-resize;
}
.cv-thanh::before { content: ""; position: absolute; top: 0; bottom: 0; left: -5px; right: -5px; }
.cv-thanh::after {
  content: "";
  position: absolute;
  top: var(--kc-2);
  bottom: var(--kc-2);
  left: calc(50% - 1px);
  width: 2px;
  border-radius: 2px;
  background: var(--vien);
  transition: background-color .12s ease;
}
.cv-doc > .cv-thanh { cursor: row-resize; }
.cv-doc > .cv-thanh::before { top: -5px; bottom: -5px; left: 0; right: 0; }
.cv-doc > .cv-thanh::after { top: calc(50% - 1px); bottom: auto; left: var(--kc-2); right: var(--kc-2); width: auto; height: 2px; }
.cv-thanh:hover::after,
.cv-thanh.cv-dang-keo-thanh::after { background: var(--xanh); }
.cv-thanh:focus-visible::after { background: var(--xanh); box-shadow: 0 0 0 2px var(--xanh-vien); }
body.cv-dang-keo, body.cv-dang-keo * { cursor: col-resize !important; user-select: none; }
body.cv-dang-keo-doc, body.cv-dang-keo-doc * { cursor: row-resize !important; user-select: none; }
/* !important ở hai dòng trên: lúc đang kéo, con trỏ phải giữ hình mũi tên kéo dù lướt qua ô nhập/liên kết có cursor riêng. */
@media (prefers-reduced-motion: reduce) { .cv-thanh::after { transition: none; } }

/* ---- Màn hẹp / thấp (mặc định): xếp chồng, bỏ thanh, cuộn cả trang ------------------------------------------------ */
.cv-khung { display: flex; flex-direction: column; gap: var(--kc-khoi); }
.cv-khung.cv-hep-dao > .cv-vung:last-child { order: -1; }

/* ---- Vùng chờ chọn (GD2-07, nghiệm thu 29/09) --------------------------------------------------------------------------
   Vùng chi tiết của khung danh sách | chi tiết khi CHƯA chọn dòng nào không có gì để hiện — trước đây vẫn giữ 55% khung với
   một dòng «Chọn một … trong danh sách» trơ trọi, danh sách chỉ còn 3–8 dòng, đáy trang trống 115–500px. Nay vùng khai
   data-cv-an-khi-trong mà rỗng (không có phần tử con) được ẩn cùng thanh kéo, vùng còn lại ăn trọn khung. Máy chủ vẽ sẵn lớp
   .cv-mot / .cv-vung-trong (không nhảy bố cục lúc tải); js/chia-vung.js cập nhật lại sau mỗi lần vùng AJAX vẽ lại. */
.cv-khung.cv-mot > .cv-thanh,
.cv-khung.cv-mot > .cv-vung.cv-vung-trong { display: none; }

/* ---- Chế độ chia ------------------------------------------------------------------------------------------------------ */
@media screen and (min-width: 901px) and (min-height: 600px) {
  .cv-khung {
    display: grid;
    gap: 0;
    align-items: stretch;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns:
      clamp(var(--cv-san-1, 160px), var(--cv-1, var(--cv-mac-dinh-1, 25%)), calc(100% - var(--cv-san-2, 240px) - var(--cv-thanh)))
      var(--cv-thanh) minmax(0, 1fr);
  }
  .cv-khung.cv-phai {
    grid-template-columns:
      minmax(0, 1fr) var(--cv-thanh)
      clamp(var(--cv-san-3, 160px), var(--cv-1, var(--cv-mac-dinh-1, 30%)), calc(100% - var(--cv-san-2, 240px) - var(--cv-thanh)));
  }
  .cv-khung.cv-ba {
    grid-template-columns:
      clamp(var(--cv-san-1, 160px), var(--cv-1, var(--cv-mac-dinh-1, 18%)), 40%) var(--cv-thanh)
      minmax(var(--cv-san-2, 240px), 1fr) var(--cv-thanh)
      clamp(var(--cv-san-3, 160px), var(--cv-2, var(--cv-mac-dinh-2, 22%)), 40%);
  }
  .cv-khung.cv-doc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
      clamp(var(--cv-san-1, 120px), var(--cv-1, var(--cv-mac-dinh-1, 45%)), calc(100% - var(--cv-san-2, 160px) - var(--cv-thanh)))
      var(--cv-thanh) minmax(0, 1fr);
  }
  /* Khung trên–dưới ở cỡ MẶC ĐỊNH (người dùng chưa kéo — js/chia-vung.js gắn .cv-da-dat khi có cỡ đã kéo/đã nhớ): vùng dưới
     (chi tiết) cao theo nội dung, tối đa phần còn lại sau cỡ mặc định của vùng trên; vùng trên (danh sách) ăn phần còn lại.
     Chi tiết ngắn («chưa khai đầu mối») không còn giữ nửa khung trống trong khi danh sách phải cuộn (GD2-07, luật đo
     VUNG_KHONG_LAP_DAY). */
  .cv-khung.cv-doc:not(.cv-da-dat) {
    grid-template-rows:
      minmax(var(--cv-san-1, 120px), 1fr) var(--cv-thanh) fit-content(calc(100% - var(--cv-mac-dinh-1, 45%) - var(--cv-thanh)));
  }
  /* Sàn của vùng dưới giữ như khi đã kéo (clamp phía dưới): danh sách không vượt trần mà thanh kéo cho phép, kéo thanh lần
     đầu không làm vùng nhảy. */
  .cv-khung.cv-doc:not(.cv-da-dat) > .cv-vung ~ .cv-vung { min-height: var(--cv-san-2, 160px); }
  /* Khung trên–dưới mà vùng TRÊN là vùng ngắn (mẫu nhập ở Quản trị đơn vị): khai .cv-tren-vua — vùng trên cao theo nội dung,
     vùng dưới (danh sách) ăn phần còn lại. */
  .cv-khung.cv-doc.cv-tren-vua:not(.cv-da-dat) {
    grid-template-rows:
      fit-content(calc(100% - var(--cv-san-2, 160px) - var(--cv-thanh))) var(--cv-thanh) minmax(var(--cv-san-2, 160px), 1fr);
  }
  .cv-khung.cv-doc.cv-tren-vua:not(.cv-da-dat) > .cv-vung ~ .cv-vung { min-height: 0; }
  .cv-khung.cv-doc.cv-tren-vua:not(.cv-da-dat) > .cv-vung:first-child { min-height: var(--cv-san-1, 120px); }
  .cv-khung.cv-hep-dao > .cv-vung:last-child { order: 0; }
  /* Một vùng còn hiện (vùng kia chờ chọn): vùng đó ăn trọn khung. */
  .cv-khung.cv-mot, .cv-khung.cv-doc.cv-mot { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .cv-khung.cv-mot > .cv-thanh, .cv-khung.cv-mot > .cv-vung.cv-vung-trong { display: none; }
  /* position: relative — nhãn ẩn cho trình đọc màn hình (.an-nhin, absolute) bám vùng cuộn của chính vùng, không tràn ra tài
     liệu kéo tài liệu cao hơn khung nhìn (bài học trang Danh mục, bộ đo «tài liệu cao hơn khung nhìn»). */
  .cv-khung > .cv-vung { position: relative; min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .cv-khung > .cv-thanh { display: block; }
  /* Thẻ làm vùng: dải tiêu đề thẻ đứng yên khi cuộn nội dung vùng. top âm đúng bằng đệm trên của thẻ: Chrome/Firefox tính
     mốc dính theo mép TRONG đệm của khung cuộn, còn dải tiêu đề (lề âm) nằm sát mép viền — top:0 đẩy nó xuống một khoảng. */
  .cv-khung > .cv-vung.the > .the-dau:first-child { position: sticky; top: calc(-1 * var(--kc-4)); z-index: 2; }
  /* Vùng xếp cột (.cv-vung-cot): dải lọc/tiêu đề của vùng đứng yên, chỉ khối .cv-cuon cuộn (biểu mẫu báo cáo dưới thanh
     kỳ/phạm vi). Vùng không cuộn thêm — một thanh cuộn (luật 17). */
  .cv-khung > .cv-vung.cv-vung-cot { display: flex; flex-direction: column; overflow: hidden; }
  .cv-khung > .cv-vung.cv-vung-cot > * { flex: none; }
  .cv-khung > .cv-vung.cv-vung-cot > .cv-cuon { flex: 1 1 0; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; }
  /* Thẻ bảng làm vùng (.the-bang.cv-vung): dải tiêu đề đứng yên, khung .cuon của bảng ăn phần còn lại và là vùng cuộn duy
     nhất (bỏ trần 62vh của .cuon — trần đó dành cho bảng nằm giữa trang cuộn). */
  .cv-khung > .cv-vung.the-bang { display: flex; flex-direction: column; overflow: hidden; }
  .cv-khung > .cv-vung.the-bang > * { flex: none; }
  .cv-khung > .cv-vung.the-bang > .cuon, .cv-khung > .cv-vung.the-bang > .cv-cuon { flex: 1 1 0; min-height: 0; max-height: none; overflow: auto; }
  /* Bảng đã được bộ control nâng thành lưới (.luoi-hop do dung-control-trang.js dựng): lưới lấp phần còn lại của thẻ. */
  .cv-khung > .cv-vung.the-bang > .luoi-hop { flex: 1 1 0; min-height: 0; height: auto; display: flex; flex-direction: column; margin: 0; }
  .cv-khung > .cv-vung.the-bang > .luoi-hop > .luoi-o { flex: 1 1 0; min-height: 0; margin: 0; }
  /* Vùng chứa lưới lấp đầy (.cv-vung-luoi): vùng là cột flex, thẻ lưới ăn phần còn lại, lưới cuộn — vùng không cuộn thêm. */
  .cv-khung > .cv-vung.cv-vung-luoi { display: flex; flex-direction: column; overflow: hidden; }
  .cv-khung > .cv-vung.cv-vung-luoi > * { flex: none; }
  .cv-khung > .cv-vung.cv-vung-luoi > .the-vua { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; margin: 0; }
  .cv-khung > .cv-vung.cv-vung-luoi > .the-vua > * { flex: none; }
  .cv-khung > .cv-vung.cv-vung-luoi > .the-vua > .luoi-hop { flex: 1 1 0; min-height: 0; height: auto; display: flex; flex-direction: column; margin: 0; }
  .cv-khung > .cv-vung.cv-vung-luoi > .the-vua > .luoi-hop > .luoi-o { flex: 1 1 0; min-height: 0; margin: 0; }

  /* Tầng trang: <main> thôi cuộn; khung chia (hoặc lớp bọc .cv-lap trên đường tới nó) lấp phần còn lại. */
  /* overflow-y:auto (không hidden): khung chia có sàn chiều cao; khung nhìn quá thấp so với phần cố định phía trên thì vùng
     nội dung cuộn làm đường lùi thay vì cắt mất khối — ở 1440×900 trở lên không bao giờ tới mức đó (CUON_TRANG_NHIEU_VUNG). */
  body.bo-cuc-vung main.noi-dung { overflow-y: auto; }
  body.bo-cuc-vung main.noi-dung > * { flex: none; }
  body.bo-cuc-vung .cv-lap { display: flex; flex-direction: column; gap: var(--kc-khoi); }
  body.bo-cuc-vung .cv-lap > * { flex: none; }
  /* Sàn chiều cao (luật trên cùng độ đặc hiệu với «> *» nên đứng SAU): khung chia và lớp bọc ăn phần còn lại nhưng không thấp
     hơn sàn — thấp hơn thì <main> cuộn (đường lùi), không bóp vùng về 0. */
  body.bo-cuc-vung main.noi-dung > .cv-khung,
  body.bo-cuc-vung main.noi-dung > .cv-lap,
  body.bo-cuc-vung .cv-lap > .cv-khung,
  body.bo-cuc-vung .cv-lap > .cv-lap { flex: 1 1 0; min-height: var(--cv-cao-toi-thieu, 320px); }
}

/* ---- In: vùng trả về chiều cao tự nhiên, không thanh, không cuộn ------------------------------------------------------ */
@media print {
  .cv-khung { display: block; }
  .cv-khung > .cv-vung, .cv-khung .cv-cuon { overflow: visible; height: auto; max-height: none; }
  .cv-thanh { display: none; }
  body.bo-cuc-vung main.noi-dung { overflow: visible; }
}