:root{
  --brand-orange: #f36b21;          /* สีส้ม — accent/highlight */
  --brand-blue:   #0f2b4a;          /* สีกรม — primary (darker/navy) */
  --brand-gray:   #6c757d;
  --accent:       var(--brand-orange);
  --font-main:    'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body{ background: #f8fafc; font-family: var(--font-main); }
*, *::before, *::after{ font-family: var(--font-main); }
html{ scroll-behavior:smooth; }

/* Space for fixed navbar */
body{ padding-top:72px; }
@media (max-width:576px){ body{ padding-top:56px; } }
/* Navbar / bg-primary → สีส้ม (กลับเป็นค่าเดิม) */
.bg-primary{ background-color: var(--brand-orange) !important; }
.navbar .nav-link{
  position:relative;
  transition: color .2s ease, opacity .2s ease;
}
.navbar .nav-link::after{
  content:'';
  position:absolute;
  left:.75rem;
  right:.75rem;
  bottom:.3rem;
  height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .24s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
  color:#fff !important;
}
.navbar .nav-link.active::after,
.navbar .nav-link:hover::after{
  transform:scaleX(1);
}
/* btn-primary → สีส้ม */
.btn-primary{ background-color: var(--brand-orange) !important; border-color: var(--brand-orange) !important; color:#fff !important; }
.btn-primary:hover{ background-color: #d95a13 !important; border-color: #d95a13 !important; }
/* btn-outline-primary → เส้นสีกรม */
.btn-outline-primary{ color: var(--brand-gray) !important; border-color: var(--brand-gray) !important; }
.btn-outline-primary:hover{ background-color: var(--brand-gray) !important; color:#fff !important; }

.card img{ height:300px; object-fit:cover; }
.hover-raise{ transition: transform .18s ease, box-shadow .18s ease; }
.hover-raise:hover{ transform: translateY(-6px); box-shadow: 0 12px 24px rgba(27,58,107,0.14); }

/* Make entire card clickable when using stretched-link */
.card.clickable{ position:relative; }
.card.clickable .stretched-link{ z-index:1; }

.badge-role{ background: var(--brand-gray); color: #fff; }

/* Simple fade-in */
.fade-in{ animation: fadeIn .6s ease both; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none; } }

/* Responsive tweaks */
@media (max-width:576px){ .card img{ height:160px; } }

/* Banner */
.site-banner{ border-radius:6px; overflow:hidden; margin-bottom:1.5rem; }
.site-banner img, .site-banner svg{ width:100%; height:auto; display:block; }

/* Course page banner: show full image without cropping; scale down on small screens */
.course-banner{ background:#f3f6f9; overflow:hidden; }
.course-banner img{
  width:100%;
  height:700px; /* visual height on large screens */
  object-fit:contain; /* show the whole image inside the box, no cropping */
  object-position:center center;
  display:block;
  background-color: #f3f6f9;
}

@media (max-width:992px){
  .course-banner img{ height:420px; }
}
@media (max-width:576px){
  .course-banner img{ height:260px; object-position:center top; }
}

/* Warp / slide-in animations on scroll */
.animate-on-scroll{ opacity:0; transform-origin: center; will-change: transform, opacity, filter; }
.animate-on-scroll.inview{ opacity:1; }
.warp-in{ animation: warpIn 1s cubic-bezier(.2,.9,.25,1) both; }
@keyframes warpIn{
  0%{ transform: translateY(28px) rotateX(12deg) scale(.99); opacity:0; filter: blur(6px); }
  60%{ transform: translateY(-6px) rotateX(6deg) scale(1.01); opacity:1; filter: blur(0); }
  100%{ transform: translateY(0) rotateX(0) scale(1); opacity:1; filter: blur(0); }
}

/* Small variation for horizontal slide */
.warp-left{ animation: warpLeft .72s cubic-bezier(.2,.9,.25,1) both; }
@keyframes warpLeft{
  0%{ transform: translateX(36px) rotateY(8deg) scale(.99); opacity:0; filter: blur(6px); }
  60%{ transform: translateX(-6px) rotateY(2deg) scale(1.01); opacity:1; filter: blur(0); }
  100%{ transform: translateX(0) rotateY(0) scale(1); opacity:1; filter: blur(0); }
}

/* Stagger helper for lists (cards) */
.stagger-item{ opacity:0; }
.stagger-item.inview{ opacity:1; }
/* About / Schedule sections */
.split-section{ padding:2rem 0; }
.section-anchor{ scroll-margin-top:96px; }
.section-focus{ animation: sectionFocus 1.05s cubic-bezier(.2,.9,.25,1); }
@keyframes sectionFocus{
  0%{ transform: translateY(22px) scale(.985); opacity:.68; }
  55%{ transform: translateY(-4px) scale(1.01); opacity:1; box-shadow: 0 18px 42px rgba(15,43,74,0.10); }
  100%{ transform: translateY(0) scale(1); opacity:1; box-shadow:none; }
}
.split-left, .split-right{ display:flex; align-items:center; }
.split-left img{ width:100%; border-radius:8px; }
.split-right .lead{ color:var(--brand-gray); }

/* Schedule buttons (square) */
.schedule-actions{ display:flex; gap:.75rem; flex-wrap:wrap; }
.schedule-actions .btn-square{ width:140px; height:140px; display:flex; align-items:center; justify-content:center; text-align:center; border-radius:8px; background:#fff; box-shadow:0 6px 12px rgba(0,0,0,0.06); transition: transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s ease, background-color .18s ease, color .18s ease; cursor:pointer; }
.chedule-actions .btn-square:active{ transform: translateY(1px) scale(.997); }
.schedule-actions .btn-square h6{ margin:0; font-size:1rem; }

/* Hover / focus effects */
.schedule-actions .btn-square:hover,
.schedule-actions .btn-square:focus{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 36px rgba(27,58,107,0.12);
  background: linear-gradient(135deg, rgba(243,107,33,0.06), rgba(27,58,107,0.04));
}
.schedule-actions .btn-square:focus{ outline: none; box-shadow: 0 18px 36px rgba(27,58,107,0.14); }

/* Entrance animation for the buttons */
.schedule-actions .btn-square{ animation: fadeInUp .42s ease both; }
@keyframes fadeInUp{ from{ opacity:0; transform: translateY(12px) scale(.98);} to{ opacity:1; transform:none; } }

@media (max-width:576px){ .schedule-actions .btn-square{ width:100%; height:56px; } }

/* Course grid: 4 per row on large screens */
.courses-grid .card img{ height:160px; }

/* Expand/Collapse wrapper for courses */
.courses-shell{ overflow:hidden; transition: max-height .6s ease; position:relative; }


.courses-overlay{ position:absolute; left:0; right:0; bottom:0; height:96px; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; z-index:50; }
.courses-overlay::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:100%; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(248,250,252,0.92) 60%, rgba(248,250,252,1) 100%); border-radius:0 0 8px 8px; z-index:0; pointer-events:none; }
.courses-overlay .btn{ pointer-events:auto; margin-bottom:16px; position:relative; z-index:3; display:inline-flex; align-items:center; justify-content:center; padding:.22rem .6rem; font-size:.95rem; font-weight:600; border-radius:999px; background: rgba(255,255,255,0.96); color: var(--brand-orange); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 6px 14px rgba(15,43,74,0.08); }
.courses-overlay .btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 20px rgba(15,43,74,0.10); }

/* Hide overlay when shell has expanded class */
.courses-shell.expanded .courses-overlay::before{ opacity:0; transform: translateY(6px); transition: opacity .36s ease, transform .36s ease; pointer-events:none; }
.courses-shell .courses-overlay::before{ transition: opacity .36s ease, transform .36s ease; }

/* Card modern look adjustments */
.card{ border-radius:10px; overflow:hidden; }
.card .card-img-top{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.card .card-body{ padding:1rem; }
.card .badge{ position: absolute; top:12px; left:12px; background: rgba(15,43,74,0.9); color:#fff; }
.card:hover{ transform: translateY(-6px); transition: transform .18s ease, box-shadow .18s ease; box-shadow: 0 18px 36px rgba(15,43,74,0.10); }

/* Override for images inserted inside rich text description (course detail) */
.card .card-body .card-text img{
  max-width:100% !important;
  height:auto !important;
  display:block;
  margin:0.75rem 0;
  border-radius:6px;
}

@media (max-width:768px){
  .courses-overlay{ height:64px; }
  .courses-overlay .btn{ margin-bottom:12px; }
}

/* Partners marquee */
.partners-section{ background: transparent; }
.partners-wrap{ overflow:hidden; }
.partners-track{ display:flex; align-items:center; gap:2rem; padding:1rem 0; will-change: transform; animation: marquee 20s linear infinite; width: max-content; }
.partners-track{ transform: translate3d(0,0,0); }
.partners-track:hover{ animation-play-state: paused; }
.partner-item img{ height:120px; display:block; opacity:0.95; filter:grayscale(1) contrast(.95); transition: transform .18s ease, filter .18s ease, opacity .18s ease; }
.partner-item img:hover{ transform: translateY(-6px); filter: none; opacity:1; }

@keyframes marquee{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-50%,0,0); }
}

@media (max-width:768px){
  .partners-track{ gap:1rem; animation-duration:28s; }
  .partner-item img{ height:44px; }
}

/* Make images inside course description render at full content width
   Override generic .card img rules so description images are not forced to fixed heights. */
.card .card-text img{
  width:100%;
  max-width:100%;
  height:auto !important;
  display:block;
  margin:0.75rem 0;
  object-fit:contain;
}

.card .card-text table{
  width:100%;
  border-collapse:collapse;
  margin:1rem 0;
  overflow:hidden;
}

.card .card-text th,
.card .card-text td{
  padding:0.75rem 0.9rem;
  border:1px solid rgba(15,43,74,0.12);
  vertical-align:top;
}

.card .card-text thead th{
  background:var(--brand-blue);
  color:#fff;
}

/* Cookie consent banner */
.cookie-banner{ position:fixed; left:1rem; right:1rem; bottom:1rem; background:#fff; border-radius:8px; box-shadow:0 12px 30px rgba(0,0,0,0.12); padding:1rem 1.25rem; display:flex; gap:1rem; align-items:center; z-index:1200; }
.cookie-banner p{ margin:0; color:#333; }
.cookie-banner .btn{ min-width:96px; }
.cookie-banner.hide{ display:none !important; }

@media (max-width:576px){
  .cookie-banner{ flex-direction:column; align-items:stretch; }
  .schedule-actions .btn-square{ width:100%; height:56px; }
}

/* Group filter buttons */
.group-filter{ border-radius:999px; margin-right:.35rem; padding:.35rem .9rem; }
.group-filter.active{ background:var(--brand-orange) !important; color:#fff !important; border-color:var(--brand-orange) !important; }
.group-filter:focus{ box-shadow:0 6px 12px rgba(243,107,33,0.18); }

/* Footer styles — navy background, subtle map/texture optional */
.site-footer{ background: linear-gradient(180deg, rgba(15,43,74,1) 0%, rgba(11,27,44,1) 100%); color:#e8eef6; padding:3rem 0; }
.site-footer a{ color: rgba(255,255,255,0.9); text-decoration:none; }
.site-footer .muted{ color: rgba(232,238,246,0.7); }
.site-footer .footer-logos img{ height:58px; margin-right:.75rem; }
.site-footer .contact-address{ line-height:1.5; }
.site-footer .footer-links a{ display:block; margin-bottom:.45rem; color: rgba(232,238,246,0.82); }
.site-footer .qr-box{ background: #fff; padding:.5rem; display:inline-block; border-radius:6px; }
.site-footer .small-note{ color: rgba(232,238,246,0.6); font-size:.9rem; margin-top:1rem; }