/* KSP Reader Touch — cuon bang co che cua trinh duyet + thanh cuon tu ve.
   Xem ksp-reader-touch.php de biet vi sao phai tat perfect-scrollbar. */

/* ---------- cuon that, co quan tinh tren iOS ---------- */
.book-container .book-content-inner {
	overflow-y: auto !important;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* Cho phep chon chu va de trinh duyet tu xu ly thao tac keo doc */
.book-container .book-content-inner,
.book-container .book-content-inner * {
	-webkit-user-select: text;
	user-select: text;
	-webkit-touch-callout: default;
}
.book-container .book-content-inner {
	touch-action: pan-y pinch-zoom;
}

/* ---------- xoa sach thanh cuon tuy bien cua theme ----------
   Con truot cua no dat min = max = 25px nen ra mot hinh tron, chinh la
   "thanh cuon xau" o ca nen trang lan nen den. */
.book-container [class*="ps__scrollbar"],
.book-container .ps__scrollbar-x-rail,
.book-container .ps__scrollbar-y-rail {
	display: none !important;
}

/* ---------- an thanh cuon mac dinh cua trinh duyet ----------
   An di vi ta tu ve mot thanh dep hon o duoi. Cuon van la cuon that. */
.book-container .book-content-inner {
	scrollbar-width: none;              /* Firefox */
	-ms-overflow-style: none;           /* Edge cu */
}
.book-container .book-content-inner::-webkit-scrollbar {
	width: 0;
	height: 0;
	background: transparent;
}

/* ===========================================================================
   THANH CUON RIENG — ve theo mau Trung chon 24/10 (anh Shutterstock, mau den
   ngoai cung ben phai): mot duong chi manh, nut TRON RONG o giua, hai dau co
   mui nhon. Khac mau goc o cho nut tron de rong ruot chu khong den dac.

   Duong chi duoc cat lam HAI DOAN, tren va duoi nut tron, de long nut thuc su
   rong — nhin xuyen thay trang giay chu khong thay net ke chay qua.

   Dung position: fixed va tu tinh toa do theo khung chuong dang doc, nen khong
   can sua layout cua theme.
   =========================================================================== */
.ksp-rail[hidden],
.ksp-rail-pct[hidden] {
	display: none !important;
}

/* Nam yen thi AN HAN — khong chiem cho, khong an thao tac cham.
   Cu cuon la hien ra, ngung mot lat thi mo di. */
.ksp-rail {
	position: fixed;
	width: 16px;
	z-index: 9000;
	touch-action: none;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateX(5px);
	/* Hien ra thi nhanh (.18s) cho kip tay nguoi doc, mo di thi cham (.5s)
	   cho em mat. Hai nhip khac nhau nen phai khai bao o ca hai trang thai. */
	transition: opacity .5s ease, transform .5s ease;
	will-change: opacity;
}
.ksp-rail.is-live,
.ksp-rail.is-drag {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0);
	transition: opacity .18s ease-out, transform .18s ease-out;
}
/* Vung cham rong 28px ma khong lam day them net ve */
.ksp-rail::before {
	content: '';
	position: absolute;
	top: -8px;
	bottom: -8px;
	left: -6px;
	right: -6px;
}

/* --- duong chi, hai doan --- */
.ksp-rail-line {
	position: absolute;
	left: 50%;
	width: 1px;
	margin-left: -0.5px;
	background: rgba(139, 90, 43, .5);
	transition: background .2s ease;
}
.ksp-rail.is-live .ksp-rail-line,
.ksp-rail:hover .ksp-rail-line {
	background: rgba(139, 90, 43, .7);
}

/* --- hai mui nhon o dau va cuoi --- */
.ksp-rail-cap {
	position: absolute;
	left: 50%;
	margin-left: -5px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}
.ksp-rail-cap--top {
	top: 0;
	border-bottom: 6px solid rgba(139, 90, 43, .55);
}
.ksp-rail-cap--bot {
	bottom: 0;
	border-top: 6px solid rgba(139, 90, 43, .55);
}
.ksp-rail.is-live .ksp-rail-cap--top,
.ksp-rail:hover .ksp-rail-cap--top { border-bottom-color: rgba(139, 90, 43, .75); }
.ksp-rail.is-live .ksp-rail-cap--bot,
.ksp-rail:hover .ksp-rail-cap--bot { border-top-color: rgba(139, 90, 43, .75); }

/* --- nut tron RONG RUOT --- */
.ksp-rail-thumb {
	position: absolute;
	left: 50%;
	margin-left: -8px;
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 2px solid rgba(139, 90, 43, .6);
	background: transparent;
	transition: border-color .2s ease, border-width .1s ease;
}
.ksp-rail.is-live .ksp-rail-thumb,
.ksp-rail:hover .ksp-rail-thumb {
	border-color: rgba(139, 90, 43, .85);
}
.ksp-rail.is-drag .ksp-rail-thumb {
	border-color: rgba(139, 90, 43, 1);
	border-width: 2.5px;
}

/* --- vien tron hien %: mo mo luc nam yen, dam len khi dang cuon --- */
.ksp-rail-pct {
	position: fixed;
	transform: translate(-100%, -50%);
	padding: 2px 9px;
	border-radius: 999px;
	font: 600 11px/1.6 Lora, Georgia, serif;
	letter-spacing: .3px;
	color: #8b5a2b;
	background: rgba(255, 255, 255, .86);
	border: 1px solid rgba(139, 90, 43, .18);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	z-index: 9001;
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
	white-space: nowrap;
}
.ksp-rail-pct.is-live {
	opacity: 1;
	transition: opacity .18s ease-out;
}

/* ---------- nen den ---------- */
:root[data-ksp-theme="dark"] body.body--disabled .ksp-rail-line {
	background: rgba(216, 176, 113, .5);
}
:root[data-ksp-theme="dark"] body.body--disabled .ksp-rail.is-live .ksp-rail-line,
:root[data-ksp-theme="dark"] body.body--disabled .ksp-rail:hover .ksp-rail-line {
	background: rgba(216, 176, 113, .72);
}
:root[data-ksp-theme="dark"] body.body--disabled .ksp-rail-cap--top {
	border-bottom-color: rgba(216, 176, 113, .55);
}
:root[data-ksp-theme="dark"] body.body--disabled .ksp-rail-cap--bot {
	border-top-color: rgba(216, 176, 113, .55);
}
:root[data-ksp-theme="dark"] body.body--disabled .ksp-rail.is-live .ksp-rail-cap--top,
:root[data-ksp-theme="dark"] body.body--disabled .ksp-rail:hover .ksp-rail-cap--top {
	border-bottom-color: rgba(216, 176, 113, .78);
}
:root[data-ksp-theme="dark"] body.body--disabled .ksp-rail.is-live .ksp-rail-cap--bot,
:root[data-ksp-theme="dark"] body.body--disabled .ksp-rail:hover .ksp-rail-cap--bot {
	border-top-color: rgba(216, 176, 113, .78);
}
:root[data-ksp-theme="dark"] body.body--disabled .ksp-rail-thumb {
	border-color: rgba(216, 176, 113, .65);
}
:root[data-ksp-theme="dark"] body.body--disabled .ksp-rail.is-live .ksp-rail-thumb,
:root[data-ksp-theme="dark"] body.body--disabled .ksp-rail:hover .ksp-rail-thumb {
	border-color: rgba(216, 176, 113, .88);
}
:root[data-ksp-theme="dark"] body.body--disabled .ksp-rail.is-drag .ksp-rail-thumb {
	border-color: #e8c489;
	border-width: 2.5px;
}
:root[data-ksp-theme="dark"] body.body--disabled .ksp-rail-pct {
	color: #d8b071;
	background: rgba(21, 18, 14, .86);
	border-color: rgba(216, 176, 113, .22);
}

/* Man hinh hep: nut to hon mot chut cho de cham va de nhin ro la hinh TRON,
   duong chi day 2px vi net 1px tren dien thoai gan nhu khong thay. */
@media (max-width: 600px) {
	.ksp-rail { width: 18px; }
	.ksp-rail-thumb {
		width: 18px;
		height: 18px;
		margin-left: -9px;
	}
	.ksp-rail-line {
		width: 2px;
		margin-left: -1px;
	}
	.ksp-rail-pct { font-size: 10px; padding: 1px 7px; }
}

/* Khi dang mo hop AI hoac o tim kinh thi an di cho khoi chen */
body.ksp-ai-sheet-open .ksp-rail,
body.ksp-ai-sheet-open .ksp-rail-pct {
	opacity: 0 !important;
	pointer-events: none;
}

/* ===========================================================================
   THANH TREN TU AN — Trung yeu cau 24/10: "khi scroll thi moi hien thi de lam
   full man hinh chu, tiet kiem dien tich".

   Gom: nut XEM MUC LUC, dau X dong sach, va thanh "Quyen X/Y ... %".
   Cung mot nhip voi thanh cuon: cuon la hien, ngung 1,4 giay thi mo di.
   Van giu hien khi dang mo muc luc, khi chuong ngan khong cuon duoc, va khi
   dang mo hop AI — neu khong se khong con duong nao bam dong sach.
   =========================================================================== */
body.body--disabled .menu-button,
body.body--disabled .bb-nav-close,
body.body--disabled .reading-progress-wrap {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-7px);
	/* Giong thanh cuon: hien nhanh, mo di cham. */
	transition: opacity .5s ease, transform .5s ease;
}
body.body--disabled.ksp-chrome-on .menu-button,
body.body--disabled.ksp-chrome-on .bb-nav-close,
body.body--disabled.ksp-chrome-on .reading-progress-wrap {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	transition: opacity .18s ease-out, transform .18s ease-out;
}

/* Nguoi dat may o che do giam chuyen dong thi bo phan truot, chi con mo dan */
@media (prefers-reduced-motion: reduce) {
	.ksp-rail,
	.ksp-rail.is-live,
	.ksp-rail.is-drag,
	body.body--disabled .menu-button,
	body.body--disabled .bb-nav-close,
	body.body--disabled .reading-progress-wrap,
	body.body--disabled.ksp-chrome-on .menu-button,
	body.body--disabled.ksp-chrome-on .bb-nav-close,
	body.body--disabled.ksp-chrome-on .reading-progress-wrap {
		transform: none !important;
	}
}

/* ===========================================================================
   BANG MUC LUC — cho danh sach chuong cuon duoc.

   Theme de `.menu-panel { overflow: visible }` va cao dung bang man hinh, nen
   sach nhieu chuong thi cac chuong cuoi bi cat han, khong cach nao toi duoc:
   do tren Kinh Giai Tham Mat (8 quyen) — scrollHeight 849 so voi clientHeight
   812, hien duoc 6 quyen, con 2 quyen nam ngoai man hinh. Day la gioi han co
   san cua theme, khong phai do bo thanh cuon tuy bien: bang muc luc chua bao
   gio duoc gan perfect-scrollbar (no khong co lop `is-perfect-scrollbar`).

   `ksp-dark.css` da dat `.menu-panel` thanh flex cot va `.menu-toc` co
   `flex: 1 1 auto; min-height: 0`, nen chi can them `overflow-y: auto` la
   rieng danh sach chuong cuon, con nut sang/toi va chu MUC LUC dung yen o dau.
   =========================================================================== */
body.body--disabled .menu-panel .menu-toc {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding-bottom: 18px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
body.body--disabled .menu-panel .menu-toc::-webkit-scrollbar {
	width: 0;
	height: 0;
	background: transparent;
}

/* Nut sang/toi: bo le tren de JS canh thang hang voi nut AN MUC LUC ben phai */
body.body--disabled .menu-panel .ksp-read-toggle {
	margin-top: 0 !important;
}