/* Example media query for mobile devices */
@media (max-width: 768px) {

    :root {
        --ant-padding-lg: 1vw !important;
    }

    .title_h1,
    .title-h1 {
        font-size: 5vw !important;
    }

    .title_h2,
    .title-h2 {
        font-size: 4vw !important;
    }

    .title_h3,
    .title-h3 {
        font-size: 3.5vw !important;
    }

    .title_h4,
    .title-h4 {
        font-size: 2.7vw !important;
    }

    .title_h5,
    .title-h5 {
        font-size: 2.5vw !important;
    }

    .title_h6,
    .title-h6 {
        font-size: 2.2vw !important;
    }

    .title_h7,
    .title-h7 {
        font-size: 2vw !important;
    }

    .label {
        font-size: 1.5vw !important;
    }

    .text {
        font-size: 2vw !important;
    }

    .d4 {
        font-size: 2.2vw !important;
    }

    .button-verify-container {
        width: 20vw !important;
        font-size: 2.5vw !important;
        margin-top: 0vw !important;
        max-height: 4.5vw !important;
        height: 4vw !important;
    }

    .header {
        height: 6vw !important;
        max-width: 100%;
        overflow-x: hidden;

        .header-left-branding {
            width: 50vw !important
        }

        .header-col-left {
            .header-e9-logo {
                width: 5vw !important;
                max-height: 5vw !important;
                height: 100% !important;
            }

            .header-sub-title {
                font-size: 2vw !important;
            }

            .header-system-name {
                font-size: 1.7vw !important;
            }
        }

        .header-right {
            .header-right-button {
                max-width: 20vw !important;
                width: 20vw !important;
                font-size: 1.9vw !important;
                max-height: 5vw !important;
                height: 5vw !important;
            }

            .lang-logo,
            .dropdown-icon {
                width: 3vw;
                height: 3vw;
            }
        }

        .col-nav {
            left: 45%;

            .header-right-nav {
                width: 10vw;
                max-width: 100%;
                overflow-x: hidden;

                .menu-item {
                    font-size: 1.7vw;
                    width: 0;
                }

                .menu-item-left {
                    margin-right: none;
                }

                .menu-item-right {
                    right: -15vw;
                }

                .menu-item-button {
                    background-color: var(--tertiary1);
                    border-radius: 4px;
                    margin-left: auto;
                    margin-right: 0;
                }

            }

            .ant-menu-submenu-title {
                margin-top: 1vw;

                svg {
                    color: var(--tertiary1-6);
                    font-size: 4vw;
                }
            }

            .ant-menu-overflow .ant-menu-item {
                white-space: nowrap;
                width: 10px
            }


            .ant-menu-item {
                box-sizing: border-box;
            }

            .ant-menu-horizontal {
                display: flex;
                flex-wrap: wrap;
            }

            .ant-menu-overflow {
                overflow: hidden;
            }

        }

    }

    .icon_custom,
    .icon-custom {
        font-size: 2vw;
    }

    .col_mobile,
    .col-mobile {
        margin-inline-start: 2% !important;
    }

    .col_mobile_simplify,
    .col-mobile-simplify {
        margin-inline-start: 6% !important;
    }

    /* Landing Page  */
    .intro-frame {
        .div-bg-img {
            .intro-text-intro {
                font-weight: 600;
                font-size: 3.5vw !important;
            }

            .circle1 {
                width: 7vw;
                height: 7vw;
                margin-top: 3.5vw;
                margin-left: 4vw;
            }

            .circle2 {
                width: 14vw;
                height: 14vw;
                margin-top: 5vw;
                margin-left: 16vw;
            }

            .circle3 {
                width: 9vw;
                height: 9vw;
                margin-top: 15vw;
                margin-left: 7vw;
            }

            .circle4 {
                width: 10vw;
                height: 10vw;
                margin-top: 18vw;
                margin-left: 27vw;
            }

            .circle5 {
                width: 10vw;
                height: 10vw;
                margin-top: 2vw;
                margin-right: 10vw;
            }

            .circle6 {
                width: 7vw;
                height: 7vw;
                margin-top: 12vw;
                margin-right: 3vw;
            }

            .circle7 {
                width: 14vw;
                height: 14vw;
                margin-top: 14vw;
                margin-right: 12vw;
            }

            .circle8 {
                width: 9vw;
                height: 9vw;
                margin-top: 12vw;
                margin-right: 27vw;
            }

        }
    }

    .about-us-frame {
        height: 60vw !important;
        margin: 0 !important;

        .about-us-col-left {
            margin-top: 3vw;
        }

        .about-img {
            margin-top: 20%;
            height: 40vw;
            width: 40vw;
        }

        .button-learn {
            .a {
                font-size: 2.5vw;
                width: 20vw;
                height: 4vw;
                margin-top: 1vw;
            }
        }

        .about-curve {
            max-width: 20vw;
        }
    }

    .feature-frame {
        .title {
            font-size: 4.5vw !important;
            font-weight: 500;
        }

        .feature-frame-row-div {
            max-height: 45vw;
        }

        .security-img {
            width: 10vw;
            height: 11vw;
        }

        .global-img {
            width: 16vw;
            height: 14vw;
            bottom: 13vw;
        }

        .connect-img {
            width: 14vw;
            height: 14vw;
            bottom: 13vw;
        }

        .linked-img {
            width: 14vw;
            height: 9vw;
        }

        .feature-card {
            height: 40vw !important;
        }

        .text-try-now {
            font-size: 1.8vw;
        }
    }

    .simplified-frame {
        height: 60vw;

        .simplified {
            width: 100%;

            .img {
                width: 75vw !important;
                height: 40vw;
                left: 13vw;
                margin-top: 20vw;
                /* margin-top: vw; */
            }

            .rectangle-submit-left {
                width: 27vw;
                height: 15vw;
                left: 5vw;
                margin-top: 14vw;

                .div-submit-application {
                    width: 3.5vw;
                    height: 3.5vw;
                }
            }

            .rectangle-submit-right {
                width: 13vw;
                height: 4vw;
                right: 5vw;
                margin-top: 30vw;
            }

            .simplify-title,
            .simplify-text {
                margin-left: 5vw
            }

            .growth-row {
                bottom: -2vw !important;

                .growth-col-number,
                .growth-col-text p {
                    font-size: 2vw !important;
                }
            }

        }
    }

    .benefit-frame {
        height: 80vw;
    }

    .protection-frame {
        height: 55vw;
        margin: 1vw;

        .img {
            width: 32vw;
            height: 40vw;
        }
    }


    .user-friendly-frame {
        height: 45vw;

        .user-friendly-title {
            width: 60%;
            text-align: center;
        }

        .user-friendly-text {
            margin-top: -5vw;
        }

        .circle-left1 {
            width: 12vw;
            height: 12vw;
            margin-top: 5vw;
            margin-left: 5vw;
        }

        .circle-left2 {
            width: 12.5vw;
            height: 12.5vw;
            margin-top: 30vw;
            margin-left: 10vw;
        }

        .circle-center {
            width: 11.5vw;
            height: 11.5vw;
            margin-top: -5vw;
            margin-left: 45%;
        }

        .circle-right1 {
            width: 14vw;
            height: 14vw;
            right: 0;
            margin-top: 8vw;
            margin-right: 5vw;
        }

        .circle-right2 {
            width: 11.5vw;
            height: 11.5vw;
            right: 0;
            margin-top: 32vw;
            margin-right: 12vw;
        }
    }

    .conclusion-frame {
        height: 40w;
        margin-top: 1vw;

        .conclusion-img {
            padding: 0vw 3vw 0vw 3vw;
        }

        .div-icon {
            width: 4vw;
            height: 4vw;
        }
    }

    /* Main  Page  */
    .frame {
        padding-left: 2vw;
        padding-right: 2vw;
    }

    .banner-frame {

        height: 30vw;

        .banner-bg-color {
            left: 50%;
            width: 80%;
            height: 99.5%;
        }

        .parallelogram-empty {
            height: 3vw;
        }

        .parallelogram {
            font-size: 1.7vw;
            height: 3vw;
        }

        .parallelogram-down {
            font-size: 1.7vw;
            height: 2.9vw;
        }

        .img-job {
            height: 24vw;
        }
    }

    .online-form-frame {
        height: 30vw;

        .online-form-title {
            margin-top: 2vw;
        }

        .online-form-box {
            height: 15vw;
        }
    }

    .topic-frame {
        margin: 0 4% auto;
        height: 50vw;

        .topic-img {
            margin-top: 50%
        }

        .topic-col-img {
            height: 15vw;
        }
    }

    .footer-main {
        margin: 0 4% auto;

        .menu-item-footer {
            font-size: 1.8vw;
            margin-right: 0.5vw;
        }

        .menu-right-button {
            font-size: 0.9vw;
            opacity: 1;
            border: none;
            height: 2vw;
            margin-top: -0.3vw;
            display: inline;
        }

        .social-media {
            margin-left: auto;

            .social-icon {
                font-size: 1.4vw;
                background-color: white;
            }

            .fb-icon {
                color: #2E6FE8FF;
                margin-right: 1.4vw;
            }

            .tiktok-icon {
                color: var(--black);
                margin-right: 1.5vw;
            }

            .youtube-icon {
                color: #E82E2EFF
            }
        }

        .footer-infromation {
            margin-top: 2vw;
            font-size: 1.5vw;

            .footer-item::after {
                content: "\A";
                /* Ký tự \A tương ứng với dấu xuống dòng */
                white-space: pre;
                /* Đảm bảo xuống dòng được áp dụng */
            }

            .footer-item {
                display: block;
                /* Đảm bảo các mục được hiển thị dưới dạng khối (block) để xuống dòng */
            }
        }
    }

    .footer-left-button {
        font-size: 1.6vw;

        .dropdown-icon {
            width: 1vw !important;
            height: 1vw !important;
        }
    }

}

/* Example media query for mobile devices */
@media all and (max-width: 1599px) and (min-width: 769px) {

    .title_h1,
    .title-h1 {
        font-size: 3.2vw !important;
        line-height: 1.15 !important;
    }

    .title_h2,
    .title-h2 {
        font-size: 3vw !important;
        line-height: 1.25 !important;
    }

    .title_h3,
    .title-h3 {
        font-size: 2.575vw !important;
        line-height: 1.375 !important;
    }

    .title_h4,
    .title-h4 {
        font-size: 2vw !important;
        line-height: 1.375 !important;
    }

    .title_h5,
    .title-h5 {
        font-size: 1.65vw !important;
        line-height: 1.375 !important;
    }

    .title_h6,
    .title-h6 {
        font-size: 1.4vw !important;
        line-height: 1.625 !important;
    }

    .title_h7,
    .title-h7 {
        font-size: 1.35vw !important;
        line-height: 1.625 !important;
    }

    .label {
        font-size: 1.4vw !important;
        line-height: 1 !important;
    }

    .text {
        font-size: 1.2vw !important;
        line-height: 1 !important;
    }

    .d4 {
        font-size: 1.25vw !important;
        line-height: 3vw !important;
    }


    /* Header style */
    .header {
        height: 4vw;
        margin-top: 0.5vw;

        .header-col-left {
            .header-left-branding {
                width: 25vw;
            }

            .header-e9-logo {
                width: 3.5vw;
                max-height: 3.5vw;
            }

            .header-sub-title {
                font-size: 1.1vw;
            }

            .header-system-name {
                font-size: 1.2vw;
            }
        }


        .header-right {
            margin-top: 0;

            .header-right-button {
                max-width: 15vw;
                width: 15vw;
                max-height: 4vw;
                height: 3.5vw;
                font-size: 1.4vw;
            }

            .lang-logo {
                width: 2vw;
                height: 2vw;
            }
        }

    }

    .col-nav {
        .header-right-nav {
            /* margin-bottom: -0.2vw; */

            .menu-item {
                font-size: 1.1vw;
            }

            .menu-item-right {
                right: -7vw;
            }
        }
    }

    /* Landing Page */
    .intro-frame {
        .intro-text-intro {
            font-size: 3.5vw;
        }

        .button-verify-container {
            font-size: 1.3vw;
        }
    }

    .about_us_frame {
        height: 35vw;
    }

    .feature-frame {
        .feature-frame-row-div {
            max-height: 30vw;
        }

        .feature-card {
            height: 28vw;
        }

        .global-img {
            bottom: 8.5vw !important;
        }

        .connect-img {
            bottom: 8.5vw !important;
        }

        .linked-img {
            width: 15vw !important;
            height: 10vw !important
        }

    }

    .simplified-frame {
        height: 60vw;

        .simplified {
            width: 100%;

            .img {
                width: 75vw !important;
                height: 40vw;
                left: 13vw;
                margin-top: 20vw;
                /* margin-top: vw; */
            }

            .rectangle-submit-left {
                width: 27vw;
                height: 12vw;
                left: 5vw;
                margin-top: 14vw;

                .div-submit-application {
                    width: 3.5vw;
                    height: 3.5vw;
                }
            }

            .rectangle-submit-right {
                width: 13vw;
                height: 4vw;
                right: 5vw;
                margin-top: 30vw;
            }

            .simplify-title,
            .simplify-text {
                margin-left: 5vw
            }

            .growth-row {
                bottom: -2vw !important;

                .growth-col-number,
                .growth-col-text p {
                    font-size: 2vw !important;
                }
            }

        }
    }

    .protection-frame {
        height: 35vw;
    }

    .user-friendly-frame {
        height: 45vw;

        .user-friendly-text {
            width: 60%;
            margin-top: -15vw;
        }

        .circle-left1 {
            width: 9vw;
            height: 9vw;
            margin-top: 10vw;
            margin-left: 3vw;
        }

        .circle-left2 {
            width: 8.5vw;
            height: 8.5vw;
            margin-top: 35vw;
            margin-left: 10vw;
        }

        .circle-center {
            width: 8.5vw;
            height: 8.5vw;
            margin-top: 0vw;
            margin-left: 47%;
        }

        .circle-right1 {
            width: 11vw;
            height: 11vw;
            right: -3vw;
            margin-top: 10vw;
            margin-right: 5vw;
        }

        .circle-right2 {
            width: 8.5vw;
            height: 8.5vw;
            right: 0;
            margin-top: 35vw;
            margin-right: 12vw;
        }
    }

    /* Main  Page  */
    .banner-frame {

        .banner-bg-color {
            width: 70%;
        }

        .parallelogram {
            font-size: 0.9vw;
        }

        .parallelogram-down {
            font-size: 0.9vw;
        }
    }

    .online-form-frame {
        height: 15vw;

        .online-form-box {
            height: 7.5vw;
            margin-left: 2vw
        }
    }

    .topic-frame {
        margin: 0 4% auto;
        height: 30vw;

        .topic-img {
            width: 100%;
            height: 100%;
            right: 0;
            margin-top: 6vw;
            background-position: center;
            background-size: cover;
        }

        .topic-col-img {
            height: 15vw;
        }
    }

    .footer-main {
        border-radius: 4px;
        margin: 0 4% auto;

        .menu-item-footer {
            font-size: 1vw;
            margin-right: 0.5vw;
        }

        .menu-right-button {
            font-size: 0.9vw;
            opacity: 1;
            border: none;
            height: 2vw;
            margin-top: -0.3vw;
            display: inline;
        }

        .footer-infromation {
            font-size: 0.9vw;
        }

    }
}