/* ============================================================ Vinpack — layout.css Header dính, panel mega, dropdown, ngăn kéo di động. NẠP SAU global.css. inc/enqueue.php khai vinpack-global làm dependency nên thứ tự nguồn là cố định, và nhiều rule ở đây cố ý hoà độ ưu tiên với global.css rồi thắng bằng thứ tự nguồn. BA LUẬT CỦA FILE NÀY — tests/test-css-cascade.php mục 5 canh cả ba: 1. KHÔNG khai custom property nào. Token thuộc về global.css và theme.json. Một `--z-header` thứ hai ở đây sẽ thắng theo thứ tự nguồn và âm thầm đổi mọi thứ dùng token đó ở nơi khác — 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 bằng 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 `.vp-nav-trigger:focus{outline:none}` là (0,1,1) và nuốt trọn nó. Đó đúng là lỗi đắt nhất của Phase A, và các phần tử mới ở đây là chỗ nó dễ quay lại nhất. VÀ MỘT LUẬT NỮA, VỀ `hidden`: Nền mờ của ngăn kéo và tabpanel của mega đóng/mở bằng THUỘC TÍNH `hidden` do JS bật tắt. UA có sẵn `[hidden]{display:none}`. Một dòng `.vp-drawer-backdrop{display:block}` trông vô hại sẽ đè nó và làm nền mờ phủ kín trang mọi lúc. Nên mọi rule chạm tới `display` của hai thứ đó đều phải đi qua `:not([hidden])`. Cùng hình dạng với lỗi `.art-content table{display:block}` của Phase A. ============================================================ */ /* ============================================================ 1. Thanh header ============================================================ */ /* * box-shadow:none PHẢI khai tường minh ở đây. Nếu chỉ có rule .scrolled thì * bộ giải trả "không rule nào" cho trạng thái nghỉ và không ai chứng minh * được rằng bóng CHƯA có trước khi cuộn — mà bóng thường trực đúng là cách * class .scrolled trở thành đồ trang trí. */ .site-header{ position:sticky; top:0; z-index:var(--z-header); background:var(--navy); border-bottom:1px solid var(--border); box-shadow:none; transition:background var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease); } .site-header.scrolled{ background:var(--white); box-shadow:var(--sh-2); } /* * VÌ SAO NỀN HEADER ĐỔI, VÀ CÁI GIÁ CỦA VIỆC ĐÓ — Phase D Task 2. * * Trước Task này `.site-header` là `background:var(--white)` ở CẢ HAI trạng * thái, và `.scrolled` chỉ thêm bóng. Mockup thì ngược lại: nghỉ là nền --navy, * cuộn xuống mới thành trắng. Hai biến thể logo của mockup (`.for-dark` / * `.for-light`) chỉ có nghĩa khi nền THẬT SỰ đổi — trên một header trắng thường * trực thì "bản cho nền tối" là trắng-trên-trắng, tức một cái lỗ. * * Nên nền đổi, và mọi thứ nằm trên nền đó phải đổi theo. Trạng thái nghỉ cần * đè tường minh ở BỐN chỗ, mỗi chỗ một lý do đo được: * * - .nav-links > li > a và .vp-nav-trigger: `color:var(--text)` #1A1A1A trên * --navy #001BB7 chỉ đạt 1.52:1 — gần như không đọc được. * - .vp-drawer-toggle: `color:var(--navy)` trên --navy là 1:1, ba gạch * hamburger biến mất hẳn ở đúng mốc ≤900px nơi nó là lối điều hướng DUY * NHẤT. * - .btn-primary: `background:var(--navy)` trên nền --navy cũng là 1:1, và * viền của .btn vốn trong suốt nên nút không còn đường bao nào. Đây đúng * là cơ chế đã làm .btn-primary tàng hình trong hero, chỉ khác con số * (--navy trên --navy-dark là 1.23:1). * - Logo: xem mục ngay dưới. * * KHÔNG đè `.vp-panel` và ruột của nó: panel mega/dropdown có nền --white * riêng, chữ trong đó vẫn nằm trên trắng. Vì vậy mọi bộ chọn dưới đây dùng bộ * nối CON TRỰC TIẾP `> li > a`, không dùng bộ nối con cháu — một * `.site-header:not(.scrolled) .nav-links a` sẽ bôi trắng cả link trong panel, * tức trắng trên trắng. Mockup đã vấp đúng chỗ này và phải vá lại ở cuối file * của nó. */ .site-header:not(.scrolled) .nav-links > li > a, .site-header:not(.scrolled) .vp-nav-trigger{ color:var(--white); } .site-header:not(.scrolled) .nav-links > li > a:hover, .site-header:not(.scrolled) .nav-links > li > a[aria-current="page"], .site-header:not(.scrolled) .vp-nav-trigger:hover, .site-header:not(.scrolled) .vp-nav-trigger[aria-expanded="true"]{ color:var(--cobalt-light); } .site-header:not(.scrolled) .vp-drawer-toggle{ color:var(--white); } /* * Nút CTA trên nền navy. Công thức lấy nguyên của `.on-navy .btn-primary` ở * global.css mục 6, kể cả lý do: nền --cobalt-ink cho chữ trắng 5.37:1, còn * đường bao thì do viền --cobalt vẽ (3.67:1 so với --navy, đạt WCAG 1.4.11). * * `:hover` PHẢI viết rõ chứ không được bỏ trống. `.btn-primary:hover` ở * global.css là (0,2,0); bộ chọn dưới đây là (0,4,0) nên vẫn thắng — nhưng * global.css đã ghi lại đúng cái bẫy này một lần rồi, và viết rõ thì kết quả * không phụ thuộc vào việc ai đó có đổi độ ưu tiên ở đầu kia hay không. */ /* * Feedback khách đợt 1, STT 1: nút "Liên hệ báo giá" nền TRẮNG ở trạng thái * nghỉ (ảnh STT01_minhhoa_1.png khoanh đỏ đúng nút này) — thay cho nền * --cobalt-ink cũ. Hover giữ chữ navy, chỉ đổi nền sang --bg-alt (xanh rất * nhạt) để có phản hồi mà không cần thêm token mới. Khi ĐÃ CUỘN * (.site-header.scrolled) nút đổi sang nền --navy/chữ trắng — ghi tường minh * dù đây trùng giá trị mặc định của .btn-primary ở global.css, vì mặc định * đó có thể đổi mà không ai để ý ảnh hưởng tới header. */ .site-header:not(.scrolled) .vp-header-cta{ background:var(--white); color:var(--navy); border-color:var(--white); } .site-header:not(.scrolled) .vp-header-cta:hover{ background:var(--bg-alt); color:var(--navy); border-color:var(--bg-alt); } .site-header.scrolled .vp-header-cta, .site-header.scrolled .vp-header-cta:hover{ background:var(--navy); color:var(--white); border-color:var(--navy); } .nav{ position:relative; display:flex; align-items:center; /* * gap:var(--sp-8) (96px, thay --gap-inline 12px cũ) — feedback khách đợt 1, * STT 1: đo thật ở 1280px trước sửa, gap logo->vp-nav = 293.6px (do * .vp-nav từng mang margin-left:auto, đã chuyển sang .nav-actions ở trên). * Ảnh site cũ (STT01_bangoc_3.png) cho khoảng logo->"TRANG CHỦ" ~116px trên * 1588px (~7.3%), quy đổi 1280px ~93px — --sp-8 (96px) là token gần nhất. * .nav-actions đã tự đẩy phải bằng margin-left:auto nên gap 96px ở đây * KHÔNG đẩy nút báo giá ra khỏi mép phải, chỉ cộng thêm khoảng tối thiểu. */ gap:var(--sp-8); max-width:var(--wrap-max); margin:0 auto; padding:0 var(--wrap-x); min-height:76px; } .logo{ display:inline-flex; align-items:center; flex:0 0 auto; text-decoration:none; } /* * SỬA — khách: "Logo tăng kích thước thêm 1/3". 40px × 4/3 = 53.3px, làm * tròn 53px. `.nav` vẫn min-height:76px (mục 1 ngay trên) — 53px logo còn dư * ~23px đệm dọc, không cần tăng chiều cao thanh header theo. */ .logo img{ display:block; max-height:53px; width:auto; } .logo-text{ font-family:var(--font-head); font-weight:800; font-size:20px; color:var(--navy); } /* * HỢP ĐỒNG B3 ĐÃ ĐỔI Ở ĐÂY — Phase D Task 2. Đọc trước khi sửa tiếp. * * B3 khai hai dòng: * .logo-white{ display:none; } (0,1,0) — chưa bao giờ có tác dụng * .logo .logo-white{ display:none; } (0,2,0) — dòng thật sự thắng * với lý do "header là nền trắng nên bản trắng phải ẩn". Lý do đó đã hết đúng * kể từ khi nền header lúc nghỉ là --navy: trên nền đó bản TRẮNG mới là bản * phải hiện, còn bản navy mới là bản phải ẩn. * * Hệ quả đo được của hợp đồng cũ: header in * và (0,2,0) ẩn nó đi, trong khi logo_navy chưa có ảnh — nên header KHÔNG hiện * logo nào cả. Không test nào đỏ, vì cả hai rule đều có mặt và viết đúng. * * Cả hai dòng bị GỠ, không phải nới lỏng. Thay vào là hai rule theo TRẠNG THÁI: * * .site-header:not(.scrolled) .logo .for-light → (0,3,1) * .site-header.scrolled .logo .for-dark → (0,3,1) * * Cả hai thắng `.logo img{display:block}` (0,1,1) bằng ĐỘ ƯU TIÊN, không nhờ * thứ tự nguồn. Chúng loại trừ nhau nên không bao giờ cùng khớp một phần tử. * Không cần rule `display:block` đối ứng: `.logo img` đã là nền, và thêm một * cặp rule nữa chỉ tạo thêm chỗ để hoà độ ưu tiên. * * `.for-dark` = dùng khi header NỀN TỐI (nghỉ) = bản logo TRẮNG. * `.for-light` = dùng khi header NỀN SÁNG (đã cuộn) = bản logo NAVY. * Tên gọi theo NỀN, không theo màu mực — lấy nguyên của mockup. * * MỘT BIẾN THỂ DUY NHẤT thì site-header.php in KHÔNG mang for-dark/ * for-light, nên không rule nào dưới đây khớp và `.logo img` cho nó hiện ở cả * hai trạng thái. Cố ý: một lỗ trống ở nửa số trạng thái tệ hơn một logo lệch * màu nền. * * CHÂN TRANG KHÔNG CÒN LIÊN QUAN. Đoạn này TRƯỚC ĐÂY ghi rằng * `.site-footer .footer-logo .logo-white` ở (0,3,0) là rule thắng cho display * của logo trắng trong chân trang. Câu đó NAY SAI: khách yêu cầu bỏ hẳn ảnh * logo khỏi chân trang (STT 12), site-footer.php không in `` nữa, và rule * kia đã bị xoá — xem chú thích tại chỗ nó từng nằm, cuối file này. * * Ghi lại thay vì xoá sạch vì đây đúng loại chú thích nguy hiểm nhất: nó mô tả * một rule không còn tồn tại, và người đọc sau sẽ đi tìm rule đó. `.logo-white` * ngoài chân trang vẫn do mục 1 đặt display:none — phần ĐÓ không đổi, và hai * dòng ngay dưới đây vẫn là hợp đồng thật cho header. */ .site-header:not(.scrolled) .logo .for-light{ display:none; } .site-header.scrolled .logo .for-dark{ display:none; } /* margin-left:auto CHUYỂN sang .nav-actions (mục 1b) — xem giải thích ở .nav bên dưới. */ .vp-nav{ margin-left:0; } /* ============================================================ 1b. Khối hành động bên phải header — ô tìm kiếm và nút CTA ============================================================ Ô tìm kiếm nay là MỘT NÚT KÍNH LÚP MỞ RA POPUP, không còn là form luôn hiện. Lý do đổi nằm ở đầu template-parts/header/site-header.php và template-parts/header/search-popup.php. MÀU CỦA VỎ Ô TÌM KIẾM CỐ Ý KHÔNG ĐỔI THEO `.scrolled`. Nền vỏ là --white và viền là --cobalt ở cả hai trạng thái, vì --cobalt là màu duy nhất trong bộ token đạt ngưỡng 3:1 của WCAG 1.4.11 trên CẢ HAI nền: --cobalt #5C90F5 trên --navy #001BB7 = 3.67:1 --cobalt #5C90F5 trên --white #FFFFFF = 3.11:1 Một cặp rule đổi theo trạng thái ở đây chỉ thêm chỗ để sai mà không mua được gì. Nút CTA thì KHÔNG có màu nào chung như vậy nên nó buộc phải đổi — xem mục 1. `.nav-search` KHÔNG còn `overflow:hidden`. Rule đó có từ thời ô nhập và nút gửi dính liền nhau bên trong vỏ; giữ lại thì nó CẮT CỤT popup, vì popup là con position:absolute của chính vỏ này. Đây là loại lỗi trông như "popup không mở" trong khi nó mở đúng và chỉ bị xén. VỀ Z-INDEX — ĐỌC MỤC 6 TRƯỚC KHI ĐỔI SỐ Ở ĐÂY. `.site-header` là position:sticky + z-index nên nó TẠO một ngữ cảnh xếp chồng. Popup và nền mờ của nó nằm trong đó, nên hai số dưới đây chỉ xếp thứ tự VỚI NHAU và với ngăn kéo — chúng KHÔNG so được với .vp-fab hay bất cứ thứ gì ngoài header. Dùng đúng thang của ngăn kéo: calc(var(--z-fab) + 2) nền mờ calc(var(--z-fab) + 3) vỏ Popup và ngăn kéo HOÀ nhau ở bậc +3, và điều đó không sao: nút kính lúp nằm trong `.nav-actions` (ẩn ở ≤900px) còn nút hamburger chỉ hiện ở ≤900px, nên không có viewport nào mở được cả hai. Nếu ngày nào `.nav-actions` hiện ở màn hẹp thì phải tách hai bậc ra — và phải đo lại bằng elementFromPoint chứ không phải bằng cách đổi số rồi đoán, xem mục 6. `.nav-search-item` KHAI `color` Ở CẤP CLASS, VÀ ĐÓ LÀ BẮT BUỘC. WordPress core in một stylesheet NỘI TUYẾN chứa `a:where(:not(.wp-element-button)){color:var(--wp--preset--color--navy)}` ở độ ưu tiên (0,0,1). tests/test-css-cascade.php KHÔNG đọc được stylesheet đó, nên nếu link kết quả chỉ dựa vào `body a:where(…)` của global.css thì bộ giải sẽ nói một đằng và trình duyệt làm một nẻo. `.nav-search-item` ở (0,1,0) thắng cả hai một cách chắc chắn, không phụ thuộc thứ tự nguồn. NỀN POPUP LÀ MÀU ĐẶC, KHÔNG PHẢI GRADIENT. Bộ giải chỉ đọc `background-color`; một nền gradient ở đây nghĩa là mọi con số tương phản của mục này nói về một trang không tồn tại. ============================================================ */ .nav-actions{ display:flex; align-items:center; flex:0 0 auto; gap:var(--sp-3); /* * margin-left:auto (thay cho var(--sp-4) cũ) — feedback khách đợt 1, STT 1: * đẩy kính lúp + nút báo giá sát mép phải, để .nav's gap (mục logo-menu, * xem `.nav` ở trên) là khoảng CỐ ĐỊNH duy nhất chi phối vị trí menu ngay * sau logo, đúng như ảnh STT01_bangoc_3.png. */ margin-left:auto; } /* * SỬA — khách: "bỏ button kính lúp thành icon, làm giống mẫu". Khung viền * --cobalt + nền --white cũ (đoạn dưới đây) khiến icon trông như một NÚT có * hộp, trong khi ảnh mẫu chỉ là một icon trần không viền/không nền. Bỏ hẳn * border/background của `.nav-search`. * * HỆ QUẢ CẦN BÙ: khung trắng cũ tồn tại không phải ngẫu nhiên — nó là cách * giữ icon LUÔN đọc được trên CẢ HAI nền header (navy lúc chưa cuộn, trắng * lúc đã cuộn) mà không cần đổi màu icon theo trạng thái (--cobalt là màu * DUY NHẤT đạt 3:1 trên cả hai nền, xem docblock gốc đã xoá). Bỏ khung thì * phải đổi màu icon theo `.scrolled` để bù lại — ĐÚNG khuôn `.nav-links a`/ * `.logo`/`.btn-primary` đã dùng ngay phía trên (mục 1), không phải một cơ * chế mới. * * Đo lại (không đoán): trắng #FFFFFF trên --navy #001BB7 = 11.41:1; * --cobalt-ink #3366CC trên --white #FFFFFF = 5.36:1. Cả hai vượt xa 3:1 * của WCAG 1.4.11 cho biên dạng thành phần giao diện — nên chỗ tương phản * mất đi từ việc bỏ khung, MÀU ICON tự nó bù đủ, không cần khung. */ .nav-search{ position:relative; display:flex; align-items:center; } /* --- Nút kính lúp -------------------------------------------------- */ .nav-search-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:0; border-radius:var(--r-sm); background:none; color:var(--cobalt-ink); cursor:pointer; transition:color var(--dur-micro) ease; } /* Nền navy lúc chưa cuộn — icon trắng, cùng lý lẽ .nav-links a/.logo ở mục 1. */ .site-header:not(.scrolled) .nav-search-toggle{ color:var(--white); } /* * KHÔNG còn :hover đổi nền — feedback khách đợt 1, STT 1: "kính lúp tìm * kiếm không để button có hiệu ứng blur khi rê chuột vào". Vẫn giữ * :focus-visible đổi nền, vì bỏ luôn dấu hiệu focus là chặn người dùng * điều hướng bằng bàn phím — khác hẳn việc chỉ bỏ hover chuột. */ .nav-search-toggle:focus-visible{ background:var(--bg-alt); } /* --- Nền mờ -------------------------------------------------------- */ /* * KHÔNG khai `display` ở rule trần — luật `hidden` ở đầu file. UA có sẵn * `[hidden]{display:none}` và một `display:block` ở đây làm nền mờ phủ kín * trang mọi lúc. */ .nav-search-backdrop{ position:fixed; inset:0; z-index:calc(var(--z-fab) + 2); background:rgba(0, 27, 183, .35); } .nav-search-backdrop:not([hidden]){ display:block; } /* --- Vỏ popup ------------------------------------------------------ */ /* * `visibility:hidden`, không phải `opacity:0` một mình. Một vùng * aria-hidden="true" mà vẫn Tab vào được là lỗi a11y thật; opacity và * transform không lấy phần tử ra khỏi thứ tự tab, chỉ visibility và display * mới làm được. Cùng lý lẽ đã ghi cho ngăn kéo ở mục 7. * * CSS bám vào `aria-hidden` của CHÍNH vỏ chứ không bám vào nút: nút và vỏ là * anh em qua một nền mờ nên bộ nối `+` không tới được, và quan trọng hơn — * nếu JS quên đảo `aria-hidden` thì popup KHÔNG mở, tức lỗi lộ ra ngay. */ /* * CANH GIỮA MÀN HÌNH, không treo dưới nút kính lúp. * * Trước 03/09/2026: `position:absolute; top:100%; right:0` — popup dính vào * nút, nên nó luôn nằm sát mép trên bên phải. Khách đang đọc giữa trang mà mở * tìm kiếm thì mắt phải nhảy lên góc trên. Nay là hộp thoại canh giữa cả hai * chiều, đúng chỗ mắt đang nhìn. * * `position:fixed` BÁM VIEWPORT được ở đây vì `.site-header` chỉ có * position:sticky + z-index. Sticky KHÔNG tạo containing block cho phần tử * fixed — chỉ transform/filter/perspective/will-change/contain mới tạo. Nếu * ngày nào header có thêm một trong số đó thì popup sẽ bám header thay vì * viewport và rơi trở lại đúng lỗi này. * * Ngữ cảnh xếp chồng thì KHÔNG đổi: popup vẫn nằm trong ngữ cảnh của header, * nên hai số z-index vẫn theo đúng thang đã ghi ở mục 6. */ .nav-search-pop{ position:fixed; /* * top:36% (SUA LAN 2, 03/09/2026: khach xem lai anh chup, van thay popup * o thap, yeu cau "cho len top 1 chut" tiep). Lan dau da doi 50% -> 42%; * 42% van con thap so voi anh khach gui lan nay (input nam duoi phan giua * man hinh, gan sat khoi filter/danh sach san pham). Doi tiep xuong 36%. * * VAN GIU BEN DUOI header (~64-90px o mobile): voi chieu cao popup ~80px * va cong thuc can giua quanh diem top (xem transform ngay duoi), mep tren * thuc te o 36% cua 812px la ~252px — con cach header hon 160px, khong * dung cham. */ top:36%; left:50%; z-index:calc(var(--z-fab) + 3); width:min(420px, 92vw); padding:var(--sp-4); border-radius:var(--r-card); background:var(--white); box-shadow:var(--sh-3); visibility:hidden; opacity:0; /* Canh giữa + trượt lên 6px lúc đóng; hai phép dịch phải đi CÙNG một thuộc tính transform, không tách được. */ transform:translate(-50%, calc(-50% - 6px)); /* -50% la CAN GIUA QUANH diem top:42%, khong phai giua man hinh */ /* * `visibility 0s linear var(--dur-state)` — ĐỘ TRỄ, KHÔNG PHẢI THỜI LƯỢNG. * Và nó là bản vá cho một lỗi ĐÃ ĐO ĐƯỢC, không phải một mẹo chép về. * * Bản đầu viết `visibility var(--dur-state) var(--ease)`, tức cho visibility * chạy qua transition ở CẢ HAI chiều. Đo trên trình duyệt thật: ngay sau * khi JS đặt aria-hidden="false", getComputedStyle(pop).visibility vẫn trả * về `hidden` — hàm timing ở thời điểm 0 cho ra 0, và với thuộc tính rời * rạc thì 0 ánh xạ về giá trị đầu. Hệ quả: lời gọi focus() đồng bộ ngay * sau đó bị trình duyệt TỪ CHỐI vì phần tử đang visibility:hidden, và * activeElement rơi về . Người dùng bàn phím mở popup rồi mất dấu * tiêu điểm, và bẫy Tab không có gì để giam. * * Cách viết này tách hai chiều ra: * - MỞ (rule [aria-hidden="false"] bên dưới): độ trễ 0 → visibility đổi * tức thì → focus() ăn ngay. * - ĐÓNG (rule này): độ trễ đúng bằng thời lượng → phần tử ở lại nhìn * thấy được cho tới khi opacity mờ hết, rồi mới thật sự biến mất. * * KHÔNG bỏ hẳn visibility khỏi transition: bỏ thì popup tắt phụt lúc đóng, * và opacity mờ dần trở thành đồ trang trí không ai thấy. */ transition:opacity var(--dur-state) var(--ease), transform var(--dur-state) var(--ease), visibility 0s linear var(--dur-state); } .nav-search-pop[aria-hidden="false"]{ visibility:visible; opacity:1; transform:translate(-50%, -50%); transition:opacity var(--dur-state) var(--ease), transform var(--dur-state) var(--ease), visibility 0s linear 0s; } .nav-search-row{ display:flex; align-items:stretch; gap:var(--sp-2); } .nav-search-label{ display:block; flex:1 1 auto; } .nav-search-input{ width:100%; padding:9px var(--sp-3); border-style:solid; border-width:1px; border-color:var(--border); border-radius:var(--r-input); background:var(--white); font-family:var(--font-body); font-size:14px; line-height:1.2; color:var(--text); } .nav-search-go{ display:inline-flex; align-items:center; justify-content:center; width:38px; flex:0 0 auto; padding:0; border:0; border-radius:var(--r-input); background:var(--cobalt-ink); color:var(--white); cursor:pointer; } .nav-search-go:hover{ background:var(--navy); } .nav-search-close{ display:inline-flex; align-items:center; justify-content:center; width:38px; flex:0 0 auto; padding:0; border:0; border-radius:var(--r-input); background:none; color:var(--text); cursor:pointer; } .nav-search-close:hover{ background:var(--bg-alt); color:var(--navy); } /* --- Vùng kết quả -------------------------------------------------- */ .nav-search-results{ max-height:min(60vh, 420px); overflow-y:auto; } /* * Không có kết quả thì KHÔNG chừa khoảng trắng. `:empty` là trạng thái duy * nhất đúng ở đây: lúc chưa gõ gì, và ở trình duyệt không có JS — nơi vùng * này vĩnh viễn rỗng. */ .nav-search-results:empty{ margin:0; } .nav-search-results:not(:empty){ margin-top:var(--sp-4); } .nav-search-group + .nav-search-group{ margin-top:var(--sp-4); } .nav-search-group-title{ margin:0 0 var(--sp-2); font-family:var(--font-head); font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase; /* #6B7280 trên --white = 4.83:1 — đạt AA cho chữ nhỏ. */ color:var(--text-muted); } .nav-search-list{ margin:0; padding:0; list-style:none; } .nav-search-list > li{ margin:0; } .nav-search-item{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-2); border-radius:var(--r-sm); font-size:14.5px; /* Xem ghi chú về stylesheet nội tuyến của core ở đầu mục. */ color:var(--text); } .nav-search-item:hover{ background:var(--bg-alt); color:var(--navy); } .nav-search-thumb{ flex:0 0 auto; width:40px; height:40px; border-radius:var(--r-sm); background:var(--img-bg); object-fit:cover; } .nav-search-title{ min-width:0; } .nav-search-empty{ margin:0; font-size:14px; color:var(--text-muted); } /* --- Không có JS thì popup KHÔNG được biến mất --------------------- */ /* * `html.vp-js` do một dòng script nội tuyến ở đặt (inc/enqueue.php). * Nó KHÔNG phải class trạng thái song song với aria-expanded: nó không bao * giờ đổi giá trị và không nói gì về đóng/mở. * * Không có nó — tức trình duyệt không chạy JS — thì popup nằm NGAY TRONG HÀNG * như một ô tìm kiếm thường trực, và nút kính lúp (thứ chỉ có tác dụng khi có * JS) biến đi. Người dùng gõ và bấm Enter, ra đúng trang kết quả của WordPress. * * Nếu bỏ khối này thì lời hứa "không JS vẫn tìm được" chỉ còn đúng trên giấy: *
vẫn nằm trong HTML nhưng ô nhập bị visibility:hidden và không có gì * mở nó ra. * * Độ ưu tiên: `html:not(.vp-js) .nav-search-pop` là (0,2,1), thắng cả * `.nav-search-pop` (0,1,0) lẫn `.nav-search-pop[aria-hidden="false"]` (0,2,0) * — không phụ thuộc thứ tự nguồn. */ html:not(.vp-js) .nav-search-toggle{ display:none; } html:not(.vp-js) .nav-search-close{ display:none; } html:not(.vp-js) .nav-search-pop{ position:static; width:auto; padding:0; border-radius:0; background:none; box-shadow:none; visibility:visible; opacity:1; transform:none; } html:not(.vp-js) .nav-search-input{ width:150px; max-width:26vw; border-width:0; } /* ============================================================ 2. Menu chính ============================================================ */ .nav-links{ display:flex; align-items:center; gap:var(--sp-5); margin:0; padding:0; list-style:none; } /* * Mục mega dùng `position:static` để panel toàn chiều rộng bám vào .nav; * mục dropdown dùng `position:relative` để panel hẹp bám vào chính nó. Hai * chế độ định vị khác nhau, nên KHÔNG đặt position chung lên `.nav-links > li`. */ .nav-links > li{ margin:0; } .vp-nav-item--mega{ position:static; } .vp-nav-item--dropdown{ position:relative; } /* * text-transform:uppercase + letter-spacing — feedback khách đợt 1, STT 1: * "chữ viết hoa", đã chốt VIẾT HOA TOÀN BỘ menu. Làm ở CSS (lớp trình bày), * KHÔNG sửa nhãn menu trong CSDL — nội dung gốc "Trang chủ" vẫn giữ nguyên, * chỉ hiển thị hoa. letter-spacing nhẹ vì chữ hoa liền nhau (mặc định 0) khó * đọc hơn chữ thường ở cùng cỡ. */ .nav-links > li > a, .vp-nav-trigger{ display:inline-flex; align-items:center; gap:6px; padding:10px 0; border:0; background:none; font-family:var(--font-body); font-weight:600; font-size:15px; line-height:1.2; color:var(--text); text-decoration:none; text-transform:uppercase; letter-spacing:.02em; cursor:pointer; } .nav-links > li > a:hover, .vp-nav-trigger:hover, .vp-nav-trigger[aria-expanded="true"]{ color:var(--navy); } .nav-links > li > a[aria-current="page"]{ color:var(--navy); } .caret{ display:inline-flex; transition:transform var(--dur-micro) var(--ease); } .vp-nav-trigger[aria-expanded="true"] .caret{ transform:rotate(180deg); } /* ============================================================ 3. Panel mega và dropdown ============================================================ Trạng thái nằm trên NÚT (`aria-expanded`), còn thứ đổi hình là PANEL bên cạnh — nên bộ nối anh em `+` là bắt buộc. Hợp đồng Task 3 cấm đặt `hidden` lên .vp-panel, và ở đây cũng cố ý KHÔNG dùng `display:none`: display giết transition, và tệ hơn, nó làm rule mở phía dưới nói "visible" trong khi mắt không thấy gì. ============================================================ */ .vp-panel{ position:absolute; top:100%; z-index:var(--z-mega); margin:0; padding:0; list-style:none; background:var(--white); box-shadow:var(--sh-3); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity var(--dur-state) var(--ease), transform var(--dur-state) var(--ease), visibility var(--dur-state) var(--ease); } .vp-nav-trigger[aria-expanded="true"] + .vp-panel{ opacity:1; visibility:visible; transform:translateY(0); } .vp-mega-panel{ left:var(--wrap-x); right:var(--wrap-x); border-radius:0 0 var(--r-lg) var(--r-lg); border-top:1px solid var(--border); } .vp-dd-panel{ left:0; z-index:var(--z-dd); min-width:240px; padding:var(--sp-2) 0; border-radius:var(--r-sm); } .vp-dd-panel > li{ margin:0; } .vp-dd-panel a{ display:block; padding:10px var(--sp-4); font-size:14.5px; color:var(--text); text-decoration:none; } .vp-dd-panel a:hover{ background:var(--bg-alt); color:var(--navy); } /* ============================================================ 4. Ruột panel mega — tablist dọc + lưới danh mục ============================================================ */ .mega-inner{ display:grid; grid-template-columns:240px 1fr; gap:var(--sp-5); padding:var(--sp-5); } .mega-sidebar{ display:flex; flex-direction:column; gap:2px; border-right:1px solid var(--border); padding-right:var(--sp-4); } /* * CỘT TRÁI — TRẠNG THÁI CHỌN PHẢI ĐỌC ĐƯỢC, KHÔNG PHẢI "ĐẬM HƠN MỘT CHÚT". * * Bản trước dùng `background:var(--bg-alt)` cho CẢ `:hover` lẫn * `[aria-selected="true"]`. Hai trạng thái khác nhau về ý nghĩa mà giống hệt * nhau về mắt: rê chuột qua ba tab là ba tab cùng sáng lên như nhau, và người * dùng không còn cách nào biết lưới đang hiện thuộc tab nào. Mockup * (~/vp-mockups/trang-chu.html, `.mega-cat.active`) dùng NỀN ĐẶC --navy với * chữ trắng. Số đo: --white trên --navy = 11.41:1; hover --navy trên * --cobalt-light = 10.00:1; lúc nghỉ --text trên --white = 17.40:1. * * `--cobalt-light` chứ không phải `--bg-alt` dù hôm nay hai token bằng nhau * (`--cobalt-light: var(--bg-alt)`): mockup gọi màu này là "cobalt nhạt" ở * đúng ngữ cảnh nhấn tương tác, còn --bg-alt là nền khối chung. Ngày ai đó * tách hai token, chỗ này phải đi theo cái đúng nghĩa. */ .mega-cat{ display:flex; align-items:center; width:100%; border:0; background:none; border-radius:var(--r-btn); padding:11px var(--sp-3); font-family:var(--font-body); font-weight:600; font-size:14.5px; text-align:left; color:var(--text); cursor:pointer; transition:background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); } .mega-cat:hover{ background:var(--cobalt-light); color:var(--navy); } /* * THỨ TỰ HAI DÒNG NÀY LÀ MỘT QUYẾT ĐỊNH, KHÔNG PHẢI NGẪU NHIÊN. * * `.mega-cat:hover` và `.mega-cat[aria-selected="true"]` đều là (0,2,0) — hoà * độ ưu tiên, nên THỨ TỰ NGUỒN quyết. Đảo hai dòng thì rê chuột lên tab đang * chọn sẽ làm nó NHẠT ĐI, và người dùng đọc ra "vừa bỏ chọn". Chốt bằng khẳng * định ở tests/test-css-cascade.php mục 13.1, hồ sơ "đang chọn VÀ đang hover". */ .mega-cat[aria-selected="true"]{ background:var(--navy); color:var(--white); } /* * RULE `.mega-cat-row` / `.mega-cat-goto` ĐÃ XOÁ — SỬA LẦN 3 (feedback * khách, ngay sau lần 2). Icon mũi tên riêng cho "đi thẳng tới trang" bị bỏ, * đổi sang RÊ CHUỘT (hover/focus) trên chính `.mega-cat` để xem trước — click * giờ điều hướng thẳng, không cần một phần tử thứ hai nữa. Markup sinh ra * hai class này đã gỡ khỏi mega-menu.php — giữ rule lại là để CSS chết trong * repo, đúng loại lỗi mà `.footer-more`/`.footer-legal`/`.mega-subitem--all` * đã dọn trước đó. */ /* * `:not([hidden])` chứ không phải `.mega-subgrid` trần. * * Hợp đồng Task 3: tabpanel không được chọn mang thuộc tính `hidden`, và * trạng thái nhìn thấy phải khớp với `aria-selected`. Một dòng * `.mega-subgrid{display:grid}` sẽ đè `[hidden]{display:none}` của UA và * làm MỌI tabpanel hiện cùng lúc, trong khi aria-selected vẫn nói chỉ có * một cái đang chọn. CSS không được phép gỡ `hidden`. */ .mega-subgrid:not([hidden]){ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-3); } /* * DANH MỤC CON LÀ MỘT THẺ CÓ VIỀN, KHÔNG PHẢI MỘT DÒNG DANH SÁCH. * * Viền là thứ tạo ra lưới trong mockup; bỏ viền đi thì sáu mục trôi thành một * khối chữ và ô icon bên trái mất chỗ dựa. Hover đổi MÀU VIỀN sang --cobalt * (3.02:1 trên trắng, đạt WCAG 1.4.11 cho đường bao thành phần) chứ không chỉ * đổi nền: đổi nền một mình thì trên màn hình kém tương phản gần như không * thấy gì. */ .mega-subitem{ display:flex; align-items:center; gap:var(--sp-3); padding:12px var(--sp-3); border:1px solid var(--border); border-radius:var(--r-sm); font-size:13.5px; font-weight:600; color:var(--text); text-decoration:none; transition:border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); } .mega-subitem:hover{ border-color:var(--cobalt); background:var(--cobalt-light); color:var(--navy); } /* * Ô ICON. Mockup vẽ một hộp bo góc 34×34 nền --cobalt-light; bản trước chỉ có * một chấm tròn rỗng, và đó là chỗ khách chụp lại đầu tiên. * * `flex-shrink:0` là bắt buộc chứ không phải trang trí: tên danh mục dài * ("Túi nilon tự hủy sinh học") sẽ bóp ô icon thành một vệt dọc nếu thiếu nó. */ .sub-ico{ display:flex; align-items:center; justify-content:center; flex-shrink:0; /* 34 -> 40px (feedback khách 03/09/2026: icon nhìn hơi nhỏ). */ width:40px; height:40px; border-radius:var(--r-btn); background:var(--cobalt-light); color:var(--navy); } /* * RULE `.mega-subitem--all` / `.mega-subitem--all .sub-ico` ĐÃ XOÁ — * feedback khách: "bỏ phần này [mục 'Xem tất cả'], chỉ hiện thị danh mục * con". Mục đó từng là đường vào danh mục CHA (vì cột trái chỉ là NÚT, xem * docblock đầu template-parts/header/mega-menu.php), nay cột trái tự nó đã * là liên kết nên không còn cần đường vòng đó nữa. Markup sinh ra hai class * này đã gỡ khỏi mega-menu.php — giữ rule lại là để CSS chết trong repo, * đúng loại lỗi mà `.footer-more`/`.footer-legal` đã dọn trước đó. */ /* * KHỐI SẢN PHẨM TIÊU BIỂU. Đường kẻ trên là thứ tách nó khỏi lưới danh mục; * thiếu nó thì hai khối dính vào nhau và hàng ảnh đọc ra như hàng danh mục * thứ tư. */ .mega-bestseller{ margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--border); } .mega-bestseller-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); } .mega-bestseller-head h4{ font-family:var(--font-head); font-size:14.5px; color:var(--navy); } /* * LIÊN KẾT "Xem tất cả →" PHẢI CÓ RULE MÀU CẤP CLASS. * * Không phải để đẹp. WordPress core in một stylesheet NỘI TUYẾN * `a:where(:not(.wp-element-button)){color:var(--wp--preset--color--navy)}` ở * (0,0,1); global.css chặn nó bằng `body a:where(...)` ở (0,0,2) với * `color:inherit`. Nghĩa là một link không có rule riêng ở đây sẽ KẾ THỪA màu * của khối cha — hôm nay là --text, tức không còn dấu hiệu nào cho biết nó là * link. Bộ giải cascade của bộ test KHÔNG đọc được stylesheet nội tuyến đó, * nên chỗ này đã được kiểm thêm trên trình duyệt thật. * * --cobalt-ink chứ không phải --cobalt của mockup: --cobalt trên nền trắng chỉ * đạt 3.02:1, trượt AA cho chữ 12.5px. --cobalt-ink đạt 5.37:1. */ .mega-bestseller-head a{ font-size:12.5px; font-weight:700; color:var(--cobalt-ink); text-decoration:none; } .mega-products{ display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--gap-card); } /* * THẺ SẢN PHẨM: BO GÓC THUỘC VỀ HỘP CẮT, KHÔNG THUỘC THẺ NGOÀI. * * Cùng bài học với ô bento (commit 10736a3): `.mega-product` KHÔNG mang * border-radius. Hộp bo góc và hộp cắt phải là CÙNG MỘT hộp, và hộp cắt ở đây * là `.mp-img` — nơi có `overflow:hidden`. Đặt bo góc lên thẻ ngoài rồi cắt ở * trong là công thức cho ảnh góc VUÔNG nằm trong một thẻ BO TRÒN. */ .mega-product{ display:flex; flex-direction:column; text-decoration:none; color:var(--text); } /* * `aspect-ratio` giữ chiều cao ô ổn định TRƯỚC KHI ảnh tải xong và kể cả khi * sản phẩm chưa có ảnh nào. Thiếu nó thì hàng năm ô cao 0px lúc chưa có ảnh — * đúng cái mà khách gọi là "danh sách trống". */ /* * SỬA 05/09/2026 (khách: "chỉnh lại nhóm khoanh đỏ cho đẹp hơn"). ĐO TRƯỚC KHI * SỬA: năm khung đều nhau 142x127 nhưng ảnh để `object-fit:cover` — ảnh sản * phẩm là bao bì chụp trên nền trắng, tỉ lệ và khoảng đệm mỗi tấm một khác, nên * cover phóng theo cạnh ngắn rồi CẮT: gói đứng mất phần trên-dưới, gói ngang * mất hai bên, và sản phẩm hiện to nhỏ không đều dù khung bằng nhau — đúng cảm * giác lệch mà khách khoanh đỏ. * * Khung VUÔNG + ảnh `contain` + đệm 10px: mỗi sản phẩm hiện trọn vẹn trong cùng * một hộp, năm ô đọc thành một hàng đều. Nền trắng + viền --border thay nền xám * đặc: panel mega vốn nền trắng, năm hộp xám làm dải này nặng hơn cả phần danh * mục ở trên; viền mảnh đủ tách hộp mà vẫn nhẹ. */ .mp-img{ display:block; position:relative; width:100%; aspect-ratio:1 / 1; margin-bottom:var(--sp-2); border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; background:#fff; transition:border-color .2s ease; } /* * `height:100%` PHẢI khai tường minh. global.css có * `:where(img, svg, video, canvas, iframe){ height:auto }` ở (0,0,0); ảnh 3:2 * trong một ô 1:0.9 sẽ tự cao theo tỉ lệ của nó và để lại một dải nền --img-bg * dưới đáy, hoặc thò ra ngoài. `object-fit:cover` là thứ cắt phần thừa. */ .mp-img img{ display:block; width:100%; height:100%; max-width:100%; padding:10px; object-fit:contain; } .mega-product:hover .mp-img{ border-color:var(--cobalt); } /* * DẠNG DỰ PHÒNG. Cùng khuôn `.bt-media-fallback` của lưới bento: hình vẽ * aria-hidden phủ kín ô, không phải khoảng trắng. Màu --cobalt-ink chứ không * phải --cobalt: trên nền --img-bg thì --cobalt chỉ đạt 2.87:1, trượt ngưỡng * 3:1 của WCAG 1.4.11; --cobalt-ink đạt 4.96:1. */ .mp-img-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--cobalt-ink); } /* *
tên sản phẩm. global.css khai `h1, h2, h3, h4, h5{ color:var(--navy); * font-weight:800; font-family:var(--font-head) }` THẲNG lên thẻ ở (0,0,1), và * khai báo trực tiếp thắng kế thừa bất kể độ ưu tiên. Không có rule cấp class * thì tên sản phẩm ra navy đậm cỡ tiêu đề, nằm ngay trên dòng "Liên hệ" cũng * navy — hai dòng cùng màu cùng độ đậm, không còn thứ bậc nào. Đúng cơ chế đã * làm tiêu đề cột chân trang gần như vô hình. * * `min-height` giữ đáy các thẻ thẳng hàng khi tên dài ngắn khác nhau; mockup * đặt 34px, đủ cho hai dòng ở cỡ 12.5px. */ .mega-product h5{ font-family:var(--font-body); font-size:12.5px; font-weight:600; line-height:1.4; min-height:34px; margin-bottom:var(--sp-1); color:var(--text); /* Tên dài tràn 3 dòng thì năm ô lệch chân nhau — kẹp 2 dòng, phần thừa cắt bằng "…". */ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .mega-product:hover h5{ color:var(--cobalt-ink); } .mp-contact{ display:block; font-size:12px; font-weight:700; color:var(--navy); } .vp-mega-empty{ padding:var(--sp-5); color:var(--text-muted); } /* ============================================================ 5. Nút hamburger ============================================================ Ẩn ở desktop, hiện từ mốc 900px trở xuống. Trước Task 5 không có dòng nào ẩn nó, nên nút hiện ngay cạnh menu đầy đủ trên màn rộng. ============================================================ */ .vp-drawer-toggle{ display:none; align-items:center; justify-content:center; width:44px; height:44px; margin-left:auto; padding:0; border:0; border-radius:var(--r-sm); background:none; color:var(--navy); cursor:pointer; } .vp-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:22px; height:16px; } .vp-burger > span{ display:block; height:2px; width:100%; border-radius:2px; background:currentColor; transition:transform var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease); } /* Ba gạch thành chữ X. Trạng thái vẫn đọc từ aria-expanded, không có class. */ .vp-drawer-toggle[aria-expanded="true"] .vp-burger > span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .vp-drawer-toggle[aria-expanded="true"] .vp-burger > span:nth-child(2){ opacity:0; } .vp-drawer-toggle[aria-expanded="true"] .vp-burger > span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ============================================================ 6. Nền mờ ============================================================ KHÔNG khai `display` ở rule trần. Xem luật về `hidden` ở đầu file. THỨ TỰ VẼ Ở ĐÂY KHÔNG DO SỐ z-index QUYẾT ĐỊNH — DO NGỮ CẢNH XẾP CHỒNG. Đây là chỗ bản sửa đầu tiên đã sai, và sai theo đúng kiểu mà cả bộ test này sinh ra để chống: đổi số rồi tưởng là xong. TRIỆU CHỨNG: ở 375px, thanh nút liên hệ nổi vẽ ĐÈ lên ngăn kéo đang mở. Đo trên trình duyệt thật: ngăn kéo và thanh FAB chồng nhau 60px đáy, và elementFromPoint() trong vùng đó trả về phần tử của .vp-fab. CHẨN ĐOÁN SAI LẦN ĐẦU: "hai bên hoà z-index, nâng ngăn kéo lên là xong." Nâng ngăn kéo lên 103 và nền mờ lên 102 — ĐO LẠI: KHÔNG ĐỔI GÌ. 630/630 điểm trong hình chữ nhật thanh FAB vẫn trả về phần tử FAB. NGUYÊN NHÂN THẬT, đo bằng cách duyệt chuỗi tổ tiên: .vp-drawer và .vp-drawer-backdrop nằm TRONG header.site-header, mà .site-header là position:sticky + z-index:var(--z-header) → nó TẠO MỘT NGỮ CẢNH XẾP CHỒNG. Mọi z-index bên trong chỉ xếp thứ tự với nhau; so với thế giới bên ngoài thì cả cụm mang đúng MỘT giá trị: 50. .vp-fab là con trực tiếp của → ngữ cảnh GỐC. Phép so thật sự quyết định là .site-header (50) với .vp-fab (100). 100 > 50, nên FAB ở trên — bất kể ngăn kéo mang số nào. Cho ngăn kéo z-index 9999 cũng vô hiệu. BẢN SỬA: hạ .vp-fab xuống DƯỚI .site-header. Xem mục 12. THANG SAU KHI SỬA — hai tầng, và phải đọc theo hai tầng: Ngữ cảnh GỐC (thứ tự này mới quyết định việc vẽ): calc(var(--z-header) - 1) = 49 .vp-fab var(--z-header) = 50 .site-header ← chứa ngăn kéo + nền mờ calc(var(--z-fab) + 1) = 101 .skip-link (global.css mục 10) BÊN TRONG .site-header (chỉ có ý nghĩa tương đối với nhau): calc(var(--z-fab) + 2) .vp-drawer-backdrop calc(var(--z-fab) + 3) .vp-drawer Hai bậc trong header vẫn dẫn xuất từ --z-fab và vẫn KHÔNG hoà nhau: nền mờ phải nằm dưới ngăn kéo, và hoà thì thứ tự DOM phân giải. ============================================================ */ .vp-drawer-backdrop{ position:fixed; inset:0; z-index:calc(var(--z-fab) + 2); background:rgba(0, 27, 183, .35); } .vp-drawer-backdrop:not([hidden]){ display:block; } /* ============================================================ 7. Ngăn kéo ============================================================ HỢP ĐỒNG TASK 4: `aria-expanded` trên nút là nguồn sự thật, và `aria-hidden` trên vỏ đi kèm nó. CSS ở đây bám vào `aria-hidden` của CHÍNH vỏ chứ không bám vào nút, vì hai lý do: vỏ và nút là anh em qua một nền mờ nên bộ nối `+` không tới được, và quan trọng hơn — nếu JS quên đảo `aria-hidden` thì ngăn kéo sẽ KHÔNG mở, tức lỗi lộ ra ngay thay vì để lại một vùng nhìn thấy được mà trình đọc màn hình bị cấm đọc. `visibility:hidden`, không phải `opacity:0`. Một vùng aria-hidden mà vẫn Tab vào được là lỗi a11y thật; opacity và transform không lấy phần tử ra khỏi thứ tự tab, chỉ visibility và display mới làm được. ============================================================ */ .vp-drawer{ position:fixed; top:0; right:0; bottom:0; z-index:calc(var(--z-fab) + 3); display:flex; flex-direction:column; width:min(360px, 88vw); max-width:100%; background:var(--white); box-shadow:var(--sh-4); overflow-y:auto; overscroll-behavior:contain; visibility:hidden; transform:translateX(100%); transition:transform var(--dur-state) var(--ease), visibility var(--dur-state) var(--ease); } .vp-drawer[aria-hidden="false"]{ visibility:visible; transform:translateX(0); } .vp-drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border); } .vp-drawer-title{ font-family:var(--font-head); font-weight:800; font-size:16px; color:var(--navy); } .vp-drawer-close{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:0; border-radius:var(--r-sm); background:none; color:var(--text); cursor:pointer; } .vp-drawer-close:hover{ background:var(--bg-alt); color:var(--navy); } .vp-drawer-nav{ padding:var(--sp-3) 0; } .vp-drawer-list{ margin:0; padding:0; list-style:none; } /* * SỬA — khách: "thiết kế UI UX cho dễ nhìn xem". Trước đây SÁU mục cấp 1 * (Trang chủ/Giới thiệu/Sản phẩm/Dịch vụ/Dự án/Liên hệ) không có gì tách * bạch chúng — không viền, không khoảng cách rõ, ba mục có submenu co giãn * chiều cao khác ba mục còn lại càng làm danh sách khó quét mắt. Thêm một * đường kẻ mảnh GIỮA các mục cấp 1 (không phải quanh mỗi mục — viền quanh * từng mục lặp lại viền của submenu bên trong, rối mắt hơn là rõ ràng hơn). * `:last-child` bỏ viền dòng cuối, tránh viền kép với `.vp-drawer-nav` sát * dưới nó. */ .vp-drawer-list > li{ margin:0; border-bottom:1px solid var(--border); } .vp-drawer-list > li:last-child{ border-bottom:0; } /* * SỬA — khách: "đồng bộ lại font". `.vp-nav-trigger` ("GIỚI THIỆU"/"SẢN * PHẨM"/"DỊCH VỤ") kế thừa font-weight:600 + text-transform:uppercase + * letter-spacing:.02em từ rule DÙNG CHUNG với thanh nav desktop (mục 1: * `.nav-links > li > a, .vp-nav-trigger{...}`). Ba mục còn lại ("Trang chủ"/ * "Dự án"/"Liên hệ") là THƯỜNG, không khớp selector đó, nên rơi về chữ * thường/không hoa — SÁU mục cùng cấp trông như hai kiểu khác nhau, đúng * điều khách chụp lại. Khai tường minh CẢ BA thuộc tính đó ở đây cho `> li > * a` (với `.vp-nav-trigger` là lặp lại vô hại, giá trị giống hệt rule đã có) * để sáu mục cấp 1 luôn cùng một kiểu chữ, không phụ thuộc chúng là hay *