:root {
  --ink: #0b1324;
  --muted: #4b5563;

  --purple: #6b4cf6;
  --green: #58c95b;
  --pink: #ff3d8d;

  /* gradient */
  --gradTop: #d7ceff;
  --gradBot: #662d80;
}

/* =========================
   TOP BAR (placeholder)
   ========================= */
.topbar {
  background-color: #004aad;
  color: #fff;
}

.topbar .inner {
  padding: 20px 0;
  text-align: center;
  font-weight: 600;
}

/* =========================
   HERO SECTION (ยืดตาม content)
   ========================= */
.hero-full {
  position: relative;
  /* min-height: 100vh; */
  /* แค่ค่าเริ่มต้น */
  overflow: hidden;

  /* ✅ gradient ยืดตาม content */
  /* background: linear-gradient(180deg,
          var(--gradTop) 0%,
          var(--gradBot) 100%); */
}


/* สร้างคลาสสำหรับครอบทั้ง 2 Section */
.shared-bg-wrapper {
  /* ใส่รูปภาพพื้นหลังของคุณตรงนี้ */
  background-image: url("imgs/bg/section-hero-4.jpg");

  /* หรือถ้าอยากได้ Gradient แบบเดิมทับรูปภาพด้วย ให้ใช้แบบนี้ครับ:
        background: linear-gradient(180deg, rgba(215,206,255,0.8) 0%, rgba(102,45,128,0.9) 100%), url('imgs/your-background-image.jpg');
        */

  /* สั่งให้รูปพอดีกับ "หน้าจอ" และไม่ขยายตามความยาวเนื้อหา */
  background-size: 100% auto;

  background-position: top center;
  background-repeat: no-repeat;
  width: 100%;

  /* ✅ พระเอกของเรา: ล็อครูปให้อยู่นิ่งๆ แก้ปัญหาภาพซูมแตก */
  /* background-attachment: fixed; */
}

/* 📱 การปรับแก้สำหรับมือถือ (จอแนวตั้ง) */
@media (max-width: 991px) {
  .shared-bg-wrapper {
    /* บนมือถือจอแคบแต่ยาว ถ้าใช้ 100% รูปจะเตี้ยเกินไป 
               จึงต้องยอมให้เป็น cover เหมือนเดิม หรือบังคับสัดส่วนให้ใหญ่ขึ้นครับ */
    background-size: auto 100vh;
    /* บังคับรูปให้สูงเท่ากับ 1 หน้าจอโทรศัพท์ */
    background-position: center top;
  }
}

/* บังคับให้ Section ข้างในโปร่งใส เพื่อให้มองทะลุเห็นรูปของ Wrapper */
.shared-bg-wrapper section {
  background: transparent;
}

/* background image layer */
.hero-full::after {
  content: "";
  position: absolute;
  inset: 0;

  /* 🔴 ลบ 3 บรรทัดนี้ออก: */
  /* background-image: url("imgs/bg/section-hero-2.jpg");
      background-repeat: no-repeat;
      background-size: contain; */

  /* ✅ คงเหลือไว้แค่ส่วนควบคุม Stacking และ Stretched */
  z-index: 0;
  /* ต่ำกว่าลายน้ำ */
  background-color: transparent;
  /* ให้เห็น Gradient ของ .hero-full */

  /* เพิ่ม Transition เพื่อให้การเปลี่ยนผ่านนุ่มนวล */
  transition: opacity 1.5s ease;
}

/* effect เบา ๆ */
.hero-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* background:
    radial-gradient(520px 360px at 78% 24%, rgba(107,76,246,.12), transparent 60%),
    radial-gradient(520px 360px at 86% 52%, rgba(34,197,94,.10), transparent 60%);*/
  animation: floatFX 10s ease-in-out infinite;
}

@keyframes floatFX {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* =========================
   HERO CONTENT (ข้อความด้านขวา)
   ========================= */
.hero-content {
  position: relative;
  z-index: 5;
  padding-top: clamp(24px, 14vh, 70px);
  padding-bottom: 32px;
  padding-right: 50px;
}

.hero-title h1 {
  font-weight: 800;
  color: #5755ac;
  line-height: 1.2;
  font-size: clamp(1.7rem, 2.2vw, 2.2rem);
  margin-bottom: .6rem;
}

.hero-quote h2 {
  font-weight: 800;
  color: #5755ac;
  font-size: 1.15rem;
  margin-bottom: .85rem;
}

.hero-desc {
  color: var(--muted);
  line-height: 1.9;
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
}

/* CTA buttons */
.btn-pill {
  border-radius: 999px;
  padding: .85rem 1.35rem;
  font-weight: 700;
  border: 0;
  box-shadow: 0 18px 55px rgba(10, 15, 25, .12);
  transition: .15s ease;
  white-space: nowrap;
}

.btn-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 70px rgba(10, 15, 25, .16);
}

.btn-green {
  background: linear-gradient(180deg, #7be07d, #67a968);
  color: #fff;
}

/* กำหนดสถานะปกติ */
.btn-pink {
  background-color: #E5175A;
  color: #fff !important;
  /* บังคับให้ตัวอักษรขาว */
}

/* กำหนดสถานะตอน Hover */
.btn-pink:hover {
  background-color: #E5175A;
  /* ปรับให้เข้มขึ้นนิดนึงเวลาวางเมาส์ */
  color: #000000 !important;
  /* ปรับให้ตัวอักษรยังเป็นสีขาว ไม่กลายเป็นสีอื่น */
  transform: translateY(-2px);
  box-shadow: 0 24px 70px rgba(10, 15, 25, .16);
}

/* reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: revealUp .7s ease forwards;
}

.reveal.d2 {
  animation-delay: .12s;
}

.reveal.d3 {
  animation-delay: .22s;
}

.reveal.d4 {
  animation-delay: .32s;
}

@keyframes revealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   OUR SERVICES (อยู่ใน hero เดียวกัน)
   ========================= */
.hero-services {
  position: relative;
  z-index: 2;
  padding-top: 24px;
  padding-bottom: 80px;
  transition: margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. สั่งลบ Margin เมื่อมีการเปิดหน้าวิทยากร (ใช้ !important เพื่อชนะค่า Default) */
body.is-showing-instructor .hero-services {
  margin-top: 0px !important;
}



/* watermark ภูเขาน้ำแข็ง (ถ้ามีไฟล์) */
.hero-services::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background-image: url("imgs/bg/iceberg-watermark.png"); */
  background-repeat: no-repeat;
  background-position: center 10%;
  background-size: min(720px, 86vw);
  opacity: .16;
  z-index: 0;
  pointer-events: none;
}

.hero-services>* {
  position: relative;
  z-index: 2;
}

/* heading */
.services-head h2 {
  font-weight: 700;
  color: #31363a;
  margin-bottom: 8px;
  font-size: 3rem;
}

.services-head .lead {
  max-width: 1200px;
  margin: 0 auto;
  font-weight: 700;
  color: #111;
  padding-bottom: 0;
}

.services-head .sub {

  margin: 0px auto 0;
  font-size: 1rem;
  line-height: 1.65;
  color: #000;
}

/* =========================
   SERVICES GRID + CROSS
   ========================= */
.services-grid {
  position: relative;
  padding-top: 16px;
}

/* กล่อง cross */
.services-cross {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 92%);
  height: min(800px, 90vh);
  z-index: 1;
  pointer-events: none;
}

/* เส้นตั้งกลาง */
.services-cross::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 10px;
  height: 90%;
  background: rgba(84, 45, 122, .85);
}

/* เส้นนอน 2 เส้น (บน + ล่าง) ใช้ background ซ้อน 2 เส้น */
.services-cross::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 95%;

  background:
    linear-gradient(rgba(84, 45, 122, .85), rgba(84, 45, 122, .85)) 50% 15% / 100% 10px no-repeat,
    linear-gradient(rgba(84, 45, 122, .85), rgba(84, 45, 122, .85)) 50% 54% / 100% 10px no-repeat,
    linear-gradient(rgba(84, 45, 122, .85), rgba(84, 45, 122, .85)) 50% 95% / 100% 10px no-repeat;
}

/* สำหรับ iPad และ Tablet (ช่วงหน้าจอ 768px - 1199px) */
@media (max-width: 1199px) {
  .services-cross {
    /* ปรับความสูงของกล่องเส้นให้พอดีกับกลุ่มการ์ดบน iPad */
    height: min(700px, 95vh) !important;
    top: 50%;
  }

  .services-cross::after {
    /* ปรับเปอร์เซ็นต์ตำแหน่งเส้นนอน 3 เส้น ให้ตรงกับช่องว่างของการ์ดบน iPad */
    /* ปรับตัวเลข 18%, 52%, 88% ตามความเหมาะสมของหน้าจอคุณ */
    background:
      linear-gradient(rgba(84, 45, 122, .85), rgba(84, 45, 122, .85)) 50% 18% / 100% 10px no-repeat,
      linear-gradient(rgba(84, 45, 122, .85), rgba(84, 45, 122, .85)) 50% 52% / 100% 10px no-repeat,
      linear-gradient(rgba(84, 45, 122, .85), rgba(84, 45, 122, .85)) 50% 88% / 100% 10px no-repeat !important;
  }

  /* หากบน iPad เส้นตั้งกลางดูหนาไป หรือตำแหน่งเบี้ยว */
  .services-cross::before {
    height: 95% !important;
  }
}

/* สำหรับ Mobile (จอเล็กกว่า 767px) แนะนำให้ซ่อนเส้นเพราะการ์ดจะเรียงแถวเดี่ยว */
@media (max-width: 767px) {
  .services-cross {
    display: none;
  }
}


/* =========================
   SERVICE CARDS
   ========================= */

.service-card {
  position: relative;
  z-index: 3;
  background: rgba(255, 255, 255, .98);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 14px 38px rgba(10, 10, 20, .14);
  padding: 25px 30px 25px;
  min-height: 250px;
  max-width: 500px;
  max-height: none;
  /* เพิ่มบรรทัดนี้เพื่อให้กล่องอยู่ตรงกลาง */
  margin: 0 auto;
}

.service-head {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;
  margin-bottom: 8px;
  text-align: center;

  /* เพิ่มส่วนนี้เข้าไปครับ */
  min-height: 80px;
  /* ปรับตัวเลขนี้ตามความเหมาะสม (ปกติ 2 บรรทัดจะใช้ประมาณ 70-90px) */
  width: 100%;
}

.service-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* box-shadow: 0 10px 26px rgba(0,0,0,.18);*/
  font-size: 30px;
  flex: 0 0 auto;
}

/* หัวข้อ Service: ใช้ clamp เพื่อให้มือถือเหลือ 24px และคอมเป็น 40px ตามที่คุณตั้งไว้ */
.service-title {
  font-size: clamp(22px, 3vw, 26px) !important;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.2;
  color: #0b1324;
}

.service-desc {
  font-size: clamp(13px, 1.5vw, 16px) !important;
  line-height: 1.7;
  color: #555;
  margin: 0;
  flex-grow: 1;
  /* ดันเนื้อหาให้กระจายตัวเต็มพื้นที่การ์ด */

  /* 2. ล็อกระยะห่างบรรทัดให้คงที่ */
  line-height: 1.6em;

  /* 3. สูตรคำนวณความสูงสำหรับ 4 บรรทัด (1.6em * 4 = 6.4em) */
  /* วิธีนี้จะทำให้พื้นที่ข้อความสูงเท่ากับ 4 บรรทัดเสมอ ไม่ว่าตัวหนังสือจะสั้นหรือยาว */
  height: 6.4em;

  overflow: hidden;
  /* กันเหนียวถ้าตัวหนังสือยาวเกิน 4 บรรทัดจริง ๆ */
  display: block;
  /* เปลี่ยนจาก d-flex เป็น block เพื่อให้การคุมบรรทัดแม่นยำ */
}

@media (min-width: 768px) and (max-width: 1199px) {
  .service-desc {
    /* ปรับฟอนต์ให้เล็กลงพอที่จะบีบให้เหลือ 4 บรรทัดบนจอ iPad */
    font-size: 12px !important;

    /* ล็อกบรรทัดให้เป๊ะ */
    line-height: 1.5em !important;
    height: 6em !important;
    /* (1.5em x 4 บรรทัด) */

    /* ถ้าตัวหนังสือยังยาวเกิน 4 บรรทัด ให้ขึ้นจุดไข่ปลา (...) กันเละ */
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .service-card {
    min-height: auto !important;
    /* ปล่อยความสูงให้ยืดหยุ่นตามฟอนต์ที่ย่อลง */
    max-height: none !important;
    padding: 20px !important;
    /* ลด Padding เพื่อเพิ่มพื้นที่ให้ตัวหนังสือ */
  }
}


/* icon colors */
.ico-pink {
  color: #e5175a;
  border: 3px solid #e5175a;
}

.ico-cyan {
  color: #0684c3;
}

.ico-blue {
  color: #1b75b0;
  border: 0px solid #1b75b0;
}

.ico-green {
  color: #b1c230;
}

.ico-teal {
  color: #36ba91;
}

.ico-navy {
  color: #415ea7;
}

/* =========================
   RESPONSIVE
   ========================= */
/* ต้องมีหน่วย px เสมอ */
@media (max-width: 991px) {
  .hero-services {
    position: relative;
    /* margin-top: 10px; */
    z-index: 2;
    padding-top: 24px;
    padding-bottom: 80px;
    /* เพิ่ม background-color: red; ไว้เช็คชั่วคราวก็ได้ครับว่าติดหรือยัง */
  }
}

@media (max-width: 991.98px) {
  .hero-content {
    padding-right: 16px;
  }

  .services-cross {
    display: none;
  }

  .hero-services {
    padding-bottom: 56px;
  }

  .hero-services::before {
    background-position: center 18%;
    background-size: min(560px, 92vw);
    opacity: .14;
  }

  .mobile-fade-in {
    opacity: 0;
    animation: simpleFade 0.8s ease forwards;
  }

  @keyframes simpleFade {
    to {
      opacity: 1;
    }
  }

  /* ซ่อน Cursor บนมือถือไปเลย */
  #typewriter-cursor {
    display: none !important;
  }

}

/* =========================
   SERVICES COLUMN SPACING
   ========================= */

/* default: mobile / tablet ไม่เพิ่ม padding */
.service-col-left,
.service-col-right {
  padding-left: 0;
  padding-right: 0;
}

/* desktop ขึ้นไป ค่อยเว้นระยะ */
@media (min-width: 992px) {
  .service-col-left {
    padding-right: 40px;
  }

  .service-col-right {
    padding-left: 40px;
  }
}

@media (min-width: 1200px) {
  .service-col-left {
    padding-right: 48px;
  }

  .service-col-right {
    padding-left: 48px;
  }
}

@media (max-width: 991.98px) {
  .service-col-left {
    padding-bottom: 20px;
  }
}


/* =========================
   SOCIAL PROOF SECTION
   ========================= */
.social-proof-section {
  position: relative;
  padding: 70px 0;
  background-image: url("imgs/bg/bg-socialprooft.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.sp-title {
  font-weight: 600;
  font-size: 3.5rem;
  margin-bottom: 24px;
  color: #394657;
}

.sp-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sp-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 26px;
  color: #374151;

  font-size: 1.3rem;
  line-height: 1.65;
  /* ✅ ให้สวยเมื่อข้อความยาว */
}

/* icon ซ้าย: ล็อกขนาดให้คงที่ */
.sp-ico {
  flex: 0 0 34px;
  /* ✅ ทำให้เป็นคอลัมน์คงที่ */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #ffbc1a;
  color: #e5175a;
  font-weight: 800;
  font-size: 18px;
  margin-top: .12em;
  /* ✅ จัด baseline กับบรรทัดแรก */
}

/* ข้อความ: เป็นบล็อกเดียว ขึ้นบรรทัดก็ยังอยู่คอลัมน์เดิม */
.sp-text {
  flex: 1;
  display: inline;
  /* ✅ สำคัญ: ไม่แยกเป็นกล่องใหม่ */
}

/* ไฮไลท์ 20 ปี */
.sp-highlight {
  color: #16a34a;
  font-weight: 800;
  font-size: 1.35em;
  /* ✅ ให้ใหญ่กว่าข้อความปกติ */
  white-space: nowrap;
  /* ✅ กันคำว่า “20 ปี” แตกบรรทัด */
  margin-left: .25em;
}

/* เน้นคำอื่น */
.sp-strong {
  font-weight: 800;
}



/* image */
.sp-image-wrap {
  position: relative;
}

.sp-image {
  max-width: 100%;
  height: auto;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 991.98px) {
  .social-proof-section {
    padding: 50px 0;
    text-align: center;
  }

  .sp-title {
    font-size: 1.6rem;
  }

  .sp-list li {
    justify-content: center;
    text-align: left;
  }

  .sp-image-wrap {
    margin-top: 30px;
  }
}

/* ===== SECTION WHY ENMARK ===== */
.section-why {
  position: relative;
  background: #f6f7f9;
  overflow: visible;
  /* ✅ อนุญาตให้รูปยื่นไปทับ section ถัดไป */
  padding: 56px 0 90px;
  /* ✅ เผื่อพื้นที่ด้านล่างสำหรับ overlap */
}

.section-why .sp-wrap {
  position: relative;
  z-index: 2;
}



/* ===== SECTION NEXT (รองรับรูปที่ยื่นลงมา) ===== */
.section-next {
  position: relative;
  background: #ffffff;
  padding: 96px 0 60px;
  /* ✅ เผื่อด้านบนให้ไม่ชนรูป */
  z-index: 1;
}

/* ===== mobile ปรับไม่ให้รูปใหญ่เกิน ===== */
@media (max-width: 991.98px) {
  .section-why {
    padding: 44px 0 80px;
  }

  .sp-image {
    right: 12px;
    bottom: -55px;
    width: min(240px, 55vw);
  }

  .section-next {
    padding-top: 90px;
  }
}

@media (max-width: 575.98px) {
  .sp-image {
    right: 8px;
    bottom: -45px;
    width: 210px;
  }
}

/* section บนต้องเป็น reference ให้ absolute */
.section-top {
  position: relative;
  overflow: visible;
  /* ให้รูปยื่นออกได้ */
}

.sp-image {
  position: absolute;
  right: -70px;
  bottom: -475px;
  z-index: 20;
  width: 250px;
  height: auto;
  pointer-events: none;
}

/* section ล่างเผื่อที่ให้รูป (กันชนหัวข้อ) */
.section-bottom {
  padding-top: 70px;
  /* >= abs(bottom) + ขนาดรูปครึ่งนึง */
}

/* responsive */
@media (max-width: 991.98px) {
  .sp-image {
    right: 16px;
    bottom: -45px;
    width: 100px;
  }

  .section-bottom {
    padding-top: 60px;
  }
}

@media (max-width: 575.98px) {
  .sp-image {
    right: 12px;
    bottom: -40px;
    width: 90px;
  }

  .section-bottom {
    padding-top: 56px;
  }
}

/* ===== Logo Marquee ===== */
.slder-logo {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 14px 0;
  background: rgba(255, 255, 255, .35);
}

/* ทำขอบเฟดซ้าย/ขวาให้ดูเนียน (optional แต่แนะนำ) */
.slder-logo::before,
.slder-logo::after {
  content: "";
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.slder-logo::before {
  left: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
}

.slder-logo::after {
  right: 0;
  background: linear-gradient(270deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
}

/* track ที่วิ่ง */
.slder-logo .slider {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: logo-marquee 1000s linear infinite;
  gap: 30px;
  /* ระยะห่างโลโก้ */
}

/* 1 ชุดโลโก้ */
.slder-logo .logos {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* โลโก้แต่ละอัน */
.slder-logo .logo-item img {
  height: 100px;
  /* ✅ คุมให้สูงเท่ากัน */
  width: auto;
  max-width: 160px;
  /* กันโลโก้ยาวเกิน */
  object-fit: contain;
  display: block;
  filter: grayscale(10%);
  opacity: .95;
}

/* hover (optional) */
.slder-logo .logo-item img:hover {
  filter: none;
  opacity: 1;
}

/* keyframes เลื่อนครึ่งหนึ่ง (เพราะเราซ้ำ 2 ชุด) */
@keyframes logo-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ลด motion สำหรับคนตั้งค่า reduce motion */
@media (prefers-reduced-motion: reduce) {
  .slder-logo .slider {
    animation: none;
  }
}

/* nowcss */
.services-grid-service {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 คอลัมน์บน Desktop */
  gap: 25px;
  align-items: stretch;
  /* ให้การ์ดทุกใบยืดสูงเท่ากันในแต่ละแถว */
}

.icon-box {
  margin-bottom: 15px;
  /* เพิ่มระยะห่างด้านล่างของกล่องไอคอนก่อนถึงข้อความ */
  display: flex;
  /* ช่วยให้จัดรูปภาพตรงกลางได้ง่ายขึ้น */
  align-items: center;
}

/* การ์ดบริการ */
.service-card-service {
  /* background: #1162cc; */
  background: #f8fbff;
  padding: 40px;
  border-radius: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;

}

.services-grid-service .service-card-service:nth-child(even) {
  transform: translateY(50px);
  /* ดันลงมาทั้งใบ 50px */
}

/* การ์ดใบที่ 1 และ 3 (ตัวที่อยู่ซ้าย) */
.services-grid-service .service-card-service:nth-child(odd) {
  transform: translateY(20px);
  /* ดันขึ้นไปอีกนิด 20px */
}

@media (max-width: 820px) {

  .services-grid-service .service-card-service:nth-child(even),
  .services-grid-service .service-card-service:nth-child(odd) {
    transform: translateY(0);
    margin-bottom: 20px;
  }

  .services-grid-service {
    grid-template-columns: 1fr;
    /* ปรับให้เหลือแถวละ 1 อัน */
    gap: 20px;
    /* ลดระยะห่างระหว่างการ์ดนิดหน่อย */
    padding-bottom: 40px;
    /* ลด Padding ล่างลงเพราะไม่ต้องเยื้องเยอะ */
  }

  .services-grid-service .service-card-service {
    /* ล้างค่าการเยื้อง (Transform) ที่เราเคยทำไว้ */
    /* เพื่อให้บนมือถือมันเรียงตรงกัน ไม่งั้นจะดูเหมือนการ์ดเบี้ยว */
    transform: translateY(0) !important;
    margin-top: 0 !important;
    margin-bottom: 15px;
  }

  .services-grid-service .service-card-service h3 {
    font-size: 1.2rem;
    /* ปรับขนาดตัวอักษรให้พอดีกับจอมือถือ */
  }

}

/* ค่าเดิมของใบที่เป็นเลขคู่ */
.service-card-service:nth-child(even) {
  transform: translateY(50px);
}

/* ตอน Hover ต้องรักษาค่า translateY(50px) ไว้ด้วย */
.service-card-service:nth-child(even):hover {
  transform: translateY(40px) scale(1.02);
  /* ขยับขึ้นนิดนึงจากตำแหน่งเยื้องเดิม */
}

.service-card-service:nth-child(odd) {
  transform: translateY(20px);
}

/* ตอน Hover ต้องรักษาค่า translateY(50px) ไว้ด้วย */
.service-card-service:nth-child(odd):hover {
  transform: translateY(10px) scale(1.02);
  /* ขยับขึ้นนิดนึงจากตำแหน่งเยื้องเดิม */
}


.highlight-text {
  color: #27ae60;
  /* กำหนดให้เป็นสีเขียว */
  font-weight: bold;
  /* กำหนดให้เป็นตัวหนา */
  font-size: 2rem;
  /* กำหนดให้ขนาดใหญ่ขึ้น */
}

/*ผลงานล่าสุด*/
/* กรอบนอกของการ์ดข่าว */
.news-card {
  border: none;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
  background: #fff;
  height: 100%;
}

.news-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* ส่วนรูปภาพ */
.news-thumb {
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* ส่วนเนื้อหาภายใน */
.news-body {
  padding: 20px;
}

.news-label {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.news-body h5 a {
  color: #003366;
  /* สีน้ำเงินเข้มตามรูป */
  text-decoration: none;
  font-weight: 700;
  line-height: 1.4;
  display: block;
  margin-bottom: 15px;
}

.news-excerpt {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* ตัดข้อความให้เหลือ 3 บรรทัด */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* วันที่และจำนวนคนอ่าน */
.news-meta {
  font-size: 0.85rem;
  color: #999;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

/* จัดการระยะห่าง วันที่ กับ ชื่อบริษัท */
.news-meta-top {
  display: flex;
  justify-content: space-between;
  /* ผลักวันที่ไปซ้าย ชื่อบริษัทไปขวา */
  align-items: center;
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 15px;
}

.news-date i {
  margin-right: 5px;
}

/* ดีไซน์ News Card */
.news-card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  background: #fff;
  transition: transform 0.3s ease;
}

/* ทำให้การ์ดแต่ละใบเยื้องสูงต่ำไม่เท่ากัน (แบบรูปที่คุณส่งมา) */
.news-item:nth-child(1) {
  margin-top: 20px;
}

.news-item:nth-child(2) {
  margin-top: 60px;
}

.news-item:nth-child(3) {
  margin-top: 100px;
}

/* 3. กำหนดความสูงของการ์ดให้ต่างกัน (เพื่อให้ฐานเหลื่อม) */
.news-item:nth-child(1) .news-card {
  height: 450px;
}

.news-item:nth-child(2) .news-card {
  height: 470px;
}

/* ใบนี้ยาวสุด */
.news-item:nth-child(3) .news-card {
  height: 490px;
}

/* ส่วนรูปภาพ (แสดงสีเทาถ้าไม่มีรูป) */
.news-thumb {
  height: 220px;
  background-color: #aaa;
  /* สีเทาเข้มแบบในรูปตัวอย่าง */
  background-size: cover;
  background-position: center;
}

/* การตัดคำให้ดูเป็นระเบียบ 3 บรรทัด */
.news-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #666;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ปรับให้เรียงปกติบนมือถือ */
@media (max-width: 820px) {
  .news-item {
    margin-top: 0 !important;
    margin-bottom: 30px;
  }
}

/*หากท่านมีข้อสงสัยเพิ่มเติม*/
.contact-footer-section {
  /* ไล่เฉดสีจากม่วงอ่อนไปม่วงเข้มตามรูป */
  background: linear-gradient(to right, #b8a9ef, #6d2c91);
  padding: 60px 0;
  color: #fff;
}

.contact-title {
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 30px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* จัดเรียงฟอร์มเป็นแถวเดียว */
.contact-inline-form {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  /* ให้รองรับมือถือด้วยการขึ้นบรรทัดใหม่ */
}

.form-control-custom {
  flex: 1;
  min-width: 200px;
  max-width: 250px;
  height: 50px;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 0.9rem;
  color: #333;
}

.form-control-custom::placeholder {
  color: #bbb;
  font-weight: 500;
}

/* ปุ่มสีเหลืองทอง */
.btn-send-request {
  background-color: #ffb400;
  /* สีเหลืองตามรูป */
  color: #000;
  border: none;
  border-radius: 5px;
  padding: 0 30px;
  height: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 180px;
}

.btn-send-request:hover {
  background-color: #e6a200;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.contact-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-top: 10px;
}

/* ปรับจอมือถือ */
@media (max-width: 820px) {
  .contact-inline-form {
    flex-direction: column;
    align-items: center;
  }

  .form-control-custom {
    max-width: 100%;
    width: 100%;
  }

  .btn-send-request {
    width: 100%;
  }
}

/* ส่วนที่ควบคุมมิติ 3D ของ Container */
.hero-full {
  perspective: 1000px;
  /* ยิ่งค่าน้อย มิติจะยิ่งพุ่งแรง */
  overflow: hidden;
}

.hero-avatars-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

/* 1. ปรับให้ animation รันต่อกัน (บินเข้าเสร็จแล้วลอยต่อทันที) */
.ins-img {
  position: absolute;
  opacity: 0;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3));
  transform-style: preserve-3d;
  will-change: transform, opacity;
  /* ✅ จุดสำคัญ: เพิ่ม Transition ตรงนี้ */
  /* กำหนดให้ scale ใช้เวลา 0.6 วินาที และใช้ cubic-bezier เพื่อให้ดูนุ่มนวลมีมิติ */
  transition: scale 3s cubic-bezier(0.34, 1.3, 0.64, 1),
    filter 0.4s ease,
    z-index 0s;
  /* z-index ให้เปลี่ยนทันที */

  /* บินเข้า 1.5s แล้วเริ่มลอยวนไป (floating) หลังจากจบ 1.5s */
  animation: popIn 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards
}

/* ส่วนที่แก้ไขใหม่ */
.ins-img:hover {
  /* ใช้ scale property แยกต่างหาก แทนการใช้ transform: scale() */
  scale: 1.1 !important;

  /* เอฟเฟกต์แสงและเงาเดิมของคุณ */
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5)) brightness(1.1);

  z-index: 999;
  /* ให้รูปที่ Hover อยู่บนสุด */
  cursor: pointer;
}


/* สร้าง Animation การลอยเข้า */


/* 1. แก้ไข Animation การปรากฏตัวใหม่ */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0);
    /* เริ่มจากจุดเล็กๆ */
  }

  60% {
    transform: scale(1.15);
    /* ขยายให้ใหญ่กว่าปกตินิดนึงเพื่อให้ดูมีมิติ (Bounce) */
  }

  100% {
    opacity: 1;
    transform: scale(1);
    /* กลับมาขนาดปกติ */
  }
}


/* เรียกใช้งาน Animation โดยใส่ Delay ให้โผล่มาทีละคน */
/* .ins-img {
      animation: flyIn3D 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    } */

/* ตัวอย่างการวางพิกัดตำแหน่ง (คุณปรับตัวเลข % ตามความสวยงามได้เลย) */
.ins-1 {
  top: 6%;
  left: 11.5%;
  width: 190px;
  animation-delay: 1.6s;
}

.ins-2 {
  top: 6%;
  left: 25%;
  width: 170px;
  animation-delay: 2.2s;
}

.ins-3 {
  top: 6%;
  left: 37%;
  width: 150px;
  animation-delay: 1.8s;
}

.ins-4 {
  top: 35%;
  left: 7%;
  width: 155px;
  animation-delay: 2.6s;
}

.ins-5 {
  top: 33%;
  left: 20%;
  width: 145px;
  animation-delay: 2.0s;
}

.ins-6 {
  top: 31%;
  left: 33%;
  width: 160px;
  animation-delay: 2.8s;
}

.ins-7 {
  top: 53%;
  left: 14%;
  width: 170px;
  animation-delay: 2.4s;
}

.ins-8 {
  top: 49%;
  left: 26%;
  width: 150px;
  animation-delay: 2.0s;
}

.ins-1-back {
  top: 6%;
  left: 11.5%;
  width: 190px;
  animation-delay: 0.2s;
}

.ins-2-back {
  top: 6%;
  left: 25%;
  width: 170px;
  animation-delay: 0.2s;
}

.ins-3-back {
  top: 6%;
  left: 37%;
  width: 150px;
  animation-delay: 0.2s;
}

.ins-4-back {
  top: 35%;
  left: 7%;
  width: 155px;
  animation-delay: 0.2s;
}

.ins-5-back {
  top: 33%;
  left: 20%;
  width: 145px;
  animation-delay: 0.2s;
}

.ins-6-back {
  top: 31%;
  left: 33%;
  width: 160px;
  animation-delay: 0.2s;
}

.ins-7-back {
  top: 53%;
  left: 14%;
  width: 170px;
  animation-delay: 0.2s;
}

.ins-8-back {
  top: 49%;
  left: 26%;
  width: 150px;
  animation-delay: 0.2s;
}

/* หลังจากบินเข้ามาเสร็จ ให้ใช้ Animation ลอยเบาๆ (Floating) ต่อ */
.ins-img-final {
  animation: floating 3s ease-in-out infinite;
}

/* 2. คลาสสำหรับรอบที่ 2 (กลับมาจากหน้าประวัติ) */
.ins-img-static {
  position: absolute !important;
  opacity: 1 !important;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3));
  transform: translate3d(0, 0, 0);
  animation: floating 4s ease-in-out infinite;
  /* ลอยทันทีไม่ต้องบิน */
  cursor: pointer;
  pointer-events: auto !important;
}

/* 1. ปรับให้ animation รันต่อกัน (บินเข้าเสร็จแล้วลอยต่อทันที) */
.ins-img-back {
  position: absolute;
  opacity: 1 !important;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3));
  transform: translate3d(0, 0, 0);
  animation: floating 4s ease-in-out infinite;
  /* ลอยทันทีไม่ต้องบิน */
  cursor: pointer;
  pointer-events: auto !important;
  /* บินเข้า 1.5s แล้วเริ่มลอยวนไป (floating) หลังจากจบ 1.5s */
  animation: popIn 1.5s cubic-bezier(0.175, 0.88, 0.32, 1.275) forwards;


}

/* Animation ลอยเบาๆ หลังจากเข้าที่แล้ว */
@keyframes floating {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -10px, 50px);
  }

  /* ให้ลอยขึ้นและพุ่งออกมาข้างหน้าเล็กน้อย */
}

/* สไตล์ของขีด Cursor */
#typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 1.1em;
  background-color: currentColor;
  margin-left: 0px;
  vertical-align: middle;
  line-height: 1;
}

/* คลาสสำหรับการกระพริบ */
.cursor-blink {
  animation: blink 0.8s infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@media (max-width: 991.98px) {

  /* สั่งให้พื้นที่ส่วนนี้มีเว้นระยะจากขอบจอซ้าย-ขวา */
  .hero-services {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* บังคับให้ส่วนบรรยายขยายตัวเพื่อดัน Layout ให้เท่ากัน */
.service-desc {
  flex-grow: 1;
  margin-bottom: 0;
  text-align: center;
  /* จัดกลางตัวอักษรตามที่คุณตั้งค่าไว้ */
}

/* สำหรับ Desktop ให้สูงเท่ากัน แต่บนมือถือให้สูงตามเนื้อหาจริง (เพื่อประหยัดพื้นที่) */
@media (max-width: 991.98px) {
  .service-card {
    min-height: auto;
  }
}

/* .service-head {
      width: 100%;
      margin-bottom: 15px;
    } */

.service-ico {
  flex: 0 0 auto;
  /* ป้องกันไอคอนโดนบีบหรือขยายกว้างเกินไป */
}

@media (max-width: 991.98px) {
  .service-head {
    /* บนมือถือ ถ้าอยากให้ไอคอนอยู่บนข้อความ ให้เปลี่ยนเป็น column */
    /* flex-direction: column; */
    justify-content: center;
  }
}

/* การสลับเนื้อหาด้วย HTMX */
.htmx-swapping #hero-master-container {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.htmx-settling #hero-master-container {
  opacity: 1;
}

/* ตกแต่งองค์ประกอบในการ์ดประวัติ */
.instructor-profile-overlay {
  animation: fadeIn 0.5s ease forwards;
}

.avatar-circle-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #004aad, #287ced);
  border-radius: 50%;
  opacity: 0.1;
}

.stat-box {
  position: absolute;
  background: #fff;
  padding: 15px 25px;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  font-weight: bold;
  color: #004aad;
  z-index: 3;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* บังคับให้เนื้อหาที่โหลดมาใหม่แสดงผลทันที */
#hero-master-container>.instructor-profile-overlay {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: fadeInNew 0.5s ease-in;
}

@keyframes fadeInNew {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



/* คลาสพุ่ง: ใส่ !important บังคับทุกอย่าง */
.zoom-out-spark {
  animation: none !important;
  z-index: 99999 !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: scale(15) !important;
  opacity: 0 !important;
  /* ให้จางหายไปตอนพุ่งสุดทาง */
  pointer-events: none !important;
}

/* ทำให้ Container ของ Hero ไม่ตัดรูปที่ล้นออกมาขณะพุ่ง */
#hero-master-container {
  overflow: visible !important;
}

/* ปรับแต่งปุ่มให้เหมือนในรูปภาพ */
.btn-instructor-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f2f2f2;
  /* สีเทาอ่อนตามรูป */
  color: #000000 !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 18px;
  padding: 20px 10px;
  border-radius: 50px;
  /* ความโค้งมนแบบมนมาก */
  transition: all 0.3s ease;
  text-align: center;
  width: 100%;
  border: none;
}

/* เส้นสีส้มใต้ข้อความ */
.orange-line {
  display: block;
  width: 60%;
  height: 3px;
  background-color: #FDB835;
  /* สีส้มตามรูป */
  margin-top: 8px;
  border-radius: 2px;
}

/* เอฟเฟกต์เวลา Hover */
.btn-instructor-menu:hover {
  background-color: #e8e8e8;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.entraining-logo {
  height: 120px;
  display: flex;
  align-items: center;
}

/* --- ส่วนของ Loader เมื่อกลายเป็น Background --- */
#enmark-loader-overlay {
  transition: background-color 1s ease, z-index 0s linear 1s !important;
}

#enmark-loader-overlay.is-background {
  z-index: -1 !important;
  /* ผลักไปอยู่หลังสุด */
  background-color: #fcfdfe !important;
  /* เปลี่ยนสีพื้นหลังให้สว่างเข้ากับเว็บ */
  pointer-events: none;
}

#enmark-loader-overlay.is-background #enmark-loader-container {
  opacity: 0.12;
  /* ทำให้จางลงเป็นลายน้ำ (ปรับตามชอบ 0.1 - 0.2) */
  transform: scale(1.15);
  /* ขยายขนาดขึ้นนิดหน่อยให้ดูเป็น Background */
  transition: opacity 1.2s ease, transform 1.5s ease;
}

/* เมื่อไม่ได้อยู่ที่หน้า Home ให้สั่งซ่อนทิ้งทันที */
#enmark-loader-overlay.is-hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}


/* --- ส่วนของเนื้อหาหน้า Index (ให้ค่อยๆ Fade In ขึ้นมาทับ) --- */
/* เราจะคุมผ่าน class .content-ready ที่จะใส่ให้ <body> */
.hero-full,
header,
.section-bottom {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

body.content-ready .hero-full,
body.content-ready header,
body.content-ready .section-bottom {
  opacity: 1;
  transform: translateY(0);
}


.first-div {
  height: 120px;
}

/* 📱 ปิดการแสดงผลเมื่อเป็นหน้าจอมือถือและแท็บเล็ต (กว้างไม่เกิน 991px) */
@media (max-width: 991px) {
  .first-div {
    display: none !important;
  }
}


/* --- Social Media Profiles --- */
.instructor-social {
  display: flex;
  gap: 15px;
  margin-top: 25px;
}

.social-link {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  font-size: 20px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: #f0f2f5;
  color: #4b5563;
}

.social-link:hover {
  transform: translateY(-5px);
  color: #fff;
}

/* สีเฉพาะตามแบรนด์ */
.social-link.fb:hover {
  background-color: #1877F2;
  box-shadow: 0 10px 20px rgba(24, 119, 242, 0.3);
}

.social-link.be:hover {
  background-color: #0057ff;
  box-shadow: 0 10px 20px rgba(0, 87, 255, 0.3);
}

.social-link.dribbble:hover {
  background-color: #ea4c89;
  box-shadow: 0 10px 20px rgba(234, 76, 137, 0.3);
}

.social-link.line:hover {
  background-color: #06C755;
  box-shadow: 0 10px 20px rgba(6, 199, 85, 0.3);
}

/* สถานะปกติของทั้งสองส่วน */
.services-transition {
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* ใช้ Bezier เพื่อให้มันเด้งๆ นุ่มๆ */
  opacity: 1;
  transform: scale(1);
}

/* ✅ สถานะตอนที่ "หายไป" (ย่อเล็กลง) */
.service-shrink {
  opacity: 0 !important;
  transform: scale(0.2) !important;
  /* ย่อเหลือครึ่งเดียว */
  pointer-events: none;
}

/* ✅ สถานะเริ่มต้นของของใหม่ (ต้องเล็กไว้ก่อนโชว์) */
.service-prepare-zoom {
  opacity: 0;
  transform: scale(0.2);
}


.fade-out {
  opacity: 0;
  transform: translateY(20px);
}

/* ✅ 1. อนิเมชั่นกระโดดดึ๋งๆ */
@keyframes textBounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-6px);
  }

  60% {
    transform: translateY(-3px);
  }
}

/* ✅ 2. อนิเมชั่นแสงวิ้งๆ (Shimmer) */
@keyframes textGlow {
  0% {
    text-shadow: 0 0 0px #fdb83500;
  }

  50% {
    text-shadow: 0 0 15px rgba(253, 184, 53, 0.8), 0 0 20px rgba(253, 184, 53, 0.4);
    color: #ffde59;
  }

  100% {
    text-shadow: 0 0 0px rgba(253, 184, 53, 0);
  }
}

.clickable-concept {
  display: inline-block;
  /* สำคัญ: ต้องเป็น inline-block ถึงจะกระโดดได้ */
  color: #004aad;
  transition: all 0.3s ease;
  /* สั่งให้เล่นอนิเมชั่น */
  animation: textBounce 3s ease infinite, textGlow 3s ease infinite;
}

/* เพิ่มลูกเล่นตอนเอาเมาส์ไปวาง (Hover) */
.clickable-concept:hover {
  color: #fdb835 !important;
  /* เปลี่ยนเป็นสีชมพู Enmark ตอนจ่อเมาส์ */
  transform: scale(1.1);
  animation-play-state: paused;
  /* หยุดเต้นตอนคนจะกด */
}

/* ✅ อนิเมชั่นเด้งขึ้นลงเบาๆ (Floating) */
@keyframes imageFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

/* ✅ ตกแต่งรูปภาพให้ทันสมัย */
.modern-img-frame {
  animation: imageFloat 4s ease-in-out infinite;
  /* สั่งให้เด้ง */
  transition: all 0.3s ease;
}

/* ✅ สไตล์ปุ่มปิดมุมบนขวา */
.btn-close-concept {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 45px;
  height: 45px;
  background-color: #f0f2f5;
  color: #4b5563;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 10;
}

.btn-close-concept:hover {
  background-color: #e5175a;
  /* สีชมพู Enmark */
  color: #ffffff;
  transform: rotate(90deg) scale(1.1);
  /* หมุนและขยายเล็กน้อยตอน hover */
  box-shadow: 0 5px 15px rgba(229, 23, 90, 0.3);
}

/* เพิ่มให้ปุ่มดูชัดขึ้นบนจอมือถือ */
@media (max-width: 767px) {
  .btn-close-concept {
    top: 15px;
    right: 15px;
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
}

/* ถ้ามีคลาสนี้อยู่ ให้แก้ color เป็น #000 */
.nested-list {
  color: #000 !important;
}

.nested-list li {
  color: #000 !important;
}

.hero-title {
  color: #000 !important;
}

/* เจาะจงไปที่ li ภายใต้ nested-list */
.nested-list li {
  font-size: clamp(10px, 3vw, 22px) !important;
  /* ปรับตัวหลังเป็น 22px หรือตามชอบเพื่อให้ไม่ใหญ่เกินไปบนคอม */
  line-height: 1.5;
  /* ช่วยให้ระยะบรรทัดอ่านง่ายขึ้น */
}

/* *********************************************** */
/* *********************************************** */
/* *********************************************** */
/* *********************************************** */
/* --- Bottom Navigation Styles --- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: #ffffff;
  box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.nav-item-bottom {
  text-decoration: none !important;
  color: #4b5563;
  display: flex;
  flex-direction: column;
  font-size: 20px;
  transition: all 0.3s ease;
}

.nav-item-bottom i {
  font-size: 20px;
  margin-bottom: 4px;
}

.nav-item-bottom.active,
.nav-item-bottom:hover {
  color: #004aad;
  /* สีน้ำเงิน Enmark */
}

/* เพิ่ม Padding ให้ Body เพื่อไม่ให้ Bottom Nav ทับเนื้อหาด้านล่างสุดของเว็บ */
@media (max-width: 991.98px) {
  body {
    padding-bottom: 70px;
  }
}

/* จังหวะที่เนื้อหากำลังถูกสลับ */
.htmx-swapping #main-content-area {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

/* จังหวะที่เนื้อหาใหม่ลงตัวแล้ว */
.htmx-settling #main-content-area {
  opacity: 1;
}

/* 2. สำหรับจังหวะที่กดปุ่ม Back (History Navigation) */
/* HTMX จะเติม class .htmx-settling เมื่อเนื้อหาใหม่ (จาก cache) ลงตัว */
#main-content-area.htmx-settling {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

/* ตั้งค่าเริ่มต้นให้พร้อมสำหรับ Animation (ถ้าจำเป็น) */
#main-content-area {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

/* จังหวะที่กด Back กลับมาหน้าเดิม */
#main-content-area.htmx-settling {
  animation: simpleFadeIn 0.4s ease-in;
}

@keyframes simpleFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* *********************************************** */
/* *********************************************** */
/* *********************************************** */
/* *********************************************** */

/* *********************************************** */
/* *********************************************** */
/* *********************************************** */
/* *********************************************** */
/* header-style */
/* สีสำหรับเมนูที่กำลังใช้งานอยู่ */
.main-nav .nav-link.active,
.nav-item-bottom.active {
  color: #6b4cf6 !important;
  /* สีม่วง Enmark */
  pointer-events: none !important;
  cursor: default !important;
}

.nav-item-bottom.active i,
.nav-item-bottom.active span {
  color: #6b4cf6 !important;
  pointer-events: none;
  cursor: default !important;
}

/* *********************************************** */
/* *********************************************** */
/* *********************************************** */
/* *********************************************** */

/* style-profile */

/* เพิ่ม CSS เล็กน้อยเพื่อให้ Filter ดูสมูทขึ้น */
    .news-item-em {
      transition: opacity 0.3s ease;
    }

.btn-back-simple:hover {
  color: #5755ac !important;
  transform: translateX(-3px);
}

.instructor-hero-section {
  border-radius: 20px;
  position: relative;
  /* ไล่เฉดสีจากสีขาวตรงกลาง ไปหาสีน้ำเงินที่ขอบ (Radial Gradient) */
  background: white;
  overflow: hidden;
  /* ใส่เงาด้านขวาและด้านล่างให้ดูนูนออกมาจากพื้นหลังหลัก */
  box-shadow: 20px 0 30px rgba(0, 0, 0, 0.5);
}

/* สร้างเส้น Grid เล็กๆ เป็นพื้นหลัง */
.instructor-hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image:
    linear-gradient(to right, rgba(0, 100, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 100, 255, 0.08) 1px, transparent 1px);
  background-size: 30px 30px;
  /* ขนาดของช่องตาราง */
  pointer-events: none;
  z-index: 0;
}

/* ดันเนื้อหาให้อยู่เหนือเส้น Grid */
.instructor-hero-section .container {
  position: relative;
  z-index: 1;
}

/* สไตล์ปุ่มกลับแบบใหม่ที่อยู่ใน Section */
.btn-back-inside {
  position: absolute;
  top: 20px;
  left: 25px;
  z-index: 10;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  /* พื้นหลังขาวจางๆ ดูทันสมัย */
  backdrop-filter: blur(4px);
  /* ทำเอฟเฟกต์กระจกฝ้า */
  color: #000000;
  /* ตัวอักษรสีขาว */
  padding: 6px 14px;
  border-radius: 50px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.btn-back-inside:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateX(-5px);
  /* เลื่อนไปทางซ้ายเล็กน้อยเวลาชี้ */
  color: #fff !important;
}

/* section what new  */
.news-section {
  padding: 80px 0;
  background: var(--bg-soft);
  font-family: 'Prompt', sans-serif;
}

/* Filter Buttons - ปรับให้สไตล์เดียวกับ "ดูทั้งหมด" */
.news-filter {
  margin-bottom: 40px;
}

.filter-btn {
  border: none;
  /* เอาเส้นขอบออกเพื่อให้ดู Minimal เหมือน Link */
  background: transparent;
  /* พื้นหลังโปร่งแสง */
  padding: 8px 16px;
  border-radius: 8px;
  /* เปลี่ยนจากวงรีเป็นเหลี่ยมมนเหมือนปุ่มดูทั้งหมด */
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  color: #cf7ff6;
  /* สีตัวอักษรปกติ */
  font-size: 15px;
  text-decoration: none;
}

/* เมื่อปุ่มถูกเลือก (Active) หรือเอาเมาส์ไปวาง (Hover) */
.filter-btn.active,
.filter-btn:hover {
  background: #cf7ff633;
  /* สีม่วงอ่อนๆ แบบโปร่งแสงเหมือนปุ่มดูทั้งหมด */
  color: #662180;
  /* สีตัวอักษรปกติ */
  /* เปลี่ยนเป็นสีม่วงเข้มของแบรนด์ */
  text-decoration: underline;
  /* เพิ่มขีดเส้นใต้เมื่อ Hover เหมือน Link */
  box-shadow: none;
  /* เอาเงาออกเพื่อให้ดูสะอาดตา */
}

/* ปรับระยะห่างระหว่างปุ่มให้ดูโปร่งขึ้น */
.news-filter-container .gap-2 {
  gap: 0.5rem !important;
}

/* News Card */
.news-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.news-card:hover {
  transform: translateY(-10px);
}

.news-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badge-cat {
  position: absolute;
  top: 15px;
  left: 15px;
  background: var(--accent-color);
  color: #fff;
  padding: 4px 15px;
  border-radius: 5px;
  font-size: 13px;
}

.news-body {
  padding: 25px;
}

.news-body time {
  font-size: 13px;
  color: #999;
  display: block;
  margin-bottom: 10px;
}

.news-body h3 {
  font-size: clamp(18px, 2vw, 22px);
  margin-bottom: 15px;
  line-height: 1.4;
}

.news-body h3 a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}

.news-body h3 a:hover {
  color: var(--accent-color);
}

.news-body p {
  font-size: 15px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 20px;
}

.read-more {
  font-weight: 600;
  color: var(--accent-color);
  text-decoration: none;
  font-size: 14px;
}

/* สไตล์สำหรับปุ่มลูกศร < > */
.nav-btn-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #555;
}

.nav-btn-arrow:hover {
  background: #5755ac;
  /* สีม่วงตามธีมเดิมของคุณ */
  color: #fff;
  border-color: #5755ac;
}

/* สไตล์สำหรับปุ่ม ดูทั้งหมด */
.view-all-link {
  text-decoration: none;
  background: #5755ac;
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  margin-left: 10px;
  padding: 8px 16px;
  border-radius: 8px;
  transition: background 0.3s;
}

.view-all-link:hover {
  background: rgba(84, 45, 122, 0.05);
  text-decoration: underline;
}

/* ปรับแต่งสำหรับมือถือ: ถ้าที่ระนาบเดียวกันไม่พอ ให้จัดกึ่งกลางทั่งคู่ */
@media (max-width: 767px) {
  .news-filter-container {
    justify-content: center !important;
    flex-direction: column;
  }

  .news-nav {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
  }
}

/* ซ่อนปุ่มลูกศรเฉพาะบนมือถือ */
@media (max-width: 767px) {
  .nav-btn-arrow {
    display: none !important;
  }

  /* ปรับระยะห่างของส่วนควบคุมใหม่ให้ดูสมดุลเมื่อปุ่มหายไป */
  .news-nav {
    justify-content: center;
    width: 100%;
    margin-top: 10px;
  }
}

/* ควบคุม Container ให้เลื่อนได้แบบ 3 ใบครึ่ง */
.news-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* กันส่วนที่ล้นออกนอกจอ */
  padding: 10px 0 30px;
}

.news-slider-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  gap: 20px;
  padding-bottom: 15px;
  scrollbar-width: none;
  /* ซ่อน Scrollbar Firefox */
  -ms-overflow-style: none;
  /* ซ่อน Scrollbar IE/Edge */
}

.news-slider-container::-webkit-scrollbar {
  display: none;
  /* ซ่อน Scrollbar Chrome/Safari */
}

/* คำนวณขนาดการ์ด: (100% / 3.5 ใบ) เพื่อให้เห็นเสี้ยวใบที่ 4 */
.news-slider-item {
  flex: 0 0 calc(28.5% - 15px);
  scroll-snap-align: start;
  min-width: 300px;
  /* กันการ์ดจิ๋วเกินไปในจอเล็ก */
}

/* ปรับสัดส่วนสำหรับ iPad / Mobile */
@media (max-width: 1199px) {
  .news-slider-item {
    flex: 0 0 calc(45% - 10px);
    /* เห็น 2 ใบครึ่ง */
  }
}

@media (max-width: 767px) {
  .news-slider-item {
    flex: 0 0 85%;
    /* เห็น 1 ใบกับอีกนิดนึง */
  }
}

/* คงสไตล์ Card เดิมของคุณแต่ปรับความสูงให้เท่ากัน */
.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0 !important;
}

.news-thumb {
  height: 100%;
  background-size: cover;
  background-position: center;
}

.news-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.news-excerpt {
  flex-grow: 1;
}

.whats-new-1 {
  padding: 80px 0 0px;
}

.whats-new-2 {
  padding: 10px 0 50px;
}

.news-body h4 {
  margin: 6px 0 8px;
  font-weight: 700;
  line-height: 1.3;
  font-size: 1.05rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: prompt, Helvetica, Arial, sans-serif !important;
}

 .news-card:hover {
    transform: scale(1.04);
  }
  .news-card {
      transition: transform .35s ease;
  }

   /* เพิ่ม CSS เล็กน้อยเพื่อให้ Filter ดูสมูทขึ้น */
    .news-item-em {
      transition: opacity 0.3s ease;
    }

    .filter-btn {
      transition: all 0.2s ease;
    }

    /* สำหรับหน้า contact */
    
  .emk-contact-hero-wrap {
    padding: 72px 0 28px;
  }

  .emk-contact-hero-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.75);
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(12px);
    border-radius: 30px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
  }

  .emk-contact-hero-card::before {
    content: "";
    position: absolute;
    inset: auto -80px -80px auto;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, #f9ecff 0%, rgba(13,110,253,0) 72%);
    pointer-events: none;
  }

  .emk-contact-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #f9ecff ;
    color: #4b22b5;
    font-weight: 600;
    font-size: .92rem;
  }

  .emk-contact-hero-title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    color: #0f172a;
    margin-bottom: 14px;
  }

  .emk-contact-hero-sub {
    font-size: 1.04rem;
    color: #64748b;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.8;
  }

  .emk-contact-content-section {
    padding: 12px 0 70px;
  }

  .emk-contact-card {
    border: 0;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 60px rgba(15, 23, 42, .07);
    overflow: hidden;
  }

  .emk-contact-header {
    background: linear-gradient(135deg, #401ba5  0%, #662180  55%, #cf7ff6  100%);
    color: #fff;
    padding: 32px 34px;
    position: relative;
    overflow: hidden;
  }

  .emk-contact-header::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
  }

  .emk-contact-body {
    padding: 34px;
  }

  .emk-contact-info-panel {
    border-radius: 24px;
    padding: 26px 24px;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
    border: 1px solid #e7eefb;
    height: 100%;
  }

  .emk-contact-info-panel-dark {
    background: linear-gradient(135deg, #004aad 0%, #0d6efd 100%);
    border: 0;
    box-shadow: 0 18px 45px rgba(13, 110, 253, .18);
    color: #fff;
  }

  .emk-contact-info-panel-dark .emk-contact-info-title,
  .emk-contact-info-panel-dark p,
  .emk-contact-info-panel-dark li,
  .emk-contact-info-panel-dark .emk-contact-emk-contact-info-list span {
    color: #fff;
  }

  .emk-contact-info-panel-dark .emk-contact-info-icon {
    background: rgba(255,255,255,.16);
    color: #fff;
    border-color: rgba(255,255,255,.12);
  }

  .emk-contact-info-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #edf4ff;
    color: #0d6efd;
    font-size: 1.1rem;
    font-weight: 700;
    border: 1px solid #dbeafe;
    margin-bottom: 16px;
  }

  .emk-contact-info-title {
    font-size: 1.18rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
  }

  .emk-contact-info-panel p,
  .emk-contact-info-panel li {
    color: #475569;
    line-height: 1.85;
    margin-bottom: 0;
  }

  .emk-contact-emk-contact-info-list {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
  }

  .emk-contact-emk-contact-info-list:last-child {
    margin-bottom: 0;
  }

  .emk-contact-emk-contact-info-list strong {
    display: block;
    color: inherit;
    margin-bottom: 2px;
  }

  .emk-contact-form-shell {
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid #edf2fa;
    padding: 28px 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  }

  .emk-contact-form-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
  }

  .emk-contact-form-sub {
    color: #64748b;
    margin-bottom: 24px;
    line-height: 1.8;
  }

  .form-label {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
  }

  .form-control,
  .form-select {
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid #d8e4f5;
    background: #fff;
    padding: 12px 16px;
    color: #0f172a;
    box-shadow: none !important;
    transition: all .2s ease;
  }

  textarea.form-control {
    min-height: 140px;
    resize: vertical;
  }

  .form-control::placeholder,
  .form-select {
    color: #94a3b8;
  }

  .form-control:focus,
  .form-select:focus {
    border-color: #7fb2ff;
    box-shadow: 0 0 0 4px rgba(13,110,253,.10) !important;
    background: #fff;
  }

  .emk-contact-required-mark {
    color: #ef4444;
    margin-left: 4px;
  }

  .emk-contact-security-box {
    border-radius: 18px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
    border: 1px solid #dbeafe;
    margin-bottom: 18px;
  }

  .emk-contact-security-code {
    display: inline-block;
    padding: 8px 14px;
    margin-left: 8px;
    border-radius: 12px;
    background: #662180  ;
    color: #fff;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 1rem;
  }

  .emk-contact-btn-submit {
    min-height: 56px;
    border-radius: 18px;
    border: 0;
    background: linear-gradient(135deg, #ffde59 0%, #ffd54a 100%);
    color: #111827;
    font-weight: 700;
    font-size: 1.02rem;
    box-shadow: 0 14px 30px rgba(255, 222, 89, .35);
    transition: all .25s ease;
  }

  .emk-contact-btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(255, 222, 89, .42);
    color: #111827;
  }

  .emk-contact-mini-note {
    font-size: .95rem;
    color: #64748b;
    line-height: 1.75;
  }

  .emk-contact-footer-section {
    background: linear-gradient(135deg, #401ba5  0%, #662180  55%, #cf7ff6  100%);
    color: #fff;
    padding: 58px 0 62px;
    position: relative;
    overflow: hidden;
  }

  .emk-contact-footer-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 15% 20%, rgba(255,255,255,.10), transparent 22%),
      radial-gradient(circle at 80% 70%, rgba(255,255,255,.08), transparent 25%);
    pointer-events: none;
  }

  .emk-contact-footer-title {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
  }

  .emk-contact-footer-subtitle {
    color: rgba(255,255,255,.86);
    font-size: 1rem;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
  }

  .emk-contact-footer-box {
    border-radius: 22px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    padding: 24px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
    font-size: 1.02rem;
    line-height: 1.9;
  }

  .emk-contact-footer-box a {
    color: #fff;
    text-decoration: none;
  }

  .emk-contact-footer-box a:hover {
    text-decoration: underline;
  }

  .card-emk {
    box-shadow: none;
    width: 100%!important;
    height: auto!important;
  }

  @media (max-width: 991.98px) {
    .emk-contact-body {
      padding: 24px 18px;
    }

    .emk-contact-header {
      padding: 24px 20px;
    }

    .emk-contact-form-shell {
      padding: 22px 18px;
    }
  }

  @media (max-width: 767.98px) {
    .emk-contact-hero-wrap {
      padding: 48px 0 20px;
    }

    .emk-contact-hero-card {
      border-radius: 24px;
    }

    .emk-contact-card {
      border-radius: 22px;
    }

    .emk-contact-security-code {
      display: inline-block;
      margin-left: 0;
      margin-top: 8px;
    }
  }
  .emk-search-page {
                background:
                    radial-gradient(circle at top left, rgba(13, 110, 253, .10), transparent 24%),
                    radial-gradient(circle at bottom right, rgba(102, 45, 128, .08), transparent 28%),
                    linear-gradient(180deg, #f8fbff 0%, #f5f7fc 100%);
                min-height: 100vh;
                padding-bottom: 90px;
            }

            .emk-search-hero {
                padding: 52px 0 18px;
            }

            .emk-search-hero-card {
                background: rgba(255, 255, 255, .86);
                border: 1px solid rgba(255, 255, 255, .86);
                border-radius: 28px;
                box-shadow: 0 20px 60px rgba(15, 23, 42, .08);
                padding: 34px;
            }

            .emk-search-kicker {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 8px 14px;
                border-radius: 999px;
                background: #edf4ff;
                color: #004aad;
                font-weight: 600;
                font-size: .92rem;
            }

            .emk-search-title {
                font-size: clamp(2rem, 4vw, 3rem);
                line-height: 1.15;
                font-weight: 800;
                color: #0f172a;
                margin: 16px 0 12px;
            }

            .emk-search-desc {
                color: #64748b;
                line-height: 1.85;
                margin: 0;
                max-width: 920px;
            }

            .emk-search-shell {
                padding: 16px 0 0;
            }

            .emk-search-panel {
                background: #fff;
                border-radius: 28px;
                border: 1px solid #eef2f8;
                box-shadow: 0 18px 50px rgba(15, 23, 42, .06);
                overflow: hidden;
            }

            .emk-search-panel-head {
                background: linear-gradient(135deg, #662180  0%, #cf7ff6  100%);
                color: #fff;
                padding: 26px 30px;
            }

            .emk-search-panel-head h2 {
                margin: 0 0 8px;
                font-size: 1.5rem;
                font-weight: 700;
            }

            .emk-search-panel-head p {
                margin: 0;
                opacity: .9;
                line-height: 1.7;
            }

            .emk-search-panel-body {
                padding: 28px;
            }

            .emk-search-tip-row {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin-bottom: 18px;
            }

            .emk-search-tip-chip {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 9px 14px;
                border-radius: 999px;
                background: #f3f6fb;
                border: 1px solid #e3eaf5;
                color: #5b6472;
                font-size: .92rem;
                text-decoration: none;
            }

            .emk-search-tip-chip:hover {
                color: #004aad;
                background: #edf4ff;
            }

            .emk-search-note {
                font-size: .96rem;
                color: #64748b;
                line-height: 1.8;
                margin-bottom: 18px;
            }

            .emk-search-box-wrap {
                background: linear-gradient(180deg, #fbfdff 0%, #f7faff 100%);
                border: 1px solid #e8eef8;
                border-radius: 22px;
                padding: 18px;
            }

            .emk-search-box-wrap .gsc-control-cse,
            .emk-search-box-wrap .gsc-control-cse-en {
                border: 0 !important;
                background: transparent !important;
                padding: 0 !important;
            }

            .emk-search-box-wrap .gsc-input-box {
                border-radius: 16px !important;
                border: 1px solid #dbe4f2 !important;
                background: #fff !important;
                box-shadow: none !important;
                min-height: 54px !important;
            }

            .emk-search-box-wrap input.gsc-input {
                background: transparent !important;
                font-family: "Prompt", sans-serif !important;
                padding: 12px 14px !important;
            }

            .emk-search-box-wrap .gsc-search-button-v2 {
                border-radius: 14px !important;
                background: linear-gradient(135deg, #662d80 0%, #8c40a8 100%) !important;
                border: 0 !important;
                padding: 14px 18px !important;
            }

            .emk-search-box-wrap .gsc-result {
                border-bottom: 1px solid #eef2f8 !important;
                padding: 18px 0 !important;
            }

            .emk-search-box-wrap .gs-title,
            .emk-search-box-wrap .gs-title b {
                font-family: "Prompt", sans-serif !important;
                color: #004aad !important;
                text-decoration: none !important;
            }

            .emk-search-box-wrap .gs-snippet,
            .emk-search-box-wrap .gs-bidi-start-align,
            .emk-search-box-wrap .gs-visibleUrl {
                font-family: "Prompt", sans-serif !important;
            }

            .emk-search-box-wrap .gsc-results .gsc-cursor-box .gsc-cursor-page {
                border-radius: 10px !important;
                border: 1px solid #dbe4f2 !important;
                background: #fff !important;
                color: #334155 !important;
                text-decoration: none !important;
                padding: 8px 12px !important;
                margin-right: 6px !important;
            }

            .emk-search-box-wrap .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
                background: #004aad !important;
                color: #fff !important;
                border-color: #004aad !important;
            }

            @media (max-width: 767.98px) {

                .emk-search-hero-card,
                .emk-search-panel-body {
                    padding: 22px;
                }
            }