/* ═══════════════════════════════════════════════════════════════════════════
 * thich-ung.css — LỚP THÍCH ỨNG. Mọi thứ bản dựng KHÔNG có đều nằm ở đây.
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Nguyên tắc: `ban-dung.css` là mốc đối chiếu, cấm sửa. Cái gì phải khác đi
 * để chạy được trên web thật thì khai ở đây — tách ra để lúc nào cũng trả lời
 * được câu "chỗ này lệch bản dựng vì sao".
 *
 * 🔴 Bản dựng là canvas CỐ ĐỊNH 1440px và KHÔNG CÓ MỘT @media NÀO
 *    (đã đếm: 0). Bốn bản vẽ 3i–3l là các bản mobile vẽ RIÊNG, không phải
 *    điểm gãy. Nên toàn bộ phần đáp ứng dưới đây là phần em THÊM, dựng theo
 *    đúng 4 bản vẽ mobile đó.
 *
 * 🔴 Mọi luật ở đây phải bọc trong @media hoặc nhắm vào thứ bản dựng không
 *    có (menu điện thoại, trạng thái :focus-visible…). Luật trần ở đây mà
 *    đụng desktop 1440px là làm sai lệch mốc đối chiếu — cổng
 *    `doi-chieu.mjs` sẽ bắt ngay.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Bỏ chiều rộng cố định của canvas ────────────────────────────────────
 * `.pg{width:1440px}` là kích thước khung vẽ. Trên web phải để trang tự giãn.
 * Ở đúng 1440px thì `auto` == `1440px` nên phép đối chiếu vẫn trùng khít.    */
.pg {
  width: auto;
  min-width: 0;
}

/* 🔴 `max-width:100%` và `overflow-x:clip` là lưới an toàn chống tràn ngang,
 *    nhưng cả hai LÀ thuộc tính tính được ⇒ bật ở mọi cỡ thì cổng
 *    `doi-chieu.mjs` báo lệch đúng ở 1440px (bản dựng để `none`/`visible`).
 *    Mà ở 1440px bố cục bằng chính khung vẽ nên không có gì tràn — chỉ cần
 *    chúng từ dưới 1440px trở xuống. Bọc media query là vừa giữ được lưới an
 *    toàn vừa giữ mốc đối chiếu sạch. */
@media (max-width: 1439px) {
  .pg {
    max-width: 100%;
    overflow-x: clip;
  }
}

/* ── 2. Bỏ chữ "ảnh mẫu" ───────────────────────────────────────────────────
 * `.ph` trong bản dựng là ô giữ chỗ có chữ ở giữa. Trên site thật nó bọc ảnh
 * thật, nên tắt phần chữ giữ chỗ nhưng GIỮ khung, bo góc, tỉ lệ.            */
.ph > img,
.ph > picture,
.ph > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.ph:has(img) {
  font-size: 0;
  /*
   * 🔴 GIỮ NỀN XÁM CỦA BẢN DỰNG (#e8ebf6), đừng đặt `background:none`.
   *    Vấp 30/10: bỏ nền làm hai chuyện cùng lúc — (1) cổng đối chiếu báo
   *    lệch `background-color` ở 12 ô ảnh, (2) và quan trọng hơn: trong lúc
   *    ảnh chưa tải xong, ô ảnh là một mảng TRONG SUỐT chứ không phải khung
   *    xám như bản dựng, nên trang nhấp nháy trắng khi cuộn. Ảnh `object-fit:
   *    cover` phủ kín nên nền xám chỉ lộ ra đúng lúc đang tải — y như bản dựng.
   *
   *    `padding:0` thì VẪN phải đặt: bản dựng vẽ ảnh bằng `background-image`
   *    (tràn ra cả vùng padding), còn ở đây ảnh là thẻ <img> thật nên 8px
   *    padding sẽ thành viền xám quanh ảnh — khác bản dựng về mặt nhìn.
   *    Lệch này đã khai trong `ngoai-le.json`.
   */
  padding: 0;
}

/* ── 3. Tiêu điểm bàn phím ─────────────────────────────────────────────────
 * Bản dựng là ảnh tĩnh nên không vẽ trạng thái tiêu điểm. Thiếu nó thì người
 * dùng bàn phím mù hoàn toàn — bắt buộc phải thêm.                          */
.pg a:focus-visible,
.pg button:focus-visible,
.pg input:focus-visible,
.pg select:focus-visible,
.pg textarea:focus-visible,
.pg [tabindex]:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Link nhảy tới nội dung — cũng không có trong bản dựng. */
.alouc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 18px;
  background: var(--navy);
  color: #f7f8fd;
  border-radius: 0 0 12px 0;
  font: 500 13.5px Inter, system-ui, sans-serif;
}
.alouc-skip:focus {
  left: 0;
}

/* ── 4. Nút mở menu trên điện thoại ────────────────────────────────────────
 * Bản vẽ 3j "Mobile — Menu" cho thấy menu dạng ngăn kéo. Bản dựng desktop
 * không có nút này, nên khai ở đây.
 * 🔴 Làm bằng CHECKBOX thuần CSS, không JavaScript: mục kiểm thử B5 đòi
 *    "tắt JS trang vẫn dùng được", mà hamburger chạy bằng JS thì tắt JS là
 *    menu chết. Checkbox + `:checked ~` dùng được cả bàn phím (Tab, Space).  */
/* 🔴 Ở desktop ô này KHÔNG TỒN TẠI trong bản dựng ⇒ `display:none` để cây
 *    DOM trùng khít. Ở mobile mới bật lên dạng ẩn-nhưng-Tab-tới-được. */
.nav-mo-input { display: none; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  flex: none;
}
.nav-icon-dong { display: none; }
.nav-mo-input:checked ~ .nav-toggle .nav-icon-mo { display: none; }
.nav-mo-input:checked ~ .nav-toggle .nav-icon-dong { display: block; }
.nav-mo-input:focus-visible ~ .nav-toggle {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* ── 5. Điểm gãy ───────────────────────────────────────────────────────────
 * Lưới 12 cột của bản dựng giữ nguyên tới 1024px. Dưới đó rút cột theo đúng
 * thứ tự các bản vẽ mobile: 12 → 8 (tablet) → 1 (điện thoại).               */

@media (max-width: 1200px) {
  .wrap { padding: 0 32px; }
  .grid { gap: 24px; }
}

@media (max-width: 1024px) {
  .wrap { padding: 0 24px; }
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 22px; }
  /* Cột chính và cột phụ xuống hàng thay vì bị bóp */
  .grid > [style*="span 8"],
  .grid > [style*="span 7"],
  .grid > [style*="span 6"] { grid-column: span 8 !important; }
  .grid > [style*="span 5"],
  .grid > [style*="span 4"] { grid-column: span 8 !important; }
  .grid > [style*="span 3"] { grid-column: span 4 !important; }
  .sect { padding: 28px 0; }
}

@media (max-width: 760px) {
  /* Bản vẽ 3i/3k/3l dùng lề 16px */
  .wrap { padding: 0 16px; }
  .grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .grid > * { grid-column: 1 / -1 !important; }
  .sect { padding: 20px 0; }

  /* ── Thanh điều hướng thành ngăn kéo ───────────────────────────────────
   * 🔴 KHÔNG có thẻ bọc. Các <a> là con trực tiếp của `.wrap` (đúng bản
   *    dựng), nên ngăn kéo phải chọn theo ANH EM của ô checkbox:
   *    `.nav-mo-input:checked ~ a`. Bọc thêm div là phá quan hệ flex ở
   *    desktop — đã vấp và đã sửa 30/10.
   */
  .alouc-thanh-dieu-huong { position: relative; }

  .nav-mo-input {
    /* Ẩn mà vẫn Tab tới được — `display:none` thì bàn phím mất đường vào. */
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .nav-toggle { display: inline-flex; }

  /* Hàng nav thu lại chỉ còn logo-hamburger; các link xuống ngăn kéo. */
  .alouc-thanh-dieu-huong .wrap {
    flex-wrap: wrap;
    gap: 0 !important;
    height: auto !important;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .alouc-thanh-dieu-huong .wrap > a {
    display: none;
    /* 🔴 Phải cuộn được khi menu dài hơn khung nhìn: bản v0.1.1 từng để
     *    ngăn kéo cao 1081px trong khung 664px với `overflow:visible` ⇒ các
     *    mục cuối không ai với tới. Cùng lỗi đã gặp ở ihatecalculator 14/10.
     *    Ở đây đặt giới hạn cuộn trên chính hàng `.wrap` (xem dưới).        */
  }
  .nav-mo-input:checked ~ a {
    display: flex !important;
    align-items: center;
    width: 100%;
    height: auto !important;
    padding: 13px 2px !important;
    border-bottom: 1px solid var(--line);
    box-shadow: none !important;
    margin-left: 0 !important;
    white-space: normal;
  }
  .nav-mo-input:checked ~ a:last-of-type { border-bottom: 0; }

  /* Khi ngăn kéo mở, cho cả hàng cuộn được. */
  .alouc-thanh-dieu-huong:has(.nav-mo-input:checked) .wrap {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Masthead: logo nhỏ lại, ô tìm kiếm giãn hết hàng
   *
   * 🔴 BỐN SELECTOR DƯỚI ĐÂY TRƯỚC ĐÂY KHÔNG KHỚP GÌ CẢ — đo thật ở 360px
   *    ngày 30/10/2026: ô tìm kiếm vẫn rộng 260px nên nút "Tư vấn miễn phí"
   *    bị đẩy ra tới 452px trong khung 360px, tức **nút kêu gọi chính của
   *    trang nằm ngoài mép màn và bị cắt**. Trang không cuộn ngang
   *    (scrollWidth = 360) nên không có dấu hiệu nào — nhìn ảnh chụp thì
   *    tưởng bình thường.
   *
   *    Hai lý do selector trượt:
   *      · `a[style*="width:260px"]` — ô tìm kiếm trên site thật là <form>
   *        (phải gõ được), không phải <a> như bản dựng.
   *      · `.alouc-masthead > img` — ảnh logo nay nằm TRONG thẻ <a> bọc, nên
   *        không còn là con trực tiếp.
   *    Lại đúng một ca "có CSS cho mobile ≠ mobile dùng được": phải đo
   *    `getBoundingClientRect()` của chính phần tử mới biết.
   */
  .alouc-masthead { flex-wrap: wrap; gap: 14px !important; }
  .alouc-masthead > img,
  .alouc-masthead > a > img,
  .alouc-masthead .custom-logo { height: 44px !important; }
  .alouc-masthead > div { margin-left: 0 !important; width: 100%; flex-wrap: wrap; }
  .alouc-masthead form[style*="width:260px"],
  .alouc-masthead a[style*="width:260px"] { width: 100% !important; }
  .alouc-masthead > div > .ebtn { width: 100%; }

  /* Thanh bản quyền chân trang: cho xuống hàng, đừng cắt câu miễn trừ */
  [data-alouc-dai="14c"] .wrap {
    flex-wrap: wrap;
    height: auto !important;
    row-gap: 6px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Dải thông tin trên cùng: cho xuống hàng, ẩn các dấu gạch phân cách */
  .alouc-dai-tin {
    height: auto !important;
    flex-wrap: wrap;
    gap: 8px 12px !important;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .alouc-dai-tin > span[style*="opacity"] { display: none; }
  .alouc-dai-tin > span:last-child { margin-left: 0 !important; width: 100%; }

  /* Dải "MỚI NHẤT" */
  .alouc-dai-moi { height: auto !important; flex-wrap: wrap; padding: 9px 0; }

  /* Bảng rộng cho cuộn ngang thay vì phá lưới */
  .pg table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 420px) {
  .wrap { padding: 0 14px; }
  .pg h1 { font-size: clamp(26px, 8vw, 34px) !important; }
  .pg h2 { font-size: clamp(21px, 6.4vw, 26px) !important; }
}

/* ── 6. Bản in ─────────────────────────────────────────────────────────────
 * Bản dựng không có bản in. Ẩn những thứ vô nghĩa trên giấy.                */
@media print {
  .alouc-dai-tin,
  .alouc-thanh-dieu-huong,
  .alouc-dai-moi,
  .nav-toggle,
  .ad,
  .alouc-khong-in,
  .totop,
  footer { display: none !important; }
  .pg { background: #fff; color: #000; }
  .pg a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}

/* ── 7. Giảm chuyển động ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pg *, .pg *::before, .pg *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ── 9. HÀNG RÀO CHO NỘI DUNG CŨ ───────────────────────────────────────────
 *
 * 🔴 Đo thật 30/10/2026: mở một bài bất kỳ trên alouc.com ở khung 1440px thì
 *    trang rộng 2006px — TRÀN NGANG 566px. Thủ phạm không phải theme mà là
 *    NỘI DUNG CŨ: bài từ 2015 nhúng ảnh trong `<table class="picture">` có
 *    chiều rộng cố định 2006px. Site có 24.696 bài kiểu đó.
 *
 *    Theme không sửa được 24.696 bài, nhưng BẮT BUỘC phải không vỡ vì chúng.
 *    Nên dựng hàng rào ngay tại thân bài: mọi thứ rộng quá khung thì co lại,
 *    riêng bảng thì cho cuộn ngang trong khung của nó (cắt bảng là mất số).
 *
 * 🔴 Chỉ áp trong `.alouc-than-bai` — áp toàn trang sẽ đụng vào các khối do
 *    theme tự dựng và làm lệch bản dựng.                                      */
.alouc-than-bai img,
.alouc-than-bai video,
.alouc-than-bai iframe,
.alouc-than-bai embed,
.alouc-than-bai object {
  max-width: 100%;
  height: auto;
}
.alouc-than-bai table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}
.alouc-than-bai pre {
  max-width: 100%;
  overflow-x: auto;
}
/* Thân bài có thể chứa từ dài không dấu cách (URL dán thẳng) — cho xuống dòng. */
.alouc-than-bai {
  overflow-wrap: anywhere;
}
/* Khoá cuối cùng: không cho bất kỳ thứ gì trong bài đẩy ngang cả trang. */
.alouc-than-bai * {
  max-width: 100%;
}

/* ── 10. Các lưới khai NỘI TUYẾN trong template cũng phải xuống hàng ────────
 *
 * 🔴 Vấp 30/10: mục 5 ở trên chỉ gỡ `.grid > *`. Nhưng bản dựng còn nhiều lưới
 *    khai thẳng trong `style=""` của từng khối — `grid-template-columns:1fr 1fr`
 *    (bốn thẻ niêm dải 12), `repeat(3,1fr)` (hội đồng thẩm định, "Đọc tiếp"),
 *    và dải số đếm là `display:flex` chia năm ô. Chúng KHÔNG phải con trực
 *    tiếp của `.grid` nên không bị mục 5 chạm tới: ở 360px thẻ `.seal` vẫn
 *    nằm hai cột, chữ bị cắt.
 *
 *    Ở đây buộc phải dùng `!important` vì đang đè `style=""` nội tuyến — đó
 *    là cái giá của việc giữ markup nguyên văn bản dựng, và chỉ trả trong
 *    @media nên desktop 1440px không bị chạm (cổng đối chiếu vẫn sạch).      */
@media (max-width: 760px) {
  [data-alouc-dai="12"] [style*="grid-template-columns:1fr 1fr"],
  [data-alouc-dai="12"] [style*="repeat(3,1fr)"],
  [data-alouc-dai="cm3"] [style*="grid-template-columns:1fr 1fr"],
  .alouc-than-bai + * [style*="repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Dải số đếm: năm ô cạnh nhau ⇒ cho xuống hàng, bỏ vạch ngăn dọc. */
  [data-alouc-dai="12"] [style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 18px !important;
  }
  [data-alouc-dai="12"] [style*="width:1px;background:var(--line)"] {
    display: none !important;
  }

  /* Thẻ niêm: icon + chữ xếp dọc cho đỡ bóp chữ. */
  .seal { flex-wrap: wrap; }

  /* Cột chia sẻ dọc của trang bài không có chỗ trên điện thoại. */
  .alouc-cot-chia-se { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 12. PHÂN TRANG — cho xuống hàng CHỈ ở màn hẹp
 *
 * 🔴 Trước đây `flex-wrap:wrap` khai nội tuyến ngay trong khuôn trang, nên nó
 *    có ở MỌI cỡ màn hình. Bản dựng không khai thuộc tính đó ⇒ cổng đối chiếu
 *    bắt đúng một lệch kiểu ở 1440px. Chỗ đúng của nó là đây: dưới 760px hàng
 *    nút dài hơn bề rộng màn nên phải cho xuống hàng, còn ở desktop thì giữ
 *    nguyên như bản dựng.
 * ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .pg [data-alouc-o="phan-trang"] { flex-wrap: wrap; row-gap: 9px; }
  .pg [data-alouc-o="nut-dem"]    { margin-left: 0; width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 13. TRANG BÀI — hai cách điều hướng theo bề rộng màn
 *
 * Bản vẽ 3c đặt menu NGANG trên masthead và bỏ thanh chuyên mục. Ở desktop
 * làm đúng vậy. Nhưng nút mở menu điện thoại nằm trong thanh chuyên mục, nên
 * dưới 1024px phải đổi ngược lại: ẩn menu ngang (6 link + nút CTA không bao giờ
 * vừa 360px) và hiện lại thanh chuyên mục kèm hamburger.
 *
 * 🔴 Thiếu khối này thì trang bài trên điện thoại KHÔNG CÒN MENU NÀO — lỗi đã
 *    vấp hai lần ở hai site khác, không vấp lần ba.
 * ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .alouc-dai2-chi-mobile { display: none; }
}
@media (max-width: 1023px) {
  /*
   * 🔴 PHẢI CÓ `!important` — đo thật 30/10/2026 mới ra.
   *    Thẻ <nav> này mang `style="display:flex;…"` NỘI TUYẾN (port 1-1 từ bản
   *    dựng, không được gom thành class). Style nội tuyến thắng mọi luật trong
   *    tệp CSS, nên luật `display:none` thường KHÔNG ăn: đo ở 360px thấy nav
   *    vẫn `display=flex`, rộng 582px trong khung 360px.
   *    Và nó không làm trang cuộn ngang (scrollWidth vẫn 360) vì bị cắt — tức
   *    là ba link cuối + nút CTA MẤT HẲN mà không để lại dấu hiệu nào.
   *    Đây đúng kiểu "có CSS cho mobile ≠ mobile dùng được": chỉ đọc tệp CSS
   *    thì thấy đã vá, phải đo `getComputedStyle` của chính phần tử mới biết.
   */
  .alouc-nav-masthead { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 14. BẢN VÁ 30/10/2026 (đợt 2) — Sếp Long báo "tràn viền, lố, rất dở"
 *
 * Cổng `doi-chieu.mjs` chỉ so 3 bản vẽ ở ĐÚNG 1440px nên không bắt được các
 * lỗi dưới đây. Bắt bằng bộ đo mới `soat-tran-vien.mjs` (6 trang × 7 khổ) +
 * nhìn ảnh chụp thật bằng mắt.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 14.1 Thanh điều hướng chuyên mục TRÀN 18px ở 768px, mọi loại trang ─────
 * 🔴 Lỗ hổng điểm gãy: ngăn kéo mobile (mục 4-5 ở trên) chỉ bật dưới 760px,
 *    nhưng dải 2 (7 link + logo) đã không vừa khung từ 1023px trở xuống —
 *    đo thật: link cuối right=786 trong khung 768px, vượt 18px.
 *    Khoảng 761–1023px bị bỏ trống hoàn toàn giữa hai điểm gãy cũ.
 * Vá: kích hoạt ngăn kéo sớm hơn, từ dưới 1024px thay vì 760px — khớp đúng
 * điểm gãy lưới 12→8 cột đã dùng cho phần còn lại của trang. */
@media (max-width: 1023px) {
  .alouc-thanh-dieu-huong { position: relative; }
  .nav-mo-input {
    display: block;
    position: absolute;
    width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
  .nav-toggle { display: inline-flex; }
  .alouc-thanh-dieu-huong .wrap {
    flex-wrap: wrap; gap: 0 !important; height: auto !important;
    padding-top: 4px; padding-bottom: 4px;
  }
  .alouc-thanh-dieu-huong .wrap > a { display: none; }
  .nav-mo-input:checked ~ a {
    display: flex !important; align-items: center; width: 100%;
    height: auto !important; padding: 13px 2px !important;
    border-bottom: 1px solid var(--line); box-shadow: none !important;
    margin-left: 0 !important; white-space: normal;
  }
  .nav-mo-input:checked ~ a:last-of-type { border-bottom: 0; }
  .alouc-thanh-dieu-huong:has(.nav-mo-input:checked) .wrap {
    max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain;
  }
}
/* Bản gốc mục 4-5 kích hoạt ngăn kéo ở 760px — nay 14.1 đã làm việc đó từ
 * 1023px nên vô hiệu hoá phần trùng trong khoảng 761–1023px để khỏi đụng độ
 * hai luật cùng chọn một phần tử theo hai ngưỡng khác nhau. */
@media (min-width: 761px) and (max-width: 1023px) {
  .alouc-thanh-dieu-huong .wrap > a { display: none; }
}

/* ── 14.2 Dải "Cam kết nội dung" cao CỐ ĐỊNH 52px đè lên khối bên dưới ──────
 * 🔴 CHỮ CHỒNG CHỮ — lỗi nặng nhất Sếp thấy. `parts/dai-cam-ket.php` in
 *    `height:52px` cứng (không phải min-height). Có `flex-wrap:wrap` nhưng
 *    hàng rộng đủ chứa 2-4 huy hiệu dài thì bắt buộc xuống 2-3 dòng ở màn
 *    hẹp — khối cao 52px không co giãn theo, nội dung bị ĐÈ đúng vì khối
 *    SAU nó không biết khối này đã cao hơn. Đo: dải "DU HỌC ÚC" bị che bởi
 *    các chip cam kết ở 390px. */
@media (max-width: 760px) {
  [data-alouc-dai="6"] .wrap {
    height: auto !important;
    row-gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ── 14.3 Nút "Mở menu" hiện chữ thô, xuống 2 dòng ──────────────────────────
 * 🔴 Gốc rễ: theme KHÔNG định nghĩa `.screen-reader-text` ở đâu cả — WordPress
 *    core không tự cấp lớp này cho front-end, theme phải tự khai. Thiếu nó,
 *    `<span class="screen-reader-text">Mở menu</span>` hiện ra như CHỮ THẬT
 *    bên trong nút 42×42px, tràn thành hộp vuông xấu, chữ vỡ 2 dòng.
 *    Chuẩn ẩn-nhưng-đọc-được của WordPress — không dùng display:none (mất
 *    với trình đọc màn hình). */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; width: 1px; word-wrap: normal !important;
}

/* ── 14.4 Thẻ bài dạng hàng (.row) vỡ ở màn hẹp — chuyên mục con/tìm kiếm ───
 * 🔴 `.row{display:flex}` (ban-dung.css) + ảnh `flex:none;width:210px` cố
 *    định, nhưng DIV chữ bên cạnh không có `min-width:0`. Mặc định flex item
 *    có `min-width:auto` = co theo nội dung, nên tiêu đề dài ép div rộng hơn
 *    chỗ còn trống sau khi trừ ảnh 210px + gap 16px ⇒ TRÀN KHỎI THẺ CHA.
 *    Đo trang tìm kiếm 360px: 11 khối tràn 4-14px; trang tag: tràn 40px.
 *    Vá chỉ bằng một thuộc tính, không đổi bố cục ở 1440px (còn dư chỗ nên
 *    không tràn, `min-width:0` không đổi hình học khi không tràn). */
.row > div { min-width: 0; }

/* Ảnh 210px vẫn hơi lớn so với màn 360px (chiếm ~63% bề ngang) — thu nhỏ để
 * chữ có chỗ thở, không đổi bố cục desktop. */
@media (max-width: 480px) {
  .row { gap: 12px; }
  .row > [style*="width:210px"] { width: 110px !important; height: 74px !important; }
}

/* ── 14.5 LƯỚI CHÂN TRANG 5 CỘT — KHÔNG CÓ MỘT LUẬT ĐÁP ỨNG NÀO ─────────────
 * 🔴 PHÁT HIỆN KHI SOI 404: logo `alouc-logo-light.png` (166×56) tràn ra
 *    NGOÀI khung cha chỉ rộng 61px — vượt 112px. Gốc rễ không phải ảnh, là
 *    `footer.php` dòng 34 tự viết `display:grid;grid-template-columns:
 *    minmax(0,2.2fr) repeat(4,minmax(0,1fr))` TRỰC TIẾP trong `style=""`,
 *    không mang class `.grid` nên KHÔNG ăn luật đáp ứng nào ở mục 5. Bị ép
 *    5 cột ở MỌI khổ màn hình, kể cả 360px ⇒ mỗi cột chỉ còn vài chục px.
 *
 *    🔴 Lỗi này nằm ở `get_footer()` — tức ẢNH HƯỞNG TOÀN SITE, không riêng
 *    404. Bộ đo tự động của tôi không bắt được ở 5 loại trang kia vì ảnh có
 *    `loading="lazy"` — getBoundingClientRect() trả 0×0 lúc ảnh chưa tải nên
 *    phép đo tràn-khung-cha bỏ sót (false negative), nhưng khung 5 cột bị ép
 *    chật vẫn y hệt trên mọi trang, chỉ là cột chữ bên cạnh không có ảnh nên
 *    không lộ bằng con số — cũng bị bóp, chỉ chưa đo ra. */
@media (max-width: 1023px) {
  [data-alouc-dai="14a"] > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 32px !important;
  }
}
@media (max-width: 600px) {
  [data-alouc-dai="14a"] > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 28px !important;
  }
}

/* ── 14.6 Thân bài chạy gần hết 1440px khi không có cột phải ────────────────
 * 🔴 Khi bài không có mục lục/hộp hỗ trợ/quảng cáo (24.696 bài cũ phần lớn
 *    rơi vào trường hợp này), `single.php` cho thân bài `grid-column:span 11`
 *    — khoảng 1300px, dòng chữ ~140 ký tự. Chuẩn đọc là 65-75 ký tự/dòng.
 *    Chỉ đặt `max-width` (không đổi `grid-column`) để không chạm phép so
 *    cấu trúc của cổng đối chiếu — đã chạy lại cổng sau khi vá, vẫn 0/0. */
main[style*="grid-column:span 11"] {
  max-width: 827px;
}

/* ── 14.7 Khối "Dịch vụ Alo Úc" (dải 12): padding nội tuyến 56px + 2 nút
 *        không cho xuống hàng ──────────────────────────────────────────────
 * 🔴 `.wrap` có `style="padding:44px 56px 38px"` NỘI TUYẾN, thắng luật
 *    `.wrap{padding:0 16px}` ở mục 5 (inline luôn thắng class). Còn 266px
 *    cho cột span-4 (co về full-width ở mobile) thì hai nút cạnh nhau
 *    (`display:flex;gap:8px`, không wrap) cộng lại rộng hơn chỗ còn —
 *    nút "Liên hệ" tràn khỏi khung 49px. */
@media (max-width: 760px) {
  [data-alouc-dai="12"] > .wrap { padding: 28px 16px 24px !important; }
  [data-alouc-dai="12"] [style*="display:flex;gap:8px"] { flex-wrap: wrap; }
}


/* ── 14.8 BỐ CỤC "TO VÀ RỘNG" — trang trải hết màn hình lớn ─────────────────
 * 🔴 Bản dựng là canvas 1440px. Mục 1 ở trên bỏ `width:1440px` để trang giãn
 *    được trên màn hẹp, nhưng KHÔNG đặt trần — nên trên màn 1920px+ nội dung
 *    kéo căng hết bề ngang, dòng chữ và các dải dài hơn hẳn bản thiết kế.
 *    Đo: ở 1920px `scrollWidth` = 1920, tức mọi dải rộng hơn bản dựng 480px.
 *    Đặt trần đúng bằng khung vẽ rồi căn giữa. Ở ĐÚNG 1440px thì trần này
 *    không đổi gì nên cổng đối chiếu vẫn sạch. */
/* 🔴 Bọc trong @media (min-width:1441px) chứ KHÔNG khai trần: `margin:auto`
 *    khai trần thì ở đúng 1440px cổng đối chiếu đọc được `margin-left:auto`
 *    trong khi bản dựng là `0px` ⇒ 2 lệch kiểu trên cả ba trang (đã đo, đã
 *    thấy đỏ). Trên 1440px mới cần căn giữa, nên đặt đúng chỗ cần là xong —
 *    vừa sửa được bố cục vừa không phải khai ngoại lệ nào. */
@media (min-width: 1441px) {
  .pg {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── 14.9 THẺ "ĐỌC TIẾP" MÉO — gốc rễ là cột chữ quá rộng ───────────────────
 * 🔴 Đo thật trên bài không có cột phải:
 *       bản vẽ 3c : <main> 827px → thẻ 261px → ô ảnh 261×120 = 2,18:1
 *       live      : <main> 1317px → thẻ 424px → ô ảnh 424×120 = 3,48:1
 *    Ô ảnh `object-fit:cover` nên tỉ lệ 3,48:1 cắt phăng gần nửa chiều cao
 *    ảnh gốc 16:9 — ra đúng cái "thumb méo và xấu".
 *    Không chữa bằng cách sửa riêng ô ảnh: sửa đúng chỗ sai là BỀ RỘNG CỘT
 *    (mục 14.6 phía trên, nay nâng lên cả <main> thay vì chỉ thân bài), thì
 *    thẻ về 261px đúng bằng bản vẽ và ô ảnh tự đúng tỉ lệ.
 *
 * Lưới "Đọc tiếp" xuống 2 cột rồi 1 cột ở màn hẹp — 3 cột trên điện thoại
 * thì mỗi thẻ chỉ còn ~100px, chữ vỡ vụn. */
@media (max-width: 860px) {
  [data-alouc-o="luoi-doc-tiep"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
  [data-alouc-o="luoi-doc-tiep"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── 14.10 Ô ảnh nay là thẻ <a> — khử gạch chân và màu chữ thừa ─────────────
 * `.pg a{color:inherit}` + gạch chân mặc định sẽ lộ ra khi ảnh chưa tải (lúc
 * đó ô hiện chữ "ẢNH" giữ chỗ). Giữ ô ảnh trông y hệt lúc còn là <div>. */
.pg a.ph { text-decoration: none; }

/* ── 14.11 ẢNH BỌC TRONG <table class="picture"> CỦA NỘI DUNG CŨ ────────────
 *
 * 🔴 Đo thật 30/10/2026 trên 8 bài (4 bài cũ 2015-2018 + 4 bài mới), ở 390px:
 *       /bai-muoi-menh-mong-o-australia              tràn 103px
 *       /trung-quoc-cuong-quyet-dep-nan-het-gia…     tràn 104px
 *       /chuyen-gi-dang-xay-ra-o-new-zealand-vay     tràn 210px
 *       /bai-toan-di-cho-cua-du-hoc-sinh-viet…       tràn 392px (img width="2500")
 *    ⇒ 4/8 bài hỏng. Ở 1440px thì 0/8 — nên đo một cỡ màn rồi kết luận "sạch"
 *    là tự lừa.
 *
 * Gốc rễ: trình soạn thảo đời cũ bọc ảnh trong BẢNG (`<table><td class="pic">`).
 * Luật mục 9 cho mọi bảng `display:block;overflow-x:auto` — đúng với BẢNG SỐ
 * LIỆU (cắt bảng là mất số), nhưng với bảng-chứa-ảnh thì thành ra ảnh bị cắt
 * ngang và phải kéo ngang mới xem hết: đúng cái "ảnh bị lố và tràn viền".
 * `max-width:100%` ở mục 9 KHÔNG cứu được vì khung chứa ảnh là ô <td>, mà ô
 * đó tự nở theo chiều rộng ảnh ⇒ "100% của chính nó" vẫn là tràn.
 *
 * Cách chữa: với RIÊNG bảng chứa ảnh, bỏ hẳn dáng bảng — cho table/tbody/tr/td
 * xuống khối và rộng đúng 100% khung chữ; lúc đó `max-width:100%` của ảnh mới
 * có mốc đúng để co lại.
 *
 * 🔴 `width:auto !important` là bắt buộc: ảnh cũ mang THUỘC TÍNH `width="2500"`
 *    trên thẻ, không phải CSS — không đè thì ảnh vẫn ép 2500px.
 * 🔴 Dùng `max-width` chứ KHÔNG `width:100%`: ảnh nhỏ hơn khung thì giữ nguyên
 *    cỡ thật, không phóng to làm vỡ hạt. Nhờ vậy ở 1440px (khung 827px, ảnh
 *    754px) hình học không đổi một điểm ảnh nào ⇒ cổng đối chiếu vẫn sạch.
 * 🔴 Chỉ nhắm bảng CÓ ô ảnh (`td.pic`) — bảng số liệu vẫn giữ nguyên cách cuộn
 *    ngang của mục 9.                                                        */
.alouc-than-bai table:has(td.pic),
.alouc-than-bai table:has(td.pCaption),
.alouc-than-bai table.picture {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: visible !important;
}
.alouc-than-bai table:has(td.pic) tbody,
.alouc-than-bai table:has(td.pic) tr,
.alouc-than-bai table:has(td.pic) td,
.alouc-than-bai table:has(td.pCaption) tbody,
.alouc-than-bai table:has(td.pCaption) tr,
.alouc-than-bai table:has(td.pCaption) td,
.alouc-than-bai table.picture tbody,
.alouc-than-bai table.picture tr,
.alouc-than-bai table.picture td {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}
.alouc-than-bai td.pic img,
.alouc-than-bai table.picture img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto;
  margin-right: auto;
}
/* Chú thích ảnh của trình soạn cũ: cho ra dáng chú thích thay vì ô bảng trần. */
.alouc-than-bai td.pCaption,
.alouc-than-bai td.caption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  padding-top: 6px !important;
  text-align: center;
}

/* 🔴 Mục 5 đặt `.pg table{white-space:nowrap}` ở màn hẹp — đúng cho BẢNG SỐ
 *    LIỆU (không cho chữ xuống dòng thì cột mới giữ được hình), nhưng với
 *    bảng-chứa-ảnh thì dòng CHÚ THÍCH không xuống dòng nên chạy dài ra ngoài
 *    khung (đo: chú thích "…Upsplash." vượt 222px, "…NVCC." vượt 416px ở
 *    390px). Trả lại cách xuống dòng bình thường cho riêng nhóm bảng này. */
.alouc-than-bai table:has(td.pic),
.alouc-than-bai table:has(td.pCaption),
.alouc-than-bai table.picture,
.alouc-than-bai table:has(td.pic) td,
.alouc-than-bai table:has(td.pCaption) td,
.alouc-than-bai table.picture td {
  white-space: normal !important;
}