/*
Theme Name: CouponCare
Theme URI: https://couponcare.com
Author: CouponCare
Author URI: https://couponcare.com
Description: Standalone theme for couponcare.com. Frame benchmark couponfollow.com (đã duyệt qua mockup 2026-07-19), palette Care Teal. Fonts Poppins + Open Sans self-host. Light-only, WCAG AA.
Version: 0.3.0
License: GPL-2.0-or-later
Text Domain: couponcare
*/

/* ==========================================================================
   0. Fonts (self-host woff2 latin, font-display swap)
   ========================================================================== */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/opensans-var.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/poppins-500.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/poppins-700.woff2") format("woff2");
}

/* ==========================================================================
   1. Design tokens: khung CouponFollow + màu Care Teal (mapping user duyệt)
   ========================================================================== */
:root {
	--cc-primary: #0F766E;        /* vai trò link / Get this Deal / secondary */
	--cc-primary-hover: #0B5D57;
	--cc-primary-soft: #E7F3F1;
	--cc-cta: #D9480F;            /* Show Coupon Code + pill CTA */
	--cc-cta-hover: #BC3D0B;
	--cc-cta-soft: #FDF1EA;
	--cc-success: #2E7D32;
	--cc-mint: #E4F2E5;           /* dải "Used X times" */
	--cc-mint-t: #2E7D32;
	--cc-star: #F5A623;
	--cc-ink: #17252B;
	--cc-muted: #5C6B70;
	--cc-bg: #F2F8F7;             /* nền TRANG (card trắng nổi lên) */
	--cc-card: #FFFFFF;
	--cc-line: #DCE8E6;
	--cc-dark: #0E4A44;           /* header */
	--cc-darker: #0B3B36;         /* footer */
	--cc-dark-input: #16403B;     /* ô search trong header */
	--cc-dark-line: #1F5850;
	--cc-logo-mint: #2DD4BF;      /* viền hộp COUPON của logo */
	--cc-radius: 10px;
	--cc-radius-sm: 4px;
	--cc-shadow: 0 2px 6px rgba(23, 37, 43, 0.06);
	--cc-shadow-lift: 0 4px 14px rgba(23, 37, 43, 0.13);
	--cc-container: 1128px;
	--cc-font: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--cc-font-h: "Poppins", "Open Sans", ui-sans-serif, system-ui, sans-serif;
	--cc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color-scheme: light;
}

/* ==========================================================================
   2. Reset + base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--cc-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--cc-ink);
	background: var(--cc-bg);
}
img { max-width: 100%; height: auto; }
a { color: var(--cc-primary); text-decoration: none; }
a:hover { color: var(--cc-primary-hover); text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.5em; font-family: var(--cc-font-h); }
h1 { font-size: clamp(24px, 3.4vw, 32px); }
h2 { font-size: clamp(19px, 2.6vw, 24px); }
h3 { font-size: 16px; }
p { margin: 0 0 1em; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.cc-container { max-width: var(--cc-container); margin: 0 auto; padding: 0 24px; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   3. Icons (SVG mask)
   ========================================================================== */
.bi {
	display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: var(--bi-svg) center / contain no-repeat;
	mask: var(--bi-svg) center / contain no-repeat;
}
.bi-patch-check-fill { --bi-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01zm.287 5.984-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708"/></svg>'); }
.bi-hourglass-split { --bi-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z"/></svg>'); }
.bi-info-circle { --bi-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/></svg>'); }
.bi-box-arrow-up-right { --bi-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg>'); }

/* ==========================================================================
   4. Buttons + badges + chips
   ========================================================================== */
.cc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	border: 0; border-radius: var(--cc-radius-sm); cursor: pointer;
	padding: 12px 24px; font-size: 15px; font-weight: 600; line-height: 1.2;
	background: var(--cc-primary); color: #fff; transition: background 0.15s;
}
.cc-btn:hover { background: var(--cc-primary-hover); color: #fff; text-decoration: none; }
.cc-btn--cta { background: var(--cc-cta); }
.cc-btn--cta:hover { background: var(--cc-cta-hover); }
.cc-btn--line {
	background: #fff; color: var(--cc-primary);
	border: 1.5px solid var(--cc-primary); padding: 10.5px 24px;
}
.cc-btn--line:hover { background: var(--cc-primary); color: #fff; }

.verified-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; }
.verified-badge--success { color: var(--cc-success); }

.cc-chip {
	display: inline-block; padding: 6px 14px; border-radius: 999px;
	border: 1px solid var(--cc-line); background: var(--cc-card); color: var(--cc-ink);
	font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.cc-chip:hover { border-color: var(--cc-primary); color: var(--cc-primary); text-decoration: none; }
.cc-chip.is-on, .cc-chip[aria-pressed="true"] { background: var(--cc-primary); border-color: var(--cc-primary); color: #fff; }

/* ==========================================================================
   5. Header (dark teal, cao 80px, logo hộp + nav + search phải; khung CF)
   ========================================================================== */
.cc-header { background: var(--cc-dark); color: #fff; position: relative; z-index: 50; }
.cc-header__in {
	max-width: var(--cc-container); margin: 0 auto; min-height: 80px;
	padding: 0 24px; display: flex; align-items: center; gap: 24px;
}
.cc-logo {
	display: inline-flex; align-items: center; gap: 6px; flex: none;
	font-weight: 800; font-size: 15px; letter-spacing: 0.02em; color: #fff; white-space: nowrap;
}
.cc-logo:hover { text-decoration: none; color: #fff; }
.cc-logo__box {
	border: 2px solid var(--cc-logo-mint); border-radius: 5px;
	color: #fff; padding: 1px 7px 2px;
}
.cc-logo__care { color: var(--cc-star); letter-spacing: 0.14em; }
.cc-logo__beta {
	align-self: flex-start; margin-left: 2px; margin-top: -4px;
	background: var(--cc-logo-mint); color: var(--cc-darker);
	font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em;
	padding: 1px 5px; border-radius: 3px;
}

.cc-nav { display: flex; align-items: center; }
.cc-nav__list { display: flex; gap: 4px; align-items: center; list-style: none; margin: 0; padding: 0; }
.cc-nav__item { position: relative; }
.cc-nav__item > a { display: inline-block; color: #E3EFED; font-weight: 500; font-size: 14px; padding: 8px 12px; }
.cc-nav__item > a:hover { color: #fff; text-decoration: none; }
.cc-nav .cc-nav__item.has-sub > a { padding-right: 26px; }
/* Caret desktop: mũi tên nhỏ (nút ẩn ở desktop, hover ra dropdown) */
.cc-nav .cc-nav__caret {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	width: 16px; height: 16px; border: 0; background: none; cursor: pointer; padding: 0;
}
.cc-nav .cc-nav__caret::after {
	content: ""; display: block; width: 7px; height: 7px; margin: 0 auto;
	border-right: 1.6px solid #9EC3BE; border-bottom: 1.6px solid #9EC3BE;
	transform: rotate(45deg) translate(-1px, -1px);
}
/* Dropdown desktop (CHỈ trong .cc-nav để không leak xuống .cc-mnav mobile).
   Cầu nối trong suốt (::after) lấp khoảng hở 6px giữa item và submenu để rê
   chuột xuống không mất hover. */
.cc-nav .cc-nav__item.has-sub::after {
	content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px;
	display: none;
}
.cc-nav .cc-nav__item.has-sub:hover::after { display: block; }
.cc-nav .cc-sub {
	position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; z-index: 60;
	max-height: 70vh; overflow-y: auto;
	list-style: none; margin: 0; padding: 6px; border-radius: var(--cc-radius);
	background: #fff; box-shadow: var(--cc-shadow-lift);
	opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s;
}
.cc-nav .cc-nav__item.has-sub:hover > .cc-sub,
.cc-nav .cc-nav__item.has-sub:focus-within > .cc-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.cc-nav .cc-sub .cc-nav__item { position: static; }
.cc-nav .cc-sub .cc-nav__item > a { display: block; color: var(--cc-ink); font-weight: 500; font-size: 13.5px; padding: 8px 12px; border-radius: var(--cc-radius-sm); white-space: nowrap; }
.cc-nav .cc-sub .cc-nav__item > a:hover { background: var(--cc-primary-soft); color: var(--cc-primary); text-decoration: none; }
.cc-nav .cc-sub .cc-nav__caret { display: none; }

.cc-search { margin-left: auto; flex: 0 1 320px; position: relative; }
.cc-search::before {
	content: ""; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
	width: 14px; height: 14px; background: #7FA39E;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>') center / contain no-repeat;
}
.cc-search input[type="search"] {
	width: 100%; border: 1px solid var(--cc-dark-line); border-radius: 6px;
	padding: 9px 12px 9px 33px; font-family: inherit; font-size: 13.5px;
	background: var(--cc-dark-input); color: #E3EFED;
}
.cc-search input[type="search"]::placeholder { color: #7FA39E; }
.cc-search input[type="search"]:focus { border-color: var(--cc-logo-mint); outline: none; }

.cc-mnav { display: none; }
.cc-mnav > summary {
	list-style: none; cursor: pointer; padding: 7px 12px;
	border: 1px solid var(--cc-dark-line); border-radius: 6px;
	font-weight: 600; font-size: 13.5px; color: #E3EFED;
}
.cc-mnav > summary::-webkit-details-marker { display: none; }
.cc-mnav__panel {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
	background: var(--cc-dark); border-top: 1px solid var(--cc-dark-line);
	box-shadow: var(--cc-shadow-lift); padding: 8px 24px 14px;
}
.cc-mnav__panel a { display: block; padding: 11px 4px; font-weight: 600; color: #E3EFED; border-bottom: 1px solid var(--cc-dark-line); }
.cc-mnav__panel a:hover { color: #fff; text-decoration: none; }
/* Mobile menu list (accordion click, nền TỐI như panel, KHÔNG dùng dropdown
   hover của desktop). Reset mọi dấu vết absolute/opacity/bg trắng của .cc-sub. */
.cc-mnav__list, .cc-mnav__list .cc-sub { list-style: none; margin: 0; padding: 0; }
.cc-mnav__list .cc-nav__item { position: relative; border-bottom: 1px solid var(--cc-dark-line); }
.cc-mnav__list .cc-nav__item > a { display: block; padding: 12px 4px; font-weight: 600; color: #E3EFED; border-bottom: 0; }
.cc-mnav__list .cc-nav__caret {
	position: absolute; right: 0; top: 4px; width: 40px; height: 40px; border: 0;
	background: none; cursor: pointer; padding: 0;
}
.cc-mnav__list .cc-nav__caret::after {
	content: ""; display: block; width: 9px; height: 9px; margin: 0 auto;
	border-right: 2px solid #9EC3BE; border-bottom: 2px solid #9EC3BE;
	transform: rotate(45deg); transition: transform 0.15s;
}
.cc-mnav__list .has-sub.is-open > .cc-nav__caret::after { transform: rotate(-135deg); }
/* Submenu mobile: reset toàn bộ style desktop -> tĩnh, nền tối, hiện đầy đủ */
.cc-mnav__list .cc-sub {
	position: static; display: none; max-height: none; overflow: visible;
	background: transparent; box-shadow: none; border-radius: 0;
	opacity: 1; visibility: visible; transform: none; min-width: 0;
	padding: 4px 0 8px 12px; margin: 0;
	border-left: 2px solid var(--cc-dark-line);
}
.cc-mnav__list .has-sub.is-open > .cc-sub { display: block; }
.cc-mnav__list .cc-sub .cc-nav__item { position: static; border-bottom: 0; }
.cc-mnav__list .cc-sub .cc-nav__item > a { display: block; padding: 9px 4px; font-weight: 500; font-size: 13.5px; color: #C9DEDB; white-space: normal; }
.cc-mnav__list .cc-sub .cc-nav__item > a:hover { color: #fff; }
.cc-mnav__list .cc-sub .cc-nav__caret { display: none; }
.cc-msearch { padding: 6px 0 10px; }
.cc-msearch input[type="search"] {
	width: 100%; border: 1px solid var(--cc-dark-line); border-radius: 6px;
	padding: 10px 14px; font-family: inherit; font-size: 14px;
	background: var(--cc-dark-input); color: #E3EFED;
}
.cc-msearch input[type="search"]::placeholder { color: #7FA39E; }

/* Thanh FTC affiliate disclosure ngay dưới header, toàn trang, căn giữa */
.cc-ftc { background: var(--cc-primary-soft); border-bottom: 1px solid var(--cc-line); }
.cc-ftc p { margin: 0; padding: 8px 0; text-align: center; font-size: 12.5px; color: var(--cc-muted); }
.cc-ftc a { color: var(--cc-primary); font-weight: 600; white-space: nowrap; text-decoration: underline; }
.cc-ftc a:hover { text-decoration: underline; }
.cc-ftc__arrow { margin-left: 3px; }

/* Mây trang trí dưới header (khung CF) */
.cc-sky { position: relative; overflow: hidden; }
.cc-sky::before, .cc-sky::after {
	content: ""; position: absolute; top: 26px; width: 150px; height: 40px;
	background: #fff; border-radius: 999px; opacity: 0.8; pointer-events: none;
	box-shadow: 40px -14px 0 6px #fff, -34px -8px 0 2px #fff;
}
.cc-sky::before { left: -40px; }
.cc-sky::after { right: -30px; top: 60px; }

/* ==========================================================================
   6. Section khung (heading Poppins to, căn giữa như CF)
   ========================================================================== */
.cc-sec { padding: 6px 0; position: relative; z-index: 1; }
.cc-sec__h {
	text-align: center; font-family: var(--cc-font-h);
	font-size: 36px; font-weight: 700; margin: 40px 0 34px;
}
.cc-sec__more { display: block; text-align: center; font-weight: 600; font-size: 13.5px; margin-top: 14px; }

/* ==========================================================================
   7. Homepage: carousel + logo cards + tsbar + spotlight + trending rows
   ========================================================================== */
.cc-carousel { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cc-slide {
	background: var(--cc-card); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow);
	padding: 26px 20px 22px; text-align: center; color: var(--cc-ink); display: block;
}
.cc-slide:hover { box-shadow: var(--cc-shadow-lift); text-decoration: none; color: var(--cc-ink); }
.cc-slide__logo { height: 96px; display: grid; place-items: center; }
.cc-slide__logo img { width: 72px; height: 72px; object-fit: contain; }
.cc-slide__store { color: var(--cc-muted); font-size: 12px; margin: 6px 0; }
.cc-slide__t { font-size: 15.5px; font-weight: 600; line-height: 1.35; display: block; }

.cc-lgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 22px; list-style: none; padding: 0; }
.cc-lcard {
	background: var(--cc-card); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow);
	padding: 18px 10px 12px; text-align: center; display: flex; flex-direction: column;
	gap: 6px; align-items: center; color: var(--cc-ink);
}
.cc-lcard:hover { box-shadow: var(--cc-shadow-lift); text-decoration: none; color: var(--cc-ink); }
.cc-lcard__logo { height: 56px; display: grid; place-items: center; }
.cc-lcard__logo img { width: 44px; height: 44px; object-fit: contain; }
.cc-lcard__nm { color: var(--cc-muted); font-size: 12px; }
.cc-lcard__cta {
	margin-top: 4px; width: 100%; background: var(--cc-cta); color: #fff;
	font-weight: 700; font-size: 13px; border-radius: var(--cc-radius-sm); padding: 8px 4px;
}
.cc-lcard:hover .cc-lcard__cta { background: var(--cc-cta-hover); }

.cc-tsbar {
	background: var(--cc-card); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow);
	padding: 13px 18px; margin: 22px 0 6px; font-size: 13px; color: var(--cc-muted);
}
.cc-tsbar b { color: var(--cc-ink); margin-right: 8px; }
.cc-tsbar a { color: var(--cc-muted); margin-right: 14px; display: inline-block; }
.cc-tsbar a:hover { color: var(--cc-primary); }

.cc-spot {
	background: var(--cc-card); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow);
	display: grid; grid-template-columns: 1fr 1.1fr; overflow: hidden; margin: 22px 0;
}
.cc-spot__tx { padding: 30px 28px; }
.cc-spot__store { font-weight: 800; color: var(--cc-cta); font-size: 13px; margin-bottom: 10px; }
.cc-spot__t { font-family: var(--cc-font-h); font-size: 30px; font-weight: 700; margin: 0 0 10px; line-height: 1.25; }
.cc-spot__d { color: var(--cc-muted); font-size: 13.5px; margin: 0 0 18px; max-width: 46ch; }
.cc-spot__ph { min-height: 240px; background: var(--cc-primary-soft); display: grid; place-items: center; }
.cc-spot__ph img { width: 180px; height: 180px; object-fit: contain; }

.cc-trow {
	background: var(--cc-card); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow);
	margin-bottom: 16px; overflow: hidden;
}
/* Cả dòng là <a>: click đâu cũng reveal (kiểu CouponFollow) */
.cc-trow__in { display: flex; align-items: center; gap: 22px; padding: 20px 22px; color: var(--cc-ink); cursor: pointer; }
.cc-trow__in:hover { text-decoration: none; color: var(--cc-ink); }
.cc-trow__logo { width: 96px; height: 56px; flex: none; display: grid; place-items: center; }
.cc-trow__logo img { max-width: 84px; max-height: 52px; object-fit: contain; }
.cc-trow__off { flex: none; width: 72px; text-align: center; }
.cc-trow__off b { display: block; font-family: var(--cc-font-h); font-size: 28px; font-weight: 600; line-height: 1.05; }
.cc-trow__off span { font-size: 12px; color: var(--cc-muted); font-weight: 600; letter-spacing: 0.06em; }
.cc-trow__bd { flex: 1; min-width: 0; }
.cc-trow__title { font-size: 16px; font-weight: 600; display: block; margin-bottom: 3px; }
.cc-trow__store { font-size: 11.5px; color: var(--cc-muted); }
.cc-trow__saved { background: var(--cc-mint); color: var(--cc-mint-t); font-size: 12px; font-weight: 600; padding: 7px 22px; }
/* Peel = span hiển thị (không phải nút riêng); cả dòng bắt click */
.cc-trow__in .cc-peel { pointer-events: none; }
.cc-trow__in:hover .cc-peel { background: var(--cc-cta-hover); }

/* Nút Show Coupon Code kiểu CF: cam + tab xé phải lộ ký tự mờ */
.cc-peel {
	flex: none; position: relative; display: inline-flex; align-items: center;
	background: var(--cc-cta); color: #fff; font-weight: 600; font-size: 15px;
	border-radius: var(--cc-radius-sm); padding: 12px 50px 12px 20px; border: 0;
	cursor: pointer; font-family: inherit; transition: background 0.15s; overflow: visible;
}
.cc-peel:hover { background: var(--cc-cta-hover); color: #fff; text-decoration: none; }
.cc-peel--deal { padding-right: 20px; background: var(--cc-primary); }
.cc-peel--deal:hover { background: var(--cc-primary-hover); }

.cc-popular {
	background: var(--cc-card); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow);
	padding: 24px 28px;
}
.cc-popular ul { columns: 5; column-gap: 30px; list-style: none; margin: 0; padding: 0; }
.cc-popular li { margin-bottom: 11px; break-inside: avoid; }
.cc-popular a { color: var(--cc-muted); font-size: 13px; }
.cc-popular a:hover { color: var(--cc-primary); }

.cc-faq details {
	background: var(--cc-card); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow);
	margin-bottom: 12px; padding: 0 22px;
}
.cc-faq summary {
	list-style: none; cursor: pointer; font-weight: 600; font-size: 14.5px;
	padding: 17px 30px 17px 0; position: relative;
}
.cc-faq summary::-webkit-details-marker { display: none; }
.cc-faq summary::after { content: "⌄"; position: absolute; right: 2px; top: 14px; color: var(--cc-primary); font-size: 16px; }
.cc-faq details[open] summary::after { content: "⌃"; }
.cc-faq p { color: var(--cc-muted); font-size: 13.5px; margin: 0 0 16px; line-height: 1.6; }

/* ==========================================================================
   8. Store page (giữ layout 1 cột; sẽ đồng bộ khung CF sâu hơn vòng sau)
   ========================================================================== */
.cc-breadcrumb { font-size: 12.5px; color: var(--cc-muted); padding: 14px 0 0; }
.cc-breadcrumb a { color: var(--cc-muted); }
.cc-breadcrumb a:hover { color: var(--cc-primary); }

.cc-store-head { display: flex; gap: 14px; align-items: center; padding: 14px 0 4px; }
.cc-store-head__logo {
	width: 56px; height: 56px; border-radius: var(--cc-radius); border: 1px solid var(--cc-line);
	background: var(--cc-card); display: grid; place-items: center; overflow: hidden; flex: none;
	font-weight: 800; font-size: 20px; color: var(--cc-primary);
}
.cc-store-head__logo img { width: 38px; height: 38px; object-fit: contain; }
.cc-store-head h1 { margin: 0 0 2px; }
.cc-store-head__meta { color: var(--cc-muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cc-store-head__visit { margin-left: auto; flex: none; }

.cc-stats {
	display: grid; grid-template-columns: repeat(4, 1fr);
	border-radius: var(--cc-radius); background: var(--cc-card); box-shadow: var(--cc-shadow);
	margin: 12px 0 18px; overflow: hidden;
}
.cc-stats > div { padding: 12px 14px; text-align: center; border-left: 1px solid var(--cc-line); }
.cc-stats > div:first-child { border-left: 0; }
.cc-stats b { display: block; font-family: var(--cc-font-h); font-size: 19px; color: var(--cc-ink); font-variant-numeric: tabular-nums; }
.cc-stats span { font-size: 12px; color: var(--cc-muted); font-weight: 600; }

.cc-store-main { max-width: 860px; }
.cc-list-date { color: var(--cc-muted); font-size: 13px; margin: 0 0 12px; }
.cc-similar { padding: 22px 0 8px; }
.cc-similar .cc-sec__h { font-size: 27px; margin: 16px 0 20px; }

/* Coupon component (markup plugin, class .rc-*) */
.rc-coupons { display: flex; flex-direction: column; gap: 14px; }
.rc-coupons__heading { margin: 4px 0 2px; }
.rc-coupon {
	display: flex; gap: 18px; align-items: center;
	border-radius: var(--cc-radius); background: var(--cc-card);
	padding: 18px 20px; box-shadow: var(--cc-shadow);
	transition: box-shadow 0.15s;
}
.rc-coupon:hover { box-shadow: var(--cc-shadow-lift); }
.rc-coupon__disc { flex: 0 0 76px; text-align: center; }
.rc-coupon__disc-n { display: block; font-family: var(--cc-font-h); font-size: 26px; font-weight: 600; color: var(--cc-ink); line-height: 1.05; }
.rc-coupon__disc-l { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--cc-muted); text-transform: uppercase; }
.rc-coupon__mid { flex: 1; min-width: 0; }
.rc-coupon__tags { display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: center; margin-bottom: 3px; }
.rc-coupon__tag {
	font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 3px;
	text-transform: uppercase; letter-spacing: 0.06em;
}
.rc-coupon__tag--excl { background: var(--cc-primary-soft); color: var(--cc-primary); }
.rc-coupon__tag--nocode { background: var(--cc-cta-soft); color: var(--cc-cta); }
.rc-coupon__title { font-family: var(--cc-font); font-size: 16px; margin: 0 0 3px; font-weight: 600; }
.rc-coupon__meta, .rc-coupon__social { font-size: 12px; color: var(--cc-muted); display: inline-block; margin-right: 12px; }
.rc-coupon__more { margin-top: 4px; font-size: 13px; }
.rc-coupon__more summary { cursor: pointer; color: var(--cc-primary); font-weight: 600; display: inline; }
.rc-coupon__desc { color: var(--cc-muted); padding: 5px 0 0; font-size: 13.5px; }
.rc-coupon__act { display: flex; align-items: center; flex: none; }
.rc-coupon__reveal {
	flex: none; position: relative; display: inline-flex; align-items: center;
	background: var(--cc-cta); color: #fff; font-weight: 600; font-size: 15px;
	border-radius: var(--cc-radius-sm); padding: 12px 20px; border: 0;
	cursor: pointer; transition: background 0.15s; min-width: 130px; justify-content: center;
}
.rc-coupon__reveal:hover { background: var(--cc-cta-hover); color: #fff; text-decoration: none; }
button.rc-coupon__reveal { padding-right: 50px; overflow: visible; }

/* Tab xé kiểu CouponFollow: lộ 2 ký tự CUỐI của code thật (teaser). Vé trắng
   viền gạch đứt nằm GỌN trong nút, cùng chiều cao, thẳng hàng (không xoay,
   không tràn mép, fix lệch 2026-07-19). */
.cc-peek {
	position: absolute; right: 3px; top: 3px; bottom: 3px; width: 34px;
	background: #fff; border: 1.5px dashed #C9BEB5; border-radius: 3px;
	color: var(--cc-ink); font-family: var(--cc-mono); font-weight: 700; font-size: 12.5px;
	letter-spacing: 0.03em; display: grid; place-items: center;
	pointer-events: none;
}
.rc-coupons__empty {
	display: flex; gap: 13px; align-items: flex-start;
	border-radius: var(--cc-radius); padding: 16px;
	color: var(--cc-muted); background: var(--cc-card); box-shadow: var(--cc-shadow);
}
.rc-coupons__empty .bi { font-size: 20px; color: var(--cc-primary); margin-top: 2px; }
.rc-coupons__empty strong { display: block; color: var(--cc-ink); }

/* Modal reveal code (markup server-render footer, flow 2 tab kiểu RetailCoupons) */
.cc-code-overlay {
	position: fixed; inset: 0; z-index: 100; display: none;
	place-items: center; padding: 20px; background: rgba(23, 37, 43, 0.55);
}
.cc-code-overlay.is-open { display: grid; }
html.cc-modal-open { overflow: hidden; }
.cc-code-modal {
	position: relative; background: #fff; border-radius: var(--cc-radius); max-width: 430px;
	width: 100%; padding: 30px 26px 24px; text-align: center; box-shadow: var(--cc-shadow-lift);
}
.cc-code-modal__x {
	position: absolute; top: 8px; right: 10px; border: 0; background: none;
	font-size: 24px; line-height: 1; cursor: pointer; color: var(--cc-muted); padding: 6px;
}
.cc-code-modal__store { font-family: var(--cc-font-h); font-weight: 700; font-size: 19px; margin-bottom: 4px; }
.cc-code-modal__label { color: var(--cc-muted); font-size: 13.5px; margin-bottom: 14px; }
.cc-code-modal__box {
	display: flex; align-items: stretch; margin-bottom: 14px;
	border: 1.6px dashed var(--cc-cta); border-radius: var(--cc-radius-sm); overflow: hidden;
}
.cc-code-modal__code {
	flex: 1; background: var(--cc-cta-soft); display: grid; place-items: center;
	font-family: var(--cc-mono); font-size: 18px; font-weight: 700;
	letter-spacing: 0.08em; color: var(--cc-ink); padding: 13px 8px; min-width: 0;
	overflow-wrap: anywhere;
}
.cc-code-modal__copy {
	border: 0; background: var(--cc-cta); color: #fff; font-weight: 700;
	padding: 0 20px; cursor: pointer; font-size: 14px;
}
.cc-code-modal__copy:hover { background: var(--cc-cta-hover); }
.cc-code-modal__copy.is-copied { background: var(--cc-success); }
.cc-code-modal__go { display: flex; width: 100%; margin-top: 4px; }
.cc-code-modal__disc { color: var(--cc-muted); font-size: 11.5px; margin: 14px 0 0; }
.cc-code-modal__disc a { color: var(--cc-primary); text-decoration: underline; font-weight: 600; }

/* Editorial */
.cc-prose { max-width: 76ch; }
.cc-prose h2 { margin-top: 1.5em; font-size: 20px; }
.cc-prose ul { padding-left: 20px; }
.cc-editorial ol { padding-left: 22px; }
.cc-editorial ol li, .cc-editorial ul li { margin-bottom: 7px; }
.cc-fixes {
	list-style: none; padding: 12px 16px; margin: 10px 0 0;
	background: var(--cc-primary-soft); border-left: 3px solid var(--cc-primary);
	border-radius: 0 var(--cc-radius-sm) var(--cc-radius-sm) 0;
}
.cc-fixes li { font-size: 14px; }
.cc-ways { list-style: none; padding-left: 0; }
.cc-ways li { padding-left: 24px; position: relative; }
.cc-ways li::before {
	content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px;
	background: var(--cc-success);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>') center / contain no-repeat;
}

/* ==========================================================================
   9. Archive / A-Z / categories / deals / search / pagination / 404
   ========================================================================== */
.cc-page-head { padding: 22px 0 6px; text-align: center; }
.cc-page-head .desc { color: var(--cc-muted); max-width: 76ch; font-size: 14px; margin-left: auto; margin-right: auto; }

/* Store page: toàn bộ flow gói trong cột giữa (khung CF 1 cột) */
.cc-store-wrap { max-width: 920px; margin: 0 auto; }
.cc-store-wrap .cc-store-grid { grid-template-columns: repeat(3, 1fr); }
.cc-store-main { max-width: none; }

/* Page tĩnh / bài thường: card trắng căn giữa */
.cc-article {
	max-width: 860px; margin: 24px auto 0; background: var(--cc-card);
	border-radius: var(--cc-radius); box-shadow: var(--cc-shadow);
	padding: 34px 44px 38px;
}
.cc-article .cc-page-head { padding: 0 0 8px; }
.cc-article h1 { font-size: 28px; }

.cc-store-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; padding: 0; margin: 0; list-style: none; }
.cc-store-grid--wide { grid-template-columns: repeat(4, 1fr); }
.cc-store-card {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
	border-radius: var(--cc-radius); padding: 16px 10px 13px;
	background: var(--cc-card); color: var(--cc-ink); box-shadow: var(--cc-shadow);
	transition: box-shadow 0.15s;
}
.cc-store-card:hover { box-shadow: var(--cc-shadow-lift); text-decoration: none; color: var(--cc-ink); }
.cc-store-card__logo { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; font-weight: 800; font-size: 18px; color: var(--cc-primary); }
.cc-store-card__logo img { width: 40px; height: 40px; object-fit: contain; }
.cc-store-card__name { font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.cc-store-card__meta { color: var(--cc-muted); font-size: 12px; }
.cc-store-grid--wide .cc-store-card { flex-direction: row; text-align: left; padding: 13px 14px; }
.cc-store-grid--wide .cc-store-card__logo { width: 40px; height: 40px; }

.cc-az-nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 10px; position: sticky; top: 0; background: var(--cc-bg); z-index: 10; }
.cc-az-group h2 { border-bottom: 2px solid var(--cc-primary-soft); padding-bottom: 4px; margin: 22px 0 10px; color: var(--cc-primary); }
.cc-az-list { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: 26px; }
.cc-az-list li { margin-bottom: 6px; break-inside: avoid; font-size: 14px; }
.cc-az-list .cnt { color: var(--cc-muted); font-size: 11.5px; margin-left: 5px; }
.cc-az-list a { color: var(--cc-ink); }
.cc-az-list a:hover { color: var(--cc-primary); }

.cc-cat-tree { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cc-panel { border-radius: var(--cc-radius); padding: 16px 18px; background: var(--cc-card); box-shadow: var(--cc-shadow); }
.cc-panel h3 { font-size: 15px; margin-bottom: 9px; }
.cc-panel ul { margin: 0; padding: 0; list-style: none; }
.cc-panel li { margin-bottom: 5px; font-size: 13.5px; }
.cc-cat-tree .cnt { color: var(--cc-muted); font-weight: 400; font-size: 12.5px; margin-left: 6px; }

.cc-deal-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 16px; }
.cc-deal-grid { list-style: none; margin: 0; padding: 0 0 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cc-deal-card a {
	display: flex; flex-direction: column; height: 100%;
	border-radius: var(--cc-radius); overflow: hidden;
	background: var(--cc-card); color: var(--cc-ink); box-shadow: var(--cc-shadow);
	transition: box-shadow 0.15s;
}
.cc-deal-card a:hover { box-shadow: var(--cc-shadow-lift); text-decoration: none; }
.cc-deal-card__img { display: block; aspect-ratio: 1 / 1; background: #fff; padding: 14px; }
.cc-deal-card__img img { width: 100%; height: 100%; object-fit: contain; }
.cc-deal-card__body { display: flex; flex-direction: column; gap: 5px; padding: 11px 13px 13px; border-top: 1px solid var(--cc-bg); }
.cc-deal-card__title { font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.cc-deal-card__price { font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.cc-deal-card__price b { font-size: 15.5px; }
.cc-deal-card__price s { color: var(--cc-muted); font-size: 12px; }
.cc-deal-card__price em { font-style: normal; color: var(--cc-success); font-weight: 700; font-size: 12px; }
.cc-deal-card__store { color: var(--cc-muted); font-size: 12px; }

.cc-pagination { display: flex; gap: 6px; flex-wrap: wrap; padding: 22px 0 34px; }
.cc-pagination .page-numbers {
	display: inline-block; min-width: 36px; text-align: center; padding: 7px 11px;
	border-radius: var(--cc-radius-sm); font-weight: 600; font-size: 13.5px;
	color: var(--cc-ink); background: var(--cc-card); box-shadow: var(--cc-shadow);
}
.cc-pagination .page-numbers.current { background: var(--cc-primary); color: #fff; }
.cc-pagination a.page-numbers:hover { color: var(--cc-primary); text-decoration: none; }

.cc-404 { text-align: center; padding: 60px 0; }
.cc-404 .code { font-family: var(--cc-font-h); font-size: 60px; font-weight: 700; color: var(--cc-primary); line-height: 1; }
.cc-404 .cc-search { margin: 16px auto; max-width: 420px; }
.cc-404 .cc-search input[type="search"] { background: var(--cc-card); color: var(--cc-ink); border-color: var(--cc-line); }

/* ==========================================================================
   10. Footer (dark teal, nhiều cột + About, khung CF)
   ========================================================================== */
.cc-footer { background: var(--cc-darker); color: #9DB8B3; margin-top: 40px; }
.cc-footer__in {
	max-width: var(--cc-container); margin: 0 auto;
	padding: 30px 24px 34px; display: grid;
	grid-template-columns: 1.1fr 1fr 1fr 1fr 1.4fr; gap: 26px; font-size: 12.5px;
}
.cc-footer h4 { color: #fff; font-size: 13px; margin: 0 0 12px; font-family: var(--cc-font); }
.cc-footer ul { list-style: none; margin: 0; padding: 0; }
.cc-footer li { margin-bottom: 8px; }
.cc-footer a { color: #9DB8B3; }
.cc-footer a:hover { color: #fff; }
.cc-footer__about { font-size: 11.5px; line-height: 1.6; margin: 0; }
.cc-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: center;
	color: #9DB8B3; font-size: 12px; padding: 13px 16px;
}

/* ==========================================================================
   11. Responsive (1080 / 900 / 760 / 480, bám mockup + bản mobile CF)
   ========================================================================== */
@media (max-width: 1080px) {
	.cc-store-grid { grid-template-columns: repeat(4, 1fr); }
	.cc-store-grid--wide { grid-template-columns: repeat(3, 1fr); }
	.cc-az-list { columns: 3; }
	.cc-deal-grid { grid-template-columns: repeat(3, 1fr); }
	.cc-cat-tree { grid-template-columns: repeat(2, 1fr); }
	.cc-popular ul { columns: 4; }
	.cc-search { flex-basis: 240px; }
}
@media (max-width: 900px) {
	.cc-sec__h { font-size: 24px; margin: 26px 0 18px; }
	.cc-carousel { grid-template-columns: 1fr; }
	.cc-lgrid { grid-template-columns: repeat(2, 1fr); }
	.cc-spot { grid-template-columns: 1fr; }
	.cc-spot__ph { order: -1; min-height: 190px; }
	.cc-spot__t { font-size: 22px; }
	.cc-popular ul { columns: 2; }
	.cc-footer__in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	.cc-header__in { min-height: 52px; gap: 12px; }
	.cc-nav, .cc-search { display: none; }
	.cc-mnav { display: block; margin-left: auto; }
	.cc-tsbar { text-align: center; }
	.cc-tsbar a { display: block; margin: 8px 0 0; }
	.cc-trow__in { gap: 12px; padding: 13px 14px; }
	.cc-trow__in::after { content: "›"; color: var(--cc-muted); font-size: 22px; }
	.cc-trow__logo { width: 52px; height: 42px; }
	.cc-trow__off, .cc-trow .cc-peel { display: none; }
	.cc-trow__bd b { font-size: 13.5px; }
	.cc-trow__saved { padding: 7px 14px; }
	.cc-store-grid { grid-template-columns: repeat(3, 1fr); }
	.cc-store-grid--wide { grid-template-columns: repeat(2, 1fr); }
	.cc-az-list { columns: 2; }
	.cc-deal-grid { grid-template-columns: repeat(2, 1fr); }
	.cc-cat-tree { grid-template-columns: 1fr; }
	.cc-stats { grid-template-columns: 1fr 1fr; }
	.cc-stats > div:nth-child(3) { border-left: 0; }
	.cc-stats > div:nth-child(n+3) { border-top: 1px solid var(--cc-line); }
	.rc-coupon { flex-wrap: wrap; }
	.rc-coupon__disc { flex-basis: 64px; text-align: left; }
	.rc-coupon__act { width: 100%; }
	.rc-coupon__reveal { width: 100%; }
	.cc-store-head { flex-wrap: wrap; }
	.cc-article { padding: 22px 18px 26px; }
	.cc-store-wrap .cc-store-grid { grid-template-columns: repeat(2, 1fr); }
	.cc-store-head__visit { margin-left: 0; width: 100%; }
	.cc-store-head__visit .cc-btn { width: 100%; }
}
@media (max-width: 480px) {
	.cc-container { padding: 0 14px; }
	.cc-lgrid { grid-template-columns: repeat(2, 1fr); }
	.cc-store-grid { grid-template-columns: repeat(2, 1fr); }
	.cc-store-grid--wide { grid-template-columns: 1fr; }
	.cc-az-list { columns: 1; }
	.cc-deal-grid { grid-template-columns: 1fr; }
	.cc-footer__in { grid-template-columns: 1fr; }
	.cc-popular ul { columns: 2; }
}