/*
Theme Name: Truyện Đọc
Theme URI: https://truyendoc.xyz
Description: Child theme của Astra cho truyendoc.xyz — phòng đọc truyện, ưu tiên chữ và sự yên tĩnh.
Author: Truyện Đọc
Template: astra
Version: 1.0.0
Text Domain: truyendoc
*/

/* ============================================================
   1. Biến màu & chữ
   ============================================================ */
:root {
	--td-paper:      #F7F3EA;
	--td-paper-2:    #FFFDF8;
	--td-ink:        #23201C;
	--td-ink-soft:   #5F5850;
	--td-ink-faint:  #8A8177;
	--td-accent:     #97372C;
	--td-accent-2:   #2F4858;
	--td-rule:       #E2D9C8;
	--td-shadow:     0 1px 3px rgba(35,32,28,.06);

	--td-serif: 'Noto Serif', 'Times New Roman', Georgia, serif;
	--td-sans:  'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--td-read-size: 19px;
	--td-read-lh:   1.78;
	--td-measure:   34em;
}

/* Nền giấy ngà cũ */
html[data-td-theme="sepia"] {
	--td-paper:    #F2E4CC;
	--td-paper-2:  #F8EEDC;
	--td-ink:      #2C2418;
	--td-ink-soft: #5F5341;
	--td-ink-faint:#8B7C64;
	--td-rule:     #DFCCAA;
}

/* Nền tối */
html[data-td-theme="dark"] {
	--td-paper:    #15130F;
	--td-paper-2:  #1D1A15;
	--td-ink:      #E7E0D2;
	--td-ink-soft: #B3AA9A;
	--td-ink-faint:#8A8071;
	--td-accent:   #E0897C;
	--td-accent-2: #8FB3C6;
	--td-rule:     #322D25;
	--td-shadow:   none;
}

html[data-td-size="1"] { --td-read-size: 17px; }
html[data-td-size="2"] { --td-read-size: 19px; }
html[data-td-size="3"] { --td-read-size: 21px; }
html[data-td-size="4"] { --td-read-size: 23px; }
html[data-td-size="5"] { --td-read-size: 26px; }

html[data-td-lh="1"] { --td-read-lh: 1.6; }
html[data-td-lh="2"] { --td-read-lh: 1.78; }
html[data-td-lh="3"] { --td-read-lh: 2.0; }

/* ============================================================
   2. Nền & chữ chung
   ============================================================ */
body,
.ast-separate-container,
.ast-plain-container {
	background-color: var(--td-paper);
	color: var(--td-ink);
	font-family: var(--td-sans);
	font-size: 16px;
	line-height: 1.7;
}

.entry-title, .site-title,
.entry-content :where(h1,h2,h3,h4,h5,h6),
.widget-title, .ast-archive-title {
	font-family: var(--td-serif);
	font-weight: 700;
	line-height: 1.28;   /* chữ Việt cỡ lớn cần >= 1.2, nếu không mất dấu */
	letter-spacing: -.005em;
	color: var(--td-ink);
}

a { color: var(--td-accent); text-decoration: none; }
a:hover, a:focus { color: var(--td-ink); }

::selection { background: rgba(151,55,44,.16); }

/* .ast-container là flex — ép về block để #primary chiếm trọn bề ngang */
.site-content > .ast-container {
	display: block;
	max-width: 1120px;
}

/* ============================================================
   3. Đầu trang
   ============================================================ */
.site-header,
.ast-primary-header-bar,
.ast-header-break-point .site-header {
	background: var(--td-paper);
	box-shadow: none;
	border-bottom: 1px solid var(--td-rule);
}
.ast-primary-header-bar { border-bottom: none; }
.site-branding img.custom-logo { max-height: 44px; width: auto; }
.ast-site-title-wrap { display: none; }

.main-navigation .menu-item > a {
	font-family: var(--td-sans);
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--td-ink-soft);
}
.main-navigation .menu-item > a:hover,
.main-navigation .current-menu-item > a { color: var(--td-accent); }

/* ============================================================
   4. Trang chủ
   ============================================================ */
.td-hero {
	text-align: center;
	padding: 46px 16px 40px;
	border-bottom: 1px solid var(--td-rule);
	margin-bottom: 44px;
}
.td-hero__title {
	font-family: var(--td-serif);
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.24;
	margin: 0 0 14px;
	font-weight: 700;
}
.td-hero__sub {
	max-width: 40em;
	margin: 0 auto;
	color: var(--td-ink-soft);
	font-size: 16.5px;
	line-height: 1.75;
}
.td-hero__marks {
	margin-top: 22px;
	display: flex; flex-wrap: wrap; gap: 10px 26px;
	justify-content: center;
	font-size: 13.5px; color: var(--td-ink-faint);
}
.td-hero__marks span::before { content: "·"; margin-right: 8px; color: var(--td-accent); }

.td-sec { margin-bottom: 52px; }
.td-sec__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	border-bottom: 2px solid var(--td-ink);
	padding-bottom: 9px; margin-bottom: 22px;
}
.td-sec__title {
	font-family: var(--td-serif); font-size: 21px; font-weight: 700;
	line-height: 1.3; margin: 0;
}
.td-sec__title a { color: var(--td-ink); }
.td-sec__more { font-size: 14px; color: var(--td-accent); white-space: nowrap; }
.td-sec__note { font-size: 13.5px; color: var(--td-ink-faint); margin: -12px 0 20px; }

.td-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 920px) { .td-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .td-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ============================================================
   5. Thẻ truyện (dùng chung trang chủ + thư viện)
   ============================================================ */
.td-card { display: flex; flex-direction: column; }
.td-card__cover {
	display: block; aspect-ratio: 3 / 2; overflow: hidden;
	background: var(--td-paper-2);
	border: 1px solid var(--td-rule);
	border-radius: 3px; margin-bottom: 13px;
}
.td-card__cover img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .35s ease;
}
.td-card:hover .td-card__cover img { transform: scale(1.04); }
.td-card__cat {
	font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--td-accent); font-weight: 600; margin-bottom: 7px;
}
.td-card__title {
	font-family: var(--td-serif); font-size: 20px; line-height: 1.35;
	font-weight: 700; margin: 0 0 8px;
}
.td-card__title a { color: var(--td-ink); }
.td-card:hover .td-card__title a { color: var(--td-accent); }
.td-card__excerpt {
	font-size: 14.8px; line-height: 1.68; color: var(--td-ink-soft);
	margin: 0 0 10px;
}
.td-card__meta {
	font-size: 12.5px; color: var(--td-ink-faint);
	display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
	margin-top: auto;
}
.td-card__meta .td-dot { color: var(--td-rule); }

.td-chip {
	display: inline-block; font-size: 11.5px; line-height: 1;
	padding: 5px 9px; border: 1px solid var(--td-rule); border-radius: 999px;
	color: var(--td-ink-soft); background: var(--td-paper-2);
}

/* ============================================================
   6. Trang truyện
   ============================================================ */
.single-post .site-content > .ast-container { max-width: 780px; }

.single-post .entry-title {
	font-size: clamp(27px, 4.4vw, 40px);
	line-height: 1.26;
	margin-bottom: 14px;
}

.td-single-meta {
	font-size: 13.5px; color: var(--td-ink-faint);
	display: flex; flex-wrap: wrap; gap: 6px 14px;
	padding-bottom: 18px; margin-bottom: 26px;
	border-bottom: 1px solid var(--td-rule);
}

/* thân truyện */
.single-post .entry-content {
	font-family: var(--td-serif);
	font-size: var(--td-read-size);
	line-height: var(--td-read-lh);
	color: var(--td-ink);
	max-width: var(--td-measure);
	margin-left: auto; margin-right: auto;
}
.single-post .entry-content p { margin-bottom: 1.15em; }
.single-post .entry-content p + p { text-indent: 0; }
.single-post .entry-content h2,
.single-post .entry-content h3 { margin-top: 1.7em; margin-bottom: .55em; }

.td-box {
	max-width: var(--td-measure);
	margin: 0 auto 30px;
	font-family: var(--td-sans);
	font-size: 15px; line-height: 1.72;
	background: var(--td-paper-2);
	border: 1px solid var(--td-rule);
	border-left: 3px solid var(--td-accent);
	border-radius: 3px;
	padding: 18px 20px;
	color: var(--td-ink-soft);
}
.td-box__label {
	font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
	font-weight: 600; color: var(--td-accent); margin: 0 0 9px;
}
.td-box p { margin: 0 0 .7em; }
.td-box p:last-child { margin-bottom: 0; }

.td-box--after { margin-top: 44px; border-left-color: var(--td-accent-2); }
.td-box--after .td-box__label { color: var(--td-accent-2); }

.td-notes { max-width: var(--td-measure); margin: 40px auto 0; font-family: var(--td-sans); }
.td-notes__label {
	font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
	font-weight: 600; color: var(--td-ink-faint);
	border-top: 1px solid var(--td-rule); padding-top: 16px; margin-bottom: 12px;
}
.td-notes dl { margin: 0; font-size: 14.5px; line-height: 1.7; }
.td-notes dt { font-weight: 600; color: var(--td-ink); }
.td-notes dd { margin: 0 0 11px; color: var(--td-ink-soft); }

.td-rights {
	max-width: var(--td-measure); margin: 40px auto 0;
	font-family: var(--td-sans); font-size: 13px; line-height: 1.7;
	color: var(--td-ink-faint);
	border-top: 1px solid var(--td-rule); padding-top: 16px;
}
.td-rights b { color: var(--td-ink-soft); font-weight: 600; }
.td-rights__row { margin-bottom: 4px; }

/* ============================================================
   7. Thanh công cụ đọc
   ============================================================ */
.td-progress {
	position: fixed; top: 0; left: 0; height: 2px; width: 0;
	background: var(--td-accent); z-index: 9999;
	transition: width .1s linear;
}

.td-toolbar {
	position: fixed; right: 18px; bottom: 18px; z-index: 998;
	display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
}
/* Astra đặt padding lớn cho mọi <button>; không ép về 0 thì nút méo thành bầu dục
   và biểu tượng bên trong bị bóp mất. flex:none để nút không co theo thanh công cụ. */
.td-toolbar .td-tool-btn {
	width: 42px; height: 42px; min-width: 42px; min-height: 42px;
	padding: 0; flex: none; box-sizing: border-box; border-radius: 50%;
	border: 1px solid var(--td-rule); background: var(--td-paper-2);
	color: var(--td-ink-soft); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--td-shadow); font-size: 16px; line-height: 1;
	transition: color .18s, border-color .18s;
}
.td-toolbar .td-tool-btn:hover { color: var(--td-accent); border-color: var(--td-accent); }
.td-toolbar .td-tool-btn[aria-pressed="true"] { color: var(--td-accent); border-color: var(--td-accent); }
.td-toolbar .td-tool-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.td-panel {
	background: var(--td-paper-2);
	border: 1px solid var(--td-rule); border-radius: 6px;
	box-shadow: 0 6px 22px rgba(35,32,28,.13);
	padding: 15px 16px; width: 232px;
	font-family: var(--td-sans); font-size: 13px;
}
.td-panel[hidden] { display: none; }
.td-panel__row { margin-bottom: 14px; }
.td-panel__row:last-child { margin-bottom: 0; }
.td-panel__label {
	font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--td-ink-faint); margin-bottom: 7px; font-weight: 600;
}
.td-seg { display: flex; gap: 6px; }
.td-panel .td-seg button {
	flex: 1; padding: 7px 0; min-width: 0; cursor: pointer;
	border: 1px solid var(--td-rule); background: var(--td-paper);
	color: var(--td-ink-soft); border-radius: 4px;
	font-family: var(--td-sans); font-size: 13px; line-height: 1.2;
}
.td-panel .td-seg button[aria-pressed="true"] {
	border-color: var(--td-accent); color: var(--td-accent);
	background: var(--td-paper-2); font-weight: 600;
}
.td-seg--theme button { font-size: 12px; }

.td-resume {
	max-width: var(--td-measure); margin: 0 auto 24px;
	font-family: var(--td-sans); font-size: 14px;
	background: var(--td-paper-2); border: 1px dashed var(--td-rule);
	border-radius: 4px; padding: 12px 15px;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.td-resume[hidden] { display: none; }
.td-resume button {
	background: none; border: none; cursor: pointer; padding: 0;
	color: var(--td-accent); font-family: var(--td-sans); font-size: 14px; font-weight: 600;
}
.td-resume__dismiss { color: var(--td-ink-faint) !important; font-weight: 400 !important; }

/* ============================================================
   8. Trang thư viện (lọc)
   ============================================================ */
.td-filters {
	border: 1px solid var(--td-rule); background: var(--td-paper-2);
	border-radius: 4px; padding: 18px 20px; margin-bottom: 32px;
}
.td-filters__row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 13px; }
.td-filters__row:last-of-type { margin-bottom: 0; }
.td-filters__label {
	font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--td-ink-faint); font-weight: 600; min-width: 92px;
}
.td-filters button {
	font-family: var(--td-sans); font-size: 13.5px; cursor: pointer;
	padding: 6px 13px !important; border-radius: 999px;
	border: 1px solid var(--td-rule); background: var(--td-paper);
	color: var(--td-ink-soft);
}
.td-filters button[aria-pressed="true"] {
	border-color: var(--td-accent); background: var(--td-accent); color: #FFF8F0; font-weight: 500;
}
.td-count { font-size: 13.5px; color: var(--td-ink-faint); margin-bottom: 20px; }
.td-card[hidden] { display: none; }
.td-empty { color: var(--td-ink-faint); font-size: 15px; padding: 30px 0; }
.td-empty[hidden] { display: none; }

/* ============================================================
   9. Đánh dấu để đọc sau
   ============================================================ */
.td-saved-empty { color: var(--td-ink-faint); font-size: 15px; }
.td-saved-list { list-style: none; margin: 0; padding: 0; }
.td-saved-list li {
	border-bottom: 1px solid var(--td-rule); padding: 13px 0;
	display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
}
.td-saved-list a { font-family: var(--td-serif); font-size: 17px; color: var(--td-ink); }
.td-saved-list a:hover { color: var(--td-accent); }
.td-saved-list button {
	background: none; border: none; cursor: pointer; padding: 0;
	color: var(--td-ink-faint); font-size: 13px; font-family: var(--td-sans);
}
.td-saved-list button:hover { color: var(--td-accent); }

/* ============================================================
   10. Biểu mẫu gửi bài
   ============================================================ */
.td-form { max-width: 40em; }
.td-form__field { margin-bottom: 18px; }
.td-form label {
	display: block; font-size: 13.5px; font-weight: 600;
	color: var(--td-ink); margin-bottom: 6px;
}
.td-form small { display: block; font-size: 12.5px; color: var(--td-ink-faint); margin-top: 5px; line-height: 1.6; }
.td-form input[type=text], .td-form input[type=email], .td-form textarea, .td-form select {
	width: 100%; padding: 10px 12px;
	border: 1px solid var(--td-rule); border-radius: 4px;
	background: var(--td-paper-2); color: var(--td-ink);
	font-family: var(--td-sans); font-size: 15px; line-height: 1.6;
}
.td-form textarea { min-height: 190px; resize: vertical; }
/* Astra đặt viền xanh mặc định cho ô nhập lúc focus; selector dưới đây đủ mạnh để thắng */
.td-form input[type=text]:focus,
.td-form input[type=email]:focus,
.td-form textarea:focus,
.td-form select:focus {
	outline: none; border-color: var(--td-accent); box-shadow: 0 0 0 2px rgba(151,55,44,.12);
}
.td-form__hp { position: absolute; left: -9999px; }
.td-form button[type=submit] {
	background: var(--td-accent); color: #FFF8F0; border: none;
	padding: 12px 26px; border-radius: 4px; cursor: pointer;
	font-family: var(--td-sans); font-size: 15px; font-weight: 600;
}
.td-form button[type=submit]:hover { background: var(--td-ink); }
.td-form__check { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; }
.td-form__check input { margin-top: 3px; }
.td-form__check label { font-weight: 400; font-size: 14px; line-height: 1.6; }

.td-notice {
	border-radius: 4px; padding: 14px 17px; margin-bottom: 24px;
	font-size: 14.5px; line-height: 1.7;
	border: 1px solid var(--td-rule); background: var(--td-paper-2);
}
.td-notice--ok { border-left: 3px solid #2E7D4F; }
.td-notice--err { border-left: 3px solid var(--td-accent); }

/* ============================================================
   11. Trang lưu trữ (Astra)
   ============================================================ */
.ast-separate-container .ast-archive-description,
.ast-archive-description {
	background: transparent; padding: 34px 0 22px; margin-bottom: 8px;
	border-bottom: 1px solid var(--td-rule); text-align: left;
}
.ast-archive-description .ast-archive-title {
	font-family: var(--td-serif); font-size: clamp(26px, 4vw, 36px);
	line-height: 1.26; margin-bottom: 8px;
}
.ast-archive-description p { color: var(--td-ink-soft); font-size: 15.5px; max-width: 46em; margin: 0; }

.ast-separate-container .ast-article-post,
.ast-article-post {
	background: transparent; border-bottom: 1px solid var(--td-rule);
	padding: 26px 0; box-shadow: none;
}
.ast-article-post .post-content { padding: 0 !important; }
.ast-article-post .entry-content:empty { display: none; }
.ast-article-post .entry-title { font-size: 22px; line-height: 1.34; margin-bottom: 8px; }
.ast-article-post .entry-title a { color: var(--td-ink); }
.ast-article-post:hover .entry-title a { color: var(--td-accent); }
.ast-taxonomy-container.cat-links a { color: var(--td-accent); font-size: 12.5px; }
.ast-article-post .ast-excerpt-container p { color: var(--td-ink-soft); font-size: 15px; }
.ast-article-post .entry-meta, .ast-article-post .entry-meta * {
	font-size: 12.5px; color: var(--td-ink-faint); font-family: var(--td-sans);
}

/* ============================================================
   12. Chân trang
   ============================================================ */
.site-footer, .ast-small-footer {
	background: var(--td-paper); border-top: 1px solid var(--td-rule);
	color: var(--td-ink-faint);
}
.site-footer a { color: var(--td-ink-soft); }
.site-footer a:hover { color: var(--td-accent); }
.td-foot { font-size: 13.5px; line-height: 1.8; text-align: center; padding: 30px 16px; }
.td-foot__nav { margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center; }
.td-foot__note { color: var(--td-ink-faint); max-width: 44em; margin: 8px auto 0; font-size: 12.8px; }

/* ============================================================
   13. Khổ nhỏ
   ============================================================ */
@media (max-width: 768px) {
	.td-hero { padding: 32px 12px 30px; margin-bottom: 34px; }
	.td-sec { margin-bottom: 40px; }
	.td-toolbar { right: 12px; bottom: 12px; }
	.td-panel { width: min(232px, calc(100vw - 32px)); }
	.td-filters__label { min-width: 100%; }
	.single-post .entry-content { font-size: calc(var(--td-read-size) - 1px); }
}

@media print {
	.td-toolbar, .td-progress, .td-resume, .site-header, .site-footer { display: none !important; }
}

/* ============================================================
   14. Sửa gạch chân do Astra áp cho liên kết trong nội dung trang
   ------------------------------------------------------------
   Thẻ truyện của thư viện nằm trong .entry-content (vì dựng bằng shortcode),
   nên bị Astra gạch chân; thẻ trên trang chủ thì không. Ép về không gạch chân
   để hai chỗ nhìn giống nhau.
   ============================================================ */
.entry-content .td-card__title a,
.entry-content .td-card__cover,
.entry-content .td-card__cat,
.td-card__title a,
.td-saved-list a { text-decoration: none; }
.entry-content .td-card__title a:hover { text-decoration: none; color: var(--td-accent); }