/* ═════════════════════════════════════════════════════════════════════════════
   📅 หน้ากิจกรรม (Pages/Events.cshtml) — ดีไซน์ที่ 2 · 2026-09-09

   user สั่ง: "ไม่ชอบแท็บข้อมูลแบบนี้" + "ของรางวัลไม่ต้องแสดงรูป"
   ⇒ รื้อชุดคลาส `events-page-container / event-card-v4 / ev-tab-* / arena-stage-table`
     (~250 บรรทัดใน site.css) ทิ้งทั้งชุด แล้วให้หน้านี้ใช้ผังกลางของเว็บแทน:
     `.band` → `.wrap.docs` → `.pnl-doc` + `.docside` (ผังเดียวกับ /rules · /guide)

   ⇒ แผ่นนี้เหลือแค่ของที่หน้าอื่นไม่มี 3 อย่าง: ป้าย "กำลังเปิด" · หัวตารางย่อย · ป้ายของรางวัล
   ⛔ อย่าเพิ่มกฎที่ควรอยู่ในผังกลาง (ตาราง/การ์ด/ระยะ) ลงแผ่นนี้ — เดี๋ยวหน้านี้หลุดจากหน้าอื่นอีก
   ⚠️ ห้ามเขียน style ในแท็ก (CSP บล็อกเงียบ) → reference_web_csp_no_inline_style
   ───────────────────────────────────────────────────────────────────────────── */

/* 🟢 กำลังเปิดอยู่ตอนนี้ — ต้องสะดุดตาจากการกวาดสายตาแถวเดียว */
.ev-live {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #e5f8ee;
  border: 1px solid #b6e6d4;
  color: #0b6b4f;
  font-size: 11.5px;
  font-weight: 800;
  vertical-align: 2px;
  white-space: nowrap;
}
.ev-now { color: #0b6b4f }

/* หัวเรื่องของตาราง — เล็กกว่า h3 เพราะเป็น "ชื่อตาราง" ไม่ใช่หัวข้อใหม่ */
.ev-sub {
  margin: 18px 0 9px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
}

/* 🎁 ป้ายของรางวัล — ข้อความล้วน ไม่มีไอคอน (ของเดิมมีรูป 22px ที่ดูไม่ออกว่าเป็นอะไร) */
.ev-rws { display: flex; flex-wrap: wrap; gap: 6px }
.ev-rw {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: #f2f6fb;
  border: 1px solid var(--line);
  color: var(--ink2);
  font-size: 13.5px;
  line-height: 1.5;
}
/* ของที่ "สุ่มมา 1 อย่าง" ต้องแยกจากของที่ได้ทุกชิ้นด้วยตา */
.ev-rw.is-random {
  background: #f4f1ff;
  border-color: #ddd6fe;
  color: #5b4bb7;
}
.ev-rw.is-random::before {
  content: "สุ่ม ";
  font-weight: 900;
  opacity: .75;
}

/* 📐 ตารางของรางวัล: ช่องซ้ายแคบคงที่ — ป้ายของรางวัลจะได้ขึ้นบรรทัดใหม่เอง
   🔴 ถ้าไม่มี `table-layout:fixed` ช่องตารางจะกว้างเท่าป้ายทุกใบต่อกัน ⇒ ตารางล้นออกนอกจอ */
.ev-tbl { table-layout: fixed }
.ev-tbl th:first-child,
.ev-tbl td:first-child { width: 110px }

/* ══ 🧭 แถบข้าง "รายการกิจกรรม" + การ์ดทางเข้า (2026-09-09)
   user: "มันจะยาวมากเลย เพิ่ม sidebar … ทำหน้าแยกกิจกรรมอื่น ๆ"
   ⇒ แถบนี้ยืมคลาสของ `_PageNav` (`pgnav-card` `pgnav-link`) — หน้าตาเหมือนกันโดยไม่ต้องเขียนซ้ำ
   ⚠️ การ์ดในแถบข้ามี 2 ใบซ้อนกัน ⇒ ต้องมีระยะคั่น (`.docside` เป็น flex มี gap อยู่แล้ว) */
/* 🔴 ชื่อกิจกรรมยาวได้เรื่อย ๆ (แอดมินตั้งชื่อเอง) — ล้นบรรทัดแล้วแถบเมนูพัง
   ⇒ บังคับบรรทัดเดียว + ตัดด้วย… (ชื่อสั้นตั้งที่หลังบ้านได้ — นี่เป็นตาข่ายกันหน้าพัง) */
.ev-nav .pgnav-link span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 🖼️ การ์ดทางเข้าแต่ละกิจกรรม — **กดได้ทั้งใบ**
   มีรูป (`.has-pic`) = รูปขึ้นก่อนแบบโปสเตอร์ · ยังไม่ใส่รูป = แถวเดียวมีไอคอนนำ
   🔴 ทุกอย่างข้างในเป็น <span> เพราะการ์ดทั้งใบเป็น <a> — เอา <div>/<p> ยัดข้างใน = HTML ผิด */
.ev-cards { display: grid; gap: 14px; margin-top: 6px }
@media (min-width: 760px) { .ev-cards { grid-template-columns: 1fr 1fr } }

.ev-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .16s ease, transform .12s ease, box-shadow .16s ease;
}
.ev-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 40, 80, .08);
}
.ev-card:active { transform: translateY(0) }

/* รูปบนการ์ด — ล็อกสัดส่วน 16:9 ไว้ ⇒ รูปสัดส่วนไหนก็การ์ดสูงเท่ากัน ไม่เต้น */
.ev-card-pic { display: block; aspect-ratio: 16 / 9; background: #eef3f9 }
.ev-card-pic img { width: 100%; height: 100%; object-fit: cover; display: block }

.ev-card-body { display: block; padding: 14px 16px 15px }
.ev-card-t {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 15.5px; color: var(--ink);
}
.ev-card-t i { opacity: .75 }
.ev-card-d {
  display: block; margin: 6px 0 8px;
  font-size: 14px; color: var(--ink2); line-height: 1.7;
}
.ev-card-go { display: block; font-size: 13.5px; font-weight: 800; color: var(--gold-dk) }

/* ลิงก์กลับหน้ารวม — อยู่บนสุดของหน้ากิจกรรมย่อย (มือถือไม่มีแถบข้าให้กด) */
.ev-back { margin: 0 0 6px; font-size: 13.5px }

/* ══ 📆 ตารางรายสัปดาห์ (หน้า /events) ════════════════════════
   user สั่ง 2026-09-09: "ทำเป็นตาราง จันทร์-อาทิตย์ แล้วกิจกรรมค่อยแสดงในนั้น" */
.ev-week td:first-child { width: 108px; white-space: nowrap }
.ev-week tr.is-today td { background: #fffaf0 }
.ev-week tr.is-today:hover td { background: #fff6e4 }

/* ป้าย "วันนี้" — ทองเหมือนปุ่มหลักของเว็บ เพื่อให้หาแถวนี้เจอทันที */
.ev-today {
  display: inline-block; margin-left: 7px; padding: 1px 8px;
  border-radius: 999px; background: #fdf0d2; border: 1px solid #f0dba8;
  color: #7a5200; font-size: 11px; font-weight: 800; vertical-align: 2px;
}

/* กิจกรรมในช่องของวัน — หลายรอบต่อวันเรียงต่อกันลงมา (ไม่ใช่ต่อท้ายกันเป็นพืดเดียว) */
.ev-slots { display: flex; flex-direction: column; gap: 6px }
.ev-slot {
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 5px 11px; border-radius: 9px;
  background: #f2f6fb; border: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink2); line-height: 1.6;
}
.ev-slot b { color: var(--ink); font-variant-numeric: tabular-nums }
/* รอบที่เปิดอยู่ตอนนี้ */
.ev-slot.is-live { background: #e9faf1; border-color: #b6e6d4; color: #0b6b4f }
.ev-slot.is-live b { color: #0b6b4f }
/* รอบเจาะจงวันที่ (ไม่ใช่ทุกสัปดาห์) — ต้องแยกจากรอบประจำด้วยตา */
.ev-once {
  padding: 0 7px; border-radius: 999px;
  background: #f4f1ff; border: 1px solid #ddd6fe; color: #5b4bb7;
  font-size: 11px; font-weight: 800;
}

/* บรรทัด "รอบถัดไป" เหนือตาราง */
.ev-next { margin: 0 0 10px; font-size: 14.5px }
.ev-next b { color: var(--ink) }

/* 🟩 ป้าย "เปิดตลอด" — ขึ้นครบทุกวัน (user 2026-09-09: ขึ้น "—" ทั้งที่เปิดตลอด มันย้อนแย้ง)
   🔑 ต้อง **จางกว่า** ป้ายรอบเวลา ไม่งั้นของที่ซ้ำทุกแถวจะกลบของพิเศษของวันนั้น */
.ev-slot.is-always {
  background: #f3faf6;
  border-color: #cfe9dc;
  color: #3f7360;
}
.ev-slot.is-always b { color: #0b6b4f; font-weight: 800 }

/* 📌 แถบข้างเกาะจอตอนเลื่อน (user สั่ง 2026-09-21) — เฉพาะหน้าใต้ /events
   🔑 ทำได้เพราะ `.docs` เป็นตะแกรง 2 คอลัมน์ที่ `align-items:start` อยู่แล้ว
      ⇒ ช่องของแถบข้างสูงเท่าแถว (= ความสูงของบทความ) แถบจึงมีที่ให้เลื่อนเกาะ
      (คนละกรณีกับ `.pgside` ที่ต้องมีกล่องครอบ เพราะการ์ดตรงนั้นอยู่ในแถวที่สูงเท่าตัวเอง)
   ⛔ อย่าใส่กฎนี้ที่ `.docside` เปล่า ๆ — จะไปโดน /rules /guide ที่มี `.toc` ของตัวเองอยู่แล้ว
   📏 `top` เท่ากับ `.toc` ในผังกลาง (ความสูงแถบเมนู + 18px) ⇒ ไม่ไปมุดใต้แถบบน */
.ev-docs .docside {
  position: sticky;
  top: calc(var(--nav-h) + 18px);
  align-self: start;
  /* แถบสูงกว่าจอเมื่อไร ให้เลื่อนในตัวเองได้ ไม่งั้นท้ายแถบจะโดนตัดหายตลอด */
  max-height: calc(100vh - var(--nav-h) - 36px);
  overflow-y: auto;
}

/* จอแคบ: ตะแกรงยุบเหลือคอลัมน์เดียว แถบไปอยู่ล่างสุด ⇒ เกาะจอแล้วเกะกะ ปิดทิ้ง
   (กติกาเดียวกับ `.toc` ใน site.css บรรทัด 361) */
@media (max-width: 980px) {
  .ev-docs .docside { position: static; max-height: none; overflow: visible; }
}