/* หน้ารวม /dony หลักการแปลมคธเป็นไทย (พม.โดนี่) — ส่วนเฉพาะหน้า
   ฐานธีมห้องฉายอยู่ app/css/study-cinema.css (ห้ามแก้ที่นั่น) · ตัวอักษรทุกตัวผูก --reading-scale
   สี = ช่วงของเส้นทาง: ฟ้า เช้าตรู่ ปูพื้น · คราม กลางวัน ไต่หลักการ · อำพัน เย็นย่ำ รวบยอด · ทอง = ทำต่อที่นี่/ด่านรวบยอด
   ทุกการ์ดใช้กรอบรอบทั้งใบ (หลวงพี่ไม่ชอบแถบสีขอบซ้าย/ขอบบนอย่างเดียว) */

.dn-page .dn-bill-art { object-position: 72% 38%; }
.dn-page .dn-lead { font-size: max(1rem, calc(1.02rem * var(--reading-scale, 1))); }
.dn-byline { display: inline-flex; align-items: center; gap: .5rem; color: var(--sc-muted); font-weight: 700; line-height: 1.6; font-size: calc(.9rem * var(--reading-scale, 1)); }
.dn-byline i { color: var(--sc-gold); }

/* ข้อความเล็กของชุดกลางบางตัวต่ำกว่า ๑๔px — ยกขึ้นเฉพาะหน้านี้ (ไม่แตะ study-cinema.css) */
.dn-page .sc-btn-stack small { font-size: calc(.875rem * var(--reading-scale, 1)); }
.dn-page .sc-btn-stack > span { max-width: 19rem; }
.dn-page .sc-chip-n,
.dn-page .sc-progress-n,
.dn-page .sc-progress-no { font-size: calc(.875rem * var(--reading-scale, 1)); }
.dn-page .sc-chip-no { width: 24px; height: 24px; font-size: calc(.875rem * var(--reading-scale, 1)); }

.dn-done-all { display: inline-flex; align-items: center; gap: .55rem; min-height: 52px; padding: .55rem 1.2rem; border-radius: 12px; background: rgba(16, 185, 129, .16); border: 1px solid rgba(52, 211, 153, .45); color: var(--ui-green); font-weight: 800; font-size: calc(1rem * var(--reading-scale, 1)); }
.dn-done-all i { color: var(--sc-green); }
.dn-cta-skel { width: 260px; max-width: 100%; height: 52px; border-radius: 12px; background: rgba(var(--ui-tint), .1); animation: scpulse 1.4s ease-in-out infinite; }

/* แผงดาวในป้ายใหญ่ */
.dn-path .sc-progress-courses { grid-template-columns: minmax(0, 1fr); }
.dn-path .sc-progress-courses button { min-height: 48px; }
.dn-path .sc-progress-head strong i,
.dn-chip-stars i { color: var(--sc-gold); }

/* ── แถบชิป ── */
.dn-chip-link { text-decoration: none; }
.dn-chip-link .fa-file-pdf { color: var(--ui-rose); }
.dn-chip-stars { cursor: default; }
.dn-chip-stars:hover { background: rgba(var(--ui-tint), .06); color: var(--ui-ink2); }

/* ── วิธีเรียน ๓ ขั้น ── */
.dn-how { padding: 1.15rem 1.2rem 1.25rem; border-radius: 16px; border: 1px solid rgba(245, 191, 69, .32); background: linear-gradient(180deg, rgba(245, 191, 69, .07), rgba(245, 191, 69, 0) 70%), var(--ui-lpanel, var(--ui-lpanel, var(--ui-lpanel, var(--ui-lpanel, #121a35)))); }
.dn-how-head { display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; color: var(--ui-strong); font-weight: 800; font-size: calc(1.05rem * var(--reading-scale, 1)); }
.dn-how-head i { color: var(--sc-gold); }
.dn-how-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.dn-how-steps li { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem .95rem; border-radius: 12px; border: 1px solid var(--sc-line); background: rgba(var(--ui-tint), .04); }
.dn-how-no { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; background: rgba(245, 191, 69, .18); border: 1px solid rgba(245, 191, 69, .5); color: var(--sc-gold); font-weight: 800; font-size: calc(1rem * var(--reading-scale, 1)); }
.dn-how-steps b { display: block; color: var(--ui-strong); font-weight: 800; line-height: 1.4; font-size: calc(1rem * var(--reading-scale, 1)); }
.dn-how-steps small { display: block; margin-top: .15rem; color: var(--sc-muted); line-height: 1.6; font-size: calc(.9rem * var(--reading-scale, 1)); }

/* ── หัวช่วง (ป้ายภาพ + เลขลำดับ) ── */
.dn-tone-morning { --t: var(--ui-sky); --t-solid: #0284c7; --t-deep: #0c4a6e; }
.dn-tone-day { --t: var(--ui-indigo); --t-solid: #6366f1; --t-deep: #312e81; }
.dn-tone-evening { --t: var(--ui-gold-ink); --t-solid: #d97706; --t-deep: #78350f; }

.dn-sec { margin-top: 3rem; }
.dn-stage-head { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .8rem; min-height: 190px; margin-bottom: 1.15rem; padding: 1.2rem 1.35rem 1.15rem; border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--t-solid) 55%, rgba(var(--ui-tint), .12)); background: var(--sc-panel); }
.dn-stage-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; }
.dn-stage-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 15, 30, .94) 0%, rgba(10, 15, 30, .82) 34%, rgba(10, 15, 30, .25) 70%, rgba(10, 15, 30, .05) 100%); }
.dn-stage-row { display: flex; align-items: center; gap: .9rem; }
.dn-stage-row .sc-no { background: linear-gradient(135deg, var(--t-solid), var(--t-deep)); }
.dn-stage-row > div { min-width: 0; }
.dn-stage-eyebrow { margin: 0; color: var(--t); font-weight: 800; font-size: calc(.9rem * var(--reading-scale, 1)); }
.dn-stage-head h2 { margin: .05rem 0 0; color: var(--ui-strong); font-weight: 800; line-height: 1.3; font-size: calc(clamp(1.3rem, 2vw, 1.6rem) * var(--reading-scale, 1)); text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.dn-stage-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; max-width: 520px; }
.dn-stage-meta > span:not(.dn-stage-track) { display: inline-flex; align-items: center; gap: .4rem; color: var(--ui-ink2); font-weight: 700; font-size: calc(.9rem * var(--reading-scale, 1)); }
.dn-stage-meta i { color: var(--sc-gold); }
.dn-stage-track { flex: 1 1 140px; min-width: 120px; height: 6px; border-radius: 999px; background: rgba(var(--ui-tint), .14); overflow: hidden; }
.dn-stage-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sc-gold), var(--sc-green)); transition: width .5s ease; }

/* ── การ์ดบท (โปสเตอร์ตัวอักษร กรอบรอบทั้งใบ) ── */
.dn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.dn-grid > li { display: flex; min-width: 0; }
.dn-grid > .dn-span { grid-column: 1 / -1; }
.dn-card { position: relative; width: 100%; display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.05rem; border-radius: 16px; color: var(--ui-strong); text-decoration: none; border: 1.5px solid color-mix(in srgb, var(--t-solid) 42%, rgba(var(--ui-tint), .1)); background: linear-gradient(180deg, color-mix(in srgb, var(--t-solid) 14%, transparent) 0%, transparent 60%), var(--ui-lpanel, var(--ui-lpanel, var(--ui-lpanel, var(--ui-lpanel, #141d3b)))); box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .85); transition: transform .3s cubic-bezier(.25, 1, .5, 1), box-shadow .25s ease, border-color .2s ease; }
.dn-card:hover { transform: translateY(-4px); border-color: var(--t); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .95), 0 0 0 3px color-mix(in srgb, var(--t-solid) 22%, transparent); }
.dn-card:focus-visible, .dn-boss:focus-visible, .dn-chip-link:focus-visible { outline: 3px solid var(--sc-gold); outline-offset: 3px; }
.dn-card.is-next { border: 2px solid var(--sc-gold); background: linear-gradient(180deg, rgba(245, 191, 69, .14) 0%, transparent 62%), var(--ui-lpanel, var(--ui-lpanel, var(--ui-lpanel, var(--ui-lpanel, #1a1f3a)))); box-shadow: 0 18px 40px -20px rgba(245, 191, 69, .55); }
.dn-card.is-done { border-color: rgba(52, 211, 153, .5); }
.dn-card.is-done:hover { border-color: var(--sc-green); }

.dn-card-top { display: flex; align-items: center; gap: .45rem; min-height: 28px; }
.dn-card-no { display: inline-flex; align-items: center; height: 28px; padding: 0 .65rem; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--t-deep); font-weight: 800; white-space: nowrap; font-size: calc(.875rem * var(--reading-scale, 1)); }
.dn-flag { display: inline-flex; align-items: center; gap: .35rem; height: 28px; padding: 0 .65rem; border-radius: 999px; font-weight: 800; white-space: nowrap; font-size: calc(.875rem * var(--reading-scale, 1)); }
.dn-flag.is-next { background: var(--sc-gold-fill, var(--sc-gold)); color: #3b2600; }
.dn-flag.is-done { background: #10b981; color: #fff; }
.dn-stars { margin-left: auto; display: inline-flex; gap: .2rem; white-space: nowrap; font-size: calc(.9rem * var(--reading-scale, 1)); }
.dn-stars .is-on { color: var(--sc-gold); }
.dn-stars .is-off { color: rgba(var(--ui-tint), .22); }

.dn-card-title { display: block; margin-top: .15rem; font-weight: 800; line-height: 1.4; color: var(--ui-strong); font-size: calc(1.18rem * var(--reading-scale, 1)); }
.dn-card-topic { display: block; color: var(--sc-muted); line-height: 1.6; font-size: calc(.92rem * var(--reading-scale, 1)); }
.dn-steps { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .45rem; }
.dn-step { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 8px; border: 1px solid rgba(var(--ui-tint), .1); background: rgba(var(--ui-tint), .05); color: var(--ui-ink2); font-weight: 700; line-height: 1.5; font-size: calc(.875rem * var(--reading-scale, 1)); }
.dn-step b { font-weight: 800; color: var(--ui-strong); }
.dn-step i { font-size: calc(.75rem * var(--reading-scale, 1)); color: var(--sc-dim); }
.dn-step.is-part { border-color: color-mix(in srgb, var(--t) 45%, transparent); background: color-mix(in srgb, var(--t-solid) 18%, transparent); color: var(--t); }
.dn-step.is-part b { color: var(--t); }
.dn-step.is-done { border-color: rgba(52, 211, 153, .45); background: rgba(16, 185, 129, .16); color: var(--ui-green); }
.dn-step.is-done i { color: var(--sc-green); }
.dn-step-note { align-self: center; color: var(--sc-dim); font-weight: 700; font-size: calc(.875rem * var(--reading-scale, 1)); }
.dn-card-go { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; margin-top: .35rem; color: var(--t); font-weight: 800; font-size: calc(.9rem * var(--reading-scale, 1)); }
.dn-card-go i { font-size: calc(.75rem * var(--reading-scale, 1)); transition: transform .2s ease; }
.dn-card:hover .dn-card-go i { transform: translateX(3px); }
.dn-card.is-next .dn-card-go { color: var(--sc-gold); }

/* ── ด่านรวบยอดท้ายช่วง ── */
.dn-boss { width: 100%; display: flex; align-items: stretch; padding: 0; overflow: hidden; border-radius: 16px; border: 1.5px solid rgba(245, 191, 69, .55); background: linear-gradient(90deg, rgba(245, 191, 69, .1), rgba(245, 191, 69, 0) 60%), var(--ui-lpanel, var(--ui-lpanel, var(--ui-lpanel, var(--ui-lpanel, #17153a)))); color: var(--ui-strong); text-align: left; cursor: pointer; font: inherit; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9); transition: transform .3s cubic-bezier(.25, 1, .5, 1), box-shadow .25s ease, border-color .2s ease; }
.dn-boss:hover { transform: translateY(-3px); border-color: var(--sc-gold); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .95), 0 0 0 3px rgba(245, 191, 69, .2); }
.dn-boss-art { flex: none; width: 210px; min-height: 150px; object-fit: cover; object-position: 60% 50%; }
.dn-boss-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .2rem; padding: 1rem 1.25rem; }
.dn-boss-eyebrow { display: inline-flex; align-items: center; gap: .4rem; color: var(--sc-gold); font-weight: 800; font-size: calc(.9rem * var(--reading-scale, 1)); }
.dn-boss-title { color: var(--ui-strong); font-weight: 800; line-height: 1.35; font-size: calc(1.3rem * var(--reading-scale, 1)); }
.dn-boss-sub { color: var(--ui-indigo); line-height: 1.6; font-size: calc(.92rem * var(--reading-scale, 1)); }
.dn-boss-go { flex: none; align-self: center; display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; margin-right: 1.25rem; padding: .45rem 1.2rem; border-radius: 12px; background: var(--ui-sel-bg); color: var(--ui-sel-ink); font-weight: 800; white-space: nowrap; font-size: calc(.95rem * var(--reading-scale, 1)); transition: background-color .15s ease; }
.dn-boss:hover .dn-boss-go { background: var(--sc-gold-fill, var(--sc-gold)); }

.dn-skel-head { height: 190px; margin-bottom: 1.15rem; border-radius: 16px; background: var(--sc-panel); animation: scpulse 1.4s ease-in-out infinite; }
.dn-skel-card { height: 200px; }
.dn-foot { margin: 3.2rem 0 0; text-align: center; color: var(--sc-dim); line-height: 1.7; font-size: calc(.875rem * var(--reading-scale, 1)); }

@media (max-width: 1023px) {
	.dn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	.dn-how-steps { grid-template-columns: minmax(0, 1fr); }
	.dn-path .sc-progress-courses { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.dn-page .dn-bill-art { object-position: 70% 30%; }
	.dn-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
	.dn-sec { margin-top: 2.4rem; }
	.dn-stage-head { min-height: 170px; padding: 1rem; }
	.dn-stage-head::before { background: linear-gradient(0deg, rgba(var(--ui-lpanel-rgb, 10, 15, 30), .95) 0%, rgba(var(--ui-lpanel-rgb, 10, 15, 30), .78) 45%, rgba(var(--ui-lpanel-rgb, 10, 15, 30), .15) 100%); }
	.dn-stage-row { align-items: flex-start; }
	.dn-card { padding: .9rem .95rem 1rem; }
	/* มือถือ: ทั้งใบเป็นลิงก์อยู่แล้ว ซ่อนป้าย "เปิดบท" ให้เห็นได้หลายบทในจอเดียว */
	.dn-card-go { display: none; }
	.dn-boss { flex-direction: column; }
	.dn-boss-art { width: 100%; height: 140px; min-height: 0; object-position: 50% 45%; }
	.dn-boss-copy { padding: .9rem 1rem .4rem; }
	.dn-boss-go { align-self: stretch; justify-content: center; margin: .5rem 1rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.dn-card, .dn-boss, .dn-card-go i, .dn-stage-track > span { transition: none; }
}

/* หัวช่วงบนภาพ (.ui-dark) มืดเสมอ — สีช่วงใช้แบบอ่อนของโหมดมืด */
.dn-tone-morning .ui-dark { --t: #7dd3fc; }
.dn-tone-day .ui-dark { --t: #a5b4fc; }
.dn-tone-evening .ui-dark { --t: #fcd34d; }