/*
Theme Name: Couptic
Theme URI: https://couptic.com/
Author: Couptic Editorial Team
Description: Theme toa soan cho Couptic. Light only, WCAG AA, font self-host, khong dependency ngoai.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: couptic
*/

/* ============================================================================
   CÁCH FILE NÀY ĐƯỢC SẮP

   Bốn tầng, đọc từ trên xuống, không nhảy cóc:

     1. Token      biến trong :root, tất cả mang tiền tố --cp-
     2. Base       reset nhẹ, chữ, liên kết, tiêu đề
     3. Primitive  khối bố cục dùng lại, tiền tố .cp-
     4. Component  từng khối giao diện, giữ class do plugin in ra
     5. Utility    vài lớp tiện, cố ý ít
     6. Responsive ba mốc 1080, 760, 480 theo CLAUDE.md mục F8

   Luật giữ file này khỏi phình:
   - Cấm hex trong component. Màu lấy từ token, thiếu màu thì thêm token mới.
   - Cấm đặt max-width bằng ch rải rác trong component. Cần trần đọc thì dùng
     .cp-measure. Cột main đã bị rail ghìm lại nên bản thân nó là trần rồi.
   - Cấm đẻ file CSS thứ hai. Trang nào thật sự có CSS riêng thì tách file và
     chỉ nạp đúng trang đó bằng điều kiện.
   ========================================================================== */


/* ============================================================================
   1. TOKEN
   ========================================================================== */

:root {
	/* --- Màu nền và mực ------------------------------------------------- */
	--cp-ground:        #ffffff;
	--cp-ground-sub:    #f4f5f6;
	--cp-ground-deep:   #1f2933;
	--cp-ink:           #1f2933;
	--cp-ink-body:      #33404b;   /* thân bài, nhạt hơn tiêu đề một nấc */
	--cp-ink-soft:      #5a6672;
	--cp-ink-faint:     #8b959e;
	--cp-ink-invert:    #ffffff;
	--cp-rule:          #e1e4e7;

	/* --- Màu hành động và trạng thái ------------------------------------
	   Chỉ dùng cho hành động thật và nhãn cảnh báo, không rải khắp trang
	   (CLAUDE.md mục G). */
	--cp-cta:           #c81e1e;
	--cp-cta-dark:      #a51818;
	--cp-live:          #146b45;
	--cp-warn:          #b45309;

	/* --- Màu trên nền tối ----------------------------------------------- */
	--cp-on-deep:       #d6dce1;
	--cp-on-deep-soft:  #93a0aa;
	--cp-on-deep-rule:  #33404b;

	/* --- Mặt chữ --------------------------------------------------------
	   Roboto cho giao diện và số liệu, Roboto Serif cho tiêu đề. Cả hai SIL
	   OFL, self-host trong assets/fonts. Stack Roboto chép đúng khai báo của
	   trang kết quả Google. */
	--cp-sans:  Roboto, Arial, sans-serif;
	--cp-serif: 'Roboto Serif', Georgia, serif;
	--cp-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* --- Thang cỡ chữ ---------------------------------------------------
	   Đặt tên theo vai trò chứ không theo số, để chọn cỡ là chọn vai trò. */
	--cp-fs-micro:    11.5px;
	--cp-fs-caption:  12.5px;
	--cp-fs-small:    13.5px;
	--cp-fs-ui:       14px;
	--cp-fs-body:     16px;
	--cp-fs-lead:     18px;
	--cp-fs-h3:       17.5px;
	--cp-fs-h2:       21px;
	--cp-fs-h2-lg:    24px;
	--cp-fs-h1:       33px;
	--cp-fs-display:  40px;

	--cp-lh-tight:    1.15;
	--cp-lh-snug:     1.35;
	--cp-lh-body:     1.6;
	--cp-lh-loose:    1.65;

	/* --- Nhịp dọc, gốc 4px ---------------------------------------------- */
	--cp-space-1:  4px;
	--cp-space-2:  8px;
	--cp-space-3:  12px;
	--cp-space-4:  16px;
	--cp-space-5:  24px;
	--cp-space-6:  32px;
	--cp-space-7:  48px;
	--cp-space-8:  64px;

	/* --- Khung ----------------------------------------------------------
	   --cp-measure CHỈ dùng cho trang bài viết, nơi không có rail ghìm cột.
	   Store page không cần vì rail đã làm việc đó. */
	--cp-wrap:     1180px;
	--cp-rail:     320px;
	--cp-gap:      44px;
	--cp-measure:  720px;
	--cp-pad-x:    20px;

	/* --- Nét và bo ------------------------------------------------------
	   Bo nhỏ và phẳng là có chủ ý: bo lớn cộng bóng mềm ở mọi thẻ là khuôn
	   hình đang bị nhận diện là trang do máy dựng (CLAUDE.md mục G). */
	/* Lớp phủ sáng dùng trên nền màu hành động, ví dụ ô hai ký tự cuối của mã. */
	--cp-on-cta-veil: rgba(255, 255, 255, .16);
	--cp-on-cta-rule: rgba(255, 255, 255, .6);

	--cp-rule-w:   1px;
	--cp-radius:   3px;
	--cp-radius-pill: 999px;
}


/* ============================================================================
   2. BASE
   ========================================================================== */

/* @fonts:start
   Khối này là bản dùng file. Script dựng mockup thay nguyên khối bằng bản data
   URI, vì artifact chặn mọi request ra ngoài. Sửa ở đây thì sửa cả hai. Đã có
   lần chèn CSS làm mất dấu đóng của khối này khiến cả hai mặt chữ không nạp và
   trang rơi về Arial, nên đừng chèn gì vào giữa. */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/roboto-var.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/roboto-var-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto Serif';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/roboto-serif-var.woff2') format('woff2');
}
/* @fonts:end */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--cp-ground-sub);
	color: var(--cp-ink);
	font-family: var(--cp-sans);
	font-size: var(--cp-fs-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--cp-serif);
	font-weight: 700;
	/*
	 * pretty chứ KHÔNG phải balance. Đo thật ngày 2026-08-17: balance chia đều
	 * độ dài các dòng nên nó bỏ trống bên phải, tiêu đề h1 40px chỉ dùng khoảng
	 * bảy phần mười bề ngang cột và đọc như bị ngắt tuỳ tiện. pretty giữ các
	 * dòng trên lấp đầy, chỉ can thiệp dòng cuối để không còn một từ đứng lẻ.
	 * Trình duyệt chưa hỗ trợ pretty thì rơi về cách ngắt dòng thường, không
	 * hỏng gì.
	 */
	text-wrap: pretty;
}

h1 { font-size: var(--cp-fs-h1);  line-height: var(--cp-lh-tight); }
h2 { font-size: var(--cp-fs-h2);  line-height: var(--cp-lh-snug); }
h3 { font-size: var(--cp-fs-h3);  line-height: var(--cp-lh-snug); }
h4 { font-size: var(--cp-fs-ui);  line-height: var(--cp-lh-snug); }

p { margin: 0; }

a { color: inherit; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
	outline: 2px solid var(--cp-ground-deep);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cp-fs-ui);
}

th,
td {
	padding: var(--cp-space-3) var(--cp-space-4);
	text-align: left;
	border-bottom: var(--cp-rule-w) solid var(--cp-rule);
}

th {
	background: var(--cp-ground-sub);
	color: var(--cp-ink-soft);
	font-size: var(--cp-fs-caption);
	letter-spacing: .06em;
	text-transform: uppercase;
}

tbody tr:last-child td { border-bottom: 0; }


/*
 * Thuộc tính hidden phải thắng mọi display của component.
 *
 * Trình duyệt chỉ có [hidden] { display: none } trong stylesheet mặc định, mà
 * luật đó thua bất kỳ luật nào của mình đặt display trên một class. Bộ lọc tab
 * ẩn card bằng cách đặt card.hidden = true, nhưng .cp-offer có display: grid
 * nên card bị đánh dấu ẩn mà vẫn hiện nguyên: bấm tab nào cũng ra đủ 48 offer,
 * đúng như trang magazines đang bị. Lỗi này im lặng vì DOM báo là đã ẩn.
 *
 * !important ở đây có lý do chứ không phải chữa cháy: hidden là khai báo ngữ
 * nghĩa "phần tử này không tồn tại với người đọc", không component nào được cãi.
 */
[hidden] { display: none !important; }

/* ============================================================================
   3. PRIMITIVE
   Khối bố cục dùng lại. Đây là chỗ duy nhất được đặt bề ngang và nhịp dọc.
   ========================================================================== */

/* Dải nội dung, canh giữa, đệm hai bên. */
.cp-wrap {
	max-width: var(--cp-wrap);
	margin-inline: auto;
	padding-inline: var(--cp-pad-x);
}

/* Bố cục lệch: cột chính cộng rail phụ. Không phải mọi thứ căn giữa. */
.cp-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--cp-rail);
	gap: var(--cp-gap);
	padding-block: var(--cp-space-6) var(--cp-space-7);
}

/* Bảng có min-width nằm trong cột grid sẽ kéo cột phình theo min-content và
   làm cả trang tràn ngang ở mobile. Dòng này chặn việc đó. */
.cp-cols > * { min-width: 0; }

/* Nhịp dọc giữa các con, thay cho margin-top rải rác trong component. */
.cp-stack > * + * { margin-top: var(--cp-space-5); }
.cp-stack--tight > * + * { margin-top: var(--cp-space-3); }
.cp-stack--loose > * + * { margin-top: var(--cp-space-6); }

/* Trần đọc. CHỈ cho trang không có rail, ví dụ trang bài viết. Store page
   không dùng vì rail đã ghìm cột chính lại rồi. */
.cp-measure {
	max-width: var(--cp-measure);
	margin-inline: auto;
}

/* Khối rộng (bảng số liệu, sơ đồ) cuộn ngang trong khung của nó, không đẩy
   trang tràn. */
.cp-scroll-x {
	overflow-x: auto;
	border: var(--cp-rule-w) solid var(--cp-rule);
}

/* Đầu mục có đường kẻ đậm, kiểu báo. */
.cp-section-head {
	display: flex;
	align-items: baseline;
	gap: var(--cp-space-3);
	margin: var(--cp-space-6) 0 var(--cp-space-4);
	padding-bottom: var(--cp-space-2);
	border-bottom: 2px solid var(--cp-ground-deep);
}

.cp-section-head > a {
	margin-left: auto;
	color: var(--cp-cta);
	font-size: var(--cp-fs-small);
	font-weight: 600;
	text-decoration: none;
}

/* Khối phẳng có viền mảnh, thay cho thẻ nổi bo tròn đổ bóng. */
.cp-panel {
	border: var(--cp-rule-w) solid var(--cp-rule);
	background: var(--cp-ground);
}

/* Danh sách trong rail: dòng hai tầng, tiêu đề rồi dòng phụ mang số. Dùng cho
   khối sắp hết hạn và khối xếp hạng ngành. Kẻ mảnh phân dòng thay cho thẻ nổi,
   theo quy tắc G. */
.cp-raillist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-raillist li {
	padding: var(--cp-space-3) var(--cp-space-4);
	border-bottom: var(--cp-rule-w) solid var(--cp-rule);
	font-size: var(--cp-fs-small);
	line-height: 1.4;
}

.cp-raillist li:last-child { border-bottom: 0; }

.cp-raillist a { color: var(--cp-ink); text-decoration: none; }
.cp-raillist a:hover { text-decoration: underline; }

.cp-raillist__meta {
	display: block;
	margin-top: var(--cp-space-1);
	font-size: var(--cp-fs-ui);
	color: var(--cp-ink-faint);
}

.cp-raillist__meta b {
	color: var(--cp-ink-soft);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Xếp hạng: đánh số để đọc ra thứ tự, vì đây thật sự là một chuỗi có thứ tự. */
.cp-raillist--rank { counter-reset: cprank; }

.cp-raillist--rank li::before {
	counter-increment: cprank;
	content: counter(cprank) ".";
	margin-right: var(--cp-space-2);
	color: var(--cp-ink-faint);
	font-variant-numeric: tabular-nums;
}

.cp-raillist__foot {
	padding: var(--cp-space-3) var(--cp-space-4);
	border-top: var(--cp-rule-w) solid var(--cp-rule);
	font-size: var(--cp-fs-ui);
}

.cp-panel__head {
	padding: var(--cp-space-3) var(--cp-space-4);
	border-bottom: var(--cp-rule-w) solid var(--cp-rule);
	background: var(--cp-ground-sub);
	font-family: var(--cp-serif);
	font-size: 15px;
	font-weight: 700;
}

.cp-panel__body { padding: var(--cp-space-4); }


/* ============================================================================
   4. COMPONENT

   Chia hai nhóm:
     4a. Khối do plugin rc-core in ra. Tên class là hợp đồng, đổi ở đây phải đổi
         cả trong templates/ của plugin.
     4b. Khối do template của theme in ra.
   ========================================================================== */

/* --- 4a.1 Nút -------------------------------------------------------------
   Chỉ hai dáng: nút hành động thật (đỏ) và nút phụ (viền mảnh). Màu nhấn không
   rải ra chỗ khác. */

.cp-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--cp-space-2);
	padding: var(--cp-space-3) var(--cp-space-4);
	border: var(--cp-rule-w) solid transparent;
	border-radius: var(--cp-radius);
	background: var(--cp-cta);
	color: var(--cp-ink-invert);
	font: inherit;
	font-size: var(--cp-fs-ui);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.cp-btn:hover { background: var(--cp-cta-dark); }

.cp-btn--ghost {
	border-color: var(--cp-rule);
	background: var(--cp-ground-sub);
	color: var(--cp-ink-soft);
	font-size: var(--cp-fs-small);
}

.cp-btn--ghost:hover {
	border-color: var(--cp-ground-deep);
	background: var(--cp-ground-sub);
	color: var(--cp-ink);
}

/* --- 4a.2 Thanh tab đếm --------------------------------------------------- */

/*
 * Hàng tab lọc danh sách BÊN DƯỚI nó, nên nó phải dính vào danh sách chứ không
 * dính vào dải số liệu bên trên. Đo ở trang magazines trước khi sửa: cách dải
 * số liệu 0px, cách card offer đầu tiên 8px, tức nó đang nằm sát cái nó không
 * điều khiển và rời cái nó điều khiển.
 */
.cp-offers__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cp-space-2);
	margin-top: var(--cp-space-5);
	margin-bottom: var(--cp-space-3);
}

.cp-offers__tab {
	padding: var(--cp-space-2) var(--cp-space-3);
	border: var(--cp-rule-w) solid var(--cp-rule);
	border-radius: var(--cp-radius-pill);
	background: var(--cp-ground);
	color: var(--cp-ink);
	font: inherit;
	font-size: var(--cp-fs-small);
	cursor: pointer;
}

.cp-offers__tab.is-on {
	border-color: var(--cp-ground-deep);
	background: var(--cp-ground-deep);
	color: var(--cp-ink-invert);
}

.cp-offers__count {
	margin-left: var(--cp-space-1);
	font-variant-numeric: tabular-nums;
	opacity: .75;
}

.cp-offers__more { margin-top: var(--cp-space-4); }

.cp-offers__empty {
	padding: var(--cp-space-5);
	border: var(--cp-rule-w) solid var(--cp-rule);
	background: var(--cp-ground-sub);
	font-size: var(--cp-fs-ui);
	color: var(--cp-ink-soft);
}

.cp-offers__empty strong { display: block; color: var(--cp-ink); }

/* --- 4a.3 Card offer ------------------------------------------------------
   Ba cột: ô mức lợi, phần chữ, nút. Đường kẻ mảnh phân hàng thay cho thẻ nổi
   bo tròn đổ bóng. */

.cp-offer {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr) auto;
	gap: var(--cp-space-4);
	align-items: center;
	padding: var(--cp-space-4) 0;
	border-bottom: var(--cp-rule-w) solid var(--cp-rule);
}

.cp-offer__disc {
	display: grid;
	place-content: center;
	width: 74px;
	min-height: 56px;
	padding: var(--cp-space-2);
	border: var(--cp-rule-w) solid var(--cp-rule);
	background: var(--cp-ground-sub);
	text-align: center;
}

.cp-offer__disc-n {
	display: block;
	font-family: var(--cp-serif);
	font-size: var(--cp-fs-lead);
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--cp-live);
}

.cp-offer__disc-l {
	display: block;
	font-size: var(--cp-fs-micro);
	letter-spacing: .06em;
	color: var(--cp-ink-faint);
}

.cp-offer__lab {
	font-size: var(--cp-fs-micro);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--cp-ink-faint);
}

/* Deal phải nói ngay là không cần mã, không để người đọc bấm rồi mới biết. */
.cp-offer__lab--deal { color: var(--cp-live); font-weight: 600; }

.cp-offer__title {
	margin-top: var(--cp-space-1);
	font-family: var(--cp-sans);
	font-size: 15.5px;
	font-weight: 600;
	line-height: var(--cp-lh-snug);
}

.cp-offer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cp-space-1) var(--cp-space-3);
	margin-top: var(--cp-space-2);
	font-size: var(--cp-fs-caption);
	color: var(--cp-ink-soft);
}

.cp-offer__verified { color: var(--cp-live); font-weight: 600; }
.cp-offer__left { color: var(--cp-ink-soft); }
.cp-offer__left.is-soon { color: var(--cp-warn); font-weight: 600; }
.cp-offer__dead { color: var(--cp-ink-faint); font-weight: 600; }

.cp-vok {
	display: inline-block;
	width: 6px;
	height: 10px;
	border: solid var(--cp-live);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	vertical-align: -1px;
}

.cp-offer__more {
	margin-top: var(--cp-space-2);
	font-size: var(--cp-fs-caption);
}

.cp-offer__more summary {
	cursor: pointer;
	color: var(--cp-ink-soft);
}

.cp-offer__desc {
	margin-top: var(--cp-space-2);
	color: var(--cp-ink-soft);
}

.cp-offer__reveal,
.cp-offer__get {
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	border: 0;
	border-radius: var(--cp-radius);
	background: var(--cp-cta);
	color: var(--cp-ink-invert);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

.cp-offer__reveal:hover,
.cp-offer__get:hover { background: var(--cp-cta-dark); }

.cp-offer__reveal-t,
.cp-offer__get-t {
	padding: var(--cp-space-3) var(--cp-space-4);
	font-size: var(--cp-fs-ui);
	font-weight: 600;
	white-space: nowrap;
}

/* Hai ký tự cuối của mã: đủ để thấy đây là mã thật, không đủ để dùng. */
.cp-peek {
	padding: var(--cp-space-3) var(--cp-space-3);
	border-left: 1px dashed var(--cp-on-cta-rule);
	background: var(--cp-on-cta-veil);
	font-family: var(--cp-mono);
	font-size: var(--cp-fs-small);
}

/* Offer đã gỡ: cùng khung, hạ sắc độ, nút chuyển sang dáng phụ. */
.cp-offer--dead .cp-offer__disc { background: var(--cp-ground); color: var(--cp-ink-faint); }
.cp-offer--dead .cp-offer__disc-n { color: var(--cp-ink-faint); }
.cp-offer--dead .cp-offer__title { color: var(--cp-ink-soft); }

.cp-offer__reveal--dead {
	border: var(--cp-rule-w) solid var(--cp-rule);
	background: var(--cp-ground-sub);
	color: var(--cp-ink-soft);
}

.cp-offer__reveal--dead:hover {
	border-color: var(--cp-ground-deep);
	background: var(--cp-ground-sub);
	color: var(--cp-ink);
}

/* Dòng phụ trên card khi danh sách trộn nhiều store (trang chủ, trang danh mục). */
.cp-offer__store { font-weight: 600; color: var(--cp-ink-soft); }

/* Tên miền trong card là link, nhưng gạch chân cả cột thì dòng meta trông như
   một hàng rào. Chỉ gạch chân khi rê chuột. */
.cp-offer__store a { text-decoration: none; }
.cp-offer__store a:hover { text-decoration: underline; }

/* Tiêu đề offer và tiêu đề thẻ bài cũng vậy: gạch chân khi rê, không mặc định. */
.cp-offer__title a,
.cp-card h3 a,
.cp-guide h3 a,
.cp-lead h1 a { text-decoration: none; }

/* ---------------------------------------------------------------- hộp mã
   Bật lên sau khi bấm "Show code". Giữ phẳng và mảnh như phần còn lại của site:
   một khung viền một điểm ảnh, bo nhỏ, không đổ bóng mềm, vì bo lớn cộng bóng ở
   mọi thứ là khuôn hình quy tắc G cấm. */

.cp-code {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: var(--cp-space-4);
}

.cp-code__veil {
	position: absolute;
	inset: 0;
	background: rgba(31, 41, 51, .55);
}

.cp-code__box {
	position: relative;
	width: min(420px, 100%);
	padding: var(--cp-space-6) var(--cp-space-5) var(--cp-space-5);
	border: var(--cp-rule-w) solid var(--cp-rule);
	border-radius: var(--cp-radius);
	background: var(--cp-ground);
	text-align: center;
}

.cp-code__x {
	position: absolute;
	top: var(--cp-space-2);
	right: var(--cp-space-2);
	padding: var(--cp-space-1) var(--cp-space-2);
	border: 0;
	background: none;
	color: var(--cp-ink-faint);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.cp-code__x:hover { color: var(--cp-ink); }

.cp-code__store {
	font-family: var(--cp-serif);
	font-size: var(--cp-fs-h2);
	font-weight: 700;
}

.cp-code__offer {
	margin-top: var(--cp-space-2);
	color: var(--cp-ink-soft);
	font-size: var(--cp-fs-small);
}

/* Ô mã: nét đứt để đọc ra ngay đây là thứ cần chép, không phải một cái nút. */
.cp-code__val {
	display: flex;
	align-items: stretch;
	margin: var(--cp-space-5) 0 var(--cp-space-3);
	border: 1px dashed var(--cp-ink-faint);
	border-radius: var(--cp-radius);
	overflow: hidden;
}

.cp-code__code {
	flex: 1 1 auto;
	padding: var(--cp-space-3);
	background: var(--cp-ground-sub);
	font-family: var(--cp-mono);
	font-size: var(--cp-fs-lead);
	letter-spacing: .04em;
	word-break: break-all;
}

.cp-code__copy {
	flex: 0 0 auto;
	padding: 0 var(--cp-space-4);
	border: 0;
	background: var(--cp-cta);
	color: var(--cp-ink-invert);
	font: inherit;
	font-size: var(--cp-fs-ui);
	font-weight: 600;
	cursor: pointer;
}

.cp-code__copy:hover { background: var(--cp-cta-dark); }
.cp-code__copy.is-done { background: var(--cp-live); }

.cp-code__note {
	color: var(--cp-ink-soft);
	font-size: var(--cp-fs-small);
}

/* Công bố hoa hồng trong hộp mã. Chữ nhỏ và nhạt hơn phần còn lại, nhưng vẫn
   đọc được: đây là lời công bố, không phải chú thích trang trí. Dấu mũi tên đặt
   bằng ::after để chữ trong thẻ a đúng là "Learn more". */
.cp-code__disc {
	margin-top: var(--cp-space-3);
	font-size: var(--cp-fs-caption);
	line-height: 1.5;
	color: var(--cp-ink-soft);
}

.cp-code__disc a {
	color: var(--cp-ink);
	text-decoration: underline;
}

.cp-code__disc a::after {
	content: ' \203A';
	text-decoration: none;
}

.cp-code__go {
	display: inline-block;
	margin-top: var(--cp-space-3);
	color: var(--cp-ink-soft);
	font-size: var(--cp-fs-ui);
}

/* Không có mã: ô mã và nút chép bỏ đi, chỉ còn lời dẫn sang cửa hàng. */
.cp-code--nocode .cp-code__val { display: none; }

/* Bài lead có ảnh: chữ bên trái, ảnh bên phải. Tỉ lệ lệch chứ không chia đôi
   đều, để trọng tâm vẫn nằm ở chữ. Ảnh là trang trí đi kèm tiêu đề nên thẻ a bọc
   nó mang aria-hidden, người dùng bàn phím không phải bấm qua hai lần cùng một
   đích. */
.cp-lead--art {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: var(--cp-space-5);
	align-items: start;
}

.cp-lead__media { margin: 0; }

.cp-lead__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}


.cp-offer__title a:hover,
.cp-card h3 a:hover,
.cp-guide h3 a:hover,
.cp-lead h1 a:hover { text-decoration: underline; }

/* Wordmark là link về trang chủ, không phải chữ có gạch chân. */
.cp-wordmark a { text-decoration: none; }

/* Nhãn tính chất offer: sitewide, first order, ngưỡng chi tiêu. */
.cp-offer__tag { color: var(--cp-ink-soft); }
.cp-offer__ran { color: var(--cp-ink-faint); }

/* --- 4b.x Ảnh -------------------------------------------------------------
   Site KHÔNG sinh kích thước phụ: acms-img-webp chặn mọi intermediate size và
   hạ trần về 1400px, nên mỗi ảnh đúng một file webp. Vì vậy markup phải tự giữ
   tỉ lệ bằng aspect-ratio cộng object-fit và luôn khai width với height, không
   dựa vào srcset nhiều cỡ như theme WordPress thường làm.

   Ảnh chỉ dùng cho bài hướng dẫn (user chốt 2026-08-17). Bài số liệu dùng bảng
   và biểu đồ, vì một tấm ảnh stock không thêm thông tin nào cho bài data. */

.cp-media {
	display: block;
	margin: 0;
	background: var(--cp-ground-sub);
}

.cp-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.cp-media--square img { aspect-ratio: 1 / 1; }
.cp-media--wide img { aspect-ratio: 21 / 9; }

.cp-media figcaption {
	margin-top: var(--cp-space-2);
	font-size: var(--cp-fs-caption);
	color: var(--cp-ink-faint);
}

.cp-media figcaption b { color: var(--cp-ink-soft); font-weight: 600; }

/* Mục lục của bài hướng dẫn. Chỉ in khi bài có từ ba mục trở lên. */
.cp-toc {
	padding: var(--cp-space-4);
	border: var(--cp-rule-w) solid var(--cp-rule);
	background: var(--cp-ground-sub);
}

.cp-toc__title {
	font-family: var(--cp-sans);
	font-size: var(--cp-fs-micro);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cp-ink-faint);
}

.cp-toc ol {
	margin: var(--cp-space-2) 0 0;
	padding-left: var(--cp-space-5);
	font-size: var(--cp-fs-small);
}

.cp-toc li { margin-top: var(--cp-space-1); }
.cp-toc a { color: var(--cp-ink-body); text-decoration: none; }
.cp-toc a:hover { text-decoration: underline; }

/* Biểu đồ thanh ngang, dựng bằng CSS chứ không nạp thư viện. Bề rộng thanh
   truyền qua biến --cp-bar để markup không phải mang style nội tuyến. */
.cp-chart {
	margin-top: var(--cp-space-4);
	border: var(--cp-rule-w) solid var(--cp-rule);
}

.cp-chart__row {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr) 64px;
	gap: var(--cp-space-3);
	align-items: center;
	padding: var(--cp-space-2) var(--cp-space-4);
	border-bottom: var(--cp-rule-w) solid var(--cp-rule);
	font-size: var(--cp-fs-small);
}

.cp-chart__row:last-child { border-bottom: 0; }
.cp-chart__label { color: var(--cp-ink-body); }

.cp-chart__track { background: var(--cp-ground-sub); }

.cp-chart__bar {
	display: block;
	width: 0;
	height: 14px;
	background: var(--cp-ground-deep);
}

/*
 * Bề rộng thanh đi bằng thang class chứ không bằng biến CSS đặt trong thuộc
 * tính style: mục F1 cấm style nội tuyến trên mọi thứ người đọc nhìn thấy, và
 * một biến --cp-bar thì bắt buộc phải đặt ở đó. Hai mươi mức, bước 5%, đủ mịn
 * cho biểu đồ thanh mà không đẻ ra hàng trăm dòng. Template làm tròn tỉ lệ so
 * với giá trị lớn nhất về bội của 5.
 */
.cp-chart__bar.is-5 { width: 5%; }
.cp-chart__bar.is-10 { width: 10%; }
.cp-chart__bar.is-15 { width: 15%; }
.cp-chart__bar.is-20 { width: 20%; }
.cp-chart__bar.is-25 { width: 25%; }
.cp-chart__bar.is-30 { width: 30%; }
.cp-chart__bar.is-35 { width: 35%; }
.cp-chart__bar.is-40 { width: 40%; }
.cp-chart__bar.is-45 { width: 45%; }
.cp-chart__bar.is-50 { width: 50%; }
.cp-chart__bar.is-55 { width: 55%; }
.cp-chart__bar.is-60 { width: 60%; }
.cp-chart__bar.is-65 { width: 65%; }
.cp-chart__bar.is-70 { width: 70%; }
.cp-chart__bar.is-75 { width: 75%; }
.cp-chart__bar.is-80 { width: 80%; }
.cp-chart__bar.is-85 { width: 85%; }
.cp-chart__bar.is-90 { width: 90%; }
.cp-chart__bar.is-95 { width: 95%; }
.cp-chart__bar.is-100 { width: 100%; }

.cp-chart__row:first-child .cp-chart__bar { background: var(--cp-cta); }

.cp-chart__value {
	font-family: var(--cp-mono);
	font-size: var(--cp-fs-caption);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.cp-chart__note {
	padding: var(--cp-space-2) var(--cp-space-4);
	border-top: var(--cp-rule-w) solid var(--cp-rule);
	background: var(--cp-ground-sub);
	font-size: var(--cp-fs-micro);
	color: var(--cp-ink-faint);
}

/* --- 4b.x Link mạng xã hội của retailer ---------------------------------- */

.cp-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cp-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-social a {
	display: inline-block;
	padding: var(--cp-space-1) var(--cp-space-3);
	border: var(--cp-rule-w) solid var(--cp-rule);
	border-radius: var(--cp-radius);
	background: var(--cp-ground);
	color: var(--cp-ink);
	font-size: var(--cp-fs-small);
	text-decoration: none;
}

.cp-social a:hover { border-color: var(--cp-ground-deep); }

.cp-social__note {
	margin-top: var(--cp-space-2);
	font-size: var(--cp-fs-micro);
	color: var(--cp-ink-faint);
}

/* Rail: cột phụ bên phải, các khối cách nhau bằng .cp-stack. */
.cp-rail > * { min-width: 0; }

/* Nút đã lộ mã: đổi sang dáng đã dùng để người đọc thấy trạng thái đã đổi. */
.cp-offer__reveal.is-revealed { background: var(--cp-live); }
.cp-offer__reveal.is-failed { background: var(--cp-ink-soft); }

/* --- 4a.7 Các bước dùng mã và hỏi đáp ------------------------------------
   Số thứ tự ở đây là số thứ tự THẬT, các bước phải làm theo đúng thứ tự, nên
   nó không rơi vào cái mà mục G cấm (đánh số 01 02 03 cho thứ không có trình
   tự). Hỏi đáp gấp mở để không đẩy phần dưới trang đi quá xa. */

.cp-howto__list {
	margin: var(--cp-space-4) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: cp-step;
}

.cp-howto__step {
	position: relative;
	counter-increment: cp-step;
	padding: var(--cp-space-3) 0 var(--cp-space-3) var(--cp-space-7);
	border-bottom: var(--cp-rule-w) solid var(--cp-rule);
}

.cp-howto__step:last-child { border-bottom: 0; }

.cp-howto__step::before {
	content: counter(cp-step);
	position: absolute;
	left: 0;
	top: var(--cp-space-3);
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: var(--cp-rule-w) solid var(--cp-rule);
	border-radius: 50%;
	background: var(--cp-ground-sub);
	font-family: var(--cp-mono);
	font-size: var(--cp-fs-caption);
	color: var(--cp-ink-soft);
}

.cp-howto__step b { font-size: var(--cp-fs-ui); }

.cp-howto__step p {
	margin-top: var(--cp-space-1);
	font-size: var(--cp-fs-ui);
	line-height: var(--cp-lh-body);
	color: var(--cp-ink-body);
}

.cp-faq__item {
	padding: var(--cp-space-3) 0;
	border-bottom: var(--cp-rule-w) solid var(--cp-rule);
}

.cp-faq__item:last-child { border-bottom: 0; }

.cp-faq__item summary {
	cursor: pointer;
	font-family: var(--cp-serif);
	font-size: var(--cp-fs-h3);
	font-weight: 700;
	line-height: var(--cp-lh-snug);
}

.cp-faq__item p {
	margin-top: var(--cp-space-2);
	font-size: var(--cp-fs-body);
	line-height: var(--cp-lh-body);
	color: var(--cp-ink-body);
}

/* --- 4a.8 Dải tóm tắt nhanh -----------------------------------------------
   Đường kẻ dọc mảnh phân ô, nền phẳng, không thẻ nổi. Số ô co theo dữ liệu
   thật nên grid dùng auto-fit chứ không đóng cứng bốn cột. */

.cp-highlights {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin-top: var(--cp-space-4);
	border: var(--cp-rule-w) solid var(--cp-rule);
	background: var(--cp-ground-sub);
}

.cp-highlights__item {
	padding: var(--cp-space-3) var(--cp-space-4);
	border-right: var(--cp-rule-w) solid var(--cp-rule);
}

.cp-highlights__item:last-child { border-right: 0; }

.cp-highlights__n {
	display: block;
	font-family: var(--cp-serif);
	font-size: var(--cp-fs-h2);
	font-variant-numeric: tabular-nums;
}

.cp-highlights__l {
	display: block;
	font-size: var(--cp-fs-caption);
	color: var(--cp-ink-soft);
}

@media (max-width: 480px) {
	.cp-highlights { grid-template-columns: 1fr 1fr; }
	.cp-highlights__item:nth-child(2n) { border-right: 0; }
	.cp-highlights__item:nth-child(-n+2) { border-bottom: var(--cp-rule-w) solid var(--cp-rule); }
}

/* --- 4a.4 Nhật ký kiểm --------------------------------------------------- */

.cp-log__list {
	margin: var(--cp-space-4) 0 0;
	padding: 0;
	list-style: none;
	border: var(--cp-rule-w) solid var(--cp-rule);
}

.cp-log__row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: var(--cp-space-4);
	padding: var(--cp-space-3) var(--cp-space-4);
	border-bottom: var(--cp-rule-w) solid var(--cp-rule);
}

.cp-log__row:last-child { border-bottom: 0; }

.cp-log__when {
	font-family: var(--cp-mono);
	font-size: var(--cp-fs-caption);
	color: var(--cp-ink-faint);
}

.cp-log__what { font-size: var(--cp-fs-ui); color: var(--cp-ink-body); }

/* --- 4a.5 Offer đã gỡ ---------------------------------------------------- */

.cp-retired__note {
	margin-top: var(--cp-space-3);
	font-size: var(--cp-fs-small);
	color: var(--cp-ink-soft);
}

.cp-retired__list { margin-top: var(--cp-space-2); }

/* --- 4a.6 Hộp phương pháp ------------------------------------------------
   Kẻ dọc màu nhấn ở đây là có lý do: đây là chỗ nói về độ tin cậy, không phải
   trang trí. Không nhân mẫu này ra các khối khác. */

.cp-method {
	margin-top: var(--cp-space-6);
	padding: var(--cp-space-4) var(--cp-space-5);
	border-left: 3px solid var(--cp-cta);
	background: var(--cp-ground-sub);
}

.cp-method__title {
	font-family: var(--cp-sans);
	font-size: var(--cp-fs-ui);
	font-weight: 700;
}

.cp-method__body {
	margin-top: var(--cp-space-2);
	font-size: var(--cp-fs-ui);
	line-height: var(--cp-lh-body);
	color: var(--cp-ink-soft);
}

.cp-method__foot {
	margin-top: var(--cp-space-3);
	font-size: var(--cp-fs-small);
}

.cp-method__link { color: var(--cp-cta); font-weight: 600; }
.cp-method__byline { color: var(--cp-ink-faint); }

/* ---------------------------------------------------------------------------
   4b. Khối của theme
   ------------------------------------------------------------------------ */

/* Dải công bố hoa hồng, ngay trên đầu trang. */
.cp-ftc {
	background: var(--cp-ground-deep);
	color: var(--cp-on-deep);
	font-size: var(--cp-fs-caption);
}

.cp-ftc .cp-wrap { padding-block: 7px; }
.cp-ftc a { color: var(--cp-ink-invert); }

.cp-masthead { border-bottom: var(--cp-rule-w) solid var(--cp-rule); }

.cp-masthead .cp-wrap {
	display: flex;
	align-items: center;
	gap: var(--cp-space-5);
	padding-block: var(--cp-space-4);
}

.cp-wordmark {
	font-family: var(--cp-serif);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
}

.cp-wordmark i { font-style: normal; color: var(--cp-cta); }

.cp-tagline {
	margin-top: var(--cp-space-1);
	font-size: var(--cp-fs-caption);
	letter-spacing: .02em;
	color: var(--cp-ink-soft);
}

.cp-masthead__meta {
	margin-left: auto;
	text-align: right;
	font-size: var(--cp-fs-caption);
	color: var(--cp-ink-soft);
}

.cp-statline { margin-top: var(--cp-space-2); }
.cp-statline b { color: var(--cp-ink); font-variant-numeric: tabular-nums; }

.cp-search {
	display: flex;
	overflow: hidden;
	border: var(--cp-rule-w) solid var(--cp-rule);
	border-radius: var(--cp-radius);
}

/* flex: 1 1 auto cho o nhap, khong de no dung yen o 190px.
   .cp-search la flex cap block nen no rong bang .cp-masthead__meta, tuc bang
   dong so lieu ben duoi (287px). Ruot cu chi chiem 255px, con 30px trong nam
   trong vien, nhin nhu hop hong. Cho o nhap gian ra thi hai canh hop trung
   dung hai canh dong so lieu, va vung go rong them 30px. */
.cp-search input {
	flex: 1 1 auto;
	min-width: 0;
	width: 190px;
	padding: var(--cp-space-2) var(--cp-space-3);
	border: 0;
	font: inherit;
	font-size: var(--cp-fs-small);
}

.cp-search button {
	padding: 0 var(--cp-space-3);
	border: 0;
	background: var(--cp-ground-deep);
	color: var(--cp-ink-invert);
	font: inherit;
	font-size: var(--cp-fs-small);
	cursor: pointer;
}

.cp-nav {
	border-bottom: var(--cp-rule-w) solid var(--cp-rule);
	background: var(--cp-ground);
}

.cp-nav .cp-wrap {
	display: flex;
	gap: var(--cp-space-6);
	padding-block: 0;
}

.cp-nav a {
	padding: var(--cp-space-3) 0;
	border-bottom: 3px solid transparent;
	color: var(--cp-ink);
	font-size: var(--cp-fs-ui);
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
}

.cp-nav a.is-on,
.cp-nav a:hover { border-bottom-color: var(--cp-cta); }

/* Đầu store page. */
.cp-crumb {
	padding-top: var(--cp-space-4);
	font-size: var(--cp-fs-caption);
	color: var(--cp-ink-soft);
}

.cp-crumb a { text-decoration: none; }

.cp-storehead {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: var(--cp-space-5);
	align-items: center;
	padding: var(--cp-space-4) 0 var(--cp-space-5);
	border-bottom: var(--cp-rule-w) solid var(--cp-rule);
}

/* Biến thể không có ô logo, dùng cho danh mục và mọi trang có tiêu đề đứng một
   mình. Thiếu nó thì tiêu đề rơi vào cột 96px dành cho logo và xuống dòng từng
   chữ một. */
.cp-storehead--plain { grid-template-columns: minmax(0, 1fr); }

.cp-storehead__logo {
	display: grid;
	place-items: center;
	width: 96px;
	height: 72px;
	border: var(--cp-rule-w) solid var(--cp-rule);
	background: var(--cp-ground-sub);
	font-family: var(--cp-serif);
	font-size: var(--cp-fs-h3);
	color: var(--cp-ink-soft);
}

/* Favicon in đúng cỡ nguồn, không kéo giãn. Chiều cao để auto phòng ảnh không
   vuông, nếu ép cả hai chiều thì favicon chữ nhật bị bóp méo. */
.cp-storehead__logo img {
	width: auto;
	height: auto;
	max-width: 48px;
	max-height: 48px;
}

.cp-storehead__sub {
	margin-top: var(--cp-space-2);
	font-size: var(--cp-fs-ui);
	color: var(--cp-ink-soft);
}

/* Khối chữ của cây bút phụ trách. */
.cp-desk { margin-top: var(--cp-space-6); }

.cp-desk__title {
	padding-bottom: var(--cp-space-2);
	border-bottom: 2px solid var(--cp-ground-deep);
	font-size: var(--cp-fs-h2-lg);
}

.cp-desk section { margin-top: var(--cp-space-5); }

.cp-desk h3 { font-size: var(--cp-fs-h3); }

.cp-desk p,
.cp-desk ul {
	margin-top: var(--cp-space-2);
	font-size: var(--cp-fs-body);
	line-height: var(--cp-lh-body);
	color: var(--cp-ink-body);
}

.cp-desk ul { padding-left: var(--cp-space-5); }
.cp-desk li { margin-top: var(--cp-space-1); }

.cp-desk__stamp {
	margin-top: var(--cp-space-3);
	font-family: var(--cp-mono);
	font-size: var(--cp-fs-caption);
	color: var(--cp-ink-faint);
}

.cp-authorbox {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: var(--cp-space-4);
	margin-top: var(--cp-space-6);
	padding: var(--cp-space-4);
	border: var(--cp-rule-w) solid var(--cp-rule);
}

.cp-authorbox__avatar {
	display: grid;
	place-items: center;
	overflow: hidden;
	width: 56px;
	height: 56px;
	border: var(--cp-rule-w) solid var(--cp-rule);
	border-radius: 50%;
	background: var(--cp-ground-sub);
	font-family: var(--cp-serif);
	color: var(--cp-ink-soft);
}

/* Ảnh tác giả về đúng khung tròn. WordPress in ra thẻ img cỡ cố định nên phải
   ép lại, nếu không nó tràn ra ngoài đường viền. */
.cp-authorbox__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* Trên trang tác giả, ảnh đứng cạnh tiêu đề nên to hơn. */
.cp-storehead .cp-authorbox__avatar {
	width: 96px;
	height: 96px;
}

.cp-authorbox h3 { font-size: 15.5px; }

.cp-authorbox p {
	margin-top: var(--cp-space-1);
	font-size: var(--cp-fs-small);
	color: var(--cp-ink-soft);
}

/* Rail phụ. */
.cp-statbox { display: grid; grid-template-columns: 1fr 1fr; }

.cp-statbox > div {
	padding: var(--cp-space-3) var(--cp-space-4);
	border-right: var(--cp-rule-w) solid var(--cp-rule);
	border-bottom: var(--cp-rule-w) solid var(--cp-rule);
}

.cp-statbox > div:nth-child(2n) { border-right: 0; }
.cp-statbox > div:nth-last-child(-n+2) { border-bottom: 0; }

.cp-statbox .n {
	font-family: var(--cp-serif);
	font-size: var(--cp-fs-h2);
	font-variant-numeric: tabular-nums;
}

.cp-statbox .l {
	font-size: var(--cp-fs-micro);
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--cp-ink-soft);
}

.cp-note {
	padding: var(--cp-space-3) var(--cp-space-4);
	font-size: var(--cp-fs-small);
	color: var(--cp-ink-soft);
}

.cp-note ul { margin: var(--cp-space-2) 0 0; padding-left: var(--cp-space-5); }
.cp-note li { margin-top: var(--cp-space-1); }

.cp-list { padding: var(--cp-space-1) var(--cp-space-4) var(--cp-space-3); }

.cp-list__item {
	display: flex;
	align-items: baseline;
	gap: var(--cp-space-3);
	padding: var(--cp-space-3) 0;
	border-bottom: var(--cp-rule-w) solid var(--cp-rule);
}

.cp-list__item:last-child { border-bottom: 0; }
.cp-list .t { font-size: var(--cp-fs-small); line-height: var(--cp-lh-snug); }

.cp-list .s {
	margin-top: 3px;
	font-size: var(--cp-fs-micro);
	color: var(--cp-ink-faint);
}

.cp-list .v {
	margin-left: auto;
	font-family: var(--cp-mono);
	font-size: var(--cp-fs-caption);
	color: var(--cp-live);
	white-space: nowrap;
}

/* Đuôi liên kết.
   padding-block chứ không phải shorthand `padding: x 0`: hai dải cuối trang chủ
   mang cả .cp-wrap lẫn .cp-strip, mà shorthand thì ghi đè luôn padding-inline
   của .cp-wrap về 0. Hậu quả là "Coupons by category" và "Stores with the most
   coupons" chạy sát mép màn hình ở tablet và điện thoại, lệch 20px so với
   masthead và chân trang ở desktop. Khối "Where to go next" dưới store page
   không mang .cp-wrap nên lề ngang của nó vẫn là 0 như cũ. */
.cp-strip {
	padding-block: var(--cp-space-5);
	border-top: var(--cp-rule-w) solid var(--cp-rule);
}

.cp-chips { display: flex; flex-wrap: wrap; gap: var(--cp-space-2); }

.cp-chips a {
	padding: var(--cp-space-2) var(--cp-space-3);
	border: var(--cp-rule-w) solid var(--cp-rule);
	border-radius: var(--cp-radius);
	color: var(--cp-ink);
	font-size: var(--cp-fs-small);
	text-decoration: none;
}

.cp-chips a:hover { border-color: var(--cp-ground-deep); }

/* Trang chủ. */
.cp-lead {
	padding-bottom: var(--cp-space-6);
	border-bottom: var(--cp-rule-w) solid var(--cp-rule);
}

.cp-lead h1 {
	font-size: var(--cp-fs-display);
	line-height: 1.14;
	letter-spacing: -0.015em;
}

.cp-dek {
	margin-top: var(--cp-space-3);
	font-size: var(--cp-fs-lead);
	color: var(--cp-ink-soft);
}

.cp-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cp-space-3);
	margin-top: var(--cp-space-4);
	font-size: var(--cp-fs-small);
	color: var(--cp-ink-soft);
}

.cp-byline b { color: var(--cp-ink); }

.cp-chip {
	padding: 2px var(--cp-space-2);
	border: var(--cp-rule-w) solid var(--cp-rule);
	border-radius: var(--cp-radius);
	font-size: var(--cp-fs-micro);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cp-ink-soft);
}

.cp-figure {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: var(--cp-space-5);
	border: var(--cp-rule-w) solid var(--cp-rule);
	background: var(--cp-ground-sub);
}

.cp-figure > div {
	padding: var(--cp-space-4);
	border-right: var(--cp-rule-w) solid var(--cp-rule);
}

.cp-figure > div:last-child { border-right: 0; }

.cp-figure .n {
	font-family: var(--cp-serif);
	font-size: 28px;
	font-variant-numeric: tabular-nums;
}

.cp-figure .l { font-size: var(--cp-fs-caption); color: var(--cp-ink-soft); }

.cp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cp-space-5); }

.cp-card {
	padding: var(--cp-space-4);
	border: var(--cp-rule-w) solid var(--cp-rule);
	background: var(--cp-ground);
}

.cp-card h3 { font-size: 19px; line-height: 1.25; }

.cp-card p {
	margin-top: var(--cp-space-2);
	font-size: var(--cp-fs-ui);
	color: var(--cp-ink-soft);
}

.cp-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cp-space-5); }

.cp-guide .cp-media { margin-bottom: var(--cp-space-2); }
.cp-guide h3 { margin-top: var(--cp-space-2); font-size: 16.5px; line-height: 1.3; }

.cp-guide p {
	margin-top: var(--cp-space-1);
	font-size: var(--cp-fs-small);
	color: var(--cp-ink-soft);
}

.cp-storegrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--cp-space-2) var(--cp-space-5);
	font-size: var(--cp-fs-small);
}

.cp-storegrid a {
	display: flex;
	justify-content: space-between;
	padding: var(--cp-space-2) 0;
	border-bottom: var(--cp-rule-w) solid var(--cp-rule);
	color: var(--cp-ink);
	text-decoration: none;
}

.cp-storegrid span { color: var(--cp-ink-faint); font-variant-numeric: tabular-nums; }

/* Danh bạ danh mục và danh bạ store A tới Z. Dùng lại .cp-storegrid cho phần
   lưới, ở đây chỉ thêm khoảng cách giữa các khối và thanh chữ cái. */
.cp-catblock,
.cp-azblock { padding-bottom: var(--cp-space-6); }

/* Neo nhảy trong trang: chừa chỗ để tiêu đề chữ cái không dính sát mép trên. */
.cp-azblock { scroll-margin-top: var(--cp-space-5); }

.cp-catblock__n {
	margin-left: auto;
	font-size: var(--cp-fs-ui);
	color: var(--cp-ink-faint);
	font-variant-numeric: tabular-nums;
}

.cp-azbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cp-space-1);
	padding: var(--cp-space-3) 0 var(--cp-space-5);
	border-bottom: var(--cp-rule-w) solid var(--cp-rule);
	margin-bottom: var(--cp-space-5);
}

.cp-azbar a {
	min-width: 30px;
	padding: var(--cp-space-1) var(--cp-space-2);
	border: var(--cp-rule-w) solid var(--cp-rule);
	color: var(--cp-ink);
	font-size: var(--cp-fs-small);
	text-align: center;
	text-decoration: none;
}

.cp-azbar a:hover { border-color: var(--cp-ink); }

/* Trang bài viết: cột đọc hẹp, đây là chỗ duy nhất dùng .cp-measure. */
.cp-article { padding: var(--cp-space-6) 0 var(--cp-space-5); }

.cp-article h1 {
	font-size: 38px;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.cp-article h2 { margin-top: var(--cp-space-6); font-size: 23px; }

/* Khối chèn giữa bài cần nhịp riêng: chúng không phải đoạn văn nên không thừa
   hưởng margin của p, để nguyên thì ảnh dính sát mục lục. */
.cp-article .cp-media,
.cp-article .cp-toc { margin-top: var(--cp-space-5); }

.cp-article .cp-offers,
.cp-article .cp-chart,
.cp-article .cp-method { margin-top: var(--cp-space-6); }

.cp-article p {
	margin-top: var(--cp-space-3);
	font-size: 17px;
	line-height: var(--cp-lh-loose);
	color: var(--cp-ink-body);
}

/* Chân trang. */
.cp-foot {
	margin-top: var(--cp-space-3);
	background: var(--cp-ground-deep);
	color: var(--cp-on-deep);
}

.cp-foot .cp-wrap { padding-block: var(--cp-space-6) var(--cp-space-5); }

.cp-foot__cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--cp-space-6);
}

.cp-foot h3 {
	font-family: var(--cp-sans);
	font-size: var(--cp-fs-caption);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cp-on-deep-soft);
}

.cp-foot ul {
	margin: var(--cp-space-2) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--cp-fs-small);
}

.cp-foot li { margin-top: var(--cp-space-2); }
.cp-foot a { color: var(--cp-on-deep); text-decoration: none; }
.cp-foot a:hover { color: var(--cp-ink-invert); text-decoration: underline; }

.cp-foot__brand {
	font-family: var(--cp-serif);
	font-size: 22px;
	color: var(--cp-ink-invert);
}

.cp-foot__legal {
	margin-top: var(--cp-space-5);
	padding-top: var(--cp-space-3);
	border-top: var(--cp-rule-w) solid var(--cp-on-deep-rule);
	font-size: var(--cp-fs-caption);
	color: var(--cp-on-deep-soft);
}


/* ---------------------------------------------------------------------------
   4c. Khối do Gutenberg in ra

   Thân bài lưu dưới dạng block, nên WordPress in ra class riêng của nó. KHÔNG
   bắt module ảnh in class của theme: markup lệch chuẩn thì trình soạn thảo báo
   block hỏng và người sửa bài mất nội dung. Theme style theo class của
   Gutenberg, đó là cách duy nhất giữ được cả hai đầu.

   Site không sinh kích thước phụ nên srcset chỉ có một nguồn; ảnh trong thân
   bài giữ tỉ lệ gốc, không ép cắt như ảnh đại diện.
   ------------------------------------------------------------------------ */

.wp-block-image {
	margin: var(--cp-space-5) 0 0;
}

.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--cp-ground-sub);
}

.wp-block-image figcaption,
.wp-element-caption {
	margin-top: var(--cp-space-2);
	font-size: var(--cp-fs-caption);
	color: var(--cp-ink-faint);
}

/* Ảnh căn giữa hoặc thu nhỏ trong trình soạn thảo. */
.wp-block-image.aligncenter { text-align: center; }
.wp-block-image.alignleft img,
.wp-block-image.alignright img { width: auto; max-width: 50%; }
.wp-block-image.alignleft { float: left; margin: var(--cp-space-2) var(--cp-space-5) var(--cp-space-3) 0; }
.wp-block-image.alignright { float: right; margin: var(--cp-space-2) 0 var(--cp-space-3) var(--cp-space-5); }

/* Vài block khác chắc chắn xuất hiện trong bài. */
.wp-block-quote {
	margin: var(--cp-space-5) 0 0;
	padding-left: var(--cp-space-4);
	border-left: 3px solid var(--cp-rule);
	color: var(--cp-ink-body);
}

.wp-block-list { margin-top: var(--cp-space-3); padding-left: var(--cp-space-5); }
.wp-block-list li { margin-top: var(--cp-space-1); }

.wp-block-table { margin-top: var(--cp-space-5); overflow-x: auto; }
.wp-block-table table { min-width: 520px; }

@media (max-width: 480px) {
	.wp-block-image.alignleft,
	.wp-block-image.alignright { float: none; margin-inline: 0; }
	.wp-block-image.alignleft img,
	.wp-block-image.alignright img { max-width: 100%; }
}


/* ============================================================================
   5. UTILITY
   Cố ý ít. Markup là việc của plugin nên không nhồi utility vào đó được.
   ========================================================================== */

/* Số liệu xếp thẳng cột, dùng cho bảng và ô thống kê. */
.cp-tabular { font-variant-numeric: tabular-nums; }

/* Nhãn nhỏ trên tiêu đề, kiểu mào đầu của báo. */
.cp-kicker {
	display: inline-block;
	margin-bottom: var(--cp-space-2);
	color: var(--cp-cta);
	font-family: var(--cp-mono);
	font-size: var(--cp-fs-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.cp-kicker--quiet { color: var(--cp-ink-faint); }

/* Chỉ đọc được bằng trình đọc màn hình. */
.cp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}


/* ============================================================================
   6. RESPONSIVE
   Ba mốc đúng CLAUDE.md mục F8: 1080, 760, 480.
   ========================================================================== */

/* 1080: rail hẹp lại trước khi phải xuống hàng. */
@media (max-width: 1080px) {
	:root {
		--cp-rail: 280px;
		--cp-gap: 32px;
	}
}

/* 760: rail xuống dưới cột chính, bố cục về một cột. */
@media (max-width: 760px) {
	.cp-cols { grid-template-columns: 1fr; gap: var(--cp-space-6); }
	.cp-section-head { flex-wrap: wrap; gap: var(--cp-space-1) var(--cp-space-3); }
	.cp-section-head > a { margin-left: 0; }

	.cp-grid2,
	.cp-storegrid,
	.cp-figure { grid-template-columns: 1fr 1fr; }

	/*
	 * Guides về MỘT cột ngay từ mốc này, không đi qua hai cột. Khối này in ba
	 * thẻ, mà ba thẻ trong lưới hai cột thì thẻ cuối đứng lẻ một hàng và chừa
	 * một ô trống bằng nửa bề ngang. Một cột cũng cho ảnh rộng gấp đôi.
	 */
	.cp-guides { grid-template-columns: 1fr; }

	/* Bài lead xếp dọc, chữ trước rồi tới ảnh. Ảnh hạ về khổ ngang: giữ tỉ lệ
	   4/3 ở bề ngang tràn màn hình thì riêng tấm ảnh cao gần sáu trăm điểm ảnh và
	   đẩy mọi thứ khác xuống dưới nếp gấp. */
	.cp-lead--art { grid-template-columns: 1fr; }
	.cp-lead__media img { aspect-ratio: 16 / 9; }

	.cp-foot__cols { grid-template-columns: 1fr 1fr; }

	/*
	 * Từ mốc này măng sét xuống hàng, khối bên phải đứng riêng một dòng. Cho nó
	 * rộng hết dòng để ô tìm kiếm chạy full: .cp-search là flex cấp block nên nó
	 * giãn theo khối cha. Để khối cha co theo dòng số liệu thì ô tìm kiếm mắc kẹt
	 * ở 287px, thành một hộp nhỏ trôi giữa một dòng trống.
	 */
	.cp-masthead .cp-wrap { flex-wrap: wrap; }
	.cp-masthead__meta { width: 100%; margin-left: 0; text-align: left; }

	/* Thanh nav cuộn ngang trong khung của nó thay vì xuống hàng lộn xộn. */
	.cp-nav .cp-wrap { gap: var(--cp-space-4); overflow-x: auto; }
	.cp-nav a { flex: 0 0 auto; white-space: nowrap; }
}

/* 480: cỡ chữ tiêu đề hạ xuống, đệm hai bên hẹp lại, card offer về hai cột. */
@media (max-width: 480px) {
	:root {
		--cp-fs-display: 29px;
		--cp-fs-h1: 26px;
		--cp-fs-h2: 19px;
		--cp-pad-x: 16px;
	}

	.cp-grid2,
	.cp-guides,
	.cp-storegrid,
	.cp-figure { grid-template-columns: 1fr; }

	.cp-figure > div { border-right: 0; border-bottom: var(--cp-rule-w) solid var(--cp-rule); }
	.cp-figure > div:last-child { border-bottom: 0; }

	/* Ô mức lợi và phần chữ đứng cạnh nhau, nút xuống hàng riêng chiếm cả
	   chiều ngang: ngón tay cần vùng bấm rộng hơn con chuột. */
	.cp-offer { grid-template-columns: 56px minmax(0, 1fr); }
	.cp-offer__disc { width: 56px; min-height: 46px; }
	.cp-offer__disc-n { font-size: var(--cp-fs-ui); }
	/*
	 * grid-column: 1 / -1 mới chỉ kéo Ô LƯỚI ra hết hàng, cái nút bên trong vẫn
	 * là inline-flex nên nó co theo chữ và nằm lệch trái, rộng chừng 140px.
	 * Đổi nút sang flex cấp block để nó lấp đầy ô, và cho phần chữ giãn ra, ô
	 * hai ký tự cuối của mã giữ nguyên khổ ở mép phải.
	 */
	.cp-offer__act { grid-column: 1 / -1; }

	.cp-offer__act > .cp-offer__reveal,
	.cp-offer__act > .cp-offer__get { display: flex; }

	.cp-offer__act .cp-offer__reveal-t,
	.cp-offer__act .cp-offer__get-t { flex: 1; text-align: center; }

	.cp-log__row { grid-template-columns: 1fr; gap: var(--cp-space-1); }
	.cp-chart__row { grid-template-columns: minmax(0, 1fr) 56px; }
	.cp-chart__track { grid-column: 1 / -1; }
	.cp-storehead { grid-template-columns: 1fr; }
	.cp-article h1 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}