body {
    background: #1a1b26;
    color: #c0caf5;
    font-family: 'Courier New', Courier, monospace !important;
    margin: 0; 
    height: 100vh;
    display: flex; 
    justify-content: center; 
    align-items: center;
    overflow: hidden;
}

/* Lớp bọc dàn hàng ngang chuyên nghiệp */
.main-dashboard {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
    z-index: 10;
    justify-content: center;
    align-items: stretch;
    width: 95%;
    max-width: 1300px;
}

#weather-effect {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 5;
}

.drop {
    position: absolute;
    background: linear-gradient(to bottom, transparent, #ff00ea, #00ffcc);
    opacity: 0.6; animation: fall linear infinite;
}

@keyframes fall {
    to { transform: translateY(100vh); }
}

/* Khung viền Rainbow động */
.card-rainbow {
    flex: 1;
    position: relative; 
    padding: 6px; 
    border-radius: 25px;
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%; 
    animation: rainbow-border 8s linear infinite;
    min-width: 380px;
}

.card-content { 
    background: #1a1b26; 
    padding: 45px; 
    border-radius: 20px; 
    text-align: center; 
    height: 100%; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Ép font cho tất cả */
.card-content * {
    font-family: 'Courier New', Courier, monospace !important;
}

@keyframes rainbow-border {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- HIỆU ỨNG CHỮ RAINBOW (MỚI) --- */
.rainbow-text {
    background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 400% auto;
    animation: rainbow-border 5s linear infinite; /* Dùng chung animation xoay màu */
    display: inline-block;
}

/* Cỡ chữ to và có màu sắc */
#display { 
    font-size: 95px; 
    color: #7aa2f7; 
    text-shadow: 0 0 20px rgba(122, 162, 247, 0.4); 
    margin: 10px 0;
}

#temp { 
    font-size: 90px; 
    font-weight: bold; 
    margin: 15px 0;
}

#day-of-week, #location { 
    font-size: 28px; 
    margin-bottom: 12px;
    letter-spacing: 1px;
}

#full-date, #desc { 
    font-size: 24px; 
    color: #a9b1d6;
    margin-top: 10px;
}

.deg-symbol { 
    font-size: 55px; 
    vertical-align: top; 
    margin-left: 8px;
}

.info-grid { 
    display: flex; 
    justify-content: space-around; 
    gap: 15px; 
    margin: 30px 0; 
    font-size: 22px;
}

/* Khối 3D dưới đáy */
#block-wall {
    position: absolute; bottom: 0; width: 100%;
    display: flex; justify-content: center; align-items: flex-end; gap: 5px; padding-bottom: 10px;
}
.column { display: flex; flex-direction: column-reverse; gap: 4px; width: 25px; }
.cube { width: 25px; height: 25px; border-radius: 4px; animation: cube-rainbow 5s infinite linear; }

@keyframes cube-rainbow {
    0% { background: #ff5555; }
    50% { background: #50fa7b; }
    100% { background: #ff79c6; }
}
.hidden { display: none; }

@media (max-width: 768px) {
    .main-dashboard { flex-direction: column; align-items: center; }
    .card-rainbow { width: 100%; min-width: unset; }
    #display { font-size: 65px; }
    #temp { font-size: 60px; }
}