/* ── ZafaPay Doc TOC ──────────────────────────────────────────── */

.elementor-widget-zafapay_doc_toc > .elementor-widget-container {
	padding: 0 !important;
}

/* ── Scrollbar ───────────────────────────────────────────────── */

.zfp-doc-toc > div {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.zfp-doc-toc > div::-webkit-scrollbar {
	width: 0;
	background: transparent;
}

.zfp-doc-toc > div:hover {
	scrollbar-width: thin;
	scrollbar-color: #d4d4d8 transparent;
}

.zfp-doc-toc > div:hover::-webkit-scrollbar {
	width: 5px;
}

.zfp-doc-toc > div:hover::-webkit-scrollbar-thumb {
	background-color: #d4d4d8;
	border-radius: 3px;
}

html.dark .zfp-doc-toc > div:hover {
	scrollbar-color: #3f3f46 transparent;
}

html.dark .zfp-doc-toc > div:hover::-webkit-scrollbar-thumb {
	background-color: #3f3f46;
}

/* ── Header icon + title ─────────────────────────────────────── */

.zfp-toc-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background-color: rgba(45, 107, 207, 0.15); /* #2D6BCF / 15% */
	flex-shrink: 0;
}

.zfp-toc-icon {
	width: 14px;
	height: 14px;
	color: rgb(45, 107, 207);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.zfp-toc-title {
	font-size: 14px;
	font-weight: 600;
	color: rgb(45, 107, 207) !important; /* #2D6BCF */
}

html.dark .zfp-toc-icon-wrap {
	background-color: rgba(45, 107, 207, 0.2);
}

html.dark .zfp-toc-icon {
	color: rgb(99, 148, 232); /* lighter blue in dark mode */
}

html.dark .zfp-toc-title {
	color: rgb(99, 148, 232) !important;
}

/* ── TOC links ───────────────────────────────────────────────── */

.zfp-toc-list {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

.zfp-toc-list li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Base link */
.zfp-toc-link {
	display: flex;
	align-items: center;
	line-height: 1.35;
	font-size: 13px;
	border-radius: 6px;
	padding: 4px 8px;
	text-decoration: none !important;
	color: rgb(81, 82, 92) !important;     /* lab(35.1166 1.78212 -6.1173) */
	background-color: transparent;
	transition: color 0.15s ease, background-color 0.15s ease;
	cursor: pointer;
}

.zfp-toc-link:hover {
	color: rgb(45, 107, 207) !important;
	text-decoration: none !important;
}

/* Active link */
.zfp-toc-link.is-active {
	font-weight: 500;
	color: rgb(45, 107, 207) !important;
	background-color: rgba(45, 107, 207, 0.08) !important;
}

/* Dark mode */
html.dark .zfp-toc-link {
	color: #a1a1aa !important; /* zinc-400 */
}

html.dark .zfp-toc-link:hover {
	color: rgb(99, 148, 232) !important;
}

html.dark .zfp-toc-link.is-active {
	color: rgb(99, 148, 232) !important;
	background-color: rgba(45, 107, 207, 0.12) !important;
}

/* Truncate inner span */
.zfp-toc-link span.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* ── Mobile/tablet: "dock" noi ben canh phai, khong che den man hinh ────── */

/* display:contents = wrapper "bien mat" khoi box model nhung van render
   binh thuong cac phan tu con (tab, .zfp-doc-toc) dung vi tri cua chung —
   dam bao desktop van hien thi sidebar sticky binh thuong nhu truoc. */
.zfp-toc-dock {
	display: contents;
}

/* Tab chi danh cho mobile/tablet — an mac dinh, media query ben duoi se
   hien lai. Neu khong co dong nay, tren desktop no se hien ra nhu 1 nut
   <button> binh thuong vi .zfp-toc-dock khong con che no bang display:none. */
.zfp-toc-tab {
	display: none;
}

@media (max-width: 1023px) {
	/* Chan cung: khong cho phep trang keo ngang duoc, du tinh toan
	   calc(100vw - Npx) co the bi lech vai px do 100vw tinh ca be rong
	   thanh cuon doc tren 1 so trinh duyet. */
	html {
		overflow-x: hidden;
	}

	/* position: fixed — neo thang vao viewport, khong phu thuoc chieu rong /
	   flex-wrap cua hang 3 cot cha nua (sticky de vo khi cot cha doi width). */
	.zfp-toc-dock {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 180px;
		right: 8px;
		z-index: 40;
		max-width: calc(100vw - 16px);
	}

	/* Tab doc, dan sat ben trai panel, luon hien de bam mo/dong.
	   Dung right:100% thay vi left:-30px (so cung, ang chung, la nguon
	   gay tran) — right:100% dam bao rim phai cua tab luon dung bang rim
	   trai cua dock, khong bao gio vuot qua rim phai cua dock (an toan
	   toan hoc du panel dong/mo rong bao nhieu). */
	.zfp-toc-tab {
		position: absolute;
		right: 100%;
		top: 50%;
		transform: translateY(-50%) rotate(180deg);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 112px;
		padding: 0;
		border: 1px solid rgb(2, 132, 199);
		/* Da xoay 180deg nen bo goc phai dao nguoc: bo o phai/duoi (truoc xoay)
		   se hien ra dung o trai/tren (ngoai, xa panel) sau khi xoay. */
		border-radius: 0 8px 8px 0;
		background: rgb(14, 165, 233);
		color: #fff;
		font-size: 10px;
		font-weight: 600;
		letter-spacing: .02em;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		cursor: pointer;
		box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
		transition: background-color .2s ease;
	}

	.zfp-toc-tab:hover {
		background: rgb(2, 132, 199);
	}

	/* Panel: gian rong tu 0 → 320px khi mo, khong dich chuyen vi tri,
	   khong co overlay, trang phia sau van tuong tac binh thuong.
	   Chieu cao tu theo noi dung, toi da theo khoang trong con lai cua
	   man hinh tinh tu vi tri top offset — dai hon thi cuon rieng ben trong. */
	.zfp-doc-toc {
		height: auto;
		max-height: calc(100vh - 220px);
		width: 0;
		overflow: hidden;
		background: rgba(255, 255, 255, .98);
		box-shadow: 0 20px 25px rgba(0, 0, 0, .15);
		border-left: 1px solid rgba(14, 165, 233, .2);
		border-radius: 12px 0 0 12px;
		transition: width .2s ease-out;
	}

	.zfp-doc-toc.is-open {
		width: min(320px, calc(100vw - 60px));
	}

	.zfp-doc-toc > div {
		height: auto;
		max-height: calc(100vh - 220px) !important;
		overflow-y: auto !important;
		padding: 16px !important;
	}
}