.elementor-3945 .elementor-element.elementor-element-53bf2ed{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--overflow:hidden;--border-radius:20px 20px 20px 20px;--padding-top:0px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-3945 .elementor-element.elementor-element-fb38f08{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--padding-top:010px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-3945 .elementor-element.elementor-element-30ca327 .elementor-heading-title{font-size:var( --e-global-typography-1bd98de-font-size );font-weight:var( --e-global-typography-1bd98de-font-weight );line-height:var( --e-global-typography-1bd98de-line-height );color:var( --e-global-color-text );}.elementor-3945 .elementor-element.elementor-element-87b8ed4{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3945 .elementor-element.elementor-element-4e6b7ee{--e-image-carousel-slides-to-show:3;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-3945 .elementor-element.elementor-element-4e6b7ee .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-radius:20px 20px 20px 20px;}@media(max-width:1024px){.elementor-3945 .elementor-element.elementor-element-53bf2ed{--padding-top:32px;--padding-bottom:50px;--padding-left:32px;--padding-right:32px;}.elementor-3945 .elementor-element.elementor-element-30ca327 .elementor-heading-title{font-size:var( --e-global-typography-1bd98de-font-size );line-height:var( --e-global-typography-1bd98de-line-height );}.elementor-3945 .elementor-element.elementor-element-87b8ed4{--padding-top:0px;--padding-bottom:0100px;--padding-left:0px;--padding-right:0px;}.elementor-3945 .elementor-element.elementor-element-4e6b7ee{--e-image-carousel-slides-to-show:3;}}@media(min-width:768px){.elementor-3945 .elementor-element.elementor-element-53bf2ed{--width:1024%;}.elementor-3945 .elementor-element.elementor-element-fb38f08{--content-width:1024px;}.elementor-3945 .elementor-element.elementor-element-87b8ed4{--content-width:1024px;}}@media(max-width:767px){.elementor-3945 .elementor-element.elementor-element-53bf2ed{--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:16px;--padding-bottom:50px;--padding-left:16px;--padding-right:16px;}.elementor-3945 .elementor-element.elementor-element-30ca327 .elementor-heading-title{font-size:var( --e-global-typography-1bd98de-font-size );line-height:var( --e-global-typography-1bd98de-line-height );}.elementor-3945 .elementor-element.elementor-element-4e6b7ee{--e-image-carousel-slides-to-show:1;}}/* Start custom CSS for container, class: .elementor-element-53bf2ed *//* =========================================
   OUTER SECTION
   ========================================= */

.edu-card-slider-wrap {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.edu-card-slider-wrap .e-con-inner,
.edu-card-slider-wrap .elementor-container,
.edu-card-slider-inner {
  overflow: visible !important;
}


/* =========================================
   MAIN SLIDER
   วิธีนี้คือ "ขยาย widget ออกไปทางขวาจริง"
   ไม่ใช่แค่ปล่อย overflow แล้วตัดด้วย clip-path
   ========================================= */

.edu-card-slider {
  --slider-gap: 24px;
  --slider-radius: 20px;

  position: relative;
  overflow: visible !important;

  /*
   * ขยายความกว้างออกจาก container ด้านขวาไปจนเกือบสุดจอ
   * ทำให้เวลาเลื่อน การ์ดจะดันออกไปด้านขวาจริง
   */
  width: calc(100% + ((100vw - 100%) / 2));
  max-width: none;

  padding-bottom: 78px;
}

.edu-card-slider > .elementor-widget-container {
  overflow: visible !important;
}

.edu-card-slider .elementor-image-carousel-wrapper,
.edu-card-slider .swiper,
.edu-card-slider .swiper-container {
  overflow: visible !important;
}


/* =========================================
   SWIPER WRAPPER / TRACK
   ========================================= */

.edu-card-slider .swiper-wrapper {
  align-items: stretch;
}

.edu-card-slider .swiper-slide {
  height: auto !important;
}


/* =========================================
   CARD
   ========================================= */

.edu-card-slider .swiper-slide figure,
.edu-card-slider .swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  overflow: hidden;
  border-radius: var(--slider-radius);
}

.edu-card-slider .swiper-slide img {
  display: block;
  width: 100% !important;
  height: auto;
  aspect-ratio: 0.77;
  object-fit: cover;
  object-position: center;
  border-radius: var(--slider-radius);
  transition: transform 0.35s ease;
}

.edu-card-slider .swiper-slide:hover img {
  transform: scale(1.025);
}


/* =========================================
   ARROWS
   ========================================= */

.edu-card-slider .elementor-swiper-button {
  top: auto !important;
  bottom: -64px !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 64px !important;
  height: 42px !important;
  padding: 0;

  border: 2px solid #171717;
  border-radius: 999px;

  background: #fff;
  color: #171717 !important;

  transform: none !important;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

.edu-card-slider .elementor-swiper-button-prev {
  left: auto !important;
  right: 76px !important;
}

.edu-card-slider .elementor-swiper-button-next {
  left: auto !important;
  right: 0 !important;
}

.edu-card-slider .elementor-swiper-button:hover {
  background: #171717;
  color: #fff !important;
}

.edu-card-slider .elementor-swiper-button svg,
.edu-card-slider .elementor-swiper-button i {
  width: 23px !important;
  height: 23px !important;
  font-size: 23px !important;
}

.edu-card-slider .elementor-swiper-button.swiper-button-disabled {
  opacity: 0.35 !important;
  pointer-events: none;
}


/* =========================================
   DOTS
   ถ้าจะใช้จุด ให้มันอยู่ซ้ายของปุ่ม
   ========================================= */

.edu-card-slider .swiper-pagination {
  top: auto !important;
  bottom: -48px !important;

  left: auto !important;
  right: 164px !important;

  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  width: auto !important;
  margin: 0 !important;
  transform: none !important;
}

.edu-card-slider .swiper-pagination-bullet {
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;

  border-radius: 999px;
  background: #b8b8b8 !important;
  opacity: 1 !important;

  transition:
    width 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.edu-card-slider .swiper-pagination-bullet:hover {
  background: #666 !important;
  transform: scale(1.12);
}

.edu-card-slider .swiper-pagination-bullet-active {
  width: 24px !important;
  background: #171717 !important;
}


/* =========================================
   DESKTOP ONLY
   เปิดโหมด "ดันออกขวา" เฉพาะจอใหญ่
   ========================================= */
@media (min-width: 1025px) {
  .edu-card-slider {
    width: calc(100% + ((100vw - 100%) / 2));
  }
}


/* =========================================
   TABLET
   ปิดการดันออกข้าง เพื่อไม่ให้ layout เพี้ยน
   ========================================= */
@media (max-width: 1024px) {
  .edu-card-slider {
    width: 100%;
    padding-bottom: 72px;
  }

  .edu-card-slider .elementor-swiper-button {
    bottom: -58px !important;
    width: 58px !important;
    height: 40px !important;
  }

  .edu-card-slider .elementor-swiper-button-prev {
    right: 68px !important;
  }

  .edu-card-slider .swiper-pagination {
    right: 148px !important;
    bottom: -44px !important;
  }
}


/* =========================================
   MOBILE
   มือถือเอาเรียบที่สุด ไม่ดันออกข้าง
   ========================================= */
@media (max-width: 767px) {
  .edu-card-slider {
    width: 100%;
    padding-bottom: 66px;
  }

  .edu-card-slider .swiper-slide figure,
  .edu-card-slider .swiper-slide a,
  .edu-card-slider .swiper-slide img {
    border-radius: 16px;
  }

  .edu-card-slider .elementor-swiper-button {
    bottom: -52px !important;
    width: 52px !important;
    height: 38px !important;
  }

  .edu-card-slider .elementor-swiper-button-prev {
    right: 60px !important;
  }

  .edu-card-slider .swiper-pagination {
    right: 128px !important;
    bottom: -40px !important;
    gap: 6px;
  }

  .edu-card-slider .swiper-pagination-bullet {
    width: 6px !important;
    height: 6px !important;
  }

  .edu-card-slider .swiper-pagination-bullet-active {
    width: 18px !important;
  }
}


/* =========================================
   แก้ให้การ์ดสุดท้ายตรงกับปุ่มด้านขวา
   ========================================= */

/*
 * ไม่ขยายตัว Slider ไปจนถึงขอบหน้าจอ
 * ให้กว้างเท่า Container เนื้อหาเดิม
 */
.edu-card-slider {
  --slider-bleed: 0px !important;

  width: 100% !important;
  max-width: 100% !important;

  overflow: visible !important;
}

/*
 * อนุญาตให้การ์ดถัดไปโผล่ออกทางขวา
 * แม้ตัว Slider กว้างแค่กรอบเนื้อหา
 */
.edu-card-slider > .elementor-widget-container,
.edu-card-slider .elementor-image-carousel-wrapper,
.edu-card-slider .swiper,
.edu-card-slider .swiper-container,
.edu-card-slider .swiper-wrapper {
  overflow: visible !important;
  clip-path: none !important;
}

/*
 * ปุ่มอยู่ชิดขอบขวาของกรอบเดียวกับการ์ดสุดท้าย
 */
.edu-card-slider .elementor-swiper-button-next {
  left: auto !important;
  right: 0 !important;
}

.edu-card-slider .elementor-swiper-button-prev {
  left: auto !important;
  right: 76px !important;
}

/*
 * จุดอยู่ตรงขอบซ้ายของการ์ดแรก
 */
.edu-card-slider .swiper-pagination {
  left: 0 !important;
  right: auto !important;
}


/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .edu-card-slider {
    width: 100% !important;
    max-width: 100% !important;
  }

  .edu-card-slider .elementor-swiper-button-next {
    right: 0 !important;
  }

  .edu-card-slider .elementor-swiper-button-prev {
    right: 68px !important;
  }
}


/* Mobile */
@media (max-width: 767px) {
  .edu-card-slider {
    width: 100% !important;
    max-width: 100% !important;
  }

  .edu-card-slider .elementor-swiper-button-next {
    right: 0 !important;
  }

  .edu-card-slider .elementor-swiper-button-prev {
    right: 60px !important;
  }
}/* End custom CSS */