feat: add logo meaning explanation card in the about section, restructure layout to 3-columns on desktop

Author: lucthienphong1120

index.html

@@ -109,18 +109,46 @@ <h3 style="font-size: 1.8rem; margin-bottom: 1.5rem; color: var(--text-primary);
                     </div>
                 </div>
 
-                <div class="about-features reveal" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;">
+                <div class="about-features reveal" style="display: flex; flex-direction: column; gap: 1.5rem;">
                     <div class="feature-box" style="margin-bottom: 0;">
                         <div class="feature-icon" style="background: rgba(98, 196, 49, 0.1); color: var(--primary);"><i class="fa-solid fa-eye"></i></div>
                         <h4>Tầm Nhìn</h4>
                         <p style="font-size: 0.88rem; line-height: 1.5;">Khao khát tổng hợp và chia sẻ kiến thức công nghệ, lập trình, bảo mật và pre-IT hữu ích, giúp thế hệ trẻ vững bước theo đuổi đam mê.</p>
                     </div>
                     <div class="feature-box" style="margin-bottom: 0;">
-                        <div class="feature-icon" style="background: rgba(127, 29, 219, 0.1); color: #c084fc;"><i class="fa-solid fa-bullseye"></i></div>
+                        <div class="feature-icon" style="background: rgba(32, 201, 151, 0.1); color: var(--secondary);"><i class="fa-solid fa-bullseye"></i></div>
                         <h4>Sứ Mệnh</h4>
                         <p style="font-size: 0.88rem; line-height: 1.5;">Xây dựng nền tảng lập trình tốt nhất cho giới trẻ qua mô hình học tập kết hợp (blended learning) và hệ thống kiến thức chính xác, hiệu quả.</p>
                     </div>
                 </div>
+
+                <!-- Column 3: Ý Nghĩa Logo -->
+                <div class="logo-explanation-card reveal glass-card" style="border: 1px solid var(--border-color); border-radius: 16px; padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; transition: var(--transition-smooth); background: rgba(13, 16, 26, 0.4); justify-content: center;">
+                    <div style="display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 1rem;">
+                        <div class="logo-icon-wrapper" style="width: 50px; height: 50px; background: rgba(98, 196, 49, 0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(98, 196, 49, 0.2);">
+                            <img src="./icon.png" alt="CRF Logo" style="width: 32px; height: 32px; object-fit: contain;">
+                        </div>
+                        <div>
+                            <h4 style="font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin: 0;">Ý Nghĩa Logo CRF</h4>
+                            <span style="font-size: 0.7rem; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;">Brand Identity</span>
+                        </div>
+                    </div>
+                    
+                    <div style="font-size: 0.85rem; line-height: 1.55; color: var(--text-secondary); display: flex; flex-direction: column; gap: 0.75rem;">
+                        <p style="margin: 0;">
+                            <strong style="color: var(--primary);"><i class="fa-solid fa-seedling"></i> Xanh Lá Chủ Đạo:</strong> Tượng trưng cho tính năng, sự tươi mới, đổi mới và sáng tạo không ngừng.
+                        </p>
+                        <p style="margin: 0;">
+                            <strong style="color: var(--text-primary);"><i class="fa-solid fa-font"></i> Chữ CRF Network:</strong> Sử dụng tone đen nổi bật thể hiện tính chuyên nghiệp, vững chắc và tầm quan trọng của thương hiệu.
+                        </p>
+                        <p style="margin: 0;">
+                            <strong style="color: var(--secondary);"><i class="fa-solid fa-code"></i> Biểu Tượng Phần Mềm:</strong> Đặt phía bên trái biểu thị mối liên hệ mật thiết với công nghệ và tư duy lập trình sáng tạo.
+                        </p>
+                        <p style="margin: 0;">
+                            <strong style="color: var(--primary);"><i class="fa-solid fa-network-wired"></i> Mạch Điện & Mạng Lưới:</strong> Hai hình mạch đối xứng và mạng lưới ở trung tâm tượng trưng cho tính kỹ thuật, kết nối cộng đồng bền chặt của CRF.
+                        </p>
+                    </div>
+                </div>
             </div>
         </div>
     </section>

style.css

@@ -398,14 +398,14 @@ header {
 /* About / Intro Section */
 .about-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4rem;
-    align-items: center;
+    grid-template-columns: 1.15fr 0.9fr 0.95fr;
+    gap: 3rem;
+    align-items: stretch;
 }
 
 .about-features {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    display: flex;
+    flex-direction: column;
     gap: 1.5rem;
 }
 
@@ -1073,6 +1073,10 @@ header {
     .hero-title {
         font-size: 3rem;
     }
+    .about-grid {
+        grid-template-columns: 1fr;
+        gap: 3rem;
+    }
     .footer-grid {
         grid-template-columns: 1fr 1fr;
         gap: 3rem;