/* PSUNHM — หน้าย่อย "วางแผนเข้าชม" (เวลา/ค่าเข้าชม · Walk in · หมู่คณะ · แผนผังอาคาร)
   ใช้ต่อจาก exhibition-pages.css (อ่านอย่างเดียว ไม่แก้กฎเดิม) · ทุกกฎขึ้นต้นด้วย .vs
   flat + light: ไม่มี glow, gradient, glass, เส้นขอบ, แถบเส้นบาง */
.vs .h22 { font-size:22px; }
.vs .sm { font-size:14px; margin:8px 0 0; }
.vs .acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.vs .btn.ghost { background:#ffffff26; color:#fff !important; }
.vs .btn.ghost:hover { background:#ffffff40; }
.vs .vs-src { font-size:13px; color:var(--mute); margin:10px 0 0; }
.vs .duo h2 { margin-bottom:4px; }

/* วันนี้ + ตารางสัปดาห์ */
.vs-today { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:12px; margin-top:28px; }
.vs-today > div { border-radius:var(--r); padding:26px 28px; }
.now-card { background:var(--brand); color:#fff; display:flex; flex-direction:column; }
.now-card .kicker { color:#f3e6f5; }
.nc-state { display:flex; align-items:center; gap:12px; font-size:30px; line-height:1.45; margin:6px 0 4px !important; }
.nc-state .dot { width:14px; height:14px; border-radius:50%; background:#fff; flex:none; }
.now-card.closed { background:#5e3264; }
.now-card.closed .dot { background:#c49bc9; }
.nc-sub { color:#f6eef7; font-size:16px; }
.now-card .acts { margin-top:auto; padding-top:8px; }
.week-card { background:#fff; }
.week { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:4px; }
.week li { display:flex; justify-content:space-between; gap:12px; padding:8px 14px; border-radius:10px; font-size:16px; }
.week li b { font-weight:700; color:#222; }
.week li.off b { color:var(--mute); font-weight:400; }
.week li.on { background:var(--tint); }
.week li.on b { color:var(--brand-dark); }
.wk-note { font-size:13px; color:var(--mute); margin:10px 0 0 14px !important; }

/* อัตราค่าเข้าชม */
.vs-rates { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.rc { background:#fff; border-radius:16px; padding:20px 22px; }
.rc-h { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; margin:0 0 10px !important; }
.rc-no { background:var(--tint); color:var(--brand-dark); font-size:13px; border-radius:999px; padding:2px 10px; }
.rc ul { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.rc li { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:10px 0; }
.rc li + li { box-shadow:0 -1px 0 #f0e8f1; }
.rc li span { font-size:15px; }
.rc li span small { display:block; font-size:13px; color:var(--mute); }
.rc li b { font-size:24px; line-height:1.4; color:var(--brand-dark); white-space:nowrap; }
.rc li b small { font-size:14px; font-weight:400; color:var(--mute); }
.rc.free { background:var(--tint); }
.rc.free .rc-no { background:#fff; }
.rc.free li + li { box-shadow:0 -1px 0 #e3d3e5; }
.rc-note { font-size:13px; color:#4a3a4c; margin:10px 0 0 !important; }

/* กิจกรรมพิเศษ */
.vs-acts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ag { background:#fff; border-radius:16px; padding:20px 22px; }
.ag-h { font-size:14px; color:var(--mute); margin:0 0 8px !important; }
.ag-h b { color:var(--brand-dark); font-size:16px; margin-right:8px; }
.ag ul { list-style:none; margin:0; padding:0; }
.ag li { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; }
.ag li + li { box-shadow:0 -1px 0 #f0e8f1; }
.ag .code { width:40px; height:40px; border-radius:12px; background:var(--tint); color:var(--brand-dark); font-weight:700; display:grid; place-items:center; font-size:14px; }
.ag .nm b { display:block; font-size:16px; line-height:1.5; }
.ag .nm small { font-size:13px; color:var(--mute); }
.ag .pr { font-size:15px; font-weight:700; color:#222; text-align:right; max-width:220px; }
.ag .pr small { font-weight:400; color:var(--mute); font-size:13px; }

.vs-dates { list-style:none; padding:0; margin:10px 0 0; display:grid; gap:6px; }
.vs-dates li { display:flex; justify-content:space-between; gap:12px; background:var(--tint); border-radius:10px; padding:8px 14px; font-size:15px; }
.vs-dates li span { color:var(--mute); }

/* ติดต่อ */
.vs-contact { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.vs-contact > div { background:#fff; border-radius:var(--r); padding:24px 26px; }
.vs-contact .pur { background:var(--brand); color:#fff; }
.vs-contact .pur .kicker { color:#f3e6f5; }
.vs-contact .pur p { color:#f6eef7; }
.vs-contact h2 { font-size:28px; }
.vs-contact h3 { font-size:18px; }

/* Walk in */
.vs-hero { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:28px; }
.vs-hero .hero-img { margin:0; }
.vs-hero .hero-img img { aspect-ratio:21/8; }
.vs-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.vs-facts > div { background:#fff; border-radius:14px; padding:16px 18px; display:flex; gap:14px; align-items:flex-start; }
.vs-facts .ic, .vs-steps .ic { width:48px; height:48px; border-radius:14px; background:var(--tint); color:var(--brand-dark); display:grid; place-items:center; flex:none; }
.vs-facts .ic svg { width:26px; height:26px; }
.vs-facts p { margin:0; font-size:14px; color:var(--mute); }
.vs-facts small { display:block; font-size:13px; }
.vs-facts b { display:block; font-size:20px; line-height:1.45; color:var(--brand-dark); }
.vs-steps p a { font-weight:700; }
.vs-steps.num b i { font-style:normal; display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--brand); color:#fff; font-size:13px; margin-right:8px; vertical-align:2px; line-height:1; }
.vs-map { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:12px; }
.vs-map figure { margin:0; background:#fff; border-radius:var(--r); overflow:hidden; }
.vs-map img { display:block; width:100%; height:auto; }
.vs-map .vm-side { background:#fff; border-radius:var(--r); padding:22px 24px; }

/* หมู่คณะ */
.vs-book { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:12px; margin-top:28px; }
.bk-main { background:var(--brand); color:#fff; border-radius:var(--r); padding:28px 30px; }
.bk-main .kicker { color:#f3e6f5; }
.bk-main h2 { font-size:28px; }
.bk-main p { color:#f6eef7; }
.bk-facts { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bk-facts li { background:#fff; border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; justify-content:center; }
.bk-facts b { font-size:24px; line-height:1.45; color:var(--brand-dark); }
.bk-facts span { font-size:14px; color:var(--mute); }
.vs-rounds { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:12px; }
.vs-rounds > div { background:#fff; border-radius:16px; padding:22px 24px; }
.rounds { list-style:none; padding:0; margin:12px 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.rounds li { background:var(--tint); border-radius:12px; padding:10px 12px; }
.rounds small { display:block; font-size:13px; color:var(--mute); }
.rounds b { font-size:17px; color:var(--brand-dark); }
.mini { list-style:none; padding:0; margin:8px 0 0; }
.mini li { display:flex; justify-content:space-between; gap:12px; padding:9px 0; font-size:15px; }
.mini li + li { box-shadow:0 -1px 0 #f0e8f1; }
.mini b { color:var(--brand-dark); white-space:nowrap; }

/* ≥1600: วันนี้/ตาราง กว้างขึ้น · Walk in ภาพซ้าย ตัวเลขขวา (เหมือนหน้าถาวร) */
@media (min-width:1600px) {
  .vs-hero { grid-template-columns:minmax(0,1fr) 320px; }
  .vs-hero .hero-img img { aspect-ratio:auto; height:100%; min-height:380px; }
  .vs-facts { grid-template-columns:1fr; }
  .vs-facts > div { align-items:center; }
  .vs-rates { grid-template-columns:1fr 1fr 1.2fr; }
}

/* tablet / mobile */
@media (max-width:900px) {
  .vs-today, .vs-rates, .vs-acts, .vs-contact, .vs-map, .vs-book, .vs-rounds { grid-template-columns:minmax(0,1fr); }
  .vs-facts { grid-template-columns:minmax(0,1fr); }
  .vs-hero .hero-img img { aspect-ratio:16/10; }
  .nc-state { font-size:24px; }
  .rounds { grid-template-columns:1fr 1fr; }
  .ag li { grid-template-columns:40px minmax(0,1fr); }
  .ag .pr { grid-column:2; text-align:left; }
  .vs-today > div, .bk-main { padding:22px; }
}
@media (max-width:600px) { .bk-facts b { font-size:20px; } .vs-contact h2 { font-size:24px; } }

/* ===== แผนผังอาคาร ===== */
.fp-vmx { margin-top:28px; }
.vs .fp-mini { list-style:none; padding:0; margin:6px 0 0; display:grid; gap:6px; }
.vs .fp-mini button { font:inherit; border:0; cursor:pointer; width:100%; text-align:left; background:var(--tint); border-radius:12px; padding:9px 14px; display:flex; flex-direction:column; color:#2d1530; }
.vs .fp-mini button:hover { background:var(--tint2); }
.vs .fp-mini small { font-size:12px; color:var(--mute); line-height:1.4; }
.vs .fp-mini b { font-size:15px; line-height:1.5; }
.vs .vp-img.plan { background:#fff; }
.vs .vp-img.plan img { object-fit:contain; }
.vs .fp-pz { list-style:none; padding:0; margin:4px 0 14px; display:grid; gap:6px; }
.vs .fp-pz li { background:var(--tint); border-radius:10px; padding:8px 12px; }
.vs .fp-pz b { display:block; font-size:15px; line-height:1.5; }
.vs .fp-pz small { font-size:12px; color:var(--mute); }
.vs .vp-acts button.btn { font:inherit; font-weight:700; border:0; cursor:pointer; font-size:15px; }

.fp-dl { display:flex; flex-wrap:wrap; gap:8px; }
.fp-dl .btn { font:inherit; font-weight:700; font-size:15px; border:0; cursor:pointer; }
.fp-dl [aria-disabled="true"] { cursor:not-allowed; }
.fp-floors { list-style:none; padding:0; margin:0 0 12px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.fp-floors button { font:inherit; border:0; cursor:pointer; width:100%; text-align:left; background:#fff; border-radius:14px; padding:12px 18px; display:flex; flex-direction:column; color:#2d1530; }
.fp-floors button small { font-size:13px; color:var(--mute); line-height:1.4; }
.fp-floors button b { font-size:16px; line-height:1.5; }
.fp-floors button:hover { background:var(--tint); }
.fp-floors button[aria-pressed="true"] { background:var(--brand); color:#fff; }
.fp-floors button[aria-pressed="true"] small { color:#f3e6f5; }

.fp-card { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:12px; }
.fp-card[hidden] { display:none; }
.fp-art { background:#fff; border-radius:var(--r); padding:22px 24px 16px; }
.fp-head { display:flex; align-items:center; gap:14px; }
.fp-head h3 { margin:0; }
.fp-head .en { margin:0; }
.fp-no { background:var(--brand-dark); color:#fff; font-weight:700; border-radius:12px; padding:8px 14px; font-size:15px; white-space:nowrap; }
.fp-img { position:relative; margin:10px 0 0; }
.fp-img img { display:block; width:100%; height:auto; }
.fp-cap { font-size:13px; color:var(--mute); margin:6px 0 0 !important; }
.fp-zone { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); background:#fff; border-radius:12px; padding:4px 12px; display:flex; flex-direction:column; align-items:center; text-align:center; pointer-events:none; }
.fp-zone b { font-size:14px; line-height:1.5; color:#2d1530; white-space:nowrap; }
.fp-zone small { font-size:11px; color:var(--mute); line-height:1.4; }
.fp-zone.d { background:var(--brand-dark); } .fp-zone.d b { color:#fff; } .fp-zone.d small { color:#f3e6f5; }
.fp-fac { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); display:flex; align-items:center; gap:6px; }
.fp-fac i { width:32px; height:32px; border-radius:50%; background:var(--brand-dark); color:#fff; display:grid; place-items:center; }
.fp-fac i svg { width:18px; height:18px; }
.fp-fac b { font-size:12px; background:#fff; color:#2d1530; border-radius:999px; padding:1px 8px; white-space:nowrap; }
.fp-fac.ex i { background:#fde7b0; color:#6b4a00; }
.fp-fac.ex b { display:none; }
.fp-side { background:#fff; border-radius:var(--r); padding:22px 24px; display:flex; flex-direction:column; }
.fp-zl { list-style:none; padding:0; margin:4px 0 0; display:grid; gap:14px; }
.fp-zl li { display:grid; grid-template-columns:14px minmax(0,1fr); gap:12px; }
.fp-zl .sw { width:14px; height:14px; border-radius:4px; margin-top:6px; }
.fp-zl .sw.d, .fp-legend .lg.zd { background:var(--brand-dark); } .fp-zl .sw.l, .fp-legend .lg.zl { background:#e3cfe5; }
.fp-zl b { display:block; font-size:16px; line-height:1.5; }
.fp-zl small { font-size:13px; color:var(--mute); }
.fp-zl p { font-size:14px; color:#333; margin:4px 0 0 !important; }
.fp-side .acts { margin-top:auto; padding-top:14px; }
.fp-legend { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:12px; }
.fp-legend > div { background:#fff; border-radius:16px; padding:18px 22px; }
.fp-legend > div.ex { background:#fffaf0; }
.fp-legend ul { list-style:none; padding:0; margin:6px 0 0; display:flex; flex-wrap:wrap; gap:8px 18px; }
.fp-legend li { display:flex; align-items:center; gap:8px; font-size:14px; }
.fp-legend .lg { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--brand-dark); color:#fff; flex:none; }
.fp-legend .lg svg { width:16px; height:16px; }
.fp-legend .lg.zd, .fp-legend .lg.zl { border-radius:6px; width:20px; height:20px; }
.fp-legend .lg.ar { background:#222; }
.fp-legend .lg.ex { background:#fde7b0; color:#6b4a00; }

@media (min-width:1600px) { .fp-card { grid-template-columns:minmax(0,2.2fr) minmax(0,1fr); } }
@media (max-width:900px) {
  .fp-card, .fp-legend { grid-template-columns:minmax(0,1fr); }
  .fp-floors { grid-template-columns:minmax(0,1fr); }
  .fp-floors button { flex-direction:row; align-items:baseline; gap:10px; }
  .fp-art { padding:16px 14px 12px; }
  .fp-zone { padding:2px 8px; } .fp-zone b { font-size:11px; } .fp-zone small { display:none; }
  .fp-fac i { width:22px; height:22px; } .fp-fac i svg { width:13px; height:13px; } .fp-fac b { display:none; }
}
/* พิมพ์: เฉพาะผังชั้นที่เลือก (placeholder — ไฟล์ PDF จริงรอทำ) */
@media print {
  body > *:not(main), .vs > *:not(#plan), #plan .sec-head .fp-dl, .fp-floors, .fp-side .acts { display:none !important; }
  .sheet.ex.vs { padding:0 !important; }
  .fp-card { grid-template-columns:1fr; } .fp-art, .fp-side, .fp-legend > div { padding:8px 0; }
}

/* ===== walkin: แผนผังและการเดินทาง (map3d) — ปรับให้เข้ากับหน้า visit: มุมโค้ง --r, ปุ่ม light ไม่มีเส้นขอบ ===== */
.vs .m3d { font-size:16px; }
.vs .m3d .m3-sub { margin:-6px 0 14px; color:var(--mute); font-size:16px; }
.vs .m3d .m3-box, .vs .m3d .m3-addr, .vs .m3d .m3-clip { border-radius:var(--r); }
.vs .m3d .m3-info { margin-top:12px; gap:12px; }
.vs .m3d .btn { border-color:transparent; font-size:15px; }
.vs .m3d .btn.ghost { background:var(--tint); color:var(--brand-dark) !important; }
.vs .m3d .btn.ghost:hover { background:var(--tint2); }
.vs .m3d .m3-addr .btn { align-self:flex-start; }
.vs .m3d > section { margin:0; padding:0; }
.vs .m3d > .m3-info { margin-top:12px; }
.vs .m3d .m3-stage .m3-now, .vs .m3d .m3-stage .m3-hint, .vs .m3d .m3-lab { font-family:inherit; }

/* XAMPP: ตำแหน่งป้ายบนผังชั้น (เดิมเป็น style="--x;--y" ในต้นแบบ) ย้ายมาเป็นคลาส (HTML/CSS แยกไฟล์) */
.fp-at-33-58 { --x:33%; --y:58%; }
.fp-at-57-30 { --x:57%; --y:30%; }
.fp-at-14-74 { --x:14%; --y:74%; }
.fp-at-27-47 { --x:27%; --y:47%; }
.fp-at-68-13 { --x:68%; --y:13%; }
.fp-at-30-58 { --x:30%; --y:58%; }
.fp-at-76-7 { --x:76%; --y:7%; }