.elementor-8696 .elementor-element.elementor-element-88dda98:not(.elementor-motion-effects-element-type-background), .elementor-8696 .elementor-element.elementor-element-88dda98 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://bconnect.vn/wp-content/uploads/2026/05/bg3-home4.png");}.elementor-8696 .elementor-element.elementor-element-88dda98 > .elementor-container{max-width:1330px;}.elementor-8696 .elementor-element.elementor-element-88dda98{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:50px;margin-bottom:50px;}.elementor-8696 .elementor-element.elementor-element-88dda98 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-8696 .elementor-element.elementor-element-34d7eae > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-widget-tabs .elementor-tab-title, .elementor-widget-tabs .elementor-tab-title a{color:var( --e-global-color-primary );}.elementor-widget-tabs .elementor-tab-title.elementor-active,
					 .elementor-widget-tabs .elementor-tab-title.elementor-active a{color:var( --e-global-color-accent );}.elementor-widget-tabs .elementor-tab-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-tabs .elementor-tab-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-8696 .elementor-element.elementor-element-538ed8c{background-color:#F8FDFF;border-radius:020px 020px 020px 020px;}.elementor-8696 .elementor-element.elementor-element-538ed8c .elementor-tabs-wrapper{width:27%;}.elementor-8696 .elementor-element.elementor-element-538ed8c .elementor-tab-title, .elementor-8696 .elementor-element.elementor-element-538ed8c .elementor-tab-title:before, .elementor-8696 .elementor-element.elementor-element-538ed8c .elementor-tab-title:after, .elementor-8696 .elementor-element.elementor-element-538ed8c .elementor-tab-content, .elementor-8696 .elementor-element.elementor-element-538ed8c .elementor-tabs-content-wrapper{border-width:2px;}.elementor-8696 .elementor-element.elementor-element-538ed8c .elementor-tab-mobile-title, .elementor-8696 .elementor-element.elementor-element-538ed8c .elementor-tab-desktop-title.elementor-active, .elementor-8696 .elementor-element.elementor-element-538ed8c .elementor-tab-title:before, .elementor-8696 .elementor-element.elementor-element-538ed8c .elementor-tab-title:after, .elementor-8696 .elementor-element.elementor-element-538ed8c .elementor-tab-content, .elementor-8696 .elementor-element.elementor-element-538ed8c .elementor-tabs-content-wrapper{border-color:#CFE5FF;}.elementor-8696 .elementor-element.elementor-element-538ed8c .elementor-tab-title.elementor-active,
					 .elementor-8696 .elementor-element.elementor-element-538ed8c .elementor-tab-title.elementor-active a{color:#009EFF;}.elementor-8696 .elementor-element.elementor-element-538ed8c .elementor-tab-title{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:600;-webkit-text-stroke-width:0px;stroke-width:0px;-webkit-text-stroke-color:#000;stroke:#000;}.elementor-8696 .elementor-element.elementor-element-538ed8c .elementor-tab-content{color:#000000;}/* Start custom CSS for tabs, class: .elementor-element-538ed8c *//* ==========================================
   1. DIỆT TẬN GỐC LỖI DOUBLE MENU TAB TRÊN MOBILE
   ========================================== */
.bconnect-tabs .elementor-tab-mobile-title,
.bconnect-tabs .elementor-tabs-content-wrapper > .elementor-tab-mobile-title,
.bconnect-tabs .elementor-tabs-content-wrapper > .elementor-tab-title,
.bconnect-tabs .elementor-tabs-content-wrapper > h3.elementor-tab-title,
.bconnect-tabs .elementor-tabs-content-wrapper > div.elementor-tab-title { 
    display: none !important; 
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border: none !important;
}

/* ==========================================
   2. KHUNG BAO NGOÀI & BỐ CỤC CHÍNH (ĐÃ FIX DOUBLE KHUNG)
   ========================================== */
/* Làm trong suốt hoàn toàn khung ngoài cùng */
.bconnect-tabs .elementor-tabs { 
    background: transparent !important; 
    border: none !important; 
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important; 
    gap: 40px !important; /* Khoảng cách giữa menu ngang và khung nội dung */
    box-shadow: none !important;
}

/* CHỈ GIỮ LẠI 1 KHUNG BO TRÒN BÊN NGOÀI CÙNG */
.bconnect-tabs .elementor-tabs-content-wrapper { 
    width: 100% !important; 
    background: #ffffff !important; 
    border: 2px solid #e2e8f0 !important; /* Viền mặc định, sẽ đổi màu theo Tab */
    border-radius: 24px !important; /* Bo góc 24px */
    padding: 40px !important; 
    box-shadow: 0 15px 40px -10px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
    transition: all 0.4s ease !important;
}

/* ĐÃ FIX: XÓA SẠCH KHUNG VUÔNG BÊN TRONG CỦA ELEMENTOR */
.bconnect-tabs .elementor-tab-content {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ==========================================
   3. THANH MENU TAB VIÊN THUỐC (PILL TABS NẰM NGANG)
   ========================================== */
.bconnect-tabs .elementor-tabs-wrapper { 
    background: #f8fafc !important; 
    border: 1px solid #f1f5f9 !important;
    border-radius: 50px !important; 
    padding: 8px !important; 
    display: inline-flex !important; 
    flex-direction: row !important; 
    justify-content: center !important; 
    align-self: center !important; 
    width: fit-content !important;
    max-width: 100% !important;
}

/* Trạng thái tab lúc bình thường */
.bconnect-tabs .elementor-tabs-wrapper .elementor-tab-title {
    background: transparent !important;
    border: 2px solid transparent !important; 
    border-radius: 40px !important; 
    padding: 12px 28px !important; 
    cursor: pointer !important;
    font-size: 15px !important; 
    font-weight: 600 !important;
    color: #000000 !important; /* Màu đen khi chưa chọn */
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
}

/* Xóa bỏ đường kẻ mặc định */
.bconnect-tabs .elementor-tabs-wrapper .elementor-tab-title::before,
.bconnect-tabs .elementor-tabs-wrapper .elementor-tab-title::after { display: none !important; }


/* ==========================================
   4. CẤU TRÚC RUỘT TAB (NỘI DUNG VÀ HÌNH ẢNH)
   ========================================== */
.bconnect-tabs .tab-inner-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 50px !important; 
}
.bconnect-tabs .tab-text-side { flex: 1.1 !important; text-align: left !important; } 
.bconnect-tabs .tab-image-side { flex: 0.9 !important; text-align: center !important; } 
.bconnect-tabs .tab-image-side img { 
    width: 100% !important; 
    max-width: 500px !important; 
    border-radius: 16px !important; 
    object-fit: contain !important; 
}

/* Biểu tượng (Badge) bo tròn hoàn toàn */
.bconnect-tabs .tab-icon-badge {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    margin-bottom: 20px !important;
}

.bconnect-tabs .tab-text-side h3 { font-size: 28px !important; font-weight: 800 !important; color: #0f172a !important; margin-bottom: 16px !important; line-height: 1.4 !important; }
.bconnect-tabs .tab-text-side p { font-size: 16px !important; color: #475569 !important; line-height: 1.7 !important; margin-bottom: 35px !important; }

/* Nút CTA chung */
.bconnect-tabs .tab-cta-btn {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    font-weight: 600 !important; color: #ffffff !important;
    padding: 14px 28px !important; border-radius: 30px !important;
    text-decoration: none !important; font-size: 15px !important; transition: all 0.3s ease !important;
}


/* ==========================================
   5. BỘ 5 MÀU TÙY CHỈNH THEO TỪNG TAB
   ========================================== */

/* --- TAB 1: VÀNG (#eab308) --- */
.bconnect-tabs .elementor-tabs:has(.elementor-tab-title[data-tab="1"].elementor-active) .elementor-tabs-content-wrapper { border-color: #eab308 !important; box-shadow: 0 10px 40px -10px rgba(234, 179, 8, 0.15) !important; }
.bconnect-tabs .elementor-tabs-wrapper .elementor-tab-title[data-tab="1"].elementor-active { background: #ffffff !important; color: #eab308 !important; border-color: #fef08a !important; box-shadow: 0 4px 10px rgba(234, 179, 8, 0.15) !important; }
.bconnect-tabs .theme-1 .tab-icon-badge { background: #fef08a !important; color: #eab308 !important; border: 1px solid #fde047 !important; }
.bconnect-tabs .theme-1 .tab-cta-btn { background-color: #eab308 !important; }
.bconnect-tabs .theme-1 .tab-cta-btn:hover { background-color: #ca8a04 !important; box-shadow: 0 8px 20px rgba(234, 179, 8, 0.25) !important; transform: translateY(-2px) !important;}

/* --- TAB 2: CAM (#ea580c) --- */
.bconnect-tabs .elementor-tabs:has(.elementor-tab-title[data-tab="2"].elementor-active) .elementor-tabs-content-wrapper { border-color: #ea580c !important; box-shadow: 0 10px 40px -10px rgba(234, 88, 12, 0.15) !important; }
.bconnect-tabs .elementor-tabs-wrapper .elementor-tab-title[data-tab="2"].elementor-active { background: #ffffff !important; color: #ea580c !important; border-color: #ffedd5 !important; box-shadow: 0 4px 10px rgba(234, 88, 12, 0.15) !important; }
.bconnect-tabs .theme-2 .tab-icon-badge { background: #ffedd5 !important; color: #ea580c !important; border: 1px solid #fdba74 !important; }
.bconnect-tabs .theme-2 .tab-cta-btn { background-color: #ea580c !important; }
.bconnect-tabs .theme-2 .tab-cta-btn:hover { background-color: #c2410c !important; box-shadow: 0 8px 20px rgba(234, 88, 12, 0.25) !important; transform: translateY(-2px) !important;}

/* --- TAB 3: XANH LAM (#0ea5e9) --- */
.bconnect-tabs .elementor-tabs:has(.elementor-tab-title[data-tab="3"].elementor-active) .elementor-tabs-content-wrapper { border-color: #0ea5e9 !important; box-shadow: 0 10px 40px -10px rgba(14, 165, 233, 0.15) !important; }
.bconnect-tabs .elementor-tabs-wrapper .elementor-tab-title[data-tab="3"].elementor-active { background: #ffffff !important; color: #0ea5e9 !important; border-color: #e0f2fe !important; box-shadow: 0 4px 10px rgba(14, 165, 233, 0.15) !important; }
.bconnect-tabs .theme-3 .tab-icon-badge { background: #e0f2fe !important; color: #0ea5e9 !important; border: 1px solid #bae6fd !important; }
.bconnect-tabs .theme-3 .tab-cta-btn { background-color: #0ea5e9 !important; }
.bconnect-tabs .theme-3 .tab-cta-btn:hover { background-color: #0284c7 !important; box-shadow: 0 8px 20px rgba(14, 165, 233, 0.25) !important; transform: translateY(-2px) !important;}

/* --- TAB 4: XANH DƯƠNG ĐẬM (#2563eb) --- */
.bconnect-tabs .elementor-tabs:has(.elementor-tab-title[data-tab="4"].elementor-active) .elementor-tabs-content-wrapper { border-color: #2563eb !important; box-shadow: 0 10px 40px -10px rgba(37, 99, 235, 0.15) !important; }
.bconnect-tabs .elementor-tabs-wrapper .elementor-tab-title[data-tab="4"].elementor-active { background: #ffffff !important; color: #2563eb !important; border-color: #dbeafe !important; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15) !important; }
.bconnect-tabs .theme-4 .tab-icon-badge { background: #dbeafe !important; color: #2563eb !important; border: 1px solid #bfdbfe !important; }
.bconnect-tabs .theme-4 .tab-cta-btn { background-color: #2563eb !important; }
.bconnect-tabs .theme-4 .tab-cta-btn:hover { background-color: #1d4ed8 !important; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25) !important; transform: translateY(-2px) !important;}

/* --- TAB 5: TÍM (#8b5cf6) --- */
.bconnect-tabs .elementor-tabs:has(.elementor-tab-title[data-tab="5"].elementor-active) .elementor-tabs-content-wrapper { border-color: #8b5cf6 !important; box-shadow: 0 10px 40px -10px rgba(139, 92, 246, 0.15) !important; }
.bconnect-tabs .elementor-tabs-wrapper .elementor-tab-title[data-tab="5"].elementor-active { background: #ffffff !important; color: #8b5cf6 !important; border-color: #ede9fe !important; box-shadow: 0 4px 10px rgba(139, 92, 246, 0.15) !important; }
.bconnect-tabs .theme-5 .tab-icon-badge { background: #ede9fe !important; color: #8b5cf6 !important; border: 1px solid #ddd6fe !important; }
.bconnect-tabs .theme-5 .tab-cta-btn { background-color: #8b5cf6 !important; }
.bconnect-tabs .theme-5 .tab-cta-btn:hover { background-color: #7c3aed !important; box-shadow: 0 8px 20px rgba(139, 92, 246, 0.25) !important; transform: translateY(-2px) !important;}


/* ==========================================
   6. RESPONSIVE MOBILE TỐI ƯU
   ========================================== */
@media (max-width: 768px) {
    .bconnect-tabs .elementor-tabs-content-wrapper { padding: 30px 20px !important; }
    
    .bconnect-tabs .elementor-tabs-wrapper { 
        justify-content: flex-start !important; 
        overflow-x: auto !important; 
        white-space: nowrap !important;
        width: 100% !important;
        border-radius: 12px !important; 
        padding: 5px !important;
    }
    .bconnect-tabs .elementor-tabs-wrapper::-webkit-scrollbar { display: none; }
    
    .bconnect-tabs .elementor-tabs-wrapper .elementor-tab-title {
        flex: 0 0 auto !important;
        padding: 10px 18px !important;
        font-size: 14px !important;
    }
    
    .bconnect-tabs .tab-inner-content { 
        flex-direction: column-reverse !important; 
        gap: 30px !important; 
    }
    .bconnect-tabs .tab-text-side h3 { font-size: 24px !important; }
}/* End custom CSS */