/* ============================================================ Vinpack — home.css CSS RIÊNG CỦA TRANG CHỦ. Chỉ nạp khi is_front_page(). NẠP SAU global.css VÀ layout.css. inc/enqueue.php khai vinpack-global làm dependency của vinpack-home, và vinpack-layout cũng phụ thuộc vinpack-global, nên thứ tự nguồn cố định là global → layout → home. Nhiều rule ở đây hoà độ ưu tiên với global.css rồi thắng bằng thứ tự nguồn; đảo file là đảo kết quả. VÌ SAO LÀ FILE RIÊNG, KHÔNG NHÉT VÀO layout.css: cùng lý lẽ inc/enqueue.php đã ghi cho home.js. layout.css là tài sản toàn site, nạp trên mọi trang; lưới bento, băng chạy logo và slider chứng nhận chỉ có ở trang chủ. BA LUẬT CỦA FILE NÀY — tests/test-css-cascade.php mục 7 canh cả ba: 1. KHÔNG khai custom property nào. Token thuộc về theme.json và global.css. Khai lại `--navy` ở đây sẽ thắng theo thứ tự nguồn và âm thầm đổi màu ở mọi nơi khác dùng token đó — mà bộ giải cascade không mô hình hoá var() nên sẽ không có khẳng định nào lộ ra. 2. KHÔNG dùng !important. Mọi thứ ở đây thắng bằng độ ưu tiên hoặc thứ tự nguồn, hai thứ đo được. 3. KHÔNG khai `outline` ở bất kỳ đâu. Vòng focus của mục 10 global.css ở (0,1,0); một `.cert-dot:focus{outline:none}` là (0,1,1) và nuốt trọn nó. Đó là lỗi đắt nhất của Phase A. VÀ MỘT LUẬT NỮA, VỀ `hidden`: Slide chứng nhận, dãy chấm và thanh điều khiển báo chí đều đóng/mở bằng THUỘC TÍNH `hidden` do assets/js/home.js bật tắt. (Hai nút "Tạm dừng chuyển động" từng nằm trong danh sách này; khách yêu cầu gỡ — xem mục 10.) UA có sẵn `[hidden]{display:none}`. Một dòng `.press-controls{display:flex}` trông vô hại sẽ đè nó và hai nút chết hiện ra khi không có JS. Nên mọi rule chạm `display` của những thứ đó đều đi qua `:not([hidden])`, VÀ file này khai lại `X[hidden]{display:none}` tường minh — bộ giải cascade không mô hình hoá stylesheet của UA, nên không khai lại thì không có gì để đo. VỀ 100vw — LỖI CÓ SẴN CỦA MOCKUP, ĐÃ SỬA: Mockup tràn `.partner-row` và `.certs-visual-bleed` bằng `100vw` / `50vw` + `margin-left:calc(50% - 50vw)`. `vw` TÍNH CẢ THANH CUỘN, nên trên Windows với thanh cuộn cố định mỗi khối thừa ra ~17px và sinh cuộn ngang cho cả trang. File này KHÔNG dùng đơn vị `vw` ở đâu cả — xem chú thích tại chỗ. ============================================================ */ /* ============================================================ 1. Dùng chung cho các khối trang chủ ============================================================ */ /* * `.section-lead` là tên Task 2–5 đặt cho đoạn dẫn (mockup dùng style nội tuyến * trên một thẻ

đóng bằng ). Trong `.section-head` nó đã được * `.section-head p` (0,1,1) của global.css tô --text-muted. * * TRÊN NỀN --bg-alt PHẢI ĐỔI MÀU. --text-muted trên --bg-alt chỉ 4.24:1, trượt * AA cho chữ dưới 18px — đúng con số đã ghi ở `.vp-table tbody tr:hover td`. * --text trên --bg-alt là 15.25:1. Ba khối nền --bg-alt của trang chủ là * .stats, .press và .certs. * * (0,2,0) nên thắng `.section-head p` (0,1,1) bằng ĐỘ ƯU TIÊN, không nhờ thứ tự * nguồn: chuyển khối này lên đầu file vẫn ra cùng kết quả. */ .stats .section-lead, .press .section-lead, .certs .section-lead{ color:var(--text); } /* * Căn giữa khối tiêu đề — mockup làm bằng style nội tuyến, đã bỏ. * * `.gallery .section-head` (STT4, feedback khách đợt 1): toàn site * `.section-head` căn TRÁI theo global.css — chỉ đảo ở đúng khối "Con người * và hệ thống" theo yêu cầu, không đụng khối nào khác. Thêm vào ĐÚNG nhóm * đã căn giữa sẵn (cùng bộ chọn (0,2,0) đã thắng `.section-head` (0,1,0) của * global.css) thay vì viết một khối riêng — một quy tắc dùng chung. */ .stats .section-head, .video-sec .section-head, .partners .section-head, .press .section-head, .gallery .section-head{ margin-inline:auto; text-align:center; } /* * SECTION CÓ NỀN MÀU RIÊNG PHẢI TRÀN HẾT CHIỀU NGANG — SỬA LỖI CÓ SẴN CỦA MOCKUP. * * Mockup viết `

` MÀ VẪN cho nó `background: * var(--bg-alt)`. Hậu quả đo được trên site thật (viewport 1280, thanh cuộn * 15px): `.stats` cùng màu --bg-alt rộng 1265 (tràn), còn `.press` chỉ 1180 — * hai dải CÙNG MỘT MÀU, hai bề rộng khác nhau, và hai bên dải press hở ra nền * trắng của body. `.gallery` và `.partners` mắc đúng lỗi đó với nền --white. * * LUẬT: section MANG NỀN thì bản thân section rộng hết trang, chỉ NỘI DUNG bị * giới hạn --wrap-max. Section không nền thì `.wrap` thẳng lên section là đủ * (products, video-sec giữ nguyên). * * CÁCH ÁP — VÌ SAO KHÔNG THÊM MỘT `.wrap` BÊN TRONG: * Ba part này là `
`; thêm một `
` bên * trong là đổi cấu trúc của ba template part và của mọi khẳng định XPath bám * vào chúng. Ở đây làm bằng CSS thuần: bỏ `max-width` rồi trả lại đúng phần * đệm đã mất bằng padding co giãn. * * padding-inline = max(--wrap-x, (100% - --wrap-max + 2*--wrap-x) / 2) * * Ở 1265px: max(32, (1265 - 1180 + 64)/2 = 74.5) = 74.5 → hộp nội dung * 1265 - 149 = 1116px, ĐÚNG BẰNG 1180 - 2*32 của `.wrap` cũ. Ở 375px vế thứ * hai âm nên `max()` trả --wrap-x → không bao giờ hẹp hơn phần đệm tối thiểu. * * KHÔNG `100vw`, KHÔNG `50vw`: Phase C Task 7 đã bỏ chúng vì `vw` tính cả * thanh cuộn dọc và đẻ ra cuộn ngang trên Windows. `100%` ở đây là bề rộng * khối chứa (body), KHÔNG tính thanh cuộn — đó là toàn bộ lý do dùng nó. * * `.video-sec` VÀO DANH SÁCH DÙ BẢNG ĐO BÀN GIAO GHI NÓ "KHÔNG NỀN". * Nền của nó là `linear-gradient(160deg, var(--navy) …)`, tức nằm ở * `background-image`. Phép đo bàn giao đọc `background-color`, ra `transparent`, * và xếp nhầm nó vào nhóm không nền — trong khi dải navy vẫn chỉ rộng * --wrap-max, hai bên hở nền trắng, ĐÚNG lỗi đang sửa. Bài học: dò "section có * nền" bằng `background-color` là mù với mọi gradient. test-css-cascade.php mục * 7.4c đã đổi sang quét CẢ BA thuộc tính nền. * * `.partner-row`/`.gallery-row` KHÔNG phải sửa: chúng tràn bằng * `margin-inline:calc(var(--wrap-x) * -1)` tính theo token, không theo bề rộng * vỏ, nên hình học của chúng so với mép nội dung không đổi một pixel nào. * * Độ ưu tiên: `.press.wrap` (0,2,0) thắng `section.wrap` (0,1,1) của global.css * bằng ĐỘ ƯU TIÊN chứ không nhờ thứ tự nạp — đảo thứ tự file vẫn ra kết quả này. * `padding` của `section.wrap` là viết tắt; ở đây đặt hai longhand để phần * padding dọc không phụ thuộc vào việc rule kia có thắng hay không. */ /* * --------------------------------------------------------------------------- * KHÁCH LẬT LẠI LUẬT TRÊN CHO HAI KHỐI — STT 7 VÀ STT 9, FEEDBACK ĐỢT 1 * --------------------------------------------------------------------------- * Luật "section mang nền thì rộng hết trang" ở trên là suy luận của chúng ta, * KHÔNG phải điều mockup vẽ. Đo lại chính file mockup trong trình duyệt ở * 1265px cho thấy mockup dựng NGƯỢC LẠI: * * .video-sec.wrap trái 43, rộng 1180 (dải navy là MỘT KHỐI, hai bên hở) * .press.wrap trái 43, rộng 1180 (dải xanh nhạt cũng vậy) * .partners.wrap trái 43, rộng 1180 * .gallery.wrap trái 43, rộng 1180 * .hero/.stats/.certs/.why/.cta trái 0, rộng 1265 (những khối này MỚI tràn) * * Khách khoanh đúng hai khối và viết tay: * STT 7 (video): "chỉnh lại như bản cũ giúp e, shape một phần chứ không tràn viền" * STT 9 (báo chí): "cho vào shape giúp e, chứ hong tràn viền ạ" * * Nên `.video-sec.wrap` và `.press.wrap` RA KHỎI danh sách này, trả về * `section.wrap` của global.css: max-width --wrap-max, padding --sp-8/--wrap-x * — đúng "96px 32px" và bề rộng 1180 đo được trên mockup. * * `.gallery.wrap` Ở LẠI, có chủ ý: nền nó là --white, trùng nền trang, nên * tràn hay không tràn KHÔNG nhìn thấy được; khách không nhắc tới nó; và kéo nó * về 1180 sẽ đổi hình học của `.gallery-row` mà STT 4 vừa chốt xong. Đây là * sai lệch so với mockup được GHI NHẬN và cố ý chưa sửa, không phải bỏ sót. */ .gallery.wrap{ max-width:none; padding-block:var(--sp-8); padding-inline:max( var(--wrap-x), calc( (100% - var(--wrap-max) + var(--wrap-x) * 2) / 2 ) ); } /* * `.partners` — STT 8, YÊU CẦU NGƯỢC HẲN HAI KHỐI TRÊN. * * Khách: "Phần logo a cho chạy tràn viền giúp e nha", kèm hai mũi tên chỉ ra * ngoài hai mép màn hình. Mockup cũng tràn thật: `.partner-row` đo được * trái -7, rộng 1280 trên vùng nhìn 1265 — nó PHÁ RA NGOÀI cả vỏ lẫn màn hình. * * Vỏ giữ `max-width:none` để băng logo với tới được mép, nhưng ĐỆM NGANG VỀ 0: * còn đệm thì băng không bao giờ chạm mép, và đó chính là lý do bản trước * trông "chưa tràn". Phần đệm chuyển xuống cho riêng `.section-head` bên dưới, * vì chỉ tiêu đề mới cần thẳng hàng với nội dung các khối khác. * * VẪN KHÔNG DÙNG `100vw`: mockup tràn bằng `width:100vw; margin-left:calc(50% * - 50vw)`, mà `vw` tính cả thanh cuộn dọc nên đẻ ra cuộn ngang trên Windows * (lý lẽ đầy đủ ở docblock `.partner-row`). Ở đây bề rộng đến từ chính vỏ * `max-width:none` — tức bề rộng KHỐI CHỨA, không tính thanh cuộn — nên tràn * đúng mép nhìn thấy được, không dư một pixel nào. */ .partners.wrap{ max-width:none; padding-block:var(--sp-8); padding-inline:0; } /* * Tiêu đề nhận lại phần đệm mà vỏ vừa bỏ. `.section-head` có max-width 640px * và căn giữa, nên trên màn rộng phần đệm này không đổi gì; nó chỉ có tác dụng * dưới ~704px, đúng lúc cần để chữ không dính mép. */ .partners .section-head{ padding-inline:var(--wrap-x); } /* ============================================================ 2. Hero ============================================================ */ /* * SỬA 07/09/2026 (khách, ảnh khoanh đỏ cả khối hero): "phía trên tone #001bb7 * cho nó liền với header luôn, phía dưới cũng tone màu đó nhưng sắc độ sẽ nhạt * hơn". * * HAI THAY ĐỔI so với bản cũ `linear-gradient(160deg, --navy → --navy-dark)`: * - HƯỚNG 160deg -> 180deg. Ở 160deg mép trên KHÔNG phải một màu: góc trái * trên là điểm đầu (#001BB7) còn góc phải trên đã ngả sang #001291, nên * đường ranh với header (nền phẳng var(--navy)) lộ ra rõ ở nửa phải. Dọc * 100% thì cả mép trên đúng một màu, khớp header thành một khối liền. * - ĐIỂM CUỐI --navy-dark (#001291, TỐI hơn nền) -> #1E44D8 (SÁNG hơn), đúng * chiều khách vừa chốt: cùng tone xanh thương hiệu, chỉ nhạt hơn. * * #1E44D8 là literal chứ không phải token vì bảng màu không có bậc "navy nhạt" * nào: --cobalt (#5C90F5) và --cobalt-ink (#3366CC) đều đã nhạt tới mức chữ phụ * --on-navy-text (#C3CDE8) chỉ còn 3.38:1 khi đặt lên — trượt AA. Với #1E44D8: * chữ trắng 7.3:1, chữ phụ --on-navy-text 4.6:1, cả hai còn dư chuẩn. Cùng sắc * 228° với --navy, chỉ nâng độ sáng. */ .hero{ /* * HAI ĐIỂM MÀU KHÁCH GỬI THẲNG (07/09/2026, khách dán nguyên rule mong * muốn): `linear-gradient(180deg, #001bb7 0%, #3366cc 100%)`. Cả hai đều * trùng khít token có sẵn nên viết bằng token: #001bb7 = --navy (đúng nền * .site-header, nên mép trên liền header), #3366cc = --cobalt-ink. Giá trị * hiện ra không đổi một pixel so với bản khách gửi, chỉ khác cách khai — * luật số 1 của file này là không ghi cứng màu đã có token. * * Thay cho bản trong suốt alpha .6 thử sáng nay: nền giờ ĐẶC, đáy không còn * hoà vào nền trắng bên dưới nữa. */ background:linear-gradient(180deg, var(--navy) 0%, var(--cobalt-ink) 100%); color:var(--white); padding:var(--sp-8) 0 0; position:relative; overflow:hidden; } /* * STT 2 (feedback khách, đợt 1): "background sẽ chèn ảnh full khung phủ lớp * gradient nền chính đậm dần từ trên xuống dưới từ trái qua phải". Khách CHƯA * gửi ảnh nền thật — dựng khung trước, chừa chỗ đổ ảnh thật sau (đã chốt với * khách): khi có ảnh, chỉ cần thêm `background-image` vào `.hero` (hoặc một * lớp `` nền), lớp phủ này vẫn đứng nguyên phía trên. * * Một `linear-gradient(160deg, …)` DUY NHẤT diễn đạt được cả hai chiều khách * yêu cầu (trên→dưới VÀ trái→phải) vì 160deg vừa nghiêng dọc vừa nghiêng * ngang; chồng hai gradient (một dọc + một ngang) sẽ đục màu và không đậm dần * mượt như một hướng chéo duy nhất — khách chỉ nói "đậm dần", không nói phải * tách hai lớp. * * rgba(0,27,183,…) là --navy ở dạng có alpha — token không mang alpha nên bên * trong linear-gradient() phải viết tay giá trị số. Điểm đầu nhạt (alpha .35) * để không đục ảnh nền khi có ảnh thật; điểm cuối đậm (alpha .82) để đủ tương * phản cho chữ trắng. inset:0 phủ full khung; z-index:0 đặt lớp phủ NGAY TRÊN * nền nhưng DƯỚI nội dung (`.hero-grid` mang z-index:1 ở dưới). */ .hero::before{ content:""; position:absolute; inset:0; /* * KHÔNG CÒN BACKGROUND (07/09/2026, khách bỏ dòng này trong rule gửi kèm): * nền hero giờ tự nó đủ, mọi lớp phủ chồng thêm chỉ làm đục dải màu vừa chốt. * Khung rỗng giữ nguyên để lúc khách gửi ẢNH NỀN thật (STT 2 đợt 1, xem ghi * chú ngay trên) chỉ cần đặt lại một `background` ở đây — không phải dựng lại * cả pseudo-element và tính lại z-index. */ z-index:0; } /* * LỚP PHỦ TỐI `.hero::after` ĐÃ GỠ (07/09/2026). * * Nó dựng hôm 05/09 theo yêu cầu "đậm ở phía trên, nhạt dần xuống dưới" — phủ * #000A3C alpha .75 ở mép trên. Yêu cầu mới ngày 07/09 THAY THẾ chính chỗ đó: * mép trên phải đúng #001BB7 để liền với header, mà lớp phủ tối này kéo mép * trên sang #001240 — đậm hơn header thấy rõ, đúng đường ranh khách muốn xoá. * Chiều "đậm trên → nhạt dưới" vẫn còn nguyên, nay do chính nền đảm nhiệm * (#001BB7 → #1E44D8), không cần lớp phủ thứ hai. Xem lịch sử git nếu cần dựng * lại. */ /* * repeat(auto-fit, …) chứ không phải `1.1fr .9fr`: `.hero-body` có thể vắng hẳn * (mọi ô chữ trống, chỉ còn hình) và `.hero-visual` cũng vậy. Hai cột ghi cứng * để lại một cột rỗng chiếm nửa màn hình. * * position:relative + z-index:1: nội dung phải nổi TRÊN `.hero::before` — nếu * không, lớp phủ gradient (position:absolute, z-index:0) sẽ đè lên chữ vì nó * đứng sau trong DOM. */ .hero-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:var(--sp-7); align-items:center; max-width:var(--wrap-max); margin-inline:auto; padding:0 var(--wrap-x) var(--sp-8); position:relative; z-index:1; } /* * RÀ SOÁT FEEDBACK LẦN 2 — STT 2 CHƯA ĐẠT TRỌN VẸN. * * `white-space:nowrap` trên `` (xem `.hero h1 em`) đã khoá đúng nghĩa * đen của câu feedback: "toàn diện" không bao giờ bị TÁCH ĐÔI giữa hai chữ. * Nhưng đo lại bằng trình duyệt thật ở CẢ 1265px lẫn 1905px cho thấy tiêu đề * vẫn ra BA dòng ("Giải pháp bao bì" / "toàn diện" / "cho doanh nghiệp"), * trong khi ảnh đích của khách vẽ HAI dòng ("Giải pháp bao bì toàn diện" / * "cho doanh nghiệp"). Nguyên nhân: hai cột `1fr 1fr` chia đều chỗ khách cột * chữ chỉ còn 534px ở 1265px, mà "Giải pháp bao bì toàn diện" ở * 800/46px/Manrope cần tối thiểu 578px mới vừa một dòng (đo bằng * `getBoundingClientRect` trên một `` dựng tạm cùng font, không đoán). * * Hỏi lại khách và chốt: nới cột chữ, thu hẹp cột ảnh — CHỈ ở dải đủ rộng. * * min-width:1180px = ĐÚNG `--wrap-max`. Từ ngưỡng này, `.hero-grid` đã chạm * max-width nên bề rộng nội dung khả dụng ổn định ở 1068px (1180 − 2×32 đệm * − 48 gap) DÙ MÀN CÓ RỘNG HƠN NỮA — không có ngưỡng nào an toàn hơn để ép * tỉ lệ cột mà không phải tính lại theo từng viewport. * * Tỉ lệ 1.3fr:1fr tại 1068px cho cột chữ 604px — dư 26px so với 578px cần * thiết, đủ biên an toàn cho sai số đo font. Cột ảnh còn 464px (từ 534px), * `.hero-visual` bên dưới co theo `1fr` của grid nên KHÔNG cần sửa gì thêm. * * DƯỚI 1180px KHÔNG ĐỤNG: `repeat(auto-fit, minmax(320px, 1fr))` ở rule * gốc vẫn nguyên — hai cột 1:1 khi đủ hai lần 320px+gap, tự dồn một cột khi * hẹp hơn. Vùng 752–1180px (giữa hai ngưỡng) vẫn có thể ra ba dòng như * trước — đó là hành vi ĐÃ TỒN TẠI SẴN, không phải lỗi mới, và ngoài phạm * vi phép đo đã xác nhận (dự án chỉ đo ở hai mốc 1265px và 375px). */ @media (min-width:1180px){ .hero-grid{ grid-template-columns:1.3fr 1fr; } } /* * Nền của nhãn: --navy-dark chứ không phải rgba() của mockup — file này không * được khai custom property, nên một màu pha chỉ có thể là hằng số ngoài hệ * token. --on-navy-accent trên --navy-dark đạt 10.10:1; viền --cobalt trên * --navy-dark đạt 4.52:1, trên ngưỡng 3:1 của WCAG 1.4.11. */ .eyebrow{ display:inline-flex; align-items:center; gap:var(--sp-2); background:var(--navy-dark); border:1px solid var(--cobalt); border-radius:var(--r-pill); color:var(--on-navy-accent); font-size:13px; font-weight:700; letter-spacing:.4px; padding:7px 14px; margin-bottom:var(--sp-5); } /* Dấu chấm trang trí, aria-hidden. Giấu nó vô hại; giấu `.eyebrow` thì mất chữ. */ .eyebrow-dot{ color:var(--cobalt); } /* * h1 của global.css đã là 46px/800/--navy. Trên nền navy phải đổi màu chữ; cỡ * và font giữ nguyên để thang tiêu đề chỉ có một nguồn. */ .hero h1{ color:var(--white); margin-bottom:var(--sp-4); } /* * STT 2 (feedback khách, đợt 1): chữ "toàn diện" bị tách 2 dòng — đo trên * trình duyệt thật thấy KHÔNG có
nào trong nguồn (hero_title_em chỉ là * text thô, xem inc/template-tags.php::vinpack_home_hero()); nguyên nhân là * bề rộng khối chữ làm nó tự xuống dòng giữa hai tiếng, tái hiện được ở CẢ * 1280px (toàn: top 265 / diện: top 318) LẪN 375px (toàn: top 186 / diện: top * 223 — đo bằng Range trên text node). `white-space:nowrap` chỉ khoá riêng * cụm trong `` — câu vẫn tự do xuống dòng ở chỗ khác khi cần, không ép * cứng cả h1 như một `max-width` sẽ làm. */ /* * STT bổ sung (feedback khách, sau đợt 1): "toàn diện" trong nhấn màu * --on-navy-accent (#A9C4FF) — một quyết định thiết kế có chủ đích, không * phải lỗi. Nhưng khách khoanh đỏ đúng chữ này và nói "sửa cho đồng bộ": trên * nền navy, cạnh chữ trắng thuần xung quanh, #A9C4FF (11.41:1 → 6.53:1, vẫn * đạt AA nhưng thấp hơn hẳn) nhìn MỜ đi chứ không đọc ra là "nhấn mạnh" — dễ * bị hiểu nhầm là lỗi màu hơn là chủ ý thẩm mỹ. * * Đổi về --white, ĐỒNG MÀU với phần còn lại của h1. Thẻ vẫn giữ — * `font-style:normal` (không nghiêng) và `white-space:nowrap` (khoá không * tách dòng giữa "toàn" và "diện", xem docblock ngay trên) vẫn còn tác dụng; * chỉ bỏ đúng phần màu gây lệch tông. */ .hero h1 em{ font-style:normal; color:var(--white); white-space:nowrap; } /* * `.hero-lead` là tên MỚI. Mockup chọn bằng `.hero p`, mà bộ chọn đó sẽ vơ luôn * mọi đoạn khác lọt vào hero sau này. * --on-navy-text trên --navy: 7.19:1. */ .hero-lead{ font-size:16.5px; color:var(--on-navy-text); max-width:480px; margin-bottom:var(--sp-6); } /* Có thể vắng hoàn toàn, hoặc chỉ chứa MỘT nút. flex-wrap cho cả hai ca. */ .hero-actions{ display:flex; flex-wrap:wrap; gap:var(--gap-inline); } /* * Nút chính trên nền navy: nền --navy của `.btn-primary` chỉ 1.23:1 so với nền * hero, tức nút TÀNG HÌNH vì viền `.btn` vốn trong suốt. Đây đúng khiếm khuyết * mà `.on-navy .btn-primary` của global.css sinh ra để chặn — nhưng `.hero` * KHÔNG mang class `.on-navy`, nên rule đó không với tới. * * Chữ trắng trên --cobalt-ink: 5.37:1. Viền --cobalt so với nền hero: 3.67:1 — * viền không phải chữ nên --cobalt dùng được, và nó mới là thứ vẽ ra đường bao. * Cả hai con số lấy nguyên từ lý lẽ đã ghi ở mục 6 global.css. * * Phải viết RÕ cả :hover. `.btn-primary:hover` của global.css là (0,2,0); bản * không-hover ở đây cũng (0,2,0) và chỉ thắng nhờ thứ tự nguồn, nên bỏ trống * :hover là để nền rơi về --navy-dark lúc trỏ vào — 1.23:1, nút biến mất. * `.hero .btn-primary:hover` ở (0,3,0) thắng bằng độ ưu tiên. */ /* * ĐÍCH ĐỔI 03/09/2026 (khách gửi ảnh chụp nút chìm vào nền navy ở khối * "Vẫn còn nhiều dự án khác", /du-an-tieu-bieu/, "nền xanh nút trắng"): * --cobalt-ink 5.37:1 với CHỮ nhưng chỉ 2.13:1 với chính NỀN HERO — đỡ hơn * nút tàng hình 1.23:1 nói trên nhưng vẫn mờ trên nền navy đồng màu. * * Đổi sang trắng/navy — RULE NÀY LÀ NGUỒN mà `.cta-box`, `.nl-cta-box`, * `.contact-cta-box`, `.news-cta-box` đều trích dẫn làm chuẩn ("cùng lý lẽ * đúng từng chữ như `.hero .btn-primary`"). Đã đổi hết bốn nơi đó sang * trắng/navy trước — sửa Ở ĐÂY cho khớp lại đúng cái mà chúng tự nhận là * đang theo. */ .hero .btn-primary, .hero .btn-primary:hover{ background:var(--white); color:var(--navy); border-color:var(--white); } /* * `.hero-visual` chứa HOẶC `` HOẶC ``, không * bao giờ cả hai. Nền --navy-dark để khung không bao giờ là một lỗ trống. */ .hero-visual{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4 / 3.1; background:var(--navy-dark); display:flex; align-items:center; justify-content:center; } .hero-img{ width:100%; height:100%; object-fit:cover; } /* * Mã màu bên trong SVG dự phòng là màu CỨNG cố ý — xem docblock hero.php. Ở đây * chỉ định cỡ, KHÔNG đụng màu. */ .hero-fallback{ width:100%; height:100%; max-width:100%; } /* ============================================================ 3. Dải số liệu ============================================================ */ .stats{ background:var(--bg-alt); padding-block:var(--sp-8); } /* * `.stats-grid` là