.nav {
    display: flex;
    align-items: center;
    flex: 1;
    column-gap: 2rem;
    position: relative;
}
.nav .nav__tab {
    position: relative;

    padding-top: 4px;
    display: flex;
    align-items: center;
    padding-inline: .5rem;

    text-decoration: none;

    transition:
        transform .25s cubic-bezier(.22,1,.36,1),
        color .25s ease;

}

.nav .nav__tab:hover{

    transform:translateY(-2px);

}

/* Ẩn underline cũ */

.nav .nav__tab::after{
    display:none;
}


.nav-highlight{

    position:absolute;

    bottom:-3px;

    left:0;

    width:0;

    height:2px;

    border-radius:999px;

    background:var(--color-on-primary);

    transition:
        left .35s cubic-bezier(.22,1,.36,1),
        width .35s cubic-bezier(.22,1,.36,1);

    pointer-events:none;

    z-index:5;

}

/* Glow Light */

header:not(.dark):not(.darker) .nav-highlight{

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

}

/* Glow Dark */

header.dark .nav-highlight,
header.darker .nav-highlight{

    box-shadow:
        0 0 10px rgba(255,255,255,.45),
        0 0 18px rgba(255,255,255,.15);

}

.nav .nav__actions{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.5rem;
}

.nav .nav__actions .nav__icon{

    height:3rem;
    width:3rem;

    border:none;

    background:transparent;

    border-radius:50%;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:
        background-color .2s ease,
        transform .2s ease;

}

.nav .nav__actions .nav__icon:hover{

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

    transform:translateY(-2px);

}

.nav .nav__actions .nav__icon img{

    height:1.5rem;

}

.nav .nav__actions .nav__cta{

    margin-left:1rem;

    padding:1rem;

    border-radius:.5rem;

    background:var(--color-on-primary);

    color:var(--color-primary);

    transition:transform .2s ease;

}

.nav .nav__actions .nav__cta:hover{

    transform:translateY(-2px);

}