/* ==========================================================================
   KHỐI LÀ MỘT MẢNH TRANG, KHÔNG PHẢI THANH NEO MÀN HÌNH      (21/09/2026)
   ==========================================================================

   🔴 THẤY BẰNG MẮT — chủ dự án chụp màn staging 21/09: một khối 850 thả vào
   trang ra MỘT MẢNG XÁM CAO KÍN MÀN, không một chữ nào.

   Đo ra, đặt khối vào một khung dòng chảy bình thường với đủ 13 tệp CSS:

     fjelvik-06  <header class="header">        position: fixed   ← chiếm 2px
     plenrik-03  <header class="site-header">   position: sticky
     fjelvik-01  <section>                      position: relative  (đúng)

   `position: fixed` neo phần tử vào KHUNG NHÌN, không vào trang. Nên trong
   dòng chảy nó chỉ chiếm 2px, còn thân nó 91px thì nổi đè lên mọi thứ; và lớp
   phủ `::before` của nó (`inset: 0 0 -40px`, dải sẫm để chữ đọc được trên ảnh)
   trải kín màn hình. Đó chính xác là mảng xám trong ảnh chụp.

   🔴 THEME KHÔNG SAI. Trên trang gốc của theme, thanh đầu trang neo màn hình
   là ĐÚNG thiết kế. Cái sai là mang nguyên trạng thái đó vào một BỘ DỰNG, nơi
   khối phải xếp chồng nhau theo dòng chảy. Lỗi này sinh ra cùng LB-307, lúc bộ
   bóc bắt đầu cắt thêm `<header>` và `<footer>` — trước đó chỉ cắt `<section>`
   nên không khối nào neo màn hình.

   ------------------------------------------------------------------------
   🔴 VÌ SAO LÀ TỆP RIÊNG, NẠP SAU CÙNG
   ------------------------------------------------------------------------
   `khoanh-vung-nguon.css` nạp TRƯỚC các tệp theme, có chủ ý: chỗ nào theme có
   nói thì theme phải thắng. Luật ở đây thì ngược — nó là ràng buộc của BỘ
   DỰNG, phải thắng cả theme. Nên nó là tệp riêng và nạp SAU CÙNG.

   `[data-khung]` viết BA LẦN cho độ ưu tiên thành (0,3,0). Con số này KHÔNG
   phải chọn bừa — nó phải bằng luật ngặt nhất của theme đang chạm tới thẻ gốc:

       [data-khung="fjelvik"].header[data-header="photo"] { position: fixed }

   ba bộ chọn thuộc tính/lớp, tức (0,3,0). Bằng nhau thì tệp nạp sau thắng.

   🔴 Viết hai lần là KHÔNG ĐỦ, và đây là số đo chứ không phải suy đoán: bản đầu
   của tệp này viết hai lần — `plenrik-03` và `sprylo-04` về đúng dòng chảy,
   riêng `fjelvik-06` VẪN `fixed`, vì luật kia ngặt hơn một bậc. Thêm một bộ
   chọn mà theme thứ tư ngặt hơn nữa thì phép đo ở
   `.tmp-dbg/thu-khoi-trong-dong-chay.mjs` sẽ chỉ ra ngay — đo lại, đừng đoán.

   Làm vậy để KHỎI DÙNG `!important` — `!important` thắng cả thứ ta chưa lường
   tới, và thứ ta chưa lường tới thường là thứ ta cần giữ.

   🔴 Chỉ ghì THẺ GỐC của khối (chính nó mang dấu nguồn). Mọi phần tử bên trong
   giữ nguyên `position` của theme — thanh lọc dính trong trang tour, nút nổi
   trong thẻ sản phẩm… đều còn nguyên. Ghì cả cây là phá thiết kế của theme.
   ========================================================================== */

[data-khung][data-khung][data-khung] {
  position: relative;
  inset: auto;
}

/* ==========================================================================
   ĐẦU TRANG «ĐÈ LÊN ẢNH» (data-header="photo")                  (29/10/2026)
   ==========================================================================
   🔴 Anh 29/10/2026 (xem thử mẫu Fjelvik): «Menu đang bị lỗi màu xám kìa dẫn đến làm nó lỗi cả bộ khung làm sẵn».
   Luật trên ghì thẻ gốc về `relative` — đúng cho mọi khối, TRỪ đầu trang kiểu photo: thiết kế của nó là nền trong suốt nằm
   ĐÈ lên ảnh hero, kèm lớp phủ `::before` sẫm dần để chữ trắng đọc được trên ảnh. Ghì về `relative` thì nó chiếm 91px
   riêng, lớp phủ sẫm rơi xuống nền trắng thành DẢI XÁM, và hero bị đẩy xuống — cả bộ khung theme lệch theo.
   Sửa: khối bọc không chiếm chỗ (cao 0), đầu trang nằm tuyệt đối ở đỉnh, đè lên khối kế tiếp như theme gốc. Vẫn là một
   mảnh của dòng chảy (không neo khung nhìn — lý do của luật trên vẫn giữ). Đo bằng scripts/so-theme-goc.mjs.
   ========================================================================== */
.pr-khoi:has([data-khung][data-header="photo"]) {
  position: relative;
  height: 0;
  z-index: 30;
}
/* Chỉ khi nằm TRONG một trang đã dựng (`.pr-khoi`). Khối đứng riêng (kho khối · ảnh thu nhỏ · verify:khoi-trong-dong-chay)
   vẫn theo luật dòng chảy ở trên — không có hero bên dưới thì đè lên không có nghĩa gì. */
.pr-khoi .pr-khung [data-khung][data-khung][data-khung][data-header="photo"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* ==========================================================================
   ĐẦU TRANG MẪU WEB DÍNH THEO TRANG                              (02/11/2026)
   ==========================================================================
   Anh 02/11/2026: «template xem thử thì click được». Cả 10 mẫu gốc có đầu trang `position: sticky`. Luật ở đầu tệp ghì thẻ gốc về `relative` nên trên
   trang khách đầu trang trôi mất khi cuộn. Sticky đặt ở khối bọc vì khối bọc cao bằng đúng đầu trang, sticky bên trong không có chỗ để dính. */
.pr-trang > .pr-khoi:has([data-khung].dau-trang) {
  position: sticky;
  top: 0;
  z-index: 30;
}

/* 03/11/2026 đo mẫu 04 `/moi-gioi` ở 390px: CSS thư viện ép ô bảng không xuống dòng, bảng tràn mép phải. Bản xem thử không nạp thư viện đó nên không lộ. */
[data-khung^="mau-"] th,
[data-khung^="mau-"] td {
  white-space: normal;
}