body{
    margin: 0;
    padding: 0;
}
.header {
    width: 700px;
    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: 700px;
    margin: auto;
    display: block;
    box-sizing: border-box;
}

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

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

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

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

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

.expert__spacialty {
    margin-top: 15px;
}

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

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

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

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

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

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



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

}
.slide_show{
    width: 100%;
   overflow: hidden;
   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: absolute;
    bottom: 14px;
    left: 0;
    padding: 0px 12%;
    color: white;
    line-height: 30px;
    font-size: 22px;
    text-align: justify;
}
.list_image_card-text strong{
    font-weight: 700;
}
.list_image_card-text span {
    font-weight: 400;
}
.btn:hover{
    color: white;
}

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

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

.feedback_body-container{
    border: 2px dashed ;
    border-radius: 30px;
    border-color: #25286D;
    text-align: 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: flex;
    gap: 10px;
}

.service__body-item{
    width: 50%;
}

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

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

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

.time{
    text-align: 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: 16px;
    line-height: 25px;
}
.contact__body a {
    color: black;
    text-decoration: none;
}
.footer{
    position: relative;
}

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

.footer__body{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

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

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

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

.treatment__benhxahoi-title {
    color: #25286D;
    font-size: 22px;
    font-weight: 700;
    text-transform: capitalize;
    will-change: transform, opacity;
    text-align: center;
}



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

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

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



.treatment__namkhoa-title{
    font-size: 22px !important;
    color: #25286D !important;
    font-weight: 700 !important;
}

.treatment__namkhoa-titleN{
    font-size: 22px !important;
    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: center;
    box-sizing: border-box;
    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: 22px;
    font-weight: 700;
    color: rgb(0, 216, 216);
    margin-top: 10px;
  }

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

  .expert__img{
    margin-top: 10px;
  }

  @media only screen and (max-width: 600px) {
    .header,
    .expert,
    .treatment,
    .feedback,
    .service,
    .license,
    .time ,
    .contact,
    .footer ,
    .section__button,
    .expert__chat{
        width: 100% !important;
    }
    .expert__title,
.treatment__title,
.contact__title{
    font-size: 18px !important;
    text-align: center !important;
}
    
    .list_image_card {
        padding: 0px 3% !important;
    }
    .list_image_card-text{
        font-size: 12px !important;
        line-height: 20px !important;
        padding: 0px 8% !important;
    }
    .btn-left{
        left: 0px !important;
    }
    .btn-right{
        right:0px !important;
    }
    .btns img {
        width: 20px !important;
        height: 20px !important;
    }

    .feedback_body-container > img{
        width: 90% !important;
        height: auto !important;
    }

    .feedback_body-list-item > img {
        width: 90% !important;
        height: auto !important;
    }
    .service__body-item-card{
        line-height: 20px !important;
        font-size: 12px !important;
        gap: 0px !important;
    }
    .license
    {
        padding: 0px 10px;
    }

    .contact__body{
        font-size: 14px !important;
        width: 95% !important;
    }
    .footer__body-top{
        height: 60px !important;
    }
    .footer__body-top > a{
        height: 60px !important;
    }
    .footer__body-botom{
        height: 39px !important;
    }
    .footer__body-botom> a{
        height: 39px !important;
    }
   

    .expert > ul > li{
        text-align: left !important;
        padding: 0px 10px !important;
    }

    .expert__chat{
        padding: 10px !important;
    }

    .expert__chat > img{
        width: 100% !important;
        height: auto !important;
    }

    .expert__text{
        padding: 0px 10px !important;
    }

    .expert__span{
        padding: 0px 10px !important;
    }

    .expert__container{
        padding: 0px 10px !important;
    }
}