/* PSUNHM — หน้าย่อยนิทรรศการ (ถาวร / หมุนเวียน / Virtual Museum)
   flat + light: ไม่มี glow, gradient, glass, เส้นขอบ, แถบเส้นบาง */
.ex { --card:#fff; --tint:#f4edf5; --tint2:#ebdcee; --r:18px; }
.ex > * { max-width:1060px; }
.ex > .lead { max-width:760px; }
.ex, .ex * { line-height:1.6; }
.ex h1 { font-size:40px; line-height:1.45; margin:0 0 10px; }
.ex h2 { font-size:26px; line-height:1.5; margin:0 0 6px; }
.ex h3 { font-size:20px; line-height:1.5; margin:0 0 6px; }
.ex p { margin:0 0 12px; }
.ex .lead { font-size:18px; color:#333; max-width:760px; }
.ex .muted { color:var(--mute); }
.ex .kicker { font-size:14px; font-weight:700; color:var(--brand-dark); margin:0 0 4px; letter-spacing:.01em; }
.ex .en { font-size:14px; color:var(--mute); margin:0 0 8px; }
.ex section { margin-top:56px; }
.ex .sec-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.ex .sec-head p { margin:0; }

/* แท็บสามหน้าในหมวด */
.ex-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; list-style:none; }
.ex-tabs a { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; background:#fff; color:#222 !important; text-decoration:none; font-size:15px; }
.ex-tabs a[aria-current] { background:var(--brand); color:#fff !important; font-weight:700; }
.ex-tabs a:hover:not([aria-current]) { background:var(--tint); }

/* ปุ่ม */
.btn { display:inline-flex; align-items:center; gap:10px; padding:11px 20px; border-radius:999px; background:var(--brand-dark); color:#fff !important; text-decoration:none; font-weight:700; font-size:15px; }
.btn:hover { background:#6a3871; }
.btn.light { background:var(--tint); color:var(--brand-dark) !important; }
.btn.light:hover { background:var(--tint2); }
.btn.white { background:#fff; color:var(--brand-dark) !important; }
.btn svg { width:18px; height:18px; flex:none; }

/* ป้ายตัวอย่าง (placeholder) */
.ph-tag { display:inline-block; padding:2px 10px; border-radius:999px; background:#fde7b0; color:#6b4a00; font-size:12px; font-weight:700; vertical-align:middle; }
.ph-img { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:var(--tint2); color:var(--brand-dark); font-size:14px; text-align:center; }
.ph-img svg { width:40px; height:40px; opacity:.7; }
.ph-img.t2 { background:#e4e0ef; color:#544a7d; }
.ph-img.t3 { background:#e7eadf; color:#4f5a33; }
.ph-img.t4 { background:#f2e2e6; color:#7d3448; }
.note { background:var(--tint); border-radius:14px; padding:14px 18px; font-size:15px; color:#3b2b3d; display:flex; gap:12px; align-items:flex-start; }
.note b { color:var(--brand-dark); }

/* ===== ถาวร ===== */
.hero-img { position:relative; margin:28px 0 0; border-radius:var(--r); overflow:hidden; background:#ddd; }
.hero-img img { display:block; width:100%; aspect-ratio:21/9; object-fit:cover; }
.hero-img figcaption { position:absolute; left:16px; bottom:16px; background:#fff; color:#222; font-size:13px; padding:6px 12px; border-radius:999px; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.facts div { background:#fff; border-radius:14px; padding:16px 18px; }
.facts b { display:block; font-size:26px; line-height:1.4; color:var(--brand-dark); }
.facts span { font-size:14px; color:var(--mute); }

.stack-wrap { display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:32px; align-items:center; background:#fff; border-radius:var(--r); padding:28px; }
.stack { display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none; }
.stack a { display:grid; grid-template-columns:86px 1fr auto; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; text-decoration:none; color:#fff !important; }
.stack a small { font-size:13px; opacity:.85; }
.stack a b { font-size:16px; }
.stack a i { font-style:normal; font-size:18px; }
.stack .s3 { background:#5e3264; } .stack .s2 { background:#7d4485; } .stack .s1 { background:#9e5da5; }
.stack .s0 { background:#c49bc9; color:#2d1530 !important; } .stack .so { background:#e3cfe5; color:#2d1530 !important; }

.zone { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); background:#fff; border-radius:var(--r); overflow:hidden; margin-top:16px; scroll-margin-top:24px; }
.zone:nth-of-type(even) .z-img { order:2; }
.z-img { position:relative; min-height:300px; }
.z-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.z-img .z-no { position:absolute; left:16px; top:16px; background:#fff; color:var(--brand-dark); font-weight:700; border-radius:999px; padding:4px 14px; font-size:14px; }
.z-body { padding:28px 30px; display:flex; flex-direction:column; }
.z-body .acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:8px; }
.z-hl { background:var(--tint); border-radius:12px; padding:10px 14px; margin:4px 0 14px; font-size:14px; color:#4a3a4c; }

.visit { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:12px; }
.visit > div { background:#fff; border-radius:16px; padding:20px 22px; }
.visit .main { background:var(--brand); color:#fff; }
.visit .main a { color:#fff; }
.visit b.big { display:block; font-size:24px; line-height:1.45; }
.visit h3 { font-size:15px; color:var(--mute); margin:0 0 4px; }
.visit .main h3 { color:#f3e6f5; }
.visit ul { list-style:none; padding:0; margin:6px 0 0; }
.visit li { margin:0 0 6px; }

/* ===== หมุนเวียน ===== */
.now { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); background:#fff; border-radius:var(--r); overflow:hidden; }
.now .ph-img { min-height:420px; font-size:15px; }
.now-body { padding:30px 32px; }
.badge { display:inline-flex; align-items:center; gap:8px; padding:4px 14px; border-radius:999px; background:var(--brand); color:#fff; font-size:13px; font-weight:700; }
.badge.soon { background:#544a7d; } .badge.past { background:#666; }
.badge .dot { width:8px; height:8px; border-radius:50%; background:#fff; }
.meta { list-style:none; padding:0; margin:14px 0 18px; display:grid; gap:8px; }
.meta li { display:grid; grid-template-columns:96px 1fr; gap:10px; font-size:15px; }
.meta li span { color:var(--mute); }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.card { background:#fff; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.card .ph-img { aspect-ratio:4/3; }
.card .c-body { padding:16px 18px 18px; }
.card .date { font-size:13px; color:var(--brand-dark); font-weight:700; margin:0 0 4px; }
.card h3 { font-size:17px; }
.card p { font-size:14px; color:var(--mute); margin:0; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips span { padding:7px 16px; border-radius:999px; background:#fff; font-size:14px; }
.chips span.on { background:var(--brand-dark); color:#fff; font-weight:700; }
.cards.past .card .ph-img { aspect-ratio:16/9; }
.empty { display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; background:#fff; border-radius:16px; padding:20px 22px; }
.empty .ic { width:56px; height:56px; border-radius:50%; background:var(--tint); display:grid; place-items:center; color:var(--brand-dark); }
.empty .ic svg { width:28px; height:28px; }

/* ===== Virtual Museum ===== */
.launch { position:relative; margin-top:28px; border-radius:var(--r); overflow:hidden; background:#222; }
.launch img { display:block; width:100%; aspect-ratio:16/8; object-fit:cover; }
.launch .play { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:96px; height:96px; border-radius:50%; background:#fff; display:grid; place-items:center; color:var(--brand-dark); text-decoration:none; }
.launch .play svg { width:40px; height:40px; margin-left:6px; }
.launch .bar { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:center; gap:16px; background:#7d4485; color:#fff; padding:16px 22px; }
.launch .bar b { font-size:20px; display:block; line-height:1.5; }
.launch .bar span { font-size:14px; color:#f1e4f3; }
.launch .tag360 { position:absolute; left:16px; top:16px; background:#fff; color:var(--brand-dark); font-weight:700; border-radius:999px; padding:4px 14px; font-size:14px; }
.tours { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tour { background:#fff; border-radius:16px; overflow:hidden; text-decoration:none; color:#111 !important; display:flex; flex-direction:column; }
.tour img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.tour .t-body { padding:14px 18px 18px; display:flex; flex-direction:column; flex:1; }
.tour h3 { font-size:18px; margin:0; }
.tour .en { margin:0 0 10px; }
.tour .go { margin-top:auto; display:flex; justify-content:space-between; align-items:center; font-size:14px; }
.tour .go span { color:var(--mute); }
.tour .go b { color:var(--brand-dark); }
.tour:hover { background:var(--tint); }
.tour.wide { grid-column:span 1; }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; counter-reset:s; list-style:none; padding:0 !important; margin:0; }
.steps li { background:#fff; border-radius:16px; padding:20px; }
.steps .ic { width:52px; height:52px; border-radius:14px; background:var(--tint); color:var(--brand-dark); display:grid; place-items:center; margin-bottom:12px; }
.steps .ic svg { width:28px; height:28px; }
.steps b { display:block; font-size:16px; margin-bottom:4px; }
.steps p { font-size:14px; color:var(--mute); margin:0; }
.duo { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.duo > div { border-radius:16px; padding:22px 24px; background:#fff; }
.duo .pur { background:var(--brand); color:#fff; }
.duo .pur p { color:#f6eef7; }
.tips { list-style:none; padding:0 !important; margin:8px 0 0; }
.tips li { padding:6px 0 6px 28px; position:relative; font-size:15px; }
.tips li::before { content:""; position:absolute; left:4px; top:15px; width:10px; height:10px; border-radius:50%; background:var(--brand); }

/* ===== responsive ===== */
@media (max-width:1100px) { .stack-wrap { grid-template-columns:1fr; } .steps { grid-template-columns:1fr 1fr; } }
@media (max-width:900px) {
  .ex h1 { font-size:32px; }
  .ex h2 { font-size:22px; }
  .ex section { margin-top:40px; }
  .zone, .now { grid-template-columns:1fr; }
  .zone:nth-of-type(even) .z-img { order:0; }
  .z-img { min-height:0; aspect-ratio:16/9; }
  .z-body, .now-body { padding:20px; }
  .now .ph-img { min-height:0; aspect-ratio:4/3; }
  .cards, .tours { grid-template-columns:1fr 1fr; }
  .visit { grid-template-columns:1fr; }
  .duo { grid-template-columns:1fr; }
  .stack-wrap { padding:20px; gap:20px; }
}
/* มือถือ: แถวเดียวเลื่อนข้าง เฟดขอบขวาให้เห็นว่ามีต่อ (mask จำเป็น ไม่ใช่ตกแต่ง) */
@media (max-width:768px) {
  .ex-tabs { flex-wrap:nowrap; overflow-x:auto; padding-right:28px; scrollbar-width:none; scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .ex-tabs::-webkit-scrollbar { display:none; }
  .ex-tabs li { flex:none; scroll-snap-align:start; }
  .ex-tabs a { white-space:nowrap; min-height:44px; padding:8px 16px; font-size:14px; }
  .ph-tag { font-size:14px; }
}
@media (max-width:600px) {
  .ex-tabs { flex-wrap:nowrap; overflow-x:auto; margin-right:-16px; padding-right:16px; scrollbar-width:none; }
  .ex-tabs a { white-space:nowrap; }
  .hero-img img { aspect-ratio:4/3; }
  .facts { grid-template-columns:1fr 1fr 1fr; gap:8px; }
  .facts div { padding:12px; } .facts b { font-size:22px; } .facts span { font-size:13px; }
  .cards, .tours, .steps { grid-template-columns:1fr; }
  .cards:not(.past) .card .ph-img { aspect-ratio:16/9; }
  .cards.past { grid-template-columns:1fr 1fr; }
  .cards.past .c-body { padding:12px; }
  .launch img { aspect-ratio:4/5; }
  .launch .play { top:40%; width:80px; height:80px; }
  .launch .bar { flex-direction:column; align-items:flex-start; padding:16px; }
  .launch .bar .btn { align-self:stretch; justify-content:center; }
  .empty { grid-template-columns:auto 1fr; }
  .empty .btn { grid-column:1/-1; justify-content:center; }
  .meta li { grid-template-columns:84px 1fr; }
  .stack a { grid-template-columns:74px 1fr auto; padding:10px 14px; }
}

/* ---------- ต้นศรีตรัง (sritrang-mini.js) ---------- */
.st { margin:0; }
.st-slot { position:relative; aspect-ratio:1/1; }
.st-still, .st-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.st-still { object-fit:contain; transition:opacity .5s; }
.st-canvas { opacity:0; transition:opacity .5s; }
.st-slot.is-3d .st-canvas { opacity:1; }
.st-slot.is-3d .st-still { opacity:0; }
.st figcaption { display:flex; flex-direction:column; font-size:13px; line-height:1.5; color:var(--mute); margin-top:4px; text-align:center; }
.st figcaption b { color:#2d1530; font-size:14px; }
.st figcaption a { color:var(--brand-dark); font-weight:600; text-decoration:none; margin-top:2px; }
@media (prefers-reduced-motion: reduce) { .st-still, .st-canvas { transition:none; } }

/* ---------- ตึก 3D ขนาดเล็ก (vm-mini.js) — ใช้ช่องเดียวกับต้นศรีตรังเดิม ---------- */
.vb { margin:0; }
.vb-slot { position:relative; display:block; aspect-ratio:1/1; cursor:grab; -webkit-user-drag:none; }
.vb-slot:active { cursor:grabbing; }
.vb-slot:focus-visible { outline:2px solid var(--brand); outline-offset:4px; border-radius:12px; }
.vb-still, .vb-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.vb-still { object-fit:contain; transition:opacity .5s; }
.vb-canvas { opacity:0; transition:opacity .5s; touch-action:pan-y; }
.vb-slot.is-3d .vb-canvas { opacity:1; }
.vb-slot.is-3d .vb-still { opacity:0; }
.vb figcaption { font-size:13px; line-height:1.5; margin-top:4px; text-align:center; }
.vb figcaption a { color:var(--brand-dark); font-weight:600; text-decoration:none; }
@media (prefers-reduced-motion: reduce) { .vb-still, .vb-canvas { transition:none; } }

/* ถาวร: ยืนข้างผังชั้น ฐานต้นอยู่ระดับแถว “นอกอาคาร” */
.stack-wrap.has-tree { grid-template-columns:minmax(0,1fr) 230px 420px; gap:20px; align-items:end; }
.stack-wrap.has-tree > div:first-child { align-self:center; }
.st-side .st-slot, .vb-side .vb-slot { margin-bottom:-6px; }

/* หมุนเวียน: คู่หัวเรื่อง */
.ex-head { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:24px; align-items:end; }
.ex-head .lead { max-width:760px; }

/* Virtual: การ์ดเริ่มจากหน้าอาคาร */
.st-start { display:grid; grid-template-columns:340px minmax(0,1fr); gap:32px; align-items:center; background:#fff; border-radius:var(--r); padding:24px 32px 24px 24px; }
.st-big { background:var(--tint); border-radius:14px; padding:12px 16px 0; }
.st-body .acts { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }

@media (max-width:1100px) {
  .stack-wrap.has-tree { grid-template-columns:minmax(0,1fr) 170px; align-items:center; }
  .stack-wrap.has-tree .stack { grid-column:1/-1; }
}
@media (max-width:900px) { .st-start { grid-template-columns:260px minmax(0,1fr); padding:20px; gap:20px; } .ex-head { grid-template-columns:minmax(0,1fr) 180px; } }
@media (max-width:600px) {
  /* มือถือ: ภาพนิ่งเสมอ (สคริปต์ไม่โหลด three.js บนจอ ≤600px) */
  .stack-wrap.has-tree, .ex-head { grid-template-columns:minmax(0,1fr) 108px; gap:12px; }
  .stack-wrap.has-tree > div:first-child { align-self:start; }
  .st-side figcaption span, .st-head figcaption span { display:none; }
  .vb figcaption { font-size:12px; }
  .st figcaption { font-size:12px; }
  .ex-head { column-gap:12px; row-gap:0; align-items:end; }
  .ex-head > div { display:contents; }
  .ex-head .crumb, .ex-head h1 { grid-column:1; }
  .ex-head .st-head, .ex-head .vb-head { grid-column:2; grid-row:1 / span 2; }
  .ex-head .lead, .ex-head nav { grid-column:1 / -1; min-width:0; }
  .ex-head .ex-tabs { padding-left:0; }
  .st-start { grid-template-columns:1fr; padding:16px; }
  .st-big { max-width:260px; justify-self:center; width:100%; }
  .st-body .acts .btn { flex:1 1 100%; justify-content:center; }
}

/* ---------- Virtual Museum hero: โมเดลอาคาร 3 มิติ (vm-explore.js + vm-panel.js) ---------- */
.vmx { position:relative; margin-top:28px; height:660px; border-radius:var(--r); background:#efe6f0; overflow:hidden; }
.vmx-stage { position:absolute; inset:0; }
.vmx-stage picture, .vmx-still { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:opacity .4s; }
.vmx canvas { position:absolute; inset:0; width:100%; height:100%; display:none; cursor:grab; touch-action:pan-y; }
.vmx canvas:active { cursor:grabbing; }
.vmx.gl-on canvas { display:block; }
.vmx.gl-ready .vmx-still { opacity:0; }
.vmx-load { display:none; position:absolute; left:50%; bottom:22px; transform:translateX(-50%); margin:0; align-items:center; gap:10px; background:#fff; border-radius:999px; padding:6px 16px; font-size:13px; color:#3b2b3d; }
.vmx.gl-on:not(.gl-ready) .vmx-load { display:flex; }
.vmx-load .vm-track { width:120px; height:6px; border-radius:3px; background:var(--tint2); overflow:hidden; }
.vmx-load .vm-track i { display:block; height:100%; width:0; background:var(--brand); }

.vmx-head { position:absolute; left:24px; top:22px; pointer-events:none; }
.vmx-head h2 { font-size:28px; line-height:1.4; }
.vmx-list { position:absolute; left:24px; top:126px; width:212px; }
.vmx-list ul { display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none; }
.vmx-list button { font:inherit; border:0; cursor:pointer; width:100%; text-align:left; display:grid; grid-template-columns:62px 1fr; align-items:center; gap:6px; padding:9px 14px; border-radius:12px; color:#fff; transition:transform .15s; }
.vmx-list button small { font-size:12px; opacity:.85; line-height:1.4; }
.vmx-list button b { font-size:14px; line-height:1.45; }
.vmx-list .s3 { background:#5e3264; } .vmx-list .s2 { background:#7d4485; } .vmx-list .s1 { background:#9e5da5; }
.vmx-list .s0 { background:#c49bc9; color:#2d1530; } .vmx-list .so { background:#e3cfe5; color:#2d1530; }
.vmx-list button:hover, .vmx-list button.hl { transform:translateX(4px); }
.vmx-list button[aria-pressed="true"] { transform:translateX(8px); }
.vmx-list li { position:relative; }
.vmx-list li:has(button[aria-pressed="true"])::before { content:""; position:absolute; left:-12px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--brand-dark); }
.vmx-tree { margin-top:14px; background:#fff !important; color:#2d1530 !important; grid-template-columns:40px 1fr !important; padding:6px 14px 6px 6px !important; }
.vmx-tree img { width:40px; height:40px; border-radius:8px; background:var(--tint); object-fit:contain; }
.vmx-tree span { display:flex; flex-direction:column; }
.vmx-tree[aria-pressed="true"] { background:var(--brand) !important; color:#fff !important; }

.vmx-panel { position:absolute; right:16px; top:16px; bottom:16px; width:340px; background:#fff; border-radius:16px; padding:16px 20px 18px; overflow:auto; scrollbar-width:thin; }
.vp-img { margin:-4px -8px 14px; border-radius:12px; overflow:hidden; background:var(--tint); position:relative; }
.vp-img img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.vp-img.tree img { object-fit:contain; padding:8px 0 0; }
.vp-img figcaption { position:absolute; left:10px; bottom:10px; background:#fff; color:var(--brand-dark); font-size:12px; font-weight:700; border-radius:999px; padding:2px 10px; }
.vmx-panel h3 { font-size:22px; line-height:1.45; margin:0 0 2px; }
.vp-desc { font-size:15px; color:#333; }
.vp-note { font-size:13px; color:var(--mute); background:var(--tint); border-radius:10px; padding:8px 12px; }
.vp-facts { display:flex; gap:8px; margin:0 0 14px; padding:0; list-style:none; }
.vp-facts li { background:var(--tint); border-radius:10px; padding:6px 14px; font-size:13px; color:var(--mute); }
.vp-facts b { font-size:18px; color:var(--brand-dark); margin-right:6px; }
.vp-acts { display:flex; flex-direction:column; gap:8px; }
.vp-acts .btn { justify-content:center; }
.vp-close { font:inherit; border:0; background:none; color:var(--brand-dark); font-size:14px; font-weight:600; cursor:pointer; margin-top:10px; padding:6px 0; width:100%; }
.vmx-hint { position:absolute; left:50%; bottom:20px; transform:translateX(calc(-50% - 64px)); margin:0; background:rgba(255,255,255,.86); border-radius:999px; padding:4px 14px; font-size:13px; color:#3b2b3d; white-space:nowrap; }
.vmx:not(.gl-on) .vmx-hint { display:none; }
.vmx.gl-on:not(.gl-ready) .vmx-hint { display:none; }
.tour .t-tree { aspect-ratio:16/9; background:var(--tint); display:grid; place-items:center; }
.tour .t-tree img { height:92%; width:auto; aspect-ratio:1; object-fit:contain; }

/* tablets / mobile: still image + list + panel stacked (3D only loads on wide desktop with a fine pointer) */
@media (max-width:900px) {
  .vmx { height:auto; display:flex; flex-direction:column; padding:20px; background:#fff; }
  .vmx-head { position:static; order:0; } .vmx-head h2 br { display:none; }
  .vmx-stage { position:relative; order:1; aspect-ratio:4/3; margin:10px -20px 14px; background:#efe6f0; }
  .vmx-list { position:static; width:auto; order:2; }
  .vmx-list ul { display:grid; grid-template-columns:1fr 1fr; }
  .vmx-list li:last-child { grid-column:1 / -1; }
  .vmx-list button { grid-template-columns:1fr; gap:0; padding:10px 14px; }
  .vmx-list button:hover, .vmx-list button.hl, .vmx-list button[aria-pressed="true"] { transform:none; }
  .vmx-list li:has(button[aria-pressed="true"])::before { left:auto; right:12px; background:#fff; }
  .vmx-list li:has(.s0[aria-pressed="true"])::before, .vmx-list li:has(.so[aria-pressed="true"])::before { background:#2d1530; }
  .vmx-tree { margin-top:8px; grid-template-columns:40px 1fr !important; }
  .vmx-panel { position:static; order:3; width:auto; margin-top:16px; padding:0; overflow:visible; }
  .vp-img { margin:0 0 14px; }
}
/* tree pin (follows the crown in 3D; fixed spot over the still image) */
.vmx-pin { position:absolute; left:0; top:0; font:inherit; border:0; cursor:pointer; display:flex; align-items:center; gap:6px; padding:3px 12px 3px 3px; border-radius:999px; background:#fff; color:#2d1530; font-size:13px; font-weight:700; margin:-44px 0 0 -48px; white-space:nowrap; }
.vmx-pin::after { content:""; position:absolute; left:42px; bottom:-6px; border:6px solid transparent; border-bottom:0; border-top-color:#fff; }
.vmx-pin img { width:28px; height:28px; border-radius:50%; background:var(--tint); object-fit:contain; }
.vmx-pin[aria-pressed="true"] { background:var(--brand); color:#fff; } .vmx-pin[aria-pressed="true"]::after { border-top-color:var(--brand); }
.vmx-pin.off { visibility:hidden; }
.vmx:not(.gl-on) .vmx-pin { left:var(--pin-x, 28.5%); top:var(--pin-y, 45.2%); }  /* baked from __vm.pin() on vm-still.webp */
@media (max-width:900px){ .vmx:not(.gl-on) .vmx-pin { display:none; } }  /* tree stays reachable from the list button */
.vmx.gl-on:not(.gl-ready) .vmx-pin { visibility:hidden; }
.vmx .vm-tree-link { position:absolute; left:24px; bottom:20px; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.vmx .vm-tree-link:focus { width:auto; height:auto; clip-path:none; background:#fff; color:var(--brand-dark); border-radius:999px; padding:4px 14px; font-size:13px; font-weight:700; }
.vmx .vm-tip { position:absolute; margin:0; transform:translate(-50%, -100%); background:#fff; color:#2d1530; border-radius:999px; padding:3px 12px; font-size:13px; pointer-events:none; opacity:0; transition:opacity .15s; }
.vmx .vm-tip.on { opacity:1; }

/* ---------- จอกว้าง (>1440px): เนื้อหากว้างสูงสุด 1320px วางกลางพื้นที่ขวาของเมนู ช่องซ้าย = ช่องขวา ----------
   เมนูซ้ายกว้างถึง var(--g) + 340px; ≤1440px ไม่มีอะไรเปลี่ยน */
:root { --ex-cw:1320px; --ex-menu:calc(var(--g) + 340px); }
@media (min-width:1441px) {
  .sheet.ex { --ex-gap:max(40px, (100% - var(--ex-menu) - var(--ex-cw)) / 2);
    padding-left:calc(var(--ex-menu) + var(--ex-gap)); padding-right:var(--ex-gap); }
  .ex > * { max-width:none; }
  .ex > .lead, .ex-head .lead { max-width:820px; }
  /* ภาพพื้นหลัง (ต้นไม้ + ไดโนเสาร์ ซ้ายล่าง) ให้อยู่ในช่องว่างซ้ายเท่านั้น: ขอบขวาของภาพ ≈ 0.78 × --tree-w จากขอบจอ */
  :root { --ex-left:calc(var(--ex-menu) + max(40px, (100vw - var(--ex-menu) - var(--ex-cw)) / 2)); }
  .nhm-bg--c { --tree-w:min(720px, calc((var(--ex-left) - 24px) / 0.78)); }
  .nhm-bg--c .dino2 { display:none; }   /* ช่องขวาแคบเกินไดโนเสาร์ตัวขวา */
}
/* ไดโนเสาร์ขวาโผล่เฉพาะเมื่อช่องขวากว้างพอ (≥ ~230px) และย่อให้อยู่ในช่องนั้น */
@media (min-width:2140px) {
  /* XAMPP: bg.css ของเว็บกำหนดขนาด dino2 ด้วย --dw2 (กว้าง = --dw2 × 1.6) จึงย่อผ่าน --dw2 แทน width ตรงๆ */
  .nhm-bg--c .dino2 { display:block; right:0; --dw2:calc(min(380px, (100vw - var(--ex-menu) - var(--ex-cw)) / 2 - 24px) / 1.6); }
}

/* ---------- ≥1600px: ส่วนหัวสองคอลัมน์ ---------- */
@media (min-width:1600px) {
  /* ถาวร: ภาพใหญ่ซ้าย การ์ดตัวเลขเรียงลงทางขวา */
  .ex-hero { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:12px; margin-top:28px; }
  .ex-hero .hero-img { margin:0; }
  .ex-hero .facts { margin:0; grid-template-columns:1fr; grid-template-rows:repeat(3,1fr); }
  .ex-hero .facts div { display:flex; flex-direction:column; justify-content:center; padding:18px 24px; }
  .ex-hero .facts b { font-size:34px; }
  .ex-hero .facts span { font-size:15px; }
  /* หมุนเวียน: การ์ด “กำลังจัดแสดง” ภาพใหญ่ซ้าย รายละเอียดขวา */
  .now { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
  .now .ph-img { min-height:480px; }
  /* Virtual: ฮีโร่โมเดลสูงขึ้นตามความกว้าง (รายการชั้นซ้าย / แผงขวา คงเดิม) */
  .vmx { height:720px; }
}
/* Virtual: ภาพนิ่ง (ไม่มี 3D) บนเวทีที่กว้างกว่าภาพ — ย่อให้พอดีความสูง (พื้นสีเดียวกับเวที) และคำนวณหมุดต้นศรีตรังตามภาพ
   ภาพ 1600×1060 (1.509:1) หมุดอยู่ที่ 28.47% / 45.2% ของภาพ → left = 50% − (0.5 − 0.2847) × 1.509 × สูงเวที */
@media (min-width:1441px) {
  .vmx-still { object-fit:contain; }
  .vmx:not(.gl-on) .vmx-pin { left:calc(50% - 0.3249 * 660px); }
}
@media (min-width:1600px) { .vmx:not(.gl-on) .vmx-pin { left:calc(50% - 0.3249 * 720px); } }

/* ---------- รอบ 7: ตึก 3D เป็นพื้นหลังหัวหน้า (vm-mini.js) — แทนกล่อง 230 px ---------- */
.vbh { position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r); background:#f3ecf4; padding:36px 40px 40px; min-height:360px; display:flex; flex-direction:column; justify-content:center; }
.vbh-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.vbh .vb-slot { position:absolute; top:0; bottom:0; right:0; width:58%; aspect-ratio:auto; cursor:default; }
.vbh .vb-still { object-fit:contain; object-position:right center; }
.vbh-bg::after { content:""; position:absolute; inset:0; background:rgba(243,236,244,.22); }   /* ม่านสีเรียบ ไม่ไล่สี */
.vbh-text { position:relative; max-width:52%; }
.vbh-text > :first-child { margin-top:0; }
.vbh-text .lead { max-width:none; }
.vbh-link { position:absolute; right:20px; bottom:16px; font-size:13px; font-weight:600; color:var(--brand-dark); background:#fff; padding:6px 14px; border-radius:999px; text-decoration:none; }
.vbh + .ex-hero, .vbh + .note { margin-top:20px; }
@media (min-width:1600px) { .vbh { min-height:420px; padding:44px 48px 48px; } .vbh .vb-slot { width:60%; } }
@media (max-width:1100px) { .vbh-text { max-width:60%; } .vbh .vb-slot { width:55%; } }
@media (max-width:600px) {
  /* มือถือ: ภาพนิ่งเต็มพื้นที่ + ม่านสีเรียบทึบพอให้อ่านง่าย */
  .vbh { padding:22px 18px 56px; min-height:0; }
  .vbh .vb-slot { width:100%; }
  .vbh .vb-still { object-fit:cover; object-position:70% center; }
  .vbh-bg::after { background:rgba(243,236,244,.8); }
  .vbh-text { max-width:none; }
  .vbh-link { left:18px; right:auto; bottom:14px; }
}

/* ---------- รอบ 8: พรีวิวพื้นที่ในการ์ด "5 พื้นที่ในพิพิธภัณฑ์" (zone-preview.js) ---------- */
.zp-wrap { align-items:stretch; }
.zp-left { display:flex; flex-direction:column; gap:16px; min-width:0; }
.zp-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.zp-head h2, .zp-head .muted { margin-bottom:0; }
.zp { margin:0; display:flex; flex-direction:column; gap:10px; flex:1; }
.zp-img { flex:1; min-height:220px; border-radius:12px; background:var(--tint); overflow:hidden; position:relative; }
.zp-img img { position:absolute; inset:0; width:100%; height:100%; display:block; }
.zp-img.plan img { object-fit:contain; padding:14px 18px; box-sizing:border-box; }
.zp-img.photo img { object-fit:cover; }
.zp figcaption { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; font-size:14px; line-height:1.6; color:var(--mute); }
.zp figcaption b { color:#2d1530; font-size:15px; }
.zp-n { display:inline-flex; align-items:center; gap:6px; color:var(--brand-dark); font-weight:600; }
.zp-n svg { width:18px; height:18px; }
.zp-hl { flex-basis:100%; }
.zp figcaption a { color:var(--brand-dark); font-weight:600; text-decoration:none; margin-left:auto; }
.stack a.on { box-shadow:none; transform:translateX(-6px); }
.stack a { transition:transform .2s; }
@media (prefers-reduced-motion: reduce) { .stack a { transition:none; } }
@media (max-width:1100px) { .zp-img { min-height:0; aspect-ratio:2.1/1; flex:none; } }
@media (max-width:600px) { .zp figcaption a { margin-left:0; } .stack a.on { transform:none; } .stack:has(.on) a:not(.on) { opacity:.72; } }
.sheet .zp-wrap .stack { padding-left:0; margin:0; }   /* inner.css .sheet ul ใส่ padding 1.2em ทับ — เดิมแถบเยื้องขวา 19 px */

/* ===== ค่าที่เคยเป็น style="" ในต้นแบบ ย้ายมาเป็นคลาส (HTML/CSS แยกไฟล์) ===== */
.ex .x-hours { margin:4px 0 14px; }
.ex .x-addr { margin:0 0 8px; }
.ex .x-m0 { margin:0; }
.ex .x-acts { display:flex; gap:8px; flex-wrap:wrap; }
.ex .x-now-title { font-size:26px; margin-top:12px; }
.ex .x-note-top { margin-top:24px; }
.ex .x-now { margin-top:28px; }
.ex .duo .x-kick-light { color:#f3e6f5; }
.ex .x-h22 { font-size:22px; }

/* มือถือ: inner.css ของเว็บวาง crumb+h1 ไว้ขวากล่องเมนู (เว้นซ้าย 72px) เฉพาะลูกตรงของ .sheet
   หน้าหมุนเวียนห่อหัวเรื่องไว้ใน .ex-head จึงต้องเว้นเองแบบเดียวกัน ไม่งั้นปุ่มเมนูทับหัวเรื่อง */
@media (max-width: 900px) {
  .ex .ex-head .crumb, .ex .ex-head h1 { padding-left: 72px; }
  .ex .ex-head h1 { min-height: 110px; line-height: 1.5; }
}

/* XAMPP: หัวหน้า .vbh (รอบ 7) ห่อ crumb+h1 ไว้ใน .vbh-text จึงไม่โดนกฎมือถือของ inner.css (.sheet > h1 เว้นซ้ายให้กล่องเมนู)
   เว้นเองให้ข้อความพ้นกล่องเมนู (ขอบขวาเมนู ≈ 78px จากจอ) — ≤600: 16 + 18 + 56 · 601–900: 16 + 40 + 30 */
@media (max-width: 900px) {
  .ex .vbh-text .crumb, .ex .vbh-text h1 { padding-left: 30px; }
  .ex .vbh-text h1 { min-height: 110px; line-height: 1.5; }
}
@media (max-width: 600px) {
  .ex .vbh-text .crumb, .ex .vbh-text h1 { padding-left: 56px; }
}