(xem PHP) nên KHÔNG dùng biến --dlb-mm-* (những biến đó gán trên

, topbar không kế thừa) — màu đọc thẳng từ style="" gắn ngay trên .dlb-main-menu__topbar. */ .dlb-main-menu__topbar { font-size: 13px; } .dlb-main-menu__topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 8px 24px; min-height: 24px; } .dlb-main-menu__topbar-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 22px; flex-wrap: wrap; } .dlb-main-menu__topbar-list li { display: flex; align-items: center; gap: 7px; white-space: nowrap; } .dlb-main-menu__topbar-list svg { flex-shrink: 0; } .dlb-main-menu__topbar a { color: inherit; text-decoration: none; } .dlb-main-menu__topbar a:hover { color: #ffffff; text-decoration: underline; } /* Thu gọn dần giống demo-ui: > 900px giữ cả 4 dòng; 900px bớt dòng phụ bên trái (chỉ còn "Giao hàng nhanh chóng..."); 640px chỉ còn 1 dòng mỗi bên (gọn cho màn hẹp). Riêng dòng TRÁI giờ nằm trong marquee (xem khối bên dưới) — rule "n+2 { display:none }" gốc này vẫn ĐÚNG ý (chỉ 1 dòng khi không marquee), nhưng bị khối marquee override lại thành HIỆN ĐỦ để cuộn, xem giải thích ngay dưới. */ @media (max-width: 900px) { .dlb-main-menu__topbar-list:first-child li:nth-child(n+2) { display: none; } } @media (max-width: 640px) { .dlb-main-menu__topbar-list:last-child li:nth-child(n+2) { display: none; } .dlb-main-menu__topbar-inner { padding: 8px 18px; } } /* Chữ chạy (marquee) dòng trái topbar trên di động — thêm 2026-09-01 theo yêu cầu người dùng "chữ chạy từ trái qua phải, chạm bên phải tiếp tục xuất hiện đầu trái và cuộn tiếp. Icon đi trước nội dung đi sau". PHP (xem dlb-main-menu-rz84.php) đã nhân đôi y hệt nội dung dòng trái thành 2 bản trong track — animate track từ "translateX(-50%)" về "0%" chạy vô hạn: tại 0%, track lộ ĐÚNG bản 1 (giống hệt trạng thái tĩnh cũ); trôi dần về 0% nghĩa là bản 1 trượt VÀO từ bên trái, bản 2 trượt dần ra bên phải rồi mất hút — đúng chiều "trái qua phải", điểm nối liền mạch vì 2 bản giống hệt nhau tuyệt đối. */ .dlb-main-menu__topbar-marquee { overflow: hidden; } .dlb-main-menu__topbar-marquee-track { display: flex; width: max-content; } .dlb-main-menu__topbar-marquee-track .dlb-main-menu__topbar-list { flex-shrink: 0; flex-wrap: nowrap; } /* LỖI THẬT phát hiện 2026-09-01 (tự chụp ảnh desktop kiểm tra mới lộ ra, không thấy qua đọc code): ".topbar-marquee" là 1 flex-item con của ".topbar-inner" (flex), KHÔNG có width/flex-basis riêng nên tự co khít theo nội dung bên trong — mà track bên trong lại "width:max-content" ôm CẢ 2 bản (gấp đôi) — kết quả container tự nở rộng ra vừa đủ chứa CẢ 2 bản, "overflow:hidden" không còn gì để cắt, bản sao aria-hidden LỘ HẲN ra ngoài y hệt 1 dòng lặp lại nhìn rất kỳ (xem trên desktop: nút "Kiểm tra..." xuất hiện 2 lần liền nhau). Sửa gốc: ẨN HẲN bản sao (display:none) làm mặc định — container khi đó chỉ còn đúng 1 bản, tự co khít bình thường như trước khi có marquee, không tràn. CHỈ hiện lại bản sao (display:flex) trong đúng @media di động bên dưới, nơi animation thật sự chạy và cần cả 2 bản để cuộn. */ .dlb-main-menu__topbar-marquee-track .dlb-main-menu__topbar-list[aria-hidden="true"] { display: none; } @media (max-width: 900px) { /* Ghi đè LẠI rule "n+2 { display:none }" ở trên — marquee cần ĐỦ mọi mục ở CẢ 2 bản (không phải chỉ mục đầu) để 2 bản khớp nhau tuyệt đối, vòng lặp mới liền mạch. Specificity cao hơn (thêm 1 lớp tổ tiên) + đứng SAU trong file nên thắng chắc chắn dù cùng @media. */ .dlb-main-menu__topbar-marquee-track .dlb-main-menu__topbar-list li:nth-child(n+2) { display: flex; } .dlb-main-menu__topbar-marquee-track .dlb-main-menu__topbar-list[aria-hidden="true"] { display: flex; } .dlb-main-menu__topbar-marquee-track { animation: dlb-topbar-marquee 10s linear infinite; } } @keyframes dlb-topbar-marquee { from { transform: translateX(-50%); } to { transform: translateX(0%); } } @media (prefers-reduced-motion: reduce) { .dlb-main-menu__topbar-marquee-track { animation: none; } } /* ============================== YÊU THÍCH (WISHLIST ICON) ============================== Thêm 2026-08-30 — CHỈ hiện số lượng (đọc localStorage dùng chung với dlb-item-grid-di90, xem frontend.js), badge để [hidden] mặc định cho tới khi JS xác nhận có ít nhất 1 sản phẩm đã lưu, tránh chớp "0" rồi biến mất ngay khi tải trang. */ .dlb-main-menu__wishlist { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 14px; z-index: 2; color: var(--dlb-mm-wishlist-color, #111111); } .dlb-main-menu__wishlist svg { width: 22px; height: 22px; } .dlb-main-menu__wishlist-badge { position: absolute; top: -6px; right: -9px; box-sizing: border-box; /* xem giải thích ở .dlb-main-menu__cart-badge phía trên — tránh méo oval */ min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #fcb900; color: #111111; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .dlb-main-menu__wishlist-badge[hidden] { display: none; } /* ============================== NÚT "MUA NGAY" (CTA) ============================== Thêm 2026-08-30. */ .dlb-main-menu__buy-now { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 14px; padding: 10px 22px; border-radius: 6px; font-size: 14px; font-weight: 700; white-space: nowrap; background: var(--dlb-mm-buynow-bg, #fcb900); color: var(--dlb-mm-buynow-text, #111111); text-decoration: none; transition: filter .15s ease; } .dlb-main-menu__buy-now:hover { filter: brightness(0.94); } /* Bỏ gạch chân khi hover/chạm — CÙNG GỐC RỄ với logo/menu phía trên (xem giải thích ở ".dlb-main-menu__brand:hover" đầu file). Nút này TRƯỚC ĐÓ chưa từng có "text-decoration:none" riêng (chỉ dựa mặc định toàn site) nên bị gạch chân xấu đè lên nền vàng khi hover — thêm luôn vào rule nền + đúng 3 trạng thái để chắc ăn, cùng cách làm với logo/menu. */ .dlb-main-menu__buy-now:hover, .dlb-main-menu__buy-now:focus, .dlb-main-menu__buy-now:active { text-decoration: none; } /* Di động (đồng bộ class "--is-mobile" do JS gán trên