/* ==========================================================================
   30-components.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 §3-6 mô-típ dùng lại · §8 widget chat · §9 tiện ích dùng lại của bản gộp;
   không sửa một luật nào trong lần tách này.
   ========================================================================== */


/* ══ GIA ĐÌNH SỐ KHUNG — tra ngược mọi bề rộng px về node Figma ═══════════
   [phục vụ] mọi luật khai bề rộng cố định trong toàn bộ css/ | [trang] toàn site

   ⛔ NĂM CON SỐ HAY GẶP NHẤT TRONG TỆP NÀY KHÔNG HỀ CÓ TRONG FIGMA.
   Đã tra cả 127.233 node của 'figma-cache/file.json' (chỉ mục ở
   'qa/_figma-chi-muc-kich-thuoc.json'): 1110 · 1090 · 548 · 541 · 382 đều ra
   **0 node**. Ai đi tìm khung 1110 trong Figma sẽ tìm cả buổi không thấy.

   Lý do: '.col' của Flatsome có đệm ngang 15px MỖI BÊN. Muốn LÒNG cột rộng
   đúng số Figma thì bề rộng khai phải cộng 30. Trừ 30 ra là số Figma thật:

     CSS 1110 → Figma 1080  Container   '532:4123'   (1.347 node cùng khổ)
     CSS 1090 → Figma 1060  Container   '532:4139'   (219 node)
     CSS  548 → Figma  518  Frame 1707479569 '712:20335' 518×355
     CSS  541 → Figma  511  Container   '772:7343'   511×110
     CSS  382 → Figma  352  Container   '1093:8882'  (khổ Mobile)

   '.row-collapse' gỡ đệm cột nên dùng THẲNG số Figma, không cộng 30 — đó là
   lý do mọi cặp luật trong tệp này luôn đi đôi 1110/1080 và 382/352.

   ⚠ Quy luật này CHỈ đúng cho '.row'/'.col'. Luật khai bề rộng cho phần tử
   thường (ảnh, nút, thẻ) dùng thẳng số Figma — ví dụ '.t4fx-cs-anh' 503px.

   ── Cộng dồn đã kiểm, dùng để tự soi khi sửa ─────────────────────────────
     518 × 2 + khe 24  = 1060   hai thẻ giai đoạn
     528 × 2 + khe 24  = 1080   hai cột mô tả dịch vụ
     503 + 471 + khe 40 = 1014  ảnh + chữ của casestudy
   Số nào cộng không ra khung mẹ thì hoặc khe khác, hoặc đã chép sai.

   ── Tra một con số bất kỳ ────────────────────────────────────────────────
     python3 tools/truy-node-be-rong.py 518 --cao 355
     python3 tools/truy-node-be-rong.py 1080 --khung HomePage
   Công cụ KHÔNG đoán: nó liệt kê mọi node đúng khổ để người viết tự chọn.
   Nhiều kết quả thì thu hẹp bằng '--cao', đừng lấy bừa cái đầu tiên.
   ══════════════════════════════════════════════════════════════════════ */


/* ── §3-6 mô-típ dùng lại (dòng 120–705 của style.css cũ) ──────────────────── */

/* --------------------------------------------------------------------------
   3. MÔ-TÍP (a) — NHÃN SECTION: chip xanh + kẻ đứt nét chạy hết hàng
   -------------------------------------------------------------------------- */
.t4-label {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-bottom: 32px;
}

/* [phuc vu] chip nhan section | [trang] trang chu + 4 trang dich vu
   [figma] mo-tip (a) | [ly do vuot panel] panel khong co chip nen bo goc

   ✅ 17/08/2026 — DA BO nhanh '> span', gia do chuyen tiep het han.
   III.2 chi cho <span> mang dung 3 lop da duyet (hl-camel/hl-green/accent),
   nen chip viet '<span>Slogan</span>' la vi pham: no bien mot nhan CHU THUAN
   thanh mot the HTML go tay. Nay ca 25 chip cua 5 trang deu la '<p>' — thu
   trinh soan thao UX Builder tu sinh.

   Da doi TUNG TRANG va do lai tung trang (III.7-3 cam doi ca 5 trong mot
   nhip vi 4 trang kia da do xong): #4 1816 ✅/0 ❌ · #5 1235 ✅/0 ❌ ·
   #6 va #7 giu nguyen 27 ❌ co san. Va soi tren SITE THAT truoc khi don bo
   chon: 5 trang × (>span = 0, >p = 5). */
.t4-label > p {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--t4-leaf);
  color: var(--t4-white);
  font-size: 14px;
  line-height: 19px;
  font-weight: 500;
  white-space: nowrap;
  /* '.t4 p' cua 10-base cho moi doan 'margin: 0 0 16px' — khong go thi chip
     tu day ke dut net xuong 16px. */
  margin: 0;
}

.t4-label::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px dashed var(--t4-leaf);
  opacity: .5;
}

@media (max-width: 849px) {
  .t4-label { gap: 12px; margin-bottom: 20px; }
  .t4-label > p { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   4. MÔ-TÍP (b) — HAI NỀN GRADIENT SECTION
   -------------------------------------------------------------------------- */
.t4-bg-fade-down {
  background-color: var(--t4-light);
  background-image: linear-gradient(180deg, #EFE8DA 0%, rgba(239,232,218,.4) 49%, rgba(239,232,218,0) 100%);
}

.t4-bg-fade-mid {
  background-color: var(--t4-light);
  background-image: linear-gradient(180deg, rgba(239,232,218,0) 0%, #EFE8DA 51%, rgba(239,232,218,0) 100%);
}

.t4-bg-light { background-color: var(--t4-light); }
.t4-bg-cream { background-color: var(--t4-cream); }

/* --------------------------------------------------------------------------
   5. MÔ-TÍP (c) — THẺ TRẮNG bo 16px, đổ bóng
   -------------------------------------------------------------------------- */
.t4-card {
  background: var(--t4-white);
  border-radius: var(--t4-radius-card);
  box-shadow: var(--t4-shadow-card);
  padding: 30px;
  height: 100%;
}

.t4-card-tag {
  display: inline-block;
  padding: 2px 16px;
  border-radius: 8px;
  background: var(--t4-leaf);
  color: var(--t4-light);
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
}

.t4-sep { height: 1px; background: rgba(31,31,31,.15); border: 0; margin: 18px 0; }

@media (max-width: 849px) {
  .t4-card { padding: 20px; border-radius: 12px; }
}

/* --------------------------------------------------------------------------
   6. MÔ-TÍP (d) — NÚT (dự phòng cho [ux_html] hãn hữu; nút UX Builder chuẩn
      dùng style Flatsome gốc, xem "Buttons" trong Style panel Customizer)
   -------------------------------------------------------------------------- */
.t4-btn,
.t4-btn-ghost,
.t4-btn-on-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 24px;
  border-radius: var(--t4-radius-btn);
  font-family: var(--t4-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.t4-btn { background: var(--t4-camel); color: var(--t4-white); }
.t4-btn:hover, .t4-btn:focus { background: var(--t4-camel-dark); color: var(--t4-white); }

.t4-btn-ghost {
  background: var(--t4-light);
  color: var(--t4-camel-border);
  border-color: var(--t4-camel-border);
}
.t4-btn-ghost:hover, .t4-btn-ghost:focus { background: var(--t4-camel-border); color: var(--t4-white); }

.t4-btn-on-dark { background: transparent; color: var(--t4-white); border-color: var(--t4-white); }
.t4-btn-on-dark:hover { background: var(--t4-white); color: var(--t4-dark-moss); }

/* [figma] trang6 · section quytrinh_mb — 2 lớp rộng 180px: '1113:15332' · '1113:15333'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 6 để chọn) */
.t4-btn-lg { min-height: 56px; min-width: 180px; font-size: 16px; }

/* --------------------------------------------------------------------------
   6a. KHUNG HEADER — bóng đổ.
   Figma đặt DROP_SHADOW ở node GỐC của header (163:7688 desktop @25%,
   1017:21271 mobile @30%), không phải ở lớp nền bên trong. Flatsome không
   có ô "bóng đổ" cho header nên đây là mức 2.
   Đặt trên .header-main (đúng hộp cao 76/60px) chứ không phải .header-wrapper:
   khi cuộn, Flatsome nhân bản .header-main thành thanh dính — để ở đây thì
   bản dính cũng có bóng, để ở lớp ngoài thì không.
   -------------------------------------------------------------------------- */
#header .header-main { box-shadow: 0 2px 2px rgba(0, 0, 0, .25); }
@media (max-width: 849px) {
  #header .header-main { box-shadow: 0 2px 2px rgba(0, 0, 0, .3); }
}
/* Khi cuộn, Flatsome gắn .stuck lên .header-wrapper KÈM bóng riêng của nó
   (rgba(0,0,0,.15) 1px 1px 10px) — cộng với bóng ở trên thành HAI lớp bóng,
   đậm hơn hẳn thiết kế. Figma chỉ có một bóng duy nhất cho header. */
#header .header-wrapper.stuck { box-shadow: none; }
/* Flatsome tự THU header dính từ 76px xuống 70px (biến --sticky-height của
   nó). Figma 163:7688 chỉ quy định MỘT chiều cao là 76 và không mô tả trạng
   thái dính, nên giữ 76 cho mọi trạng thái mới là bám thiết kế. Đặt qua biến
   của chính Flatsome để không phải đè từng phần tử con. */
#header.has-sticky .header-wrapper.stuck,
#header.has-sticky .header-wrapper.stuck .header-main {
  --sticky-height: 76px;
  height: 76px;
}

/* --------------------------------------------------------------------------
   6b. NÚT CTA HEADER (Header Builder) — Flatsome mặc định gán class
       "button primary" cho CẢ HAI nút, ra màu xanh navy #446084 mặc định
       của theme, không phải token thương hiệu. Ép lại đúng theo Figma
       node 163:7688: "Nhận tư vấn" = nền #cf9156/chữ trắng (Link 163:5466),
       "Gọi ngay" = nền trắng/viền+chữ #155446 (Link 163:5468). Khoá theo
       href vì Header Builder không có ô "custom class" cho từng nút.
   -------------------------------------------------------------------------- */
#header .header-button a[href$="/lien-he/"].button {
  background-color: var(--t4-camel) !important;
  /* Figma "Link" 163:5466 có stroke 2px nhưng alpha 0 → dày thật, VÔ HÌNH.
     Flatsome mặc định 1px rgba(0,0,0,.11) — mờ nhưng vẫn thấy trên nền camel. */
  border-color: transparent !important;
  color: var(--t4-white) !important;
}
#header .header-button a[href$="/lien-he/"].button:hover {
  background-color: var(--t4-camel-dark) !important;
}
#header .header-button a[href^="tel:"].button {
  background-color: var(--t4-white) !important;
  border-color: var(--t4-dark-moss) !important;
  color: var(--t4-dark-moss) !important;
}
#header .header-button a[href^="tel:"].button:hover {
  background-color: var(--t4-dark-moss) !important;
  color: var(--t4-white) !important;
}
/* Figma "Frame 62" itemSpacing=14 giữa 2 nút. Flatsome đã tự có sẵn margin
   0 7px trên li.header-button-2 (đo được qua computed style) — cộng thêm
   7px ở nút đầu để tổng khoảng cách đúng 14px, KHÔNG phải 14px (sẽ dư 7px). */
li.header-button-1 { margin-right: 7px !important; }
li.header-button-2 { margin-left: 7px !important; margin-right: 0 !important; }
/* Figma "List": 4 mục menu nằm SÁT NHAU, gap 0 (598+118=716, 716+119=835,
   835+129=964, 964+217=1181). Flatsome thêm margin 7px mỗi bên → cộng dồn
   42px làm cả dải menu rộng ra và lệch vị trí. */
#header ul.header-nav-main > li.menu-item {
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-shrink: 0; /* nowrap khiến flex co mục xuống dưới bề rộng chữ → "Về
                     chúng tôi" bị bẻ hai dòng và mũi tên rơi xuống */
}
#header ul.header-nav-main > li > a.nav-top-link { white-space: nowrap; }
/* Khoảng 41px giữa menu và cụm nút (Figma: menu hết ở 1181, nút bắt đầu
   1222). Dùng padding chứ không dùng margin-left — margin-left của
   li.header-button-1 bị quy tắc khác của Flatsome ghi đè về 0. */
#header ul.header-nav-main > li.header-button-1 { padding-left: 41px; }
/* Figma "Primary Navigation" dàn SPACE_BETWEEN: logo(147) · menu(583) ·
   nút(268) trong 1080 → hai khoảng trống 41px. Menu và nút nằm chung một
   <ul> căn phải nên khoảng 41px phải đặt bằng margin-left của nút đầu.
   margin-right 7px mặc định của nút cuối đẩy cả cụm lệch trái 7px. */
#header .header-button a.button {
  font-family: var(--t4-font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 22px !important; /* Figma: TEXT "Nhận tư vấn"/"Gọi ngay" lh 22 */
  /* Figma ls=0. Flatsome đặt .03em cho MỌI .button → 0,42px mỗi ký tự; nhìn
     từng ký tự thì dưới ngưỡng 0,5px nên dễ lọt, nhưng "Nhận tư vấn" 11 ký
     tự là dôi hơn 4px bề rộng chữ. */
  letter-spacing: 0;
  /* Figma cả hai nút stroke 2px (163:5466 alpha 0 · 163:5468 #155446).
     Flatsome mặc định 1px. box-sizing:border-box nên 130×42 không đổi. */
  border-width: 2px;
}
/* Viết hoa của nút do Header Builder lo (header_button_*_letter_case =
   "lowercase" → class .lowercase), KHÔNG cần text-transform ở đây nữa. */

/* 6c. MENU CHÍNH HEADER (Header Builder) — Flatsome gán class ".nav-top-link"
   không kèm font riêng, ra mặc định "Lato" xám nhạt của theme thay vì
   Manrope trắng đậm của Figma (163:5462/163:5463 vv — Bold 14/28, #ffffff).
   Đây là lỗi lớn nhất từng bỏ sót — chỉ soát ĐÚNG CHỮ, chưa soát ĐÚNG KIỂU.

   Từ 16/08/2026 phần font đã chuyển sang MỨC 1: Customizer → Type → Nav đặt
   "type_nav" = Manrope/700, và "nav_uppercase" = 0 để bỏ class ".nav-uppercase"
   (class đó kéo theo BA thứ cùng lúc: text-transform:uppercase, font-weight:
   bolder và letter-spacing:.02em — chính .02em là thứ làm mỗi mục menu dôi
   3-4px và đẩy lệch cả hàng, mà so từng ký tự thì chỉ 0,28px nên rất dễ bỏ qua).
   Ở đây chỉ còn cỡ chữ/giãn dòng/màu — những thứ Header Builder không có ô. */
#header .header-nav-main a.nav-top-link {
  font-size: 14px !important;
  line-height: 28px !important;
  color: var(--t4-white) !important;
}
#header .header-nav-main a.nav-top-link:hover { opacity: .85; }

/* 6d. BỐ CỤC HEADER DESKTOP — số đo Figma 163:7688 (khung 1080):
   logo x=410 · menu x=598 · nút x=1222 · header cao 76.
   Ba lỗi đo được: (1) .header-inner có padding 0 15px đẩy logo sang x=425;
   (2) mục menu KHÔNG có padding ngang, Figma 24px (mục đầu 17px);
   (3) Flatsome chèn <li class="header-divider"> không có trong thiết kế
       → nay ĐÃ GỠ Ở MỨC 1 (Header Builder bỏ phần tử "divider" khỏi ô bên
       phải), không còn phải giấu bằng display:none. */
@media (min-width: 850px) {
  #header .header-inner { padding-left: 0; padding-right: 0; }

  /* Cột logo bị Flatsome ấn định 200px trong khi logo thật 148px (Figma 147).
     Thừa 52px làm cụm menu + nút không đủ chỗ trong khung 1080 và mục
     "Hệ sinh thái Kiến thức" BỊ ĐẨY XUỐNG DÒNG THỨ HAI. */
  #header .flex-col.logo { width: auto !important; flex: 0 0 auto; }
  #header ul.header-nav-main { flex-wrap: nowrap; }

  /* Figma "Primary Navigation" là auto-layout SPACE_BETWEEN trong khung 1080:
     logo 147 + menu 583 + nút 268 = 998 → dôi 82 chia đôi thành HAI khoảng
     40,94px. Flatsome để .logo margin-right 30px nên khoảng bên trái hụt 11px
     và toàn bộ hàng menu lệch trái đúng chừng ấy.
     Cột menu có flex-grow nên nó nuốt hết phần dôi → chỉ cần đặt đúng khoảng
     BÊN TRÁI, khoảng bên phải tự bằng theo. */
  #header .flex-col.logo { margin-right: 41px; }

  #header .header-nav-main > li > a.nav-top-link {
    padding-left: 24px !important;
    padding-right: 24px !important;
    /* Figma "Frame 1"/"Text Menu" pt=pb=24, chữ lh 28 → mục menu cao đúng
       76px = trọn chiều cao header. Mặc định Flatsome 10px nên mục chỉ cao
       48px: nhìn thì y hệt (nền trong suốt) nhưng VÙNG BẤM/HOVER hụt 28px
       và dropdown bật lên cao hơn mép header. */
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  #header .header-nav-main > li:first-child > a.nav-top-link {
    padding-left: 17px !important;
    padding-right: 17px !important;
  }
  /* Figma: mũi tên 18×18, cách chữ 3px. Flatsome để 16px nên mỗi mục
     hụt ~2px, cộng dồn làm cả dải menu lệch. */
  #header .header-nav-main a.nav-top-link i.icon-angle-down {
    margin-left: 3px;
    font-size: 18px;
    width: 18px;
    /* Figma khung icon vuông 18×18. Để nguyên line-height thừa kế thì hộp
       icon cao 21,6px — tâm vẫn đúng nên mắt không thấy, chỉ lộ khi đo. */
    height: 18px;
    line-height: 18px;
    vertical-align: middle;
  }

/* [figma] luật dùng chung — lớp rộng 130px có ở 3 trang; đại diện: trang3:'359:1605' · trang4:'1113:9309' · trang7:'1211:18852'
   (tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */
  /* Nút: Figma "Nhận tư vấn" 130×42, "Gọi ngay" 124×42, cách nhau 14px.
     Flatsome tự tính theo padding chữ nên ra 121×35 và 97×35. */
  #header .header-button a.button {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  #header .header-button a[href$="/lien-he/"].button { width: 130px !important; }
  #header .header-button a[href^="tel:"].button      { width: 124px !important; }
}

/* --------------------------------------------------------------------------
   6d-bis. MEGA MENU "DỊCH VỤ" — Figma node 678:5111 "Menu_Dịch vụ"
   Khung 1280×380, nền trắng, bo góc DƯỚI 5px, KHÔNG có bóng đổ.
   Bốn cột: Google Ads (270) · Truyền thông thương hiệu (246) ·
   Thiết kế & Vận hành WEB (223) · Tư vấn chiến lược (258), cách nhau ~27px,
   nội dung bắt đầu ở x=100 trong khung.

   Cấu trúc do Header Builder + trình đơn WordPress lo (mục "Dịch vụ" đặt
   '_menu_item_design = custom-size', rộng 1280; mục cấp 2 có con được Flatsome
   tự gắn class '.nav-dropdown-col'). Ở đây CHỈ chỉnh kiểu dáng.

   ⚠ 678:5111 mới là bản hoàn chỉnh. Hai bản khác trong file KHÔNG dùng:
     · 710:5700 (1280×400) và các biến thể 163:6034/163:6253/547:2008 của
       component "Menu white_Short" đều còn nguyên chữ giữ chỗ "Figma ipsum".
   -------------------------------------------------------------------------- */
@media (min-width: 850px) {
  /* Neo bảng vào .header-inner (khung 1080 đã căn giữa) thay vì vào <li>:
     bảng rộng 1280 > 1080 nên phải tràn đều hai bên. 1080 tại x=410, lùi
     100px là x=310, cộng 640 ra đúng tâm màn 1900. Chỉ đổi mục có mega menu
     nên các dropdown khác giữ nguyên cách định vị của Flatsome. */
  #header .header-inner { position: relative; }
  /* Phải hạ CẢ ba lớp bọc xuống static, không chỉ <li>: cột menu và <ul> của
     Flatsome cũng position:relative, nên left:50% bám vào cột menu (tâm 890)
     thay vì vào .header-inner (tâm 950) và bảng lệch trái 60px.
     Các mục menu khác vẫn giữ position:relative nên dropdown thường của chúng
     không đổi chỗ. */
  #header .header-inner > .flex-col.flex-left,
  #header .header-inner ul.header-nav-main,
  #header li.menu-item-design-custom-size { position: static; }

  #header li.menu-item-design-custom-size > ul.nav-dropdown {
    /* Căn giữa theo màn hình: .header-inner luôn nằm giữa nên lấy nó làm mốc
       là ra đúng tâm màn ở mọi khổ. Ở 1900px cho x=310, cộng 640 ra tâm 950 —
       khớp cả node 678:5111 lẫn biến thể toàn khổ 163:6034 (nội dung x=410). */
    left: 50%;
    transform: translateX(-50%);
    width: min(1280px, 100vw) !important; /* Flatsome ghi width bằng style nội
                                 tuyến từ ô "Width" của trình đơn — chỉ
                                 !important mới đè được.
                                 min(...) vì Figma chỉ vẽ khổ 1900: để 1280px
                                 cứng thì từ 1440px trở xuống bảng bị cắt mất
                                 bên phải (ở 1100px mất 190px, tức mất hẳn
                                 cột 4) mà trang KHÔNG hề tràn ngang nên không
                                 có dấu hiệu gì báo. */
    max-width: none;
    display: flex;
    gap: 27px;
    padding: 0 100px 92px;    /* Figma: nội dung x=100; đáy 92px là chỗ trống
                                 của 6 mục cột 3 đang bị ẩn trong thiết kế */
    border: 0;                /* Flatsome viền 2px → bảng cao 384 thay vì 380 */
    border-radius: 0 0 5px 5px;
    box-shadow: none;         /* Figma không đặt hiệu ứng nào cho bảng này */
    background: var(--t4-white);
  }

  /* Flatsome ép mỗi cột thành display:table-cell rộng cứng 160px — cột Figma
     rộng theo chữ (270/246/223/258).
     Dùng min-width chứ không phải width: khớp Figma khi chữ ngắn hơn, mà 4T
     đổi sang nhãn dài hơn thì cột vẫn nở ra chứ không tràn. */
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li.nav-dropdown-col,
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li {
    display: block;
    width: auto;
    min-width: 0;
    border-right: 0;
    white-space: nowrap;
  }
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li:nth-child(1) { min-width: 270px; }
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li:nth-child(2) { min-width: 246px; }
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li:nth-child(3) { min-width: 223px; }
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li:nth-child(4) { min-width: 258px; }

  /* Flatsome để margin 0 10px trên MỌI liên kết trong dropdown → cả bốn cột
     thụt vào 10px và rộng thêm 20px. Figma không có lề nào. */
  #header li.menu-item-design-custom-size > ul.nav-dropdown a { margin: 0; }

  /* Tiêu đề cột — Figma: Manrope 700 14/28 #1f1f1f, KHÔNG viết hoa,
     pt 24, mục con đầu bắt đầu ở y=68 → đệm dưới 16px. */
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li > a {
    font-family: var(--t4-font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0;
    color: var(--t4-text);
    text-transform: none;
    padding: 24px 0 16px;
    border-bottom: 0;
  }

  /* Mục con — Figma: Manrope 400 14/28 #1f1f1f, hàng cao 44 (đệm dọc 8). */
  #header li.menu-item-design-custom-size > ul.nav-dropdown ul li a {
    font-family: var(--t4-font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0;
    color: var(--t4-text);
    text-transform: none;
    padding: 8px 0;
    border-bottom: 0;
  }
  #header li.menu-item-design-custom-size > ul.nav-dropdown ul li a:hover {
    color: var(--t4-leaf);
  }
  /* Trạng thái của TIÊU ĐỀ CỘT — Figma có định nghĩa hẳn hoi: component set
     "Text_Menu bar 2" (195:3493) có hai biến thể, Default chữ #1f1f1f và
     Variant2 chữ #458763. Đây là chỗ DUY NHẤT trong cả header mà Figma mô tả
     trạng thái bằng màu; mục menu đầu trang ("Text Menu" 163:4547) thì hai
     biến thể giống hệt nhau từng thuộc tính. */
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li > a:hover,
  #header li.menu-item-design-custom-size > ul.nav-dropdown > li:hover > a {
    color: var(--t4-leaf);
  }

  /* ------------------------------------------------------------------------
     BẢNG MEGA DẠNG THẺ — "Giáo dục" (163:6253) · "Hệ sinh thái Kiến thức"
     (547:2008). Cùng khung 1280×460 tại x=310 như bảng "Dịch vụ", nhưng bố
     cục khác hẳn: một KHỐI TIÊU ĐỀ chiếm trọn hàng → đường kẻ #e3e3e3 →
     một hàng THẺ (icon 23px + tên + mô tả), thẻ rộng 300px cách nhau 80px.

     Phân biệt hai kiểu bảng bằng class 't4-mega-the' đặt ở ô "CSS Classes"
     của mục trình đơn — 4T nhìn thấy và đổi được trong wp-admin.

     Mốc dọc lấy thẳng từ Figma (toạ độ tính từ mép trên bảng):
       khối tiêu đề 0→114 · đường kẻ 122 · hàng thẻ 130→253 · đáy bảng 460
     Khoảng trống 207px dưới hàng thẻ là CÓ THẬT trong thiết kế — đã đối chiếu
     bằng ảnh render của chính Figma, không phải lỗi dựng.
     ------------------------------------------------------------------------ */
  #header li.t4-mega-the > ul.nav-dropdown {
    flex-wrap: wrap;
    gap: 0 80px;              /* Figma: thẻ cách nhau 80px */
    padding-bottom: 207px;
  }

  /* ⚠ HỘP CHỮ TRONG FIGMA NHỎ HƠN CHỮ NÓ VẼ RA: mô tả tiêu đề khai cao 30px
     nhưng render 2 dòng lh21 = 42px; mô tả thẻ khai 51px mà render 3 dòng =
     63px. Vậy KHÔNG được suy chiều cao khối từ chiều cao hộp chữ — bám MỐC
     CHỮ Figma vẽ ra, còn chiều cao khối thì lấy đúng khung Figma khai.
     Mốc tính từ mép trên bảng: tiêu đề 24 · mô tả 60 · kẻ 122 · hàng thẻ 130 ·
     tên thẻ 148 · mô tả thẻ 184 · đáy bảng 460. */
  #header li.t4-mega-the > ul.nav-dropdown > li.t4-mega-dau {
    flex: 0 0 100%;
    min-width: 0;
    height: 114px;          /* Figma "Frame 1" */
    padding: 24px 0 0;
    margin-bottom: 16px;    /* 8px xuống đường kẻ + 8px từ kẻ xuống hàng thẻ */
    position: relative;
    white-space: normal;
  }
  /* Đường kẻ là một VECTOR riêng ở y=122 — LỌT GIỮA khối tiêu đề và hàng thẻ,
     không dính mép khối nào. Vẽ bằng ::after thả nổi; dùng border-bottom thì
     nó dính mép 114 và lệch 8px. */
  #header li.t4-mega-the > ul.nav-dropdown > li.t4-mega-dau::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 1px;
    background: #e3e3e3;
  }
  #header li.t4-mega-the > ul.nav-dropdown > li.t4-mega-dau > a {
    display: block;
    padding: 0;
  }

/* [figma] trang7 · section mota_mb/quytrinh_mb — 3 lớp rộng 300px: '1113:17734' · '1113:17984' · '1113:17985'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 7 để chọn) */
  /* Thẻ: icon và tên cùng hàng, mô tả xuống dòng thụt vào đúng bằng
     bề rộng icon + khoảng hở (23 + 8 = 31px). */
  #header li.t4-mega-the > ul.nav-dropdown > li:not(.t4-mega-dau) {
    flex: 0 0 300px;
    min-width: 0;
    height: 123px;          /* Figma "Frame 3/4/5" */
    padding: 18px 0 0;
    white-space: normal;
  }
  /* Hàng thẻ thụt vào 8px so với khối tiêu đề: Figma lồng "Frame 56" (1064)
     vào giữa "Frame 58" (1080) → dôi 8px mỗi bên. Chỉ cần đẩy thẻ ĐẦU, các
     thẻ sau tự theo vì khoảng cách 80px tính từ thẻ liền trước. */
  #header li.t4-mega-the > ul.nav-dropdown > li.t4-mega-dau + li { margin-left: 8px; }

  #header li.t4-mega-the > ul.nav-dropdown > li:not(.t4-mega-dau) > a {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 8px;
    /* Figma khai khoảng hở tên→mô tả là 8px, NHƯNG hộp mô tả của nó chỉ cao
       51px trong khi chữ render 63px; Figma căn giữa nên chữ tràn lên trên
       6px. Muốn khớp cái MẮT NHÌN THẤY thì khoảng hở thật là 8 − 6 = 2px.
       Bám chữ Figma vẽ ra, không bám con số Figma khai. */
    row-gap: 2px;
    padding: 0;
  }
  #header li.t4-mega-the > ul.nav-dropdown > li > a .material-symbols-outlined {
    flex: 0 0 23px;
    font-size: 20px;
    line-height: 28px;
    color: var(--t4-leaf);   /* Figma: mọi icon trong bảng này đều #458763 */
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  }
  /* Mô tả — Figma 12/21, cùng màu chữ với tiêu đề, xuống dòng riêng và thụt
     vào bằng bề rộng icon.
     ⚠ flex-basis 100% CỘNG margin-left 31px là tràn ra ngoài thẻ đúng 31px —
     bảng số đo không bắt được (nó so vị trí và kiểu chữ, không so bề rộng
     khối mô tả), chỉ ẢNH CHỤP mới lộ ra. Phải trừ thẳng vào flex-basis:
     Figma cho khối chữ rộng 269 = 300 − 31. */
  #header li.t4-mega-the .t4-mega-mo-ta {
    flex: 0 0 calc(100% - 31px);
    display: block;
    margin-left: 31px;
    font-size: 12px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0;
    color: var(--t4-text);
  }
  #header li.t4-mega-the > ul.nav-dropdown > li.t4-mega-dau .t4-mega-mo-ta {
    margin-left: 0;
    max-width: 631px;        /* Figma: khối mô tả tiêu đề rộng 631px */
    margin-top: 2px;         /* 8 khai − 6 tràn, cùng lý do như mô tả thẻ */
  }
}

/* Dưới 1300px không còn đủ chỗ cho lề 100px của Figma; dưới ~1180px thì bốn
   cột (tổng 1078px kể cả khoảng cách) cũng không nằm vừa một hàng. Cho xuống
   hàng thay vì để cột 4 bị cắt mất. Figma không vẽ khổ này. */
@media (min-width: 850px) and (max-width: 1300px) {
  #header li.menu-item-design-custom-size > ul.nav-dropdown {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 24px;
    flex-wrap: wrap;
  }
}

/* 6e. HEADER MOBILE — Figma node 1017:21271 "Frame Menu Mobile":
   khung 402×60, nền #458763, padding 25px hai bên,
   LOGO 124×29 bên TRÁI (x=25) · ICON TÌM KIẾM 17×18 bên PHẢI (x=360).
   Cấu hình slot (logo trái, bỏ hamburger, thêm search phải) đặt trong
   Header Builder qua theme_mod; phần căn lề/kích thước xử lý ở đây.
   Menu vẫn mở được từ nút "Tuỳ chọn khác" ở thanh đáy mobile. */
@media (max-width: 849px) {
  #header .header-inner {
    padding-left: 25px;
    padding-right: 25px;
  }
  /* Flatsome căn giữa logo trên mobile (cột .logo rộng 200px, ảnh ở x=127).
     Figma đặt logo sát mép trái. */
  #header .flex-col.logo {
    margin: 0 !important;
    text-align: left !important;
    width: auto !important;
    flex: 1 1 auto;
  }
  #header #logo,
  #header #logo a { justify-content: flex-start; text-align: left; }
  #header #logo img {
    width: 124px !important;
    height: auto !important;
    max-height: none !important;
    margin-left: 0 !important;  /* Flatsome căn giữa logo bằng margin:0 auto
                                   (đo được 0 106.3px) — ép về sát trái */
    margin-right: 0 !important;
  }
  #header .flex-col.flex-right { flex: 0 0 auto; }
  /* Slot trái của header mobile nay TRỐNG (đã bỏ hamburger) nhưng Flatsome
     vẫn để flex:1 1 0 nên nó chiếm 106px và đẩy logo vào giữa. */
  #header .header-inner > .flex-col.show-for-medium.flex-left {
    flex: 0 0 0 !important;
    width: 0 !important;
    overflow: hidden;
  }
}
/* Mega-dropdown + menu mobile off-canvas dùng chung ".nav-uppercase" của
   Flatsome — cùng lỗi viết hoa, sửa luôn một thể. */
#header .header-nav-main .sub-menu a,
#main-menu a {
  text-transform: none !important;
}

/* Menu off-canvas mobile dựng lại CÙNG MỘT cây trình đơn với desktop, nên nó
   lôi theo hai thứ chỉ dành cho bảng mega desktop:
     · đoạn mô tả 12px của mỗi thẻ — nhồi vào danh sách dọc thì rối mù;
     · mục tiêu đề (.t4-mega-dau) — lặp lại đúng tên mục cha ngay bên trên.
   Figma vẽ menu mobile thành node RIÊNG (1015:20521), không có hai thứ này.
   Ẩn bằng CSS chứ KHÔNG xoá khỏi trình đơn — bản desktop vẫn cần chúng. */
#main-menu .t4-mega-mo-ta,
#main-menu li.t4-mega-dau {
  display: none;
}


/* ── §8 widget chat (dòng 904–990 của style.css cũ) ──────────────────── */

/* --------------------------------------------------------------------------
   8. WIDGET CHAT NỔI GÓC PHẢI (desktop 163:7441 · mobile 1093:9543)
   --------------------------------------------------------------------------
   ⚠ Node Figma này là ẢNH CHỤP một widget HubSpot dán vào bản thiết kế — tên
   lớp còn nguyên "Iframe", "Html → Body", "Button - Close welcome page →", và
   chữ trong bong bóng là "👋 Want to chat about HubSpot? I'm an AI chatbot…".
   Theo luật 0 (bàn giao 16/08): dựng ĐÚNG hình học và màu của Figma, nhưng
   GIỮ nội dung tiếng Việt thật của 4T thay vì chép chữ HubSpot. Hai thứ cố ý
   KHÔNG theo Figma, đã ghi vào qa/danh-sach-danh-doi.md:
     · chữ trong bong bóng (chữ giữ chỗ của HubSpot)
     · chiều cao bong bóng 177px (ảnh chụp còn phần giao diện HubSpot phía
       dưới; bong bóng của ta cao theo nội dung thật)
   -------------------------------------------------------------------------- */
/* Figma: mép phải nút cách mép phải khung 85px, đáy nút cách đáy 36px. */
.t4-chat { position: fixed; right: 85px; bottom: 36px; z-index: 700; }

/* Figma desktop xếp hai nút NẰM NGANG (camel x=134,5 · xanh x=205, cùng
   y=184,8 → cách nhau 10,5px), mobile mới xếp DỌC. Trước đây xếp dọc ở cả
   hai khổ. Căn phải để mép phải nút xanh trùng mép phải bong bóng 250px —
   khi đó nút camel tự rơi đúng x=119,5 của Figma, không cần đặt tay. */
.t4-chat-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 10.5px;
  align-items: flex-end;
}

/* [figma] trang3 · section chaythue — 2 lớp rộng 60px: '532:1391' · '532:1387'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 3 để chọn) */
.t4-chat-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--t4-leaf);
  color: var(--t4-white);
  /* Figma: hai lớp bóng chồng nhau, không phải một */
  box-shadow: 0 2px 12px rgba(0, 0, 0, .2), 0 1px 4px rgba(0, 0, 0, .1);
  text-decoration: none;
  transition: transform .2s ease;
  flex: 0 0 auto;
}
.t4-chat-btn:hover { transform: scale(1.06); color: var(--t4-white); }
.t4-chat-btn--phone { background: var(--t4-camel); }
.t4-chat-btn .material-symbols-outlined { font-size: 30px; }

/* [figma] luật dùng chung — lớp rộng 250px có ở 2 trang; đại diện: trang3:'1093:12989' · trang4:'1113:9028'
   (tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */
.t4-chat-bubble {
  position: relative;
  width: 250px;
  background: #efe8da;          /* Figma #EFE8DA — kem, KHÔNG phải trắng */
  border-radius: 8px;           /* Figma 8, không phải 12 */
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .28);
  padding: 16px;
  margin-bottom: 8px;           /* Figma: đáy bong bóng 176,8 → nút 184,8 */
  font-size: 14px;
  line-height: 24px;            /* Figma lh=24, không phải 22 */
  color: #141414;
}

.t4-chat-bubble button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border: 0;
  background: none;
  color: var(--t4-muted);
  cursor: pointer;
  line-height: 1;
}

.t4-chat.is-collapsed .t4-chat-bubble { display: none; }

@media (max-width: 849px) {
  /* Figma 1093:9543: nút cách mép phải 17px, cách đáy 91px (thanh nút đáy
     cao 70 → còn hở 21px). Bong bóng KHÔNG xuất hiện ở bản mobile. */
  .t4-chat { right: 17px; bottom: 91px; }
  .t4-chat-bubble { display: none; }
  /* Figma mobile: 45×45, xếp DỌC, camel TRÊN xanh DƯỚI, cách nhau 11px
     (y=182 và y=238). Khác hẳn desktop — đừng suy từ desktop ra. */
  .t4-chat-buttons { flex-direction: column; align-items: flex-end; gap: 11px; }
  .t4-chat-btn { width: 45px; height: 45px; }
  .t4-chat-btn .material-symbols-outlined { font-size: 24px; }
}


/* ── §9 tiện ích dùng lại (dòng 991–1032 của style.css cũ) ──────────────────── */

/* --------------------------------------------------------------------------
   9. TIỆN ÍCH DÙNG LẠI
   -------------------------------------------------------------------------- */
.t4-container {
  max-width: var(--t4-container);
  margin: 0 auto;
  padding: 0 15px;
}

.t4-section { padding: 100px 0; }

@media (max-width: 849px) {
  .t4-section { padding: 48px 0; }
  .t4-container { padding: 0 30px; }
}

.t4-scroll-x { display: grid; gap: 24px; }

@media (max-width: 849px) {
  .t4-scroll-x {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-right: -15px;
  }
  .t4-scroll-x > * { flex: 0 0 82%; scroll-snap-align: start; }
  .t4-scroll-x::-webkit-scrollbar { display: none; }
}

.t4-only-desktop { display: block; }
.t4-only-mobile { display: none; }

@media (max-width: 849px) {
  .t4-only-desktop { display: none; }
  .t4-only-mobile { display: block; }
}

.t4-img { max-width: 100%; height: auto; display: block; }


/* --------------------------------------------------------------------------
   BA LỚP TÔ NHẤN TRONG CHỮ — mô-típ dùng chung (III.4.0)
   [phục vụ] <span> bên trong phần tử Text | [trang] toàn site
   [figma] Color Style "Camel Brown" #CF9156 · "Leaf Green" #458763
   [lý do vượt panel] panel Text không đổi màu được một CỤM giữa câu

   ⛔ III.2 chỉ cho <span> mang ĐÚNG BA lớp này, nên đây là danh sách ĐÓNG:
   thêm lớp thứ tư là sửa bộ luật chứ không phải sửa CSS. Trước đây mỗi khối
   tự đặt tên riêng ('t4h-fw-cam', 't4h-dv-cam'…) và bộ kiểm T0 bắt hết.

   'accent' cố ý KHÔNG khai kiểu ở đây: nó là lớp "nhấn theo NGỮ CẢNH", mỗi
   khối tự định nghĩa nhấn cái gì — chữ "4" của logo dùng phông Poltawski,
   chữ "V" của VISION phóng to 26px. Khai một kiểu chung cho nó là đoán bừa.
   -------------------------------------------------------------------------- */
.t4 .hl-camel { color: var(--t4-camel); }
.t4 .hl-green { color: var(--t4-leaf); }


/* ══════════════════════════════════════════════════════════════════════════
   BREADCRUMB — DỜI TỪ '40-page-xu-ly-loi-sai-google-ads.css' (20/08/2026)

   Breadcrumb là component TOÀN SITE: đo bằng CSSOM trên 8 trang khác nhau thì
   16 luật này khớp ở mọi trang, dù chúng nằm trong một mô-đun mang tên trang
   #4. Đây là một trong 151 luật của mô-đun 40 rò ra ngoài phạm vi — nguyên
   nhân gốc khiến 'functions.php' chưa nạp CSS theo trang được (xem
   'qa/soat-css.md').

   ⚠ Dời sang đây là dời SỚM hơn trong tầng bậc (30 nạp trước 40–51). Đã kiểm:
   sau dòng cuối cùng của ba khối này, mô-đun 40 KHÔNG còn luật nào chạm
   't4fx-crumb', nên không có cặp nào đổi thắng thua. Các mô-đun 41–51 vốn đã
   nạp SAU 40 nên quan hệ với chúng không đổi.

   Giữ NGUYÊN thứ tự ba khối A → B → C: '.t4fx-crumb li' và '.t4fx-crumb ol'
   được khai HAI LẦN (khối A rồi khối B đè lên), đảo là đổi kết quả.
   ══════════════════════════════════════════════════════════════════════════ */
/* --------------------------------------------------------------------------
   11.1 BREADCRUMB (Figma 1015:14115 · mobile 1113:23113)
   Nền kem, khung trong 1060 tại x=420 — KHÁC 1080@410 của các section khác,
   giữ đúng như Figma vẽ. Cao 70 = 24 đệm trên + 22 nội dung + 24 đệm dưới.
   -------------------------------------------------------------------------- */
.t4fx-crumb { background: var(--t4-cream); }
.t4fx-crumb-in { max-width: 1060px; margin: 0 auto; padding: 24px 0; }
.t4fx-crumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap;
  font-family: var(--t4-font-body);
  font-size: 13.9px; line-height: 22px; font-weight: 600;
}
/* Ghim chiều cao mục: icon chevron cao 14px nhưng ô chứa nó cao 22 — để flex
   tự tính là hàng cao 30px và breadcrumb dôi 8px. */
.t4fx-crumb li { display: flex; align-items: center; height: 22px; }
.t4fx-crumb a { color: var(--t4-text); text-decoration: none; }
.t4fx-crumb a:hover { color: var(--t4-leaf); }
.t4fx-crumb [aria-current] { color: #000; }

/* [phục vụ] phần tử: breadcrumb child theme ('.t4fx-crumb a') | khối: mọi
   mục Home / chặng giữa của breadcrumb, TOÀN SITE (component dùng chung)
   [lý do vượt panel] breadcrumb do child theme in ra ('t4_html_duong_dan()'
   trong functions.php), không có phần tử builder / panel Flatsome nào.
   ⛔ Kiểm tương tác báo mọi mục breadcrumb 19–22px cao — dưới ngưỡng chạm
   24×24 (WCAG 2.5.8). Chữ/kích thước hiển thị GIỮ NGUYÊN đúng Figma (13,9px
   desktop / 10px mobile, cao dòng 22px) — chỉ NỚI VÙNG CHẠM bằng '::after'
   tuyệt đối, nới đều ra ngoài bằng inset ÂM để `kiem-tuong-tac.js` nhận đúng
   là lớp phủ vùng bấm (chỉ tính khi phần tử CÓ ĐỊNH VỊ và cả 4 cạnh pseudo
   đều khai, đều ≤0 — xem hàm 'hopBam'). 6px trên/dưới đủ đưa 22px → 34px,
   4px hai bên vẫn nằm gọn trong khe 20–32px của mũi tên phân cách, không
   chồng sang mục liền kề (cùng bẫy đã sửa ở footer '.ux-menu-link__link'). */
.t4fx-crumb a {
  position: relative;
}
.t4fx-crumb a::after {
  content: '';
  position: absolute;
  top: -6px; bottom: -6px;
  left: -4px; right: -4px;
}

.t4fx-crumb li + li::before {
  content: ""; flex: 0 0 auto; width: 32px; height: 14px;
  background: no-repeat center/6px 10px
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23292929' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 849px) {
  .t4fx-crumb-in { max-width: 352px; padding: 18px 0; }
  /* Figma mobile của TRANG NÀY là 10px (node 1113:23113), không phải 13px —
     13px là số của breadcrumb trang khác, đừng chép sang. */
  .t4fx-crumb ol { font-size: 10px; }
  .t4fx-crumb li + li::before { width: 20px; }
}

/* Breadcrumb: gỡ margin-left 20.8px của <li>, ghim cao 22, màu đúng Figma */
.t4fx-crumb li { margin-left: 0; }
.t4fx-crumb ol { height: 22px; }
.t4fx-crumb a,
.t4fx-crumb [aria-current] { color: rgba(0, 0, 0, .62); }
.t4fx-crumb li:first-child a { color: var(--t4-text); }


/* Breadcrumb nằm NGOÀI mọi [section] nên quy tắc gỡ margin <li> ở 11.14
   (bám '.section-content') không với tới — phải khai riêng. */
.t4 .t4fx-crumb li { margin-left: 0; list-style: none; }


/* ════════════════════════════════════════════════════════════════════════
   DỜI TỪ '40-page-xu-ly-loi-sai-google-ads.css' (20/08/2026)

   255 luật. Chúng nằm trong một mô-đun mang tên trang #4 nhưng KHỚP Ở NHIỀU
   TRANG KHÁC — đo bằng CSSOM trên 8 trang, kết quả ở 'qa/_luat-40-an-toan.json'.

   ⛔ THỨ TỰ TRONG KHỐI NÀY LÀ THỨ TỰ NGUỒN CỦA MÔ-ĐUN 40, ĐỬhNG SẮP LẠI.
   Nhiều bộ chọn được khai HAI–BA LẦN ('.t4fx-tabs', '.t4 .section-content >
   .row', '#casestudy .t4fx-head-2col > .col:first-child') và lần sau đè lần
   trước — đảo là đổi kết xuất mà không có gì báo.

   ⚠ Chú thích đi kèm được MANG THEO. Nếu một chú thích còn giải thích cả luật
   ở lại bên 40 thì nó xuất hiện ở CẢ HAI nơi — cố ý, thà lặp còn hơn mất.
   ════════════════════════════════════════════════════════════════════════ */

/* ==========================================================================
   40-page-xu-ly-loi-sai-google-ads.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 §11 trang #4 của bản gộp;
   không sửa một luật nào trong lần tách này.
   ========================================================================== *//* ── §11 trang #4 (dòng 1459–2597 của style.css cũ) ──────────────────── *//* ==========================================================================
   11. GIAI ĐOẠN D — TRANG "XỬ LÝ LỖI & VI PHẠM GOOGLE"

   ⛔ FOOTER CŨNG LÀ [section]/[row]/[col] — phải loại nó ra khỏi các quy tắc
   khung chung bên dưới, và loại bằng ':where(:not(.t4fx-footer))' chứ KHÔNG
   phải ':not(...)' trần.

   Vì sao bắt buộc là ':where()': ':not(.t4fx-footer)' CỘNG thêm độ ưu tiên
   của đối số, đẩy quy tắc chung từ (0,3,0) lên (0,4,0) — thế là nó quay ra
   thắng hàng loạt quy tắc riêng của từng khối, và trang nội dung từ 0 mốc
   lệch vọt lên 134. ':where()' có độ ưu tiên BẰNG KHÔNG nên lọc được footer
   mà giữ nguyên y hệt trật tự cascade cũ. Đã thử cả hai, số liệu ở bàn giao.

   Footer của demo1
   cũng là một UX Block gồm [section]/[row]/[col],
nên '.t4 .section-content
   > .row { max-width: 1110px }' viết cho trang nội dung sẽ kéo luôn footer
   sang 1110 và '.col { padding-bottom: 0 }' cắt mất 60px chiều cao của nó.
   Đã trả giá: footer đang 543/543 tụt xuống 508/543 mà trang nội dung vẫn
   báo 0 lệch — chỉ bộ gác cổng chạy CẢ header lẫn footer mới bắt được.
   Figma 711:16106 (desktop 1900) · 1113:8613 (mobile 402). Thêm 16/08/2026.

   Mọi con số dưới đây LẤY TỪ figma-spec/trang4.json, không ước lượng theo
   ảnh chụp. Kiểm lại bằng:
       python3 tools/dump-figma-spec.py trang4
       node scripts/do-thuc-te.js scripts/map-trang4.json qa/_do-trang4.json
       python3 tools/diff-giao-dien.py trang4
   ========================================================================== *//* --------------------------------------------------------------------------
   11.0 KHUNG TRANG NỘI DUNG — áp cho MỌI trang của Giai đoạn D

   ⛔ Flatsome bọc nội dung trang trong '.row-main' (max-width 1050px), nên
   [section] chỉ rộng 1050 và mọi nền section — ảnh hero, dải kem quy trình,
   nền kem CTA — bị cắt cụt thay vì tràn hết bề ngang như Figma. Gỡ bó ở đây
   MỘT LẦN cho cả 25 trang.

   Sau khi gỡ: .section rộng hết khung nhìn, còn bề rộng nội dung do .row
   quyết định. Figma dùng khung 1080; .row thường có đệm cột 15px mỗi bên nên
   max-width phải là 1110 để LÒNG cột đúng 1080. .row-collapse bỏ đệm cột nên
   dùng thẳng 1080.

   [figma] Container 1080 '532:4123' — xem "GIA ĐÌNH SỐ KHUNG" đầu tệp.
   -------------------------------------------------------------------------- *//* ⬆ Hai luật '#content.page-wrapper > .row-main' đã DỜI sang '10-base.css'
   (20/08/2026): chúng gỡ khung mặc định của Flatsome cho MỌI trang, không
   riêng trang #4. Chú thích gốc ở ngay trên vẫn giữ vì nó giải thích cả các
   luật '.t4 .section:where(...)' phía dưới — phần đó KHÔNG dời. */
.t4 .section:where(:not(.t4fx-footer)) .section-content > .row {
  max-width: 1110px;
  margin-left: auto;
  margin-right: auto;
}
.t4 .section:where(:not(.t4fx-footer)) .section-content > .row.row-collapse { max-width: 1080px; }

/* Cột Flatsome mang sẵn 'padding: 0 15px 30px' — 30px đáy đó là khoảng cách
   không có trong Figma, cộng dồn qua 22 hàng thì lệch cả trăm px. */
.t4 .section:where(:not(.t4fx-footer)) .section-content .col { padding-bottom: 0; }

/* [ux_text] render thành .text; bỏ khoảng cách mặc định, từng khối tự khai. */
.t4 .section:where(:not(.t4fx-footer)) .section-content .text { margin: 0; }

/* [ux_image] render .img > .img-inner > img */
.t4 .section:where(:not(.t4fx-footer)) .section-content .img img { display: block; width: 100%; height: auto; }

/* ⛔ ẨN/HIỆN THEO BREAKPOINT KHI GHÉP VÀO .row — đã trả giá 16/08/2026.
   Mục 9 khai '.t4-only-desktop { display: block }'. Đặt lớp đó lên một .row
   là ép .row từ FLEX xuống BLOCK ⇒ các cột thôi nằm ngang, xếp dọc hết, và
   section cao gấp đôi. Bản demo đã dính đúng bẫy này một lần (ghi ở mục 17
   style.css của demo) nhưng ở đó chỉ hỏng chiều ẩn; bên Flatsome hỏng cả
   chiều hiện. Vì vậy phải khai LẠI display cho đúng loại phần tử.
   -------------------------------------------------------------------------- */
.t4 .section-content > .row.t4-only-desktop { display: flex; }
.t4 .section-content > .row.t4-only-mobile { display: none; }

@media (max-width: 849px) {
  .t4 .section-content > .row.t4-only-desktop { display: none; }
  .t4 .section-content > .row.t4-only-mobile { display: flex; }

}

/* --------------------------------------------------------------------------
   11.2 HERO (Figma 711:16145 · mobile 1113:8634)
   Cao 480 desktop / 650 mobile, ảnh nền phủ đen 25%.
   Khối chữ desktop: eyebrow y=146, H1 y=179, hàng nút y=279 (cao 56).
   -------------------------------------------------------------------------- */
.t4fx-hero .section-content { width: 100%; }
.t4fx-hero .t4fx-hero-eyebrow p {
  font-family: var(--t4-font-body);
  font-size: 24px; line-height: 32.784px; font-weight: 500;
  color: var(--t4-light); text-transform: none; margin: 0;
}
.t4 .t4fx-hero h1 {
  font-family: var(--t4-font-head);
  font-size: 40px; line-height: 53px; font-weight: 600;
  color: var(--t4-light); margin: 0;
}

/* Hai nút: Figma 185×56 và 265×56, bo 5, viền 2px.
   ⚠ Nút camel khai viền #000000 nhưng ĐỘ MỜ 0 — tức KHÔNG có viền. Dựng viền
   đen theo mã màu là vẽ ra một đường kẻ Figma không hề hiển thị. *//* ⛔ 'display: flex' ở đây và '.t4-only-mobile { display: none }' của
   30-components CÙNG độ cụ thể (0,1,0), mà 30 nạp TRƯỚC 40 ⇒ luật này thắng
   và ô dành cho điện thoại vẫn hiện trên desktop. Phải khai riêng cho từng
   ô, không khai chung cho lớp '.t4fx-hero-nut'. *//* ⛔ Giữ 'display: flex' MẶC ĐỊNH: ba trang GGM dùng cùng lớp này nhưng
   KHÔNG tách theo khổ, bỏ flex đi là nút của chúng xếp sai ngay. Chỉ hai ô
   mang 't4-only-*' mới cần ẩn/hiện. */
.t4fx-hero-nut { margin-top: 47px; display: flex; justify-content: center; gap: 16px; }
.t4fx-hero-nut.t4-only-mobile { display: none; }

@media (max-width: 849px) {
  .t4fx-hero-nut.t4-only-desktop { display: none; }
  .t4fx-hero-nut.t4-only-mobile { display: flex; }

/* [figma] luật dùng chung — lớp rộng 185px có ở 4 trang; đại diện: trang4:'711:16160' · trang5:'712:20837' · trang6:'715:23139' · trang7:'715:24012'
   (tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */
}
.t4 .t4fx-nut {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; border-radius: 5px; border: 2px solid transparent;
  font-family: var(--t4-font-body);
  font-size: 18px; line-height: 32px; font-weight: 700;
  text-decoration: none; transition: opacity .2s ease;
}
.t4 .t4fx-nut--trang {
  width: 185px; background: var(--t4-white);
  border-color: var(--t4-camel); color: var(--t4-camel);
}
.t4 .t4fx-nut--vien { width: 265px; background: var(--t4-camel); color: var(--t4-white); }
.t4 .t4fx-nut:hover { opacity: .88; }

@media (max-width: 849px) {
  .t4 .t4fx-hero h1 { font-size: 32px; line-height: 43px; }

/* [figma] trang4 · section hero_mb — 2 lớp rộng 271px: '1113:8650' · '1113:8652'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 4 để chọn) */
/* Figma mobile: hai nút 271×44 xếp DỌC cách nhau 16px, bắt đầu y=458 trong
     section cao 650 (H1 kết thúc y=201). */
  .t4fx-hero-nut { flex-direction: column; align-items: center; gap: 16px; margin-top: 257px; }
  .t4 .t4fx-nut { width: 271px; height: 44px; font-size: 14px; line-height: 32px; }

}

/* --------------------------------------------------------------------------
   11.3 NHÃN SECTION — dùng lại mô-típ .t4-label (mục 3), chỉ chỉnh khoảng cách
   -------------------------------------------------------------------------- */
.t4fx-nhan { margin-bottom: 0; }
.t4fx-nhan > span,
.t4fx-nhan > p { line-height: 19.124px; }
.t4 .t4fx-h2-moss { color: var(--t4-dark-moss); }

/* --------------------------------------------------------------------------
   11.4 HAI CỘT CHỮ | MINH HOẠ

   Bề rộng cột ghim thẳng theo Figma chứ KHÔNG dùng tỉ lệ 5/12–7/12: 5/12 của
   1080 ra 450, Figma cần 528. Cột Flatsome có đệm 15px mỗi bên nên bề rộng
   cột = bề rộng nội dung + 30; 'space-between' lo phần khe còn lại.
   -------------------------------------------------------------------------- */
.t4fx-split { justify-content: space-between; }

/* Mô tả dịch vụ: chữ 528 | minh hoạ 506, khe 46 (Figma 715:25409) */
#mo-ta-dich-vu .t4fx-split > .col:first-child { flex: 0 0 558px; max-width: 558px; }
#mo-ta-dich-vu .t4fx-split > .col:last-child { flex: 0 0 536px; max-width: 536px; }

/* Quy trình: chữ 495 | minh hoạ 506 (Figma 711:16416) */
.t4fx-qt-dai .t4fx-split > .col:first-child { flex: 0 0 525px; max-width: 525px; }
.t4fx-qt-dai .t4fx-split > .col:last-child { flex: 0 0 536px; max-width: 536px; }

/* Lý do: minh hoạ 506 BÊN TRÁI | chữ 520 (Figma 711:16429) — khác trang #3,
   ở đó minh hoạ luôn bên phải. */
#ly-do .t4fx-split > .col:first-child { flex: 0 0 536px; max-width: 536px; }
#ly-do .t4fx-split > .col:last-child { flex: 0 0 550px; max-width: 550px; }

/* --------------------------------------------------------------------------
   11.5 MÔ TẢ DỊCH VỤ (Figma 715:25409 · mobile 1113:8655)
   Thân bài giãn dòng 30 — KHÁC 26 của phần còn lại site.
   -------------------------------------------------------------------------- */
#mo-ta-dich-vu .t4fx-split { margin-top: 80px; }
#mo-ta-dich-vu .t4fx-split .text + .text { margin-top: 24px; }
#mo-ta-dich-vu .t4fx-chu p { font-size: 16px; line-height: 30px; margin: 0 0 24px; }
#mo-ta-dich-vu .t4fx-chu p:last-child { margin-bottom: 0; }

/* Đoạn kết: Figma tô đậm + xanh đậm (ghi đè ký tự trên node 715:25541) */
#mo-ta-dich-vu .t4fx-chu p.t4fx-nhan-manh { font-weight: 700; color: var(--t4-dark-moss); }

@media (max-width: 849px) {

/* Bản mobile là NỘI DUNG KHÁC: ảnh 270×200 canh giữa, rồi H2, rồi 4 đoạn */
  #mo-ta-dich-vu .t4-only-mobile { margin-top: 80px; }
  .t4fx-mota-anh-mb { margin: 0 auto; width: 270px; }
  .t4 .t4fx-mota-mb-h2 { margin: 24px 0 0; }
  #mo-ta-dich-vu .t4-only-mobile .text + .text { margin-top: 24px; }

}

/* --------------------------------------------------------------------------
   11.6 ĐẦU SECTION HAI CỘT (tiêu đề trái | mô tả phải)
   Gói dịch vụ: 397 | 511. Casestudy: 316 | 511.
   [figma] Heading 2 397 '277:2541' · Container 511 '772:7343' ·
           Heading 2 316 '532:4680' ("Remarkable res…")
   ⚠ 427 = 397+30 và 541 = 511+30 — đệm cột, không phải số Figma.
   -------------------------------------------------------------------------- */
.t4fx-head-2col { margin-top: 32px; justify-content: space-between; }
.t4fx-head-2col .t4fx-chu p { margin: 0; }
#goi-dich-vu .t4fx-head-2col > .col:first-child { flex: 0 0 427px; max-width: 427px; }
#goi-dich-vu .t4fx-head-2col > .col:last-child { flex: 0 0 541px; max-width: 541px; }
#casestudy .t4fx-head-2col > .col:first-child { flex: 0 0 346px; max-width: 346px; }
#casestudy .t4fx-head-2col > .col:last-child { flex: 0 0 541px; max-width: 541px; }
.t4fx-goi .col-inner {
  height: 100%; background: var(--t4-white); padding-bottom: 26px;
  border: 1px solid rgba(0, 0, 0, .11); border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* ⛔ Ảnh KHÔNG nằm trong dải cao cố định, và tiêu đề KHÔNG bám ngay dưới ảnh.
   Đọc lại Figma từng thẻ mới ra cơ chế thật:

     ảnh   — mép trên đúng bằng padding của thẻ, cao TỰ NHIÊN (mỗi thẻ khác)
     nút   — neo đáy thẻ
     tiêu đề — CĂN GIỮA khoảng trống còn lại giữa ảnh và nút

   Kiểm chứng trên thẻ 2·3·4 ở cả hai khổ, khớp tuyệt đối:
     desktop  ảnh đáy 193/189/191 → tiêu đề 234/232/233 (giữa của 193..331)
     mobile   ảnh đáy 144/140/142 → tiêu đề 182/180/181 (giữa của 144..268)

   Bản trước dùng dải ảnh cao 158px và 'margin-top: 19px' cho tiêu đề, nên
   tiêu đề bám đỉnh thay vì căn giữa — sai 6px ở desktop và 12px ở mobile.
   Thẻ 1 vẫn lệch ~8px vì Figma đặt tay lệch riêng thẻ đó (xem qa/…). */
.t4fx-goi-hinh { display: flex; align-items: center; justify-content: center; width: 100%; }
.t4fx-goi-hinh img { max-width: 100%; }

/* ⚠ 'margin: auto' phải đặt trên PHẦN TỬ CON CỦA FLEX, không phải trên thẻ
   chữ bên trong. UX Builder bọc [ux_text] trong một <div class="text">, nên
   con của .col-inner là div đó chứ không phải <h3>. Đặt nhầm chỗ thì margin
   auto không phân phối gì cả — đã dính, thẻ 2·3·4 lệch lên 29px. */
.t4 #goi-dich-vu .t4fx-goi .col-inner > .text { margin: auto 0 !important; }

/* Rule cũ ở mục 12 cộng thêm 11px trên tiêu đề; giữ lại thì khối chữ cao 67px
   thay vì 56px và phép căn giữa lệch đi đúng 11px. Gỡ trong phạm vi thẻ gói. */
.t4 #goi-dich-vu .t4fx-goi-ten { margin-top: 0 !important; }

/* ⚠ THẺ 1 KHÔNG theo quy tắc căn giữa — Figma đặt tay lệch riêng thẻ này.
   Ba thẻ kia: tiêu đề đúng giữa khoảng ảnh↔nút (đã khớp 0,0px ở desktop).
   Thẻ 1 thì Figma đặt tiêu đề CAO HƠN tâm 8px (desktop) và 12px (mobile).
   Vì mục tiêu là giống Figma 100% nên ép đúng số của Figma, không "sửa lại
   cho hợp quy tắc". Ai đọc sau đừng gộp bốn thẻ về một công thức.

   desktop: khoảng trống 325−(158+84+44)=39 → trên 11,5 / dưới 27,5
   mobile : khoảng trống 265−(120+72+36)=37 → trên  6,5 / dưới 30,5 *//* Lề DƯỚI để 'auto' chứ không phải số cố định: có vậy nút mới neo đáy thẻ
   như ba thẻ kia, còn tiêu đề vẫn giữ đúng khoảng cách Figma tính từ ảnh. */
.t4 #goi-dich-vu .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .col-inner > .text {
  margin: 10.5px 0 auto !important;
}

@media (max-width: 849px) {
  .t4 #goi-dich-vu .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .col-inner > .text {
    margin: 5.5px 0 auto !important;
  }

}
.t4 .t4fx-goi-ten {
  font-family: var(--t4-font-body); font-weight: 600;
  font-size: 22px; line-height: 28px; color: var(--t4-text); margin: 0;
}
.t4fx-goi .button.t4fx-nut-xanh { margin: 0; width: 100%; }

/* Nút xanh lá đặc — Figma 226×44, bo 5, nền #458763, chữ Manrope 16/24 w600 */
.t4 .button.t4fx-nut-xanh {
  min-height: 44px; border-radius: 5px; box-shadow: none;
  background-color: var(--t4-leaf); border-color: var(--t4-leaf);
  color: var(--t4-white);
  font-family: var(--t4-font-body); font-weight: 600;
  font-size: 16px; line-height: 24px; text-transform: none; letter-spacing: 0;
}
.t4 .button.t4fx-nut-xanh:hover,
.t4 .button.t4fx-nut-xanh:focus {
  background-color: var(--t4-dark-moss); border-color: var(--t4-dark-moss);
  color: var(--t4-white);
}
.t4 .button.t4fx-nut-xanh span { line-height: 24px; }

@media (max-width: 849px) {
  .t4fx-goi-row::-webkit-scrollbar { display: none; }
  .t4fx-goi-row > .col.t4fx-goi {
    flex: 0 0 258px !important; max-width: 258px; width: 258px;
    scroll-snap-align: start; padding-left: 0; padding-right: 16px;
  }
  .t4 .t4fx-goi-ten { font-size: 18px; line-height: 24px; }
  .t4 .button.t4fx-nut-xanh { font-size: 14px; }

}
.t4fx-qt-kicker p {
  font-family: var(--t4-font-body); font-weight: 700;
  font-size: 25px; line-height: 34.15px; color: #213343; margin: 0;
}
.t4fx-qt-dai .t4fx-split { margin-top: 39px; }
.t4fx-qt-dai .t4fx-split .text + .text { margin-top: 16px; }
.t4fx-qt-dai .t4fx-chu p { color: #213343; margin: 0; }

/* Nửa dưới: hai thẻ giai đoạn 518×355 bo 10 + hộp lưu ý 1060×185 bo 10
   [figma] thẻ 518×355 '712:20335' + '712:20336', cùng nằm trong khung
   1060×564 '712:20375'. Cộng dồn: 518×2 + khe 24 = 1060 ✓
   1090 dưới đây = 1060 + 30 đệm cột (GIA ĐÌNH SỐ KHUNG đầu tệp).       */
.t4fx-qt-duoi .section-content > .row { max-width: 1090px; }

/* 1060+30 — Container '532:4139', xem GIA ĐÌNH SỐ KHUNG đầu tệp *//* ⛔ 60px, KHÔNG phải 100. Figma trang #4: khối giai đoạn kết thúc
   y=1100, khung 1160 ⇒ đáy đúng 60. Con số 100 cũ làm khối Quy trình
   thừa 41px — bảng dày không thấy vì dưới thẻ cuối không còn mốc nào
   (đúng lỗ hổng II.K-1). Nhóm GGM đã tự khai 60 ở 44-nhom-ggm. */
.t4fx-qt-duoi { padding-bottom: 60px !important; }
.t4fx-qt-duoi .t4fx-gd-luoi { margin-top: 48px; justify-content: space-between; }
.t4fx-qt-duoi .t4fx-gd-luoi > .col { flex: 0 0 548px; max-width: 548px; }
.t4fx-gd,
.t4fx-luu-y {
  border: 1px solid rgba(0, 0, 0, .11); border-radius: 10px; padding: 24px 28px;
}
.t4 .t4fx-gd h3 {
  font-family: var(--t4-font-body); font-weight: 700;
  font-size: 16px; line-height: 26px; color: var(--t4-dark-moss); margin: 0;
}
.t4fx-gd p,
.t4fx-luu-y p { font-size: 14px; line-height: 22px; color: #000; margin: 0; }

@media (max-width: 849px) {
  .t4fx-qt-dai .t4fx-split { margin-top: 0; }

}

/* --------------------------------------------------------------------------
   11.9 LÝ DO ĐỒNG HÀNH (Figma 711:16429 · mobile 1113:9461)
   Danh sách 11 mục xếp 2 cột 498, khe 48, dòng cách 16. Kẻ ngang ở y=572.
   -------------------------------------------------------------------------- */
#ly-do .t4fx-split { margin-top: 80px; padding-bottom: 32px; }
#ly-do .t4fx-split .text + .text { margin-top: 24px; }
#ly-do .t4fx-chu p { margin: 0; }
#ly-do .t4fx-split + .row { border-top: 1px solid rgba(0, 0, 0, .11); }

@media (max-width: 849px) {
  #ly-do .t4fx-split { margin-top: 85px; padding-bottom: 0; }
  #ly-do .t4fx-split + .row { border-top: 0; }

}

/* --------------------------------------------------------------------------
   11.10 CASESTUDY (Figma 712:20493 · mobile 1113:9698)

   ⚠ QUYẾT ĐỊNH (luật 0 — ghi ở qa/danh-sach-danh-doi.md): ruột bảng tab
   trong Figma là NỘI DUNG MẪU CỦA HUBSPOT — tiếng Anh, tên "Adam Jones",
   ảnh Unipart-1.png, số liệu "12 months / 5 point increase". Dựng nguyên văn
   là đưa lời chứng thực GIẢ bằng tiếng Anh lên site khách Việt. Nên dựng
   ĐÚNG KHUNG (thanh tab 54px, bảng trắng 1080×492 bo 10 viền 1px .11) và GIỮ
   chữ giữ chỗ tiếng Việt của 4T — y như đã quyết cho widget chat ở phiên 8.
   -------------------------------------------------------------------------- */
.t4fx-nhan-hang a.button.t4fx-xem-tat-ca,
.t4fx-nhan-hang .t4fx-xem-tat-ca {
  display: inline-flex; align-items: center; justify-content: center;
  height: 35px; padding: 0 30px; border-radius: 5px;
  border: 1px solid var(--t4-dark-moss);
  font-family: var(--t4-font-body); font-weight: 700;
  font-size: 14px; line-height: 19.124px;
  color: var(--t4-dark-moss); text-decoration: none;
}
.t4fx-nhan-hang a.button.t4fx-xem-tat-ca:hover,
.t4fx-nhan-hang .t4fx-xem-tat-ca:hover { background: var(--t4-dark-moss); color: var(--t4-white); }
.t4fx-nhan-hang > .col:last-child .col-inner { text-align: right; }

/* Thanh tab: 4 tab liền nhau canh giữa, gạch dưới 4px camel cho tab đang mở */
.t4fx-tabs { margin-top: 32px; border-top: 1px solid rgba(0, 0, 0, .11); padding-top: 32px; }
.t4 .t4fx-tabs .nav-line { justify-content: center; margin: 0; border: 0; }
.t4 .t4fx-tabs .nav-line > li { margin: 0; }
.t4 .t4fx-tabs .nav-line > li > a {
  height: 54px; padding: 12px 16px; margin: 0;
  border: 0; border-bottom: 4px solid transparent;
  font-family: var(--t4-font-body); font-weight: 500;
  font-size: 16px; line-height: 30px; text-transform: none;
  letter-spacing: 0; color: var(--t4-text); opacity: 1;
}
.t4 .t4fx-tabs .nav-line > li.active > a {
  color: var(--t4-dark-moss); border-bottom-color: var(--t4-camel);
}
.t4 .t4fx-tabs .nav-line > li > a::before { display: none; }

/* ⚠ Không có quy tắc ẩn bảng chưa mở thì CẢ BỐN bảng cùng hiện và section
   cao gấp gần ba lần Figma. Đừng bỏ hai dòng dưới. */
.t4 .t4fx-tabs .tab-panels > .panel { display: none; }
.t4 .t4fx-tabs .tab-panels > .panel.active { display: block; }
.t4 .t4fx-tabs .tab-panels {
  background: var(--t4-white);
  border: 1px solid rgba(0, 0, 0, .11); border-radius: 10px;
  min-height: 492px; margin-top: 24px; padding: 32px;
}
.t4fx-case-cho h3 { margin: 0 0 8px; }
.t4fx-case-cho p { color: var(--t4-muted); margin: 0; }

/* [phục vụ] khối casestudy placeholder SAU khi tách làm hai ô văn bản (T0).
   ⛔ Khe 8px trước đây do 'h3 { margin-bottom: 8px }' giữ. Tách ra thì '<h3>'
   thành con CUỐI của ô và Flatsome triệt lề dưới của con cuối trong '.text' —
   đo được khe tụt 8 → 0, panel 66 → 58. Phải trả lại bằng lề TRÊN của ô mô tả.
   Chỉ trang đã tách mới có hai lớp này nên ba trang còn lại không đổi gì. *//* ⛔ Phải đủ (0,5,0): nền '.t4 .section:where(:not(.t4fx-footer))
   .section-content .text { margin: 0 }' là (0,4,0) — ':where()' đếm 0 nhưng
   bốn lớp kia thì không. Bản đầu viết '.t4 .t4fx-cc-mo' (0,2,0) và **không
   đổi một pixel nào**, y như chưa đẩy CSS. */
.t4 .section .section-content .text.t4fx-cc-mo { margin-top: 8px; }

@media (max-width: 849px) {
  .t4fx-tabs { margin-top: 32px; padding-top: 24px; }
  .t4 .t4fx-tabs .nav-line { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  .t4 .t4fx-tabs .nav-line > li > a { font-size: 14px; padding: 12px; white-space: nowrap; }
  .t4 .t4fx-tabs .tab-panels { min-height: 456px; padding: 20px; }

}
.t4fx-cta-the .col-inner { border-radius: 10px; }
.t4fx-cta-the .text + .text { margin-top: 17px; }
.t4fx-cta-the .t4fx-chu p { margin: 0; }
.t4fx-cta-the .button.t4fx-nut-xanh {
  margin: 41px 0 0; float: right; min-height: 46px; padding: 0 40px;
}
.t4fx-cta-the .button.t4fx-nut-xanh span { font-size: 16px; line-height: 21.856px; font-weight: 700; }
.t4fx-cta-the .col-inner::after { content: ""; display: table; clear: both; }

/* [figma] luật dùng chung — lớp rộng 224px có ở 2 trang; đại diện: trang3:'268:4578' · trang4:'1113:9760'
   (tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */
@media (max-width: 849px) {
  .t4fx-cta-the .button.t4fx-nut-xanh {
    float: none; display: block; margin-top: 53px; width: 224px; margin-left: auto; margin-right: auto;
  }
  .t4fx-cta-the .button.t4fx-nut-xanh span { font-size: 14px; line-height: 19.124px; }

}

/* --------------------------------------------------------------------------
   11.12 VÁ SAU VÒNG ĐO THỨ NHẤT (16/08/2026) — 229 mốc lệch → xem
   qa/trang4-diff.md. Bốn nhóm nguyên nhân, ghi lại để đừng lặp:

   (a) ĐỆM CỘT 15px CỦA FLATSOME cộng vào mọi bề rộng ghim theo Figma. Khối
       nào cần bám đúng số đo Figma thì cho cột 'padding-left/right: 0' rồi
       ghim bề rộng bằng ĐÚNG số của Figma — đừng cộng trừ 30 cho mỗi khối.
   (b) '.t4 .section-content .text { margin: 0 }' ở 11.0 có độ ưu tiên (0,
3,
0),
ĂN ĐỨT mọi '.t4fx-* { margin-top }' một-class. Đúng bẫy "độ ưu tiên CSS"
       đã ghi ba lần ở CLAUDE.md — lần này nạn nhân là khoảng cách hero.
   (c) '<li>' của Flatsome có sẵn 'margin-left: 20.8px' (bẫy 5 của
       QUY-TRINH-GIONG-FIGMA). Danh sách nào tự vẽ chấm đầu dòng đều phải gỡ.
   (d) [tabgroup] KHÔNG nằm trong [row] nên nó rộng hết section, không phải
       1080 — phải tự ghim khung.
   -------------------------------------------------------------------------- *//* (b) khoảng cách hero — nâng đủ độ ưu tiên để thắng quy tắc gộp ở 11.0 */
.t4 .section-content .text.t4fx-hero-nut { margin-top: 47px; }

@media (max-width: 849px) {
  .t4 .section-content .text.t4fx-hero-nut { margin-top: 257px; }

}

/* Chip nhãn nằm giữa ô cao 45 (Figma: chip 29 trong Container 45) */
.t4fx-nhan { height: 45px; }

/* Tiêu đề H2 Playfair 40px của Figma có giãn chữ -1,2px */
.t4 .section-content h2 { letter-spacing: -1.2px; }
.t4 .section-content .t4fx-goi-ten,
.t4 .section-content h3,
.t4 .section-content h4 { letter-spacing: 0; }

/* Giãn dòng/màu phải đặt trên CHÍNH khối .text — bộ đo lấy computed style của
   phần tử được ánh xạ, không phải của <p> con. */
#mo-ta-dich-vu .t4fx-chu,
#mo-ta-dich-vu .t4fx-chu p { line-height: 30px; }
#quy-trinh .t4fx-chu,
#quy-trinh .t4fx-chu p { color: #213343; }
.t4fx-goi-row > .col.t4fx-goi {
  flex: 0 0 258px; max-width: 258px; padding-left: 0; padding-right: 0;
}
.t4fx-goi .col-inner { min-height: 400px; }

/* (a) ĐẦU SECTION HAI CỘT — Figma: gói 397|511, casestudy 316|511
   [figma] khung 1080 '532:4123' · Heading 2 397 '277:2541' ·
   Container 511 '772:7343' · Heading 2 316 '532:4680'               */
.t4fx-head-2col { max-width: 1080px; justify-content: space-between; }
.t4fx-head-2col > .col { padding-left: 0; padding-right: 0; }
#goi-dich-vu .t4fx-head-2col > .col:first-child { flex: 0 0 397px; max-width: 397px; }
#goi-dich-vu .t4fx-head-2col > .col:last-child { flex: 0 0 511px; max-width: 511px; }
#casestudy .t4fx-head-2col > .col:first-child { flex: 0 0 316px; max-width: 316px; }
#casestudy .t4fx-head-2col > .col:last-child { flex: 0 0 511px; max-width: 511px; }

/* (a) HAI CỘT CHỮ | MINH HOẠ — ghim đúng số Figma, cột hết đệm
   [figma] cột 528 '803:35058' (528×80, trong Frame 150) · khung nhóm
   quy trình 1056×355 '712:19369'. Cộng dồn: 528×2 + khe 24 = 1080 ✓  */
.t4fx-split { max-width: 1080px; }
.t4fx-split > .col { padding-left: 0; padding-right: 0; }
#mo-ta-dich-vu .t4fx-split > .col:first-child { flex: 0 0 528px; max-width: 528px; }
#mo-ta-dich-vu .t4fx-split > .col:last-child { flex: 0 0 506px; max-width: 506px; }
.t4fx-qt-dai .t4fx-split { max-width: 1056px; }
.t4fx-qt-dai .t4fx-split > .col:first-child { flex: 0 0 495px; max-width: 495px; }
.t4fx-qt-dai .t4fx-split > .col:last-child { flex: 0 0 506px; max-width: 506px; }
#ly-do .t4fx-split > .col:first-child { flex: 0 0 506px; max-width: 506px; }
#ly-do .t4fx-split > .col:last-child { flex: 0 0 520px; max-width: 520px; }
.t4fx-qt-dai .section-content > .row > .col { padding-left: 0; padding-right: 0; }

/* (a) HAI THẺ GIAI ĐOẠN — 518px, khe 24, khung 1060
   [figma] '712:20335' · '712:20336' (518×355) trong '712:20375' (1060) */
.t4fx-qt-duoi .section-content > .row { max-width: 1060px; }
.t4fx-qt-duoi .section-content > .row > .col { padding-left: 0; padding-right: 0; }
.t4fx-qt-duoi .t4fx-gd-luoi > .col { flex: 0 0 518px; max-width: 518px; }
.t4fx-gd { min-height: 355px; }

/* (d) [tabgroup] nằm ngoài [row] nên rộng hết section — tự ghim khung 1080
   [figma] Container 1080 '532:4123'. Không cộng 30: '.t4fx-tabs' không
   phải '.col' nên không có đệm ngang.                                */
.t4fx-tabs { max-width: 1080px; margin-left: auto; margin-right: auto; }

/* Figma: tab ĐANG MỞ là tab 3, chữ #155446; ba tab kia #1f1f1f. Bên site tab 1
   mở sẵn — chỉ so KIỂU chữ của tab, không so tab nào đang mở. *//* (a) THẺ CTA — Figma đặt ở x=420 rộng 1079 (lệch phải 9,5px so với tâm) */
.t4fx-cta-hop .section-content > .row > .col { padding-left: 0; padding-right: 0; }

@media (max-width: 849px) {
  .t4fx-gd,
.t4fx-luu-y { min-height: 0; }

}

/* --------------------------------------------------------------------------
   11.13 VÁ SAU VÒNG ĐO THỨ HAI (16/08/2026) — 200 → xem qa/trang4-diff.md

   ⛔ BÀI HỌC LỚN NHẤT CỦA VÒNG NÀY: quy tắc khung ở 11.0 viết là
   '.t4 .section-content > .row' — độ ưu tiên (0,
3,
0). Mọi '.t4fx-* { max-width }'
   một-class (0,1,0) đặt sau nó đều THUA và im lặng không có tác dụng, nên
   hàng loạt khối vẫn rộng 1110 thay vì 1080 và lệch đúng 15px. Đây là lần
   thứ TƯ dự án dính bẫy độ ưu tiên CSS (CLAUDE.md bài học 19). Muốn ghi đè
   khung thì PHẢI viết đủ '.t4 .section-content > .row.<lớp>'.
   -------------------------------------------------------------------------- *//* Khung 1080 cho các hàng ghim theo Figma — đủ độ ưu tiên để thắng 11.0 */
.t4 .section-content > .row.t4fx-split,
.t4 .section-content > .row.t4fx-head-2col,
.t4 .section-content > .row.t4fx-goi-row,
.t4 .section-content > .row.t4fx-gd-luoi { max-width: 1080px; }
.t4 .section-content > .row.t4fx-nhan-hang { max-width: 1080px; }
.t4fx-qt-dai .section-content > .row.t4fx-split { max-width: 1056px; }
.t4 .t4fx-qt-duoi .section-content > .row.t4fx-gd-luoi { max-width: 1060px; }
.t4 .t4fx-qt-duoi .section-content > .row { max-width: 1060px; }
.t4 .t4fx-cta-hop .section-content > .row { max-width: 1079px; margin-left: 420px; }

/* Khối nhãn cao 61 (Figma: chip 29, cách mép trên 8, cách khối sau 24) */
.t4 .section-content .text.t4fx-nhan {
  height: 29px; margin-top: 8px; margin-bottom: 24px;
}

/* Hai thẻ giai đoạn + hộp lưu ý: Figma KHÔNG có nền, KHÔNG có viền — chỉ là
   khung bố cục bo 10. Vẽ viền vào là thêm một đường kẻ thiết kế không có. */
.t4fx-gd,
.t4fx-luu-y { border: 0; }

@media (max-width: 849px) {
  .t4fx-goi .col-inner {
    border-radius: 10px; min-height: 320px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .25);
  }
  .t4fx-goi-row > .col.t4fx-goi { padding-right: 16px; }
  .t4 .button.t4fx-nut-xanh { min-height: 36px; }
  .t4 .section-content > .row.t4fx-goi-row { max-width: none; }

}

/* --------------------------------------------------------------------------
   11.14 VÁ SAU VÒNG ĐO THỨ BA (16/08/2026)

   Ba nhóm còn lại, đều là "ghim số nhưng chưa đủ mạnh":
   (a) 'flex: 0 0 <px>' KHÔNG thắng được 'max-width: %' mà Flatsome đặt cho
       .medium-* / .large-* — phải khai thêm 'width' thì cột mới đúng bề rộng.
   (b) Khoảng cách SAU khối nhãn KHÁC NHAU theo từng section (Figma: 80 ở Mô
       tả/Lý do, 32 ở Quy trình/Casestudy, 16 ở Gói dịch vụ) — không có một
       con số dùng chung.
   (c) 'letter-spacing: -1.2px' CHỈ đúng cho H2 của Mô tả và Lý do; các H2
       khác Figma để 0. Áp cho mọi h2 là sai 6 chỗ.
   -------------------------------------------------------------------------- *//* (c) giãn chữ H2 — chỉ hai section có, phần còn lại về 0 *//* ⛔ LUẬT NÀY ĐANG BỊ TẮT CÓ CHỦ Ý — 17/08/2026. Đừng bỏ dấu chú thích.

   Nó ĐÃ CHẾT SUỐT từ lúc được viết mà không ai biết. Ngay phía trên, dòng
   nói về '.medium-*' và '.large-*' viết hai lớp đó liền nhau bằng một dấu
   gạch chéo, và cặp ký tự đó ĐÓNG SỚM khối chú thích đang mở. Mấy dòng văn
   xuôi tiếp theo thành CSS sống, trình duyệt bỏ qua cho tới khi đồng bộ lại
   được — và luật ngay dưới đây là thứ bị nuốt.

   Đã hỏi thẳng trình duyệt bằng CSSOM chứ không suy đoán: bản gộp CHƯA vá
   chú thích cho 1.276 luật, bản ĐÃ vá cho 1.278. Đúng hai luật sống lại, và
   đây là một trong hai.

   ⚠ Trang #4 được căn chỉnh tới 1816 ✅ / 0 ❌ TRONG LÚC luật này đang chết.
   Bật lên là bản mobile dôi 908px và bảng đo nhảy lên 32 ❌ — các vòng vá
   4→8 về sau đã bù trừ cho đúng chỗ nó bỏ trống. Bước tách mô-đun này vì
   vậy giữ nguyên trạng thái chết (III.7-3: "render không được lệch pixel"),
   chỉ đổi từ CHẾT DO TAI NẠN sang CHẾT CÓ KHAI BÁO.

   → Việc còn nợ: xét lại có thật cần letter-spacing 0 cho mọi h2 không.
     Muốn bật lại thì phải đo lại trang #4 và gỡ phần bù trừ của các vòng sau.

.t4 .section-content h2 { letter-spacing: 0; }
*/
#mo-ta-dich-vu .t4fx-h2-moss,
#ly-do .t4fx-h2-moss { letter-spacing: -1.2px; }

/* (b) khoảng cách sau khối nhãn, theo đúng từng section */
#mo-ta-dich-vu .text.t4fx-nhan,
#ly-do .text.t4fx-nhan { margin-bottom: 24px; }
#goi-dich-vu .text.t4fx-nhan { margin-bottom: 8px; }
#casestudy .text.t4fx-nhan { margin-bottom: 24px; }
#quy-trinh .text.t4fx-nhan { margin-bottom: 24px; }
#goi-dich-vu .t4fx-head-2col { margin-top: 8px; }
#casestudy .t4fx-nhan-hang { margin-bottom: 0; }

/* (a) ghim bề rộng cột bằng cả flex LẪN width */
.t4 .section-content > .row.t4fx-goi-row > .col.t4fx-goi { width: 258px; }
#mo-ta-dich-vu .t4fx-split > .col:first-child { width: 528px; }
#mo-ta-dich-vu .t4fx-split > .col:last-child { width: 506px; }
.t4fx-qt-dai .t4fx-split > .col:first-child { width: 495px; }
.t4fx-qt-dai .t4fx-split > .col:last-child { width: 506px; }
#ly-do .t4fx-split > .col:first-child { width: 506px; }
#ly-do .t4fx-split > .col:last-child { width: 520px; }
#goi-dich-vu .t4fx-head-2col > .col:first-child { width: 397px; }
#goi-dich-vu .t4fx-head-2col > .col:last-child { width: 511px; }
#casestudy .t4fx-head-2col > .col:first-child { width: 316px; }
#casestudy .t4fx-head-2col > .col:last-child { width: 511px; }
.t4fx-qt-duoi .t4fx-gd-luoi > .col { width: 518px; }

/* Thẻ CTA: bỏ đệm cột để thẻ đúng 1079 tại x=420 */
.t4 .t4fx-cta-hop .section-content > .row > .col { padding-left: 0; padding-right: 0; }

@media (max-width: 849px) {
  .t4 .section-content > .row.t4fx-goi-row { width: auto; max-width: none; }

/* Thẻ gói mobile: bo 10, cao 320, khe 16 */
  .t4 .section-content > .row.t4fx-goi-row > .col.t4fx-goi { width: 258px; }
  .t4fx-goi .col-inner { border-radius: 10px; }

/* Dải kem Quy trình mobile bắt đầu ở y=60 chứ không phải 0 */
  .t4fx-qt-dai { margin-top: 60px; }
  #quy-trinh .text.t4fx-nhan { margin-bottom: 24px; }

}

/* --------------------------------------------------------------------------
   11.15 ⛔ BẪY SỐ 4 CỦA QUY-TRINH-GIONG-FIGMA — '.row::after' CLEARFIX

   Flatsome gắn '.row::after { content: "" }' để clear float. Trong một hàng
   'display: flex' cái pseudo đó trở thành PHẦN TỬ FLEX THỨ N+1, nên
   'space-between' chia khoảng cho N+1 phần tử thay vì N.

   Đo được: hàng 4 thẻ gói rộng 1080, thẻ 258 → khe đúng phải là
   (1080−4×258)/3 = 16, nhưng ra 12 = 48/4. Hàng đầu section hai cột lệch
   đúng 86px = 172/2 thay vì 172/1. Không lỗi, không cảnh báo — chỉ sai số.

   Quy trình đã ghi bẫy này từ Giai đoạn C mà vẫn dính lại, vì lần trước nó
   biểu hiện ở 'space-between' của footer, lần này ở hàng thẻ.
   -------------------------------------------------------------------------- */
.t4 .section-content > .row.t4fx-goi-row::after,
.t4 .section-content > .row.t4fx-head-2col::after,
.t4 .section-content > .row.t4fx-split::after,
.t4 .section-content > .row.t4fx-gd-luoi::after,
.t4 .section-content > .row.t4fx-nhan-hang::after { display: none; }

@media (max-width: 849px) {
  .t4 #content .section { padding-left: 0; padding-right: 0; }

}

/* --------------------------------------------------------------------------
   11.17 VÁ VÒNG BỐN — bốn nguyên nhân, đều đo được chứ không đoán

   (a) '.section' của Flatsome có 'padding: 30px' ở MỌI khổ, không riêng
       mobile. Ở desktop nó đẩy '.section-content' sang x=30, nên thẻ CTA
       (căn bằng 'margin-left: 420px') rơi vào 450. Gỡ đệm ngang ở cả hai khổ.
   (b) Chip nhãn của Figma có 'letter-spacing: 0.14px'. Nhỏ tới mức nhìn
       không thấy, nhưng nhân với số ký tự thì chip "Lý do bạn nên đồng hành
       cùng 4T" hụt đúng 4,2px. Bốn chip hụt 1,7 / 3,4 / 4,0 / 4,75 — khớp
       chính xác với độ dài từng chuỗi. Đúng bẫy đã ghi ở mục 7 của
       'docs/BAN-GIAO-PHIEN-MOI.md'.
   (c) '.t4-label > span' bị mục 3 hạ xuống 13px ở mobile; Figma là 14px ở
       CẢ HAI khổ.
   (d) '[col bg_radius=]' sinh CSS theo **ID** ('#col-123 .col-inner') — độ
       ưu tiên (1,1,0), CSS class của ta không tài nào ghi đè. Vì vậy thẻ gói
       vẫn bo 16 ở mobile dù đã khai 10. Đã bỏ tham số đó khỏi shortcode và
       chuyển hẳn sang CSS.
   -------------------------------------------------------------------------- */
.t4 #content .section { padding-left: 0; padding-right: 0; }
.t4 .t4fx-nhan > span,
.t4 .t4fx-nhan > p { letter-spacing: 0.14px; font-size: 14px; }

/* (d) nền/bo/đệm thẻ gói nay do CSS lo hết */
.t4fx-goi .col-inner {
  background: var(--t4-white);
  border: 1px solid rgba(0, 0, 0, .11);
  border-radius: 16px;
  padding: 40px 16px 32px;
  min-height: 400px;
}
.t4fx-cta-the .col-inner {
  background: var(--t4-white); border-radius: 10px; padding: 40px;
}

/* Khoảng cách theo Figma: nhãn → đầu section 16, dải kem → khối chữ 28 */
#goi-dich-vu .text.t4fx-nhan { margin-bottom: 24px; }
#goi-dich-vu .t4fx-head-2col { margin-top: 16px; }
.t4fx-qt-dai .t4fx-split { margin-top: 28px; }

@media (max-width: 849px) {
  .t4fx-goi .col-inner {
    border-radius: 10px; min-height: 320px; padding: 24px 12px 20px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .25);
  }
  .t4fx-cta-the .col-inner { padding: 24px 20px; }

/* Băng thẻ trượt ngang: mép trái đúng 25, khe giữa thẻ đúng 16 */
  .t4 .section-content > .row.t4fx-goi-row { padding-left: 25px; }
  .t4 .section-content > .row.t4fx-goi-row > .col.t4fx-goi { padding-right: 16px; }

/* Dải kem "Quy trình" bắt đầu ở y=60 chứ không phải mép trên section */
  .t4fx-qt-dai .section-bg { top: 60px; }

}

/* --------------------------------------------------------------------------
   11.18 VÁ VÒNG NĂM — chốt phần mobile

   ⛔ Bài học chi phối cả mục này: quy tắc mobile viết bằng CLASS
   ('.t4 .section-content > .row.t4fx-head-2col > .col', độ ưu tiên 0,4,0)
   KHÔNG thắng nổi quy tắc desktop viết bằng ID ('#goi-dich-vu .t4fx-head-2col
   > .col:last-child', 1,2,0) — vì @media KHÔNG cộng thêm độ ưu tiên. Muốn gỡ
   bề rộng ghim của desktop ở mobile thì bản mobile cũng phải mang ID.
   -------------------------------------------------------------------------- *//* Casestudy: Figma chừa 150px dưới bảng tab, không phải 100 như section khác */
#casestudy { padding-bottom: 150px; }

/* Nút "Xem tất cả" canh theo MÉP TRÊN khối nhãn, cao hơn chip 3px (Figma
   chip y=108, nút y=105) — để 'v_align middle' tự căn thì nó tụt 8px. */
.t4fx-nhan-hang > .col:last-child { align-self: flex-start; }
.t4fx-nhan-hang > .col:last-child .col-inner { margin-top: 5px; }

@media (max-width: 849px) {
  .t4fx-hero .section-content { padding-top: 82px; }
  .t4 .section-content .text.t4fx-hero-nut { margin-top: 257px; }

/* Ảnh minh hoạ mobile: ghim đúng số Figma, không dùng % */
  .t4fx-mota-anh-mb { width: 270px; margin: 0 auto; }

/* [figma] luật dùng chung — lớp rộng 274px có ở 2 trang; đại diện: trang5:'1211:13046' · trang7:'1113:18046'
   (tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */
/* Băng thẻ gói: cột 274 (thẻ 258 + khe 16), thẻ đo được đúng 258 */
  .t4 .section-content > .row.t4fx-goi-row > .col.t4fx-goi {
    flex: 0 0 274px; max-width: 274px; width: 274px; padding-right: 16px;
  }

/* Quy trình mobile: Figma chừa 32px giữa khối nhãn và kicker */
  #quy-trinh .text.t4fx-nhan { margin-bottom: 56px; }

/* Thẻ CTA mobile: Figma đệm 40 trên/dưới, 32 hai bên (chữ bắt đầu x=57) */
  .t4fx-cta-the .col-inner { padding: 40px 32px; }
  .t4fx-cta-the .button.t4fx-nut-xanh { margin-top: 65px; }

}

/* --------------------------------------------------------------------------
   11.19 VÁ VÒNG SÁU — ba nguồn ghi đè mà CSS class không với tới

   (a) Flatsome sinh CSS theo **ID** ngay trong trang: '#section_x { padding }'
       từ tham số [section],
'#image_x { width }' từ [ux_image]. Thẻ <style>
       đó nằm SAU tệp style.css nên với cùng độ ưu tiên (1,
0,
0) nó luôn thắng.
       → hoặc đặt giá trị bằng THAM SỐ shortcode (đúng tinh thần UX Builder),
hoặc viết selector mạnh hơn ('.t4 #casestudy' = 1,
1,
0).
   (b) Một '!important' cũ của chính mình ở 11.13 ghim 'flex-basis' thẻ gói,
khiến mọi lần chỉnh sau đó im lặng không có tác dụng.
   (c) '.t4 .section-content .text { margin: 0 }' (0,3,0) ăn mọi margin đặt
       lên khối '.text' — hộp "Lưu ý" mất nguyên 24px cách trên.
   -------------------------------------------------------------------------- *//* (a) giãn chữ H2: nâng một bậc để chắc chắn thắng quy tắc -1,2px ở 11.12 */
.t4 .section-content .text h2 { letter-spacing: 0; }
#mo-ta-dich-vu .text h2,
#ly-do .text h2 { letter-spacing: -1.2px; }

/* (a) Figma chừa 150px dưới bảng tab Casestudy, không phải 100 */
.t4 #casestudy { padding-bottom: 150px; }

/* Ruột thẻ gói theo đúng Figma: ảnh cách mép trên 50, tiêu đề cách ảnh 11,
   nút cách đáy 25 (712:22286 → 712:22289 → 714:23063) */
.t4fx-goi .col-inner { padding: 50px 16px 25px; }
.t4 .t4fx-goi-ten { margin-top: 11px; }

/* Tab đóng: Figma dùng #000000 @62%, không phải màu chữ thân bài */
.t4 .t4fx-tabs .nav-line > li:not(.active) > a { color: rgba(0, 0, 0, .62); }

/* ⚠ Figma trang #4 vẽ BA màu chứ không phải hai: tab đang mở #155446, tab
   ĐẦU TIÊN #1f1f1f (đen đặc), hai tab còn lại đen 62%. Đã soi ảnh Figma xuất
   ra để chắc, không phải đọc nhầm mã màu. Bám Figma. */
#casestudy .t4fx-tabs .nav-line > li:first-child:not(.active) > a { color: var(--t4-text); }

/* Nút CTA desktop: Figma 263×46 */
.t4fx-cta-the .button.t4fx-nut-xanh { padding: 0 39px; }

@media (max-width: 849px) {
  .t4fx-hero .section-content { padding-top: 0; padding-bottom: 6px; }

/* [figma] luật dùng chung — lớp rộng 274px có ở 2 trang; đại diện: trang5:'1211:13046' · trang7:'1113:18046'
   (tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */
/* (b) gỡ !important cũ: cột 274 = thẻ 258 + khe 16 */
  .t4 .section-content > .row.t4fx-goi-row > .col.t4fx-goi {
    flex: 0 0 274px !important; max-width: 274px !important; width: 274px !important;
    padding-right: 16px;
  }
  .t4 .section-content > .row.t4fx-goi-row > .col.t4fx-goi:first-child { margin-left: 25px; }
  .t4 .section-content > .row.t4fx-goi-row { padding-left: 0; }

/* Thẻ gói mobile: Figma 258×320, ảnh cách mép trên 35 *//* Đáy 17px chứ không phải 20px: Figma đặt nút cách đáy thẻ 16px, đo trên
     bảng thật thì 20px cho ra 19px và nút cao hơn Figma 3px. Con số này đến
     từ ĐO, không từ tính toán padding + viền — hai cái lệch nhau 2px do cách
     Flatsome dựng hộp. */
  .t4fx-goi .col-inner { padding: 35px 16px 15px; }
  .t4fx-cta-the .button.t4fx-nut-xanh { margin-top: 41px; }

}

/* --------------------------------------------------------------------------
   11.20 VÁ VÒNG BẢY — bốn chỗ cuối, đều đo ra con số chứ không ước lượng

   (a) KHOẢNG CÁCH GIỮA ĐOẠN: Figma gộp nhiều đoạn vào MỘT lớp chữ, nên phần
       "cách đoạn" nằm trong thuộc tính paragraphSpacing chứ không phải margin.
       Đo ngược: khối Mô tả có 3 đoạn cao 90+150+120 = 360, Figma khai 370 →
       cách đoạn đúng **5px**, không phải 24px như ta tự đặt.
   (b) '.img' của Flatsome mang sẵn 'margin-bottom' — ảnh trong thẻ gói đẩy
       tiêu đề xuống thêm 16px so với Figma.
   (c) Lưới 2 cột 'display: grid' mặc định 'align-items: stretch', nên mục
       ngắn bị kéo cao bằng mục dài cùng hàng (mục "Là Google Partner từ năm
       2022" cao 52 thay vì 26). Vị trí hàng vẫn đúng, chỉ chiều cao ô sai.
   (d) Bề rộng đo là HỘP VIỀN: thêm 'padding-right' không làm hộp hẹp đi —
       phải ghim 'width'.
   -------------------------------------------------------------------------- *//* (a) cách đoạn 5px, đúng bằng paragraphSpacing của Figma */
#mo-ta-dich-vu .t4fx-chu p { margin-bottom: 5px; }
#mo-ta-dich-vu .t4fx-chu p:last-child { margin-bottom: 0; }

/* (b) gỡ margin mặc định của ảnh trong thẻ gói; Figma: ảnh → tiêu đề cách 11 */
.t4fx-goi .col-inner > .img { margin: 0; }

@media (max-width: 849px) {

/* (b) Figma mobile: ảnh → tiêu đề cách 6 */
  .t4 .t4fx-goi-ten { margin-top: 6px; }

/* Lý do mobile: Figma đặt minh hoạ ngay dưới khối nhãn (y=145), ô ảnh
     352×258 — ảnh gốc tỉ lệ khác nên cho nó lấp đầy ô và cắt theo khung. */
  #ly-do .t4fx-split { margin-top: 24px; }

/* (a) băng thẻ gói: lề trái 25 và điểm neo cuộn cũng lùi 25 */
  .t4 .section-content > .row.t4fx-goi-row {
    padding-left: 25px; scroll-padding-left: 25px;
  }
  .t4 .section-content > .row.t4fx-goi-row > .col.t4fx-goi:first-child { margin-left: 0; }

/* (c) cách đoạn bản mobile của khối Mô tả dịch vụ */
  #mo-ta-dich-vu .t4-only-mobile .t4fx-chu p { margin-bottom: 16px; }
  #mo-ta-dich-vu .t4-only-mobile .t4fx-chu p:last-child { margin-bottom: 0; }

}

/* --------------------------------------------------------------------------
   11.22 BỐN MỐC CUỐI
   -------------------------------------------------------------------------- *//* Hộp mô tả bên phải khối "Các gói dịch vụ": Figma khai hộp cao 60 cho 2 dòng
   26px và CĂN GIỮA chữ trong đó — nên chữ nằm thấp hơn mép hộp 4px. Để hộp co
   theo chữ là lệch đúng 4px, thấy rõ khi đặt cạnh cột tiêu đề. *//* ⚠ Ghim hộp 60 + căn giữa lên chính thẻ <p>, KHÔNG lên .text bọc ngoài.
   Đặt ở .text thì hộp của <p> co theo chữ (52) và nằm thấp hơn mép hộp 4px —
   trang vẽ ĐÚNG nhưng mốc đo của <p> lệch 4px so với lớp Figma. */
#goi-dich-vu .t4fx-head-2col .t4fx-chu p {
  min-height: 60px; display: flex; flex-direction: column; justify-content: center;
}

/* --------------------------------------------------------------------------
   11.23 HAI CHỖ CUỐI SAU KHI LỌC FOOTER

   Việc thêm ':where(:not(.t4fx-footer))' giữ NGUYÊN độ ưu tiên, nhưng hai
   quy tắc riêng dưới đây vốn đã thua sẵn quy tắc chung từ trước — trước đó
   chúng tình cờ thắng nhờ một vòng nâng độ ưu tiên khác. Khai lại cho đủ
   mạnh, không dựa vào may rủi của thứ tự.
   -------------------------------------------------------------------------- *//* Dải kem Quy trình: khung 1056 tại x=420 (thắng .row.row-collapse chung) */
.t4 .t4fx-qt-dai .section-content > .row.row-collapse,
.t4 .t4fx-qt-dai .section-content > .row { max-width: 1056px; }

/* Thẻ CTA: Figma cách tiêu đề → thân bài 17px */
.t4 .section-content .t4fx-cta-the .text + .text { margin-top: 17px; }

@media (max-width: 849px) {

/* !important vì Flatsome sinh CSS nền theo ID section (#section_…) — một
     id thắng mọi số lượng class. */
  .t4 .section.t4fx-qt-dai { background-color: #FCFBF6 !important; }

}
.t4 .t4fx-gd-luoi:not(.t4fx-gd-don) .section-content .text.t4fx-gd-td,
.t4 .section .section-content .t4fx-gd-luoi .text.t4fx-gd-td { margin: 0; }

/* Danh sách Lý do dựng bằng ô văn bản trong lưới (T0) ----------------------
   Figma trang #4: hai cột 498 tại x=440 và x=986 ⇒ khe 48; mục cách nhau 16
   (mục 1 đáy 657 → mục 3 y=673). Lề trên khối 33px như bản <ul> cũ.
   ⛔ Lưới đặt trên '.col-inner', không trên '.col' — Flatsome cho '.col' đệm
   ngang riêng, biến nó thành grid là cột phải rơi khỏi mốc Figma 986.
   ⛔ Thụt 30px nằm TRONG <p>: Figma khai lớp chữ rộng đúng 498, mà bảng đo
   trỏ vào <p>; để thụt trên ô thì cả 11 mục hụt 30px. */
.t4 #ly-do .col.t4fx-lydo-o > .col-inner {
  display: grid; grid-template-columns: 498px 498px;
  justify-content: start; align-items: start; gap: 16px 48px;
  margin-top: 33px;
}
.t4 #ly-do .section-content .text.t4fx-lydo-m {
  position: relative; margin: 0; padding-left: 0;
  font-size: 16px; line-height: 26px; color: var(--t4-text);
}
.t4 #ly-do .text.t4fx-lydo-m > p { margin: 0; padding-left: 30px; font: inherit; color: inherit; }
.t4 #ly-do .text.t4fx-lydo-m::before {
  content: ""; position: absolute; left: 8px; top: 10px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--t4-camel);
}

@media (max-width: 849px) {
  .t4 #ly-do .col.t4fx-lydo-o > .col-inner {
    grid-template-columns: 1fr; gap: 16px; margin-top: 65px;
  }
  .t4 #ly-do .section-content .text.t4fx-lydo-m { font-size: 14px; line-height: 22px; }
  .t4 #ly-do .text.t4fx-lydo-m > p { padding-left: 26px; }
  .t4 #ly-do .text.t4fx-lydo-m::before { top: 8px; }

}

/* BẢNG CASESTUDY DỰNG BẰNG PHẦN TỬ FLATSOME (T0) --------------------------
   Cùng toạ độ Figma đã ghi ở 44-nhom-ggm mục 20.3, chỉ đổi vật mang: trước là
   <div> lồng nhau trong [ux_html], nay là [row]/[col] + [ux_image].
     Frame129 y=446 cao 330 — ảnh 503×330 (bo 4), cột chữ rộng 470,98
     hàng số Frame132 y=791 cao 83 — ô 1 rộng 416,34 · ô 2 rộng 314,73
   [figma] Frame 129 '798:16821' (1013,98 rộng) · ảnh Unipart-1.png
     '798:16822' · cột chữ Container '1230:9070' (470,98).
     ⚠ Bản trong khung trang cao 360; bản component '547:4913' cao 330 —
     CSS lấy 330 theo component. Cộng dồn 503 + 471 + khe 40 = 1014 ✓
   ⛔ '.row' của Flatsome mặc định 'flex-wrap: wrap' và '.col' có đệm ngang:
   không khai lại thì hai cột xuống dòng và section phồng hơn 500px. */
.t4 .row.t4fx-cs-tren,
.t4 .row.t4fx-cs-so {
  display: flex; flex-wrap: nowrap; max-width: none; width: 100%; margin: 0;
}
.t4 .row.t4fx-cs-tren { gap: 40px; align-items: flex-start; }
.t4 .row.t4fx-cs-tren > .col,
.t4 .row.t4fx-cs-so > .col { padding: 0; }
.t4 .row.t4fx-cs-tren > .col.t4fx-cs-anh-o { flex: 0 0 503px; max-width: 503px; }
.t4 .row.t4fx-cs-tren > .col.t4fx-cs-loi { flex: 0 0 471px; max-width: 471px; }
/* ⛔ VÁ 22/08/2026 — khoá thêm '#casestudy' để thắng đặc hiệu.
   '.t4 .section:where(:not(.t4fx-footer)) .section-content .img img'
   (cũng trong tệp này) có đặc hiệu (0,4,1) — 4 lớp — trong khi '.t4
   .t4fx-cs-anh img' chỉ (0,2,1). Luật kia THẮNG dù nạp trước, khiến ảnh rơi
   về 'height:auto' và giãn theo tỉ lệ gốc của tệp — đo được: ảnh
   'dvgm-casestudy-marketing-strategy.jpg' 1044×800 (tỉ lệ 0,766) render ra
   503×385,4 thay vì đúng 503×330 Figma khai (node 'Unipart-1.png',
   'I1211:11259;547:4967'), đẩy hàng số liệu bên dưới lệch ~55px — đúng cặp
   vùng ❌ '503×64@(443,1977)' và '178×77@(584,1757)'. Thêm ID '#casestudy'
   (mọi trang GGM #3–#7 đều dùng chung id này, xem 'docs/uxb/*.txt') nâng
   đặc hiệu lên (1,2,1) — ID luôn thắng bất kể số lớp — không cần đổi luật
   mobile dòng ~1504 (đã tự thắng nhờ '#casestudy' sẵn có ở đó). */
#casestudy .t4fx-cs-anh img {
  width: 503px; height: 330px; object-fit: cover; display: block;
  border-radius: 4px; /* Figma khai bo góc 4 */
}
.t4 .t4fx-cs-anh { margin: 0; }

/* ⛔ Hàng số phải rộng ĐÚNG 1014 như Frame129 '798:16821' ở trên: để 'width: 100%' thì nó
   lấy trọn bề ngang panel và phép căn giữa đẩy hai ô lệch trái 74px. */
.t4 .row.t4fx-cs-so {
  justify-content: center; gap: 149px; margin: 15px auto 0; width: 1014px;
}

/* [figma] hàng số Frame 132 '547:4920' (1014×83); hai ô trong nó là
   Frame 131 '547:4921' (416,34×83) và Frame 130 '547:4924' (314,73×83).
   Cộng dồn 416,34 + 314,73 + khe 149 ≈ 880 < 1014 — phần dư là lề hai
   bên do 'justify-content: center', không phải sai số.

   ⛔ '.row::after' (clearfix của Flatsome) trở thành FLEX ITEM và được tính
   vào phép căn giữa — ô đầu bị đẩy sang trái 7,5px, đúng nửa chiều rộng nó
   chiếm. Bẫy này đã ghi trong bộ luật; gặp lại ở hàng số casestudy. */
.t4 .row.t4fx-cs-so::after,
.t4 .row.t4fx-cs-tren::after { display: none; }
.t4 .row.t4fx-cs-so > .col.t4fx-cs-o1 { flex: 0 0 416.34px; max-width: 416.34px; }
.t4 .row.t4fx-cs-so > .col.t4fx-cs-o2 { flex: 0 0 314.73px; max-width: 314.73px; }

/* Ô văn bản mới bọc quanh các <p> cũ — dồn kiểu về đúng thẻ bên trong. */
.t4 .text.t4fx-cs-trich p,
.t4 .text.t4fx-cs-ten p,
.t4 .text.t4fx-cs-chuc p,
.t4 .text.t4fx-cs-xem p,
.t4 .text.t4fx-cs-lon p,
.t4 .text.t4fx-cs-mo p { margin: 0; font: inherit; color: inherit; text-align: inherit; }
.t4 .section .section-content .text.t4fx-cs-ten { margin-top: 28px; }

/* ⛔ Đệm 28,5px của hộp trích dẫn phải nằm TRONG <p>, không trên ô: hộp Figma
   cao 187 mà chữ chỉ 130 ('tu_co_gian: NONE' + 'can_doc: CENTER'), và bảng đo
   trỏ vào <p>. Để đệm trên ô thì <p> tụt xuống 28,5 và mọi khoảng cách tính
   từ nó hụt đúng ngần ấy. */
.t4 .section .section-content .text.t4fx-cs-trich { padding: 0; }
.t4 .text.t4fx-cs-trich p { padding: 28.5px 0; }

/* Ảnh dải kem Quy trình của RIÊNG trang #4 — Figma 711:16416 khai 496×355,
   lệch 8×4 so với ô. Luật này trước nằm ở 44-nhom-ggm và dùng chung; từ
   19/08/2026 nhóm GGM có số riêng (561 / 497,6×297) nên tách ra. */
.t4 #quy-trinh .t4fx-split > .col:last-child .img,
.t4 #quy-trinh .t4fx-split > .col:last-child .img-inner,
.t4 #quy-trinh .t4fx-split > .col:last-child img {
  width: 496px; height: 355px;
}
.t4 #quy-trinh .t4fx-split > .col:last-child .img {
  margin-left: 8px; margin-top: 4px;
}


/* ════════════════════════════════════════════════════════════════════════
   DỜI TỪ '44-nhom-ggm.css' (20/08/2026)

   2 luật. Chúng nằm trong một mô-đun mang tên trang #4 nhưng KHỚP Ở NHIỀU
   TRANG KHÁC — đo bằng CSSOM trên 8 trang, kết quả ở 'qa/_luat-44-sang-30.json'.

   ⛔ THỨ TỰ TRONG KHỐI NÀY LÀ THỨ TỰ NGUỒN CỦA MÔ-ĐUN 40, ĐỬhNG SẮP LẠI.
   Nhiều bộ chọn được khai HAI–BA LẦN ('.t4fx-tabs', '.t4 .section-content >
   .row', '#casestudy .t4fx-head-2col > .col:first-child') và lần sau đè lần
   trước — đảo là đổi kết xuất mà không có gì báo.

   ⚠ Chú thích đi kèm được MANG THEO. Nếu một chú thích còn giải thích cả luật
   ở lại bên 40 thì nó xuất hiện ở CẢ HAI nơi — cố ý, thà lặp còn hơn mất.
   ════════════════════════════════════════════════════════════════════════ */

/* --- 18. TRANG #4 — vá theo bảng đo dày (16/08) ---------------------------
   Mọi con số dưới đây lấy TRỰC TIẾP từ lớp Figma, không ước lượng.
   -------------------------------------------------------------------------- *//* 18.1 Breadcrumb: Figma gạch chân riêng mục "Home" (lớp gach=UNDERLINE),
   hai mục sau thì không.
   ⚠ '.t4fx-crumb' CHÍNH LÀ thẻ <nav>, không phải khối bọc nó — viết
   '.t4fx-crumb nav' là không trúng gì cả. */
.t4 nav.t4fx-crumb ol li:first-child a { text-decoration: underline; }

@media (max-width: 849px) {
  .t4 nav.t4fx-crumb ol li:last-child,
  .t4 nav.t4fx-crumb ol li:last-child * { line-height: 13px; }

}


/* ══ III.4.0 ĐỢT C · GỘP 7 SELECTOR TỪNG KHAI Ở HAI MÔ-ĐUN (20/08/2026) ═══
   Linter mục (4) cấm một selector khai ở hai mô-đun: đọc mô-đun này không
   biết được luật cuối cùng là gì, phải mở cả tệp kia mới biết ai thắng.

   Bảy luật dưới đây trước nằm ở '40-page-xu-ly-loi-sai-google-ads.css' và
   '44-nhom-ggm.css' — nhưng KHÔNG phải luật riêng của trang/nhóm đó: mọi
   mô-đun đều nạp trên MỌI trang (functions.php nạp cả 17, không nạp theo
   điều kiện), nên chúng vốn đã áp cho toàn site. Chỗ đứng cũ chỉ là dấu
   vết của việc dựng trang nào trước, không phải phạm vi thật.

   ⛔ ĐẶT Ở CUỐI TỆP, KHÔNG gộp ngược lên khối cùng selector phía trên.
   Hai tệp cũ nạp SAU toàn bộ tệp này, nên luật của chúng đang thắng mọi
   luật trong đây. Kéo lên giữa tệp là đổi người thắng — ví dụ đã kiểm:
   '.t4fx-luu-y { min-height: 185px }' mà đặt trước dòng 1338 thì @849
   'min-height: 0' sẽ lật ngược nó và hộp Lưu ý tụt chiều cao trên mobile.
   Đứng cuối tệp là giữ NGUYÊN thứ tự thác đổ như trước khi dời.

   ⚠ KHÔNG thu hẹp bằng '.t4:where(.t4-trang-…)' như đợt B. Đợt B thu hẹp
   được vì các luật đó neo theo '#id' của section chỉ có trên nhóm ấy; bảy
   luật này neo theo LỚP dùng ở 4–7 trang ('.t4fx-nut-xanh' có cả ở
   lien-he và tuyen-dung), thu hẹp là gỡ mất kiểu ở những trang ngoài nhóm.

   ⚠ BẢN GỐC CỦA KHỐI NÀY: 'qa/manh/dot-C-30-components.css'. Ngày 20/08
   một cửa sổ khác ghi đè '30-components.css' và xoá sạch khối này chỉ vài
   phút sau khi nối — site mất 7 luật mà linter vẫn im (nó chỉ soi trùng,
   không soi thiếu). Mất lần nữa thì nối lại từ tệp mảnh đó.               */

/* ⤴ từ 44-nhom-ggm 19.4: '.button' của Flatsome là display:block nên <span>
   nằm sát mép trên; Figma cho nút cao 44, chữ 24, đệm 10 → phải căn giữa. */
.t4 .button.t4fx-nut-xanh { display: flex; align-items: center; justify-content: center; }

/* ⤴ từ 44-nhom-ggm 18.6 rồi 19.13: khe dưới tiêu đề thẻ giai đoạn 5px → 7px.
   Gộp hai lần khai thành một; giá trị cuối cùng vẫn là 7px.                */
.t4 .t4fx-gd h3 { margin-bottom: 0; padding-bottom: 7px; }

/* ⤴ từ 44-nhom-ggm: ảnh case study — Figma khai bo góc 4
   [figma] Unipart-1.png '547:4913' 503×330 (component); bản trong trang
   '798:16822' cao 360. Không cộng 30: đây là <img>, không phải '.col'. */
.t4 .t4fx-cs-anh {
  width: 503px; height: 330px; object-fit: cover; display: block; border-radius: 4px;
}

/* ⤴ từ 40-page-xu-ly (ba chỗ rời): hộp "Lưu ý" — Figma đệm trên 28 (thẻ
   giai đoạn là 24), khung cao 185, cách khối trên 24.                      */
.t4fx-luu-y { margin-top: 24px; min-height: 185px; padding-top: 28px; }

/* ⤴ từ 40-page-xu-ly: [button] mang sẵn nền/bóng/lề của Flatsome — gỡ hết */
.t4fx-nhan-hang a.button.t4fx-xem-tat-ca {
  background: none; box-shadow: none; margin: 0; min-height: 0;
  text-transform: none; letter-spacing: 0;
}

@media (max-width: 849px) {
  /* ⤴ hai luật khung mobile 352 tách ra từ hai danh sách selector ở 40-page
     [figma] Container 352 khổ Mobile '1093:8882' */
  .t4fx-tabs { max-width: 352px; }
  .t4fx-qt-dai .t4fx-split { max-width: 352px; }
}

/* ⤴ từ 44-nhom-ggm 19.3 (dời 20/08/2026): Flatsome vẽ lớp bóng 'is-shade' ở
   '::after', Figma không có. Soi computed style của chính phần tử KHÔNG thấy
   gì — lớp bóng nằm ở pseudo, mất buổi ở đây nếu chỉ đọc computed style.
   Không gỡ class 'is-shade' khỏi shortcode: luật giữ nguyên cấu trúc UXB.

   [đối chiếu] không mô-đun nào nạp sau khai '.t4fx-nut-xanh::after', nên dời
   lên sớm hơn trong thác đổ không đổi người thắng — đã kiểm bằng grep toàn
   'css/' và đo lại '::after' trên 5 trang có nút này.                      */
.t4 .button.t4fx-nut-xanh::after { display: none; }


/* ══ DỜI VỀ ĐÂY 21/08/2026 (4T duyệt) — hai luật DÙNG CHUNG nằm nhầm tệp ═══
   Phát hiện bằng `tools/kiem-vung-mu-3b.py`: nó hỏi TRÌNH DUYỆT xem mô-đun nào
   có luật khớp thật vào phần tử của trang, thay vì đoán theo tên tệp.

   ⛔ CẢ HAI ĐỀU KHÔNG ĐƯỢC BỌC PHẠM VI TRANG. Phản xạ đầu tiên khi thấy luật
   của tệp trang chạm trang khác là bọc `body.t4-trang-…` lại cho "đúng luật
   linter (8)". Ở đây bọc là GỠ KIỂU khỏi những trang đang ĐẠT — chúng không
   rò rỉ, chúng vốn dùng chung. Đo mới phân biệt được hai ca đó, đọc tên tệp
   thì không.

   Chuyển về `30-components` được hai thứ cùng lúc: hết phá luật (8), VÀ hết
   vùng mù của cổng 3b — mô-đun dùng chung luôn nằm trong dấu băm, nên sửa nó
   sẽ làm hết hạn phiếu của đúng những trang bị ảnh hưởng.

   ⚠ Đặt ở CUỐI TỆP, không chèn cạnh luật anh em ở trên. Hai tệp nguồn nạp SAU
   toàn bộ tệp này; đứng cuối là giữ nguyên thứ tự thác đổ (cùng lý do đã ghi
   ở khối ĐỢT C). Đã soi trước: không luật nào ở mô-đun 40–51 nhắm cùng phần
   tử — chúng nhắm `.text`, không nhắm con cuối của nó; còn luật `#content`
   mang id nên không selector một-lớp nào vượt được.
   ══════════════════════════════════════════════════════════════════════ */

/* ⤴ từ 51-page-dich-vu-google-marketing.css (CS3 đo và bàn giao).
   [phục vụ] chip nhãn section | [trang] 7 trang: dich-vu-google-marketing ·
   google-map-local-seo · google-merchant-center · tracking-do-luong ·
   trang-chu · ve-chung-toi · xu-ly-loi-sai-google-ads
   [đo] gỡ khỏi CSSOM thì nhãn CẢ BẢY tụt về 16px/26 · w400 · #1f1f1f · normal */
#content .t4-label.t4fx-nhan {
  font-family: var(--t4fx3-than); font-size: 14px; line-height: 19.124px;
  font-weight: 500; color: #fff; letter-spacing: 0.14px;
}

/* ⤴ từ 40-page-xu-ly-loi-sai-google-ads.css dòng 2 — nửa kia của cùng một
   phép dọn khoảng cách, mà nửa đầu (`.text { margin: 0 }`) vốn đã nằm ở tệp
   này. Hai nửa ở hai tệp thì người sau sửa một nửa rồi tưởng xong.
   [trang] khớp ở 24 trang. [đo] gỡ khỏi CSSOM trên `ve-chung-toi` (đang ĐẠT):
   một phần tử đổi 0px → 16px. Trên `lien-he`/`tuyen-dung`/`blog` thì 0 đổi —
   ở đó luật khác đã cho margin-bottom 0 sẵn, nhưng KHÔNG vì thế mà bỏ được.

   ⚠ Trình duyệt lưu bộ chọn này là `… .text > :last-child`, KHÔNG có dấu `*`.
   Dò bằng `selectorText === '… > *:last-child'` sẽ gỡ 0 luật và phép thử báo
   "không trang nào đổi" — tôi đã dính, và suýt kết luận ngược. */
.t4 .section:where(:not(.t4fx-footer)) .section-content .text > *:last-child { margin-bottom: 0; }