/**
 * Hộp mục lục trên trang (page).
 *
 * Bài viết có mục lục dính ở cột bên; trang thì nội dung do UX Builder dựng,
 * không có cột nào để dính vào, nên mục lục ở đây là một hộp nằm trong dòng
 * chảy nội dung. Class trùng với mục lục bài viết để dùng chung `blog.js`,
 * còn phần tô màu thì tách hẳn ra file này — `blog.css` sơn lại cả vùng nội
 * dung theo layout blog, đem sang trang thường là đổi cả giao diện.
 *
 * Nền trang là trắng/kem nên nấc cam dùng ở đây là cam nung #A85B0E (4.6:1),
 * không phải cam nhạt.
 */

body.ttb-has-page-toc {
	/* Header dính 70px — chừa thêm cho tiêu đề khỏi bị che khi nhảy neo. */
	--ttb-stick: 92px;
}

body.admin-bar.ttb-has-page-toc {
	--ttb-stick: calc(92px + var(--wp-admin--admin-bar--height, 32px));
}

@media screen and (max-width: 782px) {
	/* Từ 782px trở xuống admin bar cuộn theo trang, không phải trừ hao nữa. */
	body.admin-bar.ttb-has-page-toc {
		--ttb-stick: 92px;
	}
}

body.ttb-has-page-toc .entry-content h2[id],
body.ttb-has-page-toc .entry-content h3[id],
body.ttb-has-page-toc .page-wrapper h2[id],
body.ttb-has-page-toc .page-wrapper h3[id] {
	scroll-margin-top: var(--ttb-stick);
}

.ttb-page-toc {
	--ttb-navy: #0F1E33;
	--ttb-ink: #1C2B3F;
	--ttb-muted: #6B7686;
	--ttb-line: #E4DFD4;
	--ttb-gold: #A85B0E;

	display: block;
	max-width: 780px;
	margin: 0 0 32px;
	padding: 20px 24px;
	border: 1px solid var(--ttb-line);
	background-color: #F7F5F0;
	text-align: left;
	scroll-margin-top: var(--ttb-stick);
}

.ttb-page-toc .ttb-toc__summary {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--ttb-navy);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	line-height: 1.4;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.ttb-page-toc .ttb-toc__summary::-webkit-details-marker {
	display: none;
}

.ttb-page-toc .ttb-toc__summary .ttb-icon {
	flex: 0 0 auto;
	vertical-align: middle;
	color: var(--ttb-gold);
}

/* Mũi tên gập/mở — chỉ là hai nét mảnh, không hộp, không nền. */
.ttb-page-toc .ttb-toc__summary::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 1.5px solid var(--ttb-muted);
	border-bottom: 1.5px solid var(--ttb-muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}

.ttb-page-toc[open] .ttb-toc__summary::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

.ttb-page-toc .ttb-toc__nav {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--ttb-line);
}

.ttb-page-toc .ttb-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ttb-toc;
}

.ttb-page-toc .ttb-toc__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ttb-page-toc .ttb-toc__item {
	margin: 0;
}

.ttb-page-toc .ttb-toc__item::before {
	display: none;
}

.ttb-page-toc .ttb-toc__link {
	display: block;
	padding: 7px 0 7px 15px;
	border-left: 2px solid var(--ttb-line);
	color: var(--ttb-ink);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	transition: color .18s ease, border-color .18s ease;
}

.ttb-page-toc .ttb-toc__list > .ttb-toc__item > .ttb-toc__link {
	counter-increment: ttb-toc;
}

.ttb-page-toc .ttb-toc__list > .ttb-toc__item > .ttb-toc__link::before {
	content: counter(ttb-toc) ". ";
	color: var(--ttb-gold);
	font-weight: 600;
}

.ttb-page-toc .ttb-toc__item.is-sub .ttb-toc__link {
	padding-left: 30px;
	color: var(--ttb-muted);
	font-size: 14px;
}

.ttb-page-toc .ttb-toc__link:hover,
.ttb-page-toc .ttb-toc__link:focus {
	color: var(--ttb-gold);
	border-left-color: var(--ttb-gold);
}

.ttb-page-toc .ttb-toc__link.is-active {
	color: var(--ttb-navy);
	border-left-color: var(--ttb-gold);
	font-weight: 600;
}

@media (max-width: 767px) {
	.ttb-page-toc {
		margin-bottom: 26px;
		padding: 16px 18px;
	}

	.ttb-page-toc .ttb-toc__link {
		font-size: 14.5px;
	}
}