/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.section-grad {
    /* background: linear-gradient(180deg, #578AFF 0%, #0D2DFF 100%); */
    background-color: #fff;
}


.section-footer {
    background: linear-gradient(180deg, #0722CC 0%, #161A50 58.17%);
}



.absolute-footer.dark {
    display: none;
}


.mfp-bg {
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(8px);
}

/* Popup container: không giới hạn bề rộng */
.mfp-wrap,
.mfp-container {
    width: 100% !important;
    height: 92vh !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: white !important;
}

/* Menu chiếm nửa trên toàn width */
.mfp-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;

    display: flex !important;
    align-items: flex-start;
    justify-content: center;

    overflow-y: auto;
    overflow-x: hidden;

    transform: translateY(-100%);
    transition: transform .35s ease;
}

.mfp-ready .mfp-content {
    transform: translateY(0);
}

.mfp-content .row,
.mfp-content .container,
.mfp-content .col {
    max-width: 100% !important;
}


.off-canvas .icon-box {
    justify-content: flex-start;
    text-align: left;
}


.off-canvas .icon-box {
    justify-content: flex-start;
    text-align: left;
}

.off-canvas-center .mfp-content {
    -webkit-overflow-scrolling: touch;
    max-width: 88vw;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 0px;
}


.mfp-content {
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
}

.mfp-content .container,
.mfp-content .row,
.mfp-content .col,
#mfp-main-menu,
#main-menu,
.off-canvas .sidebar-menu {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.off-canvas .sidebar-menu {
    padding: 0px 0;
}


.mfp-content,
.stuck,
button.mfp-close {
    top: 0px !important;
}

.mfp-content,
.mfp-wrap,
.mfp-container {
    overflow-x: hidden !important;
}


.social-icons.follow-icons.social-tab-menu {
    display: flex;
    gap: 14px;
}


.section-grad span.ux-menu-link__text {
    color: #43474e;
}

.section-grad span.ux-menu-link__text:hover {
    color: #0426e4;
}

.section-grad a.ux-menu-link__link.flex {
    margin-bottom: -9px !important;
}

.section-grad a.icon.primary.button.circle.tooltip {
    background: #43474e !important;
    border-color: #43474e !important;
}

.text-center {
    text-align: unset;
}


.header-nav-main a.nav-top-link {
    color: #172597;
    font-size: 16px;
}

ul.header-nav.header-nav-main {
    display: flex;
    gap: 25px;
    justify-content: center;
}


i.icon-menu {
    font-size: 28px !important;
    color: #172597;
}


#masthead,
.section-first {
    position: relative;
    z-index: 1;

}


.section-first::before {
    content: "";
    position: absolute;
    top: -100px;
    left: -300px;

    width: 860px;
    height: 860px;

    border-radius: 860px;
    opacity: 0.8;

    background: radial-gradient(50% 50% at 50% 50%,
            rgba(0, 213, 255, 0.3) 0%,
            rgba(0, 213, 255, 0.3) 100%);

    filter: blur(250px);

    z-index: -1;
    pointer-events: none;
}


.section-first::after {
    content: "";
    position: absolute;
    top: -100px;
    right: -300px;

    width: 860px;
    height: 860px;

    border-radius: 860px;
    opacity: 0.5;

    background: #FFAB00;

    filter: blur(250px);

    z-index: -1;
    pointer-events: none;
}

.section-first {
    position: relative;
    overflow: hidden;
}


#masthead {
    position: relative;
    z-index: 10;
}


.col-vid-full {
    position: relative;
}

.col-vid-full>.col-inner {
    position: relative;
    width: 40vw;
    max-width: none;
    margin-left: auto;
    margin-right: calc(50% - 50vw);
}

.col-vid-full .box,
.col-vid-full .box-image,
.col-vid-full img {
    width: 100%;
    display: block;
}

.col-vid-full .box-text {
    max-width: 600px;
    margin-left: auto;
    margin-right: 80px;
}


.col-grad>.col-inner {
    border-radius: 30px;
    background: linear-gradient(90deg, #00D5FF 0%, #5567FF 100%);
}

.header-nav-main a.nav-top-link:hover {
    color: #36D1FF !important;
}


/* Cho slider không cắt */
.slider-service-new,
.slider-service-new .slider,
.slider-service-new .row,
.slider-service-new .flickity-viewport {
    overflow: visible !important;
}

/* Card zoom */
.col-service-new {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.col-service-new:hover {
    transform: scale(1.05);
    z-index: 999;
}

/* Giữ bo góc */
.col-service-new>.col-inner {
    overflow: hidden;
}

.btn-grad-yellow {
    background: linear-gradient(180deg, #FFCE69 0%, #FFAB00 100%);
    box-shadow: 0 -4px 11px 0 rgba(255, 255, 255, 0.25) inset;
    color: rgb(23, 37, 151);
    font-weight: 200;
    animation: ctaPulse 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.btn-grad-yellow::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.6),
            transparent);
    animation: shine 3.5s infinite;
}

@keyframes shine {
    0% {
        left: -75%;
    }

    50% {
        left: 125%;
    }

    100% {
        left: 125%;
    }
}


.btn-grad-yellow:hover {
    background: linear-gradient(180deg, #578AFF 0%, #0D2DFF 100%);
}

.btn-vm {
    border: 1px solid var(--Gradient-02, #578AFF) !important;
    font-weight: 200;
    padding: 0px 26px 2px;
}

.btn-vm:hover {
    background: linear-gradient(180deg, #578AFF 0%, #0D2DFF 100%);
}

.btn-vm span {
    font-weight: 100;
    font-size: 17px;
}

.icon-box-ok {
    display: flex;
    align-items: center;
}




.pm-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    padding: 28px 0;
}

.pm-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: pm-marquee var(--pm-speed) linear infinite;
}

.pm-group {
    display: flex;
    align-items: center;
    gap: var(--pm-gap);
    padding-right: var(--pm-gap);
}

.pm-item {
    flex: 0 0 auto;
    width: 160px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;
    background: #fff;
    backdrop-filter: blur(6px);
}

.pm-item img {
    max-width: 72%;
    max-height: 60%;
    width: auto;
    height: auto;
    transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}

.pm-item {
    overflow: hidden;
    transition: transform 0.3s ease;
}

.pm-item:hover {
    transform: scale(1.2);
}

/* .pm-item:hover img {
    opacity: 1;
    transform: scale(1.4);
    filter: grayscale(0%);
} */

@keyframes pm-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.pm-wrap:hover .pm-track {
    animation-play-state: paused;
}



.section-grad-marquee {
    background: #E0E0E0;
}


.img-box-service .box-image {
    border-radius: 30px 30px 0px 0px;
}


.img-box-service .box-text.text-center {
    border-radius: 0 0 30px 30px;
    background: linear-gradient(180deg, rgba(48, 95, 255, 0.50) 0%, #0722CC 100%);
}


.section-services {
    position: relative;
    z-index: 2;
}

.section-above-service .section-content {
    position: relative;
    z-index: 5;
}

.col-csm-center {
    position: relative;
    z-index: 9999;
}
.banner-pre-footer .btn-grad-yellow span {
    color: #122691;
}

.banner-pre-footer .btn-grad-yellow:hover span {
    color: #fff;
}

.section-services,
.section-project {
    overflow: visible !important;
}

.section-services::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    width: 792px;
    height: 792px;

    transform: translate(-50%, -50%);
    border-radius: 792px;
    opacity: 0.8;

    background: radial-gradient(50% 50% at 50% 50%,
            rgba(0, 213, 255, 0.5) 0%,
            rgba(0, 213, 255, 0.5) 100%);

    filter: blur(250px);
    pointer-events: none;
    z-index: -1;
}


.col-center .text-center {
    text-align: center !important;
}

.section-project {
    position: relative;
    z-index: 1;
}

.section-project::before {
    content: "";
    position: absolute;
    top: 287px;
    left: -350px;
    width: 630px;
    height: 630px;
    border-radius: 930px;
    opacity: 0.8;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 213, 255, 0.5) 0%, rgba(0, 213, 255, 0.5) 100%);
    filter: blur(250px);
    pointer-events: none;
    z-index: -1;
}




.banner-pre-footer {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
}

.banner-pre-footer .banner-inner {
    border-radius: 30px;
    overflow: hidden;
}

.banner-pre-footer .banner-bg,
.banner-pre-footer .banner-bg img,
.banner-pre-footer .overlay {
    border-radius: 30px;
}


.banner-pre-footer .text-center {
    text-align: center !important;
}




.section-mar {
    position: relative;
    z-index: 1;
}

.section-mar::before {
    content: "";
    position: absolute;

    top: 62px;
    right: -200px;
    width: 630px;
    height: 630px;

    border-radius: 930px;
    opacity: 0.5;

    background: #FFAB00;
    filter: blur(250px);

    pointer-events: none;
    z-index: -1;
}



.col-grad-yellow {
    border-radius: 30px;
    border: 2px solid var(--Gradient-01, #305FFF);
    background: var(--Linear, linear-gradient(180deg, #FFCE69 0%, #FFAB00 100%));
}



.btn-down {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-down {

    background: linear-gradient(180deg, #FFCE69 0%, #FFAB00 100%);
    box-shadow: 0 -4px 11px 0 rgba(255, 255, 255, 0.25) inset;
    color: rgb(23, 37, 151);
    font-weight: 200;
    animation: ctaPulse 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.btn-down::after {
    content: "";
    width: 24px;
    height: 24px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    animation: none;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='32' viewBox='0 0 30 32' fill='none'%3E%3Cpath d='M19.4922 12.5021C20.5502 12.5085 21.3828 12.5375 22.0469 12.671C22.7138 12.8051 23.2349 13.0488 23.6553 13.5089C24.1417 14.0413 24.3723 14.7311 24.4844 15.6437C24.5933 16.531 24.5947 17.6712 24.5947 19.1417V20.3253C24.5947 21.7958 24.5933 22.936 24.4844 23.8234C24.3723 24.7359 24.1417 25.4257 23.6553 25.9581C23.1747 26.4841 22.5622 26.7281 21.749 26.8478C20.9487 26.9655 19.9171 26.9669 18.5703 26.9669H10.667C9.32019 26.9669 8.28857 26.9655 7.48828 26.8478C6.67509 26.7281 6.06256 26.4841 5.58203 25.9581C5.0956 25.4257 4.86405 24.736 4.75195 23.8234C4.64301 22.936 4.64256 21.7957 4.64258 20.3253V19.1417C4.64256 17.6713 4.643 16.531 4.75195 15.6437C4.86405 14.7311 5.0956 14.0413 5.58203 13.5089C6.00239 13.0488 6.52343 12.8051 7.19043 12.671C7.85449 12.5375 8.6871 12.5085 9.74512 12.5021Z' stroke='rgb(23,37,151)' stroke-linecap='round'/%3E%3Cpath d='M14.6182 5.03333V19.5001L11.5342 15.6788M14.6182 19.5001L17.7031 15.6788' stroke='rgb(23,37,151)' stroke-linecap='round'/%3E%3C/svg%3E");
}

.btn-down:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='32' viewBox='0 0 30 32' fill='none'%3E%3Cpath d='M19.4922 12.5021C20.5502 12.5085 21.3828 12.5375 22.0469 12.671C22.7138 12.8051 23.2349 13.0488 23.6553 13.5089C24.1417 14.0413 24.3723 14.7311 24.4844 15.6437C24.5933 16.531 24.5947 17.6712 24.5947 19.1417V20.3253C24.5947 21.7958 24.5933 22.936 24.4844 23.8234C24.3723 24.7359 24.1417 25.4257 23.6553 25.9581C23.1747 26.4841 22.5622 26.7281 21.749 26.8478C20.9487 26.9655 19.9171 26.9669 18.5703 26.9669H10.667C9.32019 26.9669 8.28857 26.9655 7.48828 26.8478C6.67509 26.7281 6.06256 26.4841 5.58203 25.9581C5.0956 25.4257 4.86405 24.736 4.75195 23.8234C4.64301 22.936 4.64256 21.7957 4.64258 20.3253V19.1417C4.64256 17.6713 4.643 16.531 4.75195 15.6437C4.86405 14.7311 5.0956 14.0413 5.58203 13.5089C6.00239 13.0488 6.52343 12.8051 7.19043 12.671C7.85449 12.5375 8.6871 12.5085 9.74512 12.5021Z' stroke='white' stroke-linecap='round'/%3E%3Cpath d='M14.6182 5.03333V19.5001L11.5342 15.6788M14.6182 19.5001L17.7031 15.6788' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E");
}

.btn-down:hover {
    background: linear-gradient(180deg, #578AFF 0%, #0D2DFF 100%);
}


.img-bong {
    position: relative;
    z-index: 1;
}

.img-bong::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 47px;
    transform: translateX(-50%);

    width: 600px;
    height: 600px;

    border-radius: 50%;
    opacity: 0.5;

    background: var(--Brand-color-03, #FFAB00);
    filter: blur(250px);

    z-index: -1;
    pointer-events: none;
}



.col-grad-xanh {
    border-radius: 30px;
    background: linear-gradient(270deg, rgba(48, 95, 255, 0.80) 0%, rgba(7, 34, 204, 0.80) 100%);
    padding: 30px 15px;
}


.col-why>.col-inner {
    border-radius: 30px;
    background: linear-gradient(0deg, #FFF 0%, rgba(190, 205, 255, 0.50) 100%);
    position: relative;
    z-index: -1;
}


.col-why h3 strong {
    background: var(--Gradient-02, linear-gradient(180deg, #578AFF 0%, #0D2DFF 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.col-why {
    transition: all 0.35s ease;
}

.col-why>.col-inner {
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}

.col-why:hover>.col-inner {
    background: linear-gradient(0deg, #3A63EC 0%, #BECDFF 100%);
}

.col-why:hover,
.col-why:hover h1,
.col-why:hover h2,
.col-why:hover h3,
.col-why:hover h4,
.col-why:hover h5,
.col-why:hover h6,
.col-why:hover p,
.col-why:hover span {
    color: #fff !important;
}

.col-why:hover h3 strong {
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
}


.col-why>.col-inner {
    min-height: 260px;
}


.team-marquee .team-card {
    flex: 0 0 calc(25vw - 18px);
    max-width: calc(25vw - 18px);

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px;

    border-radius: 20px;
    border: 1px solid var(--Gradient-02, #578AFF);
    background: #FFF;

    box-sizing: border-box;
}

.team-marquee .team-card img {
    flex: 0 0 30%;
    max-width: 30%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
}

.team-info {
    flex: 0 0 70%;
    max-width: 70%;
}

.team-info h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
}

.team-info span {
    font-size: 13px;
    color: #555;
}

.team-row {
    width: 100vw;
}

.team-track {
    display: flex;
    gap: 24px;
    width: fit-content;
    animation-duration: var(--speed);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.marquee-right .team-track {
    animation-name: marquee-right;
}

.marquee-left .team-track {
    animation-name: marquee-left;
}

@keyframes marquee-right {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes marquee-left {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}


.team-row.marquee-left {
    margin: 30px 0px 30px;
}



.cf7-custom {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cf7-custom label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.cf7-custom input[type="text"],
.cf7-custom input[type="email"],
.cf7-custom input[type="tel"],
.cf7-custom textarea {
    width: 100%;
    padding: 12px 14px;

    background: transparent;

    border-radius: 6px;
    border: 1px solid var(--Tint-1-02, #86B8FF);

    font-size: 14px;
    color: #fff;

    outline: none;
    box-sizing: border-box;
}

.cf7-custom input::placeholder,
.cf7-custom textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.cf7-custom textarea {
    min-height: 120px;
    resize: vertical;
}

.cf7-custom input[type="submit"] {
    width: fit-content;
    padding: 12px 28px;
    cursor: pointer;

    border-radius: 10px;

    background: var(--Gradient-02,
            linear-gradient(180deg, #578AFF 0%, #0D2DFF 100%));

    box-shadow: 0 -4px 11px 0 rgba(255, 255, 255, 0.25) inset;

    font-size: 15px;
    font-weight: 600;
    color: #FFF;

    transition: all 0.25s ease;
    transition: all 0.25s ease;
    display: flex;
    width: 100%;
    margin-bottom: -12px;
}

.cf7-custom input[type="submit"]:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.col-contact {
    border-radius: 40px;
    border: 1px solid var(--Gradient-02, #578AFF);
    background: linear-gradient(180deg, #1C274D 0%, #0F2491 100%);
    box-shadow: 0 4px 20px 0 rgba(28, 39, 76, 0.50);
    padding: 40px;
}

.process-section {
    padding: 30px 0;
    text-align: center;
}

.process-title {
    font-size: 2em;
    margin-bottom: 40px;
    color: #002244;
}

.process-container {
    display: flex;
    gap: 15px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 400px;
}

.process-card {
    flex-grow: 1;
    flex-basis: 0;
    height: 100%;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: #ffffff;
    border: 1px solid var(--Gradient-02, #578AFF);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.process-card.active,
.process-card:hover {
    flex-grow: 3;
    flex-basis: 30%;
    background: #007bff;
    border-color: #007bff;
    box-shadow: 0 8px 15px rgba(0, 123, 255, 0.3);
}


.card-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    text-align: center;
    transition: all 0.5s;
}

.card-icon {
    font-size: 2.5em;
    transition: all 0.5s;
}

.card-icon img {
    max-width: 50px;
    height: auto;
    filter: invert(32%) sepia(80%) saturate(2000%) hue-rotate(200deg) brightness(100%);
    transition: filter 0.5s;
}

.card-number {
    display: block;
    font-size: 45px;
    font-weight: bold;
    color: #007bff;
    transition: color 0.5s;
}

.process-card.active .card-icon img,
.process-card:hover .card-icon img {
    filter: brightness(0) invert(1);
    transform: scale(2);
    margin-bottom: 24px;
}

.process-card.active .card-number,
.process-card:hover .card-number {
    color: #ffffff;
    margin-bottom: 24px;
}


.card-description-wrapper {
    position: absolute;
    bottom: -56px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    max-width: 400px;
    opacity: 0;
    visibility: hidden;

    transition: opacity 0.3s ease-in 0.2s, visibility 0s linear 0.5s;

    color: #ffffff;
    text-align: center;
}

.process-card.active .card-description-wrapper,
.process-card:hover .card-description-wrapper {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in 0.3s;
}

.card-description {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 500;
}



.cf7-checkbox-group .wpcf7-list-item {
    display: block;
    margin-bottom: 8px;
}

.cf7-checkbox-group input[type="checkbox"] {
    margin-right: 8px;
    transform: translateY(1px);
}

.cf7-checkbox-group .wpcf7-list-item-label {
    font-size: 14px;
    color: #000;
    font-weight: 200;
}


.col-form-lien-he label {
    color: #000;
    font-weight: 700;
}

.col-form-lien-he input::placeholder,
.col-form-lien-he textarea::placeholder {
    color: #7c7c7c;
}


.col-form-lien-he input.wpcf7-form-control.wpcf7-submit.has-spinner {
    background: var(--Linear, linear-gradient(180deg, #FFCE69 0%, #FFAB00 100%));
    padding: 5px 28px;
    color: #172597;
}


.icon-box-media p {
    margin-bottom: -3px;
}

.col-sx-vid>.col-inner {
    border-radius: 4px;
    background: rgba(48, 95, 255, 0.10);
    padding: 16px 20px;
}


.slider-sx-img .img-box-service .box-image {
    border-radius: 30px 30px;
}



.acc-quy-trinh .accordion-title {
    border-top: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-left: 2px solid var(--brand-color-02, #0F2491);
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.acc-quy-trinh .accordion-title.active {
    border-left: 5px solid var(--brand-color-02, #0F2491);
}

.acc-quy-trinh .accordion-title span {
    flex: 1;
    padding-right: 10px;
    font-weight: 700;
    color: #000;
}

.acc-quy-trinh .accordion-title .toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.acc-quy-trinh .accordion-title .icon-angle-down {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.acc-quy-trinh .accordion-title.active .icon-angle-down {
    transform: rotate(180deg);
}

.acc-quy-trinh .accordion-inner {
    background: #fff;
    padding: 15px 20px;
    border-left: none !important;
    margin-bottom: 20px;
}


.acc-quy-trinh .toggle {
    border-radius: 999px;
    height: 1.5em;
    right: 0;
    margin-right: 5px;
    position: absolute;
    top: .3em;
    transform-origin: 50% 47%;
    width: 2.3em;
    left: auto;
}

.acc-quy-trinh .accordion-title.active {
    margin-bottom: 0px;
}


body.page-template-page-transparent-header-light #logo img {
    filter: brightness(0) invert(1);
}


/* body.page-template-page-transparent-header-light .header.has-sticky #logo img {
    filter: unset;
}
 */


.col.post-item .box-image {
    border-radius: 16px;
}

ul.ux-relay__pagination.page-numbers.nav-pagination.links {
    display: flex;
    justify-content: center;
}

.blog-vien .col.post-item .col-inner {
    border-radius: 20px;
    border: 1px solid var(--Gradient-02, #578AFF);
    background: var(--Neutral-Gray-50, #F7F8F8);
}

.blog-vien .box.box-normal.box-text-bottom {
    padding: 15px;
}


.blog-vien h5.post-title.is-large {
    color: #000;
    font-size: 18px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;
}


.banner-lien-he-bao-gia {
    border-radius: 40px;
    border: 3px solid var(--Gradient-02, #578AFF);
    overflow: hidden;
    position: relative;
}

.banner-lien-he-bao-gia .banner-bg img {
    object-fit: cover;
}

a.button.secondary.is-large.lowercase.btn-dai {
    width: 260px;
}

.btn-down span {
    line-height: 2.4;
}




.col-sx-vid {
    cursor: pointer;
}

.col-sx-vid .col-inner {
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.35s ease;
}

.col-sx-vid:hover .col-inner {
    border-color: #102591;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.col-sx-vid .icon-inner img {
    transition: all 0.35s ease;
}

.col-sx-vid:hover .icon-inner img {
    filter: brightness(0) saturate(100%) sepia(100%) hue-rotate(200deg);
    transform: scale(1.1);
}

.col-sx-vid h3 {
    transition: 0.3s ease;
}

.col-sx-vid:hover h3 {
    text-decoration: underline;
}

.slider-service-new .flickity-prev-next-button {
    background-color: transparent;
    border: none;
    bottom: -68%;
    color: #111;
    cursor: pointer;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    top: 40%;
    transition: transform .3s, opacity .3s, background .3s, box-shadow .3s;
    width: 36px;
}


.slider-service-new button.flickity-button.flickity-prev-next-button.previous {
    right: 5% !important;
    left: auto;
}


.slider-service-new .flickity-prev-next-button,
.slider-service-new button.flickity-button.flickity-prev-next-button.next {
    opacity: 1;
    transform: unset;
}


.btn-dang-ky-tu-van {
    background: #36D1FF;
}

.btn-dang-ky-tu-van:hover {
    background: linear-gradient(180deg, #578AFF 0%, #0D2DFF 100%);
}

a.button.primary.is-link.lowercase.btn-service-new {
    color: #36D1FF;
}

.col-service-new img.attachment-large.size-large {
    border-radius: 0px 0px 30px 30px;
}


.slider-service-new .slider-style-container .flickity-slider>:not(.is-selected),
.slider-service-new .slider-style-focus .flickity-slider>:not(.is-selected),
.slider-service-new .slider-style-shadow .flickity-slider>:not(.is-selected) {
    opacity: 1;
}



.cf7-service-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.cf7-service-columns label {
    flex-basis: 100%;
}

.cf7-column-1,
.cf7-column-2 {
    flex: 1;
    min-width: 50%;
}

.cf7-column-1 span.wpcf7-list-item,
.cf7-column-2 span.wpcf7-list-item {
    display: block;
    margin-left: 0 !important;
    margin-bottom: 8px;
}


.phone-vr-img-circle {
    background-color: #e60808;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 25px;
    left: 25px;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    -webkit-animation: unset;
    animation: unset;
}

@media only screen and (max-width: 48em) {

    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    .mfp-content {
        height: 100vh !important;
        padding: 0 !important;
    }

    #main-menu {
        max-height: 100vh !important;
    }

    .sidebar-menu {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }



    .col-vid-full>.col-inner {
        position: relative;
        width: 98vw;
        max-width: none;
        margin-left: auto;
        margin-right: calc(50% - 50vw);
    }

    a.button.secondary.is-large.lowercase.btn-dai {
        width: unset;
    }

    .btn-contact {
        padding: 5px 30px !important;
    }

    .team-card {
        flex: 0 0 calc(50vw - 18px);
        max-width: calc(50vw - 18px);
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        border-radius: 20px;
        border: 1px solid var(--Gradient-02, #578AFF);
        background: #FFF;
        box-sizing: border-box;
    }


    .col-contact {
        border-radius: 40px;
        border: 1px solid var(--Gradient-02, #578AFF);
        background: linear-gradient(180deg, #1C274D 0%, #0F2491 100%);
        box-shadow: 0 4px 20px 0 rgba(28, 39, 76, 0.50);
        padding: 20px 20px 30px 20px;
    }

    .card-icon img {
        max-width: 30px;
        height: auto;
        filter: invert(32%) sepia(80%) saturate(2000%) hue-rotate(200deg) brightness(100%);
        transition: filter 0.5s;
    }

    .process-container {
        display: flex;
        gap: 4px;
        width: 100%;
        max-width: 1212px;
        margin: 0 auto;
        height: 400px;
    }

    .process-card {
        flex-grow: 0;
        flex-basis: 0;
        height: 100%;
        border-radius: 12px;
        padding: 20px;
        cursor: pointer;
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        background: #ffffff;
        border: 1px solid var(--Gradient-02, #578AFF);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .card-description-wrapper {
        bottom: -20px;
        width: 150px;
        max-width: 150px;
    }

    .card-description {
        font-size: 12px;
        line-height: 1.4;
        font-weight: 500;
    }

    .customer-card {
        flex: 0 0 calc(48vw - 18px) !important;
        max-width: calc(48vw - 18px) !important;
    }

    .project-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 36px;
    }

    .project-tabs {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .project-tabs::-webkit-scrollbar {
        display: none;
    }

    .project-tabs .tab-button {
        flex-shrink: 0;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 14px;
        border: 1px solid #ccc;
        background: #f0f0f0;
        transition: all .25s ease;
    }

    .modal-close {
        position: fixed;
        top: 19px;
        right: -12px;
        width: 15px !important;
        height: 15px !important;
        font-size: 18px !important;
        border: none;
        background: #000;
        color: #fff;
        cursor: pointer;
        z-index: 1000000;
        padding: 0px 28px 5px 20px !important;
    }

    .slider-wrapper .flickity-prev-next-button {
        display: unset !important;
    }

    .slider-service-new .flickity-prev-next-button {
        background-color: #0F2491;
        bottom: unset;
        color: #0F2491;
        cursor: pointer;
        margin: 0;
        opacity: 0;
        padding: 0;
        position: absolute;
        top: 40%;
        transition: transform .3s, opacity .3s, background .3s, box-shadow .3s;
        width: 36px;
        border-radius: 99px;
    }

    .slider-service-new button.flickity-button.flickity-prev-next-button.previous {
        left: 2%;
    }

    .slider-service-new .flickity-prev-next-button,
    .slider-service-new button.flickity-button.flickity-prev-next-button.next,
    .slider-service-new button.flickity-button.flickity-prev-next-button.previous {
        opacity: 1;
        transform: unset;
    }

    .slider-service-new .flickity-prev-next-button .arrow,
    .slider-service-new .flickity-prev-next-button svg {
        fill: #fff !important;
        border-color: currentColor;
        transition: all .3s;
    }

    .free-consult-btn {
        left: auto !important;
        right: 10px;
        bottom: 18px !important;
    }
}