/* ⤴ DỜI sang cuối 30-components.css (21/08/2026, 4T duyệt) — luật này tạo kiểu cho nhiều trang chứ không riêng trang chủ quản của tệp. */ .t4 .section.t4-only-desktop { display: block; } @media (max-width: 849px) { .t4 .section.t4-only-desktop { display: none; } /* Lề mobile của trang này là 25px mỗi bên (Figma: khung nội dung 352 trong 402). KHÔNG phải 30px như mục 9 — mục 9 lấy từ trang chủ; trang này đo riêng ở 6 section độc lập, tất cả đều ra 352@25. */ /* ⤴ hai luật khung mobile toàn cục đã DỜI sang 10-base.css (20/08/2026) */ } .t4fx-nhan-cam { color: var(--t4-camel); } @media (max-width: 849px) { .t4fx-split > .col:first-child, .t4fx-split > .col:last-child, #mo-ta-dich-vu .t4fx-split > .col:first-child, #mo-ta-dich-vu .t4fx-split > .col:last-child, .t4fx-qt-dai .t4fx-split > .col:first-child, .t4fx-qt-dai .t4fx-split > .col:last-child, #ly-do .t4fx-split > .col:first-child, #ly-do .t4fx-split > .col:last-child { flex: 0 0 100%; max-width: 100%; } } @media (max-width: 849px) { #goi-dich-vu .t4fx-head-2col > .col, #casestudy .t4fx-head-2col > .col { flex: 0 0 100%; max-width: 100%; } .t4fx-head-2col > .col + .col { margin-top: 24px; } } /* -------------------------------------------------------------------------- 11.7 BỐN THẺ GÓI DỊCH VỤ (Figma 712:21930 · mobile 1113:9197) Thẻ 258×400, bo 16, VIỀN 1px rgba(0,0,0,.11) — Figma dùng VIỀN chứ không phải đổ bóng; dựng bằng box-shadow là đậm hơn hẳn thiết kế. -------------------------------------------------------------------------- */ .t4fx-goi-row { margin-top: 64px; } @media (max-width: 849px) { /* Figma mobile: 4 thẻ 258px trong khung 352 ⇒ CUỘN NGANG, không xếp dọc. Xếp dọc làm section cao gấp hơn hai lần thiết kế. */ .t4fx-goi-row { display: flex !important; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-top: 32px; margin-left: 0; margin-right: -25px; max-width: none; } } /* -------------------------------------------------------------------------- 11.8 QUY TRÌNH (Figma 711:16416 · mobile 1113:9242) Dải kem #F8F5EE cao 497 tràn hết bề ngang; khung nội dung 1056 tại x=420. -------------------------------------------------------------------------- */ .t4fx-qt-dai .section-content > .row { max-width: 1086px; } /* 1056+30 */ .t4fx-qt-dai .section-content > .row.row-collapse { max-width: 1056px; } /* ⤴ 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-luu-y h3 { font-family: var(--t4-font-body); font-weight: 700; font-size: 16px; line-height: 22px; color: var(--t4-camel); margin: 0; } .t4fx-sep { border: 0; border-top: 1px solid rgba(0, 0, 0, .11); margin: 9px 0; } .t4fx-gd-muc { list-style: none; margin: 8px 0 0; padding: 0; } .t4fx-gd-muc li { position: relative; padding-left: 22px; margin: 0 0 8px; font-size: 14px; line-height: 22px; color: var(--t4-text); } .t4fx-gd-muc li:last-child { margin-bottom: 0; } .t4fx-gd-muc li::before { content: ""; position: absolute; left: 8px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--t4-camel); } /* ⚠ MỘT dòng, HAI kiểu chữ khác hẳn nhau (styleOverrideTable của Figma): "Chi phí: " Manrope Medium 500 · 14px · #155446 "2.000.000 VNĐ" Manrope ExtraBold 800 · 16px · #458763 Dựng cả dòng ở 700/16 làm chuỗi rộng thêm 8,6px. */ /* Độ đậm GỐC của lớp Figma là 700 (không ký tự nào dùng tới, nhưng bảng đo đọc nó), hai cụm con mới là thứ nhìn thấy: nhãn 500/14, số 800/16. */ .t4fx-gd .t4fx-gd-chi-phi { font-weight: 700; font-size: 16px; line-height: 28px; color: var(--t4-leaf); } .t4fx-gd-chi-phi-nhan { font-weight: 500; font-size: 14px; color: var(--t4-dark-moss); } .t4fx-gd-chi-phi-so { font-weight: 800; } .t4fx-phuong-an { display: grid; grid-template-columns: 215px 215px; gap: 32px; margin-top: 10px; } .t4fx-gd .t4fx-pa-ten { font-weight: 700; color: var(--t4-camel-dark); margin: 0; } /* Năm bước đánh số — CHỈ có ở bản mobile (Figma 1113:9394) */ .t4fx-qt-buoc { list-style: none; margin: 20px 0 0; padding: 0; } .t4fx-qt-buoc > li { display: flex; gap: 11px; } .t4fx-qt-buoc > li + li { margin-top: 16px; } .t4fx-qt-so { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--t4-white); border: 1px solid var(--t4-muted); display: flex; align-items: center; justify-content: center; font-family: var(--t4-font-body); font-weight: 600; font-size: 12px; line-height: 22px; color: #213343; } .t4fx-qt-buoc h4 { font-family: var(--t4-font-body); font-weight: 700; font-size: 14px; line-height: 22px; color: #213343; margin: 0; } .t4fx-qt-buoc p { font-size: 14px; line-height: 22px; color: #000; margin: 7px 0 0; } /* [figma] trang7 · section lydo/quytrinh — 4 lớp rộng 382px: '1211:16199' · '1211:16200' · '1036:29120' … còn 1 (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 7 để chọn) */ @media (max-width: 849px) { .t4fx-qt-dai .section-content > .row { max-width: 382px; } .t4fx-qt-dai .section-content > .row.row-collapse { max-width: 352px; } .t4fx-qt-dai .t4-only-mobile .text + .text { margin-top: 16px; } } .t4fx-ly-do { list-style: none; margin: 33px 0 0; padding: 0; display: grid; grid-template-columns: 498px 498px; justify-content: space-between; gap: 16px 48px; } .t4fx-ly-do li { position: relative; padding-left: 30px; font-size: 16px; line-height: 26px; color: var(--t4-text); } .t4fx-ly-do li::before { content: ""; position: absolute; left: 8px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--t4-camel); } @media (max-width: 849px) { .t4fx-ly-do { grid-template-columns: 1fr; gap: 16px; margin-top: 65px; } /* Figma mobile: mục 14/22, thụt 26px — KHÁC desktop 16/26 */ .t4fx-ly-do li { font-size: 14px; line-height: 22px; padding-left: 26px; } .t4fx-ly-do li::before { top: 8px; } } /* Chữ bọc có chủ đích: bộ ghép chọn phần tử SÂU NHẤT chứa chuỗi. Không có thì nó đo hộp (cao 35, mép 105) trong khi lớp Figma là LỚP CHỮ (cao 19, mép 113) — lệch cứng 5px ở mọi cặp có nút này. */ .t4 .t4fx-xem-tat-ca > span { display: block; line-height: 19.124px; } /* [button] mang sẵn nền/bóng/lề của Flatsome — gỡ hết, giữ đúng Figma. */ /* ⤴ 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. */ @media (max-width: 849px) { .t4 .t4fx-tabs .nav-line::-webkit-scrollbar { display: none; } } /* -------------------------------------------------------------------------- 11.11 CTA CUỐI TRANG (Figma 717:26249 · mobile 1113:9752) Thẻ trắng bo 10 trên nền kem, đệm 40, nút xanh nằm bên PHẢI. ⚠ Figma đặt thẻ ở x=420 rộng 1079 — lệch phải 9,5px so với tâm khung 1900, trong khi mọi section khác đều 1080@410. Đã chốt BÁM ĐÚNG FIGMA (xem qa/danh-sach-danh-doi.md); muốn căn giữa lại thì bỏ margin-left dưới đây. -------------------------------------------------------------------------- */ .t4fx-cta-hop .section-content > .row { max-width: 1079px; margin-left: 420px; margin-right: auto; } @media (max-width: 849px) { .t4fx-cta-hop .section-content > .row { max-width: 352px; margin-left: auto; } } /* (a) BỐN THẺ GÓI — ghim đúng 258px, khe 16px, cao 400 */ .t4fx-goi-row { max-width: 1080px; justify-content: space-between; } /* (a) DẢI KEM QUY TRÌNH — khung 1056 tại x=420, chip cách mép trên 48 */ .t4fx-qt-dai .section-content > .row { max-width: 1056px; } .t4fx-qt-dai .section-content > .row.row-collapse { max-width: 1056px; } /* ⤴ 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. */ /* (c) Flatsome cho
  • sẵn margin-left 20.8px — gỡ ở mọi danh sách tự vẽ */ .t4fx-ly-do li, .t4fx-gd-muc li, .t4fx-qt-buoc > li { margin-left: 0; } @media (max-width: 849px) { .t4fx-goi-row, .t4fx-head-2col, .t4fx-split { max-width: 352px; } /* '.t4fx-tabs' dời sang 30-components */ .t4fx-goi-row { max-width: none; } /* '.t4fx-qt-dai .t4fx-split' dời sang 30-components (đợt C) */ .t4fx-qt-dai .section-content > .row, .t4fx-qt-dai .section-content > .row.row-collapse { max-width: 352px; } } /* Thẻ gói: desktop bo 16 chỉ viền; mobile bo 10 + viền + đổ bóng 3/3/8 @25% */ @media (max-width: 849px) { /* Khung nội dung mobile: 352 tại x=25 — ghim đủ độ ưu tiên, và bỏ đệm cột */ .t4 .section-content > .row.t4fx-split, .t4 .section-content > .row.t4fx-head-2col, .t4 .section-content > .row.t4fx-nhan-hang, .t4 .t4fx-qt-dai .section-content > .row, .t4 .t4fx-qt-dai .section-content > .row.t4fx-split, .t4 .t4fx-cta-hop .section-content > .row { max-width: 352px; margin-left: auto; } /* ⤴ '.t4 .section-content > .row > .col' đã DỜI sang 10-base.css */ /* Figma mobile của khối "Các gói dịch vụ": H2 GIỮ NGUYÊN 40/53.32, không co xuống 32 như H2 mobile mặc định của site. */ /* ⚠ CHỈ trang #4: Figma của nó giữ H2 40px ở mobile. Ba trang GG Marketing dùng chung id #goi-dich-vu nhưng Figma cho 32px — không khoá theo slug là đè nhầm sang cả ba. */ body.t4-trang-xu-ly-loi-sai-google-ads #goi-dich-vu .t4fx-head-2col h2 { font-size: 40px; line-height: 53px; } /* Cột chữ mobile phải bỏ bề rộng ghim của desktop */ .t4 .section-content > .row.t4fx-split > .col { flex: 0 0 100%; max-width: 100%; } } /* Flatsome đặt margin-left 20.8px cho MỌI
  • — nâng độ ưu tiên mới gỡ được */ .t4 .section-content .t4fx-ly-do li, .t4 .section-content .t4fx-gd-muc li, .t4 .section-content .t4fx-qt-buoc > li { margin-left: 0; list-style: none; } @media (max-width: 849px) { /* Khung nội dung mobile: ghim WIDTH chứ không chỉ max-width */ .t4 .section-content > .row.t4fx-split, .t4 .section-content > .row.t4fx-head-2col, .t4 .section-content > .row.t4fx-nhan-hang, .t4 .t4fx-qt-dai .section-content > .row, .t4 .t4fx-qt-dai .section-content > .row.t4fx-split, .t4 .t4fx-cta-hop .section-content > .row { width: 352px; max-width: 352px; } .t4 .section-content > .row.t4fx-split > .col, .t4 .section-content > .row.t4fx-head-2col > .col { width: 100%; } } /* -------------------------------------------------------------------------- 11.16 ⛔ FLATSOME ĐẶT 'padding: 0 30px' CHO .section Ở MOBILE Đo được: '.section' ở khổ 402 có 'padding: 48px 30px' — 48 là của tham số 'padding__sm', còn **30px hai bên là của Flatsome**. Hệ quả: '.section-content' chỉ còn **342px tại x=30**, nên mọi 'max-width: 352px' viết cho hàng đều bị bó lại và lệch đúng 5px, ở TOÀN BỘ section mobile. Figma quy định khung nội dung mobile là **352 tại x=25** → gỡ đệm ngang của section, để hàng tự căn giữa trong 402. ⚠ Đừng chữa bằng cách hạ max-width xuống 342: làm vậy là chép lại con số sai của Flatsome vào thiết kế, và lề trái/phải thành 30 thay vì 25. -------------------------------------------------------------------------- */ /* Danh sách lý do: hai cột 498 đặt SÁT NHAU cách 48 (Figma 410 và 956), KHÔNG dàn đều hết 1080 — dàn đều thì cột phải rơi vào 992. */ .t4fx-ly-do { justify-content: start; } /* Hộp lưu ý: Figma đệm trên 28 (thẻ giai đoạn là 24) */ /* ⤴ 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. */ @media (max-width: 849px) { /* Hero mobile canh TỪ MÉP TRÊN (Figma: chữ bắt đầu y=82 trong hero 650, chừa dưới 88 — không đối xứng nên căn giữa là sai 2,5px) */ .t4fx-hero { justify-content: flex-start; } .t4fx-qt-anh-mb { width: 352px; margin: 0 auto; } /* Gỡ bề rộng ghim của desktop — bản mobile phải mang ID mới thắng */ #goi-dich-vu .t4fx-head-2col > .col:first-child, #goi-dich-vu .t4fx-head-2col > .col:last-child, #casestudy .t4fx-head-2col > .col:first-child, #casestudy .t4fx-head-2col > .col:last-child, #mo-ta-dich-vu .t4fx-split > .col:first-child, #mo-ta-dich-vu .t4fx-split > .col:last-child, #ly-do .t4fx-split > .col:first-child, #ly-do .t4fx-split > .col:last-child { flex: 0 0 100%; max-width: 100%; width: 100%; } .t4fx-qt-buoc h4 { padding-right: 4px; } } /* (c) khoảng cách hộp "Lưu ý" */ .t4 .section-content .text.t4fx-luu-y { margin-top: 24px; } @media (max-width: 849px) { /* Hero mobile: căn giữa như cũ, chỉ kéo lên 3px cho khớp Figma (chữ bắt đầu y=82, chừa dưới 88 — lệch 6px nên tâm lệch 3px). */ .t4fx-hero { justify-content: center; } /* Minh hoạ quy trình mobile: Figma dành sẵn ô 352×328 cho nó */ .t4fx-qt-anh-mb { height: 328px; display: flex; align-items: center; } .t4fx-qt-anh-mb .img-inner { width: 100%; } } /* (c) mục danh sách giữ chiều cao tự nhiên */ .t4fx-ly-do { align-items: start; } @media (max-width: 849px) { /* (d) tiêu đề bước rộng đúng 311 */ .t4fx-qt-buoc h4 { width: 311px; padding-right: 0; } #ly-do .t4fx-split .img { height: 258px; } #ly-do .t4fx-split .img-inner { height: 100%; } #ly-do .t4fx-split .img img { height: 100%; object-fit: contain; } } /* -------------------------------------------------------------------------- 11.21 VÁ VÒNG TÁM — ba chỗ cuối (a) 'scroll-snap-type: x mandatory' KÉO thẻ đầu về sát mép cuộn, nuốt luôn 'margin-left'/'padding-left' của băng thẻ: thẻ 1 có margin-left 25px nhưng vẫn nằm ở x=0. Phải khai 'scroll-padding-left' thì điểm neo mới lùi theo. Đây là hành vi đúng chuẩn của scroll-snap, không phải lỗi. (b) '
  • ' của Flatsome còn 'margin-bottom' ~9px, cộng vào 'gap: 16px' của lưới thành 25 — danh sách Lý do dôi 92px so với Figma. (c) Cách đoạn của Figma KHÁC NHAU giữa hai khổ: khối Mô tả dịch vụ là 5px ở desktop nhưng ~16px ở mobile (đo ngược từ chiều cao khối). -------------------------------------------------------------------------- */ /* (b) gỡ hết margin mặc định của mục danh sách */ .t4 .section-content .t4fx-ly-do li { margin: 0; } @media (max-width: 849px) { /* Lý do mobile: Figma chừa 24px giữa minh hoạ và tiêu đề */ #ly-do .t4fx-split > .col + .col { margin-top: 24px; } } @media (max-width: 849px) { /* Figma: đoạn mô tả kết thúc y=865, danh sách bước bắt đầu y=936 */ .t4fx-qt-buoc { margin-top: 55px; } /* Badge số bước dùng Lexend Deca đúng như Figma (nạp bản chỉ có 5 chữ số, xem functions.php). Trước đây đổi sang Manrope vì tưởng là font lạc. */ .t4fx-qt-so { font-family: 'Lexend Deca', var(--t4-font-body); } } /* [phục vụ] các đoạn Figma khai 'can_ngang: "JUSTIFIED"' ------------------- ⛔ Bảng dày KHÔNG kiểm kiểu căn lề, dù spec CÓ ghi nó ('text.can_ngang'). Vì vậy bốn đoạn này căn trái suốt trong khi Figma căn đều — bảng vẫn báo 0 ❌ vì hộp chữ và chiều cao khối trùng khít; chỉ ảnh nhiệt mới lộ ra, dưới dạng "chữ chồng đôi lệch dần về cuối dòng". Đo được trước khi sửa: dòng 1 đoạn Mô tả hụt 43px so với mép phải Figma, đoạn "4T tiến hành kiểm tra" hụt 40px. */ .t4 .t4fx-deu { text-align: justify; } /* ⛔ Nền dải Quy trình KHÁC NHAU giữa hai khổ: Figma desktop #F8F5EE nhưng Figma mobile #FCFBF6. Section chỉ khai được MỘT 'bg_color' nên khổ mobile phải sửa bằng CSS. Đầu dò màu của so-anh bắt được (ΔE 2,34 — ngay trên ngưỡng mắt 2,3); bảng dày mù vì nó không đo nền section. */ /* KHỐI "GIAI ĐOẠN" DỰNG BẰNG PHẦN TỬ FLATSOME (T0) ------------------------- [phục vụ] .t4fx-qt-duoi — thay MỘT [ux_text] gộp

    +
    +

    +

      bằng chuỗi ô văn bản + [divider], theo nấc "row/col" của thang leo III.3a. ⛔ Viền · bo góc · đệm · min-height PHẢI chuyển lên CỘT: chúng vốn nằm trên '.t4fx-gd' — là cái HỘP, không phải chữ. Để nguyên trên ô văn bản thì sau khi tách, MỖI ô tự vẽ một khung viền riêng. ⛔ '[divider]' không nhận 'class' — bám '.is-divider' Flatsome tự sinh. */ .t4 .t4fx-gd-luoi:not(.t4fx-gd-don) > .col.t4fx-gd-o { border: 1px solid rgba(0, 0, 0, .11); border-radius: 10px; /* ⚠ Figma đo toạ độ từ MÉP NGOÀI khối, tức đã gồm viền 1px: chữ ở y=24 so với khối ⇒ đệm phải là 23, không phải 24. Cùng lẽ đó, đệm ngang 27 cho ra bề rộng chữ 462 đúng Figma (518 − 2 viền − 54). */ padding: 23px 27px; min-height: 355px; } .t4 .t4fx-gd-luoi:not(.t4fx-gd-don) .t4fx-gd-o > .col-inner { height: 100%; } .t4 .t4fx-gd-luoi:not(.t4fx-gd-don) .t4fx-gd-o .t4fx-gd-td h3 { font-family: var(--t4-font-body); font-weight: 700; font-size: 16px; line-height: 26px; color: var(--t4-dark-moss); margin: 0; } /* kẻ ngang — hai khe TRÊN khác nhau, lấy thẳng từ Figma: · kẻ NGAY SAU tiêu đề: h3 đáy 611 → Separator y=627 ⇒ 16px · kẻ về sau: mục đáy 822 → Separator y=830 ⇒ 8px Khe DƯỚI đều 9px (Separator 830 → "Chi phí" 839). ⛔ Không dùng ':first-of-type' — mọi phần tử trong '.col-inner' đều là
      nên nó trỏ vào ô tiêu đề chứ không phải kẻ. */ .t4 .t4fx-gd-luoi:not(.t4fx-gd-don) .t4fx-gd-o .is-divider { margin: 8px 0 9px; width: 100%; height: 1px; background: none; border-top: 1px solid rgba(0, 0, 0, .11); } .t4 .t4fx-gd-luoi:not(.t4fx-gd-don) .t4fx-gd-o .text.t4fx-gd-td + .is-divider { margin-top: 16px; } .t4 .section .section-content .text.t4fx-gd-p { margin: 0; } .t4 .section .section-content .text.t4fx-gd-tiep { margin-top: 8px; } .t4 .t4fx-gd-p p { font-size: 14px; line-height: 22px; color: #000; margin: 0; } /* mục danh sách: chấm tròn camel, thụt 22px — khai lại đúng thứ
        mang hộ */ .t4 .section .section-content .text.t4fx-gd-muc-m { position: relative; margin: 0; padding-left: 22px; font-size: 14px; line-height: 22px; color: var(--t4-text); } .t4 .section .section-content .text.t4fx-gd-muc-m + .text.t4fx-gd-muc-m { margin-top: 8px; } .t4 .section .section-content .text.t4fx-gd-muc-dau { margin-top: 8px; } .t4 .text.t4fx-gd-muc-m > p { margin: 0; font: inherit; color: inherit; } .t4 .text.t4fx-gd-muc-m::before { content: ""; position: absolute; left: 8px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--t4-camel); } /* ⚠ MỘT dòng HAI kiểu chữ (styleOverrideTable của Figma): nhãn "Chi phí: " Manrope Medium 500/14 #155446, số "2.000.000 VNĐ" ExtraBold 800/16 #458763. III.2 không cho tự đặt lớp ⇒ dùng cho cụm số. */ .t4 .section .section-content .text.t4fx-gd-cp { margin: 0; } .t4 .t4fx-gd-cp p { font-weight: 700; font-size: 16px; line-height: 28px; color: var(--t4-leaf); margin: 0; } .t4 .t4fx-gd-cp strong { font-weight: 500; font-size: 14px; color: var(--t4-dark-moss); } /* Hai phương án của Giai đoạn 2: lưới 2 cột 215+215 khe 32 chuyển từ
        lên [row_inner]/[col_inner]. */ .t4 .t4fx-gd-luoi:not(.t4fx-gd-don) .t4fx-gd-o .row.t4fx-pa-hang { margin: 10px 0 0; max-width: none; width: 100%; display: flex; flex-wrap: nowrap; gap: 32px; } .t4 .t4fx-gd-luoi:not(.t4fx-gd-don) .t4fx-gd-o .row.t4fx-pa-hang > .col.t4fx-pa-o { flex: 0 0 215px; max-width: 215px; padding: 0; } .t4 .section .section-content .text.t4fx-pa-ten-o { margin: 0; } .t4 .section .section-content .text.t4fx-pa-mo { margin: 8px 0 0; } .t4 .t4fx-pa-ten-o p { margin: 0; font-size: 14px; line-height: 22px; font-weight: 700; color: var(--t4-camel-dark); } .t4 .t4fx-pa-mo p { margin: 0; font-size: 14px; line-height: 22px; color: var(--t4-text); } /* Khối "Lưu ý" — cùng mô-típ hộp có viền, số lấy từ Figma: Frame y=915 h=185 · "Lưu ý:" y=943 (đệm 27 + viền 1) · Separator y=981 (khe trên 16) · mục đầu y=990 (kẻ + 9) · mục cách nhau 30 = 22 + 8. */ .t4 .t4fx-qt-duoi > .section-content > .row > .col.t4fx-luu-y-o { border: 1px solid rgba(0, 0, 0, .11); border-radius: 10px; padding: 27px; min-height: 185px; margin-top: 24px; } .t4 .section .section-content .text.t4fx-luu-y-td { margin: 0; } .t4 .t4fx-luu-y-td h3 { font-family: var(--t4-font-body); font-weight: 700; font-size: 16px; line-height: 22px; color: var(--t4-camel); margin: 0; } .t4 .t4fx-luu-y-o .is-divider { margin: 16px 0 9px; width: 100%; height: 1px; background: none; border-top: 1px solid rgba(0, 0, 0, .11); } /* mục ĐẦU nằm ngay sau kẻ nên không cộng thêm lề — khác khối Giai đoạn, ở đó mục đầu đứng sau một đoạn văn. */ .t4 .t4fx-luu-y-o .is-divider + .text.t4fx-gd-muc-m { margin-top: 0; } /* NĂM BƯỚC QUY TRÌNH DỰNG BẰNG PHẦN TỬ FLATSOME (T0) ----------------------- [phục vụ] .t4fx-qt-duoi — thay
        1. +
          bằng [row_inner] với hai [col_inner]: badge số và khối chữ. Số Figma (khổ 402): badge x=34 w=7 (ô tròn 26) · tiêu đề x=62 w=311 · mô tả x=62 w=291 · bước cách nhau 16 · khối bắt đầu cách đoạn trên 55. */ .t4 .row.t4fx-buoc { display: flex; flex-wrap: nowrap; max-width: none; width: 100%; margin: 0; padding: 0; } .t4 .row.t4fx-buoc + .row.t4fx-buoc { margin-top: 16px; } .t4 .row.t4fx-buoc.t4fx-buoc-dau { margin-top: 20px; } .t4 .row.t4fx-buoc > .col.t4fx-buoc-so-o { flex: 0 0 25px; max-width: 25px; padding: 0; } .t4 .row.t4fx-buoc > .col.t4fx-buoc-chu { flex: 1 1 auto; max-width: none; padding: 0 0 0 12px; } /* badge tròn — trước là , nay là ô văn bản nên khai lại cả hộp */ .t4 .section .section-content .text.t4fx-buoc-so { /* Figma: Background+Border 25×24 ⇒ bo góc 12, KHÔNG phải 13 (26/2). */ width: 25px; height: 24px; border-radius: 12px; margin: 0; background: var(--t4-white); border: 1px solid var(--t4-muted); display: flex; align-items: center; justify-content: center; } .t4 .t4fx-buoc-so p { margin: 0; font-family: var(--t4-font-body); font-weight: 600; font-size: 12px; line-height: 22px; color: #213343; } .t4 .section .section-content .text.t4fx-buoc-td, .t4 .section .section-content .text.t4fx-buoc-mo { margin: 0; } /* ⚠ ':is(h3, h4)' CÓ DẤU CÁCH — năm tiêu đề bước đổi h4 → h3 để hết nhảy cấp h2 → h4 (C4 phiếu rà soát 20/08). Viết dính liền '.t4fx-buoc-td:is(...)' là bộ chọn HỢP, khớp rỗng và mất sạch kiểu — bài học commit 5cf1a81. */ .t4 .t4fx-buoc-td :is(h3, h4) { margin: 0; font-family: var(--t4-font-body); font-weight: 700; font-size: 14px; line-height: 22px; color: #213343; } .t4 .section .section-content .text.t4fx-buoc-mo { margin-top: 7px; } /* Figma: tiêu đề rộng 311, mô tả rộng 291 — hai bề rộng KHÁC nhau trong cùng một cột, nên phải khai riêng cho ô mô tả. */ .t4 .t4fx-buoc-mo p { margin: 0; width: 291px; font-size: 14px; line-height: 22px; color: #000; } @media (max-width: 849px) { /* Figma: đoạn mô tả kết thúc y=865, bước ĐẦU y=936 ⇒ khe 71px. ⛔ Không dùng ':first-of-type' — mọi phần tử trong '.col-inner' đều là
          nên nó không trỏ vào hàng bước; phải đánh dấu bằng lớp riêng. */ .t4 .row.t4fx-buoc.t4fx-buoc-dau { margin-top: 71px; } .t4 .t4fx-buoc-so p { font-family: 'Lexend Deca', var(--t4-font-body); } .t4 .t4fx-buoc-td :is(h3, h4) { width: 311px; } } @media (max-width: 849px) { /* Hàng ba thẻ casestudy: Figma đặt ở y=421, khối tiêu đề của trang #4 kết thúc ở 389 ⇒ lề 32. Luật dùng chung ở 44-nhom-ggm khai 83 vì khối tiêu đề bên trang #5 thấp hơn — bọc theo trang để hai bên cùng đúng. */ .t4.t4-trang-xu-ly-loi-sai-google-ads .section .section-content > .row.t4fx-csmb { margin-top: 32px; } }