.dlb-width-limited {
	max-width: var(--dlb-max-width, 1200px);
	margin-left: auto;
	margin-right: auto;
}

/* An toan tran ngang tren dien thoai that (lop bao ve chung, them dong loat 2026-08-19) --
   xem bai hoc day du o wp_plugin_dlb_lessons ve "layout viewport bi noi rong vinh vien":
   tren trinh duyet di dong THAT, bat ky khoi nao co con/chau tran ra ngoai o LAN VE DAU
   TIEN (truoc khi bat ky JS/media-query nao kip ap dung) co the khien trinh duyet tu "noi
   rong layout viewport" vinh vien cho CA TRANG, khong chi rieng khoi do. Dat max-width:100%
   + overflow-x:hidden tren CHINH phan tu goc cua khoi la lop phong thu re + an toan nhat --
   khong doi giao dien binh thuong (khoi da duoc tinh du rong san), chi kich hoat khi co gi
   do ben trong thuc su tran ra. */
.dlb-toc {
	max-width: 100%;
	overflow-x: hidden;
}

.dlb-toc__notice {
	color: #666666;
	font-style: italic;
}

/* Ẩn mặc định — JS chỉ hiện ra (thêm class "is-ready") sau khi quét thấy đủ heading tối
   thiểu (data-min-headings), tránh lộ khung rỗng xấu nếu JS lỗi/chưa tải kịp/bài viết
   không có đủ tiêu đề để cần mục lục (xem assets/js/dlb-toc-nm71-frontend.js). */
.dlb-toc {
	display: none;
	background: var(--dlb-toc-bg, #f7f7f8);
	border: 1px solid var(--dlb-toc-border, #e5e5e5);
	border-radius: var(--dlb-toc-radius, 10px);
	padding: 18px 20px;
	box-sizing: border-box;
}
.dlb-toc.is-ready {
	display: block;
}
.dlb-toc--sticky {
	position: sticky;
	top: 20px;
}

.dlb-toc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.dlb-toc__title {
	color: var(--dlb-toc-title-color, #111111);
	font-size: clamp(11px, 4.0vw, var(--dlb-toc-title-size, 15px));
	font-weight: 700;
}
.dlb-toc__toggle {
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: var(--dlb-toc-title-color, #111111);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
}
.dlb-toc__toggle svg {
	width: 18px;
	height: 18px;
}
.dlb-toc.is-collapsed .dlb-toc__toggle {
	transform: rotate(-90deg);
}

.dlb-toc__list {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 1000px;
	overflow: hidden;
	transition: max-height 0.3s ease, margin-top 0.3s ease, opacity 0.2s ease;
}
.dlb-toc.is-collapsed .dlb-toc__list {
	max-height: 0;
	margin-top: 0;
	opacity: 0;
}

.dlb-toc__item {
	display: block;
}
.dlb-toc__link {
	display: flex;
	gap: 8px;
	color: var(--dlb-toc-link-color, #444444);
	font-size: clamp(11px, 3.73vw, var(--dlb-toc-link-size, 14px));
	text-decoration: none;
	line-height: 1.5;
	transition: color 0.15s ease;
}
.dlb-toc__link:hover,
.dlb-toc__link.is-active {
	color: var(--dlb-toc-link-active, #2563eb);
}
.dlb-toc--numbered .dlb-toc__link-number {
	flex-shrink: 0;
	opacity: 0.6;
}
.dlb-toc--bullet .dlb-toc__link::before {
	content: "";
	flex-shrink: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	margin-top: 8px;
	opacity: 0.6;
}

/* Thụt lề theo cấp heading — gán qua "style" inline bởi JS (--dlb-toc-indent), không cần
   1 class riêng cho mỗi cấp. */
.dlb-toc__item {
	padding-left: var(--dlb-toc-indent, 0px);
}