/* ==========================================================================
   44-nhom-ggm.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 §16 ba trang GGM · §19 vòng sửa 17/08 · §20 vòng đo v3 · §20b bám khung mobile của bản gộp;
   không sửa một luật nào trong lần tách này.
   ========================================================================== */


/* ── §16 ba trang GGM (dòng 3102–3357 của style.css cũ) ──────────────────── */

/* ==========================================================================
   16. LÔ 2 — BA TRANG GG MARKETING CON (#5 #6 #7)
   Figma 712:20785 · 715:23086 · 715:23959 (và ba node mobile tương ứng)

   Bảy section trùng khít trang #4 và dùng CHUNG neo #mo-ta-dich-vu /
   #goi-dich-vu / #quy-trinh / #ly-do / #casestudy, nên toàn bộ CSS mục 11
   áp dụng luôn. Dưới đây chỉ là ba thứ ba trang này CÓ mà trang #4 KHÔNG:
     · danh sách dấu tích <ul class="t4fx-tich">
     · khối Giai đoạn là danh sách 5 thẻ MỘT CỘT (không phải 2 thẻ + Lưu ý)
     · khối Quy trình hiện ở CẢ HAI khổ (trang #4 tách desktop/mobile)
   ========================================================================== */

/* Danh sách dấu tích — Manrope 14/22, dấu ✓ camel */
#content .t4fx-tich { list-style: none; margin: 20px 0 0; padding: 0; }
#content .t4fx-tich li {
  position: relative; padding-left: 26px; margin: 0 0 8px;
  font-size: 14px; line-height: 22px; color: #666;
}
#content .t4fx-tich li:last-child { margin-bottom: 0; }
#content .t4fx-tich li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px;
  background: no-repeat center/16px 16px
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23CF9156' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Khối Giai đoạn dạng danh sách một cột */
#content .t4fx-gd-don { margin-top: 48px; }
#content .t4fx-gd-don > .col.t4fx-gd-o { padding-left: 0; padding-right: 0; }
#content .t4fx-gd-don > .col.t4fx-gd-o + .col.t4fx-gd-o { margin-top: 24px; }
#content .t4fx-gd-don .t4fx-gd { border: 0; padding: 0; min-height: 0; }
#content .t4fx-gd-don .t4fx-gd h3 { margin-bottom: 8px; }

/* ⛔ Quy trình của nhóm này hiện ở CẢ HAI khổ — trang #4 thì tách hai khối
   nên hàng của nó mang '.t4-only-desktop'. Quy tắc 'display: flex' KHÔNG
   ĐƯỢC viết trần: nó thắng '.t4-only-desktop { display: none }' và làm khối
   desktop của trang #4 lòi ra trên mobile, cộng thêm 648px. Khoá theo slug. */
body.t4-trang-google-merchant-center #content .t4fx-qt-dai .section-content > .row.t4fx-split,
body.t4-trang-tracking-do-luong #content .t4fx-qt-dai .section-content > .row.t4fx-split,
body.t4-trang-google-map-local-seo #content .t4fx-qt-dai .section-content > .row.t4fx-split {
  display: flex;
}

@media (max-width: 849px) {
  #content .t4fx-gd-don { margin-top: 32px; }
  #content .t4fx-gd-don > .col.t4fx-gd-o + .col.t4fx-gd-o { margin-top: 16px; }



}

/* --- 16.1 vá vòng đo lô 2 ------------------------------------------------
   ⛔ Mọi quy tắc dưới đây khoá vào '.t4-nhom-ggm'. Ba trang này dùng CHUNG
   id section với trang #4, nên viết trần là đè lẫn nhau — đã trả giá hai
   lần ở vòng trước.
   ------------------------------------------------------------------------ */

/* Danh sách dấu tích: Figma mỗi mục cao 42 (chữ 22 + đệm 10 trên/dưới),
   chữ thụt 32px so với mép cột, ĐẬM 700 chứ không phải 400. */
body.t4-nhom-ggm #content .t4fx-tich { margin: 24px 0 0; }
body.t4-nhom-ggm #content .t4fx-tich li {
  padding: 10px 0 10px 32px; margin: 0;
  font-size: 14px; line-height: 22px; font-weight: 700; color: var(--t4-text);
}
body.t4-nhom-ggm #content .t4fx-tich li::before { top: 13px; left: 3px; }

/* Đoạn thân khối Mô tả: trang #4 khai cách đoạn 5px (Figma của NÓ), nhóm
   này Figma cho khối liền mạch 16/30 — gỡ 5px đó ra. */
body.t4-nhom-ggm #content #mo-ta-dich-vu .t4fx-chu p { margin-bottom: 0; }

/* Bảng Casestudy: Figma mobile của nhóm này cao 937 tổng section */
body.t4-nhom-ggm #content .t4fx-tabs .tab-panels { min-height: 492px; }

@media (max-width: 849px) {
  /* Minh hoạ mobile khối Mô tả: Figma 292×200, canh giữa */
  body.t4-nhom-ggm #content .t4fx-mota-anh-mb { width: 292px; margin: 0 auto; }
  body.t4-nhom-ggm #content #mo-ta-dich-vu .t4-only-mobile { margin-top: 80px; }
  body.t4-nhom-ggm #content .t4fx-mota-mb-h2 { margin-top: 24px; }

  /* Mục dấu tích mobile: chữ 12/22, mục cao 26, thụt 29 */
  body.t4-nhom-ggm #content .t4fx-tich li {
    padding: 2px 0 2px 29px; font-size: 12px; line-height: 22px;
  }
  body.t4-nhom-ggm #content .t4fx-tich li + li { margin-top: 4px; }
  body.t4-nhom-ggm #content .t4fx-tich li::before { top: 5px; left: 0; }

  /* Minh hoạ Lý do mobile: Figma 335×200 (không tràn hết 352) */
  body.t4-nhom-ggm #content #ly-do .t4fx-split .img { width: 335px; height: 200px; margin: 0 auto; }
  body.t4-nhom-ggm #content #ly-do .t4fx-split .img-inner { height: 100%; }
  body.t4-nhom-ggm #content #ly-do .t4fx-split .img img { height: 100%; object-fit: contain; }

  /* Bảng Casestudy mobile của nhóm này */
  body.t4-nhom-ggm #content .t4fx-tabs .tab-panels { min-height: 288px; }



}

/* --- 16.2 SỬA HAI LỖI BỐ CỤC do soi ảnh mới thấy (kiểm lại 16/08) --------
   Bảng ánh xạ sinh tự động của lô 2 chỉ phủ 23% lớp chữ và KHÔNG so vị trí
   thẻ, nên hai lỗi dưới đây lọt hết qua bảng số. Chỉ khi đặt ảnh Figma cạnh
   ảnh site mới lộ ra — đúng điều kiện 3 của QUY-TRINH-GIONG-FIGMA-100.md §6
   mà tôi đã bỏ qua.
   ------------------------------------------------------------------------ */

/* (a) Hàng "Các gói dịch vụ" có SỐ THẺ KHÁC NHAU giữa các trang:
       · 4 thẻ (Tracking) → rộng 258, dàn đều hết 1080, khe 16
       · 3 thẻ (GMC, Google Map) → rộng 299, khe 32, CĂN GIỮA (Figma x=470)
   ':has()' là cách duy nhất chọn được hàng theo số con; Chrome 105+ hỗ trợ,
   và bộ đo chạy Chromium mới nên không vướng. */
body.t4-nhom-ggm #content .t4fx-goi-row:has(> .col.t4fx-goi:nth-child(3):last-child) {
  justify-content: center; gap: 32px;
}
body.t4-nhom-ggm #content .t4fx-goi-row:has(> .col.t4fx-goi:nth-child(3):last-child)
  > .col.t4fx-goi {
  flex: 0 0 299px; max-width: 299px; width: 299px;
}

/* (b) Khối "Giai đoạn": HAI CỘT, thẻ 522×156, khe 16, hàng cách 172 */
body.t4-nhom-ggm #content .t4fx-gd-don {
  max-width: 1060px; justify-content: space-between;
}
body.t4-nhom-ggm #content .t4fx-gd-don::after { display: none; }
body.t4-nhom-ggm #content .t4fx-gd-don > .col.t4fx-gd-o {
  flex: 0 0 522px; max-width: 522px; width: 522px;
  padding-left: 0; padding-right: 0; margin: 0 0 16px;
}
body.t4-nhom-ggm #content .t4fx-gd-don > .col.t4fx-gd-o + .col.t4fx-gd-o { margin-top: 0; }
body.t4-nhom-ggm #content .t4fx-gd-don .t4fx-gd { min-height: 156px; }

@media (max-width: 849px) {
  /* ⛔ CỔNG ':has(> .col.t4fx-goi:nth-child(3):last-child)' cũ chỉ bắt hàng
     ĐÚNG BA thẻ, nên trang #6 (BỐN thẻ) rơi tuột xuống luật '274px
     !important' của trang #4 ở '40-page-xu-ly-loi-sai-google-ads.css', cộng
     với 'padding: 0' của mục (d) bên dưới ⇒ thẻ rộng 274 thay vì 258. Ba
     trang GGM đều khai thẻ 258 khe 16 trong Figma, khác nhau chỉ ở SỐ LƯỢNG
     thẻ — nên phải MỞ CỔNG cho cả bốn thẻ.

     ⛔ ĐỪNG rút gọn thành ':has(> .col.t4fx-goi)' cho gọn: độ cụ thể của
     ':has()' LẤY THEO ĐỐI SỐ CỤ THỂ NHẤT của nó, nên bỏ ':nth-child(3)
     :last-child' đi là tụt từ (1,6,1) xuống (1,5,1) và thua luật DESKTOP
     'gap: 32px' ở mục 16.2(a) — trang #5 lập tức giãn khe 16 → 32 ở khổ
     điện thoại, hỏng 5 mốc, mà trang #6 vẫn xanh. Đã trả giá 19/08/2026. */
  body.t4-nhom-ggm #content .t4fx-goi-row:has(> .col.t4fx-goi:nth-child(3):last-child)
    > .col.t4fx-goi,
  body.t4-nhom-ggm #content .t4fx-goi-row:has(> .col.t4fx-goi:nth-child(4):last-child)
    > .col.t4fx-goi { flex: 0 0 258px !important; max-width: 258px; width: 258px; }
  body.t4-nhom-ggm #content .t4fx-goi-row:has(> .col.t4fx-goi:nth-child(3):last-child),
  body.t4-nhom-ggm #content .t4fx-goi-row:has(> .col.t4fx-goi:nth-child(4):last-child) {
    justify-content: flex-start; gap: 0;
  }
  body.t4-nhom-ggm #content .t4fx-gd-don { max-width: 352px; }
  body.t4-nhom-ggm #content .t4fx-gd-don > .col.t4fx-gd-o {
    flex: 0 0 100%; max-width: 100%; width: 100%;
  }
  body.t4-nhom-ggm #content .t4fx-gd-don .t4fx-gd { min-height: 0; }



}

/* [figma] '712:22287' — image 11 · 208×158 · trang4·goi
   (lớp DUY NHẤT rộng 208px trong figma-spec/trang4.json) */
/* --- 17. Ảnh trong thẻ Gói dịch vụ — MỖI TRANG MỘT BỘ KÍCH THƯỚC ----------
   Figma vẽ ảnh gói ở kích thước KHÁC NHAU cho từng trang VÀ từng thẻ:

     trang #4  208×158 · 147×143 · 162×139 · 164×141
     trang #5  266,67×202,84 · 160×155 · 176×151
     trang #6  226×171,91 · 160×155 · 176×151 · 178×153
     trang #7  266,67×202,92 · 160×155 · 176×151

   ⛔ Bản trước khoá vào '.t4' trần, tức bộ số của trang #4 áp cho CẢ BỐN
   trang. Trang #5 vì thế hiện ảnh đầu 208×158 thay vì 266,67×202,84 — hụt
   58×45px, và bảng đo dày bắt đúng bốn mốc đó. Đừng gộp lại lần nữa: mỗi
   trang là một bộ, không có bộ nào suy ra được từ bộ nào.

   ⛔ Cũng đừng gộp thành một 'max-height' chung cho các thẻ trong cùng trang
   — ảnh 2 sẽ hiện 162×158 thay vì 147×143, sai 15px mà nhìn lướt không thấy.

   Số lấy TRỰC TIẾP từ 'absoluteBoundingBox' của lớp Figma qua bảng ánh xạ
   dày, không ước lượng. Sinh lại được bằng đoạn script trong nhật ký phiên.

   ⛔ '.t4' CHÍNH LÀ thẻ <body>, không phải một thẻ bọc bên trong. Nên chèn
   thêm '.t4' vào giữa 'body.t4-trang-…' và bộ chọn con là đòi một '.t4' thứ
   HAI nằm trong body — không bao giờ khớp, và CSS chết lặng: ảnh rơi về kích
   thước tự nhiên (267×267 desktop · 210×210 mobile) mà không có lỗi nào.
   Bảng đo bắt được vì con số nhảy sang vuông chằn chặn; mắt thì chỉ thấy
   "ảnh hơi to". Đã dính đúng một lần ngay ở vòng dựng bộ quy tắc này.
   ------------------------------------------------------------------------ */
/* trang #4 — 4 thẻ */
body.t4-trang-xu-ly-loi-sai-google-ads .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .t4fx-goi-hinh img { width: 208px; height: 158px; max-height: none; }
body.t4-trang-xu-ly-loi-sai-google-ads .t4fx-goi-row > .col.t4fx-goi:nth-child(2) .t4fx-goi-hinh img { width: 147px; height: 143px; max-height: none; }
body.t4-trang-xu-ly-loi-sai-google-ads .t4fx-goi-row > .col.t4fx-goi:nth-child(3) .t4fx-goi-hinh img { width: 162px; height: 139px; max-height: none; }
body.t4-trang-xu-ly-loi-sai-google-ads .t4fx-goi-row > .col.t4fx-goi:nth-child(4) .t4fx-goi-hinh img { width: 164px; height: 141px; max-height: none; }
/* trang #5 — 3 thẻ */
body.t4-trang-google-merchant-center .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .t4fx-goi-hinh img { width: 266.67px; height: 202.84px; max-height: none; }
body.t4-trang-google-merchant-center .t4fx-goi-row > .col.t4fx-goi:nth-child(2) .t4fx-goi-hinh img { width: 160px; height: 155px; max-height: none; }
body.t4-trang-google-merchant-center .t4fx-goi-row > .col.t4fx-goi:nth-child(3) .t4fx-goi-hinh img { width: 176px; height: 151px; max-height: none; }
/* trang #6 — 4 thẻ */
body.t4-trang-tracking-do-luong .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .t4fx-goi-hinh img { width: 226px; height: 171.91px; max-height: none; }
body.t4-trang-tracking-do-luong .t4fx-goi-row > .col.t4fx-goi:nth-child(2) .t4fx-goi-hinh img { width: 160px; height: 155px; max-height: none; }
body.t4-trang-tracking-do-luong .t4fx-goi-row > .col.t4fx-goi:nth-child(3) .t4fx-goi-hinh img { width: 176px; height: 151px; max-height: none; }
body.t4-trang-tracking-do-luong .t4fx-goi-row > .col.t4fx-goi:nth-child(4) .t4fx-goi-hinh img { width: 178px; height: 153px; max-height: none; }
/* trang #7 — 3 thẻ */
body.t4-trang-google-map-local-seo .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .t4fx-goi-hinh img { width: 266.67px; height: 202.92px; max-height: none; }
body.t4-trang-google-map-local-seo .t4fx-goi-row > .col.t4fx-goi:nth-child(2) .t4fx-goi-hinh img { width: 160px; height: 155px; max-height: none; }
body.t4-trang-google-map-local-seo .t4fx-goi-row > .col.t4fx-goi:nth-child(3) .t4fx-goi-hinh img { width: 176px; height: 151px; max-height: none; }

/* [figma] luật dùng chung — lớp rộng 158px có ở 2 trang; đại diện: trang4:'1113:9219' · trang5:'1113:10417'
   (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) {
  /* trang #4 — 4 thẻ */
  body.t4-trang-xu-ly-loi-sai-google-ads .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .t4fx-goi-hinh img { width: 158px; height: 120px; max-height: none; }
  body.t4-trang-xu-ly-loi-sai-google-ads .t4fx-goi-row > .col.t4fx-goi:nth-child(2) .t4fx-goi-hinh img { width: 112px; height: 109px; max-height: none; }
  body.t4-trang-xu-ly-loi-sai-google-ads .t4fx-goi-row > .col.t4fx-goi:nth-child(3) .t4fx-goi-hinh img { width: 122px; height: 104.95px; max-height: none; }
  body.t4-trang-xu-ly-loi-sai-google-ads .t4fx-goi-row > .col.t4fx-goi:nth-child(4) .t4fx-goi-hinh img { width: 124px; height: 107px; max-height: none; }
  /* trang #5 — 3 thẻ */
  body.t4-trang-google-merchant-center .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .t4fx-goi-hinh img { width: 158px; height: 120px; max-height: none; }
  body.t4-trang-google-merchant-center .t4fx-goi-row > .col.t4fx-goi:nth-child(2) .t4fx-goi-hinh img { width: 112px; height: 109px; max-height: none; }
  body.t4-trang-google-merchant-center .t4fx-goi-row > .col.t4fx-goi:nth-child(3) .t4fx-goi-hinh img { width: 124px; height: 107px; max-height: none; }
  /* trang #6 — 4 thẻ */
  body.t4-trang-tracking-do-luong .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .t4fx-goi-hinh img { width: 156px; height: 119px; max-height: none; }
  body.t4-trang-tracking-do-luong .t4fx-goi-row > .col.t4fx-goi:nth-child(2) .t4fx-goi-hinh img { width: 110px; height: 108px; max-height: none; }
  body.t4-trang-tracking-do-luong .t4fx-goi-row > .col.t4fx-goi:nth-child(3) .t4fx-goi-hinh img { width: 122px; height: 105px; max-height: none; }
  body.t4-trang-tracking-do-luong .t4fx-goi-row > .col.t4fx-goi:nth-child(4) .t4fx-goi-hinh img { width: 124px; height: 106px; max-height: none; }
  /* trang #7 — 3 thẻ */
  body.t4-trang-google-map-local-seo .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .t4fx-goi-hinh img { width: 159px; height: 121px; max-height: none; }
  body.t4-trang-google-map-local-seo .t4fx-goi-row > .col.t4fx-goi:nth-child(2) .t4fx-goi-hinh img { width: 96px; height: 93px; max-height: none; }
  body.t4-trang-google-map-local-seo .t4fx-goi-row > .col.t4fx-goi:nth-child(3) .t4fx-goi-hinh img { width: 105px; height: 90px; max-height: none; }



}

/* 18.2 Mục CUỐI của breadcrumb trên mobile có cao dòng 13px, khác hai mục đầu
   (22px) — đúng như Figma khai. Không phải nhầm: hộp lớp đó cao đúng 13px. */


/* 18.3 CHỈ đoạn NGAY SAU "Phương án 1:/2:" dùng màu chữ hệ thống #1f1f1f.
   ⛔ Đừng đặt lên mọi <p> trong .t4fx-gd — Figma cho các đoạn còn lại màu
   ĐEN TUYỀN #000000, nhãn "Phương án" màu cam #b77537 và dòng "Chi phí" màu
   xanh #458763. Quét cả khối đã phá đúng 6 mốc đang đạt, đổi 2 sửa thành 8
   lỗi mới. */
.t4 .t4fx-gd .t4fx-pa-ten + p { color: var(--t4-text); }

/* 18.4 Huy hiệu số thứ tự các bước: Figma bo 12px trên hộp 26px — KHÔNG phải
   hình tròn. 'border-radius: 50%' cho ra 13px, nhìn tròn hơn thiết kế. */
.t4 .t4fx-qt-so { border-radius: 12px; }

/* 18.5 Thân mỗi bước ở mobile: Figma khai hộp chữ x=62 rộng 291 (mép phải
   353), trong khi cột chứa rộng tới 377 — tức có 24px thụt lề phải. */
@media (max-width: 849px) {
  .t4 .t4fx-qt-buoc > li > *:last-child { max-width: 291px; }



}

/* 18.6 Khoảng cách dọc theo đúng số Figma ----------------------------------
   Figma gộp CẢ khối "Quy trình" lẫn các thẻ "Giai đoạn" vào MỘT node, nên
   giữa chúng không có ranh giới section nào. Bên site là hai [section] rời,
   và tổng khe hở đang là 272px trong khi Figma đo được 228,5px — thừa 43,5px
   đến từ padding-bottom 40px của section trên cộng phần dôi của lưới. */
/* ══ BỌC PHẠM VI BẰNG ':where()' — 20/08/2026, linter mục (8) ═════════════
   Tám luật dưới đây neo vào ID section ('#quy-trinh' · '#ly-do' ·
   '#casestudy') mà KHÔNG có lớp riêng nào, nên chúng khớp ở mọi trang có
   cùng ID. Đo thật: '#quy-trinh' có ở 4 trang, '#ly-do' và '#casestudy' có ở
   5 trang — tức chúng CỐ Ý vượt ra ngoài nhóm GGM sang trang #3 và #4.
   Đây chính là cơ chế của chuyện "CSS trang #4 phụ thuộc CSS nhóm GGM" đã
   ghi trong bàn giao: '44-nhom-ggm' nạp ở vị trí 10, sau '40-page-*' ở vị
   trí 6, nên nó đè ngược lên mô-đun của chính trang #4.

   ⛔ DÙNG ':where()' CHỨ KHÔNG PHẢI 'body.lop'. ':where()' đóng góp ĐÚNG 0
   vào độ cụ thể, nên bộ chọn giữ nguyên (1,1,0) như cũ — chỉ THU HẸP tập
   phần tử khớp, không lật bất kỳ ràng buộc hoà nào. Viết 'body:is(...)' sẽ
   nâng lên (1,2,1) và có thể thắng ngược một luật đang đè nó ở nơi khác.
   Lối này đã có tiền lệ trong dự án: '51-page-dich-vu-google-marketing.css'.

   ⛔⛔ VÀ PHẢI VIẾT '.t4:where(…)', KHÔNG PHẢI ':where(…) .t4'.
   '.t4' CHÍNH LÀ thẻ '<body>', mà lớp trang cũng nằm trên '<body>' — cùng
   MỘT phần tử. Viết ':where(.t4-nhom-ggm) .t4' là đòi một '.t4' thứ hai nằm
   BÊN TRONG body: không bao giờ khớp, CSS chết lặng, không lỗi nào báo.
   Đã dính đúng lần này: tám luật thành vô hiệu và bộ so computed bắt được
   228 phần tử đổi. Cùng cái bẫy đã ghi ở bàn giao 17d mục 7.

   Danh sách trang lấy từ chính nội dung: grep '_id="<id>"' trong docs/uxb/.
   Thêm trang mới dùng ba ID này thì PHẢI thêm vào danh sách ở đây.
   ═══════════════════════════════════════════════════════════════════════ */
.t4:where(.t4-nhom-ggm, .t4-trang-xu-ly-loi-sai-google-ads) #quy-trinh { padding-bottom: 0 !important; }
.t4 .t4fx-qt-duoi .t4fx-gd-luoi { margin-top: 44.5px; }

/* Khoảng cách trong thẻ Giai đoạn: nhãn → đoạn đầu, và "Phương án N:" → đoạn
   mô tả. Figma cho 76px và 30px, site đang 70px và 22px. */
/* Lấy mốc từ đỉnh <h3>: Figma đặt đoạn đầu ở +76px, site đang +71px. Một
   khoảng 5px ở đây kéo theo cả "Phương án N:" và đoạn mô tả về đúng chỗ —
   ba cặp lệch chỉ cần một sửa. Đặt trên chính h3, KHÔNG dùng 'h3 + p': giữa
   chúng còn thẻ bọc nên bộ chọn anh-em liền kề không trúng. */
/* ⚠ Dùng PADDING chứ không dùng MARGIN: <h3> nằm trong thẻ bọc .text của UX
   Builder nên lề dưới của nó bị TRIỆT TIÊU LỀ (margin collapsing) với lề của
   thẻ bọc — đặt margin-bottom:5px vẫn ra đúng 0 tác dụng, đã đo. */
/* ⤴ DỜI sang cuối 30-components.css (III.4.0 đợt C) — luật này khai trùng
   selector với mô-đun đó, mục (4) linter. */
.t4 .t4fx-gd .t4fx-pa-ten + p { margin-top: 8px; }

/* 19.2 THẺ GÓI DESKTOP THIẾU ĐỔ BÓNG ---------------------------------------
   ⛔ Chú thích ở mục 11.7 ghi "Figma dùng VIỀN chứ không phải đổ bóng" — SAI.
   Node 712:22286 khai CẢ HAI: stroke #000 @11% 1px INSIDE **và** DROP_SHADOW
   radius 8 · x 3 · y 3 · #000 @15%. Bản mobile (@25%) đã có bóng từ trước,
   chỉ desktop bị bỏ sót.
   Bằng chứng: quét ngang qua mép phải thẻ 1, ảnh Figma cho dải chuyển
   222→252 dài ~10px, ảnh site nhảy thẳng sang nền.

   Đổi luôn VIỀN → box-shadow INSET. Lý do: stroke INSIDE của Figma không ăn
   vào khung chữ, còn 'border' của trình duyệt thì có — nên nút bên trong chỉ
   rộng 224 thay vì 226, lệch x 1px và ảnh tụt 1px. Một sửa hết ba mốc. */
.t4 #goi-dich-vu .t4fx-goi .col-inner {
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .11), 3px 3px 8px rgba(0, 0, 0, .15);
}
@media (max-width: 849px) {
  .t4 #goi-dich-vu .t4fx-goi .col-inner {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .11), 3px 3px 8px rgba(0, 0, 0, .25);
  }



}

/* 19.3 NÚT XANH BỊ FLATSOME PHỦ LỚP SÁNG -----------------------------------
   Lớp 'is-shade' sinh một ::after phủ kín nút:
     box-shadow: inset rgba(255,255,255,.1) 1px 1px 0,
                 inset rgba(255,255,255,.2) 0 32px 15px
   → nút chuyển dần rgb(106,159,130) ở đỉnh xuống rgb(72,137,102) ở đáy,
   trong khi Figma là MỘT màu phẳng #458763.
   ⚠ 'background-image' và 'box-shadow' của CHÍNH nút đều trả 'none' — lớp phủ
   nằm ở ::after, soi computed style của phần tử là không thấy gì. 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. */
/* ⤴ DỜI sang cuối 30-components.css (20/08/2026): nửa kia của cách sửa này
   ('display: flex' cho chính cái nút) đã về đó ở đợt C. Để hai nửa ở hai
   tệp là người sau sửa một nửa rồi tưởng xong.                          */

/* 19.4 CHỮ TRONG NÚT KHÔNG CĂN GIỮA THEO CHIỀU DỌC --------------------------
   Figma: nút cao 44, đệm trên/dưới 10, chữ cao 24 → chữ đúng tâm.
   Site: '.button' là display:block padding 0, nên <span> nằm sát mép trên
   (cách 1px viền) — chữ CAO HƠN tâm 9px. Đây chính là vệt chữ đôi trong ảnh
   nhiệt mà bảng số im lặng.
   ⛔ Phải là 'flex', KHÔNG phải 'inline-flex'. Đã thử inline-flex trước và
   hỏng ngay: nút CTA mobile dựa vào 'margin-left/right: auto' để đứng đúng
   chỗ, mà lề auto KHÔNG có tác dụng trên hộp cấp INLINE — nút nhảy về sát
   mép trái và cta_mb xấu đi từ 3,79% lên 4,72%. 'flex' là cấp khối nên giữ
   nguyên mọi hành vi cũ (lề auto · float · width 100%). */
/* ⤴ DỜI sang cuối 30-components.css (III.4.0 đợt C) — luật này khai trùng
   selector với mô-đun đó, mục (4) linter. */

/* 19.5 NÚT CTA MOBILE — ba mốc sai, lộ ra khi soi lại vùng đỏ của cta_mb ----
   Figma 1113:9760: nút x=121 w=224 h=43, đệm ngang 32, chữ 160px MỘT DÒNG.
   Site: x=57 · h=40,25 · đệm 39 ⇒ lòng nút chỉ 144px < 160px nên chữ GÃY
   XUỐNG HAI DÒNG, và nút đứng sát mép trái thay vì mép phải.

   ⚠ Figma cho nút SÁT MÉP PHẢI của khối chữ (121+224 = 345 = 57+288), đúng
   như bản desktop (float: right). KHÔNG phải căn giữa — lề auto hai bên là
   suy diễn của bản trước, không có trong thiết kế.
   Đệm 31px chứ không phải 32: nút có sẵn viền 1px mỗi bên ⇒ (31+1)×2 = 64. */
@media (max-width: 849px) {
  .t4 .t4fx-cta-the .button.t4fx-nut-xanh {
    margin-left: auto; margin-right: 0;
    padding: 0 31px; min-height: 43px;
  }



}

/* [figma] trang4 · section quytrinh_mb — 3 lớp rộng 279px: '1113:9267' · '1113:9268' · '1113:9269'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 4 để chọn) */
/* 19.6 ẢNH MINH HOẠ "QUY TRÌNH" TRÊN MOBILE — sai cỡ, kéo lệch cả khối dưới
   Figma 'Asset 14 1': x=61,5 · y=317 · 279×200 (căn giữa khung 402).
   Site: x=25 · y=291,3 · 352×251,9 — rộng hơn 26%, và khối bọc '.img' của
   Flatsome cao 328 trong khi ảnh chỉ 251,9 nên dôi ra 76px.

   Hệ quả dây chuyền: tiêu đề "Quy trình xử lý rõ ràng" và đoạn mô tả đều
   tụt 16,3px so với Figma, còn khe từ đoạn mô tả xuống bước 1 thì HỤT 16px
   (site 55 · Figma 71). Hai cái sai triệt tiêu nhau nên mốc bước 1 vẫn khớp
   — đúng cái điểm mù "dịch đều cả cụm" của bảng so tương đối.
   ⇒ Nắn đúng khối ảnh là cả chuỗi bên dưới tự về đúng chỗ, không phải chỉnh
   thêm lề nào khác.
   Lề 63,7px trên: đáy H2 ở 253,3 + 63,7 = 317. Lề 64px dưới: 517 + 64 = 581. */
@media (max-width: 849px) {
  .t4 #quy-trinh .t4fx-qt-anh-mb {
    width: 279px; height: auto; margin: 63.7px auto 64px;
  }
  .t4 #quy-trinh .t4fx-qt-anh-mb .img-inner,
  .t4 #quy-trinh .t4fx-qt-anh-mb img { width: 279px; height: 200px; }



}

/* 19.6b Khe từ đoạn mô tả xuống bước 1 (mobile): Figma 71px, site 55px.
   ⚠ Tôi đã đoán sai một lần: tưởng nắn khối ảnh xong thì khe này tự về đúng
   vì hai cái sai triệt tiêu nhau. Không — khe là lề CỐ ĐỊNH, nên nắn ảnh
   xong cả cụm bước tụt lên 16px và mốc bước 1 từ đúng thành sai.
   Đo lại sau khi sửa mới thấy.
   ⚠ Và đoán lần hai cũng sai: tưởng lề đang là 20px nên đặt 36px, hoá ra lề
   thật là 55px và đặt 36 làm nó tụt LÊN 19px nữa. Khe này chính là lề của
   '.t4fx-qt-buoc', nên đặt thẳng số của Figma: 71px. */
@media (max-width: 849px) {
  .t4 #quy-trinh .t4fx-qt-buoc { margin-top: 71px; }



}

/* 19.6c Đáy section Quy trình trên mobile: Figma cao 1635, site 1572,6.
   Bước 5 kết thúc đúng y=1563 ở cả hai bên; chỗ thiếu nằm ở đệm đáy. Mục
   18.6 đặt 'padding-bottom: 0 !important' để chữa một khe THỪA của DESKTOP,
   và nó đè luôn sang mobile. Trả lại đúng phần đệm cho riêng mobile.
   62,4px = 1635 − 1572,6 (site còn 9,6px dôi sẵn sau bước 5). */
@media (max-width: 849px) {
  .t4:where(.t4-nhom-ggm, .t4-trang-xu-ly-loi-sai-google-ads) #quy-trinh { padding-bottom: 62.4px !important; }



}

/* 19.7 KHỐI "LÝ DO" MOBILE DÙNG NHẦM ẢNH ----------------------------------
   Figma vẽ HAI minh hoạ KHÁC HẲN NHAU cho cùng khối này:
     desktop 'lydo'     — cảnh đẳng cấu: bắt tay, cọc tiền, hợp đồng, xu vàng
     mobile  'lydo_mb'  — hai người bắt tay trên cột tăng trưởng, mũi tên
                          xanh dương, nền phố mờ  (node 1113:9531)
   Site đang dùng ảnh DESKTOP cho cả hai khổ. Hình học thì khớp tuyệt đối
   (x=25 · y=145 · 352×258) nên bảng số im lặng — chỉ so ảnh mới thấy.

   Đổi bằng CSS chứ không sửa shortcode: giữ nguyên <img> để nó vẫn giữ chỗ
   đúng kích thước, chỉ làm nó trong suốt rồi vẽ ảnh đúng lên nền thẻ bọc.
   Ảnh mobile đã xuất từ Figma ở 2× (704×517) và tải lên demo1. */
@media (max-width: 849px) {
  .t4:where(.t4-nhom-ggm, .t4-trang-xu-ly-loi-sai-google-ads, .t4-trang-dich-vu-google-marketing) #ly-do .img .img-inner {
    background: url(https://demo1.tiepthitute.com/wp-content/uploads/2026/08/xu-ly-loi-sai-google-ads-minh-hoa-ly-do-mobile.png)
                center / contain no-repeat;
  }
  .t4:where(.t4-nhom-ggm, .t4-trang-xu-ly-loi-sai-google-ads, .t4-trang-dich-vu-google-marketing) #ly-do .img .img-inner img { opacity: 0; }



}

/* 19.8 NGẮT DÒNG TIÊU ĐỀ "Lý do" KHÁC NHAU GIỮA HAI KHỔ ---------------------
   Figma khai ngắt dòng THẲNG TRONG CHUỖI, và hai khổ ngắt khác nhau:
     desktop  'Tại sao doanh nghiệp của bạn nên đồng hành cùng 4T?'  (tự xuống)
     mobile   'Tại sao doanh nghiệp \ncủa bạn nên \nđồng hành cùng 4T?'
   Site chỉ có một <br> cố định nên mobile ngắt thành
   'Tại sao doanh nghiệp của / bạn nên / đồng hành cùng 4T?' — lệch một từ ở
   cả ba dòng, hiện thành chữ đôi trong ảnh nhiệt.

   ⛔ KHÔNG ép bằng 'max-width': hộp chữ Figma rộng đúng 352 và bảng số dày so
   bề rộng khối, bóp hẹp là sinh mốc lệch mới. Cũng KHÔNG chỉnh 'word-spacing'
   — Figma khai 'letter-spacing: -0,96' và không có word-spacing, đổi là sai
   luôn thước chữ.
   ⇒ Đây đúng ca "CSS bất lực" của luật 2: thêm <br> vào nội dung, rồi bật/tắt
   theo khổ. Hai lớp 't4-br-mb' và 't4-br-dt' đặt ở đây để dùng lại cho trang
   sau — mọi trang đều có ít nhất một tiêu đề ngắt khác nhau giữa hai khổ. */
br.t4-br-mb { display: none; }
@media (max-width: 849px) {
  br.t4-br-mb { display: inline; }
  br.t4-br-dt { display: none; }



}

/* 19.9 KHỐI MÔ TẢ MOBILE — Figma là MỘT lớp chữ, site là BỐN thẻ <p> --------
   Figma gói cả năm đoạn vào một lớp chữ duy nhất (y=578 · cao 440 · 16/30),
   ngăn nhau bằng ký tự xuống dòng — tức KHÔNG có khe đoạn văn, nhịp dòng đều
   30px suốt. Site chia thành bốn <p>, mỗi cặp cách nhau 16px.
   Đếm dòng trên chính ảnh xuất ra: Figma 14 dòng, site 13 — Figma còn ngắt
   cứng sau "kết quả:" để cụm in đậm bắt đầu ở dòng mới.
   ⇒ Thêm <br> (đã sửa nội dung) và bỏ khe giữa các <p> ở khổ mobile.

   ⚠ Bỏ khe hẳn cũng SAI. Đếm lại vị trí từng dòng trên hai ảnh sau khi bỏ:
   lệch cộng dồn theo bậc thang −4 → −9 → −14 → −19, tức HỤT ĐÚNG 5px ở mỗi
   chỗ xuống đoạn. Figma có 'paragraphSpacing = 5', không phải 0.
   Vì vậy cụm in đậm cũng phải là một <p> RIÊNG chứ không phải <br>: <br>
   không tạo hộp nên không nhận được khe 5px đó. */
@media (max-width: 849px) {
  .t4 #mo-ta-dich-vu .t4-only-mobile .t4fx-chu p { margin: 0; }
  .t4 #mo-ta-dich-vu .t4-only-mobile .t4fx-chu p + p { margin-top: 5px; }



}

/* 19.10 GIÃN CHỮ VÀ CAO DÒNG CỦA H2 KHÁC NHAU GIỮA HAI KHỔ ------------------
   Mục 11.14 (c) chốt 'letter-spacing: -1.2px' cho H2 của Mô tả và Lý do —
   đúng, nhưng đó là số của khổ DESKTOP (chữ 40px). Figma khai theo px tuyệt
   đối cho từng node, nên khổ mobile (chữ 32px) là **-0,96px**, và cao dòng
   là 42,656 chứ không phải 43.
   Sai 0,24px mỗi ký tự nghe như không đáng kể, nhưng cộng dồn hết một dòng
   tiêu đề là lệch 4–6px ở cuối dòng — nhìn ảnh nhiệt thấy rõ chữ đôi dồn về
   bên phải trong khi đầu dòng vẫn khít.
   ⛔ ĐỪNG đụng vào CAO DÒNG ở đây. Tôi đã thử đặt đúng số lẻ Figma khai
   (53,32 và 42,656) và làm hỏng: HỘP CHỮ Figma dựng ra dùng số ĐÃ LÀM TRÒN —
   desktop 2 dòng = 106 = 2×53, mobile 3 dòng = 129 = 3×43. Đặt số lẻ cho hộp
   cao 128 thay vì 129, kéo cả khối dưới lên 1,2px và lydo_mb xấu đi từ 4,36%
   lên 5,72%. Số lẻ là giá trị KHAI BÁO, không phải giá trị DỰNG. */
@media (max-width: 849px) {
  .t4 #mo-ta-dich-vu .t4fx-mota-mb-h2,
  .t4 #ly-do .t4fx-h2-moss { letter-spacing: -0.96px; }



}

/* 19.10b GIÃN CHỮ TIÊU ĐỀ MOBILE KHÔNG SUY RA ĐƯỢC TỪ CỠ CHỮ — PHẢI ĐỌC
   TỪNG NODE.
   [phục vụ] phần tử: Text (h2) | khối: tiêu đề #mo-ta-dich-vu và #ly-do
   [trang] tracking-do-luong | [figma] mota_mb 1113:14679 · lydo_mb
   [lý do vượt panel] panel Text không có ô letter-spacing

   ⛔ Chú thích 19.10 ở trên suy "mobile 32px ⇒ -0,96px" từ trang #5. Suy luận
   đó SAI cho hai trang kia — Figma khai từng node một, và ba trang khác nhau:

       node        #5      #6       #7
       mota_mb   -0,96   -1,92   -0,96
       lydo_mb   -0,96    0       0

   Hậu quả thật ở #6: đặt -0,96 làm tiêu đề Mô tả dài thêm ~49px và rơi
   xuống BA dòng (129px) trong khi Figma khai HAI (86px) — kéo lệch cả chuỗi
   mốc bên dưới và làm section cao thêm 43px. Con số giãn chữ ở đây không
   phải chuyện thẩm mỹ, nó quyết định điểm ngắt dòng. */
@media (max-width: 849px) {
  .t4.t4-trang-tracking-do-luong #mo-ta-dich-vu .t4fx-mota-mb-h2 { letter-spacing: -1.92px; }
  .t4.t4-trang-tracking-do-luong #ly-do .t4fx-h2-moss { letter-spacing: 0; }



}

/* [figma] trang6 · section mota_mb — 3 lớp rộng 352px: '1113:14700' · '1113:14701' · '1113:14702'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 6 để chọn) */
/* 19.13 CHUỖI MỐC DỌC KHỔ ĐIỆN THOẠI CỦA #mo-ta-dich-vu — RIÊNG TRANG #6 ---
   [phục vụ] phần tử: Image + Text | khối: hàng '.t4-only-mobile'
   [trang] tracking-do-luong | [figma] mota_mb — chip 68/29 · ảnh 'Asset 6 1'
   y=153 352×212,27 · h2 y=397,27 h=86 · khối chữ y=507,27 h=245 · ba hàng
   tích y=776,27/818,27/860,27 cao 42 · section 962,27
   [lý do vượt panel] panel Image không có ô đặt cỡ theo breakpoint tới 0,01px,
   panel Text không có ô lề riêng cho mobile của một trang

   ⛔ Ảnh mobile KHÁC NHAU ở cả ba trang GGM, đừng dùng chung con số:
       #5 'Asset 4 4' x=55 y=201 292×200
       #6 'Asset 6 1' x=25 y=153 352×212,27
       #7 'Asset 5 2' x=25 y=201 352×195,96
   Luật 19.11 ghim 270×200 lấy từ trang #4; áp cho #6 là ảnh hụt 60×12,3 và
   đẩy cả chuỗi mốc bên dưới lệch 22,8px.

   Chuỗi số đặt theo Figma, mỗi mắt xích một luật, cộng lại đúng 962,27:
     chip đáy 97  →(32)→ ảnh 153 …212,27… 365,27 →(32)→ h2 397,27 …86…
     483,27 →(24)→ khối chữ 507,27 …245… 752,27 →(24)→ tích 776,27
     …42×3… 902,27 →(đệm section 60)→ 962,27 */
@media (max-width: 849px) {
  /* ⛔ Phải kèm CẢ HAI id: luật 80px ở mục 19.2 khai '#content #mo-ta-dich-vu'
     (2,3,0), mà MỘT id thắng mọi số lượng class — bản đầu viết một id thua im
     lặng, đo ra vẫn đúng 80px. Cùng cái bẫy đã ghi ở 20.8. */
  .t4.t4-trang-tracking-do-luong #content #mo-ta-dich-vu .row.t4-only-mobile { margin-top: 32px; }
  .t4.t4-trang-tracking-do-luong #mo-ta-dich-vu .t4fx-mota-anh-mb,
  .t4.t4-trang-tracking-do-luong #mo-ta-dich-vu .t4fx-mota-anh-mb .img-inner,
  .t4.t4-trang-tracking-do-luong #mo-ta-dich-vu .t4fx-mota-anh-mb img {
    width: 352px; height: 212.27px;
  }
  .t4.t4-trang-tracking-do-luong #mo-ta-dich-vu .t4fx-mota-mb-h2 { margin-top: 32px; }
  /* Đệm dưới 30px trả lại phần lề mà '<p>' cuối mất khi danh sách tích rời
     khỏi ô — cùng cơ chế đã ghi ở 20.8, nhưng khổ mobile hụt 30 chứ không 45. */
  .t4.t4-trang-tracking-do-luong #mo-ta-dich-vu .t4-only-mobile
    .text.t4fx-chu:has(+ .text.t4fx-tich-dau) { margin-top: 24px; padding-bottom: 30px; }



}

/* 19.14 TIÊU ĐỀ #ly-do KHỔ ĐIỆN THOẠI: BỎ NGẮT DÒNG CỨNG (riêng #6) --------
   [phục vụ] phần tử: Text (h2) | khối: tiêu đề #ly-do
   [trang] tracking-do-luong | [figma] lydo_mb — lớp w=352 h=129, ls=0, tự
   ngắt thành BA dòng, không có ký tự xuống dòng nào
   [lý do vượt panel] '<br>' nằm trong chữ của phần tử, chỉ CSS mới ẩn được
   theo breakpoint mà không phải tách làm hai phần tử

   '<br>' sau chữ "bạn" là ngắt dòng của khổ DESKTOP (Figma lydo: w=520, hai
   dòng, ngắt đúng chỗ đó). Ở khổ 352px cộng với ls=0 thì nó thành BỐN dòng
   (172px) trong khi Figma khai BA (129px). */
@media (max-width: 849px) {
  .t4.t4-trang-tracking-do-luong #ly-do .t4fx-h2-moss br { display: none; }



}

/* 19.15 H2 "Các gói dịch vụ dành cho bạn" KHỔ ĐIỆN THOẠI: 40/53, không 32/43
   [phục vụ] phần tử: Text (h2) | khối: tiêu đề #goi-dich-vu
   [trang] tracking-do-luong | [figma] goi_mb — lớp y=137 w=378 h=106
   [lý do vượt panel] panel Text không có ô cỡ chữ riêng cho breakpoint

   Lại một con số KHÁC NHAU giữa ba trang GGM, đọc từng node mới ra:
       #5  32/42,656  hộp cao 86
       #6  40/53,32   hộp cao 106
       #7  40/53,32   hộp cao 106
   Cùng ca với '#casestudy .t4fx-head-2col h2' ở mục 12.x — và dùng 53 chứ
   không 53,32 vì hộp Figma dựng theo số ĐÃ LÀM TRÒN (xem 19.10). */
@media (max-width: 849px) {
  .t4.t4-trang-tracking-do-luong #goi-dich-vu h2 { font-size: 40px; line-height: 53px; }



}

/* 19.15b ĐÁY DẢI KEM CỦA TRANG #5 — Figma khai 469, site dựng 459,08
   [phục vụ] phần tử: Section | khối: dải kem #quy-trinh
   [trang] google-merchant-center | [figma] quytrinh — lớp nền 'Container/
   Background' y=0 h=469, hàng nội dung kết thúc ở 460 ⇒ còn 9 dưới
   [lý do vượt panel] panel Section chỉ có MỘT ô đệm cho cả trên lẫn dưới

   Section khai 'padding="40px"' nhưng đáy đang là 0, nên dải kem hụt gần
   10px và kéo cả khối Giai đoạn bên dưới lên theo. */
/* ⛔ '!important' vì mục 16 khai '.t4 #quy-trinh { padding-bottom: 0
   !important }'. Không có nó thì luật này NẰM CHẾT — đã nằm chết từ 19/08
   tới 20/08 mà không ai biết, vì mốc được sửa cùng lúc là mốc khác. */
.t4.t4-trang-google-merchant-center #quy-trinh { padding-bottom: 9.92px !important; }

/* 19.17 LỀ TRÊN TIÊU ĐỀ THẺ GÓI — THẺ THỨ NHẤT SAI Ở CẢ BA TRANG
   ⛔ ĐÃ THỬ VÀ ĐÃ LÙI (20/08/2026) — hồ sơ I.6, ĐỪNG thử lại cùng cách.

   [figma] goi · đo bằng KHUNG GLYPH, mốc từ mép trên section:

       thẻ      #5 Figma/site      #6 Figma/site      #7 Figma/site
        1        588,9 / 609,3      595,5 / 578,4      589,0 / 609,4
        2        587,0 / 586,0      587,0 / 586,0      601,0 / 600,0
        3        563,0 / 570,0      585,0 / 584,0      585,0 / 584,0
        4              —            586,0 / 585,0            —

   Thẻ 2–4 lệch đúng 1,0px (đạt). Riêng THẺ 1 lệch ±20px và lệch NGƯỢC CHIỀU
   nhau giữa các trang — tiêu đề thẻ 1 dài 1 dòng ở #5 nhưng 2 dòng ở #6/#7.

   ĐÃ THỬ: đổi 'nth-child(1) … { margin-top }' của mục 20.6 theo đúng phần
   lệch đo được (27 → 6,6 cho #5/#7 · 27 → 44,1 cho #6). Kết quả ĐO LẠI:

       trang   lề đặt   dịch kỳ vọng   dịch THẬT   hệ số
        #5     −20,4       −20,4          −3,9      0,19
        #7     −20,4       −20,4          −3,9      0,19
        #6     +17,1       +17,1         +33,6      1,97
        #5 thẻ 3  −7,0      −7,0          +3,5     −0,50

   Bốn hệ số khác nhau, một cái ÂM ⇒ vị trí tiêu đề KHÔNG phải hàm tuyến tính
   của lề này. Thẻ là cột flex có nút ghim đáy ('margin-top: auto') và chiều
   cao thẻ cố định, nên đổi lề ở trên chỉ làm phần trống phân bố lại. Vặn tiếp
   knob này là đúng thứ I.6 cấm — nộp hồ sơ, không sửa mù vòng bốn.

   → Phiên sau: đo NỘI TẠNG thẻ (ảnh · khe ảnh→tiêu đề · tiêu đề · khe
   tiêu đề→nút · nút · đệm đáy) rồi mới quyết, giống cách 'soi-the-dichvu.js'
   làm cho §4 Dịch vụ. */

/* 19.20 HÀNG "Lý do" — CHIỀU CAO HÀNG = CHIỀU CAO ẢNH (chỉ #6 và #7)
   [phục vụ] phần tử: Row/Col + Image | khối: '.t4fx-split' của #ly-do
   [trang] tracking-do-luong · google-map-local-seo | [figma] lydo 'Frame 162'
   [lý do vượt panel] đệm đáy mặc định của '.col' không có ô trong panel

   Figma: hàng cao ĐÚNG bằng ảnh, khối chữ 208 căn giữa theo chiều dọc.

       trang   ảnh Figma   hàng Figma   ảnh site   hàng site
        #5      560×327       327        506×295,5   327,5   ← đang khớp
        #6      506×358       358        506×358     390     ← thừa 32
        #7      496×331       331        506×337,7   369,7   ← thừa 38,7

   32px thừa là 'padding-bottom: 30px' mặc định của '.col' Flatsome (bẫy II.H-6)
   cộng viền làm tròn. ⛔ KHÔNG áp cho #5: hàng của nó đang khớp Figma nhờ ảnh
   render thấp hơn khai báo, gỡ đệm là phá một trang đang '0 ❌'. */
@media (min-width: 850px) {
  /* ⚠ 32px thừa nằm ở ĐỆM ĐÁY CỦA CHÍNH HÀNG, không phải đệm cột — đã đo
     'padding: 0px 0px 32px' trên '.t4fx-split'. Đặt lên '.col' thì không ăn. */
  .t4.t4-trang-tracking-do-luong #ly-do .t4fx-split,
  .t4.t4-trang-google-map-local-seo #ly-do .t4fx-split {
    padding-bottom: 0;
    /* Figma: hộp chip 108 → hàng 241 ⇒ khe 133. Site hộp chip đo được 112,94
       nên lề hàng = 133 − (112,94 − 108) − … = 84,94 (đo ngược từ mốc thật). */
    margin-top: 84.94px;
  }
  .t4.t4-trang-google-map-local-seo #ly-do .t4fx-split .img,
  .t4.t4-trang-google-map-local-seo #ly-do .t4fx-split .img-inner { height: 331px; }



}

/* 19.20d Đáy khối Giai đoạn của #6/#7 là 80px, không phải 60
   Figma: lưới kết thúc ở 1112 (#6) / 1114 (#7), section 1192 / 1194 ⇒ 80.
   Trang #5 giữ 60 (lưới 1008, section 1068). */
@media (min-width: 850px) {
  /* '!important' vì '[section padding="0px"]' sinh CSS nội tuyến khoá theo
     ID section — id thắng mọi số lượng class. */
  /* Phải kèm '#content' VÀ lớp nhóm: mục 20.x khai
     'body.t4-nhom-ggm #content .t4fx-qt-duoi { padding-bottom: 60px !important }'
     = (1,2,1) và nằm SAU trong tệp — '!important' không cứu được độ cụ thể thấp. */
  body.t4-nhom-ggm.t4-trang-tracking-do-luong #content .t4fx-qt-duoi,
  body.t4-nhom-ggm.t4-trang-google-map-local-seo #content .t4fx-qt-duoi {
    padding-bottom: 80px !important;
  }



}

/* 19.21 TIÊU ĐỀ THẺ GÓI SỐ 1 — GHIM THEO NÚT, ĐỪNG VẶN LỀ TRÊN
   [phục vụ] phần tử: Text (h3) | khối: thẻ đầu của '.t4fx-goi-row'
   [trang] tracking-do-luong · google-map-local-seo | [figma] goi
   [lý do vượt panel] khoảng cách tiêu đề → nút không có ô trong panel

   ⛔ ĐÍNH CHÍNH mục 19.17 (đã lùi): sở dĩ vặn 'margin-top' cho ra hệ số dịch
   0,19 · 1,97 · −0,50 là vì mục 11.x khai '.col-inner > .text { margin: auto 0
   !important }' — tiêu đề TRÔI TỰ DO giữa ảnh và nút, nên đặt lề trên chỉ làm
   phần trống chia lại. Ghim theo NÚT thì hết trôi: nút nằm cố định ở y=678
   trong Figma và 331 trên site ở CẢ BỐN thẻ.

       thẻ   Figma tiêu đề   đáy tiêu đề   khe tới nút
        1        595,5          651,5         26,5   ← site đang cho 42,6
        2        587,0          643,0         35     ← site 35 ✓
        3        585,0          641,0         37     ← site 37 ✓
        4        586,0          642,0         36     ← site 36 ✓
   Chỉ thẻ 1 lệch, vì ảnh của nó cao nhất (171,9) nên phần trống nhỏ nhất. */
@media (min-width: 850px) {
  .t4.t4-trang-tracking-do-luong #goi-dich-vu .t4fx-goi-row
    > .col.t4fx-goi:nth-child(1) .col-inner > .text {
    margin-top: auto !important; margin-bottom: 26.5px !important;
  }
  /* ⛔⛔ ĐÍNH CHÍNH 21/08/2026 — hồ sơ I.6 của trang #7 ĐÃ ĐÓNG, và nó đóng
     được vì lời chẩn đoán cũ SAI HƯỚNG.

     Bản cũ ghi "#7 không áp được, đẩy tiêu đề xuống là vượt 'min-height:
     400px'". Đúng là vượt — nhưng vì cả ba nấc đã thử (mb 33 · 38,5 · 44)
     đều là lề DƯƠNG, mà lề dương thì CỘNG vào chiều cao nội dung. Thẻ 1 của
     #7 có ảnh cao 202,91 nên tổng nội dung đã sát trần 400; thêm bất cứ gì
     cũng phồng.

     Thứ Figma thật sự khai KHÔNG PHẢI một khe dương:

         ảnh 11        y=397  h=202,92  →  đáy 599,92
         lớp tiêu đề   y=588,96                        ⇒ CHỒNG LÊN ẢNH 10,96

     Tiêu đề thẻ 1 NẰM ĐÈ lên ảnh — y hệt điều đã thấy ở khổ điện thoại
     (mục 20.12, chồng 10). Diễn đạt một chỗ chồng bằng lề dương là chuyện
     không thể; phải dùng LỀ ÂM. Và lề âm thì TRỪ vào chiều cao nội dung nên
     'min-height: 400px' không bị đụng tới:

         50 + 202,91 − 10,96 + 56 + 44 + 25 = 366,95  <  400
         phần dư 33,05 vào 'margin-bottom: auto' ⇒ nút vẫn dính đáy ở y=678

     Hai thẻ còn lại KHÔNG đụng tới: chúng đang khớp Figma tuyệt đối (tiêu đề
     601 ↔ 601 và 585 ↔ 585) nhờ đúng luật "căn giữa phần trống còn lại".
     Chỉ thẻ 1 lệch, vì ảnh của nó cao nhất nên phần trống nhỏ hơn cả chữ.

     → BÀI HỌC CHUNG: trước khi nộp hồ sơ I.6, hỏi xem knob đã thử có ĐỦ DẢI
     GIÁ TRỊ chưa. Ba nấc 33 · 38,5 · 44 đều cùng dấu — đó là ba điểm trên
     MỘT NỬA của trục số, không phải một cuộc dò. */
  body.t4-nhom-ggm.t4-trang-google-map-local-seo #goi-dich-vu
    .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .col-inner > .text {
    margin-top: -10.96px !important;
    margin-bottom: auto !important;
  }



}

/* [figma] trang6 · section lydo_mb — 3 lớp rộng 352px: '1113:15536' · '1113:15537' · '1113:15538'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 6 để chọn) */
/* 19.20c Hàng "Lý do" KHỔ ĐIỆN THOẠI — ảnh và lề hàng riêng từng trang
   [figma] lydo_mb 'Frame 162':
       trang   hàng          ảnh              H2 (tuyệt đối)
        #5     y=153 h=507   335×200 @34,153   377      ← site đang khớp
        #6     y=201 h=556   352×249 @25,201   474,29
        #7     y=201 h=542   352×235 @25,201   459,90
   Site dùng chung bộ số của #5 (hàng 157,94 cao 507, ảnh 335×200) nên H2 của
   #6 và #7 nằm cao hơn Figma đúng 92,35 và 78,06 — bằng tổng của lề hàng
   thiếu 43,06 và ảnh thấp 49 / 35. */
@media (max-width: 849px) {
  .t4.t4-trang-tracking-do-luong #ly-do .t4fx-split,
  .t4.t4-trang-google-map-local-seo #ly-do .t4fx-split { margin-top: 80px; }
  /* ⛔ Phải kèm CẢ HAI id ('#content' + '#ly-do'): mục 16 khai
     'body.t4-nhom-ggm #content #ly-do .t4fx-split .img { 335×200 }' = (2,3,1).
     Một id thua im lặng — ảnh vẫn 335×200 dù computed nhìn có vẻ đúng. */
  .t4.t4-trang-tracking-do-luong #content #ly-do .t4fx-split .img,
  .t4.t4-trang-tracking-do-luong #content #ly-do .t4fx-split .img-inner,
  .t4.t4-trang-tracking-do-luong #content #ly-do .t4fx-split img {
    width: 352px; height: 249px; margin: 0;
  }
  .t4.t4-trang-google-map-local-seo #content #ly-do .t4fx-split .img,
  .t4.t4-trang-google-map-local-seo #content #ly-do .t4fx-split .img-inner,
  .t4.t4-trang-google-map-local-seo #content #ly-do .t4fx-split img {
    width: 352px; height: 235px; margin: 0;
  }



}

/* 19.20b Khe hàng ảnh → danh sách Lý do: 64px (chỉ #6 và #7)
   Figma: đáy hàng ảnh (241+358 = 599 ở #6) → 'Frame 187' 664 ⇒ khe 65.
   Mục 20.9 đặt 49,25 — số đo khi hàng còn thừa 32px đệm đáy (19.20). Gỡ đệm
   xong thì khe phải trả lại đúng phần đó. */
@media (min-width: 850px) {
  .t4.t4-trang-tracking-do-luong #ly-do .col.t4fx-lydo-o > .col-inner,
  .t4.t4-trang-google-map-local-seo #ly-do .col.t4fx-lydo-o > .col-inner {
    margin-top: 64px;
  }



}

/* 19.19 KHỐI GIAI ĐOẠN — ba con số cuối, giống nhau ở CẢ BA trang GGM
   [phục vụ] phần tử: Row/Col + Text | khối: '.t4fx-gd-don' trong '.t4fx-qt-duoi'
   [trang] cả ba trang GGM | [figma] quytrinh — lưới 'Frame 1707479573'
   1060×500, thẻ 522×156 bước 172, chữ tiêu đề cách mép thẻ 18
   [lý do vượt panel] khe hàng và căn dọc trong thẻ không có ô trong panel

   Ba lệch đo được (giống hệt nhau ở #5 · #6 · #7, nên sửa ở mức nhóm):

     lề trên lưới      site 43,03  ↔ Figma 39      (band bottom → lưới)
     chiều cao lưới    site 516    ↔ Figma 500     (hàng CUỐI vẫn còn lề 16)
     chữ trong thẻ     site  +2    ↔ Figma +18     (nội dung 118 trong thẻ 156
                                                    ⇒ Figma CĂN GIỮA, site dán mép trên)

   Cộng lại: −4 (lưới lên) + 17 (chữ xuống) = +13 — đúng phần thiếu của mốc
   "đoạn dẫn → Giai đoạn 1" ở cả ba trang. */
body.t4-nhom-ggm #content .t4fx-qt-duoi .t4fx-gd-luoi { margin-top: 39px !important; }
body.t4-nhom-ggm #content .t4fx-gd-don > .col.t4fx-gd-o:last-child { margin-bottom: 0; }
/* ⛔ 'justify-content' KHÔNG có tác dụng trên hộp 'display: block'. '.col' của
   Flatsome là block, nên phải chuyển sang flex cột rồi mới căn giữa được —
   đã đo 'colDisp: block' và thấy nội dung vẫn dán mép trên dù computed
   'justify-content: center'. */
body.t4-nhom-ggm #content .t4fx-gd-don > .col.t4fx-gd-o {
  display: flex; flex-direction: column; justify-content: center;
}
/* ⛔ Và phải gỡ 'flex: 1' của '.col-inner': để nguyên thì nó GIÃN KÍN thẻ, hết
   chỗ trống nên 'justify-content' không có gì để căn — đo được 'innerTop'
   bằng đúng 'colTop' dù computed đã là 'center'. */
body.t4-nhom-ggm #content .t4fx-gd-don > .col.t4fx-gd-o > .col-inner {
  flex: 0 0 auto;
}

/* 19.18 DẢI KEM QUY TRÌNH CỦA #6 VÀ #7 — 80px NỀN TRANG PHÍA TRÊN
   [phục vụ] phần tử: Section + Image | khối: #quy-trinh ('.t4fx-qt-dai')
   [trang] tracking-do-luong · google-map-local-seo | [figma] quytrinh
   [lý do vượt panel] panel Section chỉ có MỘT ô đệm và MỘT ô màu nền; không
   có cách nào khai "nền trang 80px rồi mới tới dải kem"

   Figma dựng node 'quytrinh' gồm BA phần chồng nhau, khác nhau giữa ba trang:

       trang   nền trang trên   dải kem 'Background'   hàng nội dung   ảnh
        #5          0           y=0   h=469            133 h=327      561×327
        #6         80           y=80  h=493            133 h=351      460×351
        #7         80           y=80  h=495            133 h=353      506×353

   Site dựng dải kem ngay từ y=0 ⇒ mốc neo section lệch đúng 80px ở #6 và #7
   (Figma 128 ↔ site 47,94), và 24 đầu dò màu ở 'y=8' báo ΔE 2,34 vì chúng rơi
   vào đúng 80px đó — MỘT nguyên nhân, HAI triệu chứng. Đừng đi sửa mã màu.

   Cách dựng: Flatsome đặt màu nền lên CHÍNH thẻ section, còn '.section-bg' là
   lớp phủ tuyệt đối rỗng. Chuyển màu xuống '.section-bg' rồi đẩy nó xuống
   80px thì phần trên để lộ nền trang — không phải đụng shortcode.

   Cộng lại đúng Figma:  đệm trên 120 (80 nền + 40 đệm dải) + hàng chip 61
   + lề 31,08 + hàng nội dung 351 (#6) / 353 (#7) + đệm dưới 9,92
   = 573 (#6) / 575 (#7) ⇒ dải kem 493 / 495. */
@media (min-width: 850px) {
  .t4.t4-trang-tracking-do-luong #quy-trinh,
  .t4.t4-trang-google-map-local-seo #quy-trinh {
    background-color: transparent !important;
    padding-top: 120px;
    /* ⛔ '!important' BẮT BUỘC: mục 16 khai '.t4 #quy-trinh { padding-bottom:
       0 !important }' — không có '!important' ở đây thì luật này chết im lặng.
       Đã đo bằng cách liệt kê mọi luật khớp phần tử, không phải đoán. */
    padding-bottom: 9.92px !important;
  }
  .t4.t4-trang-tracking-do-luong #quy-trinh > .section-bg,
  .t4.t4-trang-google-map-local-seo #quy-trinh > .section-bg {
    background-color: #F8F5EE; top: 80px;
  }

/* [figma] trang6 · section quytrinh — 3 lớp rộng 460px: '1211:15752' · '1211:15753' · '1211:15754'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 6 để chọn) */
  /* Ảnh dải kem: Figma căn PHẢI theo mép hàng (1016+460 = 970+506 = 1476 =
     420+1056), nên đặt bề rộng thật rồi đẩy sang phải bằng lề tự động —
     đừng trông vào tỉ lệ cột span 5/7 của Flatsome. */
  .t4.t4-trang-tracking-do-luong #quy-trinh .t4fx-split > .col:last-child .img,
  .t4.t4-trang-tracking-do-luong #quy-trinh .t4fx-split > .col:last-child .img-inner {
    width: 460px; height: 351px; margin-left: auto; margin-right: 0;
  }
  .t4.t4-trang-google-map-local-seo #quy-trinh .t4fx-split > .col:last-child .img,
  .t4.t4-trang-google-map-local-seo #quy-trinh .t4fx-split > .col:last-child .img-inner {
    width: 506px; height: 353px; margin-left: auto; margin-right: 0;
  }
  .t4.t4-trang-tracking-do-luong #quy-trinh .t4fx-split > .col:last-child img,
  .t4.t4-trang-google-map-local-seo #quy-trinh .t4fx-split > .col:last-child img {
    width: 100%; height: 100%; object-fit: contain; margin: 0;
  }



}

/* [figma] trang5 · section mota_mb — 3 lớp rộng 292px: '1113:10034' · '1113:10035' · '1113:10036'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 5 để chọn) */
/* 19.15c ẢNH MÔ TẢ MOBILE CỦA TRANG #5 RỘNG 292, KHÔNG PHẢI 270
   [phục vụ] phần tử: Image | khối: ảnh trong hàng '.t4-only-mobile' của
   #mo-ta-dich-vu | [trang] google-merchant-center
   [figma] mota_mb 'Asset 4 4' x=55 y=201 292×200
   [lý do vượt panel] panel Image không có ô đặt cỡ theo breakpoint

   ⛔ Mục 19.11 ghim 270×200 — số của TRANG #4 — và bộ chọn '.t4 #mo-ta-dich-vu
   …' có độ cụ thể cao hơn luật 292px ở mục 16, nên nó thắng ở cả ba trang GGM.
   Hậu quả đo được trên trang #5: khung '.img' đúng 292 nhưng '<img>' bên trong
   chỉ 270 — ảnh hụt 22px và lệch tâm trong chính khung của nó.
   ⚠ Bảng dày KHÔNG bắt được: nó chỉ so lớp CHỮ, còn ảnh thì ghép theo thứ tự
   xuất hiện chứ không so kích thước. Chỉ ảnh nhiệt mới thấy. */
@media (max-width: 849px) {
  .t4.t4-trang-google-merchant-center #mo-ta-dich-vu .t4fx-mota-anh-mb,
  .t4.t4-trang-google-merchant-center #mo-ta-dich-vu .t4fx-mota-anh-mb .img-inner,
  .t4.t4-trang-google-merchant-center #mo-ta-dich-vu .t4fx-mota-anh-mb img {
    width: 292px; height: 200px;
  }



}

/* 19.16 TRANG #7 google-map-local-seo — bộ số riêng sau lượt chuyển T0 -----
   [phục vụ] phần tử: Image + Text | khối: #mo-ta-dich-vu · #goi-dich-vu · #ly-do
   [trang] google-map-local-seo | [figma] mota 715:25790 · mota_mb · goi_mb · lydo_mb
   [lý do vượt panel] cỡ/lề/đệm theo breakpoint của riêng một trang, panel
   Text và panel Image đều không có ô

   Cùng bộ mô-típ với #6 (mục 19.13–19.15) nhưng SỐ khác — vẫn là bài học
   "đọc từng node, đừng suy từ trang bên cạnh":

     ảnh mô tả mobile   #6 352×212,27 (y=153)   #7 352×195,96 (y=201)
     giãn chữ mota_mb   #6 −1,92                #7 −0,96 (giữ mặc định)
     giãn chữ lydo_mb   #6 0                    #7 0
     cỡ H2 goi_mb       #6 40/53                #7 40/53

   Chuỗi mốc khổ điện thoại, cộng lại đúng Figma:
     ảnh 201 …195,96… 396,96 →(24)→ H2 420,96 …129… 549,96 →(24)→ khối chữ
     573,96 …280… 853,96 →(24)→ hàng tích 877,96 (chữ 879,96) …42·42·66… */
@media (max-width: 849px) {
  .t4.t4-trang-google-map-local-seo #mo-ta-dich-vu .t4fx-mota-anh-mb,
  .t4.t4-trang-google-map-local-seo #mo-ta-dich-vu .t4fx-mota-anh-mb .img-inner,
  .t4.t4-trang-google-map-local-seo #mo-ta-dich-vu .t4fx-mota-anh-mb img {
    width: 352px; height: 195.96px;
  }
  /* Đệm dưới 30 trả lại phần khối chữ render hụt so với lớp Figma cao 280
     (đo được 250) — cùng cơ chế và cùng con số với #6. */
  .t4.t4-trang-google-map-local-seo #mo-ta-dich-vu .t4-only-mobile
    .text.t4fx-chu:has(+ .text.t4fx-tich-dau) { margin-top: 24px; padding-bottom: 30px; }
  .t4.t4-trang-google-map-local-seo .section .section-content .text.t4fx-tich-m {
    padding: 2px 0 18px 32px; font-size: 14px; line-height: 22px;
  }
  .t4.t4-trang-google-map-local-seo .text.t4fx-tich-m::before { top: 5px; left: 3px; }
  .t4.t4-trang-google-map-local-seo #mo-ta-dich-vu
    .text.t4fx-tich-m + .text.t4fx-tich-m { margin-top: 0; }
  .t4.t4-trang-google-map-local-seo #mo-ta-dich-vu
    .t4-only-mobile .text.t4fx-tich-dau { margin-top: 24px; }
  .t4.t4-trang-google-map-local-seo #goi-dich-vu h2 { font-size: 40px; line-height: 53px; }
  .t4.t4-trang-google-map-local-seo #ly-do .t4fx-h2-moss { letter-spacing: 0; }
  .t4.t4-trang-google-map-local-seo #ly-do .t4fx-h2-moss br { display: none; }



}

/* 19.16b Hàng tích KHỔ DESKTOP của #7 — đệm 2/18 chứ không 10/10.
   Figma đặt chữ cách mép trên hàng đúng 2px (hàng y=781, chữ y=783); #5 và #6
   dùng 10/10 rồi bù lại ở lề mục đầu, nhưng ở #7 cách đó KHÔNG dùng được:
   khối chữ đứng trên render 300 trong khi Figma khai 280, nên lề mục đầu sẽ
   phải ÂM 4px. Đặt đệm đúng như Figma thì lề còn +4px — cùng kết quả, mà đọc
   ra là hiểu ngay vì sao.
   ⚠ 4px này CHỨA sẵn 20px chênh lệch của khối chữ; sửa được khối chữ về 280
   thì phải trả lề này về 24. */
.t4.t4-trang-google-map-local-seo .section .section-content .text.t4fx-tich-m {
  padding: 2px 0 18px 32px;
}
.t4.t4-trang-google-map-local-seo .text.t4fx-tich-m::before { top: 5px; left: 3px; }
.t4.t4-trang-google-map-local-seo #mo-ta-dich-vu
  .t4fx-split .text.t4fx-tich-dau { margin-top: 4px; }

/* [figma] trang4 · section mota_mb — 5 lớp rộng 270px: '1113:8787' · '1113:8788' · '1113:8789' … còn 2
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 4 để chọn) */
/* 19.11 ẢNH MÔ TẢ MOBILE lệch 0,8px — và 0,8px đó đắt hơn vẻ ngoài của nó
   Figma 'Asset 3 4': x=66 · y=201 · 270×200. Site: 271×200,8.
   Chỉ dôi 0,8px chiều cao, nhưng nó đẩy TOÀN BỘ phần dưới xuống 0,8px: tiêu
   đề 425,8 (Figma 425), đoạn đầu 578,8 (578), section 1078,8 (1078).
   Với section dày chữ thì một dịch chuyển dưới 1px cũng nhân đôi viền răng
   cưa của MỌI chữ — đó là chênh lệch thật giữa 4,03% và 1,57% khi đo.
   ⇒ Ghim thẳng 270×200. */
@media (max-width: 849px) {
  .t4 #mo-ta-dich-vu .t4fx-mota-anh-mb,
  .t4 #mo-ta-dich-vu .t4fx-mota-anh-mb .img-inner,
  .t4 #mo-ta-dich-vu .t4fx-mota-anh-mb img { width: 270px; height: 200px; }



}

/* [figma] '1211:11702' — Container · 561×327 · trang5·quytrinh
   (lớp DUY NHẤT rộng 561px trong figma-spec/trang5.json) */
/* 19.12 ẢNH QUY TRÌNH DESKTOP sai cả cỡ lẫn chỗ ----------------------------
   Figma: x=980 · y=133 · 496×355.  Site: x=972 · y=129 · 506×362,2.
   To hơn 10×7 và lệch lên-trái 8×4. Cùng loại lỗi với 19.11, và cùng lý do
   nó không hiện trong bảng số: bảng chỉ so mốc CHỮ, ảnh thì chỉ ghép theo
   thứ tự xuất hiện chứ không so toạ độ tuyệt đối. */
/* ⛔ ĐÍNH CHÍNH 19/08/2026 — số cũ (496×355) đọc nhầm lớp. Soi lại spec:
     Container  x=915,0 y=133 561×327   ← ô chứa ảnh
     Asset 16 1 x=948,7 y=134 497,6×297 ← ẢNH thật (vector nhóm)
   Ảnh cao 355 làm hàng phồng 355,9 thay vì 327, và cả dải kem thừa 19px —
   chính là phần lớn của +39px mà phép đo chiều cao section vẫn báo. */
/* ⛔ HÀNG RÀO KHỔ MÀN (III.14.2-7 · III.19) — thêm 24/08/2026.
   Ba luật dưới đây trước đó để TRẦN nên ăn luôn ở khổ 402: '.img' giữ
   'width: 561px' trong hàng 352 ⇒ cột phồng 561, ảnh 497,6×297 nằm ở x=58,7
   và mép phải **556,3**, tức **154px tranh bị khung nhìn 402 cắt mất**.
   Đo được trên CẢ BA trang nhóm GGM (#5 · #6 · #7) ngày 24/08/2026.
   Khổ 402 có hình học RIÊNG, khai ở mục 20.9 bên dưới. */
@media (min-width: 850px) {
  body.t4-nhom-ggm #quy-trinh .t4fx-split > .col:last-child .img,
  body.t4-nhom-ggm #quy-trinh .t4fx-split > .col:last-child .img-inner {
    width: 561px; height: 327px;
  }
  body.t4-nhom-ggm #quy-trinh .t4fx-split > .col:last-child img {
    width: 497.6px; height: 297px; object-fit: contain;
    margin-left: 33.7px; margin-top: 1px;   /* Asset lệch trong Container */
  }
  body.t4-nhom-ggm #quy-trinh .t4fx-split > .col:last-child .img { margin: 0; }
}

/* 19.13 KHỐI GIAI ĐOẠN + LƯU Ý — khe đoạn văn và lề đường kẻ ---------------
   🔑 'paragraphSpacing' CÓ SẴN trong 'figma-cache/file.json' ('style.
   paragraphSpacing') — đừng suy nó ra từ độ lệch như tôi đã làm ở 19.9.
   Quét cả trang #4: đúng 5 lớp chữ có khe đoạn — 'mota' và 'mota_mb' là 5px,
   ba lớp của 'quytrinh' là **8px**.

   Ba nhóm lệch đo được, đều cộng dồn xuống dưới:
   (a) cả khối Giai đoạn cao hơn Figma 3,5px      → lưới +3,5
   (b) đoạn đầu thẻ Giai đoạn 1 thiếu khe 8px ở chỗ xuống dòng
       ⇒ tách thành <p> riêng (sửa nội dung); <br> không nhận được lề
   (c) đường kẻ ngăn: Figma lề 8 trên / 8 dưới trong thẻ Giai đoạn, và
       16 trên / 8 dưới ở khối Lưu ý. Site đang 9/9 cho cả hai. */
.t4 .t4fx-qt-duoi .t4fx-gd-luoi { margin-top: 48px; }
.t4 .t4fx-gd .t4fx-gd-tiep { margin-top: 8px; }
.t4 .t4fx-gd .t4fx-sep { margin-top: 8px; margin-bottom: 8px; }
.t4 .t4fx-luu-y .t4fx-sep { margin-top: 16px; margin-bottom: 8px; }

/* 19.13b Hai pixel cuối của thẻ Giai đoạn.
   Sau 19.13, mọi mốc trong hai thẻ lệch ĐỀU −2px kể từ dưới tiêu đề (khối
   Lưu ý thì đã khớp 0,0). Khe tiêu đề → đoạn đầu: Figma 76, site 74.
   ⚠ Cộng 2px vào lề đường kẻ là SAI: mỗi thẻ có HAI đường kẻ nên phần dưới
   sẽ nhận +4. Cộng vào đệm dưới của chính <h3> thì chỉ cộng một lần.
   (5px của mục 18.6 → 7px.) */
/* ⤴ DỜI sang cuối 30-components.css (III.4.0 đợt C) — luật này khai trùng
   selector với mô-đun đó, mục (4) linter. */

/* 19.14 CAO DÒNG SỐ LẺ — làm tròn hết, đây là lỗi có từ trước ---------------
   Bài học 19.10 áp cho CẢ STYLESHEET, không riêng H2 của Mô tả/Lý do:
   'line-height' mà Figma khai là 53,32 / 42,656 / 21,856… nhưng HỘP nó dựng
   ra dùng số ĐÃ LÀM TRÒN. Kiểm chứng trên ba hộp nhiều dòng khác nhau:
     mota/lydo H2 desktop  h=106 = 2×53      (không phải 2×53,32 = 106,64)
     mota/lydo H2 mobile   h=129 = 3×43      (không phải 3×42,656 = 127,97)
     goi_mb    H2          h=106 = 2×53
   Sai 0,32px mỗi dòng nghe như không đáng kể, nhưng nó đẩy CẢ KHỐI bên dưới:
   H2 hai dòng của khối Gói dịch vụ mobile cao 106,63 thay vì 106 ⇒ bốn thẻ
   tụt 0,63px ⇒ goi_mb 0,75% → 2,06%.
   Đã đổi 53,32 → 53 (6 chỗ) và 42,656 → 43 (1 chỗ). Bốn trong sáu chỗ 53,32
   thuộc trang #23/#24/#25 — nhớ đo lại ba trang đó khi làm tới.
   ⚠ Còn 19,124 · 21,856 · 16,392 · 34,15 · 32,784 · 30,052 · 26,66 · 10,928
   chưa đụng: đều là hộp MỘT dòng nên sai số 0,1–0,3px không cộng dồn. Gặp
   hộp nhiều dòng dùng các số đó thì làm tròn nốt. */

/* 19.15 Đệm đáy thẻ Gói ở mobile: Figma 16, site 15 — nút vì thế thấp 1px. */
@media (max-width: 849px) {
  .t4 #goi-dich-vu .t4fx-goi .col-inner { padding-bottom: 16px; }



}

/* 19.16 SOI TOẠ ĐỘ TUYỆT ĐỐI — hai khối lệch đều mà bảng dày không thấy
   'scripts/soi-toa-do.js' so toạ độ TUYỆT ĐỐI của từng lớp chữ với số Figma,
   lấy gốc là chính section. Bảng dày cố ý bỏ phép so này ('bo_toa_do: true')
   nên khối nào dịch ĐỀU cả cụm thì nó im lặng — đúng hai ca dưới đây.

   (a) Cột chữ của Quy trình: site x=422 · y sớm ~2px. Figma đặt khối nội dung
       ở 420..1476, tức KHÔNG căn giữa khung 1900 (lề trái 420, lề phải 424);
       site căn giữa nên ra 422. Đệm phải 4px ở section-content đẩy phép căn
       giữa lệch đúng 2px về trái.
       ⚠ Ảnh ở cột phải nằm trong CÙNG hàng nên cũng dịch theo — bù lại ở lề
       của chính ảnh (8→10 ngang, 4→2 dọc), nếu không nó rời khỏi mốc đã khớp.
   (b) Danh sách 11 gạch đầu dòng của Lý do: thấp đều 1,5px. */
/* ⛔ PHẢI KHOANH THEO KHỔ. Bản đầu viết không có @media và LÀM HỎNG MOBILE:
   khối Quy trình mobile vốn đã đúng x=25 bị đẩy về 23, và danh sách Lý do
   mobile vốn đúng y=775,2 bị kéo lên 741,5 (lệch 32,7px). Cả hai chỉ lộ ra ở
   lượt soi toạ độ tuyệt đối của khổ mobile — bảng số và ảnh nhiệt đều không
   kêu. Sửa cho một khổ thì luôn hỏi: khổ kia có đang đúng sẵn không? */
@media (min-width: 850px) {
  .t4:where(.t4-nhom-ggm, .t4-trang-xu-ly-loi-sai-google-ads) #quy-trinh .section-content { padding-right: 4px; }



}
/* ⚠ Lề này có luật khác đè: đặt 41px làm khối nhảy 12px chứ không phải 2px
   như tính từ số cũ (39px). Trị số đúng phải tính NGƯỢC từ phép đo:
   với 41px thì kicker ra 169,42, cần 159,5 ⇒ 41 − 9,92 = 31,08. */
@media (min-width: 850px) {
  .t4 .t4fx-qt-dai .t4fx-split { margin-top: 31.08px; }



}
@media (min-width: 850px) {
  .t4 #quy-trinh .t4fx-split > .col:last-child .img {
    margin-left: 10px; margin-top: 0.9px;   /* đo lại sau khi dời khối: 134,1 → 133 */
  }



}
@media (min-width: 850px) {
  .t4 #ly-do .t4fx-ly-do { margin-top: 31.5px; }



}

/* 19.17 CHỮ NÚT CTA GÃY HAI DÒNG — chỉ lộ ra khi đếm hộp dòng
   'range.getClientRects().length' = 2 trong khi Figma là một dòng. Nó KHÔNG
   tràn nút (2×19,124 = 38,25 < 43) nên nút vẫn đúng cỡ, ảnh nhiệt không kêu,
   và mắt nhìn qua cũng khó thấy. Lòng nút đúng bằng 160px — cùng bề rộng chữ
   Figma — nên chỉ cần sai số dưới 1px là trình duyệt ngắt dòng.
   Ghim 'nowrap' thay vì nới đệm cho vừa: đệm nới bao nhiêu cũng vẫn là cuộc
   đua với sai số làm tròn. Chữ căn giữa nên bớt đệm không làm chữ xê dịch.
   ⚠ Đệm chỉ được bớt ở MOBILE. Nút desktop CO THEO NỘI DUNG ('float: right'),
   nên bớt đệm là nó tụt từ 263 xuống 233 — hỏng đúng cái mốc đang khớp. */
.t4 .t4fx-cta-the .button.t4fx-nut-xanh span { white-space: nowrap; }
@media (max-width: 849px) {
  .t4 .t4fx-cta-the .button.t4fx-nut-xanh { padding-left: 24px; padding-right: 24px; }



}


/* ── §20 vòng đo v3 (dòng 3677–3864 của style.css cũ) ──────────────────── */

/* ==========================================================================
   20. VÒNG ĐO v3 — BA TRANG GG MARKETING CON (#5 #6 #7), 17/08/2026
   Mọi con số dưới đây lấy TRỰC TIẾP từ lớp Figma qua bảng ánh xạ dày, không
   ước lượng. Khoá vào '.t4-nhom-ggm' vì ba trang này dùng CHUNG id section
   với trang #4 — viết trần là đè lẫn nhau (đã trả giá hai lần).
   ========================================================================== */

/* 20.1 DANH SÁCH DẤU TÍCH — MÀU #666666, KHÔNG PHẢI MÀU CHỮ HỆ THỐNG.
   Mục 16.1 đặt 'var(--t4-text)' (#1f1f1f) dựa trên bảng ánh xạ cũ chỉ phủ
   23% lớp chữ. Bảng dày đọc thẳng từng lớp: cả ba trang, cả hai khổ đều khai
   '#666666', đậm 700, 14/22. Đậm thì mục 16.1 đã đúng — chỉ màu là sai.
   Sai ở 15 mốc (4+4 của #5, 3+3 của #6, 3 của #7). */
body.t4-nhom-ggm #content .t4fx-tich li { color: #666; }

/* 20.2 THẺ GIAI ĐOẠN CÓ ĐỆM NGANG 20px.
   Figma: thẻ rộng 522, lớp chữ bên trong rộng 482 và bắt đầu lệch 20px so
   với mép thẻ. Mục 16.2(b) dựng thẻ 522 nhưng để 'padding: 0', nên chữ tràn
   sát mép — một sửa này gỡ ba nhóm mốc cùng lúc: 'w' của năm tiêu đề giai
   đoạn (482 ↔ 522), 'chu_w' của năm đoạn thân, và khoảng 'dx' 20px giữa
   đoạn dẫn và tiêu đề giai đoạn đầu. */
body.t4-nhom-ggm #content .t4fx-gd-don .t4fx-gd { padding: 0 20px; }

/* 20.3 ĐOẠN DẪN KHỐI QUY TRÌNH: 14/22, KHÔNG PHẢI 16/26.
   '.t4fx-chu' mặc định là 16/26 (thân bài chung). Figma của cả ba trang cho
   riêng đoạn này 14/22 — nó là đoạn dẫn, không phải thân bài. */
body.t4-nhom-ggm #content .t4fx-qt-dai .t4fx-chu p { font-size: 14px; line-height: 22px; }

@media (max-width: 849px) {
  /* 20.4 Mục dấu tích mobile: #5 và #7 dùng 12px (mục 16.1 đã đặt), riêng
     #6 khai 14px. Đúng là Figma khác nhau giữa ba trang chứ không phải đọc
     nhầm — đã soi lại từng lớp một. */
  body.t4-trang-tracking-do-luong #content .t4fx-tich li { font-size: 14px; }

  /* 20.5 Tiêu đề thẻ Gói mobile cao dòng 28, không phải 24. */
  body.t4-nhom-ggm #content .t4fx-goi-ten { line-height: 28px; }



}

/* --- 20.6 VÒNG ĐO v3 — ĐỢT HAI (trang #5 dẫn đường, #6 #7 dùng chung) -----
   Số lấy thẳng từ node Figma của trang #5: goi_mb 1113:10417… · cta_mb ·
   crumb_mb. Ba trang cùng component nên đặt ở mức '.t4-nhom-ggm'.
   -------------------------------------------------------------------------- */

/* (a) TIÊU ĐỀ "Các gói dịch vụ dành cho bạn" RỘNG 378, KHÔNG PHẢI CẢ CỘT.
   Figma khai hộp chữ 378px ở CẢ HAI khổ và ngắt thành hai dòng ngay tại đó.
   Site để nó chiếm trọn cột (397 desktop · 352 mobile) nên điểm ngắt dòng do
   bề rộng cột quyết định — trùng khớp ở desktop chỉ là may. */
body.t4-nhom-ggm #goi-dich-vu .t4fx-h2-moss,
body.t4-nhom-ggm #goi-dich-vu h2 { max-width: 378px; }

/* (b) THẺ GIAI ĐOẠN: đoạn thân cách đỉnh tiêu đề 76px.
   Mục 18.6 đặt 'padding-bottom: 5px' cho <h3> theo số của trang #4. Nhóm này
   Figma cho 76px (site đang 67) — thêm 9px nữa. Cùng một sửa kéo luôn cặp
   "đoạn → tiêu đề giai đoạn sau" từ 105 về 96, vì chiều cao thẻ không đổi. */
body.t4-nhom-ggm #content .t4fx-gd h3 { padding-bottom: 14px; }

@media (max-width: 849px) {
  /* (c) BA THẺ GÓI: bước 274 = thẻ 258 + KHE 16.
     Mục 16.2 mobile đặt 'gap: 0', nên ba thẻ dính nhau và mọi mốc ngang lệch
     đúng 16px. Figma: tâm thẻ cách nhau 274 (x = 5234 · 5508 · 5782). */
  body.t4-nhom-ggm #content .t4fx-goi-row:has(> .col.t4fx-goi:nth-child(3):last-child),
  body.t4-nhom-ggm #content .t4fx-goi-row:has(> .col.t4fx-goi:nth-child(4):last-child) {
    gap: 16px;
  }

  /* (d) NÚT "Nhận tư vấn" TRONG THẺ GÓI: 226×44, chữ 16/24.
     Figma node "Buttton" 226×44, lớp chữ 16/24. Site đang 210×36 chữ 14 —
     kế thừa mục 2158 ('min-height: 36px') và 1797 ('font-size: 14px') vốn là
     số của trang #4. Đặt bề rộng THẲNG chứ không trông vào đệm của cột: cột
     Flatsome có đệm riêng, cộng dồn ra 210 chứ không ra 226. */
  /* Thẻ rộng 258 nhưng lòng thẻ chỉ 210: cột Flatsome tự có đệm 8px mỗi bên
     (258 → col-inner 242) rồi col-inner đệm tiếp 16 (→ 210). Figma cho lòng
     thẻ 226 = 258 − 16×2. Gỡ đệm của CỘT là mọi thứ bên trong về đúng bề
     rộng, kể cả nút — chỉnh riêng bề rộng nút thì không ăn, vì Flatsome đặt
     'max-width: 100%' và nút bị kẹp lại đúng 210. */
  body.t4-nhom-ggm #goi-dich-vu .col.t4fx-goi { padding-left: 0; padding-right: 0; }
  body.t4-nhom-ggm #goi-dich-vu .t4fx-goi .button.t4fx-nut-xanh {
    min-height: 44px; font-size: 16px;
  }

  /* Khe ảnh → tiêu đề của TỪNG thẻ: Figma 27 · 32,5 · 33,5 (đo từ đáy ảnh
     tới đỉnh lớp chữ). Ba ảnh cao khác nhau (120 · 109 · 107) nên một khe
     dùng chung không thể ra cả ba. Khác desktop ở chỗ ba số này gần nhau,
     dựng lại được; desktop thì Figma đặt tay tới mức ảnh chồng lên chữ, đã
     ghi miễn trừ.
     ⚠ Phải đặt trên THẺ BỌC '.text' kèm '!important', không đặt trên chính
     <h3>: mục 1739 khai 'margin: auto 0 !important' cho thẻ bọc, và lề auto
     đó nuốt toàn bộ khoảng trống thừa của thẻ. Đặt margin-top lên <h3> thì
     computed vẫn ra 0 — đã thử, không ăn. Giữ 'margin-bottom: auto' để nút
     vẫn dính đáy thẻ.
     ⚠⚠ Và phải viết ĐÚNG DẠNG BỘ CHỌN dài như mục 1754, vì mục đó đã khai
     riêng cho thẻ 1 của trang #4:
         .t4 #goi-dich-vu .t4fx-goi-row > .col.t4fx-goi:nth-child(1) …
     tức (1 id · 7 lớp · 0 thẻ), CŨNG có !important. Bản viết gọn
     'body.t4-nhom-ggm #goi-dich-vu .t4fx-goi:nth-child(1) …' chỉ được
     (1 id · 5 lớp · 1 thẻ) nên THUA — và thua ĐÚNG MỘT THẺ: thẻ 2 và 3 ăn
     quy tắc mới, thẻ 1 giữ nguyên số cũ. Nhìn bảng đo thì thấy hai mốc lệch
     chứ không thấy nguyên nhân; phải soi computed style của cả ba thẻ mới ra. */
  body.t4-nhom-ggm #goi-dich-vu .t4fx-goi-row > .col.t4fx-goi .col-inner > .text {
    margin-bottom: auto !important;
  }
  body.t4-nhom-ggm #goi-dich-vu .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .col-inner > .text { margin-top: 27px !important; }
  body.t4-nhom-ggm #goi-dich-vu .t4fx-goi-row > .col.t4fx-goi:nth-child(2) .col-inner > .text { margin-top: 32.5px !important; }
  body.t4-nhom-ggm #goi-dich-vu .t4fx-goi-row > .col.t4fx-goi:nth-child(3) .col-inner > .text { margin-top: 33.5px !important; }
  body.t4-nhom-ggm #goi-dich-vu .t4fx-goi .button.t4fx-nut-xanh span {
    font-size: 16px; line-height: 24px;
  }

  /* (e) NÚT CTA CUỐI TRANG: 263×46, chữ 16/21,856.
     Mục 19.5 và 2003 đặt 224×43 chữ 14/19,124 — số của trang #4. Nhóm này
     Figma cho nút to hơn (node "Link" 263×46). */
  body.t4-nhom-ggm .t4fx-cta-the .button.t4fx-nut-xanh {
    width: 263px; max-width: 263px; min-height: 46px;
  }
  body.t4-nhom-ggm .t4fx-cta-the .button.t4fx-nut-xanh span {
    font-size: 16px; line-height: 21.856px;
  }

  /* (f) ĐOẠN DẪN KHỐI MÔ TẢ Ở MOBILE: 14/30, không phải 16/26. */
  body.t4-nhom-ggm #mo-ta-dich-vu .t4-only-mobile .t4fx-chu p {
    font-size: 14px; line-height: 30px;
  }

  /* (g) BREADCRUMB: khe giữa hai mục là 32px, không phải 20.
     Figma: "Home" x=5218 w=28 → mục kế x=5278, tức 32px trống ở giữa. Site
     để 20 nên mọi mốc ngang của breadcrumb hụt đúng 12px.
     ⚠ Mục cuối KHÔNG cao dòng 13px — đó là số riêng của trang #4 (mục 18.2),
     nhóm này khai 22px như hai mục đầu. */
  body.t4-nhom-ggm .t4fx-crumb li + li::before { width: 32px; }
  body.t4-nhom-ggm nav.t4fx-crumb ol li:last-child,
  body.t4-nhom-ggm nav.t4fx-crumb ol li:last-child * { line-height: 22px; }



}

/* --- 20.7 VÒNG ĐO v3 — ĐỢT BA: khoảng cách dọc còn lại của lô GGM ---------
   Mỗi số dưới đây là ĐỘ LỆCH ĐO ĐƯỢC cộng vào giá trị đang có, không phải
   ước lượng. Bảng đo trước khi sửa:
     mota      h2 → mục tích đầu       411 ↔ 375     thiếu 36
     mota_mb   h2 → đoạn dẫn           145 ↔ 153     thừa   8
     mota_mb   đoạn dẫn → mục tích     138 ↔ 143     thừa   5
     quytrinh  nhãn → h2                92 ↔  99,5   thừa   7,5
     quytrinh  đoạn dẫn → Giai đoạn 1  161 ↔ 158,38  thiếu  2,62
     ly-do     nhãn → h2              192,5 ↔ 176,81 thiếu 15,69
     ly-do mb  nhãn → h2              309 ↔ 301,06   thiếu  7,94
     casestudy nhãn → "Xem tất cả"      5 ↔   0      thiếu  5
   -------------------------------------------------------------------------- */
body.t4-nhom-ggm #mo-ta-dich-vu .t4fx-tich { margin-top: 60px; }
/* ⚠ Phải kéo bằng lề của THẺ BỌC '.text', không phải lề của <h2> bên trong
   cũng không phải lề dưới của nhãn phía trên:
     · lề dưới của nhãn TRIỆT TIÊU LỀ với lề trên khối kế → đặt -7,5 ở đó lại
       làm khe RỘNG THÊM 3,75px, ngược hướng mong đợi;
     · lề trên của <h2> triệt tiêu với lề 16px của thẻ bọc → computed hiện
       đúng -7,5px mà hộp KHÔNG NHÚC NHÍCH.
   Đã đo cả ba cách; chỉ thẻ bọc ăn. */
/* Đo trên bảng thật, mốc tính từ mép trên section (Figma ↔ site):
     chip "Quy trình thực hiện của 4T"    48    ↔  47,9   ✓
     "Quy trình thực hiện của chúng tôi" 140    ↔ 157,2   thừa 17,2
     "Xây dựng nền tảng dữ liệu…"        190    ↔ 199,8   thừa  9,8
   Nên kéo dòng nhãn lên 17,2 rồi nhả lại 7,4 trước <h2> — hai số khác nhau,
   không phải một khoảng dịch chung.
   ⚠ Đặt trên THẺ BỌC '.text', không đặt trên <h2>: lề của <h2> triệt tiêu
   với lề thẻ bọc, computed hiện đúng số mà hộp không nhúc nhích. */
/* ⛔ ĐÃ BỎ 19/08/2026 — số -17,2 nay SAI, và sai vì một thay đổi ở chỗ khác.
   Hàng này là 'v_align="middle"': cột được CĂN GIỮA THEO CHIỀU DỌC trong hàng,
   nên vị trí dòng nhãn = (chiều cao hàng − chiều cao cột) / 2. Lề âm đặt lên
   con đầu tiên vừa kéo cột lên vừa LÀM CỘT NGẮN ĐI, nên phép căn giữa tự đẩy
   lại — hiệu ứng thật không bao giờ bằng con số viết ra.
   Con số 157,2 dùng để suy ra -17,2 đo khi ảnh dải kem còn cao 355,9; phiên
   18/08 sửa ảnh về đúng 327 (mục 19.12) làm hàng thấp đi 28,9 và số này hết
   hiệu lực. Bỏ hẳn thì cột tự về 139,0 — Figma khai 140.
   → Bài học: mọi con số bù trong một hàng CĂN GIỮA đều phụ thuộc chiều cao
   của CẢ HAI cột; sửa ảnh ở cột kia là phải đo lại cột này.
body.t4-nhom-ggm #quy-trinh .t4fx-qt-kicker { margin-top: -17.2px; } */
/* Sau khi dòng nhãn về đúng chỗ, khe nhãn → <h2> KHÔNG cần nới thêm: số
   -7,43 đo trước đó là đo khi dòng nhãn còn nằm sai 17,2px. Giữ 16px gốc. */
/* ⚠ KHÔNG khoá vào '#quy-trinh': lưới Giai đoạn nằm ở một [section] RIÊNG
   không có neo id, nên bộ chọn có '#quy-trinh' không trúng gì và lề vẫn là
   48px của mục 16. Đây cũng chính là lý do mốc neo phải khai tay (NEO_SECTION
   trong sinh-map-day.py).
   ⚠ Và phải kèm '#content': mục 16 khai '#content .t4fx-gd-don' (1 id) nên
   bản không có id THUA, dù có thêm 'body.t4-nhom-ggm'. */
body.t4-nhom-ggm #content .t4fx-gd-don { margin-top: 43.03px; }
body.t4-nhom-ggm #ly-do .t4fx-split { margin-top: 95.69px; }
body.t4-nhom-ggm #ly-do .t4fx-ly-do { margin-top: 49.25px; }

/* Nút "Xem tất cả" thấp hơn mép trên khối nhãn 5px. Mục 2369 đã đặt số này
   cho trang #4 nhưng khoá vào bố cục riêng của nó; ở nhóm này chưa có. */
body.t4-nhom-ggm #casestudy .t4fx-nhan-hang .t4fx-xem-tat-ca { margin-top: 5px; }
/* "Các dự án nổi bật" nằm ở hàng riêng TRÊN thanh tab ('.t4fx-head-2col'),
   không nằm trong tấm bảng — chỉnh lề của '.t4fx-tabs' không đụng tới nó. */
body.t4-nhom-ggm #casestudy .t4fx-head-2col { margin-top: 29px; }

@media (max-width: 849px) {
  body.t4-nhom-ggm #mo-ta-dich-vu .t4-only-mobile .t4fx-chu { margin-top: 14px; }
  body.t4-nhom-ggm #mo-ta-dich-vu .t4fx-tich { margin-top: 19px; }
  /* Mobile giữ 65px của mục 1911 — quy tắc desktop 49,25 ở trên không được
     tràn xuống, nếu không khối danh sách tụt 15,75px. */
  body.t4-nhom-ggm #ly-do .t4fx-ly-do { margin-top: 65px; }
  body.t4-nhom-ggm #ly-do .t4fx-split { margin-top: 36.94px; }



}


/* ── §20b bám khung mobile (dòng 3865–4079 của style.css cũ) ──────────────────── */

/* ==========================================================================
   20. BÁM KHUNG MOBILE CỦA FIGMA (4T yêu cầu 17/08/2026: giống 100%, kể cả
   những chỗ khung mobile mâu thuẫn với khung desktop).
   ⚠ Ghi để người sau khỏi tưởng là lỗi: từ đây trở đi bản mobile CỐ Ý khác
   bản desktop ở NỘI DUNG, vì chính Figma khai khác. Xem qa/danh-sach-danh-doi.md.
   ========================================================================== */

/* 20.1 HERO MOBILE — dùng thẳng ảnh Figma xuất ra làm nền -------------------
   Đã chứng minh ở vòng trước: KHÔNG phép cắt nào của ảnh gốc dựng lại được
   khung mobile (dò 750 tổ hợp phóng/dời, tổ hợp khớp nhất vẫn sai số 2.714,
   trong khi phép cắt 'cover' căn giữa khớp bản desktop với sai số 3).
   Nên thay vì đoán phép cắt, lấy luôn ảnh Figma đã dựng: xuất node 1113:8639
   ở 2× (804×1300) — ảnh này ĐÃ có sẵn lớp phủ đen 25% nướng vào, nên phải
   TẮT lớp phủ của site ở khổ mobile, không thì tối gấp đôi.
   ⛔ PHẢI KHOÁ THEO TRANG. Bản đầu viết '.t4 #hero …' và RÒ SANG TRANG KHÁC:
   mọi trang đều đặt '_id="hero"', nên trang chủ vừa dựng xong đã hiện ảnh nền
   của trang #4 (lá cây đọng nước) thay vì ảnh rừng của nó — hero_mb trang chủ
   đo ra 60,28 %. Dùng lớp thân trang như mục 11.14 đã làm cho #goi-dich-vu. */
@media (max-width: 849px) {
  body.t4-trang-xu-ly-loi-sai-google-ads #hero .section-bg img.bg { display: none; }
  body.t4-trang-xu-ly-loi-sai-google-ads #hero .section-bg-overlay {
    background-color: transparent !important;
  }
  body.t4-trang-xu-ly-loi-sai-google-ads #hero .section-bg {
    background: url(https://demo1.tiepthitute.com/wp-content/uploads/2026/08/xu-ly-loi-sai-google-ads-hero-mobile.jpg)
                center / cover no-repeat;
  }



}

/* 20.2 NHÃN HAI NÚT HERO khác nhau giữa hai khung Figma ---------------------
   desktop 'Liên hệ ngay' · 'Xem thông tin dịch vụ'
   mobile  'Tư vấn Google Ads tăng trưởng' · 'Tham khảo hệ sinh thái dịch vụ'
   Giữ cả hai trong mã, bật theo khổ — người dùng chỉ thấy một nhãn, nhưng
   trình đọc màn hình cũng vậy vì nhãn kia bị 'display: none'. */
/* ⚠ KHÔNG khoá trong phạm vi .t4fx-nut. Đã khoá và trả giá ngay: H2 của
   Casestudy cũng dùng cặp lớp này, nên bản desktop hiện thừa dòng "mà 4T làm
   việc" và 'case' bật từ 0,43 % lên 4,67 %. Cặp lớp này là công cụ CHUNG cho
   mọi chỗ hai khung Figma khai chữ khác nhau. */
.t4 .t4-chu-mb { display: none; }
@media (max-width: 849px) {
  .t4 .t4-chu-dt { display: none; }
  .t4 .t4-chu-mb { display: inline; }



}

/* 20.3 RUỘT BẢNG CASESTUDY — dựng theo đúng khung Figma mở sẵn ------------
   Figma chỉ vẽ MỘT panel: tab thứ ba "Truyền thông Marketing tổng thể".
   Ba tab kia không có thiết kế nên giữ nguyên chữ giữ chỗ.
   Toạ độ Figma (gốc = section): Frame129 x=443,01 y=446 1013,98×330 —
   ảnh 503×330, cột chữ x=986,01 rộng 470,98; Adam Jones y=661, chức y=691,
   link y=717; hàng số Frame132 y=791 cao 83, ô 1 x=509,96 w=416,34, ô 2
   x=1075,3 w=314,73.
   ⚠ Panel của Flatsome đã thụt sẵn 33px nên bên trong nó Frame129 ở offset 0. */
.t4fx-cs-tren { display: flex; gap: 40px; align-items: flex-start; }
/* ⤴ DỜI sang cuối 30-components.css (III.4.0 đợt C) — luật này khai trùng
   selector với mô-đun đó, mục (4) linter. */
.t4fx-cs-loi { width: 471px; }
.t4 .t4fx-cs-trich {
  font-family: var(--t4-font-body); font-weight: 400; font-size: 16px;
  line-height: 26px; color: #1f1f1f; margin: 0;
}
.t4 .t4fx-cs-ten {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 16px;
  line-height: 30px; color: #1f1f1f; margin: 28px 0 0;
}
.t4 .t4fx-cs-chuc {
  font-family: var(--t4-font-body); font-weight: 400; font-size: 16px;
  line-height: 26px; color: #1f1f1f; margin: 0;
}
.t4 .t4fx-cs-xem {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 16px;
  line-height: 30px; margin: 0;
}
/* 'display: block' — hộp của <a> INLINE chỉ cao bằng khung chữ chứ không
   bằng hộp dòng, nên mọi khoảng cách đo từ nó lệch ~4px. */
.t4 .t4fx-cs-xem a { color: #1f1f1f; display: block; }
.t4fx-cs-so { display: flex; justify-content: center; gap: 149px; margin-top: 15px; }
.t4fx-cs-o1 { width: 416.34px; }
.t4fx-cs-o2 { width: 314.73px; }
.t4 .t4fx-cs-lon {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 40px;
  line-height: 55px; color: #1f1f1f; text-align: center; margin: 0;
}
.t4 .t4fx-cs-mo {
  font-family: var(--t4-font-body); font-weight: 400; font-size: 16px;
  line-height: 26px; color: #1f1f1f; text-align: center; margin: 0;
}

/* 20.3b Hộp trích dẫn: Figma khai 470,98×187 nhưng chữ chỉ chiếm 130 (5 dòng)
   — 'tu_co_gian: NONE' + 'can_doc: CENTER', tức hộp CỐ ĐỊNH và chữ nằm giữa.
   Đã soi ảnh Figma xuất ra để chắc: đúng 5 dòng, y hệt site. Vậy chỗ lệch
   56px không phải do ngắt dòng mà do thiếu phần đệm trên/dưới của hộp.
   (187 − 130) / 2 = 28,5 mỗi bên. Sau đó Adam Jones cách 28px như Figma. */
.t4 .t4fx-cs-trich { padding: 28.5px 0; }
.t4fx-cs-bang { margin-top: -1px; }   /* panel Flatsome bắt đầu ở 447, Figma 446 */

/* 20.4 SÀN NHIỄU CHỮ — ĐÃ THỬ, KHÔNG KÉO XUỐNG ĐƯỢC ------------------------
   Phần khác biệt còn lại của mọi section là nhiễu mép chữ: Figma và trình
   duyệt vẽ chữ bằng hai bộ kết xuất khác nhau.
   Đã thử '-webkit-font-smoothing: antialiased | subpixel-antialiased' và
   'text-rendering: geometricPrecision | optimizeLegibility'. Áp thật rồi đo
   lại bằng bộ đo chính: **15/15 section ra số Y HỆT** trước khi áp. Chromium
   ở chế độ headless vốn đã khử răng cưa theo thang xám, nên mấy thuộc tính
   này không đổi gì trong đường chụp.

   ⚠ Lần thử ĐẦU TIÊN tôi tưởng nó kéo được 5,75 % xuống 5,20 %. Sai — phép
   thử đó dùng một bộ chụp rút gọn tự viết, thiếu đúng hai chốt chống nhiễu
   đã vá sáng nay (tắt chuyển cảnh · ép tải ảnh). Cái tôi đo được là dao động
   của chính phép thử. Cùng một cái bẫy "bài thử tự viết có thể sai chứ không
   phải mã sai" đã ghi ở QUY-TRINH-GIONG-FIGMA-100.md.
   ⇒ KHÔNG thêm luật nào ở đây. Sàn này là giới hạn của phép so, không phải
   việc chưa làm. */

/* 20.5 CASESTUDY MOBILE — Figma dựng KHÁC HẲN desktop ----------------------
   Khổ 402 Figma không có thanh tab: chỉ ba thẻ 240×389 cuộn ngang (x=25 · 281
   · 537, khe 16), kèm hai nút tròn 48×48 nền #EFE8DA ở y=828,8.
   Thẻ: nền trắng, bo 10, viền #FCFBF6, đổ bóng 3/3/8 @25%, đệm trên/dưới 18.
   Trong thẻ: ảnh 240×135 tràn hai mép (y=439) → chữ ở x=47 rộng 196:
   tiêu đề 16w700/21,856 (y=590) · mô tả 14w400/22 màu #353535 (y=650)
   · kẻ đứt y=759 · "Xem chi tiết" 12w400 (y=772).

   ⛔ Khối desktop (ảnh Unipart 503px) PHẢI ẩn ở đây. Để nguyên là nó bóp cột
   chữ còn 102px và section phồng từ 937 lên 1767 — đúng lỗi lượt rà này bắt
   được, và 'kiem-vo.js' KHÔNG kêu vì thanh tab vốn đã cuộn ngang. */
@media (max-width: 849px) {
  .t4:where(.t4-nhom-ggm, .t4-trang-xu-ly-loi-sai-google-ads, .t4-trang-dich-vu-google-marketing) #casestudy .tabbed-content { display: none; }
  /* Khối này nằm NGOÀI [row] nên không được thụt 25px như phần còn lại —
     phải tự thụt. Lề phải âm để hàng thẻ cuộn được tới sát mép màn hình. */
  div.t4fx-csmb { margin: 28px 0 0 25px; }
  /* H2 Casestudy ở khổ mobile: Figma khai 40/53 (hộp hai dòng cao 106), site
     đang rơi về 32/43 (cao 86) — cùng ca với #goi-dich-vu ở mục 11.14. */
  .t4 #casestudy .t4fx-head-2col h2 { font-size: 40px; line-height: 53px; }
  /* Khe chip → H2: Figma 56px, site 96px. Lề trên của hàng tiêu đề là 32px
     nhưng còn 40px nữa đến từ lề dưới của hàng chip và đệm cột của Flatsome —
     trừ thẳng ở đây thay vì đi gỡ từng chỗ. */
  /* ⚠ Số này phải tính NGƯỢC từ phép đo, đừng suy. 'overflow: hidden' thêm ở
     dưới tạo ngữ cảnh khối mới và làm lề co lại khác đi — đặt −8 thì H2 tụt
     lên 35px. Trị đúng đo được là 27. */
  .t4 #casestudy .t4fx-head-2col { margin-top: 27px; }
  /* Đệm đáy section: đang 150px, Figma cần section cao đúng 937 ⇒ 60,2px. */
  /* ⛔ ĐÃ GỠ `.t4-trang-dich-vu-google-marketing` (21/08/2026). Con số 937
     trong chú thích trên là `case_mb` của trang 4·5·6·7 — trang #3 KHÔNG có
     phần `casestudy` riêng ở khổ mobile (casestudy của nó nằm trong
     `lydothan_mb`), nên luật này ép sai chiều cao cho trang đó. Ba trang còn
     lại giữ nguyên. */
  .t4:where(.t4-nhom-ggm, .t4-trang-xu-ly-loi-sai-google-ads) #casestudy { padding-bottom: 60.2px !important; }
  /* Khung mobile của Figma KHÔNG có nút "Xem tất cả" — desktop mới có. */
  .t4 #casestudy .t4fx-xem-tat-ca { display: none; }
  /* ⚠ Đoạn mô tả: Figma khai hộp chữ rộng 511 trong khung chỉ 402, tức chữ
     TRÀN RA NGOÀI khung và bị cắt giữa từ. Gần như chắc là designer để sót bề
     rộng của bản desktop. 4T chốt bám Figma 100 % nên dựng đúng như vậy —
     kèm 'overflow: hidden' ở section để không sinh cuộn ngang. */
  .t4:where(.t4-nhom-ggm, .t4-trang-xu-ly-loi-sai-google-ads, .t4-trang-dich-vu-google-marketing) #casestudy { overflow: hidden; }
  .t4 #casestudy .t4fx-head-2col .t4fx-chu p {
    width: 511px; max-width: none;
    /* Hộp Figma cao 106 mà chữ chỉ 3 dòng (78) — 'tu_co_gian: NONE' +
       'can_doc: CENTER', tức hộp cố định chữ nằm giữa: đệm (106−78)/2 = 14. */
    padding: 14px 0;
  }
  /* Chữ "Xem chi tiết" thụt 8px so với mép khối (Figma x=55 · khối x=47). */
  .t4 .t4fx-csmb-xem a { margin-left: 8px; }

  /* Viền 1px của thẻ ăn vào lòng thẻ ⇒ ảnh còn 238 thay vì 240 và chữ lệch
     1px. Cùng cách chữa như thẻ Gói ở mục 19.2: đổi viền → bóng inset. */
  .t4fx-csmb-the {
    border: 0 !important;
    box-shadow: inset 0 0 0 1px #fcfbf6, 3px 3px 8px rgba(0, 0, 0, .25) !important;
  }
  .t4fx-csmb-hang {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding: 4px 0 12px;
    scrollbar-width: none;
  }
  .t4fx-csmb-hang::-webkit-scrollbar { display: none; }
  .t4fx-csmb-the {
    flex: 0 0 240px; width: 240px; min-height: 389px; scroll-snap-align: start;
    background: #fff; border: 1px solid #fcfbf6; border-radius: 10px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .25);
    padding: 18px 0; display: flex; flex-direction: column; overflow: hidden;
  }
  .t4 .t4fx-csmb-anh { width: 240px; height: 135px; object-fit: cover; display: block; }
  .t4fx-csmb-ruot { padding: 0 22px; margin-top: 16px; display: flex; flex-direction: column; flex: 1; }
  .t4 .t4fx-csmb-ten {
    font-family: var(--t4-font-body); font-weight: 700; font-size: 16px;
    line-height: 22px; color: #000; margin: 0;
  }
  .t4 .t4fx-csmb-mo {
    font-family: var(--t4-font-body); font-weight: 400; font-size: 14px;
    line-height: 22px; color: #353535; margin: 16px 0 0;
  }
  .t4 .t4fx-csmb-xem {
    margin: auto 0 0; padding-top: 11px; border-top: 1px dashed rgba(31, 31, 31, .35);
    font-family: var(--t4-font-body); font-weight: 400; font-size: 12px; line-height: 16px;
  }
  .t4 .t4fx-csmb-xem a {
    color: #1f1f1f; border-bottom: 1px solid var(--t4-camel);
    padding-bottom: 4px; display: inline-flex; gap: 10px; align-items: center;
  }
  .t4 .t4fx-csmb-xem span { color: var(--t4-camel); font-size: 15px; }
    /* ⚠ 'space-between' trên hàng rộng 352 lẽ ra đặt nút phải ở x=329, nhưng đo
     ra 313,5 — có thứ chiếm chỗ ở mép phải mà không hiện trong bề rộng. Ghim
     thẳng KHE giữa hai nút thay vì trông vào phép căn: 329 − 25 − 48 = 256. */
    /* ⚠ Nút của Flatsome mang sẵn 'margin: 0 15.52px 15.52px 0' — nó vừa đẩy
     nút phải lệch vừa cộng thêm chiều cao cho section. Gỡ lề rồi mới ghim
     khe: 329 − 25 − 48 = 256. */
  .t4fx-csmb-dieu { display: flex; gap: 256px; margin-top: 6.8px; }
  .t4fx-csmb-nut { margin: 0; }
  .t4fx-csmb-nut {
    width: 48px; height: 48px; border: 0; border-radius: 50%;
    background: var(--t4-cream, #efe8da); cursor: pointer; position: relative;
  }
  .t4fx-csmb-nut::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px;
    border-top: 2px solid var(--t4-camel); border-right: 2px solid var(--t4-camel);
  }
  .t4fx-csmb-truoc::before { transform: translate(-40%, -50%) rotate(-135deg); }
  .t4fx-csmb-sau::before   { transform: translate(-60%, -50%) rotate(45deg); }
  .t4fx-csmb-nut:focus-visible { outline: 2px solid var(--t4-leaf); outline-offset: 2px; }



}
@media (min-width: 850px) { .t4fx-csmb { display: none; } 


}


/* 20.7 KHỐI "GIAI ĐOẠN" SAU KHI TÁCH LÀM HAI Ô VĂN BẢN (T0) ----------------
   [phục vụ] #quy-trinh khối các giai đoạn — chỉ trang đã tách mới có hai lớp
   't4fx-gd-td' / 't4fx-gd-mo', nên hai trang GGM còn lại không đổi gì.

   ⛔ 'min-height: 156px' PHẢI rời khỏi ô văn bản sang CỘT. Để nguyên trên ô
   thì sau khi tách CẢ HAI ô cùng cao 156 và cột phồng lên 312. Dùng ':has()'
   để chỉ cột của trang đã tách mới nhận — không đụng hai trang kia.

   ⛔ Khe tiêu đề → mô tả: '<h3>' nay là con CUỐI của ô nên Flatsome triệt lề
   dưới của nó (đúng cái bẫy đã trả giá ở khối casestudy placeholder). Trả lại
   bằng lề TRÊN của ô mô tả, và phải đủ (0,5,0) để thắng nền
   '.t4 .section:where(…) .section-content .text { margin: 0 }' là (0,4,0). */
body.t4-nhom-ggm #content .t4fx-gd-don > .col.t4fx-gd-o:has(.t4fx-gd-td) { min-height: 156px; }
body.t4-nhom-ggm #content .t4fx-gd-don .t4fx-gd-td,
body.t4-nhom-ggm #content .t4fx-gd-don .t4fx-gd-mo { min-height: 0; }
.t4 .section .section-content .text.t4fx-gd-mo { margin-top: 8px; }

/* ⛔ ĐƯỜNG KẺ ĐỨT DƯỚI TIÊU ĐỀ GIAI ĐOẠN — Figma CÓ, bản dựng THIẾU HẲN.
   [figma] `715:23240` có đúng NĂM lớp `Separator`, mỗi thẻ giai đoạn một cái:
     x=440/978  y=697 · 869 · 1041   w=482  strokeWeight=1
     strokeDashes=[3, 2]             stroke=rgba(0,0,0,0.11)
   Live đo được **0** đường kẻ trong cả khối.

   ⚠ Vì sao mọi bộ kiểm bỏ lọt: đây là "Figma CÓ, site KHÔNG CÓ" — ảnh nhiệt
   không thấy vì nét 1px màu 11% trên nền kem lệch chưa tới ngưỡng ΔE, còn
   bảng dày chỉ đo các phần tử ĐANG TỒN TẠI nên không có gì để so. Cùng điểm
   mù đã ghi cho ba nút điều khiển slider trang #3.

   Dựng bằng `::after` trên chính ô tiêu đề, không thêm phần tử vào UX Block:
   `border-top` cho nét đứt đúng nhịp 3/2 mà `background` gradient không tả
   được. Khe: tiêu đề kết thúc 681 → kẻ 697 (16) → mô tả 706 (9). */
body.t4-nhom-ggm #content .t4fx-gd-don .t4fx-gd-td::after {
  content: "";
  display: block;
  width: 482px;
  max-width: 100%;
  height: 0;
  margin-top: 16px;
  border-top: 1px dashed rgba(0, 0, 0, .11);
}
/* Ô mô tả cách kẻ 9px (thay cho khe 8 tính từ tiêu đề khi chưa có kẻ). */
body.t4-nhom-ggm #content .t4fx-gd-don .t4fx-gd-td:has(+ .t4fx-gd-mo) + .t4fx-gd-mo { margin-top: 9px; }

/* ⛔ Mobile PHẢI huỷ min-height của cột. Bản cũ huỷ trên Ô (dòng "…​.t4fx-gd
   { min-height: 0 }" trong @media), nhưng nay số 156 nằm trên CỘT nên nhánh
   mobile không còn với tới — đo được section .t4fx-qt-duoi phồng 901 → 1003. */
@media (max-width: 849px) {
  body.t4-nhom-ggm #content .t4fx-gd-don > .col.t4fx-gd-o:has(.t4fx-gd-td) { min-height: 0; }



}

/* 20.8 DANH SÁCH DẤU TÍCH DỰNG BẰNG Ô VĂN BẢN RIÊNG (T0) -------------------
   [phục vụ] #mo-ta-dich-vu — thay <ul class="t4fx-tich"> bằng mỗi mục một
   [ux_text class="t4fx-tich-m"]. Chỉ trang đã chuyển mới có lớp này.

   ⛔ Khai LẠI ĐỦ mọi thứ mà thẻ <ul> từng mang hộ: dấu tích ::before, đệm
   trái, cỡ chữ, khe giữa các mục, và lề trên của mục ĐẦU. Thiếu một thứ là
   lệch — đây đúng chỗ đã trả giá 106 mốc ở lượt trước.
   ⛔ Cần (0,5,0) để thắng nền '.section-content .text { margin: 0 }' (0,4,0). */
.t4 .section .section-content .text.t4fx-tich-m {
  position: relative; padding: 10px 0 10px 32px; margin: 0;
  font-size: 14px; line-height: 22px; font-weight: 700; color: #666;
}
.t4 .text.t4fx-tich-m > p { margin: 0; font: inherit; color: inherit; }
.t4 .text.t4fx-tich-m::before {
  content: ""; position: absolute; left: 3px; top: 13px; width: 16px; height: 16px;
  background: no-repeat center/16px 16px
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23CF9156' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.t4 .section .section-content .text.t4fx-tich-dau { margin-top: 60px; }

@media (max-width: 849px) {
  .t4 .section .section-content .text.t4fx-tich-m {
    padding: 2px 0 2px 29px; font-size: 12px; line-height: 22px;
  }
  .t4 .section .section-content .text.t4fx-tich-m + .text.t4fx-tich-m { margin-top: 4px; }
  .t4 .text.t4fx-tich-m::before { top: 5px; left: 0; }
  .t4 .section .section-content .text.t4fx-tich-dau { margin-top: 19px; }



}

/* ⛔ Phải khai bằng ID: '#mo-ta-dich-vu .t4fx-split .text + .text
   { margin-top: 24px }' là (1,2,0) và MỘT id thắng mọi số lượng class — luật
   (0,5,0) ở trên thua im lặng, đo được khe 42 → 66 (desktop) và 32 → 50
   (mobile). Cùng loại bẫy đã ghi cho ':not()' và ':where()'. */
#mo-ta-dich-vu .text.t4fx-tich-m + .text.t4fx-tich-m { margin-top: 0; }
#mo-ta-dich-vu .t4fx-split .text.t4fx-tich-dau,
#mo-ta-dich-vu .t4-only-mobile .text.t4fx-tich-dau { margin-top: 60px; }
@media (max-width: 849px) {
  #mo-ta-dich-vu .text.t4fx-tich-m + .text.t4fx-tich-m { margin-top: 4px; }
  #mo-ta-dich-vu .t4fx-split .text.t4fx-tich-dau,
  #mo-ta-dich-vu .t4-only-mobile .text.t4fx-tich-dau { margin-top: 19px; }



}

/* ⛔ Figma coi khối chữ Mô tả là MỘT lớp cao 255 (y=371→626), gồm cả dòng
   "Doanh nghiệp nhận được:". Khi danh sách tích rời khỏi ô, '<p>' cuối thành
   con cuối và Flatsome triệt lề dưới ⇒ ô tụt 255 → 210, tâm lệch -22,5px.
   Trả lại bằng ĐỆM DƯỚI của ô (margin của con cuối sẽ collapse ra ngoài, không
   làm ô cao lên), rồi bớt đúng ngần ấy ở lề trên mục đầu để khe hộp-tới-hộp
   giữ nguyên 60px như Figma. */
/* ⛔ Đệm này bù cho lề dưới mà '<p>' cuối mất khi danh sách rời khỏi ô —
   nhưng CON SỐ khác nhau theo trang vì Figma khai khối chữ cao khác nhau:
     #5 google-merchant-center  khối 255 ⇒ đệm 45, lề mục đầu 15
     #6 tracking-do-luong       khối 180 ⇒ đệm  0, lề mục đầu 26
   Áp chung một số là trang kia lệch 41px ở khe đoạn → mục đầu. */
.t4.t4-trang-google-merchant-center #mo-ta-dich-vu .t4fx-split .text.t4fx-chu:has(+ .text.t4fx-tich-dau) { padding-bottom: 45px; }
.t4.t4-trang-google-merchant-center #mo-ta-dich-vu .t4fx-split .text.t4fx-tich-dau { margin-top: 15px; }
/* 20.14 HÀNG TÍCH KHỔ DESKTOP CỦA #6 — đệm 2/18 như Figma, không phải 10/10
   [phục vụ] phần tử: Text ([ux_text class="t4fx-tich-m"]) | khối: '#mo-ta-dich-vu'
   [trang] tracking-do-luong | [figma] mota 'Item' 42px, 'Frame 8' cách mép 2
   [lý do vượt panel] đệm trong hàng tích không có ô trong panel

   Lề 26 cũ đo TỚI MÉP HỘP, nhưng mốc được chấm là MÉP CHỮ — và chữ nằm giữa
   ô 42px nên thấp hơn mép hộp đúng 10px:

       mốc              Figma   site (lề 26, đệm 10/10)
       hàng 'Item'       575     577
       lớp chữ           577     587      ⇒ mốc lệch +10 (hộp) / +7 (mực)
       đáy hàng cuối     701     693      ⇒ section 793 thay vì 801

   ⛔ Hạ lề xuống 16 chữa được mốc bảng dày nhưng KÉO CẢ KHỐI LÊN 10 ⇒ chiều
   cao section tụt từ +2 xuống −8. Đã thử và đã lùi: đổi một mốc bảng dày lấy
   một mốc chiều cao là đổi lỗ (cùng bài học I.6 với thẻ Gói #7, mục 19.21).

   Cách đúng là tách hai thứ đang bị buộc vào nhau: giữ lề 24 (Figma: 551 → 575)
   để ĐÁY khối không đổi, rồi đặt đệm hàng 2/18 như chính Figma để CHỮ lên đúng
   577. Hai mốc cùng đạt, không phải chọn.
   ⚠ Đúng đường mà #7 đã đi (mục 19.16b) — nay hai trang cùng một cơ chế.
   ⚠ Bộ chọn mang '.t4fx-split' (hàng DESKTOP) nên khổ điện thoại — đang khớp
   tuyệt đối với đệm 10/10 — không bị chạm. */
.t4.t4-trang-tracking-do-luong #mo-ta-dich-vu .t4fx-split .text.t4fx-tich-dau { margin-top: 24px; }
.t4.t4-trang-tracking-do-luong #mo-ta-dich-vu .t4fx-split .text.t4fx-tich-m {
  padding: 2px 0 18px 32px;
}
.t4.t4-trang-tracking-do-luong #mo-ta-dich-vu .t4fx-split .text.t4fx-tich-m::before {
  top: 5px;
}

/* 20.8b MỤC TÍCH KHỔ ĐIỆN THOẠI CỦA RIÊNG TRANG #6 -------------------------
   [phục vụ] phần tử: Text ([ux_text class="t4fx-tich-m"]) | khối: danh sách
   dấu tích trong hàng '.t4-only-mobile' của #mo-ta-dich-vu
   [trang] tracking-do-luong (chỉ trang này) | [figma] mota_mb — ba lớp chữ
   y=778,27 · 820,27 · 862,27, x=57, h=22; hàng bao y=776,27 h=42
   [lý do vượt panel] panel Text không có ô cho đệm/lề theo breakpoint của
   riêng một trang, cũng không có ô cho dấu tích ::before

   ⛔ Luật CŨ khai 'body.t4-trang-tracking-do-luong #content .t4fx-tich li
   { font-size: 14px }' (mục 20.4) bám vào thẻ <li>. Lượt chuyển T0 bỏ <ul>
   đi, nên luật đó không còn áp và cỡ chữ rơi về 12px của #5/#7 — kéo theo
   'chu_w' lệch tới 33px ở ba mục. Ba trang KHÁC NHAU thật ở chỗ này:
   #5 khai 12px (hàng cách 32), #6 và #7 khai 14px (hàng cách 42).

   ⛔ Mỗi mục phải cao ĐÚNG 42px bằng ĐỆM, không bằng lề giữa hai mục: hàng
   Figma cao 42 và mục CUỐI cũng có 20px phía dưới trước khi tới đệm section.
   Dùng lề thì mục cuối hụt 20px và section ngắn đi đúng ngần ấy. */
@media (max-width: 849px) {
  .t4.t4-trang-tracking-do-luong .section .section-content .text.t4fx-tich-m {
    padding: 2px 0 18px 32px; font-size: 14px; line-height: 22px;
  }
  .t4.t4-trang-tracking-do-luong .text.t4fx-tich-m::before { top: 5px; left: 3px; }
  .t4.t4-trang-tracking-do-luong #mo-ta-dich-vu .text.t4fx-tich-m + .text.t4fx-tich-m { margin-top: 0; }
  /* 24 = đúng khe Figma từ đáy khối chữ (752,27) tới mép hàng tích (776,27).
     Chỉ dùng được con số THẬT của Figma vì 19.13 đã trả lại 30px mà khối chữ
     '.t4fx-chu' render hụt; nhét 30px đó vào lề này thì con số hết ý nghĩa và
     lần sau không ai lần ra vì sao lại là 54. */
  .t4.t4-trang-tracking-do-luong #mo-ta-dich-vu .t4-only-mobile .text.t4fx-tich-dau { margin-top: 24px; }



}

/* 20.9 DANH SÁCH LÝ DO DỰNG BẰNG Ô VĂN BẢN TRONG LƯỚI (T0) ------------------
   [phục vụ] #ly-do — thay <ul class="t4fx-ly-do"> bằng 11 [ux_text] đặt trong
   một [col class="t4fx-lydo-o"]; lưới 2 cột chuyển từ <ul> lên '.col-inner'.

   ⛔ Lưới PHẢI đặt trên '.col-inner', không đặt trên '.col': Flatsome cho
   '.col' đệm ngang riêng, biến nó thành grid là các mục ăn đệm đó và cột phải
   rơi khỏi mốc Figma 956.
   ⛔ Giữ nguyên 'justify-content: start' — hai cột 498 đặt SÁT NHAU cách 48
   (Figma 410 và 956), dàn đều hết 1080 thì cột phải rơi vào 992. */
body.t4-nhom-ggm #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: 49.25px;
}
.t4 .section .section-content .text.t4fx-lydo-m {
  position: relative; margin: 0; padding-left: 0;
  font-size: 16px; line-height: 26px; color: var(--t4-text);
}
.t4 .text.t4fx-lydo-m > p { margin: 0; padding-left: 30px; font: inherit; color: inherit; }
.t4 .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) {
  body.t4-nhom-ggm #ly-do .col.t4fx-lydo-o > .col-inner {
    grid-template-columns: 1fr; gap: 16px; margin-top: 65px;
  }
  /* Figma mobile: mục 14/22, thụt 26px — KHÁC desktop 16/26 */
  .t4 .section .section-content .text.t4fx-lydo-m { font-size: 14px; line-height: 22px; }
  .t4 .text.t4fx-lydo-m > p { padding-left: 26px; }
  .t4 .text.t4fx-lydo-m::before { top: 8px; }



}

/* ⛔ Đệm đáy khối Giai đoạn: Figma để 60px dưới thẻ cuối (Frame 1707479573
   kết thúc y=1008, khung 1068), site đang 100px. Bảng dày KHÔNG bắt được vì
   nó chỉ so khoảng cách giữa hai mốc liền kề, mà dưới thẻ cuối không còn mốc
   nào — đúng lỗ hổng II.K-1 đã ghi. */
/* Phải '!important': trang #4 khai '.t4fx-qt-duoi { padding-bottom: 100px
   !important }' (Figma của NÓ). Luật thường thua bất kể độ cụ thể; hai luật
   cùng !important thì luật nạp sau thắng, và 44 nạp sau 40. */
body.t4-nhom-ggm #content .t4fx-qt-duoi { padding-bottom: 60px !important; }

/* 20.10 CASESTUDY MOBILE — ba thẻ cuộn ngang (T0) ---------------------------
   [phục vụ] #casestudy khổ 402. Figma mobile dựng KHÁC HẲN desktop: không có
   thanh tab, chỉ ba thẻ 240×389 cuộn ngang tại x=25 · 281 · 537 (khe 16), kèm
   hai nút tròn 48×48 nền #EFE8DA ở y=828,8. Khối desktop vẫn ẩn ở 20.5.

   ⛔ Thẻ thứ ba nằm ở x=537 — NGOÀI khung 402. Đó là thiết kế: hàng cuộn
   ngang. Vì vậy hàng phải 'nowrap' + 'overflow-x: auto', và '.row' của
   Flatsome mặc định 'flex-wrap: wrap' sẽ bẻ thẻ xuống dòng nếu quên.
   ⛔ Ẩn hẳn ở desktop: khối tab desktop mới là bản dùng ở đó. */
/* ⛔ PHẢI có '.row': trang #4 dựng khối casestudy mobile bằng
   '<div class="t4fx-csmb">' trong [ux_html] — CÙNG TÊN LỚP nhưng không phải
   '.row'. Bản đầu thiếu '.row' nên ẩn luôn khối của trang #4 ở MỌI khổ, mà
   nhánh @media khôi phục lại chỉ nhắm '.row.t4fx-csmb' ⇒ khối đó biến mất
   hẳn: 26 mốc của trang #4 rơi về 0px và section case_mb hụt 488px. */
.t4 .section .row.t4fx-csmb,
.t4 .section .row.t4fx-csmb-dieu { display: none; }

@media (max-width: 849px) {
  .t4 .section .section-content > .row.t4fx-csmb {
    display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth;
    margin: 83px 0 0; padding: 0; width: 100%; max-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .t4 .section .t4fx-csmb::-webkit-scrollbar { display: none; }
  .t4 .section .t4fx-csmb > .col.t4fx-csmb-the {
    flex: 0 0 240px; max-width: 240px; width: 240px; padding: 0;
  }
  /* ⛔ Lề trái phải nằm trên THẺ ĐẦU, không phải padding của hàng: Flatsome
     khai '.row-collapse' với 'padding: 0 !important' nên padding của hàng bị
     nuốt im lặng — đo được thẻ đầu ở x=0 thay vì 25. */
  .t4 .section .t4fx-csmb > .col.t4fx-csmb-the:first-child { margin-left: 25px; }
  .t4 .section .t4fx-csmb > .col.t4fx-csmb-the:last-child { margin-right: 25px; }
  .t4 .section .t4fx-csmb > .col.t4fx-csmb-the + .col.t4fx-csmb-the { margin-left: 16px; }
  .t4 .section .t4fx-csmb > .col.t4fx-csmb-the > .col-inner {
    background: var(--t4-white); border: 1px solid #FCFBF6; border-radius: 10px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .25); padding: 18px 0; height: 389px;
  }
  /* ảnh tràn hai mép thẻ: 240 rộng, 135 cao, mép trên cách đỉnh thẻ 18 */
  .t4 .t4fx-csmb .t4fx-csmb-anh { margin: 0; }
  .t4 .t4fx-csmb .t4fx-csmb-anh img { width: 240px; height: 135px; object-fit: cover; display: block; }
  /* chữ thụt vào 22px mỗi bên → rộng 196 (Figma x=47 trong thẻ x=25) */
  .t4 .section .section-content .text.t4fx-csmb-ten,
  .t4 .section .section-content .text.t4fx-csmb-mo { margin: 0; padding: 0 22px; }
  .t4 .section .section-content .text.t4fx-csmb-ten { margin-top: 16px; }
  /* ⛔ <h3> mặc định ăn phông tiêu đề Playfair và màu #1f1f1f của theme —
     Figma khai Manrope #000 cho tên thẻ. Phải khai lại cả hai. */
  .t4 .t4fx-csmb-ten h3 {
    margin: 0; font-family: var(--t4-font-body);
    font-size: 16px; line-height: 21.856px; font-weight: 700; color: #000;
  }
  .t4 .section .section-content .text.t4fx-csmb-mo { margin-top: 16px; }
  .t4 .section .section-content .text.t4fx-csmb-mo { height: 66px; overflow: hidden; }
  .t4 .t4fx-csmb-mo p { margin: 0; font-size: 14px; line-height: 22px; color: #353535; }
  /* ⛔ '[divider]' KHÔNG nhận 'class' (bẫy đã ghi trong bộ luật) — luật bám
     '.t4fx-csmb-ke' không khớp gì cả và im lặng, kẻ giữ nguyên chỗ cũ nên link
     đứng sai 16px. Phải bám lớp '.is-divider' mà Flatsome tự sinh. */
  .t4 .t4fx-csmb .is-divider {
    margin: 43px 22px 0; width: 196px; height: 1px;
    background: none; border-top: 1px dashed rgba(0, 0, 0, .2);
  }
  .t4 .section .section-content .text.t4fx-csmb-xem {
    margin: 12px 0 0 22px; padding: 0; width: 103px; height: 24px;
    display: flex; align-items: center; background: var(--t4-white);
  }
  .t4 .t4fx-csmb-xem p { margin: 0; }
  .t4 .t4fx-csmb-xem a {
    font-size: 12px; line-height: 16px; color: var(--t4-text); text-decoration: none;
    /* ⛔ Hộp Figma rộng đúng 103 nhưng chữ + mũi tên rộng hơn ⇒ xuống dòng,
       chữ 'tiết' rơi xuống hàng hai. Ảnh nhiệt lộ ra ngay: chữ hiện hai lần. */
    white-space: nowrap;
  }
  .t4 .t4fx-csmb-xem a::after {
    content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px;
    vertical-align: -2px; background: no-repeat center/14px 14px
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M0 7h13M8 2l5 5-5 5' fill='none' stroke='%231F1F1F' stroke-width='1.4'/%3E%3C/svg%3E");
  }
  /* hai nút tròn 48×48, mép trái 25 và 329 (Figma) */
  /* ⛔ Phải khoá 'height': hàng flex này tự cao 304px dù mọi con chỉ cao 48 —
     '.row::after' của Flatsome trở thành flex item và kéo hàng ra (bẫy đã ghi
     trong bộ luật). Khoá chiều cao là cách rẻ nhất, và mốc Figma vốn cố định. */
  .t4 .section .section-content > .row.t4fx-csmb-dieu {
    display: flex; align-items: center; height: 48px;
    margin: 18.8px 0 0; padding: 0; width: 100%; max-width: none;
  }
  .t4 .section .t4fx-csmb-dieu::after { display: none; }
  .t4 .t4fx-csmb-dieu > .col { width: 100%; }
  .t4 .t4fx-csmb-dieu .col-inner { padding: 0 25px; }
  .t4 .t4fx-csmb-dieu > .col { padding: 0; }
  .t4 .t4fx-csmb-dieu .col-inner { display: flex; justify-content: space-between; }
  .t4 .button.t4fx-csmb-nut {
    width: 48px; height: 48px; min-height: 48px; margin: 0; padding: 0;
    border: 0; border-radius: 50%; background: #EFE8DA; box-shadow: none;
  }
  .t4 .button.t4fx-csmb-nut span {
    font-size: 20px; line-height: 48px; color: var(--t4-text); letter-spacing: 0;
  }



}

/* 20.11 DẢI KEM QUY TRÌNH — hai số khác trang #4 -------------------------
   Trang #4 khai cột minh hoạ 506 (Figma 711:16416 của NÓ). Nhóm GGM thì
   Figma cho Container ảnh rộng **561** và dải kem cao **469** (nội dung kết
   thúc y=460 ⇒ đệm đáy 9). Không tách ra thì 'space-between' đẩy ô ảnh lệch
   65px và section hụt 9px. */
body.t4-nhom-ggm .t4fx-qt-dai .t4fx-split > .col:last-child {
  flex: 0 0 561px; max-width: 561px;
}
body.t4-nhom-ggm #content .t4fx-qt-dai { padding-bottom: 9px; }


/* 20.12 DẢI THẺ GÓI KHỔ ĐIỆN THOẠI — TRANG #7 CÓ BỘ SỐ RIÊNG ----------------
   [phục vụ] phần tử: Row/Col + Image + Text + Button | khối: '.t4fx-goi-row'
   [trang] google-map-local-seo | [figma] goi_mb 'Frame 108' 960×320
   [lý do vượt panel] khe ảnh → tiêu đề của từng thẻ không có ô trong panel

   Mục 20.6(d) lấy số của trang #5 rồi áp cho cả ba trang. Đo lại bằng chính
   node Figma của từng trang: #5 khớp tuyệt đối, #6 lệch ≤1px (may — hai cái
   sai bù nhau), #7 lệch hẳn vì Figma của nó dựng dải thẻ theo bộ số khác.

       mốc (từ mép trên section)   #5 Figma/site   #6 Figma/site   #7 Figma/site
       "Chọn gói…"                  247 / 247       267 / 267       275 / 267
       dải thẻ 'Frame 108'          357 / 357       377 / 377       417 / 377
       ảnh (⇒ đệm trên của thẻ)     392 / 392       427 / 412       467 / 412
       nút (⇒ đệm dưới)             617 / 617       628 / 637       668 / 637

   ⇒ #7: đệm thẻ 50/25 (không phải 35/16) và dải thẻ cách đoạn dẫn 64
   (không phải 32). Chiều cao thẻ vẫn 320 nên đổi đệm KHÔNG làm thẻ cao lên:
   nội dung cao nhất là thẻ 1, 50+121−10+56 = 217, còn xa 320−25−44 = 251.

   Khe ảnh → tiêu đề, đo từ đáy ảnh tới đỉnh lớp chữ:

       thẻ                           ảnh cao   Figma   20.6d đang áp
        1 Tạo & xác minh               121      −10        27
        2 Tối ưu Google Maps            93       40        32,5
        3 Chạy quảng cáo Google Maps    90       27,5      33,5

   ⚠ Thẻ 1 mang số ÂM vì trong CHÍNH bản Figma ảnh chồng lên tiêu đề 10px:
   'image 11' y=467 h=121 (đáy 588) trong khi lớp chữ bắt đầu ở y=578. Không
   phải lỗi đọc lớp. Ảnh minh hoạ có khoảng trắng ở đáy nên 10px đó không
   đụng nét vẽ — đã soi ảnh chụp 402px sau khi áp, chữ không chạm hình.

   ⛔ KHÔNG dùng lại cách của mục 19.21 (ghim theo nút): ở khổ này tiêu đề
   KHÔNG trôi tự do — 20.6(d) đã khoá 'margin-top' cứng cho từng thẻ và chỉ
   để 'margin-bottom: auto', nên nút đã dính đáy sẵn. Việc cần làm chỉ là
   thay ba con số cho đúng trang, cộng hai con đệm của thẻ.

   ⚠ Độ cụ thể — đây là chỗ đã trả giá ba lần trong ngày 20/08:
     · '.text' margin-top: 20.6(d) khai (1 id · 7 lớp · 1 thẻ) KÈM
       '!important'; mục 1754 của 40-page-… khai (1 · 7 · 0) cũng '!important'.
       Thêm lớp trang vào 'body' cho ra (1 · 8 · 1) — thắng cả hai.
       '!important' ở đây để ĐẤU với '!important', không phải để chữa độ cụ
       thể thấp.
     · '.col-inner' padding: luật đang áp cao nhất là (1 · 3 · 0). Bộ chọn
       dưới đây (1 · 4 · 1) thắng mà KHÔNG cần '!important'.
   Cả hai con số đọc bằng 'scripts/_luat-khop.js', không phải đếm bằng mắt.

   ⚠ Khe H2 → đoạn dẫn: bảng dày đo site 132 / Figma 138 nên cộng 6, trong
   khi hộp phần tử chênh 8 (site 267 ↔ Figma 275). Chênh 2px là do bảng dày
   neo theo KHUNG GLYPH còn Figma khai hộp lớp. Lấy theo bảng dày (số được
   chấm) ⇒ mốc bảng về đúng 0, chiều cao section còn −2 — vẫn trong ±4 mà
   'kiem-cao-section' coi là ĐẠT. */
@media (max-width: 849px) {
  /* (a) đoạn dẫn cách H2 thêm 6 */
  body.t4-nhom-ggm.t4-trang-google-map-local-seo #goi-dich-vu
    .t4fx-head-2col > .col:nth-child(2) > .col-inner { margin-top: 6px; }

  /* (b) dải thẻ cách đoạn dẫn 64, không phải 32 */
  body.t4-nhom-ggm.t4-trang-google-map-local-seo #goi-dich-vu
    .t4fx-goi-row { margin-top: 64px; }

  /* (c) đệm thẻ 50 trên / 25 dưới — kéo ảnh xuống 15 và nút lên 9 */
  body.t4-nhom-ggm.t4-trang-google-map-local-seo #goi-dich-vu
    .t4fx-goi .col-inner { padding: 50px 16px 25px; }

  /* (d) ba khe ảnh → tiêu đề riêng của trang này */
  body.t4-nhom-ggm.t4-trang-google-map-local-seo #goi-dich-vu
    .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .col-inner > .text {
    margin-top: -10px !important;
  }
  body.t4-nhom-ggm.t4-trang-google-map-local-seo #goi-dich-vu
    .t4fx-goi-row > .col.t4fx-goi:nth-child(2) .col-inner > .text {
    margin-top: 40px !important;
  }
  body.t4-nhom-ggm.t4-trang-google-map-local-seo #goi-dich-vu
    .t4fx-goi-row > .col.t4fx-goi:nth-child(3) .col-inner > .text {
    margin-top: 27.5px !important;
  }



}

/* 20.13 DẢI THẺ GÓI KHỔ ĐIỆN THOẠI — TRANG #6 CŨNG CÓ BỘ SỐ RIÊNG ----------
   [phục vụ] phần tử: Row/Col + Image + Text + Button | khối: '.t4fx-goi-row'
   [trang] tracking-do-luong | [figma] goi_mb 'Frame 109' 1080×320 (BỐN thẻ)
   [lý do vượt panel] như 20.12

   Cùng gốc với 20.12: 20.6(d) là số của trang #5. Trang #6 chỉ lọt lưới vì
   HAI CÁI SAI BÙ NHAU — Figma cho đệm trên 50 + khe 13 (tổng 63), site cho
   35 + 27 (tổng 62), lệch 1px nên bảng dày không kêu. Nhưng đệm DƯỚI thì
   không có gì bù: Figma 25, site 16 ⇒ nút thấp hơn 9px, và mốc cuối của
   chuỗi ('Cài đặt Google Analytics → Nhận tư vấn') lệch đúng +9.

       thẻ                            ảnh cao   khe Figma   20.6d đang áp
        1 Cài đặt Google Analytics      119        13           27
        2 Setup Google Tag Manager      108        18,5         32,5
        3 Thiết lập conversion          105        20           33,5
        4 Kiểm tra & làm sạch dữ liệu   106        19,5         (auto → 31,5)

   ⚠ Thẻ 4 trước nay KHÔNG có luật nào — nó ăn 'margin: auto 0' của mục 1739
   nên tự căn giữa, ra 31,5. Trùng hợp gần đúng, không phải cố ý. Nay ghim
   luôn để bốn thẻ cùng một cơ chế.

   Chiều cao thẻ vẫn 320: nội dung cao nhất 50+119+13+56 = 238 < 320−25−44.
   Vì vậy đổi đệm KHÔNG làm section cao lên — đã đo lại, 'goi_mb' giữ 757.

   ⚠ Độ cụ thể: như 20.12 — (1·8·1) + '!important' cho '.text', (1·4·1) cho
   '.col-inner'. */
@media (max-width: 849px) {
  body.t4-nhom-ggm.t4-trang-tracking-do-luong #goi-dich-vu
    .t4fx-goi .col-inner { padding: 50px 16px 25px; }

  body.t4-nhom-ggm.t4-trang-tracking-do-luong #goi-dich-vu
    .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .col-inner > .text {
    margin-top: 13px !important;
  }
  body.t4-nhom-ggm.t4-trang-tracking-do-luong #goi-dich-vu
    .t4fx-goi-row > .col.t4fx-goi:nth-child(2) .col-inner > .text {
    margin-top: 18.5px !important;
  }
  body.t4-nhom-ggm.t4-trang-tracking-do-luong #goi-dich-vu
    .t4fx-goi-row > .col.t4fx-goi:nth-child(3) .col-inner > .text {
    margin-top: 20px !important;
  }
  body.t4-nhom-ggm.t4-trang-tracking-do-luong #goi-dich-vu
    .t4fx-goi-row > .col.t4fx-goi:nth-child(4) .col-inner > .text {
    margin-top: 19.5px !important;
  }



}

/* ── MA TRẬN CẮT ẢNH ('imageTransform') — thứ luật bề rộng ở trên BỎ SÓT ────
   [phục vụ] phần tử: Image | khối: '.t4fx-goi-hinh'
   [trang] #4 #5 #6 #7 | [figma] 'image 11' · 'image 12' · 'image 13' khối 'goi'
   [lý do vượt panel] panel Image chỉ đặt được KHUNG; tranh nằm ở đâu trong
     khung là do 'imageTransform' của Figma quyết định

   ⛔ ĐẶT ĐÚNG KHUNG CHƯA PHẢI LÀ ĐẶT ĐÚNG ẢNH. Luật phía trên lấy
   'absoluteBoundingBox' làm bề rộng thẻ <img> — đúng khung, nhưng Figma còn
   khai 'scaleMode: STRETCH' + 'imageTransform', tức tranh nằm THU NHỎ và
   LỆCH trong khung. Thẻ 2 của #5: khung 160×155 mà tranh chỉ **107,26×107,54**
   ở **(+26,37 · +36)**. Site vẽ tranh phủ kín khung ⇒ to hơn bản vẽ ~1,5 lần
   và méo tỉ lệ. Bảng dày mù (nó so 'w'/'h' của thẻ <img>, mà thẻ <img> đúng
   bằng khung); chặng 3 mới bắt — #5 có 4 vùng đỏ liền khối riêng khối 'goi'.

   ⛔ KHÔNG dùng 'transform: scale()'. Đã thử: nó cắt đúng nhưng
   'getBoundingClientRect()' trả về hộp ĐÃ BIẾN ĐỔI, nên 12 mốc '[ảnh] w/h'
   đỏ lên ngay — hai đầu phép so hết cùng nghĩa (Figma đo KHUNG, site hoá ra
   đo TRANH). 'object-view-box' cắt phần nhìn thấy mà **giữ nguyên hộp**, nên
   cả hai phép đo cùng đúng, và thẻ <img> vẫn còn 'alt' cho trình đọc màn hình.

   Cách dịch ma trận '[[a,0,tx],[0,d,ty]]', suy từ 'u = a·x + tx':
       trên = ty        phải  = 1 − a − tx
       dưới = 1 − d − ty  trái  = tx            (đơn vị: phần trăm ảnh gốc)
   Dùng PHẦN TRĂM chứ không phải px: khổ 402 lấy tệp '-300x300' có kích thước
   gốc khác, mà phần trăm thì bám ảnh gốc nên MỘT luật đúng cho cả hai khổ.
   Giá trị âm là hợp lệ — nghĩa là nới khung nhìn ra ngoài ảnh (nền trong
   suốt), đúng cách Figma thu nhỏ tranh trong khung.                        */
/* ⛔ #4 và #6 KHÔNG dùng 'object-view-box'. Tệp ảnh của hai trang này (bộ
   'xu-ly-loi-sai-google-ads-goi-*.png', dùng chung) đã được XÉN LỀ sẵn khi
   xuất, nên áp thêm ma trận cắt là cắt hai lần: đo bao hình mực thấy biểu
   tượng nhỏ hơn Figma **1,23–1,69 lần**. #5 và #7 thì tệp còn nguyên lề nên
   phải cắt. Kiểm bằng bao hình mực trước khi thêm luật cho một trang mới. */
/* #5 'google-merchant-center' — 3 thẻ */
body.t4-trang-google-merchant-center .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .t4fx-goi-hinh img { object-view-box: inset(10.552% -8.621% 0.267% -8.621%); }
body.t4-trang-google-merchant-center .t4fx-goi-row > .col.t4fx-goi:nth-child(2) .t4fx-goi-hinh img { object-view-box: inset(-33.477% -24.583% -10.660% -24.583%); }
body.t4-trang-google-merchant-center .t4fx-goi-row > .col.t4fx-goi:nth-child(3) .t4fx-goi-hinh img { object-view-box: inset(-16.058% -14.496% 5.839% -14.496%); }
/* #6 'tracking-do-luong' — 4 thẻ */
/* #7 'google-map-local-seo' — 3 thẻ */
body.t4-trang-google-map-local-seo .t4fx-goi-row > .col.t4fx-goi:nth-child(1) .t4fx-goi-hinh img { object-view-box: inset(-17.015% -48.735% -33.101% -48.544%); }
body.t4-trang-google-map-local-seo .t4fx-goi-row > .col.t4fx-goi:nth-child(2) .t4fx-goi-hinh img { object-view-box: inset(-26.667% -16.836% -2.500% -16.836%); }
body.t4-trang-google-map-local-seo .t4fx-goi-row > .col.t4fx-goi:nth-child(3) .t4fx-goi-hinh img { object-view-box: inset(-22.764% -21.545% 0.000% -21.545%); }

/* [figma] '1036:35616' — Container · 560×327 · trang5·lydo
   (lớp DUY NHẤT rộng 560px trong figma-spec/trang5.json) */
/* ── #5: minh hoạ khối 'ly-do' có KHUNG RIÊNG, không dùng số dùng chung ────
   [phục vụ] phần tử: Image | khối: '#ly-do' (thẻ '[ux_image]' không có lớp)
   [trang] #5 | [figma] 'Asset 16 1'
   [lý do vượt panel] panel Image không đặt được canh trên trong hàng

       Figma #5   **497,65×297** ở (442,7 · 242) — tức CĂN GIỮA ngang trong
                  cột 560 và **CĂN TRÊN** trong hàng cao 327
       Figma #6   506×358 ở (410 · 241) — số dùng chung đang lấy theo bản này
       site #5    506×295,5 ở (410 · 256,7) ⇒ lệch trái 32,7 · thấp 14,7

   14,7 chính là nửa phần dư (327 − 295,5) ÷ 2: hàng đang CĂN GIỮA ảnh theo
   chiều dọc, còn Figma căn TRÊN. Vùng đỏ liền khối 376×216 của chặng 3 là
   chỗ này.
   Khổ 402: Figma **335×200** ở (33,5 · 153) — vẫn căn giữa ngang trong cột
   352 ((352−335)÷2 = 8,5 ✓), nên chỉ cần đặt kích thước.                  */
/* ⛔ HÀNG ẢNH LÀ HÀNG THỨ HAI — hàng thứ nhất là chip nhãn. Bản vá đầu nhắm
   ':first-child' nên bóp cột chip xuống 520 và kéo nó lên 15,7px: đường kẻ
   đứt cạnh chip cụt hẳn một nửa. Dùng lớp '.t4fx-split' của chính hàng ảnh.

   Cột trái Figma rộng **560** (410 → 970), site đang **506** ⇒ ảnh 497,65 căn
   giữa rơi vào x=414,2 thay vì 442,7. Cột phải 520 thì đã đúng sẵn. */
/* ⛔ ĐỪNG kéo CẢ HÀNG lên 15,7px. Đã thử 'margin-top: 80px' cho hàng (số suy
   từ 'Frame 191' ở y=241) — ảnh về đúng chỗ nhưng KÉO THEO cột phải, làm đỏ
   hai mốc '[hộp] Lý do… → Tại sao doanh nghiệp…'. Figma đặt hai cột ở hai
   mốc khác nhau trong cùng hàng: ảnh ở **242**, khối chữ ở **300,5**; hàng
   'align-middle' của site canh giữa cả hai. Nên chỉ dời RIÊNG tấm ảnh. */
/* ⛔ HÀNG RÀO KHỔ MÀN (III.14.2-7 · III.19). Bản cũ để luật 560px TRẦN nên nó
   ăn cả ở khổ 402: cột phồng lên 560 trong hàng 352, '.img' có 'margin: auto'
   nên nuốt (560−335)÷2 = 112,5 ⇒ ảnh nằm ở x=137,5 và mép phải 472,5, tức
   **70px tranh bị khung nhìn 402 cắt mất**. Đo được 24/08/2026. */
@media (min-width: 850px) {
  body.t4-trang-google-merchant-center #content #ly-do .t4fx-split > .col:first-child {
    flex: 0 0 560px; max-width: 560px;
  }
  body.t4-trang-google-merchant-center #content #ly-do .img {
    width: 497.65px; margin-left: auto; margin-right: auto;
  }
  body.t4-trang-google-merchant-center #content #ly-do .img img {
    width: 497.65px; height: 297px; max-width: none;
    /* Dời riêng ảnh lên 15,7 rồi TRẢ LẠI đúng chừng đó ở dưới — nếu không, cột
       ảnh thấp đi 15,7 và cả hàng co lại, kéo mọi thứ bên dưới lên (đã đo: hai
       mốc '[hộp] Lý do…' và 'Figma ipsum → Gần 10 năm' đỏ ~−6px). */
    margin-top: -15.7px; margin-bottom: 15.7px;
  }
}
/* ⛔ ĐÃ GỠ 'object-view-box: inset(5.556% 5.399% 8.732% 5.787%)' — 24/08/2026.
   Tiền đề của nó ("tệp PNG có lề trong suốt quanh tranh") KHÔNG còn đúng với
   tệp đang chạy. Đo lại ba đường, cùng một kết luận:
     • tệp trên host 'google-merchant-center-ly-do-figma.png' = **996×594**,
       bao hình alpha (>32) = (0,0)–(991,592) ⇒ **gần như không có lề**;
     • tải mới node '1036:35618' qua REST @2x ⇒ **996×594, 200.635 byte —
       TRÙNG TỪNG BYTE** với tệp đang chạy;
     • cắt đúng ô của minh hoạ trên bản render CẢ SECTION '712:21307' @2x rồi
       chồng lên tệp đó ⇒ chỉ **0,83 %** điểm khác (nhiễu kết xuất).
   Tức tệp đã đúng bằng khung Figma 497,65×297 và đã là 2× (retina đạt).
   Khi đó 'inset' kia cắt thật vào tranh: 5,556 % trên · 5,399 % phải ·
   8,732 % dưới · 5,787 % trái = **33/32/52/35 điểm ảnh nguồn** ≈ 16,5/16/26/
   17,5 px hiển thị — đúng bốn mép mà 4T báo là "cắt mất nét" (mất đỉnh loa
   góc trên-trái, nửa người mép trái, mép phải nam châm, chân chữ BACKLINKS).
   ⛔ Đừng thêm lại. Trước khi cắt bất kỳ ảnh nào, đo bao hình alpha của CHÍNH
   tệp đang chạy (III.16.3) — đừng tin ghi chú của vòng trước, tệp có thể đã
   được thay từ lúc đó. */
@media (max-width: 849px) {
  body.t4-trang-google-merchant-center #content #ly-do .img { width: 335px; }
  body.t4-trang-google-merchant-center #content #ly-do .img img { width: 335px; height: 200px; }



}

/* ⛔ ĐỪNG kéo khối gạch đầu dòng của #5 lên 2,25px. Cặp mốc này có HAI phép
   so: 'khoang·dy' (đỉnh MỰC) lệch +2,25 còn 'khoang·dy(hộp)' (đỉnh HỘP) thì
   ĐANG ĐÚNG. Kéo cả khối làm mốc thứ nhất xanh và mốc thứ hai đỏ — đổi chỗ
   lỗi chứ không hết lỗi (đã đo cả hai chiều).
   Chênh thật nằm BÊN TRONG khối: mực cách đỉnh hộp 2,25px nhiều hơn Figma
   (nửa khoảng-cách-dòng của dòng đầu). Sửa đúng chỗ là chỉnh 'line-height'
   của '.t4fx-lydo-m', nhưng thế lại động vào 'chu_h' — để lại cho vòng sau. */

/* Tên · chức danh · liên kết trong thẻ casestudy rộng **313**, không phải 471
   như đoạn trích phía trên. Figma khai giống hệt ở cả #4 #5 #6 #7 ('Adam
   Jones' và 'Read full case study' đều 313 tại x=986,01). */
.t4 .t4fx-cs-ten, .t4 .t4fx-cs-chuc, .t4 .t4fx-cs-xem { max-width: 313px; }

/* ⛔ #6 — minh hoạ 'ly-do' khổ 402: ĐÃ THỬ VÀ BỎ 'object-view-box'.
   Tệp PNG 352×248 có nét vẽ 339×234 (lề trong suốt ~6,5px mỗi bên), Figma thì
   nét vẽ 352×237,5 ôm sát khung. Đã tính đúng phần cắt
   'inset(1.277% 1.705% 0.189% 1.989%)' và xác minh 'getComputedStyle' trả về
   cả 'object-fit: fill' lẫn 'object-view-box' — **nhưng render không đổi một
   điểm ảnh**: bao hình mực vẫn (32·216) 339×234 qua bốn lần đẩy.
   Và kể cả cắt được cũng không đủ: tỉ lệ cần bù hai chiều là **1,0383 ngang
   ↔ 1,0150 dọc** — lệch nhau 2,3 %, tức tệp có tỉ lệ khác khung, giống hệt
   trường hợp 'ly-do' của #5. Đã miễn trừ kèm số đo, xin xuất lại tệp. */

/* ══ NÚT HERO KHỔ 402 CỦA #5 — ghi đè riêng, KHÔNG sửa luật gốc ═════════════
   ⛔ RÒ RỈ LIÊN TRANG (III.22). '40-page-xu-ly-loi-sai-google-ads.css:191' khai
   '.t4 .t4fx-nut { width: 271px }' trong '@media ≤849px' mà **không khoá phạm
   vi trang**. '.t4fx-nut' là lớp DÙNG CHUNG của bảy trang, nên bề rộng riêng
   của #4 đè lên tất cả.

   Figma: #4 khai **271**, còn #5 khai **283** cho hai nút 'Tư vấn Google Ads
   tăng trưởng' và 'Tham khảo hệ sinh thái dịch vụ'. Đo được 271 ⇒ 3 mốc ❌
   (2 × 'w' −12px và 1 × 'khoang·dx' +6px) ở 'hero_mb'.

   ⚠ ĐÍNH CHÍNH 20/08: bản đầu chỉ ghi đè cho riêng #5, với lý do "271 đang
   đúng cho sáu trang còn lại vì chúng đều xanh". **Sai** — tôi chỉ kiểm bằng
   BẢNG DÀY, mà hai nút hero của #6 và #7 không nằm trong bảng của chúng, nên
   bảng xanh không chứng minh gì. Đọc thẳng Figma thì cả ba trang nhóm GGM đều
   khai 'Link' **283×44** ở 'hero_mb' (#5 y=459 · #6 y=459 · #7 y=460). Chỉ
   ảnh nhiệt chặng 3b nhìn ra: hai nút của #7 hiện viền đỏ đặc.
   ⇒ Khoá theo lớp NHÓM 't4-nhom-ggm' (đúng ba trang đó), không theo từng trang.
   ⚠ VẪN ghi đè hẹp thay vì khoá lại luật gốc của #4: #4 khai 271 thật, và các
   trang ngoài nhóm ('lien-he', 'tuyen-dung') chưa đo nên chưa biết chúng cần
   gì — khoá luật gốc là thả chúng về '--trang' 185 / '--vien' 265.
   ⚠ Chỉ khổ ≤849: desktop của #5 đã đúng ('hero' 55 ✅ / 0 ❌). */
@media (max-width: 849px) {
  body.t4-nhom-ggm #content .t4fx-nut { width: 283px; }



}

/* ══ 20.9 KHỐI "QUY TRÌNH THỰC HIỆN CỦA 4T" — HÌNH HỌC KHỔ 402 ═════════════
   [phục vụ] phần tử: Row/Col + Image + Text | khối: '#quy-trinh' dải kem
   [trang] #5 google-merchant-center · #6 tracking-do-luong · #7 google-map-local-seo
   [figma] '1113:10449' (#5) · '1113:15310' (#6) · '1113:17863' (#7)
   [lý do vượt panel] panel không đổi được THỨ TỰ giữa hai khổ, và không đặt
   được bề rộng/chiều cao riêng cho khổ 402 của một Image nằm trong cột khác

   ⛔ KHỔ 402 XẾP KHÁC HẲN DESKTOP — đây là lỗi 4T báo ngày 24/08/2026
   ("khoảng cách giữa các phần tử đang không đúng như figma").

       Figma @402                    site @402 (TRƯỚC khi vá)
       ─────────────────────         ─────────────────────────
       chip nhãn                     chip nhãn
       kicker      352×68            kicker      352×68
       ẢNH         352×222           H2          352×86
       H1          352×70            đoạn văn    352×154
       đoạn văn    352×132           ẢNH  497,6×297 ở x=58,7  ⇒ mép phải 556
       khe đều **16** giữa 4 khối                 ⇒ 154px BỊ CẮT

   Ba số đo khác nhau theo trang (đọc từ node ở trên, ĐỪNG suy từ desktop):
       #5 'Asset 16 1'  **335×200**  (căn giữa trong 352 ⇒ lệch trái 8,5)
       #6 'Asset 17 1'  **352×222**
       #7 'Asset 19 1'  **352×246**

   🔑 Dựng bằng 'display: contents' trên cột chữ, KHÔNG nhân đôi phần tử.
   Ảnh nằm ở CỘT khác với kicker/H2/đoạn văn, nên 'order' một mình không chen
   được ảnh vào GIỮA ba khối chữ. Cho cột chữ và '.col-inner' của nó
   'display: contents' thì bốn khối trở thành con trực tiếp của '.t4fx-split'
   và 'order' xếp được đúng thứ tự Figma.
   ⛔ Đừng chữa bằng cách thêm một '[ux_image]' thứ hai mang 't4-only-mobile':
   nó nhân đôi DOM, thêm một ảnh ẩn cho mọi phép kiểm ảnh phải miễn trừ, và
   phải sửa lại trong UX Builder ở CẢ BA trang. Cách này chỉ là CSS.
   ⚠ 'display: contents' xoá HỘP của cột — an toàn ở đây vì hai cột đo được
   'padding: 0' và không có nền/viền ở khổ 402. Thêm nền cho cột sau này thì
   phải bỏ cách này.

   ⚠ CHIP NHÃN: giữ nguyên đệm trên 92px. Figma #5 và #7 đều đặt hàng chip ở
   **92** so với mép section, riêng #6 đặt **32** — mà chính khung #6 @402 là
   khung cũ (chữ H1/đoạn văn còn là Lorem, thẻ giai đoạn còn mang nội dung của
   trang #4, 'Main' dán sát mép trên khác hẳn hai trang kia). Lấy 92 theo hai
   trang nhất quán; đã ghi 'qa/phan-hoi-figma.md'.                          */
@media (max-width: 849px) {
  body.t4-nhom-ggm #content #quy-trinh .t4fx-split > .col:first-child,
  body.t4-nhom-ggm #content #quy-trinh .t4fx-split > .col:first-child > .col-inner {
    display: contents;
  }
  /* Bốn khối cùng chiếm trọn bề ngang 352 của hàng, xếp theo thứ tự Figma. */
  body.t4-nhom-ggm #content #quy-trinh .t4fx-split > .col:first-child .text,
  body.t4-nhom-ggm #content #quy-trinh .t4fx-split > .col:last-child {
    flex: 0 0 100%; max-width: 100%; width: auto;
  }
  /* ⚠ Ba luật 'order' của khối chữ PHẢI cùng dạng '> .col:first-child .text…'.
     Bản đầu viết kicker và đoạn văn ở dạng ngắn '.t4fx-split .t4fx-qt-kicker'
     (2,3,1) nên luật chung cho '.text' (2,5,1) thắng CẢ BA ⇒ ba khối chữ cùng
     'order: 3' và ẢNH (order 2) nhảy lên đầu khối. Đo được trên bản đã đẩy:
     ảnh y=177 · kicker y=377. Đúng bẫy III.19 nhưng ở chiều đặc hiệu. */
  body.t4-nhom-ggm #content #quy-trinh .t4fx-split > .col:first-child .text { order: 3; }
  body.t4-nhom-ggm #content #quy-trinh .t4fx-split > .col:first-child .text.t4fx-qt-kicker { order: 1; }
  body.t4-nhom-ggm #content #quy-trinh .t4fx-split > .col:last-child { order: 2; }
  body.t4-nhom-ggm #content #quy-trinh .t4fx-split > .col:first-child .text.t4fx-chu { order: 4; }

  /* Khe 16 giữa kicker và ảnh. Ba khe còn lại đã đúng 16 sẵn (đo trước khi
     thêm luật này: 16 · 16), nên CHỈ khai khe thiếu — đừng đặt 'gap' đều cho
     hàng, nó sẽ cộng thêm vào ba khe đang đúng. */
  body.t4-nhom-ggm #content #quy-trinh .t4fx-split > .col:last-child { margin-top: 16px; }

  /* Khe chip nhãn → kicker: Figma **56** ở CẢ BA trang (đáy viên chip 129 →
     đỉnh kicker 185). Hàng vốn mang 'margin-top: 28px', và luật này THAY nó
     chứ không cộng vào — nên viết '-28px' làm hàng dịch **56** chứ không phải
     28 (đo được kicker rơi xuống 157). Hiệu chuẩn ba giá trị trên bản chạy:
         mt = −28px → kicker 157   ·   mt = 0 → **185** ✅   ·   mt = 28px → 213
     ⛔ Đừng đọc con số này là "không sửa gì": nó là 0 CÓ CHỦ ĐÍCH, thay cho 28. */
  body.t4-nhom-ggm #content #quy-trinh .t4fx-split { margin-top: 0; }

  /* Cỡ ảnh riêng từng trang — khung Figma, KHÔNG phải số desktop.
     ⚠ '.img' của Flatsome mang sẵn 'margin-top: 4px' (bộ lớp định vị
     '.img.x.y'). Để nguyên thì cột cao 226 thay vì 222 và ảnh tụt 4px, làm
     khe kicker→ảnh thành 20 trong khi hàng vẫn khai đúng 16 — kiểu lệch mà
     nhìn số của HÀNG không thấy, phải soi hộp của chính '.img'. */
  body.t4-nhom-ggm #content #quy-trinh .t4fx-split > .col:last-child .img,
  body.t4-nhom-ggm #content #quy-trinh .t4fx-split > .col:last-child .img-inner,
  body.t4-nhom-ggm #content #quy-trinh .t4fx-split > .col:last-child img {
    width: 352px; max-width: 352px; margin-left: 0; margin-right: 0; margin-top: 0;
  }
  body.t4-nhom-ggm #content #quy-trinh .t4fx-split > .col:last-child img {
    object-fit: contain; display: block;
  }
  /* #5 — 335×200, căn giữa trong 352 (lệch trái 8,5). */
  body.t4-trang-google-merchant-center #content #quy-trinh .t4fx-split > .col:last-child .img,
  body.t4-trang-google-merchant-center #content #quy-trinh .t4fx-split > .col:last-child .img-inner,
  body.t4-trang-google-merchant-center #content #quy-trinh .t4fx-split > .col:last-child img {
    width: 335px; max-width: 335px; height: 200px;
  }
  body.t4-trang-google-merchant-center #content #quy-trinh .t4fx-split > .col:last-child .img {
    margin-left: 8.5px;
  }
  /* #6 — 352×222. */
  body.t4-trang-tracking-do-luong #content #quy-trinh .t4fx-split > .col:last-child .img,
  body.t4-trang-tracking-do-luong #content #quy-trinh .t4fx-split > .col:last-child .img-inner,
  body.t4-trang-tracking-do-luong #content #quy-trinh .t4fx-split > .col:last-child img {
    height: 222px;
  }
  /* #7 — 352×246. */
  body.t4-trang-google-map-local-seo #content #quy-trinh .t4fx-split > .col:last-child .img,
  body.t4-trang-google-map-local-seo #content #quy-trinh .t4fx-split > .col:last-child .img-inner,
  body.t4-trang-google-map-local-seo #content #quy-trinh .t4fx-split > .col:last-child img {
    height: 246px;
  }
}