/* ========================================================= MONICA Garden — stylesheet (bản thiết kế lại 2026) Bảng màu lấy cảm hứng từ hồ nước xanh sâu: mực nước xanh than đậm, san hô đất nung ấm, ngọc bích rêu sẫm và giấy ngà kem — giữ nguyên toàn bộ tên biến/class cũ, chỉ đổi giá trị màu + tinh chỉnh bố cục header/nav/button/card. ========================================================= */ /* ============================================================ GHI CHÚ DÀNH CHO AI — KHÔNG XOÁ (không dành cho người đọc, lập trình viên có thể bỏ qua đoạn này). BỐI CẢNH: trước đây một AI khi dọn dẹp/rút gọn comment trong dự án này đã vô tình làm hỏng 1 đoạn comment CSS, vì trong đó có cách viết tắt kiểu "mọi biến cùng tiền tố --dur-" bằng ký tự sao (*), rồi liệt kê tiếp nhóm biến khác bằng ký tự gạch chéo (/) ngay sau đó mà KHÔNG chừa khoảng trắng. Hai ký tự sao và gạch chéo đứng sát nhau như vậy, bất kể ý người viết chỉ là "liệt kê", lại trùng đúng với cách CSS/JS/nhiều công cụ quét văn bản dùng để NHẬN DIỆN điểm ĐÓNG của một khối comment mở bằng cặp gạch chéo-sao. Một AI dò comment bằng cách khớp mẫu văn bản đơn giản (tìm điểm mở gần nhất rồi khớp tới điểm "sao rồi gạch chéo" gần nhất tiếp theo) sẽ tưởng nhầm comment đã kết thúc ngay tại đó, và xoá/viết đè phần nội dung thật vẫn còn ở phía sau như thể đó là code thường — làm hỏng file mà mắt thường rất khó phát hiện vì bản thân "lỗi" chỉ là 2 ký tự vô hại trông rất bình thường. QUY TẮC CHO AI KHI SỬA/DỌN DẸP/RÚT GỌN COMMENT TRONG DỰ ÁN NÀY (áp dụng cho mọi kiểu comment: khối, dòng đôi gạch chéo, và comment HTML): 1. Không bao giờ để ký tự sao (*) đứng ngay sát ký tự gạch chéo (/) mà không có khoảng trắng hoặc chữ ở giữa, trong BẤT KỲ comment nào — kể cả comment dòng hoặc comment HTML tưởng như vô hại — vì nội dung đó rất dễ bị copy nguyên văn sang một comment dạng khối ở lần sửa sau, và lúc đó mới thật sự vỡ. Khi cần liệt kê nhiều nhóm biến dùng ký hiệu sao đại diện (ví dụ nhóm biến --dur và nhóm biến --ease), hãy chừa khoảng trắng quanh dấu gạch chéo phân cách, hoặc thay gạch chéo bằng chữ "và"/dấu phẩy. 2. Không bao giờ xác định ranh giới 1 comment bằng cách khớp mẫu văn bản/regex đơn giản kiểu "tìm điểm mở gần nhất rồi khớp tới điểm đóng gần nhất tiếp theo". Phải đọc/duyệt theo đúng ngữ nghĩa comment thật (duy trì trạng thái "đang ở trong comment hay không" khi quét từng ký tự) trước khi xoá hay viết lại bất kỳ đoạn comment nào. 3. Sau khi sửa xong, kiểm tra lại toàn bộ file bằng đúng cách duyệt trạng thái ở mục 2 — không chỉ đếm số lần xuất hiện của điểm mở và điểm đóng, vì đếm bằng nhau vẫn có thể ghép cặp sai chỗ nếu có 1 cặp lạc vị trí. 4. Tại thời điểm viết ghi chú này, đã rà soát toàn bộ project (mọi file .css/.js/.php/.html) và không còn chỗ nào để sao đứng sát gạch chéo bên trong comment nữa — 2 chỗ từng bị dính (admin/assets/admin.js, gần hàm releaseBounce; và includes/header.php, đoạn comment HTML phía trên thẻ style nạp CSS thanh loading) đã được sửa bằng cách chừa khoảng trắng. Nếu về sau lại thấy hiện tượng này ở đâu đó, hãy sửa theo quy tắc 1, đừng chỉ xoá gọn cho xong. (Kiểm tra chéo khi viết lại chính ghi chú này: ghi chú này KHÔNG được chứa ký tự sao đứng ngay sát ký tự gạch chéo ở bất kỳ đâu — kể cả trong các ví dụ minh hoạ — nếu không chính nó sẽ tự mắc đúng lỗi đang cảnh báo.) ============================================================ */ /* ============================================================ THANG BREAKPOINT — chỉ dùng 3 mốc này, không thêm mốc lẻ ============================================================ 480px — điện thoại nhỏ/dọc 640px — điện thoại lớn / phablet 900px — mốc MOBILE CHÍNH (ranh giới desktop <-> mobile của site; đi cặp với @media (min-width: 901px) cho phần chỉ hiện trên desktop) 4 mốc lẻ 860/560/520/420 từng chỉ xuất hiện đúng 1 lần mỗi mốc (vá cục bộ qua từng lần sửa, không phải quyết định thiết kế) đã được gộp về mốc chuẩn gần nhất theo hướng "đổi sang bố cục hẹp SỚM hơn" (860->900, 560->640, 520->640, 420->480) — hướng này luôn an toàn: bố cục hẹp áp dụng cho dải màn hình rộng hơn một chút, không bao giờ làm nội dung chật thêm. admin/assets/admin.css dùng 900/480 và assets/css/chatbot-widget.css dùng 640 — đều đã nằm trong thang này, không cần sửa. THÊM MỐC MỚI: đừng. Hãy dùng 1 trong 3 mốc trên. Nếu thật sự bắt buộc phải thêm, sửa luôn danh sách này để nó không lạc hậu. ============================================================ */ /* Google Fonts (Fraunces + Be Vietnam Pro) được nạp bằng thẻ link trong head của includes/header.php, không dùng import trong CSS nữa vì import tạo chuỗi tải tuần tự (style.css rồi mới tới CSS font) và chặn render. */ :root { --ink: #12222c; --ink-soft: #253f4d; --paper: #f7f5ef; --paper-deep: #ece7d9; --koi-orange: #d9663b; --koi-red: #c23b4a; --jade: #1f6f6a; --gold: #c99a3a; /* --gold dùng làm màu ICON/viền trang trí thì ổn (không bắt buộc theo chuẩn tương phản chữ), nhưng dùng làm màu CHỮ thật (heading khi hover, badge hạng thành viên) chỉ đạt 2.33–2.36:1 trên nền --paper/#fbf3e0 — fail rõ chuẩn WCAG AA (4.5:1). --gold-text là bản tối hơn CÙNG TÔNG, dành riêng cho mọi chỗ --gold hiển thị dưới dạng chữ (đạt ~5.7-5.8:1 trên cả 2 nền đang dùng); --gold gốc giữ nguyên cho icon. */ --gold-text: #785b21; /* ------------------------------------------------------------------ MÀU TRẠNG THÁI + NỀN NHẠT ------------------------------------------------------------------ Trước đây bộ màu nền nhạt của badge trạng thái (đơn hàng, coupon, vận đơn) được gõ cứng bằng mã hex rải khắp 2 file CSS + nhiều file PHP: #e9f3ef (20 lần), #fdecdc (15), #fbeaea (12), #2b5fd9 (8), #f1f1f1 (7), #eaf1fd (6) — không có token nào. Hệ quả: đổi tông màu thương hiệu là phải đi sửa từng chỗ, và chắc chắn sót. Mỗi token dưới đây là bản NHẠT của 1 màu nhấn đã có, dùng làm nền cho chữ cùng tông (vd nền --jade-tint + chữ var(--jade)). --info / --info-tint là cặp xanh dương cho trạng thái "đang chờ, chưa phải vấn đề" (Đang xử lý / Chưa bắt đầu). Đây là màu DUY NHẤT trong bộ trạng thái không dẫn xuất từ 4 màu nhấn gốc (--koi-orange/--koi-red/ --jade/--gold) nên trước giờ không có chỗ nào để đặt — nay có. */ --jade-tint: #e9f3ef; --koi-orange-tint: #fdecdc; --koi-red-tint: #fbeaea; --gold-tint: #faf3e4; --info: #2b5fd9; --info-tint: #eaf1fd; --neutral-tint: #f1f1f1; /* Nền DÒNG bảng admin — nhạt hơn 1 bậc nữa so với nền badge (-tint) ở trên, để tô cả dòng đơn hàng theo trạng thái mà không nuốt mất màu badge nằm trong chính dòng đó. Xem orderStatusColors() (includes/functions.php). */ --koi-orange-row: #fffaf5; --info-row: #f6f9ff; --jade-row: #f5faf7; --koi-red-row: #fef7f7; /* Màu sao đánh giá CHƯA chọn (nền be nhạt, đi cặp với --gold cho sao đã chọn). Trước đây gõ cứng #e3dccb ở 6 chỗ trong index.php/product.php/account.php/main.js. */ --star-empty: #e3dccb; --line: rgba(18, 34, 44, 0.12); --shadow: 0 16px 36px -18px rgba(18, 34, 44, 0.32); --shadow-soft: 0 8px 22px -12px rgba(18, 34, 44, 0.22); --accent-grad: linear-gradient(135deg, var(--jade) 0%, #164f4c 100%); /* Chữ phụ (thời gian, "đã bán", ghi chú...) — gom 5 mã xám gần giống nhau (#7c8794, #5c6873, #9aa3ad, #7c8874, #555) về 1 nguồn duy nhất. Giá trị #7c8794 gốc (được dùng nhiều nhất, 28 lần) chỉ đạt tỷ lệ tương phản 3.35:1 trên --paper và 2.96:1 trên --paper-deep — dưới chuẩn WCAG AA cho chữ thường (4.5:1). Tối lại thành #57606b (cùng tông xanh xám, giữ đúng "cảm giác" màu gốc) để đạt 5.85:1 trên --paper và 5.17:1 trên --paper-deep — đọc được trên CẢ 2 nền đang dùng biến này, không chỉ 1 trong 2. */ --text-muted: #57606b; /* Thang cỡ chữ cho text phụ/nhỏ — gom 5 giá trị lẻ (12, 12.5, 13, 13.5, 14px) về 2 mức chuẩn. */ --fs-xs: 12px; --fs-sm: 13.5px; --fs-base: 15px; --fs-lg: 18px; --fs-xl: 24px; /* Bo góc — gom 9 giá trị lẻ (3, 8, 10, 12, 14, 16, 18, 22, 999px) về 3 mức. */ --radius-sm: 8px; --radius: 14px; --radius-pill: 999px; /* Thang spacing theo lưới 4px */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Thang z-index có tên — giữ đúng thứ tự đang có trong site (.site-header: 50, .toast-container: 100, .confirm-modal-overlay: 200); --z-dropdown đặt ở mức 80, đang dùng cho .search-suggest và .select-custom-panel */ --z-sticky-header: 50; --z-dropdown: 80; --z-toast: 100; --z-modal: 200; /* Chiều cao "cứng" (chưa kể safe-area-inset-bottom trên iPhone có notch/thanh cử chỉ) của bottom tab bar mobile mới — dùng làm mốc tính padding-bottom cho .site-footer (tránh footer bị che, xem @media max-width:900px bên dưới, mục ".site-footer") và tính offset "xếp chồng" cho FAB tìm kiếm/.floating-social phía trên nó. */ --mobile-bottom-nav-h: 60px; /* top cho position:sticky của .account-sidebar (trang account.php, desktop >900px) — PHẢI >= chiều cao thật của .site-header lúc đang sticky (gồm cả header-row-1 + header-row-2, thanh nav ngang) để không bị header đè lên phần đầu sidebar khi cuộn. 148px là giá trị fallback tĩnh (dùng khi JS tắt hoặc trước khi kịp chạy) — giá trị THẬT được main.js (initAccountSidebar()) đo trực tiếp offsetHeight của .site-header rồi ghi đè biến này ngay khi tải trang, luôn khớp dù sau này header cao/thấp đi. */ --account-sticky-top: 148px; /* Bộ easing dùng chung cho toàn bộ cụm "bottom sheet Danh mục/Giỏ hàng + icon nút toggle + ping", gom về đúng 2 đường cong theo hướng chuyển động (vào/ra), mọi phần tử liên quan đều dùng lại 1 trong 2 biến này — tham khảo tinh thần sheet/modal iOS: phẳng, điềm tĩnh, không có overshoot/bung nảy kiểu Material spring: - --ease-sheet-in: cho MỌI hiệu ứng "đi vào" (sheet mở, icon co lại lúc mở, ping toả ra) — khởi động chậm rồi hãm êm dần về đích. - --ease-sheet-out: cho các hiệu ứng "đi ra" không bắt nguồn từ 1 cử chỉ kéo tay đang có đà (icon phục hồi lúc đóng, ping thu vào) — đúng đảo ngược về mặt toán học của --ease-sheet-in, không phải 1 đường cong "accelerate" tự chọn riêng. Với cubic-bezier(x1,y1,x2,y2), phiên bản chạy ngược thời gian đúng là cubic-bezier(1-x2, 1-y2, 1-x1, 1-y1) — tức lấy đối xứng điểm qua tâm (.5,.5) của toàn đường cong. --ease-sheet-in là cubic-bezier(.2, 0, 0, 1) nên đảo ngược ra đúng cubic-bezier(1, 0, .8, 1). Lưu ý: sheet đóng (.category-sheet, không .sheet-open) không dùng biến này nữa — xem --ease-sheet-drag-release ngay dưới đây để biết lý do. - --ease-sheet-drag-release: dùng cho MỌI cách ĐÓNG sheet (bấm nút, bấm nền, phím Escape, VÀ buông tay sau khi kéo — tất cả đều chung 1 easing này, xem .category-sheet bên dưới). Sở dĩ KHÔNG dùng --ease-sheet-out (dù về lý thuyết "đối xứng toán học đẹp" với chiều mở) là vì: mở là 1 đường cong "bung nhanh rồi hãm êm ở cuối" — đảo ngược thời gian thuần tuý của nó ra đúng đường cong "gần như đứng yên ở đầu rồi lao nhanh về cuối". Nhịp "đứng yên" đó rất dễ nhận ra ngay khung hình đầu tiên (lúc mắt nhìn kỹ nhất) — gây cảm giác "khựng lại từ từ rồi mới đóng xuống" dù CSS khai báo transition dài .4s y hệt lúc mở. Đặc biệt rõ khi đóng ngay sau 1 cú kéo tay đang CÓ ĐÀ (ngón tay vừa di chuyển liên tục): khựng đột ngột đó phá vỡ hẳn cảm giác "tiếp nối" tự nhiên. Đổi hẳn sang 1 đường cong giảm tốc THUẦN (không khựng ở đầu, chuẩn "decelerate" quen thuộc Material/iOS) cho MỌI lượt đóng — không chỉ kéo tay — để toàn bộ sheet nhất quán 1 cảm giác đóng duy nhất. */ --ease-sheet-in: cubic-bezier(.2, 0, 0, 1); --ease-sheet-out: cubic-bezier(1, 0, .8, 1); --ease-sheet-drag-release: cubic-bezier(0, 0, .2, 1); /* ============================================================ HỆ THỐNG MOTION CHUẨN CHO UI THÔNG THƯỜNG (hover nút/thẻ, badge, toast, dropdown, wishlist...) — TÁCH BIỆT với 3 biến --ease-sheet-* ở trên (dành riêng cho bottom-sheet Danh mục/Giỏ hàng, không đụng). Hệ thống 1 bộ token có tên, dựa theo QUY MÔ của thay đổi (không phải 1 số dùng cho tất cả) — tránh rải rác nhiều giá trị duration và độ "nhấc lên" khi hover không theo quy luật giữa các thành phần. Tinh thần giống Apple HIG + easing "standard" của Material 3: THANG THỜI GIAN — chọn theo thay đổi lớn hay nhỏ, không theo cảm tính: - --dur-instant (100ms): phản hồi TỨC THÌ cho thao tác nhấn/chạm cần gần như không có độ trễ cảm nhận được (:active nhấn nút, bật/tắt trạng thái nhỏ) — nhanh hơn cả nhóm "vi tương tác" bên dưới vì đây là phản hồi CHẠM, không phải HOVER. - --dur-fast (150ms): vi tương tác cực nhỏ — đổi màu chữ/icon/viền khi hover, không có chuyển động hình học. - --dur-base (200ms): tương tác chuẩn — hover nút, hover thẻ sản phẩm/bài viết/danh mục, hiện/ẩn tooltip nhỏ. Đây là mức MẶC ĐỊNH, dùng khi không chắc chọn mức nào. - --dur-slow (300ms): chuyển động lớn hơn — mở dropdown/badge lớn, toast xuất hiện, fade cả khối nội dung. Việc nào hiện > 350ms mà không phải loại này thì nên rút ngắn lại (chậm dễ thấy ì, thiếu chuyên nghiệp). ĐƯỜNG CONG: - --ease-standard: cubic-bezier(.4,0,.2,1) — dùng cho tương tác 2 CHIỀU (hover vào rồi hover ra dùng lại đúng đường cong này, không cần tách riêng) — êm ở cả 2 đầu, không nảy/bung. - --ease-enter: cubic-bezier(0,0,.2,1) — dùng cho hiệu ứng XUẤT HIỆN (fade in, slide in, toast hiện ra, dropdown mở) — hãm êm ở cuối, giống tinh thần --ease-sheet-in nhưng dùng hệ số chuẩn Material "decelerate" cho các phần tử nhỏ hơn sheet. - --ease-exit: cubic-bezier(.4,0,1,1) — dùng cho hiệu ứng BIẾN MẤT (fade out, toast ẩn đi) — tăng tốc nhẹ ở đầu để cảm giác "rời đi" nhanh gọn, không lề mề. KHÔNG dùng easing có nảy/bung (bounce/elastic) cho các đường cong trên — chỉ decorative đặc thù (xem ghi chú "ANIMATION TRANG TRÍ" tại từng vị trí, ví dụ logo ripple, hồ cá footer) mới được giữ timing riêng vì đó là trang trí, không phải phản hồi tương tác. ĐỘ "NHẤC LÊN" (hover lift) — chuẩn hoá theo VAI TRÒ phần tử, chỉ 2 mức: - Phần tử nhỏ (nút, chip, icon tròn): translateY(-2px) + shadow nhẹ. - Phần tử lớn (card: product/post/cat...): translateY(-3px) + shadow rõ hơn — CHỈ 1 mức dùng chung cho MỌI loại card, không lệch nhau. prefers-reduced-motion: xem khối @media riêng phía dưới (giữ nguyên, không đổi khi thêm token này) — token thời gian/easing ở đây không tự động tắt animation, việc tắt vẫn do khối @media đó đảm nhiệm. */ --dur-instant: .1s; --dur-fast: .15s; --dur-base: .2s; --dur-slow: .3s; --ease-standard: cubic-bezier(.4, 0, .2, 1); --ease-enter: cubic-bezier(0, 0, .2, 1); --ease-exit: cubic-bezier(.4, 0, 1, 1); /* ĐỘ "CO LẠI" KHI NHẤN (:active scale) — dùng CHUNG 1 công thức cho MỌI nút/dropdown chạm được trên site (.btn, .select-custom-trigger...), thay vì mỗi nơi tự đặt 1 con số % scale() cố định. Lý do: scale() co theo % CHÍNH bề rộng phần tử, nên cùng 1 con số % tạo ra độ dịch chuyển (px) rất khác nhau giữa 1 dropdown lọc hẹp (~190px, khu vực đầu trang) và 1 select rộng cả form (~500-650px, vd "Chế độ hiển thị"/"Phạm vi áp dụng" ở trang Mã giảm giá) — cùng co 2% nhưng dropdown hẹp chỉ lệch ~3.8px trong khi select rộng lệch tới ~12px, mắt thấy "giật mạnh" hẳn dù chung 1 dòng CSS. Công thức dưới đây quy về ĐÚNG 1 mức dịch chuyển pixel mục tiêu cho mọi kích thước, dropdown lọc đầu trang (~190px) làm chuẩn tham chiếu: - --press-target-px: tổng số px 2 cạnh trái/phải cùng lệch vào khi nhấn (số thuần, không đơn vị, vì dùng để CHIA cho --press-w cũng là số thuần bên dưới) — 3.8 tương ứng đúng cảm giác dropdown lọc hiện có (190px * 2% = 3.8px), dùng làm chuẩn cho mọi nơi khác. - --press-cap: trần % tối đa (giữ nguyên mốc 2% cũ) — phòng trường hợp phần tử hẹp hơn cả 190px thì vẫn không co nhiều hơn cảm giác gốc, KHÔNG co mạnh hơn dropdown tham chiếu. - --press-w: bề rộng THẬT (px, số thuần) của TỪNG phần tử — CSS thuần không tự đo được, nên assets/js/main.js dùng ResizeObserver ghi số này trực tiếp lên từng phần tử (observePressWidth()). Giá trị 190 khai ở đây chỉ là dự phòng cho lúc JS chưa kịp đo xong hoặc trình duyệt không hỗ trợ ResizeObserver — khi đó phần tử vẫn hoạt động đúng như cảm giác dropdown lọc mặc định, không vỡ/lỗi gì. Xem .btn:active + .select-custom-trigger:active bên dưới để thấy công thức áp dụng. */ --press-target-px: 3.8; --press-cap: .02; --press-w: 190; /* --ease-standard/--ease-enter/--ease-exit đều là cubic-bezier 1 chiều (fade/slide/mở-đóng) — không phù hợp cho .form-shake, vốn dao động qua lại nhiều lần trong 1 lần chạy. Token riêng cho nhu cầu này (cùng tinh thần --ease-sheet-* tách riêng cho bottom sheet ở trên), giữ 360ms để đúng "cảm giác" đã chốt. */ --dur-shake: .36s; --ease-shake: ease-in-out; --lift-sm: -2px; --lift-lg: -3px; --font-display: 'Fraunces', serif; --font-body: 'Be Vietnam Pro', sans-serif; } * { box-sizing: border-box; } /* Tắt ô xám mặc định lúc chạm trên di động (kế thừa xuống mọi phần tử). Phản hồi lúc nhấn do các rule :active của site đảm nhiệm. */ html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } /* An toàn chống tràn ngang trên mobile: bất kỳ phần tử con nào lỡ rộng hơn viewport sẽ bị cắt thay vì kéo ra cả thanh cuộn ngang và làm lệch vị trí các phần tử position:fixed (nút Facebook/Zalo nổi, nút lên đầu trang...). Lưu ý cơ chế: overflow-x:hidden chỉ đặt trên , KHÔNG đặt trên — nếu đặt cả trên body sẽ khiến .site-header (position:sticky) mất tác dụng dính khi cuộn. Lý do: hễ 1 trục overflow (x hoặc y) được khai báo khác "visible" thì trục còn lại tự động được tính thành "auto" — nên "overflow-x:hidden" trên body thực chất biến thành "overflow:hidden auto", khiến body trở thành 1 "khối cuộn" (scroll container) của riêng nó, tách biệt khỏi việc cuộn trang thật (vốn do viewport/ đảm nhiệm). .site-header là con trực tiếp của và dùng position:sticky — sticky luôn tính toán theo khối cuộn gần nhất chứa nó; một khi đó là body (chứ không phải viewport thật), hiệu ứng "dính khi cuộn" coi như vô hiệu trên phần lớn trình duyệt di động, dù không hề có lỗi gì trong khai báo position:sticky;top:0 cả. Trình duyệt tự động áp dụng overflow của phần tử gốc thẳng vào viewport (quy tắc chuẩn của HTML/CSS), nên chỉ khai trên vẫn chặn tràn ngang mà không tạo thêm khối cuộn phụ nào ở giữa — sticky nhờ vậy hoạt động bình thường. chỉ còn giữ max-width:100% (không kèm overflow) để phòng hờ, không ảnh hưởng gì đến sticky. */ html { max-width: 100%; overflow-x: hidden; } body { max-width: 100%; margin: 0; font-family: var(--font-body); background: var(--paper); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; /* Tránh hiện con trỏ nhấp nháy khi bấm vào khoảng trống giữa các phần tử (khoảng trắng trong HTML đôi khi bị trình duyệt coi là văn bản có thể chọn) */ -webkit-user-select: none; -moz-user-select: none; user-select: none; } /* Vẫn cho phép chọn/copy chữ ở nội dung khách cần đọc */ p, .pd-desc, .post-body, .contact-card p, .cart-prod a, .product-name a, input, textarea, select, [contenteditable] { -webkit-user-select: text; -moz-user-select: text; user-select: text; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } ul { list-style: none; margin: 0; padding: 0; } .container { max-width: 1500px; margin: 0 auto; padding: 0 var(--space-5); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--jade); font-weight: 700; } .eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--jade); } /* ---------- focus states (a11y) ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--koi-orange); outline-offset: 2px; } /* ---------- skip-to-content link (a11y) ---------- */ /* Cho phép người dùng bàn phím / screen reader nhảy thẳng đến nội dung chính, bỏ qua header navigation (Logo, hotline, search, menu, đăng nhập, giỏ hàng — 6-7 phần tử focusable). Mặc định ẩn bằng position:absolute; left:-9999px (không dùng display:none vì không tab được), chỉ hiện khi focus — xem header.php. Style nhất quán với focus outline ở trên (--koi-orange, outline-offset:2px). Hiệu ứng slide-down + fade-in khi focus giúp người dùng thấy rõ link vừa xuất hiện ở đầu trang (không phải "pop in" đột ngột khó chú ý). Dùng z-index cao (--z-toast+1 = 101) để nằm trên cả toast/loading bar. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 101; padding: var(--space-3) var(--space-5); background: var(--koi-orange); color: #fff; font-weight: 700; text-decoration: none; border-radius: 0 0 var(--radius-sm) 0; transition: left 0s var(--ease-standard); } .skip-link:focus, .skip-link:focus-visible { left: 0; outline: 3px solid var(--ink); outline-offset: 0; } /* Khi user nhảy đến #main-content (qua skip link hoặc anchor), trừ padding-top để tiêu đề đầu tiên của section không bị header sticky che mất — giá trị tương ứng với chiều cao .site-header (~90px desktop, ~60px mobile). Dùng scroll-margin-top thay vì padding-top trên :target vì scroll-margin không ảnh hưởng đến layout (không đẩy nội dung xuống), chỉ tác động khi scroll đến anchor. */ :target { scroll-margin-top: 100px; } @media (max-width: 900px) { :target { scroll-margin-top: 70px; } } /* =========================== HEADER =========================== */ /* Nền topbar + thanh nav ngang (.header-row-2) dùng chung 1 ngôn ngữ hình ảnh: gradient xanh than sâu (đúng tông --ink hiện có) + 2 quầng sáng mờ (blur) màu san hô/vàng đồng — mô phỏng ánh đèn lồng phản chiếu trên mặt hồ koi về đêm. Kỹ thuật blob giống hệt .trust-strip-blob đã dùng ở phần thân trang (span/pseudo-element bo tròn, filter:blur, z-index:-1 trong 1 stacking context isolate) — chỉ khác là dùng ::before/::after thay vì thêm span trong HTML, để áp dụng tự động cho mọi trang dùng chung includes/header.php mà không cần sửa từng file PHP. */ .topbar { background: linear-gradient(100deg, #0d1920 0%, #1a2e37 55%, #0e1b22 100%); color: var(--paper); font-size: var(--fs-sm); border-bottom: 1px solid rgba(247,245,239,.08); position: relative; isolation: isolate; overflow: hidden; } .topbar::before, .topbar::after { content: ''; position: absolute; border-radius: 50%; z-index: -1; filter: blur(22px); pointer-events: none; } .topbar::before { width: 220px; height: 220px; background: radial-gradient(circle, rgba(201,154,58,.32), transparent 70%); top: -150px; right: 14%; } .topbar::after { width: 180px; height: 180px; background: radial-gradient(circle, rgba(31,111,106,.30), transparent 70%); bottom: -140px; left: 8%; } .topbar .container { display: flex; justify-content: space-between; align-items: center; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap; gap: 6px; /* Kỹ thuật full-bleed giống hệt .header-row-1 bên dưới: đẩy khối Địa chỉ (topbar-address) sát mép phải THẬT của màn hình, trong khi Hotline vẫn đứng đúng vị trí thẳng hàng với Logo/Trang chủ (padding-left dùng công thức max() để bù lại đúng khoảng cách mà .container vẫn tạo ra ở phía trái). */ width: 100vw; max-width: 100vw; position: relative; left: 50%; margin-left: -50vw; padding-left: max(var(--space-5), calc((100vw - 1500px) / 2 + var(--space-5))); padding-right: var(--space-5); } /* padding-right của .topbar .container chỉ tăng lên 72px ở desktop (>=901px, cùng ngưỡng với breakpoint hamburger/off-canvas của site). Mobile/tablet (<=900px) giữ nguyên 24px (var(--space-5)) vì lúc đó .topbar .container chuyển sang justify-content:center — nếu đổi padding-right chung cho mọi màn hình thì padding trái/phải sẽ lệch nhau (trái 24px, phải 72px), khiến khối địa chỉ mobile bị kéo lệch tâm thay vì canh giữa đúng như @media (max-width:640px) bên dưới yêu cầu. */ @media (min-width: 901px) { .topbar .container { padding-right: 72px; } } .topbar-contact { display: flex; align-items: center; } .topbar a { opacity: .82; transition: opacity var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .topbar a:hover, .topbar a:active { opacity: 1; color: var(--koi-orange); } .topbar .divider { opacity: .3; margin: 0 var(--space-2); } .topbar-address { opacity: .7; } .topbar-address:hover, .topbar-address:active { opacity: 1; color: var(--koi-orange); } .topbar-social-link { display: inline-flex; align-items: center; gap: 5px; } .topbar-zalo-icon { border-radius: 4px; display: block; } /* Icon Zalo/Facebook (topbar 16px, social-row 34px, floating-social 54px, nút "Chat Zalo" trong khối mua sỉ product.php 15px) dùng file PNG xuất sẵn đúng theo từng vị trí (zalo-15/16/34/54.png, facebook-34/54.png) thay vì luôn tải file gốc 256px rồi bắt trình duyệt tự downscale lúc runtime. Lý do: downscale 1 bước quá mạnh (256px → 15-54px, tức 5-17 lần) dễ bị mờ/vỡ nét trên màn hình desktop devicePixelRatio=1 (không đủ pixel thật để trình duyệt lấy mẫu đẹp), dù trên di động (devicePixelRatio 2-3) vẫn nét vì có nhiều pixel thật hơn. Các file xuất sẵn này được resize bằng Lanczos ở độ phân giải GẤP 3 LẦN kích thước hiển thị (vd zalo-16.png thực tế là 48×48px) — vừa đủ nét ở desktop thường, vừa đủ nét ở màn Retina di động, không lặp lại lỗi cũ. KHÔNG đổi các file này về đúng 1:1 kích thước hiển thị (vd 16×16px thật) vì sẽ làm mờ ngược lại trên di động màn Retina. Nút "Chat Zalo" ở product.php TRƯỚC ĐÂY dùng 1 icon SVG vẽ tay riêng (chữ "Z" trên nền bo góc) — khác hẳn phong cách logo chính thức dùng ở mọi nơi khác trên site; đã đổi về cùng file zalo-*.png để nhất quán 100% hình ảnh thương hiệu trên toàn site, không còn 2 kiểu icon Zalo khác nhau. */ .topbar-phone { background: none; border: none; color: var(--paper); font-family: var(--font-body); font-size: var(--fs-sm); opacity: .82; cursor: pointer; padding: 0; transition: opacity var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .topbar-phone:hover, .topbar-phone:active { opacity: 1; color: var(--koi-orange); } .site-header { background: rgba(247,245,239,.92); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: var(--z-sticky-header); } /* Hiệu ứng kính mờ (backdrop-filter) CHỈ bật ở desktop (>900px), KHÔNG bật ở mobile. Lý do (đã từng gây lỗi nghiêm trọng, ghi lại để không lặp lại): backdrop-filter/filter/transform/perspective/will-change đặt trên 1 phần tử sẽ khiến chính phần tử đó trở thành "containing block" cho MỌI con cháu position:fixed của nó (theo đặc tả CSS), y hệt tác dụng của transform. .header-row-2 (khay menu off-canvas) và .nav-overlay (lớp phủ tối) đều là con của .site-header và dùng position:fixed với top:0/bottom:0/inset:0 để phủ TOÀN BỘ viewport khi mở menu trên mobile — nhưng nếu .site-header có backdrop-filter, "viewport" của chúng bị thu hẹp lại thành đúng khung hình chữ nhật của .site-header (chỉ cao bằng topbar + header-row-1, ~90px), khiến toàn bộ menu + lớp phủ tối bị cắt gọn vào 1 dải mỏng ở trên cùng, hầu hết mục menu không hiển thị được, menu mobile coi như hỏng hoàn toàn dù CSS .header-row-2 hoàn toàn đúng. Ở desktop, .header-row-2/.nav-overlay không dùng position:fixed nên không sao — vì vậy giải pháp là chỉ bật backdrop-filter từ 901px trở lên (đúng ngưỡng đối lập với @media (max-width:900px) bên dưới, nơi off-canvas kích hoạt), giữ nguyên hiệu ứng kính mờ ở desktop, loại bỏ hoàn toàn ảnh hưởng ở mobile. */ @media (min-width: 901px) { .site-header { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } } .header-row-1 { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; gap: var(--space-5); /* "Phá" khung .container (max-width:1500px; margin:0 auto) CHỈ để đẩy header-actions (search + đăng nhập + giỏ hàng) sát mép phải THẬT của màn hình — trong khi Logo vẫn đứng đúng vị trí thẳng hàng với Hotline (topbar) như trước, không bị xê dịch. Kỹ thuật "full-bleed": cho hàng này rộng bằng đúng viewport (100vw) rồi kéo ngược lại nửa viewport (left:50%; margin-left:-50vw) để thoát khỏi max-width/margin:auto mà .container áp lên nó. padding-left dùng công thức max(...) để BÙ LẠI chính xác khoảng cách mà .container vẫn đang tạo ra cho Hotline/Trang chủ (24px, hoặc thêm phần margin auto khi màn hình rộng hơn 1500px) — nhờ vậy Logo không bị lệch dù màn hình rộng bao nhiêu. padding-right thì cố định 24px để header-actions luôn sát mép phải thật, không phụ thuộc việc canh giữa 1500px nữa. */ width: 100vw; max-width: 100vw; position: relative; left: 50%; margin-left: -50vw; padding-left: max(var(--space-5), calc((100vw - 1500px) / 2 + var(--space-5))); padding-right: var(--space-5); } .footer-brand .brand { margin-left: 0; } .header-row-2 { border-top: 1px solid var(--line); background: var(--ink-soft); } /* Nâng thanh nav ngang desktop thành lớp gradient + quầng sáng mờ (cùng ngôn ngữ hình ảnh với .topbar phía trên) thay vì màu phẳng var(--ink-soft) — chỉ khoá trong desktop (>=901px) vì mobile .header-row-2 là khay menu off-canvas RIÊNG BIỆT (nền sáng giấy ngà, xem @media max-width:900px bên dưới), tách biệt hoàn toàn 2 ngữ cảnh hiển thị như các khối khác trong file này. */ @media (min-width: 901px) { .header-row-2 { background: linear-gradient(120deg, #0c1920 0%, #17282f 50%, #0d1a20 100%); position: relative; isolation: isolate; overflow: hidden; } .header-row-2::before, .header-row-2::after { content: ''; position: absolute; border-radius: 50%; z-index: -1; filter: blur(26px); pointer-events: none; } .header-row-2::before { width: 320px; height: 320px; background: radial-gradient(circle, rgba(217,102,59,.24), transparent 70%); top: -210px; left: 22%; } .header-row-2::after { width: 260px; height: 260px; background: radial-gradient(circle, rgba(201,154,58,.22), transparent 70%); bottom: -190px; right: 12%; } } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 23px; color: var(--ink); white-space: nowrap; } .brand .mark { width: 40px; height: 40px; flex-shrink: 0; } .brand:active { opacity: .8; } /* ---- LOGO RIPPLE — thay thế vạch gạch trang trí cũ ---- Ý tưởng: 1 vòng tròn mảnh (::after) lan toả ra từ logo rồi mờ dần, lặp lại chậm rãi — mô phỏng gợn sóng loang trên mặt hồ koi khi cá lượn qua. Rất tinh tế (viền 1px, không nền đặc), tốc độ chậm (4.5s/vòng) và có khoảng nghỉ giữa 2 lần lan (easing dừng ở 70% rồi giữ mờ tới hết chu kỳ) để không gây rối mắt hay cảm giác "nhấp nháy liên tục" — đúng tinh thần thanh lịch, nhẹ nhàng. ANIMATION TRANG TRÍ (ngoại lệ có chủ đích, xem nguyên tắc 7 hệ thống motion ở :root) — lặp vô hạn, không phản hồi thao tác, giữ nguyên timing riêng. */ .mark-wrap { position: relative; display: inline-flex; flex-shrink: 0; } .mark-wrap::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--koi-orange); opacity: 0; animation: logo-ripple 4.5s cubic-bezier(.25, .1, .3, 1) infinite; pointer-events: none; } /* Vòng gợn sóng thứ 2, lệch pha (-2.25s = nửa chu kỳ) — tạo cảm giác nhiều lớp sóng nối tiếp nhau thay vì chỉ 1 vòng đơn điệu, vẫn giữ đúng nhịp chậm rãi. */ .mark-wrap::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--jade); opacity: 0; animation: logo-ripple 4.5s cubic-bezier(.25, .1, .3, 1) infinite -2.25s; pointer-events: none; } @keyframes logo-ripple { 0% { transform: scale(1); opacity: .5; } 60% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } } /* Khách/thiết bị yêu cầu giảm chuyển động (accessibility) — tắt hẳn animation, chỉ còn logo tĩnh, không có cách nào khác để "giảm bớt" 1 hiệu ứng lặp vô hạn ngoài tắt hẳn nó. */ @media (prefers-reduced-motion: reduce) { .mark-wrap::before, .mark-wrap::after { animation: none; } } .brand small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--koi-orange); margin-top: 1px; } .main-nav { display: flex; align-items: center; gap: 2px; /* CỐ Ý không giới hạn max-width:1500px + margin:auto như .container ở đây: thanh nav được yêu cầu tràn sát 2 mép màn hình (khác với topbar/header-row-1 vẫn canh giữa tối đa 1500px để dễ đọc trên màn rộng) — "Trang chủ" (item đầu) tự áp sát mép trái, còn nhóm "Hỗ trợ" (Kinh nghiệm/Tra cứu đơn hàng/Liên hệ, item cuối) tự áp sát mép phải nhờ .nav-scroll ở giữa dùng flex:1 chiếm hết khoảng trống còn lại (xem media query desktop bên dưới) — chỉ còn padding cố định var(--space-5) cách đúng 2 mép làm khoảng đệm, không phụ thuộc chiều rộng màn hình. */ padding: 0 var(--space-5); overflow-x: auto; white-space: nowrap; /* Ẩn thanh cuộn ngang cho gọn mắt, vẫn cuộn được bằng chuột/vuốt nếu màn quá hẹp */ scrollbar-width: none; -ms-overflow-style: none; } .main-nav::-webkit-scrollbar { display: none; } /* .nav-scroll bọc riêng nhóm "Danh mục sản phẩm" — CHỈ có ý nghĩa bố cục ở desktop (>900px, xem media query .main-nav .nav-group bên dưới). Ở mobile không có luật CSS nào nhắm vào .nav-scroll nên nó không tạo box/margin/padding riêng, khay menu off-canvas hiển thị y hệt như trước khi thêm div bọc này. */ /* ---- Desktop: thanh nav tối màu, item dạng underline khi active/hover ---- HTML bên trong .header-row-2 dùng chung cấu trúc/class với sidebar admin (.nav-item, .nav-group, .nav-icon...) để tái dùng ở menu off-canvas mobile bên dưới — icon + tiêu đề nhóm chỉ có ý nghĩa trong menu off-canvas mobile nên ẩn hẳn ở đây, .nav-group "phẳng" ra thành item trực tiếp của .main-nav. TOÀN BỘ khối này CHỈ áp dụng ở desktop (>900px), khoá trong @media (min-width:901px) thay vì để global và dựa vào việc menu mobile "reset" lại từng thuộc tính trong @media(max-width:900px) — cách reset dễ sót: vạch gạch chân cam ::after dùng cho trạng thái hover/active của thanh ngang desktop có thể bị sót không reset, khiến khi mở menu mobile và bấm vào 1 mục, mục đó lộ ra 1 vạch cam nằm ngang phía dưới label (tàn dư giao diện desktop) dù đã tắt hẳn box-shadow viền cam ở mobile. Khoá cả khối vào media query để triệt để tách 2 ngữ cảnh hiển thị, không rò rỉ thuộc tính nào về sau. */ @media (min-width: 901px) { .nav-icon, .nav-icon-chip { display: none; } .nav-group-title { display: none; } .main-nav .nav-group { display: contents; } /* Ở desktop, .main-nav không tự cuộn ngang nữa (khác mobile/tablet hẹp) — nhường việc cuộn ngang riêng cho .nav-scroll (chỉ chứa danh mục sản phẩm) bằng flex:1 + min-width:0 + overflow-x:auto của riêng nó. Nhờ vậy nhóm "Hỗ trợ" (Kinh nghiệm, Tra cứu đơn hàng, Liên hệ) — đứng SAU .nav-scroll trong DOM — luôn được nhường đủ chỗ, ghim cố định sát mép phải thanh nav, không bao giờ bị tràn/che khuất ra ngoài mép phải màn hình (nếu toàn bộ .main-nav dùng chung 1 vùng overflow-x:auto thì khi danh mục dài, nhóm Hỗ trợ sẽ bị đẩy che khuất/mất hẳn). */ .main-nav { overflow-x: visible; } /* Dịch khối "Trang chủ + Danh mục sản phẩm" sang phải một chút (chỉ desktop). Chỉ đổi padding-left — không đụng padding-right — nên nhóm "Hỗ trợ" (Kinh nghiệm/Tra cứu đơn hàng/Liên hệ) KHÔNG bị xê dịch, vì nó luôn ghim theo mép phải nhờ .nav-scroll flex:1 đứng trước nó, không phụ thuộc điểm bắt đầu bên trái. Tăng dần con số bên dưới (48px) nếu muốn dịch nhiều/ít hơn. */ /* Độ dịch sang phải co giãn theo bề rộng màn: 0px ở ≤1136px, tăng dần tới 144px ở ≥1280px. Trước đây cố định 144px nên ở iPad ngang/laptop nhỏ (901–1180px) thanh nav chỉ còn ~230–500px cho danh mục sau khi trừ "Trang chủ" + nhóm "Hỗ trợ" (đo thật bằng trình duyệt). Dùng clamp() để khỏi thêm breakpoint lẻ ngoài thang 480/640/900 ở đầu file. */ .main-nav { padding-left: clamp(0px, calc(100vw - 1136px), 144px); } .nav-scroll { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none; } .nav-scroll::-webkit-scrollbar { display: none; } .main-nav .nav-item { position: relative; display: inline-flex; align-items: center; font-weight: 600; font-size: 15px; letter-spacing: .015em; padding: 15px 16px; color: rgba(247,245,239,.78); flex-shrink: 0; transition: color var(--dur-fast) var(--ease-standard); } .main-nav .nav-item::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--koi-orange); transform: scaleX(0); transform-origin: center; transition: transform var(--dur-base) var(--ease-standard); } .main-nav .nav-item:hover, .main-nav .nav-item:active { color: #fff; } .main-nav .nav-item:hover::after, .main-nav .nav-item:active::after { transform: scaleX(1); } .main-nav .nav-item.active { color: #fff; } .main-nav .nav-item.active::after { transform: scaleX(1); } /* "Trang chủ" (pinned) — nổi bật bằng chip nền san hô đặc, thay vì viền như trước */ .main-nav .nav-item--pinned { background: linear-gradient(135deg, var(--koi-orange) 0%, #e8823f 55%, var(--gold) 130%); color: #fff; border-radius: var(--radius-pill); padding: 8px 18px; margin-right: var(--space-2); flex-shrink: 0; box-shadow: 0 6px 16px -6px rgba(217,102,59,.55); /* isolation: để ::before (z-index:-1) nằm TRÊN nền gradient gốc của chính chip nhưng DƯỚI chữ */ isolation: isolate; } .main-nav .nav-item--pinned::after { display: none; } /* Gradient hover đặt lên ::before rồi animate opacity — gradient không tự nội suy nên đổi thẳng `background` ở :hover sẽ làm màu nhảy. Không dùng ::after (đã bị display:none ở trên). */ .main-nav .nav-item--pinned::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: linear-gradient(135deg, #c2582f 0%, var(--koi-orange) 55%, var(--gold) 130%); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-standard); } .main-nav .nav-item--pinned:hover::before, .main-nav .nav-item--pinned:active::before { opacity: 1; } .main-nav .nav-item--pinned:hover, .main-nav .nav-item--pinned:active { color: #fff; } } /* Nhóm "Hỗ trợ" (Kinh nghiệm / Tra cứu đơn hàng / Liên hệ) trên thanh nav NGANG desktop — giờ dùng CHUNG 100% style chữ với nhóm chính (Trang chủ/danh mục): cùng size, cùng font-weight, cùng màu, không còn phân biệt gì về mặt chữ. Vị trí "ghim sát phải" đến từ flex:1 của .nav-scroll đứng trước nó (xem media query phía trên) chứ không còn dựa vào margin-left:auto (cách cũ chỉ đẩy được sang phải KHI còn dư khoảng trống — nếu danh mục dài tràn hết thanh nav thì auto margin coi như vô nghĩa, khiến nhóm Hỗ trợ dính sát ngay sau danh mục cuối, thậm chí bị tràn/che khuất mất "Liên hệ" ở mép phải màn hình). Chỉ còn 1 vạch phân cách dọc mảnh + khoảng đệm bên trái nhóm để mắt nhận ra đây là 1 khối chức năng riêng (hỗ trợ), tách bạch khỏi danh mục sản phẩm — đây là khác biệt về BỐ CỤC (khoảng cách/đường kẻ), không phải về chữ. QUAN TRỌNG: chỉ áp dụng ở desktop (>900px). Selector 3 lớp (.main-nav .nav-group .nav-item) có độ đặc hiệu cao hơn selector mobile ".header-row-2 .nav-item" (2 lớp) nên nếu để ngoài media query, luật này sẽ đè luôn cả lên menu off-canvas mobile — khiến mục "Hỗ trợ" bị bé/mờ bất thường so với phần còn lại của menu dù CSS mobile không hề chủ đích như vậy. Khoá lại trong @media (min-width:901px) để tách biệt hoàn toàn 2 ngữ cảnh hiển thị (thanh ngang desktop / menu dọc off-canvas mobile). */ @media (min-width: 901px) { .main-nav .nav-group:last-of-type .nav-item:first-child { margin-left: 14px; padding-left: 17px; position: relative; } .main-nav .nav-group:last-of-type .nav-item:first-child::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: rgba(247,245,239,.18); } } .header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Ô tìm kiếm — nền "kính mờ" (acrylic): trắng bán trong suốt + backdrop-blur, nổi nhẹ trên nền topbar/header-row-1 phía sau thay vì trắng đặc phẳng như trước. Nút submit đổi từ hình tròn cam ĐẶC sang viền tròn cam (outline), khớp với nút "Giỏ hàng" đổi sang tông cam khi hover — cùng 1 ngôn ngữ màu nhấn xuyên suốt cụm hành động. */ .search-form { display: flex; align-items: center; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0 4px 0 18px; background: rgba(255, 255, 255, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); } .search-form:focus-within { border-color: var(--koi-orange); background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 3px rgba(217, 102, 59, .12); } .search-form input { border: none; outline: none; font-family: var(--font-body); font-size: var(--fs-sm); width: 168px; background: transparent; color: var(--ink); } .search-form input::placeholder { color: var(--text-muted); } .search-form button { border: 1.5px solid var(--koi-orange); background: transparent; color: var(--koi-orange); width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .search-form button:hover, .search-form button:active { background: var(--koi-orange); color: #fff; } /* Dropdown gợi ý tìm kiếm (autocomplete). .search-box bọc ngoài .search-form làm điểm neo position:relative để .search-suggest định vị absolute ngay bên dưới, dùng chung cho cả 3 vị trí form search (desktop, hero mobile, off-canvas mobile) — xem includes/header.php. Dùng --z-dropdown để luôn nổi trên nội dung trang nhưng dưới toast/modal. Đồng bộ với .select-custom-panel (select "Sắp xếp" ở category.php): ẩn/hiện qua class ".is-open" trên .search-box (không dùng thuộc tính [hidden] — ép display:none tức thì, không animate được — xem main.js), cùng thời lượng/đường cong --dur-*, --ease-enter/ --ease-exit — 2 dropdown dùng chung 1 "ngôn ngữ chuyển động", không chỉ chung khung hộp. */ .search-box { position: relative; } .search-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; z-index: var(--z-dropdown); transform-origin: top center; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(.98); transition: opacity var(--dur-base) var(--ease-exit), transform var(--dur-base) var(--ease-exit), visibility 0s linear var(--dur-base); } .search-box.is-open .search-suggest { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity var(--dur-slow) var(--ease-enter), transform var(--dur-slow) var(--ease-enter), visibility 0s linear 0s; } .search-suggest-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); transition: background var(--dur-fast) var(--ease-standard); } .search-suggest-item:last-child { border-bottom: none; } .search-suggest-item:hover, .search-suggest-item.is-active, .search-suggest-item:active { background: var(--paper); } .search-suggest-item img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--paper-deep); } .search-suggest-item-name { flex: 1; font-size: var(--fs-sm); line-height: 1.35; /* Cắt tên sản phẩm dài về 2 dòng thay vì tràn ra ngoài/đẩy vỡ layout dropdown, nhất quán với cách .product-name xử lý tên dài ở thẻ sản phẩm. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .search-suggest-item-price { font-size: var(--fs-sm); font-weight: 700; color: var(--koi-orange); flex-shrink: 0; white-space: nowrap; } .search-suggest-empty { padding: var(--space-4) var(--space-3); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); } /* Khung nội dung do JS tạo (swapSuggestContent trong main.js): chỉ lo co/giãn chiều cao mượt khi danh sách gợi ý đổi theo từng lần gõ. .is-resizing chỉ có trong lúc chạy (overflow:hidden để dòng đang bị cắt bớt không tràn ra ngoài); lúc nghỉ không đặt height cứng nên cao theo nội dung. */ .search-suggest-body.is-resizing { overflow: hidden; transition: height var(--dur-base) var(--ease-standard); } /* Nội dung mới fade-in nhẹ (chỉ opacity, ảnh sản phẩm không chớp trắng giữa 2 lượt gõ). Animation trang trí: rule chung `*` trong khối prefers-reduced-motion chính (style.css) đã tắt hẳn. */ .search-suggest-body.is-swapping > * { animation: msg-fade var(--dur-base) var(--ease-enter); } /* Nhóm "Đăng nhập/Tài khoản" + "Giỏ hàng" — 1 khối pill liền mạch: .account-cart-group làm khung ngoài bo góc + overflow:hidden để 2 màu nền khác nhau của 2 mục con (.acg-item) nhìn như 1 khối thống nhất, bo tròn đúng ở 2 đầu ngoài cùng mà không cần bo riêng từng mục. Cùng chiều cao 40px với .search-form bên cạnh để cả cụm hành động thẳng hàng tuyệt đối. */ .account-cart-group { display: flex; align-items: stretch; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; flex-shrink: 0; } .acg-item { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--fs-sm); padding: 0 18px; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .acg-account { background: transparent; color: var(--ink); } .acg-account:hover { background: rgba(18, 34, 44, .06); } .acg-account:active { background: rgba(18, 34, 44, .1); } .acg-cart { position: relative; background: var(--ink); color: var(--paper); } .acg-cart:hover, .acg-cart:active { background: var(--koi-orange); } .cart-badge { background: var(--koi-orange); color: #fff; font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-1); } .acg-cart:hover .cart-badge, .acg-cart:active .cart-badge { background: #fff; color: var(--koi-orange); } @media (min-width: 901px) { .account-cart-group:hover { box-shadow: 0 6px 16px -8px rgba(18, 34, 44, .28); } } /* =========================== HERO =========================== */ /* min-height đặt ở đây (thay vì chỉ ở .hero.hero-has-bg) để khối hero luôn cố định ~660px bất kể có hay không có ảnh bìa — nếu chỉ ép chiều cao ở .hero-has-bg thì lúc chưa có banner, chiều cao phụ thuộc hoàn toàn vào nội dung (có thể lệch khỏi mốc 660px tuỳ font/nội dung). */ .hero { position: relative; overflow: hidden; isolation: isolate; /* Gradient nhiều lớp + 3 quầng sáng mờ (koi cam / vàng đồng / ngọc bích) — nối tiếp đúng ngôn ngữ hình ảnh của .topbar/.header-row-2 phía trên để cả khối đầu trang liền thành 1 dải nước sâu duy nhất thay vì 3 mảng màu phẳng tách rời. CHỈ hiển thị khi hero KHÔNG có ảnh banner (.hero-bg-carousel phủ kín z-index:0 lên trên khi có ảnh, xem CSS carousel bên dưới) nên không xung đột với chế độ có ảnh nền thật. */ background: radial-gradient(ellipse 120% 90% at 15% -10%, rgba(217,102,59,.20), transparent 55%), radial-gradient(ellipse 90% 70% at 85% 110%, rgba(31,111,106,.28), transparent 55%), linear-gradient(165deg, #0d1b23 0%, #16303c 45%, #10222b 100%); color: var(--paper); min-height: 660px; } .hero::after { content: ''; position: absolute; z-index: -1; pointer-events: none; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(201,154,58,.20), transparent 70%); filter: blur(30px); top: 30%; right: 18%; } /* Hoạ tiết "sóng nước + koi cách điệu" (lấy cảm hứng từ tranh koi Nhật Bản: sóng đồng tâm seigaiha + cá chép giản lược nét đơn) — bản gốc tự vẽ bằng SVG (không sao chép ảnh/tranh có bản quyền), giản lược tối đa về đường nét, chỉ dùng đúng 3 màu đã có sẵn trong bảng màu theme (vàng đồng --gold, kem giấy lụa --paper, cam san hô --koi-orange) để không lệch tông với phần còn lại của trang. ĐỌC ĐƯỢC CHỮ: dùng mask-image dạng gradient để hoạ tiết mờ dần gần như vô hình ngay phía sau khối chữ bên trái, chỉ hiện rõ dần về phía bên phải (vùng trống, không có chữ) — vừa có hiệu ứng "sóng nước" như ảnh tham khảo, vừa đảm bảo không làm khó đọc. CHỈ bật ở desktop (>=901px): ở mobile, khối chữ trải full-width (không còn "vùng trống bên phải" để hoạ tiết hiện rõ mà không đè lên chữ), nên tắt hẳn để tuyệt đối an toàn cho khả năng đọc trên màn hẹp. */ @media (min-width: 901px) { .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20300%20300%22%3E%20%20%20%3Cdefs%3E%20%20%20%20%20%3Cstyle%3E%20%20%20%20%20%20%20.wave%20%7B%20fill%3Anone%3B%20stroke%3A%23c99a3a%3B%20stroke-width%3A1.1%3B%20opacity%3A.5%3B%20%7D%20%20%20%20%20%20%20.wave2%20%7B%20fill%3Anone%3B%20stroke%3A%23f7f5ef%3B%20stroke-width%3A.9%3B%20opacity%3A.32%3B%20%7D%20%20%20%20%20%20%20.koiA-body%20%7B%20fill%3Anone%3B%20stroke%3A%23e8824a%3B%20stroke-width%3A1.8%3B%20stroke-linecap%3Around%3B%20stroke-linejoin%3Around%3B%20opacity%3A.9%3B%20%7D%20%20%20%20%20%20%20.koiA-fin%20%7B%20fill%3Anone%3B%20stroke%3A%23e8824a%3B%20stroke-width%3A1.4%3B%20stroke-linecap%3Around%3B%20opacity%3A.65%3B%20%7D%20%20%20%20%20%20%20.koiB-body%20%7B%20fill%3Anone%3B%20stroke%3A%23f2c65c%3B%20stroke-width%3A1.6%3B%20stroke-linecap%3Around%3B%20stroke-linejoin%3Around%3B%20opacity%3A.65%3B%20%7D%20%20%20%20%20%20%20.koiB-fin%20%7B%20fill%3Anone%3B%20stroke%3A%23f2c65c%3B%20stroke-width%3A1.2%3B%20stroke-linecap%3Around%3B%20opacity%3A.5%3B%20%7D%20%20%20%20%20%20%20.eye%20%7B%20opacity%3A.85%3B%20%7D%20%20%20%20%20%3C/style%3E%20%20%20%3C/defs%3E%20%20%20%20%3C%21--%20seigaiha%20%28g%E1%BB%A3n%20s%C3%B3ng%20%C4%91%E1%BB%93ng%20t%C3%A2m%20ki%E1%BB%83u%20Nh%E1%BA%ADt%29%20--%3E%20%20%20%3Cg%3E%20%20%20%20%20%3Cpath%20class%3D%22wave%22%20d%3D%22M-20%2040%20a40%2040%200%200%201%2080%200%22%20/%3E%20%20%20%20%20%3Cpath%20class%3D%22wave%22%20d%3D%22M60%2040%20a40%2040%200%200%201%2080%200%22%20/%3E%20%20%20%20%20%3Cpath%20class%3D%22wave%22%20d%3D%22M140%2040%20a40%2040%200%200%201%2080%200%22%20/%3E%20%20%20%20%20%3Cpath%20class%3D%22wave%22%20d%3D%22M220%2040%20a40%2040%200%200%201%2080%200%22%20/%3E%20%20%20%20%20%3Cpath%20class%3D%22wave%22%20d%3D%22M300%2040%20a40%2040%200%200%201%2080%200%22%20/%3E%20%20%20%20%20%3Cpath%20class%3D%22wave2%22%20d%3D%22M-20%2052%20a52%2052%200%200%201%20104%200%22%20/%3E%20%20%20%20%20%3Cpath%20class%3D%22wave2%22%20d%3D%22M84%2052%20a52%2052%200%200%201%20104%200%22%20/%3E%20%20%20%20%20%3Cpath%20class%3D%22wave2%22%20d%3D%22M188%2052%20a52%2052%200%200%201%20104%200%22%20/%3E%20%20%20%20%20%3Cpath%20class%3D%22wave2%22%20d%3D%22M292%2052%20a52%2052%200%200%201%20104%200%22%20/%3E%20%20%20%3C/g%3E%20%20%20%3Cg%20transform%3D%22translate%280%2C150%29%22%3E%20%20%20%20%20%3Cpath%20class%3D%22wave%22%20d%3D%22M-20%2040%20a40%2040%200%200%201%2080%200%22%20/%3E%20%20%20%20%20%3Cpath%20class%3D%22wave%22%20d%3D%22M60%2040%20a40%2040%200%200%201%2080%200%22%20/%3E%20%20%20%20%20%3Cpath%20class%3D%22wave%22%20d%3D%22M140%2040%20a40%2040%200%200%201%2080%200%22%20/%3E%20%20%20%20%20%3Cpath%20class%3D%22wave%22%20d%3D%22M220%2040%20a40%2040%200%200%201%2080%200%22%20/%3E%20%20%20%20%20%3Cpath%20class%3D%22wave%22%20d%3D%22M300%2040%20a40%2040%200%200%201%2080%200%22%20/%3E%20%20%20%20%20%3Cpath%20class%3D%22wave2%22%20d%3D%22M-20%2052%20a52%2052%200%200%201%20104%200%22%20/%3E%20%20%20%20%20%3Cpath%20class%3D%22wave2%22%20d%3D%22M84%2052%20a52%2052%200%200%201%20104%200%22%20/%3E%20%20%20%20%20%3Cpath%20class%3D%22wave2%22%20d%3D%22M188%2052%20a52%2052%200%200%201%20104%200%22%20/%3E%20%20%20%20%20%3Cpath%20class%3D%22wave2%22%20d%3D%22M292%2052%20a52%2052%200%200%201%20104%200%22%20/%3E%20%20%20%3C/g%3E%20%20%20%20%3C%21--%20koi%20c%C3%A1ch%20%C4%91i%E1%BB%87u%20%231%20%28cam%29%20%E2%80%94%20th%C3%A2n%20thon%2C%20%C4%91u%C3%B4i%20xo%C3%A8%2C%201%20v%C3%A2y%20l%C6%B0ng%2C%201%20v%C3%A2y%20b%E1%BB%A5ng%20--%3E%20%20%20%3Cg%20transform%3D%22translate%2840%2C150%29%20rotate%28-6%29%22%3E%20%20%20%20%20%3Cpath%20class%3D%22koiA-body%22%20d%3D%22M2%2018%20Q8%204%2026%202%20Q46%200%2056%2010%20Q60%2014%2060%2018%20Q60%2022%2056%2026%20Q46%2036%2026%2034%20Q8%2032%202%2018%20Z%22/%3E%20%20%20%20%20%3Cpath%20class%3D%22koiA-body%22%20d%3D%22M56%2010%20L78%20-6%20L64%2018%20L78%2042%20L56%2026%20Z%22/%3E%20%20%20%20%20%3Cpath%20class%3D%22koiA-fin%22%20d%3D%22M22%202%20Q18%20-8%2024%20-14%22/%3E%20%20%20%20%20%3Cpath%20class%3D%22koiA-fin%22%20d%3D%22M20%2032%20Q16%2040%2020%2046%22/%3E%20%20%20%20%20%3Cpath%20class%3D%22koiA-fin%22%20d%3D%22M34%2030%20Q30%2038%2034%2044%22/%3E%20%20%20%20%20%3Ccircle%20class%3D%22eye%22%20cx%3D%2210%22%20cy%3D%2215%22%20r%3D%221.4%22%20fill%3D%22%23e8824a%22/%3E%20%20%20%3C/g%3E%20%20%20%20%3C%21--%20koi%20c%C3%A1ch%20%C4%91i%E1%BB%87u%20%232%20%28v%C3%A0ng%20%C4%91%E1%BB%93ng%2C%20nh%E1%BB%8F%20h%C6%A1n%2C%20h%C6%B0%E1%BB%9Bng%20ng%C6%B0%E1%BB%A3c%20l%E1%BA%A1i%29%20--%3E%20%20%20%3Cg%20transform%3D%22translate%28190%2C60%29%20rotate%2810%29%20scale%28-1%2C1%29%20translate%28-70%2C0%29%22%3E%20%20%20%20%20%3Cpath%20class%3D%22koiB-body%22%20d%3D%22M2%2014%20Q6%203%2020%202%20Q36%201%2044%208%20Q47%2011%2047%2014%20Q47%2017%2044%2020%20Q36%2027%2020%2026%20Q6%2025%202%2014%20Z%22/%3E%20%20%20%20%20%3Cpath%20class%3D%22koiB-body%22%20d%3D%22M44%208%20L60%20-4%20L50%2014%20L60%2032%20L44%2020%20Z%22/%3E%20%20%20%20%20%3Cpath%20class%3D%22koiB-fin%22%20d%3D%22M17%202%20Q14%20-6%2018%20-11%22/%3E%20%20%20%20%20%3Cpath%20class%3D%22koiB-fin%22%20d%3D%22M15%2025%20Q12%2031%2015%2036%22/%3E%20%20%20%20%20%3Ccircle%20class%3D%22eye%22%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%221.1%22%20fill%3D%22%23f2c65c%22/%3E%20%20%20%3C/g%3E%20%3C/svg%3E%20"); background-repeat: repeat; background-size: 300px 300px; opacity: .4; -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.25) 28%, #000 58%); mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.25) 28%, #000 58%); } } .hero .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-top: 76px; padding-bottom: 96px; min-height: 660px; } .hero h1 { font-size: clamp(34px, 4.6vw, 56px); color: #fff; margin-bottom: .3em; } .hero h1 em { font-style: normal; color: var(--koi-orange); } .hero p.lede { font-size: 17px; color: rgba(247,245,239,.78); max-width: 46ch; margin-bottom: 28px; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 14.5px; padding: 13px 26px; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); font-family: var(--font-body); } /* Phản hồi lúc NHẤN (không phải hover) — quan trọng trên di động/máy tính bảng vì các thiết bị cảm ứng không có hover thật, chỉ có khoảnh khắc :active lúc ngón tay chạm xuống nút. Dùng công thức --press-* (khai ở :root, xem giải thích đầy đủ ở đó) thay vì 1 con số % cố định — để nút to (btn-block, CTA rộng...) và nút nhỏ đều co lệch ĐÚNG CÙNG 1 mức pixel, cùng cảm giác với .select-custom-trigger:active bên dưới (2 rule này CHỦ ĐÍCH dùng chung hệt 1 công thức calc(), không phải trùng hợp — xem thêm assets/js/main.js observePressWidth()). */ .btn:active { transform: scale(calc(1 - min(var(--press-cap), var(--press-target-px) / var(--press-w)))); } .btn:disabled:active { transform: none; } .btn-primary { background: var(--koi-orange); color: #fff; } .btn-primary:hover { box-shadow: 0 10px 24px -8px rgba(217,102,59,.55); } .btn-ghost { border-color: rgba(247,245,239,.4); color: var(--paper); } .btn-ghost:hover:not(:disabled) { background: rgba(247,245,239,.1); } .btn-dark { background: var(--ink); color: var(--paper); } .btn-dark:hover:not(:disabled) { background: var(--jade); } /* Biến thể viền — dùng chung được cho cả nền sáng lẫn nền tối vì không nền riêng, chỉ có viền + chữ; mặc định theo var(--ink) cho nền sáng, những chỗ cần đổi màu (VD nút huỷ/đăng xuất màu đỏ) tự ghi đè qua style inline border-color/color ngay tại chỗ dùng, không cần thêm class riêng. */ .btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); } .btn-outline:hover:not(:disabled) { background: rgba(18,34,44,.06); } .btn-block { width: 100%; justify-content: center; } .btn-sm { padding: 9px 18px; font-size: 13px; } /* Nút Zalo — dùng đúng màu thương hiệu Zalo (#0068FF) thay vì viền trung tính, để 3 lựa chọn liên hệ trong khối "mua sỉ" (product.php .wholesale-cta-actions) có phân cấp thị giác rõ ràng: Zalo (xanh thương hiệu) / Gọi ngay (cam koi, hành động chính) / Trang liên hệ (viền, phụ) — thay vì 3 nút viền giống hệt nhau. */ .btn-zalo { background: #0068FF; color: #fff; border-color: #0068FF; } .btn-zalo:hover:not(:disabled) { background: #0055d1; border-color: #0055d1; box-shadow: 0 10px 24px -8px rgba(0,104,255,.45); } /* Đăng nhập/Đăng ký bằng Google/Facebook (login.php, register.php) — cùng tinh thần với .btn-zalo ở trên (màu thương hiệu riêng cho từng nút thay vì dùng chung .btn-outline trung tính). Google CỐ Ý dùng style trung tính (nền trắng, viền xám nhạt, chữ xám đậm) thay vì tô màu nền — đúng theo brand guideline chính thức của Google cho nút "Sign in with Google" (khác hẳn Facebook/Zalo là tô kín màu thương hiệu). */ .btn-google { background: #fff; color: #3c4043; border-color: #dadce0; } .btn-google:hover:not(:disabled) { background: #f7f8f8; box-shadow: 0 1px 3px rgba(18,34,44,.16); } .btn-facebook { background: #1877f2; color: #fff; border-color: #1877f2; } .btn-facebook:hover:not(:disabled) { background: #145dbf; border-color: #145dbf; box-shadow: 0 10px 24px -8px rgba(24,119,242,.45); } /* Nhấc nút lên chỉ khi rê chuột thật và KHÔNG đang nhấn: nếu để transform trong :hover thì nó đè .btn:active (cùng độ đặc hiệu, đứng sau) làm nút không co lại lúc bấm; trên cảm ứng cũng tránh hover bị "dính". */ @media (hover: hover) { .btn-primary:hover:not(:active), .btn-zalo:hover:not(:active), .btn-facebook:hover:not(:active) { transform: translateY(var(--lift-sm)); } } /* Khối 2 nút Google/Facebook xếp dọc, mỗi nút rộng vừa đủ chữ + canh giữa (dùng .btn-fit-center có sẵn, giống mọi nút hành động khác trong .contact-card — xem comment ở định nghĩa .btn-fit-center). */ .oauth-buttons { display: flex; flex-direction: column; gap: var(--space-3); } .oauth-buttons .btn svg, .oauth-buttons .btn img { flex-shrink: 0; } /* Đường kẻ phân cách "Hoặc" giữa form email/mật khẩu và 2 nút đăng nhập mạng xã hội (login.php, register.php) — 2 đường kẻ mảnh dùng chung var(--line) (đúng màu viền nhạt đang dùng cho .contact-card), chữ ở giữa dùng var(--text-muted) như các dòng phụ khác trong trang. */ .auth-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; color: var(--text-muted); font-size: var(--fs-xs); } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } /* GỐC RỄ LỖI "ảnh bìa ngắn lại sau khi upload": .hero-art (hoạ tiết placeholder khi CHƯA có banner) là SVG vuông (aspect-ratio 1/1) rộng bằng cả cột grid (0.95fr) — trên màn hình rộng, cột này có thể rộng/cao hơn 488px (= 660px min-height của .container trừ padding-top 76 + padding-bottom 96), nên khi CHƯA có banner, hàng grid bị chính hoạ tiết này kéo cao vượt quá 660px (đo thực tế ví dụ ~784px ở viewport 1440px). Khi ĐÃ có banner, layout đổi sang flex chỉ còn khối chữ (thấp hơn nhiều) nên hero tụt về đúng mốc sàn 660px → hero bị "ngắn lại" so với lúc chưa upload, dù .container đã có min-height:660px. Cách sửa: giới hạn max-width của hoạ tiết placeholder để nó không bao giờ cao hơn phần nội dung khả dụng (488px), nhờ vậy hàng grid không còn bị đội cao hơn 660px — cả 2 trạng thái (có/không banner) đều thực sự render đúng bằng 660px, không lệch nhau. */ .hero-art { position: relative; max-width: 420px; margin: 0 auto; } .ripple-svg { width: 100%; height: auto; } /* Carousel ảnh giới thiệu phủ toàn bộ nền hero (full-bleed), ảnh tự động cắt vừa khung (object-fit: cover) để không có khoảng trắng thừa */ .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-bg-carousel { position: absolute; inset: 0; } .hero-bg-carousel .hero-carousel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; /* Animation trang trí (ngoại lệ có chủ đích) — crossfade ảnh nền hero là slideshow phủ toàn màn hình, không phải phản hồi tương tác, nên không ép vào thang --dur-*: 1.3s là tốc độ mờ dần phù hợp cho ảnh lớn, rút ngắn sẽ tạo cảm giác giật cục. Easing dùng --ease-standard vì rule áp dụng cho cả 2 chiều mờ vào/mờ ra giữa ảnh cũ và ảnh mới. */ transition: opacity 1.3s var(--ease-standard); } .hero-bg-carousel .hero-carousel-img.active { opacity: 1; } /* Lớp phủ tối nhẹ giúp chữ luôn đọc được dù ảnh nền sáng hay tối. Trước đây gradient trải "phẳng" từ .72 xuống .25 nên dù ở mép phải (nơi không có chữ, chỉ có ảnh) vẫn còn tới 25% màu tối phủ lên toàn bộ ảnh khiến ảnh mới upload luôn bị xỉn màu/mờ đi so với ảnh gốc. Giảm độ tối ở điểm đầu (0%) và cho gradient mờ dần NHANH hơn, về gần như trong suốt (.04) rồi hẳn (transparent) trước khi tới mép phải — vùng có chữ bên trái vẫn đủ tối để đọc rõ, còn phần lớn diện tích ảnh (đặc biệt bên phải, nơi thường là chi tiết chính như cá, cây thuỷ sinh) giữ được màu sắc thật, rực rỡ, không bị ám xám. */ .hero-bg-tint { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(18,34,44,.58) 0%, rgba(18,34,44,.32) 35%, rgba(18,34,44,.08) 65%, transparent 85%); } .hero.hero-has-bg .container { position: relative; z-index: 2; grid-template-columns: 1fr; display: flex; align-items: center; /* Dịch hộp chữ sát về mép trái, dùng đúng padding chuẩn 24px của .container để thẳng hàng với các khối nội dung khác trên trang (vd tiêu đề "DANH MỤC" bên dưới) */ justify-content: flex-start; } /* Khối kính mờ phía sau chữ — giúp chữ nổi bật mà không che hẳn ảnh nền. Tăng độ phủ tối (.32 -> .58) + thêm gradient nhẹ + text-shadow cho chữ để đọc rõ hơn trên nhiều ảnh nền sáng/tối khác nhau, vẫn giữ hiệu ứng kính mờ. */ .hero-copy-glass { max-width: 620px; padding: var(--space-6) 36px; border-radius: var(--radius); background: linear-gradient(155deg, rgba(9,19,26,.68) 0%, rgba(18,34,44,.58) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(247,245,239,.16); box-shadow: 0 18px 40px -20px rgba(0,0,0,.55); } .hero-copy-glass h1, .hero-copy-glass p.lede, .hero-copy-glass .eyebrow { text-shadow: 0 2px 10px rgba(0,0,0,.35); } /* Nút mũi tên chuyển ảnh giới thiệu (nằm trong .hero-media). Vị trí gốc (áp cho màn rất rộng >= 1640px): 2 mép trái/phải, giữa chiều cao hero. Mobile (<= 900px) đặt lại ở khối "HERO — BỐ CỤC MOBILE" cuối file (cũng 2 mép trái/phải). Desktop vừa (901-1639px) đặt lại ngay bên dưới: VẪN 2 mép trái/phải nhưng hạ xuống sát đáy. LƯU Ý về thứ tự vẽ: .hero-media có z-index:0 nên tạo stacking context riêng, mọi z-index bên trong (kể cả z-index:5 của nút) đều nằm DƯỚI .container (z-index:2). Vì vậy nút chỉ bấm được khi .container không chặn sự kiện chuột — xem rule pointer-events ở khối desktop bên dưới và ở khối mobile. */ .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(247,245,239,.35); background: rgba(18,34,44,.55); color: var(--paper); display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } /* HOVER CHỈ TRÊN THIẾT BỊ CÓ CHUỘT. Trên màn hình cảm ứng, trình duyệt giữ trạng thái :hover của nút vừa chạm tới lần chạm kế tiếp -> nền cam "dính" mãi sau khi bấm mũi tên. Nên :hover nằm trong @media (hover: hover) (cùng pattern khối .footer-trust-signals), còn :active TÁCH RIÊNG ngoài media để cảm ứng vẫn có phản hồi lúc đang chạm (xem lý do ở khối đó). Máy lai (laptop cảm ứng, chuột là thiết bị chính) vẫn khớp hover: hover nên không đủ — main.js (đoạn "Nút mũi tên: chống dính hover") thêm .is-touched vào nút khi bị chạm bằng ngón tay/bút và gỡ khi chuột đi vào lại; :not(.is-touched) ở đây chặn hover trong khoảng đó. */ .hero-arrow:active { background: var(--koi-orange); border-color: var(--koi-orange); } @media (hover: hover) { .hero-arrow:hover:not(.is-touched) { background: var(--koi-orange); border-color: var(--koi-orange); } } .hero-arrow-prev { left: 22px; } .hero-arrow-next { right: 22px; } /* DESKTOP (>= 901px, khớp HERO_MOBILE_MAX_WIDTH_PX): sửa 2 lỗi của cặp nút mũi tên. Lỗi 1 — không bấm được: .container (rộng tối đa 1500px) phủ trùm cả 2 nút. Sửa: .container của hero có ảnh nền không nhận sự kiện chuột, chỉ khối chữ nhận lại (giống mobile) -> cú bấm rơi xuống nút bên dưới. Áp cho MỌI độ rộng desktop. Không đổi z-index/thứ tự vẽ. Lỗi 2 — nút TRÁI đè lên thẻ chữ .hero-copy-glass (nút chiếm x = 22-66px, thẻ bắt đầu từ x = (vw-1500)/2 + 24). Hai thứ hết chồng nhau khi vw >= ~1616px; ngưỡng 1640px chừa ~24px hở. Vì vậy: - >= 1640px: giữ nguyên vị trí gốc (2 mép trái/phải, giữa chiều cao hero); - 901-1639px: vẫn 2 mép trái/phải nhưng hạ xuống bottom:72px — thẻ chữ được căn giữa dọc và .container có padding-bottom 96px nên thẻ thường kết thúc phía trên nút. bottom lớn hơn chiều cao .wave-divider (46px) để sóng trắng ở đáy không cắt nút. Nếu đổi độ rộng .container (1500px) hoặc padding thẻ chữ thì phải tính lại ngưỡng 1640. */ @media (min-width: 901px) { .hero.hero-has-bg .container { pointer-events: none; } .hero.hero-has-bg .hero-copy-glass { pointer-events: auto; } } @media (min-width: 901px) and (max-width: 1639px) { .hero.hero-has-bg .hero-arrow { top: auto; bottom: 72px; transform: none; } } /* Vuốt ngang để chuyển ảnh hero (main.js, đoạn "Vuốt ngang để chuyển ảnh"). JS thêm .hero-swipeable khi có >= 2 ảnh; .is-swiping chỉ tồn tại trong lúc kéo + trượt sau nhả tay. - touch-action: pan-y pinch-zoom: cuộn dọc + zoom vẫn của trình duyệt, vuốt ngang của JS. Đặt trên .hero (không phải .hero-media) vì .container phủ lên ảnh — cử chỉ bắt đầu trên thẻ chữ cũng phải đi qua .hero. Chỉ áp cho hero có ảnh nền (nút mũi tên + carousel chỉ có khi đó). - .is-swiping tắt crossfade opacity 1.3s của ảnh (ảnh phải bám tay tức thì, và lúc đổi class sau cú trượt không được chạy fade nhầm); ảnh trượt bằng transform inline do JS gán. */ .hero.hero-swipeable { touch-action: pan-y pinch-zoom; } .hero.hero-swipeable.is-swiping { -webkit-user-select: none; user-select: none; } .hero.is-swiping .hero-bg-carousel .hero-carousel-img { transition: none; } /* wave divider between hero and content — pin tuyệt đối ở đáy hero, KHÔNG để nằm trong flex/grid flow của .hero (tránh bị bóp méo) */ .wave-divider { display: block; position: absolute; left: 0; bottom: -1px; z-index: 3; width: 100%; height: 46px; fill: var(--paper); } /* =========================== SECTIONS =========================== */ section.block { padding: var(--space-8) 0; } .block-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: var(--space-6); flex-wrap: wrap; } .block-head h2 { font-size: clamp(24px, 3vw, 32px); margin: 0; } .view-all { font-weight: 700; font-size: var(--fs-sm); color: var(--jade); border-bottom: 1px solid var(--jade); padding-bottom: 2px; white-space: nowrap; } .view-all:hover, .view-all:active { color: var(--koi-orange); border-color: var(--koi-orange); } /* ---------- category grid ("pond zones") ---------- */ /* justify-items:start — khi hàng cuối không đủ item lấp đầy các cột do auto-fit/auto-fill sinh ra, KHÔNG để các thẻ giãn to lấp khoảng trống thừa; giữ đúng kích thước chuẩn (giới hạn bởi max-width ở .cat-card) và nằm sát trái, đồng bộ với hướng căn chỉnh mặc định (text/nội dung căn trái) của phần còn lại trang. Áp dụng nhất quán cho cả .product-grid/.post-grid bên dưới. */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); justify-items: start; gap: 18px; } .cat-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px; text-align: center; width: 100%; max-width: 220px; /* chặn giãn to khi hàng không đủ item lấp đầy (xem justify-items ở .cat-grid) */ transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); } .cat-card:hover, .cat-card:active { /* -3px (--lift-lg) — đồng bộ với .product-card/.post-card; :active thêm để có phản hồi khi chạm trên di động (thiết bị cảm ứng không có hover thật). */ transform: translateY(var(--lift-lg)); box-shadow: var(--shadow); border-color: var(--koi-orange); } .cat-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; filter: blur(6px); transform: scale(1.15); /* tránh lộ viền trắng do blur ở mép */ } /* Khi danh mục có ảnh riêng (tải lên ở admin): ảnh phủ kín làm NỀN cho cả thẻ — thay cho hoạ tiết SVG blur mặc định — icon vẫn giữ nguyên icon đã chọn, không bị ảnh thay thế. */ .cat-card-has-photo { background: var(--paper-deep); } .cat-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform var(--dur-slow) var(--ease-standard); } .cat-card-has-photo:hover .cat-card-photo { transform: scale(1.06); } /* Lớp phủ tối dần về phía dưới để tên danh mục (đặt ở đáy thẻ) luôn đủ tương phản trên mọi ảnh, sáng hay tối. */ .cat-card-scrim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(18,34,44,.04) 0%, rgba(18,34,44,.1) 45%, rgba(18,34,44,.55) 100%); pointer-events: none; } .cat-icon { position: relative; z-index: 1; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 2px 10px rgba(18,34,44,.06); display: flex; align-items: center; justify-content: center; color: var(--jade); } .cat-card h3 { position: relative; z-index: 1; font-size: 15.5px; margin: 0; font-family: var(--font-body); font-weight: 700; } /* Hộp "mica" mờ đằng sau tên danh mục — chỉ cần khi thẻ có ảnh nền riêng, để chữ luôn đọc rõ dù ảnh sáng/tối/nhiều chi tiết ra sao. */ .cat-card-has-photo h3 { display: inline-block; color: #fff; background: rgba(18, 34, 44, .38); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.16); padding: 6px 14px; border-radius: var(--radius-pill); box-shadow: 0 2px 10px rgba(18,34,44,.18); } /* ---------- product grid & card ---------- */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); justify-items: start; /* xem giải thích ở .cat-grid phía trên */ gap: 22px; } /* Trang "Tất cả sản phẩm" (category.php) — cột cố định (không auto-fill) để PRODUCTS_PER_PAGE (15) luôn chia hết, không lệch dòng cuối: 3 cột ở tablet, 5 cột ở desktop. Mobile (≤640px) vẫn dùng .product-grid gốc phía trên, không đổi. Chỉ áp dụng cho trang này, không ảnh hưởng .product-grid ở các trang khác (trang chủ, tìm kiếm, yêu thích, sản phẩm liên quan). */ @media (min-width: 641px) { .product-grid--catalog { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 901px) { .product-grid--catalog { grid-template-columns: repeat(5, 1fr); } } .product-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; width: 100%; max-width: 320px; /* chặn giãn to khi hàng không đủ item lấp đầy (xem justify-items ở .product-grid) */ transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); position: relative; } .product-card:hover, .product-card:active { box-shadow: var(--shadow); transform: translateY(var(--lift-lg)); } .product-thumb { aspect-ratio: 1 / 1; background: var(--paper-deep); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .product-thumb img { width: 100%; height: 100%; object-fit: cover; } /* Nhãn sản phẩm (Giảm giá / Bán chạy / Mới về) — kiểu "kính mờ" (glass/arylic): nền bán trong suốt + backdrop-filter blur thay vì màu đặc phẳng, viền sáng mảnh để có chiều sâu. Gom cả 2 nhãn vào 1 khối .product-badges neo góc trên-trái, xếp CHỒNG THEO CHIỀU DỌC (column) thay vì 1 trái/1 phải như trước — cách cũ khiến 2 nhãn (đặc biệt "🔥 Bán chạy" dài) đụng/đè lên nhau khi thẻ sản phẩm hẹp trên mobile (grid rút xuống ~155px). Xếp dọc cùng góc thì dù thẻ hẹp đến đâu 2 nhãn cũng không bao giờ chồng nhau, chỉ đơn giản xếp thêm hàng. */ .product-badges { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; } .badge-sale, .badge-tag { /* Vị trí mặc định (đứng độc lập, vd badge "Video" ở blog.php) — khi nằm trong .product-badges, quy tắc bên dưới chuyển về static để khối cha (flex/column) tự sắp xếp, tránh 2 lớp position:absolute chồng nhau. */ position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: var(--radius-pill); letter-spacing: .03em; color: #fff; border: 1px solid rgba(255,255,255,.38); box-shadow: 0 6px 16px -6px rgba(18,34,44,.5); backdrop-filter: blur(7px) saturate(180%); -webkit-backdrop-filter: blur(7px) saturate(180%); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .product-badges .badge-sale, .product-badges .badge-tag { position: static; top: auto; left: auto; } .badge-sale { background: rgba(194,59,74,.72); } .badge-tag-bestseller { background: rgba(217,102,59,.72); } .badge-tag-new { background: rgba(31,111,106,.72); } /* Nút "❤ Lưu" (wishlist) trên thẻ sản phẩm. Đặt là con trực tiếp của .product-card (không nằm trong .product-thumb vốn là , để tránh lồng thẻ không hợp lệ khi wishlist render dạng link cho khách chưa đăng nhập) — neo góc trên-phải bằng position:absolute, .product-card đã sẵn position:relative. */ .wishlist-btn { position: absolute; top: 10px; right: 10px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--koi-red); transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); text-decoration: none; } .wishlist-btn:hover, .wishlist-btn:active { background: #fff; transform: scale(1.06); } .wishlist-btn svg { width: 16px; height: 16px; } /* Trạng thái "đã lưu": tim đặc màu đỏ san hô thay vì viền rỗng — đổi qua JS bằng cách toggle class .is-wished (main.js), không cần tải lại trang. */ .wishlist-btn.is-wished { color: #fff; background: var(--koi-red); border-color: var(--koi-red); } .wishlist-btn.is-wished svg { fill: currentColor; } /* Hiệu ứng "pop" ngắn khi chuyển SANG trạng thái is-wished (bấm ❤ để lưu) — scale-in phẳng dùng --ease-enter, không dùng easing overshoot (xem comment tại .mnb-item-toggle.active .mnb-icon) — giữ nhất quán cảm giác "phẳng, điềm tĩnh" của site thay vì tạo 1 điểm nhấn nảy/bung khác biệt riêng cho nút này. Class .is-wish-popped thêm/gỡ tạm thời qua JS (main.js, khối js-wishlist-toggle) — phồng to nhanh (--dur-fast/--ease-enter) rồi TỰ TRỞ VỀ kích thước gốc bằng đúng transition nền của .wishlist-btn (--dur-fast/--ease-standard, khai báo ở khối .wishlist-btn phía trên) khi JS gỡ class, không cần khai báo transition riêng cho chiều "về". */ .wishlist-btn.is-wish-popped { transform: scale(1.22); transition: transform var(--dur-fast) var(--ease-enter); } .product-body { padding: var(--space-4) var(--space-4) 18px; display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .product-name { font-weight: 700; font-size: 15px; line-height: 1.35; min-height: 2.7em; /* Tối đa 3 dòng rồi cắt "..." — trước đây chỉ có min-height nên tên dài (CSDL cho phép 255 ký tự) làm thẻ cao 6–8 dòng và kéo cả hàng lưới cao theo. overflow-wrap:anywhere để chuỗi dài không dấu cách (mã SKU, URL) tự ngắt thay vì tràn/bị cắt ngang thẻ. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .product-name a:hover, .product-name a:active { color: var(--koi-orange); } .product-sold { font-size: var(--fs-xs); color: var(--text-muted); } .product-price-row { display: flex; align-items: baseline; gap: var(--space-2); margin-top: auto; flex-wrap: wrap; } .price-now { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--koi-red); } .price-old { font-size: var(--fs-sm); color: var(--text-muted); text-decoration: line-through; } /* Chỉ áp dụng cho #pdPriceOld (product.php, khối biến thể có/không giá riêng, xem main.js hàm fadeToggle) — lớp .js-fade-toggle chỉ được product.php gắn thêm cho đúng 1 span này, không gắn cho .price-old dùng chung trên thẻ sản phẩm (product-card.php, luôn tĩnh, PHP render có/không hẳn thẻ tuỳ $hasSale, không qua JS toggle) — nên rule display:none mặc định của .js-fade-toggle không ảnh hưởng gì tới các .price-old tĩnh đó. */ .price-old.is-shown { display: inline; } /* #pdOptionHint (product.php) theo đúng pattern .js-fade-toggle, .pd-option-hint vốn là

(block mặc định). */ .pd-option-hint.is-shown { display: block; } .add-cart-btn { margin-top: 10px; width: 100%; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-weight: 700; font-size: var(--fs-sm); padding: 10px; border-radius: var(--radius-pill); cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .add-cart-btn:hover, .add-cart-btn:active { background: var(--ink); color: var(--paper); } a.add-cart-btn { display: block; text-align: center; text-decoration: none; box-sizing: border-box; } /* ---------- Mô tả danh mục (category.php) — hiển thị đúng nội dung admin đã nhập ở "Mô tả" trang admin/categories.php. Thiết kế dạng banner nhấn màu thương hiệu (gradient jade) thay vì khối nền trắng phẳng — để không bị nhầm với 1 dòng text thường, đồng thời có điểm nhấn trang trí (vòng tròn mờ) cho đỡ đơn điệu. */ /* Dòng mô tả danh mục — subtitle nhẹ ngay dưới H1 trong .page-head, KHÔNG còn là khối nền màu đặc (jade gradient) như trước: chỉ còn icon "info" nhỏ + chữ nghiêng màu xám, thấp và hoà cùng nền be của .page-head thay vì tương phản mạnh, tách bạch với phần trang bên dưới. */ .category-description { display: flex; align-items: flex-start; gap: 8px; max-width: 720px; margin: 10px 0 0; font-size: 14.5px; font-style: italic; color: var(--text-muted); line-height: 1.65; } .category-description-icon { flex-shrink: 0; /* Canh icon (cao 15px) vào đúng tâm dòng chữ đầu tiên: chiều cao dòng chữ = 1.65 * font-size hiện tại (kế thừa từ .category-description, đổi theo var(--fs-sm) ở mobile) — dùng "1em" thay vì hardcode px để margin-top tự tính lại đúng cho cả desktop lẫn mobile, không lệch cao/thấp ở size nào. */ margin-top: calc((1em * 1.65 - 15px) / 2); display: flex; color: var(--gold); } /* ---------- thanh sắp xếp & lọc giá (category.php) — THIẾT KẾ LẠI TOÀN BỘ ---------- Bản trước dùng 1 khung nền lớn phủ hoạ tiết chấm bi, bên trong 2 "thẻ" lọc (Sắp xếp/ Khoảng giá) chỉ chiếm 1 phần nhỏ bên trái, để trống rất nhiều khoảng trắng bên phải — nhìn mất cân đối, không tinh tế. Thiết kế mới: 1 thanh MẢNH, nền trắng phẳng, viền mảnh + bóng nhẹ (không hoạ tiết); mỗi bộ lọc chỉ còn nhãn nhỏ (caption) + control gọn, KHÔNG còn khung thẻ riêng — các bộ lọc ngăn cách nhau bằng 1 đường kẻ dọc mảnh thay vì viền hộp, để cả cụm trông liền mạch như 1 thanh công cụ duy nhất. `justify-content: space-between` đẩy toàn bộ cụm lọc (.toolbar-filters) sang trái và số lượng sản phẩm (.toolbar-meta) sang phải — lấp đúng khoảng trống từng bị bỏ trống, đồng thời cho khách biết ngay có bao nhiêu sản phẩm khớp bộ lọc hiện tại. */ .category-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-6); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 24px; margin-bottom: 28px; box-shadow: var(--shadow-soft); } .toolbar-filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-6); } .toolbar-field { display: flex; flex-direction: column; gap: 8px; background: none; border: none; padding: 0; min-height: auto; box-sizing: border-box; } /* Đường kẻ dọc mảnh phân tách các bộ lọc, giữ cảm giác "1 thanh công cụ liền mạch" thay vì nhiều thẻ rời rạc cạnh nhau. */ .toolbar-filters > .toolbar-field + .toolbar-field { padding-left: var(--space-6); border-left: 1px solid var(--line); } /* Nhãn "Sắp xếp" / "Khoảng giá" — chỉ còn chữ hoa nhỏ màu phụ (caption), không còn nền pill riêng — tinh giản, để mắt tập trung vào chính control (select/thanh trượt) bên dưới. */ .toolbar-field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 0; line-height: 1.3; } /* Select kiểu "khung hộp" — đồng bộ với ngôn ngữ thiết kế chung của toàn site (ô tìm kiếm .search-form, các nút phân trang .pagination-page...): viền mảnh var(--line), bo góc var(--radius-sm), nền trắng, cao 40px (khung hộp là ngôn ngữ chủ đạo của mọi input/control trên site). Hover/focus đổi viền sang cam + thêm quầng sáng (box-shadow) mảnh, giống hệt cách .search-form:focus-within phản hồi — 1 hiệu ứng "focus ring" dùng chung cho mọi control dạng khung hộp. */ .toolbar-field select { -webkit-appearance: none; appearance: none; height: 40px; padding: 0 34px 0 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2312222c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px no-repeat, #fff; color: var(--ink); transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .toolbar-field select:hover { border-color: var(--koi-orange); } .toolbar-field select:focus { outline: none; border-color: var(--koi-orange); box-shadow: 0 0 0 3px rgba(217, 102, 59, .12); } .toolbar-field select { min-width: 190px; cursor: pointer; } .toolbar-actions { display: flex; align-items: center; gap: var(--space-3); } .toolbar-submit { padding: 10px 22px; font-size: var(--fs-sm); } /* ---------- Custom select (mọi kích thước màn hình) cho toàn bộ gốc của trình duyệt khi mở ra dùng giao diện mặc định của hệ điều hành/trình duyệt (nền trắng/xám đơn điệu), không style được bằng CSS thuần — lệch hẳn so với phần còn lại của thiết kế site. JS (assets/js/main.js, hàm enhanceSelectCustom) bọc mỗi gốc (vẫn giữ nguyên trong DOM, vẫn nhận đúng giá trị + bắn đúng sự kiện 'change' để js-auto-submit hoạt động y hệt) + 1 nút trigger hiện giá trị đang chọn + 1 panel tự vẽ khi bấm mở ra. Áp dụng trigger/panel tự vẽ cho mọi kích thước màn hình để mobile có cùng khung hộp + hiệu ứng mở/đóng kiểu iOS như desktop. */ .select-custom { position: relative; } /* khác có thuộc tính required, constraint validation của trình duyệt vẫn hoạt động bình thường (phần tử display:none bị loại khỏi constraint validation hoàn toàn) và bong bóng thông báo lỗi (nếu có) vẫn neo đúng vị trí trực quan của trigger thay vì lạc ra 1 góc màn hình. */ .select-custom-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } /* Trigger dùng đúng khung hộp như .toolbar-field select (viền var(--line), bo góc var(--radius-sm), nền trắng, cao 40px) — cùng 1 giao diện + hiệu ứng cho MỌI kích thước màn hình, không còn khác biệt desktop/mobile. */ .select-custom-trigger { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 190px; height: 40px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 14px; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; text-align: left; /* transform dùng --dur-instant để khớp --dur-instant khai trong :active bên dưới, tránh co lại "giật" không mượt (bug đã sửa: thiếu transform trong transition này). */ transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard); } /* :active thêm 1 nhịp "nhấn xuống" cực nhỏ (tinh thần iOS: mọi control chạm được đều có phản hồi hình học tức thì khi nhấn, không chỉ đổi màu) — dùng --dur-instant vì đây là phản hồi CHẠM chứ không phải hover, xem hệ thống motion ở đầu file. Dùng công thức --press-* (khai ở :root) chứ không phải scale(.98) cố định nữa — bản thân dropdown lọc đầu trang (~190px) CHÍNH LÀ khung tham chiếu để tính ra công thức đó (190px * 2% = 3.8px = --press-target-px), nên ở đây kết quả giữ nguyên y hệt cảm giác cũ; công thức chỉ thật sự "phát huy" khác biệt ở những .select-custom-trigger rộng hơn (vd trong form Mã giảm giá) — xem giải thích đầy đủ ở khối --press-* tại :root. */ .select-custom-trigger:active { transform: scale(calc(1 - min(var(--press-cap), var(--press-target-px) / var(--press-w)))); } .select-custom-trigger:hover, .select-custom-trigger:focus-visible, .select-custom.is-open .select-custom-trigger { outline: none; border-color: var(--koi-orange); box-shadow: 0 0 0 3px rgba(217, 102, 59, .12); } .select-custom-trigger-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .select-custom-caret { flex-shrink: 0; color: var(--ink); transition: transform var(--dur-base) var(--ease-standard); } .select-custom.is-open .select-custom-caret { transform: rotate(180deg); } .select-custom.is-disabled .select-custom-trigger { opacity: .5; cursor: not-allowed; } /* Panel: cùng khung viền/bo góc/đổ bóng với .search-suggest (dropdown gợi ý tìm kiếm) — 2 dropdown "nổi lên dưới 1 ô control" duy nhất trên site, dùng chung 1 ngôn ngữ hộp nổi để nhất quán, thay vì mỗi nơi 1 kiểu bo góc/đổ bóng riêng. Hiệu ứng mở/đóng kiểu iOS (menu ngữ cảnh/action sheet): phồng nhẹ ra từ góc trên-trái (fade + scale nhẹ .98→1 + trượt lên 6px), KHÔNG nảy/bung — đúng tinh thần "phẳng, điềm tĩnh" của --ease-enter/--ease-exit đã định nghĩa sẵn ở :root dành riêng cho dropdown (xem chú thích hệ thống motion đầu file). Panel luôn nằm trong DOM (không dùng display:none/thuộc tính [hidden] nữa — 2 thứ đó tắt transition ngay lập tức), ẩn/hiện qua opacity+visibility+transform để có thể animate mượt cả lúc đóng lẫn mở: - Trạng thái ĐÓNG (mặc định): opacity 0, thu nhỏ nhẹ, visibility ẩn NGAY SAU khi hiệu ứng fade-out (--dur-base) chạy xong (transition-delay bằng đúng --dur-base) — nhờ vậy panel vẫn "nhìn thấy được" trong suốt lúc đang mờ dần, không bị cắt cụt giữa chừng. - Trạng thái MỞ (.is-open): opacity 1, kích thước thật, visibility hiện NGAY (delay 0s) để hiệu ứng phồng ra bắt đầu chạy từ khung hình đầu tiên, không có độ trễ cảm nhận được giữa lúc bấm và lúc panel bắt đầu xuất hiện. */ .select-custom-panel { /* display:block cần khai báo tường minh: panel là 1 phần tử được JS chèn động, không có rule nào khác ép display:none cho nó — nhưng khai báo rõ ở đây để chắc chắn không phụ thuộc display mặc định của trình duyệt cho

, đồng thời làm rõ ý đồ "ẩn/hiện qua opacity+visibility, KHÔNG qua display" cho người đọc code sau này (từng có lỗi ngược lại: quên set display khiến panel bị kẹt display:none vĩnh viễn dù mọi opacity/transform bên dưới đều đúng — xem lịch sử sửa lỗi). Panel là position:absolute nên display:block ở đây không ảnh hưởng layout khi đang ẩn. max-height/overflow-y CŨ đặt thẳng ở đây đã chuyển xuống .select-custom-options bên dưới — panel giờ chỉ là khung ngoài (viền/bo góc/đổ bóng + hiệu ứng mở/đóng), để phần lọc (.select-custom-filter-wrap, nếu có) đứng cố định phía trên, KHÔNG cuộn theo khi danh sách option dài (Phường/Xã, Danh mục...). */ display: block; position: absolute; top: calc(100% + 8px); left: 0; min-width: 100%; z-index: var(--z-dropdown); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; transform-origin: top left; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(.98); transition: opacity var(--dur-base) var(--ease-exit), transform var(--dur-base) var(--ease-exit), visibility 0s linear var(--dur-base); } .select-custom.is-open .select-custom-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity var(--dur-slow) var(--ease-enter), transform var(--dur-slow) var(--ease-enter), visibility 0s linear 0s; } /* Ô lọc (JS chỉ chèn khi select có > SELECT_FILTER_MIN_OPTIONS option — xem ensureFilterUI() trong main.js) — đứng NGOÀI khối cuộn .select-custom-options bên dưới nên luôn cố định ở đầu panel dù đã cuộn xuống giữa danh sách dài. Viền dưới mảnh (--line) để tách nhẹ khỏi danh sách, không cần khung/nền riêng vì đã nằm sẵn trong panel trắng. */ .select-custom-filter-wrap { display: flex; align-items: center; gap: 8px; /* padding ngang = 14px, KHỚP ĐÚNG padding ngang của .select-custom-option bên dưới (8px 14px) — panel cha đã có padding:6px riêng, nên tổng lề trái tính từ viền panel bằng nhau giữa icon kính lúp và chữ option, thẳng hàng thay vì lệch nhau. */ padding: 6px 14px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); color: var(--text-muted); } .select-custom-filter-icon { flex-shrink: 0; } /* Input trơn (không viền/nền riêng — đã có viền dưới của .select-custom-filter-wrap làm ranh giới) để trông liền mạch như 1 phần của panel, không phải 1 ô input rời. */ .select-custom-filter-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); } .select-custom-filter-input::placeholder { color: var(--text-muted); font-weight: 400; } /* Khối cuộn thật sự — nhận lại đúng max-height/overflow-y từng đặt thẳng trên .select-custom-panel trước đây (xem chú thích ở đó). role="listbox" cũng chuyển xuống đây (thay vì trên panel ngoài) để khớp đúng ngữ nghĩa ARIA: listbox giờ chỉ chứa các phần tử role="option", không lẫn ô lọc. */ .select-custom-options { max-height: 260px; overflow-y: auto; } .select-custom-option { padding: 8px 14px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-standard); } .select-custom-option:hover, .select-custom-option:active { background: var(--paper); } .select-custom-option.is-selected { background: rgba(31, 111, 106, .1); color: var(--jade); } .select-custom-option.is-disabled { opacity: .5; cursor: not-allowed; } /* Option đang được tô sáng bằng phím ↑/↓ trong lúc gõ ô lọc (khác với hover chuột và khác với is-selected — is-selected là GIÁ TRỊ ĐANG CHỌN thật của select, còn trạng thái này chỉ là đang "duyệt tới" bằng bàn phím, dùng chung tông nền hover cho nhẹ nhàng, không tạo thêm 1 màu mới). */ .select-custom-option.is-active-by-filter { background: var(--paper); } /* Option vừa là GIÁ TRỊ ĐANG CHỌN (is-selected) vừa đang được ↑/↓ tô sáng (is-active-by-filter) — 2 rule trên có cùng độ đặc hiệu (0,0,2,0), rule sau (đứng dưới trong file) sẽ thắng nếu không có rule gộp riêng, khiến nền teal nhạt của is-selected bị nền --paper của is-active-by-filter đè mất (chữ vẫn giữ màu --jade vì is-selected không đổi color), làm người dùng dễ tưởng lựa chọn hiện tại "biến mất" trong lúc đang gõ lọc. Rule gộp riêng dưới đây (đặc hiệu cao hơn, 0,0,3,0) giữ token màu teal quen thuộc nhưng đậm hơn 1 chút để vẫn phân biệt được với is-selected đứng yên. */ .select-custom-option.is-selected.is-active-by-filter { background: rgba(31, 111, 106, .18); } /* display:none thay vì opacity/visibility — option bị lọc ẩn không cần animate riêng (gõ lọc là 1 hành động tức thời, không phải mở/đóng cả panel), và ẩn hẳn khỏi luồng layout để danh sách các option còn lại xếp sát nhau, không để lại khoảng trống. */ .select-custom-option.is-hidden-by-filter { display: none; } /* Danh sách co/giãn chiều cao khi gõ lọc (main.js applyFilter(..., true) đặt height px + class này chỉ trong ~200ms). overflow:hidden lúc chạy để thanh cuộn không chớp khi chiều cao đang đổi. */ .select-custom-options.is-resizing { overflow: hidden; transition: height var(--dur-base) var(--ease-standard); } /* Thông báo khi gõ lọc không khớp option nào — cùng tinh thần .search-suggest-empty (ô tìm sản phẩm): 1 dòng chữ phụ, không có gì để bấm. */ .select-custom-empty { animation: msg-fade var(--dur-base) var(--ease-enter); /* chạy lại mỗi lần hết [hidden] */ padding: 10px 14px; font-size: var(--fs-sm); color: var(--text-muted); white-space: normal; } /* Không cần khối prefers-reduced-motion riêng cho panel này: rule chung "*:not(.category-sheet) { transition:none!important... }" ở gần cuối file (mục MODAL/reduced-motion) đã tự động tắt hẳn transition ở trên, panel sẽ ẩn/hiện tức thì (0ms) khi khách bật "giảm chuyển động" — đúng hành vi mong muốn, không cần giữ lại 1 fade ngắn như .category-sheet (đóng/mở select không phải thao tác "lớn" cần phản hồi chuyển tiếp để tránh hụt hẫng). */ /* Số lượng sản phẩm khớp bộ lọc hiện tại — chip có chủ đích rõ ràng (nền nhạt + icon + đường viền dọc ngăn cách với cụm lọc bên trái), thay vì 1 dòng chữ trần trôi nổi giữa khoảng trắng khi .toolbar-filters không đủ dài để lấp gần hết chiều ngang thanh công cụ (danh mục không có thanh trượt giá, hoặc màn hình rất rộng). */ .toolbar-meta { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; margin-left: var(--space-6); padding: 9px 16px 9px var(--space-6); border-left: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper-deep); font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; } .toolbar-meta-icon { display: flex; flex-shrink: 0; color: var(--jade); } .toolbar-meta strong { color: var(--ink); font-weight: 700; } .toolbar-clear { font-size: var(--fs-sm); font-weight: 700; color: var(--koi-red); align-self: center; } .toolbar-clear:hover { text-decoration: underline; } .toolbar-clear:active { text-decoration: underline; opacity: .8; } /* ---------- Thanh phân trang (category.php, blog.php) ---------- Dùng lại đúng token màu/bo góc/spacing đang có (--line, --ink, --jade, --radius-pill...), cùng tinh thần với .toolbar-field/.btn-outline ở trên: viền mảnh, nền trắng, chỉ nổi bật trang đang xem bằng nền đặc màu mực (--ink) thay vì thêm màu mới. */ .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); } .pagination-page, .pagination-arrow { display: inline-flex; align-items: center; justify-content: center; /* 44px — mức tối thiểu khuyến nghị cho vùng chạm trên di động (Apple HIG/Material Design), trước là 40px. .pagination-ellipsis (dấu "…") KHÔNG đổi theo vì đó là tĩnh không click được, không phải vùng chạm thật. */ min-width: 44px; height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font-size: var(--fs-sm); font-weight: 700; box-sizing: border-box; } .pagination-page:hover, .pagination-arrow:hover, .pagination-page:active, .pagination-arrow:active { border-color: var(--jade); color: var(--jade); } .pagination-page-active { background: var(--ink); border-color: var(--ink); color: var(--paper); } .pagination-page-active:hover, .pagination-page-active:active { color: var(--paper); } .pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; /* Đổi theo 44px của .pagination-page/.pagination-arrow ở trên chỉ để giữ thẳng hàng trong cùng 1 hàng flex — bản thân dấu "…" là tĩnh, không phải vùng chạm. */ min-width: 44px; height: 44px; color: var(--text-muted); } .pagination-arrow { font-weight: 700; } /* ---------- thanh trượt khoảng giá (thay cho 2 ô nhập tay) ---------- Cố định chiều rộng vừa phải (không dùng flex-grow) để thanh trượt không bị kéo giãn chiếm hết khoảng trống còn lại của toolbar — chỉ gọn trong khung như 1 ô lọc bình thường. */ .toolbar-field-price { width: 220px; flex: 0 0 auto; } /* .toolbar-field (khung ngoài dùng chung) đã đảm nhiệm viền/nền/bo góc/chiều cao — .price-slider chỉ còn là vùng chứa track+tay kéo, không lồng thêm khung riêng nữa (tránh "viền đôi" và lệch chiều cao so với ô Sắp xếp bên cạnh). */ .price-slider { padding: 0; background: transparent; border: none; box-sizing: border-box; } /* Vùng chứa track + 2 tay kéo dùng chung 1 hệ toạ độ 0–100% duy nhất — track và cả 2 input[range] đều là con trực tiếp của khối này, đảm bảo vệt màu tô luôn khớp đúng vị trí 2 tay kéo, không lệch dù khung ngoài (.price-slider) có padding trang trí. */ .price-slider-body { position: relative; width: 100%; height: 22px; } /* Track dày, bo tròn hẳn kiểu "pill" — dễ nhìn thấy khoảng đã chọn. */ .price-slider-track { position: absolute; left: 0; right: 0; top: 50%; height: 6px; border-radius: var(--radius-pill); background: #e4dfd2; transform: translateY(-50%); } .price-slider-range { position: absolute; top: 50%; left: 0%; right: 0%; height: 6px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--koi-orange), var(--gold)); transform: translateY(-50%); } .price-slider-inputs { position: relative; width: 100%; height: 100%; } /* 2 input[type=range] chồng đúng lên track, dùng chung 1 vùng kéo. Track/nền của mỗi input được ẩn trong suốt (chỉ còn phần thumb hiển thị) vì phần track hiển thị đã do .price-slider-track/.price-slider-range đảm nhiệm — tránh 2 lớp track đè lên nhau. QUAN TRỌNG: reset hẳn border/padding/border-radius/box-sizing ở đây — vì .price-slider nằm trong
, quy tắc toàn cục "form input, form textarea, form select" (viền 1px + padding 12px 14px + bo góc + nền be) áp dụng cho MỌI input kể cả input[type=range], kể cả khi input đó nằm đè tuyệt đối/trong suốt — nếu không tự ghi đè border/padding, 2 input range sẽ bị viền+nền đó "đè" lên, tạo ra khung viền xấu bao quanh thanh trượt VÀ khiến padding kéo lệch vị trí 2 tay kéo (không còn thẳng hàng theo track). Khai báo lại đầy đủ ở đây để luôn thắng bất kể form cha có style gì. */ .price-range { position: absolute; left: 0; right: 0; top: 0; width: 100%; margin: 0; padding: 0; border: none; border-radius: 0; box-sizing: border-box; height: 22px; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; /* chỉ phần thumb mới nhận thao tác kéo, tránh 2 input tranh nhau bắt sự kiện trên track */ } .price-range:focus { outline: none; } .price-range::-webkit-slider-runnable-track { background: transparent; height: 22px; border: none; } .price-range::-moz-range-track { background: transparent; height: 22px; border: none; } /* Tay kéo: hình tròn đặc màu cam thương hiệu, viền trắng dày + đổ bóng mềm — cùng tinh thần với ảnh mẫu (khối tròn đặc, nổi khối rõ ràng) nhưng dùng màu cam của shop thay vì xanh lam, để đồng bộ với .price-slider-range và các điểm nhấn cam khác trên trang. width/height bằng nhau + border cùng độ dày 2 tay kéo để luôn thẳng hàng trên track. */ .price-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 20px; height: 20px; margin-top: 0; border-radius: 50%; background: var(--koi-orange); border: 3px solid #fff; box-shadow: 0 1px 3px rgba(18,34,44,.18), 0 3px 8px rgba(217,102,59,.35); cursor: pointer; transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .price-range::-webkit-slider-thumb:hover, .price-range::-webkit-slider-thumb:active { transform: scale(1.12); box-shadow: 0 2px 5px rgba(18,34,44,.22), 0 4px 12px rgba(217,102,59,.45); } .price-range::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--koi-orange); border: 3px solid #fff; box-shadow: 0 1px 3px rgba(18,34,44,.18), 0 3px 8px rgba(217,102,59,.35); cursor: pointer; transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .price-range::-moz-range-thumb:hover, .price-range::-moz-range-thumb:active { transform: scale(1.12); box-shadow: 0 2px 5px rgba(18,34,44,.22), 0 4px 12px rgba(217,102,59,.45); } .price-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--koi-orange); outline-offset: 3px; } .price-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--koi-orange); outline-offset: 3px; } /* Giá trị hiện tại: đặt ngay dưới thanh trượt, 2 đầu trái/phải, kiểu "pill" trắng nổi trên nền be của khối để nhìn rõ ràng, tách bạch với nền .price-slider. */ .price-slider-values { display: flex; justify-content: space-between; margin-top: var(--space-3); font-size: var(--fs-xs); } .price-slider-values span:not(.price-slider-sep) { background: #fff; color: var(--koi-orange); font-weight: 700; padding: var(--space-1) 10px; border-radius: var(--radius-pill); box-shadow: 0 1px 2px rgba(18,34,44,.08); } .price-slider-sep { color: #c9c1af; font-weight: 400; align-self: center; } @media (max-width: 640px) { .category-toolbar { flex-direction: column; align-items: stretch; padding: 18px 20px; } .toolbar-filters { flex-direction: column; align-items: stretch; gap: var(--space-4); width: 100%; } .toolbar-filters > .toolbar-field + .toolbar-field { padding-left: 0; border-left: none; padding-top: var(--space-4); border-top: 1px solid var(--line); } .toolbar-field { min-height: 0; width: 100%; } .toolbar-field select { min-width: 0; width: 100%; } /* Trigger tự vẽ (thay