/* * AirFryerReviewHub UI — "countdown ladder" * Chỉ nạp ở is_front_page() và is_category() (afr_ui_assets()). * * Ngôn ngữ hình riêng, cố ý khác năm site đã dựng: * bestrvw "editorial" → bo 10px, đổ bóng, hero ảnh lớn, mono cho SỐ * offago "index board" → bo 2px, bảng liệt kê, mono cho NHÃN + SỐ * tem "mosaic" → bo 18px, ô lệch cỡ, rating cỡ lớn IN ĐÈ lên ảnh * tof "spec sheet" → bo 4px, bảng chuyển vị kẻ kín, mono ở NHÃN CỘT * adb "split rail" → bo 8px, hai cột, danh sách gạch mảnh, KHÔNG mono * afr "countdown" → bo 12px, một THANG DỌC liên tục, số hạng cỡ rất * lớn RỖNG RUỘT nằm trên xương sống bên trái (không * đè lên ảnh, và là THỨ HẠNG chứ không phải điểm), * đếm ngược nên #1 nằm cuối và to gấp đôi. * mono CHỈ dùng cho số hạng, không dùng chỗ nào khác. * * Màu nhấn: xanh lá lục diệp. teal đã bị bestrvw + offago lấy, xanh mực bị tof, * tím bị adb, còn tem thì mỗi chuyên mục một góc màu — xanh lá là chỗ trống * cuối cùng, và cố ý đẩy về phía vàng (hue ~92°) để không đọc nhầm ra teal. * Không dùng cam Amazon, tránh nhầm thương hiệu. * * 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 ========================================================================== */ .afr { --afr-ink: var(--color-text, #1a1d21); --afr-dim: var(--color-text-muted, #6b7280); --afr-line: var(--color-border, #e5e2dc); --afr-face: var(--color-surface, #fff); --afr-sunk: var(--color-bg-alt, #f7f5f0); --afr-leaf: #3f7d20; --afr-leaf-soft: rgba(63, 125, 32, .1); /* 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. */ --afr-plate: #fff; --afr-plate-line: #e4e0d8; --afr-r: 12px; --afr-spine: 76px; /* bề ngang cột số hạng */ color: var(--afr-ink); padding-bottom: var(--space-16, 4rem); } [data-theme="dark"] .afr { --afr-leaf: #9ad46a; --afr-leaf-soft: rgba(154, 212, 106, .13); --afr-plate-line: #3a4049; } .afr *, .afr *::before, .afr *::after { box-sizing: border-box; } .afr-wrap { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); } .afr b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ========================================================================== Masthead ========================================================================== */ .afr-mast { padding: clamp(26px, 5vw, 54px) 0 clamp(18px, 3vw, 28px); } .afr-kick { display: inline-block; margin: 0 0 12px; padding: 4px 11px 5px; border-radius: 999px; background: var(--afr-leaf-soft); color: var(--afr-leaf); font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .afr-mast h1 { margin: 0; font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.06; letter-spacing: -.034em; font-weight: 780; max-width: 20ch; } .afr-mast p { margin: 14px 0 0; max-width: 62ch; color: var(--afr-dim); font-size: clamp(.94rem, 1.3vw, 1.03rem); line-height: 1.62; } .afr-figs { display: flex; flex-wrap: wrap; gap: 8px 30px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--afr-line); } .afr-fig { display: flex; align-items: baseline; gap: 7px; } .afr-fig b { font-size: 1.28rem; font-weight: 780; letter-spacing: -.028em; } .afr-fig span { font-size: .81rem; color: var(--afr-dim); } .afr-fig--depth b { color: var(--afr-leaf); } /* ========================================================================== Section ========================================================================== */ .afr-sec { padding-top: clamp(32px, 5vw, 56px); } .afr-sec__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .afr-sec__hd h2 { margin: 0; font-size: clamp(1.15rem, 2.3vw, 1.6rem); font-weight: 760; letter-spacing: -.028em; } .afr-sec__hd p { flex: 1 1 100%; margin: 7px 0 0; max-width: 66ch; color: var(--afr-dim); font-size: .88rem; line-height: 1.58; } .afr-sec__more { font-size: .82rem; font-weight: 650; color: var(--afr-leaf); text-decoration: none; white-space: nowrap; } .afr-sec__more:hover { text-decoration: underline; } /* ========================================================================== Thang đếm ngược — component nhận diện ========================================================================== */ .afr-skip { margin: 14px 0 6px; } .afr-skip a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--afr-line); border-radius: 999px; font-size: .82rem; font-weight: 650; color: inherit; text-decoration: none; } .afr-skip a:hover { border-color: var(--afr-leaf); color: var(--afr-leaf); } .afr-ladder { list-style: none; margin: 14px 0 0; padding: 0; position: relative; } /* Xương sống — vẽ theo TỪNG BẬC chứ không vẽ một đường trên cả thang: các bậc kề nhau nên nét vẫn liền, mà bậc #1 chỉ cần tắt của riêng nó là đường dừng đúng ở chân thang. Vẽ trên .afr-ladder thì phải đoán chiều cao ô #1 bằng một con số cứng, và nó luôn sai khi tên sản phẩm dài ngắn khác nhau. */ .afr-rung::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--afr-spine) / 2); width: 2px; margin-left: -1px; background: var(--afr-line); } .afr-rung:first-child::before { top: 18px; } .afr-rung--win::before { display: none; } .afr-rung { position: relative; display: grid; grid-template-columns: var(--afr-spine) minmax(0, 1fr); align-items: start; gap: clamp(12px, 2vw, 22px); padding: 16px 0; } .afr-rung + .afr-rung { border-top: 1px solid var(--afr-line); } /* Số hạng: rất lớn, RỖNG RUỘT, ngồi trên xương sống */ .afr-rank { position: relative; z-index: 1; display: block; padding-top: 2px; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(1.9rem, 4.4vw, 2.7rem); font-weight: 700; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--afr-dim); background: var(--afr-face); } .afr-rung__b { min-width: 0; } .afr-rung__l { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: clamp(12px, 2vw, 20px); align-items: center; color: inherit; text-decoration: none; } .afr-rung__c { min-width: 0; } .afr-rung__t { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: clamp(.95rem, 1.5vw, 1.05rem); font-weight: 650; line-height: 1.34; letter-spacing: -.016em; } .afr-rung__l:hover .afr-rung__t { color: var(--afr-leaf); } .afr-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 15px; margin-top: 8px; font-size: .84rem; color: var(--afr-dim); } .afr-price { font-size: .97rem; font-weight: 750; color: var(--afr-ink); letter-spacing: -.018em; } .afr-rate { display: inline-flex; align-items: baseline; gap: 4px; } .afr-rate b { color: var(--afr-ink); font-weight: 750; } .afr-rate i { font-size: .62rem; } /* Bậc #1 — điểm kết thúc của thang, to gấp đôi và đặc ruột */ .afr-rung--win { margin-top: 6px; padding: clamp(18px, 3vw, 28px) clamp(16px, 2.5vw, 24px); border: 2px solid var(--afr-leaf); border-radius: var(--afr-r); background: var(--afr-leaf-soft); } .afr-rung--win.afr-rung + .afr-rung { border-top: 0; } .afr-rung--win .afr-rank { font-size: clamp(3.2rem, 8vw, 5rem); color: var(--afr-leaf); -webkit-text-stroke: 0; background: none; } .afr-rung--win .afr-rung__l { grid-template-columns: 208px minmax(0, 1fr); align-items: center; } .afr-rung--win .afr-rung__t { -webkit-line-clamp: 3; line-clamp: 3; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 780; letter-spacing: -.028em; } .afr-crown { display: inline-block; margin-bottom: 8px; font-size: .74rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--afr-leaf); } /* Thang rút gọn (3 bậc) dùng ở lưới chuyên mục */ .afr-ladder--sm { --afr-spine: 44px; } .afr-ladder--sm .afr-rung:first-child::before { top: 12px; } .afr-ladder--sm .afr-rung { padding: 11px 0; } .afr-ladder--sm .afr-rank { font-size: 1.35rem; -webkit-text-stroke-width: 1.2px; } .afr-ladder--sm .afr-rung__l { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; } .afr-ladder--sm .afr-rung__t { font-size: .85rem; -webkit-line-clamp: 2; line-clamp: 2; } .afr-ladder--sm .afr-meta { margin-top: 5px; font-size: .78rem; gap: 4px 10px; } .afr-ladder--sm .afr-rung--win { padding: 12px 14px; border-width: 1px; } .afr-ladder--sm .afr-rung--win .afr-rank { font-size: 2rem; } .afr-ladder--sm .afr-rung--win .afr-rung__l { grid-template-columns: 60px minmax(0, 1fr); } .afr-ladder--sm .afr-rung--win .afr-rung__t { font-size: .92rem; font-weight: 720; } .afr-ladder--sm .afr-crown { font-size: .66rem; margin-bottom: 5px; } /* Chú thích dưới thang */ .afr-cap { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: 14px; font-size: .85rem; color: var(--afr-dim); } .afr-cap a { color: var(--afr-leaf); font-weight: 650; text-decoration: none; } .afr-cap a:hover { text-decoration: underline; } /* ========================================================================== Ô ảnh ========================================================================== */ .afr-plate { display: block; position: relative; aspect-ratio: 1; background: var(--afr-plate); border: 1px solid var(--afr-plate-line); border-radius: var(--afr-r); overflow: hidden; } .afr-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%; } .afr-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; } .afr-plate--win { border-color: var(--afr-leaf); } /* Ô RỖNG thì KHÔNG giữ nền trắng. Quy tắc "ô ảnh luôn trắng ở cả hai theme" (mục 3) có lý do là ảnh Amazon là JPEG nền trắng đặc — không có ảnh thì lý do đó biến mất, mà cái ô vẫn trắng thì ở dark mode nó thành một mảng chói giữa trang tối, đúng thứ quy tắc kia muốn tránh. Màu icon cũng phải là token chứ không hard-code: #b9b4ab trên nền tối là 2.1:1, gần như không đọc được. */ .afr-plate--empty { display: grid; place-items: center; color: var(--afr-dim); font-size: 1.4rem; background: var(--afr-sunk); border-style: dashed; } .afr-plate--empty::after { display: none; } /* ========================================================================== Lưới chuyên mục (mỗi ô một thang rút gọn) ========================================================================== */ .afr-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); margin-top: 18px; } .afr-col__hd { display: flex; align-items: center; gap: 9px; padding-bottom: 9px; border-bottom: 2px solid var(--afr-ink); } .afr-col__hd i { color: var(--afr-leaf); font-size: 1rem; } .afr-col__hd h3 { margin: 0; font-size: .95rem; font-weight: 730; letter-spacing: -.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .afr-col__hd h3 a { color: inherit; text-decoration: none; } .afr-col__hd h3 a:hover { color: var(--afr-leaf); } .afr-col__n { margin-left: auto; flex: 0 0 auto; font-size: .78rem; color: var(--afr-dim); } /* ========================================================================== Danh sách guide (trang chuyên mục) — mỗi dòng khoe ĐỘ SÂU của nó ========================================================================== */ .afr-guides { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--afr-line); } .afr-guides li { border-bottom: 1px solid var(--afr-line); } .afr-guide { display: block; padding: 15px 10px 15px 0; color: inherit; text-decoration: none; } .afr-guide:hover { background: var(--afr-sunk); } .afr-guide__t { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.34; letter-spacing: -.018em; } .afr-guide:hover .afr-guide__t { color: var(--afr-leaf); } /* Dải ảnh nhỏ = mấy bậc đầu của bảng xếp hạng bên trong bài */ .afr-strip { display: flex; align-items: center; gap: 7px; margin-top: 10px; } .afr-strip .afr-plate { width: 46px; flex: 0 0 auto; border-radius: 8px; } .afr-strip .afr-plate img { padding: 6%; } .afr-strip .afr-plate::after { display: none; } .afr-depth { margin-left: 4px; padding: 3px 9px 4px; border-radius: 999px; background: var(--afr-leaf-soft); color: var(--afr-leaf); font-size: .74rem; font-weight: 700; white-space: nowrap; } /* ========================================================================== Đầu trang chuyên mục / điều hướng cuối ========================================================================== */ .afr-crumb { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .81rem; color: var(--afr-dim); } .afr-crumb a { color: var(--afr-leaf); text-decoration: none; } .afr-crumb a:hover { text-decoration: underline; } .afr-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .afr-pill { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 14px; border: 1px solid var(--afr-line); border-radius: 999px; font-size: .85rem; color: inherit; text-decoration: none; } .afr-pill:hover, .afr-pill.is-on { border-color: var(--afr-leaf); color: var(--afr-leaf); } .afr-pill span { font-size: .78rem; color: var(--afr-dim); } .afr-pill:hover span, .afr-pill.is-on span { color: inherit; } .afr-pager { margin-top: 26px; display: flex; justify-content: center; } .afr-pager .page-numbers { display: inline-block; min-width: 38px; padding: 8px 11px; margin: 0 3px; text-align: center; border-radius: 8px; font-size: .86rem; font-weight: 650; color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; } .afr-pager .page-numbers:hover { background: var(--afr-sunk); color: var(--afr-leaf); } .afr-pager .page-numbers.current { background: var(--afr-leaf); color: #fff; } [data-theme="dark"] .afr-pager .page-numbers.current { color: #12180c; } .afr-empty { margin-top: 18px; padding: 36px 20px; text-align: center; color: var(--afr-dim); border: 1px dashed var(--afr-line); border-radius: var(--afr-r); } /* Ghi chú */ .afr-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 30px); margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--afr-line); } .afr-note h3 { margin: 0 0 7px; font-size: .93rem; font-weight: 730; letter-spacing: -.016em; } .afr-note p { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--afr-dim); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 900px) { .afr-cols { grid-template-columns: 1fr; } .afr-notes { grid-template-columns: 1fr; } } @media (max-width: 700px) { .afr { --afr-spine: 50px; } .afr-rung__l { grid-template-columns: 84px minmax(0, 1fr); } .afr-rung--win .afr-rung__l { grid-template-columns: minmax(0, 1fr); gap: 14px; } .afr-rung--win .afr-plate--win { max-width: 190px; } .afr-strip .afr-plate { width: 40px; } .afr-strip .afr-plate:nth-child(n + 4) { display: none; } } @media (prefers-reduced-motion: reduce) { .afr-guide, .afr-pill, .afr-skip a { transition: none; } }