/* section courses */
        /* Courses */
        .courses {
            background: var(--bg-primary);
            margin-bottom: 0;
            padding-bottom: 30px; /* Thêm padding dưới để tránh nội dung sát viền */
        }

        .courses-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr));
            gap: clamp(1rem, 3vw, 2rem);
        }

        .course-card {
            background: white;
            border-radius: 0.9375rem;
            padding: clamp(1.5rem, 4vw, 2rem);
            box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            border-top: 0.25rem solid var(--secondary);
            opacity: 0;
            transform: translateY(50px);
            will-change: transform, opacity;
        }

        .course-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.15);
        }

        /* Mobile optimization - Tắt hover effects và tối ưu scroll */
        @media (hover: none) and (pointer: coarse) {
            .course-card {
                transition: none; /* Tắt transition để tránh scroll lag */
            }
            
            .course-card:hover {
                transform: none;
                box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.1);
            }
        }

        /* Tối ưu scroll performance cho courses section */
        .courses {
            scroll-behavior: auto; /* Tắt smooth scroll trong section này */
            -webkit-overflow-scrolling: touch; /* iOS scroll optimization */
        }

        .courses-grid {
            contain: layout style; /* CSS containment để tối ưu performance */
        }

        .course-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        
        .course-icon {
            font-size: 2rem;
            color: var(--secondary);
            background: rgba(236, 64, 122, 0.1);
            padding: 0.75rem;
            border-radius: 0.5rem;
            flex-shrink: 0;
        }

        .course-card h3 {
            font-size: clamp(1.25rem, 3vw, 1.5rem);
            color: var(--primary);
            margin: 0;
            line-height: 1.3;
        }

        .course-card p {
            color: var(--gray);
            margin-bottom: 1.5rem;
        }

        .course-features {
            list-style: none;
            margin-bottom: 1.5rem;
        }

        .course-features li {
            padding: 0.25rem 0;
            color: var(--gray);
        }

        .course-features li:before {
            content: "✓";
            color: var(--secondary);
            margin-right: 0.5rem;
            font-weight: bold;
        }