/* --- RESPONSIVE ADJUSTMENTS --- */

/* 1. Màn hình Tablet (Dưới 1024px) */
@media screen and (max-width: 1024px) {
    .area-2 {
        margin-right: 0; /* Bỏ margin lớn để có chỗ hiển thị */
    }
    .opencamera, .searchimage {
        gap:10px;
        padding: 8px 10px;
    }

    .area-1{
        flex : 2;
    }

}

/* 2. Màn hình Mobile (Dưới 768px) - Cực kỳ quan trọng */
@media screen and (max-width: 768px) {
    /* Hero section: Thu nhỏ các vòng tròn trang trí để không chiếm hết màn hình */
    .hero::before {
        width: 300px;
        height: 300px;
        top: -50px;
        right: -50px;
    }

    .hero::after {
        width: 200px;
        height: 200px;
    }

    .area-1, .area-2, .area-3 {
        flex: none;
        width: 100%;
        margin-right: 0;
        padding: 10px 0;
    }

    .area-1 {
        text-align: center;
    }
    
    .area-1 .logo {
        justify-content: center;
     }


    .opencamera ,.searchimage{
        gap: 14px;
        padding: 8px 10px;
    }

   
}

/* 3. Màn hình siêu nhỏ (Dưới 480px) */
@media screen and (max-width: 480px) {
    .grid-container {
        columns: 1; /* Chỉ còn 1 cột cho đỡ rối */
    }

}