/* ===== Chế độ inline (chèn trong nội dung) ===== */
.plg-toc {
	border: 1px solid var(--plg-toc-panel-border, #e5e7eb);
	border-radius: 10px;
	padding: 16px 20px;
	margin: 1.5em 0;
	background: var(--plg-toc-list-bg, #f9fafb);
}
.plg-toc-title {
	font-weight: 700;
	margin: 0 0 10px;
	color: var(--plg-toc-header-color, #1f2937);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.plg-toc-inline-toggle {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--plg-toc-header-color, #1f2937);
	font-size: 1em;
	line-height: 1;
	padding: 2px 4px;
	transition: transform 0.2s ease;
}
.plg-toc.is-collapsed .plg-toc-inline-toggle {
	transform: rotate(-90deg);
}
.plg-toc.is-collapsed .plg-toc-list {
	display: none;
}

/* Canh lề trong bài viết */
.plg-toc-align-left {
	float: left !important;
	margin: 0 20px 16px 0 !important;
	max-width: 280px;
}
.plg-toc-align-right {
	float: right !important;
	margin: 0 0 16px 20px !important;
	max-width: 280px;
}
.plg-toc-align-center {
	margin: 1.5em auto !important;
	max-width: 420px;
}
.plg-toc-align-none {
	/* Mặc định, không cần thêm gì — giữ margin gốc của .plg-toc. */
}
.plg-toc-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.plg-toc-item {
	/* !important vì nhiều theme có CSS mặc định cho margin của <li> trong nội dung bài viết,
	   đè lên khoảng cách mình muốn kiểm soát qua Settings — đây chính là lý do chỉnh trong admin
	   không thấy đổi gì: giá trị mới VẪN được set đúng, chỉ là bị theme ghi đè mất. */
	margin: 0 !important;
	padding: 0 0 var(--plg-toc-item-spacing, 6px) 0 !important;
}
.plg-toc-item:last-child {
	padding-bottom: 0 !important;
}
.plg-toc-item a {
	color: var(--plg-toc-link, #374151);
	text-decoration: none;
}
.plg-toc-item a:hover {
	color: var(--plg-toc-link-hover, #2563eb);
	text-decoration: underline;
}
.plg-toc-level-3 {
	padding-left: 16px !important;
}
.plg-toc-level-4 {
	padding-left: 32px !important;
}

/* ===== Chế độ nổi cố định (floating, 6 vị trí góc màn hình) ===== */
.plg-toc-floating {
	position: fixed;
	z-index: 99998;
}

/* 6 vị trí */
.plg-toc-pos-top-right { top: 110px; right: 20px; }
.plg-toc-pos-middle-right { top: 50%; right: 20px; transform: translateY(-50%); }
.plg-toc-pos-bottom-right { bottom: 40px; right: 20px; }
.plg-toc-pos-top-left { top: 110px; left: 20px; }
.plg-toc-pos-middle-left { top: 50%; left: 20px; transform: translateY(-50%); }
.plg-toc-pos-bottom-left { bottom: 40px; left: 20px; }

.plg-toc-pos-middle-right.is-open,
.plg-toc-pos-middle-left.is-open {
	transform: translateY(-50%);
}

.plg-toc-toggle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--plg-toc-btn-border, #2563eb);
	background: var(--plg-toc-btn-bg, #2563eb);
	color: var(--plg-toc-btn-icon, #ffffff);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	/* Reset phòng trường hợp theme có CSS ẩn text của button icon (text-indent/overflow hack) —
	   đây chính xác là nguyên nhân phổ biến khiến icon "biến mất" khi theme can thiệp vào <button>. */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: visible !important;
	text-indent: 0 !important;
	white-space: normal !important;
	line-height: 1 !important;
	padding: 0;
}
.plg-toc-toggle:hover {
	filter: brightness(1.08);
}

/* Icon dạng text/emoji — ép cỡ chữ + font-family có fallback emoji, phòng theme override font-family chung. */
.plg-toc-toggle-icon-text {
	font-size: 20px !important;
	line-height: 1 !important;
	font-family: -apple-system, "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif !important;
}
.plg-toc-toggle-icon-svg {
	display: flex;
	align-items: center;
	justify-content: center;
}
.plg-toc-toggle-icon-svg svg {
	display: block;
	width: 20px;
	height: 20px;
}

.plg-toc-panel {
	position: absolute;
	top: 0;
	width: 260px;
	max-height: 60vh;
	overflow-y: auto;
	background: var(--plg-toc-list-bg, #ffffff);
	color: var(--plg-toc-link, #374151);
	border: 1px solid var(--plg-toc-panel-border, #e5e7eb);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	pointer-events: none;
}

.plg-toc-pos-top-right .plg-toc-panel,
.plg-toc-pos-middle-right .plg-toc-panel,
.plg-toc-pos-bottom-right .plg-toc-panel {
	right: 58px;
}
.plg-toc-pos-top-left .plg-toc-panel,
.plg-toc-pos-middle-left .plg-toc-panel,
.plg-toc-pos-bottom-left .plg-toc-panel {
	left: 58px;
}

.plg-toc-panel-title {
	font-weight: 700;
	margin: 0;
	padding: 14px 18px;
	color: var(--plg-toc-header-color, #1f2937);
	background: var(--plg-toc-header-bg, #ffffff);
	border-bottom: 1px solid var(--plg-toc-panel-border, #e5e7eb);
	border-radius: 10px 10px 0 0;
}
.plg-toc-panel .plg-toc-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 12px 18px !important;
}
.plg-toc-panel .plg-toc-item {
	margin: 0 !important;
	padding: 0 0 var(--plg-toc-item-spacing, 6px) 0 !important;
}
.plg-toc-panel .plg-toc-item:last-child {
	padding-bottom: 0 !important;
}
.plg-toc-panel .plg-toc-item a {
	color: var(--plg-toc-link, #374151);
	text-decoration: none;
	display: block;
	padding: 3px 2px;
	position: relative;
	transition: color 0.15s ease;
}
.plg-toc-panel .plg-toc-item a:hover {
	color: var(--plg-toc-link-hover, #2563eb);
}

/* Trạng thái đóng mặc định + hiệu ứng mở/đóng — điều khiển qua data-effect trên wrapper. */
.plg-toc-floating[data-effect="fade"] .plg-toc-panel {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}
.plg-toc-floating[data-effect="fade"].is-open .plg-toc-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.plg-toc-floating[data-effect="slide"] .plg-toc-panel {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.plg-toc-pos-top-right[data-effect="slide"] .plg-toc-panel,
.plg-toc-pos-middle-right[data-effect="slide"] .plg-toc-panel,
.plg-toc-pos-bottom-right[data-effect="slide"] .plg-toc-panel {
	transform: translateX(12px);
}
.plg-toc-pos-top-left[data-effect="slide"] .plg-toc-panel,
.plg-toc-pos-middle-left[data-effect="slide"] .plg-toc-panel,
.plg-toc-pos-bottom-left[data-effect="slide"] .plg-toc-panel {
	transform: translateX(-12px);
}
.plg-toc-floating[data-effect="slide"].is-open .plg-toc-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
}

.plg-toc-floating[data-effect="none"] .plg-toc-panel {
	display: none;
}
.plg-toc-floating[data-effect="none"].is-open .plg-toc-panel {
	display: block;
	pointer-events: auto;
}

/* ===== Hiệu ứng "Active Link" — áp dụng cho mục đang cuộn tới (scrollspy gắn class .is-current) ===== */

/* fade: đổi màu + đậm chữ mượt */
.plg-toc-floating[data-active-effect="fade"] .plg-toc-item.is-current > a {
	color: var(--plg-toc-link-active, #2563eb);
	font-weight: 600;
}

/* underline-left / right / center: gạch chân chạy ra từ 1 điểm */
.plg-toc-floating[data-active-effect^="underline"] .plg-toc-item > a {
	background-image: linear-gradient(var(--plg-toc-link-active, #2563eb), var(--plg-toc-link-active, #2563eb));
	background-repeat: no-repeat;
	background-size: 0% 2px;
	background-position: 0 100%;
	transition: background-size 0.25s ease, color 0.25s ease;
}
.plg-toc-floating[data-active-effect="underline-left"] .plg-toc-item.is-current > a {
	color: var(--plg-toc-link-active, #2563eb);
	background-size: 100% 2px;
	background-position: 0 100%;
}
.plg-toc-floating[data-active-effect="underline-right"] .plg-toc-item.is-current > a {
	color: var(--plg-toc-link-active, #2563eb);
	background-size: 100% 2px;
	background-position: 100% 100%;
}
.plg-toc-floating[data-active-effect="underline-center"] .plg-toc-item.is-current > a {
	color: var(--plg-toc-link-active, #2563eb);
	background-size: 100% 2px;
	background-position: 50% 100%;
}

/* underline-reveal: gạch chân luôn có sẵn mờ, mục active thì hiện rõ + đổi màu nền nhẹ */
.plg-toc-floating[data-active-effect="underline-reveal"] .plg-toc-item > a {
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.plg-toc-floating[data-active-effect="underline-reveal"] .plg-toc-item.is-current > a {
	color: var(--plg-toc-link-active, #2563eb);
	border-bottom-color: var(--plg-toc-link-active, #2563eb);
}

/* rounded-bg: nền bo tròn phía sau mục đang xem — style gần giống "Round Corners" bản gốc */
.plg-toc-floating[data-active-effect="rounded-bg"] .plg-toc-item > a {
	border-radius: 6px;
	transition: background 0.2s ease, color 0.2s ease;
}
.plg-toc-floating[data-active-effect="rounded-bg"] .plg-toc-item.is-current > a {
	color: var(--plg-toc-link-active, #2563eb);
	background: var(--plg-toc-link-active-bg, #eff6ff);
	padding-left: 10px;
	padding-right: 10px;
	margin: 0 -10px;
}

/* border-fade: viền trái xuất hiện mờ dần */
.plg-toc-floating[data-active-effect="border-fade"] .plg-toc-item > a {
	border-left: 3px solid transparent;
	padding-left: 10px;
	margin-left: -13px;
	transition: border-color 0.3s ease, color 0.3s ease;
}
.plg-toc-floating[data-active-effect="border-fade"] .plg-toc-item.is-current > a {
	color: var(--plg-toc-link-active, #2563eb);
	border-left-color: var(--plg-toc-link-active, #2563eb);
}

/* ===== Nhóm hiệu ứng "nền chạy" (Sweep / Bounce / Radial / Rectangle / Shutter) =====
   Dùng chung 1 pseudo-element ::before làm lớp nền phía sau chữ, mỗi hiệu ứng chỉ khác
   nhau ở trạng thái ban đầu (transform/clip-path) và easing của transition. */
.plg-toc-floating[data-active-effect^="sweep"] .plg-toc-item > a,
.plg-toc-floating[data-active-effect^="bounce"] .plg-toc-item > a,
.plg-toc-floating[data-active-effect^="radial"] .plg-toc-item > a,
.plg-toc-floating[data-active-effect^="rectangle"] .plg-toc-item > a,
.plg-toc-floating[data-active-effect^="shutter"] .plg-toc-item > a {
	position: relative;
	z-index: 1;
	display: block;
	padding: 3px 8px;
	margin: 0 -8px;
	border-radius: 4px;
	overflow: hidden;
	transition: color 0.3s ease;
}
.plg-toc-floating[data-active-effect^="sweep"] .plg-toc-item > a::before,
.plg-toc-floating[data-active-effect^="bounce"] .plg-toc-item > a::before,
.plg-toc-floating[data-active-effect^="radial"] .plg-toc-item > a::before,
.plg-toc-floating[data-active-effect^="rectangle"] .plg-toc-item > a::before,
.plg-toc-floating[data-active-effect^="shutter"] .plg-toc-item > a::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--plg-toc-link-active-bg, #eff6ff);
	border-radius: inherit;
}
.plg-toc-floating[data-active-effect^="sweep"] .plg-toc-item.is-current > a,
.plg-toc-floating[data-active-effect^="bounce"] .plg-toc-item.is-current > a,
.plg-toc-floating[data-active-effect^="radial"] .plg-toc-item.is-current > a,
.plg-toc-floating[data-active-effect^="rectangle"] .plg-toc-item.is-current > a,
.plg-toc-floating[data-active-effect^="shutter"] .plg-toc-item.is-current > a {
	color: var(--plg-toc-link-active, #2563eb);
}

/* Sweep To Right / Sweep To Left: nền quét từ 1 cạnh sang hết chiều ngang */
.plg-toc-floating[data-active-effect="sweep-right"] .plg-toc-item > a::before {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}
.plg-toc-floating[data-active-effect="sweep-right"] .plg-toc-item.is-current > a::before {
	transform: scaleX(1);
}
.plg-toc-floating[data-active-effect="sweep-left"] .plg-toc-item > a::before {
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
}
.plg-toc-floating[data-active-effect="sweep-left"] .plg-toc-item.is-current > a::before {
	transform: scaleX(1);
}

/* Bounce To Right / Bounce To Left: giống Sweep nhưng easing có độ "nảy" (overshoot) */
.plg-toc-floating[data-active-effect="bounce-right"] .plg-toc-item > a::before {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.plg-toc-floating[data-active-effect="bounce-right"] .plg-toc-item.is-current > a::before {
	transform: scaleX(1);
}
.plg-toc-floating[data-active-effect="bounce-left"] .plg-toc-item > a::before {
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.plg-toc-floating[data-active-effect="bounce-left"] .plg-toc-item.is-current > a::before {
	transform: scaleX(1);
}

/* Radial In / Radial Out: nền loang hình tròn — "In" loang từ tâm ra, "Out" loang từ góc ra */
.plg-toc-floating[data-active-effect="radial-in"] .plg-toc-item > a::before {
	clip-path: circle(0% at 50% 50%);
	transition: clip-path 0.35s ease;
}
.plg-toc-floating[data-active-effect="radial-in"] .plg-toc-item.is-current > a::before {
	clip-path: circle(75% at 50% 50%);
}
.plg-toc-floating[data-active-effect="radial-out"] .plg-toc-item > a::before {
	clip-path: circle(0% at 0% 50%);
	transition: clip-path 0.35s ease;
}
.plg-toc-floating[data-active-effect="radial-out"] .plg-toc-item.is-current > a::before {
	clip-path: circle(100% at 0% 50%);
}

/* Rectangle In / Rectangle Out: khung chữ nhật loang ra từ tâm hoặc từ 1 cạnh */
.plg-toc-floating[data-active-effect="rectangle-in"] .plg-toc-item > a::before {
	clip-path: inset(50% 50% 50% 50%);
	transition: clip-path 0.3s ease;
}
.plg-toc-floating[data-active-effect="rectangle-in"] .plg-toc-item.is-current > a::before {
	clip-path: inset(0 0 0 0);
}
.plg-toc-floating[data-active-effect="rectangle-out"] .plg-toc-item > a::before {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.3s ease;
}
.plg-toc-floating[data-active-effect="rectangle-out"] .plg-toc-item.is-current > a::before {
	clip-path: inset(0 0 0 0);
}

/* Shutter In Horizontal / Shutter Out Horizontal: 2 cánh cửa chớp đóng/mở theo chiều ngang */
.plg-toc-floating[data-active-effect="shutter-in"] .plg-toc-item > a::before {
	clip-path: inset(0 50% 0 50%);
	transition: clip-path 0.3s ease;
}
.plg-toc-floating[data-active-effect="shutter-in"] .plg-toc-item.is-current > a::before {
	clip-path: inset(0 0 0 0);
}
.plg-toc-floating[data-active-effect="shutter-out"] .plg-toc-item > a::before {
	clip-path: inset(0 45% 0 45%);
	opacity: 0;
	transition: clip-path 0.3s ease, opacity 0.3s ease;
}
.plg-toc-floating[data-active-effect="shutter-out"] .plg-toc-item.is-current > a::before {
	clip-path: inset(0 0 0 0);
	opacity: 1;
}

/* Rightline Reveal / Leftline Reveal: 1 vạch nhỏ trượt vào từ cạnh phải/trái (khác Border Fade
   ở chỗ đây là vạch NGẮN có transition trượt, không phải viền mờ dần tại chỗ). */
.plg-toc-floating[data-active-effect="rightline-reveal"] .plg-toc-item > a {
	position: relative;
	padding-right: 14px;
	transition: color 0.25s ease;
}
.plg-toc-floating[data-active-effect="rightline-reveal"] .plg-toc-item > a::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 3px;
	height: 0%;
	background: var(--plg-toc-link-active, #2563eb);
	transform: translateY(-50%);
	transition: height 0.25s ease;
}
.plg-toc-floating[data-active-effect="rightline-reveal"] .plg-toc-item.is-current > a {
	color: var(--plg-toc-link-active, #2563eb);
}
.plg-toc-floating[data-active-effect="rightline-reveal"] .plg-toc-item.is-current > a::after {
	height: 70%;
}
.plg-toc-floating[data-active-effect="leftline-reveal"] .plg-toc-item > a {
	position: relative;
	padding-left: 14px;
	transition: color 0.25s ease;
}
.plg-toc-floating[data-active-effect="leftline-reveal"] .plg-toc-item > a::after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 0%;
	background: var(--plg-toc-link-active, #2563eb);
	transform: translateY(-50%);
	transition: height 0.25s ease;
}
.plg-toc-floating[data-active-effect="leftline-reveal"] .plg-toc-item.is-current > a {
	color: var(--plg-toc-link-active, #2563eb);
}
.plg-toc-floating[data-active-effect="leftline-reveal"] .plg-toc-item.is-current > a::after {
	height: 70%;
}

/* ===== Target Hint — loé sáng heading trong bài viết khi bấm 1 mục trong mục lục ===== */
.plg-toc-target-hint {
	animation: plg-toc-hint-flash 1.6s ease;
}
@keyframes plg-toc-hint-flash {
	0%   { background-color: var(--plg-toc-target-hint, #fde68a); }
	100% { background-color: transparent; }
}

/* Mobile: panel không nên rộng hơn màn hình. */
@media (max-width: 480px) {
	.plg-toc-panel {
		width: 78vw;
	}
}