/**
 * Tom Luxury — Trang bai viet
 * -----------------------------------------------------------------------------
 * plan §28.6 (danh sach bai viet) + §28.7 (chi tiet bai viet).
 *
 * Nap tai inc/elements/page-blog.php o wp_enqueue_scripts priority 210, sau
 * tokens/base/components (200) va sau assets/css/sections/posts.css — nho vay
 * cac lop the bai viet cua trang chu (.tl-posts__*) duoc TAI DUNG va chi can
 * tinh chinh o day.
 *
 * Moi mau / khoang cach / font deu tham chieu bien trong tokens.css.
 * Khong hex, khong hardcode, khong lam dung !important.
 *
 * MUC LUC
 *   1. Bien dung chung
 *   2. Duong dan phan cap (breadcrumb)
 *   3. Chip chuyen muc
 *   4. Trang danh sach bai viet
 *   5. The bai viet noi bat
 *   6. Luoi the + phan trang
 *   7. Chi tiet bai viet — khoi tieu de lon
 *   8. Chi tiet bai viet — cot doc
 *   9. Muc luc (plugin table-of-contents-plus)
 *  10. Chia se + chan bai
 *  11. Khoi keu goi hanh dong cuoi bai
 *  12. Bai viet lien quan
 *  13. Cot ben (sidebar)
 *  14. Responsive
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
 * 1. BIEN DUNG CHUNG
 * ========================================================================== */
.tl-blog-single .article-inner,
.tl-blog {
	/* Be ngang cot doc: 46rem ~ 736px ~ 72 ky tu o co chu 18px cua .entry-content */
	--tl-read: 46rem;
}

/* =============================================================================
 * 2. DUONG DAN PHAN CAP
 *    Chi la giao dien; schema BreadcrumbList do Rank Math phu trach (plan §22).
 * ========================================================================== */
.tl-crumbs {
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-muted);
}

.tl-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-crumbs__item {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	min-width: 0;
	line-height: 1.3;
}

.tl-crumbs__item + .tl-crumbs__item::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	background-color: var(--color-gold-line);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* display:inline-block (khong phai inline-flex) de text-overflow:ellipsis
   hoat dong; padding-block dua vung cham len 44px theo plan §21. */
.tl-crumbs__link,
.tl-crumbs__current {
	display: inline-block;
	max-width: 100%;
	min-width: 0;
	padding-block: calc((var(--tap-target) - 1.3em) / 2);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

.tl-crumbs__link {
	color: var(--color-muted);
}

.tl-crumbs__link:hover,
.tl-crumbs__link:focus-visible {
	color: var(--color-luxury-gold);
}

.tl-crumbs__current {
	max-width: 40ch;
	color: var(--color-secondary);
}

/* =============================================================================
 * 3. CHIP CHUYEN MUC
 * ========================================================================== */
.tl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-chips__item {
	display: flex;
	min-width: 0;
}

.tl-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	min-height: var(--tap-target);
	max-width: 100%;
	padding: var(--space-3xs) var(--space-md);
	background-color: var(--color-surface);
	border: var(--rule-w) solid var(--color-border);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	line-height: 1.2;
	color: var(--color-secondary);
	transition: background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}

.tl-chip__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tl-chip__count {
	flex: none;
	font-size: var(--font-size-xs);
	font-weight: var(--weight-regular);
	opacity: .65;
}

.tl-chip:hover,
.tl-chip:focus-visible {
	border-color: var(--color-luxury-gold);
	color: var(--color-luxury-gold);
}

/* Muc dang xem — nhan vang dac, chu toi (plan: "active vang") */
.tl-chip.is-active {
	background-color: var(--color-luxury-gold);
	border-color: var(--color-luxury-gold);
	color: var(--color-primary);
}

.tl-chip.is-active:hover,
.tl-chip.is-active:focus-visible {
	background-color: var(--color-gold-light);
	border-color: var(--color-gold-light);
	color: var(--color-primary);
}

.tl-chip.is-active .tl-chip__count {
	opacity: .8;
}

/* =============================================================================
 * 4. TRANG DANH SACH BAI VIET
 * ========================================================================== */
.tl-blog {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	padding-block: var(--space-lg) var(--space-3xl);
}

.tl-blog__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding-bottom: var(--space-md);
	border-bottom: var(--rule-w) solid var(--color-border);
}

.tl-blog__chips {
	min-width: 0;
}

/* --- 4.1 O tim kiem ------------------------------------------------------- */
.tl-blog__search {
	display: flex;
	flex: 0 1 320px;
	align-items: stretch;
	min-width: 0;
}

.tl-blog__search-input {
	min-width: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: var(--radius-pill);
	border-bottom-left-radius: var(--radius-pill);
	padding-left: var(--space-md);
	font-size: var(--font-size-sm);
}

.tl-blog__search-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--control-h);
	min-height: var(--control-h);
	margin-left: calc(var(--rule-w) * -1);
	padding: 0;
	background-color: var(--color-primary);
	border: var(--rule-w) solid var(--color-primary);
	border-top-right-radius: var(--radius-pill);
	border-bottom-right-radius: var(--radius-pill);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	color: var(--color-on-dark);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}

.tl-blog__search-btn:hover,
.tl-blog__search-btn:focus-visible {
	background-color: var(--color-luxury-gold);
	border-color: var(--color-luxury-gold);
	color: var(--color-primary);
}

/* span/svg trong nut phai la block, neu khong SVG phinh het be ngang */
.tl-blog__search-btn > svg {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
}

.tl-blog__empty {
	margin: 0;
	padding: var(--space-2xl) var(--space-md);
	background-color: var(--color-surface);
	border: var(--rule-w) dashed var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--font-size-lg);
	text-align: center;
	color: var(--color-muted);
}

/* =============================================================================
 * 5. THE BAI VIET NOI BAT
 * ========================================================================== */
.tl-feature {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	align-items: stretch;
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
}

.tl-feature:hover,
.tl-feature:focus-within {
	transform: translateY(-2px);
}

.tl-feature__media {
	height: 100%;
	border-radius: 0;
}

.tl-feature__media .tl-ratio {
	height: 100%;
	border-radius: 0;
}

.tl-feature__body {
	justify-content: center;
	gap: var(--space-sm);
	padding: var(--space-xl);
}

.tl-feature__eyebrow {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-widest);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--color-luxury-gold);
}

/* .tl-card__meta mac dinh co order:-1 — dua ve dung mach eyebrow → chuyen muc */
.tl-feature__body .tl-card__meta {
	order: 0;
	position: relative;
	padding-left: var(--space-md);
}

.tl-feature__body .tl-card__meta::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	translate: 0 -50%;
	width: 8px;
	height: 8px;
	background-color: var(--color-luxury-gold);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.tl-feature__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	text-transform: none;
	color: var(--color-primary);
}

.tl-feature__title a {
	color: inherit;
}

.tl-feature__title a:hover,
.tl-feature__title a:focus-visible {
	color: var(--color-luxury-gold);
}

.tl-feature .tl-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	font-size: var(--font-size-base);
}

/* Vien focus ve quanh CA the vi dong chu bi cat boi line-clamp */
.tl-feature .tl-posts__link:focus-visible {
	outline: none;
}

.tl-feature .tl-posts__link:focus-visible::after {
	outline: var(--focus-w) solid var(--color-focus);
	outline-offset: calc(var(--focus-offset) * -1);
	border-radius: var(--radius-lg);
}

/* =============================================================================
 * 6. LUOI THE + PHAN TRANG
 * ========================================================================== */
.tl-blog__grid {
	--tl-cols: 3;
	--tl-cols-md: 2;
	--tl-cols-sm: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-blog__item {
	display: flex;
	min-width: 0;
}

.tl-blog__item > .tl-card {
	width: 100%;
}

/* Dong chan the: ngay dang + thoi gian doc */
.tl-posts__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3xs) var(--space-2xs);
	margin: var(--space-3xs) 0 0;
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-muted);
}

.tl-posts__foot > * + *::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: var(--space-2xs);
	background-color: var(--color-gold-line);
	border-radius: var(--radius-pill);
	vertical-align: middle;
}

.tl-feature .tl-posts__foot {
	margin-top: var(--space-2xs);
}

.tl-blog__pagination {
	display: flex;
	justify-content: center;
}

.tl-blog__pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-blog__pagination .page-numbers > li {
	display: flex;
	margin: 0;
}

/* =============================================================================
 * 7. CHI TIET BAI VIET — KHOI TIEU DE LON
 *    Flatsome dung template-parts/posts/partials/single-featured.php gan vao
 *    hook flatsome_after_header. Chi doi to hinh thuc, khong doi noi dung.
 * ========================================================================== */
.tl-blog-single .blog-featured-title {
	background-color: var(--color-primary);
	border-bottom: var(--rule-w) solid var(--color-border-dark);
}

.tl-blog-single .blog-featured-title .page-title-bg {
	background-color: var(--color-primary);
	background-image:
		radial-gradient(120% 130% at 50% -25%, var(--color-gold-soft), transparent 60%),
		linear-gradient(180deg, transparent, var(--color-overlay-soft));
}

/* Lop phu den 50% do theme cha dat inline — giam lai cho ton am hon */
.tl-blog-single .blog-featured-title .title-overlay {
	opacity: .3;
}

.tl-blog-single .blog-featured-title .page-title-inner {
	padding-block: var(--space-2xl);
}

.tl-blog-single .blog-featured-title .entry-title {
	max-width: min(100%, 52rem);
	margin: 0 auto;
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	text-transform: none;
	text-wrap: balance;
	color: var(--color-on-dark);
}

/* style.css cu khoa "h1.entry-title{font-size:28px!important}". Day la mot
   trong hai cho BAT BUOC dung !important de tra lai thang co chu cua theme —
   khong co cach nao khac vi khong duoc sua style.css. */
.tl-blog-single .blog-featured-title .entry-title {
	font-size: clamp(1.75rem, 3.4vw, 3rem) !important;
}

.tl-blog-single .blog-featured-title .entry-meta {
	display: flex;
	border-bottom: 0;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs) var(--space-sm);
	margin-top: var(--space-md);
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-on-dark-muted);
}

.tl-blog-single .blog-featured-title .entry-meta span,
.tl-blog-single .blog-featured-title .entry-meta time {
	font-family: var(--font-body);
	color: var(--color-on-dark-muted);
}

.tl-blog-single .blog-featured-title .entry-meta a {
	color: var(--color-gold-light);
}

.tl-blog-single .blog-featured-title .entry-meta a:hover,
.tl-blog-single .blog-featured-title .entry-meta a:focus-visible {
	color: var(--color-on-dark);
}

/* Duong ke vang manh duoi tieu de */
.tl-blog-single .blog-featured-title .entry-title::after {
	content: "";
	display: block;
	width: clamp(80px, 12vw, 140px);
	height: var(--diamond);
	margin: var(--space-md) auto 0;
	background: linear-gradient(to right,
		transparent,
		var(--color-luxury-gold) 28%,
		var(--color-luxury-gold) 72%,
		transparent);
	clip-path: polygon(
		0 calc(50% - (var(--rule-w) / 2)),
		calc(50% - (var(--diamond) / 2)) calc(50% - (var(--rule-w) / 2)),
		50% 0,
		calc(50% + (var(--diamond) / 2)) calc(50% - (var(--rule-w) / 2)),
		100% calc(50% - (var(--rule-w) / 2)),
		100% calc(50% + (var(--rule-w) / 2)),
		calc(50% + (var(--diamond) / 2)) calc(50% + (var(--rule-w) / 2)),
		50% 100%,
		calc(50% - (var(--diamond) / 2)) calc(50% + (var(--rule-w) / 2)),
		0 calc(50% + (var(--rule-w) / 2))
	);
}

/* =============================================================================
 * 8. CHI TIET BAI VIET — COT DOC
 * ========================================================================== */
.tl-blog-single .article-inner {
	padding-block: var(--space-lg) var(--space-2xl);
}

/* Be ngang doc thoang, can giua trong cot noi dung */
.tl-blog-single .tl-article__head,
.tl-blog-single .entry-content,
.tl-blog-single footer.entry-meta,
.tl-blog-single .tl-article__cta,
.tl-blog-single .related-post {
	max-width: var(--tl-read);
	margin-inline: auto;
}

/* --- 8.1 Dai thong tin dau bai ------------------------------------------- */
.tl-article__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-md);
	border-bottom: var(--rule-w) solid var(--color-border);
}

.tl-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs) var(--space-sm);
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-muted);
}

.tl-article__cat {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
	padding: var(--space-3xs) var(--space-sm);
	background-color: var(--color-gold-soft);
	border-radius: var(--radius-pill);
	font-weight: var(--weight-semibold);
	color: var(--color-secondary);
}

.tl-article__cat:hover,
.tl-article__cat:focus-visible {
	background-color: var(--color-luxury-gold);
	color: var(--color-primary);
}

.tl-article__read {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
}

.tl-article__read::before {
	content: "";
	width: 5px;
	height: 5px;
	background-color: var(--color-gold-line);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* --- 8.2 Thu bac tieu de trong bai --------------------------------------- */
.tl-blog-single .entry-content h2 {
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-md);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: var(--leading-snug);
	color: var(--color-primary);
}

.tl-blog-single .entry-content h2::before {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	margin-bottom: var(--space-sm);
	background-color: var(--color-luxury-gold);
	border-radius: var(--radius-pill);
}

.tl-blog-single .entry-content h3 {
	margin-top: var(--space-xl);
	margin-bottom: var(--space-xs);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: var(--leading-snug);
	color: var(--color-secondary);
}

.tl-blog-single .entry-content h4,
.tl-blog-single .entry-content h5,
.tl-blog-single .entry-content h6 {
	margin-top: var(--space-lg);
	margin-bottom: var(--space-2xs);
	color: var(--color-secondary);
}

.tl-blog-single .entry-content > *:first-child {
	margin-top: 0;
}

.tl-blog-single .entry-content ul,
.tl-blog-single .entry-content ol {
	margin-bottom: var(--space-md);
	padding-left: 1.35em;
}

.tl-blog-single .entry-content li {
	margin-bottom: var(--space-2xs);
}

.tl-blog-single .entry-content li::marker {
	color: var(--color-luxury-gold);
}

/* --- 8.3 Anh + chu thich ------------------------------------------------- */
.tl-blog-single .entry-content img {
	display: block;
	margin-inline: auto;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

.tl-blog-single .entry-content figure,
.tl-blog-single .entry-content .wp-caption {
	max-width: 100%;
	margin-block: var(--space-lg);
}

.tl-blog-single .entry-content figcaption,
.tl-blog-single .entry-content .wp-caption-text {
	margin-top: var(--space-2xs);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-style: italic;
	line-height: var(--leading-base);
	text-align: center;
	color: var(--color-muted);
}

/* --- 8.4 Trich dan ------------------------------------------------------- */
.tl-blog-single .entry-content blockquote {
	position: relative;
	margin-block: var(--space-xl);
	padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-3xl);
	background-color: var(--color-gold-soft);
	border-left: 3px solid var(--color-luxury-gold);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 1.8vw, var(--font-size-2xl));
	line-height: var(--leading-snug);
	color: var(--color-secondary);
}

.tl-blog-single .entry-content blockquote::before {
	content: "\201C";
	position: absolute;
	top: var(--space-2xs);
	left: var(--space-md);
	font-family: var(--font-heading);
	font-size: 3.5rem;
	line-height: 1;
	color: var(--color-gold-line);
}

.tl-blog-single .entry-content blockquote p {
	font-family: inherit;
	font-size: inherit;
}

/* --- 8.5 Bang — plan §10: bat buoc cuon ngang duoc ----------------------- */
.tl-blog-single .entry-content table {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-block: var(--space-lg);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: var(--rule-w) solid var(--color-border);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--leading-base);
}

.tl-blog-single .entry-content table:focus-visible {
	outline: var(--focus-w) solid var(--color-focus);
	outline-offset: var(--focus-offset);
}

.tl-blog-single .entry-content th,
.tl-blog-single .entry-content td {
	padding: var(--space-xs) var(--space-md);
	border: 0;
	border-bottom: var(--rule-w) solid var(--color-border);
	vertical-align: top;
}

.tl-blog-single .entry-content thead th {
	background-color: var(--color-gold-soft);
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	font-size: var(--font-size-sm);
	color: var(--color-primary);
}

.tl-blog-single .entry-content tbody tr:nth-child(even) {
	background-color: var(--color-shade);
}

.tl-blog-single .entry-content tbody tr:last-child td {
	border-bottom: 0;
}

/* =============================================================================
 * 9. MUC LUC — plugin table-of-contents-plus
 *    KHONG thay the plugin, chi khoac lai giao dien cho khop tong.
 * ========================================================================== */
.tl-blog-single #toc_container {
	width: 100%;
	max-width: 100%;
	margin-block: var(--space-xl);
	padding: var(--space-md) var(--space-lg);
	background-color: var(--color-surface);
	border: var(--rule-w) solid var(--color-border);
	border-left: 3px solid var(--color-luxury-gold);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	box-shadow: var(--shadow-card);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--leading-base);
}

.tl-blog-single #toc_container .toc_title {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	margin: 0 0 var(--space-sm);
	padding-bottom: var(--space-2xs);
	border-bottom: var(--rule-w) solid var(--color-border);
	font-family: var(--font-heading);
	font-size: var(--font-size-lg);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	text-align: left;
	color: var(--color-primary);
}

.tl-blog-single #toc_container .toc_title::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	background-color: var(--color-luxury-gold);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.tl-blog-single #toc_container .toc_toggle {
	margin-left: auto;
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	font-weight: var(--weight-regular);
	letter-spacing: var(--tracking-wide);
	text-transform: none;
}

.tl-blog-single #toc_container .toc_toggle a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
	color: var(--color-luxury-gold);
	text-decoration: none;
}

.tl-blog-single #toc_container ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-blog-single #toc_container ul ul {
	margin-top: var(--space-3xs);
	padding-left: var(--space-md);
	border-left: var(--rule-w) solid var(--color-border);
}

.tl-blog-single #toc_container li {
	margin: 0;
	line-height: var(--leading-base);
}

.tl-blog-single #toc_container a {
	display: inline-block;
	padding-block: var(--space-3xs);
	font-size: var(--font-size-sm);
	color: var(--color-secondary);
	text-decoration: none;
}

.tl-blog-single #toc_container a:hover,
.tl-blog-single #toc_container a:focus-visible {
	color: var(--color-luxury-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tl-blog-single #toc_container .toc_number {
	display: inline-block;
	min-width: 2.2em;
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	color: var(--color-luxury-gold);
}

.tl-blog-single #toc_container ul ul .toc_number {
	color: var(--color-muted);
}

/* =============================================================================
 * 10. CHIA SE + CHAN BAI
 *     Chi giu vi site DANG BAT san (Flatsome: blog_share).
 * ========================================================================== */
.tl-blog-single .blog-share {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: var(--rule-w) solid var(--color-border);
}

.tl-blog-single .blog-share .is-divider {
	display: none;
}

.tl-blog-single .blog-share .social-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
}

.tl-blog-single .blog-share a.button {
	width: var(--tap-target);
	height: var(--tap-target);
	min-height: var(--tap-target);
	margin: 0;
}

/* style.css cu ap mau thuong hieu cua tung mang xa hoi bang !important
   (.button.twitter{background:#2478ba!important}...). Day la cho thu hai
   BAT BUOC dung !important de dua bo nut ve dung tong vang dong. */
.tl-blog-single .blog-share .social-icons a.button.icon {
	background: transparent !important;
	border-color: var(--color-gold-line) !important;
	color: var(--color-secondary) !important;
}

.tl-blog-single .blog-share .social-icons a.button.icon:hover,
.tl-blog-single .blog-share .social-icons a.button.icon:focus-visible {
	background: var(--color-luxury-gold) !important;
	border-color: var(--color-luxury-gold) !important;
	color: var(--color-primary) !important;
}

.tl-blog-single .blog-share .social-icons a.button.icon > i {
	color: inherit;
}

.tl-blog-single footer.entry-meta {
	margin-top: var(--space-lg);
	padding-block: var(--space-sm);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	letter-spacing: var(--tracking-tight);
	text-transform: none;
	color: var(--color-muted);
}

.tl-blog-single footer.entry-meta a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
	padding: var(--space-3xs) var(--space-sm);
	background-color: var(--color-gold-soft);
	border-radius: var(--radius-pill);
	font-size: var(--font-size-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-secondary);
}

.tl-blog-single footer.entry-meta a:hover,
.tl-blog-single footer.entry-meta a:focus-visible {
	background-color: var(--color-luxury-gold);
	color: var(--color-primary);
}

/* =============================================================================
 * 11. KHOI KEU GOI HANH DONG CUOI BAI
 * ========================================================================== */
.tl-article__cta {
	margin-top: var(--space-2xl);
	padding: var(--space-xl);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-image: radial-gradient(120% 140% at 12% 0%, var(--color-gold-soft), transparent 58%);
}

.tl-article__cta-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-sm);
}

.tl-article__cta-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(1.375rem, 2.2vw, var(--font-size-3xl));
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	text-transform: none;
	color: var(--color-on-dark);
}

.tl-article__cta-desc {
	max-width: 56ch;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--leading-base);
	color: var(--color-on-dark-muted);
}

.tl-article__cta-action {
	margin-top: var(--space-2xs);
}

/* =============================================================================
 * 12. BAI VIET LIEN QUAN
 *     Markup + truy van giu nguyen cua khach, chi khoac lai giao dien.
 * ========================================================================== */
.tl-blog-single .related-post {
	margin-top: var(--space-2xl);
}

/* Dung grid thay flex: mot rule cu ep tieu de rong 100% nen o flex no chiem
   het cho, duong ke vang khong con cho de keo dai. Cot "auto" cua grid luon
   co lai bang be ngang chu that. */
.tl-blog-single .related-post__head {
	display: grid;
	grid-template-columns: auto minmax(40px, 1fr);
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
}

.tl-blog-single .related-post__title {
	max-width: max-content;
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-h4);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-primary);
}

/* Thay hoa tiet anh line.png cu bang duong ke vang manh */
.tl-blog-single .related-post .duong-line {
	align-self: center;
	width: auto;
	height: 1px;
	margin: 0;
	background-color: transparent;
	background-image: linear-gradient(to right, var(--color-luxury-gold), var(--color-gold-line) 55%, transparent);
	overflow: visible;
}

.tl-blog-single .related-post .col-inner {
	background-color: transparent;
	box-shadow: none;
	border-radius: var(--radius-md);
	transition: transform var(--dur) var(--ease);
}

.tl-blog-single .related-post .col:hover .col-inner {
	transform: translateY(-4px);
	box-shadow: none;
}

.tl-blog-single .related-post .box-image,
.tl-blog-single .related-post .image-cover {
	background-color: var(--color-shade);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.tl-blog-single .related-post .box-text {
	padding: var(--space-sm) 0 0;
	text-align: left;
}

.tl-blog-single .related-post .post-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-lg);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	text-transform: none;
	color: var(--color-primary);
}

.tl-blog-single .related-post .col:hover .post-title {
	color: var(--color-luxury-gold);
}

.tl-blog-single .related-post .post-meta {
	margin-top: var(--space-3xs);
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-muted);
}

.tl-blog-single .related-post .is-divider {
	display: none;
}

/* =============================================================================
 * 13. COT BEN
 * ========================================================================== */
.tl-blog-single .post-sidebar .widget-title {
	font-family: var(--font-heading);
	font-size: var(--font-size-lg);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-primary);
}

.tl-blog-single .post-sidebar .is-divider {
	background-color: var(--color-luxury-gold);
}

.tl-blog-single .post-sidebar .widget ul {
	padding-left: 0;
	list-style: none;
}

.tl-blog-single .post-sidebar .widget li {
	padding-block: var(--space-2xs);
	border-bottom: var(--rule-w) solid var(--color-border);
}

.tl-blog-single .post-sidebar .widget li:last-child {
	border-bottom: 0;
}

.tl-blog-single .post-sidebar .widget li a {
	display: block;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	line-height: var(--leading-base);
	color: var(--color-secondary);
}

.tl-blog-single .post-sidebar .widget li a:hover,
.tl-blog-single .post-sidebar .widget li a:focus-visible {
	color: var(--color-luxury-gold);
}

.tl-blog-single .post-sidebar .widget li a[aria-current="page"] {
	color: var(--color-luxury-gold);
	font-weight: var(--weight-semibold);
}

/* =============================================================================
 * 14. RESPONSIVE
 *     Da tinh cho 1920 / 1440 / 1366 / 1024 / 820 / 768 / 430 / 390 / 360
 * ========================================================================== */

/* Man hinh rat rong: khong de the noi bat keo qua kho */
@media (min-width: 1600px) {

	.tl-feature__body {
		padding: var(--space-2xl);
	}
}

/* Laptop nho / tablet ngang — the noi bat VAN giu hai cot, chi thu gon dem */
@media (max-width: 1024px) {

	.tl-feature__body {
		padding: var(--space-lg);
	}

	.tl-blog-single .blog-featured-title .page-title-inner {
		padding-block: var(--space-xl);
	}
}

/* Duoi 860px moi xep doc the noi bat, tranh anh 16/9 cao qua man hinh */
@media (max-width: 860px) {

	.tl-feature {
		grid-template-columns: minmax(0, 1fr);
	}

	.tl-feature__media .tl-ratio {
		height: auto;
	}
}

/* Tablet dung */
@media (max-width: 820px) {

	.tl-blog {
		gap: var(--space-lg);
		padding-bottom: var(--space-2xl);
	}

	.tl-blog__bar {
		align-items: stretch;
		flex-direction: column;
	}

	.tl-blog__search {
		flex: 1 1 auto;
		max-width: none;
	}

	.tl-blog-single .article-inner {
		padding-block: var(--space-md) var(--space-xl);
	}

	.tl-article__cta {
		padding: var(--space-lg);
	}
}

/* Dien thoai */
@media (max-width: 640px) {

	.tl-crumbs__current {
		max-width: 24ch;
	}

	.tl-feature {
		border-radius: var(--radius-md);
	}

	.tl-feature__body {
		padding: var(--space-md) var(--space-sm) var(--space-lg);
	}

	.tl-feature__title {
		-webkit-line-clamp: 4;
		line-clamp: 4;
	}

	.tl-blog-single .entry-content blockquote {
		padding: var(--space-md) var(--space-md) var(--space-md) var(--space-2xl);
		font-size: var(--font-size-lg);
	}

	.tl-blog-single .entry-content blockquote::before {
		left: var(--space-2xs);
		font-size: 2.5rem;
	}

	.tl-blog-single #toc_container {
		padding: var(--space-sm) var(--space-md);
	}

	/* Tren dien thoai KHONG bop chu thanh mot tu moi dong: dat be ngang toi
	   thieu cho o roi de bang tu cuon ngang (plan §10). */
	.tl-blog-single .entry-content th,
	.tl-blog-single .entry-content td {
		min-width: 9.5rem;
		padding: var(--space-2xs) var(--space-sm);
	}

	.tl-blog-single .related-post__head {
		flex-wrap: wrap;
	}
}

/* Dien thoai hep */
@media (max-width: 430px) {

	.tl-chip {
		padding-inline: var(--space-sm);
		font-size: var(--font-size-xs);
	}

	.tl-blog__empty {
		padding: var(--space-xl) var(--space-sm);
		font-size: var(--font-size-base);
	}

	.tl-blog-single .blog-featured-title .entry-title {
		max-width: none;
	}
}

@media (max-width: 360px) {

	.tl-feature__body {
		padding: var(--space-sm) var(--space-2xs) var(--space-md);
	}

	.tl-article__cta {
		padding: var(--space-md);
	}
}