/* ========================================================================== 48-nhom-tu-van.css — NHÓM TƯ VẤN CHIẾN LƯỢC (#10 · #11 · #12 · #13) Cửa sổ C. Figma #10 desktop '568:25281' · mobile '1385:16470'; #11–#13 '1012:10865 / 12653 / 13099' (KHÔNG có khung mobile trong Figma — sitemap ghi "dựng responsive từ desktop"). Bản kê phần tử: 'uxb/ban-ke-tu-van-chien-luoc.md'. Hình học chép từ 'tools/hinh-hoc.py' → 'qa/hinh-hoc/trang10-*.txt'. ⛔ PHẠM VI (III.4.0 luật KHÔNG ĐỘNG CHẠM): mọi bộ chọn bọc trong 'body.t4-trang-tu-van-chien-luoc*'. Không khai bộ chọn toàn cục ở đây. ========================================================================== */ /* --- 20.1 KHUNG NỘI DUNG 1080 -------------------------------------------- [phục vụ] phần tử: Row/Columns | khối: mọi section của #10 [trang] tu-van-chien-luoc | [figma] 'Container' 1080 tại x=410 của mọi màn [lý do vượt panel] panel Row chỉ có Width "Full/Normal", không nhận px Số: khối nội dung 1080 · khung 1900 ⇒ lề hai bên 410. */ body.t4-trang-tu-van-chien-luoc .section .section-content > .row { max-width: 1080px; margin-left: auto; margin-right: auto; } /* --- 20.2 TOKEN CHỮ THEO VAI TRÒ ----------------------------------------- [phục vụ] phần tử: Text | khối: toàn trang #10 [trang] tu-van-chien-luoc | [figma] mọi lớp TEXT của 13 màn desktop [lý do vượt panel] panel Text không đặt được line-height, letter-spacing hay độ đậm 800 Bảng vai trò (font · cỡ/giãn dòng · đậm · giãn chữ · màu): H2 section Playfair 40/53,32 w600 #155446 (danhcho · cta) H2 tổng quan Playfair 36/47,99 w600 #155446 H2 Phase Playfair 32/42,66 w600 #155446 câu dẫn Manrope 16/26 w400 #1f1f1f (danhcho: #252930) thẻ · tiêu đề Manrope 16/21,86 w700 #1f1f1f thẻ · mô tả Manrope 14/22 w400 #1f1f1f thẻ · output Manrope 12/16,39 w400 #1f1f1f, cụm 'Output:' w700 thẻ · số Manrope 36/49,18 w700 #d5d5d5 */ body.t4-trang-tu-van-chien-luoc #content .t4tv-h2 { font-family: var(--t4-font-head); font-weight: 600; font-size: 40px; line-height: 53.32px; letter-spacing: 0; color: var(--t4-dark-moss); margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq .t4tv-h2 { font-size: 36px; line-height: 47.99px; } /* ⛔ H2 'tongquan' ngắt dòng KHÁC nhau theo khổ (LUẬT 6 quét ④): desktop 'Tổng quan lộ trình tư vấn' — một dòng khổ 402 'Tổng quan \nlộ trình tư vấn' — ngắt sau "Tổng quan" Dựng bản CÓ '
' (đúng khổ 402) rồi ẩn '
' ở desktop. Trước '
' đã có sẵn MỘT DẤU CÁCH nên ẩn đi vẫn còn khoảng trắng — bẫy "ẩn '
' làm mất luôn dấu cách" (bàn giao 21/08 §3) không dính. Ảnh nhiệt 'tongquan_mb' là thứ duy nhất nhìn ra chỗ này: bảng dày và chiều cao section đều ĐẠT. */ @media (min-width: 850px) { body.t4-trang-tu-van-chien-luoc #content .t4tv-tq .t4tv-h2 br { display: none; } } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph .t4tv-h2 { font-size: 32px; line-height: 42.66px; } /* --- 20.2b HÀNG ĐẦU KHỐI: H2 TRÁI ↔ CÂU DẪN PHẢI ------------------------- [phục vụ] phần tử: Row/Columns | khối: đầu mọi section có H2 [trang] tu-van-chien-luoc | [figma] 'Container' 1080×60 (danhcho) và 1080×134 (Phase) — hai con xếp NGANG [lý do vượt panel] span 5/7 của Flatsome cho 450/630, Figma khai 436/360 và 436/511 — không bội số 90 nên span không dựng ra được (III.14) Số: mặc định H2 **436** ↔ dẫn **360** (dẫn ở x=720 ⇒ khe **284**); riêng 'danhcho' dẫn **511** ở x=569 ⇒ khe **133**. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-dau { display: flex; flex-wrap: nowrap; max-width: 1080px; margin-top: 40px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dau > .col:first-child { flex: 0 0 436px; max-width: 436px; padding: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dau > .col:last-child { flex: 0 0 360px; max-width: 360px; margin-left: 284px; padding: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc .t4tv-dau > .col:last-child { flex-basis: 511px; max-width: 511px; margin-left: 133px; } /* Chip nhãn nằm cách mép trên section 108 (danhcho) / 8 (các khối trong 'Frame 12'); nền cho 100 và 0 ⇒ bù đúng 8. */ /* Chip nhãn cách mép trên section 8 (danhcho: 108 = đệm section 100 + 8). ⛔ Gỡ luôn 'margin-bottom: 32' mà '30-components' đặt cho '.t4-label' — ở trang này khoảng cách xuống H2 do '.t4tv-dau' khai (40), giữ cả hai là cộng đôi và section cao thừa. */ body.t4-trang-tu-van-chien-luoc #content .t4-label { margin-top: 8px; margin-bottom: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc .t4-label > p { min-width: 159px; text-align: center; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dan p { font-size: 16px; line-height: 26px; font-weight: 400; letter-spacing: 0; color: var(--t4-text); margin: 0; } /* Câu dẫn của 'danhcho' là #252930 (Ink), không phải #1f1f1f — hai màu khác nhau thật, đã đối chiếu 'fills' của chính lớp đó. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-dc .t4tv-dan p { color: var(--t4-ink); } /* --- 20.3 CHIP NHÃN + KẺ ĐỨT NÉT 3/2 ------------------------------------- [phục vụ] phần tử: Text (class 't4-label' của 30-components) [trang] tu-van-chien-luoc | [figma] mọi 'Horizontal Divider' khai 'strokeDashes: [3,2]' [lý do vượt panel] 'border-style: dashed' của CSS KHÔNG đặt được nhịp 3/2 (III.15.5); phải vẽ bằng gradient lặp Số: nhãn cao 61 · kẻ dài 905 (danhcho) / 992 (Phase) · khe nhãn→kẻ 16. */ body.t4-trang-tu-van-chien-luoc .t4-label::after { border-top: 0; height: 1px; opacity: 1; background: repeating-linear-gradient(to right, var(--t4-leaf) 0 3px, transparent 3px 5px); } /* --- 20.4 HERO ------------------------------------------------------------ [phục vụ] phần tử: Section (bg + bg_overlay panel) + Text [trang] tu-van-chien-luoc | [figma] '918:8642' 1900×480 [lý do vượt panel] panel không đặt được cỡ/giãn dòng của ba lớp chữ Số: khung 1900×480 · nội dung 1060 căn giữa · nhãn 24/32,78 w500 cao 33 → H1 40/53,32 khe 0 → khe 15 → phụ đề 20/35 w500 ls −0,2 rộng 780. Lớp phủ '#000000 op=0,35 OVERLAY' đặt bằng ô 'bg_overlay' của panel. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-hero .t4tv-hero-nhan p { font-size: 24px; line-height: 32.78px; font-weight: 500; letter-spacing: 0; color: var(--t4-light); margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-hero-h1 { font-family: var(--t4-font-head); font-weight: 600; font-size: 40px; line-height: 53.32px; color: var(--t4-light); margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-hero .t4tv-hero-phu p { font-size: 20px; line-height: 35px; font-weight: 500; letter-spacing: -0.2px; color: var(--t4-light); margin: 15px auto 0; max-width: 780px; } /* --- 20.5 DÀNH CHO AI — ba thẻ 349,33 ------------------------------------ [phục vụ] phần tử: Columns + Icon Box + Text [trang] tu-van-chien-luoc | [figma] '568:25874' 1900×834 · '721:26350' [lý do vượt panel] bề rộng thẻ không phải bội số 90 nên span 1/12 không dựng ra được (III.14) Số: hàng 1080 · 3 thẻ **349,333** khe **16** · thẻ viền 1px #000 op 0,11 bo 16 đệm 50/30/25/30 (đo TỪ TRONG nét viền ⇒ border 1 + padding 49/29/24/29) · icon 35 → khe 16 → tên · tên 24/28 w600 ls −0,48 · doanh thu 11/28 w600 · nhãn 'Dành cho khách hàng:' 14/19,12 w600 · mục 12/20 w400 · khe mục 8. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-hang { display: flex; flex-wrap: nowrap; max-width: 1080px; margin-top: 72px; } /* Câu dẫn tụt 4px so với H2 (tâm mực cách nhau 3,5 — H2 40/53,32 ↔ dẫn 16/26). */ body.t4-trang-tu-van-chien-luoc #content .t4tv-dc .t4tv-dan { margin-top: 4px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-the { flex: 0 0 349.333px; max-width: 349.333px; margin-left: 16px; padding: 0; background: var(--t4-white); border: 1px solid rgba(0, 0, 0, .11); border-radius: 16px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-the:first-child { margin-left: 0; } /* ⛔ Biểu tượng nằm BÊN TRÁI cụm tên, không phải bên trên: 'Frame 7' xếp NGANG [icon 35][Frame 9: tên + doanh thu], khe 16 ⇒ tên lùi trái **51**. Bản đầu xếp dọc và bảng bắt đúng ba mốc 'khoang·dx' của cả ba thẻ. Mốc dọc trong thẻ (đo từ mép trong nét viền, đệm trên 50): tên +50 (24/28) doanh thu +72 ⇒ hộp chữ Figma chỉ cao **8** trong dòng 28, nên tâm mực cách tâm tên đúng 22 — không phải 32 như xếp thường kẻ đứt +108 nhãn +127 mục đầu +162, các mục sau khe 8 */ body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-the > .col-inner { position: relative; padding: 49px 29px 24px 29px; min-height: 431px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-icon { position: absolute; left: 29px; top: 49px; width: 35px; margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-icon .icon-box-img { width: 35px !important; margin: 0; line-height: 0; } /* ⛔ 'flatsome.css' khai '.icon-box-img svg { fill: currentcolor }' — luật đó THẮNG thuộc tính 'fill=' viết trong chính tệp SVG (II.K-3), nên màu phải khai lại ở đây. Và 'padding-top: .2em' của theme cha CỘNG vào chiều cao hộp (qa/quyet-dinh.md 17/08) — phải gỡ. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-icon .icon-box-img svg { display: block; width: 100%; height: auto; padding-top: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-icon .icon-box-img svg, body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-icon .icon-box-img svg path { fill: var(--t4-dark-moss); } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-icon .icon-box-text { padding: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-ten { padding-left: 51px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-ten h3 { font-family: var(--t4-font-body); font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.48px; color: var(--t4-text); margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-dt { padding-left: 51px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-dt p { font-size: 11px; line-height: 28px; font-weight: 600; color: var(--t4-text); margin: -6px 0 0; } /* Kẻ ngăn giữa cụm tên và danh sách: 'Separator' nét đứt [3,2], khe 18/18. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-nhan { margin-top: 27px; position: relative; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-nhan::before { content: ""; position: absolute; top: -19px; left: 0; right: 0; height: 1px; background: repeating-linear-gradient(to right, rgba(0, 0, 0, .3) 0 3px, transparent 3px 5px); } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-nhan p { font-size: 14px; line-height: 19.12px; font-weight: 600; color: var(--t4-text); margin: 0; } /* Mục danh sách: dấu 15×20 ('error_24dp') vẽ bằng ::before, DOM gọn (III.11-4). Số: dấu 15 rộng · khe dấu→chữ 8 ⇒ đệm trái 23 · khe giữa các mục 8. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-muc { position: relative; padding-left: 23px; margin-top: 8px; } /* ⛔ ':first-of-type' VÔ DỤNG ở đây: mục đầu là
thứ NĂM trong thẻ (sau icon · tên · doanh thu · nhãn), nên nó không bao giờ là 'div' đầu tiên — luật cũ im lặng không chạy. Bám theo anh em liền trước thì chắc chắn đúng. (Cùng họ với bẫy ':nth-of-type' vô dụng khi mọi anh em là 'div', 21f §4.) */ body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-nhan + .t4tv-dc-muc { margin-top: 16px; } /* 'List' của Figma cao 180 trong khi mục cuối kết thúc ở 172 ⇒ CÒN 8px ĐUÔI. Thiếu nó thì cả ba thẻ thấp đi đúng 8px và ba mốc 'khoang·dy(hộp)' giữa thẻ này với thẻ sau đều lệch −8. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-muc:last-child { margin-bottom: 8px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-muc p { font-size: 12px; line-height: 20px; font-weight: 400; color: var(--t4-text); margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-muc::before { content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px; background: no-repeat center/15px 15px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Ccircle cx='7.5' cy='7.5' r='6.6' fill='none' stroke='%231F1F1F' stroke-width='.9'/%3E%3Cpath d='M7.5 4v4.6' stroke='%231F1F1F' stroke-width='.9' stroke-linecap='round'/%3E%3Ccircle cx='7.5' cy='10.8' r='.6' fill='%231F1F1F'/%3E%3C/svg%3E"); } /* --- 20.6 LỘ TRÌNH — banner gradient ------------------------------------- [phục vụ] phần tử: Section (nền) + Row 2 cột + Image [trang] tu-van-chien-luoc | [figma] '984:9351' 1900×504 [lý do vượt panel] panel Section không đặt được gradient hai chặng và không đặt được bề rộng cột theo px Số: khung 1900×504 đệm 40/420 · thẻ 1078,98×424 bo 16 · chữ **640** ↔ minh hoạ **374** khe **64,98** · H2 38/45 w800 (Figma khai 38/45 nhưng ghi đè đoạn: cụm đầu #458763, cụm sau #cf9156 trên nền #69c479) · phụ đề 16/26 #cf9156 · 4 chip 10/13,66 w800. */ /* ⛔ Nền là GRADIENT BA CHẶNG, không phải hai: '#fcfbf6 0% → #efe8da 48,83% → #fcfbf6 100%' (đọc 'fills' của '984:9351'). Bản đầu tôi dùng khuôn "kem nhạt dần" quen thuộc của các trang khác và đầu dò màu báo ΔE 8,22. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-lt { background: linear-gradient(180deg, #FCFBF6 0%, #EFE8DA 48.83%, #FCFBF6 100%); } /* ⚠ Thẻ KHÔNG căn giữa trong Figma — đã kiểm bằng phép đo KHÔNG cần toạ độ (quét cột trắng trên dòng giữa của chính hai ảnh chụp, II.K-7): Figma thẻ trắng x = 421,0 … 1497,5 site thẻ trắng x = 412,0 … 1487,5 ⇒ lệch đúng 9,5, cùng bề rộng Bảng dày mù với việc này (I.8c: cả cụm trôi cùng nhau thì không sinh mốc). ⛔ HAI cách đã trả giá, đừng lặp lại: · 'margin-left: 9,5' KHÔNG thôi ⇒ tràn hàng 1080, section 'cta' phồng 449 → 501; · thêm 'margin-right: -9,5' chữa được tràn nhưng **giết luôn lề 'auto'** nên cả hàng dán MÉP TRÁI — 'lotrinh' từ 4,68 % vọt lên 8,28 % và ảnh chụp cho thấy chữ nằm ở x≈10. Cách đúng: 'position: relative; left: 9,5px' — dịch phần NHÌN THẤY mà không đụng vào dòng chảy, nên lề 'auto' giữ nguyên và không có gì tràn. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-lt .t4tv-lt-hop { max-width: 1078.98px; border-radius: 16px; min-height: 424px; align-items: center; position: relative; left: 9.5px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-lt-chu > .col-inner { padding: 0; } /* ⛔ Đệm 15px nằm trên '.col', KHÔNG phải '.col-inner' — gỡ ở '.col-inner' thì lớp chữ vẫn chỉ rộng 610 thay vì 640 (bẫy II.H-6). */ body.t4-trang-tu-van-chien-luoc #content .t4tv-lt-chu { flex: 0 0 640px; max-width: 640px; padding: 0; } /* Đệm 15px của '.col' làm ảnh hẹp lại 30 ⇒ cao hụt ~20 ở khổ 402 và cả khối chữ bên dưới trôi theo. Gỡ đệm ở CHÍNH cột, không phải ở '.col-inner'. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-lt-anh { flex: 0 0 374px; max-width: 374px; margin-left: 64.98px; padding: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-lt-h2 { font-family: var(--t4-font-body); font-size: 38px; line-height: 45px; font-weight: 800; color: #69C479; margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-lt-phu p { font-size: 16px; line-height: 26px; font-weight: 400; color: var(--t4-camel); margin: 17px 0 0; } /* Bốn chip là bốn '[col_inner]' — KHÔNG phải lớp tự đặt (III.2 chỉ cho hl-camel / hl-green / accent, cổng T0 chặn thẳng). Bề rộng thật lấy theo chữ, nên gỡ span 1/12 của Flatsome bằng 'width: auto'. Số: 4 chip x=0 · 127 · 272 · 423 (rộng 117 · 135 · 141 · 93), khe 10. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-lt-chips { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px; max-width: none; } body.t4-trang-tu-van-chien-luoc #content .t4tv-lt-chips::after { display: none; } body.t4-trang-tu-van-chien-luoc #content .t4tv-lt-chip { flex: 0 0 auto; width: auto; max-width: none; padding: 0; } /* ⛔ Figma KHÔNG khai nền cho chip ('fills' rỗng) và bo góc **11,5** — bản đầu tôi cho nền trắng + bo 4 theo thói quen chip của các trang khác, bảng bắt đúng 12 mốc. Cao 23 ⇒ đệm dọc (23 − 13,66) / 2 = 4,67. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-lt-chip > .col-inner { padding: 4.67px 10px; border-radius: 11.5px; background: transparent; border: 1px solid rgba(31, 31, 31, .25); } body.t4-trang-tu-van-chien-luoc #content .t4tv-lt-chip p { font-size: 10px; line-height: 13.66px; font-weight: 800; color: rgba(31, 31, 31, .5); white-space: nowrap; margin: 0; } /* --- 20.7 TỔNG QUAN LỘ TRÌNH — lưới 1 + 6 -------------------------------- [phục vụ] phần tử: Columns + Icon Box + Text [trang] tu-van-chien-luoc | [figma] '1010:8988' 1080×762 [lý do vượt panel] thẻ 528 và 1080 không phải bội số 90; huy hiệu phải dán mép phải trong khi Flatsome xếp cột đều Số: thẻ 1 **1080**×128 · sáu thẻ **528**×128, khe ngang **24**, khe dọc **27** · viền 1,5px #000 op 0,15 bo 10 · icon 48 lề trái 16 · khối chữ đệm 12/16 · huy hiệu phải rộng **99** nền #efe8da. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-luoi { display: flex; flex-wrap: wrap; max-width: 1080px; row-gap: 27px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the { padding: 0; background: var(--t4-white); border-radius: 10px; border: 1.5px solid rgba(0, 0, 0, .15); flex: 0 0 528px; max-width: 528px; margin-left: 24px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(1) { flex-basis: 1080px; max-width: 1080px; margin-left: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(2n) { margin-left: 0; } /* Bố cục thẻ đọc thẳng 'Frame 150' / 'Frame 151': hộp 528 (hoặc 1080) × **128** bo 10, viền 1,5 icon 48 tại x=**16**, y=**40** (căn giữa dọc: (128−48)/2) "Phase N" x=**80** y=**15** tên x=**80** y=**30** ⇒ CHỒNG hộp trước 4px (tâm cách nhau 23) mô tả x=**80** y=**69**, mép phải cách 115 (=99 huy hiệu + 16) huy hiệu rộng **99** cao TRỌN thẻ, nền #efe8da; "Tuần" y=**43,5** · "N outputs" y=**65,5**, cả hai lùi trái 16 ⛔ Đặt TUYỆT ĐỐI chứ không xếp dòng: Figma đặt tay từng lớp và hai cột trái/phải có mốc dọc ĐỘC LẬP nhau — dòng chảy tự nhiên không dựng ra được khoảng chồng −4 lẫn mốc 43,5 cùng lúc (bài học 'margin-top: auto' ở qa/quyet-dinh.md). Chiều cao thẻ cố định 128 nên không có rủi ro tràn. */ /* ⚠ Viền 1,5px nằm trên '.col', nên '.col-inner' phải cao **125** để hộp ngoài đúng 128 như Figma. Để 128 thì mỗi thẻ dôi 3px và cả lưới bốn hàng dôi 8 — đúng con số section cao thừa. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the > .col-inner { position: relative; height: 125px; padding: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-icon { position: absolute; left: 16px; top: 40px; width: 48px; margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-icon .icon-box-img { width: 48px !important; margin: 0; line-height: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-icon .icon-box-img svg { display: block; width: 100%; height: auto; padding-top: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-icon .icon-box-img svg, body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-icon .icon-box-img svg path { fill: var(--t4-leaf); } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-icon .icon-box-text { padding: 0; } /* ⚠ SÁU thẻ dùng mốc 26/41/80, RIÊNG thẻ 2 dùng 15/30/69 — chênh đúng 11px. Đây là Figma đặt tay (thẻ 1 dùng 'Frame 144' đệm 12, thẻ 2 dùng 'Frame 143' đệm 0), không phải luật nào cả; đã đối chiếu cả bảy thẻ bằng toạ độ. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-so { position: absolute; left: 80px; top: 26px; margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-so p { font-size: 14px; line-height: 19.12px; font-weight: 700; color: var(--t4-gray-mid); margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-ten { position: absolute; left: 80px; top: 41px; margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-ten h3 { font-family: var(--t4-font-body); font-size: 20px; line-height: 35px; font-weight: 800; letter-spacing: -0.2px; color: var(--t4-text); margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-mo { position: absolute; left: 80px; top: 80px; right: 115px; margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(2) .t4tv-tq-so { top: 15px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(2) .t4tv-tq-ten { top: 30px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(2) .t4tv-tq-mo { top: 69px; } /* Khe từ câu dẫn xuống lưới thẻ: Figma 118 tính từ hộp chữ dẫn (khổ 402: 99). */ body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-luoi { margin-top: 41px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-mo p { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--t4-text); margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-tuan { position: absolute; right: 0; top: 0; bottom: 0; width: 99px; margin: 0; background: var(--t4-cream); border-radius: 0 10px 10px 0; padding: 44px 0 0 16px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-out { position: absolute; right: 0; top: 66px; width: 99px; margin: 0; padding-left: 16px; background: none; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-tuan p { font-size: 16px; line-height: 21.86px; font-weight: 700; color: var(--t4-text); margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-out p { font-size: 14px; line-height: 19.12px; font-weight: 700; color: var(--t4-gray-mid); margin: 0; } /* --- 20.8 BẢY KHỐI PHASE -------------------------------------------------- [phục vụ] phần tử: Columns + Text [trang] tu-van-chien-luoc | [figma] '1012:10795' … '1012:10801' [lý do vượt panel] bề rộng thẻ 264 · 304,67 · 355 đều không phải bội 90 Số (p0): đầu khối 211 → khe **40** → hàng thẻ · thẻ **264** khe **8** · viền 1px #000 op 0,1 bo 16 · đệm dưới 60 · trong thẻ: số 36/49,18 #d5d5d5 → tiêu đề 16/21,86 w700 → mô tả 14/22 → output 12/16,39, 'Output:' w700. */ /* Hai chip nhỏ dưới H2 của mỗi Phase — cùng lý do dùng '[col_inner]'. Số (p0): chip 1 x=14 rộng 37 · chip 2 x=81 rộng 42, khe 30 tính từ mép. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-chips { margin: 28px 0 0; display: flex; gap: 8px; max-width: none; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-chips::after { display: none; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-chip { flex: 0 0 auto; width: auto; max-width: none; padding: 0; } /* ⛔ HAI chip KHÔNG cùng màu và KHÔNG cùng đệm — đọc thẳng '1010:10098': chip 1 'Background' 65×20 r=999999 nền **#587a6c**, chữ VIẾT HOA, text 37 ⇒ đệm ngang (65 − 37) / 2 = **14** chip 2 'Background' 58×20 r=999999 nền **#cf9156**, chữ nguyên bản, text 42 ⇒ đệm ngang **8** Bo góc là viên thuốc (999999), không phải 4 như chip nhãn section. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-chip > .col-inner { padding: 3.17px 8px; border-radius: 10px; background: var(--t4-camel); min-height: 20px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-chip:first-child > .col-inner { padding-left: 14px; padding-right: 14px; background: #587A6C; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-chip:first-child p { text-transform: uppercase; } /* ⛔ MỖI Phase một MÀU chip riêng — không có luật chung, đọc từng node: p0 #587a6c · p1 #155446 · p2 #2d6e55 · p3 #4a7c6e · p4 #7a6435 · p5 #3a6070 · p6 #5a3a28. Chip thứ hai ('Tuần …') thì mọi Phase đều #cf9156. */ body.t4-trang-tu-van-chien-luoc #phase-1 .t4tv-ph-chip:first-child > .col-inner { background: var(--t4-dark-moss); } body.t4-trang-tu-van-chien-luoc #phase-2 .t4tv-ph-chip:first-child > .col-inner { background: #2D6E55; } body.t4-trang-tu-van-chien-luoc #phase-3 .t4tv-ph-chip:first-child > .col-inner { background: #4A7C6E; } body.t4-trang-tu-van-chien-luoc #phase-4 .t4tv-ph-chip:first-child > .col-inner { background: #7A6435; } body.t4-trang-tu-van-chien-luoc #phase-5 .t4tv-ph-chip:first-child > .col-inner { background: #3A6070; } body.t4-trang-tu-van-chien-luoc #phase-6 .t4tv-ph-chip:first-child > .col-inner { background: #5A3A28; } /* Lớp chữ H2 của Phase RỘNG HƠN khung chứa nó: 'Heading 2' FRAME 436 nhưng lớp TEXT bên trong khai **479**. Đây là họ lỗi "hộp Figma không chứa nổi chữ của chính nó" (bàn giao 21/08 §3) — ở đây bên phải còn trống tới x=720 nên cho tràn đúng như thiết kế, không ép xuống 436. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-ph .t4tv-h2 { width: 479px; max-width: none; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-chip p { font-size: 10px; line-height: 13.66px; font-weight: 700; color: var(--t4-white); white-space: nowrap; margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-hang { display: flex; flex-wrap: wrap; max-width: 1080px; gap: 8px; margin-top: 40px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-the { padding: 0; background: var(--t4-white); border-radius: 16px; border: 1px solid rgba(0, 0, 0, .1); } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-hang-4 > .t4tv-ph-the { flex: 0 0 264px; max-width: 264px; } /* ⚠ Ba thẻ của p6 rộng **343** (pitch 351), KHÔNG phải 354,67 như lưới sáu thẻ của p2 — hai hàng ba thẻ mà hai bề rộng khác nhau. Đếm số thẻ trong hàng là cách duy nhất phân biệt được. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-hang-3 > .t4tv-ph-the { flex: 0 0 343px; max-width: 343px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-hang-6 > .t4tv-ph-the { flex: 0 0 354.67px; max-width: 354.67px; } /* Số đo trong thẻ (thẻ 1 của p0, hộp 264×488 bo 16 viền 1): đệm 32/24/60/24 (đo TỪ TRONG nét viền) số 36/49,18 → khe **24** → tiêu đề → khe 24 → KẺ → khe 24 → mô tả → khe 24 → KẺ → khe 24 → output Hai 'Vector 8285/8286' là KẺ THẬT: 'strokes' #000000 op 0,25 dày 1. Bản đầu bỏ qua chúng vì cao 0 — chính vì cao 0 nên chúng không sinh mốc nào, và nếu không vẽ thì hai khe 48 phía dưới trông như khoảng trắng vô cớ. */ /* Chiều cao thẻ Figma khai CỐ ĐỊNH và KHÁC nhau theo Phase — section chỉ khớp khi thẻ đúng chiều cao (đo 'Background+Border' từng khối): p0 488 · p1 488 · p2 427 (cụm) và 429 (lưới 6) · p3 529 · p4 520 · p5 480 · p6 480. Trừ 2px viền ⇒ 'min-height' của '.col-inner'. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-the > .col-inner { padding: 32px 24px 60px; min-height: 486px; } body.t4-trang-tu-van-chien-luoc #phase-2 .t4tv-ph-cum + .t4tv-ph-hang .t4tv-ph-the > .col-inner { min-height: 425px; } body.t4-trang-tu-van-chien-luoc #phase-2 .t4tv-ph-hang + .t4tv-ph-hang .t4tv-ph-the > .col-inner { min-height: 427px; padding-bottom: 39.3px; } body.t4-trang-tu-van-chien-luoc #phase-3 .t4tv-ph-the > .col-inner { min-height: 527px; } body.t4-trang-tu-van-chien-luoc #phase-4 .t4tv-ph-the > .col-inner { min-height: 518px; } body.t4-trang-tu-van-chien-luoc #phase-5 .t4tv-ph-the > .col-inner { min-height: 478px; } body.t4-trang-tu-van-chien-luoc #phase-6 .t4tv-ph-the > .col-inner { min-height: 478px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-so p { font-size: 36px; line-height: 49.18px; font-weight: 700; color: #D5D5D5; margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-ten h3 { font-family: var(--t4-font-body); font-size: 16px; line-height: 21.86px; font-weight: 700; color: var(--t4-text); margin: 24px 0 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-mo, body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-out { position: relative; margin-top: 48px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-mo::before, body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-out::before { content: ""; position: absolute; top: -24px; left: 0; right: 0; height: 1px; background: rgba(0, 0, 0, .25); } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-mo p { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--t4-text); margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-out p { font-size: 12px; line-height: 16.39px; font-weight: 400; color: var(--t4-text); margin: 0; } /* Cụm phụ Phase 2: bốn thẻ "Vòng 0N" dùng cỡ số KHÁC — 24/32,784 màu camel, không phải 36/49,18 màu ghi. Bám theo hàng đứng NGAY SAU khối tiêu đề cụm. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-cum + .t4tv-ph-hang .t4tv-ph-so p { font-size: 24px; line-height: 32.784px; color: var(--t4-camel); } /* Bốn thẻ "Vòng 0N": tiêu đề màu RÊU (#155446) và mô tả giãn dòng **20** — khác hẳn thẻ Phase thường (#1f1f1f · 22). */ body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-cum + .t4tv-ph-hang .t4tv-ph-ten h3 { color: var(--t4-dark-moss); } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-cum + .t4tv-ph-hang .t4tv-ph-the:first-child .t4tv-ph-mo p { line-height: 20px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-out strong { font-weight: 700; } /* Cụm phụ của Phase 2 ("4 vòng nghiên cứu"): tiêu đề 32/800 → 20/800 → 14/400 */ /* Cụm phụ của Phase 2 — ba lớp chữ, MỖI lớp một màu và một giãn dòng riêng (đọc thẳng 'fills' + 'text' của '1010:10476' · '1011:10486'): 32/50 w800 UPPER #458763 20/35 w800 ls −0,2 #cf9156 14/22 w400 #1f1f1f */ /* Khối tiêu đề cụm ('Frame 1707479667' 1080×224 tại y=251, nội dung lùi 32): "4 vòng nghiên cứu" +32 32/50 w800 UPPER #458763 "Trước khi ra định hướng" +82 hộp chữ Figma CAO 14 trong dòng 35 ⇒ tâm mực cách tâm dòng trên đúng 32, nên CSS phải kéo lên **−10,5** chứ không xếp thường KẺ +120 "theo quy trình chuẩn" +144 14/22 Khối cao 224 mà chữ cuối kết ở +166 ⇒ còn **58** đuôi, rồi khe 8 tới hàng thẻ. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-cum { margin-top: 40px; padding-left: 32px; padding-right: 32px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-cum0 h3 { font-family: var(--t4-font-body); font-size: 32px; line-height: 50px; font-weight: 800; color: var(--t4-leaf); text-transform: uppercase; margin: 32px 0 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-cum1 p { font-size: 20px; line-height: 35px; font-weight: 800; letter-spacing: -0.2px; color: var(--t4-camel); margin: -10.5px 0 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-cum2 { position: relative; margin-top: 37.5px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-cum2::before { content: ""; position: absolute; top: -24px; left: 0; right: 0; height: 1px; background: rgba(0, 0, 0, .25); } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-cum2 p { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--t4-text); margin: 0; } /* Sau khối tiêu đề cụm: đuôi 58 + khe 8. Giữa HAI hàng thẻ: khe **24**. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-cum + .t4tv-ph-hang { margin-top: 66px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-hang + .t4tv-ph-hang { margin-top: 24px; } /* Câu dẫn 'danhcho' rộng đúng **511** (Figma), không được kéo hết cột. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-dc .t4tv-dan p { max-width: 511px; margin-right: auto; } /* ⛔ '.row::after' của Flatsome là clearfix — trong một hàng 'display: flex' nó thành PHẦN TỬ FLEX THỨ N và cộng thêm 8px chiều cao (bẫy II.H-4). Đây là chỗ 8px của 'tongquan' và của mọi hàng thẻ đi ra. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-dau::after, body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-hang::after, body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-luoi::after, body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-hang::after, body.t4-trang-tu-van-chien-luoc #content .t4tv-lt-hop::after { display: none; } /* Đệm đáy thẻ Phase: Figma đặt TAY nên mỗi khối một con số (khoảng cách từ đáy ô 'Output:' tới đáy thẻ đo được 78 · 62 · 48 · 53 … ngay trong cùng một khối). Lấy con số làm CHIỀU CAO THẺ khớp Figma, vì chiều cao thẻ mới là thứ quyết định chiều cao section. */ body.t4-trang-tu-van-chien-luoc #phase-0 .t4tv-ph-the > .col-inner { padding-bottom: 52.6px; } body.t4-trang-tu-van-chien-luoc #phase-1 .t4tv-ph-the > .col-inner { padding-bottom: 47px; } body.t4-trang-tu-van-chien-luoc #phase-3 .t4tv-ph-the > .col-inner { padding-bottom: 49.6px; } body.t4-trang-tu-van-chien-luoc #phase-4 .t4tv-ph-the > .col-inner { padding-bottom: 40.6px; } body.t4-trang-tu-van-chien-luoc #phase-5 .t4tv-ph-the > .col-inner { padding-bottom: 39px; } /* --- 20.9 CTA CUỐI TRANG -------------------------------------------------- [phục vụ] phần tử: Section + Columns + Text + Button [trang] tu-van-chien-luoc | [figma] '717:26326' 1900×449 [lý do vượt panel] thẻ trắng bo góc + đệm 40 không có trong panel Row Số: khung 1900×449 đệm 80/420 nền #efe8da · thẻ **1078,98×289** đệm 40 viền 1px #000 op 0,11 bo 10 · H2 40/53,32 → khe 17 → mô tả 16/26 (căn đều hai bên · LUẬT 6 quét ③) → khe 17 → nút (đệm trên 24). */ body.t4-trang-tu-van-chien-luoc #content .t4tv-cta-the { max-width: 1078.98px; margin: 0 auto; padding: 39px; position: relative; left: 9.5px; background: var(--t4-white); border: 1px solid rgba(0, 0, 0, .11); border-radius: 10px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-cta-h2 { font-family: var(--t4-font-head); font-size: 40px; line-height: 53.32px; font-weight: 600; color: var(--t4-dark-moss); margin: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-cta-mo p { font-size: 16px; line-height: 26px; font-weight: 400; color: var(--t4-text); margin: 17px 0 0; text-align: justify; } /* Nút CTA: Figma khai nền **#458763** (Leaf), chữ TRẮNG, KHÔNG viết hoa, hộp **269×46**, dán MÉP PHẢI thẻ (x=1230 trong khung 1900 ⇒ mép phải thẻ). ⛔ Flatsome tự thêm 'text-transform: uppercase' cho '.button' — phải khai lại 'none', đây là bẫy II.H "bốn thuộc tính hay sót". */ body.t4-trang-tu-van-chien-luoc #content .t4tv-cta-the { text-align: left; } /* Hộp nút **269×46**: chữ 16/21,856 + đệm dọc 12,07 ⇒ đúng 46. 'line-height' phải khai TRÊN thẻ nút, Flatsome đặt 25,6 cho '.button' (bẫy II.H). */ body.t4-trang-tu-van-chien-luoc #content .t4tv-nut span { line-height: 21.856px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-nut { display: block; margin: 40px 0 0 auto; width: 269px; min-height: 46px; line-height: 21.856px; padding: 11.07px 20px; background: var(--t4-leaf); border-color: var(--t4-leaf); border-radius: 5px; font-size: 16px; font-weight: 700; color: var(--t4-white); text-transform: none; letter-spacing: 0; } /* ========================================================================== 20.10 KHỔ ĐIỆN THOẠI (≤849) — MỘT HỆ HÌNH HỌC RIÊNG, KHÔNG SUY TỪ DESKTOP [phục vụ] phần tử: Section/Row/Columns/Text | khối: toàn trang #10 [trang] tu-van-chien-luoc | [figma] 13 màn của '1385:16470' (402px) [lý do vượt panel] panel chỉ đặt được đệm và cỡ chữ theo breakpoint, không đặt được bề rộng px, lưới hay thứ tự ⛔ III.14.2-6: cấm suy bản 402 từ bản desktop. Ở trang này khác thật sự: · 'danhcho' desktop 3 thẻ NGANG 349,33 · khổ 402 xếp DỌC 352 khe 16 · 'tongquan' desktop lưới 1+6 (528) · khổ 402 xếp DỌC 352, icon 35 (≠48) · 'lotrinh' desktop chữ TRÁI ảnh PHẢI · khổ 402 ảnh TRÊN chữ DƯỚI · 'cta' desktop nút dán phải · khổ 402 nút chiếm trọn bề ngang ⛔ Breakpoint dùng hệ Flatsome 549/849/850 (III.4.3-3), KHÔNG tự chế 768. Số nền: khung 402 · đệm section 60/25 ⇒ khối nội dung **352**. ========================================================================== */ @media (max-width: 849px) { body.t4-trang-tu-van-chien-luoc .section .section-content > .row { max-width: 352px; } /* Hero: đệm dọc 64 · khối chữ 352 · phụ đề 16/35 ls −0,16 (desktop 20/35). */ /* ⛔ Hero khổ 402 KHÔNG phải bản desktop co lại: nhãn 85 → H1 118 (khe 0) rồi phụ đề tụt hẳn xuống **495** — cách H1 tới 377. Suy từ desktop (khe 15) là sai 300px (III.14.2-6). */ body.t4-trang-tu-van-chien-luoc #content .t4tv-hero .t4tv-hero-phu p { font-size: 16px; line-height: 35px; letter-spacing: -0.16px; max-width: none; margin-top: 324px; } /* [figma] trang10 · section danhcho/danhcho_mb — 4 lớp rộng 159px: '568:25880' · '568:25881' · '1385:16537' … còn 1 (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 10 để chọn) */ /* Hàng đầu khối: HAI CỘT DESKTOP THÀNH MỘT CỘT, khe H2→dẫn **32**. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-dau { flex-wrap: wrap; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dau > .col:first-child, body.t4-trang-tu-van-chien-luoc #content .t4tv-dc .t4tv-dau > .col:last-child, body.t4-trang-tu-van-chien-luoc #content .t4tv-dau > .col:last-child { flex: 0 0 100%; max-width: 100%; margin-left: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dau > .col:last-child { margin-top: 32px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc .t4tv-dan p { max-width: none; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc .t4-label > p { min-width: 159px; } /* ⛔ '30-components' hạ chip nhãn xuống 13px ở khổ ≤849, nhưng Figma khổ 402 của trang này VẪN khai 14/19,12 (hộp 72 rộng). Giành lại phạm vi cho riêng trang mình, không đụng tệp dùng chung (cách đã dùng ở mục 14.3 của '42-page-lien-he.css'). */ body.t4-trang-tu-van-chien-luoc #content .t4-label > p { font-size: 14px; } /* ⛔ BA luật TOÀN CỤC của trang #4 và nhóm GGM đang đè breadcrumb của mọi trang: '.t4fx-crumb ol { font-size: 10px }' và '.t4fx-crumb li + li::before { width: 20px }' trong '40-page-xu-ly-loi-sai-google-ads.css', và '.t4 nav.t4fx-crumb ol li:last-child * { line-height: 13px }' trong '44-nhom-ggm.css'. Figma 'crumb_mb' của trang này khai 13,8–13,9/22 và mũi tên rộng 32. Giành lại phạm vi cho trang mình — đường sửa tận gốc là dời ba luật kia về phạm vi trang #4, đã có hồ sơ I.6 và KHÔNG làm ở đây vì đó là tệp của cửa sổ khác (CHIA-VIEC §2.1). */ /* ⚠ ĐÍNH CHÍNH vòng trước: tôi chép 13,9px từ '42-page-lien-he.css' sang. 'crumb_mb' của TRANG NÀY khai **10px** — luật toàn cục 10px của trang #4 tình cờ ĐÚNG ở đây, chỉ mũi tên và giãn dòng là sai. Ép 13,9 làm crumb_mb từ 3 ❌ vọt lên 9 ❌. Bài học II.H: "mobile là node RIÊNG, đừng suy". */ .t4.t4-trang-tu-van-chien-luoc .t4fx-crumb li + li::before { width: 32px; } .t4.t4-trang-tu-van-chien-luoc nav.t4fx-crumb ol li:last-child, .t4.t4-trang-tu-van-chien-luoc nav.t4fx-crumb ol li:last-child * { line-height: 22px; } /* Ba thẻ 'danhcho' xếp DỌC: 352 · khe **16** · đệm 50/20/25/20 bo **10** (desktop bo 16 — hai khổ khác nhau thật, đã đối chiếu 'cornerRadius'). */ /* Khổ 402: khe header → hàng thẻ chỉ **16** (desktop 72). */ body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-hang { flex-wrap: wrap; margin-top: 16px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc .t4tv-dan { margin-top: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-the { flex: 0 0 100%; max-width: 100%; margin-left: 0; margin-top: 16px; border-radius: 10px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-the:first-child { margin-top: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-the > .col-inner { padding: 49px 19px 24px 19px; } /* 'lotrinh': ẢNH LÊN TRÊN (Figma xếp dọc, ảnh 352×323,49 → khe 32 → chữ), H2 32/45 (desktop 38/45). 'order' là cách duy nhất đảo thứ tự mà KHÔNG đụng cấu trúc shortcode (I.8-2). */ /* Section 'lotrinh' khổ 402 đệm **60** (desktop 40) — Figma khai 'đệm khung 60/25/60/25'. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-lt { padding-top: 60px; padding-bottom: 60px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-lt .t4tv-lt-hop { flex-wrap: wrap; max-width: 352px; min-height: 0; left: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-lt-anh { order: 1; flex: 0 0 100%; max-width: 100%; margin-left: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-lt-chu { order: 2; flex: 0 0 100%; max-width: 100%; margin-top: 32px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-lt-h2 { font-size: 32px; } /* Bốn chip khổ 402 xuống HAI hàng (y=644,5 và 677,5), lùi trái 10 so với mép thẻ; khe hàng 33 − 23 = 10. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-lt-chips { margin-top: 16px; padding-left: 0; row-gap: 10px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-lt-chip { flex: 0 0 auto; } /* 'tongquan': bảy thẻ xếp DỌC 352×128, khe **10**; icon **35** không phải 48; cột chữ **202**; huy hiệu vẫn **99**. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-luoi { flex-wrap: wrap; max-width: 352px; row-gap: 10px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the, body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(1) { flex: 0 0 100%; max-width: 100%; margin-left: 0; } /* Khổ 402: chữ lùi trái **67** (icon 35 tại 16 + khe 16), cột mô tả rộng **170** (mép phải vẫn cách 115 như desktop), huy hiệu vẫn 99. Mốc dọc: bốn thẻ 1·5·6·7 dùng 15/30/69 · ba thẻ 2·3·4 dùng 4/19/58. */ /* Viền 1,5px làm tròn khác nhau theo khung nhìn: ở 1900 thì 125 + viền cho đúng 128, ở 402 phải khai 126. Đo bằng DOM chứ không suy. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the > .col-inner { padding: 0; height: 126px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-icon { left: 16px; top: 46px; width: 35px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-so, body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(2) .t4tv-tq-so { left: 67px; top: 15px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-ten, body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(2) .t4tv-tq-ten { left: 67px; top: 30px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-mo, body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(2) .t4tv-tq-mo { left: 67px; top: 69px; right: 115px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(2) .t4tv-tq-so, body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(3) .t4tv-tq-so, body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(4) .t4tv-tq-so { top: 4px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(2) .t4tv-tq-ten, body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(3) .t4tv-tq-ten, body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(4) .t4tv-tq-ten { top: 19px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(2) .t4tv-tq-mo, body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(3) .t4tv-tq-mo, body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-the:nth-child(4) .t4tv-tq-mo { top: 58px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-luoi { margin-top: 31px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-tq-icon .icon-box-img { width: 35px !important; } /* Bảy khối Phase: thẻ xếp DỌC 302 (khối Phase khổ 402 lùi vào 25 nữa). ⚠ Bảy khung Phase của khổ 402 là KHUNG CŨ — thẻ vẫn nằm ở toạ độ desktop (x tới 1080/1624 trong khung rộng 302). Mọi mốc NGANG của chúng vô nghĩa; đã nộp 'qa/phan-hoi-figma.md' và 'qa/mien-tru.json'. Bản dựng dùng cách xếp dọc của 'danhcho_mb'/'tongquan_mb' — hai màn khổ 402 ĐÃ được dựng lại. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-hang { flex-wrap: wrap; max-width: 302px; margin-left: auto; margin-right: auto; gap: 16px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-hang-4 > .t4tv-ph-the, body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-hang-3 > .t4tv-ph-the, body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-hang-6 > .t4tv-ph-the { flex: 0 0 100%; max-width: 100%; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-the > .col-inner, body.t4-trang-tu-van-chien-luoc #phase-2 .t4tv-ph-cum + .t4tv-ph-hang .t4tv-ph-the > .col-inner, body.t4-trang-tu-van-chien-luoc #phase-2 .t4tv-ph-hang + .t4tv-ph-hang .t4tv-ph-the > .col-inner, body.t4-trang-tu-van-chien-luoc #phase-3 .t4tv-ph-the > .col-inner, body.t4-trang-tu-van-chien-luoc #phase-4 .t4tv-ph-the > .col-inner, body.t4-trang-tu-van-chien-luoc #phase-5 .t4tv-ph-the > .col-inner, body.t4-trang-tu-van-chien-luoc #phase-6 .t4tv-ph-the > .col-inner { padding: 24px 20px 40px; min-height: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-the > .col-inner { min-height: 0; } /* Khổ 402 giữ NGUYÊN 32/50 cho tiêu đề cụm — Figma 'p2_mb' khai y hệt desktop, chỉ cỡ chữ H2 của Phase mới hạ. Bản đầu tôi hạ luôn 24/38 theo thói quen và bảng bắt đúng mốc 'lh'. */ /* Khổ 402: tiêu đề cụm là **24/50** — cỡ chữ hạ nhưng GIÃN DÒNG GIỮ NGUYÊN 50. Hai vòng trước tôi đoán 24/38 rồi 32/50, sai cả hai vì đổi cả cặp; Figma tách riêng hai trường ('p2_mb': size 24 · lh 50). */ body.t4-trang-tu-van-chien-luoc #content .t4tv-ph-cum0 h3 { font-size: 24px; line-height: 50px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-ph .t4tv-h2 { font-size: 32px; line-height: 42.66px; } /* 'cta': thẻ 352 đệm 40, H2 **32/42,66** (desktop 40/53,32), mô tả ls −0,32, nút chiếm trọn bề ngang cột. */ /* Section CTA khổ 402 đệm **60** (desktop 80) ⇒ H2 rơi đúng mốc 100. */ body.t4-trang-tu-van-chien-luoc #content .t4tv-cta { padding-top: 60px; padding-bottom: 60px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-cta-the { max-width: 352px; padding: 39px; left: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-cta-h2 { font-size: 32px; line-height: 42.66px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-cta-mo p { letter-spacing: -0.32px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-nut { width: 100%; margin-left: 0; } } /* ========================================================================== 20.20 BA TRANG PHỤ #11 · #12 · #13 — MỘT KHUÔN DÙNG CHUNG Figma '1012:10928' · '1012:12696' · '1012:13142' (chỉ có khung DESKTOP — sitemap ghi "dựng responsive từ desktop", KHÔNG có node 402). Bố cục ba trang giống hệt nhau nên dùng CHUNG một tiền tố lớp 't4tvp-' (luật NÂNG CẤP III.4.0-1); chỗ nào khác thì khoá theo body class. [phục vụ] phần tử: Section · Row/Columns · Text · Image [trang] tu-van-chien-luoc-1/2/3 | [figma] màn 'than' của ba nhóm [lý do vượt panel] bề rộng cột 376/688 không phải bội số 90 nên span 1/12 không dựng ra được; panel Text không đặt được giãn dòng/giãn chữ Số (đọc 'tools/hinh-hoc.py trang11 than'): section đệm **40** trên-dưới, không đệm ngang · nền #fcfbf6 ⚠ viết '**40**' liền dấu gạch chéo là ĐÓNG LUÔN khối chú thích (hai dấu sao rồi gạch chéo) — đúng bẫy mục (9) của III.5c; đã dính HAI LẦN trong chính khối này, lần sau là ở câu giải thích về nó. Viết số đo cạnh dấu gạch chéo thì luôn chèn dấu cách: '40 / 0', không viết số in đậm dính ngay trước gạch chéo. "Quay lại" y=40 · icon **23** + khe **8** + chữ 16/22 w700 hàng thân y=78 (khe 16) · cột **376** + khe **16** + cột **688** cột trái đệm 150/32 · H2 84 → khe 16 → dẫn 90 → khe 16 → danh sách mục tích dấu **16×20** + khe **4** + chữ **292**, khe giữa mục **8** cột phải chip y=24 cao 40 → khe 16 → khối → khe 16 → kẻ → khe 16 → khối khối ảnh **640×360** → khe **20** → phần chữ phần chữ các cụm cách nhau **20**; trong cụm: tiêu đề 25 → khe 4 → dẫn 44 → khe 4 → hàng "Đầu ra" (icon 35 + khe 16 + chữ 589) cụm Tháng tiêu đề 30 → khe 8 → danh sách, khe giữa mục **10** ========================================================================== */ /* Section: nền #fcfbf6 · đệm trên 40 · dưới **101** = kẻ cuối cách hàng thân 60 + nét 1 + đệm 40. Kẻ ngang cuối section ('Vector 8270' rộng 1080 tại y=2099 của #11 và y=2173 của #12/#13) vẽ bằng ::after — thêm một phần tử chỉ để kẻ là phá DOM gọn (III.11-4). Chiều cao hàng thân lấy thẳng từ Figma ('Frame 1707479299'): #11 **1961**, #12 và #13 **2035** — hai cột dài ngắn khác nhau nên không suy được. */ body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-than { background: var(--t4-light); position: relative; padding-bottom: 101px; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-than::after { content: ""; position: absolute; bottom: 40px; height: 1px; left: 50%; transform: translateX(-50%); width: 1080px; background: rgba(0, 0, 0, .25); } body.t4-trang-tu-van-chien-luoc-1 #content .t4tvp-hai-cot { min-height: 1961px; } body:is(.t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-hai-cot { min-height: 2035px; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) .section .section-content > .row { max-width: 1080px; margin-left: auto; margin-right: auto; } /* [figma] luật dùng chung — lớp rộng 23px có ở 3 trang; đại diện: trang11:'1012:12650' · trang12:'1012:12698' · trang13:'1012:13144' (tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */ /* "Quay lại" — biểu tượng vẽ bằng ::before để DOM gọn (III.11-4) */ body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-quaylai { margin: 0; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-quaylai p { position: relative; padding-left: 31px; margin: 0; font-size: 16px; line-height: 22px; font-weight: 700; color: rgba(0, 0, 0, .62); } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-quaylai a { color: inherit; text-decoration: none; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-quaylai p::before { content: ""; position: absolute; left: 0; top: 0; width: 23px; height: 23px; background: no-repeat center/23px 23px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V1L7 6l5 5V7a6 6 0 1 1-6 6H4a8 8 0 1 0 8-8z' fill='%23000000'/%3E%3C/svg%3E"); } /* Hàng thân: hai cột 376 / 688, khe 16 */ body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-hai-cot { display: flex; flex-wrap: nowrap; max-width: 1080px; margin-top: 16px; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-hai-cot::after { display: none; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-trai { flex: 0 0 376px; max-width: 376px; padding: 0; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-trai > .col-inner { padding: 150px 32px; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-phai { flex: 0 0 688px; max-width: 688px; margin-left: 16px; padding: 0; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-phai > .col-inner { padding: 24px; } /* Cột trái */ body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-h2 { font-family: var(--t4-font-body); font-size: 32px; line-height: 42px; font-weight: 700; color: var(--t4-dark-moss); margin: 0; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-dan p { font-size: 16px; line-height: 30px; font-weight: 700; color: var(--t4-text); margin: 16px 0 0; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-tich { position: relative; padding-left: 20px; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-dan + .t4tvp-tich { margin-top: 24px; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-tich + .t4tvp-tich { margin-top: 8px; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-tich p { font-size: 14px; line-height: 25px; font-weight: 400; color: var(--t4-text); margin: 0; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-tich::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 20px; background: no-repeat center/16px 20px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M1.5 10.65L5.5 14.75L14.5 5.4' fill='none' stroke='%23155446' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Cột phải */ /* Chip "Bằng cách nào ???" là một HỘP 176×32 bo 5, KHÔNG có nền (Figma khai 'fills' rỗng) — để nguyên ô văn bản thì hộp rộng cả cột và bảng bắt bốn mốc 'w' 'h' 'nen' 'bo_goc' cùng lúc. */ body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-chip { display: inline-block; width: 176px; height: 32px; border-radius: 5px; background: none; } /* ⚠ Chữ KHÔNG căn giữa trong chip: hộp ở y=102, chữ ở y=120 — chữ TRÀN xuống dưới hộp. Đẩy bằng 'top' chứ không bằng 'padding', để hộp giữ đúng 32px như Figma khai. */ body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-chip p { position: relative; top: 11.67px; font-family: var(--t4-font-head); font-size: 20px; line-height: 26.66px; font-weight: 700; color: var(--t4-dark-moss); margin: 0; } /* Ảnh khối: Figma khai hộp **640×360** bo **5** — ảnh gốc 1280×853 nên để dòng chảy tự nhiên sẽ cao 426 (và ảnh thứ hai của #11 cao 585 vì tỉ lệ khác). Phải ghim chiều cao và cắt bằng 'object-fit'. */ /* ⚠ Khung chip ngoài ('Frame 1707479546') cao **40**, còn hộp chữ bên trong chỉ **32** — bảng đo hộp CHỮ nên ta ghim 32, và bù 8px còn lại vào khe xuống ảnh: 16 + 8 = **24**. Thiếu 8px này thì TOÀN BỘ cột phải cao lên 8 và mọi mốc so chéo hai cột lệch đúng 8,41. */ body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-anh { margin-top: 24px; } /* Ảnh của khối THỨ HAI: phía trên nó là kẻ ngang — khe 16 → kẻ → khe 16. Kẻ vẽ bằng ::before để không thêm phần tử (III.11-4 DOM gọn). */ body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-muc + .t4tvp-anh { margin-top: 40px; position: relative; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-muc + .t4tvp-anh::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 1px; background: rgba(0, 0, 0, .25); } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-anh img { display: block; width: 640px; height: 360px; object-fit: cover; border-radius: 5px; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-anh + .t4tvp-gd { margin-top: 20px; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-gd h3 { font-family: var(--t4-font-body); font-size: 18px; line-height: 24.59px; font-weight: 700; color: var(--t4-black); margin: 0; } /* ⚠ #353535, KHÔNG phải '--t4-gray' (#3B3B3B) — hai màu ghi khác nhau thật, bảng bắt cả hai lớp dùng nó. */ body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-gd-dan p { font-size: 14px; line-height: 22px; font-weight: 400; color: #353535; margin: 4px 0 0; } /* Hàng "Đầu ra đạt được:" — biểu tượng 35 nằm BÊN TRÁI, chữ lùi 51 */ body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-ra-nhan { position: relative; padding-left: 51px; margin-top: 4px; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-ra-nhan::before { content: ""; position: absolute; left: 0; top: 0; width: 35px; height: 35px; background: no-repeat center/35px 35px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 -960 960 960'%3E%3Cpath d='M120-120v-720h360v160h360v560H120zm80-80h120v-120H200zm0-200h120v-120H200zm0-200h120v-120H200zm200 400h120v-120H400zm0-200h120v-120H400zm0-200h120v-120H400zm200 400h160v-120H600zm0-200h160v-120H600z' fill='%23155446'/%3E%3C/svg%3E"); } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-ra-nhan p { font-size: 14px; line-height: 28px; font-weight: 600; letter-spacing: -0.28px; color: var(--t4-text); margin: 0; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-ra { padding-left: 51px; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-ra p { font-size: 12px; line-height: 22px; font-weight: 400; color: #353535; margin: 4px 0 0; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-thang h4 { font-family: var(--t4-font-body); font-size: 16px; line-height: 30px; font-weight: 700; color: var(--t4-text); margin: 20px 0 0; } /* Tiêu đề Tháng ĐẦU TIÊN đi ngay sau ô "Đầu ra": hộp chữ Figma của ô đó chỉ cao **31** trong khi cùng chuỗi chữ ở cỡ 12/22 cần **44** (2 dòng) — hộp Figma không chứa nổi chữ của chính nó. Bù 13px vào khe để mốc dưới đúng. */ body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-ra + .t4tvp-thang h4 { margin-top: 7px; } /* #12 và #13 khai khe 444 ở chỗ #11 khai 440 — hộp danh sách của hai trang đó cao hơn 4. Khoá theo body class chứ không sửa cho cả ba. */ body:is(.t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-muc + .t4tvp-anh { margin-top: 44px; } /* ⛔ LỀ DỌC GỘP NHAU (margin collapsing): 8px 'margin-bottom' của mục cuối và 'margin-top' của tiêu đề Tháng KHÔNG cộng — trình duyệt lấy giá trị LỚN HƠN. Figma khai khe 48 tính từ mép trên mục cuối (mục cao 20 + đuôi 8 + khe 20) ⇒ phải khai thẳng **28**, không phải 24. Mỗi lần hụt 4px ở đây dồn lại: sau ba cụm Tháng thì cả khối lệch 8,4 và ẢNH của khối thứ hai lên cao 8,4 — bảng dày KHÔNG thấy (I.8c, cả cụm trôi cùng nhau), chỉ ảnh nhiệt của chặng 3 bắt được. */ body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-muc + .t4tvp-thang h4 { margin-top: 28px; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-muc { position: relative; padding-left: 20px; } /* Tiêu đề Tháng → mục đầu: Figma khe 8 tới 'List', mà 'List' còn 8px đệm trên ⇒ **16**. Và 'List' có 8px ĐUÔI (cao 266 trong khi mục cuối kết ở 258) — thiếu đuôi thì mọi khoảng cách xuống cụm sau hụt đúng 8. */ body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-thang + .t4tvp-muc { margin-top: 16px; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-muc:last-child { margin-bottom: 8px; } /* Khối thứ hai không có câu dẫn lẫn hàng "Đầu ra" — tiêu đề GIAI ĐOẠN đi thẳng xuống danh sách, khe **28,4** (Figma 53 trừ hộp chữ 24,59). */ body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-gd + .t4tvp-muc { margin-top: 28.4px; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-muc + .t4tvp-muc { margin-top: 10px; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-muc p { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--t4-text); margin: 0; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-muc::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 20px; background: no-repeat center/16px 20px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M1.5 10.65L5.5 14.75L14.5 5.4' fill='none' stroke='%23155446' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Khổ điện thoại: Figma KHÔNG vẽ khung 402 cho ba trang này (sitemap ghi "dựng responsive từ desktop") ⇒ đổ hai cột thành một, giữ nguyên token chữ. ⛔ Không có mốc số nào để so ở khổ này — đây là suy diễn có chủ đích, đã ghi rõ, chứ không phải đọc từ bản thiết kế. */ @media (max-width: 849px) { body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) .section .section-content > .row { max-width: 352px; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-hai-cot { flex-wrap: wrap; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-trai, body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-phai { flex: 0 0 100%; max-width: 100%; margin-left: 0; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-trai > .col-inner { padding: 0; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-phai > .col-inner { padding: 24px 0 0; } body:is(.t4-trang-tu-van-chien-luoc-1, .t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-h2 { font-size: 26px; line-height: 34px; } } /* [phục vụ] phần tử: Link "Quay lại" (t4tvp-quaylai a) | [trang] CHỈ tu-van-chien-luoc-2 · tu-van-chien-luoc-3 (Cửa sổ C, 22/08/2026) [lý do] vùng chạm WCAG 2.2 2.5.8 dưới ngưỡng 24px (kiem-tuong-tac.js). ⛔ KHÔNG sửa khối .t4tvp-quaylai dùng chung ở trên (dòng ~901) — khối đó còn phục vụ tu-van-chien-luoc-1, trang KHÔNG thuộc phạm vi cửa sổ này (xem BAN-GIAO-PHIEN-MOI). Đây là quy tắc CỘNG THÊM, đặc hiệu bằng :is() hai trang, không đụng gì tới trang thứ ba. Nới bằng padding + margin âm bù trừ để hộp bấm cao 24px mà chữ không dịch vị trí (kỹ thuật giống 49-nhom-khoa-hoc.css cùng ngày). */ body:is(.t4-trang-tu-van-chien-luoc-2, .t4-trang-tu-van-chien-luoc-3) #content .t4tvp-quaylai a { display: inline-block; padding: 1px 0; margin: -1px 0; } /* ========================================================================== 21. #10 'tu-van-chien-luoc' — HAI NÚT HERO + BA NÚT "Xem giải pháp" (bổ sung 22/08/2026, KHÔNG đụng tu-van-chien-luoc-1/2/3) [phục vụ] phần tử: Text (t4tv-hero-nut, t4tv-dc-xem) trong Hero + Dành cho Ai [trang] #10 CHỈ | [figma] hero 918:8658 · 918:8660 | hero_mb 1385:16527 · 1385:16529 | danhcho 721:26487 · 721:26482 · 721:26477 (291×44) [lý do] `kiem-tuong-tac.js --figma=trang10` báo hero/hero_mb THIẾU hai nút (trang chưa hề có khối `.t4tv-hero-nut`) và ba thẻ "Dành cho Ai" thiếu nút "Xem giải pháp". Bảng màu theo tông Leaf/Dark Moss của #10 (khác Camel của nhóm dv3) — chưa chạy vòng đo pixel, chỉ đủ không đè chữ và đạt kiểm tương tác; số đo Figma chính xác để dành cho vòng bảng dày sau. ========================================================================== */ body.t4-trang-tu-van-chien-luoc #content .t4tv-hero-nut { margin-top: 40px; display: flex; justify-content: center; gap: 16px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-hnut { display: inline-flex; align-items: center; justify-content: center; height: 56px; border-radius: 5px; border: 2px solid transparent; font-family: var(--t4-font-body); font-size: 18px; line-height: 32px; font-weight: 700; text-decoration: none; text-transform: none; transition: opacity .2s ease; padding: 0 32px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-hnut--trang { background: var(--t4-white); border-color: var(--t4-leaf); color: var(--t4-leaf); } body.t4-trang-tu-van-chien-luoc #content .t4tv-hnut--dac { background: var(--t4-leaf); color: var(--t4-white); } body.t4-trang-tu-van-chien-luoc #content .t4tv-hnut:hover { opacity: .88; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-xem { margin-top: 24px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-nut-xem { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 24px; border-radius: 5px; background: var(--t4-leaf); color: var(--t4-white); font-family: var(--t4-font-body); font-size: 15px; line-height: 20px; font-weight: 700; text-decoration: none; text-transform: none; transition: opacity .2s ease; } body.t4-trang-tu-van-chien-luoc #content .t4tv-nut-xem:hover { opacity: .88; } @media (max-width: 849px) { body.t4-trang-tu-van-chien-luoc #content .t4tv-hero-nut { flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; } body.t4-trang-tu-van-chien-luoc #content .t4tv-hnut { width: 283px; height: 44px; font-size: 14px; padding: 0; } body.t4-trang-tu-van-chien-luoc #content .t4tv-dc-xem { margin-top: 20px; } } /* [phục vụ] phần tử: Link "Quay lại" (t4tvp-quaylai a) | [trang] CHỈ tu-van-chien-luoc-1 (22/08/2026) [lý do] vùng chạm WCAG 2.2 2.5.8 dưới ngưỡng 24px (kiem-tuong-tac.js — 61,1×22). Cùng lỗi và cùng cách vá đã dùng cho tu-van-chien-luoc-2/3 (dòng ~1068), nhưng KHÔNG gộp vào :is() chung — trang đó do cửa sổ khác phụ trách, chỉ thêm rule đặc hiệu riêng cho #11 ở đây. Nới bằng padding + margin âm bù trừ để hộp bấm cao 24px mà chữ không dịch vị trí. */ body.t4-trang-tu-van-chien-luoc-1 #content .t4tvp-quaylai a { display: inline-block; padding: 1px 0; margin: -1px 0; }