/* * TopOfficeChair UI — "spec sheet" * Chỉ nạp ở is_front_page() và is_category() (tof_ui_assets()). * * Ngôn ngữ hình riêng, cố ý khác ba 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Ê (dòng = guide), mono cả nhãn lẫn số * tem "mosaic" → bo 18px, ô ảnh lệch cỡ, số cỡ lớn in đè, không bảng * tof "spec sheet" → bo 4px, bảng SO SÁNH CHUYỂN VỊ (cột = sản phẩm, * dòng = thuộc tính), lưới kẻ kín, mono CHỈ ở nhãn * cột trái, giá trị là sans đậm tabular. * * Hệ hai màu, cố ý hẹp: * --tof-blue thương hiệu / liên kết (không dùng teal — bestrvw và offago * đều đã lấy teal làm màu nhấn) * --tof-red CHỈ xuất hiện trên giảm giá thật. Site này là site duy nhất có * `original_price > price` nên đỏ ở đây luôn mang thông tin; * đừng bê sang site khác, ở đó nó sẽ không bao giờ hiện. * 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 ========================================================================== */ .tof { --tof-ink: var(--color-text, #1a1d21); --tof-dim: var(--color-text-muted, #6b7280); --tof-line: var(--color-border, #e5e2dc); --tof-rule: var(--color-border-strong, #d1cec6); --tof-face: var(--color-surface, #fff); --tof-sunk: var(--color-bg-alt, #f7f5f0); --tof-blue: #23408d; --tof-red: #b3261e; --tof-win: rgba(35, 64, 141, .05); --tof-ok: #1c7a4a; /* 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. */ --tof-plate: #fff; --tof-plate-line: #e2ded6; --tof-r: 4px; /* bo nhỏ, kiểu tài liệu kỹ thuật */ --tof-gut: 104px; /* cột nhãn thuộc tính */ --tof-col: 152px; /* bề ngang tối thiểu một cột sản phẩm */ --tof-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--tof-ink); padding-bottom: var(--space-16, 4rem); } [data-theme="dark"] .tof { --tof-blue: #8fa8f0; --tof-red: #ff9a8f; --tof-win: rgba(143, 168, 240, .09); --tof-ok: #4ade80; --tof-plate-line: #3a4049; } .tof *, .tof *::before, .tof *::after { box-sizing: border-box; } .tof-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); } /* Mọi con số */ .tof b, .tof s, .tof-fig b, .tof-cat__n { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ========================================================================== Masthead ========================================================================== */ .tof-mast { padding: clamp(26px, 5vw, 52px) 0 clamp(18px, 3vw, 26px); } .tof-kicker { display: flex; align-items: center; gap: 10px; font-family: var(--tof-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tof-dim); margin: 0 0 14px; } .tof-kicker::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--tof-line); } .tof-mast h1 { margin: 0; font-size: clamp(1.85rem, 4.4vw, 2.9rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 750; max-width: 22ch; } .tof-mast p { margin: 14px 0 0; max-width: 64ch; color: var(--tof-dim); font-size: clamp(.94rem, 1.3vw, 1.02rem); line-height: 1.6; } /* Số liệu: 4 ô ngăn bằng đường kẻ dọc, kiểu bảng thông số */ .tof-figs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 26px; border: 1px solid var(--tof-rule); border-radius: var(--tof-r); overflow: hidden; } .tof-fig { padding: 14px 16px; border-right: 1px solid var(--tof-line); } .tof-fig:last-child { border-right: 0; } .tof-fig b { display: block; font-size: 1.5rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; } .tof-fig span { display: block; margin-top: 4px; font-family: var(--tof-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--tof-dim); } .tof-fig--deal b { color: var(--tof-red); } /* ========================================================================== Section ========================================================================== */ .tof-sec { padding-top: clamp(36px, 5.5vw, 64px); } .tof-sec__hd { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 2px solid var(--tof-rule); } .tof-sec__n { font-family: var(--tof-mono); font-size: 12px; letter-spacing: .1em; color: var(--tof-blue); flex: 0 0 auto; } .tof-sec__hd h2 { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.55rem); font-weight: 750; letter-spacing: -.025em; } .tof-sec__hd p { flex: 1 1 320px; margin: 0; color: var(--tof-dim); font-size: .87rem; line-height: 1.55; } .tof-sec__more { margin-left: auto; flex: 0 0 auto; font-family: var(--tof-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tof-blue); text-decoration: none; white-space: nowrap; } .tof-sec__more:hover { text-decoration: underline; } /* ========================================================================== Bảng so sánh chuyển vị — component chủ đạo ========================================================================== */ .tof-sheet-wrap { overflow-x: auto; border: 1px solid var(--tof-rule); border-radius: var(--tof-r); background: var(--tof-face); -webkit-overflow-scrolling: touch; } /* Đường kẻ sinh ra từ gap 1px trên nền lưới, KHÔNG phải border của từng ô: dùng border thì hàng cuối và cột cuối chồng lên viền của khung ngoài thành đường đôi, mà số cột lại là biến CSS nên không nth-child() trừ ra được. */ .tof-sheet { display: grid; grid-template-columns: var(--tof-gut) repeat(var(--tof-n, 4), minmax(var(--tof-col), 1fr)); gap: 1px; background: var(--tof-line); min-width: 100%; } .tof-c { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 9px 12px; background: var(--tof-face); font-size: .92rem; line-height: 1.3; } /* Cột nhãn thuộc tính — chỗ DUY NHẤT dùng mono trong giao diện này. Dính trái để nhãn còn đọc được khi bảng cuộn ngang trên máy nhỏ. */ .tof-c--gut { justify-content: flex-end; font-family: var(--tof-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--tof-dim); background: var(--tof-sunk); box-shadow: 1px 0 0 var(--tof-rule); position: sticky; left: 0; z-index: 2; } /* Cột hạng 1 tô nhẹ để bám mắt khi cuộn ngang. Lớp phủ mờ đặt trên nền đặc để không phải khai báo lại màu nền cho từng theme. */ .tof-c--win { background-color: var(--tof-face); background-image: linear-gradient(var(--tof-win), var(--tof-win)); } .tof-c--head { flex-direction: column; align-items: stretch; gap: 0; padding: 14px 12px 12px; box-shadow: inset 0 -2px 0 var(--tof-rule); } .tof-c--corner { box-shadow: 1px 0 0 var(--tof-rule), inset 0 -2px 0 var(--tof-rule); } .tof-hd { display: block; color: inherit; text-decoration: none; } .tof-hd__t { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font-size: .82rem; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; } .tof-hd:hover .tof-hd__t { color: var(--tof-blue); } /* Giá trị */ .tof-c b { font-weight: 700; letter-spacing: -.015em; } .tof-price { font-size: 1.02rem; } .tof-was { color: var(--tof-dim); text-decoration-color: var(--tof-red); text-decoration-thickness: 1.5px; } .tof-rank { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border: 1px solid var(--tof-rule); border-radius: var(--tof-r); font-size: .8rem; } .tof-rank--1 { background: var(--tof-blue); border-color: var(--tof-blue); color: #fff; } [data-theme="dark"] .tof-rank--1 { color: #0c0e12; } .tof-star { font-size: .62rem; color: var(--tof-dim); } .tof-yes { color: var(--tof-ok); font-size: 1rem; } .tof-nil { color: var(--tof-dim); opacity: .6; font-style: normal; } .tof-in { color: var(--tof-ok); font-size: .8rem; } .tof-out { color: var(--tof-red); font-size: .8rem; } /* Thanh %giảm — thanh DUY NHẤT của giao diện, và chỗ duy nhất dùng đỏ */ .tof-off { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; } .tof-off b { color: var(--tof-red); font-size: .92rem; flex: 0 0 auto; } .tof-off__bar { flex: 1 1 auto; min-width: 24px; height: 6px; border-radius: 2px; background: var(--tof-line); overflow: hidden; } .tof-off__bar i { display: block; height: 100%; background: var(--tof-red); } /* Ô ảnh mẫu */ .tof-plate { display: block; position: relative; aspect-ratio: 1; background: var(--tof-plate); border: 1px solid var(--tof-plate-line); border-radius: var(--tof-r); overflow: hidden; } .tof-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%; } .tof-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. */ .tof-plate--empty { display: grid; place-items: center; color: var(--tof-dim); font-size: 1.4rem; background: var(--tof-sunk); border-style: dashed; } .tof-plate--empty::after { display: none; } /* Chú thích dưới bảng */ .tof-sheet-cap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: .84rem; color: var(--tof-dim); } .tof-sheet-cap a { color: var(--tof-blue); font-weight: 600; text-decoration: none; } .tof-sheet-cap a:hover { text-decoration: underline; } /* ========================================================================== Catalogue chuyên mục — bảng liệt kê kỹ thuật ========================================================================== */ .tof-cat { border: 1px solid var(--tof-rule); border-radius: var(--tof-r); overflow: hidden; } .tof-cat__r { display: grid; grid-template-columns: 28px minmax(0, 1.7fr) 92px 108px 130px; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--tof-line); color: inherit; text-decoration: none; } .tof-cat__r:last-child { border-bottom: 0; } .tof-cat__r:hover { background: var(--tof-sunk); } .tof-cat__r > i { font-size: 1.05rem; color: var(--tof-blue); } .tof-cat__t { font-size: .93rem; font-weight: 600; letter-spacing: -.012em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tof-cat__n { font-size: .84rem; color: var(--tof-dim); text-align: right; white-space: nowrap; } .tof-cat__n b { color: var(--tof-ink); } .tof-cat__deal { text-align: right; font-size: .8rem; color: var(--tof-red); white-space: nowrap; } .tof-cat__deal--nil { color: var(--tof-dim); opacity: .55; } /* ========================================================================== Contact sheet — lưới guide của trang chuyên mục ========================================================================== */ .tof-cs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--tof-line); border: 1px solid var(--tof-rule); border-radius: var(--tof-r); overflow: hidden; } .tof-cs__i { display: flex; flex-direction: column; padding: 12px; background: var(--tof-face); color: inherit; text-decoration: none; } .tof-cs__i:hover { background: var(--tof-sunk); } .tof-cs__t { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 10px 0 0; font-size: .8rem; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; } .tof-cs__m { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; font-size: .78rem; color: var(--tof-dim); } .tof-cs__m b { color: var(--tof-ink); font-size: .84rem; } .tof-cs__off { color: var(--tof-red); font-weight: 700; } /* ========================================================================== Trang chuyên mục — đầu trang ========================================================================== */ .tof-cathead { padding: clamp(22px, 4vw, 40px) 0 clamp(16px, 2.5vw, 24px); } .tof-crumb { display: flex; align-items: center; gap: 8px; font-family: var(--tof-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--tof-dim); margin: 0 0 14px; } .tof-crumb a { color: var(--tof-blue); text-decoration: none; } .tof-crumb a:hover { text-decoration: underline; } .tof-cathead h1 { margin: 0; font-size: clamp(1.75rem, 4.2vw, 2.7rem); line-height: 1.08; letter-spacing: -.032em; font-weight: 750; } .tof-cathead p { margin: 14px 0 0; max-width: 66ch; color: var(--tof-dim); font-size: .96rem; line-height: 1.6; } /* ========================================================================== Chân trang chuyên mục ========================================================================== */ .tof-tail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 44px); margin-top: clamp(34px, 5vw, 56px); padding-top: clamp(24px, 3.5vw, 36px); border-top: 2px solid var(--tof-rule); } .tof-tail h2 { margin: 0 0 12px; font-size: 1rem; font-weight: 700; letter-spacing: -.02em; } .tof-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tof-line); } .tof-list li { border-bottom: 1px solid var(--tof-line); } .tof-list a { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; font-size: .88rem; line-height: 1.4; font-weight: 550; color: inherit; text-decoration: none; } .tof-list a:hover { color: var(--tof-blue); } .tof-list .tof-list__n { flex: 0 0 auto; font-family: var(--tof-mono); font-size: 10px; letter-spacing: .1em; color: var(--tof-dim); } /* Phân trang */ .tof-pager { margin-top: 26px; display: flex; justify-content: center; } .tof-pager .page-numbers { display: inline-block; min-width: 38px; padding: 8px 11px; margin: 0 3px; text-align: center; border: 1px solid var(--tof-line); border-radius: var(--tof-r); font-family: var(--tof-mono); font-size: .82rem; color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; } .tof-pager .page-numbers:hover { border-color: var(--tof-blue); color: var(--tof-blue); } .tof-pager .page-numbers.current { background: var(--tof-blue); border-color: var(--tof-blue); color: #fff; } [data-theme="dark"] .tof-pager .page-numbers.current { color: #0c0e12; } .tof-empty { padding: 36px 20px; text-align: center; color: var(--tof-dim); border: 1px dashed var(--tof-line); border-radius: var(--tof-r); } /* Ghi chú */ .tof-notes { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--tof-rule); border-radius: var(--tof-r); overflow: hidden; } .tof-note { padding: 18px 20px; border-right: 1px solid var(--tof-line); } .tof-note:last-child { border-right: 0; } .tof-note h3 { margin: 0 0 7px; font-size: .92rem; font-weight: 700; letter-spacing: -.015em; } .tof-note p { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--tof-dim); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1080px) { .tof-cs { grid-template-columns: repeat(4, 1fr); } .tof-figs { grid-template-columns: repeat(2, 1fr); } .tof-fig:nth-child(2) { border-right: 0; } .tof-fig:nth-child(-n + 2) { border-bottom: 1px solid var(--tof-line); } .tof-notes { grid-template-columns: 1fr; } .tof-note { border-right: 0; border-bottom: 1px solid var(--tof-line); } .tof-note:last-child { border-bottom: 0; } .tof-tail { grid-template-columns: 1fr; } } @media (max-width: 780px) { .tof { --tof-gut: 82px; --tof-col: 136px; } .tof-cs { grid-template-columns: repeat(2, 1fr); } .tof-cat__r { grid-template-columns: 24px minmax(0, 1fr) 84px; row-gap: 4px; } .tof-cat__deal { grid-column: 2 / -1; text-align: left; } } @media (prefers-reduced-motion: reduce) { .tof-cs__i, .tof-cat__r { transition: none; } }