/*
 * Giấy v2 — màn đọc một mục.
 *
 * Lưới ba cột 1fr · 680px · 1fr: cột đọc nằm đúng giữa màn hình, mục lục
 * đứng ở lề trái sát mép cột đọc, lề phải để trống cho cân. Dưới 1200px chỉ
 * còn cột đọc, mục lục rút vào một sheet gọi bằng nút nổi.
 *
 * Không còn cột công cụ đọc — mục lục là thứ duy nhất ở lề.
 */

.giay-reading {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr);
	align-items: start;
	padding: var(--wp--preset--spacing--60) 0;
}

.giay-reading__left {
	grid-column: 1;
	justify-self: end;
	width: 100%;
	max-width: 248px;
	padding-right: var(--wp--preset--spacing--60);
	position: sticky;
	top: calc(var(--wp--custom--header-h) + var(--wp--preset--spacing--40));
	font-size: var(--wp--preset--font-size--meta);
}

.giay-reading__center { grid-column: 2; min-width: 0; }

@media (max-width: 1200px) {
	.giay-reading { grid-template-columns: minmax(0, 720px); justify-content: center; }
	.giay-reading__center { grid-column: 1; }
	.giay-reading__left { display: none; }
}

/* ---------- Thanh tiến độ ------------------------------------------------ */
.giay-progress {
	position: fixed;
	inset: 0 0 auto;
	height: 3px;
	background: transparent;
	/* Trên đầu trang dính, nếu không thì đầu trang che mất vạch tiến độ. */
	z-index: 30;
	pointer-events: none;
}

.giay-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--wp--preset--color--accent);
	transition: width 0.1s linear;
}

/* ---------- Mục lục -------------------------------------------------------
 * Một cột chữ nhỏ tựa vào đường sống dọc. Đường ấy vừa là kẻ phân cách, vừa
 * là vạch tiến độ: phần đã đọc được tô màu nhấn, nên người đọc biết mình
 * đang ở đâu trong bài mà không cần thêm một thanh nào khác trên màn hình.
 */
.giay-toc {
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: calc(100vh - var(--wp--custom--header-h) - var(--wp--preset--spacing--80));
}

.giay-toc__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 10px;
	margin-bottom: var(--wp--preset--spacing--30);
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
	flex: none;
}

.giay-toc__label,
.giay-path__head .giay-path__name {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.giay-toc__meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.giay-toc__at { color: var(--wp--preset--color--accent); font-weight: 700; }
.giay-toc__of { color: var(--wp--preset--color--muted); }

/* Khung cuộn mờ dần ở hai đầu, để danh sách dài trông như còn chạy tiếp
   chứ không như bị cắt ngang. */
.giay-toc__scroll {
	position: relative;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Trình duyệt tự neo cuộn trong khung này: khi font thật thay font dự
	   phòng, 62 dòng đổi chiều cao cùng lúc và nó kéo khung xuống giữa danh
	   sách ngay lúc trang vừa mở. Mục lục phải luôn bắt đầu từ mục một. */
	overflow-anchor: none;
	scrollbar-width: none;
	padding-left: var(--wp--preset--spacing--30);
	mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 18px), transparent);
}

.giay-toc__scroll::-webkit-scrollbar { width: 0; }

/* Sống dọc: đường nền mảnh, và một vệt màu cao dần theo tiến độ đọc. */
.giay-toc__spine {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--giay-rule);
	background: var(--wp--preset--color--rule);
}

.giay-toc__spine i {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleY(0);
	transform-origin: top;
	background: var(--wp--preset--color--accent);
	transition: transform 0.12s linear;
}

.giay-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.giay-toc__item { margin: 0; position: relative; }

.giay-toc__link {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 8px;
	align-items: baseline;
	padding: 7px 0 7px 12px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	line-height: 1.38;
	transition: color var(--giay-dur);
}

.giay-toc__link:hover { color: var(--wp--preset--color--text); text-decoration: none; }

.giay-toc__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--wp--preset--color--muted) 62%, transparent);
}

.giay-toc__text {
	font-size: var(--wp--preset--font-size--meta);
	overflow-wrap: anywhere;
}

/* Mục cấp ba thụt vào và nhỏ hơn — nhánh con, không phải mục ngang hàng. */
.giay-toc__item[data-level='3'] .giay-toc__link { grid-template-columns: 22px minmax(0, 1fr); padding-left: 26px; }
.giay-toc__item[data-level='3'] .giay-toc__text { font-size: var(--wp--preset--font-size--micro); }

/* Mục đã đọc qua: chữ nhạt đi một bậc. Mục đang đọc: chữ đậm, số đổi màu,
   và một vạch 2px đè lên đúng đoạn sống dọc ngang với nó. */
.giay-toc__item.is-read .giay-toc__link { color: color-mix(in srgb, var(--wp--preset--color--muted) 72%, transparent); }

.giay-toc__item.is-current .giay-toc__link {
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

.giay-toc__item.is-current .giay-toc__num { color: var(--wp--preset--color--accent); }

.giay-toc__item.is-current::before {
	content: '';
	position: absolute;
	inset: 4px auto 4px calc(var(--wp--preset--spacing--30) * -1);
	width: var(--giay-rule);
	background: var(--wp--preset--color--accent);
}

.giay-toc__left {
	flex: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-top: 10px;
	border-top: var(--giay-row) solid var(--wp--preset--color--rule);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}

.giay-toc__left:empty { display: none; }

/* ---------- Đầu mục ------------------------------------------------------- */
.giay-eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.giay-eyebrow a { color: inherit; text-decoration: none; }
.giay-eyebrow a:hover { color: var(--wp--preset--color--accent); }
.giay-eyebrow__num { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--accent); letter-spacing: 0.04em; }
.giay-eyebrow__part { font-family: var(--wp--preset--font-family--mono); letter-spacing: 0; }
.giay-eyebrow__sep { opacity: 0.45; }

.giay-eyebrow__lock {
	color: #fff;
	background: var(--wp--preset--color--accent);
	padding: 2px 7px;
	letter-spacing: 0.09em;
}

.giay-post__title {
	font-size: clamp(2rem, 1.25rem + 2.5vw, 2.75rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin: 0 0 var(--wp--preset--spacing--40);
	text-wrap: balance;
}

.giay-post__title--stamp {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--title-s);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted);
}

.giay-post__title a { color: inherit; text-decoration: none; }
.giay-post__title a:hover { color: var(--wp--preset--color--accent); }

.giay-post__domain {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--accent);
	margin: -12px 0 var(--wp--preset--spacing--40);
}

.giay-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
	margin: 0 0 var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: var(--giay-rule) solid var(--wp--preset--color--text);
}

/* ---------- Cột đọc -------------------------------------------------------- */
.giay-post__content {
	font-size: var(--giay-reading-size);
	line-height: var(--giay-reading-lh);
}

.giay-post__content > * { max-width: var(--wp--custom--measure); }
.giay-post__content > .alignwide,
.giay-post__content > .alignfull,
.giay-post__content > figure { max-width: none; }

.giay-post__content p { margin: 0 0 1.35em; text-wrap: pretty; }

.giay-post__content h2 {
	font-size: var(--wp--preset--font-size--title-m);
	margin: 2em 0 0.6em;
	scroll-margin-top: calc(var(--wp--custom--header-h) + 16px);
	counter-increment: giay-h2;
}

.giay-post__content h2::before {
	content: counter(giay-h2) ' · ';
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7em;
	vertical-align: 0.15em;
}

.giay-post__content { counter-reset: giay-h2; }

.giay-post__content h3 {
	font-size: var(--wp--preset--font-size--title-s);
	margin: 1.6em 0 0.5em;
	scroll-margin-top: calc(var(--wp--custom--header-h) + 16px);
}

.giay-post__content a {
	color: var(--wp--preset--color--accent-deep);
	text-decoration: underline;
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

.giay-post__content a:hover { text-decoration-color: currentColor; }

.giay-post__content ul, .giay-post__content ol { padding-left: 1.3em; margin: 0 0 1.35em; }
.giay-post__content li { margin-bottom: 0.45em; }
.giay-post__content figure { margin: var(--wp--preset--spacing--50) 0; }
.giay-post__content img { filter: none; }

.giay-post__content figcaption,
.giay-post__cover figcaption {
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--muted);
	margin-top: 10px;
	line-height: 1.5;
	border-left: var(--giay-rule) solid var(--wp--preset--color--rule);
	padding-left: 12px;
}

.giay-post__cover {
	position: relative;
	margin: 0 0 var(--wp--preset--spacing--60);
	border-radius: var(--giay-radius);
	overflow: hidden;
}
.giay-post__cover img { display: block; width: 100%; filter: none; }

.giay-post__linkout { margin: var(--wp--preset--spacing--60) 0; font-size: var(--wp--preset--font-size--small); font-weight: 700; }

/* ---------- Mục đã mở khoá ------------------------------------------------- */
.giay-unlocked {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: var(--wp--preset--spacing--40);
	border: var(--giay-rule) solid var(--wp--preset--color--accent);
	margin-bottom: var(--wp--preset--spacing--60);
}

.giay-unlocked__badge {
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #fff;
	background: var(--wp--preset--color--accent);
	padding: 4px 8px;
}

.giay-unlocked__note { margin: 0; flex: 1 1 260px; font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--muted); }
.giay-unlocked__out { margin: 0; }

.giay-unlocked__out button {
	appearance: none;
	border: var(--giay-row) solid var(--wp--preset--color--text);
	background: transparent;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	padding: 8px 12px;
	cursor: pointer;
}

/* ---------- Màn mở khoá ---------------------------------------------------- */
.giay-gate { padding: var(--wp--preset--spacing--60) 0; }

.giay-gate__badge {
	display: inline-block;
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #fff;
	background: var(--wp--preset--color--accent);
	padding: 5px 10px;
}

.giay-gate__title {
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.375rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.03em;
	margin: 0 0 12px;
	max-width: 20ch;
}

.giay-gate__meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
	margin: 0 0 var(--wp--preset--spacing--50);
}

.giay-gate__blurb {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--muted);
	max-width: 52ch;
	margin: 0 0 var(--wp--preset--spacing--50);
}

.giay-gate__form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: flex-end;
	padding-bottom: var(--wp--preset--spacing--60);
	border-bottom: var(--giay-rule) solid var(--wp--preset--color--text);
}

.giay-gate__form label {
	flex: 1 1 100%;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted);
	margin-bottom: 4px;
}

.giay-gate__form input {
	flex: 1 1 240px;
	border: var(--giay-rule) solid var(--wp--preset--color--text);
	background: var(--wp--preset--color--bg);
	color: inherit;
	padding: 12px 14px;
	font-size: var(--wp--preset--font-size--small);
}

.giay-gate__siblings { padding: var(--wp--preset--spacing--50) 0; border-bottom: var(--giay-row) solid var(--wp--preset--color--rule); }
.giay-gate__siblings h2 { font-size: var(--wp--preset--font-size--micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--wp--preset--color--muted); margin: 0 0 10px; }
.giay-gate__siblings ul { list-style: none; margin: 0 0 8px; padding: 0; }
.giay-gate__siblings li { padding: 5px 0; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--muted); }
.giay-gate__siblings p { margin: 0; font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--muted); }
.giay-gate__num { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--accent); }

.giay-gate__explain {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50) 0;
}

.giay-gate__explain h2 { font-size: var(--wp--preset--font-size--micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--wp--preset--color--muted); margin: 0 0 10px; }
.giay-gate__explain ul { margin: 0; padding-left: 1.1em; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--muted); }
.giay-gate__explain li { margin-bottom: 5px; }
.giay-gate__explain p { margin: 0; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--muted); }

.giay-gate__nofooter {
	margin: 0;
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--giay-row) solid var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
}

/* ---------- Trích ---------------------------------------------------------- */
.giay-quote {
	background: var(--wp--preset--color--surface);
	border: 0;
	border-left: 3px solid var(--wp--preset--color--accent);
	padding: var(--wp--preset--spacing--60);
	margin: 0;
	font-size: var(--wp--preset--font-size--title-m);
	font-weight: 500;
	line-height: 1.32;
}

.giay-quote p { margin: 0 0 0.5em; max-width: 30ch; }

.giay-quote__cite {
	display: block;
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--meta);
	font-style: normal;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

/* ---------- Hội thoại ------------------------------------------------------ */
.giay-chat__row {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	padding: 12px 0;
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
}

.giay-chat__who {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent);
	line-height: 1.9;
}

.giay-chat__said { margin: 0; font-size: var(--giay-reading-size); line-height: var(--giay-reading-lh); }

/* ---------- Video / audio -------------------------------------------------- */
.giay-video { position: relative; margin: 0 0 var(--wp--preset--spacing--60); background: var(--wp--preset--color--surface); }
.giay-video__play { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; min-height: 200px; }
.giay-video__play img { display: block; width: 100%; filter: none; }

.giay-video__icon {
	position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
	width: 64px; height: 64px;
	background: var(--wp--preset--color--accent);
}

.giay-video__icon::after {
	content: '';
	position: absolute; inset: 50% auto auto 54%; translate: -50% -50%;
	border-left: 16px solid #fff;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

.giay-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

.giay-audio {
	display: flex; align-items: center; gap: var(--wp--preset--spacing--30);
	border-top: var(--giay-rule) solid var(--wp--preset--color--text);
	border-bottom: var(--giay-rule) solid var(--wp--preset--color--text);
	padding: 14px 0;
	margin: 0 0 var(--wp--preset--spacing--60);
	flex-wrap: wrap;
}

.giay-audio audio { flex: 1 1 260px; min-width: 0; }
.giay-audio__label { font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--muted); }

/* ---------- Thư viện ảnh --------------------------------------------------- */
.giay-gallery .wp-block-gallery { gap: 6px; }
.giay-gallery img { cursor: zoom-in; filter: none; }

.giay-lightbox { border: 0; padding: 0; max-width: 96vw; max-height: 94vh; background: transparent; }
.giay-lightbox::backdrop { background: rgb(23 22 21 / 94%); }
.giay-lightbox img { display: block; max-width: 96vw; max-height: 88vh; width: auto; object-fit: contain; }

.giay-lightbox__close {
	position: absolute; top: 8px; right: 8px;
	appearance: none;
	background: var(--wp--preset--color--accent);
	border: 0; color: #fff;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	padding: 8px 14px; cursor: pointer;
}

/* ---------- Chú thích cuối bài --------------------------------------------- */
.giay-footnotes {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--giay-rule) solid var(--wp--preset--color--text);
}

.giay-footnotes__label {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.giay-footnotes__list { list-style: none; margin: 0; padding: 0; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--muted); }
.giay-footnotes__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 6px 0; scroll-margin-top: calc(var(--wp--custom--header-h) + 16px); }
.giay-footnotes__num { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--accent); }

.giay-popover {
	position: absolute;
	z-index: 30;
	max-width: 320px;
	padding: 12px 14px;
	background: var(--wp--preset--color--bg);
	border: var(--giay-rule) solid var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.5;
	color: var(--wp--preset--color--text);
}

/* ---------- Điều hướng, đọc tiếp, tác giả ------------------------------------ */
.giay-postmeta > * { margin-top: var(--wp--preset--spacing--60); }

.giay-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	border: var(--giay-row) solid var(--wp--preset--color--rule);
	border-radius: var(--giay-radius);
	overflow: hidden;
}

.giay-navcard {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--wp--preset--spacing--40);
	background: color-mix(in srgb, var(--wp--preset--color--surface) 48%, transparent);
	text-decoration: none;
	color: var(--wp--preset--color--text);
}

.giay-navcard--next { text-align: right; border-left: var(--giay-row) solid var(--wp--preset--color--rule); }
.giay-navcard:hover { background: var(--wp--preset--color--accent-tint); text-decoration: none; }

.giay-navcard__label {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--accent);
}

.giay-navcard__title { font-size: var(--wp--preset--font-size--small); font-weight: 500; line-height: 1.3; }
.giay-nav .giay-navcard:only-child { grid-column: span 2; }

.giay-related__label,
.giay-backlinks__label {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--muted);
	margin: 0 0 var(--wp--preset--spacing--30);
	padding-bottom: 8px;
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
}

.giay-related__list, .giay-backlinks__list { list-style: none; margin: 0; padding: 0; }

.giay-related__item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
	padding: 10px 0;
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
}

.giay-related__num { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--muted); }
.giay-related__item a { color: var(--wp--preset--color--text); text-decoration: none; font-weight: 500; }
.giay-related__item a:hover { color: var(--wp--preset--color--accent); }
.giay-related__meta { font-family: var(--wp--preset--font-family--mono); font-size: 10px; color: var(--wp--preset--color--muted); white-space: nowrap; }

.giay-backlinks__list li { padding: 7px 0; font-size: var(--wp--preset--font-size--meta); }

.giay-author {
	border-top: var(--giay-row) solid var(--wp--preset--color--rule);
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
	padding: var(--wp--preset--spacing--40) 0;
}

.giay-author__name { font-size: var(--wp--preset--font-size--title-s); font-weight: 800; margin: 0 0 6px; }
.giay-author__bio { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); margin: 0 0 6px; max-width: 52ch; }
.giay-author__stat, .giay-author__more { font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--muted); margin: 0; font-family: var(--wp--preset--font-family--mono); }
.giay-author__more { margin-top: 8px; font-family: inherit; }

/* ---------- Bình luận -------------------------------------------------------- */
.giay-comments {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--giay-rule) solid var(--wp--preset--color--text);
}

.giay-comment { padding: var(--wp--preset--spacing--40) 0; border-bottom: var(--giay-row) solid var(--wp--preset--color--rule); }
.giay-comment__head { gap: 10px; align-items: baseline; color: var(--wp--preset--color--muted); }

.giay-comments__form input[type='text'],
.giay-comments__form input[type='email'],
.giay-comments__form textarea {
	width: 100%;
	max-width: 100%;
	border: var(--giay-row) solid var(--wp--preset--color--rule);
	background: transparent;
	color: inherit;
	padding: 11px 12px;
	font-size: var(--wp--preset--font-size--small);
}

.giay-comments__form label {
	display: block;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
	margin-bottom: 4px;
}

/* ---------- Mục lục nằm trong bài (màn hẹp) ----------------------------------
 * Dưới 1200px cột lề biến mất, nên mục lục về nằm ngay dưới đầu bài dưới dạng
 * một khối gấp mở. Trên máy tính khối này không tồn tại — JS chỉ dựng nó khi
 * cần, và CSS ẩn nốt phòng khi kích thước đổi giữa chừng.
 */
.giay-tocinline {
	display: none;
	margin: 0 0 var(--wp--preset--spacing--50);
	border: var(--giay-row) solid var(--wp--preset--color--rule);
	border-radius: var(--giay-radius);
	background: color-mix(in srgb, var(--wp--preset--color--surface) 52%, transparent);
	overflow: hidden;
}

.giay-tocinline__sum {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--wp--custom--tap);
	padding: 0 14px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* Safari vẫn vẽ tam giác mặc định nếu không gỡ riêng cái này. */
.giay-tocinline__sum::-webkit-details-marker { display: none; }

.giay-tocinline__label {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--text);
}

.giay-tocinline__n {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
}

/* Mũi tên tự vẽ, quay xuống khi mở. */
.giay-tocinline__mark {
	margin-left: auto;
	width: 9px;
	height: 9px;
	border-right: var(--giay-rule) solid var(--wp--preset--color--muted);
	border-bottom: var(--giay-rule) solid var(--wp--preset--color--muted);
	rotate: -45deg;
	translate: 0 -2px;
	transition: rotate var(--giay-dur);
}

.giay-tocinline[open] .giay-tocinline__mark { rotate: 45deg; translate: 0 -3px; }

.giay-tocinline__body {
	padding: 0 14px 12px;
	border-top: var(--giay-row) solid var(--wp--preset--color--rule);
}

/* Bản trong bài đã có tiêu đề riêng ở hàng gấp mở, và không cần dính theo
   cuộn vì nó nằm trong dòng chảy của bài. */
.giay-tocinline .giay-toc { max-height: none; display: block; }
.giay-tocinline .giay-toc__head { display: none; }
.giay-tocinline .giay-toc__scroll { max-height: 46vh; padding-top: 10px; mask-image: none; }
.giay-tocinline .giay-toc__link { padding-top: 9px; padding-bottom: 9px; }
.giay-tocinline .giay-toc__left { margin-top: var(--wp--preset--spacing--30); }

@media (max-width: 1200px) {
	.giay-tocinline { display: block; }
}

/* ---------- Nút gọi mục lục trên màn hẹp -------------------------------------
 * Một nút nổi duy nhất thay cho thanh hai nút cũ. Nó ngồi ở góc phải dưới,
 * tránh ngón cái đi ngang qua chữ khi cuộn.
 */
.giay-tocbtn {
	position: fixed;
	right: var(--wp--custom--gutter-mobile);
	bottom: calc(var(--wp--custom--gutter-mobile) + env(safe-area-inset-bottom));
	z-index: 25;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: var(--wp--custom--tap);
	padding: 0 16px;
	border: var(--giay-row) solid var(--wp--preset--color--rule);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--bg) 88%, transparent);
	backdrop-filter: blur(12px);
	color: var(--wp--preset--color--text);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 24px rgb(29 25 22 / 12%);
	transition: border-color var(--giay-dur), color var(--giay-dur);
}

.giay-tocbtn[hidden] { display: none; }

.giay-tocbtn:hover,
.giay-tocbtn[aria-expanded='true'] {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* Ba vạch ngắn dần — hình mục lục, vẽ bằng gradient nên không tốn thêm file. */
.giay-tocbtn__bars {
	width: 14px;
	height: 10px;
	flex: none;
	background:
		linear-gradient(currentColor, currentColor) 0 0 / 14px 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 4px / 10px 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 8px / 6px 2px no-repeat;
}

.giay-veil {
	position: fixed;
	inset: 0;
	z-index: 24;
	background: rgb(32 30 29 / 45%);
}

.giay-veil[hidden] { display: none; }

/* Sheet nằm ngay trên nút gọi chứ không đè lên nó — nếu đè thì bấm mở xong
   là mất luôn đường ra. */
.giay-sheet {
	position: fixed;
	inset: auto 0 calc(var(--wp--custom--tap) + 24px + env(safe-area-inset-bottom)) 0;
	z-index: 26;
	max-height: 68vh;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--bg);
	border-top: var(--giay-rule) solid var(--wp--preset--color--text);
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
}

.giay-sheet[hidden] { display: none; }

.giay-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px var(--wp--preset--spacing--50);
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
	flex: none;
}

.giay-sheet__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted);
}

.giay-sheet__close {
	appearance: none;
	width: var(--wp--custom--tap);
	height: var(--wp--custom--tap);
	flex: none;
	display: grid;
	place-items: center;
	border: var(--giay-row) solid var(--wp--preset--color--rule);
	border-radius: var(--giay-radius);
	background: transparent;
	color: var(--wp--preset--color--text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.giay-sheet__close:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
}

.giay-sheet__body {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

/* Trong sheet, mục lục trải hết bề ngang và mỗi dòng cao bằng vùng chạm. Cả
   khối .giay-toc được chuyển hẳn vào đây, nên phải cởi bỏ mấy ràng buộc của
   bản ở cột lề: chiều cao trần, khung cuộn riêng, và mảng mờ hai đầu. */
.giay-sheet .giay-toc { max-height: none; display: block; }
.giay-sheet .giay-toc__head { display: none; }

.giay-sheet .giay-toc__scroll {
	overflow: visible;
	max-height: none;
	mask-image: none;
}

.giay-sheet .giay-toc__link { padding-top: 11px; padding-bottom: 11px; }
.giay-sheet .giay-toc__text { font-size: var(--wp--preset--font-size--small); }
.giay-sheet .giay-toc__left { margin-top: var(--wp--preset--spacing--40); }

body.giay-sheet-open { overflow: hidden; }

@media (max-width: 1200px) {
	.giay-main--reading { padding-bottom: 84px; }
}

/* ---------- Nhắc đọc tiếp từ chỗ cũ ------------------------------------------- */
.giay-resume {
	position: fixed;
	inset: auto auto 16px 16px;
	z-index: 24;
	display: flex;
	gap: 10px;
	align-items: center;
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--bg);
	padding: 10px 14px;
	font-size: var(--wp--preset--font-size--micro);
	max-width: calc(100vw - 32px);
}

.giay-resume button {
	appearance: none;
	background: none;
	border: var(--giay-row) solid currentColor;
	color: inherit;
	font: inherit;
	font-weight: 700;
	padding: 5px 10px;
	cursor: pointer;
}

@media (max-width: 1200px) { .giay-resume { bottom: 72px; } }

@media (max-width: 781px) {
	.giay-reading { padding: var(--wp--preset--spacing--40) 0; }
	.giay-post__title { font-size: clamp(2rem, 1.55rem + 4vw, 2.5rem); }
	.giay-post__meta { gap: 10px 14px; }
	.giay-chat__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.giay-chat__who { line-height: 1.4; }
	.giay-nav { grid-template-columns: minmax(0, 1fr); }
	.giay-navcard--next { text-align: left; border-left: 0; border-top: var(--giay-row) solid var(--wp--preset--color--rule); }
	.giay-related__item { grid-template-columns: 44px minmax(0, 1fr); }
	.giay-related__meta { display: none; }
	/* Cỡ chữ đọc 18px trên điện thoại theo đề xuất. */
	:root { --giay-reading-size: 1.125rem; }
}

/* ---------- Căn đều hai lề ------------------------------------------------
 * Mặc định bật cho mọi bài, ở mọi bề ngang màn hình; tắt theo từng bài bằng
 * ô đánh dấu ở màn soạn bài (xem giay_body_classes()).
 *
 * Tiếng Việt không có bộ ngắt từ trong trình duyệt nên căn đều dễ sinh khe
 * trắng rộng giữa các từ. Ba thứ giữ cho nó đỡ rỗ: `text-wrap: pretty` lo
 * dòng cuối đoạn, `word-spacing` âm một chút kéo các từ lại, và dòng cuối
 * mỗi đoạn được trả về căn trái — căn đều một dòng lẻ trông như lỗi in.
 */
.giay-justify .giay-post__content p,
.giay-justify .giay-post__content li {
	text-align: justify;
	text-align-last: left;
	text-justify: inter-word;
	word-spacing: -0.012em;
	text-wrap: pretty;
}

@media (max-width: 420px) {
	/* Hẹp tới mức mỗi dòng chỉ còn dăm từ thì căn đều thành ra thưa hơn là
	   ngay ngắn, nên nới thêm cho chữ đỡ bị kéo. */
	.giay-justify .giay-post__content p,
	.giay-justify .giay-post__content li { word-spacing: -0.02em; }
}