/* Theme Name: RetailCoupons Child Theme URI: https://retailcoupons.com/ Description: Child theme của RetailCoupons.com, kế thừa AffiliateCMS Theme. Mọi tùy biến giao diện và override của RetailCoupons.com đặt tại đây để an toàn khi update parent. Author: RetailCoupons.com, a Life and Technology company Author URI: https://retailcoupons.com/ Template: affiliateCMS-theme Version: 0.1.0 Requires at least: 6.0 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: retailcoupons-child */ /* ========================================================================== RetailCoupons.com, tokens design system (đồng bộ với mockup hi-fi) Brand #741FA2 | hover #5D1982 | verified #04734B | CTA #C2410C | star #F5A623 | ink #1C1B25 Cách tiếp cận: KHÔNG viết lại CSS component. Chỉ remap các design token màu của theme cha (--color-primary / accent / success) sang bộ màu brand. Khi đó mọi component sẵn có của theme (.btn--primary, .verified-badge, link, pagination...) tự render đúng màu brand mà không cần code CSS riêng. Font Inter giữ nguyên từ theme. ========================================================================== */ :root { --rc-brand: #741FA2; --rc-brand-hover: #5D1982; --rc-verified: #04734B; --rc-cta: #C2410C; --rc-star: #F5A623; --rc-ink: #1C1B25; /* Remap theme primary (teal) -> brand purple */ --color-primary: var(--rc-brand); --color-primary-hover: var(--rc-brand-hover); --color-primary-dark: #4A1369; --color-primary-light: #F8F3FC; --color-primary-rgb: 116, 31, 162; /* Remap theme accent (coral) -> brand CTA orange */ --color-accent: var(--rc-cta); --color-accent-hover: #9A3412; --color-accent-light: #FDEEE7; /* Remap success -> brand verified green */ --color-success: var(--rc-verified); --color-success-light: #E3F3EC; /* Nền website trắng (thay kem #FDFBF7 mặc định) */ --color-bg: #FFFFFF; } /* Dark mode: dùng tím sáng hơn cho đủ tương phản trên nền tối */ [data-theme="dark"] { --color-primary: #B06CD6; --color-primary-hover: #9B4FC4; --color-primary-dark: #741FA2; --color-primary-light: rgba(176, 108, 214, 0.15); --color-primary-rgb: 176, 108, 214; --color-accent: #E2683A; --color-accent-hover: #C2410C; } /* ========================================================================== REMAP token AffiliateCMS Pro (product cards) sang brand RC. Plugin frontend.css hardcode vài màu không fallback về token theme; child load SAU plugin nên :root ở đây thắng. Chỉ remap token, KHÔNG viết lại component. ========================================================================== */ :root { /* C1: primary-rgb mặc định plugin = 37,99,235 (xanh) -> theo brand tím */ --acms-primary-rgb: var(--color-primary-rgb); /* C4: sao dùng vàng brand thay #fbbf24 */ --acms-star-active: var(--rc-star); } /* C2: rank badge (1,2,3) dùng gradient tím brand thay vì đỏ (danger) */ .acms-list__rank { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); } /* Placeholder nền khung ảnh product: ảnh external (Amazon) load sau vẫn có nền nhạt, khung đã cố định 140x140 nên không layout shift, chỉ mượt hơn lúc ảnh chưa về. */ .acms-list__image { background: var(--color-bg); } /* Bỏ icon link-ngoài (::after theme cha gắn cho a[target=_blank]:not([class])) sau title sản phẩm */ .acms-list__title a::after { content: none !important; } /* Bỏ hiệu ứng hover product card (nhấc shadow, viền tím, zoom ảnh, phóng rank) , giữ trạng thái base */ .acms-list__item:hover { box-shadow: var(--acms-shadow-sm); border-color: var(--acms-border); } .acms-list__item:hover .acms-list__image img { transform: none; } .acms-list__item:hover .acms-list__rank { transform: translateY(-50%); } @media (max-width: 600px) { .acms-list__item:hover .acms-list__rank { transform: translateX(-50%) translateY(-50%); } } /* Bỏ bo góc product card: cả item lẫn các hàng con (main bo trên, toggle/details bo dưới) -> vuông hẳn */ .acms-list__item, .acms-list__item .acms-list__row { border-radius: 0 !important; } /* Badge discount (-XX%) dùng nền brand thay vì đỏ (danger) */ .acms-list__discount { background-color: var(--color-primary); } /* Bỏ hết border + border-radius của khối Pros/Cons (kể cả viền trái màu) cho phẳng, đẹp */ .acms-list__pros, .acms-list__cons { border: 0; border-radius: 0; } /* ========================================================================== COMPONENT: Coupon list + Deal card (dùng chung mọi trang) Markup do plugin rc-core render (.rc-coupon / .rc-deal). CSS đặt ở child theme để 1 nguồn nhất quán cho home / coupon page / category / deals listing. Chỉ layout, MỌI màu lấy từ token theme cha (đã remap sang brand ở trên). KHÔNG hardcode màu, KHÔNG inline style trong markup. ========================================================================== */ /* --- Coupon list --- */ .rc-coupons { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.5rem 0; } .rc-coupons__heading { font-size: 1.35rem; font-weight: 700; margin: 0 0 0.25rem; } .rc-coupon { display: flex; align-items: center; gap: 1.125rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 1.125rem 1.25rem; transition: box-shadow 0.14s ease, border-color 0.14s ease; } /* JS filter/limit hides items via [hidden]; .rc-coupon's display:flex would otherwise win over the UA [hidden] rule, so force it off here. */ .rc-coupon[hidden] { display: none; } .rc-coupon:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .rc-coupon__disc { flex: 0 0 4.5rem; text-align: center; } .rc-coupon__disc-n { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--color-primary); } .rc-coupon__disc-l { display: block; margin-top: 0.15rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: var(--color-text-muted); } .rc-coupon__mid { flex: 1; min-width: 0; border-left: 1px solid var(--color-border-subtle); padding-left: 1.125rem; } .rc-coupon__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; } .rc-coupon__tag { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.15rem 0.5rem; border-radius: 4px; } .rc-coupon__tag--excl { background: var(--color-accent-light); color: var(--color-accent); } .rc-coupon__tag--nocode { background: var(--color-primary-light); color: var(--color-primary); } .rc-coupon__title { font-size: 1rem; font-weight: 600; line-height: 1.3; margin: 0 0 0.15rem; } .rc-coupon__meta { font-size: 0.8rem; color: var(--color-text-muted); } /* Real usage counter ("Used N times", fed by the reveal endpoint) */ .rc-coupon__social { font-size: 0.8rem; font-weight: 600; color: var(--color-success); } /* "See Details" expander (terms/description) on a coupon card */ .rc-coupon__more { margin-top: 4px; } .rc-coupon__more summary { display: inline-block; font-size: 0.78rem; font-weight: 600; color: var(--color-primary); cursor: pointer; list-style: none; } .rc-coupon__more summary::-webkit-details-marker { display: none; } .rc-coupon__more summary:hover { text-decoration: underline; } .rc-coupon__more[open] summary { margin-bottom: 5px; } .rc-coupon__desc { font-size: 0.82rem; color: var(--color-text-secondary); line-height: 1.55; } .rc-coupon__act { flex: 0 0 auto; } /* Reveal / copy: nút dashed đặc trưng coupon, màu brand qua token */ .rc-coupon__reveal { display: inline-block; min-width: 9.5rem; text-align: center; cursor: pointer; font-family: inherit; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.03em; padding: 0.7rem 1.1rem; border-radius: 0.5rem; border: 1.5px dashed var(--color-primary); color: var(--color-primary); background: var(--color-surface); text-decoration: none; transition: 0.14s ease; } .rc-coupon__reveal:hover, .rc-coupon__reveal.is-revealed { background: var(--color-primary); color: #fff; border-style: solid; } .rc-coupons__empty { display: flex; align-items: flex-start; gap: 0.75rem; background: var(--color-primary-light); border: 1px solid var(--color-border-subtle); border-radius: 0.75rem; padding: 1.125rem 1.25rem; color: var(--color-text-secondary); font-size: 0.9rem; line-height: 1.5; } .rc-coupons__empty .bi { color: var(--color-primary); font-size: 1.25rem; margin-top: 0.1rem; } .rc-coupons__empty strong { display: block; color: var(--color-text); margin-bottom: 0.15rem; } @media (max-width: 560px) { .rc-coupon { flex-wrap: wrap; } .rc-coupon__act { flex: 1 0 100%; } .rc-coupon__reveal { display: block; width: 100%; } } /* --- Deal detail (virtual /deal/{slug}/) --- */ .rc-deal { padding-top: 1.5rem; padding-bottom: 3.5rem; } .rc-deal__card { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 2rem; align-items: start; margin-top: 1.25rem; } .rc-deal__media { border: 1px solid var(--color-border); border-radius: var(--radius-lg, 0.75rem); overflow: hidden; background: var(--color-bg-alt); } .rc-deal__media img { width: 100%; height: auto; display: block; } .rc-deal__media--empty { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; color: var(--color-text-subtle); font-size: 0.875rem; } .rc-deal__brand { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-primary); margin-bottom: 0.35rem; } .rc-deal__title { font-size: 1.7rem; line-height: 1.25; margin: 0 0 1rem; } .rc-deal__price { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; } .rc-deal__now { font-size: 1.9rem; font-weight: 800; color: var(--color-text); } .rc-deal__was { font-size: 1.1rem; color: var(--color-text-muted); text-decoration: line-through; } .rc-deal__off { background: var(--color-success); color: #fff; font-size: 0.8rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px; } .rc-deal__stock { font-size: 0.85rem; font-weight: 600; margin-bottom: 1.1rem; } .rc-deal__stock--in { color: var(--color-success); } .rc-deal__stock--out { color: var(--color-error); } .rc-deal__exp { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.9rem; } .rc-deal__disclosure { font-size: 0.75rem; color: var(--color-text-subtle); margin-top: 1.4rem; line-height: 1.5; } @media (max-width: 760px) { .rc-deal__card { grid-template-columns: 1fr; } .rc-deal__media { max-width: 420px; } } /* ========================================================================== HOMEPAGE (front-page.php). Layout only; màu từ token brand. Không inline. ========================================================================== */ /* Section soft background (parent theme has no alternating variant) */ .section--soft { background: var(--color-bg-alt); } /* Section block + head row (matches mockup section.block / .head-row) */ .rc-home-block { padding: 40px 0; } .rc-home-block--soft { background: var(--color-bg); } .rc-home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; border-top: 3px solid var(--rc-ink); padding-top: 0.75rem; } .rc-home-head--center { justify-content: center; text-align: center; } /* Match buyadvanced .section__title scale: 30px mobile -> 36/40px desktop, weight 700 */ .rc-home-head__t { font-size: var(--text-3xl); letter-spacing: -0.6px; font-weight: var(--font-bold); line-height: 1.1; margin: 0; } .rc-home-head__t a { color: inherit; text-decoration: none; } @media (min-width: 768px) { .rc-home-head__t { font-size: var(--text-4xl); } } @media (max-width: 600px) { .rc-home-head:not(.rc-home-head--center) { flex-direction: column; align-items: flex-start; gap: 0.5rem; } } .rc-home-head__more { color: var(--color-primary); font-weight: 700; font-size: 0.875rem; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; } .rc-home-head__more:hover { text-decoration: underline; } /* Shared 50px logo box (offers + homepage store chips) */ .rc-home-logobox { flex: 0 0 50px; width: 50px; height: 50px; border-radius: 12px; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .rc-home-logobox img { width: 30px; height: 30px; object-fit: contain; } /* Today's Top Offers (5-col, tap-to-copy) */ .rc-home-offers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .rc-home-offer { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.65rem; padding: 18px; text-align: center; } .rc-home-offer__top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-bottom: 14px; } .rc-home-offer__store { max-width: 100%; font-size: 18px; font-weight: 700; line-height: 1.25; } .rc-home-offer__store a { color: var(--color-text); text-decoration: none; overflow-wrap: break-word; } .rc-home-offer__disc { font-size: 23px; font-weight: 800; color: var(--color-primary); line-height: 1.05; letter-spacing: -0.5px; margin-bottom: 5px; overflow-wrap: anywhere; } /* Title tối đa 2 dòng như card deal, dài quá cắt "..." (user chốt 2026-07-06). */ .rc-home-offer__title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; font-weight: 600; line-height: 1.35; margin: 0 0 8px; flex: 1; overflow-wrap: anywhere; } .rc-home-offer__meta { font-size: 12px; color: var(--color-text-muted); margin-bottom: 14px; } .rc-home-offer__meta .bi { color: var(--rc-star); } .rc-home-ocode { display: block; text-align: center; width: 100%; border: 1.5px dashed var(--color-primary); color: var(--color-primary); background: #fff; font-weight: 800; border-radius: 7px; padding: 11px; font-size: 13.5px; cursor: pointer; transition: 0.14s; letter-spacing: 0.5px; text-decoration: none; } .rc-home-ocode:hover { background: var(--color-primary); color: #fff; border-style: solid; } .rc-home-ocode small { display: block; font-weight: 500; font-size: 10px; opacity: 0.8; letter-spacing: 0.3px; } /* Homepage store chips (8-col) */ .rc-home-storegrid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; } .rc-storechip { display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.65rem; padding: 16px 8px; text-align: center; font-weight: 600; font-size: 13px; text-decoration: none; color: var(--color-text); overflow-wrap: anywhere; } .rc-storechip .rc-home-logobox { display: flex; margin: 0 auto 9px; } .rc-storechip small { display: block; color: var(--color-text-muted); font-weight: 500; font-size: 11px; margin-top: 2px; } /* Similar Stores on the coupon page: lives in the narrower main column, so it uses even column counts (4 -> 2) that divide 8 cleanly, no orphan row. */ .rc-simgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 520px) { .rc-simgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Trending Deals (5-col, reuses shared .rc-home-deal card) */ .rc-home-deals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } /* Shopping Guides (5-col) */ .rc-home-guides { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .rc-home-guide { display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.65rem; overflow: hidden; text-decoration: none; color: var(--color-text); } .rc-home-guide__ph { display: block; aspect-ratio: 2 / 1; position: relative; overflow: hidden; background: var(--color-primary-light); } .rc-home-guide__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rc-home-guide__gi { display: block; padding: 15px; } .rc-home-guide__title { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; } .rc-home-guide__meta { display: block; font-size: 12.5px; color: var(--color-text-muted); } /* Editorial category archive: homepage-style guide cards, 4 across */ /* Guide cards = parent .post-card--grid-v2, matched EXACTLY to buyadvanced's child overrides (title 24px responsive, footer no border + muted color + By/Updated labels, hovers removed) */ .post-card { border: none; border-radius: 0; background-color: transparent; } .post-card--grid-v2 .post-card__title { font-size: 1.5rem; line-height: 1.3; } .post-card--grid-v2 .post-card__title, .post-card--grid-v2 .post-card__title a { display: block; -webkit-line-clamp: unset; -webkit-box-orient: unset; overflow: visible; min-height: 0; } @media (max-width: 1023px) { .post-card--grid-v2 .post-card__title { font-size: 1.25rem; } } @media (max-width: 639px) { .post-card--grid-v2 .post-card__title { font-size: 1.125rem; } } .post-card__footer-grid, .post-card--grid-v2 .post-card__footer-grid, .post-card__footer-item, .post-card__footer-item i { color: var(--color-text-muted); } .post-card--grid-v2 .post-card__footer-grid { border-top: none; padding-top: 0; } .post-card__meta-label { font-weight: 400; color: var(--color-text-muted); margin-right: 2px; } .post-card:hover, .post-card.post-card--grid-v2:hover { transform: none; box-shadow: none; } .post-card--grid-v2:hover .post-card__image img { transform: none; } .post-card--grid-v2:hover .post-card__title { color: inherit; } .rc-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } @media (max-width: 1080px) { .rc-guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .rc-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .rc-guide-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1080px) { .rc-home-offers, .rc-home-deals, .rc-home-guides { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .rc-home-storegrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 760px) { .rc-home-offers, .rc-home-deals, .rc-home-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .rc-home-storegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 480px) { .rc-home-offers, .rc-home-deals, .rc-home-guides { grid-template-columns: minmax(0, 1fr); } } /* Trending Deals (product card; no parent equivalent. Grid reuses posts-grid-v2--4col) */ /* KHÔNG overflow:hidden trên card: tooltip .rc-dtip__tip absolute sẽ bị cắt. Bo góc ảnh chuyển xuống __ph. Card position:relative làm mốc cho tooltip. */ .rc-home-deal { position: relative; display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.7rem; text-decoration: none; color: var(--color-text); } .rc-home-deal__ph { position: relative; display: block; aspect-ratio: 5 / 3; background: var(--color-bg-alt); border-radius: 0.7rem 0.7rem 0 0; overflow: hidden; } /* img absolute inset:0 để khung giữ tỉ lệ 5/3 kể cả khi ảnh lỗi (height:100% của img in-flow không resolve khi ảnh vỡ -> phình khung); ảnh vỡ bị overflow cắt gọn. */ .rc-home-deal__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rc-home-deal__ribbon { position: absolute; top: 0.5rem; left: 0.5rem; background: var(--color-primary); color: #fff; font-size: 0.72rem; font-weight: 800; padding: 0.15rem 0.45rem; border-radius: 5px; } .rc-home-deal__info { display: block; padding: 0.7rem 0.8rem 0.9rem; } .rc-home-deal__brand { display: block; font-size: 0.72rem; font-weight: 700; color: var(--color-primary); } /* Title tối đa 2 dòng, dài quá cắt "..." (user chốt 2026-07-06). */ .rc-home-deal__name { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.85rem; font-weight: 600; line-height: 1.3; margin: 0.15rem 0 0.35rem; } .rc-home-deal__price { font-weight: 800; } .rc-home-deal__price s { font-weight: 500; color: var(--color-text-muted); margin-left: 0.3rem; } .rc-home-deal__cta { margin-top: 0.65rem; } /* shares .rc-home-ocode look; only adds spacing on the deal card */ /* Card Amazon là
chứa link con (ảnh/title về deal page, CTA là affiliate): link con kế thừa màu chữ, không gạch chân, giữ nhìn y hệt card network. */ .rc-home-deal a { color: inherit; text-decoration: none; } a.rc-home-deal__name:hover { text-decoration: underline; } /* Icon social "Follow us on" trong h2 header deals: nút tròn outline giống .rc-art-actions__btn của khu share nhưng nhỏ hơn (26px). */ .rc-follow { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 12px; line-height: 1; text-decoration: none; margin: 0 0.1rem; vertical-align: middle; transition: border-color 0.15s ease, color 0.15s ease; } .rc-follow:hover, .rc-follow:focus-visible { border-color: var(--color-primary); color: var(--color-primary); } /* /deals/ filter bar: dòng meta dưới header + panel Store dài có scroll. Khung dropdown .acms-df dùng CSS sẵn trong deals.css (chỉ load trang deals). */ .rc-deals-meta { display: flex; gap: 1.1rem; margin-top: 0.6rem; font-size: 0.85rem; color: var(--color-text-muted); font-weight: 600; } .rc-deals-meta .bi { margin-right: 0.25rem; } .rc-deals-storelist { max-height: 280px; overflow-y: auto; } .rc-deals-storelist a.acms-df__opt { text-decoration: none; color: inherit; display: flex; } .rc-deals-storelist a.acms-df__opt.is-current { color: var(--color-primary); font-weight: 700; } /* JS filter set [hidden]; display của component đè UA style nên phải ép lại. */ .rc-home-deal[hidden], .rc-deals-grid[hidden] { display: none; } /* [author_bio_list] trang About Us (copy affiliateCMS-Child): list tác giả. */ .author-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; } .author-avatar-wrap img { width: 96px; max-width: 96px; height: 96px; border-radius: 50%; object-fit: cover; } .author-content h3 { margin: 0 0 8px; } .author-content h3 a { text-decoration: none; font-weight: 700; } .author-content p { margin: 0; line-height: 1.6; font-style: italic; } /* Empty state khu review coupon page (brand chưa có review thật). */ .rc-review-empty { color: var(--color-text-muted); font-size: 0.9rem; padding: 0.6rem 0 0.2rem; } /* Icon info + tooltip "Last update" cạnh giá, dùng chung MỌI card deal (home, /deals/, brand deals, related). Nhân bản look .acms-deal__tooltip (deals.css chỉ load trang deals nên component chung phải nằm ở đây). */ /* Icon anchor tĩnh, tooltip neo theo CARD (đè lên vùng ảnh): không bao giờ bị viền card cắt hay tràn viewport, mobile khỏi cần xử lý riêng. */ .rc-dtip { display: inline-flex; align-items: center; margin-left: 5px; cursor: help; color: var(--color-text-muted); outline: none; font-size: 0.8rem; vertical-align: middle; } .rc-dtip:hover, .rc-dtip:focus { color: var(--color-primary); } .rc-dtip__tip { position: absolute; top: 8px; left: 8px; right: 8px; background: var(--color-text); color: #fff; font-size: 11.5px; font-weight: 400; line-height: 1.5; text-align: left; padding: 8px 10px; border-radius: 8px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; transition: opacity 0.15s ease; z-index: 99999; pointer-events: none; } .rc-dtip:hover .rc-dtip__tip, .rc-dtip:focus .rc-dtip__tip { opacity: 1; visibility: visible; } /* Shopping Guides reuse the parent theme post-card component (no custom CSS). */ /* Popular Categories */ .rc-home-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; } .rc-home-cats a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 0.7rem 0.9rem; font-weight: 600; font-size: 0.9rem; text-decoration: none; color: var(--color-text); } .rc-home-cats__c { font-weight: 500; font-size: 0.75rem; color: var(--color-text-muted); } @media (max-width: 1080px) { .rc-home-cats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .rc-home-cats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .rc-home-cats { grid-template-columns: 1fr; } } /* ========================================================================== CHROME: header + footer (RetailCoupons.com). Parent theme chrome khác hẳn mockup nên đây là custom; màu từ token brand. Bootstrap Icons + Inter. ========================================================================== */ .rc-logo { height: 52px; width: auto; display: block; } /* Disclosure bar */ .rc-disclosure { margin: 0; background: var(--color-bg-alt); color: var(--color-text-secondary); font-size: 0.78rem; text-align: center; padding: 0.45rem 20px; border-bottom: 1px solid var(--color-border); } .rc-disclosure a { color: var(--color-primary); font-weight: 600; } /* Header bar */ .rc-header { position: sticky; top: 0; z-index: 50; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .rc-header__nav { display: flex; align-items: center; gap: 1.4rem; height: 66px; } .rc-header__brand { flex: 0 0 auto; display: flex; align-items: center; } .rc-header__burger { display: none; background: none; border: none; cursor: pointer; color: var(--color-text); font-size: 1.5rem; padding: 0.3rem; margin-left: -0.3rem; } /* Desktop menu + dropdowns */ .rc-menu { display: flex; gap: 1.4rem; align-items: center; height: 100%; font-size: 0.9rem; font-weight: 600; color: var(--color-text-secondary); } .rc-menu > a { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; color: inherit; } .rc-menu > a:hover { color: var(--color-primary); } .rc-chev { font-size: 0.7rem; transition: transform 0.15s; } .rc-has-sub { position: relative; height: 100%; display: flex; align-items: center; } .rc-has-sub > a { color: var(--color-text-secondary); text-decoration: none; height: 100%; display: inline-flex; align-items: center; gap: 0.3rem; } .rc-has-sub:hover > a { color: var(--color-primary); } .rc-has-sub:hover .rc-chev { transform: rotate(180deg); } .rc-submenu { position: absolute; top: 100%; left: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.6rem; box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.1)); padding: 0.5rem; min-width: 430px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: 0.14s; z-index: 60; } .rc-has-sub:hover .rc-submenu { opacity: 1; visibility: visible; transform: translateY(0); } .rc-submenu a { padding: 0.55rem 0.7rem; border-radius: 6px; font-size: 0.83rem; font-weight: 500; color: var(--color-text-secondary); text-decoration: none; } .rc-submenu a:hover { background: var(--color-bg-alt); color: var(--color-primary); } .rc-submenu__all { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.4rem; border-top: 1px solid var(--color-border-subtle); margin-top: 0.4rem; padding-top: 0.7rem; color: var(--color-primary); font-weight: 700; } /* Header search (pill). KHÔNG dùng overflow:hidden ở đây: dropdown suggest (.rc-hsuggest) absolute bên trong form sẽ bị cắt vô hình. */ .rc-header__search { position: relative; flex: 1; display: flex; align-items: center; max-width: 480px; border: 1.5px solid var(--color-border); border-radius: 30px; } .rc-header__search:focus-within { border-color: var(--color-primary); } .rc-header__search input { flex: 1; border: none; outline: none; font-size: 0.9rem; padding: 0.6rem 1.1rem; background: transparent; font-family: inherit; color: var(--color-text); border-radius: 30px; } .rc-header__right { margin-left: auto; flex: 0 0 auto; } /* Mobile nav (accordion) */ .rc-mobile-nav { display: none; flex-direction: column; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0.5rem 0; /* Header sticky nên panel nằm trong viewport: menu dài (24 store + categories) phải tự cuộn trong panel, không thì phần dưới tràn khỏi màn hình không với tới. */ max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .rc-mobile-nav > a { padding: 0.7rem 1.5rem; font-weight: 600; color: var(--color-text-secondary); font-size: 0.95rem; text-decoration: none; } .rc-mobile-nav > a:hover { color: var(--color-primary); background: var(--color-bg-alt); } .rc-mobile-nav .rc-header__search { display: flex; flex: none; max-width: none; margin: 0.4rem 1.5rem 0.6rem; } .rc-macc summary { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1.5rem; font-weight: 600; color: var(--color-text-secondary); font-size: 0.95rem; cursor: pointer; list-style: none; } .rc-macc summary::-webkit-details-marker { display: none; } .rc-macc[open] summary .rc-chev { transform: rotate(180deg); } .rc-msub { display: flex; flex-direction: column; background: var(--color-bg-alt); padding: 0.25rem 0; } .rc-msub a { padding: 0.55rem 1.5rem 0.55rem 2.4rem; font-size: 0.85rem; color: var(--color-text-secondary); text-decoration: none; } .rc-msub a:hover { color: var(--color-primary); } .rc-msub__all { font-weight: 700; color: var(--color-primary); } html.rc-mnav .rc-mobile-nav { display: flex; } @media (max-width: 980px) { .rc-menu, .rc-header__nav .rc-header__search { display: none; } .rc-header__burger { display: inline-flex; } html.rc-mnav .rc-mobile-nav { display: flex; } /* Giữ Sign In / avatar trên header mobile, cỡ nhỏ gọn để không vỡ khung. */ .rc-header__right .btn { padding: 6px 12px; font-size: 0.78rem; } } @media (max-width: 480px) { .rc-header__nav .rc-logo { height: 40px; } .rc-header__right .btn { padding: 5px 10px; font-size: 0.75rem; } } @media (min-width: 981px) { html.rc-mnav .rc-mobile-nav { display: none; } } /* Footer (brand purple) */ .rc-footer { margin-top: 3rem; padding: 3rem 0 1.8rem; background: var(--rc-brand); color: #fff; } .rc-footer .rc-logo { filter: brightness(0) invert(1); } .rc-footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; } .rc-footer__brand .rc-logo { margin-bottom: 0.7rem; } .rc-footer__brand p { color: rgba(255, 255, 255, 0.78); font-size: 0.875rem; max-width: 300px; } .rc-footer__col h5 { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); margin: 0 0 0.8rem; } .rc-footer__col a { display: block; color: rgba(255, 255, 255, 0.82); font-size: 0.875rem; padding: 0.3rem 0; text-decoration: none; } .rc-footer__col a:hover { color: #fff; text-decoration: underline; } .rc-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.18); margin-top: 1.8rem; padding-top: 1.1rem; color: rgba(255, 255, 255, 0.62); font-size: 0.8rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.9rem; } /* Footer social icons (data from Customizer > Social Links, icons = Bootstrap Icons cha) */ /* Social nằm trong __brand (dưới đoạn giới thiệu), icon nhỏ (user chốt 2026-07-06). */ .rc-footer__social { display: flex; align-items: center; gap: 8px; margin-top: 0.9rem; } .rc-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 13px; line-height: 1; transition: background-color 0.15s ease, transform 0.15s ease; } .rc-footer__social-link:hover, .rc-footer__social-link:focus-visible { color: #fff; transform: translateY(-2px); } .rc-social--facebook:hover, .rc-social--facebook:focus-visible { background: #1877F2; } .rc-social--twitter:hover, .rc-social--twitter:focus-visible { background: #000000; } .rc-social--instagram:hover, .rc-social--instagram:focus-visible { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); } .rc-social--youtube:hover, .rc-social--youtube:focus-visible { background: #FF0000; } .rc-social--pinterest:hover, .rc-social--pinterest:focus-visible { background: #BD081C; } .rc-social--linkedin:hover, .rc-social--linkedin:focus-visible { background: #0A66C2; } .rc-social--tiktok:hover, .rc-social--tiktok:focus-visible { background: #000000; } @media (max-width: 760px) { .rc-footer__cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .rc-footer__cols { grid-template-columns: 1fr; } } /* ========================================================================== BROWSE PAGES: /all-stores/ (A-Z) + /all-categories/. Token-based, no inline. ========================================================================== */ .rc-page-head { padding: 2rem 0 1.5rem; } .rc-page-head h1 { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.5px; margin: 0 0 0.5rem; } .rc-page-head p { color: var(--color-text-secondary); max-width: 720px; margin: 0; } /* All Categories grid */ .rc-allcat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; padding-bottom: 2.5rem; } .rc-cat-card { display: flex; align-items: center; gap: 0.8rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.7rem; padding: 0.9rem 1rem; text-decoration: none; color: var(--color-text); transition: 0.14s ease; } .rc-cat-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .rc-cat-card__av { flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--color-primary-light); color: var(--color-primary); font-weight: 800; } .rc-cat-card__body { flex: 1; display: flex; flex-direction: column; } .rc-cat-card__n { font-weight: 700; font-size: 0.95rem; } .rc-cat-card__c { font-size: 0.75rem; color: var(--color-text-muted); } .rc-cat-card .bi { color: var(--color-text-subtle); } /* All Stores A-Z */ .rc-az__nav { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.6rem; } .rc-az__nav a, .rc-az__nav span { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 6px; font-weight: 700; font-size: 0.85rem; text-decoration: none; } .rc-az__nav a { background: var(--color-primary-light); color: var(--color-primary); } .rc-az__nav a:hover { background: var(--color-primary); color: #fff; } .rc-az__nav--off { color: var(--color-text-subtle); } .rc-az__sec { margin-top: 1.8rem; scroll-margin-top: 80px; } .rc-az__sec h2 { font-size: 1.2rem; font-weight: 800; margin: 0 0 0.8rem; } .rc-az__list { columns: 4; column-gap: 2rem; } .rc-az__list a { display: flex; justify-content: space-between; gap: 0.75rem; break-inside: avoid; padding: 0.5rem 0; font-size: 0.875rem; color: var(--color-text-secondary); text-decoration: none; border-bottom: 1px solid var(--color-border-subtle); } .rc-az__list a:hover { color: var(--color-primary); } .rc-az__c { color: var(--color-text-muted); font-size: 0.75rem; flex: 0 0 auto; } @media (max-width: 1080px) { .rc-allcat__grid { grid-template-columns: repeat(3, 1fr); } .rc-az__list { columns: 3; } } @media (max-width: 760px) { .rc-allcat__grid { grid-template-columns: repeat(2, 1fr); } .rc-az__list { columns: 2; } } @media (max-width: 480px) { .rc-allcat__grid { grid-template-columns: 1fr; } .rc-az__list { columns: 1; } } /* ========================================================================== COUPON PAGE (single-coupon.php): store header, stars, FAQ. Token-based. ========================================================================== */ .rc-store-head { display: flex; align-items: center; gap: 1.1rem; margin: 1rem 0 1.5rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--color-border); } .rc-store-head__logo { flex: 0 0 56px; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; } .rc-store-head__logo img { width: 30px; height: 30px; } .rc-store-head__title { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; line-height: 1.2; margin: 0 0 0.4rem; } .rc-store-head__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-size: 0.875rem; color: var(--color-text-muted); } .rc-store-head__meta a { color: var(--color-primary); font-weight: 600; text-decoration: none; } .rc-store-head__codes { color: var(--color-success); font-weight: 700; } .rc-stars { color: var(--rc-star); letter-spacing: 1px; } /* FAQ accordion */ /* Testimonials "Hear It From Our Customers" (token-based; no parent component exists) */ .rc-faq { margin: 2.2rem 0; } .rc-faq h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 1rem; } .rc-faq details { border: 1px solid var(--color-border); border-radius: 0.6rem; margin-bottom: 0.6rem; background: var(--color-surface); } .rc-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.95rem 1.1rem; font-weight: 700; font-size: 0.95rem; cursor: pointer; list-style: none; } .rc-faq summary::-webkit-details-marker { display: none; } .rc-faq summary .bi { color: var(--color-primary); transition: transform 0.18s; flex: 0 0 auto; } .rc-faq details[open] summary .bi { transform: rotate(180deg); } .rc-faq__a { padding: 0 1.1rem 1.1rem; color: var(--color-text-secondary); font-size: 0.9rem; line-height: 1.6; } /* ========================================================================== REVIEW PAGE (single-review.php): aggregate score + star breakdown. Token-based. ========================================================================== */ .rc-review-head { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; align-items: center; margin: 1rem 0 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); } .rc-review-head__id { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.1rem; } .rc-review-head__id > div { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; } .rc-review-score { text-align: center; } .rc-review-score__num { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--color-text); } .rc-review-score .rc-stars { font-size: 1.1rem; } .rc-review-score__count { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.3rem; } .rc-breakdown { display: flex; flex-direction: column; gap: 0.45rem; } .rc-breakdown__row { display: grid; grid-template-columns: 3rem 1fr 2.5rem; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--color-text-muted); } .rc-breakdown__label { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--color-text-secondary); font-weight: 600; } .rc-breakdown__label .bi { color: var(--rc-star); font-size: 0.7rem; } .rc-breakdown__track { height: 8px; background: var(--color-bg-alt); border-radius: 999px; overflow: hidden; } .rc-breakdown__fill { display: block; height: 100%; background: var(--rc-star); border-radius: 999px; } .rc-breakdown__pct { text-align: right; } .rc-review-comments { margin: 2.2rem 0; } /* Data-driven bar widths via class (no inline style). */ .rc-pct-0{width:0%}.rc-pct-5{width:5%}.rc-pct-10{width:10%}.rc-pct-15{width:15%}.rc-pct-20{width:20%} .rc-pct-25{width:25%}.rc-pct-30{width:30%}.rc-pct-35{width:35%}.rc-pct-40{width:40%}.rc-pct-45{width:45%} .rc-pct-50{width:50%}.rc-pct-55{width:55%}.rc-pct-60{width:60%}.rc-pct-65{width:65%}.rc-pct-70{width:70%} .rc-pct-75{width:75%}.rc-pct-80{width:80%}.rc-pct-85{width:85%}.rc-pct-90{width:90%}.rc-pct-95{width:95%}.rc-pct-100{width:100%} @media (max-width: 680px) { .rc-review-head { grid-template-columns: 1fr; } } /* Empty state (category / deals with no items yet) */ .rc-empty { text-align: center; max-width: 460px; margin: 2.5rem auto 3.5rem; color: var(--color-text-secondary); } .rc-empty .bi { font-size: 2.2rem; color: var(--color-primary); } .rc-empty p { margin: 0.8rem 0 1.2rem; line-height: 1.6; } .rc-empty strong { color: var(--color-text); } .rc-pagination { margin: 2rem 0 1rem; display: flex; flex-wrap: wrap; gap: 6px; } .rc-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--color-text); text-decoration: none; } .rc-pagination a.page-numbers:hover, .rc-pagination a.page-numbers:focus-visible { border-color: var(--color-primary); color: var(--color-primary); } .rc-pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* Initials avatar (PRD: no photo avatars). Replaces Gravatar via the get_avatar filter. Size buckets mirror what the parent requests (24/32/60/100/150). */ .rc-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; flex: none; overflow: hidden; } .rc-avatar--24 { width: 24px; height: 24px; font-size: 10px; } .rc-avatar--32 { width: 32px; height: 32px; font-size: 13px; } .rc-avatar--60 { width: 60px; height: 60px; font-size: 23px; } .rc-avatar--100 { width: 100px; height: 100px; font-size: 38px; } .rc-avatar--150 { width: 150px; height: 150px; font-size: 54px; } /* ============================================================ Category archive: two layouts (store-list + article-list) ============================================================ */ /* RankMath breadcrumb (coupon/review/category): left-aligned, muted, spaced from the sticky header. RankMath outputs .rank-math-breadcrumb > p with › separators. */ .rank-math-breadcrumb { padding: 16px 0 0; font-size: 13px; } .rank-math-breadcrumb p { margin: 0; text-align: left; line-height: 1.5; color: var(--color-text-muted); } .rank-math-breadcrumb a { color: var(--color-text-muted); text-decoration: none; } .rank-math-breadcrumb a:hover { color: var(--color-primary); } .rank-math-breadcrumb .separator { margin: 0 6px; color: var(--color-text-muted); } .rank-math-breadcrumb .last { color: var(--color-text); font-weight: 600; } /* Shared header (match mockup .cat-head / .tag-head: h1 = category name, h2 = description width 100%). Extra bottom space so h2 is not glued to the list. */ /* Header archive/listing giống hệt header bài viết (.rc-art-head): viền trên ink 3px */ .rc-cat-head { border-top: 3px solid var(--rc-ink); padding: 0.75rem 0 4px; margin: 16px 0 22px; } /* H1 archive/listing đồng bộ scale với H1 bài viết + heading homepage (.rc-art-head h1 / .rc-home-head__t) */ .rc-cat-head h1 { margin: 0 0 8px; font-size: var(--text-3xl); letter-spacing: -0.6px; font-weight: var(--font-bold); line-height: 1.1; } @media (min-width: 768px) { .rc-cat-head h1 { font-size: var(--text-4xl); } } /* H2 description đồng bộ với dek bài viết (.rc-art-dek) */ .rc-cat-head h2 { margin: 0; width: 100%; font-size: var(--text-xl); font-weight: 400; line-height: 1.5; letter-spacing: -0.2px; color: var(--color-text-secondary); } /* Result + sort bar (store-list) */ .rc-cat-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.7rem 0; border-bottom: 1px solid var(--color-border); margin-bottom: 1.2rem; font-size: 0.9rem; color: var(--color-text-muted); } .rc-cat-bar__count strong { color: var(--color-text); } /* Store cards grid (4 cols) */ .rc-store-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; } .rc-store-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.7rem; padding: 1rem; text-decoration: none; color: var(--color-text); transition: 0.14s ease; } .rc-store-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .rc-store-card__logo { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; margin-bottom: 0.2rem; } .rc-store-card__logo img { width: 32px; height: 32px; object-fit: contain; } .rc-store-card__name { font-weight: 700; font-size: 1rem; } .rc-store-card__rating { font-size: 0.85rem; color: var(--color-text-secondary); } .rc-store-card__codes { font-size: 0.85rem; color: var(--color-text-muted); } .rc-store-card__go { margin-top: 0.3rem; font-weight: 700; font-size: 0.85rem; color: var(--color-primary); } .rc-store-card__go .bi { font-size: 0.8rem; } /* Related categories pills */ .rc-relcats { margin: 2.4rem 0 1.5rem; } .rc-relcats__title { font-size: 1.15rem; margin: 0 0 0.8rem; } .rc-relcats__list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .rc-relcat { display: inline-block; background: var(--color-primary-light); color: var(--color-primary); border-radius: 2rem; padding: 0.35rem 0.85rem; font-size: 0.85rem; font-weight: 600; text-decoration: none; } .rc-relcat:hover { background: var(--color-primary); color: #fff; } /* About SEO prose */ .rc-cat-prose { margin: 1.5rem 0 2.5rem; width: 100%; max-width: none; } .rc-cat-prose h2 { font-size: 1.25rem; margin: 0 0 0.7rem; } /* Article cards grid (3 cols) */ .rc-article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } .rc-article-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.8rem; overflow: hidden; text-decoration: none; color: var(--color-text); transition: 0.14s ease; } .rc-article-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .rc-article-card__ph { position: relative; aspect-ratio: 16 / 9; background: var(--color-primary-light); } .rc-article-card__ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .rc-article-card__badge { position: absolute; top: 0.6rem; left: 0.6rem; background: var(--color-primary); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.2rem 0.55rem; border-radius: 1rem; } .rc-article-card__badge--store { background: var(--color-success); } .rc-article-card__body { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.9rem 1rem 1.1rem; } .rc-article-card__title { font-weight: 700; font-size: 1rem; line-height: 1.35; } .rc-article-card__ex { font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.5; } .rc-article-card__meta { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.15rem; } /* Noindex pager note */ .rc-pager-note { text-align: center; font-size: 0.82rem; color: var(--color-text-muted); margin: 1rem 0 2rem; } /* Responsive: store grid 4/3/2/1, article grid 3/2/1 */ @media (max-width: 1080px) { .rc-store-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .rc-article-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .rc-store-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .rc-article-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .rc-store-grid { grid-template-columns: 1fr; } } /* ============================================================ Coupon page: 2-column layout + store header + sidebar (matches coupon-page-mockup.html .layout / .store-head / .panel) ============================================================ */ .rc-cp { display: grid; grid-template-columns: 1fr 320px; gap: 34px; align-items: start; padding: 18px 0 56px; } .rc-cp__main { min-width: 0; } /* Store header */ .rc-shead { display: flex; gap: 20px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--color-border-subtle); margin-bottom: 6px; } .rc-shead__logo { flex: 0 0 auto; width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; } .rc-shead__logo img { width: 40px; height: 40px; object-fit: contain; } .rc-shead__si { flex: 1; min-width: 0; } .rc-shead__si h1 { font-size: 28px; letter-spacing: -0.6px; line-height: 1.15; margin: 0 0 6px; } .rc-shead__rating { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--color-text-secondary); flex-wrap: wrap; } .rc-shead__rating .rc-stars { font-size: 0.95rem; } .rc-shead__rating a { color: var(--color-primary); font-weight: 600; } .rc-shead__links { margin-top: 9px; display: flex; gap: 16px; font-size: 13.5px; flex-wrap: wrap; } .rc-shead__links a { color: var(--color-primary); font-weight: 600; text-decoration: none; } .rc-shead__links a:hover { color: var(--color-primary-dark); text-decoration: underline; } .rc-shead__cta { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; text-align: center; } .rc-shead__cta small { font-size: 11px; color: var(--color-text-muted); } .rc-shead__cta small b { color: var(--color-primary); } /* Main sections */ .rc-cp-sec { margin: 28px 0 0; } .rc-cp-sec__title { font-size: 1.25rem; margin: 0 0 0.9rem; } /* Sidebar + panels */ .rc-cp__side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 84px; } /* Store-header quick links (#codes/#faq) must clear the sticky header on jump. */ .rc-cp__main [id] { scroll-margin-top: 80px; } /* Sidebar "Shop {Store}" CTA panel (sticky primary action). Button = parent .btn--block. */ .rc-shopcta__t { margin: 0 0 12px; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--color-text); } .rc-shopcta__best { display: block; margin-top: 10px; font-size: 12.5px; color: var(--color-text-muted); text-align: center; } .rc-shopcta__best b { color: var(--color-primary); } /* Sidebar trust block: "Why trust us" + editor attribution (E-E-A-T). */ .rc-trust__t { margin: 0 0 10px; font-size: 13px; color: var(--color-text-secondary); line-height: 1.55; } .rc-trust__link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--color-primary); text-decoration: none; } .rc-trust__link:hover { text-decoration: underline; } .rc-author { display: flex; gap: 12px; align-items: flex-start; } .rc-author__av { flex: 0 0 auto; } /* Uniform avatar size whether it resolves to an uploaded image, Gravatar or initials. */ .rc-author__av .avatar, .rc-author__av .rc-avatar { width: 48px; height: 48px; border-radius: 50%; } .rc-author__av img { object-fit: cover; } .rc-author__av .rc-avatar { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .rc-author__meta { display: flex; flex-direction: column; min-width: 0; } .rc-author__by { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.4px; } .rc-author__name { font-size: 14.5px; font-weight: 700; color: var(--color-text); text-decoration: none; } .rc-author__name:hover { color: var(--color-primary); } .rc-author__bio { margin-top: 4px; font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.5; } .rc-panel { border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; } .rc-panel__h { background: var(--color-bg); color: var(--color-text); border-bottom: 1px solid var(--color-border); padding: 13px 16px; font-weight: 700; font-size: 14px; } .rc-panel__b { padding: 16px; } .rc-hl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rc-hl { text-align: center; padding: 12px 6px; background: var(--color-bg); border-radius: 7px; } .rc-hl__n { display: block; font-size: 22px; font-weight: 800; color: var(--color-primary); } .rc-hl__l { display: block; font-size: 11px; color: var(--color-text-muted); font-weight: 600; margin-top: 2px; } .rc-side-list a { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--color-border-subtle); font-size: 14px; color: var(--color-text-secondary); text-decoration: none; } .rc-side-list a:last-child { border-bottom: none; } .rc-side-list a:hover { color: var(--color-primary); } @media (max-width: 920px) { .rc-cp { grid-template-columns: 1fr; } .rc-cp__side { order: 2; position: static; } } @media (max-width: 560px) { .rc-shead { flex-wrap: wrap; } .rc-shead__cta { width: 100%; } .rc-shead__cta .btn { width: 100%; } } /* Count pills (filter labels, static for now) */ .rc-counts { display: flex; gap: 8px; margin: 18px 0 2px; flex-wrap: wrap; } .rc-count-pill { font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 30px; border: 1px solid var(--color-border); color: var(--color-text-secondary); background: var(--color-surface); cursor: pointer; transition: 0.14s ease; } .rc-count-pill:hover { border-color: var(--color-primary); color: var(--color-primary); } .rc-count-pill--active, .rc-count-pill--active:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* "Show N more" toggle under the coupon list (created by coupons.js). */ .rc-coupons__more { display: block; width: max-content; max-width: 100%; margin: 12px auto 0; } .rc-coupons__more[hidden] { display: none; } /* SEO summary table */ .rc-ctable { margin-top: 6px; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-surface); } .rc-ctable table { width: 100%; border-collapse: collapse; font-size: 14px; } .rc-ctable th, .rc-ctable td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; } .rc-ctable thead th { background: var(--color-bg); font-size: 12.5px; font-weight: 800; color: var(--color-text); } .rc-ctable tbody tr:last-child td { border-bottom: none; } .rc-ctable__code { font-weight: 700; color: var(--color-primary); width: 150px; word-break: break-word; } .rc-ctable__reveal { padding: 5px 12px; font-size: 12px; font-weight: 700; border: 1px dashed var(--color-primary); border-radius: 6px; background: none; color: var(--color-primary); cursor: pointer; white-space: nowrap; } .rc-ctable__reveal:hover { background: rgba(var(--color-primary-rgb), 0.06); } .rc-coupon__reveal.is-loading { opacity: 0.7; pointer-events: none; } /* Coupon code modal (shared, filled by JS on reveal; no auto-redirect). */ .rc-code-modal-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(28, 27, 37, 0.55); padding: 20px; } .rc-code-modal-overlay.is-open { display: flex; align-items: center; justify-content: center; } html.rc-modal-open { overflow: hidden; } .rc-code-modal { position: relative; width: 100%; max-width: 420px; background: var(--color-surface); border-radius: 14px; padding: 28px 24px 20px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } .rc-code-modal__x { position: absolute; top: 12px; right: 12px; border: none; background: none; font-size: 18px; color: var(--color-text-muted); cursor: pointer; line-height: 1; } .rc-code-modal__store { font-size: 18px; font-weight: 800; color: var(--color-text); } .rc-code-modal__label { font-size: 13px; color: var(--color-text-muted); margin: 4px 0 14px; } .rc-code-modal__box { display: flex; align-items: stretch; border: 2px dashed var(--color-primary); border-radius: 10px; overflow: hidden; margin-bottom: 14px; } .rc-code-modal__code { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px 14px; font-size: 18px; font-weight: 800; letter-spacing: 1px; color: var(--color-primary); word-break: break-all; } .rc-code-modal__copy { border: none; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 13px; padding: 0 18px; cursor: pointer; } .rc-code-modal__copy:hover { background: var(--color-primary-hover); } .rc-code-modal__copy.is-copied { background: var(--color-success); } .rc-code-modal__go { display: block; width: 100%; box-sizing: border-box; margin-bottom: 12px; } .rc-code-modal__disc { font-size: 11.5px; color: var(--color-text-muted); margin: 0; } .rc-code-modal__disc a { color: var(--color-text-muted); text-decoration: underline; } @media (max-width: 480px) { .rc-code-modal { padding: 24px 16px 16px; } .rc-code-modal__code { font-size: 16px; } } .rc-ctable__exp { color: var(--color-text-muted); white-space: nowrap; width: 130px; } @media (max-width: 560px) { .rc-ctable th, .rc-ctable td { padding: 10px 12px; } .rc-ctable__code { width: 96px; } .rc-ctable__exp { width: auto; } } /* Previously Featured (recently expired codes, A6) */ .rc-prevfeat__note { font-size: 0.85rem; color: var(--color-text-muted); margin: -0.35rem 0 0.8rem; } .rc-prevfeat__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg); overflow: hidden; } .rc-prevfeat__item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--color-border-subtle); } .rc-prevfeat__item:last-child { border-bottom: none; } .rc-prevfeat__title { flex: 1; min-width: 0; font-size: 0.88rem; color: var(--color-text-secondary); } .rc-prevfeat__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; font-weight: 700; color: var(--color-text-muted); text-decoration: line-through; white-space: nowrap; } .rc-prevfeat__exp { font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; } @media (max-width: 560px) { .rc-prevfeat__item { flex-wrap: wrap; gap: 4px 12px; } .rc-prevfeat__title { flex-basis: 100%; } } /* Brand deals grid (reuses .rc-home-deal card) */ .rc-bdeals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 720px) { .rc-bdeals { grid-template-columns: 1fr 1fr; } } @media (max-width: 440px) { .rc-bdeals { grid-template-columns: 1fr; } } /* Savings hacks */ .rc-hacks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rc-hack { border: 1px solid var(--color-border); border-radius: 10px; padding: 16px; } .rc-hack b { display: block; font-size: 14.5px; margin-bottom: 3px; color: var(--color-primary); } .rc-hack p { font-size: 13px; color: var(--color-text-secondary); margin: 0; line-height: 1.55; } /* How-to steps (numbered) + troubleshooting checklist. The theme reset sets list-style:none, so re-enable decimal here; do NOT use display:grid on the
    (it turns
  1. into grid items and drops the markers). */ .rc-steps { margin: 0; padding-left: 1.5rem; list-style: decimal; } .rc-steps li { font-size: 14.5px; color: var(--color-text-secondary); line-height: 1.55; padding-left: 4px; } .rc-steps li:not(:last-child) { margin-bottom: 8px; } .rc-steps li::marker { color: var(--color-primary); font-weight: 700; } .rc-checklist { margin: 0; padding: 0; list-style: none; } .rc-checklist li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--color-text-secondary); line-height: 1.55; } .rc-checklist li:not(:last-child) { margin-bottom: 8px; } .rc-checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--color-primary); font-weight: 700; } /* Store policies */ .rc-policies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .rc-policy { border: 1px solid var(--color-border); border-radius: 10px; padding: 16px; font-size: 13.5px; } .rc-policy b { display: block; color: var(--color-text); margin-bottom: 4px; font-size: 14px; } .rc-policy span { color: var(--color-text-secondary); line-height: 1.55; } /* Reviews preview (aggregate + bars + review items) */ .rc-agg { display: flex; align-items: center; gap: 20px; padding: 18px; border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 14px; background: var(--color-bg); } .rc-agg__score { text-align: center; flex: 0 0 auto; } .rc-agg__big { font-size: 42px; font-weight: 800; color: var(--color-primary); line-height: 1; } .rc-agg__count { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; } .rc-agg__bars { flex: 1; min-width: 0; } .rc-barrow { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--color-text-muted); margin: 2px 0; } .rc-barrow__lbl { width: 22px; } .rc-barrow__pct { width: 34px; text-align: right; } .rc-barrow__track { flex: 1; height: 6px; background: var(--color-border); border-radius: 4px; overflow: hidden; } .rc-barrow__fill { display: block; height: 100%; background: var(--rc-star); } /* AI review summary block (hardcoded placeholder; Haiku fills per-store in Phase B) */ .rc-rsum { border: 1px solid var(--color-border); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; background: var(--color-primary-light); } .rc-rsum__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; } .rc-rsum p { font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; margin: 0 0 10px; } .rc-rsum p:last-child { margin-bottom: 0; } /* Pros and Cons (review page; placeholder copy until Phase B). */ .rc-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .rc-pc { border: 1px solid var(--color-border); border-radius: 10px; padding: 16px 18px; background: var(--color-surface); } .rc-pc h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 15px; font-weight: 700; } .rc-pc--pros h3 { color: var(--color-success); } .rc-pc--cons h3 { color: var(--color-error); } .rc-pc ul { margin: 0; padding-left: 20px; } .rc-pc li { font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; margin-bottom: 6px; } .rc-pc li:last-child { margin-bottom: 0; } @media (max-width: 560px) { .rc-proscons { grid-template-columns: 1fr; } } .rc-review { padding: 14px 0; border-bottom: 1px solid var(--color-border-subtle); } .rc-review:last-of-type { border-bottom: none; } .rc-review__name { font-weight: 700; font-size: 14px; } .rc-review__when { color: var(--color-text-muted); font-size: 12px; margin-left: 6px; font-weight: 400; } .rc-review__stars { color: var(--rc-star); font-size: 12px; letter-spacing: 0.5px; margin: 2px 0 4px; } .rc-review p { font-size: 14px; color: var(--color-text-secondary); margin: 0; line-height: 1.55; } /* Per-review actions: Reply + share to Facebook/X (helper rc_review_actions). */ .rc-review__actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; } .rc-review__act { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 6px; background: none; color: var(--color-text-muted); font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; transition: color 0.15s, border-color 0.15s, background 0.15s; } .rc-review__act:hover, .rc-review__act:focus-visible { color: var(--color-primary); border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.06); } .rc-review__act--share { padding: 5px 9px; font-size: 13px; } .rc-review__act--copy { padding: 5px 9px; font-size: 14px; } .rc-review__act.is-copied { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-light); } .rc-review__reply { margin-top: 10px; } .rc-review__reply[hidden] { display: none; } .rc-reply-form__text { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; background: var(--color-surface); color: var(--color-text); } .rc-reply-form__text:disabled { background: var(--color-bg-alt); cursor: not-allowed; } .rc-reply-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .rc-reply-form__note { font-size: 12px; color: var(--color-text-muted); } .rc-reply-form__note a { color: var(--color-primary); font-weight: 600; } .rc-reply-form__submit { padding: 7px 16px; font-size: 13px; } .rc-reply-form__msg { margin-top: 8px; font-size: 13px; color: var(--color-primary); font-weight: 600; } .rc-reply-form__msg[hidden] { display: none; } /* Threaded reply (comment_parent), no rating -> no stars. */ .rc-review--reply { margin: 10px 0 4px 20px; padding: 10px 14px; border: none; border-left: 3px solid var(--color-primary); border-radius: 0 8px 8px 0; background: rgba(var(--color-primary-rgb), 0.04); } .rc-review__badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 10px; background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; vertical-align: middle; } .rc-review-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } @media (max-width: 560px) { .rc-hacks { grid-template-columns: 1fr; } .rc-policies { grid-template-columns: 1fr; } .rc-agg { flex-direction: column; align-items: stretch; } .rc-review--reply { margin-left: 10px; } .rc-reply-form__foot { align-items: flex-start; } .rc-agg__bars { width: 100%; } } /* Review modal (shared component, coupon + review pages) */ .rc-modal-overlay { position: fixed; inset: 0; background: rgba(20, 8, 30, 0.55); display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 200; overflow-y: auto; } html.rc-review-open .rc-modal-overlay { display: flex; } html.rc-review-open { overflow: hidden; } .rc-modal { background: var(--color-surface); border-radius: 16px; max-width: 560px; width: 100%; padding: 30px 28px 24px; position: relative; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28); } .rc-modal__x { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--color-bg); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); } .rc-modal__x:hover { background: var(--color-border); } .rc-modal__h { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; margin: 0 0 6px; } .rc-modal__q { text-align: center; color: var(--color-text-secondary); font-size: 14.5px; margin-bottom: 14px; } .rc-modal__rate { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; } .rc-modal__rate i { font-size: 34px; color: var(--color-border); cursor: pointer; transition: color 0.1s; } .rc-modal__rate i.on { color: var(--rc-star); } .rc-modal__text { width: 100%; min-height: 118px; border: 1.5px solid var(--color-border); border-radius: 10px; padding: 14px; font: inherit; font-size: 14.5px; color: var(--color-text); resize: vertical; outline: none; } .rc-modal__text:focus { border-color: var(--color-primary); } .rc-modal__user { display: flex; align-items: center; justify-content: space-between; background: var(--color-bg); border-radius: 7px; padding: 12px 16px; margin: 14px 0; } .rc-modal__user b { font-size: 14.5px; } .rc-modal__user a { color: var(--color-text-secondary); font-size: 13.5px; font-weight: 600; text-decoration: none; } .rc-modal__user a:hover { color: var(--color-primary); } .rc-modal__submit { width: 100%; justify-content: center; padding: 14px; font-size: 15px; gap: 9px; } .rc-modal__note { font-size: 12px; color: var(--color-text-muted); text-align: center; margin-top: 11px; line-height: 1.5; } /* ============================================================ Review page (reuses .rc-cp / .rc-agg / .rc-review / .rc-panel) ============================================================ */ .rc-revhead { display: flex; gap: 18px; align-items: center; padding: 18px 0 20px; border-bottom: 1px solid var(--color-border-subtle); margin-bottom: 6px; } .rc-revhead__logo { flex: 0 0 auto; width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; } .rc-revhead__logo img { width: 40px; height: 40px; object-fit: contain; } .rc-revhead__hi { flex: 1; min-width: 0; } .rc-revhead__hi h1 { font-size: 27px; letter-spacing: -0.6px; line-height: 1.15; margin: 0 0 5px; } .rc-revhead__rating { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--color-text-secondary); flex-wrap: wrap; } .rc-revhead__rating .rc-stars { font-size: 0.95rem; } .rc-revhead__links { margin-top: 9px; display: flex; gap: 16px; font-size: 13.5px; flex-wrap: wrap; } .rc-revhead__links a { color: var(--color-primary); font-weight: 600; text-decoration: none; } .rc-revhead__cta { flex: 0 0 auto; } .rc-revhead__intro { margin-top: 20px; } .rc-rlist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 8px 0 4px; } .rc-rlist-head__t { font-size: 21px; letter-spacing: -0.3px; margin: 0; } .rc-rlist-head__sort { font-size: 13px; color: var(--color-text-secondary); } .rc-coupon-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--color-primary-light); border: 1px solid rgba(var(--color-primary-rgb), 0.25); border-radius: 10px; padding: 20px 24px; margin-top: 26px; } .rc-coupon-cta b { font-size: 16px; color: var(--color-text); } .rc-coupon-cta p { font-size: 13.5px; color: var(--color-text-secondary); margin: 3px 0 0; } .rc-snap { text-align: center; } .rc-snap__big { font-size: 40px; font-weight: 800; color: var(--color-primary); line-height: 1; } .rc-snap .rc-stars { font-size: 15px; } .rc-snap__muted { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; } .rc-snap__btn { width: 100%; margin-top: 14px; justify-content: center; } @media (max-width: 560px) { .rc-revhead { flex-wrap: wrap; } .rc-revhead__cta { width: 100%; } .rc-revhead__cta .btn { width: 100%; } .rc-coupon-cta { flex-direction: column; text-align: center; } .rc-coupon-cta .btn { width: 100%; } } /* ============================================================ Deal detail (virtual /deal/{slug}/): 2-column sticky layout ============================================================ */ .rc-dd { display: grid; grid-template-columns: 1fr 1.05fr; gap: 36px; align-items: start; padding: 20px 0 44px; } .rc-dd__img { position: sticky; top: 84px; border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; background: var(--color-bg); } .rc-dd__main { aspect-ratio: 4 / 3; position: relative; } .rc-dd__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rc-dd__ribbon { position: absolute; top: 14px; left: 14px; background: var(--color-accent); color: #fff; font-weight: 800; font-size: 13px; padding: 4px 11px; border-radius: 6px; } .rc-dd__brand { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .rc-dd__title { font-size: 27px; letter-spacing: -0.5px; line-height: 1.2; margin: 5px 0; } .rc-dd__updated { font-size: 12.5px; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 5px; } .rc-dd__tipwrap { position: relative; display: inline-flex; } .rc-dd__tipwrap .bi { cursor: help; } .rc-dd__tip { position: absolute; bottom: calc(100% + 8px); left: 0; width: 280px; max-width: 70vw; background: var(--color-text); color: #fff; font-size: 11.5px; line-height: 1.5; padding: 10px 12px; border-radius: 8px; opacity: 0; visibility: hidden; transition: opacity 0.15s; z-index: 10; } .rc-dd__tipwrap:hover .rc-dd__tip, .rc-dd__tipwrap:focus-within .rc-dd__tip { opacity: 1; visibility: visible; } .rc-dd__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 18px 0; } .rc-dd__now { font-size: 34px; font-weight: 800; color: var(--color-text); } .rc-dd__old { font-size: 18px; color: var(--color-text-muted); text-decoration: line-through; } .rc-dd__save { font-size: 13px; font-weight: 800; color: var(--color-success); background: var(--color-success-light); padding: 4px 10px; border-radius: 6px; } .rc-dd__cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; text-align: center; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 16px; padding: 15px; border-radius: 10px; margin-bottom: 10px; text-decoration: none; } .rc-dd__cta:hover { background: var(--color-primary-dark); } .rc-dd__store { font-size: 13.5px; color: var(--color-text-secondary); margin-bottom: 20px; } .rc-dd__store b { color: var(--color-text); } .rc-dd__note { font-size: 12px; color: var(--color-text-muted); margin-top: 16px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 7px; padding: 11px 13px; line-height: 1.5; } @media (max-width: 820px) { .rc-dd { grid-template-columns: 1fr; gap: 22px; } .rc-dd__img { position: static; } } /* Deals listing: filter bar + sort + 5-col grid */ .rc-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 20px 0 16px; flex-wrap: wrap; } .rc-fchips { display: flex; gap: 8px; flex-wrap: wrap; } .rc-fchip { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); padding: 7px 14px; border-radius: 30px; border: 1px solid var(--color-border); background: var(--color-surface); text-decoration: none; } .rc-fchip:hover { border-color: var(--color-primary); color: var(--color-primary); } .rc-fchip--active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .rc-fsort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-secondary); } .rc-fsort select { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); cursor: pointer; } /* minmax(0,1fr) (KHÔNG dùng 1fr = minmax(auto,1fr)): track auto lấy min-content = intrinsic 400px của khi ảnh vỡ -> cột phình rộng + cao theo aspect-ratio. Grid home Trending Deals dùng minmax(0,1fr) nên không bao giờ vỡ; đồng bộ ở đây. */ .rc-deals-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } @media (max-width: 1080px) { .rc-deals-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .rc-deals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .rc-deals-grid { grid-template-columns: minmax(0, 1fr); } } /* ============================================================ Shopping guide / best-picks article (role = info | best-picks) ============================================================ */ /* #3 Title giống H1 trang chủ: viền trên ink 3px như .rc-home-head, full width */ .rc-art-head { border-top: 3px solid var(--rc-ink); padding-top: 0.75rem; margin-top: 16px; } .rc-art-cat { font-size: 12px; font-weight: 800; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; } /* #3 H1 title dùng cùng scale/weight heading homepage (.rc-home-head__t) */ .rc-art-head h1 { font-size: var(--text-3xl); letter-spacing: -0.6px; font-weight: var(--font-bold); line-height: 1.1; margin: 6px 0 12px; } @media (min-width: 768px) { .rc-art-head h1 { font-size: var(--text-4xl); } } /* Dek/subtitle dưới H1: excerpt bài, nhẹ hơn h1, KHÔNG viền như h2 in-content */ .rc-art-dek { margin: 10px 0 14px; font-size: var(--text-xl); font-weight: 400; line-height: 1.5; letter-spacing: -0.2px; color: var(--color-text-secondary); } /* Author byline: avatar chồng nhau + "By A and B" (tên đậm gạch chân), giống reference */ .rc-art-authors { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; } .rc-art-authors__avatars { display: inline-flex; flex: 0 0 auto; } .rc-art-authors__avatar { display: inline-block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; margin-left: -12px; border: 2px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-border); background: var(--color-bg); } .rc-art-authors__avatar:first-child { margin-left: 0; } .rc-art-authors__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .rc-art-authors__names { font-size: 17px; font-weight: 400; color: var(--color-text); } /* !important: thắng rule .post-content a:not([class]) (0,3,1) của theme cha (byline nằm trong .post-content). Màu tên giống "About the Author" dưới (--color-text ink), hover tím. */ .rc-art-authors__names a { color: var(--color-text) !important; font-weight: 700; text-decoration: none !important; } .rc-art-authors__names a:hover { color: var(--color-primary) !important; } /* Meta row (Updated / read time / views) , icon Bootstrap, cách nhau bằng gap */ .rc-art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 4px 0 16px; font-size: 14px; color: var(--color-text-muted); } .rc-art-meta__i { display: inline-flex; align-items: center; gap: 6px; } .rc-art-meta__i i { font-size: 15px; opacity: 0.85; } .rc-art-meta__i a { color: inherit; text-decoration: none; } .rc-art-meta__i a:hover { color: var(--color-primary); } /* Action row: nút tròn (copy/X/FB/email) + pill (Save/Comments), giống reference */ .rc-art-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; } .rc-art-actions__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 16px; line-height: 1; cursor: pointer; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; } .rc-art-actions__btn:hover, .rc-art-actions__btn:focus-visible { border-color: var(--color-primary); color: var(--color-primary); } .rc-art-actions__btn.is-copied { border-color: var(--color-success); color: var(--color-success); } .rc-art-actions__pill { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; } .rc-art-actions__pill:hover, .rc-art-actions__pill:focus-visible { border-color: var(--color-primary); color: var(--color-primary); } .rc-art-actions__pill.is-saved { border-color: var(--color-primary); color: var(--color-primary); } .rc-art-actions__pill.is-saved i { color: var(--color-primary); } .rc-art-hero { margin: 20px 0 0; overflow: hidden; aspect-ratio: 2 / 1; background: var(--color-bg); position: relative; } .rc-art-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Caption ảnh featured: góc dưới phải, chỉ hiện khi có caption (WP caption field) */ .rc-art-hero__cap { position: absolute; right: 0; bottom: 0; max-width: 75%; margin: 0; padding: 5px 11px; background: rgba(28, 27, 37, 0.72); color: #fff; font-size: 12px; line-height: 1.4; border-top-left-radius: 8px; } .rc-art-hero__cap a { color: #fff; text-decoration: underline; } .rc-alayout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; padding: 24px 0 50px; align-items: start; } .rc-art-body { min-width: 0; max-width: 760px; } .rc-aside { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 84px; } .rc-relg a { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px dashed var(--color-border); align-items: center; text-decoration: none; color: var(--color-text); } .rc-relg a:last-child { border-bottom: none; } .rc-relg__i { flex: 0 0 56px; width: 56px; height: 40px; overflow: hidden; background: var(--color-bg); position: relative; } .rc-relg__i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rc-relg__t { font-size: 15px; font-weight: 600; line-height: 1.35; } .rc-relg a:hover .rc-relg__t { color: var(--color-primary); } .rc-ccta { background: var(--color-primary-light); border: 1px solid rgba(var(--color-primary-rgb), 0.25); } .rc-ccta .rc-panel__b { text-align: center; } .rc-ccta b { font-size: 15px; } .rc-ccta p { font-size: 13px; color: var(--color-text-secondary); margin: 4px 0 11px; } .rc-ccta .btn { width: 100%; } @media (max-width: 920px) { .rc-alayout { grid-template-columns: 1fr; gap: 24px; } .rc-aside { order: 2; position: static; } } /* #3 H2 in-content giống heading homepage: viền TRÊN ink (bỏ viền trái tím mặc định của .post-content h2 theme cha), chữ đậm scale text-3xl. */ .rc-art-body h2 { border-left: 0; border-top: 3px solid var(--rc-ink); padding-left: 0; padding-top: 0.75rem; margin-top: 2.2rem; font-size: var(--text-3xl); letter-spacing: -0.6px; font-weight: var(--font-bold); line-height: 1.1; } /* Content list marker: hai nguồn list trong bài guide dùng chung 1 kiểu marker. - CU (best-picks) sinh
      -> lọt selector ":not([class])" của theme cha nên mất chấm/số. - Content migrate (bài info cũ, vd scam-alert) dùng
        TRẦN (không class) -> rơi vào rule cha (top:1.15em) lệch vị trí chấm, khác kiểu best-picks. Áp lại đồng nhất cho CẢ hai: chấm tím cho ul, số tròn tím cho ol. LƯU Ý phạm vi: bare list migrate dùng "> " (direct child của .rc-art-body, vì the_content render thẳng vào article) để KHÔNG đụng
          TRẦN của product card pros/cons (nằm trong .acms-list__pros/__cons, nested sâu). wp-block-list dùng descendant vì chỉ CU content sinh ra class này (không có trong acms-list). */ .rc-art-body ul.wp-block-list, .rc-art-body > ul:not([class]) { list-style: none; padding-left: var(--space-6, 1.5rem); } .rc-art-body ul.wp-block-list > li, .rc-art-body > ul:not([class]) > li { position: relative; margin-bottom: var(--space-3, 0.5rem); padding-left: var(--space-1, 0.25rem); } .rc-art-body ul.wp-block-list > li::before, .rc-art-body > ul:not([class]) > li::before { content: ''; position: absolute; left: calc(-1 * var(--space-4, 1rem)); top: 0.6em; width: 7px; height: 7px; background: var(--color-primary); border-radius: 50%; } .rc-art-body ol.wp-block-list, .rc-art-body > ol:not([class]) { list-style: none; padding-left: 0; counter-reset: rc-li; } .rc-art-body ol.wp-block-list > li, .rc-art-body > ol:not([class]) > li { position: relative; margin-bottom: var(--space-3, 0.6rem); padding-left: 2.5rem; counter-increment: rc-li; } .rc-art-body ol.wp-block-list > li::before, .rc-art-body > ol:not([class]) > li::before { content: counter(rc-li); position: absolute; left: 0; top: 0.1em; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--color-primary); color: #fff; border-radius: 50%; font-size: 0.8em; font-weight: 700; } /* #1 post-footer (Tags + Share + Author box) nằm TRONG cột content trái: gỡ .container lồng nhau (max-width + padding ngang) để bám đúng bề rộng cột. */ .rc-art-body .post-footer { margin-top: 2.4rem; } .rc-art-body .post-footer > .container { max-width: none; padding-left: 0; padding-right: 0; } /* Bỏ nút Share trong tag row (share đã có ở header meta actions -> tránh trùng) */ .rc-art-body .post-footer__share-btn { display: none; } /* Tag: bỏ gạch dưới (kể cả hover). !important vì lọt rule .post-content a:not([class]) (0,3,1) của cha */ .rc-art-body .post-footer__tags-list a, .rc-art-body .post-footer__tags-list a:hover { text-decoration: none !important; } /* Ẩn author box đơn (căn giữa) của post-footer , thay bằng "About the Author" đa tác giả bên dưới */ .rc-art-body .post-footer__author-centered { display: none; } /* About the Author (đa tác giả): avatar trái + tên + social + bio */ .rc-authorbio { margin-top: 2.6rem; } .rc-authorbio__h { font-size: var(--text-2xl); font-weight: var(--font-bold); letter-spacing: -0.4px; margin: 0 0 1.4rem; } .rc-authorbio__item { margin-bottom: 1.8rem; } .rc-authorbio__item:last-child { margin-bottom: 0; } /* Hàng trên: avatar + (tên / social). Bio nằm DƯỚI, full lề trái (không thụt). */ .rc-authorbio__head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .rc-authorbio__avatar { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; } .rc-authorbio__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .rc-authorbio__meta { min-width: 0; } .rc-authorbio__name { display: inline-block; font-size: 18px; font-weight: 700; color: var(--color-text); text-decoration: none !important; } .rc-authorbio__name:hover { color: var(--color-primary); } /* icon social XUỐNG DÒNG dưới tên (giống demo) */ .rc-authorbio__social { display: flex; gap: 8px; margin-top: 8px; } /* Nút tròn outline nhỏ giống .rc-art-actions__btn (header), hover viền + chữ tím */ .rc-authorbio__social a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 12.5px; line-height: 1; text-decoration: none !important; transition: border-color 0.15s ease, color 0.15s ease; } .rc-authorbio__social a:hover, .rc-authorbio__social a:focus-visible { border-color: var(--color-primary); color: var(--color-primary); } .rc-authorbio__social a::after { content: none !important; } /* bỏ icon link-ngoài của theme cha */ .rc-authorbio__text { margin: 0; color: var(--color-text-secondary); line-height: 1.6; font-size: 15px; } /* Author archive header (avatar + tên + bio + social). List bài dùng .rc-article-grid như tag. */ .rc-author-head { display: flex; gap: 20px; align-items: center; padding: 18px 0 18px; border-bottom: 1px solid var(--color-border-subtle); margin-bottom: 22px; } .rc-author-head__avatar { flex: 0 0 88px; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--color-bg); } .rc-author-head__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .rc-author-head__body { min-width: 0; } .rc-author-head__body h1 { font-size: var(--text-3xl); font-weight: var(--font-bold); letter-spacing: -0.5px; line-height: 1.15; margin: 0 0 6px; } .rc-author-head__bio { margin: 0 0 10px; max-width: 720px; color: var(--color-text-secondary); line-height: 1.55; font-size: 15px; } .rc-author-head__social { margin-top: 2px; } .rc-author-head__role { margin: 0 0 8px; font-size: 14px; color: var(--color-text-secondary); } .rc-author-head__job { font-weight: var(--font-semibold, 600); color: var(--color-text); } .rc-author-head__dot { margin: 0 6px; color: var(--color-text-muted); } .rc-author-head__role a { color: var(--color-primary); font-weight: 600; text-decoration: none; } .rc-author-head__role a:hover { text-decoration: underline; } .rc-author-head__exp { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .rc-author-head__exp li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; color: var(--color-text); background: var(--color-primary-light); border-radius: 999px; line-height: 1; } .rc-author-head__exp li .bi { color: var(--color-primary); font-size: 13px; } @media (max-width: 600px) { .rc-author-head { flex-direction: column; align-items: flex-start; gap: 14px; } } /* Search form (search results + 404) */ .rc-search-form { display: flex; gap: 10px; max-width: 560px; margin: 0 0 26px; } .rc-search-form input[type="search"] { flex: 1; min-width: 0; border: 1.5px solid var(--color-border); border-radius: 8px; padding: 11px 14px; font: inherit; font-size: 15px; background: var(--color-surface); color: var(--color-text); outline: none; } .rc-search-form input[type="search"]:focus { border-color: var(--color-primary); } .rc-search-form .btn { white-space: nowrap; } /* 404 */ .rc-404 { text-align: center; max-width: 620px; margin: 40px auto 64px; padding: 0 16px; } .rc-404__code { font-size: clamp(72px, 14vw, 128px); font-weight: 800; line-height: 1; letter-spacing: -2px; color: var(--color-primary); } .rc-404__title { font-size: var(--text-3xl); font-weight: var(--font-bold); letter-spacing: -0.5px; margin: 6px 0 10px; } .rc-404__text { margin: 0 0 22px; color: var(--color-text-secondary); line-height: 1.6; } .rc-404__search { margin-left: auto; margin-right: auto; } .rc-404__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .rc-404__links a { display: inline-flex; align-items: center; padding: 9px 18px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text); text-decoration: none; font-weight: 600; font-size: 14px; transition: border-color 0.15s ease, color 0.15s ease; } .rc-404__links a:hover { border-color: var(--color-primary); color: var(--color-primary); } /* Further Reading: card giống category (rc_guide_card + posts-grid-v2), 2 cột trong cột content */ .rc-further { margin-top: 2.6rem; } .rc-further__h { font-size: var(--text-2xl); font-weight: var(--font-bold); letter-spacing: -0.4px; margin: 0 0 1.4rem; } /* Title card trong post-content bị rule .post-content a:not([class]) (0,3,1) tô tím + gạch chân. Trả về giống trang category: inherit màu .post-card__title + bỏ gạch chân. */ .rc-further .post-card__title a { color: inherit !important; text-decoration: none !important; } /* Guide reviews (reuse hệ rc review của coupon/review): khoảng cách trên. scroll-margin-top để anchor #comments không bị header dính che khi cuộn tới. */ .rc-guide-reviews { margin-top: 2.6rem; scroll-margin-top: 90px; } /* #2 Buy on Amazon dùng màu brand (solid tím) như nút chính của site, thay cam */ .acms-list__action .acms-btn--amazon { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .acms-list__action .acms-btn--amazon:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } /* Nút retailer khác (Walmart/Best Buy...) bỏ uppercase cho đồng bộ với "Buy on Amazon" */ .acms-btn--affiliate { text-transform: none; } /* #6 Tab label (Pros & Cons, Detailed Review...) bỏ uppercase, chữ thường */ .acms-list__toggle-label { text-transform: none; } /* ============================================================ Submit a Code form (/submit-code/) ============================================================ */ .rc-slayout { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: start; padding: 18px 0 50px; } .rc-field { margin-bottom: 16px; } .rc-field > label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; } .rc-field input, .rc-field select, .rc-field textarea { width: 100%; border: 1.5px solid var(--color-border); border-radius: 7px; padding: 11px 13px; font: inherit; font-size: 14.5px; color: var(--color-text); outline: none; background: var(--color-surface); } .rc-field input:focus, .rc-field select:focus, .rc-field textarea:focus { border-color: var(--color-primary); } .rc-field textarea { min-height: 100px; resize: vertical; } .rc-hint { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 5px; } .rc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Store autocomplete dropdown (Submit Code) */ .rc-ac { position: relative; } .rc-ac__list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; max-height: 300px; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(28, 27, 37, 0.14); } .rc-ac__list[hidden] { display: none; } .rc-ac__item { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; padding: 9px 13px; border: 0; border-bottom: 1px solid var(--color-border-subtle); background: none; cursor: pointer; font: inherit; } .rc-ac__item:last-child { border-bottom: 0; } .rc-ac__item:hover, .rc-ac__item:focus-visible { background: var(--color-bg-alt); } .rc-ac__name { font-weight: 600; font-size: 14px; color: var(--color-text); } .rc-ac__dom { font-size: 12px; color: var(--color-text-muted); } .rc-typepills { display: flex; gap: 8px; flex-wrap: wrap; } .rc-typepill { font-size: 13.5px; font-weight: 600; color: var(--color-text-secondary); padding: 9px 16px; border: 1.5px solid var(--color-border); border-radius: 30px; cursor: pointer; background: var(--color-surface); } .rc-typepill:hover { border-color: var(--color-primary); color: var(--color-primary); } .rc-typepill--active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .rc-userrow { display: flex; align-items: center; justify-content: space-between; background: var(--color-bg); border-radius: 7px; padding: 12px 16px; margin: 6px 0 14px; } .rc-userrow b { font-size: 14px; } .rc-userrow a { color: var(--color-text-secondary); font-size: 13px; font-weight: 600; text-decoration: none; } .rc-userrow a:hover { color: var(--color-primary); } .rc-ssubmit { width: 100%; padding: 14px; font-size: 15px; gap: 8px; justify-content: center; } .rc-snote { font-size: 12px; color: var(--color-text-muted); text-align: center; margin-top: 10px; line-height: 1.5; } .rc-tips { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; } .rc-tips li { font-size: 13.5px; color: var(--color-text-secondary); padding-left: 24px; position: relative; line-height: 1.45; } .rc-tips li .bi { position: absolute; left: 0; top: 2px; color: var(--color-success); } @media (max-width: 920px) { .rc-slayout { grid-template-columns: 1fr; } .rc-s-side { order: 2; } } @media (max-width: 560px) { .rc-row2 { grid-template-columns: 1fr; } } /* All Stores: find box + popular stores + sticky alphabet nav */ .rc-findstore { display: flex; max-width: 460px; border: 1.5px solid var(--color-border); border-radius: 30px; overflow: hidden; align-items: center; margin-top: 16px; } .rc-findstore:focus-within { border-color: var(--color-primary); } .rc-findstore .bi { color: var(--color-text-muted); margin-left: 16px; } .rc-findstore input { flex: 1; border: none; outline: none; font: inherit; font-size: 14.5px; padding: 11px 12px; background: transparent; min-width: 0; } .rc-findstore button { border: none; background: var(--color-primary); color: #fff; padding: 0 20px; align-self: stretch; font-weight: 700; cursor: pointer; font-size: 14px; } .rc-pop { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; } .rc-pop a { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 14px 8px; text-align: center; font-weight: 700; font-size: 13px; text-decoration: none; color: var(--color-text); } .rc-pop a:hover { border-color: var(--color-primary); color: var(--color-primary); } .rc-pop__logo { width: 42px; height: 42px; border-radius: 11px; background: var(--color-surface); border: 1px solid var(--color-border); margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .rc-pop__logo img { width: 28px; height: 28px; object-fit: contain; } .rc-pop small { display: block; color: var(--color-text-muted); font-weight: 500; font-size: 11px; margin-top: 2px; } .rc-az__nav--sticky { position: sticky; top: 66px; z-index: 30; background: var(--color-surface); padding: 13px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin-top: 24px; } @media (max-width: 900px) { .rc-pop { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 520px) { .rc-pop { grid-template-columns: repeat(3, 1fr); } } /* Homepage FAQ (centered) */ .rc-home-head--center { flex-direction: column; align-items: center; text-align: center; } .rc-faq--center { max-width: 760px; margin: 0 auto; } /* Static content pages (.rc-spage) + .note callout */ .rc-spage { max-width: 820px; margin: 0 auto; padding: 8px 0 44px; } .rc-spage__title { font-size: 34px; letter-spacing: -0.8px; line-height: 1.15; margin: 14px 0 8px; } .rc-spage__updated { font-size: 13px; color: var(--color-text-muted); margin-bottom: 22px; } /* Parent typography.css adds an external-link icon (::after) on bare a[target=_blank]. That is meant for text links; suppress it when the link wraps an image. */ .post-content a[target="_blank"]:not([class]):has(img)::after { content: none; } .note, .post-content .note, .post-content__callout { background: var(--color-primary-light); border: 1px solid rgba(var(--color-primary-rgb), 0.25); border-radius: 10px; padding: 16px 18px; font-size: 14.5px; color: var(--color-primary-dark); margin: 18px 0; } /* Info-guide "Get {Store} Coupons" sidebar CTA (funnel to coupon money page). */ .rc-couponcta { text-align: center; padding: 18px 16px; border: 1px solid var(--color-border); border-radius: 0.65rem; background: var(--color-primary-light); display: flex; flex-direction: column; align-items: center; gap: 10px; } .rc-couponcta__logo { width: 40px; height: 40px; border-radius: 9px; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .rc-couponcta__logo img { width: 26px; height: 26px; object-fit: contain; } .rc-couponcta__b { display: flex; flex-direction: column; gap: 2px; } .rc-couponcta__b strong { font-size: 15px; font-weight: 700; } .rc-couponcta__b span { font-size: 12.5px; color: var(--color-text-secondary); } .rc-couponcta .btn { width: 100%; } /* Product-card Pros/Cons markers (guide pages): pros "+" xanh success, cons "−" đỏ. Pro frontend.css dùng var --acms-success/--acms-danger (không định nghĩa ở context này -> marker mất màu + list-style disc lộ chấm đen). Ép cứng bằng token brand. */ .rc-art-body .acms-list__pros ul, .rc-art-body .acms-list__cons ul { list-style: none !important; padding-left: 0 !important; margin: 0; } .rc-art-body .acms-list__pros li, .rc-art-body .acms-list__cons li { position: relative; list-style: none !important; padding: 0.5em 0 0.5em 1.5em !important; } /* Reset vòng tròn tím rò từ rule cha (.post-content ul:not([class]) li:before) vì ul pros/cons là bare/unclassed trong .post-content. Ép huỷ background/kích thước vòng tròn (cha specificity cao hơn nên cần !important), chỉ giữ ký tự +/-. */ .rc-art-body .acms-list__pros li::before, .rc-art-body .acms-list__cons li::before { position: absolute !important; left: 0 !important; top: 0.5em !important; background: none !important; width: 1em !important; height: auto !important; border-radius: 0 !important; font-weight: 800 !important; font-size: 1em !important; line-height: inherit !important; text-align: center !important; } .rc-art-body .acms-list__pros li::before { content: "+" !important; color: var(--rc-verified, #04734B) !important; } .rc-art-body .acms-list__cons li::before { content: "\2212" !important; color: #C0392B !important; } /* Case B: panel "More {Brand} Stores", crosslink storefront quốc gia cùng family */ .rc-family { list-style: none; margin: 0; padding: 0; } .rc-family li + li { margin-top: 6px; border-top: 1px solid var(--color-border); padding-top: 6px; } .rc-family a { font-size: 0.9rem; font-weight: 600; color: var(--color-text); text-decoration: none; display: block; } .rc-family a:hover, .rc-family a:focus-visible { color: var(--color-primary); } /* ============================================================ Profile page (/profile/) + header account entry (2026-07-06) ============================================================ */ .rc-profile { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; margin-bottom: 2.5rem; } .rc-profile__card { display: flex; gap: 18px; align-items: center; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); padding: 20px 22px; margin-bottom: 1.6rem; } .rc-profile__card img.avatar, .rc-profile__card .rc-avatar { border-radius: 50%; flex: 0 0 auto; } .rc-profile__name { margin: 0 0 4px; font-size: 1.35rem; } .rc-profile__meta { margin: 0 0 10px; font-size: 0.88rem; color: var(--color-text-muted); } .rc-profile__actions { display: flex; gap: 10px; flex-wrap: wrap; } .rc-profile__reviews { list-style: none; margin: 0; padding: 0; } .rc-profile__review { border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg); padding: 14px 16px; margin-bottom: 12px; } .rc-profile__rhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .rc-profile__rstore { font-weight: 700; color: var(--color-text); text-decoration: none; } .rc-profile__rstore:hover { color: var(--color-primary); } .rc-profile__pending { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-accent); background: var(--color-accent-light, rgba(194, 65, 12, 0.08)); border-radius: 999px; padding: 3px 9px; } .rc-profile__rtext { margin: 0 0 6px; font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.55; } .rc-profile__rdate { font-size: 0.78rem; color: var(--color-text-muted); } .rc-profile__empty, .rc-saved__empty { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; } .rc-profile__links { display: flex; flex-direction: column; gap: 8px; } .rc-profile__links a { color: var(--color-text-secondary); text-decoration: none; font-size: 0.9rem; } .rc-profile__links a:hover { color: var(--color-primary); } .rc-saved__item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border-subtle); } .rc-saved__item:last-child { border-bottom: none; } .rc-saved__title { flex: 1; min-width: 0; font-size: 0.88rem; color: var(--color-text); text-decoration: none; } .rc-saved__title:hover { color: var(--color-primary); } .rc-saved__remove { flex: 0 0 auto; border: none; background: none; color: var(--color-text-muted); cursor: pointer; padding: 4px; } .rc-saved__remove:hover { color: var(--color-accent); } @media (max-width: 900px) { .rc-profile { grid-template-columns: 1fr; } } @media (max-width: 520px) { .rc-profile__card { flex-direction: column; align-items: flex-start; } } /* Share + Save row trên coupon/review page (helper rc_share_actions, class dùng chung với guide) */ .rc-cp__main > .rc-art-actions { margin: 14px 0 18px; } /* Header account entry (guest = nút Sign In dùng .btn--primary, không cần CSS riêng) */ .rc-header__account { display: inline-flex; align-items: center; border-radius: 50%; } .rc-header__account img, .rc-header__account .rc-avatar { border-radius: 50%; display: block; } /* Google button container (giờ chỉ còn trong popup login, render lazy qua rcGoogleRenderInto) */ .rc-glogin-btn { margin-top: 10px; } /* ============================================================ Popup login NYT-style (Save / Review / Reply / header Sign In) Desktop: hộp giữa màn hình. Mobile <=560px: bottom sheet. ============================================================ */ .rc-login-modal { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: rgba(28, 27, 37, 0.55); padding: 20px; } .rc-login-modal.is-open { display: flex; } .rc-login-modal__box { position: relative; width: 100%; max-width: 400px; background: var(--color-surface); border-radius: 14px; padding: 34px 28px 26px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } .rc-login-modal__icon { font-size: 34px; color: var(--color-primary); display: block; margin-bottom: 8px; } .rc-login-modal__title { margin: 0 0 8px; font-size: 1.25rem; letter-spacing: -0.3px; } .rc-login-modal__text { margin: 0 0 18px; font-size: 0.92rem; color: var(--color-text-secondary); line-height: 1.55; } .rc-login-modal__google { display: flex; justify-content: center; min-height: 40px; } .rc-login-modal__alt { margin: 14px 0 0; font-size: 0.85rem; } .rc-login-modal__alt a { color: var(--color-text-muted); text-decoration: underline; } .rc-login-modal__alt a:hover { color: var(--color-primary); } .rc-login-modal .rc-modal__close { position: absolute; top: 10px; right: 12px; border: none; background: none; font-size: 22px; color: var(--color-text-muted); cursor: pointer; padding: 6px; } @media (max-width: 560px) { .rc-login-modal { align-items: flex-end; padding: 0; } .rc-login-modal__box { max-width: none; border-radius: 16px 16px 0 0; padding: 30px 20px calc(24px + env(safe-area-inset-bottom)); } } /* Toast nhỏ đáy màn hình (Saved to your profile...) */ .rc-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px); z-index: 10001; background: var(--rc-ink); color: #fff; font-size: 0.85rem; font-weight: 600; padding: 10px 18px; border-radius: 999px; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; max-width: calc(100vw - 32px); } .rc-toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* Nút Save trạng thái đã lưu */ .rc-art-actions__pill.is-saved { border-color: var(--color-primary); color: var(--color-primary); } /* Amazon deals (engine acms-deals, C1): section trên /deals/ + dòng Updated card homepage */ .rc-amzdeals { margin: 6px 0 30px; } .rc-amzdeals__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .rc-amzdeals__head .rc-cp-sec__title { margin: 0; } .rc-amzdeals__note { font-size: 0.78rem; color: var(--color-text-muted); } .rc-home-deal__upd { font-size: 0.72rem; color: var(--color-text-muted); } /* ============================================================ Header nền BRAND (thử nghiệm 2026-07-06): đổi .rc-header sang tím brand, chỉnh menu/search/nút/logo cho hợp nền tối. Muốn quay về header trắng: xoá nguyên block này. ============================================================ */ .rc-header { background: var(--rc-brand); border-bottom: 1px solid var(--rc-brand-hover); } /* Logo trắng bằng filter (cùng trick footer) */ .rc-header .rc-logo { filter: brightness(0) invert(1); } /* Menu chữ trắng */ .rc-header .rc-menu { color: rgba(255, 255, 255, 0.88); } .rc-header .rc-menu > a:hover { color: #fff; } .rc-header .rc-has-sub > a { color: rgba(255, 255, 255, 0.88); } .rc-header .rc-has-sub:hover > a { color: #fff; } /* Dropdown panel giữ nền sáng cho dễ đọc (nguyên trạng) */ /* Search pill: nền trắng nổi trên tím. CHỈ áp thanh desktop (.rc-header__nav), không đụng pill trong mobile-nav (panel sáng, giữ style gốc). */ .rc-header__nav .rc-header__search { background: var(--color-surface); border-color: rgba(255, 255, 255, 0.45); } .rc-header__nav .rc-header__search:focus-within { border-color: #fff; } /* Nút Sign In đảo màu: nền trắng chữ tím */ .rc-header .rc-header__right .btn.btn--primary { background: #fff; color: var(--rc-brand); border-color: #fff; } .rc-header .rc-header__right .btn.btn--primary:hover { background: rgba(255, 255, 255, 0.9); color: var(--rc-brand-hover); } /* Avatar viền trắng nhẹ cho tách nền */ .rc-header .rc-header__account img, .rc-header .rc-header__account .rc-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65); } /* Burger trắng (mobile) */ .rc-header .rc-header__burger { color: #fff; } /* ============================================================ Header search: pill chỉ còn input (Enter để submit) + suggest dropdown ============================================================ */ /* Dropdown suggest (panel sáng, chạy được trên cả header tím lẫn mobile panel) */ .rc-hsuggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16); overflow: hidden; } .rc-hsuggest__item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; min-height: 44px; text-decoration: none; color: var(--color-text); font-size: 0.88rem; } .rc-hsuggest__item img { width: 20px; height: 20px; border-radius: 4px; flex: 0 0 auto; } .rc-hsuggest__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .rc-hsuggest__codes { flex: 0 0 auto; font-size: 0.76rem; color: var(--color-text-muted); } .rc-hsuggest__item:hover, .rc-hsuggest__item.is-hl { background: var(--color-bg-alt, var(--color-bg)); } .rc-hsuggest__all { display: block; padding: 10px 14px; font-size: 0.82rem; font-weight: 700; color: var(--color-primary); text-decoration: none; border-top: 1px solid var(--color-border-subtle); } .rc-hsuggest__all:hover, .rc-hsuggest__all.is-hl { background: var(--color-bg-alt, var(--color-bg)); } /* ============================================================ About Us "Trust bands" (user chốt 2026-07-06): hero brand nhạt + stats tile đè mép, section xen kẽ, grid verify, team grid 2 cột, CTA strip nền brand. ============================================================ */ .rc-about-hero { background: color-mix(in srgb, var(--color-primary) 7%, #fff); padding: 3rem 0 4.5rem; text-align: center; } .rc-about-hero h1 { font-size: var(--text-4xl, 2.4rem); letter-spacing: -0.8px; margin: 0 0 0.8rem; } .rc-about-hero__dek { max-width: 760px; margin: 0 auto 0.9rem; font-size: 1.15rem; line-height: 1.6; color: var(--color-text-muted); } .rc-about-hero__meta { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); } /* position+z-index: tile kéo đè mép hero, phải nổi TRÊN nền hero (mobile bị nền đè số). */ .rc-about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin-top: -2.4rem; position: relative; z-index: 1; } .rc-about-stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.1rem 0.8rem; text-align: center; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05); } .rc-about-stat b { display: block; font-size: 1.6rem; letter-spacing: -0.5px; color: var(--color-primary); } .rc-about-stat span { font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted); } .rc-about-sec { padding: 3rem 0; } .rc-about-sec--soft { background: var(--color-bg-alt); } .rc-about-sec h2 { font-size: var(--text-2xl); letter-spacing: -0.4px; margin: 0 0 1.1rem; } .rc-about-prose { max-width: 760px; } .rc-about-prose p { line-height: 1.75; margin: 0 0 1rem; } .rc-about-prose h2 + h2, .rc-about-prose ul + h2, .rc-about-prose p + h2 { margin-top: 2.2rem; } .rc-about-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .rc-about-step { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.2rem 1.1rem; } .rc-about-step i { font-size: 1.5rem; color: var(--color-primary); } .rc-about-step b { display: block; margin: 0.5rem 0 0.35rem; } .rc-about-step p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--color-text-muted); } .rc-about-more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.3rem; font-weight: 700; color: var(--color-primary); text-decoration: none; } .rc-about-callout { border-left: 4px solid var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, #fff); padding: 0.8rem 1rem; border-radius: 0 8px 8px 0; } .rc-about-callout i { color: var(--color-primary); margin-right: 0.3rem; } .rc-about-rules { list-style: none; padding: 0; margin: 0; } .rc-about-rules li { position: relative; padding-left: 1.6rem; margin-bottom: 0.7rem; line-height: 1.6; } .rc-about-rules li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); } .rc-about-team__intro { max-width: 700px; margin: -0.4rem 0 1.4rem; color: var(--color-text-muted); } .rc-about-team .author-bio-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 2.2rem; } .rc-about-team .author-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 1rem; margin-bottom: 0.8rem; } .rc-about-cta { background: var(--color-primary); color: #fff; padding: 2.6rem 0; } .rc-about-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .rc-about-cta h2 { margin: 0 0 0.4rem; font-size: var(--text-2xl); color: #fff; } .rc-about-cta p { margin: 0; color: rgba(255, 255, 255, 0.85); } .rc-about-cta__btns { display: flex; gap: 0.8rem; flex: 0 0 auto; } .rc-about-cta__primary { background: #fff; color: var(--color-primary); font-weight: 700; } .rc-about-cta__primary:hover { background: rgba(255, 255, 255, 0.9); color: var(--color-primary); } .rc-about-cta__ghost { border: 1.5px solid rgba(255, 255, 255, 0.7); color: #fff; font-weight: 700; } .rc-about-cta__ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.08); } @media (max-width: 1080px) { .rc-about-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { /* Mobile: bỏ đè mép hero (2 hàng tile cao, số bị nền hero cắt), xếp dưới hero bình thường. */ .rc-about-stats { grid-template-columns: repeat(2, 1fr); margin-top: 1rem; } .rc-about-hero { padding-bottom: 2.2rem; } .rc-about-team .author-bio-list { grid-template-columns: 1fr; } .rc-about-cta .container { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .rc-about-hero { padding: 2.2rem 0 3.6rem; } .rc-about-hero h1 { font-size: var(--text-3xl); } .rc-about-steps { grid-template-columns: 1fr; } } /* Link trong prose About: nổi bật màu brand + gạch chân rõ (user chốt 2026-07-06). */ .rc-about-prose a, .rc-about-rules a, .rc-about-team__intro a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .rc-about-prose a:hover, .rc-about-rules a:hover { color: var(--color-primary-dark, #5D1982); text-decoration-thickness: 2.5px; } /* How We Rank: badge RC Score demo + 4 band điểm (màu khớp .acms-score của Pro). */ .rc-hwr-score-intro { display: flex; align-items: center; gap: 1.2rem; max-width: 760px; margin-bottom: 1.6rem; } .rc-hwr-badge { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 2px; padding: 0.55rem 0.9rem; border-radius: 10px; background: linear-gradient(135deg, #059669, #047857); color: #fff; } .rc-hwr-badge b { font-size: 1.7rem; line-height: 1; } .rc-hwr-badge i { font-style: normal; font-size: 0.9rem; opacity: 0.85; } .rc-hwr-score-intro p { margin: 0; } .rc-hwr-bands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .rc-hwr-band { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.1rem; } .rc-hwr-band__chip { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; color: #fff; font-size: 0.8rem; font-weight: 800; margin-bottom: 0.5rem; } .rc-hwr-band__chip--9 { background: linear-gradient(135deg, #059669, #047857); } .rc-hwr-band__chip--7 { background: linear-gradient(135deg, #84cc16, #65a30d); } .rc-hwr-band__chip--6 { background: linear-gradient(135deg, #f59e0b, #d97706); } .rc-hwr-band__chip--4 { background: linear-gradient(135deg, #ef4444, #b91c1c); } .rc-hwr-band b { display: block; margin-bottom: 0.25rem; } .rc-hwr-band p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--color-text-muted); } .rc-hwr-steps { grid-template-columns: repeat(3, 1fr); } .rc-hwr-note { margin: 1.2rem 0 0; font-size: 0.9rem; color: var(--color-text-muted); } @media (max-width: 1080px) { .rc-hwr-bands { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .rc-hwr-score-intro { flex-direction: column; align-items: flex-start; } .rc-hwr-steps { grid-template-columns: 1fr; } } @media (max-width: 480px) { .rc-hwr-bands { grid-template-columns: 1fr; } } /* Legal pages (privacy/copyright/disclaimer): hero mảnh + TOC sticky + khối đọc. */ .rc-legal-hero { padding: 2rem 0 2.2rem; } .rc-legal-updated { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); } .rc-legal { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.6rem; padding: 2rem 0 3rem; align-items: start; } .rc-legal__tocbox { position: sticky; top: 84px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 1rem 1.1rem; font-size: 0.85rem; } .rc-legal__tocbox b { display: block; margin-bottom: 0.55rem; font-size: 0.8rem; text-transform: none; } .rc-legal__tocbox a { display: block; padding: 0.28rem 0; color: var(--color-text-muted); text-decoration: none; line-height: 1.35; } .rc-legal__tocbox a:hover { color: var(--color-primary); } .rc-legal__body { max-width: 760px; } .rc-legal__body h2 { scroll-margin-top: 90px; } @media (max-width: 900px) { .rc-legal { grid-template-columns: 1fr; gap: 1.4rem; } .rc-legal__tocbox { position: static; } } /* Contact Us: note media-website trên cùng + 2 cột info/map + related links. */ .rc-contact-note { display: flex; gap: 0.6rem; align-items: flex-start; max-width: 860px; margin: 1.6rem 0; padding: 0.9rem 1.1rem; background: color-mix(in srgb, var(--color-primary) 6%, #fff); border-left: 4px solid var(--color-primary); border-radius: 0 8px 8px 0; font-weight: 600; line-height: 1.55; } .rc-contact-note .bi { color: var(--color-primary); margin-top: 2px; } .rc-contact { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 2.4rem; align-items: stretch; margin-bottom: 2.4rem; } .rc-contact__info h2 { margin: 0 0 0.8rem; } .rc-contact__list { list-style: none; padding: 0; margin: 1.2rem 0; } .rc-contact__list li { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.7rem 0; border-top: 1px solid var(--color-border-subtle, var(--color-border)); } .rc-contact__list li:first-child { border-top: 0; } .rc-contact__list .bi { font-size: 1.15rem; color: var(--color-primary); margin-top: 2px; } .rc-contact__list b { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); } .rc-contact__map { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; min-height: 380px; } .rc-contact__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; } .rc-contact__links { margin: 0 0 3rem; } .rc-contact__links h2 { font-size: 1.05rem; margin-bottom: 0.6rem; } .rc-contact__links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; } .rc-contact__links a { color: var(--color-primary); font-weight: 600; text-decoration: none; } .rc-contact__links a:hover { text-decoration: underline; } @media (max-width: 900px) { .rc-contact { grid-template-columns: 1fr; } .rc-contact__map { min-height: 300px; } } /* Infinite scroll on info (Shopping Guides) category archives. The numbered pager stays in the DOM for SEO / no-JS and is hidden only once JS activates. */ .rc-infinite-on .rc-pagination { display: none; } .rc-infinite-sentinel { height: 1px; margin: 0; } .rc-infinite-status { min-height: 1.4em; padding: 1.2rem 0 0.4rem; text-align: center; font-size: 0.9rem; color: var(--color-text-muted); } .rc-guide-grid.is-loading { position: relative; } .rc-guide-grid.is-loading::after { content: ""; position: absolute; left: 50%; bottom: -2.4rem; width: 1.4rem; height: 1.4rem; margin-left: -0.7rem; border: 2px solid var(--color-border-subtle); border-top-color: var(--color-primary); border-radius: 50%; animation: rc-inf-spin 0.7s linear infinite; } @keyframes rc-inf-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .rc-guide-grid.is-loading::after { animation: none; } } /* Guide cards (rc_guide_card / .post-card--grid-v2, used on homepage Shopping Guides, the shopping-guides category and Further Reading): align the text block flush with the image edges. The parent theme insets .post-card__content by var(--space-4) horizontally, which reads as squeezed on these borderless cards. */ .post-card--grid-v2 .post-card__content { padding-left: 0; padding-right: 0; } /* Guide cards can sit inside article content (Further Reading), where the parent theme's `.post-content img { height:auto; border-radius }` breaks the card image fill and leaves a strip of card background below it. Restore the cover-fill for guide-grid images in ANY context (2-class specificity beats .post-content img). */ .posts-grid-v2 .post-card__image a { display: block; height: 100%; } .posts-grid-v2 .post-card__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; margin: 0; }