/** * Layout CSS cho Thekoco theme (Homepage theo Figma design/koco.jpg + trang WooCommerce/blog). * Dùng token từ tokens.css, không hardcode giá trị màu/spacing. 3 breakpoint: desktop (mặc định, * >1024px), tablet (768-1024px), mobile (<768px) — xem docs/DesignSystem.md. */ /* CHG-016 (2026-08-24, Block 02 Hero Typography Fix): 'Georgia' (CHG-015) BỊ LOẠI — screenshot thật * (Product Owner gửi) cho thấy các ký tự tiếng Việt CÓ DẤU ĐÔI (circumflex + thanh điệu xếp chồng — * "ố/ồ/ổ/ỗ/ộ", "ấ/ầ/ẩ/ẫ/ậ", "ắ/ằ/ẳ/ẵ/ặ") render TÁCH RỜI dấu khỏi chữ (VD "Chống" → "Chô´ng"). Đã * xác minh KHÔNG PHẢI lỗi dữ liệu (`Normalizer::isNormalized($title, FORM_C)` = true cho cả 3 slide * — chuỗi NFC chuẩn, không phải chuỗi NFD bị tách dấu từ nguồn). Root cause THẬT: font hệ điều hành * 'Georgia' trên Windows THIẾU glyph precomposed cho đúng nhóm ký tự "dấu đôi" này (nhóm khó nhất * của Unicode Latin Extended Additional, U+1EA0–U+1EF9) — dù CÓ hỗ trợ dấu đơn (ả/ệ/ỗ trong "Bảo Vệ * Mỗi" hiển thị đúng, không lỗi). Không còn tin tưởng được "system serif = an toàn tiếng Việt" (giả * định sai ở CHG-015) — đổi sang web font TẢI THẬT (glyph nhúng sẵn trong file font, không phụ thuộc * OS/trình duyệt thay thế) để đảm bảo render giống nhau ở MỌI máy. 'Noto Serif' (Google) được chọn * vì được thiết kế RÕ RÀNG để phủ đủ toàn bộ khối Unicode đa ngôn ngữ (bản thân tên "Noto" = "No * tofu" — không thiếu glyph), xác nhận qua Google Fonts API (`fonts.googleapis.com/css? * family=Noto+Serif&subset=vietnamese` trả về @font-face hợp lệ, không lỗi subset). Dùng `@import` * (không phải Google Fonts CDN/npm package — không phải "dependency mới" theo nghĩa thư viện/build * tool, chỉ là 1 file .css/.woff2 tải qua URL, giống hệt cách hầu hết website tiếng Việt xử lý vấn * đề này) để giữ đúng scope "chỉ sửa style.css + block-hero.php". Fallback cuối cùng nếu Google * Fonts không tải được: `var(--font-family-base)` (Helvetica Neue) — ĐÃ XÁC NHẬN render tiếng Việt * đúng ở mọi nơi khác trên site, KHÔNG fallback về Georgia/Times New Roman (đã biết lỗi). */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,600;0,700&display=swap'); /* CHG-032 (2026-08-26, Sprint UI-12 — Best Sellers Typography, Project Owner decision D-FIGMA-003): * "HEADINGS/TITLES: Playfair" + "BODY/CONTENT: Be Vietnam Pro" là 2 role typography CHÍNH THỨC mới * cho phần triển khai Best Sellers (không áp dụng site-wide trong đợt này — Hero/Sale/New Products * VẪN dùng 'Noto Serif' như cũ, KHÔNG đổi, đúng phạm vi POC chỉ Best Sellers). * - "Playfair" → 'Playfair Display' (tên family thật trên Google Fonts, "Playfair" không phải tên * family hợp lệ — suy luận hợp lý duy nhất khi Product Owner ghi "Playfair"). * - Cả 2 font ĐÃ XÁC MINH có subset "vietnamese" hợp lệ trên Google Fonts CSS2 API (cùng tiêu chuẩn * kiểm chứng đã áp dụng cho 'Noto Serif' ở CHG-016 — tránh lặp lại lỗi dấu đôi tiếng Việt tách rời * đã từng gặp với Georgia) — `curl` trực tiếp API với User-Agent Chrome trả về block `/* vietnamese * */` cho cả Playfair Display và Be Vietnam Pro. * - Be Vietnam Pro tải 4 weight (400/500/600/700) đủ dùng cho toàn bộ text trong Best Sellers (eyebrow * semibold, tab-filter, product meta, giá). Playfair Display tải 3 weight (400/600/700) — Best * Sellers heading hiện dùng weight 400 (regular, kế thừa từ CHG-023), giữ nguyên. */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap'); /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-text); background: var(--color-bg); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, p { margin: 0; } button { font: inherit; cursor: pointer; } input { font: inherit; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* Sprint 06 RC1 Validation (2026-08-05): bug thật — Skip Link tồn tại trong DOM (header.php) nhưng không có biến thể nào hiện `.screen-reader-text` ra khi được focus, vô dụng với người dùng bàn phím có mắt. Chỉ khớp phần tử THẬT SỰ nhận được focus (VD skip link) — không ảnh hưởng các `.screen-reader-text` không focusable khác (nhãn ô tìm kiếm...). */ .screen-reader-text:focus { position: fixed; top: var(--space-2); left: var(--space-2); z-index: 9999; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; padding: var(--space-2) var(--space-4); background: var(--color-brand-primary); color: var(--color-text-on-dark); border-radius: var(--radius-base); } /* Sprint 04 Product UX Polish (2026-08-05): bug thật phát hiện qua browser — không component nào của theme (.btn/.site-nav/.product-card/.tab-filter/.header-action...) có rule :focus/:focus- visible riêng (đã quét toàn bộ document.styleSheets để xác nhận), nghĩa là focus ring hoàn toàn phụ thuộc mặc định trình duyệt, chưa từng được verify hiển thị rõ trên nền tối hay bị cắt bởi border-radius: 9999px của nút pill — vi phạm WCAG 2.4.7. Dùng :focus-visible (không phải :focus) để CHỈ hiện khi điều hướng bàn phím, không đổi hành vi click chuột hiện tại. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-brand-accent); outline-offset: 2px; } .container { max-width: 1320px; margin-inline: auto; padding-inline: var(--space-6); } .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); border: 1px solid transparent; transition: opacity var(--duration-base) var(--easing-standard); } .btn:hover { opacity: 0.85; } .btn--dark { background: var(--color-brand-primary); color: var(--color-text-on-dark); } .btn--gold { background: var(--color-brand-accent); color: var(--color-brand-primary); } .btn--outline-light { background: transparent; color: var(--color-text-on-dark); border-color: var(--color-border-dark); } /* PD-05 (2026-09-09, Product Purchase CTA) — variant MỚI cho nút "Mua ngay" (Product Detail) — đo pixel THẬT trên `design/23-8/chi tiet san pham/Chi-tiet-San-pham.jpg`: viền + chữ #D5AF34/#D6AF36 ≈ ĐÚNG `--color-brand-accent` (#d6b035), nền trong suốt (trùng nền trang, không phải khối màu). Cùng hình dạng với `.btn--outline-light` có sẵn (chỉ đổi 2 giá trị `color`/`border-color` sang gold) — mở rộng ĐÚNG hệ thống variant `.btn--*` đã có, không phát minh Component mới. */ .btn--outline-gold { background: transparent; color: var(--color-brand-accent); border-color: var(--color-brand-accent); } .btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Generic Input (Sprint Shopping Experience Foundation) — Generic hoá từ rule trước đây chỉ scoped riêng Product Detail (`.thekoco-product-action__form .quantity .qty`) thành 2 rule dùng chung không gắn trang cụ thể — áp dụng tự động cho MỌI `.quantity`/`.qty` của WooCommerce (Product Detail/Cart Page/Mini Cart) mà không cần sửa lại Product Detail. `.thekoco-input` dùng cho text field thường (VD Coupon) — cùng ngôn ngữ hình với `.qty` (viền + `--radius-base`). */ .quantity { display: inline-flex; } .quantity .qty { width: 64px; height: 48px; border: 1px solid var(--color-border); border-radius: var(--radius-base); text-align: center; font-size: var(--font-size-base); } .thekoco-input { height: 48px; padding-inline: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-base); background: var(--color-bg); color: var(--color-text); font-size: var(--font-size-sm); } .section-eyebrow { text-align: center; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--font-size-xs); color: var(--color-brand-accent); margin-bottom: var(--space-2); } .section-heading { text-align: center; font-size: var(--font-size-2xl); color: var(--color-brand-accent); font-weight: var(--font-weight-bold); margin-bottom: var(--space-8); } .section-heading--center { color: var(--color-brand-accent); } /* Sprint UI-05: Best Sellers là block duy nhất scope các override typography này — không đổi `.section-eyebrow`/`.section-heading` dùng chung để tránh ảnh hưởng Magazine/New Products. CHG-023 (2026-08-25, Round 2 — đo lại `design/23-8/trang chu/Desktop - 8.jpg` bằng PHP GD, xem docs/CHANGE_LOG.md § CHG-023): round trước (UI-05/CHG-022) SAI 2 điểm quan trọng, đã bị Product Owner chỉ ra qua screenshot thật: 1) Eyebrow màu SAI — round trước dùng `color: var(--color-brand-accent)` kế thừa từ `.section-eyebrow` gốc (gold), nhưng đo trực tiếp pixel ảnh gốc tại dòng "ĐƯỢC YÊU THÍCH NHẤT" cho `rgb(183,179,167)` — xám ấm nhạt, GẦN `--color-text-on-dark-muted` (#a2a2a2), KHÔNG PHẢI gold. Override riêng `color` tại đây (base `.section-eyebrow` vẫn gold cho Magazine/New Products, không đổi). 2) Title font-family/case SAI HẲN CHẤT — round trước kế thừa `.section-heading` gốc (`text-transform:uppercase`, sans-serif `--font-family-base` = Helvetica Neue đậm), nhìn như heading ecommerce phổ thông. Ảnh gốc dùng font SERIF thanh lịch, chữ THƯỜNG (chỉ "S" hoa — "Sản phẩm bán chạy", đúng y hệt chuỗi PHP gốc, không phải chuỗi viết hoa riêng). Đo bbox chữ vàng (glyph cao 54px kể cả dấu/đuôi chữ) khớp gần đúng `--font-size-4xl` (48px) hiện có — KHÔNG đổi font-size, chỉ đổi family/case/weight. Dùng 'Noto Serif' — ĐÃ có sẵn trong project (tải qua `@import` ở đầu file cho `.block-hero__title`, xem CHG-016), không thêm font mới; ảnh gốc dày vừa phải (không đậm như Hero) → dùng weight 400 (regular) thay vì bold. */ /* CHG-032 (D-FIGMA-003): toàn bộ text BODY/CONTENT trong Best Sellers (eyebrow/tab-filter/product meta/giá — mọi thứ không phải "title") kế thừa Be Vietnam Pro qua khai báo ở gốc `.block-best- sellers`, không cần lặp lại `font-family` ở từng selector con. `.section-heading`/`.product- card__title` (title role) override riêng bên dưới sang Playfair Display. */ .block-best-sellers { font-family: 'Be Vietnam Pro', var(--font-family-base); } /* CHG-039 (Round 6 — Vertical Rhythm): đo TRỰC TIẾP từ Figma MCP `get_metadata` (Phase 1, các node text trong Homepage `1992:252`, EXACT — không phải ước lượng): eyebrow "Được yêu thích nhất": y=1227, height=38 → bottom=1265 heading "Sản phẩm bán chạy": y=1281, height=38 → eyebrow→heading gap = 1281−1265 = 16px tab-filter "Frame 15": y=1376, height=38 → heading→tabs gap = 1376−1319 = 57px card container "Frame 36434": y=1470 → tabs→cards gap = 1470−1414 = 56px Trước Round này, `margin-bottom` của eyebrow/heading/tabs kế thừa token site-wide chung (--space-3=12px / --space-8=32px / --space-8=32px) — chưa từng đối chiếu với 3 số đo thật ở trên. Sai lệch LỚN NHẤT ở heading→tabs (32px kế thừa vs 57px đo được) và tabs→cards (32px vs 56px) — ĐÚNG nguyên nhân Product Owner mô tả "cards bắt đầu quá gần tabs, toàn Block bị nén dọc". Sửa bằng giá trị số đo trực tiếp (không dùng token gần đúng), scope riêng Best Sellers — không đổi `.section-eyebrow`/`.section-heading`/`.tab-filter` gốc dùng chung Magazine/New Products. */ /* CHG-045 (Round 9 — Eyebrow contrast, đúng Q-002 Product Owner nêu): đo lại pixel-thật (x=549, y=1227 — TOẠ ĐỘ ĐÚNG, sample trước đây ở Round 1/CHG-023 dùng x sai) cho `#b7b3a8` — TRÙNG KHỚP với giá trị brand/tab đã đo ở Round 8 (CHG-042/043), và trùng luôn ước lượng ban đầu của CHG-023 ("rgb(183,179,167)"). Cả 3 phép đo độc lập hội tụ 1 giá trị — độ tin cậy cao. Rule Round 8 (CHG-042) trước đó VẪN dùng token cũ `--color-text-on-dark-muted` (#a2a2a2, tối/xỉn hơn rõ rệt) cho riêng Eyebrow — bị bỏ sót khi cập nhật Brand/Tab cùng đợt. Sửa nốt cho đồng bộ. */ .block-best-sellers .section-eyebrow { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); letter-spacing: 0.15em; margin-bottom: 16px; color: #b7b3a8; } .block-best-sellers .section-heading { display: flex; align-items: center; justify-content: center; gap: var(--space-4); font-family: 'Playfair Display', 'Noto Serif', var(--font-family-base); font-size: var(--font-size-4xl); font-weight: var(--font-weight-regular); letter-spacing: normal; line-height: var(--line-height-tight); margin-bottom: 57px; } .block-best-sellers .tab-filter { margin-bottom: 56px; } .block-best-sellers .section-heading__dash { width: 40px; height: 2px; background: var(--color-brand-accent); flex-shrink: 0; font-size: 0; } /* CHG-032 (D-FIGMA-002 + D-FIGMA-003): 2 quyết định Product Owner áp dụng riêng cho Product Card BÊN TRONG Best Sellers — KHÔNG sửa `.product-card__title`/`.product-card__cat` gốc (dùng chung Sale/New Products/Shop/Search/Related, ngoài phạm vi POC này). 1) Tên sản phẩm = vai trò "Title" theo D-FIGMA-003 → Playfair Display (cùng họ heading, khác Noto Serif đang dùng cho `.block-sale__products .product-card__title` — 2 block khác nhau, không cần đồng nhất). Xem HUMAN_CONFIRMATION_QUEUE.md Q-011 (liệu tên sản phẩm có tính là "Title" hay nên giữ Be Vietnam Pro như "Body" — chọn Playfair vì tên sản phẩm là phần tử nổi bật nhất, có vai trò tương tự heading, trong mỗi card). 2) Category text (`.product-card__cat`, VD "Chăm sóc da") kế thừa `--color-text-muted` (#6b6b6b) từ rule gốc — trên nền tối Best Sellers (`--color-brand-primary` #1f232e) tạo độ tương phản thấp (~3:1, cận biên AA). D-FIGMA-002 cho phép chọn 1 trong 2 giá trị "Neutral/3" xung đột của Figma (`#B8BBC2` hoặc `#A2A1A5`) theo đánh giá thị giác — CHỌN `#A2A1A5` vì nó GẦN TRÙNG giá trị `--color-text-on-dark-muted` (#a2a2a2) đã được đo pixel-thật từ chính ảnh gốc cho eyebrow cùng Block này (CHG-023) — tức là 2 nguồn độc lập (đo pixel thật + Variable Figma do Product Owner chọn) hội tụ về cùng 1 tông màu, cho độ tin cậy cao hơn hẳn `#B8BBC2` (không khớp bất kỳ giá trị đã đo nào). KHÔNG khai báo đây là giá trị Design System chính thức — chỉ áp dụng cục bộ trong Best Sellers, ghi rõ trong CHANGE_LOG.md. */ /* CHG-042 (Round 8): đo pixel title "Collagen Face Mask (5pcs)" (card 1) — glyph bounding box (kể cả dấu ngoặc/ký tự có đuôi) cao ~18px trên nền, tương ứng font-size ước tính ~20-22px cho font serif — RÕ RÀNG lớn hơn hẳn 16px hiện tại (kế thừa rule gốc dùng chung). Dùng `--font-size-xl` (22px, token có sẵn) thay vì bịa số mới — nằm trong khoảng đo được, tái dùng token theo đúng nguyên tắc file này đã áp dụng ở nơi khác (VD Radius/Spacing) thay vì hardcode. */ /* CHG-057 (2026-08-27, Final Micro-Fix — Product Title Font Size, xem docs/CHANGE_LOG.md): đo lại computed font-size thật trước khi sửa (`getComputedStyle`) = 22px (`var(--font-size-xl)`), không phải 20px như mô tả trong yêu cầu — chỉnh đúng theo TARGET yêu cầu (18px) bất kể số "trước" nêu trong yêu cầu, ghi rõ số đo thật trong Change Log. 18px khớp CHÍNH XÁC token có sẵn `--font-size-lg` — tái dùng, không hardcode `18px` thô. */ .block-best-sellers .product-card__title { font-family: 'Playfair Display', 'Noto Serif', var(--font-family-base); font-size: var(--font-size-lg); line-height: 1.25; } /* CHG-032 Round 2 (2026-08-26 — self-correction sau khi zoom lại `Desktop - 8.jpg` tại đúng vùng text "Dưỡng da"/"VEON", x=375-460,y=1885-1905, PHP GD lọc pixel "ấm" R>90 và R>B+20 để tách glyph khỏi nền): màu ĐO ĐƯỢC hội tụ quanh #716847–#7b6f49 (vàng-nâu ám, trung bình ~#786d49) — RÕ RÀNG KHÔNG PHẢI xám trung tính (#A2A1A5/#B8BBC2, cả 2 giá trị Neutral/3 xung đột của Figma). Round 1 trước đó gán #A2A1A5 dựa trên suy luận "category = Neutral/3 role" mà CHƯA zoom đủ gần để thấy rõ tông màu thật — SAI, đã tự sửa ở đây theo evidence mới. Cùng tông với `#766740` đo được độc lập cho Category trong Flash Sale (CHG-031, block-sale.php khác — không dùng chung selector) — 2 phép đo độc lập cho 2 block khác nhau hội tụ cùng 1 gam màu, củng cố độ tin cậy. Dùng hex trực tiếp (không suy ra bằng opacity đè lên `--color-brand-accent`, vì phép thử blend-alpha không khớp kênh Blue đo được — xem Change Log § CHG-032 Round 2 Evidence) — cùng cách file này đã làm cho `--card-badge-sale-bg` (1 hex cục bộ riêng, không đẩy lên tokens.css). D-FIGMA-002 (Neutral/3) do đó KHÔNG áp dụng cho phần tử này — xem CHANGE_LOG.md cho việc Neutral/3 áp dụng ở đâu thay vào đó. */ /* CHG-042 (Round 8): category "Mặt nạ" đo glyph height ~11px → font-size ước tính ~14-15px, nhỉnh hơn 13px hiện tại một chút — vẫn PHẢI nhỏ hơn Title (đúng hierarchy "supporting information" theo yêu cầu §6 Task Round 8), không tăng bằng Brand/Rating. */ .block-best-sellers .product-card__cat { color: #786d49; font-size: 14px; } /* CHG-032 Round 2: 3 phát hiện thêm từ zoom pixel-thật (crop x=355-685,y=1470-1930 và x=696,y=1650, xem docs/ui-qa/best-sellers/BEST_SELLERS_DESIGN_SPEC.md § Evidence): 1) Card có border 1px màu #2d3146 (khớp CHÍNH XÁC giá trị đọc được qua Figma MCP `get_design_context` trên node 1992:341 ở Phase 1 — 2 nguồn độc lập, đo pixel + MCP, trùng khớp) — hiện `.product- card--dark` KHÔNG có border nào. 2) Radius đo/MCP = 6px, không phải 8px (`--radius-base` đang dùng) — override cục bộ, KHÔNG đổi token `--radius-base` (ảnh hưởng toàn site). 3) Card thực chất 2 tông: vùng ảnh nền #141821 (khớp `--color-footer-lower-bg` đang dùng, không đổi), vùng text bên dưới nền SÁNG HƠN #2c3343 riêng biệt (đo pixel rõ ràng, ranh giới là 1 đường kẻ mảnh) — hiện `.product-card--dark .product-card__body` không có background riêng, toàn Card chỉ 1 tông. Dùng margin âm để "tràn" panel body ra sát mép ngoài Card (undo padding cha CHỈ cho phần tử này), bo lại đúng 2 góc dưới bằng radius mới. `overflow:hidden` trên Card cha để bo góc panel body không tràn ra ngoài khối bo tròn ngoài cùng. */ /* CHG-034 (Round 4): `.product-card` render với `box-sizing: content-box` thật sự tại runtime (xác nhận qua `getComputedStyle` — không phải do global reset dòng 43 `*{box-sizing:border-box}` sai, mà do 1 rule khác đặc hiệu hơn ghi đè, chưa xác định chính xác nguồn — nghi WooCommerce core CSS vì `.product-card` nằm trong khu vực `.thekoco-woocommerce`/theme loop, nhưng KHÔNG đủ thời gian trong phạm vi Round này để truy hết nguồn — xem Open Question trong Report). Hệ quả: `padding` (32px) + `border` (2px, mới thêm CHG-032) bị CỘNG THÊM vào ngoài `flex-basis` đã khai báo thay vì nằm gọn TRONG nó — đây là NGUYÊN NHÂN THẬT (không phải flex-basis % trong container overflow như suy đoán ban đầu) khiến Card render RỘNG HƠN 34px so với công thức, và là lý do chính khiến 4 Card tại 1920px tràn ra ngoài `.product-grid` (đo trước khi sửa: card 487px, card4Right=2032px > cả viewport 1920px). Ép `border-box` cục bộ (chỉ trong Best Sellers) để `flex-basis`/`clamp()` ở dưới phản ánh ĐÚNG kích thước render cuối cùng. */ /* CHG-036 (2026-08-26, Round 5 — Equal Card Height): Product Owner phát hiện nền vùng thông tin (`.product-card__body`, #2c3343) KẾT THÚC Ở ĐỘ CAO KHÁC NHAU giữa các Card cùng hàng (title 1 dòng vs 2 dòng → body content cao khác nhau). Root cause: `.product-grid` (flex row) mặc định `align-items:stretch` NÊN CHÍNH `.product-card--dark` (outer box) đã cao bằng Card cao nhất cùng hàng — nhưng `.product-card--dark` trước đây là `display:block` thường, nên phần CHIỀU CAO DƯ RA đó không "chảy" xuống cho `.product-card__body` (chỉ cao bằng NỘI DUNG thật của nó) — khoảng dư nằm Ở NGOÀI `__body`, hiện màu nền CARD (không phải màu nền BODY), tạo cảm giác mỗi Card có "đường kết thúc nền thông tin" ở độ cao khác nhau dù bản thân Card đã cao bằng nhau. Sửa bằng CSS layout chuẩn (flex + stretch), KHÔNG hardcode height riêng, KHÔNG margin giả, KHÔNG background giả, KHÔNG position:absolute: biến `.product-card--dark` thành flex column (Thumb ở trên, Body ở dưới) rồi cho Body `flex:1 1 auto` — Body giờ LUÔN lấp hết phần chiều cao còn lại của Card (đã được stretch bởi hàng Grid cha), nền `#2c3343` của nó vì vậy LUÔN phủ kín tới đúng mép dưới Card ở MỌI Card cùng hàng, bất kể nội dung dài ngắn khác nhau. */ /* CHG-049 (2026-08-26, Round 13 — Final Polish P2 v4, Real Box Geometry): Round 12 (CHG-048) dùng `linear-gradient` để vẽ 1 dải màu Info giả ở đáy Thumb — Product Owner từ chối: đó là "vẽ hiệu ứng giống bo góc", không phải "bo góc thật của box". Root cause thật (đã inspect lại từ đầu): - `.product-card--dark` (Card cha): nền `var(--color-footer-lower-bg)` (màu Media), phủ TOÀN BỘ Card (cả 2 vùng), padding đều 4 cạnh. - `.product-card__thumb` (Media): `background:transparent` — không có nền THẬT của riêng nó, chỉ "mượn" màu Card cha lộ qua. Đây là lý do border-radius đặt trực tiếp lên Thumb luôn VÔ HÌNH (bo 1 vùng trong suốt thì không có gì để mắt thấy) — mọi round trước đều phải "vẽ thêm" 1 màu giả (pseudo-element hoặc gradient) để bù cho lỗ hổng này. - `.product-card__body` (Info): nền THẬT `#2c3343` riêng, đã tự "thoát" ra sát mép ngoài Card (trái/phải/dưới) bằng margin âm — nhưng chỉ 3 cạnh đó, không chạm cạnh TRÊN (giáp Thumb). GIẢI PHÁP THẬT (không gradient, không pseudo-element, không notch — đổi quan hệ NỀN giữa Card cha và 2 con, đúng như yêu cầu): 1) Đổi nền CHÍNH `.product-card--dark` (Card cha) từ màu Media sang thẳng màu Info `#2c3343` — an toàn vì bước 2+3 dưới đây khiến Thumb + Body cùng nhau phủ kín 100% diện tích nhìn thấy được, TRỪ đúng 2 góc bo — nền Card cha lúc này chỉ còn "lộ" ra đúng tại đó, không ở đâu khác. 2) Cho `.product-card__thumb` 1 nền THẬT của chính nó (`var(--color-footer-lower-bg)`, đúng màu Media đang hiển thị, không đổi cảm nhận) + margin âm để tự thoát ra sát mép TRÊN/TRÁI/PHẢI Card (đối xứng với cách Body đã thoát mép DƯỚI/TRÁI/PHẢI) + padding bù lại đúng bằng margin âm để ảnh/badge/wishlist bên trong (position:absolute, neo theo padding-box của Thumb) đứng ĐÚNG Y HỆT vị trí cũ, không lệch dù 1px (đã tính toán: margin -16px + padding +16px = net 0 dịch chuyển cho nội dung bên trong, chỉ border-box của Thumb tự nó mở rộng ra biên). 3) `border-radius: 0 0 6px 6px` áp trực tiếp lên Thumb (chỉ 2 góc dưới) — vì giờ Thumb có nền THẬT + đã lan ra sát biên Card, khi bo góc, phần bị cắt sẽ lộ ĐÚNG nền Card cha phía sau — nay là màu Info `#2c3343` — bo góc THẬT, màu lộ ra THẬT, không giả lập gì cả. `.product-card__body` HOÀN TOÀN không đổi 1 dòng nào — vị trí/kích thước/nền giữ nguyên tuyệt đối. */ .block-best-sellers .product-card--dark { box-sizing: border-box; border: 1px solid #2d3146; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; background: #2c3343; } .block-best-sellers .product-card--dark .product-card__thumb { flex: 0 0 auto; background: var(--color-footer-lower-bg); margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0; padding: var(--space-4) var(--space-4) 0; border-radius: 0 0 6px 6px; } /* CHG-041 (2026-08-26, Round 8 — P0-2 Metadata Structure): Product Owner đối chiếu Figma cho thấy Rating (sao + số review) phải nằm CÙNG HÀNG với Brand, canh phải — "L'Occitane [[space]] ★★★★★ 121" — xác nhận bằng zoom pixel-thật trên `Desktop - 8.jpg` (crop card 1, x=40-330,y=1793-1811, xem Report Round 8 § Evidence). Implementation trước Round này render Rating là 1 `

` RIÊNG, đứng SAU Category (Brand→Title→Category→Rating→Price) — sai thứ tự Figma (Brand→[Rating cùng hàng]→ Title→Category→Price). KHÔNG sửa PHP/HTML (`product-card.php` — component DÙNG CHUNG Best Sellers/Sale/New Products/Shop/ Search/Related, đổi DOM order ở đây sẽ kéo theo thay đổi hiển thị cho MỌI nơi khác, vi phạm "chỉ sửa Best Sellers"). Thay vào đó dùng CSS GRID với `grid-template-areas` đặt lại VỊ TRÍ HIỂN THỊ của `.product-card__brand`/`.product-card__rating` mà KHÔNG cần đổi thứ tự trong DOM — Grid area cho phép 2 phần tử không liền kề trong HTML vẫn hiển thị cùng 1 hàng. CHỈ áp dụng cho `.block-best- sellers` (scoped) — mọi Block khác (Sale/New Products/Shop) vẫn giữ nguyên `display:flex;flex- direction:column` cũ, Rating vẫn nằm dưới Category y hệt trước Round này, KHÔNG regression. Hàng trống `". ."` giữa Category và Price là 1 ROW co giãn (`1fr`) hấp thụ hết khoảng trống còn dư của Body (đã được stretch cao bằng Card cao nhất cùng hàng, cơ chế CHG-036/Round 5 — GIỮ NGUYÊN, chỉ đổi `display:flex`→`display:grid` cho Body, phần `flex:1 1 auto` khiến Body co giãn ĐÚNG BẰNG trong `.product-card--dark` cha vẫn giữ nguyên không đổi) — thay thế đúng vai trò `margin-top:auto` cũ từng dùng để neo Price xuống đáy (xoá rule đó, không cần nữa vì Grid tự làm việc này). */ /* CHG-047 (2026-08-26, Round 11 — Final Polish P2 v2, Ownership Correction): Round 10 (CHG-046) đặt `border-radius: 6px 6px 0 0` trực tiếp trên `.product-card__body` — Product Owner review lại, xác nhận kết quả VỀ MẶT HÌNH ẢNH đúng nhưng SAI VỀ MẶT SỞ HỮU: theo cấu trúc Figma, phần bo góc PHẢI thuộc về PRODUCT MEDIA (khối ảnh + badge + wishlist phía trên), KHÔNG PHẢI PRODUCT INFO (khối text phía dưới) — info panel không được có border-radius riêng dưới bất kỳ hình thức nào. Đã BỎ hẳn `border-radius` khỏi rule này (xem thay thế: `.product-card__thumb::after`, dòng ~300) — Body giờ HOÀN TOÀN vuông ở mọi góc (đúng yêu cầu), hiệu ứng bo tròn tại điểm tiếp giáp được vẽ bởi 1 pseudo- element gắn vào Thumb thay thế, xem chi tiết + lý do kỹ thuật tại đó. Margin/padding/flex GIỮ NGUYÊN không đổi (không ảnh hưởng kích thước/khoảng cách Card). */ .block-best-sellers .product-card--dark .product-card__body { background: #2c3343; margin: 0 calc(var(--space-4) * -1) calc(var(--space-4) * -1); padding: var(--space-5) var(--space-4) var(--space-4); flex: 1 1 auto; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto 1fr auto; column-gap: var(--space-3); grid-template-areas: "brand rating" "title title" "cat cat" "spacer spacer" "price price"; } /* CHG-042 (Round 8 — P0-1 Typography): đo pixel trực tiếp text "EARTHNIQ"/"VEON" (brand, card 1-2, `Desktop - 8.jpg`) — glyph height ~11px (chữ hoa) → font-size ước tính ~15px (hiện tại 13px, kế thừa rule gốc dùng chung — SỬA riêng cho Best Sellers). Màu đo được hội tụ #b7b3a8 — ẤM và SÁNG HƠN rõ rệt `--color-text-on-dark-muted` (#a2a2a2) đang dùng — cùng tông với chữ Tab (xem CHG-043). Chữ trong ảnh gốc KHÔNG nghiêng (rule gốc `.product-card__brand` có `font-style:italic` — SAI so Figma) và VIẾT HOA + letter-spacing rõ (brand lưu trong DB dạng "L'Occitane"/"Earthniq" — thường, không hoa — Figma áp `text-transform:uppercase` khi hiển thị, không phải do nhập hoa sẵn). */ .block-best-sellers .product-card__brand { grid-area: brand; align-self: center; margin-bottom: 0; font-size: 15px; font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; color: #b7b3a8; } .block-best-sellers .product-card__rating { grid-area: rating; justify-self: end; align-self: center; margin-bottom: 0; } .block-best-sellers .product-card__rating-stars { font-size: 14px; } .block-best-sellers .product-card__rating-count { font-size: 13px; } .block-best-sellers .product-card__title { grid-area: title; } .block-best-sellers .product-card__cat { grid-area: cat; } .block-best-sellers .product-card__price { grid-area: price; } /* CHG-042 (Round 8): giá "450.000đ" đo glyph height ~14px (số, không dấu đuôi) → font-size ước tính ~19-20px — Price là focal point mạnh nhất theo yêu cầu §6 Task Round 8, dùng 20px (đậm hơn hẳn 16px hiện tại, cũng lớn hơn Title 22px một chút để 2 giá trị không trùng nhau nhưng vẫn đủ nổi bật theo đúng tinh thần "giá là 1 trong những focal point mạnh nhất"). Giá cũ/discount tăng theo tỉ lệ tương ứng (13→15px), vẫn nhỏ hơn giá mới — giữ đúng hierarchy giá mới > giá cũ/badge giảm giá. */ /* CHG-044 (Round 8 — Price Order + Redundant Discount Text): zoom pixel-thật card "VEON" (on-sale thật trong Figma, xem Report Round 9 § Evidence) cho thấy 2 điểm khác implementation trước Round này: 1) Thứ tự hiển thị: Giá MỚI (vàng, nổi bật) đứng TRƯỚC, Giá CŨ (gạch ngang, mờ) đứng SAU — DOM hiện tại render `price-old` trước `price-new` (comment doc-block cũ ở đầu file "Giá cũ → Giá mới" xác nhận đúng thứ tự DOM này), nên với `.product-card__price{display:flex}` (base, không đổi) thứ tự HIỂN THỊ trước Round này là Cũ→Mới, ngược Figma. Sửa bằng flex `order` (không đổi DOM/PHP, không ảnh hưởng Block khác dùng chung). 2) `.product-card__price-discount` ("-44%") KHÔNG xuất hiện trong hàng Giá của Figma — % giảm giá CHỈ hiện dưới dạng Badge overlay trên ảnh (đã có sẵn từ CHG-022, và nay có thêm CHG-044 badge- pair cho trường hợp cần cả 2 badge cùng lúc — xem `.product-card__badges` ở trên). Hiện `-44%` LẶP LẠI thêm 1 lần trong hàng Giá là dư thừa so Figma — ẩn (không xoá `` khỏi PHP, vẫn dùng chung Sale/New Products nếu có nhu cầu riêng — chỉ ẩn hiển thị trong scope Best Sellers). */ .block-best-sellers .product-card__price-new { font-size: 20px; order: 1; } .block-best-sellers .product-card__price-old { font-size: 15px; order: 2; } .block-best-sellers .product-card__price-discount { display: none; } /* CHG-032 Round 2: nút "Thêm vào giỏ hàng" hiện dùng `--color-bg-subtle` (#f7f5f2, kem gần trắng) — đo pixel thật (x=500,y=1745) cho `#d6d5d0`/`#d5d4cf`, khớp gần như tuyệt đối `Accent/3` Figma (#D6D5CF, chênh 1 đơn vị/kênh — sai số nén JPEG) — RÕ RÀNG tối/xám hơn `--color-bg-subtle` đáng kể, không phải cùng 1 màu. Hex cục bộ (không token nào khớp sẵn, cùng cách xử lý `--card-badge-sale- bg` phía trên). */ .block-best-sellers .product-card__add-cart { background: #d6d5cf; } /* CHG-033 (2026-08-26, Round 3 — Pilot Controlled Implementation): TỰ SỬA LẠI quyết định CHG-032 Round 2 ở trên (đã xoá) sau khi Product Owner chỉ ra qua visual comparison: ảnh sản phẩm đang RENDER QUÁ LỚN, "như 1 khối ảnh vuông độc lập" tách rời khỏi Card, không giống Figma. Zoom pixel-thật vào ĐÚNG 1 ô ảnh (crop x=365-671,y=1470-1780 trên `Desktop - 8.jpg`, xem docs/ui-qa/best-sellers/REPORT_HOMEPAGE_BEST_SELLERS_2026-08-26.md § Evidence) đo được: ảnh sản phẩm thật (phần lọ kem nhìn thấy được, không tính vùng trong suốt xung quanh trong chính file ảnh) chỉ chiếm CHIỀU RỘNG ~53% và CHIỀU CAO ~46% của khối ảnh vuông (306×310px), canh giữa trong dải trống giữa hàng Badge (trên) và nút CTA (dưới) — HOÀN TOÀN KHÁC quy tắc `90%` cũ (CHG-022, đo cho `.product-card--dark .product-card__thumb img` dùng chung — xem dòng ~647). → Root cause thật của "card nhìn thô/ảnh như khối vuông riêng": KHÔNG PHẢI do thiếu 1 lớp nền trung gian (Round 2 SAI khi thêm `background:var(--color-bg-subtle)` ở đây — cách đó chỉ che màu trắng ảnh gắt hơn nhưng KHÔNG giải quyết vấn đề gốc là ảnh quá lớn, thậm chí còn tạo ra đúng 1 "khối vuông sáng độc lập" mà Product Owner đang phàn nàn, vì hộp nền đó gần như phủ kín Card). Root cause THẬT là % kích thước ảnh sai — sửa bằng cách trả `background` về `transparent` (kế thừa lại rule gốc dòng ~720, không cần khai báo lại) VÀ giảm % ảnh xuống đúng tỉ lệ đo được, xem rule ngay dưới. Ảnh nền trắng đặc thật (CHG-031) vẫn còn (Product Owner cấm tự xoá nền ảnh), nhưng ở kích thước nhỏ hơn nhiều, mảng trắng dư ra không còn chiếm phần lớn Card như trước — chấp nhận được, không phải giải pháp hoàn hảo (xem Q-001 report). */ /* CHG-037 (2026-08-26, Round 5 — Image Prominence Re-eval): 55% (CHG-033, Round 3) được đo/chốt TRÊN Card đã bị lỗi box-sizing (render ~348-487px, RỘNG HƠN THẬT khoảng 34px/cạnh vì content-box — xem CHG-034) — cùng 1 tỉ lệ % đó, sau khi Round 4 sửa box-sizing về đúng kích thước Card thật (~282–323px, xem CHG-035), cho ảnh NHỎ HƠN HẲN về số pixel tuyệt đối dù % không đổi — đúng phản ánh Product Owner: "ảnh trở nên quá nhỏ, sản phẩm nhìn lọt thỏm". KHÔNG PHẢI do Round 3 đo sai — mà do base để tính % (kích thước Card) đã đổi hẳn ở Round 4/5, nên % cũ không còn phù hợp, cần đánh giá lại trên chính composition MỚI. Tăng lên 70% — ảnh trở thành focal point rõ ràng hơn (yêu cầu Round 5 §2), vẫn CHỪA khoảng thở quanh ảnh (không chạm sát border như 90% cũ của CHG-022) — 70% là điểm cân bằng chọn qua so sánh trực tiếp nhiều mốc (55/62/70/78%) bằng screenshot thật, KHÔNG có số đo Figma MCP mới do rate limit vẫn còn hiệu lực (xem Report Round 5 § Open Question — con số này cần Designer xác nhận lại khi MCP khả dụng). `object-fit:contain` (kế thừa rule gốc, không đổi) đã đảm bảo giữ đúng aspect ratio ảnh gốc, không crop, không méo — chỉ đổi % khung chứa, không đổi cách fit. */ /* CHG-046 (Round 9 — Image Frame Radius): Product Owner chỉ ra ảnh sản phẩm thật (nền trắng đặc sẵn trong file, giới hạn asset đã ghi nhận từ CHG-031/Round 6 §5, KHÔNG được tự xoá nền) nhìn như "1 hình chữ nhật trắng cứng đặt giữa khung ảnh" vì 4 góc vuông 90°. Figma KHÔNG thể xác nhận trực tiếp radius cho chính khối này — ảnh demo gốc trong Figma không có nền trắng nên hiện tượng này không tồn tại trong Figma để đo (khác Round khác, nơi luôn có evidence Figma trực tiếp — ghi rõ giới hạn này, không suy đoán bừa). Theo đúng yêu cầu "reuse token hiện có thay vì bịa số mới": tái dùng CHÍNH giá trị 6px đã dùng cho bo góc ngoài cùng của Card (`.product-card--dark`, MCP-exact từ Phase 1) — bo góc ảnh THẬT (``) cùng 1 mức với Card chứa nó, nhất quán nội bộ 1 component, không bịa 8px/12px/16px tuỳ ý. `overflow:hidden` không cần thiết trên chính thẻ `` (radius áp trực tiếp lên box của nó, trình duyệt tự clip nội dung ảnh bên trong theo góc bo) — không crop/méo ảnh, không đổi `object-fit:contain`/tỉ lệ đang dùng, chỉ bo 4 góc của khung ảnh đã render. */ .block-best-sellers .product-card--dark .product-card__thumb img { width: 70%; height: 70%; border-radius: 6px; } /* ---------- Header ---------- */ /* Sprint 04: đo trực tiếp pixel từ design/koco.jpg (topbar 40px, header 94px, nav 53px; gold #d6b035, topbar bg #20232c, header/nav bg #070707, search bg #464646). Redesign 2026-08-23: màu đổi sang bản Figma chốt mới (design/23-8/) — topbar bg #781035 (đỏ mận), header/nav bg #1f232e (navy đậm), search bg #393d46 — xem token trong tokens.css, không sửa giá trị màu ở file này (toàn bộ đã dùng var(), xem doc-comment tokens.css cho lý do đổi). Container width (UI Audit 2026-08-23): đo lệch trái ~13-15px ở CẢ 3 hàng (topbar/logo/nav) so với reference — không phải lỗi riêng từng phần tử, mà do `.container` DÙNG CHUNG toàn site (max-width 1320px + padding 24px) tạo margin ngoài ~23px ở viewport 1366px, trong khi reference gần như full-width (content bắt đầu ~35-46px từ mép, gần đúng bằng padding-inline không kèm margin ngoài). ĐÃ CÓ tiền lệ scope override `.container` riêng cho 1 section trong file này (`.block-best-sellers .container { max-width: none; }`, xem bên dưới) — áp dụng ĐÚNG pattern đó cho Header, không đổi `.container` gốc (tránh ảnh hưởng section khác ngoài phạm vi audit này). Round 2 (2026-08-23, CHG-001 — xem docs/CHANGE_LOG.md) — SỬA SAI của chính lần trước: đặt `max-width: 1600px` không có căn cứ đo từ reference (chỉ là "cap hợp lý cho màn hình cực rộng" tự nghĩ ra). Screenshot thật ở viewport 1920px xác nhận: 1600px < 1920px nên vẫn tạo margin ngoài ~160px mỗi bên + padding 32px = logo cách mép trái ~192-220px — ĐÚNG lỗi ban đầu, chỉ dịch sang breakpoint khác. Reference chỉ có 1 kích thước gốc (Figma xuất ở 1366px, không có bản thiết kế riêng cho 1920+), nhưng bản chất "gần full-width, logo sát mép trái" của nó KHÔNG phải đặc điểm riêng của 1366px — bỏ hẳn `max-width`, dùng padding-inline làm khoảng cách mép duy nhất, ở MỌI viewport (đúng tinh thần "full-width layout" nếu reference không cho thấy giới hạn cứng nào). */ .site-header .container { max-width: none; padding-inline: var(--space-8); } .topbar { background: var(--color-topbar-bg); color: var(--color-text-on-dark); font-size: 13px; height: 40px; } .topbar__inner { display: flex; justify-content: space-between; align-items: center; height: 40px; gap: var(--space-4); flex-wrap: wrap; } .topbar__ship { margin: 0; color: var(--color-brand-accent); } .topbar__links { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-on-dark); } /* Sprint Framework Localization Phase 3: bọc riêng phần "Đăng ký" trong 1 wrapper để có thể ẩn trên mobile mà vẫn giữ Language Switcher hiển thị (xem @media 768px). CHG-050 (2026-08-26, Header Surgical Correction C): nội dung bên trong wrapper này đổi (chỉ còn "|" + "Đăng ký", bỏ "Ưu đãi thành viên" — xem header.php), nhưng class/rule này (kể cả rule ẩn mobile) GIỮ NGUYÊN không đổi. `.topbar__perk` xoá — không còn markup nào tham chiếu (link "Ưu đãi thành viên" đã bỏ). */ .topbar__links-primary { display: flex; align-items: center; gap: var(--space-3); } .topbar__sep { color: var(--color-border-dark); } .topbar__links a:hover { opacity: 0.8; } /* ================= Language Switcher (Sprint Framework Localization Phase 3) ================= CHG-050 (2026-08-26, Header Surgical Correction C): đổi từ dropdown (toggle+panel absolute) sang inline list phẳng "VN / EN" — khớp Figma reference (xem docs/ui-qa/HEADER_GAP_ANALYSIS_2026-08-26.md). Rule `__toggle`/`__panel`/`__current` cũ đã xoá cùng markup dropdown (component.php) — không còn consumer nào dùng, không phải dead code sót lại ngoài phạm vi. Màu/font-size KHÔNG khai báo riêng — kế thừa nguyên `.topbar`/`.topbar__links` (color: var(--color-text-on-dark), font-size: 13px) đúng yêu cầu "giữ nguyên typography Topbar". */ .thekoco-language-switcher { display: inline-flex; align-items: center; gap: var(--space-1); } .thekoco-language-switcher__sep { color: var(--color-border-dark); } .thekoco-language-switcher__option { color: inherit; } .thekoco-language-switcher__option:hover { opacity: 0.8; } .thekoco-language-switcher__option.is-active { font-weight: var(--font-weight-semibold); color: var(--color-brand-accent); } .site-header__main { background: var(--color-brand-primary); } /* Round 2 (2026-08-23, CHG-002 — xem docs/CHANGE_LOG.md): đổi Grid `1fr auto 1fr` (UI_TODO.md § Review lần 2 cũ) sang Flex. Lý do: Grid `1fr auto 1fr` ép 2 cột 2 bên BẰNG NHAU tuyệt đối theo định nghĩa, nên Search (cột giữa) luôn nằm ĐÚNG GIỮA container bất kể logo/icon rộng bao nhiêu — khớp yêu cầu "search luôn giữa" nhưng lại ép Search PHẢI có width cố định (khai báo cứng ở `.site-search`, không có cách nào cho nó "chiếm phần lớn không gian còn lại" trong 1 Grid ép đối xứng như vậy). Reference cho thấy Search phải RỘNG RÕ RỆT, ưu tiên hơn việc căn đúng-giữa-tuyệt- đối — đổi sang Flex (logo auto, search flex:1, icons auto) để Search tự hấp thụ toàn bộ khoảng trống còn lại sau khi trừ logo/icons, đúng bản chất "search chiếm phần lớn không gian trung tâm" thay vì bị giữ ở 1 width cố định. Đánh đổi: Search không còn nằm CHÍNH XÁC giữa hình học của container nếu logo/icons 2 bên rộng khác nhau — chấp nhận được vì đây đúng compostion nhìn thấy trong reference (không phải suy đoán). */ /* CHG-005 (2026-08-23, xem docs/CHANGE_LOG.md): `justify-content: space-between` với 3 phần tử ngang hàng (logo/search/actions) chia khoảng trống thừa làm 2 phần BẰNG NHAU theo đúng định nghĩa CSS — nhưng đo lại reference (border-scan chính xác, không ước lượng) cho thấy khoảng Logo↔Search (327px) và Search↔Icons (232px) KHÔNG bằng nhau, đây là nguyên nhân gốc khiến tâm ngang Search lệch ~50px so với reference dù width Search đã đúng (CHG-004). Gộp Search+Actions thành 1 nhóm con `.site-header__search-actions` (xem bên dưới + header.php) rồi đặt cạnh Logo: khoảng cách Logo↔nhóm co giãn hết phần trống còn lại (`flex: 1 1 auto` trên nhóm), khoảng cách Search↔Icons TRONG nhóm cố định nhỏ — tái tạo đúng tỷ lệ bất đối xứng bằng cấu trúc Flex thật. Còn 2 phần tử (logo, nhóm) nên bỏ `justify-content: space-between` — không còn tác dụng khi item thứ 2 đã tự `flex: 1` chiếm hết phần còn lại. `height: 103px → 95px`: đo lại reference (quét màu viền 700px cột giữa) main-row cao 95px (y=40→135 trong ảnh 1366×200), không phải 103px — root cause khiến tâm dọc Search lệch 4.5px (91.5 vs 87), vì `.site-search` căn giữa theo chiều cao hàng cha (`align-items:center`). */ /* CHG-007 (2026-08-23): tách Logo/Search/Icons thành 3 phần tử độc lập — Search dùng `margin-left` CỐ ĐỊNH (314.3px). Đúng tại 1366px nhưng SAI ở viewport rộng hơn: Logo/Icons đúng co giãn theo viewport (áp sát 2 mép, đo khớp reference) nhưng Search "đóng băng" ở toạ độ 1366px tuyệt đối, nên khi khoảng-giữa (Logo→Icons) giãn ra theo viewport, Search bị kẹt lại bên trái — đo thật ở 1920px: search.centerX=707px, viewport center=960px, lệch 253px (screenshot thật xác nhận, không phải suy đoán — xem docs/CHANGE_LOG.md CHG-008). CHG-008 (2026-08-23, xem docs/CHANGE_LOG.md): thay `margin-left` cố định bằng 2 SPACER co giãn theo TỶ LỆ đã đo được ở reference (314.3:227, tương đương 58.1%:41.9% — xem `.site-search`/ `.site-header__actions` bên dưới cho giá trị `flex-grow` chính xác), dùng pseudo-element `::before`/`::after` của chính `.site-header__inner` (không cần thêm div/markup mới) kết hợp `order` để chèn đúng vị trí giữa Logo↔Search và Search↔Icons. Khi viewport = 1366px (reference), 2 spacer render đúng bằng 314.3px/227px (khớp tuyệt đối số đo cũ, không đổi). Khi viewport RỘNG HƠN, phần dư ra được chia theo ĐÚNG tỷ lệ 314.3:227 thay vì dồn hết vào 1 bên (CHG-005/006) hay đứng yên tuyệt đối (CHG-007) — Search giờ trôi dần về giữa theo đúng tỷ lệ đã đo, không bịa số mới. Logo/Icons giữ nguyên cơ chế đã đúng (`flex:0 0 auto`), không đổi. */ .site-header__inner { display: flex; align-items: center; height: 95px; } .site-header__inner::before { content: ""; order: 2; flex: 314.3 314.3 0px; } .site-header__inner::after { content: ""; order: 4; flex: 227 227 0px; } .site-logo { display: flex; align-items: center; flex: 0 0 auto; order: 1; } /* Sprint Framework Customer — Header Consistency: WooCommerce core (woocommerce-layout.css) có rule `.woocommerce img, .woocommerce-page img { height: auto; max-width: 100%; }` — specificity (0,1,1) — CAO HƠN rule cũ `.site-logo__mark { height: 80px }` (0,1,0), nên trên MỌI trang có body class `woocommerce`/`woocommerce-page` (Product Detail/Shop/Category/Brand/Cart/Checkout/ Search) logo bị render theo kích thước gốc của file ảnh thay vì 80px — Homepage không có class này nên không bị. Qualify thêm `.site-logo` (class cha có sẵn, không phải class mới) để tăng specificity lên (0,2,0), thắng chắc chắn rule của WooCommerce trên mọi trang — không cần `!important`, không đụng header.php. */ .site-logo .site-logo__mark { height: 80px; width: auto; } /* UI Audit 2026-08-23: đo trực tiếp design/23-8/trang chu/Desktop - 8.jpg — search box reference rộng ~591px (406px→997px ở viewport 1366px, đo bằng ruler-crop), bản cũ width cố định 560px. Round 2 (CHG-002): width cố định (kể cả 600px đã tăng) là NGUYÊN NHÂN GỐC khiến Search không giãn theo viewport — ở 1920px vẫn y hệt 600px như ở 1366px, nhìn "hụt" hẳn so với khoảng trống thật có. Đổi sang `flex: 1` (search hấp thụ hết khoảng trống còn lại trong `.site-header__inner`, xem rule đó) + `max-width: 780px` (chặn KHÔNG cho giãn vô hạn trên màn cực rộng — 780px lúc đó là ƯỚC LƯỢNG, không có bằng chứng đo, ghi rõ trong Change Log CHG-002). CHG-004 (2026-08-23) — đo LẠI reference bằng pixel-detection chính xác (quét màu viền search box qua 7 dòng y độc lập, không phải ruler-crop ước lượng bằng mắt): left=418px, right=994px → width=576px THẬT (khác con số ~591px ước lượng trước đó ở dòng comment trên — SAI SỐ ~15px/2.6% giữa 2 lần đo, giữ nguyên comment cũ để thấy rõ chênh lệch, không xoá). max-width 780px đo lại so với 576px thật: rộng hơn +204px (+35.4%, vượt xa ngưỡng ±5%) — SỬA. `max-width: 780px` → `max-width: 576px` (đúng bằng số đo, không làm tròn). Kiến trúc `flex: 1 1 auto` GIỮ NGUYÊN — vẫn co giãn được ở viewport khác, chỉ đổi giá trị CAP. */ /* CHG-005: `flex: 1 1 auto` (Search tự hấp thụ khoảng trống của `.site-header__inner`) đổi sang `flex: 0 1 576px` (max-width thật, đo được ở CHG-004) — không PHÌNH quá 576px nữa, chỉ CO khi thiếu chỗ. `height: 48px → 50px`: đo lại reference (quét viền tại cột giữa Search, x=706) chiều cao thật 50px (y=62→112), không phải 48px — Priority 2 CHG-005. CHG-007 (2026-08-23): bỏ nhóm `.site-header__search-actions` (CHG-005) — Search không còn nằm trong 1 flex-group chung với Icons nữa. Đổi sang `margin-left: 314.3px` CỐ ĐỊNH — SAU ĐÓ phát hiện SAI ở viewport rộng (xem `.site-header__inner` — search.centerX kẹt ở 707px bất kể viewport, lệch 253px so với tâm màn hình 1920px, ảnh chụp thật xác nhận). CHG-008 (2026-08-23, xem docs/CHANGE_LOG.md): bỏ `margin-left` cố định — 2 khoảng cách 2 bên Search giờ do spacer `::before`/`::after` của `.site-header__inner` đảm nhiệm (xem rule đó), Search chỉ cần khai báo `order: 3` để nằm đúng vị trí giữa 2 spacer theo `order` (1=Logo, 2=spacer-trước, 3=Search, 4=spacer-sau, 5=Icons). `flex: 0 1 576px` giữ nguyên — Search vẫn không tự GROW (spacer đảm nhiệm phần giãn), chỉ SHRINK khi viewport hẹp không đủ chỗ. */ /* CHG-050 (2026-08-26, Header Surgical Correction A+B — xem docs/ui-qa/HEADER_GAP_ANALYSIS_2026-08-26.md): A) Reference đo được search box là OUTLINE-ONLY (viền ~1px #464646, nền trùng màu Header #1f232e, KHÔNG phải pill nền sáng) — đổi `background: var(--color-search-bg)` (#393d46, sai) sang `#1f232e` (đúng nền Header, tái dùng — đây là giá trị var(--color-brand-primary) nhưng ghi hex trực tiếp vì reference đo được khớp CHÍNH XÁC màu Header, không phải suy luận qua token khác) + thêm `border: 1px solid #464646` (đo pixel trực tiếp, giá trị mới, chưa có token tương ứng). B) `box-sizing: border-box` — sửa bug render 608px thay vì 576px khai báo (padding-inline 32px bị cộng ra NGOÀI max-width thay vì tính vào trong, do content-box — cùng pattern bug đã gặp ở Best Sellers CHG-034). Local fix, KHÔNG đụng global reset dòng 43. */ .site-search { position: relative; display: flex; align-items: center; background: #1f232e; border: 1px solid #464646; box-sizing: border-box; border-radius: var(--radius-full); height: 50px; padding-inline: var(--space-5) var(--space-3); flex: 0 1 576px; min-width: 0; max-width: 576px; order: 3; } .site-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--color-text-on-dark); font-size: var(--font-size-sm); } /* Sprint 04 Product UX Polish (2026-08-05): bug thật phát hiện qua keyboard Tab test thật — `outline: 0` ở trên (đúng cho trạng thái thường, tránh viền mặc định phá vỡ hình viên thuốc) VÔ TÌNH thắng luôn cả rule :focus-visible toàn site mới thêm (cùng specificity, đứng sau trong file) — khiến riêng ô tìm kiếm Header hoàn toàn không có focus indicator nào khi dùng bàn phím. Override lại đúng ngữ cảnh này. */ .site-search input:focus-visible { outline: 2px solid var(--color-brand-accent); outline-offset: 2px; } .site-search input::placeholder { color: var(--color-text-on-dark); opacity: 0.65; } .site-search__icon { display: grid; place-items: center; color: var(--color-text-on-dark-muted); background: none; border: 0; padding: var(--space-2); } .site-search__icon--submit { color: var(--color-brand-accent); } .site-search__icon--submit:hover { opacity: 0.8; } /* CHG-007: `margin-left: auto` — Icons áp mép phải THẬT, độc lập với Search (khác CHG-005/006: lúc đó Icons đi theo Search trong 1 flex-group chung, "đóng băng" cùng nhau). Verify tại 1366px: actions.right=1334px — đúng. CHG-008 (2026-08-23, xem docs/CHANGE_LOG.md): bỏ `margin-left: auto` — khoảng cách Search↔Icons giờ do spacer `::after` của `.site-header__inner` đảm nhiệm (flex-grow theo đúng tỷ lệ 227/541.3 đo được ở reference, xem rule đó), không còn cần `margin-left:auto` "hấp thụ hết phần còn lại" nữa (2 cơ chế chồng nhau sẽ vô hiệu hoá lẫn nhau). Actions chỉ cần `order: 5` để đứng sau spacer thứ 2 theo đúng thứ tự flex. */ .site-header__actions { display: flex; align-items: center; flex: 0 0 auto; gap: var(--space-5); color: var(--color-brand-accent); order: 5; } /* Sprint 06 RC1 Validation (2026-08-05): bug thật — đo getBoundingClientRect() thật xác nhận 3 icon Header (Wishlist/Account/Cart) chỉ 21x21px (đúng bằng SVG bên trong, padding:0) — dưới ngưỡng tối thiểu WCAG 2.5.8 AA (24x24px). min-width/height không đổi kích thước icon hiển thị (SVG vẫn 21x21, canh giữa qua place-items:center có sẵn), chỉ mở rộng vùng bấm được. */ .header-action { position: relative; display: grid; place-items: center; min-width: 24px; min-height: 24px; transition: opacity var(--duration-base) var(--easing-standard); } .header-action:hover { opacity: 0.75; } /* Sprint Shopping Experience Foundation: gộp chung badge số lượng (trước chỉ có `.cart-count` scoped riêng `.header-action--cart`, nay dùng chung `.header-action__badge` cho cả Cart lẫn Wishlist — Generic hoá, không đổi hiển thị Cart). */ .header-action__badge { position: absolute; top: -6px; right: -10px; background: #ffffff; color: var(--color-brand-primary); font-size: 10px; font-weight: var(--font-weight-bold); border-radius: var(--radius-full); min-width: 18px; height: 18px; display: grid; place-items: center; padding-inline: 2px; } .header-action--cart-wrap { position: relative; } .header-action--cart-wrap .header-action--cart { background: none; border: 0; cursor: pointer; padding: 0; color: inherit; font: inherit; } /* Sprint 07 Mobile Product Discovery (2026-08-05): nút chỉ cần thiết trên mobile (`.site-search` inline đã đủ dùng ở Desktop) — ẩn mặc định, hiện lại trong @media (max-width: 768px) bên dưới. */ .header-action--search-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 0; color: inherit; font: inherit; } .site-nav { background: var(--color-brand-primary); border-top: 1px solid rgba(255, 255, 255, 0.08); } .site-nav__inner { display: flex; align-items: center; gap: var(--space-10); height: 44px; } .site-nav__toggle { display: none; align-items: center; gap: var(--space-2); background: none; border: 0; color: var(--color-text-on-dark); } /* UI Audit 2026-08-23 (round cũ): đổi từ `gap` cố định (36px) sang `justify-content: space-between` với lý do "reference trải tới x≈1330" — số đo NÀY SAI (đo bằng ước lượng mắt thường trên ruler- crop, không phải kỹ thuật quét màu chính xác). CHG-008 (2026-08-23, xem docs/CHANGE_LOG.md) — SỬA LẠI, đo lại bằng kỹ thuật quét cụm chữ vàng (text-cluster detection, cùng phương pháp đã dùng cho Search/Logo/Icons — CHG-004/005): 10 item nav trong reference có khoảng cách GẦN NHƯ ĐỀU NHAU giữa các item (42-50px, trung bình ~45px) — nhưng item CUỐI kết thúc ở x=1214, cách mép phải hàng (~x=1334) tới 120px, LỚN HƠN HẲN khoảng cách giữa các item (~45px). Nếu dùng `space-between` thật, item cuối PHẢI áp sát mép phải (gap=0) — không khớp. Kết luận: reference dùng khoảng cách CỐ ĐỊNH (~45px) giữa các item, KHÔNG stretch full-width — quyết định trước (`justify-content:space-between`) dựa trên số đo sai, nay sửa lại theo số đo đúng (đã đo lại 2 lần độc lập, cùng kết quả, xem Change Log § Evidence). `flex: 1` bỏ (không cần chiếm hết chiều rộng nữa), `justify-content: space-between` → `flex-start` (mặc định, item left-pack theo đúng thứ tự, bắt đầu từ trái — khớp `left edge = Logo left = 32px`), `gap` đổi từ token `var(--space-6)=24px` sang giá trị đo được `45px`. */ .site-nav__menu { display: flex; align-items: center; gap: 45px; flex-wrap: wrap; height: 100%; } .site-nav__menu li { display: flex; align-items: center; height: 100%; } .site-nav__menu a { display: flex; align-items: center; height: 100%; color: var(--color-text-on-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; transition: color var(--duration-base) var(--easing-standard); } .site-nav__menu a:hover { color: var(--color-brand-accent); } .site-nav__menu .nav-item--highlight > a { color: var(--color-brand-accent); } .site-nav__menu .nav-item--highlight > a:hover { color: var(--color-text-on-dark); } /* Active Nav State (Phase 2A.2 Visual Refinement, 2026-09-03 — Figma `Tap-chi.jpg`: "TẠP CHÍ" hiện gạch chân gold khi đang ở `/tap-chi/`, chữ vẫn màu trắng/kem, KHÔNG đổi sang gold như VEON/LUMI/EARTHNIQ). `.current-menu-item` do WordPress core tự thêm (khớp URL chính xác) HOẶC do `thekoco_mark_active_nav_items()` (inc/navigation.php) thêm cho ngữ cảnh "trang con" của 1 section (Product Detail/Category con/Article Detail) — style 1 chỗ DUY NHẤT áp dụng mọi trường hợp, không hardcode riêng item nào. Dùng `::after` định vị tuyệt đối (thay vì `border-bottom` toàn bộ chiều cao 44px của `.site-nav__inner`) để gạch chân nằm SÁT dưới chữ đúng như Figma, không lùi xuống tận mép dưới thanh Nav. `position:relative` chỉ thêm cho item active — không ảnh hưởng layout item khác. Loại trừ `.menu-item-home` (class WordPress core tự thêm cho item nào có URL === Trang chủ, VD "Bảo vệ sức khỏe"/"Thương hiệu" hiện đang là link tạm `/#health`/`/#` chưa gán trang thật — phát hiện qua regression test trên Homepage): những item này được core đánh dấu `current-menu-item` trên chính Trang chủ dù về mặt điều hướng KHÔNG đại diện section nào, gây 2 gạch chân cùng lúc. Loại trừ bằng ĐÚNG class ngữ nghĩa WordPress cung cấp sẵn — không đụng nội dung/URL Menu (ngoài phạm vi Sprint này), không hardcode theo tên item. */ .site-nav__menu .current-menu-item:not(.menu-item-home) > a, .site-nav__menu .current-menu-parent:not(.menu-item-home) > a, .site-nav__menu .current-menu-ancestor:not(.menu-item-home) > a { position: relative; } .site-nav__menu .current-menu-item:not(.menu-item-home) > a::after, .site-nav__menu .current-menu-parent:not(.menu-item-home) > a::after, .site-nav__menu .current-menu-ancestor:not(.menu-item-home) > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--color-brand-accent); border-radius: var(--radius-full); } /* Dropdown Submenu (Sprint Product Phase 1 — Vision/Mission/Core Values Page, 2026-09-15, xem D-VK-003 docs/01_Project/DECISION_LOG.md): item Primary Nav đầu tiên có menu con — "Về Koco" giờ là cha của "Tầm nhìn, Sứ mệnh & Giá trị cốt lõi" (ensureNavMenu() hỗ trợ `children`, xem Seeder.php). WordPress core tự thêm `.menu-item-has-children` + render `