* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('https://images.unsplash.com/photo-1504608524841-42fe6f032b4b?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: 'Segoe UI', Roboto, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: white;
    padding: 20px;
}

.card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 30px;
    border-radius: 30px;
    width: 100%;
    max-width: 450px; /* Tăng nhẹ độ rộng */
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.search {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

input {
    flex: 1;
    padding: 12px 20px;
    border-radius: 25px;
    border: none;
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 16px;
    transition: 0.3s;
}

input:focus { background: rgba(255, 255, 255, 0.25); }

button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #fff;
    color: #333;
    transition: 0.3s;
}

button:hover { background: #4364f7; color: white; transform: rotate(90deg); }

.main-info h2 { font-size: 28px; font-weight: 500; }
.main-info p#date { font-size: 14px; opacity: 0.8; margin-bottom: 10px; }

.weather-icon {
    font-size: 70px;
    margin: 15px 0;
    filter: drop-shadow(0 5px 15px rgba(255,255,255,0.3));
}

#temp { font-size: 60px; font-weight: 800; }
#description { font-size: 18px; margin-bottom: 20px; opacity: 0.9; }

.details {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 10px;
}

.col {
    display: flex;
    align-items: center;
    gap: 12px;
}

.col i { font-size: 22px; color: #a5c9ff; }
.info-text { text-align: left; }
.info-text p { font-size: 18px; font-weight: 600; }
.info-text span { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }

/* Forecast Section */
.forecast-section {
    margin-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
}

.forecast-section h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-align: left;
    opacity: 0.7;
}

.forecast-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 10px 0;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Ẩn scrollbar Firefox */
}

.forecast-list::-webkit-scrollbar { display: none; } /* Ẩn scrollbar Chrome */

.day-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 18px;
    min-width: 85px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.day-card:hover { transform: translateY(-5px); background: rgba(255,255,255,0.1); }

.day-card.today {
    background: rgba(67, 100, 247, 0.3);
    border: 1px solid #4364f7;
}

.day-card.history { opacity: 0.6; }

.day-card .date { font-size: 10px; font-weight: bold; margin-bottom: 8px; }
.day-card i { font-size: 18px; margin: 8px 0; color: #ffeb3b; }
.day-card .temp-max { font-size: 14px; font-weight: bold; }
.day-card .temp-min { font-size: 11px; opacity: 0.6; }

/* Trạng thái loading */
.weather.loading {
    filter: blur(5px);
    pointer-events: none;
    opacity: 0.7;
}
/* Cảnh báo thiên tai */
.alert-box {
    background: rgba(255, 68, 68, 0.2);
    border: 1px solid #ff4444;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 15px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); }
}

/* Màu sắc chỉ số AQI */
.aqi-good { color: #00e400; }
.aqi-fair { color: #ffff00; }
.aqi-poor { color: #ff7e00; }
.aqi-danger { color: #ff0000; }

/* Chỉnh lại details để chứa 3 cột */
.details {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}