/**
 * DS Elements — Mục lục bài viết
 */

.elementor-widget-ds-post-toc {
	width: 100%;
	min-width: 0;
}

/* Dính phải đặt trên WRAPPER của widget, không phải trên .ds-toc.
   Đã đo: .elementor-widget-container bọc .ds-toc cao đúng bằng .ds-toc
   (572.7 = 572.7), mà position:sticky chỉ trượt được trong lòng khối chứa nó —
   không dư một pixel nào thì nó đứng yên và cuộn mất hút. Wrapper widget mới là
   con trực tiếp của cột cao 2382px, ở đó mới có chỗ mà trượt. */
.elementor-widget-ds-post-toc:has(.ds-toc--sticky) {
	position: sticky;
	top: var(--ds-toc-sticky-top, var(--ds-space-6));
	align-self: flex-start;
}

.ds-toc {
	--ds-toc-padding: var(--ds-space-6);
	--ds-toc-item-gap: var(--ds-space-4);
	--ds-toc-sticky-top: var(--ds-space-6);

	width: 100%;
	min-width: 0;
}

.ds-toc *,
.ds-toc *::before,
.ds-toc *::after {
	box-sizing: border-box;
}

.ds-toc__box {
	padding: var(--ds-toc-padding);
	background: var(--ds-toc-bg, var(--ds-color-white));
	border: 1px solid var(--ds-toc-border, var(--ds-color-border));
	border-radius: var(--ds-toc-radius, var(--ds-radius-md));
}

/* --- Tiêu đề khối ------------------------------------------------------- */

.ds-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ds-space-3);
	cursor: default;
	list-style: none;
}

.ds-toc__summary::-webkit-details-marker {
	display: none;
}

.ds-toc__heading {
	color: var(--ds-toc-heading-color, var(--ds-color-brand));
	font-size: var(--ds-fs-h4);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-h4);
	text-transform: uppercase;
	letter-spacing: var(--ds-ls-nav);
}

/* Mũi tên chỉ xuất hiện khi khối gập được, tức là ở điện thoại. */
.ds-toc__caret {
	display: none;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--ds-color-muted);
	border-bottom: 2px solid var(--ds-color-muted);
	transform: rotate(45deg);
	transition: transform var(--ds-transition);
}

/* --- Danh sách ---------------------------------------------------------- */

.ds-toc__list {
	display: flex;
	flex-direction: column;
	gap: var(--ds-toc-item-gap);
	margin: var(--ds-space-4) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ds-toc__item--h3 {
	padding-left: var(--ds-space-6);
}

.ds-toc__link {
	display: flex;
	align-items: baseline;
	gap: var(--ds-space-3);
	color: var(--ds-toc-link-color, var(--ds-color-body));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
	text-decoration: none;
	transition: color var(--ds-transition);
}

.ds-toc__num {
	flex: 0 0 auto;
	color: var(--ds-toc-num-color, var(--ds-color-brand));
	font-weight: var(--ds-fw-bold);
	font-variant-numeric: tabular-nums;
}

.ds-toc--no-num .ds-toc__num {
	display: none;
}

.ds-toc__link:hover,
.ds-toc__link:hover .ds-toc__num {
	color: var(--ds-toc-active-color, var(--ds-color-brand-light));
}

.ds-toc__item.is-active .ds-toc__link,
.ds-toc__item.is-active .ds-toc__num {
	color: var(--ds-toc-active-color, var(--ds-color-brand-light));
	font-weight: var(--ds-fw-semibold);
}

/* --- Điện thoại: biến thành khối gập ------------------------------------ */

/* Trên máy tính <details> luôn mở và không bấm được — thuộc tính open bị CSS
   ghi đè bằng display, nên dù người dùng có bấm cũng không gập. */
@media (min-width: 768px) {
	.ds-toc__list {
		display: flex !important;
	}
}

@media (max-width: 767px) {
	.elementor-widget-ds-post-toc:has(.ds-toc--sticky) {
		position: static;
	}

	.ds-toc--collapse .ds-toc__summary {
		cursor: pointer;
	}

	.ds-toc--collapse .ds-toc__caret {
		display: block;
	}

	.ds-toc--collapse .ds-toc__box[open] .ds-toc__caret {
		transform: rotate(-135deg);
	}

	/* Gập sẵn khi mở trang: danh sách chín mục đẩy hết nội dung xuống dưới
	   màn hình đầu tiên. */
	.ds-toc--collapse .ds-toc__box:not([open]) .ds-toc__list {
		display: none;
	}

	/* HTML in sẵn open; JS (nạp cuối trang) mới gập lại → danh sách hiện rồi
	   biến mất, đẩy thân bài lên ~0,25 CLS (PageSpeed 04/10). Giấu ngay từ đầu
	   cho tới khi JS gắn .is-ready. */
	.ds-toc--collapse:not(.is-ready) .ds-toc__list {
		display: none;
	}
}