﻿.nt-color-1 {color: #00AEEF;}
.nt-color-2 {color: #ED0677;}
.nt-color-3 {color: #2E3192;}
.nt-bg-1 {background-color: #00AEEF;}
.nt-bg-2 {background-color: #ED0677;}
.nt-bg-3 {background-color: #2E3192;}
.nt-color-link{color: #0d6efd;}
.btn-gradient {
    background-image: linear-gradient(to right, #12D8FA 0%, #1FA2FF 50%, #12D8FA 100%);
    background-size: 200% 100%;
    transition: background-position 0.3s ease;
}

    .btn-gradient:hover {
        background-position: right center;
    }

.text-gradient {
    background: linear-gradient(90deg, #00AFFF 0%, #6C58DB 50%, #ED0677 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-justify-custom {
    text-align: justify;
}
.border-col {border-right: 2px solid #00AEEF;}

/* trải nghiệm khách hàng */
.tab-content {display: none;}
.tab-content.active {display: block;}

.btn-tab {
    background-color: #fff;
    color: #212529;
    padding: 5px 10px;
    border: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin: 0 5px;
}

    .btn-tab:hover {
        background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 51%, #1FA2FF 100%);
        background-size: 200% 100%;
        background-color: transparent;
        background-position: right center;
        color: white;
        border-radius: 5px;
    }

    .btn-tab.active {
        background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 51%, #1FA2FF 100%);
        background-size: 200% 100%;
        background-color: transparent;
        background-position: right center;
        color: white;
        border-radius: 5px;
        border: 1px solid transparent;
    }

.tabs-button span {
    color: #6c757d;
    margin: 0 5px;
}

.customer-tab-section .ratio {
    width: 100%;
    height: auto;
}

     .ratio img,
     .ratio iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0.3rem;
    }

.customer-tab-section .btn-link {
    display: block;
    text-align: left;
    text-decoration: none;
    padding: 0;
}
    .customer-tab-section .btn-link.active {
        background-color: #f0f0f0;
        border-radius: 0.3rem;
    }

/* Đếm số lượng chữ cái */
.text-h1-counter {
  font-weight: bold;
  line-height: 1;
  font-size: calc(0.80rem + 3.18vw);
}
@media (min-width: 1200px) {
  .text-h1-counter {
    font-size: 4.5rem;
  }
}

.text-h2-counter {
  font-weight: bold;
  line-height: 1.2;
  font-size: calc(0.73rem + 0.59vw);
}
@media (min-width: 1200px) {
  .text-h2-counter {
    font-size: 1.4rem;
  }
}
/* End Đếm số lượng chữ cái */

.link-phone {
    z-index: 9999;
    bottom: 115px;
    right: 10px;
    position: fixed;
}

.link-zalo {
    z-index: 9999;
    bottom: 190px;
    right: 10px;
    position: fixed;
}
.animation {
    will-change: transform;
    display: inline-block;
    animation: icon-luc-lac .5s alternate infinite;
}
  @keyframes icon-luc-lac {
    0%, 50%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(-4deg); }
    20%, 40% { transform: rotate(4deg); }
  }

/* tùy chỉnh slider splide */
  .splide__arrow--prev {
  left: 0px;
}

.splide__arrow--next {
  right: 0px;
}

.footer {
    background-image: url('https://nhakhoanhantam.com/assets/images/footer-nhakhoanhantam.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0078FF;
    color: #fff;
}

.zoom-out {
    border-radius: 100%;
    animation: marker-pulse ease-in-out 2s infinite;
    -animation: spread 4s .5s ease-in-out infinite
}

@keyframes marker-pulse {
    0% {
        outline: 0 solid #00AEEF
    }

    100% {
        outline: 15px solid rgba(0,0,0,0)
    }
}

#doctor-certificate .splide__slide {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    #doctor-certificate .splide__slide img {
        height: 100%;
        width: auto;
        object-fit: contain;
        transition: 0.3s;
    }
    #doctor-certificate .splide__slide:hover img {
        transform: scale(1.05);
    }
    #doctor-certificate .splide__slide a {
        cursor: pointer;
    }
.gradient-title {
    background: linear-gradient(to right, #12D8FA 0%, #1FA2FF 51%, #12D8FA 100%);
    transition: 0.3s;
}

    .gradient-title:hover {
        filter: brightness(1.1);
    }