/* ===== Local Sarabun (offline) ===== */
@font-face {
  font-family:'Sarabun';
  src:url('/fonts/Sarabun-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:'Sarabun';
  src:url('/fonts/Sarabun-Medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:'Sarabun';
  src:url('/fonts/Sarabun-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ===== Theme Variables ===== */
:root{
  --navy:#0f2a49;
  --blue:#1d4ed8;
  --blue-600:#1e40af;
  --bg:#f6f8fb;
  --card:#fff;
  --text:#0f172a;
  --muted:#475569;
  --border:#e5e7eb;

  --slider-h-desktop: 430px;
  --slider-h-tablet: 200px;
  --slider-h-mobile: 170px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Sarabun',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  line-height:1.6;
  background:var(--bg);
  color:var(--text);
}
.container{max-width:1400px;margin:0 auto;padding:24px}

/* ===== Logo ===== */
.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
}
.logo-link:hover,
.logo-link:focus,
.logo-link:active { text-decoration: none; }
.logo-icon { font-size: 24px; line-height: 1; margin-top: -5px; }

/* ===== Header ===== */
.site-header {
  background:var(--navy);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.site-header .container {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-title {margin:0;font-weight:800;letter-spacing:.2px}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav a {
  display:inline-flex;
  align-items:center;
  height:48px; /* ทำให้เท่ากับโปรไฟล์ */
  color:#e6edf7;
  padding:0 4px;
  border-bottom:2px solid transparent;
  text-decoration:none;
}
.nav a:hover { color:#fff; border-bottom-color:#94a3b8; }
.nav a.active { color:#fff; border-bottom-color:#fff; }

/* ===== Footer ===== */
.site-footer {
  margin-top:48px;
  padding:24px 0;
  color:#6b7280;
  border-top:1px solid var(--border);
  background:#fff;
}

/* ===== Headings ===== */
h1,h2{margin:12px 0}
h2{font-size:26px;font-weight:800}

/* ===== Breadcrumb ===== */
.breadcrumb{font-size:14px;color:#64748b}
.breadcrumb a{color:inherit}

/* ===== Search Box ===== */
.search-box{margin:14px 0 20px}
.search-box label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.search-box input{
  width:100%;padding:12px 14px;font-size:16px;background:#fff;
  border:1px solid var(--border);border-radius:10px;outline:0
}
.search-box input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,78,216,.15)}

/* ===== Cards ===== */
.cards {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:16px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  box-shadow:0 2px 8px rgba(2,6,23,.06);
  transition:border-color .2s ease,transform .05s ease;
  text-decoration:none;
  color:inherit;
}
.card:hover{transform:translateY(-1px);border-color:#cbd5e1}
.card .code{font-weight:800;color:var(--blue-600)}
.card .name{margin-top:6px;color:#111827;min-height:48px}
.pill{
  display:inline-block;
  border:1px solid #c7d2fe;
  color:#1e3a8a;
  background:#eef2ff;
  padding:4px 8px;
  border-radius:9999px;
  font-size:12px;
  margin:6px 6px 0 0;
}

/* ===== Links ===== */
a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline}
.link-cta{
  display:inline-block;
  padding:10px 14px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  text-decoration:none;
}
.link-cta:hover{border-color:var(--blue-600);text-decoration:none}

/* ===== Promo Slider ===== */
.promo { margin-top: 28px; }
.promo-slider{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #0f2547;
}
.promo-slider .slides{
  display: flex;
  height: var(--slider-h-desktop);
}
.promo-slider .slide{flex: 0 0 100%;position: relative;}
.promo-slider .bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(8px) brightness(.7) saturate(.9);
  transform: scale(1.04);
  z-index: 0;
}
.promo-slider .shade{
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--bg1,#0ea5e9), var(--bg2,#2563eb));
  opacity: .42;
  z-index: 1;
}
.promo-slider .inner{
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 28px;
  padding: 26px 28px;
  margin-left: 50px;
}
.promo-slider .media{
  justify-self: end;
  width: min(620px, 46vw);
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #0b1e34;
  box-shadow: 0 12px 28px rgba(15,23,42,.35);
}
.promo-slider .media img{width: 100%; height: 100%; object-fit: cover;}
.promo-slider .caption{color: #fff;}
.promo-slider .cap-title{font-weight: 800;font-size: 28px;line-height: 1.25;margin: 0 0 8px;}
.promo-slider .cap-desc{font-size: 16px;opacity: .98;margin: 0 0 8px;}
.promo-slider .cap-cta{
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  background: #fff;
  color: #0f172a;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
}
.promo-slider .cap-cta:hover{ opacity: .9; text-decoration: none; }
.promo-slider .nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(15,23,42,.65);
  color: #fff; border: 0;
  width: 40px; height: 40px; border-radius: 9999px;
  cursor: pointer; z-index: 3;
}
.promo-slider .prev{ left: 12px; }
.promo-slider .next{ right: 12px; }
.promo-slider .dots{
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 8px; z-index: 3;
}
.promo-slider .dot{
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid #fff; background: transparent; opacity: .8;
}
.promo-slider .dot.active{ background: #fff; opacity: 1; }

/* Responsive */
@media (max-width: 1024px){
  .promo-slider .slides{ height: var(--slider-h-tablet); }
  .promo-slider .inner{
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    text-align: center;
  }
  .promo-slider .media{
    justify-self: center;
    width: min(680px, 88%);
  }
}
@media (max-width: 640px){
  .promo-slider .slides{ height: var(--slider-h-mobile); }
  .promo-slider .cap-title{ font-size: 22px; }
  .promo-slider .cap-desc{ font-size: 14px; }
}

/* ===== Course Cards ===== */
.card-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 1.5rem;}
.card {background: #fff;border-radius: 12px;box-shadow: 0 2px 6px rgba(0,0,0,0.08);overflow: hidden;display: flex;flex-direction: column;transition: transform 0.2s ease, box-shadow 0.2s ease;}
.card img {width: 100%;height: 180px;object-fit: cover;display: block;}
.card:hover {transform: translateY(-3px);box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
.detail-list {list-style: none;padding: 0;margin: 0.5rem 0 0;font-size: 0.9rem;}
.btn-detail {display: inline-block;margin-top: 0.5rem;padding: 0.4rem 0.8rem;background: #2563eb;color: #fff;font-size: 0.9rem;border-radius: 6px;text-decoration: none;transition: background 0.2s ease;}
.btn-detail:hover {background: #1e40af;}

/* ===== News detail hero image ===== */
.news-hero {aspect-ratio: 16 / 9;max-width: 780px;margin: 16px auto;border-radius: 12px;overflow: hidden;background: #e5e7eb;box-shadow: 0 2px 10px rgba(0,0,0,.08);}
.news-hero img {width: 100%;height: 100%;object-fit: cover;}

/* ===== Profile Menu ===== */
.profile-menu {position: relative;display: inline-block;}
.profile-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px; /* เท่ากับลิงก์ nav */
  padding: 0 8px;
  margin-top: -8px;
}
.profile-name {line-height: 1;}
.profile-avatar {
  background: #fff;
  color: #0f2a49;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  font-size: 14px;
}
.profile-menu .dropdown {
  display: none;
  position: absolute;
  right: 0;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 8px;
  min-width: 150px;
  margin-top: 8px;
  z-index: 10;
}
.profile-menu.show .dropdown {display: block;}
.profile-menu .dropdown a {
  display: block;
  padding: 10px 14px;
  color: #333;
  text-decoration: none;
}
.profile-menu .dropdown a:hover {background: #f5f5f5;}

/* ===== Auth (Login) ===== */
.auth-wrap{
  min-height: calc(100vh - 160px); /* พื้นที่ลบส่วน header/footer คร่าวๆ */
  display: grid;
  place-items: start center;
}

.auth-card{
  width: 100%;
  max-width: 460px;
  margin-top: 32px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
}

.auth-head h1{
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
}
.auth-head .muted{
  margin: 0;
  color: #64748b;
  font-size: 14px;
}

.auth-alert{
  margin: 14px 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-size: 14px;
}

.auth-form .form-group{ margin-top: 14px; }
.auth-form label{ display:block; font-size: 14px; margin-bottom: 6px; color: var(--muted); }

.auth-form input[type="text"],
.auth-form input[type="password"]{
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: 0;
}
.auth-form input:focus{
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29,78,216,.14);
}

.password-field{
  position: relative;
}
.toggle-pass{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; cursor: pointer;
  font-size: 16px; color: #64748b;
  padding: 4px 6px; border-radius: 8px;
}
.toggle-pass:hover{ background: #f1f5f9; }

.form-footer{
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.checkbox{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: #334155;
}

/* ปุ่มหลัก */
.btn-primary{
  display:inline-block;
  padding:14px 16px;
  background:#2563eb;
  color:#fff;
  font-weight:700;
  border:0;
  border-radius:10px;
  cursor:pointer;
  transition:background .15s ease, transform .05s ease, opacity .15s ease;
}
.btn-primary:hover{ background:#1e40af; }
.btn-primary:active{ transform:translateY(1px); }

/* === ปุ่มถูกปิดการใช้งาน === */
button.btn-primary:disabled,
.btn-primary:disabled,
.btn-primary[disabled]{
  background:#cbd5e1 !important;
  color:#64748b !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
  opacity:1 !important;          /* กันธีมอื่นลดความทึบ */
  pointer-events:none;            /* กัน hover state แปลก ๆ */
}

/* เส้นกรอบแดงเวลา invalid (ถ้ายังไม่ได้ใส่) */
.input.is-invalid{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.12);
}

.auth-foot{
  margin-top: 14px;
  text-align: center;
}

/* ===== Admin Dropdown (click-to-open) ===== */
.nav-dropdown {
  position: relative;
  display: inline-block;
  margin-left: 18px;
}

.nav-dropbtn {
  background: none;
  border: none;
  color: #e6edf7;
  font-size: 16px;
  cursor: pointer;
  padding: 8px 2px;         
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: -20px;
}

.nav-dropbtn:hover { color:#fff; }
.nav-dropbtn:focus { outline: none; }

.nav-dropbtn .caret {
  display: inline-block;
  transition: transform .15s ease;
}

.nav-dropdown-content {
  position: absolute;
  right: 0;
  top: 120%;
  min-width: 220px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,23,42,.15);
  padding: 6px;
  z-index: 50;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}

.nav-dropdown-content a {
  display: block;
  padding: 10px 14px;
  color: #0f172a;
  text-decoration: none;
  border-radius: 8px;
}

.nav-dropdown-content a:hover { background:#f1f5f9; }

/* แสดงเมื่อกดปุ่มแล้วมีคลาส .open */
.nav-dropdown.open .nav-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-dropdown.open .nav-dropbtn .caret {
  transform: rotate(180deg);
}

.pill-full {
  background: #fee2e2; /* พื้นแดงอ่อน */
  border: 1px solid #fca5a5;
  color: #b91c1c; /* แดงเข้ม (text) */
  font-weight: 700;
}

.pill-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:140px;
  height:32px;
  border-radius:9999px;
  font-size:13px;
  font-weight:700;
  border:0;            /* เอากรอบออก ให้เป็นสีพื้นทึบ */
  color:#fff;          /* ข้อความสีขาว */
}

/* ===== Course Detail ===== */
.course-detail{
  max-width: 1100px; margin: 18px auto 32px; padding: 0 16px;
}

.breadcrumb{
  display:flex; gap:8px; align-items:center;
  color:#64748b; font-weight:600; font-size:14px; margin-bottom:10px;
}
.breadcrumb a{ color:#64748b; text-decoration:none; }
.breadcrumb a:hover{ color:#1d4ed8; }

.course-head{
  display:flex; align-items:flex-start; gap:16px; justify-content:space-between;
  margin-bottom:12px;
}
.course-title{
  font-size: clamp(20px, 2.2vw, 28px);
  line-height:1.25; color:#0f172a; margin:0;
}
.course-actions form{ display:inline; }
.btn-enroll{
  background: linear-gradient(90deg,#2563eb,#1d4ed8);
  color:#fff; font-weight:800; border:0; border-radius:12px;
  padding:10px 22px; cursor:pointer;
  box-shadow:0 4px 12px rgba(37,99,235,.25);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-enroll:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(37,99,235,.35); }
.btn-enroll.disabled{ background:#cbd5e1; color:#475569; cursor:not-allowed; box-shadow:none; }