/*
Theme Name: Coloring Theme
Description: Theme cho coloring collections. Layout, gallery, modal tải file và accessibility. Không chứa schema DB hay logic import — những thứ đó thuộc plugin coloring-core.
Version: 0.5.3
Requires at least: 6.5
Requires PHP: 8.2
Text Domain: coloring-theme
*/

/*
 * Ý tưởng: tranh tô màu là nét đen trên giấy trắng, màu là việc của người dùng.
 * Nên artwork giữ trắng tinh, còn chrome dùng một bộ "bút màu" có chức năng rõ:
 * đỏ = tải, xanh = điều hướng, lục = xác nhận, vàng = hướng dẫn in.
 *
 * Đường gạch đứt quanh card là ranh giới vùng in, mang thông tin chứ không trang trí.
 */

:root {
	--paper: #ffffff;
	--wash: #e7eaf3;
	--wash-deep: #d5daea;
	--ink: #26235c;
	--ink-soft: #565490;
	--crayon-red: #d7263d;
	--crayon-red-dark: #a91c2e;
	/* #2274a5 cũ chỉ đạt 4,25:1 trên --wash (audit 09/10/2026); bản này ≥4,5:1 trên paper, wash, wash-deep, fox-cream. */
	--crayon-blue: #1c6592;
	--crayon-green: #3f8f5b;
	--crayon-yellow: #f5b700;
	/* Màu của linh vật cáo (image-test/logo.svg) — chỉ dùng điểm xuyết quanh thương hiệu. */
	--fox: #e47025;
	--fox-cream: #fdf4e3;

	/* Fredoka: tròn và đủ dày để làm chữ rỗng kiểu tranh tô màu; Quicksand quá mảnh. */
	--font-display: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;
	--font-body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

	--step-0: 1rem;
	--step-1: 1.1875rem;
	--step-2: 1.4375rem;
	--step-3: 1.75rem;
	--step-4: 2.25rem;
	--step-5: clamp(2.25rem, 1.6rem + 2.4vw, 3rem);

	--space-1: 0.375rem;
	--space-2: 0.75rem;
	--space-3: 1.25rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4.5rem;

	--measure: 68ch;
	--shell: 74rem;
	--radius: 10px;
	--trim: 1.5px dashed var(--wash-deep);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--wash);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.6;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
	text-wrap: pretty;
}

h1 {
	font-size: var(--step-5);
}

h2 {
	font-size: var(--step-3);
}

h3 {
	font-size: var(--step-1);
}

p {
	margin: 0 0 var(--space-3);
	max-width: var(--measure);
}

a {
	color: var(--crayon-blue);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--ink);
}

:where(a, button, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--crayon-blue);
	outline-offset: 3px;
	border-radius: 4px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.shell {
	width: min(100% - 2rem, var(--shell));
	margin-inline: auto;
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	left: var(--space-3);
	top: var(--space-3);
	z-index: 50;
	background: var(--paper);
	color: var(--ink);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius);
}

/* -------------------------------------------------- site chrome */

.site-header {
	background: var(--paper);
	border-bottom: 1px solid var(--wash-deep);
	padding-block: var(--space-2);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	align-items: center;
	justify-content: space-between;
}

.site-title {
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 700;
	margin: 0;
	max-width: none;
}

.site-title a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--ink);
	text-decoration: none;
}

.site-title__badge {
	width: 48px;
	height: 48px;
}

/*
 * Menu: mục đang xem nổi lên thành "phím" giống nút bấm (gờ dưới), các mục khác nằm
 * phẳng trên nền. Trên điện thoại thành các ô đều nhau dưới logo (ba hoặc bốn, tuỳ plugin tô
 * online) — không giấu vào hamburger vì chỉ có vài mục, và không mục nào rớt xuống hàng riêng.
 */
.site-nav {
	display: flex;
	gap: var(--space-1);
	font-family: var(--font-display);
	font-weight: 600;
}

.site-nav a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0 0.875rem;
	border-radius: 999px;
	color: var(--ink);
	text-decoration: none;
	transition: background-color 120ms ease-out;
}

.site-nav__icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	fill: none;
	stroke: var(--ink-soft);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.site-nav a:hover {
	background: var(--wash);
	color: var(--ink);
}

.site-nav a[aria-current] {
	background: var(--wash);
}

.site-nav a[aria-current] .site-nav__icon,
.site-nav a:hover .site-nav__icon {
	stroke: var(--crayon-blue);
}

@media (max-width: 47.99rem) {
	.site-header {
		padding-block: var(--space-2) var(--space-2);
	}

	.site-header__inner {
		gap: var(--space-2);
	}

	.site-title {
		font-size: var(--step-1);
	}

	.site-title__badge {
		width: 40px;
		height: 40px;
	}

	.site-nav {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 4px;
		width: 100%;
		padding: 4px 4px 6px;
		border-radius: 16px;
		background: var(--wash);
		font-size: 0.8125rem;
	}

	.site-nav a {
		flex-direction: column;
		justify-content: center;
		gap: 2px;
		min-height: 52px;
		padding: var(--space-1) 4px;
		border-radius: 12px;
		line-height: 1.15;
		text-align: center;
		text-wrap: balance;
	}

	.site-nav__icon {
		width: 1.25rem;
		height: 1.25rem;
	}

	.site-nav a:hover {
		background: rgb(255 255 255 / 0.55);
	}

	.site-nav a[aria-current] {
		background: var(--paper);
		box-shadow: 0 2px 0 var(--wash-deep);
	}
}

/*
 * Footer là "mặt sau tờ giấy": nền mực chàm, đối lập với trang sáng phía trên, để trang có
 * điểm kết rõ ràng. Link chia nhóm theo việc người dùng cần làm; Privacy/Terms xuống dòng cuối.
 */
.site-footer {
	--footer-text: #cfcdef;
	--footer-link: #ffffff;
	--footer-rule: rgb(255 255 255 / 0.18);

	margin-top: var(--space-6);
	background: var(--ink);
	padding-block: var(--space-5) var(--space-4);
	font-size: 0.9375rem;
	color: var(--footer-text);
}

.site-footer a {
	color: var(--footer-link);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--footer-link);
	text-decoration: underline;
	text-decoration-color: var(--crayon-yellow);
	text-decoration-thickness: 2px;
}

/* Viền xanh mặc định chìm trên nền chàm. */
.site-footer a:focus-visible {
	outline-color: var(--crayon-yellow);
}

.site-footer__inner {
	display: grid;
	gap: var(--space-4);
}

.site-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 700;
	line-height: 1.1;
}

.site-footer a.site-footer__brand:hover {
	text-decoration: none;
}

.site-footer__brand img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.site-footer__tagline {
	margin: var(--space-2) 0 0;
	max-width: 32ch;
}

/*
 * Hàng icon mạng xã hội: vòng tròn viền mảnh trên nền chàm, icon trắng. Hover/focus thì
 * vòng thành giấy trắng và icon lấy màu thương hiệu, như một vết tô vào ô trống.
 */
/* Hai class: .site-footer__heading (margin 0) nằm phía dưới file và sẽ đè một class đơn. */
.site-footer__heading.site-footer__social-heading {
	margin-top: var(--space-4);
}

.site-footer ul.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.site-footer__social-link {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--footer-rule);
	border-radius: 50%;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.site-footer a.site-footer__social-link:hover,
.site-footer a.site-footer__social-link:focus-visible {
	background: var(--paper);
	border-color: var(--paper);
	text-decoration: none;
}

.site-footer a.site-footer__social-link--youtube:hover,
.site-footer a.site-footer__social-link--youtube:focus-visible {
	color: #ff0000;
}

.site-footer a.site-footer__social-link--pinterest:hover,
.site-footer a.site-footer__social-link--pinterest:focus-visible {
	color: #e60023;
}

.site-footer a.site-footer__social-link--facebook:hover,
.site-footer a.site-footer__social-link--facebook:focus-visible {
	color: #0866ff;
}

.site-footer__social-link svg {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.site-footer__social-link {
		transition: none;
	}
}

.site-footer__nav {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: var(--space-4) var(--space-3);
}

.site-footer__heading {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-size: var(--step-0);
	font-weight: 600;
	color: var(--fox-cream);
}

.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__group ul {
	line-height: 1.4;
}

.site-footer__group li + li {
	margin-top: var(--space-1);
}

/* Vùng bấm đủ cao cho ngón tay mà không nới khoảng cách giữa các dòng. */
.site-footer__group a,
.site-footer__policies a {
	display: inline-block;
	padding-block: 0.125rem;
}

.site-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid var(--footer-rule);
	font-size: 0.875rem;
}

.site-footer__legal {
	margin: 0;
}

.site-footer__policies {
	display: flex;
	gap: var(--space-3);
}

@media (min-width: 52rem) {
	.site-footer__inner {
		grid-template-columns: minmax(16rem, 1fr) 2fr;
		column-gap: var(--space-5);
	}

	.site-footer__nav {
		grid-template-columns: repeat(3, 1fr);
	}

	.site-footer__base {
		grid-column: 1 / -1;
		margin-top: var(--space-2);
	}
}

/* -------------------------------------------------- collection head */

.collection {
	padding-block: var(--space-4) var(--space-5);
}

/*
 * Breadcrumb: mũi tên nhỏ thay dấu "/" và đi liền với mục phía sau nên không bao giờ
 * đứng lẻ đầu dòng. Trên điện thoại chỉ còn link về trang cha — H1 ngay dưới đã là
 * tên trang hiện tại, lặp lại chỉ làm gãy dòng.
 */
.breadcrumb {
	font-size: 0.9375rem;
	color: var(--ink-soft);
	margin-bottom: var(--space-3);
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: var(--space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.breadcrumb li {
	display: inline-flex;
	align-items: center;
}

.breadcrumb li + li::before,
.breadcrumb li:nth-last-child(2)::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-inline: 0.375rem;
	background: var(--wash-deep);
	-webkit-mask: var(--chevron) center / contain no-repeat;
	mask: var(--chevron) center / contain no-repeat;
}

.breadcrumb {
	--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* Mục đầu tiên không có mũi tên phía trước (ô trên cũng khớp khi chỉ có 2 mục). */
.breadcrumb li:first-child::before {
	content: none;
}

.breadcrumb a {
	color: var(--ink-soft);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--crayon-blue);
	text-decoration: underline;
}

.breadcrumb [aria-current] {
	color: var(--ink);
	font-weight: 500;
}

@media (max-width: 39.99rem) {
	.breadcrumb li {
		display: none;
	}

	.breadcrumb li:nth-last-child(2) {
		display: inline-flex;
	}

	.breadcrumb li:nth-last-child(2)::before {
		content: "";
		margin: 0 0.25rem 0 -0.125rem;
		background: var(--ink-soft);
		transform: scaleX(-1);
	}

	.breadcrumb a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		font-family: var(--font-display);
		font-weight: 600;
		color: var(--ink);
	}

	.breadcrumb li:nth-last-child(2):hover::before {
		background: var(--crayon-blue);
	}

	.breadcrumb {
		margin-block: calc(-1 * var(--space-2)) var(--space-2);
	}
}

.collection__meta {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--ink-soft);
	margin-block: var(--space-2) var(--space-3);
}

.collection__intro {
	font-size: var(--step-1);
	max-width: var(--measure);
}

/*
 * Hàng hero (spec 2026-10-19-collection-groups-banner, bản mẫu v4): banner trước/sau bên trái,
 * giới thiệu + "On this page" bên phải. Dưới 56rem xếp chồng. Không có banner thì một cột chữ.
 */
.collection__hero {
	display: grid;
	/* minmax(0, 1fr): cột auto giãn theo dải link nowrap trên điện thoại và làm trang tràn ngang (đo 19/10/2026). */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	align-items: start;
	margin-top: var(--space-3);
}

@media (min-width: 56rem) {
	.collection__hero.has-banner {
		grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
		column-gap: 2.5rem;
	}
}

.collection__banner {
	margin: 0;
}

.collection__banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.collection__hero-text .collection__intro {
	font-size: 1.05rem;
	line-height: 1.7;
	text-wrap: pretty;
}

.collection__toc-label {
	margin: var(--space-3) 0 var(--space-1);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* Nhóm tranh: H2 + số tranh + đoạn mô tả; kẻ mảnh giữa các nhóm, nhóm đầu không kẻ. */
/* Nhóm bị bộ lọc ẩn không tính: nhóm hiện đầu tiên không có kẻ (review 19/10/2026). */
.sheet-group:not([hidden]) ~ .sheet-group:not([hidden]) {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--wash-deep);
}

.sheet-group__head {
	max-width: 44rem;
	margin: 0 0 var(--space-3);
}

.sheet-group__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0 0 var(--space-1);
}

.sheet-group__count {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ink-soft);
	white-space: nowrap;
}

.sheet-group__desc {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.65;
	text-wrap: pretty;
}

.collection__hero .jump-links {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.jump-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	padding: var(--space-3) 0 0;
	margin: 0;
	list-style: none;
	border-top: var(--trim);
	margin-top: var(--space-4);
}

.notice {
	background: var(--paper);
	border-left: 4px solid var(--crayon-yellow);
	padding: var(--space-3);
	border-radius: 0 var(--radius) var(--radius) 0;
	margin-bottom: var(--space-4);
}

.notice p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------- gallery */

.gallery {
	margin-top: var(--space-4);
}

.gallery__grid {
	display: grid;
	/* Số cột theo chiều rộng thật, không theo loại thiết bị. */
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--space-4) var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sheet {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	/* Card cao bằng nhau trong hàng, nút luôn nằm đáy — caption dài ngắn khác nhau
	   không được làm lệch nhịp lưới. */
	height: 100%;
	/* Mở từ link #<asset_key> (pin Pinterest): chừa một khoảng phía trên tranh. */
	scroll-margin-top: var(--space-3);
}

/*
 * Hai nút trong card chia nhau hết bề ngang tờ giấy phía trên; card hẹp quá thì
 * xuống dòng thay vì ép chữ. Icon vẽ bằng mask để theo currentColor, không cần sửa
 * markup (nút Color online do plugin in ra).
 */
.sheet__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding-bottom: 3px; /* chỗ cho gờ của nút */
}

.sheet__actions .button {
	flex: 1 1 auto;
	gap: 0.4rem;
	padding: 0.5rem 0.875rem;
	font-size: 0.9375rem;
}

.sheet__open-modal::before,
.sheet__color-online::before {
	content: "";
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.sheet__open-modal {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11M7.5 10l4.5 4.5 4.5-4.5M4.5 16.5v1.5a2.5 2.5 0 0 0 2.5 2.5h10a2.5 2.5 0 0 0 2.5-2.5v-1.5'/%3E%3C/svg%3E");
}

.sheet__color-online {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 4.5l4 4L9 19l-5 1 1-5z'/%3E%3Cpath d='M13 7l4 4'/%3E%3C/svg%3E");
}

.sheet__color-online::before {
	background: var(--crayon-blue);
}

.sheet__paper {
	background: var(--paper);
	border: var(--trim);
	border-radius: var(--radius);
	padding: var(--space-2);
}

.sheet__paper img {
	width: 100%;
	aspect-ratio: 85 / 110;
	object-fit: contain;
	background: var(--paper);
}

.sheet__title {
	font-family: var(--font-display);
	font-size: var(--step-0);
	font-weight: 600;
	margin: 0;
}

/* Card collection (hub, trang chủ): tên là chữ mực, chỉ thành link xanh khi rê chuột. */
.sheet__title a {
	color: var(--ink);
	text-decoration: none;
}

.sheet__title a:hover,
.sheet:hover .sheet__title a {
	color: var(--crayon-blue);
	text-decoration: underline;
}

.sheet__caption {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

/* Day nut xuong day card. Dat SAU khai bao margin: 0 o tren, neu khong no bi ghi de.
 * Chi phan tu CUOI truoc nut duoc margin auto: title chi khi khong co caption. Truoc day
 * `.sheet__title:last-of-type` luon khop (moi card mot h3), title va caption chia nhau
 * khoang trong nen caption 2 dong bi troi xuong, lech hang voi caption 3 dong. */
.sheet__caption,
.sheet__title:not(:has(+ .sheet__caption)) {
	margin-bottom: auto;
}

.sheet:hover .sheet__paper,
.sheet:focus-within .sheet__paper {
	border-style: solid;
	border-color: var(--ink-soft);
}

/*
 * Tranh được trỏ tới bằng #<asset_key> (link pin Pinterest): trên lưới nhiều cột người
 * xem phải thấy ngay tranh mình vừa bấm. Viền liền + vòng đỏ bằng box-shadow (không đổi
 * layout), giữ nguyên suốt lúc ở trên trang. Nhấp nháy và làm mờ tranh khác nằm ở phần
 * motion. Đặt sau :hover để rê chuột không đổi màu viền.
 */
.sheet:target .sheet__paper {
	border-style: solid;
	border-color: var(--crayon-red);
	box-shadow: 0 0 0 3px var(--crayon-red), 0 0 0 9px rgb(215 38 61 / 0.18);
}

/* -------------------------------------------------- buttons */

/*
 * Nút như phím bấm: gờ màu đậm bên dưới (box-shadow không làm đổi layout), rê chuột
 * thì nhô lên, bấm thì lún xuống sát gờ. Màu vẫn theo quy ước bút sáp ở đầu file.
 */
.button {
	--lip: var(--crayon-red-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	border: none;
	border-radius: 999px;
	background: var(--crayon-red);
	color: var(--paper);
	box-shadow: 0 3px 0 var(--lip);
	font-family: var(--font-display);
	font-size: var(--step-0);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform 120ms ease-out,
		box-shadow 120ms ease-out,
		background-color 120ms ease-out,
		border-color 120ms ease-out;
}

.button:hover {
	background: var(--crayon-red-dark);
	color: var(--paper);
	--lip: #7f1522;
	transform: translateY(-1px);
	box-shadow: 0 4px 0 var(--lip);
}

.button:active {
	transform: translateY(3px);
	box-shadow: 0 0 0 var(--lip);
}

.button--quiet {
	--lip: var(--wash-deep);
	background: var(--paper);
	color: var(--ink);
	border: 1.5px solid var(--wash-deep);
}

.button--quiet:hover {
	--lip: var(--crayon-blue);
	background: var(--paper);
	color: var(--ink);
	border-color: var(--crayon-blue);
}

@media (prefers-reduced-motion: reduce) {
	.button {
		transition: none;
	}

	.button:hover,
	.button:active {
		transform: none;
	}
}

/* Fallback không cần JS: <details> mở ra danh sách link tải thật. */
.sheet__fallback {
	font-size: 0.9375rem;
}

.sheet__fallback summary {
	cursor: pointer;
	color: var(--crayon-blue);
}

.sheet__fallback ul {
	list-style: none;
	margin: var(--space-2) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* JS bật thì ẩn fallback và hiện nút modal. */
.js .sheet__fallback {
	display: none;
}

.no-js .sheet__open-modal {
	display: none;
}

/* -------------------------------------------------- modal */

.modal {
	border: none;
	padding: 0;
	max-width: min(32rem, calc(100vw - 2rem));
	width: 100%;
	background: var(--paper);
	color: var(--ink);
	border-radius: var(--radius);
}

.modal::backdrop {
	background: rgb(38 35 92 / 0.55);
}

.modal__inner {
	padding: var(--space-4) var(--space-3) var(--space-3);
}

.modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.modal__title {
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 700;
	margin: 0;
}

.modal__close {
	flex-shrink: 0;
	min-width: 44px;
	min-height: 44px;
	border: 1.5px solid var(--wash-deep);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	font-size: var(--step-1);
	line-height: 1;
	cursor: pointer;
}

/*
 * Chỗ dồn sự mạnh tay: hai khổ giấy vẽ đúng tỷ lệ thật, nên người dùng THẤY được
 * Letter thấp và rộng hơn A4 thay vì chỉ đọc chữ.
 */
.papers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.paper-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-2);
	border: var(--trim);
	border-radius: var(--radius);
}

.paper-option__shape {
	width: 100%;
	max-width: 5.5rem;
	border: 1.5px solid var(--ink-soft);
	border-radius: 3px;
	background: var(--paper);
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--ink-soft);
}

.paper-option__note {
	font-size: 0.875rem;
	color: var(--ink-soft);
	margin: 0;
}

.paper-option__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.paper-option__links .button {
	width: 100%;
}

.paper-option__size {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 0.8125rem;
	opacity: 0.85;
}

/* -------------------------------------------------- prose sections */

.section {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: var(--trim);
}

.section > h2 {
	margin-bottom: var(--space-3);
}

.printing {
	background: var(--paper);
	border-left: 4px solid var(--crayon-yellow);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: var(--space-3);
}

.printing p:last-child {
	margin-bottom: 0;
}

.ideas {
	margin: 0;
	padding-left: 1.25rem;
	max-width: var(--measure);
}

.ideas li {
	margin-bottom: var(--space-2);
}

.faq dt {
	font-family: var(--font-display);
	font-weight: 700;
	margin-top: var(--space-3);
}

.faq dd {
	margin: var(--space-1) 0 0;
	max-width: var(--measure);
}

/* Video tô màu (YouTube Shorts, dọc 9:16). Ảnh bìa + nút; modal.js đổi thành iframe khi bấm. */
.videos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 15rem));
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.video {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--ink);
}

.video img,
.video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4rem;
	height: 4rem;
	margin: -2rem 0 0 -2rem;
	border-radius: 50%;
	background: var(--crayon-red);
	box-shadow: 0 2px 10px rgb(0 0 0 / 0.35);
	transition: transform 0.15s ease;
}

.video__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.75rem 0 0.75rem 1.2rem;
	border-color: transparent transparent transparent var(--paper);
}

.video:hover .video__play,
.video:focus-visible .video__play {
	transform: scale(1.08);
}

.video:focus-visible {
	outline: 3px solid var(--crayon-blue);
	outline-offset: 3px;
}

.video__title {
	margin: var(--space-2) 0 0;
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.3;
}

.video__online {
	margin: var(--space-1) 0 0;
	font-size: 0.9375rem;
}

@media (max-width: 39.99rem) {
	.videos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.video__play {
		transition: none;
	}
}

.related__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 64rem) {
	.related__grid {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	}
}

.related__card {
	min-width: 0;
}

.related__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--space-2);
	background: var(--paper);
	border: var(--trim);
	border-radius: var(--radius);
	color: var(--ink);
	text-decoration: none;
}

.related__link:hover,
.related__link:focus-visible {
	border-style: solid;
	border-color: var(--ink-soft);
	box-shadow: 0 8px 24px rgb(38 35 92 / 0.1);
}

.related__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(11rem, 18vw, 12rem);
	padding: var(--space-2);
	border-radius: calc(var(--radius) - 3px);
	background: var(--wash);
}

.related__media img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	background: var(--paper);
	box-shadow: 0 2px 8px rgb(38 35 92 / 0.14);
}

.related__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-1) var(--space-1);
}

.related__title {
	font-family: var(--font-display);
	font-size: var(--step-0);
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.related__link:hover .related__title,
.related__link:focus-visible .related__title {
	color: var(--crayon-blue);
	text-decoration: underline;
}

.related__count {
	display: block;
	margin-top: auto;
	font-size: 0.875rem;
	color: var(--ink-soft);
}

@media (max-width: 23rem) {
	.related__grid {
		grid-template-columns: 1fr;
	}

	.related__link {
		flex-direction: row;
		align-items: center;
		gap: var(--space-2);
	}

	.related__media {
		flex: 0 0 6.5rem;
		height: 8rem;
		padding: var(--space-1);
	}

	.related__body {
		align-self: stretch;
		padding: var(--space-1) 0;
	}
}

/*
 * Vị trí quảng cáo: khi tắt thì KHÔNG để lại khoảng trắng lớn vô nghĩa.
 * Chỉ khi bật mới dành đúng kích thước theo format.
 */
.ad-slot {
	display: none;
}

.ad-slot.is-enabled {
	display: block;
	margin-block: var(--space-4);
	min-height: var(--ad-height, 90px);
}

/* -------------------------------------------------- hub + fallback pages */

/* Hub chia nhóm theo mùa: mỗi nhóm một h2, danh sách ngay dưới. */
.hub__group {
	margin-top: var(--space-5);
}

.hub__group-title {
	margin: 0;
	font-family: var(--font-display);
}

.hub__group .hub__list {
	margin-top: var(--space-3);
}

.hub__list {
	display: grid;
	/* Điện thoại: hai cột (tranh dọc vẫn nhận ra được ở ~160px); từ ~36rem trở lên theo 16rem. */
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, calc(50% - var(--space-3) / 2)), 1fr));
	gap: var(--space-3);
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
}

.empty-state {
	background: var(--paper);
	border: var(--trim);
	border-radius: var(--radius);
	padding: var(--space-4);
	margin-top: var(--space-4);
}

.empty-state h2 {
	margin-bottom: var(--space-2);
}

/* -------------------------------------------------- home */

.hero {
	padding-block: var(--space-4) 0;
}

.hero__sheet {
	display: grid;
	gap: var(--space-4);
	align-items: center;
	background: var(--paper);
	border: var(--trim);
	border-radius: var(--radius);
	padding: clamp(var(--space-3), 4vw, var(--space-5));
}

@media (min-width: 52rem) {
	.hero__sheet:has(.hero__mascot) {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}
}

.hero__title {
	font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);
	line-height: 1.02;
	letter-spacing: 0;
	max-width: 13ch;
	margin-bottom: var(--space-3);
}

/*
 * Chỗ dồn sự mạnh tay duy nhất của trang chủ: tiêu đề là chữ rỗng như trên tranh tô màu,
 * được tô bút sáp một lần khi tải trang (xem phần motion). Nét viền giữ chữ đọc được
 * trên mọi màu tô, kể cả vàng.
 */
.outline-type {
	color: var(--paper);
	-webkit-text-stroke: 0.1em var(--ink);
	paint-order: stroke fill;
}

/*
 * Fredoka là variable font: thân chữ n, p, g, r... là contour riêng chồng lên phần bụng.
 * text-stroke viền từng contour, nên khi ruột chữ trong suốt (để lộ gradient) các đường
 * viền bên trong lộ ra. Vì vậy tách hai lớp: viền nằm ở ::before của thẻ cha (ruột giấy
 * che mất đường viền trong), chữ gradient không viền nằm đè lên trên.
 * ::before phải ở thẻ cha dạng block để xuống dòng y hệt span; nằm trên span inline nhiều
 * dòng thì containing block chỉ rộng bằng dòng cuối.
 */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	[data-outline-text] {
		position: relative;
		isolation: isolate;
	}

	[data-outline-text]::before {
		content: attr(data-outline-text);
		content: attr(data-outline-text) / "";
		position: absolute;
		inset: 0;
		z-index: -1;
		color: var(--paper);
		-webkit-text-stroke: 0.1em var(--ink);
		paint-order: stroke fill;
		pointer-events: none;
		user-select: none;
	}

	.outline-type {
		-webkit-text-stroke: 0;
		color: transparent;
		background-image: linear-gradient(
			100deg,
			var(--crayon-yellow) 0 26%,
			var(--crayon-red) 26% 50%,
			var(--crayon-blue) 50% 76%,
			var(--crayon-green) 76% 100%
		);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}
}

.hero__lede {
	font-size: var(--step-1);
	max-width: 44ch;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
}

/* Linh vật cáo: đứng trên một "vũng nắng" màu kem, không khung — hero là trang giấy, cáo
   là người giới thiệu, không phải một trang tô màu. */
.hero__mascot {
	justify-self: center;
	/* Màn hẹp: cáo nhỏ lại để hàng collection đầu tiên vẫn ló lên gần màn hình đầu. */
	width: min(55vw, 22rem);
	aspect-ratio: 360 / 346;
	padding: var(--space-3);
	background: radial-gradient(closest-side, var(--fox-cream) 0 72%, transparent 100%);
}

/* Dải chủ đề: lối tắt ngay dưới hero tới từng nhóm trên hub. */
.home-themes {
	margin-top: var(--space-5);
}

.home-themes__title {
	margin-bottom: var(--space-3);
}

/*
 * Lưới ô chủ đề: điện thoại 2 cột, rộng dần thì thêm cột. Mỗi ô là một xấp giấy nhỏ
 * cạnh tên chủ đề; tờ sau nghiêng, lấy màu bút sáp xoay vòng theo thứ tự ô khi chủ đề
 * chỉ có một collection. Rê chuột thì xấp giấy xoè ra.
 */
.theme-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40rem) {
	.theme-grid {
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
		gap: var(--space-3);
	}
}

.theme-grid > li {
	container-type: inline-size;
}

.theme-grid > li:nth-child(5n + 1) {
	--tile-accent: var(--crayon-red);
}

.theme-grid > li:nth-child(5n + 2) {
	--tile-accent: var(--crayon-blue);
}

.theme-grid > li:nth-child(5n + 3) {
	--tile-accent: var(--crayon-green);
}

.theme-grid > li:nth-child(5n + 4) {
	--tile-accent: var(--crayon-yellow);
}

.theme-grid > li:nth-child(5n + 5) {
	--tile-accent: var(--fox);
}

.theme-tile {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	height: 100%;
	padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
	border: 1.5px solid var(--wash-deep);
	border-radius: 16px;
	background: var(--paper);
	box-shadow: 0 3px 0 var(--wash-deep);
	color: var(--ink);
	text-decoration: none;
	transition:
		transform 120ms ease-out,
		box-shadow 120ms ease-out,
		border-color 120ms ease-out;
}

.theme-tile:hover {
	border-color: var(--tile-accent);
	box-shadow: 0 4px 0 var(--tile-accent);
	color: var(--ink);
	transform: translateY(-1px);
}

.theme-tile:active {
	box-shadow: 0 0 0 var(--tile-accent);
	transform: translateY(3px);
}

.theme-tile__stack {
	position: relative;
	flex: none;
	width: 3.25rem;
	height: 4rem;
}

.theme-tile__page {
	position: absolute;
	width: 2.625rem;
	height: auto;
	aspect-ratio: 85 / 110;
	border: 1px solid var(--wash-deep);
	border-radius: 3px;
	background: var(--paper);
	object-fit: cover;
	transition: transform 160ms ease-out;
}

.theme-tile__page--back {
	top: 0;
	right: 0;
	transform: rotate(7deg);
}

span.theme-tile__page--back {
	border-color: transparent;
	background: var(--tile-accent);
}

.theme-tile__page--front {
	bottom: 0;
	left: 0;
	transform: rotate(-4deg);
	box-shadow: 0 1px 3px rgb(38 35 92 / 0.18);
}

.theme-tile:hover .theme-tile__page--back {
	transform: translateX(3px) rotate(12deg);
}

.theme-tile:hover .theme-tile__page--front {
	transform: translateX(-2px) rotate(-7deg);
}

.theme-tile__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.theme-tile__name {
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 600;
	line-height: 1.2;
	overflow-wrap: break-word;
	hyphens: auto;
}

.theme-tile__count {
	font-size: 0.875rem;
	color: var(--ink-soft);
}

@media (max-width: 39.99rem) {
	.theme-tile {
		padding: var(--space-2);
	}

	.theme-tile__name {
		font-size: var(--step-0);
	}

	.theme-tile__count {
		font-size: 0.8125rem;
	}
}

/*
 * Ô hẹp (điện thoại 2 cột, hoặc máy đặt cỡ chữ lớn): xếp dọc — xấp giấy ở trên, chữ dùng hết
 * bề ngang ô. Đo theo bề rộng CỦA Ô và theo em, nên cỡ chữ to thì ô tự chuyển sang dọc sớm hơn.
 * Xếp ngang chỉ chừa ~85px cho chữ, "Halloween" từng gãy giữa từ.
 */
@container (max-width: 14em) {
	.theme-tile {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
		padding: var(--space-3) var(--space-3) var(--space-2);
	}

	.theme-tile__stack {
		margin-left: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.theme-tile,
	.theme-tile__page {
		transition: none;
	}

	.theme-tile:hover,
	.theme-tile:active {
		transform: none;
	}
}

.home-section {
	margin-top: var(--space-6);
}

.home-section > h2 {
	margin-bottom: var(--space-3);
}

.home-section .hub__list {
	margin-top: 0;
}

.home-section__more {
	margin-top: var(--space-3);
	font-family: var(--font-display);
	font-weight: 600;
}

/*
 * Tô online: tờ tranh tô dở nằm trên nền wash, cạnh mấy cây bút sáp cùng hình với hộp màu
 * trong công cụ. Ảnh chụp từ chính công cụ, không phải minh hoạ vẽ riêng.
 */
.home-online {
	display: grid;
	gap: var(--space-4);
	align-items: center;
	background: var(--paper);
	border: var(--trim);
	border-radius: var(--radius);
	padding: clamp(var(--space-3), 4vw, var(--space-5));
}

@media (min-width: 52rem) {
	.home-online {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	}
}

.home-online__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-3);
	background: var(--wash);
	border-radius: var(--radius);
}

.home-online__page {
	width: min(56vw, 19rem);
	height: auto;
	background: var(--paper);
	box-shadow: 0 1px 2px rgb(38 35 92 / 0.12), 0 18px 36px -18px rgb(38 35 92 / 0.4);
}

.home-online__crayons {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 0.55rem;
}

.home-online__crayons span {
	display: block;
	width: clamp(2.25rem, 7vw, 3.25rem);
	height: 1.05rem;
	border-radius: 0 5px 5px 0;
	background:
		linear-gradient(180deg, rgb(255 255 255 / 0.38) 0 16%, transparent 16% 72%, rgb(0 0 0 / 0.08) 72%),
		linear-gradient(90deg, transparent 0 36%, rgb(0 0 0 / 0.16) 36% 39%, transparent 39% 86%, rgb(0 0 0 / 0.16) 86% 89%, transparent 89%),
		var(--crayon);
	clip-path: polygon(0 40%, 7% 30%, 24% 12%, 24% 0, 100% 0, 100% 100%, 24% 100%, 24% 88%, 7% 70%, 0 60%);
}

/* Cây đầu nhô ra như cây đang được chọn trong công cụ. */
.home-online__crayons span:first-child {
	transform: translateX(-0.6rem);
}

.home-online__text > h2 {
	font-size: clamp(var(--step-3), 1rem + 2vw, var(--step-4));
	margin-bottom: var(--space-3);
}

.home-online__points {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ink-soft);
	max-width: 46ch;
}

.home-online__points li {
	position: relative;
	padding-left: 1.5rem;
}

.home-online__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
	background: var(--crayon-blue);
}

.home-online__points li:nth-child(2)::before {
	background: var(--crayon-green);
}

.home-online__points li:nth-child(3)::before {
	background: var(--crayon-red);
}

.home-online__points strong {
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 600;
}

.home-online__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-4) 0 var(--space-2);
}

.home-online__note {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.9375rem;
}

/* Đúng là một chuỗi thao tác nên đánh số. Vàng = hướng dẫn in, như khối .printing. */
.steps {
	counter-reset: step;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Gọn: số nằm bên trái, chữ bên phải — ba bước đọc lướt được trong một nhịp. */
.steps__item {
	counter-increment: step;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--space-3);
	align-items: start;
	background: var(--paper);
	border-radius: var(--radius);
	border-left: 4px solid var(--crayon-yellow);
	padding: var(--space-3);
}

.steps__item::before {
	content: counter(step);
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 2px solid var(--ink);
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 700;
}

.steps__item h3 {
	margin-bottom: var(--space-1);
}

.steps__item p {
	margin: 0;
	color: var(--ink-soft);
}

/* Dải cuối: quyền dùng (thông tin) và đề xuất chủ đề (hành động, viền cam của cáo). */
.home-closing {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--space-3);
}

.home-closing__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	background: var(--paper);
	border: var(--trim);
	border-radius: var(--radius);
	padding: var(--space-4) var(--space-3);
}

.home-closing__card h2 {
	font-size: var(--step-2);
}

.home-closing__card p {
	margin: 0;
	color: var(--ink-soft);
}

.home-closing__card > a:not(.button) {
	margin-top: auto;
	font-family: var(--font-display);
	font-weight: 600;
}

.home-closing__card--request {
	background: var(--fox-cream);
	border: 1.5px solid var(--fox);
}

.home-closing__card--request .button {
	margin-top: auto;
}

/* -------------------------------------------------- static pages */

.page-sheet {
	background: var(--paper);
	border: var(--trim);
	border-radius: var(--radius);
	padding: clamp(var(--space-3), 4vw, var(--space-5));
	max-width: 48rem;
}

.page-sheet--narrow {
	max-width: 36rem;
}

.page-sheet > h1 {
	margin-bottom: var(--space-4);
}

.prose {
	line-height: 1.7;
}

.prose > * {
	max-width: var(--measure);
}

.prose h2 {
	font-size: var(--step-2);
	margin: var(--space-4) 0 var(--space-2);
}

.prose h3 {
	margin: var(--space-3) 0 var(--space-1);
}

.prose ul,
.prose ol {
	padding-left: 1.25rem;
	margin: 0 0 var(--space-3);
}

.prose li {
	margin-bottom: var(--space-1);
}

.prose table {
	border-collapse: collapse;
	margin-bottom: var(--space-3);
	font-size: 0.9375rem;
}

.prose th,
.prose td {
	text-align: left;
	padding: var(--space-1) var(--space-3) var(--space-1) 0;
	border-bottom: 1px solid var(--wash-deep);
	vertical-align: top;
}

/* Bảng 3 cột trong bài blog: trên điện thoại cuộn ngang trong khung, không đẩy tràn trang. */
@media (max-width: 40rem) {
	.prose table {
		display: block;
		overflow-x: auto;
	}

	.prose th,
	.prose td {
		min-width: 9rem;
	}
}

/* -------------------------------------------------- blog */

.post-header {
	margin-bottom: var(--space-4);
}

.page-sheet--post .post-header h1 {
	margin-bottom: var(--space-2);
}

.post-header__meta {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

.post-cover {
	margin: 0 0 var(--space-4);
}

.post-cover img {
	width: 100%;
	border-radius: var(--radius);
}

/* Trang tô màu minh hoạ: tranh dọc, nên hẹp và căn giữa, không chiếm hết màn hình. */
.prose figure {
	margin: var(--space-4) auto;
	max-width: 22rem;
}

.prose figure img {
	width: 100%;
	background: var(--paper);
	border: var(--trim);
	border-radius: var(--radius);
}

.prose figure a:hover img {
	border-color: var(--crayon-blue);
}

.prose figcaption {
	margin-top: var(--space-1);
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
	color: var(--ink-soft);
}

.post-list {
	list-style: none;
	padding: 0;
	margin: var(--space-4) 0 0;
	display: grid;
	gap: var(--space-4);
}

.post-card {
	display: grid;
	gap: var(--space-3);
	background: var(--paper);
	border: var(--trim);
	border-radius: var(--radius);
	padding: var(--space-3);
}

@media (min-width: 48rem) {
	.post-card {
		grid-template-columns: 22rem 1fr;
		align-items: start;
	}
}

.post-card__image img {
	width: 100%;
	border-radius: var(--radius);
}

.post-card__title {
	font-size: var(--step-2);
	margin: 0 0 var(--space-1);
}

.post-card__title a {
	color: var(--ink);
	text-decoration: none;
}

.post-card__title a:hover {
	color: var(--crayon-blue);
	text-decoration: underline;
}

.post-card__date {
	margin: 0 0 var(--space-2);
	font-size: 0.875rem;
	color: var(--ink-soft);
}

.post-card__excerpt {
	margin: 0;
}

/* -------------------------------------------------- contact form */

.contact-form {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: var(--trim);
	scroll-margin-top: var(--space-4);
}

.contact-form__pair {
	display: grid;
	gap: var(--space-3);
}

@media (min-width: 40rem) {
	.contact-form__pair {
		grid-template-columns: 1fr 1fr;
	}
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	max-width: none;
}

.contact-form label {
	font-family: var(--font-display);
	font-weight: 600;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
	width: 100%;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	border: 1.5px solid var(--wash-deep);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
}

.contact-form textarea {
	resize: vertical;
	min-height: 9rem;
}

.contact-form :is(input, select, textarea):focus-visible {
	outline: 3px solid var(--crayon-blue);
	outline-offset: 1px;
	border-color: var(--crayon-blue);
}

.contact-form [aria-invalid="true"] {
	border-color: var(--crayon-red);
}

/* Honeypot: ra khỏi màn hình (không display:none — vài bot bỏ qua ô bị ẩn hẳn). */
.contact-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	margin: 0;
	max-width: none;
}

.contact-form__privacy {
	font-size: 0.875rem;
	color: var(--ink-soft);
}

.contact-form__notice {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius);
	border-left: 4px solid var(--crayon-red);
	background: #fdecee;
	max-width: none;
}

.contact-form__notice--sent {
	border-left-color: var(--crayon-green);
	background: #e9f5ee;
}

.page-sheet__updated {
	margin: var(--space-4) 0 0;
	font-size: 0.875rem;
	color: var(--ink-soft);
}

/* -------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
	.modal[open] {
		animation: modal-in 160ms ease-out;
	}

	@keyframes modal-in {
		from {
			opacity: 0;
			transform: translateY(8px);
		}
	}

	/* Tiêu đề được tô màu một lần. */
	.outline-type {
		animation: crayon-fill 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.25s both;
	}

	@keyframes crayon-fill {
		from {
			background-size: 0% 100%;
		}
	}

	/* Mở từ link #<asset_key>: vòng đỏ quanh tranh đích nhấp nháy 3 nhịp, các tranh khác
	   mờ đi thoáng qua rồi sáng lại, để mắt tìm ra tranh đích trên lưới nhiều cột. */
	.sheet:target .sheet__paper {
		animation: sheet-target-pulse 0.7s ease-in-out 0.3s 3;
	}

	.gallery__grid:has(> .sheet:target) > .sheet:not(:target) {
		animation: sheet-dim 1.8s ease-out both;
	}

	@keyframes sheet-target-pulse {
		50% {
			box-shadow: 0 0 0 3px var(--crayon-red), 0 0 0 10px rgb(215 38 61 / 0.4);
		}
	}

	@keyframes sheet-dim {
		from,
		40% {
			opacity: 0.35;
		}
	}
}

/* -------------------------------------------------- 0.4.0: tìm trang, chia sẻ, độ khó */

/*
 * Menu chủ đề: mũi tên cạnh "Coloring pages" mở panel (<details>). Panel canh phải theo
 * menu — menu nằm sát mép phải header, canh trái sẽ tràn khỏi màn hình. Điện thoại không
 * có panel: "Coloring pages" dẫn tới hub, nơi đã chia đúng các nhóm này.
 */
.site-nav {
	position: relative;
}

.site-nav__item {
	display: inline-flex;
	align-items: center;
}

.site-nav__more > summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	min-height: 44px;
	margin-left: -0.375rem;
	border-radius: 999px;
	list-style: none;
	cursor: pointer;
}

.site-nav__more > summary::-webkit-details-marker {
	display: none;
}

.site-nav__more > summary:hover,
.site-nav__more[open] > summary {
	background: var(--wash);
}

.site-nav__chevron {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: var(--ink-soft);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 120ms ease-out;
}

.site-nav__more[open] .site-nav__chevron {
	transform: rotate(180deg);
	stroke: var(--crayon-blue);
}

.site-nav__panel {
	position: absolute;
	top: calc(100% + var(--space-1));
	right: 0;
	z-index: 50;
	width: min(40rem, calc(100vw - 2rem));
	padding: var(--space-3);
	background: var(--paper);
	border: 1px solid var(--wash-deep);
	border-radius: var(--radius);
	box-shadow: 0 16px 40px rgb(38 35 92 / 0.18);
}

.site-nav__groups {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__groups ul {
	margin: var(--space-1) 0 0;
	padding: 0;
	list-style: none;
}

.site-nav__group-title {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.site-nav__new .site-nav__group-title {
	color: var(--crayon-red);
}

.site-nav .site-nav__panel a {
	display: block;
	min-height: 0;
	padding: 0.3rem 0;
	border-radius: 0;
	font-weight: 500;
	line-height: 1.3;
}

.site-nav .site-nav__panel a:hover {
	background: none;
	color: var(--crayon-blue);
	text-decoration: underline;
}

.site-nav .site-nav__panel .site-nav__all {
	margin-top: var(--space-3);
	padding-top: var(--space-2);
	border-top: var(--trim);
	font-weight: 600;
	color: var(--crayon-blue);
}

/* Cột tab, đuôi "coloring pages" và "See all" chỉ dùng khi có JS; không JS là lưới ở trên. */
.site-nav__tabs,
.site-nav__title-tail,
.site-nav .site-nav__panel .site-nav__see-all {
	display: none;
}

/*
 * Có JS (theme 0.4.13): cột tab trái + một nhóm bên phải. Chiều cao panel = cột tab hoặc nhóm
 * dài nhất, không tăng theo tổng số collection. html.js được gắn từ <head> nên không nháy.
 */
.js .site-nav__panel {
	display: grid;
	grid-template-columns: 12rem 1fr;
	width: min(42rem, calc(100vw - 2rem));
	padding: 0;
	overflow: hidden;
}

.js .site-nav__tabs {
	display: block;
	margin: 0;
	padding: var(--space-2);
	list-style: none;
	background: var(--wash);
	border-right: 1px solid var(--wash-deep);
}

.site-nav__tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-1);
	width: 100%;
	padding: 0.55rem 0.75rem;
	border: 0;
	border-radius: var(--radius);
	background: none;
	font: inherit;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
}

.site-nav__tab:hover {
	color: var(--crayon-blue);
}

.site-nav__tab[aria-selected="true"] {
	background: var(--paper);
	color: var(--crayon-blue);
	box-shadow: 0 1px 0 var(--wash-deep);
}

.site-nav__tab--new,
.site-nav__tab--new:hover,
.site-nav__tab--new[aria-selected="true"] {
	color: var(--crayon-red);
}

.site-nav__count {
	min-width: 1.6rem;
	padding: 0 0.5rem;
	border-radius: 999px;
	background: var(--paper);
	font-size: 0.8125rem;
	color: var(--ink-soft);
	text-align: center;
}

.site-nav__tab[aria-selected="true"] .site-nav__count {
	background: var(--wash);
}

.js .site-nav__groups {
	display: block;
	padding: var(--space-3);
}

.js .site-nav__pane:not(.is-current) {
	display: none;
}

.js .site-nav__pane .site-nav__group-title,
.js .site-nav__new .site-nav__group-title {
	display: block;
	margin-bottom: var(--space-2);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
}

.js .site-nav__title-tail {
	display: inline;
}

.js .site-nav__groups .site-nav__pane > ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--space-3);
	margin: 0;
}

.js .site-nav .site-nav__panel .site-nav__see-all {
	display: block;
	margin-top: var(--space-2);
	padding-top: var(--space-2);
	border-top: var(--trim);
	font-weight: 600;
	color: var(--crayon-blue);
}

.js .site-nav .site-nav__panel .site-nav__all {
	display: none;
}

@media (max-width: 47.99rem) {
	.site-nav__item {
		display: contents;
	}

	.site-nav__more {
		display: none;
	}
}

/* Ngày cập nhật + người làm, ngay dưới dòng số trang. */
.collection__byline {
	margin: calc(-1 * var(--space-2)) 0 var(--space-3);
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

.collection__byline a {
	color: var(--ink-soft);
}

.collection__byline a:hover {
	color: var(--crayon-blue);
}

/*
 * Điện thoại: đoạn giới thiệu rút còn ~4 dòng (mờ dần) kèm "Read more", ảnh bìa ẩn (không
 * tải — <source> trỏ ảnh rỗng). Đo 26/09/2026: tranh đầu từ ~1080px lên trong màn đầu tiên.
 * Rút bằng CSS từ lúc vẽ đầu tiên; JS chỉ gắn nút, nên không nhảy layout.
 */
.collection__more {
	display: none;
}

@media (max-width: 39.99rem) {
	.js .collection__intro[data-coloring-clamp]:not(.is-open) {
		max-height: 6.6em;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
		mask-image: linear-gradient(to bottom, #000 55%, transparent);
	}

	.js .collection__more {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--crayon-blue);
		font-family: var(--font-display);
		font-size: var(--step-0);
		font-weight: 600;
		text-decoration: underline;
		cursor: pointer;
	}

}

/* Dải chủ đề liên quan trên gallery (cùng dữ liệu với "More collections like this"). */
.theme-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	margin-top: var(--space-3);
}

.theme-chips__label {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--ink-soft);
}

.theme-chips__chip,
.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 40px;
	padding: 0 0.875rem;
	border: 1.5px solid var(--wash-deep);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.theme-chips__chip:hover,
.chip:hover {
	border-color: var(--crayon-blue);
	color: var(--crayon-blue);
}

/* Thanh trên gallery: lọc độ khó (trái), khổ giấy đã chọn (phải). Chỉ khi có JS. */
.gallery__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	margin-bottom: var(--space-3);
}

.no-js .gallery__tools {
	display: none;
}

.level-filter,
.paper-pref {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
}

.paper-pref__label {
	margin-right: 0.25rem;
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--ink-soft);
}

.chip[aria-pressed="true"],
.chip[aria-pressed="true"]:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.chip__count {
	font-size: 0.8125rem;
	font-weight: 500;
	opacity: 0.75;
}

/* .sheet là flex: thuộc tính hidden của bộ lọc phải thắng display. */
.sheet[hidden] {
	display: none;
}

/* Nhãn độ khó nằm trên lề trắng của tờ giấy. */
.sheet__paper {
	position: relative;
}

.sheet__level {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.sheet__level--easy {
	background: #e3f1e8;
	color: #2b6a41;
}

.sheet__level--medium {
	background: #fdf0c9;
	color: #6f5200;
}

.sheet__level--detailed {
	background: #e4e2f5;
	color: var(--ink);
}

/* Đã chọn khổ giấy: nút Download ghi rõ sẽ tải khổ nào (modal.js đặt data-paper-choice). */
[data-paper-choice="letter"] .sheet__open-modal::after,
[data-paper-choice="a4"] .sheet__open-modal::after {
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.22);
	font-size: 0.75rem;
}

[data-paper-choice="letter"] .sheet__open-modal::after {
	content: "Letter";
}

[data-paper-choice="a4"] .sheet__open-modal::after {
	content: "A4";
}

/*
 * Điện thoại: mỗi dải (link nhảy mục, chủ đề, lọc + khổ giấy) là MỘT hàng cuộn ngang. Xếp
 * nhiều hàng thì tranh đầu rơi xuống 963px (đo bằng CDP ở 390×844, 26/09/2026).
 */
@media (max-width: 39.99rem) {
	.jump-links,
	.theme-chips,
	.gallery__tools {
		flex-wrap: nowrap;
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: none;
	}

	.jump-links::-webkit-scrollbar,
	.theme-chips::-webkit-scrollbar,
	.gallery__tools::-webkit-scrollbar {
		display: none;
	}

	.jump-links {
		margin-top: var(--space-2);
		padding-top: var(--space-2);
	}

	.theme-chips,
	.gallery__tools {
		padding-bottom: 4px;
	}

	.gallery__tools {
		justify-content: flex-start;
		gap: var(--space-3);
	}

	.level-filter,
	.paper-pref {
		flex-wrap: nowrap;
	}

	.gallery {
		margin-top: var(--space-3);
	}

	.collection__byline {
		font-size: 0.875rem;
	}

	.js .collection__intro[data-coloring-clamp]:not(.is-open) {
		max-height: 5em;
	}
}

/* -------------------------------------------------- trang đích tô online (/online-coloring/) */

/*
 * Hero như khối tô online của trang chủ nhưng chữ bên trái: đây là trang của công cụ, tờ tranh
 * tô dở là minh hoạ. Dưới hero là dải số liệu, rồi mỗi collection một hàng tranh — bấm là tô.
 */
.online-hub__hero {
	display: grid;
	gap: var(--space-4);
	align-items: center;
	background: var(--paper);
	border: var(--trim);
	border-radius: var(--radius);
	padding: clamp(var(--space-3), 4vw, var(--space-5));
}

@media (min-width: 52rem) {
	.online-hub__hero {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}
}

.online-hub__intro h1 {
	font-size: var(--step-5);
	line-height: 1.08;
	margin-bottom: var(--space-3);
}

.online-hub__lead {
	font-size: var(--step-1);
	color: var(--ink-soft);
	max-width: 46ch;
}

.online-hub__lead p {
	margin: 0 0 var(--space-2);
}

.online-hub__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-4) 0 0;
	padding-bottom: 3px;
}

.online-hub__stage .home-online__page {
	width: min(52vw, 17rem);
}

@media (max-width: 51.99rem) {
	.online-hub__stage {
		padding: var(--space-3);
	}

	.online-hub__stage .home-online__page {
		width: min(42vw, 12rem);
	}
}

/* Số liệu: bốn "nhãn dán" nhỏ, chấm màu bút sáp như danh sách ở khối tô online trang chủ. */
.online-hub__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-display);
	font-weight: 500;
}

.online-hub__facts li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink-soft);
}

.online-hub__facts li::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--crayon-blue);
}

.online-hub__facts li:nth-child(2)::before {
	background: var(--crayon-green);
}

.online-hub__facts li:nth-child(3)::before {
	background: var(--crayon-yellow);
}

.online-hub__facts li:nth-child(4)::before {
	background: var(--crayon-red);
}

.online-hub__facts strong {
	color: var(--ink);
	font-weight: 700;
}

.online-hub__pick {
	margin-top: var(--space-6);
	scroll-margin-top: var(--space-3);
}

.online-hub__pick > p {
	margin: var(--space-1) 0 0;
	color: var(--ink-soft);
	max-width: var(--measure);
}

/* Nhảy tới nhóm mùa: dáng nút quiet, nhỏ hơn. */
.online-hub__themes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin-top: var(--space-3);
}

.online-hub__themes a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--space-3);
	border: 1.5px solid var(--wash-deep);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 600;
	text-decoration: none;
}

.online-hub__themes a:hover {
	border-color: var(--crayon-blue);
}

.online-hub__theme {
	margin-top: var(--space-5);
	scroll-margin-top: var(--space-3);
}

.online-hub__theme-title {
	font-size: var(--step-3);
	margin-bottom: var(--space-2);
}

.online-hub__row {
	padding: var(--space-3);
	background: var(--paper);
	border-radius: var(--radius);
}

.online-hub__row + .online-hub__row {
	margin-top: var(--space-3);
}

.online-hub__row-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-1) var(--space-3);
	margin-bottom: var(--space-2);
}

.online-hub__row-head h3 {
	font-size: var(--step-1);
	margin: 0;
}

.online-hub__row-head h3 a {
	color: var(--ink);
	text-decoration: none;
}

.online-hub__row-head h3 a:hover {
	color: var(--crayon-blue);
}

.online-hub__more {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--crayon-blue);
	white-space: nowrap;
}

.online-hub__more::after {
	content: " \2192";
}

/*
 * Sáu tranh một hàng trên desktop. Điện thoại/tablet: dải vuốt ngang (thấy mép tranh kế tiếp để
 * biết còn nữa), để 15 hàng không thành một trang dài gấp 15 lần.
 */
.online-hub__tiles {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(8.5rem, 40%);
	gap: var(--space-2);
	margin: 0;
	padding: 0 0 var(--space-1);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}

@media (min-width: 40rem) {
	.online-hub__tiles {
		grid-auto-columns: minmax(8.5rem, 30%);
	}
}

@media (min-width: 64rem) {
	.online-hub__tiles {
		grid-auto-flow: row;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		overflow: visible;
	}
}

.online-hub__tiles li {
	scroll-snap-align: start;
}

.online-tile {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	height: 100%;
	color: var(--ink);
	text-decoration: none;
}

.online-tile img {
	width: 100%;
	aspect-ratio: 17 / 22;
	object-fit: contain;
	background: var(--paper);
	border: 1.5px solid var(--wash-deep);
	border-radius: 6px;
	transition:
		border-color 120ms ease-out,
		transform 120ms ease-out,
		box-shadow 120ms ease-out;
}

.online-tile:hover img,
.online-tile:focus-visible img {
	border-color: var(--crayon-blue);
	transform: translateY(-2px);
	box-shadow: 0 6px 0 -2px var(--wash-deep);
}

.online-tile__title {
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--ink-soft);
}

.online-tile:hover .online-tile__title {
	color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
	.online-tile img {
		transition: none;
	}

	.online-tile:hover img,
	.online-tile:focus-visible img {
		transform: none;
	}
}

.online-hub__section {
	margin-top: var(--space-6);
}

.online-hub__section > h2 {
	margin-bottom: var(--space-3);
}

/* Công cụ: icon cùng nét với thanh công cụ của app, để người xem nhận ra khi mở tranh. */
.online-hub__tools {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.online-hub__tools li {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--space-2);
	align-items: start;
	background: var(--paper);
	border-radius: var(--radius);
	padding: var(--space-3);
}

.online-hub__tool-icon {
	grid-row: span 2;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.45rem;
	border-radius: 10px;
	background: var(--wash);
	fill: none;
	stroke: var(--crayon-blue);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.online-hub__tools h3 {
	font-size: var(--step-1);
	margin: 0 0 0.15rem;
}

.online-hub__tools p {
	margin: 0;
	color: var(--ink-soft);
}

/* Quyền riêng tư: lục = xác nhận (quy ước bút sáp đầu file). */
.online-hub__private {
	background: var(--paper);
	border: var(--trim);
	border-left: 4px solid var(--crayon-green);
	border-radius: var(--radius);
	padding: var(--space-4) var(--space-3);
}

.online-hub__private > h2 {
	font-size: var(--step-2);
}

.online-hub__private ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: var(--space-2) var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ink-soft);
}

.online-hub__private strong {
	display: block;
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 600;
}

.online-hub__faq {
	display: grid;
	gap: var(--space-2);
	max-width: 52rem;
}

.online-hub__faq details {
	background: var(--paper);
	border-radius: var(--radius);
	padding: 0 var(--space-3);
}

.online-hub__faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	min-height: 52px;
	font-family: var(--font-display);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.online-hub__faq summary::-webkit-details-marker {
	display: none;
}

.online-hub__faq summary::after {
	content: "+";
	flex: none;
	font-size: var(--step-2);
	line-height: 1;
	color: var(--crayon-blue);
}

.online-hub__faq details[open] summary::after {
	content: "\2212";
}

.online-hub__faq details p {
	margin: 0;
	padding-bottom: var(--space-3);
	color: var(--ink-soft);
}

@media print {
	.site-header,
	.site-footer,
	.jump-links,
	.ad-slot,
	.button,
	.sheet__fallback,
	.theme-chips,
	.gallery__tools {
		display: none !important;
	}

	body {
		background: #fff;
	}
}

/* -------------------------------------------------------------------------
 * Người đứng sau site (22/10/2026): trang About + hộp tác giả. Mẫu: freecolouringpagesforkids.com.
 * ---------------------------------------------------------------------- */

.founder {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 44rem) {
	.founder {
		grid-template-columns: 15rem minmax(0, 1fr);
	}
}

.founder__photo {
	margin: 0;
	max-width: 13rem;
}

@media (min-width: 44rem) {
	.founder__photo {
		max-width: none;
	}
}

.founder__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	border: 4px solid var(--paper);
	box-shadow: 0 0 0 1.5px var(--wash-deep);
}

.founder__eyebrow {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--fox);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.875rem;
	margin: 0 0 var(--space-1);
}

.page-sheet .founder h1 {
	margin: 0 0 var(--space-3);
}

.page-sheet .founder__facts-heading {
	font-size: var(--step-2);
	margin: var(--space-4) 0 var(--space-2);
}

.facts {
	list-style: none;
	margin: 0 0 var(--space-2);
	padding: 0;
	display: grid;
	gap: var(--space-2);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.facts li {
	background: var(--fox-cream);
	border-radius: var(--radius);
	padding: var(--space-2) var(--space-3);
}

.facts__q {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ink-soft);
}

.facts__a {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--step-1);
	color: var(--ink);
}

.author-box {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	background: var(--fox-cream);
	border-radius: var(--radius);
	padding: var(--space-3);
	max-width: 48rem;
}

.author-box .author-box__photo {
	flex: none;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: 3px solid var(--paper);
}

.author-box .author-box__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--step-1);
	margin: 0 0 var(--space-1);
}

.author-box__name span {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fox);
}

.author-box p {
	margin: 0 0 var(--space-1);
}

.author-box p:last-child {
	margin-bottom: 0;
}

@media (max-width: 30rem) {
	.author-box {
		flex-direction: column;
	}

	.author-box .author-box__photo {
		width: 80px;
		height: 80px;
	}
}