/* ======================================================== */

/* section intro service detail  */

.custom-line-intro {
    border: none;
    height: 1px;
    background-color: #ffffff;
    margin: 2rem 0;
    opacity: 1 !important;
}

.intro-service {
    border-radius: 22px;
    background-color: #0C4242;
}

.col-7-custom {
    width: 55.8%;
}

.col-5-custom {
    width: 44.2%;
}

/* service detail */

/* <!-- section list service detail --> */
.custom-line-service-item {
    border: none;
    height: 1px;
    background-color: #687276;
    margin-top: 16px;
    margin-bottom: 40px;

}

.clinic-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.clinic-content {
    opacity: 0;
    /* Ban đầu ẩn */
    max-height: 0;
    /* Ban đầu chiều cao là 0 */
    display: block;
    /* Phần tử vẫn tồn tại trong DOM */
    margin-top: 13.5px;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

.clinic-content img {
    max-width: 100%;
    height: auto;
}

.view-branch-service-btn {
    width: fit-content;
    padding: 15px 35px;
    font-size: 16px;
    line-height: 20px;
    border-radius: 30px;
    background-color: #0C4242;
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
}

.view-branch-service-btn:hover {
    color: white;
}

.service-item-content {
    width: 100% !important;
}

.clinic-content.open {
    opacity: 1;
    max-height: 1000px;
    margin-top: 14px;
}

.clinic-header .toggle-arrow {
    transition: transform 0.3s ease;
}

.clinic-header .toggle-arrow.open {
    transform: rotate(180deg);
}

/* Videos */

#service-video-carousel .item-video {
    width: 70% !important;
    margin: 0 auto;
    height: 500px;
}

#service-video-carousel .owl-nav {
    position: absolute;
    top: 45.6%;
    left: 50%;
    right: 0;
    width: 86.2%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

#service-video-carousel .owl-prev,
#service-video-carousel .owl-next {
    width: 50px;
    height: 50px;
    background-color: #EFF6F4;
    color: #0C4242;
    font-size: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

#service-video-carousel .owl-prev:hover,
#service-video-carousel .owl-next:hover {
    cursor: pointer;
}

#service-video-carousel .owl-nav.disabled {
    display: none !important;
}

/* Quy trình điều trị */


.treatment-carousel-wrapper {
    width: 90%;
    margin: 0 auto;
    position: relative;
}

.step-treatment-card img {
    max-width: 100%;
    height: auto;
    display: block;
}

#service-treatment-carousel .owl-nav {
    position: absolute;
    top: 33.6%;
    left: 50%;
    right: 0;
    width: 111.5%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

#service-treatment-carousel .owl-prev,
#service-treatment-carousel .owl-next {
    width: 50px;
    height: 50px;
    background-color: #EFF6F4;
    color: #0C4242;
    font-size: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

#service-treatment-carousel .owl-prev:hover,
#service-treatment-carousel .owl-next:hover {
    cursor: pointer;
}

#service-treatment-carousel .owl-nav.disabled {
    display: none !important;
}


/* Những ai nên làm liệu trình */
#who-should-do-carousel .owl-dot span {
    width: 15px;
    height: 15px;
    margin: 15px 6px;
    background: #AFBEBB;
    border-radius: 50%;
}


#who-should-do-carousel .owl-dot:hover span {
    background: #888;
}

#who-should-do-carousel .owl-dot.active span {
    background: #0C4242;
}



/* Hiệu quả của liệu trình */

.effective-carousel-wrapper {
    width: 66%;
    margin: 0 auto;
    position: relative;
}

#service-effective-carousel .owl-nav {
    position: absolute;
    top: 44.95%;
    left: 50%;
    right: 0;
    width: 118.7%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

#service-effective-carousel .owl-prev,
#service-effective-carousel .owl-next {
    width: 50px;
    height: 50px;
    background-color: #EFF6F4;
    color: #0C4242;
    font-size: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

#service-effective-carousel .owl-prev:hover,
#service-effective-carousel .owl-next:hover {
    cursor: pointer;
}

#service-effective-carousel .owl-nav.disabled {
    display: none !important;
}

/* Câu hỏi thường gặp */



/* Cảm nhận khách hàng*/
.feedback-carousel-wrapper {
    width: 100%;
    margin: 0 auto;
}

.feedback-item {
    padding: 50px 40px;
    border-radius: 20px;
    border: solid 1px #AFBEBB;
}

#feedback-effective-carousel .owl-item img {
    width: auto;
}

.feedback-item-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 62%;
    margin: 0 auto;
}


#feedback-effective-carousel .owl-dot span {
    width: 15px;
    height: 15px;
    margin: 15px 6px;
    background: #AFBEBB;
    border-radius: 50%;
}


#feedback-effective-carousel .owl-dot:hover span {
    background: #888;
}

#feedback-effective-carousel .owl-dot.active span {
    background: #0C4242;
}


/* pagination custom */
.custom-dots {
    display: flex;
    justify-content: center;
}

.custom-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #AFBEBB;
    cursor: pointer;
    transition: background 0.3s;
}

.custom-dot.active {
    background: #0C4242;
}

.btn-nav {
    width: 50px;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    border-radius: 50%;
    background-color: #EFF6F4;
}

.btn-nav img {
    vertical-align: initial;
}

/* section related services */
.btn-hover:hover {
    color: #708E86;
}

.related-services-carousel-wrapper {
    width: 90%;
    margin: 0 auto;
    position: relative;
}

#related-services-carousel .owl-nav {
    position: absolute;
    top: 44.95%;
    left: 50%;
    right: 0;
    width: 114.3%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

#related-services-carousel .owl-prev,
#related-services-carousel .owl-next {
    width: 50px;
    height: 50px;
    background-color: #EFF6F4;
    color: #0C4242;
    font-size: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

#related-services-carousel .owl-prev:hover,
#related-services-carousel .owl-next:hover {
    cursor: pointer;
}

#related-services-carousel .owl-nav.disabled {
    display: none !important;
}

@media (max-width: 1440px) {
    #related-services-carousel .owl-nav {
        position: absolute;
        top: 44.95%;
        left: 50%;
        right: 0;
        width: 110%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-between;
        pointer-events: none;
    }
}

/* Reponsive mobiel version */
@media (max-width: 991px) {

    /* <!-- section intro service detail mobile --> */
    .clinic-list {
        margin-top: 50px;
    }

    .intro-mb-box {
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .intro-mb-content {
        background-color: #0C4242;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        padding: 30px 26px 25px 26px;
    }

    .custom-line-intro {
        margin: 15px 0;
    }

    .clinic-content {
        margin-top: 6px;
    }

    .custom-line-service-item {
        margin-bottom: 23px;
    }

    .service-item-content {
        display: flex;
    }


    /* Videos */

    #service-video-carousel-mb .item-video {
        width: 83% !important;
        margin: 0 auto;
        height: 400px;
    }

    #service-video-carousel-mb .owl-nav {
        position: absolute;
        top: 45.6%;
        left: 50%;
        right: 0;
        width: 106.2%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-between;
        pointer-events: none;
    }

    #service-video-carousel-mb .owl-prev,
    #service-video-carousel-mb .owl-next {
        width: 50px;
        height: 50px;
        color: #0C4242;
        font-size: 14px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: all;
    }

    #service-video-carousel-mb .owl-prev:hover,
    #service-video-carousel-mb .owl-next:hover {
        background-color: inherit !important;
    }

    #service-video-carousel-mb .owl-nav.disabled {
        display: none !important;
    }

    /* Quy trình điều trị */


    .treatment-carousel-wrapper {
        width: 90%;
        margin: 0 auto;
        position: relative;
    }

    .step-treatment-card {
        display: flex;
        align-items: center;
        background-color: #EFF6F4;
        border-top-left-radius: 40px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 20px;
    }

    .step-treatment-card img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* #service-treatment-carousel-mb .owl-nav {
        position: absolute;
        top: 46%;
        left: 50%;
        right: 0;
        width: 119.5%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-between;
        pointer-events: none;
    }

    #service-treatment-carousel-mb .owl-prev,
    #service-treatment-carousel-mb .owl-next {
        width: 50px;
        height: 50px;
        color: #0C4242;
        font-size: 14px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: all;
    }

    #service-treatment-carousel-mb .owl-prev:hover,
    #service-treatment-carousel-mb .owl-next:hover {
        background-color: inherit !important;
    }

    #service-treatment-carousel-mb .owl-nav.disabled {
        display: none !important;
    } */

    .step-content {
        font-size: 23px;
        line-height: 30px;
        padding: 0px 20.5px;
    }

    .col-6-custom {
        width: 47%;
    }

    .col-7-custom {
        width: 53%;
    }

    #service-treatment-carousel-mb .owl-dot span {
        background: #AFBEBB;
        border-radius: 50%;
        margin: 0px 5.5px;
    }

    #service-treatment-carousel-mb .owl-dot:hover span {
        background: #888;
    }

    #service-treatment-carousel-mb .owl-dot.active span {
        background: #0C4242;
    }

    /* Những ai nên làm liệu trình */
    .who-should-do-carousel-wrapper {
        width: 90%;
        margin: 0 auto;
        position: relative;
    }

    /* #who-should-do-carousel-mb .owl-nav {
        position: absolute;
        top: 46%;
        left: 50%;
        right: 0;
        width: 119.5%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-between;
        pointer-events: none;
    }

    #who-should-do-carousel-mb .owl-prev,
    #who-should-do-carousel-mb .owl-next {
        width: 50px;
        height: 50px;
        color: #0C4242;
        font-size: 14px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: all;
    }

    #who-should-do-carousel-mb .owl-prev:hover,
    #who-should-do-carousel-mb .owl-next:hover {
        background-color: inherit !important;
    }

    #who-should-do-carousel-mb .owl-nav.disabled {
        display: none !important;
    } */


    #who-should-do-carousel-mb .owl-dot span {
        background: #AFBEBB;
        border-radius: 50%;
        margin: 0px 5.5px;
    }

    #who-should-do-carousel-mb .owl-dot:hover span {
        background: #888;
    }

    #who-should-do-carousel-mb .owl-dot.active span {
        background: #0C4242;
    }

    /* Hiệu quả của liệu trình */
    .effective-carousel-wrapper {
        width: 90%;
    }

    /* #service-effective-carousel-mb .owl-nav {
        position: absolute;
        top: 46%;
        left: 50%;
        right: 0;
        width: 119.5%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-between;
        pointer-events: none;
    }

    #service-effective-carousel-mb .owl-prev,
    #service-effective-carousel-mb .owl-next {
        width: 50px;
        height: 50px;
        color: #0C4242;
        font-size: 14px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: all;
    }

    #service-effective-carousel-mb .owl-prev:hover,
    #service-effective-carousel-mb .owl-next:hover {
        background-color: inherit !important;
    }

    #service-effective-carousel-mb .owl-nav.disabled {
        display: none !important;
    } */
    #service-effective-carousel-mb .owl-dot span {
        background: #AFBEBB;
        border-radius: 50%;
        margin: 0px 5.5px;
    }

    #service-effective-carousel-mb .owl-dot:hover span {
        background: #888;
    }

    #service-effective-carousel-mb .owl-dot.active span {
        background: #0C4242;
    }

    /* Câu hỏi thường gặp */
    .service-item-content p {
        margin-bottom: 15px;
    }

    .service-item-content p:last-child {
        margin-bottom: 0 !important;
    }

    /* Cảm nhận khách hàng*/

    .feedback-item {
        padding: 40px 30px;
    }

    .feedback-carousel-wrapper {
        width: 90%;
        margin: 0 auto;
        position: relative;
    }

    /* #feedback-effective-carousel-mb .owl-nav {
        position: absolute;
        top: 46%;
        left: 50%;
        right: 0;
        width: 119.5%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-between;
        pointer-events: none;
    }

    #feedback-effective-carousel-mb .owl-prev,
    #feedback-effective-carousel-mb .owl-next {
        width: 50px;
        height: 50px;
        color: #0C4242;
        font-size: 14px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: all;
    }

    #feedback-effective-carousel-mb .owl-prev:hover,
    #feedback-effective-carousel-mb .owl-next:hover {
        background-color: inherit !important;
    }

    #feedback-effective-carousel-mb .owl-nav.disabled {
        display: none !important;
    } */

    #feedback-effective-carousel-mb .owl-item img {
        width: auto;
    }

    #feedback-effective-carousel-mb .owl-dot span {
        background: #AFBEBB;
        border-radius: 50%;
        margin: 0px 5.5px;
    }

    #feedback-effective-carousel-mb .owl-dot:hover span {
        background: #888;
    }

    #feedback-effective-carousel-mb .owl-dot.active span {
        background: #0C4242;
    }

    /* section related services */
    .related-services-carousel-wrapper {
        width: 90%;
    }

    #related-services-carousel-mb .owl-nav {
        position: absolute;
        top: 46%;
        left: 50%;
        right: 0;
        width: 111.5%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-between;
        pointer-events: none;
    }

    #related-services-carousel-mb .owl-prev,
    #related-services-carousel-mb .owl-next {
        width: 50px;
        height: 50px;
        color: #0C4242;
        font-size: 14px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: all;
    }

    #related-services-carousel-mb .owl-prev:hover,
    #related-services-carousel-mb .owl-next:hover {
        background-color: inherit !important;
    }
}

@media (max-width: 441px) {

    /* Videos */
    #service-video-carousel-mb .owl-nav {
        width: 113.2%;
    }

    /* Quy trình điều trị */
    .step-content {
        font-size: 13px;
        line-height: 20px;
    }

    #service-treatment-carousel-mb .owl-nav {
        top: 43%;
        width: 126.5%;
    }

    /* Những ai nên làm liệu trình */
    #who-should-do-carousel-mb .owl-nav {
        top: 43%;
        width: 126.5%;
    }

    /* Hiệu quả của liệu trình */
    #service-effective-carousel-mb .owl-nav {
        top: 43%;
        width: 126.5%;
    }

    /* Cảm nhận khách hàng */
    #feedback-effective-carousel-mb .owl-nav {
        top: 43%;
        width: 126.5%;
    }
}