.elementor-60 .elementor-element.elementor-element-37cb89a{--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;}/* Start custom CSS for html, class: .elementor-element-d8b57ae */body {
            font-family: Arial, Helvetica, sans-serif;
            overflow-x: hidden;
            background-color: #FFFFFF;
            color: #4b5563; /* Màu xám đậm */
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }

        /* Định nghĩa màu sắc chủ đạo */
        .color-primary { background-color: #3366CC; }
        .color-secondary { background-color: #FF9900; }
        .color-text-primary { color: #3366CC; }
        .color-text-secondary { color: #FF9900; }
        .bg-white { background-color: #fff; }
        .bg-gray-50 { background-color: #f9fafb; }

        /* Container & Responsive Layout */
        .container {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            padding: 0 1.5rem; /* Padding ngang mặc định */
        }
        @media (min-width: 1024px) {
            .container {
                max-width: 1280px;
                padding: 0 3rem;
            }
        }
        
        .flex { display: flex; }
        .flex-col { flex-direction: column; }
        .items-center { align-items: center; }
        .justify-between { justify-content: space-between; }
        .justify-center { justify-content: center; }
        .w-full { width: 100%; }
        .h-auto { height: auto; }
        .min-h-screen { min-height: 100vh; }
        .mx-auto { margin-left: auto; margin-right: auto; }
        .inline-block { display: inline-block; }

        @media (min-width: 1024px) {
            .lg-flex-row { flex-direction: row; }
            .lg-w-1-2 { width: 50%; }
            .lg-mb-0 { margin-bottom: 0 !important; }
        }

        /* Grid */
        .grid { display: grid; }
        .grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
        .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
        .gap-12 { gap: 3rem; }
        .gap-8 { gap: 2rem; }
        .order-1 { order: 1; }

        @media (min-width: 768px) {
            .md-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
            .md-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
            .md-block { display: block; }
            .hidden { display: none; }
            .md-w-5-12 { width: 41.666667%; } 
        }

        /* Spacing and Padding */
        .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
        .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
        .py-24 { padding-top: 6rem; padding-bottom: 6rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mb-8 { margin-bottom: 2rem; }
        .mb-10 { margin-bottom: 2.5rem; }
        .mb-12 { margin-bottom: 3rem; }
        .mt-12 { margin-top: 3rem; }
        .ml-1 { margin-left: 0.25rem; }

        .p-3 { padding: 0.75rem; }
        .p-4 { padding: 1rem; }
        .p-6 { padding: 1.5rem; }
        .p-8 { padding: 2rem; }
        .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
        .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
        .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
        .px-8 { padding-left: 2rem; padding-right: 2rem; }
        .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
        .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }

        /* Typography */
        .text-center { text-align: center; }
        .uppercase { text-transform: uppercase; }
        .tracking-wider { letter-spacing: 0.05em; }
        .font-medium { font-weight: 500; }
        .font-bold { font-weight: 700; }
        .font-semibold { font-weight: 600; }
        
        .text-xs { font-size: 0.75rem; }
        .text-sm { font-size: 0.875rem; }
        .text-lg { font-size: 1.125rem; }
        .text-xl { font-size: 1.25rem; }
        .text-2xl { font-size: 1.5rem; }
        .text-gray-600 { color: #4b5563; }
        .text-gray-900 { color: #111827; }
        .text-white { color: #fff; }
        .italic { font-style: italic; }
        .text-4xl { font-size: 2.25rem; }
        .text-5xl { font-size: 3rem; }
        .max-w-lg { max-width: 32rem; }
        .max-w-md { max-width: 28rem; }
        .max-w-2xl { max-width: 42rem; }
        .max-w-4xl { max-width: 56rem; }
        .opacity-80 { opacity: 0.8; }
        .opacity-90 { opacity: 0.9; }

        @media (min-width: 768px) {
            .md-text-5xl { font-size: 3rem; }
            .md-text-6xl { font-size: 3.75rem; }
        }

        /* Styling & Effects */
        .rounded-lg { border-radius: 0.5rem; }
        .rounded-xl { border-radius: 0.75rem; }
        .rounded-3xl { border-radius: 1.5rem; }
        .rounded-full { border-radius: 9999px; }
        .rounded-tl-xl { border-top-left-radius: 0.75rem; }
        .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
        .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
        .border-4 { border-width: 4px; }
        .border-white { border-color: #fff; }
        .object-cover { object-fit: cover; }
        .overflow-hidden { overflow: hidden; }

        /* Positioning & Transforms */
        .relative { position: relative; }
        .absolute { position: absolute; }
        .bottom-0 { bottom: 0; }
        .right-0 { right: 0; }
        .z-10 { z-index: 10; }
        .left-1-2 { left: 50%; }

        /* Transition cơ bản */
        .transition-default { transition: all 0.3s ease; }
        .duration-300 { transition-duration: 0.3s; }
        .duration-500 { transition-duration: 0.5s; }

        /* Transforms */
        .rotate-3 { transform: rotate(3deg); }
        .translate-x-neg-1-2 { transform: translateX(-50%); }

        /* Hover Effects */
        .hover-rotate-0:hover { transform: rotate(0deg); }
        .hover-scale-105:hover { transform: scale(1.05); }
        .hover-scale-110:hover { transform: scale(1.10); }
        .hover-color-primary:hover { background-color: #3366CC; }
        .hover-bg-gray-100:hover { background-color: #f3f4f6; }
        .hover-text-gray-300:hover { color: #d1d5db; }
        .hover-underline:hover { text-decoration: underline; }

        /* === Scroll Reveal & Card Animation === */
        
        /* CSS cho Animation khi cuộn (scroll-reveal effect) */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            transition-delay: 0.1s;
        }

        .animate-on-scroll.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Animation đặc sắc cho các box/card */
        .card-scale-up {
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .card-scale-up.active {
            transition-delay: 0.3s;
            transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth scale and shadow */
        }
        .card-scale-up:hover {
            transform: scale(1.03) translateY(-5px);
            box-shadow: 0 15px 30px rgba(51, 102, 204, 0.3);
            z-index: 10;
        }

        /* Hover effect cho nút */
        .btn-hover-effect {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .btn-hover-effect::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            transition: all 0.5s ease;
            transform: translate(-50%, -50%) scale(0);
        }
        .btn-hover-effect:hover::before {
            transform: translate(-50%, -50%) scale(30);
            opacity: 0;
        }
        .btn-hover-effect:hover {
            box-shadow: 0 4px 15px rgba(255, 153, 0, 0.4);
        }

        /* Timeline specific CSS */
        .timeline-item {
            display: flex;
            align-items: center;
            width: 100%;
            margin-bottom: 2rem;
        }
        .left-timeline {
            justify-content: flex-start;
        }
        .right-timeline {
            justify-content: flex-end;
        }
        .timeline-line {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.4);
        }
        .timeline-dot {
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            width: 2rem;
            height: 2rem;
            border-radius: 9999px;
            flex-shrink: 0;
        }
        
        @media (min-width: 768px) {
             .left-timeline {
                justify-content: space-between;
             }
             .right-timeline {
                justify-content: space-between;
             }
        }
        p{
            color:black !important;
        }/* End custom CSS */