/*
 * NCHN E-magazine
 * Bố cục: một cột chữ khoảng 66 ký tự; ảnh phá cột ra ba mức: tràn màn hình, rộng, vừa cột.
 * Mẫu chỉ có nền sáng: nhiều bài cũ dán từ báo có màu chữ cố định, đổi sang nền tối sẽ mất chữ.
 */

body.nchn-emag {
	--nchn-paper: #F1F2EC;   /* giấy ngả men ngọc */
	--nchn-card: #E5E9DE;
	--nchn-ink: #1D231E;
	--nchn-muted: #5C655B;
	--nchn-rule: #CBD2C4;
	--nchn-mai: #E2AE1F;     /* vàng hoàng mai: chỉ dùng làm điểm nhấn */
	--nchn-mai-ink: #855F00; /* vàng đậm, đọc được trên nền sáng */
	--nchn-tea: #2F5A45;     /* men xanh ấm trà */
	--nchn-hero-ink: #F4F1E6;
	--nchn-display: "Noto Serif Display", "Times New Roman", serif;
	--nchn-body: "Literata", Georgia, "Times New Roman", serif;
	--nchn-ui: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
	--nchn-measure: 66ch;
	--nchn-wide: 1160px;
	--nchn-gut-l: max(16px, env(safe-area-inset-left, 0px));
	--nchn-gut-r: max(16px, env(safe-area-inset-right, 0px));
	--nchn-flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg%3E%3Cellipse cx='20' cy='10.5' rx='5.2' ry='8.6'/%3E%3Cellipse cx='20' cy='10.5' rx='5.2' ry='8.6' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='5.2' ry='8.6' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='5.2' ry='8.6' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='5.2' ry='8.6' transform='rotate(288 20 20)'/%3E%3C/g%3E%3C/svg%3E");

	margin: 0;
	background: var(--nchn-paper);
	color: var(--nchn-ink);
	font-family: var(--nchn-body);
	font-size: 1.125rem;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body.nchn-emag *,
body.nchn-emag *::before,
body.nchn-emag *::after { box-sizing: border-box; }
body.nchn-emag img { max-width: 100%; height: auto; }
body.nchn-emag ::selection { background: var(--nchn-mai); color: #1D231E; }
body.nchn-emag a { color: inherit; text-decoration-color: var(--nchn-mai); text-underline-offset: 3px; }
body.nchn-emag a:focus-visible { outline: 2px solid var(--nchn-mai); outline-offset: 3px; }

.nchn-gutter { padding-left: var(--nchn-gut-l); padding-right: var(--nchn-gut-r); }

/* Thanh tiến độ đọc */
.nchn-progress {
	position: fixed; left: 0; right: 0;
	top: var(--wp-admin--admin-bar--height, 0px);
	height: 3px; z-index: 9999; pointer-events: none;
}
.nchn-progress span {
	display: block; width: 100%; height: 100%;
	background: var(--nchn-mai);
	transform-origin: 0 50%;
	transform: scaleX(var(--nchn-p, 0));
}

/* ---------- Bìa ---------- */
.nchn-hero { position: relative; background: #0E1310; color: var(--nchn-hero-ink); }
.nchn-hero__img {
	display: block; width: 100%;
	aspect-ratio: 16 / 9; max-height: 88svh;
	object-fit: cover;
}
.nchn-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(10,14,11,.38) 0%, rgba(10,14,11,0) 26%, rgba(10,14,11,0) 46%, rgba(10,14,11,.84) 100%);
}
.nchn-hero__bar {
	position: absolute; z-index: 2; top: 0; left: 0; right: 0;
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	padding-top: calc(18px + env(safe-area-inset-top, 0px));
	font-family: var(--nchn-ui); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
}
.nchn-hero__bar a { text-decoration: none; color: inherit; }
.nchn-home { font-weight: 600; }
.nchn-hero__meta { display: flex; gap: 16px; align-items: center; }
.nchn-hero__meta a { border: 1px solid rgba(244,241,230,.5); padding: 3px 8px; letter-spacing: .12em; }
.nchn-hero__meta a:hover { background: rgba(244,241,230,.14); }
.nchn-hero__title { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding-bottom: clamp(24px, 5vw, 64px); }
.nchn-hero__inner { max-width: var(--nchn-wide); margin-inline: auto; }
.nchn-kicker {
	margin: 0; display: flex; align-items: center; gap: 10px;
	font-family: var(--nchn-ui); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
}
.nchn-kicker::before { content: ""; width: 28px; height: 1px; background: var(--nchn-mai); }
body.nchn-emag .nchn-title {
	margin: .35em 0 0; max-width: 17ch;
	font-family: var(--nchn-display); font-weight: 300;
	font-size: clamp(2.3rem, 6.4vw, 5.6rem); line-height: 1.04; letter-spacing: -.01em;
	color: inherit; text-wrap: balance;
}
.nchn-title em { display: block; font-style: italic; font-weight: 300; color: var(--nchn-mai); }

/* Bài không có ảnh bìa: tít nằm trên nền giấy */
.nchn-hero--plain { background: var(--nchn-paper); color: var(--nchn-ink); }
.nchn-hero--plain::after { display: none; }
.nchn-hero--plain .nchn-hero__bar,
.nchn-hero--plain .nchn-hero__title { position: static; }
.nchn-hero--plain .nchn-hero__title { padding-top: clamp(48px, 8vw, 110px); }
.nchn-hero--plain .nchn-hero__meta a { border-color: var(--nchn-rule); }
.nchn-hero--plain .nchn-title em { color: var(--nchn-mai-ink); }

/* ---------- Tác giả & sapo ---------- */
.nchn-intro { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(24px, 4vw, 48px); }
.nchn-intro__inner { max-width: 40rem; margin-inline: auto; }
.nchn-byline {
	display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 28px;
	font-family: var(--nchn-ui); font-size: .8rem; letter-spacing: .04em; color: var(--nchn-muted);
}
.nchn-byline strong { color: var(--nchn-ink); font-weight: 600; }
.nchn-sapo p {
	margin: 0 0 .8em;
	font-family: var(--nchn-display); font-weight: 300;
	font-size: clamp(1.3rem, 2.3vw, 1.62rem); line-height: 1.55;
}
.nchn-sapo p:last-child { margin-bottom: 0; }
.nchn-sapo > p:first-child::first-line { font-weight: 500; }

/* ---------- Thân bài: lưới 3 mức rộng ---------- */
.nchn-body {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--nchn-gut-l), 1fr)
		[wide-start] minmax(0, calc((var(--nchn-wide) - var(--nchn-measure)) / 2))
		[content-start] min(var(--nchn-measure), 100% - var(--nchn-gut-l) - var(--nchn-gut-r))
		[content-end] minmax(0, calc((var(--nchn-wide) - var(--nchn-measure)) / 2))
		[wide-end] minmax(var(--nchn-gut-r), 1fr) [full-end];
}
.nchn-body > * { grid-column: content; min-width: 0; }
.nchn-body > .alignwide { grid-column: wide; }
.nchn-body > .alignfull { grid-column: full; }

.nchn-body p { margin: 0 0 1.35em; }
.nchn-body h3 { font-family: var(--nchn-ui); font-weight: 600; font-size: 1.05rem; letter-spacing: .02em; margin: 1.8em 0 .6em; }
.nchn-body ul, .nchn-body ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.nchn-body hr { border: 0; height: 34px; margin: 2.5em 0; background: var(--nchn-mai); -webkit-mask: var(--nchn-flower) center / 34px no-repeat; mask: var(--nchn-flower) center / 34px no-repeat; }

/* Chữ cái lớn đầu bài, đầu mỗi phần */
.nchn-body .nchn-dc::first-letter {
	float: left; font-family: var(--nchn-display); font-weight: 300;
	font-size: 4.6em; line-height: .82; padding: .08em .1em 0 0;
	color: var(--nchn-mai-ink);
}

/* Tít phần (H2), kèm bông hoàng mai */
body.nchn-emag .nchn-body h2 {
	grid-column: content;
	margin: clamp(40px, 7vw, 80px) auto clamp(24px, 4vw, 40px);
	padding: 0; border: 0; background: none; box-shadow: none;
	max-width: 18ch; text-align: center; text-wrap: balance;
	font-family: var(--nchn-display); font-weight: 300; font-style: italic;
	font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.12; color: var(--nchn-ink);
}
body.nchn-emag .nchn-body h2 * { font: inherit; color: inherit; }
.nchn-body h2::before,
.nchn-flower {
	content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 18px;
	background: var(--nchn-mai);
	-webkit-mask: var(--nchn-flower) center / contain no-repeat;
	mask: var(--nchn-flower) center / contain no-repeat;
}

/* Trích dẫn thường và trích sách */
.nchn-body > blockquote:not(.wp-block-pullquote):not(.is-style-nchn-trich-lon),
.nchn-cite {
	margin: 2em 0; padding: 0 0 0 1.4em;
	border-left: 1px solid var(--nchn-mai);
	font-style: italic; background: none; quotes: none;
}
.nchn-body > blockquote p:last-of-type { margin-bottom: .8em; }
.nchn-cite footer,
.nchn-body > blockquote cite {
	display: block; font-family: var(--nchn-ui); font-style: normal; font-size: .78rem;
	letter-spacing: .06em; color: var(--nchn-muted);
}

/* Câu trích lớn: shortcode [emag_trich], khối Pullquote, hoặc Quote kiểu "E-mag: Trích lớn" */
.nchn-body > .nchn-pull,
.nchn-body > .wp-block-pullquote,
.nchn-body > .is-style-nchn-trich-lon {
	grid-column: wide;
	margin: 0; padding: clamp(36px, 6vw, 72px) 0;
	border: 0; background: none; text-align: center;
}
.nchn-pull blockquote,
.wp-block-pullquote blockquote { margin: 0 auto; max-width: 44rem; padding: 0; border: 0; background: none; }
.nchn-pull__q,
.nchn-body > .wp-block-pullquote p,
.nchn-body > .is-style-nchn-trich-lon p {
	margin: 0 auto; max-width: 44rem;
	font-family: var(--nchn-display); font-weight: 300; font-style: italic;
	font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.28; text-wrap: balance;
}
.nchn-pull__q::before,
.nchn-body > .wp-block-pullquote p:first-child::before,
.nchn-body > .is-style-nchn-trich-lon p:first-child::before {
	content: "\201C"; display: block; font-style: normal; font-size: 2.4em; line-height: .6;
	color: var(--nchn-mai); margin-bottom: .15em;
}
.nchn-pull--han .nchn-pull__q { font-style: normal; letter-spacing: .02em; }
.nchn-pull__gloss { margin: 14px 0 0; font-size: 1rem; font-style: italic; color: var(--nchn-muted); }
.nchn-pull cite,
.nchn-body > .wp-block-pullquote cite,
.nchn-body > .is-style-nchn-trich-lon cite {
	display: block; margin-top: 18px;
	font-family: var(--nchn-ui); font-style: normal; font-size: .78rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--nchn-muted);
}

/* ---------- Ảnh ---------- */
.nchn-body > .nchn-photo {
	grid-column: full;
	margin: clamp(36px, 6vw, 72px) 0;
	width: auto !important; max-width: none;
	padding: 0; text-align: left;
}
.nchn-body > .nchn-photo--wide,
.nchn-body > .is-style-nchn-rong { grid-column: wide; }
.nchn-body > .nchn-photo--col,
.nchn-body > .is-style-nchn-cot { grid-column: content; margin-block: 2em; }
.nchn-photo img { display: block; width: 100%; height: auto; margin: 0; }
.nchn-photo a { display: block; }
.nchn-photo figure { margin: 0; }
.nchn-photo--row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 6px; }
.nchn-photo figcaption,
.nchn-photo .wp-caption-text,
.nchn-photo .wp-element-caption,
.nchn-split figcaption {
	margin: 0; padding-top: 10px; text-align: left;
	font-family: var(--nchn-ui); font-size: .78rem; line-height: 1.5; color: var(--nchn-muted);
}
.nchn-body > .nchn-photo:not(.nchn-photo--wide):not(.nchn-photo--col):not(.is-style-nchn-rong):not(.is-style-nchn-cot) figcaption,
.nchn-body > .nchn-photo:not(.nchn-photo--wide):not(.nchn-photo--col):not(.is-style-nchn-rong):not(.is-style-nchn-cot) .wp-caption-text,
.nchn-body > .nchn-photo:not(.nchn-photo--wide):not(.nchn-photo--col):not(.is-style-nchn-rong):not(.is-style-nchn-cot) .wp-element-caption {
	max-width: calc(var(--nchn-wide) + var(--nchn-gut-l) + var(--nchn-gut-r));
	margin-inline: auto;
	padding-left: var(--nchn-gut-l); padding-right: var(--nchn-gut-r);
}
.nchn-credit { margin-left: 8px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.nchn-photo noscript { display: none; }

/* Ảnh kèm sổ tay: [emag_sotay] */
.nchn-body > .nchn-split {
	grid-column: wide;
	margin: clamp(36px, 6vw, 72px) 0;
	display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px); align-items: end;
}
.nchn-body > .nchn-split--solo { grid-column: content; grid-template-columns: 1fr; }
.nchn-split figure { margin: 0; }
.nchn-split img { display: block; width: 100%; }
.nchn-notes { background: var(--nchn-card); padding: 28px 26px; font-family: var(--nchn-ui); font-size: .92rem; line-height: 1.55; }
body.nchn-emag .nchn-notes h3 {
	margin: 0 0 18px; color: var(--nchn-tea);
	font-family: var(--nchn-ui); font-weight: 600; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
}
.nchn-notes dl { margin: 0; display: grid; gap: 16px; }
.nchn-notes dl > div { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--nchn-rule); }
.nchn-notes dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.nchn-notes dt { font-size: .74rem; letter-spacing: .04em; color: var(--nchn-muted); }
.nchn-notes dd { margin: 0; font-family: var(--nchn-display); font-size: 1.45rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.nchn-notes dd small { display: block; margin-top: 2px; font-family: var(--nchn-ui); font-size: .8rem; color: var(--nchn-muted); }

/* Nhúng video */
.nchn-body > .wp-block-embed,
.nchn-body > iframe,
.nchn-body > p:has(> iframe) { grid-column: wide; }
.nchn-body iframe { max-width: 100%; }

/* ---------- Credit cuối bài ---------- */
.nchn-credits { padding-top: clamp(40px, 7vw, 80px); padding-bottom: clamp(56px, 9vw, 110px); }
.nchn-credits__list {
	max-width: var(--nchn-measure); margin: 0 auto; padding-top: 28px;
	border-top: 1px solid var(--nchn-rule);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px;
	font-family: var(--nchn-ui);
}
.nchn-credits dt { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--nchn-muted); }
.nchn-credits dd { margin: 4px 0 0; font-size: .95rem; font-weight: 500; }
.nchn-end { margin: 44px 0 0; }
.nchn-back { margin: 20px 0 0; text-align: center; font-family: var(--nchn-ui); font-size: .82rem; letter-spacing: .06em; }

/* ---------- Điện thoại ---------- */
@media (max-width: 760px) {
	body.nchn-emag { font-size: 1.06rem; }
	.nchn-hero__img { aspect-ratio: 4 / 5; max-height: none; }
	.nchn-hero__label { display: none; }
	.nchn-body > .nchn-split { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.nchn-progress { display: none; }
}

@media print {
	.nchn-progress, .nchn-hero__bar, .nchn-back { display: none; }
	.nchn-hero { background: none; color: #000; }
	.nchn-hero::after { display: none; }
	.nchn-hero__title { position: static; }
}


/* Nút bấm (khối Nút / Buttons), ví dụ "Đặt sách tại đây" */
.nchn-body > .wp-block-buttons,
.nchn-body > .wp-block-button,
.nchn-body > .kb-buttons-wrap,
.nchn-body > .wp-block-kadence-advancedbtn { margin: 2em 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
body.nchn-emag .nchn-body .wp-block-button__link,
body.nchn-emag .nchn-body .kb-button {
	display: inline-block; padding: 14px 28px; border: 0; border-radius: 0;
	background: var(--nchn-tea); color: #F4F1E6;
	font-family: var(--nchn-ui); font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	text-decoration: none;
}
body.nchn-emag .nchn-body .wp-block-button__link:hover,
body.nchn-emag .nchn-body .kb-button:hover { background: var(--nchn-ink); color: #F4F1E6; }

/* Video YouTube nhúng tay (iframe): co giãn theo khổ */
.nchn-body iframe[src*="youtube"] { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Thư viện ảnh cổ điển [gallery]: lưới vuông, rộng hơn cột chữ */
.nchn-body > .gallery { grid-column: wide; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2.5em 0; }
.nchn-body > .gallery .gallery-item { width: auto !important; max-width: none; margin: 0 !important; float: none; }
.nchn-body > .gallery .gallery-icon, .nchn-body > .gallery .gallery-icon a { display: block; height: 100%; }
.nchn-body > .gallery img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 0 !important; }
.nchn-body > .gallery br { display: none; }
@media (max-width: 760px) { .nchn-body > .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Ảnh nhỏ để vừa cột: giữ kích thước thật, không phóng to làm vỡ hạt */
.nchn-body > .nchn-photo--col img { width: auto; max-width: 100%; margin-inline: auto; }