/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Dec 11, 2025, 9:25:52 AM
    Author     : Toai Tran
*/

    benefit {
        background: #fff;
        padding: 50px 0;
    }
    .benefit h2 {
        text-align: center;
        margin-bottom: 35px;
        font-size: 26px;
        font-weight: 700;
    }

    /* GRID 4–5 Ô TỰ CO GIÃN */
    .benefit-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 20px;
        max-width: 950px;
        margin: auto;
    }

    .benefit-item {
        background: #f9f9f9;
        padding: 20px 15px;
        text-align: center;
        border-radius: 12px;
        border: 1px solid #eee;
        transition: 0.2s;
    }

    .benefit-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }

    .benefit-item i {
        font-size: 26px;      /* ICON NHỎ LẠI */
        color: #ff9800;
        margin-bottom: 10px;
    }

    .benefit-item p {
        font-size: 14.5px;    /* CHỮ GỌN GÀNG */
        line-height: 1.4;
        margin: 0;
    }
    
     /* GRID 4 Ô */
    .package-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 25px;
        max-width: 1050px;
        margin: auto;
    }

    .package-item {
        background: #fff;
        border-radius: 12px;
        text-align: center;
        padding: 15px;
        border: 1px solid #eee;
        transition: 0.25s;
    }
    .package-item:hover {
        transform: translateY(-6px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    }

    .package-item img {
        width: 100%;
        border-radius: 10px;
        height: 140px;
        object-fit: cover;
        margin-bottom: 12px;
    }
    .packages h2 {font-size:30px; margin-bottom:30px;}
    .package-item h3 {
        margin: 10px 0 8px;
        font-size: 18px;
        font-weight: 700;
        color: #333;
    }

    .package-item p {
        font-size: 14.5px;
        line-height: 1.4;
        margin: 0;
        color: #666;
    }
    
     /* CTA */
    .cta {text-align:center; padding:40px 0;}
    .cta a {
        background:#ff8800; color:#fff; padding:15px 35px; 
        text-decoration:none; border-radius:8px; font-size:20px;
    }
    
    .flash-banner {
        background: linear-gradient(90deg, #ff3b30, #ff8c00);
        padding: 30px 10px;
        color: #fff;
        font-family: Arial, sans-serif;
    }
    .flash-container {
        width: 90%;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }
    .flash-left h2 {font-size:32px; margin:0;}
    .flash-left .sub {font-size:20px; margin:5px 0 10px;}
    .flash-left .limit {font-size:16px; margin-bottom:20px;}

    .countdown {
        display:flex;
        gap:12px;
    }
    .time-box {
        background:#fff;
        color:#ff3b30;
        border-radius:8px;
        padding:10px;
        text-align:center;
        min-width:70px;
        box-shadow:0 4px 10px rgba(0,0,0,0.2);
    }
    .time-box span {font-size:24px; font-weight:bold; display:block;}
    .time-box small {font-size:12px;}

    .flash-right {
        background: rgba(255,255,255,0.15);
        padding:20px;
        border-radius:10px;
        max-width:400px;
    }
    .flash-right h3 {margin:0 0 10px; font-size:20px;}
    .flash-right .detail {font-size:14px; line-height:1.5;}

    @media (max-width:768px) {
        .flash-left h2 {font-size:26px;}
        .flash-container {flex-direction:column; text-align:center;}
        .flash-right {max-width:100%;}
    }