/* ========================================================================== 50-nhom-noi-dung.css — CỬA SỔ D, nhóm trang NỘI DUNG #17 template · #18 san-pham-so-detail · #19 blog · #20 du-an · #21 bai-viet-mau · #22 bai-viet-mau-2 Mọi con số LẤY TỪ figma-spec + tools/hinh-hoc.py, không ước lượng theo ảnh. Kiểm lại bằng: python3 tools/hinh-hoc.py trang21 bai python3 tools/nghiem-thu-tong.py trang21 --slug bai-viet-mau ⛔ Tệp này CHỈ chứa luật thuộc phạm vi sáu trang trên (III.4.0 luật KHÔNG ĐỘNG CHẠM). Cần sửa một luật dùng chung thì BÁO cho cửa sổ A, đừng sửa '00'/'10'/'20'/'21'/'30' ở đây. ========================================================================== */ /* ========================================================================== 20. TRANG #21 'bai-viet-mau' VÀ #22 'bai-viet-mau-2' — BÀI VIẾT CHI TIẾT Figma 605:6076 / 1385:22809 (#21) · 722:31587 / 1385:22987 (#22) Hai trang dùng CHUNG bộ class 't4fx-bv-*' / 't4fx-lq-*': đã đối chiếu từng lớp giữa 'figma-spec/trang21.json' và 'trang22.json' — mọi chuỗi chữ và mọi số đo giống hệt nhau, khác đúng năm ảnh và cấp 3 breadcrumb ('uxb/ban-ke-bai-viet-mau.md' §0). ========================================================================== */ /* --- 20.1 Breadcrumb: giành lại số của CHÍNH hai trang này ---------------- [phục vụ] phần tử: breadcrumb child theme | khối: 'nav.t4fx-crumb' [trang] bai-viet-mau, bai-viet-mau-2 | [figma] crumb_mb 1385:22810 — "Home" x=25 w=28 · mũi tên 32 (53→85) · "Hệ sinh thái kiến thức" w=103 · "Blog" x=220 · "Bài viết" x=274 ⇒ khoảng cách giữa hai mục = **32px** [lý do vượt panel] breadcrumb do child theme in ra, không có phần tử builder ⛔ HAI luật TOÀN CỤC nằm trong tệp của trang KHÁC đang đè lên hai trang này (cùng cảnh đã ghi ở mục 13.7 của '41-page-chinh-sach-bao-mat.css'): '40-page-xu-ly-loi-sai-google-ads.css' .t4fx-crumb li + li::before { width: 20px } '44-nhom-ggm.css' nav.t4fx-crumb ol li:last-child * { line-height: 13px } Cỡ chữ 10px của trang #4 thì TRÙNG với hai trang này nên không phải giành. */ @media (max-width: 849px) { .t4.t4-trang-bai-viet-mau .t4fx-crumb li + li::before, .t4.t4-trang-bai-viet-mau-2 .t4fx-crumb li + li::before { width: 32px; } .t4.t4-trang-bai-viet-mau nav.t4fx-crumb ol li:last-child, .t4.t4-trang-bai-viet-mau nav.t4fx-crumb ol li:last-child *, .t4.t4-trang-bai-viet-mau-2 nav.t4fx-crumb ol li:last-child, .t4.t4-trang-bai-viet-mau-2 nav.t4fx-crumb ol li:last-child * { line-height: 22px; } } /* --- 20.2 Khung hai section ---------------------------------------------- [phục vụ] phần tử: Section | khối: thân bài · dải cùng chuyên mục [trang] bai-viet-mau, bai-viet-mau-2 | [figma] 605:6116 — khung 1900×2283 [lý do vượt panel] panel không đặt được bề rộng 1232 lẫn nét kẻ phân cách Bảng số (toạ độ trong khung 1900×2283, gốc là mép trên section): thân bài 'bai' y= 56 h=1587,25 nét kẻ 1232×0,5 y=1675 dải 'lienquan' y=1707 h= 520 mép dưới khung y=2283 ⇒ đệm đáy 56 ⇒ khe trên 56 · giữa 31,75 + kẻ + 31,75 · dưới 56. Khổ 402 (1385:22856): khe trên **24** · giữa 31,75+31,75 · dưới **23,6** — KHÁC desktop, không suy từ nhau (III.14.2-6). ⛔ 'goc' của mốc chiều cao là HÀNG '.t4fx-bv-hang', không phải section: khe 56 phía trên nằm ở 'padding-top' của section nên section cao hơn node Figma đúng 56. Xem 'scripts/map-trang21.json'. */ #content .t4fx-bv { padding: 56px 0 55.75px; position: relative; } #content .t4fx-bv > .section-content { position: relative; z-index: 1; } /* THẺ TRẮNG 1280×2219,25 ('Frame 1707479535', fill #ffffff, đệm 24) nằm trên nền '#fcfbf6' của section. Nó phủ CẢ thân bài lẫn dải, kể cả khoảng 64px giữa hai khối — đây là lý do hai khối phải nằm trong MỘT section. ⛔ Vẽ bằng ::before, không thêm phần tử: một '[row]' bọc nữa là ba tầng 'row_inner' lồng nhau, mà WordPress phân tích shortcode cùng tên lồng nhau sai chỗ đóng. Bản đầu để hai section rời và chặng 3 báo ΔE 2,94 ở khoảng giữa (#ffffff ↔ #fcfbf6) — 40 vùng đỏ. */ #content .t4fx-bv::before { content: ""; position: absolute; z-index: 0; top: 32px; bottom: 31.75px; left: 50%; transform: translateX(-50%); width: 1280px; max-width: 100%; background: #fff; } /* Nét kẻ 1232×0,5 #a2a2a2 giữa hai khối — 'strokeDashes' RỖNG nên nét LIỀN (III.15.5; trang #2 là nét đứt [3,2], đừng bê sang). */ #content .t4fx-lq-boc { margin-top: 64px; position: relative; } #content .t4fx-lq-boc::before { content: ""; position: absolute; top: -32px; left: 0; right: 0; border-top: .5px solid #a2a2a2; } #content .t4fx-bv .section-content > .row.row-collapse { max-width: 1232px; } /* --- 20.3 Hình học hai cột (LUẬT 5 · III.14) ------------------------------ [phục vụ] phần tử: Row/Col | khối: '.t4fx-bv-hang' [trang] bai-viet-mau, bai-viet-mau-2 | [figma] 677:6759 [lý do vượt panel] span 1/12 của Flatsome không dựng ra 842/358 FRAME 1232×1587 — 2 con, xếp NGANG thân bài x= 0,00 w=842,00 cột phải x=874,00 w=358,00 khe=+32,00 cộng lại 1232,00 ↔ bề rộng cha 1232,00 ✅ 1232 không phải bội của 90 ⇒ khai px, đúng III.14.0. */ #content .t4fx-bv-hang { align-items: flex-start; } #content .col.t4fx-bv-chinh { flex: 0 0 842px; max-width: 842px; } #content .col.t4fx-bv-ben { flex: 0 0 358px; max-width: 358px; margin-left: 32px; } /* --- 20.4 Thân bài: kiểu chữ và khe dọc ---------------------------------- [phục vụ] phần tử: Text ×5 + Image ×2 | khối: '.t4fx-bv-chinh' [trang] bai-viet-mau, bai-viet-mau-2 | [figma] 'bai' — Frame 1707479299 [lý do vượt panel] panel không có giãn dòng lẻ 30,052 / 16,392 / 24 Khe dọc: "Chuyên mục" h=16 → **+20** → khối chữ, rồi **+16** đều bên trong (H1 30 · lời dẫn 72 · meta 22 · ảnh 473,62 · đoạn 192 · ảnh · đoạn). ⛔ KHE KHAI THEO TỪNG LỚP, KHÔNG KHAI BẰNG '> *'. Ở khổ 402 hai cột đổi sang 'display: contents' (mục 20.8) — thứ đó đổi CÁCH DÀN, KHÔNG đổi CÂY DOM, nên mọi bộ chọn '.t4fx-bv-hang > …' thôi khớp trong khi bố cục vẫn trông đúng. Đã trả giá: bốn thẻ liên quan ở khổ 402 dính sát nhau (bước 84 thay vì 124) và mốc neo section lệch 1440px. */ /* Hai '[row_inner]' nằm trong cột bọc, và hàng mục lục: Flatsome cho '.row' lề âm −15px cùng 'max-width' riêng — trả về 0/100% để chúng đúng bề rộng node Figma. ⛔ Bỏ luật này ra là ba thẻ 400 của dải rớt xuống xếp DỌC (đã trả giá: dx −400 thay vì +416). */ /* ⛔ LONGHAND: 'margin: 0' xoá luôn lề DƯỚI mà hai hàng này đang mang ('.t4fx-bv-hop' 32 · '.t4fx-lq-hang' 16) — III.14.2-5. Đã trả giá: hàng "Các bài viết liên quan" nhảy lên 32px và dải thẻ nhảy lên 16px. */ /* ⛔ LONGHAND: 'margin: 0' xoá luôn lề DƯỚI 32 mà hàng này đang mang (III.14.2-5). Đã trả giá: hàng "Các bài viết liên quan" nhảy lên 32px. */ #content .t4fx-bv-hop.row { margin-left: 0; margin-right: 0; width: 100%; max-width: none; } #content .t4fx-bv-dm { margin-bottom: 20px; } #content .t4fx-bv-h1, #content .t4fx-bv-dan, #content .t4fx-bv-meta, #content .t4fx-bv-anh, #content .t4fx-bv-than-1 { margin-bottom: 16px; } #content .t4fx-bv-than-2 { margin-bottom: 0; } #content .t4fx-bv-dm p { font-family: var(--t4-font-body); font-weight: 400; font-size: 12px; line-height: 16.392px; color: #a2a2a2; margin: 0; } #content .t4fx-bv-h1 h1 { font-family: var(--t4-font-body); font-weight: 700; font-size: 22px; line-height: 30.052px; color: #000; margin: 0; letter-spacing: 0; text-transform: none; } /* Lời dẫn và hai đoạn thân bài: 'text.can_ngang = JUSTIFIED' ở CẢ HAI KHỔ — bảng dày KHÔNG kiểm kiểu căn lề (II.K-6), chỉ ảnh nhiệt của chặng 3b nhìn ra, nên khai tường minh ngay từ đầu. */ #content .t4fx-bv-dan p, #content .t4fx-bv-than p { font-family: var(--t4-font-body); font-weight: 400; font-size: 14px; line-height: 24px; color: #353535; margin: 0; text-align: justify; } /* Hàng meta 258×22 — xếp NGANG: ngày 145 · +10 · "|" 5 · +10 · nhãn 68 · +5 · số 15. Bốn lớp chữ RIÊNG bên Figma nên phải là bốn phần tử bên site, nếu không bảng dày mất ba mốc. */ #content .t4fx-bv-meta p, #content .t4fx-lq-meta p { display: flex; align-items: center; margin: 0; font-family: var(--t4-font-body); font-weight: 400; color: #7c7c7c; } #content .t4fx-bv-meta p { font-size: 12px; line-height: 16.392px; min-height: 22px; } #content .t4fx-bv-meta-gach, #content .t4fx-lq-meta-gach { font-size: 16px; line-height: 21.6px; } #content .t4fx-bv-meta-gach { margin: 0 10px; } #content .t4fx-bv-meta-nhan { margin-right: 5px; } /* Ảnh thân bài 842×473,62 bo 5. ⚠ HAI ẢNH TỈ LỆ KHÁC NHAU: ảnh 1 nguồn 1299×731 (1,777) trùng khít khung Figma, ảnh 2 nguồn 1299×866 (1,500) thì KHÔNG. Để 'height: auto' thì ảnh 2 cao 561,33 thay vì 473,62. Ghim chiều cao + 'object-fit: cover' cho cả hai — Figma khai 'scaleMode: FILL', tức chính là cắt-phủ. */ #content .t4fx-bv-anh img { height: 473.62px; object-fit: cover; border-radius: 5px; } /* [figma] luật dùng chung — lớp rộng 25.5px có ở 2 trang; đại diện: trang21:'677:6764' · trang22:'722:31681' (tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */ /* --- 20.5 Cột phải: hộp "Tóm tắt nội dung" ------------------------------- [phục vụ] phần tử: Text ×7 + Row/Col lồng | khối: '.t4fx-bv-hop' [trang] bai-viet-mau, bai-viet-mau-2 | [figma] Frame 1707479356 358×310 [lý do vượt panel] viền + bo góc của hộp, và nét kẻ dưới từng mục hàng tiêu đề 358×40 (đệm dưới 8) → **+20** → HỘP 358×250 → **+32** → khối "Các bài viết liên quan" HỘP: đệm 24 mỗi cạnh · viền 1px #155446 α .5 · bo 5 6 mục cao 19, mỗi mục theo sau MỘT nét kẻ; nhịp 24·51·59·86·… = 35 ⇒ mục · đệm dưới 8 · kẻ · lề dưới 8 ⛔ 'padding' của Figma đo từ BÊN TRONG nét viền (III.14.2-4): viền 1 + đệm 24, KHÔNG phải đệm 25. ⚠ HAI hàng tiêu đề đặt đệm TRÊN 18px chứ không căn giữa: Figma vẽ chữ ở y=18…32 trong hàng cao 40 có đệm dưới 8 — tức mực chữ nằm SÁT ĐÁY vùng nội dung, tâm ở 25. Căn giữa cho tâm 16 và lệch đúng 9px (đã đo). */ #content .t4fx-bv-hop-ten, #content .t4fx-bv-lq-ten { height: 40px; padding: 11.9px 0 8px; display: flex; align-items: flex-start; margin-bottom: 20px; } #content .t4fx-bv-hop { margin-bottom: 32px; } #content .t4fx-bv-hop-ten h2, #content .t4fx-bv-lq-ten h2, #content .t4fx-lq-ten h2 { font-family: var(--t4-font-head); font-weight: 700; font-size: 20px; line-height: 26.66px; color: var(--t4-dark-moss); margin: 0; letter-spacing: 0; text-transform: none; } /* Biểu tượng danh sách 25,5×14,17 tô camel. ⛔ KHÔNG dựng bằng [ux_image]: nó là VECTOR bên Figma nên không nằm trong danh sách ảnh của bảng dày ('lop_anh_figma' chỉ lấy lớp tô IMAGE); thêm một là làm lệch phép ghép-theo-thứ-tự của SÁU ảnh còn lại. Vẽ bằng mặt nạ CSS, đúng lối đã dùng cho bốn biểu tượng 'khacbiet' của trang #2. */ /* ⛔ MẶT NẠ PHẢI CÓ viewBox BÓ SÁT, và 'center/contain' với khung VUÔNG là sai. Bộ Material dùng khung 960×960 trong khi biểu tượng này tỉ lệ 1,8; 'contain' co nó về 14,17×14,17 rồi vẽ vào giữa ⇒ đo trên ảnh ra **9,5×8,5** thay vì **25×13,5**. Cùng cái bẫy đã gặp ở biểu tượng ba gạch của trang #19 (mục 21.3) — bảng dày mù vì đây không phải lớp chữ cũng không phải lớp tô IMAGE. Hình vẽ lại theo số đo quét từ chính ảnh Figma: ba hàng ở y ≈ 1,5 · 7,09 · 12,67 (cao 3), chấm tròn r 1,5 ở x = 1,5, thanh từ x = 6 tới 25,5. */ #content .t4fx-bv-hop-ten::before { content: ""; flex: 0 0 25.5px; width: 25.5px; height: 14.17px; margin: 5.96px 8px 0 0; background-color: var(--t4-camel); -webkit-mask: no-repeat center/25.5px 14.17px var(--t4fx-icon-ml); mask: no-repeat center/25.5px 14.17px var(--t4fx-icon-ml); --t4fx-icon-ml: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.5 14.17'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5'/%3E%3Crect x='6' y='0' width='19.5' height='3'/%3E%3Ccircle cx='1.5' cy='7.085' r='1.5'/%3E%3Crect x='6' y='5.585' width='19.5' height='3'/%3E%3Ccircle cx='1.5' cy='12.67' r='1.5'/%3E%3Crect x='6' y='11.17' width='19.5' height='3'/%3E%3C/svg%3E"); } #content .t4fx-bv-hop > .col > .col-inner { border: 1px solid rgba(21, 84, 70, .5); border-radius: 5px; padding: 23px; } #content .t4fx-bv-muc p { font-family: var(--t4-font-body); font-weight: 500; font-size: 14px; line-height: 19.124px; color: var(--t4-camel-dark); margin: 0; } /* ⚠ Nét kẻ '.5px' được Chrome làm tròn thành 1px thật, nên hộp mục cao 19,124 + 8 + **1** = 28,124. Bước Figma là 35 ⇒ lề dưới 6,88, không phải 8. Đo thật rồi mới khai (bước cũ ra 36,13 và dồn 5,6px qua sáu mục). */ #content .t4fx-bv-muc { padding-bottom: 8px; border-bottom: .5px solid #a2a2a2; margin-bottom: 6.88px; } #content .t4fx-bv-muc:last-child { margin-bottom: 0; } /* --- 20.6 Cột phải: bốn thẻ "Các bài viết liên quan" + nút ---------------- [phục vụ] phần tử: Image Box ×4 + Button | khối: '.t4fx-bv-lq' [trang] bai-viet-mau, bai-viet-mau-2 | [figma] Frame 1707479544 358×566 [lý do vượt panel] Image Box không có ô đặt bề rộng ảnh theo px thẻ 358×84 = ảnh 150 + khe 10 + chữ 198 (khổ 402: chữ **194**) thẻ · lề dưới 20 · nét kẻ · đệm trên 20 · thẻ (3 kẻ cho 4 thẻ ⇒ bước 124) Link 358×30 — đệm 4/136 · viền 1px #1f1f1f INSIDE · bo 3, cách thẻ cuối 20 ⛔ 'margin: 0' trên '.box' là chỗ đã trả giá: nó ĐÈ luôn lề dưới 20 và bước giữa hai thẻ tụt từ 124 xuống 105. Khai từng cạnh, đừng dùng shorthand (III.14.2-5). */ /* ⚠ Bước giữa hai thẻ là **124** (Figma 402·526·650·774). Thẻ 84 + lề dưới + nét kẻ + đệm trên 20; nét '.5px' Chrome vẽ thành 1px thật ⇒ lề dưới 19, không phải 20. Đặt 20 thì bước ra 125 và thẻ 4 lệch 3px. */ #content .box.t4fx-bv-lq { display: flex; align-items: center; margin: 0 0 19px; } #content .box.t4fx-bv-lq .box-image { flex: 0 0 150px; width: 150px; } #content .box.t4fx-bv-lq .box-image img { width: 150px; height: 84px; object-fit: cover; border-radius: 5px; } #content .box.t4fx-bv-lq .box-text { flex: 1 1 auto; padding: 0; margin-left: 10px; min-width: 0; } #content .t4fx-bv-lq-tt p { font-family: var(--t4-font-body); font-weight: 600; font-size: 14px; line-height: 19.124px; color: #000; margin: 0; } #content .box.t4fx-bv-lq + .box.t4fx-bv-lq { border-top: .5px solid #a2a2a2; padding-top: 20px; } #content a.button.t4fx-bv-xem { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 30px; height: 30px; padding: 4px 136px; border: 1px solid var(--t4-text); border-radius: 3px; background: transparent; margin: 0; } #content a.button.t4fx-bv-xem span { font-family: var(--t4-font-body); font-weight: 700; font-size: 14px; line-height: 22px; color: var(--t4-text); letter-spacing: 0; text-transform: none; } /* --- 20.7 Dải "Google Marketing" + 3 thẻ --------------------------------- [phục vụ] phần tử: Text ×4 + Row/Col + Image Box ×3 | khối: '.t4fx-lq' [trang] bai-viet-mau, bai-viet-mau-2 | [figma] 676:6660 1232×520 [lý do vượt panel] chip là khung KHÔNG có nền và không có viền trong Figma (đã soi 'fills'/'strokes' của 'Frame text 7/8/9': rỗng cả hai) — chỉ là khoảng đệm 4px hai bên, nên không dùng được kiểu chip có sẵn của panel hàng tiêu đề 1232×40 (đệm dưới 8): "Google Marketing" 165 · +8 · khung chip 191 (đệm ngang 4) chứa 57 · +4 · 59 · +4 · 59 ⇒ bước tâm chữ 62/63 hàng thẻ 1232×464: 3 cột 400, khe 16 ⇒ 400·3 + 16·2 = 1232 ✅ thẻ: ảnh 400×225 bo 5 · +20 · khối chữ 219 (tiêu đề 25 · +4 · mô tả 66 · **+102** · meta 22) — khổ 402: ảnh 354×199,12 và khe cuối **+38** */ #content .col.t4fx-lq-dau { flex: 0 0 100%; max-width: 100%; margin-bottom: 16px; } #content .col.t4fx-lq-dau > .col-inner { display: flex; align-items: flex-start; height: 40px; padding: 11.9px 0 8px; } /* Khe tiêu đề → mực chip đầu là **16**: 8 (khe Figma) + 4 (đệm khung chip 'Frame 1707479342') + 4 (đệm của chính chip). */ #content .t4fx-lq-ten { margin-right: 12px; } #content .t4fx-lq-chip p { font-family: var(--t4-font-body); font-weight: 700; font-size: 12px; line-height: 16.392px; color: var(--t4-gray-mid); margin: 0; } #content .t4fx-lq-chip { padding: 0 4px; margin-top: 7.63px; } /* ⛔ ĐÃ BỎ '.t4fx-lq-chip:first-of-type' — MỌI anh em ở đây đều là 'div' nên ':first-of-type' trỏ vào '.t4fx-lq-ten', không bao giờ khớp một chip (bàn giao 21f §4). Khe 4px của chip đầu nay nằm trong 'margin-right' của tiêu đề ngay trên. */ /* Khe 4px GIỮA hai chip — Figma đặt ba khung chip cách nhau 4 (x=177·238·301). Thiếu nó thì bước tâm chữ tụt từ 62/63 xuống 57/58. */ #content .t4fx-lq-chip + .t4fx-lq-chip { margin-left: 4px; } #content .col.t4fx-lq-cot { flex: 0 0 400px; max-width: 400px; } #content .col.t4fx-lq-cot + .col.t4fx-lq-cot { margin-left: 16px; } #content .box.t4fx-lq-the { margin: 0; } #content .box.t4fx-lq-the .box-image img { width: 100%; height: 225px; object-fit: cover; border-radius: 5px; } #content .box.t4fx-lq-the .box-text { padding: 20px 0 0; } #content .t4fx-lq-tt h3 { font-family: var(--t4-font-body); font-weight: 700; font-size: 18px; line-height: 24.588px; color: #000; margin: 0; letter-spacing: 0; text-transform: none; } #content .t4fx-lq-mo p { font-family: var(--t4-font-body); font-weight: 400; font-size: 14px; line-height: 22px; color: #353535; margin: 4px 0 0; text-align: justify; } #content .t4fx-lq-meta p { font-size: 10px; line-height: 13.66px; min-height: 22px; margin-top: 102px; } #content .t4fx-lq-meta-gach { margin: 0 10px; } #content .t4fx-lq-meta-nhan { margin-right: 5px; } /* --- 20.8 Khổ 402 — MỘT CỘT và ĐỔI THỨ TỰ -------------------------------- [phục vụ] phần tử: Row/Col | khối: '.t4fx-bv-hang' [trang] bai-viet-mau, bai-viet-mau-2 | [figma] 'bai_mb' 1385:22883 354×2686 [lý do vượt panel] panel chỉ ẩn/hiện được, không đổi được THỨ TỰ Thứ tự khổ 402 XEN KẼ hai cột: Chuyên mục · H1 · lời dẫn · meta → HỘP Tóm tắt → ảnh 1 · đoạn 1 · ảnh 2 · đoạn 2 → khối liên quan · nút ⇒ không đảo được bằng 'order' trên hai CỘT. Cho hai cột 'display: contents' để con của chúng thành mục flex của chính hàng, rồi đánh 'order' từng mục. Giữ nguyên DOM nên T0 không đổi và 4T vẫn kéo-thả được. ⛔ HAI CẠM BẪY của cách này, đã trả giá cả hai: 1. 'display: contents' KHÔNG đổi cây DOM ⇒ '.t4fx-bv-hang > .box' không khớp gì cả. Mọi bộ chọn ở đây bám CLASS, không bám '>'. 2. ':nth-of-type' vô dụng khi MỌI anh em đều là 'div' (bàn giao 21f §4). Vì vậy shortcode phát class riêng '-1'/'-2' cho từng ảnh và từng đoạn. Khe dọc khổ 402 là **20 đều** cho cả mười khối (bản in hình học), khác hẳn desktop (20 rồi 16) — III.14.2-6. */ @media (max-width: 849px) { /* Khổ 402: thẻ trắng RỘNG BẰNG section (Figma '1385:22857' 402×4083,6 — đúng bằng khung '1385:22856'), nên không còn khe 32 trên/dưới; toàn bộ khe 24 là ĐỆM của thẻ. */ #content .t4fx-bv { padding: 24px 0 23.6px; } #content .t4fx-bv::before { top: 0; bottom: 0; width: 100%; } /* ⛔ '40-page-xu-ly-loi-sai-google-ads.css' khai TOÀN CỤC '.t4 .section-content > .row { width: 352px }' ở khổ ≤849 — 'width' thắng 'max-width' nên phải giành lại cả hai. Cùng loại nợ kiến trúc đã có hồ sơ I.6 (18/08); ở đây chỉ giành phạm vi của hai trang này. */ #content .t4fx-bv .section-content > .row.row-collapse { width: 354px; max-width: 354px; } /* Figma vẽ hàng tiêu đề dải TRÀN 10px ở khổ 402 (165+8+191 = 364 ↔ 354) — giữ nguyên một dòng, đừng để xuống dòng. */ #content .col.t4fx-lq-dau > .col-inner { flex-wrap: nowrap; } #content .t4fx-lq-ten h2, #content .t4fx-lq-chip p { white-space: nowrap; } /* ⛔ 'flex-shrink' mặc định là 1: hàng tràn 10px thì trình duyệt CO cả tiêu đề lẫn ba chip, và cụm chip trôi sang TRÁI 4,5px so với Figma (đo trên ảnh nhiệt: mép chip đầu 7,0 ↔ 11,5). Figma để tràn sang phải, không co. */ #content .col.t4fx-lq-dau > .col-inner > * { flex: 0 0 auto; } #content .t4fx-bv-hang { display: flex; flex-wrap: wrap; } #content .col.t4fx-bv-chinh, #content .col.t4fx-bv-ben, #content .t4fx-bv-chinh > .col-inner, #content .t4fx-bv-ben > .col-inner { display: contents; } #content .t4fx-bv-dm, #content .t4fx-bv-h1, #content .t4fx-bv-dan, #content .t4fx-bv-meta, #content .t4fx-bv-hop-ten, #content .t4fx-bv-hop, #content .t4fx-bv-anh, #content .t4fx-bv-than, #content .t4fx-bv-lq-ten, #content .box.t4fx-bv-lq, #content a.button.t4fx-bv-xem { flex: 0 0 100%; max-width: 100%; margin-bottom: 20px; } #content .box.t4fx-bv-lq { margin-bottom: 19px; } /* ⛔ HAI TRANG KHÁC NHAU ĐÚNG MỘT CON SỐ Ở KHỔ 402: khe dọc giữa mười khối của 'Frame 1707479556' là **20** ở #21 và **16** ở #22 (bản in hình học). Chín khe × 4px = 36px — đúng bằng chênh lệch chiều cao khung ('bai_mb' 2686,25 ↔ 2650,25). Bản kê ban đầu ghi "mọi số đo giống hệt nhau" và SAI ở đúng chỗ này; 'kiem-cao-section.js' bắt được. Khe BÊN TRONG hai khung con ('1707479356' và '1707479544') vẫn là 20 ở cả hai trang, nên 'hop-ten' và 'lq-ten' KHÔNG đổi. */ .t4.t4-trang-bai-viet-mau-2 #content .t4fx-bv-dm, .t4.t4-trang-bai-viet-mau-2 #content .t4fx-bv-h1, .t4.t4-trang-bai-viet-mau-2 #content .t4fx-bv-dan, .t4.t4-trang-bai-viet-mau-2 #content .t4fx-bv-meta, .t4.t4-trang-bai-viet-mau-2 #content .t4fx-bv-hop, .t4.t4-trang-bai-viet-mau-2 #content .t4fx-bv-anh, .t4.t4-trang-bai-viet-mau-2 #content .t4fx-bv-than, /* Bài viết thuộc chuyên mục 'du-an' chạy biến thể #22 — khe dọc 16, không phải 20. Lớp thân đặt ở 'functions.php'; '.t4fx-bv-noidung' là khối thân của bài thật, tương ứng 'than-1/than-2' của trang mẫu. */ .t4.t4-bai-du-an #content .t4fx-bv-dm, .t4.t4-bai-du-an #content .t4fx-bv-h1, .t4.t4-bai-du-an #content .t4fx-bv-dan, .t4.t4-bai-du-an #content .t4fx-bv-meta, .t4.t4-bai-du-an #content .t4fx-bv-hop, .t4.t4-bai-du-an #content .t4fx-bv-anh, .t4.t4-bai-du-an #content .t4fx-bv-noidung { margin-bottom: 16px; } #content a.button.t4fx-bv-xem { margin-bottom: 0; } #content .t4fx-bv-dm { order: 1; } #content .t4fx-bv-h1 { order: 2; } #content .t4fx-bv-dan { order: 3; } #content .t4fx-bv-meta { order: 4; } #content .t4fx-bv-hop-ten { order: 5; } #content .t4fx-bv-hop { order: 6; } #content .t4fx-bv-anh-1 { order: 7; } #content .t4fx-bv-than-1 { order: 8; } /* ⛔ BÀI VIẾT THẬT chỉ có MỘT khối thân ('.t4fx-bv-noidung'), không có 'than-1/than-2' như trang mẫu. Thiếu dòng này thì nó không nhận 'order' nào, mặc định về 0 và **nhảy lên đầu trang** — toàn bộ thân bài hiện TRƯỚC tiêu đề. Hai cột đang 'display: contents' nên lỗi này không lộ ra ở khổ rộng, chỉ khổ 402 mới thấy. */ #content .t4fx-bv-noidung { order: 8; } #content .t4fx-bv-anh-2 { order: 9; } #content .t4fx-bv-than-2 { order: 10; } #content .t4fx-bv-lq-ten { order: 11; } #content .t4fx-bv-lq-1 { order: 12; } #content .t4fx-bv-lq-2 { order: 13; } #content .t4fx-bv-lq-3 { order: 14; } #content .t4fx-bv-lq-4 { order: 15; } #content a.button.t4fx-bv-xem { order: 16; } #content .t4fx-bv-anh img { height: 199.12px; } #content .box.t4fx-bv-lq .box-text { margin-left: 10px; } #content a.button.t4fx-bv-xem { padding: 4px 134px; } #content .col.t4fx-lq-cot, #content .col.t4fx-lq-cot + .col.t4fx-lq-cot { flex: 0 0 100%; max-width: 100%; margin-left: 0; } #content .col.t4fx-lq-cot + .col.t4fx-lq-cot { margin-top: 16px; } #content .box.t4fx-lq-the .box-image img { height: 199.12px; } #content .t4fx-lq-meta p { margin-top: 38px; } } /* --- 20.9 BÀI VIẾT THẬT ('single.php') — phần Figma KHÔNG vẽ --------------- [phục vụ] '.t4fx-bv-noidung' · [trang] mọi bài viết (post), không phải #21 [figma] Figma vẽ thân bài bằng ĐÚNG hai đoạn văn và hai ảnh, không có heading, danh sách hay bảng — vì nó là bản mẫu, không phải bài thật. [lý do vượt panel] nội dung bài do người viết gõ trong trình soạn thảo, nên không có phần tử builder nào để đặt lớp; phải khai theo THẺ. ⚠ Đây là phần ĐI THÊM so với bản thiết kế, đã ghi ở qa/danh-sach-danh-doi.md. Nguyên tắc: mọi giá trị bám sát thứ Figma ĐÃ khai cho khối tương đương — ảnh lấy đúng khung ảnh thân bài, chữ lấy đúng kiểu đoạn văn thân bài — chỉ heading là phải tự chọn, và chọn theo thang chữ của chính bộ token. */ #content .t4fx-bv-noidung > *:first-child { margin-top: 0; } #content .t4fx-bv-noidung p { margin: 0 0 16px; } #content .t4fx-bv-noidung p:last-child { margin-bottom: 0; } /* Ảnh trong thân bài dùng LẠI khung ảnh của Figma (842×473,62 bo 5, cắt-phủ). ⛔ Không để 'height: auto': ảnh người viết chèn vào có đủ mọi tỉ lệ, mà Figma khai 'scaleMode: FILL' cho khung này — cùng lý do đã ghi ở mục 20.4 cho hai ảnh của trang mẫu. */ #content .t4fx-bv-noidung figure { margin: 0 0 16px; } #content .t4fx-bv-noidung img { display: block; width: 100%; height: 473.62px; object-fit: cover; border-radius: 5px; } /* Heading thân bài — Figma không vẽ, chọn theo thang chữ của bộ token: H2 24/32 và H3 18/26, cùng phông tiêu đề và màu lá như mọi H2 khác của trang. ⚠ ĐỪNG để nguyên cỡ mặc định của '10-base.css' (40px): nó là cỡ tiêu đề SECTION, đặt trong thân bài thì lấn át cả tiêu đề bài viết. */ #content .t4fx-bv-noidung h2, #content .t4fx-bv-noidung h3 { font-family: var(--t4-font-head); color: var(--t4-dark-moss); margin: 24px 0 8px; } #content .t4fx-bv-noidung h2 { font-size: 24px; line-height: 32px; font-weight: 600; } #content .t4fx-bv-noidung h3 { font-size: 18px; line-height: 26px; font-weight: 600; } #content .t4fx-bv-noidung ul, #content .t4fx-bv-noidung ol { margin: 0 0 16px 20px; } /* Mục lục tự sinh: chữ nằm trong '', mà Flatsome tô màu nhấn cho mọi liên kết trong nội dung ⇒ mất màu lạc đà của Figma nếu không giành lại. */ #content .t4fx-bv-muc p a { color: inherit; text-decoration: none; border: 0; } #content .t4fx-bv-muc p a:hover { color: var(--t4-leaf); } /* --- 20.10 Dải chip của bài viết ở khổ 402: CUỘN NGANG --------------------- [phục vụ] '.t4fx-lq-dau > .col-inner' · [trang] chỉ BÀI VIẾT ('single-post') [figma] 'lienquan_mb' — 'Frame 1707479342' khai 'wrap: NO_WRAP', chip cuối kết ở **x = 360** trong khung **354**: chính bản thiết kế đã tràn 6px. ⇒ Figma muốn MỘT HÀNG chạy quá khung, không muốn xuống dòng. Cách diễn đạt đúng trên web là cuộn ngang — y như dải tab «Chuyên đề» của #19 (§3.3 phiếu 'blog'), không phải cho xuống dòng. ⛔ KHOÁ VÀO 'body.single-post', KHÔNG áp chung. Trên trang mẫu #21/#22 và khối 'nhom3' của #19, chip là «Chủ đề 1» (49px) nên ba chip vừa khung và không có gì để cuộn; thêm 'overflow' ở đó là đổi hộp của ba trang đang 0 ❌ mà chẳng được gì. Chỉ bài viết thật mới có tên chuyên mục dài («Chuyên đề 1» 66px) và mới tràn. */ @media (max-width: 849px) { body.single-post #content .col.t4fx-lq-dau > .col-inner { overflow-x: auto; scrollbar-width: none; } body.single-post #content .col.t4fx-lq-dau > .col-inner::-webkit-scrollbar { display: none; } } /* ⛔ KHỐI 402 CỦA RIÊNG 20.9 PHẢI ĐẶT Ở ĐÂY, KHÔNG GỘP VÀO KHỐI 402 CỦA 20.8. Khối 20.8 nằm TRƯỚC 20.9 trong tệp; hai bộ chọn cùng đặc hiệu (1,1,1) nên thứ tự nạp quyết định — nhét luật 402 vào khối cũ thì luật desktop của 20.9 viết sau sẽ đè lại và **ảnh khổ 402 vẫn cao 473,62**. Đã đo và dính đúng một lần: media query KHÔNG cộng điểm đặc hiệu (III.19). */ @media (max-width: 849px) { #content .t4fx-bv-noidung img { height: 199.12px; } #content .t4fx-bv-noidung h2 { font-size: 20px; line-height: 28px; } #content .t4fx-bv-noidung h3 { font-size: 16px; line-height: 24px; } } /* ========================================================================== 21. TRANG #19 'blog' — Figma 600:3013 / 1385:21735 Bản kê + mọi bảng hình học: 'uxb/ban-ke-blog.md'. ⚠ Khối 'nhom3' TRÙNG KHÍT 'lienquan' của #21 nên dùng lại bộ class 't4fx-lq-*' của mục 20.7 (III.4.0 luật NÂNG CẤP) — chỉ giành lại KHE DỌC, vì #19 không có nét kẻ phía trên khối đó. ========================================================================== */ /* --- 21.1 Hero 1900×450 --------------------------------------------------- [phục vụ] phần tử: Section + Text ×2 | khối: '.t4fx-bl-hero' [trang] blog | [figma] '600:3591' → 'Section paints' '600:3593' [lý do vượt panel] ô Overlay của panel chỉ nhận màu, không có ô chế độ hoà trộn — Figma khai 'SOLID #727c77 **MULTIPLY**' chồng lên ảnh nền H1 Playfair 40/53,32 w600 **#fcfbf6** ở y=155,5 · lời dẫn 16/26 **#ffffff** rộng 696 ở y=210,5 — cả hai CĂN GIỮA. */ #content .t4fx-bl-hero .section-bg-overlay { mix-blend-mode: multiply; } /* ⛔ FLATSOME CĂN GIỮA DỌC NỘI DUNG SECTION — '.section { align-items: center }'. Với section CÓ CHIỀU CAO CỐ ĐỊNH (hero 450 / 650) thì '.section-content' bị đẩy xuống (450 − 262,81)/2 = **93,59** ở desktop và **58,34** ở khổ 402, nên 'padding-top' khai theo Figma cộng thêm đúng khoảng đó. ⚠ KHÔNG mốc nào bắt được: bảng dày khai 'bo_toa_do: true' nên cả cụm trôi cùng nhau không sinh mốc lệch (I.8c), và 'kiem-cao-section' chỉ đo KHUNG — khung vẫn đúng 450/650. Chỉ ảnh nhiệt của chặng 3b nhìn ra: chữ "Blog" và lời dẫn hiện thành HAI lớp chồng, lệch 58 (402) và 93,6 (desktop). → Trả section về căn TRÊN; 'padding-top' khi đó chính là số Figma khai. */ #content .t4fx-bl-hero { align-items: flex-start; } #content .t4fx-bl-hero .section-content > .row.row-collapse { max-width: 1232px; } #content .col.t4fx-bl-hero-cot > .col-inner { padding-top: 155.5px; text-align: center; } #content .t4fx-bl-h1 h1 { font-family: var(--t4-font-head); font-weight: 600; font-size: 40px; line-height: 53.32px; color: var(--t4-light); margin: 0; letter-spacing: 0; text-transform: none; text-align: center; } #content .t4fx-bl-lede p { font-family: var(--t4-font-body); font-weight: 400; font-size: 16px; line-height: 26px; color: var(--t4-white); margin: 2px auto 0; max-width: 696px; text-align: center; } /* --- 21.2 Khung thân trang + THẺ TRẮNG ------------------------------------ [phục vụ] phần tử: Section | khối: '.t4fx-bl' [trang] blog | [figma] '600:7843' nền '#fcfbf6' 1900×2603 · '600:7995' thẻ trắng **1280**×2483 đệm **24** [lý do vượt panel] panel không vẽ được một thẻ 1280 nằm giữa nền section Bảng số (gốc là mép trên section): thẻ trắng y= 60 h=2483 ⇒ nội dung bắt đầu ở 60+24 = **84** tieude y= 84 h= 45 → +40 noibat y=169 h= 474 → +39,62 → kẻ → +40 nhom1 y=723 h= 626 → +40,26 nhom2 y=1389 h= 570 → +40,12 nhom3 y=1999 h= 520 → đệm đáy 24 + 60 = **84** ⛔ 'Section' '701:35577' (1080×388, "Shorts") có 'visible: false' — KHÔNG dựng (III.15.3). Nó nằm ngay cạnh thẻ trắng nên rất dễ đọc thành khối thứ 7. */ #content .t4fx-bl { padding: 84px 0; position: relative; } #content .t4fx-bl > .section-content { position: relative; z-index: 1; } #content .t4fx-bl::before { content: ""; position: absolute; z-index: 0; top: 60px; bottom: 60px; left: 50%; transform: translateX(-50%); width: 1280px; max-width: 100%; background: #fff; } #content .t4fx-bl .section-content > .row.row-collapse { max-width: 1232px; } #content .t4fx-bl-td { margin-bottom: 40px; } #content .t4fx-bl-n1 { margin-top: 79.62px; position: relative; } #content .t4fx-bl-n1::before { content: ""; position: absolute; top: -40px; left: 0; right: 0; border-top: .5px solid #a2a2a2; } #content .t4fx-bl-n2 { margin-top: 40.26px; } /* Giành lại khe của 't4fx-lq-boc' cho riêng trang này: #21 có nét kẻ phía trên và khe 64; #19 không có kẻ và khe là 40,12. */ .t4.t4-trang-blog #content .t4fx-lq-boc { margin-top: 40.12px; } .t4.t4-trang-blog #content .t4fx-lq-boc::before { display: none; } /* --- 21.3 Hàng tiêu đề + dải chuyên đề ------------------------------------ [phục vụ] phần tử: Text + Row/Col lồng + 4 Text | khối: '.t4fx-bl-td' [trang] blog | [figma] '674:5393' 1232×45 [lý do vượt panel] khung viền quanh bốn chip và nút mũi tên không có ô panel H2 Playfair 32/42,656 w700 #155446 ở y=11 (mực cao 23) khung chip x=**673** w=**559** viền 1px #a2a2a2, cao 45 chip 124 · 126 · 126 · 126 (đệm 10/15, bo 5) — chip 1 nền #458763 chip 2–4 chữ #777777 · nút mũi tên 45×45 ở cuối, cách chip 4 **12px** */ #content .col.t4fx-bl-td-cot > .col-inner { display: flex; align-items: flex-start; min-height: 45px; } #content .t4fx-bl-td-h2 :is(h1, h2) { font-family: var(--t4-font-head); font-weight: 700; font-size: 32px; line-height: 42.656px; color: var(--t4-dark-moss); margin: 0; letter-spacing: 0; text-transform: none; } #content .t4fx-bl-td-h2 { padding-top: 1.2px; } /* ⛔ CHỈ CÓ NÉT DƯỚI. 'Frame 1707479341' khai 'individualStrokeWeights {top:0, right:0, bottom:0.5, left:0}' — bản dựng đầu đọc 'strokeWeight: 1' rồi vẽ nguyên một khung bo góc quanh bốn chip. Bảng dày KHÔNG thấy (viền không sinh mốc nào), chỉ chặng 3b nhìn ra: khung thừa hiện thành một hình chữ nhật đỏ đặc trên ảnh nhiệt. */ /* ⛔ 23/08/2026 — DẢI CHUYÊN ĐỀ NAY LÀ '[tabgroup]' THẬT, không còn bốn '[ux_text]' gõ cứng. 4T chốt 22/08: «Chuyên đề 1/2/3 là dạng tab, trong tab là bài viết blog». Flatsome nhả: .tabbed-content.t4fx-bl-chde-dai └ ul.nav.nav-tabs.nav-uppercase > li.tab > a > span └ .tab-panels > .panel > .row.t4fx-bl-tab-ds > .col.post-item ⚠ Thuộc tính 'class' của '[tab]' KHÔNG xuống thẻ 'li' — Flatsome chỉ đặt 'id="tab-"'. Vì vậy phải bắt bằng ':nth-child', đừng trông vào '.t4fx-bl-chde-N' như bản gõ cứng. ⚠ 'nav-uppercase' viết hoa toàn bộ nhãn; Figma để nguyên "Chuyên đề 1" nên phải trả 'text-transform' về 'none'. ⛔ '[tabgroup]' là con TRỰC TIẾP của '[section]' (III.18) nên nó KHÔNG còn nằm cùng hàng với H2 như Figma vẽ. Kéo lên bằng lề âm đúng chiều cao hàng H2 (45) thì hai khối về lại một dòng. */ /* ⚠ Khối tab là con TRỰC TIẾP của '[section]' nên nó KHÔNG bị khung nội dung 1232 kẹp như các '[row]' anh em — để 'margin-left: auto' là nó dán vào mép SECTION (x=1900) chứ không phải mép khung (x=1566). Vì vậy phải tự kẹp 'max-width: 1232px' + 'margin: auto' rồi mới đẩy dải tab sang phải bên trong. ⚠ Lề âm −85 = ĐO HAI ĐIỂM: đặt −45 thì mép trên ra 750, hàng H2 ở 710 ⇒ vị trí tự nhiên là 795, cần bù 85. Đừng lấy 45 (chiều cao hàng H2) làm giá trị đặt — giữa hai khối còn 40px lề của chính '.tabbed-content' (§20.1). */ #content .tabbed-content.t4fx-bl-chde-dai { display: block; max-width: 1232px; margin: -85px auto 0; padding: 0; } /* ⛔ BA TẤM TAB KHÔNG HOẠT ĐỘNG CHE NHAU — phải tự khai 'display: none'. Luật ẩn tấm của Flatsome bị một luật khác trong dự án đè, nên cả bốn tấm cùng 'display: block'; ba tấm không hoạt động có 'height: 0' và NỘI DUNG TRÀN RA NGOÀI, chồng lên section "Bài nổi bật" bên dưới. ⚠ Bảng dày KHÔNG thấy chuyện này (nó chỉ đo lớp chữ đã ghép, mà ba tấm kia không ghép với lớp Figma nào) — chỉ 'kiem-vo' bắt được: 6 cặp chữ đè nhau ở CẢ NĂM khổ, trong đó có cặp đè lên đoạn mô tả của bài nổi bật. */ #content .t4fx-bl-chde-dai .tab-panels > .panel { display: none; } #content .t4fx-bl-chde-dai .tab-panels > .panel.active { display: block; } #content .t4fx-bl-chde-dai > ul.nav-tabs { display: flex; flex-wrap: nowrap; align-items: stretch; width: 559px; margin: 0 0 0 auto; padding: 0; height: 45px; border: 0; border-bottom: .5px solid #a2a2a2; border-radius: 0; } /* Bốn chip có BỀ RỘNG KHUNG cố định (124 · 126 · 126 · 126), không co theo chữ — để chip tự co thì bước tâm chữ tụt từ 113,5 xuống 82,7. */ #content .t4fx-bl-chde-dai > ul.nav-tabs > li.tab { flex: 0 0 126px; width: 126px; margin: 0; padding: 0; border: 0; border-radius: 5px; } /* Bề rộng theo VỊ TRÍ: chip 1 rộng 124, ba chip sau 126 (Figma '674:5397'…). */ #content .t4fx-bl-chde-dai > ul.nav-tabs > li.tab:first-child { flex-basis: 124px; width: 124px; } /* ⛔ NỀN XANH THEO **TAB ĐANG MỞ**, KHÔNG THEO CHIP ĐẦU TIÊN. Figma vẽ chip 1 xanh chữ trắng và ba chip kia xám #777 vì trong bản thiết kế tab 1 đang mở — đó là TRẠNG THÁI, không phải thuộc tính của con chip đầu. Khoá vào ':first-child' thì bấm sang tab 2 chữ đổi panel mà khung màu vẫn đứng ở tab 1, người dùng không biết mình đang ở đâu. ⚠ Bảng dày và ảnh nhiệt KHÔNG bắt được lỗi này: lúc trang mới tải, '.active' chính là chip đầu nên hai cách cho ra ảnh y hệt nhau. Nó chỉ lộ ra khi có người BẤM — cùng họ với luật T4 (trạng thái) ở chặng 4. Bóng đổ trong: Figma khai 'INNER_SHADOW radius 2 · y 2 · #000 @50%'; thiếu nó thì mép TRÊN chip nhạt hơn thiết kế (ảnh nhiệt hiện dải 111×4). */ #content .t4fx-bl-chde-dai > ul.nav-tabs > li.tab.active { background: var(--t4-leaf); box-shadow: inset 0 2px 2px rgba(0, 0, 0, .5); } /* Viền .5px của Figma là 'INSIDE' ⇒ nằm TRONG 45, chip vẫn cao đủ 45. Trình duyệt thì trừ viền khỏi ô nội dung nên chip 'stretch' chỉ còn 44,5 và hụt một dải ở mép dưới. Ép chiều cao rồi kéo lại nửa điểm ảnh. */ #content .t4fx-bl-chde-dai > ul.nav-tabs > li.tab { height: 45px; margin-bottom: -.5px; } /* ⛔ NỀN PHẢI ĐẶT LẠI TRÊN '', KHÔNG chỉ trên '
  • '. Flatsome tô '.nav-tabs > li.active > a' thành TRẮNG và 'li:hover > a' thành đen 4% — lớp nền đó phủ kín ô nên nền xanh đặt ở 'li' không nhìn thấy được. Bảng số không bắt được (nó chỉ đo chữ và hộp); ảnh nhiệt hiện đúng một vùng 112×45 tại (45,39) — cả con chip. */ #content .t4fx-bl-chde-dai > ul.nav-tabs > li.tab > a, #content .t4fx-bl-chde-dai > ul.nav-tabs > li.tab:hover > a, #content .t4fx-bl-chde-dai > ul.nav-tabs > li.tab.active > a { background: transparent; } #content .t4fx-bl-chde-dai > ul.nav-tabs > li.tab > a { display: flex; align-items: center; justify-content: center; height: 45px; margin: 0; padding: 0 15px; border: 0; font-family: var(--t4-font-body); font-weight: 700; font-size: 16px; line-height: 21.856px; color: var(--t4-gray-mid); text-transform: none; letter-spacing: 0; } #content .t4fx-bl-chde-dai > ul.nav-tabs > li.tab.active > a { color: var(--t4-white); } #content .t4fx-bl-chde-dai > ul.nav-tabs > li.tab > a span { display: inline; } /* --- 21.6b DẢI CHUYÊN ĐỀ CỦA #20 — nay là '[tabgroup]' THẬT --------------- 20/08/2026, 4T chốt: trang Dự án phải CÙNG CẤU TRÚC với trang Blog ở cả hai khổ. Trước đó dải này chỉ là bốn '[ux_text].t4fx-bl-chde-1…4' trang trí — bấm không ăn, dưới nó không có lưới bài nào. Nay 'sinh-uxb-du-an.py' phát '[tabgroup]' + '[blog_posts]' y như #19, nên **toàn bộ luật markup cũ ở đây đã bị xoá**: chúng đòi '.t4fx-bl-chde-dai.row' và '> .col > .col-inner', không còn khớp gì trên '.tabbed-content'. ⛔ Riêng '.t4fx-du .t4fx-bl-chde { flex: 0 0 126px }' và '.t4fx-du .t4fx-bl-chde-1 { background: var(--t4-leaf) }' thì PHẢI xoá chứ không chỉ để đó cho chết: lớp 't4fx-bl-chde t4fx-bl-chde-N' nay nằm trên chính 'li.tab', nên hai luật ấy vẫn khớp và sẽ tô xanh cố định tab 1 bất kể tab nào đang mở — đúng lỗi #19 đã chữa ở commit 0c9c65a (khung màu bám '.active'). Luật dựng dải tab (mục 21.1) KHÔNG khoá theo trang nên #20 dùng lại được nguyên vẹn; desktop hai trang trùng số tuyệt đối (124 · 126 · 126 · 126, chữ 16/21,856) nên không cần giành lại gì. */ /* ⚠ KHỔ 402 LÀ CHỖ HAI TRANG KHÁC NHAU — đọc kỹ trước khi gộp luật. Figma 'tieude_mb': #20 giữ nguyên cỡ desktop ('Frame text 3' w=**124**, 'text 7/8/9' w=**126**, chữ **16/21,856**), còn #19 tụt xuống 112 · 114 và 14/19,124. Mục 21.9 khai bộ số của #19 mà KHÔNG khoá trang, nên #20 bị nó kéo theo: 11 mốc ❌ ở 'tieude_mb' (4 'size' · 4 'lh' · 3 'khoang·dx(giữa)'). Giành lại ở đây, sau mục 21.9 trong tệp để thắng theo thứ tự nguồn. */ /* Nút cuối dải: 'Component 44' là FRAME chứa icon, không phải lớp chữ và cũng không phải lớp tô IMAGE ⇒ không nằm trong dãy ảnh của bảng dày. Vẽ bằng mặt nạ CSS, đúng lối đã dùng cho biểu tượng danh sách ở mục 20.5. ⛔ Đây là **biểu tượng MENU (ba gạch)**, KHÔNG phải mũi tên: node 'menu_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24' với 'Vector' **#cf9156** **26,25×18,75** trong khung 45×45. Bản dựng đầu đoán là mũi tên và tô màu chữ — sai cả hình lẫn màu; chỉ chặng 3b nhìn ra. ⚠ Hai con của 'Component 44' — nhãn "Các chuyên mục" và bảng 'Component 43' 900×260 — đều 'visible: false', KHÔNG dựng (III.15.3). */ #content .t4fx-bl-chde-dai > ul.nav-tabs::after { content: ""; flex: 0 0 45px; width: 45px; height: 18.75px; align-self: center; margin-left: 12px; background-color: var(--t4-camel); -webkit-mask: no-repeat center/26.25px 18.75px var(--t4fx-icon-mt); mask: no-repeat center/26.25px 18.75px var(--t4fx-icon-mt); /* ⛔ ĐỪNG ĐO TRÊN '*-figma.png' THÔ. 'so-anh.py' cắt ảnh Figma theo 'goc_anh()' trước khi so — màn này lệch **gy = 10** vì 'Component 44' tràn lên trên 10px. Đo trên ảnh thô rồi kéo biểu tượng xuống cho "khớp" là dời nó 10px SAI so với thiết kế. Vị trí đúng là CĂN GIỮA ô 45×45 (Figma khai Vector ở y=13,125 = (45−18,75)/2). ⛔ viewBox phải BÓ SÁT ba gạch. Bộ Material dùng khung 960×960 trong khi ba gạch chỉ chiếm 720×480 ⇒ SVG co vừa khung vuông và mặt nạ ra **13,5×8,5** thay vì 26,25×18,75 (đo trên ảnh). Khung bó sát thì mặt nạ phủ đúng ô. */ --t4fx-icon-mt: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 480'%3E%3Cpath d='M0 0h720v80H0zM0 200h720v80H0zM0 400h720v80H0z'/%3E%3C/svg%3E"); } /* --- 21.4 Bài nổi bật ----------------------------------------------------- [phục vụ] phần tử: Image + 4 Text + Button | khối: '.t4fx-bl-nb' [trang] blog | [figma] '600:8083' 1232×474 [lý do vượt panel] nút ghim đáy cột và bề rộng cột theo px ảnh 842×473,62 bo 5 · khe **32** · cột chữ **358** cột chữ: nhãn 16 → +16 → tiêu đề 90 → +16 → mô tả 120 → +4 → meta 22 → **+147,62** → nút 358×42 nền #cf9156 bo 3 (đáy cột) */ #content .col.t4fx-bl-nb-anh { flex: 0 0 842px; max-width: 842px; } #content .col.t4fx-bl-nb-chu { flex: 0 0 358px; max-width: 358px; margin-left: 32px; } #content .t4fx-bl-nb-hinh img { height: 473.62px; object-fit: cover; border-radius: 5px; } #content .t4fx-bl-nb-dm p { font-family: var(--t4-font-body); font-weight: 400; font-size: 12px; line-height: 16.392px; color: #a2a2a2; margin: 0; } #content .t4fx-bl-nb-dm { margin-bottom: 16px; } #content .t4fx-bl-nb-tt h2 { font-family: var(--t4-font-body); font-weight: 700; font-size: 22px; line-height: 30.052px; color: #000; margin: 0; letter-spacing: 0; text-transform: none; } #content .t4fx-bl-nb-tt { margin-bottom: 16px; } #content .t4fx-bl-nb-mo p { font-family: var(--t4-font-body); font-weight: 400; font-size: 14px; line-height: 24px; color: #353535; margin: 0; text-align: justify; } #content .t4fx-bl-nb-mo { margin-bottom: 4px; } #content .t4fx-bl-nb-meta p { display: flex; align-items: center; margin: 0; min-height: 22px; font-family: var(--t4-font-body); font-weight: 400; color: #7c7c7c; font-size: 12px; line-height: 16.392px; } /* Dấu '|' khai khung **5px** bên Figma; Manrope vẽ nó rộng 4,06 (phông gốc là Metropolis, đã miễn trừ — xem qa/phan-hoi-figma.md mục 27). Ghim bề rộng để phần đuôi hàng meta không dồn lệch: thiếu 0,94px ở đây làm mốc '50 → Đăng ký…' vượt ngưỡng 2px. */ #content .t4fx-bl-nb-meta-gach { font-size: 16px; line-height: 21.6px; margin: 0 10px; width: 5px; text-align: center; } #content .t4fx-bl-nb-meta-nhan { margin-right: 5px; } #content a.button.t4fx-bl-nb-nut { display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; min-height: 42px; margin: 147.62px 0 0; background: var(--t4-camel); border: 0; border-radius: 3px; } /* [phục vụ] vùng chạm của nút "Đăng ký để nhận bài viết mới" | [trang] blog | [lý do vượt panel] Flatsome core cho MỌI [button] một lớp ::after vô hình nới vùng chạm 89,5px MỖI BÊN (mặc định hợp lý cho nút nhỏ) — nhưng nút này đã rộng 358px và chỉ cách ảnh bài nổi bật 32px, nên vùng nới đó LẤN 57,5px vào ảnh bên cạnh (đã đo bằng Playwright: 2384px² chồng lấp, đúng con số kiem-tuong-tac.js báo "hai vùng bấm chồng nhau"). Ghim lại đúng hộp nút — nút đã đủ 358×42, không cần nới vùng chạm. */ #content a.button.t4fx-bl-nb-nut::after { left: 0; right: 0; } #content a.button.t4fx-bl-nb-nut span { font-family: var(--t4-font-body); font-weight: 700; font-size: 14px; line-height: 22px; color: var(--t4-white); letter-spacing: 0; text-transform: none; } /* --- 21.5 Nhóm 1 — ba cột 382,67 khe 42 ----------------------------------- [phục vụ] phần tử: Row/Col ×3 + Text + Image + Image Box | khối: '.t4fx-bl-n1' [trang] blog | [figma] '675:6131' 1232×626,25 [lý do vượt panel] 382,67 không phải bội của 90 nên span 1/12 dựng không ra 382,67 × 3 + 42 × 2 = 1232 ✅ cột 1–2: tiêu đề 22 (đệm dưới 8) → +16 → ảnh 382,67×215,25 → +20 → nhãn 16 → +8 → tiêu đề 25 → +8 → mô tả 66 → +8 → meta 22 → +16 → kẻ → +16 → 3 hàng 36 (chữ 14/20 w500 #1f1f1f) xen kẻ cột 3 : tiêu đề 22 → +20 → 4 thẻ 84 (ảnh 150 + khe 10 + chữ 222,67) bước 124 → nút 382,67×30 */ #content .col.t4fx-bl-n1-cot { flex: 0 0 382.67px; max-width: 382.67px; } #content .col.t4fx-bl-n1-cot + .col.t4fx-bl-n1-cot { margin-left: 42px; } #content .t4fx-bl-n1-ten h2, #content .t4fx-bl-lq-ten h2, #content .t4fx-bl-n2p-ten h2 { font-family: var(--t4-font-head); font-weight: 700; font-size: 20px; line-height: 26.66px; color: var(--t4-dark-moss); margin: 0; letter-spacing: 0; text-transform: none; } /* Hàng tiêu đề cao **22** với mực chữ ở y=0…14 (Figma). Hộp dòng Playfair 26,66 có tâm mực cách mép trên **13,13**; cần tâm ở 7 ⇒ lùi hộp dòng lên 6,13. Cùng phép tính đã dùng cho hàng 40 ở mục 20.5, khác đúng con số. */ #content .t4fx-bl-n1-ten, #content .t4fx-bl-lq-ten { height: 22px; display: flex; align-items: flex-start; margin-bottom: 16px; } #content .t4fx-bl-n1-ten h2, #content .t4fx-bl-lq-ten h2 { margin-top: -6.13px; } #content .t4fx-bl-n2p-ten { height: 40px; display: flex; align-items: flex-start; padding: 11.9px 0 8px; margin-bottom: 20px; } #content .t4fx-bl-n1-anh img { height: 215.25px; object-fit: cover; border-radius: 5px; } #content .t4fx-bl-n1-anh { margin-bottom: 20px; } #content .t4fx-bl-n1-nhan p { font-family: var(--t4-font-body); font-weight: 400; font-size: 12px; line-height: 16.392px; color: #a2a2a2; margin: 0; } #content .t4fx-bl-n1-nhan { margin-bottom: 8px; } #content .t4fx-bl-n1-tt h3, #content .t4fx-bl-n2-tt h3 { font-family: var(--t4-font-body); font-weight: 700; font-size: 18px; line-height: 24.588px; color: #000; margin: 0; letter-spacing: 0; text-transform: none; } /* ⚠ Khe tiêu đề → mô tả là **4**, không phải 8: Figma đặt tiêu đề 297,25…322,25 và mô tả ở 326,25. Đặt 8 thì cả khối danh sách bên dưới tụt 4px và ba mốc 'khoang·dy' của cột giữa lệch đúng +3,98. */ #content .t4fx-bl-n1-tt { margin-bottom: 4px; } #content .t4fx-bl-n1-mo p, #content .t4fx-bl-n2-mo p { font-family: var(--t4-font-body); font-weight: 400; font-size: 14px; line-height: 22px; color: #353535; margin: 0; text-align: justify; } #content .t4fx-bl-n1-mo { margin-bottom: 8px; } #content .t4fx-bl-n1-meta p, #content .t4fx-bl-n2-meta p { display: flex; align-items: center; margin: 0; min-height: 22px; font-family: var(--t4-font-body); font-weight: 400; color: #7c7c7c; font-size: 10px; line-height: 13.66px; } #content .t4fx-bl-n1-meta-gach, #content .t4fx-bl-n2-meta-gach { font-size: 16px; line-height: 21.6px; margin: 0 10px; } #content .t4fx-bl-n1-meta-nhan, #content .t4fx-bl-n2-meta-nhan { margin-right: 5px; } #content .t4fx-bl-n1-meta { margin-bottom: 0; } /* Ba hàng danh sách: biểu tượng 16×20 vẽ bằng mặt nạ CSS (là FRAME 'SVG' bên Figma, không phải lớp ảnh ⇒ thêm là lệch dãy ảnh của bảng dày). */ /* Bước giữa ba hàng là **68** (Figma 462,25 · 530,25 · 598,25): kẻ · +24 · chữ 20 · +8 · lề 16 · kẻ. Đặt 'padding: 8px 0' cho bước 37 và lệch 31px mỗi hàng — đọc TOẠ ĐỘ chứ đừng đọc 'itemSpacing'. */ #content .t4fx-bl-n1-muc { display: flex; align-items: center; padding: 24px 0 8px; margin-top: 16px; border-top: .5px solid #a2a2a2; } /* ⚠ Nét '.5px' Chrome vẽ thành **1px thật** ⇒ hộp hàng cao 53 chứ không 52,5, và bước thành 69 thay vì 68. Bù ở LỀ của hai hàng sau, không bù ở hàng đầu (hàng đầu lấy khe 16 từ meta phía trên). Đây là lần thứ tư trong tệp này nét 0,5px làm lệch một bước — xem thêm mục 20.5 và 20.6. */ #content .t4fx-bl-n1-muc-2, #content .t4fx-bl-n1-muc-3 { margin-top: 15px; } /* ⛔ Biểu tượng là DẤU TÍCH nét mảnh **#cf9156**, không phải mũi tên và không phải màu chữ: Figma 'SVG' 16×20 chứa 'cl-icon-success' 16×16,36, bên trong là 'Vector' **13,72×10,52** tô **#cf9156**. Bản dựng đầu đoán mũi tên tô '--t4-text' — sai cả hình lẫn màu ở SÁU chỗ, và bảng dày mù hoàn toàn (không phải lớp chữ, cũng không phải lớp tô IMAGE). Chỉ chặng 3b nhìn ra. ⚠ ĐỘ DÀY NÉT cũng phải đo, không đoán: kích thước đúng mà nét dày sai thì ảnh nhiệt vẫn đỏ. Cách đo là DIỆN TÍCH MỰC (số điểm ảnh tối), không phải bao hình: 24/08 chỉnh 'stroke-width' 2 → 1,5 → **1,2**, diện tích 33,5 → 26,0 → **20,0 px², khớp đúng Figma 20,0**. Bao hình thì cả ba lần đều ~13×9,5. */ /* Dùng CHUNG cho #20 (mục 22.5) — cùng một 'cl-icon-success', một định nghĩa duy nhất (III.4.0 luật NÂNG CẤP). */ #content .t4fx-bl-n1-muc::before, #content .t4fx-du-tick-muc p::before { content: ""; flex: 0 0 16px; width: 16px; height: 20px; margin-right: 8px; background-color: var(--t4-camel); -webkit-mask: no-repeat center/13.72px 10.52px var(--t4fx-icon-tick); mask: no-repeat center/13.72px 10.52px var(--t4fx-icon-tick); --t4fx-icon-tick: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1 6.1 5.1 10 13 1' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #content .t4fx-bl-n1-muc p { font-family: var(--t4-font-body); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--t4-text); margin: 0; } /* ⚠ KHÔNG có kẻ SAU hàng thứ ba — Figma chỉ vẽ ba 'Vector' và cả ba đều nằm TRƯỚC một hàng (438,25 · 506,25 · 574,25). */ /* Cột 3 — bốn thẻ ngang, cùng mô-típ cột phải #21 nhưng chữ **222,67** */ #content .t4fx-bl-lq-ten { margin-bottom: 20px; } /* Khe **20** dưới thẻ rồi mới tới kẻ, kẻ rồi **19** nữa tới thẻ sau — KHÔNG phải 19 rồi 20. Bước vẫn 124 cả hai cách nên bảng dày không phân biệt được, nhưng ảnh nhiệt thì có: đặt ngược làm mọi đường kẻ nằm cao hơn Figma 1px và hiện thành dải '595×2' / '316×2' ở cả #19 lẫn #20. Kẻ 0,5px của Figma tâm ở 104 nên vẽ ra pixel 104; thẻ sau ở 124 ⇒ đệm trên = 124 − 104 − 1 = 19. */ #content .box.t4fx-bl-lq-the { display: flex; align-items: center; margin: 0 0 20px; } #content .box.t4fx-bl-lq-the .box-image { flex: 0 0 150px; width: 150px; } #content .box.t4fx-bl-lq-the .box-image img { width: 150px; height: 84px; object-fit: cover; border-radius: 5px; } #content .box.t4fx-bl-lq-the .box-text { flex: 1 1 auto; padding: 0; margin-left: 10px; min-width: 0; } #content .t4fx-bl-lq-tt p { font-family: var(--t4-font-body); font-weight: 600; font-size: 14px; line-height: 19.124px; color: #000; margin: 0; } #content .box.t4fx-bl-lq-the + .box.t4fx-bl-lq-the { border-top: .5px solid #a2a2a2; padding-top: 19px; } #content a.button.t4fx-bl-xem { display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; min-height: 30px; margin: 0; border: 1px solid var(--t4-text); border-radius: 3px; background: transparent; } #content a.button.t4fx-bl-xem span { font-family: var(--t4-font-body); font-weight: 700; font-size: 14px; line-height: 22px; color: var(--t4-text); letter-spacing: 0; text-transform: none; } /* --- 21.6 Nhóm 2 — 674 + kẻ DỌC + 316 ------------------------------------- [phục vụ] phần tử: Row/Col ×2 + Text + Image + Image Box ×2 | khối: '.t4fx-bl-n2' [trang] blog | [figma] '675:5909' 1232×570,12 [lý do vượt panel] kẻ DỌC giữa hai cột và bề rộng theo px ⚠ Khe giữa hai cột là **242**, không phải 42 mà 'itemSpacing' khai: cột trái 674 kết ở x=674, cột phải bắt đầu ở x=**916**; nét kẻ dọc ở x=**795**, tức ĐÚNG GIỮA khe. Đây là chỗ phải đọc TOẠ ĐỘ chứ không đọc 'gap' (III.14.2-2). */ #content .col.t4fx-bl-n2-trai { flex: 0 0 674px; max-width: 674px; } #content .col.t4fx-bl-n2-phai { flex: 0 0 316px; max-width: 316px; margin-left: 242px; position: relative; } #content .col.t4fx-bl-n2-phai::before { content: ""; position: absolute; top: 0; bottom: 0; left: -121px; border-left: .5px solid #a2a2a2; } #content .t4fx-bl-n2-dau.row { margin: 0 0 16px; width: 100%; max-width: none; } #content .t4fx-bl-n2-dau > .col > .col-inner { display: flex; align-items: flex-start; height: 40px; padding: 11.9px 0 8px; } #content .t4fx-bl-n2-ten h2 { font-family: var(--t4-font-head); font-weight: 700; font-size: 20px; line-height: 26.66px; color: var(--t4-dark-moss); margin: 0; letter-spacing: 0; text-transform: none; } #content .t4fx-bl-n2-ten { margin-right: 12px; } #content .t4fx-bl-chip { padding: 0 4px; margin-top: 7.63px; } #content .t4fx-bl-chip + .t4fx-bl-chip { margin-left: 4px; } #content .t4fx-bl-chip p { font-family: var(--t4-font-body); font-weight: 700; font-size: 12px; line-height: 16.392px; color: var(--t4-gray-mid); margin: 0; } #content .t4fx-bl-n2-anh img { height: 379.12px; object-fit: cover; border-radius: 5px; } #content .t4fx-bl-n2-anh { margin-bottom: 20px; } #content .t4fx-bl-n2-tt { margin-bottom: 4px; } /* Khe mô tả → meta là **20** (Figma 528,12 → 548,12). Đặt 24 thì cột trái cao 574,12 thay vì 570,12. */ #content .t4fx-bl-n2-mo { margin-bottom: 20px; } #content .box.t4fx-bl-n2p-the { margin: 0 0 20px; } #content .box.t4fx-bl-n2p-the .box-image img { width: 100%; height: 177.75px; object-fit: cover; border-radius: 5px; } #content .box.t4fx-bl-n2p-the .box-text { padding: 10px 0 0; } #content .t4fx-bl-n2p-tt p { font-family: var(--t4-font-body); font-weight: 600; font-size: 16px; line-height: 21.856px; color: #000; margin: 0; } #content .box.t4fx-bl-n2p-the + .box.t4fx-bl-n2p-the { border-top: .5px solid #a2a2a2; padding-top: 20px; } /* ⛔ LỀ DƯỚI CỦA CON CUỐI THOÁT RA NGOÀI '.col-inner' (gộp lề) và cộng vào chiều cao của '.col'. Đo được: '.col-inner' 563,94 nhưng '.col' 583,94 — đúng 20px lề dưới của thẻ cuối. Cột phải vì thế cao hơn cột trái và KÉO CẢ HÀNG lên 583,94 thay vì 570,12, ở cả hai khổ. Bảng dày không thấy (nó không đo '.col'), chỉ 'kiem-cao-section.js' thấy. */ #content .box.t4fx-bl-n2p-the:last-child { margin-bottom: 0; } /* --- 21.7 Khổ 402 — mọi khối về MỘT CỘT 354 ------------------------------ [phục vụ] phần tử: Row/Col | khối: mọi hàng của '.t4fx-bl' [trang] blog | [figma] '1385:21766' thẻ trắng **402** đệm 24 ⇒ nội dung 354 [lý do vượt panel] panel không đảo được hướng dải chuyên đề ⛔ Bản này mới là BƯỚC MỘT: đưa mọi khối về một cột đúng bề rộng. Bảy điểm khác desktop đã liệt kê ở §5 của 'uxb/ban-ke-blog.md' (dải chuyên đề đổi hướng và nút mũi tên sang TRÁI, ảnh nổi bật lên trên, kẻ dọc thành kẻ ngang, khối chữ 'nhom3' 160 thay vì 219) CHƯA làm hết. */ @media (max-width: 849px) { #content .t4fx-bl { padding: 24px 0; } #content .t4fx-bl::before { top: 0; bottom: 0; width: 100%; } #content .t4fx-bl .section-content > .row.row-collapse, #content .t4fx-bl-hero .section-content > .row.row-collapse { width: 354px; max-width: 354px; } #content .col.t4fx-bl-td-cot > .col-inner { display: block; } /* Hàng tiêu đề khổ 402 cao **23** (Figma '1385:21767'), không phải 45 như desktop — hộp dòng Playfair 42,656 phải lùi lên để mực nằm đúng 0…23. */ /* ⛔ 'display: flex' chứ không để mặc định: lề âm của 'h2' GỘP với lề của vỏ '.text' khi vỏ là khối thường, nên nó thoát lên trên và kéo cả hàng ngắn đi đúng 9,5px (đo được: khung 74,5 thay vì 84). Flex chặn gộp lề. */ #content .t4fx-bl-td-h2 { height: 23px; padding-top: 0; display: flex; } /* Đo trên site: mực H2 phải có tâm ở **11,5** (Figma '1385:21767' khai lớp 0…23). Hộp dòng Playfair 42,656 đặt tâm mực cách mép trên 16,25 ⇒ lùi 4,75. Con số −9,5 của vòng trước là suy từ chiều cao lớp, không phải đo. */ /* ⛔ Con số này ĐO TRÊN ẢNH ĐÃ CẮT, không lấy từ mốc bảng dày. Quét mực chữ: Figma (sau khi trừ 'goc_anh' gy = 8,84) nằm ở −1,84…22,16 còn site ở 7,5…31,5 ⇒ site thấp hơn **9,34px**. Bảng dày không thấy vì nó đọc HỘP DÒNG bên site và BAO HÌNH MỰC bên Figma — hai đầu khác nghĩa; ảnh nhiệt thì hiện "Điểm tin chính" thành hai lớp chồng lệch rõ. Khổ desktop đã đúng sẵn (đo được +1,0) nên KHÔNG đụng tới. */ #content .t4fx-bl-td-h2 :is(h1, h2) { margin-top: -11.71px; } /* Chip khổ 402 hẹp hơn desktop: **112 · 114 · 114 · 114** (Figma '1385:21767'), không phải 124/126. */ #content .t4fx-bl-chde-dai > ul.nav-tabs > li.tab { flex-basis: 114px; width: 114px; } #content .t4fx-bl-chde-dai > ul.nav-tabs > li.tab:first-child { flex-basis: 112px; width: 112px; } /* Khổ 402 xếp DỌC: H2 ở trên, dải tab xuống dòng ⇒ không kéo lề âm nữa. Bề rộng theo KHUNG NỘI DUNG 354, không phải 402 của cả section. ⚠ Hàng H2 phải BỎ 'min-height: 45px' của desktop — 45 là chiều cao dải tab nằm CÙNG hàng ở khổ rộng; ở khổ 402 hai khối xếp dọc nên 45 đó thành 22px thừa, đẩy khung 'tieude_mb' từ 84 lên 106. */ #content .col.t4fx-bl-td-cot > .col-inner { min-height: 0; } /* ⚠ '-8' KHÔNG phải số Figma, là HIỆU (§20.1). Figma đòi khe 16 giữa đáy mực H2 (y=23) và mép trên dải tab (y=39); ĐO ĐƯỢC lề dưới của hàng H2 là **40** (mặc định '.row' của Flatsome), và hai lề gộp theo luật lề âm: 40 + (−24) = 16. ⛔ Đừng suy ra con số này bằng cách đoán lề nền — bản đặt đầu đoán 24 nên ra −8 và khe còn 32. Đo hai điểm rồi lấy hiệu. */ #content .tabbed-content.t4fx-bl-chde-dai { max-width: 354px; margin: -24px auto 0; } /* ⛔ 'flex-wrap: nowrap' là bắt buộc: bốn chip 112+114×3 = 454 > 354 nên '.nav' của Flatsome (mặc định 'wrap') đẩy chip 4 xuống dòng hai — mốc 'Chuyên đề 3 → Chuyên đề 4' từ dx 114 thành dy 45 / dx −271. Figma dựng dải này CUỘN NGANG (tổng 499 trong khung 354). */ #content .t4fx-bl-chde-dai > ul.nav-tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; } /* Chữ chip khổ 402 là 14/19,124, không phải 16/21,856 của desktop. */ #content .t4fx-bl-chde-dai > ul.nav-tabs > li.tab > a { font-size: 14px; line-height: 19.124px; } /* #20 giành lại cỡ desktop — xem chú thích mục 21.6b. */ #content .t4fx-du .t4fx-bl-chde-dai > ul.nav-tabs > li.tab { flex-basis: 126px; width: 126px; } #content .t4fx-du .t4fx-bl-chde-dai > ul.nav-tabs > li.tab:first-child { flex-basis: 124px; width: 124px; } #content .t4fx-du .t4fx-bl-chde-dai > ul.nav-tabs > li.tab > a { font-size: 16px; line-height: 21.856px; } /* Khổ 402 đảo vị trí: nút mũi tên ở **x=0** rộng 45, chip bắt đầu từ x=45 (desktop thì ngược lại — mũi tên ở cuối). 'order' áp được cho cả phần tử giả vì cha là flex. */ #content .t4fx-bl-chde-dai > ul.nav-tabs::after { order: -1; margin: 0; flex: 0 0 45px; } #content .col.t4fx-bl-nb-anh, #content .col.t4fx-bl-nb-chu, #content .col.t4fx-bl-n1-cot, #content .col.t4fx-bl-n2-trai, #content .col.t4fx-bl-n2-phai { flex: 0 0 100%; max-width: 100%; margin-left: 0; } #content .col.t4fx-bl-n1-cot + .col.t4fx-bl-n1-cot { margin-left: 0; margin-top: 42px; } /* Khe giữa hai khối ở khổ 402 là **84**: khối trái kết ở 437,12, kẻ NGANG ở 479,12 (+42), khối phải ở 521,12 (+42). Đặt 42 thì mốc '50 → Bài viết hữu ích' lệch −41,78 và khung hụt 18,4. */ /* ⛔ Hàng tiêu đề 'nhom2' ở khổ 402 TRÀN: 165 + 12 + 191 = 368 trong khung 354. 'flex-shrink' mặc định là 1 nên trình duyệt CO cả tiêu đề lẫn chip và cụm chip trôi trái ~5px — đúng cạm bẫy đã gặp ở #21 (mục 20.8). Figma để tràn sang phải, không co. */ #content .t4fx-bl-n2-dau > .col > .col-inner { flex-wrap: nowrap; } #content .t4fx-bl-n2-dau > .col > .col-inner > * { flex: 0 0 auto; } #content .t4fx-bl-n2-ten h2, #content .t4fx-bl-chip p { white-space: nowrap; } #content .col.t4fx-bl-n2-phai { margin-top: 84px; } #content .col.t4fx-bl-n2-phai::before { left: 0; right: 0; top: -42px; bottom: auto; border-left: 0; border-top: .5px solid #a2a2a2; } #content .t4fx-bl-nb-hinh img { height: 199.12px; } /* Khe ảnh → cột chữ ở khổ 402 là **32** (Figma '1385:21792'); desktop hai cột nằm ngang nên khe đó là 'margin-left'. */ #content .col.t4fx-bl-nb-chu { margin-top: 32px; } #content .t4fx-bl-n1-anh img, #content .t4fx-bl-n2-anh img, #content .box.t4fx-bl-n2p-the .box-image img { height: 199.12px; } #content a.button.t4fx-bl-nb-nut { margin-top: 20px; } #content .col.t4fx-bl-hero-cot > .col-inner { padding-top: 120px; } } /* --- 21.8 Ba chỗ giành lại số của RIÊNG trang này ------------------------- [phục vụ] phần tử: breadcrumb + Text | khối: '.t4fx-crumb' · '.t4fx-lq-*' [trang] blog | [figma] '1385:21736' · '1385:21951' [lý do vượt panel] hai luật toàn cục nằm trong tệp của trang khác, và bộ class 't4fx-lq-*' dùng chung với #21 nhưng số đo khổ 402 khác */ /* (1) Mũi tên breadcrumb khổ 402: Figma khai **32px** (Home x=25 w=28 → mục sau ở x=85). Luật toàn cục của trang #4 đang đặt 20. */ @media (max-width: 849px) { .t4.t4-trang-blog .t4fx-crumb li + li::before { width: 32px; } .t4.t4-trang-blog nav.t4fx-crumb ol li:last-child, .t4.t4-trang-blog nav.t4fx-crumb ol li:last-child * { line-height: 22px; } } /* (2) Khối chữ thẻ 'nhom3' ở khổ 402 cao **160** (không phải 219 như #21): tiêu đề 50 · +4 · mô tả 66 · **+18** · meta 22. */ @media (max-width: 849px) { .t4.t4-trang-blog #content .t4fx-lq-meta p { margin-top: 18px; } } /* (3) Hero khổ 402 cao **650** — H1 ở y=85, lời dẫn ở y=403 rộng 352 (Figma '1385:21756': 'Container' 352×480 tại y=85, khối lời dẫn dính ĐÁY với đệm dưới 32). Khe H1 → lời dẫn vì thế là **265**, không phải 2 như desktop. */ @media (max-width: 849px) { #content .t4fx-bl-hero { min-height: 650px; } #content .col.t4fx-bl-hero-cot > .col-inner { padding-top: 85px; } #content .t4fx-bl-lede p { margin-top: 265px; max-width: 352px; } } /* ⛔ ĐÃ XOÁ (20/08/2026) — luật cỡ chữ chip '.t4fx-bl-chde p' ở khổ 402. Lớp 't4fx-bl-chde' KHÔNG CÒN KẾT XUẤT từ khi dải chuyên đề chuyển sang '[tabgroup]' thật (21.6b): DOM nay chỉ có '.t4fx-bl-chde-dai' trên '.tabbed-content', còn các tab mang 'class="tab active has-icon"'. Đã soi 'du-an' và 'blog' — cả hai đều 0 phần tử. Cỡ chữ chip nay do luật '.t4fx-bl-chde-dai > ul.nav-tabs > li.tab > a' đặt. */ /* ══════════════════════════════════════════════════════════════════════════ 22. TRANG #20 'du-an' — Figma 722:30494 (1900×2871,78) · 1385:22283 (402) ────────────────────────────────────────────────────────────────────────── Bản kê: 'uxb/ban-ke-du-an.md'. Ba khối DÙNG LẠI nguyên bộ class của #19 (III.4.0 luật NÂNG CẤP): 't4fx-bl-td*' · 't4fx-bl-nb*' · 't4fx-bl-n2*', cộng ba mảnh dùng chung 't4fx-bl-n1-ten' · 't4fx-bl-lq-the' · 't4fx-bl-xem'. Ở đây chỉ khai phần KHÁC. ══════════════════════════════════════════════════════════════════════════ */ /* 22.1 Section kem + thẻ trắng Section 1900×2871,78 đệm trên 60 · thẻ 1280×2751,78 đệm 24 ⇒ đệm section 84 = 60 + 24, thẻ vẽ bằng '::before' (ba tầng shortcode là trần, xem mục 21.1 — không có '[row]' bọc). */ #content .t4fx-du { padding: 84px 0; position: relative; } #content .t4fx-du::before { content: ""; position: absolute; z-index: 0; top: 60px; bottom: 60px; left: 50%; transform: translateX(-50%); width: 1280px; max-width: 100%; background: #fff; } #content .t4fx-du .section-content { position: relative; z-index: 1; } /* ⛔ CHỈ hàng CON TRỰC TIẾP của section-content. Viết '.t4fx-du .row' là trúng luôn mọi '[row_inner]' (chúng cũng mang class 'row') — dải chip 559px bị nống lên 1232 và xuống dòng, làm 'tieude' cao 86,5 thay vì 45. */ #content .t4fx-du > .section-content > .row { width: 1232px; max-width: 1232px; margin-left: auto; margin-right: auto; } /* 22.2 Khe dọc giữa sáu khối + hai đường kẻ ngang Kẻ nằm CHÍNH GIỮA khe 80 (row +40 → kẻ +40 → row kế). Vẽ bằng '::after' tuyệt đối chứ không phải 'border-bottom' của row: viền dính mép dưới row, không đặt được ở giữa khe. */ #content .t4fx-du .t4fx-bl-td { margin-bottom: 40px; } #content .t4fx-du-nb, #content .t4fx-du-news { position: relative; margin-bottom: 80px; } #content .t4fx-du-nb::after, #content .t4fx-du-news::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 40px); border-top: .5px solid #a2a2a2; } #content .t4fx-du-n1 { margin-bottom: 40px; } #content .t4fx-du .t4fx-bl-n2 { margin-bottom: 40px; } #content .t4fx-du-n3 { margin-bottom: 0; } /* 22.3 'noibat' — ảnh 842×473,62 (ở #19 là 474) và đáy cột đổi hẳn phần tử [figma] section “nổi bật” — desktop '722:30525' · mobile '1385:22311' (node lấy từ bản đồ đo: tools/truy-node-be-rong.py --lop t4fx-du-nb) */ #content .t4fx-du-nb .t4fx-bl-nb-hinh img { height: 473.62px; } /* Hàng "Xem chi tiết" 358×30 dính đáy: khối chữ trên cao 284, cột cao 473,62 ⇒ khe 159,62. Đặt số cố định (không 'margin-top:auto') để bảng dày bắt được ngay nếu chữ đổi dòng làm khối trên lệch. */ #content .t4fx-du-xct { margin-top: 159.62px; } #content .t4fx-du-xct p { display: flex; align-items: center; height: 30px; margin: 0; font-family: var(--t4-font-body); font-weight: 700; font-size: 14px; line-height: 19.124px; color: #7c7c7c; } /* Mũi tên = VECTOR 9,25×15 #7c7c7c trong khung 30×30 — KHÔNG phải lớp ảnh. viewBox phải là **BAO HÌNH THẬT CỦA ĐƯỜNG VẼ**, tính từ chính chuỗi path: x ∈ {504,371,414,590} ⇒ 371…590 (219) · y ∈ {−480,−613,−656,−304,−347} ⇒ −656…−304 (352). Tỉ lệ 219/352 = 0,622 ≈ 9,25/15 = 0,617 ✅ — chính là bằng chứng đây đúng glyph. ⛔ ĐÃ SAI MỘT LẦN: bản đầu ước lượng '320 -720 296 480' bằng mắt, thừa 149px ngang và 128px dọc, nên mực vẽ ra chỉ còn 219/296 = 74% bề rộng và 352/480 = 73% chiều cao. Đo trên ảnh: Figma 8,5×14,5 · site 6,0×10,5 (71%/72%) — khớp đúng dự đoán. 'mask-size' co giãn theo VIEWBOX chứ không theo mực, nên viewBox rộng hơn mực bao nhiêu thì icon nhỏ đi bấy nhiêu. */ #content .t4fx-du-xct p::after { content: ""; flex: 0 0 30px; width: 30px; height: 30px; background-color: #7c7c7c; -webkit-mask: no-repeat center / 9.25px 15px var(--t4fx-icon-chev); mask: no-repeat center / 9.25px 15px var(--t4fx-icon-chev); --t4fx-icon-chev: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='371 -656 219 352'%3E%3Cpath d='M504-480 371-613l43-43 176 176-176 176-43-43 133-133Z'/%3E%3C/svg%3E"); } /* [figma] trang20 · section news — 4 lớp rộng 300.5px: '722:30549' · '722:30555' · '722:30561' … còn 1 (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 20 để chọn) */ /* 22.4 'news' — bốn thẻ 300,5 khe 10 */ #content .col.t4fx-du-news-cot { flex: 0 0 300.5px; max-width: 300.5px; padding: 0; } #content .col.t4fx-du-news-cot + .col.t4fx-du-news-cot { margin-left: 10px; } #content .t4fx-du-news-dau { margin-bottom: 12px; } #content .t4fx-du-news-dau p { display: flex; align-items: center; gap: 4px; height: 22px; margin: 0; } /* Tên co giãn, tag bám mép phải — Figma cho tên bề rộng 198,5 / 250,5 / 153,5 / 287 tuỳ độ dài tag, tức tên là phần CÒN LẠI chứ không phải số đo cố định. */ #content .t4fx-du-news-ten { flex: 1 1 auto; min-width: 0; font-family: var(--t4-font-body); font-weight: 700; font-size: 16px; line-height: 21.856px; color: #000; } #content .t4fx-du-news-tag { flex: 0 0 auto; font-family: var(--t4-font-body); font-weight: 400; font-size: 12px; line-height: 16.392px; color: #a2a2a2; } #content .t4fx-du-news-anh img { width: 100%; height: 169.03px; object-fit: cover; border-radius: 5px; } /* 22.5 'nhom1' — 674 + khe 242 + 316 (KHÔNG có kẻ dọc, khác 'nhom2') */ #content .col.t4fx-du-n1-trai { flex: 0 0 674px; max-width: 674px; padding: 0; } #content .col.t4fx-du-n1-phai { flex: 0 0 316px; max-width: 316px; padding: 0; margin-left: 242px; } #content .t4fx-du-n1 .t4fx-bl-n2-dau.row { margin-bottom: 18px; } /* [figma] '722:30585' — image · 390×219 · trang20·nhom1 (lớp DUY NHẤT rộng 390px trong figma-spec/trang20.json) */ /* Thẻ ảnh-trái 390 + khe 20 + chữ 264, kẻ ở +18 rồi khối tick ở +18 nữa. */ #content .box.t4fx-du-n1-the { display: flex; align-items: flex-start; margin: 0 0 17px; padding-bottom: 18px; border-bottom: .5px solid #a2a2a2; } #content .box.t4fx-du-n1-the .box-image { flex: 0 0 390px; width: 390px; } #content .box.t4fx-du-n1-the .box-image img { width: 390px; height: 219px; object-fit: cover; border-radius: 5px; } #content .box.t4fx-du-n1-the .box-text { flex: 1 1 auto; padding: 0; margin-left: 20px; min-width: 0; } /* Chữ trong thẻ — dùng chung cho nhom1 và nhom3, chỉ khác khe (22.6) */ #content .t4fx-du-the-nhan p { font-family: var(--t4-font-body); font-weight: 400; font-size: 12px; line-height: 16.392px; color: #a2a2a2; margin: 0; } #content .t4fx-du-the-tt h3 { font-family: var(--t4-font-body); font-weight: 700; font-size: 18px; line-height: 24.588px; color: #000; margin: 0; letter-spacing: 0; text-transform: none; } #content .t4fx-du-the-mo p { font-family: var(--t4-font-body); font-weight: 400; font-size: 14px; line-height: 22px; color: #353535; margin: 0; text-align: justify; } #content .t4fx-du-the-meta p { display: flex; align-items: center; height: 22px; margin: 0; font-family: var(--t4-font-body); font-weight: 400; font-size: 10px; line-height: 13.66px; color: #7c7c7c; } /* Dấu '|' khai khung **5px** bên Figma (cỡ 16 / hộp dòng 22, khác hẳn hai lớp chữ 10px cạnh nó); Manrope vẽ nó hẹp hơn vì phông gốc là Metropolis — đã miễn trừ, xem qa/phan-hoi-figma.md mục 27. Ghim bề rộng 5px như mục 21.4, nếu không phần đuôi hàng meta dồn lệch ~2,3px. */ #content .t4fx-du-the-meta-gach { font-size: 16px; line-height: 22px; margin: 0 10px; width: 5px; text-align: center; } #content .t4fx-du-the-meta-nhan { margin-right: 5px; } #content .t4fx-du-n1-the .t4fx-du-the-nhan { margin-bottom: 19.5px; } #content .t4fx-du-n1-the .t4fx-du-the-tt { margin-bottom: 4px; } #content .t4fx-du-n1-the .t4fx-du-the-mo { margin-bottom: 19.5px; } /* Hai cột tick — bước 68: mục 36 (đệm dọc 8) + đệm 16 + kẻ 1 + khe 15. ⚠ Viền 0,5px hiện thành 1px nên khe cuối là 15 chứ không phải 16. */ #content .t4fx-du-tick.row { margin: 0; width: 100%; max-width: none; } #content .col.t4fx-du-tick-cot { flex: 0 0 329px; max-width: 329px; padding: 0; } #content .col.t4fx-du-tick-cot + .col.t4fx-du-tick-cot { margin-left: 16px; } #content .t4fx-du-tick-muc p { display: flex; align-items: center; min-height: 20px; margin: 0; font-family: var(--t4-font-body); font-weight: 500; font-size: 14px; line-height: 20px; color: #1f1f1f; } /* ⛔ Dấu tích dùng CHUNG định nghĩa với mục 21.5 — đừng chép lại. Bản chép đầu tiên tự gõ 'stroke-width='2'' và ảnh nhiệt bắt được ngay: kích thước đúng (13,5×9,5 ↔ Figma 13,0×9,5) nhưng DIỆN TÍCH MỰC 33,5 px² so với 20,0 px² — nét dày gấp rưỡi. Nét thật của 'cl-icon-success' là ~1,2px, tức 'stroke-width: 1,2' trên viewBox 14 đơn vị — đo lại được ĐÚNG 20,0 px². */ /* nhom1: kẻ nằm SAU mỗi mục, mục cuối không kẻ [figma] section “nhóm 1” — desktop '722:30573' · mobile '1385:22357' (node lấy từ bản đồ đo: tools/truy-node-be-rong.py --lop t4fx-du-n1) */ #content .t4fx-du-n1 .t4fx-du-tick-muc { padding: 8px 0 24px; border-bottom: .5px solid #a2a2a2; margin-bottom: 15px; } #content .t4fx-du-n1 .t4fx-du-tick-muc:last-child { padding-bottom: 8px; border-bottom: 0; margin-bottom: 0; } /* nhom3: NGƯỢC LẠI — kẻ nằm TRƯỚC mỗi mục, kể cả mục đầu (Vector ở y=250 là mép trên khối), và không có kẻ sau mục cuối. */ /* ⚠ Ở đây khe là **16**, KHÔNG bù 1px như nhom1: viền nằm ở ĐẦU hộp nên nó ăn vào phần đệm của chính hộp này, không chen vào khe giữa hai hộp. Đặt 15 thì cả cột nhích lên 1px mỗi mục và mốc so với cột phải lệch 2,36px. */ #content .t4fx-du-tick-3 .t4fx-du-tick-muc { padding: 23px 0 8px; border-top: .5px solid #a2a2a2; margin-top: 16px; } #content .t4fx-du-tick-3 .t4fx-du-tick-muc:first-child { margin-top: 0; } /* ⛔ Cột tick của nhom3 rộng **289,5** (595 = 289,5×2 + 16), KHÔNG phải 329 như nhom1 (674 = 329×2 + 16). Để 329 là hai cột cộng lại 674 > 595 nên cột thứ hai XUỐNG DÒNG — khối cao 621,6 thay vì 566 và mọi mốc ngang lệch 305,5px. */ #content .t4fx-du-tick-3 .col.t4fx-du-tick-cot { flex: 0 0 289.5px; max-width: 289.5px; } /* [figma] trang20 · section nhom3 — section DUY NHẤT chứa đủ bộ bề rộng của cụm này: 288px→'722:31420' (+5) · 595px→'722:31409' (+13) (khớp theo TẬP bề rộng, chắc hơn khớp từng số: 528 đứng một mình ra hàng trăm ứng viên, '528 và 506 cùng một section' thì gần như duy nhất) */ /* 22.6 'nhom3' — hai cột 595 khe 42 */ #content .col.t4fx-du-n3-trai, #content .col.t4fx-du-n3-phai { flex: 0 0 595px; max-width: 595px; padding: 0; } #content .col.t4fx-du-n3-phai { margin-left: 42px; } #content .box.t4fx-du-n3-the { display: flex; align-items: flex-start; margin: 0 0 16px; } #content .box.t4fx-du-n3-the .box-image { flex: 0 0 287.5px; width: 287.5px; } #content .box.t4fx-du-n3-the .box-image img { width: 287.5px; height: 161.72px; object-fit: cover; border-radius: 5px; } #content .box.t4fx-du-n3-the .box-text { flex: 1 1 auto; padding: 0; margin-left: 20px; min-width: 0; } #content .t4fx-du-n3-the .t4fx-du-the-nhan { margin-bottom: 8px; } #content .t4fx-du-n3-the .t4fx-du-the-tt { margin-bottom: 4px; } #content .t4fx-du-n3-the .t4fx-du-the-mo { margin-bottom: 8px; } /* ── Khổ ≤849: xem §5 bản kê ─────────────────────────────────────────────── */ @media (max-width: 849px) { /* Thẻ trắng DÁN SÁT mép section — khác #19, đừng chép nguyên khối của nó. */ #content .t4fx-du { padding: 24px 0; } #content .t4fx-du::before { top: 0; bottom: 0; width: 100%; } /* Giành lại cả 'width' LẪN 'max-width' khỏi luật chung 352px của trang #4 */ #content .t4fx-du > .section-content > .row { width: 354px; max-width: 354px; } #content .col.t4fx-du-news-cot, #content .col.t4fx-du-n1-trai, #content .col.t4fx-du-n1-phai, #content .col.t4fx-du-n3-trai, #content .col.t4fx-du-n3-phai { flex: 0 0 100%; max-width: 100%; margin-left: 0; } /* ⚠ Phải nhắc lại đúng bộ chọn kề '+': luật 'margin-left: 10px' ở phần desktop có độ ưu tiên cao hơn dòng gộp bên trên, không gỡ thì ba thẻ 2–4 tụt sang phải 10px so với thẻ 1. */ #content .col.t4fx-du-news-cot + .col.t4fx-du-news-cot { margin-left: 0; margin-top: 10px; } #content .col.t4fx-du-n1-phai, #content .col.t4fx-du-n3-phai { margin-top: 42px; } /* Thẻ đổi ảnh LÊN TRÊN, khe 20 */ #content .box.t4fx-du-n1-the, #content .box.t4fx-du-n3-the { display: block; } #content .box.t4fx-du-n1-the .box-image, #content .box.t4fx-du-n3-the .box-image { width: 100%; } #content .box.t4fx-du-n1-the .box-image img, #content .box.t4fx-du-n3-the .box-image img { width: 100%; height: 199.12px; } #content .box.t4fx-du-n1-the .box-text, #content .box.t4fx-du-n3-the .box-text { margin: 20px 0 0; } #content .t4fx-du-nb .t4fx-bl-nb-hinh img { height: 199.12px; } #content .t4fx-du-news-anh img { height: 199.12px; } /* ⚠ Hai cột tick VẪN là hai cột ở khổ 402 — 169 khe 16, không rã một cột. */ /* ⚠ Phải nhắc lại cả biến thể '-3': luật 289,5 của nó ở phần desktop có độ ưu tiên CAO HƠN dòng này (2 lớp + '.col'), không viết là nhom3 khổ 402 giữ nguyên 289,5 và cột hai xuống dòng (cao 1425 thay vì 1303). */ #content .col.t4fx-du-tick-cot, #content .t4fx-du-tick-3 .col.t4fx-du-tick-cot { flex: 0 0 169px; max-width: 169px; } /* ⛔ ĐÃ XOÁ (20/08/2026) — ba luật giành lại bề rộng/cỡ chip cho #20. Chúng bám lớp 't4fx-bl-chde' vốn không còn kết xuất (xem 21.6b), nên KHỚP 0 phần tử trên cả 'du-an' lẫn 'blog'. ⚠ ĐÍNH CHÍNH luôn nỗi lo ghi ở 21.6b: chú thích cũ nói lớp 't4fx-bl-chde t4fx-bl-chde-N' "nay nằm trên chính 'li.tab'" nên hai luật này sẽ tô xanh cố định tab 1. Soi DOM thật ngày 20/08: 'li.tab' mang 'class="tab active has-icon"', KHÔNG có 't4fx-bl-chde'. Không có lỗi tô xanh nào; chúng chỉ là luật trơ. Bề rộng chip của #20 do mục 21.1 và các luật '.t4fx-du .t4fx-bl-chde-dai > ul.nav-tabs > li.tab' đặt. */ /* Breadcrumb: mặc định chung là kẻ ngăn 20px + 'line-height: normal' cho mục cuối; mỗi trang tự khai lại 32px / 22px (mục 20.1 và 21.1). */ .t4.t4-trang-du-an .t4fx-crumb li + li::before, .t4.t4-trang-san-pham-so-detail .t4fx-crumb li + li::before { width: 32px; } .t4.t4-trang-du-an nav.t4fx-crumb ol li:last-child, .t4.t4-trang-du-an nav.t4fx-crumb ol li:last-child *, .t4.t4-trang-san-pham-so-detail nav.t4fx-crumb ol li:last-child, .t4.t4-trang-san-pham-so-detail nav.t4fx-crumb ol li:last-child * { line-height: 22px; } } /* ══════════════════════════════════════════════════════════════════════════ 23. TRANG #18 'san-pham-so-detail' — Figma 1224:8898…1229:8257 (desktop) 1386:27165…1386:27492 (402) ────────────────────────────────────────────────────────────────────────── Bản kê: 'uxb/ban-ke-san-pham-so-detail.md'. ⛔ TRÙNG THIẾT KẾ với #15 'khoa-hoc-1' (cửa sổ C, bộ class 't4kh-*' trong '49-nhom-khoa-hoc.css') — 93/93 lớp chữ giống hệt. Dựng độc lập vì bản kia còn 321 lệch và nằm trong tệp cửa sổ D không được sửa (§0 bản kê). Gộp hai bộ class SAU khi cả hai ĐẠT. ══════════════════════════════════════════════════════════════════════════ */ /* 23.1 Khung chung — khối nội dung 1080, riêng 'noidung'/'khac' là 1056 [figma] section “khách hàng” — desktop '1229:8169' · mobile '1398:15065' (node lấy từ bản đồ đo: tools/truy-node-be-rong.py --lop t4sp-kh) 1080 = Container '532:4123' (GIA ĐÌNH SỐ KHUNG, 30-components). */ #content .t4sp-hero, #content .t4sp-cn, #content .t4sp-gv, #content .t4sp-nd, #content .t4sp-kh { position: relative; } #content .t4sp-hero > .section-content > .row, #content .t4sp-cn > .section-content > .row, #content .t4sp-gv > .section-content > .row { width: 1080px; max-width: 1080px; margin-left: auto; margin-right: auto; } #content .t4sp-nd > .section-content > .row, #content .t4sp-kh > .section-content > .row { width: 1056px; max-width: 1056px; margin-left: auto; margin-right: auto; } /* 23.2 HERO — dải kem 450 tràn 1900 + thẻ form 508×800 ĐẶT TUYỆT ĐỐI [figma] section hero — desktop '1229:7978' · mobile '1386:27213' (node lấy từ bản đồ đo: tools/truy-node-be-rong.py --lop t4sp-hero) ⛔ Thẻ cao 800 nằm trong dải chỉ 450 và đè xuống khối dưới 342px. Để nó theo dòng chảy thì hàng 1 cao 800 và hai danh sách bị đẩy từ y=474 xuống 816 — sai 342px mà nhìn ảnh vẫn thấy "hợp lý". */ #content .t4sp-hero { padding: 0; } #content .t4sp-hero::before { content: ""; position: absolute; z-index: 0; top: 0; height: 450px; left: 50%; transform: translateX(-50%); width: 1900px; max-width: 100vw; background: #f8f5ee; } #content .t4sp-hero .section-content { position: relative; z-index: 1; } /* [figma] trang18 · section hero/hero_mb — 2 lớp rộng 80px: '1229:7987' · '1386:27222' (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 18 để chọn) */ /* Hàng nhãn + kẻ: rộng 1080 dù nằm trong cột 508 của Figma (§2.2). Kẻ chạy khuất SAU thẻ form — đúng như thiết kế, không phải lỗi chồng lớp. */ /* Mốc dọc TUYỆT ĐỐI của hero (§2.3 bản kê) — Section 1 cao **450** dù nội dung chỉ tới 397, rồi khe 24 tới Section 2. Để dòng chảy tự quyết thì hero cao 1033 thay vì 1188: thiếu đúng 53px thừa của Section 1 cộng khe 24 và khe 18 giữa hàng nhãn với H1. */ #content .t4sp-nhan.row { margin: 0; padding-top: 16px; } #content .t4sp-nhan-o { display: flex; align-items: center; height: 45px; padding-bottom: 16px; box-sizing: content-box; } #content .t4sp-nhan-o p { flex: 0 0 auto; margin: 0; padding: 4px 8px; background: var(--t4-camel); border: 1px solid rgba(0, 0, 0, .11); border-radius: 4px; min-width: 80px; text-align: center; font-family: var(--t4-font-body); font-weight: 500; font-size: 14px; line-height: 19.124px; letter-spacing: .14px; color: #fff; } #content .t4sp-nhan-o::after { content: ""; flex: 1 1 auto; margin-left: 16px; height: 0; border-top: 1px solid var(--t4-camel); } /* [figma] trang18 · section hero — section DUY NHẤT chứa đủ bộ bề rộng của cụm này: 95px→'1229:7995' · 508px→'1229:7983' (+12) (khớp theo TẬP bề rộng, chắc hơn khớp từng số: 528 đứng một mình ra hàng trăm ứng viên, '528 và 506 cùng một section' thì gần như duy nhất) */ /* Khe 53 (đáy Section 1) và 24 (sang Section 2) là hai lề KỀ NHAU nên GỘP lại thành 53, không cộng thành 77. Dồn cả vào một chỗ. */ /* ⛔ 'position: relative' ở ĐÂY là bắt buộc: thẻ form đặt tuyệt đối với 'left: 572px', mà 572 là toạ độ trong khối nội dung **1080**. Không có dòng này thì nó neo vào '[section]' rộng 1885 và thẻ nằm lệch sang trái ~400px — chiều cao section vẫn đúng nên chỉ bảng dày bắt được (hai mốc 'Địa chỉ email * → Giá gốc:' và 'Điền vào đây → Học phí'). */ #content .t4sp-dau.row { margin: 18px 0 77px; position: relative; } #content .col.t4sp-dau-trai { flex: 0 0 508px; max-width: 508px; padding: 0; } /* Thẻ khai 'y=16' trong hệ toạ độ của KHUNG HERO, nhưng neo vào '.t4sp-dau' — hàng này bắt đầu ở y=95 (sau hàng nhãn 77 + khe 18) ⇒ 'top' phải là **16 − 95 = −79**. Để 16 là thẻ tụt xuống 95px và mọi mốc ngang giữa cột trái với ô nhập lệch theo. */ /* [phục vụ] phần tử: thẻ form nổi "Đăng ký học ngay" | [trang] san-pham-so-detail | [lý do vượt panel] `z-index` — 22/08/2026: nút "Học ngay" (nay là