/* ========================================================================== BẢNG MÀU — sửa ở ĐÂY là đổi màu toàn bộ giao diện 2. Đang dùng: BẢNG 1 "Trung tính ngả hồng + đỏ logo". Màu nhấn #D81212 KHÔNG phải tự chọn — đó là mã đỏ lấy thẳng từ file logo (uploads/logo-lovekiss.png, chiếm 61,8% số điểm ảnh đỏ). Neo vào logo chứ không neo vào banner: logo là tài sản vĩnh viễn, banner thay theo từng đợt. Nền ngả hồng (không ngả vàng) để cùng nhiệt độ màu với ảnh banner hồng — trước đây nền kem ấm + ảnh hồng lạnh là lý do hai phần trông đá nhau. Toàn bộ mã màu trong main.css, menu-mobile.css, style.css đã quy về các biến dưới đây, không còn hex rời rạc. Muốn thử bảng khác thì chỉ đổi 15 dòng này. ========================================================================== */ :root { --aw-nen: #FBF7F6; /* nền trang - trung tính ngả hồng */ --aw-nen-2: #F5EDEC; /* nền chìm: ô tìm kiếm, ảnh trống, khối xen kẽ */ --aw-the: #FFFFFF; /* mặt thẻ sản phẩm */ --aw-chu: #1F1A1A; /* chữ chính (đen ngả hồng, KHÔNG dùng #000) */ --aw-chu-2: #382F2F; /* chữ chính nhạt hơn 1 bậc */ --aw-chu-phu: #7A6F6F; /* chữ phụ, meta */ --aw-ke: #EDE3E2; /* đường kẻ 1px */ --aw-ke-dam: #CFC0BF; /* kẻ đậm, icon mờ */ --aw-nhan: #D81212; /* ĐỎ LOGO - chỉ ~10% diện tích */ --aw-nhan-dam: #AE0E0E; /* nhấn khi di chuột */ --aw-nhan-sang: #F2696A; /* nhấn dùng TRÊN NỀN TỐI (chân trang, menu trượt) */ --aw-nhan-nhat: #FBE9E9; /* nền chọn/hover rất nhạt */ --aw-nhan-vien: #F2CFCF; /* viền nhấn */ --aw-giam: #A81B22; /* giá giảm - đỏ TRẦM HƠN đỏ logo một bậc, để nhãn "giảm 30%" không nuốt mất nhận diện thương hiệu */ --aw-giam-dam: #85141A; /* Màu CHỮ đặt trên nền màu. Ở bảng nền sáng thì trắng; ở bảng NỀN TỐI màu nhấn là màu SÁNG nên chữ trên nó phải TỐI — không có hai biến này thì mọi bảng nền tối đều bị ép phải dìm màu nhấn xuống cho đủ tương phản với chữ trắng, và mất hết chất "ánh kim trên nền tối". */ --aw-tren-nhan: #FFFFFF; /* trên nút màu nhấn và nhãn giảm giá */ --aw-tren-chu: #FFFFFF; /* trên chân trang / nút dùng --aw-chu làm nền */ --aw-tren-anh: #FFFFFF; /* trên LỚP PHỦ ĐEN đè lên ảnh — luôn sáng ở MỌI bảng màu, kể cả bảng nền tối, vì lớp phủ là rgba(0,0,0,.x) cố định chứ không phải một biến nền. Dùng --aw-tren-chu ở đây là sai: bảng nền tối có --aw-chu SÁNG nên --aw-tren-chu TỐI, thành chữ tối trên lớp phủ đen. */ /* ---- CHỮ ---------------------------------------------------------------- Đổi 2 dòng này là đổi font toàn bộ giao diện. Tách tiêu đề khỏi nội dung vì cảm giác "sang" đến từ tiêu đề CÓ CHÂN đặt trên nội dung KHÔNG CHÂN; đổi cả hai cùng lúc thường chỉ ra "khác", không ra "đẹp hơn". Mặc định tiêu đề ăn theo nội dung -> chưa đổi gì thì trang y hệt như cũ. HAI ĐIỀU PHẢI KIỂM TRƯỚC KHI ĐƯA MỘT FONT VÀO DANH SÁCH: 1. Đủ dấu tiếng Việt. Rất nhiều font phổ biến KHÔNG có. Poppins đã kiểm: thiếu ộ ắ ể ứ ư — nhìn chữ thường không phát hiện ra, phải đọc bảng mã. 2. Có ký tự ₫ (U+20AB). Đây là bẫy RIÊNG, tách khỏi mục 1: Lora có đủ chữ Việt nhưng KHÔNG có ₫ — lấy làm font nội dung là giá tiền vỡ ngay. (Roboto đang dùng: đã kiểm cả hai, đủ.) Ba bộ KHÔNG cần tải gì, dán vào là chạy: hệ thống : system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif có chân : Georgia, "Times New Roman", serif máy chữ : ui-monospace, "Cascadia Mono", Consolas, monospace Muốn font riêng (Be Vietnam Pro, Inter, Merriweather…) thì phải tải về, cắt còn Latin + chữ Việt, thêm @font-face — xem mục TỐI ƯU TÀI NGUYÊN ở AGENTS.md. */ --aw-font-than: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --aw-font-tieu-de: var(--aw-font-than); } /* =========================================================================== GIAO DIỆN 2 — LỚP ĐÈ. Phần nhìn thấy được lấy nguyên từ bộ CSS gốc trong assets/gd3/ (bootstrap, swiper, main.css, swiper-custom). File này chỉ làm ba việc: 1. Cho băng chuyền chạy KHÔNG CẦN Swiper JS. 2. Vá mấy chỗ Autoweb có mà bản gốc không có (ảnh trống, thanh xem thử, menu trượt, thanh đáy điện thoại). 3. Sửa vài chỗ bản gốc dựa vào JS để đặt kích thước. Nạp SAU CÙNG nên đè được main.css mà không phải sửa một dòng nào của họ — giữ nguyên file gốc thì sau này họ sửa giao diện, chép đè lại là xong. =========================================================================== */ /* ---------------------------------------------------------------- băng chuyền Swiper thật đặt width/margin cho từng .swiper-slide bằng JS. Không có JS thì mọi slide rộng 100% và .swiper{overflow:hidden} cắt mất phần còn lại — nhìn như chỉ có đúng một sản phẩm. Ba dòng dưới biến nó thành dải cuộn ngang thật. */ /* KHE GIỮA CÁC THẺ ĐI QUA ĐÚNG MỘT BIẾN — đừng gõ lại con số ở nơi khác. Bề ngang mỗi thẻ = (100% − tổng các khe) / số thẻ, nên hai chỗ đó PHẢI cùng một số. Trước 22/09/2026 cả sáu dòng đều ghi cứng 20px; tôi hạ `gap` xuống 14px ở khổ điện thoại mà quên phần `calc`, thế là thẻ vẫn tính theo 20 → thừa 6px, lề phải 19px trong khi lề trái 13px. Lệch kiểu này mắt thấy ngay mà đọc CSS thì không, vì hai dòng cách nhau 430 dòng. */ .wrap-swiper { --gd3-khe: 20px; } .wrap-swiper .swiper { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .wrap-swiper .swiper-wrapper { transform: none !important; gap: var(--gd3-khe); } .wrap-swiper .swiper-slide { scroll-snap-align: start; height: auto; width: calc((100% - var(--gd3-khe)) / 2); } @media (min-width: 768px) { .wrap-swiper .swiper-slide { width: calc((100% - 2 * var(--gd3-khe)) / 3); } } @media (min-width: 992px) { .wrap-swiper .swiper-slide { width: calc((100% - 3 * var(--gd3-khe)) / 4); } } @media (min-width: 1200px) { .wrap-swiper .swiper-slide { width: calc((100% - 4 * var(--gd3-khe)) / 5); } } /* Nút mũi tên: giữ nguyên kiểu dáng của swiper-custom.css (38x70, nền trắng mờ, ::after rỗng nên hiện icon FontAwesome bên trong), chỉ chạy bằng JS của mình ở cuối layout.php. .swiper-button-lock là class có sẵn của Swiper (display:none) — JS gắn vào khi dải không tràn, khỏi bày hai nút bấm không ăn gì. */ .wrap-swiper .swiper-button-prev, .wrap-swiper .swiper-button-next { border: 0; padding: 0; } /* swiper-custom.css đẩy nút ra -38px ở màn ≥992px, mà .block-products lại overflow:hidden nên nút bị cắt mất. Kéo vào trong mép dải. */ @media (min-width: 992px) { .block-products .wrap-swiper .swiper-button-prev { left: 4px; } .block-products .wrap-swiper .swiper-button-next { right: 4px; } } /* Dưới 992px thì GIẤU HẲN hai nút: trên điện thoại vuốt ngón tay là xong, không cần nút. Bản gốc để nút ở -15px và bị .block-products{overflow:hidden} cắt mất — nhìn thì giống nhau, nhưng nút vô hình mà vẫn bấm được bằng phím Tab là cái bẫy cho người dùng bàn phím. */ @media (max-width: 991.98px) { .block-products .wrap-swiper .swiper-button-prev, .block-products .wrap-swiper .swiper-button-next { display: none; } } /* Dải danh mục ở điện thoại: ô nhỏ hơn thẻ sản phẩm. */ .category-products-mb .swiper-slide { width: 104px; } /* Giấu hẳn thanh cuộn ngang: đã có nút ◀ ▶ và vẫn vuốt/lăn chuột được, thanh cuộn chỉ làm xấu dải sản phẩm. Vẫn giữ overflow-x:auto nên bàn phím và cảm ứng không mất đường cuộn. */ .wrap-swiper .swiper { scrollbar-width: none; -ms-overflow-style: none; } .wrap-swiper .swiper::-webkit-scrollbar { display: none; height: 0; } /* ---------------------------------------------------------------- vá chỗ thiếu */ .gd3-ten-site { font-weight: 800; font-size: 20px; color: var(--aw-chu); white-space: nowrap; } #logo-head { height: 46px; width: auto; } .gd3-khong-anh { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; background: var(--aw-nen); color: var(--aw-ke-dam); font-size: 26px; } .gd3-loi { background: #fdeaea; border: 1px solid #f3c4c6; color: #b42318; border-radius: 10px; padding: 12px 14px; } /* Nhãn "đã bán" tái dùng ô badge của bản gốc. */ .gd3-card-badge b { font-weight: 700; } .product-item .sale.gd3-het { background-image: linear-gradient(to right, var(--aw-chu-phu), var(--aw-chu-2)); } /* Nút ba gạch: bản gốc là , ở đây là