/* ============ EP Strisuksa Design System ============ */
:root{
  --grad:        linear-gradient(to bottom,#0052D4,#65C7F7,#9CECFB);
  --grad-btn:    linear-gradient(135deg,#0052D4,#65C7F7);
  --grad-hero:   linear-gradient(135deg,#0052D4 0%,#65C7F7 60%,#9CECFB 100%);
  --gold:#FFC857; --primary:#0052D4; --primary-2:#65C7F7;
  --radius:18px; --ink:#1a2b4a; --bg:#f1f6ff;
}
*{font-family:'Prompt',sans-serif;}
body{background:var(--bg);color:var(--ink);}

/* ---- NAVBAR (glass) ---- */
.glass-nav{
  background:rgba(255,255,255,.75);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.5);box-shadow:0 4px 24px rgba(0,82,212,.08);
}
.brand-badge{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--grad-btn);color:#fff;font-weight:700;font-size:.9rem;
}
.brand-badge-lg{width:56px;height:56px;font-size:1.3rem;border-radius:16px;}
.brand-badge-xl{width:110px;height:110px;font-size:2.6rem;border-radius:28px;}

/* ---- HERO / sections with gradient ---- */
.hero-section{min-height:66vh;background:var(--grad-hero);position:relative;overflow:hidden;}
.hero-section::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.25),transparent 50%);}
.hero-inner{position:relative;z-index:1;}
.hero-eyebrow{display:inline-block;padding:.35rem 1rem;border:1px solid rgba(255,255,255,.5);border-radius:50px;font-size:.85rem;letter-spacing:1px;}
.stats-section,.cta-section{background:var(--grad-btn);}
.page-hero{background:var(--grad-hero);padding:4.5rem 0 3rem;}
.login-bg{background:var(--grad-hero);}

.section-title{position:relative;display:inline-block;}
.section-title::after{content:"";display:block;width:60px;height:4px;border-radius:4px;background:var(--gold);margin:.6rem auto 0;}
.feature-icon{font-size:2.4rem;}

/* ---- GLASSMORPHISM CARD ---- */
.glass-card{
  background:rgba(255,255,255,.68);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.45);border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(0,82,212,.12);transition:.3s;
}
.hover-up{transition:transform .3s, box-shadow .3s;}
.hover-up:hover{transform:translateY(-6px);box-shadow:0 16px 44px rgba(0,82,212,.22);}

/* ---- BUTTONS ---- */
.btn-premium{
  background:var(--grad-btn);color:#fff;border:none;border-radius:50px;
  padding:.55rem 1.6rem;font-weight:600;box-shadow:0 4px 16px rgba(0,82,212,.35);transition:.25s;
}
.btn-premium:hover{filter:brightness(1.08);color:#fff;transform:translateY(-2px);}
.btn-ghost{background:transparent;border:1px solid rgba(0,82,212,.25);border-radius:50px;}
.fw-500{font-weight:500;}.fw-600{font-weight:600;}

/* ---- CARDS: news / teacher / gallery ---- */
.news-img{width:100%;height:190px;object-fit:cover;border-radius:var(--radius) var(--radius) 0 0;background:var(--grad-btn);}
.news-content :is(p,li){line-height:1.9;}
.teacher-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 14px rgba(0,82,212,.2);}
.about-visual{height:280px;background:var(--grad-hero);}
.gallery-ph{height:160px;background:var(--grad-hero);border-radius:var(--radius);}

/* ---- FOOTER ---- */
.site-footer{background:linear-gradient(135deg,#062a66,#0052D4);}
.footer-link{color:rgba(255,255,255,.8);text-decoration:none;}
.footer-link:hover{color:#fff;}

/* ---- LOADING SCREEN ---- */
#loader{position:fixed;inset:0;background:var(--grad-hero);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .5s;}
#loader.hide{opacity:0;pointer-events:none;}
.spinner{width:54px;height:54px;border:5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- CHATBOT ---- */
.chat-fab{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border:none;border-radius:50%;
  background:var(--grad-btn);color:#fff;font-size:1.5rem;box-shadow:0 8px 24px rgba(0,82,212,.4);z-index:1000;}
.chat-box{position:fixed;right:22px;bottom:92px;width:330px;max-width:90vw;z-index:1000;overflow:hidden;}
.chat-head{background:var(--grad-btn);color:#fff;padding:.8rem 1rem;font-weight:600;}
.chat-body{height:300px;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem;}
.chat-user{align-self:flex-end;background:var(--primary);color:#fff;padding:.5rem .8rem;border-radius:14px 14px 2px 14px;max-width:80%;font-size:.9rem;}
.chat-bot{align-self:flex-start;background:#eaf3ff;color:var(--ink);padding:.5rem .8rem;border-radius:14px 14px 14px 2px;max-width:85%;font-size:.9rem;}
.chat-input-row{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid rgba(0,0,0,.06);}

/* ============ ADMIN LAYOUT ============ */
.admin-body{background:var(--bg);}
.admin-wrap{display:flex;min-height:100vh;}
.admin-sidebar{width:240px;flex-shrink:0;background:linear-gradient(180deg,#062a66,#0052D4);color:#fff;padding:1.2rem 0;position:sticky;top:0;height:100vh;}
.sidebar-brand{font-weight:700;font-size:1.2rem;padding:0 1.2rem 1.2rem;display:flex;align-items:center;gap:.5rem;}
.sidebar-nav a{display:block;padding:.7rem 1.2rem;color:rgba(255,255,255,.85);text-decoration:none;border-left:3px solid transparent;transition:.2s;font-size:.95rem;}
.sidebar-nav a:hover{background:rgba(255,255,255,.1);border-left-color:var(--gold);color:#fff;}
.sidebar-nav a.disabled{opacity:.45;pointer-events:none;}
.admin-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.admin-topbar{display:flex;align-items:center;padding:.7rem 1.2rem;margin:1rem;border-radius:14px;}
.admin-content{padding:0 1.5rem 2rem;}
.stat-card{transition:.3s;}.stat-card:hover{transform:translateY(-4px);}

/* ============ DARK MODE ============ */
body.dark{background:#0a1326;color:#e6ecff;}
body.dark .glass-card{background:rgba(18,30,58,.72);border-color:rgba(255,255,255,.08);color:#e6ecff;}
body.dark .glass-nav{background:rgba(10,19,38,.85);}
body.dark .text-muted{color:#9fb3d9 !important;}
body.dark .chat-bot{background:#16233f;color:#e6ecff;}
body.dark .table{color:#e6ecff;}
body.dark .form-control,body.dark .form-select{background:#16233f;border-color:#2a3a5c;color:#e6ecff;}
body.dark .badge.bg-light{background:#16233f !important;color:#9fb3d9 !important;}

/* ============ RESPONSIVE ============ */
@media(max-width:991px){
  .admin-sidebar{position:fixed;left:-240px;z-index:1050;transition:left .3s;}
  .admin-sidebar.open{left:0;}
}
@media(max-width:768px){
  .hero-section{min-height:56vh;}
  .hero-section h1{font-size:2rem;}
  .news-img{height:170px;}
  .brand-badge-xl{width:90px;height:90px;font-size:2rem;}
}

/* ============ GALLERY MODULE ============ */
.album-card{overflow:hidden;}
.album-cover{
  height:170px;background-size:cover;background-position:center;
  background-color:var(--primary-2);position:relative;
  background-image:linear-gradient(135deg,#0052D4,#65C7F7);
}
.album-cover .album-count{
  position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;
  font-size:.78rem;padding:.2rem .6rem;border-radius:50px;
}
/* grid รูปในอัลบั้ม (responsive: 2 → 3 → 4 คอลัมน์) */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.gallery-item{display:block;overflow:hidden;border-radius:12px;aspect-ratio:1/1;}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.gallery-item:hover img{transform:scale(1.08);}
@media(min-width:576px){.gallery-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:992px){.gallery-grid{grid-template-columns:repeat(4,1fr);}}

/* grid จัดการรูปฝั่ง admin */
.img-manage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;}
.img-tile{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:1/1;}
.img-tile img{width:100%;height:100%;object-fit:cover;}
.btn-img-del{
  position:absolute;top:6px;right:6px;width:26px;height:26px;border:none;border-radius:50%;
  background:rgba(220,53,69,.92);color:#fff;font-size:.8rem;line-height:1;cursor:pointer;
}
.btn-img-del:hover{background:#b02a37;}

/* ============ BANNERS CAROUSEL ============ */
.banner-img{height:380px;object-fit:cover;}
@media(max-width:768px){ .banner-img{height:200px;} }
.download-row{border-bottom:1px solid rgba(0,82,212,.08);}
.download-row:last-child{border-bottom:none;}

/* ============ TEACHERS: การ์ด 16:9 + สไลด์บุคลากร ============ */
/* การ์ดในกริด: ภาพ 16:9 ด้านบน + ข้อความใต้ภาพ */
.teacher-card-img{width:100%;height:auto;display:block;border-radius:var(--radius) var(--radius) 0 0;}
.teacher-card-ph{width:100%;aspect-ratio:16/9;display:grid;place-items:center;
  font-size:3rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#0052D4,#65C7F7);
  border-radius:var(--radius) var(--radius) 0 0;}

/* สไลด์บุคลากร: จำกัดความกว้างให้พอดี ไม่เต็มจอ */
.staff-slider{max-width:900px;}
.staff-slide-img{width:100%;height:auto;display:block;}
.staff-slider .carousel-indicators [data-bs-target]{width:10px;height:10px;border-radius:50%;}

/* ============ NAVBAR GLASSMORPHIC (v2) ============ */
.glass-nav{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.6);
  box-shadow:0 6px 30px rgba(0,82,212,.10);
  padding-top:.5rem;padding-bottom:.5rem;
}
/* แบรนด์: โลโก้ + ชื่อ */
.brand-logo{height:42px;width:auto;border-radius:8px;}
.brand-text{
  font-weight:700;line-height:1.05;color:var(--primary);
  font-size:1.02rem;letter-spacing:.2px;max-width:260px;
  background:linear-gradient(90deg,#0052D4,#2b8ef0);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* ลิงก์เมนู + เส้นใต้ไล่เวลา hover */
.glass-nav .nav-link{
  position:relative;font-weight:500;color:#16315c !important;
  padding:.5rem .9rem !important;border-radius:10px;transition:.25s;
}
.glass-nav .nav-link::after{
  content:"";position:absolute;left:50%;bottom:6px;width:0;height:2px;border-radius:2px;
  background:var(--grad-btn);transition:.28s;transform:translateX(-50%);
}
.glass-nav .nav-link:hover{background:rgba(0,82,212,.08);color:var(--primary) !important;}
.glass-nav .nav-link:hover::after{width:60%;}
.glass-nav .dropdown-toggle::after{vertical-align:middle;}

/* Dropdown แบบ glass */
.glass-dropdown{
  background:rgba(255,255,255,.75) !important;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.6) !important;
  border-radius:14px !important;box-shadow:0 12px 40px rgba(0,82,212,.18) !important;
  padding:.4rem !important;margin-top:.5rem !important;
}
.glass-dropdown .dropdown-item{
  border-radius:9px;padding:.5rem .9rem;font-weight:500;color:#16315c;transition:.2s;
}
.glass-dropdown .dropdown-item:hover{background:var(--grad-btn);color:#fff;transform:translateX(3px);}
.dark-toggle{border-radius:50% !important;width:38px;height:38px;padding:0 !important;}

/* แสดง dropdown ตอน hover บนจอใหญ่ (ลื่นขึ้น) */
@media(min-width:992px){
  .glass-nav .nav-item.dropdown:hover > .dropdown-menu{display:block;}
}

/* Dark mode navbar */
body.dark .glass-nav{background:rgba(10,19,38,.7);border-bottom-color:rgba(255,255,255,.1);}
body.dark .glass-nav .nav-link{color:#dbe6ff !important;}
body.dark .glass-dropdown{background:rgba(18,30,58,.85) !important;border-color:rgba(255,255,255,.1) !important;}
body.dark .glass-dropdown .dropdown-item{color:#dbe6ff;}

/* ============ FACEBOOK FEED ============ */
.fb-feed{ width:500px; max-width:100%; overflow:hidden; border-radius:16px; }
.fb-feed iframe{ display:block; }

/* ============ NAV SEARCH ============ */
.nav-search{ position:relative; display:flex; align-items:center; }
.nav-search input{ border-radius:20px; padding-right:34px; min-width:160px; background:rgba(255,255,255,.7); border:1px solid rgba(0,82,212,.18); }
.nav-search input:focus{ background:#fff; box-shadow:0 0 0 .2rem rgba(0,82,212,.15); }
.nav-search-btn{ position:absolute; right:6px; background:none; border:none; color:#0052D4; display:flex; cursor:pointer; padding:2px; }
body.dark .nav-search input{ background:rgba(255,255,255,.1); color:#fff; }

/* ============ BACK TO TOP + COOKIE CONSENT ============ */
.back-to-top{ position:fixed; right:20px; bottom:90px; width:46px; height:46px; border:none; border-radius:50%;
  background:var(--grad-btn,#0052D4); color:#fff; font-size:1.3rem; cursor:pointer; opacity:0; pointer-events:none;
  transform:translateY(10px); transition:.3s; box-shadow:0 6px 20px rgba(0,82,212,.35); z-index:1040; }
.back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.cookie-consent{ position:fixed; left:18px; right:18px; bottom:18px; max-width:760px; margin:auto; z-index:1050;
  display:none; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem !important; }
.cookie-consent.show{ display:flex; }
.cookie-consent a{ color:#0052D4; font-weight:600; }
@media(max-width:576px){ .cookie-consent{ flex-direction:column; text-align:center; } }

/* ============ NEWS SHARE ============ */
.news-share{ display:flex; align-items:center; gap:8px; margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid #eef2fa; flex-wrap:wrap; }
.share-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px;
  border-radius:10px; font-weight:700; font-size:.85rem; text-decoration:none; color:#fff; border:none; cursor:pointer; transition:.2s; }
.share-btn:hover{ transform:translateY(-2px); color:#fff; }
.share-btn.fb{ background:#1877F2; } .share-btn.line{ background:#06C755; }
.share-btn.x{ background:#000; } .share-btn.copy{ background:#0052D4; }

/* ============ NEWS "NEW" BADGE ============ */
.news-new-badge{ position:absolute; top:10px; left:10px; z-index:3; background:#ff4757; color:#fff;
  font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:20px; box-shadow:0 3px 10px rgba(255,71,87,.4);
  animation:pulseNew 1.8s ease-in-out infinite; }
@keyframes pulseNew{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }

/* ============ FOOTER SEARCH ============ */
.footer-search{ position:relative; width:280px; max-width:90%; }
.footer-search .fs-ic{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#0052D4; pointer-events:none; }
.footer-search input{ border-radius:22px; padding-left:36px; border:none; background:#fff; }
.footer-search input:focus{ box-shadow:0 0 0 .2rem rgba(0,82,212,.18); }

/* ============ COOKIE CONSENT (v2: มีปุ่มปิด) ============ */
.cookie-consent{ padding:1rem 1.25rem !important; }
.cookie-inner{ display:flex; align-items:center; gap:1rem; }
.cookie-consent a{ color:#0052D4; font-weight:600; }
.cookie-x{ position:absolute; top:6px; right:10px; background:none; border:none; font-size:1.3rem; line-height:1; color:#888; cursor:pointer; }
.cookie-x:hover{ color:#333; }
@media(max-width:576px){ .cookie-inner{ flex-direction:column; text-align:center; } }

/* ============ GALLERY ALBUM (show) ภาพ 270x200 ============ */
.gallery-grid .gallery-item{ aspect-ratio:27/20 !important; }
.gallery-grid .gallery-item img{ width:100%; height:100%; object-fit:cover; }

/* ============ FOOTER SEARCH (v2: input-group บรรทัดเดียว) ============ */
.footer-search{ width:300px; max-width:90%; }
.footer-search .input-group-text{ background:#fff; border:none; border-radius:22px 0 0 22px; color:#0052D4; padding-left:14px; }
.footer-search .form-control{ border:none; border-radius:0 22px 22px 0; }
.footer-search .form-control:focus{ box-shadow:none; }
.footer-search:focus-within{ box-shadow:0 0 0 .2rem rgba(0,82,212,.18); border-radius:22px; }

/* ============ BACK TO TOP (v2: กลม ใหญ่ ลูกศรขาว เหนือปุ่มแชท) ============ */
.back-to-top{ right:24px !important; bottom:92px !important; width:54px !important; height:54px !important;
  display:flex !important; align-items:center; justify-content:center; }

/* ============ FOOTER SEARCH (v3: โปร่งใส ขอบขาว) ============ */
.footer-search input::placeholder{ color:rgba(255,255,255,.7); }
.footer-search input:focus{ background:transparent !important; color:#fff !important; box-shadow:none !important; border-color:#fff !important; }
.footer-search .input-group-text svg{ color:#fff; }