/* ========================================================================== 46-page-ve-chung-toi.css — TRANG #2 "Về chúng tôi" Figma 605:4136 (desktop 1900×7587) · 1093:9585 (mobile 402×8354). Trang DÀI NHẤT của dự án; bản kê phần tử ở 'uxb/ban-ke-ve-chung-toi.md'. ========================================================================== */ /* --- 16.1 TOKEN CHỮ — một lượt cho mọi vai trò ----------------------------- [phục vụ] phần tử: Text | khối: toàn trang 've-chung-toi' [trang] ve-chung-toi | [figma] mọi lớp TEXT của 16 màn [lý do vượt panel] panel Text chỉ có ba cỡ (Small/Normal/Large), không đặt được 'line-height', 'letter-spacing' hay độ đậm 800 Vòng đo đầu tiên: 1169 ✅ / 687 ❌, trong đó **390 mốc (57 %) là token chữ thuần** — 'lh' 117 · 'size' 103 · 'weight' 67 · 'mau' 65 · 'font' 38. Một khối khai theo VAI TRÒ xử lý cả 390 mốc, thay vì vá từng lớp. ⚠ Hai tiêu đề của trang này dùng PLAYFAIR DISPLAY, không phải Manrope — đọc «40/53,32 w600» rồi mặc định Manrope là sai (bẫy đã ghi ở mục 15.1 của trang #25). */ /* Tiêu đề section: Playfair 40/53,32 w600 màu rêu; khổ 402 hạ còn 32/42,656 */ #content .t4fx-vct-h2 h2, #content .t4fx-vct-fd-h2 h2, #content .t4fx-vct-cta-h2 h2 { font-family: var(--t4-font-head); font-weight: 600; font-size: 40px; line-height: 53.32px; color: var(--t4-dark-moss); margin: 0; letter-spacing: 0; } /* Đoạn dẫn dưới tiêu đề — hai giãn dòng khác nhau theo section, xem 16.2 */ #content .t4fx-vct-dan p, #content .t4fx-vct-kb-dan p, #content .t4fx-vct-fd-mo p, #content .t4fx-vct-tn-mo p, #content .t4fx-vct-cta-mo p { font-size: 16px; line-height: 26px; color: var(--t4-text); margin: 0; letter-spacing: 0; } /* 'giatri' và 'tamnhin' khai 16/30 chứ không phải 16/26 */ #content .t4fx-vct-gt .t4fx-vct-dan p, #content .t4fx-vct-tn .t4fx-vct-dan p { line-height: 30px; } /* Hero desktop */ #content .t4fx-vct-hero .t4fx-vct-h1 :is(h1, h2) { font-family: var(--t4-font-head); font-weight: 600; font-size: 64px; line-height: 85.312px; color: var(--t4-light); margin: 0; letter-spacing: 0; } #content .t4fx-vct-sub p { font-size: 26px; line-height: 35.516px; font-weight: 500; color: var(--t4-light); margin: 0; letter-spacing: 0; } /* Thẻ "Sự khác biệt": tiêu đề 16/21,856 w700 · mô tả 14/22 */ #content .t4fx-vct-the-td h3 { font-family: var(--t4-font-body); font-weight: 700; font-size: 16px; line-height: 21.856px; color: var(--t4-text); margin: 0; letter-spacing: 0; } #content .t4fx-vct-the-mo p { font-size: 14px; line-height: 22px; color: var(--t4-text); margin: 0; letter-spacing: 0; } /* Số lớn: 'giatri'/'tamnhin'/'dna' đều 48/24 w800 */ #content .t4fx-vct-so p { font-family: var(--t4-font-body); font-weight: 800; font-size: 48px; line-height: 24px; color: var(--t4-leaf); margin: 0; letter-spacing: 0; } #content .t4fx-vct-so-nho p { font-weight: 800; font-size: 16px; line-height: 24px; color: var(--t4-leaf); margin: 0; letter-spacing: 0; } /* Mục đánh số của 'giatri': tiêu đề 22/24 w800 · mô tả 14/24 */ #content .t4fx-vct-muc-td h3 { font-family: var(--t4-font-body); font-weight: 800; font-size: 22px; line-height: 24px; color: var(--t4-text); margin: 0; letter-spacing: 0; } #content .t4fx-vct-muc-mo p, #content .t4fx-vct-moc-mo p { font-size: 14px; line-height: 24px; color: var(--t4-text); margin: 0; letter-spacing: 0; } /* 'tamnhin': hai nhãn "Sứ mệnh" / "Tầm nhìn" là 22/30,052 w700 */ #content .t4fx-vct-tn-td h3 { font-family: var(--t4-font-body); font-weight: 700; font-size: 22px; line-height: 30.052px; color: var(--t4-text); margin: 0; letter-spacing: 0; } /* Bốn ô DNA: số 48/24 w800 · tiêu đề 22/24 **w700** (khác 'giatri' w800) */ #content .t4fx-vct-dna-so p { font-family: var(--t4-font-body); font-weight: 800; font-size: 48px; line-height: 24px; color: var(--t4-leaf); margin: 0; letter-spacing: 0; } #content .t4fx-vct-dna-td h3 { font-family: var(--t4-font-body); font-weight: 700; font-size: 22px; line-height: 24px; color: var(--t4-text); margin: 0; letter-spacing: 0; } #content .t4fx-vct-dna-mo p { font-size: 14px; line-height: 24px; color: var(--t4-text); margin: 0; letter-spacing: 0; } /* Bốn ô số liệu của 'founder': hai ô đầu 36/24, hai ô sau 24/24 — Figma khai KHÁC NHAU, không phải một cỡ. Mô tả 14/24. */ #content .t4fx-vct-so-lon h3 { font-family: var(--t4-font-body); font-weight: 800; font-size: 36px; line-height: 24px; color: var(--t4-leaf); margin: 0; letter-spacing: 0; } #content .t4fx-vct-fd-so > .col:nth-child(3) .t4fx-vct-so-lon h3, #content .t4fx-vct-fd-so > .col:nth-child(4) .t4fx-vct-so-lon h3 { font-size: 24px; } #content .t4fx-vct-so-mo p { font-size: 14px; line-height: 24px; color: var(--t4-text); margin: 0; letter-spacing: 0; } /* Nút CTA cuối trang: chữ 16/21,856 w700 trắng trên nền rêu */ #content .t4fx-vct-cta-nut, #content .t4fx-vct-cta-nut span { font-family: var(--t4-font-body); font-weight: 700; font-size: 16px; line-height: 21.856px; letter-spacing: 0; text-transform: none; } @media (max-width: 849px) { /* Khổ 402 hạ tiêu đề section xuống 32/42,656; các cỡ số cũng khác */ #content .t4fx-vct-h2 h2, #content .t4fx-vct-fd-h2 h2, #content .t4fx-vct-cta-h2 h2 { font-size: 32px; line-height: 42.656px; } #content .t4fx-vct-so p { font-size: 40px; } #content .t4fx-vct-so-nho p { font-size: 14px; text-align: center; } #content .t4fx-vct-muc-td h3 { font-size: 18px; } #content .t4fx-vct-dna-td h3 { font-size: 20px; font-weight: 800; } #content .t4fx-vct-so-lon h3 { font-size: 36px; } #content .t4fx-vct-fd-so > .col:nth-child(3) .t4fx-vct-so-lon h3, #content .t4fx-vct-fd-so > .col:nth-child(4) .t4fx-vct-so-lon h3 { font-size: 20px; } #content .t4fx-vct-cta-nut, #content .t4fx-vct-cta-nut span { font-size: 14px; line-height: 19.124px; } /* Hero khổ 402 là MỘT BỐ CỤC KHÁC hẳn desktop: tiêu đề nhỏ hơn, có đoạn dẫn và hai nút — xem 'uxb/ban-ke-ve-chung-toi.md' §2.2. */ #content .t4fx-vct-hero .t4fx-vct-h1--mb :is(h1, h2) { font-family: var(--t4-font-head); font-weight: 700; font-size: 26px; line-height: 40px; color: var(--t4-white); } #content .t4fx-vct-hero-mo p { font-size: 14px; line-height: 28px; color: var(--t4-white); margin: 0; text-align: center; } } /* --- 16.2 ẨN/HIỆN THEO KHỔ MÀN -------------------------------------------- [phục vụ] phần tử: Text | khối: 5 section có nội dung KHÁC nhau hai khổ [trang] ve-chung-toi | [figma] hero · founder · khacbiet · giatri · dna [lý do vượt panel] panel Visibility ẩn được CỘT, không ẩn được từng ô chữ ⛔ Đây KHÔNG phải "một bản co lại". Năm section có CHỮ KHÁC HẲN giữa hai khổ (xem 'uxb/ban-ke-ve-chung-toi.md' §2.2) — hero còn khác cả bố cục và có thêm hai nút. Site dựng HAI BỘ rồi ẩn/hiện, đúng cách trang chủ đã làm. '.t4-only-desktop' / '.t4-only-mobile' là mô-típ dùng chung, khai ở '40-page-xu-ly-loi-sai-google-ads.css' mục 9 cho '.row' và '.section'. Ở đây cần thêm cho chính Ô VĂN BẢN ('.text') và cho '[button]'. */ /* ⛔ BỌC TRONG PHẠM VI TRANG ('body.t4-trang-ve-chung-toi'), III.4.0 luật KHÔNG ĐỘNG CHẠM + linter mục (8). Bản đầu khai TOÀN CỤC '.t4 #content .text.t4-only-mobile' — và **làm TRÔI trang #4 ngay lập tức**: 1876 ✅ / 0 ❌ → 1874 ✅ / **2 ❌**. Nguyên nhân: trang #4 cũng dùng 't4-only-mobile', luật của nó khai ở mục 9 của '40-page-xu-ly-loi-sai-google-ads.css' với bộ chọn '.row'/'.section', còn luật của tôi nhắm '.text' — cụ thể hơn VÀ nạp sau (46 > 40) nên thắng. Đây đúng cái nút thắt III.4.0 mô tả: một luật viết cho "mọi trang" nằm trong tệp của MỘT trang. Bắt được nhờ chạy lại tám trang đã xong ngay sau khi sửa — không có bước đó thì nó nằm im. */ body.t4-trang-ve-chung-toi #content .text.t4-only-mobile, body.t4-trang-ve-chung-toi #content .button.t4-only-mobile, body.t4-trang-ve-chung-toi #content .img.t4-only-mobile { display: none; } @media (max-width: 849px) { body.t4-trang-ve-chung-toi #content .text.t4-only-desktop, body.t4-trang-ve-chung-toi #content .button.t4-only-desktop, body.t4-trang-ve-chung-toi #content .img.t4-only-desktop { display: none; } body.t4-trang-ve-chung-toi #content .text.t4-only-mobile, body.t4-trang-ve-chung-toi #content .img.t4-only-mobile { display: block; } body.t4-trang-ve-chung-toi #content .button.t4-only-mobile { display: inline-block; } } /* --- 16.3 HÌNH HỌC — mọi con số do 'tools/hinh-hoc.py' in ra (LUẬT 5 · III.14) [phục vụ] phần tử: Row/Col | khối: cả sáu section thân trang + CTA [trang] ve-chung-toi | [figma] xem bảng số ngay dưới [lý do vượt panel] panel Col chỉ chia span 1/12 ⇒ bội số 90; KHÔNG con số nào của Figma là bội của 90 (III.14.0) Lệnh tái lập: 'python3 tools/hinh-hoc.py trang2 [--sau 6]' màn cột trái khe cột phải ghi chú founder 506 46 528 minh hoạ | chữ khacbiet 397 172 511 H2 | đoạn dẫn giatri 380 196 504 H2+đoạn | 5 mục tamnhin 380 172 528 H2+đoạn | Sứ mệnh+Tầm nhìn dna 528 46 506 H2+đoạn | minh hoạ khacbiet 4 thẻ 264 × 4, khe 8 (264·4 + 8·3 = 1080 ✓) founder 4 ô số 252 × 4, khe 24, lòng 215 (đệm trái 19) dna 4 ô 255 × 4, khe 20, lòng 218 (đệm trái 19) giatri 1 mục số 70 | khe 16 | chữ 418 · các mục cách nhau 20 tamnhin icon 48 | khe 16 | nhãn · khối cách nhau 24 cta thẻ 1078,98×289 đệm 40 bo 10 · trong 998,98 · khe dọc 17 nút 206×46 đệm 12/40 bo 5 khổ 402: giatri số 55 | khe 10 | chữ 287 (55+10+287 = 352 ✓) tamnhin icon 48 | khe 8 founder 4 ô 168 × 2 cột, khe 16 · dna 4 ô 2 cột hero hai nút 224 | khe 7 | 121 (224+7+121 = 352 ✓) cta thẻ 352×424 đệm 32 · trong 288 · nút 174×43 ⛔ 'max-width' LUÔN đi kèm chiều neo (III.14.2-3): thiếu 'margin-right: auto' thì khối dán phải mà bảng dày KHÔNG thấy — nó khai 'bo_toa_do: true' nên cả cụm trôi cùng nhau không sinh mốc nào (I.8c). Đã trả giá ở CTA trang #25. */ #content .t4fx-vct-fd .section-content > .row, #content .t4fx-vct-kb .section-content > .row, #content .t4fx-vct-gt .section-content > .row, #content .t4fx-vct-tn .section-content > .row, #content .t4fx-vct-dna .section-content > .row { max-width: 1080px; } #content .t4fx-vct-fd .col, #content .t4fx-vct-kb .col, #content .t4fx-vct-gt .col, #content .t4fx-vct-tn .col, #content .t4fx-vct-dna .col { padding-left: 0; padding-right: 0; } /* Chiều neo — xem cảnh báo ở header. */ #content .t4fx-vct-fd .section-content > .row, #content .t4fx-vct-kb .section-content > .row, #content .t4fx-vct-gt .section-content > .row, #content .t4fx-vct-tn .section-content > .row, #content .t4fx-vct-dna .section-content > .row { margin-left: auto; margin-right: auto; } /* [figma] trang2 · section founder — section DUY NHẤT chứa đủ bộ bề rộng của cụm này: 252px→'801:34197' (+3) · 506px→'918:7707' (+5) · 528px→'801:33349' (+2) (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) */ /* founder — 506 | 46 | 528 */ #content .t4fx-vct-fd-hang { flex-wrap: nowrap; } #content .col.t4fx-vct-fd-anh { flex: 0 0 506px; max-width: 506px; } #content .col.t4fx-vct-fd-chu { flex: 0 0 528px; max-width: 528px; margin-left: 46px; } /* founder — 4 ô số liệu 252, khe 24, lòng 215 nhờ đệm trái 19 */ #content .t4fx-vct-fd-so { flex-wrap: nowrap; margin-top: 32px; } #content .col.t4fx-vct-so-o { flex: 0 0 252px; max-width: 252px; padding-left: 19px; border-left: 1px solid rgba(0, 0, 0, .11); } #content .col.t4fx-vct-so-o + .col.t4fx-vct-so-o { margin-left: 24px; } /* [figma] '801:34871' — Heading 2 · 397×78 · trang2·khacbiet (lớp DUY NHẤT rộng 397px trong figma-spec/trang2.json) */ /* khacbiet — H2 397 | 172 | đoạn 511 */ #content .t4fx-vct-kb-dau { flex-wrap: nowrap; } #content .col.t4fx-vct-kb-td { flex: 0 0 397px; max-width: 397px; } #content .col.t4fx-vct-kb-mo { flex: 0 0 511px; max-width: 511px; margin-left: 172px; } /* khacbiet — 4 thẻ 264×450 bo 16, khe 8, viền 1px + đệm 24 (III.14.2-4) */ #content .t4fx-vct-kb-luoi { flex-wrap: nowrap; margin-top: 40px; } #content .col.t4fx-vct-kb-the { flex: 0 0 264px; max-width: 264px; min-height: 450px; background: var(--t4-white); border: 1px solid rgba(0, 0, 0, .1); border-radius: 16px; padding: 32px 24px 60px; } #content .col.t4fx-vct-kb-the + .col.t4fx-vct-kb-the { margin-left: 8px; } /* Mỗi thẻ có BIỂU TƯỢNG 48×48 camel + ĐƯỜNG KẺ 214×1 — hai thứ 'hinh-hoc.py' lộ ra mà T1 không thấy (icon không phải chữ · III.14.4). Dựng bằng mặt nạ CSS trên chính cột, không thêm thẻ nào (giữ T0 100 %). */ #content .col.t4fx-vct-kb-the > .col-inner::before { content: ""; display: block; width: 48px; height: 48px; background: var(--t4-camel); -webkit-mask: var(--t4fx-icon) center/contain no-repeat; mask: var(--t4fx-icon) center/contain no-repeat; } /* [figma] trang2 · section giatri — section DUY NHẤT chứa đủ bộ bề rộng của cụm này: 70px→'801:34964' (+4) · 380px→'801:34922' (+2) · 418px→'801:34930' (+4) · 504px→'801:34929' (+5) (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) */ /* giatri — 380 | 196 | 504 · mục: số 70 | 16 | chữ 418, các mục cách 20 */ #content .t4fx-vct-gt-hang { flex-wrap: nowrap; } #content .col.t4fx-vct-cot-trai { flex: 0 0 380px; max-width: 380px; } #content .col.t4fx-vct-gt-ds { flex: 0 0 504px; max-width: 504px; margin-left: 196px; } #content .t4fx-vct-muc { flex-wrap: nowrap; } #content .t4fx-vct-muc + .t4fx-vct-muc { margin-top: 20px; } #content .t4fx-vct-muc > .col.t4fx-vct-muc-so { flex: 0 0 70px; max-width: 70px; } #content .t4fx-vct-muc > .col.t4fx-vct-muc-chu { flex: 0 0 418px; max-width: 418px; margin-left: 16px; } /* [figma] trang2 · section tamnhin — section DUY NHẤT chứa đủ bộ bề rộng của cụm này: 48px→'803:35067' (+1) · 70px→'803:35098' (+2) · 394px→'803:35100' (+2) · 528px→'803:35056' (+11) (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) */ /* tamnhin — 380 | 172 | 528 · icon 48 | 16 | nhãn · khối cách 24 */ #content .t4fx-vct-tn-hang { flex-wrap: nowrap; } #content .col.t4fx-vct-tn-ds { flex: 0 0 528px; max-width: 528px; margin-left: 172px; } /* Nhãn "Sứ mệnh"/"Tầm nhìn": icon 48 ở x=24, chữ ở x=88 ⇒ chữ cách icon 16, và cả cụm thụt 24 so với khung 528 (đã cho ở '.col-inner' bên trên). */ #content .t4fx-vct-tn-td h3 { padding-left: 64px; position: relative; } #content .t4fx-vct-tn-td h3::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: var(--t4-camel); -webkit-mask: var(--t4fx-icon-tn) center/contain no-repeat; mask: var(--t4fx-icon-tn) center/contain no-repeat; } /* Ba mốc 'tamnhin': khung trong 528 có đệm trái 24, rồi số 70 | khe 16 | chữ 394 (chứa mực 357 = 394 − 18×2 − viền 1). Các mốc DÍNH NHAU (khe 0), khác 'giatri' khe 20 — hai khối trông giống nhau nhưng số khác. */ /* ⛔ CHỈ DESKTOP — khổ 402 khai đệm khác (bài học 21d cạm bẫy 4: luật không bọc media query nằm SAU thì thắng cả khối @media phía trước). */ @media (min-width: 850px) { #content .col.t4fx-vct-tn-ds > .col-inner { padding-left: 24px; } } #content .t4fx-vct-moc { flex-wrap: nowrap; } #content .t4fx-vct-moc > .col.t4fx-vct-moc-so { flex: 0 0 70px; max-width: 70px; } #content .t4fx-vct-moc > .col.t4fx-vct-moc-chu { flex: 0 0 394px; max-width: 394px; margin-left: 16px; } /* [figma] trang2 · section dna — section DUY NHẤT chứa đủ bộ bề rộng của cụm này: 255px→'803:35553' (+3) · 506px→'918:8164' (+5) · 528px→'803:35579' (+5) (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) */ /* dna — 528 | 46 | 506 · 4 ô 255 khe 20, lòng 218 */ #content .t4fx-vct-dna-hang { flex-wrap: nowrap; } #content .col.t4fx-vct-dna-chu { flex: 0 0 528px; max-width: 528px; } #content .col.t4fx-vct-dna-anh { flex: 0 0 506px; max-width: 506px; margin-left: 46px; } #content .t4fx-vct-dna-luoi { flex-wrap: nowrap; margin-top: 40px; } #content .col.t4fx-vct-dna-o { flex: 0 0 255px; max-width: 255px; padding-left: 19px; border-left: 1px solid rgba(0, 0, 0, .11); } #content .col.t4fx-vct-dna-o + .col.t4fx-vct-dna-o { margin-left: 20px; } /* [figma] '803:35837' — Background+Border · 1078.98×289 · trang2·cta (lớp DUY NHẤT rộng 1079px trong figma-spec/trang2.json) */ /* cta — thẻ trắng 1078,98×289, đệm 40, viền 1px, bo 10; khe dọc trong 17 */ #content .t4fx-vct-cta .section-content > .row { max-width: 1079px; } #content .col.t4fx-vct-cta-the > .col-inner { background: var(--t4-white); border: 1px solid rgba(0, 0, 0, .11); border-radius: 10px; padding: 40px; } #content .t4fx-vct-cta-mo { margin-top: 17px; } #content .t4fx-vct-cta-nut { margin: 41px 0 0; min-height: 46px; padding: 0 40px; } @media (max-width: 849px) { /* Khổ 402: mọi khối một cột 352 — KHÔNG suy từ desktop (III.14.2-6) */ #content .t4fx-vct-fd .section-content > .row, #content .t4fx-vct-kb .section-content > .row, #content .t4fx-vct-gt .section-content > .row, #content .t4fx-vct-tn .section-content > .row, #content .t4fx-vct-dna .section-content > .row, #content .t4fx-vct-cta .section-content > .row { max-width: 352px; } #content .t4fx-vct-fd-hang, #content .t4fx-vct-kb-dau, #content .t4fx-vct-kb-luoi, #content .t4fx-vct-gt-hang, #content .t4fx-vct-tn-hang, #content .t4fx-vct-dna-hang, #content .t4fx-vct-dna-luoi, #content .t4fx-vct-fd-so { flex-wrap: wrap; } /* ⛔ 'flex: 0 0 352px' KHÔNG dùng được ở đây. 'flex-basis' đo theo TRỤC CHÍNH, mà mục 16.13 đặt 'flex-direction: column' cho '.t4fx-vct-dna-hang' ⇒ 352 thành CHIỀU CAO. Đo được cột ảnh 352×352 (ảnh bên trong vẫn đúng 352×203,8) và cột chữ cũng 352 cao — một mình chỗ này làm 'dna_mb' lệch +202 ở phép so chiều cao section. Dùng 'width' cho chắc trục. */ #content .col.t4fx-vct-fd-anh, #content .col.t4fx-vct-fd-chu, #content .col.t4fx-vct-kb-td, #content .col.t4fx-vct-kb-mo, #content .col.t4fx-vct-cot-trai, #content .col.t4fx-vct-gt-ds, #content .col.t4fx-vct-tn-ds, #content .col.t4fx-vct-dna-chu, #content .col.t4fx-vct-dna-anh { flex: 0 0 auto; width: 352px; max-width: 352px; margin-left: 0; } /* khacbiet khổ 402: bốn thẻ XẾP DỌC rộng đúng cột. ⛔ Khung Figma của màn này là BẢN CŨ — 'hinh-hoc.py' báo 7 lớp nằm ngoài khung 352, mép phải xa nhất 1080, bốn thẻ vẫn ở toạ độ desktop x = 0·272·544·816. Dựng theo cách đọc responsive; mọi mốc NGANG của màn sẽ phải miễn trừ. Xem 'qa/phan-hoi-figma.md' mục 15. */ #content .col.t4fx-vct-kb-the { flex: 0 0 352px; max-width: 352px; margin-left: 0; min-height: 0; } #content .col.t4fx-vct-kb-the + .col.t4fx-vct-kb-the { margin-top: 16px; } /* giatri khổ 402: số 55 | khe 10 | chữ 287 */ #content .t4fx-vct-muc > .col.t4fx-vct-muc-so { flex: 0 0 55px; max-width: 55px; } #content .t4fx-vct-muc > .col.t4fx-vct-muc-chu { flex: 0 0 287px; max-width: 287px; margin-left: 10px; } #content .t4fx-vct-moc > .col.t4fx-vct-moc-so { flex: 0 0 55px; max-width: 55px; } #content .t4fx-vct-moc > .col.t4fx-vct-moc-chu { flex: 0 0 287px; max-width: 287px; margin-left: 10px; } /* tamnhin khổ 402: khe icon→nhãn là 8 (desktop 16) */ #content .t4fx-vct-tn-td h3 { padding-left: 56px; } /* founder · dna khổ 402: 4 ô thành lưới 2 cột 168, khe 16 */ #content .col.t4fx-vct-so-o, #content .col.t4fx-vct-dna-o { flex: 0 0 168px; max-width: 168px; margin-left: 0; } #content .col.t4fx-vct-so-o:nth-child(2n), #content .col.t4fx-vct-dna-o:nth-child(2n) { margin-left: 16px; } #content .col.t4fx-vct-so-o:nth-child(n+3), #content .col.t4fx-vct-dna-o:nth-child(n+3) { margin-top: 16px; } /* hero khổ 402: hai nút 224 | khe 7 | 121 */ #content .t4fx-vct-nut-cam { width: 224px; margin: 0; } #content .t4fx-vct-nut-trang { width: 121px; margin: 0 0 0 7px; } /* cta khổ 402: thẻ 352×424 đệm 32 · nút 174×43 */ #content .col.t4fx-vct-cta-the > .col-inner { padding: 32px; } #content .t4fx-vct-cta-nut { width: 174px; min-height: 43px; padding: 0 32px; } } /* --- 16.4 Bốn biểu tượng Material của thẻ 'khacbiet' + hai của 'tamnhin' --- [phục vụ] phần tử: Col | khối: '.t4fx-vct-kb-the' · '.t4fx-vct-tn-td' [trang] ve-chung-toi | [figma] '1202:7686' · '801:34901' · '801:34906' · '801:34911' · 'target_45dp' — đều 48×48, tô camel '#cf9156' [lý do vượt panel] biểu tượng vẽ bằng mặt nạ CSS, không có ô trong panel 'hinh-hoc.py' lộ ra chúng ở lần chạy ĐẦU TIÊN, trong khi T1 báo ghép **152/152 lớp chữ = 100 %** — vì icon và đường kẻ không phải chữ (III.14.4, điểm mù II.K-3). Đây chính là lý do LUẬT 5 bắt in hình học TRƯỚC khi dựng. */ #content .col.t4fx-vct-kb-the:nth-child(1) { --t4fx-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm-40-160v-80h80v80h-80Zm0-160v-240h80v240h-80Z'/%3E%3C/svg%3E"); } #content .col.t4fx-vct-kb-the:nth-child(2) { --t4fx-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M640-160v-280h160v280H640Zm-220 0v-640h160v640H420Zm-260 0v-440h160v440H160Z'/%3E%3C/svg%3E"); } #content .col.t4fx-vct-kb-the:nth-child(3) { --t4fx-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M280-80q-33 0-56.5-23.5T200-160v-120h-40q-33 0-56.5-23.5T80-360v-160q0-33 23.5-56.5T160-600h40v-200q0-33 23.5-56.5T280-880h400q33 0 56.5 23.5T760-800v200h40q33 0 56.5 23.5T880-520v160q0 33-23.5 56.5T800-280h-40v120q0 33-23.5 56.5T680-80H280Zm0-80h400v-280H280v280Zm0-520h400v-120H280v120Z'/%3E%3C/svg%3E"); } #content .col.t4fx-vct-kb-the:nth-child(4) { --t4fx-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-80q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z'/%3E%3C/svg%3E"); } #content .t4fx-vct-tn-ds { --t4fx-icon-tn: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-160q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm0-160q-33 0-56.5 23.5T400-480q0 33 23.5 56.5T480-400q33 0 56.5-23.5T560-480q0-33-23.5-56.5T480-560Z'/%3E%3C/svg%3E"); } /* --- 16.5 Ba thứ chỉ lộ ra khi ĐO, không khi đọc bản in hình học ---------- [phục vụ] phần tử: Row/Col · Text | khối: 'giatri' · 'tamnhin' [trang] ve-chung-toi | [figma] 'VerticalBorder' 418 chứa 'Container' 381 [lý do vượt panel] đệm lẻ 18 và màu riêng của tiêu đề mục (1) ⛔ '[row]' LỒNG TRONG '[col]' PHẢI LÀ '[row_inner]'/'[col_inner]' (III.1.1). Viết '[row]' thì WordPress đóng thẻ sai chỗ và hàng con BẬT RA ngoài cột cha — đo được: hàng nằm ở x=410 rộng 1080 thay vì trong cột 504 tại x=576. Nhìn trang thì "gần đúng" nên rất dễ bỏ qua; chỉ khi hỏi 'getBoundingClientRect()' của chính hàng đó mới thấy. Đã sửa trong 'docs/uxb/ve-chung-toi.txt'. (2) Cột chữ của mục: khung 'VerticalBorder' **418** nhưng 'Container' bên trong chỉ **381** — chênh 37 = viền 1 + đệm 18 mỗi bên (III.14.2-4). Bản in hình học cho cả hai số; phải lấy 418 cho CỘT và 381 cho CHỮ. (3) Năm tiêu đề mục của 'giatri' là camel '#cf9156'. Luật này đã có ở bản trước và bị mất khi viết lại khối 16.3 — ghi lại kèm lý do để không rơi lần nữa. */ /* ⚠ '!important' BẮT BUỘC: '[row style="collapse"]' sinh '.row-collapse', và Flatsome khai '.row-collapse > .col { padding: 0 !important }'. Không có '!important' thì luật này im lặng không chạy — đo được 'padding: 0px' trong khi bộ chọn của ta cụ thể hơn VÀ nạp sau. (Bẫy đã ghi ở bàn giao 17f §6.) */ #content .t4fx-vct-muc > .col.t4fx-vct-muc-chu, #content .t4fx-vct-moc > .col.t4fx-vct-moc-chu { padding-left: 18px !important; padding-right: 18px !important; border-left: 1px solid rgba(0, 0, 0, .11); } /* Figma căn GIỮA số theo chiều dọc trong ô: '02.' nằm ở +120 trong khung cao 264 (giữa là 132, chữ cao 24 ⇒ 120). Không căn giữa thì số dán mép trên và mọi mốc 'dy' của cặp số↔chữ lệch theo chiều cao từng mục. */ #content .t4fx-vct-muc > .col.t4fx-vct-muc-so > .col-inner, #content .t4fx-vct-moc > .col.t4fx-vct-moc-so > .col-inner { display: flex; flex-direction: column; justify-content: center; height: 100%; } #content .t4fx-vct-gt .t4fx-vct-muc-td h3 { color: var(--t4-camel); } @media (max-width: 849px) { #content .t4fx-vct-muc > .col.t4fx-vct-muc-chu, #content .t4fx-vct-moc > .col.t4fx-vct-moc-chu { padding-left: 12px; padding-right: 0; } } /* [figma] trang2 · section hero_mb — 3 lớp rộng 67px: '1093:9596' · '1093:9597' · '1093:9601' (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 2 để chọn) */ /* --- 16.6 Khổ 402: GỠ bốn luật '+ .col' của desktop ----------------------- [phục vụ] phần tử: Col | khối: 'founder' · 'khacbiet' · 'dna' · hero [trang] ve-chung-toi | [figma] các màn '_mb' [lý do vượt panel] khe giữa các ô theo khổ màn không có ô trong panel ⛔ Bốn luật khe của desktop viết bằng bộ chọn ANH EM KỀ ('.col.X + .col.X { margin-left: N }') có độ cụ thể (1,4,0), CAO HƠN luật khổ 402 '#content .col.X { margin-left: 0 }' (1,2,0). Nên dù nằm trong '@media', luật 402 vẫn THUA và khe desktop tiếp tục chạy — đo được: founder ô 168 + khe 24 + 168 = 360 > 352 ⇒ VỠ HÀNG, xếp dọc 4 ô dna ô 168 + khe 20 + 168 = 356 > 352 ⇒ VỠ HÀNG khacbiet thẻ x = 25 · 33 · 33 · 33 (đáng lẽ 25 cả bốn) Bài học chung: **gỡ luật khe theo ĐÚNG bộ chọn đã đặt nó**, đừng gỡ bằng một bộ chọn ngắn hơn. Cùng họ với bẫy "luật 'nth-child' của lưới desktop chạy cả ở khổ điện thoại" (bàn giao 21c §B-3). */ @media (max-width: 849px) { /* founder · dna: lưới 2 cột 168, khe NGANG 16 · khe DỌC 16 */ #content .col.t4fx-vct-so-o + .col.t4fx-vct-so-o, #content .col.t4fx-vct-dna-o + .col.t4fx-vct-dna-o { margin-left: 0; } #content .col.t4fx-vct-so-o:nth-child(2n), #content .col.t4fx-vct-dna-o:nth-child(2n) { margin-left: 16px; } /* Lòng ô 151 (Figma) = 168 − viền 1 − đệm 16; desktop là 215 = 252−19−1 */ #content .col.t4fx-vct-so-o, #content .col.t4fx-vct-dna-o { padding-left: 16px; } /* khacbiet: bốn thẻ xếp DỌC, cùng mép trái, khe 16 */ #content .col.t4fx-vct-kb-the + .col.t4fx-vct-kb-the { margin-left: 0; } /* hero: hai nút NẰM NGANG 224 | 7 | 121 — Flatsome cho [button] là block ở khổ nhỏ nên phải trả lại 'inline-flex' và ghim hàng không xuống dòng */ #content .t4fx-vct-hero .section-content > .row > .col > .col-inner { display: flex; flex-direction: column; align-items: center; } #content .t4fx-vct-nut-cam, #content .t4fx-vct-nut-trang { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; vertical-align: top; } /* Biểu tượng hero 67×65 — '[ux_image width]' của panel tính theo % cột nên ra 235,8; ghim bằng px. */ #content .t4fx-vct-hero-logo img { width: 67px; height: 65px; max-width: 67px; } #content .t4fx-vct-hero-logo { width: 67px; margin: 0 auto; } } /* --- 16.7 Ba màu riêng của 'tamnhin' + bề rộng đoạn Sứ mệnh --------------- [phục vụ] phần tử: Text | khối: '.t4fx-vct-tn-*' [trang] ve-chung-toi | [figma] tamnhin '803:35848' [lý do vượt panel] panel Text không có ô màu theo vai trò "Sứ mệnh" · "Tầm nhìn" #155446 (không phải màu chữ thân #1f1f1f) "năm tới" #cf9156 (khác con SỐ ngay trên nó, #458763) đoạn Sứ mệnh rộng 480 = khung 528 − đệm 24 hai bên */ #content .t4fx-vct-tn-td h3 { color: var(--t4-dark-moss); } #content .t4fx-vct-tn-ds .t4fx-vct-so-nho p { color: var(--t4-camel); } #content .t4fx-vct-tn-mo p { max-width: 480px; } /* --- 16.8 Hero khổ 402: hai nút NẰM NGANG, chữ trắng, không viết hoa ------ [phục vụ] phần tử: Button · Text | khối: '.t4fx-vct-hero' [trang] ve-chung-toi | [figma] hero_mb '1093:9587' [lý do vượt panel] Flatsome tự viết hoa nhãn nút ('.nav-uppercase') và tự đặt cỡ chữ theo 'size="small"'; panel Button không có ô nào tắt hai thứ đó Figma: hai nút 224 | khe 7 | 121, chữ 14/32 w700 "Khám phá cách 4T đồng hành" chữ TRẮNG trên nền camel "Liên hệ tư vấn" chữ CAMEL trên nền trắng đoạn dẫn: 14/28 trắng — 'dark="true"' của section cho #f1f1f1, phải đè ⚠ '.col-inner' phải là flex-wrap NGANG chứ không phải cột: để 'flex-direction: column' thì hai nút xếp chồng (đo được dy 48,19 thay vì 0). */ @media (max-width: 849px) { #content .t4fx-vct-hero .section-content > .row > .col > .col-inner { display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; } #content .t4fx-vct-hero .col-inner > .text, #content .t4fx-vct-hero .col-inner > .img { flex: 0 0 100%; max-width: 100%; } #content .t4fx-vct-hero .t4fx-vct-hero-mo p { color: var(--t4-white); } #content .t4fx-vct-nut-cam, #content .t4fx-vct-nut-cam span, #content .t4fx-vct-nut-trang, #content .t4fx-vct-nut-trang span { font-family: var(--t4-font-body); font-weight: 700; font-size: 14px; line-height: 32px; text-transform: none; letter-spacing: 0; } #content .t4fx-vct-nut-cam { width: 224px; min-height: 44px; margin: 0; background-color: var(--t4-camel); border-color: var(--t4-camel); color: var(--t4-white); } #content .t4fx-vct-nut-trang { width: 121px; min-height: 44px; margin: 0 0 0 7px; background-color: var(--t4-white); border-color: var(--t4-white); color: var(--t4-camel); } #content .t4fx-vct-nut-trang span { color: var(--t4-camel); } #content .t4fx-vct-nut-cam span { color: var(--t4-white); } } /* --- 16.9 Khe chip nhãn → khối kế tiếp ------------------------------------ [phục vụ] phần tử: Text | khối: '.t4fx-vct-nhan' (mô-típ chung '.t4-label') [trang] ve-chung-toi | [figma] 'Container' chip 61 cao, khối sau ở y=101 [lý do vượt panel] '.t4-label' là mô-típ DÙNG CHUNG; đổi khe của nó ở '30-components.css' là đổi cho cả năm trang khác (III.4.0 luật BIẾN THỂ) Figma: khối chip cao 61, khối nội dung kế tiếp bắt đầu ở y=101 ⇒ khe 40. Đo được trên site: 53,06 trong khi Figma khai 93 (desktop) / 77 (khổ 402) cho mốc '[hộp] chip → tiêu đề'. Bù bằng lề dưới của RIÊNG trang này. */ #content .t4fx-vct-nhan { margin-bottom: 64px; } @media (max-width: 849px) { #content .t4fx-vct-nhan { margin-bottom: 64px; } } /* --- 16.10 Khe trong mỗi mục đánh số -------------------------------------- [phục vụ] phần tử: Text | khối: '.t4fx-vct-muc-*' · '.t4fx-vct-moc-*' [trang] ve-chung-toi | [figma] 'giatri' 'Link → Heading 3' 24 cao, khe 8 [lý do vượt panel] khe giữa hai ô văn bản anh em không có ô trong panel Figma: tiêu đề mục cao 24, đoạn mô tả bắt đầu 32 dưới ĐỈNH tiêu đề ⇒ khe thật = 32 − 24 = 8. Đo được 29 ⇒ thiếu 3. */ #content .t4fx-vct-muc-mo, #content .t4fx-vct-moc-mo { margin-top: 8px; } /* --- 16.11 Giãn chữ ÂM và ba màu còn sót ---------------------------------- [phục vụ] phần tử: Text | khối: các H2 · tiêu đề ô DNA · chip [trang] ve-chung-toi | [figma] quét 'text.ls' toàn trang [lý do vượt panel] panel Text không có ô 'letter-spacing' Quét cả 16 màn thì chỉ SÁU giá trị 'ls' khác 0, và chúng KHÔNG cùng một con số — Figma đặt theo TỪNG lớp, không theo cỡ chữ: chip nhãn (14px) +0,14 mọi màn H2 founder desktop (40) −1,20 H2 dna desktop (40) −1,60 H2 founder 402 (32) −0,96 H2 dna 402 (32) −1,28 H1 hero 402 (26) −0,26 mô tả ô 4 founder_mb (14) −0,14 ⇒ KHÔNG gộp thành một luật 'letter-spacing: -.04em': −1,2/40 = −0,03em còn −1,6/40 = −0,04em. Khai từng lớp theo đúng số Figma. Và tiêu đề bốn ô DNA là **#155446**, không phải màu chữ thân #1f1f1f. */ #content .t4fx-vct-fd-h2 h2 { letter-spacing: -1.2px; } #content .t4fx-vct-dna .t4fx-vct-h2 h2 { letter-spacing: -1.6px; } #content .t4fx-vct-dna-td h3 { color: var(--t4-dark-moss); } #content .t4fx-vct-nhan p { letter-spacing: .14px; } @media (max-width: 849px) { #content .t4fx-vct-fd-h2 h2 { letter-spacing: -0.96px; } #content .t4fx-vct-dna .t4fx-vct-h2 h2 { letter-spacing: -1.28px; } #content .t4fx-vct-hero .t4fx-vct-h1--mb :is(h1, h2) { letter-spacing: -0.26px; } #content .t4fx-vct-fd-so > .col:nth-child(4) .t4fx-vct-so-mo p { letter-spacing: -0.14px; } } /* --- 16.12 Bốn ô số liệu 'founder': lòng 215, không phải 232 -------------- [phục vụ] phần tử: Col | khối: '.t4fx-vct-so-o' [trang] ve-chung-toi | [figma] 'VerticalBorder' 252 chứa 'Container' 215 [lý do vượt panel] bề rộng khối chữ bên trong cột không có ô trong panel Figma: ô 252, khối chữ bên trong **215** bắt đầu ở x=19 — tức nó KHÔNG kéo hết lòng ô (19 + 215 = 234, còn thừa 18 bên phải). Không ghim thì chữ dàn ra 232 và bốn dòng mô tả ngắt dòng khác hẳn Figma (đo được 219/214/228/226 thay vì 154/151/181/172). */ /* ⚠ 'margin-right: auto' là BẮT BUỘC — chính LUẬT 5 §III.14.2-3 mà tôi vừa viết xong đã vi phạm ngay ở đây: 'max-width' một mình làm khối tự căn giữa (Flatsome cho '.col-inner' lề auto), đo được ô đầu tiên lệch +18px. */ #content .col.t4fx-vct-so-o > .col-inner, #content .col.t4fx-vct-dna-o > .col-inner { max-width: 215px; margin-left: 0; margin-right: auto; } @media (max-width: 849px) { /* khổ 402: ô 168, khối chữ 151 */ #content .col.t4fx-vct-so-o > .col-inner, #content .col.t4fx-vct-dna-o > .col-inner { max-width: 151px; margin-left: 0; margin-right: auto; } } /* --- 16.13 Bốn lỗi ĐỘ CỤ THỂ và một lỗi THỨ TỰ ở khổ 402 ------------------ [phục vụ] phần tử: Col · Text | khối: 'founder' · 'dna' · 'giatri' [trang] ve-chung-toi | [figma] các màn '_mb' [lý do vượt panel] khe · đệm · màu · thứ tự cột theo khổ màn (1) ⛔ 'X + X { margin-left: 0 }' (1,4,0) THẮNG 'X:nth-child(2n)' (1,3,0). Luật gỡ khe của mục 16.6 vì thế nuốt luôn khe 16 của lưới 2 cột — đo được bước cột 168 thay vì 184. Phải nâng bộ chọn khe lên cùng dạng. (2) ⛔ Đệm 18px của mục 16.5 khai '!important' (để thắng '.row-collapse'), nên luật đệm 12px của khổ 402 thua — lòng cột ra 250 thay vì 274. Đã '!important' là phải '!important' ở MỌI nhánh đè lại nó. (3) Tiêu đề bốn ô DNA đổi màu theo khổ: desktop '#155446', khổ 402 '#458763'. Cùng một lớp chữ, hai màu — không suy được từ nhau. (4) Khổ 402 đảo THỨ TỰ khối 'dna': minh hoạ LÊN TRƯỚC (Figma H2 ở y=336,5 tức ảnh chiếm 101→336), desktop thì chữ trái ảnh phải. */ @media (max-width: 849px) { #content .col.t4fx-vct-so-o + .col.t4fx-vct-so-o:nth-child(2n), #content .col.t4fx-vct-dna-o + .col.t4fx-vct-dna-o:nth-child(2n) { margin-left: 16px; } #content .t4fx-vct-muc > .col.t4fx-vct-muc-chu, #content .t4fx-vct-moc > .col.t4fx-vct-moc-chu { padding-left: 12px !important; padding-right: 0 !important; } #content .t4fx-vct-dna-td h3 { color: var(--t4-leaf); } #content .t4fx-vct-dna-hang { flex-direction: column; } #content .col.t4fx-vct-dna-anh { order: 1; } #content .col.t4fx-vct-dna-chu { order: 2; } } /* --- 16.14 Khe dọc trong khối 'tamnhin' ----------------------------------- [phục vụ] phần tử: Text · Row | khối: '.t4fx-vct-tn-*' [trang] ve-chung-toi | [figma] tamnhin '803:35848' · tamnhin_mb '1093:10140' [lý do vượt panel] khe giữa các ô văn bản anh em không có ô trong panel Figma desktop, đo trong khung phải 528: Container "Sứ mệnh" cao 80 (icon 48 căn giữa theo chiều dọc) khe 16 Frame 143 (đoạn) cao 104 khe 24 · Horizontal Divider 1 · khe 24 Container "Tầm nhìn" cao 80 khe 16 ba mốc cao 208 · 184 · 208, DÍNH NHAU (khe 0) trong mỗi mốc: số 48/24 rồi "năm tới" cách ĐỈNH số 34 (⇒ khe 10) */ #content .t4fx-vct-tn-td h3 { min-height: 80px; display: flex; align-items: center; } #content .t4fx-vct-tn-mo { margin-top: 16px; } #content .t4fx-vct-so-nho { margin-top: 10px; } #content .t4fx-vct-tn-td.t4fx-vct-tn-td2 { margin-top: 48px; } /* ⛔ ':nth-of-type' KHÔNG dùng được ở đây: mọi anh em đều là 'div', nên nó đếm cả ba ô văn bản đứng trước và không mốc nào khớp (đo được 'min-height: 0px' — luật im lặng không chạy). Ba mốc đo được 152/128/152 trong khi Figma khai 208/184/208 — hụt ĐÚNG 56 ở cả ba, nên bù bằng một luật đệm chung thay vì ba 'min-height' theo vị trí. */ /* Đường kẻ giữa khối Sứ mệnh và khối Tầm nhìn (Figma 'Horizontal Divider' 528×1, cách hai khối 24 mỗi bên) — vẽ bằng viền trên của nhãn "Tầm nhìn". */ #content .t4fx-vct-tn-td.t4fx-vct-tn-td2 { border-top: 1px solid rgba(0, 0, 0, .11); padding-top: 24px; } /* --- 16.15 ĐỆM CỦA KHUNG 'VerticalBorder' — nguyên nhân gốc của 10/16 mốc chiều cao section ------------------------------------------------------ [phục vụ] phần tử: Col · Row | khối: '.t4fx-vct-so-o' · '.t4fx-vct-dna-o' · '.t4fx-vct-muc-chu' · '.t4fx-vct-moc-chu' · '.t4fx-vct-muc' [trang] ve-chung-toi | [figma] mọi khung tên 'VerticalBorder' [lý do vượt panel] đệm lẻ theo từng cạnh không đặt được ở panel Col 'tools/hinh-hoc.py --sau 6' cho thấy Figma dùng **CÙNG MỘT khuôn** cho mọi ô có kẻ đứng, ở cả ba khối khác nhau: VerticalBorder đệm **32 / 18 / 32 / 18** · viền 1px rgba(0,0,0,.11) founder ô 252×173 ⇒ lòng 215 = 252 − 18 − 18 − 1 dna ô 255×252 ⇒ lòng 218 = 255 − 18 − 18 − 1 giatri ô 418×240 ⇒ lòng 381 = 418 − 18 − 18 − 1 và mỗi MỤC 'giatri' còn có đệm dọc 16 nữa: 16 + 240 + 16 = 272 Chữ bên trong đã khớp Figma từng px (đo được tiêu đề 24×381, mô tả 144×381 đúng như 'Container 381×176') — thứ thiếu CHỈ là đệm của khung bọc. Đó là lý do bảng dày chỉ còn 107 ❌ mà chiều cao section lệch tới −475. ⇒ Bỏ 'max-width' của mục 16.12: đệm 18 hai bên đã cho đúng lòng 215/218, không cần ghim thêm (và ghim thêm thì lại phải khai chiều neo — III.14.2-3). */ #content .col.t4fx-vct-so-o, #content .col.t4fx-vct-dna-o { padding: 32px 18px; border-left: 1px solid rgba(0, 0, 0, .11); } #content .col.t4fx-vct-so-o > .col-inner, #content .col.t4fx-vct-dna-o > .col-inner { max-width: none; } #content .t4fx-vct-muc > .col.t4fx-vct-muc-chu, #content .t4fx-vct-moc > .col.t4fx-vct-moc-chu { padding: 32px 18px !important; } /* ⚠ CHỈ 'giatri' có đệm dọc 16 bọc ngoài mỗi mục (Figma 'Frame 1707479624' 504×272 đệm 16/—/16/—). 'tamnhin' thì KHÔNG — ba mốc của nó dính sát nhau, chiều cao 208/184/208 đã gồm trọn đệm 32 của khung 'VerticalBorder'. Gộp hai khối vào một luật làm 'tamnhin' dôi 32 mỗi mốc. */ #content .t4fx-vct-muc { padding-top: 16px; padding-bottom: 16px; } @media (max-width: 849px) { /* khổ 402 khai đệm KHÁC desktop, và KHÔNG đối xứng — đọc từ 'hinh-hoc.py': founder_mb · dna_mb ô 168 đệm 24/—/24/16 ⇒ lòng 151 giatri_mb mục 287 đệm 16/—/16/12 ⇒ lòng 274 và các mục DÍNH NHAU khe 16, KHÔNG có đệm dọc bọc ngoài như desktop. */ #content .col.t4fx-vct-so-o, #content .col.t4fx-vct-dna-o { padding: 24px 0 24px 16px; } #content .t4fx-vct-muc > .col.t4fx-vct-muc-chu, #content .t4fx-vct-moc > .col.t4fx-vct-moc-chu { padding: 16px 0 16px 12px !important; } #content .t4fx-vct-muc, #content .t4fx-vct-moc { padding-top: 0; padding-bottom: 0; } #content .t4fx-vct-muc + .t4fx-vct-muc, #content .t4fx-vct-moc + .t4fx-vct-moc { margin-top: 16px; } } /* --- 16.16 Khe dọc BÊN TRONG các khối chữ --------------------------------- [phục vụ] phần tử: Text | khối: 'founder' · 'dna' · ô số liệu [trang] ve-chung-toi | [figma] 'hinh-hoc.py --sau 6' [lý do vượt panel] khe giữa hai ô văn bản anh em không có ô trong panel founder H2 → đoạn khe 24 founder đoạn: 'paragraphSpacing' 10 ⇒ mỗi

cách nhau 10 founder ô số liệu: h3(53) → mô tả khe 8 ⇒ lòng 109 dna ô: số(36) → tiêu đề(48) → mô tả(48), khe 16 ⇒ lòng 164 ⚠ 'paragraphSpacing' là trường RIÊNG của lớp chữ Figma, KHÔNG phải 'lineHeight'. Đoạn thư ngỏ có 5 khổ ⇒ 4 × 10 = 40px mà bảng dày không thấy (nó chỉ so hộp chữ tổng), chỉ chiều cao section mới lộ ra. ⚠ Số '01.' của 'dna' cao **36**, không phải 24 như giãn dòng khai — Figma để khung 'Link → Heading 3' cao hơn dòng chữ. */ #content .t4fx-vct-fd-mo { margin-top: 24px; } #content .t4fx-vct-fd-mo p + p { margin-top: 10px; } #content .t4fx-vct-so-mo { margin-top: 8px; } #content .t4fx-vct-dna-so p { min-height: 36px; } #content .t4fx-vct-dna-so, #content .t4fx-vct-dna-td { margin-bottom: 16px; } /* --- 16.17 Khổ 402 khai số KHÁC desktop cho cùng những khe đó ------------- [phục vụ] phần tử: Text | khối: ô số liệu 'founder' · ô 'dna' [trang] ve-chung-toi | [figma] 'founder_mb' · 'dna_mb' [lý do vượt panel] như 16.16 founder_mb ô 168×159 · lòng 151×111 = h3(55) + khe 8 + mô tả(48) đoạn thư ngỏ 'paragraphSpacing' **14** (desktop là 10) dna_mb ô 168×176 · lòng 151×128 = td(48) + khe 8 + mô tả(72) ⇒ KHÔNG có ô số ở khổ 402, và khe là **8** chứ không phải 16 Đây đúng cảnh báo III.14.2-6: mỗi khổ là một hệ hình học riêng. Bốn con số (10↔14 · 16↔8 · số hiện↔ẩn) không suy được từ bản desktop. */ @media (max-width: 849px) { #content .t4fx-vct-fd-mo p + p { margin-top: 14px; } #content .t4fx-vct-dna-so, #content .t4fx-vct-dna-td { margin-bottom: 8px; } } /* --- 16.18 Hai minh hoạ phải GIỮ TỈ LỆ ở khổ 402 -------------------------- [phục vụ] phần tử: Image | khối: '.t4fx-vct-fd-hinh' · '.t4fx-vct-dna-hinh' [trang] ve-chung-toi | [figma] 'Asset 2 1' 506×463 · 'Asset 1 13' 506×293 [lý do vượt panel] panel Image không có ô tỉ lệ khung hình Ở khổ 402 site vẽ cả hai minh hoạ thành HÌNH VUÔNG 352×352, trong khi Figma giữ nguyên tỉ lệ: 352 × 203,53 cho 'dna_mb' (đúng 293/506 × 352 = 203,8) và 352 × ~322 cho 'founder_mb'. Chênh 148 và 68 — đủ để một mình nó làm 'dna_mb' lệch +202 ở phép so chiều cao section, trong khi bảng dày không thấy gì vì lớp ẢNH không phải lớp chữ (điểm mù II.K-3). */ #content .t4fx-vct-fd-hinh img, #content .t4fx-vct-dna-hinh img { height: auto; width: 100%; } #content .t4fx-vct-fd-hinh .img-inner, #content .t4fx-vct-dna-hinh .img-inner { padding-top: 0 !important; height: auto; } /* --- 16.19 'founder' khổ 402 xếp H2 → MINH HOẠ → đoạn, ảnh 219×200 -------- [phục vụ] phần tử: Image | khối: '.t4fx-vct-fd-hinh-mb' [trang] ve-chung-toi | [figma] founder_mb 'Frame 163' khe 24 [lý do vượt panel] panel Visibility ẩn được cả CỘT, không chèn được ảnh vào GIỮA hai ô văn bản của cột khác Figma khổ 402 xếp DỌC trong một cột: H2 (172) · khe 24 · **minh hoạ 219×200 CĂN GIỮA** · khe 24 · đoạn (444) = 864. Desktop thì minh hoạ nằm ở CỘT TRÁI 506 và chữ ở cột phải 528 — hai bố cục khác hẳn nhau. ⇒ Dùng thêm MỘT '[ux_image]' chỉ hiện ở khổ 402, đặt đúng vị trí giữa H2 và đoạn; cột minh hoạ desktop thì ẩn đi. Cùng lối 't4-only-*' mà trang này đã dùng cho năm khối có chữ khác nhau giữa hai khổ. */ @media (max-width: 849px) { #content .col.t4fx-vct-fd-anh { display: none; } #content .t4fx-vct-fd-hinh-mb { width: 219px; margin: 24px auto; } #content .t4fx-vct-fd-hinh-mb img { width: 219px; height: auto; } #content .t4fx-vct-fd-mo { margin-top: 24px; } } /* --- 16.20 Khung phải của 'tamnhin' có đệm đáy 60 ------------------------- [phục vụ] phần tử: Col | khối: '.t4fx-vct-tn-ds' [trang] ve-chung-toi | [figma] 'Background+Border' 528×1005 đệm —/—/60/— [lý do vượt panel] đệm một cạnh của cột không có ô trong panel Frame 150 (945) = Sứ mệnh(200) + 24 + kẻ(1) + 24 + Tầm nhìn(696) Background+Border = 945 + **60 đệm đáy** = 1005 ⇒ khe quanh đường kẻ là **24**, không phải 48 như bản trước đặt. */ #content .t4fx-vct-tn-td.t4fx-vct-tn-td2 { margin-top: 24px; } @media (min-width: 850px) { #content .col.t4fx-vct-tn-ds > .col-inner { padding-bottom: 60px; } } /* --- 16.21 Hai khe cuối của khổ 402 --------------------------------------- [phục vụ] phần tử: Row · Col | khối: 'dna_mb' · 'giatri_mb' [trang] ve-chung-toi | [figma] 'dna_mb Frame 163' khe 32 · 'giatri_mb Frame 161' 616 [lý do vượt panel] khe giữa hai khối anh em không có ô trong panel dna_mb minh hoạ(203,53) · khe **32** · khối chữ(266) = 501,53 giatri_mb Frame 161 cao 616 = 5 mục (88·112·112·112·112) + 4 khe 16 + **16 đệm** bọc ngoài */ @media (max-width: 849px) { #content .col.t4fx-vct-dna-chu { margin-top: 32px; } #content .col.t4fx-vct-gt-ds > .col-inner { padding-top: 8px; padding-bottom: 8px; } /* khe khối trái → danh sách mục: Figma 518 − 494 = **24** */ #content .col.t4fx-vct-gt-ds { margin-top: 24px; } } /* --- 16.22 Khe H2 → đoạn dẫn ở khổ 402 — mỗi khối một số ----------------- [phục vụ] phần tử: Text | khối: '.t4fx-vct-dan' [trang] ve-chung-toi | [figma] 'giatri_mb Heading 2' khe 24 · 'dna_mb Frame 1707479634' khe 16 [lý do vượt panel] khe giữa hai ô văn bản anh em không có ô trong panel giatri_mb H2(129) · khe **24** · đoạn(240) = 393 dna_mb H2(170,6) · khe **16** · đoạn(78) = 266 Site đang để khe ~1 (chỉ còn lề mặc định) ⇒ hai section hụt 49 và 17. */ @media (max-width: 849px) { #content .t4fx-vct-gt .t4fx-vct-dan { margin-top: 24px; } #content .t4fx-vct-dna .t4fx-vct-dan { margin-top: 16px; } } /* --- 16.23 Nút CTA · breadcrumb · vị trí chữ hero ------------------------- [phục vụ] phần tử: Button · breadcrumb child theme · Section [trang] ve-chung-toi | [figma] cta 'Link' 206×46 · crumb '1012:14051' [lý do vượt panel] màu nút của Flatsome lấy từ Customizer (#446084), không có ô riêng cho trang; breadcrumb do child theme in ra, không có phần tử nút CTA nền **#458763** bo 5 · chữ TRẮNG 16/21,856 w700 đặt ở x=1252,98 trong thẻ 420→1499 ⇒ **DÁN PHẢI** khe đoạn mô tả → nút = 105 (khổ 402: 183) crumb chữ cuối #1f1f1f · khổ 402 13,8–13,9/22, mũi tên rộng 32 hero H1 ở y=**390** trong dải 800 (khổ 402: y=180 sau biểu tượng) */ #content .t4fx-vct-cta-nut { background-color: var(--t4-leaf) !important; /* Customizer cho #446084 */ border-color: var(--t4-leaf); color: var(--t4-white); margin-left: auto; display: flex; align-items: center; justify-content: center; } #content .t4fx-vct-cta-nut span { color: var(--t4-white); } #content .t4fx-vct-cta-the > .col-inner { display: flex; flex-direction: column; } #content .t4fx-vct-cta-nut { margin-top: 41px; } .t4.t4-trang-ve-chung-toi .t4fx-crumb ol li:last-child, .t4.t4-trang-ve-chung-toi .t4fx-crumb ol li:last-child * { color: var(--t4-text); } #content .t4fx-vct-hero .t4fx-vct-h1 { padding-top: 50px; } @media (max-width: 849px) { /* Breadcrumb khổ 402 — cùng số với trang #24/#25 (xem 14.3 / 15.3) */ .t4.t4-trang-ve-chung-toi .t4fx-crumb ol { font-size: 13.9px; } .t4.t4-trang-ve-chung-toi .t4fx-crumb li + li::before { width: 32px; } .t4.t4-trang-ve-chung-toi nav.t4fx-crumb ol li:last-child, .t4.t4-trang-ve-chung-toi nav.t4fx-crumb ol li:last-child * { line-height: 22px; } /* Đoạn dẫn hero: 14/28 TRẮNG — 'dark="true"' của section cho #f1f1f1 và '10-base' cho 16/26, nên phải khai cả ba thuộc tính ở một chỗ đủ cụ thể. */ #content .t4fx-vct-hero .t4fx-vct-hero-mo p { font-size: 14px; line-height: 28px; color: var(--t4-white); } #content .t4fx-vct-hero .t4fx-vct-h1 { padding-top: 0; } #content .t4fx-vct-hero-logo { margin-top: 83px; } #content .t4fx-vct-hero .t4fx-vct-h1--mb { margin-top: 32px; } } /* --- 16.24 Bề rộng ngắt dòng nhãn · chữ nhấn 20px · lưới 2×2 khổ 402 ----- [phục vụ] phần tử: Text · Row/Col [trang] ve-chung-toi | [figma] founder '803:35851' · '1093:9623' [lý do vượt panel] panel không có ô 'bề rộng ngắt dòng' cho từng nhãn, và không đặt được cỡ chữ cho một ĐOẠN CHỮ NHẤN nằm trong khối chữ nhãn ô số liệu lòng ô 215 nhưng KHUNG CHỮ Figma chỉ **154 · 151 · 181 · 172** — designer đặt tay, nên điểm ngắt dòng phải ép bằng 'max-width', không suy ra được từ lòng ô đoạn dài 'styleOverrideTable' khai run 27=16px, run **28·29·30·31 = 20px** (Regular/SemiBold/Bold) ⇒ chữ nhấn to hơn nền, làm đoạn xuống 588 chứ không phải 561 khổ 402 4 ô thành **2×2**: 168 rộng · khe 16 ngang · 16 dọc · đệm 24/0/24/16 (KHÔNG có đệm phải) */ #content .t4fx-vct-so-o:nth-child(1) .t4fx-vct-so-mo p { max-width: 154px; } #content .t4fx-vct-so-o:nth-child(2) .t4fx-vct-so-mo p { max-width: 151px; } #content .t4fx-vct-so-o:nth-child(3) .t4fx-vct-so-mo p { max-width: 181px; } #content .t4fx-vct-so-o:nth-child(4) .t4fx-vct-so-mo p { max-width: 172px; } @media (max-width: 849px) { #content .t4fx-vct-fd-so { flex-wrap: wrap; } #content .col.t4fx-vct-so-o { flex: 0 0 168px; max-width: 168px; padding: 24px 0 24px 16px; } #content .col.t4fx-vct-so-o + .col.t4fx-vct-so-o { margin-left: 0; } #content .col.t4fx-vct-so-o:nth-child(2n) { margin-left: 16px; } #content .col.t4fx-vct-so-o:nth-child(n + 3) { margin-top: 16px; } #content .t4fx-vct-so-o .t4fx-vct-so-mo p { max-width: none; } } /* --- 16.25 TẦM NHÌN — mô hình DỌC + NGANG dựng lại từ TOẠ ĐỘ (LUẬT 5) ----- [phục vụ] phần tử: Row/Col · Text [trang] ve-chung-toi | [figma] '803:35848' thẻ phải 'Background+Border' 528 [lý do vượt panel] panel không đặt được đệm khác nhau cho từng cột trong một hàng, cũng không căn giữa hai trục nội dung một cột ⚠ Ba vòng I.6 trước dò bằng cách CHỈNH TỪNG SỐ. Khối này thay bằng đọc nguyên mô hình từ 'figma-cache', nên là hướng KHÁC chứ không phải vòng 4. thẻ phải 528 rộng · đệm dưới 60 · KHÔNG đệm trên tiêu đề đệm 32/24/0/24 · biểu tượng 48 + khe 16 + h3 (cao 48, giữa) đoạn y=197 = đáy tiêu đề (181) + 16 · đệm ngang 24 · rộng 480 kẻ ngang y=325 = đáy đoạn (301) + 24 · 1px #458763 Tầm nhìn y=350 = kẻ + 24 rồi đệm 32 của khối tiêu đề mốc hàng đệm 16/24 · KHÔNG khe giữa các hàng (446→654→838) cột số 70 rộng · nội dung căn GIỮA cả hai trục · khe 10 cột chữ 394 · viền trái 1px #000 11 % · đệm 16/18 ⇒ chữ ở x = 24+70+16+1+18 = 129 · «năm tới» ở x = 29,5 (giữa của 70), nên dx = 99,5 — mốc 'khoang·dx' đo đúng chỗ */ #content .t4fx-vct-tn-td { padding: 32px 24px 0; } #content .t4fx-vct-tn-td h3 { min-height: 48px; padding-left: 64px; margin: 0; display: flex; align-items: center; /* Figma 22/30,052. Không khai thì '.t4-h3' cho 21,856 — hộp vẫn nằm đúng chỗ nhưng NÉT CHỮ trong hộp cao lên 4,1px, và bảng dày đo nét chữ. */ line-height: 30.052px; } #content .t4fx-vct-tn-mo { margin-top: 16px; padding: 0 24px; } /* Đệm trên 56 = 24 (khe sau kẻ) + 32 (đệm khối tiêu đề). Thực đo cần **60**: thước đo neo mốc vào thẻ '

' (mép trên 382) còn Figma neo vào LỚP CHỮ 'Tầm nhìn' (391) — hai đầu lệch nghĩa 9px, và 4px là phần chưa bù được sau khi trừ nửa khoảng cách dòng. Đã thử hạ khe H2 (19 · 22 · 24), đổi line-height, và thu hộp h3 về 30 + lề 9 — cả ba đều KHÔNG chạm tới chỗ này hoặc làm lệch thêm bốn mốc khác. Bù ở đây là chỗ duy nhất không kéo theo mốc nào: khối mốc bên dưới đo bằng 'dy(tâm)' nên trôi cùng thì không đổi. */ #content .t4fx-vct-tn-td.t4fx-vct-tn-td2 { margin-top: 24px; padding-top: 60px; position: relative; } #content .t4fx-vct-tn-td.t4fx-vct-tn-td2::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: repeating-linear-gradient(to right, var(--t4-leaf) 0 3px, transparent 3px 5px); } #content .t4fx-vct-moc { flex-wrap: nowrap; padding: 16px 24px; } #content .t4fx-vct-moc + .t4fx-vct-moc { margin-top: 0; } #content .t4fx-vct-moc > .col.t4fx-vct-moc-so { flex: 0 0 70px; max-width: 70px; padding: 0 !important; display: flex; } #content .t4fx-vct-moc > .col.t4fx-vct-moc-so > .col-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; text-align: center; } #content .t4fx-vct-moc-so .t4fx-vct-so-nho { margin-top: 10px; } #content .t4fx-vct-moc > .col.t4fx-vct-moc-chu { flex: 0 0 394px; max-width: 394px; margin-left: 16px; padding: 16px 18px !important; border-left: 1px solid rgba(0, 0, 0, .11); } #content .t4fx-vct-moc-chu .t4fx-vct-moc-mo { margin-top: 0; } @media (max-width: 849px) { /* --- 16.26 TẦM NHÌN khổ 402 — mô hình RIÊNG, không phải bản co lại ------ [phục vụ] phần tử: Row/Col · Text | [trang] ve-chung-toi [figma] '1093:10140' | [lý do vượt panel] như 16.25 thẻ 352 · KHÔNG đệm ngang, KHÔNG đệm dưới (desktop có 60) tiêu đề đệm trên 16 · biểu tượng 48 + khe **8** (desktop 16) đoạn khe 8 dưới tiêu đề (desktop 16) mốc hàng đệm **8/0** · cột số **55** · khe **10** (desktop 16) cột chữ **287** · viền trái 1px · đệm 16/0/16/**12** cỡ số **40** (desktop 48) · «năm tới» **14** (desktop 16) */ #content .col.t4fx-vct-tn-ds > .col-inner { padding: 0; } #content .t4fx-vct-tn-td { padding: 16px 0 0; } #content .t4fx-vct-tn-td h3 { padding-left: 56px; } #content .t4fx-vct-tn-mo { margin-top: 8px; padding: 0; } #content .t4fx-vct-tn-mo p { max-width: none; } #content .t4fx-vct-tn-td.t4fx-vct-tn-td2 { margin-top: 24px; padding-top: 42px; } #content .t4fx-vct-moc { padding: 8px 0; } #content .t4fx-vct-moc > .col.t4fx-vct-moc-so { flex: 0 0 55px; max-width: 55px; } #content .t4fx-vct-moc > .col.t4fx-vct-moc-chu { flex: 0 0 287px; max-width: 287px; margin-left: 10px; padding: 16px 0 16px 12px !important; } #content .t4fx-vct-moc-so .t4fx-vct-so p { font-size: 40px; } #content .t4fx-vct-moc-so .t4fx-vct-so-nho p { font-size: 14px; } } /* --- 16.27 Kiểu chữ phải khai TRÊN VỎ '.text', không chỉ trên '

' ------- [phục vụ] phần tử: Text | khối: '.t4fx-vct-hero-mo' [trang] ve-chung-toi | [figma] '1093:9587' [lý do vượt panel] panel Text đặt cỡ chữ vào '

' bên trong, còn thước đo đọc chính thẻ '.text' bọc ngoài — hai chỗ khác nhau Dò tận nơi: '

' ĐÃ đúng 14/28 trắng, nhưng vỏ '.text' vẫn 16/26 #f1f1f1 (Flatsome 'dark="true"'). Bảng dày lấy số ở VỎ ⇒ ba mốc size/lh/màu lệch dù mắt nhìn không sai. Khai cả hai chỗ mới hết. */ #content .t4fx-vct-tn-ds > .col-inner { padding-left: 0; } #content .t4fx-vct-hero .t4fx-vct-h1 { padding-top: 101px; } @media (max-width: 849px) { #content .t4fx-vct-hero .t4fx-vct-hero-mo { font-size: 14px; line-height: 28px; color: var(--t4-white); } /* giatri khổ 402 — số căn GIỮA trong cột 55, cố ý thò trái (01. rộng 57, 02. rộng 64 ⇒ x = −1 và −4,5 đúng như Figma vẽ) */ #content .t4fx-vct-muc > .col.t4fx-vct-muc-so > .col-inner { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; } #content .t4fx-vct-muc > .col.t4fx-vct-muc-so .t4fx-vct-muc-stt p { white-space: nowrap; } } /* --- 16.28 Khe H2→đoạn ở DESKTOP · dải phân cách trong thẻ · đoạn 20px ---- [phục vụ] phần tử: Text · Col | [trang] ve-chung-toi [figma] '803:35847' '803:35848' '803:35849' '803:35850' '803:35851' [lý do vượt panel] panel Text không có ô khe dưới; '::before/::after' là cách duy nhất dựng biểu tượng + dải kẻ mà không thêm phần tử (giữ T0 100 %) Ba lỗi cùng lộ ra khi DÒ HỘP THẬT trên trang (không đọc mã đoán): 1. Khe H2 → đoạn ở desktop đang là **0**. Figma: founder · giatri · tamnhin = **24** · dna = **16** (H2 cao 159 ở y=108, đoạn ở y=283). Khối 16.22 trước đó chỉ đặt cho khổ 402. 2. Dải kẻ 214×1 của thẻ 'khacbiet' đặt ở '.col-inner::after' nên rơi xuống **cuối thẻ**, không nằm giữa biểu tượng và tiêu đề ⇒ tiêu đề cao hơn Figma đúng 33px (8+1+24). Nay đặt '::before' của chính khối tiêu đề. Và khe tiêu đề → mô tả trong thẻ là **24**, đang là 0. 3. Đoạn dài founder: 'characterStyleOverrides' cho thấy **CẢ ĐOẠN ĐẦU** ('Từ định vị là một đội ngũ… có chiến lược.', 131 ký tự) là **20px**, không phải vài chữ nhấn rải rác — nên phải đặt cho 'p' đầu tiên. */ #content .col.t4fx-vct-tn-ds > .col-inner { padding-left: 0; } #content .t4fx-vct-fd .t4fx-vct-dan, #content .t4fx-vct-gt .t4fx-vct-dan, #content .t4fx-vct-tn .t4fx-vct-dan { margin-top: 24px; } #content .t4fx-vct-dna .t4fx-vct-dan { margin-top: 16px; } #content .t4fx-vct-fd-mo p:first-child { font-size: 20px; } #content .t4fx-vct-the-td::before { content: ""; display: block; height: 1px; margin: 8px 0 24px; background: repeating-linear-gradient(to right, rgba(0, 0, 0, .11) 0 3px, transparent 3px 5px); } #content .t4fx-vct-the-mo { margin-top: 24px; } @media (max-width: 849px) { #content .t4fx-vct-fd-mo p:first-child { font-size: inherit; } #content .t4fx-vct-hero .t4fx-vct-h1 { padding-top: 0; } } /* --- 16.29 Ba khe còn sót: khối mốc · cột chữ dna · khe H2 tamnhin -------- [phục vụ] phần tử: Row · Col · Text | [trang] ve-chung-toi [figma] '803:35847' '803:35848' · '1093:10140' '1093:10190' [lý do vượt panel] panel không có ô khe trên cho một Row bên trong Col 1. 'Frame 1707479631' có **khe 16** giữa khối tiêu đề «Tầm nhìn» và khối ba mốc (khổ 402: **8**) — trước đó khối mốc dán sát tiêu đề. 2. Hàng 'dna' cao 293 nhưng cột chữ chỉ cao 279 ⇒ Figma CĂN GIỮA cột chữ theo chiều dọc, nên chữ bắt đầu ở y=108 chứ không phải 101. 3. H2 tamnhin: Figma khai cao 212, trình duyệt dựng 4 dòng × 53,32 = **213,28**. Khe 24 vì thế đẩy đoạn xuống ~5px so với bản vẽ; hạ khe xuống 19 để GIỮ ĐÚNG VỊ TRÍ TUYỆT ĐỐI của đoạn (y=337), là thứ mọi mốc phía dưới đo theo. */ #content .t4fx-vct-tn-td.t4fx-vct-tn-td2 + .t4fx-vct-moc { margin-top: 16px; } #content .t4fx-vct-dna-hang { align-items: center; } #content .t4fx-vct-tn .t4fx-vct-dan { margin-top: 24px; } /* Figma khai H2 tamnhin cao 212; trình duyệt dựng 4 dòng × 53,32 = 213,28. Ép vỏ về đúng 212 để khe 24 đặt đoạn vào đúng y=337 như bản vẽ — thay vì bù trừ bằng khe lẻ, thứ làm hai mốc kéo ngược nhau (đã thử 19 và 22). */ #content .t4fx-vct-tn .t4fx-vct-h2 { height: 212px; } @media (max-width: 849px) { #content .t4fx-vct-tn-td.t4fx-vct-tn-td2 + .t4fx-vct-moc { margin-top: 8px; } #content .t4fx-vct-dna-hang { align-items: stretch; } } @media (max-width: 849px) { /* --- 16.30 Bảy khe/kích thước riêng của khổ 402 ------------------------ [phục vụ] phần tử: Text · Col · Button | [trang] ve-chung-toi [figma] '1093:10032' '1093:10140' '1093:9623' '1093:10434' [lý do vượt panel] panel không có ô khe trên/khe dưới cho từng khối Số đo lấy bằng cách DÒ HỘP THẬT ở khổ 402, không đọc mã đoán: · khe H2 → đoạn của tamnhin khổ 402 là **24** (desktop 19 — xem 16.29-3), và giữa cột chữ với thẻ phải cũng **24** (đang là 0) · 'khacbiet' khổ 402 là section DUY NHẤT có khe nhãn → H2 = **24** ('Container' ở y=85 = 61 + 24), sáu section kia đều 40 · thẻ 'khacbiet' khổ 402: biểu tượng **38** (desktop 48) · dải kẻ cách dưới **16** (desktop 24) ⇒ tiêu đề rơi đúng y=351 · ô số liệu: khung Figma cao **55** cho hai dòng chữ 36px ⇒ line-height 27,5. Và 'Học viên' ở 36px rộng hơn lòng ô 151 nên xuống dòng thành BA dòng — 'white-space: nowrap' giữ đúng hai dòng do '
' chia · thẻ CTA cách mép section **80** (đang 100); chữ trong nút phải cao 19,124 thì mới nằm giữa nút cao 43 (đang cao 38, lệch xuống 10) */ #content .t4fx-vct-tn .t4fx-vct-h2 { height: auto; } #content .col.t4fx-vct-tn-ds { margin-top: 28px; } #content .t4fx-vct-kb-luoi { margin-top: 24px; } #content .t4fx-vct-kb .t4fx-vct-h2 { margin-top: -16px; } #content .col.t4fx-vct-kb-the > .col-inner::before { width: 38px; height: 38px; } #content .t4fx-vct-the-td::before { margin: 8px 0 16px; } #content .t4fx-vct-so-lon h3 { white-space: nowrap; } #content .t4fx-vct-so-lon { padding-bottom: 7px; } #content .t4fx-vct-cta-the { margin-top: -41px; } /* Nhãn nút dựng thành HAI dòng dù chữ chỉ rộng 108 trong lòng 110 — 'nowrap' ép về một dòng, đúng như Figma (khung chữ cao 19). */ #content .t4fx-vct-cta-nut > span { display: block; line-height: 19.124px; white-space: nowrap; } #content .col.t4fx-vct-kb-mo { margin-top: 26px; } } /* --- 16.32 Lớp phủ CTA là MULTIPLY, không phải phủ đục --------------------- [phục vụ] phần tử: Section | khối: '.t4fx-vct-cta' [trang] ve-chung-toi | [figma] '803:35834' → 'Section paints' [lý do vượt panel] ô Overlay của panel chỉ nhận màu, không có ô chế độ hoà trộn — mà Figma khai 'nền #747474 **MULTIPLY**' chồng lên ảnh nền Không có dòng này thì 'rgba(116,116,116,1)' phủ ĐỤC, ảnh nền biến mất: ảnh nhiệt đo được ΔE **48,02** (Figma #030303 ↔ site #747474) và 36,56 % điểm ảnh lệch nặng. Cùng mô-típ đã dùng cho hero trang #25 (43-…:695). */ #content .t4fx-vct-cta .section-bg-overlay { mix-blend-mode: multiply; } /* --- 16.33 Bốn thứ chỉ MẮT thấy, bảng số mù (chặng 3b) -------------------- [phục vụ] phần tử: Text | khối: '.t4fx-vct-fd-h' · '.t4fx-vct-fd-mo' · '.t4fx-vct-gt-mo' · '.t4fx-vct-moc-mo' · '.t4fx-vct-so-lon' [trang] ve-chung-toi | [figma] '803:35851' '803:35849' '803:35848' [lý do vượt panel] panel không đặt được màu cho MỘT ĐOẠN trong tiêu đề, không có ô căn đều hai biên, và không đặt cỡ/đậm cho đoạn văn đầu tiên 1. H2 founder HAI MÀU: 'styleOverrideTable' khoá 1 cho «Từ Performance Execution Team» = **#cf9156**, phần còn lại dùng fill gốc **#155446**. Site đang một màu — bảng dày không thấy vì nó chỉ đọc MỘT màu cho cả lớp chữ. 2. Chín lớp chữ khai 'textAlignHorizontal: JUSTIFIED' (founder 1 · giatri 5 · tamnhin 3). 'can_ngang' nằm ngoài mọi phép so của bảng dày. 3. Đoạn văn ĐẦU của founder là 20px **Bold** (run 30 = Manrope-Bold), phần còn lại 16px Regular — trước mới đặt cỡ, chưa đặt độ đậm. 4. '8+' / 'Năm' DÍNH VÀO NHAU: 36px chữ trong dòng cao 24px thì chồng nét. Figma khai 'lineHeightPx 24' nhưng KHUNG của chính nó cao **53** cho hai dòng ⇒ 26,5/dòng. Lấy 26,5 để chữ đọc được; mốc 'lh' vì thế lệch +2,5, đã nộp miễn trừ kèm phép tính. */ #content .t4fx-vct-fd-h2 h2 .accent { color: var(--t4-camel); } #content .t4fx-vct-fd-mo p, #content .t4fx-vct-muc-mo p, #content .t4fx-vct-moc-mo p { text-align: justify; } #content .t4fx-vct-fd-mo p:first-child { font-size: 20px; font-weight: 700; } #content .t4fx-vct-so-lon h3 { line-height: 26.5px; } @media (max-width: 849px) { #content .t4fx-vct-fd-mo p:first-child { font-size: inherit; font-weight: inherit; } #content .t4fx-vct-so-lon { padding-bottom: 2px; } } /* --- 16.34 Bốn chỗ chữ HAI MÀU nữa (rà cả 14 màn, không chỉ founder) ----- [phục vụ] phần tử: Text | [trang] ve-chung-toi [figma] '803:35849' '803:35847' '1093:10081' '1093:9587' [lý do vượt panel] panel đặt MỘT màu cho cả lớp chữ Quét 'styleOverrideTable' toàn trang (không soi từng màn bằng mắt) tìm mọi lớp chữ có run màu khác fill gốc: giatri · dna · giatri_mb DẤU CHẤM của '01.'…'05.' là **#cf9156**, chữ số là #458763 — chi tiết 2px mà mắt thấy ngay khi đặt cạnh bản vẽ dna H2 nửa sau «cách chúng tôi tư duy và đồng hành» **#cf9156** hero_mb H1 «Nâng tầm giá trị thương hiệu» **#cf9156**, phần còn lại trắng */ #content .t4fx-vct-so .accent, #content .t4fx-vct-dna-so .accent, #content .t4fx-vct-dna .t4fx-vct-h2 h2 .accent, #content .t4fx-vct-hero .t4fx-vct-h1--mb :is(h1, h2) .accent { color: var(--t4-camel); } /* --- 16.35 Mọi đường kẻ ngang của Figma là NÉT ĐỨT [3,2] ------------------ [phục vụ] phần tử: (không có — dựng bằng '::before') | [trang] ve-chung-toi [figma] 'Horizontal Divider' · 'Separator' ở cả 6 section [lý do vượt panel] không có phần tử Flatsome nào vẽ đường kẻ nét đứt Quét 'strokeDashes' toàn trang: **mọi** 'Horizontal Divider' và 'Separator' khai '[3, 2]' — nét 3px, cách 2px. 'VerticalBorder' thì 'None' (nét liền), nên hai loại KHÔNG được dùng chung một kiểu. 'border-style: dashed' của CSS không đặt được nhịp 3/2 (trình duyệt tự chọn), nên dùng 'repeating-linear-gradient' — nhịp đúng bằng bản vẽ. */ #content .t4fx-vct-tn-td.t4fx-vct-tn-td2::before { z-index: 1; } @media (max-width: 849px) { /* --- 16.36 Khung cắt ảnh nền CTA ở khổ 402 ----------------------------- [phục vụ] phần tử: Section | khối: '.t4fx-vct-cta' [trang] ve-chung-toi | [figma] '1093:10434' → 'Section paints' [lý do vượt panel] panel không có ô vị trí ảnh nền Figma: ảnh cao **750** trong section cao **624**, neo ở **y = 0,4** ⇒ cắt mất 126px ở ĐÁY, không cắt trên. 'cover' mặc định của Flatsome neo GIỮA nên cắt đều 63px trên và dưới — ảnh nhiệt chặng 3b thấy rõ nền lệch hẳn. Khổ desktop KHÔNG cần: ở đó ảnh đúng 1920×530, vừa khít. */ #content .t4fx-vct-cta .section-bg { background-position: center top; } /* Flatsome dựng ảnh nền bằng thẻ '' + 'object-fit', KHÔNG phải 'background-image' — nên phải đặt 'object-position', đặt 'background-position' thì luật chạy mà không có tác dụng gì. */ #content .t4fx-vct-cta .section-bg img.bg { object-position: center top; } } /* --- 16.37 Ngắt dòng CỨNG chỉ có ở khổ 402 -------------------------------- [phục vụ] phần tử: Text | khối: '.t4fx-vct-cta-h2' [trang] ve-chung-toi | [figma] '1093:10434' ↔ '803:35834' [lý do vượt panel] panel không có ô 'ngắt dòng theo thiết bị' Cùng một câu, HAI cách ngắt dòng: bản 1900 là ''Bắt đầu từ một cuộc trò chuyện rõ ràng hơn'' (một mạch), bản 402 là ''Bắt đầu từ một cuộc trò chuyện \n rõ ràng hơn'' — có ký tự **xuống dòng cứng**. Ngắt dòng nằm NGOÀI mọi phép so của bảng dày; chỉ ảnh nhiệt thấy. */ #content .t4fx-vct-cta-h2 br.t4-nl-mb { display: none; } @media (max-width: 849px) { #content .t4fx-vct-cta-h2 br.t4-nl-mb { display: inline; } } @media (max-width: 849px) { /* --- 16.38 Khổ 402 CHỈ căn đều ĐÚNG MỘT đoạn --------------------------- [phục vụ] phần tử: Text | [trang] ve-chung-toi [figma] quét 'textAlignHorizontal' cả 8 màn 402 [lý do vượt panel] panel không có ô căn đều hai biên Desktop có 9 lớp chữ JUSTIFIED, nhưng khổ 402 **chỉ có 1** — đoạn dài của 'founder_mb'. Tám màn còn lại đều LEFT. Bê nguyên luật desktop xuống là giãn chữ sai ở 8 đoạn, ảnh nhiệt 'tamnhin_mb' thấy rõ chữ trôi khỏi chỗ. */ #content .t4fx-vct-muc-mo p, #content .t4fx-vct-moc-mo p { text-align: left; } }