/* --- Desktop & Mặc định (Có object-fit) --- */
.area-1 .logo-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Cho phép rớt dòng nếu màn hình quá hẹp */
    width: 100%;
}

/* Căn giữa các slogan trên mọi thiết bị */
.slogan .slogan1, .slogan .slogan2 {
    display: flex;
    justify-content: start;
    width: 100%;
}
.slogan .slogan2 {
    margin-bottom:10px;
}

/* --- ĐIỀU CHỈNH CHÍNH CHO ẢNH --- */
.area-1 img, .slogan img {
    /* Quan trọng nhất: Giữ nguyên tỷ lệ, không bị méo */
    object-fit: contain;
    /* Đảm bảo ảnh không bao giờ to hơn div cha */
    max-width: 100%;
    /* Đảm bảo ảnh co giãn mượt mà */
    height: auto !important;
}

/* --- Kích thước cụ thể (Width cố định) --- */
.area-1 .logo-area .logo img {
    width: 150px;
    max-height: 80px; /* Thêm max-height để control chiều cao tổng thể */
}

.area-1 .logo-area .sublogo img {
    width: 180px;
    height : auto;
}

.slogan .slogan1 {
    margin-top: 10px;
}

.slogan .slogan1 img {
    width: 500px;
}

.slogan .slogan2 img {
    width: 280px;
}


/* --- Responsive cho Tablet (Dưới 992px) --- */
@media (max-width: 1013px) {
    .area-1 .logo-area .logo img {
        width: 120px; /* Thu nhỏ logo */
    }

    .area-1 .logo-area .sublogo img {
        width: 150px;
    }

    .slogan .slogan1 img {
        width: 90%; /* Slogan co giãn % */
        max-width: 600px;
    }

    .slogan .slogan2 img {
        width: 50%;
        max-width: 400px;
    }
    .area-4 {
        flex-direction: column;
        width: 100%;
        gap : 15px;
    }
    .slogan .slogan1, .slogan .slogan2 {
        justify-content: center;
        width: 100%;
    }
    .area-2 {
        margin: 0px;
    }
 
}

/* --- Responsive cho Mobile (Dưới 576px) --- */
@media (max-width: 575px) {
    .area-1 .logo-area {
        justify-content: space-between; /* Căn đều 2 bên trên mobile */
    }

    .area-1 .logo-area .logo img {
        width: 80px;
    }

    .area-1 .logo-area .sublogo img {
        width: 100px;
    }

    .slogan .slogan1 img {
        width: 90%; /* Chiếm gần hết chiều ngang */
    }

    .slogan .slogan2 img {
        width: 50%;
    }

    .slogan {
        margin-top : 10px;
    }
    .area-4 {
        padding : 0px;
    }
}