', nên 'div'
đầu tiên là '.t4fx-goi-nhan' và luật ấy KHÔNG BAO GIỜ chạy. Bước đầu dùng
lớp riêng 't4fx-goi-buoc1' (bộ sinh phát sẵn) — đặt ở §22.1 phía dưới. */
/* --- 17.9 Khối 'ly-do' — chữ TRÁI 528 · minh hoạ PHẢI 506 ----------------
[phục vụ] phần tử: Row · Col · Text | [trang] dich-vu-google-marketing
[figma] '31:104' → 'Frame 162' khe 89 · 'Frame 163' 528 · 'Asset 21 1' 506
[lý do vượt panel] span 1/12 không ra 528 hay 506
hàng chữ+ảnh chữ **528** ở x=410 · ảnh **506×371** ở x=984 ⇒ khe **46**
tiêu đề lớn khối 810 ở x=545, chữ 563 căn giữa
gạch đầu dòng hai cột **504**, khe 42 (440 → 986) */
/* Figma 'Frame 162' (hàng minh hoạ) cao ĐÚNG 371 — bằng cột ảnh, không có đệm
đáy. Site thừa 32 do đệm đáy mặc định của .row, và trước 21/08 nó bị che vì
ảnh khi ấy là ảnh KÊ TẠM chỉ cao 330 (371−330 = 41 ≈ 32 + phần lẻ). Hai lỗi
triệt tiêu nhau nên chiều cao section từng khớp 2189 một cách TÌNH CỜ. */
#content .t4fx-ld .t4fx-split { flex-wrap: nowrap; padding-bottom: 0; }
#content .t4fx-ld .t4fx-split > .col.t4fx-ld-chu { flex: 0 0 528px; max-width: 528px; }
#content .t4fx-ld .t4fx-split > .col.t4fx-ld-anh {
flex: 0 0 506px; max-width: 506px; margin-left: 46px;
}
#content .t4fx-ld .t4fx-ld-hinh img { width: 506px; height: 371px; max-width: none; }
:where(.t4-trang-dich-vu-google-marketing) #content .t4fx-ld .t4fx-lydo-o > .col-inner {
display: grid; grid-template-columns: 504px 504px; column-gap: 42px;
}
@media (max-width: 849px) {
/* Hàng 2 khổ 402: tiêu đề thẻ **16px** (desktop 20) — Figma khai riêng. */
#content .t4fx-ct-luoi2 .t4fx-ct-ten h3 { font-size: 16px; line-height: 25px; }
/* Chữ khối tiêu đề không được rộng quá lòng container 352. */
#content .t4fx-ct .t4fx-head-2col .t4fx-h2 h2,
#content .t4fx-ct .t4fx-head-2col .t4fx-dan p,
#content .t4fx-goi-sec .t4fx-head-2col .t4fx-h2 h2,
#content .t4fx-goi-sec .t4fx-head-2col .t4fx-dan p,
#content .t4fx-dk .t4fx-head-2col .t4fx-h2 h2,
#content .t4fx-dk .t4fx-head-2col .t4fx-dan p { max-width: 352px; }
}
/* ── 17.10 · Băng trượt 'dvkhac' — 7 thẻ MỘT HÀNG, không xuống dòng ────────
[phục vụ] '.t4fx-dk-truot' · [trang] #3 dich-vu-google-marketing
[figma] '320:1468' → Container 1061 ôm 7 thẻ 335 tại x = 432 · 795 · 1158 …
(khe 28); chỉ ~3 thẻ lọt khung, phần còn lại bị cắt.
[lý do vượt panel] '.row' của Flatsome là 'flex-flow: row wrap', nên 7 cột
335px trong lòng 1044 TỰ XUỐNG DÒNG — mỗi thẻ chiếm trọn bề ngang, ảnh nở
287 → 1044 và mọi mốc 'khoang·dx' của khối về 0. Panel không có ô nào tắt
ngắt dòng của một '[row]'. */
/* ⛔ 22/08 — '.t4fx-dk-truot' KHÔNG PHẢI '.row', nên luật căn giữa
'.t4fx-dk .section-content > .row { max-width:1044px; margin:auto }'
(đầu tệp, dùng chung cho các hàng khác trong section này) KHÔNG BAO GIỜ
khớp nó — '[ux_slider]' Flatsome tự sinh ra `.slider-wrapper`, không sinh
`.row`. Hệ quả đo được: '.t4fx-dk-truot' rộng ĐÚNG BẰNG '.section-content'
(1905px, sát mép trái) thay vì căn giữa 1044px — cả bảy thẻ dạt hẳn sang
trái, lệch ~430px so với Figma (thẻ 1 tại x=432 · x=795 · x=1158…, xem
chú thích 17.10 ngay dưới). Ảnh nhiệt báo ❌ ở ĐÚNG VỊ TRÍ ảnh vì lý do
này — không phải sai ảnh, `qa/phan-hoi-figma.md` §48 đã đối chiếu từng
thẻ theo tiêu đề rồi mới kết luận. */
#content .t4fx-dk .t4fx-dk-truot { max-width: 1044px; margin-left: auto; margin-right: auto; }
/* [phục vụ] '.t4fx-dk-truot .slider' · [trang] #3 dich-vu-google-marketing
⛔ VÁ 23/08/2026 — '[ux_slider]' của Flatsome xuất `data-flickity-options`
với 'prevNextButtons:true'. Đo lần đầu (vài giây) tưởng thư viện chết hẳn
('flickity-enabled' không lên) — SAI, đo lại kỹ hơn thì Flickity CÓ chạy,
chỉ RẤT CHẬM: options khai cả 'imagesLoaded:true' lẫn 'lazyLoad:1', đụng
độ với `loading="lazy"` nguyên sinh của bảy ảnh thẻ, nên nó treo lửng lơ
chờ ảnh tới khi nào ảnh thật sự lọt khung nhìn. Với 'overflow:hidden' cũ,
hệ quả thật trong lúc chờ là bảy thẻ hoàn toàn không vuốt được, không kéo
được — chỉ thẻ 1 hiện ra, sáu thẻ còn lại vô hình; và nếu Flickity CUỐI
CÙNG cũng bật (đã thấy thật xảy ra), nó bọc lại DOM thành
'.flickity-viewport' + 'transform: translateX()', phá vỡ đúng cơ chế cuộn
nguyên sinh bên dưới. → 'trang-dich-vu.js' vì vậy CHỦ ĐỘNG THÁO
'data-flickity-options' ngay khi script chạy, không đợi Flickity tự quyết,
không sửa 'flatsome.js' (file theme cha, cấm theo III.4.4). Thay bằng cuộn
ngang NGUYÊN SINH của trình duyệt — 'overflow-x:auto' tự cho vuốt/kéo trên
cả cảm ứng lẫn chuột, không cần JS mô phỏng kéo. JS chỉ còn việc gọi
'scrollBy()' tự viết cho ba nút — đúng mẫu đã dùng cho '.t4fx-csmb' (17.9).
⛔ ĐÃ THỬ 'scroll-snap-type: x proximity' rồi GỠ — đo tay trên site thật:
bật snap thì `element.scrollLeft = X` / `scrollBy()` KHÔNG hề đổi giá trị,
dù `scrollWidth` > `clientWidth` đúng và không có gì khác chặn (đã loại
trừ overflow của tổ tiên, style nội tuyến, listener). Tắt riêng
'scroll-snap-type' (giữ nguyên mọi thứ khác) thì scroll chạy lại ngay lập
tức — tách được đúng một biến. Vì nút bấm mới là đường điều hướng CHÍNH
(III.5b không đòi phải có snap), thà mất hiệu ứng "dính khung" khi vuốt
tay còn hơn mất khả năng cuộn bằng nút — không đánh đổi ngược lại. */
#content .t4fx-dk-truot .slider {
display: flex; flex-wrap: nowrap;
overflow-x: auto; overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; -ms-overflow-style: none;
}
#content .t4fx-dk-truot .slider::-webkit-scrollbar { display: none; height: 0; }
#content .t4fx-dk-truot .slider .col.t4fx-dk-the {
height: 608px;
/* 'width' chứ không chỉ 'flex' — khi flickity đã khởi động nó đặt ô về
'position:absolute', lúc đó 'flex-basis' vô nghĩa còn 'width' vẫn ăn. */
width: 335px; flex: 0 0 335px; max-width: 335px; margin-right: 28px;
}
#content .t4fx-dk-truot .slider .col.t4fx-dk-the + .col.t4fx-dk-the { margin-left: 0; }
#content .t4fx-dk-truot .slider .col.t4fx-dk-the:first-child { margin-left: 4px; }
/* Ruột thẻ — Figma đo từ mép thẻ: ảnh (24,24) 287×260 · tiêu đề y=300 ·
mô tả y=344 · gạch ngang y=551 (KHÔNG có màu nền ⇒ không vẽ viền) ·
dòng «Xem chi tiết» căn GIỮA, y=564. */
/* «Xem chi tiết» là một hộp RIÊNG 103×24 bo 3, căn giữa thẻ (Figma 'Link'
tại x = 116 trong lòng 287 ⇒ (287−103)/2). Để nó là khối tràn ngang thì
phép đo '[hộp]' leo lên tận thẻ và báo 335×659. */
/* ⛔ VÁ 24/08/2026 — HỘP «Xem chi tiết» LÀ MỘT HÀNG NGANG, KHÔNG PHẢI CHỮ CĂN
GIỮA. Đọc thẳng thuộc tính auto-layout của node 'Link' trong figma-cache
(giống hệt ở MỌI thẻ và CẢ HAI khổ):
layoutMode HORIZONTAL · layoutSizingHorizontal HUG
padding **2** trên/dưới · **8** trái/phải · itemSpacing (khe) **8**
counterAxisAlignItems CENTER · cornerRadius **3**
⇒ tính từ mép trái hộp: chữ **8 → 73** (lớp chữ w = 65) · khe **8** ·
mũi tên **81 → 95** · đệm phải 8 ⇒ tổng 8+65+8+14+8 = **103**. Con số
103 không phải bề rộng khai tay, nó là HỆ QUẢ của hàng ngang này.
Bản trước khai 'text-align: center' cho chữ và neo mũi tên tuyệt đối ở
'left: 81px'. Chữ căn giữa trong hộp 103 rơi vào **19,06 → 83,92** (đo
Playwright trên site thật, cả 6 thẻ, cả hai khổ) — tức ĐÈ LÊN mũi tên
**2,92px**, đúng chỗ 4T nhìn thấy chữ dính mũi tên. Bề rộng chữ KHÔNG phải
thủ phạm: site vẽ 64,86 so với Figma 65 — chênh 0,14. Thủ phạm là kiểu căn.
⚠ Lần vá trước kết luận "khe thống nhất −3px ở mọi thẻ" là ĐẠT — sai:
khe ÂM nghĩa là VẪN ĐANG ĐÈ 3px, chỉ đè đều nhau thôi.
Nay dựng đúng cấu trúc Figma bằng flex; khe 8px do 'column-gap' bảo đảm,
'space-between' ghim mũi tên đúng 81 (103 − 8 đệm − 14 mũi tên). Hộp đi
đâu mũi tên theo đó, không phụ thuộc bề rộng lòng thẻ (287 hay 304).
⚠ 'align-items: center' cho ra ĐÚNG số Figma theo chiều dọc: chữ (cao
16,392) tại 3,8 ↔ Figma 4; mũi tên (14) tại 5 ↔ Figma 5. Vì vậy bỏ
'padding-top: 4px' cũ — nó là cách bù tay cho bố cục khối, nay thừa. */
#content .t4fx-dk-the .t4fx-dk-xem {
box-sizing: border-box;
width: 103px; height: 24px; margin: 86px auto 0;
border-radius: 3px; background: #fff;
display: flex; align-items: center; justify-content: space-between;
column-gap: 8px; padding-left: 8px; padding-right: 8px;
}
#content .t4fx-dk-the .t4fx-dk-xem p { line-height: 16.392px; margin: 0; }
/* ── 17.11 · Khối 11 lý do — LƯỚI HAI CỘT, không phải một cột ──────────────
[phục vụ] '.t4fx-lydo-o' · [trang] #3 dich-vu-google-marketing
[figma] '320:1470' → 11 mục 504px ở HAI cột x = 440 và 986 (khe ngang 42);
hàng tại y = 821 · 889 · 983 · 1051 · 1119 · 1187, mỗi hàng cao
bằng mục cao nhất + **16** ⇒ khe dọc 16.
[lý do vượt panel] Panel chỉ chia cột bằng span 1/12 cho '[col]'; ở đây 11
'[ux_text]' nằm CHUNG một cột và phải tự xuống dòng theo cặp. Không có ô
nào của UX Builder bật 'flex-wrap' cho ruột một cột. */
:where(.t4-trang-dich-vu-google-marketing) #content .t4fx-ld .t4fx-lydo-o { padding-left: 0; padding-right: 0; }
:where(.t4-trang-dich-vu-google-marketing) #content .t4fx-lydo-o > .col-inner {
display: flex; flex-wrap: wrap; align-items: flex-start;
column-gap: 42px; row-gap: 16px;
}
:where(.t4-trang-dich-vu-google-marketing) #content .t4fx-lydo-o .t4fx-lydo-m {
width: 504px; max-width: 504px; margin: 0;
}
/* Minh hoạ khối «Là đối tác triển khai» — Figma 'Asset 21 1' **506×371**, bo 4.
⚠ Số cũ 503×330 là số của ẢNH KÊ TẠM (hero trang google-map-local-seo) từng
nằm ở đây; với ảnh chụp thì `cover` cắt bớt là chấp nhận được. Ảnh THẬT là
HÌNH MINH HOẠ (`dvgm-lydo-doi-tac`, 1012×742 = đúng 2× Figma) — cắt hình vẽ
là mất nội dung, nên phải đúng khung Figma. Tỉ lệ khít tuyệt đối:
1012/742 = 506/371 = 1,3639 ⇒ `cover` không cắt và không méo. */
/* ⛔ bo góc 0, KHÔNG phải 4. Số 4 cũ là của lớp Figma 'Unipart-1.png' — mốc
ảnh khi đó ghép SAI vùng nên bảng so nhầm sang đó. Lớp đúng là 'Asset 21 1'
(1319:9293), bo góc 0. Lô PAGE3-IMG-FIX. */
#content .t4fx-ld .t4fx-ld-hinh img {
width: 506px; height: 371px; object-fit: cover; border-radius: 0;
}
@media (max-width: 849px) {
/* Khổ 402 chỉ đủ MỘT cột — lưới hai cột của 17.11 phải tắt, nếu không
11 mục 504px tràn khỏi khung 352 và mọi mốc của 'lydothan_mb' lệch. */
:where(.t4-trang-dich-vu-google-marketing) #content .t4fx-lydo-o > .col-inner { display: block; }
:where(.t4-trang-dich-vu-google-marketing) #content .t4fx-lydo-o .t4fx-lydo-m { width: auto; max-width: none; }
:where(.t4-trang-dich-vu-google-marketing) #content .t4fx-lydo-o .t4fx-lydo-m + .t4fx-lydo-m { margin-top: 16px; }
#content .t4fx-ld .t4fx-ld-hinh img { width: 100%; height: auto; }
}
/* ── 17.12 · Bộ nội dung RIÊNG cho khổ 402 của khối «Ngành nghề» ───────────
[phục vụ] '.t4fx-dn-mbluoi' · '.t4fx-dn-hinh' · [trang] #3
[figma] 'dangnh_mb' → minh hoạ 352×259,5 tại y = 153 · tám mục MỘT cột
351px, khe **25**, tiêu đề tại +59 so với mép mục (chừa 51px cho
biểu tượng), mô tả cách tiêu đề **8**; nút 213×46 chữ 16/700.
[lý do vượt panel] Panel không có ô nào đổi THỨ TỰ phần tử theo khổ màn,
mà khổ 402 đảo hẳn thứ tự tám ngành so với desktop. Ẩn/hiện thì dùng
mô-típ dùng chung '.t4-only-desktop' / '.t4-only-mobile' ('40-page-…css'),
không tự viết 'display:none'. */
#content .t4fx-dn .t4fx-dn-hinh img { width: 352px; height: 259.5px; object-fit: contain; }
@media (max-width: 849px) {
#content .t4fx-dn .section-content > .row.t4fx-dn-hinh-hang { margin-top: 32px; }
#content .t4fx-dn .section-content > .row.t4fx-dn-dau { margin-top: 32px; }
/* Khổ 402: Figma cho nút→tiêu đề thẻ **125**, đo được 139,9 ⇒ bớt 14. */
#content .t4fx-dn .section-content > .row.t4fx-dn-mbluoi { margin-top: 18px; }
#content .t4fx-dn-mbluoi { flex-wrap: wrap; row-gap: 25px; }
#content .t4fx-dn-mbluoi > .col {
flex: 0 0 352px; max-width: 352px; padding-left: 0; padding-right: 0;
}
/* [figma] 'dangnh_mb' — mỗi khối ngành là frame 'VerticalBorder' 352×N,
x=25, nét SOLID #000000 alpha .11 ở CẠNH TRÁI; nội dung bên trong bắt
đầu ở x=26 rộng 351 ('Frame 168' và các 'Container' đều 351).
Đúng 8 khối: 849/187 · 1061/139 · 1225/235 · 1485/139 · 1649/115 ·
1789/139 · 1953/163 · 2141/187 — live đã khớp từng cái.
⚠ Một luật chữa HAI lỗi: thiếu kẻ dọc, VÀ chữ mô tả đang ở x=25 rộng 352
(Figma 26/351) nên xuống dòng khác Figma. Kẻ 1px chiếm đúng 1px đó. */
#content .t4fx-dn-mbluoi > .col > .col-inner {
border-left: 1px solid rgba(0, 0, 0, .11);
padding-left: 0;
}
/* Chỗ trống 51px cho biểu tượng — biểu tượng thật dựng sau bằng mặt nạ CSS,
giữ chỗ trước để mọi khe dọc bên dưới đo đúng ngay từ bây giờ. */
#content .t4fx-dn-mbluoi > .col > .col-inner::before {
content: ""; display: block; height: 51px;
}
#content .t4fx-dn-mbluoi .t4fx-dn-oten { margin-top: 8px; }
#content .t4fx-dn-mbluoi .t4fx-dn-omo { margin-top: 8px; }
/* Nút «Nhận tư vấn ngay» — 213×46, chữ 16/700, KHÔNG tràn ngang.
⛔ VÁ 22/08/2026 — khổ 402 chưa từng khai 'margin-top' cho nút này, nên
nó thừa hưởng 'margin: 0' và dán sát ngay dưới đoạn mô tả (đo thật bằng
Playwright: gap = 0px). Rule desktop cùng tên ('@media min-width:850px')
có 'margin: 61px 0 0' nhưng KHÔNG áp dụng ở khổ hẹp — hai khối media
query tách biệt, không kế thừa qua nhau.
Khe THẬT theo Figma (node 1093:14580, đo trực tiếp trên
'Strong → The Challenge' bb.y+height=16560,48 → 'Link' bb.y=16592,48):
**32px** — không phải 67px (từng đo nhầm bằng 'Frame 166', lớp đó
'visible: false', là biến thể ẩn không tính). Số 32 khớp đúng ghi chú
desktop cùng vị trí ("đoạn dẫn kết thúc 529,5 → nút bắt đầu 561,5 ⇒ khe
32"), nên tin được — hai phép đo độc lập cùng ra một số. */
#content .t4fx-dn .t4fx-dn-mo .button {
width: 213px; min-width: 213px; height: 46px; line-height: 46px;
margin-top: 32px;
}
#content .t4fx-dn .t4fx-dn-mo .button span {
font-size: 16px; font-weight: 700; line-height: 21.856px;
}
}
@media (max-width: 849px) {
/* [phục vụ] '.t4fx-ld' · [trang] #3 · [figma] 'lydothan_mb'
[lý do vượt panel] Hai cột 528/506 của desktop phải xếp dọc trong khung
352. ⚠ PHẢI nhắc lại '.t4fx-ld-chu'/'.t4fx-ld-anh' — quy tắc desktop
dòng 529 là (1,4,0), '> .col' chỉ (1,3,0) và media query không cộng điểm
(luật III.19). */
#content .t4fx-ld .t4fx-split { flex-wrap: wrap; }
#content .t4fx-ld .t4fx-split > .col,
#content .t4fx-ld .t4fx-split > .col.t4fx-ld-chu,
#content .t4fx-ld .t4fx-split > .col.t4fx-ld-anh {
flex: 0 0 352px; max-width: 352px; margin-left: 0;
}
/* '.t4fx-lydo-m' là mô-típ dùng chung khai ở '44-nhom-ggm.css' (14/22 ở
khổ hẹp). Trang #3 đo ra **16/26** — đè tại chỗ, KHÔNG sửa mô-đun dùng
chung vì bốn trang #4–#7 đang dựa vào nó. */
.t4.t4-trang-dich-vu-google-marketing #content .t4fx-lydo-o .t4fx-lydo-m p {
font-size: 16px; line-height: 26px;
}
}
@media (max-width: 849px) {
/* ── 17.13 · Ba việc còn lại của khổ 402 ────────────────────────────────
[phục vụ] '.t4fx-ct-luoi2' · '.t4fx-dk' · [trang] #3
(a) ⛔ HÀNG 2 CỦA 'chaythue' ĐẢO THỨ TỰ Ở KHỔ 402. Figma desktop xếp
video · tối-đa-hoá · tạo-nhu-cầu · ứng-dụng; khổ 402 xếp
video · **tạo-nhu-cầu** · **tối-đa-hoá** · ứng-dụng. DOM giữ thứ tự
desktop nên phải hoán vị bằng 'order' — Flatsome không có ô nào đổi
thứ tự cột theo khổ màn. */
/* ⛔ ĐÃ THỬ 'order' — HỎNG THÊM (33 → 36 ❌), đã gỡ. Hàng 2 vẫn giữ thứ
tự DOM. Nguyên nhân chưa rõ; nghi là '.row' của Flatsome còn phần tử
khác cùng tham gia xếp thứ tự (luật III.20). Ai làm tiếp thì ĐỪNG thử
lại cách này mà chưa dò 'order' thực tế của mọi con trong hàng. */
/* (b) ⚠ ':first-child'/':last-child' tính như MỘT LỚP, nên quy tắc desktop
'… > .col:first-child' là (1,4,0) và thắng '… > .col' (1,3,0) của
bản hẹp — luật III.19 lần thứ ba. Nhắc lại đủ hai pseudo-class. */
#content .t4fx-dk .t4fx-head-2col > .col:first-child,
#content .t4fx-dk .t4fx-head-2col > .col:last-child {
flex: 0 0 352px; max-width: 352px; margin-left: 0;
}
/* (c) Thẻ 'dvkhac' khổ 402: thẻ **352** (ảnh và chữ **304** trong đệm 24),
chữ mô tả **16/26**, và THẺ TIÊU ĐIỂM LÀ THẺ 1 — ngược với desktop
(thẻ 2). Đây là khác biệt thật của bản thiết kế, không phải nhầm. */
/* 🔑 Ở khổ 402 THẺ TIÊU ĐIỂM RỘNG HƠN. Đọc thẳng figma-cache: thẻ 1 rộng
**352** và 'opacity' = 1; thẻ 2·3·4 rộng **335** và 'opacity' = 0.5; khe
giữa các thẻ **40**. Vì vậy ảnh và chữ trong thẻ 1 rộng 304, trong các
thẻ còn lại rộng 287 — hai con số này TỪNG làm tôi tưởng bảng mâu thuẫn
với chính nó (lúc đòi 304, lúc đòi 287). Không mâu thuẫn: hai loại thẻ. */
#content .t4fx-dk-truot .slider .col.t4fx-dk-the {
/* Thẻ khổ 402 CŨNG cao **608** như desktop (đã đọc figma-cache). Để
'height: auto' thì dòng «Xem chi tiết» nổi lên sớm 35px. */
width: 335px; flex: 0 0 335px; max-width: 335px; height: 608px;
margin-right: 40px;
}
#content .t4fx-dk-truot .slider .col.t4fx-dk-the1 {
width: 352px; flex: 0 0 352px; max-width: 352px;
}
#content .t4fx-dk-the1 .t4fx-dk-anh img { width: 304px; }
/* ⛔ VÁ 22/08/2026 — không phải lỗi kích thước/lề (hộp 304×260, đệm 25px
đo bằng Playwright đều khớp Figma trong sai số 1px). Lỗi thật là ẢNH:
WP media 3087 ('dvgm-card-1.webp' 574×520, tỉ lệ 1,104) đúng khớp hộp
ảnh DESKTOP của thẻ 2/3/4 (287×260, tỉ lệ 1,104 — cùng ảnh, đã ĐÚNG,
đừng đổi) nhưng thẻ 1 ở khổ 402 dùng hộp RIÊNG rộng hơn (304×260, tỉ lệ
1,169). Nguồn thật trong Figma (imageRef 'fd6826e9…', đọc PNG cache
'figma-cache/anh/fd6826e93438.png') là 800×400 (tỉ lệ 2,0) — ảnh 3087 là
bản đã CẮT SẴN cho hộp 1,104 nên 'cover' vào hộp 1,169 bị thu hẹp phần
nền, nhìn "phóng to" hơn Figma rõ rệt. Đã có sẵn bản đúng tỉ lệ 2,0 trên
đĩa ('flatsome-child/assets/img/dich-vu-google-marketing/05-rectangle-
3.png', 720×360) — cùng minh hoạ, khớp khung Figma — tải lên bằng
'tools/tai-anh-nhomc.py' (id 3169). CHỈ đổi ảnh cho khổ 402 + đúng thẻ 1,
không đụng thẻ 2/3/4 hay desktop (đang đúng, không phải sửa).
⚠ Lần đầu thử 'display:none' trên '![]()
' + nền CSS trên '.img-inner' —
HỎNG bảng dày (T2): hộp '![]()
' sụp về 0×0, 2 mốc ❌ mới ('dvgm-card-1.webp'
w/h đọc ra 0px thay vì 304/260, vì T2 đo trực tiếp trên PHẦN TỬ ảnh chứ
không phải nền CSS của cha). Đổi sang 'content: url()' ngay trên chính
'![]()
' — CHỈ thay THỨ ĐƯỢC VẼ, KHÔNG đụng hộp bố cục: đã kiểm bằng
Playwright, 'getBoundingClientRect()' vẫn đúng 304×260, 'object-fit:cover'
vẫn ăn theo hộp khai báo như với ảnh gốc. */
/* ⛔ VÁ 24/08: ảnh cũ 'dvgm-card1-mb.png' là **720×360 (tỉ lệ 2,000)** nhét
vào hộp 304×260 (tỉ lệ 1,169). 'object-fit: cover' phải phóng 1,444 lần
để lấp chiều cao ⇒ **cắt mất 41% bề ngang** — đúng hiện tượng "icon bị
cắt, chiều cao không đủ". Thay bằng ảnh xuất THẲNG từ node Figma của
chính thẻ đó (I1093:17359;1093:16771 → 608×520 = 304×260 ×2), nên
'cover' không cắt một pixel nào. */
#content .t4fx-dk-the1 .t4fx-dk-anh img {
content: url("https://demo1.tiepthitute.com/wp-content/uploads/2026/08/fig-card1.png");
}
/* ⛔ '.img-inner' của Flatsome hẹp hơn chính thẻ ![]()
đúng 2px (302 ↔ 304
ở thẻ 1; 285 ↔ 287 ở thẻ 2–6) và để 'overflow: hidden' ⇒ xén 2px mép
phải MỌI thẻ, nhìn như ảnh lệch tâm trong khung. Bỏ cắt, không đổi hộp
bố cục — hộp ![]()
vốn đã đúng Figma (304×260 · 287×260). */
#content .t4fx-dk-the .t4fx-dk-anh,
#content .t4fx-dk-the .t4fx-dk-anh .img-inner { overflow: visible; }
/* Ảnh cách mép trái thẻ 25, Figma 24 (thẻ 352 − ảnh 304 = 48, chia đều 24
mỗi bên; thẻ 335 − ảnh 287 cũng ra 24). Lệch 1px này làm ảnh trông không
nằm giữa khung thẻ. Trả về đối xứng. */
#content .t4fx-dk-the .t4fx-dk-anh { margin-left: -1px; }
/* ── 'chaythue' khổ 402: biểu tượng bị cắt ────────────────────────────
⛔ Luật dùng chung '#content .t4fx-ct-the > .col-inner::before
{ background-size: 72px 72px }' (dòng 1442) là số của DESKTOP — chú thích
ngay trên nó ghi rõ "7 biểu tượng 72×72 trong ô cao 79". Ở khổ 402 ô
'::before' chỉ cao **50**, nên nền 72×72 bị xén mất 22px: đúng hiện tượng
"chiều cao không đạt, icon bị cắt mất nét".
[figma] 'chaythue_mb' — 7 biểu tượng, KHÔNG cùng cỡ:
hàng 1 (t4fx-ct-luoi1, 3 thẻ) y=516 50×50
hàng 2–3 (t4fx-ct-luoi2, 4 thẻ) y=803 · 1106 51×51
Khai đúng từng hàng, và cho ô cao bằng chính biểu tượng để không còn xén. */
#content .t4fx-ct-luoi1 .t4fx-ct-the > .col-inner::before {
height: 50px; background-size: 50px 50px;
}
#content .t4fx-ct-luoi2 .t4fx-ct-the > .col-inner::before {
height: 51px; background-size: 51px 51px;
}
#content .t4fx-dk-the1 .t4fx-dk-ten,
#content .t4fx-dk-the1 .t4fx-dk-mo { max-width: 304px; }
/* 🔑 'max-width' KHÔNG đủ: '.col-inner' của thẻ chỉ rộng **302** nên đoạn mô
tả bị bó còn 302 — thiếu đúng 2px, và từ cuối («hạn.», 28px) rớt xuống
DÒNG THỨ NĂM. Figma xếp 4 dòng (h 88 = 4×22). Đo tận nơi: 303px đã đủ 4
dòng, 302px thì 5. Phải đặt 'width' để tràn khỏi '.col-inner', không phải
'max-width'. Figma cũng để hộp lệch phải (lề trái 24 · phải 9 trong thẻ
337) nên tràn 2px sang phải là ĐÚNG bản vẽ, không phải cố chen. */
#content .t4fx-dk-the1 .t4fx-dk-mo { width: 304px; }
#content .t4fx-dk-ten h3 { color: #000; }
#content .t4fx-dk-mo p, #content .t4fx-dk-xem p { color: #1f1f1f; }
#content .t4fx-dk-the .t4fx-dk-anh img { opacity: 1; }
#content .t4fx-dk-the:not(.t4fx-dk-the1) .t4fx-dk-ten h3 { color: rgba(0, 0, 0, .5); }
#content .t4fx-dk-the:not(.t4fx-dk-the1) .t4fx-dk-mo p,
#content .t4fx-dk-the:not(.t4fx-dk-the1) .t4fx-dk-xem p { color: rgba(31, 31, 31, .5); }
#content .t4fx-dk-the:not(.t4fx-dk-the1) .t4fx-dk-anh img { opacity: .5; }
}
/* ══ 17.13b · TIÊU ĐIỂM BĂNG TRƯỢT LÀ HIỆU ỨNG **ĐỘNG** ══════════════════
[phục vụ] '.t4fx-dk-the' · [trang] #3 dich-vu-google-marketing
[figma] '320:1468' (desktop) · '1093:17359' (khổ 402), và bốn biến thể
nguyên mẫu mà hai nút mũi tên trỏ tới:
'277:4268' · '277:3256' · '1093:17143' · '1093:16935'
[lý do vượt panel] Flatsome không có 'slider_style: focus'; panel không
gắn được lớp theo vị trí cuộn.
🔑 SỐ ĐO FIGMA — đọc thẳng 'figma-cache', không suy diễn:
thẻ tiêu điểm opacity **1** thẻ còn lại opacity **0,5**
ngoài độ mờ, HAI LOẠI THẺ GIỐNG HỆT NHAU: cùng bóng
'DROP_SHADOW 3/3/8 đen 25%', cùng nền '#ffffff', cùng viền 1px
'#fcfbf6', cùng bo góc (24 desktop · 15 khổ 402).
⇒ KHÔNG có "chữ đậm hơn", KHÔNG có "bóng đậm hơn" — chỉ độ mờ.
🔑 THẺ NÀO LÀ TIÊU ĐIỂM: thẻ có TÂM gần TÂM khung nhìn nhất. Đo trên cả
bốn biến thể: thẻ sáng cách tâm 10,5 · 3,5 · 1,5 · 3,5 px, còn thẻ mờ
gần nhất cách 371–387 px. Không có cách đọc nào khác khớp cả bốn.
⛔ VÌ SAO PHẢI SỬA: bản trước khai tiêu điểm bằng lớp VỊ TRÍ
('.t4fx-dk-the2' desktop · ':not(.t4fx-dk-the1)' khổ 402). Đó là ảnh
chụp ĐÚNG của trạng thái NGHỈ, nhưng nó dính chết vào một thẻ: bấm
nút «sau» thì thẻ 3 vào giữa mà thẻ 2 vẫn sáng. Đo trên site thật
(24/08, khổ 1900): sau một lần bấm, thẻ có 'centerDist' nhỏ nhất là
index 2 trong khi lớp sáng vẫn nằm ở index 1.
⚠ GIỮ NGUYÊN hai khối tĩnh phía trên — chúng là trạng thái NGHỈ dùng cho
lần vẽ ĐẦU TIÊN (trước khi script chạy) và cho trường hợp JS hỏng.
Ở trạng thái nghỉ chúng trỏ ĐÚNG thẻ mà luật động cũng chọn (đã kiểm:
scrollLeft = 0 ⇒ thẻ giữa là index 1 ở desktop, index 0 ở khổ 402),
nên không có nháy khi script bật cờ.
⚠ Độ đặc hiệu là thứ giữ khối này đứng vững, KHÔNG phải thứ tự nạp
(III.19 — '@media' không cộng điểm đặc hiệu):
(1,2,1) '#content .t4fx-dk-ten h3' ← nền khổ 402
(1,3,1) '#content .t4fx-dk-the2 …' ← tĩnh desktop
(1,4,1) '… :not(.t4fx-dk-the1) …' và MỜ-TẤT-CẢ dưới đây
(1,5,1) SÁNG-THẺ-GIỮA dưới đây ← luôn thắng
⚠ Vẫn mờ bằng ALPHA TRONG MÀU CHỮ + 'opacity' riêng cho ảnh, KHÔNG mờ cả
thẻ bằng 'opacity' — 'do-thuc-te.js' không cộng dồn 'opacity' của tổ
tiên (I.8i), mờ cả thẻ là hai đầu phép so khác nghĩa.
⚠ Lớp '.t4fx-dk-giua' do 'assets/js/trang-dich-vu.js' gắn. Cờ
'.t4-dk-dong' nằm trên chính '.slider'. */
#content .t4-dk-dong .t4fx-dk-the .t4fx-dk-ten h3 { color: rgba(0, 0, 0, .5); }
#content .t4-dk-dong .t4fx-dk-the .t4fx-dk-mo p,
#content .t4-dk-dong .t4fx-dk-the .t4fx-dk-xem p { color: rgba(31, 31, 31, .5); }
#content .t4-dk-dong .t4fx-dk-the .t4fx-dk-anh img { opacity: .5; }
#content .t4-dk-dong .t4fx-dk-the.t4fx-dk-giua .t4fx-dk-ten h3 { color: #000; }
#content .t4-dk-dong .t4fx-dk-the.t4fx-dk-giua .t4fx-dk-mo p,
#content .t4-dk-dong .t4fx-dk-the.t4fx-dk-giua .t4fx-dk-xem p { color: #1f1f1f; }
#content .t4-dk-dong .t4fx-dk-the.t4fx-dk-giua .t4fx-dk-anh img { opacity: 1; }
/* Figma chuyển biến thể bằng 'SMART_ANIMATE ease-out 0,3s' — dịch sang CSS
là chuyển màu/độ mờ 300ms, không phải nhảy đột ngột. Tôn trọng người đã
tắt hiệu ứng chuyển động ở hệ điều hành (III.11-3). */
@media (prefers-reduced-motion: no-preference) {
#content .t4-dk-dong .t4fx-dk-the .t4fx-dk-ten h3,
#content .t4-dk-dong .t4fx-dk-the .t4fx-dk-mo p,
#content .t4-dk-dong .t4fx-dk-the .t4fx-dk-xem p,
#content .t4-dk-dong .t4fx-dk-the .t4fx-dk-anh img {
transition: color .3s ease-out, opacity .3s ease-out;
}
}
/* ── 17.14 · Nút «Nhận báo giá» của khối gói ───────────────────────────────
[phục vụ] '.t4fx-goi-the .button' · [trang] #3
[figma] chữ **16/24 màu #ffffff** — mô-típ dùng chung '.t4fx-nut-xanh'
đang cho 14/28 màu #1f1f1f.
[lý do vượt panel] Panel không có ô cỡ chữ riêng cho nút; và không được
sửa '.t4fx-nut-xanh' ở mô-đun dùng chung vì các trang khác đang dựa vào. */
#content .t4fx-goi-the .button span {
font-size: 16px; line-height: 24px; color: #fff;
}
@media (max-width: 849px) {
/* ── 17.15 · FAQ khổ 402 — MỘT cột, mỗi câu là một hộp 352 ──────────────
[figma] 'faq_mb' → hộp 352 (cao 56 · 78 · 100 tuỳ số dòng), khe **28**;
chữ bắt đầu tại (+19, +17) và rộng tối đa **276,7** vì chừa chỗ cho mũi
tên 18px ở x = 340. Tiêu đề nhóm cách hộp đầu **24**, giữa hai nhóm 48. */
#content .t4fx-faq-luoi { flex-wrap: wrap; row-gap: 28px; }
/* Hộp câu hỏi khổ 402: đệm **17 trên/dưới · 19 hai bên** ⇒ chiều cao =
chữ + 34 (Figma: 56 · 78 · 100 cho 1 · 2 · 3 dòng). Dùng nhầm 21/25 của
desktop thì mỗi hộp cao thêm 8 và mọi bước dọc lệch ~12px.
⛔ VÁ 24/08/2026 — NỀN KEM + VIỀN + BO 8 (khổ 402 thiếu y như desktop
thiếu ở §17.48d). Đo thật ở 402 trước khi vá: 'backgroundColor:
rgba(0,0,0,0)' · 'borderRadius: 0px' ⇒ câu hỏi trôi nổi trên nền trang.
[figma] 'faq_mb' 1093:15255 → 'Background+Border' (1093:16183 …) 352 rộng:
nền '#efe8da' · stroke '#000000' alpha 0,11 dày 1 INSIDE · bo góc **8**
⚠ Bo góc khổ 402 là **8**, desktop là **16** — đọc từ hai node khác nhau,
đừng suy khổ này từ khổ kia (II.H).
[III.14.2-4] Figma đo đệm TỪ BÊN TRONG nét viền: node khai
'paddingLeft/Right 18 · Top/Bottom 16' và mực chữ nằm ở mép hộp + 19 / 17.
⇒ 'border: 1px' + 'padding: 16px 18px' giữ chữ ĐỨNG NGUYÊN chỗ cũ
(x = 44 trên site, tức 25 + 1 + 18) và hộp vẫn đúng 352 × 78/100.
[lý do vượt panel] panel '.col' của Flatsome không có ô nền/viền/bo góc. */
#content .t4fx-faq-luoi > .col.t4fx-faq-o {
flex: 0 0 352px; max-width: 352px; margin-left: 0;
padding: 16px 18px;
background-color: #efe8da;
border: 1px solid rgba(0, 0, 0, .11);
border-radius: 8px;
}
#content .t4fx-faq .section-content > .row.t4fx-faq-luoi { margin-top: 24px; }
}
/* ── 17.16 · Nút hero và nút CTA — hộp thật, không để Flatsome tự lo ───────
[phục vụ] '.t4fx-nut-trang' · '.t4fx-nut-vien' · '.t4fx-cta-nut'
[trang] #3 · [figma] hero: hai nút **342×56** nền '#ffffff' và '#cf9156',
khe 16; CTA: nút **263×46** nền '#458763', chữ 'lh 21,856' KHÔNG viết hoa.
[lý do vượt panel] Panel nút của Flatsome chỉ có cỡ S/M/L và màu theo bảng
màu chủ đề; không có ô nhập bề rộng/chiều cao/màu nền tự do, và mặc định
nó viết HOA toàn bộ chữ nút. */
#content .t4fx-hero .button.t4fx-nut-trang,
#content .t4fx-hero .button.t4fx-nut-vien {
width: 342px; min-width: 342px; height: 56px; border-radius: 5px;
border: 0; box-shadow: none; margin: 0;
display: inline-flex; align-items: center; justify-content: center;
}
#content .t4fx-hero .button.t4fx-nut-trang { background: #fff; }
#content .t4fx-hero .button.t4fx-nut-vien { background: #cf9156; margin-left: 16px; }
#content .t4fx-hero .button span { text-transform: none; }
#content .t4fx-cta .button.t4fx-cta-nut {
width: 263px; min-width: 263px; height: 46px; border-radius: 5px;
background: #458763; border: 0; box-shadow: none; margin: 0;
display: inline-flex; align-items: center; justify-content: center;
}
#content .t4fx-cta .button.t4fx-cta-nut span {
text-transform: none; line-height: 21.856px; color: #fff;
/* ⛔ PHẢI ép 'letter-spacing: 0'. Flatsome cho nút mặc định **0,4656px**
(0,03em) — với chuỗi 22 ký tự thì cộng thêm ~10,2px bề rộng mực:
desktop đo 188,02 trong khi Figma khai **≤183**, khổ 402 đo 170,59 trong
khi Figma khai **≤160**. Trừ đúng phần giãn chữ ra thì cả hai về đúng
(177,8 và 160,4). Cùng họ với bẫy 'text-transform' mà Flatsome cũng tự
đặt cho mọi 'button' — đã xử ngay dòng trên. */
letter-spacing: 0;
}
/* Bề rộng chữ — Figma ngắt dòng ở 704 (hero) · 828,8 (H2 CTA) · 1000 (đoạn
CTA); để tràn hết khung thì số dòng khác đi và mọi khe dọc bên dưới lệch. */
#content .t4fx-hero .t4fx-hero-mo p { max-width: 704px; margin-left: auto; margin-right: auto; }
/* ⚠ 828,8 là bề rộng MỰC của tiêu đề, KHÔNG phải bề rộng khung. Khung chữ
của CTA là **1000** (Figma 'Frame 221'); ép 828,8 làm tiêu đề ngắt sớm và
mực chỉ còn 698. Ràng khung ở '.col-inner', đừng ràng ở từng lớp chữ. */
#content .t4fx-cta .t4fx-cta-o > .col-inner {
max-width: 1000px; margin-left: auto; margin-right: auto;
}
/* ⛔ HAI KHỐI DƯỚI ĐÂY CHỈ DÀNH CHO KHỔ RỘNG. Để trần thì chúng nằm SAU
các quy tắc 'max-width: 849px' ở trên nên thắng luôn ở khổ 402 và phá
bố cục hẹp đã dựng đúng — cùng loại bẫy với 'order' ở luật III.21. */
@media (min-width: 850px) {
/* ── 17.17 · Đầu khối «Ngành nghề» XẾP DỌC ở CẢ desktop ────────────────────
[figma] 'dangnh' → H2 (410, 247.5) 528×159 và đoạn dẫn (410, 422.5) 528×107
— CÙNG một cột, cách nhau 16. Bản đầu dựng hai cột 528/463 khe 89 (đọc
nhầm từ khối 'chaythue'), làm mốc 'khoang·dx' lệch 617px.
Nút «Nhận tư vấn ngay»: hộp **213×46**, chữ **700**, 'lh 21,856'. */
/* ⛔ 'flex-wrap: wrap' + 'flex-basis: 100%' KHÔNG ép xuống dòng được khi có
'max-width' chặn: flex tính cỡ giả định ĐÃ kẹp theo max-width (528), nên
528+528 vẫn lọt hàng 1080 và hai cột giữ nguyên cạnh nhau. Cách chắc ăn
là đổi hẳn TRỤC của hàng. */
#content .t4fx-dn .t4fx-dn-dau {
flex-wrap: nowrap; flex-direction: column; align-items: flex-start;
position: relative; /* neo cho '.t4fx-dn-hinh-dt' — xem khối ngay dưới */
}
#content .t4fx-dn .t4fx-dn-dau > .col.t4fx-dn-td,
#content .t4fx-dn .t4fx-dn-dau > .col.t4fx-dn-mo {
flex: 0 0 auto; width: 528px; max-width: 528px; margin-left: 0;
}
/* ⚠ 'flex-wrap: wrap' KHÔNG đủ để xuống dòng: hàng rộng 1080 mà hai cột
chỉ 528+528 = 1056 nên chúng vẫn vừa một hàng. Phải ép 'flex-basis: 100%'
rồi chặn bề rộng nhìn thấy bằng 'max-width'. */
#content .t4fx-dn .t4fx-dn-dau > .col.t4fx-dn-mo {
flex: 0 0 100%; max-width: 528px; margin-top: 16px;
}
#content .t4fx-dn .t4fx-dn-mo .button {
width: 213px; min-width: 213px; height: 46px; border-radius: 5px;
/* Figma: đoạn dẫn kết thúc 529,5 → nút bắt đầu 561,5 ⇒ khe **32**;
nhưng mốc 'dy(hộp)' đòi 151 mà đang 122 nên khe thật là **61**. */
margin: 61px 0 0; display: inline-flex; align-items: center; justify-content: center;
}
#content .t4fx-dn .t4fx-dn-mo .button span {
font-size: 16px; font-weight: 700; line-height: 21.856px; text-transform: none;
}
/* ── 22/08 · Minh hoạ desktop khối «Ngành nghề» — cột MỚI, đặt tuyệt đối ──
[phục vụ] phần tử: Image ([ux_image]) | khối: minh hoạ đa ngành desktop
[trang] dich-vu-google-marketing | [figma] node 279:5630, lớp 'fdfdfdf 1'
[lý do vượt panel] '.t4fx-dn-dau' đã bị ép flex-direction:column ở khối
ngay trên (mục 17.17) nên một cột thứ ba chèn vào ROW đó sẽ rơi xuống
DƯỚI thay vì đứng CẠNH khối chữ — không panel nào chỉnh được việc này.
Toạ độ (đơn vị Figma, gốc = góc trên-trái '.t4fx-dn-dau', tức góc trên-
trái của 'Frame 109' — chữ):
'Frame 109' (chữ) xy=410,247.5 wh=528,360 ⇒ gốc quy chiếu (0,0)
'fdfdfdf 1' (ảnh) xy=984,241 wh=506,373
⇒ trái = 984−410 = 574 (= 528 chữ + 46 khe, khe 46 ĐÃ dùng ở khối
'lydo' liền kề — hai khối cùng một khuôn 528/46/506, xem 17.9)
⇒ trên = 241−247.5 = −6.5 (ảnh cao hơn khối chữ đúng 6,5px) */
#content .t4fx-dn .t4fx-dn-hinh-dt {
position: absolute; top: -6.5px; left: 574px; width: 506px; max-width: none;
}
#content .t4fx-dn .t4fx-dn-hinh2 img {
width: 506px; height: 373px; max-width: none; object-fit: contain;
}
/* ── 17.18 · Lưới FAQ desktop — hai cột 516, khe 28/16 ─────────────────────
[figma] 'faqnhom' → hộp **516** tại x = 420 và 964 (khe 28); hàng cách
nhau 16; chữ bắt đầu tại (+25, +21). Tiêu đề nhóm cách hộp đầu **24**,
giữa hai nhóm **48**.
[lý do vượt panel] 'span="6"' cho 540px — panel chỉ chia được theo 1/12,
không nhập được 516. */
/* Lưới FAQ thụt **10** mỗi bên trong khung 1080: Figma đặt hộp tại x=420 và
964 trong khung 410…1490 ⇒ 10 + 516 + 28 + 516 + 10 = 1080. Thiếu 10 này
thì mọi mốc 'khoang·dx' của khối lệch đúng 9,88px. */
#content .t4fx-faq-luoi {
flex-wrap: wrap; column-gap: 28px; row-gap: 16px;
padding-left: 10px; padding-right: 10px;
}
#content .t4fx-faq-luoi > .col.t4fx-faq-o {
flex: 0 0 516px; max-width: 516px; margin-left: 0;
min-height: 98px; padding: 21px 25px;
}
/* Chữ ngắt dòng ở **448**: hộp 516 − đệm trái 25 − chỗ chevron 43.
Để chữ tràn hết 466 thì số dòng khác đi và cả cột lệch. */
/* Hai nhóm câu hỏi cách nhau **48** (hộp cuối nhóm trước → tiêu đề nhóm sau). */
#content .t4fx-faq .t4fx-faq-nhom { margin-top: 48px; }
#content .t4fx-faq .section-content > .row.t4fx-faq-luoi { margin-top: 24px; }
}
@media (max-width: 849px) {
/* 🔑 Ở khổ 402 THẺ TIÊU ĐIỂM có chữ NHỎ HƠN các thẻ mờ. Đọc thẳng
figma-cache: thẻ 1 → '14/22', thẻ 2·3·4 → **16/26**. Ngược trực giác nên
bảng có lúc đòi 14 lúc đòi 16 — không mâu thuẫn, là hai loại thẻ. */
#content .t4fx-dk-the:not(.t4fx-dk-the1) .t4fx-dk-mo p {
font-size: 16px; line-height: 26px;
}
}
/* ── 17.19 · Ô ngành nghề: chữ CĂN GIỮA, tiêu đề cách mô tả 8 ─────────────
[phục vụ] '.t4fx-dn-o' · '.t4fx-dn-mbluoi' · [trang] #3
[figma] hộp chữ rộng 221 (desktop) / 351 (khổ 402) nhưng MỰC của tiêu đề
và mô tả lệch nhau 7,4–8,8px — dấu hiệu chắc chắn của căn giữa, vì căn
trái thì hai dòng phải bắt đầu ở cùng một điểm.
Tiêu đề cao 24, mô tả bắt đầu ở +32 ⇒ khe **8**. */
/* ⛔ ĐÃ THỬ 'text-align: center' cho cả hai dòng — HỎNG THÊM (214 → 225 ❌).
Chênh lệch 7,4–8,8px giữa mực tiêu đề và mực mô tả KHÔNG phải do căn giữa.
Ai làm tiếp thì đo lại 'textAlignHorizontal' của TỪNG lớp trong figma-cache
(LUẬT 6) trước khi đoán, đừng suy từ con số lệch. */
#content .t4fx-dn-o .t4fx-dn-omo { margin-top: 8px; }
#content .t4fx-dn-mbluoi .t4fx-dn-omo { margin-top: 8px; }
/* ── 17.20 · Nút và dòng «Xem chi tiết» DÍNH ĐÁY THẺ ──────────────────────
[phục vụ] '.t4fx-ct-the .button' · '.t4fx-goi-the .button' · '.t4fx-dk-xem'
[trang] #3 · [figma] thẻ cao cố định, nút nằm cách ĐÁY một khoảng bằng
đúng đệm dưới: 'chaythue' 360/392 − nút 44 − 60 · 'dvkhac' 608 − 24 − 24.
[lý do vượt panel] Đặt nút bằng 'margin-top' cố định thì tiêu đề một dòng
và tiêu đề hai dòng đẩy nút lệch nhau 32–35px — đúng các mốc
«Nhận tư vấn → Nhận tư vấn (dọc) 0px» đang đỏ. 'margin-top: auto' trong
một cột flex cao cố định cho ra ĐÚNG con số Figma ở cả hai hàng, mà không
cần biết tiêu đề dài mấy dòng. */
#content .t4fx-ct-the .button { margin-top: auto; }
#content .t4fx-goi-the {
display: flex; flex-direction: column;
}
#content .t4fx-goi-the .button { margin-top: auto; }
/* Nút Flatsome mang sẵn 'margin-bottom' theo em, nên khoảng trống dưới nút
đo được 45,9 (desktop) và 42,6 (402) trong khi Figma đòi **37 ở cả hai**.
Khoảng đó do đệm đáy thẻ quyết định — bỏ margin của nút để nó đúng bằng. */
#content .t4fx-goi-the .button { margin-bottom: 0; }
#content .t4fx-dk-truot .slider .col.t4fx-dk-the > .col-inner {
display: flex; flex-direction: column; height: 100%;
}
#content .t4fx-dk-the .t4fx-dk-xem {
/* −21: Figma đặt dòng này thấp hơn chỗ 'margin-top: auto' đưa tới đúng 21px
(lề âm ở đáy đẩy xuống mà vẫn giữ tính "dính đáy" giữa các thẻ). */
margin-top: auto; margin-bottom: -21px;
}
/* ⛔ ĐÃ THỬ biến '.col-inner' của 'chaythue'/'goi' thành cột flex cao 100%
(để 'margin-top: auto' đẩy nút xuống đáy) — HỎNG THÊM (195 → 203 ❌), đã gỡ.
'align-items: center' trên '.col-inner' làm mọi '[ux_text]' co về bề rộng
nội dung, kéo theo hàng loạt mốc 'chu_w' và 'khoang·dx'. Nếu làm lại thì
ĐỪNG đặt 'align-items', và đo riêng từng thay đổi một. */
@media (min-width: 850px) {
/* Tiêu đề hàng 2 CĂN GIỮA THEO CHIỀU DỌC trong một ô cao cố định: Figma đặt
tiêu đề hai dòng («tối đa hóa hiệu suất») bắt đầu SỚM hơn tiêu đề một
dòng đúng 20px và kết thúc muộn hơn 6px — dấu hiệu của khối cao cố định
căn giữa, không phải khối trôi theo nội dung. */
/* ⛔ ĐÃ THỬ ô cao cố định căn giữa dọc cho tiêu đề hàng 2 — HỎNG THÊM
(195 → 201 ❌), đã gỡ. Chênh lệch 20px giữa tiêu đề một dòng và hai dòng
có nguyên nhân khác; phải đo lại 'Frame' cha trong figma-cache. */
}
/* ══ 17.21 · BIỂU TƯỢNG ═══════════════════════════════════════════════════
[phục vụ] 'chaythue' · 'dangnh' · 'goi' · 'faqnhom' · 'dvkhac' · [trang] #3
[figma] 244 lớp vector, đã kết xuất thành 19 tệp SVG bằng
'tools/keo-vector-dvgm.py' (+3 tệp kéo thêm ngày 22/08: dấu tích tròn,
chevron xuống, mũi tên phải).
[lý do vượt panel] UX Builder không có phần tử "biểu tượng" nào nhận SVG
tuỳ ý; chèn '[ux_html]' chứa SVG thì T0 tụt khỏi 100 %. Vẽ bằng '::before'
trên chính cột nên KHÔNG thêm phần tử nào vào shortcode.
⛔ DÙNG 'background-image', KHÔNG dùng mặt nạ. Bảy biểu tượng chiến dịch là
biểu tượng thương hiệu Google — NHIỀU MÀU. Mặt nạ CSS bẹp tất cả về một
màu, đúng thứ không được phép với logo. Trang #2 dùng mặt nạ được vì icon
ở đó đơn sắc camel. */
#content .t4fx-ct-the > .col-inner::before,
#content .t4fx-dn-o > .col-inner::before,
#content .t4fx-dn-mbluoi > .col > .col-inner::before {
background-repeat: no-repeat; background-position: center;
}
/* ── chaythue: 7 biểu tượng 72×72 trong ô cao 79 ── */
#content .t4fx-ct-the > .col-inner::before { background-size: 72px 72px; }
#content .t4fx-ct-luoi1 > .col.t4fx-ct-the1 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/icon-tim-kiem.svg"); }
#content .t4fx-ct-luoi1 > .col.t4fx-ct-the2 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/icon-hien-thi.svg"); }
#content .t4fx-ct-luoi1 > .col.t4fx-ct-the3 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/icon-mua-sam.svg"); }
#content .t4fx-ct-luoi2 > .col.t4fx-ct-the1 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/icon-video.svg"); }
#content .t4fx-ct-luoi2 > .col.t4fx-ct-the2 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/icon-pmax.svg"); }
#content .t4fx-ct-luoi2 > .col.t4fx-ct-the3 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/icon-demand-gen.svg"); }
#content .t4fx-ct-luoi2 > .col.t4fx-ct-the4 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/icon-ung-dung.svg"); }
/* ── dangnh: 8 biểu tượng ngành, cao 51, cách tiêu đề 30 ──
⚠ Ô ngành nghề CHƯA có chỗ giữ chỗ như thẻ 'chaythue', nên khối '::before'
này LÀM DỊCH toàn bộ chữ xuống 81px — đúng theo Figma (biểu tượng ở y=718,
tiêu đề ở y≈799). */
#content .t4fx-dn-o > .col-inner::before {
content: ""; display: block; height: 51px; margin-bottom: 30px;
background-size: contain; background-position: left center;
}
#content .t4fx-dn-luoi1 > .col.t4fx-dn-o1 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/nganh-bat-dong-san.svg"); }
#content .t4fx-dn-luoi1 > .col.t4fx-dn-o2 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/nganh-vat-lieu.svg"); }
#content .t4fx-dn-luoi1 > .col.t4fx-dn-o3 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/nganh-noi-that.svg"); }
#content .t4fx-dn-luoi1 > .col.t4fx-dn-o4 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/nganh-dien-tu.svg"); }
#content .t4fx-dn-luoi2 > .col.t4fx-dn-o1 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/nganh-lam-dep.svg"); }
#content .t4fx-dn-luoi2 > .col.t4fx-dn-o2 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/nganh-ky-thuat.svg"); }
#content .t4fx-dn-luoi2 > .col.t4fx-dn-o3 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/nganh-van-chuyen.svg"); }
#content .t4fx-dn-luoi2 > .col.t4fx-dn-o4 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/nganh-khac.svg"); }
/* ── dangnh khổ 402: THỨ TỰ NGÀNH KHÁC HẲN desktop (13.x/§12.4) ── */
#content .t4fx-dn-mbluoi > .col > .col-inner::before {
background-size: contain; background-position: left center;
}
#content .t4fx-dn-mbluoi > .col.t4fx-dn-mo1 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/nganh-bat-dong-san.svg"); }
#content .t4fx-dn-mbluoi > .col.t4fx-dn-mo2 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/nganh-dien-tu.svg"); }
#content .t4fx-dn-mbluoi > .col.t4fx-dn-mo3 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/nganh-khac.svg"); }
#content .t4fx-dn-mbluoi > .col.t4fx-dn-mo4 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/nganh-van-chuyen.svg"); }
#content .t4fx-dn-mbluoi > .col.t4fx-dn-mo5 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/nganh-lam-dep.svg"); }
#content .t4fx-dn-mbluoi > .col.t4fx-dn-mo6 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/nganh-ky-thuat.svg"); }
#content .t4fx-dn-mbluoi > .col.t4fx-dn-mo7 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/nganh-vat-lieu.svg"); }
#content .t4fx-dn-mbluoi > .col.t4fx-dn-mo8 > .col-inner::before { background-image: url("../assets/img/dich-vu-google-marketing/nganh-noi-that.svg"); }
/* Dấu tích tròn 24×25 ở MÉP PHẢI mỗi mục (chỉ khổ 402). */
#content .t4fx-dn-mbluoi > .col > .col-inner {
position: relative;
}
#content .t4fx-dn-mbluoi > .col > .col-inner::after {
content: ""; position: absolute; right: 0; top: 0; width: 24px; height: 25px;
background: url("../assets/img/dich-vu-google-marketing/dau-tich.svg") center/contain no-repeat;
}
/* ── goi: biểu tượng "hộp gói" 29×29 trước nhãn «Gói N» ────────────────────
[phục vụ] '.t4fx-goi-nhan' · [trang] #3, khối 'goi-dich-vu'
[figma] node '711:18235' (desktop, 24:4384) / '1093:15131' (khổ 402,
1093:15106) — CÙNG kích thước 29×29 ở cả hai khổ, đặt tại (24,32) tính từ
góc thẻ 'Frame 150'/'Frame 149'/'Frame 148' — TRÙNG với gốc padding của
'.t4fx-goi-the .t4fx-goi-nhan { padding: 32px 24px 0 }' đã có sẵn (dòng
685), nên 'left/top' dưới đây đặt thẳng bằng đúng hai số đó, không cần quy
đổi gì thêm.
⚠ Nhãn «Gói N» KHÔNG cần sửa gì: 'padding-left: 57px' (desktop, §17.37) /
'57.33px' (402) đã ĐÚNG BẰNG 24 (thụt gốc) + 33 (icon 29 + khe 4, đo từ
Figma: icon kết thúc ở x=2868, chữ bắt đầu x=2872) từ trước khi có icon —
phiên trước đã canh đúng VỊ TRÍ CHỮ nhưng chưa vẽ HÌNH. Bổ sung 'position:
relative' + '::before' là ĐỦ, tuyệt đối đừng đụng lại hai số 57/57.33 đó
(đang khớp Figma 0 ❌, xem 'ban-giao-2026-08-22-trang3.md' §17.6). */
#content .t4fx-goi-the .t4fx-goi-nhan { position: relative; }
#content .t4fx-goi-the .t4fx-goi-nhan::before {
content: ""; position: absolute; left: 24px; top: 32px;
width: 29px; height: 29px;
background: url("../assets/img/dich-vu-google-marketing/icon-goi.svg") center/contain no-repeat;
}
/* ── goi: dấu tích trước mỗi bước quy trình — 16×16, khe **4** tới chữ ─────
[figma] 'FRAME · SVG' 16×20 (16×16 ở bước cuối «Báo cáo»), text bắt đầu
+4px sau mép icon — ĐÚNG ở CẢ HAI khổ (desktop node 711:18250 v.v., khổ
402 node 1093:15146 v.v. — đo lại từng cặp icon/chữ, hai khổ ra cùng một
khe 4px). Vậy tổng thụt lề đúng là 16+4=**20px**, không phải 24. */
/* ⛔ LÔ MOBILE-P3-FIX (23/08): dấu tích nay là PHẦN TỬ THẬT — thẻ ![]()
trong
chính '[ux_text]' của mỗi bước, ảnh xuất từ Figma 'cl-icon-success'
(1093:15147 · media 3211). Bản cũ vẽ bằng '::before' + background SVG; đúng
hình nhưng là pseudo-element, không phải phần tử, nên đã gỡ.
⚠ Thụt lề 20px CŨNG gỡ theo: ![]()
16px + 'margin-right' 4px tự tạo đúng
20px đó. Giữ lại cả hai là chữ lệch phải 20 (đã đo: chữ nhảy 71 → 91). */
#content .t4fx-goi-the .t4fx-goi-buoc p { position: relative; }
/* ⛔ BA LẦN TRƯỚC bật dấu tích ở khổ 402 dùng 24px/19px/19px đều làm bốn bước
quy trình ngắt dòng khác Figma, 'goi_mb' xấu thêm 6–8 mốc (xem
'ban-giao-2026-08-22-trang3.md' §17.4) — CHƯA ai thử đúng số Figma (20px)
trước khi vá lần này. Nếu 20px vẫn làm 'goi_mb' xấu thêm ở LẦN VÁ SAU thì
quay lại giới hạn desktop-only bằng '@media (min-width: 850px)' quanh khối
trên và báo lại 4T — đừng đổi cỡ chữ/bề rộng thẻ để né, đó là sửa thiết kế,
không phải sửa icon (ngoài phạm vi việc này). */
/* ── faqnhom: chevron 18×18 sát mép phải mỗi hộp câu hỏi ── */
#content .t4fx-faq-o > .col-inner { position: relative; }
#content .t4fx-faq-o > .col-inner::after {
content: ""; position: absolute; right: 0; top: 0; width: 18px; height: 18px;
background: url("../assets/img/dich-vu-google-marketing/icon-chevron-xuong.svg") center/contain no-repeat;
}
/* ── dvkhac: mũi tên 14×14 trong hộp «Xem chi tiết» 103×24 ──
Figma: chữ tại +8, mũi tên tại +81 so với mép trái hộp.
⛔ VÁ 23/08/2026 — bản trước neo mũi tên vào CHÍNH THẺ ('.t4fx-dk-the') với
'left:197px' cố định. Số 197 chỉ đúng cho thẻ rộng 335 (287 trong lòng):
hộp «Xem chi tiết» CĂN GIỮA thẻ bằng 'margin:auto' (xem quy tắc
'.t4fx-dk-the .t4fx-dk-xem' phía trên — comment "Figma 'Link' tại x=116
trong lòng 287"), nên vị trí hộp DAO ĐỘNG theo bề rộng lòng thẻ. Thẻ 1 khổ
402 (mục 17.5c) có lòng RỘNG HƠN — 304 thay vì 287 — nên hộp bị đẩy sang
phải 9px (116→125) mà mũi tên vẫn đứng yên ở 197 ⇒ đè lên đuôi chữ ngay
dưới tiêu đề "Dịch vụ SEO toàn diện" (thẻ tiêu điểm ở khổ 402, mục 17.5c).
Đo trên site thật (Playwright, khổ 402): thẻ chuẩn (335/287) — chữ tận
200, mũi tên 197-211 (chỉ đè 3px, gần như không thấy); thẻ 1 (352/304) —
chữ tận 208, mũi tên VẪN 197-211 (đè 11px, thấy rõ).
→ Neo lại đúng cấu trúc Figma: mũi tên là ANH EM của dòng chữ TRONG CÙNG
hộp «Xem chi tiết» 103×24 (không phải anh em cấp thẻ). Offset 81/4 đo lại
từ thẻ chuẩn (335/287, nơi thị giác đã đúng): mũi tên tại +81 ngang / +4
dọc TÍNH TỪ MÉP HỘP — khớp tuyệt đối "mũi tên tại +81" đã ghi trong Figma.
Neo theo hộp thì hộp đi đâu mũi tên theo đó, không cần biết lòng thẻ rộng
bao nhiêu. Đã thử lại đúng ba thẻ (335 chuẩn, 352 thẻ-1 khổ 402, 335 khác) —
mũi tên nằm gọn ngoài chữ ở cả ba, không còn đè.
⛔ VÁ 24/08/2026 — neo tuyệt đối 'left: 81px' vẫn còn ĐÈ 2,92px lên đuôi
chữ ở MỌI thẻ, vì chữ đang căn GIỮA hộp (19,06 → 83,92) chứ không bắt đầu
ở 8 như Figma. Nay mũi tên là PHẦN TỬ THỨ HAI của hàng ngang (xem khối
17.10 ở trên): 'space-between' + 'column-gap: 8px' cho khe ≥ 8 đúng bằng
'itemSpacing' của Figma, và mũi tên tự ghim ở 81 mà không cần con số nào
viết tay. */
#content .t4fx-dk-the .t4fx-dk-xem { position: relative; }
#content .t4fx-dk-the .t4fx-dk-xem::after {
content: ""; position: static;
flex: 0 0 14px; width: 14px; height: 14px;
background: url("../assets/img/dich-vu-google-marketing/icon-mui-ten-phai.svg") center/contain no-repeat;
}
@media (max-width: 849px) {
/* «Chiến dịch ứng dụng» ở khổ 402 ngắt thành HAI DÒNG (Figma khai '\n'
riêng cho khổ này — LUẬT 6). Không chèn '
' được vì cùng một DOM phục vụ cả desktop, nơi tiêu đề này nằm gọn một dòng 195px. Ép ngắt bằng bề rộng: mực Figma ≤ 82, cho 110 là đủ để rơi đúng chỗ mà không cắt chữ. */ #content .t4fx-ct-luoi2 > .col.t4fx-ct-the4 .t4fx-ct-ten h3 { max-width: 110px; margin-left: auto; margin-right: auto; } } /* ── 17.22 · Hàng nhãn của khối Casestudy — «Xem tất cả» nằm CÙNG DÒNG ───── [figma] nhãn «Casestudy» bên trái, «Xem tất cả» bên phải, cùng một dòng (dy 0, cách nhau 1004). Shortcode để hai '[ux_text]' trong một '[col]' nên mặc định xếp dọc. [lý do vượt panel] Panel không có ô "hai đầu một dòng" cho ruột một cột. */ :where(.t4-trang-dich-vu-google-marketing) #content .t4fx-cs .t4fx-hang-nhan > .col > .col-inner { display: flex; align-items: center; justify-content: space-between; } @media (max-width: 849px) { /* ── 17.23 · Hero khổ 402 ── [figma] 'hero_mb' → H1 **32/42,656** (desktop 40/53,32); hai nút **271×44** XẾP DỌC cách nhau 60; đoạn dẫn cách nút đầu 290. */ #content .t4fx-hero .t4fx-hero-h1 h1 { font-size: 32px; line-height: 42.656px; } /* ⛔ CĂN GIỮA BẰNG 'text-align' CỦA CHA, KHÔNG BẰNG 'margin: auto'. Đã đo trên trang thật: đặt 'display: block' + hai lề 'auto' cho ra **x = 25 và 106** (một nút dính trái, một nút dính phải) — tức chỉ MỘT trong hai lề 'auto' thắng được cascade, còn lề kia bị một quy tắc khác đặt về 0, nên hộp bị "over-constrained" và phần dư dồn hết về một bên. Cột cha đã mang sẵn '.text-center'; để nút là 'inline-flex' thì chính 'text-align: center' căn hộp, không cần lề nào. Thử tại chỗ: cả hai cách ('margin:auto !important' và 'inline-flex') đều ra đúng **x = 65,5** của Figma — chọn cách không dùng '!important'. */ #content .t4fx-hero .button.t4fx-nut-trang, #content .t4fx-hero .button.t4fx-nut-vien { width: 271px; min-width: 271px; height: 44px; display: inline-flex; } #content .t4fx-hero .button.t4fx-nut-vien { margin-top: 16px; } /* ── 17.24 · CTA khổ 402 ── [figma] 'cta_mb' → chữ ngắt ở **288**; nút **224×43**, chữ 14/19,124. */ #content .t4fx-cta .t4fx-cta-o > .col-inner { max-width: 288px; } #content .t4fx-cta .button.t4fx-cta-nut { width: 224px; min-width: 224px; height: 43px; } #content .t4fx-cta .button.t4fx-cta-nut span { font-size: 14px; line-height: 19.124px; } } @media (max-width: 849px) { /* ── 17.25 · FAQ khổ 402 hoán vị câu 2 và 3 ── Figma desktop: Agency · Nếu-chạy · Làm-sao (lưới 2 cột). Figma khổ 402: Agency · **Làm-sao** · **Nếu-chạy** (một cột). 'order' ở đây AN TOÀN vì lưới hẹp chỉ MỘT cột — mỗi hàng đúng một thẻ nên không có chuyện 'order' xé lẻ cách bọc dòng (khác cảnh ở III.21). */ #content .t4fx-faq-luoi > .col.t4fx-faq-o1 { order: 1; } #content .t4fx-faq-luoi > .col.t4fx-faq-o3 { order: 2; } #content .t4fx-faq-luoi > .col.t4fx-faq-o2 { order: 3; } /* ── 17.26 · Thẻ gói khổ 402: cao **525**, nút dính đáy ── [figma] 'goi_mb' → thẻ 337×525 (desktop 343×561). Không cố định chiều cao thì nút «Nhận báo giá» của ba thẻ lệch nhau 35px. */ #content .t4fx-goi-luoi > .col.t4fx-goi-the { height: 525px; } #content .t4fx-goi-luoi > .col.t4fx-goi-the > .col-inner { display: flex; flex-direction: column; height: 100%; } } /* Desktop: thẻ gói **561** (Figma 'Background+Border' 343×561). */ @media (min-width: 850px) { #content .t4fx-goi-luoi > .col.t4fx-goi-the { height: 561px; } #content .t4fx-goi-luoi > .col.t4fx-goi-the > .col-inner { display: flex; flex-direction: column; height: 100%; } } @media (min-width: 850px) { /* Tiêu đề hàng 2 DÍNH ĐÁY một ô cao 50: Figma cho tiêu đề hai dòng bắt đầu SỚM hơn tiêu đề một dòng 20px và kết thúc gần cùng chỗ ⇒ khối căn theo mép DƯỚI, không phải mép trên. (Lần trước thử 'align-items: center' và hỏng thêm, nhưng khi đó '.col-inner' còn đang bị 'align-items: center' làm co lại — nay đã bỏ, nên phép thử này khác hẳn.) */ #content .t4fx-ct-luoi2 .t4fx-ct-ten { min-height: 50px; display: flex; align-items: flex-end; justify-content: center; } } /* ── 17.27 · Khối CTA: chữ CĂN TRÁI, nút CĂN PHẢI ───────────────────────── [phục vụ] '.t4fx-cta-o' · [trang] #3 [figma] 'cta' → khung chữ 1000 tại x=460 (căn TRÁI), nút 263 tại x=1197 tức sát MÉP PHẢI của khung (460+1000 = 1460 = 1197+263). Khổ 402 y hệt: chữ 288 tại x=57, nút 224 kết thúc đúng 345. [lý do vượt panel] Ô 'align' của '[col]' chỉ đặt được MỘT kiểu căn cho cả cột; ở đây chữ và nút căn ngược nhau. */ #content .t4fx-cta .t4fx-cta-o { text-align: left; } #content .t4fx-cta .t4fx-cta-h2 h2, #content .t4fx-cta .t4fx-cta-mo p { margin-left: 0; margin-right: 0; } #content .t4fx-cta .button.t4fx-cta-nut { margin-left: auto; margin-right: 0; display: flex; } @media (max-width: 849px) { #content .t4fx-cta .t4fx-cta-h2 h2, #content .t4fx-cta .t4fx-cta-mo p { margin-left: 0; margin-right: 0; } #content .t4fx-cta .button.t4fx-cta-nut { margin-left: auto; margin-right: 0; } } @media (max-width: 849px) { /* ⚠ Luật III.19 lần thứ tư: bản desktop dòng 256–257 dùng ':first-child' / ':last-child' (1,4,0) nên thắng '> .col' (1,3,0) của bản hẹp, và hai cột tiêu đề khối «gói» vẫn nằm ngang ở khổ 402. */ #content .t4fx-goi-sec .t4fx-head-2col > .col:first-child, #content .t4fx-goi-sec .t4fx-head-2col > .col:last-child { flex: 0 0 352px; max-width: 352px; margin-left: 0; } /* ⛔ ĐÃ THỬ thụt 19px cho dấu tích ở khổ 402 — HỎNG THÊM, đã gỡ (cũng như lần thử 24px trước đó). Thẻ gói khổ 402 chỉ 337px nên mọi khoảng thụt đều làm các bước quy trình ngắt dòng lại. Muốn có dấu tích ở khổ này thì phải giảm cỡ chữ hoặc nới thẻ — tức đổi thứ khác của bản thiết kế. */ } @media (min-width: 850px) { /* ── 17.28 · Ba khe dọc của khối «Lý do» và mối nối sang Casestudy ─────── [figma] nhãn → tiêu đề lớn **160,5** (đang 98,5) · đoạn dẫn → mục đầu của lưới 11 ý **224,5** (đang 204,7) · ý cuối → nhãn Casestudy **129** (đang 64,9). Ba khe này do dòng chảy tự nhiên sinh ra nên phải khai tay. */ #content .t4fx-ld .section-content > .row:has(.t4fx-ld-lon) { margin-top: 62px; } /* ── 17.28b · Hai khe cuối của «Lý do» — lô page3-2 ───────────────────── [figma] tiêu đề lớn → tiêu đề khối **261,5** (đo 277,18 · thừa 15,68) · đoạn dẫn → mục đầu lưới **224,5** (đo 213,19 · hụt 11,31). ⚠ Khe thứ nhất KHÔNG phải khoảng cách giữa hai hàng: hàng «split» cao 371 (bằng ảnh) còn cột chữ chỉ 208,63, nên chữ bị CĂN GIỮA và tụt thêm 81,18 so với mép hàng. Sửa bằng cách rút margin của chính hàng đó — đừng đụng vào căn giữa, vì mốc «tiêu đề khối → đoạn dẫn» (130 ↔ 130,63) đang khớp nhờ đúng phép căn giữa ấy. ⚠ Hai khe LỆCH NGƯỢC CHIỀU nên bù trừ một phần: −15,68 + 11,31 = −4,37. Vì vậy sửa cả hai làm chiều cao section GIẢM 4,37, tức đi từ +9 về +4,6 — tốt hơn, không phải đánh đổi. Sửa lẻ một mốc thì mới hỏng phía kia. */ #content .t4fx-ld .section-content > .row.t4fx-split { margin-top: 64.32px; } :where(.t4-trang-dich-vu-google-marketing) #content .t4fx-ld .section-content > .row:has(.t4fx-lydo-o) { margin-top: 31.31px; } :where(.t4-trang-dich-vu-google-marketing) #content .t4fx-cs > .section-content { padding-top: 64px; } /* Hàng nhãn Casestudy rộng **1080** (không phải 1044) — «Xem tất cả» căn sát mép phải khung 1080. */ :where(.t4-trang-dich-vu-google-marketing) #content .t4fx-cs .section-content > .row.t4fx-hang-nhan { max-width: 1080px; } } /* ── 17.29 · Bề rộng chữ FAQ khai THEO TỪNG CÂU ─────────────────────────── [phục vụ] '.t4fx-faq-c' · [trang] #3 [figma] Hộp chữ của mỗi câu hỏi là hộp TỰ CO theo nội dung, và người thiết kế đặt tay bề rộng khác nhau cho từng câu — cùng một câu «Làm sao để biết…» rộng **377** ở nhóm 1 nhưng **448** ở nhóm 3. Một giá trị chung 448 làm câu «Chạy ngân sách nhỏ…» nằm gọn MỘT dòng (ink 424,53) trong khi Figma cho nó hai dòng (ink 290,23). [lý do vượt panel] Không có ô nào của UX Builder đặt bề rộng chữ theo từng '[ux_text]' con trong một lưới. ⚠ Con số là bề rộng MỰC của Figma; đặt đúng bằng nó thì từ kế tiếp không lọt và chỗ ngắt dòng trùng khít. */ @media (min-width: 850px) { #content .t4fx-faq-luoi1 > .col.t4fx-faq-o1 .t4fx-faq-c p { max-width: 361px; } #content .t4fx-faq-luoi1 > .col.t4fx-faq-o2 .t4fx-faq-c p { max-width: 395px; } #content .t4fx-faq-luoi1 > .col.t4fx-faq-o3 .t4fx-faq-c p { max-width: 377px; } #content .t4fx-faq-luoi2 > .col.t4fx-faq-o1 .t4fx-faq-c p { max-width: 271px; } #content .t4fx-faq-luoi2 > .col.t4fx-faq-o2 .t4fx-faq-c p { max-width: 290.23px; } #content .t4fx-faq-luoi2 > .col.t4fx-faq-o3 .t4fx-faq-c p { max-width: 448px; } #content .t4fx-faq-luoi3 > .col.t4fx-faq-o1 .t4fx-faq-c p { max-width: 361px; } #content .t4fx-faq-luoi3 > .col.t4fx-faq-o2 .t4fx-faq-c p { max-width: 395px; } #content .t4fx-faq-luoi3 > .col.t4fx-faq-o3 .t4fx-faq-c p { max-width: 448px; } } @media (max-width: 849px) { #content .t4fx-faq-luoi1 > .col.t4fx-faq-o1 .t4fx-faq-c p { max-width: 276.73px; } #content .t4fx-faq-luoi1 > .col.t4fx-faq-o2 .t4fx-faq-c p { max-width: 276.73px; } #content .t4fx-faq-luoi1 > .col.t4fx-faq-o3 .t4fx-faq-c p { max-width: 276.73px; } #content .t4fx-faq-luoi2 > .col.t4fx-faq-o1 .t4fx-faq-c p { max-width: 294.73px; } #content .t4fx-faq-luoi2 > .col.t4fx-faq-o2 .t4fx-faq-c p { max-width: 294.73px; } #content .t4fx-faq-luoi2 > .col.t4fx-faq-o3 .t4fx-faq-c p { max-width: 276.73px; } #content .t4fx-faq-luoi3 > .col.t4fx-faq-o1 .t4fx-faq-c p { max-width: 314px; } #content .t4fx-faq-luoi3 > .col.t4fx-faq-o2 .t4fx-faq-c p { max-width: 294.73px; } #content .t4fx-faq-luoi3 > .col.t4fx-faq-o3 .t4fx-faq-c p { max-width: 276.73px; } } @media (max-width: 849px) { /* ── 17.30 · HIỆN LẠI thanh tab Casestudy ở khổ 402 ────────────────────── [phục vụ] '#casestudy .tabbed-content' · [trang] #3 [figma] 'lydothan_mb' CÓ thanh tab — hai tiêu đề «Google Ads» và «Website & SEO» là lớp thật, T1 đang báo THIẾU THẬT vì chúng đo ra 0×0. [lý do vượt panel] '44-nhom-ggm.css' mục 20.5 khai '.t4 #casestudy .tabbed-content { display: none }' cho khổ hẹp, vì các trang #4–#7 thay thanh tab bằng một băng thẻ riêng ('div.t4fx-csmb'). Trang #3 KHÔNG có băng thẻ đó nên bị mất trắng khối casestudy. ⛔ Đây là VA CHẠM QUA '_id', không phải qua lớp: '_id="casestudy"' của '[section]' sinh ra '#casestudy', và bất kỳ trang nào đặt cùng '_id' đều dính quy tắc của trang khác. Không sửa '44-nhom-ggm.css' (mô-đun của cửa sổ A); giành lại bằng độ đặc hiệu BẰNG NHAU + thứ tự nạp sau (51 > 44), phạm vi khoá bằng ':where()' nên không cộng điểm. */ .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .tabbed-content { display: block; } } @media (max-width: 849px) { /* ── 17.31 · Khối Casestudy khổ 402 của RIÊNG trang #3 ─────────────────── [figma] 'lydothan_mb' → tiêu đề tab **16px**, tab đang mở màu '#000000 @62%' (khổ 402 không tô xanh); ảnh **352×230 bo 4** (không tràn mép); trích dẫn ngắt ở **352**; hai dòng chú thích số liệu ≤ **160**. ⚠ Mọi lớp ở đây là mô-típ DÙNG CHUNG với #4–#7 nên phải khoá phạm vi bằng ':where()' (đặc hiệu 0) và dựa vào thứ tự nạp 51 > 44 để thắng. */ .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-tabs .nav li a { font-size: 16px; } .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-tabs .nav li.active a { color: rgba(0, 0, 0, .62); } /* ⚠ Phải đủ BA lớp '.t4 … #casestudy … .t4fx-cs-anh img' mới ngang điểm với quy tắc của '44-nhom-ggm.css'; ít hơn một lớp là thua và ảnh giữ nguyên 402×650 tràn mép. */ .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-cs-anh img { width: 352px; height: 230px; object-fit: cover; border-radius: 4px; } /* Hai ô số liệu nằm CẠNH NHAU ở khổ 402 (bước 191,8), không xếp dọc. */ .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-cs-so { flex-wrap: nowrap; column-gap: 0; } .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-cs-so > .col.t4fx-cs-o { flex: 0 0 191.8px; max-width: 191.8px; margin-left: 0; } :where(.t4-trang-dich-vu-google-marketing) #content .t4fx-cs-trich p { max-width: 352px; } /* 🔑 'max-width: 352px' ở trên VÔ NGHĨA nếu không gỡ đệm ngang của '.tab-panels': Flatsome đặt 'padding: 20px', cộng viền thành 21 mỗi bên, nên khung 352 co còn **310** và lời chứng thực ngắt thành **6 dòng** thay vì 5 (mực rộng nhất 304 ↔ Figma 326). Dòng thừa đẩy «Adam Jones» xuống 53,5. Figma đặt trích dẫn ở x=25 w=352, tức sát khung. Chỉ gỡ đệm NGANG — đệm dọc giữ nguyên vì khe nhãn thẻ → trích dẫn đang đúng. */ :where(.t4-trang-dich-vu-google-marketing) #content .t4fx-tabs .tab-panels { /* Đệm trên 15 (Flatsome mặc định 20): mốc 'Website & SEO → trích dẫn' đo theo HỘP nên hạ đệm trong '
' được vì cùng một DOM phục vụ cả desktop, nơi tiêu đề này nằm gọn một dòng 195px. Ép ngắt bằng bề rộng: mực Figma ≤ 82, cho 110 là đủ để rơi đúng chỗ mà không cắt chữ. */ #content .t4fx-ct-luoi2 > .col.t4fx-ct-the4 .t4fx-ct-ten h3 { max-width: 110px; margin-left: auto; margin-right: auto; } } /* ── 17.22 · Hàng nhãn của khối Casestudy — «Xem tất cả» nằm CÙNG DÒNG ───── [figma] nhãn «Casestudy» bên trái, «Xem tất cả» bên phải, cùng một dòng (dy 0, cách nhau 1004). Shortcode để hai '[ux_text]' trong một '[col]' nên mặc định xếp dọc. [lý do vượt panel] Panel không có ô "hai đầu một dòng" cho ruột một cột. */ :where(.t4-trang-dich-vu-google-marketing) #content .t4fx-cs .t4fx-hang-nhan > .col > .col-inner { display: flex; align-items: center; justify-content: space-between; } @media (max-width: 849px) { /* ── 17.23 · Hero khổ 402 ── [figma] 'hero_mb' → H1 **32/42,656** (desktop 40/53,32); hai nút **271×44** XẾP DỌC cách nhau 60; đoạn dẫn cách nút đầu 290. */ #content .t4fx-hero .t4fx-hero-h1 h1 { font-size: 32px; line-height: 42.656px; } /* ⛔ CĂN GIỮA BẰNG 'text-align' CỦA CHA, KHÔNG BẰNG 'margin: auto'. Đã đo trên trang thật: đặt 'display: block' + hai lề 'auto' cho ra **x = 25 và 106** (một nút dính trái, một nút dính phải) — tức chỉ MỘT trong hai lề 'auto' thắng được cascade, còn lề kia bị một quy tắc khác đặt về 0, nên hộp bị "over-constrained" và phần dư dồn hết về một bên. Cột cha đã mang sẵn '.text-center'; để nút là 'inline-flex' thì chính 'text-align: center' căn hộp, không cần lề nào. Thử tại chỗ: cả hai cách ('margin:auto !important' và 'inline-flex') đều ra đúng **x = 65,5** của Figma — chọn cách không dùng '!important'. */ #content .t4fx-hero .button.t4fx-nut-trang, #content .t4fx-hero .button.t4fx-nut-vien { width: 271px; min-width: 271px; height: 44px; display: inline-flex; } #content .t4fx-hero .button.t4fx-nut-vien { margin-top: 16px; } /* ── 17.24 · CTA khổ 402 ── [figma] 'cta_mb' → chữ ngắt ở **288**; nút **224×43**, chữ 14/19,124. */ #content .t4fx-cta .t4fx-cta-o > .col-inner { max-width: 288px; } #content .t4fx-cta .button.t4fx-cta-nut { width: 224px; min-width: 224px; height: 43px; } #content .t4fx-cta .button.t4fx-cta-nut span { font-size: 14px; line-height: 19.124px; } } @media (max-width: 849px) { /* ── 17.25 · FAQ khổ 402 hoán vị câu 2 và 3 ── Figma desktop: Agency · Nếu-chạy · Làm-sao (lưới 2 cột). Figma khổ 402: Agency · **Làm-sao** · **Nếu-chạy** (một cột). 'order' ở đây AN TOÀN vì lưới hẹp chỉ MỘT cột — mỗi hàng đúng một thẻ nên không có chuyện 'order' xé lẻ cách bọc dòng (khác cảnh ở III.21). */ #content .t4fx-faq-luoi > .col.t4fx-faq-o1 { order: 1; } #content .t4fx-faq-luoi > .col.t4fx-faq-o3 { order: 2; } #content .t4fx-faq-luoi > .col.t4fx-faq-o2 { order: 3; } /* ── 17.26 · Thẻ gói khổ 402: cao **525**, nút dính đáy ── [figma] 'goi_mb' → thẻ 337×525 (desktop 343×561). Không cố định chiều cao thì nút «Nhận báo giá» của ba thẻ lệch nhau 35px. */ #content .t4fx-goi-luoi > .col.t4fx-goi-the { height: 525px; } #content .t4fx-goi-luoi > .col.t4fx-goi-the > .col-inner { display: flex; flex-direction: column; height: 100%; } } /* Desktop: thẻ gói **561** (Figma 'Background+Border' 343×561). */ @media (min-width: 850px) { #content .t4fx-goi-luoi > .col.t4fx-goi-the { height: 561px; } #content .t4fx-goi-luoi > .col.t4fx-goi-the > .col-inner { display: flex; flex-direction: column; height: 100%; } } @media (min-width: 850px) { /* Tiêu đề hàng 2 DÍNH ĐÁY một ô cao 50: Figma cho tiêu đề hai dòng bắt đầu SỚM hơn tiêu đề một dòng 20px và kết thúc gần cùng chỗ ⇒ khối căn theo mép DƯỚI, không phải mép trên. (Lần trước thử 'align-items: center' và hỏng thêm, nhưng khi đó '.col-inner' còn đang bị 'align-items: center' làm co lại — nay đã bỏ, nên phép thử này khác hẳn.) */ #content .t4fx-ct-luoi2 .t4fx-ct-ten { min-height: 50px; display: flex; align-items: flex-end; justify-content: center; } } /* ── 17.27 · Khối CTA: chữ CĂN TRÁI, nút CĂN PHẢI ───────────────────────── [phục vụ] '.t4fx-cta-o' · [trang] #3 [figma] 'cta' → khung chữ 1000 tại x=460 (căn TRÁI), nút 263 tại x=1197 tức sát MÉP PHẢI của khung (460+1000 = 1460 = 1197+263). Khổ 402 y hệt: chữ 288 tại x=57, nút 224 kết thúc đúng 345. [lý do vượt panel] Ô 'align' của '[col]' chỉ đặt được MỘT kiểu căn cho cả cột; ở đây chữ và nút căn ngược nhau. */ #content .t4fx-cta .t4fx-cta-o { text-align: left; } #content .t4fx-cta .t4fx-cta-h2 h2, #content .t4fx-cta .t4fx-cta-mo p { margin-left: 0; margin-right: 0; } #content .t4fx-cta .button.t4fx-cta-nut { margin-left: auto; margin-right: 0; display: flex; } @media (max-width: 849px) { #content .t4fx-cta .t4fx-cta-h2 h2, #content .t4fx-cta .t4fx-cta-mo p { margin-left: 0; margin-right: 0; } #content .t4fx-cta .button.t4fx-cta-nut { margin-left: auto; margin-right: 0; } } @media (max-width: 849px) { /* ⚠ Luật III.19 lần thứ tư: bản desktop dòng 256–257 dùng ':first-child' / ':last-child' (1,4,0) nên thắng '> .col' (1,3,0) của bản hẹp, và hai cột tiêu đề khối «gói» vẫn nằm ngang ở khổ 402. */ #content .t4fx-goi-sec .t4fx-head-2col > .col:first-child, #content .t4fx-goi-sec .t4fx-head-2col > .col:last-child { flex: 0 0 352px; max-width: 352px; margin-left: 0; } /* ⛔ ĐÃ THỬ thụt 19px cho dấu tích ở khổ 402 — HỎNG THÊM, đã gỡ (cũng như lần thử 24px trước đó). Thẻ gói khổ 402 chỉ 337px nên mọi khoảng thụt đều làm các bước quy trình ngắt dòng lại. Muốn có dấu tích ở khổ này thì phải giảm cỡ chữ hoặc nới thẻ — tức đổi thứ khác của bản thiết kế. */ } @media (min-width: 850px) { /* ── 17.28 · Ba khe dọc của khối «Lý do» và mối nối sang Casestudy ─────── [figma] nhãn → tiêu đề lớn **160,5** (đang 98,5) · đoạn dẫn → mục đầu của lưới 11 ý **224,5** (đang 204,7) · ý cuối → nhãn Casestudy **129** (đang 64,9). Ba khe này do dòng chảy tự nhiên sinh ra nên phải khai tay. */ #content .t4fx-ld .section-content > .row:has(.t4fx-ld-lon) { margin-top: 62px; } /* ── 17.28b · Hai khe cuối của «Lý do» — lô page3-2 ───────────────────── [figma] tiêu đề lớn → tiêu đề khối **261,5** (đo 277,18 · thừa 15,68) · đoạn dẫn → mục đầu lưới **224,5** (đo 213,19 · hụt 11,31). ⚠ Khe thứ nhất KHÔNG phải khoảng cách giữa hai hàng: hàng «split» cao 371 (bằng ảnh) còn cột chữ chỉ 208,63, nên chữ bị CĂN GIỮA và tụt thêm 81,18 so với mép hàng. Sửa bằng cách rút margin của chính hàng đó — đừng đụng vào căn giữa, vì mốc «tiêu đề khối → đoạn dẫn» (130 ↔ 130,63) đang khớp nhờ đúng phép căn giữa ấy. ⚠ Hai khe LỆCH NGƯỢC CHIỀU nên bù trừ một phần: −15,68 + 11,31 = −4,37. Vì vậy sửa cả hai làm chiều cao section GIẢM 4,37, tức đi từ +9 về +4,6 — tốt hơn, không phải đánh đổi. Sửa lẻ một mốc thì mới hỏng phía kia. */ #content .t4fx-ld .section-content > .row.t4fx-split { margin-top: 64.32px; } :where(.t4-trang-dich-vu-google-marketing) #content .t4fx-ld .section-content > .row:has(.t4fx-lydo-o) { margin-top: 31.31px; } :where(.t4-trang-dich-vu-google-marketing) #content .t4fx-cs > .section-content { padding-top: 64px; } /* Hàng nhãn Casestudy rộng **1080** (không phải 1044) — «Xem tất cả» căn sát mép phải khung 1080. */ :where(.t4-trang-dich-vu-google-marketing) #content .t4fx-cs .section-content > .row.t4fx-hang-nhan { max-width: 1080px; } } /* ── 17.29 · Bề rộng chữ FAQ khai THEO TỪNG CÂU ─────────────────────────── [phục vụ] '.t4fx-faq-c' · [trang] #3 [figma] Hộp chữ của mỗi câu hỏi là hộp TỰ CO theo nội dung, và người thiết kế đặt tay bề rộng khác nhau cho từng câu — cùng một câu «Làm sao để biết…» rộng **377** ở nhóm 1 nhưng **448** ở nhóm 3. Một giá trị chung 448 làm câu «Chạy ngân sách nhỏ…» nằm gọn MỘT dòng (ink 424,53) trong khi Figma cho nó hai dòng (ink 290,23). [lý do vượt panel] Không có ô nào của UX Builder đặt bề rộng chữ theo từng '[ux_text]' con trong một lưới. ⚠ Con số là bề rộng MỰC của Figma; đặt đúng bằng nó thì từ kế tiếp không lọt và chỗ ngắt dòng trùng khít. */ @media (min-width: 850px) { #content .t4fx-faq-luoi1 > .col.t4fx-faq-o1 .t4fx-faq-c p { max-width: 361px; } #content .t4fx-faq-luoi1 > .col.t4fx-faq-o2 .t4fx-faq-c p { max-width: 395px; } #content .t4fx-faq-luoi1 > .col.t4fx-faq-o3 .t4fx-faq-c p { max-width: 377px; } #content .t4fx-faq-luoi2 > .col.t4fx-faq-o1 .t4fx-faq-c p { max-width: 271px; } #content .t4fx-faq-luoi2 > .col.t4fx-faq-o2 .t4fx-faq-c p { max-width: 290.23px; } #content .t4fx-faq-luoi2 > .col.t4fx-faq-o3 .t4fx-faq-c p { max-width: 448px; } #content .t4fx-faq-luoi3 > .col.t4fx-faq-o1 .t4fx-faq-c p { max-width: 361px; } #content .t4fx-faq-luoi3 > .col.t4fx-faq-o2 .t4fx-faq-c p { max-width: 395px; } #content .t4fx-faq-luoi3 > .col.t4fx-faq-o3 .t4fx-faq-c p { max-width: 448px; } } @media (max-width: 849px) { #content .t4fx-faq-luoi1 > .col.t4fx-faq-o1 .t4fx-faq-c p { max-width: 276.73px; } #content .t4fx-faq-luoi1 > .col.t4fx-faq-o2 .t4fx-faq-c p { max-width: 276.73px; } #content .t4fx-faq-luoi1 > .col.t4fx-faq-o3 .t4fx-faq-c p { max-width: 276.73px; } #content .t4fx-faq-luoi2 > .col.t4fx-faq-o1 .t4fx-faq-c p { max-width: 294.73px; } #content .t4fx-faq-luoi2 > .col.t4fx-faq-o2 .t4fx-faq-c p { max-width: 294.73px; } #content .t4fx-faq-luoi2 > .col.t4fx-faq-o3 .t4fx-faq-c p { max-width: 276.73px; } #content .t4fx-faq-luoi3 > .col.t4fx-faq-o1 .t4fx-faq-c p { max-width: 314px; } #content .t4fx-faq-luoi3 > .col.t4fx-faq-o2 .t4fx-faq-c p { max-width: 294.73px; } #content .t4fx-faq-luoi3 > .col.t4fx-faq-o3 .t4fx-faq-c p { max-width: 276.73px; } } @media (max-width: 849px) { /* ── 17.30 · HIỆN LẠI thanh tab Casestudy ở khổ 402 ────────────────────── [phục vụ] '#casestudy .tabbed-content' · [trang] #3 [figma] 'lydothan_mb' CÓ thanh tab — hai tiêu đề «Google Ads» và «Website & SEO» là lớp thật, T1 đang báo THIẾU THẬT vì chúng đo ra 0×0. [lý do vượt panel] '44-nhom-ggm.css' mục 20.5 khai '.t4 #casestudy .tabbed-content { display: none }' cho khổ hẹp, vì các trang #4–#7 thay thanh tab bằng một băng thẻ riêng ('div.t4fx-csmb'). Trang #3 KHÔNG có băng thẻ đó nên bị mất trắng khối casestudy. ⛔ Đây là VA CHẠM QUA '_id', không phải qua lớp: '_id="casestudy"' của '[section]' sinh ra '#casestudy', và bất kỳ trang nào đặt cùng '_id' đều dính quy tắc của trang khác. Không sửa '44-nhom-ggm.css' (mô-đun của cửa sổ A); giành lại bằng độ đặc hiệu BẰNG NHAU + thứ tự nạp sau (51 > 44), phạm vi khoá bằng ':where()' nên không cộng điểm. */ .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .tabbed-content { display: block; } } @media (max-width: 849px) { /* ── 17.31 · Khối Casestudy khổ 402 của RIÊNG trang #3 ─────────────────── [figma] 'lydothan_mb' → tiêu đề tab **16px**, tab đang mở màu '#000000 @62%' (khổ 402 không tô xanh); ảnh **352×230 bo 4** (không tràn mép); trích dẫn ngắt ở **352**; hai dòng chú thích số liệu ≤ **160**. ⚠ Mọi lớp ở đây là mô-típ DÙNG CHUNG với #4–#7 nên phải khoá phạm vi bằng ':where()' (đặc hiệu 0) và dựa vào thứ tự nạp 51 > 44 để thắng. */ .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-tabs .nav li a { font-size: 16px; } .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-tabs .nav li.active a { color: rgba(0, 0, 0, .62); } /* ⚠ Phải đủ BA lớp '.t4 … #casestudy … .t4fx-cs-anh img' mới ngang điểm với quy tắc của '44-nhom-ggm.css'; ít hơn một lớp là thua và ảnh giữ nguyên 402×650 tràn mép. */ .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-cs-anh img { width: 352px; height: 230px; object-fit: cover; border-radius: 4px; } /* Hai ô số liệu nằm CẠNH NHAU ở khổ 402 (bước 191,8), không xếp dọc. */ .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-cs-so { flex-wrap: nowrap; column-gap: 0; } .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-cs-so > .col.t4fx-cs-o { flex: 0 0 191.8px; max-width: 191.8px; margin-left: 0; } :where(.t4-trang-dich-vu-google-marketing) #content .t4fx-cs-trich p { max-width: 352px; } /* 🔑 'max-width: 352px' ở trên VÔ NGHĨA nếu không gỡ đệm ngang của '.tab-panels': Flatsome đặt 'padding: 20px', cộng viền thành 21 mỗi bên, nên khung 352 co còn **310** và lời chứng thực ngắt thành **6 dòng** thay vì 5 (mực rộng nhất 304 ↔ Figma 326). Dòng thừa đẩy «Adam Jones» xuống 53,5. Figma đặt trích dẫn ở x=25 w=352, tức sát khung. Chỉ gỡ đệm NGANG — đệm dọc giữ nguyên vì khe nhãn thẻ → trích dẫn đang đúng. */ :where(.t4-trang-dich-vu-google-marketing) #content .t4fx-tabs .tab-panels { /* Đệm trên 15 (Flatsome mặc định 20): mốc 'Website & SEO → trích dẫn' đo theo HỘP nên hạ đệm trong '
' không dời được — phải dời chính bảng. */ padding-left: 0; padding-right: 0; padding-top: 15px; } /* ⚠ 'padding: 28.5px 0' cho '.t4fx-cs-trich p' đến từ TỆP CỦA NHÓM KHÁC ('40-page-xu-ly-loi-sai-google-ads.css:1459', khai '.t4 .text…' không khoanh trang nên rò sang đây). KHÔNG sửa tệp đó — ghi đè hẹp tại chỗ. Đệm TRÊN vẫn cần (giữ đúng khe nhãn thẻ → trích dẫn), nhưng đệm DƯỚI đẩy «Adam Jones» xuống 28,5 so với Figma (khe mực trích dẫn→tên phải là **16**: Figma 2353+110 → 2479). Chuyển đệm thành lề TRÊN. */ :where(.t4-trang-dich-vu-google-marketing) #content .t4fx-cs-trich p { /* Đệm TRÊN 23,5 (kế thừa 28,5 từ tệp nhóm khác thì trích dẫn thấp 5). */ padding-top: 23.5px; padding-bottom: 0; } :where(.t4-trang-dich-vu-google-marketing) #content .t4fx-cs-o .t4fx-cs-mo p { max-width: 160px; } } @media (max-width: 849px) { /* ── 17.33 · Hero khổ 402: khe đoạn dẫn → nút ───────────────────────── [figma] đoạn dẫn kết thúc 317, nút đầu tại 461 ⇒ khe **144**. */ #content .t4fx-hero .button.t4fx-nut-trang { margin-top: 144px; } #content .t4fx-hero .button.t4fx-nut-vien { margin-left: auto; margin-right: auto; } /* ── 17.34 · Breadcrumb khổ 402: BA mục MỘT dòng ────────────────────── [figma] 'crumb_mb' → Home (x=25) · Dịch vụ Google Ads (x=73) · Chạy thuê và setup… (x=185, cao **13** — nhỏ hơn hai mục kia). Mũi tên ngăn cách rộng 20. Không ép một dòng thì mục 3 rơi xuống dòng dưới (dy 28). [lý do vượt panel] breadcrumb do child theme in ra, không có phần tử builder — đã ghi cùng lối ở '41-page-chinh-sach-bao-mat.css'. */ /* ⛔ ĐỘ ĐẶC HIỆU: '47-nhom-dich-vu.css' (tệp của cửa sổ B) khai 'body.t4-nhom-dv3 nav.t4fx-crumb ol li:last-child { line-height: 22px }' (0,4,3) và 'body.t4-nhom-dv3 .t4fx-crumb li + li::before { width: 32px }'. Trang #3 MANG CHUNG lớp thân 't4-nhom-dv3' với ba trang của nhóm đó, nên bộ chọn '.t4:where(…)' (0,3,1) của khối này **thua** và ba mốc 'crumb_mb' đỏ trong khi CSS đọc lên thì thấy đúng. Đây là III.22 nhưng ở chiều ngược lại: rò rỉ TỪ mô-đun nhóm VÀO trang. ✅ Cách giành lại mà không sửa tệp của cửa sổ khác: lặp lại ĐÚNG bộ chọn của họ rồi thêm ':where(.t4-trang-…)' — đặc hiệu 0 nên điểm BẰNG NHAU, và mô-đun 51 nạp SAU 47 nên thắng theo thứ tự. Ba trang kia không đổi. */ body.t4-nhom-dv3:where(.t4-trang-dich-vu-google-marketing) .t4fx-crumb ol { flex-wrap: nowrap; white-space: nowrap; } /* Mục cuối nhỏ hơn hai mục kia: **10px / 13** (hai mục đầu 22 cao). Đặt cả trên 'li' LẪN con của nó — chữ nằm trong ''/'' nên 'line-height' khai ở 'li' không xuống tới nơi. */ body.t4-nhom-dv3:where(.t4-trang-dich-vu-google-marketing) nav.t4fx-crumb ol li:last-child, body.t4-nhom-dv3:where(.t4-trang-dich-vu-google-marketing) nav.t4fx-crumb ol li:last-child * { font-size: 10px; line-height: 13px; } /* Mũi tên ngăn cách rộng **20** (Figma 'SVG' 20×14); mặc định của '40-page-…css' là 32 nên hai khe ngang lệch đúng 11,2px. */ body.t4-nhom-dv3:where(.t4-trang-dich-vu-google-marketing) .t4fx-crumb li + li::before { width: 20px; } } @media (max-width: 849px) { /* Tiêu đề nhóm ĐẦU TIÊN cách H2 «Frequently Asked Questions» **126** (các nhóm sau cách hộp cuối 48). Hàng thứ 2 của section chính là nó. */ #content .t4fx-faq .section-content > .row:nth-of-type(2) .t4fx-faq-nhom { margin-top: 40.69px; } /* Chữ câu hỏi khổ 402 'lh' **22** — mỗi dòng dôi 2px là hộp cao thêm và mọi bước dọc trong nhóm lệch ~12px. */ #content .t4fx-faq-o .t4fx-faq-c p { line-height: 22px; } } @media (max-width: 849px) { /* ── 17.35 · Thanh tab Casestudy khổ 402 rộng đúng Figma ───────────────── [figma] khoảng cách TÂM giữa các tab: 171,6 · 252,98 · 210 — tổng ~634, tức thanh tab TRÀN khung 352 và cuộn ngang. Bản dựng đang hụt đúng **8px mỗi tab** (163,91 · 244,79 · 201,9) ⇒ thêm 4px đệm mỗi bên. Không cho tab co lại, nếu không nó tự bóp cho vừa 352. */ .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-tabs .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; /* Thanh tab thụt **15,14** so với khung nội dung (Figma: tab đầu x=41, khung 25). Lần thử trước đặt 16 khi tab còn thừa đệm nên hỏng; nay tab đã đúng bề rộng thì thụt này mới có nghĩa. */ padding-left: 15.14px; } .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-tabs .nav::-webkit-scrollbar { display: none; } .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-tabs .nav > li { flex: 0 0 auto; margin-right: 32px; } .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-tabs .nav > li:last-child { margin-right: 0; } .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-tabs .nav > li > a { /* 🔑 FIGMA KHÔNG CHO TAB ĐỆM NGANG — hộp tab CHÍNH LÀ hộp chữ: 86 · 194 · 247 · 109 tại x = 41 · 159 · 385 · 664 ⇒ khe đúng **32** giữa mọi cặp. Kiểm chéo: (86+194)/2 + 32 = 172 ≈ 171,6 ✅ · (194+247)/2 + 32 = 252,5 ≈ 252,98 ✅ · (247+109)/2 + 32 = 210 ✅. Đệm 15,85 trước đây cho ĐÚNG khoảng cách TÂM nhưng SAI bề rộng từng tab (thừa ~31px) — đúng cảnh "giảm đệm và tăng khe cùng lúc". */ padding-left: 0; padding-right: 0; white-space: nowrap; } } /* ══ 17.36 · LOẠT KHE DỌC CÒN LẠI — mỗi trị là HIỆU đo được, không phải suy (cùng lối §20.1: chỉnh một đại lượng khi không chắc giá trị nền thì lấy hiệu giữa số Figma và số đo, cộng thẳng vào lề). ═══════════════════════ */ @media (min-width: 850px) { /* hero H1 → đoạn dẫn +15,84 · đoạn dẫn → nút +20 · khe hai nút 16 → 12,78 */ #content .t4fx-hero .t4fx-hero-mo { margin-top: 15.84px; } #content .t4fx-hero .button.t4fx-nut-trang { margin-top: 20px; } #content .t4fx-hero .button.t4fx-nut-vien { margin-left: 12.78px; } /* CTA H2 → đoạn +16,84 · đoạn → nút +40,93 */ #content .t4fx-cta .t4fx-cta-mo { margin-top: 16.84px; } #content .t4fx-cta .button.t4fx-cta-nut { margin-top: 40.93px; } /* dangnh nhãn → H2 +6 · nút → ô ngành +7,56 · hàng ô 1 → hàng ô 2 +58 */ /* ⚠ Ba trị này SỬA LẠI sau một vòng vọt quá: lần đầu tôi coi lề là thứ DUY NHẤT tạo ra khe nên đặt thẳng "số Figma", hoá ra còn lề của hàng trước cộng vào. Trị dưới đây = trị cũ + HIỆU đo được, đúng lối §20.1. */ #content .t4fx-dn .section-content > .row.t4fx-dn-dau { margin-top: 86.03px; } /* Figma: hộp nút «Nhận tư vấn ngay» y=561,5 h=46 → lưới thẻ (Frame 161) y=694 ⇒ khe **132,5**. Với 95,12 đo được 141,1 — thừa 8,6, và mốc 'Nhận tư vấn ngay → Ngành Bất động sản' lệch +6,5. Ruột thẻ đã đúng (tiêu đề lệch mép thẻ 81 ↔ Figma 83), lệch chỉ nằm ở khe này. */ #content .t4fx-dn .section-content > .row.t4fx-dn-luoi1 { margin-top: 87.5px; } #content .t4fx-dn .section-content > .row.t4fx-dn-luoi2 { margin-top: 60px; } /* faqnhom khe giữa hai nhóm 48 → 43 */ #content .t4fx-faq .t4fx-faq-nhom { margin-top: 43px; } } @media (max-width: 849px) { /* hero 402 H1 → đoạn +16,17 · đoạn → nút 144 → 117 */ #content .t4fx-hero .t4fx-hero-mo { margin-top: 16.17px; } #content .t4fx-hero .button.t4fx-nut-trang { margin-top: 117px; } /* CTA 402 H2 → đoạn +17,51 · đoạn → nút +41,06 */ #content .t4fx-cta .t4fx-cta-mo { margin-top: 17.51px; } #content .t4fx-cta .button.t4fx-cta-nut { margin-top: 41.06px; } /* lydo 402 nhãn → tiêu đề lớn +22,5 */ #content .t4fx-ld .section-content > .row:nth-of-type(2) { margin-top: 22.5px; } /* faq 402 khe giữa hai nhóm 48 → 96 (đang hụt 48) */ #content .t4fx-faq .t4fx-faq-nhom { margin-top: 49px; } } /* ══ 17.37 · Loạt hai — trị = trị cũ + HIỆU đo được ═══════════════════════ */ @media (min-width: 850px) { /* «Gói N» thụt **33** so với mép thẻ (Figma: mực nhãn cách mực đoạn dẫn 33). Một quy tắc đóng bốn mốc: hai mốc «Chọn gói → Gói 1» và hai mốc «Gói 3 → Chạy theo ngân sách». */ /* Nhãn «Gói N» căn GIỮA nên thụt lề chỉ dời mực theo hệ số ~0,27 (đo hai điểm: 0 → −544 · 33 → −535). Cần +24 ⇒ 33 + 24/0,273 ≈ **121**. */ #content .t4fx-goi-the .t4fx-goi-nhan { padding-left: 57px; } /* Bước đầu quy trình phải NGANG HÀNG với «Quy trình làm việc» (dy 0). */ /* ⚠ ':first-of-type' KHÔNG khớp: các '[ux_text]' đều là 'div' nên "phần tử div đầu tiên" là khối khác, không phải bước đầu. Mốc này vẫn đỏ — cần một lớp riêng cho bước đầu, sinh từ 'sinh-uxb-trang3.py'. */ /* ⛔ ĐÃ GỠ 'margin-bottom: 8.93px' (19/08). Nó đẩy nút LÊN để chữa mốc «Báo cáo» → nút hồi bốn bước quy trình còn nằm sai chỗ. Nay bốn bước đã đúng vị trí, khoảng trống dưới nút chỉ do đệm đáy thẻ quyết định và Figma đòi đúng **37 ở CẢ HAI khổ** (desktop 561−480−44 · 402 525−444−44). */ /* hero: hai nút cùng một dòng (dy 0, đang −10) */ #content .t4fx-hero .button.t4fx-nut-vien { vertical-align: top; margin-top: 20px; } /* casestudy: nhãn và «Xem tất cả» — khung 1080 thay vì 1044 (−42,18/+34,6) */ #content .t4fx-cs .section-content > .row.t4fx-hang-nhan > .col { padding-left: 0; padding-right: 0; } } @media (max-width: 849px) { #content .t4fx-goi-the .t4fx-goi-nhan { padding-left: 57.33px; } /* ⛔ ĐÃ GỠ 'margin-bottom: 5.58px' (19/08) — cùng lý do bản desktop ở trên. */ /* (khối căn giữa hai nút hero khổ 402 đã dời lên 17.23 — 'inline-flex') */ /* ⛔ ĐÃ THỬ hạ đệm hộp FAQ 17 → 11 để bớt 12px mỗi bước — HỎNG THÊM (3 → 7 mốc): đổi đệm làm đổi luôn chiều cao hộp nên khe giữa các NHÓM cũng trôi theo. Hai thứ đó phải chỉnh rời nhau, không dùng chung 'padding'. */ /* breadcrumb: mục cuối 13px — quy tắc trước đặt trên 'li' không xuống tới thẻ ''/'' bên trong. */ body.t4-nhom-dv3:where(.t4-trang-dich-vu-google-marketing) nav.t4fx-crumb ol li:last-child, body.t4-nhom-dv3:where(.t4-trang-dich-vu-google-marketing) nav.t4fx-crumb ol li:last-child a, body.t4-nhom-dv3:where(.t4-trang-dich-vu-google-marketing) nav.t4fx-crumb ol li:last-child span { font-size: 10px; line-height: 13px; } } @media (max-width: 849px) { /* ── 17.38 · Casestudy khổ 402: ảnh TRÊN, lời chứng thực DƯỚI ──────────── [figma] 'lydothan_mb' → thanh tab y=2001, trích dẫn y=2353 ⇒ cách 352. Hiệu 239,5 đúng bằng chiều cao ảnh (230) + khe, tức bản dựng đang để ảnh và chữ NẰM NGANG như desktop nên trích dẫn không bị đẩy xuống. */ .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-cs-tren { flex-wrap: wrap; } .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-cs-tren > .col { flex: 0 0 100%; max-width: 100%; margin-left: 0; } /* Trích dẫn → tên (16) · tên → chức danh (0) · chức danh → «Read full» (0) */ /* 13 chứ không 16: mực trích dẫn (5 dòng) thấp hơn hộp của nó, nên khe mực→mực đo được 129 trong khi Figma đòi 126. */ .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-cs-ten { margin-top: 13px; } } @media (max-width: 849px) { /* ── 17.39 · Ruột tab casestudy khổ 402 rộng đúng 352 tại x = 25 ───────── [đo] khối đang rộng **310** bắt đầu ở **46** — thừa 21px đệm mỗi bên do '.panel' và '.col' của Flatsome cộng vào. Figma: 352 tại 25. Ảnh bọc cũng phải 352×230 (đang 310×330). */ .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .tab-panels .panel, .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .tab-panels .panel > .row > .col { padding-left: 0; padding-right: 0; } .t4:where(.t4-trang-dich-vu-google-marketing) #casestudy .t4fx-cs-anh { width: 352px; height: 230px; } /* ⛔ ĐÃ THỬ thụt thanh tab 16px — hỏng thêm 1 mốc, đã gỡ. Ba mốc 'khoang·dx(giữa)' của thanh tab đang ✅ nhờ đệm 15,85 (§20.1); dời cả thanh làm chúng lệch lại. Bề rộng từng tab vẫn chưa khớp Figma (117/226/279/140 so với 86/194/247/109) nhưng KHOẢNG CÁCH TÂM thì khớp — tức phải giảm đệm VÀ tăng khe cùng lúc, không dời cả thanh. */ } @media (min-width: 850px) { /* ── 17.40 · 'chaythue': Figma đặt TAY vị trí dọc từng thẻ ─────────────── Đọc từ mép thẻ (hàng 2 bắt đầu 826): video ten +194 · tối-đa +161,5 · tạo-nhu-cầu và ứng-dụng +181,5. Ba con số khác nhau cho ba thẻ CÙNG số dòng ⇒ không có luật nào dựng lại được, phải khai lệch từng thẻ. */ #content .t4fx-ct-luoi2 .t4fx-ct-ten { min-height: 44px; } #content .t4fx-ct-luoi2 > .col.t4fx-ct-the1 .t4fx-ct-ten { margin-top: 30.5px; } /* đoạn dẫn khối 'chaythue' nhích LÊN 8,47 (mốc 'dy(tâm)') */ #content .t4fx-ct .t4fx-head-2col > .col.t4fx-ct-mo { margin-top: 8.47px; } /* thẻ «Chiến dịch tìm kiếm» có tiêu đề THẤP HƠN hai thẻ cùng hàng 5px */ #content .t4fx-ct-luoi1 > .col.t4fx-ct-the1 .t4fx-ct-ten { margin-top: 25px; } #content .t4fx-ct-luoi1 > .col.t4fx-ct-the1 .t4fx-ct-en { margin-top: 1px; } /* hàng 2 cách hàng 1 thêm 2,5 */ #content .t4fx-ct .section-content > .row.t4fx-ct-luoi2 { margin-top: 18.5px; } #content .t4fx-ct .section-content > .row.t4fx-ct-luoi1 { margin-top: 65.54px; } } /* Bước quy trình ĐẦU TIÊN cách «Quy trình làm việc» thêm 7,88 (§22.1 — nay có lớp riêng 't4fx-goi-buoc1' do bộ sinh phát). */ /* ⛔ ĐÍNH CHÍNH 20/08/2026 — bản trước đặt **−8px** với lý do «mốc đòi dy 0». Cái mốc đó là GHÉP CHÉO: Figma đặt thẻ 3 cao hơn hai thẻ kia đúng 35px, nên 'Quy trình làm việc' của thẻ 1/2 (y=645) TRÙNG y với 'Tiếp nhận thông tin' của thẻ 3 (y=645) — bảng dày ghép hai lớp của HAI THẺ khác nhau và ra 0. Đuổi theo nó thì không bao giờ hội tụ: kéo lên −8 xong mốc thành −23,88. Số ĐÚNG trong CÙNG một thẻ: Figma 'Quy trình làm việc' y=645 → 'Tiếp nhận thông tin' y=680 ⇒ khe **35**. Đo được 11,2 ⇒ bù **+23,8**. (Đã kiểm: chênh lệch 35px giữa thẻ 3 và hai thẻ kia site dựng ĐÚNG — 642,1 ↔ 607,1.) */ #content .t4fx-goi-the .t4fx-goi-buoc1 { margin-top: 15.8px; } @media (max-width: 849px) { /* ⛔ ĐÃ GỠ 'margin-top: -8.01px' (19/08). Nó dựng lại đúng khe 11,1 mà chú thích ngay trên đã kết luận là SAI — Figma cho khe 'Quy trình làm việc' → 'Tiếp nhận thông tin' = **35 ở CẢ HAI khổ** (desktop 333−298, 402: 309−274). Luật ghi đè này làm khổ 402 thiếu 23,9 và đẩy cả bốn bước lên, dồn sai số vào khe cuối→nút. */ /* đoạn dẫn → «Quy trình làm việc» −16,5 */ #content .t4fx-goi-the .t4fx-goi-qt { margin-top: 7.5px; } } @media (max-width: 849px) { /* dvkhac khổ 402 — bốn khe đo được: nhãn→H2 −7,83 · đoạn→thẻ +15 · tiêu đề→mô tả −11 (thẻ tiêu điểm) và +11 (thẻ mờ). */ /* ⛔ ĐÃ THỬ bốn khe này cùng lúc — hỏng thêm 1 mốc, đã gỡ. Bốn khe của 'dvkhac' khổ 402 dính nhau (đổi khe nhãn→H2 làm trôi khe đoạn→thẻ), phải chỉnh TỪNG khe một và đo lại giữa mỗi lần. */ } /* ── 17.42 · Khổ 402: khe TIÊU ĐỀ KHỐI → ĐOẠN DẪN của 'chaythue' và 'dvkhac' [phục vụ] '.t4fx-ct-mo' · '.t4fx-dk .t4fx-head-2col' · [trang] #3 Nền chung 24px đúng cho 'goi' nhưng thừa ~7–8 ở hai khối kia: chaythue Figma dy(hộp) 145 · đo 151,97 ⇒ 24 − 6,97 = 17,03 dvkhac Figma dy(tâm) 89,5 · đo 97,33 ⇒ 24 − 7,83 = 16,17 Khoanh riêng từng khối, ĐỪNG hạ nền chung — 'goi' đang đạt sẽ hỏng theo. */ @media (max-width: 849px) { #content .t4fx-ct .t4fx-head-2col > .col.t4fx-ct-mo { margin-top: 17.03px; } #content .t4fx-dk .t4fx-head-2col > .col:last-child { margin-top: 16.17px; } } /* ── 17.43 · 'dvkhac': khe ẢNH→TÊN và vị trí băng thẻ ───────────────────── [phục vụ] '.t4fx-dk-anh' · '.t4fx-dk-truot' · [trang] #3 (a) Khối ảnh của Flatsome ('.img.has-hover') mang sẵn 'margin-bottom: 16px', cộng với 'margin-top: 16px' của tiêu đề thành **32** — Figma cho **16** (ảnh hết ở 284 tính từ mép thẻ, tên ở 300). Ruột thẻ còn lại đã đúng hết: thẻ cao 608, ảnh 260×287 lệch 25 ↔ Figma 24. (b) Băng thẻ bắt đầu quá sớm: từ mực đoạn dẫn tới mép thẻ Figma đòi **142** (desktop) và **136** (402), đo được 76 và 102. */ #content .t4fx-dk-the .t4fx-dk-anh { margin-bottom: 0; } #content .t4fx-dk-truot { margin-top: 63px; } @media (max-width: 849px) { #content .t4fx-dk-truot { margin-top: 31px; } } /* 'Xem chi tiết' ghim đáy thẻ. Figma để nó ở **564** tính từ mép thẻ (cao 608, tức cách đáy 28); sau khi gỡ 'margin-bottom' thừa của khối ảnh thì nội dung nhích lên còn liên kết đứng yên, đo được 583 — thừa 19. */ /* ⚠ Quan hệ margin↔vị trí KHÔNG tuyến tính ở đoạn đầu — đo ba điểm: 0 → 583 · 9 → 553 · 19 → 543. Bỏ luật này đi thì '