/* Trang bài chi tiết — chỉ nạp khi is_single(). Các task sau nối thêm vào cuối file. */

/* ===== Meta đầu bài ===== */
.cg-entry-meta__author {
	display: flex;
	align-items: center;
	gap: 11px;
	color: inherit;
}

.cg-entry-meta__author:hover .cg-entry-meta__name {
	color: var(--cg-accent);
}

.cg-entry-meta__avatar {
	display: block;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 50%;
	background: var(--cg-bg-media);
	overflow: hidden;
}

.cg-entry-meta__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cg-entry-meta__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cg-entry-meta__name {
	font-size: 14px;
	font-weight: 500;
	transition: color 160ms ease;
}

.cg-entry-meta__sub {
	font-size: 12px;
	color: var(--cg-text-faint);
}

/* ===== Nút chia sẻ ===== */
.cg-share {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.cg-share__label {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cg-text-faint);
	font-weight: 500;
}

.cg-share__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--cg-bg-media);
	color: var(--cg-text-soft);
	cursor: pointer;
	padding: 0;
	transition: background 160ms ease, color 160ms ease;
}

.cg-share__btn:hover {
	background: var(--cg-accent);
	color: var(--cg-on-dark);
}

.cg-share__btn--text {
	font-family: var(--cg-font-sans);
	font-size: 12.5px;
	font-weight: 600;
}

.cg-share__btn--copy {
	width: auto;
	gap: 9px;
	padding: 0 18px;
	border-radius: 22px;
	font-family: var(--cg-font-sans);
	font-size: 13px;
	font-weight: 500;
}

.cg-share__btn--copy:hover {
	background: var(--cg-text);
	color: var(--cg-on-dark);
}

@media (max-width: 859.98px) {
	/* Dưới 860px sidebar đã xuống dưới nên cột chính rộng hết; thiết kế cho bài
	   `100%` ở khổ này (chi-tiet-van-hoa.html: articleMax = mobile ? "100%" : "760px",
	   với mobile = w < 860). Thiếu luật này thì bài kẹt ở 760px và lệch trái.

	   Phải NÂNG ĐỘ ĐẶC HIỆU lên (0,3,0) chứ không chép nguyên selector gốc: luật
	   `max-width: 760px` nằm ở dòng ~297, tức SAU khối @media này. Cùng độ đặc hiệu
	   thì luật đứng sau thắng, và bản sửa sẽ không đổi được gì. Để độ đặc hiệu
	   quyết định, đừng để thứ tự dòng quyết định. */
	.cg-single .cg-layout__main .cg-article,
	.cg-single .cg-layout__main .cg-author-box,
	.cg-single .cg-layout__main .cg-post-nav,
	.cg-single .cg-layout__main .cg-related {
		max-width: 100%;
	}

	.cg-share__btn--copy {
		width: 44px;
		padding: 0;
		border-radius: 50%;
	}

	.cg-share__label-copy {
		display: none;
	}
}

/* ===== Hộp tác giả ===== */
.cg-author-box {
	margin-top: clamp(30px, 3.6vw, 42px);
	background: var(--cg-bg-alt);
	border: 1px solid var(--cg-border-light);
	padding: clamp(22px, 2.6vw, 30px);
	display: flex;
	gap: clamp(16px, 2vw, 24px);
	flex-wrap: wrap;
	align-items: flex-start;
}

.cg-author-box__avatar {
	display: block;
	width: 82px;
	height: 82px;
	flex: none;
	border-radius: 50%;
	background: var(--cg-bg-media);
	overflow: hidden;
}

.cg-author-box__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cg-author-box__body {
	flex: 1;
	min-width: 220px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.cg-author-box__label {
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cg-text-meta);
	font-weight: 500;
}

.cg-author-box__name {
	margin: 0;
	font-family: var(--cg-font-serif);
	font-size: 20px;
	font-weight: 500;
}

.cg-author-box__bio {
	margin: 0;
	font-size: 14px;
	line-height: 1.75;
	color: var(--cg-text-soft);
	max-width: 62ch;
	text-wrap: pretty;
}

.cg-author-box__more {
	font-size: 13px;
	font-weight: 500;
	color: var(--cg-accent);
	letter-spacing: 0.04em;
	padding-top: 2px;
}

/* ===== Bài trước / bài sau ===== */
.cg-post-nav {
	margin-top: clamp(28px, 3.2vw, 40px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.cg-post-nav__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: 1px solid var(--cg-border);
	padding: 18px 20px;
	background: var(--cg-bg);
	color: inherit;
	transition: border-color 160ms ease, background 160ms ease;
}

.cg-post-nav__item:hover {
	border-color: var(--cg-text);
	background: var(--cg-bg-alt);
	color: inherit;
}

.cg-post-nav__item--next {
	text-align: right;
	align-items: flex-end;
}

.cg-post-nav__label {
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cg-text-faint);
}

.cg-post-nav__title {
	font-family: var(--cg-font-serif);
	font-size: 17px;
	line-height: 1.4;
	font-weight: 500;
	text-wrap: pretty;
}

@media (max-width: 619.98px) {
	.cg-post-nav {
		grid-template-columns: 1fr;
	}

	.cg-post-nav__item--next {
		text-align: left;
		align-items: flex-start;
	}
}

/* ===== Bài liên quan ===== */
.cg-related {
	margin-top: clamp(36px, 4.2vw, 54px);
}

.cg-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(22px, 2.6vw, 30px);
	padding-top: clamp(20px, 2.4vw, 28px);
}

@media (max-width: 619.98px) {
	.cg-related__grid {
		grid-template-columns: 1fr;
	}
}

/* ===== Progress bar đọc bài ===== */
/* Nằm trong <header> (header.php) nên ăn theo position:sticky của header,
   không tự dính — hai phần tử cùng dính top:0 sẽ che nhau. */
.cg-progress {
	height: 2px;
	background: transparent;
}

.cg-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--cg-accent);
	transition: width 80ms linear;
}

/* ===== Khung bài ===== */
.cg-layout__main .cg-article,
.cg-layout__main .cg-author-box,
.cg-layout__main .cg-post-nav,
.cg-layout__main .cg-related {
	max-width: 760px;
}

.cg-article__head {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.8vw, 20px);
	padding-top: clamp(22px, 2.8vw, 34px);
}

.cg-article__title {
	margin: 0;
	font-family: var(--cg-font-serif);
	font-size: clamp(30px, 5.2vw, 48px);
	line-height: 1.14;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

.cg-article__sapo {
	margin: 0;
	font-family: var(--cg-font-serif);
	font-style: italic;
	font-size: clamp(16px, 2vw, 19px);
	line-height: 1.6;
	color: var(--cg-text-soft);
	max-width: 56ch;
	text-wrap: pretty;
}

.cg-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 4px;
	padding-bottom: clamp(22px, 2.6vw, 30px);
	border-bottom: 1px solid var(--cg-border);
}

.cg-article__hero {
	margin: clamp(18px, 2.2vw, 26px) 0 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.cg-article__hero img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	background: var(--cg-bg-media);
}

.cg-article__hero figcaption {
	font-size: 12.5px;
	color: var(--cg-text-faint);
	line-height: 1.6;
}

/* ===== Thân bài (nội dung block editor) ===== */
.entry-content {
	font-family: var(--cg-font-serif);
	font-size: 18px;
	line-height: 1.85;
	color: var(--cg-text);
	padding-top: clamp(24px, 3vw, 36px);
	text-wrap: pretty;
	/* Bọc float lại trong thân bài: ảnh alignleft/alignright ở block cuối
	   sẽ tràn ra đè lên hộp tác giả nếu thiếu dòng này (đo được 265px chồng lấn). */
	display: flow-root;
	/* Chuỗi dài không dấu cách và URL trần làm TOÀN TRANG cuộn ngang, không chỉ
	   tràn trong hộp. Đo được với nội dung thử: đoạn văn rộng 1225px trong hộp
	   284px, trang rộng 1243px ở khung 320px. Biên tập viên dán một đường dẫn dài
	   là đủ gây ra. */
	overflow-wrap: break-word;
}

/* Khối mã và bảng KHÔNG ngắt dòng được — cho chúng tự cuộn trong hộp của mình
   thay vì đẩy cả trang. Đo được: <pre> rộng 1127px, bảng 292px ở khung 284px. */
.entry-content pre,
.entry-content .wp-block-table,
.entry-content .wp-block-preformatted,
.entry-content .wp-block-code {
	overflow-x: auto;
	max-width: 100%;
}

/* Bảng chiếm đủ bề rộng hộp cuộn thay vì co lại rồi vẫn tràn. */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--cg-border);
	padding: 8px 10px;
	text-align: left;
	font-size: 15px;
	line-height: 1.5;
}

.entry-content th {
	font-weight: 600;
	background: var(--cg-bg-alt);
}

.entry-content > * + * {
	margin-top: 1.15em;
}

/* Điều hướng giữa các phần khi bài dùng khối "Ngắt trang". */
.cg-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: clamp(26px, 3vw, 36px);
	padding-top: 18px;
	border-top: 1px solid var(--cg-border);
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
}

.cg-page-links__label {
	color: var(--cg-text-meta);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 11.5px;
}

.cg-page-links .post-page-numbers {
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--cg-border-btn);
	border-radius: 17px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cg-text-footer);
}

.cg-page-links .post-page-numbers.current {
	border-color: var(--cg-accent);
	background: var(--cg-accent);
	color: var(--cg-on-dark);
	font-weight: 600;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--cg-font-serif);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.005em;
	clear: both;
	margin: clamp(28px, 3vw, 38px) 0 0.7em;
}

.entry-content h2 {
	font-size: clamp(24px, 2.6vw, 26px);
}

.entry-content h3 {
	font-size: 21px;
}

.entry-content h4 {
	font-size: 18px;
}

/* Danh sách: trả lại dấu đầu dòng mà base.css đã reset cho toàn site. */
.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
	margin-top: 1.1em;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li + li {
	margin-top: 0.4em;
}

.entry-content blockquote {
	margin: clamp(24px, 2.8vw, 34px) 0;
	padding: 0 0 0 clamp(18px, 2.2vw, 26px);
	border-left: 3px solid var(--cg-gold);
	font-style: italic;
	clear: both;
}

.entry-content blockquote cite {
	display: block;
	margin-top: 0.6em;
	font-size: 13px;
	font-style: normal;
	color: var(--cg-text-meta);
}

.entry-content a {
	color: var(--cg-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content figure {
	margin: clamp(24px, 2.8vw, 34px) 0;
}

.entry-content img {
	max-width: 100%;
	height: auto;
	display: block;
}

.entry-content figcaption {
	margin-top: 9px;
	font-family: var(--cg-font-sans);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--cg-text-faint);
}

.entry-content .alignleft {
	float: left;
	width: 46%;
	margin: 0.4em clamp(18px, 2.2vw, 26px) 1em 0;
}

.entry-content .alignright {
	float: right;
	width: 46%;
	margin: 0.4em 0 1em clamp(18px, 2.2vw, 26px);
}

/* Trả về list-style: none dùng chung cho gallery và social-links, tách riêng
   khỏi phần lưới bên dưới vì social-links là hàng icon ngang, không phải grid. */
.entry-content .wp-block-gallery,
.entry-content .blocks-gallery-grid,
.entry-content .wp-block-social-links {
	padding: 0;
	list-style: none;
}

.entry-content .wp-block-gallery,
.entry-content .blocks-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: clamp(22px, 2.6vw, 32px) 0;
	clear: both;
}

.entry-content .wp-block-gallery figure,
.entry-content .blocks-gallery-grid figure {
	margin: 0;
}

.entry-content .wp-block-gallery img,
.entry-content .blocks-gallery-grid img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: var(--cg-bg-media);
}

@media (max-width: 619.98px) {
	.entry-content .alignleft,
	.entry-content .alignright {
		float: none;
		width: 100%;
		margin: clamp(24px, 2.8vw, 34px) 0;
	}

	.entry-content .wp-block-gallery,
	.entry-content .blocks-gallery-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== Thân bài dạng thơ / lời ca ===== */
/* Dùng chung cho .cg-verse (Thơ) và .cg-lyric (lời ca Âm nhạc). Hai lớp chỉ khác
   nhau ở ba con số: cỡ chữ, padding trên, khoảng cách giữa các khổ. Phần dưới đây
   viết MỘT lần thay vì chép hai bản. */
.cg-verse p,
.cg-lyric p {
	margin: 0;
	font-family: var(--cg-font-serif);
	font-weight: 400;
	line-height: 1.95;
	letter-spacing: 0.002em;
	color: var(--cg-text);
}

/* Khoảng cách giữa các khổ dựng bằng flex gap chứ KHÔNG bằng margin: quy tắc
   `.cg-verse p { margin: 0 }` có độ đặc hiệu (0,1,1), luôn thắng
   `.cg-verse > * + *` (0,1,0) — bộ chọn `*` không đóng góp độ đặc hiệu — nên
   cách cũ tính ra đúng 0px. Thiết kế cũng dùng flex column + gap. */
.cg-verse,
.cg-lyric {
	display: flex;
	flex-direction: column;
}

/* .entry-content thêm margin-top cho phần tử kế tiếp; ở đây gap đã lo phần đó,
   để lại sẽ cộng dồn với gap trên các phần tử không phải <p>. */
.cg-verse > * + *,
.cg-lyric > * + * {
	margin-top: 0;
}

/* ===== Thơ ===== */
.cg-verse {
	padding-top: clamp(28px, 3.6vw, 46px);
	gap: clamp(22px, 2.6vw, 32px);
}

.cg-verse p {
	font-size: 20px;
}

.cg-verse__sign {
	margin-top: clamp(30px, 3.6vw, 44px);
	padding-top: 20px;
	border-top: 1px solid var(--cg-border);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cg-verse__author {
	font-family: var(--cg-font-serif);
	font-style: italic;
	font-size: 16px;
	color: var(--cg-text-soft);
}

.cg-verse__note {
	font-size: 12.5px;
	color: var(--cg-text-faint);
}

/* ===== Khối ảnh bản nhạc / tác phẩm ===== */
.cg-sheet {
	margin: clamp(28px, 3.4vw, 42px) 0 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Thiết kế dùng <div>; ở đây là <button> để bấm được bằng bàn phím,
   nên phải xoá kiểu mặc định của nút. */
.cg-sheet__frame {
	display: block;
	width: 100%;
	padding: clamp(16px, 2.4vw, 34px);
	background: var(--cg-bg);
	border: 1px solid var(--cg-border);
	box-shadow: 0 18px 44px rgba(26, 23, 20, 0.07);
	cursor: zoom-in;
	font: inherit;
	color: inherit;
	text-align: left;
}

.cg-sheet__frame img {
	display: block;
	width: 100%;
	height: auto;
}

/* ===== Trình phát audio ===== */
.cg-audio {
	display: block;
	width: 100%;
	margin-top: clamp(20px, 2.4vw, 28px);
}

/* ===== Thân bài dạng lời ca ===== */
/* Khoảng cách giữa các khổ dùng chung với .cg-verse, đã khai báo phía trên
   (display: flex, margin-top: 0). Ở đây chỉ đặt hai giá trị riêng của lời ca:
   padding trên và khoảng cách giữa các khổ (qua gap, không phải margin — xem
   lý do ở khối dùng chung phía trên). */
.cg-lyric {
	padding-top: clamp(30px, 3.6vw, 46px);
	gap: clamp(20px, 2.4vw, 28px);
}

.cg-lyric p {
	font-size: 19px;
}

/* ===== Lightbox ảnh bản nhạc ===== */
.cg-zoom {
	position: fixed;
	inset: 0;
	z-index: 80;
	overflow: auto;
	padding: clamp(16px, 3vw, 40px);
	background: rgba(26, 23, 20, 0.86);
	cursor: zoom-out;
}

.cg-zoom[hidden] {
	display: none;
}

.cg-zoom__close {
	position: fixed;
	top: 18px;
	right: 18px;
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.34);
	background: rgba(26, 23, 20, 0.5);
	color: var(--cg-on-dark);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cg-zoom__img {
	display: block;
	margin: 0 auto;
	width: min(940px, 100%);
	height: auto;
	background: var(--cg-bg);
}