[Series 100 Bài Học HTML/CSS Thực Chiến - Bài 21]: Xây Dựng Khung Thông Tin Gian Hàng (Shop Info Bar), Avatar Đính Huy Hiệu & Bảng Thông Số Kỹ Thuật (Product Specifications)

Chào mừng anh em đã bước sang Bài 21 trong chuỗi 100 Bài Học Làm Chủ HTML/CSS Qua Dự Án Clone Shopee!

Ở Bài 20, chúng ta đã dựng xong khối đầu tiên của trang Chi Tiết Sản Phẩm (Product Brief) gồm Thư viện ảnh, chọn Màu sắc có góc tích 3D và cụm nút Thêm Vào Giỏ Hàng / Mua Ngay. Tuy nhiên, trước khi xuống tiền mua một món đồ công nghệ đắt tiền trên mạng, khách hàng luôn có thói quen cuộn xuống ngay bên dưới để kiểm tra 2 yếu tố sống còn:

1. Độ uy tín của Người Bán (Shop Info Bar): Gian hàng này là ai? Có nhãn Yêu thích+ hay Shopee Mall đính dưới chân Avatar không? Tỷ lệ phản hồi Chat là bao nhiêu phần trăm? Tham gia Shopee bao lâu rồi?

2. Chi Tiết & Mô Tả Sản Phẩm (Product Specifications & Description): Sản phẩm bảo hành bao lâu, xuất xứ từ đâu, kho hàng còn bao nhiêu chiếc, và bài viết mô tả tính năng chi tiết như thế nào?

Trong Bài 21 hôm nay, chúng ta sẽ giải phẫu và code trọn bộ 2 khu vực này với 3 kỹ thuật CSS cực kỳ thực chiến:

• Thiết kế Avatar tròn có đính Huy hiệu (Avatar Badge Overlay) nằm vắt ngang qua viền dưới của ảnh đại diện.

• Chia lưới thông số Gian hàng (3 Cột × 2 Hàng) tự động căn phải số liệu màu cam bằng justify-content: space-between.

• Sử dụng thẻ ngữ nghĩa <dl>, <dt>, <dd> (Description List) kết hợp hiệu ứng giữ nguyên định dạng xuống dòng văn bản tự nhiên bằng white-space: pre-line.

1. Giải phẫu Khung Thông Tin Gian Hàng (Shop Info Bar): Avatar Đính Nhãn & Lưới 6 Chỉ Số

Nếu nhìn vào thanh thông tin Shop trên Shopee, bạn sẽ thấy nó là một dải hộp trắng nằm ngang, được chia làm 2 phần rõ rệt ngăn cách nhau bởi một vạch kẻ dọc mảnh (border-right: 1px solid rgba(0,0,0,0.05)):

Phần bên trái (420px - Định danh Gian hàng):

Điểm nhấn thị giác đẹp nhất ở khu vực này chính là Khung Avatar tròn (80x80px) có đính dải băng "Yêu thích+" màu cam vắt ngang qua đáy hình tròn.

Hãy quan sát mô hình thiết kế một Avatar tròn có đính nhãn định danh (Identity Badge) nằm đè lên cạnh dưới trong UI hiện đại dưới đây:

Nhiều bạn mới học thường mắc một lỗi kinh điển khi làm Avatar đính nhãn: Đặt border-radius: 50% và overflow: hidden trực tiếp trên thẻ cha .shop-avatar để bo tròn bức ảnh bên trong. Hậu quả là khi bạn đặt nhãn <span class="shop-avatar__badge">Yêu thích+</span> ở dưới đáy (bottom: 0), hai đầu của chiếc nhãn chữ nhật sẽ bị đường tròn overflow: hidden cắt cụt mất góc!

Giải pháp chuẩn của chuyên gia:

• Thẻ cha (.shop-avatar): Chỉ đặt width: 8rem; height: 8rem; position: relative; (Tuyệt đối KHÔNG đặt overflow: hidden ở đây!).

• Thẻ ảnh bên trong (.shop-avatar__img): Tự bo tròn chính nó bằng width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 1px solid rgba(0,0,0,0.09);.

• Thẻ nhãn (.shop-avatar__badge): Đặt position: absolute; bottom: -0.2rem; left: 50%; transform: translateX(-50%);. Nhờ thẻ cha không cắt viền, chiếc nhãn màu cam có thể nằm đè lên đáy hình tròn một cách nguyên vẹn và sắc nét!

Phần bên phải (flex: 1 - Lưới 6 chỉ số uy tín):

Gồm 6 cặp thông số (Đánh Giá, Tỷ Lệ Phản Hồi, Tham Gia, Sản Phẩm, Thời Gian Phản Hồi, Người Theo Dõi) được chia thành 3 cột đều nhau (grid-template-columns: repeat(3, 1fr)), khoảng cách giữa các cột khá rộng (column-gap: 4.8rem) để tạo độ thoáng mắt.

2. Tại sao Bảng Thông Số Kỹ Thuật (Chi Tiết Sản Phẩm) nên dùng <dl>, <dt>, <dd> thay vì <table>?

Bên dưới khung thông tin Shop là khu vực CHI TIẾT SẢN PHẨM (hiển thị từng cặp: Danh Mục $\rightarrow$ Shopee > Máy Tính, Thương hiệu $\rightarrow$ AULA, Hạn bảo hành $\rightarrow$ 12 tháng...).

Trong HTML5 ngữ nghĩa (Semantic HTML), khi trình bày một danh sách gồm các cặp "Tên thuộc tính (Key) — Giá trị (Value)", bộ 3 thẻ sinh ra dành riêng cho nhiệm vụ này chính là:

• <dl> (Description List): Khung bao danh sách mô tả.

• <dt> (Description Term): Tên nhãn thuộc tính (Cột trái màu xám mờ rộng 140px).

• <dd> (Description Details): Giá trị của thuộc tính (Cột phải màu chữ đen đậm).

3. Thực hành: Code Khung Gian Hàng & Bảng Chi Tiết Thông Số Kỹ Thuật

Bước 1: Bổ sung HTML Khung Gian Hàng & Chi Tiết Sản Phẩm vào index.html

Hãy mở file index.html, tìm đến thẻ <section class="product-detail-section"> mà chúng ta đã tạo ở Bài 20. Ngay bên dưới thẻ đóng </div> của .product-briefing (nhưng vẫn nằm bên trong <section class="product-detail-section">), bạn hãy chèn tiếp 2 khối Thông Tin Gian Hàng và Chi Tiết & Mô Tả Sản Phẩm dưới đây:

HTML

            <!-- 3. KHUNG THÔNG TIN GIAN HÀNG (SHOP INFO BAR - BÀI 21) -->
            <div class="shop-info-bar">
                
                <!-- Cụm Trái: Avatar + Tên Shop + 2 Nút Hành Động -->
                <div class="shop-info__left">
                    <a href="#" class="shop-avatar">
                        <img src="https://placehold.co/160x160/ee4d2d/ffffff?text=AULA+VN" alt="AULA Official Store" class="shop-avatar__img">
                        <span class="shop-avatar__badge">Yêu thích+</span>
                    </a>

                    <div class="shop-profile">
                        <h2 class="shop-profile__name">AULA Official Store VN</h2>
                        <p class="shop-profile__status">
                            <span class="status-dot"></span> Online 4 phút trước
                        </p>
                        
                        <div class="shop-profile__actions">
                            <button type="button" class="btn shop-btn shop-btn--chat">
                                <i class="fa-regular fa-message"></i>
                                <span>Chat Ngay</span>
                            </button>
                            <a href="#" class="btn shop-btn shop-btn--view">
                                <i class="fa-solid fa-store"></i>
                                <span>Xem Shop</span>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Cụm Phải: Lưới 3 cột x 2 hàng thống kê chỉ số uy tín của Shop -->
                <div class="shop-info__right">
                    <div class="shop-metric-item">
                        <span class="shop-metric__label">Đánh Giá</span>
                        <span class="shop-metric__value">48,6k</span>
                    </div>
                    <div class="shop-metric-item">
                        <span class="shop-metric__label">Tỷ Lệ Phản Hồi</span>
                        <span class="shop-metric__value">99%</span>
                    </div>
                    <div class="shop-metric-item">
                        <span class="shop-metric__label">Tham Gia</span>
                        <span class="shop-metric__value">4 năm trước</span>
                    </div>
                    <div class="shop-metric-item">
                        <span class="shop-metric__label">Sản Phẩm</span>
                        <span class="shop-metric__value">185</span>
                    </div>
                    <div class="shop-metric-item">
                        <span class="shop-metric__label">Thời Gian Phản Hồi</span>
                        <span class="shop-metric__value">trong vài phút</span>
                    </div>
                    <div class="shop-metric-item">
                        <span class="shop-metric__label">Người Theo Dõi</span>
                        <span class="shop-metric__value">142,8k</span>
                    </div>
                </div>

            </div>

            <!-- 4. KHUNG CHI TIẾT THÔNG SỐ & MÔ TẢ SẢN PHẨM (PRODUCT CONTENT LAYOUT) -->
            <div class="product-content-layout">
                
                <!-- Cột chính bên trái (Chiếm phần lớn diện tích): Thông số & Bài viết mô tả -->
                <div class="product-content__main">
                    
                    <!-- PHẦN A: BẢNG CHI TIẾT SẢN PHẨM (SPECIFICATIONS) -->
                    <section class="product-specs-section">
                        <h2 class="product-section-heading">CHI TIẾT SẢN PHẨM</h2>
                        
                        <dl class="specs-list">
                            <div class="specs-row">
                                <dt class="specs-term">Danh Mục</dt>
                                <dd class="specs-detail">
                                    <a href="#" class="specs-link">Shopee</a> &gt; 
                                    <a href="#" class="specs-link">Máy Tính &amp; Laptop</a> &gt; 
                                    <a href="#" class="specs-link">Phụ Kiện Máy Tính</a> &gt; 
                                    <a href="#" class="specs-link">Bàn Phím</a>
                                </dd>
                            </div>
                            <div class="specs-row">
                                <dt class="specs-term">Thương hiệu</dt>
                                <dd class="specs-detail"><a href="#" class="specs-link">AULA</a></dd>
                            </div>
                            <div class="specs-row">
                                <dt class="specs-term">Kiểu kết nối</dt>
                                <dd class="specs-detail">3 Mode (Không dây Bluetooth 5.0 / Receiver 2.4GHz / Có dây Type-C)</dd>
                            </div>
                            <div class="specs-row">
                                <dt class="specs-term">Bàn phím cơ</dt>
                                <dd class="specs-detail">Có (Mạch xuôi Hotswap 5 Pin + Cấu trúc Gasket Mount 5 lớp tiêu âm)</dd>
                            </div>
                            <div class="specs-row">
                                <dt class="specs-term">Hạn bảo hành</dt>
                                <dd class="specs-detail">12 tháng</dd>
                            </div>
                            <div class="specs-row">
                                <dt class="specs-term">Loại bảo hành</dt>
                                <dd class="specs-detail">Bảo hành nhà cung cấp (Đổi mới trong 15 ngày đầu)</dd>
                            </div>
                            <div class="specs-row">
                                <dt class="specs-term">Kho hàng</dt>
                                <dd class="specs-detail">482</dd>
                            </div>
                            <div class="specs-row">
                                <dt class="specs-term">Gửi từ</dt>
                                <dd class="specs-detail">TP. Hồ Chí Minh</dd>
                            </div>
                        </dl>
                    </section>

                    <!-- PHẦN B: BÀI VIẾT MÔ TẢ SẢN PHẨM (DESCRIPTION) -->
                    <section class="product-desc-section">
                        <h2 class="product-section-heading">MÔ TẢ SẢN PHẨM</h2>
                        
                        <div class="product-desc-content">
                            <p class="product-desc-text">🔥 BÀN PHÍM CƠ KHÔNG DÂY AULA F75 PRO - ĐỈNH CAO CUSTOM TRONG TẦM GIÁ!

Bàn phím cơ AULA F75 Pro là phiên bản nâng cấp toàn diện với mạch xuôi (South-facing LED) giúp không bị cấn keycap Cherry Profile và mang lại hiệu ứng ánh sáng RGB rực rỡ hơn bao giờ hết.

✨ ĐẶC ĐIỂM NỔI BẬT:
- Cấu trúc Gasket Mount cao cấp kèm 5 lớp Foam tiêu âm (Foam PCB Poron, IXPE Switch Pad, PET Pad, Foam đáy Silicone) cho âm gõ "Thocky / Creamy" cực kỳ êm tai ngay khi mở hộp mà không cần độ chế.
- Kết nối 3 chế độ linh hoạt: Bluetooth 5.0 (kết nối tối đa 3 thiết bị), USB 2.4GHz tốc độ phản hồi 1ms chuyên trị Game FPS, và cáp rời USB Type-C.
- Núm xoay CNC đa năng ở góc phải: Dễ dàng chỉnh âm lượng hoặc độ sáng đèn LED chỉ với 1 thao tác xoay.
- Pin dung lượng khủng 4000mAh: Thời lượng sử dụng lên tới 2-3 tuần khi tắt LED.

📦 BỘ SẢN PHẨM BAO GỒM:
01 x Bàn phím cơ AULA F75 Pro
01 x Dây cáp bọc dù USB Type-C
01 x Dụng cụ nhổ Keycap / Switch 2 trong 1
02 x Switch dự phòng đi kèm + Nắp che bụi</p>
                        </div>
                    </section>

                </div>

                <!-- Cột phụ bên phải (230px): Top Sản Phẩm Bán Chạy Của Shop -->
                <aside class="product-content__sidebar">
                    <h3 class="sidebar-top-picks__heading">Top Sản Phẩm Bán Chạy</h3>
                    
                    <div class="sidebar-top-picks__list">
                        <!-- Sản phẩm gợi ý 1 -->
                        <a href="#" class="top-pick-item">
                            <img src="https://placehold.co/200x200/00bfa5/ffffff?text=Chuot+AULA+SC580" alt="Chuột AULA" class="top-pick-item__img">
                            <h4 class="top-pick-item__name">Chuột Gaming Không Dây AULA SC580 3 Mode Siêu Nhẹ</h4>
                            <span class="top-pick-item__price">₫389.000</span>
                        </a>
                        <!-- Sản phẩm gợi ý 2 -->
                        <a href="#" class="top-pick-item">
                            <img src="https://placehold.co/200x200/ff9800/ffffff?text=Keycap+PBT+Bo+Tron" alt="Bộ Keycap" class="top-pick-item__img">
                            <h4 class="top-pick-item__name">Bộ Keycap PBT Dye-Sub Xuyên LED XDA Profile 128 Phím</h4>
                            <span class="top-pick-item__price">₫195.000</span>
                        </a>
                    </div>
                </aside>

            </div>

Bước 2: Viết CSS cho Khung Gian Hàng & Bảng Chi Tiết Sản Phẩm trong ./assets/css/main.css

Hãy mở file main.css, cuộn xuống cuối file và bổ sung đoạn code CSS dưới đây:

CSS

/* Bổ sung vào cuối file ./assets/css/main.css */

/* --- BÀI 21: KHUNG THÔNG TIN GIAN HÀNG (SHOP INFO BAR) & CHI TIẾT SẢN PHẨM --- */

/* 1. Khung Thông Tin Gian Hàng (.shop-info-bar) */
.shop-info-bar {
    background-color: var(--white-color);
    border-radius: 2px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    margin-top: 1.5rem;
    padding: 2.5rem;
    display: flex;
    align-items: center;
}

/* Cụm Trái: Avatar + Tên Shop + Nút bấm (420px) */
.shop-info__left {
    width: 42rem;
    padding-right: 2.5rem;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-shrink: 0;
}

/* Khung Avatar tròn có đính nhãn Yêu thích+ ở đáy */
.shop-avatar {
    width: 8rem;                    /* Đường kính 80px chuẩn Shopee */
    height: 8rem;
    position: relative;             /* Làm gốc tọa độ cho nhãn .shop-avatar__badge */
    flex-shrink: 0;
}

.shop-avatar__img {
    width: 100%;
    height: 100%;
    border-radius: 50%;             /* Bo tròn trực tiếp trên thẻ img để không cắt mất nhãn ở đáy! */
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.09);
}

.shop-avatar__badge {
    position: absolute;
    bottom: -0.2rem;
    left: 50%;
    transform: translateX(-50%);    /* Căn chính giữa đáy hình tròn */
    background-color: var(--shopee-primary);
    color: var(--white-color);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5rem;
    padding: 0 0.6rem;
    border-radius: 2px;
    white-space: nowrap;
}

/* Thông tin tên Shop & Trạng thái Online */
.shop-profile__name {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.shop-profile__status {
    font-size: 1.3rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}

.status-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: #00bfa5;      /* Chấm tròn xanh báo hiệu Shop đang hoạt động */
}

.shop-profile__actions {
    display: flex;
    gap: 1rem;
}

.shop-btn {
    height: 3.4rem;
    min-width: 11.5rem;
    font-size: 1.35rem;
    gap: 0.6rem;
}

/* Nút Chat Ngay: Nền cam phấn nhạt + Viền cam */
.shop-btn--chat {
    background-color: rgba(238, 77, 45, 0.08);
    border: 1px solid var(--shopee-primary);
    color: var(--shopee-primary);
}

.shop-btn--chat:hover {
    background-color: rgba(238, 77, 45, 0.14);
}

/* Nút Xem Shop: Nền trắng + Viền xám */
.shop-btn--view {
    border: 1px solid rgba(0, 0, 0, 0.09);
    color: #555555;
}

.shop-btn--view:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Cụm Phải: Lưới 3 cột x 2 hàng hiển thị 6 chỉ số uy tín */
.shop-info__right {
    flex: 1;
    padding-left: 4.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 4.8rem;             /* Khoảng cách ngang giữa 3 cột: 48px */
    row-gap: 2rem;                  /* Khoảng cách dọc giữa 2 hàng: 20px */
}

.shop-metric-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Đẩy nhãn sang trái, con số màu cam sang phải */
    font-size: 1.4rem;
}

.shop-metric__label {
    color: var(--text-secondary);
}

.shop-metric__value {
    color: var(--shopee-primary);
    font-weight: 400;
}

/* 2. Bố cục 2 cột cho phần Chi Tiết & Top Sản Phẩm Bán Chạy (.product-content-layout) */
.product-content-layout {
    margin-top: 1.5rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.product-content__main {
    flex: 1;
    background-color: var(--white-color);
    border-radius: 2px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 2.5rem;
}

/* Tiêu đề xám đặc trưng của mục CHI TIẾT SẢN PHẨM & MÔ TẢ SẢN PHẨM */
.product-section-heading {
    background-color: #fafafa;
    padding: 1.4rem;
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 2.4rem;
    border-radius: 2px;
}

/* Bảng thông số kỹ thuật (<dl>, <dt>, <dd>) */
.specs-list {
    padding: 0 1.4rem;
    margin-bottom: 3.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.specs-row {
    display: flex;
    align-items: flex-start;
    font-size: 1.4rem;
    line-height: 1.8rem;
}

/* Cột Nhãn thông số (<dt>) cố định chiều rộng 140px */
.specs-term {
    width: 14rem;
    color: rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}

/* Cột Giá trị thông số (<dd>) */
.specs-detail {
    flex: 1;
    color: var(--text-primary);
}

.specs-link {
    color: #0055aa;
}

/* Khu vực văn bản Mô Tả Sản Phẩm */
.product-desc-content {
    padding: 0 1.4rem;
}

/* TUYỆT CHIÊU: white-space: pre-line giúp giữ nguyên các dấu Enter xuống dòng trong HTML! */
.product-desc-text {
    font-size: 1.4rem;
    line-height: 2.4rem;            /* Giãn dòng 24px giúp đọc văn bản dài cực kỳ dễ chịu */
    color: rgba(0, 0, 0, 0.8);
    white-space: pre-line;
}

/* 3. Cột phụ bên phải: Top Sản Phẩm Bán Chạy Của Shop (230px) */
.product-content__sidebar {
    width: 23rem;
    background-color: var(--white-color);
    border-radius: 2px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    flex-shrink: 0;
}

.sidebar-top-picks__heading {
    font-size: 1.4rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
    margin-bottom: 1.6rem;
}

.top-pick-item {
    display: block;
    padding-bottom: 1.6rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.top-pick-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.top-pick-item__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 2px;
    margin-bottom: 0.8rem;
}

.top-pick-item__name {
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.8rem;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.top-pick-item__price {
    font-size: 1.5rem;
    color: var(--shopee-primary);
    font-weight: 500;
}

4. Giải mã dòng code: 3 Chi tiết "nhỏ nhưng cứu cả giờ đồng hồ" trong Bài 21

1. Sự kỳ diệu của white-space: pre-line trong mục Mô Tả Sản Phẩm (.product-desc-text):

   • Mặc định trong HTML, dù bạn có gõ phím Enter xuống dòng 10 lần bên trong thẻ <p>, trình duyệt vẫn sẽ gộp tất cả lại thành 1 dòng ngang duy nhất (buộc người mới phải chèn hàng chục thẻ <br> thủ công rất cực khổ).

   • Trên thực tế, khi người bán hàng nhập bài mô tả sản phẩm vào Database của Shopee, dữ liệu lưu trữ chỉ là văn bản thuần có chứa ký tự xuống dòng (\n).

   • Chỉ cần thêm đúng 1 dòng white-space: pre-line;, trình duyệt sẽ tự động nhận diện mọi phím Enter trong code để ngắt dòng y hệt như bạn đang soạn thảo trong Word, đồng thời vẫn tự động bẻ dòng gọn gàng khi chạm mép khung!

2. Sự phân tách column-gap: 4.8rem và row-gap: 2rem trong .shop-info__right:

   • Ở các bài trước, chúng ta dùng gap: 1rem (áp dụng bằng nhau cho cả khoảng cách ngang và dọc).

   • Nhưng ở bảng 6 chỉ số của Shop, khoảng cách giữa các hàng dọc chỉ cần 20px (row-gap: 2rem), trong khi khoảng cách giữa 3 cột ngang phải rộng tới 48px (column-gap: 4.8rem) để chữ của cột 1 không bị dính vào số của cột 2. CSS Grid cho phép tách riêng column-gap và row-gap cực kỳ linh hoạt!

3. Tại sao .product-content-layout cần align-items: flex-start?

   • Khu vực bên dưới gồm Cột trái (.product-content__main chứa bài viết dài) và Cột phải (.product-content__sidebar chỉ chứa 2 sản phẩm bán chạy ngắn hơn).

   • Trong Flexbox, giá trị mặc định của align-items là stretch (kéo dãn chiều cao bằng nhau)! Nếu không khai báo align-items: flex-start, chiếc hộp trắng của cột phải (.product-content__sidebar) sẽ bị kéo dài ngoẵng xuống tận đáy bài viết mô tả, để lại một khoảng trắng trống rỗng rất vô duyên ở dưới 2 sản phẩm bán chạy!

5. Bài tập thực hành cuối bài & Hẹn gặp ở Bài 22!

Hãy lưu lại file index.html và main.css, sau đó nhấn F5 trên trình duyệt để chiêm ngưỡng khu vực Thông Tin Gian Hàng và Chi Tiết Sản Phẩm:

• Khung Gian Hàng hiện lên bề thế với Avatar tròn AULA VN có đính nhãn Yêu thích+ vắt ngang qua đáy, chấm xanh Online, cặp nút Chat Ngay / Xem Shop và 6 chỉ số màu cam thẳng hàng tăm tắp.

• Ngay bên dưới là bảng CHI TIẾT SẢN PHẨM chia 2 cột rõ ràng cùng bài viết MÔ TẢ SẢN PHẨM tự động ngắt đoạn thoáng mắt, bên phải là cột Top Sản Phẩm Bán Chạy của Shop!

Thử thách khám phá dành cho bạn trước khi sang Bài 22:

1. Hãy thử vào .product-desc-text trong main.css, tạm thời tắt dòng white-space: pre-line; trong F12 để xem toàn bộ bài viết mô tả sản phẩm bị dồn cục lại thành một đoạn văn rối tinh rối mù như thế nào nhé!

2. Hãy thử thêm hiệu ứng Rút gọn văn bản mô tả kèm lớp phủ mờ dần (Gradient Fade-out) ở cuối bài viết mô tả nếu bài viết quá dài (bằng cách giới hạn max-height và thêm một nút "Xem thêm ▾" ở dưới đáy)!

Ở Bài 22, chúng ta sẽ hoàn thiện mảnh ghép cuối cùng của Chương 7 (Trang Chi Tiết Sản Phẩm): Xây dựng Khu Vực Đánh Giá Sản Phẩm (Product Ratings & Customer Reviews) — gồm Khung tổng điểm 4.9 trên 5 nền cam nhạt, dãy nút lọc đánh giá (Tất cả, 5 Sao, Có Bình Luận, Có Hình Ảnh / Video) và Danh sách bình luận thực tế của người mua hàng (kèm ảnh/video feedback và khung Phản hồi của Người Bán)!