/* =====================================================================
   public.css — หน้าจองสำหรับลูกค้า (ต่อยอดจาก app.css)
   ต่างจากหน้าพนักงานตรงที่ต้อง "อ่านง่ายสำหรับคนที่ไม่เคยใช้ระบบนี้"
   ตัวหนังสือใหญ่ขึ้น ปุ่มชัดขึ้น ขั้นตอนมีเลขกำกับ
   ===================================================================== */
/* =====================================================================
   🖤 ธีมดำ-ทอง-รังผึ้ง — เฉพาะหน้าลูกค้าเท่านั้น
   (เจ้าของสั่ง 16 ก.ย. 2569 · สีดึงมาจากโลโก้จริง ไม่ได้เดาเอง)

   🚨 ทำไมหน้าพนักงาน "ไม่" ทำสีดำด้วย — ตกลงกับเจ้าของแล้ว:
      หัวหน้าฝ่ายถือมือถือเดินกลางลานตอนบ่ายแดดเปรี้ยง
      ตัวหนังสือทองบนพื้นดำอ่านกลางแดดยากกว่าดำบนขาวมาก
      หน้านี้เป็นหน้าขาย ลูกค้าเปิดตอนไหนก็ได้ → จัดเต็มได้

   วิธี: เขียนทับ "ตัวแปรสี" ทั้งชุดที่ระดับ .pub เท่านั้น
         การ์ด/ปุ่ม/ช่องกรอก ที่ app.css เขียนด้วย var() จะพลิกเป็นดำเองทั้งหมด
         ไม่ต้องไปไล่แก้ทีละกฎ และไม่กระทบหน้าพนักงานแม้แต่จุดเดียว
   ===================================================================== */
.pub {
  --bg: #0b0b0d;
  --card: #15151a;
  --ink: #f2eee5;          /* ขาวอมอุ่น เข้ากับทอง — ขาวล้วนจะดูแข็งไป */
  --ink-2: #a79f90;
  --line: #2b2b33;

  --accent: #c9922f;       /* ทองเป็นสีหลักแทนน้ำเงิน */
  --accent-soft: #241d10;

  /* สีสถานะต้องสว่างขึ้นบนพื้นดำ ไม่งั้นจมหายไปกับพื้น
     แต่ความหมายคงเดิมเป๊ะ: เขียว=ว่าง ส้ม=ถูกจอง แดง=มีปัญหา เทา=ปิด */
  --ok:   #5fd08a;  --ok-bg:   rgba(95,208,138,.13);
  --busy: #e0a43a;  --busy-bg: rgba(224,164,58,.14);
  --bad:  #f08a80;  --bad-bg:  rgba(240,138,128,.13);
  --off:  #7d8494;  --off-bg:  rgba(125,132,148,.13);

  --gold: #c9922f;
  --gold-hi: #f0d26b;      /* ทองสว่าง ไว้ไล่เฉดบนหัวข้อ */
  --gold-line: rgba(201,146,47,.32);
  --forest: #3a4a35;       /* เขียวขี้ม้าจากรูปในโลโก้ */

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);

  color: var(--ink);
  background-color: var(--bg);

  /* ลายรังผึ้ง — ลายเดียวกับพื้นหลังในโลโก้
     วาดด้วย SVG ฝังในไฟล์ ไม่โหลดรูปเพิ่ม (เน็ตที่ลานช้า ยิ่งโหลดน้อยยิ่งดี)
     ทับด้วยแสงทองจาง ๆ ตรงกลางบน ให้ไม่แบนเหมือนกระดาษสีดำ */
  background-image:
    radial-gradient(1100px 520px at 50% -8%, rgba(201,146,47,.16), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%23c9922f' stroke-opacity='.11' stroke-width='1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5z'/%3E%3Cpath d='M13.99-15.75l13 7.5v15l-13 7.5L1 6.75v-15l12.99-7.5z'/%3E%3Cpath d='M13.99 34.25l13 7.5v15l-13 7.5L1 56.75v-15l12.99-7.5z'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed, fixed;
}
.pub .pub-main { max-width: 640px; margin: 0 auto; padding: 1rem .9rem 3rem; }
/* บนคอม ส่วนผังลานต้องกว้างพอให้เห็นรูปชัดและอ่านรายการช่องได้พร้อมกัน
   แต่ฟอร์มกรอกข้อมูลยังคุมความกว้างไว้ ไม่ให้บรรทัดยาวจนอ่านยาก */
@media (min-width: 900px) {
  .pub .pub-main { max-width: 1120px; }
  .pub .hero, .pub .datebar, .pub .card.step, .pub .pay-note, .pub .done { max-width: 720px; margin-inline: auto; }
  .pub .card.step + .card.step { margin-top: .9rem; }
}

.pub-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .9rem; background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.pub-brand {
  flex: 1; display: flex; align-items: center; gap: .45rem;
  font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; font-size: 1.05rem;
}
.pub-foot { max-width: 640px; margin: 0 auto; padding: 0 .9rem 2.5rem; text-align: center; }

.hero { text-align: center; padding: 1.2rem .5rem .4rem; }
.hero h1 { font-size: 1.5rem; margin-bottom: .3rem; }
.hero p { color: var(--ink-2); margin: 0; }

/* ---------- ขั้นตอนมีเลขกำกับ ---------- */
.step { margin-bottom: .9rem; }
.step h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.step-no {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center;
}
/* ⚠️ ต้องมี min-width:0 — ช่องวันที่ของเบราว์เซอร์มีความกว้างขั้นต่ำในตัว
   ถ้าไม่ใส่ ช่องขวาจะดันจนหน้าเลื่อนแนวนอนได้บนมือถือ */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.two > * { min-width: 0; }
.two input, .two select { min-width: 0; width: 100%; }
.two label { margin-top: .5rem; }

/* ---------- ช่องกางเต็นท์ (การ์ดใหญ่กว่าฝั่งพนักงาน อ่านง่ายกว่า) ---------- */
.zone-lab { font-weight: 600; color: var(--ink-2); font-size: .9rem; margin: .8rem 0 .4rem; }
.pub-pitches { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; }
@media (min-width: 520px) { .pub-pitches { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.pub-pitch {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  min-height: 92px; padding: .6rem .4rem;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  font: inherit; color: inherit; cursor: pointer; text-align: center;
}
.pub-pitch:hover { border-color: var(--accent); }
.pub-pitch.sel { border-color: var(--accent); background: var(--accent-soft); }
.pp-code { font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; font-size: 1.05rem; }
.pp-cap { font-size: .74rem; color: var(--ink-2); }
.pp-price { font-weight: 600; margin-top: .15rem; }
.pp-sub { font-size: .72rem; color: var(--ink-2); }

/* ---------- อุปกรณ์ให้เช่า + ปุ่มเพิ่ม/ลด ---------- */
.pub-item {
  display: flex; align-items: center; gap: .8rem;
  padding: .65rem 0; border-bottom: 1px solid var(--line);
}
.pub-item:last-child { border-bottom: 0; }
.pi-info { flex: 1; min-width: 0; }
.pi-name { font-weight: 500; }

.stepper { display: flex; align-items: center; gap: .1rem; flex: 0 0 auto; }
.st-btn {
  width: 44px; height: 44px; border: 1px solid var(--line); background: #fff;
  border-radius: 11px; font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--ink);
}
.st-btn:active { background: #eef1f7; }
.st-val {
  min-width: 40px; text-align: center;
  font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; font-size: 1.05rem;
}

/* ---------- สรุปยอด ---------- */
.summary { border-color: #cfe0ff; background: linear-gradient(#f6f9ff, #fff); }
.sr {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .35rem 0; border-bottom: 1px dashed var(--line);
}
.sr span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sr-total {
  border-bottom: 0; border-top: 2px solid var(--ink); margin-top: .4rem; padding-top: .55rem;
  font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; font-size: 1.15rem;
}
.summary .btn-lg { margin-top: 1rem; }
.owe { color: #b45309; font-weight: 600; }
.paidok { color: var(--ok); font-weight: 600; }

/* ---------- หน้าสถานะหลังจองสำเร็จ ---------- */
.done { text-align: center; }
.done-mark { font-size: 2.8rem; }
.done h1 { margin: .3rem 0 .2rem; }
.done-dead { background: var(--off-bg); }
.code-big {
  font-family: 'Bai Jamjuree', sans-serif; font-weight: 700;
  font-size: 1.5rem; letter-spacing: .5px; margin: .2rem 0;
}
.kv {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .35rem 0; border-bottom: 1px solid var(--line); font-size: .95rem;
}
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--ink-2); flex: 0 0 auto; }
.kv span:last-child { text-align: right; }

/* นาฬิกานับถอยหลัง — ต้องเห็นชัดว่าเหลือเวลาเท่าไหร่ */
.cd {
  display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
  margin-top: .6rem; padding: .6rem 1.4rem;
  background: var(--busy-bg); border: 1px solid #f3d6a8; border-radius: 12px;
}
.cd-lab { font-size: .8rem; color: #b56a00; }
.cd-num {
  font-family: 'Bai Jamjuree', sans-serif; font-weight: 700;
  font-size: 2rem; line-height: 1.1; color: #b56a00; font-variant-numeric: tabular-nums;
}
.cd-warn { background: var(--bad-bg); border-color: #f4c2bf; }
.cd-warn .cd-lab, .cd-warn .cd-num { color: var(--bad); }

.pay-note { border-color: #f3d6a8; background: linear-gradient(#fffaf2, #fff); }
.linkbox {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: .5rem .6rem; margin: .4rem 0 .7rem; overflow-x: auto;
}
.linkbox code { background: transparent; font-size: .78rem; white-space: nowrap; }

/* ---------- QR พร้อมเพย์ ---------- */
.qr-card {
  display: flex; gap: .9rem; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: .8rem; margin: .6rem 0;
}
.qr-box { flex: 0 0 150px; width: 150px; }
.qr-box svg { display: block; width: 100%; height: auto; }
.qr-info { flex: 1; min-width: 0; }
.qr-name { font-weight: 600; }
.qr-id { font-family: 'Bai Jamjuree', sans-serif; letter-spacing: .5px; }
.qr-amt {
  font-family: 'Bai Jamjuree', sans-serif; font-weight: 700;
  font-size: 1.3rem; margin-top: .3rem; color: var(--accent);
}
@media (max-width: 400px) {
  .qr-card { flex-direction: column; text-align: center; }
  .qr-box { flex: 0 0 auto; width: 190px; }
}

.pay-ok { border-color: #bfe8cd; background: linear-gradient(#f4fdf7, #fff); }
.reject-box {
  background: var(--bad-bg); border: 1px solid #f4c2bf; border-radius: 11px;
  padding: .65rem .8rem; margin-bottom: .8rem;
}
.reject-box strong { color: var(--bad); }
.reject-box p { margin: .25rem 0 0; }

/* =====================================================================
   ผังลานแบบจิ้มบนแผนที่ (หน้าตาอ้างอิงหน้าจองเดิมของ RoomScope)
   ===================================================================== */

/* ---------- แถบเลือกวันด้านบน ---------- */
.datebar {
  position: sticky; top: 53px; z-index: 15;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: .7rem .85rem; margin-bottom: .9rem;
}
.datebar label { margin: 0; flex: 0 0 auto; font-weight: 600; }
.datebar input[type="date"] { flex: 1 1 150px; min-width: 0; }
/* ช่องวันที่ถูกครอบด้วยป้ายวันที่ไทย (.tdate) — ตัวครอบต้องเป็นคนยืดในแถบ ไม่ใช่ช่องจริงที่ซ่อนอยู่ข้างใน */
.datebar .tdate { flex: 1 1 150px; min-width: 0; width: auto; }
.datebar select { flex: 0 0 78px; width: 78px; }
.db-unit { flex: 0 0 auto; color: var(--ink-2); }
.db-out { flex: 1 1 100%; font-size: .85rem; color: var(--ink-2); }
@media (min-width: 560px) { .db-out { flex: 0 0 auto; margin-left: auto; } }

/* ---------- โครง 2 คอลัมน์: แผนที่ | รายการช่อง ---------- */
.board { display: grid; gap: .9rem; grid-template-columns: 1fr; margin-bottom: .9rem; }
@media (min-width: 900px) {
  .board { grid-template-columns: 1.35fr 1fr; align-items: start; }
  .board-nomap { grid-template-columns: 1fr; }
}

.board-map, .board-list {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden;
}
.board-list { padding: .8rem .85rem; }
.board-list h2 { font-size: 1rem; margin-bottom: .5rem; }
@media (min-width: 900px) {
  .board-list { max-height: 74dvh; overflow-y: auto; position: sticky; top: 118px; }
}

/* ---------- คำอธิบายสี + ปุ่มย่อ/ขยาย ---------- */
.legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem;
  padding: .55rem .8rem; border-bottom: 1px solid var(--line); font-size: .8rem;
}
.legend span { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink-2); }
.legend .spacer { flex: 1; }
.pin-dot { width: .72rem; height: .72rem; border-radius: 50%; display: inline-block; }
.pin-dot.free { background: #16a34a; }
.pin-dot.full { background: #dc2626; }
.pin-dot.off  { background: #8b93a7; }
.zoom-btn {
  width: 34px; height: 34px; border: 1px solid var(--line); background: #fff;
  border-radius: 9px; font-size: 1.05rem; line-height: 1; cursor: pointer; color: var(--ink);
}
.zoom-btn:active { background: #eef1f7; }

/* ---------- รูปผัง + หมุด ---------- */
.map-wrap { overflow: auto; background: #eef3ea; -webkit-overflow-scrolling: touch; }
.map-inner { position: relative; transform-origin: 0 0; transition: transform .15s ease; }
.map-img { display: block; width: 100%; height: auto; }

.pin {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 30px; height: 26px; padding: 0 .3rem;
  border-radius: 999px; border: 2px solid #fff; cursor: pointer;
  font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; font-size: .68rem;
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.pin.free { background: #16a34a; }
.pin.full { background: #dc2626; cursor: not-allowed; }
.pin.off  { background: #8b93a7; cursor: not-allowed; }
.pin.sel  { outline: 3px solid var(--accent); outline-offset: 2px; z-index: 5; }
.pin:hover { filter: brightness(1.1); }
.pin-code { white-space: nowrap; }

/* หมุดที่เห็นเล็ก แต่พื้นที่กดต้องใหญ่พอสำหรับนิ้วโป้ง (44px ตาม CLAUDE.md)
   ใช้ ::before ขยายพื้นที่กดโดยไม่ทำให้หมุดบังกันบนแผนที่ */
.pin::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.pin.full::before, .pin.off::before { width: 30px; height: 30px; }

/* ---------- การ์ดช่องในรายการด้านข้าง ---------- */
.pcard {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .6rem .5rem; margin: 0 -.5rem; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.pcard:last-child { border-bottom: 0; }
.pcard:hover { background: #f4f7fd; }
.pcard.sel { background: var(--accent-soft); border-radius: 10px; }
.pc-dot { width: .7rem; height: .7rem; border-radius: 50%; flex: 0 0 auto; }
.pc-dot.free { background: #16a34a; }
.pc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-code { font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; font-size: 1rem; }
.pc-sub { font-size: .74rem; color: var(--ink-2); }
.pc-price { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; }
.pc-amt { font-weight: 600; white-space: nowrap; }

/* ข้อความเตือนในกล่องสรุป — เช่น คนเกินกว่าที่ช่องรับได้ */
.err-inline {
  margin: 0;
  padding: .7rem .85rem;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: .92rem;
  line-height: 1.5;
}

/* ---------- หมุดบนผัง: 2 ชั้น ----------
   ไส้ใน (พื้นหลัง) = ว่าง/เต็ม/ปิด  — เรื่องที่ลูกค้าต้องรู้ก่อนอย่างอื่น
   กรอบนอก        = โซน/ประเภทที่พัก
   แยกกันคนละชั้นแบบนี้ สีเดียวจึงไม่ต้องพูดสองเรื่องพร้อมกัน */
.pin { border: 3px solid var(--zone, #fff); box-shadow: 0 0 0 1.5px #fff, 0 1px 4px rgba(0,0,0,.35); }
.pin.house { border-radius: 7px; }
.pin.sel { outline: 3px solid var(--ink); outline-offset: 3px; z-index: 5; }

.pin.dim { opacity: .28; }
.pin.dim:hover { opacity: .6; }

.lg-sep { width: 1px; height: 14px; background: var(--line); }
.lg-zones { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.lg-zone { display: inline-flex; align-items: center; gap: .3rem; }

/* ตัวอย่างหมุดในคำอธิบาย — ไส้ในเทากลาง ๆ เพื่อให้เห็นว่าสีที่ต่างกันคือ "กรอบ" */
.pin-frame {
  width: .8rem; height: .8rem; display: inline-block;
  border-radius: 3px; background: #cbd5e1;
  border: 2.5px solid var(--zone, #5c6478);
}

/* ---------- ปุ่มกรองประเภท ---------- */
.kfilter { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 .6rem; }
.kfilter:empty { display: none; }

.kchip {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 34px; padding: .3rem .7rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font: inherit; font-size: .88rem; color: var(--ink);
  cursor: pointer;
}
.kchip:hover { border-color: var(--accent); }
.kchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.kchip .kn { font-size: .78rem; opacity: .7; }

/* =====================================================================
   ผังลาน: ซูม/ลาก + หมุดวงแหวน (รวมจากรอบก่อน ๆ เป็นบล็อกเดียว)

   บทเรียน 3 รอบที่ผ่านมา:
     1) หมุดป้ายกว้าง ~39px ทับกันจนมองไม่เห็นผัง
     2) ซูมด้วย transform: scale → เบราว์เซอร์เอาภาพเล็กไปยืด ซูมใกล้แล้วเบลอ
     3) หมุดโชว์รหัสช่อง ซ้ำกับป้ายที่พิมพ์อยู่บนผังของ RoomScope อยู่แล้ว
   ใหม่:
     · ซูม = ขยายความกว้างจริงของรูป (ดู applyView) → คมทุกระดับ
     · หมุด = วงแหวนสีสถานะ ล้อมป้ายเดิมบนผัง · กลางวงโปร่ง → เห็นรหัสช่องจากรูปผัง
       สีโซนดูจากสีป้ายบนผังได้เลย ไม่ต้องมีกรอบสีซ้ำอีกชั้น
     · ขนาดวง = % ของความกว้างรูป → ใหญ่ขึ้นตามการซูม ล้อมป้ายพอดีทุกระดับ
   ===================================================================== */
.map-wrap {
  position: relative; overflow: hidden;
  aspect-ratio: 2600 / 1826;                 /* ค่าตั้งต้น — JS เปลี่ยนตามรูปจริงเมื่อโหลดเสร็จ */
  touch-action: pan-y;                       /* ยังไม่ซูม: นิ้วเดียวเลื่อนหน้าได้ */
  user-select: none; -webkit-user-select: none;
}
.map-wrap.can-pan  { touch-action: none; cursor: grab; }
.map-wrap.dragging { cursor: grabbing; }
.map-inner {
  position: absolute; left: 0; top: 0; width: 100%;
  transform-origin: 0 0; transition: none;
  container-type: inline-size;               /* cqw ของหมุด = % ของความกว้างรูปตอนนั้น */
}
.map-img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; user-select: none; }

/* ป้ายช่องบนผังกว้างราว 1.6% ของรูป → วงแหวน 2.2% ล้อมพอดี */
.map-wrap .pin {
  --st: #16a34a;
  width: 2.2cqw; min-width: 7px; height: auto; min-height: 0; aspect-ratio: 1;
  padding: 0; border-radius: 50%;
  border: clamp(1.5px, .3cqw, 4px) solid var(--st);
  background: transparent; color: transparent; outline: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 4px rgba(0, 0, 0, .45);
  transform: translate(-50%, -50%);
}
.map-wrap .pin.house { border-radius: 50%; }
.map-wrap .pin.free { --st: #16a34a; background: transparent; }
.map-wrap .pin.full { --st: #dc2626; background: rgba(220, 38, 38, .28); }
.map-wrap .pin.off  { --st: #8b93a7; background: rgba(139, 147, 167, .38); }
.map-wrap .pin .pin-code { display: none; }

.map-wrap .pin:hover { box-shadow: 0 0 0 2px #fff, 0 0 8px rgba(0, 0, 0, .55); filter: none; }
.map-wrap .pin.sel {
  --st: #2563eb; z-index: 6; outline: none;
  border-width: clamp(2.5px, .45cqw, 6px);
  box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(37, 99, 235, .45);
}

/* พื้นที่กดใหญ่กว่าวง แต่ไม่ใหญ่จนแย่งกับช่องข้าง ๆ */
.map-wrap .pin::before, .map-wrap .pin.full::before, .map-wrap .pin.off::before {
  width: max(24px, 160%); height: max(24px, 160%);
}

/* คำอธิบายสีให้ตรงกับหมุดวงแหวน + สีป้ายโซนบนผัง */
.legend .pin-dot { background: transparent; border: 2.5px solid; width: .8rem; height: .8rem; }
.legend .pin-dot.free { border-color: #16a34a; background: transparent; }
.legend .pin-dot.full { border-color: #dc2626; background: rgba(220, 38, 38, .28); }
.legend .pin-dot.off  { border-color: #8b93a7; background: rgba(139, 147, 167, .38); }
.zone-sw {
  width: .8rem; height: .8rem; display: inline-block; border-radius: 50%;
  background: var(--zone, #cbd5e1); border: 1px solid rgba(0, 0, 0, .35);
}

/* ปุ่มซูมอยู่มุมล่างขวาในผัง — แถบวันที่ที่ลอยอยู่ด้านบนบังไม่ถึง */
.map-ctrls {
  position: absolute; right: .55rem; bottom: .55rem; z-index: 8;
  display: flex; flex-direction: column; gap: .35rem;
}
.map-ctrls .zoom-btn { width: 40px; height: 40px; font-size: 1.2rem; box-shadow: var(--shadow); }

.map-hint {
  position: absolute; left: .55rem; bottom: .55rem; z-index: 7;
  background: rgba(26, 32, 50, .72); color: #fff; font-size: .72rem;
  padding: .25rem .6rem; border-radius: 999px; pointer-events: none;
  transition: opacity .2s ease;
}
.map-wrap.can-pan .map-hint { opacity: 0; }

/* ---------------------------------------------------------------------
   ผู้ใหญ่/เด็ก/สัตว์เลี้ยง · บริการฟรี · เงินประกัน · ป๊อปอัพกฎ
   --------------------------------------------------------------------- */
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .6rem; }
.three > * { min-width: 0; }
.three input { min-width: 0; width: 100%; }
.three label { margin-top: .5rem; }

.kid-ages { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .2rem; }
.kid { display: flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--ink-2); }
.kid select { padding: .35rem .5rem; }

.svc { display: grid; gap: .35rem; margin: .3rem 0 .2rem; }
.chk { display: flex; align-items: flex-start; gap: .55rem; line-height: 1.5;
       padding: .45rem .1rem; cursor: pointer; }
.chk input { width: 20px; height: 20px; margin: 0; flex: 0 0 20px; accent-color: var(--accent); }
.chk-rules { margin: .7rem 0 .3rem; font-weight: 600; }
.chk-rules a { color: var(--accent); }

.sr-note { color: var(--ink-2); font-size: .9rem; border-top: 1px dashed var(--line); padding-top: .5rem; }

.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end;
         justify-content: center; background: rgba(15, 20, 32, .55); padding: 0; }
.modal-card { background: #fff; width: 100%; max-width: 560px; max-height: 88vh;
              border-radius: 16px 16px 0 0; padding: 1.1rem 1.1rem 1.3rem;
              display: flex; flex-direction: column; }
.modal-card h2 { margin: 0 0 .4rem; }
.modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto;
              font-size: .93rem; line-height: 1.65; color: var(--ink-2); }
.modal-body h3 { font-size: .97rem; color: var(--ink); margin: .9rem 0 .3rem; }
.modal-body ul { margin: .2rem 0 .2rem 1.1rem; padding: 0; }
.modal-body li { margin: .18rem 0; }
.modal-card .btn { margin-top: .7rem; }
@media (min-width: 720px) {
  .modal { align-items: center; padding: 1.5rem; }
  .modal-card { border-radius: 16px; }
}

/* ชุด/เซ็ต — ต้องเด่นกว่าของชิ้นเดียว เพราะคุ้มกว่าและเตรียมของง่ายกว่า */
.grp-lab { font-weight: 600; color: var(--ink-2); font-size: .88rem;
           margin: .9rem 0 .35rem; }
.grp-lab:first-child { margin-top: .2rem; }
.pub-set { background: #f4f8ff; border-radius: 12px; padding: .55rem .6rem; }
.pub-set .pi-name { font-weight: 600; }

/* หัวข้อที่ยุบได้ — หน้าจองต้องสั้น กดชำระได้เร็ว */
.acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
                 justify-content: space-between; gap: .6rem; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: '▾'; color: var(--ink-2); font-size: 1rem;
                        transition: transform .15s; }
.acc[open] > summary::after { transform: rotate(180deg); }
.acc-h { font-family: 'Bai Jamjuree', sans-serif; font-weight: 600; font-size: 1.02rem;
         color: var(--ink); display: flex; align-items: center; gap: .5rem; }
.acc-sum { color: var(--ink-2); font-size: .85rem; text-align: right; margin-left: auto;
           margin-right: .3rem; }
.acc[open] > summary { margin-bottom: .5rem; }

/* ปุ่มช่วยแนะนำช่อง + ป้ายช่อง + แปลนขนาดพื้นที่ */
.btn-suggest { width: 100%; margin-top: .7rem; background: #fff; border: 1.5px solid var(--accent);
               color: var(--accent); font-weight: 600; min-height: 48px; border-radius: 12px; }
.wantbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
           background: #eef4ff; border: 1px solid #c9dbff; border-radius: 10px;
           padding: .5rem .65rem; font-size: .9rem; margin-bottom: .5rem; }
.pc-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.tagchip { font-size: .76rem; background: #eef7ee; color: #2f6b34; border-radius: 999px;
           padding: .1rem .45rem; }
.pc-more { display: inline-block; margin-top: .3rem; font-size: .85rem; color: var(--accent);
           text-decoration: underline; }
.shots { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .3rem; }
.shots img { height: 190px; width: auto; border-radius: 10px; flex: 0 0 auto; object-fit: cover; }
.pm-size { font-weight: 600; margin: .6rem 0 .2rem; }
.plan { width: 100%; max-width: 360px; height: auto; display: block; margin: .2rem auto .4rem; }

/* รูปของเช่า/ชุด ในรายการ */
.pi-thumb { width: 68px; height: 68px; object-fit: cover; border-radius: 10px;
            flex: 0 0 68px; cursor: pointer; }
/* แถวอุปกรณ์ 1 รายการ — รูป · ชื่อ+รายละเอียด · ปุ่มเพิ่มลด
   ⚠️ ต้องให้ขึ้นบรรทัดใหม่ได้ (flex-wrap) เพราะบล็อก "เลือกรุ่นเต็นท์" อยู่ในแถวเดียวกัน
   ถ้าไม่ให้ขึ้นบรรทัดใหม่ บนมือถือมันจะไปบีบช่องรายละเอียดจนเหลือ 0 px
   แล้วตัวหนังสือจะตกบรรทัดทีละตัวอักษร อ่านไม่ออกเลย */
.pub-item { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
/* บนมือถือ ถ้าชื่อ+รายละเอียดเหลือที่แคบกว่า 150px ให้ปุ่มเพิ่ม/ลดตกลงบรรทัดล่างแทน
   ดีกว่าปล่อยให้รายละเอียดของในชุดถูกบีบจนอ่านไม่ออก */
.pub-item > .pi-info { flex: 1 1 150px; }
.pi-more { margin-top: .2rem; font-size: .85rem; }
.shots-col { flex-direction: column; overflow-x: visible; }
.shots-col img { width: 100%; height: auto; max-height: none; }

/* เลือกรุ่นเต็นท์ — รูปใหญ่พอให้เห็นว่าหน้าตาเป็นยังไง เต็มแล้วเทาไว้ */
.models { flex: 1 0 100%; width: 100%; margin-top: .6rem; border-top: 1px dashed var(--line); padding-top: .55rem; }
.models-lab { font-size: .88rem; font-weight: 600; margin-bottom: .4rem; }
.models-row { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.mcard { flex: 0 0 128px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
         padding: .35rem; display: flex; flex-direction: column; gap: .25rem; cursor: pointer;
         text-align: center; }
.mcard img { width: 100%; height: 84px; object-fit: cover; border-radius: 8px; }
.mnopic { height: 84px; display: flex; align-items: center; justify-content: center;
          background: #f2f4f7; border-radius: 8px; color: var(--ink-2); font-size: .8rem; }
.mname { font-size: .82rem; font-weight: 600; line-height: 1.3; }
.mqty { font-size: .76rem; color: var(--ink-2); }
.mcard.sel { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.mcard.out { opacity: .45; cursor: not-allowed; filter: grayscale(1); }

/* ปุ่มดูรูปใต้การ์ดรุ่นเต็นท์ — แยกจากปุ่มเลือก จะได้ดูรูปรุ่นที่เต็มแล้วได้ด้วย */
.mwrap { flex: 0 0 128px; display: flex; flex-direction: column; gap: .3rem; }
.mwrap > .mcard { flex: 1 1 auto; width: 100%; }   /* การ์ดยืดเท่ากันทุกใบ ปุ่มดูรูปจะได้อยู่ระดับเดียวกัน */
.mzoom { width: 100%; min-height: 36px; border: 1px solid var(--line); background: #fff;
         border-radius: 9px; padding: .3rem .2rem; font-family: inherit; font-size: .78rem;
         color: var(--ink-2); cursor: pointer; }
.mzoom:hover, .mzoom:focus-visible { border-color: var(--accent); color: var(--accent); }


/* บรรทัดช่วยเหลือในหน้าจ่ายเงิน — ต้องเห็นชัด เพราะคนที่อ่านคือคนที่เงินออกไปแล้ว */
.pay-help { margin-top: .6rem; padding: .55rem .7rem; border-radius: 10px;
            background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12;
            font-size: .85rem; line-height: 1.5; }
.pay-help a { color: #7c2d12; font-weight: 700; }


/* แถบ "คุณมีการจองค้างอยู่" — เก็บจากเครื่องลูกค้าเอง กันคนจองซ้ำเพราะหาลิงก์เดิมไม่เจอ */
.last-book { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
             margin: 0 0 .8rem; padding: .6rem .75rem; border-radius: 12px;
             background: #eff6ff; border: 1px solid #bfdbfe; font-size: .9rem; }
.last-book .btn-link { padding: 0; }

/* ของที่ยังไม่มีรูปจริง — ใช้ไอคอนหมวดแทน ให้ทุกแถวเรียงตรงกัน
   (แถวมีรูปบ้างไม่มีบ้าง ตาจะสะดุดกว่าไม่มีรูปเลยทั้งหมด) */
.pi-noimg {
  display: flex; align-items: center; justify-content: center;
  background: #f2f4f7; color: #9aa3b2; font-size: 1.6rem; user-select: none;
}
.pi-choice { margin-top: .2rem; font-size: .85rem; }

/* คำอธิบายของเช่า — บอกว่าเช่าแล้วได้อะไรบ้าง (เช่น ทาร์ปรวมเสา สมอ เชือก และกางให้) */
.pi-desc { font-size: .82rem; line-height: 1.45; color: #3f6212; margin-top: .15rem; }

/* ปุ่มรับใบยืนยันทางไลน์ — ใช้สีเขียวของ LINE เพื่อให้ลูกค้ารู้ทันทีว่ากดแล้วไปไหน */
.btn-line {
  background: #06c755;
  border-color: #06c755;
  color: #fff;
  /* ⚠️ เดิมเป็น display:block ทำให้ตัวหนังสือลอยติดขอบบน ไม่อยู่กลางปุ่ม
     (.btn ปกติเป็น inline-flex + align-items:center แต่ block ไปล้างทิ้ง) */
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  text-decoration: none;
}
.btn-line:hover,
.btn-line:focus-visible { background: #05b34c; border-color: #05b34c; color: #fff; }

/* ---------------------------------------------------------------
   รายละเอียดช่องที่เลือก + รายชื่อช่องที่พับเก็บได้

   เจ้าของทักท้วง 15 ก.ย. 2569: บนมือถือต้องรูดผ่านการ์ดช่องทั้ง 27 ช่อง
   กว่าจะถึงหัวข้อเช่าอุปกรณ์ → จิ้มบนผังแล้วข้อมูลเด้งมาแทน
   --------------------------------------------------------------- */
.pd-empty {
  margin: .7rem 0 0;
  padding: .6rem .7rem;
  border: 1px dashed #d7dbe6;
  border-radius: 10px;
  color: #5c6478;
  font-size: .86rem;
  line-height: 1.5;
}
.pd-empty .pin-dot { vertical-align: -1px; margin: 0 .1rem; }

.pdet {
  margin-top: .7rem;
  padding: .7rem .8rem;
  border: 2px solid #2563eb;
  border-radius: 12px;
  background: #f3f7ff;
}
.pdet-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}
.pdet-code { font-family: 'Bai Jamjuree', system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; }
.pdet-price { font-family: 'Bai Jamjuree', system-ui, sans-serif; font-weight: 700; color: #2563eb; }
.pdet-price .pc-sub { display: block; text-align: right; font-weight: 400; }
.pdet .pc-tags { margin-top: .4rem; }
.pdet .btn { margin-top: .6rem; }

.plist-acc > summary {
  cursor: pointer;
  padding: .55rem .2rem;
  font-weight: 600;
  color: #2563eb;
  list-style: none;
}
.plist-acc > summary::-webkit-details-marker { display: none; }
.plist-acc > summary::before { content: '▸ '; display: inline-block; transition: transform .15s; }
.plist-acc[open] > summary::before { content: '▾ '; }
@media (min-width: 900px) { .plist-acc > summary { display: none; } }

/* ---------------------------------------------------------------
   เลือกภาชนะอาหาร — ชาบู หรือ ปิ้งย่าง
   วัตถุดิบชุดเดียวกัน ต่างกันแค่ภาชนะ จึงเป็นการ "เลือก 1 อย่าง"
   ไม่ใช่สินค้าคนละตัว
   --------------------------------------------------------------- */
.fk-lead { margin: .7rem 0 .45rem; }
.fk-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.fk-btn {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  padding: .65rem .75rem;
  border: 2px solid #e6e9f0;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.fk-btn:hover { border-color: #c3cbdd; }
.fk-btn.sel { border-color: #2563eb; background: #f3f7ff; }
.fk-ico { font-size: 1.3rem; line-height: 1; }
.fk-name { font-weight: 600; }
.fk-desc { font-size: .8rem; color: #5c6478; line-height: 1.35; }

/* =====================================================================
   🖤 ธีมดำ-ทอง — เก็บจุดที่ "ฝังสีขาวไว้ตรง ๆ" (ไม่ได้ใช้ var())
   กฎข้างบนกับใน app.css เขียนสีขาวไว้ตายตัวหลายจุด ตัวแปรสีจึงพลิกให้ไม่ได้
   รวมไว้ที่เดียวตรงนี้ทั้งหมด จะได้รู้ว่าธีมแตะอะไรบ้าง และย้อนคืนได้ง่าย
   ===================================================================== */

/* ---------- ปุ่มและช่องกรอก (กฎต้นทางอยู่ใน app.css) ---------- */
.pub input, .pub select, .pub textarea { background: #101015; color: var(--ink); }
.pub input::placeholder, .pub textarea::placeholder { color: #6e6a61; }
.pub .btn { background: #1c1c22; }
.pub .btn:hover { background: #24242c; }
.pub .btn-ghost { background: transparent; }
.pub .btn-ghost:hover { background: #24242c; }

/* ปุ่มหลักเป็นทอง → ตัวหนังสือต้องเป็นสีดำ ขาวบนทองอ่านไม่ชัด */
.pub .btn-primary {
  background: linear-gradient(160deg, var(--gold-hi), var(--gold));
  border-color: var(--gold-hi); color: #1a1408; font-weight: 600;
}
.pub .btn-primary:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
.pub .btn-primary:disabled { background: #3a3a42; border-color: #3a3a42; color: #8b8578; }

/* ---------- หัวเว็บแบบกระจกดำ ---------- */
.pub .pub-top {
  background: rgba(11,11,13,.86);
  border-bottom: 1px solid var(--gold-line);
}
.pub .pub-brand { color: var(--ink); }

/* หัวข้อใหญ่ไล่เฉดทอง — จุดเดียวที่ยอมให้ทองเป็นสีตัวอักษร
   เพราะเป็นตัวใหญ่หนา อ่านชัด ไม่ใช่เนื้อหาที่ต้องอ่านยาว ๆ */
.pub .hero h1 {
  background: linear-gradient(100deg, var(--gold-hi), var(--gold) 60%, var(--gold-hi));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- การ์ดและกล่องต่าง ๆ ---------- */
.pub .step-no { color: #1a1408; background: linear-gradient(160deg, var(--gold-hi), var(--gold)); }
.pub .pub-pitch,
.pub .qr-card,
.pub .datebar,
.pub .board-map, .pub .board-list,
.pub .zoom-btn,
.pub .st-btn,
.pub .kchip,
.pub .modal-card,
.pub .btn-suggest,
.pub .mcard,
.pub .mzoom { background: var(--card); }

.pub .card { border-color: var(--line); }
.pub .st-btn:active, .pub .zoom-btn:active { background: #24242c; }
.pub .pcard:hover { background: #1d1d24; }
.pub .kchip.on { color: #1a1408; background: linear-gradient(160deg, var(--gold-hi), var(--gold)); }
.pub .pi-noimg, .pub .mthumb { background: #1d1d24; color: #6e6a61; }
.pub .pub-set { background: #1a1a20; }
.pub .pd-empty { border-color: var(--gold-line); }
.pub .pdet { background: #14141a; border-color: var(--gold-line); }

/* กล่องที่เคยเป็นพื้นอ่อน ๆ สื่อความหมาย — คงความหมายไว้ เปลี่ยนแค่ให้เข้ากับพื้นดำ */
.pub .summary  { border-color: var(--gold-line); background: linear-gradient(#1a1710, #15151a); }
.pub .pay-note { border-color: var(--busy);  background: var(--busy-bg); }
.pub .pay-ok   { border-color: var(--ok);    background: var(--ok-bg); }
.pub .pay-help { border-color: var(--busy);  background: var(--busy-bg); color: #e8c78a; }
.pub .err-inline { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.pub .last-book  { background: var(--accent-soft); border-color: var(--gold-line); }
.pub .tagchip    { background: rgba(95,208,138,.14); color: var(--ok); }
.pub .chip.busy  { color: var(--busy); }

/* ---------- ผังลาน: หมุดต้องเด่นบนรูปถ่าย ----------
   เดิมใช้ขอบขาวเพื่อให้ตัดกับรูปถ่ายสว่าง ๆ
   พื้นหลังรอบรูปเป็นดำแล้ว จึงเปลี่ยนวงนอกเป็นดำ ให้หมุดไม่จมไปกับขอบรูป */
.pub .map-wrap { background: #101015; }
.pub .pin { border-color: var(--zone, #f2eee5); box-shadow: 0 0 0 1.5px rgba(0,0,0,.85), 0 1px 5px rgba(0,0,0,.6); }
.pub .map-wrap .pin:hover { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 10px rgba(0,0,0,.7); }

/* ---------- โลโก้บนหัวเว็บ ---------- */
.pub .pub-logo {
  width: 32px; height: 32px; border-radius: 9px; object-fit: cover;
  flex: 0 0 auto; transform: scale(1.06); background: #000;
  box-shadow: 0 0 0 1px var(--gold-line);
}

/* จุดที่เหลือ เจอจากการไล่สแกนหน้าจริงว่ามีอะไรยังพื้นขาวอยู่บ้าง
   (ไม่ได้ไล่อ่านโค้ดเอา — เปิดหน้าจริงแล้วให้เบราว์เซอร์บอกว่าตัวไหนยังขาว) */
.pub .tdate-face { background: #101015; border-color: var(--line); }
.pub .fk-btn { background: var(--card); border-color: var(--line); }
.pub .fk-btn:hover { border-color: var(--gold-line); }
.pub .fk-btn.sel { border-color: var(--gold); background: var(--accent-soft); }
.pub .toast { background: #26262e; color: var(--ink); border: 1px solid var(--gold-line); }

/* ช่องติ๊ก/ปุ่มวงกลมของเบราว์เซอร์เอง — ถ้าไม่สั่ง จะเป็นสี่เหลี่ยมขาวโดดบนพื้นดำ */
.pub input[type=checkbox], .pub input[type=radio] { accent-color: var(--gold); }

/* 💳 QR พร้อมเพย์ต้องมี "ขอบขาว" รอบตัวให้พอ ไม่งั้นแอปธนาคารบางตัวสแกนไม่ติด
   มาตรฐาน QR ต้องการช่องว่างสีอ่อนรอบนอกอย่างน้อย 4 ช่องเล็ก (quiet zone)
   ตอนธีมขาว การ์ดรอบ ๆ เป็นสีขาวอยู่แล้ว เลยเป็นขอบให้ฟรีโดยไม่มีใครรู้ตัว
   พอเปลี่ยนเป็นธีมดำ ขอบบาง ๆ ที่ไลบรารีใส่มาชิดพื้นดำทันที = เสี่ยงสแกนพลาด
   → ใส่กรอบขาวให้เอง ไม่พึ่งสีการ์ด · ขยายกล่องเท่ากับขอบที่เพิ่ม QR จะได้ไม่เล็กลง
   (นี่คือหน้าที่ลูกค้าจ่ายเงิน — สแกนไม่ติด = ไม่ได้เงิน) */
.pub .qr-box {
  background: #fff; padding: 10px; border-radius: 12px;
  flex: 0 0 170px; width: 170px;
}
@media (max-width: 519px) {
  .pub .qr-box { flex: 0 0 auto; width: 210px; }
}

/* ช่องติ๊ก ปฏิทิน แถบเลื่อน ของเบราว์เซอร์เอง ให้วาดแบบธีมมืด
   ไม่งั้นช่องติ๊กที่ยังไม่ได้ติ๊กเป็นสี่เหลี่ยมขาวโดดบนพื้นดำ (accent-color แก้ได้แค่ตอนติ๊กแล้ว) */
.pub { color-scheme: dark; }

/* 📞 เบอร์โทรในกล่องช่วยเหลือตอนจ่ายเงิน — เดิมเป็นน้ำตาลเข้ม (#7c2d12) ให้เข้ากับพื้นส้มอ่อนธีมขาว
   บนธีมดำมันจมหายไปเลย ทั้งที่นี่คือ "เบอร์ที่ลูกค้าต้องโทรหาตอนโอนเงินแล้วมีปัญหา"
   = คนที่อ่านคือคนที่เงินออกจากบัญชีไปแล้วและกำลังกังวลที่สุด ต้องเห็นชัดที่สุดในหน้า
   (ตัวสแกนสีของผมพลาดตัวนี้ เพราะไล่ตรวจแค่ย่อหน้ากับข้อความ ไม่ได้ตรวจลิงก์) */
.pub .pay-help a { color: var(--gold-hi); font-weight: 600; }

/* 💚 ปุ่มไลน์ต้องเป็นเขียวไลน์เสมอ แม้อยู่ในธีมดำ
   กฎธีมดำ ".pub .btn" (2 คลาส) ชนะ ".btn-line" (1 คลาส) เลยทับสีเขียวจนเป็นปุ่มดำขอบเขียว
   สีเขียวนี้คือสิ่งที่คนไทยเห็นแล้วรู้ทันทีว่า "กดแล้วเข้าไลน์" — ห้ามให้ธีมกลืนหาย */
.pub .btn-line { background: #06c755; border-color: #06c755; color: #fff; }
.pub .btn-line:hover,
.pub .btn-line:focus-visible { background: #05b34c; border-color: #05b34c; color: #fff; }

/* ---------- หมุดบนผัง: สีสถานะต้องชนะสีโซนเสมอ ----------
   🐛 เจ้าของเจอ 17 ก.ย. 2569: "ลาน P สีชมพู ดูไม่ออกเลยว่าว่างหรือจองแล้ว"
   ต้นเหตุ: กฎธีมดำ .pub .pin { border-color: var(--zone) } อยู่ท้ายไฟล์ ทับวงสีสถานะ
   วงทุกวงจึงกลายเป็นสีโซน · โซน P ชมพู ≈ แดง "เต็ม" → แยกไม่ออก
   แก้: วงใช้สีสถานะ (--st) เสมอ · เต็ม = ทึบแดงชัด ๆ · ปิดใช้งาน = ทึบเทา
        สีโซนดูจากป้ายบนรูปผังได้อยู่แล้ว ไม่ต้องซ้อนบนหมุด */
.pub .map-wrap .pin { border-color: var(--st); border-width: clamp(2px, .38cqw, 5px); }
.pub .map-wrap .pin.free { background: rgba(22, 163, 74, .18); }
.pub .map-wrap .pin.full { background: rgba(220, 38, 38, .82); }
.pub .map-wrap .pin.off  { background: rgba(139, 147, 167, .8); }
.pub .map-wrap .pin.sel  { border-color: #2563eb; }
.pub .legend .pin-dot.full { background: rgba(220, 38, 38, .82); }
.pub .legend .pin-dot.free { background: rgba(22, 163, 74, .18); }

/* ➕ เช่าอุปกรณ์เพิ่ม (151) */
.pub .addon-row { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.pub .addon-row:last-of-type { margin-bottom: 10px; }
.pub .ad-pay { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 8px 0;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.pub .ad-pay input { margin-top: 4px; width: 20px; height: 20px; flex: none; }
.pub .ad-pay span { display: flex; flex-direction: column; gap: 2px; }
.pub a.btn { display: block; text-align: center; text-decoration: none; margin-top: 8px; }

/* =====================================================================
   .lnc- หน้ากิจกรรมในลาน (activities.html) — session ไลน์ลูกค้าดูแล
   ===================================================================== */
.lnc-jump { display: flex; gap: .4rem; overflow-x: auto; padding: .2rem 0 .8rem; scrollbar-width: none; }
.lnc-jump .chip { white-space: nowrap; text-decoration: none; }
.lnc-act { padding: 0; overflow: hidden; margin-bottom: 1rem; scroll-margin-top: 4.2rem; }
.lnc-act.lnc-focus { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-line), var(--shadow); }
.lnc-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: #000; }
.lnc-photos img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; scroll-snap-align: center; }
.lnc-body { padding: 1rem 1.05rem 1.15rem; }
.lnc-body h2 { font-size: 1.3rem; margin: 0 0 .2rem; }
.lnc-tag { color: var(--ink-2); margin: 0 0 .6rem; }
.lnc-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.lnc-chip { background: var(--accent-soft); color: var(--gold-hi); border: 1px solid var(--gold-line);
  border-radius: 999px; padding: .2rem .7rem; font-size: .92rem; }
.lnc-sec { margin-top: .9rem; }
.lnc-sec h3 { font-size: 1rem; margin: 0 0 .3rem; color: var(--gold-hi); }
.lnc-sec p { margin: 0; line-height: 1.6; }
.lnc-links { display: flex; flex-direction: column; gap: .45rem; }
.lnc-links .btn { justify-content: flex-start; text-align: left; }
.lnc-review { margin: .5rem 0 0; padding: .6rem .8rem; border-left: 3px solid var(--gold); background: rgba(255,255,255,.03); border-radius: 0 10px 10px 0; }
.lnc-review p { margin: 0 0 .25rem; }
.lnc-review footer { color: var(--ink-2); font-size: .88rem; }
.lnc-review a { color: var(--gold-hi); }
.lnc-body .btn-lg { margin-top: 1rem; }

/* 🗺️ ที่เที่ยวใกล้เคียง (436) */
.lnc-places { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.lnc-place { padding: .7rem .8rem; border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 12px; background: rgba(255,255,255,.03); }
.lnc-place-head { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; justify-content: space-between; }
.lnc-place-head b { font-size: 1.02rem; }
.lnc-far { color: var(--gold-hi); font-size: .9rem; white-space: nowrap; }
.lnc-where { color: var(--ink-2); font-size: .88rem; margin: .15rem 0 0; }
.lnc-place p { margin: .35rem 0 .45rem; line-height: 1.55; }
.lnc-place .lnc-chips { margin-bottom: .4rem; }
.lnc-place .btn { display: inline-block; padding: .3rem .8rem; font-size: .9rem; text-decoration: none; }
.lnc-warn { color: var(--gold-hi); font-size: .88rem; margin: .2rem 0 .45rem; }

/* 🏕️🏕️ จองหลายช่องพร้อมกัน (179) */
.btn-multi { display: block; width: 100%; margin-top: 8px; border-color: var(--gold-line, #c9922f); }
.grp-card h2 { margin-bottom: 4px; }
.grp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.grp-tab { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line, #d8dce6);
  border-radius: 12px; overflow: hidden; }
.grp-tab.on { border-color: var(--gold, #2563eb); box-shadow: 0 0 0 2px var(--gold-line, rgba(37,99,235,.25)); }
.grp-go { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px;
  min-height: 48px; background: transparent; color: inherit; border: 0; font: inherit; cursor: pointer; }
.grp-tab.on .grp-go strong { color: var(--gold-hi, #2563eb); }
.grp-x { width: 40px; border: 0; border-left: 1px solid var(--line, #d8dce6); background: transparent;
  color: inherit; font-size: 1.2rem; cursor: pointer; opacity: .7; }
.grp-x:hover { opacity: 1; color: var(--bad, #dc2626); }
.grp-promo { margin: 4px 0 8px; font-size: .92rem; }
.grp-promo.ok { color: var(--ok, #16a34a); font-weight: 600; }
.grp-who { margin: 10px 0 4px; padding: 8px 10px; border-radius: 10px; font-weight: 600;
  border: 1px dashed var(--gold-line, #c9922f); }
.for-pitch { color: var(--gold-hi, #2563eb); font-weight: 600; }
.sr.sr-pitch { margin-top: 10px; font-weight: 700; border-top: 1px solid var(--line, #d8dce6); padding-top: 8px; }
.sr.sr-sub { padding-left: 12px; font-size: .92rem; opacity: .85; }
.pcard.ingrp { box-shadow: inset 4px 0 0 var(--gold, #2563eb); }
.map-wrap .pin.ingrp:not(.sel) { --st: #f0d26b; box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(240, 210, 107, .55); z-index: 5; }
.pub .map-wrap .pin.ingrp:not(.sel) { border-color: #f0d26b; }
.grp-bk { padding: 8px 0; border-bottom: 1px dashed var(--line, #d8dce6); }
.grp-bk.off { opacity: .55; }
.grp-bk .kv.sub { font-size: .9rem; opacity: .85; padding-left: 12px; }
.grp-bk .btn-link { display: inline-block; margin-top: 4px; }

/* 📐 วางตำแหน่งเต็นท์ (181) */
.lg-wrap { display: flex; justify-content: center; margin: 10px 0; touch-action: none; user-select: none; }
.lg-svg { max-width: min(100%, 380px); height: auto; }
.lg-thumb { display: flex; justify-content: center; margin: 6px 0; }
.lg-thumb .lg-svg { max-width: 220px; }
.lg-grid { stroke: rgba(127, 174, 127, .35); stroke-width: 1; }
.lg-item { cursor: grab; }
.lg-item.sel rect { filter: drop-shadow(0 0 4px rgba(37, 99, 235, .6)); }
.lg-sel, .lg-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.lg-del { border-color: var(--bad, #dc2626); }
.grp-bk .lg-link { display: block; }

/* 🎫 เช็กอิน QR + เครื่องดื่มต้อนรับ (187 · ปิดไว้จนกว่าจะเปิด checkinQrOn) */
.ck-qr { display: flex; justify-content: center; margin: 10px auto; padding: 12px; background: #fff; border-radius: 12px; width: fit-content; }
.ck-qr canvas, .ck-qr img, .ck-qr svg { width: 220px; height: 220px; }
.ck-code { text-align: center; font-weight: 700; letter-spacing: .03em; }
.ck-h { margin: 16px 0 4px; font-size: 1rem; }
.ck-row { align-items: center; }

/* 🖼️ หน้ารูปสำหรับลูกค้า /gallery (189) */
.gl-top-book { padding: 8px 14px; min-height: 40px; }
.gl-tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px;
  background: var(--bg, #111); border-bottom: 1px solid var(--line, #2a2a33); scrollbar-width: none; }
.gl-tabs::-webkit-scrollbar { display: none; }
.gl-tabs .kchip { flex: 0 0 auto; text-decoration: none; }
.gl-hero h1 { margin-bottom: 4px; }
.gl-sec { margin: 22px 0 8px; scroll-margin-top: 64px; }
.gl-sec h2 { margin: 0 0 4px; }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 10px; }
.gl-grid.gl-one { grid-template-columns: 1fr; }
.gl-fam { grid-column: 1 / -1; margin-top: 6px; }
.gl-card { display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--line, #2a2a33); background: var(--card, #17171d); color: inherit; font: inherit; }
.gl-ph { position: relative; display: block; aspect-ratio: 4 / 3; background: #0f0f13; }
.gl-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-count, .gl-badge { position: absolute; font-size: .78rem; padding: 3px 8px; border-radius: 999px; }
.gl-count { right: 8px; bottom: 8px; background: rgba(0, 0, 0, .65); color: #fff; }
.gl-badge { left: 8px; top: 8px; font-weight: 700; color: #1a1408; background: linear-gradient(160deg, var(--gold-hi, #f0d26b), var(--gold, #c9922f)); }
.gl-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.gl-name { font-weight: 600; }
.gl-line { font-size: .86rem; line-height: 1.35; }
.gl-mosaic { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.gl-tile { padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: #0f0f13; aspect-ratio: 1 / 1; }
.gl-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-tile.gl-map { aspect-ratio: auto; }
.gl-tile.gl-map img { height: auto; object-fit: contain; }
.gl-cta { position: sticky; bottom: 0; z-index: 15; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--bg, #111) 35%); }
.gl-cta .btn { display: block; width: 100%; text-align: center; text-decoration: none; }
.gl-lb { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .94); display: flex; align-items: center; justify-content: center; }
.gl-lb[hidden] { display: none; }
.gl-lb img { max-width: 100vw; max-height: 86vh; object-fit: contain; }
.gl-lb-x { position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 8px; width: 48px; height: 48px; font-size: 2rem;
  color: #fff; background: rgba(255, 255, 255, .12); border: 0; border-radius: 50%; cursor: pointer; }
.gl-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; font-size: 2.4rem;
  color: #fff; background: rgba(255, 255, 255, .1); border: 0; border-radius: 12px; cursor: pointer; }
.gl-lb-nav.prev { left: 6px; } .gl-lb-nav.next { right: 6px; }
.gl-lb-cap { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); left: 16px; right: 16px; text-align: center; color: #ddd; font-size: .9rem; }
body.gl-noscroll { overflow: hidden; }
.btn-gallery { display: block; text-align: center; text-decoration: none; margin-top: .5rem; }
.gl-cta { display: flex; flex-direction: column; gap: 8px; }
.gl-cta .gl-line { background: #06c755; border-color: #06c755; color: #fff; }

/* 🍲 สั่งอาหารถึงช่อง (193) */
.fd-rules { margin: 6px 0 10px; padding-left: 18px; line-height: 1.6; }
.fd-nights { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fd-vessel { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--line, #2b2b33); }
.fd-item { align-items: center; }
.fd-item .pi-thumb { cursor: zoom-in; }

/* 213 ผู้เข้าพักร่วม — หน้า QR ป้ายช่อง: ทางของผู้จอง (เลขท้ายเบอร์) พับไว้ */
.pl-owner { margin-top: 14px; }
.pl-owner summary { cursor: pointer; color: var(--muted, #5c6478); font-size: .92rem; padding: 6px 0; }
.pl-owner[open] summary { margin-bottom: 8px; }