Okay, đây là mã HTML sử dụng Tailwind CSS cho trang FAQ của bạn với phong cách năng động và màu sắc chủ đạo đã cho. Tôi sẽ hiển thị mặc định 2 câu trả lời đầu tiên cho mỗi câu hỏi.
Câu Hỏi Thường Gặp
**Giải thích các phần chính:**
1. **Màu nền chính:** `bg-gradient-to-br from-[#047857] to-[#10B981]` tạo hiệu ứng chuyển màu nền đẹp mắt.
2. **Thẻ câu hỏi (`questionCard`):**
* `bg-white rounded-xl shadow-lg`: Nền trắng, bo góc lớn, đổ bóng tạo cảm giác nổi.
* `overflow-hidden`: Đảm bảo các góc bo được hiển thị đúng.
3. **Tiêu đề câu hỏi (`h2`):**
* `bg-gradient-to-r from-[#10B981] to-[#059669] text-white p-4 md:p-5 text-lg sm:text-xl font-bold`: Nền chuyển màu khác cho tiêu đề, chữ trắng, padding và kích thước chữ lớn, in đậm để nổi bật.
4. **Khu vực trả lời (`answers-list`):**
* `p-4 md:p-6 space-y-4`: Padding và khoảng cách giữa các câu trả lời.
5. **Mỗi mục trả lời (`answer-item`):**
* `flex items-start space-x-3`: Sử dụng flexbox để xếp avatar bên trái, nội dung bên phải. `items-start` để avatar và bong bóng chat căn lề trên.
* **Avatar (`img`):**
* `w-10 h-10 md:w-12 md:h-12 rounded-full object-cover`: Kích thước cố định (tăng nhẹ trên desktop), bo tròn hoàn toàn, `object-cover` để ảnh không bị méo (1:1).
* `border-2 border-emerald-200 shadow-sm flex-shrink-0`: Viền nhẹ màu xanh lá nhạt, đổ bóng nhẹ, `flex-shrink-0` để avatar không bị co lại.
* **Bong bóng chat (`div.flex-1`):**
* `flex-1`: Để bong bóng chiếm hết không gian còn lại.
* `bg-emerald-50 p-3 rounded-lg rounded-tl-none shadow-md relative`: Nền xanh lá rất nhạt (`emerald-50`), bo góc, `rounded-tl-none` để tạo hiệu ứng "đuôi" của bong bóng chat chỉ về phía avatar. Đổ bóng `shadow-md` để tăng độ sâu.
* **Tên người dùng:** `font-semibold text-[#047857] text-sm md:text-base` - In đậm, màu xanh lá đậm.
* **Nội dung trả lời:** `text-gray-700 text-sm md:text-base mt-1 leading-relaxed` - Chữ xám, `leading-relaxed` cho dễ đọc.
* **Thời gian:** `text-xs text-gray-500 mt-2 text-right` - Chữ nhỏ, xám nhạt, căn phải.
6. **Nút "Xem thêm câu trả lời":**
* `show-more-btn`: Class để JavaScript nhận diện.
* `text-[#047857] hover:text-[#10B981] font-semibold ...`: Màu chữ xanh lá, hiệu ứng hover, bo tròn.
* `(${item.answers.length - initialAnswersToShow})`: Hiển thị số lượng câu trả lời còn lại.
* `▼`: Icon mũi tên xuống.
7. **JavaScript:**
* Lặp qua `faqData` để tạo HTML động cho mỗi câu hỏi và câu trả lời.
* `initialAnswersToShow`: Biến để kiểm soát số câu trả lời hiển thị ban đầu.
* Các câu trả lời từ `initialAnswersToShow` trở đi sẽ có `style="display: none;"`.
* Nút "Xem thêm" chỉ hiển thị nếu có nhiều hơn `initialAnswersToShow` câu trả lời.
* Khi click "Xem thêm", các câu trả lời ẩn sẽ được hiển thị (`style.display = 'flex'`) và nút "Xem thêm" sẽ bị xóa.
**Lưu ý quan trọng:**
* **Responsive:** Mã đã sử dụng các tiền tố `md:` và `sm:` của Tailwind để đảm bảo giao diện tốt trên cả mobile và desktop.
* **Màu sắc:** Các màu `#047857` và `#10B981` được sử dụng trực tiếp hoặc thông qua các màu tương ứng của Tailwind (ví dụ `emerald-700`, `emerald-500`, `emerald-50`). Bạn có thể tùy chỉnh thêm nếu cần.
* **JavaScript:** Phần JavaScript là cần thiết để xử lý logic "Xem thêm". Nếu bạn muốn trang tĩnh hoàn toàn mà không có JS, bạn sẽ phải hiển thị tất cả các câu trả lời hoặc sử dụng các kỹ thuật CSS phức tạp hơn (ví dụ: checkbox hack) để ẩn/hiện, điều này có thể không thân thiện bằng.
* **Font chữ:** `font-sans` sẽ sử dụng font sans-serif mặc định của hệ thống. Bạn có thể thay đổi nếu muốn sử dụng một font cụ thể.
* **Hình ảnh avatar:** Đảm bảo các URL avatar là hợp lệ.
Để sử dụng, bạn chỉ cần copy toàn bộ khối mã này vào một file `.html` và mở bằng trình duyệt. Tailwind CSS sẽ được tải qua CDN trong thẻ `
Okay, đây là mã HTML sử dụng Tailwind CSS cho trang FAQ của bạn với phong cách năng động và màu sắc chủ đạo đã cho. Tôi sẽ hiển thị mặc định 2 câu trả lời đầu tiên cho mỗi câu hỏi.