Đăng nhập Đăng ký

Tuyệt vời! Dưới đây là mã HTML cho trang FAQ của bạn, sử dụng Bootstrap 5, với phong cách hiện đại tối giản và màu sắc chủ đạo bạn yêu cầu. **Giải thích các điểm chính:** 1. **Màu sắc và Phong cách:** * Sử dụng CSS Variables (`:root`) để dễ dàng quản lý màu sắc `#047857` (primary) và `#10B981` (secondary). * `body` có màu nền rất nhạt (`#f0fdf4`) tạo cảm giác nhẹ nhàng, sạch sẽ. * Header chính của trang FAQ (`.faq-header`) sử dụng gradient từ màu chính đến màu phụ. * Mỗi câu hỏi là một `.question-card` với bo tròn (`border-radius: 0.75rem`) và đổ bóng nhẹ (`box-shadow`). * Phần header của card câu hỏi (`.question-card .card-header`) sử dụng màu `--primary-color`. 2. **Cấu trúc Câu hỏi & Trả lời:** * **Câu hỏi:** Tiêu đề câu hỏi nằm trong `.card-header` của card, nổi bật với màu nền chính. * **Trả lời:** * Mỗi câu trả lời (`.answer-item`) là một flex container. * **Avatar người dùng (`.user-avatar`):** Hiển thị dạng tròn, kích thước 45x45px, có viền màu `--secondary-color`. * **Khung trả lời (`.answer-bubble`):** * Màu nền nhạt (`--bubble-bg: #e6fef7;`) tạo sự tương phản nhẹ. * Bo tròn các góc, tạo cảm giác như một bong bóng chat. * Phần `/* Optional: Chat bubble tail ... */` trong CSS là một ví dụ nếu bạn muốn thêm "đuôi" cho bong bóng chat, nhưng hiện tại nó đang được comment lại để giữ giao diện đơn giản hơn. * **Tên người dùng (`.user-name`):** In đậm, màu `--primary-color`. * **Nội dung trả lời (`.answer-content`):** Văn bản chính. * **Thời gian đăng (`.answer-time`):** Chữ nhỏ, màu xám nhạt. 3. **"Xem thêm trả lời":** * Biến `INITIAL_ANSWERS_TO_SHOW` (đặt là 2) trong JavaScript quyết định số câu trả lời hiển thị ban đầu. * Các câu trả lời vượt quá số này sẽ có class `initially-hidden` (CSS: `display: none;`). * Nút "Xem thêm ... trả lời" (`.btn-view-more`) được tạo nếu có nhiều hơn `INITIAL_ANSWERS_TO_SHOW` câu trả lời. * JavaScript xử lý sự kiện click vào nút này: * Chuyển đổi hiển thị của các câu trả lời ẩn. * Thay đổi văn bản của nút thành "Ẩn bớt" hoặc "Xem thêm ... trả lời". 4. **Tính Hiện đại và Thân thiện với Di động:** * Sử dụng Bootstrap 5 nên có sẵn các tính năng responsive. * Khoảng cách (padding, margin) được thiết kế hợp lý. * Bo tròn và đổ bóng được sử dụng tinh tế để tạo cảm giác hiện đại. * Font chữ hệ thống (`-apple-system, BlinkMacSystemFont, ...`) đảm bảo hiển thị đẹp trên nhiều thiết bị. * Các vùng chạm như nút "Xem thêm" đủ lớn để dễ dàng tương tác trên di động. 5. **Ngôn ngữ:** * Các văn bản tĩnh như "Câu Hỏi Thường Gặp", "Xem thêm ... trả lời", "Ẩn bớt" đều bằng tiếng Việt. Bạn có thể sao chép toàn bộ mã này vào một file `.html` và mở bằng trình duyệt để xem kết quả. Các hình ảnh avatar sẽ được tải từ URL trong dữ liệu JSON.