/* ============================================================================= 20-header.css — header, menu, sticky, menu mobile off-canvas. Luật III.4.1 ⛔ HIỆN CỐ Ý ĐỂ TRỐNG. Header dựng bằng Flatsome HEADER BUILDER, không phải UX Builder (kế hoạch 4.1). Bố cục 3 vùng, sticky, chiều cao, màu nền/chữ, kiểu gạch chân mục đang xem (Nav Style) đều nằm trong Customizer. ⚠ Bẫy đã ghi trong luật, tra render THẬT trước khi viết selector: chữ menu nằm sâu trong span.ux-menu-link__text / .text-inner (III.4.3-5, bài học II.H). ⚠ Flatsome tự viết hoa chữ menu bằng text-transform — mockup ĐANG viết hoa nên nhiều khả năng khớp sẵn, kiểm trước khi đè. ============================================================================= */ /* ----------------------------------------------------------------------------- [phục vụ] phần tử: Header Builder — nút CTA "LIÊN HỆ TƯ VẤN" ở khổ mobile [trang] mọi trang [mockup] mockup KHÔNG vẽ khổ mobile (kế hoạch 0.2-2) — quyết định tự khai [lý do vượt panel] Header Builder đặt được nút, nhưng KHÔNG có ô nào đặt cỡ chữ hay ngắt dòng riêng cho mobile. Ở 360px, nhãn 14 ký tự vỡ thành 4 dòng và tràn khỏi header — bộ soát mobile bắt được 18/08. -------------------------------------------------------------------------- */ @media (max-width: 549px) { .header-button-1 .button { white-space: nowrap; padding: 0 10px; font-size: 10px; letter-spacing: 0; /* ── Quyết định mobile 9.3 (4T chốt 19/08): GIỮ nhãn đủ chữ, chỉ nâng chiều cao 25px → 44px cho đủ ngưỡng đích chạm WCAG 2.5.8. Đo trước khi sửa: nút 119×25px, kết thúc cách mép phải 15px ⇒ còn chỗ theo chiều DỌC nhưng không còn chỗ theo chiều NGANG, nên không đụng font-size (rút chữ hay phóng chữ đều đẩy tràn). ⛔ Không dùng `height`: Flatsome canh chữ nút bằng line-height, đặt height cứng làm chữ lệch lên. inline-flex canh giữa mới đúng. */ min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .header-button-1 .button i { margin-right: 4px; font-size: 12px; } } /* ----------------------------------------------------------------------------- [phục vụ] phần tử: Header Builder — nút mở menu + menu off-canvas [trang] mọi trang, CHỈ khổ điện thoại [mockup] mockup không vẽ khổ mobile ⇒ tự thiết kế, ghi ở spec/quyet-dinh-mobile.md [audit] audit-mobile mục 5 · 6 [lý do vượt panel] Header Builder không có ô nào đặt kích thước vùng chạm của nút hamburger, cũng không có ô cỡ chữ cho menu off-canvas. Đo được hamburger 24×49px (rộng 24 ⇒ dưới ngưỡng WCAG 2.5.8 là 44) và chữ menu 13px (dưới 16px, khổ chữ tối thiểu dễ đọc trên điện thoại). -------------------------------------------------------------------------- */ @media (max-width: 549px) { /* Nút hamburger: nới vùng chạm mà KHÔNG phóng to hình vẽ. ⛔ Đừng tăng font-size của icon để lấy bề rộng — icon sẽ to lộ ra khỏi hàng header. Nới bằng padding + min-width mới đúng: vùng bấm rộng ra, nét vẽ giữ nguyên. */ /* ⚠ Selector đúng là [data-open] — nút này KHÔNG mang lớp `mobile-menu` như tên gọi quen thuộc; render thật chỉ có class="is-small" trong li.nav-icon. Bản đầu tôi nhắm .mobile-menu và rule im lặng không ăn. */ .nav-icon > a, a[data-open="#main-menu"] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Menu off-canvas: chữ 13px → 16px, hàng vẫn ≥44px. Đo trước: 12 link, chữ 13px, hàng cao 50px. */ #main-menu .ux-menu-link__link, #main-menu li > a { font-size: 16px; min-height: 44px; display: flex; align-items: center; } } /* ----------------------------------------------------------------------------- [phục vụ] phần tử: Header Builder | khối: logo và CTA trong drawer, khổ mobile [trang] mọi trang [mockup] mockup không vẽ khổ mobile — theo brief mobile 19/08 [lý do vượt panel] Bố cục header mobile đã đổi ở Customizer (logo trái · hamburger phải · bỏ CTA khỏi thanh). Hai thứ panel không với tới: (1) vùng trái rỗng làm Flatsome CANH GIỮA logo — không có ô nào buộc nó về trái; (2) CTA trong drawer là khối HTML thô, không có ô định kiểu. ⚠ Phần tử `html-2` của drawer đọc theme mod **`topbar_right`**, KHÔNG phải `html_2` như tên gọi gợi ý (structure-header.php dòng 126). Đặt nhầm khoá thì khối biến mất im lặng, không báo gì. -------------------------------------------------------------------------- */ @media (max-width: 849px) { /* Vùng trái của header mobile nay RỖNG (đã dồn hamburger sang phải) nhưng Flatsome vẫn cho nó co giãn ngang bằng vùng phải ⇒ logo bị đẩy vào GIỮA. Chặn vùng rỗng co giãn thì `margin-right:auto` của logo mới kéo được về sát trái. Đo 19/08: chỉ đặt margin-right:auto là chưa đủ, logo vẫn x=133. */ #header .flex-col.show-for-medium.flex-left { flex: 0 0 auto; } #header .flex-col.logo { margin-right: auto; text-align: left; } #header .flex-col.logo img { max-width: 140px; } /* 28/08 — 4T: bỏ ô tìm kiếm + mạng xã hội + newsletter + mục "-" (lỗi WooCommerce) khỏi drawer mobile, thay ô tìm kiếm bằng logo. Đã đổi ở ĐÚNG PANEL (Customizer → Header Mobile Menu → `mobile_sidebar`), không phải CSS — bốn phần tử kia gỡ thẳng khỏi danh sách, logo dùng lại chính shortcode `[logo]` qua ô nội dung HTML có sẵn (`top_right_text`). CSS ở đây chỉ lo phần panel không với tới: canh giữa + đệm cho khối logo. */ #main-menu .html_top_right_text { display: flex; justify-content: center; padding: 4px 0 8px; border-bottom: 1px solid rgba(7, 27, 70, .08); } #main-menu .html_top_right_text .ux-logo-link { padding: 6px 0 !important; } /* CTA cuối drawer — chữ/icon trước đó thừa kế màu xám nhạt của link menu (`#main-menu li > a`, mục 60/77 file này) dù nền đã là cam đặc — tương phản rất kém. Đặt `color:#fff` TƯỜNG MINH (đừng trông vào `.button. primary` mặc định — nó không thắng nổi luật link của sidebar). Đồng thời icon+chữ to hơn theo đúng yêu cầu 4T. */ #main-menu .tl-drawer-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: calc(100% - 20px); margin: 14px 10px; min-height: 50px; border-radius: 6px; color: #fff !important; } #main-menu .tl-drawer-cta i { color: #fff !important; font-size: 20px; } #main-menu .tl-drawer-cta span { color: #fff !important; font-size: 16px; font-weight: 700; } } /* ----------------------------------------------------------------------------- TAGLINE HEADER — khoá đúng 2 dòng như mockup (brief 27/08) [phục vụ] phần tử: Header (ngoài .page-wrapper) | khối: .logo-tagline [trang] mọi trang ⚠ 4T PHẢN HỒI 27/08 (vòng 4, trang Tôi có thể giúp gì): không giới hạn bề rộng, `.logo-tagline` vỡ thành 4 dòng cao ~72px thay vì 2 dòng ~28px như thiết kế — đủ cao để đè lên breadcrumb/nội dung ngay dưới header trên MỌI trang có section đầu trang sát header (không riêng gì một trang). Bản vá trước (18/08→27/08 vòng 3) chỉ khoanh trong `.tl-kien-thuc` vì lúc đó có phiên khác đang sửa dở đúng file này; nay không còn xung đột đó nên đặt luật CHUNG một lần, khỏi phải vá lặp lại ở từng trang mới. */ .logo-tagline { max-width: 230px; margin: 1px 0 0; padding: 0; font-size: 10.5px; font-style: normal; line-height: 1.25; color: #687083; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ----------------------------------------------------------------------------- [phục vụ] phần tử: Header Builder | khối: bóng đổ dưới thanh header [trang] mọi trang [mockup] ⚠ brief 19/08 trang Hành trình §4: "không shadow mạnh" [lý do vượt panel] Ô Customizer `box_shadow_header` chỉ có BẬT/TẮT, không có nấc đậm nhạt. Mặc định Flatsome là `1px 1px 10px rgba(0,0,0,.15)` — đủ đậm để đọc thành một khối nổi, mà thiết kế mới là editorial chứ không phải SaaS. Tắt hẳn thì header trắng nằm trên trang trắng mất ranh giới. ⇒ giữ bật, hạ xuống mức chỉ còn là một đường phân cách. Đây là ĐỘ ĐẬM, thứ panel không diễn đạt được. ⚠ Bóng nằm trên `.header-wrapper`, KHÔNG phải `#header` hay `.header-main` (đã đo: hai thẻ kia `box-shadow: none`). Đặt nhầm thẻ là rule chết âm thầm. -------------------------------------------------------------------------- */ .header-shadow .header-wrapper { box-shadow: 0 1px 3px rgba(7, 27, 70, .07); } /* ----------------------------------------------------------------------------- [phục vụ] phần tử: Header Builder | khối: bề ngang dải header [trang] mọi trang [mockup] ⚠ brief 19/08 KHÔNG kèm ảnh [lý do vượt panel] Header ăn `site_width` của Customizer — một số px cố định (1170). Thân trang nay nới dần theo khổ màn, nên nếu để nguyên thì LOGO LỆCH MÉP NỘI DUNG: đo 19/08 ở khổ 1600, header 1170 còn thân trang 1360 ⇒ lệch 95px mỗi bên. Cùng một biến thì hết lệch. ⚠ Thẻ mang dải là `.header-inner` (class `flex-row container`), KHÔNG phải `#header` hay `.header-main` — hai thẻ kia rộng hết màn hình. -------------------------------------------------------------------------- */ @media (min-width: 850px) { #header .header-inner { max-width: var(--tl-be-ngang); } } /* ----------------------------------------------------------------------------- [phục vụ] phần tử: Header Builder | khối: canh mép và chiều cao nút CTA [trang] mọi trang [mockup] ⚠ 4T báo "header chưa cân đối"; brief lần này KHÔNG kèm ảnh [lý do vượt panel] Customizer không có ô nào cho lề trong của dải header, cũng không có ô chiều cao tối thiểu cho nút CTA. ĐO 20/08 Ở 1366px — hai chỗ lệch, đều đo được: 1. LOGO VÀ NÚT THỤT VÀO 15px SO VỚI NỘI DUNG BÊN DƯỚI. Dải header và dải thân trang đã bằng nhau (cùng `--tl-be-ngang`, mục 24): cả hai bắt đầu ở x=61,5. Nhưng `.header-inner` còn mang thêm `padding: 0 15px` của lớp `.container` Flatsome, nên logo thật sự bắt đầu ở **x=76,5** còn H1 của trang ở **x=61,5**. ⇒ Nhìn dọc xuống, logo lệch phải 15px so với tiêu đề — đây chính là thứ đọc thành "chưa cân đối". Thân trang không có lề này vì margin âm của `.row` triệt tiêu đúng phần padding của `.col`. 2. NÚT CTA CAO 33px trong header 72px, trong khi logo cao 56,2px. Bên trái nặng 78% chiều cao thanh, bên phải chỉ 46% — lệch trọng lượng thị giác. Và 33px dưới hẳn chuẩn chạm 44px mà cả site đang dùng (QĐ-M5/M8, `audit-mobile` mục 6). ⛔ KHÔNG dùng `height` cứng: Flatsome canh chữ nút bằng `line-height`, đặt `height` làm chữ lệch lên (bài học QĐ-M3). -------------------------------------------------------------------------- */ @media (min-width: 850px) { #header .header-main .button { display: inline-flex; align-items: center; justify-content: center; } } /* ----------------------------------------------------------------------------- [phục vụ] phần tử: Header Builder | khối: khớp pixel ảnh mẫu 1440px (26/08, sửa lại phiên 3 sau khi 4T đối chiếu bản live ở màn 1908px) [trang] mọi trang [mockup] ảnh mẫu — 4T gửi số đo trực tiếp (không qua spec/mockup cũ, trang chủ đã đổi hướng thiết kế từ 19/08, mục 3 CLAUDE.md) ⛔ BẢN VÁ ĐẦU (mục 34→ đầu 35) SAI Ở HAI CHỖ, 4T bắt được bằng cách đối chiếu trên màn 1908px thật — cả hai đều là lỗi "chỉ đúng ở đúng 1440px": 1. `max-width:1440px` khiến header bị ĐÓNG KHUNG và CANH GIỮA trên màn rộng hơn 1440 (auto-margin hai bên) — ở 1908px logo tụt vào x≈289 thay vì "trải rộng gần full". Lề phải là TỈ LỆ theo viewport (~3,5%), không phải số px cộng thêm một trần cứng. ⇒ bỏ hẳn max-width, đổi padding sang %. 2. `#header .header-nav a { color:var(--tl-navy) }` chọn TRÚNG LUÔN thẻ `` của nút CTA — vì nút nằm trong CHÍNH ul.header-nav (xem lý do dưới), không phải cột riêng. Chữ/icon WhatsApp trắng bị nhuộm navy, đọc như "icon đen" trên nền cam. Selector đã hẹp lại chỉ chọn link MENU THẬT. ⛔ ĐẢO LẠI 27/08 — 4T gửi ảnh chụp bản live: logo và nút CTA "trải rộng gần full" (lề %, mục 1 ngay trên) hoá ra LỆCH hẳn với mép của khối nội dung bên dưới (H1 hero, "TÔI CÓ THỂ ĐỒNG HÀNH…"). Tức 4T ĐỔI Ý so với brief 26/08: không muốn header "trải rộng hơn thân trang" nữa — muốn header THẲNG HÀNG với thân trang, quay lại đúng công thức `--tl-be-ngang` mà mục 24 CLAUDE.md đã dùng cho CẢ header/thân/footer trước khi có brief 26/08. Đổi lại mục 1: bỏ lề %, dùng lại `max-width:var(--tl-be-ngang)` + `padding:0` (cùng công thức thân trang, `10-base.css`) — kỹ thuật grid-chồng-lớp ở mục 4 không đổi gì, chỉ đổi BỀ RỘNG của chính ô lưới đó (hẹp lại, canh giữa thay vì full). -------------------------------------------------------------------------- */ @media (min-width: 850px) { /* 1. Lề trong: KHỚP thân trang — cùng `--tl-be-ngang`, canh giữa bằng auto-margin (giống `.row` của page-wrapper). Không còn "trải rộng gần full" — đó là ý cũ của brief 26/08, đã bị 4T đảo ngược 27/08. */ #header .header-inner { max-width: var(--tl-be-ngang); padding-left: 0; padding-right: 0; } /* 2. Menu: TẤT CẢ mục đều navy đậm (mockup không phân biệt màu active/thường, chỉ phân biệt bằng gạch chân) — trước đây active gần đen, mục thường xám. ⚠ Selector PHẢI trừ `.header-button-1` (xem lỗi 2 ở đầu mục) — dùng `:not()` ngay trên `
  • ` cha, không phải trên ``, vì Flatsome không gắn class phân biệt nào lên chính thẻ `` của hai loại mục. */ #header .header-nav > li:not(.header-button-1) > a { color: var(--tl-navy); font-weight: 700; font-size: 14px; } /* Khoảng cách ngang giữa các mục: mặc định Flatsome chỉ 7px (dồn cụm chật) — 4T đối chiếu mẫu: menu phải "giãn", không phải một khối chữ sát nhau. Ghi đè margin-right của CHÍNH `
  • ` (không dùng `gap` trên ul, vì margin mặc định 7px sẽ CỘNG DỒN với gap thành hai lớp khoảng cách khác nhau). */ #header .header-nav > li:not(.header-button-1) { margin-right: 34px; } /* Gạch chân mục đang xem: đổi từ #CE4C09 (giá trị cũ, lệch mẫu) sang đúng --tl-cam đo được trên ảnh mẫu — gạch chỉ cần tương phản 3:1 (WCAG 1.4.11, không phải chữ), nên dùng màu thương hiệu thật, không dùng biến -chu. */ #header .header-nav.nav-line-bottom li.current-menu-item > a::before, #header .header-nav.nav-line-bottom li.current_page_item > a::before { background-color: var(--tl-cam); } /* 3. Nút CTA: mẫu cao ~36px, rộng ~160px tại 1440 (không phải 44 — đích chạm 44px chỉ bắt buộc cho khổ chạm/mobile, quy tắc riêng ≤549px phía trên, không đụng ở đây). Chữ/icon PHẢI trắng — khai tường minh, đừng trông vào kế thừa vì `.header-nav` cha đã tô navy ở mục 2. */ #header .header-main .button, #header .header-nav .header-button-1 .button { min-height: 40px; min-width: 176px; font-size: 13px; color: var(--tl-trang) !important; } #header .header-nav .header-button-1 .button i, #header .header-nav .header-button-1 .button span { color: var(--tl-trang); } /* 4. Vị trí menu: mẫu đặt CỤM MENU CĂN GIỮA TOÀN TRANG (không phải một khoảng cách cố định tính từ logo) — bản vá đầu dùng "cột đệm rộng cố định 246px" chỉ đúng ở ĐÚNG một bề ngang màn hình; ở 1908px cụm menu lại lệch hẳn sang phải vì logo/lề đã ăn hết phần bù đắp đó. ⇒ Đổi hẳn sang kỹ thuật GRID CHỒNG LỚP: logo và cột [menu+nút] cùng chiếm MỘT ô lưới duy nhất, rộng đúng bằng TOÀN BỘ header-inner (đã trừ lề mục 1) — logo tự neo trái trong ô đó (`justify-self:start`), còn trong cột kia, menu được `justify-content:center` giữa CHÍNH ô lưới ấy (= giữa toàn trang, không bị hẹp lại vì logo — logo là lớp CHỒNG LÊN, không chiếm chỗ của cột kia). Nút CTA tách khỏi dòng chảy bằng `position:absolute; right:0` NGAY TRONG cột đó nên luôn ghim đúng mép phải, không phụ thuộc bề rộng nav hay logo. ⚠ Nút CTA vẫn là `
  • ` NẰM TRONG chính `