/* =============================================================================
   LUẬT «VỪA KHUNG» — trang danh sách / trang làm việc.

   Người dùng (22/09): «k để vùng trống, phải fit cả width và height — nhưng cũng k được sinh thanh
   cuộn trang», «k sinh thanh cuộn trang nhé, cuộn ở vùng nội dung thôi».

   Khung ứng dụng đã là một cột flex cao đúng màn hình (site.css: body flex cột, đầu trang và chân trang
   đứng yên, <main class="noi-dung"> cuộn). Trang khai ViewData["VuaKhung"] = true thì <body> mang lớp
   .vua-khung, và ở màn đủ lớn:
     · <main> cũng thành một cột flex và THÔI CUỘN (overflow:hidden);
     · mọi khối con của <main> giữ chiều cao tự nhiên (flex:none) — đầu mục, thông báo, thanh lọc;
     · đúng MỘT khối mang lớp .the-vua ăn hết phần còn lại (flex:1; min-height:0) và tự lo cuộn bên trong:
         - lưới (dung-control-trang.js dựng .luoi-hop > .luoi-o = Tabulator): lưới khai
           data-luoi-cao="100%" để Tabulator cao bằng ô chứa, cuộn trong vùng hàng của lưới;
         - bảng chưa được nâng cấp (tắt JavaScript) thì chính khung .cuon cuộn;
         - khối khác (khung tách hai vùng) thì tự đặt overflow ở tệp của trang.

   Dưới 1024 rộng hoặc 700 cao: KHÔNG áp gì cả — trang cuộn như thường (điện thoại, cửa sổ thấp). Lưới lúc
   đó cao theo khung nhìn (70vh, sàn 360px) để vẫn có chỗ cuộn hàng mà không dài hết trang.

   Bộ đo tools/giaodien/kiem-giao-dien.js canh luật này bằng hai phép: CUON_TRANG_THUA và
   TRONG_DUOI_NOI_DUNG (đáy khối cuối cách chân trang > 24px).
   ============================================================================= */

/* ---- Thanh công cụ của thẻ lưới -------------------------------------------------------------
   Một dải trong thẻ, ngay trên lưới, theo dáng .grid-toolbar của His_Site (như trang Danh mục): nền
   --the-dinh, đệm 8px 20px, kẻ đáy. Ô lọc không nhãn chữ (nhãn vào placeholder + nhãn ẩn cho trình đọc
   màn hình, AnNhan), bộ đếm canh phải. Thay cho cả một thẻ "LỌC DANH SÁCH" cao ~130px. */
.thanh-cong-cu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kc-2) var(--kc-3);
  margin: 0;
  padding: var(--kc-2) var(--kc-5);
  background: var(--the-dinh);
  border-bottom: 1px solid var(--vien);
}
/* Chỉ đặt phần GIÃN của hàng lọc trong thanh; bố cục bên trong (gap, align-items) là của chính .thanh-loc-hang
   (BoControlChungTests.KhongKhungChuaNaoDeBoCucHangTruong). Nhãn ô đã ẩn (AnNhan) nên canh đáy = canh giữa. */
.thanh-cong-cu > .thanh-loc-hang { flex: 1 1 auto; }
.thanh-cong-cu .thanh-loc-hang > .hang-nut { margin-top: 0; }
.thanh-cong-cu .thanh-loc-hang > .o-truong { flex: 0 1 220px; }
.thanh-cong-cu .thanh-loc-hang > .o-truong-hep { flex: 0 0 auto; }
.thanh-cong-cu .dem { margin-left: auto; font-size: var(--cc-2); color: var(--chu-mo); white-space: nowrap; }
/* Đầu thẻ lưới gộp tiêu đề + thanh công cụ vào một dải: tiêu đề đứng trước các ô lọc. */
.thanh-cong-cu > h2 { margin: 0 var(--kc-2) 0 0; font-size: var(--cc-5); font-weight: 700; white-space: nowrap; }

/* ---- Lưới trong thẻ vừa khung ở MỌI cỡ màn: ô lưới là một cột flex để Tabulator lấp đúng ô chứa. */
.the-vua > .luoi-hop { display: flex; flex-direction: column; margin: 0; }
.the-vua > .luoi-hop > .luoi-o { flex: 1 1 0; min-height: 0; margin: 0; }
/* Khối cuối cùng trong thẻ vừa khung không để lề đáy — lề đáy là "vùng trống dưới nội dung". */
.the-vua { margin-bottom: 0; }

@media (max-width: 1023.98px), (max-height: 699.98px) {
  .the-vua > .luoi-hop { height: max(360px, 70vh); }
}

@media (min-width: 1024px) and (min-height: 700px) {
  body.vua-khung .noi-dung {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Đệm đáy bằng đệm vùng nội dung (ADR-0110: 4px): đáy thẻ lưới cách chân trang đúng một nhịp, không thừa mảng trống. */
    padding-bottom: var(--kc-vung);
  }
  body.vua-khung .noi-dung > * { flex: none; }
  body.vua-khung .noi-dung > .the-vua {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  /* Khối vừa khung KHÔNG phải thẻ lưới (khung tách hai vùng của Danh mục, Nhận diện): chỉ lấp chiều cao, bố cục
     bên trong do tệp của trang lo. */
  body.vua-khung .noi-dung > .vung-vua { flex: 1 1 0; min-height: 0; }
  body.vua-khung .the-vua > * { flex: none; }
  body.vua-khung .the-vua > .luoi-hop { flex: 1 1 0; min-height: 0; height: auto; }
  /* Tắt JavaScript (bảng không được nâng cấp): chính khung .cuon cuộn, bỏ trần 62vh của .the-bang. */
  body.vua-khung .the-vua > .cuon:not([hidden]) { flex: 1 1 0; min-height: 0; max-height: none; overflow: auto; }
  /* Trạng thái rỗng (không có dòng nào) đứng đầu thẻ, không kéo giãn. */
  body.vua-khung .the-vua > .rong { flex: none; }
}