.elementor-4234 .elementor-element.elementor-element-05939c5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4234 .elementor-element.elementor-element-5fa3f58{--display:flex;}.elementor-4234 .elementor-element.elementor-element-c281e5e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4234 .elementor-element.elementor-element-c281e5e:not(.elementor-motion-effects-element-type-background), .elementor-4234 .elementor-element.elementor-element-c281e5e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F6F8;}.elementor-4234 .elementor-element.elementor-element-a45796e{--display:flex;}.elementor-4234 .elementor-element.elementor-element-1053436{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4234 .elementor-element.elementor-element-4ef3b60{--display:flex;}.elementor-4234 .elementor-element.elementor-element-f1b29ca{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4234 .elementor-element.elementor-element-f1b29ca:not(.elementor-motion-effects-element-type-background), .elementor-4234 .elementor-element.elementor-element-f1b29ca > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F6F8;}.elementor-4234 .elementor-element.elementor-element-b8d17a9{--display:flex;}.elementor-4234 .elementor-element.elementor-element-72de50d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4234 .elementor-element.elementor-element-22e0176{--display:flex;}.elementor-4234 .elementor-element.elementor-element-0de1ab1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4234 .elementor-element.elementor-element-0de1ab1:not(.elementor-motion-effects-element-type-background), .elementor-4234 .elementor-element.elementor-element-0de1ab1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F6F8;}.elementor-4234 .elementor-element.elementor-element-83b5c90{--display:flex;}.elementor-4234 .elementor-element.elementor-element-886471f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4234 .elementor-element.elementor-element-741ca2f{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-9f1c6c4 *//* --- TỔNG HỢP CSS SECTION ĐỐI TÁC VIHOPHA --- */

:root {
    --vhp-red: #C51D23;
    --vhp-text: #1A1A1A;
    --section-bg: #F4F6F8;
}

/* Reset để chống tràn lề ngang trên mobile */
.vhp-engine-professional, 
.vhp-engine-professional * {
    box-sizing: border-box;
}

.vhp-engine-professional {
    padding: 60px 0; /* Giảm padding một chút trên mobile */
    background-color: var(--section-bg);
    width: 100%;
    overflow: hidden;
}

.vhp-engine-professional .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px; /* Giữ khoảng cách an toàn 2 bên mép màn hình */
}

/* Header Section */
.vhp-header-center {
    text-align: center;
    margin-bottom: 40px;
}

.vhp-title {
    font-weight: 800;
    color: var(--vhp-text);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.red-line-center {
    width: 60px;
    height: 4px;
    background: var(--vhp-red);
    margin: 0 auto 20px;
}

.vhp-subtitle {
    max-width: 800px;
    margin: 0 auto;
    color: #555;
    line-height: 1.6;
}

/* Lưới Logo Đối tác */
.vhp-logo-grid {
    display: grid;
    /* Desktop: Tự động chia cột dựa trên độ rộng tối thiểu 200px */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.vhp-logo-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 25px 15px;
    border: 1px solid #EAEAEA;
    transition: all 0.3s ease;
    
    /* Căn giữa tuyệt đối nội dung bên trong card */
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    text-align: center;
}

.vhp-logo-card a {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vhp-logo-card img {
    max-width: 100%; /* Không vượt quá chiều ngang card */
    height: 60px;    /* Cố định chiều cao để các hàng thẳng nhau */
    object-fit: contain;
    margin-bottom: 15px;
}

.vhp-logo-info strong {
    display: block;
    color: var(--vhp-text);
    
}

.vhp-logo-info small {
    display: inline-block;
    background: #F0F0F0;
    padding: 2px 10px;
    border-radius: 4px;
    color: #666;
    margin-top: 6px;
    font-size: 11px;
}

.vhp-logo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: var(--vhp-red);
}

/* --- Responsive cho Di động --- */
@media (max-width: 768px) {
    .vhp-logo-grid {
        /* Ép hiển thị đúng 2 cột đều nhau */
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; /* Thu hẹp khoảng cách giữa các card */
    }
    
    .vhp-logo-card {
        padding: 20px 10px;
    }

    .vhp-logo-card img {
        height: 45px; /* Thu nhỏ logo một chút trên mobile */
        margin-bottom: 10px;
    }
    
   
    
}

@media (max-width: 400px) {
    /* Với màn hình cực nhỏ, nếu 2 cột quá chật thì giữ 2 cột nhưng thu nhỏ padding */
    .vhp-logo-grid {
        gap: 8px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-12d4f4f */:root {
    --vhp-red: #C51D23;
    --vhp-dark: #1A1A1A;
    --vhp-bg-soft: #FDFDFD;
    --vhp-border: #EAEAEA;
}

/* Reset nội bộ section để chống tràn */
.vhp-alternator-premium, 
.vhp-alternator-premium * {
    box-sizing: border-box;
}

.vhp-alternator-premium {
    padding: 80px 0;
    background-color: #ffffff;
    overflow: hidden;
    width: 100%;
}

.vhp-alternator-premium .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Header */
.section-header-center {
    text-align: center;
    margin-bottom: 50px;
}

.title-main {
    font-weight: 800;
    color: var(--vhp-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.red-bar {
    width: 60px;
    height: 4px;
    background: var(--vhp-red);
    margin: 0 auto 20px;
}

.subtitle {
    color: #666;
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Alternator Grid */
.alternator-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.alt-box {
    background: var(--vhp-bg-soft);
    border: 1px solid var(--vhp-border);
    padding: 30px 15px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo-wrapper {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    width: 100%;
}

.logo-wrapper img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: 0.3s ease;
}

.alt-box:hover {
    background: #fff;
    border-color: var(--vhp-red);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transform: translateY(-5px);
}

.alt-box h4 {
    font-weight: 800;
    color: var(--vhp-dark);
    margin: 0 0 8px 0;
}

.location-tag {
    
    font-weight: 600;
    color: var(--vhp-red);
    text-transform: uppercase;
}

/* Khối Sản Phẩm VIHOPHA */
.vhp-proprietary-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fdfdfd;
    padding: 35px 50px;
    border-radius: 9px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px dashed #ddd;
    margin-top: 50px;
}

.label-premium {
    font-size: 11px;
    font-weight: 700;
    background: var(--vhp-red);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.vhp-proprietary-box h3 {
    font-weight: 800;
    color: var(--vhp-dark);
    margin-bottom: 12px;
}

.vhp-proprietary-box p {
    color: #555;
    margin: 0;
    max-width: 700px;
    line-height: 1.7;
}

.iso-stamp {
    text-align: center;
    color: var(--vhp-red);
}

.iso-stamp i { margin-bottom: 5px; display: block; }
.iso-stamp span { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; }

/* --- RESPONSIVE OPTIMIZATION --- */

@media (max-width: 992px) {
    .alternator-grid { grid-template-columns: repeat(2, 1fr); }
    .vhp-proprietary-box { flex-direction: column; text-align: center; gap: 30px; padding: 30px; }
}

@media (max-width: 576px) {
    .vhp-alternator-premium { padding: 50px 0; }
    
    .alternator-grid { 
        grid-template-columns: repeat(2, 1fr); /* Đã sửa: Ép hiện 2 cột */
        gap: 12px; 
    }
    
    .alt-box { padding: 20px 10px; }
    .logo-wrapper { height: 40px; margin-bottom: 10px; }
    
     }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-addf27f */:root {
    --vhp-red: #C51D23;
    --vhp-dark: #1A1A1A;
    --vhp-grey-bg: #F8F9FA;
}

/* Fix lỗi tràn lề quan trọng */
.vhp-control-system * {
    box-sizing: border-box;
}

.vhp-control-system {
    padding: 80px 0;
    background-color: var(--vhp-grey-bg);
    overflow: hidden;
    width: 100%;
}

.vhp-control-system .container {
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 15px;
}

/* Header */
.section-header-center {
    text-align: center;
    margin-bottom: 50px;
}

.title-main {
    font-weight: 800;
    color: var(--vhp-dark);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.red-bar {
    width: 60px;
    height: 4px;
    background: var(--vhp-red);
    margin: 0 auto 20px;
}

.subtitle {
    color: #666;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- CONTROL GRID --- */
.control-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Desktop giữ 5 cột */
    gap: 15px;
    margin-bottom: 50px;
}

.control-card {
    background: #fff;
    padding: 25px 15px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center; /* Căn giữa logo */
    justify-content: center;
}

.control-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border-color: var(--vhp-red);
}

.brand-logo {
    height: 50px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.brand-logo img {
    max-height: 100%;
    max-width: 90%;
    object-fit: contain;
}

.control-card h4 {
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 5px 0;
    color: var(--vhp-dark);
}

.origin {
    color: var(--vhp-red);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}

/* Features Bar */
.system-features {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 20px 30px;
    border-radius: 100px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border: 1px solid #eee;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-item i {
    color: var(--vhp-red);
}

.feature-item p {
    margin: 0;
    font-weight: 700;
    color: var(--vhp-dark);
    
}

/* --- RESPONSIVE FIX --- */

@media (max-width: 1024px) {
    .control-grid { 
        grid-template-columns: repeat(3, 1fr); 
    }
}

@media (max-width: 768px) {
    .vhp-control-system { padding: 50px 0; }
    
    .control-grid { 
        grid-template-columns: repeat(2, 1fr) !important; /* Ép hiển thị 2 cột chuẩn mobile */
        gap: 10px; 
    }

    .system-features { 
        flex-direction: column; 
        border-radius: 20px; 
        gap: 15px; 
        padding: 20px;
        align-items: flex-start; /* Căn lề trái nội dung tính năng trên mobile */
    }

    .feature-item {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .origin { font-size: 10px; }
    .control-card { padding: 15px 10px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b5b4ffb */:root {
    --vhp-red: #C51D23;
    --vhp-dark: #1A1A1A;
    --vhp-grey: #666666;
    --vhp-border-color: #EEEEEE;
}

.vhp-cabinet-pro {
    padding: 60px 20px 40px 20px;
    background-color: #ffffff;
}

.vhp-cabinet-pro .container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Header */
.vhp-header-center {
    text-align: center;
    margin-bottom: 40px; /* Giảm từ 50px xuống 40px */
}

.title-main {
    font-weight: 800;
    color: var(--vhp-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.red-line {
    width: 50px;
    height: 3px;
    background: var(--vhp-red);
    margin: 0 auto 20px;
}

.subtitle {
    color: var(--vhp-grey);
}

/* Brand Grid - Lưới phẳng cực sạch */
.vhp-brand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--vhp-border-color);
    border-left: 1px solid var(--vhp-border-color);
    margin-bottom: 30px; /* Máy tính: Giảm margin bottom từ 50px xuống 30px */
}

.brand-item {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--vhp-border-color);
    border-bottom: 1px solid var(--vhp-border-color);
    padding: 20px;
    background: #fff;
    transition: 0.3s;
}

.brand-item img {
    max-height: 40px;
    max-width: 85%;
    transition: 0.3s;
}

.brand-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Technical Info Block - Loại bỏ border-left, dùng bố cục trung tâm */
.vhp-tech-info-block {
    text-align: center;
    padding: 30px 0 0 0; /* Chỉ padding top, triệt tiêu padding bottom */
    border-top: 2px solid #F5F5F5;
}

.vhp-tech-info-block h3 {
    font-weight: 700;
    color: var(--vhp-dark);
    margin-bottom: 25px;
    text-transform: uppercase;
}

.vhp-product-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;
}

.vhp-product-tags span {
    font-size: 13px;
    font-weight: 700;
    color: var(--vhp-dark);
    background: #f8f8f8;
    padding: 6px 20px;
    border-radius: 100px; /* Dạng Pill gọn gàng */
    border: 1px solid #eee;
}

.vhp-desc-center {
    color: #444;
    line-height: 1.7;
    max-width: 850px;
    margin: 0 auto;
    /* Đảm bảo đoạn văn cuối cùng không đẩy thêm lề */
    margin-bottom: 0 !important;
}

.vhp-desc-center strong {
    color: var(--vhp-red);
}

/* --- TỐI ƯU KHOẢNG CÁCH LỀ CHÂN TRÊN DI ĐỘNG --- */

@media (max-width: 768px) {
    /* 1. Giảm padding của toàn bộ section */
    .vhp-cabinet-pro { 
        padding: 30px 15px 10px 15px; /* Top 30px, Bottom chỉ còn 10px */
    }

    /* 2. Giảm margin-bottom của lưới logo */
    .vhp-brand-grid { 
        grid-template-columns: repeat(2, 1fr); 
        margin-bottom: 20px; /* Trước đó là 50px, giảm xuống còn 20px */
    }

    /* 3. Giảm padding và margin của khối thông tin kỹ thuật */
    .vhp-tech-info-block { 
        padding: 20px 10px 10px 10px; /* Thu nhỏ padding nội bộ */
        border-top: 1px solid #F5F5F5;
    }

    /* 4. Loại bỏ margin dư thừa của đoạn văn cuối cùng */
    .vhp-desc-center {
        margin-bottom: 0; 
        font-size: 14px; /* Chỉnh size chữ một chút cho cân đối di động */
    }

    .vhp-product-tags {
        margin-bottom: 15px; /* Giảm khoảng cách giữa tag và mô tả */
        gap: 8px;
    }

    .vhp-tech-info-block h3 {
        margin-bottom: 15px;
        font-size: 16px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a8afbfa */:root {
    --vhp-red: #C51D23;
    --vhp-dark: #1A1A1A;
    --vhp-grey-bg: #F4F6F8; /* Nền xám sáng để phân cách */
    --vhp-border: #E0E4E8;
}

.vhp-client-showcase-grey {
    padding: 100px 20px;
    background-color: var(--vhp-grey-bg); /* Tô nền xám sáng toàn mục */
}

.vhp-client-showcase-grey .container {
    max-width: 1140px;
    margin: 0 auto;
}

/* Header */
.vhp-header-center {
    text-align: center;
    margin-bottom: 60px;
}

.title-main {
    font-weight: 800;
    color: var(--vhp-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.red-divider {
    width: 50px;
    height: 4px;
    background: var(--vhp-red);
    margin: 15px auto;
}

.subtitle {
    color: #555;
}

/* Segment Cards - Màu trắng để nổi trên nền xám */
.vhp-segment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.segment-card {
    background: #ffffff;
    padding: 40px 30px;
    border: 1px solid var(--vhp-border);
    border-radius: 16px; /* Bo tròn góc hiện đại */
    text-align: center;
    transition: all 0.3s ease;
}

.segment-card:hover {
    transform: translateY(-8px);
    border-color: var(--vhp-red);
    box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

.icon-circle {
    width: 60px;
    height: 60px;
    background: #FFF5F5;
    color: var(--vhp-red);
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.segment-card h3 {
    font-weight: 800;
    color: var(--vhp-dark);
    margin-bottom: 25px;
    text-transform: uppercase;
}

.segment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.segment-list li {
    color: #444;
    padding: 12px 0;
    border-top: 1px solid #F0F2F5;
}

/* Stats Unit - Bo tròn mạnh */
.vhp-stats-rounded {
    display: flex;
    justify-content: space-around;
    background: #ffffff;
    padding: 40px;
    border-radius: 20px; /* Bo tròn khối thống kê mạnh hơn */
    border: 1px solid var(--vhp-border);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.stat-unit {
    text-align: center;
    flex: 1;
}

.stat-unit .val {
    display: block;
    font-weight: 900;
    color: var(--vhp-red);
    margin-bottom: 5px;
}

.stat-unit .txt {
    font-weight: 700;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 992px) {
    .vhp-segment-grid { grid-template-columns: 1fr; }
    .vhp-stats-rounded { flex-direction: column; gap: 40px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bdade78 */:root {
    --vhp-red: #C51D23;
    --vhp-dark: #1A1A1A;
    --vhp-grey: #666;
    --vhp-border: #EAEAEA;
}

.vhp-commitment-modern {
    padding: 80px 20px;
    background-color: #ffffff;
}

.vhp-commitment-modern .container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Header */
.vhp-header-center {
    text-align: center;
    margin-bottom: 50px;
}

.title-main {
    font-weight: 800;
    color: var(--vhp-dark);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.red-divider {
    width: 50px;
    height: 4px;
    background: var(--vhp-red);
    margin: 0 auto 15px;
}

.subtitle {
    color: var(--vhp-red);
    font-weight: 600;
    font-style: italic;
}

/* Commitment Layout */
.commitment-flex {
    display: flex;
    gap: 25px;
    margin-bottom: 50px;
}

.commit-card {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 25px;
    background: #fff;
    border: 1px solid var(--vhp-border);
    border-radius: 8px;
    transition: 0.3s ease;
}

.commit-card:hover {
    border-color: var(--vhp-red);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Icon nhỏ gọn */
.icon-box {
    color: var(--vhp-red);
    background: #FFF5F5;
    width: 45px;
    height: 45px;
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.commit-info h4 {
    font-weight: 700;
    color: var(--vhp-dark);
    margin-bottom: 8px;
}

.commit-info p {
    color: var(--vhp-grey);
    margin: 0;
    line-height: 1.5;
}

/* Final Quote */
.vhp-final-quote {
    text-align: center;
    border-top: 1px solid var(--vhp-border);
    padding-top: 40px;
}

.vhp-final-quote p {
    color: var(--vhp-dark);
    line-height: 1.8;
    max-width: 850px;
    margin: 0 auto;
}

.vhp-final-quote strong {
    color: var(--vhp-red);
}

/* Responsive */
@media (max-width: 992px) {
    .commitment-flex { flex-direction: column; }
}/* End custom CSS */