/* Single post — danh mục Tóm tắt truyện (theo thiết kế Figma, khung 920px) */

.tt-page-wrap {
	--tt-serif: 'Lora', Georgia, serif;
	--tt-script: 'Alex Brush', cursive;
	--tt-cjk: 'WenQuanYi Zen Hei', 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
	--tt-ink: #0f172a;
	--tt-text: #374151;
	--tt-muted: #6b7280;
	--tt-rose: #fb7185;
}

.tt-page-wrap .tt-page {
	max-width: 920px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #e5e7eb;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
	font-family: var(--tt-serif);
	color: var(--tt-text);
}

.tt-page p,
.tt-page h1,
.tt-page h2,
.tt-page h3,
.tt-page ul,
.tt-page dl,
.tt-page dd,
.tt-page figure,
.tt-page blockquote {
	margin: 0;
	padding: 0;
	font-family: var(--tt-serif);
}

/* ---------- Hero ---------- */

.tt-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 300px;
	padding: 76px 48px 48px;
	overflow: hidden;
	background-color: #fff;
	/* Lớp gradient của thiết kế phủ lên ảnh đại diện (--tt-hero-bg đặt inline trong template) */
	background-image:
		linear-gradient(135deg, rgba(8, 14, 26, .94) 0%, rgba(20, 28, 48, .82) 42%, rgba(139, 28, 28, .55) 75%, rgba(60, 10, 10, .85) 100%),
		radial-gradient(1038.6px 339.4px at 80% 20%, rgba(220, 38, 38, .35) 0%, rgba(220, 38, 38, 0) 60%),
		var(--tt-hero-bg, none);
	background-size: auto, auto, cover;
	background-position: 0 0, 0 0, center;
	background-repeat: no-repeat;
}

/* Có ảnh đại diện: lớp phủ nhạt hơn để ảnh hiện rõ */
.tt-hero--has-bg {
	background-image:
		linear-gradient(135deg, rgba(8, 14, 26, .78) 0%, rgba(20, 28, 48, .6) 42%, rgba(139, 28, 28, .35) 75%, rgba(60, 10, 10, .65) 100%),
		radial-gradient(1038.6px 339.4px at 80% 20%, rgba(220, 38, 38, .25) 0%, rgba(220, 38, 38, 0) 60%),
		var(--tt-hero-bg);
}

.tt-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 512px;
}

.tt-hero__title-row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.tt-page .tt-hero__name {
	font-family: var(--tt-script);
	font-weight: 400;
	font-size: 60px;
	line-height: 60px;
	color: #fff;
	text-shadow: 0 2px 1px rgba(0, 0, 0, .06), 0 4px 1.5px rgba(0, 0, 0, .07);
}

.tt-hero__name-1,
.tt-hero__name-2 {
	display: block;
}

.tt-hero__name-1 { letter-spacing: 1.5px; }
.tt-hero__name-2 { padding-left: 32px; letter-spacing: 3px; }

/* Con dấu đỏ: chữ Hán xoay 90°, đọc từ phải sang trái */
.tt-stamp {
	flex-shrink: 0;
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	padding: 10px 6px 10px 8px;
	background: rgba(185, 28, 28, .85);
	border: 2px solid #f87171;
	border-radius: 4px;
	box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .05);
}

.tt-stamp span {
	display: block;
	width: 10px;
	font-family: var(--tt-cjk);
	font-weight: 500;
	font-size: 10px;
	line-height: 10px;
	color: #fef3c7;
	transform: rotate(90deg);
}

.tt-hero__quote {
	display: flex;
	gap: 12px;
	padding-left: 4px;
}

.tt-hero__quote-bar {
	flex-shrink: 0;
	width: 2px;
	margin-top: 2px;
	background: #ef4444;
	border-radius: 9999px;
}

.tt-page .tt-hero__quote p {
	font-style: italic;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: .35px;
	color: #e5e7eb;
}

/* ---------- Body ---------- */

.tt-body {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 32px;
	padding: 36px;
}

.tt-main {
	grid-column: 1 / span 8;
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.tt-aside {
	grid-column: 9 / span 4;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-self: start;
}

.tt-title-block {
	padding-bottom: 12px;
	border-bottom: 1px solid #f3f4f6;
}

.tt-page .tt-title {
	font-weight: 700;
	font-size: 26px;
	line-height: 35.75px;
	letter-spacing: -.65px;
	color: var(--tt-ink);
}

.tt-subtitle {
	display: block;
	margin-top: 4px;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0;
	color: #334155;
}

/* ---------- Nội dung bài ---------- */

.tt-content {
	counter-reset: tt-section;
	font-size: 13px;
	line-height: 21.13px;
	color: var(--tt-text);
}

.tt-content::after {
	content: '';
	display: table;
	clear: both;
}

.tt-page .tt-content p {
	margin-bottom: 12px;
	font-size: inherit;
	line-height: inherit;
}

.tt-page .tt-content h2 {
	clear: both;
	margin: 32px 0 12px;
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;
	color: var(--tt-ink);
}

.tt-page .tt-content h2::before {
	counter-increment: tt-section;
	content: counter(tt-section) '. ';
}

.tt-page .tt-content h3 {
	margin: 20px 0 8px;
	font-weight: 700;
	font-size: 15px;
	line-height: 24px;
	color: var(--tt-ink);
}

/* Nội dung soạn trong Classic Editor hay bọc <span style="font-weight:400"> */
.tt-page .tt-content h2 span,
.tt-page .tt-content h3 span {
	font-weight: inherit !important;
}

.tt-page .tt-content > :first-child {
	margin-top: 0;
}

.tt-page .tt-content ul,
.tt-page .tt-content ol {
	margin: 0 0 12px 20px;
}

.tt-page .tt-content li {
	margin-bottom: 4px;
}

.tt-content a {
	color: #9f1239;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Ảnh có chú thích (class do tht_layout_figures() gắn):
   có chữ bên cạnh → xen kẽ trái/phải như thiết kế 2 cột; không có chữ → full width */
.tt-page .tt-content .wp-caption {
	width: 100% !important;
	max-width: none;
	margin: 4px 0 16px;
}

.tt-page .tt-content .wp-caption.tt-fig--left,
.tt-page .tt-content .wp-caption.tt-fig--right {
	width: calc(50% - 8px) !important;
	margin-bottom: 12px;
}

.tt-page .tt-content .tt-fig--left {
	float: left;
	margin-right: 16px;
}

.tt-page .tt-content .tt-fig--right {
	float: right;
	margin-left: 16px;
}

.tt-page .tt-content .tt-fig--full {
	clear: both;
}

/* Ảnh full width giữ tỉ lệ gốc, không crop 3:2 như ảnh nhỏ */
.tt-page .tt-content .tt-fig--full img {
	aspect-ratio: auto;
	object-fit: fill;
}

.tt-page .tt-content .wp-caption img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin: 0;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	background: #fffbeb;
}

.tt-page .tt-content .wp-caption .wp-caption-text {
	padding: 6px 0 0;
	background: none;
	font-style: italic;
	font-size: 11px;
	line-height: 16.5px;
	text-align: left;
	color: var(--tt-muted);
}

/* ---------- Khung trích dẫn ---------- */

.tt-quote,
.tt-page .tt-content blockquote {
	clear: both;
	display: flex;
	gap: 12px;
	margin: 24px 0;
	padding: 16px;
	background: #fff6f5;
	border: 1px solid rgba(254, 205, 211, .8);
	border-radius: 6px;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .05));
}

.tt-quote__mark,
.tt-page .tt-content blockquote::before {
	flex-shrink: 0;
	font-weight: 700;
	font-size: 30px;
	line-height: 30px;
	color: var(--tt-rose);
}

.tt-page .tt-content blockquote::before {
	content: '“';
}

.tt-quote__body {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.tt-page .tt-quote blockquote,
.tt-page .tt-content blockquote {
	font-style: italic;
	font-size: 12.5px;
	line-height: 20.31px;
	color: #4c0519;
}

.tt-page .tt-quote blockquote {
	display: block;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	filter: none;
}

.tt-page .tt-quote blockquote::before {
	content: none;
}

.tt-page .tt-content blockquote p:last-child {
	margin-bottom: 0;
}

.tt-quote figcaption,
.tt-page .tt-content blockquote cite {
	display: block;
	font-style: normal;
	font-weight: 500;
	font-size: 11px;
	line-height: 16.5px;
	text-align: right;
	color: #9f1239;
}

/* ---------- Sidebar ---------- */

.tt-card {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid;
	border-radius: 8px;
}

.tt-card--info {
	gap: 16px;
	background: #f0f5fa;
	border-color: #cbe0f2;
}

.tt-card--highlights {
	gap: 14px;
	background: #fefaf0;
	border-color: #f9e2af;
}

.tt-card__header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(191, 219, 254, .6);
}

.tt-card--highlights .tt-card__header {
	border-bottom-color: #fde68a;
}

.tt-card__header img {
	display: block;
	flex-shrink: 0;
	margin: 0;
}

.tt-card__star {
	font-size: 16px;
	line-height: 24px;
	color: #f59e0b;
}

.tt-page .tt-card__title {
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: .35px;
	text-transform: uppercase;
	color: #1e293b;
}

.tt-info {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tt-info__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 12px;
	line-height: 18px;
}

.tt-info__icon {
	flex-shrink: 0;
	padding-top: 2px;
	color: #475569;
}

.tt-page .tt-info dt,
.tt-page .tt-info dd {
	display: inline;
	margin: 0;
	font-size: 12px;
	line-height: 18px;
	text-transform: none;
	letter-spacing: 0;
}

.tt-page .tt-info dt {
	font-weight: 700;
	color: var(--tt-ink);
}

.tt-page .tt-info dd {
	color: #334155;
}

.tt-page .tt-highlights {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
}

.tt-page .tt-highlights li {
	display: flex;
	gap: 8px;
	margin: 0;
	font-size: 12px;
	line-height: 16.5px;
	color: #334155;
}

.tt-highlights li::before {
	content: '✔';
	flex-shrink: 0;
	padding-top: 2px;
	color: #d97706;
}

.tt-page-links {
	font-size: 13px;
}

/* ---------- Mobile (breakpoint Flatsome) ---------- */

@media (max-width: 849px) {
	.tt-page {
		border-left: 0;
		border-right: 0;
	}

	.tt-hero {
		min-height: 240px;
		padding: 56px 20px 32px;
	}

	.tt-page .tt-hero__name {
		font-size: 44px;
		line-height: 48px;
	}

	.tt-hero__name-2 {
		padding-left: 24px;
	}

	.tt-body {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 24px 16px;
	}

	.tt-main,
	.tt-aside {
		grid-column: 1;
	}

	/* Mobile: thẻ "Thông tin truyện" (sidebar) lên đầu, trước nội dung bài */
	.tt-aside {
		order: -1;
	}

	.tt-page .tt-content .wp-caption.tt-fig--left,
	.tt-page .tt-content .wp-caption.tt-fig--right {
		float: none;
		width: 100% !important;
		margin: 4px 0 16px;
	}
}