:root{
  --maroon:#D03050;
  --deep-red:#B03030;
  --navy:#005080;
  --purple:#903070;
  --gold:#F0C000;
  --ice:#D0F0F0;
  --ink:#1f2937;

  /* โทนไล่สีเดียวกับ Footer */
  --le-grad: linear-gradient(120deg, rgba(0,80,128,.98), rgba(144,48,112,.55), rgba(208,48,80,.55));
}

/* =========================
   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(0,80,128,.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(208,48,80,.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:220px; overflow:hidden; }
.activity-cover img{
  width:100%; height:100%;
  object-fit:cover;
  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:1rem; }
.staff-search{ flex:1 1 320px; }
.staff-filter{ width:220px; }
@media (max-width:576px){
  .staff-filter{ width:100%; }
}

.staff-card{ transition:transform .18s ease, box-shadow .18s ease; overflow:hidden; border-radius:14px; }
.staff-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(15,23,42,.08); }

.staff-hero{
  display:flex; align-items:center; justify-content:center;
  background:#fff; overflow:hidden;
  height:260px;
}
.staff-hero-img{ height:260px; width:auto; object-fit:contain; display:block; }
@media (min-width:1200px){
  .staff-hero{ height:320px; }
  .staff-hero-img{ height:320px; }
}

/* =========================
   Footer (Responsive)
========================= */
.le-footer{ position:relative; }
.le-footer-top{ background: var(--le-grad); color:#fff; }
.le-footer-bottom{ background: rgba(0,80,128,.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:cover; 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;
}