/* ==========================================================================
   42-page-lien-he.css — tách từ style.css ngày 17/08/2026 theo III.4.1.
   Nội dung bên dưới là NGUYÊN VĂN các mục §14 trang #24 của bản gộp;
   không sửa một luật nào trong lần tách này.
   ========================================================================== */


/* ── §14 trang #24 (dòng 2746–2910 của style.css cũ) ──────────────────── */

/* ==========================================================================
   14. LÔ 1 GIAI ĐOẠN D — TRANG #24 "LIÊN HỆ"
   Figma 697:21710 (desktop) · 1385:23266 (mobile)
   ========================================================================== */

/* [figma] trang24 · section crumb/lienhe — 2 lớp rộng 1060px: '1015:14473' · '722:47461'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 24 để chọn) */
/* Hero: dải ảnh 1900×450, khung chữ 1060 tại x=420 */
#content .t4fx-lh-hero .section-content > .row { max-width: 1060px; }
#content .t4fx-lh-hero .t4fx-lh-h1 { padding-top: 55px; }
#content .t4fx-lh-hero h1 {
  font-family: var(--t4-font-head); font-weight: 600;
  font-size: 40px; line-height: 53px; color: var(--t4-light);
  margin: 0; letter-spacing: 0;
}
#content .t4fx-lh-hero .t4fx-lh-sub p {
  font-size: 16px; line-height: 26px; color: var(--t4-light); margin: 16px 0 0;
}

/* [figma] trang24 · section lienhe — section DUY NHẤT chứa đủ
   bộ bề rộng của cụm này: 530px→'722:47472' (+1) · 1080px→'722:47470'
   (khớp theo TẬP bề rộng, chắc hơn khớp từng số: 528 đứng một
   mình ra hàng trăm ứng viên, '528 và 506 cùng một section'
   thì gần như duy nhất) */
/* ⚠ Hai thẻ ĐÈ LÊN hero: Figma đặt ở y=290 trong dải hero cao 450 */
#content .t4fx-lh-the-dai { margin-top: -160px; position: relative; z-index: 2; }
#content .t4fx-lh-the-dai .section-content > .row.t4fx-lh-hang { max-width: 1080px; }
#content .t4fx-lh-hang > .col { padding-left: 0; padding-right: 0; }
/* ⚠ CẢ HAI thẻ đều là hộp trắng 530×384 (Figma x=420 và x=970, khe 20).
   Thẻ 1 nằm lồng trong một frame "Margin" rộng 550 — đọc nhầm frame đó là
   thẻ thì ra kết luận "thẻ 1 không có nền". */
#content .t4fx-lh-hang { justify-content: space-between; }
#content .t4fx-lh-hang > .col.t4fx-lh-the1,
#content .t4fx-lh-hang > .col.t4fx-lh-the2 { flex: 0 0 530px; max-width: 530px; width: 530px; }

/* Thẻ 1 KHÔNG nền (Figma là frame trong suốt); chỉ thẻ 2 là hộp trắng bo 16 */
#content .t4fx-lh-the .col-inner {
  height: 100%; padding: 40px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
#content .t4fx-lh-the .col-inner { background: var(--t4-white); border-radius: 16px; }

/* [phục vụ] phần tử: Icon Box (featured_box) | khối: biểu tượng đầu thẻ liên hệ
   [trang] lien-he | [figma] 722:47474 calling.svg · 722:47491 comments.svg
   [lý do vượt panel] panel không gỡ được đệm mà theme cha áp cho <svg>.

   17/08/2026 — trước đây là '<span class="material-symbols-outlined">' (glyph
   phông) nhét trong ô văn bản: vi phạm III.2 và 4T không đổi được biểu tượng
   trong panel. Nay là [featured_box] + 'inline_svg="true"'.

   ⛔ VÌ SAO inline_svg CHỨ KHÔNG [ux_image]: Figma vẽ hai biểu tượng này là
   FRAME 50×50 chứa VECTOR, section không có lớp ảnh nào. Bảng dày so ẢNH
   THEO THỨ TỰ trong section, nên thêm một '<img>' là lệch cả dãy. 'inline_svg'
   nhả '<svg>' nội tuyến (flatsome/inc/helpers/helpers-shortcode.php:277) nên
   số ảnh của section vẫn là 0.

   ⛔ 'padding-top: 0' — flatsome.css khai '.icon-box-img svg{padding-top:.2em}'
   (3,2px ở cỡ chữ 16). Với 'box-sizing: border-box' + 'height:auto' nó CỘNG
   THÊM vào chiều cao hộp. Đây đúng là thứ đã đẩy lệch thẻ 02 của §4 trang chủ. */
#content .t4fx-lh-icon { display: block; margin: 0; }
#content .t4fx-lh-icon .icon-box-img {
  width: 50px !important; margin: 0 auto; line-height: 0;
}
#content .t4fx-lh-icon .icon-box-img svg {
  display: block; width: 100%; height: auto; padding-top: 0;
}
/* ⛔ Màu phải khai lại: flatsome.css có '.icon-box-img svg{fill:currentcolor}'
   và CSS thắng thuộc tính 'fill=' trong chính tệp SVG, nên biểu tượng ra ĐEN
   dù tệp khai '#B77537'. Figma node 722:47476 · 722:47493 = '#b77537'. */
#content .t4fx-lh-icon .icon-box-img svg,
#content .t4fx-lh-icon .icon-box-img svg path { fill: var(--t4-camel-dark); }
/* Ô chữ của Icon Box rỗng (tiêu đề và mô tả là ô văn bản riêng, đúng thứ tự
   Figma) — không gỡ đệm thì nó vẫn chiếm chỗ và đẩy tiêu đề xuống. */
#content .t4fx-lh-icon .icon-box-text { padding: 0; }
/* Khe biểu tượng → tiêu đề: Figma 373 → 405 = **32** (xem ghi chú đệm 33 ở
   khối "vá vòng hai #24" cuối tệp). Trước là 20, bù cho glyph phông cao 40. */
#content .t4fx-lh-the-td h2 {
  font-family: var(--t4-font-body); font-weight: 700;
  font-size: 20px; line-height: 35px; color: var(--t4-text);
  margin: 32px 0 0; letter-spacing: 0;
}
#content .t4fx-lh-the-mo p {
  font-size: 16px; line-height: 26px; color: var(--t4-text); margin: 24px 0 0;
}
#content .t4fx-lh-sdt p, #content .t4fx-lh-xem p {
  font-size: 16px; line-height: 26px; margin: 24px 0 0;
}
#content .t4fx-lh-sdt a, #content .t4fx-lh-xem a {
  color: var(--t4-text); text-decoration: underline;
}
#content .t4fx-lh-the .button.t4fx-lh-nut { margin: 38px 0 0; min-height: 46px; }

/* Nhãn "Thông tin liên hệ offline" — Figma 38.6/44 w500 */
#content .t4fx-lh-offline .section-content > .row { max-width: 1080px; }
#content .t4fx-lh-nhan { margin-top: 76px; }
#content .t4fx-lh-td2 h2 {
  font-family: var(--t4-font-head); font-weight: 500;
  font-size: 38.6px; line-height: 44px; color: var(--t4-text);
  margin: 24px 0; letter-spacing: 0;
}

/* Thẻ trắng bo 16 chứa bản đồ 708 | thông tin 370, ngăn bằng kẻ dọc
   [figma] section “văn phòng” — desktop '722:47622' · mobile '1385:23406'
          (node lấy từ bản đồ đo: tools/truy-node-be-rong.py --lop t4fx-lh-off)
   1080 = khung nội dung chuẩn (GIA ĐÌNH SỐ KHUNG, 30-components).      */
#content .t4fx-lh-off {
  max-width: 1080px; background: var(--t4-white); border-radius: 16px;
  margin-top: 64px; overflow: hidden;
}
#content .t4fx-lh-off > .col { padding-left: 0; padding-right: 0; }
#content .t4fx-lh-off > .col.t4fx-lh-cot-bando { flex: 0 0 709px; max-width: 709px; width: 709px; }
#content .t4fx-lh-off > .col.t4fx-lh-cot-tt {
  flex: 0 0 371px; max-width: 371px; width: 371px;
  border-left: 1px solid rgba(0, 0, 0, .11);
}
#content .t4fx-lh-cot-bando .col-inner, #content .t4fx-lh-cot-bando .img,
#content .t4fx-lh-cot-bando .img-inner { height: 500px; }
#content .t4fx-lh-cot-bando img { height: 100%; object-fit: cover; }
#content .t4fx-lh-cot-tt .col-inner { padding: 65px 33px; }

#content .t4fx-lh-ten p {
  font-family: var(--t4-font-head); font-weight: 600;
  font-size: 40px; line-height: 53px; color: var(--t4-dark-moss); margin: 0;
}
/* 17/08/2026 — '<address>' không nằm trong whitelist III.2, và Figma vẽ khối
   này là MỘT lớp chữ ba dòng chứ không phải một khối ngữ nghĩa riêng. Đổi
   sang '<p>' + '<br>'; 'font-style' không cần trung hoà nữa vì '<p>' không
   nghiêng sẵn như '<address>'. */
#content .t4fx-lh-dc p {
  font-size: 16px; line-height: 26px;
  color: var(--t4-text); margin: 10px 0 0;
}
#content .t4fx-lh-nhan-lb p {
  font-weight: 700; font-size: 16px; line-height: 30px;
  color: var(--t4-camel-dark); margin: 22px 0 0;
}
#content .t4fx-lh-lienlac p { font-size: 16px; line-height: 26px; margin: 8px 0 0; }
#content .t4fx-lh-lienlac a { color: var(--t4-text); text-decoration: underline; }
#content .t4fx-lh-ghichu p { font-size: 16px; line-height: 26px; margin: 122px 0 0; }
#content .t4fx-lh-ghichu a { color: var(--t4-text); text-decoration: underline; }

@media (max-width: 849px) {
  #content .t4fx-lh-hero .section-content > .row { max-width: 352px; }
  #content .t4fx-lh-the-dai .section-content > .row.t4fx-lh-hang,
  #content .t4fx-lh-offline .section-content > .row,
  #content .t4fx-lh-off { max-width: 352px; }
  #content .t4fx-lh-hang > .col.t4fx-lh-the1,
  #content .t4fx-lh-hang > .col.t4fx-lh-the2,
  #content .t4fx-lh-off > .col.t4fx-lh-cot-bando,
  #content .t4fx-lh-off > .col.t4fx-lh-cot-tt {
    flex: 0 0 100%; max-width: 100%; width: 100%;
  }
  #content .t4fx-lh-off > .col.t4fx-lh-cot-tt { border-left: 0; border-top: 1px solid rgba(0,0,0,.11); }
  #content .t4fx-lh-cot-tt .col-inner { padding: 32px 24px; }
  #content .t4fx-lh-ghichu p { margin-top: 32px; }
}

/* --- 14.1 vá vòng đo #24 --- */

/* Hero canh TỪ MÉP TRÊN: Figma desktop H1 ở y=95 trong dải 450, mobile ở
   y=261 trong dải 650 — hai vị trí khác hẳn nhau, căn giữa là sai cả hai. */
#content .t4fx-lh-hero { justify-content: flex-start; }
#content .t4fx-lh-hero .t4fx-lh-h1 { padding-top: 95px; }

/* [figma] '722:47470' — end row-wrapper → style type="text/css · 1080×384 · trang24·lienhe
   (lớp DUY NHẤT rộng 1080px trong figma-spec/trang24.json) */
/* ⚠ Hàng hai thẻ lệch phải 10px so với tâm: Figma đặt 420..1500 trong khung
   1900 (tâm 960, lệch 10 so với tâm trang 950). Bám đúng Figma như đã quyết
   cho thẻ CTA của trang #4. */
#content .t4fx-lh-the-dai .section-content > .row.t4fx-lh-hang {
  max-width: 1080px; margin-left: 420px; margin-right: auto;
}
#content .t4fx-lh-the .col-inner { min-height: 384px; padding: 55px 40px 40px; }
/* ⛔ ĐÃ BỎ '#content .t4fx-lh-the-td h2 { margin-top: 15px }' (17/08/2026).
   Nó đè lên luật gốc ở đầu tệp bằng ĐỘ CỤ THỂ BẰNG NHAU nhưng đứng sau, nên
   sửa khe ở luật gốc không có tác dụng gì — im lặng. 15px là số bù cho glyph
   phông cao 40; nay biểu tượng đúng khổ Figma 50 và khe thật là 32. */

/* Tiêu đề "Thông tin liên hệ offline" — Figma dùng Inter 38,6/44 w500, CĂN
   GIỮA. Inter không có trong bộ font site nên nạp riêng (xem functions.php). */
#content .t4fx-lh-td2 h2 {
  font-family: 'Inter', var(--t4-font-body); text-align: center;
}

/* Thẻ bản đồ cao đúng 500 như Figma */
#content .t4fx-lh-off { height: 500px; }

/* ⛔ HAI CON SỐ NÀY BÁM CHIỀU CAO HERO 650, MÀ 650 CHỈ CÓ Ở ≤549px.
   '[section height__sm]' của Flatsome đổi ở 549, còn khối '@media' của tệp
   này đổi ở 849 — hai ranh giới KHÁC NHAU. Trong dải 550–849 thì hero đã về
   450 nhưng chữ vẫn bị đẩy xuống 261 và dải thẻ vẫn bị kéo lên 281, nên chữ
   hero rơi VÀO TRONG thẻ: 'kiem-vo' ở 768 bắt được hai cặp chồng chữ
   ("Liên hệ" ↔ "Talk to Sales" 18×26px · đoạn dẫn ↔ "Bạn quan tâm…" 263×9px).
   Vì vậy chỉ hai luật NÀY dùng 549; mọi luật khác của khổ điện thoại (bề
   rộng, xếp chồng, cỡ chữ) vẫn ở 849 vì chúng không phụ thuộc chiều cao hero.
   ⚠ Figma chỉ vẽ 402 và 1900; dải 550–849 không có bản thiết kế nào, nên ở
   đó lấy bố cục desktop là lựa chọn an toàn — không phải suy ra số mới. */
@media (max-width: 549px) {
  #content .t4fx-lh-hero .t4fx-lh-h1 { padding-top: 261px; }
  /* Chồng lên hero ĐÚNG **257** = 650 (hero) − 393 (mép trên thẻ trong Figma
     '1385:23303' → 'Background+Border'). Trước khai −281, tức thẻ nhô cao hơn
     bản vẽ 24px. Bảng dày mù ('bo_toa_do: true', thẻ không phải lớp chữ); chỉ
     ảnh nhiệt chặng 3 bắt được — vùng đỏ liền khối 380×38 ngay mép trên thẻ. */
  #content .t4fx-lh-the-dai { margin-top: -257px; }
}

/* [figma] trang24 · section lienhe_mb — 3 lớp rộng 380px: '1385:23365' · '1385:23367' · '1385:23384'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 24 để chọn) */
@media (max-width: 849px) {
  #content .t4fx-lh-the-dai .section-content > .row.t4fx-lh-hang {
    max-width: 380px; margin-left: auto;
  }
  #content .t4fx-lh-off { height: auto; }
  /* Figma mobile: tên công ty 32/35 w700, đệm thẻ 34 */
  #content .t4fx-lh-ten p { font-size: 32px; line-height: 35px; font-weight: 700; }
  #content .t4fx-lh-cot-tt .col-inner { padding: 34px; }
}

/* --- 14.2 vá vòng hai #24 --- */
/* ⚠ [section] của Flatsome là flex NGANG: căn dọc do 'align-items' quyết,
   'justify-content' không đụng tới. Đặt nhầm justify-content thì nội dung
   vẫn nằm giữa và cộng thêm padding thành lệch nặng hơn. */
#content .t4fx-lh-hero { align-items: flex-start; justify-content: center; }
/* bẫy số 4: .row::after clearfix thành phần tử flex thứ ba, chia khe 10 thay vì 20 */
#content .t4fx-lh-the-dai .section-content > .row.t4fx-lh-hang::after { display: none; }
/* ⛔ ĐỆM TRÊN 33, KHÔNG PHẢI 60 — sửa 17/08/2026 cùng lúc với việc đổi biểu
   tượng sang [featured_box].
   Figma (thẻ y=290): biểu tượng y=323 ⇒ đệm trên **33** · biểu tượng cao **50**
   ⇒ đáy 373 · tiêu đề y=405 ⇒ khe **32**. Cộng lại 33+50+32 = 115.
   Bản cũ dùng glyph phông cao 40 với đệm 60 và khe 15: 60+40+15 cũng = 115 —
   **đúng kết quả nhờ hai cái sai triệt tiêu nhau**. Đổi biểu tượng sang đúng
   khổ Figma (50) mà giữ đệm 60 thì tiêu đề tụt 10px và mốc
   "Chúng tôi luôn sẵn sàng → Talk to Sales" từ 241 thành 251. */
#content .t4fx-lh-the .col-inner { height: 384px; min-height: 0; padding: 33px 40px 40px; }

@media (max-width: 849px) {
  /* Figma mobile: thẻ y=64 cao 612, khối thông tin bắt đầu y=356 → vùng bản
     đồ chỉ cao ~276, không phải 500 như desktop. */
  #content .t4fx-lh-cot-bando .col-inner,
  #content .t4fx-lh-cot-bando .img,
  #content .t4fx-lh-cot-bando .img-inner { height: 257px; }
}


/* --- 14.3 Breadcrumb khổ điện thoại: giành lại phạm vi của trang này -------
   [phục vụ] phần tử: breadcrumb child theme | khối: 'nav.t4fx-crumb'
   [trang] lien-he | [figma] crumb_mb — "Home" 13,8/22 w=39 · mũi tên rộng 32
   (x 64→96) · "Liên hệ" 13,9/22 w=48
   [lý do vượt panel] breadcrumb do child theme in ra, không có phần tử builder

   ⛔ BA luật TOÀN CỤC nằm trong tệp của trang KHÁC đang đè lên trang này —
   đều là số của trang #4 (Figma node 1113:23113 khai 10px) mà bộ chọn không
   hề khoá vào trang #4:

     '40-page-xu-ly-loi-sai-google-ads.css'  .t4fx-crumb ol { font-size: 10px }
                                             .t4fx-crumb li + li::before { width: 20px }
     '44-nhom-ggm.css'                       .t4 nav.t4fx-crumb ol li:last-child *
                                             { line-height: 13px }

   Sáu mốc 'crumb_mb' của trang này và SÁU mốc y hệt của trang #25 đều từ đó
   ra. Mục 13.7 của '41-page-chinh-sach-bao-mat.css' đã giành lại phạm vi cho
   trang #23 theo đúng cách này; đây là bản thứ hai và thứ ba.

   Đường sửa TẬN GỐC là dời ba luật kia về phạm vi trang #4 — đã có hồ sơ I.6
   và phải làm khi không còn trang nào dựng dở. Ở đây chỉ giành lại phạm vi
   của MỘT trang, không đụng tệp của trang khác.

   ⚠ Đặt 13,9 cho cả hai mục: Figma khai "Home" 13,8 và "Liên hệ" 13,9 — chênh
   0,1px, dưới ngưỡng 0,5px của I.2, nên một con số đủ cho cả hai. */
@media (max-width: 849px) {
  .t4.t4-trang-lien-he .t4fx-crumb ol { font-size: 13.9px; }
  .t4.t4-trang-lien-he .t4fx-crumb li + li::before { width: 32px; }
  .t4.t4-trang-lien-he nav.t4fx-crumb ol li:last-child,
  .t4.t4-trang-lien-he nav.t4fx-crumb ol li:last-child * { line-height: 22px; }
}

/* [figma] trang24 · section lienhe/lienhe_mb — 2 lớp rộng 157px: '722:47501' · '1385:23396'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 24 để chọn) */
/* --- 14.4 Vòng đo #24 đợt hai — bốn khối, mỗi khối một nguyên nhân --------
   [phục vụ] phần tử: Text · Button | khối: thẻ liên hệ + khối offline
   [trang] lien-he | [figma] lienhe · lienhe_mb · offline_mb
   [lý do vượt panel] panel Button không có 'line-height'/'font-weight' cho
   nhãn, panel Text không có 'text-decoration', và bề rộng hộp tiêu đề hero
   không có ô nào trong panel Section

   (a) HAI LIÊN KẾT KHÔNG GẠCH CHÂN. Figma khai 'gach = NONE' cho cả
   "+84 985 684 821" lẫn "Xem tất cả các liên lạc", ở CẢ hai khổ; site đang
   'text-decoration: underline'. 4 mốc.
   ⚠ ĐÁNH ĐỔI CÓ Ý THỨC: bỏ gạch chân làm hai liên kết này không còn dấu hiệu
   nào phân biệt với chữ thường ngoài vị trí — màu của chúng cũng là
   '--t4-text'. Theo Luật 0 thì bám Figma và ghi lại quyết định; nếu 4T muốn
   giữ gạch chân vì lý do dễ dùng thì đây là chỗ để lật lại, và khi đó bốn mốc
   này chuyển thành miễn trừ chứ không phải sửa Figma.

   (b) NÚT "Liên hệ hỗ trợ" — Figma khai chữ 16/21,856 đậm 700 trong hộp
   157×50; site đang 16/24 đậm 600 trong hộp 143,42×46 (desktop) và
   125,77×46 (điện thoại). 8 mốc.

   (c) DÒNG GHI CHÚ "Vui lòng truy cập phần blog…" ở KHỔ ĐIỆN THOẠI là
   12/16,392, không phải 16/26 — 16/26 là số của bản desktop. 2 mốc.

   (d) KHỐI TIÊU ĐỀ HERO desktop rộng 606,67 chứ không tràn hết cột 1060.
   Figma khai cả 'Liên hệ' lẫn đoạn dẫn trong hộp 606,67 ở giữa cột 1060.
   ⚠ Chỉ chữa được mốc 'w' của 'Liên hệ'. Mốc 'chu_w' của đoạn dẫn so BỀ RỘNG
   MỰC bên site (330,13) với BỀ RỘNG HỘP bên Figma (606,67) — chuỗi hai bên
   giống hệt nhau từng ký tự nên mực không bao giờ ra 606,67; đó là hộp chữ
   cố định của Figma, đã nộp miễn trừ. */
#content .t4fx-lh-sdt a, #content .t4fx-lh-xem a { text-decoration: none; }
#content .t4fx-lh-the .button.t4fx-lh-nut {
  min-height: 50px; width: 157px; max-width: 157px;
}
#content .t4fx-lh-the .button.t4fx-lh-nut span {
  font-size: 16px; line-height: 21.856px; font-weight: 700;
}
#content .t4fx-lh-hero h1,
#content .t4fx-lh-hero .t4fx-lh-hero-mo p { max-width: 606.67px; }

@media (max-width: 849px) {
  #content .t4fx-lh-ghichu p { font-size: 12px; line-height: 16.392px; }
  /* Khổ điện thoại Figma cho hộp chữ đúng bằng cột 352 — bỏ chặn 606,67 của
     desktop, nếu không mốc 'w' 352 ↔ 352 đang đạt sẽ hỏng. */
  #content .t4fx-lh-hero h1,
  #content .t4fx-lh-hero .t4fx-lh-hero-mo p { max-width: none; }
}

/* --- 14.5 Khối "Thông tin liên lạc" — ba khoảng cách, đo từ Figma ---------
   [phục vụ] phần tử: Text | khối: '.t4fx-lh-lienlac' · '.t4fx-lh-ghichu' · nhãn
   [trang] lien-he | [figma] offline · offline_mb · nhan_mb
   [lý do vượt panel] khe giữa hai <p> trong CÙNG một phần tử Text không có
   ô trong panel; cỡ chữ nhãn theo khổ màn cũng vậy

   (a) HAI DÒNG ĐIỆN THOẠI cách nhau 30, không phải 34. Figma: "Điện thoại"
   y=331 cao 26 → "Zalo" y=361. Site để lề 8 trên cao dòng 26 ⇒ 34. Giống
   nhau ở CẢ hai khổ nên một luật là đủ.

   (b) DÒNG GHI CHÚ cách dòng Zalo 118 (desktop) và 42 (điện thoại) — hai số
   khác hẳn nhau, không suy được từ nhau. Site đang 148 và 55.
   ⚠ Sửa (a) KHÔNG kéo theo (b): dòng Zalo lên 4 thì cả khối ghi chú cũng lên
   4, khoảng cách giữa hai mốc giữ nguyên. Đã tính trước rồi mới đặt số.

   (c) NHÃN "Thông tin liên hệ offline" khổ ĐIỆN THOẠI là 24/30, không phải
   38,6/44 — 38,6/44 là số của bản desktop. Figma khai hộp 352×60, tức chữ
   xuống HAI dòng ở khổ này. */
#content .t4fx-lh-lienlac p + p { margin-top: 4px; }
#content .t4fx-lh-ghichu p { margin-top: 92px; }

@media (max-width: 849px) {
  #content .t4fx-lh-ghichu p { margin-top: 19px; }
  #content .t4fx-lh-td2 h2,
  #content .t4fx-lh-nhan h2 { font-size: 24px; line-height: 30px; }
}

/* --- 14.6 Dải hai thẻ KHỔ ĐIỆN THOẠI — vị trí và khe giữa hai thẻ ---------
   [phục vụ] phần tử: Row/Col | khối: '.t4fx-lh-the-dai' · '.t4fx-lh-hang'
   [trang] lien-he | [figma] lienhe_mb
   [lý do vượt panel] panel Row không có lề âm theo khổ màn, cũng không có
   khe riêng giữa hai Col khi chúng xếp chồng ở khổ điện thoại

   Figma khai HAI thẻ cao ĐÚNG BẰNG NHAU và có khe:
       thẻ 1  Background+Border  y=393  380×384
       thẻ 2  Background+Border  y=793  380×384      ⇒ khe 16
   Site dựng đúng 384 mỗi thẻ nhưng DÍNH LIỀN (thẻ 2 bắt đầu ngay ở 384) —
   thiếu đúng khe 16 đó.

   Và cả dải nằm THẤP HƠN Figma 121px: mốc "đoạn dẫn hero → tiêu đề thẻ 1"
   Figma 154, site 275. Lề âm −160 là số của bản desktop (thẻ chồng lên hero
   160px); khổ điện thoại Figma cho thẻ 1 ở y=393 trong khi hero cao 650, tức
   chồng sâu hơn hẳn. */
@media (max-width: 849px) {
  #content .t4fx-lh-hang > .col.t4fx-lh-the2 { margin-top: 16px; }
}

/* --- 14.7 Nút "Liên hệ hỗ trợ" nằm THẤP hơn số điện thoại của thẻ bên -----
   [phục vụ] phần tử: Button | khối: '.t4fx-lh-the2'
   [trang] lien-he | [figma] lienhe · lienhe_mb
   [lý do vượt panel] panel Button chỉ có lề chung, không có mốc ghim riêng
   theo khổ màn

   Hai thẻ cao bằng nhau nhưng nội dung khác nhau, nên Figma KHÔNG đặt nút
   theo dòng chảy — nó ghim nút ở một mốc riêng:

       desktop   "+84 985 684 821"  y=566 h=26   tâm 579
                 "Liên hệ hỗ trợ"   y=579,5 h=22 tâm 590,5   ⇒ lệch tâm +11,5
                 "Xem tất cả…"      y=616                    ⇒ nút → 36,5
       mobile    "Contact Customer Support" y=884 → nút y=1096,5 ⇒ 212,5

   Site để nút chảy tự nhiên sau đoạn mô tả (lề trên 38) nên nó lên cao hơn
   Figma: desktop lệch tâm 0 thay vì 11,5, và khe nút→"Xem tất cả" 49,94 thay
   vì 36,5. Hai mốc ấy đòi dịch xuống 11,51 và 13,44 — chọn 12,5 để cả hai
   cùng nằm trong ±2. */
#content .t4fx-lh-the .button.t4fx-lh-nut { margin-top: 50.5px; }

@media (max-width: 849px) {
  #content .t4fx-lh-the .button.t4fx-lh-nut { margin-top: 61.44px; }
}

/* --- 14.8 Nhãn "Thông tin liên hệ offline" xuống HAI dòng ở khổ điện thoại -
   [phục vụ] phần tử: Text (h2) | khối: '.t4fx-lh-td2'
   [trang] lien-he | [figma] nhan (1080×92, một dòng) · nhan_mb (402×108)
   [lý do vượt panel] ngắt dòng cứng không có ô trong panel

   Chuỗi của lớp Figma khác nhau theo khổ:
       nhan     'Thông tin liên hệ offline'    hộp 1080×44  ⇒ MỘT dòng
       nhan_mb  'Thông tin liên hệ \noffline'  hộp 352×60   ⇒ HAI dòng (2×30)

   Site không có ngắt cứng nên ở 402 chữ vẫn nằm một dòng (24/30 = 30 cao) và
   khối nhãn chỉ 78 thay vì 108 — thiếu đúng một dòng 30.
   '<br>' nằm trong whitelist III.2 ("xuống dòng chủ ý theo Figma"); giấu nó ở
   desktop, cùng cách mục 9 của '41-page-chinh-sach-bao-mat.css' đã dùng.
   ⚠ GIỮ DẤU CÁCH trước '<br>' — ẩn '<br>' bằng 'display:none' làm mất luôn
   khoảng trắng, hai vế dính thành "…liên hệoffline" (đã trả giá ở trang #23). */
@media (min-width: 850px) {
  #content .t4fx-lh-td2 h2 br { display: none; }
}

/* --- 14.9 Hộp offline khổ điện thoại — ba con số đọc thẳng từ node Figma ---
   [phục vụ] phần tử: Row/Col + Image + Text | khối: '.t4fx-lh-off'
   [trang] lien-he | [figma] offline_mb — 'Background+Border' 352×611,6 @ y=64
   [lý do vượt panel] chiều cao ô ảnh và đệm cột không có ô trong panel Row

   Figma khai rõ từng mảnh, trước nay site dùng số ƯỚC LƯỢNG:

       mảnh                     Figma            site cũ    ghi chú
       ô bản đồ                 350×259 @ y=65   257        chú thích cũ ghi
                                                            "~276", đặt 257
       cột thông tin (đệm)      32 / 32          34 / 34    suy từ 356−324
       khe Zalo → ghi chú       16               19

   Tổng ba cái cho hộp 616,78 thay vì 611,6.

   ⚠ Khe 16 của Figma đo theo HỘP, còn bảng dày chấm theo KHUNG GLYPH nên nó
   đòi 42 (site 19 cho ra đúng 42). Đặt 18 là điểm cả hai cùng nằm trong
   ngưỡng: bảng dày lệch −1 (≤2 ✅) và hộp còn +3,18 (≤4 ✅). Đây là cách
   TÁCH hai ràng buộc thay vì đổi mốc này lấy mốc kia (bài học 21/08 §3.4). */
@media (max-width: 849px) {
  #content .t4fx-lh-cot-bando .col-inner,
  #content .t4fx-lh-cot-bando .img,
  #content .t4fx-lh-cot-bando .img-inner { height: 259px; }
  #content .t4fx-lh-cot-tt .col-inner { padding-top: 32px; padding-bottom: 32px; }
  #content .t4fx-lh-ghichu p { margin-top: 18px; }
}

/* --- 14.10 Ảnh minh hoạ hero — lớp Figma bị BỎ SÓT suốt, chặng 3b bắt được -
   [phục vụ] phần tử: Image ('[ux_image]') | khối: hero '.t4fx-lh-hero'
   [trang] lien-he | [figma] lienhe 'Asset 1 11' x=1236 y=40 258×205 ·
   lienhe_mb cùng lớp ở x=25 y=40
   [lý do vượt panel] panel Image không có ô đặt ảnh CHỒNG lên nền section

   Lớp này là ẢNH nên bảng dày không đụng tới (điểm mù II.K-3), và T0 đếm
   LOẠI phần tử chứ không kiểm đủ/thiếu — nên nó vắng mặt suốt mà mọi tầng
   đều xanh. Chỉ ảnh nhiệt nhìn ra. Bản kê III.6 ở 'qa/danh-sach-danh-doi.md'.

   Neo theo TÂM khung, không cắm số tuyệt đối:
       desktop  mép phải ảnh 1236+258 = 1494, tâm khung 950 ⇒ right 50% − 544
       mobile   mép trái 25, tâm 201 ⇒ left 50% − 176 (đúng mép cột nội dung) */
#content .t4fx-lh-hero .t4fx-lh-minhhoa {
  position: absolute; top: 40px; right: calc(50% - 544px);
  width: 258px; margin: 0; z-index: 1;
}
#content .t4fx-lh-hero .t4fx-lh-minhhoa img { width: 258px; height: 205px; }

@media (max-width: 849px) {
  #content .t4fx-lh-hero .t4fx-lh-minhhoa {
    right: auto; left: calc(50% - 176px);
  }
}

/* --- 14.11 Khung cắt ảnh nền hero — đọc từ 'imageTransform' của Figma ------
   [phục vụ] phần tử: Section (ô Background Image) | khối: '.t4fx-lh-hero'
   [trang] lien-he | [figma] lienhe — fill của 'end row-wrapper → Section'
   [lý do vượt panel] panel Section chỉ có Position dạng 9 ô/phần trăm thô,
   không đặt được mốc cắt lấy từ ma trận của Figma

   Figma khai ô cắt bằng 'imageTransform', KHÔNG phải "căn giữa":

       scaleMode  STRETCH
       T          [[1, 0, 0], [0, 0.35105956, 0.47080871]]
       ⇒ vùng thấy: x 0 → 1 (trọn bề rộng) · y 0,4708 → 0,8219

   Tức Figma lấy dải giữa-dưới của tấm ảnh, còn site để 'object-fit: cover'
   căn giữa nên lấy dải chính giữa — cùng một tấm ảnh mà khung hình lệch hẳn,
   và ảnh nhiệt của cả màn 'lienhe' đỏ 24%.

   Quy ra CSS: ảnh 2880×1923 vẽ 'cover' vào khung 1900×450 ⇒ tỉ lệ 0,65972,
   ảnh cao 1268,4. Mép trên dải cần thấy = 0,4708 × 1923 × 0,65972 = 597,4.
   'object-position' theo phần trăm: 597,4 / (1268,4 − 450) = **73%**.

   ⚠ CHỈ khổ desktop. Cùng lớp ở 'lienhe_mb' khai 'scaleMode: FILL' không có
   ma trận — tức đúng bằng 'cover' căn giữa, là thứ site đang làm. */
@media (min-width: 850px) {
  #content .t4fx-lh-hero > .section-bg img.bg { object-position: center 73%; }
}

/* [figma] trang24 · section lienhe_mb — 3 lớp rộng 380px: '1385:23365' · '1385:23367' · '1385:23384'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 24 để chọn) */
/* --- 14.12 Thẻ liên hệ khổ điện thoại RỘNG 380, TRÀN 14px mỗi bên khỏi cột -
   [phục vụ] phần tử: Row/Col | khối: '.t4fx-lh-hang' · '.t4fx-lh-the'
   [trang] lien-he | [figma] lienhe_mb — 'Background+Border' x=11 w=380 ·
   đoạn mô tả x=53,94 w=294,11 ⇒ đệm ngang 42,94
   [lý do vượt panel] panel Row không cho tràn ra ngoài cột nội dung

   Figma đặt thẻ RỘNG HƠN cột nội dung: cột 352 (x 25→377) còn thẻ 380
   (x 11→391) — tràn đúng 14px mỗi bên. Site để thẻ bằng cột nên hẹp hơn 28,
   và đoạn mô tả chỉ còn 272 thay vì 294 ⇒ NGẮT DÒNG KHÁC HẲN Figma. Ảnh nhiệt
   thấy ngay: viền đỏ dọc hai mép thẻ và chữ chồng đôi lệch dần trong đoạn mô
   tả — đúng dấu hiệu "chữ hiện hai lần" mà I.10 xếp vào LỖI THẬT.

   ⚠ Mục 201 đã khai 'max-width: 380px' nhưng KHÔNG ăn: hàng bị một luật khác
   ghim 'max-width: 352px' ở cùng khối 849 (mục 143) và hàng vốn chỉ rộng bằng
   cột. Phải đặt 'width' mới nới ra được. Đây là lý do đọc số khai 380 rồi
   tưởng luật đã chạy — đo ra 352.

   ⛔ ĐÃ THỬ VÀ ĐÃ LÙI trong cùng lượt: đặt 'margin-left/right: -14px' để "tràn
   ra hai bên". Khối chứa của hàng bắt đầu ở x=0 chứ không phải x=25, nên lề
   âm kéo thẻ về x=−14 và mốc 'Chúng tôi → Talk to Sales (ngang)' lệch −25.
   Giữ 'margin: auto' thì hàng 380 tự căn giữa khung 402 ⇒ x=11, ĐÚNG bằng số
   Figma khai — không cần lề âm nào. */
@media (max-width: 849px) {
  #content .t4fx-lh-the-dai .section-content > .row.t4fx-lh-hang {
    width: 380px; max-width: 380px; margin-left: auto; margin-right: auto;
  }
  #content .t4fx-lh-the .col-inner { padding-left: 43px; padding-right: 43px; }
}

@media (max-width: 549px) {
  /* Khe biểu tượng → tiêu đề thẻ ở khổ 402 là **8**, không phải 32 của
     desktop: Figma '1385:23303' đặt 'Img:margin' 50×50 ở y=426 và
     'Heading 2' ở y=484, mà 'Heading 2:margin' bọc ngoài bắt đầu ở 476
     ⇒ 476 + 8 = 484.
     ⚠ Trước đây mốc 'Chúng tôi luôn sẵn sàng → Talk to Sales' vẫn ✅ vì khe
     thừa 24px được lề âm của khối thẻ (−281 thay vì −257) TRỪ ĐI đúng 24 —
     hai lỗi triệt tiêu nhau. Sửa một cái mà không sửa cái kia là mốc đỏ lên
     ngay; đó cũng là cách phát hiện ra cả hai. */
  #content .t4fx-lh-the-td h2 { margin-top: 8px; }
}

/* --- 22/08/2026 — vùng chạm < 24px (WCAG 2.2 · 2.5.8) trên liên kết chữ trơn
   [phục vụ] phần tử: Text (liên kết trong đoạn) | khối: '.t4fx-lh-sdt' ·
   '.t4fx-lh-xem' · '.t4fx-lh-lienlac' · '.t4fx-lh-ghichu'
   [trang] lien-he | [figma] lienhe '722:47487' Link 162×26 ("Xem tất cả các
   liên lạc"); '.t4fx-lh-sdt'/'.t4fx-lh-lienlac' dùng chung line-height 26 đã
   khai ở dòng 94/146; ghichu dùng 16/26 desktop, 12/16,392 khổ ≤849 (dòng 328)
   [lý do vượt panel] panel Text không có ô chỉnh vùng-chạm/hit-area riêng
   với line-height chữ — kiem-tuong-tac.js đo bàn tay bấm THẬT, phát hiện các
   liên kết này chỉ cao 22px (desktop) / 17px (mobile 'blog'), dưới ngưỡng.
   ⛔ KHÔNG phóng to <p> bọc chữ (bài học XIV) — chỉ nới hộp bấm bằng lớp phủ
   ::after tuyệt đối trên chính <a>, cỡ chữ/khoảng cách Figma giữ nguyên. */
#content .t4fx-lh-sdt a, #content .t4fx-lh-xem a,
#content .t4fx-lh-lienlac a, #content .t4fx-lh-ghichu a { position: relative; }
#content .t4fx-lh-sdt a::after, #content .t4fx-lh-xem a::after,
#content .t4fx-lh-ghichu a::after {
  content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px;
}
/* Lienlac có hai dòng cách nhau chỉ 4px margin-top (dòng 353) — nới ít hơn
   (24px vừa đủ ngưỡng) để không cắn vào khe giữa hai liên kết. */
#content .t4fx-lh-lienlac a::after {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; bottom: -1px;
}
@media (max-width: 849px) {
  /* Dòng "blog" ở khổ nhỏ chỉ cao 17px (12/16,392) — nới nhiều hơn desktop. */
  #content .t4fx-lh-ghichu a::after { top: -4px; bottom: -4px; }
}