/* ==========================================
   Home Page Styles - Segment 2
   Services Section & Featured Projects Section
   ========================================== */

/* ==========================================
   SECTION 1: HOME BANNER + WELCOME INFO
   ========================================== */

/* ---------- 1A: HERO SLIDER ---------- */
.home_banner_area {
    position: relative;
    margin-top: 20px;
}

.home_slider {
    position: relative;
    width: 100%;
    height: 290px;
    overflow: hidden;
    background-color: #fff;
    padding: 0;
}

.slider_track {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider_page {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 0;
}

.slider_page.active {
    opacity: 1;
    z-index: 1;
}

.slider_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    height: 100%;
}

.slider_grid_item {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: brightness(1.15) contrast(1.1) saturate(1.05);
}

/* Overlay mờ toàn bộ ảnh slider - giảm độ sáng xuống 10% */
.slider_grid_item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.05);
    z-index: 1;
    pointer-events: none;
}

/* Overlay protection layer - bảo vệ nội dung */
.slider_grid_item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
    pointer-events: none;
}

.slider_grid_item {
    position: relative;
    overflow: hidden;
}

/* Cursor for drag */
.home_slider {
    cursor: grab;
}

.home_slider.dragging {
    cursor: grabbing;
}

/* Pagination Bullets */
.slider_pagination {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.slider_bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.slider_bullet.active {
    background: #FFFFFF;
}

.slider_bullet:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* ---------- 1B: PROMO BOX ITEMS ---------- */
.promo_boxes_wrap {
    position: relative;
    z-index: 5;
    margin-top: -130px;
}

.about_promo_box {
    display: flex;
    align-items: stretch;
}

.promo_box_item {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 35px 30px;
}

.promo_box_item i,
.promo_box_icon {
    font-size: 50px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 4px;
}

.promo_box_icon svg {
    display: block;
}

.promo_box_body h3 {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 22px;
    font-weight: 700;
    font-style: normal;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.promo_box_body p {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.7;
    margin: 0;
}

/* Box vàng */
.box_one {
    background: #3363DD;
    color: #FFFFFF;
}

.box_one .promo_box_icon,
.box_one .promo_box_icon svg,
.box_one h3,
.box_one p {
    color: #FFFFFF;
    stroke: #FFFFFF;
}

/* Box đen */
.box_two {
    background: #0F1A40;
}

.box_two .promo_box_icon svg,
.box_two h3 {
    color: #FFFFFF;
    stroke: #FFFFFF;
}

.box_two p {
    color: #A8B8D8;
}

/* Box xám */
.box_three {
    background: #1E2D5A;
}

.box_three .promo_box_icon svg,
.box_three h3 {
    color: #FFFFFF;
    stroke: #FFFFFF;
}

.box_three p {
    color: #A8B8D8;
}

/* ---------- 1C: WELCOME INFO ---------- */
.welcome_area {
    background: #fff;
    padding: 50px 0 45px;
    position: relative;
    overflow: hidden;
}

.welcome_info {
    position: relative;
}

/* Ảnh overlay trong suốt */
.wel_bg {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    max-width: 500px;
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
}

.welcome_text {
    position: relative;
    z-index: 1;
    max-width: 100%;
    padding-right: 30px;
}

.welcome_sub {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    color: #888;
    margin: 0 0 15px 0;
}

.welcome_title {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 40px;
    font-weight: 700;
    font-style: normal;
    color: #242424;
    line-height: 1.2;
    margin: 0 0 25px 0;
}

.welcome_desc {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    color: #333333;
    line-height: 1.8;
    margin: 0 0 25px 0;
    text-align: justify;
    word-spacing: 0.05em;
    hyphens: auto;
}

.welcome_ceo {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    color: #242424;
    margin: 0 0 20px 0;
}

.welcome_ceo a {
    font-weight: 400;
    color: #242424;
    text-decoration: none;
}

.sign_btn {
    display: inline-block;
}

.sign_btn img {
    max-width: 180px;
    height: auto;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1199px) {
    .slider_caption {
        right: 5%;
        max-width: 580px;
    }

    .slider_line1,
    .slider_line2,
    .slider_highlight {
        font-size: 40px;
        line-height: 55px;
    }
}

@media (max-width: 991px) {
    .home_slider {
        height: 190px;
        padding: 0 20px;
    }

    .slider_grid {
        gap: 15px;
    }

    .slider_caption {
        right: 50%;
        transform: translate(50%, -50%);
        text-align: center;
        max-width: 90%;
    }

    .slider_line1,
    .slider_line2,
    .slider_highlight {
        font-size: 32px;
        line-height: 44px;
    }

    .slider_desc {
        font-size: 16px;
    }

    .about_promo_box {
        flex-direction: column;
    }

    .promo_boxes_wrap {
        margin-top: 0;
    }

    .wel_bg {
        position: relative;
        width: 100%;
        max-width: 100%;
        transform: none;
        top: auto;
        right: auto;
        margin-top: 40px;
        opacity: 0.6;
    }

    .welcome_title {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    .home_slider {
        height: auto;
        padding: 0;
    }

    .slider_track {
        height: auto;
    }

    .slider_page {
        position: relative;
        inset: auto;
        opacity: 0;
        height: 0;
        overflow: hidden;
        transition: opacity 0.8s ease;
    }

    .slider_page.active {
        opacity: 1;
        height: auto;
        overflow: visible;
    }

    .slider_grid {
        grid-template-columns: 1fr;
        gap: 0;
        height: auto;
    }

    .slider_grid_item {
        height: 200px;
        width: 100%;
    }

    .home_banner_area {
        margin-top: 10px;
    }

    .slider_line1,
    .slider_line2,
    .slider_highlight {
        font-size: 26px;
        line-height: 36px;
    }

    .slider_desc {
        font-size: 14px;
    }

    .slider_btn {
        font-size: 14px;
        padding: 10px 28px;
    }

    .welcome_title {
        font-size: 26px;
    }

    .welcome_text {
        padding-right: 15px;
    }

    .welcome_desc {
        font-size: 14px;
        text-align: justify;
    }

    .promo_box_item {
        padding: 25px 20px;
    }

    .welcome_area {
        padding: 25px 0 20px;
    }
}


/* ==========================================
   SECTION 2: SERVICES & FEATURED PROJECTS
   ========================================== */

/* Common Section Styles */
.sec_gap {
    padding: 60px 0;
}

.section_title {
    text-align: center;
    margin-bottom: 55px;
}

.section_title h2 {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 32px;
    font-weight: 700;
    font-style: normal;
    color: #1749c9;
    margin-bottom: 15px;
}

.section_title .title_br {
    display: block;
    width: 60px;
    height: 3px;
    background: #1749c9;
    margin: 20px 0;
}

.section_title p {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    color: #1749c9;
    line-height: 26px;
    max-width: 600px;
    margin: 7px auto 0;
}

/* Font utilities */
.f_600 {
    font-weight: 600;
}

.f_500 {
    font-weight: 500;
}

.f_700 {
    font-weight: 700;
}

.f_size_32 {
    font-size: 32px;
}

.f_size_20 {
    font-size: 20px;
}

.title_color {
    color: #3363DD;
}

.color_w {
    color: #fff;
}

.f_play {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-weight: 700;
    font-style: normal;
}

.mb_55 {
    margin-bottom: 30px;
}

.mt_7 {
    margin-top: 7px;
}

.mb-50 {
    margin-bottom: 10px;
}

.mb-30 {
    margin-bottom: 30px;
}

/* ==========================================
   SERVICES CAROUSEL
   ========================================== */
.services_carousel_container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.services_carousel_wrapper {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.services_carousel_track {
    display: flex;
    transition: transform 0.3s ease;
    width: 100%;
}

.services_carousel_page {
    flex: 0 0 100%;
    min-width: 100%;
    width: 100%;
}

.services_carousel_page .row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

.services_carousel_page .col-lg-3,
.services_carousel_page .col-md-6,
.services_carousel_page .col-sm-6 {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    width: 100% !important;
}

.services_carousel_btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #3363DD;
    cursor: pointer;
    padding: 10px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.services_carousel_btn:hover {
    color: #1a3fa8;
    transform: scale(1.2);
}

.services_carousel_pagination {
    text-align: center;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.services_carousel_dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #3363DD;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.services_carousel_dot.active {
    background: #3363DD;
}

.services_carousel_dot:hover {
    background: rgba(51, 99, 221, 0.5);
}

/* ==========================================
   SERVICES SECTION
   ========================================== */
.service_area {
    background: #efefef;
    padding: 60px 0;
}

/* Title vẫn trong container, grid ảnh tràn cạnh */
.service_area .container {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.service_area > .container {
    padding: 0 40px;
}

.service_area .section_title {
    text-align: left;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

.service_area .section_title p {
    margin: 7px 0 0;
    max-width: 600px;
}

/* Full-width service grid — tràn viền, 4 cột */
.service_area .row.mb-50 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0 !important;
    padding: 0;
    align-items: stretch;
}

.service_area .row.mb-50 .col-lg-4,
.service_area .row.mb-50 .col-md-6 {
    padding: 0;
    max-width: 100%;
    flex: none;
    width: 100%;
}

.service_item {
    position: relative;
    margin-bottom: 0;
    transition: all 0.3s ease;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Text info bên dưới ảnh có padding riêng */
.service_item h3,
.service_item .bottom_br {
    padding-left: 20px;
    padding-right: 20px;
}

.service_item h3 {
    padding-top: 14px;
    font-size: 17px;
}

.service_img {
    position: relative;
    overflow: hidden;
    border-radius: 0;
}

.service_img img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: all 0.5s ease;
    border-radius: 0;
}

.service_item:hover .service_img img {
    transform: scale(1.05);
}

.hover_content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 63, 191, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
    /* Không bị ảnh hưởng bởi flex parent */
    flex: none;
    width: auto;
    height: auto;
}

.service_item:hover .hover_content {
    opacity: 1;
}

.read_more {
    display: inline-block;
    flex: none;
    padding: 12px 30px;
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.read_more:hover {
    background: rgba(26, 63, 191, 0.85);
    color: #fff;
    text-decoration: none;
}

.service_item h3 {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    color: #333;
    margin-top: 14px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 1.4;
    flex: 1;
    /* min-height đảm bảo đủ chỗ cho tên 2 dòng */
    min-height: 48px;
}

.service_item h3:hover {
    color: #3363DD;
}

.service_item a {
    text-decoration: none;
}

/* Chỉ link bọc h3 + bottom_br mới flex — không phải read_more */
.service_item > a:not(.read_more) {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bottom_br {
    display: block;
    width: 40px;
    height: 2px;
    background: #3363DD;
    margin-top: auto;
    margin-bottom: 18px;
    padding-left: 20px;
    /* dùng margin-left thay padding vì display block */
    margin-left: 20px;
    transition: all 0.3s ease;
}

.service_item:hover .bottom_br {
    width: 60px;
}

/* ==========================================
   FEATURED PROJECTS SECTION
   ========================================== */
.featured_area {
    background: #3363DD;
    padding: 60px 0 40px;
}

/* Container cho title dùng full-width padding */
.featured_area > .container {
    max-width: 100%;
    padding-left: 40px;
    padding-right: 40px;
}

/* Title căn trái trong max-width */
.featured_area > .container .section_title {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.featured_area .section_title {
    text-align: left;
}

.featured_area .section_title .title_br {
    margin: 20px 0;
    background: #FFFFFF;
}

.featured_area .section_title p {
    color: #fff;
    margin: 7px 0 0;
}

.featured_area .section_title h2 {
    color: #fff;
}

.featured_project {
    width: 100%;
    padding: 0 50px;
}

.featured_project .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    gap: 20px;
    justify-content: center;
}

.f_width {
    width: calc(20% - 16px);
    min-width: 200px;
    flex: 0 0 auto;
}

.featured_pr_item {
    position: relative;
    overflow: hidden;
    height: 350px;
}

.featured_pr_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.featured_pr_item:hover img {
    transform: scale(1.1);
}

.featured_pr_item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
}

.featured_pr_item:hover .overlay {
    background: rgba(0, 0, 0, 0.4);
}

.featured_pr_item p {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #3363DD;
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    margin: 0;
    padding: 15px 0;
    z-index: 2;
    transition: all 0.4s ease;
    background: #FFFFFF;
    text-align: center;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    letter-spacing: 0;
    word-spacing: 0;
}

.featured_pr_item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* ==========================================
   PROJECTS CAROUSEL (clone from awards.css)
   ========================================== */
.projects_carousel_wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.projects_carousel_wrapper:active {
    cursor: grabbing;
}

@media (max-width: 767px) {
    .projects_carousel_wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}

.projects_carousel_track {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px 20px;
    will-change: transform;
}

.projects_slide {
    flex-shrink: 0;
    width: 20%;
    min-width: 200px;
}

.projects_slide .featured_pr_item {
    height: 380px;
}

/* Responsive for carousel */
@media (max-width: 1199px) {
    .projects_slide {
        width: calc(25% - 15px);
    }
}

@media (max-width: 991px) {
    .projects_slide {
        width: calc(33.333% - 14px);
        min-width: 180px;
    }
    .projects_slide .featured_pr_item {
        height: 300px;
    }
}

@media (max-width: 767px) {
    .projects_carousel_track {
        scroll-snap-type: x mandatory;
    }

    .projects_slide {
        width: 100vw;
        max-width: 100%;
        min-width: 100%;
        scroll-snap-align: start;
        scroll-behavior: smooth;
    }
    
    .projects_slide .featured_pr_item {
        height: 400px;
    }
}

@media (max-width: 575px) {
    .projects_slide {
        width: 100vw;
        max-width: 100%;
    }
    
    .projects_slide .featured_pr_item {
        height: 350px;
    }
}

/* ==========================================
   QUOTE/CTA SECTION
   ========================================== */
.quote_area {
    background: #3363DD;
    padding: 80px 0;
}

.quote_area .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quote_area h2 {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 28px;
    font-weight: 700;
    font-style: normal;
    color: #FFFFFF;
    line-height: 1.4;
    margin: 0;
}

.quote_area h2 span {
    color: #A8C8FF;
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-style: normal;
    font-weight: 700;
}

.quote_button {
    flex-shrink: 0;
    margin-left: 30px;
}

.quote_btn {
    background: #FFFFFF;
    color: #3363DD;
    padding: 15px 35px;
    font-size: 14px;
    border-radius: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.quote_btn:hover {
    background: #3363DD;
    color: #fff;
}

/* ==========================================
   SECTION 3: TESTIMONIALS, LATEST NEWS, PROMO, CTA
   ========================================== */

/* ---- 3A: TESTIMONIALS ---- */
/* Dùng lại class từ testimonials.css — chỉ override những gì khác biệt trên home */
.testimonial_area {
    background: #EFEFEF;
    padding: 100px 0;
    overflow: hidden;
}

.testimonial_area .section_title .title_br {
    display: block;
    margin: 14px auto 0;
}

.mb_3 {
    margin-bottom: 3px;
}

/* Grid 3 cột — giống testimonials.css */
.testimonial_inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Wrapper item — cần margin-top để ảnh nhô lên */
.testimonial_item_width {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

/* Thẻ trắng — giống chính xác testimonials.css */
.testimonial_item {
    background: #FFFFFF;
    width: 100%;
    min-height: 380px;
    padding: 50px 24px 28px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: box-shadow .25s ease, transform .25s ease;
}

.testimonial_item:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

/* Avatar hình tròn nhô lên trên thẻ */
.testimonial_img {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    top: -47px;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

/* Tên — đen đậm */
.testimonial_item h6 {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    color: #111;
    margin: 0 0 4px;
    line-height: 1.4;
}

/* Địa điểm — nghiêng, nhạt */
.country_name {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: #A0A0A0;
    margin-bottom: 16px;
    line-height: 1.4;
}

.country_name span + span::before {
    content: ' / ';
}

/* Nội dung — chừa chỗ dưới cho q_icon */
.testimonial_item p {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    color: #0F1A40;
    line-height: 1.75;
    flex: 1;
    margin-bottom: 16px;
}

/* Icon quote — dùng đúng CSS từ testimonials.css */
.q_icon {
    display: block;
    font-size: 36px;
    color: #3363DD;
    line-height: 1;
    margin-top: auto;
}

.q_icon::before {
    content: '\201C\201C';
    font-family: Georgia, serif;
    font-size: 40px;
    color: #3363DD;
    font-style: normal;
}

/* ---- 3B: LATEST NEWS ---- */
.lt_news_area {
    background: #f0f2f5;
}

/* Row flex full-width — không dùng Bootstrap row margin */
.lt_news_row {
    display: flex !important;
    flex-wrap: nowrap;
    margin: 0 !important;
}

/* Cột trái: 45% width, ảnh nền + overlay tối */
.lt_news_left {
    position: relative;
    width: 45%;
    flex: 0 0 45%;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    align-items: center;
}

.lt_news_left .bg_img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Overlay tối */
.lt_news_left::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 30, 0.80);
    z-index: 1;
}

/* Nội dung bên trái:
   padding-left = khoảng cách từ mép trái cột đến cạnh trái container
   = (100vw - 1140px) / 2 + 15px
   Dùng max() để không âm trên màn nhỏ */
.lt_news_content {
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    padding-top: 60px;
    padding-bottom: 60px;
    padding-right: 60px;
    padding-left: max(15px, calc((100vw - 1140px) / 2 + 15px));
    text-align: left;
}

/* Tiêu đề "Latest News" */
.lt_news_content h2 {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 32px;
    font-weight: 700;
    font-style: normal;
    color: #fff;
    margin: 0;
    line-height: 1.25;
    display: inline;
}

/* Gạch ngang sau tiêu đề — inline-block sau h2 */
.lt_news_content .title_br {
    display: block;
    width: 50px;
    height: 3px;
    background: #3363DD;
    margin: 18px 0 24px;
}

/* Đoạn văn mô tả */
.lt_news_content p {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    color: rgba(255,255,255,0.85);
    line-height: 1.85;
    margin: 0 0 32px;
}

/* Nút More News — bo tròn, xanh dương */
.btn_blue {
    display: inline-block;
    padding: 12px 36px;
    background: #3363DD;
    color: #fff;
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background 0.25s ease;
    border: none;
    cursor: pointer;
}

.btn_blue:hover {
    background: #1530A0;
    color: #fff;
    text-decoration: none;
}

/* Cột phải: flex 1, nền trắng */
.lt_news_right {
    flex: 1;
    background: #fff;
    padding: 0;
}

/* Nội dung cột phải căn thẳng với container bên phải */
.lt_news_inner {
    /* max-width = 55% của 1140px (container) = 627px
       margin-left: 0 để nội dung bắt đầu từ trái cột
       padding-right dùng CSS clamp để thẳng với container */
    width: 100%;
    box-sizing: border-box;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 60px;
    /* padding-right = khoảng cách từ mép phải cột đến cạnh phải container
       = (100vw - 1140px) / 2 + 15px
       Dùng max() để không âm trên màn nhỏ */
    padding-right: max(15px, calc((100vw - 1140px) / 2 + 15px));
}

/* Mỗi news item */
.lt_news_item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid #eee;
}

.lt_news_item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Ảnh vuông */
.lt_news_img_wrap {
    flex-shrink: 0;
    display: block;
    width: 90px;
    height: 90px;
    overflow: hidden;
}

.lt_news_img_wrap img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.lt_news_img_wrap:hover img {
    transform: scale(1.05);
}

/* Nội dung bên phải ảnh */
.lt_news_item .media-body {
    flex: 1;
    min-width: 0;
}

.lt_news_item .media-body h4 {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    color: #3363DD;
    margin: 0 0 6px;
    line-height: 1.4;
}

.lt_news_item .media-body h4 a {
    color: #3363DD;
    text-decoration: none;
    transition: color 0.2s;
}

.lt_news_item .media-body h4 a:hover {
    color: #3363DD;
}

.lt_news_item .media-body p {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: #666;
    line-height: 1.65;
    margin: 0 0 8px;
}

/* Meta: date + author */
.blog-meta {
    display: flex;
    gap: 16px;
    align-items: center;
}

.blog-meta a {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    color: #999;
    text-decoration: none;
    transition: color 0.2s;
}

.blog-meta a:hover {
    color: #3363DD;
}

/* Responsive */
@media (max-width: 991px) {
    .lt_news_row {
        flex-direction: column !important;
    }

    .lt_news_left {
        width: 100%;
        flex: none;
        min-height: 360px;
    }

    .lt_news_right {
        width: 100%;
    }

    .lt_news_content {
        padding: 50px 30px;
    }

    .lt_news_inner {
        padding: 30px 24px;
    }
}

@media (max-width: 767px) {
    .lt_news_content {
        padding: 40px 20px;
    }

    .lt_news_content h2 {
        font-size: 26px;
    }

    .lt_news_inner {
        padding: 24px 16px;
    }
}

/* ---- 3C: PROMO BANNER ---- */
.promo_area {
    position: relative;
    background-color: #3363DD;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Padding đủ lớn: trên + dưới phải chứa nội dung + phần dư cho CTA đè */
    padding-top: 70px;
    padding-bottom: 180px; /* phần dư để CTA đè lên mà không che nội dung */
    overflow: hidden;
}

.promo_overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 63, 191, 0.88);
    z-index: 0;
}

.promo_area .container {
    position: relative;
    z-index: 1;
}

/* Flex container — 2 cột ngang, căn giữa dọc */
.promo_info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: 100%;
}

/* Cột trái — chiếm ~50%, text in đậm */
.promo_col_left {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 40px;
}

.promo_col_left h2 {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 22px;
    font-weight: 700;
    font-style: normal;
    color: #fff;
    line-height: 1.55;
    margin: 0;
}

/* Từ "automotive" — nghiêng, không đậm */
.promo_italic {
    font-weight: 400;
    font-style: normal;
}

/* Đường kẻ dọc trắng chia đôi */
.promo_divider_v {
    flex-shrink: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.4);
    align-self: stretch;
    min-height: 80px;
    margin: 0 40px;
}

/* Cột phải — flex 1, text thường */
.promo_col_right {
    flex: 1;
    padding-left: 0;
}

.promo_col_right .p_text {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.85;
    margin: 0;
}

/* ---- 3D: CTA CONTACT SECTION ---- */
.contact_sec_area {
    background: #fff;
    /* padding-bottom đủ để không bị cắt dưới */
    padding-bottom: 100px;
}

/* Khung trắng đè lên promo:
   - margin-top âm = kéo lên đè vào phần padding-bottom của promo
   - Giá trị = padding-bottom promo - khoảng trắng muốn chừa lại phía trên khung
   - Mẫu: 3 phần đè xanh / 7 phần đè trắng → margin-top = -(padding-bottom - gap_trên)
*/
.contact_inner.m_top {
    background: #3363DD;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    padding: 50px 40px;
    margin-top: -150px;   /* kéo lên 150px vào vùng promo padding-bottom=180px → còn 30px promo hiển thị phía trên khung */
    position: relative;
    z-index: 10;
}

/* Logo Mtech trong CTA */
.c_logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 30px;
}

.c_logo_img {
    width: 50px;
    height: auto;
}

.c_logo_text {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 22px;
    font-weight: 700;
    font-style: normal;
    color: #FFFFFF;
    letter-spacing: 1px;
}

/* Contact info items trong CTA */
.contact_info_box .contact_info_item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eee;
}

.contact_info_box .contact_info_item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.contact_info_box .icon {
    width: 46px;
    height: 46px;
    border: 2px solid #3363DD;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact_info_box .svg-icon {
    width: 20px;
    height: 20px;
    filter: invert(27%) sepia(89%) saturate(1200%) hue-rotate(210deg) brightness(90%) contrast(95%);
}

.contact_info_body a {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
    transition: color 0.2s;
}

.contact_info_body a:hover {
    color: #3363DD;
}

.contact_info_body p {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.5;
}

/* Form trong CTA */
.contact_us_form .section_title {
    text-align: left;
}

.contact_us_form .section_title h2 {
    color: #FFFFFF;
}

.mb_30 {
    margin-bottom: 30px;
}

.contact_us_form .form-control {
    height: 50px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    padding: 10px 18px;
    font-size: 14px;
    color: #333;
    background: #fafafa;
    transition: border-color 0.25s;
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-style: normal;
}

.contact_us_form .form-control:focus {
    border-color: #3363DD;
    background: #fff;
    box-shadow: none;
    outline: none;
}

.contact_us_form textarea.form-control {
    height: auto;
    min-height: 140px;
    resize: vertical;
}

.submit_btn {
    padding: 13px 38px;
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    border-radius: 30px;
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

/* ==========================================
   RESPONSIVE — SECTION 3
   ========================================== */
@media (max-width: 991px) {
    .testimonial_inner {
        flex-direction: column;
    }

    .lt_news_area .row {
        flex-direction: column;
    }

    .lt_news_left {
        width: 100%;
        flex: none;
        min-height: 320px;
    }

    .lt_news_right {
        width: 100%;
    }

    .promo_info {
        flex-direction: column;
        gap: 20px;
    }

    .promo_col_left,
    .promo_col_right {
        flex: none;
        max-width: 100%;
        width: 100%;
        padding-right: 0;
    }

    .promo_divider_v {
        display: none;
    }

    .promo_area {
        padding-top: 50px;
        padding-bottom: 140px;
    }

    .contact_inner.m_top {
        margin-top: -110px;
        padding: 40px 24px;
    }
}

@media (max-width: 767px) {
    .testimonial_area {
        padding: 60px 0;
    }

    .lt_news_content {
        padding: 40px 24px;
    }

    .lt_news_inner {
        padding: 30px 20px;
    }

    .promo_area {
        padding: 50px 0;
    }

    .contact_inner.m_top {
        margin-top: -40px;
        padding: 30px 16px;
    }

    .c_logo_text {
        font-size: 18px;
    }
}


/* ==========================================
   RESPONSIVE STYLES
   ========================================== */
@media (max-width: 1199px) {
    .f_width {
        width: 33.333%;
    }
    
    .featured_pr_item {
        height: 300px;
    }

    .service_area .row.mb-50 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 991px) {
    .sec_gap {
        padding: 50px 0;
    }
    
    .service_img img {
        height: 260px;
    }

    .service_area .row.mb-50 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .f_width {
        width: 50%;
    }

    .featured_area {
        padding: 50px 0 30px;
    }

    .featured_area > .container,
    .service_area .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .projects_slide {
        width: calc(33.333% - 8px);
        min-width: 180px;
    }
    .projects_slide .featured_pr_item {
        height: 300px;
    }

    .quote_area .container {
        flex-direction: column;
        text-align: center;
    }
    
    .quote_area h2 {
        margin-bottom: 30px;
    }
    
    .quote_button {
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .sec_gap {
        padding: 35px 0;
    }
    
    .section_title h2 {
        font-size: 28px;
    }
    
    .service_img img {
        height: 200px;
    }

    .service_area .row.mb-50 {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .f_width {
        width: 100%;
    }
    
    .featured_pr_item {
        height: 280px;
    }

    .service_area .container,
    .featured_area > .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .quote_area {
        padding: 50px 0;
    }
    
    .quote_area h2 {
        font-size: 22px;
    }
}

@media (max-width: 575px) {
    .section_title h2 {
        font-size: 24px;
    }
    
    .featured_pr_item p {
        font-size: 16px;
    }
}

/* ============================================
   Client Logo Area — Đối tác chiến lược
   Styles moved to assets/css/client.logos.css
   ============================================ */

/* ============================================
   Hero Slider Lightbox — Click ảnh phóng to
   ============================================ */
.slider-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer;
}

.slider-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.slider-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
    border-radius: 4px;
    cursor: default;
    pointer-events: none;
}

.slider-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 32px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s, border-color 0.2s;
    z-index: 100000;
    font-family: Arial, sans-serif;
}

.slider-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.6);
}


/* ==========================================
   SERVICES CAROUSEL (Pagination & Chevrons)
   ========================================== */

.services_carousel_container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.services_carousel_wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.services_carousel_track {
    display: grid;
    grid-template-columns: 1fr;
    transition: transform 0.5s ease;
}

.services_carousel_page {
    width: 100%;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.services_carousel_page.active {
    position: relative;
    opacity: 1;
    visibility: visible;
}

/* Grid layout cho service items — 4 cột đều nhau */
.services_carousel_page .row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

.services_carousel_page .col-lg-3,
.services_carousel_page .col-md-6,
.services_carousel_page .col-sm-6 {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    width: 100% !important;
}

/* Chevron Buttons */
.services_carousel_btn {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border: 2px solid #3363DD;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #3363DD;
    font-size: 20px;
    padding: 0;
}

.services_carousel_btn:hover {
    background: #3363DD;
    color: #fff;
}

.services_carousel_btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.services_carousel_prev,
.services_carousel_next {
    order: -1, 1;
}

.services_carousel_next {
    order: 1;
}

.services_carousel_prev {
    order: -1;
}

/* Pagination Dots */
.services_carousel_pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.services_carousel_dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #3363DD;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.services_carousel_dot.active {
    background: #3363DD;
}

.services_carousel_dot:hover {
    background: rgba(51, 99, 221, 0.5);
}

/* Responsive for Services Carousel */
@media (max-width: 1199px) {
    .services_carousel_container {
        gap: 15px;
    }
    
    .services_carousel_btn {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
}

@media (max-width: 991px) {
    .services_carousel_container {
        gap: 10px;
    }
    
    .services_carousel_btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .service_area .row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .services_carousel_page .row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 767px) {
    .services_carousel_container {
        gap: 8px;
    }
    
    .services_carousel_btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
        border-width: 1.5px;
    }
    
    .service_area .row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .services_carousel_page .row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

@media (max-width: 575px) {
    .services_carousel_btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    
    .service_area .row {
        grid-template-columns: 1fr !important;
    }
    
    .services_carousel_page .row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .services_carousel_pagination {
        gap: 8px;
    }
    
    .services_carousel_dot {
        width: 10px;
        height: 10px;
    }
}