/* ============================================================
   INNO 2026 — ธีมหลัก (น้ำเงิน / ฟ้า / ม่วง)
   ============================================================ */

:root {
  /* ---- จานสี ---- */
  --blue-900: #0b1354;
  --blue-800: #131a6b;
  --blue-700: #1e2a8a;
  --blue-600: #2b3ba8;
  --blue:     #3a0ca3;
  --indigo:   #4361ee;
  --indigo-400: #5a7bff;
  --cyan:     #4cc9f0;
  --cyan-300: #7ad9f7;
  --purple:   #7209b7;
  --purple-400: #9d4edd;
  --pink:     #f72585;

  --brand-gradient:  linear-gradient(135deg, #3a0ca3 0%, #4361ee 45%, #4cc9f0 100%);
  --brand-gradient-2: linear-gradient(135deg, #7209b7 0%, #4361ee 55%, #4cc9f0 100%);
  --brand-gradient-3: linear-gradient(120deg, #4361ee 0%, #7209b7 100%);
  --hero-gradient:   linear-gradient(135deg, #0b1354 0%, #3a0ca3 40%, #7209b7 75%, #4361ee 100%);

  --ink:        #16193f;
  --ink-soft:   #5b6083;
  --line:       #e6e9f5;
  --surface:    #ffffff;
  --surface-2:  #f5f7fe;
  --surface-3:  #eef1fb;

  --radius:    18px;
  --radius-sm: 12px;
  --radius-lg: 26px;

  --shadow-sm: 0 2px 10px rgba(22, 25, 63, .06);
  --shadow:    0 10px 34px rgba(22, 25, 63, .10);
  --shadow-lg: 0 24px 64px rgba(22, 25, 63, .16);
  --shadow-brand: 0 14px 40px rgba(67, 97, 238, .32);

  --bs-body-font-family: 'Noto Sans Thai Looped', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   พื้นฐาน
   ============================================================ */
* { scroll-behavior: smooth; }

body {
  font-family: var(--bs-body-font-family);
  color: var(--ink);
  background: var(--surface-2);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .display-1, .display-2, .display-3, .display-4, .navbar-brand {
  font-family: var(--bs-body-font-family);
  font-weight: 600;
  letter-spacing: -.01em;
}

a { text-decoration: none; }

.text-gradient {
  background: var(--brand-gradient-3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.bg-brand        { background: var(--brand-gradient) !important; }
.bg-brand-2      { background: var(--brand-gradient-2) !important; }
.bg-surface-2    { background: var(--surface-2) !important; }
.text-ink        { color: var(--ink) !important; }
.text-ink-soft   { color: var(--ink-soft) !important; }

/* บนพื้นหลังสีเข้ม (hero / หัวการ์ดล็อกอิน / แถบข้าง / หัวหน้าแดชบอร์ด / ส่วนท้าย)
   ให้ .text-ink และ .text-gradient แสดงเป็นสีขาว เพื่อให้อ่านง่าย
   (ไม่กระทบการใช้งานบนพื้นขาวทั่วไป) */
.hero .text-ink,
.login-card-head .text-ink,
.sidebar .text-ink,
.page-head .text-ink,
.site-footer .text-ink {
  color: #fff !important;
}
.hero .text-gradient,
.login-card-head .text-gradient,
.sidebar .text-gradient,
.page-head .text-gradient,
.site-footer .text-gradient {
  -webkit-text-fill-color: #ffffffd9;
  color: #fff;
}

/* .login-card เป็นการ์ดพื้นขาวที่วางบน hero — คืนสีตัวอักษรปกติให้เนื้อหาในการ์ด
   (หัวการ์ด .login-card-head เป็นแถบสีเข้ม จึงยังคงเป็นสีขาวตามกฎด้านบน) */
.login-card .text-ink { color: var(--ink) !important; }
.login-card .text-gradient {
  background: var(--brand-gradient-3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* หัวข้อของแต่ละ section */
.section-title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 700;
  margin-bottom: .35rem;
}
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--indigo);
  background: rgba(67, 97, 238, .1);
  border-radius: 999px;
  padding: .35rem .9rem;
  margin-bottom: .75rem;
}
.section-lead { color: var(--ink-soft); max-width: 640px; }

/* เส้นคั่นใต้หัวข้อ */
.title-rule {
  width: 68px; height: 5px; border-radius: 999px;
  background: var(--brand-gradient); margin-top: .6rem;
}
.mx-auto.title-rule { margin-left: auto; margin-right: auto; }

/* ============================================================
   Navbar
   ============================================================ */
.navbar-main {
  /* พื้นหลังทึบขึ้นเล็กน้อยแทนการใช้ backdrop-filter blur
     (blur บนแถบ sticky ต้องเรนเดอร์ใหม่ทุกเฟรมตอนเลื่อนหน้า ทำให้เลื่อนหน้าหนืด) */
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  transition: box-shadow .3s, background .3s, padding .3s;
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.navbar-main.scrolled {
  box-shadow: var(--shadow);
  background: rgba(255, 255, 255, .95);
  padding-top: .35rem;
  padding-bottom: .35rem;
}
.navbar-main .nav-link {
  color: var(--ink);
  font-weight: 500;
  border-radius: 10px;
  padding: .45rem .85rem !important;
  transition: color .2s, background .2s;
}
.navbar-main .nav-link:hover,
.navbar-main .nav-link.active {
  color: var(--indigo);
  background: rgba(67, 97, 238, .09);
}

.brand-badge {
  width: 100%;
  height: auto;
  border-radius: 13px;
  background: var(--brand-gradient);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.35rem;
  box-shadow: var(--shadow-brand);
  flex: none;
}
/* โลโก้บนแถบเมนู — กว้างแบบแบนเนอร์ สูงอัตโนมัติตามสัดส่วนภาพ */
.navbar-brand .brand-badge {
  width: 250px;
  height: auto;
}
/* ภาพโลโก้ที่อัปโหลด: คงสัดส่วนเดิม ไม่ยืด */
.navbar-brand .brand-badge-img img {
  height: auto;
}
/* จอเล็ก: ย่อลงไม่ให้เบียดปุ่มเมนู แต่ยังคงสัดส่วน */
@media (max-width: 575.98px) {
  .navbar-brand .brand-badge { width: 170px; }
}

/* โลโก้ที่อัปโหลดเอง — แสดงเต็มกรอบโดยไม่บิดสัดส่วน */
.brand-badge-img {
  background: #fff !important;
  padding: 6px 6px;
  overflow: hidden;
  box-shadow: none;      /* โลโก้ที่อัปโหลดเอง ไม่ต้องมีเงาเรืองแสง */
}
.brand-badge-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

.brand-text  { line-height: 1.1; }
.brand-title { font-weight: 700; font-size: 1.12rem; color: var(--ink); }
.brand-sub   { font-size: .72rem; color: var(--ink-soft); font-weight: 500; }

/* ============================================================
   ปุ่ม
   ============================================================ */
.btn { border-radius: 12px; font-weight: 500; transition: transform .18s, box-shadow .25s, filter .2s; }

.btn-brand {
  background: var(--brand-gradient);
  border: none; color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn-brand:hover, .btn-brand:focus {
  color: #fff; filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(67, 97, 238, .42);
}
.btn-brand-outline {
  border: 2px solid var(--indigo); color: var(--indigo); background: transparent;
}
.btn-brand-outline:hover { background: var(--indigo); color: #fff; transform: translateY(-2px); }

.btn-glass {
  background: rgba(255, 255, 255, .16);
  border: 1.5px solid rgba(255, 255, 255, .4);
  color: #fff;
  backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .3); color: #fff; transform: translateY(-2px); }

.btn-lg { padding: .8rem 1.9rem; font-size: 1.02rem; }

/* ============================================================
   การ์ด
   ============================================================ */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.card-hover { transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s; }
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(67, 97, 238, .28);
}

/* การ์ดกลุ่มสาระที่คลิกได้ — ป้าย "ดูรายชื่อ" โผล่เมื่อชี้เมาส์ */
.subject-cta {
  color: var(--indigo);
  font-weight: 600;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s, transform .25s;
}
.card-hover:hover .subject-cta,
.card-hover:focus-visible .subject-cta { opacity: 1; transform: translateY(0); }
/* จอสัมผัสไม่มี hover — แสดงไว้ตลอดเพื่อให้รู้ว่ากดได้ */
@media (hover: none) {
  .subject-cta { opacity: 1; transform: none; }
}

/* การ์ดกลุ่มสาระที่กำลังเปิดดูอยู่ */
.border-brand {
  border-color: var(--indigo) !important;
  box-shadow: 0 0 0 3px rgba(67, 97, 238, .14);
}

/* การ์ดที่มีแถบสีด้านบน */
.card-topline { position: relative; overflow: hidden; }
.card-topline::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--brand-gradient);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.card-topline:hover::before { transform: scaleX(1); }

.glass-card {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 22px 60px rgba(11, 19, 84, .35);
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  background: var(--hero-gradient);
  background-size: cover;
  overflow: hidden;
  color: #fff;
}

/* ------------------------------------------------------------
   ภาพพื้นหลังของ hero slide
   ซ้อนทับเกรเดียนต์เดิม เปลี่ยนภาพตามสไลด์ที่กำลังแสดง
   สไลด์ที่ไม่ได้อัปโหลดภาพ = ไม่มีเลเยอร์ จึงเห็นเกรเดียนต์เดิม
   ------------------------------------------------------------ */
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
  z-index: 0;
}
.hero-bg.is-active { opacity: 1; }

/* ม่านเกรเดียนต์ทับภาพ — ความเข้มกำหนดรายสไลด์ผ่าน --veil */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--hero-gradient);
  opacity: var(--veil, .55);
}

/* ไม่มี JS: แสดงเฉพาะภาพของสไลด์แรก ไม่ให้ทุกภาพซ้อนกัน */
html:not(.js) .hero-bg           { opacity: 0; }
html:not(.js) .hero-bg:first-of-type { opacity: 1; }

/* วงกลมเรืองแสงประกอบฉาก — วางนิ่ง ไม่เคลื่อนไหว เพื่อลดภาระการเรนเดอร์ (blur ถูกวาดครั้งเดียว) */
.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(72px); opacity: .5; pointer-events: none;
}
.hero-orb-1 { width: 420px; height: 420px; background: var(--cyan);   top: -120px; right: -80px; }
.hero-orb-2 { width: 360px; height: 360px; background: var(--purple); bottom: -140px; left: -70px; }
.hero-orb-3 { width: 260px; height: 260px; background: var(--indigo); top: 42%; left: 45%; }

/* ลายกริดจาง ๆ ทับพื้นหลัง */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
}

.hero-inner { position: relative; z-index: 3; }

.hero-title {
  font-size: clamp(1.85rem, 1.1rem + 2.9vw, 3.35rem);
  font-weight: 700; line-height: 1.18;
  text-shadow: 0 4px 26px rgba(0, 0, 0, .25);
}
.hero-sub {
  font-size: clamp(.98rem, .9rem + .35vw, 1.16rem);
  color: rgba(255, 255, 255, .9);
  max-width: 620px; line-height: 1.75;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: .45rem 1.05rem;
  font-size: .85rem; font-weight: 500;
}

/* ตัวควบคุมสไลด์ */
/* จุดบอกสไลด์: ยกเลิก position:absolute ของ Bootstrap ให้ไหลอยู่ใต้เนื้อหา */
.hero .carousel-indicators {
  position: static;
  margin: 1.25rem 0 0;
  justify-content: flex-start;
}
.hero .carousel-indicators [data-bs-target] {
  width: 34px; height: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .45); border: none;
  transition: background .3s, width .3s;
}
.hero .carousel-indicators .active { background: #fff; width: 52px; }

.hero .carousel-control-prev,
.hero .carousel-control-next { width: 5%; opacity: .55; }
.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover { opacity: 1; }

/* ============================================================
   กล่องเข้าสู่ระบบบนหน้าแรก
   ============================================================ */
.login-card {
  background: rgba(255, 255, 255, .97);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(11, 19, 84, .4);
  border: 1px solid rgba(255, 255, 255, .6);
  overflow: hidden;
  /* การ์ดนี้วางอยู่บน .hero ซึ่งกำหนด color:#fff — ต้องรีเซ็ตกลับเป็นสีตัวอักษรปกติ
     มิฉะนั้น label และข้อความจะกลายเป็นสีขาวบนพื้นขาว */
  color: var(--ink);
}
.login-card .form-label,
.login-card .form-check-label { color: var(--ink); }
.login-card-head {
  background: var(--brand-gradient-2);
  color: #fff;
  padding: 1.35rem 1.5rem;
  position: relative; overflow: hidden;
}
.login-card-head::after {
  content: ''; position: absolute; width: 150px; height: 150px;
  background: rgba(255, 255, 255, .12); border-radius: 50%;
  top: -60px; right: -40px;
}

.form-control, .form-select {
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  padding: .65rem .9rem;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 .22rem rgba(67, 97, 238, .16);
}
.form-label { font-weight: 500; font-size: .92rem; margin-bottom: .35rem; }

.input-icon { position: relative; }
.input-icon .bi {
  position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); pointer-events: none; z-index: 4;
}
.input-icon .form-control { padding-left: 2.6rem; }

/* ============================================================
   สถิติ
   ============================================================ */
.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.4rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
  transition: transform .28s, box-shadow .28s;
}
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.stat-card::after {
  content: ''; position: absolute; right: -28px; top: -28px;
  width: 110px; height: 110px; border-radius: 50%;
  background: var(--brand-gradient); opacity: .07;
}
.stat-icon {
  width: 52px; height: 52px; border-radius: 15px;
  display: grid; place-items: center;
  font-size: 1.5rem; color: #fff;
  background: var(--brand-gradient);
  box-shadow: var(--shadow-brand);
  margin-bottom: .9rem;
}
.stat-value { font-size: 2rem; font-weight: 700; line-height: 1; font-family: var(--bs-body-font-family); }
.stat-label { color: var(--ink-soft); font-size: .88rem; margin-top: .3rem; }

/* ============================================================
   ข่าว
   ============================================================ */
.news-img {
  height: 190px; width: 100%; object-fit: cover;
  background: var(--brand-gradient);
}
/* รูปหน้าปกผลงาน — แสดงเต็มอัตราส่วนของภาพ ไม่ครอบตัด */
.work-cover {
  width: 100%; height: auto; display: block;
  object-fit: contain;
  background: var(--surface-2);
  border-top-left-radius: inherit; border-top-right-radius: inherit;
}
/* กล่อง PDF ใช้คลาสเดียวกับรูปภาพ จึงต้องตัดมุมให้ canvas ข้างในตามไปด้วย */
.work-cover.pdf-preview { overflow: hidden; }

/* ไฟล์ PDF ที่เรนเดอร์เป็นภาพแล้ว — ให้แสดงเต็มอัตราส่วนเท่ากับโปสเตอร์ที่เป็นไฟล์รูปภาพ */
.pdf-preview { display: block; background: var(--surface-2); }
.pdf-preview .pdf-page {
  display: block;
  width: 100%;
  height: auto;      /* คงอัตราส่วนของหน้ากระดาษ ไม่ยืดไม่ครอบตัด */
}
/* หน้ารายละเอียดผลงาน: เอกสารหลายหน้าเรียงต่อกันลงมา */
.pdf-preview-doc { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pdf-preview-doc .pdf-page + .pdf-page { margin-top: .75rem; }

/* การ์ดผลงานที่ไฟล์เป็น PDF — แถบสำรองเมื่อเบราว์เซอร์แสดง PDF ไม่ได้ */
.work-pdf-cover {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; text-decoration: none;
  min-height: 190px; padding: 1.5rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  border-top-left-radius: inherit; border-top-right-radius: inherit;
  color: var(--ink-soft); font-size: .88rem; text-align: center;
  transition: background .18s, color .18s;
}
.work-pdf-cover i { font-size: 2.6rem; color: #c1121f; }
.work-pdf-cover:hover { background: var(--surface-3); color: var(--ink); }
/* ในอัลบั้มภาพ ช่องเป็นสี่เหลี่ยมจัตุรัส แถบสำรองต้องเต็มช่อง */
.gallery-tile .pdf-preview { width: 100%; height: 100%; }
.gallery-tile .work-pdf-cover { height: 100%; min-height: 0; border: 0; }
/* เรนเดอร์เสร็จแล้วให้ภาพเต็มช่องแบบเดียวกับโปสเตอร์ที่เป็นไฟล์รูปภาพ */
.gallery-tile .pdf-preview-ready .pdf-page { width: 100%; height: 100%; object-fit: cover; }

/* ปุ่มครอบรูปผลงาน — มีไอคอนแว่นขยายตอนชี้เมาส์ */
.work-zoom, .work-thumb-link { position: relative; cursor: zoom-in; overflow: hidden;
  border-top-left-radius: inherit; border-top-right-radius: inherit; }
.work-thumb-link { cursor: pointer; }
.work-zoom-hint {
  position: absolute; right: 10px; bottom: 10px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(17, 20, 45, .62); color: #fff; font-size: 1.05rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.work-zoom:hover .work-zoom-hint,
.work-zoom:focus-visible .work-zoom-hint,
.work-thumb-link:hover .work-zoom-hint,
.work-thumb-link:focus-visible .work-zoom-hint { opacity: 1; transform: translateY(0); }

/* พื้นที่แสดงภาพในหน้าต่างซูม — เลื่อนดูได้ทั้งแนวตั้ง/แนวนอน
   ค่าเริ่มต้นคือ "พอดีความกว้าง" ภาพสูง ๆ (โปสเตอร์แนวตั้ง) จึงเลื่อนลงอ่านได้ ไม่ถูกย่อจนเล็ก */
.zoom-stage {
  position: relative; overflow: auto;
  background: #11142d;
  min-height: 60vh; height: 74vh;
  text-align: center;
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.35) transparent;
  overscroll-behavior: contain;   /* ไม่ให้เลื่อนทะลุไปหน้าเบื้องหลัง */
  /* หน้าเว็บตั้ง scroll-behavior: smooth ไว้ ซึ่งทำให้การลากเลื่อนภาพหน่วง
     จึงบังคับเป็น auto เฉพาะกรอบนี้ ให้ภาพเลื่อนตามมือทันที */
  scroll-behavior: auto;
}
.zoom-stage.is-dragging { cursor: grabbing; }
.zoom-stage img {
  display: block; margin: 0 auto;
  width: 100%; max-width: none; height: auto;   /* ความกว้างคุมด้วย JS ตามระดับซูม */
  user-select: none; -webkit-user-drag: none;
}
/* แถบเลื่อนให้เข้ากับพื้นหลังเข้ม */
.zoom-stage::-webkit-scrollbar { width: 10px; height: 10px; }
.zoom-stage::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.32); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
.zoom-stage::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.5); background-clip: content-box; }
.zoom-stage::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 991.98px) { .zoom-stage { height: 68vh; } }
.news-thumb-fallback {
  height: 190px;
  background: var(--brand-gradient);
  display: grid; place-items: center;
  color: rgba(255, 255, 255, .85); font-size: 2.6rem;
}
.news-date-chip {
  position: absolute; top: .85rem; left: .85rem;
  background: rgba(255, 255, 255, .95);
  border-radius: 12px; padding: .4rem .65rem;
  text-align: center; line-height: 1.05;
  box-shadow: var(--shadow-sm); min-width: 54px;
}
.news-date-chip .d { font-size: 1.2rem; font-weight: 700; color: var(--indigo); }
.news-date-chip .m { font-size: .68rem; color: var(--ink-soft); }

/* ============================================================
   คู่มือ
   ============================================================ */
.guide-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.15rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  height: 100%;
}
.guide-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(67, 97, 238, .3);
}
.guide-icon {
  width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.4rem; color: #fff; flex: none;
}

/* ============================================================
   แกลเลอรี
   ============================================================ */
.gallery-tile {
  position: relative; display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-sm);
}
.gallery-tile img,
.gallery-tile .ph {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
  display: block;
}
.gallery-tile:hover img,
.gallery-tile:hover .ph { transform: scale(1.09); }

.gallery-tile .ph {
  background: var(--brand-gradient);
  display: grid; place-items: center;
  color: rgba(255,255,255,.9); font-size: 2.4rem;
}

.gallery-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11, 19, 84, .92) 0%, rgba(11, 19, 84, .35) 45%, transparent 75%);
  color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1rem;
  opacity: .95;
  transition: opacity .3s;
}
.gallery-tile:hover .gallery-overlay { opacity: 1; }
.gallery-count {
  position: absolute; top: .75rem; right: .75rem;
  background: rgba(255, 255, 255, .92);
  color: var(--ink); font-size: .74rem; font-weight: 600;
  border-radius: 999px; padding: .22rem .6rem;
}
/* ป้ายกลุ่มสาระบนโปสเตอร์ — พื้นเป็นสีประจำกลุ่ม จึงต้องใช้ตัวอักษรสีขาว */
.gallery-count.gallery-tag {
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* อินโฟกราฟิก — สัดส่วนแนวตั้ง */
.gallery-tile.infographic { aspect-ratio: 3 / 4; }

/* ============================================================
   ตาราง
   ============================================================ */
.table-wrap {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.table-modern { margin: 0; }
.table-modern > thead {
  background: var(--brand-gradient);
}
.table-modern > thead th {
  color: #fff; font-weight: 600; font-size: .88rem;
  border: none; padding: .95rem 1rem; white-space: nowrap;
  vertical-align: middle;
  /* Bootstrap กำหนด background-color: var(--bs-table-bg) (สีขาว) ให้ทุกเซลล์
     ซึ่งจะทับพื้นหลังไล่สีของ thead ทำให้ตัวอักษรสีขาวมองไม่เห็น
     จึงต้องบังคับให้เซลล์หัวตารางโปร่งใส */
  --bs-table-bg: transparent;
  background-color: transparent;
}
.table-modern > tbody > tr { transition: background .18s; }
.table-modern > tbody > tr:hover { background: var(--surface-3); }
.table-modern > tbody td {
  padding: .85rem 1rem;
  vertical-align: middle;
  border-color: var(--line);
  font-size: .93rem;
}

/* ป้ายตัวเลขผู้ลงทะเบียนที่กดดูรายชื่อได้ */
.subj-member-badge { cursor: pointer; transition: filter .18s, transform .18s; }
.subj-member-badge:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* การ์ดกรรมการในหน้ามอบหมาย — กดเพื่อกรองผลงานตามชุดของกรรมการท่านนั้น */
.judge-pick {
  padding: .5rem;
  border-radius: 12px;
  border: 1px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: background .18s, border-color .18s;
}
.judge-pick:hover { background: var(--surface-2); border-color: var(--line); color: inherit; }
.judge-pick.is-active {
  background: color-mix(in srgb, var(--indigo) 10%, #fff);
  border-color: var(--indigo);
}

/* ปุ่มเผยแพร่ขนาดเล็กในช่องผลงาน (หน้าจัดการผู้ใช้) */
.btn-publish-mini {
  font-size: .68rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: none;
}
.btn-publish-mini:hover { transform: none; box-shadow: 0 4px 12px rgba(67, 97, 238, .3); }

/* ไอคอนกลุ่มสาระในตาราง — วงกลมเล็กสีตามที่ตั้งไว้ของแต่ละกลุ่ม */
.subj-dot {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: #fff; font-size: 1rem;
}

/* ============================================================
   Modal
   ============================================================ */
/* modal-dialog-scrollable ของ Bootstrap ต้องให้ header/body/footer เป็นลูกโดยตรง
   ของ .modal-content จึงจะย่อ body แล้วตรึงส่วนหัว/ท้ายไว้ได้
   แต่ฟอร์มในระบบนี้ครอบทั้งสามส่วนไว้ ทำให้ body ไม่ยอมย่อ
   แล้วดันแถบปุ่มด้านล่าง (เช่น ปุ่มบันทึก) ออกไปนอกกรอบจนมองไม่เห็น
   จึงให้ฟอร์มทำหน้าที่เป็นกล่อง flex แทน */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 100%;
}

/* ============================================================
   ผลโหวต — ตารางอันดับผลงานโปสเตอร์
   ============================================================ */
/* เลขอันดับแบบเหรียญ (3 อันดับแรก) */
.vote-rank {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: #fff; font-weight: 700; font-size: .86rem;
  box-shadow: 0 3px 10px rgba(22, 25, 63, .2);
}
.vote-thumb {
  width: 58px; height: 58px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  display: block;
  transition: transform .18s;
}
.vote-thumb:hover { transform: scale(1.06); }
.vote-thumb-empty {
  display: grid; place-items: center;
  color: var(--ink-soft); font-size: 1.2rem;
}
/* ชิปนับแยกตามความรู้สึก */
.vote-chip {
  --vote-color: var(--indigo);
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--vote-color) 35%, transparent);
  background: color-mix(in srgb, var(--vote-color) 10%, #fff);
  color: var(--vote-color);
  font-size: .74rem; font-weight: 600;
  white-space: nowrap;
}
.vote-chip.is-zero {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-weight: 400;
}

/* ============================================================
   แสดงความรู้สึกต่อผลงาน (หน้ารายละเอียดผลงาน)
   ============================================================ */
/* การ์ดนี้อยู่ในคอลัมน์ข้างที่แคบ — ใช้กริดยืดหยุ่นให้ปุ่มเรียงพอดีทุกความกว้าง */
.react-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: .5rem;
}
.react-btn {
  --react-color: var(--indigo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem .75rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.react-btn:hover {
  border-color: var(--react-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(22, 25, 63, .1);
}
.react-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--react-color) 28%, transparent);
}
/* อันที่เลือกไว้ — ใช้สีประจำความรู้สึกนั้น */
.react-btn.is-active {
  border-color: var(--react-color);
  background: color-mix(in srgb, var(--react-color) 12%, #fff);
  color: var(--react-color);
  font-weight: 600;
}
.react-emoji { font-size: 1.15rem; line-height: 1; }
.react-label { flex: 1; text-align: left; white-space: nowrap; }
.react-count {
  min-width: 1.6rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
}
.react-btn.is-active .react-count {
  background: var(--react-color);
  color: #fff;
}
/* ตัวเลขเด้งตอนเปลี่ยนค่า ให้เห็นว่ากดติดแล้ว */
.react-count.bump { animation: react-bump .32s ease; }
@keyframes react-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
/* ระหว่างรอผลจากเซิร์ฟเวอร์ กันกดรัว */
.react-card.is-busy .react-btn { opacity: .6; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .react-btn, .react-count.bump { transition: none; animation: none; }
}

/* ============================================================
   QR code (หน้ารายละเอียดผลงาน)
   ============================================================ */
.qr-box {
  width: 190px; height: 190px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px;
}
.qr-box canvas { display: block; border-radius: 6px; }
/* ลิงก์ยาว ๆ ต้องตัดขึ้นบรรทัดใหม่ ไม่ให้ดันการ์ดกว้างเกิน */
.qr-link {
  font-size: .72rem;
  line-height: 1.5;
  word-break: break-all;
  overflow-wrap: anywhere;
}

@media print {
  /* เวลาพิมพ์ ให้เหลือเฉพาะ QR — ปุ่มกดไม่มีประโยชน์บนกระดาษ */
  .qr-card .btn { display: none !important; }
}

/* ============================================================
   DataTables — ปรับให้เข้ากับธีมของระบบ
   ============================================================ */
/* กล่องควบคุม (ช่องค้นหา / จำนวนแถว) อยู่นอกกรอบตาราง จึงเว้นระยะให้อ่านง่าย */
.dt-container .dt-length label,
.dt-container .dt-search label {
  margin-bottom: 0;
  font-size: .88rem;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: .5rem;
}
.dt-container .dt-search { text-align: right; }
.dt-container .dt-search label { justify-content: flex-end; }
.dt-container .dt-search input,
.dt-container .dt-length select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .45rem .8rem;
  font-size: .9rem;
  color: var(--ink);
  /* ใช้ background-color ไม่ใช่ background แบบย่อ
     ไม่งั้นจะไปลบ background-image ของ .form-select ทำให้ลูกศรของ dropdown หายไป */
  background-color: var(--surface);
}
.dt-container .dt-length select { padding-right: 2.1rem; }
.dt-container .dt-search input { min-width: 240px; }
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, .15);
}
.dt-container .dt-info {
  font-size: .85rem;
  color: var(--ink-soft);
  padding-top: 0 !important;
}

/* กรอบการ์ดที่ให้ DataTables จัดวางเอง — เว้นขอบให้แถบควบคุม แล้วให้เฉพาะตัวตารางเลื่อนแนวนอน */
.table-wrap-dt .dt-container > .row:first-child { padding: 1rem 1rem 0; margin: 0; }
.table-wrap-dt .dt-container > .row:last-child  { padding: 0 1rem 1rem; margin: 0; }
.table-wrap-dt .dt-container > .dt-layout-table { margin: 0; }
/* ช่องที่ครอบตัวตาราง — ต้องเลื่อนแนวนอนได้เอง ไม่ให้ตารางกว้างล้นการ์ด
   (คลาสของ DataTables 2 ไม่ได้ขึ้นต้นด้วย col- จึงต้องอ้างด้วย .dt-layout-full) */
.table-wrap-dt .dt-container > .dt-layout-table > .dt-layout-full {
  padding: 0;
  overflow-x: auto;
  display: block;      /* ทับ d-md-flex ที่ DataTables ใส่มา ไม่งั้นตารางจะถูกบีบ */
}

/* ตัวแบ่งหน้า — ใช้หน้าตาเดียวกับ .pagination-modern ของระบบ */
.dt-container .pagination { justify-content: flex-end; margin: 0; gap: .3rem; }
.dt-container .page-link {
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: .88rem;
  padding: .4rem .75rem;
  transition: background .18s, color .18s, border-color .18s;
}
.dt-container .page-link:hover { background: var(--surface-3); color: var(--indigo); }
.dt-container .page-item.active .page-link {
  background: var(--brand-gradient);
  border-color: transparent;
  color: #fff;
}
.dt-container .page-item.disabled .page-link { opacity: .45; }

/* หัวตารางเป็นพื้นไล่สีเข้ม — ลูกศรเรียงลำดับต้องเป็นสีขาวจึงจะมองเห็น */
table.dataTable > thead th.dt-orderable-asc,
table.dataTable > thead th.dt-orderable-desc { cursor: pointer; }
table.dataTable > thead th .dt-column-order::before,
table.dataTable > thead th .dt-column-order::after { color: #fff; opacity: .45; }
table.dataTable > thead th.dt-ordering-asc .dt-column-order::before,
table.dataTable > thead th.dt-ordering-desc .dt-column-order::after { opacity: 1; }
table.dataTable > thead th.dt-orderable-asc:hover,
table.dataTable > thead th.dt-orderable-desc:hover { background-color: rgba(255, 255, 255, .1) !important; }
/* DataTables ใส่เส้นใต้หัวตารางเองซึ่งตัดกับพื้นไล่สี จึงเอาออก */
table.dataTable.table-modern > thead > tr > th { border-bottom: none; }

@media (max-width: 575.98px) {
  .dt-container .dt-search,
  .dt-container .dt-search label { text-align: left; justify-content: flex-start; }
  .dt-container .dt-search input { min-width: 0; width: 100%; }
  .dt-container .pagination { justify-content: center; }
}

/* ============================================================
   Pagination แบบทันสมัย (ปุ่มกลม/พิลล์ + ไล่สีแบรนด์เมื่อ active)
   ============================================================ */
.pagination-modern {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px; margin: 0; list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.pagination-modern .page-item { margin: 0; }
.pagination-modern .page-link {
  --bs-pagination-focus-box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px;
  border: none; border-radius: 999px;
  background: transparent; color: var(--ink);
  font-size: .9rem; font-weight: 600; line-height: 1;
  transition: background .18s, color .18s, transform .12s;
}
.pagination-modern .page-link:hover {
  background: var(--surface-3); color: var(--ink); transform: translateY(-1px);
}
.pagination-modern .page-item.active .page-link {
  background: var(--brand-gradient); color: #fff;
  box-shadow: 0 4px 12px rgba(67, 97, 238, .35);
}
.pagination-modern .page-item.disabled .page-link {
  background: transparent; color: var(--ink-soft); opacity: .45;
  pointer-events: none; box-shadow: none;
}
@media (max-width: 575.98px) {
  .pagination-modern .page-link { min-width: 34px; height: 34px; padding: 0 9px; font-size: .84rem; }
}

/* แถบสีซ้ายของแถวปฏิทิน */
.cal-accent {
  width: 5px; border-radius: 999px; height: 34px; flex: none;
}
tr.is-today { background: rgba(76, 201, 240, .12) !important; }
tr.is-past  { opacity: .62; }

/* ============================================================
   ป้าย
   ============================================================ */
.badge { font-weight: 500; border-radius: 8px; padding: .38em .7em; }
.badge-soft { font-size: .78rem; }

.badge.text-bg-success   { background: rgba(25, 135, 84, .13) !important;  color: #0f5132 !important; }
.badge.text-bg-warning   { background: rgba(255, 193, 7, .18) !important;  color: #8a6100 !important; }
.badge.text-bg-danger    { background: rgb(255, 255, 255) !important;  color: #ff001a !important; }
.badge.text-bg-info      { background: rgba(76, 201, 240, .18) !important; color: #0b6a86 !important; }
.badge.text-bg-secondary { background: rgba(91, 96, 131, .13) !important;  color: #454a6b !important; }
.badge.text-bg-primary   { background: rgba(67, 97, 238, .14) !important;  color: #1e2a8a !important; }

/* ============================================================
   Avatar
   ============================================================ */
.avatar {
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 600;
  flex: none;
  object-fit: cover;
  overflow: hidden;
}
.avatar-sm { width: 34px; height: 34px; font-size: .9rem; }
.avatar-md { width: 46px; height: 46px; font-size: 1.05rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.4rem; }
.avatar-xl { width: 92px; height: 92px; font-size: 2rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Dashboard layout
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 268px; flex: none;
  background: linear-gradient(175deg, #0b1354 0%, #1e2a8a 55%, #3a0ca3 100%);
  color: rgba(255, 255, 255, .82);
  position: fixed; top: 0; bottom: 0; left: 0;
  z-index: 1040;
  display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
.sidebar::before {
  content: ''; position: absolute; width: 260px; height: 260px;
  background: var(--purple); filter: blur(90px); opacity: .4;
  bottom: -60px; left: -60px; pointer-events: none;
}
.sidebar-head {
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  position: relative; z-index: 2;
}
.sidebar-body { padding: 1rem .8rem; overflow-y: auto; flex: 1; position: relative; z-index: 2; }
.sidebar-foot {
  padding: .9rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  position: relative; z-index: 2;
}

.sidebar-section {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255, 255, 255, .42); font-weight: 600;
  padding: .9rem .85rem .4rem;
}
.sidebar-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .68rem .85rem;
  border-radius: 11px;
  color: rgba(255, 255, 255, .8);
  font-size: .93rem; font-weight: 500;
  transition: background .2s, color .2s, transform .2s;
  position: relative;
}
.sidebar-link .bi { font-size: 1.08rem; width: 20px; text-align: center; flex: none; }
.sidebar-link:hover { background: rgba(255, 255, 255, .1); color: #fff; transform: translateX(3px); }
.sidebar-link.active {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.sidebar-link.active::before {
  content: ''; position: absolute; left: -0.8rem; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 999px; background: var(--cyan);
}
.sidebar-link .badge { margin-left: auto; }

.app-main {
  flex: 1;
  margin-left: 268px;
  min-width: 0;
  display: flex; flex-direction: column;
}

.topbar {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding: .8rem 1.4rem;
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: 1rem;
}
.app-content { padding: 1.6rem 1.4rem 3rem; flex: 1; }

.page-head {
  background: var(--brand-gradient);
  border-radius: var(--radius);
  color: #fff;
  padding: 1.6rem 1.75rem;
  margin-bottom: 1.5rem;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-brand);
}
.page-head::after {
  content: ''; position: absolute; width: 260px; height: 260px;
  border-radius: 50%; background: rgba(255, 255, 255, .1);
  top: -110px; right: -60px;
}
.page-head h1 { font-size: 1.5rem; margin: 0; font-weight: 600; }
.page-head p  { margin: .3rem 0 0; color: rgba(255, 255, 255, .84); font-size: .92rem; }
.page-head > * { position: relative; z-index: 2; }

.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(11, 19, 84, .5);
  backdrop-filter: blur(2px);
  z-index: 1035;
  display: none;
}

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .app-main { margin-left: 0; }
  .sidebar-backdrop.show { display: block; }
}

/* ============================================================
   หน้าประเมิน
   ============================================================ */
.criterion-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: var(--surface);
  transition: border-color .25s, box-shadow .25s;
}
.criterion-card:focus-within {
  border-color: var(--indigo);
  box-shadow: 0 0 0 .2rem rgba(67, 97, 238, .12);
}
.criterion-no {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--brand-gradient); color: #fff;
  display: grid; place-items: center;
  font-weight: 600; font-size: .92rem; flex: none;
}
.weight-chip {
  background: rgba(114, 9, 183, .1);
  color: var(--purple);
  border-radius: 999px;
  padding: .2rem .65rem;
  font-size: .76rem; font-weight: 600;
}

.score-range { accent-color: var(--indigo); }
input[type=range].form-range::-webkit-slider-thumb { background: var(--indigo); }
input[type=range].form-range::-moz-range-thumb     { background: var(--indigo); }

.score-bubble {
  min-width: 84px; text-align: center;
  background: var(--brand-gradient);
  color: #fff; border-radius: 12px;
  padding: .45rem .5rem;
  font-weight: 700; font-family: var(--bs-body-font-family);
  box-shadow: var(--shadow-brand);
}

/* วงกลมแสดงคะแนนรวม */
.score-ring {
  width: 128px; height: 128px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--indigo) calc(var(--pct) * 1%), var(--surface-3) 0);
  position: relative;
  margin-inline: auto;
}
.score-ring::before {
  content: ''; position: absolute; inset: 10px;
  background: var(--surface); border-radius: 50%;
}
.score-ring > * { position: relative; z-index: 2; text-align: center; }

/* ============================================================
   อันดับ
   ============================================================ */
.rank-badge {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 700; font-family: var(--bs-body-font-family);
  background: var(--surface-3); color: var(--ink-soft);
  flex: none;
}
.rank-1 { background: linear-gradient(135deg, #ffd700, #ffa000); color: #fff; box-shadow: 0 8px 22px rgba(255, 167, 0, .4); }
.rank-2 { background: linear-gradient(135deg, #c4cdd8, #8d9aa8); color: #fff; box-shadow: 0 8px 22px rgba(141, 154, 168, .4); }
.rank-3 { background: linear-gradient(135deg, #e0a06b, #b06f3c); color: #fff; box-shadow: 0 8px 22px rgba(176, 111, 60, .4); }

/* ============================================================
   ผู้ส่งผลงาน
   ============================================================ */
.person-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem;
  height: 100%;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.person-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: rgba(114, 9, 183, .28);
}

/* ============================================================
   Timeline
   ============================================================ */
.timeline { position: relative; padding-left: 1.9rem; }
.timeline::before {
  content: ''; position: absolute; left: .48rem; top: .3rem; bottom: .3rem;
  width: 2px; background: linear-gradient(var(--indigo), var(--purple));
  border-radius: 999px;
}
.timeline-item { position: relative; padding-bottom: 1.4rem; }
.timeline-item::before {
  content: ''; position: absolute; left: -1.68rem; top: .32rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid var(--indigo);
}
.timeline-item.done::before { background: var(--indigo); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: linear-gradient(160deg, #0b1354 0%, #1e2a8a 60%, #3a0ca3 100%);
  color: rgba(255, 255, 255, .72);
  position: relative; overflow: hidden;
}
.site-footer::before {
  content: ''; position: absolute; width: 380px; height: 380px;
  background: var(--purple); filter: blur(110px); opacity: .35;
  top: -140px; right: -90px;
}
.site-footer a { color: rgba(255, 255, 255, .72); transition: color .2s, padding-left .2s; }
.site-footer a:hover { color: #fff; }
.site-footer h5, .site-footer h6 { color: #fff; }
.footer-link { display: block; padding: .3rem 0; font-size: .92rem; }
.footer-link:hover { padding-left: .35rem; }

/* ---- ส่วนแบรนด์ใน footer ----
   .brand-badge ถูกตั้ง width:100% + flex:none ไว้เพื่อโลโก้บน navbar
   ถ้าใช้ค่านั้นตรง ๆ ใน footer โลโก้จะกินเต็มคอลัมน์แล้วดันข้อความไปทับคอลัมน์ถัดไป
   จึงกำหนดขนาดเฉพาะที่นี่ และให้ข้อความตัดบรรทัดอยู่ในคอลัมน์ตัวเอง */
.site-footer .footer-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: .75rem;
}
.site-footer .footer-brand .brand-badge {
  width: 210px; max-width: 100%; height: auto;
}
.site-footer .footer-brand-text { min-width: 0; max-width: 100%; }
.site-footer .footer-brand-text > div:first-child {
  font-size: 1.02rem; line-height: 1.5;
}
/* ชื่อ/คำบรรยายที่ยาวมาก (หรือเป็นคำภาษาอังกฤษยาว ๆ) ต้องตัดบรรทัดได้ ไม่ล้นออกนอกคอลัมน์ */
.site-footer .footer-brand-text,
.site-footer .footer-desc {
  overflow-wrap: anywhere; word-break: break-word;
}
.site-footer .min-w-0 { min-width: 0; overflow-wrap: anywhere; }
.site-footer .flex-none { flex: none; }
.social-btn {
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  display: grid; place-items: center;
  color: #fff !important; font-size: 1.05rem;
  transition: background .25s, transform .25s;
}
.social-btn:hover { background: var(--indigo); transform: translateY(-3px); }

/* ============================================================
   Empty state
   ============================================================ */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }
.empty-state .bi { font-size: 3.2rem; color: var(--line); display: block; margin-bottom: .75rem; }

/* ============================================================
   Utilities / Animation
   ============================================================ */
/* กล่องลูกใน flex ต้องมี min-width:0 ไม่งั้นค่าเริ่มต้น (auto) จะทำให้หดไม่ได้
   ผลคือ .text-truncate ไม่ทำงาน และเนื้อหายาว ๆ จะดันปุ่มข้าง ๆ ล้นออกนอกกรอบ
   (Bootstrap ไม่มียูทิลิตี้สองตัวนี้ให้ ต้องประกาศเอง) */
.min-w-0  { min-width: 0; }
.flex-none { flex: none; }

.hover-lift { transition: transform .25s, box-shadow .25s; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.divider-wave { display: block; width: 100%; height: auto; margin-bottom: -1px; }

/* Reveal on scroll — เป็น progressive enhancement เท่านั้น
   เนื้อหาจะ "แสดงผลปกติ" หากไม่มี JavaScript (ไม่มีคลาส .js บน <html>)
   จึงไม่มีทางที่หน้าเว็บจะว่างเปล่าเมื่อสคริปต์ไม่ทำงาน */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-3); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--indigo), var(--purple)); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--blue), var(--purple)); }

/* พิมพ์ */
@media print {
  .sidebar, .topbar, .navbar-main, .site-footer, .no-print { display: none !important; }
  .app-main { margin-left: 0; }
  .card, .table-wrap { box-shadow: none; border: 1px solid #ddd; }
}

/* ============================================================
   ตัวเลือกประเภทผู้ส่งนวัตกรรม (radio แบบการ์ด) หน้าสมัครสมาชิก
   ============================================================ */
.present-option {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s, color .2s;
  margin: 0;
}
.present-option .bi:first-child { color: var(--indigo); transition: color .2s; }
.present-option:hover { border-color: rgba(67, 97, 238, .5); background: var(--surface-2); }

/* เครื่องหมายถูก — ซ่อนไว้จนกว่าจะเลือก */
.present-check {
  color: var(--indigo);
  font-size: 1.35rem;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s, transform .2s;
}

/* สถานะเลือกแล้ว: กรอบ+พื้นสีแบรนด์ ตัวหนา และเครื่องหมายถูกโผล่ */
.btn-check:checked + .present-option {
  border-color: var(--indigo);
  background: rgba(67, 97, 238, .09);
  color: var(--indigo);
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(67, 97, 238, .16);
}
.btn-check:checked + .present-option .present-check {
  opacity: 1;
  transform: scale(1);
}

/* โฟกัสด้วยคีย์บอร์ด ให้เห็นขอบชัด */
.btn-check:focus-visible + .present-option {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, .25);
}