feat: align portal style, integrate ecosystem grid and interactive course explorer with brand identity

Author: lucthienphong1120

app.js

@@ -131,7 +131,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 setTimeout(() => {
                     card.innerHTML = `
                         <div style="text-align: center; padding: 2rem 0;">
-                            <div style="width: 80px; height: 80px; background: rgba(16, 185, 129, 0.1); border: 2px solid var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; color: var(--primary); font-size: 2.5rem; animation: pulse-glow 2s infinite;">
+                            <div style="width: 80px; height: 80px; background: rgba(98, 196, 49, 0.1); border: 2px solid var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; color: var(--primary); font-size: 2.5rem; animation: pulse-glow 2s infinite;">
                                 <i class="fa-solid fa-check"></i>
                             </div>
                             <h3 style="font-size: 1.8rem; margin-bottom: 1rem; color: var(--text-primary);">Đăng Ký Thành Công!</h3>
@@ -158,20 +158,46 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         });
     }
+
+    // 6. Course Tabs Filter Logic
+    const courseTabs = document.querySelectorAll('.course-tab');
+    const courseCards = document.querySelectorAll('.course-card');
+
+    if (courseTabs.length > 0 && courseCards.length > 0) {
+        courseTabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                // Toggle active state
+                courseTabs.forEach(t => t.classList.remove('active'));
+                tab.classList.add('active');
+
+                // Filter logic
+                const filter = tab.getAttribute('data-filter');
+
+                courseCards.forEach(card => {
+                    const category = card.getAttribute('data-category');
+                    if (filter === 'all' || category === filter) {
+                        card.classList.remove('hide');
+                    } else {
+                        card.classList.add('hide');
+                    }
+                });
+            });
+        });
+    }
 });
 
 // Extra style animation definition
 const styleSheet = document.createElement("style");
 styleSheet.textContent = `
 @keyframes pulse-glow {
     0% {
-        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
+        box-shadow: 0 0 0 0 rgba(98, 196, 49, 0.4);
     }
     70% {
-        box-shadow: 0 0 0 15px rgba(16, 185, 129, 0);
+        box-shadow: 0 0 0 15px rgba(98, 196, 49, 0);
     }
     100% {
-        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+        box-shadow: 0 0 0 0 rgba(98, 196, 49, 0);
     }
 }
 `;