/**
 * Vibe Niche Engine - SEO, TOC, AI Summary & Single CPT Unified Styles
 *
 * @package VibeNicheEngine
 * @version 2.0.0
 */

/* ==========================================================================
   1. BREADCRUMBS
   ========================================================================== */
.vne-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 13px;
	color: var(--text-muted, #64748b);
	margin-bottom: 18px;
	line-height: 1.5;
}

.vne-breadcrumbs ol {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.vne-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vne-breadcrumbs a {
	color: var(--text-muted, #64748b);
	text-decoration: none;
	transition: color var(--transition-fast, 0.15s ease);
	font-weight: 500;
}

.vne-breadcrumbs a:hover {
	color: var(--primary-color, #0f4c81);
}

.vne-breadcrumb-sep {
	color: var(--text-light, #94a3b8);
	font-size: 14px;
	user-select: none;
	line-height: 1;
}

.vne-breadcrumbs .vne-breadcrumb-current {
	color: var(--text-main, #1e293b);
	font-weight: 600;
	max-width: 320px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 640px) {
	.vne-breadcrumbs {
		font-size: 12px;
	}
	.vne-breadcrumbs .vne-breadcrumb-current {
		max-width: 180px;
	}
}

/* ==========================================================================
   2. READING TIME & POST META BADGES
   ========================================================================== */
.vne-reading-time-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	background: var(--primary-light, #e0f2fe);
	color: var(--primary-color, #0f4c81);
	border-radius: var(--radius-full, 9999px);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.vne-reading-time-badge svg {
	width: 14px;
	height: 14px;
}

.vne-post-header-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 13px;
	color: var(--text-muted, #64748b);
	margin-bottom: 16px;
}

.vne-post-header-meta .vne-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.vne-post-header-meta .vne-meta-dot {
	color: var(--text-light, #cbd5e1);
}

/* ==========================================================================
   3. AI SUMMARY BOX (KEY TAKEAWAYS & AI ACTION PROMPTS)
   ========================================================================== */
.vne-ai-summary-box {
	position: relative;
	background: linear-gradient(135deg, rgba(238, 242, 255, 0.9) 0%, rgba(245, 243, 255, 0.85) 50%, rgba(239, 246, 255, 0.9) 100%);
	border: 1px solid rgba(147, 197, 253, 0.6);
	border-radius: var(--radius-lg, 16px);
	padding: 24px 28px;
	margin: 28px 0 36px;
	box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.08), 0 4px 6px -2px rgba(99, 102, 241, 0.04);
	backdrop-filter: blur(8px);
	transition: box-shadow var(--transition-normal, 0.25s ease);
}

.vne-ai-summary-box:hover {
	box-shadow: 0 14px 30px -4px rgba(99, 102, 241, 0.13), 0 6px 10px -2px rgba(99, 102, 241, 0.06);
}

.vne-ai-summary-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(199, 210, 254, 0.5);
}

.vne-ai-badge-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vne-ai-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #3b82f6 100%);
	color: #ffffff;
	border-radius: var(--radius-full, 9999px);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

.vne-ai-badge svg {
	width: 14px;
	height: 14px;
}

.vne-ai-summary-title {
	font-size: 17px;
	font-weight: 700;
	color: #1e1b4b;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.vne-ai-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	color: #4338ca;
	background: rgba(99, 102, 241, 0.1);
	border: 1px solid rgba(99, 102, 241, 0.2);
	padding: 2px 8px;
	border-radius: 6px;
}

.vne-ai-takeaways-list {
	list-style: none;
	padding: 0;
	margin: 0 0 20px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vne-ai-takeaway-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: #334155;
}

.vne-ai-takeaway-icon {
	flex-shrink: 0;
	margin-top: 3px;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #e0e7ff;
	color: #4f46e5;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
}

.vne-ai-actions-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px dashed rgba(199, 210, 254, 0.8);
}

.vne-ai-actions-label {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	margin-right: 4px;
}

.vne-btn-ai-chatgpt,
.vne-btn-ai-gemini {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 16px;
	border-radius: var(--radius-full, 9999px);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: all var(--transition-fast, 0.15s ease);
	cursor: pointer;
	border: 1px solid transparent;
}

.vne-btn-ai-chatgpt {
	background: #0f172a;
	color: #ffffff;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
}

.vne-btn-ai-chatgpt:hover {
	background: #10a37f;
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(16, 163, 127, 0.35);
}

.vne-btn-ai-gemini {
	background: linear-gradient(135deg, #1e40af 0%, #7c3aed 50%, #db2777 100%);
	color: #ffffff;
	box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
}

.vne-btn-ai-gemini:hover {
	filter: brightness(1.1);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

.vne-btn-ai-chatgpt svg,
.vne-btn-ai-gemini svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.vne-ai-summary-box {
		padding: 18px 18px;
	}
	.vne-ai-actions-bar {
		flex-direction: column;
		align-items: stretch;
	}
	.vne-btn-ai-chatgpt,
	.vne-btn-ai-gemini {
		justify-content: center;
		width: 100%;
	}
}

/* ==========================================================================
   4. TABLE OF CONTENTS (TOC)
   ========================================================================== */
.vne-toc-box {
	background: var(--light-color, #f8fafc);
	border: 1px solid var(--border-color, #e2e8f0);
	border-radius: var(--radius-md, 12px);
	padding: 20px 24px;
	margin: 28px 0 36px;
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
	transition: all var(--transition-normal, 0.25s ease);
}

.vne-toc-box:hover {
	border-color: #cbd5e1;
	box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.vne-toc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	user-select: none;
}

.vne-toc-title-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vne-toc-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--dark-color, #0f172a);
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vne-toc-toggle {
	background: transparent;
	border: 1px solid var(--border-color, #e2e8f0);
	color: var(--text-muted, #64748b);
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: var(--radius-full, 9999px);
	cursor: pointer;
	transition: all var(--transition-fast, 0.15s ease);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.vne-toc-toggle:hover {
	color: var(--primary-color, #0f4c81);
	border-color: var(--primary-color, #0f4c81);
	background: var(--primary-light, #e0f2fe);
}

.vne-toc-content {
	max-height: 2000px;
	overflow: hidden;
	opacity: 1;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--border-color, #e2e8f0);
	transition: max-height 0.35s ease-in-out, opacity 0.25s ease, margin-top 0.25s ease, padding-top 0.25s ease;
}

.vne-toc-box.is-collapsed .vne-toc-content {
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	padding-top: 0;
	border-top: none;
	pointer-events: none;
}

.vne-toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: toc-counter;
}

.vne-toc-item {
	margin-bottom: 8px;
	line-height: 1.5;
}

.vne-toc-item:last-child {
	margin-bottom: 0;
}

.vne-toc-item a {
	color: #334155;
	text-decoration: none;
	font-size: 14.5px;
	transition: all var(--transition-fast, 0.15s ease);
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}

.vne-toc-item a:hover {
	color: var(--primary-color, #0f4c81);
	transform: translateX(3px);
}

.vne-toc-h2 {
	font-weight: 600;
	counter-increment: toc-counter;
}

.vne-toc-h2 > a::before {
	content: counter(toc-counter) ".";
	color: var(--primary-color, #0f4c81);
	font-weight: 700;
	font-size: 13px;
	min-width: 16px;
}

.vne-toc-h3 {
	padding-left: 22px;
	font-weight: 400;
	position: relative;
}

.vne-toc-h3 > a {
	font-size: 13.5px;
	color: var(--text-muted, #64748b);
}

.vne-toc-h3 > a::before {
	content: "—";
	color: var(--text-light, #94a3b8);
	font-size: 12px;
}

.vne-toc-h3 a:hover {
	color: var(--primary-color, #0f4c81);
}

/* Headings smooth scroll anchor offset */
.entry-content h2[id],
.entry-content h3[id] {
	scroll-margin-top: calc(var(--header-height, 80px) + 20px);
}

/* ==========================================================================
   5. AUTHOR BOX (E-E-A-T)
   ========================================================================== */
.vne-author-box {
	background: var(--light-color, #f8fafc);
	border: 1px solid var(--border-color, #e2e8f0);
	border-radius: var(--radius-md, 12px);
	padding: 24px 28px;
	margin: 40px 0 30px;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
}

.vne-author-avatar-wrap {
	flex-shrink: 0;
	position: relative;
}

.vne-author-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--primary-color, #0f4c81);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.vne-author-verified-badge {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 20px;
	height: 20px;
	background: #10b981;
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #ffffff;
	font-size: 11px;
}

.vne-author-details {
	flex: 1;
}

.vne-author-role-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--primary-color, #0f4c81);
	letter-spacing: 0.05em;
	margin-bottom: 4px;
}

.vne-author-name {
	font-size: 18px;
	font-weight: 700;
	color: var(--dark-color, #0f172a);
	margin: 0 0 6px 0;
}

.vne-author-name a {
	color: inherit;
	text-decoration: none;
}

.vne-author-name a:hover {
	color: var(--primary-color, #0f4c81);
}

.vne-author-bio {
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-muted, #64748b);
	margin: 0 0 12px 0;
}

.vne-author-meta-footer {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	color: var(--text-light, #94a3b8);
}

@media (max-width: 640px) {
	.vne-author-box {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 20px;
	}
	.vne-author-meta-footer {
		justify-content: center;
	}
}

/* ==========================================================================
   6. ARTICLE SHARING & COPY LINK BUTTON
   ========================================================================== */
.vne-article-footer-bar {
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--border-color, #e2e8f0);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.vne-article-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.vne-tag-pill {
	display: inline-block;
	padding: 4px 12px;
	background: #f1f5f9;
	color: #475569;
	border-radius: var(--radius-full, 9999px);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	transition: all var(--transition-fast, 0.15s ease);
}

.vne-tag-pill:hover {
	background: var(--primary-light, #e0f2fe);
	color: var(--primary-color, #0f4c81);
}

.vne-share-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vne-share-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted, #64748b);
	margin-right: 4px;
}

.vne-btn-share {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-color, #e2e8f0);
	background: #ffffff;
	color: var(--text-muted, #64748b);
	text-decoration: none;
	transition: all var(--transition-fast, 0.15s ease);
	cursor: pointer;
}

.vne-btn-share:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm, 0 2px 4px rgba(0,0,0,0.08));
}

.vne-btn-share-facebook:hover {
	background: #1877f2;
	color: #ffffff;
	border-color: #1877f2;
}

.vne-btn-share-zalo:hover {
	background: #0068ff;
	color: #ffffff;
	border-color: #0068ff;
}

.vne-btn-copy-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: var(--radius-full, 9999px);
	border: 1px solid var(--border-color, #e2e8f0);
	background: #ffffff;
	color: var(--text-main, #1e293b);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition-fast, 0.15s ease);
}

.vne-btn-copy-link:hover {
	background: var(--primary-color, #0f4c81);
	color: #ffffff;
	border-color: var(--primary-color, #0f4c81);
}

.vne-btn-copy-link svg {
	width: 14px;
	height: 14px;
}

/* ==========================================================================
   7. TOAST NOTIFICATION
   ========================================================================== */
.vne-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	background: #0f172a;
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
	border-radius: var(--radius-md, 10px);
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
	transform: translateY(100px);
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vne-toast.is-show,
.vne-toast.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.vne-toast svg {
	width: 18px;
	height: 18px;
	color: #10b981;
}

/* ==========================================================================
   8. RELATED POSTS GRID (3 COLUMNS, 16:9 RATIO)
   ========================================================================== */
.vne-related-posts-section {
	margin-top: 60px;
	padding-top: 40px;
	border-top: 1px solid var(--border-color, #e2e8f0);
}

.vne-related-title {
	font-size: 24px;
	font-weight: 800;
	color: var(--dark-color, #0f172a);
	margin-bottom: 24px;
	position: relative;
	display: inline-block;
}

.vne-related-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 40px;
	height: 3px;
	background: var(--primary-color, #0f4c81);
	border-radius: 2px;
}

.vne-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.vne-related-card {
	background: #ffffff;
	border: 1px solid var(--border-color, #e2e8f0);
	border-radius: var(--radius-md, 12px);
	overflow: hidden;
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
	transition: all var(--transition-normal, 0.25s ease);
	display: flex;
	flex-direction: column;
}

.vne-related-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1));
	border-color: #cbd5e1;
}

.vne-related-thumb-link {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f1f5f9;
}

.vne-related-thumb-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.vne-related-card:hover .vne-related-thumb-link img {
	transform: scale(1.05);
}

.vne-related-body {
	padding: 16px 18px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.vne-related-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--text-muted, #64748b);
	margin-bottom: 8px;
}

.vne-related-card-title {
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.45;
	margin: 0 0 10px;
	color: var(--dark-color, #0f172a);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vne-related-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-fast, 0.15s ease);
}

.vne-related-card-title a:hover {
	color: var(--primary-color, #0f4c81);
}

.vne-related-readmore {
	margin-top: auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--primary-color, #0f4c81);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	transition: gap var(--transition-fast, 0.15s ease);
}

.vne-related-card:hover .vne-related-readmore {
	gap: 7px;
}

@media (max-width: 900px) {
	.vne-related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 580px) {
	.vne-related-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   9. BLOG ARCHIVE GRID & POST CARD (INDEX.PHP & ARCHIVE.PHP)
   ========================================================================== */
.vne-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.vne-post-card {
	background: #ffffff;
	border: 1px solid var(--border-color, #e2e8f0);
	border-radius: var(--radius-md, 12px);
	overflow: hidden;
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
	transition: all var(--transition-normal, 0.25s ease);
	display: flex;
	flex-direction: column;
}

.vne-post-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1));
	border-color: #cbd5e1;
}

.vne-post-thumb-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f1f5f9;
}

.vne-post-thumb-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.vne-post-card:hover .vne-post-thumb-wrap img {
	transform: scale(1.05);
}

.vne-post-badge-cat {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--primary-color, #0f4c81);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--radius-full, 9999px);
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	text-decoration: none;
	z-index: 2;
}

.vne-post-badge-cat:hover {
	color: #ffffff;
	background: var(--primary-hover, #0a375f);
}

.vne-post-body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.vne-post-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12.5px;
	color: var(--text-muted, #64748b);
	margin-bottom: 10px;
}

.vne-post-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 12px;
	color: var(--dark-color, #0f172a);
}

.vne-post-title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-fast, 0.15s ease);
}

.vne-post-title a:hover {
	color: var(--primary-color, #0f4c81);
}

.vne-post-excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-muted, #64748b);
	margin-bottom: 18px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vne-post-footer {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--border-light, #f1f5f9);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.vne-post-readmore {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--primary-color, #0f4c81);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: gap var(--transition-fast, 0.15s ease);
}

.vne-post-card:hover .vne-post-readmore {
	gap: 9px;
}

@media (max-width: 980px) {
	.vne-blog-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 620px) {
	.vne-blog-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* ==========================================================================
   10. SINGLE CPT UNIFIED VIEW (PRODUCTS / SERVICES / COURSES / ETC.)
   ========================================================================== */
.vne-cpt-hero {
	background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
	border-bottom: 1px solid var(--border-color, #e2e8f0);
	padding: 24px 0 32px;
}

.vne-cpt-header-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.vne-cpt-title {
	font-size: 32px;
	font-weight: 800;
	color: var(--dark-color, #0f172a);
	line-height: 1.3;
	margin: 0 0 10px;
}

.vne-cpt-subtitle-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 14px;
	color: var(--text-muted, #64748b);
}

.vne-cpt-subtitle-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* Two columns layout */
.vne-cpt-layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 36px;
	align-items: start;
	padding-top: 36px;
	padding-bottom: 80px;
}

@media (max-width: 1024px) {
	.vne-cpt-layout {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

/* Left Column: Media & Details */
.vne-cpt-main {
	min-width: 0;
}

.vne-cpt-featured-media {
	position: relative;
	border-radius: var(--radius-md, 12px);
	overflow: hidden;
	box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
	margin-bottom: 28px;
	background: #f1f5f9;
}

.vne-cpt-featured-media img {
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: cover;
	display: block;
}

.vne-cpt-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 30px;
}

.vne-cpt-gallery-item {
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #f1f5f9;
	box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.05));
	cursor: pointer;
	border: 2px solid transparent;
	transition: all var(--transition-fast, 0.15s ease);
}

.vne-cpt-gallery-item:hover {
	border-color: var(--primary-color, #0f4c81);
	transform: translateY(-2px);
}

.vne-cpt-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vne-cpt-section-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--dark-color, #0f172a);
	margin: 32px 0 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 8px;
	border-bottom: 2px solid #f1f5f9;
}

/* Right Column: Sticky Sidebar & Cards */
.vne-cpt-sidebar {
	position: sticky;
	top: calc(var(--header-height, 80px) + 20px);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Highlighted Price Card */
.vne-cpt-price-card {
	background: #ffffff;
	border: 2px solid #fed7aa;
	border-radius: var(--radius-lg, 16px);
	padding: 24px;
	box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
	position: relative;
	overflow: hidden;
}

.vne-cpt-price-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
}

.vne-cpt-price-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted, #64748b);
	margin-bottom: 6px;
}

.vne-cpt-price-value {
	font-size: 32px;
	font-weight: 800;
	color: #d97706;
	line-height: 1.2;
	margin-bottom: 4px;
}

.vne-cpt-price-unit {
	font-size: 13px;
	color: var(--text-muted, #64748b);
	font-weight: 500;
}

/* Specifications Table */
.vne-cpt-specs-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 18px;
	font-size: 14px;
}

.vne-cpt-specs-table tr {
	border-bottom: 1px solid var(--border-light, #f1f5f9);
}

.vne-cpt-specs-table tr:last-child {
	border-bottom: none;
}

.vne-cpt-specs-table td {
	padding: 10px 4px;
	vertical-align: middle;
}

.vne-cpt-specs-table td:first-child {
	color: var(--text-muted, #64748b);
	font-weight: 500;
	width: 48%;
}

.vne-cpt-specs-table td:last-child {
	color: var(--dark-color, #0f172a);
	font-weight: 600;
	text-align: right;
}

/* CTA Action Buttons Group */
.vne-cpt-actions-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 22px;
}

.vne-btn-cpt-book {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 20px;
	background: linear-gradient(135deg, var(--primary-color, #0f4c81) 0%, #1e40af 100%);
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	border-radius: var(--radius-md, 10px);
	border: none;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(15, 76, 129, 0.35);
	transition: all var(--transition-fast, 0.15s ease);
}

.vne-btn-cpt-book:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(15, 76, 129, 0.45);
	color: #ffffff;
}

.vne-btn-cpt-hotline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 20px;
	background: #ffffff;
	color: #ef4444;
	border: 2px solid #ef4444;
	font-size: 14.5px;
	font-weight: 700;
	border-radius: var(--radius-md, 10px);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--transition-fast, 0.15s ease);
}

.vne-btn-cpt-hotline:hover {
	background: #ef4444;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.vne-btn-cpt-hotline svg {
	animation: vne-pulse-call 1.8s infinite;
}

@keyframes vne-pulse-call {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.18); }
}

.vne-btn-cpt-zalo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 20px;
	background: #0068ff;
	color: #ffffff;
	font-size: 14.5px;
	font-weight: 700;
	border-radius: var(--radius-md, 10px);
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: all var(--transition-fast, 0.15s ease);
	box-shadow: 0 4px 12px rgba(0, 104, 255, 0.25);
}

.vne-btn-cpt-zalo:hover {
	background: #0054cc;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 104, 255, 0.35);
}

/* ==========================================================================
   11. CONSULTATION & BOOKING MODAL
   ========================================================================== */
.vne-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.65);
	backdrop-filter: blur(4px);
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vne-modal-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

.vne-modal-card {
	background: #ffffff;
	border-radius: var(--radius-lg, 16px);
	width: 100%;
	max-width: 480px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	transform: scale(0.92) translateY(20px);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
}

.vne-modal-overlay.is-active .vne-modal-card {
	transform: scale(1) translateY(0);
}

.vne-modal-header {
	background: linear-gradient(135deg, var(--primary-color, #0f4c81) 0%, #1e40af 100%);
	color: #ffffff;
	padding: 24px 28px;
	position: relative;
}

.vne-modal-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 6px;
	color: #ffffff;
}

.vne-modal-subtitle {
	font-size: 13px;
	opacity: 0.9;
	margin: 0;
	color: #ffffff;
}

.vne-modal-close-btn {
	position: absolute;
	top: 18px;
	right: 18px;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: #ffffff;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--transition-fast, 0.15s ease);
}

.vne-modal-close-btn:hover {
	background: rgba(255, 255, 255, 0.35);
}

.vne-modal-body {
	padding: 28px;
}

.vne-modal-form .vne-form-field {
	margin-bottom: 16px;
}

.vne-modal-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--dark-color, #0f172a);
	margin-bottom: 6px;
}

.vne-modal-form .vne-form-input,
.vne-modal-form textarea.vne-form-input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--border-color, #e2e8f0);
	border-radius: var(--radius-sm, 8px);
	font-size: 14px;
	transition: border-color var(--transition-fast, 0.15s ease);
	outline: none;
}

.vne-modal-form .vne-form-input:focus {
	border-color: var(--primary-color, #0f4c81);
	box-shadow: 0 0 0 3px var(--primary-light, #e0f2fe);
}

.vne-modal-form .vne-btn-submit {
	width: 100%;
	padding: 12px;
	background: var(--primary-color, #0f4c81);
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	border-radius: var(--radius-md, 10px);
	border: none;
	cursor: pointer;
	transition: all var(--transition-fast, 0.15s ease);
	margin-top: 8px;
}

.vne-modal-form .vne-btn-submit:hover {
	background: var(--primary-hover, #0a375f);
}

body.vne-modal-open {
	overflow: hidden;
}

/* ==========================================================================
   12. COMPATIBILITY EXTENSIONS & DUAL SELECTORS
   ========================================================================== */
.vne-breadcrumbs-wrapper {
	padding: 10px 0;
	font-size: 13px;
	color: var(--text-muted, #64748b);
	margin-bottom: 18px;
}
.vne-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.vne-breadcrumb-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.vne-breadcrumb-link {
	color: var(--text-muted, #64748b);
	text-decoration: none;
	transition: color var(--transition-fast, 0.15s ease);
	font-weight: 500;
}
.vne-breadcrumb-link:hover {
	color: var(--primary-color, #0f4c81);
}
.vne-breadcrumb-separator {
	color: var(--text-light, #94a3b8);
	font-size: 14px;
	user-select: none;
}
.vne-breadcrumb-text {
	color: var(--text-main, #1e293b);
	font-weight: 600;
}

/* TOC Container Alternative Markup */
.vne-toc-container {
	background: var(--light-color, #f8fafc);
	border: 1px solid var(--border-color, #e2e8f0);
	border-radius: var(--radius-md, 12px);
	padding: 20px 24px;
	margin: 28px 0 36px;
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
	transition: all var(--transition-normal, 0.25s ease);
}
.vne-toc-container:hover {
	border-color: #cbd5e1;
	box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}
.vne-toc-title-text {
	font-size: 16px;
	font-weight: 700;
	color: var(--dark-color, #0f172a);
}
.vne-toc-toggle-btn {
	background: transparent;
	border: 1px solid var(--border-color, #e2e8f0);
	color: var(--text-muted, #64748b);
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: var(--radius-full, 9999px);
	cursor: pointer;
	transition: all var(--transition-fast, 0.15s ease);
}
.vne-toc-toggle-btn:hover {
	color: var(--primary-color, #0f4c81);
	border-color: var(--primary-color, #0f4c81);
	background: var(--primary-light, #e0f2fe);
}
.vne-toc-sublist {
	padding-left: 20px;
	margin: 6px 0;
	list-style: none;
}
.vne-toc-link {
	color: #334155;
	text-decoration: none;
	font-size: 14.5px;
	transition: all var(--transition-fast, 0.15s ease);
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}
.vne-toc-link:hover {
	color: var(--primary-color, #0f4c81);
	transform: translateX(3px);
}
.vne-toc-item-h2 {
	font-weight: 600;
	margin-bottom: 8px;
}
.vne-toc-item-h3 {
	font-size: 13.5px;
	color: var(--text-muted, #64748b);
	margin-bottom: 6px;
}

/* AI Summary Alternative Markup */
.vne-ai-model-tag {
	font-size: 11px;
	font-weight: 700;
	color: #4338ca;
	background: rgba(99, 102, 241, 0.1);
	border: 1px solid rgba(99, 102, 241, 0.2);
	padding: 2px 8px;
	border-radius: 6px;
}
.vne-ai-summary-label {
	font-size: 14px;
	font-weight: 700;
	color: #1e1b4b;
	margin-bottom: 12px;
}
.vne-ai-bullet-icon {
	color: #4f46e5;
	font-weight: 700;
	margin-right: 8px;
}
.vne-ai-point-text {
	color: #334155;
	font-size: 15px;
	line-height: 1.6;
}
.vne-ai-summary-footer {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed rgba(199, 210, 254, 0.8);
}
.vne-ai-buttons-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.vne-ai-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 16px;
	border-radius: var(--radius-full, 9999px);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: all var(--transition-fast, 0.15s ease);
	cursor: pointer;
}
.vne-ai-btn-chatgpt {
	background: #0f172a;
	color: #ffffff;
}
.vne-ai-btn-chatgpt:hover {
	background: #10a37f;
	color: #ffffff;
	transform: translateY(-1px);
}
.vne-ai-btn-gemini {
	background: linear-gradient(135deg, #1e40af 0%, #7c3aed 50%, #db2777 100%);
	color: #ffffff;
}
.vne-ai-btn-gemini:hover {
	filter: brightness(1.1);
	color: #ffffff;
	transform: translateY(-1px);
}
.vne-ai-disclaimer {
	font-size: 11px;
	color: #94a3b8;
	margin-top: 8px;
}