.elementor-30848 .elementor-element.elementor-element-5d858e4{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-30848 .elementor-element.elementor-element-5d858e4:not(.elementor-motion-effects-element-type-background), .elementor-30848 .elementor-element.elementor-element-5d858e4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0F172A;}/* Start custom CSS for container, class: .elementor-element-5d858e4 */<!-- PHẦN 1: CSS SCOPED - Đặt trong Custom CSS của Elementor hoặc Additional CSS -->
<style>
/* Scope tất cả CSS chỉ áp dụng cho container case-study */
.case-study-container {
    font-family: inherit !important;
    scroll-behavior: smooth;
    background-color: #0F172A;
    color: #F1F5F9;
    line-height: 1.6;
}

.case-study-container * {
    box-sizing: border-box;
}

/* Brand colors - chỉ áp dụng trong container */
.case-study-container .brand-bg { background-color: #0F172A; }
.case-study-container .brand-surface { background-color: #1E293B; }
.case-study-container .brand-primary { color: #EB5B00; }
.case-study-container .brand-primary-bg { background-color: #EB5B00; }
.case-study-container .brand-primary-light { color: #FF7D29; }
.case-study-container .brand-text-primary { color: #F1F5F9; }
.case-study-container .brand-text-secondary { color: #94A3B8; }
.case-study-container .brand-border { border-color: #334155; }

/* Animations - scoped */
.case-study-container .scroll-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.case-study-container .scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.case-study-container .fade-in {
    animation: caseStudyFadeIn 0.5s ease-in-out forwards;
}
@keyframes caseStudyFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Tab styles - scoped */
.case-study-container .context-tab-active {
    color: #FFFFFF !important;
    background-color: #EB5B00 !important;
}
.case-study-container .vertical-tab-active {
    color: #FFFFFF !important;
    background-color: #1E293B !important;
    border-left-color: #EB5B00 !important;
}

/* Utility classes - scoped với Tailwind-like naming */
.case-study-container .cs-bg-surface { background-color: #1E293B; }
.case-study-container .cs-border { border: 1px solid #334155; }
.case-study-container .cs-rounded-2xl { border-radius: 1rem; }
.case-study-container .cs-shadow-2xl { 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); 
}
.case-study-container .cs-p-8 { padding: 2rem; }
.case-study-container .cs-mb-20 { margin-bottom: 5rem; }
.case-study-container .cs-text-3xl { 
    font-size: 1.875rem; 
    line-height: 2.25rem; 
}
.case-study-container .cs-font-bold { font-weight: 700; }
.case-study-container .cs-grid { display: grid; }
.case-study-container .cs-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.case-study-container .cs-gap-8 { gap: 2rem; }
.case-study-container .cs-text-center { text-align: center; }

/* Responsive */
@media (max-width: 768px) {
    .case-study-container .cs-grid-cols-3 { 
        grid-template-columns: 1fr; 
    }
}
</style>/* End custom CSS */