/* สไลด์สอน + แผ่นบทเรียนของเกมเส้นทางนักแปล — ยกออกมาจาก app/pages/journey-world.php
   (๓๑ ก.ค. ๒๕๖๙) เพื่อให้หน้าเรียน /journey-study ใช้ดีไซน์เดียวกัน แก้ที่เดียวมีผลทั้งสองหน้า
   ยกมาทั้งบล็อกตามลำดับเดิมทุกบรรทัด ไม่คัดออกทีละ selector — คลาสอย่าง .t-nn .cw .vn-1
   .is-thai ก็เป็นของการ์ดสไลด์ (ตัวสร้างคือ bin/lesson_deck_lib.py) ถ้าคัดมือจะตกหล่น
   ลำดับ cascade คงเดิม: journey-world.php แบ่ง <style> เป็น ก่อน → <link> ตัวนี้ → หลัง */
	.jw-sheet { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column;
		justify-content: flex-end; background: rgba(15,23,42,.55); }
	.jw-sheet-full { justify-content: stretch; background: radial-gradient(120% 80% at 50% 0%, #4338ca 0%, #312e81 42%, #1e1b4b 100%); }
	/* ── บทเรียนกับผู้รู้ ── */
	.jw-lesson-card { background: #fff; border-radius: 22px; box-shadow: 0 18px 44px -18px rgba(15,23,42,.55); }
	.jw-lesson-md { max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
	.jw-lesson-md .dony-content h1 { font-size: calc(1.25rem * var(--reading-scale, 1)); }
	.jw-walk-pali { font-size: calc(clamp(1.25rem, 4.6vw, 1.75rem) * var(--reading-scale, 1)); line-height: 2; font-weight: 700; color: #1e1b4b; }
	.jw-walk-pali .jw-hl { background: #fde68a; color: #78350f; border-radius: 8px; padding: 1px 7px; box-shadow: 0 0 0 2px #f59e0b66; }
	.jw-walk-pali .jw-pali-done { opacity: .38; }
	.jw-walk-phrase { display: flex; align-items: baseline; gap: 8px; padding: 7px 12px; border-radius: 14px; }
	.jw-walk-phrase.is-now { background: #fef3c7; box-shadow: inset 0 0 0 1.5px #fcd34d; }
	.jw-walk-phrase .role { flex: none; font-size: calc(12px * var(--reading-scale, 1)); font-weight: 800; color: #6d28d9; background: #f5f3ff; border-radius: 8px; padding: 2px 8px; }
	.jw-walk-phrase .txt { font-size: calc(1.02rem * var(--reading-scale, 1)); font-weight: 700; color: #1f2937; }
	.jw-walk-notes { display: grid; gap: 7px; margin-top: 10px; }
	.jw-walk-note { border: 1.5px solid #c7d2fe; border-radius: 15px; padding: 9px 12px; background: #fff; }
	.jw-walk-note.is-supplied { border-color: #fed7aa; background: #fff7ed; }
	.jw-walk-note.is-sandhi { border-color: #c4b5fd; background: #f5f3ff; }
	.jw-walk-note-title { display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
		font-size: calc(.88rem * var(--reading-scale, 1)); font-weight: 900; line-height: 1.4; color: #6d28d9; }
	.jw-walk-note.is-supplied .jw-walk-note-title { color: #c2410c; }
	.jw-supplied-formula, .jw-sandhi-formula { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
		gap: 7px; text-align: center; line-height: 1.45; }
	.jw-supplied-formula { font-size: calc(1.08rem * var(--reading-scale, 1)); color: #7c2d12; }
	.jw-supplied-formula b { font-size: calc(1.28rem * var(--reading-scale, 1)); color: #9a3412; }
	.jw-supplied-formula strong { font-weight: 800; }
	.jw-sandhi-surface { font-size: calc(1.24rem * var(--reading-scale, 1)); color: #312e81; }
	.jw-sandhi-eq, .jw-sandhi-plus { flex: none; font-size: calc(1.08rem * var(--reading-scale, 1)); font-weight: 900; color: #94a3b8; }
	.jw-sandhi-part-wrap { display: inline-flex; align-items: center; gap: 7px; }
	.jw-sandhi-part { display: inline-flex; flex-direction: column; align-items: center; min-width: 92px;
		border: 1px solid #a5b4fc; border-radius: 11px; padding: 5px 10px; background: #fff; color: #3730a3; }
	.jw-sandhi-part.is-iti { border-color: #f9a8d4; background: #fff1f7; color: #be185d; }
	.jw-sandhi-part b { font-size: calc(1.2rem * var(--reading-scale, 1)); font-weight: 900; }
	.jw-sandhi-part small { font-size: calc(.82rem * var(--reading-scale, 1)); font-weight: 800; color: #64748b; }
	/* ตัวเลือกขั้นลองแปลเอง — คราม = สิ่งที่กดได้; เลข + ลูกศรช่วยบอก affordance โดยไม่พึ่งสีอย่างเดียว */
	.jw-choice-area { margin-top: 10px; padding-bottom: 8px; }
	.jw-choice-prompt { display: flex; align-items: center; gap: 7px; margin: 0 2px 8px;
		color: #4338ca; font-size: calc(.92rem * var(--reading-scale, 1)); font-weight: 900; line-height: 1.4; }
	.jw-choice-prompt i { color: #4f46e5; }
	.jw-choice-prompt small { margin-left: auto; border-radius: 999px; padding: 3px 9px;
		background: #e0e7ff; color: #3730a3; font-size: calc(.78rem * var(--reading-scale, 1)); font-weight: 800; }
	.jw-choice-list { display: grid; gap: 8px; }
	.jw-chip.jw-translation-choice { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px;
		align-items: center; gap: 11px; width: 100%; min-height: 56px; border: 1.5px solid #c7d2fe;
		border-radius: 14px; padding: 9px 12px; background: #eef2ff; color: #312e81; box-shadow: none;
		font-size: calc(1.05rem * var(--reading-scale, 1)); font-weight: 800; line-height: 1.45; text-align: left;
		cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
	.jw-choice-marker { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
		border-radius: 10px; background: #4f46e5; color: #fff; font-size: calc(.9rem * var(--reading-scale, 1));
		font-weight: 900; line-height: 1; }
	.jw-choice-text { min-width: 0; overflow-wrap: anywhere; }
	.jw-choice-arrow { justify-self: end; color: #4f46e5; font-size: calc(.88rem * var(--reading-scale, 1)); }
	@media (hover: hover) {
		.jw-chip.jw-translation-choice:hover { border-color: #6366f1; background: #e0e7ff; transform: translateY(-1px); }
	}
	.jw-chip.jw-translation-choice:focus-visible { outline: 3px solid #4f46e5; outline-offset: 2px; border-color: #312e81; }
	.jw-chip.jw-translation-choice:active { border-color: #4f46e5; background: #c7d2fe; transform: scale(.985); }
	@media (prefers-reduced-motion: reduce) {
		.jw-chip.jw-translation-choice { transition: none; }
		.jw-chip.jw-translation-choice:hover, .jw-chip.jw-translation-choice:active { transform: none; }
	}
	.jw-walk-tapline { animation: jwPulse 1.6s ease-in-out infinite; }
	@keyframes jwPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
	.jw-lesson-dots { display: flex; gap: 5px; }
	.jw-lesson-dots i { width: 8px; height: 8px; border-radius: 99px; background: #c7d2fe; }
	.jw-lesson-dots i.on { background: #4f46e5; width: 20px; }
	.jw-check-shake { animation: jwShake .4s; }
	/* ══ สไลด์สอน (deck) — ดีไซน์เดียวทุกการ์ด ══
	   สีลิงค์ตรงกับเกมวิภัตติ (/vibhatti/formula): ปุงลิงค์ น้ำเงิน · นปุงสกลิงค์ ส้ม · อิตถีลิงค์ ชมพู
	   สีชนิดนาม ตามสไลด์หลวงพี่ Ep.01: นามนาม น้ำเงิน · คุณนาม ม่วง · สัพพนาม ส้ม */
	.vd-slide { --vd-caption-size: calc(.875rem * var(--reading-scale, 1)); padding: 4px 2px 10px; }
	.vd-eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
	.vd-eyebrow .step { font-size: calc(13px * var(--reading-scale, 1)); font-weight: 800; color: #6366f1; letter-spacing: .01em; }
	.vd-chip-linga { font-size: calc(13px * var(--reading-scale, 1)); font-weight: 800; border-radius: 999px; padding: 3px 11px; border: 1.5px solid; }
	.vd-h1 { font-size: calc(1.55rem * var(--reading-scale, 1)); font-weight: 800; color: #1e1b4b;
		line-height: 1.45; text-align: center; letter-spacing: -.01em; }
	.vd-h1 .sub { display: block; font-size: calc(.95rem * var(--reading-scale, 1)); font-weight: 700; color: #6366f1; margin-top: 4px; }
	.vd-lead { margin: 10px auto 0; max-width: 34em; text-align: center; color: #475569;
		font-size: calc(1rem * var(--reading-scale, 1)); line-height: 1.75; }
	.vd-lead b { color: #1e1b4b; }
	.vd-rule { height: 1px; background: linear-gradient(90deg, transparent, #e0e7ff 20%, #e0e7ff 80%, transparent); margin: 14px 0; }

	/* การ์ดนิยาม: แถบสีซ้าย + หัวคำ + คำอธิบาย + ตัวอย่าง */
	.vd-defs { display: grid; gap: 10px; margin-top: 12px; }
	.vd-def { text-align: left; background: #fff; border: 1.5px solid #e5e7eb; border-left-width: 6px;
		border-radius: 14px; padding: 10px 14px; }
	.vd-def-term { font-size: calc(1.2rem * var(--reading-scale, 1)); font-weight: 800; line-height: 1.5; }
	.vd-def-desc { color: #475569; font-size: calc(.95rem * var(--reading-scale, 1)); line-height: 1.65; margin-top: 2px; }
	.vd-def-ex { margin-top: 6px; font-size: calc(1.05rem * var(--reading-scale, 1)); font-weight: 700; color: #1e1b4b; }
	.vd-def-ex .th { font-weight: 600; color: #047857; }
	/* สีประเภท */
	.t-nn  { border-left-color: #1d4ed8; } .t-nn  .vd-def-term { color: #1d4ed8; }
	.t-gn  { border-left-color: #7c3aed; } .t-gn  .vd-def-term { color: #7c3aed; }
	.t-sn  { border-left-color: #c2410c; } .t-sn  .vd-def-term { color: #c2410c; }
	.t-pum { border-left-color: #1d4ed8; } .t-pum .vd-def-term { color: #1d4ed8; }
	.t-it  { border-left-color: #db2777; } .t-it  .vd-def-term { color: #db2777; }
	.t-nap { border-left-color: #c2410c; } .t-nap .vd-def-term { color: #c2410c; }
	.c-pum { color: #1d4ed8; background: #eff6ff; border-color: #93c5fd; }
	.c-it  { color: #db2777; background: #fff1f7; border-color: #fb7185; }
	.c-nap { color: #c2410c; background: #fff7ed; border-color: #fdba74; }

	/* บล็อกเทียบสำนวน — มีป้ายหัวแถวชัดว่าบรรทัดไหนคืออะไร */
	.vd-cmp { display: grid; gap: 10px; margin-top: 12px; }
	.vd-cmp-card { text-align: left; border-radius: 16px; padding: 10px 14px 12px; }
	.vd-cmp-card.is-thai { background: #f8fafc; border: 1.5px solid #e2e8f0; }
	.vd-cmp-card.is-pali { background: #eef2ff; border: 1.5px solid #c7d2fe; }
	.vd-cmp-label { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--reading-scale, 1)); font-weight: 800;
		border-radius: 999px; padding: 3px 11px; margin-bottom: 6px; }
	.is-thai .vd-cmp-label { color: #475569; background: #e2e8f0; }
	.is-pali .vd-cmp-label { color: #3730a3; background: #c7d2fe; }
	.vd-cmp-text { font-size: calc(1.15rem * var(--reading-scale, 1)); font-weight: 700; color: #334155; line-height: 1.85; }
	.is-pali .vd-cmp-text { font-size: calc(1.35rem * var(--reading-scale, 1)); color: #1e1b4b; }
	.vd-cmp-text .ay { color: #b45309; background: #fef3c7; border-radius: 7px; padding: 0 6px;
		font-weight: 800; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

	/* ตารางหน้าที่ของคำ: [คำเชื่อม] → หน้าที่ */
	.vd-fn-head { margin-top: 14px; font-size: calc(1rem * var(--reading-scale, 1)); font-weight: 800; color: #1e1b4b; text-align: center; }
	.vd-fn { display: grid; gap: 7px; margin-top: 8px; }
	.vd-fn-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #e5e7eb;
		border-radius: 13px; padding: 7px 12px; text-align: left; }
	.vd-fn-word { flex: 0 1 auto; min-width: 3.4em; max-width: 46%; white-space: normal; overflow-wrap: anywhere;
		text-align: center; font-size: calc(1.2rem * var(--reading-scale, 1));
		font-weight: 800; color: #b45309; background: #fef3c7; border: 1.5px solid #fde68a; border-radius: 10px; padding: 1px 10px; }
	.vd-fn-word small { display: block; margin-top: 1px; font-size: calc(.78rem * var(--reading-scale, 1));
		font-weight: 800; color: #92400e; opacity: .9; }
	.vd-fn-arrow { flex: none; color: #cbd5e1; font-weight: 800; }
	.vd-fn-body { flex: 1; min-width: 0; }
	.vd-fn-role { display: block; font-size: calc(1.05rem * var(--reading-scale, 1)); font-weight: 800; color: #1e1b4b; line-height: 1.45; }
	.vd-fn-note { display: block; font-size: var(--vd-caption-size); color: #64748b; line-height: 1.5; margin-top: 2px; }

	/* คู่คำ: คุณนาม + นามนาม ท้ายคำล้อกัน */
	.vd-pair-list { display: grid; gap: 10px; margin-top: 12px; }
	.vd-pair { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 16px; padding: 10px 12px 12px; }
	.vd-pair-words { display: flex; align-items: flex-end; justify-content: center; gap: 14px; flex-wrap: wrap; }
	.vd-pair-w { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
	.vd-pair-tag { font-size: calc(12px * var(--reading-scale, 1)); font-weight: 800; border-radius: 999px; padding: 2px 9px; }
	.vd-pair-w.is-gn .vd-pair-tag { color: #6d28d9; background: #f3e8ff; }
	.vd-pair-w.is-nn .vd-pair-tag { color: #1d4ed8; background: #dbeafe; }
	.vd-pair-w.is-gn .vd-word { color: #6d28d9; }
	.vd-pair-w.is-nn .vd-word { color: #1d4ed8; }
	.vd-pair-trans { margin-top: 8px; text-align: center; font-size: calc(1.18rem * var(--reading-scale, 1));
		font-weight: 800; color: #047857; line-height: 1.6; }
	.vd-pair-note { margin-top: 4px; text-align: center; font-size: var(--vd-caption-size);
		color: #64748b; line-height: 1.5; }

	/* ตัวอย่างจากเล่ม: บรรทัดบาลี → บรรทัดคำแปล (verbatim) */
	.vd-ex-list { display: grid; gap: 10px; margin-top: 12px; }
	.vd-ex { text-align: left; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 16px;
		padding: 9px 13px 11px; }
	.vd-ex-label { display: inline-block; font-size: calc(13px * var(--reading-scale, 1)); font-weight: 800; color: #3730a3;
		background: #e0e7ff; border-radius: 999px; padding: 2px 10px; margin-bottom: 5px; }
	.vd-ex-pali { font-size: calc(1.22rem * var(--reading-scale, 1)); font-weight: 800; color: #1e1b4b;
		line-height: 1.7; }
	.vd-ex-thai { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #dbe2ea;
		font-size: calc(1.12rem * var(--reading-scale, 1)); font-weight: 700; color: #334155; line-height: 1.8; }
	/* คำคู่บาลี↔ไทย — ศัพท์ที่บทนี้สอน กับคำแปลของมัน ใช้สีเดียวกัน สายตาจับคู่ได้ทันที
	   พื้นเต็มความสูง (ไม่ใช่ขีดใต้) เพราะขีดใต้จะทับพินทุ/สระล่างของบาลี */
	.vd-ex-pali b, .vd-ex-thai b { color: #b91c1c; background: #fff1f2;
		box-shadow: 0 0 0 1px #fecdd3; border-radius: 6px; padding: .04em .28em;
		-webkit-box-decoration-break: clone; box-decoration-break: clone; }
	.vd-ex-thai b { font-weight: 900; }
	/* ตุํ ที่เป็นประธานต้องแปลฉีกจากธาตุ: ใช้สีน้ำเงินคู่กันทั้ง ตุํ ↔ อ.อัน
	   ส่วนธาตุ ↔ คำแปลกิริยา ยังคงใช้สีชมพูของคำคู่ตามปกติ */
	.vd-tum-pair { color: #1d4ed8; background: #eff6ff;
		box-shadow: 0 0 0 1px #bfdbfe; border-radius: 6px; padding: .04em .28em;
		font-weight: 900; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
	.vd-tum-pair .cw { color: inherit; }
	/* ธาตุและคำแปลของธาตุใช้อีกสีหนึ่ง: โส ↔ ฟัง, ทา ↔ ถวาย */
	.vd-root-pair { color: #047857; background: #ecfdf5;
		box-shadow: 0 0 0 1px #a7f3d0; border-radius: 6px; padding: .04em .28em;
		font-weight: 900; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
	.vd-root-pair .cw { color: inherit; }
	/* กรรมผู้ถูกใช้ของเหตุกัตตุวาจก: สามเณรํ ↔ ยังสามเณร */
	.vd-cause-object-pair { color: #be185d; background: #fdf2f8;
		box-shadow: 0 0 0 1px #fbcfe8; border-radius: 6px; padding: .04em .28em;
		font-weight: 900; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
	.vd-cause-object-pair .cw { color: inherit; }
	/* บททุติยาวิภัตติและคำแปลทั้งวลี: ธมฺมํ ↔ ซึ่งธรรม */
	.vd-object-pair { color: #c2410c; background: #fff7ed;
		box-shadow: 0 0 0 1px #fed7aa; border-radius: 6px; padding: .04em .28em;
		font-weight: 900; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
	.vd-object-pair .cw { color: inherit; }
	/* ประธาน บทตติยาวิภัตติ และบทบอกความสัมพันธ์ ใช้สีเดียวกับอายตนิบาตเดิม */
	.vd-subject-pair { color: #4338ca; background: #eef2ff;
		box-shadow: 0 0 0 1px #c7d2fe; border-radius: 6px; padding: .04em .28em;
		font-weight: 900; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
	.vd-agent-pair { color: #6d28d9; background: #f5f3ff;
		box-shadow: 0 0 0 1px #ddd6fe; border-radius: 6px; padding: .04em .28em;
		font-weight: 900; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
	.vd-relation-pair { color: #0369a1; background: #f0f9ff;
		box-shadow: 0 0 0 1px #bae6fd; border-radius: 6px; padding: .04em .28em;
		font-weight: 900; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
	.vd-subject-pair .cw, .vd-agent-pair .cw, .vd-relation-pair .cw { color: inherit; }
	/* พื้นสีชมพู = คู่กับศัพท์บาลีตัวนี้ · สีตัวอักษร = หน้าที่ของคำ (อายตนิบาต/วาจก)
	   สองอย่างนี้ทำคนละหน้าที่ จึงซ้อนกันได้ — อายตนิบาตในคำคู่คงสีเดิมไว้ */
	.vd-ex-note { margin-top: 5px; font-size: var(--vd-caption-size); color: #64748b; line-height: 1.55; }

	/* เดินประโยค: ป้ายบน (วิภัตติ/ลิงค์) · บาลีตัวใหญ่ · คำแปลศัพท์ใต้คำ · เลขลำดับแปล */
	.vd-gw { margin-top: 12px; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 18px; padding: 12px 10px; }
	.vd-gw-question { margin-bottom: 10px; text-align: left; background: #eef2ff;
		border: 1.5px solid #c7d2fe; border-radius: 14px; padding: 8px 12px 10px; }
	.vd-gw-question-label, .vd-gw-words-label { display: inline-block; color: #3730a3; background: #e0e7ff;
		border-radius: 999px; padding: 2px 10px; font-size: calc(13px * var(--reading-scale, 1));
		font-weight: 800; line-height: 1.45; }
	.vd-gw-question-text { display: block; margin-top: 3px; color: #1e1b4b;
		font-size: calc(1.3rem * var(--reading-scale, 1)); font-weight: 900; line-height: 1.7;
		overflow-wrap: anywhere; }
	.vd-gw-words-label { margin: 0 0 9px; }
	.vd-gw-row { display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-wrap: wrap; }
	.vd-gw-w { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
		background: #fff; border: 1.5px solid #e5e7eb; border-radius: 14px; padding: 6px 12px 8px; min-width: 4.6em; }
	.vd-gw-top { font-size: calc(14px * var(--reading-scale, 1)); font-weight: 800; color: #4f46e5; min-height: 18px; letter-spacing: .01em; }
	.vd-gw-pali { font-size: calc(1.45rem * var(--reading-scale, 1)); font-weight: 800; color: #1e1b4b; line-height: 1.45; }
	.vd-gw-gloss { font-size: calc(.9rem * var(--reading-scale, 1)); font-weight: 700; color: #64748b; line-height: 1.4; }
	.vd-gw-order { position: absolute; top: -10px; right: -8px; width: 24px; height: 24px; border-radius: 999px;
		display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: #6366f1;
		box-shadow: 0 1px 4px rgba(79, 70, 229, .35); }
	.vd-gw-w.k-nn { border-color: #93c5fd; } .vd-gw-w.k-nn .vd-gw-pali { color: #1d4ed8; }
	.vd-gw-w.k-gn { border-color: #c4b5fd; } .vd-gw-w.k-gn .vd-gw-pali { color: #6d28d9; }
	.vd-gw-w.k-sn { border-color: #fdba74; } .vd-gw-w.k-sn .vd-gw-pali { color: #c2410c; }
	.vd-gw-w.k-v  { border-color: #6ee7b7; } .vd-gw-w.k-v  .vd-gw-pali { color: #047857; }
	.vd-gw-w.k-nb { border-color: #fcd34d; } .vd-gw-w.k-nb .vd-gw-pali { color: #b45309; }
	/* กิริยากิตก์ (ต อนฺต มาน ตฺวา อนีย ตพฺพ) = ฟ้าอมเขียว — ต้องคนละสีกับกิริยาคุมพากย์
	   ที่เป็นเขียว ไม่งั้นผู้เรียนแยกไม่ออกว่าตัวไหนคุมพากย์ ตัวไหนเป็นกิตก์
	   (หลวงพี่สั่ง ๔ ส.ค. ๒๕๖๙ — ให้คนละสีทั้งบาลีและคำแปลไทย) */
	.vd-gw-w.k-kt { border-color: #67e8f9; } .vd-gw-w.k-kt .vd-gw-pali { color: #0e7490; }
	.vd-gw-w.k-kt .vd-gw-top { color: #0e7490; }
	/* คำกิริยาในสำนวนแปล — สีเดียวกับกล่องบาลีของมัน จะได้โยงกันได้ทันที */
	.vd-gw-out-text .gth-kt { color: #0e7490; font-weight: 800; }
	.vd-gw-out-text .gth-v  { color: #047857; font-weight: 800; }
	.vd-gw-out { margin-top: 12px; text-align: left; background: #fff; border: 1.5px solid #c7d2fe;
		border-radius: 14px; padding: 8px 12px 10px; }
	.vd-gw-out-label { display: inline-block; font-size: calc(13px * var(--reading-scale, 1)); font-weight: 800; color: #3730a3;
		background: #e0e7ff; border-radius: 999px; padding: 2px 10px; margin-bottom: 4px; }
	.vd-gw-out-text { display: block; font-size: calc(1.28rem * var(--reading-scale, 1)); font-weight: 800;
		color: #1e1b4b; line-height: 1.75; }
	/* คำเชื่อมในสำนวนแปล — คนละสี ให้เห็นว่าคำไหนมาจากวิภัตติ/วาจก */
	.cw { font-weight: 900; }
	.cw-o     { color: #4338ca; }   /* อ. = ประธาน */
	.cw-sueng { color: #c2410c; }   /* ซึ่ง = กรรม */
	.cw-an    { color: #7c3aed; }   /* อัน = ผู้ทำในกัมมวาจก */
	.cw-yang  { color: #db2777; }   /* ยัง = ผู้ถูกใช้ */
	.cw-hai   { color: #047857; }   /* ให้ = เครื่องหมายเหตุวาจก */
	.cw-etc   { color: #0369a1; }   /* สู่ แก่ แต่ ของ ใน … */
	/* คำในกรอบเหลือง (สำนวนแปลโดยพยัญชนะ) — พื้นเหลืองคงไว้ แต่ตัวหนังสือใช้สีประจำคำ */
	.vd-cmp-text .ay-o     { color: #3730a3; }
	.vd-cmp-text .ay-sueng { color: #9a3412; }
	.vd-cmp-text .ay-an    { color: #6d28d9; }
	.vd-cmp-text .ay-yang  { color: #be185d; }
	.vd-cmp-text .ay-hai   { color: #047857; }
	.vd-cmp-text .ay-etc   { color: #075985; }
	/* ตารางสูตรวาจก — คำเชื่อมมีคอลัมน์ของตัวเอง คนละสี */
	.vd-vg { margin-top: 12px; border-radius: 18px; overflow: hidden;
		border: 1.5px solid #e2e8f0; background: #fff; }
	.vd-vg-row { display: grid; grid-template-columns: 1.55fr repeat(5, minmax(0, 1fr));
		align-items: center; border-top: 1px solid #eef2ff; }
	.vd-vg-row:first-child { border-top: 0; }
	.vd-vg-row.is-head { background: #eef2ff; }
	.vd-vg-row.is-head > span { text-align: center; padding: 7px 2px;
		font-size: calc(1.02rem * var(--reading-scale, 1)); }
	.vd-vg-row.is-head .name { text-align: left; padding-left: 11px; font-size: calc(.82rem * var(--reading-scale, 1));
		font-weight: 800; color: #3730a3; }
	.vd-vg-row .name { text-align: left; padding: 7px 8px 7px 11px; }
	.vd-vg-row .name b { display: block; font-size: calc(.88rem * var(--reading-scale, 1));
		font-weight: 800; color: #1e1b4b; line-height: 1.35; }
	.vd-vg-row .name small { display: block; font-size: var(--vd-caption-size);
		color: #64748b; line-height: 1.35; }
	.vd-vg-row .cell { text-align: center; padding: 6px 2px; line-height: 1.15; }
	.vd-vg-row .cell small { display: block; font-size: calc(.92rem * var(--reading-scale, 1));
		font-weight: 900; opacity: .95; }
	.vd-vg-row .cell b { display: block; font-size: calc(1.12rem * var(--reading-scale, 1)); font-weight: 900; }
	.vd-vg-row .cell.is-off { color: #dbe1fb; font-size: calc(1rem * var(--reading-scale, 1)); font-weight: 900; }
	@media (max-width: 460px) {
		.vd-vg-row { grid-template-columns: 1.32fr repeat(5, minmax(0, 1fr)); }
		.vd-vg-row .name { padding-left: 8px; }
		.vd-vg-row .name b { font-size: calc(.8rem * var(--reading-scale, 1)); }
		.vd-vg-row .name small { font-size: var(--vd-caption-size); }
	}

	/* เลขวิภัตติบนกล่อง — ใหญ่ เด่น สีล้อกับคำเชื่อมของวิภัตตินั้น */
	.vd-gw-top .vn { font-size: 1.45em; font-weight: 900; line-height: 1; vertical-align: -1px; }
	.vn-1 { color: #4338ca; } .vn-2 { color: #c2410c; } .vn-3 { color: #7c3aed; }
	.vn-4 { color: #0e7490; } .vn-5 { color: #a16207; } .vn-6 { color: #be123c; }
	.vn-7 { color: #15803d; } .vn-8 { color: #6d28d9; }

	/* สูตรครัว: ธาตุ + ปัจจัย + วิภัตติ = คำ */
	.vd-rx { margin-top: 12px; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 18px; padding: 12px 10px; }
	.vd-rx-row { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
	.vd-rx-part { display: inline-flex; flex-direction: column; align-items: center; background: #fff;
		border: 1.5px solid #e5e7eb; border-radius: 13px; padding: 5px 11px 6px; }
	.vd-rx-part b { font-size: calc(1.22rem * var(--reading-scale, 1)); font-weight: 800; color: #1e1b4b; line-height: 1.45; }
	.vd-rx-part small { font-size: var(--vd-caption-size); font-weight: 700; color: #64748b; line-height: 1.45; }
	.vd-rx-part.is-out { background: #eef2ff; border-color: #c7d2fe; }
	.vd-rx-part.is-out b { color: #3730a3; }
	.vd-rx-grp { display: inline-flex; align-items: center; gap: 6px; }
	.vd-rx-op { font-size: calc(1.1rem * var(--reading-scale, 1)); font-weight: 800; color: #cbd5e1; }
	.vd-rx-final { margin-top: 10px; text-align: center; background: #fff; border: 1.5px solid #6ee7b7;
		border-radius: 14px; padding: 8px 12px 10px; }
	.vd-rx-final-label { display: block; font-size: calc(13px * var(--reading-scale, 1)); font-weight: 800; color: #047857; margin-bottom: 2px; }
	.vd-rx-final b { font-size: calc(1.5rem * var(--reading-scale, 1)); font-weight: 800; color: #065f46; }
	.vd-rx-arrow { margin: 0 8px; color: #a7f3d0; font-weight: 800; }
	.vd-rx-trans { font-size: calc(1.12rem * var(--reading-scale, 1)); font-weight: 800; color: #047857; }
	/* เน้นสีชิ้นส่วนในคำสำเร็จ (หลวงพี่สั่ง ๓๐ ก.ค.) — น้ำเงิน = ปัจจัย · แดง = วิภัตติ
	   ต้องชนะสีของ b ในกล่องผลลัพธ์/คำสำเร็จ จึงเจาะ selector ให้ลึกกว่า */
	.vd-slide .vd-pc, .vd-slide b .vd-pc, .vd-rx-part.is-out b .vd-pc, .vd-rx-final b .vd-pc,
	.vd-gw-w .vd-gw-pali .vd-pc, .vd-gw-w.k-v .vd-gw-pali .vd-pc { color: #1d4ed8; }
	.vd-slide b .vd-end, .vd-rx-part.is-out b .vd-end, .vd-rx-final b .vd-end { color: #dc2626; }
	.vd-rx-part.is-pc { border-color: #93c5fd; background: #eff6ff; }
	.vd-rx-part.is-pc > b { color: #1d4ed8; }
	.vd-form { font-weight: 800; }

	/* คลิปสอนจำ (YouTube) + บล็อกการันต์ที่สอง */
	.vd-video { position: relative; margin-top: 12px; padding-top: 56.25%; border-radius: 18px;
		overflow: hidden; background: #0f172a; box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .6); }
	.vd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
	/* บล็อกการันต์: หัวข้ออยู่ซ้าย · สองการันต์ในการ์ดเดียวหน้าตาเท่ากัน คั่นด้วยเส้นประ */
	.vd-kset { margin-top: 10px; }
	.vd-kset-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; text-align: left;
		font-size: calc(1rem * var(--reading-scale, 1)); font-weight: 900; color: #4338ca;
		border-left: 5px solid #c7d2fe; padding: 1px 0 1px 10px; }
	.vd-kset-head span { font-size: calc(.85rem * var(--reading-scale, 1)); font-weight: 700; color: #64748b; }
	.vd-dash { margin: 16px 0 4px; border-top: 2px dashed #dbe1fb; }

	/* โชว์คำ (ศัพท์ตัวใหญ่ → คำแปล) */
	.vd-word { font-size: calc(clamp(2rem, 8.5vw, 2.8rem) * var(--reading-scale, 1)); font-weight: 800; color: #1e1b4b; line-height: 1.55; }
	.vd-word-sm { font-size: calc(1.5rem * var(--reading-scale, 1)); }
	.vd-showcase { margin: 12px 0 4px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
	.vd-eq { color: #a5b4fc; font-weight: 800; font-size: calc(1.3rem * var(--reading-scale, 1)); }
	.vd-trans-big { font-size: calc(1.45rem * var(--reading-scale, 1)); font-weight: 800; color: #047857; }
	.vd-end { color: #dc2626; }
	/* เครื่องหมายลอยสีแดงบนตัวฐานสีปกติ: วาดสองชั้นซ้อนตำแหน่งเดียวกัน */
	.vd-nik { position: relative; display: inline-block; }
	.vd-nik .u { color: #dc2626; }
	.vd-nik .o { position: absolute; left: 0; top: 0; color: inherit; }

	/* แถวข้อมูลของการ์ดวิภัตติ */
	.vd-kv { display: grid; gap: 8px; margin-top: 12px; }
	.vd-kv-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
	.vd-kv-label { font-size: calc(.92rem * var(--reading-scale, 1)); font-weight: 700; color: #64748b; }
	.vd-ayat-chip { display: inline-block; font-size: calc(1.08rem * var(--reading-scale, 1)); font-weight: 800;
		color: #047857; background: #ecfdf5; border: 1.5px solid #a7f3d0; border-radius: 12px; padding: 3px 12px; }
	.vd-end-chip { display: inline-block; font-size: calc(1.7rem * var(--reading-scale, 1)); font-weight: 800;
		color: #dc2626; background: #fef2f2; border: 2px solid #fecaca; border-radius: 14px; padding: 2px 18px; line-height: 1.6; }
	.vd-alt-list { margin-top: 12px; display: grid; gap: 8px; }
	.vd-alt { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
		background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 14px; padding: 6px 12px; }
	.vd-others-head { margin-top: 14px; font-size: calc(.92rem * var(--reading-scale, 1)); font-weight: 700; color: #64748b; }
	.vd-note { margin: 12px auto 0; max-width: 34em; text-align: left; color: #9a3412; background: #fff7ed;
		border: 1.5px solid #fed7aa; border-radius: 14px; padding: 9px 13px; font-size: calc(.95rem * var(--reading-scale, 1)); line-height: 1.7; }
	.vd-hint { margin-top: 12px; color: #94a3b8; font-size: calc(.88rem * var(--reading-scale, 1)); line-height: 1.7; text-align: center; }
	/* บัญชีศัพท์ + คำแปล — คำเดียวต่อบรรทัด บาลีเด่น คำแปลตาม (glosslist) */
	.vd-gl-sec { margin-top: 14px; }
	.vd-gl-sec + .vd-gl-sec { margin-top: 18px; }
	.vd-gl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; text-align: left; }
	.vd-gl-no { flex: none; width: 1.6em; height: 1.6em; border-radius: 9px; background: #4f46e5; color: #fff;
		display: grid; place-items: center; font-weight: 800; font-size: calc(.92rem * var(--reading-scale, 1)); }
	.vd-gl-title { font-weight: 800; color: #312e81; line-height: 1.45;
		font-size: calc(.98rem * var(--reading-scale, 1)); }
	.vd-gl { border: 1.5px solid #e0e7ff; border-radius: 14px; overflow: hidden; background: #fff; text-align: left; }
	.vd-gl-row { display: grid; grid-template-columns: clamp(4.4em, 38%, 10.5em) 1fr; gap: 2px 14px;
		align-items: baseline; padding: 7px 12px; }
	.vd-gl-row + .vd-gl-row { border-top: 1px solid #f1f2fb; }
	.vd-gl-row:nth-child(even) { background: #fafaff; }
	.vd-gl-pali { font-weight: 800; color: #4338ca; line-height: 1.5;
		font-size: calc(1.02rem * var(--reading-scale, 1)); }
	.vd-gl-th { color: #334155; line-height: 1.6; font-size: calc(.95rem * var(--reading-scale, 1)); }
	.vd-gl-sep { color: #c7d2fe; margin: 0 5px; font-weight: 500; }
	.vd-gl-th .vd-gl-sep { color: #cbd5e1; }
	/* ตารางหลักของบทสัพพนามมีผู้เรียนสูงวัยจำนวนมาก — ขยายเฉพาะการ์ดที่ครูกำหนด
	   โดยไม่ทำให้สไลด์เนื้อหาแน่นประเภทอื่นพองตาม */
	.vd-large-table .vd-memory { font-size: calc(1.15rem * var(--reading-scale, 1)); }
	.vd-large-table .vd-memory-heading {
		display: flex; align-items: center; min-height: 38px;
		font-size: calc(1.1rem * var(--reading-scale, 1)); line-height: 1.4; }
	.vd-large-table .vd-memory-cell { padding: 11px 12px; }
	.vd-large-table .vd-memory-value { line-height: 1.65; }
	.vd-large-table .vd-memory-label { font-size: calc(1rem * var(--reading-scale, 1)); line-height: 1.4; }
	.vd-large-table .vd-memory-value small { font-size: .92em; color: #475569; }
	.vd-large-table .vd-hint { color: #64748b; font-size: calc(1rem * var(--reading-scale, 1)); }
	.vd-large-table .vd-gl-title { font-size: calc(1.1rem * var(--reading-scale, 1)); }
	.vd-large-table .vd-gl-row { padding: 9px 12px; }
	.vd-large-table .vd-gl-pali { font-size: calc(1.35rem * var(--reading-scale, 1)); }
	.vd-large-table .vd-gl-th { font-size: calc(1.18rem * var(--reading-scale, 1)); }
	/* ฐานสัพพนามที่ต้องเทียบข้ามสองตาราง: ฟ้าอมเขียว = เอกวจนะ · ชมพูแดง = พหุวจนะ
	   พื้นสี + น้ำหนักช่วยให้ยังแยกได้เมื่อมองสีไม่ชัด และทั้งคู่ผ่าน WCAG AA บนพื้นตาราง */
	.vd-pronoun-core {
		border-radius: .28em; padding: 0 .1em; font-weight: 900;
		-webkit-box-decoration-break: clone; box-decoration-break: clone; }
	.vd-pronoun-core.is-singular { background: #cffafe; }
	.vd-pronoun-core.is-plural { background: #ffe4e6; }
	.vd-pronoun-core.is-singular { color: #0e7490; }
	.vd-pronoun-core.is-plural { color: #be123c; }
	.vd-pronoun-legend { display: block; margin-bottom: 6px; color: #475569; font-weight: 700; }
	/* หน้า ๓ บุรุษ: คอลัมน์ชื่อบุรุษเป็นแกนของการเทียบ จึงใหญ่และอยู่กลางแถวจริง */
	.vd-person-table .vd-memory-heading { justify-content: center; text-align: center; }
	.vd-person-table .vd-memory-cell.is-key {
		align-items: center; text-align: center;
		font-size: calc(1.2rem * var(--reading-scale, 1)); }
	.vd-person-table .vd-memory-value small {
		display: block; margin-top: 2px; font-size: .9em; line-height: 1.35; }
	/* กุญแจแพตเทิร์นต้องมาก่อนตาราง: สี + พื้น + ลูกศร + ข้อความ ทำให้เข้าใจได้แม้แยกสีไม่ชัด */
	.vd-pronoun-pattern-key {
		margin: 12px 0 10px; border: 1.5px solid #c7d2fe; border-radius: 16px;
		padding: 10px; background: #f8fafc; }
	.vd-pronoun-pattern-title {
		margin: 0 0 8px; color: #312e81; text-align: center;
		font-size: calc(1rem * var(--reading-scale, 1)); font-weight: 900; line-height: 1.45; }
	.vd-pronoun-pattern-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.vd-pronoun-pattern-item {
		display: flex; align-items: center; justify-content: center; gap: 10px;
		min-width: 0; border-radius: 12px; padding: 8px 10px; }
	.vd-pronoun-pattern-item.is-singular { background: #ecfeff; border: 1px solid #a5f3fc; }
	.vd-pronoun-pattern-item.is-plural { background: #fff1f2; border: 1px solid #fecdd3; }
	.vd-pronoun-pattern-item > b {
		flex: none; font-size: calc(1.3rem * var(--reading-scale, 1)); line-height: 1.5; }
	.vd-pronoun-pattern-item > span {
		min-width: 0; color: #334155; font-size: calc(.95rem * var(--reading-scale, 1));
		font-weight: 800; line-height: 1.35; text-align: left; }
	.vd-pronoun-pattern-item small { color: #64748b; font-size: .9em; font-weight: 700; }
	.vd-pronoun-pattern .vd-sechead { font-size: calc(1.18rem * var(--reading-scale, 1)); }
	.vd-pronoun-pattern .vd-sechead small { font-size: calc(.9rem * var(--reading-scale, 1)); }
	@media (max-width: 640px) {
		.vd-large-table .vd-memory:not(.is-keepgrid) .vd-memory-row.is-noindex { padding-top: 0; }
		.vd-large-table .vd-memory.is-keepgrid .vd-memory-cell { padding: 10px 7px; }
		.vd-large-table .vd-memory.is-keepgrid .vd-memory-heading {
			font-size: calc(1rem * var(--reading-scale, 1)); padding: 7px; }
		.vd-pronoun-pattern-items { grid-template-columns: 1fr; }
		.vd-pronoun-pattern-item { justify-content: flex-start; }
	}
	/* ══ ภาษาภาพเฉพาะบทสังขยา ══
	   หนึ่งจอหนึ่งความเข้าใจ: จำนวนเด่น · ความสัมพันธ์อยู่ใกล้กัน · สีมีความหมาย */
	.vd-sankhya { --sk-ink: #1e1b4b; --sk-indigo: #4f46e5; --sk-soft: #eef2ff; }
	.vd-sankhya.vd-slide .vd-hint { color: #64748b; }
	.vd-sankhya-section-label { display: flex; align-items: center; gap: 8px; margin: 12px 0 7px;
		color: #4338ca; font-size: calc(.78rem * var(--reading-scale, 1)); font-weight: 900; }
	.vd-sankhya-section-label::after { content: ""; flex: 1; height: 1px; background: #c7d2fe; }
	.vd-sankhya-section-label.is-secondary { color: #64748b; }
	.vd-sankhya-section-label.is-secondary::after { background: #e2e8f0; }

	/* หน้าเปิดบท: เห็นทันทีว่า “จำนวน” เกาะกับ “นาม” และเวลาแปลต้องอยู่ด้วยกัน */
	.vd-sankhya-intro { max-width: 34em; margin: 14px auto 0; }
	.vd-sankhya-relation { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr);
		align-items: center; gap: 10px; }
	.vd-sankhya-number, .vd-sankhya-noun { display: flex; min-height: 86px; flex-direction: column;
		align-items: center; justify-content: center; border-radius: 14px; padding: 9px 12px; }
	.vd-sankhya-number { background: #eef2ff; color: #3730a3; }
	.vd-sankhya-noun { background: #eff6ff; color: #1d4ed8; }
	.vd-sankhya-number small, .vd-sankhya-noun small { font-size: calc(0.78rem * var(--reading-scale, 1)); font-weight: 800; }
	.vd-sankhya-number b { font-size: calc(2rem * var(--reading-scale, 1)); font-weight: 900; line-height: 1.15; }
	.vd-sankhya-noun b { margin-top: 2px; font-size: calc(1.35rem * var(--reading-scale, 1)); font-weight: 900; line-height: 1.3; }
	.vd-sankhya-link { display: flex; flex-direction: column; align-items: center; gap: 1px; color: #6366f1; }
	.vd-sankhya-link small { font-size: calc(0.78rem * var(--reading-scale, 1)); font-weight: 800; }
	.vd-sankhya-link i { font-size: calc(1.25rem * var(--reading-scale, 1)); font-weight: 900; font-style: normal; }
	.vd-sankhya-role { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1px 10px;
		margin-top: 9px; border-radius: 13px; padding: 9px 12px; background: #ecfdf5; text-align: left; }
	.vd-sankhya-role span { grid-row: 1 / 3; border-radius: 9px; padding: 4px 9px; background: #059669; color: #fff;
		font-size: calc(0.8rem * var(--reading-scale, 1)); font-weight: 900; }
	.vd-sankhya-role b { color: #065f46; font-size: calc(1rem * var(--reading-scale, 1)); line-height: 1.35; }
	.vd-sankhya-role small { color: #047857; font-size: calc(0.8rem * var(--reading-scale, 1)); font-weight: 700; line-height: 1.35; }
	.vd-sankhya-translation { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap;
		margin-top: 9px; border-radius: 13px; padding: 8px 11px; background: #f8fafc; color: #334155; }
	.vd-sankhya-translation > span { border-radius: 999px; padding: 2px 8px; background: #e2e8f0;
		font-size: calc(0.78rem * var(--reading-scale, 1)); font-weight: 900; }
	.vd-sankhya-translation b { font-size: calc(.92rem * var(--reading-scale, 1)); line-height: 1.4; }
	.vd-sankhya-translation i { color: #cbd5e1; font-style: normal; }
	.vd-sankhya-translation mark { border-radius: 7px; padding: 0 6px; background: #e0e7ff; color: #4338ca; font-weight: 900; }

	/* ปกติสังขยา กับ ปูรณสังขยา: แยกคำถามคนละชนิดให้เห็นภาพ */
	.vd-sankhya-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
	.vd-sankhya-types article { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center;
		gap: 11px; min-width: 0; border: 1.5px solid; border-radius: 15px; padding: 11px; text-align: left; }
	.vd-sankhya-types article.is-cardinal { border-color: #bfdbfe; background: #eff6ff; }
	.vd-sankhya-types article.is-ordinal { border-color: #ddd6fe; background: #f5f3ff; }
	.vd-sankhya-type-visual { display: flex; min-height: 78px; align-items: baseline; justify-content: center; gap: 4px;
		border-radius: 12px; background: #fff; color: #1d4ed8; }
	.is-ordinal .vd-sankhya-type-visual { color: #7c3aed; }
	.vd-sankhya-type-visual b { font-size: calc(2rem * var(--reading-scale, 1)); font-weight: 900; line-height: 78px; }
	.vd-sankhya-type-visual span { font-size: calc(.83rem * var(--reading-scale, 1)); font-weight: 900; }
	.vd-sankhya-type-tag { display: inline-block; border-radius: 999px; padding: 2px 8px; background: #dbeafe; color: #1d4ed8;
		font-size: calc(0.78rem * var(--reading-scale, 1)); font-weight: 900; }
	.is-ordinal .vd-sankhya-type-tag { background: #ede9fe; color: #6d28d9; }
	.vd-sankhya-types h4 { margin: 4px 0 0; color: var(--sk-ink); font-size: calc(1rem * var(--reading-scale, 1)); font-weight: 900; line-height: 1.3; }
	.vd-sankhya-types p { margin: 2px 0 0; color: #475569; font-size: calc(0.8rem * var(--reading-scale, 1)); line-height: 1.45; }
	.vd-sankhya-types article > div:last-child > strong { display: block; margin-top: 6px; color: #1d4ed8;
		font-size: calc(.82rem * var(--reading-scale, 1)); line-height: 1.35; }
	.vd-sankhya-types .is-ordinal > div:last-child > strong { color: #6d28d9; }
	.vd-sankhya-type-check { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
		margin-top: 10px; border-radius: 13px; padding: 8px 10px; background: #f8fafc; color: #475569; }
	.vd-sankhya-type-check span { font-size: calc(0.78rem * var(--reading-scale, 1)); font-weight: 900; color: #64748b; }
	.vd-sankhya-type-check b { font-size: calc(.86rem * var(--reading-scale, 1)); color: #312e81; }
	.vd-sankhya-type-check i { color: #94a3b8; font-size: calc(0.8rem * var(--reading-scale, 1)); font-style: normal; }

	/* ทฺวิ: แยกกฎหลักออกจากรูปที่พบบ้าง เพื่อไม่ให้ทุกแถวหนักเท่ากันเหมือนตาราง */
	.vd-dvi-map { max-width: 36em; margin: 10px auto 0; }
	.vd-dvi-main { display: grid; grid-template-columns: minmax(0, 1.35fr) auto minmax(0, 1fr); align-items: stretch;
		gap: 8px; margin-top: 7px; border-radius: 14px; padding: 8px; background: #f8fafc; }
	.vd-dvi-main > span { display: flex; flex-direction: column; justify-content: center; border-radius: 10px; padding: 7px 10px; background: #fff; }
	.vd-dvi-main > span:last-child { background: #eef2ff; }
	.vd-dvi-main small, .vd-dvi-variant small { display: block; color: #64748b; font-size: calc(0.78rem * var(--reading-scale, 1)); font-weight: 800; line-height: 1.35; }
	.vd-dvi-main b { margin-top: 2px; color: #334155; font-size: calc(.92rem * var(--reading-scale, 1)); font-weight: 900; line-height: 1.4; }
	.vd-dvi-main > span:last-child b { color: #4338ca; font-size: calc(1.05rem * var(--reading-scale, 1)); }
	.vd-dvi-main > i { align-self: center; color: #a5b4fc; font-size: calc(1rem * var(--reading-scale, 1)); font-weight: 900; font-style: normal; }
	.vd-dvi-variants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.vd-dvi-variant { min-width: 0; border: 1.5px solid #e2e8f0; border-radius: 13px; padding: 8px 9px; background: #fff; text-align: left; }
	.vd-dvi-form { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid #eef2ff; }
	.vd-dvi-form b { flex: none; border-radius: 8px; padding: 2px 8px; background: #eef2ff; color: #4338ca;
		font-size: calc(1rem * var(--reading-scale, 1)); font-weight: 900; }
	.vd-dvi-variant > span:last-child { display: block; margin-top: 6px; }
	.vd-dvi-variant > span:last-child b { display: block; color: #1e1b4b; font-size: calc(.96rem * var(--reading-scale, 1)); font-weight: 900; line-height: 1.4; }

	/* ติ: วางสูตรและผลลัพธ์ในแนวเดียวกัน */
	.vd-ti-map { max-width: 34em; margin: 14px auto 0; }
	.vd-ti-rule { display: grid; grid-template-columns: minmax(70px, .7fr) auto minmax(0, 1.55fr) auto minmax(76px, .75fr);
		align-items: stretch; gap: 7px; }
	.vd-ti-rule > span { display: flex; flex-direction: column; justify-content: center; border-radius: 13px; padding: 10px;
		background: #f8fafc; color: #334155; }
	.vd-ti-rule > span:first-child { background: #fff7ed; color: #9a3412; }
	.vd-ti-rule > span.is-result { background: #ecfdf5; color: #047857; }
	.vd-ti-rule small { font-size: calc(0.78rem * var(--reading-scale, 1)); font-weight: 800; color: #64748b; }
	.vd-ti-rule b { margin-top: 2px; font-size: calc(1.05rem * var(--reading-scale, 1)); font-weight: 900; line-height: 1.35; }
	.vd-ti-rule > span:first-child b, .vd-ti-rule > span.is-result b { font-size: calc(1.45rem * var(--reading-scale, 1)); }
	.vd-ti-rule > i { align-self: center; color: #a5b4fc; font-size: calc(1.05rem * var(--reading-scale, 1)); font-weight: 900; font-style: normal; }
	.vd-ti-examples { display: grid; gap: 7px; }
	.vd-ti-examples > div { display: grid; grid-template-columns: .7fr auto 1fr auto 1.2fr auto; align-items: center; gap: 7px;
		border-radius: 12px; padding: 8px 10px; background: #f8fafc; color: #475569; }
	.vd-ti-examples span { font-size: calc(.92rem * var(--reading-scale, 1)); font-weight: 800; }
	.vd-ti-examples i { color: #94a3b8; font-style: normal; font-weight: 900; }
	.vd-ti-examples strong { color: #4338ca; font-size: calc(1.08rem * var(--reading-scale, 1)); font-weight: 900; }
	.vd-ti-examples mark { border-radius: 999px; padding: 2px 9px; background: #e0e7ff; color: #3730a3;
		font-size: calc(.8rem * var(--reading-scale, 1)); font-weight: 900; }

	/* หน้าฝึกและหน้าสรุป: ใช้พื้นสีบอกบริบท แต่ไม่เปลี่ยนเนื้อหาหรือสำนวนแปล */
	.vd-sankhya-walk .vd-gw { background: #f5f7ff; border-color: #c7d2fe; }
	.vd-sankhya-examples.is-standard .vd-ex { border-color: #c7d2fe; background: #fafaff; }
	.vd-sankhya-examples.is-middle .vd-ex { border-color: #fbcfe8; background: #fff8fb; }
	.vd-sankhya-examples.is-middle .vd-ex-label { background: #fce7f3; color: #be185d; }
	.vd-sankhya-examples.is-review .vd-ex { border-color: #dbeafe; background: #f8fbff; }
	.vd-sankhya-checklist .vd-fn-row { border-color: #c7d2fe; background: #fafaff; }
	.vd-sankhya-checklist .vd-fn-word { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }

	@media (max-width: 520px) {
		.vd-sankhya-relation { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.18fr); gap: 6px; }
		.vd-sankhya-number, .vd-sankhya-noun { min-height: 74px; padding: 7px 8px; }
		.vd-sankhya-noun b { font-size: calc(1.12rem * var(--reading-scale, 1)); }
		.vd-sankhya-role { grid-template-columns: auto minmax(0, 1fr); }
		.vd-sankhya-translation { gap: 6px; }
		.vd-sankhya-translation i { display: none; }
		.vd-sankhya-types { grid-template-columns: 1fr; gap: 7px; }
		.vd-sankhya-types article { grid-template-columns: 64px minmax(0, 1fr); padding: 8px; }
		.vd-sankhya-type-visual { min-height: 66px; }
		.vd-sankhya-type-visual b { line-height: 66px; }
		.vd-dvi-main { grid-template-columns: minmax(0, 1.35fr) auto minmax(0, 1fr); padding: 6px; }
		.vd-dvi-main > span { padding: 6px 7px; }
		.vd-dvi-variants { grid-template-columns: 1fr; gap: 6px; }
		.vd-dvi-variant { display: grid; grid-template-columns: minmax(105px, .75fr) minmax(0, 1.25fr); align-items: center; gap: 8px; }
		.vd-dvi-form { padding: 0 8px 0 0; border: 0; border-right: 1px solid #eef2ff; }
		.vd-dvi-variant > span:last-child { margin-top: 0; }
		.vd-ti-rule { grid-template-columns: minmax(56px, .65fr) auto minmax(0, 1.4fr) auto minmax(58px, .65fr); gap: 4px; }
		.vd-ti-rule > span { padding: 7px 6px; }
		.vd-ti-rule > span:first-child b, .vd-ti-rule > span.is-result b { font-size: calc(1.22rem * var(--reading-scale, 1)); }
		.vd-ti-examples > div { grid-template-columns: .65fr auto 1fr auto 1.1fr auto; gap: 4px; padding: 7px; }
	}
	/* ผังช่วงจำนวนสังขยา: เห็น “ช่วง → วจนะ + ลิงค์” เป็นภาพเดียว แทนตารางข้อมูล */
	.vd-num-map { max-width: 36em; margin: 14px auto 0; }
	.vd-num-guide { display: flex; align-items: center; gap: 9px; margin: 0 4px 8px;
		color: #64748b; font-size: calc(0.8rem * var(--reading-scale, 1)); font-weight: 800; }
	.vd-num-guide i { flex: 1; height: 1px; background: #c7d2fe; }
	.vd-num-rule { position: relative; display: grid; grid-template-columns: minmax(116px, .72fr) auto minmax(0, 1.55fr);
		align-items: stretch; gap: 9px; margin-top: 8px; padding: 9px; border-radius: 15px;
		background: #f8fafc; border: 1.5px solid #e2e8f0; text-align: left; }
	.vd-num-range { display: flex; flex-direction: column; justify-content: center; min-width: 0;
		border-radius: 11px; padding: 7px 10px; background: #eef2ff; color: #3730a3; }
	.vd-num-range span, .vd-num-fact small { display: block; font-size: calc(0.78rem * var(--reading-scale, 1));
		font-weight: 800; line-height: 1.3; color: #64748b; }
	.vd-num-range b { display: block; margin-top: 1px; font-size: calc(1.36rem * var(--reading-scale, 1));
		font-weight: 900; line-height: 1.25; letter-spacing: -.015em; color: #312e81; }
	.vd-num-range em { display: block; margin-top: 2px; overflow-wrap: anywhere;
		font-size: calc(0.8rem * var(--reading-scale, 1)); font-weight: 700; font-style: normal; line-height: 1.35; color: #6366f1; }
	.vd-num-flow { align-self: center; color: #a5b4fc; font-size: calc(1.05rem * var(--reading-scale, 1)); font-weight: 900; }
	.vd-num-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
	.vd-num-fact { display: flex; flex-direction: column; justify-content: center; min-width: 0;
		border-radius: 11px; padding: 7px 10px; background: #fff; }
	.vd-num-fact strong { display: block; margin-top: 2px; overflow-wrap: anywhere;
		font-size: calc(.91rem * var(--reading-scale, 1)); font-weight: 900; line-height: 1.35; color: #1e1b4b; }
	.vd-num-fact span { font-size: calc(0.78rem * var(--reading-scale, 1)); font-weight: 700; line-height: 1.35; color: #64748b; }
	.vd-num-rule.is-many .vd-num-range { background: #eff6ff; }
	.vd-num-rule.is-many .vd-num-range b { color: #1d4ed8; }
	.vd-num-rule.is-many .vd-num-range em { color: #2563eb; }
	.vd-num-rule.is-woman { border-color: #f9a8d4; background: #fff1f7; }
	.vd-num-rule.is-woman .vd-num-range { background: #fce7f3; }
	.vd-num-rule.is-woman .vd-num-range b, .vd-num-rule.is-woman .vd-num-fact:last-child strong { color: #be185d; }
	.vd-num-rule.is-woman .vd-num-range em { color: #db2777; }
	.vd-num-rule.is-high .vd-num-range { background: #fff7ed; }
	.vd-num-rule.is-high .vd-num-range b, .vd-num-rule.is-high .vd-num-fact:last-child strong { color: #c2410c; }
	.vd-num-rule.is-high .vd-num-range em { color: #ea580c; }
	.vd-num-pin { position: absolute; top: -7px; right: 10px; border-radius: 999px; padding: 2px 8px;
		background: #db2777; color: #fff; font-size: calc(0.78rem * var(--reading-scale, 1)); font-weight: 900; line-height: 1.35; }
	.vd-num-memory { display: flex; align-items: center; gap: 11px; margin-top: 10px; border-radius: 14px;
		padding: 9px 12px; background: #fff7ed; color: #7c2d12; text-align: left; }
	.vd-num-memory-mark { flex: none; border-radius: 10px; padding: 5px 9px; background: #f97316; color: #fff;
		font-size: calc(.98rem * var(--reading-scale, 1)); font-weight: 900; line-height: 1.3; }
	.vd-num-memory > span:last-child { min-width: 0; font-size: calc(.86rem * var(--reading-scale, 1)); line-height: 1.45; }
	.vd-num-memory b { color: #9a3412; }
	.vd-num-memory small { display: block; margin-top: 1px; color: #9a3412;
		font-size: calc(0.8rem * var(--reading-scale, 1)); font-weight: 700; line-height: 1.4; }
	@media (max-width: 520px) {
		.vd-num-guide { display: none; }
		.vd-num-rule { grid-template-columns: minmax(102px, .8fr) minmax(0, 1.5fr); gap: 7px; padding: 7px; }
		.vd-num-flow { display: none; }
		.vd-num-facts { grid-template-columns: 1fr; gap: 5px; }
		.vd-num-range, .vd-num-fact { padding: 6px 8px; }
		.vd-num-range b { font-size: calc(1.2rem * var(--reading-scale, 1)); }
		.vd-num-memory { align-items: flex-start; }
	}
	/* แถบความรู้: แทนตารางเก่าด้วยหน่วยเปรียบเทียบที่มีป้ายทุกช่อง */
	/* ขนาดฐานตาราง — ผู้เรียนสูงวัยจำนวนมาก อย่าให้ต่ำกว่า ~1rem (หลวงพี่ทัก ๑๔ ส.ค. ๒๕๖๙
	   ว่าคำแปลอังกฤษ/หัวตารางเล็กเกินอ่าน) */
	.vd-memory { --vd-memory-cols: 3; width: 100%; margin-top: 12px; color: #1f2937;
		font-size: calc(1rem * var(--reading-scale, 1)); }
	.vd-memory-cols-2 { --vd-memory-cols: 2; }
	.vd-memory-cols-3 { --vd-memory-cols: 3; }
	.vd-memory-cols-4 { --vd-memory-cols: 4; }
	.vd-memory-cols-5 { --vd-memory-cols: 5; }
	.vd-memory-cols-6 { --vd-memory-cols: 6; }
	/* --vd-memory-track = สัดส่วนคอลัมน์ที่กำหนดเองได้ (ตารางบางอันช่องบาลีสั้น
	   ช่องคำอธิบายยาว — แบ่งเท่ากันแล้วเสียที่เปล่า ๆ · หลวงพี่ทัก ๔ ส.ค. ๒๕๖๙) */
	.vd-memory-head, .vd-memory-row { display: grid;
		grid-template-columns: 30px var(--vd-memory-track, repeat(var(--vd-memory-cols), minmax(0, 1fr)));
		align-items: stretch; }
	.vd-memory-head { gap: 8px; margin-bottom: 6px; padding: 0 10px; }
	.vd-memory-heading { min-width: 0; border-radius: 999px; padding: 5px 12px; background: #e0f2fe;
		color: #075985; font-size: calc(.88rem * var(--reading-scale, 1)); font-weight: 900; line-height: 1.4; text-align: left; }
	.vd-memory-heading.is-key { background: #e0e7ff; color: #3730a3; }
	.vd-memory-heading.is-result { background: #d1fae5; color: #065f46; }
	.vd-memory-body { display: flex; flex-direction: column; gap: 7px; }
	.vd-memory-row { position: relative; overflow: hidden; border: 1.5px solid #c7d2fe; border-radius: 14px;
		background: #f8fafc; }
	.vd-memory-index { display: flex; align-items: center; justify-content: center; background: #4f46e5; color: #fff;
		font-size: calc(.82rem * var(--reading-scale, 1)); font-weight: 900; }
	/* จัดเนื้อช่องให้อยู่กึ่งกลางแนวตั้ง — แถวที่มีช่องตัวใหญ่ (is-big) จะได้ไม่ทิ้งช่องอื่น
	   ลอยติดขอบบน (หลวงพี่ทัก ๑๔ ส.ค. ๒๕๖๙) · จอเล็ก media query เปลี่ยน display เองอยู่แล้ว */
	.vd-memory-cell { min-width: 0; padding: 9px 10px; background: #f8fafc; text-align: left;
		word-break: normal; overflow-wrap: break-word;
		display: flex; flex-direction: column; justify-content: center; }
	.vd-memory-cell + .vd-memory-cell { border-left: 1px solid #dbeafe; }
	.vd-memory-cell.is-key { background: #f5f7ff; color: #1e1b4b; font-weight: 800; }
	.vd-memory-cell.is-result { background: #f0fdf4; color: #14532d; }
	.vd-memory-label { display: none; }
	.vd-memory-value { line-height: 1.55; }
	.vd-memory-value b { color: inherit; }
	/* คำกำกับรอง (คำแปลอังกฤษ He/You/I ฯลฯ) — เล็กกว่าคำหลักได้นิดเดียวพอ
	   ค่าเดิมของเบราว์เซอร์ (~.8em ของตัวที่เล็กอยู่แล้ว) อ่านไม่ออก */
	.vd-memory-value small { font-size: max(.9em, var(--vd-caption-size)); font-weight: 700; color: #64748b; }
	.vd-memory-label small { font-size: .95em; font-weight: 700; }
	/* ══ ช่องที่เป็น "หัวใจของกฎ" — ตัวใหญ่ + สีคนละสี ให้เห็นจากระยะไกลและจำได้
	   (หลวงพี่สั่ง ๓ ส.ค. ๒๕๖๙: ที่สุดธาตุ/ตัวแปลง เล็กไป และขอคนละสี)
	   ภาษาสี: ท้ายธาตุ = ส้มอำพัน (วัตถุดิบ) · ตัวแปลง/ปัจจัย = น้ำเงิน · วิภัตติ = แดง ══ */
	.vd-memory-value.is-big { font-size: calc(1.6rem * var(--reading-scale, 1)); font-weight: 800; line-height: 1.5; }
	/* ช่องที่เป็นนิพจน์ยาว (ฉ + ต → นฺน = ฉนฺน) — ใหญ่แต่พอดีบรรทัดเดียว
	   ถ้าใช้ ๑.๖rem จะตกบรรทัดกลางคำ อ่านสะดุด (หลวงพี่ทัก ๔ ส.ค. ๒๕๖๙) */
	.vd-memory-value.is-mid { font-size: calc(1.24rem * var(--reading-scale, 1)); font-weight: 800; line-height: 1.6; }
	/* คำจำในวงเล็บ (มด ๓ ตัว) เป็นของรอง ไม่ให้ตัวใหญ่สีเข้มไปแย่งตัวบาลี */
	.vd-memory-value.is-big small, .vd-memory-value.is-mid small { font-size: .58em; font-weight: 700; color: #64748b; }
	/* word_html() ใช้ .vd-word ซึ่งมีขนาดของตัวเอง (๒–๒.๘rem) — ในตารางต้องยอมตามช่อง
	   ไม่งั้นตัวจะพุ่งใหญ่กว่าที่ตั้งไว้ และดันคำกำกับตกบรรทัด */
	.vd-memory-value .vd-word { font-size: inherit; line-height: inherit; }
	/* ช่องบาลีตัวเดียว (ที่สุดธาตุ / ตัวแปลง) อยู่ในคอลัมน์แคบ — จัดกลางไม่ให้ชิดขอบซ้าย */
	.vd-memory-value.is-big.vd-big-dhatu, .vd-memory-value.is-big.vd-big-pacc,
	.vd-memory-value.is-big.vd-big-vibh { text-align: center; }
	@media (max-width: 640px) {
		/* จอเล็กคลี่เป็นบัตรคำ ป้ายอยู่ซ้าย ค่าอยู่ขวา — จัดกลางจะดูหลุด */
		.vd-memory-value.is-big.vd-big-dhatu, .vd-memory-value.is-big.vd-big-pacc,
		.vd-memory-value.is-big.vd-big-vibh { text-align: left; }
	}
	/* ต้องชนะสีพื้นของช่อง .is-key/.is-result (2 คลาส) จึงเขียนคู่กับช่องให้ specificity สูงพอ
	   ห้ามใส่ color:inherit ให้ .is-big — มันจะทับสีโทนพวกนี้ทิ้งทั้งหมด */
	.vd-big-dhatu, .vd-tone-dhatu,
	.vd-memory-cell .vd-big-dhatu, .vd-memory-cell .vd-tone-dhatu { color: #c2410c; }
	.vd-big-pacc, .vd-tone-pacc,
	.vd-memory-cell .vd-big-pacc, .vd-memory-cell .vd-tone-pacc { color: #1d4ed8; }
	.vd-big-vibh, .vd-tone-vibh,
	.vd-memory-cell .vd-big-vibh, .vd-memory-cell .vd-tone-vibh { color: #be123c; }
	/* ใช้ในนิพจน์ผสม (ฉ + ต → นฺน = ฉนฺน) ที่ระบายทีละชิ้นในช่องเดียว
	   ⚠ โทนสีเปลี่ยนได้แค่ "สี" ห้ามเปลี่ยนขนาด — ตัวอักษรในคำเดียวกันต้องขนาดเท่ากัน
	   ไม่งั้น ฉ เล็ก แต่ นฺน ใหญ่ จะอ่านยากกว่าเดิม (หลวงพี่ทัก ๔ ส.ค. ๒๕๖๙)
	   อยากให้ใหญ่ ให้ใหญ่ทั้งช่องด้วย big_cols แทน */
	.vd-tone-dhatu, .vd-tone-pacc, .vd-tone-vibh { font-weight: 800; }
	/* จุดสังเกตของรูปคำ (-า-ิ-ต · -าปิต) — สำคัญที่สุดบนการ์ด ต้องเด่นกว่าตัวอื่น */
	.vd-spot { color: #dc2626; font-weight: 900; font-size: 1.12em;
		text-shadow: 0 0 1px rgba(220,38,38,.25); }
	/* หัวข้อย่อยในการ์ด — บอกว่าตัวอย่างชุดต่อไปนี้คือเรื่องอะไร */
	.vd-sechead { margin: 16px 0 6px; text-align: left; font-size: calc(1.02rem * var(--reading-scale, 1));
		font-weight: 800; color: #3730a3; border-left: 4px solid #6366f1;
		padding: 2px 0 2px 10px; line-height: 1.5; }
	.vd-sechead small { display: block; font-size: var(--vd-caption-size);
		font-weight: 700; color: #64748b; margin-top: 1px; }
	/* ผัง ๕–๖ ช่องอ่านยากเมื่อบีบเป็นแถวยาว จึงคลี่เป็นกระดาน ๒ × ๓ พร้อมป้ายกำกับ */
	@media (min-width: 641px) {
		.vd-memory-cols-5 .vd-memory-head, .vd-memory-cols-6 .vd-memory-head { display: none; }
		.vd-memory-cols-5 .vd-memory-row, .vd-memory-cols-6 .vd-memory-row {
			grid-template-columns: 30px repeat(3, minmax(0, 1fr)); }
		.vd-memory-cols-5 .vd-memory-index, .vd-memory-cols-6 .vd-memory-index { grid-row: 1 / span 2; }
		.vd-memory-cols-5 .vd-memory-cell:nth-child(n+5),
		.vd-memory-cols-6 .vd-memory-cell:nth-child(n+5) { border-top: 1px solid #dbeafe; }
		.vd-memory-cols-5 .vd-memory-cell:last-child { grid-column: 3 / span 2; }
		.vd-memory-cols-5 .vd-memory-label, .vd-memory-cols-6 .vd-memory-label { display: block; margin-bottom: 2px;
			color: #4338ca; font-size: var(--vd-caption-size); font-weight: 900; line-height: 1.4; }
		.vd-memory-cols-5 .vd-memory-cell.is-result .vd-memory-label,
		.vd-memory-cols-6 .vd-memory-cell.is-result .vd-memory-label { color: #047857; }
	}
	@media (max-width: 640px) {
		.vd-memory-head { display: none; }
		.vd-memory-body { gap: 9px; }
		.vd-memory-row { display: block; overflow: visible; padding-top: 31px; background: #fff; }
		.vd-memory-index { position: absolute; top: 0; left: 0; width: 34px; height: 31px; border-radius: 12px 0 10px 0; }
		.vd-memory-cell { display: grid; grid-template-columns: minmax(82px, 32%) minmax(0, 1fr); gap: 9px;
			padding: 8px 10px; background: #fff; }
		.vd-memory-cell + .vd-memory-cell { border-top: 1px solid #e0e7ff; border-left: 0; }
		.vd-memory-cell.is-key { background: #eef2ff; }
		.vd-memory-cell.is-result { background: #ecfdf5; }
		/* ตารางแบบแจก (keep_grid) — ช่องสั้นพอ จึงคงผังคอลัมน์ไว้ อ่านเทียบ เอก./พหุ. ได้เหมือนจอใหญ่
		   (คลี่เป็นบัตรคำแล้วยาว ๗ ใบ เทียบกันไม่ได้ — หลวงพี่สั่ง ๕ ส.ค. ๒๕๖๙ ให้ลงตัว) */
		.vd-memory.is-keepgrid .vd-memory-head { display: grid; }
		.vd-memory.is-keepgrid .vd-memory-row { display: grid; padding-top: 0; align-items: stretch; }
		.vd-memory.is-keepgrid .vd-memory-cell { display: block; padding: 7px 8px; }
		.vd-memory.is-keepgrid .vd-memory-cell + .vd-memory-cell {
			border-top: 0; border-left: 1px solid #e0e7ff; }
		.vd-memory.is-keepgrid .vd-memory-label { display: none; }
		.vd-memory.is-keepgrid .vd-memory-heading { font-size: calc(.9rem * var(--reading-scale, 1)); padding: 4px 7px; }
		.vd-memory-label { display: block; align-self: start; color: #4338ca;
			font-size: calc(.875rem * var(--reading-scale, 1)); font-weight: 900; line-height: 1.45; }
		.vd-memory-cell.is-result .vd-memory-label { color: #047857; }
		.vd-memory-value { min-width: 0; line-height: 1.5; }
	}
	/* ══ สีตระกูลคำ: ตารางเดียวมีสองศัพท์ที่ต้องแยกให้ขาด (ตุมฺห = ท่าน · อมฺห = เรา) ══
	   หลวงพี่สั่ง ๕ ส.ค. ๒๕๖๙ — "อยากให้ใช้คนละสีไปเลย จะได้แยก ท่าน กับ เรา ชัดเจนขึ้น
	   หรือใส่สีพื้นหลังคนละสีก็ได้" → ระบายทั้งตัวหนังสือและพื้นช่อง ทั้งแถวและคอลัมน์
	   a = ม่วงคราม (ตุมฺห · ท่าน) · b = ส้มอิฐ (อมฺห · เรา) — สองสีที่ไม่ชนกันในสายตา */
	.vd-memory-row.is-noindex { grid-template-columns: var(--vd-memory-track, repeat(var(--vd-memory-cols), minmax(0, 1fr))); }
	.vd-fam-a { --fam: #6d28d9; --fam-bg: #f6f2ff; --fam-line: #ddd0fb; }
	.vd-fam-b { --fam: #b45309; --fam-bg: #fff8ed; --fam-line: #fbdcae; }
	.vd-fam-c { --fam: #0e7490; --fam-bg: #edfbfe; --fam-line: #b6e6f2; }
	/* ทั้งแถวเป็นตระกูลเดียว: ระบายพื้นอ่อน ๆ + ขีดสีข้างซ้าย + ตัวบาลีตัวใหญ่เป็นสีตระกูล */
	.vd-memory-row.vd-fam-a, .vd-memory-row.vd-fam-b, .vd-memory-row.vd-fam-c { background: var(--fam-bg); }
	.vd-memory-row.vd-fam-a .vd-memory-index, .vd-memory-row.vd-fam-b .vd-memory-index,
	.vd-memory-row.vd-fam-c .vd-memory-index {
		background: var(--fam); }
	/* ช่องกลางต้องปล่อยให้พื้นแถวขึ้นมา ไม่งั้นเป็นริ้วขาวคาดกลางแถว (ดูภาพจริงแล้วสะดุดตา) */
	.vd-memory-row.vd-fam-a .vd-memory-cell, .vd-memory-row.vd-fam-b .vd-memory-cell,
	.vd-memory-row.vd-fam-c .vd-memory-cell {
		border-color: var(--fam-line); background: transparent; }
	.vd-memory-row.vd-fam-a .vd-memory-cell.is-key, .vd-memory-row.vd-fam-b .vd-memory-cell.is-key,
	.vd-memory-row.vd-fam-c .vd-memory-cell.is-key {
		background: color-mix(in srgb, var(--fam) 12%, #fff); }
	.vd-memory-row.vd-fam-a .vd-memory-cell.is-result, .vd-memory-row.vd-fam-b .vd-memory-cell.is-result,
	.vd-memory-row.vd-fam-c .vd-memory-cell.is-result {
		background: color-mix(in srgb, var(--fam) 8%, #fff); }
	.vd-memory-row.vd-fam-a .vd-memory-value.is-big, .vd-memory-row.vd-fam-b .vd-memory-value.is-big,
	.vd-memory-row.vd-fam-a .vd-memory-value.is-mid, .vd-memory-row.vd-fam-b .vd-memory-value.is-mid,
	.vd-memory-row.vd-fam-a .vd-memory-cell.is-result .vd-memory-value,
	.vd-memory-row.vd-fam-b .vd-memory-cell.is-result .vd-memory-value,
	.vd-memory-row.vd-fam-c .vd-memory-value.is-big,
	.vd-memory-row.vd-fam-c .vd-memory-value.is-mid,
	.vd-memory-row.vd-fam-c .vd-memory-cell.is-result .vd-memory-value { color: var(--fam); }
	.vd-memory-row.vd-fam-a .vd-memory-label, .vd-memory-row.vd-fam-b .vd-memory-label,
	.vd-memory-row.vd-fam-c .vd-memory-label {
		color: color-mix(in srgb, var(--fam) 78%, #1e1b4b); }
	/* ทั้งคอลัมน์เป็นตระกูลเดียว (ตารางแจก: ๒ ช่องของ ตุมฺห · ๒ ช่องของ อมฺห) */
	.vd-memory-cell.vd-fam-a, .vd-memory-cell.vd-fam-b, .vd-memory-cell.vd-fam-c { background: var(--fam-bg); color: var(--fam); }
	.vd-memory-cell.vd-fam-a .vd-memory-value, .vd-memory-cell.vd-fam-b .vd-memory-value,
	.vd-memory-cell.vd-fam-c .vd-memory-value {
		color: var(--fam); font-weight: 800; }
	.vd-memory-cell.vd-fam-a .vd-memory-label, .vd-memory-cell.vd-fam-b .vd-memory-label,
	.vd-memory-cell.vd-fam-c .vd-memory-label {
		color: var(--fam); }
	.vd-memory-head .vd-memory-heading.vd-fam-a, .vd-memory-head .vd-memory-heading.vd-fam-b,
	.vd-memory-head .vd-memory-heading.vd-fam-c {
		color: var(--fam); background: var(--fam-bg); border-radius: 10px; }
	/* กล่องคำในบัญชีหน้าที่ (funcs) — ระบายกล่องซ้ายเป็นสีตระกูล */
	.vd-fn-row.vd-fam-a .vd-fn-word, .vd-fn-row.vd-fam-b .vd-fn-word, .vd-fn-row.vd-fam-c .vd-fn-word {
		color: var(--fam); background: var(--fam-bg); border-color: var(--fam-line); }

	.vd-chip { display: inline-block; background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe;
		border-radius: 8px; padding: 1px 7px; font-weight: 700; margin: 1px; white-space: nowrap; }
	.vd-chip-it { background: #fff1f7; color: #db2777; border-color: #fbcfe8; }
	.vd-chip-np { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
	.vd-chip-kt { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
	/* คำบาลี + คำแปลศัพท์เดิมตัวเล็กใต้คำ (ขั้นแปลเอง) */
	.jw-transw { display: inline-flex; flex-direction: column; align-items: center; margin: 0 3px 6px; vertical-align: top; }
	.jw-transw .w { line-height: 1.6; }
	.jw-transw .g { font-size: calc(.875rem * var(--reading-scale, 1)); font-weight: 600; color: #64748b; line-height: 1.35; margin-top: 2px; }
	.jw-transw .g.is-dim { opacity: .45; }
	/* การ์ดแกะศัพท์ (ขั้น parse) */
	.jw-morph { margin-top: 10px; background: #fff; border: 1.5px solid #e0e7ff; border-radius: 16px; padding: 10px 14px; }
	.jw-morph-row { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; }
	.jw-morph-word { font-size: calc(1.5rem * var(--reading-scale, 1)); font-weight: 800; color: #1e1b4b; }
	.jw-morph-meta { text-align: center; margin-top: 4px; color: #475569; font-size: calc(.9rem * var(--reading-scale, 1)); line-height: 1.7; }
	.jw-morph-meta .lg-ปุงลิงค์ { color: #1d4ed8; } .jw-morph-meta .lg-อิตถีลิงค์ { color: #db2777; }
	.jw-morph-meta .lg-นปุงสกลิงค์ { color: #c2410c; }
	.jw-morph-tip { margin-top: 7px; text-align: left; background: #fffbeb; border: 1.5px solid #fde68a; border-radius: 12px;
		padding: 8px 11px; color: #78350f; font-size: var(--vd-caption-size); line-height: 1.65; }
	@keyframes jwShake { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-4px); } 90% { transform: translateX(2px); } }

/* รูปตัวละครหน้าตัด — ครอบตรงกลางจะตัดหัวขาด (หลวงพี่ทัก ๑ ส.ค. ๒๕๖๙)
   เลื่อนกรอบขึ้นให้เห็นหัวเต็ม ใช้ค่าเดียวกับกริดตัวละครในย่าม .jw-hub-ava */
.jw-face { object-fit: cover; object-position: 50% 12%; }
