/* ==========================================================================
   45-page-trang-chu.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 §21 trang chủ của bản gộp;
   không sửa một luật nào trong lần tách này.
   ========================================================================== */


/* ── §21 trang chủ (dòng 4080–5199 của style.css cũ) ──────────────────── */

/* ==========================================================================
   21. TRANG CHỦ (#1) — Figma 163:6757 (desktop) · 1002:8059 (mobile)
   Bảy section nội dung; footer là section thứ 8 và đã nghiệm thu ở nhóm
   "footer" nên không đụng lại.
   ========================================================================== */

/* 21.1 HERO — Figma 1208:7757 (1900×950) · 1015:16737 (402×750) -------------
   Ảnh nền lấy THẲNG từ Figma (node Picture, đã nướng sẵn lớp phủ đen 20 %),
   cùng cách đã đưa hero mobile trang #4 từ 22,26 % xuống 0,46 %. Vì lớp phủ
   nằm trong ảnh nên KHÔNG thêm overlay của Flatsome.
   ⚠ Khổ mobile: Figma đặt ảnh 402×800 ở y=−25, tức cắt đều 25px trên và dưới
   khung 750 — đúng bằng 'cover' + 'center', không cần dời gì thêm.

   ⛔ HAI cái bẫy đã trả giá ngay ở section đầu tiên của trang này:
   1. Section của Flatsome là 'display:flex; align-items:center' ⇒ nội dung
      CĂN GIỮA DỌC. Figma thì đặt khối chữ ở y=326 trong khung 950 (căn giữa
      sẽ ra 282,5). Phải đổi sang 'flex-start' rồi ghim bằng đệm trên.
   2. Lề của mọi '.text' bị luật nền ở mục 11.0 xoá sạch
      ('.t4 .section:where(…) .section-content .text { margin: 0 }', 0,4,0).
      Viết '.t4 .t4h-eyebrow { margin-top: … }' (0,2,0) là thua và im lặng —
      đo ra margin 0px. Phải viết theo khuôn '.t4 .section-content .text.<lớp>'
      như mục 11.13 đã làm cho nút hero trang #4.

   Mốc dọc Figma:
     desktop  eyebrow 326 · H1 355 (120) · đoạn 501 (96) · nút 655 (56)
     mobile   eyebrow 204 · H1 236 (120) · đoạn 380 (128) · nút 640 (44)
*/
.t4 .section.t4h-hero {
  min-height: 950px; padding: 0; align-items: flex-start;
  background: url(https://demo1.tiepthitute.com/wp-content/uploads/2026/08/home-hero-dt-q84.webp)
              center / cover no-repeat;
  border-bottom: 0.92px solid var(--t4-dark-moss);
}
.t4 .section.t4h-hero .section-content { padding-top: 326px; }
/* ⚠ Phải đủ ĐỘ ƯU TIÊN. Luật nền dùng
   '.t4 .section:where(:not(.t4fx-footer)) .section-content > .row.row-collapse'
   — ':where()' không tính điểm nhưng năm lớp kia thì có, thành 0,5,0. Viết
   '.t4 .t4h-hero .section-content > .row' chỉ 0,4,0 nên thua, và cột giữ
   nguyên 1080 ⇒ H1 chỉ một dòng thay vì hai, đoạn hai dòng thay vì ba. */
.t4 .section.t4h-hero .section-content > .row.row-collapse { max-width: 715px; }
.t4 .section.t4h-hero .col { padding-bottom: 0; }

.t4 .t4h-eyebrow p {
  font-family: var(--t4-font-body); font-weight: 600; font-size: 16px;
  line-height: 22px; color: var(--t4-white); margin: 0; letter-spacing: 0;
  text-transform: uppercase;   /* Figma khai textCase UPPER */
}
/* ⛔ KHỐI "TRUNG HOÀ [title]" ĐÃ Bỏ — 17/08/2026.

   Sáu tiêu đề trang chủ từng dùng '[title]' của Flatsome, mà '[title]' sinh
   ra 'div.container.section-title-container > h*.section-title > <b> + span
   + <b>' với chữ hoa + giãn −1,2px mặc định. Phải mất 34 dòng CSS chỉ để
   gỡ lại những thứ đó — kể cả một luật gỡ kiểu cho MỌI <span> con, vì
   Flatsome dùng khối này làm thanh tiêu đề có gạch chân.

   Bộ luật III.1.1 nói rõ: tiêu đề THƯỜNG dùng **Text** rồi chọn thẻ heading;
   'Title' chỉ dành cho tiêu đề Figma vẽ CÓ KẺ HAI BÊN — trang chủ không có
   tiêu đề nào như vậy. Đã trả cả sáu về '[ux_text]' + '<hN>', và 34 dòng
   trung hoà trên biến mất theo. Đó chính là dấu hiệu chọn đúng phần tử: CSS
   ít đi chứ không nhiều lên.                                                */

.t4 .t4h-h1 :is(h1, h2) {
  font-family: var(--t4-font-head); font-weight: 500; font-size: 50px;
  line-height: 60px; color: var(--t4-white); margin: 0; letter-spacing: 0;
}
.t4 .t4h-hero-mo p {
  font-family: var(--t4-font-body); font-weight: 400; font-size: 20px;
  line-height: 32px; color: var(--t4-white); margin: 0;
}
/* khe dọc — khuôn đủ điểm để thắng luật 'margin: 0' của mục 11.0 */
/* ⚠ PHẢI có '.text' trong bộ chọn. Khi tiêu đề còn là '[title]', phần tử
   mang lớp này là 'div.section-title-container' — KHÔNG phải '.text' — nên
   viết '.t4 .section-content .t4h-tieude' (0,3,0) vẫn ăn. Đổi sang
   '[ux_text]' thì chính nó thành 'div.text', và luật nền
   '.t4 .section:where(…) .section-content .text { margin: 0 }' (0,4,0) thắng
   ngược, nuốt sạch lề — đo ra đúng −7px (desktop) và −10px (mobile). */
.t4 .section-content .text.t4h-tieude { margin-top: 7px; }
.t4 .section-content .text.t4h-hero-mo  { margin-top: 26px; }
.t4 .section-content .text.t4h-hero-nut { margin-top: 58px; }

/* [figma] trang1 · section hero — 2 lớp rộng 180px: '1208:7764' · '1208:7766'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 1 để chọn) */
.t4 .t4h-hero-nut { display: flex; justify-content: center; gap: 22px; }
.t4 .t4h-nut {
  display: flex; align-items: center; justify-content: center;
  width: 180px; height: 56px; border-radius: 5px; border: 1px solid transparent;
  font-family: var(--t4-font-body); font-weight: 700; font-size: 18px;
  line-height: 32px; text-transform: none;
}
.t4 .t4h-nut--cam   { background: var(--t4-camel); color: var(--t4-white); }
/* Figma: nút "Khám phá" có VIỀN camel thật ('strokes' alpha 1), nút kia viền
   trong suốt. Cả hai bo 5px. */
.t4 .t4h-nut--trang { background: var(--t4-white); color: var(--t4-camel); border-color: var(--t4-camel); }

@media (max-width: 849px) {
  .t4 .section.t4h-hero {
    min-height: 750px;
    background-image: url(https://demo1.tiepthitute.com/wp-content/uploads/2026/08/home-hero-mb-q96.webp);
    /* Bản Figma xuất ra của SECTION rộng 403 cho khung 402 (một lớp con đặt ở
       x=−1), và sau khi cắt vẫn còn lệch nửa điểm ảnh. Dò tương quan trên dải
       nền: sai số 1203 → 525 khi dịch ảnh site sang phải 1 điểm ảnh thiết bị
       = 0,5px CSS. Không phải nén ảnh — đã thử WebP không mất dữ liệu, số đo
       không nhúc nhích.
       ⛔ ĐÃ THỬ BÙ và KHÔNG DÙNG: đặt 'background-position' lệch nửa điểm ảnh
       làm trình duyệt LẤY MẪU LẠI toàn bộ ảnh (vị trí không còn trùng lưới
       điểm ảnh), đẩy nhiễu từ 9,74 % lên 16,78 %. Lệch nửa điểm ảnh rẻ hơn
       nhiều so với một lượt nội suy. Để nguyên. */
    border-bottom-width: 0.7px;
  }
  .t4 .section.t4h-hero .section-content { padding-top: 204px; }
  .t4 .section.t4h-hero .section-content > .row.row-collapse { max-width: 352px; }
  .t4 .t4h-h1 :is(h1, h2) { font-size: 32px; line-height: 40px; }
  /* Hộp chữ Figma rộng 343 chứ không 352 như khung hàng — để 352 thì đoạn
     ngắt dòng khác Figma và dòng dài nhất dôi ra 8px. */
  .t4 .t4h-hero-mo p { font-size: 14px; line-height: 32px; max-width: 343px; margin: 0 auto; }
  .t4 .section-content .text.t4h-tieude { margin-top: 10px; }
  .t4 .section-content .text.t4h-hero-mo  { margin-top: 24px; }
  .t4 .section-content .text.t4h-hero-nut { margin-top: 132px; }
  .t4 .t4h-hero-nut { gap: 16px; }
  .t4 .t4h-nut { height: 44px; font-size: 14px; }
  .t4 .t4h-nut--cam   { width: 129px; }
  .t4 .t4h-nut--trang { width: 115px; }
}

/* 21.2 TRIẾT LÝ — Figma 1211:7806 (1900×849) · 1015:16752 (402×730) ---------
   ⚠ HAI KHỔ DÙNG HAI BÀI VIẾT KHÁC HẲN NHAU (CLAUDE.md đã báo trước):
     desktop 4 đoạn, 3 cụm in đậm, khe đoạn 16px, chữ 20/32 ls 0,2
     mobile  3 đoạn, KHÔNG in đậm, khe đoạn 0, chữ 16/26 ls 0
   Cụm in đậm sinh thẳng từ 'styleOverrideTable' bằng tools/chu-tu-figma.py —
   chép tay 900 ký tự rồi tự đoán chỗ đậm là sai mà không ai soi ra.

   Nền: #FCFBF6 + dải chuyển #EFE8DA → trong suốt (mô-típ "fade-down" của
   CLAUDE.md), kẻ ngang đáy 2,79px #FCFCFA.
   Mốc dọc: chip 108 · H2 225 (116) · đoạn 389 (400)   [desktop]
            chip 68  · H2 153 (77)  · đoạn 254 (416)   [mobile]  */
.t4 .section.t4h-trietly {
  min-height: 849px; padding: 0;
  background: linear-gradient(180deg, #efe8da 0%, rgba(239, 232, 218, .4) 49.45%,
                              rgba(239, 232, 218, 0) 100%), var(--t4-light);
  border-bottom: 2.79px solid #fcfcfa;
}
/* ⚠ Hai hàng có bề rộng KHÁC NHAU trong Figma: hàng chip 1060 tại x=420,
   hàng chữ 1040 tại x=430. Để mặc định 1080 thì đoạn văn ngắt dòng khác và
   hộp chữ hụt 16px so với Figma. */
.t4 .section.t4h-trietly .section-content { padding-top: 42.1px; }
.t4 .section.t4h-trietly .section-content > .row.row-collapse:nth-of-type(1) { max-width: 1060px; }
.t4 .section.t4h-trietly .section-content > .row.row-collapse:nth-of-type(2) { max-width: 1040px; }
/* Figma khai lh 60 nhưng hộp hai dòng chỉ cao 116 (= 2×58) và chữ căn GIỮA
   hộp. Giữ đúng 60 rồi ghim hộp 116 + căn giữa: vẽ ra y hệt cách hạ xuống 58
   mà 'line-height' đo được vẫn đúng số Figma khai. */
/* ⛔⛔ HAI DÒNG NÀY LÀ HAI KIỂU CHỮ KHÁC NHAU — không phải một.
   Figma gói cả hai vào MỘT lớp chữ rồi ghi đè kiểu theo ĐOẠN CON
   ('styleOverrideTable'), thứ mà bảng dày hoàn toàn mù vì nó chỉ đọc 'style'
   của LỚP:

     node 1211:7816 (desktop)   ·  1015:16762 (mobile)
       "Triết lý"        PlayfairDisplay-Italic   w400  38px (mb 24)
       "Tiếp thị Tử tế"  PlayfairDisplay-SemiBold w600  50px (mb 32)
       cao dòng chung 60 (mb 40)

   Bản cũ khai cả khối 'w500 50px' nên desktop mất hẳn dòng nghiêng, còn
   mobile thì 50px với cao dòng 40 làm **hai dòng chồng lên nhau**. Đây chính
   là chỗ 4T nhìn ra "chưa giống 100%" trong khi bảng báo 2358 ✅ / 0 ❌. */
/* ⛔ 'display: block', KHÔNG phải flex-column — HỒI QUY ĐÃ TRẢ GIÁ 17/08/2026.
   Bản trước để 'flex-direction: column' (từ thời h2 chỉ có chữ thuần). Khi
   thêm '<em>' cho dòng nghiêng thì '<em>' thành MỘT FLEX ITEM còn '<br>' +
   chữ còn lại thành item khác; 'justify-content: center' trên hộp cao 116 đẩy
   hai item ra xa nhau — đo được '<em>' ở **y = −21,5** so với mép h2, tức bay
   HẲN LÊN TRÊN hộp. Trên điện thoại nhìn thành hai tiêu đề rời nhau.
   ⚠ Ảnh nhiệt mobile KHÔNG bắt được vì tôi chỉ soi lại bản desktop sau khi
   vá — đúng lý do I.10 bắt rà CẢ HAI khổ. 4T chụp iPhone thật mới thấy. */
.t4 .t4h-tl-h2 h2 {
  font-family: var(--t4-font-head); font-weight: 600; font-size: 50px;
  line-height: 60px; height: 116px;
  display: block; text-align: center;
  color: var(--t4-dark-moss); margin: 0; letter-spacing: 0;
}
/* '<em>' nằm trong whitelist III.2 nên dùng được thẳng trong ô văn bản.
   'display: block' để nó chiếm trọn dòng 1 — thay cho '<br>' đã bỏ. */
.t4 .t4h-tl-h2 h2 em { display: block; font-style: italic; font-weight: 400;
                       font-size: 38px; }
/* Kiểu chữ khai trên .text (xem ghi chú ở 21.4 mục t4h-dv-para): Figma gộp
   cả bốn đoạn vào MỘT lớp chữ nên bộ ghép đo chính .text. */
.t4 .t4h-tl-chu {
  font-family: var(--t4-font-body); font-weight: 400; font-size: 20px;
  line-height: 32px; letter-spacing: 0.2px; color: var(--t4-text);
}
.t4 .t4h-tl-chu p { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; }
.t4 .t4h-tl-chu p + p { margin-top: 16px; }   /* paragraphSpacing của Figma */
.t4 .t4h-tl-chu strong { font-weight: 700; }
.t4 .section-content .text.t4h-tl-h2 { margin-top: 64px; }
.t4 .section-content .text.t4h-tl-chu { margin-top: 48px; }

@media (max-width: 849px) {
  .t4 .section.t4h-trietly { min-height: 730px; border-bottom-width: 2.4px; }
  .t4 .section.t4h-trietly .section-content { padding-top: 2.1px; }
  .t4 .section.t4h-trietly .section-content > .row.row-collapse:nth-of-type(1),
  .t4 .section.t4h-trietly .section-content > .row.row-collapse:nth-of-type(2) { max-width: 342px; }
  /* Figma mobile 1015:16762: gốc SemiBold 32/40 · đoạn nghiêng 24/40. */
  .t4 .t4h-tl-h2 h2 { font-size: 32px; line-height: 40px; height: 77px; }
  .t4 .t4h-tl-h2 h2 em { font-size: 24px; }
  .t4 .t4h-tl-chu { font-size: 16px; line-height: 26px; letter-spacing: 0; }
  .t4 .t4h-tl-chu p + p { margin-top: 0; }
  .t4 .section-content .text.t4h-tl-h2 { margin-top: 32px; }
  .t4 .section-content .text.t4h-tl-chu { margin-top: 24px; }
}

/* 21.3 GROWTH FRAMEWORK — Figma 1211:7820 (1900×1063,17) · 1015:16766 (402×1279)
   Sơ đồ vòng tròn dựng bằng DOM chứ KHÔNG xuất PNG (CLAUDE.md gợi ý PNG).
   Lý do: bảng số dày ghép theo NỘI DUNG CHỮ — nướng 13 lớp chữ vào ảnh là
   13 lớp "không ghép được" phải đi phân loại tay, mà vòng tròn chỉ là một
   đường viền 1px + 10 chấm tròn, CSS thuần dựng lại được đúng từng số đo.

   ⚠ Chữ "V" của VISION TO HƠN phần còn lại (26px trong nền 16px, mobile
   18/12). Đó là 'characterStyleOverrides: [2]' của Figma, không phải small
   caps của font — nhìn ảnh dễ tưởng là biến thể chữ.

   ⛔ KHÔNG đặt 'box-shadow' cho section dù Figma khai DROP_SHADOW 0/4/4 @25%.
   Bóng đó đổ RA NGOÀI mép dưới khung, nên bản Figma xuất ra của chính section
   này không hề thấy nó; thêm vào site chỉ tạo một vệt tối 4px đè lên section
   Dịch vụ và làm hỏng phép so ảnh của section kế tiếp.

   Mốc dọc Figma (đệm section 60 trên/dưới, khe 48 · mobile khe 32):
     desktop  chip 68 (29) · H2 169 (53) · phụ 222 (35) · mô tả 281 (105)
              sơ đồ 434 (569,17)
     mobile   chip 68 (29) · H2 153 (72) · phụ 233 (44) · mô tả 301 (156)
              sơ đồ 489 (730)
   -------------------------------------------------------------------------- */
.t4 .section.t4h-fw {
  min-height: 1063.17px; padding: 0; align-items: flex-start;
  background: linear-gradient(180deg, rgba(239, 232, 218, 0) 0%, #efe8da 50.9%,
                              rgba(239, 232, 218, 0) 100%), var(--t4-light);
}
.t4 .section.t4h-fw .section-content { padding: 60px 0; }
.t4 .section.t4h-fw .section-content > .row.row-collapse { max-width: 1080px; }
.t4 .section.t4h-fw .section-content > .row.t4h-fw-r1 { max-width: 1060px; }
/* .text.t4fx-nhan (mục 11.13) đã cho margin-top 8 + cao 29 → khối chip kết
   thúc ở y=97. Khe tới H2 vì vậy là 169 − 97 = 72, KHÔNG phải 48 của Figma. */
.t4 .section.t4h-fw .text.t4h-fw-nhan { margin-bottom: 0; }
.t4 .section.t4h-fw .section-content > .row.t4h-fw-r2 { margin-top: 72px; }
.t4 .section.t4h-fw .section-content > .row.t4h-fw-r3 { margin-top: 48px; }

/* [figma] '1211:7831' — Một mô hình tăng trưởng được xây dựng tr · 1000×105 · trang1·framework
   (lớp DUY NHẤT rộng 1000px trong figma-spec/trang1.json) */
.t4 .t4h-fw-h2 h2 {
  font-family: var(--t4-font-head); font-weight: 600; font-size: 40px;
  line-height: 53px;   /* hộp Figma 53 ÷ 1 dòng — không phải 53,32 như khai */
  color: var(--t4-dark-moss); margin: 0; letter-spacing: 0;
}
/* ⛔ Chữ "4" dùng font KHÁC (Poltawski Nowy) nên thước chữ của nó nhô cao hơn
   Playfair ⇒ hộp dòng nở từ 53 lên 56 và cả section cao thêm 3px, dù
   'line-height: 53px' đã khai đúng. 'display:inline-block; line-height:1'
   tách nó khỏi phép tính hộp dòng mà vẫn giữ đúng đường cơ sở. */
.t4 .t4h-fw-h2 .accent { font-family: var(--t4-font-logo); font-weight: 600;
                  display: inline-block; line-height: 1; vertical-align: baseline; }
/* màu camel nay lấy từ mô-típ chung '.hl-camel' của 30-components */
.t4 .t4h-fw-br  { display: none; }
.t4 .t4h-fw-sub p {
  font-family: var(--t4-font-body); font-weight: 800; font-size: 20px;
  line-height: 35px; letter-spacing: -0.2px; color: var(--t4-gray); margin: 0;
}
.t4 .t4h-fw-mo p {
  font-family: var(--t4-font-body); font-weight: 400; font-size: 20px;
  line-height: 35px; letter-spacing: 0; color: var(--t4-ink);
  margin: 0 auto; max-width: 1000px;
}
.t4 .section-content .text.t4h-fw-sub { margin-top: 0; }
.t4 .section-content .text.t4h-fw-mo  { margin-top: 24px; }

/* --- sơ đồ vòng tròn ------------------------------------------------------ */
/* [phục vụ] sơ đồ vòng tròn Growth Framework | [trang] trang chủ
   [figma] 1211:7820 · 1015:16766 | [lý do vượt panel] panel không đặt được
   toạ độ tuyệt đối cho 10 nhãn quanh một vòng tròn

   ⛔ VÒNG TRÒN VÀ 10 CHẤM NAY LÀ ẢNH NỀN, KHÔNG CÒN 11 <span> GÕ TAY.
   Chúng là TRANG TRÍ thuần — không chữ, không nội dung — nên đưa vào nền là
   đúng chỗ, giống hệt cách ghim bản đồ và icon Google Partner đã làm ở §7.

   ⛔ Và KHÔNG nướng cả sơ đồ thành một tấm ảnh như bản kê từng đề xuất: 10
   nhãn (VISION · STRATEGY · MONTHLY REVIEW…) là CHỮ THẬT mà bảng dày đang
   ghép đúng cả 10. Nướng vào ảnh là 10 lớp Figma thành THIẾU THẬT, mà T1 đòi
   THIẾU THẬT = 0 — hỏng nặng hơn thứ đang sửa. Nền lo phần vẽ, [ux_text] lo
   phần chữ.

   Ảnh nền sinh từ CHÍNH các toạ độ CSS cũ (tools sinh ở /tmp/fwsvg.py), nên
   không có con số nào phải gõ lại bằng tay. */
.t4 .section.t4h-fw .row.t4h-fw-do {
  display: flex; flex-wrap: nowrap; align-items: center;
  width: 1046px; max-width: none; margin: 0 auto; text-align: left;
}
.t4 .section.t4h-fw .row.t4h-fw-do::after { content: none; display: none; }
.t4 .section.t4h-fw .col.t4h-fw-vong {
  position: relative; width: 687.97px; height: 569.17px;
  flex: 0 0 auto; max-width: none; padding: 0;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2ODcuOTciIGhlaWdodD0iNTY5LjE3IiB2aWV3Qm94PSIwIDAgNjg3Ljk3IDU2OS4xNyIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMzQ5Ljg4IiBjeT0iMjg1LjAwIiByPSIyNDIuNTkiIHN0cm9rZT0iIzFGMUYxRiIgc3Ryb2tlLXdpZHRoPSIxIi8+PGNpcmNsZSBjeD0iMzQ3Ljc4IiBjeT0iNDEuNTAiIHI9IjYuMjkiIGZpbGw9IiMxNTU0NDYiLz48Y2lyY2xlIGN4PSI0OTMuOTciIGN5PSI5MC4zMCIgcj0iOC43OSIgZmlsbD0iIzFGMUYxRiIvPjxjaXJjbGUgY3g9IjQ5NC44NSIgY3k9IjQ4MC4yMiIgcj0iOC43OSIgZmlsbD0iIzFGMUYxRiIvPjxjaXJjbGUgY3g9IjU3OS44NiIgY3k9IjM2My4wOSIgcj0iNy45NiIgZmlsbD0iIzFGMUYxRiIvPjxjaXJjbGUgY3g9IjEyMS4yMCIgY3k9IjM2NS43MiIgcj0iNy45NiIgZmlsbD0iIzFGMUYxRiIvPjxjaXJjbGUgY3g9IjEyMC4yMCIgY3k9IjIwNy42MyIgcj0iNy45NiIgZmlsbD0iIzFGMUYxRiIvPjxjaXJjbGUgY3g9IjU4MC44NiIgY3k9IjIxMC4yNyIgcj0iNy45NiIgZmlsbD0iIzFGMUYxRiIvPjxjaXJjbGUgY3g9IjIwNS43OCIgY3k9IjkwLjMwIiByPSI4Ljc5IiBmaWxsPSIjMUYxRjFGIi8+PGNpcmNsZSBjeD0iMjA0LjkxIiBjeT0iNDgwLjIyIiByPSI4Ljc5IiBmaWxsPSIjMUYxRjFGIi8+PGNpcmNsZSBjeD0iMzQ3Ljc4IiBjeT0iNTI3LjY3IiByPSI2LjI5IiBmaWxsPSIjMUYxRjFGIi8+PC9zdmc+") 0 0 / 687.97px 569.17px no-repeat;
}
/* ⚠ CHỮ ĐẶT THẲNG TRONG DIV, KHÔNG bọc thêm <span>. Bộ ghép của bảng dày
   chọn phần tử SÂU NHẤT chứa đủ chuỗi; có <span> bên trong là nó đo <span>
   (cao 20) chứ không đo hộp nhãn (cao 29,34 của Figma) ⇒ mọi khoảng cách dọc
   lệch giả đúng nửa phần dôi. Căn ngang vì vậy đi bằng 'justify-content'. */
.t4 .section.t4h-fw .text.t4h-fw-lb {
  position: absolute; display: flex; align-items: center; margin: 0;
  font-family: var(--t4-font-head); font-weight: 700; font-size: 16px;
  line-height: 20px; white-space: nowrap;
  color: var(--t4-text); text-transform: uppercase; letter-spacing: 0;
}
/* ⚠ Phải đủ độ cụ thể như luật nền ngay trên ('.t4 .section.t4h-fw
   .text.t4h-fw-lb', 0-4-0). Viết '.t4 .t4h-fw-lb.fw-l1' (0-3-0) là thua
   ngược và VISION mất màu xanh — đo ra #1f1f1f. */
.t4 .section.t4h-fw .text.t4h-fw-lb.fw-l1 { color: var(--t4-dark-moss); }
/* Chữ nằm thẳng trong <p> của ô văn bản; <p> phải trong suốt hoàn toàn để bộ
   ghép vẫn đo đúng hộp nhãn (xem ghi chú ngay trên). */
/* ⛔ <p> PHẢI LẤP ĐẦY HỘP NHÃN, không được co về bề rộng/chiều cao chữ.
   Chú thích ngay trên đã cảnh báo: bộ ghép chọn phần tử SÂU NHẤT chứa chuỗi.
   Khi chữ nằm thẳng trong div thì nó đo hộp nhãn (29,34 của Figma); bọc chữ
   vào <p> là nó quay sang đo <p> (cao 20) và MỌI khoảng cách dọc lệch đúng
   nửa phần dôi — đo ra ±4,65px ở năm cặp nhãn. Cho <p> nhận trọn hộp thì hai
   thứ trùng nhau trở lại, mà ô văn bản vẫn chỉ chứa chữ thuần. */
.t4 .t4h-fw-lb p { font: inherit; color: inherit; letter-spacing: inherit;
                   text-transform: inherit; margin: 0; white-space: nowrap;
                   width: 100%; height: 100%; display: flex; align-items: center;
                   justify-content: inherit; }
.t4 .t4h-fw-lb .accent { font-size: 26px; }


/* chấm — left · top · đường kính */

/* [figma] 'I1421:13583;1418:12603' — VISION · 71.25×29.34 · trang1·framework
   (lớp DUY NHẤT rộng 71.25px trong figma-spec/trang1.json) */
/* nhãn — left · top · rộng · cao · căn ngang (đúng textAlignHorizontal Figma) */
.t4 .t4h-fw-lb.fw-l1  { left: 313.83px; top:   0.00px; width:  71.25px; height: 29.34px; justify-content: center; text-align: center; }
.t4 .t4h-fw-lb.fw-l2  { left: 494.05px; top:  52.30px; width: 104.78px; height: 29.34px; justify-content: flex-start; text-align: left; }
.t4 .t4h-fw-lb.fw-l3  { left: 494.89px; top: 489.09px; width:  81.00px; height: 40.00px; justify-content: flex-start; text-align: left; }
.t4 .t4h-fw-lb.fw-l4  { left: 592.97px; top: 354.39px; width:  95.00px; height: 20.00px; justify-content: flex-start; text-align: left; }
.t4 .t4h-fw-lb.fw-l5  { left:  21.50px; top: 359.39px; width:  84.00px; height: 40.00px; justify-content: center; text-align: center; }
.t4 .t4h-fw-lb.fw-l6  { left:   0.00px; top: 192.80px; width: 103.94px; height: 29.34px; justify-content: flex-end; text-align: right; }
.t4 .t4h-fw-lb.fw-l7  { left: 596.83px; top: 196.80px; width:  83.00px; height: 20.00px; justify-content: flex-start; text-align: left; }
.t4 .t4h-fw-lb.fw-l8  { left: 110.66px; top:  56.30px; width:  95.00px; height: 20.00px; justify-content: flex-end; text-align: right; }
.t4 .t4h-fw-lb.fw-l9  { left: 141.06px; top: 489.09px; width:  64.00px; height: 40.00px; justify-content: flex-end; text-align: right; }
.t4 .t4h-fw-lb.fw-l10 { left: 297.07px; top: 539.83px; width: 103.94px; height: 29.34px; justify-content: center; text-align: center; }

/* [figma] 'I1421:13583;1418:12598' — Mô hình · 244.77×35 · trang1·framework
   (lớp DUY NHẤT rộng 244.77px trong figma-spec/trang1.json) */
/* chữ giữa vòng — ba lớp rời, mỗi lớp một hộp riêng của Figma */
/* 'white-space: nowrap' là BẮT BUỘC: hộp Figma ôm sát chữ (62px cho "CỦA 4T"),
   mà Chrome dựng chuỗi rộng hơn Figma vài phần trăm ⇒ chữ rớt xuống dòng hai
   và TRÀN RA NGOÀI hộp cao cố định mà không làm hộp cao thêm — nên không bảng
   số nào kêu, chỉ nhìn ảnh mới thấy. */
/* ⚠ 'display:flex; align-items:center' chứ KHÔNG hạ line-height xuống bằng
   chiều cao hộp. Figma khai lh=35 cho cả ba lớp trong khi hộp là 35/35/42
   (mobile 20/20/26) và căn dọc GIỮA — hạ line-height cho khớp hộp thì vẽ ra
   y hệt nhưng 'line-height' đo được KHÁC số Figma khai, bảng dày kêu 3 chỗ.
   Giữ đúng 35 rồi để flex căn giữa hộp: vừa vẽ đúng, vừa đo đúng. */
.t4 .t4h-fw-tam p { margin: 0; text-align: center; color: var(--t4-dark-moss);
                    position: absolute; white-space: nowrap; line-height: 35px;
                    display: flex; align-items: center; justify-content: center; }
.t4 .t4h-fw-tam p:nth-of-type(1) {
  left: 226.65px; top: 235.55px; width: 244.77px; height: 35px;
  font-family: var(--t4-font-body); font-weight: 400; font-size: 18px;
}
.t4 .t4h-fw-tam p:nth-of-type(2) {
  left: 203.04px; top: 270.55px; width: 292px; height: 35px;
  font-family: var(--t4-font-head); font-weight: 700; font-size: 32px;
  text-transform: uppercase;
}
.t4 .t4h-fw-tam p:nth-of-type(3) {
  left: 318.04px; top: 305.55px; width: 62px; height: 42px;
  font-family: var(--t4-font-head); font-weight: 700; font-size: 18px;
  text-transform: uppercase;
}

/* [figma] trang1 · section framework — 2 lớp rộng 320px: 'I1421:13583;1421:12739' · 'I1421:13583;1421:12698'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 1 để chọn) */
.t4 .section.t4h-fw .col.t4h-fw-lorem { width: 320px; max-width: none;
  margin-left: 38.03px; flex: 0 0 auto; padding: 0; }
.t4 .t4h-fw-lorem p {
  font-family: var(--t4-font-body); font-weight: 400; font-size: 16px;
  line-height: 26px; letter-spacing: 0; color: var(--t4-text);
  margin: 0; text-align: justify;
}

/* Khổ không có trong Figma: thu nhỏ cả sơ đồ bằng 'zoom' (KHÔNG phải
   'transform: scale') — transform không đổi hộp bố cục nên trang vẫn tràn
   ngang đúng bằng bề rộng gốc. */
@media (min-width: 850px) and (max-width: 1023px) { .t4 .t4h-fw-do { zoom: .68; } }
@media (min-width: 1024px) and (max-width: 1199px) { .t4 .t4h-fw-do { zoom: .88; } }

@media (max-width: 849px) {
  .t4 .section.t4h-fw { min-height: 1279px; }
  .t4 .section.t4h-fw .section-content > .row.row-collapse,
  .t4 .section.t4h-fw .section-content > .row.t4h-fw-r1 { max-width: 342px; }
  .t4 .section.t4h-fw .section-content > .row.t4h-fw-r2 { margin-top: 56px; }
  .t4 .section.t4h-fw .section-content > .row.t4h-fw-r3 { margin-top: 32px; }

  .t4 .t4h-fw-br { display: inline; }
  .t4 .t4h-fw-h2 h2 { font-size: 32px; line-height: 36px; }
  .t4 .t4h-fw-sub p { font-weight: 700; font-size: 16px; line-height: 22px; letter-spacing: 0; }
  .t4 .t4h-fw-mo p  { font-size: 16px; line-height: 26px; max-width: 342px; }
  /* Figma mobile CÓ khe 8px giữa H2 và dòng phụ (Frame 68 gap=8); desktop thì
     không. Thiếu 8px này là cả khối sơ đồ leo lên 8px mà mọi mốc bên trong
     vẫn khớp 0 — bảng số chỉ kêu ở một chỗ, dễ tưởng lỗi của sơ đồ. */
  .t4 .section-content .text.t4h-fw-sub { margin-top: 8px; }

  /* Sơ đồ mobile là một khối RỘNG HẾT KHỔ 402 (Figma cho nội dung tràn ra
     ngoài lề 30 của section: mép trái x=12, mép phải x=383). */
  .t4 .section.t4h-fw .row.t4h-fw-do { display: block; width: 402px; margin-left: calc(50% - 201px); }
  .t4 .section.t4h-fw .col.t4h-fw-vong { width: 402px; height: 334px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDIiIGhlaWdodD0iMzM0IiB2aWV3Qm94PSIwIDAgNDAyIDMzNCIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTk4Ljc1IiBjeT0iMTY4LjM1IiByPSIxMjUuMDUiIHN0cm9rZT0iIzFGMUYxRiIgc3Ryb2tlLXdpZHRoPSIxIi8+PGNpcmNsZSBjeD0iMTk3LjY1IiBjeT0iNDIuNTUiIHI9IjMuMjUiIGZpbGw9IiMxNTU0NDYiLz48Y2lyY2xlIGN4PSIyNzMuMTUiIGN5PSI2Ny43NSIgcj0iNC41NSIgZmlsbD0iIzFGMUYxRiIvPjxjaXJjbGUgY3g9IjI3My42NSIgY3k9IjI2OS4xNSIgcj0iNC41NSIgZmlsbD0iIzFGMUYxRiIvPjxjaXJjbGUgY3g9IjMxNy41MCIgY3k9IjIwOC42MCIgcj0iNC4xMCIgZmlsbD0iIzFGMUYxRiIvPjxjaXJjbGUgY3g9IjgwLjYwIiBjeT0iMjEwLjAwIiByPSI0LjEwIiBmaWxsPSIjMUYxRjFGIi8+PGNpcmNsZSBjeD0iODAuMTAiIGN5PSIxMjguMzAiIHI9IjQuMTAiIGZpbGw9IiMxRjFGMUYiLz48Y2lyY2xlIGN4PSIzMTguMDAiIGN5PSIxMjkuNzAiIHI9IjQuMTAiIGZpbGw9IiMxRjFGMUYiLz48Y2lyY2xlIGN4PSIxMjQuMzUiIGN5PSI2Ny43NSIgcj0iNC41NSIgZmlsbD0iIzFGMUYxRiIvPjxjaXJjbGUgY3g9IjEyMy44NSIgY3k9IjI2OS4xNSIgcj0iNC41NSIgZmlsbD0iIzFGMUYxRiIvPjxjaXJjbGUgY3g9IjE5Ny42NSIgY3k9IjI5My42NSIgcj0iMy4yNSIgZmlsbD0iIzFGMUYxRiIvPjwvc3ZnPg==");
    background-size: 402px 334px; }

  /* ⚠ Luật nền nay là (0,4,0) nên bản mobile cũng phải đủ cụ thể, nếu
     không nhãn giữ nguyên 16/20 của desktop — đo ra 40 mốc lệch. */
  .t4 .section.t4h-fw .text.t4h-fw-lb { font-size: 10px; line-height: 14px; }
  .t4 .section.t4h-fw .text.t4h-fw-lb.fw-l1 { font-size: 12px; }
  .t4 .t4h-fw-lb .accent { font-size: 18px; }

/* [figma] 'I1425:14183;1421:13675' — VISION · 47×14 · trang1·framework_mb
   (lớp DUY NHẤT rộng 47px trong figma-spec/trang1.json) */
  .t4 .t4h-fw-lb.fw-l1  { left: 174.3px; top:  21.0px; width: 47px; height: 14px; }
  .t4 .t4h-fw-lb.fw-l2  { left: 273.2px; top:  48.0px; width: 52px; height: 14px; }
  .t4 .t4h-fw-lb.fw-l3  { left: 273.7px; top: 275.1px; width: 51px; height: 28px; }
  .t4 .t4h-fw-lb.fw-l4  { left: 324.3px; top: 201.4px; width: 59px; height: 14px; }
  .t4 .t4h-fw-lb.fw-l5  { left:  12.0px; top: 202.1px; width: 52px; height: 28px; }
  .t4 .t4h-fw-lb.fw-l6  { left:  18.3px; top: 120.6px; width: 52px; height: 14px; }
  .t4 .t4h-fw-lb.fw-l7  { left: 326.3px; top: 120.0px; width: 52px; height: 14px; }
  .t4 .t4h-fw-lb.fw-l8  { left:  64.1px; top:  47.4px; width: 59px; height: 14px; }
  .t4 .t4h-fw-lb.fw-l9  { left:  83.2px; top: 275.1px; width: 40px; height: 28px; }
  .t4 .t4h-fw-lb.fw-l10 { left: 171.6px; top: 299.8px; width: 52px; height: 14px; }

/* [figma] 'I1425:14183;1421:13669' — Mô hình · 126.24×20 · trang1·framework_mb
   (lớp DUY NHẤT rộng 126.2px trong figma-spec/trang1.json) */
  .t4 .t4h-fw-tam p:nth-of-type(1) { left: 135.5px; top: 139.4px; width: 126.2px; height: 20px; font-size: 14px; }
  .t4 .t4h-fw-tam p:nth-of-type(2) { left: 107.1px; top: 159.4px; width: 183px;   height: 20px; font-size: 16px; }
  .t4 .t4h-fw-tam p:nth-of-type(3) { left: 167.6px; top: 179.4px; width: 62px;    height: 26px; font-size: 14px; }

/* [figma] trang1 · section framework_mb — 2 lớp rộng 322px: 'I1425:14183;1421:13703' · 'I1425:14183;1421:13704'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 1 để chọn) */
  /* Figma mobile CHỈ có đoạn đầu của khối Lorem — đoạn hai chỉ có ở desktop. */
  /* ⚠ 'margin: auto' KHÔNG căn giữa được ở đây: row cha đã bị kéo lệch
     'margin-left: calc(50% - 201px)' để tràn hết khổ 402 (50% tính trên
     khung 342 đã trừ đệm 30 của .section), nên "giữa" của nó không phải
     giữa màn. Đặt lề trái tường minh: 40 + 322/2 = 201 = đúng tâm khổ. */
  .t4 .section.t4h-fw .col.t4h-fw-lorem { width: 322px; margin: 32px 0 0 40px; }
  .t4 .t4h-fw-lorem p { text-align: center; }
  .t4 .t4h-fw-lorem2 { display: none; }
}
@media (max-width: 401px) { .t4 .t4h-fw-do { zoom: .88; } }

/* 21.4 DỊCH VỤ — Figma 279:7364 (1900×1495) · 1015:18066 (402×933) ----------
   Section nặng nhất trang: 128 lớp desktop / 126 mobile, 5 thẻ dịch vụ.

   ⛔ HAI KHỔ DÙNG HAI BỐ CỤC KHÁC HẲN:
     desktop  lưới 2 thẻ (533) trên + 3 thẻ (350,67) dưới, khe 14
     mobile   MỘT HÀNG CUỘN NGANG, 5 thẻ rộng 330, khe 13, thẻ đầu ở x=30
   Ảnh Figma của khổ mobile vì thế rộng 1743 cho khung 402 — 'so-anh.py' cắt
   về đúng khung nên chỉ so thẻ đầu; bốn thẻ sau kiểm bằng bảng số.

   ⚠ Biểu tượng dùng PHÔNG Material Symbols (ad · chat_bubble · web ·
   strategy · school) chứ không nhúng SVG: KSES của WordPress cắt sạch thẻ
   <svg> khi ghi bài bằng WP-CLI (không có người dùng đăng nhập).

   Mốc dọc Figma (đệm 100/150 desktop · 60/60 mobile, khe section 64 / 32):
     desktop  chip 108 · kicker 177 (35) · H2 216 (53) · sub 277 (35)
              đoạn 376 (60) · hàng 1 482 (375) · hàng 2 871 (474)
     mobile   chip 68 · kicker 137 (22) · H2 163 (88) · sub 259 (22)
              đoạn 313 (104) · băng thẻ 463 (410)
   -------------------------------------------------------------------------- */
.t4 .section.t4h-dv {
  min-height: 1495px; padding: 0; align-items: flex-start;
  background: linear-gradient(180deg, rgba(239, 232, 218, 0) 0%, #efe8da 54.33%,
                              rgba(239, 232, 218, 0) 100%), var(--t4-light);
}
.t4 .section.t4h-dv .section-content { padding: 100px 0 150px; }
.t4 .section.t4h-dv .section-content > .row.row-collapse { max-width: 1080px; }
.t4 .section.t4h-dv .section-content > .row.t4h-dv-r1,
.t4 .section.t4h-dv .section-content > .row.t4h-dv-r2 { max-width: 1060px; }
.t4 .section.t4h-dv .text.t4h-dv-nhan { margin-bottom: 0; }
.t4 .section.t4h-dv .section-content > .row.t4h-dv-r2 { margin-top: 40px; }
.t4 .section.t4h-dv .section-content > .row.t4h-dv-r3 { margin-top: 64px; }
.t4 .section.t4h-dv .section-content > .row.t4h-dv-r4 { margin-top: 46px; }

.t4 .t4h-dv-kicker p {
  font-family: var(--t4-font-body); font-weight: 800; font-size: 20px;
  line-height: 35px; letter-spacing: -0.2px; color: var(--t4-gray); margin: 0;
}
/* Khối tiêu đề: Figma đặt TAY ba lớp (chữ trái · dấu & · chữ phải) chứ không
   dùng auto-layout, và dấu & nằm LỆCH trong khe 48px. Đặt tuyệt đối theo đúng
   toạ độ Figma là cách duy nhất khớp cả ba. */
/* Ba mảnh tiêu đề đặt TUYỆT ĐỐI theo toạ độ Figma. Bản kê ghi "đã thử tách,
   hỏng hai lần" — lần này được vì đặt 'position:absolute' lên chính CỘT chứ
   không lên phần tử chữ bên trong, và tắt '.row::after' (bẫy II.H-4). */
.t4 .section.t4h-dv .row.t4h-dv-h2box {
  position: relative; width: 1060px; max-width: none; height: 53px;
  margin: 4px auto 0; display: block;
}
.t4 .section.t4h-dv .row.t4h-dv-h2box::before { content: none; }
.t4 .section.t4h-dv .row.t4h-dv-h2box > .col {
  position: absolute; padding: 0; margin: 0; max-width: none;
}
.t4 .t4h-dv-h2box h2 {
  margin: 0; display: flex; align-items: center; height: 100%;
  font-family: var(--t4-font-head); font-weight: 600; font-size: 40px;
  line-height: 53px;   /* hộp Figma 53 ÷ 1 dòng */
  color: var(--t4-dark-moss); letter-spacing: 0; white-space: nowrap;
}
.t4 .section.t4h-dv .col.t4h-dv-h2a { left: 186px; top: 0; width: 283px; height: 53px; }
.t4 .section.t4h-dv .col.t4h-dv-h2b { left: 517px; top: 0; width: 357px; height: 53px; }
/* ⛔ Dấu & KHÔNG dùng được glyph của phông. Figma vẽ nó bằng VECTOR mực
   21×27, còn "&" của Playfair 40px là dạng hoa mỹ rộng 35 — khác hẳn hình,
   nhìn ảnh nhiệt là một vệt đỏ đặc. Nhúng thẳng đường vector Figma xuất ra,
   dưới dạng ảnh nền data-URI: đặt trong CSS nên KSES của WordPress không
   đụng tới (nhúng <svg> vào post_content thì bị cắt sạch).
   Ảnh giữ nguyên tỉ lệ, khổ mobile chỉ cần đổi width/height.
   ⚠ DÙNG NGUYÊN BẢN FIGMA XUẤT RA, đừng "thêm màu cho chắc": bản xuất đã có
     fill="#CF9156" sẵn, chèn thêm một fill nữa là XML trùng thuộc tính ⇒ ảnh
     hỏng và ô & TRỐNG TRƠN — mà CSS vẫn hợp lệ nên không có gì báo. Cũng vì
     vậy phải mã hoá base64 chứ không phải utf8 thô. */
/* Dấu & nay là ::after của chính hàng — Figma vẽ nó bằng VECTOR chứ không
   phải lớp chữ, nên nó là TRANG TRÍ và không đáng tốn một phần tử. */
.t4 .section.t4h-dv .row.t4h-dv-h2box::after {
  content: ""; display: block; position: absolute;
  left: 493px; top: 16px; width: 21px; height: 27px;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAyMSAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC45Mjg0NSAyN0M3LjU0Njg3IDI3IDYuMjQwMTMgMjYuNzg5NiA1LjAwODIyIDI2LjM2ODdDMy43ODc4MyAyNS45MzU5IDIuNzY4OTEgMjUuMjU2NSAxLjk1MTQ4IDI0LjMzMDdDMS4yOTUyMyAyMy41NzMxIDAuODExNjc4IDIyLjc0OTUgMC41MDA4MjIgMjEuODU5N0MwLjIwMTQ4IDIwLjk1NzkgMC4wMzQ1Mzk1IDE5Ljk5NiAwIDE4Ljk3MzlDMCAxNy45NzYgMC4xMzgxNTggMTcuMDA4IDAuNDE0NDc0IDE2LjA3MDFDMC43MDIzMDMgMTUuMTMyMyAxLjEzOTggMTQuMzAyNiAxLjcyNjk3IDEzLjU4MTJDMS45NTcyNCAxMy4yOTI2IDIuMjA0NzcgMTMuMDQwMSAyLjQ2OTU3IDEyLjgyMzZDMi43NDU4OSAxMi41OTUyIDMuMDIyMiAxMi4zOTA4IDMuMjk4NTIgMTIuMjEwNEMyLjYxOTI0IDExLjQxNjggMi4xMDExNSAxMC42NDczIDEuNzQ0MjQgOS45MDE4QzEuMzk4ODUgOS4xNTYzMSAxLjIyNjE1IDguMjc4NTYgMS4yMjYxNSA3LjI2ODU0QzEuMjI2MTUgNS43NTM1MSAxLjYxNzYgNC4zOTQ3OSAyLjQwMDQ5IDMuMTkyMzlDMy4xODMzOSAxLjk4OTk4IDQuMjQ4MzUgMS4xMjQyNSA1LjU5NTM5IDAuNTk1MTkzQzYuMTgyNTcgMC4zNjY3MzUgNi43NzU0OSAwLjIxMDQyMiA3LjM3NDE4IDAuMTI2MjU0QzcuOTg0MzcgMC4wNDIwODUgOC41NzczIDAgOS4xNTI5NiAwQzEwLjIzNTIgMCAxMS4yNzcxIDAuMTc0MzUgMTIuMjc4OCAwLjUyMzA0N0MxMy4yODA0IDAuODU5NzIxIDE0LjEzMjQgMS40MTI4MyAxNC44MzQ3IDIuMTgyMzdDMTUuMjgzNyAyLjYyNzI2IDE1LjY1NzkgMy4xMzIyNyAxNS45NTcyIDMuNjk3NEMxNi4yNTY2IDQuMjUwNSAxNi40ODExIDQuODIxNjQgMTYuNjMwOCA1LjQxMDgyTDEyLjUyMDYgNi4zMzA2NkMxMi4zNTk0IDUuNzg5NTggMTIuMDc3MyA1LjMyNjY1IDExLjY3NDMgNC45NDE4OEMxMS4zMjg5IDQuNTkzMTkgMTAuOTIwMiA0LjM2NDczIDEwLjQ0ODIgNC4yNTY1MUM5Ljk3NjE1IDQuMTM2MjcgOS41MDk4NyA0LjA3NjE1IDkuMDQ5MzQgNC4wNzYxNUM4LjMxMjUgNC4wNzYxNSA3LjY2MjAxIDQuMjE0NDMgNy4wOTc4NiA0LjQ5MDk4QzYuNTMzNzIgNC43Njc1NCA2LjExMzQ5IDUuMTQwMjggNS44MzcxNyA1LjYwOTIyQzUuNTcyMzcgNi4wNzgxNiA1LjQzOTk3IDYuNjQ5MyA1LjQzOTk3IDcuMzIyNjRDNS40Mzk5NyA3LjkyMzg1IDUuNTQzNTggOC40MDQ4MSA1Ljc1MDgyIDguNzY1NTNDNS45Njk1NyA5LjEyNjI1IDYuMjM0MzcgOS40OTI5OSA2LjU0NTIzIDkuODY1NzNDNi43NTI0NyAxMC4xMDYyIDcuMDA1NzYgMTAuMzcwNyA3LjMwNTEgMTAuNjU5M0M3LjYwNDQ0IDEwLjk0NzkgNy45MTUzIDExLjI0ODUgOC4yMzc2NiAxMS41NjExTDE0LjQ4OTMgMTcuNjAzMkMxNC41MDA4IDE3LjM2MjcgMTQuNTA2NiAxNy4xMDQyIDE0LjUwNjYgMTYuODI3N0MxNC41MDY2IDE2LjUzOTEgMTQuNTA2NiAxNi4yNjg1IDE0LjUwNjYgMTYuMDE2VjEyLjg0MTdIMTguMTY3OFYxNy41NDkxQzE4LjE2NzggMTguMTk4NCAxOC4xNTA1IDE4LjgyOTcgMTguMTE2IDE5LjQ0MjlDMTguMDgxNCAyMC4wNDQxIDE4LjAxMjMgMjAuNTQzMSAxNy45MDg3IDIwLjkzOTlMMjEgMjMuODk3OEwxOC4zMjMyIDI2Ljg3MzdMMTUuOTIyNyAyNC40OTNDMTUuMzM1NSAyNS4wNzAxIDE0LjY5MDggMjUuNTM5MSAxMy45ODg1IDI1Ljg5OThDMTMuMjg2MiAyNi4yNjA1IDEyLjU3ODEgMjYuNTE5IDExLjg2NDMgMjYuNjc1NEMxMS4zNDYyIDI2LjgwNzYgMTAuODUxMiAyNi44OTE4IDEwLjM3OTEgMjYuOTI3OUM5LjkwNzA3IDI2Ljk3NiA5LjQyMzUyIDI3IDguOTI4NDUgMjdaTTkuMTAxMTUgMjIuODY5N0M5LjQ1ODA2IDIyLjg2OTcgOS43OTE5NCAyMi44NTE3IDEwLjEwMjggMjIuODE1NkMxMC40MjUyIDIyLjc3OTYgMTAuNzM2IDIyLjcwNzQgMTEuMDM1NCAyMi41OTkyQzExLjQ2MTMgMjIuNDY2OSAxMS44MjQgMjIuMzEwNiAxMi4xMjM0IDIyLjEzMDNDMTIuNDM0MiAyMS45NDk5IDEyLjcwNDggMjEuNzYzNSAxMi45MzUgMjEuNTcxMUw2LjM1NTI2IDE1LjI1ODVDNi4wNDQ0MSAxNS4zNzg4IDUuNzYyMzMgMTUuNTM1MSA1LjUwOTA1IDE1LjcyNzVDNS4yNjcyNyAxNS45MDc4IDUuMDYwMDMgMTYuMTEyMiA0Ljg4NzM0IDE2LjM0MDdDNC42Njg1OSAxNi42NDEzIDQuNDk1ODkgMTYuOTk2IDQuMzY5MjQgMTcuNDA0OEM0LjI1NDExIDE3LjgwMTYgNC4xOTY1NSAxOC4yNDA1IDQuMTk2NTUgMTguNzIxNEM0LjIwODA2IDE5LjI3NDUgNC4yOTQ0MSAxOS43Njc1IDQuNDU1NTkgMjAuMjAwNEM0LjYxNjc4IDIwLjYyMTIgNC44Mjk3NyAyMSA1LjA5NDU3IDIxLjMzNjdDNS41MDkwNSAyMS44ODk4IDYuMTAxOTcgMjIuMjg2NiA2Ljg3MzM1IDIyLjUyNzFDNy42NDQ3NCAyMi43NTU1IDguMzg3MzMgMjIuODY5NyA5LjEwMTE1IDIyLjg2OTdaIiBmaWxsPSIjQ0Y5MTU2Ii8+PC9zdmc+") center / contain no-repeat;
}
/* Hộp Figma cao 35 trong khi cao dòng khai 32,784 ⇒ chữ căn GIỮA hộp. Hạ
   chiều cao xuống 32,784 thì mọi thứ bên dưới leo lên 2,22px. */
/* ⛔ ExtraBold 800 và cao dòng 35 — style LỚP khai Manrope-Bold 24/32,784
   nhưng Figma ghi đè 'Manrope-ExtraBold w800 lh 35' cho cả 23 ký tự
   (node 279:7374). Lấy style lớp là lấy nhầm, chữ ra mảnh hơn thiết kế. */
.t4 .t4h-dv-sub p {
  font-family: var(--t4-font-body); font-weight: 800; font-size: 24px;
  line-height: 35px; color: var(--t4-dark-moss); margin: 0; letter-spacing: 0;
  height: 35px; display: flex; align-items: center; justify-content: center;
}
.t4 .section-content .text.t4h-dv-h2  { margin-top: 4px; }
.t4 .section-content .text.t4h-dv-sub { margin-top: 8px; }

/* Đoạn dẫn: hộp Figma 1080×60 trong khi hai dòng chữ cao 70 ⇒ chữ TRÀN đều
   trên dưới 5px. Căn giữa bằng flex, đừng ép chiều cao dòng xuống 30. */
/* ⚠ Khai kiểu chữ ngay trên .text chứ không chỉ trên <p> bên trong. Figma gộp
   CẢ HAI đoạn vào MỘT lớp chữ, nên bộ ghép của bảng dày chọn phần tử chứa đủ
   chuỗi — tức chính .text — rồi đọc font-size/line-height/màu của nó. Khai
   riêng cho <p> thì .text vẫn mang giá trị mặc định của body (16/26/#1f1f1f)
   và bảng báo lệch ba thuộc tính trong khi trang vẽ đúng. */
.t4 .t4h-dv-para {
  height: 60px; display: flex; flex-direction: column; justify-content: center;
  font-family: var(--t4-font-body); font-weight: 400; font-size: 20px;
  line-height: 35px; letter-spacing: 0; color: var(--t4-ink);
}
.t4 .t4h-dv-para p { font: inherit; color: inherit; margin: 0; }
.t4 .t4h-dv-cam  { font-weight: 600; color: var(--t4-camel-dark); }
.t4 .t4h-dv-moss { font-weight: 600; color: var(--t4-dark-moss); }

/* [figma] '279:7383' — Frame 120 · 1080×375 · trang1·dichvu
   (lớp DUY NHẤT rộng 1080px trong figma-spec/trang1.json) */
/* --- lưới thẻ ------------------------------------------------------------- */
.t4 .section.t4h-dv .row.t4h-dv-luoi {
  display: flex; flex-wrap: wrap; gap: 14px; max-width: 1080px;
}
.t4 .section.t4h-dv .row.t4h-dv-luoi::after { content: none; display: none; }
/* ⚠ 'flex-start' chứ KHÔNG 'space-between': cụm đáy (kẻ + nút) đã tự đẩy
   xuống bằng 'margin-top: auto'. Để 'space-between' thì nó CHIA ĐỀU chỗ thừa
   cho cả năm phần tử, và nút đo ra cao hơn Figma 38–49px. */
.t4 .section.t4h-dv .col.t4h-dv-the {
  display: block;
  /* ⚠ ĐỆM TRỪ ĐI 1px VIỀN. Figma vẽ nét viền BÊN TRONG khung và đo đệm từ
     mép khung, còn CSS đo đệm từ mép TRONG của viền — để nguyên 50/30/25 là
     mọi thứ trong thẻ lệch đúng 1px và lòng thẻ hụt 2px. */
  /* ⚠ '!important' LÀ BẮT BUỘC, không phải lười: Flatsome khai
     '.row-collapse > .col { padding: 0 !important }' trong flatsome.css (đã
     soi tận nơi). Class dài bao nhiêu cũng thua '!important', và thua IM
     LẶNG — thẻ mất sạch đệm, chữ nở từ 473 ra 531 và bảng báo lệch bề rộng
     ở cả năm thẻ mà không chỉ ra nguyên nhân. */
  box-sizing: border-box; padding: 49px 29px 24px !important;
  background: var(--t4-white); border: 1px solid rgba(0, 0, 0, .11);
  border-radius: 16px; box-shadow: 3px 3px 8px rgba(0, 0, 0, .25);
}
/* Figma cho riêng thẻ 01 viền #FCFBF6 (gần như vô hình trên nền kem), bốn thẻ
   kia viền đen 11%. Không phải nhầm — đã soi từng thẻ một. */
.t4 .section.t4h-dv .col.t4h-dv-the1 { border-color: var(--t4-light); }
/* ⛔ Bề rộng phải ghim bằng 'flex-basis' tính theo phần trăm, KHÔNG dùng
   'flex: 1 1 0'. Với '1 1 0' cả năm thẻ chia đều một hàng cuộn xuống lung
   tung: thẻ 3+4 nằm hàng hai, thẻ 5 rơi xuống hàng ba, và thẻ 4 kéo dài hết
   khổ nên tiêu đề ba dòng của Figma thu về một dòng.
   Ghim đúng tỉ lệ Figma thì 'flex-wrap' tự bẻ 2 + 3:
     hàng trên 2×533 + 14  = 1080 · hàng dưới 3×350,67 + 2×14 = 1080 */
.t4 .section.t4h-dv .col.t4h-dv-the1, .t4 .section.t4h-dv .col.t4h-dv-the2 {
  flex: 0 0 calc((100% - 14px) / 2); max-width: none; min-height: 375px;
}
.t4 .section.t4h-dv .col.t4h-dv-the3, .t4 .section.t4h-dv .col.t4h-dv-the4,
.t4 .section.t4h-dv .col.t4h-dv-the5 {
  flex: 0 0 calc((100% - 28px) / 3); max-width: none; min-height: 474px;
}



/* [figma] trang1 · section dichvu — section DUY NHẤT chứa đủ
   bộ bề rộng của cụm này: 285px→'279:7398' (+9) · 291px→'279:7386' (+21)
   (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) */
/* ⛔ 'width: 291px' ở đây làm THẺ rộng 353 thay vì 350,67 và cả hàng ba thẻ
   vỡ xuống hai hàng. Lý do: mục flex mặc định 'min-width: auto', tức bề rộng
   NHỎ NHẤT của nội dung — một khối con ghim cứng 291px kéo mức đó lên
   291 + 60 đệm + 2 viền = 353, và 'flex-shrink: 0' thì không co lại được.
   Viết 'width:100%; max-width:291px' cho cùng kết quả mà không nâng sàn. */
.t4 .section-content .text.t4h-dv-nhom { display: flex; flex-direction: column;
                   gap: 16px; width: 100%; max-width: 291px; margin: 0; }
/* kẻ đứt dưới chip: trước là <span> gõ tay, nay là ::after của ô văn bản */
.t4 .t4h-dv-nhom::after { content: ""; display: block; height: 1px; width: 100%;
                          border-top: 1px dashed rgba(0, 0, 0, .11); }
/* Cụm đáy thẻ: kẻ + nút. Không còn <div> bọc, dùng 'margin-top: auto' để
   đẩy xuống đáy đúng như 'justify-content: space-between' cũ. */
/* ⚠ Kẻ nằm trong '.col-inner', KHÔNG phải con trực tiếp của '.col'. Viết
   '.col.t4h-dv-the > .is-divider' là bộ chọn không khớp gì cả — im lặng, và
   nút "Xem chi tiết" đứng ngay dưới mô tả thay vì tụt đáy thẻ (lệch 61–74px).
   Đây là lần thứ hai trong section này một dấu '>' đặt sai tầng làm cả cụm
   sai chỗ mà không có gì báo. */
/* ⛔ GHIM CỤM ĐÁY BẰNG TOẠ ĐỘ, KHÔNG BẰNG 'margin-top: auto'.
   Lề auto đẩy cụm xuống theo CHỖ TRỐNG CÒN LẠI, nên mọi sai số chiều cao
   tích luỹ phía trên (ô icon, số dòng tiêu đề) đều dồn hết vào đây: nút đo
   ra cao hơn Figma 12–15px ở ba thẻ, mỗi thẻ một con số khác nhau. Đặt tuyệt
   đối theo đáy thì nút đứng đúng chỗ bất kể phía trên cao bao nhiêu.
   32 = nút 24 + khe 8. Đáy của '.col-inner' chính là mép trong của đệm 24. */
.t4 .section.t4h-dv .col.t4h-dv-the .col-inner { position: relative; }
.t4 .section.t4h-dv .col.t4h-dv-the .col-inner > .is-divider:last-of-type {
  position: absolute; left: 0; bottom: 32px; margin: 0;
  width: 100%; max-width: 285px; }
.t4 .section.t4h-dv .col.t4h-dv-the a.button.t4h-dv-xem {
  position: absolute; left: 0; bottom: 0; margin: 0; }
.t4 .section.t4h-dv .col.t4h-dv-the { min-width: 0; }
/* ⛔ KHÔNG dùng 'display: contents' cho '.col-inner'. Nó xoá hẳn hộp của
   thẻ bọc, và khi đó 'margin-top: auto' của cụm đáy không còn hộp nào để
   đẩy — nút "Xem chi tiết" đứng ngay dưới mô tả thay vì tụt xuống đáy thẻ,
   lệch 61–74px. Cho chính '.col-inner' làm cột flex cao 100% thì lề auto
   hoạt động đúng như '.t4h-dv-duoi' ngày trước. */
.t4 .section.t4h-dv .col.t4h-dv-the > .col-inner {
  display: flex; flex-direction: column; height: 100%; padding: 0;
}
/* '[divider]' không nhận thuộc tính class (xem §7) ⇒ bám qua lớp của CỘT. */
.t4 .section.t4h-dv .col.t4h-dv-the .is-divider {
  height: 1px; width: 100%; max-width: 291px; margin: 0;
  background-color: transparent; border-top: 1px dashed rgba(0, 0, 0, .11); }
.t4 .t4h-dv-nhom p {
  align-self: flex-start; margin: 0; box-sizing: border-box; height: 32px;
  padding: 2px 16px; border-radius: 8px; background: rgba(207, 145, 86, .25);
  font-family: var(--t4-font-body); font-weight: 600; font-size: 16px;
  line-height: 28px; color: var(--t4-muted); white-space: nowrap;
}
.t4 .t4h-dv-the1 .t4h-dv-nhom p { background: var(--t4-leaf); color: var(--t4-light); }

/* Icon Box thật của Flatsome.
   ⚠ 'flex-direction: row' phải khai TƯỜNG MINH. '[featured_box pos="left"]'
   gắn class 'icon-box-left', nhưng '.icon-box' gốc của Flatsome là
   'flex-direction: column', nên icon vẫn nằm TRÊN tiêu đề và cột chữ rộng
   bằng cả thẻ — tiêu đề đo ra 290,7 thay vì 250,67 (= 290,67 − 32 − 8).
   ⚠⚠ Và 'flex-wrap: nowrap' cũng phải khai: '.icon-box' của Flatsome bật
   'flex-wrap: wrap', nên dù đã 'row' thì cột chữ (rộng 100%) vẫn XUỐNG DÒNG
   nằm dưới icon — nhìn số đo y hệt trường hợp 'column', chỉ khác là thêm 8px
   gap. Đổi mỗi 'flex-direction' xong đo lại ra ĐÚNG CON SỐ CŨ, rất dễ tưởng
   là bản vá không lên được máy chủ. */
.t4 .t4h-dv-ib { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px;
                 align-items: flex-start; margin: 18px 0 0; }
.t4 .t4h-dv-ib .icon-box-text { padding: 0; flex: 1 1 auto; }
.t4 .t4h-dv-ib .icon, .t4 .t4h-dv-ib .icon-inner { display: block; }
/* ⛔ BIỂU TƯỢNG PHẢI LÀ <div>, KHÔNG PHẢI <span> — và ba chỗ khác cũng vậy.
   'wpautop' bọc mọi phần tử INLINE đứng MỘT MÌNH giữa hai khối bằng một <p>,
   mà '.t4 p' mang sẵn 'margin-bottom: 16px'. Hậu quả đã đo được: mô tả của
   bốn thẻ tụt xuống 16px, dấu & của tiêu đề thành một đoạn văn riêng, và
   ngay sau biểu tượng có một '</p>' lạc. Ba chỗ đã đổi sang <div>: biểu
   tượng thẻ · gạch trước mô tả · dấu &. Hai chỗ CÒN LÀ <span> (chip và gạch
   trong .t4h-dv-nhom, gạch và liên kết trong .t4h-dv-duoi) thì an toàn vì
   chúng nằm chung một dòng với thẻ mở/đóng, không tạo ranh giới đoạn. */
/* 'line-height: 0' giết 3,2px khoảng trắng dòng chữ mà thẻ bọc <svg> để lại. */
.t4 .t4h-dv-ib .icon-box-img { flex: 0 0 auto; width: 32px !important;
                               margin: 0; line-height: 0; }
/* [phục vụ] phần tử: Icon Box (featured_box) | khối: ô biểu tượng thẻ dịch vụ
   [trang] trang chủ §4 Dịch vụ | [figma] node 279:7364
   [lý do vượt panel] panel Icon Box không có ô nào gỡ được đệm mà theme cha áp.

   ⛔ 'padding-top: 0' LÀ DÒNG PHẢI CÓ — đây là nguyên nhân gốc của hai mốc
   lệch cuối cùng của section, tìm ra bằng ĐO chứ không đoán (17/08/2026).
   flatsome.css khai '.icon-box-img img, .icon-box-img svg { padding-top: .2em }'
   → với font-size 16px là 3,2px (bố cục làm tròn 3,1875px), và vì
   'box-sizing: border-box' + 'height: auto' nên nó CỘNG THÊM vào chiều cao
   hộp chứ không nằm trong: mọi ô icon đo ra +3,19px so với khổ khai trong
   tệp SVG (32→35,19 · 24→27,19 — cộng thêm, KHÔNG theo tỉ lệ).

   Vì sao chỉ THẺ 02 hiện lệch: hàng icon là flex-row nên cao bằng phần tử
   cao nhất. Bốn thẻ kia có hộp tiêu đề cao hơn ô icon (51 · 84 · 84 · 56)
   nên phần dư bị nuốt; riêng thẻ 02 tiêu đề chỉ một dòng (28) nên chính ô
   icon quyết định chiều cao hàng → 35,19 thay vì 32 của Figma, và đúng
   3,19px đó đẩy mô tả xuống (mốc 10→13,18 và 144→140,61).
   ⚠ Bù 3,18px vào khe của thẻ là chữa TRIỆU CHỨNG — đã thử, số xấu đi 2→6. */
.t4 .t4h-dv-ib .icon-box-img svg { display: block; width: 100%; height: auto;
                                   padding-top: 0; }
/* ⛔ MÀU BIỂU TƯỢNG PHẢI KHAI LẠI — flatsome.css khai
   '.icon-box-img svg, .icon-box-img svg path { fill: currentcolor }', mà CSS
   thắng thuộc tính 'fill=' viết trong chính tệp SVG. Hậu quả: cả năm biểu
   tượng ra ĐEN (#1f1f1f, màu chữ thừa kế) trong khi Figma khai thẻ 01 xanh lá
   '#458763' và bốn thẻ kia camel '#cf9156'.
   ⚠ Bảng dày KHÔNG bắt được lỗi này: <svg> không phải lớp chữ cũng không phải
   lớp ảnh, nên nó nằm ngoài mọi phép so bằng số. Bắt được bằng cách soi ảnh
   chụp rồi hỏi lại 'fills' của chính node Figma (17/08/2026). */
.t4 .t4h-dv-ib .icon-box-img svg,
.t4 .t4h-dv-ib .icon-box-img svg path { fill: var(--t4-camel); }
.t4 .t4h-dv-the1 .t4h-dv-ib .icon-box-img svg,
.t4 .t4h-dv-the1 .t4h-dv-ib .icon-box-img svg path { fill: var(--t4-leaf); }
.t4 .t4h-dv-the4 .t4h-dv-ib .icon-box-img { width: 24px !important; }
.t4 .t4h-dv-tieu { flex: 1 1 auto; }
.t4 .t4h-dv-tieu h3 {
  font-family: var(--t4-font-body); font-weight: 600; font-size: 24px;
  line-height: 28px; color: var(--t4-text); margin: 0; letter-spacing: 0;
}
.t4 .t4h-dv-the1 .t4h-dv-tieu h3 { font-weight: 700; color: var(--t4-leaf); }
/* Figma: Frame 9 gap = −5 → dòng phụ ĐÈ LÊN 5px chứ không cách ra */
.t4 .t4h-dv-phu {
  font-family: var(--t4-font-body); font-weight: 400; font-size: 11px;
  line-height: 28px; color: var(--t4-text); margin: -5px 0 0;
}
/* Thẻ 03: chuỗi Figma kết bằng \n ⇒ hộp cao 84 (ba dòng) dù chỉ vẽ hai dòng.
   Ghim chiều cao, nếu không cả khối dưới nó leo lên 28px. */
.t4 .t4h-dv-the3 .t4h-dv-tieu h3 { height: 84px; }
.t4 .t4h-dv-mota {
  font-family: var(--t4-font-body); font-weight: 400; font-size: 16px;
  line-height: 26px; color: var(--t4-text); margin: 0; letter-spacing: 0;
}
.t4 .section.t4h-dv a.button.t4h-dv-xem {
  display: inline-flex; min-height: 0; border: 0; box-shadow: none;
  text-transform: none; letter-spacing: 0; align-items: center; gap: 8px; align-self: flex-start;
  box-sizing: border-box; height: 24px; padding: 0 8px; border-radius: 3px;
  background: var(--t4-white); text-decoration: none;
  font-family: var(--t4-font-body); font-weight: 400; font-size: 12px;
  line-height: 16.392px; color: var(--t4-text);
}
/* Mũi tên 14×14 'cl-icon-next' (Figma node I279:7400;163:4412), đúng HAI vector:
     gạch ngang  x=0    y=6,69  14×1
     đầu mũi     x=8,44 y=1,69   6×11   ← CHEVRON hai nét, KHÔNG phải khối đặc

   ⛔ BẢN CŨ VẼ SAI VÀ ĐÃ LÊN SITE: nó dùng hai lớp 'linear-gradient', mà
   gradient thì tô ĐẶC — lớp 6×11 ra một hình chữ nhật đen chứ không phải mũi
   tên. Trên màn hình là 'một gạch nối với một cục đen'. Chú thích cũ ghi là
   'chevron' nên đọc mã không thấy sai; phải chụp nút ra nhìn mới lộ.
   4T báo 21/08/2026: "icons xem chi tiết cũng đang sai".

   ⚠ Bảng dày KHÔNG bắt được lỗi này: hộp nút vẫn đúng 103×24 vì bề rộng đã
   chừa sẵn 22px (icon 14 + khe 8), chỉ HÌNH bên trong sai. Cùng họ điểm mù
   II.K với '<svg> nội tuyến'.

   Dùng mask + data URI (lối đã dùng 37 chỗ trong css/) chứ không nhúng <svg>
   vào nội dung bài — KSES cắt <svg> khi ghi bài, còn CSS thì không bị đụng.
   Mask giữ được token màu; ghi cứng mã màu vào data URI là mất token. */
/* Flatsome cho <span> trong nút cao dòng riêng (19,2) — ghim lại đúng Figma. */
.t4 .section.t4h-dv a.button.t4h-dv-xem > span {
  line-height: 16.392px; display: block; }
.t4 .section.t4h-dv a.button.t4h-dv-xem::after {
  content: ""; position: relative; flex: 0 0 auto; width: 14px; height: 14px;
  background-color: var(--t4-text);
  -webkit-mask: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M0 7.19H14' stroke='white' stroke-width='1'/> <path d='M8.44 1.69L13.94 7.19L8.44 12.69' stroke='white' stroke-width='1'/> </svg>") no-repeat center / 14px 14px;
  mask: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M0 7.19H14' stroke='white' stroke-width='1'/> <path d='M8.44 1.69L13.94 7.19L8.44 12.69' stroke='white' stroke-width='1'/> </svg>") no-repeat center / 14px 14px; }


/* ── khe dọc giữa các phần tử trong thẻ ──────────────────────────────────
   Trước đây ba <div> bọc ('t4h-dv-tren' gap 18 · 't4h-dv-cum8' gap 8) lo việc
   này. Bỏ chúng đi thì phải khai lại bằng lề, và khai theo ĐÚNG thứ tự Figma:
     thẻ 01:  chip → 18 → icon box → 8  → mô tả
     thẻ 02-05: chip → 18 → icon box → 18 → kẻ → 18 → mô tả                */
.t4 .section.t4h-dv .col.t4h-dv-the1 .text.t4h-dv-mota { margin-top: 8px; }
/* Figma: Frame 9 gap = −5 ⇒ dòng phụ ĐÈ LÊN tiêu đề 5px chứ không cách ra.
   Lề này trước nằm trên <p>; nay dòng phụ là ô văn bản riêng nên phải khai
   trên chính ô đó, và đủ cụ thể để thắng luật nền '.section-content .text'. */
.t4 .section-content .text.t4h-dv-phu { margin-top: -5px; }
.t4 .section.t4h-dv .col.t4h-dv-the .is-divider:not(:last-of-type) { margin-top: 18px; }
.t4 .section.t4h-dv .col.t4h-dv-the .is-divider + .text.t4h-dv-mota { margin-top: 18px; }
/* ⚠ KHÔNG thêm 'margin-right' cho ô icon: 'gap: 8px' của flex đã lo khoảng
   này rồi, cộng thêm lề là thành 16 và cột chữ hụt đúng 8px (242,66 thay vì
   250,67). Lần đầu tôi thêm lề vì tưởng 'gap' không ăn — thật ra lúc đó khối
   đang xuống dòng vì 'flex-wrap: wrap' của Flatsome, không liên quan gì gap. */

@media (max-width: 849px) {
  .t4 .section.t4h-dv { min-height: 933px; }
  .t4 .section.t4h-dv .section-content { padding: 60px 0; }
  .t4 .section.t4h-dv .section-content > .row.row-collapse,
  .t4 .section.t4h-dv .section-content > .row.t4h-dv-r1,
  .t4 .section.t4h-dv .section-content > .row.t4h-dv-r2 { max-width: 342px; }
  .t4 .section.t4h-dv .section-content > .row.t4h-dv-r3 { margin-top: 32px; }
  /* Băng thẻ cuộn ngang phải rộng HẾT KHỔ, không bó trong khung 342.
     ⚠ 'max-width: none' KHÔNG đủ: hàng còn mang margin trái/phải 25px của
     khung mobile chung, nên vẫn chỉ rộng 352 và thẻ đầu lệch vào 25px. */
  .t4 .section.t4h-dv .section-content > .row.t4h-dv-r4 {
    /* ⚠ Phải gỡ ĐỦ BA thứ. Mục 11.14 khai 'width: 352px' (không phải chỉ
       max-width) cho '.t4 .section-content > .row' ở mobile, nên bỏ mỗi
       max-width thì hàng vẫn đúng 352 và không có gì báo. */
    width: auto; max-width: none; margin-left: 0; margin-right: 0;
  }

  .t4 .t4h-dv-kicker p { font-weight: 700; font-size: 16px; line-height: 21.856px; letter-spacing: 0; }
  /* Khổ mobile không dùng lề 4px của desktop — Figma cho khe khác. */
  .t4 .section.t4h-dv .row.t4h-dv-h2box { width: 342px; height: 88px;
    margin-top: -5.76px; }
  /* Kéo hàng tiêu đề lên 9,76 làm khe SAU nó hụt đúng ngần ấy — trả lại cho
     dòng "BẰNG CHIẾN LƯỢC RÕ RÀNG". Hai khe này ràng buộc ngược chiều nhau,
     chỉnh một cái là phải bù cái kia (cùng kiểu với khối Liên hệ mobile). */
  .t4 .section.t4h-dv .section-content > .row.t4h-dv-r2b { margin-top: 9.83px; }
  .t4 .t4h-dv-h2box h2 { font-size: 32px; line-height: 42.656px; }
  .t4 .section.t4h-dv .col.t4h-dv-h2a { left: 58px;  top:  7px; width: 227px; height: 23px; }
  .t4 .section.t4h-dv .col.t4h-dv-h2b { left: 28px;  top: 58px; width: 286px; height: 23px; }
  /* ⛔ 'top: 44.9', KHÔNG phải 35 — sửa 18/08/2026 theo ảnh iPhone của 4T.
     Figma mobile đặt dấu '&' ở **y = 198** (VECTOR 14×18). Hộp '.t4h-dv-h2box'
     trên site nằm ở y=153,1 chứ không phải 163 như 'Frame 118' của Figma —
     lệch 9,9px vì hai tiêu đề bên trong được bù bằng 'top' riêng để TÂM khớp
     (hộp CSS cao 42,656 trong khi lớp Figma khai 23). Dấu '&' không có phần
     bù đó nên rơi lên **188,1**, sát ngay dưới dòng "Tối ưu hiệu quả" — nhìn
     như đè vào chữ. 198 − 153,1 = **44,9**.
     ⚠ Bản desktop KHÔNG dính: hộp ở đúng 216 như Figma nên 'top: 16' ra 232.
     ⚠ Bảng dày im lặng vì '&' là VECTOR — không phải lớp chữ, không phải lớp
     ảnh (điểm mù II.K-3). */
  .t4 .section.t4h-dv .row.t4h-dv-h2box::after { left: 164px; top: 44.9px; width: 14px; height: 18px; }
  /* ⚠ MOBILE LÀ 700, KHÔNG PHẢI 800. Hai khổ là hai node Figma khác nhau:
     desktop 279:7374 ghi đè ExtraBold 800/35 · mobile 1015:18082 khai
     Manrope-Bold 700/21,856 và KHÔNG có ghi đè nào. Đổi cả hai theo desktop
     là sai mobile — đã dính đúng vậy ở vòng trước. */
  .t4 .t4h-dv-sub p { font-weight: 700; font-size: 16px; line-height: 21.856px; height: 22px; }
  .t4 .t4h-dv-para { height: 104px; font-size: 16px; line-height: 26px; }

/* [figma] trang1 · section dichvu_mb — 5 lớp rộng 330px: '1405:18823' · '1405:18824' · '1405:18825' … còn 2
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 1 để chọn) */
  /* ⛔ KHÔNG dùng 'scroll-snap-type'. Vùng bắt dính mặc định tính từ mép
     ĐỆM, nên ngay khi tải trang Chrome tự cuộn 30px để mép thẻ đầu trùng mép
     khung — cả băng thẻ lệch trái đúng 30px so với Figma, mà không có gì
     báo vì bố cục vẫn "đúng", chỉ vị trí cuộn là khác. Figma cũng không mô
     tả hành vi bắt dính nào. */
  .t4 .section.t4h-dv .row.t4h-dv-luoi {
    flex-wrap: nowrap; gap: 13px; padding: 0 30px; max-width: none;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .t4 .section.t4h-dv .col.t4h-dv-the,
  .t4 .section.t4h-dv .col.t4h-dv-the1, .t4 .section.t4h-dv .col.t4h-dv-the2,
  .t4 .section.t4h-dv .col.t4h-dv-the3, .t4 .section.t4h-dv .col.t4h-dv-the4,
  .t4 .section.t4h-dv .col.t4h-dv-the5 {
    flex: 0 0 330px; width: 330px; max-width: none; min-height: 410px;
    padding: 34px 29px 24px !important;
  }
  .t4 .section-content .text.t4h-dv-nhom { width: 100%; max-width: none; }
  .t4 .section.t4h-dv .col.t4h-dv-the .col-inner > .is-divider:last-of-type { max-width: none; }
  /* Figma mobile bo góc chip 4 (desktop 8) — khác thật, không phải nhầm. */
  .t4 .t4h-dv-nhom p { font-size: 14px; border-radius: 4px; }
  .t4 .t4h-dv-tieu h3 { font-size: 20px; }
  .t4 .t4h-dv-the3 .t4h-dv-tieu h3 { height: auto; }
  .t4 .t4h-dv-mota p { font-size: 14px; line-height: 22px; }
}

/* 21.5 ĐỐI TÁC — Figma 271:1242 (1900×563) · 1015:18173 (402×551) -----------
   Chip · H2 hai dòng (dòng trên đậm 600, dòng dưới 500 — KHÁC nhau, không
   phải một khối) · một dòng tiếng Anh · hàng 7 logo.

   ⚠ THỨ TỰ LOGO KHÁC NHAU giữa hai khổ: desktop VinUni · EVN · Traphaco …
   còn mobile VinUni · Traphaco · EVN … Đảo bằng 'order', đừng đảo trong HTML
   (đảo HTML là hỏng khổ kia).

   Mốc dọc Figma:
     desktop  chip 108 · H2 193 (53) + 246 (53) · EN 315 (32) · logo 363 (100)
     mobile   chip 68  · H2 153 (43) + 196 (129) · EN 357 (32) · logo 421 (70)
   -------------------------------------------------------------------------- */
.t4 .section.t4h-dt {
  min-height: 563px; padding: 0; align-items: flex-start;
  background: var(--t4-light);
}
.t4 .section.t4h-dt .section-content { padding: 100px 0; }
.t4 .section.t4h-dt .section-content > .row.row-collapse { max-width: 1080px; }
.t4 .section.t4h-dt .text.t4h-dt-nhan { margin-bottom: 0; }
.t4 .section.t4h-dt .section-content > .row.t4h-dt-r2 { margin-top: 56px; }
.t4 .section.t4h-dt .section-content > .row.t4h-dt-r3 { margin-top: 16px; }

/* ⛔ HAI TIÊU ĐỀ NÀY LÀ [title] CỦA FLATSOME (luật T0 · §I.8b), không phải
   <h2> viết tay. Cây DOM nó sinh ra:
       div.container.section-title-container.<class>
         h2.section-title.section-title-normal
           b + span.section-title-main + b
   Ba thứ BẮT BUỘC phải trung hoà, nếu không Flatsome áp mặc định của nó:
     · '.container' có max-width + đệm ngang riêng → tiêu đề lệch tâm 272px;
     · '.section-title' mặc định VIẾT HOA và giãn chữ -1,2px;
     · hai thẻ <b> là hai gạch trang trí hai bên, Figma không có.
   Đo trước khi trung hoà: 4 mốc 'hoa'/'ls'/'weight' sai + lệch tâm 272px. */
.t4 .t4h-dt h2 {
  font-family: var(--t4-font-head); font-size: 40px; line-height: 53px;
  color: var(--t4-dark-moss); margin: 0; letter-spacing: 0;
  text-transform: none; padding: 0; border: 0; display: block;
}
.t4 .t4h-dt-h2a h2 { font-weight: 600; }
/* ⛔ 600, KHÔNG phải 500. Style của LỚP là Medium 500, nhưng Figma ghi đè
   'PlayfairDisplay-SemiBold w600' cho TOÀN BỘ 44 ký tự của dòng này
   (node 271:1255 và 1015:18184). Lấy style lớp là lấy nhầm. */
.t4 .t4h-dt-h2b h2 { font-weight: 600; }
.t4 .t4h-dt-en p {
  font-family: var(--t4-font-body); font-weight: 400; font-size: 16px;
  line-height: 26px; color: var(--t4-text); margin: 0; letter-spacing: 0;
  height: 32px; display: flex; align-items: center; justify-content: center;
}
.t4 .section-content .text.t4h-dt-en { margin-top: 16px; }

/* [figma] '1374:9711' — Trường_Đại_học_VinUni_logo 1 · 98×60 · trang1·doitac
   (lớp DUY NHẤT rộng 98px trong figma-spec/trang1.json) */
/* Hàng logo: Figma auto-layout gap 55 với tổng bề rộng logo 746 trong khung
   1080 — đúng bằng 'space-between', nên không ghim khe cứng: khổ hẹp hơn thì
   khe tự co thay vì tràn. Đệm dọc 20 (Figma pt/pb) giữ hàng cao 100. */
.t4 .t4h-dt-logo > .col-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0; width: 100%;
}
/* ⛔ Mỗi logo giờ là một [ux_image] (luật T0), nên class 't4h-dt-*' nằm trên
   'div.img.has-hover' bọc ngoài, còn thẻ <img> thật nằm trong 'div.img-inner'.
   Đặt kích thước lên thẻ bọc và cho ảnh bên trong lấp đầy — để nguyên như cũ
   thì Flatsome cho '.img' rộng 100% và bảy logo phình thành 1080px mỗi cái. */
/* ⛔ PHẢI '!important' — không phải lười, mà vì không thắng nổi bằng cách khác.
   '[ux_image]' nhả kèm ngay sau ảnh một thẻ <style> dạng
       #image_1990075719 { width: 100%; }
   tức một bộ chọn ID sinh ngẫu nhiên cho TỪNG ảnh. Bộ chọn class dù dài bao
   nhiêu cũng thua ID, nên bảy logo đều phình thành 1080px. Không có tham số
   nào của shortcode đặt được bề rộng theo PIXEL (chỉ có phần trăm), và cũng
   không được sửa lõi Flatsome. */
/* ⛔⛔ 'margin-bottom: 0' LÀ DÒNG PHẢI CÓ — nếu không cả SECTION cao thừa 16px.
   Flatsome khai '.img { margin-bottom: 16px }' và gỡ lại bằng
   ':last-child { margin-bottom: 0 }'. Trong hàng flex 'align-items: center',
   chiều cao dòng tính theo HỘP KỂ CẢ LỀ: sáu logo đầu thành 76 (60+16), logo
   Grab cuối hàng chỉ 60 ⇒ dòng cao 76, cộng đệm 20+20 = **116** thay vì 100.
   Kèm một dấu hiệu lạ dễ đánh lạc hướng: sáu logo căn giữa ở y=383 còn **Grab
   tụt xuống 391** — vì nó căn giữa 60px trong dòng 76px, sáu cái kia căn giữa
   hộp 76px trong dòng 76px.

   ⚠ Bảng dày 2358 phép so KHÔNG bắt được: nó không có phép so nào cho CHIỀU
   CAO SECTION, dù I.2 có khai ngưỡng ≤4px cho mục đó. Bắt được nhờ 4T nói
   "chưa giống 100%" rồi đo lại chiều cao từng section. Nay đã thêm phép so
   này vào bảng dày (tools/sinh-map-day.py), xem ghi chú ở đó. */
.t4 .t4h-dt-l { display: block; flex: 0 0 auto; height: 60px; width: auto !important; }
/* ⚠ Bộ chọn PHẢI DÀI THẾ NÀY, không rút gọn được. Luật của Flatsome là
       .col-inner > .img:not(:last-child) { margin-bottom: 1em }
   → độ cụ thể (0,3,0): ':not()' KHÔNG cộng gì cho chính nó nhưng đối số bên
   trong ':last-child' VẪN được đếm như một pseudo-class. '.t4 .t4h-dt-l' chỉ
   (0,2,0) nên thua — đã thử và bảng số **không đổi một con số nào**, y như
   chưa đẩy CSS. Bộ chọn dưới đây (0,5,0). */
.t4 .t4h-dt-logo .col-inner > .img.t4h-dt-l { margin-bottom: 0; }
.t4 .t4h-dt-l .img-inner { height: 100%; }
/* '!important' cùng lý do với thẻ bọc: Flatsome đặt kích thước ảnh qua
   thẻ <style> nội tuyến dùng bộ chọn ID. Không ép thì thẻ bọc đúng
   50×38 mà <img> bên trong vẫn 50×50 và tràn ra ngoài. */
.t4 .t4h-dt-l img { width: 100% !important; height: 100% !important;
                    object-fit: contain; display: block; }
/* '[ux_image]' nhả kèm một thẻ <style> ngay sau ảnh — nó là phần tử con của
   hàng flex nên bị tính là một ô trống, đẩy 'space-between' lệch hẳn. */
.t4 .t4h-dt-logo .col-inner > style { display: none; }
.t4 .t4h-dt-vinuni { width: 98px !important; }
.t4 .t4h-dt-evn { width: 60px !important; }
.t4 .t4h-dt-traphaco { width: 216px !important; }
.t4 .t4h-dt-bo-cong-an { width: 60px !important; }
.t4 .t4h-dt-viettel-media { width: 127px !important; }
.t4 .t4h-dt-cong { width: 105px !important; }
.t4 .t4h-dt-grab { width: 80px !important; }

@media (max-width: 849px) {
  .t4 .section.t4h-dt { min-height: 551px; }
  .t4 .section.t4h-dt .section-content { padding: 60px 0; }
  .t4 .section.t4h-dt .section-content > .row.row-collapse { max-width: 342px; }
  .t4 .section.t4h-dt .section-content > .row.t4h-dt-r2 { margin-top: 56px; }
  .t4 .section.t4h-dt .section-content > .row.t4h-dt-r3 { margin-top: 32px; }
  /* Băng logo cuộn ngang, tràn hết khổ — gỡ ĐỦ BA thứ như ở 21.4 */
  .t4 .section.t4h-dt .section-content > .row.t4h-dt-r3 {
    width: auto; max-width: none; margin-left: 0; margin-right: 0;
  }
  .t4 .t4h-dt h2 { font-size: 32px; line-height: 42.656px; }
  .t4 .section-content .text.t4h-dt-en { margin-top: 32px; }

/* [figma] '1374:9729' — Trường_Đại_học_VinUni_logo 1 · 65×40 · trang1·doitac_mb
   (lớp DUY NHẤT rộng 65px trong figma-spec/trang1.json) */
  .t4 .t4h-dt-logo > .col-inner {
    justify-content: flex-start; gap: 30px; padding: 10px 30px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .t4 .t4h-dt-l { height: auto; }
  .t4 .t4h-dt-vinuni        { order: 1; width: 65px !important;  height: 40px !important; }
  .t4 .t4h-dt-traphaco      { order: 2; width: 128px !important; height: 36px !important; }
  .t4 .t4h-dt-evn           { order: 3; width: 40px !important;  height: 40px !important; }
  .t4 .t4h-dt-bo-cong-an    { order: 4; width: 50px !important;  height: 38px !important; }
  .t4 .t4h-dt-viettel-media { order: 5; width: 76px !important;  height: 36px !important; }
  .t4 .t4h-dt-cong          { order: 6; width: 63px !important;  height: 36px !important; }
  .t4 .t4h-dt-grab          { order: 7; width: 67px !important;  height: 50px !important; }
}

/* 21.6 CASESTUDY — Figma 271:1599 (1900×1035) · 1015:18528 (402×1140) -------
   4 tab, Figma vẽ **tab 1 mở** — trùng đúng mặc định của Flatsome nên KHÔNG
   cần đoạn script chuyển tab như trang #4 đã phải làm (Flatsome khoá cứng
   '$key == 0' trong inc/shortcodes/tabs.php).

   ⚠ Lớp riêng 't4h-cs-tabs', KHÔNG dùng lại '.t4fx-tabs' của trang #4: đó là
   lớp dùng chung, sửa nó là kéo theo cả ba trang GG Marketing (luật I.8-4).

   ⚠ Ruột bảng là mẫu HubSpot tiếng Anh của Figma (Figma ipsum · Adam Jones ·
   Unipart). Theo quyết định 17/08 thì BÁM FIGMA — đừng thay bằng chữ Việt.
   Ba tab còn lại Figma không vẽ ruột ⇒ chữ giữ chỗ, đã ghi phan-hoi-figma.md.

   Mốc dọc Figma:
     desktop  chip 108 · H2 193 (53) · tablist 315 (54) · panel 393 (492)
     mobile   chip 68  · H2 153 (43) · tablist 340 (54) · panel 418 (662)
   -------------------------------------------------------------------------- */
.t4 .section.t4h-cs {
  min-height: 1035px; padding: 0; align-items: flex-start;
  background: var(--t4-light);
}
.t4 .section.t4h-cs .section-content { padding: 100px 0 150px; }
.t4 .section.t4h-cs .section-content > .row.row-collapse { max-width: 1080px; }
/* ⛔ ID SECTION PHẢI KHÁC trang #4. Bản đầu đặt '_id="casestudy"' — đúng id
   mà trang #4 đang dùng — nên nuốt luôn 22 quy tắc viết cho trang đó, trong
   đó có '#casestudy { padding-bottom: 150px }' khiến section cao 1157 thay vì
   1035. Cùng họ với bẫy '#hero' đã ghi ở bàn giao phiên 11: id trong UX
   Builder là TOÀN CỤC, không thuộc về trang nào. */
/* Khe Figma: khối nhãn cao 45, hàng chứa nó có đệm dưới 16, rồi khe section
   32 ⇒ 48, không phải 32. */
.t4 .section.t4h-cs .section-content > .row.t4h-cs-r2 { margin-top: 48px; }
.t4 .section.t4h-cs .section-content > .row.t4h-cs-r3 { margin-top: 32px; }

/* Hàng nhãn: chip · kẻ đứt · nút viền "Xem tất cả" (Figma: hộp 132×35,
   bo 5, viền 1px #155446, đệm 8/30). */
/* [phục vụ] hàng nhãn Casestudy: chip + kẻ đứt + nút "Xem tất cả"
   [trang] trang chủ | [figma] 271:1599
   [lý do vượt panel] panel không có bố cục chip-kẻ-nút trên một hàng

   Chip nay DÙNG LẠI mô-típ chung '.t4-label' của 30-components (III.4.0)
   thay vì khai một bản sao '.t4h-cs-chip' riêng — kẻ đứt nét đã là '::after'
   sẵn có trong mô-típ đó, nên hai '<span>' gõ tay cũ biến mất luôn. */
/* ⛔ BẪY II.H-4: '.row::after' là clearfix của Flatsome, và khi row thành
   flex thì nó biến thành MỘT PHẦN TỬ FLEX NỮA. Với 'space-between' nó ăn mất
   một suất chia — hàng tiêu đề đo ra dx 442,5 thay vì 567,8 và không có gì
   báo. Phải tắt ở MỌI row ta tự cho display:flex. */
.t4 .section.t4h-cs .row.t4h-cs-r1::after,
.t4 .section.t4h-cs .row.t4h-cs-r2::after { content: none; display: none; }
.t4 .section.t4h-cs .row.t4h-cs-r1 {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; height: 45px;
}
.t4 .section.t4h-cs .row.t4h-cs-r1 > .col.t4h-cs-nhan {
  flex: 1 1 auto; max-width: none; padding: 0;
}
.t4 .section.t4h-cs .row.t4h-cs-r1 > .col.t4h-cs-xem-o {
  flex: 0 0 auto; width: auto; max-width: none; padding: 0;
}
/* Chip của khối này lệch hai thông số so với mô-típ chung — khai đúng hai
   thông số đó, không chép lại cả khối. */
.t4 .section-content .text.t4h-cs-lb { margin-bottom: 0; }
.t4 .t4h-cs-lb > p { line-height: 19.124px; letter-spacing: .14px; }

/* Nút "Xem tất cả": phần tử Button thật. Flatsome tự bọc chữ trong <span> —
   đúng thứ bộ ghép cần (nó chọn phần tử SÂU NHẤT chứa chuỗi; không có <span>
   thì nó đo hộp <a> cao 35 trong khi lớp Figma là LỚP CHỮ cao 19, lệch cứng
   5px ở mọi cặp có nút này). Trước đây phải tự viết <a><span>; nay được sẵn.
   Phần dưới chỉ trung hoà kiểu mặc định của Flatsome. */
/* 'display: inline-flex' chứ không phải 'flex': nút cấp khối sẽ rộng bằng
   cả cột, và vì cột lấy bề rộng theo nội dung nên hai bên kéo nhau ra 1080px. */
.t4 .section.t4h-cs a.button.t4h-cs-xem {
  box-sizing: border-box; display: inline-flex; width: auto; align-items: center;
  justify-content: center; min-height: 0; height: 35px; padding: 8px 30px;
  margin: 0; border-radius: 5px; box-shadow: none;
  background-color: transparent; border: 1px solid var(--t4-dark-moss);
  color: var(--t4-dark-moss);
  font-family: var(--t4-font-body); font-weight: 700; font-size: 14px;
  line-height: 19.124px; letter-spacing: 0; text-transform: none;
  text-decoration: none; white-space: nowrap;
}
.t4 .section.t4h-cs a.button.t4h-cs-xem > span { display: block; line-height: 19.124px; }

/* [figma] '271:1610' — Heading 2 → Remarkable results for
every · 316×53 · trang1·case
   (lớp DUY NHẤT rộng 316px trong figma-spec/trang1.json) */
/* Hàng tiêu đề: H2 trái 316 · đoạn phải 511, hai mép chạm hai mép khung */
.t4 .section.t4h-cs .row.t4h-cs-r2 {
  display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start;
}
.t4 .section.t4h-cs .row.t4h-cs-r2 > .col { padding: 0; }
.t4 .section.t4h-cs .col.t4h-cs-h2 { flex: 0 0 316px; max-width: 316px; }
.t4 .t4h-cs-h2 h2 {
  font-family: var(--t4-font-head); font-weight: 600;
  font-size: 40px; line-height: 53px; color: var(--t4-dark-moss);
  margin: 0; letter-spacing: 0;
}
.t4 .section.t4h-cs .col.t4h-cs-mo { flex: 0 0 511px; max-width: 511px; }
.t4 .t4h-cs-mo p {
  font-family: var(--t4-font-body); font-weight: 400;
  font-size: 16px; line-height: 26px; color: var(--t4-text); margin: 0;
  height: 90px;   /* hộp Figma cao hơn ba dòng chữ (78) */
}

/* [figma] 'I547:5075;547:4902' — Tablist · 1080×54 · trang1·case
   (lớp DUY NHẤT rộng 1080px trong figma-spec/trang1.json) */
/* ── tab ──────────────────────────────────────────────────────────────── */
.t4 .t4h-cs-tabs { max-width: 1080px; margin: 0 auto; }
.t4 .t4h-cs-tabs .nav-line {
  justify-content: center; margin: 0; border: 0; flex-wrap: nowrap;
}
.t4 .t4h-cs-tabs .nav-line > li { margin: 0; }
.t4 .t4h-cs-tabs .nav-line > li > a {
  box-sizing: border-box; height: 54px; padding: 12px 16px; margin: 0;
  border-bottom: 4px solid transparent; border-radius: 0;
  font-family: var(--t4-font-body); font-weight: 500; font-size: 16px;
  line-height: 30px; text-transform: none; letter-spacing: 0;
  color: rgba(0, 0, 0, .62); white-space: nowrap;
}
.t4 .t4h-cs-tabs .nav-line > li > a::before { display: none; }
.t4 .t4h-cs-tabs .nav-line > li.active > a {
  color: var(--t4-text); border-bottom-color: var(--t4-camel);
}
.t4 .t4h-cs-tabs .tab-panels > .panel { display: none; }
.t4 .t4h-cs-tabs .tab-panels > .panel.active { display: block; }
/* Khe Figma giữa hàng tab và bảng: 393 − 369 = 24 */
.t4 .t4h-cs-tabs .tab-panels {
  margin-top: 24px; padding: 0; border: 0; background: none;
}
.t4 .t4h-cs-panel {
  /* đệm TRỪ 1px viền — cùng lý do đã ghi ở thẻ Dịch vụ (21.4) */
  box-sizing: border-box; min-height: 492px; padding: 31px 24px;
  background: var(--t4-white); border: 1px solid rgba(0, 0, 0, .11);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 15px;
}
/* Ruột bảng rộng 1014 CĂN GIỮA trong lòng 1028 của thẻ — Figma để dư 8px
   mỗi bên ngoài đệm 25. Bỏ qua là mọi thứ trong bảng lệch trái 7px. */
.t4 .t4h-cs-tren, .t4 .t4h-cs-so { width: 1014px; margin: 0 auto; }
.t4 .t4h-cs-tren { display: flex; gap: 40px; align-items: flex-start; }
.t4 .t4h-cs-anh-o { flex: 0 0 503px; }
.t4 .t4h-cs-anh {
  display: block; width: 503px; height: 330px; object-fit: cover;
  border-radius: 4px;
}
.t4 .t4h-cs-phai { flex: 0 0 471px; display: flex; flex-direction: column; gap: 28px; }
.t4 .t4h-cs-p {
  font-family: var(--t4-font-body); font-weight: 400; font-size: 16px;
  line-height: 26px; color: var(--t4-text); margin: 0; height: 187px;
}
.t4 .t4h-cs-ng { width: 313px; }
.t4 .t4h-cs-ten, .t4 .t4h-cs-doc-o {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 16px;
  line-height: 30px; color: var(--t4-text); margin: 0;
}
.t4 .t4h-cs-cv {
  font-family: var(--t4-font-body); font-weight: 400; font-size: 16px;
  line-height: 26px; color: var(--t4-text); margin: 0;
}
/* 'display: block' là bắt buộc: hộp của một <a> INLINE chỉ cao bằng khung
   chữ (~22px) chứ không bằng hộp dòng 30px, nên mọi khoảng cách đo từ nó
   lệch ~4px trong khi trang vẽ đúng. */
.t4 .t4h-cs-doc { color: inherit; text-decoration: none; font: inherit; display: block; }
/* Hai khối số: Figma dàn ngang khe 149, hai bên chừa 67 ⇒ căn giữa */
.t4 .t4h-cs-so { display: flex; justify-content: center; gap: 149px; }
.t4 .t4h-cs-o1 { flex: 0 0 416px; }
.t4 .t4h-cs-o2 { flex: 0 0 315px; }
.t4 .t4h-cs-num {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 40px;
  line-height: 54.64px; color: var(--t4-text); margin: 0; text-align: center;
  height: 55px;
}
.t4 .t4h-cs-cap {
  font-family: var(--t4-font-body); font-weight: 400; font-size: 16px;
  line-height: 26px; color: var(--t4-text); margin: 0; text-align: center;
  height: 28px;   /* hộp Figma 28 cho một dòng 26 */
}
.t4 .t4h-cs-cho p { font-family: var(--t4-font-body); font-size: 16px; margin: 0; }

@media (max-width: 849px) {
  .t4 .section.t4h-cs { min-height: 1140px; }
  .t4 .section.t4h-cs .section-content { padding: 60px 0; }
  .t4 .section.t4h-cs .section-content > .row.row-collapse { max-width: 342px; }
  /* Khối tab tràn HẾT KHỔ 402 (Figma đặt instance ở x=0) — gỡ đủ ba thứ */
  .t4 .section.t4h-cs .section-content > .row.t4h-cs-r3 {
    width: auto; max-width: none; margin-left: 0; margin-right: 0; margin-top: 32px;
  }
  .t4 .t4h-cs-tabs { max-width: none; }

/* [figma] '1015:18535' — Link · 120×29 · trang1·case_mb
   (lớp DUY NHẤT rộng 120px trong figma-spec/trang1.json) */
  /* Figma mobile: nút "Xem tất cả" KHÔNG có đệm, hộp 120×29 (desktop 132×35
     đệm 8/30). Không phải cùng một nút thu nhỏ. */
  .t4 .section.t4h-cs a.button.t4h-cs-xem { width: 120px; height: 29px; padding: 0; }
  /* Mô-típ chung hạ chip xuống 13px ở mobile; Figma khối Casestudy giữ 14. */
  .t4 .t4h-cs-lb > p { font-size: 14px; }
  .t4 .section.t4h-cs .row.t4h-cs-r2 { display: block; }
  .t4 .section.t4h-cs .col.t4h-cs-h2,
  .t4 .section.t4h-cs .col.t4h-cs-mo { flex: none; max-width: none; }
  .t4 .t4h-cs-h2 h2 { font-size: 32px; line-height: 42.656px; }
  .t4 .section-content .col.t4h-cs-mo { margin-top: 8px; }

/* [figma] trang1 · section case_mb — section DUY NHẤT chứa đủ
   bộ bề rộng của cụm này: 160px→'I1093:8184;1093:7988' (+5) · 313px→'I1093:8184;1093:7983' (+3) · 352px→'I1093:8184;1093:7979' (+4)
   (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) */
  .t4 .t4h-cs-tabs .nav-line {
    justify-content: flex-start; overflow-x: auto; padding: 0 25px;
    -webkit-overflow-scrolling: touch;
  }
  .t4 .t4h-cs-tabs .nav-line::-webkit-scrollbar { display: none; }
  .t4 .t4h-cs-panel { min-height: 662px; padding: 31px 24px; }
  .t4 .t4h-cs-tren { display: block; }
  .t4 .t4h-cs-anh-o { margin: 0; }
  .t4 .t4h-cs-anh { width: 100%; height: 230px; }
  .t4 .t4h-cs-phai { display: block; margin-top: 24px; }
  .t4 .t4h-cs-p { font-size: 14px; line-height: 22px; height: 110px; }
  .t4 .t4h-cs-ng { width: 313px; margin-top: 16px; }
  .t4 .t4h-cs-cv { font-size: 14px; line-height: 22px; }
  .t4 .t4h-cs-tren, .t4 .t4h-cs-so { width: 352px; }
  .t4 .t4h-cs-so { justify-content: flex-start; gap: 32px; }
  .t4 .t4h-cs-o1, .t4 .t4h-cs-o2 { flex: 0 0 160px; }
  .t4 .t4h-cs-cap { font-size: 14px; line-height: 22px; height: auto; }
  .t4 .t4h-cs-mo p { height: auto; }
}

/* 21.7 LIÊN HỆ — Figma 962:12048 (1900×747) · 1093:8637 (402×767) -----------
   Hai băng: băng ảnh (0..491) + kẻ ngang + băng thông tin nền kem (492..739).
   Section cao 747, tức dôi 8px dưới đáy băng hai — Figma khai vậy, giữ đúng.

   ⚠ "Bản đồ nhúng" mà CLAUDE.md nhắc thực ra là ẢNH TĨNH trong Figma (một
   'Basemap image' + ghim vector), không phải iframe Google Maps. Bám Figma:
   xuất cả khung bản đồ (đã gồm ghim) ở 2× rồi dùng làm ảnh.

   ⚠ Khối chữ trái: khe giữa cụm giới thiệu và cụm chứng nhận là **29**, không
   phải 49 như 'itemSpacing' khai — lấy theo TOẠ ĐỘ thật của hai cụm
   (244 → 273). Đây là chỗ số khai và số dựng của Figma lệch nhau.

   Mốc dọc Figma:
     desktop  H2 125 (55) · giới thiệu 188 (56) · Chứng nhận 273 · huy hiệu 317
              kẻ 491 · nhãn cột 524 (35) · ruột 567
     mobile   H2 64 (55) · giới thiệu 127 (84) · Chứng nhận 235 · bản đồ 235
              kẻ 487 · nhãn cột 512 (35) · ruột 551
   -------------------------------------------------------------------------- */
.t4 .section.t4h-lh {
  min-height: 747px; padding: 0; align-items: flex-start;
  background: var(--t4-light);
}
.t4 .section.t4h-lh .section-content { padding: 0; }
/* Gỡ khung 1080 + đệm cột cho MỌI row/col trong section — kể cả row lồng.
   Bản trước chỉ gỡ cho '> .row > .col' vì cả section nằm trong một ô văn bản;
   nay đã dựng bằng row/col thật nên phải phủ cả cấp lồng. */
.t4 .section.t4h-lh .row { max-width: none; width: auto; margin: 0; }
.t4 .section.t4h-lh .col,
.t4 .section.t4h-lh .col-inner { padding: 0; }

/* ⛔⛔ HAI DẢI TRÀN VIỀN PHẢI THẮNG BẰNG ĐỘ CỤ THỂ, KHÔNG PHẢI BẰNG THỨ TỰ.
   Luật ngay trên ('.t4 .section.t4h-lh .row', 4 lớp) THUA luật này của
   '40-page-xu-ly-loi-sai-google-ads.css':

     .t4 .section:where(:not(.t4fx-footer)) .section-content > .row.row-collapse
       { max-width: 1080px }        ← 5 lớp (':where()' đếm 0)

   Thua IM LẶNG. Hậu quả đo được ngày 17/08/2026: băng ảnh '.t4h-lh-tren' rộng
   1080 thay vì 1900 ⇒ (a) ảnh lá chỉ phủ 1080 rồi cụt, (b) 'padding-left'
   tính theo % của KHỐI CHỨA (1900) nên cột chữ vẫn đúng x=410, nhưng bản đồ
   'position:absolute' lại tính % theo CHÍNH ROW (1080) nên rơi về x=566 thay
   vì 976 — **đè lên chữ**. Bảng dày cho 0 ❌ vì nó chỉ so khoảng cách giữa hai
   mốc chữ LIỀN KỀ, mà cả cụm dịch đều (điểm mù II.C). Chỉ ảnh nhiệt thấy.

   ⚠ CHỈ hai dải này tràn viền. '.t4h-lh-duoi' giữ khung 1080 căn giữa vì
   Figma vẽ nội dung hàng dưới ở x=410 w=1080 (chỉ NỀN mới phủ 1900).

   ⚠ Bộ chọn toàn cục nằm trong tệp của MỘT trang là vi phạm III.4.0 luật
   KHÔNG ĐỘNG CHẠM — đã ghi vào việc cần dọn, chưa dời được vì dời là đổi
   tầng bậc cho mọi trang (III.4.5). */
.t4 .section.t4h-lh .section-content > .row.t4h-lh-tren,
.t4 .section.t4h-lh .section-content > .row.t4h-lh-r-ke {
  max-width: none; width: 100%;
}

/* [figma] trang1 · section lienhe — 4 lớp rộng 534px: 'I962:12048;962:11572' · 'I962:12048;962:11573' · 'I962:12048;962:11574' … còn 1
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 1 để chọn) */
/* ── băng ảnh ─────────────────────────────────────────────────────────── */
.t4 .section.t4h-lh .row.t4h-lh-tren {
  position: relative; box-sizing: border-box; min-height: 491px;
  /* [phục vụ] Nền băng ảnh khổ 1900.
     Bản cũ 'index-lien-he-bg-scaled.jpg' rộng 2560 phục vụ ô 1900 chỉ được
     **1,35×**, dưới cận dưới 1,5× ⇒ MỜ trên màn retina. Không phải ca "hết
     tư liệu": ảnh GỐC 'index-lien-he-bg.jpg' còn nguyên 3840×2880 — hậu tố
     '-scaled' chính là dấu WordPress đã tự hạ cỡ xuống 2560 theo
     'big_image_size_threshold'.
     Bản này 3800×2850 = đúng **2,00×**.
     ⚠ ĐÁNH ĐỔI ĐÃ ĐƯỢC 4T DUYỆT (21/08/2026): nét 1,35× → 2,00× nhưng nặng
     thêm 276 KB (428 → 704 KB). Hai ràng buộc "không nặng web" và "không đổi
     byte lấy độ nét" kéo ngược nhau ở đúng chỗ này nên đây là quyết định của
     4T, không phải của máy. */
  background: url(https://demo1.tiepthitute.com/wp-content/uploads/2026/08/index-lien-he-bg-dt-q84.webp)
              center / cover no-repeat;
  /* Cột chữ ghim ở x=410 (mép trái khung 1080), KHÔNG căn giữa: bản đồ đã
     tách ra đặt tuyệt đối nên căn giữa sẽ đẩy cột chữ vào giữa trang. */
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start;
  padding: 64px 0 64px calc(50% - 540px);
}
.t4 .section.t4h-lh .col.t4h-lh-trai { flex: 0 0 534px; max-width: 534px; }
.t4 .t4h-lh-h2 h2 {
  font-family: var(--t4-font-head); font-weight: 700; font-size: 40px;
  line-height: 53.32px; height: 55px; display: flex; align-items: center;
  color: var(--t4-white); margin: 0; letter-spacing: 0;
}
.t4 .t4h-lh-dkkd p {
  font-family: var(--t4-font-body); font-weight: 600; font-size: 16px;
  line-height: 28px; color: var(--t4-white); margin: 0;
}
.t4 .section-content .text.t4h-lh-dkkd { margin-top: 8px; }
.t4 .t4h-lh-cn-nhan p {
  font-family: var(--t4-font-body); font-weight: 600; font-size: 16px;
  line-height: 21.856px; height: 22px; color: var(--t4-white); margin: 0;
}
.t4 .section-content .text.t4h-lh-cn-nhan { margin-top: 29px; }
.t4 .section.t4h-lh .row.t4h-lh-badge {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 25px;
  margin-top: 22px; height: 48px; width: 457px;
}
/* ⛔ BẪY II.H-4 LẠI TÁI DIỄN: '.row::after' clearfix của Flatsome trở thành
   MỘT PHẦN TỬ FLEX NỮA khi ta cho row 'display: flex'. Ở đây row huy hiệu là
   cột dọc gap 24 ⇒ nó cộng thêm đúng MỘT khe 24px vào đáy: khối cao 167,39
   trong khi huy hiệu cuối chỉ kết ở 143,39. Băng ảnh mobile vì thế dôi 24px
   và mốc "Google Partner → DIRECT CONTACT" lệch. Không thấy được trên ảnh vì
   đó là khoảng trống trong suốt. */
.t4 .section.t4h-lh .row.t4h-lh-badge::after { content: none; display: none; }
/* ⛔ 'width: auto' PHẢI CÓ. 'flex: 0 0 auto' lấy bề rộng từ thuộc tính
   'width', mà '.col' của Flatsome mang sẵn 'width: 100%' ⇒ cả ba huy hiệu
   rộng bằng nhau 457px, đứng cách nhau 482 (457 + gap 25) và trải tới
   x=1374 — DMCA rơi ra ngoài băng ảnh, Bộ Công Thương lạc sang tận mép phải.
   Figma: Google Partner 171 · DMCA 120,6 · BCT 115, gap 25 ⇒ đúng 456,6. */
.t4 .section.t4h-lh .row.t4h-lh-badge > .col { flex: 0 0 auto; width: auto; max-width: none; }
.t4 .section.t4h-lh .row.t4h-lh-badge > .col > .col-inner,
.t4 .section.t4h-lh .row.t4h-lh-badge .img,
.t4 .section.t4h-lh .row.t4h-lh-badge .img-inner { width: auto; }
/* ⚠ Biểu tượng Google là NỀN CSS, KHÔNG phải thẻ <img> — và đây là lý do kỹ
   thuật, không phải lười: bên Figma nó là một VECTOR chứ không phải lớp ảnh.
   Cho nó thành '[ux_image]' là site dư một ảnh so với Figma và phép ghép ảnh
   theo thứ tự trượt hết từ đó trở đi.
   Trước đây nó là '<span class="t4h-lh-gg">' nhét trong ô văn bản — vi phạm
   III.2. Nay vẽ bằng '::before' của chính ô văn bản, nên ô chỉ còn chữ thuần
   "Google Partner" mà hình vẽ ra vẫn y hệt. */
.t4 .t4h-lh-gp { display: flex; align-items: center; gap: 8px; width: 171px; position: relative; }
.t4 .t4h-lh-gp::before {
  content: ""; display: block; width: 48px; height: 48px; flex: 0 0 48px;
  background: url(https://demo1.tiepthitute.com/wp-content/uploads/2026/08/shared-icon-google-partner.svg)
              center / contain no-repeat;
}
.t4 .t4h-lh-gp p {
  font-family: 'Google Sans', var(--t4-font-body); font-weight: 500;
  font-size: 16px; line-height: 20px; color: var(--t4-white); width: 115px;
  margin: 0;
}
/* [phục vụ] phần tử: Text (ux_text) | khối: badge Google Partner "lien-he-home"
   [trang] index | [figma] node I962:12048;962:11579, khung 171x48
   [lý do vượt panel] cần đấu nối href cho cả badge, panel Text không có ô link
   riêng cho khối text+::before; vùng chạm 24px WCAG 2.5.8 — <a> chỉ bọc chữ
   thì hộp chỉ cao ~20px, phải phủ TOÀN badge (icon + chữ) bằng absolute inset:0
   neo vào chính '.t4h-lh-gp' (đã có position:relative ở trên), tự co giãn đúng
   cỡ mobile 101.3x28.4 mà không cần viết lại cho khổ nhỏ. */
.t4 .t4h-lh-gp p a { position: absolute; inset: 0; }
.t4 .t4h-lh-dmca img { display: block; width: 121px !important; height: 35px !important; max-width: none; }
.t4 .t4h-lh-bct  img { display: block; width: 115px !important; height: 44px !important; max-width: none; }
/* ⚠ Bản đồ ĐẶT TUYỆT ĐỐI ở khổ desktop. Trong DOM nó phải nằm CẠNH khối
   "Chứng nhận" vì khổ mobile Figma xếp hai thứ đó thành một hàng ngang; còn
   ở desktop nó lại nằm ngoài cột chữ 534, tại x=976 — tức +26 so với tâm
   trang (tâm 950). Đặt tuyệt đối là cách duy nhất thoả cả hai mà không phải
   viết hai bản HTML.
   Figma cắt khung 514×363 bo 10 trong khi ảnh nền 524×370 ⇒ 'cover'. */
.t4 .section.t4h-lh .col.t4h-lh-map {
  position: absolute; left: calc(50% + 26px); top: 64px;
  width: 514px; height: 363px; border-radius: 10px; overflow: hidden;
  flex: 0 0 auto; max-width: none;
}
/* 'max-width: none' bắt buộc — Flatsome đặt 'img { max-width: 100% }', nên
   ảnh 524 bị bó về 514 của khung cắt và không còn khớp lớp Figma. */
.t4 .t4h-lh-map img { display: block; width: 524px !important; height: 370px !important; max-width: none; }
/* Ghim bản đồ là VECTOR riêng của Figma. Trước đây là '<span>' trong ô văn
   bản (vi phạm III.2); nay là '::after' của chính cột bản đồ. */
.t4 .t4h-lh-map::after {
  content: ""; position: absolute; left: 253px; top: 139px; width: 36px; height: 46px; z-index: 2;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iNDYiIHZpZXdCb3g9IjAgMCAzNiA0NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMF8yNCkiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTcuMDE1MyA0NC40MjI3QzE3LjkwNDQgNDQuNDIyNyAzMy43OTIzIDI3LjA3MDEgMzMuNzkyMyAxNy41OTg1QzMzLjc5MjMgOC4xMjY5NiAyNi4yODA5IDAuNDQ4NzMgMTcuMDE1MyAwLjQ0ODczQzcuNzQ5NTggMC40NDg3MyAwLjIzODI4MSA4LjEyNjk2IDAuMjM4MjgxIDE3LjU5ODVDMC4yMzgyODEgMjcuMDcwMSAxNi4xMjYxIDQ0LjQyMjcgMTcuMDE1MyA0NC40MjI3Wk0xNy4wMTUzIDI2LjE3NjNDMjEuNzEzIDI2LjE3NjMgMjUuNTIxMyAyMi4yODM0IDI1LjUyMTMgMTcuNDgxM0MyNS41MjEzIDEyLjY3OTIgMjEuNzEzIDguNzg2MyAxNy4wMTUzIDguNzg2M0MxMi4zMTc2IDguNzg2MyA4LjUwOTM3IDEyLjY3OTIgOC41MDkzNyAxNy40ODEzQzguNTA5MzcgMjIuMjgzNCAxMi4zMTc2IDI2LjE3NjMgMTcuMDE1MyAyNi4xNzYzWiIgZmlsbD0iI0I3NzUzNyIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC4yMzgyODEgMTcuNTk4NUMwLjIzODI4MSAyNy4wNzAxIDE2LjEyNjEgNDQuNDIyNyAxNy4wMTUzIDQ0LjQyMjdWMjYuMTc2M0MxMi4zMTc2IDI2LjE3NjEgOC41MDkzNyAyMi4yODMzIDguNTA5MzcgMTcuNDgxM0M4LjUwOTM3IDEyLjY3OTIgMTIuMzE3NiA4Ljc4NjMyIDE3LjAxNTMgOC43ODYzVjAuNDQ4NzNDNy43NDk1OCAwLjQ0ODczIDAuMjM4MjgxIDguMTI2OTYgMC4yMzgyODEgMTcuNTk4NVoiIGZpbGw9IiNDRjkxNTYiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF8wXzI0Ij48cmVjdCB3aWR0aD0iMzYiIGhlaWdodD0iNDYiIGZpbGw9IndoaXRlIi8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+") center / contain no-repeat;
}

/* Kẻ ngang: nay là phần tử Divider thật, không còn <div> rỗng.

   ⛔⛔ '[divider]' KHÔNG CÓ THUỘC TÍNH 'class' — khác hầu hết phần tử Flatsome.
   Đọc 'titles_dividers.php': 'shortcode_atts' của nó chỉ nhận width · height ·
   margin · align · color, rồi trả về cứng '<div class="is-divider divider
   clearfix">'. Viết '[divider class="…"]' thì WordPress NUỐT IM LẶNG thuộc
   tính đó — không lỗi, không cảnh báo — nên mọi luật bám class ấy không bao
   giờ khớp, và kẻ ngang giữ nguyên mặc định 'height:3px; margin:1em auto' của
   Flatsome. Đo ra đúng +34px ở khe "Google Partner → DIRECT CONTACT".
   → Bám qua class của ROW bọc ngoài (row thì CÓ nhận class). */
.t4 .section.t4h-lh .row.t4h-lh-r-ke { width: 100%; }
.t4 .t4h-lh-r-ke .is-divider {
  height: 1px; background-color: rgba(255, 255, 255, .4);
  max-width: none; width: 100%; margin: 0;
}

/* [figma] 'I962:12048;962:11592' — Frame 1707479562 · 1080×175 · trang1·lienhe
   (lớp DUY NHẤT rộng 1080px trong figma-spec/trang1.json) */
/* ── băng thông tin ───────────────────────────────────────────────────── */
/* Nền của băng này TRÙNG với nền section ('--t4-light') nên không khai lại:
   khai lại thì phải dựng thêm một lớp bọc full-bleed chỉ để tô đúng màu đang
   có sẵn. Row này vì thế ôm luôn vai trò khung 1080 của '.t4h-lh-hang' cũ. */
.t4 .section.t4h-lh .row.t4h-lh-duoi {
  width: 1080px; margin: 0 auto; padding: 32px 0 40px;
  display: flex; flex-wrap: nowrap; gap: 48px; align-items: flex-start;
}
.t4 .section.t4h-lh .row.t4h-lh-duoi > .col.t4h-lh-cot {
  flex: 0 0 328px; max-width: 328px; position: relative;
}
/* ⚠ Kẻ dọc của Figma rộng ĐÚNG 0 (Vector 8284 w=0). Viền 1px của CSS thì
   chiếm chỗ thật, đẩy cột 2 lệch 1px và cột 3 lệch 2px. Nay vẽ bằng
   '::before' đặt tuyệt đối nên nó KHÔNG chiếm chỗ trong luồng — vừa đúng
   Figma, vừa bỏ được hai <div> rỗng khỏi ô văn bản. */
.t4 .t4h-lh-c2::before,
.t4 .t4h-lh-c3::before {
  content: ""; position: absolute; left: -24px; top: 0;
  width: 1px; height: 175px; background: #777;
}
.t4 .t4h-lh-cot .text.t4h-lh-cot-nhan p {
  font-family: var(--t4-font-body); font-weight: 800; font-size: 20px;
  line-height: 35px; color: var(--t4-camel); margin: 0;
}
/* ⚠ Chữ băng dưới là ĐEN 62%, không phải đen đặc: Figma đặt 'opacity: 0.62'
   ở FRAME cha nên mọi lớp chữ bên trong đều nhân với nó. Đọc mã màu của lớp
   chữ thôi (#000000) là sai — đúng cái bẫy số 1 của Giai đoạn C. */
.t4 .t4h-lh-cot .text p {
  font-family: var(--t4-font-body); font-weight: 500; font-size: 14px;
  line-height: 28px; color: rgba(0, 0, 0, .62); margin: 0;
}
/* Nhãn in đậm nay là '<strong>' — thẻ nằm trong whitelist III.2 — thay cho
   '<p class="t4h-lh-dam">' gõ tay. */
.t4 .t4h-lh-cot .text strong { font-weight: 800; white-space: nowrap; }
.t4 .section-content .text.t4h-lh-dc1 { margin-top: 8px; }
.t4 .section-content .text.t4h-lh-doi { margin-top: 8px; }
.t4 .section-content .text.t4h-lh-kh  { margin-top: 8px; }
.t4 .section-content .text.t4h-lh-doan { margin-top: 0; }
/* Hai cặp Hotline / Mail nằm NGANG; cặp Address xếp dọc. */
.t4 .t4h-lh-doi { display: flex; gap: 8px; }
.t4 .t4h-lh-cot .text.t4h-lh-doan p { line-height: 26px; }

@media (max-width: 849px) {
  .t4 .section.t4h-lh { min-height: 767px; }
  .t4 .section.t4h-lh .row.t4h-lh-tren {
    /* Figma mobile: băng ảnh cao **487** (kẻ ngang y=487), đệm trên và dưới
       ĐỀU LÀ 64 — huy hiệu cuối kết ở 423,2 + 63,8 = 487.
       ⚠ Trước đây đệm đáy là 89 và min-height 431: hai con số BÙ cho việc cụm
       huy hiệu đang sai chỗ (chữ "Google Partner" bẻ hai dòng, khe giữa các
       huy hiệu 8 thay vì 24). Ghi chú cũ ở đây còn giải thích cách cộng hai
       khe "ràng buộc ngược chiều" — nay không còn ràng buộc nào: sửa đúng
       nguyên nhân thì đệm trở lại đối xứng như Figma. */
    min-height: 487px; padding: 64px 25px 63.8px; display: block;
    /* [phục vụ] Nền băng ảnh khổ 402 — bản riêng cho mobile.
       Tệp desktop 'index-lien-he-bg-scaled.jpg' rộng 2560 phục vụ ô 402 là
       **6,37×**, tức tải 428 KB để vẽ một ô rộng 402. Bản này 804×603 (đúng
       2,00×) chỉ **61 KB** — bớt 367 KB cho mọi lượt mở trên điện thoại.
       Sinh từ ẢNH GỐC 3840×2880 ('index-lien-he-bg.jpg'), không phải từ bản
       '-scaled' đã hạ cỡ, nên không nén chồng hai lần.

       ⛔ PHẢI LÀ q96, ĐỪNG HẠ XUỐNG q90 CHO NHẸ. Đã thử q90 (23 KB): ảnh nhiệt
       trông SẠCH và số 'nặng' còn tốt lên, nhưng đầu dò màu nhảy
       **ΔE 0,64 → 2,56**, vượt ngưỡng 2,5 và chặn đứng chặng 3. Nền này là một
       mảng phẳng màu nhạt, đúng thứ mà lấy mẫu chroma của webp lossy làm lệch
       sắc — mắt gần như không thấy, ΔE thì thấy ngay. q96 đưa ΔE về đúng 0,64
       như cũ. Đây cũng là lý do cặp hero ở trên để mobile q96 còn desktop q84:
       KHÔNG phải con số tuỳ tiện. */
    background-image: url(https://demo1.tiepthitute.com/wp-content/uploads/2026/08/index-lien-he-bg-mb-q96.webp);
  }
  .t4 .section.t4h-lh .col.t4h-lh-trai { flex: none; max-width: none; width: 352px; }
  .t4 .t4h-lh-h2 h2 { font-size: 32px; line-height: 42.656px; height: 55px; }
  .t4 .t4h-lh-dkkd p { font-size: 14px; }
  /* Khe "giới thiệu → Chứng nhận" ở mobile là **24**, không phải 29 của
     desktop (Figma mobile: dkkd 127+84 = 211 → "Chứng nhận" 235).
     Luật gốc khai 29 cho toàn site nên mobile dôi 5px, và vì cụm huy hiệu
     nằm ngay dưới nên cả ba huy hiệu tụt theo đúng 5px. */
  .t4 .section-content .text.t4h-lh-cn-nhan { margin-top: 24px; }
  /* Figma mobile 'Frame 181': dọc, **gap 24** (279 → 331,4 → 384,9 khớp cả
     hai khe). Trước để 8 nên hai huy hiệu dưới leo lên. */
  .t4 .section.t4h-lh .row.t4h-lh-badge {
    width: 154px; flex-direction: column; align-items: flex-start;
    gap: 24px; height: auto; margin-top: 22.22px;
  }
  /* ⛔ CHỮ "Google Partner" LÀ MỘT DÒNG. Figma khai khung 'Frame 154' rộng
     101,3 nhưng lớp chữ nằm ở x=65 rộng 87 ⇒ **tràn ra ngoài khung 26px** —
     Figma cho phép, và bản render của chính Figma vẽ một dòng.
     Bó 'width: 101px' cho cả cụm mà không ghim bề rộng chữ thì icon 36 + khe
     4 + chữ 87 = 127 > 101, chữ bị co và **bẻ làm hai dòng**; cụm cao thêm
     ~12px kéo DMCA và Bộ Công Thương leo lên theo. Đó là vùng đỏ liền khối
     102×91 tại (25,332) của ảnh nhiệt — bảng dày không thấy vì nó chỉ so
     khoảng cách giữa hai mốc chữ liền kề. */
  .t4 .t4h-lh-gp { width: 101.3px; gap: 4px; height: 28.4px; align-items: center; }
  .t4 .t4h-lh-gp::before { width: 36px; height: 36px; flex: 0 0 36px; }
  .t4 .t4h-lh-gp p { flex: 0 0 87px; width: 87px; height: 15px;
                     display: flex; align-items: center; white-space: nowrap;
                     font-size: 12px; line-height: 15px; }
  .t4 .t4h-lh-dmca img { width: 101px !important; height: 29px !important; }
  .t4 .t4h-lh-bct  img { width: 101px !important; height: 38px !important; }
  /* Figma mobile xếp [Chứng nhận + huy hiệu] và [bản đồ] thành MỘT hàng
     ngang, cùng mốc y=235. Cấu trúc mới để bản đồ là cột anh em của cột chữ
     nên theo luồng nó rơi xuống dưới — giữ đặt tuyệt đối như desktop, chỉ
     đổi toạ độ. Băng '.t4h-lh-tren' đã 'position: relative'. */
  .t4 .section.t4h-lh .col.t4h-lh-map {
    position: absolute; left: auto; right: 25px; top: 235px;
    width: 100px; height: 188px;
  }
  .t4 .t4h-lh-map img { width: 100px !important; height: 188px !important; object-fit: cover; }
  .t4 .t4h-lh-map::after { left: 37px; top: 48px; }
  /* ⛔ XẾP DỌC — 4T chốt PHƯƠNG ÁN B ngày 18/08/2026.
     Figma mobile (1093:8637, khung 402) đặt ba cột ở x = 25 · 277 · 529, mỗi
     cột rộng 220 ⇒ cột 2 và 3 nằm HẲN ngoài khung: "MEDIA CONTACT" cụt giữa
     chừng, "BETTER TOGETHER" biến mất. 4T chụp iPhone thật gửi về đúng cảnh
     đó, và chốt đây là **sơ suất của bản thiết kế khi thu desktop xuống
     mobile**, không phải dải cuộn ngang có chủ ý.
     → Xếp dọc, mỗi cột một hàng, đủ bề rộng nội dung. Ghi
     'qa/phan-hoi-figma.md' để designer sửa tận gốc.
     ⚠ Đây là chỗ site CỐ Ý khác Figma — bảng đo sẽ báo lệch ở ba mốc 'x' của
     ba cột, và đó là lệch ĐÚNG. Khai vào qa/mien-tru.json. */
  .t4 .section.t4h-lh .row.t4h-lh-duoi {
    width: 100%; max-width: none; padding: 24px 25px 32px;
    display: flex; flex-direction: column; gap: 32px;
  }
  .t4 .section.t4h-lh .row.t4h-lh-duoi > .col.t4h-lh-cot {
    flex: 0 0 auto; max-width: none; width: 100%;
  }
  /* Kẻ dọc ngăn cột (Figma vẽ bên trái cột 2 và 3) không còn nghĩa khi xếp
     dọc — đổi thành kẻ NGANG phía trên mỗi cột sau. */
  .t4 .t4h-lh-c2::before, .t4 .t4h-lh-c3::before {
    width: 100%; height: 1px; left: 0; top: -16px;
  }
  /* ⛔ HAI LUẬT CŨ ĐÃ BỎ 18/08/2026 — chúng đứng SAU luật xếp dọc ở trên và
     ĐÈ nó bằng độ cụ thể BẰNG NHAU (đúng cái bẫy đã ghi ở bàn giao 17g §5):
       · 'flex: 0 0 220px' giữ cột hẹp 220 dù đã xếp dọc, chữ xuống dòng sớm;
       · 'height: 223px' biến kẻ ngăn thành một KHỐI XÁM #777 cao 223px phủ
         lên chữ của hai cột dưới — nhìn ảnh chụp mới thấy, bảng số im lặng.
     Số của cả hai nay khai ở khối xếp dọc phía trên. */
  .t4 .section-content .text.t4h-lh-dc1 { margin-top: 4px; }
  .t4 .section-content .text.t4h-lh-doi { margin-top: 0; }
  .t4 .section-content .text.t4h-lh-kh  { margin-top: 4px; }
  /* Figma cho lớp nhãn này bề rộng KHỐI 220 (cả cột), không phải bề rộng chữ.
     '<strong>' là inline nên đo ra bề rộng chữ 165 — cho nó thành khối để
     khớp đúng lớp Figma. Chỉ ở mobile: bản desktop Figma khai bề rộng CHỮ và
     đang khớp, đổi cả hai khổ là làm hỏng bản đang đúng. */
  .t4 .t4h-lh-kh strong { display: block; }
}



/* ══ POPUP DỊCH VỤ (overlay Figma) ═══════════════════════════════════════
   Figma đấu `ON_CLICK → OVERLAY` cho 5 nút "Xem chi tiết" của mục Dịch vụ.
   Node: 159:3747 (chính) · 159:3629 (02) · 159:3678 (03) · 159:2508 (04) ·
   159:3444 (05). Trước 21/08/2026 site KHÔNG có popup nào — tính năng thiếu
   hẳn chứ không phải lỗi hiển thị.

   ⛔ ĐỪNG CHO POPUP PHỦ TOÀN MÀN. Đã làm thế một lượt (tấm trắng co theo 41,4%
   bề rộng màn) và 4T bác ngay khi nhìn trên site: "kích cỡ quá lớn, không
   giống tỷ lệ hiển thị ở Figma". Khung overlay Figma là 1280×800 CỐ ĐỊNH trong
   khi khung trang là 1900 — popup định phủ toàn màn thì designer đã vẽ rộng
   1900 như mọi section khác. ⇒ hộp 1280×800 cố định, canh giữa, nền sau mờ.

   ⚠ Popup liên hệ (725:7672) cao **835** và bo **15**, khác 800/16 của năm cái
   này — đừng dùng chung một con số cứng cho cả sáu.

   ⛔ NỘI DUNG NẰM TRONG UX BLOCK (4T yêu cầu 21/08/2026) — mỗi popup một block
   `t4h-pop-*`, trang chỉ có `[lightbox][block id="…"][/lightbox]`. Nhờ vậy 4T
   sửa được từng popup trong UX Builder. Hệ quả: markup là row/col/text/button
   CỦA FLATSOME, không phải div tự viết, nên mọi luật dưới đây phải neo vào lớp
   Flatsome sinh ra (`.row`, `.col`, `.col-inner`, `.text`, `.is-divider`,
   `.icon-box`) — viết theo div thô là không ăn gì cả. */
.t4 .t4h-pop.lightbox-content { padding: 0; background: transparent; }
/* Row của Flatsome mặc định kẹp `max-width: 1050px` và cho phép xuống dòng —
   đo được 1050×1358 lúc chưa khai lại. Phải mở kẹp và cấm wrap. */
.t4h-pop .row.t4h-pop-hop {
  max-width: none; width: 100%; margin: 0;
  display: flex; flex-wrap: nowrap; align-items: stretch;
  min-height: 800px; background: var(--t4-white);
  /* Figma cornerRadius 16 + clipsContent ⇒ phải cắt, không thì góc ảnh vuông. */
  border-radius: 16px; overflow: hidden;
}
.t4h-pop .row.t4h-pop-hop > .col { padding: 0; margin: 0; }
/* ⚠ Bề rộng ĐÚNG do CSS ghim, KHÔNG do span. Figma 530/1280 = 41,4% mà span
   Flatsome tính theo 1/12 (5/12 = 41,7%) — lệch 4px. Span 5/7 chỉ để builder
   hiểu bố cục. */
.t4h-pop .col.t4h-pop-tam { flex: 0 0 530px; max-width: 530px; }
.t4h-pop .col.t4h-pop-tam > .col-inner {
  height: 100%; box-sizing: border-box; padding: 20px 33px;
  display: flex; flex-direction: column; gap: 8px;
}
.t4h-pop .col.t4h-pop-anh { flex: 1 1 auto; max-width: none; }
.t4h-pop .col.t4h-pop-anh > .col-inner,
.t4h-pop .t4h-pop-banner,
.t4h-pop .t4h-pop-banner .banner-inner { height: 100%; }
/* nhãn nhóm — Figma 14/28 w700 #458763 */
.t4h-pop .text.t4h-pop-nhan p {
  margin: 0; font-family: var(--t4-font-body); font-size: 14px; line-height: 28px;
  font-weight: 700; color: #458763; letter-spacing: 0;
}
.t4h-pop .is-divider { margin: 0; height: 1px; background-color: var(--t4-line, #e6e6e6); max-width: none; }
/* cụm icon + tiêu đề: Figma gap 8, khối chữ gap −5 (phụ đè lên tiêu đề) */
.t4h-pop .icon-box.t4h-pop-ib { padding: 9px 0; margin: 0; }
.t4h-pop .icon-box.t4h-pop-ib .icon-box-img { width: 32px; margin-right: 8px; }
.t4h-pop .text.t4h-pop-tieu h3 {
  margin: 0; font-family: var(--t4-font-head); font-size: 24px; line-height: 28px;
  font-weight: 700; color: #458763; letter-spacing: 0; text-transform: none;
}
.t4h-pop .text.t4h-pop-phu p {
  margin: -5px 0 0; font-family: var(--t4-font-body); font-size: 11px;
  line-height: 28px; font-weight: 400; color: var(--t4-text); letter-spacing: 0;
}
/* Danh sách tích: MỖI MỤC MỘT phần tử Text — whitelist III.2 cấm <ul>/<li>
   trong Text, và tách ra thì 4T sửa được từng dòng trong UX Builder. */
.t4h-pop .text.t4h-pop-muc { margin: 0; }
.t4h-pop .text.t4h-pop-muc p {
  margin: 0; min-height: 24px; display: flex; align-items: center; gap: 14px;
  font-family: var(--t4-font-body); font-size: 14px; line-height: 22px;
  font-weight: 400; color: var(--t4-text);
}
/* ⚠ Mục ĐẦU khác hẳn: Figma cho w600 màu #155446 (đo từng lớp chữ, không suy
   từ mục kế). Đừng "dọn cho đồng nhất". */
.t4h-pop .text.t4h-pop-muc1 p { font-weight: 600; line-height: 19.124px; color: #155446; }
/* Dấu tích 18×18 — vector Figma 15,43×11,57 màu #cf9156.
   ⚠ Đường vẽ là VẼ LẠI theo bbox: Figma REST không trả `fillGeometry`. */
.t4h-pop .text.t4h-pop-muc p::before {
  content: ""; flex: 0 0 18px; width: 18px; height: 18px;
  background-color: #cf9156;
  -webkit-mask: url("data:image/svg+xml,<svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1.3 9.6L6.1 14.3L16.7 3.7' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/> </svg>") no-repeat center / 18px 18px;
  mask: url("data:image/svg+xml,<svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1.3 9.6L6.1 14.3L16.7 3.7' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/> </svg>") no-repeat center / 18px 18px;
}
/* Nhóm 04 và 05 có đoạn văn thay cho danh sách — khác khuôn, đừng gộp. */
.t4h-pop .text.t4h-pop-doan p {
  margin: 0; font-family: var(--t4-font-body); font-size: 14px; line-height: 22px;
  font-weight: 400; color: var(--t4-text); text-align: justify;
}
/* chân tấm — Figma ghim ĐÁY (y=747 trong khung 800).
   ⛔ KHÔNG neo bằng lớp tự đặt: `[divider]` của Flatsome KHÔNG nhận thuộc tính
   `class` (bẫy đã ghi trong dự án), nên `t4h-pop-ke-chan` không bao giờ có
   trên phần tử — đã thử và chân popup nằm ngay dưới đoạn văn thay vì tụt đáy.
   Neo bằng chính lớp Flatsome sinh ra: kẻ CUỐI trong cột là kẻ của chân. */
/* ⛔ ĐỪNG DÙNG `:last-of-type` Ở ĐÂY. Nó xét theo THẺ, không theo lớp — mọi
   con của `.col-inner` đều là `<div>`, nên `:last-of-type` trỏ vào `div.row`
   của chân popup chứ không phải kẻ cuối. Đã thử: kẻ vẫn `margin-top: 0` và
   chân nằm cách đáy 421px. Neo bằng QUAN HỆ với khối chân thì không phụ thuộc
   số phần tử phía trên — popup 04 có đoạn văn, popup 01 có 6 mục, cùng chạy. */
.t4h-pop .col.t4h-pop-tam > .col-inner > .is-divider:has(+ .row.t4h-pop-hang) {
  margin-top: auto;
}
.t4h-pop .row-inner.t4h-pop-hang { max-width: none; width: 100%; margin: 0; display: flex; flex-wrap: nowrap; }
.t4h-pop .t4h-pop-hang > .col-inner-wrap,
.t4h-pop .t4h-pop-hang > .col { padding: 0; }
.t4h-pop .t4h-pop-o-xem { text-align: right; }
.t4h-pop a.button.t4h-pop-lui,
.t4h-pop a.button.t4h-pop-xem {
  display: inline-flex; align-items: center; gap: 8px; height: 24px; min-height: 0;
  padding: 2px 8px; margin: 0; border: 0; box-shadow: none; background: transparent;
  font-family: var(--t4-font-body); font-size: 12px; line-height: 16.392px;
  font-weight: 400; color: var(--t4-text); text-transform: none; letter-spacing: 0;
}
/* ⛔ THỦ PHẠM LÀM CHỮ "Quay lại" NHẠT: Flatsome đặt `mix-blend-mode: difference`
   cho `.mfp-close` để nút × nổi trên mọi nền ảnh. Trên tấm TRẮNG, phép trộn đó
   ĐẢO chữ #1f1f1f thành xám nhạt.
   ⚠ Rất khó truy vì `getComputedStyle` vẫn báo `color: rgb(31,31,31)` — hoà
   trộn đổi khâu VẼ chứ không đổi thuộc tính. Phải chụp ra nhìn, gỡ lớp rồi
   chụp lại mới tách được. */
.t4h-pop a.button.t4h-pop-lui.mfp-close {
  position: static; width: auto; right: auto; top: auto; opacity: 1;
  text-align: left; font-style: normal; mix-blend-mode: normal;
}
/* mũi tên quay lại — cùng vector với `cl-icon-next`, lật ngược */
.t4h-pop a.button.t4h-pop-lui::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 14px;
  background-color: var(--t4-text);
  -webkit-mask: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M14 7.19H0' stroke='white' stroke-width='1'/> <path d='M5.56 1.69L0.06 7.19L5.56 12.69' stroke='white' stroke-width='1'/> </svg>") no-repeat center / 14px 14px;
  mask: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M14 7.19H0' stroke='white' stroke-width='1'/> <path d='M5.56 1.69L0.06 7.19L5.56 12.69' stroke='white' stroke-width='1'/> </svg>") no-repeat center / 14px 14px;
}

/* ── POPUP «NHẬN TƯ VẤN» (725:7672) ──────────────────────────────────────
   ⚠ KHÁC NĂM POPUP DỊCH VỤ ba chỗ, đừng chép số sang:
     hộp 1280×**835** (không phải 800) · bo **15** (không phải 16)
     ẢNH BÊN TRÁI 717 · nội dung bên phải 563 (năm cái kia ngược lại)
   Nút mở nằm ở HEADER nên lightbox in ở footer cho MỌI trang, xem
   `template-parts/popup-lienhe.php`. */
.t4h-pop-mo-an { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.t4h-pop .row.t4h-pop-lh-hop { min-height: 835px; border-radius: 15px; }
.t4h-pop .col.t4h-pop-lh-anh { flex: 0 0 717px; max-width: 717px; }
.t4h-pop .col.t4h-pop-lh-tam { flex: 1 1 auto; max-width: none; }
.t4h-pop .col.t4h-pop-lh-tam > .col-inner { padding: 32px; gap: 0; }
/* Figma: H2 40/53,3 w600 · mô tả 16/26 w400 */
.t4h-pop .text.t4h-pop-lh-h2 h2 {
  margin: 0; font-family: var(--t4-font-head); font-size: 40px; line-height: 53.3px;
  font-weight: 600; color: var(--t4-text); letter-spacing: 0; text-transform: none;
}
.t4h-pop .text.t4h-pop-lh-mo p {
  margin: 8px 0 0; font-family: var(--t4-font-body); font-size: 16px;
  line-height: 26px; font-weight: 400; color: var(--t4-text);
}
.t4h-pop .text.t4h-pop-lh-form { margin-top: 32px; }
/* Form 7 trường — Figma nhãn 16 w500, ô nhập gợi ý 14 w400 */
/* ⚠ Figma cho mỗi trường ĐÚNG 66px: nhãn 26 + ô 40, KHÔNG khe giữa nhãn và ô,
   KHÔNG khe giữa các trường (Frame 136 = 462 cho 7 trường = 66 chẵn).
   Bản đầu tôi để `margin-bottom: 12` + `margin-bottom: 4` cho nhãn → mỗi hàng
   70px, form cao 719 thay vì 626 và cả popup phồng lên 928 thay vì 835. */
.t4h-pop .t4h-form-hang { margin-bottom: 0; }
/* ⛔ wpautop của CF7 bọc nhãn+ô mỗi trường trong MỘT <p> không class, và
   theme cho `p { margin-bottom: 16px }`. `.t4h-form-hang` không padding/
   border nên lề đáy của <p> đó THOÁT RA NGOÀI (margin collapse) và hiện
   thành khe 16px giữa các hàng — 6 khe × 16 = 96px, không hiện trong
   computed style của bất kỳ phần tử nào (đo bằng toạ độ mới lộ ra). */
.t4h-pop .t4h-form-hang > p { margin: 0; }
.t4h-pop .t4h-form-nhan {
  display: block; margin-bottom: 0; font-family: var(--t4-font-body);
  font-size: 16px; line-height: 26px; font-weight: 500; color: var(--t4-text);
}
.t4h-pop .wpcf7 input[type="text"],
.t4h-pop .wpcf7 input[type="tel"] {
  width: 100%; height: 40px; margin: 0; box-shadow: none;
  border: 1px solid var(--t4-line, #e6e6e6); border-radius: 5px; padding: 0 12px;
  font-family: var(--t4-font-body); font-size: 14px; font-weight: 400;
  color: var(--t4-text); background: var(--t4-white);
}
/* Figma Frame 137 = 112 cho cụm ghi chú + nút (ghi chú y=677, nút kết ở 789). */
.t4h-pop .t4h-form-ghi {
  margin: 24px 0 0; font-family: var(--t4-font-body); font-size: 14px;
  line-height: 22px; font-weight: 500; color: var(--t4-text);
}
/* ⛔ CF7 tự chèn ba khối CAO 0px NHƯNG CÓ LỀ, cộng lại 80px:
     fieldset.hidden-fields-container   margin-bottom 16
     <p> bọc nút submit                 margin-bottom 16
     div.wpcf7-response-output          margin 32 trên / 16 dưới
   Chúng vô hình nên nhìn không ra — chỉ lộ khi liệt kê con của <form> kèm lề.
   Đó là phần lớn chỗ popup phồng từ 835 lên 928. */
.t4h-pop .wpcf7 .hidden-fields-container,
.t4h-pop .wpcf7 form > p:has(input[type="submit"]) { margin: 0; }
/* ⚠ Phải đủ cụ thể: CF7 khai `.wpcf7 form .wpcf7-response-output` (0,3,0),
   luật ngắn hơn của ta thua và lề 32/16 vẫn còn. */
.t4h-pop .wpcf7 form .wpcf7-response-output { margin: 12px 0 0; }
/* ⛔ `form.wpcf7-form` tự có margin-bottom (đo được ~20,8px) THOÁT RA NGOÀI
   khối bọc `.wpcf7` (margin 0/0) rồi cộng vào `.text.t4h-pop-lh-form` — cùng
   kiểu collapse như hai bẫy trên. Triệt tại nguồn, rồi bù lại đúng đệm
   trên/dưới 14px mà Figma vẽ cho form (không thấy trên nhãn nào của Figma,
   chỉ lộ khi so khung form với khung .col-inner). */
.t4h-pop .wpcf7 form.wpcf7-form { margin: 0; padding: 14px 0; }
.t4h-pop .wpcf7 input.t4h-form-nut {
  /* Figma Frame 137 (ghi chú + nút) cao 112; trước khi vá margin ở trên,
     cụm này đo được chỉ 92 (khe 12 + cao nút 44 + ~14 phụ trội do input nằm
     trong <p> canh dòng — <p> đã margin:0 nhưng line-box của nó vẫn chiếm
     chỗ, KHÔNG đo tách được phần này chỉ bằng computed style của input).
     Bù thẳng 20px vào margin-top để cụm ra đúng 112 — ⚠ CHƯA KIỂM CHỨNG
     TRÊN SERVER, xem ghi chú độ chắc chắn ở báo cáo audit. */
  margin-top: 32px; height: 44px; padding: 0 24px; border: 0; border-radius: 5px;
  background: var(--t4-camel); color: var(--t4-white);
  font-family: var(--t4-font-body); font-size: 14px; font-weight: 700;
  letter-spacing: 0; text-transform: none; cursor: pointer;
}