/**
 * Truyện Hay – CSS bổ sung cho trang đọc.
 *
 * @package TruyenHay
 */

/* Thanh tiến độ đọc */
.th-progress {
	position: fixed; top: 0; left: 0; z-index: 90;
	height: 3px; width: 0;
	background: linear-gradient(90deg, var(--th-pink-light), var(--th-purple));
	transition: width .1s linear;
}

/* Nội dung chương */
.th-chapter__content > p:first-of-type::first-letter {
	font-size: 2.6em;
	line-height: .9;
	font-weight: 800;
	float: left;
	margin: .06em .12em 0 0;
	color: var(--th-pink);
}

body.th-read-dark .th-chapter__content > p:first-of-type::first-letter { color: var(--th-pink-light); }

/* Điều hướng chương dính ở đáy khi đọc trên điện thoại */
@media (max-width: 600px) {
	.th-chapter__nav {
		position: sticky; bottom: 0; z-index: 40;
		margin: 18px -14px 0; padding: 10px 14px;
		background: rgba(255, 255, 255, .96);
		backdrop-filter: blur(10px);
		border-top: 1px solid var(--th-line);
	}
	body.th-dark .th-chapter__nav { background: rgba(31, 30, 38, .96); }
	.th-chapter__navprev, .th-chapter__navnext { min-width: 0; flex: 1 1 40%; }
	.th-chapter__nav .th-btn--soft { display: none; }
}

/* Bảng chọn chương nhanh */
.th-chapter-quick {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	max-width: 900px; margin: 18px auto 0;
	font-size: 13px; color: var(--th-muted);
}
.th-chapter-quick input {
	width: 78px; padding: 8px 10px; text-align: center;
	border: 1.5px solid var(--th-line); border-radius: 999px; background: #fff;
}
.th-chapter-quick button {
	border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer;
	background: var(--th-pink-soft); color: var(--th-pink-dark); font-weight: 600;
}
body.th-dark .th-chapter-quick input { background: #23222b; color: var(--th-ink); }

/* Sổ tay chú thích ở cạnh nội dung trên màn hình lớn */
@media (min-width: 1500px) {
	.th-chapter__paper { max-width: 940px; }
}

/* Trạng thái đang tải */
.th-loading { position: relative; pointer-events: none; }
.th-loading::after {
	content: ''; position: absolute; inset: 0;
	background: rgba(255, 255, 255, .55) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='14' fill='none' stroke='%23ff5f9e' stroke-width='3' stroke-dasharray='60' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='0.9s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center / 40px no-repeat;
	border-radius: inherit;
}
body.th-dark .th-loading::after { background-color: rgba(31, 30, 38, .6); }