.elementor-2408 .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-2408 .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-2408 .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-2408 .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-2408 .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-2408 .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-2408 .elementor-element.elementor-element-53bf2ed{--padding-top:32px;--padding-bottom:50px;--padding-left:32px;--padding-right:32px;}.elementor-2408 .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-2408 .elementor-element.elementor-element-87b8ed4{--padding-top:0px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-2408 .elementor-element.elementor-element-4e6b7ee{--e-image-carousel-slides-to-show:3;}}@media(min-width:768px){.elementor-2408 .elementor-element.elementor-element-53bf2ed{--width:1024%;}.elementor-2408 .elementor-element.elementor-element-fb38f08{--content-width:1024px;}.elementor-2408 .elementor-element.elementor-element-87b8ed4{--content-width:1024px;}}@media(max-width:767px){.elementor-2408 .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-2408 .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-2408 .elementor-element.elementor-element-87b8ed4{--padding-top:0px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-2408 .elementor-element.elementor-element-4e6b7ee{--e-image-carousel-slides-to-show:1;}}/* Start custom CSS for container, class: .elementor-element-53bf2ed *//* =========================================================
   SIRIRAJ EDUCATION — IMAGE CARD SLIDER
   Elementor Image Carousel / Swiper

   Container class : edu-card-slider-wrap
   Widget class    : edu-card-slider
   ========================================================= */


/* =========================================================
   1. OUTER CONTAINER
   ========================================================= */

.edu-card-slider-wrap {
    position: relative !important;

    /*
     * ซ่อนเฉพาะส่วนที่เลยขอบ viewport
     * แต่ยังอนุญาตให้ slider ภายใน bleed ออกด้านขวา
     */
    overflow-x: clip !important;
    overflow-y: visible !important;

    /*
     * ป้องกัน CSS containment ของ Elementor
     * ตัดพื้นที่ interaction ของ slide ที่ล้นออกมา
     */
    contain: none !important;
}


/* Elementor Container หลายเวอร์ชัน */
.edu-card-slider-wrap > .e-con-inner,
.edu-card-slider-wrap > .elementor-container,
.edu-card-slider-wrap .edu-card-slider-inner {
    overflow: visible !important;
    contain: none !important;
}


/* =========================================================
   2. MAIN SLIDER WIDGET
   ========================================================= */

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

    position: relative !important;
    z-index: 10;

    /*
     * สำคัญ:
     * ไม่ขยาย widget หลอกด้วย width calc()
     * ให้ Swiper เป็นตัวจัด slide เอง
     */
    width: 100% !important;
    max-width: 100% !important;

    overflow: visible !important;
    contain: none !important;

    padding-bottom: 78px;
}


/* =========================================================
   3. ปลดการ Clip ทุกชั้นของ Elementor / Swiper
   ========================================================= */

.edu-card-slider > .elementor-widget-container,
.edu-card-slider .elementor-image-carousel-wrapper,
.edu-card-slider .swiper,
.edu-card-slider .swiper-container {
    position: relative;

    overflow: visible !important;

    clip-path: none !important;
    -webkit-clip-path: none !important;

    mask: none !important;
    -webkit-mask: none !important;

    contain: none !important;
}


/*
 * ตัว Swiper ให้อยู่เหนือ Container / Widget รอบข้าง
 * เพื่อให้ slide ที่โผล่ออกมายังรับ click ได้
 */
.edu-card-slider .swiper,
.edu-card-slider .swiper-container {
    z-index: 10;
}


/* =========================================================
   4. SWIPER TRACK
   ========================================================= */

.edu-card-slider .swiper-wrapper {
    position: relative !important;

    align-items: stretch;

    overflow: visible !important;
    contain: none !important;

    clip-path: none !important;
    -webkit-clip-path: none !important;

    /*
     * ให้ลูก slide ที่ล้นออกมารับ mouse ได้
     */
    pointer-events: auto !important;
}


/* =========================================================
   5. SLIDES
   ========================================================= */

.edu-card-slider .swiper-slide {
    position: relative !important;

    height: auto !important;

    overflow: visible !important;

    visibility: visible !important;
    pointer-events: auto !important;

    contain: none !important;

    z-index: 2;
}


/*
 * Elementor / Swiper บางเวอร์ชันอาจลด interaction
 * ของ slide ที่อยู่นอก active group
 */
.edu-card-slider .swiper-slide-active,
.edu-card-slider .swiper-slide-next,
.edu-card-slider .swiper-slide-prev,
.edu-card-slider .swiper-slide-visible {
    pointer-events: auto !important;
}


/* =========================================================
   6. CARD / LINK
   ========================================================= */

.edu-card-slider .swiper-slide figure {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0 !important;

    overflow: hidden;

    border-radius: var(--slider-radius);

    pointer-events: auto !important;

    z-index: 3;
}


/*
 * รองรับทั้ง
 *
 * slide > a
 *
 * และ
 *
 * slide > figure > a
 */
.edu-card-slider .swiper-slide > a,
.edu-card-slider .swiper-slide figure > a {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0 !important;

    overflow: hidden;

    border-radius: var(--slider-radius);

    pointer-events: auto !important;
    cursor: pointer !important;

    z-index: 4;
}


/* =========================================================
   7. IMAGE
   ========================================================= */

.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);

    pointer-events: auto !important;
    cursor: pointer !important;

    transition:
        transform 0.35s ease;
}


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


/* =========================================================
   8. ป้องกัน Elementor element อื่นมาทับพื้นที่ Card
   ========================================================= */

.edu-card-slider {
    isolation: isolate;
}


/*
 * ทำให้ layer ของรูปอยู่เหนือ background /
 * decorative element ของ Container
 */
.edu-card-slider .elementor-image-carousel-wrapper {
    z-index: 10;
}


/* =========================================================
   9. NAVIGATION ARROWS
   ========================================================= */

.edu-card-slider .elementor-swiper-button {
    position: absolute !important;

    top: auto !important;
    bottom: -64px !important;

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

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

    padding: 0 !important;

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

    background: #ffffff;

    color: #171717 !important;

    transform: none !important;

    cursor: pointer;

    z-index: 30;

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


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


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


/* Hover */
.edu-card-slider .elementor-swiper-button:hover {
    background: #171717;
    color: #ffffff !important;
}


/* SVG / Icon */
.edu-card-slider .elementor-swiper-button svg,
.edu-card-slider .elementor-swiper-button i {
    width: 23px !important;
    height: 23px !important;

    font-size: 23px !important;

    fill: currentColor;
}


/* Disabled */
.edu-card-slider .elementor-swiper-button.swiper-button-disabled {
    opacity: 0.35 !important;

    pointer-events: none !important;
    cursor: default;
}


/* =========================================================
   10. PAGINATION
   ========================================================= */

.edu-card-slider .swiper-pagination {
    position: absolute !important;

    top: auto !important;
    bottom: -48px !important;

    /*
     * จุดตรงกับขอบซ้ายของการ์ดแรก
     */
    left: 0 !important;
    right: auto !important;

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

    gap: 8px;

    width: auto !important;

    margin: 0 !important;

    transform: none !important;

    z-index: 30;
}


/* Dot */
.edu-card-slider .swiper-pagination-bullet {
    width: 7px !important;
    height: 7px !important;

    margin: 0 !important;

    border-radius: 999px;

    background: #b8b8b8 !important;

    opacity: 1 !important;

    cursor: pointer;

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


/* Dot hover */
.edu-card-slider .swiper-pagination-bullet:hover {
    background: #666666 !important;

    transform: scale(1.12);
}


/* Active Dot */
.edu-card-slider .swiper-pagination-bullet-active {
    width: 24px !important;

    background: #171717 !important;
}


/* =========================================================
   11. DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

    .edu-card-slider {
        width: 100% !important;
        max-width: 100% !important;

        padding-bottom: 78px;
    }


    /*
     * สำคัญ:
     * Slide ที่ล้นออกทางขวาต้องอยู่เหนือ sibling
     */
    .edu-card-slider .swiper-slide {
        pointer-events: auto !important;
    }

}


/* =========================================================
   12. TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .edu-card-slider {
        width: 100% !important;
        max-width: 100% !important;

        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 .elementor-swiper-button-next {
        right: 0 !important;
    }


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

}


/* =========================================================
   13. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .edu-card-slider {
        width: 100% !important;
        max-width: 100% !important;

        padding-bottom: 66px;
    }


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


    /* Arrow */
    .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 .elementor-swiper-button-next {
        right: 0 !important;
    }


    /* Pagination */
    .edu-card-slider .swiper-pagination {
        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;
    }

}/* End custom CSS */