/**
 * Nội dung bài viết (.post__content) — style CHO MỌI THẺ mà editor sinh ra.
 *
 * Design chỉ style 2 class cụ thể (.post__p, .post__figure) vì HTML tĩnh chỉ có
 * đoạn văn + 1 ảnh. the_content() thật sinh h2/h3/ul/ol/table/blockquote/figure/
 * iframe/code... nên phải phủ hết, giữ nguyên ngôn ngữ thị giác của design:
 *   chữ  20px / line-height 1.35 / #000        (.post__p)
 *   ảnh  max-width 878px, canh giữa, radius 12  (.post__figure)
 *   gạch phân cách: lưới CHẤM #ccc 2x2px        (.post__meta / .post__share)
 */

/* ---------- Thân bài ---------- */

.post__content {
	font-size: var(--mt-ov-post_text, 1.25rem);
	line-height: 1.35;
	color: #000;
}

.post__content > *:first-child {
	margin-top: 8px;
}

.post__content p {
	margin-top: 8px;
	font-size: var(--mt-ov-post_text, 1.25rem);
	line-height: 1.35;
	color: #000;
}

/* ---------- Heading: giữ thứ bậc rõ ràng cho SEO + mục lục ----------
   h1 chỉ dùng cho tiêu đề bài (.post__title). Trong nội dung bắt đầu từ h2.
   scroll-margin-top để anchor từ TOC không bị header che khi nhảy tới. */

.post__content h2,
.post__content h3,
.post__content h4,
.post__content h5,
.post__content h6 {
	margin-top: 32px;
	margin-bottom: 8px;
	font-weight: 700;
	line-height: 1.2;
	color: #000;
	scroll-margin-top: 24px;
}

.post__content h2 { font-size: var(--mt-ov-post_h2, calc(var(--mt-heading-scale) * clamp(1.5rem, calc(2.2 * var(--mt-vw)), 2rem))); }
.post__content h3 { font-size: calc(var(--mt-heading-scale) * clamp(1.3125rem, calc(1.8 * var(--mt-vw)), 1.625rem)); }
.post__content h4 { font-size: 1.375rem; }
.post__content h5 { font-size: 1.25rem; }
.post__content h6 { font-size: 1.125rem; color: var(--color-text-muted, #666); }

/* h1 lọt vào nội dung (editor cũ hay dán) -> hạ cỡ để không cạnh tranh
   với .post__title, tránh 2 h1 gây hại SEO. */
.post__content h1 {
	margin-top: 32px;
	margin-bottom: 8px;
	font-size: var(--mt-ov-post_h2, calc(var(--mt-heading-scale) * clamp(1.5rem, calc(2.2 * var(--mt-vw)), 2rem)));
	font-weight: 700;
	line-height: 1.2;
	color: #000;
}

/* ---------- Ảnh: auto width như design ----------
   Ảnh WP có width/height inline; ép về auto để không tràn cột và giữ tỉ lệ. */

.post__content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* figure/ảnh đứng riêng: canh giữa, giới hạn 878px như .post__figure của design */
.post__content figure,
.post__content .wp-block-image,
.post__content p > img:only-child {
	display: block;
	margin: 12px auto 38px;
	max-width: 878px;
}

.post__content figure img,
.post__content .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Ảnh WP căn trái/phải/giữa */
.post__content .aligncenter,
.post__content .wp-block-image.aligncenter {
	margin-inline: auto;
}

.post__content .alignnone,
.post__content .alignleft,
.post__content .alignright {
	max-width: 100%;
}

@media (min-width: 768px) {
	.post__content .alignleft {
		float: left;
		margin: 8px 28px 20px 0;
		max-width: 50%;
	}

	.post__content .alignright {
		float: right;
		margin: 8px 0 20px 28px;
		max-width: 50%;
	}
}

.post__content figcaption,
.post__content .wp-caption-text,
.post__content .wp-element-caption {
	margin-top: 10px;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--color-text-light, #999);
	text-align: center;
}

/* ---------- Danh sách ---------- */

.post__content ul,
.post__content ol {
	margin-top: 12px;
	padding-left: 26px;
}

.post__content ul { list-style: disc; }
.post__content ol { list-style: decimal; }
.post__content ul ul { list-style: circle; }

.post__content li {
	margin-top: 6px;
	font-size: 1.25rem;
	line-height: 1.35;
	color: #000;
}

.post__content li > ul,
.post__content li > ol {
	margin-top: 6px;
}

/* ---------- Link ---------- */

.post__content a {
	color: var(--color-primary, #2458dd);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: break-word;   /* URL dài không phá layout */
}

.post__content a:hover,
.post__content a:focus-visible {
	color: var(--color-primary-dark, #003da8);
}

/* ---------- Nhấn mạnh ---------- */

.post__content strong,
.post__content b {
	font-weight: 700;
}

.post__content mark {
	padding: 0 4px;
	background: #fdf6e3;
	color: inherit;
}

/* ---------- Blockquote ---------- */

.post__content blockquote {
	margin: 24px 0;
	padding: 18px 24px;
	border-left: 4px solid var(--color-accent, #d86227);
	border-radius: 0 12px 12px 0;
	background: #fdf6e3;
	font-size: 1.25rem;
	line-height: 1.45;
	color: #000;
}

.post__content blockquote p { margin-top: 8px; }
.post__content blockquote > *:first-child { margin-top: 0; }
.post__content blockquote cite {
	display: block;
	margin-top: 10px;
	font-size: 1rem;
	font-style: normal;
	color: var(--color-text-muted, #666);
}

/* ---------- Bảng: cuộn ngang trong khung riêng, không đẩy trang ---------- */

.post__content table {
	width: 100%;
	margin-top: 20px;
	border-collapse: collapse;
	font-size: 1.0625rem;
}

.post__content .wp-block-table,
.post__content figure.wp-block-table {
	max-width: 100%;
	margin: 20px 0;
	overflow-x: auto;
}

.post__content th,
.post__content td {
	padding: 10px 14px;
	border: 1px solid rgba(10, 32, 80, .14);
	text-align: left;
	vertical-align: top;
}

.post__content thead th {
	background: var(--color-surface-alt, #f2f2f2);
	font-weight: 700;
}

/* ---------- Code ---------- */

.post__content code {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--color-surface-alt, #f2f2f2);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
}

.post__content pre {
	margin-top: 20px;
	padding: 18px 20px;
	border-radius: 12px;
	background: var(--color-navy, #0a2050);
	color: #fff;
	overflow-x: auto;
	line-height: 1.5;
}

.post__content pre code {
	padding: 0;
	background: none;
	color: inherit;
}

/* ---------- Nhúng (YouTube, iframe) — giữ tỉ lệ, không tràn ---------- */

.post__content iframe,
.post__content video,
.post__content embed,
.post__content object {
	max-width: 100%;
	border: 0;
	border-radius: 12px;
}

.post__content .wp-block-embed,
.post__content .wp-embed-aspect-16-9 {
	margin: 20px auto 38px;
	max-width: 878px;
}

.post__content .wp-block-embed__wrapper {
	position: relative;
}

.post__content .wp-embed-aspect-16-9 .wp-block-embed__wrapper {
	aspect-ratio: 16 / 9;
}

.post__content .wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ---------- Ngăn cách ---------- */

.post__content hr {
	margin: 32px 0;
	border: 0;
	height: 2px;
	/* cùng lưới CHẤM #ccc như .post__meta của design */
	background-image: repeating-linear-gradient(to right, #cccccc 0 2px, transparent 2px 4px);
}

/* ---------- Chống tràn ---------- */

.post__content {
	overflow-wrap: break-word;
}

.post__content > * {
	max-width: 100%;
}

/* ---------- Mục lục: link (design là text tĩnh) ---------- */

.post__toc-list a {
	color: inherit;
	text-decoration: none;
}

.post__toc-list a:hover,
.post__toc-list a:focus-visible {
	color: var(--color-primary, #2458dd);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Link chia sẻ (design là 1 ảnh PNG phẳng) ---------- */

.post__share {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.post__share-link {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border: 1px solid rgba(10, 32, 80, .18);
	border-radius: var(--radius-pill, 999px);
	background: #fff;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--color-navy, #0a2050);
	text-decoration: none;
	transition: background var(--transition, .25s ease), color var(--transition, .25s ease);
}

.post__share-link:hover,
.post__share-link:focus-visible {
	background: var(--color-primary, #2458dd);
	border-color: var(--color-primary, #2458dd);
	color: #fff;
}