/* Bài viết (single post): 2 cột = mục lục dính bên trái + cột đọc; điện thoại / tablet: mục lục thành In-page nav (section-nav).
   Markup: vo_post_meta / vo_toc / vo_author / vo_pillar ở inc/ui-parts.php; khung ở templates/single.html. */

.vo-post {
	/* Chỉnh ở đây */
	--vo-post-toc-w: 200px;                          /* Rộng mục lục bên trái */
	--vo-post-col-w: 700px;                          /* Rộng cột đọc (~75 ký tự / dòng) */
	--vo-post-gap: clamp(32px, 5vw, 64px);           /* Khoảng giữa mục lục và cột đọc (desktop) */
	--vo-post-gap-tablet: var(--vo-space-5);          /* Như trên nhưng 768-980px: chật ngang nên hẹp lại để cột đọc rộng thêm */
	--vo-byline-avatar: 40px;                        /* Ảnh tác giả ở dòng byline (.vo-avatar dùng chung: header.css) */
	--vo-author-avatar: 56px;                        /* Ảnh tác giả ở hộp cuối bài */

	display: grid;
	grid-template-columns: minmax(0, var(--vo-post-col-w));
	align-items: start;
	padding-top: var(--vo-space-5);
}
@media (max-width: 767px) {
	.vo-post { padding-top: var(--vo-space-2); }   /* dưới 768px đầu cột là thanh nav trong trang (cao 48px, chữ đã cách đỉnh ~15px): cùng khoảng với trang attraction / destination (layout.css) */
}
.vo-page--post > .vo-post, .vo-page--post > .vo-post__more { margin-block: 0; }   
.vo-post > * { margin-block: 0; }   
.vo-post__more { padding-bottom: var(--vo-space-7); }

/* Cột đọc: các khối cách đều nhau; khối nào trống (không in) thì không chiếm chỗ */
.vo-post__main { display: flex; flex-direction: column; gap: var(--vo-space-6); min-width: 0; }
.vo-post__main > * { margin-block: 0; }
.vo-post__main > .vo-sec { padding-top: 0; }
.vo-single .vo-post__main .wp-block-post-content { margin-top: 0; }

/* Mục lục bên trái: từ 768px (tablet đứng trở lên), dưới đó dùng In-page nav; bài không có mục lục (dưới 2 H2) thì cột đọc đứng một mình */
.vo-post__aside { display: none; }
@media (min-width: 768px) {
	.vo-post:has(.vo-toc) { grid-template-columns: var(--vo-post-toc-w) minmax(0, var(--vo-post-col-w)); gap: var(--vo-post-gap-tablet); }
	.vo-post:has(.vo-toc) .vo-post__aside { display: block; position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--vo-header-h) + var(--vo-space-5)); }
	.vo-post .vo-secnav { display: none; }   /* đã có mục lục bên trái */
	/* Không có In-page nav thì điểm dừng khi bấm mục chỉ cần chừa chỗ cho header (section-nav/style.css chừa thêm chiều cao nav) */
	html:has(.vo-post .vo-secnav) { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--vo-header-h) + var(--vo-space-4)); }
}
@media (min-width: 981px) {
	.vo-post:has(.vo-toc) { gap: var(--vo-post-gap); }
}

.vo-toc__title { margin: 0 0 var(--vo-space-3); color: var(--vo-heading); font-size: var(--vo-fs-md); font-weight: 700; line-height: 1.2; }   /* cùng kiểu tiêu đề các hộp khác của site (như .vo-sidecard__title), không viết hoa giãn chữ */
.vo-toc__list { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--vo-divider); }
.vo-toc .vo-toc__link {
	display: block;
	margin-left: -1px;   /* gạch sáng đè lên đường kẻ chung */
	padding: var(--vo-space-1) var(--vo-space-3);
	border-left: 2px solid transparent;
	color: var(--vo-muted);
	font-size: var(--vo-fs-sm);
	line-height: 1.35;
	text-decoration: none;
	transition: color var(--vo-dur-fast) ease;
}
.vo-toc .vo-toc__link:hover { color: var(--vo-ink); }
.vo-toc .vo-toc__link[aria-current="true"] { border-left-color: var(--vo-primary); color: var(--vo-ink); font-weight: 600; }

/* H1 bài viết: dùng chung kiểu với H1 attraction (hero.css) */

/* Nhãn + dòng tác giả (ảnh tròn = .vo-avatar của header.css, ở đây chỉ đặt cỡ) */
.vo-post-meta { display: flex; flex-direction: column; gap: var(--vo-space-3); }
.vo-byline .vo-avatar { --vo-avatar-size: var(--vo-byline-avatar); }
.vo-byline { display: flex; align-items: center; gap: var(--vo-space-3); }
.vo-byline__text { display: flex; flex-direction: column; min-width: 0; }
.vo-byline__name { color: var(--vo-primary); font-size: var(--vo-fs-sm); font-weight: 600; }
.vo-byline__sub { color: var(--vo-muted); font-size: var(--vo-fs-xs); }
/* Nội dung bài (block Post Content, class vo-prose ở layout.css): H2 là câu hỏi, cỡ vừa phải */
.vo-post__main .wp-block-post-content h2 { margin: 1.6em 0 .5em; color: var(--vo-heading); line-height: 1.2; }   /* cỡ chữ = H2 chung của site (theme.json), không đặt riêng cho bài viết */
.vo-post__main .wp-block-post-content > :first-child { margin-top: 0; }
.vo-post__main .wp-block-post-content :where(img, video, iframe) { max-width: 100%; height: auto; }

/* Hộp tác giả */
.vo-author .vo-avatar { --vo-avatar-size: var(--vo-author-avatar); }
.vo-author { display: flex; gap: var(--vo-space-4); padding: var(--vo-space-5); border: 1px solid var(--vo-divider); border-radius: var(--vo-radius-card); }
.vo-author__name { margin: 0; color: var(--vo-primary); font-weight: 700; }
.vo-author__bio { margin: var(--vo-space-1) 0 0; color: var(--vo-muted); font-size: var(--vo-fs-sm); }

/* Thẻ pillar: cả hàng là một link */
a.vo-pillar {
	display: flex;
	align-items: center;
	gap: var(--vo-space-4);
	padding: var(--vo-space-3);
	border: 1px solid var(--vo-divider);
	border-radius: var(--vo-radius-card);
	color: var(--vo-primary);
	text-decoration: none;
	transition: background-color var(--vo-dur-fast) ease;
}
/* Trang attraction: thẻ đứng ngay sau section FAQ (không có hộp tác giả ở giữa như bài viết) nên cần đúng khoảng cách giữa 2 section */
.vo-sec + a.vo-pillar { margin-top: var(--vo-space-6); }
@media (hover: hover) {
	a.vo-pillar:hover { background: var(--vo-hover); }
}
.vo-pillar__media { flex: none; width: 88px; aspect-ratio: 1; overflow: hidden; border-radius: var(--vo-radius-sm); background: var(--vo-bg); }
.vo-pillar__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vo-pillar__body { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.vo-pillar__kicker, .vo-pillar__sub { color: var(--vo-muted); font-size: var(--vo-fs-xs); }
.vo-pillar__title { font-size: var(--vo-fs-md); font-weight: 700; }
.vo-pillar > .vo-icon { flex: none; margin-right: var(--vo-space-2); }