.pricing-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

.pricing-title {
    text-align: center;
    color: #4CAF50; /* Màu xanh lá cây như hình */
    font-size: 40px;
    margin-bottom: 40px;
}

/* Bố cục chính (Desktop/Tablet) */
.pricing-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.pricing-plan {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Header của gói */
.plan-header {
    padding: 20px 10px;
    border-bottom: 1px solid #eee;
    height: 150px; /* Cố định chiều cao để các thẻ bằng nhau */
}

.plan-name {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--color-text-header);
    margin-top: 0;
}

.plan-tagline {
    font-size: 0.9em;
    color: var(--color-text-body);
    margin: 5px 0 15px;
}

.plan-price {
    font-size: 2em;
    font-weight: 700;
    color: var(--color-primary);
}

/* Điều chỉnh màu sắc cho các gói */
.start .plan-price { color: #5cb85c; } /* START: Xanh lá (Ví dụ) */
.plus .plan-price { color: #337ab7; } /* PLUS: Xanh dương (Ví dụ) */
.pro .plan-price { color: #f0ad4e; } /* PRO: Vàng cam (Ví dụ) */
.business .plan-price { color: var(--color-business-header); } /* BUSINESS: Đỏ sẫm */
/* Thiết lập màu chữ trắng cho toàn bộ gói PLUS */
.pricing-plan.plus,
.pricing-plan.plus .plan-name,
.pricing-plan.plus .plan-tagline,
.pricing-plan.plus .plan-price,
.pricing-plan.plus .plan-features li {
    color: #fff !important; /* Dùng !important nếu cần ghi đè các quy tắc khác */
}

/* Đảm bảo đường gạch ngang tính năng không biến mất */
.pricing-plan.plus .plan-features li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Đường gạch mỏng, trong suốt màu trắng */
}

/* Thay đổi dấu check (✓) thành màu trắng */
.pricing-plan.plus .plan-features li::before {
    color: #fff;
}

.pricing-plan.plus {
background: linear-gradient(
        to right, /* Hướng chuyển sắc từ trái sang phải */
        #C25BF9,  /* Màu tím đậm ở bên trái */
        #FD7079   /* Màu xanh dương sáng/xanh ngọc ở bên phải */
    );
}
/* Thẻ Business nổi bật hơn (theo hình)  */
.pricing-plan.business {
    /* Ví dụ: thêm viền đỏ hoặc nổi bật */
   
    transform: scale(1.02); /* Có thể phóng to nhẹ */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.business .plan-header {
    background-color: #fdf5f5; /* Nền nhạt cho Header Business */
}

/* Danh sách tính năng */
.plan-features {
    list-style: none;
    padding: 20px;
    margin: 0;
    text-align: left;
    flex-grow: 1; /* Đảm bảo danh sách tính năng chiếm hết không gian */
}

.plan-features li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    color: var(--color-text-body);
    font-size: 0.95em;
    display: flex;
    align-items: center;
}

.plan-features li::before {
    content: '✓'; /* Dấu check */
    color: var(--color-primary);
    font-weight: bold;
    margin-right: 10px;
}

.plan-features li:last-child {
    border-bottom: none;
}

/* CTA Button */
.plan-cta {
    padding: 20px;
    margin-top: auto; /* Đẩy nút xuống dưới cùng */
}

.btn {
    display: block;
    width: 100%;
    padding: 15px 0;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-plus {
    background-color: #4CAF50;
    box-shadow: 0 4px 6px rgba(255, 87, 75, 0.3);
}

 .btn-start {
    background: linear-gradient(
        to right, /* Hướng chuyển sắc từ trái sang phải */
        #C25BF9,  /* Màu tím đậm ở bên trái */
        #FD7079   /* Màu xanh dương sáng/xanh ngọc ở bên phải */
    );
     box-shadow: 0 4px 6px rgba(255, 87, 75, 0.3);
 }

 .btn-pro {
    background: linear-gradient(
        to right, /* Hướng chuyển sắc từ trái sang phải */
        #C25BF9,  /* Màu tím đậm ở bên trái */
        #FD7079   /* Màu xanh dương sáng/xanh ngọc ở bên phải */
    );
    box-shadow: 0 4px 6px rgba(255, 87, 75, 0.3);
}

 .btn-business {
    background: linear-gradient(
        to right, /* Hướng chuyển sắc từ trái sang phải */
        #C25BF9,  /* Màu tím đậm ở bên trái */
        #FD7079   /* Màu xanh dương sáng/xanh ngọc ở bên phải */
    );
    box-shadow: 0 4px 6px rgba(255, 87, 75, 0.3);
}
.btn:hover {
    opacity: 0.9;
}

.btn a:hover {
    color: #FF914D: none; /* (Tùy chọn) Loại bỏ gạch chân khi hover */
    opacity: 0.9; /* (Tùy chọn) Giảm độ trong suốt nhẹ */
}

/* 📱 Responsive Design (Mobile và Tablet dọc) */
@media (max-width: 992px) {
    .pricing-container {
        flex-wrap: wrap; /* Cho phép các cột gói xuống hàng */
        justify-content: center;
    }
    .pricing-title {
        font-size: 22px;
    }
    
    .pricing-plan {
        flex-basis: calc(50% - 30px); /* 2 cột trên Tablet */
        margin-bottom: 20px;
    }

    /* Trên màn hình nhỏ hơn (Mobile) */
    @media (max-width: 576px) {
        .pricing-plan {
            flex-basis: 100%; /* 1 cột trên Mobile */
            max-width: 400px;
        }
    }
}

/* Styling cơ bản */
.rating-widget-container {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: sans-serif;
    padding: 20px 0;
}

/* Container chứa các ngôi sao */
.stars-display {
    font-size: 30px;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap; /* Giữ các ngôi sao trên một hàng */
}

/* Ngôi sao cơ bản (màu xám) */
.star {
    color: #ccc; /* Màu xám nhạt */
    transition: color 0.2s;
    display: inline-block;
    cursor: pointer;
}

/* Ngôi sao đã được đánh giá/chọn (màu vàng cam) */
.star.rated {
    color: #ff9800; /* Màu vàng cam giống hình */
}

/* Phần hiển thị điểm và số bình chọn */
.rating-info {
    font-size: 1.2em;
    color: #333;
}

/* Container chính: Đảm bảo tất cả nội dung (sao và chữ) nằm trên cùng 1 hàng */
.rating-widget-container {
    display: flex; /* Dùng Flexbox */
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 15px; /* Khoảng cách giữa sao và chữ */
    font-family: sans-serif;
    padding: 20px 0;
    /* Nếu bạn muốn nền đỏ như hình, thêm: */
    background-color: #c73636;
    color: #fff; /* Chữ trắng */
    padding-left: 50px; /* Thêm padding cho nội dung không bị sát lề */
}

/* Container chứa các ngôi sao: Quan trọng nhất */
.stars-display {
    display: flex; /* CHUYỂN NGÔI SAO TỪ DỌC SANG NGANG */
    font-size: 30px;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
}

/* Các ngôi sao riêng lẻ */
.star {
    color: #ccc; /* Màu xám nhạt */
    transition: color 0.2s;
    display: inline-block; /* Đảm bảo mỗi sao là một khối riêng */
    cursor: pointer;
    /* margin-right: 2px; (Tùy chọn: Khoảng cách giữa các sao) */
}

/* Màu chữ của phần thông tin (đã được đổi sang màu trắng nếu nền đỏ) */
.rating-info {
    font-size: 1.2em;
    color: #fff;
}

.this-is-banner {
    background-color: transparent !important;
    /* !important có thể cần thiết nếu Flatsome có quy tắc ghi đè mạnh */
}

.uppercase01 {
    color: #9A377C;
}
.uppercase01 h3,
h3.uppercase01 {
    line-height: 1.3em; /* Tăng khoảng cách dòng lên 1.3 lần kích thước font */
    margin-bottom: 20px; /* (Tùy chọn) Thêm khoảng cách dưới tiêu đề */
}

/* !Bóng đèn xanh đại dương */
.ocean-icon {
    color: #0077be !important; /* Mã màu Xanh Đại Dương đậm */
}