/* CatCredit — Blog/archive/single/search/404 styles. */

.vm-archive { padding: 56px 0 88px; }
@media (min-width: 768px) { .vm-archive { padding: 80px 0 120px; } }
.archive-head { margin-bottom: 40px; }
.archive-head h1 { font-size: clamp(32px, 4vw, 48px); margin-top: 6px; }

.archive-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
@media (min-width: 900px) { .archive-grid { grid-template-columns: 1fr 320px; gap: 56px; } }

.archive-main { display: flex; flex-direction: column; gap: 28px; }

.archive-sidebar > .widget,
.archive-sidebar > section.widget {
	padding: 22px;
	background: var(--bg-warm);
	border: 0.5px solid var(--line);
	border-radius: var(--radius-lg);
	margin-bottom: 18px;
}
.archive-sidebar .widget-search .vm-searchform { max-width: none; }
.archive-sidebar .widget-search .vm-searchform input[type="search"] { padding: 10px 14px; font-size: 14px; }
.archive-sidebar .widget-search .vm-searchform button { padding: 10px 16px; font-size: 14px; }

.archive-sidebar .widget-categories li {
	display: flex; justify-content: space-between; align-items: center;
	padding: 8px 0;
	border-bottom: 0.5px solid var(--line);
}
.archive-sidebar .widget-categories li:last-child { border-bottom: 0; }
.archive-sidebar .widget-categories li a { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.archive-sidebar .widget-categories li a:hover { color: var(--orange); }
.archive-sidebar .widget-categories .count {
	font-size: 11px; font-weight: 600;
	padding: 2px 8px; border-radius: 999px;
	background: var(--bg); color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}

.archive-sidebar .recent-posts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.archive-sidebar .recent-link {
	display: flex; gap: 10px; align-items: flex-start;
	padding: 8px;
	border-radius: var(--radius-sm);
	transition: background 0.15s ease;
}
.archive-sidebar .recent-link:hover { background: var(--bg); }
.archive-sidebar .recent-thumb {
	flex: 0 0 56px; width: 56px; height: 56px;
	border-radius: 10px; overflow: hidden;
	background: var(--yellow-tint);
	display: grid; place-items: center;
}
.archive-sidebar .recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.archive-sidebar .recent-thumb-placeholder svg { width: 28px; height: 28px; }
.archive-sidebar .recent-meta { min-width: 0; flex: 1; }
.archive-sidebar .recent-title {
	font-family: var(--font-display);
	font-size: 13.5px; font-weight: 600; line-height: 1.35;
	color: var(--ink); margin-bottom: 4px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.archive-sidebar .recent-link:hover .recent-title { color: var(--orange); }
.archive-sidebar .recent-meta time { font-size: 11px; color: var(--ink-3); }

/* Style default WP block widgets (fallback nếu user add via wp-admin) */
.archive-sidebar .wp-block-search { display: flex; gap: 8px; }
.archive-sidebar .wp-block-search .wp-block-search__label { display: none; }
.archive-sidebar .wp-block-search__input {
	flex: 1; padding: 10px 14px;
	border: 0.5px solid var(--line-2); border-radius: var(--radius-sm);
	background: var(--bg); font-size: 14px;
}
.archive-sidebar .wp-block-search__button {
	padding: 10px 16px; background: var(--ink); color: var(--yellow);
	border: 0; border-radius: var(--radius-sm);
	font-family: var(--font-display); font-weight: 600; font-size: 14px;
	cursor: pointer;
}
.archive-sidebar .wp-block-latest-posts { list-style: none; padding: 0; margin: 0; }
.archive-sidebar .wp-block-latest-posts li {
	padding: 8px 0; border-bottom: 0.5px solid var(--line);
}
.archive-sidebar .wp-block-latest-posts li:last-child { border-bottom: 0; }
.archive-sidebar .wp-block-latest-posts a {
	font-size: 13.5px; font-weight: 500; line-height: 1.4;
	color: var(--ink-2);
}
.archive-sidebar .wp-block-latest-posts a:hover { color: var(--orange); }
.archive-sidebar .wp-block-heading { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0 0 12px; }
.archive-sidebar .widget-title {
	font-family: var(--font-display); font-weight: 700;
	font-size: 16px; letter-spacing: -0.01em;
	margin: 0 0 12px;
}
.archive-sidebar .widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.archive-sidebar .widget li a { font-size: 14px; color: var(--ink-2); }
.archive-sidebar .widget li a:hover { color: var(--orange); }
.archive-sidebar .widget-cta {
	background: var(--ink); color: #fff;
	position: relative; overflow: hidden;
}
.archive-sidebar .widget-cta .widget-title { color: #fff; }
.archive-sidebar .widget-cta p { color: rgba(255,255,255,0.7); font-size: 14px; margin: 0 0 16px; }
.archive-sidebar .widget-cta .btn { width: 100%; }

/* Blog card */
.blog-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	padding: 22px;
	background: var(--bg);
	border: 0.5px solid var(--line);
	border-radius: var(--radius-lg);
	transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
@media (min-width: 600px) { .blog-card { grid-template-columns: 200px 1fr; gap: 24px; } }
.blog-card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow-1); }

.blog-card-thumb {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--bg-warm);
	position: relative;
}
.blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-card:hover .blog-card-thumb img { transform: scale(1.04); }

.blog-card-placeholder {
	width: 100%; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px;
	color: var(--ink);
	position: relative;
	transition: transform 0.4s ease;
}
.blog-card-placeholder svg { opacity: 0.85; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15)); }
.blog-card-placeholder .placeholder-cat {
	font-family: var(--font-display);
	font-size: 11px; font-weight: 700;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--ink);
	padding: 4px 10px;
	background: rgba(255,255,255,0.7);
	border-radius: 999px;
	backdrop-filter: blur(4px);
}
.blog-card:hover .blog-card-placeholder { transform: scale(1.04); }

.blog-card-body { display: flex; flex-direction: column; gap: 10px; }
.blog-card-meta { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.blog-card-meta .cat { padding: 4px 10px; border-radius: 999px; background: var(--yellow-tint); color: var(--ink); font-weight: 600; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.blog-card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }

.blog-card h2 {
	font-size: 22px; line-height: 1.2; margin: 0;
}
.blog-card h2 a { color: var(--ink); transition: color 0.15s ease; }
.blog-card h2 a:hover { color: var(--orange); }
.blog-card p { color: var(--ink-3); font-size: 14.5px; line-height: 1.55; margin: 0; }
.blog-card .read-more {
	color: var(--orange); font-weight: 600; font-size: 14px;
	display: inline-flex; align-items: center; gap: 4px;
	margin-top: 4px;
	padding: 6px 0;  /* Tap target enlarged */
	align-self: flex-start;
}

/* Pagination */
.vm-pagination { margin-top: 40px; }
.vm-pagination ul {
	display: flex; flex-wrap: wrap; gap: 8px;
	list-style: none; margin: 0; padding: 0; justify-content: center;
}
.vm-pagination a, .vm-pagination span {
	display: inline-grid; place-items: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border-radius: var(--radius-sm);
	border: 0.5px solid var(--line-2);
	background: var(--bg); color: var(--ink-2);
	font-family: var(--font-display); font-weight: 600; font-size: 14px;
	transition: all 0.15s ease;
}
.vm-pagination a:hover { border-color: var(--ink); }
.vm-pagination .current { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.vm-pagination .dots { border: 0; background: transparent; color: var(--ink-4); }

/* Single post */
.vm-single { padding: 48px 0 96px; }
@media (min-width: 768px) { .vm-single { padding: 72px 0 120px; } }
.single-head { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.single-head .cat { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--yellow-tint); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; }
.single-head h1 { font-size: clamp(28px, 4.4vw, 48px); margin-bottom: 18px; line-height: 1.1; }
.single-head .meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--ink-3); }
.single-head .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); align-self: center; }

.single-thumb { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-xl); margin: 0 auto 40px; max-width: 1080px; }
.single-thumb img { width: 100%; height: 100%; object-fit: cover; }

.single-body {
	max-width: 760px; margin: 0 auto;
	font-size: 17px; line-height: 1.7; color: var(--ink-2);
}
.single-body h2 { font-size: clamp(24px, 3vw, 32px); margin: 40px 0 16px; }
.single-body h3 { font-size: clamp(20px, 2.4vw, 24px); margin: 32px 0 14px; }
.single-body p { margin: 0 0 18px; }
.single-body a { color: var(--orange); border-bottom: 1px solid currentColor; }
.single-body a:hover { color: var(--ink); }
.single-body ul, .single-body ol { padding-left: 24px; margin: 0 0 18px; }
.single-body li { margin-bottom: 8px; }
.single-body blockquote {
	margin: 32px 0;
	padding: 22px 28px;
	background: var(--bg-warm);
	border-left: 3px solid var(--orange);
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-style: italic;
	color: var(--ink);
}
.single-body code {
	background: var(--bg-dim);
	padding: 2px 8px;
	border-radius: 6px;
	font-family: var(--font-mono);
	font-size: 0.92em;
}
.single-body pre {
	background: var(--ink); color: #fff;
	padding: 22px; border-radius: var(--radius);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 1.55;
}
.single-body img { border-radius: var(--radius); margin: 24px 0; }
.single-body table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.single-body th, .single-body td { padding: 12px 16px; border: 0.5px solid var(--line-2); text-align: left; }
.single-body th { background: var(--bg-warm); font-weight: 600; }

/* TOC */
.vm-toc {
	background: var(--bg-warm);
	border: 0.5px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 22px 24px;
	margin: 0 0 36px;
}
.vm-toc summary {
	font-family: var(--font-display);
	font-weight: 700; font-size: 14px;
	cursor: pointer;
	letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--ink); margin-bottom: 12px;
	list-style: none;
	display: inline-flex; align-items: center; gap: 8px;
}
.vm-toc summary::before { content: "📑"; }
.vm-toc[open] summary { margin-bottom: 14px; }
.vm-toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.vm-toc li.toc-h3 { padding-left: 18px; }
.vm-toc a { font-size: 14px; color: var(--ink-2); border: 0; }
.vm-toc a:hover { color: var(--orange); }

/* Share + author + related */
.share-row {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	margin: 48px auto 0; max-width: 760px;
	padding-top: 24px; border-top: 0.5px solid var(--line);
}
.share-row > strong { font-family: var(--font-display); font-size: 13px; color: var(--ink-3); margin-right: 6px; }
.share-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 0.5px solid var(--line-2);
	background: var(--bg); color: var(--ink-2);
	font-size: 13px; font-weight: 500;
	transition: all 0.15s ease;
}
.share-btn:hover { border-color: var(--ink); transform: translateY(-1px); }

.author-box {
	display: flex; gap: 18px; align-items: flex-start;
	max-width: 760px; margin: 36px auto 0;
	padding: 24px;
	background: var(--bg-warm);
	border: 0.5px solid var(--line);
	border-radius: var(--radius-lg);
}
.author-box-avatar { flex-shrink: 0; display: block; }
.author-box .avatar,
.author-avatar-img {
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--yellow); display: grid; place-items: center;
	font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink);
	flex-shrink: 0; object-fit: cover;
}
.author-box-body { min-width: 0; }
.author-box-eyebrow {
	display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px;
}
.author-box h5 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0 0 6px; color: var(--ink); }
.author-box h5 a { color: inherit; text-decoration: none; }
.author-box h5 a:hover { color: var(--orange); }
.author-box p { font-size: 13.5px; line-height: 1.6; color: var(--ink-3); margin: 0; }
.author-box-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.author-box-link { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.author-box-link:hover { color: var(--orange); }

/* Social icons — dùng chung author box + trang tác giả */
.author-socials { display: inline-flex; gap: 8px; }
.author-social {
	width: 34px; height: 34px; flex-shrink: 0;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--bg);
	border: 0.5px solid var(--line-2);
	color: var(--ink-3);
	transition: all 0.15s ease;
}
.author-social:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-2px); }

/* ─── Trang tác giả (author.php) ─── */
.vm-author .author-hero {
	display: flex; gap: 24px; align-items: center;
	max-width: 860px; margin: 0 auto 40px;
	padding-bottom: 32px;
	border-bottom: 0.5px solid var(--line);
}
.vm-author .author-hero-avatar { flex-shrink: 0; }
.vm-author .author-hero-avatar .avatar,
.vm-author .author-hero-avatar .author-avatar-img {
	width: 96px; height: 96px; border-radius: 50%;
	background: var(--yellow); display: grid; place-items: center;
	font-family: var(--font-display); font-weight: 700; font-size: 36px; color: var(--ink);
	object-fit: cover;
}
.vm-author .author-hero-body { min-width: 0; }
.vm-author .author-hero h1 { font-size: clamp(28px, 4vw, 40px); margin: 8px 0 0; }
.vm-author .author-hero-bio { font-size: 15px; line-height: 1.6; color: var(--ink-3); margin: 10px 0 0; max-width: 620px; }
.vm-author .author-hero-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.vm-author .author-hero-count { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
@media (max-width: 600px) {
	.vm-author .author-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
}

.related-posts { max-width: 1080px; margin: 64px auto 0; }
.related-posts h3 { font-size: 24px; margin-bottom: 24px; }
.related-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }

/* Compact blog card — vertical layout (related posts) */
.blog-card-compact {
	display: flex; flex-direction: column;
	background: var(--bg);
	border: 0.5px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.blog-card-compact:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.bcc-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--bg-warm);
	position: relative;
}
.bcc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-card-compact:hover .bcc-thumb img { transform: scale(1.04); }
.bcc-placeholder {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	color: var(--ink);
	transition: transform 0.4s ease;
}
.blog-card-compact:hover .bcc-placeholder { transform: scale(1.04); }
.bcc-placeholder svg { opacity: 0.85; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15)); }

.bcc-body { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bcc-cat {
	display: inline-flex; align-self: flex-start;
	padding: 4px 10px; border-radius: 999px;
	background: var(--yellow-tint);
	color: var(--ink);
	font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.bcc-cat:hover { background: var(--yellow); }
.blog-card-compact h4 {
	font-family: var(--font-display); font-weight: 700;
	font-size: 17px; line-height: 1.25; letter-spacing: -0.015em;
	margin: 0;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
	overflow: hidden;
}
.blog-card-compact h4 a { color: var(--ink); transition: color 0.15s ease; }
.blog-card-compact h4 a:hover { color: var(--orange); }
.bcc-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); margin-top: auto; padding-top: 8px; }
.bcc-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }

/* Comments */
.vm-comments { max-width: 760px; margin: 56px auto 0; }
.vm-comments h3, .vm-comments .comment-reply-title { font-size: 22px; margin-bottom: 20px; font-family: var(--font-display); font-weight: 700; }
.vm-comments .comment-list { list-style: none; padding: 0; margin: 0; }
.vm-comments .comment { padding: 18px 0; border-bottom: 0.5px solid var(--line); list-style: none; }
.vm-comments .comment::marker { content: none; }
.vm-comments .comment-meta { font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }
.vm-comments .comment-body { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.vm-comments .comment-reply-link { font-size: 13px; color: var(--orange); font-weight: 600; }
.vm-comments .comment-form { margin-top: 24px; display: grid; gap: 14px; }
.vm-comments .comment-form > p { margin: 0; }
.vm-comments .comment-form label { font-size: 13px; font-weight: 600; color: var(--ink-2); display: block; margin-bottom: 6px; }
.vm-comments .comment-form input[type="text"], .vm-comments .comment-form input[type="email"], .vm-comments .comment-form input[type="url"], .vm-comments .comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--line-2);
	border-radius: var(--radius-sm);
	background: var(--bg);
	font-family: var(--font-body); font-size: 15px;
	color: var(--ink);
	transition: border-color 0.15s ease;
}
.vm-comments .comment-form textarea { min-height: 120px; resize: vertical; }
.vm-comments .comment-form input:focus, .vm-comments .comment-form textarea:focus { outline: 0; border-color: var(--ink); }
.vm-comments .comment-notes { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.vm-comments .comment-form-author, .vm-comments .comment-form-email, .vm-comments .comment-form-url { margin: 0; }
@media (min-width: 600px) {
	.vm-comments .comment-form { grid-template-columns: 1fr 1fr; }
	.vm-comments .comment-form-comment, .vm-comments .comment-form-cookies-consent, .vm-comments .form-submit, .vm-comments .comment-notes { grid-column: 1 / -1; }
	.vm-comments .comment-form-url { grid-column: 1 / -1; }
}
/* Cookies consent — inline checkbox + label */
.vm-comments .comment-form-cookies-consent {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 14px 16px;
	background: var(--bg-warm);
	border: 0.5px solid var(--line);
	border-radius: var(--radius-sm);
}
.vm-comments .comment-form-cookies-consent input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px; height: 18px;
	margin-top: 1px;
	accent-color: var(--ink);
	cursor: pointer;
}
.vm-comments .comment-form-cookies-consent label {
	margin: 0;
	font-size: 13.5px; font-weight: 500;
	color: var(--ink-2); line-height: 1.5;
	cursor: pointer;
}
.vm-comments .form-submit { margin: 0; }
.vm-comments .form-submit input { padding: 14px 28px; background: var(--ink); color: var(--yellow); border: 0; border-radius: var(--radius); font-family: var(--font-display); font-weight: 600; font-size: 15px; cursor: pointer; }
.vm-comments .form-submit input:hover { background: #1A1A1A; }

/* Searchform */
.vm-searchform {
	display: flex; align-items: center; gap: 10px;
	max-width: 560px; margin: 0 auto;
}
.vm-searchform input[type="search"] {
	flex: 1;
	padding: 14px 18px;
	border: 0.5px solid var(--line-2);
	border-radius: var(--radius);
	background: var(--bg);
	font-family: var(--font-body); font-size: 15px;
	color: var(--ink);
}
.vm-searchform input[type="search"]:focus { outline: 0; border-color: var(--ink); }
.vm-searchform button { padding: 14px 22px; background: var(--ink); color: var(--yellow); border: 0; border-radius: var(--radius); font-family: var(--font-display); font-weight: 600; font-size: 15px; cursor: pointer; }
.vm-searchform button:hover { background: #1A1A1A; }

/* 404 + empty */
.vm-error, .vm-empty {
	max-width: 560px; margin: 0 auto;
	padding: 64px 24px;
	text-align: center;
}
.vm-error svg, .vm-empty svg { margin: 0 auto 20px; }
.vm-error h1, .vm-empty h2 { margin-bottom: 12px; }
.vm-error p, .vm-empty p { color: var(--ink-3); font-size: 16px; max-width: 42ch; margin: 0 auto 24px; }
.vm-error .vm-error-actions, .vm-empty .vm-empty-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
.vm-error-suggest { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; max-width: 360px; margin-left: auto; margin-right: auto; }
.vm-error-suggest a { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--bg-warm); border: 0.5px solid var(--line); border-radius: var(--radius); color: var(--ink); font-size: 14px; font-weight: 500; transition: all 0.15s ease; text-align: left; }
.vm-error-suggest a:hover { border-color: var(--ink); transform: translateY(-1px); }