:root {
    --theme-color-first: #6ABA4C;
    --theme-color-second: #AED581;
    --theme-color-third: #FFCC33;
}

.btn_catalogue_header {
    margin-left: 6px;
    padding: 4px 8px;
    background: #3b5998;
    color: #fff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 8px;
}

    .btn_catalogue_header:hover {
        color: #fff;
        background: #8b9dc3;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }

.bg-theme {
    background: var(--theme-first) !important;
}

.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-toggle:after {
    right: 0.8rem;
}

.fs-10px {
    font-size: 10px !important
}

.fs-11px{
    font-size:11px !important
}

.fs-12px {
    font-size: 12px !important
}

.fs-13px {
    font-size: 13px !important
}

.fs-14px {
    font-size: 14px !important
}

.fs-15px {
    font-size: 15px !important
}

.fs-16px {
    font-size: 16px !important
}

.fs-17px {
    font-size: 17px !important
}

.spotlight {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

    .spotlight:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        background-color: rgba(255, 255, 255, 0.5);
        -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);
        -moz-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);
        -ms-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);
        -o-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);
        transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);
        -webkit-transition: all 0.6s ease;
        -moz-transition: all 0.6s ease;
        transition: all 0.6s ease;
    }

    .spotlight:hover:before {
        -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);
        -moz-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);
        -ms-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);
        -o-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);
        transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);
    }

.img_product_list {
    aspect-ratio: 1/1;
    object-fit: contain;
}

.particles-js {
    width: 100%;
    height: 100%;
    /*background-color: #b61924;*/
    background-image: url('');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    z-index: 0;
}

    .particles-js canvas {
        display: block;
        vertical-align: bottom;
    }

#particles-info-header {
    z-index: -1 !important;
}

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

/*--------Small Laptop - 14inch----------*/
@media (min-width:1000px) and (max-width:1200px) {
    footer .footer-infor p a {
        font-size: 9px;
    }
}
/*--------Small Laptop - 14inch----------*/
@media (min-width:1200px) and (max-width:1350px) {
    footer .footer-infor p a {
        font-size: 11px;
    }
}

footer {
    /* background: url(/images/bg-footer.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;*/
    /*background: linear-gradient(100deg, #727477 0%, rgba(114, 116, 119, .97) 0%, #37393D 100.81%);*/
    background-color: green;
    background-image: linear-gradient(#6ea947, #2f813f);
    position: relative;
    z-index: 2;
}

    footer .footer_main :is(a, p, span,i) {
        color: #fff !important;
        font-size: 12px;
    }

    footer .footer_main .widget-title {
        color: #fff !important;
        font-size: 14px;
    }

    footer .copyright {
        background: #eeeeee47;
        font-size: 12px;
    }

    footer .social i {
        padding: 4px;
        background: white;
        color: #000000 !important;
        border-radius: 100%;
        font-size: 13px !important;
    }

.text-shadow {
    text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}

#offcanvas-info {
    /*    background: url("https://images.pexels.com/photos/1058401/pexels-photo-1058401.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1") center center / cover no-repeat rgba(0, 0, 0, 0.5);*/
    background-color: #000000;
    width: 355px !important;
}

    #offcanvas-info :is(p,span,a) {
        color: #fff !important;
    }

    #offcanvas-info::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2); /* Change the color and opacity as needed */
    }

.text-brown {
    color: var(--theme-color-second) !important;
}

.library_figcaption {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 0.5rem;
    }

    .text-lg-start {
        text-align: justify !important;
    }
}



#callme {
    position: fixed;
    left: 22px;
    bottom: 34px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    opacity: 0.9;
    z-index: 20;
}

    #callme #callmeMain {
        -moz-border-radius: 50% !important;
        -webkit-border-radius: 50% !important;
        border-radius: 50% !important;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        /*background-color: #3f78e0;*/
        width: 40px;
        height: 40px;
        -webkit-animation: zcwmini2 1.5s 0s ease-out infinite;
        -moz-animation: zcwmini2 1.5s 0s ease-out infinite;
        animation: zcwmini2 1.5s 0s ease-out infinite;
    }

    #callme.zalo #callmeMain:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url('/images/demo/zalo (2).png');
        background-repeat: no-repeat;
        background-position: center center;
        /*-webkit-animation: zcwphone2 1.5s linear infinite;
            -moz-animation: zcwphone2 1.5s linear infinite;*/
        animation: zcwphone2 1.5s linear infinite;
    }

    #callme.facebook #callmeMain:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url(/images/demo/facebook.png);
        background-repeat: no-repeat;
        background-position: center center;
        /*-webkit-animation: zcwphone2 1.5s linear infinite;
            -moz-animation: zcwphone2 1.5s linear infinite;*/
        animation: zcwphone2 1.5s linear infinite;
    }

    #callme.viber #callmeMain:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url(/images/icon/viber.png);
        background-repeat: no-repeat;
        background-position: center center;
        /*-webkit-animation: zcwphone2 1.5s linear infinite;
            -moz-animation: zcwphone2 1.5s linear infinite;*/
        animation: zcwphone2 1.5s linear infinite;
    }

    #callme.tiktok #callmeMain:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url(/images/demo/tiktok.png);
        background-repeat: no-repeat;
        background-position: center center;
        /*-webkit-animation: zcwphone2 1.5s linear infinite;
            -moz-animation: zcwphone2 1.5s linear infinite;*/
        animation: zcwphone2 1.5s linear infinite;
    }

    #callme.instagram #callmeMain:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url(/images/demo/insta.png);
        background-repeat: no-repeat;
        background-position: center center;
        /*-webkit-animation: zcwphone2 1.5s linear infinite;
            -moz-animation: zcwphone2 1.5s linear infinite;*/
        animation: zcwphone2 1.5s linear infinite;
    }

@media (max-width:576px) {
    #callme {
        right: 20px;
        left: auto;
    }
    .nav_sign_in{
        font-size: 11px;
    }
}

@-webkit-keyframes zcwphone {
    0% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    25% {
        -ms-transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    50% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    75% {
        -ms-transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }

    100% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@-moz-keyframes zcwphone {
    0% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    25% {
        -ms-transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    50% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    75% {
        -ms-transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }

    100% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes zcwphone {
    0% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    25% {
        -ms-transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    50% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    75% {
        -ms-transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }

    100% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@-webkit-keyframes zcwphone2 {
    0% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    25% {
        -ms-transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    50% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    75% {
        -ms-transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }

    100% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@-moz-keyframes zcwphone2 {
    0% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    25% {
        -ms-transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    50% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    75% {
        -ms-transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }

    100% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes zcwphone2 {
    0% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    25% {
        -ms-transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    50% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    75% {
        -ms-transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }

    100% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@-webkit-keyframes zcwmini {
    0% {
        box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);
    }

    10% {
        box-shadow: 0 0 8px 6px, 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px;
    }

    100% {
        box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);
    }
}

@-moz-keyframes zcwmini {
    0% {
        box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);
    }

    10% {
        box-shadow: 0 0 8px 6px, 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px;
    }

    100% {
        box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);
    }
}

@keyframes zcwmini {
    0% {
        box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);
    }

    10% {
        box-shadow: 0 0 8px 6px, 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px;
    }

    100% {
        box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);
    }
}

@-webkit-keyframes zcwmini2 {
    0% {
        box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);
    }

    10% {
        box-shadow: 0 0 8px 6px, 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px;
    }

    100% {
        box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);
    }
}

@-moz-keyframes zcwmini2 {
    0% {
        box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);
    }

    10% {
        box-shadow: 0 0 8px 6px, 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px;
    }

    100% {
        box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);
    }
}

@keyframes zcwmini2 {
    0% {
        box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);
    }

    10% {
        box-shadow: 0 0 8px 6px, 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px;
    }

    100% {
        box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);
    }
}


.menu_header .nav-link {
    text-transform: uppercase;
    font-size: .7rem;
}

.menu_header .dropdown-item {
    text-transform: uppercase;
}

.row-flex {
    display: flex;
    flex-wrap: wrap;
}

.breadcrumb .breadcrumb-item {
    word-break: break-word;
}

img.img_flag_lang {
    height: 20px;
}

.img_banner_popup {
    object-fit: contain;
}

.navbar.navbar-dark .logo-dark, .navbar.navbar-dark .logo-light {
    object-fit: contain;
}

.swiper-slide.bg-overlay-400:before {
    background: rgba(30,34,40,.03) !important;
}

.swiper-slide.bg-overlay-100:before {
    background: rgba(30,34,40,.1) !important;
}


.swiper.slide_partner_list {
    width: 100%;
    height: 100%;
}

.slide_partner_list .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .slide_partner_list .swiper-slide img {
        display: block;
        width: 100%;
        object-fit: contain;
    }

.swiper-container-modal {
    -webkit-user-select: none;
    position: relative;
    z-index: 1051 !important;
}

/*------------Loading page-----------*/
.loader_container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 1068;
    opacity: 0.95;
    width: 100%;
    height: 100%;
    background: rgb(255,253,253);
    background: radial-gradient(circle, rgba(255,253,253,1) 0%, rgba(249,236,236,1) 100%);
}

.loader {
    position: relative;
    width: 64px;
    height: 64px;
    background-color: rgba(0, 0, 0, 0.5);
    transform: rotate(45deg);
    overflow: hidden;
}

    .loader:after {
        content: '';
        position: absolute;
        inset: 8px;
        margin: auto;
        background: var(--theme-first);
    }

    .loader:before {
        content: '';
        position: absolute;
        inset: -15px;
        margin: auto;
        background: var(--theme-second);
        animation: diamondLoader 1s linear infinite;
    }

@keyframes diamondLoader {
    0%,10% {
        transform: translate(-64px, -64px) rotate(-45deg)
    }

    90%, 100% {
        transform: translate(0px, 0px) rotate(-45deg)
    }
}
/*------------Loading page-----------*/

/*------------Loading page 2-----------*/

.spinner {
    position: relative;
    margin: auto;
    box-sizing: border-box;
    background-clip: padding-box;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);
    transform-origin: 50% 60%;
    transform: perspective(200px) rotateX(66deg);
    animation: spinner-wiggle 1.2s infinite;
}

@keyframes spinner-wiggle {
    30% {
        transform: perspective(200px) rotateX(66deg);
    }

    40% {
        transform: perspective(200px) rotateX(65deg);
    }

    50% {
        transform: perspective(200px) rotateX(68deg);
    }

    60% {
        transform: perspective(200px) rotateX(64deg);
    }
}

.spinner:before,
.spinner:after {
    content: "";
    position: absolute;
    margin: -4px;
    box-sizing: inherit;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    opacity: 0.05;
    border: inherit;
    border-color: transparent;
    animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
}

.spinner:before {
    border-top-color: #66e6ff;
}

.spinner:after {
    border-top-color: #f0db75;
    animation-delay: 0.3s;
}

@keyframes spinner-spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinner-fade {
    20% {
        opacity: 0.1;
    }

    40% {
        opacity: 1;
    }

    60% {
        opacity: 0.1;
    }
}

/*------------Loading page 2-----------*/


@keyframes rotate {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.text-theme-first {
    color: var(--theme-first) !important;
}

.text-theme-second {
    color: var(--theme-second) !important;
}

.bg-theme-first {
    background-color: var(--theme-first) !important;
}

.bg-theme-second {
    background-color: var(--theme-second) !important;
}

.logo_header {
    height: 60px;
}

@media only screen and (max-width: 991.98px) {
    .navbar-expand-lg .navbar-brand {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .logo_header {
        height: 38px;
    }
}

.detail_content {
    display: flow-root;
}

    .detail_content :is(img, p, iframe) {
        max-width: 100% !important;
        object-fit: contain;
        height: unset;
    }

.image_news {
    /*height: 230px !important;*/
    aspect-ratio: 16/9;
    object-fit: cover;
}

.image_solution {
    aspect-ratio: 3/2;
    object-fit: cover;
}

.image_product {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.image_project {
    aspect-ratio: 3/2;
    object-fit: cover;
}

.image_library {
    aspect-ratio: 3/2;
    object-fit: cover;
}

.progress-wrap {
    bottom: 0.5rem;
}

.sp-line-1, .sp-line-2, .sp-line-3, .sp-line-4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical
}

.sp-line-1 {
    -webkit-line-clamp: 1
}

.sp-line-2 {
    -webkit-line-clamp: 2
}

.sp-line-3 {
    -webkit-line-clamp: 3
}

.sp-line-4 {
    -webkit-line-clamp: 4
}

span.select2 .select2-selection {
    height: 52px;
    display: block;
    width: 100%;
    padding: 0.6rem 2rem 0.6rem 1rem;
    -moz-padding-start: calc(1rem - 3px);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.7;
    color: #959ca9;
    background-color: #fefefe;
    background-image: url(data:image/svg+xml,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='45' height='32' viewBox='0 0 45 32'%3e%3cpath fill='%2360697b' d='M26.88 29.888c-1.076 1.289-2.683 2.103-4.48 2.103s-3.404-0.814-4.472-2.093l-0.008-0.009-5.12-7.040-8.192-10.048-3.52-4.608c-0.646-0.848-1.036-1.922-1.036-3.087 0-2.828 2.292-5.12 5.12-5.12 0.139 0 0.277 0.006 0.413 0.016l-0.018-0.001h33.664c0.118-0.010 0.256-0.015 0.396-0.015 2.828 0 5.12 2.292 5.12 5.12 0 1.165-0.389 2.239-1.045 3.1l0.009-0.013-3.52 4.608-7.872 10.048z'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 8px 6px;
    border: 1px solid rgba(8,60,130,.07);
    border-radius: 0.4rem;
    box-shadow: 0 0 1.25rem rgba(30,34,40,.04);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    span.select2 .select2-selection .select2-selection__rendered {
        padding-left: 0px;
        padding-right: 0px;
    }

    span.select2 .select2-selection .select2-selection__arrow {
        padding-top: 23px;
        padding-bottom: 23px;
        padding-right: 42px;
    }

.select2-w100 .select2.select2-container {
    width: 100% !important;
}


.icon_datepicker::after {
    font-family: Unicons !important;
    content: "\e9ba";
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 1000;
    height: 20px;
    width: 20px;
    font-size: 20px;
    padding: 2px;
    border-width: thin;
    opacity: 1;
    display: block;
    font-style: normal;
    cursor: pointer;
}

/*custom css datepicker*/
.datepicker.datepicker-dropdown {
    width: 18.75rem;
    padding: .375rem .75rem .75rem;
    z-index: 1060 !important;
    border-radius: 0
}

    .datepicker.datepicker-dropdown:after, .datepicker.datepicker-dropdown:before {
        display: none
    }

.datepicker .datepicker-switch, .datepicker .next, .datepicker .prev {
    padding: .625rem;
    min-width: 2.5rem
}

    .datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover {
        background: 0 0 !important;
        color: #3f78e0
    }

.datepicker .next, .datepicker .prev {
    overflow: hidden;
    text-indent: -100px;
    max-width: 1.875rem;
    padding: .3125rem 0;
    text-align: center
}

    .datepicker .next:before, .datepicker .prev:before {
        font-family: Unicons !important;
        font-weight: 900;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        position: absolute;
        width: 1.875rem;
        text-indent: 0
    }

    .datepicker .next:before {
        content: "\e92b";
        right: 0
    }

    .datepicker .prev:before {
        content: "\e92a";
        left: 0
    }

.datepicker .datepicker-switch {
    font-weight: 600;
    font-size: .9625rem;
    color: #3f78e0;
    width: 100% !important
}

.datepicker .datepicker-switch, .datepicker .next, .datepicker .prev {
    padding: .3125rem
}

.datepicker .datepicker-days, .datepicker .datepicker-months, .datepicker .datepicker-years {
    position: relative
}

    .datepicker .datepicker-days table {
        width: 100%
    }

        .datepicker .datepicker-days table thead tr th.dow {
            color: #c3c3c3;
            font-size: .74375rem;
            font-weight: 600;
            border-radius: 0;
            padding: .3125rem 0
        }

        .datepicker .datepicker-days table tbody tr td {
            padding: .5rem 0;
            border-radius: 0;
            font-weight: 600;
            font-size: .74375rem;
            border: 1px solid #d3d7df;
            color: var(--bs-inverse);
            width: 14%
        }

            .datepicker .datepicker-days table tbody tr td.old {
                color: #c3c3c3
            }

            .datepicker .datepicker-days table tbody tr td.new {
                color: #c3c3c3
            }

            .datepicker .datepicker-days table tbody tr td.focused, .datepicker .datepicker-days table tbody tr td.range, .datepicker .datepicker-days table tbody tr td:hover {
                color: #fff;
                background: #3f78e0 !important
            }

            .datepicker .datepicker-days table tbody tr td.active, .datepicker .datepicker-days table tbody tr td.selected, .datepicker .datepicker-days table tbody tr td.today {
                background: #3f78e0 !important;
                border-color: #3f78e0 !important;
                color: #fff;
                text-shadow: none;
                position: relative
            }

                .datepicker .datepicker-days table tbody tr td.active:after, .datepicker .datepicker-days table tbody tr td.active:before, .datepicker .datepicker-days table tbody tr td.selected:after, .datepicker .datepicker-days table tbody tr td.selected:before, .datepicker .datepicker-days table tbody tr td.today:after, .datepicker .datepicker-days table tbody tr td.today:before {
                    content: "";
                    position: absolute;
                    top: 0;
                    bottom: -1px;
                    background: #3f78e0;
                    width: 1px;
                    left: -1px
                }

                .datepicker .datepicker-days table tbody tr td.active:after, .datepicker .datepicker-days table tbody tr td.selected:after, .datepicker .datepicker-days table tbody tr td.today:after {
                    bottom: auto;
                    top: -1px;
                    width: auto;
                    height: 1px;
                    right: -1px
                }

    .datepicker .datepicker-centuries table tbody tr td, .datepicker .datepicker-decades table tbody tr td, .datepicker .datepicker-months table tbody tr td, .datepicker .datepicker-years table tbody tr td {
        padding-top: .1875rem
    }

        .datepicker .datepicker-centuries table tbody tr td span, .datepicker .datepicker-decades table tbody tr td span, .datepicker .datepicker-months table tbody tr td span, .datepicker .datepicker-years table tbody tr td span {
            width: 25%;
            margin: 0;
            border-radius: 0;
            border: 1px solid #d3d7df;
            font-weight: 600;
            font-size: .7875rem;
            margin: 0 -1px -1px 0;
            color: var(--bs-inverse)
        }

            .datepicker .datepicker-centuries table tbody tr td span.focused, .datepicker .datepicker-centuries table tbody tr td span:hover, .datepicker .datepicker-decades table tbody tr td span.focused, .datepicker .datepicker-decades table tbody tr td span:hover, .datepicker .datepicker-months table tbody tr td span.focused, .datepicker .datepicker-months table tbody tr td span:hover, .datepicker .datepicker-years table tbody tr td span.focused, .datepicker .datepicker-years table tbody tr td span:hover {
                color: #fff !important;
                background: #3f78e0 !important
            }

            .datepicker .datepicker-centuries table tbody tr td span.focused, .datepicker .datepicker-decades table tbody tr td span.focused, .datepicker .datepicker-months table tbody tr td span.focused, .datepicker .datepicker-years table tbody tr td span.focused {
                color: #3f78e0
            }

            .datepicker .datepicker-centuries table tbody tr td span.active, .datepicker .datepicker-decades table tbody tr td span.active, .datepicker .datepicker-months table tbody tr td span.active, .datepicker .datepicker-years table tbody tr td span.active {
                border-color: #3f78e0;
                position: relative;
                background: #3f78e0 !important;
                color: #fff !important;
                text-shadow: none
            }
/*custom css datepicker*/



/*custom css OTP*/
.otp-input-fields {
    margin: auto;
    width: auto;
    display: flex;
    justify-content: space-evenly !important;
    gap: 10px;
    padding: 10px;
}

    .otp-input-fields input {
        display: inline-block;
        width: 50px;
        height: 50px;
        text-align: center;
        border: 1px solid #d3d7df;
        background-color: #fefefe;
        background-clip: padding-box;
        border-radius: 0.4rem;
    }

        .otp-input-fields input:focus {
            outline: none !important;
            border: 1px solid #3f78e0;
            box-shadow: 0 0 6px #287a1a;
        }

        .otp-input-fields input::-webkit-outer-spin-button, .otp-input-fields input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .otp-input-fields input[type=number] {
            -moz-appearance: textfield;
        }

        .otp-input-fields input:focus {
            border-width: 2px;
            border-color: #287a1a;
            font-size: 20px;
        }
/*custom css OTP*/


.gslider .gslide.loaded {
    display: none;
}

    .gslider .gslide.loaded.current {
        display: flex;
    }

.div_small_header {
    background-color: green;
    background-image: linear-gradient(#6ea947, #2f813f);
}

.spotlight {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

    .spotlight:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        background-color: rgba(255, 255, 255, 0.5);
        -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);
        -moz-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);
        -ms-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);
        -o-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);
        transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);
        -webkit-transition: all 0.6s ease;
        -moz-transition: all 0.6s ease;
        transition: all 0.6s ease;
    }

    .spotlight:hover:before {
        -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);
        -moz-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);
        -ms-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);
        -o-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);
        transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);
    }

.vibrate {
    animation: vibrate 2s ease infinite
}

@-webkit-keyframes vibrate {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg)
    }

    10% {
        -webkit-transform: rotate(-3deg) scale(1) skew(1deg)
    }

    20% {
        -webkit-transform: rotate(3deg) scale(1) skew(1deg)
    }

    30% {
        -webkit-transform: rotate(-3deg) scale(1) skew(1deg)
    }

    40% {
        -webkit-transform: rotate(3deg) scale(1) skew(1deg)
    }

    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg)
    }

    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg)
    }
}
.div_logo {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(145deg, #ffffff, #eef5eb); /* trắng pha xanh nhạt */
    box-shadow: 0 2px 5px rgba(80, 150, 100, 0.15), /* bóng ngoài xanh lá nhẹ */
    0 0 8px rgba(255, 230, 120, 0.2), /* ánh vàng nhẹ tỏa ngoài */
    inset 0 1px 1px rgba(255, 255, 255, 0.7), /* viền sáng trên */
    inset 0 -1px 2px rgba(180, 200, 160, 0.25); /* đổ bóng trong xanh-vàng nhạt */
    animation: float-logo 5s ease-in-out infinite;
    transition: transform 0.3s ease, box-shadow 0.4s ease, filter 0.4s ease;
    vertical-align: middle;
    padding: 6px 8px;
}
    /* Logo hình ảnh */
    .div_logo img {
        display: block;
        max-height: 64px;
        height: 40px !important;
        width: auto;
        border-radius: 10px;
        background: #fff;
        filter: brightness(1.08) contrast(1.05) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 6px rgba(200, 200, 200, 0.5));
        transition: filter 0.4s ease, transform 0.4s ease;
    }

    /* Ánh sáng phản kim loại chạy chéo */
    .div_logo::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 80%;
        height: 100%;
        background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 45%, rgba(220, 220, 220, 0.4) 55%, rgba(255, 255, 255, 0) 100% );
        transform: skewX(-20deg);
        animation: shine-metal 6s ease-in-out infinite;
        pointer-events: none;
    }

    /* Hover — sáng kiểu gương nhẹ */
    .div_logo:hover img {
        filter: brightness(1.3) contrast(1.2) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.6));
        transform: scale(1.04);
    }

/* Lơ lửng nhẹ */
@keyframes float-logo {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* Hiệu ứng ánh sáng phản kim loại */
@keyframes shine-metal {
    0% {
        left: -100%;
    }

    50% {
        left: 130%;
    }

    100% {
        left: 130%;
    }
}