* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    animation: changeBackground 20s infinite;
}

/* Background Slideshow */
@keyframes changeBackground {
    0%, 30% { background-image: url('https://img.upanhnhanh.com/6334aca21fef46674b866e8df6ee169d'); }
    35%, 65% { background-image: url('https://img.upanhnhanh.com/b1839732cb367f504be96b790f69b6a2'); }
    70%, 100% { background-image: url('https://img.upanhnhanh.com/49a4185f606f633efd2c2820a4909310'); }
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: -1;
}

.container { width: 90%; max-width: 600px; flex: 1; display: flex; flex-direction: column; justify-content: center; z-index: 1; }

.title { font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 700; letter-spacing: -1px; margin-bottom: 0.5rem; }

.subtitle { color: #ccc; font-size: clamp(0.8rem, 2vw, 1rem); margin-bottom: 3rem; text-transform: uppercase; letter-spacing: 3px; }

.ip-box { padding: clamp(20px, 5vw, 40px); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: all 0.4s ease; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(5px); width: 100%; margin-bottom: 2rem; }

.ip-box:hover { border-color: #555; background: rgba(255, 255, 255, 0.1); }

.ip-label { font-size: 0.7rem; color: #aaa; letter-spacing: 3px; font-weight: 600; }

.ip-address { font-size: clamp(1.1rem, 5vw, 1.8rem); margin: 10px 0; font-weight: 600; word-break: break-all; }

.online-status { font-size: 0.9rem; margin: 15px 0; font-weight: 600; }

.online-dot { margin-right: 5px; animation: pulse 1.5s infinite; }

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

.server-info { font-size: 0.85rem; color: #999; display: flex; justify-content: center; gap: 10px; }

.links { margin-top: 3rem; display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }

.links a { color: #bbb; text-decoration: none; font-size: 0.9rem; transition: 0.3s; text-transform: uppercase; padding: 10px 20px; border: 1px solid transparent; border-radius: 5px; }

.links a:hover { color: #fff; border-color: #555; background: rgba(255, 255, 255, 0.1); }

.footer { margin-top: 5rem; padding: 20px; font-size: 0.75rem; color: #666; text-align: center; border-top: 1px solid rgba(255,255,255,0.1); width: 100%; }

.disclaimer { margin-top: 5px; opacity: 0.6; }

@media (max-width: 480px) { .links { gap: 10px; } }