/* ABOUT */
.about {
    margin: 80px 0 0;
    padding-bottom: 32px;
    position: relative;
}
.about::before {
    content: "";
    display: block;
    width: 100%;
    height: 90%;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0px 0px;
    background: var(--color-surface-page-light-blue);
}
.about .row {
    align-items: center;
}
.about .headline-1 {
    text-align: left;
}
/* WHY */
.why {
    border-radius: 0px 0px var(--border-radius-xl) var(--border-radius-xl);
    background: var(--color-surface-page-secondary);
    padding: var(--spacing-xl) 72px;
    position: relative;
}
.why::before,
.why::after {
    content: "";
    display: block;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    opacity: 0.2;
}
.why::before {
    background-image: url(../images/bg/bg-why-1.png);
}
.why::after {
    background-image: url(../images/bg/bg-why-2.png);
    left: unset;
    right: 0;
}
.card-why {
    text-align: center;
}
.card-why h2 {
    font-size: 60px;
    font-weight: 600;
    line-height: 66px;
    background: var(--Gradient-Gold);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.card-why p {
    font-size: 18px;
    color: var(--color-text-body-3);
    font-weight: 400;
}
/* SERVICE */
.service .swiper {
    width: 90%;
}
.swiper {
    height: 100%;
}

.service {
    margin: 80px 0 15px;
}

.service-slide .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    background-position: center;
    background-size: cover;
}
.service .swiper-button-next,
.service .swiper-button-prev {
    opacity: 0;
}
.service-slide .swiper-slide:hover .swiper-slide-shadow-left,
.service-slide .swiper-slide:hover .swiper-slide-shadow-right {
    background-image: none;
}
/* DOCTOR REGISTER */
.doctor-register {
    position: relative;
    padding: 0 97px 0 72px;
    margin-top: 200px;
}
.doctor-register::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: var(--border-radius-lg);
    background: linear-gradient(0deg, rgba(7, 90, 207, 0.2) 0%, rgba(7, 90, 207, 0.2) 100%),
        url(../images/bg/register.jpg) lightgray 50% / cover no-repeat;
}
.doctor-register .row {
    align-items: center;
}
.doctor-register .register-box {
    padding: 24px 72px;
    border-radius: var(--border-radius-lg, 12px);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    width: 80%;
}
.doctor-register .register-title {
    margin-bottom: var(--spacing-md);
    text-align: center;
    text-transform: uppercase;
}
.doctor-register .register-title h2 {
    color: var(--color-text-heading-1);
    font-weight: 700;
    font-size: var(--font-size-H3);
}
.doctor-register .register-title h3 {
    color: var(--color-text-heading-2);
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
    font-weight: 700;
    font-size: var(--font-size-H3);
}
.doctor-register img {
    display: block;
    height: 100%;
}
/* doctor tab */
#doctor-tabs {
    width: 70%;
    margin: 100px auto var(--spacing-3xl);
}

#doctor-tabs .headline-1 {
    text-align: left;
}
.doctor-infor {
    margin-top: var(--spacing-xl);
}
.doctor-infor h3 {
    font-size: var(--font-size-H6);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.doctor-infor h3 span {
    font-style: normal;
    font-weight: 400;
    text-transform: none;
}
.doctor-infor ul {
    line-height: 24px;
}
.doctor-infor ul li {
    color: var(--color-text-body-1);
    margin-bottom: 12px;
}
.doctor-infor ul li::before {
    content: "\f105";
    font-family: FontAwesome;
    font-size: 12px;
    margin-right: 6px;
    position: relative;
    top: -1px;
}
.doctor-tab {
    display: none;
}
.doctor-tab.active {
    display: block;
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}
.doctor-tab img {
    width: 80%;
}
.card-doctor {
    text-align: center;
    cursor: pointer;
    margin-top: 40px;
}

.card-doctor .thumb {
    position: relative;
    border: 1px solid #d1d1d1;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    margin: 0 auto 16px;
}
.card-doctor .thumb img {
    width: 75%;
    margin: 0 auto;
    transition: 0.5s;
    position: relative;
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
}
.card-doctor .thumb-box {
    position: relative;
    width: 100%;
    height: 100%;
}
.card-doctor .thumb-box::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f2f9ff;
    width: 190px;
    height: 190px;
    border-radius: 50%;
}
.card-doctor:hover .thumb img,
.card-doctor.active .thumb img {
    transform: translate(-50%, -50%) scale(1.2);
    top: 36%;
}
.card-doctor:hover .thumb,
.card-doctor.active .thumb {
    border-color: var(--color-primary);
}
.card-doctor .thumb {
    position: relative;
}
.card-doctor h3 {
    font-weight: 700;
}

/* General container */
.facilities {
    margin-top: 30px;
}

/* Tab menu styles */
.facilities {
    margin-top: 100px;
}
.facilities .headline-1 {
    margin-bottom: 0;
}
.facilities_menu {
    display: inline-flex;
    gap: 10px;
    margin: var(--spacing-2xl) 0;
    border-radius: 8px;
    border: 1px solid var(--color-border-stroke-blue);
    justify-content: center;
}
.facilities_flex {
    display: flex;
    justify-content: center;
}
.facilities_menu button {
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: var(--color-text-input-default);
    text-transform: unset;
    background-color: transparent;
    transition: background-color 0.3s ease;
}
.facilities_menu button:hover {
    background-color: #009AD88F;
    color: #feffff;
}
.facilities_menu button.active {
    background-color: var(--color-primary);
    color: #fff;
}

/* Thumbnails list */
.facilities_list img {
    width: 100%;
    margin-bottom: 5px;
    border: 2px solid transparent;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.5s;
}

.facilities_list img:hover {
    transform: scale(1.05);
}

.facilities_list img.active,
.facilities_list img:hover {
    border-color: #007bff;
}

/* Main image styles */
.main-image {
    position: relative;
}

.main-image img {
    width: 100%;
    border-radius: 10px;
    cursor: pointer;
}

.video-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-primary);
    font-size: 33px;
    display: none;
    cursor: pointer;
}

/* Information content */
.facilities_infor h3 {
    font-weight: 700;
}

.facilities_infor p {
    margin-top: 10px;
    line-height: 1.5;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: flex;
}
.customer {
    margin-top: 100px;
}
.box-customer {
    position: relative;
    width: 90%;
    margin: 40px auto 0;
    transition: 0.5s;
}
.card-customer {
    border-radius: var(--border-radius-lg);
    background: #feffff;
    text-align: center;
    margin-bottom: var(--spacing-md);
    box-shadow: 0px 62px 17px 0px rgba(186, 186, 186, 0), 0px 40px 16px 0px rgba(186, 186, 186, 0.01), 0px 22px 13px 0px rgba(186, 186, 186, 0.05),
        0px 10px 10px 0px rgba(186, 186, 186, 0.09), 0px 2px 5px 0px rgba(186, 186, 186, 0.1);
    transition: 0.5s;
    border: 1px solid transparent;
}
.card-customer:first-child {
    transform: rotate(7deg);
    position: relative;
    z-index: 2;
}
.card-customer:nth-child(2),
.card-customer:nth-child(3) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}
.card-customer:nth-child(2) {
    z-index: 1;
}
.card-customer:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-7deg);
    z-index: 0;
}
.box-customer:hover .card-customer {
    border-color: var(--color-primary);
}
.box-customer:hover {
    transform: translateY(-10px);
}
.card-customer img {
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    display: block;
}
.card-customer h3 {
    padding: var(--spacing-md) 0;
    font-weight: 500;
    text-transform: uppercase;
    transition: 0.5s;
}
.card-customer:hover h3 {
    color: var(--color-primary);
}
.customer-feel .swiper {
    height: 250px;
}
.customer-feel .swiper-wrapper {
    bottom: 0;
    height: auto;
    position: absolute;
}
.customer-feel .swiper-button-next,
.customer-feel .swiper-button-prev {
    color: #000;
    top: 15px;
}

.customer-feel .swiper-button-next {
    right: 0px;
}

.customer-feel .swiper-button-prev {
    left: unset;
    right: 50px;
}

.customer-feel {
    padding: 80px 0;
    position: relative;
    margin-top: 100px;
}
.customer-feel::before,
.customer-feel::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
}
.customer-feel::before {
    background-image: url(../images/bg/bg-customer-1.png);
}
.customer-feel::after {
    background-image: url(../images/bg/bg-customer-2.png);
    left: unset;
    right: 0;
    background-position: bottom;
}
.card-customer-fell {
    position: relative;
}
.card-customer-fell i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-primary);
    font-size: 40px;
    background-color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    cursor: pointer;
}
.customer-feel .headline-1 {
    text-align: left;
    transform: translateY(30px);
}
.customer-feel .headline-1 .title {
    position: relative;
}
.customer-feel .headline-1 .title svg {
    position: absolute;
    width: 100%;
    bottom: -25px;
    width: 100%;
    left: 0;
}
.review {
    margin-top: 100px;
}
.review .row {
    align-items: center;
}
.review .headline-1 {
    text-align: left;
}
.review .headline-1 span {
    display: block;
}
.review .review-box {
    border-radius: var(--border-radius-xl);
    background: var(--color-surface-page-secondary);
    padding: 52px var(--spacing-xl) 20px;
    position: relative;
}
.review .review-box .icon-decor {
    position: absolute;
    left: -53px;
    top: -50px;
    color: #b9dfff;
    font-size: 82px;
}
.review .review-box::before,
.review .review-box::after {
    content: "";
    display: block;
    width: 75%;
    height: 16%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    opacity: 0.2;
}
.review .review-box::before {
    background-image: url(../images/bg/bg-why-1.png);
}
.review .review-box::after {
    background-image: url(../images/bg/bg-why-2.png);
    left: unset;
    right: 0;
    bottom: 2px;
    top: unset;
    background-position: bottom;
}
.review .card-review {
    display: block;
    border-radius: 12px;
    background: #fff;
    padding: var(--spacing-md);
    box-shadow: 0px 34px 10px 0px rgba(186, 186, 186, 0), 0px 22px 9px 0px rgba(186, 186, 186, 0.01), 0px 12px 7px 0px rgba(186, 186, 186, 0.05),
        0px 5px 5px 0px rgba(186, 186, 186, 0.09), 0px 1px 3px 0px rgba(186, 186, 186, 0.1);
}
.review .card-review .thumb {
    overflow: hidden;
}

.review .card-review .thumb img {
    transition: 0.5s;
}
.review .card-review:hover .thumb img {
    transform: scale(1.1);
}
.review .card-review .title {
    padding: var(--spacing-md) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.review .card-review .title h3 {
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.5s;
}
.review .card-review:hover h3 {
    color: var(--color-primary);
}
.review .card-review .title h4 {
    color: #636363;
}
.review .card-review p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.review .card-review .star {
    color: var(--color-primary);
}
.review .card-review .star i {
    color: #fadb14;
}
.review .swiper {
    height: 525px;
}
.review .swiper-button-next,
.review .swiper-button-prev {
    color: #000;
    top: unset;
    bottom: -11px;
}
.review .swiper-button-next:hover:after,
.review .swiper-button-prev:hover:after {
    color: #fff;
}
.review .swiper-button-next {
    left: 50px;
}

.review .swiper-button-prev {
    left: 0;
}
.review .review-more {
    position: absolute;
    right: 26px;
    bottom: 20px;
    color: #fff;
    font-weight: 700;
    z-index: 9;
}
.news {
    /* margin-top: 100px; */
}
.news .card-news {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}
.news .card-news img {
    border-radius: 20px;
}
.news .card-news .overlay {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 20%;
    bottom: -50px;
    opacity: 0;
    left: 0;
    display: flex;
    background: linear-gradient(to top, #000, #ffffff8c);
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}
.news .card-news:hover .overlay {
    bottom: 0;
    opacity: 1;
}
.news .swiper {
    width: 90%;
}
.news .arrow-box {
    width: 80%;
    margin: 0 auto;
}
.news .swiper-button-next,
.news .swiper-button-prev {
    opacity: 0;
}

.card-news .c-button-1 {
    color: #000;
}
.card-news .c-button-1 span {
    background: linear-gradient(90deg, #fdf1a4 0%, #e7bb43 34%, #fff29e 63%, #e6bb3f 100%);
}
.register {
    margin: 100px 0;
    background-image: url(../images/bg/register-2.png);
    background-size: cover;
}
.register .row {
    align-items: center;
}
.register .headline-1 {
    text-align: justify;
    margin-bottom: var(--spacing-2xl);
}
.register .headline-1 .title {
    position: relative;
}
.register .headline-1 .title svg {
    position: absolute;
    width: 100%;
    bottom: -25px;
    width: 100%;
    left: 0;
}
.register .register-box {
    padding: 20px 100px;
}

@media (max-width: 991px) {
    .about {
        padding-bottom: 16px;
    }
    .about .headline-1 {
        text-align: center;
    }
    .about::before {
        height: 105%;
    }
    .about img {
        margin-top: var(--spacing-md);
    }
    .why {
        padding: var(--spacing-md);
    }
    .why::before,
    .why::after {
        width: 100%;
    }
    .card-why h2 {
        font-size: 40px;
    }
    .card-why p {
        font-size: 14px;
    }
    .doctor-register {
        padding: var(--spacing-md) var(--spacing-xl);
        margin-top: 60px;
    }
    .doctor-register .row {
        flex-direction: column-reverse;
    }
    .doctor-register .register-box {
        margin-top: 0;
        width: 100%;
    }
    .doctor-register img {
        width: 50%;
        margin: 0 auto;
    }
    .doctor-register .register-box {
        padding: var(--spacing-md);
    }
    .doctor-register .register-title h3,
    .doctor-register .register-title h2 {
        font-size: var(--font-size-H5);
    }
    .doctor-tab img {
        display: none;
    }
    .service .swiper {
        width: 100%;
    }
    #doctor-tabs {
        width: 100%;
        margin: var(--spacing-3xl) auto var(--spacing-3xl);
    }
    .facilities {
        margin-top: var(--spacing-3xl);
    }
    .facilities_flex {
        display: block;
        overflow-x: scroll;
    }
    .facilities_menu {
        border: none;
        min-width: 850px;
        display: block;
    }
    .facilities_menu button {
        border: 1px solid var(--color-border-divider-disabled, #d1d1d1);
    }
    .facilities_list {
        display: none;
    }
    .facilities_infor {
        margin-top: 12px;
    }
    .customer {
        margin-top: var(--spacing-3xl);
    }
    .customer-feel {
        padding: 40px 0;
        margin-top: var(--spacing-3xl);
    }
    .customer-feel .headline-1 {
        text-align: center;
        transform: translateY(0);
    }
    .customer-feel .headline-1 .title {
        position: relative;
        display: block;
        margin-bottom: 12px;
    }
    .customer-feel .swiper-button-next,
    .customer-feel .swiper-button-prev {
        display: none;
    }
    .customer-feel .swiper {
        height: auto;
    }
    .customer-feel .swiper-wrapper {
        position: relative;
    }
    .review .swiper {
        height: auto;
    }
    .review .headline-1 {
        text-align: center;
    }
    .review .review-box .icon-decor {
        display: none;
    }
    .review .swiper-button-next,
    .review .swiper-button-prev {
        display: none;
    }
    .review .review-more {
        margin-top: 20px;
        position: static;
        display: block;
        text-align: center;
    }
    .review {
        margin-top: var(--spacing-3xl);
    }
    .review .card-review .title {
        display: block;
    }
    .review .card-review .star {
        margin-top: 8px;
    }
    .news {
        margin-top: var(--spacing-3xl);
    }
    .register .headline-1 {
        text-align: center;
    }
    .register .row {
        flex-direction: column-reverse;
    }
    .register .register-box {
        padding: 32px;
    }
    .register .headline-1 .title {
        display: block;
        margin-bottom: 20px;
    }
    .register {
        margin: var(--spacing-3xl) 0;
    }
}
@media (max-width: 575px) {
    .card-doctor .thumb {
        width: 160px;
        height: 160px;
    }
    .card-doctor .thumb-box::before {
        width: 120px;
        height: 120px;
    }
    .news .swiper {
        width: 100%;
    }
    .news .arrow-box {
        width: 100%;
        margin: 0 auto;
    }
    .arrow-box-next,
    .arrow-box-prev {
        display: none;
    }
    .news .swiper-button-next,
    .news .swiper-button-prev {
        opacity: 1;
    }
}

.tet_left img,
.tet_right img {
  width: 100%;
  height: auto;
}
.tet_left,
.tet_right {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  width: 266px;
  pointer-events: none;
}
.tet_right {
  left: auto;
  right: 0;
  width: 181px;
}
.tet_bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1100;
  width: 100%;
  height: 120px;
  background: url("../img/tet/tet-bottom-2.png?v=1") repeat-x;
  background-size: auto 100% !important;
  pointer-events: none;
}
@media(min-width:1080px){
    /* .register {
        position: relative;
        height: 400px;

      } */
    /* .row.row-flex.content-dkkm {
        position: absolute;
        top: -40px;
        max-width: 1320px;
    } */
    
    .tet_left,
    .tet_right,
    .tet_bottom {
        display: none !important;
    }
}
.bn-tuvan-home>img {
    border-radius: 10px;
}
.cl-playytb{cursor: pointer;}
.facilities_infor {
    overflow-y: scroll;
    max-height: 500px;
    scrollbar-width: thin;
    scrollbar-color: #009AD8 #009AD800;
  }
  html{
    scrollbar-color: #009AD8 #009AD800;
    scrollbar-width: thin;
  }
  .block-dv {
    margin: 0 0 40px 0;
  }
  h4.name-dv {
    text-align: center;
  }
  .bubleicon{position: relative;width: 100%;height: 100%;}