/* ลบตัวจัดการ media query เก่าออกก่อนเพื่อทดสอบ */

:root {
  --brand-primary: #42058F;

  --brand-footer: #42058F;
  /* Deep Blue */
  --brand-secondary: #8C01F9;

  /* Medium Blue */
  --brand-light: #eef5fb;
  /* Very Light Blue */
  --accent: #8C01F9;


  /* Sky Light Blue */
  --paper: #f4f7f6;
}

* {
  font-family: "Kanit", system-ui, -apple-system, sans-serif;
}

body {
  background: #fff;
  color: var(--brand-primary);
  font-size: larger;
}

/* === เริ่มต้น NAV  เมนูทั้งหมด ของเว็บไซต์ */
.navbar {
  box-shadow: 0 6px 20px rgba(10, 74, 122, .06);
}

.navbar-modern {
  background: var(--brand-primary);
  height: auto;
  min-height: 70px;
  display: flex;
  align-items: center;
}

@media (min-width: 1200px) {
  .navbar-modern {
    height: 90px;
  }
}

.navbar-modern .navbar-brand {
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.navbar-modern .navbar-brand img {
  height: 45px;
  border-radius: 8px;
  transition: height 0.3s ease;
}

@media (min-width: 1200px) {
  .navbar-modern .navbar-brand img {
    height: 65px;
  }
}

.navbar-modern .nav-link {
  color: rgba(255, 255, 255, .92);
  font-weight: 500;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.navbar-modern .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .14);
}

/* แก้ collapse ตอนมือถือให้มองเห็นชัด */
@media (max-width: 1199.98px) {
  .navbar-modern .navbar-collapse {
    background: linear-gradient(160deg, hsla(206, 100%, 15%, 0.98), rgba(1, 43, 78, 0.98));
    padding: 15px;
    border-radius: 14px;
    margin-top: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  }

  .navbar-modern .nav-link {
    padding: .65rem 1rem;
    margin-bottom: 2px;
  }

  /* ปรับให้ dropdown แสดงผลแบบ static ในเมนูมือถือ ไม่ให้ลอยทับหรือตกขอบ */
  .navbar-modern .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 5px 0 !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    border-radius: 8px !important;
  }

  .navbar-modern .dropdown-item {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 10px 20px !important;
    font-size: 16px !important;
    border-radius: 6px !important;
  }

  .navbar-modern .dropdown-item:hover,
  .navbar-modern .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
  }

  /* จัดการ Submenu เมนูย่อยซ้อนในมือถือ */
  .navbar-modern .dropdown-menu .dropdown-submenu {
    position: static !important;
    width: auto !important;
    margin-left: 20px !important;
    margin-right: 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-left: 2px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
    border-radius: 0 0 6px 6px !important;
  }

  .navbar-modern .dropdown-menu .dropdown-submenu .dropdown-item {
    padding-left: 15px !important;
  }
}

.navbar-modern.navbar-dark .navbar-toggler {
  border-color: rgba(255, 255, 255, .55);
}

.navbar-modern .navbar-toggler:focus {
  outline: none;
  box-shadow: 0 0 0 .15rem rgba(255, 255, 255, .35);
}

.navbar-toggler-icon {
  height: 30px;
  width: 30px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  width: max-content;
  /* ให้กว้างตามข้อความ */
  min-width: unset;
  /* ยกเลิก 500px */
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  display: none;
  padding: 5px 0;
  font-size: 18px;
  z-index: 999;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  display: block;
  padding: 8px 15px;
  text-decoration: none;
  color: hsl(235, 74%, 19%);
}

.dropdown-item:hover {
  background: var(--accent);
  color: hsl(0, 0%, 100%);
}

.dropdown-divider {
  height: 1px;
  background: #eee;
  margin: 5px 0;
}


/* สไตล์เริ่มต้นของ Icon */
i.text-icon {
    color: #FF32BD !important;
    transition: all 0.3s ease;
    display: inline-block; /* เพิ่มบรรทัดนี้เพื่อให้เอฟเฟกต์ scale(1.1) ทำงานได้สมบูรณ์ */
}

/* เมื่อเอาเมาส์ชี้ที่ Icon */
i.text-icon:hover {
    color: #e807a1 !important;
    transform: scale(1.1);
}

/* Floating Banner Right */
.floating-apply-banner {
  position: absolute;
  right: 0;
  top: 120%;
  /* ปรับความสูงจากด้านบนได้ตามต้องการ */
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.banner-item {
  background: var(--brand-primary);
  color: #fff;
  padding: 15px 20px;
  border-radius: 30px 0 0 30px;
  box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--brand-primary);
  border-right: none;
  width: 250px;
  /* ย่อไว้ก่อน */
  overflow: hidden;
  white-space: nowrap;
}

.banner-item:hover {
  width: 250px;
  /* ขยายออกเมื่อเอาเมาส์วาง */
  color: var(--accent);
  background: var(--brand-primary);
  transform: translateX(-5px);
}

.banner-item i {
  font-size: 24px;
  min-width: 24px;
  text-align: center;
  color: var(--accent);
}

.banner-text {
  font-weight: 500;
  font-size: 1.1rem;
}

/* ซ่อนหรือปรับขนาดบนมือถือเพื่อไม่ให้ทับเนื้อหา */
@media (max-width: 1200px) {
  .navbar-toggler {
    display: flex;
    align-items: center;
  }

/* 1. ซ่อน Submenu ไว้ก่อนในสถานะปกติ */
  .dropdown-menu .dropdown-submenu {
    display: none; /* เปลี่ยนจาก block เป็น none */
    position: static; 
    width: 100%;
    margin-left: 60px; /* ลดระยะลงหน่อยเพื่อให้พอดีกับจอมือถือ */
    border: none;
    box-shadow: none;
    background: linear-gradient(160deg, hsla(0, 0%, 87%, 0.98), rgba(210, 210, 210, 0.98));
    transition: all 0.3s ease;
  }

  /* 2. แสดง Submenu เมื่อมีการ Hover หรือ Click ที่รายการแม่ (li) */
  /* หมายเหตุ: บนมือถือ การแตะ (Tap) จะนับเป็น Hover ในเบราว์เซอร์ส่วนใหญ่ */
  .dropdown-menu li:hover > .dropdown-submenu,
  .dropdown-menu li:focus-within > .dropdown-submenu {
    display: block !important;
    
  }

  /* ปรับแต่ง Dropdown-item ให้กดง่ายขึ้นบนมือถือ */
  .dropdown-item {
    padding: 12px 15px;
    white-space: normal; /* ป้องกันข้อความยาวหลุดขอบ */
    
  }

}

@media (max-width: 576px) {
  .banner-item {
    padding: 10px 15px;
    width: 50px;
  }

  .banner-item:hover {
    width: 200px;
  }

  .banner-text {
    font-size: 0.9rem;
  }

  .navbar-brand {
    font-size: 0.8rem;
  }

  .navbar-toggler {
    display: flex;
    align-items: center;
  }
}

@media (max-width: 384px) {
  .title-sub {
    display: none;
  }
}

/* ====== รองรับ Submenu (เมนูซ้อน) ====== */

/* ให้ li เป็นตัวอ้างอิงตำแหน่ง */
.dropdown-menu li {
  position: relative;
}

/* submenu */
.dropdown-submenu {
  position: absolute;
  top: 0;
  left: 100%;
  /* แสดงด้านขวา */
  margin-top: -5px;
  display: none;
  
}

/* ===== Desktop ===== */
@media (min-width: 1200px) {
  .dropdown-menu li:hover>.dropdown-submenu {
    display: block;
  }
}

/*==== สิ้นสุดในส่วนเมนู ==== */



.btn-apply {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}

.btn-apply:hover {
  background: var(--accent);
  color: #fff;
}

.back-to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  transition: 0.5s;
  z-index: 99;

}


/* HERO */
.hero {
  background: var(--brand-primary);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 60px 0;
}

.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(255, 255, 255, .12), transparent 60%);
  pointer-events: none;
}

.hero .display-4 {
  font-weight: 600;
}

/* CARDS */
.card-step {
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}

.card-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .1);
}

.step-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--brand-secondary);
  font-size: 24px;
}

/* SECTIONS */
.section-muted {
  background: var(--paper);
}

.section-title {
  font-weight: 800;
  color: var(--brand-primary);
  margin-bottom: 30px;
}

.chip {
  font-size: .9rem;
  background: var(--brand-light);
  color: var(--brand-primary);
  border: 1px solid #d7e8f7;
  border-radius: 999px;
  padding: .35rem .75rem;
}

/* NEWS COMPONENT */
.news-card {
  display: flex;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 20px;
  transition: 0.3s;
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.news-img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}

.news-content {
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-title {
  font-weight: 600;
  color: var(--brand-primary);
  text-decoration: none;
  font-size: 1.1rem;
  display: -webkit-box;
  --webkit-line-clamp: 2;

  
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-title:hover {
  color: var(--accent);
}

.news-hover {
  transition: 0.3s ease;
  border-radius: 10px;
  padding: 10px;
}

.news-hover:hover {
  background-color: var(--brand-light);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transform: translateY(-2px);
}

/* FOOTER */
footer {
  background: var(--brand-footer);
  color: #fff;
}

footer a {
  color: #fff;
  text-decoration: none;
  opacity: 0.8;
}

footer a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* BUTTONS ด้านข้าง */
.btn-outline-brand {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);

}

/* BUTTONS ด้านข้าง ตอน hover */
.btn-outline-brand:hover {
  background: var(--accent);
  color: #fff;
}



/* REUSABLE */
.text-brand {
  color: var(--brand-primary);
}

.bg-brand {
  background: var(--brand-primary);
}

.bg-brand-light {
  background: var(--brand-light);
}


/* ตั้งค่า Form-control ทั้งหมด */
    /* 1. ควบคุมสไตล์พื้นฐานของ Input, Select และ Textarea ทั้งหมด */
    .form-control,
    .form-control-lg,
    select.form-control {
      border-radius: 10px !important;
      padding: 12px 15px !important;
      font-size: 1.1rem !important;
      height: auto !important;
      /* ให้ความสูงยืดหยุ่นตาม Padding */
      border: 1px solid #ced4da;
      /* สีขอบเริ่มต้น */
      transition: all 0.2s ease-in-out;
      /* เพิ่มความนุ่มนวลเวลาเปลี่ยนสถานะ */
    }

    /* 2. จัดการสถานะ Focus (เมื่อคลิกเลือก) ของทุกตัว */
    .form-control:focus,
    .form-control-lg:focus,
    select.form-control:focus {
      border-color: #42058F !important;
      box-shadow: 0 0 0 0.25rem rgba(5, 25, 136, 0.15) !important;
      outline: 0;
    }

    /* 3. กรณีพิเศษสำหรับ Select (Dropdown) */
    select.form-control {
      appearance: auto;
      /* ให้แสดงลูกศรของเบราว์เซอร์ปกติ */
      cursor: pointer;
    }

    /* 4. ปรับสี Placeholder ให้ดูซอฟต์ลง (ตัวเลือกเสริม) */
    .form-control::placeholder {
      color: #a4a4a4;
      font-size: 0.95rem;
    }

/* === Cookie Consent Banner & Settings === */
.cookie-consent-banner {
    position: fixed;
    bottom: 24px;
    right: 24px;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(3, 48, 173, 0.15);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(9, 9, 92, 0.18);
    z-index: 1050;
    padding: 24px;
    animation: cookieSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    color: #333;
    font-size: 15px;
}

@keyframes cookieSlideUp {
    from {
        transform: translateY(100px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.cookie-consent-banner h5 {
    color: var(--brand-primary);
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.15rem;
}

.cookie-consent-banner p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.cookie-consent-banner p a {
    color: var(--brand-primary);
    text-decoration: underline;
    font-weight: 500;
}

.cookie-consent-banner p a:hover {
    color: var(--accent);
}

.cookie-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.btn-cookie-accept {
    flex: 1 1 auto;
    background: var(--brand-primary);
    color: #fff !important;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.btn-cookie-accept:hover {
    background: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 162, 255, 0.2);
}

.btn-cookie-reject {
    flex: 1 1 auto;
    background: transparent;
    color: #666 !important;
    border: 1px solid #ccc;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.btn-cookie-reject:hover {
    background: #f1f3f5;
    color: #333 !important;
}

.btn-cookie-settings {
    width: 100%;
    background: transparent;
    color: var(--brand-primary) !important;
    border: none;
    text-decoration: none;
    padding: 6px 0;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    transition: all 0.2s ease;
}

.btn-cookie-settings:hover {
    color: var(--accent) !important;
    text-decoration: underline;
}

/* Cookie Settings Panel */
.cookie-settings-panel {
    display: none;
    border-top: 1px solid #eee;
    margin-top: 16px;
    padding-top: 16px;
}

.cookie-setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cookie-setting-info {
    max-width: 75%;
}

.cookie-setting-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 2px;
}

.cookie-setting-desc {
    font-size: 0.8rem;
    color: #777;
    line-height: 1.4;
}

/* Custom Switch Toggle styling */
.cookie-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 24px;
}

.cookie-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .cookie-slider {
    background-color: var(--brand-primary);
}

input:focus + .cookie-slider {
    box-shadow: 0 0 1px var(--brand-primary);
}

input:checked + .cookie-slider:before {
    transform: translateX(22px);
}

input:disabled + .cookie-slider {
    background-color: #e2e5e9;
    cursor: not-allowed;
}

input:disabled + .cookie-slider:before {
    background-color: #b0b5bc;
}

.cookie-settings-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.btn-cookie-save {
    width: 100%;
    background: var(--brand-primary);
    color: #fff !important;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    text-align: center;
}

.btn-cookie-save:hover {
    background: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 162, 255, 0.2);
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .cookie-consent-banner {
        bottom: 12px;
        left: 12px;
        right: 12px;
        max-width: calc(100% - 24px);
        padding: 16px;
        border-radius: 12px;
    }
    
    .cookie-buttons {
        flex-direction: column;
    }
}