[Series 100 Bài Học HTML/CSS Thực Chiến - Bài 24]: Xây Dựng Giao Diện Trang Thanh Toán (Checkout Page) & Bí Thuật Vẽ Đường Viền Phong Bì Thư Kẻ Sọc Đỏ - Xanh Bằng repeating-linear-gradient

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

Ở Bài 23, chúng ta đã hoàn thành Trang Giỏ Hàng (Shopping Cart) với thanh tổng tiền bám dính ở đáy màn hình. Khi người mua kiểm tra xong giỏ hàng và bấm vào nút "Mua Hàng", họ sẽ bước sang màn hình cuối cùng để hoàn tất giao dịch: Trang Thanh Toán (Checkout / Order Confirmation Page)!

Nếu bạn từng đặt hàng trên Shopee, chắc chắn bạn sẽ ấn tượng ngay lập tức với 3 chi tiết thiết kế mang tính biểu tượng tại màn hình Thanh toán:

1. Đường viền "Phong Bì Thư" kẻ sọc chéo Đỏ - Xanh (Airmail Envelope Border): Nằm ngay trên đỉnh khung Địa Chỉ Nhận Hàng, gợi liên tưởng đến một bưu phẩm quốc tế sắp được gửi đi. Rất nhiều lập trình viên mới tưởng đây là một tấm ảnh .png cắt sẵn, nhưng thực chất các kỹ sư Shopee đã vẽ nó 100% bằng một hàm toán học trong CSS mang tên repeating-linear-gradient!

2. Dòng kết hợp "Lời Nhắn Cho Shop + Phương Thức Vận Chuyển": Chia đôi khung dưới của đơn hàng bằng hệ thống đường kẻ nét đứt (dashed border) tinh tế như một tờ hóa đơn bưu điện.

3. Khối Phương Thức Thanh Toán & Bảng Tổng Kết Hóa Đơn (Payment & Order Summary): Kết hợp chọn tab phương thức thanh toán (ShopeePay, Thẻ Tín dụng, Thanh toán khi nhận hàng - COD) có góc tích tam giác 3D và bảng tính nhẩm 3 dòng (Tổng tiền hàng + Phí vận chuyển - Voucher giảm giá = Tổng thanh toán).

Hãy cùng giải phẫu và viết code trọn bộ màn hình Thanh toán này ngay trong Bài 24!

1. Giải mã bí thuật: Vẽ đường viền Phong bì thư kẻ sọc chéo Đỏ - Xanh bằng repeating-linear-gradient

Hãy nhìn vào họa tiết đường viền sọc chéo Đỏ - Trắng - Xanh - Trắng kinh điển của những chiếc phong bì thư đường hàng không (Airmail Envelope) dưới đây:

Trên Shopee, thanh viền ở đỉnh hộp Địa Chỉ Nhận Hàng cao đúng 3px (0.3rem) và lặp đi lặp lại chu kỳ 4 dải màu nghiêng góc 45deg:[Vạch Đỏ 33px] $\rightarrow$ [Khoảng Trắng 9px] $\rightarrow$ [Vạch Xanh Dương 33px] $\rightarrow$ [Khoảng Trắng 9px]... lặp lại vô tận đến hết chiều rộng 1200px!

Nếu dùng linear-gradient thông thường, màu sắc sẽ bị nhòe chuyển sắc từ từ (mờ dần) từ Đỏ sang Trắng. Vậy làm sao để tạo ra ranh giới sắc cạnh (Hard Color Stops) giữa các vạch màu và bắt chúng tự động lặp lại?

Plaintext

0px               33px     42px               75px     84px
|██████████████████|░░░░░░░░|▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒|░░░░░░░░|  --> Lặp lại chu kỳ 84px vô tận!
   ĐỎ (#f18d9b)      TRẮNG     XANH (#6fa6d6)    TRẮNG
 (Từ 0px -> 33px)  (33->42px) (Từ 42px -> 75px) (75->84px)

Nguyên lý "Hard Stop" trong repeating-linear-gradient:

Khi màu sau bắt đầu tại đúng vị trí pixel mà màu trước vừa kết thúc (ví dụ: Màu Đỏ kết thúc ở 33px, và Màu Trắng cũng bắt đầu ngay tại 33px), trình duyệt sẽ không làm nhòe màu nữa mà cắt một đường thẳng sắc lẹm!

2. Tư duy bố cục Bảng Tổng Kết Hóa Đơn (Order Summary Grid)

Ở cuối trang Thanh toán (trước nút "Đặt Hàng"), Shopee trình bày một bảng tính toán chi phí nằm dồn về góc bên phải gồm 3 dòng:

• Tổng tiền hàng: $\longrightarrow$ ₫4.740.000

• Phí vận chuyển: $\longrightarrow$ ₫38.000

• Tổng cộng Voucher giảm giá: $\longrightarrow$ -₫50.000

• Tổng thanh toán: $\longrightarrow$ ₫4.728.000 (Cỡ chữ lớn 2.8rem màu cam rực rỡ)

Thay vì dùng display: flex; justify-content: flex-end; cho từng dòng riêng lẻ (dễ làm cột chữ bên trái bị lệch nhau), chúng ta dùng display: grid; grid-template-columns: 1fr auto; đặt ở góc phải:

• Cột 1 (1fr): Chứa nhãn chữ (Tổng tiền hàng, Phí vận chuyển...), căn phải hoặc căn trái gọn gàng.

• Cột 2 (auto hoặc cố định 16rem căn phải): Chứa các con số tiền tệ thẳng hàng dọc theo đơn vị hàng nghìn, hàng triệu!

3. Thực hành: Code Giao Diện Trang Thanh Toán (Checkout Page) Chuẩn Shopee

Bước 1: Bổ sung HTML Khu Vực Thanh Toán (.checkout-section) vào index.html

Hãy mở file index.html, tìm đến bên trong <div class="shopee-container grid-container"> (ngay bên dưới </section> của Chương 8 - Trang Giỏ Hàng mà chúng ta vừa làm ở Bài 23) và chèn toàn bộ cấu trúc Trang Thanh Toán dưới đây:

HTML

        <!-- ================================================================= -->
        <!-- BÀI 24: GIAO DIỆN TRANG THANH TOÁN (CHECKOUT PAGE)                -->
        <!-- ================================================================= -->
        <section class="checkout-section">
            
            <!-- 1. KHUNG ĐỊA CHỈ NHẬN HÀNG (CÓ VIỀN PHONG BÌ THƯ ĐỎ - XANH) -->
            <div class="checkout-address-box">
                <!-- Dải viền phong bì thư kẻ sọc Đỏ - Xanh cao 3px ở đỉnh hộp -->
                <div class="envelope-border-line"></div>

                <div class="checkout-address__content">
                    <div class="checkout-address__header">
                        <i class="fa-solid fa-location-dot checkout-address__icon"></i>
                        <h2 class="checkout-address__title">Địa Chỉ Nhận Hàng</h2>
                    </div>

                    <div class="checkout-address__body">
                        <div class="checkout-address__user">
                            <strong>Nguyễn Huy Hoàng (Hiếu)</strong>
                            <span>(+84) 941 280 073</span>
                        </div>
                        <p class="checkout-address__detail">
                            Đường Võ Văn Kiệt, Phường 16, Quận 8, Thành Phố Hồ Chí Minh
                        </p>
                        <span class="checkout-address__default-badge">Mặc Định</span>
                        <a href="#" class="checkout-address__change-btn">Thay Đổi</a>
                    </div>
                </div>
            </div>

            <!-- 2. KHUNG SẢN PHẨM ĐẶT MUA & LỜI NHẮN / VẬN CHUYỂN -->
            <div class="checkout-products-box">
                
                <!-- Tiêu đề 4 cột của bảng sản phẩm thanh toán -->
                <div class="checkout-table-header">
                    <div class="checkout-col-product">Sản phẩm</div>
                    <div class="checkout-col-center">Đơn giá</div>
                    <div class="checkout-col-center">Số lượng</div>
                    <div class="checkout-col-right">Thành tiền</div>
                </div>

                <!-- Thông tin Gian hàng -->
                <div class="checkout-shop-bar">
                    <span class="cart-shop-badge">Yêu thích+</span>
                    <span class="checkout-shop-name">AULA Official Store VN</span>
                    <span class="checkout-shop-divider">|</span>
                    <button type="button" class="checkout-chat-now">
                        <i class="fa-solid fa-comments"></i> Chat ngay
                    </button>
                </div>

                <!-- Dòng sản phẩm xác nhận mua -->
                <div class="checkout-item-row">
                    <div class="checkout-item-info">
                        <img src="https://placehold.co/120x120/ee4d2d/ffffff?text=AULA+F75" alt="AULA F75 Pro" class="checkout-item-img">
                        <div class="checkout-item-name-wrap">
                            <h3 class="checkout-item-name">Bàn phím cơ không dây AULA F75 Pro 3 Mode Mạch Xuôi Hotswap LED RGB</h3>
                        </div>
                        <span class="checkout-item-variation">Loại: Trắng Xanh (Ice Vein)</span>
                    </div>
                    <div class="checkout-col-center">₫850.000</div>
                    <div class="checkout-col-center">1</div>
                    <div class="checkout-col-right checkout-item-subtotal">₫850.000</div>
                </div>

                <!-- Khu vực Lời nhắn cho Shop (Trái) & Đơn vị vận chuyển (Phải) ngăn cách bằng viền nét đứt -->
                <div class="checkout-order-extra">
                    <!-- Cột trái: Ô nhập lời nhắn -->
                    <div class="checkout-message-col">
                        <label for="buyer-note" class="checkout-message-label">Lời nhắn:</label>
                        <input type="text" id="buyer-note" class="checkout-message-input" placeholder="Lưu ý cho Người bán (Ví dụ: Giao giờ hành chính)...">
                    </div>

                    <!-- Cột phải: Thông tin Đơn vị vận chuyển -->
                    <div class="checkout-shipping-col">
                        <div class="shipping-col__label">Đơn vị vận chuyển:</div>
                        <div class="shipping-col__details">
                            <p class="shipping-method-name">Nhanh (SPX Express)</p>
                            <p class="shipping-receive-date">
                                <i class="fa-regular fa-truck"></i> Đảm bảo nhận hàng từ 15 Tháng 11 - 16 Tháng 11
                            </p>
                            <p class="shipping-voucher-note">Nhận Voucher trị giá ₫15.000 nếu đơn hàng được giao đến bạn sau ngày 16 Tháng 11 2026.</p>
                        </div>
                        <a href="#" class="shipping-col__change">Thay Đổi</a>
                        <div class="shipping-col__fee">₫0</div>
                    </div>
                </div>

                <!-- Tổng số tiền của riêng Gian hàng này -->
                <div class="checkout-shop-total">
                    <span class="checkout-shop-total__label">Tổng số tiền (1 sản phẩm):</span>
                    <span class="checkout-shop-total__price">₫850.000</span>
                </div>

            </div>

            <!-- 3. KHUNG PHƯƠNG THỨC THANH TOÁN & TỔNG KẾT HÓA ĐƠN CUỐI CÙNG -->
            <div class="checkout-payment-box">
                
                <!-- Tầng A: Chọn Phương thức thanh toán (Dùng Radio Hack có Góc tích 3D!) -->
                <div class="payment-method-bar">
                    <h3 class="payment-method__title">Phương thức thanh toán</h3>
                    
                    <div class="payment-method__options">
                        <label class="variation-item">
                            <input type="radio" name="payment-type" class="variation-input">
                            <span class="variation-btn">Ví ShopeePay</span>
                        </label>
                        <label class="variation-item">
                            <input type="radio" name="payment-type" class="variation-input">
                            <span class="variation-btn">Thẻ Tín dụng/Ghi nợ</span>
                        </label>
                        <label class="variation-item">
                            <input type="radio" name="payment-type" class="variation-input">
                            <span class="variation-btn">Google Pay / Apple Pay</span>
                        </label>
                        <!-- Mặc định chọn Thanh toán khi nhận hàng (COD) -->
                        <label class="variation-item">
                            <input type="radio" name="payment-type" class="variation-input" checked>
                            <span class="variation-btn">Thanh toán khi nhận hàng</span>
                        </label>
                    </div>
                </div>

                <!-- Tầng B: Bảng tính nhẩm chi phí (Order Summary Table) -->
                <div class="payment-summary-area">
                    <div class="payment-summary-grid">
                        <span class="summary-label">Tổng tiền hàng</span>
                        <span class="summary-value">₫850.000</span>

                        <span class="summary-label">Phí vận chuyển</span>
                        <span class="summary-value">₫30.000</span>

                        <span class="summary-label">Giảm giá phí vận chuyển</span>
                        <span class="summary-value">-₫30.000</span>

                        <span class="summary-label">Tổng cộng Voucher giảm giá</span>
                        <span class="summary-value">-₫50.000</span>

                        <span class="summary-label summary-label--total">Tổng thanh toán</span>
                        <span class="summary-value summary-value--total">₫800.000</span>
                    </div>
                </div>

                <!-- Tầng C: Điều khoản & Nút ĐẶT HÀNG chốt sổ -->
                <div class="payment-submit-bar">
                    <p class="payment-terms-text">
                        Nhấn "Đặt hàng" đồng nghĩa với việc bạn đồng ý tuân theo 
                        <a href="#" class="payment-terms-link">Điều khoản Shopee</a>
                    </p>
                    <button type="button" class="btn btn--primary payment-order-btn">
                        Đặt hàng
                    </button>
                </div>

            </div>

        </section>

Bước 2: Viết CSS cho Viền Phong Bì Thư (repeating-linear-gradient) & Trang Thanh Toán 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 24 dưới đây:

CSS

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

/* --- BÀI 24: GIAO DIỆN TRANG THANH TOÁN & VIỀN PHONG BÌ THƯ ĐỎ - XANH --- */

.checkout-section {
    margin-top: 2rem;
    margin-bottom: 5rem;
}

/* 1. Khung Địa Chỉ Nhận Hàng & Viền Phong Bì Thư */
.checkout-address-box {
    background-color: var(--white-color);
    border-radius: 2px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 1.2rem;
    overflow: hidden;
}

/* BÍ THUẬT: Vẽ đường viền phong bì thư kẻ sọc chéo Đỏ - Xanh bằng repeating-linear-gradient! */
.envelope-border-line {
    height: 0.3rem;                 /* Cao đúng 3px chuẩn Shopee */
    width: 100%;
    background-position-x: -3rem;
    background-size: 11.6rem 0.3rem;
    background-image: repeating-linear-gradient(
        45deg,
        #6fa6d6,
        #6fa6d6 3.3rem,             /* Vạch Xanh Dương dài 33px */
        transparent 0,
        transparent 4.1rem,         /* Khe trắng 8px (Từ 33px -> 41px) */
        #f18d9b 0,
        #f18d9b 7.4rem,             /* Vạch Đỏ Hồng dài 33px (Từ 41px -> 74px) */
        transparent 0,
        transparent 8.2rem          /* Khe trắng 8px kết thúc chu kỳ (Từ 74px -> 82px) */
    );
}

.checkout-address__content {
    padding: 2.8rem 3rem 2.4rem;
}

.checkout-address__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--shopee-primary);
    margin-bottom: 1.6rem;
}

.checkout-address__icon {
    font-size: 1.8rem;
}

.checkout-address__title {
    font-size: 1.8rem;
    font-weight: 500;
}

.checkout-address__body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 1.5rem;
    gap: 1.6rem;
}

.checkout-address__user {
    color: var(--text-primary);
    font-weight: 700;
    display: flex;
    gap: 0.8rem;
}

.checkout-address__detail {
    color: var(--text-primary);
}

.checkout-address__default-badge {
    font-size: 1.1rem;
    color: var(--shopee-primary);
    border: 1px solid var(--shopee-primary);
    padding: 0.1rem 0.5rem;
    border-radius: 1px;
}

.checkout-address__change-btn {
    color: #0055aa;
    font-size: 1.4rem;
    margin-left: 1.6rem;
}

/* 2. Khung Sản Phẩm Đặt Mua & Lời Nhắn / Vận Chuyển */
.checkout-products-box {
    background-color: var(--white-color);
    border-radius: 2px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 1.2rem;
}

/* Chia 4 cột đồng bộ cho Header và Dòng sản phẩm */
.checkout-table-header,
.checkout-item-row {
    display: grid;
    grid-template-columns: 1fr 15rem 15rem 16rem;
    align-items: center;
    padding: 0 3rem;
}

.checkout-table-header {
    height: 5rem;
    font-size: 1.4rem;
    color: var(--text-secondary);
    padding-top: 1.6rem;
}

.checkout-col-product {
    font-size: 1.8rem;
    color: var(--text-primary);
}

.checkout-col-center {
    text-align: center;
    font-size: 1.4rem;
    color: var(--text-primary);
}

.checkout-col-right {
    text-align: right;
    font-size: 1.4rem;
    color: var(--text-primary);
}

.checkout-shop-bar {
    padding: 1.6rem 3rem 1.2rem;
    display: flex;
    align-items: center;
    font-size: 1.4rem;
}

.checkout-shop-name {
    color: var(--text-primary);
    margin-right: 0.8rem;
}

.checkout-shop-divider {
    color: rgba(0, 0, 0, 0.14);
    margin-right: 0.8rem;
}

.checkout-chat-now {
    color: #00bfa5;
    font-size: 1.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.checkout-item-row {
    padding-top: 1.6rem;
    padding-bottom: 2rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.09);
}

.checkout-item-info {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding-right: 2rem;
}

.checkout-item-img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.09);
    flex-shrink: 0;
}

.checkout-item-name-wrap {
    flex: 1;
    min-width: 0;
}

.checkout-item-name {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkout-item-variation {
    width: 20rem;
    font-size: 1.35rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.checkout-item-subtotal {
    font-weight: 500;
}

/* Khu vực Lời nhắn (Trái) & Đơn vị vận chuyển (Phải) trên nền xanh nhạt #fafdff */
.checkout-order-extra {
    background-color: #fafdff;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.09);
    display: grid;
    grid-template-columns: 44rem 1fr; /* Cột lời nhắn 440px | Cột vận chuyển chiếm phần còn lại */
}

.checkout-message-col {
    padding: 2rem 3rem;
    border-right: 1px dashed rgba(0, 0, 0, 0.09);
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.checkout-message-label {
    font-size: 1.4rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.checkout-message-input {
    flex: 1;
    height: 3.8rem;
    background-color: var(--white-color);
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 2px;
    padding: 0 1.2rem;
    font-size: 1.35rem;
}

.checkout-message-input:focus {
    border-color: rgba(0, 0, 0, 0.4);
}

.checkout-shipping-col {
    padding: 2rem 3rem;
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    font-size: 1.35rem;
}

.shipping-col__label {
    color: #00bfa5;
    font-weight: 500;
    white-space: nowrap;
}

.shipping-col__details {
    flex: 1;
}

.shipping-method-name {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.shipping-receive-date {
    color: #26aa99;
    font-size: 1.25rem;
    margin-bottom: 0.4rem;
}

.shipping-voucher-note {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.shipping-col__change {
    color: #0055aa;
    font-weight: 500;
}

.shipping-col__fee {
    width: 10rem;
    text-align: right;
    color: var(--text-primary);
    font-weight: 500;
}

.checkout-shop-total {
    background-color: #fafdff;
    padding: 1.8rem 3rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;
}

.checkout-shop-total__label {
    font-size: 1.4rem;
    color: var(--text-secondary);
}

.checkout-shop-total__price {
    font-size: 2rem;
    color: var(--shopee-primary);
    font-weight: 500;
}

/* 3. Khung Phương Thức Thanh Toán & Tổng Kết Hóa Đơn */
.checkout-payment-box {
    background-color: var(--white-color);
    border-radius: 2px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
}

.payment-method-bar {
    padding: 2.4rem 3rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 4rem;
}

.payment-method__title {
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--text-primary);
    white-space: nowrap;
}

.payment-method__options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Khu vực bảng tính nhẩm chi phí nền vàng kem #fffefb */
.payment-summary-area {
    background-color: #fffefb;
    padding: 2.4rem 3rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.09);
    display: flex;
    justify-content: flex-end;      /* Đẩy bảng tính nhẩm về sát góc phải */
}

.payment-summary-grid {
    display: grid;
    grid-template-columns: auto 16rem; /* Cột chữ tự động | Cột số tiền rộng 160px căn phải */
    row-gap: 1.6rem;
    align-items: center;
    font-size: 1.4rem;
}

.summary-label {
    color: var(--text-secondary);
    text-align: left;
}

.summary-value {
    color: var(--text-primary);
    text-align: right;
}

.summary-label--total {
    font-size: 1.5rem;
}

.summary-value--total {
    font-size: 2.8rem;              /* Tổng thanh toán cuối cùng to 28px màu cam rực rỡ */
    color: var(--shopee-primary);
    font-weight: 500;
}

/* Chân nút ĐẶT HÀNG */
.payment-submit-bar {
    background-color: #fffefb;
    padding: 2rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.payment-terms-text {
    font-size: 1.4rem;
    color: var(--text-secondary);
}

.payment-terms-link {
    color: #0055aa;
}

.payment-order-btn {
    min-width: 21rem;
    height: 4.2rem;
    font-size: 1.6rem;
    font-weight: 500;
}

4. Giải mã dòng code: 3 Chi tiết "nhỏ nhưng tinh hoa" trong Bài 24

1. Mẹo viết tắt số 0 trong repeating-linear-gradient:

   • Trong đoạn code .envelope-border-line, bạn có thấy chúng ta viết #6fa6d6 3.3rem, transparent 0, transparent 4.1rem không?

   • Theo chuẩn W3C CSS Images Module, khi bạn đặt vị trí bắt đầu của màu sau là 0 (nhỏ hơn vị trí kết thúc 3.3rem của màu trước), trình duyệt sẽ tự động hiểu vị trí bắt đầu đó bằng đúng 3.3rem! Nhờ mẹo này, nếu sau này bạn muốn tăng độ dài vạch xanh từ 3.3rem lên 4.0rem, bạn chỉ cần sửa đúng 1 con số mà không cần sửa lại điểm bắt đầu của khoảng trắng theo sau nó!

2. Tái sử dụng Component .variation-item (Bài 20) cho nút chọn Phương thức thanh toán:

   • Ở tầng chọn Phương thức thanh toán (Ví ShopeePay, Thẻ Tín dụng, Thanh toán khi nhận hàng), thay vì phải viết lại hàng chục dòng CSS mới, chúng ta gọi lại đúng bộ class .variation-item, .variation-input, .variation-btn đã xây dựng ở Bài 20!

   • Kết quả: Khi người dùng click chọn phương thức thanh toán nào, nút đó tự động bật viền cam kèm miếng tam giác cam + dấu tích trắng (✓) ở góc dưới bên phải mà không tốn thêm 1 dòng CSS nào!

3. Sự phối màu nền #fafdff (Xanh băng nhạt) và #fffefb (Vàng kem nhạt):

   • Khu vực Lời nhắn & Vận chuyển dùng nền xanh băng cực nhạt (#fafdff) để đồng điệu với màu xanh #26aa99 của chiếc xe tải giao hàng SPX.

   • Khu vực Tổng kết hóa đơn ở dưới cùng dùng nền vàng kem (#fffefb) để làm nổi bật con số tiền màu cam #ee4d2d. Đây là nghệ thuật dùng màu nền vi tế (Subtle Tinted Backgrounds) để phân tách các vùng chức năng mà không cần dùng khung viền thô cứng!

5. Bài tập trải nghiệm thực tế & Hẹn gặp ở Bài 25 (Cột mốc $\frac{1}{4}$ chặng đường)!

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 Trang Thanh Toán (Bài 24):

1. Hãy ngắm nhìn đường viền Phong bì thư kẻ sọc Đỏ - Xanh cao 3px ở ngay trên đỉnh khung Địa Chỉ Nhận Hàng — sắc nét tuyệt đối nhờ được vẽ bằng toán học Vector của CSS!

2. Hãy thử click chuột qua lại giữa 4 nút Phương thức thanh toán (Ví ShopeePay, Thẻ Tín dụng, Google Pay, Thanh toán khi nhận hàng) để thấy dấu tích góc 3D chuyển đổi mượt mà.

3. Quan sát bảng tính nhẩm ở góc dưới bên phải: các con số ₫850.000, ₫30.000, -₫50.000 và tổng tiền ₫800.000 thẳng hàng dọc bên phải chuẩn xác như một tờ hóa đơn thực thụ!

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

1. Hãy thử vào .envelope-border-line trong main.css, tăng height: 0.3rem; lên thành height: 1.2rem; (12px) và đổi góc 45deg thành -45deg trong F12 để quan sát thật rõ các sọc màu Đỏ - Trắng - Xanh đảo chiều nghiêng như thế nào nhé!

2. Hãy thử thêm một dòng thông báo nhỏ bên dưới nút Thanh toán khi nhận hàng (chỉ hiện ra khi chọn COD): "Phí thu hộ: ₫0 VNĐ. Ưu đãi về phí vận chuyển (nếu có) áp dụng cả với phí thu hộ." bằng bộ chọn :checked ~!

🎉 HOÀN THÀNH CHƯƠNG 8 (BÀI 23 – BÀI 24): CHINH PHỤC TRỌN VẸN LUỒNG GIỎ HÀNG & THANH TOÁN SHOPEE DESKTOP! Ở Bài 25 (Cột mốc kỷ niệm 25/100 bài học — Hoàn thành $\frac{1}{4}$ chặng đường!), chúng ta sẽ chính thức mở khóa Chương 9: Responsive Web Design (@media queries) — biến hóa toàn bộ giao diện Shopee từ màn hình Máy tính (1200px) co giãn mượt mà sang màn hình Máy tính bảng (Tablet 768px) và Điện thoại di động (Mobile 375px)!