/* Section full-width thật */



.full-row.full-logo {



    width: 100vw;



    position: relative;



    left: 50%;



    transform: translateX(-50%);



    background: #696969;



    padding: 40px 0;



    /* margin: 20px 0 0 0; */



    box-sizing: border-box;



    overflow-x: hidden;



}







/* Chặn tràn ngang toàn site */



body {


    line-height: 1.5;
    overflow-x: hidden;



}


.slogons {
    font-size: 34px !important;

    font-weight: 600;
}




/* Inner container giữ nội dung ở giữa */



.inner-logo.inner-container {



    max-width: 1200px;



    margin: 0 auto;



    padding: 0 20px;



    width: 100%;



    box-sizing: border-box;



    position: relative;



    z-index: 2;



}



.logo {



    display: flex;



    justify-content: center;



    align-items: center;



}







/* Title */



.title-logo h2 {



    text-align: center;



    font-size: 42px;



    font-weight: 700;



    color: #fff;



    margin: 0;



}















.home-box-kh-thanthiet {



    margin-top: 30px;



}







.text-contact-home {



    display: flex;



    align-items: center;



    justify-content: center;



    flex-wrap: wrap;



    gap: 15px;



    font-size: 20px;



    font-weight: 500;



    color: #333;



    text-align: center;



    /* margin: 40px 0; */



}



.text-contact-home p {



    color: #333333;



    font-size: 20px;



}







.text-contact-home a {



    text-decoration: none;



    padding: 10px;



    color: #F44336;



    border: 2px solid #F44336;



    text-transform: uppercase;



    font-weight: bold;



    font-size: 16px;



}







.text-contact-home a:hover {



    color: #FFF;



    background: #f44336;







}







.phone-contact-home-wrapper {



    display: flex;



    align-items: center;



    justify-content: center;



    flex-wrap: wrap;



    gap: 20px;



}







.contact-home-item {



    padding: 10px 20px;



    background: #F44336;



    color: #FFF;



    text-align: center;



    border-radius: 10px;







}







.contact-home-item h3 {



    text-transform: uppercase;



    font-weight: bold;



    font-size: 16px;



}







.full-row.full-introduce {



    width: 100vw;



    position: relative;



    left: 50%;



    transform: translateX(-50%);



    background: #F2F2F2;



    padding: 20px 0;



    margin: 20px 0 0 0;



    box-sizing: border-box;



}







/* Inner container giữ nội dung ở giữa, giới hạn chiều rộng */



.inner-introduce.inner-container {



    max-width: 1200px;



    margin: 0 auto;



    padding: 0 20px;



    width: 100%;



    box-sizing: border-box;



    position: relative;



    z-index: 2;



}







.title-introduce h2 {



    text-align: center;



    font-size: 35px;



    color: #333;



    margin: 10px 0;



}







.image-introduce {



    text-align: center;



    font-size: 10px;



}







.content-introduce {



    /* display: flex; */

    display: grid;

    grid-template-columns: repeat(2, 1fr);



    justify-content: space-between;



    gap: 20px;



    margin-top: 20px;



}







.passage-introduce p {



    font-size: 16px;



    color: #777777;



}







/* =========== Dịch vụ Việt - Nhật ============= */



.full-row.full-service {



    width: 100vw;



    position: relative;



    left: 50%;



    transform: translateX(-50%);



    background: #f5f5f5;



    margin: 0;



    padding: 0;



    box-sizing: border-box;



    overflow: hidden;



}







/* Khối service chính */



.service {



    position: relative;



    width: 100%;



    min-height: 500px;



}



/* Ảnh nền full */



.service-img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    position: absolute;



    top: 0;



    left: 0;



    z-index: 1;



}







/* Lớp overlay tối để chữ nổi bật (tùy chọn, chỉnh opacity nếu muốn) */



.service::before {



    content: "";



    position: absolute;



    inset: 0;



    background: rgba(0, 0, 0, 0.45);
    /* Nền đen mờ 45% - chữ sẽ nổi hơn */



    z-index: 2;



}







/* Nội dung đè lên ảnh + overlay */



.content-service {



    position: relative;



    z-index: 3;



    width: 100%;



    height: 100%;



    display: flex;



    align-items: center;



    justify-content: center;



    text-align: center;



    color: #fff;



    padding: 60px 20px;



}







/* Giới hạn nội dung ở giữa */



.inner-container {



    max-width: 1200px;



    width: 100%;



    padding: 0 20px;



    box-sizing: border-box;



}







/* Tiêu đề */



.content-service h2 {



    font-size: 33.28px;



    text-transform: uppercase;



    font-weight: bold;



    margin: 0;



    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
    /* Bóng chữ để nổi trên nền mờ */



}







.service-wrapper {



    display: grid;



    grid-template-columns: repeat(4, 1fr);



}



.service-wrapper.swiper-container {

    width: 100%;

    max-width: 1200px;
    /* <-- quan trọng: giới hạn rộng tối đa */

    margin: 40px auto 0;
    /* căn giữa + cách trên */

    padding: 0 10px;
    /* tránh sát cạnh */

}







.service-slide {



    position: relative;



    width: 100%;



    height: 100%;



    overflow: hidden;



}







/* Ảnh */



.service-slide img {



    width: 100%;



    height: 350px;



    object-fit: cover;



    display: block;



}







/* Lớp phủ chữ */



.slide-overlay {



    position: absolute;



    inset: 0;
    /* top right bottom left = 0 */



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: end;



    text-align: center;



    color: #fff;



    opacity: 1;



    transition: all 0.3s ease;



}







/* Tiêu đề */



.slide-overlay h3 {



    font-size: 16px;



    font-weight: bold;



    margin-bottom: 15px;



    text-transform: uppercase;



}







/* Nút xem thêm */



.btn-xem-them {



    padding: 10px 25px;



    color: #fff;



    text-decoration: none;



    font-size: 7px;



    font-weight: bold;



    background: #F44336;



    border-radius: 5px;



    transition: all 0.3s ease;



}







.btn-xem-them:hover {



    background: #d26e4b;



    color: #FFF;



}







/* Hiệu ứng hover */



.service-slide:hover img {



    transform: scale(1.05);



    transition: transform 0.4s ease;



}













/* =========== Biên dịch đa ngôn ngữ ============ */







.title-translation h2,
.title-customer-reviews h2,
.title-featured-projects h2,
.title-interpreting-projects h2 {



    text-align: center;



    text-transform: uppercase;



    color: #282828;



    font-size: 30px;



    font-weight: bold;



}







.image-translation,
.image-customer-reviews,
.image-featured-projects,
.image-choose-option,
.image-interpreting-projects {



    text-align: center;



}







/* ================ Các dự án nổi bật =============== */



.slide-overlay a {



    text-decoration: none;



    text-transform: uppercase;



    font-size: 18px;



    font-weight: bold;



    color: #FFF;



    padding-bottom: 10px;



    margin-bottom: 10px;



}







/* =========== Đánh giá của khách hàng =============== */



.customer-reviews-wrapper {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 20px;



    text-align: center;



    margin-top: 20px;



}







.customer-reviews-item p {

text-align: justify;

    font-size: 15.2px;



    color: #000000;



    line-height: 1.4;



}







.customer-reviews-item h4 {



    color: #282828;



    font-size: 20px;



}







/* ========= Tại sao lại chọn chúng tôi =========== */







.title-choose-option h2 {



    color: #777777;



    font-size: 20px;



    text-align: center;



}



.image-choose-option {



    margin-bottom: 20px;



}



.choose-option-wrapper {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 40px;



    align-items: stretch;



}







.choose-option-item {



    position: relative;



    border-radius: 20px;



    overflow: visible;



    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);



    transition: transform 0.3s ease, box-shadow 0.3s ease;



    text-align: center;



    height: 80%;



    display: flex;



    flex-direction: column;



    margin-top: 60px;



}







.choose-option-item:hover {



    transform: translateY(-10px);



}







/* Phần ảnh nằm giữa bên trên (absolute) */



.choose-option-icon {



    position: absolute;



    top: -65px;



    left: 50%;



    transform: translateX(-50%);



    width: 120px;



    height: 120px;



    background: white;



    border: 1px solid #777777;



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    z-index: 10;



}







.choose-option-icon img {



    width: 80px;



    height: 80px;



    object-fit: contain;



}







/* Phần nội dung nằm dưới */



.choose-option-content {



    padding: 35px 30px 35px;



    background: rgb(244, 244, 244);



    flex-grow: 1;



    border-bottom: 4px solid #F44336;



    border-radius: 20px;



}







.choose-option-content h4 {



    font-size: 20px;



    font-weight: bold;



    color: #333;



    margin-bottom: 15px;



    text-transform: uppercase;



}







.choose-option-content p {

    text-align: justify;

    font-size: 16px;



    line-height: 1.5;



    color: #555;



}







/* =============Mức độ uy tín ========== */







.full-row.full-reputation-home {



    width: 100vw;



    position: relative;



    left: 50%;



    transform: translateX(-50%);



    background: #f5f5f5;



    margin: 40px 0 0 0;



    padding: 0;



    box-sizing: border-box;



    overflow: hidden;



}







/* Khối service chính */



.reputation {



    position: relative;



    width: 100%;



    max-height: 300px;



}







/* Ảnh nền full */



.reputation-img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    position: absolute;



    top: 0;



    left: 0;



    z-index: 1;



}







.reputation-wrapper {



    display: grid;



    grid-template-columns: repeat(4, 1fr);



}







.reputation-item {



    text-align: center;



    padding: 20px 0;



}







.reputation-item p {



    font-size: 43px;



    color: #364b9b;



    text-transform: uppercase;



    font-weight: bold;



    padding: 10px;



    margin: 0;



}







.reputation-item span {



    font-size: 20.8px;



    color: #364b9b;



}







.reputation-item p {



    position: relative;



}







.reputation-item p::after {



    content: "";



    position: absolute;



    left: 50%;



    bottom: 5px;



    transform: translateX(-50%);



    width: 55px;



    height: 2px;



    background-color: #f44336;



    border-radius: 2px;



}







/* === CSS chung cho overlay === */



.slide-overlay {



    position: absolute;



    inset: 0;



    display: flex;



    flex-direction: column;



    align-items: center;



    color: white;



    text-align: center;







    /* Luôn hiển thị, không cần hover */



    opacity: 1;



    transition: background 0.4s ease;



}







/* Featured Projects - overlay đặc trưng */



.featured-overlay,
.interpreting-projects-overlay {



    background: rgba(0, 74, 141, 0.65);
    /* màu xanh đậm của bạn */



}







.featured-overlay a,
.interpreting-projects-overlay a .featured-overlay span,
.interpreting-projects-overlay span {



    font-size: 19.2px;



    font-weight: 700;



    border-radius: 4px;



    text-transform: uppercase;



    letter-spacing: 1px;



}







.featured-overlay a:hover,
.interpreting-projects-overlay a:hover {



    background: rgba(255, 255, 255, 0.15);



}







/* Dịch vụ - overlay đặc trưng */









.service-overlay h3 {



    font-size: 14px;



    margin: 0;



    font-weight: 700;



    text-transform: uppercase;



}







.service-overlay .btn-xem-them {



    display: inline-block;



    margin-top: 12px;



    padding: 10px 20px;



    background: #F44336;



    color: white;



    text-decoration: none;



    border-radius: 30px;



    font-weight: 600;



    transition: all 0.3s;



    font-size: 13px;



}







.service-overlay .btn-xem-them:hover {



    background: #F44336;



    transform: translateY(-2px);



}







/* =============== tiêu điểm ==================== */



.full-row.full-focus {



    width: 100vw;



    position: relative;



    left: 50%;



    transform: translateX(-50%);



    background: #f5f5f5;



    margin: 0;



    padding: 0;



    box-sizing: border-box;



    overflow: hidden;



}







/* Khối service chính */



.focus {



    position: relative;



    width: 100%;



    min-height: 500px;



}







/* Ảnh nền full */



.focus-img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    position: absolute;



    top: 0;



    left: 0;



    z-index: 1;



}







.focus::before {



    content: "";



    position: absolute;



    inset: 0;



    background: rgba(0, 0, 0, 0.05);
    /* Nền đen mờ 45% - chữ sẽ nổi hơn */



    z-index: 2;



}







/* Nội dung đè lên ảnh + overlay */



.content-focus {



    position: relative;



    z-index: 3;
    /* Cao nhất */



    width: 100%;



    height: 100%;



    display: flex;



    align-items: center;



    justify-content: center;



    text-align: center;



    color: #fff;







}







.title-focus h2 {



    text-align: center;



    color: #282828;



    font-size: 33.28px;



    font-weight: bold;



    text-transform: uppercase;



}







.content-image-focus {



    width: 100%;



    padding: 20px 0;



}











/* ================== WRAPPER ================== */



.focus-wrapper {



    display: grid;



    grid-template-columns: 3fr 1fr;
    /* trái gấp 3 lần phải */



    gap: 30px;



    max-width: 1400px;



    margin: 0 auto;



}







/* ================== LEFT BIG IMAGE ================== */



.focus-left {



    position: relative;



    height: 450px;
    /* chiều cao tổng */



    /* border-radius: 12px; */



    overflow: hidden;



}







.focus-left img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    display: block;



}







/* overlay chữ ảnh lớn */



.focus-left p {



    position: absolute;



    bottom: 0;



    left: 0;



    right: 0;



    background: rgba(0, 0, 0, 0.6);



    color: #fff;



    padding: 20px;



    margin: 0;



    font-size: 18px;



    font-weight: 600;



}







/* ================== RIGHT COLUMN ================== */



.focus-right {



    display: flex;



    flex-direction: column;



    gap: 20px;



    height: 450px;
    /* BẰNG LEFT */



}







/* từng item nhỏ */



.focus-item-right-content {



    position: relative;



    flex: 1;
    /* chia đều 3 ảnh */



    /* border-radius: 12px; */



    overflow: hidden;



}







.focus-item-right-content img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    display: block;



}







/* overlay chữ ảnh nhỏ */



.focus-item-right-content p {



    position: absolute;



    bottom: 0;



    left: 0;



    right: 0;



    background: rgba(0, 0, 0, 0.65);



    color: #fff;



    padding: 12px 14px;



    margin: 0;



    font-size: 14px;



    font-weight: 600;



}







/* ========== Đăng kí nhận tư vấn ====================== */



.full-row.full-register-consultation {



    width: 100vw;



    position: relative;



    left: 50%;



    transform: translateX(-50%);



    background: #f5f5f5;



    margin: 0;



    padding: 0;



    box-sizing: border-box;



    overflow: hidden;



}







/* Khối service chính */



.register-consultation {



    position: relative;



    width: 100%;



    min-height: 500px;



}







/* Ảnh nền full */



.register-consultation-img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    position: absolute;



    top: 0;



    left: 0;



    z-index: 1;



}







.register-consultation::before {



    content: "";



    position: absolute;



    inset: 0;



    background: rgba(0, 0, 0, 0.05);
    /* Nền đen mờ 45% - chữ sẽ nổi hơn */



    z-index: 2;



}







/* Nội dung đè lên ảnh + overlay */



.content-register-consultation {



    position: relative;



    z-index: 3;
    /* Cao nhất */



    width: 100%;



    height: 100%;



    display: flex;



    align-items: center;



    justify-content: center;



    text-align: center;



    color: #fff;



}







/* .register-consultation-content {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 30px;



    padding: 20px 0;



    align-items: start; 



} */









.form-register-consultation h2 {



    font-size: 43px;



    color: #FFF;



    font-weight: bold;



    text-transform: uppercase;



    margin-bottom: 10px;



}







.register-consultation-image {



    height: 100%;



    display: flex;



}







.register-consultation-image img {



    width: 100%;



    height: 75%;



    object-fit: cover;



}







.contact-form-wrapper {

    height: fit-content;



    max-width: 620px;

    margin: 0 auto;
    /* căn giữa form */

    border-radius: 16px;

}







.form-register-consultation p {



    font-size: 16px;



    color: #F1F1F1;



    margin-bottom: 20px;



}







.register-consultation-image {



    display: flex;



    text-align: center;



    justify-content: center;



    align-items: center;



}





.contact-form-container {



    max-width: 600px;



    margin: 40px auto;



    padding: 30px;



    background: #ffffff;



    border-radius: 12px;



    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);



}







.contact-form {



    display: flex;



    flex-direction: column;



    gap: 20px;



}







.form-group {



    display: flex;



    flex-direction: column;



    margin-top: 20px;



}





.contact .form-group label{
     color: #000 !important;
}

.form-group label {



    font-weight: bold;



    margin-bottom: 8px;



    color: #FFF;



    font-size: 14.4px;



    text-align: left;



}







.form-group input,



.form-group textarea {



    padding: 12px 16px;



    border: 1px solid #ddd;



    font-size: 16px;



    transition: border-color 0.3s ease;




}







.form-group input:focus,



.form-group textarea:focus {



    outline: none;



    border-color: #007bff;



    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);



}







.submit-btn {



    background: #334793;



    color: white;



    border: none;



    padding: 14px;



    font-size: 18px;



    font-weight: bold;



    /* border-radius: 8px; */



    cursor: pointer;



    transition: background 0.3s ease;



    display: block;



    margin: 0;



}







.submit-btn:hover {



    background: #0056b3;



}











/* Style nút next/prev */



.swiper-button-next,



.swiper-button-prev {



    width: 50px !important;



    height: 50px !important;



    background: rgba(0, 0, 0, 0.5) !important;
    /* Nền mờ */



    border-radius: 50% !important;



    color: white !important;



    display: flex !important;



    align-items: center !important;



    justify-content: center !important;



    font-size: 24px !important;



    transition: background 0.3s ease, transform 0.3s ease !important;



}







/* Hover */



.swiper-button-next:hover,



.swiper-button-prev:hover {



    background: rgba(0, 0, 0, 0.8) !important;



    transform: scale(1.1) !important;



}







/* Vị trí nút (cách cạnh slider) */



.swiper-button-next {



    right: 20px !important;



}







.swiper-button-prev {



    left: 20px !important;



}















.home-box-kh-thanthiet .swiper-container,



.home-box-kh-thanthiet .swiper-wrapper {



    width: 100% !important;



    margin: 0 !important;



    padding: 0 !important;



}







/* Slide mỗi cái full kích thước */



.home-box-kh-thanthiet .swiper-slide {



    width: auto !important;
    /* Cho phép slide tự co giãn */



    display: flex;



    justify-content: center;



    align-items: center;



}







@media (max-width: 768px) {







    /* ===== TEXT CONTACT HOME ===== */



    .text-contact-home {



        font-size: 16px;



        gap: 10px;



    }







    .text-contact-home p {



        font-size: 16px;



    }







    .text-contact-home a {



        font-size: 14px;



        padding: 8px 12px;



    }







    .phone-contact-home-wrapper {



        gap: 10px;



    }







    .contact-home-item {



        width: 100%;



        padding: 10px;



    }







    /* ===== INTRODUCE ===== */



    .content-introduce {

        display: flex;



        flex-direction: column;



    }







    .title-introduce h2 {



        font-size: 26px;



    }







    /* ===== SERVICE ===== */



    .service {

        max-width: 500px;

    }



    .service-wrapper {



        grid-template-columns: 1fr;



        gap: 10px;



    }







    .service-slide img {



        height: 240px;



    }







    .content-service h2 {



        font-size: 24px;



    }







    .content-service {



        padding: 0;



    }







    .content-service {



        display: block;



        justify-content: center;



        align-items: center;



        text-align: center;



    }







    .title-featured-projects h2 {



        font-size: 28px;



    }







    .service-img {



        width: 100%;



        height: 60%;



        object-fit: cover;



        position: absolute;



        top: 0;



        left: 0;



        z-index: 1;



    }







    .service::before {



        background: none;



    }







    /* ===== CUSTOMER REVIEWS ===== */



    .customer-reviews-wrapper {



        grid-template-columns: 1fr;



        gap: 15px;



    }







    /* ===== CHOOSE OPTION ===== */



    .choose-option-wrapper {



        grid-template-columns: 1fr;



        gap: 60px;



    }







    .choose-option-item {



        height: auto;



    }







    .choose-option-content {



        padding: 35px 20px 40px;



    }







    /* ===== REPUTATION ===== */



    .reputation-wrapper {



        grid-template-columns: repeat(2, 1fr);



        gap: 10px;



    }







    .reputation-item p {



        font-size: 22px;



    }







    .reputation-item span {



        font-size: 16px;



    }







    /* ===== FOCUS ===== */



    .focus-wrapper {



        grid-template-columns: 1fr;



    }







    .focus-item-left span {



        font-size: 14px;



        bottom: 90px;



    }







    .focus-item-left p {



        font-size: 16px;



    }







    .focus-item-right {



        grid-template-rows: repeat(3, auto);



    }







    /* ===== REGISTER CONSULTATION ===== */



    .register-consultation-content {



        grid-template-columns: 1fr;



    }







    .form-register-consultation h2 {



        font-size: 30px;



    }







    .contact-form-container {



        padding: 20px;



    }







    /* ===== SWIPER BUTTON ===== */



    .swiper-button-next,



    .swiper-button-prev {



        width: 40px !important;



        height: 40px !important;



        font-size: 18px !important;



    }







}







.choose-option-item {



    position: relative;



    border-radius: 20px;



    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);



    display: flex;



    flex-direction: column;



    margin-top: 60px;



    height: auto;



}







.choose-option-content {



    padding: 35px 15px 50px;



    background: rgb(244, 244, 244);



    border-bottom: 4px solid #F44336;



    border-radius: 20px;



    position: relative;



    z-index: 2;



}







@media (max-width: 768px) {



    .choose-option-content {



        padding: 90px 20px 40px;
        /* FIX QUAN TRỌNG */



    }



}







.form-group label {



    display: flex;



    flex-direction: column;



    gap: 8px;



    width: 100%;



}



.wpcf7-form label {



    display: flex;



    flex-direction: column;



    gap: 8px;



}







.focus-wrapper {



    min-height: unset;
    /* bỏ min-height cũ */



}







/* Ảnh lớn bên trái */



.focus-item-left {



    height: 0%;
    /* chỉnh số này cho đẹp */



}







/* Ảnh nhỏ bên phải */



.focus-item-right-content {



    height: calc((380px - 40px) / 3);
    /* 3 ảnh + gap 20px */



}







@media (max-width: 768px) {

    .slogons {
        font-size: 37px !important;

    }

    .title-logo h2 {
        font-size: 32px;
    }

    .focus-item-left {



        height: 260px;



    }







    .focus-item-right-content {



        height: 160px;



    }



}



html,
body {



    max-width: 100%;



    overflow-x: hidden;



}