/* responsive */
@media (max-width: 1800px) {
    .recruitment-box__form .group-upload {
        column-gap: 4px;
    }
}

@media (min-width: 1800px) {
    .navigation>ul>li {
        padding-right: 30px !important;
    }
}

@media (min-width: 1650px) {

    .navigation>ul>li>a,
    .menu-booking a {
        font-size: 14px;
    }

    .container {
        max-width: calc(100% - 249px);
    }

    .menu-main-booking a {
        min-width: 180px;
        height: 35px;
    }

    .navigation>ul>li {
        padding-right: 18px;
        padding-left: 0;
    }

    .menu-main-booking a {
        padding: 12px;
    }

    .navigation>ul>li>a svg {
        width: 24px;
    }

    .navigation {
        flex: initial !important;
    }

    .project-block__row {
        gap: 60px;
    }

    .project-block {
        margin-top: -90px;
    }

    .statistical-block__description {
        min-width: 350px;
        min-height: 30px;
    }

    .group-statistical {
        min-height: 131px;
    }

    .slider-active .owl-stage-outer .item {
        min-height: 1069px;
        padding-bottom: 0;
    }

    .blog-thumb__secondary {
        max-width: 680px;
        width: 100%;
    }

    .blog-active__thumb {
        max-width: 1175px;
        width: 100%;
    }

    .slider-active .owl-nav {
        bottom: 50px;
    }

    .blog-active__thumb__content {
        gap: 116px
    }

    .blog-active__thumb__content h3 {
        max-width: 700px;
    }

    .row.gx-26px-xl {
        --bs-gutter-x: 26px;
    }

    .row.gx-25px-xl {
        --bs-gutter-x: 25px;
    }

    .row.gx-18px-xl {
        --bs-gutter-x: 18px;
    }

    .slider-wrap .slide.front,
    .slider-wrap .slide {
        width: 948px;
    }

    .slider-wrap .slide.front {
        top: 141px;
    }

    .form-wrap .form-contact input,
    .form-wrap .form-contact input:focus,
    .form-wrap .select2-container--default .select2-selection--single,
    .recruitment-box__form form input,
    .recruitment-box__form form input:focus {
        height: 70px;
    }

    .form-wrap .select2-container--default .select2-selection--single {
        padding: 4px;
    }

    .contact-wrap__info h2 {
        line-height: 45px;
    }

    .characteristic-wrap .view-more {
        margin-top: 118px;
    }

    .blog-recruitment-item__action {
        margin-top: 40px;
    }

    .row.gx-92px {
        --bs-gutter-x: 92px;
    }

    .row.gx-79px {
        --bs-gutter-x: 79px;
    }

    .over-view-company__img {
        gap: 39px !important;
    }

}

@media (max-width: 1650px) {
    .tab-project-info__desc {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 8;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        position: relative;
    }

    .tab-project-info__desc.has-ellipsis::after {
        content: "…";
        position: absolute;
        right: 0;
        bottom: 0;
        padding-left: 20px;
        background: linear-gradient(to right, transparent 0%, #000 100%);
        color: #fff;
        width: 100px;
    }

    body.single .archive-form .box-form {
        padding: 16px 10px 30px !important;
    }

    .archive-form .box-form .form-group .row {
        --bs-gutter-x: 10px;
    }

    body.single:not(.single-services) .archive-form .form-contact input,
    body.single .archive-form .select2-container--default .select2-selection--single,
    body.single .archive-form .form-contact button {
        height: 40px;
    }

    body.single .archive-form .form-contact label {
        font-size: 13px;
    }

    body.single:not(.single-services) .archive-form form {
        gap: 15px !important;
    }

    body.single:not(.single-services) .archive-form .form-contact .select2-container--default .select2-selection--single .select2-selection__rendered,
    body.single:not(.single-services) .archive-form .form-contact button {
        font-size: 12px;
    }

    body.single .form-contact .select2-container--default .select2-selection--single {
        background-size: 10px 8px;
        background-position: right 12px bottom 13px;
    }

    body.single .archive-form .form-contact input::placeholder {
        font-size: 12px;
    }

    body.single:not(.single-services) .archive-form .form-contact input::-webkit-input-placeholder {
        /* Chrome, Safari, Opera */
        font-size: 12px;
    }

    body.single:not(.single-services) .archive-form .form-contact input::-ms-input-placeholder {
        /* IE 10-11 */
        font-size: 12px;
    }

    .recruitment-category h3,
    .recruitment-box__title h3 {
        font-size: clamp(17px, calc(2.857vw - 19.14px), 23px);
    }

    .recruitment-category__accordion h5>div a {
        font-size: clamp(16px, calc(2.5vw - 12.5px), 18px);
    }

    .recruitment-box__form .group-upload {
        column-gap: 5px;
        height: 50px;
    }

    .recruitment-box__form form button {
        min-width: 100px;
        height: 50px;
        font-size: 14px;
    }

    .recruitment-box__form .group-upload button {
        min-width: 95px;
        font-size: 14px;
        height: 35px;
    }

    .recruitment-box__form .group-upload span {
        font-size: 12px;
    }

    .page-project-info h1 {
        margin-bottom: 15px;
    }

    .page-project-info .desc-project>div ul {
        gap: 15px;
    }

    .list-function__item {
        padding: 15px 0;
        font-size: 20px;
    }

    .box-design-idea {
        padding: 30px;
    }

    .grid-item .project-item__info {
        transform: translateY(calc(100% - 50px));
    }

    .box-characteristic__caption h4 {
        top: -27px
    }

    .wrap-about__content a {
        padding: 10px;
    }

    .procedure-box__desc p {
        margin-top: 41px;
    }

    .over-view-company__img {
        gap: 20px !important;
    }
}

@media (min-width: 1441px) and (max-width: 1650px) {
    .frm-rgister input::placeholder {
        font-size: 14px;
    }

    .frm-rgister input::-webkit-input-placeholder {
        /* Chrome, Safari, Opera */
        font-size: 14px;
    }

    .frm-rgister input:-ms-input-placeholder {
        /* IE 10-11 */
        font-size: 14px;
    }

    .frm-rgister input::-ms-input-placeholder {
        /* Edge Legacy */
        font-size: 14px;
    }

    .frm-rgister input::placeholder {
        font-size: 14px;
    }

    .slider-wrap .slide.front,
    .slider-wrap .slide {
        width: 700px;
    }

    .slider-wrap .slide.front {
        top: 90px
    }

    .blog-active__group h2 {
        left: 16px;
    }

    .characteristic-wrap__left {
        background-position: right 93px;
    }
}

@media (max-width: 1480px) {
    body {
        font-size: 14px;
    }

    .slider-wrap .slide::after {
        background: linear-gradient(to bottom, rgba(48, 26, 26, 0) 51%, rgba(0, 0, 0, 0.6) 90%, rgba(0, 0, 0, 0.85) 100%) !important;
    }

    .slider-wrap .slide.front {
        transform: translate(-8.5%, 8%) scale(1);
    }

    .navigation>ul {
        justify-content: space-between;
    }

    .navigation ul li a,
    .menu-main-booking a {
        font-size: 14px;
    }

    .recruitment-category h3,
    .recruitment-box__title h3 {
        padding: 15px;
        font-size: 18px;
    }

    .recruitment-box__title .desc-form {
        padding: 0 20px;
    }

    .recruitment-category__accordion>.accordion>.accordion-item>h5 {
        padding: 0 20px !important;
    }

    .recruitment-category__accordion h5>div a {
        font-size: 16px;
    }

    .list-blog-recruitment>button {
        padding: 8px 16px;
    }

    .recruitment-intro,
    .list-blog-page {
        padding-top: 112px;
    }

    .slider-partner .item a {
        height: 100px;
    }

    .procedure-tab-content .procedure-box {
        gap: 20px
    }

    .blog-detail__promotion,
    .blog-detail__form {
        top: 40px;
    }

    body.single .archive-form h2 {
        margin-bottom: 0;
    }

    .archive-form .box-form {
        margin-top: 10px;
    }

    .menu-booking a {
        padding: 6px;
        font-size: 14px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-contact .select2-results__option {
        padding: 8px;
    }

    .discover-function__content h2 {
        margin-bottom: 5px;
    }

    .list-function__item {
        padding: 7px 0;
        font-size: 18px;
    }

    .page-project-info .desc-project>div,
    .page-project-info .desc-project>div ul {
        gap: 5px;
    }

    .box-characteristic {
        gap: 5px
    }

    .culture-people .box-culture {
        gap: 90px
    }

    .block-team .row {
        row-gap: 70px;
    }

    .curved-text {
        top: -48px
    }

    .vision-block__caption .box-vision {
        gap: 26px
    }

    .vision-block {
        padding-bottom: 30px;
        padding-top: 65px;
    }

    .box-ceo-share .content {
        margin-top: 25px;
    }

    body:not(.home) .meta-post {
        margin-bottom: 0;
    }

    .box-blog h4 a {
        font-size: 15px;
    }

    .slider-project-cat .project-item__info h4 a,
    .box-project-item__caption h4 a,
    .project-item__info h4 a {
        font-size: 16px;
    }

    body.page .project-item__info .preview ul {
        font-size: 14px;
        line-height: 20px
    }

    .archive-form .box-form .form-contact {
        gap: 3px
    }

    body.single:not(.single-services) .archive-form form {
        gap: 3px !important;
    }

    .box-characteristic__count::before {
        bottom: 0;
    }

    .project-cat-inner .box-project-item__caption {
        width: 90%;
    }

    .blog-recruitment-item__caption h4 a {
        font-size: 15px;
    }

    .blog-recruitment-item__caption>span a,
    .blog-recruitment-item__caption .info-recruitment p,
    .blog-recruitment-item__action>a,
    .blog-recruitment-item__action>span,
    .recruitment-box__title .desc-form *,
    .recruitment-box__form .note-form *,
    .box-characteristic__caption p,
    .procedure-box__desc p,
    .box-blog .card-text,
    .meta-post span,
    .procedure-tab-content .procedure-box p {
        font-size: 14px !important;
    }

    .blog-recruitment-item__action>a,
    .blog-recruitment-item__action>span {
        padding-block: 5px;
    }

    .recruitment-category__accordion .accordion-body>.accordion>.accordion-item {
        padding-left: 25px !important;
    }

    .blog-recruitment-item,
    .list-blog-recruitment>button,
    .show-result-recruitment {
        max-width: 820px;
    }

    .frm-search form {
        padding: 20px 18px;
    }

    .form-wrap .form-contact input,
    .form-wrap .form-contact input:focus,
    .form-wrap .select2-container--default .select2-selection--single,
    .form-wrap .form-contact textarea,
    .recruitment-box__form form input,
    .recruitment-box__form form textarea,
    .recruitment-box__form form input:focus,
    .recruitment-box__form form textarea:focus {
        font-size: 14px;
    }

    .recruitment-box__form form {
        gap: 15px
    }

    .recruitment-category {
        margin-bottom: 50px;
    }

    .recruitment-box__form {
        padding: 30px 10px 33px 10px;
    }

    .promotion-services {
        padding: 50px 0;
    }

    .countdown-promotion-wrap {
        gap: 20px
    }

    .countdown-promotion-wrap .count-box {
        gap: 0
    }

    .promotion-services__box {
        gap: 41px
    }

    .package-services__box h4 span:last-child svg {
        width: 25px;
    }

    .package-services__box h4 {
        font-size: 18px;
    }

    .process-content h5 {
        font-size: 18px;
    }

    .procedure-box__desc p {
        margin-top: 30px;
        line-height: 23px;
    }

    .package-services__box .description,
    .package-services__box div:last-child p,
    .package-services__box div:last-child ul li {
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    .meta-post svg {
        width: 13px;
    }

    .list-blog-page .row.gx-10px {
        --bs-gutter-y: 55px;
    }

    body.single:not(.single-services) .archive-form h2 {
        margin-bottom: 27px;
        line-height: 28px;
    }

    .slider-wrap .nav {
        bottom: 90px
    }

    .box-design-idea {
        max-width: 450px;
    }

    body.page-template-page-services .procedure-box__count {
        width: clamp(25px, 3vw, 40px);
        font-size: clamp(18px, 3.5vw, 35px);
    }

    .recruitment-detail__info .info-recruitment p {
        font-size: 14px;
    }

    .slider-team-feature__caption {
        gap: 40px;
    }

    .characteristic-wrap {
        padding-top: 15px;
    }

    .box-form-cta form {
        gap: 11px;
    }

    .project-related {
        padding-bottom: 25px;
    }

    .procedure-wrap {
        padding-top: 15px;
        padding-bottom: 50px;
    }

    .prodcedure-view {
        margin-top: 50px;
    }

    .archive-form .select2-container--default .select2-selection--single {
        padding: 12px 16px 12px 4px;
    }

    .title-page h1 {
        line-height: 25px;
        padding: 12px 10px;
    }

    .culture-people .row {
        --bs-gutter-x: 80px;
    }

    .over-view-company__btn {
        transform: translateY(48px);
    }

    .over-view-company {
        padding-bottom: 140px;
    }

    .tab-about ul.nav-tabs li>button {
        font-size: clamp(14px, calc(0.183vw + 13.314px), 16px);
    }

    .characteristic-wrap__left {
        background-position: right 32px;
    }
    .blog-active__group__title{
        top: 4px
    }
    .experience-company .row{
        row-gap: 60px;
    }
    .box-experience__content h4{
        margin-bottom: 0;
    }
}

@media (max-width: 1440px) {
    .slider-wrap .nav {
        bottom: 134px;
    }


    .menu-footer ul {
        gap: 40px;
    }
}

@media (min-width: 1400px) and (max-width: 1439px) {
    .slider-wrap .slide {
        width: 700px;
    }

    body.single .archive-form .form-contact label {
        font-size: 12px;
    }
}

@media (max-width: 1400px) {
    .project-cat-inner .box-characteristic__count {
        font-size: 60px;
    }

    .box-characteristic__content h5 {
        font-size: 18px;
    }

    .box-characteristic__count::before {
        bottom: 0;
    }

    .slider-team-feature__caption .description {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }

    .over-view-company__btn {
        transform: translateY(0);
    }

    .over-view-company {
        padding-bottom: 90px;
    }
}

@media (min-width: 1400px) {
    .blog-detail>div>.row {
        display: grid !important;
        grid-template-columns:
            20.833333% 58.333333% 20.833333%;
    }
}


@media (max-width: 1366px) {
    .slider-wrap .slide::after {
        background-color: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.6) 90%, rgba(0, 0, 0, 0.85) 100%);
    }

    .contact-info-company h4 {
        margin-bottom: 20px;
    }

    .contact-info-company__box {
        row-gap: 10px;
    }

    .slider-partner .item a {
        height: 90px;
    }

    body:not(.home) .meta-post {
        margin-bottom: 0px;
    }

    .box-design-idea {
        max-width: 500px;
    }

    .curved-text {
        top: -42px;
    }

    .vision-block .line-vertical-about {
        top: -26px;
        right: -19px;
        left: auto;
    }

    .vision-block .line-horizontal-about {
        top: -30px;
        right: -35px;
        left: auto;
    }

    .vision-block__caption .box-video {
        margin-bottom: 52px;
        margin-top: 39px;
    }
}

@media (min-width: 1200px) {
    .fengshui-archive .container {
        max-width: 1200px;
    }

    .discover-project__category ul.nav:has(li:nth-child(2):last-child) li,
    .discover-project__category ul.nav:has(li:only-child) li {
        flex: 0 0 581px;
    }

    .discover-project__category ul.nav:has(li:nth-child(2):last-child) button,
    .discover-project__category ul.nav:has(li:only-child) button,
    .discover-project__category ul.nav:has(li:nth-child(2):last-child) li,
    .discover-project__category ul.nav:has(li:only-child) li {
        aspect-ratio: auto;
        min-height: 50px;
    }

    .discover-project__category ul.nav:has(li:nth-child(3):last-child) li {
        flex: 0 0 calc((100% - 40px) / 3);
    }

    .discover-project__category ul.nav:has(li:nth-child(3):last-child) button,
    .discover-project__category ul.nav:has(li:nth-child(3):last-child) li {
        height: auto;
        min-height: 45px;
    }
}

@media (max-width: 1200px) {
    body.single .archive-form form {
        gap: 12px !important;
    }

    body.single .archive-form .form-contact label {
        font-size: 11px;
    }

    .navigation ul li a,
    .menu-main-booking a {
        font-size: 11px;
    }

    .menu-footer ul {
        gap: 15px
    }

    .menu-footer ul li a {
        font-size: 13px;
    }

    .recruitment-intro__content .desc-recruitment {
        margin-bottom: 30px;
    }

    .frm-search form {
        padding: 10px 15px;
    }

    .list-benefit__caption h4 {
        margin-bottom: 0;
    }

    .main-benefit .list-benefit {
        gap: 10px
    }

    .recruitment-category h3,
    .recruitment-box__title h3 {
        padding: 15px;
    }

    .recruitment-category__accordion>.accordion>.accordion-item>h5 {
        padding: 5px 20px !important;
    }

    .blog-recruitment-item__action>a {
        font-size: 14px;
    }

    .recruitment-box__title .desc-form {
        padding: 0 15px;
    }

    .recruitment-box__title .desc-form *,
    .recruitment-box__form .note-form * {
        font-size: 13px;
    }

    body:not(.home) .meta-post {
        margin-bottom: 0px;
    }

    body.single .archive-form .form-contact .select2-container--default .select2-selection--single .select2-selection__rendered,
    body.single .archive-form .form-contact button {
        font-size: 10px;
    }

    body.single .archive-form .form-contact input::placeholder {
        font-size: 10px;
    }

    body.single .archive-form .form-contact input::-webkit-input-placeholder {
        /* Chrome, Safari, Opera */
        font-size: 10px;
    }

    body.single .archive-form .form-contact input::-ms-input-placeholder {
        /* IE 10-11 */
        font-size: 10px;
    }

    .sub-category .view-more a,
    .box-content-detail .view-more a,
    .project-related .view-more a {
        padding: 7px 16px;
    }

    .page-project-info .desc-project {
        padding: 7px;
    }

    .page-project-info .desc-project>p {
        bottom: 7px;
        right: 7px
    }

    .page-project-info .desc-project>div,
    .page-project-info .desc-project>div ul,
    .page-project-info .desc-project>p {
        font-size: 13px;
        line-height: 20px
    }

    .page-project-info h1 {
        margin-bottom: 0;
    }

    .contact-wrap__info {
        padding-left: 0;
    }

    .contact-wrap {
        padding: 30px 0;
    }

    body.page .project-item__info .preview {
        line-height: 22px;
    }

    .box-project-item__caption .preview,
    .box-project-item__caption .preview ul {
        padding-left: 8px;
    }

    .box-characteristic__content h5 {
        font-size: 15px;
    }

    .project-cat-inner .box-characteristic__count {
        font-size: 40px;
    }

    .box-characteristic__count::before {
        bottom: -5px;
    }

    .text-slider__run span {
        font-size: 100px;
    }

    .box-project-grid {
        grid-auto-rows: 320px;
    }

    .project-item__info {
        padding: 10px
    }

    .project-item__info .preview {
        font-size: 13px;
    }

    .project-item__info>a {
        font-size: 12px;
        padding: 10px;
    }

    .grid-item .project-item__info {
        transform: translateY(calc(100% - 42px));
    }

    .blog-active__group h2 {
        left: 6px;
    }

    body.single-project .archive-form .form-contact label.error {
        display: none !important;
    }

    .project-related .project-item__info {
        transform: translateY(calc(100% - 50px));
    }

    .project-item__info .preview * {
        margin-bottom: 0;
    }

    .box-characteristic__caption h4 {
        top: -24px;
        font-size: 13px;
    }

    .box-characteristic__caption p {
        font-size: 11px;
    }

    .curved-text {
        top: -40px;
    }

    .vision-block__caption .box-vision h5 {
        font-size: 22px;
    }

    .curved-text {
        top: -38px;
    }

    .countdown-promotion-wrap {
        gap: 8px;
    }

    .countdown-promotion-wrap .count-box {
        width: 90px;
        font-size: 16px;
    }

    .countdown-promotion-wrap .count-box span:first-child {
        font-size: 20px;
    }

    .promotion-services__box {
        gap: 15px
    }

    .procedure-tab-content .procedure-box p,
    .procedure-box__desc p {
        font-size: 12px !important;
    }

    .procedure-box__desc p {
        -webkit-line-clamp: 3 !important;
        line-height: 18px;
    }

    .block-team__list .owl-prev,
    .block-team__list .owl-next {
        top: 35%
    }

    .slider-team-feature__caption {
        gap: 20px
    }

    .slider-team-feature .button-nav {
        max-width: 100px;
        left: -1px;
    }

    .slider-team-feature .button-nav div {
        width: 35px;
        height: 35px;
    }

    .slider-team-feature .button-nav div:after {
        font-size: 14px;
    }

    .characteristic-wrap__left {
        background-position: right 110px;
        background-size: contain;
    }

    .slider-team-feature .button-nav {
        bottom: 70px
    }
}

@media (max-width: 1100px) {
    body.single .archive-form .form-contact label {
        font-size: 10px;
    }

    .text-slider {
        padding: 30px 0;
    }

    .blog-active__group h2 {
        left: 14px;
    }
}

@media (max-width: 1024px) {
    .slider-partner .item a {
        height: 90px;
    }

    .menu-main-footer ul {
        gap: 20px
    }

    .menu-main-footer ul li a {
        font-size: 14px;
    }

    .footer-info h5,
    .footer-info .footer-info__company {
        font-size: 13px;
    }

    .procedure-tab-content .procedure-box p,
    .procedure-box__desc p {
        font-size: 12px;
        line-height: 22px;
    }

    .procedure-tab-content .procedure-box {
        /* padding: 30px 20px; */
        gap: 17px
    }

    .frm-rgister .form-group .icon svg,
    .frm-rgister button svg {
        width: 15px;
    }

    .testimonial-info {
        margin-top: 60px;
    }

    .inner-services-activies .inner-track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 20px) / 3.7);
        gap: 10px;

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

        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;

        /* ẨN SCROLLBAR */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .inner-services-activies::-webkit-scrollbar {
        display: none;
    }

    .inner-item {
        scroll-snap-align: start;
    }

    .box-characteristic__caption h4 {
        top: -20px
    }

    .curved-text {
        top: -35px;
        left: -30px;
    }

    .menu-search span svg {
        width: 15px;
    }
}

@media (max-width: 991px) {

    .container,
    .vision-block>.container {
        max-width: 100%;
    }

    .grid-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
        grid-auto-rows: 100px;
    }

    .navigation ul li {
        margin-right: 8px;
    }

    .navigation ul li a,
    .menu-main-booking a {
        font-size: 11px;
    }

    .navigation>ul>li>a svg {
        width: 12px;
        margin-left: 4px !important;
    }

    .wrap-about__content .short-intro {
        position: relative;
        overflow: hidden;
    }

    .slider-wrap .btn {
        font-size: 12px;
        padding: 7px 16px;
    }

    .slider-wrap .meta {
        bottom: 15px;
    }

    .slider-wrap .textblock p {
        margin-bottom: 7px;
    }

    .slider-wrap .meta {
        left: 8px;
        width: calc(100% - 8px);
    }

    .contact-wrap {
        text-align: center;
    }

    .frm-rgister button,
    .frm-rgister input {
        height: 45px;
    }

    .procedure-tab-content {
        display: grid;
        grid-auto-flow: column;

        grid-auto-columns: calc((100% - (21px * 5)) / 5.5);
        gap: 21px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        scroll-padding-right: calc((100% - (21px * 5)) / 5.5 / 2);
        -ms-overflow-style: none;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        scroll-snap-stop: always;
    }

    .procedure-tab-content::-webkit-scrollbar {
        display: none;
    }

    .procedure-box {
        scroll-snap-align: start;
        will-change: transform;
    }

    .prodcedure-view {
        margin-top: 50px;
    }

    .discover-project__category ul li button,
    .discover-project__category ul li button span {
        height: 45px;
        aspect-ratio: unset;
    }

    .tab-project-info__view a svg {
        width: 8px;
    }

    .slider-testimonials .owl-nav [class*='owl-'] {
        width: 35px;
    }

    .slider-testimonials .owl-nav [class*='owl-'] svg {
        width: 7px;
    }

    .box-blog h4 a {
        font-size: 18px;
    }

    .procedure-tab-content .procedure-box {
        gap: 25px;
        /* padding: 40px 5px; */
    }

    .discover-project {
        padding-bottom: 60px;
    }

    .blog-wrap {
        padding-bottom: 30px;
    }

    .meta-post {
        margin-bottom: 20px;
    }

    .construction-activities {
        padding-bottom: 60px;
    }

    .construction-activities__album {
        margin-bottom: 25px;
    }

    .menu-main-footer ul {
        gap: 10px;
    }

    .menu-main-footer ul li a {
        font-size: 12px;
    }

    footer {
        padding: 30px 0;
    }

    .contact-wrap__info {
        padding-left: 0;
    }

    .discover-project__category ul.nav {
        margin-bottom: 70px;
    }

    .slider-wrap {
        padding-left: 38px;
    }

    .slider-wrap .small-index {
        bottom: 15px;
    }

    body.single .archive-form .form-contact button {
        white-space: nowrap !important;
    }

    .contact-info-company h4 {
        margin-bottom: 5px;
        line-height: var(--line-height-base);
    }

    .contact-info-company__box>div p {
        line-height: 22px;
    }

    .contact-info-company__box {
        row-gap: 5px;
    }

    .menu-footer ul li a {
        font-size: 12px;
    }

    .recruitment-category h3,
    .recruitment-box__title h3 {
        font-size: clamp(13px, calc(2.857vw - 19.14px), 20px);
    }

    .recruitment-category__accordion h5>div a {
        font-size: 14px;
    }

    .recruitment-category__accordion .accordion-body>.accordion>.accordion-item {
        padding-left: 20px;
    }

    .recruitment-category__accordion .accordion-body>.accordion>.accordion-item {
        height: 40px;
    }

    .recruitment-blog {
        padding-bottom: 60px;
    }

    .recruitment-galleries {
        padding-top: 60px;
    }

    .recruitment-galleries__title h2 {
        margin-bottom: 25px;
    }

    .sub-category .view-more {
        margin-top: 40px;
    }

    .list-blog-page .box-category {
        gap: 40px
    }

    .sub-category__title {
        margin-bottom: 40px;
    }

    body:not(.home) .meta-post {
        margin-bottom: 0px;
    }

    .box-design-idea {
        right: 11.25px !important;
    }

    .page-project-info .desc-project>div,
    .page-project-info .desc-project>div ul,
    .page-project-info .desc-project>p,
    .design-idea-content {
        font-size: 12px;
    }

    .box-design-idea {
        padding: 15px;
        max-width: 450px !important;
    }

    .hero-project {
        padding-top: 45px;
    }

    .title-page h1 {
        margin-bottom: 25px;
        font-size: 18px;
    }

    .box-project-grid {
        grid-auto-rows: 280px;
    }

    .box-characteristic__content h5 {
        white-space: nowrap;
    }

    .text-slider__run span {
        font-size: 75px;
    }

    .recruitment-intro,
    .list-blog-page {
        padding-top: 50px;
    }

    .blog-active__group h2 {
        left: 0;
    }

    body.single-recruitment .recruitment-box__form .note-form {
        font-size: 12px;
    }

    .list-services-characteristic {
        gap: 45px
    }

    .box-culture__caption p {
        font-size: 18px;
    }

    .block-team {
        padding-block: 30px;
    }

    .curved-text {
        top: -32px;
        left: -28px;
    }

    body.page .short-intro+div {
        position: static !important;
    }

    .box-ceo-info__caption {
        padding-top: 25px;
    }

    .procedure-tab-content .procedure-box:hover .procedure-box__desc {
        opacity: 0;
    }

    .procedure-tab-content .procedure-box.hover .procedure-box__desc {
        opacity: 1;
    }

    .slider-team-feature .button-nav {
        bottom: 70px;
    }

    .slider-team-feature__caption h4 {
        font-size: 18px;
    }

    .slider-team-feature__caption p {
        font-size: 14px;
    }

    .slider-team-feature__caption .description {
        -webkit-line-clamp: 5;
    }

    .slider-team-feature__caption {
        gap: 10px;
    }

    .characteristic-wrap__left {
        background-position: right 151px;
    }

    .over-view-company__btn * {
        padding: 10px !important;
        font-size: 12px;
    }

    .over-view-company__btn {
        gap: 20px;
    }

    .main-applications {
        grid-template-columns: repeat(2, 1fr);
    }

    .box-application__text {
        border-right: 0;
    }

    .box-application:nth-child(2n) .box-application__text {
        border-right: 1px solid #D9D9D9;
    }
}

@media (max-width:900px) {
    :root {
        --width: 820px;
        --height: 460px
    }


    .bignum {
        font-size: 44px
    }

    .small-index {
        font-size: 42px
    }

    .curved-text {
        top: -26px;
        left: -28px;
    }

    .menu-footer ul {
        gap: 10px;
    }
}

@media (max-width: 860px) {
    .procedure-tab-content {
        grid-auto-columns: calc((100% - (21px * 4)) / 4.5);
        scroll-padding-right: calc((100% - (21px * 4)) / 4.5 / 2);
    }

    .tab-project-info {
        gap: 5px
    }

    .services-wrap .row.gx-25px-xl {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - (10px * 2)) / 3.5);
        gap: 10px;

        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        scroll-snap-stop: always;
    }

    .services-wrap .row.gx-25px-xl::-webkit-scrollbar {
        display: none;
    }

    .services-wrap .row.gx-25px-xl>[class^="col-"] {
        scroll-snap-align: start;
        will-change: transform;
        flex: none;
        width: auto;
        padding: 0;
    }

    .box-service__caption {
        aspect-ratio: unset;
        padding: 10px;
    }

    .box-service__caption {
        bottom: 5px;
    }

    .grid-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(194px, 1fr));
    }

    .slider-wrap .nav {
        bottom: 75px;
    }

    .menu-booking a {
        font-size: 12px;
    }

    .recruitment-galleries__wrap {
        grid-template-columns: repeat(4, 1fr);
    }

    .blog-recruitment-item__action>a {
        font-size: 12px;
    }

    .blog-recruitment-item__caption>span a {
        font-size: 14px;
    }

    .recruitment-category__accordion h5>div a {
        font-size: 13px;
    }

    .page-project-info .desc-project>div,
    .page-project-info .desc-project>div ul,
    .page-project-info .desc-project>p {
        font-size: 10px;
    }

    .t2tech-sharebox li img,
    .t2tech-sharebox li svg {
        width: 30px !important;
        height: 30px !important;
    }

    .navigation>ul>li>a svg {
        margin-left: 0 !important;
    }

    .characteristic-wrap__left {
        background-position: right 168px;
    }

    .slider-team-feature__caption .description {
        -webkit-line-clamp: 4;
    }

    .menu-footer ul {
        gap: 7px;
    }

    .menu-footer ul li a {
        font-size: 11px;
    }

}

@media (min-width: 768px) and (max-width: 991px) {
    .recruitment-box__form .form-group {
        flex-wrap: wrap;
    }

    .recruitment-box__form .form-group>button {
        margin-top: 10px;
        min-width: 100%;
    }

    .recruitment-box__form form button {
        height: 45px;
    }

    .blog-detail__content {
        margin-top: 10px;
    }

    body.single .archive-form .form-contact button {
        margin-top: 12px;
    }

    .archive-form .form-contact label {
        margin-bottom: 0;
        line-height: 22px;
    }

    .project-cat-inner .box-characteristic__count {
        font-size: 30px;
    }

    .box-characteristic__count::before {
        bottom: -10px;
    }

    .box-form-cta .form-group>.row {
        --bs-gutter-x: 7px;
    }

    .over-view-company {
        padding-top: 0;
    }

}

@media (min-width: 768px) {

    .procedure-tab-content .procedure-box .procedure-box__icon img,
    .procedure-tab-content .procedure-box .procedure-box__icon svg,
    .procedure-box__count {
        transition: ease-in-out 0.5s;
    }

    .procedure-tab-content .procedure-box {
        box-shadow: 2px 2px 12px #d4c8c854;
    }

    .procedure-tab-content .procedure-box:hover {
        box-shadow: 2px 4px 16px #d5d5d542;
        transform: scale3d(1.01, 1.01, 1.01);
    }

    .procedure-tab-content .procedure-box:hover .procedure-box__count span:after {
        content: "";
        position: absolute;
        inset: -1.5px;
        border-radius: 5px;
        background: linear-gradient(60deg, #ffd67e, #dea400, #f2be5f, #c88802, #f2cb5f, #a05b01, #f2cb5f, #f2be5f);
        background-size: 300% 300%;
        z-index: -1;
        animation: moveGradient 4s linear infinite;
    }

    .procedure-tab-content .procedure-box:hover .procedure-box__count {
        background-color: transparent !important;
    }

    .characteristic-wrap div.col-12+div {
        background-image: none !important;
    }

    .characteristic-wrap__right {
        background-image: none !important;
    }

    .project-title {
        line-height: 138%;
    }

    .slider-project-cat .project-item__info h4 a {
        line-height: 30px;
    }
}


@media (max-width: 767px) {
    #wrapper {
        overflow-x: hidden;
    }

    .wrap-about__content .short-intro {
        padding-right: 0;
        line-height: 20px;
    }

    .wrap-about__content a {
        margin-right: 0;
        margin-top: 1rem;
        display: inline-block;
    }

    .services-wrap__title {
        margin-bottom: 15px;
    }

    .recruitment-box__form .form-group>button {
        height: 50px;
    }

    .header-sm__booking {
        margin-right: 50px;
    }

    .header-sm__booking a {
        border: 1px solid transparent;
        background:
            linear-gradient(90deg, rgba(244, 197, 113, 0.8) 0%, #BD8741 100%) padding-box,
            linear-gradient(90deg, rgba(244, 197, 113, 0.2) 0%, #F4C571 100%) border-box;
        color: #000;
        border-radius: 6px;
        padding-inline: 16px;
        font-size: 12px;
        font-family: var(--font-family-secondary);
        height: 25px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    body main {
        margin-top: 76px;
    }

    .project-block {
        margin-top: -20px;
    }

    .project-block__row,
    .project-related .row.gx-10px {
        grid-template-columns: none !important;

        display: grid;
        grid-auto-flow: column;

        --gap: 10px;
        gap: var(--gap);
        grid-auto-columns: calc((100% - (var(--gap) * 1.5)) / 2.2);

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

        scroll-snap-type: x mandatory;
        scroll-snap-stop: always;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .project-block__row::-webkit-scrollbar,
    .project-related .row.gx-10px::-webkit-scrollbar {
        display: none;
    }

    .project-item,
    .project-related .row.gx-10px [class^="col-"] {
        scroll-snap-align: start;
        will-change: transform;
        display: flex;
        flex-direction: column;
    }

    .project-thumb {
        width: 100%;
        aspect-ratio: 509 / 713;
        overflow: hidden;
        flex-shrink: 0;
    }

    .project-title {
        font-size: 14px;
    }

    .statistical-block__row>div:nth-child(even) {
        border: none;
    }

    .procedure-tab-content {
        grid-auto-columns: calc((100% - (13px * 3)) / 3.2);
        scroll-padding-right: calc((100% - (13px * 3)) /3.2 / 2);
        gap: 13px
    }

    .procedure-tab-content .procedure-box p,
    .procedure-box__desc p {
        font-size: 12px !important;
        line-height: 18px;
        margin: 0
    }

    .procedure-tab-content .procedure-box {
        /* padding: 10px 5px; */
        gap: 17px
    }

    .procedure-box__count {
        aspect-ratio: 25/50;
        width: 25px;
    }

    .services-wrap,
    .statistical-block {
        padding-bottom: 10px;
        padding-top: 15px;
    }

    .slider-wrap {
        height: auto;
    }

    .slider-wrap {
        padding-left: 0;
    }

    .blog-active {
        padding-top: 40px;
    }

    .slider-wrap .slide.front {
        left: 25px;
    }

    .wrap-about__content {
        gap: 0
    }

    .box-title h2 {
        padding-inline: 10px;
    }

    @keyframes draw-horizontal {
        from {
            width: 0;
        }

        to {
            width: 81px;
        }
    }

    @keyframes draw-vertical {
        from {
            height: 0;
        }

        to {
            height:25px;
        }
    }

    .services-wrap .row.gx-25px-xl {
        grid-auto-columns: calc((100% - (10px * 2)) / 3.2);
        margin: 0 -0.25px;
    }

    .box-service__caption a {
        font-size: 12px;
    }

    .box-service__caption {
        padding: 5px
    }

    .procedure-wrap__construction ul {
        gap: 10px
    }

    .procedure-wrap__construction ul li button {
        height: 25px;
        font-size: 12px;
        min-width: 100px;
        width: auto !important;
        padding-inline: 5.5px !important;
    }

    .characteristic-group__box img {
        width: 30px;
    }

    .characteristic-group__box h5,
    .characteristic-group__box p {
        font-size: 14px;
    }

    .characteristic-wrap h6 {
        font-size: 12px;
        margin-bottom: 0;
    }

    .characteristic-wrap h2 {
        font-size: 23px;
        display: block;
        line-height: 20px;
        margin-right: 0;
        margin-bottom: 20px;
        text-align: center;
    }

    .characteristic-wrap {
        text-align: right;
        background-position: bottom right;
        padding-bottom: 10px;
    }

    .characteristic-wrap .view-more {
        margin-top: 20px;
        margin-bottom: 38px;
    }

    .characteristic-wrap div.col-12+div {
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .prodcedure-view {
        margin-top: 18px;
    }

    .prodcedure-view a {
        min-height: 25px;
        font-size: 12px;
    }

    .procedure-wrap {
        padding-bottom: 40px;
    }

    .contact-wrap__info h2 {
        font-size: 12px;
        line-height: 14px;
    }

    .contact-wrap__info p {
        font-size: 8px;
        margin-bottom: 14px;
    }

    .contact-wrap {
        padding-top: 20px;
        padding-bottom: 22px;
    }

    .frm-rgister button,
    .frm-rgister input,
    .frm-rgister .form-group {
        height: 30px;
        overflow: hidden;
    }

    .frm-rgister .form-group .icon svg,
    .frm-rgister .form-group {
        width: 12px;
    }

    .frm-rgister button {
        width: 94px;
        font-size: 10px;
        white-space: nowrap;
    }

    .frm-rgister {
        gap: 5px
    }

    .form-group .icon {
        left: 7px;
    }

    .frm-rgister input {
        padding-left: 22px;
        font-size: 10px;
        padding-right: 5px;
    }

    .frm-rgister button svg {
        margin-right: 0;
    }

    .frm-rgister input::placeholder {
        font-size: 10px;
    }

    .frm-rgister input::-webkit-input-placeholder {
        /* Chrome, Safari, Opera */
        font-size: 10px;
    }

    .frm-rgister input:-ms-input-placeholder {
        /* IE 10-11 */
        font-size: 10px;
    }

    .frm-rgister input::-ms-input-placeholder {
        /* Edge Legacy */
        font-size: 10px;
    }

    .frm-rgister input::placeholder {

        font-size: 10px;
    }

    .box-title h2 {
        font-size: 15px;
    }

    .discover-project {
        padding-top: 70px;
    }

    .discover-project__category ul li button,
    .discover-project__category ul li button span {
        font-size: 12px;
    }

    .discover-project__category ul li button,
    .discover-project__category ul li button span {
        /* height: 25px; */
        border-radius: 20px !important;
    }

    .tab-content-project .row>.col-12 .row {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - (10px * 1)) / 1.5);
        gap: 10px;

        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        scroll-snap-stop: always;
        margin: 0;
    }

    .tab-content-project .row .col-12 .row::-webkit-scrollbar {
        display: none;
    }

    .tab-content-project .row>.col-12 .row [class^="col-"] {
        scroll-snap-align: start;
        flex: none;
        width: auto;
        padding: 0;
    }

    .tab-content-project {
        gap: 20px
    }

    .discover-project__category ul.nav {
        margin-bottom: 30px;
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - (10px * 2)) / 2.2);
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        scroll-snap-stop: always;
        overflow-y: hidden;
    }

    .discover-project__category ul.nav:has(li:nth-child(2):last-child) {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    }

    .discover-project__category ul.nav:has(li:only-child) {
        grid-template-columns: 1fr;
        justify-content: center;
    }

    .discover-project__category ul.nav li {
        scroll-snap-align: start;
        will-change: transform;
        margin: 2px 0;
        padding-left: 2px;
    }

    .tab-project-info__desc {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }

    .construction-activities__title h2,
    .testimonials-wrap__title h2,
    .blog-wrap__title h2,
    .footer-partner__title h2 {
        font-size: 20px;
    }

    .testimonials-image img {
        max-width: 100%;
    }

    .testimonial-info {
        margin-top: 20px;
    }

    .testimonials-image {
        margin-top: 60px;
    }

    .slider-testimonials .owl-nav {
        left: 50%;
        transform: translateX(-50%);
    }

    .box-blog h4 a {
        font-size: 15px;
        text-transform: capitalize !important;
    }

    .box-blog .card-text {
        font-size: 12px;
        line-height: 22px;
    }

    .footer-bottom {
        text-align: center;
    }

    footer .copyright {
        margin-top: 20px;
    }

    .menu-main-footer ul {
        margin-top: 10px;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .slider-wrap .nav {
        gap: 5px;
    }

    .slider-wrap .nav button svg {
        width: 15px;
    }

    .slider-wrap .textblock h3,
    .slider-wrap .textblock p {
        margin-bottom: 0;
        line-height: 18px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }

    .slider-wrap .textblock p {
        margin-bottom: 4px;
    }

    .slider-wrap .slide::after {
        background: linear-gradient(to bottom, rgba(48, 26, 26, 0) 19%, rgba(0, 0, 0, 0.6) 90%, rgba(0, 0, 0, 0.85) 100%) !important;
    }

    .slider-wrap .btn {
        padding: 4px 8px;
    }

    .line-horizontal-about {
        bottom: -24px;
    }

    .draw-line-vertical {
        bottom: -35px;
    }

    .draw-line-horizontal {
        right: -42px;
    }

    .menu-footer ul {
        justify-content: center;
        margin-top: 10px;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .contact-info-block {
        padding-bottom: 20px;
    }

    .form-wrap .form-contact input,
    .form-wrap .form-contact input:focus,
    .form-wrap .select2-container--default .select2-selection--single,
    .recruitment-box__form form input,
    .recruitment-box__form form input:focus {
        height: 40px;
    }

    .recruitment-category,
    .recruitment-box {
        max-width: 100%;
    }

    .blog-recruitment-item__img img {
        max-width: 100%;
    }

    .recruitment-galleries__wrap {
        grid-template-columns: repeat(3, 1fr);
    }

    .recruitment-category h3,
    .recruitment-box__title h3 {
        font-size: 18px;
    }

    .recruitment-category__accordion h5>div a {
        font-size: 15px;
    }

    .recruitment-category {
        margin-bottom: 20px;
    }

    .list-blog-recruitment {
        row-gap: 30px;
    }

    .blog-recruitment-item {
        padding: 15px;
    }

    .show-result-recruitment {
        margin-bottom: 20px;
    }

    .recruitment-box__form {
        padding: 30px 10px;
    }

    .box-blog .card-view a,
    .sub-category .view-more a,
    .box-content-detail .view-more a,
    .project-related .view-more a {
        padding: 7px 16px;
    }

    .list-blog-page__title .description-category {
        margin-bottom: 50px;
    }

    .t2tech-sharebox {
        justify-content: flex-start !important;
    }

    .page-project-info .desc-project {
        padding-bottom: 30px;
    }

    .page-project-info .desc-project>div,
    .page-project-info .desc-project>div ul,
    .page-project-info .desc-project>p {
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    .box-design-idea {
        top: auto !important;
        bottom: 0 !important;
        transform: translateY(0) !important;
    }

    .page-project-info {
        margin-bottom: 20px;
    }

    .project-related {
        padding-bottom: 40px;
    }

    .list-galleries-pro .item,
    .list-galleries-recruitment .item .thumbnail .item img {
        border-radius: 10px;
    }

    .list-galleries-pro .arrows,
    .list-galleries-recruitment .arrows {
        bottom: 30px
    }

    .arrows button {
        width: 30px;
        height: 30px;
    }

    .project-related .row.gx-10px {
        --bs-gutter-x: 0;
    }

    /* body.single-project main,
    body:not(.home) main {
        margin-top: 76px;
    } */

    .box-project-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .text-slider__run span {
        font-size: 50px;
        letter-spacing: 0.1em;
    }

    .hero-project {
        padding-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .title-page h1 {
        margin-bottom: 20px;
        font-size: 12px;
    }

    .hero_project__desc h2,
    .hero_project__desc * {
        font-size: 14px;
        line-height: 20px;
    }

    .hero_project__desc * {
        margin-bottom: 0;
    }

    .box-characteristic__content h5,
    .box-characteristic__content p {
        font-size: 12px;
    }

    .slider-project-cat .owl-nav [class*='owl-'],
    .project-default-slider .owl-nav [class*='owl-'] {
        width: 50px;
        height: 50px;
    }

    .slider-project-cat .owl-nav [class*='owl-'] span,
    .project-default-slider .owl-nav [class*='owl-'] span {
        position: relative;
    }

    .slider-project-cat .owl-nav [class*='owl-'] span svg,
    .project-default-slider .owl-nav [class*='owl-'] span svg {
        width: 15px;
        height: 30px;
        position: absolute;
        top: 50%;
        left: 9px;
        transform: translateY(-50%);
    }

    .slider-project-cat .owl-nav [class*='owl-'] span.next svg,
    .project-default-slider .owl-nav [class*='owl-'] span.next svg {
        left: -10px;
    }

    .slider-project-cat .owl-nav [class*='owl-'],
    .project-default-slider .owl-nav [class*='owl-'] {
        bottom: 65% !important;
    }

    .project-cat-inner .box-characteristic {
        column-gap: 5px;
    }

    .box-characteristic__content h5 {
        white-space: normal;
    }

    .meta-post {
        font-size: 12px;
    }

    .meta-post svg {
        width: 12px;
    }

    .faq-list>div {
        gap: 20px
    }

    .faq-list h4 button:not(.collapsed) {
        margin-bottom: 15px !important;
    }

    .list-galleries-pro .thumbnail,
    .list-galleries-recruitment .thumbnail {
        left: 50%;
    }

    body:not(.page) .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 15px;
        left: 6px;
    }

    .project-related .project-item .preview+a {
        display: none
    }

    .project-related .project-item__info .preview {
        margin-bottom: 0;
    }

    .procedure-box__icon svg {
        width: 30px;
    }

    .characteristic-services .row {
        gap: 45px
    }

    .block-team__title h2 {
        margin-bottom: 50px;
    }

    .box-culture__caption .view-more a {
        min-height: 40px;
        font-size: 14px;
        padding-inline: 4px;
    }

    .characteristic-services h2 {
        margin-bottom: 60px;
    }

    .block-title {
        padding-top: 20px;
    }

    .form-block,
    .fengshui-archive__title {
        padding-top: 40px;
    }

    .hero-block-people .desc-people {
        margin-bottom: 40px;
    }

    .culture-people {
        padding: 25px 0;
    }

    .box-culture__caption .content {
        margin: 35px 0;
    }

    .culture-people .box-culture {
        flex-direction: column !important;
    }

    .culture-people>.container>.row {
        row-gap: 55px
    }

    .culture-people .box-culture {
        gap: 30px;
    }

    .box-ceo-share {
        max-width: 100%;
    }

    body.page .short-intro+div {
        display: block !important;
    }

    .vision-block>.container {
        padding-left: 11.25px;
    }

    .line-horizontal-about {
        left: 0;
    }

    .line-vertical-about {
        left: 3px;
    }

    .vision-block .line-horizontal-about {
        right: -10px;
    }

    .vision-block .line-vertical-about {
        right: -5px
    }

    .vision-block__caption .box-video {
        text-align: center !important;
        transform: translateX(10px);
    }

    .curved-text {
        width: 150px;
        height: 150px;
    }

    .curved-text {
        top: -41px;
        left: -41px;
    }

    .value-block__right .design-right img {
        margin-top: 10px;
    }

    .form-contact .select2-container--default .select2-results>.select2-results__options,
    .form-cta .select2-container--default .select2-results>.select2-results__options {
        max-height: 170px !important;
    }

    .archive-form .form-contact .select2-results__option,
    .archive-form .form-contact .select2-container--default .select2-selection--single .select2-selection__rende#ff0000,
    .form-cta .select2-results__option,
    .form-cta .select2-container--default .select2-selection--single .select2-selection__rende#ff0000 {
        padding: 0 10px !important;
        font-size: 12px;
    }

    .ez-toc-open-icon {
        top: 12% !important
    }

    .thumbnail .item img {
        border-radius: 10px;
    }

    .blog-recruitment-item__action>a,
    .blog-recruitment-item__action>span {
        padding: 5px 16px;
    }

    .countdown-promotion-wrap .count-box {
        border-radius: 10px;
    }

    .package-services__title+.row {
        --bs-gutter-y: 20px;
    }

    .process-center-dot {
        margin-left: -11px !important;
    }

    .process-timeline::before {
        left: 20px;
    }

    .process-item.left::before,
    .process-item.right::before {
        left: 3px;
        transform: none;
        top: 65px
    }

    .process-item.left::after,
    .process-item.right::after {
        left: 20px;
        top: 73px
    }

    .process-content,
    .process-img {
        margin-left: 40px;
    }

    .process-item.left .process-content {
        text-align: left;
    }

    .process-item.center {
        text-align: left;
        padding-left: 20px;
    }

    .process-center-dot::after {
        left: 4px;
    }

    .process-curve {
        left: 7px;
        transform: translateX(-29%);
        top: calc(100% + 36px);
    }

    .process-curve svg {
        width: 20px;
        height: 110px;
    }

    .process-curve svg path {
        stroke-width: 4 !important;
    }

    .process-item.center {
        background-color: transparent;
    }

    .process-item {
        padding-top: 20px;
    }

    .process-item.left .process-img,
    .process-item.right .process-content {
        padding-left: 0;
    }

    .process-img img {
        max-width: calc(100% - 40px);
    }

    .process-item.right .process-img {
        padding-right: 11.25px;
        padding-left: 0;
    }

    .process-item.right .row {
        flex-direction: column-reverse;
    }

    .process-item.first-item {
        padding-top: 0;
    }

    .process-item.left.first-item::before {
        top: 35px;
    }

    .process-item.left.first-item::after {
        top: 43px;
    }

    .process-item.pt-0::after {
        top: 51px;
    }

    .process-item.pt-0::before {
        top: 41px;
    }

    .form-fenghshui button,
    .form-fenghshui label {
        font-size: 14px;
    }

    .form-fenghshui form .row {
        --bs-gutter-y: 15px;
    }

    .form-fenghshui input,
    .form-fenghshui select {
        margin-top: 5px;
    }

    .procedure-tab-content .procedure-box p {
        height: 37px
    }

    .procedure-tab-content .procedure-box__desc p {
        height: 108px;
        padding: 10px 3px;
        -webkit-line-clamp: 6 !important;
    }

    .group-slider .item .slide-cell {
        grid-column: 1 / -1;
    }

    .group-slider .item>.box-project-item:first-child img {
        aspect-ratio: 813 / 576;
    }

    .gallery-project .mainSwiper,
    .gallery-project .mainSwiper a,
    .gallery-project .mainSwiper a::before {
        border-radius: 15px;
    }

    .single-title__title h1 {
        margin-top: 30px;
    }

    body.single-recruitment .breadcrumb-share {
        padding-top: 0;
    }

    .page-recruitment-galleries {
        margin-top: 16px;
        margin-bottom: 20px;
    }

    body:not(.home) .box-blog .card-body {
        gap: 15px;
    }

    .blog-recruitment-item__caption {
        row-gap: 8px;
    }

    .statistical-block {
        background-attachment: unset;
    }

    .statistical-block .row {
        --bs-gutter-y: 15px;
    }

    .block-team__list .owl-prev,
    .block-team__list .owl-next {
        top: 30%
    }

    .box-team__caption h4 span+span {
        font-size: 14px !important;
    }

    .slider-team-feature__caption .description {
        -webkit-line-clamp: 10;
    }

    .slider-team-feature__caption h4 {
        font-size: 20px;
    }

    .slider-team-feature .button-nav {
        bottom: -13px;
    }

    .block-team .row {
        row-gap: 21px;
    }

    .characteristic-wrap__left {
        background-image: none !important;
    }

    .characteristic-wrap__right {
        width: 100% !important;
        margin-top: 25px;
    }

    .main-slider {
        contain: layout paint;
    }

    .swiper-slide {
        transform: none !important;
    }

    .statistical-block * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }

    section {
        /* content-visibility: auto; */
        contain-intrinsic-size: 600px;
    }

    .blog-detail {
        padding-top: 15px;
    }

    .fengshui-archive__title,
    .hero-page__title {
        padding-top: 40px;
    }

    .block-thinking__gal {
        gap: 15px;
    }

    .block-thinking__gal {
        grid-template-columns: repeat(2, 1fr);
    }

    .block-thinking__gal .item-gal:first-child {
        grid-column: 1 / -1;
    }

    .banner-company-logo__title h2 {
        text-align: right;
    }

    .over-view-company {
        padding-bottom: 110px;
        padding-top: 0;
    }

    .over-view-company__content h2 span+span {
        margin-bottom: 10px;
    }

    .banner-company__title h2 {
        text-align: center;
    }

    .banner-company__title a span {
        font-size: 12px;
        line-height: 22px;
    }

    .characteristic-wrap__content {
        display: grid;
    }

    .characteristic-wrap__content>div {
        line-height: 22px;
    }

    .discover-project__category ul li button.active:after {
        inset: -1px;
    }

    .tab-about {
        padding-top: 40px;
        padding-bottom: 30px;
    }

    .tab-about ul {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - (10px * 2)) / 2.2);
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        scroll-snap-stop: always;
        overflow-y: hidden;
        scroll-padding-left: 50%;
        scroll-padding-right: 50%;
    }

    .tab-about ul.nav:has(li:only-child) {
        justify-content: center;
    }

    .tab-about ul li {
        scroll-snap-align: start;
        will-change: transform;
        margin-bottom: 1px;
        margin-right: 1px;
    }

    .tab-about ul.nav-tabs li>button {
        min-width: 100%;
    }

    .experience-company .row {
        row-gap: 20px;
    }

    .experience-company {
        padding-bottom: 35px;
    }

    .box-culture__caption .view-more>div {
        min-height: unset;
    }

    .grid-wrapper .wide {
        grid-row: span 2;
    }

    .organizational-company {
        padding-top: 55px;
        padding-bottom: 0;
    }

    .banner-company-logo {
        margin-bottom: 0;
    }

    .group-slider .box-project-item__caption {
        left: 0;
    }

    .box-project-item__caption .preview {
        padding-left: 0;
    }

    .group-slider .box-project-item__caption {
        bottom: 10px;
    }

    .box-project-item__caption .preview,
    .box-project-item__caption .preview ul {
        line-height: 21px;
    }

    .slider-partner .item a {
        height: 70px;
    }

    .project-cat-inner__desc {
        margin-bottom: 15px;
    }

    .project-cat-inner__desc * {
        margin-bottom: 0;
    }

    .discover-function {
        margin-bottom: 20px;
    }

    .project-detail .col-12>h2 {
        margin-bottom: 15px;
    }

    .breadcrumb-share {
        padding-top: 20px;
    }

    .project-item__info h4 {
        margin-bottom: 5px;
    }

    .project-item__info .preview {
        line-height: 22px;
    }

    .project-related .project-item__info {
        transform: translateY(calc(100% - 36px));
    }

    .recruitment-blog {
        padding-bottom: 40px;
    }

    .page-project-info,
    .page-project-galleries {
        margin-bottom: 40px;
    }

    body {
        font-size: 16px;
    }

    .project-related h2 span {
        font-size: 20px;
    }

    .applications-arch .img-art {
        height: 100%;
    }

    .img-item-gallery {
        margin-top: 10px;
    }

    .box-blog .img,
    .box-blog .card-view a {
        border-radius: 8px;
    }

    .feature-post .col-6 {
        margin-bottom: 10px;
    }

    .discover-project__category ul.nav:has(li:nth-child(3):last-child) button.active:after {
        inset: -2px -1px;
    }

    .list-blog-page .row.gx-10px {
        --bs-gutter-y: 10px;
    }

    .feature-post .row.gx-10px {
        --bs-gutter-x: 10px;
    }

    .faq-list button span {
        padding-right: 22px;
    }

    .footer-info h5,
    .footer-info .footer-info__company {
        font-size: 16px;
    }

    html {
        height: 100dvh;
    }

    .slider-wrap .nav {
        display: none;
    }

    .characteristic-wrap {
        padding-block: 60px;
    }
    .blog-active__group__title span{
        padding-right: 15px;
    }
    .box-service.service-zoom{
        transform: translateZ(0) !important;
    }
    .aligncenter{
        width: 100% !important;
    }
}

@media screen and (max-width: 690px) {
    .carousel .list .item .content {
        padding-right: 0;
    }

    .carousel .list .item .content .title {
        font-size: 30px;
    }

    .line-vertical-about {
        bottom: -26px;
    }

    .discover-project__category ul.nav li {
        flex: 1;
    }
}

@media (max-width:651px) {
    .slider-wrap .nav {
        bottom: 40px;
    }

    .blog-active__group__title {
        position: relative;
        margin-bottom: 15px !important;
        text-align: center;
    }
}

@media (max-width:600px) {

    .blog-active {
        padding-bottom: 7px;
    }

    .slider-wrap .nav {
        bottom: 23px;
    }

    .slide {
        width: 86%;
        left: 7%
    }

    .meta {
        left: 22px;
        bottom: 18px;
        gap: 10px
    }

    .bignum {
        font-size: 40px
    }

    .textblock h3 {
        font-size: 16px
    }

    .small-index {
        font-size: 36px;
        right: 16px;
        bottom: 12px
    }

    .nav {
        right: 12px;
        bottom: 6px
    }
}

@media (max-width:580px) {
    .slider-wrap .nav {
        bottom: 15px;
    }

    .blog-active {
        padding-bottom: 50px;
    }

    .recruitment-galleries__wrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-applications {
        grid-template-columns: repeat(1, 1fr);
    }

    .box-application__text {
        border-right: 1px solid #D9D9D9;
    }
}

@media (max-width:576px) {
    .bottom-sheet-cta .form-cta input[type="number"] {
        margin-bottom: 5px;
    }

    .block-team__list .owl-prev,
    .block-team__list .owl-next {
        top: 28%;
    }

    .block-team__list .owl-nav [class*='owl-'] svg {
        width: 35px;
        height: 35px;
    }

    .tab-about ul {
        grid-auto-columns: calc((100% - (10px * 2)) / 1.8);
    }

    .tab-about ul.nav-tabs li>button {
        padding-inline: 10px;
        font-size: 12px;
    }
}

@media (max-width:530px) {
    .slider-wrap .nav {
        bottom: -10px;
    }

    .box-design-idea {
        position: static !important;
        margin: 20px auto;
        max-width: calc(100% - 22.5px) !important;
    }

    .project-item__info h4 a {
        font-size: 18px;
    }

    .project-item__info {
        padding: 10px;
        transform: translateY(calc(100% - 43px));
    }

    .inner-services-activies .inner-track {
        grid-auto-columns: calc((100% - 20px) / 2.7);
    }

    .box-project-item__caption .preview * {
        font-size: 13px;
    }
}

@media (max-width:490px) {
    .slider-wrap .slide {
        width: 350px;
    }

    .slider-wrap .small-index {
        right: -3px
    }

    .procedure-tab-content .procedure-box__desc p {
        height: 100px;
    }

    .procedure-tab-content {
        grid-auto-columns: calc((100% - (13px * 2)) / 2.2);
        scroll-padding-right: calc((100% - (13px * 2)) / 2.2 / 2);
        gap: 13px;
    }

    .procedure-box__icon svg {
        width: 35px;
    }

    .project-block__row,
    .project-related .row.gx-10px {
        grid-auto-columns: calc((100% - (var(--gap) * 1.5)) / 1.75);
    }

}

@media (max-width:430px) {
    .services-wrap .row.gx-25px-xl {
        grid-auto-columns: calc((100% - (10px * 2)) / 2.1);
    }

    .donViLoBan {
        left: 65% !important;
    }

    #lobanOuter p {
        font-size: 9px;
    }

    .slider-wrap .nav {
        bottom: -19px;
        right: -5px;
    }

    .blog-active {
        padding-bottom: 85px;
    }

    .slider-wrap .btn {
        font-size: 11px;
        display: none
    }

    .slider-wrap .nav button svg {
        width: 12px;
    }

    .draw-line-vertical {
        right: -15px;
    }

    .draw-line-horizontal {
        right: -28px;
    }

    .box-project-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .box-project-grid .grid-item {
        grid-row: span 2;
    }

    .faq-list button {
        font-size: 14px;
    }

    .box-blog .card-view a,
    .sub-category .view-more a,
    .box-content-detail .view-more a,
    .project-related .view-more a {
        padding: 2px 16px;
    }

    .box-form-cta form {
        gap: 0px;
    }

    .countdown-promotion-wrap .count-box {
        width: 75px;
    }

    .blog-recruitment-item__caption>span a,
    .blog-recruitment-item__caption .info-recruitment p,
    .blog-recruitment-item__action>a,
    .blog-recruitment-item__action>span,
    .recruitment-box__title .desc-form *,
    .recruitment-box__form .note-form *,
    .box-characteristic__caption p,
    .procedure-box__desc p,
    .box-blog .card-text,
    .meta-post span,
    .procedure-tab-content .procedure-box p {
        font-size: 12px !important;
    }

    .box-title h2::before {
        bottom: -4px;
    }

    .box-title h2::after {
        bottom: -10px;
    }

    .box-title span::before {
        top: -6px
    }

    .box-title span::after {
        top: -12px
    }

    .project-title {
        margin-top: 5px;
        line-height: 32px;
        margin-bottom: 0;
    }

    .slider-wrap {
        aspect-ratio: 1920 / 1560;
    }

    .slider-wrap .slide.front {
        transform: translate(-8.5%, 17%) scale(1);
    }

    .slider-team-feature__caption .description {
        -webkit-line-clamp: 5;
    }

    .box-project-grid {
        grid-auto-rows: 148px;
    }

    .menu-footer ul {
        gap: 5px;
    }

    .slider-team-feature__caption .description {
        -webkit-line-clamp: 6;
    }
}

@media (max-width:390px) {
    .slider-wrap .nav {
        bottom: -19px;
    }
}

@media (max-width:375px) {
    .slider-wrap .nav {
        bottom: -31px;
        gap: 0
    }

    .box-form-cta label {
        font-size: 12px;
        margin-bottom: 0;
    }

    .form-cta .select2-results__option {
        padding: 5px 10px !important;
    }

    .box-title span,
    .blog-active__group h2,
    .wrap-about__content h2 {
        font-size: 18px;
        line-height: 25px;
    }

    .countdown-promotion-wrap .count-box {
        width: 68px;
    }

    .procedure-tab-content .procedure-box__desc p {
        height: 102px
    }

    .blog-recruitment-item__action>a,
    .blog-recruitment-item__action>span {
        padding: 5px 10px;
    }

    .box-team__caption h4 {
        flex-direction: column;
    }

    .box-characteristic__caption h4 {
        font-size: 12px;
    }

    .menu-footer ul li a {
        font-size: 10px;
    }

    .project-cat-inner .box-characteristic {
        column-gap: 5px;
    }

    .project-cat-inner__title+.row {
        --bs-gutter-x: 5px;
    }
    .slider-wrap .slide {
        width: 300px;
    }
}

@media (max-width:360px) {
    .slider-wrap .nav {
        bottom: -42px;
        right: 0;
    }

    .meta-post {
        font-size: 10px;
        flex-direction: column;
    }

    .vision-block__caption .box-video img {
        max-width: 260px;
    }

    .curved-text {
        top: -46px;
    }

    .procedure-tab-content .procedure-box p,
    .procedure-box__desc p {
        margin-top: 5px;
    }

    .procedure-tab-content .procedure-box .procedure-box__icon+p {
        top: calc(40% + clamp(40px, 4.135vw - 6.16px, 95px) + -4px);
    }

    .slider-team-feature__caption .description {
        -webkit-line-clamp: 4;
    }

    .over-view-company__btn * {
        padding: 8px !important;
    }

    .over-view-company__btn {
        gap: 10px
    }

    .tab-about ul.nav-tabs li>button {
        padding-inline: 2px;
    }

    .tab-about ul.nav-tabs li>button {
        font-size: 10px;
    }

    .slider-partner .item a {
        height: 60px;
    }

    .project-cat-inner .box-characteristic {
        column-gap: 2px;
    }

    .box-characteristic__content p {
        font-size: 10px;
    }

    .project-cat-inner .box-characteristic__count {
        font-size: 30px;
    }
}

@media (max-width:320px) {
    .slider-wrap .nav {
        bottom: -69px;
        right: -7px;
    }

    .menu-footer ul li a {
        font-size: 9px;
    }

    .over-view-company__btn {
        flex-direction: column;
    }

    .over-view-company__btn * {
        width: 100%;
        text-align: center;
    }

    .tab-about ul.nav-tabs li>button,
    .header-sm__booking a {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-sm .logo a img {
        height: 40px;
    }

    .box-characteristic__content h5 {
        font-size: 10px;
    }
    .slider-wrap .slide {
        width: 260px;
    }
}