/**
 * NHÁNH TIN TỨC — danh sách · chuyên mục · chi tiết  (T-501 · T-502 · T-503)
 *
 * Nguồn số đo: `docs/potaco-layout/home-new/home-news-ui-spec-pixel.md` v2
 * (2026-09-15) — đo tỉ lệ trên 4 ảnh layout rồi quy về container 1200 / 375.
 * Màu, cỡ chữ, bo góc lấy TỪ TOKEN; số đo riêng của nhánh (428px ảnh nổi bật,
 * thumb 160×120, hotline 20px…) ghi thẳng vì không có token tương ứng.
 *
 * Bố cục 2 cột: main | sidebar 280 (`--sidebar-w`), gap 24. Sidebar bên PHẢI —
 * khác ba archive trước (spec home-news §4). Dính khi cuộn do `.sidebar` chung
 * ở components.css §10 lo (đã có max-height + overflow).
 *
 * ⚠️ Banner → nội dung: 40px do `components.css` §8b lo (`--hero-gap`). File này
 *    KHÔNG tự đệm trên cho khối đầu tiên dưới banner (CLAUDE.md §5).
 *
 * ⚠️ Theme không có `box-sizing: border-box` toàn cục — chỗ nào đặt `width` cố
 *    định kèm `padding` đều tự khai.
 *
 * ⚠️ Pagination và CTA band: dùng component chung NGUYÊN TRẠNG (chốt
 *    2026-09-15) — file này không ghi đè chúng.
 */

/* =========================================================================
 * 1. BỐ CỤC CHUNG — main + sidebar phải
 * ====================================================================== */

.news-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sidebar-w, 280px);
	gap: var(--sp-6);
	align-items: start;
	/* Pagination / bài liên quan → CTA band: 32 (đo 24–35). */
	margin-bottom: var(--sp-8);
}

.news-layout__content {
	min-width: 0;
}

/* `.site-main` chung đệm trên 48px; banner đã mang `--hero-gap`. Trang chi
   tiết không có banner mà có dải breadcrumb — cũng cách 24 (đo 22). */
.site-main--news {
	padding-top: 0;
}

.site-main--post {
	padding-top: var(--sp-6);
}

@media (max-width: 991px) {

	.news-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-6);
	}
}

/* =========================================================================
 * 2. HÀNG CHIP LỌC — trong cột main, đỉnh ngang đỉnh sidebar
 * ====================================================================== */

.news-filters {
	margin-bottom: var(--sp-5);
}

.news-filters:empty {
	display: none;
}

/* Chip mặc định có viền mảnh (đo: nền #F8F9FB, viền rất nhạt). */
.news-filters .filter-chips__item {
	font-weight: var(--fw-medium);
	border: var(--border-w) solid var(--c-border);
}

.news-filters .filter-chips__item.is-active {
	border-color: var(--c-primary);
}

@media (hover: hover) and (pointer: fine) {

	.news-filters .filter-chips__item:not(.is-active):hover {
		background: var(--c-primary-50);
	}
}

@media (max-width: 767px) {

	/* Cuộn ngang full-bleed: chip cuối được phép cắt ở mép phải — gợi ý cuộn. */
	.news-filters {
		margin-inline: calc(-1 * var(--gutter, 16px));
		margin-bottom: var(--sp-4);
		padding-inline: var(--gutter, 16px);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.news-filters::-webkit-scrollbar {
		display: none;
	}

	.news-filters .filter-chips {
		flex-wrap: nowrap;
		width: max-content;
	}

	.news-filters .filter-chips__item {
		padding-inline: var(--sp-4);
		white-space: nowrap;
	}
}

/* =========================================================================
 * 3. CARD NGANG — `.card--post-meta` (lưới) · `-sm` (liên quan) · `-xs` (SP)
 *    Ghi đè bố cục DỌC của `.card` chung (components.css §5).
 * ====================================================================== */

.card--post-meta {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: var(--sp-4);
	align-items: start;
	min-height: 144px;
	padding: var(--sp-3);
	box-sizing: border-box;
}

.card--post-meta .card__media {
	border-radius: 6px;
}

/* Thumb 4:3 từ nguồn `potaco-card` 3:2 — object-fit cắt bớt hai mép. */
.card--post-meta .card__thumb {
	aspect-ratio: 4 / 3;
}

.card--post-meta .card__badge {
	top: 8px;
	left: 8px;
	padding: 3px 8px;
	font-size: 11px;
	border-radius: var(--radius-sm);
}

.card--post-meta .card__body {
	gap: var(--sp-2);
	min-height: 120px;
	padding: 0;
}

.card--post-meta .card__title {
	font-size: var(--fs-body);
	line-height: 1.4;
}

/* Meta xuống đáy để card cùng hàng thẳng chân (spec §11 v1, giữ nguyên).
   MỘT hàng, không wrap: "20/08/2026 • 892 lượt xem" ở 13px vừa cột chữ 240px
   (đo lần chụp đầu: 14px + gap 8 tràn 5px và rơi "lượt xem" xuống dòng). */
.card--post-meta .card__meta {
	flex-wrap: nowrap;
	gap: 6px;
	margin-top: auto;
	font-size: 13px;
	line-height: 1.5;
	white-space: nowrap;
}

.card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.card__meta-icon {
	flex: 0 0 auto;
	color: var(--c-text-muted);
}

.card__meta-sep,
.post__meta-sep,
.popular-list__sep {
	color: var(--c-border-strong);
}

/* --- cỡ nhỏ: bài liên quan PC (thumb 128×96) --- */

.card--post-meta-sm {
	grid-template-columns: 128px minmax(0, 1fr);
	gap: var(--sp-3);
	min-height: 0;
}

/* Cột chữ ~124px: "27/07/2026 • 210" không vừa một hàng ở 12px (probe 1920:
   tràn +22px) — cho phép rơi lượt xem xuống hàng hai. */
.card--post-meta-sm .card__meta {
	flex-wrap: wrap;
	white-space: normal;
}

.card--post-meta-sm .card__meta-item {
	white-space: nowrap;
}

.card--post-meta-sm .card__body {
	min-height: 96px;
}

.card--post-meta-sm .card__title {
	font-size: var(--fs-sm);
}

.card--post-meta-sm .card__meta {
	font-size: var(--fs-xs);
}

/* =========================================================================
 * 4. BÀI NỔI BẬT — ngang ở PC, dọc ở SP
 * ====================================================================== */

.news-featured {
	margin-bottom: var(--sp-4);
}

.card--post-featured {
	display: grid;
	grid-template-columns: 428px minmax(0, 1fr);
	column-gap: var(--sp-6);
	align-items: start;
	padding: var(--sp-3);
	box-sizing: border-box;
}

.card--post-featured .card__media {
	border-radius: 6px;
}

/* Đo 2,21:1 trên layout → 11/5. Ảnh `potaco-hero` 1920×720 (2,67:1) cắt nhẹ hai mép. */
.card--post-featured .card__thumb {
	aspect-ratio: 11 / 5;
}

.card--post-featured .card__body {
	gap: 0;
	padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
}

.card--post-featured .card__title {
	font-size: 24px;   /* đo ≈25; giữa --fs-h3 (22) và --fs-h2 (32) */
	line-height: 1.25;
	font-weight: var(--fw-bold);
}

.card--post-featured .card__desc {
	-webkit-line-clamp: 3;
	margin-top: var(--sp-3);
	font-size: 15px;
	line-height: 1.6;
}

.card--post-featured .card__meta {
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}

@media (max-width: 1199px) {

	.card--post-featured {
		grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	}
}

@media (max-width: 767px) {

	/* SP: chuyển DỌC — ảnh trên (đo 3,4:1 → 16/5), chữ dưới. */
	.card--post-featured {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	.card--post-featured .card__thumb {
		aspect-ratio: 16 / 5;
	}

	.card--post-featured .card__body {
		padding: var(--sp-3) var(--sp-1) var(--sp-1);
	}

	.card--post-featured .card__title {
		font-size: 18px;
		line-height: 1.3;
	}

	.card--post-featured .card__desc {
		margin-top: var(--sp-2);
		font-size: var(--fs-sm);
	}

	.card--post-featured .card__meta {
		margin-top: var(--sp-3);
		font-size: var(--fs-xs);
	}
}

/* =========================================================================
 * 5. LƯỚI TIN — 2 cột PC · danh sách không viền SP
 * ====================================================================== */

.news-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-4);
	align-items: stretch;
}

/* Phân trang: component chung có `margin-top: --section-gap` (80) cho archive
   thường; layout tin tức đo 24 giữa lưới và phân trang. */
.news-layout .pagination {
	margin-top: var(--sp-6);
}

/* Tablet 768–991: card còn ~352px, cột chữ ~152px — meta được phép rơi
   "892 lượt xem" xuống dòng thứ hai (từng mục vẫn nguyên khối), thay vì cắt. */
@media (max-width: 991px) {

	.card--post-meta .card__meta {
		flex-wrap: wrap;
		white-space: normal;
	}

	.card--post-meta .card__meta-item {
		white-space: nowrap;
	}
}

@media (max-width: 767px) {

	.news-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* Danh sách KHÔNG viền, ngăn bằng kẻ 1px (layout SP). */
	.news-grid .card--post-meta {
		grid-template-columns: 140px minmax(0, 1fr);
		gap: var(--sp-3);
		min-height: 0;
		padding: var(--sp-3) 0;
		background: transparent;
		border: 0;
		border-bottom: var(--border-w) solid var(--c-border);
		border-radius: 0;
	}

	.news-grid .card--post-meta:first-child {
		padding-top: 0;
	}

	.news-grid .card--post-meta:last-child {
		border-bottom: 0;
	}

	.news-grid .card--post-meta .card__body {
		min-height: 105px;
	}

	.news-grid .card--post-meta .card__title {
		-webkit-line-clamp: 3;
		font-size: 15px;
	}

	.news-grid .card--post-meta .card__meta {
		font-size: var(--fs-xs);
	}

	/* Hover nhấc thẻ (components §5) vô nghĩa với hàng danh sách. */
	.news-grid .card--post-meta:hover {
		transform: none;
		box-shadow: none;
	}
}

/* =========================================================================
 * 6. SIDEBAR TIN TỨC — khối trắng viền, tiêu đề có gạch cam, thanh gập ở SP
 * ====================================================================== */

.sidebar--news {
	gap: var(--sp-5);   /* đo 20–21 */
}

/* Tiêu đề khối: 16/700 uppercase + gạch nhấn 32×3 cam. */
.sidebar--news .sidebar-block__title {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
}

.sidebar--news .sidebar-block__title::after {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	margin-top: var(--sp-2);
	background: var(--c-accent);
}

/* `<details>` bọc khối — ở PC là vô hình (summary ẩn, luôn mở nhờ news.js). */
.news-acc {
	display: block;
}

.news-acc__summary {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	min-height: 44px;
	padding: 0 var(--sp-4);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	color: var(--c-heading);
	background: var(--c-bg);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
	list-style: none;
	cursor: pointer;
}

.news-acc__summary::-webkit-details-marker {
	display: none;
}

.news-acc__caret {
	flex: 0 0 auto;
	color: var(--c-text-muted);
	transition: var(--transition);
}

.news-acc[open] .news-acc__caret {
	transform: rotate(90deg);
}

/* --- Chuyên mục: `.cat-nav` dùng chung (components.css §10) ---
 * Override `.sidebar-block--cats` (hàng 40px, đếm "(4)") đã xoá — C-17 v2,
 * T-216.3 (2026-09-18): một mẫu danh mục toàn site theo Sản phẩm. */

/* --- Bài xem nhiều --- */

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

.popular-list__item {
	border-bottom: var(--border-w) solid var(--c-border);
}

.popular-list__item:last-child {
	border-bottom: 0;
}

.popular-list__link {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: var(--sp-3);
	align-items: start;   /* ô ảnh không kéo dài theo cột chữ */
	padding: var(--sp-3) 0;
	color: inherit;
	text-decoration: none;
}

.popular-list__item:first-child .popular-list__link {
	padding-top: 0;
}

.popular-list__item:last-child .popular-list__link {
	padding-bottom: 0;
}

.popular-list__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--c-bg-alt);
}

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

.popular-list__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.popular-list__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	line-height: 1.4;
	color: var(--c-heading);
}

.popular-list__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
	white-space: nowrap;
}

.popular-list__meta > * {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

@media (hover: hover) and (pointer: fine) {

	.popular-list__link:hover .popular-list__title {
		color: var(--c-primary);
	}
}

/* --- Mục lục trong sidebar (chi tiết bài): mục đang xem nền cam nhạt --- */

.sidebar-block--toc .toc__title {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-body);
	text-transform: uppercase;
}

.sidebar-block--toc .toc__title::after {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	margin-top: var(--sp-2);
	background: var(--c-accent);
}

.sidebar-block--toc .toc__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar-block--toc .toc__link {
	padding: var(--sp-2) var(--sp-3);
	line-height: 1.4;
	border-left: 2px solid transparent;
	border-radius: var(--radius-sm);
}

.sidebar-block--toc .toc__item--l3 .toc__link {
	position: relative;
	padding-left: 28px;
	font-size: 13px;
}

.sidebar-block--toc .toc__item--l3 .toc__link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 14px;
	width: 5px;
	height: 5px;
	background: var(--c-accent);
	border-radius: 50%;
	transform: translateY(-50%);
}

@media (hover: hover) and (pointer: fine) {

	.sidebar-block--toc .toc__link:hover {
		background: var(--c-bg-alt);
	}
}

.sidebar-block--toc .toc__link.is-current {
	font-weight: var(--fw-medium);
	color: var(--c-accent-strong);
	background: var(--c-accent-50);
	border-left-color: var(--c-accent);
}

@media (max-width: 991px) {

	.sidebar--news {
		gap: var(--sp-4);
	}

	/* Mục lục sidebar chỉ cho PC — SP dùng thanh gập giữa bài. */
	.sidebar-block--toc {
		display: none;
	}

	/* Thanh gập thay tiêu đề khối. */
	.news-acc__summary {
		display: flex;
	}

	.news-acc[open] .news-acc__summary {
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}

	/* Thanh gập đã là tiêu đề — khối bên trong bỏ header navy + bo góc trên,
	   dán liền dưới thanh. Áp cho cả `.cat-nav` (chuyên mục) lẫn `.sidebar-block`
	   (bài xem nhiều). */
	.news-acc > .sidebar-block,
	.news-acc > .cat-nav {
		border-top: 0;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.news-acc .sidebar-block__title,
	.news-acc .cat-nav__title {
		display: none;
	}

	.news-acc > .cat-nav .cat-nav__item:first-child > .cat-nav__link {
		border-top: 0;
	}
}

/* =========================================================================
 * 7. CHI TIẾT BÀI — dải breadcrumb · đầu bài · ảnh · thân bài
 * ====================================================================== */

/* `.breadcrumb-bar` (dải breadcrumb đứng riêng, không banner) đã DỜI về
   `components.css` §8c (T-605.3) — trang Cảm ơn dùng cùng dải, ≥2 trang ⇒
   common (CLAUDE.md §5). Ở đây chỉ còn phần riêng của bài viết: mục cuối là
   TIÊU ĐỀ BÀI dài nên xuống hàng riêng + clamp 1 dòng ở SP (khối @media dưới). */

.post__header {
	margin-bottom: var(--sp-5);
}

.post__cat {
	display: inline-flex;
	align-items: center;
	height: 28px;
	margin-bottom: var(--sp-4);
	padding: 0 var(--sp-3);
	font-size: 13px;
	font-weight: var(--fw-medium);
	color: var(--c-heading);
	text-decoration: none;
	background: var(--c-primary-50);
	border-radius: 6px;
}

@media (hover: hover) and (pointer: fine) {

	.post__cat:hover {
		color: var(--c-text-invert);
		background: var(--c-primary);
	}
}

.post__title {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-h1);
	line-height: 1.2;
	color: var(--c-heading);
}

.post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.post__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.post__thumb {
	margin: 0 0 var(--sp-6);
	overflow: hidden;
	border-radius: var(--radius-md);
}

/* Đo 3,8:1 trên layout → 18/5. Nguồn `potaco-hero` 2,67:1 cắt trên/dưới. */
.post__thumb-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 18 / 5;
	object-fit: cover;
	object-position: center;
}

/* --- Thân bài: 17px là NGOẠI LỆ CÓ CHỦ ĐÍCH cho trang đọc dài (spec
   single-post §4), khai biến riêng, không sửa token gốc. --- */

.post__body {
	--fs-article: 1.0625rem;

	font-size: var(--fs-article);
	line-height: var(--lh-body);
	color: var(--c-text);
}

.post__body > * {
	margin-top: 0;
	margin-bottom: var(--sp-4);
}

.post__body > :last-child {
	margin-bottom: 0;
}

.post__body h2,
.post__body h3,
.post__body h4 {
	font-family: var(--font-heading);
	color: var(--c-heading);
	scroll-margin-top: calc(var(--header-h, 72px) + var(--sp-4));
}

.post__body h2 {
	margin: var(--sp-8) 0 var(--sp-3);
	font-size: var(--fs-h2);
	line-height: 1.25;
}

.post__body h3 {
	margin: var(--sp-6) 0 var(--sp-2);
	font-size: var(--fs-h3);
	line-height: 1.3;
}

.post__body h4 {
	margin: var(--sp-5) 0 var(--sp-2);
	font-size: var(--fs-h4);
}

.post__body > h2:first-child,
.post__body > h3:first-child {
	margin-top: 0;
}

.post__body ul,
.post__body ol {
	padding-left: var(--sp-5);
}

.post__body li {
	margin: 6px 0;
}

.post__body li::marker {
	color: var(--c-accent);
	font-weight: var(--fw-semi);
}

.post__body a {
	color: var(--c-primary);
	text-decoration: underline;
}

.post__body a:hover {
	color: var(--c-accent-strong);
}

.post__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

/* Blockquote: nền cam nhạt, viền trái 4px cam, dấu ❝ (đo cao 87). */
.post__body blockquote {
	position: relative;
	margin: var(--sp-6) 0;
	padding: var(--sp-5) var(--sp-6) var(--sp-5) 56px;
	font-style: italic;
	background: var(--c-accent-50);
	border-left: 4px solid var(--c-accent);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.post__body blockquote::before {
	content: "\201C";
	position: absolute;
	top: 14px;
	left: 20px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 44px;
	font-style: normal;
	line-height: 1;
	color: var(--c-accent);
}

.post__body blockquote p {
	margin: 0;
}

.post__body blockquote p + p {
	margin-top: var(--sp-3);
}

/* Figure canh phải trong bài (Gutenberg `.alignright` / classic `.alignright`). */
.post__body figure {
	margin: 0 0 var(--sp-4);
}

.post__body figcaption {
	margin-top: var(--sp-2);
	font-size: 13px;
	text-align: center;
	color: var(--c-text-muted);
}

@media (min-width: 768px) {

	.post__body .alignright {
		float: right;
		width: 328px;
		max-width: 40%;
		margin: var(--sp-1) 0 var(--sp-4) var(--sp-6);
	}

	.post__body .alignleft {
		float: left;
		width: 328px;
		max-width: 40%;
		margin: var(--sp-1) var(--sp-6) var(--sp-4) 0;
	}

	.post__body .alignright img,
	.post__body .alignleft img {
		width: 100%;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}

	/* Heading sau figure nổi không được kẹp cạnh ảnh. */
	.post__body h2 {
		clear: both;
	}
}

.post__body .aligncenter {
	margin-inline: auto;
	text-align: center;
}

/* Thanh mục lục gập giữa bài — chỉ SP (<992). PC dùng mục lục sidebar. */
.post__toc-bar {
	display: none;
	margin: var(--sp-5) 0;
}

/* Thu gọn bài dài (news.js bật ở <768 khi cao > 1400). */
.post__body.is-collapsed {
	position: relative;
	max-height: 1200px;
	overflow: hidden;
}

.post__body.is-collapsed::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 80px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--c-bg) 100%);
	pointer-events: none;
}

/* `display: flex` thắng kiểu UA của `[hidden]` — phải khai tường minh, nếu
   không nút "Xem thêm" hiện ở MỌI khổ dù server in `hidden` (lỗi lần chụp 1). */
.post__more[hidden] {
	display: none;
}

.post__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}

.post__more-dots {
	font-size: var(--fs-body);
	letter-spacing: 2px;
	color: var(--c-text-muted);
}

.post__more-btn {
	min-height: 36px;
	padding: 0 var(--sp-5);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	border-color: var(--c-border-strong);
	border-radius: var(--radius-full);
}

/* =========================================================================
 * 8. CHIA SẺ · BÀI TRƯỚC/SAU · BÀI LIÊN QUAN
 * ====================================================================== */

.post .share {
	gap: var(--sp-3);
	margin-top: var(--sp-8);
}

.post .share__label {
	font-weight: var(--fw-semi);
	color: var(--c-text);
}

/* Nút tròn 44, viền mảnh, icon 18 navy — ghi đè pill chữ của §11 chung. */
.post .share__btn {
	width: 44px;
	min-width: 0;
	height: 44px;
	padding: 0;
	color: var(--c-heading);
	background: var(--c-bg);
	border: var(--border-w) solid var(--c-border);
	border-radius: 50%;
	box-sizing: border-box;
	cursor: pointer;
	transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {

	.post .share__btn:hover {
		background: var(--c-bg-alt);
		border-color: var(--c-border-strong);
	}
}

.post .share__btn.is-copied {
	color: var(--c-accent-strong);
	border-color: var(--c-accent);
}

.share__feedback {
	font-size: var(--fs-sm);
	color: var(--c-accent-strong);
}

/* --- Bài trước / sau: ô 88px, chevron hai đầu, PC không thumb --- */

.post .prev-next {
	gap: var(--sp-4);
	margin-top: var(--sp-6);
}

.post .prev-next__link {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: 88px;
	padding: var(--sp-4) var(--sp-5);
	box-sizing: border-box;
	transition: var(--transition);
}

.post .prev-next__link--next {
	justify-content: flex-end;
	text-align: right;
}

.post .prev-next__link--full {
	grid-column: 1 / -1;
}

.prev-next__icon {
	flex: 0 0 auto;
	color: var(--c-text-muted);
}

.prev-next__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	min-width: 0;
}

.prev-next__media {
	display: none;   /* chỉ SP, xem media query dưới */
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: 6px;
	background: var(--c-bg-alt);
}

.prev-next__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post .prev-next__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--fs-sm);
	line-height: 1.4;
}

@media (hover: hover) and (pointer: fine) {

	.post .prev-next__link:hover {
		border-color: var(--c-border-strong);
	}

	.post .prev-next__link:hover .prev-next__title {
		color: var(--c-primary);
	}
}

/* --- Bài liên quan: 3 card ngang nhỏ, Swiper hé card kế ở SP --- */

.post .related {
	margin: var(--sp-8) 0 0;
}

.related__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
}

.post .related__title {
	margin: 0;
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
}

/* Không gạch cam dưới tiêu đề (layout) — bỏ `::after` của `.single-block__title`. */
.post .related__title::after {
	display: none;
}

/* "Xem tất cả →" chỉ có ở layout SP. */
.related__more {
	display: none;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: var(--fw-semi);
	color: var(--c-primary);
	text-decoration: none;
	white-space: nowrap;
}

/* Thẻ nhấc lên 2px khi hover — Swiper `overflow: hidden` xén mất phần đó nếu
   không chừa chỗ (cùng bài học `.fields__list--slider`). */
.related__slider {
	padding: 4px 0 var(--sp-2);
	margin: -4px 0 0;
}

/* ⚠️ Chọn bằng HAI class: `swiper.min.css` được enqueue từ template-part nên in
   ở FOOTER, sau file này — cùng độ ưu tiên thì nó thắng (`.swiper-slide {width:
   100%}` đè `width: 88%`, `.swiper-pagination {position: absolute}` đè dots
   đứng dưới card — lỗi lần chụp 3). */
.related__slider .related__slide {
	height: auto;
	box-sizing: border-box;
}

.related__slide > .card {
	height: 100%;
}

.related__slider .related__dots {
	display: none;
	position: static;
	justify-content: center;
	margin-top: var(--sp-3);
}

.related__dots .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0 4px;
	background: var(--c-border-strong);
	opacity: 1;
}

.related__dots .swiper-pagination-bullet-active {
	background: var(--c-primary);
}

/* =========================================================================
 * 9. CHI TIẾT — KHỔ HẸP
 * ====================================================================== */

@media (max-width: 991px) {

	.post__toc-bar {
		display: block;
	}

	/* Thanh gập: nền primary-50, cao 44, icon list + nhãn + chevron. */
	.post__toc-bar .toc__title {
		display: none;
	}

	.post__toc-bar .toc__toggle {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
		width: 100%;
		min-height: 44px;
		padding: 0 var(--sp-4);
		font-family: var(--font-heading);
		font-size: var(--fs-sm);
		font-weight: var(--fw-bold);
		text-align: left;
		text-transform: uppercase;
		color: var(--c-heading);
		background: var(--c-primary-50);
		border: 0;
		border-radius: var(--radius-md);
		box-sizing: border-box;
		cursor: pointer;
	}

	.post__toc-bar .toc__toggle-label {
		flex: 1 1 auto;
	}

	.post__toc-bar .toc__toggle-caret {
		flex: 0 0 auto;
		width: 8px;
		height: 8px;
		border-right: 2px solid currentcolor;
		border-bottom: 2px solid currentcolor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: var(--transition);
	}

	.post__toc-bar .toc--collapsible.is-open .toc__toggle-caret {
		transform: rotate(-135deg) translate(-2px, -2px);
	}

	.post__toc-bar .toc__panel {
		display: none;
		padding: var(--sp-3) var(--sp-4);
		border: var(--border-w) solid var(--c-border);
		border-top: 0;
		border-radius: 0 0 var(--radius-md) var(--radius-md);
	}

	.post__toc-bar .toc--collapsible.is-open .toc__panel {
		display: block;
	}

	.post__toc-bar .toc--collapsible.is-open .toc__toggle {
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}

	.post__toc-bar .toc__list {
		display: flex;
		flex-direction: column;
		gap: var(--sp-1);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.post__toc-bar .toc__link {
		padding: var(--sp-2) var(--sp-3);
		border-left: 2px solid transparent;
		border-radius: var(--radius-sm);
	}

	.post__toc-bar .toc__item--l3 .toc__link {
		padding-left: 28px;
		font-size: 13px;
	}

	.post__toc-bar .toc__link.is-current {
		color: var(--c-accent-strong);
		background: var(--c-accent-50);
		border-left-color: var(--c-accent);
	}
}

@media (max-width: 767px) {

	.site-main--post {
		padding-top: var(--sp-5);
	}

	/* Bar hai dòng của bài viết thở thêm 12px trên/dưới (đo 2026-09-16). Chỉ
	   `.single-post`: bar một dòng của trang khác giữ 48 (components.css §8c). */
	.single-post .breadcrumb-bar {
		padding: var(--sp-3) 0;
	}

	/* Mục cuối (tiêu đề bài) xuống hàng riêng, clamp 1 dòng + "…" (layout SP).
	   `flex-basis: 100%` ép nó rơi xuống hàng hai; `min-width: 0` để hộp flex
	   được co lại — thiếu dòng này li giữ nguyên bề rộng chữ và đẩy trang
	   tràn ngang 27px (đo bằng probe-viewport 375×800, lần 1).
	   Scope `.single-post`: trang Cảm ơn cũng dùng `.breadcrumb-bar` nhưng mục
	   cuối là "Cảm ơn" — ngắn, không được rơi xuống hàng hai. */
	.single-post .breadcrumb-bar .breadcrumb__item:last-child {
		flex: 0 0 100%;
		min-width: 0;
	}

	.single-post .breadcrumb-bar .breadcrumb__current {
		display: block;
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.post__title {
		font-size: var(--fs-h1);   /* token SP = 30 */
	}

	.post__meta {
		font-size: var(--fs-sm);
	}

	.post__thumb {
		margin-bottom: var(--sp-5);
	}

	/* Đo 2,75:1 trên layout SP → 11/4. */
	.post__thumb-img {
		aspect-ratio: 11 / 4;
	}

	.post__body {
		--fs-article: var(--fs-body);
	}

	.post__body blockquote {
		padding: var(--sp-4) var(--sp-4) var(--sp-4) 48px;
	}

	.post__body blockquote::before {
		top: 10px;
		left: 14px;
		font-size: 36px;
	}

	.post .share {
		margin-top: var(--sp-6);
	}

	/* Prev/next xếp dọc, CÓ thumb 72 (layout SP). */
	.post .prev-next {
		gap: var(--sp-3);
	}

	.post .prev-next__link {
		min-height: 80px;
		padding: var(--sp-3) var(--sp-4);
	}

	.prev-next__media {
		display: block;
	}

	.post .prev-next__title {
		-webkit-line-clamp: 3;
	}

	/* Bài liên quan: hàng tiêu đề + "Xem tất cả", slider hé card kế, dots. */
	.post .related {
		margin-top: var(--sp-6);
	}

	.post .related__title {
		font-size: var(--fs-body);
	}

	.related__more {
		display: inline-flex;
	}

	.related__slider {
		margin-right: calc(-1 * var(--gutter, 16px));
		padding-right: var(--gutter, 16px);
	}

	.related__slider .related__slide {
		width: 88%;
	}

	.related__slider .related__dots {
		display: flex;
	}

	.related .card--post-meta-sm {
		grid-template-columns: 100px minmax(0, 1fr);
	}

	.related .card--post-meta-sm .card__body {
		min-height: 75px;
	}

	.related .card--post-meta-sm .card__title {
		-webkit-line-clamp: 3;
		font-size: 15px;
	}
}