/* CSS Document */


/**********************************************************/
/************************ doctor **************************/
/**********************************************************/

.menu-doctor a{
    font-weight: 500 !important;
    color: #116c5b;
}

.divDoctor-list{ margin: 50px 0; }

.boxslide-doctor{ background-color: #fff; box-shadow: 0px 3px 20px 10px rgba(0,0,0,0.1); padding: 30px; border-radius: 20px; margin-top: 30px; margin-bottom: 30px; position: relative; top: 0; transition: all 0.5s ease; }
.boxslide-doctor figure img{ border-bottom-right-radius: 40px; }
.doctor-name{ font-size: 28px; color: #116c5b; font-weight: 500; margin-bottom: 5px; }
.doctor-position{ font-size: 24px; font-weight: 500; }
.btn-datedoctor{ margin-top: 15px; }
.btn-datedoctor a{ display: inline-block; background-color: #ff8041; font-size: 28px; color: #fff;  font-weight: 500; padding: 6px 30px; border-radius: 30px; }
.btn-datedoctor a:hover{ background-color: #116c5b; color: #fff; }

.boxslide-doctor:hover{ top: -15px; box-shadow: 15px 10px 30px rgba(0, 0, 0, 0.3); transition: all 0.5s ease; }

.boxslide-doctor.last{ background-color: #69ca97; background-image: url('../images/doctor/card_all.jpg'); background-repeat: no-repeat; background-position: right bottom; padding: 0; position: relative; width: 100%; height: 476px; cursor: pointer; }
.boxslide-doctor.last figure{ margin-bottom: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; }
.boxslide-doctor.last figure img{ border-bottom-right-radius: 0px; width: 110px; margin: 0 auto 10px; }
.boxslide-doctor.last figure figcaption{ font-size: 36px; font-weight: 400; color: #fff; }


.btn-clear{ display: inline-block; font-size: 26px; font-weight: 500; color: #fff; background-color: transparent; border: 1px solid #fff; padding: 5px 20px; border-radius: 50px; }
.btn-clear i{ vertical-align: middle; }
.btn-clear:hover{ background-color: #fff; color: #116c5b; }
.btn-search2{ display: inline-block; font-size: 26px; font-weight: 500; color: #fff; background-color: #ff8041; border: 1px solid #ff8041; padding: 5px 50px; border-radius: 50px; }
.btn-search2:hover{ background-color: #fff; color: #116c5b; border-color: #fff; }




@media (max-width: 1600px){

  .boxslide-doctor.last{ height: 450px; }

}
@media (max-width: 1199px){

  .boxslide-doctor{ padding: 20px; }
  .btn-datedoctor a{ font-size: 26px; }

  .boxslide-doctor.last{ height: 440px; }

}
@media (max-width: 991px){

  .boxslide-doctor{ margin-bottom: 10px; }

  .boxslide-doctor.last{ height: 456px; }
  .boxslide-doctor.last figure figcaption{ font-size: 34px; }

}
@media (max-width: 767px){

  .btn-clear{ font-size: 24px; padding: 5px 12px; }
  .btn-search2{ font-size: 24px; padding: 5px 30px; }

  .boxslide-doctor.last{ height: 400px; }

}
@media (max-width: 576px){

  .boxslide-doctor.last{ height: 458px; }

}
@media (max-width: 320px){

  .boxslide-doctor.last{ height: 430px; }

}



/**********************************************************/
/**********************************************************/

.divBlog-search label{ margin-bottom: 5px; padding-top: 10px; }




/**********************************************************/
/**********************************************************/

.divDoctor-history--intro{ padding: 50px 0 100px; }
.doctor-info--row{ overflow: hidden; }
.doctor-info--col-img{ float: left; width: 480px; padding-right: 30px; }
.doctor-info--col-img img{ border-bottom-right-radius: 80px; }
.doctor-info--col-detail{ float: left; width: calc(100% - 480px); }
.doctor-info--col-detail h1{ font-size: 60px; line-height: 1; font-weight: 500; }


.d-info--exp{ margin: 30px 0; }
.d-info--exp ul li{ font-size: 28px; font-weight: 500; margin-bottom: 10px; }
.d-info--exp ul li span{ display: block; color: #116c5b; }


.accordionINFO .info{ border:0; margin-bottom: 20px; border-radius: 20px; }
.accordionINFO .info-header{ 
  overflow: hidden;
  border-radius: 0; border: 0;
  background-color: #116c5b; position: relative;
  font-size: 30px; line-height: 1; font-weight: 400;
  padding: 15px 30px; color: #fff;
  border-top-left-radius: 20px; border-top-right-radius: 20px;
}
.accordionINFO .info-header.collapsed{
  background-color: #4bc88e;
  border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; 
}
.accordionINFO .info-header h2{ font-size: 30px; line-height: 1; font-weight: 400; }
/* .accordionINFO .info-header::after  {
  font-family: "Font Awesome 5 Pro";
  content: "\f068";
  vertical-align: middle;
  font-size: 15px; font-weight: 900;
  position: absolute; top: 50%; transform: translateY(-50%); right: 20px;
}
.accordionINFO .info-header.collapsed::after  {
  content: "\f067"; 
} */

.accordionINFO .info-body{ padding: 20px 30px; background-color: #116c5b; color: #fff; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; position: relative; }
.accordionINFO .info-body::before{ content: ''; position: absolute; top: 0; left: 30px; right: 30px; height: 1px; background-color: rgba(255, 255, 255, 0.5); }
.accordionINFO .info-body a{ color: inherit; text-decoration: underline; }
.accordionINFO .info-body span{ cursor:auto; }


.info-body h3{ font-size: 30px; color: #ff8041; margin-bottom: 10px; }
.info-body p{ font-size: 24px; margin-bottom: 20px; }
.info-body ul li{ font-size: 24px; font-weight: 400; margin-bottom: 10px; position: relative; padding-left: 20px; }
.info-body ul li::before {
  content: "\2022";
  color: #fff;
  display: inline-block;
  position: absolute; left: 0;
}
.info-body ol{ list-style: decimal; margin-left: 20px; }
.info-body ol li{ font-size: 24px; font-weight: 400; margin-bottom: 10px; position: relative; padding-left: 10px; }

.info-body ul.twocol li{ padding-left: 0; display: flex; }
.info-body ul.twocol li span:first-of-type{ padding-right: 20px; }
.info-body ul.twocol li::before{ display: none;}



@media (max-width: 1600px) {
  
  .doctor-info--col-detail h1{ font-size: 50px; }

}
@media (max-width: 1199px) {

  .divDoctor-history--intro{ padding: 50px 0 100px; }
  .doctor-info--col-img{ width: 380px;  }
  .doctor-info--col-detail{ width: calc(100% - 380px); }
  .doctor-info--col-detail h1{ font-size: 46px; }

  .d-info--exp{ margin: 20px 0; }
  .d-info--exp ul li{ font-size: 26px; }

  .accordionINFO .info-header h2,
  .accordionINFO .info-header{ font-size: 26px; }

}
@media (max-width: 991px) {

  .divDoctor-history--intro{ padding: 30px 0; }
  .doctor-info--col-img{ width: 280px;  }
  .doctor-info--col-img img{ border-bottom-right-radius: 50px; }
  .doctor-info--col-detail{ width: calc(100% - 280px); }
  .doctor-info--col-detail h1{ font-size: 42px; }
  
  .accordionINFO .info-header{ padding: 10px 30px; }

}
@media (max-width: 767px) {

  .accordionINFO .info{ border-radius: 15px; }
  .accordionINFO .info-header{ 
    padding: 10px 20px;
    border-top-left-radius: 15px; border-top-right-radius: 15px;
  }
  .accordionINFO .info-header.collapsed{
    border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; 
  }
  .accordionINFO .info-body{ padding: 20px; }
  .accordionINFO .info-body::before{ left: 20px; right: 20px; }

  .doctor-info--col-img{ padding-right: 0; }
  .doctor-info--col-img,
  .doctor-info--col-detail{ float: none; width: 100%; }

}
@media (max-width: 576px) {

  .divDoctor-history--intro{ padding: 30px 0 50px; }
  .doctor-info--col-detail h1{ font-size: 36px; }

}



/**********************************************************/
/************************ detail **************************/
/**********************************************************/

.article-interview article{ 
  /* height: 650px;  */
  overflow: hidden; position: relative; 
}
.article-interview article figure,
.article-interview article .div-embed-youtube{ float: right; width: 700px; margin-left: 30px; margin-bottom: 30px; }
.article-interview article h2, .doctor-interview-title{ font-size: 40px; font-weight: 400; margin-bottom: 30px; color: #ff8041;  }
.article-interview article h3, .doctor-interview-paragraph{ font-size: 38px; font-weight: 400; margin-bottom: 30px; color: #116c5b; }
.article-interview article p{ font-size: 28px; font-weight: 400; }
.article-interview article ul{ margin-bottom: 30px; list-style: disc; list-style: none; margin-bottom: 30px; }
.article-interview article li{ font-size: 28px; line-height: 1.13; font-weight: 400; margin-bottom: 5px; position: relative; padding-left: 25px; }
.article-interview article ul li::before { content: ''; position: absolute; top: 10px; left: 0; width: 10px; height: 10px; border-radius: 50%; background-color: #ff8041; }

.article-interview article ol{ margin-bottom: 30px; list-style: decimal; margin-bottom: 30px; margin-left: 25px; }
.article-interview article ol li{ padding-left: 0; }

.linkmore{ text-align: center; position: absolute; width: 100%; bottom: 0; left: 0; background-image: linear-gradient(0deg, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 100%); padding-top: 100px; }
.linkmore a{ font-size: 24px; color: #ff8041; font-weight: 500; }
.linkmore a i{ display: block; font-size: 16px; }
.linkmore a:hover{ color: #116c5b; }



@media (max-width: 1199px) {

  .article-interview article{ height: 525px; }
  .article-interview article figure,
  .article-interview article .div-embed-youtube{ width: 450px; }
  .article-interview article h2, .doctor-interview-title,
  .article-interview article h3, .doctor-interview-paragraph{ font-size: 34px; }

}
@media (max-width: 991px) {

  .article-interview article{ height: 425px; }
  .article-interview article figure,
  .article-interview article .div-embed-youtube{ width: 350px; }
  .article-interview article h2, .doctor-interview-title,
  .article-interview article h3, .doctor-interview-paragraph{ font-size: 30px; margin-bottom: 20px; }
  .article-interview article p{ font-size: 26px; }

}
@media (max-width: 767px) {

  .article-interview article{ height: 800px; }
  .article-interview article figure,
  .article-interview article .div-embed-youtube{ width: 100%; float: none; margin: 20px auto 30px; }

}
@media (max-width: 576px) {

  .article-interview article{ height: 700px; }

}




/**********************************************************/
/**********************************************************/

.box-doctor-info{ font-size: 28px; font-weight: 500; margin-bottom: 5px; }
.boxslide-doctor .box-doctor-info{ margin-top: -5px; font-size: 20px; font-weight: 400; }