Đăng nhập Đăng ký

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, màu sắc chủ đạo `#047857` đến `#10B981`, và các yêu cầu thiết kế bạn đã đưa ra. Vì Tailwind CSS là một framework tiện ích, tôi sẽ sử dụng các lớp của nó trực tiếp trong HTML. Trang này sẽ được thiết kế mobile-first. **Giải thích các điểm chính:** 1. **Màu sắc và Font:** * `bg-gradient-to-br from-emerald-700 to-emerald-500`: Tạo nền gradient màu xanh lá cây theo yêu cầu (`#047857` tương ứng `emerald-700`, `#10B981` tương ứng `emerald-500`). * `font-sans`: Sử dụng font sans-serif mặc định, hiện đại. * `text-white`, `text-emerald-700`, `text-emerald-600`, `bg-emerald-50`: Sử dụng các màu trong dải màu chủ đạo cho các yếu tố khác nhau. 2. **Card Câu Hỏi:** * `bg-white rounded-xl shadow-xl p-5 md:p-6`: Nền trắng, bo góc lớn, đổ bóng nổi bật, padding cho card. * `transition-all duration-300 ease-in-out hover:shadow-2xl`: Hiệu ứng chuyển động mượt mà khi hover. * `text-xl md:text-2xl font-bold text-emerald-700 mb-4 pb-2 border-b-2 border-emerald-200`: Tiêu đề câu hỏi, nổi bật, có gạch chân nhẹ. 3. **Khu Vực Trả Lời:** * `space-y-4`: Tạo khoảng cách giữa các câu trả lời. * **Mỗi Câu Trả Lời:** * `flex items-start space-x-3`: Layout flex để avatar và nội dung nằm cạnh nhau, `items-start` để căn các item từ trên xuống. * **Avatar:** `w-10 h-10 md:w-12 md:h-12 rounded-full object-cover border-2 border-emerald-200 shadow-md flex-shrink-0`. * Kích thước 1:1, hình tròn. * `object-cover` để ảnh không bị méo. * `border-2 border-emerald-200` tạo viền nhẹ nhàng. * `flex-shrink-0` để avatar không bị co lại khi nội dung dài. * **Bubble Trả Lời:** `flex-1 bg-emerald-50 p-3 rounded-lg shadow-sm relative speech-bubble`. * `flex-1` để chiếm phần không gian còn lại. * `bg-emerald-50` là màu nền nhạt cho bubble. * `rounded-lg shadow-sm` bo góc và đổ bóng nhẹ. * `relative speech-bubble`: Class này cùng với CSS trong thẻ `