/*
 * Giấy v2 — nền chung.
 *
 * Hệ Modernist: lưới lộ ra thay vì ẩn đi, viền 2px cho ranh giới lớn và 1px
 * cho ranh giới dòng, bo góc 0, không đổ bóng. Đỏ #ec3013 chỉ dùng ba chỗ —
 * dấu hiệu nhận diện, hành động chính, và một dải nhấn mỗi trang.
 *
 * Màu, cỡ chữ và bậc khoảng đến từ theme.json dưới dạng --wp--preset--*.
 * File này chỉ định nghĩa lại chúng cho chế độ tối và dựng những thành phần
 * mà block lõi không có.
 */

/* ---------- Chế độ tối --------------------------------------------------
 * Đè thẳng lên biến preset thay vì viết lại từng quy tắc, để mọi block lõi
 * — kể cả block chưa từng thấy — cũng đổi màu đúng.
 */
[data-theme='dark'] {
	--wp--preset--color--bg: #171615;
	--wp--preset--color--surface: #211f1e;
	--wp--preset--color--text: #ece9e7;
	--wp--preset--color--muted: #9a9490;
	--wp--preset--color--rule: #3a3735;
	--wp--preset--color--accent: #ff5738;
	/* Trên nền tối, "nhấn đậm" phải sáng hơn nhấn chứ không tối đi — nếu
	   không thì link trong thân bài tụt xuống dưới ngưỡng tương phản. */
	--wp--preset--color--accent-deep: #ff9783;
	--wp--preset--color--accent-tint: #3a201a;
	color-scheme: dark;
}

[data-theme='light'] {
	color-scheme: light;
}

:root {
	--giay-reading-size: var(--wp--preset--font-size--base);
	--giay-reading-lh: 1.62;
	--giay-dur: 0.15s;
	--giay-rule: 2px;
	--giay-row: 1px;
	--giay-radius: 12px;
	--giay-radius-sm: 8px;
}

@media (prefers-reduced-motion: reduce) {
	:root { --giay-dur: 0s; }

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Nền tảng ----------------------------------------------------
 * `box-sizing: border-box` cho tất cả. Cả theme viết `min-height: 34px` với
 * ý "cao 34px", nhưng mặc định của CSS là content-box nên đệm và viền cộng
 * thêm vào: chip lọc 34px hoá ra cao 50px, và mọi dải chứa chúng phình theo.
 */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--text);
}

img, video { max-width: 100%; height: auto; }

/* Bo nhẹ để các vùng tương tác dễ nhận ra mà vẫn giữ chất biên tập. */
input, textarea, select, button, .wp-block-button__link {
	border-radius: var(--giay-radius-sm);
	box-shadow: none;
	font-family: inherit;
}

/* ---------- Focus thấy rõ ----------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.giay-skip {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 12px 16px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.giay-skip:focus { left: 8px; top: 8px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Nút chỉ chạy được khi có JS thì giấu đi khi không có JS, và ngược lại. */
.giay-no-js .giay-theme,
.giay-no-js .giay-search__open,
.giay-no-js .giay-search__dialog,
.giay-no-js .giay-progress,
.giay-no-js [data-giay-saved-export] { display: none; }

.giay-js .giay-search__fallback { display: none; }

/* ---------- Nút ---------------------------------------------------------
 * Nhãn nằm sát lề trái kể cả khi nút rộng hơn nhãn — quy tắc của hệ.
 */
.giay-btn {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	min-height: var(--wp--custom--tap);
	padding: 12px 16px;
	border: var(--giay-rule) solid var(--wp--preset--color--text);
	background: transparent;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border-radius: var(--giay-radius-sm);
	transition: background var(--giay-dur), color var(--giay-dur), border-color var(--giay-dur);
}

.giay-btn:hover {
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

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

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

.giay-btn--ghost {
	border-color: var(--wp--preset--color--rule);
	color: var(--wp--preset--color--muted);
	font-weight: 500;
}

.giay-btn--ghost:hover {
	border-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--text);
	background: transparent;
}

[data-giay-save] .giay-btn__save-on { display: none; }
[data-giay-save][aria-pressed='true'] .giay-btn__save-on { display: inline; }
[data-giay-save][aria-pressed='true'] .giay-btn__save-off { display: none; }

/* ---------- Đầu trang ---------------------------------------------------
 * Dính theo cuộn, nền mờ.
 *
 * ⚠️ `backdrop-filter` KHÔNG được đặt lên chính .giay-header. Bất kỳ phần tử
 * nào mang filter/backdrop-filter/transform đều trở thành khối chứa của mọi
 * con `position: fixed` bên trong nó — và lớp phủ menu điện thoại của block
 * Navigation là một phần tử fixed nằm trong header. Đặt blur lên header thì
 * lớp phủ bị nhốt trong dải cao 60px của header: bấm nút ba gạch xong chỉ
 * thấy một mẩu menu tràn ra ngoài nền trang. Vì thế blur nằm ở ::before.
 */
.giay-header {
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
}

.giay-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--bg) 88%, transparent);
	backdrop-filter: blur(14px);
	pointer-events: none;
}

/* Chiều cao đầu trang phải khớp với --wp--custom--header-h, vì mọi thứ dính
   theo cuộn (nhãn tháng, làn ghi chú, hai cột lề màn đọc) đều lấy mốc từ đó. */
.giay-header__inner {
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
	min-height: 40px;
}

.giay-header__brand a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
	letter-spacing: 0.02em;
	font-size: 1.125rem;
}

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

.giay-header__right { gap: var(--wp--preset--spacing--30); align-items: center; }

.giay-header__nav a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
	padding: 6px 0;
}

.giay-header__nav a:hover,
.giay-header__nav .current-menu-item > a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.giay-page__title,
.giay-about__title {
	text-wrap: balance;
	letter-spacing: -0.035em;
}

.giay-about__title { font-size: clamp(2.75rem, 2rem + 3vw, 3.5rem) !important; }

/* ---------- Tìm kiếm ---------------------------------------------------- */
.giay-search__open,
.giay-theme__btn {
	appearance: none;
	background: transparent;
	border: var(--giay-row) solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	line-height: 1;
	padding: 10px 12px;
	min-height: 38px;
	cursor: pointer;
	border-radius: var(--giay-radius-sm);
	transition: color var(--giay-dur), border-color var(--giay-dur);
}

.giay-search__open:hover,
.giay-theme__btn:hover {
	color: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--text);
}

.giay-search__open {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 176px;
	justify-content: space-between;
	text-align: left;
}

/* ---------- Menu điện thoại ---------------------------------------------
 * Block Navigation tự lo phần đóng/mở; ở đây chỉ dựng lại hình dáng cho
 * đúng hệ — lõi mặc định là nền trắng chữ đen, sai cả ở chế độ tối.
 */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: grid;
	place-items: center;
	width: var(--wp--custom--tap);
	height: var(--wp--custom--tap);
	padding: 0;
	border: var(--giay-row) solid var(--wp--preset--color--rule);
	border-radius: var(--giay-radius-sm);
	background: transparent;
	color: var(--wp--preset--color--text);
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover {
	border-color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--accent-tint);
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--30) var(--wp--custom--gutter-mobile)
		var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--text);
	/* Mọi lớp bên trong lớp phủ đều `gap: inherit`, nên đặt ở đây là đặt cho
	   cả cây — cách duy nhất thắng được chuỗi chọn lọc dài của block lõi mà
	   không phải viết lại nguyên chuỗi đó. */
	gap: 0;
}

/* Nút đóng đứng đúng chỗ nút ba gạch vừa bấm — mắt không phải đi tìm. */
.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0;
	right: 0;
}

/* Danh sách bắt đầu dưới một đường kẻ ngang bằng chiều cao đầu trang, để
   lớp phủ trông như đầu trang mở rộng xuống chứ không như một trang khác. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--giay-row) solid var(--wp--preset--color--rule);
}

/* Đầu trang dính đang ở lớp 20, thấp hơn thanh công cụ dưới cùng (25) và
   vạch tiến độ (30) — mà lớp phủ menu là con của đầu trang. Khi menu mở thì
   đẩy đầu trang lên trên và cất mấy thứ nổi kia đi. */
html.has-modal-open .giay-header { z-index: 60; }

html.has-modal-open .giay-tocbtn,
html.has-modal-open .giay-progress,
html.has-modal-open .giay-resume { display: none; }

.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
}

.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var(--wp--custom--tap);
	padding: 10px 0;
	font-size: var(--wp--preset--font-size--title-s);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--text);
}

.is-menu-open .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

/* Số thứ tự nhỏ bên trái, cùng ngôn ngữ với số mục № ở trang danh sách. */
.is-menu-open .wp-block-navigation__container { counter-reset: giay-menu; }

.is-menu-open .wp-block-navigation-item__content::before {
	counter-increment: giay-menu;
	content: counter(giay-menu, decimal-leading-zero);
	width: 34px;
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}

.giay-search__kbd {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	border: var(--giay-row) solid var(--wp--preset--color--rule);
	padding: 2px 6px;
}

.giay-search__dialog {
	width: min(600px, calc(100vw - 24px));
	max-height: 76vh;
	padding: 0;
	border: var(--giay-rule) solid var(--wp--preset--color--text);
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--text);
	margin-top: 10vh;
}

.giay-search__dialog::backdrop { background: rgb(32 30 29 / 55%); }

.giay-search__form { display: flex; flex-direction: column; max-height: 76vh; }

.giay-search__input {
	appearance: none;
	border: 0;
	border-bottom: var(--giay-rule) solid var(--wp--preset--color--text);
	background: transparent;
	color: inherit;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 500;
	padding: 18px 20px;
	width: 100%;
}

.giay-search__input:focus-visible { outline-offset: -3px; }

.giay-search__facets {
	padding: 12px 20px;
	border-bottom: var(--giay-row) solid var(--wp--preset--color--rule);
}

.giay-search__facetlabel {
	font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted);
	margin: 0 0 8px;
	font-weight: 700;
}

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

.giay-search__chip {
	appearance: none;
	border: var(--giay-row) solid var(--wp--preset--color--rule);
	background: transparent;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	padding: 5px 9px;
	cursor: pointer;
}

.giay-search__chip[aria-pressed='true'] {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
}

.giay-search__count,
.giay-search__hint {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
	margin: 0;
	padding: 10px 20px;
}

.giay-search__hint {
	border-top: var(--giay-row) solid var(--wp--preset--color--rule);
	font-family: var(--wp--preset--font-family--mono);
}

.giay-search__results { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }

.giay-search__results a {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 10px;
	align-items: baseline;
	padding: 11px 20px;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	border-left: 3px solid transparent;
}

.giay-search__results li.is-active a,
.giay-search__results a:hover {
	background: var(--wp--preset--color--surface);
	border-left-color: var(--wp--preset--color--accent);
	text-decoration: none;
}

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

.giay-search__meta {
	grid-column: 2;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
}

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

.giay-search__fallback input {
	border: var(--giay-row) solid var(--wp--preset--color--rule);
	background: transparent;
	color: inherit;
	padding: 9px 12px;
}

/* ---------- Tag --------------------------------------------------------- */
.giay-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: var(--giay-row) solid var(--wp--preset--color--rule);
	padding: 5px 9px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

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

.giay-tag.is-on {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
}

.giay-tag__count { font-family: var(--wp--preset--font-family--mono); font-size: 10px; opacity: 0.7; }

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

/* Xem chú thích ở .giay-lanes__list li — cùng một khoảng thừa đường cơ sở. */
.giay-tagfilter__list li,
.giay-tags__list li { display: flex; }

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

.giay-tagfilter__clear { margin: var(--wp--preset--spacing--30) 0 0; font-size: var(--wp--preset--font-size--meta); }

.giay-arrow { margin-left: 4px; vertical-align: baseline; opacity: 0.7; }

/* ---------- Thư định kỳ -------------------------------------------------- */
.giay-letter {
	border: var(--giay-rule) solid var(--wp--preset--color--text);
	padding: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--70);
}

.giay-letter--compact {
	border-width: var(--giay-row) 0;
	padding: var(--wp--preset--spacing--50) 0;
}

.giay-letter__title { font-size: var(--wp--preset--font-size--title-m); margin: 0 0 8px; }

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

.giay-letter__form { display: flex; flex-wrap: wrap; gap: 8px; }

.giay-letter__input {
	flex: 1 1 240px;
	appearance: none;
	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-letter__trap, .giay-comment__trap {
	position: absolute !important;
	left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden;
}

.giay-letter__status {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--muted);
	min-height: 1.4em;
}

.giay-letter__status.is-error { color: var(--wp--preset--color--accent); font-weight: 500; }

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

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

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

.giay-issues__when { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--muted); }
.giay-issues__title { color: var(--wp--preset--color--text); text-decoration: none; font-weight: 500; }
.giay-issues__title:hover { color: var(--wp--preset--color--accent); }
.giay-issues__go { font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--muted); }

/* ---------- Chân trang --------------------------------------------------
 * Một dòng: tên blog bên trái, hai đường dẫn bên phải. Menu đầu trang đã
 * mang Ghi chú · Chủ đề · Chuỗi · Lưu trữ · Về tôi rồi, nên ở đây chỉ để
 * những thứ không có ở trên.
 */
.giay-footer {
	border-top: var(--giay-row) solid var(--wp--preset--color--rule);
}

.giay-footer__inner {
	gap: var(--wp--preset--spacing--40);
	width: 100%;
}

.giay-footer__brand .wp-block-site-title { margin: 0 0 2px; }

.giay-footer__brand .wp-block-site-title a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.giay-footer__brand .wp-block-site-title a:hover { color: var(--wp--preset--color--accent); }
.giay-footer__brand .wp-block-site-tagline { margin: 0; }

.giay-footer__links { display: flex; gap: var(--wp--preset--spacing--40); margin: 0; }

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

.giay-footer__links a:hover { color: var(--wp--preset--color--accent); }

@media (max-width: 600px) {
	.giay-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Nhắc lỗi alt, chỉ người đăng nhập thấy ---------------------- */
.giay-alt-warning {
	display: inline-block;
	position: absolute;
	inset: auto 10px 10px;
	z-index: 2;
	margin: 0;
	padding: 7px 10px;
	border: var(--giay-row) solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	border-radius: var(--giay-radius-sm);
	background: color-mix(in srgb, var(--wp--preset--color--bg) 92%, transparent);
	backdrop-filter: blur(10px);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--text);
	box-shadow: 0 6px 24px rgb(29 25 22 / 12%);
}

/* ---------- Điện thoại --------------------------------------------------- */
@media (max-width: 781px) {
	body {
		--wp--custom--gutter-desktop: var(--wp--custom--gutter-mobile);
		/* Vùng bấm 44px làm hàng đầu trang cao hơn 4px so với máy tính. */
		--wp--custom--header-h: 68px;
	}

	.giay-header__inner { gap: 10px; flex-wrap: nowrap; min-height: var(--wp--custom--tap); }
	.giay-header__right { gap: 6px; flex-wrap: nowrap; }
	.giay-header__brand a { font-size: 1rem; }
	.giay-search__open { min-width: 0; }
	.giay-search__placeholder { display: none; }
	.giay-letter { padding: var(--wp--preset--spacing--50); }

	/* Vùng bấm tối thiểu 44px trên điện thoại. */
	.giay-btn, .giay-theme__btn, .giay-search__open {
		min-height: var(--wp--custom--tap);
	}

	.giay-btn { padding: 10px 14px; }
}