feat: optimize layout responsiveness and fix mobile visual bugs

lucthienphong1120 · lucthienphong1120 · commit 3637bf71033f · 2026-05-25T20:34:26.000+07:00
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
 
     <!-- CSS styles & Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="./style.css?v=1.1">
 </head>
 
 <body>
@@ -125,7 +125,7 @@ <h3 style="font-size: 1.8rem; margin-bottom: 1.5rem; color: var(--text-primary);
                         người mới bắt đầu, những người trái ngành hoặc đang gặp khó khăn trong lĩnh vực Công nghệ thông
                         tin.
                     </p>
-                    <div style="display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem;">
+                    <div class="about-links" style="margin-top: 1.5rem;">
                         <a href="https://education.crfnetwork.com/" target="_blank" class="service-link"><i
                                 class="fa-solid fa-graduation-cap" style="color: var(--primary);"></i> CRF Education</a>
                         <a href="https://blog.crfnetwork.com/" target="_blank" class="service-link"><i
diff --git a/style.css b/style.css
@@ -419,6 +419,12 @@ header {
     align-items: stretch;
 }
 
+.about-links {
+    display: flex;
+    gap: 2rem;
+    flex-wrap: wrap;
+}
+
 .about-features {
     display: flex;
     flex-direction: column;
@@ -1126,6 +1132,10 @@ header {
 }
 
 @media (max-width: 768px) {
+    .container {
+        padding: 0 1.25rem;
+    }
+
     .nav-links {
         display: none;
     }
@@ -1176,17 +1186,98 @@ header {
         gap: 3rem;
     }
 
+    .manifesto-editor {
+        padding: 2rem 1.5rem;
+    }
+
     .team-container {
         grid-template-columns: 1fr;
     }
 
+    .course-tabs {
+        justify-content: flex-start;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        padding-bottom: 0.75rem;
+        margin-bottom: 2rem;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none; /* Firefox */
+    }
+
+    .course-tabs::-webkit-scrollbar {
+        display: none; /* Chrome/Safari */
+    }
+
+    .course-tab {
+        flex-shrink: 0;
+    }
+
+    .footer-grid {
+        grid-template-columns: 1fr;
+        gap: 2.5rem;
+    }
+
     .footer-bottom {
         flex-direction: column;
         gap: 1rem;
         text-align: center;
     }
 }
 
+@media (max-width: 576px) {
+    .hero-title {
+        font-size: 2.25rem;
+        line-height: 1.2;
+    }
+
+    .hero-actions {
+        flex-direction: column;
+        width: 100%;
+        gap: 0.75rem;
+        padding: 0 0 2rem;
+    }
+
+    .hero-actions .btn {
+        width: 100%;
+    }
+
+    .about-links {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .glass-card,
+    .contact-form-card {
+        padding: 1.5rem 1.25rem !important;
+    }
+
+    .ecosystem-node.highlight-node {
+        padding-top: 3.2rem;
+    }
+
+    .manifesto-meta {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .manifesto-meta span {
+        white-space: nowrap;
+    }
+
+    .verification-highlight-card {
+        flex-direction: column;
+        text-align: center;
+        padding: 2rem 1.25rem !important;
+        gap: 1.5rem;
+    }
+
+    .verification-highlight-card a.btn {
+        width: 100%;
+        justify-content: center;
+    }
+}
+
 /* BRAND EXTENSIONS & PORTAL COMPONENT STYLING */
 
 /* Brand Gradients & Accents */
