Quy trình chỉnh sửa

Bạn không cần sửa code trực tiếp. Hãy tiếp tục chat với ChatGPT trong cùng cuộc hội thoại. Mỗi lần chỉnh sửa:

1. Gửi yêu cầu cho ChatGPT
2. Copy code mới
3. Paste đè lên file index.html cũ và lưu
4. Refresh trình duyệt (F5) để xem kết quả

Mẹo quan trọng: Luôn yêu cầu ChatGPT trả về toàn bộ code hoàn chỉnh, không chỉ phần thay đổi. Gõ thêm: “Trả lại toàn bộ file HTML hoàn chỉnh.”

Thay thông tin doanh nghiệp

Nếu bạn dùng prompt mẫu tiệm nail, hãy đổi thành thông tin thật:

Cập nhật trang web với thông tin mới:

- Tên: [Tên doanh nghiệp thật]
- Slogan: [Slogan ngắn gọn, 1 câu]
- Loại hình: [quán cafe / tiệm tóc / studio ảnh / ...]
- Địa chỉ: [Địa chỉ thật]
- Số điện thoại: [SĐT thật]
- Giờ mở cửa: [VD: 9:00 - 21:00, T2 - CN]
- Dịch vụ: [Liệt kê 4-6 dịch vụ chính kèm giá]

Giữ nguyên thiết kế, chỉ thay nội dung. Trả lại toàn bộ file HTML hoàn chỉnh.

Đổi phong cách thiết kế

Bí quyết: Đưa mã màu cụ thể

Đừng nói “đổi sang màu xanh” — hãy nói chính xác màu nào:

Đổi color palette của trang web:
- Primary: #0ea5e9 (xanh dương sky)
- Secondary: #0284c7 (xanh đậm hơn)
- Accent: #f59e0b (vàng amber)
- Background: #f0f9ff (xanh rất nhạt)
- Dark text: #0f172a

Cập nhật tất cả button, heading, border, gradient theo palette mới.
Trả lại toàn bộ file HTML hoàn chỉnh.

Một số palette đẹp để thử

Phong cách	Primary	Secondary	Background	Dùng cho
Sang trọng	#1a1a2e	#d4a574	#faf8f5	Spa, salon, khách sạn
Tươi trẻ	#10b981	#059669	#ecfdf5	Cafe, trà sữa, gym
Chuyên nghiệp	#3b82f6	#1e40af	#f8fafc	Dịch vụ, tư vấn, công ty
Ấm áp	#ea580c	#c2410c	#fff7ed	Nhà hàng, bakery
Tối giản	#18181b	#71717a	#ffffff	Portfolio, studio

Đổi font chữ

Đổi font:
- Heading: "Playfair Display" (hoặc "Montserrat" nếu muốn hiện đại hơn)
- Body: "Be Vietnam Pro" (font tiếng Việt đẹp, dễ đọc)
- Font size body: 16px, line-height: 1.7

Import từ Google Fonts. Trả lại toàn bộ file HTML hoàn chỉnh.

Mẹo: Font Be Vietnam Pro là font được thiết kế riêng cho tiếng Việt — hiển thị dấu rất đẹp. Rất phù hợp cho trang web Việt Nam.

Thêm hình ảnh chất lượng cao

Hình ảnh đẹp biến trang web “bình thường” thành “chuyên nghiệp”. Có 3 nguồn ảnh miễn phí:

Cách 1: Unsplash (khuyên dùng)

Unsplash có hàng triệu ảnh chất lượng cao, miễn phí hoàn toàn:

Thay tất cả hình placeholder bằng ảnh thật từ Unsplash:

- Hero background: ảnh tiệm nail sang trọng, ánh sáng ấm
  URL: https://images.unsplash.com/photo-1604654894610-df63bc536371?w=1200
- Dịch vụ 1 (Sơn gel): https://images.unsplash.com/photo-1604654894610-df63bc536371?w=400
- Dịch vụ 2 (Nail art): https://images.unsplash.com/photo-1519014816548-bf5fe059798b?w=400
- Gallery: 6 ảnh nail art đẹp từ Unsplash, kích thước 600x400

Dùng object-fit: cover để ảnh không bị méo.
Trả lại toàn bộ file HTML hoàn chỉnh.

Cách tìm ảnh trên Unsplash:

1. Vào unsplash.com
2. Gõ từ khoá (VD: “nail salon”, “coffee shop”)
3. Click vào ảnh đẹp → copy link ảnh
4. Thêm ?w=800 vào cuối link để resize

Cách 2: Dùng ảnh của bạn

Nếu bạn có ảnh cửa hàng, sản phẩm riêng:

1. Đặt ảnh vào cùng thư mục với file index.html
2. Đặt tên ảnh đơn giản, không dấu: cua-hang.jpg, dich-vu-1.jpg
3. Yêu cầu ChatGPT:

Thay các hình bằng ảnh local:
- Hero: "hero-bg.jpg"
- Dịch vụ 1: "dich-vu-1.jpg"
- Dịch vụ 2: "dich-vu-2.jpg"
(ảnh nằm cùng thư mục với index.html)

Thêm object-fit: cover, border-radius: 12px cho tất cả ảnh.

Cách 3: Dùng AI tạo ảnh

Bạn có thể dùng ChatGPT (DALL·E) hoặc các tool miễn phí để tạo ảnh:

Tạo cho tôi 1 ảnh minh hoạ: bàn tay đang được làm nail, phong cách watercolor, tông hồng pastel, nền trắng

Lưu ảnh về → đặt vào thư mục → dùng như cách 2.

Nâng cấp thiết kế với prompt nâng cao

Thêm gradient hiện đại

Đổi hero section:
- Background: gradient từ góc trái trên sang phải dưới, màu #fdf2f8 → #ede9fe → #dbeafe
- Thêm các blob trang trí: 2-3 hình tròn gradient mờ (opacity 0.3), kích thước lớn, position absolute, tạo hiệu ứng glassmorphism
- Text trắng hoặc đậm tuỳ theo contrast

Thêm social proof

Thêm dải social proof ngay dưới hero:
- Dòng chữ "Được tin tưởng bởi 500+ khách hàng"
- 5 avatar tròn xếp chồng (overlapping, dùng placeholder)
- Rating: "⭐⭐⭐⭐⭐ 4.9/5 trên Google"
- Background trắng, shadow nhẹ, padding 16px

Thêm FAQ section

Thêm phần FAQ (Câu hỏi thường gặp) trước footer:
- 5-6 câu hỏi dạng accordion (click để mở/đóng)
- Câu hỏi: giá cả, thời gian, đặt lịch, parking, chính sách huỷ
- Animation mượt khi mở/đóng
- Icon + / - bên phải

Thêm nút Zalo / Messenger nổi

Đây là tính năng quan trọng nhất cho doanh nghiệp VN:

Thêm floating button ở góc phải dưới:
- Nút tròn, đường kính 56px, background gradient #0068ff (Zalo blue)
- Icon: chữ "Chat" hoặc emoji 💬
- Khi hover: scale lớn hơn, shadow đậm hơn
- Khi click: mở link https://zalo.me/[SĐT-của-bạn]
- Thêm tooltip "Chat Zalo" hiện khi hover
- Có animation pulse nhẹ để thu hút sự chú ý
- Position: fixed, bottom: 24px, right: 24px, z-index: 9999

5 nguyên tắc thiết kế (không cần biết design)

Ghi nhớ 5 nguyên tắc này, trang web của bạn sẽ luôn đẹp:

1. Whitespace (khoảng trắng) — Đừng nhồi nhét. Padding lớn = sang trọng.
2. Ít màu thôi — Chỉ dùng 2-3 màu. 1 màu chính, 1 màu phụ, 1 màu nền.
3. Font size hierarchy — Heading lớn (36-48px), subheading vừa (20-24px), body nhỏ (16px). Sự khác biệt kích thước tạo ra thứ bậc rõ ràng.
4. Consistency — Button cùng style, card cùng border-radius, spacing đều nhau.
5. CTA nổi bật — Nút quan trọng nhất (Đặt lịch, Liên hệ) phải có màu nổi bật, kích thước lớn.

Checklist chỉnh sửa

• Thông tin doanh nghiệp chính xác
• Màu sắc phù hợp với thương hiệu
• Hình ảnh chất lượng (không bị mờ, méo)
• Nút Zalo/Messenger hoạt động
• Trang web hiển thị tốt khi resize cửa sổ

Khi đã hài lòng, bài tiếp theo sẽ hướng dẫn thêm bảng giá chuyên nghiệp, form liên hệ thật, và animation mượt.