/*
 * Giấy v2 — trang danh sách.
 *
 * Dòng mục lục là lưới ba cột: số · nội dung · ngày. Lưới lộ ra bằng đường
 * kẻ 1px giữa các dòng và 2px giữa các khối lớn.
 */

/* ---------- Khung hai làn: mục lục + sổ tay -----------------------------
 * Cột phải chỉ tồn tại khi có làn ghi chú thật. Trước đây cột vẫn được
 * chừa 320px kể cả khi block Sổ tay không in ra gì, để lại một mảng trống
 * bằng một phần tư bề ngang trang.
 */
.giay-lanes-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

.giay-lanes-wrap:not(:has(.giay-noterail)) {
	grid-template-columns: minmax(0, 1fr);
}

/* Các dải trong cột trái tự lo khoảng cách bằng đường kẻ và đệm của chính
   chúng; khoảng cách mặc định giữa block chỉ chồng thêm một lớp trống nữa. */
.giay-lanes-wrap > * > * {
	margin-block-start: 0;
}

@media (max-width: 1100px) {
	.giay-lanes-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }

	/* Trên màn hẹp, Sổ tay lên trước mục lục. Nằm sau một danh sách dài
	   thì coi như không có: phải cuộn hết trang mới thấy. */
	.giay-noterail { order: -1; }
}

/* ---------- Mục mở đầu -------------------------------------------------- */
.giay-hero {
	display: grid;
	grid-template-columns: minmax(280px, 1.15fr) minmax(0, 0.85fr);
	column-gap: clamp(24px, 4vw, 56px);
	align-items: center;
	padding: var(--wp--preset--spacing--60) 0;
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
}

.giay-hero__text { grid-column: 1; min-width: 0; }

/* Mục mở đầu không có ảnh thì đừng chừa nửa trang trống cho nó. */
.giay-hero:not(:has(.giay-hero__cover)) { grid-template-columns: minmax(0, 1fr); }

.giay-hero__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	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--30);
}

.giay-hero__num {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--accent);
	letter-spacing: 0.04em;
}

.giay-hero__eyebrow a { color: inherit; }

.giay-hero__title {
	font-size: clamp(2.25rem, 1.45rem + 2.5vw, 3.5rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.03em;
	margin: 0 0 var(--wp--preset--spacing--30);
	max-width: 14ch;
	text-wrap: balance;
}

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

.giay-hero__lead {
	font-size: clamp(1.0625rem, 0.98rem + 0.32vw, 1.25rem);
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
	max-width: 46ch;
	margin: 0 0 var(--wp--preset--spacing--40);
	text-wrap: pretty;
}

.giay-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

.giay-hero__cover {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-top: 0;
	background: var(--wp--preset--color--surface);
	border-radius: var(--giay-radius);
	overflow: hidden;
	/* Khung ảnh có tỉ lệ cố định, nên chiều cao dải mở đầu không còn phụ
	   thuộc vào việc bài hôm nay đăng ảnh ngang hay ảnh dọc. Ảnh vẫn hiện
	   trọn (contain) — ảnh dọc thừa ra hai bên chứ không kéo dài trang. */
	aspect-ratio: 16 / 10;
	max-height: min(38vh, 340px);
}

.giay-hero__cover img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: none;
}

@media (max-width: 900px) {
	.giay-hero {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		padding: var(--wp--preset--spacing--50) 0;
	}

	.giay-hero__text,
	.giay-hero__cover { grid-column: 1; grid-row: auto; }

	.giay-hero__cover { margin-top: var(--wp--preset--spacing--40); }
	.giay-hero__title { max-width: 18ch; }
}

/* ---------- Thống kê ---------------------------------------------------- */
.giay-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
}

.giay-stat {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border-right: var(--giay-row) solid var(--wp--preset--color--rule);
}

.giay-stat:last-child { border-right: 0; }

.giay-stat__value {
	display: block;
	font-size: var(--wp--preset--font-size--title-l);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.giay-stat__label {
	display: block;
	margin-top: 6px;
	font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
	.giay-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.giay-stat:nth-child(2) { border-right: 0; }
	.giay-stat:nth-child(-n+2) { border-bottom: var(--giay-row) solid var(--wp--preset--color--rule); }
}

/* ---------- Bộ lọc làn --------------------------------------------------- */
.giay-lanes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
}

.giay-lanes__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* <li> phải là flex chứ không phải khối chữ: chip là inline-flex, nằm trong
   một hộp dòng nó kéo theo khoảng thừa của đường cơ sở và dải lọc cao lên
   50px thay vì 34px. */
.giay-lanes__list li { display: flex; }

.giay-lane {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 6px 12px;
	border: var(--giay-row) solid var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	border-radius: 999px;
}

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

.giay-lane.is-on {
	background: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--bg);
}

.giay-lanes__order { margin: 0; font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--muted); }

/* ---------- Nhãn nhóm tháng ----------------------------------------------
 * Nhãn này thuộc về danh sách ngay bên dưới, nên nó dính lại khi cuộn thay
 * vì trôi đi mất — biết đang đọc tháng nào mà không phải cuộn ngược lên.
 */
.giay-indexhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
	padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20);
	position: sticky;
	top: var(--wp--custom--header-h);
	z-index: 3;
	background: var(--wp--preset--color--bg);
	border-bottom: var(--giay-rule) solid var(--wp--preset--color--text);
}

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

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

/* ---------- Dòng mục lục ------------------------------------------------- */
.giay-stream__list { list-style: none; margin: 0; padding: 0; }

.giay-line {
	display: grid;
	grid-template-columns: var(--wp--custom--index-num) minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
	position: relative;
}

.giay-line:hover {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 48%, transparent);
}

/* Số mục nằm ở cột đầu, sinh từ data-num nên markup không phải lặp lại nó. */
.giay-line::before {
	content: '№ ' attr(data-num);
	grid-row: 1 / -1;
	grid-column: 1;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.02em;
	padding-top: 3px;
}

.giay-line[data-num='0']::before,
.giay-line[data-num='']::before { content: ''; }

.giay-line > * { grid-column: 2; }
.giay-line__when { grid-column: 3; grid-row: 1; }

.giay-line__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--muted);
}

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

.giay-line__lock {
	color: var(--wp--preset--color--accent);
	border: var(--giay-row) solid currentColor;
	padding: 1px 6px;
	letter-spacing: 0.08em;
}

.giay-line__title {
	font-size: var(--wp--preset--font-size--title-s);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.015em;
	margin: 0;
	max-width: 42ch;
	text-wrap: pretty;
}

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

.giay-line__lead {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	margin: 6px 0 0;
	max-width: 62ch;
	text-wrap: pretty;
}

.giay-line__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }

.giay-line__tag {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
}

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

.giay-line__when {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
	padding-top: 3px;
}

/* --- Trích --- */
.giay-line__quote {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 500;
	line-height: 1.36;
	margin: 0;
	padding: 0 0 0 var(--wp--preset--spacing--40);
	border-left: var(--giay-rule) solid var(--wp--preset--color--accent);
	max-width: 44ch;
}

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

.giay-line__cite {
	display: block;
	margin-top: 10px;
	padding-left: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--micro);
	font-style: normal;
	color: var(--wp--preset--color--muted);
}

/* --- Link ngoài --- */
.giay-line__domain {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--accent);
	margin: 6px 0 0;
}

/* --- Ghi chú --- */
.giay-line--aside .giay-line__aside {
	border-left: var(--giay-rule) solid var(--wp--preset--color--rule);
	padding-left: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	max-width: 62ch;
}

.giay-line__aside > :first-child { margin-top: 0; }
.giay-line__aside > :last-child { margin-bottom: 0; }

.giay-line__permalink { font-size: var(--wp--preset--font-size--micro); margin: 10px 0 0 !important; }

/* --- Ảnh & thư viện --- */
.giay-line__image { display: block; margin-top: 12px; }
.giay-line__image img { filter: none; }
.giay-line__caption { font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--muted); margin: 8px 0 0; }
.giay-line__gallery { display: flex; gap: 6px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.giay-line__gallery img { width: 116px; height: 78px; object-fit: cover; display: block; filter: none; }
.giay-line__more { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--muted); }

/* --- Video / audio --- */
.giay-line__cue {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	color: var(--wp--preset--color--accent);
	margin: 10px 0 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.giay-line__cue::before {
	content: '';
	width: 0; height: 0;
	border-left: 8px solid currentColor;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.giay-line__cue[data-format='audio']::before {
	border: 0; width: 9px; height: 9px; background: currentColor;
}

/* --- Mục khoá --- */
.giay-line--locked { background: var(--wp--preset--color--surface); }
.giay-line--locked .giay-line__title { color: var(--wp--preset--color--muted); }

.giay-lockrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}

.giay-lockrow__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-lockrow__hint { margin: 0; font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--muted); }

.giay-lockrow__form { display: flex; gap: 6px; }

.giay-lockrow__form input {
	border: var(--giay-row) solid var(--wp--preset--color--text);
	background: var(--wp--preset--color--bg);
	color: inherit;
	padding: 8px 10px;
	font-size: var(--wp--preset--font-size--meta);
	max-width: 180px;
}

.giay-lockrow__form button {
	appearance: none;
	border: var(--giay-row) solid var(--wp--preset--color--text);
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--bg);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--meta);
	padding: 8px 14px;
	cursor: pointer;
}

.giay-lockrow__form button:hover { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }

/* --- Mục "chỉ tôi": viền đỏ gạch chéo, chỉ tác giả thấy --- */
.giay-line--private {
	border-left: 3px solid var(--wp--preset--color--accent);
	padding-left: var(--wp--preset--spacing--30);
}

/* ---------- Làn ghi chú (sổ tay) ----------------------------------------- */
.giay-noterail {
	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) 68%, transparent);
	padding: var(--wp--preset--spacing--40);
	position: sticky;
	top: calc(var(--wp--custom--header-h) + var(--wp--preset--spacing--30));
}

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

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

.giay-noterail__all { font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--muted); text-decoration: none; }
.giay-noterail__all:hover { color: var(--wp--preset--color--accent); }

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

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

.giay-noterail__item:last-child { border-bottom: 0; }

.giay-noterail__when {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: var(--wp--preset--color--muted);
	margin-bottom: 4px;
}

.giay-noterail__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.giay-noterail__link:hover { color: var(--wp--preset--color--accent-deep); text-decoration: none; }
.giay-noterail__text { font-size: var(--wp--preset--font-size--meta); line-height: 1.55; }
.giay-noterail__go { color: var(--wp--preset--color--accent); line-height: 1.4; }

/* Ghi chú khoá: chỉ có ngày và một nhãn, không mang chữ nào của ghi chú. */
.giay-noterail__item--locked .giay-noterail__text {
	color: var(--wp--preset--color--muted);
	font-style: italic;
}

.giay-noterail__item--locked .giay-noterail__go { color: var(--wp--preset--color--muted); }

@media (max-width: 1100px) {
	.giay-noterail {
		position: static;
		margin: var(--wp--preset--spacing--40) 0;
	}

	.giay-noterail__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); }
	.giay-noterail__item { border-bottom: 0; border-right: var(--giay-row) solid var(--wp--preset--color--rule); padding-right: var(--wp--preset--spacing--30); }
	.giay-noterail__item:last-child { border-right: 0; padding-right: 0; }
}

/* ---------- Lưu trữ theo năm --------------------------------------------- */
.giay-year { margin-bottom: var(--wp--preset--spacing--70); }

.giay-year__label {
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	letter-spacing: -0.04em;
	margin: 0;
	line-height: 1;
}

.giay-year__label a { color: inherit; text-decoration: none; }

.giay-year__stat {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
	margin: 8px 0 var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
}

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

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

.giay-year__row:hover { background: color-mix(in srgb, var(--wp--preset--color--surface) 58%, transparent); }

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

.giay-year__title { color: var(--wp--preset--color--text); text-decoration: none; font-weight: 500; }
.giay-year__title:hover { color: var(--wp--preset--color--accent); text-decoration: none; }

.giay-year__lock {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #fff;
	background: var(--wp--preset--color--accent);
	padding: 2px 6px;
}

.giay-year__badge {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--muted);
}

/* ---------- Nhịp viết theo tháng ------------------------------------------ */
.giay-months { margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--70); }

.giay-months__row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: 8px 0;
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
	flex-wrap: wrap;
}

.giay-months__year {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	width: 48px;
	flex: none;
}

.giay-months__cells { display: flex; gap: 3px; flex-wrap: wrap; }

.giay-months__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	border: var(--giay-row) solid var(--wp--preset--color--rule);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	line-height: 1.25;
	border-radius: 6px;
}

/* Bốn mức đậm — thang màu tự co giãn theo tháng nhiều nhất. */
.giay-months__cell[data-level='1'] { background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent); }
.giay-months__cell[data-level='2'] { background: color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent); }
.giay-months__cell[data-level='3'] { background: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent); color: #fff; }
.giay-months__cell[data-level='4'] { background: var(--wp--preset--color--accent); color: #fff; border-color: var(--wp--preset--color--accent); }
.giay-months__cell[data-level='3'] b,
.giay-months__cell[data-level='4'] b { color: #fff; }

a.giay-months__cell:hover { border-color: var(--wp--preset--color--text); }
.giay-months__cell b { font-size: 11px; font-weight: 700; color: var(--wp--preset--color--accent); }
.giay-months__cell.is-empty { opacity: 0.45; }

/* ---------- Bản đồ chủ đề ------------------------------------------------- */
.giay-matrix__note {
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--muted);
	max-width: 60ch;
	margin: 0 0 var(--wp--preset--spacing--50);
}

.giay-matrix__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--meta);
}

.giay-matrix__table th,
.giay-matrix__table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
}

.giay-matrix__table thead th {
	border-bottom: var(--giay-rule) solid var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--muted);
}

.giay-matrix__table tbody th a { color: var(--wp--preset--color--text); text-decoration: none; font-weight: 700; }
.giay-matrix__table tbody th a:hover { color: var(--wp--preset--color--accent); }

.giay-matrix__table td { text-align: center; font-family: var(--wp--preset--font-family--mono); }
.giay-matrix__table td a { color: inherit; text-decoration: none; display: block; }
.giay-matrix__table td[data-level='1'] { background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent); }
.giay-matrix__table td[data-level='2'] { background: color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent); }
.giay-matrix__table td[data-level='3'] { background: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent); color: #fff; }
.giay-matrix__table td[data-level='4'] { background: var(--wp--preset--color--accent); color: #fff; }
.giay-matrix__table td[data-level='0'] { color: var(--wp--preset--color--rule); }
.giay-matrix__total { font-weight: 700; }

/* ---------- Danh sách chủ đề ---------------------------------------------- */
.giay-topics__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--wp--preset--spacing--40); }

.giay-topics__item {
	padding: 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);
}

.giay-topics__name { font-size: var(--wp--preset--font-size--title-s); margin: 0 0 8px; }
.giay-topics__name a { color: inherit; text-decoration: none; }
.giay-topics__name a:hover { color: var(--wp--preset--color--accent); }
.giay-topics__desc { font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--muted); margin: 0 0 10px; }
.giay-topics__count { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--accent); margin: 0; }

/* ---------- Lộ trình chuỗi bài -------------------------------------------- */
.giay-paths { display: grid; gap: var(--wp--preset--spacing--60); }

.giay-path {
	border: var(--giay-row) solid var(--wp--preset--color--rule);
	border-radius: var(--giay-radius);
	padding: var(--wp--preset--spacing--50);
}

.giay-path__name { font-size: var(--wp--preset--font-size--title-m); margin: 0 0 6px; }
.giay-path__name a { color: inherit; text-decoration: none; }
.giay-path__desc { font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--muted); margin: 0 0 var(--wp--preset--spacing--30); max-width: 58ch; }

.giay-path__progress {
	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 8px;
}

.giay-path__bar {
	height: 6px;
	background: var(--wp--preset--color--surface);
	border: var(--giay-row) solid var(--wp--preset--color--rule);
	margin-bottom: var(--wp--preset--spacing--40);
}

.giay-path__bar span { display: block; height: 100%; width: 0; background: var(--wp--preset--color--accent); transition: width var(--giay-dur); }

.giay-path__next { margin: 0 0 var(--wp--preset--spacing--40); }

.giay-path__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }

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

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

.giay-path__item.is-current { background: var(--wp--preset--color--surface); }
.giay-path__item.is-current .giay-path__title { font-weight: 700; }
.giay-path__item.is-read .giay-path__num::after { content: ' ✓'; color: var(--wp--preset--color--accent); }
.giay-path__item.is-read .giay-path__title { color: var(--wp--preset--color--muted); }

.giay-path__lock {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	background: var(--wp--preset--color--accent);
	padding: 1px 5px;
}

/* ---------- Đọc sau -------------------------------------------------------- */
.giay-saved__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: var(--giay-rule) solid var(--wp--preset--color--text);
	margin-bottom: var(--wp--preset--spacing--40);
}

.giay-saved__note { margin: 0; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--muted); max-width: 56ch; }

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

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

.giay-saved__num { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--muted); }
.giay-saved__title { color: var(--wp--preset--color--text); text-decoration: none; font-weight: 500; }
.giay-saved__title:hover { color: var(--wp--preset--color--accent); }
.giay-saved__meta { display: block; font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--muted); margin-top: 3px; font-family: var(--wp--preset--font-family--mono); }

.giay-saved__remove {
	appearance: none; background: none; border: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--meta);
	cursor: pointer; padding: 6px 8px; min-height: var(--wp--custom--tap);
}

.giay-saved__remove:hover { color: var(--wp--preset--color--accent); }
.giay-saved__empty { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.giay-saved__empty.is-hidden, .giay-saved__list.is-hidden { display: none; }

/* ---------- Phân trang ----------------------------------------------------- */
.giay-pagination {
	padding: var(--wp--preset--spacing--40) 0;
	font-size: var(--wp--preset--font-size--meta);
	border-bottom: var(--giay-rule) solid var(--wp--preset--color--text);
}

.giay-pagination a, .giay-pagination .page-numbers {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	padding: 8px 10px;
	display: inline-block;
	min-height: 34px;
}

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

.giay-pagination .page-numbers.current {
	color: #fff;
	background: var(--wp--preset--color--accent);
	font-weight: 700;
}

.giay-empty {
	color: var(--wp--preset--color--muted);
	padding: var(--wp--preset--spacing--70) 0;
	font-size: var(--wp--preset--font-size--lead);
}

.giay-archivehead h1 { margin: 0; max-width: 22ch; text-wrap: balance; }

/* ---------- Điện thoại ------------------------------------------------------
 * Mục tiêu: dòng mục lục đầu tiên nằm trong màn hình đầu, không phải cuộn
 * qua một mục mở đầu cao bằng cả màn rồi mới thấy nội dung.
 */
@media (max-width: 781px) {
	.giay-hero__title { font-size: clamp(1.75rem, 1.3rem + 4.5vw, 2.25rem); }

	/* Hai nút một hàng: nút chính co được, nút phụ giữ đúng bề rộng chữ.
	   Để chúng tự xuống dòng thì mất thêm 60px chiều cao mà chẳng rõ hơn. */
	.giay-hero__actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px;
	}

	.giay-hero__actions .giay-btn {
		min-width: 0;
		justify-content: center;
		text-align: center;
		padding: 8px 12px;
	}

	/* Khung ảnh dẹt hơn trên điện thoại — mỗi pixel chiều cao ở đây là một
	   pixel người đọc phải cuộn qua trước khi tới mục lục. */
	.giay-hero__cover { margin-top: var(--wp--preset--spacing--40); aspect-ratio: 16 / 9; }

	/* Bốn ô thống kê giữ nguyên một hàng — xếp 2×2 làm dải này cao gấp đôi
	   mà không cho biết thêm gì. */
	.giay-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.giay-stat { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); }
	.giay-stat:nth-child(2) { border-right: var(--giay-row) solid var(--wp--preset--color--rule); }
	.giay-stat:nth-child(-n+2) { border-bottom: 0; }
	.giay-stat:last-child { border-right: 0; }
	.giay-stat__value { font-size: var(--wp--preset--font-size--title-s); }
	.giay-stat__label { margin-top: 3px; font-size: 10px; letter-spacing: 0.06em; }

	/* Chip lọc trượt ngang trong một hàng thay vì xuống dòng thành ba tầng. */
	.giay-lanes { flex-wrap: nowrap; align-items: center; }

	.giay-lanes__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.giay-lanes__list::-webkit-scrollbar { display: none; }
	.giay-lane { white-space: nowrap; min-height: 40px; }
	.giay-lanes__order { display: none; }

	/* Số mục và ngày về chung một hàng trên cùng thay vì mỗi thứ một dòng —
	   bớt hai dòng trống cho mỗi mục. */
	.giay-line {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 0 10px;
		padding: var(--wp--preset--spacing--40) 0;
	}

	.giay-line::before {
		grid-row: 1;
		grid-column: 1;
		padding-top: 0;
	}

	.giay-line > * { grid-column: 1 / -1; }

	.giay-line__when {
		grid-column: 2;
		grid-row: 1;
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-end;
		gap: 10px;
		padding-top: 0;
	}

	.giay-year__row { grid-template-columns: 48px minmax(0, 1fr); }
	.giay-year__badge, .giay-year__date { display: none; }
	.giay-topics__list { grid-template-columns: minmax(0, 1fr); }
	.giay-matrix__table { font-size: var(--wp--preset--font-size--micro); }
	.giay-matrix__table th, .giay-matrix__table td { padding: 8px 6px; }
	.giay-saved__list li { grid-template-columns: 44px minmax(0, 1fr) auto; }
	.giay-noterail__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.giay-noterail__item,
	.giay-noterail__item:last-child {
		border-right: 0;
		border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
		padding-right: 0;
	}
	.giay-noterail__item:last-child { border-bottom: 0; }
}