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

/* =========================
   HEADER
========================= */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 20px 50px;

    transition: all .35s ease;

    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(16px);
}

/* khi cuộn */

.header.scrolled {

    background: rgba(15, 23, 42, 0.75);

    backdrop-filter: blur(16px);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .18);

    border-bottom:
        1px solid rgba(255, 255, 255, .08);
}

/* =========================
   LOGO
========================= */

.logo {

    color: #ffffff;

    text-decoration: none;

    font-size: 30px;

    font-weight: 800;

    letter-spacing: .5px;

    transition: .3s;
}

.logo:hover {

    transform: translateY(-2px);
}

.logo,
.logo:visited,
.logo:active {

    color: white;

    text-decoration: none;
}

/* =========================
   MENU
========================= */

.nav-list {

    list-style: none;

    display: flex;

    align-items: center;

    gap: 24px;
}

.nav-list a {

    color: #ffffff;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;
}

.nav-list a:hover {

    color: #60a5fa;
}

/* =========================
   USER
========================= */

.welcome-text {

    color: #bfdbfe;

    background:
        rgba(255, 255, 255, .08);

    padding: 10px 14px;

    border-radius: 999px;

    font-weight: 600;
}

/* =========================
   LOGOUT
========================= */

.logout-btn {

    border: none;

    background: #ef4444;

    color: white;

    padding: 10px 20px;

    border-radius: 999px;

    cursor: pointer;

    font-weight: 600;

    transition: .3s;
}

.logout-btn:hover {

    background: #dc2626;

    transform: translateY(-2px);
}

/* =========================
   BACK BUTTON
========================= */

.back-btn {

    display: inline-block;

    margin: 120px auto 24px;

    padding: 12px 18px;

    background: #111827;

    color: white;

    border-radius: 999px;

    text-decoration: none;

    font-weight: 700;
}

.back-btn:hover {

    background: #1f2937;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px) {

    .header {

        flex-direction: column;

        align-items: flex-start;

        padding: 16px 20px;
    }

    .logo {

        font-size: 24px;

        margin-bottom: 12px;
    }

    .nav-list {

        gap: 12px;

        flex-wrap: wrap;
    }

}