/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/themes/hatien-theme/assets/fonts/QdVPSTAyLFyeg_IDWvOJmVES_Hw4BXoKZA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/themes/hatien-theme/assets/fonts/QdVPSTAyLFyeg_IDWvOJmVES_Hw5BXoKZA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/themes/hatien-theme/assets/fonts/QdVPSTAyLFyeg_IDWvOJmVES_Hw3BXo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/hatien-theme/assets/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HToIW86Rb0bcw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/hatien-theme/assets/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HToIW87Rb0bcw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/hatien-theme/assets/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HToIW81Rb0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/wp-content/themes/hatien-theme/assets/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG86Rb0bcw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/wp-content/themes/hatien-theme/assets/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG87Rb0bcw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/wp-content/themes/hatien-theme/assets/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG81Rb0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HÀ TIÊN — NỀN TẢNG GIAO DIỆN
   Theo YEU_CAU_CLAUDE_XAY_THEME_HA_TIEN_V1_1.md

   Đây là tệp DUY NHẤT quyết định màu sắc, cỡ chữ và hình dáng thành phần.
   Đổi màu toàn site = sửa mục 1. Đổi cỡ chữ toàn site = sửa mục 2.

   ── BỐN LUẬT KHI SỬA TỆP NÀY ────────────────────────────────────────────
   1. KHÔNG viết tên trang vào selector. Không `body.home`, không `.page-id-12`.
      Luật phải đúng cho mọi trang, kể cả trang chưa tồn tại.
   2. ĐÃ ĐẶT NỀN THÌ PHẢI ĐẶT LUÔN MÀU CHỮ ĐI KÈM. Không nắm được cả hai thì
      đừng đặt cái nào — để nó thừa hưởng. Đặt nền mà quên chữ là cách nhanh
      nhất tạo ra chữ trắng trên nền trắng.
   3. Chỉ `body` và các thành phần TỰ ĐẶT NỀN mới được đặt màu chữ tuyệt đối.
      Tiêu đề, liên kết, đoạn văn đều THỪA HƯỞNG.
   4. Cỡ chữ chỉ được NÂNG, cấm hạ. Không đặt cỡ tuyệt đối cho thân bài.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 1. BẢNG MÀU ═════════════════════════════════════════════════════════
   Chép nguyên văn mục 2 của bản yêu cầu V1.1. Không thêm màu nào.          */

:root {
  color-scheme: light dark;

  --ht-bg:           #F7F7F3;   /* nền chính, ~80% diện tích        */
  --ht-surface:      #FFFFFF;   /* card, bảng, biểu mẫu             */
  --ht-surface-soft: #F0F1EF;   /* nền phụ, ~15% diện tích          */
  --ht-text:         #202427;   /* chữ chính                        */
  --ht-text-soft:    #596064;   /* chữ phụ                          */
  --ht-border:       #D9DDDA;   /* viền mảnh, phân cách             */
  --ht-gold:         #D6AA6D;   /* nhấn — ĐƯỜNG và CHI TIẾT         */
  --ht-gold-strong:  #C29A62;   /* nền nút chính                    */
  --ht-on-gold:      #202427;   /* chữ đặt TRÊN nền nút chính       */

  /* ── CHỮ VÀNG — token THÊM, có lý do đo được ────────────────────────
     Bảng khoá đặt --ht-gold #D6AA6D làm màu thương hiệu. Đo trên nền
     chính #F7F7F3 chỉ được 1,99:1 nên KHÔNG dùng làm chữ ở chế độ Sáng;
     bảng khoá cũng chỉ giao cho nó vai trò ĐƯỜNG và CHI TIẾT.
     Nhưng bốn Hub đang dùng vàng làm CHỮ ở 73 chỗ. Cần một token riêng:

         #75511E trên #F7F7F3  =  6,62:1   ✔ chữ thường
         #75511E trên #FFFFFF  =  7,11:1   ✔
         chế độ Tối dùng lại chính #D6AA6D: trên #242526 = 7,19:1  ✔

     Đây là màu CHỨC NĂNG cho khả năng đọc, KHÔNG phải màu thương hiệu
     mới: chế độ Tối trả về đúng #D6AA6D của bảng khoá.               */
  --ht-gold-text:    #75511E;

  /* ── PHƠI GIÁ TRỊ VÙNG ĐẢO MÀU RA CẤP GỐC ──────────────────────────
     Bốn Hub có những dải cố ý tối ở CẢ HAI chế độ. Trước đây mỗi Hub tự
     ghi màu cứng cho chữ trong dải đó — đúng cái §11 gọi là FAIL.
     Phơi ra đây để Hub gọi bằng biến chung thay vì tự đặt.            */
  --ht-on-inverse-soft:    #C3C5C4;
  --ht-border-inverse:     #4B4D4E;
  --ht-surface-on-inverse: #2D2F30;
  --ht-gold-on-inverse:    #D6AA6D;
  --ht-info:         #3D5A6A;
  --ht-success:      #2F6E5B;
  --ht-warning:      #9A5C32;
  --ht-error:        #9A4339;

  /* ── BỀ MẶT ĐẢO MÀU — cặp nền–chữ đi liền nhau, không tách rời ─────
     Dùng cho chân trang và mọi khối cố ý đặt trên nền đậm ở CẢ HAI chế độ.
     Khai thành CẶP để không bao giờ có nền mà thiếu chữ, hoặc ngược lại.  */
  --ht-surface-inverse: #202224;   /* graphite, không ngả xanh */
  --ht-on-inverse:      #E8E8E3;   /* = Chữ chính chế độ ánh sáng yếu */

  /* ── VIỀN Ô ĐIỀU KHIỂN — thêm so với bản yêu cầu, có lý do đo được ───
     Đo mẫu V1.1: viền ô nhập #D9DDDA trên nền #FFFFFF chỉ đạt 1,28:1, và
     nền ô so với nền trang chỉ chênh 1,14:1. Không dấu hiệu nào đủ 3:1 nên
     người dùng không nhận ra đâu là ô bấm được. WCAG 1.4.11 đòi 3:1 cho
     ranh giới của ô điều khiển.
     #7B8388 trên #FFFFFF đo được 3,86:1 — đạt, mà vẫn mảnh và trung tính.

     ⚠️ WEBSITE CÓ HAI LOẠI VIỀN, ĐỪNG DÙNG LẪN:
        --ht-border        viền TRANG TRÍ: thẻ, phân cách khối. Nhẹ là đúng.
        --ht-border-field  viền Ô ĐIỀU KHIỂN: là dấu hiệu cần thiết để người
                           dùng nhận ra chỗ bấm được, nên phải đạt 3:1.
     Đây là MÀU CHỨC NĂNG, không phải màu thương hiệu mới.                */
  --ht-border-field: #596064;

  /* ── LỚP PHỦ — pha loãng từ các màu trên, không đưa màu mới vào ───── */
  --ht-tint-gold:    rgba(181, 138, 80, .10);
  /* ⚠️ A4 — TỪNG LÀ .05, ĐO ĐƯỢC 1,10:1 SO VỚI NỀN TRẮNG: gần như vô hình.
     Nâng lên .07 cho ra #EDEDEC trên #FFFFFF = 1,15:1 — vẫn nhẹ nhưng thấy
     được, và rê chuột không phải dấu hiệu DUY NHẤT ở bất kỳ chỗ nào (mọi
     thành phần đều còn con trỏ bàn tay và vòng nét tiêu điểm). */
  --ht-tint-hover:   rgba(32, 36, 39, .07);
  --ht-shadow:       0 8px 24px rgba(32, 36, 39, .09);
  --ht-bg-rgb:       247, 247, 243;

  /* ── KHOẢNG CÁCH — thang 8px ─────────────────────────────────────── */
  --ht-s1: .5rem;  --ht-s2: 1rem;   --ht-s3: 1.5rem;
  --ht-s4: 2.5rem; --ht-s5: 4rem;   --ht-s6: 5.5rem;

  /* ── KÍCH THƯỚC KHUNG ────────────────────────────────────────────── */
  --ht-max:      1360px;   /* khung nội dung, yêu cầu 1280–1440 */
  /* ── CỘT CHỮ ĐỌC — ĐỔI Ở BẢN 0.1.2 (GD-06) ────────────────────────
     Cũ: 800px. Đo bằng máy trên chính bản xem tĩnh, khổ 1440px, thân bài
     18px, phông system-ui, chuỗi mẫu tiếng Việt có dấu:

         1 ký tự tiếng Việt = 8,10px      1ch = 9,70px
         800px  ÷  8,10  =  99 KÝ TỰ mỗi dòng

     Mắt bắt dòng dễ nhất trong khoảng 60–75 ký tự. 99 là quá dài: đọc tới
     cuối dòng thì mất dấu đầu dòng kế tiếp — đúng cái khó của người lớn
     tuổi mà bảng cỡ chữ mới sinh ra để chữa. Nâng chữ mà không hẹp cột lại
     thì nâng xong còn khó đọc hơn trước.

         60ch  =  582px  ÷ 8,10  =  72 ký tự   ✔

     ⚠️ VÌ SAO KHÔNG PHẢI 68ch: 1ch là bề rộng chữ số "0", rộng hơn ký tự
     tiếng Việt trung bình 1,20 lần. 68ch = 660px = 81 ký tự — vẫn quá dài.
     Con số ch KHÔNG bằng số ký tự thật, phải đo mới biết.

     ⚠️ ĐI NGƯỢC MỘT CON SỐ CỦA BẢN YÊU CẦU V1.1, phải nói rõ: mục kích
     thước khung của V1.1 ghi 760–820px. Con số đó tính cho thân bài cỡ cũ.
     Chữ to lên thì cột phải hẹp lại mới giữ nguyên số ký tự mỗi dòng.

     Dùng `ch` chứ không `px` để cột tự nở khi người đọc chỉnh cỡ chữ gốc
     trong máy — số ký tự mỗi dòng giữ nguyên 72 ở mọi cỡ.                */
  /* ⚠️ TỪNG LÀ `60ch` VÀ ĐÓ LÀ SAI — ghi lại để không ai làm lại.
     Đơn vị `ch` trong một biến tuỳ chỉnh KHÔNG được chốt lúc khai báo; nó
     giải ra TẠI NƠI DÙNG, theo cỡ chữ của chính phần tử đó. Đo được:
         <p>  cỡ 18,00px  →  60ch =   582px   ✔ đúng ý
         <h2> cỡ 39,04px  →  60ch = 1.260px   ✘ hơn gấp đôi
         <h1> cỡ 52,80px  →  60ch = 1.822px   ✘ mất tác dụng hẳn
     Nên tiêu đề trong bài trải rộng gấp đôi đoạn văn — mép phải so le.

     `rem` bám cỡ chữ GỐC nên là MỘT con số cho mọi phần tử, mà vẫn giữ được
     tính chất cần: người đọc chỉnh cỡ chữ gốc lên 20px thì thân bài thành
     22,50px VÀ cột nở thành 728px — vẫn đúng 72 ký tự mỗi dòng.
         36.4rem × 16px = 582,4px                                        */
  /* ⚠️ CON SỐ NÀY PHẢI KHỚP VỚI `settings.layout.contentSize` TRONG theme.json.
     Hai nơi cùng nói về một thứ: bề rộng cột chữ đọc. theme.json nói cho trình
     soạn khối, biến này nói cho trang thật. Trước bản 0.1.6 theme.json khai
     800px trong khi đây là 36,4rem = 582,4px — lệch 217,6px, nên người biên
     tập ngắt dòng theo một bề rộng còn người đọc thấy một bề rộng khác. */
  --ht-reading:  36.4rem;  /* = 582px ở cỡ gốc 16px = 72 ký tự mỗi dòng */
  --ht-radius:   12px;     /* bo góc,        yêu cầu tối đa 14 */
  --ht-cham:     44px;     /* vùng chạm tối thiểu              */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ht-bg:           #242526;
    --ht-surface:      #2D2F30;
    --ht-surface-soft: #333536;
    --ht-text:         #E8E8E3;
    --ht-text-soft:    #C3C5C4;
    --ht-border:       #4B4D4E;
    --ht-gold:         #D6AA6D;
    --ht-gold-strong:  #C29A62;
    --ht-on-gold:      #202427;   /* KHÔNG dùng chữ trắng — chỉ đạt 2,60 */
    --ht-info:         #8FB3C4;
    --ht-success:      #78B395;
    --ht-warning:      #D3A064;
    --ht-error:        #D5958A;

    /* Bảng khoá: viền trường nhập chế độ Tối = #C3C5C4.
       Đo #C3C5C4 trên #2D2F30 = 6,84:1 — vượt xa ngưỡng 3:1. */
    --ht-border-field: #C3C5C4;
    /* chữ vàng chế độ Tối trả về đúng màu thương hiệu */
    --ht-gold-text:    #D6AA6D;

    --ht-tint-gold:    rgba(194, 154, 98, .14);
    --ht-tint-hover:   rgba(232, 232, 227, .05);
    --ht-shadow:       0 14px 34px rgba(0, 0, 0, .28);
    --ht-bg-rgb:       36, 37, 38;
  }
}


/* ═══ 2. THANG CỠ CHỮ ═════════════════════════════════════════════════════
   "Chức năng tối thiểu về cỡ chữ" nằm ở ba điều, không phải ở nút A− / A+:

   a) `html` giữ nguyên cỡ gốc, `body` đặt theo PHẦN TRĂM. Người đọc chỉnh
      cỡ chữ trong cài đặt điện thoại thì CẢ SITE to lên theo. Đặt bằng `px`
      là vô hiệu hoá cài đặt đó — lỗi phổ biến nhất khiến người lớn tuổi
      không đọc được website.
   b) Thân bài KHÔNG đặt cỡ riêng, chỉ thừa hưởng. Vai trò nhỏ hơn dùng `em`
      nên luôn co giãn theo, không bao giờ tách khỏi thang.
   c) Tiêu đề dùng `clamp()` để co theo bề ngang màn hình.

   ── BẢNG CỠ CHỮ CHỐT NGÀY 26/08/2026 — ĐÈ MỤC 5 CỦA BẢN V1.0 ────────────
   Khách của Hà Tiên nhiều người trung niên và lớn tuổi. Chủ dự án chốt:

       Thân bài                 18px ở MỌI màn hình
       Danh sách                17–18px
       Chữ trên nút             16–18px
       Chú thích                14px  (hiểu là SÀN, không phải đích)
       Chiều cao dòng thân bài  1,6–1,7

   V1.0 ghi "18px máy tính, 17px điện thoại". Bản chốt mới hơn nên thắng.
   Hệ quả trực tiếp: ngoại lệ 106% cho màn ≤640px BỊ BỎ HẲN — điện thoại
   không còn bị hạ cỡ chữ nữa.

   ── VÌ SAO VẪN LÀ PHẦN TRĂM CHỨ KHÔNG PHẢI `font-size: 18px` ───────────
   Viết cứng 18px là vô hiệu hoá cài đặt cỡ chữ của trình duyệt và của hệ
   điều hành — đúng cái lỗi mà bảng cỡ chữ này sinh ra để tránh.
       `html` không đặt cỡ   → gốc = con số người đọc tự chọn (mặc định 16)
       `body` đặt 112,5%     → 112,5% × 16px = 18,00px  ✔ đúng mức đã chốt
       người đọc đặt gốc 20  → thân bài 22,50px, cả site to theo

   ── VÌ SAO KHÔNG ĐẨY 112,5% LÊN `html` ────────────────────────────────
   Đặt trên `html` thì 1rem hoá 18px, kéo theo TOÀN BỘ thang khoảng cách
   (--ht-s1..--ht-s6) và bốn thang tiêu đề phình thêm 12,5% — trang giãn ra
   một cách không ai chủ ý. Đặt trên `body` thì chỉ chữ to lên.             */

/* ⚠️ C3 — MỞ NGĂN KÉO TỪNG LÀM CẢ TRANG NHẢY NGANG 15px. Mã lệnh khoá cuộn
   bằng `overflow: hidden`, thanh cuộn biến mất, bề ngang khả dụng tăng 15px
   và mọi thứ căn giữa dịch sang phải. Chừa sẵn rãnh thanh cuộn thì không
   còn gì để mất. */
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body { font-size: 118.75%; }   /* 112,5% × 16px = 18,00px — mọi màn hình */

:root {
  --ht-lh:      1.65;    /* giãn dòng thân bài — bảng chốt đòi 1,6–1,7 */
  /* ⚠️ B1 — GIÃN DÒNG TIÊU ĐỀ. TỪNG LÀ 1,2 VÀ ĐÓ LÀ CON SỐ CỦA CHỮ LATIN
     KHÔNG DẤU. Chữ Việt chồng hai tầng dấu nên không đủ chỗ. Đo trên phông
     hệ thống đang dùng, quy về em:

         hộp chữ của phông      1,079 + 0,251 = 1,330
         chữ hoa cao nhất "Ẳ"   1,0625  (trọng lượng 700)
         đuôi sâu nhất  g/y/ỵ/ỹ 0,2344
         → một dòng chữ Việt cần        1,2969

     Đặt 1,2 là thiếu 0,0969em. Quy ra H1 52px thì DẤU của dòng dưới đè lên
     ĐUÔI chữ dòng trên 5,04px. 1,32 còn đủ cho cả trọng lượng 900. */
  --ht-lh-head: 1.32;

  /* ── BỐN BẬC CHỮ NHỎ HƠN THÂN BÀI ────────────────────────────────────
     Gom về MỘT chỗ để đổi một lần là cả site theo, thay vì rải `.94em`
     khắp tệp. Dùng `em` nên luôn bám thang trên, không bao giờ tách rời.
     Quy ra px khi thân bài = 18,00px:                                    */
  /* ⚠️ CÓ `max()` VÌ MỘT LÝ DO ĐO ĐƯỢC — ĐỪNG BỎ.
     Bốn bậc này dùng `em` để luôn bám thang trên. Nhưng khi phần tử CHA đã
     nằm ở sàn thì phép nhân xuống làm thủng sàn:
         .83em × 14px = 11,62px      .83em × 16px = 13,28px
     Hai con số đó đo được trên production 03/09/2026, ở trang Khách sạn và
     Bếp trung tâm — anh Hải phát hiện trước tôi.
     `max()` giữ nguyên tính co giãn theo cỡ chữ máy người đọc (người lớn
     tuổi phóng chữ trong máy thì cả site to theo) mà không bao giờ tụt dưới
     sàn của bảng cỡ chữ chốt 26/08/2026.                                  */
  --ht-cs-nho:  max(14px, .83em);   /* chú thích        ≥14px */
  --ht-cs-phu:  max(15px, .90em);   /* chữ phụ          ≥15px */
  --ht-cs-nhan: max(15px, .94em);   /* nhãn, trình đơn  ≥15px */
  --ht-cs-nut:  max(16px, .95em);   /* chữ trên nút     ≥16px */

  /* ── BỐN THANG TIÊU ĐỀ ───────────────────────────────────────────────
     Dùng clamp() theo bề ngang màn hình, KHÔNG dùng `em`: dùng `em` thì
     tiêu đề trên điện thoại to hơn trên máy tính, sai tỷ lệ.

     ⚠️ NÂNG NGÀY 26/08/2026 CÙNG VỚI THÂN BÀI, VÀ ĐÂY LÀ CHỖ DỄ QUÊN NHẤT.
     clamp() dựng trên `rem`, mà `rem` bám `html` chứ không bám `body`. Nâng
     thân bài trên `body` thì bốn thang này ĐỨNG IM. Hậu quả đo được ở khổ
     390px nếu không nâng: H4 = 18,45px đứng cạnh thân bài 18,00px, chênh
     0,45px — mắt không phân biệt được đâu là tiêu đề.

     Đã kiểm bằng máy: KHÔNG có ô nào nhỏ đi, ở cả 8 khổ 390…1920px.
     Bảng số đo trước → sau, đơn vị px:

              390        640        768       1000       1440
       H4  18,45→20,48  19,20→21,25  19,58→21,66  20,28→22,08  20,96→22,08
       H3  22,18→24,48  23,68→25,92  24,45→26,69  25,84→28,08  28,00→28,80
       H2  27,36→29,60  31,36→33,60  33,41→35,65  37,12→39,04  38,40→39,04
       H1  32,33→34,73  39,20→41,60  42,72→45,12  49,10→51,50  52,00→52,80

     Tỷ lệ so với thân bài ở khổ 390: H4 1,09× → 1,14×  ·  H3 1,31× → 1,36× */
  --ht-h1: clamp(2.5rem, 1.82rem + 2.91vw, 4rem);  /* 34,7 → 52,8px */
  --ht-h2: clamp(2rem, 1.6rem + 1.7vw, 2.875rem);  /* 29,6 → 39,0px */
  --ht-h3: clamp(1.5rem, 1.39rem + 0.49vw, 1.75rem);  /* 24,5 → 28,8px */
  --ht-h4: clamp(1.25rem, 1.19rem + 0.24vw, 1.375rem);  /* 20,5 → 22,1px */
}

/* ⚠️ B9 — ĐIỆN THOẠI XOAY NGANG.
   Xoay ngang thì bề ngang nhảy lên 844–932px, `clamp()` theo `vw` tưởng là
   máy tính bảng và phóng tiêu đề lên cỡ máy tính — trong khi màn hình chỉ
   còn CAO 390–430px. Đo tại 844×390 trước khi sửa: H1 = 44,81px, khối H1 cao
   107,5px, chiếm 27,6% chiều cao màn hình.

   Thu cả bốn bậc theo cùng tỷ lệ chứ không chỉ thu H1 — thu mỗi H1 thì nó
   tụt sát H2 và mất thứ bậc. Số đo tại 844px sau khi sửa:
       thân bài 18 → H4 21,02 → H3 24,80 → H2 29,46 → H1 34,68
       khoảng cách  +16,8%    +18,0%    +18,8%    +17,7%  — đều trên 15%. */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --ht-h1: clamp(2.00rem, 1.35rem + 1.55vw, 2.45rem);  /* 32   → 39,2px */
    --ht-h2: clamp(1.74rem, 1.34rem + 0.95vw, 2.05rem);  /* 27,8 → 32,8px */
    --ht-h3: clamp(1.51rem, 1.36rem + 0.36vw, 1.66rem);  /* 24,2 → 26,6px */
    --ht-h4: clamp(1.30rem, 1.24rem + 0.14vw, 1.36rem);  /* 20,8 → 21,8px */
  }
}


/* ═══ 3. NỀN TẢNG ═════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

/* ⚠️ C2 — CHIỀU CAO ĐẦU TRANG, không phải màu, nên không đụng bảng bảy màu.
   68px là min-height của .ht-header__inner, cộng 1px viền dưới. */
:root { --ht-header-h: 69px; }

/* Đầu trang dính che đúng 69px nội dung mỗi khi bấm một liên kết neo — đo
   trên trang chủ ở 390px: đỉnh thẻ đích ở −0,3px so với khung nhìn, đáy đầu
   trang ở 69,0px. Mọi thứ có neo đều phải chừa chỗ. */
:where([id]) { scroll-margin-top: calc(var(--ht-header-h) + var(--ht-s2)); }

/* Cuộn mượt; mục prefers-reduced-motion phía dưới đã ép về auto cho người
   tắt hiệu ứng nên an toàn. */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* ⚠️ C1 — TRANG ÍT NỘI DUNG từng để chân trang dừng giữa màn hình. Đo trên
     khuôn "chưa có nội dung": đáy chân trang đứng yên ở y=953px, nên khung
     nhìn 1080px hở 127px nền trống, khung nhìn 1300px hở 347px. */
  min-height: 100vh;    /* nền cho trình duyệt chưa hiểu dvh */
  min-height: 100dvh;   /* đúng cả khi thanh địa chỉ điện thoại co lại */
  display: flex; flex-direction: column;
  background: var(--ht-bg);
  color: var(--ht-text);
  line-height: var(--ht-lh);
  font-family: "Be Vietnam Pro", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Thân bài VÀ DANH SÁCH đều KHÔNG đặt cỡ — thừa hưởng từ body, tức 18,00px
   ở mọi khổ. Đây chính là cách đạt hai dòng đầu của bảng chốt (thân bài 18,
   danh sách 17–18) mà không viết một con số px nào, và không cần luật riêng
   cho `li`. Chỉ đặt giãn dòng. */
:where(p, li, dd, dt, td, th, blockquote) { line-height: var(--ht-lh); }

/* Vai trò NHỎ HƠN thân bài dùng `em` để luôn bám thang trên.
   Sàn 14px:  0,83em × 18,00px = 14,94px — trên sàn ở CẢ BA khổ.
   Trước đây khổ 390 chỉ được 14,08px, dư đúng 0,08px so với sàn; chỉ cần ai
   đó hạ thân bài một nấc là thủng sàn mà không ai kịp thấy.                */
:where(.ht-meta, .ht-tag, small, figcaption) {
  font-size: var(--ht-cs-nho);
  /* ⚠️ TỪNG LÀ: color-mix(in srgb, currentColor 74%, transparent).
     Làm mờ theo currentColor chỉ đúng khi chữ cha là CHỮ CHÍNH:
         #202427 mờ 74% trên nền → rgb(88,91,92)  = 6,38:1  ✔
     Nhưng khi chữ cha ĐÃ LÀ chữ phụ thì mờ lần nữa:
         #596064 mờ 74%          → rgb(132,137,140) = 3,54:1  ✘
     và nếu khối con còn đặt opacity riêng (Hub khách sạn đặt .72):
         mờ hai lần              → rgb(167,171,173) = 2,31:1  ✘✘
     Đo tại .typeBtn small trang /giai-phap/khach-san.

     Dùng thẳng token chữ phụ: rgb(89,96,100) = 5,96:1 — LỆCH KHÔNG QUÁ 5
     ĐƠN VỊ so với màu cũ (88,91,92) nên mắt thường không phân biệt được,
     mà không bao giờ mờ chồng nữa, và chế độ Tối tự về #C3C5C4. */
  color: var(--ht-text-soft);
}

/* ⚠️ B2 — CHỮ NHỎ CẦN GIÃN DÒNG LỚN HƠN CHỮ TO, không phải bằng nhau.
   Trước đây cả chú thích 14,94px lẫn thân bài 18px đều dùng 1,6. Mức nên
   dùng cho cỡ 15–16px là 1,7–1,8.
   KHÔNG đưa `.ht-tag` vào: nó là viên nhãn inline-flex, nâng giãn dòng chỉ
   làm viên nhãn cao lên chứ không giúp đọc. */
:where(.ht-meta, small, figcaption, .ht-bang-ghichu, .ht-tailieu__meta,
       .ht-form__ghichu, .ht-loi, .ht-footer__duoi) { line-height: 1.75; }

/* CHẶN BẪY NHÂN HỆ SỐ. Một `<small>` nằm trong `.ht-meta`, hay `<figcaption>`
   nằm trong khối đã thu nhỏ, sẽ ăn hệ số .83 HAI LẦN:
       0,83 × 0,83 × 18 = 12,40px — thủng sàn 14px.
   Tầng thứ hai trở đi trả về 1em, tức bằng tầng thứ nhất, không nhỏ thêm.  */
:where(.ht-meta, .ht-tag, small, figcaption)
  :where(.ht-meta, .ht-tag, small, figcaption) { font-size: 1em; }

:where(h1, h2, h3, h4, h5, h6) {
  color: inherit;              /* THỪA HƯỞNG — xem luật 3 ở đầu tệp */
  line-height: var(--ht-lh-head);
  text-wrap: balance;
  margin: 0 0 var(--ht-s2);
  /* ⚠️ B6 — KHÔNG DÙNG GIÃN CHỮ ÂM CHO TIẾNG VIỆT. Từng đặt -.015em.
     Chữ "ư" và "ơ" có móc vẽ NHÔ RA khỏi bề rộng danh nghĩa của chính nó
     (đo được "ư" nhô 0,0221em). Khe hở với chữ sau vốn đã hẹp; đo pixel ở
     cỡ 400px, trọng lượng 700:
         cặp "ưa / ữa / ựa"   0,0175em  →  0,0025em khi trừ 0,015em
         cặp "ươ / ướ / ưở"   0,0250em  →  0,0100em
     Quy ra H1 52px còn 0,13px và 0,52px — dưới một điểm ảnh, tức DÍNH NHAU
     trên màn hình. Từ hay gặp: cửa, giữa, lựa, chưa, được, trường, hướng,
     người, phương, đường, lượng — toàn từ trong nội dung của Hà Tiên. */
  letter-spacing: normal;
}
:where(h1) { font-size: var(--ht-h1); }
:where(h2) { font-size: var(--ht-h2); }
:where(h3) { font-size: var(--ht-h3); }
:where(h4) { font-size: var(--ht-h4); }

/* ⚠️ B7 — h5 và h6 TỪNG BỊ BỎ TRỐNG, nên trình duyệt lấy mặc định của chính
   nó: 0,83em và 0,67em. Với thân bài 18px thì h5 tụt về 14,94px và h6 về
   12,06px — một TIÊU ĐỀ nhỏ hơn chữ thường quanh nó, và h6 còn dưới sàn 14px.
   Thang cỡ đã hết chỗ dưới h4, nên hai bậc này giữ đúng cỡ thân bài và phân
   biệt bằng ĐỘ ĐẬM — trình duyệt vốn đã in đậm h5/h6 sẵn. */
:where(h5, h6) { font-size: 1em; }

/* ⚠️ C4 — ĐẶT LẠI LỀ CHO MỌI KHỐI VĂN BẢN, không chỉ p/ul/ol. Trình duyệt
   mặc định cho `figure` và `blockquote` lề `1em 40px` — thụt 40px mỗi bên.
   single.php bọc ảnh đại diện bằng <figure> nên ở 320px ảnh chỉ còn 216 trên
   296px (mất 27,1%) và lệch 40px so với đoạn văn ngay trên nó. */
:where(p, ul, ol, dl, figure) { margin: 0 0 var(--ht-s2); }

/* Trích dẫn: bỏ lề thụt vô nghĩa, thay bằng đường vàng đồng bên trái — đúng
   vai trò "đường và chi tiết nhấn" của bảng màu, không thêm màu mới. */
:where(blockquote) {
  margin: 0 0 var(--ht-s2);
  padding-inline-start: var(--ht-s2);
  border-inline-start: 3px solid var(--ht-gold);
}
:where(figcaption) { margin-top: var(--ht-s1); }

/* ⚠️ B4 — CÁC MỤC DANH SÁCH TỪNG DÍNH LIỀN NHAU, đo được khoảng trắng giữa
   hai mục đúng 0,00px trong khi hai dòng cùng một mục cách nhau 29,70px.
   Mắt không tách được đâu là hết mục này, đâu là bắt đầu mục kia.
   `.ht-noidung` là thẻ <main> nên luật này KHÔNG đụng vào trình đơn, đường
   dẫn phân cấp hay chân trang. */
:where(.ht-noidung) :where(ul, ol) > li + li { margin-top: .5em; }

/* Danh sách LỒNG bên trong một <li> không được mang lề dưới 16px của luật
   trên — lề đó rơi vào bên trong mục cha và làm nhịp danh sách gãy khúc. */
:where(li) > :where(ul, ol) { margin-block: 0; }

/* ⚠️ B5 — chống chữ mồ côi: một chữ đứng trơ cuối đoạn. `balance` chỉ đang
   đặt cho tiêu đề; `pretty` là dành cho đoạn văn dài. */
:where(p, li, dd, blockquote) { text-wrap: pretty; }

/* ═══ CỘT CHỮ ĐỌC ═════════════════════════════════════════════════════════
   ⚠️ SỬA MỘT LỖI ÂM THẦM Ở BẢN 0.1.2 (GD-07) — đọc kỹ trước khi đụng bộ chọn.

   Luật cũ dùng dấu con-trực-tiếp `>`. Nhưng trong page.php và single.php, nội
   dung nằm bên trong một thẻ <article>:

       <div class="ht-wrap ht-reading">
         <article> <h1>…</h1> <?php the_content(); ?> </article>
       </div>

   Các thẻ p / ul / h2 do the_content() sinh ra là CHÁU của .ht-reading, nên
   `>` không khớp và max-width KHÔNG hề được áp. Trong khi 404.php, search.php
   và front-page.php lại khớp vì nội dung là con trực tiếp — cùng một website
   mà hai loại trang có bề rộng đọc khác nhau, rất khó thấy bằng mắt.

   Nay dùng bộ chọn HẬU DUỆ, khớp ở mọi độ sâu, kể cả khi trình soạn thảo khối
   bọc thêm nhiều tầng <div class="wp-block-group">.

   ── RỒI TRẢ LẠI BỀ RỘNG ĐẦY ĐỦ CHO THỨ CÓ BỐ CỤC RIÊNG ─────────────────
   Cột đọc chỉ dành cho ĐOẠN VĂN DÀI. Bảng thông số, thẻ, lưới, ảnh, biểu mẫu
   và video nhúng đều có bố cục riêng — bó chúng vào 582px chỉ tạo khoảng
   trống lệch và làm bảng phải cuộn ngang sớm hơn cần thiết.

   Cả hai khối đều dùng `:where()` nên độ ưu tiên bằng 0; khối viết SAU thắng.
   ĐẢO THỨ TỰ HAI KHỐI NÀY LÀ HỎNG — luật trả-lại-bề-rộng sẽ mất tác dụng.   */

/* ⚠️ DANH SÁCH NÀY TỪNG BỎ SÓT h1: đo ở khung 1360px, <p> dừng ở 582px còn
   <h1> trải trọn 1360px — mép phải so le 778px, nhìn như trang bị lệch. */
:where(.ht-reading) :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4) {
  max-width: var(--ht-reading);
}

/* Trả lại bề rộng đầy đủ — chính khối, và cả chữ nằm bên trong khối */
:where(.ht-reading) :where(
  .ht-luoi, .ht-card, .ht-bang-khung, .ht-tailieu, .ht-form, .ht-thongbao,
  figure, table, img, video, iframe,
  .wp-block-image, .wp-block-table, .wp-block-embed, .wp-block-gallery,
  .alignwide, .alignfull
) { max-width: none; }

:where(.ht-reading)
  :where(.ht-luoi, .ht-card, .ht-bang-khung, .ht-tailieu, .ht-form, figure, table)
  :where(p, ul, ol, dl, li, h2, h3, h4) { max-width: none; }


/* ═══ 4. LIÊN KẾT ═════════════════════════════════════════════════════════
   Liên kết THỪA HƯỞNG màu chữ của vùng chứa nó. Cái phân biệt liên kết là
   GẠCH CHÂN màu vàng đồng — không phải màu chữ.

   Ba việc đạt cùng lúc:
     · vùng nền sáng hay nền đậm đều tự đúng, không cần luật riêng
     · vàng đồng dùng đúng vai trò "đường và chi tiết nhấn" của bản yêu cầu
     · thoả luật "không nhận biết chỉ bằng màu" — người mù màu vẫn thấy gạch

   Đo: vàng #B58A50 làm MÀU CHỮ trên nền #F7F7F3 chỉ đạt 2,91:1 — trượt.
   Làm màu GẠCH CHÂN thì không bị ràng buộc ngưỡng chữ.                     */

:where(a) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ht-gold);
  text-decoration-thickness: 1.5px;
  /* ⚠️ B8 — TỪNG LÀ .18em. Đo bằng canvas ở cỡ 360px rồi quy về em: đáy mực
     của dấu nặng ụ/ộ/ọ/ạ/ẹ nằm 0,1563em dưới đường cơ sở. Nét gạch ở .18em
     chỉ cách đáy dấu 0,43px ở cỡ 18px — chưa tới một điểm ảnh, nên trên màn
     hình thường là DÍNH. .24em cho khoảng cách 1,51px, tách hẳn. */
  text-underline-offset: .24em;
}
:where(a:hover) { text-decoration-color: currentColor; }

/* ⚠️ D1 — LIÊN KẾT ĐÃ GHÉ. Website có hơn 1.600 điểm đến (1.039 trang sản
   phẩm + 501 bài + 87 trang tĩnh); không đánh dấu thì khách dò danh mục
   không biết mình đã mở trang nào, và mở lại vòng vòng.
   Trình duyệt chỉ cho đổi thuộc tính MÀU ở `:visited` nên không dùng được
   nét đứt hay độ dày. Chữ giữ nguyên màu nên tương phản đọc không đổi. */
:where(a:visited) { text-decoration-color: var(--ht-text-soft); }
:where(a:visited:hover) { text-decoration-color: currentColor; }

/* Điều hướng và nút không gạch chân — chúng đã có hình dáng riêng */
/* ⚠️ A1 — DANH SÁCH NÀY TỪNG THIẾU BA THẺ, VÀ HỎNG NHÌN THẤY BẰNG MẮT.
   `.ht-cua`, `.ht-tailieu__muc` và `.ht-logo` đều là thẻ <a>, nên luật
   `:where(a)` phía trên áp gạch chân vàng lên chúng, và gạch chân lan xuống
   MỌI con bên trong: số thứ tự, tiêu đề h3, cả đoạn mô tả.

   Đo trên bản xem tĩnh trước khi sửa: 30 dòng chữ bị gạch chân trên MỘT màn
   hình trang chủ. Nét gạch chạy sát dấu nặng và dấu chấm dưới của chữ Việt
   (lạnh, độ, ộ, ạ) — người lớn tuổi đọc rất mỏi mắt. Logo "HÀ TIÊN" ở góc
   trái cũng bị gạch chân, trông như liên kết văn bản thường.               */
/* ⚠️ `.ht-card` LÀ THẺ BỌC — đặt `text-decoration: none` lên nó KHÔNG huỷ
   được gạch chân mà chính thẻ <a> con tự đặt. CSS lan gạch chân XUỐNG con,
   nhưng không lan lệnh GỠ gạch chân. Đo trên trang Tin tức: tiêu đề bài
   `<h2><a>` vẫn gạch chân vàng ở cỡ 38,40px. Phải nhắm vào thẻ <a> con. */
:where(.ht-nav a, .ht-menu a, .ht-btn, .ht-cua,
       .ht-tailieu__muc, .ht-logo, .custom-logo-link,
       .ht-breadcrumb a,
       .ht-card a, .ht-cua a, .pagination a) { text-decoration: none; }

/* Nhưng trong THÂN BÀI liên kết PHẢI giữ gạch chân — đó là dấu hiệu duy nhất
   ngoài màu.
   ⚠️ DÙNG `text-decoration-line`, KHÔNG dùng thuộc tính rút gọn: viết tắt
   `text-decoration: underline` đặt lại luôn màu gạch về `currentColor` và
   vô hiệu luật `:visited`. Bọc `:where()` để độ ưu tiên về 0. */
:where(.ht-reading) :where(p, li, dd, blockquote) :where(a) {
  text-decoration-line: underline;
}
:where(.ht-breadcrumb a:hover) { text-decoration: underline; text-decoration-color: var(--ht-gold); }

/* Vòng nét khi đi bằng bàn phím — bắt buộc để dùng được không cần chuột.

   ⚠️ SỬA Ở BẢN 0.1.1. Bản 0.1.0 dùng `var(--ht-gold)` #B58A50, đo được
   2,91:1 trên nền trang #F7F7F3 — TRƯỢT ngưỡng 3:1 mà WCAG 1.4.11 đòi cho
   thành phần giao diện không phải chữ. Trớ trêu là chính chú thích ngay phía
   trên đã ghi đúng con số 2,91 ấy, nhưng chỉ dùng nó để loại vàng đồng khỏi
   vai trò MÀU CHỮ, rồi lại để nguyên nó làm vòng nét.

   Nay dùng `--ht-gold-strong`. KHÔNG thêm màu mới vào bảng đã khoá — đây là
   một trong bảy màu chuẩn, và bề mặt đảo màu đã khai lại biến này ở mục 5 nên
   vòng nét tự đúng trên nền chân trang. Số đo:

       nền trang  #F7F7F3  ↔ #8A642F  →  4,96:1
       nền card   #FFFFFF  ↔ #8A642F  →  5,32:1
       nền phụ    #F0F1EF  ↔ #8A642F  →  4,70:1
       ánh sáng yếu #242526 ↔ #C29A62 →  5,92:1
       card tối   #2D2F30  ↔ #C29A62  →  5,18:1
       đảo màu    #202224  ↔ #C29A62  →  6,03:1                              */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ht-gold-strong);
  outline-offset: 2px;
}

/* ⚠️ D2 — Vòng nét vàng đồng nằm cách mặt nút CHÍNH đúng 2px, mà mặt nút
   cũng vàng đồng. Thêm một vành TRONG màu chữ nút để nét không lẫn vào nền
   của chính nó. `box-shadow` không chiếm chỗ nên không xô bố cục.
   (Dòng `border-radius: 4px` của luật cũ là MÃ CHẾT: `.ht-btn` nạp sau, cùng
   độ ưu tiên, nên nút vẫn giữ bo góc 10px. Đã bỏ.) */
.ht-btn:focus-visible { box-shadow: inset 0 0 0 2px var(--ht-on-gold); }


/* ═══ 5. BỀ MẶT ĐẢO MÀU ═══════════════════════════════════════════════════
   ⚠️ LUẬT KHOÁ CỦA TỆP NÀY — đọc trước khi thêm bất kỳ lớp màu nào:

     KHÔNG ĐẶT MÀU CHỮ DỰA TRÊN GIẢ ĐỊNH VỀ NỀN CỦA TỔ TIÊN.
     Thành phần phải SỞ HỮU ĐỒNG THỜI cặp nền–chữ của chính nó,
     hoặc nhận cặp màu qua biến được khai báo rõ.

   ── VÌ SAO CÓ LUẬT NÀY: bài học trả giá thật ─────────────────────────────
   Website cũ dùng lớp `.dark` của Flatsome. Nghe như "khối này nền tối",
   nhưng đo ngày 26/08/2026 trên trang chủ: 23 phần tử mang lớp `.dark`, trong
   đó `DIV.col-inner.dark` và `DIV.img-inner.dark` đều `background: rgba(0,0,0,0)`
   — nền TRONG SUỐT. Với Flatsome, `.dark` chỉ là dấu hiệu đánh dấu, không
   bảo đảm có nền tối.

   Khi viết `.dark { color: white }` mà `.dark` không tự đặt nền, hậu quả là
   chữ sáng nằm trên nền sáng. Đã đo được 4 chỗ tương phản 2,21 theo đúng
   kịch bản này, và phải hoàn tác.

   ── VÌ SAO ĐẶT TÊN NHƯ VẬY ───────────────────────────────────────────────
   `ht-surface-inverse` nói rõ ĐÂY LÀ MỘT BỀ MẶT, và bề mặt thì có nền.
   `dark` chỉ nói về màu, không nói ai sở hữu nền — chính chỗ mơ hồ đó gây lỗi.
   Tên này CỐ Ý khác `.dark`: theme mới không kế thừa cơ chế cũ.

   Cách dùng: `<section class="ht-surface-inverse">` hoặc `data-surface="inverse"`.
   Mọi chữ, liên kết và đường kẻ bên trong tự đảo. Không phải viết thêm CSS.

   Dùng `:is()` chứ không `:where()`: `:where()` có độ ưu tiên bằng 0 nên hoà
   với các luật đặt màu tiêu đề khác và thua theo thứ tự nạp.               */

.ht-surface-inverse,
[data-surface="inverse"] {
  /* SỞ HỮU CẢ CẶP — không bao giờ tách rời hai dòng này */
  background: var(--ht-surface-inverse);
  color: var(--ht-on-inverse);

  /* và khai lại toàn bộ biến cho vùng bên trong, để thành phần con
     (nút, thẻ, bảng, ô nhập) tự đúng mà không cần luật riêng */
  --ht-text: var(--ht-on-inverse);
  --ht-text-soft: #C3C5C4;
  --ht-border: #4B4D4E;
  --ht-gold: #C29A62;
  --ht-gold-strong: #C29A62;
  --ht-on-gold: #202427;
  --ht-surface: #2D2F30;
  --ht-surface-soft: #333536;
  --ht-border-field: #9BA3A7;
  /* chữ vàng trong dải đảo màu: nền luôn tối nên dùng vàng thương hiệu */
  --ht-gold-text: var(--ht-gold-on-inverse);

  /* ⚠️ A2 — BẢY BIẾN TỪNG BỊ BỎ SÓT, dù chú thích phía trên ghi "toàn bộ".
     Chúng giữ nguyên giá trị dành cho nền SÁNG rồi bị dùng trên nền graphite.
     Đo trước khi sửa, ngay trong vùng đảo màu:

         thông báo "đạt"   #2F6E5B trên #2D2F30  =  2,24:1   (cần 4,5)
         thông báo "lỗi"   #9A4339 trên #2D2F30  =  2,07:1   (cần 4,5)
         dấu sao bắt buộc  #9A4339 trên #202224  =  2,45:1
         viền ô nhập sai   #9A4339 trên #2D2F30  =  2,07:1   (cần 3,0)
         phủ rê chuột      đen 5% trên nền đen   =  1,00:1   — biến mất hẳn

     Sau khi sửa: 5,56 · 4,87 · 5,78 · 4,87 · thấy được.
     Giá trị lấy nguyên từ khối chế độ ánh sáng yếu ở trên, KHÔNG thêm màu
     mới nào ngoài bảng đã khoá. */
  --ht-bg:         #242526;
  --ht-info:       #8FB3C4;
  --ht-success:    #78B395;
  --ht-warning:    #D3A064;
  --ht-error:      #D5958A;
  --ht-tint-gold:  rgba(194, 154, 98, .14);
  --ht-tint-hover: rgba(232, 232, 227, .05);
  --ht-shadow:     0 14px 34px rgba(0, 0, 0, .28);
  --ht-bg-rgb:     36, 37, 38;

  /* A3 — báo cho hệ điều hành biết vùng này tối, để danh sách xổ của <select>,
     thanh cuộn và nút chọn tệp bên trong cũng đảo theo. Thiếu dòng này thì
     ba thứ đó vẫn dùng bộ khung chế độ Sáng, trắng chói giữa nền graphite. */
  color-scheme: dark;
}
:is(.ht-surface-inverse, [data-surface="inverse"]) :is(h1, h2, h3, h4, h5, h6, p, li, dd, dt, span, strong, em, blockquote, a) { color: inherit; }
:is(.ht-surface-inverse, [data-surface="inverse"]) :is(hr, table, th, td) { border-color: var(--ht-border); }


/* ═══ 6. KHUNG TRANG ══════════════════════════════════════════════════════ */

.ht-wrap { width: min(var(--ht-max), 100% - 2.25rem); margin-inline: auto; }
@media (max-width: 640px) { .ht-wrap { width: min(var(--ht-max), 100% - 1.5rem); } }

.ht-section { padding-block: var(--ht-s6); }
@media (max-width: 640px) { .ht-section { padding-block: var(--ht-s5); } }

/* Nền phụ — chỉ chênh nhẹ, KHÔNG đổi màu luân phiên giữa nhiều khối liên tiếp */
.ht-section--soft {
  background: var(--ht-surface-soft);
  color: var(--ht-text);
  border-block: 1px solid var(--ht-border);
}

.ht-section__head { margin-bottom: var(--ht-s3); }
.ht-section__head p { color: var(--ht-text-soft); max-width: var(--ht-reading); margin: 0; }


/* ═══ 6A. KITCHEN ENGINEERING — QUY TRÌNH KỸ THUẬT ════════════════════════
   Lấy tinh thần lưới kỹ thuật Carbon/BMW nhưng giữ bảng màu Hà Tiên.
   Bề mặt phẳng, góc vuông, không shadow/gradient; phân cấp bằng đường và nền. */
.ht-engineering {
  background: var(--ht-surface);
  color: var(--ht-text);
  border: 1px solid var(--ht-border);
  border-radius: 0;
  overflow: hidden;
}
.ht-engineering__head {
  padding: var(--ht-s4);
  background: var(--ht-surface-inverse);
  color: var(--ht-on-inverse);
  /* Header luôn là graphite, nên vàng phải dùng biến thể sáng kể cả khi
     prefers-contrast: more đổi --ht-gold toàn trang sang màu dành cho nền sáng. */
  --ht-gold: #C29A62;
}
.ht-engineering__head :where(h2, p) { color: inherit; }
.ht-engineering__head > p:last-child { max-width: var(--ht-reading); margin: 0; }
.ht-kicker {
  margin: 0 0 var(--ht-s1);
  color: var(--ht-gold-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--ht-cs-nho);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.5;
  text-transform: uppercase;
}
.ht-quytrinh {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--ht-border);
  color: var(--ht-text);
  list-style: none;
}
.ht-quytrinh__muc {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--ht-s3);
  background: var(--ht-surface);
  color: var(--ht-text);
  border-top: 3px solid var(--ht-gold);
  border-radius: 0;
}
.ht-quytrinh__muc h3 { margin-bottom: var(--ht-s1); }
.ht-quytrinh__muc > p { color: var(--ht-text-soft); }
.ht-quytrinh__so,
.ht-quytrinh__dau-ra {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--ht-cs-nho);
  letter-spacing: .03em;
}
.ht-quytrinh__so {
  display: block;
  margin-bottom: var(--ht-s4);
  color: var(--ht-gold-text);
  font-weight: 700;
}
.ht-quytrinh__dau-ra {
  margin: auto 0 0;
  padding-top: var(--ht-s2);
  border-top: 1px solid var(--ht-border);
  font-weight: 600;
}
@media (max-width: 1024px) {
  .ht-quytrinh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ht-engineering__head { padding: var(--ht-s3); }
  .ht-quytrinh { grid-template-columns: 1fr; }
  .ht-quytrinh__so { margin-bottom: var(--ht-s2); }
}


/* ═══ 7. ĐẦU TRANG ════════════════════════════════════════════════════════
   Cố định khi cuộn nhưng mỏng. KHÔNG dùng backdrop-filter — bản yêu cầu
   mục 6 cấm. Dùng nền đặc để chữ phía sau không lem qua.                   */

.ht-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ht-surface);
  color: var(--ht-text);
  border-bottom: 1px solid var(--ht-border);
}
.ht-header__inner { display: flex; align-items: center; gap: var(--ht-s3); min-height: 68px; }

.ht-logo { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: .02em; min-height: var(--ht-cham); }
/* ⚠️ C11 — LOGO THẬT do WordPress tự in:
       <a class="custom-logo-link"><img class="custom-logo">
   Không có khối này thì ảnh hiện đúng cỡ tệp gốc và đội cao cả đầu trang
   dính. Đo ở 375px: logo 1000×300 làm đầu trang cao 105,3px thay vì 68px,
   tức +54,9%. */
.custom-logo-link {
  display: inline-flex; align-items: center;
  min-height: var(--ht-cham);   /* logo dẹt vẫn đủ 44px để chạm */
  text-decoration: none;
}
.custom-logo {
  height: 44px;                 /* = --ht-cham; đầu trang 68px còn 12px hở mỗi bên */
  width: auto;
  max-width: 180px;             /* ở khổ 360px vẫn còn 132px cho nút "Trình đơn" */
  object-fit: contain;          /* logo dẹt hay vuông đều không méo */
  object-position: left center;
}

.ht-logo__mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--ht-gold); border-radius: 10px;
  font-size: .85em; font-weight: 900;
}

.ht-nav { display: none; margin-left: auto; }
.ht-nav ul { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.ht-nav a {
  display: inline-flex; align-items: center; min-height: var(--ht-cham);
  padding: 0 .7rem; border-radius: 8px;
  font-size: var(--ht-cs-nhan);   /* 16,92px */
}
/* ⚠️ RÊ CHUỘT TỪNG ĐO ĐƯỢC 1,10:1 — mắt thường không thấy. Lớp phủ 7% trên
   nền trắng ra #EDEDEC. Thêm dấu hiệu HÌNH DÁNG bằng gạch chân.
   KHÔNG dùng `box-shadow` ở đây: phải để dành riêng cho `[aria-current]` —
   hai luật cùng độ ưu tiên, cùng đặt box-shadow thì luật sau xoá luật trước. */
.ht-nav a:hover {
  background: var(--ht-surface-soft);
  color: var(--ht-text);
  text-decoration: underline;
  text-decoration-color: var(--ht-gold-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}
.ht-nav a:active { background: var(--ht-tint-gold); }
.ht-nav [aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ht-gold); }

/* ⚠️ D3 — NGĂN KÉO ĐIỆN THOẠI TỪNG KHÔNG ĐÁNH DẤU MỤC ĐANG ĐỨNG. Đường vàng
   dọc bên trái CỘNG chữ đậm — chữ đậm là dấu hiệu KHÔNG PHẢI MÀU nên còn
   nguyên ở chế độ màu ép buộc và với người mù màu. */
.ht-menu [aria-current="page"] {
  box-shadow: inset 4px 0 0 var(--ht-gold);
  padding-left: .9rem;
  font-weight: 700;
}

/* ⚠️ C5 — PHẢI DÙNG HAI LỚP. `.ht-header__cta` một lớp (0,1,0) THUA `.ht-btn`
   (0,1,0) nạp sau ở mục 8, nên nút "Nhận tư vấn dự án" vẫn hiện trên điện
   thoại và chen mất chỗ của nút "Trình đơn" — đo ở 320px, nhãn nút bị cắt
   14px. `.ht-btn.ht-header__cta` = (0,2,0), thắng chắc. */
.ht-btn.ht-header__cta { display: none; }

/* ── TĂNG CƯỜNG DẦN — ĐỌC TRƯỚC KHI SỬA BẤT CỨ DÒNG NÀO DƯỚI ĐÂY ──────────
   ⚠️ ĐẢO CHIỀU Ở BẢN 0.1.2 (GD-01).

   Bản 0.1.0–0.1.1 lấy trạng thái ẨN làm mặc định, chỉ mã lệnh mới mở ra. Thẻ
   <html> có mang lớp `no-js` thật, nhưng đếm bằng máy trên cả tệp này thì có
   ĐÚNG 0 luật `.no-js`. Nên máy tắt JavaScript rơi thẳng vào luật mặc định:
   trình đơn ẩn, nút bấm vô ích, mất sạch đường đi trên điện thoại — trong khi
   tài liệu bàn giao vẫn hứa "trình đơn vẫn hiện, nút mở tự ẩn".

   Nay CHỈ MỘT quy ước, chạy theo chiều ngược lại:
     • KHÔNG có lớp `js` = chưa chắc có JavaScript
         ⇒ ngăn kéo HIỆN SẴN, nút mở TỰ ẨN.
     • CÓ lớp `js` (do script nội tuyến trong <head> đặt, tức JavaScript đã
       CHẠY THẬT chứ không phải đoán)
         ⇒ mới được thu ngăn kéo lại và mới cho nút mở xuất hiện.
     • `data-mo="1"` do theme.js đặt khi người dùng bấm nút.

   LUẬT KHI SỬA VỀ SAU: thứ gì chỉ dùng được nhờ mã lệnh thì PHẢI nấp sau
   `.js`. Tuyệt đối đừng lấy "ẩn" làm mặc định thêm lần nữa.

   ĐỘ ƯU TIÊN — chỗ dễ trượt nhất, nhớ cho kỹ:
       .ht-menu                    = (0,1,0)
       .js .ht-menu                = (0,2,0)
       .js .ht-menu[data-mo="1"]   = (0,3,0)
       html:not(.js) .ht-header    = (0,2,1)
   Khối @media KHÔNG cộng thêm điểm nào. Muốn đè ở mốc máy tính thì hoặc viết
   lại đủ bộ chọn, hoặc dùng !important — xem cuối khối.                     */

/* Nút mở trình đơn điện thoại — MẶC ĐỊNH ẨN */
.ht-menu-toggle {
  margin-left: auto;
  display: none;          /* chưa có JS thì nút này chỉ là cái bẫy */
  align-items: center; gap: .5rem;
  min-height: var(--ht-cham); min-width: var(--ht-cham);
  padding: 0 .85rem;
  background: var(--ht-surface); color: var(--ht-text);
  border: 1px solid var(--ht-border-field); border-radius: 10px;
  /* ⚠️ THỨ TỰ QUAN TRỌNG: `font: inherit` là viết tắt, nó ĐẶT LẠI cả
     font-size. Dòng cỡ chữ phải đứng SAU nó. */
  font: inherit; font-size: var(--ht-cs-nhan); font-weight: 600; cursor: pointer;
}
.js .ht-menu-toggle { display: inline-flex; }   /* JS chạy thật mới bày nút */

/* Rê chuột và đang nhấn — GD-04. Trước đây nút này không có phản hồi nào cho
   người dùng chuột, và cũng không có phản hồi khi chạm trên điện thoại. */
.ht-menu-toggle:hover { background: var(--ht-surface-soft); }
.ht-menu-toggle:active { background: var(--ht-tint-hover); }
.ht-menu-toggle[aria-expanded="true"] {
  background: var(--ht-tint-gold);
  border-color: var(--ht-gold-strong);
}

.ht-menu-toggle__bars { display: grid; gap: 4px; }
.ht-menu-toggle__bars span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }

/* Ngăn kéo trình đơn điện thoại — danh sách dọc phẳng, KHÔNG bê mega-menu vào.
   MẶC ĐỊNH MỞ SẴN: đây là bản HTML thô, ai cũng đọc và bấm được.

   `color` đi kèm `background` là bắt buộc theo luật khoá số 2 ở đầu tệp. Bản
   trước đặt nền mà không đặt màu chữ: hiện chưa hỏng vì --ht-surface và
   --ht-text đổi đồng bộ giữa hai chế độ, nhưng nếu sau này ai đó đưa đầu
   trang sang bề mặt đảo màu thì ngăn kéo giữ nền trắng của mình mà nuốt chữ
   gần trắng thừa hưởng từ cha — chữ trắng trên nền trắng.                  */
.ht-menu {
  display: block;
  border-top: 1px solid var(--ht-border);
  background: var(--ht-surface);
  color: var(--ht-text);
}
.js .ht-menu              { display: none; }    /* có JS mới được thu lại */
.js .ht-menu[data-mo="1"] {
  display: block;
  /* ⚠️ C6 — Đầu trang đang dính, nên ngăn kéo cao hơn màn hình là mất luôn
     phần dưới: mã lệnh khoá cuộn nền nên không ai kéo tới được. Đo ở 390×390
     (bàn phím ảo hiện) ngăn kéo cao 425px, khung nhìn 390 → CẮT 103px, nuốt
     mất mục cuối và nút gọi hành động. */
  max-height: calc(100dvh - var(--ht-header-h));
  overflow-y: auto;
  overscroll-behavior: contain;   /* cuộn hết ngăn kéo thì DỪNG, không lan
                                     xuống trang phía sau */
}
.ht-menu ul { list-style: none; margin: 0; padding: var(--ht-s1) 0 var(--ht-s2); }
.ht-menu a {
  display: flex; align-items: center; min-height: 48px;
  padding: 0 .25rem; border-bottom: 1px solid var(--ht-border);
}
.ht-menu li:last-child a { border-bottom: 0; }

/* GD-05 — mục ngăn kéo trước đây không có phản hồi nào khi rê chuột hoặc khi
   chạm. Luật chung `:where(a:hover)` chỉ đổi màu gạch chân, mà mục ngăn kéo
   lại bị `text-decoration: none` nên đổi cũng không ai thấy. */
.ht-menu a:hover  { background: var(--ht-surface-soft); }
.ht-menu a:active { background: var(--ht-tint-hover); }
.ht-menu .ht-btn { margin-top: var(--ht-s2); width: 100%; }

/* ⚠️ LUẬT BẮT BUỘC ĐI KÈM, ĐỪNG BỎ QUA.
   Ngăn kéo `.ht-menu` nằm BÊN TRONG <header class="ht-header">, mà thẻ đó là
   `position: sticky; top: 0`. Cho ngăn kéo mở sẵn mà vẫn để dính thì cả cục
   đứng chết trên đỉnh màn hình và người đọc gần như không còn chỗ đọc nội
   dung. Không có JavaScript thì cho đầu trang chạy theo trang như thường;
   xuống mốc máy tính sẽ trả lại dính. Số đo cụ thể ghi trong báo cáo. */
html:not(.js) .ht-header { position: static; }

/* ⚠️ C7 — MỐC TRÌNH ĐƠN MÁY TÍNH LÀ 1120px, KHÔNG PHẢI 1000px.
   Số này tính ra được, không chọn cho tròn. Đo bề ngang tự nhiên ở 1200px:
       logo 124,3 + khe 24 + trình đơn 664,8 + khe 24 + 16 + nút 192,3 = 1045,4
       + 36px đệm .ht-wrap                                             = 1081,4
       khi thân bài lên 18px                                           = 1091,5
       + 28px dự phòng (logo tuỳ chỉnh, nhãn menu dài hơn)             = 1120
   Dưới mốc này cả sáu nhãn tiếng Việt đều xuống hai dòng.
   ⚠️ ĐI KÈM: assets/js/theme.js cũng phải đổi matchMedia sang 1120px. */
@media (min-width: 1120px) {
  .ht-nav { display: block; }
  .ht-btn.ht-header__cta { display: inline-flex; margin-left: var(--ht-s2); }

  /* Máy tính KHÔNG bao giờ dùng nút mở, có JavaScript hay không cũng vậy.
     Phải liệt kê CẢ HAI bộ chọn: chỉ viết `.ht-menu-toggle` (0,1,0) thì không
     đè nổi `.js .ht-menu-toggle` (0,2,0) ở trên, nút sẽ lòi ra cạnh trình đơn
     ngang. */
  .ht-menu-toggle,
  .js .ht-menu-toggle { display: none; }

  /* Ngăn kéo tắt hẳn ở máy tính. GIỮ `!important` — nay nó gánh hai việc:
     (1) chặn trạng thái "đang mở" của điện thoại còn sót lại khi xoay ngang
         hoặc kéo rộng cửa sổ, vì `.js .ht-menu[data-mo="1"]` nặng (0,3,0);
     (2) chặn luôn trạng thái "mở sẵn" của bản không JavaScript. Không có
         !important thì máy tính tắt JS sẽ thấy danh sách dọc đổ xuống ngay
         dưới trình đơn ngang — hai trình đơn một lúc. */
  .ht-menu { display: none !important; }

  /* Trả lại đầu trang dính cho máy tính bản không JavaScript. Ở đây ngăn kéo
     đã tắt nên đầu trang lại mỏng, dính là đúng.
     Cùng độ ưu tiên (0,2,1) với luật ở trên nhưng đứng sau nên thắng. */
  html:not(.js) .ht-header { position: sticky; }
}

/* Bản in: không bao giờ in trình đơn ra giấy. Cần thiết vì từ bản 0.1.2 ngăn
   kéo mở sẵn khi không có JavaScript — không có luật này thì trang in bắt đầu
   bằng bảy dòng trình đơn rồi mới tới nội dung. */
/* ═══ BẢN IN ══════════════════════════════════════════════════════════════
   Khách của Hà Tiên IN THẬT: bảng thông số mang xuống công trường, trang sản
   phẩm gửi kèm hồ sơ thầu. Ba việc bản in phải làm: bỏ thứ không in được, trả
   về chữ đen nền trắng để đỡ tốn mực, và HIỆN ĐỊA CHỈ của liên kết — trên
   giấy thì gạch chân không dẫn đi đâu cả.                                  */
@media print {
  .ht-menu, .ht-menu-toggle, .ht-skip, .ht-nav,
  .ht-header__cta, .ht-form, .pagination, .ht-breadcrumb { display: none !important; }

  .ht-header { position: static !important; border-bottom: 1px solid #000; }

  :root, body, .ht-section, .ht-section--soft, .ht-card, .ht-cua,
  .ht-footer, .ht-surface-inverse, [data-surface="inverse"] {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  .ht-card, .ht-cua, .ht-bang-khung { border: 1px solid #666 !important; }

  /* Cột đọc bỏ giới hạn: giấy A4 hẹp hơn màn hình sẵn rồi */
  :where(.ht-reading) :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4) { max-width: none; }

  /* Bảng phải in HẾT, không cuộn ngang trên giấy */
  .ht-bang-khung { overflow: visible !important; }
  .ht-bang { min-width: 0 !important; }
  table, tr, img, figure { break-inside: avoid; }
  thead { display: table-header-group; }   /* lặp đầu bảng ở mỗi trang giấy */

  h1, h2, h3, h4 { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  .ht-reading a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .85em;
    color: #444;
    word-break: break-all;
  }
}


/* ═══ 8. NÚT ══════════════════════════════════════════════════════════════
   Nút chính: nền #8A642F + chữ trắng ở chế độ Sáng  (đo 5,32:1)
              nền #C29A62 + chữ #202427 ở chế độ tối (đo 6,03:1)
   TUYỆT ĐỐI không dùng #C29A62 + chữ trắng — chỉ đạt 2,60:1.               */

.ht-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--ht-cham);
  padding: .7rem 1.3rem;
  border: 1px solid transparent; border-radius: 10px;
  font: inherit; font-size: var(--ht-cs-nut); font-weight: 700;
  /* 1,32 chứ không 1,2: nhãn nút dài xuống hai dòng thì chữ Việt hai tầng
     dấu sẽ chồng nhau. Nút đã có `min-height` và căn giữa nên nhãn một
     dòng không cao lên. */
  line-height: 1.32;
  cursor: pointer;
}
.ht-btn--chinh    { background: var(--ht-gold-strong); color: var(--ht-on-gold); border-color: var(--ht-gold-strong); }
.ht-btn--phu      { background: var(--ht-surface); color: var(--ht-text); border-color: var(--ht-border-field); }
.ht-btn--vien     { background: transparent; color: inherit; border-color: currentColor; }
/* ⚠️ D4 — `brightness(1.06)` LÀM SÁNG LÊN, mà nút phụ đã trắng #FFFFFF nên
   bị chặn trần: sáng thêm 6% vẫn ra #FFFFFF, lệch 0/255 mỗi kênh. Nút phụ và
   nút viền không đổi một điểm ảnh nào khi rê chuột.
   `brightness(.94)` làm TỐI đi nên đổi được ở cả hai chiều, và với nút chính
   thì chữ trắng trên nền tối hơn còn tăng tương phản: 5,32 → 5,86:1.
   Kèm một đường viền nổi lên để không nhận biết chỉ bằng màu.
   Số đo: nút phụ #FFFFFF → #F0F0F0, lệch 15/255, 1,14:1 so với nền thẻ. */
.ht-btn:hover:not([disabled]):not([aria-disabled="true"]) {
  filter: brightness(.94);
  border-color: var(--ht-gold-strong);
}

/* ── GD-03 · ĐANG NHẤN ────────────────────────────────────────────────────
   Trước bản 0.1.2, đếm bằng máy: toàn tệp có ĐÚNG 0 luật `:active`. Trên
   điện thoại KHÔNG có rê chuột — `:active` chính là phản hồi duy nhất khi
   ngón tay chạm xuống. Thiếu nó thì khách bấm mà không biết máy đã nhận. */
.ht-btn:active { filter: brightness(.94); transform: translateY(1px); }

/* Chặn mọi hiệu ứng khi nút đã khoá — luật màu nằm ở mục dưới (D5). */
.ht-btn[disabled]:hover,  .ht-btn[disabled]:active,
.ht-btn[aria-disabled="true"]:hover, .ht-btn[aria-disabled="true"]:active {
  filter: none; transform: none; border-color: var(--ht-border-field);
}
/* ⚠️ D5 — KHÔNG DÙNG ĐỘ TRONG CHO TRẠNG THÁI KHOÁ. `opacity: .5` làm mờ CẢ
   chữ lẫn nền cùng lúc: chữ trắng pha 50% với nền thẻ trắng vẫn ra trắng,
   còn nền nâu pha loãng thành be nhạt — chữ trắng trên nền be, đo được
   2,06:1. Mà đây không phải nút chết: `theme.js` khoá nút rồi đổi chữ thành
   "Đang gửi…", và câu đó là phản hồi DUY NHẤT cho khách biết yêu cầu đã đi.
   Khách lớn tuổi không đọc được, tưởng nút hỏng nên bấm lại — sinh yêu cầu
   trùng cho đội kinh doanh.

   Nay đổi sang một cặp nền–chữ riêng, vẫn trong bảng bảy màu:
       #202427 trên #F0F1EF  =  13,80:1                                    */
.ht-btn[disabled],
.ht-btn[aria-disabled="true"] {
  opacity: 1;
  filter: none;
  transform: none;
  cursor: not-allowed;
  background: var(--ht-surface-soft);
  color: var(--ht-text);
  border-color: var(--ht-border-field);
}
/* ⚠️ ĐANG GỬI KHÁC BỊ KHOÁ. "Bị khoá" là không bấm được; "đang gửi" là đang
   chạy. Trước đây hai thứ trông giống hệt nhau nên khách không biết máy đã
   nhận yêu cầu hay chưa. */
.ht-btn[aria-busy="true"] {
  background: var(--ht-surface-soft);
  color: var(--ht-text);
  border-color: var(--ht-border-field);
  cursor: progress;
}
.ht-btn[aria-busy="true"]::before {
  content: "";
  flex: 0 0 auto;
  width: 1em; height: 1em;
  border: 2px solid var(--ht-border-field);
  border-top-color: var(--ht-gold-strong);
  border-radius: 50%;
  animation: ht-quay .8s linear infinite;
}
@keyframes ht-quay { to { transform: rotate(360deg); } }

/* Người tắt chuyển động vẫn phải THẤY trạng thái, chỉ là không thấy nó quay. */
@media (prefers-reduced-motion: reduce) {
  .ht-btn[aria-busy="true"]::before {
    animation: none;
    border-color: var(--ht-gold-strong);
    border-right-color: var(--ht-border-field);
    border-bottom-color: var(--ht-border-field);
  }
}

/* Mọi liên kết thao tác đứng riêng đều đủ 44px */
.ht-cham { display: inline-flex; align-items: center; min-height: var(--ht-cham); }


/* ═══ 9. ĐƯỜNG DẪN PHÂN CẤP ═══════════════════════════════════════════════ */

.ht-breadcrumb { padding-block: var(--ht-s2); }
.ht-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .35rem .5rem; list-style: none; margin: 0; padding: 0; }
.ht-breadcrumb li { display: flex; align-items: center; gap: .5rem; font-size: var(--ht-cs-phu); color: var(--ht-text-soft); }
/* ⚠️ VÀNG ĐỒNG KHÔNG ĐƯỢC LÀM MÀU CHỮ — luật của bộ tiêu chuẩn, không phải
   ý tôi: "vàng chỉ là đường hoặc chi tiết nhấn", "không dùng vàng đồng làm
   màu chữ trên nền sáng nếu không đạt tương phản".
   Dấu "›" là CHỮ, và nó mang thông tin thứ bậc. Đo với var(--ht-gold):
       #B58A50 trên nền chính #F7F7F3 = 2,91:1   TRƯỢT
       #B58A50 trên nền phụ   #F0F1EF = 2,76:1   TRƯỢT
   Đổi sang var(--ht-gold-strong) — KHÔNG thêm màu mới vào bảng:
       #8A642F trên #F7F7F3 = 4,96:1   đạt
       #8A642F trên #F0F1EF = 4,70:1   đạt
       Tối: #C29A62 trên #242526 = 5,92:1   đạt (chế độ tối vốn đã đạt) */
.ht-breadcrumb li + li::before { content: "›"; color: var(--ht-text-soft); }
.ht-breadcrumb a { color: inherit; min-height: var(--ht-cham); display: inline-flex; align-items: center; }
.ht-breadcrumb [aria-current="page"] { color: var(--ht-text); font-weight: 600; }


/* ═══ 10. THẺ ═════════════════════════════════════════════════════════════
   Đặt nền thì đặt luôn màu chữ — luật số 2 ở đầu tệp.                      */

/* ⚠️ THẺ BÀI TỪNG DÍNH LIỀN NHAU, khe đo được 0,00px. Trong lưới `.ht-luoi`
   thì `gap` lo khoảng cách nên không lộ; nhưng ở `index.php` và `search.php`
   các thẻ là con TRỰC TIẾP của `.ht-wrap.ht-reading`, không có lưới.

   Và phải CHẶN BỀ NGANG: luật "trả lại bề rộng đầy đủ" ở mục cột chữ đọc gỡ
   `max-width` cho chữ bên trong `.ht-card` — đúng khi thẻ nằm trong lưới hẹp,
   nhưng sai khi thẻ trải trọn 1.360px: đoạn tóm tắt đo được 162 KÝ TỰ mỗi
   dòng, hơn gấp đôi ngưỡng 75. */
:where(.ht-noidung) > :where(.ht-wrap) > .ht-card,
:where(.ht-reading) > .ht-card {
  margin-bottom: var(--ht-s3);
  max-width: var(--ht-reading);
}

/* ⚠️ TIÊU ĐỀ BÊN TRONG HỘP FLEX VẪN GIỮ LỀ RIÊNG, mà trong hộp có `gap` thì
   gap và lề CỘNG vào nhau: khe số→h3 đo 8,00px còn khe h3→p đo 24,00px — so
   le 3,00 lần. Gỡ lề của tiêu đề để `gap` là thứ DUY NHẤT quyết định nhịp. */
:where(.ht-cua, .ht-card__body) :where(h2, h3, h4, p, ul, ol) { margin: 0; }

/* ⚠️ Tiêu đề thẻ là ĐÍCH CHẠM CHÍNH trên trang danh sách. Đo trên WordPress
   thật ở khổ 390px: tiêu đề MỘT DÒNG cao đúng 39,07px (cỡ 29,60px × giãn
   dòng 1,32) — hụt 4,93px so với ngưỡng chạm 44px của chính theme.
   `inline-block` là bắt buộc: đệm dọc trên phần tử nội dòng KHÔNG làm hộp
   dòng cao lên, chỉ tràn ra ngoài. */
.ht-card :is(h1, h2, h3) a {
  display: inline-block;
  padding-block: .16rem;
}

.ht-card {
  display: flex; flex-direction: column;
  background: var(--ht-surface); color: var(--ht-text);
  border: 1px solid var(--ht-border); border-radius: var(--ht-radius);
  overflow: hidden;
}
/* ⚠️ D10 — NHỊP DỌC TRONG THẺ TỪNG SO LE 2,67 LẦN: khe h2→p đo 25,59px còn
   khe p→p chỉ 9,59px, vì `gap` cộng dồn với lề của tiêu đề. .9rem = 14,4px
   → 28,8 + 14,4 = 43,2px = đúng 1,50 lần giãn dòng, đạt WCAG 1.4.8. */
.ht-card__body { padding: var(--ht-s3); display: flex; flex-direction: column; gap: .9rem; flex: 1; }
.ht-card__body p { color: var(--ht-text-soft); margin: 0; }
/* ⚠️ C8 — Ô GIỮ CHỖ LÀ ĐỂ GIỮ CHỖ, KHÔNG PHẢI CHỖ GHI CHÚ.
   Bản cũ có `display:grid; place-items:center; font-size; font-weight` — bốn
   dòng đó chỉ có tác dụng khi bên trong ô CÓ CHỮ, và chính chúng đã mời
   người dựng trang gõ "Ảnh thật thiết bị" vào, hiện ra trang công khai với
   tương phản 5,65:1, trông y hệt nội dung thật.

   Viền trong 1px là bắt buộc: nền #F0F1EF trên thẻ #FFFFFF chỉ chênh 1,13:1
   nên không kẻ viền thì ô giữ chỗ gần như vô hình. */
.ht-card__media {
  aspect-ratio: 16 / 10;
  background: var(--ht-surface-soft); color: var(--ht-text-soft);
  box-shadow: inset 0 0 0 1px var(--ht-border);
  display: block;              /* KHÔNG grid — ảnh phải lấp đầy khung */
  overflow: hidden;
}
/* ⚠️ C9 — KHÔNG CÓ MỘT LUẬT ĐÚNG CHO MỌI ẢNH. Đo trên khung 16:10:
       ảnh chụp ngang 3:2  → `cover` cắt  6,25%   → cắt được
       ảnh vuông 1:1       → `cover` cắt 37,50%   → KHÔNG cắt được
       ảnh dọc 3:4         → `cover` cắt 53,10%   → KHÔNG cắt được

   Mặc định để `cover` cho ảnh công trình và ảnh xưởng — đó là đa số. Ảnh sản
   phẩm nền trắng thì gắn thêm lớp `.ht-anh-sp` để dùng `contain`, giữ trọn
   hình máy.

   `object-position: 50% 35%` chứ không 50% 50%: phần đáng xem của ảnh bếp
   (mặt máy, tay nghề, người đứng bếp) nằm ở nửa trên; neo giữa cắt đều hai
   đầu nên ăn mất mặt máy.

   `border-radius: 0` là bắt buộc: `.ht-card` đã có `overflow: hidden` nên
   hai góc TRÊN tròn sẵn; bo thêm chỉ khoét hai vết ở hai góc DƯỚI, mỗi vết
   12×12px (30,90 px², chỗ sâu nhất 4,97px) lộ nền ô giữ chỗ ra giữa thân
   thẻ. */
.ht-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: 0;
  display: block;
}
/* Ảnh sản phẩm nền trắng: giữ trọn hình, không cắt */
.ht-card__media img.ht-anh-sp { object-fit: contain; object-position: center; }

/* Thẻ cửa vào — đường vàng ở mép trên là "chi tiết nhấn", đúng vai trò màu */
.ht-cua {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--ht-surface); color: var(--ht-text);
  border: 1px solid var(--ht-border); border-top: 3px solid var(--ht-gold);
  border-radius: var(--ht-radius); padding: var(--ht-s3);
  min-height: 176px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ht-cua:hover, .ht-cua:focus-visible { transform: translateY(-3px); border-color: var(--ht-gold); box-shadow: var(--ht-shadow); }

/* ⚠️ THẺ CŨNG PHẢI CÓ TRẠNG THÁI RÊ CHUỘT — trước 0.1.6 chỉ `.ht-cua` có.
   Thẻ danh mục thiết bị, thẻ dự án, thẻ bài kiến thức và hai thẻ của khối động
   đều là khối bấm được, nhưng rê chuột lên không có phản hồi nào. Người dùng
   chuột không biết chúng bấm được.

   Dùng `:focus-within` chứ không `:focus-visible`: bản thân thẻ không nhận
   tiêu điểm, mà liên kết BÊN TRONG nó nhận — nên phải bắt tiêu điểm của con. */
.ht-card:hover, .ht-card:focus-within,
.ht-content-card:hover, .ht-content-card:focus-within,
.ht-catalog-card:hover, .ht-catalog-card:focus-within {
  border-color: var(--ht-gold);
  box-shadow: var(--ht-shadow);
}
.ht-cua__so { font-size: var(--ht-cs-nho); font-weight: 900; color: var(--ht-text-soft); letter-spacing: .06em; }
.ht-cua p { color: var(--ht-text-soft); margin: 0; }
/* Thẻ chưa có trang đích: nêu rõ trạng thái, KHÔNG tạo trang mỏng chỉ để có link */
/* ⚠️ D6 — THẺ CHƯA CÓ TRANG ĐÍCH. `opacity: .72` kéo chữ mô tả xuống 3,43:1
   và làm mờ là dấu hiệu chỉ-bằng-độ-sáng, người mù màu lẫn người dùng chế độ
   màu ép buộc đều không nhận ra.
   Nay phân biệt bằng HÌNH DÁNG: viền ĐỨT NÉT. Số đo sau khi sửa:
       chữ chính #202427 trên #F0F1EF  = 13,80:1
       chữ mô tả #596064 trên #F0F1EF  =  5,65:1
       viền đứt  #7B8388 trên #F0F1EF  =  3,40:1  (WCAG 1.4.11 đòi 3,0) */
.ht-cua[aria-disabled="true"] {
  opacity: 1;
  cursor: default;
  background: var(--ht-surface-soft);
  color: var(--ht-text);
  border: 1px dashed var(--ht-border-field);
  border-top: 3px dashed var(--ht-border-field);
  box-shadow: none;
}
.ht-cua[aria-disabled="true"] p { color: var(--ht-text-soft); }
.ht-cua[aria-disabled="true"]:hover,
.ht-cua[aria-disabled="true"]:active {
  transform: none; box-shadow: none; border-color: var(--ht-border-field);
}
.ht-cua:active { transform: translateY(-1px); }
.ht-cua[aria-disabled="true"]:active { transform: none; }

.ht-luoi { display: grid; gap: var(--ht-s2); }
.ht-luoi--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ht-luoi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ht-luoi--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ⚠️ MỐC PHẢI LÙI, KHÔNG ĐƯỢC TRÙNG VÀ KHÔNG ĐƯỢC HỞ.
   Trình đơn máy tính bật ở `min-width: 1120px`, mà lưới lại đổi ở
   `max-width: 1000px` — nên dải 1001–1119px có trình đơn ĐIỆN THOẠI nhưng
   lưới vẫn 4 CỘT, mỗi thẻ chỉ còn ≈253px.
   Dùng 1119.98px chứ không 1119px, để không bỏ sót khổ lẻ trên máy có độ
   phân giải nhân đôi, ví dụ 1119,5px. */
@media (max-width: 1359.98px) { .ht-luoi--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1119.98px) { .ht-luoi--4, .ht-luoi--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ht-luoi--4, .ht-luoi--3, .ht-luoi--2 { grid-template-columns: 1fr; } }

/* Nhãn nhỏ — nền phủ vàng nhạt, chữ vẫn là chữ chính nên luôn đạt tương phản */
.ht-tag {
  display: inline-flex; align-items: center;
  padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid var(--ht-border); background: var(--ht-tint-gold);
  color: var(--ht-text);
  font-size: .83em; font-weight: 600; letter-spacing: .03em;
}


/* ═══ 11. BẢNG THÔNG SỐ VÀ SO SÁNH ════════════════════════════════════════
   Bảng rộng phải tự cuộn TRONG khung của nó, không được đẩy cả trang.      */

/* ⚠️ D9 — BẢNG CUỘN NGANG TỪNG KHÔNG CÓ DẤU HIỆU NÀO. Đo ở 320px: khung
   trong rộng 294px, bảng 684px → 57% bảng nằm ngoài tầm nhìn mà không ai
   biết. Thanh cuộn trên điện thoại đo được 0px.

   Bốn lớp nền: hai lớp CHE bám nội dung (`local`) nên tự biến mất khi đã
   cuộn tới mép; hai lớp BÓNG bám khung (`scroll`) nên luôn ở mép khung.
   Dùng `--ht-border` (#D9DDDA trên #FFFFFF đo 1,37:1) chứ không dùng
   `--ht-tint-hover` — lớp phủ 5% chỉ ra 1,04:1, mắt thường không thấy. */
.ht-bang-khung {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--ht-surface) 30%, rgba(var(--ht-bg-rgb), 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left,  var(--ht-surface) 30%, rgba(var(--ht-bg-rgb), 0)) right center / 40px 100% no-repeat local,
    linear-gradient(to right, var(--ht-border), rgba(var(--ht-bg-rgb), 0)) left center / 14px 100% no-repeat scroll,
    linear-gradient(to left,  var(--ht-border), rgba(var(--ht-bg-rgb), 0)) right center / 14px 100% no-repeat scroll;
  border: 1px solid var(--ht-border); border-radius: var(--ht-radius);
  background: var(--ht-surface); color: var(--ht-text);
}
/* min-width đổi từ 680px CỨNG sang 38em: 38 × 18px = 684px, gần y hệt con số
   cũ nhưng TỰ NỞ khi chữ to lên. Để nguyên 680px thì chữ to ra mà bảng đứng
   im, ô "1200 × 700 × 850 mm" bị bẻ hai dòng ngay trong ô. Bảng vẫn cuộn
   ngang trong .ht-bang-khung nên nới min-width không làm trang tràn ngang. */
/* ⚠️ C14 — KHÔNG ĐẶT `overflow` LÊN CHÍNH THẺ <table>. Đặt overflow lên
   table làm trình duyệt đổi `display` từ `table` sang `block`, và khi đó mọi
   ô mất khả năng dính (`position: sticky` trên `thead th` hết tác dụng), lại
   thành khối cuộn lồng trong khối cuộn. Việc cuộn ngang đã do `.ht-bang-khung`
   lo rồi. */
.ht-bang { width: 100%; min-width: 38em; border-collapse: collapse; overflow: visible; }
.ht-bang :is(th, td) { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--ht-border); }
.ht-bang thead th { background: var(--ht-surface-soft); color: var(--ht-text); font-weight: 700; position: sticky; top: 0; }
.ht-bang tbody tr:last-child :is(th, td) { border-bottom: 0; }
/* ⚠️ LỚP PHỦ TRÊN HÀNG BẢNG chỉ đo 1,10:1. Thứ làm nên dấu hiệu phải là KẺ
   SỌC chẵn/lẻ và VẠCH VÀNG ở cột đầu, không phải sắc nền. */
.ht-bang tbody tr:nth-child(even) :is(th, td) {
  background: var(--ht-surface-soft);
  color: var(--ht-text);
}
.ht-bang tbody tr:hover :is(th, td) {
  background: var(--ht-tint-gold);
  color: var(--ht-text);
}
.ht-bang tbody tr:hover :is(th, td):first-child {
  box-shadow: inset 3px 0 0 var(--ht-gold-strong);
}
.ht-bang-ghichu { padding: .75rem 1rem; border-top: 1px solid var(--ht-border); color: var(--ht-text-soft); font-size: var(--ht-cs-phu); }


/* ═══ 12. KHỐI TẢI TÀI LIỆU ═══════════════════════════════════════════════ */

.ht-tailieu { display: grid; gap: .75rem; }
.ht-tailieu__muc {
  display: flex; align-items: center; gap: var(--ht-s2);
  min-height: 64px; padding: .85rem var(--ht-s2);
  background: var(--ht-surface); color: var(--ht-text);
  border: 1px solid var(--ht-border); border-radius: var(--ht-radius);
}
.ht-tailieu__muc:hover { border-color: var(--ht-gold); }
.ht-tailieu__icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--ht-gold); border-radius: 9px; color: var(--ht-text); }
.ht-tailieu__ten { font-weight: 700; }
.ht-tailieu__meta { color: var(--ht-text-soft); font-size: var(--ht-cs-phu); }   /* .88em → .90em = 16,20px */


/* ═══ 13. BIỂU MẪU ════════════════════════════════════════════════════════
   Ô nhập cỡ chữ ≥16px: dưới 16px thì iPhone tự phóng to trang khi chạm vào
   ô, gây nhảy bố cục. 1em ở đây = 18,00px nên an toàn ở mọi khổ.

   Viền dùng --ht-border-field (3,86:1) chứ KHÔNG dùng --ht-border (1,28:1):
   viền ô nhập là ranh giới của một ô điều khiển, WCAG 1.4.11 đòi 3:1.      */

.ht-form { display: grid; gap: var(--ht-s2); }

/* ⚠️ NÚT GỬI LÀ CON TRỰC TIẾP CỦA LƯỚI nên bị kéo giãn bằng cả cột: đo được
   nút "Tìm" rộng 1.360px ở khổ 1440. Khổ máy tính trả về bề ngang tự nhiên;
   khổ điện thoại giữ hết dòng vì như vậy dễ bấm hơn. */
.ht-form > .ht-btn { justify-self: start; }
@media (max-width: 640px) { .ht-form > .ht-btn { justify-self: stretch; } }
/* ⚠️ C13 — BỀ NGANG THẬT CỦA BIỂU MẪU KHÔNG BÁM KHỔ MÀN HÌNH mà bám ô lưới
   cha: templates/lien-he.php lồng ba biểu mẫu vào `.ht-luoi--3`, nên ở khung
   nhìn 641px mỗi ô chỉ còn 114,25px và vùng gõ 86,7px — trong khi chuỗi
   "0932 699 924" cần 105,5px. Khách gõ số điện thoại mà không nhìn thấy hết.

   `auto-fit` đo bề ngang THỰC CÓ chứ không đoán theo @media.
   11rem = 176px, tính ra được: nhãn dài nhất "Điện thoại hoặc Zalo *" đo được
   174,0px nên 176px là ngưỡng nhỏ nhất còn giữ nhãn một dòng. */
.ht-form__luoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--ht-s2);
}
/* @media cũ ở đây đã BỎ: `auto-fit` tự đếm bề ngang thực có, chính xác hơn
   việc đoán theo khổ màn hình — và biểu mẫu này nằm trong một ô lưới nên khổ
   màn hình không nói lên bề ngang của nó. */
/* align-content: end — CẦN SAU KHI NÂNG CỠ CHỮ.
   `.ht-form__luoi` là lưới 2 cột, hai `.ht-field` cùng hàng bị kéo cao bằng
   nhau. Nhãn dài "Thiết bị hoặc mã máy cần báo giá" ở cỡ mới 16,92px chiếm
   ≈272px, mà một cột ở khổ hẹp nhất còn 2 cột chỉ rộng ≈300px — chạm mép.
   Nhãn xuống hai dòng trong khi nhãn bên cạnh ("Số lượng") một dòng thì hai
   ô nhập bắt đầu ở hai độ cao khác nhau, nhìn như trang bị lỗi.
   Đẩy cả cụm nhãn+ô xuống ĐÁY ô lưới thì đáy hai ô luôn thẳng; hai ô nhập
   cao bằng nhau nên đỉnh cũng thẳng. Một dòng, không cần subgrid. */
.ht-field { display: grid; gap: .4rem; align-content: end; }
.ht-field--rong { grid-column: 1 / -1; }

.ht-form label { font-weight: 700; font-size: var(--ht-cs-nhan); color: var(--ht-text); }
.ht-form .ht-batbuoc { color: var(--ht-error); }

.ht-form :is(input, select, textarea) {
  width: 100%; min-height: var(--ht-cham);
  padding: .65rem .8rem;
  font: inherit; font-size: 1em;
  background: var(--ht-surface); color: var(--ht-text);
  border: 1px solid var(--ht-border-field); border-radius: 10px;
}
.ht-form textarea { min-height: 8rem; line-height: var(--ht-lh); resize: vertical; }
.ht-form ::placeholder { color: var(--ht-text-soft); opacity: 1; }
/* ⚠️ D7 — TIÊU ĐIỂM TỪNG LÀM VIỀN Ô NHẬP YẾU ĐI: lúc thường #7B8388 đo
   3,86:1, khi có tiêu điểm đổi sang #B58A50 chỉ còn 3,13:1 — tụt 19% đúng
   lúc cần rõ nhất. Dùng --ht-gold-strong (5,32:1) và dày thêm 1px để dấu
   hiệu không chỉ là màu. `box-sizing: border-box` nên tăng viền KHÔNG làm ô
   nở ra hay nhảy bố cục. */
.ht-form :is(input, select, textarea):focus-visible {
  border-color: var(--ht-gold-strong);
  border-width: 2px;
}

/* Nút "Chọn tệp" do trình duyệt vẽ — trước đây không có một luật nào trong
   bất kỳ trạng thái nào, nên nó là mảnh giao diện duy nhất không theo theme. */
.ht-form input[type="file"]::file-selector-button {
  font: inherit; font-size: var(--ht-cs-nhan); font-weight: 600;
  margin-inline-end: .8rem;
  padding: .45rem .9rem;
  min-height: 36px;
  background: var(--ht-surface-soft); color: var(--ht-text);
  border: 1px solid var(--ht-border-field); border-radius: 8px;
  cursor: pointer;
}
.ht-form input[type="file"]::file-selector-button:hover { filter: brightness(.94); }
.ht-form input[type="file"]:disabled::file-selector-button { cursor: not-allowed; }

/* Rê chuột trên ô nhập — dấu hiệu NHẸ. Viền mặc định đã đủ rõ (3,86:1) và
   vòng nét tiêu điểm đã đạt 5,32; rê chuột chỉ là gợi ý thêm cho người dùng
   chuột, không phải cách nhận biết chính. */
.ht-form :is(input, select, textarea):hover:not(:disabled) { border-color: var(--ht-text-soft); }

/* GD-02 — ô nhập bị khoá */
.ht-form :is(input, select, textarea):disabled {
  background: var(--ht-surface-soft);
  color: var(--ht-text-soft);
  border-color: var(--ht-border);
  cursor: not-allowed;
}

/* Trạng thái lỗi — báo bằng CẢ màu, viền VÀ chữ, không chỉ bằng màu */
.ht-form [aria-invalid="true"] { border-color: var(--ht-error); border-width: 2px; }
.ht-loi { display: flex; align-items: flex-start; gap: .4rem; color: var(--ht-error); font-size: var(--ht-cs-phu); font-weight: 600; }
.ht-loi::before { content: "⚠"; }

/* Thông báo sau khi gửi */
/* ⚠️ D8 — ĐẠT VÀ LỖI TỪNG CHỈ KHÁC NHAU MỘT THỨ LÀ SẮC MÀU. Người mù màu
   đỏ–lục nhìn hai hộp y hệt nhau. Nay thêm hai dấu hiệu HÌNH DÁNG: biểu
   tượng ở đầu dòng và viền trái dày 5px.

   ⚠️ GIỮ NGUYÊN `background: var(--ht-surface)` ở hai luật dưới. KHÔNG đổi
   sang --ht-surface-soft: ở chế độ ánh sáng yếu nó là #333536 và chữ lỗi
   #D5958A trên nền đó là 4,99:1 — ĐẠT. (Bản cũ #D08A7D chỉ 4,47:1 nên đã đổi 04/09/2026.) */
.ht-thongbao {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: var(--ht-s2);
  border-radius: var(--ht-radius);
  border: 1px solid;
  border-left-width: 5px;
}
.ht-thongbao::before { flex: 0 0 auto; font-weight: 900; line-height: var(--ht-lh); }
.ht-thongbao--dat::before { content: "✓"; }
.ht-thongbao--loi::before { content: "⚠"; }
.ht-thongbao--dat { border-color: var(--ht-success); color: var(--ht-success); background: var(--ht-surface); }
.ht-thongbao--loi { border-color: var(--ht-error);   color: var(--ht-error);   background: var(--ht-surface); }

/* Vùng thông báo kết quả gửi biểu mẫu — THÊM Ở 0.1.1 cùng với mã gửi ngầm.
   Không tô màu ở đây: JavaScript gắn thêm .ht-thongbao--dat hoặc --loi, hai
   lớp đó đã sở hữu đủ cặp nền–chữ của chính chúng. */
.ht-form__ketqua { margin-bottom: var(--ht-s3); }

.ht-form__ghichu { color: var(--ht-text-soft); font-size: var(--ht-cs-phu); }


/* ═══ 14. ẢNH ═════════════════════════════════════════════════════════════
   Ảnh sản phẩm, xưởng và dự án GIỮ MÀU TỰ NHIÊN ở cả hai chế độ.
   Bản yêu cầu cấm đảo màu hoặc áp bộ lọc lên ảnh theo chế độ hiển thị.     */

:where(img, video, svg, canvas) { max-width: 100%; height: auto; }

/* ⚠️ KHUNG NHÚNG KHÔNG ĐƯỢC ĐẶT `height: auto`. Đó chính là thứ làm hỏng mọi
   iframe: `height: auto` XOÁ chiều cao khai trong thuộc tính HTML
   (`height="315"`) và khung rơi về 150px mặc định của trình duyệt — mất
   51,1% chiều cao. Đã đo trên WordPress thật: 560×150, tỉ lệ 3,73.
   Luật chống tràn của chính theme là thủ phạm, không phải thiếu luật.

   `<object>` là cách phổ biến để nhúng bản vẽ PDF vào trang sản phẩm; đo ở
   cột rộng 296px (khổ 320px), `<object width="800">` giữ nguyên 800px và
   TRÀN 504px. */
:where(iframe, object, embed) { max-width: 100%; }
:where(audio) { width: 100%; max-width: 100%; }
/* Bo góc để ảnh rời trong thân bài trông mềm. Ba loại ảnh dưới đây KHÔNG
   được bo: logo (bán kính 12px cắn 27,3% chiều cao logo 44px), ảnh lấp đầy
   một khung đã tự bo, và bản vẽ kỹ thuật (bo góc xén mất khung tên). */
:where(img) { border-radius: var(--ht-radius); }
:where(.custom-logo, .ht-card__media img, .ht-ban-ve img, img.ht-ban-ve) { border-radius: 0; }

/* ⚠️ C15 — VIDEO VÀ BẢN ĐỒ DÁN TAY. Trình duyệt cho `<iframe>` chiều cao mặc
   định 150px; thuộc tính `height="315"` của mã nhúng YouTube bị luật ảnh
   chung ghi đè, đo được chiều cao tính toán 154px — mất 51,1%.
   `aspect-ratio` giữ đúng tỉ lệ 16:9 ở mọi bề ngang. */
:where(iframe, video, embed, object) {
  max-width: 100%;
  border: 0;
}
:where(iframe:not([height]), .wp-block-embed iframe, iframe[src*="youtu"], iframe[src*="vimeo"], iframe[src*="google.com/maps"]) {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}


/* ═══ 15. HỖ TRỢ THỊ LỰC ══════════════════════════════════════════════════ */

@media (prefers-contrast: more) {
  :root {
    --ht-text: #000000; --ht-text-soft: #2A2F33;
    --ht-border: #6B7175; --ht-border-field: #3D4448;

    /* ⚠️ A5 — VÀNG ĐỒNG TỪNG BỊ BỎ QUÊN Ở ĐÂY. Nét gạch chân là dấu hiệu
       DUY NHẤT của liên kết trong thân bài, nên phải nâng theo.
       Đo: #B58A50 trên #F7F7F3 = 2,91:1 → #8A642F = 4,95:1.
       #8A642F đã có sẵn trong bảng khoá, không phải màu mới. */
    --ht-gold: #8A642F;
    /* #5F4113 trên #F7F7F3 = 8,90:1 */
    --ht-gold-text: #5F4113;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --ht-text: #FFFFFF; --ht-text-soft: #E3E5E4;
      --ht-border: #9AA0A2; --ht-border-field: #D2D6D8;
      /* Ở chế độ tương phản cao, nhường màu thương hiệu cho khả năng đọc:
         dùng chính màu chữ. Đo #FFFFFF trên #242526 = 15,35:1. */
      --ht-gold: #FFFFFF;
      --ht-gold-text: #FFFFFF;
    }
  }
  /* Bề mặt đảo màu tự đặt bốn biến này TRÊN CHÍNH NÓ nên luật :root ở trên
     không với tới chân trang. Phải nhắc lại đủ bốn. */
  .ht-surface-inverse, [data-surface="inverse"] {
    --ht-text-soft:    #E3E5E4;
    --ht-border:       #9AA0A2;
    --ht-border-field: #D2D6D8;
    --ht-gold:         #E8E8E3;   /* = --ht-on-inverse, đo 12,98:1 trên #202224 */
  }
}

/* Chế độ màu ép buộc của Windows — trả quyền quyết định màu cho hệ điều hành.

   ⚠️ A6 — `forced-color-adjust: none` LÀ THUỘC TÍNH KẾ THỪA. Đặt nó trên
   luật nhóm nghĩa là MỌI con bên trong thẻ cũng thoát khỏi chế độ ép, và giữ
   nguyên màu tác giả. Trường hợp xấu nhất đo được: chữ phụ #596064 nằm trên
   nền ButtonFace màu đen — gần như không đọc được. Nay chỉ giữ ĐƯỜNG VIỀN ở
   luật nhóm, và chỉ ghim màu ở đúng MỘT chỗ thật sự cần.

   ⚠️ A7 — Ở chế độ này `box-shadow` bị ép về none, mà dấu "mục đang đứng"
   của trình đơn lại vẽ bằng box-shadow → mất hẳn. Dựng lại bằng ĐƯỜNG VIỀN
   và CHỮ ĐẬM, hai dấu hiệu không phải màu.                                 */
@media (forced-colors: active) {
  .ht-btn, .ht-card, .ht-cua, .ht-tailieu__muc, .ht-menu-toggle,
  .ht-card__media { border: 1px solid ButtonBorder; }

  .ht-tag { border: 1px solid CanvasText; }

  /* Nút chính phải khác nút phụ. `forced-color-adjust: none` CHỈ đặt ở đây,
     trên đúng một phần tử, để cặp Highlight/HighlightText không bị ép. Kế
     thừa xuống phần chữ của chính nút — vô hại. */
  .ht-btn--chinh {
    forced-color-adjust: none;
    background: Highlight; color: HighlightText; border-color: Highlight;
  }

  .ht-nav [aria-current="page"],
  .ht-menu [aria-current="page"] {
    border-bottom: 3px solid Highlight;
    font-weight: 700;
  }

  /* Đạt và Lỗi phân biệt bằng HÌNH DÁNG, không phải màu */
  .ht-thongbao--dat { border: 1px solid CanvasText; }
  .ht-thongbao--loi { border: 3px double CanvasText; }

  /* ⚠️ NÚT TRÌNH ĐƠN ĐANG MỞ: dấu hiệu duy nhất là MÀU, nên ở chế độ này mất
     sạch. Ngoài khối này, trạng thái mở chỉ được đánh bằng
         background: var(--ht-tint-gold)      → đo 1,10:1, gần như vô hình
         border-color: var(--ht-gold-strong)  → màu bị hệ điều hành ép
     Nhãn nút vẫn là "Trình đơn" (theme.js không đổi chữ) và ba vạch không
     biến thành dấu X, nên người dùng không còn cách nào nhận ra nút đang mở.
     Đây đúng là điều 1.4.1 cấm: không được truyền tin CHỈ bằng màu.
     Thêm dấu hiệu HÌNH DÁNG — viền đôi dày, thứ mà chế độ màu ép buộc giữ. */
  .ht-menu-toggle[aria-expanded="true"] {
    border: 3px double CanvasText;
    font-weight: 700;
  }

  /* Độ trong KHÔNG bị chế độ này ép — phải tự tắt, nếu không thành phần bị
     khoá vẫn mờ chồng lên màu hệ thống. */
  .ht-btn[disabled], .ht-btn[aria-disabled="true"],
  .ht-cua[aria-disabled="true"] { opacity: 1; color: GrayText; border-color: GrayText; }
}

/* ═══ PHÂN TRANG VÀ CHỮ CHỈ DÀNH CHO TRÌNH ĐỌC MÀN HÌNH ═══════════════════
   ⚠️ CẢ MỤC NÀY TỪNG KHÔNG TỒN TẠI. Đếm bằng máy trên bản cũ:
   `page-numbers|nav-links|pagination|screen-reader` → 0 kết quả.

   `the_posts_pagination()` của WordPress in ra một thẻ h2 chỉ dành cho trình
   đọc màn hình, mang lớp `.screen-reader-text`. Theme PHẢI tự khai lớp ẩn đó
   — không trông chờ CSS của lõi, vì inc/assets.php đang gỡ bớt CSS lõi.
   Không khai thì chữ "Posts navigation" hiện to bằng H2: đo được 38,4px ở
   khổ 1440 và 27,36px ở khổ 390, chình ình giữa trang.

   Và mỗi số trang từng chỉ rộng 9,6px, cao 23px, dính liền nhau — không đủ
   ngưỡng chạm 44px của chính tệp này.                                      */

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Đi bằng bàn phím tới thì phải hiện ra, nếu không người dùng mất dấu. */
.screen-reader-text:focus {
  position: static; width: auto; height: auto;
  margin: 0; overflow: visible; clip-path: none; white-space: normal;
}

.pagination { padding-block: var(--ht-s3); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--ht-s1); }

.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--ht-cham); min-height: var(--ht-cham);
  padding: 0 .6rem;
  background: var(--ht-surface); color: var(--ht-text);
  border: 1px solid var(--ht-border-field); border-radius: 10px;
  font-weight: 600; text-decoration: none;
}
.pagination .page-numbers:hover { filter: brightness(.94); }
.pagination .page-numbers.current {
  background: var(--ht-gold-strong); color: var(--ht-on-gold);
  border-color: var(--ht-gold-strong);
  font-weight: 700;
}
.pagination .page-numbers.dots { border-color: transparent; background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;      /* !important: phải thắng mọi
                                                   hiệu ứng của mọi thành phần */
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══ 16. KHÔNG TRÀN NGANG ════════════════════════════════════════════════ */

/* Thẻ <main> nở ra chiếm hết chỗ thừa, đẩy chân trang xuống đáy — đi kèm
   `display: flex` trên body ở mục 3. */
.ht-noidung { flex: 1 0 auto; }

/* ⚠️ C16 — ĐÂY LÀ THỦ PHẠM THẬT của lỗi bảng: luật này đặt `display: block`
   và `overflow-x: auto` lên MỌI thẻ <table> trong thân trang, kể cả bảng
   thông số `.ht-bang`. Table mà đổi sang `display: block` thì mất hết tính
   chất bảng: `position: sticky` trên `thead th` hết tác dụng, và bảng thành
   khối cuộn LỒNG trong khối cuộn `.ht-bang-khung`.
   Nay loại `.ht-bang` ra — nó đã có khung cuộn riêng rồi. Bảng do người biên
   tập dán vào thân bài vẫn được cứu như cũ. */
:where(.ht-noidung) :where(table:not(.ht-bang), pre) {
  display: block; max-width: 100%; overflow-x: auto;
}

/* Bỏ qua liên kết — người dùng bàn phím nhảy thẳng vào nội dung */
/* ⚠️ HỘP NÀY TỪNG TRẮNG TRÊN NỀN ĐẦU TRANG CŨNG TRẮNG: đo được 1,00:1, chỉ
   còn viền 1px phân biệt. Người dùng bàn phím bấm Tab lần đầu vào trang thấy
   một khung mờ ảo. Dùng cặp bề mặt đảo màu — nó SỞ HỮU cả nền lẫn chữ, đo
   #E8E8E3 trên #202224 = 12,98:1. */
.ht-skip {
  position: absolute; left: -9999px;
  background: var(--ht-surface-inverse);
  color: var(--ht-on-inverse);
  border: 1px solid var(--ht-gold); border-radius: 8px;
  padding: .7rem 1rem; z-index: 100;
  font-weight: 700;
}

/* `tabindex="-1"` làm <main> nhận được tiêu điểm; không chặn thì nó ăn luôn
   vòng nét 3px mỗi lần bấm liên kết bỏ qua, và người dùng thấy một khung
   vàng ôm trọn nửa trang. */
.ht-noidung:focus, .ht-noidung:focus-visible { outline: none; }
.ht-skip:focus { left: 1rem; top: 1rem; }


/* ═══ 17. CHÂN TRANG ══════════════════════════════════════════════════════
   Nền graphite trung tính. Dùng lớp .ht-surface-inverse ở mục 5 nên mọi chữ, liên kết
   và đường kẻ bên trong tự đảo — không phải khai lại màu nào.              */

/* ⚠️ A8 — CHÂN TRANG TỪNG TAN VÀO NỀN TRANG ở chế độ ánh sáng yếu:
   #202224 so với nền trang #242526 đo được 1,03:1 — mắt không thấy ranh giới.
   Đường kẻ vàng mảnh ở mép trên: chế độ Sáng thì thừa nhưng vô hại, chế độ
   ánh sáng yếu thì đó là thứ DUY NHẤT tách chân trang khỏi nội dung.
   --ht-gold trong vùng đảo màu = #C29A62, đo 6,15:1 trên #202224. */
.ht-footer {
  margin-top: var(--ht-s6);
  padding-block: var(--ht-s5);
  border-top: 2px solid var(--ht-gold);
}
/* ⚠️ C12 — SỐ CỘT CHÂN TRANG KHÔNG CỐ ĐỊNH. footer.php chỉ in cột nào đã
   được gán trình đơn, nên thực tế ra 1, 2, 3 hoặc 4 cột. Khai cứng 4 rãnh thì
   trường hợp 2 cột bỏ trống 633,5px và 1 cột bỏ trống 950,2px ở khổ 1440.
   `auto-fit` đếm số cột THẬT và chia hết bề ngang cho chúng.
   `min(15rem, 100%)` để màn hình hẹp hơn 240px vẫn không tràn. */
.ht-footer__luoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--ht-s3);
}
/* Hai @media cũ ở đây đã BỎ — `auto-fit` tự lo mọi khổ:
   khung 366px → 1 cột · 605px → 2 cột · 964px → 3 cột · 1360px → 4 cột. */
/* 1,05em × 18 = 18,90px, chỉ hơn thân bài 0,90px — mắt không nhận ra đó là
   tiêu đề cột. 1,15em × 18 = 20,70px, chênh 2,70px, đủ tách bậc mà vẫn nhỏ
   hơn H4 (22,08px). Luật này thắng `:where(h2)` ở mục 3 vì `:where()` có độ
   ưu tiên bằng 0, còn luật này là (0,1,1). */
/* 20,70px -> 28px: tieu de cot chan trang la tieu de MUC (khong phai tieu de
   the), san h2 = 28 may tinh / 25 dien thoai theo bang khoa.
   Dung max(28px, 1.15em) chu khong phai 28px tran: nguon vietbang `em`, luat
   soat bat buoc giu `em` cu ben trong max() de khong ha co chu cua nguoi doc
   da phong to trong may. */
.ht-footer h2 { font-size: max(28px, 1.15em); letter-spacing: .04em; margin-bottom: .75rem; }
@media (max-width: 767px) {
  /* 28px -> 25px: san h2 tren dien thoai (giu `em` trong max) */
  .ht-footer h2 { font-size: max(25px, 1.15em); }
}
.ht-footer ul { list-style: none; margin: 0; padding: 0; }
.ht-footer a { display: inline-flex; align-items: center; min-height: var(--ht-cham); }
.ht-footer__duoi { margin-top: var(--ht-s4); padding-top: var(--ht-s2); border-top: 1px solid var(--ht-border); font-size: var(--ht-cs-phu); }


/* ═══ 18. GUTENBERG / CORE BLOCKS ═════════════════════════════════════════
   Cấu trúc ở đây áp dụng cho nội dung do the_content() in ra. WordPress vẫn
   nạp global-styles từ theme.json; các luật dưới đây chỉ hoàn thiện bố cục
   mà global-styles không thể biết từ khung đọc của theme.                    */

:where(.ht-reading) :where(.wp-block-group, .wp-block-cover) {
  box-sizing: border-box;
}

:where(.ht-reading) .wp-block-columns {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--ht-s3);
}
:where(.ht-reading) .wp-block-column { min-width: 0; flex: 1 1 0; }

:where(.ht-reading) .wp-block-media-text {
  display: grid;
  grid-template-columns: 50% 1fr;
  align-items: center;
  gap: var(--ht-s3);
}
:where(.ht-reading) .wp-block-media-text.has-media-on-the-right {
  grid-template-columns: 1fr 50%;
}
:where(.ht-reading) .wp-block-media-text__media,
:where(.ht-reading) .wp-block-media-text__media img { width: 100%; }

:where(.ht-reading) .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ht-cham);
  padding: .72rem 1rem;
  border-radius: 8px;
  background: var(--ht-gold-strong);
  /* ⚠️ PHẢI LÀ BIẾN, KHÔNG ĐƯỢC ĐÓNG CỨNG #fff.
     `--ht-gold-strong` ĐỔI theo chế độ: #8A642F ở chế độ Sáng, #C29A62 ở chế
     độ ánh sáng yếu. Chữ đóng cứng trắng thì ở chế độ tối thành #FFFFFF trên
     #C29A62 = 2,59:1 — thiếu 1,91 điểm so với ngưỡng 4,5. Rê chuột còn tệ hơn:
     brightness(.92) kéo xuống 2,54:1.

     Trớ trêu là chính tệp này đã ghi rõ ở mục nút chính: "TUYỆT ĐỐI không dùng
     #C29A62 + chữ trắng — chỉ đạt 2,60:1", và `.ht-btn--chinh` đã làm đúng.
     Nhưng nút của KHỐI Gutenberg — thứ biên tập viên chèn vào thân bài, tức là
     nút xuất hiện nhiều nhất trên site — thì lại bỏ sót.

     Sau khi sửa:  Sáng #FFFFFF trên #8A642F = 5,32:1
                   Tối  #202427 trên #C29A62 = 6,02:1
                   Rê chuột ở chế độ tối     = 5,55:1                       */
  color: var(--ht-on-gold);
  font-weight: 700;
  line-height: 1.32;   /* xem ghi chú ở `.ht-btn` */
  text-decoration: none;
}
:where(.ht-reading) .wp-block-button__link:hover { filter: brightness(.92); }

:where(.ht-reading) .wp-block-table { max-width: 100%; overflow-x: auto; }
:where(.ht-reading) .wp-block-table table { width: 100%; border-collapse: collapse; }
:where(.ht-reading) .wp-block-table :where(th, td) {
  padding: .65rem .8rem;
  border: 1px solid var(--ht-border);
  text-align: start;
}

:where(.ht-reading) :where(.wp-block-quote, .wp-block-pullquote) {
  border-color: var(--ht-gold);
}
:where(.ht-reading) .wp-block-separator { border-color: var(--ht-border); }
:where(.ht-reading) .wp-block-image img { width: auto; max-width: 100%; height: auto; }
:where(.ht-reading) .wp-block-embed__wrapper { max-width: 100%; }

:where(.ht-reading) .alignwide {
  width: min(var(--ht-max), calc(100vw - 2.25rem));
  max-width: none;
}
:where(.ht-reading) .alignfull {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-inline: -50vw 0;
}

@media (max-width: 700px) {
  :where(.ht-reading) .wp-block-columns { flex-direction: column; }
  :where(.ht-reading) .wp-block-media-text,
  :where(.ht-reading) .wp-block-media-text.has-media-on-the-right {
    grid-template-columns: 100%;
  }
  :where(.ht-reading) .wp-block-media-text__media,
  :where(.ht-reading) .wp-block-media-text__content {
    grid-column: 1;
    padding-inline: 0;
  }
  :where(.ht-reading) .wp-block-media-text__media { grid-row: 1; }
  :where(.ht-reading) .wp-block-media-text__content { grid-row: 2; }
  :where(.ht-reading) .alignwide { width: calc(100vw - 1.5rem); }
}

/* ═══ MANG SANG TỪ BẢN 0.1.2 CỦA CLAUDE — NHỮNG LUẬT 0.1.3 CHƯA CÓ ════════
   Bốn nhóm dưới đây được đo trên WordPress 7.1 thật và trên 12 loại trang.
   ═════════════════════════════════════════════════════════════════════════ */


/* ── 1. CHUỖI DÀI KHÔNG NGẮT ĐƯỢC LÀM TRÀN CẢ TRANG ──────────────────────
   Đếm trên bản cũ: `overflow-wrap` · `word-break` · `hyphens` đều 0 lần.
   Địa chỉ thư điện tử, mã máy HT-RC24-…, tên tệp tài liệu đều đẩy tràn.
   Đo ở 320px: một địa chỉ thư 44 ký tự làm trang rộng 376px — TRÀN 56px.

   `break-word` cho thân trang chứ không `anywhere`: nó chỉ ngắt khi thật sự
   không còn cách nào khác, nên chữ thường vẫn xuống dòng theo từ.            */

:where(body) { overflow-wrap: break-word; }

/* Trong lưới và thẻ thì cần `anywhere`: nó tính CẢ vào bề rộng tối thiểu của
   ô lưới, nhờ vậy một mã máy dài không kéo giãn cả cột. */
:where(.ht-cua, .ht-card, .ht-tailieu, .ht-bang, .ht-breadcrumb,
       .ht-menu, .ht-nav, .ht-footer) { overflow-wrap: anywhere; }


/* ── 2. NỘI DUNG DO TRÌNH SOẠN THẢO SINH RA ──────────────────────────────
   WordPress giao ba lệnh căn ảnh cho THEME lo — lõi không cấp luật cho theme
   cổ điển. Biên tập viên chọn "Căn trái" thì trong trình soạn thảo thấy chữ
   chảy vòng quanh, ra trang thật thì ảnh dán thẳng vào giữa câu. Đo được:
   `float: none` · `display: inline` · `margin-right: 0px` — hiệu lực BẰNG 0. */

.alignleft  { float: left;  margin: .25rem var(--ht-s2) var(--ht-s2) 0; max-width: 50%; }
.alignright { float: right; margin: .25rem 0 var(--ht-s2) var(--ht-s2); max-width: 50%; }
.aligncenter { display: block; margin-inline: auto; }

/* Dưới 640px thì thả nổi làm cột chữ còn quá hẹp — trả về một cột. */
@media (max-width: 640px) {
  .alignleft, .alignright {
    float: none; display: block;
    margin-inline: auto; max-width: 100%;
  }
}

/* Chú thích ảnh của trình soạn thảo cổ điển */
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption {
  margin-top: var(--ht-s1);
  font-size: var(--ht-cs-nho);
  line-height: 1.75;
  color: var(--ht-text-soft);
  text-align: start;
}

/* ⚠️ ĐỘ ƯU TIÊN PHẢI THẮNG BIỂU KIỂU CỦA WORDPRESS.
   `add_theme_support('wp-block-styles')` kéo về `wp-block-library-theme`,
   trong đó có nguyên văn
       :root :where(.wp-block-image figcaption){color:#555;font-size:13px}
   độ ưu tiên (0,1,0) vì `:root` tính một lớp. Luật `:where()` của theme là
   (0,0,0) nên THUA. Hậu quả đo được: chú thích ảnh bị đè về #555 13px, tương
   phản 2,06:1 trên nền chế độ ánh sáng yếu — cần 4,5.
   Viết `:root :where(...)` để hoà độ ưu tiên rồi thắng bằng thứ tự nạp.     */
:root :where(.wp-block-image figcaption, figure figcaption) {
  color: var(--ht-text-soft);
  font-size: var(--ht-cs-nho);
  text-align: start;
}

/* Đường ngắt phần. Không có luật thì trình duyệt dùng viền 3D xám #808080 —
   màu thứ chín ngoài bảy màu đã khoá, và không đổi theo chế độ Sáng/Tối. */
:where(hr, .wp-block-separator) {
  height: 0;
  margin-block: var(--ht-s4);
  border: 0;
  border-top: 1px solid var(--ht-border);
}


/* ── 3. BẢNG MÀU CỦA TRÌNH SOẠN KHỐI ─────────────────────────────────────
   `theme.json` khoá cứng tám mã màu của chế độ SÁNG, nên khối được tô màu sẽ
   hỏng ở chế độ ánh sáng yếu — đo được 1,01–1,22:1. Khai qua BIẾN thì màu tự
   đổi theo chế độ.

   ⚠️ SỬA THEME.JSON HAY ĐỔI TÊN MÀU THÌ PHẢI SỬA CẢ Ở ĐÂY.                */

:root {
  --wp--preset--color--ht-bg:           var(--ht-bg);
  --wp--preset--color--ht-surface:      var(--ht-surface);
  --wp--preset--color--ht-surface-soft: var(--ht-surface-soft);
  --wp--preset--color--ht-text:         var(--ht-text);
  --wp--preset--color--ht-text-soft:    var(--ht-text-soft);
  --wp--preset--color--ht-border:       var(--ht-border);
  /* Giữ biến này dù `ht-gold` không còn trong bảng màu: nội dung đăng trước
     bản 0.1.5 có thể đang tham chiếu tới nó qua kiểu nội tuyến. */
  --wp--preset--color--ht-gold:         var(--ht-gold);
  --wp--preset--color--ht-gold-strong:  var(--ht-gold-strong);
}

.has-ht-bg-color           { color: var(--ht-bg); }
.has-ht-surface-color      { color: var(--ht-surface); }
.has-ht-surface-soft-color { color: var(--ht-surface-soft); }
.has-ht-text-color         { color: var(--ht-text); }
.has-ht-text-soft-color    { color: var(--ht-text-soft); }
.has-ht-border-color       { color: var(--ht-border); }
/* ⚠️ LỚP CŨ — GIỮ LẠI ĐỂ NỘI DUNG ĐÃ ĐĂNG KHÔNG HỎNG, NHƯNG ĐỔI MÀU.
   `ht-gold` đã bị gỡ khỏi bảng màu của trình soạn khối ở bản 0.1.5, nên từ nay
   không ai CHỌN được nó nữa. Nhưng nội dung đăng trước đó có thể đã mang lớp
   `.has-ht-gold-color`, và WordPress không còn sinh luật cho lớp đó.
   Để nguyên #B58A50 thì những đoạn ấy vĩnh viễn ở 2,91:1. Trỏ sang vàng đậm
   là vừa giữ đúng sắc vàng Hà Tiên vừa nâng lên 4,96:1 — không mất nội dung,
   không cần ai đi sửa tay từng bài. */
.has-ht-gold-color         { color: var(--ht-gold-text); }
.has-ht-gold-strong-color  { color: var(--ht-gold-text); }

.has-ht-bg-background-color           { background-color: var(--ht-bg); }
.has-ht-surface-background-color      { background-color: var(--ht-surface); }
.has-ht-surface-soft-background-color { background-color: var(--ht-surface-soft); }
.has-ht-text-background-color         { background-color: var(--ht-text); }
.has-ht-text-soft-background-color    { background-color: var(--ht-text-soft); }
.has-ht-border-background-color       { background-color: var(--ht-border); }
.has-ht-gold-background-color         { background-color: var(--ht-gold); }
.has-ht-gold-strong-background-color  { background-color: var(--ht-gold-strong); }

/* ⚠️ LƯỚI AN TOÀN CHO LUẬT KHOÁ "SỞ HỮU CẢ CẶP NỀN–CHỮ".
   Khối chỉ được tô NỀN mà không chọn màu chữ thì rơi vào đúng cái bẫy đó.
   Ba nền đậm dưới đây tự kéo theo màu chữ sáng. Biên tập viên chọn màu chữ
   riêng thì lớp `.has-…-color` vẫn thắng. */
.has-ht-text-background-color:not(.has-text-color),
.has-ht-text-soft-background-color:not(.has-text-color),
.has-ht-gold-strong-background-color:not(.has-text-color) { color: var(--ht-on-gold); }

/* ⚠️ NỀN VÀNG ĐỒNG PHẢI TÁCH RA, KHÔNG GỘP VÀO DÒNG TRÊN.
   Lỗi này do chính lưới an toàn ở trên bỏ sót `.has-ht-gold-background-color`.
   Đo được khi chữ thừa hưởng:
       Sáng  #202427 trên #B58A50 = 5,00:1   đạt
       Tối   #E8E8E3 trên #C29A62 = 2,11:1   TRƯỢT
   Nên phải vá. Nhưng KHÔNG được vá bằng `var(--ht-on-gold)` như ba lớp trên:
       Sáng  --ht-on-gold = #FFFFFF trên #B58A50 = 3,13:1   HỎNG NGƯỢC LẠI
   Vá đúng là ĐÓNG CỨNG mực sẫm cho cả hai chế độ, vì hai sắc vàng #B58A50 và
   #C29A62 đều là màu trung tính đủ sáng để mực sẫm nổi trên cả hai:
       Sáng  #202427 trên #B58A50 = 5,00:1   đạt
       Tối   #202427 trên #C29A62 = 6,03:1   đạt
   #202427 không phải màu mới — đó chính là `--ht-text` của chế độ Sáng. */
:root { --ht-muc-tren-vang: #202427; }
.has-ht-gold-background-color:not(.has-text-color) { color: var(--ht-muc-tren-vang); }

/* ⚠️ BỐN MÀU GẦN TRẮNG KHÔNG DÙNG ĐƯỢC LÀM MÀU CHỮ TRÊN NỀN SÁNG.
   Đo trên nền chính #F7F7F3: ht-bg 1,00:1 · ht-surface 1,07:1 ·
   ht-surface-soft 1,06:1 · ht-border 1,28:1. Chữ biến mất hoàn toàn.

   Nhưng chúng CHÍNH ĐÁNG khi đặt trên nền đậm — chữ trắng trên chân trang
   graphite là đúng. Nên luật này không cấm, mà chỉ đổi hướng: ngoài vùng đảo
   màu thì trả về màu chữ chính; trong vùng đảo màu thì giữ nguyên ý người
   biên tập.

   Đây là chỗ CỐ Ý đè lên lựa chọn của người biên tập, và chỉ đè theo một
   hướng: từ "không đọc được" sang "đọc được". Bộ tiêu chuẩn ghi rõ "đã đặt
   màu chữ thì phải nắm được nền đi kèm" — mà lớp `.has-*-color` thì không
   nắm được nền, nên theme phải nắm thay.

   Độ ưu tiên: `.has-x-color` là (0,1,0); `:root .has-x-color` cũng (0,1,0)
   nhưng nạp sau nên thắng. Khối có chọn nền riêng (`.has-background`) thì
   loại trừ — lúc đó người biên tập đã sở hữu cả cặp.                        */
:root :is(.has-ht-bg-color, .has-ht-surface-color,
          .has-ht-surface-soft-color, .has-ht-border-color):not(.has-background) {
  color: var(--ht-text);
}
:is(.ht-surface-inverse, [data-surface="inverse"])
  :is(.has-ht-bg-color, .has-ht-surface-color,
      .has-ht-surface-soft-color, .has-ht-border-color) {
  color: var(--ht-surface);
}

.has-background { padding: var(--ht-s2); border-radius: var(--ht-radius); }


/* ── 4. TRẠNG THÁI RỖNG ──────────────────────────────────────────────────
   Ba chỗ — tìm kiếm không kết quả, danh mục chưa có bài, danh mục thiết bị
   chưa có nhóm — trước đây chỉ là một dòng chữ trơ giữa trang, người đọc lướt
   qua mà không nhận ra đó chính là câu trả lời.
   #202427 trên #F0F1EF đo 13,80:1; viền #7B8388 trên #F0F1EF đo 3,40:1.    */

.ht-rong {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: var(--ht-s3);
  background: var(--ht-surface-soft); color: var(--ht-text);
  border: 1px dashed var(--ht-border-field);
  border-radius: var(--ht-radius);
  max-width: var(--ht-reading);
}
.ht-rong::before {
  content: "⌕"; flex: 0 0 auto;
  font-size: 1.6em; line-height: 1;
  color: var(--ht-gold-text);
}

/* ═══ HAI KHỐI ĐỘNG CỦA TRÌNH SOẠN KHỐI ═══════════════════════════════════
   ⚠️ TRƯỚC BẢN 0.1.5 KHÔNG CÓ MỘT DÒNG NÀO. Đếm bằng máy trên bản 0.1.4:

       ht-content-list · ht-content-card · ht-catalog-list
       ht-catalog-card · ht-columns- · wp-block-hatien       → 0 kết quả

   Nghĩa là hai khối `hatien/content-list` và `hatien/catalog-list` in ra HTML
   hoàn toàn không có kiểu dáng: ảnh nguyên cỡ gốc, thẻ dính liền nhau, không
   thành cột. Trên trang thật thì đó là một đống chữ và ảnh chồng lên nhau.

   Lưới ở đây KHÔNG dùng lại `.ht-luoi` vì số cột do người biên tập chọn (1–4)
   chứ không phải do khuôn quy định, nên phải đọc từ lớp `.ht-columns-N`.
   ═══════════════════════════════════════════════════════════════════════ */

.ht-content-list,
.ht-catalog-list {
  display: grid;
  gap: var(--ht-s2);
  margin-block: var(--ht-s3);
}

/* ⚠️ DÙNG ĐÚNG HAI MỐC CỦA THEME: 640px và 1120px.
   Bản đầu tôi đặt mốc riêng 720px cho hai khối này. Sai — theme đã có hệ mốc
   640 / 1120 / 1360, thêm 720 là điểm ngắt thứ tư chỉ phục vụ hai khối, và
   người đọc sẽ thấy trang đổi bố cục ở một chỗ mà không khối nào khác đổi. */
@media (min-width: 640px) {
  .ht-columns-2,
  .ht-columns-3,
  .ht-columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Từ mốc máy tính mới cho đủ số cột người biên tập chọn: 3 hoặc 4 cột ở khổ
   máy tính bảng là quá chật cho tiếng Việt — tiêu đề 40 ký tự ở cột rộng
   240px phải xuống 4 dòng. */
@media (min-width: 1120px) {
  .ht-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ht-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ht-content-card,
.ht-catalog-card {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: var(--ht-s3);
  background: var(--ht-surface);
  border: 1px solid var(--ht-border);
  border-radius: var(--ht-radius);
  /* Mã máy và tên tệp dài không được kéo giãn cả cột lưới. */
  overflow-wrap: anywhere;
}

.ht-content-card__image,
.ht-catalog-card__image {
  display: block;
  margin: calc(var(--ht-s3) * -1) calc(var(--ht-s3) * -1) 0;
  border-radius: var(--ht-radius) var(--ht-radius) 0 0;
  overflow: hidden;
  /* Ô giữ chỗ khi ảnh chưa tải xong — không để khối nhảy chiều cao. */
  background: var(--ht-surface-soft);
  box-shadow: inset 0 0 0 1px var(--ht-border);
  aspect-ratio: 16 / 10;
}
.ht-content-card__image img,
.ht-catalog-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
}

.ht-content-card__title,
.ht-catalog-card__title {
  margin: 0;
  font-size: var(--ht-h4);
  line-height: var(--ht-lh-head);
}
/* ⚠️ VÙNG BẤM PHẢI ÉP BẰNG `min-height`, KHÔNG ÉP BẰNG KHOẢNG ĐỆM.
   Chú thích cũ ghi "cùng luật với `.ht-card`" — nhưng `.ht-card` dùng h2 còn
   hai lớp này dùng h4, nhỏ hơn 9,12px, nên cùng con số đệm .16rem là KHÔNG đủ.

   Đo ở khổ 390px:  --ht-h4 chạm sàn 20,48px × giãn dòng 1,32 = 27,03px,
                    cộng 2 × 2,56px đệm = 32,15px — hụt 11,85px, tức 27%.
   Đo ở khổ 1440px: 22,08 × 1,32 + 5,12 = 34,27px — vẫn hụt 9,73px.

   `inline-flex` + `min-height` ép hộp lên đủ 44px kể cả khi tiêu đề chỉ một
   dòng; tiêu đề nhiều dòng vẫn tự cao lên nên không mất gì.                */
.ht-content-card__title a,
.ht-catalog-card__title a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ht-cham);
  padding-block: .16rem;
  text-decoration: none;
  color: inherit;
}
.ht-content-card__title a:hover,
.ht-catalog-card__title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--ht-gold-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: .24em;
}

.ht-content-card__date {
  display: block;
  font-size: var(--ht-cs-nho);
  line-height: 1.75;
  color: var(--ht-text-soft);
}

.ht-content-card__excerpt,
.ht-catalog-card__excerpt {
  margin: 0;
  color: var(--ht-text-soft);
  /* Đẩy xuống đáy để các thẻ trong một hàng thẳng chân nhau. */
  margin-top: auto;
}

/* Lời nhắc khi bản xem trước trong trình soạn thảo không có gì để hiện. */
.ht-khoi-trong {
  margin: 0;
  padding: var(--ht-s3);
  background: var(--ht-surface-soft);
  color: var(--ht-text);
  border: 1px dashed var(--ht-border-field);
  border-radius: var(--ht-radius);
}

/* Lưới một cột — dùng cho khối nội dung tự soạn cần một cột đầy đủ.
   (Luật của dải "ô thứ bảy" ở bản 0.1.5 đã bỏ cùng lúc trang chủ trở lại tám
   ô ngang hàng; để lại sẽ thành luật CSS không mã nào dùng.) */
.ht-luoi--1 { grid-template-columns: 1fr; }

/* ═══ LỚP TIỆN ÍCH — THEME KHÔNG TỰ IN, NGƯỜI BIÊN TẬP TỰ GẮN ════════════
   Năm lớp dưới đây KHÔNG xuất hiện trong bất kỳ tệp PHP/JS nào của theme hay
   plugin lõi. Đó là CỐ Ý, không phải bỏ quên — chúng để người biên tập gắn tay
   vào nội dung khi cần.

   ⚠️ KHAI RÕ Ở ĐÂY VÌ MỘT LÝ DO CỤ THỂ.
   Bản 0.1.4 có hai luật cũng "không mã nào dùng" nhưng là HỎNG THẬT:
     · `.ht-btn[aria-busy="true"]` — theme.js không bao giờ gắn `aria-busy`,
       nên vòng quay "đang gửi" đã viết CSS mà vĩnh viễn không hiện;
     · `.ht-rong` — không trang nào gắn lớp, nên trạng thái rỗng chỉ là dòng
       chữ trơ.
   Cả hai lọt qua vì bảng đối chiếu chỉ hỏi "luật có trong theme.css không",
   và câu trả lời là CÓ. Từ nay bộ soát `soat_css_chet.py` bắt mọi lớp không
   ai dùng; năm lớp dưới đây nằm trong danh sách miễn trừ, và danh sách đó
   phải nêu LÝ DO cho từng lớp — thêm lớp mới vào đó thì phải viết lý do.

     .ht-anh-sp    ảnh sản phẩm nền trắng: lấp trọn khung sẽ cắt mất chân máy,
                   nên gắn lớp này để ảnh vừa khít thay vì lấp đầy.
     .ht-ban-ve    bản vẽ kỹ thuật: bo góc sẽ cắt mất nét ở bốn góc.
     .ht-btn--vien nút viền, dùng khi trong một khối đã có nút chính.
     .ht-cham      ép một liên kết lẻ đủ 44px vùng chạm.
     .ht-luoi--2   lưới hai cột cho nội dung tự soạn.
   ═══════════════════════════════════════════════════════════════════════ */

/* Khuôn "Trang trắng — tiêu đề căn giữa" của theme cũ: 57 trang dùng nó.
   Chỉ căn giữa TIÊU ĐỀ và đoạn dẫn đầu, không căn giữa cả thân bài — chữ Việt
   căn giữa dài quá ba dòng là rất khó dò dòng. */
.ht-giua > article > h1 { text-align: center; }
.ht-giua > article > h1 + p { text-align: center; }

/* ── LƯỚI TÁM CỬA VÀO: BỎ QUA NẤC BA CỘT ─────────────────────────────────
   ⚠️ BỘ ĐO BẮT ĐƯỢC, KHÔNG PHẢI SUY LUẬN.
   `.ht-luoi--4` thu dần 4 → 3 → 2 → 1 cột. Với SÁU ô (bản 0.1.5) nấc ba cột
   chia hết. Với TÁM ô (bản 0.1.8) thì ở dải 1120–1359,98px lưới ra ba cột và
   tám ô xếp thành 3 + 3 + 2 — hàng cuối hụt một chỗ.

   Đo được ở khổ 1280px: cột = 3, số ô = 8, hàng cuối đủ = KHÔNG.

   Bộ tiêu chuẩn ghi rõ lưới thẻ phải chia hết. Nên riêng lưới cửa vào bỏ qua
   nấc ba cột: từ 1120px là bốn cột luôn, 8 = 4 + 4.

   Chỉ áp cho lưới này. `.ht-luoi--4` ở trang Danh mục thiết bị vẫn giữ nấc ba
   cột, vì số thẻ ở đó không cố định.                                        */
@media (min-width: 1120px) {
  .ht-cua-vao { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ═══ 19. BÀI VIẾT BIÊN TẬP CAO CẤP ═══════════════════════════════════════
   Lớp trình bày dùng chung cho toàn bộ bài viết. Nội dung cũ được giữ nguyên;
   phần này tạo nhịp đọc, độ phân cấp và CTA nhất quán mà không phụ thuộc
   Flatsome/UX Builder. */

.ht-article-shell { padding-top: var(--ht-s4); }
.ht-article { min-width: 0; }

.ht-article__header {
  width: min(100%, 52rem);
  margin-inline: auto;
  margin-bottom: var(--ht-s4);
  text-align: center;
}
.ht-article__header h1 {
  max-width: none;
  margin: var(--ht-s2) 0 var(--ht-s2);
  font-size: clamp(2.5rem, 1.77rem + 3.04vw, 4rem) !important;
  line-height: 1.18 !important;
  text-wrap: balance;
}
.ht-article__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: var(--ht-cham);
  padding: .35rem .75rem;
  border: 1px solid var(--ht-border);
  border-radius: 999px;
  background: var(--ht-surface);
  color: var(--ht-text);
  font-size: var(--ht-cs-nhan);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .035em;
  text-decoration: none;
}
.ht-article__eyebrow::before {
  content: "";
  width: .5rem;
  height: .5rem;
  margin-inline-end: .5rem;
  border-radius: 50%;
  background: var(--ht-gold-strong);
}
.ht-article__eyebrow:hover { border-color: var(--ht-gold-strong); }

.ht-article__lead {
  max-width: 44rem;
  margin: 0 auto var(--ht-s2);
  color: var(--ht-text-soft);
  font-size: max(18px, clamp(1.08rem, 1rem + .35vw, 1.28rem))/* san than bai 18px moi man hinh; do 04/09: 17,3px o 390 */;
  line-height: 1.65;
}
.ht-article__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .2rem .45rem;
  max-width: none;
  margin: 0;
  color: var(--ht-text-soft);
  font-size: var(--ht-cs-phu);
}
.ht-article__meta .ht-meta__tacgia { color: var(--ht-text); font-weight: 600; }

.ht-article__hero {
  width: min(100%, 70rem);
  max-width: 70rem;
  margin: 0 auto var(--ht-s5);
  overflow: hidden;
  border: 1px solid var(--ht-border);
  border-radius: var(--ht-radius);
  background: var(--ht-surface);
  box-shadow: var(--ht-shadow);
}
.ht-article__hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 46rem;
  object-fit: cover;
}

.ht-article__body { min-width: 0; }
.ht-article__body h2 {
  font-size: clamp(2rem, 1.58rem + 1.75vw, 2.875rem) !important;
  line-height: 1.27 !important;
}
.ht-article__body h3 {
  font-size: clamp(1.5rem, 1.38rem + .52vw, 1.75rem) !important;
  line-height: 1.36 !important;
}
.ht-article__body h4 {
  font-size: clamp(1.25rem, 1.19rem + .25vw, 1.375rem) !important;
  line-height: 1.45 !important;
}
.ht-article__body > :where(p, ul, ol, dl, blockquote, h2, h3, h4) {
  margin-inline: auto;
}
.ht-article__body > :where(h2) {
  margin-top: var(--ht-s5);
  padding-top: var(--ht-s2);
  border-top: 1px solid var(--ht-border);
}
.ht-article__body > :where(h2)::before {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  margin-bottom: var(--ht-s2);
  border-radius: 99px;
  background: var(--ht-gold-strong);
}
.ht-article__body > :where(h3) { margin-top: var(--ht-s4); }
.ht-article__body :where(figure, .wp-block-image, .gallery, .row) {
  margin-top: var(--ht-s3);
  margin-bottom: var(--ht-s4);
}
.ht-article__body :where(img) { border-radius: var(--ht-radius); }
.ht-article__body :where(table) {
  background: var(--ht-surface);
  border-radius: var(--ht-radius);
}

.ht-article__cta,
.ht-article__related,
.ht-article .ht-donvi {
  max-width: 60rem;
  margin-inline: auto;
}
.ht-article__cta {
  position: relative;
  margin-top: var(--ht-s6);
  padding: clamp(1.5rem, 4vw, 3.25rem);
  overflow: hidden;
  border: 1px solid var(--ht-border);
  border-radius: var(--ht-radius);
  background: var(--ht-surface-soft);
}
.ht-article__cta::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--ht-gold-strong);
}
.ht-article__cta :where(p, h2) { max-width: 44rem; margin-inline: 0; }
.ht-article__cta h2 { margin-top: .35rem; }
.ht-article__cta-kicker,
.ht-article__related-kicker {
  margin: 0;
  color: var(--ht-text-soft);
  font-size: var(--ht-cs-nhan);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ht-article__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ht-s2);
  margin-top: var(--ht-s3);
}
.ht-article__cta-actions .ht-btn { min-height: 56px; }
.ht-btn--phu {
  border: 1px solid var(--ht-border-field);
  background: var(--ht-surface);
  color: var(--ht-text);
}
.ht-btn--phu:hover { border-color: var(--ht-gold-strong); }

.ht-article .ht-donvi {
  margin-top: var(--ht-s4);
  padding: var(--ht-s3);
  border: 1px solid var(--ht-border);
  border-radius: var(--ht-radius);
  background: var(--ht-surface);
  color: var(--ht-text);
}
.ht-article .ht-donvi :where(p) { max-width: 46rem; margin-inline: 0; }
/* 17px -> 18px: ten don vi la van xuoi trong khoi tac gia, san 18 */
.ht-article .ht-donvi__ten { font-size: max(18px, 1.125rem); margin-top: 0; font-weight: 700; }
.ht-article .ht-donvi__lk { margin-bottom: 0; }

.ht-article__related {
  margin-top: var(--ht-s6);
  padding-top: var(--ht-s4);
  border-top: 1px solid var(--ht-border);
}
.ht-article__related > h2 { max-width: none; margin-top: .35rem; }
.ht-article__related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ht-s3);
  margin-top: var(--ht-s3);
}
.ht-article-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ht-border);
  border-radius: var(--ht-radius);
  background: var(--ht-surface);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ht-article-card:hover,
.ht-article-card:focus-within {
  border-color: var(--ht-gold-strong);
  transform: translateY(-2px);
  box-shadow: var(--ht-shadow);
}
.ht-article-card__media {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ht-surface-soft);
}
.ht-article-card__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}
.ht-article-card__content { padding: var(--ht-s2); }
.ht-article-card__content time { color: var(--ht-text-soft); font-size: var(--ht-cs-nho); }
.ht-article-card__content h3 { max-width: none; margin: .45rem 0 .65rem; font-size: clamp(1.18rem, 1.05rem + .35vw, 1.45rem); }
.ht-article-card__content h3 a { text-decoration: none; }
.ht-article-card__content h3 a:hover { text-decoration: underline; text-decoration-color: var(--ht-gold-strong); }
/* 17,1px -> 18px: tom tat the bai la than bai, san 18. Boc max() de nguoi doc
   phong to chu trong may van duoc co lon hon, khong bi ha xuong 18. */
.ht-article-card__content p { max-width: none; margin: 0; color: var(--ht-text-soft); font-size: max(18px, var(--ht-cs-phu)); }

@media (max-width: 900px) {
  .ht-article__related-grid { grid-template-columns: 1fr; }
  .ht-article-card { display: grid; grid-template-columns: minmax(9rem, 38%) 1fr; }
  .ht-article-card__media { height: 100%; aspect-ratio: auto; }
}
@media (max-width: 1199px) {
  .ht-article__header h1 { line-height: 1.23 !important; }
}
@media (max-width: 640px) {
  .ht-article-shell { padding-top: var(--ht-s3); }
  .ht-article__header { text-align: start; margin-bottom: var(--ht-s3); }
  .ht-article__header h1 { margin-top: var(--ht-s1); line-height: 1.25 !important; }
  .ht-article__meta { justify-content: flex-start; }
  .ht-article__hero { margin-bottom: var(--ht-s4); box-shadow: none; }
  .ht-article__body > :where(h2) { margin-top: var(--ht-s4); }
  .ht-article__cta { margin-top: var(--ht-s5); }
  .ht-article__cta-actions { display: grid; }
  .ht-article__cta-actions .ht-btn { width: 100%; }
  .ht-article__related { margin-top: var(--ht-s5); }
  .ht-article-card { display: block; }
  .ht-article-card__media { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .ht-article-card { transition: none; }
  .ht-article-card:hover,
  .ht-article-card:focus-within { transform: none; }
}

/* WCAG 1.4.3/1.4.1 — primary CTA and inline links. */
body .ht-cta__btn,
body .ht-btn--chinh,
body .htsp-nut--chinh {
  color: var(--ht-on-gold) !important;
}
.ht-article__body :where(p, li) a:not(.ht-cta__btn):not(.ht-btn):not(.button),
#tab-description :where(p, li) a:not(.ht-cta__btn):not(.htsp-nut):not(.button) {
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: currentColor;
}

/* Native replacement for legacy Flatsome product/post query grids. */
.ht-query-grid {
  display: grid;
  grid-template-columns: repeat(var(--ht-query-cols, 4), minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-block: var(--ht-s4, 32px);
}
.ht-query-grid--cols-1 { --ht-query-cols: 1; }
.ht-query-grid--cols-2 { --ht-query-cols: 2; }
.ht-query-grid--cols-3 { --ht-query-cols: 3; }
.ht-query-grid--cols-4 { --ht-query-cols: 4; }
.ht-query-grid--cols-5 { --ht-query-cols: 5; }
.ht-query-grid--cols-6 { --ht-query-cols: 6; }
.ht-query-card { min-width: 0; }
.ht-query-card__image { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: var(--ht-surface-soft, #f7f7f3); }
.ht-query-card__image img { width: 100%; height: 100%; object-fit: contain; }
.ht-query-card__title { margin: 12px 0 6px; font-size: clamp(17px, 1.25vw, 19px) !important; line-height: 1.45 !important; font-weight: 600 !important; }
.ht-query-card__title a { color: inherit; text-decoration: none; }
.ht-query-card__title a:hover,
.ht-query-card__title a:focus-visible { text-decoration: underline; text-underline-offset: .18em; }
/* 04/09 đêm: --ht-muted KHÔNG được định nghĩa → chế độ tối rơi về #596066 trên nền tối = 2,41:1 (12 thẻ /noi-ham-cong-nghiep). Dùng token chuẩn --ht-text-soft. */
.ht-query-card__price { font-size: 17px; line-height: 1.6; color: var(--ht-text-soft,#596064); }
.ht-query-card__excerpt { margin: 0 0 8px; font-size: 17px; line-height: 1.65; color: var(--ht-text-soft,#596064); }
@media (max-width: 900px) { .ht-query-grid { --ht-query-cols: 2; } }
@media (max-width: 520px) { .ht-query-grid { --ht-query-cols: 1; } }
.ht-native-page-header { margin: 0 0 var(--ht-s4, 32px); padding: clamp(24px, 4vw, 48px) 0; border-bottom: 1px solid var(--ht-border, #e8e8e3); }
.ht-native-page-header h1 { margin: 0; color: var(--ht-text, #202427); }
.ht-native-page-header--uppercase h1 { text-transform: uppercase; }
.ht-migrated-featured-box { display: grid; grid-template-columns: minmax(64px, 92px) 1fr; gap: 18px; align-items: start; }
.ht-migrated-featured-box > .wp-block-image { grid-row: 1 / span 8; margin: 0; }
.ht-migrated-team-member { text-align: center; }
.ht-migrated-team-member > .wp-block-image { max-width: 220px; margin-inline: auto; }
.ht-migrated-team-member > .wp-block-image img { border-radius: 50%; }
.ht-migrated-ux-slider { overflow: hidden; }
.ht-migrated-tabgroup { display: grid; gap: 12px; }
.ht-native-sidebar { min-width: 0; }
.ht-native-category-nav ul { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 0; padding: 0; list-style: none; }
.ht-native-category-nav a { text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 767px) {
  .ht-article__body .wp-block-columns { display: block !important; width: 100% !important; max-width: 100% !important; }
  .ht-article__body .wp-block-column { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 0 1 100% !important; flex-basis: 100% !important; }
  .ht-article__body :where(figure, .wp-caption, img) { width: 100% !important; max-width: 100% !important; height: auto !important; }
}

/* ═══ SƠ ĐỒ SVG — KHÔNG VẼ NHỎ HƠN KÍCH THƯỚC GỐC ═════════════════════════
   ⚠️ SAI KHÁC CÓ CHỦ Ý so với bản mẫu — lý do ĐO ĐƯỢC ngày 03/09/2026:
   sơ đồ có viewBox rộng 760–800 đơn vị nhưng lưới hai cột chỉ cho nó 528px.
   Tỉ lệ co 0,695 nên nhãn `font-size="11"` chỉ hiện ra **7,6px** trên màn
   hình — chưa tới MỘT NỬA sàn 14px của bảng cỡ chữ anh Hải chốt 26/08/2026.

   Cho khối sơ đồ chiếm TRỌN bề rộng hàng: ở khổ 1240px tỉ lệ thành 1,63 nên
   nhãn hiện ra ~18px, tên khối ~29px. Màn hình hẹp hơn kích thước gốc thì
   CUỘN NGANG trong đúng khối đó — thà cuộn còn hơn chữ 7,6px không đọc được.

   ⚠️ KHÔNG đặt `svg text { font-size: … }` ở đây. CSS THẮNG thuộc tính
   `font-size="…"` trên từng thẻ `<text>`, nên một luật chung sẽ xoá sạch phân
   cấp 14px/18px vừa đặt trong sơ đồ. Sàn chữ SVG đã xử lý ở TỪNG THẺ.       */
/* ⚠️ ĐÃ GỠ khối `figure:has(> svg[viewBox])` ở đây ngày 04/09/2026.

   LÝ DO: UCSS (Unused CSS) của LiteSpeed KHÔNG hiểu `:has()` nên CẮT BỎ cả
   luật. Đo trên trang thật: `document.styleSheets` không còn một luật nào
   chứa `svg[viewBox]` — luật viết ra mà chưa bao giờ tới trình duyệt.

   Sàn/trần bề rộng sơ đồ nay đặt bằng BỘ CHỌN ĐƠN GIẢN trong
   `assets/css/hub-truong-hoc.css` (`#ht-school .diagram svg`).

   LUẬT CHUNG: đừng dùng `:has()` cho việc BẮT BUỘC phải chạy trên site này. */

/* ============================================================================
   KHOI GHI CUNG NEN — GHIM TOKEN THEO DUNG NEN CUA KHOI      (04/09/2026)

   VAN DE DO DUOC tren /chi-phi-suat-an-bep-cong-nghiep (kho 1440, che SANG):
     · chu "▶ VIDEO HIỆN TRẠNG"  #75511E tren nen #202224  = 2,24:1  (126 cho)
     · nut chinh nen vang #D6AA6D voi chu TRANG #F7F7F2     = 1,99:1
       -> vi pham dung dieu khoa: "KHONG dung chu trang tren nen nut vang"
     · nhan 0.72rem = 11,5px, 0.76rem = 12,2px              (142 cho duoi san)

   NGUYEN NHAN: trang tu ghi NEN TOI cung trong <style> cua than bai
   (--ht-bg:#081116, .ht-section--deep:#070F14, .ht-shot:#202224) nhung token
   mau CHU cua theme lai giai ra gia tri CHE DO SANG.

   LUAT CHUNG: khoi nao GHI CUNG NEN thi phai GHIM bo token mau theo dung nen
   do, khong duoc de chay theo che do cua tai lieu.

   ⚠️ DO UU TIEN: <style> trong than bai co CUNG do uu tien (0,2,0) nhung dung
   SAU tep theme nen no THANG. Phai viet .ht-lp.ht-lp (0,3,0) de de duoc.
   Da vap mot lan: viet .ht-lp thi mau doi duoc nhung co chu thi khong.

   ⚠️ TU THAM CHIEU: phai ghi GIA TRI THAT. Viet --ht-x: var(--ht-x) thi CSS
   bo qua ca dong (da vap 03/09).
============================================================================ */
.ht-lp.ht-lp {
  color-scheme: dark;
  --ht-gold-text:  #D6AA6D;   /* 7,19:1 tren #202224 */
  --ht-text-soft:  #C3C5C4;
  --ht-border:     #4B4D4E;
  --ht-success:    #78B395;
  --ht-warning:    #D3A064;
  --ht-error:      #D5958A;
  --ht-info:       #8FB3C4;
}

/* NUT VANG — nen va chu sua CUNG MOT LAN, dung cap da khoa trong chuan */
.ht-lp.ht-lp .ht-btn--primary,
.ht-lp.ht-lp a.ht-btn--primary,
.ht-lp.ht-lp .ht-btn--primary:hover,
.ht-lp.ht-lp .ht-btn--primary:focus-visible {
  background: #C29A62 !important;
  border-color: #C29A62 !important;
  /* !important o RIENG dong mau chu: lan dau toi sua NEN ma bo sot CHU, nen
     nen doi duoc con chu van trang -> 2,41:1. Dung loi chuan da canh bao:
     "nen nut va chu tren nut sua CUNG MOT LAN". #202427 tren #C29A62 = 6,03:1 */
  color: #202427 !important;
}

/* SAN CO CHU. Dung max() de khong ha co chu cua nguoi da phong to trong may. */
.ht-lp.ht-lp .ht-matrix__no,
.ht-lp.ht-lp .ht-shot__live,
.ht-lp.ht-lp .ht-shot__step,
.ht-lp.ht-lp .ht-shot__cap,
.ht-lp.ht-lp .ht-eyebrow,
.ht-lp.ht-lp .ht-label,
.ht-lp.ht-lp .ht-flow__so,
.ht-lp.ht-lp .ht-lq__so,
.ht-lp.ht-lp .ht-timeline__so,
.ht-lp.ht-lp .htlq-meta__nh,
.ht-lp.ht-lp .htlq-the__phu,
.ht-lp.ht-lp .ht-bc,
.ht-lp.ht-lp .ht-bc span,
.ht-lp.ht-lp .ht-matrix__links a { font-size: max(14px, .875rem) !important; }

.ht-lp.ht-lp .ht-chip,
.ht-lp.ht-lp .chip,
.ht-lp.ht-lp .ht-nav a            { font-size: max(16px, 1rem) !important; }

/* van xuoi 18 · danh sach 17 · tieu de the 18 (xem muc "tieu de the") */
.ht-lp.ht-lp p:not([class*="eyebrow"]):not([class*="label"]):not([class*="meta"]):not([class*="note"]):not([class*="cap"]) {
  font-size: max(18px, 1.125rem) !important;
}
.ht-lp.ht-lp li:not([class*="chip"]):not([class*="tag"]):not([class*="timeline"]) {
  font-size: max(17px, 1.0625rem) !important;
}
.ht-lp.ht-lp .ht-card h3,
.ht-lp.ht-lp .ht-pairs h3         { font-size: max(18px, 1.125rem) !important; }

/* chu tren breadcrumb: dung mau chu chinh cho du 4,5:1 (dang 4,48) */
.ht-lp.ht-lp .ht-bc,
.ht-lp.ht-lp .ht-bc span          { color: var(--ht-text); }

/* SAN cho sau cho con lai trong khoi nay, do ngay 04/09/2026:
     .ht-client-ten  15 -> 22 (dien thoai 21)   tieu de NHOM khach hang,
                                                khong phai tieu de the
     .ht-bv-title    18 -> 22 (21)              tieu de muc
     .ht-reading h3  18 -> 22 (21)              tieu de muc trong mach doc
     .ht-loi h3      18 -> 22 (21)              tieu de muc trong mach doc
     .ht-bv__zoom    13 -> 14                   nhan tren nut phong to
     .ht-matrix-note 13,1 -> 14                 ghi chu doc bang            */
.ht-lp.ht-lp .ht-client-ten,
.ht-lp.ht-lp .ht-bv-title,
.ht-lp.ht-lp .ht-reading > h3,
.ht-lp.ht-lp .ht-loi > h3         { font-size: max(22px, 1.375rem) !important; }

.ht-lp.ht-lp .ht-bv__zoom,
.ht-lp.ht-lp .ht-matrix-note,
.ht-lp.ht-lp .ht-matrix-note span,
.ht-lp.ht-lp .ht-matrix-note b,
.ht-lp.ht-lp .ht-matrix-note em   { font-size: max(14px, .875rem) !important; }

/* VUNG BAM >= 44px (WCAG 2.5.5). Do duoc: a.ht-brand cao 31px.
   Tang chieu cao toi thieu, KHONG tang co chu — co chu da dung san. */
.ht-lp.ht-lp a.ht-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (max-width: 767px) {
  .ht-lp.ht-lp .ht-client-ten,
  .ht-lp.ht-lp .ht-bv-title,
  .ht-lp.ht-lp .ht-reading > h3,
  .ht-lp.ht-lp .ht-loi > h3       { font-size: max(21px, 1.3125rem) !important; }
}

/* ============================================================================
   TRANG TU CO HERO — bo dem cua khuon boc          (04/09/2026)

   Do duoc: /benh-vien va /chuoi-cafe-nhuong-quyen co khoang trong 164px tren
   dau, trong khi trang mau /giai-phap/khach-san chi 76px. Chenh 88px la
   `.ht-section{padding-top}` cong them vao dem rieng cua hero.

   Lop `ht-co-hero` do mu-plugin zz-ht-hero-h1.php gan. KHONG dung `:has()`
   vi UCSS cua LiteSpeed cat bo no.                                          */
body.ht-co-hero .ht-section { padding-top: 0; }

/* ============================================================================
   SO DO NGUYEN TAC & ANH MO BAI trong bai viet          (04/09/2026)
   Dung cho bai Benh vien (70288) va moi bai sau nay. Quy tac da do:
   - svg dat min-width = dung viewBox (760) de nhan >= 14px; kho hep thi CUON
     NGANG trong figure, khong bop chu.
   - figcaption 15px (san chu thich 14), mau chu phu.
   - Khong dung :has() (UCSS cat).                                            */
.ht-sodo { margin: 28px 0; overflow-x: auto; overscroll-behavior-x: contain; }
.ht-sodo svg { display: block; width: 100%; min-width: 760px; max-width: 920px; height: auto; margin-inline: auto; }
.ht-sodo figcaption,
.ht-anh-mo-bai figcaption { font-size: max(15px, .9375rem); line-height: 1.55; color: var(--ht-text-soft); margin-top: 10px; }
.ht-anh-mo-bai { margin: 24px 0 32px; }
.ht-anh-mo-bai img { display: block; width: 100%; height: auto; border-radius: var(--ht-radius, 6px); }

/* 04/09/2026: tieu de the bai trong luoi chuyen muc (.ht-luoi .ht-card h2 a) cao 33px
   -> vung bam >= 44px (WCAG 2.5.5). Khong doi co chu, chi them dem doc. */
.ht-card > h2 > a { display: inline-block; padding-block: 6px; }