@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&display=swap');
:root {
    --border-color: #2670FF;
    --bg-color:#F9FBFF;
}
html {
    scroll-behavior: smooth;
}



body {
    font-family: 'Geologica', sans-serif;
    font-size: 14px;
}
.bg-banner{
    background-image: url("../images/banner1.png");
    height: 250px;
}
.bg-banner2 {
    background-image: url("../images/banner2.png");
    height: 250px;
}
.bg-banner3 {
    background-image: url("../images/banner3.png");
    height: 400px;
}
.bg-banner4 {
    background-image: url("../images/banner4.png");
    height: 636px;
}
.bg-footer{
    background-color: #2A2B2D;
}
.focus\:\!outline-none:focus{
    outline: none !important;
}
.form{
    background-image: url("../images/banner-optinform.png");
        height: 629px;
}
.post-img{
    width: 300px;
    height: 149px;
}
.hidemobile {
    display: none;
}
.img-video{
    height: 400px;
}
.li-menu {
    padding: 10px 20px;
}
.features-new {
    background: url(../images/banner-feature.jpg) repeat top left;
    color: #fff;
    padding-left: 20rem;
    padding-right: 20rem;
    height: 700px;
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.fea {
    padding-left: 20rem;
        padding-right: 20rem;
}
.product-container .feature-details:nth-child(odd)>.borderline {
    width: calc(55% - 30px);
    left: 35px;
    border-left: 1px dashed #e1e1e1;
    border-bottom: 1px dashed #e1e1e1;
    border-top: 1px dashed #e1e1e1;
    border-radius: 24px 0 0 24px;
}
.product-container .feature-details .borderline {
    position: absolute;
    height: 100%;
    top: 0;
    z-index: 0;
}
.feature-details{
    padding-top: 65px;
    position: relative;
}
.product-container .feature-details .feature-content li {
    font-size: 16px;
    line-height: 150%;
    background: url(../images/tick-fea.png) no-repeat;
    list-style-type: none;
    background-position: left center;
    margin-top: 20px;
    padding-left: 42px;
}
.product-container .feature-content .feature-logo img {
    width: 44px;
    height: 44px;
    max-width: none;
}
.product-container .features .feature-details {
    position: relative;
    display: flex;
    padding: 40px 0;
    align-items: center;
    flex-wrap: wrap;
}
.feature-logo-right{
    position: absolute;
    right: 510px;
    top: -40px;
}
.feature-logo {
    float: left;
    border: 1px solid #e1e1e1;
    border-radius: 50%;
    padding: 13px 13px;
    background-color: #fff;
    width: 70px;
    height: 70px;
    margin-left: -23px;
    z-index: 25;
}
.feature-image{
    padding-top: 70px;
}
.features-new{
    padding-left: 20rem;
    padding-right: 20rem;
}
.fix-vande {
    position: absolute;
    left: 120px;
    width: 100px;
    height: 100px;
}
.regiter {
    padding: 15px 25px;
    font-weight: 700;
    font-size: 24px;
    color: #fff;
    margin-top: 30px;
    background: #10519f;
    border: none;
}
.box-vande {
    border: 1px solid #000;
    padding: 10px;
    border-radius: 10px;
    padding-top: 40px;
    margin-top: 60px;
    margin-bottom: 40px;
    height: 230px;
    box-shadow: 5px 5px 5px #e9e9e9;
    font-size: 16px;
}
.product-container .feature-details .anchor {
    position: absolute;
    transform: translateY(-50vh);
}
.product-container .features .feature-details {
    position: relative;
    display: flex;
    padding: 40px 0;
    align-items: center;
    flex-wrap: wrap;
}
.product-container .feature-details:nth-child(even) {
    flex-direction: row-reverse;
}
.product-container .feature-details:nth-child(even)>.borderline {
    right: 45%;
    left: 24px;
    width: 55%;
    border-right: 1px dashed #e1e1e1;
    border-radius: 0 24px 24px 0;
}
.product-container .feature-details .borderline {
    position: absolute;
    height: 100%;
    top: 0;
    z-index: 0;
}
.product-container .feature-details .feature-content {
    position: relative;
    flex: 45;
    padding: 30px 0 30px 23px;
}
.product-container .feature-details:nth-child(1) .feature-content {
    display: flex;
    align-items: flex-start;
}
.product-container .features .feature-details {
    position: relative;
    display: flex;
    padding: 40px 0;
    align-items: center;
    flex-wrap: wrap;
}
.call-to-action {
    background: #f36a26;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    padding-left: 20rem;
    padding-right: 20rem;
}
#gallery {
    background: url(../images/banner3.png) no-repeat 0 0;
    padding-top: 4em;
    background-size: cover;
    height: 833px;
}
.hide{
    display: none;
}
.box-problem{
    display: flex;
    gap: 12px;
}
.box-solu{
    display: flex;
    gap:4px;
}
.box-solu .full{
    width: 100%;
}
.dangky{
    color: #FFF;text-decoration: none;background: #f36a26;border-radius: 15px;padding: 20px;font-size: 16px;
}
.pl120 {
    padding-left: 120px;
}
@media (max-width: 640px) {
.feature-logo-right{
    position: relative;
    right: 0px;
    top: 0px;
}
.feature-image{
    padding-top: 20px;
}
.box-vande{
    margin-bottom: 20px;
}
.features-new{
    padding-top: 2rem;
}
#gallery{
    height: auto;
}
.box-price{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.call-to-action{
    padding: 0px;
}
.pl120{
    padding: 0px;
}
.feature-content{
    padding: 10px !important;
}
.feature-logo-mobile{
    float: none !important;
    margin: auto auto !important;
}
.borderline{
    display: none;
}
.feature-details{
    padding-top: 0px;
}
.dangky {
    padding: 10px;
    font-size: 16px;
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
}
.box-solu {
    flex-direction: column;
}
.box-problem {
        display: flex;
        gap: 8px;
        flex-direction: column;
    }
    .problem {
        width: 100%;
    }
    .button-menu {
        width: 160px;
        padding: 8px 0px;
    }
    .input-tintuc {
        width: 50%;
    }
    .title-loiich{
        padding-left: 0px;
        padding-right: 0px;
    }
    .dangky-doitac {
        padding: 5px;
    }
    .button-header{
        padding-top: 0px;
    }
    .box-nhiemvu1{
        flex-direction: column;
    }
    .box-nhiemvu2 {
        flex-direction: column;
    }
    .doitacchinhthuc{
        padding: 10px;
    }
    .box-nhiemvu{
        padding: 10px;
    }
    .thungo {
        padding: 10px;
    }
    .banner-hoptac{
        height: 160px;
    }
    .button-header{
        margin-top: 10px;
    }
    .box-header{
        top: 10px;
    }
    .text-thongdiep {
        padding: 10px;
        font-size: 14px;
    }
    .loiich{
        width: 100%;
    }
    .flex-loiich{
        flex-direction: column;
    }
    .box-loiich{
        padding: 10px;
    }
    .text-video {
        position: absolute;
        top: 25px;
        color: #FFF;
        padding: 0px 20px;
        font-size: 14px;
        text-align: justify;
    }
    .img-video {
        height: 240px;
    }
    .hidemobile {
        display: block !important;
    }
    .doitac-img {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .doitac-box {
        flex-direction: column;
    }
    .thongdiep-box {
        flex-direction: column;
    }
    .thongdiep {
        padding: 10px;
    }
    .hesinhthai-des {
        font-size: 32px;
    }
    .hesinhthai-des1{
        padding: 10px;
    }
    .banner-hesinhthai{
        padding: 10px;
    }
    .slide-col {
        flex-direction: column;
    }
    .getfly-team-album{
        padding: 10px;
    }
    .banner-box-slide {
        height: 1980px;
    }
    .post-detail {
        flex-direction: column;
    }
    .post-slide {
        flex-direction: column;
    }
    .getfly-team-post{
        padding: 10px;
    }
    .getfly-team-title {
        font-size: 32px;
    }
    .getfly-team{
        padding: 10px;
    }
    .story-border{
        padding: 10px;
    }
    .header-story{
        padding: 10px;
        flex-direction: column;
    }
    .detail-story{
        padding: 10px;
        flex-direction: column;
    }
    .storys-box {
        flex-direction: column;
        gap: 16px;
    }
    .storys{
        padding: 10px;
    }
    .story-des{
        padding: 10px;
    }
    .story-title {
        font-size: 24px;
    }
    .getfly-story{
        padding: 10px;
    }
    .box-new-group {
        flex-direction: column;
    }
    .customer-crm{
        flex-direction: column;
    }
    .box-register{
        padding: 10px;
        flex-direction: column;
    }
    .vitri{
        flex-direction: column;
        width: 100%;
    }
    .tuyendung {
        flex-direction: column;
    }
    .tuyendung-title {
        font-size: 28px;
    }
    .getfly-tuyendung{
        padding: 10px;
    }
    .form{
        height: 450px;
    }
    .button-h{
        height: 40px !important;
    }
    .button-h img{
        width: 12px !important;
    }
    .box-tuyendung{
        height: 780px;
    }
    .register-form{
        padding: 10px;
    }
    .getfly-tuyendung{
        padding: 10px;
        flex-direction: column;
    }
    .info-box {
        flex-direction: column;
    }
    .info-getfly{
        padding: 10px;
    }
    .infos{
        flex-direction: column;
        gap: 2rem;
    }
    .info-detail{
        flex-direction: column;
    }
    .info{
        padding: 10px;
    }
    .contact-box{
        flex-direction: column;
    }
    .contact{
        padding: 10px;
    }
    .des-detail{
        flex-direction: column;
    }
    .img-detail {
        width: 50px;
        height: 50px;
    }
    .button-detail {
        padding: 4px;
    }
    .detail-title{
        font-size: 18px;
    }
    .box-detail{
        padding: 10px;
    }
    .title-crm {
        font-size: 32px;
    }
    .customer-header{
        flex-direction: column;
    }
    .box-customer-crm {
        padding:10px;
    }
    .box-subpages {
            padding: 10px;
        }
    .bg-banner2{
        height: auto;
    }
    .solution-group{
        height: auto;
    }
    .box-solution3 {
        flex-direction: column;
    }
    .box-solution2{
        padding: 10px;
    }
    .title{
        margin-top: 2rem;
        margin-bottom: 2rem;
        font-size: 20px;
    }
    .box-who2{
        flex-direction: column;
        padding-top: 0px;
    }
    .box-who{
        padding: 10px;
    }
    .box-why2{
        padding: 10px;
    }
    .why2-group{
        flex-direction: column;
        padding: 10px;
    }
    .core-values-img{
        left: 0px;
    }
    .values{
        display: flex;
        flex-direction: column;
    }
    .box-core-values{
        padding: 10px;
    }
    .mission{
        display: flex;
        flex-direction: column;
    }
    .bg-banner4{
        height: initial;
    }
    .box-header-banner{
        display: flex;
        flex-direction: column;
    }
    .box-banner{
        display: block;
    }
    .banner-box{
        height: 95px;
    }
    .btn-next-banner{
        height: 100px;
    }
    .btn-next-banner img{
        width: 32px;
    }
    .box-video{
        padding: 10px;
        flex-direction: column;
    }
    .mobile{
        width: 100%;
    }
    .box-solution{
        padding: 10px;
    }
    .solution{
        flex-direction: column;
        gap: 16px;
    }
    .solutions{
        width: 100%;
    }
    .solution-title{
        padding-top: 2.5rem;
    }
    .box-feature{
        padding: 10px;
    }
    .feature-group{
        flex-direction: column;
        gap: 16px;
    }
    .feature-box{
        width: 100%;
    }
    .feature-header{
        gap: 16px;
        margin-bottom: 0px;
    }
    .feature-active p{
        padding: 0px;
    }
    .feature-box p{
        padding: 0px;
    }
    .feature-content{
        padding: 10px;
        flex-direction: column;
    }
    .box-banner{
        padding: 10px;
    }
    .banner-action{
        flex-direction: column;
        gap: 16px;
    }
    .bg-banner{
        height: 450px;
        background-size: cover;
        justify-content: center;
        display: flex;
    }
    .banners {
        text-align: center;
    }
    .banner-center{
        border: none;
    }
    .box-why{
        padding: 10px;
    }
    .whys{
        flex-direction: column;
    }
    .why-title{
        font-size: 22px;
    }
    .box-feedback{
        padding: 10px;
    }
    .slide-detail{
        padding: 10px;
        gap: 16px;
        flex-direction: column;
    }
    .slides-img{
        width: 200px;
        height: 200px;
    }
    .feedback-detail{
        height: 26rem;
    }
    .box-feedback .btn-next{
        background: transparent;
        width: 70px;
    }
    .box-customer{
        padding: 10px;
        flex-direction: column;
    }
    .title-box {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .box-customer-group{
        flex-direction: column;
    }
    .box-slide{
        padding: 10px;
    }
    .box-slide-detail{
        padding: 10px;
        gap: 16px;
        flex-direction: column;
    }
    .box-customer-slide{
        width: 13rem;
        margin: 0 auto;
    }
    .h-slide{
        height: 1050px;
    }
    .box-banner2{
        background-size: cover;
        padding: 10px;
        text-align: center;
        display: block;
    }
    .bg-banner3{
        padding: 10px;
    }
    .bg-footer{
        padding: 10px;
        flex-direction: column;
        text-align: center;
        padding-bottom: 80px;
    }
    .social-mobile{
        justify-content: center;
    }
    .feature-active{
        width: 100%;
    }
    .social{
        right: 0px !important;
    }
    .mega-journey {
        display: none;
    }
    .mega-menu {
        padding-left: 0px;
        top: 0px !important;
        flex-direction: column;
    }
    .menu-small {
        width: 100%;
        flex-wrap: inherit;
        flex-direction: row;
        display: flex;
    }
    .hide{
        display: none;
    }
    .mega-button{
        width: 5rem;
        justify-content: center;
    }
    li button[aria-selected="true"] {
        border-bottom: 2px solid #233F80 !important;
    }
    .mega-box-detail{
        flex-direction: column;
    }
    .box-menu-small {
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .mega-menu{
        height: auto;
    }
}
@media (min-width: 768px) {
    .li-menu {
        padding: 7px;
    }
    .banner-hesinhthai{
        padding: 10px;
    }
    .thongdiep{
        padding: 10px;
    }
    .text-video {
        position: absolute;
        top: 100px;
        color: #FFF;
        padding: 10px 60px;
        font-size: 16px;
        text-align: justify;
    }
    .logo {
        width: 7rem;
    }
}
@media (min-width: 1367px) {
    .logo {
        width: 7rem;
    }
    .thongdiep {
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .banner-hesinhthai{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .hesinhthai-des1{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .getfly-team-album{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .getfly-team{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .getfly-team-post{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .header-story{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .detail-story{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .storys{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .getfly-story{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .register-form{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .getfly-tuyendung {
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .info-getfly{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .info{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .contact{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .box-detail{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .table-header-price {
        padding: 1rem;
    }
    .btn-trial {
        padding: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .text-1 {
        top: 21px;
        right: 190px;
    }
    .text-2 {
        top: 140px;
        right: 75px;
    }
    .text-3 {
        top: 275px;
        right: 55px;
    }
    .text-4 {
        top: 380px;
        right: 100px;
    }
    .text-5 {
        top: 495px;
        right: 138px;
    }
    .text-6 {
        top: 628px;
        right: 509px;
    }
    .text-7 {
        top: 513px;
        left: 205px;
    }
    .text-8 {
        top: 390px;
        left: 117px;
    }
    .text-9 {
        top: 260px;
        left: 90px;
    }
    .text-10 {
        top: 145px;
        left: 110px;
    }
    .text-11 {
        top: 20px;
        left: 200px;
    }
    .box-customer-crm{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .box-price{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .extend{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .mega-menu {
        height: 580px;
    }
    .mega-journey {
        height: 579px;
        width: 500px;
    }
    .box-solution2{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .box-who{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .box-why2{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .box-banner{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .box-banner2{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .box-core-values{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .logo {
        width: 8rem;
    }
    .li-menu {
        padding: 0.5rem;
    }
    .box-video {
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .box-solution{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .box-feature{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .box-why{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .box-feedback{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .box-customer{
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .box-slide {
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .footer {
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .footer-p {
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .box-footer .social {
        right: -150px;
    }
    .banner-box {
        height: 490px;
    }
    .box-subpages {
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .box-register {
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .text-video{
         position: absolute;
        top: 30px;
        color: #FFF;
        padding: 10px 60px;
        font-size: 16px;
        text-align: justify;
    }
}
@media (min-width: 1440px) {
    .banner-box {
        height: 360px;
    }
    .logo {
        width: 7rem;
    }
    .text-video {
        position: absolute;
        top: 30%;
        color: #FFF;
        padding: 10px 60px;
        font-size: 16px;
        text-align: justify;
    }
    .box-video,
    .box-solution,
    .box-feature,
    .box-banner,
    .box-why,
    .box-feedback,
    .box-customer,
    .box-slide,
    .box-banner2,
    .box-core-values,
    .footer,
    .box-price,
    .banner-hesinhthai,
    .thongdiep,
    .box-customer-crm,
    .getfly-tuyendung,
    .getfly-team,
    .getfly-team-post,
    .getfly-team-album,
    .box-why2,
    .box-who,
    .box-solution2,
    .footer-p,
    .box-subpages,
    .box-detail,
    .hesinhthai-des1,
    .register-form,
    .box-register,
    .features-new {
        padding-left: 15rem;
        padding-right: 15rem;
    }
    .extend {
        padding-left: 5rem;
        padding-right: 5rem;
    }
    .box-who2{
        gap: 16px;
    }
    .thungo {
        padding-left: 15rem;
        padding-right: 15rem;
    }
    .box-loiich{
        padding-left: 15rem;
        padding-right: 15rem;
    }
    .title-loiich{
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .box-nhiemvu{
        padding-left: 15rem;
        padding-right: 15rem;
    }
    .doitacchinhthuc{
        padding-left: 15rem;
        padding-right: 15rem;
    }
}
@media (max-width: 1440px) {
    .menu-top {
        padding-left: 10rem;
        padding-right: 10rem;
    }
    .text-thongdiep {
        font-size: 26px;
    }
}
@media (max-width: 1366px) {
    .menu-top {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .features-new,
    .fea{
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .feature-logo-right{
        right: 525px;
    }
}
/* code 26/02 */

.bg-price{
    background: url(../images/banner-baogia.png) no-repeat 0 0;
    background-size: cover;
    height: 348px;
    border-radius: 30px;
}
.bg-price1{
    background: url(../images/bg-price.png);
    margin-top: 60px;
}
.bg-price-footer{
    background: url(../images/bg-price5.png);
}
.box-pri{
    background: #fff;
    /* width: 256px; */
    border-radius: 20px;
    box-shadow: 0px 10px 20px 0px rgba(70, 144, 255, 0.15);
}
.box-pri-special{
    /* width: 256px; */
    border-radius: var(--Main-System-20px, 20px);
    border: 2px solid #FA9119;
    background: #071E55;
    box-shadow: 0px 1px 64px 4px rgba(7, 30, 85, 0.15);
    position: relative;
}
.button-pri{
    border-radius: 12px;
    background: linear-gradient(81deg, #F47E37 -103.53%, #FF9F04 100%);
    box-shadow: 0px 1px 4px 0px rgba(25, 24, 28, 0.15);
    padding: 12px;
    color: #fff;
    font-weight: bold;
    width: 100%;
}
.slide-img{
    border-radius: 20px;
    min-width: 140px;
    height: 140px;
}
.button-pri:hover{
    background: #F7860C;
}
.button-special{
    border-radius: 6px 12px;
    background: #FA9119;
    display: flex;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}
.bg-price2{
    background: url(../images/bg-price2.png) no-repeat 0 0;
    background-size: cover;
}
.bg-price4{
    background: url(../images/bg-price4.png) no-repeat 0 0;
    background-size: cover;
}
.box-pri2{
    width: 100%;
    border-radius: 20px;
    border: 1.5px solid #064FF4;
    background: #F5F7FF;
    box-shadow: 0px 5.812px 17.435px 0px rgba(0, 47, 158, 0.05);
}
.fly{
    position: absolute;
    right: 40px;
    top: -100px;
    z-index: 1;
    width: 480px;
}
.footer{
    box-shadow: 0px 5.812px 17.435px 0px rgba(0, 47, 158, 0.05);
    background: url(../images/footer-img.png) no-repeat 0 0;
    background-size: cover;
}
.footer1{
    box-shadow: 0px 5.812px 17.435px 0px rgba(0, 47, 158, 0.05);
    background: url(../images/footer-img2.png) no-repeat 0 0;
    background-size: cover;
}
.bg-price3{
    background: url(../images/bg-price1.png);
    margin-top: 60px;
}

.active-pricing{
    background-color: #fff;
    color: #233F80;
}
.bg-head{
    background: url(../images/bg-home1.png);
    z-index: 11;
}
.roundimg{
    position: absolute;
    top: 118px;
    left: -38px;
    transform: rotate(0deg);
}


#myBtn {
    position: fixed;
    bottom: 20px;
    right: 100px;
}
.bg-home1{

    background-repeat: round;
    height: 618px;
}

.bg-scroll-rocket {
    background: url(../images/bg-scroll.png);
    height: 800px;
}
.bg-section {
    background: url(../images/bg-section.png);
    /* height: 1500px; */
}
.btn-app{
    border-radius: 10px;
    border: 1px solid #BFDBFE;
    background: #EFF6FF;
    box-shadow: 0px 1px 10px 0px rgba(0, 122, 255, 0.15);
    padding: 6px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.footer-text{
    background: url(../images/footer-text.png);
}
.footer3{
    box-shadow: 0px 5.812px 17.435px 0px rgba(0, 47, 158, 0.05);
    background: url(../images/footer-img3.png) no-repeat 0 0;
    background-size: cover;
}
li.active{
    color:red;
}


.image-container {
    position: relative;
    display: inline-block;
    opacity: 0.4;
    filter: grayscale(100%);
}
.image-container:hover{
    opacity: 1;
    filter: inherit; /* Chuyển ảnh thành màu gray khi hover */
    transition: filter 0.3s;
    cursor: pointer;
}


.marquee {
    overflow: hidden;
  }

  .marquee-content {
    display: flex;
    animation: scrolling 10s linear infinite;
  }

  .marquee-item {
    flex: 0 0 16vw;
    margin: 0 1vw;
  /*   flex: 0 0 20vw; */
  /*   margin: 0 2vw; */
  }

  .marquee-item img {
    display: block;
    /* width: 100%; */
  /*   padding: 0 20px; */
  }

  @keyframes scrolling {
    0% { transform: translateX(0); }
    100% { transform: translatex(-144vw); }
  }


@keyframes scrolling {
    0% { transform: translateX(0); }
    100% { transform: translatex(-144vw); }
}

#slide-interact button[aria-current="true"] {
    background-color: #384250 !important;
}
.btn1-tab-active{
    background-color: #EBF0FC;
    color:#003BD2;
    border: 1px solid #003BD2;
}
.btn2-tab-active{
    background-color: #EDFDFA;
    color:#00997D;
    border: 1px solid #00997D;
}
.btn3-tab-active{
    background-color: #FFDFD1;
    color:#F24A00;
    border: 1px solid #F24A00;
}

.btn-pay{
    background: #EDEFF3;
    color:#6E6E6E;
    border: 1px solid #EDEFF3;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    padding: 5px 20px;
}
.btn-pay.active{
    background-color: #E9EFFC;
    color:#0555F8;
    border: 1px solid #0555F8;
    border-radius: 6px;
    font-size: 16px;
    font-weight:600;
    padding: 5px 20px;
}

#animateNumber {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    transition: 0.5s ease-in-out;
}

.active-border {
    background-color: #FEFEFE;
}
.active-border.active {
    border-color: var(--border-color);
    background-color: var(--bg-color) !important;
}


.bg-animation {
	background: repeating-linear-gradient(-45deg, #0129EF, #042EEF, #1954F4, #307DFA);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
    animation: rotate-animation 1s infinite linear;
}


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.bg-fadeup{
    background: url(../images/bg-fadeup.png);
    animation: mymove 1s infinite;
}
@keyframes mymove {
    80% {opacity: 0.6;}
}
.bg-star{
    background: url(../images/bg-star.png);
    animation: mystar 1s infinite;
}
@keyframes mystar {
    80% {opacity: 0.6;}
}

.bg-pric{
    background: url(../images/bg-price6.png);
}

.bg-linear-feature{
    background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 51%, rgba(255,255,255,1) 100%);
}
.button-menu{
    background: linear-gradient(81deg, #F47E37 -103.53%, #FF9F04 100%) !important;
}