/* Mẫu chữ tiểu học HP001 (bộ font anh Hiệp đưa 11-09, static/fonts/hp001).
   Dùng bản đã vá ở static/fonts/hp001/full/ (sinh bởi scripts/learning-materials/font-hp001-latin.py):
   gốc thiếu glyph f w j z (rác) và chữ o không có nét nối ra nên chữ tròn theo sau dính vào (họ→"hoc" dính).
   `HP001 4 hang`   — chữ trơn, 2 độ đậm.
   `HP001 4 hang o ly` — mỗi glyph kèm sẵn dòng kẻ ô ly (1 ô ly) ⇒ không cần vẽ ô ly bằng CSS. */
@font-face {
	font-family: 'HP001 4 hang';
	src: url('/fonts/hp001/full/HP001_4_hang_normal.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'HP001 4 hang';
	src: url('/fonts/hp001/full/HP001_4_hang_bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: 'HP001 4 hang o ly';
	src: url('/fonts/hp001/full/HP001_4_hang_1_o_ly.ttf') format('truetype');
	font-display: swap;
}
@font-face {
	font-family: 'HP001 4 hang 2 o ly';
	src: url('/fonts/hp001/full/HP001_4_hang_2_o_ly.ttf') format('truetype');
	font-display: swap;
}
@font-face {
	font-family: 'HP001 5 hang';
	src: url('/fonts/hp001/full/HP001_5_hang_normal.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'HP001 5 hang';
	src: url('/fonts/hp001/full/HP001_5_hang_bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
}

	.to-a4.svelte-zujfmi {
		width: 210mm;
		height: 297mm;
		padding: 12mm 14mm 10mm;
		box-sizing: border-box;
		background: #fff;
		color: #111;
		display: flex;
		flex-direction: column;
		font-family: system-ui, sans-serif;
		font-size: 13pt;
		line-height: 1.35;
		overflow: hidden;
	}
	/* Khi in: cao đúng bằng vùng in được của TRANG (100vh trong ngữ cảnh in), không phải 297mm cứng — 297mm bằng đúng khổ giấy nên
	   chỉ lệch 1px làm tròn (hay anh chọn lề khác None) là Chrome cắt tờ làm hai, footer rơi sang trang 2 (14-09). Cấm cắt hộp luôn. */
	@media print {
		.to-a4.svelte-zujfmi { width: 100vw; height: 100vh; break-inside: avoid; }
	}
	.tron-to.svelte-zujfmi { padding: 0; position: relative; }
	.chan-tron-to.svelte-zujfmi { position: absolute; left: 14mm; right: 14mm; bottom: 4mm; border: 0; background: rgba(255, 255, 255, 0.85); }
	.anh-tron-to.svelte-zujfmi { width: 100%; height: 100%; object-fit: contain; display: block; }
	/* Lớp che đầu tờ (15-09): nền trắng đục kín chữ Anh, banner mặt trời/bút chì làm nền, pill tiêu đề ở giữa. Ảnh tap-to-so raster từ PDF
	   A4 (mathsbuff.com, 200dpi 1653×2339, đã xoá chữ Anh + khung bằng pymupdf) nên % chiều cao ảnh = % tờ. */
	.che-dau.svelte-zujfmi { position: absolute; top: 0; left: 0; right: 0; background-color: #fff; background-size: contain; background-position: center 2mm; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 3mm; }
	.che-dau.svelte-zujfmi .ten-be:where(.svelte-zujfmi) { position: absolute; top: calc(100% + 1mm); left: 5%; margin: 0; } /* nằm DƯỚI lớp che, trên nền trắng của ảnh — trong banner bị mặt trời/hoa đè mờ */
	.che-dau.svelte-zujfmi h1:where(.svelte-zujfmi) { font-size: 22pt; color: #db2777; background: rgba(255, 255, 255, 0.92); border: 0.8mm solid #fbcfe8; border-radius: 99px; padding: 1.5mm 8mm; margin: 0; }
	header.svelte-zujfmi { border-bottom: 2px solid #111; padding-bottom: 3mm; margin-bottom: 6mm; }
	.ten-be.svelte-zujfmi { font-size: 9pt; color: #666; margin-bottom: 2mm; }
	h1.svelte-zujfmi { font-size: 20pt; margin: 0; font-weight: 800; display: flex; align-items: center; gap: 4mm; }
	.nhan-dap-an.svelte-zujfmi { font-size: 10pt; background: #ef4444; color: #fff; padding: 1mm 3mm; border-radius: 2mm; letter-spacing: 0.1em; }
	.huong-dan.svelte-zujfmi { font-size: 10.5pt; color: #444; margin: 2mm 0 0; }
	main.svelte-zujfmi { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4mm; }
	footer.svelte-zujfmi { border-top: 1px dashed #bbb; padding-top: 2mm; font-size: 8pt; color: #888; text-align: center; }

	/* Tập viết — font HP001 "1 ô ly": dòng kẻ nằm sẵn trong glyph, không vẽ ô ly bằng CSS nữa. */
	.o-ly.svelte-zujfmi {
		flex: 1; display: flex; align-items: center; gap: 0; padding: 0 2mm;
		font-family: 'HP001 4 hang o ly', 'HP001 4 hang', cursive;
		font-size: 42pt; line-height: 1; white-space: nowrap; overflow: hidden;
	}
	.chu-mau.svelte-zujfmi { color: #111; }
	.chu-mo.svelte-zujfmi { color: #b5b5b5; }
	.dem.svelte-zujfmi { color: #b5b5b5; flex: 1; min-width: 0; }

	/* Tô chữ cái — font "2 ô ly" (cỡ vừa, QĐ 31/2002): 1 ô ly = 412 unit/2048. Chuẩn 2,5mm là font-size 12,43mm,
	   anh in thử 11-09 thấy nhỏ ⇒ dùng ô ly 3mm (font 14,9mm), một dòng 8 ô ly = 24mm. */
	.to-chu.svelte-zujfmi { flex: 1; min-height: 0; display: grid; grid-template-columns: 52mm minmax(0, 1fr); gap: 6mm; }
	.cot-chu.svelte-zujfmi { border: 1.5px dashed #93c5fd; border-radius: 6mm; padding: 4mm 3mm; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 2mm; }
	.chu-rong.svelte-zujfmi { font-family: 'HP001 4 hang', cursive; font-weight: 700; font-size: 150pt; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px #111; }
	.nhan-chu.svelte-zujfmi { font-family: 'HP001 4 hang', cursive; font-weight: 700; font-size: 26pt; color: #2563eb; background: #dbeafe; border-radius: 99px; padding: 1mm 8mm; }
	.hinh-mau.svelte-zujfmi { font-size: 90pt; line-height: 1.2; }
	.nhan-tu.svelte-zujfmi { font-family: 'HP001 4 hang', cursive; font-weight: 700; font-size: 34pt; color: #dc2626; background: #dbeafe; border-radius: 99px; padding: 1mm 8mm; }
	.cot-bai.svelte-zujfmi { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
	.de-muc.svelte-zujfmi { margin: 2mm 0 0; font-size: 12pt; color: #1d4ed8; }
	.de-muc.svelte-zujfmi b:where(.svelte-zujfmi) { font-family: 'HP001 4 hang', cursive; font-size: 16pt; }
	/* Dòng = lớp kẻ (chuỗi dấu cách, glyph tự vẽ dòng) nằm dưới + lớp chữ flex-wrap: chữ nào không lọt bề ngang
	   thì rớt xuống hàng 2 và bị cắt ⇒ tự lấp kín tới lề phải, không bao giờ in nửa chữ. */
	.dong-2-o-ly.svelte-zujfmi {
		position: relative; height: 27mm; display: flex; flex-wrap: wrap; align-content: flex-start; padding: 2mm 1mm 0;
		font-family: 'HP001 4 hang 2 o ly', 'HP001 4 hang', cursive;
		font-size: 14.9mm; line-height: 24mm; overflow: hidden;
	}
	.dong-2-o-ly.svelte-zujfmi > span:where(.svelte-zujfmi) { height: 24mm; margin-bottom: 4mm; white-space: nowrap; } /* margin đẩy hàng rớt xuống ngoài vùng nhìn, kể cả dấu mũ/dấu ngã nhô cao */
	.dong-2-o-ly.svelte-zujfmi .ke:where(.svelte-zujfmi) { position: absolute; inset: 2mm auto 0 1mm; color: #b5b5b5; }
	/* In giấy: chữ mẫu phải ĐEN RÕ ⇒ dùng bản bold KHÔNG kẻ (cùng metrics, dòng kẻ đã có lớp .ke), chữ mờ NHẠT hơn cả dòng kẻ. */
	.dong-2-o-ly.svelte-zujfmi .chu-mau:where(.svelte-zujfmi) { font-family: 'HP001 4 hang', cursive; font-weight: 700; color: #000; }
	/* Chữ mờ: bản NORMAL (14-09) — bé tập viết dùng nét đều, mảnh; bold vùng tô rộng bé chỉ "tô lấp" chứ không học được đường bút. */
	.dong-2-o-ly.svelte-zujfmi .chu-mo:where(.svelte-zujfmi) { font-family: 'HP001 4 hang', cursive; font-weight: 400; color: #d6d6d6; }
	.net-cham.svelte-zujfmi { position: absolute; inset: 2mm 1mm 0; width: calc(100% - 2mm); height: 24mm; font-family: 'HP001 4 hang', cursive; font-weight: 400; font-size: 14.9mm; white-space: pre; }
	.net-cham.svelte-zujfmi text:where(.svelte-zujfmi) { fill: none; stroke: #f87171; stroke-width: 0.35mm; stroke-dasharray: 0.7mm 0.7mm; stroke-linecap: round; }
	.net-cham.svelte-zujfmi .chu-mau:where(.svelte-zujfmi) { fill: #000; stroke: none; font-weight: 700; }
	.dong-2-o-ly.svelte-zujfmi .chu-mau:where(.svelte-zujfmi), .dong-2-o-ly.svelte-zujfmi .chu-mo:where(.svelte-zujfmi) { position: relative; }
	.o-to-mau.svelte-zujfmi { position: relative; flex: 1; min-height: 0; margin-top: 1mm; border: 1.5px dashed #ddd; border-radius: 4mm; display: grid; place-items: center; }
	.o-to-mau.svelte-zujfmi img:where(.svelte-zujfmi) { position: absolute; inset: 4mm; width: calc(100% - 8mm); height: calc(100% - 8mm); object-fit: contain; }
	.o-to-mau.svelte-zujfmi span:where(.svelte-zujfmi) { font-size: 190pt; line-height: 1.3; filter: url(#vien-to-mau); }

	/* Khoanh chữ */
	/* Tô số — băng màu viền chấm; lưới số dùng đúng dòng 2 ô ly + font HP001 như tô chữ (số mẫu đậm, số mờ nét mảnh để tô theo). */
	.to-so.svelte-zujfmi { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5mm; }
	.bang-so.svelte-zujfmi { flex: 1; min-height: 0; display: grid; grid-template-columns: 40mm minmax(0, 1fr); gap: 3mm; padding: 3mm; border: 1mm dashed var(--mau); border-radius: 5mm; background: color-mix(in srgb, var(--mau) 10%, #fff); }
	.cot-so.svelte-zujfmi { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 2mm; }
	.so-to.svelte-zujfmi { font-size: 60pt; line-height: 1; font-weight: 900; color: var(--mau); -webkit-text-stroke: 1.5px #111; font-family: system-ui, sans-serif; }
	/* Hình lặp ĐÚNG số lượng (số 2 = hai chú vịt) để câu vui khớp hình và bé đếm được. */
	.hinh-so.svelte-zujfmi { display: flex; flex-wrap: wrap; justify-content: center; gap: 1mm; font-size: 18pt; line-height: 1.2; }
	.loi-nhan.svelte-zujfmi { font-size: 9.5pt; font-weight: 700; color: color-mix(in srgb, var(--mau) 60%, #111); background: #fff; border: 1px solid var(--mau); border-radius: 3mm; padding: 1.5mm 2.5mm; text-align: center; }
	.luoi-so.svelte-zujfmi { display: flex; flex-direction: column; justify-content: space-evenly; background: #fff; border-radius: 3mm; padding: 1mm 2mm; min-height: 0; overflow: hidden; }
	.luoi-so.svelte-zujfmi .dong-2-o-ly:where(.svelte-zujfmi) { flex: 0 0 auto; }
	/* Bản màu (15-09): banner AI làm NỀN header (tiêu đề nằm trong pill trắng đè lên, khỏi tốn một băng riêng), thảm hoa cuối trang
	   nằm sát chân trang. Ảnh nhóm vật đứng trong cột trái cùng số + câu vui thành một "thẻ" (cột rộng 62mm để 9 bông hoa hàng ngang
	   vẫn ~12mm/bông, đếm được); băng cao đúng 2 dòng ô ly nên không bị ép. Bản gọn (không trangTri) giữ nguyên style trên. */
	header.co-banner.svelte-zujfmi {
		position: relative; min-height: 36mm; margin-bottom: 3mm; padding: 2mm 4mm 3mm; border: 0;
		background-size: contain; background-position: center; background-repeat: no-repeat;
		display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	}
	header.co-banner.svelte-zujfmi .ten-be:where(.svelte-zujfmi) { position: absolute; top: 0; left: 0; margin: 0; background: rgba(255, 255, 255, 0.8); border-radius: 2mm; padding: 0.5mm 2mm; }
	header.co-banner.svelte-zujfmi h1:where(.svelte-zujfmi) { font-size: 24pt; color: #db2777; background: rgba(255, 255, 255, 0.92); border: 0.8mm solid #fbcfe8; border-radius: 99px; padding: 1.5mm 8mm; margin-top: 4mm; }
	header.co-banner.svelte-zujfmi .huong-dan:where(.svelte-zujfmi) { font-size: 9.5pt; background: rgba(255, 255, 255, 0.9); border-radius: 2mm; padding: 1mm 3mm; margin-top: 1.5mm; max-width: 150mm; }
	.co-trang-tri.svelte-zujfmi { gap: 3mm; }
	.co-trang-tri.svelte-zujfmi .bang-so:where(.svelte-zujfmi) { flex: 0 0 auto; grid-template-columns: 62mm minmax(0, 1fr); gap: 2mm; padding: 2mm; border-style: solid; border-width: 0.8mm; background: color-mix(in srgb, var(--mau) 16%, #fff); }
	.co-trang-tri.svelte-zujfmi .cot-so:where(.svelte-zujfmi) { justify-content: space-between; gap: 1.5mm; padding: 1mm 0; }
	.co-trang-tri.svelte-zujfmi .so-to:where(.svelte-zujfmi) { font-size: 40pt; width: 20mm; height: 20mm; display: grid; place-items: center; background: #fff; border: 0.8mm solid var(--mau); border-radius: 50%; -webkit-text-stroke: 1px #111; box-shadow: 0 1mm 0 color-mix(in srgb, var(--mau) 60%, #fff); }
	.anh-nhom.svelte-zujfmi { width: 100%; flex: 1 1 0; height: 0; min-height: 0; align-self: stretch; object-fit: contain; background: #fff; border-radius: 3mm; padding: 1mm; box-sizing: border-box; } /* flex-basis 0 + height 0: ảnh KHÔNG góp chiều cao vào băng (mèo dọc 631×731 từng kéo băng cao 70mm, đẩy số 3 rơi khỏi trang), chỉ lấp chỗ trống 2 dòng ô ly chừa ra; nền trắng đục ⇒ đóng khung trắng luôn cho thành thẻ */
	.co-trang-tri.svelte-zujfmi .loi-nhan:where(.svelte-zujfmi) { font-size: 9pt; border-width: 0.5mm; border-radius: 99px; padding: 1mm 3mm; }
	.co-trang-tri.svelte-zujfmi .luoi-so:where(.svelte-zujfmi) { padding: 0 1mm; justify-content: center; }
	.trang-tri.svelte-zujfmi { width: 100%; min-height: 24mm; max-height: 48mm; object-fit: contain; object-position: center bottom; flex: 1 1 24mm; margin-top: auto; } /* thảm hoa nở theo chỗ trống còn lại */

	/* Tô số trọn trang (15-09): lưới dòng 2 ô ly kín tờ, 8 dòng × 27mm = 216mm + banner header + thảm hoa nở phần còn lại.
	   Logo Losan absolute góc trên phải TỜ (header có banner nên đặt trên .to-a4, khỏi tranh chỗ với mặt trời/bút chì trong banner). */
	.to-a4.svelte-zujfmi { position: relative; }
	/* Logo để MỜ (opacity) — là dấu nguồn, không phải nhân vật trang trí; anh chốt 15-09. */
	.logo-goc.svelte-zujfmi { position: absolute; top: 4mm; right: 5mm; display: flex; flex-direction: column; align-items: center; gap: 0.5mm; opacity: 0.4; }
	.logo-goc.svelte-zujfmi img:where(.svelte-zujfmi) { width: 11mm; height: 11mm; border-radius: 2.5mm; }
	.logo-goc.svelte-zujfmi span:where(.svelte-zujfmi) { font-size: 7pt; font-weight: 700; color: #402081; letter-spacing: 0.02em; }
	.to-so-trang.svelte-zujfmi { flex: 1; min-height: 0; display: flex; flex-direction: column; }
	.to-so-trang.svelte-zujfmi .dong-2-o-ly:where(.svelte-zujfmi) { flex: 0 0 auto; }
	.to-so-trang.svelte-zujfmi .trang-tri:where(.svelte-zujfmi) { flex: 1 1 20mm; min-height: 20mm; max-height: 60mm; object-fit: cover; object-position: center bottom; } /* 7 dòng chừa ~40mm ⇒ thảm hoa trải hết bề ngang như mẫu gốc, cắt phần trời trống phía trên */
	.hang-khoanh.svelte-zujfmi { flex: 1; display: flex; align-items: center; gap: 4mm; border: 1px solid #ddd; border-radius: 3mm; padding: 0 4mm; }
	.yeu-cau.svelte-zujfmi { width: 14mm; height: 14mm; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-size: 22pt; font-family: 'HP001 4 hang', cursive; font-weight: 700; }
	.o-chon.svelte-zujfmi { flex: 1; text-align: center; font-size: 36pt; font-family: 'HP001 4 hang', cursive; }

	/* Đếm */
	.luoi-dem.svelte-zujfmi { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; flex: 1; }
	.o-dem.svelte-zujfmi { border: 1px solid #ddd; border-radius: 3mm; padding: 3mm; display: flex; align-items: center; gap: 3mm; }
	.hinh.svelte-zujfmi { flex: 1; font-size: 24pt; line-height: 1.3; display: flex; flex-wrap: wrap; gap: 1mm; }
	.o-so.svelte-zujfmi { width: 16mm; height: 16mm; border: 0.5mm solid #111; border-radius: 2mm; display: grid; place-items: center; font-size: 20pt; font-weight: 800; }

	/* Nối nét */
	.net.svelte-zujfmi { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1mm; }
	.ten-net.svelte-zujfmi { font-size: 9pt; color: #666; }
	.net.svelte-zujfmi svg:where(.svelte-zujfmi) { flex: 1; min-height: 0; width: 100%; border: 1px dashed #ddd; border-radius: 2mm; }

	/* Mê cung */
	.me-cung.svelte-zujfmi { flex: 1; display: grid; place-items: center; }
	.me-cung.svelte-zujfmi svg:where(.svelte-zujfmi) { height: 100%; max-width: 100%; }

	/* Đọc hiểu — có ảnh thì đoạn văn bên trái, tranh 3:4 bên phải cao bằng đoạn văn (cover, không méo). */
	.doan-va-anh.svelte-zujfmi { display: grid; gap: 4mm; }
	.doan-va-anh.co-anh.svelte-zujfmi { grid-template-columns: minmax(0, 1fr) 58mm; }
	.anh-bai-doc.svelte-zujfmi { width: 58mm; height: 100%; min-height: 0; object-fit: cover; border-radius: 3mm; border: 1px solid #ddd; }
	.doan-van.svelte-zujfmi { border: 1px solid #ddd; border-radius: 3mm; padding: 5mm 6mm; font-size: 17pt; line-height: 1.9; }
	.co-anh.svelte-zujfmi .doan-van:where(.svelte-zujfmi) { font-size: 15.5pt; line-height: 1.75; padding: 4mm 5mm; }
	.doan-van.svelte-zujfmi p:where(.svelte-zujfmi) { margin: 0; }
	.cau-hoi.svelte-zujfmi { margin: 0; padding-left: 6mm; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: 2mm; font-size: 14pt; line-height: 1.3; }
	.lua-chon.svelte-zujfmi { display: flex; gap: 8mm; margin-top: 1mm; }
	.lua-chon.svelte-zujfmi span:where(.svelte-zujfmi) { padding: 0.5mm 2mm; border-radius: 2mm; }
	.lua-chon.svelte-zujfmi i:where(.svelte-zujfmi) { font-style: normal; font-weight: 700; }

	/* Phép tính / so sánh */
	.luoi-tinh.svelte-zujfmi { display: grid; gap: 3mm 7mm; flex: 1; grid-auto-rows: 1fr; align-items: center; }
	.phep.svelte-zujfmi { display: flex; align-items: center; justify-content: space-between; gap: 3mm; font-size: 24pt; font-weight: 600; font-variant-numeric: tabular-nums; }
	.phep.svelte-zujfmi > span:where(.svelte-zujfmi) { white-space: nowrap; }
	/* Cộng bằng hình (1 cột): biểu thức toàn emoji, cho gãy dòng để không tràn; ô kết quả đứng yên bên phải. */
	.mot-cot.svelte-zujfmi .phep:where(.svelte-zujfmi) > span:where(.svelte-zujfmi):first-child { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; font-size: 28pt; }
	.mot-cot.svelte-zujfmi .phep:where(.svelte-zujfmi) .o-kq:where(.svelte-zujfmi) { flex: none; }
	/* So sánh: hai vế cân nhau quanh ô dấu, emoji nhỏ hơn chút để 3 hình một vế vẫn lọt. */
	.so-sanh.svelte-zujfmi .phep:where(.svelte-zujfmi) > span:where(.svelte-zujfmi) { flex: 1; text-align: center; font-size: 22pt; }
	.so-sanh.svelte-zujfmi .phep:where(.svelte-zujfmi) .o-kq:where(.svelte-zujfmi) { flex: none; font-size: 26pt; }
	.so-sanh.mot-cot.svelte-zujfmi .phep:where(.svelte-zujfmi) > span:where(.svelte-zujfmi) { font-size: 32pt; white-space: nowrap; }
	.o-kq.svelte-zujfmi { width: 18mm; height: 16mm; border: 0.5mm solid #111; border-radius: 2mm; display: grid; place-items: center; }

	/* Quy luật */
	.quy-luat.svelte-zujfmi { flex: 1; display: flex; align-items: center; gap: 6mm; border: 1px solid #ddd; border-radius: 3mm; padding: 0 4mm; }
	.day.svelte-zujfmi { flex: 1; display: flex; gap: 2mm; font-size: 26pt; font-weight: 700; font-variant-numeric: tabular-nums; }
	.day.svelte-zujfmi span:where(.svelte-zujfmi) { min-width: 12mm; text-align: center; }
	.day.svelte-zujfmi .hoi:where(.svelte-zujfmi) { width: 14mm; height: 14mm; border: 0.5mm dashed #111; border-radius: 2mm; display: grid; place-items: center; font-weight: 800; }
	.chon.svelte-zujfmi { display: flex; gap: 3mm; font-size: 26pt; border-left: 1px solid #ddd; padding-left: 5mm; }
	.chon.svelte-zujfmi span:where(.svelte-zujfmi) { padding: 1mm 2mm; border-radius: 50%; }

	/* Dãy số thiếu */
	.day-so.svelte-zujfmi { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 2mm; border: 1px solid #ddd; border-radius: 3mm; padding: 0 4mm; font-size: 22pt; font-weight: 700; font-variant-numeric: tabular-nums; }
	.day-so.svelte-zujfmi .so-co:where(.svelte-zujfmi), .day-so.svelte-zujfmi .o-so:where(.svelte-zujfmi) { width: 15mm; height: 15mm; display: grid; place-items: center; }
	.day-so.svelte-zujfmi .o-so:where(.svelte-zujfmi) { font-size: 20pt; }

	/* Tách – gộp số */
	.luoi-tach.svelte-zujfmi { flex: 1; display: grid; gap: 3mm 6mm; grid-auto-rows: 1fr; }
	.tach.svelte-zujfmi { display: grid; place-items: center; min-height: 0; }
	.tach.svelte-zujfmi svg:where(.svelte-zujfmi) { height: 100%; max-height: 40mm; width: auto; font-family: system-ui, sans-serif; }

	/* Thay thế hình – số */
	.quy-uoc.svelte-zujfmi { display: flex; flex-wrap: wrap; justify-content: center; gap: 3mm 8mm; border: 1.5px dashed #93c5fd; background: #eff6ff; border-radius: 3mm; padding: 3mm 5mm; font-size: 22pt; }
	.quy-uoc.svelte-zujfmi i:where(.svelte-zujfmi) { font-style: normal; font-size: 28pt; }
	.quy-uoc.svelte-zujfmi b:where(.svelte-zujfmi) { font-weight: 800; color: #1d4ed8; }

	/* Đồng hồ */
	.luoi-dong-ho.svelte-zujfmi { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm 6mm; }
	.dong-ho.svelte-zujfmi { display: flex; flex-direction: column; align-items: center; gap: 2mm; min-height: 0; }
	.dong-ho.svelte-zujfmi svg:where(.svelte-zujfmi) { flex: 1; min-height: 0; width: 100%; font-family: system-ui, sans-serif; }
	.o-gio.svelte-zujfmi { width: 34mm; height: 12mm; border: 0.5mm solid #111; border-radius: 2mm; display: grid; place-items: center; font-size: 15pt; font-weight: 800; }

	/* Nối từ – hình */
	.noi-tu-hinh.svelte-zujfmi { flex: 1; position: relative; display: grid; grid-template-columns: 1fr 1fr; }
	.day-noi.svelte-zujfmi { position: absolute; inset: 0; width: 100%; height: 100%; }
	.cot-tu.svelte-zujfmi, .cot-hinh.svelte-zujfmi { display: grid; grid-template-rows: repeat(var(--n), 1fr); }
	.tu.svelte-zujfmi, .hinh-noi.svelte-zujfmi { display: flex; align-items: center; font-size: 24pt; }
	.tu.svelte-zujfmi { justify-content: flex-end; font-weight: 700; padding-right: 30%; font-family: system-ui, sans-serif; font-size: 26pt; }
	.hinh-noi.svelte-zujfmi { justify-content: flex-start; flex-wrap: wrap; line-height: 1.1; padding-left: 22%; font-size: 36pt; letter-spacing: -0.08em; }
	.tu.svelte-zujfmi i:where(.svelte-zujfmi), .hinh-noi.svelte-zujfmi i:where(.svelte-zujfmi) { font-style: normal; font-size: 10pt; color: #111; margin: 0 2mm; }

	/* Tấm thẻ về tôi (2026): khung mặt tròn nét đứt + 3 dòng viết, lưới sở thích 4 cột ô vuông to để tô, danh sách tick. */
	.the-ve-toi.svelte-zujfmi { flex: 1; display: flex; flex-direction: column; gap: 4mm; }
	.hang-tren.svelte-zujfmi { display: grid; grid-template-columns: 62mm 1fr; gap: 8mm; align-items: center; }
	.khung-mat.svelte-zujfmi { width: 62mm; height: 62mm; border: 1mm dashed #f59e0b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #b45309; font-size: 11pt; font-weight: 700; }
	.thong-tin.svelte-zujfmi { display: flex; flex-direction: column; gap: 6mm; }
	.dong-viet.svelte-zujfmi { display: flex; align-items: flex-end; gap: 3mm; font-size: 14pt; }
	.cho-viet.svelte-zujfmi { flex: 1; border-bottom: 0.5mm dotted #111; height: 9mm; }
	.cho-viet.ngan.svelte-zujfmi { flex: 0 0 30mm; }
	.o-ky-hieu.svelte-zujfmi { width: 16mm; height: 16mm; border: 0.5mm solid #111; border-radius: 3mm; }
	.the-ve-toi.svelte-zujfmi .de-muc:where(.svelte-zujfmi) { margin: 0; font-size: 14pt; font-weight: 800; color: #db2777; }
	.luoi-thich.svelte-zujfmi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4mm; }
	.o-thich.svelte-zujfmi { border: 0.6mm solid #111; border-radius: 4mm; height: 30mm; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1mm; }
	.o-thich.svelte-zujfmi .hinh:where(.svelte-zujfmi) { font-size: 26pt; line-height: 1; }
	.o-thich.svelte-zujfmi .ten:where(.svelte-zujfmi) { font-size: 11pt; font-weight: 700; }
	.luoi-lam-duoc.svelte-zujfmi { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 8mm; font-size: 14pt; }
	.o-lam-duoc.svelte-zujfmi { display: flex; align-items: center; gap: 3mm; }
	.o-tick.svelte-zujfmi { width: 9mm; height: 9mm; border: 0.6mm solid #111; border-radius: 2mm; flex: none; }

	/* Chọn đáp án (trong tổng hợp): ô câu hỏi nhỏ + hình to + 3 ô số/chữ. */
	.luoi-chon.svelte-zujfmi { display: grid; gap: 3mm; }
	.bai-chon.svelte-zujfmi { display: flex; flex-direction: column; align-items: center; gap: 1.5mm; border: 1px solid #ddd; border-radius: 3mm; padding: 2mm; }
	.hoi-chon.svelte-zujfmi { font-size: 10.5pt; font-weight: 700; color: #16a34a; align-self: flex-start; }
	.hinh-chon.svelte-zujfmi { font-size: 26pt; line-height: 1.2; text-align: center; letter-spacing: 0.05em; font-family: 'HP001 4 hang', system-ui, cursive; }
		/* `_` trong `hinh` = ô trống chữ cần điền (HP001 không có glyph gạch dưới ⇒ vẽ ô nét đứt). */
	.hinh-chon.svelte-zujfmi .o-trong:where(.svelte-zujfmi) { display: inline-block; width: 8mm; height: 8mm; border: 0.4mm dashed #111; border-radius: 1.5mm; vertical-align: -1mm; }
	.dap-chon.svelte-zujfmi { display: flex; gap: 3mm; }
	.dap-chon.svelte-zujfmi span:where(.svelte-zujfmi) { width: 11mm; height: 11mm; border: 0.5mm solid #111; border-radius: 2mm; display: grid; place-items: center; font-size: 16pt; font-weight: 700; font-family: 'HP001 4 hang', cursive; }

	/* Học chữ/số và cách viết: thẻ mây — chữ to màu + dòng 2 ô ly + tên đọc. */
	.hoc-chu.svelte-zujfmi { display: grid; gap: 3mm; }
	.the-chu.svelte-zujfmi { display: grid; grid-template-columns: 16mm minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 2mm; align-items: center; border: 0.6mm dashed var(--mau); background: color-mix(in srgb, var(--mau) 8%, #fff); border-radius: 5mm; padding: 1.5mm 2.5mm; }
	.the-chu.svelte-zujfmi .chu-to:where(.svelte-zujfmi) { grid-row: 1 / 3; font-family: 'HP001 4 hang', cursive; font-weight: 700; font-size: 38pt; line-height: 1; color: var(--mau); text-align: center; }
	/* Ô ly nhỏ hơn bản tô số (font 10.5mm ≈ ô ly 2,1mm) để 1 mẫu + 3 chữ mờ lọt thẻ rộng ~55mm; cao hộp dòng = ascent+descent ≈ 17mm. */
	.the-chu.svelte-zujfmi .dong-2-o-ly:where(.svelte-zujfmi) { padding: 1mm 0.5mm 0; height: 19.5mm; font-size: 10.5mm; line-height: 17mm; }
	.the-chu.svelte-zujfmi .dong-2-o-ly:where(.svelte-zujfmi) > span:where(.svelte-zujfmi) { height: 17mm; margin-bottom: 3mm; }
	.the-chu.svelte-zujfmi .dong-2-o-ly:where(.svelte-zujfmi) .ke:where(.svelte-zujfmi) { inset: 1mm auto 0 0.5mm; }
	.the-chu.svelte-zujfmi .ten-chu:where(.svelte-zujfmi) { font-size: 12pt; font-weight: 800; color: var(--mau); text-align: center; }
	/* 4 thẻ một hàng (~40mm/thẻ): chữ to và ô ly nhỏ lại để vẫn lọt 1 mẫu + 2 chữ mờ. */
	.hoc-chu.nhieu.svelte-zujfmi .the-chu:where(.svelte-zujfmi) { grid-template-columns: 11mm minmax(0, 1fr); padding: 1mm 1.5mm; }
	.hoc-chu.nhieu.svelte-zujfmi .chu-to:where(.svelte-zujfmi) { font-size: 30pt; }
	.hoc-chu.nhieu.svelte-zujfmi .dong-2-o-ly:where(.svelte-zujfmi) { font-size: 8.5mm; line-height: 13.8mm; height: 16mm; }
	.hoc-chu.nhieu.svelte-zujfmi .dong-2-o-ly:where(.svelte-zujfmi) > span:where(.svelte-zujfmi) { height: 13.8mm; }
	.hoc-chu.nhieu.svelte-zujfmi .ten-chu:where(.svelte-zujfmi) { font-size: 10.5pt; }

	/* Tổng hợp (15-09): lưới 2 cột phần đánh số, khung viền sọc màu như mẫu "Bé khám phá các số". */
	.to-tong-hop.svelte-zujfmi { border: 3mm solid; border-image: repeating-linear-gradient(45deg, #fda4af 0 4mm, #fde68a 4mm 8mm, #86efac 8mm 12mm, #93c5fd 12mm 16mm) 10; padding: 8mm 10mm 7mm; }
	.to-tong-hop.svelte-zujfmi header:where(.svelte-zujfmi) { border-bottom: 0; margin-bottom: 3mm; padding-bottom: 1mm; text-align: center; }
	.to-tong-hop.svelte-zujfmi header:where(.svelte-zujfmi) h1:where(.svelte-zujfmi) { justify-content: center; color: #16a34a; font-size: 24pt; }
	.to-tong-hop.svelte-zujfmi header:where(.svelte-zujfmi) .huong-dan:where(.svelte-zujfmi) { color: #2563eb; font-weight: 600; }
	.tong-hop.svelte-zujfmi { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; align-content: stretch; }
	.phan.svelte-zujfmi { display: flex; flex-direction: column; gap: 1.5mm; border: 0.5mm dashed #60a5fa; border-radius: 4mm; padding: 2mm 3mm 2.5mm; min-height: 0; }
	.phan.ca.svelte-zujfmi { grid-column: 1 / -1; }
	.dau-phan.svelte-zujfmi { display: flex; align-items: center; gap: 2mm; font-size: 10.5pt; font-weight: 700; color: #1e40af; }
	.so-phan.svelte-zujfmi { width: 7mm; height: 7mm; border-radius: 50%; background: #2563eb; color: #fff; display: grid; place-items: center; font-size: 10pt; flex: none; }
	.icon-phan.svelte-zujfmi { font-size: 12pt; }
	.than-phan.svelte-zujfmi { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.5mm; }
	/* Bài con thu nhỏ ~60% so với khi chiếm trọn trang. */
	.phan.svelte-zujfmi .hang-khoanh:where(.svelte-zujfmi) { gap: 2mm; padding: 0 2mm; min-height: 11mm; }
	.phan.svelte-zujfmi .yeu-cau:where(.svelte-zujfmi) { width: 8.5mm; height: 8.5mm; font-size: 13pt; }
	.phan.svelte-zujfmi .o-chon:where(.svelte-zujfmi) { font-size: 20pt; }
	.phan.svelte-zujfmi .luoi-dem:where(.svelte-zujfmi) { gap: 2mm; }
	.phan.svelte-zujfmi .o-dem:where(.svelte-zujfmi) { padding: 1.5mm 2mm; gap: 2mm; }
	.phan.svelte-zujfmi .hinh:where(.svelte-zujfmi) { font-size: 15pt; }
	.phan.svelte-zujfmi .o-so:where(.svelte-zujfmi) { width: 10mm; height: 10mm; font-size: 13pt; }
	.phan.svelte-zujfmi .quy-luat:where(.svelte-zujfmi) { gap: 3mm; padding: 0 2mm; min-height: 11mm; }
	.phan.svelte-zujfmi .day:where(.svelte-zujfmi) { font-size: 16pt; gap: 1mm; }
	.phan.svelte-zujfmi .day:where(.svelte-zujfmi) span:where(.svelte-zujfmi) { min-width: 8mm; }
	.phan.svelte-zujfmi .day:where(.svelte-zujfmi) .hoi:where(.svelte-zujfmi) { width: 9mm; height: 9mm; }
	.phan.svelte-zujfmi .chon:where(.svelte-zujfmi) { font-size: 16pt; gap: 2mm; padding-left: 3mm; }
	.phan.svelte-zujfmi .day-so:where(.svelte-zujfmi) { padding: 0 2mm; font-size: 15pt; min-height: 11mm; justify-content: space-evenly; }
	.phan.svelte-zujfmi .day-so:where(.svelte-zujfmi) .so-co:where(.svelte-zujfmi), .phan.svelte-zujfmi .day-so:where(.svelte-zujfmi) .o-so:where(.svelte-zujfmi) { width: 10mm; height: 10mm; font-size: 14pt; }
	.phan.svelte-zujfmi .noi-tu-hinh:where(.svelte-zujfmi) { min-height: calc(var(--n) * 11mm); }
	.phan.svelte-zujfmi .tu:where(.svelte-zujfmi) { font-size: 20pt; padding-right: 22%; }
	.phan.svelte-zujfmi .hinh-noi:where(.svelte-zujfmi) { font-size: 20pt; padding-left: 16%; }
	.phan.svelte-zujfmi .luoi-tinh:where(.svelte-zujfmi) { gap: 2mm 5mm; }
	.phan.svelte-zujfmi .phep:where(.svelte-zujfmi) { font-size: 16pt; }
	.phan.svelte-zujfmi .o-kq:where(.svelte-zujfmi) { width: 12mm; height: 11mm; }
	.phan.svelte-zujfmi .so-sanh:where(.svelte-zujfmi) .phep:where(.svelte-zujfmi) > span:where(.svelte-zujfmi) { font-size: 15pt; }
	.phan.svelte-zujfmi .tach:where(.svelte-zujfmi) svg:where(.svelte-zujfmi) { max-height: 26mm; }

	/* Đáp án */
	.dung.svelte-zujfmi { color: #dc2626; font-weight: 800; }
	span.dung.svelte-zujfmi, .lua-chon.svelte-zujfmi .dung:where(.svelte-zujfmi), .chon.svelte-zujfmi .dung:where(.svelte-zujfmi), .dap-chon.svelte-zujfmi .dung:where(.svelte-zujfmi) { outline: 0.6mm solid #dc2626; }