/* =============================================================
   หน้ารวมคลังข้อสอบ /exam-bank (hub) — ธีมห้องฉาย คราม-ทอง ชุดเดียวกับ /games · /journey-study · /grammar-study
   ฐานธีม (ป้ายใหญ่ · แถบชิป · หัวหมวดมีเลข) อยู่ app/css/study-cinema.css — ไฟล์นี้เฉพาะส่วนของหน้านี้
   สีของหมวด = เป้าหมายการใช้: คราม ฝึกทำ · ม่วง วัดระดับ · อำพัน วิเคราะห์ · เขียวน้ำทะเล สร้าง/พิมพ์ (อาจารย์)
   ขนาดตัวอักษรทุกตัวผูก --reading-scale · ประโยคที่ต้องอ่านขั้นต่ำ ๑๔px ด้วย max()
   ============================================================= */

/* สีหมวด: --t = ตัวอักษร/ไอคอนบนพื้นเข้ม · --t-solid = แถบ/ไอคอน · --t-deep = ปลายไล่สี */
.ebh-tone-indigo  { --t: var(--ui-indigo); --t-solid: #6366f1; --t-deep: #3730a3; }
.ebh-tone-violet  { --t: var(--ui-violet); --t-solid: #a855f7; --t-deep: #6b21a8; }
.ebh-tone-amber   { --t: var(--ui-gold-ink); --t-solid: #f59e0b; --t-deep: #92400e; }
.ebh-tone-teacher { --t: var(--ui-teal); --t-solid: #14b8a6; --t-deep: #115e59; }
/* สีวิชา (๑๓ ต.ค. ๒๕๖๙): แปล = ทอง (เดียวกับธรรมบท ๒ ภาษา) · ไวยากรณ์ = คราม */
.ebh-tone-transl  { --t: var(--sc-gold); --t-solid: #f59e0b; --t-deep: #92400e; }
.ebh-tone-gram    { --t: var(--ui-indigo); --t-solid: #6366f1; --t-deep: #312e81; }

/* ---------- ป้ายใหญ่ ---------- */
.ebh-bill-art { object-position: 72% 50%; }
.ebh-lead { font-size: max(1rem, calc(1.02rem * var(--reading-scale, 1))); }
.ebh-stats { list-style: none; margin: .15rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.ebh-stats li {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .3rem .75rem; border-radius: 999px;
	background: rgba(var(--ui-lpanel-rgb, 15, 23, 48), .62); border: 1px solid var(--sc-line);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	color: var(--ui-ink2); font-size: calc(.85rem * var(--reading-scale, 1)); font-weight: 700;
}
.ebh-stats i { color: var(--sc-gold); font-size: calc(.78rem * var(--reading-scale, 1)); }
.ebh-stats b { color: var(--sc-gold); font-weight: 800; }

/* เส้นทางแนะนำ ๓ ขั้น (ใช้แผงเดียวกับ "ความคืบหน้า" ของหน้าบทเรียน) */
.ebh-path { max-width: 760px; }
.ebh-path .sc-progress-head i { color: var(--sc-gold); margin-right: .2rem; }
.ebh-path-steps { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.ebh-step {
	display: flex; align-items: center; gap: .6rem;
	height: 100%; min-height: 56px; padding: .5rem .7rem;
	border-radius: 10px; border: 1px solid var(--sc-line); background: rgba(var(--ui-tint), .05);
	color: var(--ui-strong); text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}
.ebh-step:hover { background: rgba(var(--ui-tint), .1); border-color: rgba(245, 191, 69, .45); }
.ebh-step-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.35; }
.ebh-step-txt b { font-size: calc(.95rem * var(--reading-scale, 1)); font-weight: 800; }
.ebh-step-txt small { margin-top: 1px; font-size: max(.875rem, calc(.82rem * var(--reading-scale, 1))); font-weight: 600; color: var(--sc-muted); }
.ebh-step-go { color: var(--sc-gold); font-size: calc(.78rem * var(--reading-scale, 1)); transition: transform .15s ease; }
.ebh-step:hover .ebh-step-go { transform: translateX(3px); }

/* ---------- แถบชิปติดหัว = ตัวกรอง + ค้นหา ---------- */
.ebh-filter.is-stuck { box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .9); }
.ebh-filter-inner { display: flex; align-items: center; gap: .75rem; }
.ebh-chips { flex: 1; min-width: 0; padding-left: 2px; padding-right: 2px; }
.ebh-chip { font-family: inherit; }
.ebh-chip-no { background: color-mix(in srgb, var(--t-solid) 28%, transparent); color: var(--t); }
.ebh-chip.is-on { background: var(--ui-sel-bg); border-color: var(--ui-sel-bg); color: var(--ui-sel-ink); }
.ebh-chip.is-on i { color: #b45309; }
.ebh-chip.is-on .ebh-chip-n { background: rgba(var(--ui-lpanel-rgb, 10, 15, 30), .1); color: #0a0f1e; }
.ebh-chip.is-on .ebh-chip-no { background: var(--t-deep); color: var(--ui-strong); }
.ebh-search {
	flex: 0 0 320px; display: flex; align-items: center; gap: .55rem;
	min-height: 44px; padding: 0 .9rem; box-sizing: border-box;
	border-radius: 12px; border: 1px solid var(--sc-line); background: rgba(var(--ui-tint), .06);
	color: var(--sc-dim); cursor: text;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ebh-search i { font-size: calc(.85rem * var(--reading-scale, 1)); }
.ebh-search:focus-within { border-color: var(--sc-indigo); box-shadow: 0 0 0 3px rgba(165, 180, 252, .22); color: var(--ui-strong); }
.ebh-search input {
	flex: 1; min-width: 0; min-height: 42px; padding: 0; border: 0; outline: none; background: transparent;
	font: inherit; font-size: max(1rem, calc(.95rem * var(--reading-scale, 1))); color: var(--ui-strong);
}
.ebh-search input::placeholder { color: #8a94b3; opacity: 1; }
.ebh-search input::-webkit-search-cancel-button { filter: invert(1) brightness(.8); cursor: pointer; }

/* ---------- ก้อนวิชา (แปล · ไวยากรณ์) ---------- */
.ebh-subj { display: flex; flex-direction: column; gap: 2rem; scroll-margin-top: 8rem; }
.ebh-subj[hidden] { display: none; }
.ebh-subj-head {
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	padding: 0 0 1rem; border-bottom: 2px solid color-mix(in srgb, var(--t-solid) 55%, transparent);
}
.ebh-subj-ic {
	width: 60px; height: 60px; flex: none; display: grid; place-items: center; border-radius: 18px;
	background: linear-gradient(135deg, var(--t-solid), var(--t-deep)); color: #fff;
	font-size: calc(1.5rem * var(--reading-scale, 1));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 14px 26px -14px var(--t-solid);
}
.ebh-subj-txt { flex: 1 1 320px; min-width: 0; }
.ebh-subj-kicker { margin: 0; color: var(--t); font-size: calc(.85rem * var(--reading-scale, 1)); font-weight: 800; letter-spacing: .02em; }
.ebh-subj-head h2 { margin: .05rem 0 .15rem; font-size: calc(clamp(1.6rem, 3vw, 2.1rem) * var(--reading-scale, 1)); font-weight: 800; line-height: 1.25; color: var(--ui-strong); }
.ebh-subj-lead { margin: 0; font-size: max(.875rem, calc(.98rem * var(--reading-scale, 1))); line-height: 1.6; color: var(--ui-ink2); }
.ebh-subj-head .ebh-count i { color: var(--t); }

/* การ์ดเด่นของวิชาแปล: ภาพทางขวา · ปุ่มใหญ่ ๒ ปุ่ม */
.ebh-feature {
	position: relative; isolation: isolate; overflow: hidden; flex-direction: row; min-height: 300px;
	border-width: 2px; border-color: color-mix(in srgb, var(--t-solid) 75%, transparent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--t-solid) 16%, transparent), 0 22px 48px -22px rgba(0, 0, 0, .9);
}
.ebh-feature:hover { transform: none; }
.ebh-feature-art {
	position: absolute; z-index: -2; top: 0; right: 0; width: min(60%, 760px); height: 100%; object-fit: cover; object-position: 60% center;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
}
.ebh-feature::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, var(--ui-lpanel, #18223f) 0%, var(--ui-lpanel, #18223f) 40%, rgba(24, 34, 63, .55) 70%, rgba(24, 34, 63, 0) 100%);
}
.ebh-feature-body { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; max-width: 620px; padding: 1.6rem 1.7rem; }
.ebh-card.ebh-feature h3 { font-size: calc(clamp(1.35rem, 2.4vw, 1.75rem) * var(--reading-scale, 1)); line-height: 1.3; }
.ebh-feature-link { color: inherit; text-decoration: none; }
.ebh-feature-link:hover { color: var(--t); }
.ebh-card.ebh-feature p { flex: 0 0 auto; font-size: max(.95rem, calc(1rem * var(--reading-scale, 1))); }
.ebh-feature-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .35rem; }
.ebh-feature-actions .sc-btn { min-height: 48px; }

/* ใช้ได้ทั้งสองวิชา */
.ebh-shared-label { margin: 0 0 .7rem; color: var(--sc-muted); font-size: calc(.9rem * var(--reading-scale, 1)); font-weight: 800; }
.ebh-shared-label i { color: var(--t); margin-right: .3rem; }
.ebh-grid.ebh-grid--n1 > .ebh-card { grid-column: 1 / -1; }
.ebh-card--row .ebh-card-main { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.ebh-card--row .ebh-card-main p { flex: 1 1 280px; }
.ebh-card--row .ebh-card-cta { margin: 0; padding: 0; border: 0; }
.ebh-chip-ic { margin-right: .1rem; color: var(--t); }
.ebh-chip.is-on .ebh-chip-ic { color: #b45309; }

/* ---------- หมวด ---------- */
.ebh-groups { display: flex; flex-direction: column; gap: 4rem; }
/* กรองแล้วเหลือหมวดเดียว: เผื่อความสูงให้แถบชิปเลื่อนขึ้นไปปักใต้เมนูได้ ผลกรองจึงเริ่มที่ขอบบนเสมอ */
.ebh-groups { min-height: calc(100vh - 8rem); min-height: calc(100dvh - 8rem); box-sizing: border-box; }
.ebh-group { scroll-margin-top: 8rem; }
.ebh-course-head h3 { margin: 0; font-size: calc(clamp(1.2rem, 1.8vw, 1.4rem) * var(--reading-scale, 1)); font-weight: 800; line-height: 1.3; color: var(--ui-strong); }
.ebh-group > .ebh-feature { margin-bottom: 1rem; }
.ebh-group[hidden] { display: none; }

/* หัวหมวด = แถบภาพของหมวดทางขวา จางเข้าพื้นเข้มทางซ้าย + เลขหมวดสีประจำหมวด */
.ebh-head {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; align-items: center;
	min-height: 132px; margin: 0 0 1rem; padding: 1.2rem 1.4rem;
	border-radius: 18px; background: var(--sc-bg2);
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--t-solid) 38%, transparent);   /* กรอบรอบทั้งใบสีหมวด (เดิมแถบซ้าย ๔px — หลวงพี่ไม่ชอบแถบขอบซ้าย) */
}
.ebh-head-art {
	position: absolute; z-index: -2; top: 0; right: 0;
	width: min(62%, 620px); height: 100%; object-fit: cover; object-position: right center;
	opacity: .55;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%);   /* ขอบซ้ายของภาพจางหาย ไม่เห็นเป็นรอยตัด */
}
.ebh-head::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--t-solid) 22%, transparent) 0%, transparent 55%),
		linear-gradient(90deg, var(--sc-bg2) 0%, var(--sc-bg2) 38%, rgba(15, 23, 48, .6) 68%, rgba(15, 23, 48, .1) 100%);
}
.ebh-course-head { width: 100%; margin: 0; }
.ebh-no { background: linear-gradient(135deg, var(--t-solid), var(--t-deep)); }
.ebh-h-ic { margin-right: .5rem; color: var(--t); font-size: .8em; }
.ebh-course-head .ebh-head-lead { font-size: max(.875rem, calc(.95rem * var(--reading-scale, 1))); color: var(--ui-ink2); text-shadow: 0 1px 8px rgba(10, 15, 30, .8); }
.ebh-count { background: rgba(var(--ui-lpanel-rgb, 10, 15, 30), .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ebh-count i { color: var(--t); }

/* วางการ์ดตามจำนวนให้ไม่มีใบโดดเดี่ยวท้ายแถว: ๕ = ๒+๓ · ๔ = ๔ (จอกลาง ๒+๒) · ๒ = ๒ */
.ebh-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.ebh-grid > .ebh-card { grid-column: span 4; }
.ebh-grid--n2 > .ebh-card, .ebh-grid--n5 > .ebh-card:nth-child(-n+2) { grid-column: span 6; }
.ebh-grid--n4 > .ebh-card { grid-column: span 3; }

/* ---------- การ์ดเครื่องมือ ---------- */
.ebh-card {
	position: relative; display: flex; flex-direction: column; min-width: 0;
	/* การ์ดต้องดูออกว่าเป็นการ์ด: กรอบรอบทั้งใบสีกลุ่ม · พื้นยกขึ้นจากพื้นหน้า ไล่สีกลุ่มจาง ๆ จากด้านบน · เงาใต้การ์ด */
	border-radius: 16px; color: var(--ui-strong);
	border: 1.5px solid color-mix(in srgb, var(--t-solid) 55%, rgba(var(--ui-tint), .1));
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--t-solid) 20%, transparent) 0%, transparent 48%),
		var(--ui-lpanel, var(--ui-lpanel, #18223f));
	box-shadow: 0 1px 0 rgba(var(--ui-tint), .06) inset, 0 14px 30px -18px rgba(0, 0, 0, .85);
	transition: transform .3s cubic-bezier(.25, 1, .5, 1), box-shadow .25s ease, border-color .2s ease;
}
.ebh-card[hidden] { display: none; }
.ebh-card:hover {
	transform: translateY(-4px); border-color: var(--t);
	box-shadow: 0 1px 0 rgba(var(--ui-tint), .08) inset, 0 22px 44px -18px rgba(0, 0, 0, .95), 0 0 0 3px color-mix(in srgb, var(--t-solid) 22%, transparent);
}
.ebh-card-main {
	flex: 1; display: flex; flex-direction: column; gap: .65rem;
	padding: 1.05rem 1.15rem 1rem; border-radius: 15px;
	color: inherit; text-decoration: none;
}
.ebh-card-top { display: flex; align-items: center; gap: .8rem; }
.ebh-card-ic {
	width: 48px; height: 48px; flex: none; display: grid; place-items: center;
	border-radius: 14px; color: var(--ui-strong); font-size: calc(1.15rem * var(--reading-scale, 1));
	background: linear-gradient(135deg, var(--t-solid), var(--t-deep));
	box-shadow: inset 0 0 0 1px rgba(var(--ui-tint), .16), 0 10px 20px -12px var(--t-solid);
}
.ebh-card-name { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 0; }
.ebh-card-tag {
	display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .55rem; border-radius: 999px;
	background: var(--sc-gold-fill, var(--sc-gold)); color: #3b2600; font-size: calc(.74rem * var(--reading-scale, 1)); font-weight: 800;
}
.ebh-card-tag i { font-size: calc(.62rem * var(--reading-scale, 1)); }
.ebh-card h3 { margin: 0; font-size: calc(1.15rem * var(--reading-scale, 1)); font-weight: 800; line-height: 1.35; color: var(--ui-strong); }
.ebh-card p { flex: 1; margin: 0; font-size: max(.875rem, calc(.93rem * var(--reading-scale, 1))); line-height: 1.7; color: var(--ui-ink2); }
.ebh-card-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ebh-card-chips span {
	display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem; border-radius: 6px;
	background: rgba(var(--ui-tint), .07); color: var(--ui-ink2); font-size: calc(.8rem * var(--reading-scale, 1)); font-weight: 700;
}
.ebh-card-chips .ebh-chip-login { background: rgba(52, 211, 153, .14); color: var(--ui-green); }
.ebh-card-chips .ebh-chip-login i { font-size: calc(.66rem * var(--reading-scale, 1)); }
.ebh-card-cta {
	display: flex; align-items: center; gap: .4rem;
	margin-top: .2rem; padding-top: .7rem; border-top: 1px solid color-mix(in srgb, var(--t-solid) 30%, rgba(var(--ui-tint), .08));
	color: var(--t); font-size: calc(.95rem * var(--reading-scale, 1)); font-weight: 800;
}
.ebh-card-cta i { font-size: calc(.72rem * var(--reading-scale, 1)); transition: transform .2s ease; }
.ebh-card:hover .ebh-card-cta i { transform: translateX(3px); }
.ebh-card-more {
	display: flex; align-items: center; gap: .5rem;
	min-height: 44px; margin: -.2rem 1.15rem 1rem; padding: .45rem .8rem; box-sizing: border-box;
	border-radius: 10px; border: 1px solid color-mix(in srgb, var(--t-solid) 45%, transparent);
	background: color-mix(in srgb, var(--t-solid) 14%, transparent);
	color: var(--ui-strong); font-size: calc(.9rem * var(--reading-scale, 1)); font-weight: 800; text-decoration: none;
	transition: background-color .15s ease;
}
.ebh-card-more i { color: var(--t); }
.ebh-card-more:hover { background: color-mix(in srgb, var(--t-solid) 26%, transparent); }
.ebh-more-go { margin-left: auto; font-size: calc(.72rem * var(--reading-scale, 1)); }

/* ---------- ใบงานพิมพ์ได้ทันที (หมวดอาจารย์) ---------- */
.ebh-print {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
	margin-top: 1rem; padding: .75rem 1rem; border-radius: 16px;
	background: color-mix(in srgb, var(--t-solid) 9%, var(--sc-bg2));
	border: 1px solid color-mix(in srgb, var(--t-solid) 35%, transparent);
}
.ebh-print[hidden] { display: none; }
.ebh-print-label { margin-right: .3rem; color: var(--t); font-size: calc(.92rem * var(--reading-scale, 1)); font-weight: 800; }
.ebh-print-label i { margin-right: .2rem; }
.ebh-print-link {
	display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .95rem; box-sizing: border-box;
	border-radius: 999px; border: 1px solid var(--sc-line); background: rgba(var(--ui-tint), .06);
	color: var(--ui-ink2); font-size: calc(.88rem * var(--reading-scale, 1)); font-weight: 800; text-decoration: none;
}
.ebh-print-link i { color: var(--t); }
.ebh-print-link:hover { background: rgba(var(--ui-tint), .12); color: var(--ui-strong); }

/* ---------- ไม่พบ ---------- */
.ebh-empty { padding: 2.5rem 1rem 1rem; text-align: center; color: var(--sc-muted); }
.ebh-empty[hidden] { display: none; }
.ebh-empty > i { font-size: calc(2rem * var(--reading-scale, 1)); color: var(--sc-indigo); }
.ebh-empty p { margin: .7rem 0 1.1rem; font-size: max(.875rem, calc(1rem * var(--reading-scale, 1))); }
.ebh-empty b { color: var(--ui-strong); }
.ebh-empty-reset { font-family: inherit; }

/* ---------- โฟกัสคีย์บอร์ด ---------- */
.ebh-step:focus-visible, .ebh-card a:focus-visible, .ebh-print-link:focus-visible, .ebh-chip:focus-visible, .ebh-empty-reset:focus-visible {
	outline: 3px solid var(--sc-gold); outline-offset: 3px;
}

/* ---------- จอแคบ ---------- */
@media (max-width: 1180px) {
	.ebh-grid--n4 > .ebh-card { grid-column: span 6; }
}
@media (max-width: 900px) {
	.ebh-grid > .ebh-card, .ebh-grid--n5 > .ebh-card:nth-child(-n+2) { grid-column: span 6; }
	.ebh-grid--n5 > .ebh-card:first-child { grid-column: span 12; }
	.ebh-filter-inner { gap: .5rem; }
	.ebh-search { flex-basis: 220px; }
}
@media (max-width: 640px) {
	.ebh-bill-art { object-position: 76% 42%; }
	.ebh-path-steps { grid-template-columns: minmax(0, 1fr); }
	.ebh-filter-inner { flex-direction: column; align-items: stretch; gap: 0; }
	.ebh-search { flex-basis: auto; margin-bottom: .55rem; }
	.ebh-groups { gap: 2.6rem; }
	.ebh-head { min-height: 0; padding: 1rem 1rem 1rem 1.1rem; }
	.ebh-head-art { width: 78%; opacity: .4; }
	.ebh-head::before {
		background:
			radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--t-solid) 22%, transparent) 0%, transparent 55%),
			linear-gradient(90deg, var(--sc-bg2) 0%, rgba(var(--ui-lpanel-rgb, 15, 23, 48), .82) 45%, rgba(var(--ui-lpanel-rgb, 15, 23, 48), .45) 100%);
	}
	.ebh-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
	.ebh-grid > .ebh-card, .ebh-grid--n5 > .ebh-card:first-child, .ebh-grid--n5 > .ebh-card:nth-child(-n+2) { grid-column: auto; }
	.ebh-card-main { padding: 1rem; }
	.ebh-card-more { margin: -.2rem 1rem 1rem; }
	.ebh-subj { gap: 1.5rem; }
	.ebh-subj-head { flex-wrap: wrap; gap: .8rem; }
	.ebh-subj-txt { flex: 1 1 calc(100% - 66px); }
	.ebh-subj-head .ebh-count { margin-left: calc(50px + .8rem); }
	.ebh-subj-ic { width: 50px; height: 50px; border-radius: 15px; font-size: calc(1.25rem * var(--reading-scale, 1)); }
	.ebh-feature { flex-direction: column; min-height: 0; }
	.ebh-feature-art { position: relative; z-index: 0; width: 100%; height: 170px; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
	.ebh-feature::before { display: none; }
	.ebh-feature-body { padding: 0 1rem 1.1rem; margin-top: -1.4rem; position: relative; }
	.ebh-feature-actions { width: 100%; }
	.ebh-feature-actions .sc-btn { flex: 1 1 100%; justify-content: center; }
	.ebh-print { padding: .75rem; }
	.ebh-print-label { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.ebh-card, .ebh-step, .ebh-card-cta i, .ebh-step-go { transition: none; }
	.ebh-card:hover { transform: none; }
}

/* ── โหมดสว่าง: ไอคอนการ์ด/เลขหมวด = พื้นสีอ่อน + ไอคอนสีหมวด + กรอบ (ไม่ทึบ · หลวงพี่สั่ง ๑๐ ต.ค. ๒๕๖๙)
      หัวหมวดไล่สีขาว (ไม่ใช่ครามโปร่ง) · คำอธิบายหัวหมวดไม่มีเงาดำ ── */
html[data-ui="light"] .ebh-card-ic,
html[data-ui="light"] .ebh-no {
	background: color-mix(in srgb, var(--t-solid) 11%, #fff); color: color-mix(in srgb, var(--t-solid) 70%, #000);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t-solid) 38%, transparent);
}
html[data-ui="light"] .ebh-head::before {
	background:
		radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--t-solid) 12%, transparent) 0%, transparent 55%),
		linear-gradient(90deg, #fff 0%, #fff 38%, rgba(255, 255, 255, .7) 68%, rgba(255, 255, 255, .15) 100%);
}
html[data-ui="light"] .ebh-course-head .ebh-head-lead { text-shadow: none; }
html[data-ui="light"] .ebh-feature::before {
	background: linear-gradient(90deg, #fff 0%, #fff 40%, rgba(255, 255, 255, .6) 70%, rgba(255, 255, 255, 0) 100%);
}
html[data-ui="light"] .ebh-subj-ic { background: color-mix(in srgb, var(--t-solid) 12%, #fff); color: color-mix(in srgb, var(--t-solid) 72%, #000); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t-solid) 40%, transparent); }
html[data-ui="light"] .ebh-subj-kicker, html[data-ui="light"] .ebh-feature-link:hover { color: color-mix(in srgb, var(--t-solid) 75%, #000); }
html[data-ui="light"] .ebh-h-ic { color: color-mix(in srgb, var(--t-solid) 75%, #000); }

/* หมวดประโยคสูง (๑๔ ต.ค. ๒๕๖๙) — สีต่างจาก ป.๑-๒ ให้แยกชั้นได้ด้วยตา */
.ebh-tone-pt3 { --t: var(--ui-sky); --t-solid: #0ea5e9; --t-deep: #075985; }
.ebh-tone-tm  { --t: var(--ui-rose); --t-solid: #e11d48; --t-deep: #881337; }
.ebh-tone-mt  { --t: var(--ui-green); --t-solid: #10b981; --t-deep: #065f46; }