/* ==========================================================
 * Table of Contents – sidebar widget
 * ========================================================== */

.tv-toc {
	background: #fdfbf6;
	border: 1px solid #f0e6d0;
	border-radius: 10px;
	padding: 18px 20px 20px;
	margin-bottom: 24px;
}

/* ----------------------------------------------------------
 * Sticky cả sidebar trên desktop — TOC + các widget bên dưới
 * dính theo khi user cuộn bài. Sidebar scroll riêng nếu cao
 * hơn viewport.
 *
 * Target trực tiếp .post-sidebar (cột chứa sidebar) thay vì
 * wrapper .is-sticky-column (có thể không render nếu theme mod tắt).
 * ---------------------------------------------------------- */
@media (min-width: 850px) {
	/* Cột sidebar: sticky */
	.blog-single .post-sidebar {
		position: sticky !important;
		top: 150px !important;
		align-self: flex-start !important;
		height: auto !important;
		max-height: calc(100vh - 170px);
		overflow-y: auto;
		overflow-x: hidden;

		/* Scrollbar mỏng */
		scrollbar-width: thin;
		scrollbar-color: #e5d5b0 transparent;
	}
	.blog-single .post-sidebar::-webkit-scrollbar {
		width: 5px;
	}
	.blog-single .post-sidebar::-webkit-scrollbar-track {
		background: transparent;
	}
	.blog-single .post-sidebar::-webkit-scrollbar-thumb {
		background: #e5d5b0;
		border-radius: 999px;
	}
	.blog-single .post-sidebar::-webkit-scrollbar-thumb:hover {
		background: #c7952c;
	}

	/* Nếu Flatsome render wrapper sticky → vô hiệu hoá JS sticky
	   (tránh xung đột set inline position/transform) */
	.blog-single .post-sidebar .is-sticky-column {
		position: static !important;
		top: auto !important;
		transform: none !important;
		height: auto !important;
	}
	.blog-single .post-sidebar .is-sticky-column__inner {
		max-height: none !important;
		overflow: visible !important;
	}

	/* Đảm bảo các tổ tiên không có overflow:hidden chặn sticky */
	.blog-single .row,
	.blog-single .row-large {
		overflow: visible !important;
	}
}

/* Title */
.tv-toc__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 13.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #724907;
}
.tv-toc__title svg {
	flex-shrink: 0;
	color: #c7952c;
}

/* Progress bar */
.tv-toc__progress {
	height: 3px;
	background: #f0e6d0;
	border-radius: 999px;
	margin-bottom: 14px;
	overflow: hidden;
}
.tv-toc__progress-bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #c7952c, #724907);
	border-radius: 999px;
	transition: width .1s linear;
}

/* Nav */
.tv-toc__nav {
	overflow-x: hidden;
}

/* List */
.tv-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tv-toc__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* h2 items */
.tv-toc__item--h2 {
	margin-top: 6px;
}
.tv-toc__item--h2:first-child {
	margin-top: 0;
}

/* h3 items — indent */
.tv-toc__item--h3 {
	padding-left: 14px;
	margin-top: 2px;
	position: relative;
}
.tv-toc__item--h3::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #d1b07a;
}

/* Links */
.tv-toc__link {
	display: block;
	padding: 4px 6px;
	border-radius: 5px;
	font-size: 13px;
	line-height: 1.45;
	color: #4b5563;
	text-decoration: none;
	transition: color .15s, background .15s;
	word-break: break-word;
}
.tv-toc__item--h2 > .tv-toc__link {
	font-weight: 600;
	color: #374151;
}
.tv-toc__link:hover {
	color: #724907;
	background: rgba(199, 149, 44, .08);
	text-decoration: none;
}

/* Active state — heading đang đọc */
.tv-toc__link.is-active {
	color: #724907;
	background: rgba(199, 149, 44, .12);
	font-weight: 700;
}
.tv-toc__item--h2 > .tv-toc__link.is-active {
	color: #c7952c;
}

/* Smooth scroll cho toàn trang */
html {
	scroll-behavior: smooth;
}

/* Offset cho sticky header khi jump */
.entry-content h2[id],
.entry-content h3[id],
.single-page h2[id],
.single-page h3[id] {
	scroll-margin-top: 130px;
}

/* Mobile: hiện TOC inline (trước bài), ẩn TOC sidebar */
@media (max-width: 849px) {
	.tv-toc--sidebar {
		display: none !important;
	}
	.tv-toc--inline {
		display: block;
		margin: 0 0 28px;
		border-radius: 8px;
	}
	.tv-toc--inline .tv-toc__nav {
		max-height: 240px;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: #e5d5b0 transparent;
	}
	.tv-toc--inline .tv-toc__nav::-webkit-scrollbar {
		width: 4px;
	}
	.tv-toc--inline .tv-toc__nav::-webkit-scrollbar-track {
		background: transparent;
	}
	.tv-toc--inline .tv-toc__nav::-webkit-scrollbar-thumb {
		background: #e5d5b0;
		border-radius: 999px;
	}
}

/* Desktop: hiện TOC sidebar, ẩn TOC inline */
@media (min-width: 850px) {
	.tv-toc--inline {
		display: none !important;
	}
	.tv-toc--sidebar {
		display: block;
	}
}


/* ==========================================================
 * Blog sidebar widgets – style đẹp hơn mặc định
 * ========================================================== */

/* Chung: mỗi widget */
.blog-single .post-sidebar .widget {
	background: #fff;
	border: 1px solid #f0e6d0;
	border-radius: 10px;
	padding: 18px 20px 20px;
	margin-bottom: 20px;
}

/* Widget title */
.blog-single .post-sidebar .widget .widget-title,
.blog-single .post-sidebar .widget > h3,
.blog-single .post-sidebar .widget > h4 {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: #724907;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid #f0e6d0;
}

/* Bỏ gạch ngang mặc định Flatsome dưới widget title */
.blog-single .post-sidebar .widget .is-divider,
.blog-single .post-sidebar .widget .widget-title + .is-divider {
	display: none !important;
}

/* Widget lists (categories, archives, meta) */
.blog-single .post-sidebar .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.blog-single .post-sidebar .widget ul li {
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid #f8f4ed;
	font-size: 13.5px;
	line-height: 1.5;
}
.blog-single .post-sidebar .widget ul li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.blog-single .post-sidebar .widget ul li a {
	color: #374151;
	text-decoration: none;
	transition: color .15s;
}
.blog-single .post-sidebar .widget ul li a:hover {
	color: #c7952c;
}

/* Recent Posts widget — date badge */
.blog-single .post-sidebar .widget_recent_entries .post-date,
.blog-single .post-sidebar .widget .post-date {
	display: block;
	font-size: 11px;
	color: #9ca3af;
	margin-top: 2px;
}

/* Flatsome recent posts widget with date box */
.blog-single .post-sidebar .widget .recent-blog-posts .recent-blog-posts-li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #f8f4ed;
}
.blog-single .post-sidebar .widget .recent-blog-posts .recent-blog-posts-li:last-child {
	border-bottom: 0;
}
.blog-single .post-sidebar .widget .recent-blog-posts .date-box {
	flex-shrink: 0;
	width: 42px;
	text-align: center;
	background: #fdfbf6;
	border: 1px solid #f0e6d0;
	border-radius: 6px;
	padding: 4px 6px;
}
.blog-single .post-sidebar .widget .recent-blog-posts .date-box .date-day {
	font-size: 15px;
	font-weight: 800;
	color: #c7952c;
	line-height: 1.2;
}
.blog-single .post-sidebar .widget .recent-blog-posts .date-box .date-month {
	font-size: 10px;
	text-transform: uppercase;
	color: #724907;
	font-weight: 600;
}
.blog-single .post-sidebar .widget .recent-blog-posts a {
	color: #374151;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.45;
	transition: color .15s;
}
.blog-single .post-sidebar .widget .recent-blog-posts a:hover {
	color: #c7952c;
}

/* Count badge cho categories/archives */
.blog-single .post-sidebar .widget_categories li,
.blog-single .post-sidebar .widget_archive li {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* "Recent Comments" — khi trống */
.blog-single .post-sidebar .widget_recent_comments .no-comments,
.blog-single .post-sidebar .widget_recent_comments p {
	font-size: 13px;
	color: #9ca3af;
	font-style: italic;
}

/* Ẩn widget "Recent Comments" nếu trống (chỉ có title) */
.blog-single .post-sidebar .widget_recent_comments ul:empty {
	display: none;
}