:root{
  --maroon:#d62828;
  --deep-red:#9b2226;
  --navy:#0d533f;
  --purple:#006d77;
  --gold:#ffb703;
  --ice:#f0fdfa;
  --ink:#1f2937;

  /* โทนไล่สีเดียวกับ Footer */
  --le-grad: linear-gradient(120deg, rgba(13, 83, 63, .98), rgba(0, 109, 119, .80), rgba(46, 196, 182, .65));
}

/* =========================
   Base
========================= */
body{
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--ink);
  background:#f8fafc;
}
.bg-navy{ background:var(--navy)!important; }

.btn-maroon{ background:var(--maroon); border-color:var(--maroon); color:#fff; }
.btn-maroon:hover{ background:var(--deep-red); border-color:var(--deep-red); color:#fff; }
.badge-gold{ background:var(--gold); color:#000; }

.card-soft{
  border:0;
  border-radius:18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card-soft:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(0,0,0,.10);
}

.section-title{
  background: var(--maroon);
  color:#fff;
  padding:.65rem 1rem;
  border-radius:14px;
  display:block;
  font-weight:800;
}

/* =========================
   TOPBAR (Responsive + same tone)
========================= */
.le-topbar{
  background: var(--le-grad);
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.le-topbar a{ color: rgba(255,255,255,.85); text-decoration:none; }
.le-topbar a:hover{ color:#fff; text-decoration:underline; }
.le-topbar .le-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .6rem;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}
.le-topbar .le-pill i{ opacity:.95; }
@media (max-width:576px){
  .le-topbar .le-pill{ padding:.32rem .52rem; }
  .le-topbar .le-pill .small{ font-size:.82rem; }
}

/* =========================
   NAVBAR (Solid Always – มือถือกดง่าย)
========================= */
.le-navbar.le-navbar-float{
  position: sticky;
  top: 0;
  z-index: 1030;
}
.le-navbar{
  background: rgba(9, 60, 46, .98) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px rgba(0,0,0,.16);
}

.le-navbar .navbar-brand .le-brand-title{ font-weight:900; letter-spacing:.2px; }
.le-navbar .nav-link{
  color: rgba(255,255,255,.86)!important;
  font-weight:800;
  padding:.55rem .85rem;
  border-radius:12px;
  transition: background .18s ease, color .18s ease;
}
.le-navbar .nav-link:hover{
  color:#fff!important;
  background: rgba(255,255,255,.10);
}
.le-navbar .nav-link.active{
  color:#fff!important;
  background: rgba(255,255,255,.16);
}
@media (max-width:991px){
  /* มือถือ: เพิ่มระยะกด + เว้นซ้ายขวา */
  .le-navbar .navbar-nav{ padding-top:.35rem; padding-bottom:.5rem; }
  .le-navbar .nav-link{ padding:.7rem .9rem; }
}

.le-program-badge{
  height:54px; width:54px;
  border-radius:999px;
  padding:6px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center;
}
.le-program-badge img{
  height:100%; width:100%;
  object-fit:cover;
  border-radius:999px;
}
@media (max-width:576px){
  .le-program-badge{ height:48px; width:48px; padding:5px; }
}

.le-lang a{
  text-decoration:none;
  padding:.35rem .65rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight:900;
  font-size:.85rem;
  margin-left:.35rem;
  transition: background .18s ease, transform .18s ease;
}
.le-lang a:hover{ transform: translateY(-1px); }
.le-lang a.active{ background: rgba(255,255,255,.18); }

/* =========================
   HERO (Responsive)
========================= */
/* ===== HERO TITLE: Glass (โปร่งใส + เบลอ) ===== */
.hero-title-chip,
.hero-sub-chip{
  display:inline-block;
  max-width:100%;

  /* glass look */
  background: rgba(255,255,255,.14);           /* โปร่งใส */
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* accent นิด ๆ ให้โทนไวน์ */
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);

  color:#fff;
  padding:.48rem .9rem;
  border-radius:16px;
  line-height:1.15;

  white-space:normal;
  word-break:break-word;
}

/* Subtitle: โปร่งกว่า + เรียบหรู */
.hero-sub-chip{
  margin-top:.45rem;

  /* ผสมสีส้มอิฐแบบนุ่ม ๆ */
  background: rgba(224,90,16,.16);
  border: 1px solid rgba(255,255,255,.18);

  font-weight:800;
  font-size:1.05rem;
  border-radius:14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

/* =========================
   Activities / List / Detail (Responsive)
========================= */
.content-narrow{ max-width: 980px; margin: 0 auto; }
@media (min-width: 992px){ .content-narrow{ padding-left: 6px; padding-right: 6px; } }

.page-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:.75rem; flex-wrap:wrap; margin-bottom: 12px;
}
.page-title{ font-weight: 900; letter-spacing: .2px; margin: 0; }
.page-sub{ color: #6b7280; font-size: .95rem; }
.toolbar{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }

.search-pill{
  display:flex; gap:.5rem; align-items:center;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:999px;
  padding:.35rem .6rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.search-pill input{
  border:0; outline:0;
  min-width: 240px;
  background: transparent;
}
@media (max-width: 576px){ .search-pill input{ min-width: 160px; } }
.search-pill .btn{ border-radius:999px; }

.activity-cover{ position:relative; height:240px; overflow:hidden; }
.activity-cover img{
  width:100%; height:100%;
  object-fit:contain;
  background:#fff;
  transition: transform .25s ease, filter .25s ease;
}
.activity-grid .card:hover .activity-cover img{
  transform: scale(1.04);
  filter: saturate(1.06) contrast(1.03);
}
.date-chip{
  position:absolute; left:12px; bottom:12px;
  padding:.33rem .6rem; border-radius:999px;
  background: rgba(0,0,0,.55); color:#fff; font-size:.85rem;
  backdrop-filter: blur(4px);
}
.clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:44px;
}

.detail-hero{
  overflow:hidden;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.detail-hero img{
  width:100%;
  max-height: 460px;
  object-fit:cover;
  display:block;
}
@media (max-width:576px){
  .detail-hero img{ max-height:320px; }
}

.meta-row{
  display:flex; flex-wrap:wrap;
  gap:.75rem 1rem;
  color:#6b7280;
  font-size:.9rem;
  margin-bottom: 10px;
}

/* Gallery thumbs responsive */
.gallery-grid img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.07);
  transition: transform .18s ease;
}
.gallery-grid a:hover img{ transform: translateY(-3px); }
@media (max-width:576px){
  .gallery-grid img{ height:130px; }
}

/* Pagination */
.pagination .page-link{
  border-radius: 12px;
  margin: 0 4px;
  border-color: rgba(15,23,42,.10);
}

/* Lightbox modal */
.lightbox-modal .modal-content{ background: rgba(0,0,0,.92); border:0; border-radius:18px; }
.lightbox-modal .modal-body{ padding:0; position:relative; }
.lightbox-modal .lb-img{ width:100%; height:80vh; object-fit:contain; display:block; background:#000; }
@media (max-width:576px){ .lightbox-modal .lb-img{ height:72vh; } }
.lightbox-modal .lb-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:.65rem .9rem; color:#fff; font-size:.9rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 70%);
}
.lightbox-modal .lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35); color:#fff;
  display:grid; place-items:center; cursor:pointer; z-index:5;
}
.lightbox-modal .lb-prev{ left:14px; }
.lightbox-modal .lb-next{ right:14px; }
.lightbox-modal .lb-close{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35); color:#fff;
  display:grid; place-items:center; cursor:pointer; z-index:6;
}
.gallery-grid a{ cursor: zoom-in; }

/* =========================
   Program Gallery
========================= */
.program-gallery .card{ border-radius:12px; overflow:hidden; border:0; }
.program-thumb{ display:block; position:relative; overflow:hidden; }
.program-thumb img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
  transition:transform .36s cubic-bezier(.2,.8,.2,1), filter .25s ease;
}
.program-thumb:hover img{ transform:scale(1.03); filter:blur(3px) brightness(.6); }
.thumb-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:0.5rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 60%);
  color:#fff;
  transform:translateY(6px);
  transition:transform .22s ease, opacity .22s ease;
  opacity:0;
}
.program-thumb:hover .thumb-overlay{ transform:translateY(0); opacity:1; }

/* =========================
   Staff (Responsive)
 ========================= */
.staff-controls{
  display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin-bottom:2rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  padding: 0.75rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
.staff-search{ flex:1 1 320px; border-radius: 999px!important; }
.staff-filter{ width:220px; border-radius: 999px!important; }
@media (max-width:576px){
  .staff-filter{ width:100%; }
}

/* Inset Card Design to match screenshot exactly */
.staff-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  border-radius: 16px;
  padding: 1.25rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.staff-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(13, 83, 63, 0.1);
  border-color: rgba(13, 83, 63, 0.15);
}

.staff-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  height: 260px;
  margin-bottom: 1rem;
}
.staff-hero-img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.staff-card:hover .staff-hero-img {
  transform: scale(1.04);
}

@media (min-width:1200px){
  .staff-hero{ height: 300px; }
}

/* Chair Spotlight Card */
.staff-card-chair {
  border: 1.5px solid var(--maroon);
  box-shadow: 0 8px 24px rgba(224, 90, 16, 0.08);
}
.staff-card-chair:hover {
  border-color: var(--deep-red);
  box-shadow: 0 20px 45px rgba(224, 90, 16, 0.15);
}
.staff-card-chair .staff-hero {
  border-color: rgba(224, 90, 16, 0.18);
  height: 280px;
}
@media (min-width:1200px){
  .staff-card-chair .staff-hero { height: 320px; }
}

/* Badges */
.badge-chair {
  background: var(--maroon);
  color: #ffffff;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  box-shadow: 0 2px 6px rgba(224, 90, 16, 0.2);
  transition: background 0.3s ease;
  border: 0;
}
.staff-card-chair:hover .badge-chair {
  background: var(--deep-red);
}

.badge-regular {
  background: rgba(13, 83, 63, 0.06);
  color: var(--navy);
  font-weight: 600;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  border: 1px solid rgba(13, 83, 63, 0.08);
  transition: all 0.3s ease;
}
.staff-card:hover .badge-regular {
  background: rgba(13, 83, 63, 0.1);
  border-color: rgba(13, 83, 63, 0.15);
}

/* Hover Button Overlay */
.staff-overlay-btn {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translate(-50%, 10px);
  background: linear-gradient(135deg, var(--navy), rgba(13, 83, 63, 0.9));
  color: #fff;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  box-shadow: 0 8px 16px rgba(13, 83, 63, 0.2);
  z-index: 5;
}
.staff-card:hover .staff-overlay-btn {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Smooth Entrance Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.staff-item {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.staff-chair-row .staff-item {
  animation-duration: 0.9s;
}

/* Staggered load delays */
.staff-item:nth-child(1) { animation-delay: 0.05s; }
.staff-item:nth-child(2) { animation-delay: 0.1s; }
.staff-item:nth-child(3) { animation-delay: 0.15s; }
.staff-item:nth-child(4) { animation-delay: 0.2s; }
.staff-item:nth-child(5) { animation-delay: 0.25s; }
.staff-item:nth-child(6) { animation-delay: 0.3s; }
.staff-item:nth-child(7) { animation-delay: 0.35s; }

/* Staff tags */
.staff-tag {
  background: rgba(13, 83, 63, 0.05);
  color: var(--navy);
  font-size: 0.76rem;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 500;
  border: 1px solid rgba(13, 83, 63, 0.08);
}
.staff-card-chair .staff-tag {
  background: rgba(224, 90, 16, 0.07);
  color: var(--maroon);
  border-color: rgba(224, 90, 16, 0.12);
}

/* Premium Modal styling */
.modal-content-premium {
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
}
.modal-accent-line {
  height: 6px;
  background: linear-gradient(90deg, var(--navy), var(--maroon), var(--gold));
  width: 100%;
}

/* =========================
   Footer (Responsive)
========================= */
.le-footer{ position:relative; }
.le-footer-top{ background: var(--le-grad); color:#fff; }
.le-footer-bottom{ background: rgba(9, 60, 46, .98); border-top:1px solid rgba(255,255,255,.10); }

.le-footer-link{
  display:flex; align-items:center; gap:.25rem;
  padding:.45rem .5rem; border-radius:12px;
  color: rgba(255,255,255,.82); text-decoration:none;
  transition: background .18s ease, transform .18s ease;
}
.le-footer-link:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); color:#fff; }

.le-backtop{
  position: fixed; right: 18px; bottom: 18px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
  display:grid; place-items:center;
  opacity: 0; transform: translateY(10px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 999;
}
.le-backtop.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.le-backtop:hover{ transform: translateY(-2px); }


/* =========================
   Horizontal Activities Row (mobile swipe + desktop arrows)
========================= */
.act-row{
  position: relative;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 2px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.act-row::-webkit-scrollbar{ height: 10px; }
.act-row::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.16);
  border-radius: 999px;
}
.act-item{
  flex: 0 0 86%;
  max-width: 86%;
  scroll-snap-align: start;
}
@media (min-width:576px){
  .act-item{ flex-basis: 60%; max-width: 60%; }
}
@media (min-width:992px){
  .act-item{ flex-basis: 32%; max-width: 32%; }
}

/* card */
.act-card{ border-radius:18px; overflow:hidden; }
.act-cover{ height: 210px; position: relative; overflow:hidden; }
.act-cover img{ width:100%; height:100%; object-fit:contain; background:#fff; transition: transform .25s ease, filter .25s ease; }
.act-card:hover .act-cover img{ transform: scale(1.04); filter:saturate(1.06) contrast(1.03); }

.act-date{
  position:absolute; left:12px; bottom:12px;
  padding:.35rem .6rem;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  color:#fff;
  font-size:.85rem;
  backdrop-filter: blur(4px);
}
.act-title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: 44px;
}

/* desktop arrows */
.act-arrows{
  display:none;
  gap:10px;
}
@media (min-width:992px){
  .act-arrows{ display:flex; }
}
.act-btn{
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  display:grid; place-items:center;
  transition: transform .18s ease, background .18s ease;
}
.act-btn:hover{ transform: translateY(-2px); background: rgba(255,255,255,.9); }
.act-btn:active{ transform: translateY(0); }


/* ===== Sticky Footer (footer อยู่ล่างสุดของจอเสมอ) ===== */
html, body { height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ให้เนื้อหาหลักดัน footer ลงล่าง */
main{
  flex: 1 0 auto;
}

/* footer อยู่ท้ายสุดเสมอ */
.le-footer{
  margin-top: auto;
  flex-shrink: 0;
}