/* ==========================================================================
   Pickle — giao diện chính
   Thiết kế cho điện thoại trước (375px), mở rộng ở 768px và 1200px.
   Dưới 1200px menu thu gọn vào nút Menu; từ 1200px menu nằm ngang.
   ========================================================================== */

/* 1. Biến
   ========================================================================== */
:root {
	/* Màu */
	--color-primary: #0B6E4F;       /* xanh sân */
	--color-primary-dark: #08563D;  /* chữ trên nền vàng chanh */
	--color-primary-soft: #E7F1EC;
	--color-accent: #D4F23B;        /* vàng chanh, màu bóng */
	--color-accent-soft: #F1FAC9;
	--color-bg: #F7F8F2;
	--color-surface: #FFFFFF;
	--color-text: #12261E;
	--color-text-muted: #4A5E54;
	--color-border: #DDE3D5;        /* đường kẻ, viền thẻ: chỉ để trang trí */
	--color-border-strong: #6F8377; /* viền ô nhập, ô chọn: ≥3:1 trên nền sáng (WCAG 1.4.11) */
	--color-footer-text: #C8D3CC;
	--color-row-hover: #EBF3F1;     /* hàng danh sách khi rê chuột: xanh sân 8% trên trắng */
	--color-row-press: #E2EEEA;     /* hàng danh sách khi nhấn: xanh sân 12% trên trắng */

	/* Chữ */
	--font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--fs-base: 1.0625rem;  /* 17px */
	--fs-sm: 0.9375rem;    /* 15px */
	--fs-xs: 0.8125rem;    /* 13px */
	--fs-lead: 1.125rem;
	--fs-h1: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
	--fs-h2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
	--fs-h3: 1.25rem;
	--fs-h4: 1.0625rem;
	--lh-base: 1.65;
	--lh-tight: 1.3;   /* h1, h2: đủ chỗ cho dấu chồng tiếng Việt (Ổ, Ẳ, Ộ) */
	--lh-snug: 1.35;   /* h3–h6, tiêu đề thẻ */
	--fw-regular: 400;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-extrabold: 800;

	/* Khoảng cách: bội số của 8px */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 40px;
	--space-6: 48px;
	--space-8: 64px;
	--space-10: 80px;
	--space-12: 96px;

	/* Hình khối */
	--radius: 14px;
	--radius-sm: 8px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgba(18, 38, 30, 0.06), 0 2px 8px rgba(18, 38, 30, 0.04);
	--shadow: 0 8px 24px rgba(18, 38, 30, 0.08);
	--shadow-lg: 0 16px 40px rgba(18, 38, 30, 0.12);

	/* Bố cục */
	--container: 1200px;
	--gutter: var(--space-2);
	--content-width: 720px;
	--measure: 36em;   /* cột đọc: khoảng 70 ký tự tiếng Việt mỗi dòng ở 17px */
	--medium-width: 960px;
	--header-height: 64px;
	--admin-bar-height: 0px; /* thanh quản trị WordPress khi đăng nhập */
	--sticky-extra: 0px;     /* phần dính thêm dưới header (ô tìm Từ điển, tiến độ Câu đố) */
	--contact-bar-height: 64px;
	--tap: 44px;
	--transition: 160ms ease;
	--duration-press: 90ms;
}

/* 2. Nền tảng
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Chừa chỗ cho các thanh dính: phần đang chọn bằng bàn phím, liên kết #neo và mục lục không bị che (WCAG 2.4.11) */
	scroll-padding-top: calc(var(--admin-bar-height) + var(--header-height) + var(--sticky-extra) + var(--space-1));
}

@media (max-width: 767px) {
	html {
		scroll-padding-bottom: calc(var(--contact-bar-height) + env(safe-area-inset-bottom, 0px) + var(--space-1));
	}
}

/* Thanh quản trị chỉ dính từ 601px (WordPress cho nó cuộn theo trang ở màn hẹp hơn) */
@media (min-width: 601px) {
	html:has(body.admin-bar) {
		--admin-bar-height: 46px;
	}
}

@media (min-width: 783px) {
	html:has(body.admin-bar) {
		--admin-bar-height: 32px;
	}
}

/* Không có JS: menu là một hàng liên kết dưới logo nên header dính cao thêm 56px (xem mục 6) */
@media (max-width: 1199px) {
	html.no-js {
		--sticky-extra: 56px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img,
video {
	height: auto;
}

img {
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--space-2);
	color: var(--color-text);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

h3,
h4,
h5,
h6 {
	line-height: var(--lh-snug);
}

h1 {
	font-size: var(--fs-h1);
	font-weight: var(--fw-extrabold);
}

h2 {
	font-size: var(--fs-h2);
	font-weight: var(--fw-extrabold);
}

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

h4 {
	font-size: var(--fs-h4);
}

p,
ul,
ol,
dl,
figure,
blockquote,
pre,
table {
	margin: 0 0 var(--space-3);
}

a {
	color: var(--color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

a:hover {
	color: var(--color-primary-dark);
	text-decoration-thickness: 2px;
}

hr {
	height: 0;
	margin: var(--space-5) 0;
	border: 0;
	border-top: 1px solid var(--color-border);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

::placeholder {
	color: var(--color-text-muted);
	opacity: 1;
}

/* Thuộc tính hidden luôn thắng display của thành phần */
[hidden] {
	display: none !important;
}

/* Phần chỉ dùng được khi có JavaScript: hiện ngay từ đầu (lớp js đặt sẵn trên thẻ html trong <head>),
   nên không xô lệch bố cục khi JS chạy xong. Không có JS thì ẩn hẳn. */
.no-js .js-only {
	display: none !important;
}

.icon {
	display: inline-block;
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	vertical-align: middle;
}

/* 3. Trợ năng
   ========================================================================== */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

.skip-link:focus {
	position: fixed !important;
	top: var(--space-1);
	left: var(--space-1);
	z-index: 1000;
	width: auto;
	height: auto;
	padding: var(--space-2) var(--space-3);
	margin: 0;
	clip: auto;
	clip-path: none;
	background: var(--color-accent);
	color: var(--color-primary-dark);
	font-weight: var(--fw-bold);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	text-decoration: none;
}

:focus {
	outline: none;
}

:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

.site-main {
	overflow-x: clip;
}

.site-main:focus {
	outline: none;
}

/* 4. Bố cục
   ========================================================================== */
.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow {
	max-width: calc(var(--content-width) + var(--gutter) * 2);
}

.container--medium {
	max-width: calc(var(--medium-width) + var(--gutter) * 2);
}

.section {
	padding-block: var(--space-6);
}

.section__header {
	max-width: var(--content-width);
	margin-bottom: var(--space-4);
}

.section__header--row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-1) var(--space-3);
	max-width: none;
}

.section__title {
	margin-bottom: var(--space-1);
	text-wrap: balance;
}

.section__lead {
	max-width: var(--measure);
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-lead);
}

.section__source {
	margin: var(--space-3) 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.section__more {
	margin: var(--space-4) 0 0;
	text-align: center;
}

.section--tools {
	background: var(--color-surface);
	border-block: 1px solid var(--color-border);
}

/* Khối công cụ ngay dưới đầu trang chủ: nền liền với đầu trang, sát lên phần đệm dưới của đầu trang */
.hero + .section--tools {
	padding-top: 0;
	background: none;
	border-block: 0;
}

/* 5. Nút, nhãn, chip
   ========================================================================== */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	min-height: var(--tap);
	padding: 10px var(--space-3);
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.button:active {
	transform: scale(0.98);
	transition-duration: var(--duration-press);
}

/* Nút chính: nền vàng chanh, chữ xanh đậm */
.button--primary {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-primary-dark);
	box-shadow: 0 2px 0 var(--color-primary);
}

/* Nút phụ: viền xanh sân */
.button--secondary {
	background: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Nút phụ trên nền tối */
.button--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.7);
	color: #FFFFFF;
}

.button--large {
	min-height: 56px;
	padding-inline: var(--space-4);
	font-size: var(--fs-lead);
}

/* Hiệu ứng rê chuột chỉ cho máy có chuột: trên màn cảm ứng, :hover dính lại sau khi chạm */
@media (hover: hover) {
	.button:hover {
		text-decoration: none;
		transform: translateY(-1px);
	}

	.button:active {
		transform: translateY(0) scale(0.98);
	}

	.button--primary:hover {
		background: #DDF65E;
		border-color: #DDF65E;
		color: var(--color-primary-dark);
		box-shadow: 0 4px 0 var(--color-primary);
	}

	.button--secondary:hover {
		background: var(--color-primary);
		color: #FFFFFF;
	}

	.button--outline-light:hover {
		background: #FFFFFF;
		border-color: #FFFFFF;
		color: var(--color-primary-dark);
	}
}

.badge {
	display: inline-block;
	margin-bottom: var(--space-1);
	padding: 2px 10px;
	background: var(--color-accent-soft);
	border: 1px solid #E3F38F;
	border-radius: var(--radius-pill);
	color: var(--color-primary-dark);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
}

@media (hover: hover) {
	.badge:hover {
		background: var(--color-accent);
		color: var(--color-primary-dark);
	}
}

.chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
}

.chip {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: var(--space-1) var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

button.chip {
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

.chip.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #FFFFFF;
}

.chip:active {
	transform: scale(0.96);
	transition-duration: var(--duration-press);
}

/* Rê chuột: nhạt hơn trạng thái đang chọn để không lẫn với chip đã bật */
@media (hover: hover) {
	.chip:hover {
		background: var(--color-primary-soft);
		border-color: var(--color-primary);
		color: var(--color-primary-dark);
	}

	.chip.is-active:hover {
		background: var(--color-primary-dark);
		border-color: var(--color-primary-dark);
		color: #FFFFFF;
	}
}

.link-more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: var(--tap);
	font-weight: var(--fw-bold);
	text-decoration: none;
}

.link-more .icon {
	transition: transform var(--transition);
}

@media (hover: hover) {
	.link-more:hover .icon {
		transform: translateX(3px);
	}
}

/* 6. Đầu trang và menu
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

/* Khi đăng nhập: header dính nằm dưới thanh quản trị của WordPress */
@media (min-width: 601px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (min-width: 783px) {
	.admin-bar .site-header {
		top: 32px;
	}
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 var(--space-2);
	min-height: var(--header-height);
}

.site-brand {
	display: flex;
	align-items: center;
	min-height: var(--header-height);
}

.site-brand__link,
.site-brand .custom-logo-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: var(--tap);
	color: var(--color-text);
	font-size: 1.25rem;
	font-weight: var(--fw-extrabold);
	letter-spacing: -0.02em;
	text-decoration: none;
}

.site-brand__link:hover {
	color: var(--color-primary);
}

.site-brand__mark {
	width: 36px;
	height: 36px;
}

.site-brand .custom-logo {
	width: auto;
	max-height: 48px;
}

.menu-toggle {
	display: none;
	align-items: center;
	gap: var(--space-1);
	min-width: var(--tap);
	min-height: var(--tap);
	padding: var(--space-1) var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	cursor: pointer;
}

@media (hover: hover) {
	.menu-toggle:hover {
		border-color: var(--color-primary);
	}
}

.menu-toggle__icon {
	display: inline-flex;
}

.menu-toggle__icon--close,
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open {
	display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close {
	display: inline-flex;
}

.js .menu-toggle {
	display: inline-flex;
	order: 2;
}

.site-nav {
	order: 3;
	width: 100%;
	padding-bottom: var(--space-1);
}

/* Có JS: menu thu gọn trên điện thoại, mở thành tấm phủ dưới header */
.js .site-nav {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	max-height: calc(100vh - var(--header-height));
	max-height: calc(100dvh - var(--header-height));
	padding: var(--space-1) var(--gutter) var(--space-3);
	overflow-y: auto;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-lg);
}

.js .site-nav.is-open {
	display: block;
}

.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu--primary a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: var(--space-1) 0;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

.menu--primary a:hover,
.menu--primary .current-menu-item > a,
.menu--primary .current-menu-ancestor > a,
.menu--primary .current-post-ancestor > a {
	color: var(--color-primary);
}

.menu--primary .current-menu-item > a,
.menu--primary .current-post-ancestor > a {
	font-weight: var(--fw-bold);
}

.menu--primary .sub-menu {
	margin: 0;
	padding: 0 0 0 var(--space-2);
	list-style: none;
}

.menu--primary .sub-menu a {
	font-weight: var(--fw-regular);
}

/* Không có JS: menu là hàng liên kết cuộn ngang */
.no-js .menu--primary {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
}

.no-js .menu--primary a {
	border-bottom: 0;
	white-space: nowrap;
}

.site-header__call {
	display: none;
	order: 1;
}

/* 7. Hero
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-6) var(--space-8);
	background:
		radial-gradient(circle at 100% 0%, rgba(212, 242, 59, 0.35) 0, rgba(212, 242, 59, 0) 45%),
		linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-bg) 100%);
}

.hero__inner {
	display: grid;
	gap: var(--space-5);
	align-items: center;
}

.hero__eyebrow {
	display: inline-flex;
	margin-bottom: var(--space-2);
	padding: 4px var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	color: var(--color-primary);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

.hero__title {
	margin-bottom: var(--space-2);
	text-wrap: balance;
	font-size: clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.hero__highlight {
	display: inline;
	color: var(--color-primary);
	background-image: linear-gradient(transparent 62%, var(--color-accent) 62%, var(--color-accent) 92%, transparent 92%);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.hero__text {
	max-width: 36em;
	margin-bottom: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--fs-lead);
}

.hero__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.hero__visual {
	display: none;
}

.hero__visual img {
	width: 100%;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	transform: rotate(-3deg);
}

/* Hero có lối tắt (trang chủ): trên điện thoại bỏ dòng giới thiệu và bớt đệm, để nút chính và lưới lối tắt
   nằm trong màn hình đầu, phía trên thanh Gọi/Zalo, và khối kế tiếp ló lên bên dưới. Từ 768px hiện lại. */
.hero--shortcuts {
	padding-block: var(--space-3);
}

.hero--shortcuts .hero__eyebrow {
	display: none;
}

.hero--shortcuts .hero__text {
	margin-bottom: var(--space-3);
}

.hero-shortcuts {
	margin-top: var(--space-2);
}

.hero-shortcuts__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero-shortcuts__item {
	display: flex;
}

/* Số ô lẻ (site chưa có đủ trang công cụ): ô cuối trải hết hàng */
.hero-shortcuts__item:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* Mỗi ô một liên kết: nhạt hơn nút chính để nút chính vẫn là bước được đề xuất. Ô công cụ (khối Công cụ
   cho người mới và cuối các trang công cụ) dùng cùng kiểu, nhưng tên lớp riêng để bộ đếm lối tắt ở trang chủ
   (assets/js/home-stats.js) chỉ đếm 4 ô đầu trang. */
.hero-shortcut,
.tool-tile {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--space-1);
	min-height: 48px;
	padding: var(--space-1) var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	text-decoration: none;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.hero-shortcut .icon,
.tool-tile .icon {
	flex-shrink: 0;
	color: var(--color-primary);
}

.hero-shortcut:active,
.tool-tile:active {
	background: var(--color-primary-soft);
	transform: scale(0.98);
	transition-duration: var(--duration-press);
}

@media (hover: hover) {
	.hero-shortcut:hover,
	.tool-tile:hover {
		background: var(--color-primary-soft);
		border-color: var(--color-primary);
		color: var(--color-primary-dark);
	}
}

/* Khối Công cụ cho người mới: ô gọn 2 cột trên điện thoại, 3 cột từ 768px, 4 cột từ 1200px */
.tool-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tool-tiles__item {
	display: flex;
}

/* Số ô lẻ: ô cuối trải hết hàng, như các ô lối tắt */
.tool-tiles__item:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* Hai tiếng cuối của tên dài đi cùng một dòng (pickle_tile_label() và pickle_keep_last_two() trong functions.php) */
.tool-tile__keep,
.keep-together {
	white-space: nowrap;
}

/* 8. Lưới chuyên mục dạng thẻ (trang 404; trang chủ dùng hàng ở mục 10)
   ========================================================================== */
.category-grid {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.category-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--space-2);
	background: var(--color-accent);
	border-radius: var(--radius);
	color: var(--color-primary-dark);
}

.category-grid__item {
	display: flex;
}

.category-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	color: var(--color-text);
	text-decoration: none;
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.category-card:active {
	transform: scale(0.98);
	transition-duration: var(--duration-press);
}

@media (hover: hover) {
	.category-card:hover {
		border-color: var(--color-primary);
		box-shadow: var(--shadow);
		color: var(--color-text);
		transform: translateY(-2px);
	}

	.category-card:active {
		transform: translateY(-2px) scale(0.98);
	}
}

.category-card__icon {
	background: var(--color-primary);
	color: var(--color-accent);
}

.category-card__title {
	margin-bottom: var(--space-1);
	line-height: var(--lh-snug);
}

.category-card__text {
	display: block;
	margin-bottom: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.category-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-top: auto;
	color: var(--color-primary);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

/* 9. Lưới và thẻ bài viết
   ========================================================================== */
.post-grid {
	display: grid;
	gap: var(--space-3);
}

.post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition);
}

@media (hover: hover) {
	.post-card:hover {
		box-shadow: var(--shadow);
		transform: translateY(-2px);
	}

	.post-card:hover .post-card__media img {
		transform: scale(1.03);
	}
}

.post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-primary-soft);
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.post-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		url("../img/ball.svg") center / 64px no-repeat,
		linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-accent-soft) 100%);
}

.post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--space-3);
}

.post-card__title {
	margin-bottom: var(--space-1);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
}

.post-card__title a {
	color: var(--color-text);
	text-decoration: none;
}

.post-card__title a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.post-card__excerpt {
	margin-bottom: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.post-card__meta {
	margin-top: auto;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.entry-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.entry-meta .icon {
	width: 18px;
	height: 18px;
	color: var(--color-primary);
}

.post-card__meta .entry-meta__item + .entry-meta__item::before {
	content: "·";
	margin-right: var(--space-1);
}

/* 10. Phần dưới trang chủ: chuyên mục, bài mới, giải sắp diễn ra, hỏi đáp, Về pickle.vn
   Một nền cho mọi khối, mỗi khối một tiêu đề và một khung trắng. Các hàng ngăn bằng đường kẻ mảnh, cả hàng là vùng
   bấm của liên kết tiêu đề (liên kết kéo giãn bằng ::after, không bọc cả hàng trong thẻ a). Khoảng cách: 16px
   trong hàng, 24px từ tiêu đề tới khung (32px từ 768px), 64px giữa hai khối (80px từ 768px, 96px từ 1200px).
   ========================================================================== */
.home-lower {
	padding-block: var(--space-2) var(--space-8);
}

.home-lower__grid {
	display: grid;
	gap: var(--space-8);
}

.home-section {
	min-width: 0;
}

.home-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-1) var(--space-3);
	margin-bottom: var(--space-3);
}

.home-head__title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	text-wrap: balance;
}

/* Liên kết "Xem tất cả…" nằm ở hàng tiêu đề từ 768px; trên điện thoại nó là hàng cuối khung (home-frame__more) */
.home-head__more {
	display: none;
}

.home-head__more,
.home-frame__more,
.home-section__extra a,
.home-faq__link,
.home-about__links a {
	align-items: center;
	gap: var(--space-1);
	min-height: var(--tap);
	color: var(--color-primary);
	font-weight: var(--fw-bold);
	text-decoration: none;
}

.home-head__more .icon,
.home-frame__more .icon,
.home-section__extra .icon,
.home-faq__link .icon,
.home-about__links .icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.home-head__more:hover,
.home-frame__more:hover,
.home-section__extra a:hover,
.home-faq__link:hover,
.home-about__links a:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

.home-frame {
	overflow: hidden;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.home-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-list > li + li,
.home-frame:not(.home-about) > * + * {
	border-top: 1px solid var(--color-border);
}

.home-frame__more {
	display: flex;
	min-height: 48px;
	padding-inline: var(--space-2);
}

/* Một hàng */
.home-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-2);
	min-height: 56px;
	padding: var(--space-2);
}

.home-row__link {
	color: var(--color-text);
	text-decoration: none;
}

.home-row__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Khung tiêu điểm vẽ quanh cả hàng, vì vùng bấm là cả hàng */
.home-row__link:focus-visible {
	outline: none;
}

.home-row:focus-within {
	outline: 3px solid var(--color-primary);
	outline-offset: -3px;
}

.home-row:active {
	background: var(--color-row-press);
}

@media (hover: hover) {
	.home-row:hover {
		background: var(--color-row-hover);
	}

	.home-row:hover .home-row__link {
		color: var(--color-primary-dark);
	}
}

.home-row__title {
	margin: 0;
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	text-wrap: pretty; /* trình duyệt hỗ trợ thì tránh để một tiếng lẻ ở dòng cuối */
}

/* Cắt dòng an toàn cho dấu tiếng Việt: -webkit-line-clamp bắt buộc overflow: hidden, nên chừa 0.2em phía trên để
   dấu chồng trên chữ hoa (Ổ, Ấ, Ẳ) ở dòng đầu không bị xén */
.home-row--post .home-row__title,
.home-row--event .home-row__title {
	display: -webkit-box;
	overflow: hidden;
	margin-block-start: -0.2em;
	padding-block-start: 0.2em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.home-row--event .home-row__title {
	-webkit-line-clamp: 2;
}

.home-row__desc,
.home-row__meta,
.home-row__excerpt {
	margin: var(--space-1) 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.home-row__desc {
	margin-top: 2px;
	text-wrap: pretty;
}

.home-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--space-1);
}

/* Dấu chấm giữa các mục; dạng "·" / "" để trình đọc màn hình không đọc dấu */
.home-row__meta > span:not(.screen-reader-text) + span::before {
	content: "·";
	content: "·" / "";
	margin-right: var(--space-1);
}

.home-row__label {
	color: var(--color-primary);
	font-weight: var(--fw-bold);
}

.home-row__extra,
.home-row__excerpt {
	display: none;
}

/* Hàng chuyên mục: ô biểu tượng, tên và mô tả ngắn, số bài (khi từ 5 bài) và dấu mũi nhọn */
.home-row--cat {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.home-row__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--color-primary-soft);
	border-radius: var(--radius-sm);
	color: var(--color-primary);
}

.home-row__end {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.home-row__end .icon {
	width: 20px;
	height: 20px;
	color: var(--color-primary);
}

/* Hàng bài viết: ảnh nhỏ bên phải chỉ khi bài có ảnh thật, nên mọi tiêu đề thẳng một mép trái */
.home-row--post {
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

.home-row--post.has-thumb {
	grid-template-columns: minmax(0, 1fr) 96px;
}

.home-row__thumb {
	display: block;
	width: 96px;
	height: 72px;
	overflow: hidden;
	background: var(--color-primary-soft);
	border-radius: var(--radius-sm);
}

.home-row__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hàng giải: ô ngày bắt đầu, tên, một dòng việc cần làm và nơi chơi, nhãn */
.home-row--event {
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: start;
}

.home-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0;
	background: var(--color-primary-soft);
	border-radius: var(--radius-sm);
	color: var(--color-primary);
	text-align: center;
}

.home-date__day {
	font-size: 1.5rem;
	font-weight: var(--fw-extrabold);
	line-height: 1;
}

.home-date__month {
	margin-top: 4px;
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: 1.2;
}

.home-row__status {
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}

.home-row--event.is-soon .home-row__status,
.home-row--event.is-live .home-row__status {
	color: var(--color-primary);
	font-weight: var(--fw-bold);
}

.home-row--event.is-closed .home-row__status,
.home-row--event.is-off .home-row__status {
	color: var(--color-text-muted);
	font-weight: var(--fw-regular);
}

.home-row__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: var(--space-1) 0 0;
}

.home-tag {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding-inline: var(--space-1);
	background: var(--color-primary-soft);
	border-radius: var(--radius-pill);
	color: var(--color-primary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

.home-section__extra {
	margin: var(--space-1) 0 0;
}

.home-section__extra a {
	display: inline-flex;
}

.home-section__note {
	margin: var(--space-2) 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

/* Hỏi đáp: dấu mũi nhọn xanh sân xoay khi mở; nhiều câu mở cùng lúc được */
.home-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	min-height: 56px;
	padding: var(--space-2);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	list-style: none;
	cursor: pointer;
}

.home-faq__q::-webkit-details-marker {
	display: none;
}

.home-faq__q:focus-visible {
	outline-offset: -3px;
}

.home-faq__q .icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--color-primary);
}

.home-faq[open] > .home-faq__q .icon {
	transform: rotate(180deg);
}

@media (hover: hover) {
	.home-faq__q:hover {
		background: var(--color-row-hover);
	}
}

.home-faq__a {
	max-width: 34em;
	padding: 0 var(--space-2) var(--space-2);
}

.home-faq__a p {
	margin: 0 0 var(--space-1);
}

.home-faq__source {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.home-faq__link {
	display: inline-flex;
}

/* Về pickle.vn: khối sáng nói ai làm site, nguồn luật, ngày cập nhật */
.home-about {
	padding: var(--space-2);
}

.home-about p {
	margin: 0;
}

.home-about__note {
	margin-top: var(--space-1) !important;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.home-about__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-3);
	margin-top: var(--space-1) !important;
}

.home-about__links a {
	display: inline-flex;
}

/* Nút gọi chỉ từ 768px: trên điện thoại thanh Gọi/Zalo cố định đã có hai nút này */
.home-about__actions {
	display: none;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-2) !important;
}

.home-about__actions.is-always {
	display: flex;
}

/* 11. Khối kêu gọi liên hệ
   ========================================================================== */
.cta-box {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-3);
	background: var(--color-primary);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	color: #FFFFFF;
}

.cta-box::after {
	content: "";
	position: absolute;
	top: -40px;
	right: -40px;
	width: 160px;
	height: 160px;
	background: var(--color-accent);
	border-radius: 50%;
	opacity: 0.18;
	pointer-events: none;
}

.cta-box > * {
	position: relative;
	z-index: 1;
}

.cta-box__title {
	margin-bottom: var(--space-1);
	text-wrap: balance;
	color: #FFFFFF;
}

.cta-box__text p {
	margin: 0;
	color: #E7F1EC;
}

.cta-box__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.cta-box__more {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-2);
	margin: 0;
	color: #E7F1EC;
	font-size: var(--fs-sm);
}

.cta-box a:not(.button) {
	color: var(--color-accent);
	font-weight: var(--fw-semibold);
}

.cta-box :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--color-accent);
}

/* 12. Đầu trang con, breadcrumb, phân trang, tìm kiếm, thông báo trống, 404
   ========================================================================== */
.page-header {
	margin-bottom: var(--space-4);
}

.page-title {
	margin-bottom: var(--space-1);
}

.page-header__description,
.page-header__meta {
	max-width: var(--measure);
	color: var(--color-text-muted);
	font-size: var(--fs-lead);
}

.page-header__description p:last-child {
	margin-bottom: 0;
}

.page-header .search-form {
	margin-top: var(--space-3);
}

/* Trang chuyên mục: khung "Nên đọc trước" (bài dài của chuyên mục), dùng chung hàng danh sách với trang chủ */
.category-guide {
	margin-bottom: var(--space-6);
}

.category-guide__note {
	color: var(--color-text-muted);
}

/* Khung "Đọc kỹ hơn": dẫn từ trang công cụ, trang Tìm sân tới bài dài của site */
.read-next {
	max-width: var(--measure);
	margin-top: var(--space-4);
	padding: var(--space-2) var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.page-header .read-next {
	margin-top: var(--space-3);
}

.read-next__label {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

/* Chọn kèm .read-next để thắng kiểu danh sách, liên kết của phần hướng dẫn trên trang công cụ */
.read-next .read-next__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.read-next .read-next__list li {
	margin: 0;
	padding: 0;
}

.read-next .read-next__list li + li {
	border-top: 1px solid var(--color-border);
}

.read-next .read-next__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	min-height: var(--tap);
	padding-block: var(--space-1);
	color: var(--color-primary);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	text-decoration: none;
}

.read-next__link .icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.read-next .read-next__link:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

.breadcrumbs,
.rank-math-breadcrumb {
	margin-bottom: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

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

.breadcrumbs__list li + li::before {
	content: "›";
	margin-right: var(--space-1);
	color: var(--color-border);
}

.breadcrumbs a,
.rank-math-breadcrumb a {
	color: var(--color-text-muted);
}

.breadcrumbs a:hover,
.rank-math-breadcrumb a:hover {
	color: var(--color-primary);
}

.breadcrumbs [aria-current="page"] {
	display: inline-block;
	max-width: 32ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

.pagination {
	margin-top: var(--space-5);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-1);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap);
	min-height: var(--tap);
	padding: 0 var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	color: var(--color-text);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

@media (hover: hover) {
	.pagination a.page-numbers:hover {
		border-color: var(--color-primary);
		color: var(--color-primary);
	}
}

.pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #FFFFFF;
}

.pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
}

.page-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: var(--space-4) 0;
	font-weight: var(--fw-semibold);
}

.search-form {
	display: flex;
	gap: var(--space-1);
	max-width: 560px;
}

.search-form__input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: var(--space-1) var(--space-2);
	background: var(--color-surface);
	border: 2px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
}

.search-form__input:focus {
	border-color: var(--color-primary);
}

.search-form__submit {
	min-height: 48px;
	padding-inline: var(--space-2);
}

.empty-state {
	padding: var(--space-5) var(--space-3);
	background: var(--color-surface);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius);
	text-align: center;
}

.empty-state__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: var(--space-2);
	background: var(--color-accent);
	border-radius: 50%;
	color: var(--color-primary-dark);
}

.empty-state__icon .icon {
	width: 32px;
	height: 32px;
}

.empty-state__text {
	max-width: 36em;
	margin-inline: auto;
	color: var(--color-text-muted);
}

.empty-state .search-form,
.empty-state .chip-list {
	justify-content: center;
	margin-inline: auto;
}

.error-404 {
	text-align: center;
}

.error-404__code {
	margin-bottom: var(--space-1);
	color: var(--color-primary);
	font-size: clamp(4.5rem, 3rem + 8vw, 7.5rem);
	font-weight: var(--fw-extrabold);
	line-height: 1;
	letter-spacing: -0.04em;
}

.error-404__text {
	color: var(--color-text-muted);
	font-size: var(--fs-lead);
}

.error-404 .search-form {
	margin-inline: auto;
}

.error-404__actions {
	margin-top: var(--space-3);
}

/* 13. Bài viết và trang
   ========================================================================== */
.single-article .entry-header,
.page-article .entry-header {
	margin-bottom: var(--space-4);
}

/* Bài viết không nằm trong .section: đệm trên bằng đệm của .section để tiêu đề thẳng hàng với các trang khác */
.single-article .entry-header {
	padding-top: var(--space-6);
}

.entry-title {
	margin-bottom: var(--space-2);
}

.entry-thumbnail {
	margin: 0 0 var(--space-4);
}

.entry-thumbnail img {
	width: 100%;
	border-radius: var(--radius);
}

.entry-thumbnail figcaption {
	margin-top: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	text-align: center;
}

.toc {
	margin-bottom: var(--space-4);
}

.toc__details {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-accent);
	border-radius: var(--radius);
}

.toc__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding: var(--space-1) var(--space-3);
	font-weight: var(--fw-bold);
	list-style: none;
	cursor: pointer;
}

.toc__title::-webkit-details-marker {
	display: none;
}

.toc__count {
	color: var(--color-text-muted);
	font-weight: var(--fw-regular);
}

.toc__title::after {
	content: "▾";
	color: var(--color-primary);
	transition: transform var(--transition);
}

.toc__details:not([open]) .toc__title::after {
	transform: rotate(-90deg);
}

.toc__list {
	margin: 0;
	padding: 0 var(--space-3) var(--space-2) calc(var(--space-3) + var(--space-2));
	counter-reset: toc;
}

.toc__list a {
	display: block;
	padding-block: var(--space-1);
	color: var(--color-text);
	text-decoration: none;
}

.toc__list a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

/* Giữ sẵn chỗ cho mục lục khi JS chưa dựng xong (main.js mở sẵn mục lục từ 768px):
   viền 2px + dòng tiêu đề 48px + đệm dưới 16px + mỗi mục một hàng 44px */
@media (min-width: 768px) {
	.js .toc:not(.is-ready) .toc__details {
		min-height: calc(66px + var(--toc-items, 0) * 44px);
	}
}

.toc__list li::marker {
	color: var(--color-primary);
	font-weight: var(--fw-bold);
}

.entry-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	margin-top: var(--space-5);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
}

.entry-footer__label {
	margin: 0;
	font-weight: var(--fw-bold);
}

.entry-footer .chip-list {
	margin: 0;
}

/* Bản tin tuần: sân mới xác minh, theme tự thêm cuối bài gắn thẻ "Bản tin tuần" */
.newsletter-courts {
	margin: var(--space-5) 0 var(--space-4);
}

.newsletter-courts__title {
	margin: 0 0 var(--space-2);
	font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
}

.newsletter-courts__lead {
	margin: 0 0 var(--space-2);
	color: var(--color-text-muted);
}

.newsletter-courts__list {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.newsletter-court {
	padding: var(--space-1) var(--space-2) var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.newsletter-court__name {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
}

.newsletter-court__meta {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.newsletter-court__status {
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}

.newsletter-courts__more {
	margin: var(--space-2) 0 0;
	font-weight: var(--fw-semibold);
}

.section--related {
	margin-top: var(--space-4);
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
}

.section--related .section__title {
	margin-bottom: var(--space-3);
}

/* 14. Nội dung bài viết (.entry-content)
   ========================================================================== */
.entry-content {
	font-size: var(--fs-base);
	line-height: var(--lh-base);
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	scroll-margin-top: var(--space-2); /* cộng thêm vào scroll-padding của html */
}

/* Cột đọc khoảng 70 ký tự; bảng, ảnh, trích dẫn lớn vẫn rộng hết cột 720px */
.entry-content > :is(p, ul, ol, dl, blockquote, details) {
	max-width: var(--measure);
}

.entry-content > .has-text-align-center {
	margin-inline: auto;
}

.entry-content > .has-text-align-right {
	margin-left: auto;
}

.entry-content h2 {
	position: relative;
	margin-top: var(--space-6);
	padding-bottom: var(--space-1);
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}

.entry-content h2::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-top: var(--space-1);
	background: var(--color-accent);
	border-radius: var(--radius-pill);
}

.entry-content h3 {
	margin-top: var(--space-5);
	font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
}

.entry-content h4 {
	margin-top: var(--space-4);
}

.entry-content a {
	font-weight: var(--fw-semibold);
	text-decoration: underline;
}

.entry-content strong {
	font-weight: var(--fw-bold);
}

.entry-content ul,
.entry-content ol {
	padding-left: var(--space-3);
}

.entry-content li {
	margin-bottom: var(--space-1);
	padding-left: 4px;
}

.entry-content li > ul,
.entry-content li > ol {
	margin-top: var(--space-1);
	margin-bottom: 0;
}

.entry-content ul li::marker {
	color: var(--color-primary);
	font-size: 1.1em;
}

.entry-content ol li::marker {
	color: var(--color-primary);
	font-weight: var(--fw-bold);
}

.entry-content blockquote,
.entry-content .wp-block-quote {
	margin: var(--space-4) 0;
	padding: var(--space-3);
	background: var(--color-primary-soft);
	border-left: 4px solid var(--color-primary);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: var(--fs-lead);
	font-weight: var(--fw-semibold);
}

.entry-content blockquote p:last-of-type {
	margin-bottom: 0;
}

.entry-content blockquote cite,
.entry-content .wp-block-quote cite {
	display: block;
	margin-top: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-style: normal;
	font-weight: var(--fw-regular);
}

.entry-content .wp-block-pullquote {
	margin: var(--space-5) 0;
	padding: var(--space-4) var(--space-3);
	border-top: 4px solid var(--color-accent);
	border-bottom: 4px solid var(--color-accent);
	text-align: center;
}

.entry-content .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-size: 1.375rem;
}

.entry-content img {
	border-radius: var(--radius);
}

.entry-content figure {
	margin: var(--space-4) 0;
}

.entry-content figcaption,
.wp-caption-text,
.wp-element-caption {
	margin-top: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	text-align: center;
}

.entry-content table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
}

.table-wrap,
.entry-content .wp-block-table {
	margin: var(--space-4) 0;
	overflow-x: auto;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	-webkit-overflow-scrolling: touch;
}

.entry-content .wp-block-table table {
	margin: 0;
}

/* Bảng chưa được main.js bọc lại: cùng khoảng cách với khung bọc để trang không xô khi bọc xong */
.entry-content > table {
	margin-block: var(--space-4);
}

.entry-content th,
.entry-content td {
	padding: var(--space-1) var(--space-2);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.entry-content thead th,
.entry-content table th {
	background: var(--color-primary);
	color: #FFFFFF;
	font-weight: var(--fw-bold);
	white-space: nowrap;
}

.entry-content tbody tr:nth-child(even) {
	background: var(--color-bg);
}

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

.entry-content .wp-block-table figcaption {
	padding: var(--space-1) var(--space-2);
	margin: 0;
}

.entry-content code,
.entry-content kbd {
	padding: 2px 6px;
	background: var(--color-primary-soft);
	border-radius: 6px;
	font-family: var(--font-mono);
	font-size: 0.9em;
}

.entry-content pre {
	padding: var(--space-2) var(--space-3);
	overflow-x: auto;
	background: var(--color-text);
	border-radius: var(--radius);
	color: #F7F8F2;
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.entry-content pre code {
	padding: 0;
	background: none;
	color: inherit;
}

.entry-content mark {
	padding: 0 4px;
	background: var(--color-accent);
	color: var(--color-text);
	border-radius: 4px;
}

.entry-content iframe,
.entry-content embed,
.entry-content object {
	max-width: 100%;
	border: 0;
	border-radius: var(--radius);
}

.entry-content .wp-block-button__link {
	min-height: var(--tap);
	background: var(--color-accent);
	border-radius: var(--radius-pill);
	color: var(--color-primary-dark);
	font-weight: var(--fw-bold);
	text-decoration: none;
}

.entry-content .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
}

/* Hộp thông tin ngoài nội dung bài (ví dụ "Trước khi mua vợt" ở chuyên mục Chọn vợt) */
.info-box {
	margin-top: var(--space-5);
	padding: var(--space-3) var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

.info-box__title {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	margin-bottom: var(--space-2);
	font-size: var(--fs-h3);
}

.info-box__title .icon {
	color: var(--color-primary);
}

.info-box__grid {
	display: grid;
	gap: var(--space-2) var(--space-4);
}

.info-box__subtitle {
	margin-bottom: var(--space-1);
	font-size: var(--fs-base);
}

.info-box p,
.info-box ul,
.info-box ol {
	margin: 0 0 var(--space-2);
}

.info-box ul,
.info-box ol {
	padding-left: var(--space-3);
}

.info-box li {
	margin-bottom: 4px;
}

.info-box li::marker {
	color: var(--color-primary);
	font-weight: var(--fw-bold);
}

.info-box__note {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.info-box__more {
	padding-top: var(--space-2);
	border-top: 1px solid var(--color-border);
	font-weight: var(--fw-semibold);
}

.info-box__more a {
	font-weight: var(--fw-bold);
}

.info-box > :last-child,
.info-box__part > :last-child {
	margin-bottom: 0;
}

/* Khối Chi tiết (bấm câu hỏi để mở đáp án) và mẫu "Tự kiểm tra" cuối bài */
.entry-content .wp-block-details {
	margin: 0 0 var(--space-1);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.entry-content .wp-block-details summary {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	min-height: var(--tap);
	padding: var(--space-1) var(--space-2);
	font-weight: var(--fw-semibold);
	list-style: none;
	cursor: pointer;
}

.entry-content .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.entry-content .wp-block-details summary::after {
	content: "▾";
	margin-left: auto;
	color: var(--color-primary);
	transition: transform var(--transition);
}

.entry-content .wp-block-details:not([open]) summary::after {
	transform: rotate(-90deg);
}

.entry-content .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 var(--space-2) var(--space-2);
}

.entry-content .self-check {
	margin: var(--space-6) 0 0;
	padding: var(--space-3) var(--space-2);
	background: var(--color-primary-soft);
	border-radius: var(--radius);
}

/* Theme cổ điển: khối Nhóm có thêm lớp .wp-block-group__inner-container bọc nội dung */
.entry-content .self-check :is(h2, h3) {
	margin-top: 0;
}

.entry-content .self-check > p,
.entry-content .self-check > .wp-block-group__inner-container > p {
	color: var(--color-text-muted);
}

/* 15. Lớp chuẩn của WordPress
   ========================================================================== */
.alignleft {
	float: left;
	margin: 0 var(--space-3) var(--space-2) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--space-2) var(--space-3);
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.alignleft,
.alignright {
	max-width: 50%;
}

.entry-content .alignwide,
.entry-content .alignfull {
	clear: both;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: var(--space-3);
}

.wp-caption img {
	margin: 0;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-1);
	margin-bottom: var(--space-3);
}

.gallery-item {
	margin: 0;
}

.gallery-caption {
	margin-top: 4px;
	font-size: var(--fs-xs);
}

.sticky .post-card__title::after {
	content: "★";
	margin-left: 6px;
	color: var(--color-primary);
	font-size: 0.8em;
}

.bypostauthor {
	display: block;
}

/* 16. Chân trang
   ========================================================================== */
.site-footer {
	padding-top: var(--space-5);
	background: var(--color-text);
	color: var(--color-footer-text);
	font-size: var(--fs-sm);
}

.site-footer a {
	color: #F7F8F2;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

.site-footer__grid {
	display: grid;
	gap: var(--space-3);
	padding-bottom: var(--space-4);
}

.site-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: var(--tap);
	margin-bottom: var(--space-1);
	font-size: 1.25rem;
	font-weight: var(--fw-extrabold);
}

.site-footer__brand img {
	width: 32px;
	height: 32px;
}

.site-footer__about p {
	max-width: 32em;
	margin: 0;
}

.site-footer__title {
	margin-bottom: var(--space-2);
	color: #FFFFFF;
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	letter-spacing: 0;
}

.menu--footer {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--space-2);
}

.menu--footer a,
.contact-list a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: var(--tap);
}

.contact-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Số gọi và Zalo cạnh nhau, email (dài) chiếm cả hàng; địa chỉ dài được xuống dòng thay vì tràn ngang */
.contact-list li {
	min-width: 0;
}

.contact-list li:nth-child(n + 3) {
	grid-column: 1 / -1;
}

.contact-list span {
	overflow-wrap: anywhere;
}

.contact-list .icon {
	color: var(--color-accent);
}

.site-footer__bottom {
	padding-block: var(--space-3);
	border-top: 1px solid rgba(247, 248, 242, 0.12);
	font-size: var(--fs-xs);
}

.site-footer__bottom p {
	margin: 0;
}

.site-footer__bottom p + p {
	margin-top: 4px;
}

.site-footer__legal > span + span::before {
	content: "·";
	content: "·" / "";
	margin-inline: var(--space-1);
}

/* 17. Thanh Gọi/Zalo cố định ở đáy điện thoại
   ========================================================================== */
.has-contact-bar {
	padding-bottom: calc(var(--contact-bar-height) + env(safe-area-inset-bottom, 0px));
}

.contact-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	display: flex;
	gap: var(--space-1);
	padding: var(--space-1) var(--gutter) calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -4px 16px rgba(18, 38, 30, 0.08);
}

/* Đồng hồ Buổi tập đang chạy: ẩn tạm thanh Gọi/Zalo để không che nút điều khiển (ngoại lệ ghi trong
   CLAUDE.md), hiện lại khi tạm dừng hoặc xong */
html.is-session-running {
	--contact-bar-height: 0px;
}

html.is-session-running .contact-bar {
	display: none;
}

.contact-bar__button {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	min-height: 48px;
	border-radius: var(--radius-pill);
	font-weight: var(--fw-bold);
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.contact-bar__button--call {
	background: var(--color-primary);
	color: #FFFFFF;
}

.contact-bar__button--zalo {
	background: var(--color-accent);
	color: var(--color-primary-dark);
}

.contact-bar__button:active {
	transform: scale(0.98);
	transition-duration: var(--duration-press);
}

@media (hover: hover) {
	.contact-bar__button--call:hover {
		background: var(--color-primary-dark);
		color: #FFFFFF;
	}

	.contact-bar__button--zalo:hover {
		background: #DDF65E;
		color: var(--color-primary-dark);
	}
}

/* 18. Từ 768px: máy tính bảng
   ========================================================================== */
@media (min-width: 768px) {
	:root {
		--gutter: var(--space-3);
	}

	.section {
		padding-block: var(--space-8);
	}

	.single-article .entry-header {
		padding-top: var(--space-8);
	}

	.hero {
		padding-block: var(--space-8) var(--space-10);
	}

	.hero__inner {
		grid-template-columns: 1.2fr 1fr;
		gap: var(--space-6);
	}

	.hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.hero__visual {
		display: block;
	}

	.hero--shortcuts .hero__eyebrow {
		display: inline-flex;
	}

	.hero--shortcuts .hero__text {
		margin-bottom: var(--space-4);
	}

	.hero-shortcuts {
		max-width: 30rem;
	}

	.category-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-3);
	}

	.tool-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-2);
	}

	/* Từ 3 cột trở lên: ô cuối không cần trải hết hàng */
	.tool-tiles__item:last-child:nth-child(odd) {
		grid-column: auto;
	}

	.post-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cta-box {
		grid-template-columns: 1.4fr 1fr;
		align-items: center;
		padding: var(--space-6);
	}

	.cta-box__actions {
		align-items: stretch;
	}

	.cta-box__more {
		grid-column: 1 / -1;
	}

	.site-footer {
		padding-top: var(--space-6);
	}

	.site-footer__grid {
		grid-template-columns: 1.2fr 1.6fr 1fr;
		gap: var(--space-5);
		padding-bottom: var(--space-5);
	}

	/* Cột liên hệ hẹp: mỗi cách liên hệ một hàng */
	.contact-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.home-lower {
		padding-bottom: var(--space-10);
	}

	.home-lower__grid {
		gap: var(--space-10);
	}

	.home-head {
		margin-bottom: var(--space-4);
	}

	.home-head__more {
		display: inline-flex;
	}

	.home-frame__more {
		display: none;
	}

	/* Chuyên mục 2×2: đường kẻ giữa các ô là nền của lưới lộ ra qua khe 1px */
	.home-list--cats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1px;
		background: var(--color-border);
	}

	.home-list--cats > li {
		background: var(--color-surface);
	}

	.home-list--cats > li + li {
		border-top: 0;
	}

	.home-row__title {
		font-size: 1.125rem;
	}

	.home-row--post .home-row__title {
		-webkit-line-clamp: 2;
	}

	.home-row--post.has-thumb {
		grid-template-columns: minmax(0, 1fr) 160px;
	}

	.home-row__thumb {
		width: 160px;
		height: 120px;
	}

	.home-row__extra {
		display: inline;
	}

	.home-row__excerpt {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.home-about {
		padding: var(--space-3);
	}

	.home-about__actions {
		display: flex;
	}

	.gallery {
		grid-template-columns: repeat(3, 1fr);
	}

	.info-box {
		padding: var(--space-4);
	}

	.info-box__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Màn lớn: bỏ thanh Gọi/Zalo ở đáy, nút gọi chuyển lên header */
	.has-contact-bar {
		padding-bottom: 0;
	}

	.contact-bar {
		display: none;
	}

	.site-header__call {
		display: inline-flex;
		flex-shrink: 0;
		margin-left: auto;
		min-height: var(--tap);
		padding: 6px var(--space-2);
		font-size: var(--fs-sm);
	}
}

/* 19. Từ 1200px: máy tính
   ========================================================================== */
@media (min-width: 1200px) {
	:root {
		--gutter: var(--space-4);
	}

	.site-header__inner {
		flex-wrap: nowrap;
	}

	.site-brand,
	.site-header__call {
		flex-shrink: 0;
	}

	.js .menu-toggle,
	.menu-toggle {
		display: none;
	}

	.site-nav,
	.js .site-nav {
		position: static;
		display: block;
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		max-height: none;
		margin-left: auto;
		padding: 0;
		overflow: visible;
		background: none;
		border: 0;
		box-shadow: none;
	}

	/* Nhiều mục quá thì xuống hàng thay vì đè lên logo */
	.menu--primary,
	.no-js .menu--primary {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 4px;
		overflow: visible;
	}

	.menu--primary > li {
		position: relative;
	}

	.menu--primary > li > a {
		min-height: var(--tap);
		padding: var(--space-1) 12px;
		border-bottom: 0;
		border-radius: var(--radius-pill);
		font-size: var(--fs-sm);
		white-space: nowrap;
	}

	.menu--primary > li > a:hover {
		background: var(--color-primary-soft);
	}

	.menu--primary > .current-menu-item > a,
	.menu--primary > .current-menu-ancestor > a,
	.menu--primary > .current-post-ancestor > a {
		background: var(--color-accent);
		color: var(--color-primary-dark);
	}

	.menu--primary .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		min-width: 220px;
		padding: var(--space-1);
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		box-shadow: var(--shadow-lg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	}

	.menu--primary li:hover > .sub-menu,
	.menu--primary li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.menu--primary .sub-menu a {
		min-height: var(--tap);
		padding: var(--space-1) 12px;
		border: 0;
		border-radius: var(--radius-sm);
		font-size: var(--fs-sm);
	}

	.menu--primary .sub-menu a:hover {
		background: var(--color-primary-soft);
	}

	.site-nav,
	.js .site-nav {
		order: 1;
	}

	.site-header__call {
		order: 2;
		margin-left: 0;
	}

	.section {
		padding-block: var(--space-10);
	}

	.single-article .entry-header {
		padding-top: var(--space-10);
	}

	.hero {
		padding-block: var(--space-10) var(--space-12);
	}

	.category-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.tool-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.post-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-4);
	}

	/* Phần dưới trang chủ thành ba dải: chuyên mục; bài mới (8 cột) cạnh giải (4 cột); hỏi đáp cạnh Về pickle.vn */
	.home-lower {
		padding-bottom: var(--space-12);
	}

	.home-lower__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--space-12) var(--space-6);
		align-items: start;
	}

	.home-section {
		grid-column: 1 / -1;
	}

	.home-section--latest,
	.home-section--faq {
		grid-column: span 8;
	}

	.home-section--events,
	.home-section--about {
		grid-column: span 4;
	}

	/* Hàng tiêu đề cao bằng liên kết "Xem tất cả", để hai khung cạnh nhau thẳng hàng dù khối có liên kết hay không */
	.home-head {
		min-height: var(--tap);
	}

	.home-lower__grid.has-no-events .home-section--latest,
	.home-lower__grid.has-no-posts .home-section--events {
		grid-column: 1 / -1;
	}

	.home-list--cats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Cột hẹp (4/12): liên kết "Xem lịch giải" về hàng cuối khung như trên điện thoại, để hàng tiêu đề chỉ một dòng
	   và khung giải thẳng hàng với khung bài viết bên cạnh */
	.home-section--events .home-head__more {
		display: none;
	}

	.home-section--events .home-frame__more {
		display: flex;
	}

	.home-lower__grid.has-no-posts .home-section--events .home-head__more {
		display: inline-flex;
	}

	.home-lower__grid.has-no-posts .home-section--events .home-frame__more {
		display: none;
	}

	/* Ảnh rộng (alignwide) tràn ra 960px quanh cột nội dung 720px */
	.entry-content .alignwide {
		width: calc(100% + 240px);
		max-width: none;
		margin-left: -120px;
	}
}

.entry-content .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	border-radius: 0;
}

.entry-content .alignfull img {
	border-radius: 0;
}

/* 20. Giảm chuyển động và bản in
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.button:hover,
	.post-card:hover,
	.category-card:hover {
		transform: none;
	}
}

@media print {
	.site-header,
	.site-footer,
	.contact-bar,
	.section--cta,
	.section--related,
	.toc,
	.skip-link,
	.hero-shortcuts {
		display: none !important;
	}

	body {
		padding: 0 !important;
		background: #FFFFFF;
		font-size: 12pt;
	}
}

/* ------------------------------------------------------------------
 * Cảnh báo lừa đảo (trang Chơi mở tuần này, trang CLB, lịch xé vé của sân)
 * ------------------------------------------------------------------ */
.scam-box {
	max-width: var(--measure);
	margin-top: var(--space-5);
	padding: var(--space-3);
	background: #FFF8E6;
	border: 1px solid #F0D58C;
	border-left: 6px solid #B45309;
	border-radius: var(--radius);
}

.scam-box .scam-box__title {
	display: flex;
	align-items: flex-start;
	gap: var(--space-1);
	margin: 0 0 var(--space-2);
	font-size: var(--fs-h3);
	line-height: var(--lh-snug);
}

.scam-box__title .icon {
	flex: none;
	margin-top: 2px;
	color: #B45309;
}

.scam-box p {
	margin: 0 0 var(--space-2);
}

.scam-box .scam-box__signs {
	margin: 0 0 var(--space-2);
	padding-left: 1.25em;
}

.scam-box .scam-box__signs li {
	margin-bottom: var(--space-1);
}

.scam-box__sources summary {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	color: var(--color-primary-dark);
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

.scam-box__sources ul {
	margin: 0;
	padding-left: 1.25em;
	font-size: var(--fs-sm);
}

.scam-box__sources li {
	margin-bottom: var(--space-1);
}

.scam-note {
	display: flex;
	align-items: flex-start;
	gap: var(--space-1);
	margin: var(--space-2) 0 0;
	padding: var(--space-2);
	background: #FFF8E6;
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
}

.scam-note .icon {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: #B45309;
}

/* Liên kết đi kèm danh bạ sân: Chơi mở tuần này, CLB của tỉnh */
.area-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
}

.area-links__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: var(--tap);
	padding: var(--space-1) var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	color: var(--color-primary-dark);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

.area-links__link .icon {
	flex: none;
	width: 20px;
	height: 20px;
}

.area-links__link .icon--chevron {
	width: 16px;
	height: 16px;
}

@media (hover: hover) {
	.area-links__link:hover {
		background: var(--color-primary-soft);
		border-color: var(--color-primary);
	}
}