TRANG WEB THƯƠNG MẠI ĐIỆN TỬ

Dưới đây là một **prompt sao chép và dán (copy-paste prompt)** chất lượng cao mà bạn có thể sử dụng ngay với ChatGPT, Claude, Gemini hoặc các công cụ xây dựng trang web bằng AI:

Hãy đóng vai một nhà phát triển web full-stack cấp cao kiêm chuyên gia thiết kế UI/UX.

Tôi muốn bạn xây dựng từ đầu một **trang web thương mại điện tử (e-commerce)** hiện đại, chuyên nghiệp và đáp ứng hoàn toàn trên mọi kích thước màn hình (fully responsive).

### Mục tiêu

Tạo một trang web mua sắm trực tuyến gọn gàng, bắt mắt và phù hợp cho một doanh nghiệp thực tế. Trang web phải hoạt động mượt mà trên điện thoại di động, máy tính bảng và máy tính để bàn.

### Công nghệ

Sử dụng:

* HTML5
* CSS3
* JavaScript
* Sử dụng một tệp HTML duy nhất có tích hợp sẵn cả CSS và JavaScript bên trong.
* Không sử dụng backend trừ khi thực sự bắt buộc.
* Sử dụng mã nguồn sạch sẽ, tổ chức tốt và thân thiện với người mới bắt đầu.

### Các Tính năng của Trang web

1. **Phần Đầu trang / Thanh điều hướng (Header/Navbar)**

   * Logo/tên cửa hàng chuyên nghiệp
   * Trang chủ (Home)
   * Cửa hàng (Shop)
   * Danh mục (Categories)
   * Giới thiệu (About)
   * Liên hệ (Contact)
   * Biểu tượng/thanh tìm kiếm
   * Biểu tượng giỏ hàng kèm số lượng sản phẩm
   * Nút Đăng nhập/Đăng ký

2. **Phần Banner Chính (Hero Section)**

   * Banner khuyến mãi lớn
   * Tiêu đề cuốn hút
   * Mô tả ngắn gọn
   * Nút "Mua ngay" ("Shop Now")
   * Thiết kế thương mại điện tử hiện đại

3. **Danh mục Sản phẩm (Categories)**
   Tạo các thẻ danh mục bắt mắt như:

   * Điện tử (Electronics)
   * Thời trang (Fashion)
   * Giày dép (Shoes)
   * Phụ kiện (Accessories)
   * Làm đẹp (Beauty)
   * Nhà cửa & Đời sống (Home & Living)

4. **Phần Sản phẩm (Product Section)**
   Hiển thị nhiều thẻ sản phẩm bao gồm:

   * Hình ảnh sản phẩm
   * Tên sản phẩm
   * Điểm đánh giá (Rating)
   * Giá gốc
   * Giá khuyến mãi
   * Phần trăm giảm giá
   * Nút "Thêm vào giỏ" ("Add to Cart")
   * Nút "Mua ngay" ("Buy Now")
   * Nút yêu thích/trái tim (Wishlist)

5. **Tìm kiếm & Lọc Sản phẩm (Product Search & Filter)**
   Bổ sung chức năng JavaScript hoạt động thực tế cho:

   * Tìm kiếm sản phẩm
   * Lọc theo danh mục
   * Sắp xếp theo giá
   * Sắp xếp theo điểm đánh giá

6. **Giỏ hàng (Shopping Cart)**
   Tạo một giỏ hàng hoạt động đầy đủ chức năng, nơi người dùng có thể:

   * Thêm sản phẩm
   * Xóa sản phẩm
   * Tăng/giảm số lượng
   * Xem tạm tính (subtotal)
   * Xem tổng tiền thanh toán (total price)
   * Xóa sạch giỏ hàng

7. **Thanh toán (Checkout)**
   Tạo một trang/phần thanh toán chuyên nghiệp gồm:

   * Họ tên khách hàng
   * Email
   * Số điện thoại
   * Địa chỉ
   * Thành phố
   * Tỉnh/Bang
   * Mã bưu điện (PIN code)
   * Phương thức thanh toán
   * Tóm tắt đơn hàng
   * Nút Đặt hàng (Place Order)

8. **Các Phần Đặc biệt (Special Sections)**
   Bổ sung thêm:

   * Khuyến mãi Chớp nhoáng (Flash Sale)
   * Sản phẩm Bán chạy nhất (Best Sellers)
   * Hàng Mới về (New Arrivals)
   * Đánh giá của Khách hàng (Customer Reviews)
   * Đăng ký Nhận bản tin (Newsletter subscription)

9. **Chân trang (Footer)**
   Bao gồm:

   * Giới thiệu về cửa hàng
   * Liên kết nhanh
   * Hỗ trợ khách hàng
   * Chính sách Bảo mật
   * Điều khoản & Điều kiện
   * Biểu tượng mạng xã hội
   * Bản quyền (Copyright)

### Yêu cầu Thiết kế

* Giao diện người dùng (UI) cao cấp và hiện đại
* Nghệ thuật chữ (typography) gọn gàng, rõ nét
* Thẻ sản phẩm cuốn hút
* Hiệu ứng chuyển động mượt mà khi di chuột qua (hover animations)
* Bố cục đáp ứng linh hoạt (responsive layout)
* Menu hamburger thân thiện với thiết bị di động
* Khoảng cách và căn chỉnh hợp lý
* Bảng màu chuyên nghiệp
* Cuộn trang mượt mà (smooth scrolling)
* Các nút bấm và biểu mẫu dễ tiếp cận (accessible)
* Thêm các hiệu ứng chuyển động tinh tế mà không làm chậm trang web

### Yêu cầu JavaScript

Đảm bảo các tính năng sau đây thực sự hoạt động được:

* Tìm kiếm
* Lọc theo danh mục
* Sắp xếp
* Thêm vào giỏ hàng
* Xóa khỏi giỏ hàng
* Điều chỉnh số lượng
* Tính tổng tiền giỏ hàng
* Nút danh sách yêu thích (Wishlist)
* Điều hướng trên di động
* Kiểm tra hợp lệ biểu mẫu thanh toán (Checkout form validation)
* Thông báo xác nhận đơn hàng

Sử dụng các sản phẩm mẫu và hình ảnh sản phẩm chân thực từ các URL hình ảnh có thể truy cập công khai.

### Quan trọng

Đừng chỉ đưa ra lời giải thích. **Hãy xây dựng toàn bộ mã nguồn trang web hoạt động hoàn chỉnh.**

Trả về toàn bộ mã nguồn trong một tệp HTML duy nhất để tôi có thể lưu lại dưới tên `index.html` và mở trực tiếp trên trình duyệt.

Hãy làm cho kết quả cuối cùng trông giống như một trang web thương mại điện tử chuyên nghiệp ngoài đời thực chứ không phải một bản demo sơ sài.

Tôi cũng có thể tạo một **trang web thương mại điện tử hoạt động hoàn chỉnh từ prompt này** và cung cấp cho bạn trọn bộ mã HTML/CSS/JavaScript.