[Series 100 Bài Học HTML/CSS Thực Chiến - Bài 22]: Xây Dựng Khu Vực Đánh Giá Sản Phẩm (Product Ratings & Reviews), Bộ Lọc Bình Luận Đa Trạng Thái & Khung Phản Hồi Của Người Bán
Chào mừng anh em đã bước sang Bài 22 trong chuỗi 100 Bài Học Làm Chủ HTML/CSS Qua Dự Án Clone Shopee!
Ở Bài 20 và Bài 21, chúng ta đã hoàn thành phần Chọn mua sản phẩm (Product Brief), Khung thông tin Gian hàng (Shop Info Bar) và Bảng thông số kỹ thuật (Specifications). Hôm nay, chúng ta sẽ lắp ghép mảnh ghép cuối cùng để khép lại trọn vẹn Chương 7 (Trang Chi Tiết Sản Phẩm): Khu vực ĐÁNH GIÁ SẢN PHẨM (Product Ratings & Customer Reviews)!
Trên thực tế, 95% người mua hàng trên Shopee đều lướt xuống khu vực Đánh giá để xem ảnh chụp thực tế và đọc bình luận của người mua trước rồi mới quyết định bấm "Mua Ngay". Về mặt kỹ thuật giao diện, khu vực này là một bài tập tổng hợp cực kỳ xuất sắc gồm 3 thành phần:
-
Khung Tổng Quan Điểm Sao & Bộ Lọc (
Rating Overview Box): Nằm trên nền cam phấn nhạt#fffbf8viền#f9ede5, bên trái hiển thị điểm số khổng lồ4.9 trên 5, bên phải là dãy các nút lọc bình luận (Tất Cả, 5 Sao, 4 Sao, Có Bình Luận, Có Hình Ảnh / Video) sử dụngflex-wrap: wraptự động rớt dòng mượt mà. -
Cấu trúc Media Object cho từng Bình luận (
Review Item): Avatar tròn của người mua nằm cố định bên trái (40x40px), toàn bộ nội dung đánh giá (Tên, 5 ngôi sao, Ngày mua & Phân loại hàng, Nội dung chữ, Dãy ảnh/video thực tế) nằm bên phải. -
Khung "Phản Hồi Của Người Bán" (
Seller Reply Box) & Nút "Hữu Ích?": Hộp thoại nền xám#f5f5f5thụt lề bên trong bình luận thể hiện sự chăm sóc khách hàng tận tâm của Shop.
Hãy cùng giải phẫu và viết code hoàn chỉnh cho khu vực này ngay bây giờ!
1. Tư duy bố cục Khu vực Đánh Giá: Mẫu thiết kế "Media Object" kinh điển
Khi thiết kế danh sách bình luận (trên Shopee, Facebook, YouTube hay bất kỳ mạng xã hội nào), các kỹ sư Frontend luôn sử dụng một khuôn mẫu bố cục kinh điển gọi là Media Object Pattern.
Hãy quan sát cấu trúc trực quan của các thẻ đánh giá khách hàng (Customer Review Cards) với Avatar, dãy ngôi sao và nội dung phản hồi trong thiết kế UI hiện đại dưới đây:
Bản chất của Media Object trong Flexbox là sự phân chia nhiệm vụ giữa 2 cột:
Plaintext
+-----------------------------------------------------------------------------+
| [Avatar] nguyenhuyhoang_dev |
| (40px) ★★★★★ |
| Cố 2026-11-12 14:30 | Phân loại hàng: Trắng Xanh (Ice Vein) |
| định |
| bên Bàn phím gõ cực kỳ êm, âm thocky sẵn không cần mod thêm... |
| trái [Ảnh 1] [Ảnh 2] [▶ Video 0:15] |
| +--------------------------------------------------------------+ |
| | Phản Hồi Của Người Bán: | |
| | Cảm ơn bạn đã tin tưởng ủng hộ AULA Official Store VN ạ! ❤️ | |
| +--------------------------------------------------------------+ |
| 👍 Hữu ích? (24) |
+-----------------------------------------------------------------------------+
Thành phần trong .review-item |
Khai báo CSS cốt lõi | Tại sao phải thiết kế như vậy? |
|---|---|---|
Cột Trái: .review-item__avatar |
width: 4rem; height: 4rem; flex-shrink: 0; |
Giữ ảnh đại diện của người mua luôn tròn trịa ở góc trên bên trái, tuyệt đối không bị bóp méo dù bình luận bên phải dài 20 dòng! |
Cột Phải: .review-item__main |
flex: 1; margin-left: 1.5rem; |
Tự động chiếm toàn bộ chiều ngang còn lại. Nhờ nằm trong cột riêng, cả tên người dùng, ngôi sao, ảnh chụp thực tế và khung Phản hồi của Shop đều thẳng hàng dọc ở mép trái mà không bị tràn xuống dưới chân Avatar! |
2. Thiết kế Khung Điểm 4.9 trên 5 & Bộ Lọc Nút Bấm (Radio Hack)
Ở đầu mục Đánh giá là chiếc hộp .rating-overview có màu nền cam kem cực nhẹ (#fffbf8) và đường viền mảnh (1px solid #f9ede5).
-
Cột Trái (
180px): Chữ4.9được phóng to lên3rem(30px) đi cùng chữtrên 5(1.8rem), tạo điểm nhấn thị giác tức thì về chất lượng sản phẩm. -
Cột Phải (
flex: 1): Chứa 8 nút bấm lọc bình luận (Tất Cả, 5 Sao (1,1k), 4 Sao (85)...). Chúng ta tiếp tục áp dụng kỹ thuật<input type="radio" name="rating-filter">(đã học ở Bài 17 và Bài 20) để người dùng có thể click chuột chọn từng bộ lọc và thấy đường viền cam#ee4d2dnhảy sang nút vừa bấm ngay lập tức!
3. Thực hành: Code Khu Vực Đánh Giá Sản Phẩm Chuẩn Shopee
Bước 1: Bổ sung HTML Khối Đánh Giá Sản Phẩm vào index.html
Hãy mở file index.html, tìm đến cột <div class="product-content__main"> (bên trong <div class="product-content-layout"> mà chúng ta đã tạo ở Bài 21). Ngay bên dưới thẻ đóng </section> của phần MÔ TẢ SẢN PHẨM (.product-desc-section), bạn hãy chèn thêm khối ĐÁNH GIÁ SẢN PHẨM dưới đây:
HTML
<!-- PHẦN C: KHU VỰC ĐÁNH GIÁ SẢN PHẨM (PRODUCT RATINGS & REVIEWS - BÀI 22) -->
<section class="product-ratings-section">
<h2 class="product-section-heading">ĐÁNH GIÁ SẢN PHẨM</h2>
<!-- 1. Khung Tổng Quan Điểm Sao & Bộ Lọc Bình Luận -->
<div class="rating-overview">
<!-- Cột Trái: Điểm số 4.9 trên 5 -->
<div class="rating-overview__briefing">
<div class="rating-overview__score-wrap">
<span class="rating-overview__score">4.9</span>
<span class="rating-overview__score-out-of">trên 5</span>
</div>
<div class="rating-overview__stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
<!-- Cột Phải: Dãy nút bấm lọc bình luận (Bấm đổi nút bằng Radio Hack) -->
<div class="rating-overview__filters">
<label class="rating-filter-item">
<input type="radio" name="rating-filter" class="rating-filter-input" checked>
<span class="rating-filter-btn">Tất Cả</span>
</label>
<label class="rating-filter-item">
<input type="radio" name="rating-filter" class="rating-filter-input">
<span class="rating-filter-btn">5 Sao (1,1k)</span>
</label>
<label class="rating-filter-item">
<input type="radio" name="rating-filter" class="rating-filter-input">
<span class="rating-filter-btn">4 Sao (85)</span>
</label>
<label class="rating-filter-item">
<input type="radio" name="rating-filter" class="rating-filter-input">
<span class="rating-filter-btn">3 Sao (12)</span>
</label>
<label class="rating-filter-item">
<input type="radio" name="rating-filter" class="rating-filter-input">
<span class="rating-filter-btn">2 Sao (2)</span>
</label>
<label class="rating-filter-item">
<input type="radio" name="rating-filter" class="rating-filter-input">
<span class="rating-filter-btn">1 Sao (1)</span>
</label>
<label class="rating-filter-item">
<input type="radio" name="rating-filter" class="rating-filter-input">
<span class="rating-filter-btn">Có Bình Luận (640)</span>
</label>
<label class="rating-filter-item">
<input type="radio" name="rating-filter" class="rating-filter-input">
<span class="rating-filter-btn">Có Hình Ảnh / Video (412)</span>
</label>
</div>
</div>
<!-- 2. Danh Sách Bình Luận Thực Tế Của Người Mua (Review List) -->
<div class="review-list">
<!-- BÌNH LUẬN SỐ 1 (Đầy đủ Ảnh + Video + Phản hồi của Shop) -->
<article class="review-item">
<!-- Cột trái: Avatar người mua -->
<img src="https://placehold.co/100x100/2673dd/ffffff?text=H" alt="Avatar người mua" class="review-item__avatar">
<!-- Cột phải: Nội dung chi tiết đánh giá -->
<div class="review-item__main">
<div class="review-item__author">hieu_backend_dev</div>
<div class="review-item__stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<div class="review-item__meta">
2026-11-12 09:45 | Phân loại hàng: Trắng Xanh (Ice Vein)
</div>
<!-- Các thuộc tính đánh giá chi tiết của Shopee -->
<div class="review-item__attributes">
<p><span>Chất lượng sản phẩm:</span> Tuyệt vời, build chắc chắn, đầm tay</p>
<p><span>Đúng với mô tả:</span> Chuẩn 100% như hình quảng cáo</p>
</div>
<p class="review-item__comment">Mình mua về để gõ code hàng ngày, phải nói là Reaper Switch âm nổ rất đanh và êm (creamy/thocky), không ồn ảnh hưởng đồng nghiệp. Kết nối 2.4GHz và Bluetooth chuyển qua lại giữa PC với MacBook cực nhanh. Shop đóng gói 3 lớp chống sốc rất kỹ, giao Hỏa Tốc ở TP.HCM chỉ 1 tiếng là nhận được hàng!</p>
<!-- Dãy hình ảnh & Video thực tế khách hàng chụp -->
<ul class="review-item__media-list">
<li class="review-media-thumb review-media-thumb--video">
<img src="https://placehold.co/150x150/ee4d2d/ffffff?text=Sound+Test" alt="Video test âm phím">
<span class="video-badge">
<i class="fa-solid fa-video"></i> 0:18
</span>
</li>
<li class="review-media-thumb">
<img src="https://placehold.co/150x150/00bfa5/ffffff?text=Anh+Thuc+Te+1" alt="Ảnh thực tế 1">
</li>
<li class="review-media-thumb">
<img src="https://placehold.co/150x150/ff9800/ffffff?text=Anh+Thuc+Te+2" alt="Ảnh thực tế 2">
</li>
</ul>
<!-- Khung Phản Hồi Của Người Bán -->
<div class="review-item__seller-reply">
<h4 class="seller-reply__heading">Phản Hồi Của Người Bán</h4>
<p class="seller-reply__text">Dạ AULA Official Store VN xin cảm ơn bạn đã tin tưởng lựa chọn sản phẩm và để lại đánh giá 5 sao vô cùng tâm huyết ạ! Chúc bạn luôn có những giờ phút gõ code thật thăng hoa cùng chiếc bàn phím F75 Pro nhé! ❤️</p>
</div>
<!-- Nút bấm Hữu ích (Like) dưới đáy bình luận -->
<div class="review-item__actions">
<button type="button" class="review-like-btn">
<i class="fa-solid fa-thumbs-up"></i>
<span>Hữu Ích? (28)</span>
</button>
</div>
</div>
</article>
<!-- BÌNH LUẬN SỐ 2 -->
<article class="review-item">
<img src="https://placehold.co/100x100/00bfa5/ffffff?text=P" alt="Avatar người mua" class="review-item__avatar">
<div class="review-item__main">
<div class="review-item__author">phuong_designer_99</div>
<div class="review-item__stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<div class="review-item__meta">
2026-11-10 18:20 | Phân loại hàng: Tím Hồng Pastel
</div>
<p class="review-item__comment">Màu Tím Hồng ở ngoài nhìn xinh xỉu luôn mọi người ơi! Đèn LED RGB mạch xuôi cực sáng, núm xoay chỉnh âm lượng vặn rất mượt. Áp được mã giảm giá 50k của Shop nên giá quá hời so với chất lượng.</p>
<ul class="review-item__media-list">
<li class="review-media-thumb">
<img src="https://placehold.co/150x150/7b1fa2/ffffff?text=Tim+Hong+1" alt="Ảnh thực tế màu tím hồng">
</li>
<li class="review-media-thumb">
<img src="https://placehold.co/150x150/d0011b/ffffff?text=Tim+Hong+2" alt="Ảnh góc nghiêng">
</li>
</ul>
<div class="review-item__actions">
<button type="button" class="review-like-btn">
<i class="fa-solid fa-thumbs-up"></i>
<span>Hữu Ích? (9)</span>
</button>
</div>
</div>
</article>
</div>
</section>
Bước 2: Viết CSS chi tiết cho Khu Vực Đánh Giá Sản Phẩm trong ./assets/css/main.css
Hãy mở file main.css, cuộn xuống dưới cùng và bổ sung đoạn code CSS của Bài 22 dưới đây:
CSS
/* Bổ sung vào cuối file ./assets/css/main.css */
/* --- BÀI 22: KHU VỰC ĐÁNH GIÁ SẢN PHẨM (PRODUCT RATINGS & REVIEWS) --- */
.product-ratings-section {
margin-top: 3.6rem;
padding-top: 2.4rem;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
/* 1. Khung Tổng Quan Điểm Sao & Bộ Lọc (.rating-overview) */
.rating-overview {
background-color: #fffbf8; /* Nền cam phấn đặc trưng của khung Đánh giá Shopee */
border: 1px solid #f9ede5;
border-radius: 2px;
padding: 3rem;
margin-bottom: 1.6rem;
display: flex;
align-items: center;
gap: 3.6rem;
}
/* Cột Trái: Điểm số 4.9 trên 5 */
.rating-overview__briefing {
text-align: center;
flex-shrink: 0;
min-width: 14rem;
}
.rating-overview__score-wrap {
color: var(--shopee-primary);
margin-bottom: 0.8rem;
}
.rating-overview__score {
font-size: 3rem; /* Số 4.9 to 30px nổi bật */
font-weight: 500;
}
.rating-overview__score-out-of {
font-size: 1.8rem;
}
.rating-overview__stars {
color: var(--shopee-primary);
font-size: 1.8rem;
display: flex;
justify-content: center;
gap: 0.3rem;
}
/* Cột Phải: Dãy các nút bấm lọc bình luận */
.rating-overview__filters {
flex: 1;
display: flex;
flex-wrap: wrap; /* Tự động rớt xuống hàng 2 khi hết chiều ngang */
gap: 0.8rem;
}
.rating-filter-input {
display: none; /* Ẩn nút radio gốc */
}
.rating-filter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 3.2rem;
min-width: 10rem;
padding: 0 1.4rem;
background-color: var(--white-color);
border: 1px solid rgba(0, 0, 0, 0.09);
border-radius: 2px;
font-size: 1.4rem;
color: var(--text-primary);
cursor: pointer;
user-select: none;
transition: all 0.15s ease;
}
/* Khi nút lọc đang được chọn (:checked) -> Lên viền cam & chữ cam chuẩn Shopee */
.rating-filter-input:checked + .rating-filter-btn {
border-color: var(--shopee-primary);
color: var(--shopee-primary);
}
/* 2. Danh Sách Bình Luận (Media Object Layout) */
.review-item {
display: flex;
align-items: flex-start;
padding: 2rem 0 2rem 1.6rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.review-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
/* Avatar tròn 40x40px bên trái */
.review-item__avatar {
width: 4rem;
height: 4rem;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
/* Khối nội dung bình luận bên phải */
.review-item__main {
flex: 1;
margin-left: 1.5rem;
}
.review-item__author {
font-size: 1.25rem;
color: var(--text-primary);
margin-bottom: 0.4rem;
}
.review-item__stars {
color: var(--shopee-primary);
font-size: 1.1rem;
display: flex;
gap: 0.2rem;
margin-bottom: 0.6rem;
}
.review-item__meta {
font-size: 1.2rem;
color: rgba(0, 0, 0, 0.54);
margin-bottom: 1.2rem;
}
/* Các tiêu chí đánh giá phụ (Chất lượng sản phẩm / Đúng với mô tả) */
.review-item__attributes {
font-size: 1.35rem;
line-height: 2rem;
color: var(--text-primary);
margin-bottom: 1rem;
}
.review-item__attributes span {
color: rgba(0, 0, 0, 0.4);
}
.review-item__comment {
font-size: 1.4rem;
line-height: 2rem;
color: var(--text-primary);
margin-bottom: 1.4rem;
}
/* Dãy ảnh & Video feedback thực tế của khách (72x72px) */
.review-item__media-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.4rem;
}
.review-media-thumb {
width: 7.2rem; /* Rộng 72px chuẩn kích thước ảnh review Shopee */
height: 7.2rem;
border-radius: 2px;
overflow: hidden;
position: relative;
cursor: zoom-in; /* Con trỏ chuột biến thành kính lúp phóng to ảnh! */
border: 1px solid rgba(0, 0, 0, 0.05);
}
.review-media-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Nhãn thời lượng Video nằm đè ở đáy tấm ảnh đầu tiên (0:18) */
.video-badge {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2rem;
background-color: rgba(0, 0, 0, 0.54);
color: var(--white-color);
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.6rem;
}
/* Khung Phản Hồi Của Người Bán (Nền xám #f5f5f5) */
.review-item__seller-reply {
background-color: #f5f5f5;
padding: 1.4rem 1.6rem;
border-radius: 2px;
margin-bottom: 1.4rem;
}
.seller-reply__heading {
font-size: 1.35rem;
font-weight: 500;
color: #8b572a; /* Màu nâu cam đặc trưng cho tiêu đề Phản hồi của Shop */
margin-bottom: 0.6rem;
}
.seller-reply__text {
font-size: 1.35rem;
line-height: 1.9rem;
color: rgba(0, 0, 0, 0.65);
}
/* Nút bấm Hữu ích (Thumbs up) */
.review-like-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 1.3rem;
color: rgba(0, 0, 0, 0.4);
transition: color 0.15s ease;
}
.review-like-btn:hover {
color: var(--shopee-primary);
}
4. Giải mã dòng code: 3 Chi tiết UX tinh tế trong Bài 22
-
Con trỏ kính lúp
cursor: zoom-intrên ảnh Feedback (.review-media-thumb):-
Trên Shopee, khi người dùng đưa chuột vào các tấm ảnh nhỏ (
72x72px) do khách hàng chụp, họ kỳ vọng bấm vào đó để phóng to tấm ảnh lên xem kỹ chất lượng sản phẩm. -
Thay vì dùng
cursor: pointer(bàn tay bấm link bình thường), thuộc tínhcursor: zoom-in;biến con trỏ chuột thành chiếc kính lúp có dấu cộng (+) bên trong — đúng 100% hành vi của trang Shopee thật!
-
-
Nhãn thời lượng Video đè lên đáy ảnh (
.video-badge):- Ở tấm ảnh đầu tiên của Bình luận số 1, chúng ta đặt một dải băng đen bán trong suốt (
background-color: rgba(0, 0, 0, 0.54)) bám sát đáy khung ảnh (left: 0; right: 0; bottom: 0; height: 2rem;), bên trái là icon máy quay<i class="fa-solid fa-video"></i>, bên phải là số giây0:18nhờjustify-content: space-between.
- Ở tấm ảnh đầu tiên của Bình luận số 1, chúng ta đặt một dải băng đen bán trong suốt (
-
Phối màu tinh tế cho Khung Tổng Quan Điểm Sao (
#fffbf8&#f9ede5):- Thay vì dùng lại màu nền xám
#fafafagiống khung Giá bán ở trên (dễ gây nhàm chán), Shopee pha một tông màu Cam Kem siêu nhạt (#fffbf8) đi kèm đường viền#f9ede5cho hộp.rating-overview. Sắc ấm này làm tôn vinh dàn ngôi sao màu cam#ee4d2dvà tạo cảm giác tích cực, đáng tin cậy cho khu vực đánh giá!
- Thay vì dùng lại màu nền xám
5. Bài tập thực hành cuối Chương 7 & Bước sang Chương 8!
Hãy lưu lại file index.html và main.css, sau đó nhấn F5 trên trình duyệt và cuộn xuống khu vực ĐÁNH GIÁ SẢN PHẨM:
-
Hãy thử click chuột qua lại giữa các nút lọc: "Tất Cả", "5 Sao (1,1k)", "Có Bình Luận (640)", "Có Hình Ảnh / Video (412)" — viền cam phản hồi tức thì cực kỳ mượt mà!
-
Hãy đưa chuột vào 3 tấm ảnh/video feedback của bình luận đầu tiên để thấy con trỏ chuột biến thành kính lúp phóng to (
zoom-in). -
Quan sát khung Phản Hồi Của Người Bán nằm gọn gàng bên dưới dãy ảnh với tiêu đề màu nâu cam ấm áp.
Thử thách khám phá dành cho bạn trước khi sang Bài 23:
-
Bạn có thể tái sử dụng thanh Pagination (
.pagination) mà chúng ta đã viết ở Bài 19 để chèn thêm vào dưới đáy của.review-list(giúp người mua chuyển sang trang bình luận số 2, số 3...) chỉ bằng cách copy-paste khối<ul class="pagination">vào dưới cùng của.product-ratings-sectionkhông? Hãy thử ngay để thấy sức mạnh của Component CSS tái sử dụng nhé! -
Hãy thử chuyển nút "Hữu Ích? (28)" từ thẻ
<button>sang cấu trúc<label>+<input type="checkbox">để khi người dùng bấm vào chữ Hữu Ích, ngón tay cái<i class="fa-solid fa-thumbs-up">đổi sang màu Cam Shopee và giữ nguyên trạng thái đã Like!
🎉 XIN CHÚC MỪNG! BẠN ĐÃ HOÀN THÀNH CHƯƠNG 7 (BÀI 20 – BÀI 22): CHINH PHỤC TRANG CHI TIẾT SẢN PHẨM (PRODUCT DETAIL PAGE)! Từ Bài 23, chúng ta sẽ chính thức bước sang Chương 8: Xây Dựng Giao Diện Trang Giỏ Hàng & Thanh Toán (Shopping Cart & Sticky Checkout Bar) — nơi chúng ta sẽ thiết kế bảng giỏ hàng đa Gian hàng (chia theo từng Shop), chọn Voucher giảm giá và đặc biệt là Thanh tổng tiền "Mua Hàng" bám dính ở đáy màn hình (bottom: 0) khi cuộn trang!
All rights reserved
