/* * RobotVacuumReviewHub UI — "shelf rows" * Chỉ nạp ở is_front_page() và is_category() (rvh_ui_assets()). * * Ngôn ngữ hình riêng, cố ý khác chín site đã dựng: * bestrvw "editorial" → bo 10px, đổ bóng, hero ảnh lớn * offago "index board" → bo 2px, bảng liệt kê, mono nhãn + số * tem "mosaic" → bo 18px, ô lệch cỡ, rating in đè lên ảnh * tof "spec sheet" → bo 4px, bảng chuyển vị kẻ kín * adb "split rail" → bo 8px, hai cột, rail dính * afr "countdown" → bo 12px, thang dọc, số hạng rỗng ruột * mwr "Q&A first" → bo 6px, câu hỏi bằng serif * ppc "three tracks"→ bo 0, ba hình dạng thẻ, đơn sắc * rcr "poster" → không hộp, dải đảo màu tràn viền, chữ 4–8rem * rvh "shelf rows" → bo **14px**, mỗi chuyên mục MỘT DÃI CUỘN NGANG cao * bằng nhau, nền giấy đổi luân phiên từng dãi. * Nhãn giữ nguyên cách viết hoa của tên chuyên mục. * * ⚠️ Ba trục dưới đây đều CHƯA site nào dùng, và đó là lý do hướng này khác: * 1. **cuộn NGANG** — chiều dọc trang là danh sách CHỦ ĐỀ, không phải danh * sách bài. Mọi site kia đều cuộn dọc qua nội dung. * 2. **hai nền giấy xen kẽ** (--color-bg / --color-bg-alt) chạy hết bề ngang. * 3. **màu duy nhất trên trang đến từ ẢNH SẢN PHẨM** — toàn bộ giao diện là * xám độ, không có màu nhấn nào. Khác ppc (cũng đơn sắc) ở chỗ ppc là lưới * tĩnh, kẻ mảnh, ba hình dạng thẻ; ở đây là dãi cuộn, nền xen kẽ, một hình * dạng thẻ duy nhất lặp đều. * * ⚠️ KHÔNG có bề mặt nào ĐẢO MÀU ở đây (hai nền giấy cùng sáng ở light, cùng * tối ở dark) nên chữ kế thừa `--color-text` của theme cha vẫn đúng — không cần * `.x-surface * { color: inherit }` như rcr đã phải thêm. Nếu sau này thêm dải * đảo màu thì BẮT BUỘC thêm dòng đó, xem mục 4 của giaodien.md. * * Theme cha bật dark bằng [data-theme="dark"] trên , KHÔNG dùng * prefers-color-scheme — mọi khối dark viết theo đúng selector đó. */ /* ========================================================================== Token ========================================================================== */ .rvh { --rvh-ink: var(--color-text, #1a1d21); --rvh-dim: var(--color-text-muted, #6b7280); --rvh-line: var(--color-border, #e5e2dc); --rvh-rule: var(--color-border-strong, #d1cec6); --rvh-bg: var(--color-bg, #fdfbf7); --rvh-bg2: var(--color-bg-alt, #f7f5f0); /* Mặt ô ảnh cố định trắng ở CẢ HAI theme: ảnh Amazon là JPEG nền trắng đặc, đặt lên ô tối chỉ tạo ra một mảng trắng chói. Chỉ viền đổi màu. */ --rvh-plate: #fff; --rvh-plate-line: #e4e0d8; --rvh-r: 14px; --rvh-card: 188px; /* bề rộng cố định — thứ làm dãi cuộn được */ color: var(--rvh-ink); padding-bottom: var(--space-16, 4rem); } [data-theme="dark"] .rvh { --rvh-plate-line: #3a4049; } .rvh *, .rvh *::before, .rvh *::after { box-sizing: border-box; } .rvh-in { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 36px); } .rvh b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ========================================================================== Masthead ========================================================================== */ .rvh-mast { padding: clamp(26px, 5vw, 56px) 0 clamp(20px, 3vw, 32px); } .rvh-mast h1 { margin: 0; font-size: clamp(1.8rem, 4.4vw, 2.8rem); line-height: 1.1; letter-spacing: -.032em; font-weight: 750; max-width: 20ch; } .rvh-mast p { margin: 14px 0 0; max-width: 62ch; color: var(--rvh-dim); font-size: clamp(.94rem, 1.3vw, 1.02rem); line-height: 1.62; } .rvh-figs { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rvh-line); font-size: .84rem; color: var(--rvh-dim); } .rvh-figs b { color: var(--rvh-ink); font-weight: 750; letter-spacing: -.02em; } /* ========================================================================== Dãi — component nhận diện ========================================================================== */ /* Nền chạy hết bề ngang mà KHÔNG dùng 100vw: dãi là block con trực tiếp của
nên nó đã rộng bằng trang. `width:100vw` + margin âm sẽ tính cả bề rộng thanh cuộn và đẻ ra cuộn ngang toàn trang — bẫy đã gặp khi dựng rcr. */ .rvh-shelf { padding: clamp(20px, 3vw, 30px) 0 clamp(22px, 3.2vw, 34px); background: var(--rvh-bg); border-top: 1px solid var(--rvh-line); } .rvh-shelf:nth-of-type(even) { background: var(--rvh-bg2); } .rvh-shelf__hd { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } /* Nhãn dãi giữ NGUYÊN cách viết hoa của tên chuyên mục trong DB ("Beauty & Personal Grooming"). Bản đầu tôi ép `text-transform: lowercase` + strtolower() cho khác chín site kia, nhưng ép chữ thường lên danh từ riêng thì đọc như lỗi gõ chứ không như một lựa chọn. Nét riêng của dãi giữ ở giãn chữ + trọng lượng, không ở hoa/thường. */ .rvh-shelf__hd h2 { margin: 0; font-size: clamp(.95rem, 1.9vw, 1.15rem); font-weight: 600; letter-spacing: .02em; line-height: 1.2; } .rvh-shelf__hd h2 a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } .rvh-shelf__hd h2 a:hover { border-bottom-color: var(--rvh-ink); } .rvh-shelf__n { font-size: .8rem; color: var(--rvh-dim); font-variant-numeric: tabular-nums; } .rvh-shelf__all { margin-left: auto; font-size: .8rem; letter-spacing: .02em; color: var(--rvh-dim); text-decoration: none; white-space: nowrap; } .rvh-shelf__all:hover { color: var(--rvh-ink); } /* Bản thân dãi cuộn */ .rvh-strip { display: flex; gap: clamp(10px, 1.4vw, 16px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 10px; scrollbar-width: thin; } .rvh-strip:focus-visible { outline: 2px solid var(--rvh-ink); outline-offset: 4px; } .rvh-strip::-webkit-scrollbar { height: 6px; } .rvh-strip::-webkit-scrollbar-track { background: transparent; } .rvh-strip::-webkit-scrollbar-thumb { background: var(--rvh-rule); border-radius: 3px; } /* ========================================================================== Thẻ ========================================================================== */ .rvh-card { flex: 0 0 var(--rvh-card); width: var(--rvh-card); scroll-snap-align: start; display: flex; flex-direction: column; color: inherit; text-decoration: none; } .rvh-card__t { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 11px; font-size: .88rem; font-weight: 620; line-height: 1.32; letter-spacing: -.014em; } .rvh-card:hover .rvh-card__t { text-decoration: underline; } .rvh-card__m { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 12px; margin-top: 7px; font-size: .79rem; color: var(--rvh-dim); } .rvh-card__m b { color: var(--rvh-ink); font-size: .89rem; font-weight: 750; letter-spacing: -.018em; } .rvh-card__m i { font-size: .58rem; margin-left: 3px; } /* Ô ảnh — chỗ DUY NHẤT có màu trên toàn giao diện */ .rvh-plate { display: block; position: relative; aspect-ratio: 1; background: var(--rvh-plate); border: 1px solid var(--rvh-plate-line); border-radius: var(--rvh-r); overflow: hidden; } .rvh-plate img { display: block; width: 100%; height: 100%; object-fit: contain; /* KHÔNG cover — cover cắt mất thân sản phẩm */ padding: 8%; } .rvh-plate::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 7%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .12), transparent 72%); pointer-events: none; } .rvh-card:hover .rvh-plate { border-color: var(--rvh-rule); } /* Ô RỖNG thì KHÔNG giữ nền trắng: quy tắc "ô ảnh luôn trắng" có lý do là ảnh Amazon nền trắng đặc — không có ảnh thì lý do đó biến mất, mà ô vẫn trắng thì ở dark mode nó thành mảng chói. */ .rvh-plate--empty { background: var(--rvh-bg2); border-style: dashed; } .rvh-plate--empty::after { display: none; } /* ========================================================================== Trang chuyên mục — dãi hiện tại trải thành lưới ========================================================================== */ .rvh-crumb { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .8rem; letter-spacing: .02em; color: var(--rvh-dim); } .rvh-crumb a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rvh-line); } .rvh-crumb a:hover { border-bottom-color: var(--rvh-ink); } .rvh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--rvh-card), 1fr)); gap: clamp(16px, 2.2vw, 26px); } .rvh-grid .rvh-card { flex: none; width: auto; } .rvh-pager { margin-top: 30px; display: flex; justify-content: center; } .rvh-pager .page-numbers { display: inline-block; min-width: 38px; padding: 8px 11px; margin: 0 3px; text-align: center; border: 1px solid var(--rvh-line); border-radius: var(--rvh-r); font-size: .84rem; font-weight: 650; color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; } .rvh-pager .page-numbers:hover { border-color: var(--rvh-ink); } .rvh-pager .page-numbers.current { background: var(--rvh-ink); border-color: var(--rvh-ink); color: var(--rvh-bg); } .rvh-empty { padding: 40px 20px; text-align: center; color: var(--rvh-dim); border: 1px dashed var(--rvh-line); border-radius: var(--rvh-r); } /* Ghi chú cuối */ .rvh-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 34px); padding: clamp(26px, 4vw, 44px) 0 0; border-top: 1px solid var(--rvh-line); } .rvh-note h3 { margin: 0 0 7px; font-size: .9rem; font-weight: 700; letter-spacing: -.012em; } .rvh-note p { margin: 0; font-size: .85rem; line-height: 1.62; color: var(--rvh-dim); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 900px) { .rvh-notes { grid-template-columns: 1fr; } } @media (max-width: 640px) { .rvh { --rvh-card: 150px; } } @media (prefers-reduced-motion: reduce) { .rvh-strip { scroll-behavior: auto; scroll-snap-type: none; } }