Tạo bảng giá (Pricing Table) Responsive với CSS

Bảng giá responsive thường dùng Flexbox/Grid kết hợp media query để xếp chồng cột trên mobile.

Ví dụ mã nguồn (Cải tiến với Flexbox)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
  * { box-sizing: border-box; }
  body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
  .pricingContainer { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
  .pricing {
    flex: 1 1 300px; /* Tối thiểu 300px, tự co giãn */
    max-width: 400px;
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    transition: 0.3s;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  .pricing:hover { box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2); }
  .pricing .header {
    background-color: rgb(52, 31, 129);
    color: white;
    font-size: 25px;
    padding: 20px;
    text-align: center;
  }
  .pricing li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
  }
  .pricing .button {
    display: block;
    width: 80%;
    margin: 20px auto;
    border: none;
    color: white;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    border-radius: 4px;
  }
</style>
</head>
<body>
<h1 style="text-align:center">Responsive Pricing Tables</h1>
<div class="pricingContainer">
  <ul class="pricing">
    <li class="header">Free Membership</li>
    <li>20 tin nhắn</li>
    <li>Không hỗ trợ khách hàng</li>
    <li>98% uptime</li>
    <li>1GB/ngày</li>
    <li>50GB lưu trữ</li>
    <li><a href="#" class="button" style="background:rgb(52,31,129)">Đăng ký</a></li>
  </ul>
  <ul class="pricing">
    <li class="header" style="background:rgb(250,136,59)">Advanced Membership</li>
    <li>100 tin nhắn</li>
    <li>Hỗ trợ 24/7</li>
    <li>99.9% uptime</li>
    <li>8GB/ngày</li>
    <li>150GB lưu trữ</li>
    <li><a href="#" class="button" style="background:rgb(250,136,59)">Đăng ký</a></li>
  </ul>
</div>
</body>
</html>

Điểm cải tiến so với ví dụ gốc

• Flexbox + flex-wrap - Tự động xuống hàng trên mobile, không cần media query phức tạp
• gap - Khoảng cách đều đặn giữa các cột
• flex: 1 1 300px - Tối thiểu 300px, chia đều không gian thừa
• border-radius + overflow:hidden - Bo góc đẹp hơn
• Transition mượt - Hover effect chuyên nghiệp

Mẹo thiết kế

• Đánh dấu gói "Popular" với badge hoặc border màu nổi bật
• Dùng check icon (✓) cho tính năng có, text mờ cho tính năng không có
• CTA button nổi bật cho gói khuyến khích