/**
 * THX Library - E-Reader UX Stylesheet (Kindle & Apple Books UX)
 * Cung cấp phân trang động theo kích thước màn hình, theme công thái học (Light, Sepia, Dark),
 * thanh trạng thái số trang, ngăn kéo mục lục và bộ điều khiển lật trang cảm ứng.
 */

:root {
	--thx-reader-bg: #fdfdfd;
	--thx-reader-text: #1f2937;
	--thx-reader-heading: #111827;
	--thx-reader-surface: rgba(255, 255, 255, 0.94);
	--thx-reader-surface-solid: #ffffff;
	--thx-reader-border: rgba(0, 0, 0, 0.08);
	--thx-reader-accent: #059669;
	--thx-reader-accent-hover: #047857;
	--thx-reader-quote-bg: #f8fafc;
	--thx-reader-quote-border: #059669;
	--thx-reader-font-size: 18px;
	--thx-reader-line-height: 1.8;
	--thx-reader-font-family: "Merriweather", "Georgia", "Cambria", serif;
	--thx-reader-gap: 50px;
	--thx-reader-top-bar-height: 56px;
	--thx-reader-bottom-bar-height: 52px;
	--thx-reader-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* =========================================================================
   1. THEME DEFINITIONS (Light, Sepia, Dark)
   ========================================================================= */
body.thx-reader-active {
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	height: 100vh !important;
	width: 100vw !important;
}

.thx-reader-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--thx-reader-bg);
	color: var(--thx-reader-text);
	font-family: var(--thx-reader-font-family);
	font-size: var(--thx-reader-font-size);
	line-height: var(--thx-reader-line-height);
	z-index: 99999;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	user-select: text;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Theme Sepia (Kindle Paperwhite Warm Tone) */
.thx-reader-container[data-theme="sepia"] {
	--thx-reader-bg: #fbf0d9;
	--thx-reader-text: #433422;
	--thx-reader-heading: #2c1d0b;
	--thx-reader-surface: rgba(251, 240, 217, 0.95);
	--thx-reader-surface-solid: #f5e7c8;
	--thx-reader-border: rgba(67, 52, 34, 0.12);
	--thx-reader-accent: #854d0e;
	--thx-reader-accent-hover: #713f12;
	--thx-reader-quote-bg: #f5e7c8;
	--thx-reader-quote-border: #a16207;
	--thx-reader-shadow: 0 4px 20px rgba(67, 52, 34, 0.1);
}

/* Theme Dark (Night Reading) */
.thx-reader-container[data-theme="dark"] {
	--thx-reader-bg: #121212;
	--thx-reader-text: #d1d5db;
	--thx-reader-heading: #f3f4f6;
	--thx-reader-surface: rgba(24, 24, 27, 0.95);
	--thx-reader-surface-solid: #1f1f23;
	--thx-reader-border: rgba(255, 255, 255, 0.1);
	--thx-reader-accent: #10b981;
	--thx-reader-accent-hover: #34d399;
	--thx-reader-quote-bg: #1c1c21;
	--thx-reader-quote-border: #10b981;
	--thx-reader-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Font Family Types */
.thx-reader-container[data-font="sans"] {
	--thx-reader-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.thx-reader-container[data-font="serif"] {
	--thx-reader-font-family: "Merriweather", "Georgia", "Cambria", "Times New Roman", serif;
}

/* =========================================================================
   2. FLOATING BARS (Header & Footer)
   ========================================================================= */
.thx-reader-top-bar,
.thx-reader-bottom-bar {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--thx-reader-surface);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-color: var(--thx-reader-border);
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}

.thx-reader-top-bar {
	top: 0;
	height: var(--thx-reader-top-bar-height);
	border-bottom: 1px solid var(--thx-reader-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.25rem;
}

.thx-reader-bottom-bar {
	bottom: 0;
	height: var(--thx-reader-bottom-bar-height);
	border-top: 1px solid var(--thx-reader-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.25rem;
}

/* Trạng thái ẩn thanh công cụ khi đọc tập trung (Zen Mode) */
.thx-reader-container.ui-hidden .thx-reader-top-bar {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
}
.thx-reader-container.ui-hidden .thx-reader-bottom-bar {
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
}

/* Top Bar Left: Back & Book Title */
.thx-reader-header-left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}
.thx-reader-btn-back {
	background: none;
	border: 1px solid var(--thx-reader-border);
	color: var(--thx-reader-text);
	padding: 0.35rem 0.75rem;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: all 0.15s ease;
	text-decoration: none;
}
.thx-reader-btn-back:hover {
	background: var(--thx-reader-border);
}
.thx-reader-book-heading {
	font-size: 0.938rem;
	font-weight: 600;
	color: var(--thx-reader-heading);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 320px;
}

/* Top Bar Center: Current Chapter */
.thx-reader-current-chapter-title {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--thx-reader-text);
	opacity: 0.85;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 400px;
	text-align: center;
}

/* Top Bar Right: Action buttons */
.thx-reader-header-right {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.thx-reader-icon-btn {
	background: none;
	border: 1px solid var(--thx-reader-border);
	color: var(--thx-reader-text);
	width: 36px;
	height: 36px;
	border-radius: 6px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	transition: all 0.15s ease;
}
.thx-reader-icon-btn:hover,
.thx-reader-icon-btn.active {
	background: var(--thx-reader-border);
	color: var(--thx-reader-accent);
}

.thx-reader-edition-switcher-btn {
	background: var(--thx-reader-surface-solid);
	border: 1px solid var(--thx-reader-border);
	color: var(--thx-reader-text);
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	transition: all 0.15s ease;
}
.thx-reader-edition-switcher-btn:hover {
	border-color: var(--thx-reader-accent);
	color: var(--thx-reader-accent);
	background: var(--thx-reader-border);
}
@media (max-width: 640px) {
	.thx-reader-edition-switcher-btn {
		padding: 4px 8px;
		font-size: 0.75rem;
	}
}

/* Bottom Bar Elements */
.thx-reader-btn-nav {
	background: none;
	border: 1px solid var(--thx-reader-border);
	color: var(--thx-reader-text);
	padding: 0.35rem 0.85rem;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: all 0.15s ease;
}
.thx-reader-btn-nav:hover:not(:disabled) {
	background: var(--thx-reader-border);
	color: var(--thx-reader-accent);
}
.thx-reader-btn-nav:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.thx-reader-status-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 0.813rem;
	gap: 2px;
}
.thx-reader-page-indicator {
	font-weight: 600;
	color: var(--thx-reader-heading);
	letter-spacing: 0.02em;
}
.thx-reader-time-left {
	font-size: 0.75rem;
	opacity: 0.75;
}

/* Minimalist Progress Bar at the bottom edge */
.thx-reader-progress-track {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--thx-reader-border);
	z-index: 101;
}
.thx-reader-progress-fill {
	height: 100%;
	width: 0%;
	background: var(--thx-reader-accent);
	transition: width 0.25s ease;
}

/* =========================================================================
   3. VIEWPORT & RESPONSIVE MULTI-COLUMN PAGINATION ENGINE
   ========================================================================= */
.thx-reader-main-area {
	position: relative;
	flex: 1;
	width: 100%;
	height: 100%;
	padding-top: var(--thx-reader-top-bar-height);
	padding-bottom: var(--thx-reader-bottom-bar-height);
	box-sizing: border-box;
	overflow: hidden;
}

/* Viewport khung đọc sách */
.thx-reader-viewport {
	width: 100%;
	height: 100%;
	max-width: 900px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 2.25rem 2rem;
	overflow: hidden;
	position: relative;
}

/* Khối nội dung động phân trang ngang kiểu Apple Books / Kindle */
.thx-reader-flow {
	height: 100%;
	column-width: var(--thx-reader-col-width, 836px);
	column-gap: var(--thx-reader-gap);
	column-fill: auto;
	transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1);
	will-change: transform;
	box-sizing: border-box;
}

/* Chế độ cuộn liên tục (Continuous Scroll Mode) */
.thx-reader-container[data-mode="scroll"] .thx-reader-main-area {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.thx-reader-container[data-mode="scroll"] .thx-reader-viewport {
	overflow: visible;
	height: auto;
}
.thx-reader-container[data-mode="scroll"] .thx-reader-flow {
	column-width: auto;
	column-gap: normal;
	column-fill: balance;
	transform: none !important;
	height: auto;
}

/* Quy tắc Typography & Ngăn ngắt dòng xấu xí */
.thx-reader-flow h1,
.thx-reader-flow h2,
.thx-reader-flow h3,
.thx-reader-flow h4 {
	color: var(--thx-reader-heading);
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
	font-weight: 700;
	line-height: 1.35;
	break-after: avoid;
	page-break-after: avoid;
}
.thx-reader-flow h1 { font-size: 1.75em; }
.thx-reader-flow h2 { font-size: 1.45em; border-bottom: 1px solid var(--thx-reader-border); padding-bottom: 0.3rem; }
.thx-reader-flow h3 { font-size: 1.2em; }
.thx-reader-flow h4 { font-size: 1.05em; }

.thx-reader-flow p {
	margin: 0 0 1.25em 0;
	text-align: justify;
	text-justify: inter-word;
	break-inside: avoid;
	page-break-inside: avoid;
	hyphens: auto;
}

.thx-reader-flow blockquote {
	margin: 1.5em 0;
	padding: 0.75rem 1.25rem;
	background: var(--thx-reader-quote-bg);
	border-left: 4px solid var(--thx-reader-quote-border);
	font-style: italic;
	border-radius: 0 8px 8px 0;
	break-inside: avoid;
	page-break-inside: avoid;
}

.thx-reader-flow ul,
.thx-reader-flow ol {
	margin: 0 0 1.25em 1.5rem;
	padding: 0;
	break-inside: avoid;
	page-break-inside: avoid;
}

.thx-reader-flow li {
	margin-bottom: 0.5em;
}

.thx-reader-flow img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 1rem auto;
	display: block;
	break-inside: avoid;
	page-break-inside: avoid;
}

.thx-reader-flow strong {
	font-weight: 700;
	color: var(--thx-reader-heading);
}

.thx-reader-block {
	margin-bottom: 1.5rem;
	break-inside: avoid;
	page-break-inside: avoid;
}

/* =========================================================================
   4. INTERACTIVE TAP ZONES (Kindle Tap to Turn & Toggle UI)
   ========================================================================= */
.thx-reader-tap-left,
.thx-reader-tap-right,
.thx-reader-tap-center {
	position: absolute;
	top: var(--thx-reader-top-bar-height);
	bottom: var(--thx-reader-bottom-bar-height);
	z-index: 50;
	cursor: pointer;
}

.thx-reader-tap-left {
	left: 0;
	width: 20%;
}
.thx-reader-tap-right {
	right: 0;
	width: 20%;
}
.thx-reader-tap-center {
	left: 20%;
	right: 20%;
	width: 60%;
}

/* Vô hiệu hóa và ẩn hoàn toàn Tap Zones khi ở chế độ cuộn dọc (Continuous Scroll) */
.thx-reader-container[data-mode="scroll"] .thx-reader-tap-left,
.thx-reader-container[data-mode="scroll"] .thx-reader-tap-center,
.thx-reader-container[data-mode="scroll"] .thx-reader-tap-right {
	display: none !important;
	pointer-events: none !important;
}

/* Subtle Hover indicator for Left / Right turn zones */
.thx-reader-tap-left::before,
.thx-reader-tap-right::before {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2rem;
	color: var(--thx-reader-text);
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}
.thx-reader-tap-left::before {
	content: "‹";
	left: 1.5rem;
}
.thx-reader-tap-right::before {
	content: "›";
	right: 1.5rem;
}
@media (hover: hover) {
	.thx-reader-tap-left:hover::before,
	.thx-reader-tap-right:hover::before {
		opacity: 0.35;
	}
}

/* =========================================================================
   5. SLIDE-OUT CHAPTER DRAWER (TOC)
   ========================================================================= */
.thx-reader-drawer-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(4px);
	z-index: 200;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.thx-reader-drawer-overlay.active {
	opacity: 1;
	visibility: visible;
}

.thx-reader-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 380px;
	max-width: 85vw;
	background: var(--thx-reader-surface-solid);
	color: var(--thx-reader-text);
	box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
	z-index: 201;
	transform: translateX(-100%);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--thx-reader-border);
}
.thx-reader-drawer.active {
	transform: translateX(0);
}

.thx-reader-drawer-header {
	padding: 1.25rem;
	border-bottom: 1px solid var(--thx-reader-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.thx-reader-drawer-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--thx-reader-heading);
}
.thx-reader-drawer-close {
	background: none;
	border: none;
	font-size: 1.5rem;
	color: var(--thx-reader-text);
	cursor: pointer;
	padding: 0 0.5rem;
	line-height: 1;
}

.thx-reader-drawer-list {
	flex: 1;
	overflow-y: auto;
	padding: 0.75rem 0;
	margin: 0;
	list-style: none;
}
.thx-reader-drawer-item {
	padding: 0.85rem 1.25rem;
	border-bottom: 1px solid var(--thx-reader-border);
	cursor: pointer;
	transition: background 0.15s ease;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.thx-reader-drawer-item:hover {
	background: var(--thx-reader-quote-bg);
}
.thx-reader-drawer-item.active {
	background: var(--thx-reader-quote-bg);
	border-left: 4px solid var(--thx-reader-accent);
}
.thx-reader-drawer-item-title {
	font-weight: 600;
	font-size: 0.938rem;
	color: var(--thx-reader-heading);
}
.thx-reader-drawer-item-meta {
	font-size: 0.781rem;
	opacity: 0.7;
	display: flex;
	gap: 0.75rem;
}

/* =========================================================================
   6. APPEARANCE SETTINGS POPOVER
   ========================================================================= */
.thx-reader-settings-popover {
	position: absolute;
	top: calc(var(--thx-reader-top-bar-height) + 8px);
	right: 1.25rem;
	width: 320px;
	background: var(--thx-reader-surface-solid);
	border: 1px solid var(--thx-reader-border);
	border-radius: 12px;
	box-shadow: var(--thx-reader-shadow);
	padding: 1.25rem;
	z-index: 150;
	display: none;
	flex-direction: column;
	gap: 1.25rem;
	color: var(--thx-reader-text);
}
.thx-reader-settings-popover.active {
	display: flex;
}

.thx-reader-setting-group label {
	display: block;
	font-size: 0.813rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.5rem;
	opacity: 0.75;
}

/* Font Size Control */
.thx-reader-font-size-ctrl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--thx-reader-quote-bg);
	border-radius: 8px;
	padding: 4px;
}
.thx-reader-font-btn {
	background: none;
	border: none;
	font-weight: 700;
	padding: 0.4rem 1rem;
	cursor: pointer;
	color: var(--thx-reader-text);
	border-radius: 6px;
	font-size: 1rem;
}
.thx-reader-font-btn:hover {
	background: var(--thx-reader-surface-solid);
}
.thx-reader-font-val {
	font-size: 0.875rem;
	font-weight: 600;
}

/* Theme Switcher Pills */
.thx-reader-theme-pills,
.thx-reader-font-pills,
.thx-reader-mode-pills {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}
.thx-reader-font-pills,
.thx-reader-mode-pills {
	grid-template-columns: 1fr 1fr;
}

.thx-pill-btn {
	background: var(--thx-reader-quote-bg);
	border: 1px solid var(--thx-reader-border);
	color: var(--thx-reader-text);
	padding: 0.5rem 0.25rem;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.813rem;
	font-weight: 600;
	text-align: center;
	transition: all 0.15s ease;
}
.thx-pill-btn:hover,
.thx-pill-btn.active {
	border-color: var(--thx-reader-accent);
	background: var(--thx-reader-accent);
	color: #ffffff;
}

/* Specific theme pills appearance */
.thx-pill-theme-light { background: #fdfdfd; color: #111; }
.thx-pill-theme-sepia { background: #fbf0d9; color: #433422; }
.thx-pill-theme-dark  { background: #121212; color: #eee; }

/* =========================================================================
   7. RESPONSIVE OPTIMIZATIONS (Mobile & Tablet)
   ========================================================================= */
@media (max-width: 768px) {
	:root {
		--thx-reader-gap: 30px;
		--thx-reader-top-bar-height: 50px;
		--thx-reader-bottom-bar-height: 48px;
	}
	.thx-reader-viewport {
		padding: 1.5rem 1.25rem;
	}
	.thx-reader-book-heading {
		max-width: 140px;
		font-size: 0.875rem;
	}
	.thx-reader-current-chapter-title {
		display: none;
	}
	.thx-reader-flow p {
		text-align: left;
	}
	.thx-reader-settings-popover {
		right: 0.5rem;
		width: calc(100vw - 1rem);
	}
}

/* =========================================================================
   8. THX DOCUMENT & ANNOTATIONS SUPPORT (data-note & col_defs)
   ========================================================================= */
.thx-reader-col-content.thx-reader-col-hidden {
	display: none !important;
}

.thx-reader-flow .thx-annotation,
.thx-annotation {
	border-bottom: 1.5px dashed var(--thx-reader-accent, #059669);
	cursor: help;
	color: inherit;
	text-decoration: none;
	background: rgba(5, 150, 105, 0.08);
	padding: 0 3px;
	border-radius: 3px;
	transition: background 0.2s ease;
}
.thx-reader-flow .thx-annotation:hover,
.thx-annotation:hover {
	background: rgba(5, 150, 105, 0.22);
}

.thx-reader-note-tooltip {
	position: fixed;
	z-index: 999999;
	max-width: 320px;
	background: #1e293b;
	color: #f8fafc;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.5;
	pointer-events: none;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: opacity 0.15s ease;
	word-break: break-word;
}
.thx-reader-note-tooltip.active {
	opacity: 1;
}

.thx-reader-note-modal-backdrop {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	backdrop-filter: blur(2px);
}
.thx-reader-note-modal-card {
	background: var(--thx-reader-bg, #ffffff);
	color: var(--thx-reader-text, #1e293b);
	max-width: 480px;
	width: 100%;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25);
	border: 1px solid var(--thx-reader-border, #e2e8f0);
}
.thx-reader-note-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--thx-reader-border, #e2e8f0);
	font-weight: 700;
	font-size: 15px;
}
.thx-reader-note-modal-close {
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--thx-reader-muted, #64748b);
}
.thx-reader-note-modal-close:hover {
	color: var(--thx-reader-heading, #0f172a);
}
.thx-reader-note-modal-body {
	font-size: 14px;
	line-height: 1.6;
	color: var(--thx-reader-text, #334155);
}

/* =========================================================================
   FOOTNOTE MODES & STYLING (TASK 221)
   ========================================================================= */

/* 1. Footnote Markers in Text */
.thx-footnote-inline,
.thx-footnote-ref {
	display: inline-block;
	font-size: 0.82em;
	line-height: 1;
	vertical-align: super;
	font-weight: 600;
	color: #059669;
	cursor: pointer;
	margin: 0 1px;
	padding: 0 2px;
	border-radius: 3px;
	transition: background-color 0.2s ease, color 0.2s ease;
	text-decoration: none;
}
.thx-footnote-inline:hover,
.thx-footnote-ref:hover,
.thx-footnote-ref a:hover {
	background-color: rgba(5, 150, 105, 0.18);
	color: #047857;
}
.thx-footnote-ref a {
	color: inherit;
	text-decoration: none;
}

/* 2. Chapter Notes Section (Cuối chương) */
.thx-chapter-notes {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px dashed var(--thx-reader-border, #cbd5e1);
	break-inside: avoid;
	page-break-inside: avoid;
}
.thx-chapter-notes-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 1rem;
	color: var(--thx-reader-heading, #0f172a);
}
.thx-chapter-notes-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.thx-chapter-note-item {
	padding: 8px 12px;
	margin-bottom: 8px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.02);
	border-left: 3px solid #059669;
	font-size: 0.9em;
	line-height: 1.55;
	transition: background 0.3s ease;
}
.thx-chapter-note-num {
	font-weight: 700;
	color: #059669;
	margin-right: 4px;
}
.thx-note-backref {
	display: inline-block;
	margin-left: 6px;
	color: #059669;
	text-decoration: none;
	font-weight: bold;
	padding: 0 4px;
	border-radius: 3px;
	transition: transform 0.2s ease;
}
.thx-note-backref:hover {
	transform: scale(1.2);
}

/* 3. Page Footnotes Section (Chân trang) */
.thx-page-footnotes {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--thx-reader-border, #e2e8f0);
	font-size: 0.85em;
	color: var(--thx-reader-muted, #64748b);
	break-inside: avoid;
	page-break-inside: avoid;
}
.thx-page-footnotes-header {
	font-weight: 600;
	font-size: 0.85em;
	margin-bottom: 6px;
	color: var(--thx-reader-heading, #0f172a);
}
.thx-page-notes-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.thx-page-note-item {
	padding: 4px 0;
	line-height: 1.45;
}
.thx-page-note-num {
	font-weight: 700;
	color: #059669;
	margin-right: 4px;
}

/* 4. Highlight animation khi nhảy anchor */
.thx-note-highlight {
	animation: thxNotePulse 1.8s ease;
}
@keyframes thxNotePulse {
	0% { background-color: rgba(5, 150, 105, 0.35); }
	100% { background-color: transparent; }
}

/* 5. Footnote Pills in Reader Aa Settings Popover */
.thx-reader-fn-pills {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.thx-pill-fn {
	font-size: 11.5px;
	padding: 5px 8px;
}

/* 6. Dynamic Footnote Mode Display Synchronization */
#thx-reader-container[data-footnote-mode="inline_tooltip"] .thx-chapter-notes,
#thx-reader-container[data-footnote-mode="inline_tooltip"] .thx-page-footnotes {
	display: none !important;
}
#thx-reader-container[data-footnote-mode="chapter_note"] .thx-chapter-notes {
	display: block !important;
}
#thx-reader-container[data-footnote-mode="chapter_note"] .thx-page-footnotes {
	display: none !important;
}
#thx-reader-container[data-footnote-mode="page_footnote"] .thx-chapter-notes {
	display: none !important;
}
#thx-reader-container[data-footnote-mode="page_footnote"] .thx-page-footnotes {
	display: block !important;
}

/* ==========================================================================
   TASK 245: SCANNED BOOK PAGES (PHOTO PAGES) STYLES IN E-READER
   ========================================================================== */
.thx-scanned-page-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 70vh;
	padding: 15px 10px;
	box-sizing: border-box;
}

.thx-scanned-page-img {
	max-width: 100%;
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
	background: #ffffff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#thx-reader-container[data-theme="sepia"] .thx-scanned-page-img {
	filter: sepia(0.18) contrast(1.02);
	box-shadow: 0 4px 20px rgba(112, 66, 20, 0.16);
}

#thx-reader-container[data-theme="dark"] .thx-scanned-page-img {
	box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6);
	background: #1e293b;
	border: 1px solid #334155;
}