/* =====================================================================
   ระบบจัดการนิสิตทุน พสวท. ศูนย์จุฬาฯ — สไตล์หลักของเว็บ
   ฟอนต์: Noto Sans Thai / Noto Sans (โหลดจาก Google Fonts ใน head.php)
   ===================================================================== */

:root{
  --bg: #F4F5F0;
  --surface: #FFFFFF;
  --surface-2: #ECEEE5;
  --border: #D9DCCF;
  --ink: #1E252F;
  --ink-muted: #5C6570;
  --ink-faint: #8B929B;

  --accent: #DA5F8E;
  --accent-strong: #BE2D64;
  --accent-soft: #FAEAF0;

  /* สีที่สองสำหรับหน้า index.php เท่านั้น (สลับคู่กับสีชมพูหลักในการ์ด/ไอคอน
     ของหน้าประชาสัมพันธ์ ให้จังหวะสีไม่จำเจ) — จับคู่มาจากสีน้ำเงินของตรา
     พสวท. เอง (img/logo/dpst-thai.png) ไม่ใช่สีที่คิดขึ้นลอยๆ */
  --accent-blue: #2F5FA6;
  --accent-blue-soft: #E8EFFA;

  --danger: #A7383A;
  --danger-soft: #F6DFDE;
  --success: #2E7A52;
  --success-soft: #DFF0E4;

  --radius: 8px;
  --shadow-card: 0 1px 2px rgba(20, 26, 33, 0.04), 0 8px 24px rgba(20, 26, 33, 0.06);

  --warning: #9A6B14;
  --warning-soft: #FBF0DC;

  /* ---------- ผูกสีธีมของ Bootstrap ให้ตรงกับสีแบรนด์เดิม ---------- */
  --bs-primary: var(--accent);
  --bs-primary-rgb: 218, 95, 142;
  --bs-body-font-family: 'Noto Sans Thai', 'Noto Sans', 'Tahoma', sans-serif;
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-border-radius: var(--radius);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-strong);
  --bs-success: var(--success);
  --bs-success-rgb: 46, 122, 82;
  --bs-danger: var(--danger);
  --bs-danger-rgb: 167, 56, 58;
  --bs-warning: var(--warning);
}
.btn-primary{ --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-strong); --bs-btn-hover-border-color: var(--accent-strong); --bs-btn-active-bg: var(--accent-strong); --bs-btn-active-border-color: var(--accent-strong); }
.btn-outline-primary{ --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-active-bg: var(--accent-strong); }
.bg-primary{ background-color: var(--accent) !important; }
.text-primary{ color: var(--accent) !important; }

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; overflow-x: hidden; }

/* กันสกอลล์แนวนอนทั้งเว็บ — เจอจริงว่าเมนู offcanvas ที่ปิดอยู่บนจอแคบ (ดู
   .landing-nav-collapse) แม้เลื่อนออกนอกจอด้วย transform แล้ว ในบางเบราว์เซอร์
   ก็ยังทำให้ document กว้างเกิน viewport อยู่ดี (transform ไม่กระทบ layout แต่
   กระทบ scrollable overflow) ผลคือปาดนิ้วแนวนอนเผลอๆ แล้วเจอพื้นที่ว่างข้างขวา
   ได้ ตั้งเป็นเกราะป้องกันทั้งเว็บไว้เลยกันปัญหาแบบนี้ซ้ำจากจุดอื่นในอนาคตด้วย */
body{
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Noto Sans Thai', 'Noto Sans', 'Tahoma', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative; /* กัน ::before (fixed) ไปอ้างอิงตำแหน่งของ ancestor อื่นแทน */
}

/* ---------- พื้นหลังภาพจุฬาฯ แบบจางๆ ทั่วทั้งระบบ ----------
   ใช้ ::before แยกชั้นต่างหาก (ไม่ใส่ตรง body{ background-image }) เพื่อปรับ
   ความจางด้วย opacity ได้อิสระ โดยไม่ทำให้เนื้อหา/ตัวอักษรจริงจางตามไปด้วย —
   position:fixed + z-index ติดลบ ทำให้ลอยอยู่หลังสุดเสมอ ไม่เลื่อนตามสกอลล์
   และไม่บังการ์ด/ตัวอักษรที่วางอยู่ข้างบน (การ์ดพื้นขาวทึบอยู่แล้วจึงบังภาพ
   ส่วนใหญ่ไว้ เหลือให้เห็นแค่จางๆ ตรงพื้นที่ว่างรอบๆ) */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url('../../img/CUBg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.07;
  pointer-events: none;
}

h1, h2, h3{
  font-family: inherit;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
}

p{ margin: 0; }

a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ลิงก์ที่หน้าตาเป็นปุ่ม/เมนู/การ์ด (ไม่ใช่ลิงก์เนื้อหาทั่วไป) ไม่ควรมีขีด
   เส้นใต้ตอน hover เหมือนลิงก์ข้อความปกติ */
a.btn:hover,
a.btn-ghost:hover,
a.nav-link:hover,
a.dropdown-item:hover,
a.action-card:hover,
a.year-nav:hover,
a.badge:hover,
a.pill:hover{
  text-decoration: none;
}

a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.text-muted{ color: var(--ink-muted); }

/* ---------- ฟอร์ม (หน้าตาเทียบเท่า .form-control/.form-label ของ Bootstrap
   แต่คงชื่อ class เดิม .field/.field-label ไว้ เพราะใช้ผ่าน helper functions
   และ markup ของแต่ละหน้าอยู่แล้วทั่วทั้งระบบ — เปลี่ยนแค่ recipe ให้ตรง
   Bootstrap ไม่ต้องไล่แก้ markup ทีละไฟล์) ---------- */
.field{
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.field-label{
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field input[type="date"],
.field input[type="number"],
.field select,
.field textarea{
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius, var(--radius));
  background: var(--surface);
  color: var(--ink);
  background-clip: padding-box;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 0.25rem var(--accent-soft);
}
.field select{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235C6570' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  appearance: none;
  padding-right: 2.25rem;
}
.field textarea{ resize: vertical; min-height: 5rem; font-family: inherit; }
.field-hint{ font-size: 0.82rem; color: var(--ink-faint); }

/* ---------- ตัวแก้ไขข้อความมีสไตล์ (rich text) — พรีวิว + ปุ่มเปิด modal
   ที่มี Jodit เต็มรูปแบบ ดู render_richtext_editor() ใน functions.php ---------- */
.richtext-field{ display: flex; flex-direction: column; gap: 0.5rem; }
.richtext-preview{
  min-height: 2.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  line-height: 1.55;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
}
.richtext-preview table{ border-collapse: collapse; max-width: 100%; }
.richtext-preview td, .richtext-preview th{ border: 1px solid var(--border); padding: 0.3rem 0.5rem; }
.richtext-preview-empty{ color: var(--ink-faint); }
.richtext-open-btn{ align-self: flex-start; }

/* ปุ่ม/แจ้งเตือน/badge ใช้ class จริงของ Bootstrap แล้ว (.btn.btn-primary,
   .alert.alert-success ฯลฯ) — สีธีมผูกไว้ผ่านตัวแปร --bs-* ด้านบนแล้ว
   เหลือแค่ btn-ghost ที่ Bootstrap ไม่มีให้ ต้องกำหนดเอง */
.btn-ghost{
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.45rem 0.85rem;
  background: var(--surface);
}
.btn-ghost:hover{ color: var(--ink); border-color: var(--ink-faint); text-decoration: none; }

/* ---------- หน้า login (guest) ---------- */
.guest-body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.login-shell{ width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.login-back-link{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-muted);
  align-self: flex-start;
  margin-left: max(0px, calc(50% - 200px));
}
.login-back-link:hover{ color: var(--accent); text-decoration: none; }
.login-footnote{ font-size: 0.76rem; color: var(--ink-faint); text-align: center; margin: 0; }
.login-card{
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.login-eyebrow{
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--accent);
  text-transform: uppercase;
}
.login-title{ font-size: 1.7rem; }
.login-sub{ color: var(--ink-muted); font-size: 0.95rem; }
.login-form{ display: flex; flex-direction: column; gap: 1.1rem; }

/* ---------- หน้าแรก (index.php) — หน้าประชาสัมพันธ์ทุน พสวท. สำหรับผู้ที่ยัง
   ไม่ login ต่างจาก .guest-body ตรงที่ไหลจากบนลงล่างตามปกติ (ไม่ได้จัดกึ่งกลาง
   แนวตั้งทั้งหน้าแบบฟอร์ม login) — แบ่งเป็น "แถบ" เต็มความกว้างจอสลับสี
   (.landing-band / .landing-band-alt) แทนที่จะลอยแบนราบสีเดียวกันหมดทั้งหน้า
   ให้เห็นโครงหัวข้อชัดเจนขึ้น เลื่อนไปยังหัวข้อด้วย anchor link ในแถบเมนูได้
   (ดู html{ scroll-behavior } ด้านล่าง) ---------- */
html{ scroll-behavior: smooth; }
.landing-body{ min-height: 100vh; display: flex; flex-direction: column; }

/* แถบเมนูบนสุด ลอยติดจอเสมอ (position:sticky) กันคนอยู่ส่วนล่างของหน้ายาวๆ
   แล้วหาทาง login ไม่เจอ — โปร่งแสง+เบลอเบาๆ ให้เห็นพื้นหลังจางๆ ลอดผ่านได้
   นิดหน่อย ไม่ทึบตันจนดูหนัก */
.landing-nav{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
/* เส้นไล่สีบางๆ ใต้แถบนำทาง — จุดสังเกตของแบรนด์เล็กๆ ที่ไม่ต้องเพิ่ม
   สีใหม่เข้าระบบ (ใช้ --accent/--accent-strong ที่มีอยู่แล้ว) */
.landing-nav::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}
.landing-nav-inner{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.landing-nav-brand{ display: flex; align-items: center; gap: 0.6rem; }
.landing-nav-brand:hover{ text-decoration: none; }
.landing-nav-brand img{ width: 32px; height: 32px; }
.landing-nav-brand-text{ display: flex; flex-direction: column; line-height: 1.2; }
.landing-nav-brand-text strong{ font-size: 0.96rem; font-weight: 700; color: var(--ink); }
.landing-nav-brand-text small{ font-size: 0.72rem; font-weight: 500; color: var(--ink-muted); }
.landing-nav-links{ display: flex; gap: 1.5rem; }
.landing-nav-links a{ display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-muted); font-size: 0.92rem; font-weight: 500; }
.landing-nav-links a i{ font-size: 0.85rem; color: var(--accent); }
.landing-nav-links a:hover{ color: var(--accent); text-decoration: none; }
.landing-nav-links a.is-active{ color: var(--accent-strong); font-weight: 700; }
.landing-nav-links a.is-active i{ color: var(--accent-strong); }
.landing-nav-actions{ display: flex; gap: 0.5rem; }

/* ปุ่ม 3 ขีด — โผล่เฉพาะจอเล็ก (<lg, ใช้ d-lg-none ของ Bootstrap ใน HTML)
   เปิด .landing-nav-collapse เป็นแถบเลื่อนจากขวา (offcanvas ของ Bootstrap) */
.landing-nav-toggle{
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius);
}
.landing-nav-toggle:hover{ background: var(--accent-soft); color: var(--accent-strong); }

/* ≥lg: offcanvas-lg ของ Bootstrap ทำให้ .landing-nav-collapse กลายเป็น
   บล็อกธรรมดา (ไม่ใช่แผงเลื่อน) อยู่แล้ว แค่จัดเป็นแถวแนวนอนเอง */
@media (min-width: 992px){
  .landing-nav-collapse .offcanvas-body{ display: flex; align-items: center; gap: 1.6rem; padding: 0; }
}
/* <lg: เป็นแผงเลื่อนจากขวาจริงๆ ปรับธีมให้เข้ากับหน้า (ไม่ใช้สีขาวเปล่าๆ
   ของ Bootstrap ค่าเริ่มต้น) เมนู/ปุ่มเรียงเป็นแนวตั้งให้กดง่ายบนจอสัมผัส */
@media (max-width: 991.98px){
  /* ใช้ id ควบคู่ (#landingNavMenu) + ตั้งตัวแปร --bs-offcanvas-width เอง
     เพราะ selector ของ Bootstrap เองสำหรับ .offcanvas-lg มี specificity
     สูงพอที่จะชนะ .landing-nav-collapse{ width:... } เฉยๆ ได้ (ลอง width
     ตรงๆ ก่อนแล้วไม่ติด เจอว่ากว้างเท่าจอเสมอ) */
  #landingNavMenu.landing-nav-collapse{ --bs-offcanvas-width: min(300px, 85vw); width: min(300px, 85vw); height: 100vh; background: var(--bg); }
  .landing-nav-collapse .offcanvas-header{ border-bottom: 1px solid var(--border); padding: 1rem 1.2rem; }
  .landing-nav-collapse .offcanvas-title{ font-weight: 700; color: var(--ink); font-size: 0.95rem; }
  .landing-nav-collapse .offcanvas-body{ display: flex; flex-direction: column; gap: 1.6rem; padding: 1.3rem 1.2rem; }
  .landing-nav-links{ flex-direction: column; gap: 1.1rem; }
  .landing-nav-actions{ flex-direction: column; }
  .landing-nav-actions .btn{ width: 100%; text-align: center; }
}

/* แถบเต็มความกว้าง + คอลัมน์เนื้อหาด้านในจำกัดความกว้างเหมือนเดิม (900px)
   สลับสีพื้นหลังทุกแถบเว้นแถบ (.landing-band-alt ใช้ --surface-2 กลืนกับโทน
   ครีมเดิมแต่เข้มขึ้นนิดหน่อย ให้ต่างจากพื้นขาวของการ์ดต่างๆ ที่วางอยู่ข้างใน
   พอสังเกตเห็นแนวแบ่งหัวข้อได้ชัดขึ้น โดยไม่ต้องเพิ่มสีใหม่เข้าไปในระบบ) */
.landing-band{ padding: 3.6rem 1.5rem; }
.landing-band-alt{ background: var(--surface-2); }
.landing-band-inner{ max-width: 900px; margin: 0 auto; }
#about, #activities, #links, #contact{ scroll-margin-top: 4.5rem; }

.landing-hero-band{ padding-top: 3rem; position: relative; overflow: hidden; }
/* ลายจุดจางๆ หลังโลโก้/หัวข้อ — อ้างอิงลาย grid วิทยาศาสตร์แบบกระดาษกราฟ/
   โครงผลึกโมเลกุล ให้เข้ากับธีมทุนสายวิทย์ฯ จางลงเป็นวงรีไม่ให้ชนขอบแข็งๆ */
.landing-hero-band::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--border) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 0%, black 40%, transparent 90%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 0%, black 40%, transparent 90%);
  pointer-events: none;
  z-index: 0;
}
.landing-hero-top{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; }
.landing-hero-bottom{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; margin-top: 2rem; }
.landing-marks{ display: flex; align-items: center; justify-content: center; gap: 1.4rem; }
.landing-mark-badge{
  width: 112px;
  height: 112px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem;
  flex-shrink: 0;
}
.landing-mark{ max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.landing-eyebrow-lead{
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.landing-eyebrow{
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0;
}
.landing-hero-bottom p{ max-width: 560px; color: var(--ink-muted); font-size: 1.02rem; }
.landing-cta{ display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; margin-top: 0.3rem; }

/* ---------- ภาพเลื่อน (hero carousel) — ใช้ภาพจริง 3 รูปของจุฬาฯ ที่มีใน
   ระบบ (img/CUBg.webp, CUBg2.webp, CUBg3.webp) คนละรูปต่อสไลด์ ไล่สีทับ
   ต่างกันให้อ่านตัวหนังสือได้ชัด — เลื่อนจริงด้วย transform (ไม่ใช่แค่ fade
   ข้อความ) สลับอัตโนมัติ + กดจุดเปลี่ยนเองได้ ดู assets/js/landing.js เคารพ
   prefers-reduced-motion (ปิดออโต้เลื่อน แต่ยังกดจุดเปลี่ยนเองได้อยู่) —
   กว้างเกือบเต็มจอ (ไม่ผูกกับคอลัมน์เนื้อหา 900px แบบหัวข้ออื่น) แต่ยังคง
   ทรงการ์ด (มุมมน+เงา) ไว้ ไม่ปล่อยเป็นแบนเนอร์เหลี่ยมชิดขอบจอ ---------- */
.hero-carousel-wrap{ position: relative; z-index: 1; display: flex; justify-content: center; margin: 1.6rem 0; }
.hero-carousel{
  position: relative;
  width: 100%;
  max-width: 1400px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  /* aspect-ratio ตั้งค่าตรงนี้เฉพาะหน้าที่ต้องรองรับภาพหลายสัดส่วน (เช่น
     ภาพเลื่อนกิจกรรมใน activity.php — ดูสไตล์ .hero-slide-plain ด้านล่าง)
     ผ่าน inline style/JS (assets/js/landing.js) หน้าแรก (index.php) ไม่ได้
     ตั้งค่านี้เลย จึงไม่ถูกกระทบ — transition ไว้เผื่อมีการเปลี่ยนสัดส่วน
     ตอนเลื่อนสไลด์ให้นุ่มนวลขึ้น ถ้าไม่เคยเปลี่ยนค่าก็ไม่มีผลอะไร */
  transition: aspect-ratio .35s ease;
}
@media (prefers-reduced-motion: reduce){
  .hero-carousel{ transition: none; }
}
.hero-carousel-track{
  display: flex;
  height: 100%;
  transition: transform .7s cubic-bezier(.65, 0, .35, 1);
}
@media (prefers-reduced-motion: reduce){
  .hero-carousel-track{ transition: none; }
}
.hero-slide{
  position: relative;
  flex: 0 0 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
}
.hero-slide-1{ background-image: url('../../img/CUBg.webp'); background-position: 50% 55%; }
.hero-slide-2{ background-image: url('../../img/CUBg2.webp'); background-position: 50% 35%; }
.hero-slide-3{ background-image: url('../../img/CUBg3.webp'); background-position: 50% 45%; }
.hero-slide::before{
  content: '';
  position: absolute;
  inset: 0;
}
.hero-slide-1::before{ background: linear-gradient(125deg, rgba(190, 45, 100, .85), rgba(30, 37, 47, .55)); }
.hero-slide-2::before{ background: linear-gradient(125deg, rgba(30, 37, 47, .8), rgba(190, 45, 100, .55)); }
.hero-slide-3::before{ background: linear-gradient(125deg, rgba(218, 95, 142, .82), rgba(30, 37, 47, .6)); }
.hero-slide-text{
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 2.6rem 1.8rem 3.4rem;
  max-width: 680px;
}
.hero-slide-text h1, .hero-slide-text h2{ font-size: 1.7rem; color: #fff; text-wrap: balance; margin: 0; }
.hero-slide-text p{ color: rgba(255, 255, 255, .92); margin-top: 0.6rem; font-size: 0.98rem; }
.hero-carousel-dots{
  position: absolute;
  bottom: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}
.hero-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, .5);
  padding: 0;
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}
.hero-dot:hover{ background: rgba(255, 255, 255, .8); }
.hero-dot.is-active{ width: 22px; background: #fff; }

.landing-section-title, .landing-links-title{
  font-size: 1.55rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.65rem;
}
.landing-section-title{ margin: 0 0 0.5rem; }
.landing-links-title{ margin: 0 0 1.3rem; }
.landing-section-title::after, .landing-links-title::after{
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 44px; height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}
.section-icon{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.landing-section-sub{ color: var(--ink-muted); max-width: 620px; margin: 0 0 1.8rem; font-size: 0.95rem; }

/* หัวหน้าเพจของหน้าสาธารณะแยกเดี่ยว (about.php/activities.php/announcements.php/
   contact.php) — แถบแรกสุดใต้ nav เว้นระยะบนให้พอดีกับที่เคยเป็นส่วนหนึ่ง
   ของ index.php แต่ตอนนี้ไม่มี hero ให้ต่อจากด้านบนแล้ว */
.landing-page-intro{ padding-top: 3rem; }

/* แถวหัวข้อ + ปุ่ม "ดูทั้งหมด" (ใช้ในการ์ดกิจกรรม/ประกาศบนหน้าแรก) — เว้น
   ระยะด้านล่างเพิ่ม เพราะจอแคบปุ่มตกไปอยู่บรรทัดใหม่ใต้หัวข้อ (flex-wrap)
   แล้วอยู่ชิดเนื้อหาถัดไปเกินไปถ้าไม่เว้น */
.landing-section-header-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
.landing-section-header-cta{ flex-shrink: 0; white-space: nowrap; }

/* ---------- รายละเอียดโครงการ — การ์ดข้อมูล 3 ใบ (ไม่ใช่ลิงก์ ไม่มี hover
   เป็นปุ่ม) หน้าตาใกล้เคียง .action-card แต่ไม่ต้องสื่อว่ากดได้ ---------- */
.info-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.info-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.info-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card); }
.info-card.is-blue{ border-top-color: var(--accent-blue); }
@media (prefers-reduced-motion: reduce){
  .info-card{ transition: none; }
  .info-card:hover{ transform: none; }
}
.info-card-icon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-card-icon i{ font-size: 1.1rem; color: var(--accent-strong); }
.info-card-icon.is-blue{ background: var(--accent-blue-soft); }
.info-card-icon.is-blue i{ color: var(--accent-blue); }
.info-card h3{ font-size: 1rem; }
.info-card p{ font-size: 0.87rem; color: var(--ink-muted); }

/* ---------- ทุนการศึกษา (ตัวเลขค่าครองชีพ) — การ์ดตัวเลขแยกจาก info-card
   ปกติ (ตัวเลขใหญ่ ใช้ตัวเลขแนวนอนเท่ากัน tabular-nums) เพื่อให้อ่านยอดเงิน
   เทียบกันแต่ละระดับการศึกษาได้ไวกว่าเขียนเป็นข้อความ/ตารางธรรมดา ---------- */
.stipend-block{ margin: 2.2rem 0; }
.stipend-title{ font-size: 1.02rem; font-weight: 700; color: var(--ink); margin: 0 0 1.1rem; }
.stipend-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
.stipend-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.3rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.stipend-icon{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}
.stipend-icon.is-blue{ background: var(--accent-blue-soft); color: var(--accent-blue); }
.stipend-level{ font-size: 0.82rem; font-weight: 600; color: var(--ink-muted); }
.stipend-amount{ font-size: 1.75rem; font-weight: 800; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.stipend-unit{ font-size: 0.76rem; color: var(--ink-faint); }

.landing-pullquote{
  position: relative;
  text-align: center;
  font-size: 1.02rem;
  color: var(--ink-muted);
  font-style: italic;
  max-width: 640px;
  margin: 0 auto;
}
.landing-pullquote::before{
  content: '\201C';
  position: absolute;
  top: -2.1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: normal;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--accent-soft);
  z-index: 0;
}
.landing-source-note{ text-align: center; font-size: 0.76rem; color: var(--ink-faint); margin-top: 1rem; }

/* ---------- กิจกรรม — การ์ดภาพปก+ชื่อ กดแล้วไปหน้ารายละเอียด (activity.php)
   ที่มีรูปครบทุกใบของกิจกรรมนั้น ต่างจาก .info-card/.action-card ตรงที่เป็น
   รูปภาพนำ ไม่ใช่ไอคอน ---------- */
.activity-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.2rem;
}
.activity-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.activity-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card); text-decoration: none; }
@media (prefers-reduced-motion: reduce){
  .activity-card{ transition: none; }
  .activity-card:hover{ transform: none; }
}
.activity-card-cover{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--surface-2); }
.activity-card-cover-empty{ display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--ink-faint); }
.activity-card-body{ padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.activity-card-body h3{ font-size: 0.98rem; margin: 0; color: var(--ink); }
.activity-card-date{ font-size: 0.78rem; color: var(--ink-muted); margin: 0; display: flex; flex-wrap: wrap; gap: 0.15rem 0.8rem; }
.activity-card-excerpt{ font-size: 0.85rem; color: var(--ink-muted); margin: 0; line-height: 1.5; }
.activity-card-more{
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-strong);
  margin-top: 0.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.activity-card-more i{ font-size: 0.72rem; transition: transform .15s ease; }
.activity-card:hover .activity-card-more i{ transform: translateX(3px); }
@media (prefers-reduced-motion: reduce){
  .activity-card-more i{ transition: none; }
  .activity-card:hover .activity-card-more i{ transform: none; }
}

/* ---------- ทางลัดไปหน้าต่างๆ (หน้าแรก index.php) — ไอคอนใหญ่กดตรงไปแต่ละ
   หน้าได้เลย ใช้ไอคอนชุดเดียวกับ nav/หัวข้อของแต่ละหน้า ---------- */
.quicklinks-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}
.quicklink-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 1.5rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ink);
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.quicklink-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card); text-decoration: none; color: var(--ink); }
@media (prefers-reduced-motion: reduce){
  .quicklink-card{ transition: none; }
  .quicklink-card:hover{ transform: none; }
}
.quicklink-icon{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.quicklink-icon.is-blue{ background: var(--accent-blue-soft); color: var(--accent-blue); }
.quicklink-label{ font-size: 0.92rem; font-weight: 600; }

/* ---------- แถวการ์ด/เนื้อหาเลื่อนต่อเนื่องอัตโนมัติไปเรื่อยๆ (marquee) —
   ใช้กับการ์ดกิจกรรมบนหน้าแรก (index.php) ไม่ต้องลากนิ้ว/กดปุ่มเอง ต่างจาก
   .activity-grid (activities.php ที่โชว์ครบทุกอันเป็นตารางนิ่งๆ ไม่เลื่อน)
   ทำด้วย CSS animation ล้วนๆ ไม่ต้องพึ่ง JS — เทคนิคคือวางเนื้อหาซ้ำกันเป๊ะ
   2 ชุดต่อกัน (ดู index.php ที่ loop สร้าง .marquee-track 2 รอบ) แล้วเลื่อน
   ทั้งคู่พร้อมกันจากระยะทางเท่ากับความกว้างของตัวเอง (100%) พอดี พอถึงจุดนั้น
   เนื้อหาชุดที่ 2 จะอยู่ตำแหน่งเดียวกับชุดแรกตอนเริ่มพอดี วนกลับไป 0% ใหม่
   แบบไม่มีรอยต่อให้เห็น ชุดที่ 2 ใส่ aria-hidden+tabindex=-1 กันคนใช้ screen
   reader/คีย์บอร์ดเจอเนื้อหาซ้ำ ---------- */
.marquee-wrap{
  display: flex;
  gap: 1.2rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee-track{
  display: flex;
  gap: 1.2rem;
  flex-shrink: 0;
  padding: 0.2rem 0.2rem 0.6rem;
  animation: marquee-scroll 32s linear infinite;
}
.marquee-wrap:hover .marquee-track{ animation-play-state: paused; }
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-100% - 1.2rem)); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
  .marquee-wrap{ overflow-x: auto; }
}
.marquee-track .marquee-item{ flex-shrink: 0; }
.marquee-track .activity-card.marquee-item{ width: 260px; }
.marquee-card{
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.marquee-card:hover{ border-color: var(--accent); box-shadow: var(--shadow-card); text-decoration: none; }
.marquee-card-cover{ width: 100%; height: 130px; object-fit: cover; display: block; }
.marquee-card-body{ padding: 1rem 1.1rem; }
.marquee-card-body h3{ font-size: 0.95rem; margin: 0 0 0.4rem; color: var(--ink); }
.marquee-card-body .site-announcement-card-excerpt{ font-size: 0.82rem; }

/* ---------- แบ่งหน้า (pagination) — ใช้ร่วมกันทุกหน้าที่มีรายการยาว
   (activities.php, announcements.php) ---------- */
.landing-pagination{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 2.2rem;
}
.landing-pagination-link{
  min-width: 38px;
  height: 38px;
  padding: 0 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.landing-pagination-link:hover{ border-color: var(--accent); color: var(--accent-strong); text-decoration: none; }
.landing-pagination-link.is-active{ background: var(--accent); border-color: var(--accent); color: #fff; }
.landing-pagination-link.is-disabled{ opacity: 0.4; pointer-events: none; }

/* ---------- ประกาศ (announcements.php/announcement.php) ---------- */
.site-announcement-list{ display: flex; flex-direction: column; gap: 1rem; }
.site-announcement-card{
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.3rem 1.4rem;
  color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.site-announcement-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-card); text-decoration: none; }
@media (prefers-reduced-motion: reduce){
  .site-announcement-card{ transition: none; }
  .site-announcement-card:hover{ transform: none; }
}
/* ภาพปก — รูปแรกที่แนบมากับประกาศ (ถ้ามี ดู site_announcement_cover_image()
   ใน functions.php) จอแคบสลับมาวางไว้บนสุดแทนแทนซ้าย ให้เห็นภาพเต็มความกว้าง */
.site-announcement-card-cover{ width: 150px; height: 110px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.site-announcement-card-body{ flex: 1; min-width: 0; }
@media (max-width: 560px){
  .site-announcement-card{ flex-direction: column; }
  .site-announcement-card-cover{ width: 100%; height: 160px; }
}
.site-announcement-card-date{ font-size: 0.78rem; color: var(--ink-faint); margin: 0 0 0.3rem; }
.site-announcement-card h3{ font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--ink); }
.site-announcement-card-excerpt{ font-size: 0.9rem; color: var(--ink-muted); line-height: 1.6; margin: 0 0 0.5rem; }
.site-announcement-card-tags{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.6rem; }
.site-announcement-tag{
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

/* ---------- ลิสต์ประกาศแบบกะทัดรัดบนหน้าแรก (index.php) — ต่างจาก
   .site-announcement-card ของหน้า announcements.php (การ์ดเต็มความกว้าง
   ป้ายไฟล์แนบ/ลิงก์แนบเป็นแค่ข้อความ) ตรงที่: (1) แคบกว่า เพราะต้องแบ่งพื้นที่
   หน้าแรกกับหัวข้ออื่น (2) ไฟล์แนบ/ลิงก์แนบกดเปิดตรงได้เลยจากไอคอนด้านขวา
   ไม่ต้องเข้าไปหน้ารายละเอียดก่อน — เนื้อหาหลัก (ชื่อ/วันที่/สรุปย่อ) กับ
   ไอคอนไฟล์แนบ ต้องแยกเป็นคนละ <a> (ซ้อน <a> กันไม่ได้ตาม HTML) เลยห่อ
   การ์ดทั้งใบด้วย <div> แทน ไม่ใช่ <a> เหมือนการ์ดฝั่ง announcements.php ---------- */
.announcement-teaser-list{ display: flex; flex-direction: column; gap: 1rem; }
.announcement-teaser-card{
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.announcement-teaser-card:hover{ border-color: var(--accent); box-shadow: var(--shadow-card); }
/* รูปย่อเล็กๆ ทางซ้าย (ถ้าประกาศนั้นแนบรูปมาด้วย) — ตั้งใจให้เล็ก/สี่เหลี่ยม
   จัตุรัส ไม่ใช่รูปใหญ่แบบภาพปกกิจกรรม เพราะพื้นที่หน้าแรกจำกัด */
.announcement-teaser-cover-link{ flex-shrink: 0; align-self: center; margin-left: 1rem; }
.announcement-teaser-cover{ width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.announcement-teaser-main{ flex: 1; min-width: 0; padding: 1.1rem 1.3rem; color: var(--ink); }
.announcement-teaser-main h3{ font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--ink); }
.announcement-teaser-main:hover{ text-decoration: none; }
.announcement-teaser-side{
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border-left: 1px solid var(--border);
}
.announcement-teaser-attach{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.announcement-teaser-attach:hover{ background: var(--accent); color: #fff; }

/* เนื้อหา rich text ของประกาศ/กิจกรรม แสดงแบบบทความจริง (ต่างจาก
   .richtext-preview ที่เป็นกล่องแก้ไขในแอดมิน มีกรอบ/พื้นหลัง) ใช้ font-size
   ปกติของเนื้อหาบทความ ระยะห่างหัวข้อ/ย่อหน้า/รายการอ่านง่าย — ไม่จำกัด
   max-width แยกต่างหาก (เดิมจำกัดไว้ 720px เพื่อความยาวบรรทัดอ่านง่าย แต่ทำให้
   ข้อความแคบกว่าหัวข้อ/วันที่/กรอบรูปที่อยู่รอบๆ ซึ่งกว้างเต็ม .landing-band-inner
   900px อยู่แล้ว เห็นได้ชัดว่าไม่สม่ำเสมอ — ปล่อยให้กว้างเท่า container พ่อแม่แทน) */
.richtext-content{ line-height: 1.75; color: var(--ink); margin: 1.5rem 0; }
.richtext-content h1, .richtext-content h2, .richtext-content h3, .richtext-content h4{ margin: 1.4rem 0 0.6rem; }
.richtext-content p{ margin: 0 0 1rem; }
.richtext-content ul, .richtext-content ol{ margin: 0 0 1rem; padding-left: 1.4rem; }
.richtext-content a{ color: var(--accent-strong); text-decoration: underline; }
.richtext-content table{ border-collapse: collapse; max-width: 100%; margin: 0 0 1rem; }
.richtext-content td, .richtext-content th{ border: 1px solid var(--border); padding: 0.4rem 0.6rem; }
.richtext-content blockquote{ border-left: 3px solid var(--accent); margin: 0 0 1rem; padding: 0.2rem 0 0.2rem 1rem; color: var(--ink-muted); }

.site-announcement-attachments{ display: flex; flex-direction: column; gap: 0.6rem; max-width: 480px; margin-top: 1rem; }
.site-announcement-attachment{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9rem;
}
.site-announcement-attachment i{ color: var(--accent); }
.site-announcement-attachment:hover{ border-color: var(--accent); text-decoration: none; }

/* ---------- หน้ารายละเอียดกิจกรรม (activity.php) ---------- */
.activity-detail-title{ font-size: 1.6rem; margin: 1rem 0 0.4rem; text-wrap: balance; }
.activity-detail-date{ color: var(--ink-muted); font-size: 0.9rem; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; }
/* แกลเลอรีรูปแนบของประกาศ (ถ้ามี — อาจมีหลายรูป) — จัดกลางเสมอ แต่ละรูป
   ไม่ครอบตัด (ไม่มี object-fit) ใช้สัดส่วนต้นฉบับเสมอ แค่จำกัดขนาดสูงสุดไม่ให้
   ใหญ่เทอะทะ กดรูปเปิดไฟล์ต้นฉบับเต็มขนาดในแท็บใหม่ได้ (เหมือน
   .activity-photo-grid ของ activity.php) */
.announcement-image-gallery{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0;
}
.announcement-image-gallery-item{ display: block; border-radius: 12px; overflow: hidden; line-height: 0; }
.announcement-image-gallery-item img{ display: block; max-width: 100%; max-height: 320px; width: auto; height: auto; }

/* ภาพเลื่อนด้านบนของหน้ากิจกรรม — ใช้กลไกเดียวกับ .hero-carousel ของหน้าแรก
   (ดูคอมเมนต์ใน activity.php) แต่สไลด์เป็น .hero-slide-plain แทนเลขที่ผูกกับ
   ภาพจุฬาฯ คงที่ 3 รูป — ไม่มีไล่สีทับเพราะไม่มีตัวหนังสือวางบนภาพ */
.activity-hero-carousel{ margin: 0 0 1.6rem; }
/* กันรูปแนวตั้งมากๆ (เช่นภาพหน้าจอมือถือ) ดันกรอบสูงจนหน้าเว็บยาวเกินไป —
   ยังเห็นภาพเต็มไม่ตัดขาดอยู่ดีเพราะ object-fit:contain ข้างบนจัดการให้แล้ว
   แค่มีขอบขาวเพิ่มซ้าย-ขวาถ้าสูงชนเพดานนี้พอดี */
.activity-hero-carousel .hero-carousel{ max-height: 65vh; }
/* ภาพเลื่อนกิจกรรม — ต่างจากภาพเลื่อนหน้าแรก (.hero-slide-1/2/3 ที่ครอบ
   background-image แบบ cover เต็มกรอบคงที่) ตรงที่รูปที่แอดมินอัปโหลดมี
   สัดส่วนไม่แน่นอน (แนวนอน/แนวตั้ง/สี่เหลี่ยมจัตุรัส) ใช้ <img> จริงพร้อม
   object-fit:contain แทน (เห็นภาพเต็มเสมอ ไม่ครอบตัดขาดเหมือนก่อนหน้านี้)
   ส่วนกรอบ .hero-carousel เองปรับสัดส่วนตามรูปที่กำลังแสดงอยู่แทน (ตั้งค่า
   เริ่มต้นจาก PHP ให้ตรงกับรูปแรกทันที กัน "กระพริบ" ตอนโหลดหน้า จากนั้น
   assets/js/landing.js เป็นคนอัปเดตต่อทุกครั้งที่เปลี่ยนสไลด์) พื้นหลังสีอ่อน
   ไว้เติมช่องว่างตอนสัดส่วนรูปกับกรอบไม่พอดีเป๊ะ (letterbox) */
.hero-slide-plain{ min-height: 0; height: 100%; background: var(--surface-2); }
.hero-slide-plain img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.activity-photo-grid-label{ font-size: 0.85rem; color: var(--ink-muted); margin: 0 0 0.8rem; }
.activity-photo-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
}
.activity-photo{ display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
.activity-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.activity-photo:hover img{ transform: scale(1.04); }
@media (prefers-reduced-motion: reduce){
  .activity-photo img{ transition: none; }
  .activity-photo:hover img{ transform: none; }
}

/* กิจกรรมก่อนหน้า/ถัดไป — ท้ายหน้า คล้าย pager ของบทความ/บล็อกทั่วไป */
.activity-pager{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
}
.activity-pager-link{
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.activity-pager-link:hover{ border-color: var(--accent); box-shadow: var(--shadow-card); text-decoration: none; }
.activity-pager-next{ text-align: right; align-items: flex-end; }
.activity-pager-eyebrow{ font-size: 0.76rem; color: var(--ink-faint); }
.activity-pager-title{ font-size: 0.92rem; font-weight: 600; }
@media (max-width: 560px){
  .activity-pager{ grid-template-columns: 1fr; }
  .activity-pager-next{ text-align: left; align-items: flex-start; }
}

.landing-links-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  gap: 1rem;
}
.landing-links-grid .action-card{ text-align: center; align-items: center; }
.action-card-icon{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.action-card-icon.is-blue{ background: var(--accent-blue-soft); color: var(--accent-blue); }
.landing-links-grid .action-card.is-blue:hover{ border-color: var(--accent-blue); }
.landing-link-icon{
  font-size: 0.72rem;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ---------- ติดต่อเรา — ช่องทางกลางของ พสวท. (ไอคอนแถวเดียว) + เจ้าหน้าที่
   ดูแลทุนของศูนย์จุฬาฯ โดยเฉพาะ (การ์ดรูป+ชื่อ+ตำแหน่ง+เบอร์/อีเมล) ---------- */
.contact-channels{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
  margin-bottom: 2.4rem;
}
.contact-channel{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  padding: 1.1rem 0.5rem;
  border-radius: var(--radius);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform .18s ease, box-shadow .18s ease, border-color .15s ease;
}
a.contact-channel:hover{ border-color: var(--accent); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-card); }
@media (prefers-reduced-motion: reduce){
  .contact-channel{ transition: none; }
  a.contact-channel:hover{ transform: none; }
}
.contact-channel-icon{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-channel i{ font-size: 1.05rem; color: var(--accent); }
.contact-channel span{ font-size: 0.76rem; color: var(--ink-muted); }
.contact-channel strong{ font-size: 0.86rem; font-weight: 600; word-break: break-word; }

.landing-subheading{ font-size: 0.95rem; font-weight: 600; color: var(--ink-muted); margin: 0 0 1.2rem; }

.staff-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 260px));
  gap: 1.2rem;
}
.staff-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 1.4rem 1.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.staff-card.is-blue{ border-top-color: var(--accent-blue); }
.staff-photo{
  width: 100%;
  max-width: 220px;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: 0.8rem;
  border: 3px solid var(--accent-soft);
}
.staff-card h4{ font-size: 0.96rem; }
.staff-role{ color: var(--accent-strong); font-size: 0.8rem; font-weight: 600; margin-bottom: 0.3rem; }
.staff-detail{ color: var(--ink-muted); font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem; }
.staff-detail a{ color: inherit; }
.staff-detail a:hover{ color: var(--accent); }

.landing-footer{
  text-align: center;
  padding: 1.6rem 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--ink-faint);
  font-size: 0.82rem;
}

/* ---------- โครงหน้าที่ login แล้ว: sidebar + เนื้อหา ----------
   โครง sidebar/page-header ใช้ markup + utility class ของ Bootstrap เป็นหลัก
   (ดู includes/partials/sidebar.php, pageheader.php) sidebar เป็นแถบสีชมพู
   แบรนด์จุฬาฯ เสมอบนจอกว้าง (≥lg) และใช้ Bootstrap offcanvas-lg ให้กลาย
   เป็นเมนูเลื่อนเข้า-ออกจากปุ่ม hamburger บนจอแคบ (<lg) โดยอัตโนมัติ */
.app-sidebar{
  --bs-offcanvas-width: 280px;
  /* !important จำเป็น: Bootstrap บังคับ background-color: transparent !important
     ให้ .offcanvas-lg เองตอน ≥992px (ให้กลายเป็น sidebar ปกติที่โปร่งใสรับสี
     จาก parent) แต่เราต้องการให้แถบนี้เป็นสีชมพูแบรนด์เสมอทั้งสองสถานะ */
  background: var(--accent) !important;
  color: #fff;
}
.app-sidebar .offcanvas-header{
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.app-sidebar .offcanvas-title{ color: #fff; }
.app-sidebar-brand{ color: #fff; }
.app-sidebar-brand small{ color: rgba(255,255,255,0.75); }

.app-sidebar .nav-link{
  color: rgba(255,255,255,0.85);
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.app-sidebar .nav-link:hover{
  background: rgba(255,255,255,0.14);
  color: #fff;
}
.app-sidebar .nav-link.active{
  background: #fff;
  color: var(--accent-strong);
  font-weight: 600;
}

.app-sidebar-group-label{
  margin: 0.9rem 0 0.2rem;
  padding: 0 0.9rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.app-sidebar-user{ border-top: 1px solid rgba(255,255,255,0.18); }
.app-sidebar-user .fw-semibold{ color: #fff; }
.app-sidebar-user-role{ color: rgba(255,255,255,0.75); }

@media (min-width: 992px){
  .app-sidebar{ width: 264px; }
}

/* แถบ hamburger บนจอแคบ (<lg) — สีชมพูเดียวกับ sidebar ให้ดูเป็นแบรนด์
   เดียวกันตลอด ไม่ใช้แถบขาวคั่นแบบเดิม */
.app-mobile-bar{
  background: var(--accent);
  color: #fff;
  padding: 0.7rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.app-mobile-bar-toggle{
  background: rgba(255,255,255,0.16);
  border: none;
  color: #fff;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.app-mobile-bar-toggle:hover{ background: rgba(255,255,255,0.26); }

/* ---------- ปุ่มบัญชีผู้ใช้บนแถบหัวข้อ (pageheader.php) — วงกลมตัวอักษร
   แรกสีชมพูแบรนด์ + ชื่อผู้ใช้เต็มข้าง ๆ (ซ่อนชื่อบนจอเล็กมาก ให้เหลือแค่
   วงกลม กันแถบหัวข้อแคบเกินไปจนชื่อยาวดันหัวข้อหน้าออกนอกจอ) ---------- */
.header-user-btn{
  padding: 0.3rem 0.5rem 0.3rem 0.3rem;
  border-radius: 999px;
  transition: background-color .15s ease;
}
.header-user-btn:hover{ background: var(--surface-2); }
.header-user-avatar{
  width: 38px;
  height: 38px;
  background: var(--accent);
  color: #fff;
  font-size: 1.05rem;
}

/* ---------- กระดิ่งแจ้งเตือน (pageheader.php) — ปุ่มวงกลมคู่กับปุ่มบัญชี
   ผู้ใช้ ตัวเลขแดงมุมขวาบนโผล่เฉพาะตอนมีรายการยังไม่อ่าน dropdown แสดง
   รายการล่าสุดแบบ static (render จาก PHP ตอนโหลดหน้า ไม่ใช้ AJAX เหมือน
   dropdown บัญชีผู้ใช้ที่มีอยู่แล้ว — เปิด Bootstrap dropdown ล้วนๆ) ---------- */
.header-bell-btn{
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: 1.05rem;
  transition: background-color .15s ease, color .15s ease;
}
.header-bell-btn:hover{ background: var(--surface-2); color: var(--ink); }
.header-bell-badge{
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.header-bell-menu{
  width: 320px;
  max-width: 90vw;
  padding: 0.5rem 0;
}
.header-bell-menu-title{
  padding: 0.4rem 1rem 0.6rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.header-bell-empty{
  padding: 0.6rem 1rem 1rem;
  font-size: 0.83rem;
  color: var(--ink-faint);
}
.header-bell-item{
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 1rem;
  color: var(--ink);
  border-left: 3px solid transparent;
}
.header-bell-item:hover{ background: var(--surface-2); text-decoration: none; }
.header-bell-item.is-unread{ border-left-color: var(--accent); background: var(--accent-soft); }
.header-bell-item-title{ font-size: 0.85rem; font-weight: 600; }
.header-bell-item-time{ font-size: 0.72rem; color: var(--ink-faint); }
.header-bell-viewall{
  display: block;
  text-align: center;
  padding: 0.6rem 1rem 0.3rem;
  font-size: 0.82rem;
  border-top: 1px solid var(--border);
  margin-top: 0.3rem;
}

@media (max-width: 991.98px){
  .page-body{ padding: 1.6rem 1.3rem 2.5rem; }
}

.page-body{
  padding: 2rem 2.4rem 3.5rem;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.section-title{ font-size: 1.08rem; font-weight: 600; margin-bottom: 0.9rem; }

/* ---------- การ์ดสถิติ ---------- */
.stat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}
.stat-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.stat-value{
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-value.pending{ color: var(--accent-strong); }
.stat-value.warn{ color: var(--warning); }
.stat-value.success{ color: var(--success); }
.stat-value.empty{ color: var(--ink-faint); }
.stat-label{ font-size: 0.9rem; font-weight: 600; color: var(--ink-muted); }
.stat-note{ font-size: 0.79rem; color: var(--ink-faint); }

/* ---------- การ์ดทางลัด ---------- */
.action-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 280px));
  justify-content: start;
  gap: 1rem;
}
.action-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.action-card:hover{
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(20, 26, 33, 0.07);
  text-decoration: none;
}
.action-card h3{ font-size: 1.02rem; }
.action-card p{ font-size: 0.87rem; color: var(--ink-muted); }

.badge{
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-faint);
}
.badge.soon{ background: var(--accent-soft); color: var(--accent-strong); }

/* ---------- pill สถานะ — ใช้ทั่วทั้งระบบ (เปิด/ปิด, รอตรวจ/ต้องแก้ไข/อนุมัติแล้ว ฯลฯ) ---------- */
.pill{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--ink-muted);
}
.pill i{ font-size: 0.7rem; }
.pill.neutral{ background: var(--surface-2); color: var(--ink-muted); }
.pill.pending{ background: var(--accent-soft); color: var(--accent-strong); }
.pill.success{ background: var(--success-soft); color: var(--success); }
.pill.warn{ background: var(--warning-soft); color: var(--warning); }
.pill.danger{ background: var(--danger-soft); color: var(--danger); }

/* ---------- สถานะว่าง / โมดูลที่ยังไม่พร้อม ---------- */
.empty-state{
  padding: 1.7rem;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.92rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.stub-card{
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 2.6rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.stub-card h2{ font-size: 1.2rem; }
.stub-card p{ max-width: 46ch; color: var(--ink-muted); }

/* ---------- แถบเครื่องมือหัวหมวด (หัวข้อ + ปุ่มการกระทำ) ---------- */
.section-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.section-toolbar .section-title{ margin-bottom: 0; }

/* ---------- การ์ดฟอร์ม ---------- */
.form-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.7rem 1.9rem;
  /* เต็มความกว้างที่มีเป็นค่าเริ่มต้นเสมอ (หน้าที่อยากให้แคบกว่านี้จริงๆ
     เช่นหน้าแจ้งผลสั้นๆ ให้ override ทับด้วย style="max-width:...;" เฉพาะหน้า
     นั้นไปเลย แทนที่จะตั้งแคบไว้เป็นค่าเริ่มต้นแล้วต้อง override ทับทุกหน้า
     ที่มีเนื้อหาเยอะ ซึ่งเป็นต้นเหตุของบั๊ก "แสดงไม่เต็มจอ" ที่เจอซ้ำหลายครั้ง) */
  max-width: none;
}
.form-section-label{
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}
.form-section-label:not(:first-child){ margin-top: 1.8rem; }
/* หัวข้อกลุ่มย่อยภายใน 1 section (เช่นแต่ละหมวดของฟอร์มเสริมรอบประชุม —
   ดู render_committee_extra_fields()) เบากว่า .form-section-label เพราะเป็น
   แค่ตัวแบ่งหมวดภายใน ไม่ใช่หัวข้อระดับฟอร์มทั้งก้อน ใช้เส้นบางๆ ไม่ใช้กล่อง/
   การ์ดซ้อนกันหลายชั้นแบบ Bootstrap .card เดิม เพื่อให้หน้าดูโปร่ง ไม่ทึบ */
.form-group-label{
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent);
  margin: 1.6rem 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.form-group-label:first-of-type{ margin-top: 0.2rem; }

/* หัวข้อหมวดของฟอร์มโปรไฟล์นิสิต (render_student_profile_fields()/_readonly()
   ใน functions.php) — ไอคอนวงกลม (.section-icon ตัวเดียวกับหัวข้อหน้า
   สาธารณะ) + ชื่อหมวดตัวหนา คั่นด้วยเส้นบางๆ แทนป้ายตัวเล็กสีจางเดิม ให้แยก
   แต่ละหมวดออกจากกันชัดเจนขึ้นโดยไม่ต้องซ้อนกล่อง/การ์ด (หลักการเดียวกับ
   .form-group-label ด้านบน) */
.profile-section-head{
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 2rem 0 1.1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}
.profile-section-head.is-first{ margin-top: 0; }
.profile-section-head .section-icon{ width: 32px; height: 32px; font-size: 0.82rem; }
.profile-section-title{
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.form-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.1rem;
}
.form-grid .field.span-2{ grid-column: 1 / -1; }
/* ตัวเลือก 2 คอลัมน์ตายตัว (แทน auto-fit ด้านบนที่จำนวนคอลัมน์ต่อแถวขยับตาม
   ความกว้างจอ ทำให้แถวสุดท้ายมีช่องเดียวโดดๆ ดูไม่สมดุลเวลาเจอกลุ่มฟิลด์ยาวๆ
   เช่นฟอร์มเสริมรอบประชุม — ดู render_committee_extra_fields()) ให้ผลลัพธ์
   คงที่ เดาได้ว่าแถวไหนจะจับคู่กันพอดี ไม่ว่าจอกว้างแค่ไหน */
.form-grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px){
  .form-grid.cols-2{ grid-template-columns: 1fr; }
}
/* ตัวเลือก 3 คอลัมน์ตายตัว — ใช้กับหมวด "ข้อมูลทุน" ของฟอร์มโปรไฟล์นิสิต
   (render_student_profile_fields()/_readonly() ใน functions.php) โดยเฉพาะ
   เพราะมี 6 ฟิลด์ label ยาว (มีตัวอย่างในวงเล็บ) auto-fit เดิมยัดได้ถึง 6
   คอลัมน์ในจอกว้าง ทำให้แต่ละช่องแคบเกินไปจน label ตัดบรรทัดไม่เท่ากันแต่ละ
   ช่อง ดูไม่เป็นระเบียบ — ให้ผลลัพธ์คงที่ 3+3 อ่านง่ายกว่า */
.form-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px){
  .form-grid.cols-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .form-grid.cols-3{ grid-template-columns: 1fr; }
}
/* ตารางที่มี input ให้กรอกในเซลล์เอง (ค่าใช้จ่าย/เอกสารแนบของฟอร์มเสริมรอบ
   ประชุม) ใช้ recipe เดียวกับ .field input แต่ไม่ต้องพึ่ง .field ครอบ เพราะ
   อยู่ในเซลล์ตารางแทน — กันไม่ให้ input ในตารางหลุดไปใช้ดีฟอลต์ของเบราว์เซอร์ */
.data-table input[type="text"],
.data-table input[type="number"],
.data-table input[type="date"]{
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.data-table input:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem var(--accent-soft);
}
.data-table input[type="checkbox"]{ width: 1.05rem; height: 1.05rem; }
.form-actions{
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}

/* ---------- ตารางข้อมูล ---------- */
.table-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-x: auto;
}
.data-table{ width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 620px; }
.data-table thead th{
  text-align: left;
  padding: 0.8rem 1.1rem;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table tbody td{
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tbody tr:last-child td{ border-bottom: none; }
.data-table tbody tr:hover td{ background: var(--surface-2); }
.data-table .mono{ font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
/* แถวรวม (เช่นยอดรวมค่าใช้จ่ายในตารางอ่านอย่างเดียว — ดู
   render_committee_extra_fields_readonly()) เน้นด้วยพื้นหลังอ่อนๆ กับเส้นบน
   หนาขึ้นเล็กน้อย แยกจากรายการปกติชัดเจน ไม่ต้องพึ่งแค่ font-weight อย่างเดียว */
.data-table tfoot td{
  padding: 0.8rem 1.1rem;
  border-top: 2px solid var(--border);
  background: var(--surface-2);
}
.link-action{ font-size: 0.88rem; font-weight: 600; }

/* ---------- แถบค้นหา + เรียงลำดับ + แบ่งหน้า (เสริมโดย assets/js/datatable.js) ---------- */
.table-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.table-search{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  min-width: 240px;
  flex: 0 1 320px;
}
.table-search i{ color: var(--ink-faint); font-size: 0.9rem; }
.table-search input{
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--ink);
  width: 100%;
}
.table-search input::placeholder{ color: var(--ink-faint); }
.table-count{ font-size: 0.84rem; color: var(--ink-faint); white-space: nowrap; }

.data-table thead th.is-sortable{ cursor: pointer; user-select: none; }
.data-table thead th.is-sortable:hover{ color: var(--ink); }
.data-table thead th.is-sortable::after{
  content: '\f0dc';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: 0.5em;
  font-size: 0.78em;
  color: var(--ink-faint);
  opacity: 0.6;
}
.data-table thead th.is-sortable.sort-asc::after{ content: '\f0de'; opacity: 1; color: var(--accent); }
.data-table thead th.is-sortable.sort-desc::after{ content: '\f0dd'; opacity: 1; color: var(--accent); }

.table-pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.table-pagination-label{ font-size: 0.86rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.data-table tr.no-results-row:hover td{ background: transparent; }

/* ---------- แสดงข้อมูลแบบอ่านอย่างเดียว ---------- */
.readonly-grid{
  margin: 0 0 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
/* คู่กับ .form-grid.cols-3 ด้านบน — หมวด "ข้อมูลทุน" ใช้ 3 คอลัมน์ตายตัวทั้ง
   ฟอร์มแก้ไขและมุมมองอ่านอย่างเดียว ให้สม่ำเสมอกัน */
.readonly-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px){
  .readonly-grid.cols-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .readonly-grid.cols-3{ grid-template-columns: 1fr; }
}
.readonly-item dt{
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-bottom: 0.25rem;
}
.readonly-item dd{
  margin: 0;
  font-size: 0.98rem;
  color: var(--ink);
}

/* ---------- หน้าตรวจสอบเอกสาร: ฟอร์มซ้าย + ตัวอย่างไฟล์ PDF ขวา ---------- */
.review-layout{
  display: grid;
  grid-template-columns: minmax(320px, 480px) 1fr;
  gap: 1.5rem;
  align-items: start;
}
.review-layout .form-card{ max-width: none; }
.doc-preview-panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 680px;
}
.doc-preview-panel-head{
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-faint);
}
.doc-preview-panel iframe{
  flex: 1;
  border: none;
  width: 100%;
  min-height: 680px;
  background: var(--surface-2);
}
@media (max-width: 980px){
  .review-layout{ grid-template-columns: 1fr; }
  .doc-preview-panel, .doc-preview-panel iframe{ min-height: 480px; }
}

/* ---------- การ์ดตั้งค่าเปิด/ปิดรับข้อมูล ---------- */
.settings-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.3rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.settings-card .settings-info{ display: flex; flex-direction: column; gap: 0.3rem; }
.settings-card .settings-title{ font-weight: 600; font-size: 0.98rem; }
.settings-card .settings-note{ font-size: 0.85rem; color: var(--ink-muted); }
.settings-card form{ display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.settings-card input[type="text"],
.settings-card select{
  font-family: inherit;
  font-size: 0.92rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.settings-card input[type="text"]{ min-width: 220px; }
.settings-card select{ min-width: 260px; }
.settings-card input[type="text"]:focus,
.settings-card select:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.banner{
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  font-size: 0.92rem;
  margin-bottom: 1.4rem;
}
.banner.open{ background: var(--success-soft); color: var(--success); }
.banner.closed{ background: var(--surface-2); color: var(--ink-muted); border: 1px dashed var(--border); }

/* ---------- ตัวเลือกปีการศึกษา ---------- */
.year-switcher{
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  padding: 0.3rem;
  margin-bottom: 1.8rem;
}
.year-switcher .year-nav{
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ink-muted);
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
  transition: background-color .15s ease, color .15s ease;
}
.year-switcher .year-nav:hover{ background: var(--accent-soft); color: var(--accent-strong); text-decoration: none; }
.year-switcher .year-label{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  min-width: 168px;
  padding: 0 0.5rem;
  text-align: center;
  color: var(--ink);
}
.year-switcher .year-label small{
  display: inline-block;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  margin-top: 0.25rem;
}

@media (max-width: 480px){
  .year-switcher{ display: flex; }
  .year-switcher .year-label{ min-width: 0; flex: 1; }
}

/* ---------- การ์ดงวดเบิกจ่าย ---------- */
/* ใช้ flexbox แทน grid คอลัมน์ตายตัว เพื่อให้การ์ด "กว้างเท่ากัน" ทุกใบ
   ไม่ว่าจะอยู่กลุ่มไหน (เดิมกลุ่ม "งวด" 3 คอลัมน์ vs กลุ่ม "ประเภทค่าใช้จ่าย"
   2 คอลัมน์ ทำให้การ์ดสองกลุ่มกว้างไม่เท่ากัน) flex-basis/max-width กำหนด
   ขนาดเป้าหมายตายตัวไว้แทน ส่วน min-height บน .period-card ให้ "สูงเท่ากัน"
   ข้ามกลุ่มด้วย (grid/flex stretch ทำได้แค่ในแถว/container เดียวกัน) โดยไม่ต้อง
   ใหญ่เกินจำเป็น เนื้อหาที่ยาวกว่าปกติ (เช็คลิสต์เยอะ) ก็แค่ดันการ์ดสูงขึ้นเอง */
.period-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
@media (max-width: 600px){
  .period-card{ flex-basis: 100% !important; max-width: none !important; }
}
.period-group + .period-group{ margin-top: 2rem; }
.period-group-title{
  font-size: 1.08rem;
  font-weight: 600;
  margin-bottom: 0.9rem;
}
/* ---------- ยุบรอบประชุมเก่าเป็น accordion (student/committee-topics.php) —
   กันหน้ายาวเกินไปเมื่อมีหลายรอบประชุม/หลายปีการศึกษาสะสม ดูที่มาการตัดสินใจ
   เปิด/ปิดอัตโนมัติของแต่ละรอบในตัวไฟล์ PHP เอง (คอมเมนต์ $isExpanded) ---------- */
.period-group-title.accordion-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 0.9rem;
  font: inherit;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.period-group-title.accordion-toggle:hover{ color: var(--accent); }
.accordion-meta{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-faint);
  flex-shrink: 0;
  white-space: nowrap;
}
.accordion-meta .pill{ font-size: 0.72rem; padding: 0.16rem 0.5rem; }
.accordion-chevron{ transition: transform .2s ease; }
.accordion-toggle.collapsed .accordion-chevron{ transform: rotate(-90deg); }
.period-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 260px;
  max-width: 300px;
  min-height: 230px;
  transition: border-color .15s ease;
}
.period-card.is-open{ border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.period-card.is-closed{ opacity: 0.85; }

.period-head{
  padding: 0.85rem 1rem 0.7rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  border-bottom: 1px solid var(--border);
}
.period-head-left{ display: flex; align-items: flex-start; gap: 0.8rem; }
.period-number{
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.98rem;
  background: var(--surface-2);
  color: var(--ink-muted);
}
.period-card.is-open .period-number{ background: var(--success-soft); color: var(--success); }
.period-title{ font-weight: 700; font-size: 0.96rem; color: var(--ink); }
.period-months{ font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.15rem; }
.period-now-badge{
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
}

/* ป้ายประกาศจากเจ้าหน้าที่ (disbursement_rounds.note) — แสดงบนการ์ดฝั่งนิสิต
   ตอนเปิดรับคำขอ ตั้งใจให้เด่นเป็นพิเศษ (แถบสีข้าง + ป้ายกำกับตัวใหญ่) เพราะ
   เป็นข้อความที่เจ้าหน้าที่ตั้งใจสื่อสารเฉพาะรอบนี้ ไม่ใช่ helper text ทั่วไป */
.period-staff-note{
  position: relative;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: var(--warning-soft);
  border-radius: 8px;
  padding: 0.7rem 0.85rem 0.7rem 0.95rem;
  overflow: hidden;
}
.period-staff-note::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--warning);
}
.period-staff-note .icon{
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--warning);
  font-size: 0.95rem;
}
.period-staff-note .text{ min-width: 0; }
.period-staff-note .eyebrow{
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warning);
  margin-bottom: 0.2rem;
}
.period-staff-note .message{
  font-size: 0.85rem;
  color: var(--ink);
  white-space: pre-line;
  line-height: 1.5;
}

.period-body{ padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }

.period-checklist{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.86rem;
  color: var(--ink-muted);
}
.period-checklist li{ display: flex; align-items: flex-start; gap: 0.55rem; }
.period-checklist li::before{
  content: "";
  flex-shrink: 0;
  margin-top: 0.45rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.period-checklist-note{ font-size: 0.78rem; color: var(--ink-faint); }

/* ---------- สถานะ + ไฟล์ที่ส่งแล้ว + ปุ่มจัดการ (ในการ์ดของนิสิต/รายการของแอดมิน) ---------- */
.submission-status{
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.submission-note{ font-size: 0.83rem; color: var(--danger); margin: -0.2rem 0 0; }

/* ---------- เอกสารหลังกิจกรรม (เคลียร์การเงิน/รายงาน) — แสดงซ้อนอยู่ในเซลล์
   "ไฟล์" ของตารางเดิม (ไม่ใช่แถวใหม่) เพื่อไม่ให้กระทบจำนวนแถวที่ datatable.js
   ใช้นับตอนแบ่งหน้า/ค้นหา ดู student/committee-topics.php และ
   admin/committee-review.php ---------- */
.followup-block{
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.followup-item{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
}
.followup-item > span:first-child{ font-weight: 600; color: var(--ink); }
.followup-item a{ font-weight: 500; }
.followup-item form{ display: inline; }
.submission-file{
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.87rem;
}
.submission-file a{
  font-weight: 600;
  color: var(--accent);
  word-break: break-word;
}
.submission-file i{ color: var(--ink-faint); flex-shrink: 0; }
.submission-amount{
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.submission-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.btn-link-danger{
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--danger);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.btn-link-danger:hover{ text-decoration: underline; }

/* รายการไฟล์แบบหลายไฟล์ต่อรายการ (เช่นรอบประชุมที่ส่งได้หลายไฟล์) */
.submission-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.submission-list li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.86rem;
}
.submission-list .submission-file{ flex-wrap: wrap; row-gap: 0.15rem; }
.submission-list .submission-meta{ color: var(--ink-faint); font-size: 0.82rem; }

/* ---------- แถวหัวข้อเต็มความกว้าง — ใช้ทั้ง admin/committee-meeting-topics.php
   และ student/committee-topics.php — 1 หัวข้อ 1 แถว ไล่ลงมา (เดิมเป็นการ์ดกริด
   แคบๆ แบบ .period-card แต่แต่ละหัวข้อมีตารางไฟล์ที่ส่ง/สถานะอยู่ข้างใน ตาราง
   ต้องการความกว้างเต็มที่ ใส่ในการ์ดแคบแล้วต้องเลื่อนแนวนอนตลอดอ่านยาก) */
.topic-list{ display: flex; flex-direction: column; gap: 1rem; }
.topic-row{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.topic-row.is-open{ border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.topic-row.is-closed{ opacity: 0.75; }
.topic-row-head{
  padding: 1rem 1.2rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem 1.4rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.topic-row-title{ font-weight: 600; font-size: 1rem; color: var(--ink); }
.topic-form-badge{ font-size: 0.78rem; color: var(--ink-faint); margin-top: 0.25rem; }
.topic-row-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; font-size: 0.82rem; }
.topic-row-body{ padding: 1.1rem 1.2rem; }

.period-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.85rem 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  /* ดันลงไปชิดล่างของ period-body เสมอ ไม่ว่าเช็คลิสต์ด้านบนจะยาวกี่บรรทัด
     กันไม่ให้บล็อกสถิติลอยอยู่คนละระดับกันในแต่ละการ์ด */
  margin-top: auto;
}
.period-stat{ text-align: center; }
.period-stat-value{
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
.period-stat-value.warn{ color: var(--warning); }
.period-stat-value.success{ color: var(--success); }
.period-stat-label{ font-size: 0.72rem; color: var(--ink-faint); margin-top: 0.1rem; }

.period-foot{
  padding: 0.85rem 1.1rem 1rem;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.period-foot input[type="text"]{
  font-family: inherit;
  font-size: 0.88rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.period-foot input[type="text"]:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---------- แก้บั๊ก Bootstrap .modal-dialog-scrollable ที่ .modal-body ไม่ยอม
   เลื่อน scroll ภายในตัวเองจริงๆ เวลาเนื้อหาข้างในสูงมาก (เช่น checklist
   รายชื่อนิสิตยาวๆ ในโมดัล "ตั้งค่าการเปิดรับ" ของ admin/rounds.php และ
   admin/documents.php) — ทำให้ทั้งโมดัลสูงเกินจอ ปุ่ม "บันทึก" ใน footer หลุด
   ออกนอกจอมองไม่เห็น/กดไม่ได้เลย (เจอบั๊กจริงจากผู้ใช้ทักมา)

   สาเหตุ: .modal-content เป็น flex column (มาจาก Bootstrap เอง) ส่วน
   .modal-body เป็น flex item ที่ตั้งใจให้หดตัวลงพอดีพื้นที่ที่เหลือแล้วค่อย
   เลื่อน scroll ภายใน — ในทางทฤษฎี min-height:0 ควรแก้ได้ (ปัญหา flexbox ที่
   รู้จักกันดี) แต่ทดสอบจริงแล้วเบราว์เซอร์ยังไม่ยอมหดให้เล็กกว่าเนื้อหาอยู่ดี
   (แก้ min-height:0 อย่างเดียวไม่พอ) จึงใช้วิธีตรงกว่า: กำหนด max-height
   ตายตัวให้ .modal-body เลย ไม่พึ่งพฤติกรรม flex-shrink อีกต่อไป */
.modal-dialog-scrollable .modal-body{
  min-height: 0;
  max-height: 60vh;
  overflow-y: auto;
}