.header {
    width: var(--container);
    margin: var(--margin-auto);
    box-sizing: border-box;
}

.header__body {
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

.header__body > img {
    box-sizing: border-box;
}

.expert,
.treatment,
.feedback,
.service,
.license,
.time,
.contact,
.footer,
.section__button {
    width: var(--container);
    margin: var(--margin-auto);
    display: var(--display-block);
    box-sizing: border-box;
}

.expert__title,
.treatment__title,
.contact__title
{
    background-color: var(--background-color-25286D);
    color: var(--color-white);
    font-size: var(--font-size-22);
    font-weight: var(--font-weight-700);
    height: 60px;
    display: var(--display-flex);
    align-items: var(--align-items-center);
    justify-content: var(--justify-content-center);
    width: 100%;
    box-sizing: border-box;
}

.expert__content {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-400);
    line-height: 27px;
    text-align: var(--center);
    margin-top: 10px;
}
.expert__title1 {
    will-change: transform, opacity;
}
.expert__title1 {
    font-weight: var(--font-weight-700);
    font-size: var(--font-size-22);
    line-height: 40px;
    color: var(--color-00669E);
    text-align: center;
    text-transform: uppercase;
}

.expert > span {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    color: var(--color-00669E);
    display: var(--display-block);
    text-align: var(--center);
}

.expert > ul {
    list-style: none;
    text-align: center;
}

.expert > ul > li {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-400);
    color: var(--color-black);
    line-height: 25px;
}

.expert__spacialty {
    margin-top: 15px;
}

.expert__spacialty-title {
    text-align: var(--center);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    color: var(--color-00669E);
}

.expert__spacialty > ul {
    list-style: none;
    display: var(--display-flex);
    align-items: var(--align-items-center);
    flex-wrap: wrap;
    margin-top: 10px;
    text-align: center;
}

.expert__spacialty > ul > li {
    width: 50%;
    line-height: 25px;
}

.expert__certificate {
    display: var(--display-flex);
    align-items: var(--align-items-center);
    justify-content: var(--justify-content-center);
    margin-top: 15px;
}

.expert__certificate > button {
    background: var(--background-color-00669E);
    color: var(--color-white);
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    padding: 7px 30px;
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-700);
    outline: none;
    border: 0px;
}

.expert__certificate-img{
   padding: 10px;
   box-sizing: border-box;
}



/* slider */
#slider{
    position: var(--position-relative);
    display: var(--display-flex);
    /* height: 500px; */
    align-items: var(--align-item-center);
    justify-content: var(--justify-content-center);
    margin-top: 15px;
    background: linear-gradient(360deg, #FFFFFF 0%, #E6EFFF 50%, #FFFFFF 100%);

}
.slide_show{
    width: var(--width-100);
   overflow: hidden;
   position: var(--position-relative);
}
.list_image {
    display: flex;
    transition: 1s;
    height: 100%;
    width: 100%;
}

.list_image_card {
    flex: 0 0 100%; /* Keep 100% width */
    max-width: 100%; /* Limit max width */
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    padding: 0px 6%;
    margin-top: 10px;
}


.list_image_card-text { 
    position: var(--position-absolute);
    bottom: 14px;
    left: 0;
    padding: 0px 12%;
    color: white;
    line-height: 30px;
    font-size: var(--font-size-20);
    text-align: justify;
}
.list_image_card-text strong{
    font-weight: var(--font-weight-700);
}
.list_image_card-text span {
    font-weight: var(--font-weight-400);
}
.btn:hover{
    color: var(--color-white);
}

.btn{
    position: var(--position-absolute);
    top: 55%;
    color: #999;
    transform: translateY(-50%);
    transition: 1s;
}
.btn-left{
    left: 10px;
    cursor: var(--cursor-pointer);
}
.btn-right{
    right: 10px;
    cursor: var(--cursor-pointer);
}

.feedback_body{
   padding: 10px;
    box-sizing: border-box;
}

.feedback_body-container{
    border: 2px dashed ;
    border-radius: 30px;
    border-color: var(--color-25286D);
    text-align: var(--center);
    padding: 5px;
}

.feedback_body-container > img {
    width: 498px;
    height: 128px;
}

.feedback_body-list-item {
    display: none
}

.activeFeedback {
    display: block
}

.index-feedbacks .feedback-item {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #008DDA;
    margin: 0 5px;
    border-radius: 50%;
    cursor: pointer
}

.index-feedbacks .feedback-item.activeFeedback {
    background-color: #00669E;
    width: 13px;
    height: 13px;
}

.service__body{
    padding: 10px;
    box-sizing: border-box;
    display: var(--display-flex);
    gap: 10px;
}

.service__body-item{
    width: 50%;
}

.service__body-item > img {
    width: 100%;
    height: auto;
}

.service__body-item-card{
    display: var(--display-flex);
    align-items: var(--align-items-center);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-400);
    color: var(--color-black);
    gap: 10px;
    line-height: 70px;
}

.license > img{
    width: 100%;
    height: auto;
}

.time{
    text-align: var(--center);
    min-height: 115px;
}

.time  img {
    width: 100%;
    height: auto;
    border: 1px solid #034fe6; /* Border của thẻ chính */
}

.contact__body {
    width: 70%;
    margin: 0 auto;
    padding: 15px 0px ;
    font-size: var(--font-size-16);
    line-height: 25px;
}
.contact__body a {
    color: var(--color-black);
    text-decoration: none;
}
.footer{
    position: var(--position-relative);
}

.footer > img{
    width: 100%;
    height: auto;
}

.footer__body{
    position: var(--position-absolute);
    top: 0;
    left: 0;
    width: var(--width-100);
}

.footer__body-top{
    width: 100%;
    height: 115px;
    display: var(--display-flex);
}

.footer__body-top > a{
    display: var(--display-block);
    width: 33%;
    height: 115px;
}

.footer__body-botom{
    width: 100%;
    height: 70px;
}
.footer__body-botom> a{
    height: 70px;
    width: 100%;
    display: var(--display-block);
}
.treatment__card{
    padding: 10px;
}

.treatment__benhxahoi-title {
    color: var(--color-25286D);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-700);
    text-transform: capitalize;
    will-change: transform, opacity;
    text-align: var(--center);
}



.treatment__namkhoa > ul {
    background: var(--background-color-white);
    list-style: none;
    box-sizing: border-box;
    display: var(--display-flex);
    align-items: var(--align-items-center);
    border: 1px solid var(--color-black);
    flex-wrap: wrap;
}

.treatment__namkhoa > ul > li{
    width: 100%;
    border-bottom: 1px solid var(--color-black);
    
    
    padding: 7px 10px;
    box-sizing: border-box;
}

.treatment__namkhoa > ul > li a {
    color: var(--color-black);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-400);
    text-decoration: none;
}



.treatment__namkhoa-title{
    font-size: var(--font-size-22) !important;
    color: var(--color-25286D) !important;
    font-weight: var(--font-weight-700) !important;
}

.treatment__namkhoa-titleN{
    font-size: var(--font-size-20) !important;
    color: var(--color-black) !important;
    text-transform: capitalize;
    font-weight: 600 !important;
}

.section__button{
    text-align: center;
    padding: 10px;
}


/* //// */
.animated-button {
    background: linear-gradient(-30deg, #1b3877 50%, #093b9b 50%);
    padding: 10px 20px ;
    display: inline-block;
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    overflow: hidden;
    color: #d4e0f7;
    font-size: 16px;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  }
  
  .animated-button::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #8592ad;
    opacity: 0;
    -webkit-transition: .2s opacity ease-in-out;
    transition: .2s opacity ease-in-out;
  }
  
  .animated-button:hover::before {
    opacity: 0.2;
  }
  
  .animated-button span {
    position: absolute;
  }
  
  .animated-button span:nth-child(1) {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(8, 20, 43, 0)), to(#2662d9));
    background: linear-gradient(to left, rgba(151, 6, 91, 0), #da20ab);
    -webkit-animation: 2s animateTop linear infinite;
            animation: 2s animateTop linear infinite;
  }
  
  @-webkit-keyframes animateTop {
    0% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    100% {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
  }
  
  @keyframes animateTop {
    0% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    100% {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
  }
  
  .animated-button span:nth-child(2) {
    top: 0px;
    right: 0px;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 20, 43, 0)), to(#2662d9));
    background: linear-gradient(to top, rgba(8, 20, 43, 0), #034fe6);
    -webkit-animation: 2s animateRight linear -1s infinite;
            animation: 2s animateRight linear -1s infinite;
  }
  
  @-webkit-keyframes animateRight {
    0% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
    100% {
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
    }
  }
  
  @keyframes animateRight {
    0% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
    100% {
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
    }
  }
  
  .animated-button span:nth-child(3) {
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(8, 20, 43, 0)), to(#2662d9));
    background: linear-gradient(to right, rgba(8, 20, 43, 0), #06af06);
    -webkit-animation: 2s animateBottom linear infinite;
            animation: 2s animateBottom linear infinite;
  }
  
  @-webkit-keyframes animateBottom {
    0% {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    100% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
  }
  
  @keyframes animateBottom {
    0% {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    100% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
  }
  
  .animated-button span:nth-child(4) {
    top: 0px;
    left: 0px;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 20, 43, 0)), to(#2662d9));
    background: linear-gradient(to bottom, rgba(8, 20, 43, 0), #d92c26);
    -webkit-animation: 2s animateLeft linear -1s infinite;
            animation: 2s animateLeft linear -1s infinite;
  }
  
  @-webkit-keyframes animateLeft {
    0% {
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
    }
    100% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
  }
  
  @keyframes animateLeft {
    0% {
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
    }
    100% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
  }
  
 .expert__chat{
    text-align: var(--center);
    box-sizing: border-box;
    display: var(--display-block);
 }

 .expert__chat > img {
    width: 480px;
    height: 169px;
    margin-top: 10px;
    border: 1px dashed;
    border-color: #00669E;
 }

 /* ping */
 .ping-wrapper {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 115px;
  }

  .ping-border {
    position: relative;
    z-index: 2;
    background-color: white;
    width: 70%;
    margin: 0 auto;
    box-sizing: border-box;
    margin-top: 11px;
  }

  .ping-layer {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); /* Đặt vào giữa và bắt đầu từ kích thước 0 */
    opacity: 0; /* Bắt đầu không nhìn thấy */
    pointer-events: none; /* Đảm bảo pseudo-elements không can thiệp vào các tương tác */
    animation: pingLayer 2s infinite;
  }

  @keyframes pingLayer {
    0% {
      transform: translate(-50%, -50%) scale(0); /* Bắt đầu với kích thước 0 */
      opacity: 1; /* Bắt đầu với độ mờ 1 */
    }
    50% {
      transform: translate(-50%, -50%) scale(1); /* Mở rộng */
      opacity: 0; /* Biến mất khi mở rộng */
    }
    100% {
      transform: translate(-50%, -50%) scale(0); /* Quay lại kích thước 0 */
      opacity: 0; /* Đảm bảo không còn nhìn thấy khi kết thúc */
    }
  }

  .expert__text{
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-700);
    color: rgb(0, 216, 216);
    margin-top: 10px;
  }

  .expert__span{
    display: var(--display-flex);
    align-items: var(--align-item-center);
    gap: 10px;
    margin-top: 5px;
  }

  .expert__img{
    margin-top: 10px;
  }