/* * MicrowaveReview UI — "Q&A first" * Chỉ nạp ở is_front_page() và is_category() (mwr_ui_assets()). * * Ngôn ngữ hình riêng, cố ý khác sáu 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, KHÔNG card, KHÔNG lưới, KHÔNG bảng. * Trang là một chuỗi CÂU HỎI đặt bằng **font * SERIF cỡ lớn** — sáu site kia đều sans tuyệt đối, * đây là điểm nhận diện chính. Câu trả lời là những * hàng sans nhỏ, im lặng, nằm dưới câu hỏi. * * Màu nhấn: đỏ rượu. teal đã bị bestrvw + offago lấy, xanh mực bị tof, tím bị * adb, xanh lá bị afr, tem thì mỗi chuyên mục một góc màu. Đỏ rượu (hue ~345°) * hợp với serif và ở xa cam Amazon. * * 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 ========================================================================== */ .mwr { --mwr-ink: var(--color-text, #1a1d21); --mwr-dim: var(--color-text-muted, #6b7280); --mwr-line: var(--color-border, #e5e2dc); --mwr-face: var(--color-surface, #fff); --mwr-sunk: var(--color-bg-alt, #f7f5f0); --mwr-wine: #7d2b3c; --mwr-wine-soft: rgba(125, 43, 60, .08); /* 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. */ --mwr-plate: #fff; --mwr-plate-line: #e4e0d8; --mwr-r: 6px; --mwr-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; color: var(--mwr-ink); padding-bottom: var(--space-16, 4rem); } [data-theme="dark"] .mwr { --mwr-wine: #e8a0ae; --mwr-wine-soft: rgba(232, 160, 174, .12); --mwr-plate-line: #3a4049; } .mwr *, .mwr *::before, .mwr *::after { box-sizing: border-box; } .mwr-wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); } .mwr b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Mọi câu hỏi của giao diện này — đây là dấu hiệu nhận diện */ .mwr-q { font-family: var(--mwr-serif); font-weight: 400; letter-spacing: -.012em; line-height: 1.16; } /* ========================================================================== Masthead ========================================================================== */ .mwr-mast { padding: clamp(28px, 5vw, 60px) 0 clamp(20px, 3vw, 30px); } .mwr-mast h1 { margin: 0; font-family: var(--mwr-serif); font-weight: 400; font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.1; letter-spacing: -.018em; max-width: 17ch; } .mwr-mast h1 em { font-style: italic; color: var(--mwr-wine); } .mwr-mast p { margin: 16px 0 0; max-width: 60ch; color: var(--mwr-dim); font-size: clamp(.94rem, 1.3vw, 1.03rem); line-height: 1.65; } .mwr-figs { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--mwr-line); } .mwr-fig { display: flex; align-items: baseline; gap: 7px; } .mwr-fig b { font-size: 1.22rem; font-weight: 700; letter-spacing: -.025em; } .mwr-fig span { font-size: .81rem; color: var(--mwr-dim); } /* ========================================================================== Bảng câu hỏi ========================================================================== */ .mwr-board { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } /* Không phải card: chỉ là một ô có viền mảnh, bề ngang co theo độ dài câu hỏi nên hàng câu hỏi đọc như một đoạn văn bị bẻ dòng chứ không như một lưới. */ .mwr-ask { display: inline-flex; align-items: baseline; gap: 10px; padding: 11px 16px 13px; border: 1px solid var(--mwr-line); border-radius: var(--mwr-r); color: inherit; text-decoration: none; max-width: 100%; } .mwr-ask:hover, .mwr-ask:focus-visible { border-color: var(--mwr-wine); background: var(--mwr-wine-soft); } .mwr-ask__q { font-family: var(--mwr-serif); font-size: 1.02rem; line-height: 1.3; min-width: 0; } .mwr-ask__n { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: var(--mwr-wine); } /* ========================================================================== Một khối hỏi–đáp ========================================================================== */ .mwr-block { padding-top: clamp(30px, 4.5vw, 52px); } .mwr-block__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--mwr-ink); } .mwr-block__hd h2 { margin: 0; font-family: var(--mwr-serif); font-weight: 400; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.14; letter-spacing: -.016em; min-width: 0; } .mwr-block__n { flex: 0 0 auto; font-size: .8rem; color: var(--mwr-dim); } /* Câu hỏi con bên trong một khối — nhỏ hơn và gạch nhạt hơn, để phân biệt với câu hỏi mở đầu khối mà không phải đổi thẻ. */ .mwr-block__hd--sub { margin-top: 22px; padding-bottom: 9px; border-bottom-color: var(--mwr-line); } .mwr-block__hd--sub h2 { font-size: clamp(1.1rem, 2.2vw, 1.4rem); } .mwr-block__n b { color: var(--mwr-wine); } /* Câu trả lời: hàng im lặng, sans, không viền, chỉ cách nhau bằng gạch mảnh */ .mwr-answers { list-style: none; margin: 0; padding: 0; } .mwr-answers li + li { border-top: 1px solid var(--mwr-line); } .mwr-a { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: clamp(14px, 2vw, 20px); align-items: center; padding: 15px 8px 15px 0; color: inherit; text-decoration: none; } .mwr-a:hover { background: var(--mwr-sunk); } .mwr-a__b { min-width: 0; } .mwr-a__t { margin: 0; font-size: 1rem; font-weight: 620; line-height: 1.35; letter-spacing: -.016em; } .mwr-a:hover .mwr-a__t { color: var(--mwr-wine); } .mwr-cat { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 5px; font-size: .73rem; font-weight: 650; letter-spacing: .045em; text-transform: uppercase; color: var(--mwr-dim); } .mwr-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 15px; margin-top: 7px; font-size: .83rem; color: var(--mwr-dim); } .mwr-price { font-size: .95rem; font-weight: 720; color: var(--mwr-ink); letter-spacing: -.018em; } .mwr-rate { display: inline-flex; align-items: baseline; gap: 4px; } .mwr-rate b { color: var(--mwr-ink); font-weight: 720; } .mwr-rate i { font-size: .62rem; } .mwr-depth { color: var(--mwr-wine); font-weight: 650; } .mwr-more { margin: 12px 0 0; font-size: .85rem; } .mwr-more a { color: var(--mwr-wine); font-weight: 650; text-decoration: none; } .mwr-more a:hover { text-decoration: underline; } /* ========================================================================== Ô ảnh ========================================================================== */ .mwr-plate { display: block; position: relative; aspect-ratio: 1; background: var(--mwr-plate); border: 1px solid var(--mwr-plate-line); border-radius: var(--mwr-r); overflow: hidden; } .mwr-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%; } .mwr-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; } /* Ô 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. */ .mwr-plate--empty { display: grid; place-items: center; color: var(--mwr-dim); font-size: 1.3rem; background: var(--mwr-sunk); border-style: dashed; } .mwr-plate--empty::after { display: none; } /* ========================================================================== Chuyên mục + điều hướng ========================================================================== */ .mwr-crumb { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .81rem; color: var(--mwr-dim); } .mwr-crumb a { color: var(--mwr-wine); text-decoration: none; } .mwr-crumb a:hover { text-decoration: underline; } .mwr-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .mwr-pill { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 14px; border: 1px solid var(--mwr-line); border-radius: 999px; font-size: .85rem; color: inherit; text-decoration: none; } .mwr-pill:hover { border-color: var(--mwr-wine); color: var(--mwr-wine); } .mwr-pill span { font-size: .78rem; color: var(--mwr-dim); } .mwr-pill:hover span { color: inherit; } .mwr-pager { margin-top: 26px; display: flex; justify-content: center; } .mwr-pager .page-numbers { display: inline-block; min-width: 38px; padding: 8px 11px; margin: 0 3px; text-align: center; border-radius: var(--mwr-r); font-size: .86rem; font-weight: 650; color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; } .mwr-pager .page-numbers:hover { background: var(--mwr-sunk); color: var(--mwr-wine); } .mwr-pager .page-numbers.current { background: var(--mwr-wine); color: #fff; } [data-theme="dark"] .mwr-pager .page-numbers.current { color: #1a1013; } .mwr-empty { margin-top: 18px; padding: 36px 20px; text-align: center; color: var(--mwr-dim); border: 1px dashed var(--mwr-line); border-radius: var(--mwr-r); } /* Ghi chú — cũng đặt dưới dạng hỏi/đáp cho nhất quán */ .mwr-notes { margin-top: 18px; border-top: 1px solid var(--mwr-line); } .mwr-note { padding: 18px 0; border-bottom: 1px solid var(--mwr-line); } .mwr-note h3 { margin: 0 0 7px; font-family: var(--mwr-serif); font-weight: 400; font-size: 1.1rem; line-height: 1.25; letter-spacing: -.012em; } .mwr-note p { margin: 0; max-width: 72ch; font-size: .87rem; line-height: 1.65; color: var(--mwr-dim); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 700px) { .mwr-a { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 13px 0; } .mwr-ask { width: 100%; } } @media (prefers-reduced-motion: reduce) { .mwr-a, .mwr-ask, .mwr-pill { transition: none; } }