Đăng nhập Đăng ký

Chắc chắn rồi, đây là mã HTML sử dụng Tailwind CSS cho trang FAQ của bạn với phong cách hiện đại tối giản và màu chủ đạo đã chỉ định. **Giải thích và Lưu ý:** 1. **Màu sắc:** * `from-red-800 to-red-600`: Gradient màu đỏ đậm cho tiêu đề chính và tiêu đề câu hỏi. Các màu này gần với `#B91C1C`. * `text-red-700`, `border-red-200`, `bg-red-50`: Các sắc độ khác nhau của màu đỏ (gần `#EF4444` và nhạt hơn) được sử dụng cho tên người dùng, viền avatar, và nền bong bóng chat để tạo sự nhất quán. 2. **Cấu trúc HTML (sinh bởi JavaScript):** * Mỗi câu hỏi là một `div.question-card` với `bg-white`, `rounded-xl`, `shadow-lg`. * Tiêu đề câu hỏi (`div.question-header`) có gradient nền, font chữ nổi bật và một icon mũi tên để chỉ trạng thái mở/đóng. * Phần trả lời (`div.answers-content`) ban đầu được ẩn (`hidden`). Khi nhấp vào tiêu đề câu hỏi, nó sẽ hiện ra. * Mỗi câu trả lời (`div.answer-item`) là một `flex container`: * Avatar (`img`): `w-10 h-10` (hoặc `w-12 h-12` trên desktop), `rounded-full`, `object-cover` (đảm bảo 1:1 và không méo), `border-2 border-red-200`. * Khối nội dung trả lời: * Bong bóng chat (`div.bg-red-50`): Nền màu đỏ nhạt, `p-3`, `rounded-lg`, `shadow-sm`. * Có một "mũi tên" nhỏ (`div.absolute`) trỏ về phía avatar, tạo hiệu ứng bong bóng chat (chỉ hiển thị trên màn hình `sm` trở lên để tránh giao diện phức tạp trên di động nhỏ). * Tên người dùng (`p.font-semibold text-red-700`). * Nội dung trả lời (`p.text-gray-800`). * Thời gian đăng (`p.text-xs text-gray-500`). 3. **JavaScript:** * Dữ liệu `faqData` được nhúng trực tiếp vào script (trong thực tế, bạn có thể fetch từ API). * Lặp qua `faqData` để tạo các card câu hỏi và câu trả lời. * **Accordion:** Khi nhấp vào tiêu đề câu hỏi, phần trả lời tương ứng sẽ mở/đóng, và icon mũi tên xoay. Đồng thời, các câu hỏi khác sẽ tự động đóng lại. * **"Xem thêm trả lời":** * Ban đầu, chỉ `initialVisibleAnswers` (mặc định là 2) câu trả lời được hiển thị. * Nếu có nhiều hơn, một nút "Xem thêm..." sẽ xuất hiện. * Nhấp vào nút này sẽ hiển thị/ẩn các câu trả lời còn lại và thay đổi văn bản của nút. * `e.stopPropagation()` được dùng cho nút "Xem thêm" để khi click vào nó không kích hoạt sự kiện click của `questionHeader` (tránh đóng/mở accordion không mong muốn). * **Mở câu hỏi đầu tiên (Tùy chọn):** Đoạn code `if (index === 0)` sẽ tự động mở câu hỏi đầu tiên khi tải trang. Bạn có thể bỏ đi nếu không muốn. 4. **Responsive:** * Sử dụng các class responsive của Tailwind (ví dụ `md:p-6`, `md:text-xl`, `sm:block`) để điều chỉnh giao diện trên các kích thước màn hình khác nhau. * Thiết kế cơ bản là một cột, phù hợp với di động. 5. **Hiện đại & Tối giản:** * Sử dụng khoảng trắng hợp lý (`space-y-5`, `space-x-3`, `p-5 md:p-6`). * Bóng đổ (`shadow-lg`, `shadow-sm`) và bo góc (`rounded-xl`, `rounded-lg`, `rounded-full`) được áp dụng tinh tế. * Font chữ `font-sans` mặc định của Tailwind thường là một lựa chọn tốt cho phong cách hiện đại. Để sử dụng, bạn chỉ cần copy đoạn mã này vào file HTML của mình. Hãy đảm bảo bạn đã nhúng Tailwind CSS vào dự án.