/* =========================================================
   Yến Tài Chính — Giao diện bài viết (single post) v2.1
   Nâng cấp UX/UI: typography thoáng, TOC đóng khung,
   thanh tiến độ đọc, hộp tác giả, card liên quan mới.
   v2.1: ảnh đại diện hiện trọn (không cắt) + ảnh trong bài
         rộng bằng cột chữ.
   Brand: vàng #C79A3B · xanh #3858E9 · navy #0d1b33
   ========================================================= */
:root {
	--ytc-gold: #C79A3B;
	--ytc-gold-dark: #a87f2b;
	--ytc-blue: #3858E9;
	--ytc-navy: #0d1b33;
	--ytc-ink: #16223b;
	--ytc-body: #3b4453;
	--ytc-muted: #6b7280;
	--ytc-line: #ece7db;
	--ytc-soft: #faf7ef;
	--ytc-radius: 18px;
	--ytc-hero-w: 1180px;  /* khung ảnh đại diện = khung TOC + bài */
	--ytc-hero-h: 700px;   /* chiều cao TỐI ĐA của ảnh đại diện */
	--ytc-img-w: 100%;     /* ảnh TRONG bài rộng bằng cột chữ (~914px) */
	--ytc-toc-w: 230px;
	--ytc-gap: 36px;
	--ytc-serif: "Lora", Georgia, "Times New Roman", serif;
}
/* ---------- Nền tảng ---------- */
.ytc-article {
	color: var(--ytc-body);
	font-size: 1.125rem;          /* 18px */
	line-height: 1.85;
	padding-bottom: 72px;
	-webkit-font-smoothing: antialiased;
}
/* ---------- Thanh tiến độ đọc ---------- */
.ytc-progress {
	position: fixed;
	top: 0; left: 0;
	height: 3px; width: 0;
	background: linear-gradient(90deg, var(--ytc-gold), var(--ytc-blue));
	z-index: 99;
	transition: width .1s linear;
}
/* ---------- Hero banner ---------- */
.ytc-article-banner { padding: 48px 24px 8px; }
.ytc-article-banner__content { text-align: center; max-width: 820px; }
.ytc-article-banner .ytc-badge {
	display: inline-block;
	margin: 0 auto 18px;
	padding: 6px 16px;
	background: var(--ytc-soft);
	color: var(--ytc-gold-dark);
	border: 1px solid var(--ytc-gold);
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .76rem;
}
.ytc-article-banner .ytc-badge a { color: inherit; text-decoration: none; }
.ytc-article-title {
	font-family: var(--ytc-serif);
	color: var(--ytc-ink);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -.01em;
	margin: 0 auto;
	font-size: clamp(2rem, 4.4vw, 3rem);
}
.ytc-article__meta {
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-top: 22px;
	color: var(--ytc-muted);
	font-size: .9rem;
}
.ytc-meta-author { display: inline-flex; align-items: center; gap: 9px; }
.ytc-meta-author strong { color: var(--ytc-ink); }
.ytc-meta-author__avatar {
	width: 34px; height: 34px; border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--ytc-gold);
	background: var(--ytc-soft);
	display: inline-block; flex: none;
}
.ytc-article__meta .ytc-meta-date::before,
.ytc-reading-time::before {
	content: "";
	display: inline-block;
	width: 15px; height: 15px;
	margin-right: 7px;
	vertical-align: -2px;
	background: currentColor;
}
.ytc-article__meta .ytc-meta-date::before {
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>") center / contain no-repeat;
}
.ytc-reading-time::before {
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>") center / contain no-repeat;
}
.ytc-article-banner__image {
	margin: 34px auto 0;
	width: 100%;
	max-width: var(--ytc-hero-w);
}
/* Ảnh đại diện: khung 16:9 khớp ảnh thiết kế 1200×675,
   cao hơn mức cũ (560px) và KHÔNG cắt xén nội dung ảnh. */
.ytc-article-banner__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	max-height: var(--ytc-hero-h);
	object-fit: contain;
	background: var(--ytc-soft);
	border-radius: var(--ytc-radius);
	box-shadow: 0 24px 60px -30px rgba(13, 27, 51, .5);
}
/* ---------- Bố cục thân bài: TOC + bài = đúng bằng chiều ngang ảnh ---------- */
.ytc-article-layout {
	margin: 48px auto 0;
	width: 100%;
	max-width: var(--ytc-hero-w);
	display: grid;
	grid-template-columns: var(--ytc-toc-w) minmax(0, 1fr);
	gap: var(--ytc-gap);
	align-items: start;
}
.ytc-article-content { max-width: none; min-width: 0; }
/* ---------- Mục lục (TOC) desktop ---------- */
.ytc-toc--desktop {
	position: sticky;
	top: 96px;
	align-self: start;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	padding: 22px 20px;
	border: 1px solid var(--ytc-line);
	border-radius: 16px;
	background: linear-gradient(180deg, var(--ytc-soft), #fff);
}
.ytc-toc__title {
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--ytc-gold-dark);
	margin: 0 0 14px;
}
.ytc-toc__items { list-style: none; margin: 0; padding: 0; }
.ytc-toc__items li { margin: 0; }
.ytc-toc__link {
	display: block;
	padding: 8px 0 8px 15px;
	border-left: 2px solid var(--ytc-line);
	color: var(--ytc-muted);
	text-decoration: none;
	font-size: .9rem;
	line-height: 1.4;
	transition: color .15s, border-color .15s;
}
.ytc-toc__link:hover { color: var(--ytc-ink); }
.ytc-toc__link.is-active {
	color: var(--ytc-gold-dark);
	border-left-color: var(--ytc-gold);
	font-weight: 700;
}
.ytc-toc__link.is-sub { padding-left: 28px; font-size: .84rem; }
/* ---------- Mục lục mobile ---------- */
.ytc-toc-mobile {
	border: 1px solid var(--ytc-line);
	border-radius: 14px;
	background: var(--ytc-soft);
	margin-bottom: 30px;
	padding: 2px 18px;
}
.ytc-toc-mobile__summary {
	cursor: pointer;
	font-weight: 800;
	color: var(--ytc-ink);
	padding: 14px 0;
	list-style: none;
	position: relative;
}
.ytc-toc-mobile__summary::-webkit-details-marker { display: none; }
.ytc-toc-mobile__summary::after {
	content: "＋";
	position: absolute; right: 2px;
	color: var(--ytc-gold-dark);
}
.ytc-toc-mobile[open] .ytc-toc-mobile__summary::after { content: "－"; }
.ytc-toc-mobile__nav { padding: 4px 0 12px; }
.ytc-toc-mobile .ytc-toc__link { border-left: none; padding-left: 0; }
/* ---------- Nội dung bài (prose) ---------- */
.ytc-prose > * { margin-top: 1.35em; margin-bottom: 0; }
.ytc-prose > *:first-child { margin-top: 0; }
/* đoạn mở đầu to hơn để dẫn dắt */
.ytc-prose > p:first-of-type {
	font-size: 1.24rem;
	line-height: 1.7;
	color: var(--ytc-ink);
}
.ytc-prose h2 {
	font-family: var(--ytc-serif);
	color: var(--ytc-ink);
	font-size: 1.72rem;
	font-weight: 800;
	line-height: 1.3;
	margin-top: 2.2em;
	padding-top: .6em;
	position: relative;
	scroll-margin-top: 96px;
}
.ytc-prose h2::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 52px; height: 4px;
	border-radius: 3px;
	background: var(--ytc-gold);
}
.ytc-prose h3 {
	color: var(--ytc-ink);
	font-size: 1.24rem;
	font-weight: 800;
	margin-top: 1.7em;
	scroll-margin-top: 96px;
}
.ytc-prose a { color: var(--ytc-blue); text-decoration: underline; text-underline-offset: 3px; }
.ytc-prose strong { color: var(--ytc-ink); }
/* Ảnh TRONG bài: rộng bằng cột chữ, căn giữa */
.ytc-prose img {
	width: 100%;
	max-width: var(--ytc-img-w);
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-radius: 14px;
}
.ytc-prose figure,
.ytc-prose .wp-block-image {
	margin: 1.8em auto;
	max-width: var(--ytc-img-w);
}
.ytc-prose .wp-block-image.alignfull,
.ytc-prose .wp-block-image.alignwide { max-width: 100%; }
.ytc-prose .wp-block-image.alignfull img,
.ytc-prose .wp-block-image.alignwide img { max-width: 100%; }
.ytc-prose figcaption { text-align: center; color: var(--ytc-muted); font-size: .88rem; margin-top: 10px; }
.ytc-prose blockquote {
	border-left: 4px solid var(--ytc-gold);
	background: var(--ytc-soft);
	margin: 1.8em 0;
	padding: 20px 26px;
	border-radius: 0 12px 12px 0;
	color: var(--ytc-ink);
	font-size: 1.12rem;
}
.ytc-prose blockquote p { margin: 0; }
.ytc-prose ul, .ytc-prose ol { padding-left: 1.25em; }
.ytc-prose li { margin: .55em 0; }
.ytc-prose li::marker { color: var(--ytc-gold-dark); font-weight: 700; }
/* ---------- Nút chia sẻ ---------- */
.ytc-share {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 44px;
	padding-top: 26px;
	border-top: 1px solid var(--ytc-line);
}
.ytc-share__label { font-weight: 800; color: var(--ytc-ink); }
.ytc-share__list { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ytc-share__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--ytc-line);
	background: #fff;
	color: var(--ytc-ink);
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	position: relative;
}
.ytc-share__item:hover {
	background: var(--ytc-gold);
	border-color: var(--ytc-gold);
	color: #fff;
}
.ytc-share__copied {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--ytc-ink);
	color: #fff;
	font-size: .72rem;
	padding: 4px 10px;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s;
}
.ytc-share__copy.is-copied .ytc-share__copied { opacity: 1; }
/* ---------- Hộp tác giả ---------- */
.ytc-author {
	display: flex;
	gap: 18px;
	align-items: center;
	margin-top: 40px;
	padding: 24px;
	border: 1px solid var(--ytc-line);
	border-radius: 16px;
	background: var(--ytc-soft);
}
.ytc-author__avatar {
	width: 66px; height: 66px; border-radius: 50%; flex: none;
	object-fit: cover;
	border: 3px solid var(--ytc-gold);
	background: var(--ytc-soft);
}
.ytc-author { align-items: flex-start; }
.ytc-author .ytc-author__avatar { margin-top: 4px; }
.ytc-author__name { margin: 0 0 4px; font-weight: 800; color: var(--ytc-ink); }
.ytc-author__bio { margin: 0; font-size: .92rem; color: var(--ytc-muted); line-height: 1.6; }
/* ---------- Bài viết liên quan ---------- */
.ytc-related {
	margin: 72px auto 0;
	width: 100%;
	max-width: var(--ytc-hero-w);
	padding-top: 46px;
	border-top: 1px solid var(--ytc-line);
}
.ytc-related__title {
	font-family: var(--ytc-serif);
	color: var(--ytc-ink);
	font-size: 1.7rem;
	font-weight: 800;
	margin: 0 0 26px;
}
.ytc-related__grid { gap: 26px !important; }
.ytc-card {
	background: #fff;
	border: 1px solid var(--ytc-line);
	border-radius: 16px;
	overflow: hidden;
	padding: 0 0 20px;
	transition: box-shadow .2s, transform .2s;
}
.ytc-card:hover {
	box-shadow: 0 18px 40px -24px rgba(13, 27, 51, .4);
	transform: translateY(-3px);
}
.ytc-card__image { margin: 0 0 16px; }
.ytc-card__image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 0; }
.ytc-card > :not(.ytc-card__image) { margin-left: 18px; margin-right: 18px; }
.ytc-card__cat {
	color: var(--ytc-gold-dark);
	font-weight: 700;
	text-transform: uppercase;
	font-size: .72rem;
	letter-spacing: .05em;
}
.ytc-card__cat a { color: inherit; text-decoration: none; }
.ytc-card__title { margin: 8px 0 6px; line-height: 1.35; font-size: 1.05rem; }
.ytc-card__title a { color: var(--ytc-ink); text-decoration: none; }
.ytc-card__title a:hover { color: var(--ytc-gold-dark); }
.ytc-card__date { color: var(--ytc-muted); font-size: .82rem; margin: 0; }
/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.ytc-article-layout {
		grid-template-columns: 1fr;
		gap: 0;
		padding-left: 20px;
		padding-right: 20px;
	}
	.ytc-toc--desktop { display: none; }
	.ytc-article-content { max-width: 720px; margin: 0 auto; }
	.ytc-related { padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 992px) {
	.ytc-toc-mobile { display: none !important; }
}
@media (max-width: 767px) {
	.ytc-article { font-size: 1.05rem; }
	.ytc-article-banner { padding: 28px 18px 0; }
	.ytc-article-banner__image img {
		border-radius: 12px;
		box-shadow: none;
		max-height: none;   /* mobile: ảnh tự cao theo tỉ lệ, hiện trọn */
	}
	.ytc-article-layout { margin-top: 30px; }
	.ytc-prose h2 { font-size: 1.45rem; }
	.ytc-prose > p:first-of-type { font-size: 1.12rem; }
	.ytc-related__grid { grid-template-columns: 1fr !important; }
	.ytc-share { flex-wrap: wrap; }
	.ytc-author { flex-direction: column; align-items: center; text-align: center; padding: 22px 18px; }
	.ytc-author .ytc-author__avatar { margin-top: 0; }
}