.elementor-21 .elementor-element.elementor-element-116c221{--display:flex;--min-height:189px;--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;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-21 .elementor-element.elementor-element-116c221:not(.elementor-motion-effects-element-type-background), .elementor-21 .elementor-element.elementor-element-116c221 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://identitydermatology.com/wp-content/uploads/2026/03/Desktop-1536x202.png");background-size:contain;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-21 .elementor-element.elementor-element-46ecaea{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:center;}.elementor-21 .elementor-element.elementor-element-46ecaea .elementor-heading-title{font-family:var( --e-global-typography-c4ea17d-font-family ), Sans-serif;font-size:var( --e-global-typography-c4ea17d-font-size );font-weight:var( --e-global-typography-c4ea17d-font-weight );color:#FFFFFF;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-21 .elementor-element.elementor-element-7a89e64{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:80px;--padding-bottom:80px;--padding-left:150px;--padding-right:80px;}.elementor-21 .elementor-element.elementor-element-7a89e64.e-con{--align-self:center;}.elementor-21 .elementor-element.elementor-element-ac72d10{--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;--justify-content:center;}.elementor-21 .elementor-element.elementor-element-ac72d10.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-slides .elementor-slide-heading{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-slides .elementor-slide-description{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-slides .elementor-slide-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-21 .elementor-element.elementor-element-bc1be31 .elementor-repeater-item-5411c23 .swiper-slide-bg{background-color:#833ca3;background-image:url(https://identitydermatology.com/wp-content/uploads/2026/03/11201-scaled.png);background-size:cover;}.elementor-21 .elementor-element.elementor-element-bc1be31 .elementor-repeater-item-92cf86b .swiper-slide-bg{background-color:#833ca3;background-image:url(https://identitydermatology.com/wp-content/uploads/2026/03/11202-scaled.png);background-size:cover;}.elementor-21 .elementor-element.elementor-element-bc1be31 .elementor-repeater-item-bb09ad8 .swiper-slide-bg{background-color:#833ca3;background-image:url(https://identitydermatology.com/wp-content/uploads/2026/03/11203-scaled.png);background-size:cover;}.elementor-21 .elementor-element.elementor-element-bc1be31 .elementor-repeater-item-df482b7 .swiper-slide-bg{background-color:#833ca3;background-image:url(https://identitydermatology.com/wp-content/uploads/2026/03/11204-scaled.png);background-size:cover;}.elementor-21 .elementor-element.elementor-element-bc1be31 .elementor-repeater-item-873b2e0 .swiper-slide-bg{background-color:#833ca3;background-image:url(https://identitydermatology.com/wp-content/uploads/2026/03/11205-scaled.png);background-size:cover;}.elementor-21 .elementor-element.elementor-element-bc1be31 .elementor-repeater-item-e0d2b22 .swiper-slide-bg{background-color:#833ca3;background-image:url(https://identitydermatology.com/wp-content/uploads/2026/03/11206-scaled.png);background-size:cover;}.elementor-21 .elementor-element.elementor-element-bc1be31 .elementor-repeater-item-8874e00 .swiper-slide-bg{background-color:#833ca3;background-image:url(https://identitydermatology.com/wp-content/uploads/2026/03/1120-scaled.png);background-size:cover;}.elementor-21 .elementor-element.elementor-element-bc1be31 .swiper-slide{transition-duration:calc(5000ms*1.2);height:400px;}.elementor-21 .elementor-element.elementor-element-bc1be31 .swiper-slide-contents{max-width:66%;}.elementor-21 .elementor-element.elementor-element-bc1be31 .swiper-slide-inner{text-align:center;}.elementor-21 .elementor-element.elementor-element-6706f6b{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-21 .elementor-element.elementor-element-255d372{width:var( --container-widget-width, 102.461% );max-width:102.461%;--container-widget-width:102.461%;--container-widget-flex-grow:0;}.elementor-21 .elementor-element.elementor-element-255d372.elementor-element{--flex-grow:0;--flex-shrink:0;}@media(min-width:768px){.elementor-21 .elementor-element.elementor-element-7a89e64{--content-width:100%;}.elementor-21 .elementor-element.elementor-element-ac72d10{--width:56.292%;}}@media(max-width:1024px){.elementor-21 .elementor-element.elementor-element-46ecaea .elementor-heading-title{font-size:var( --e-global-typography-c4ea17d-font-size );}}@media(max-width:767px){.elementor-21 .elementor-element.elementor-element-116c221.e-con{--align-self:center;}.elementor-21 .elementor-element.elementor-element-46ecaea{padding:30px 30px 30px 30px;}.elementor-21 .elementor-element.elementor-element-46ecaea.elementor-element{--align-self:center;}.elementor-21 .elementor-element.elementor-element-46ecaea .elementor-heading-title{font-size:var( --e-global-typography-c4ea17d-font-size );}.elementor-21 .elementor-element.elementor-element-7a89e64{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for slides, class: .elementor-element-bc1be31 *//* 1. ตั้งค่าปุ่มหลัก (Container) */
.elementor-swiper-button {
    background-color: rgba(255, 255, 255, 0.5) !important; /* สีขาวโปร่งใส */
    width: 40px !important;  /* ความกว้าง (คือรัศมีของครึ่งวงกลม) */
    height: 80px !important; /* ความสูง */
    display: flex !important;
    align-items: center !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
}

/* 2. ทำปุ่มซ้าย (Previous) เป็นครึ่งวงกลมขวา */
.elementor-swiper-button-prev {
    left: 0 !important; /* ชิดขอบซ้ายของรูปพอดี */
    border-radius: 0 50px 50px 0 !important; /* มนเฉพาะฝั่งขวา */
    justify-content: flex-start !important;
    padding-left: 5px !important; /* ดันลูกศรออกมาจากขอบนิดนึง */
}

/* 3. ทำปุ่มขวา (Next) เป็นครึ่งวงกลมซ้าย */
.elementor-swiper-button-next {
    right: 0 !important; /* ชิดขอบขวาของรูปพอดี */
    border-radius: 50px 0 0 50px !important; /* มนเฉพาะฝั่งซ้าย */
    justify-content: flex-end !important;
    padding-right: 5px !important; /* ดันลูกศรออกมาจากขอบนิดนึง */
}

/* 4. ปรับสีและขนาด Icon SVG */
.elementor-swiper-button svg {
    fill: #3498db !important; /* เปลี่ยนเป็นสีฟ้าตาม Ref */
    width: 20px !important;
    height: auto !important;
}

/* 5. Hover Effect ให้สีชัดขึ้น */
.elementor-swiper-button:hover {
    background-color: rgba(255, 255, 255, 0.8) !important;
}




/* --- สำหรับทำเส้นขีดแบบ inactive (อันที่ยังไม่ได้เลือก) --- */
.swiper-pagination-bullet {
    width: 30px !important;      /* ความกว้างของเส้นขีด ปรับได้ตามชอบ */
    height: 6px !important;     /* ความสูงของเส้นขีด ปรับได้ตามชอบ */
    display: inline-block !important;
    background-color: #E0E0E0 !important; /* สีขาวโปร่งใส/เทาอ่อน สำหรับอันที่ยังไม่ได้เลือก */
    border-radius: 4px !important;   /* ความมน ปรับให้เข้ากับความสูง */
    opacity: 0.8 !important;         /* ความโปร่งใสเริ่มต้น */
    transition: all 0.3s ease !important; /* เพิ่ม transition ให้ smooth */
    margin: 0 4px !important;        /* เว้นระยะห่างระหว่างเส้น */
}

/* --- สำหรับทำเส้นขีดแบบ active (อันที่ถูกเลือกอยู่) --- */
.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #002D40 !important; /* สีน้ำเงินเข้มตาม ref หรือสีที่คุณต้องการ */
    opacity: 1 !important;                 /* ให้สีชัดเจน */
    width: 30px !important;                /* โดยปกติจะกว้างเท่าเดิม */
}

/* --- แถม: เอฟเฟกต์ตอน hover --- */
.swiper-pagination-bullet:hover {
    opacity: 1 !important;
    background-color: #A0A0A0 !important; /* สีเวลาเอาเมาส์ไปวาง */
}/* End custom CSS */