/* ============================================================
   UNDERLINE EFFECT - HIỆU ỨNG GẠCH CHÂN KHI HOVER
============================================================ */

/* Hiệu ứng gạch chân cho nav link trên header */
nav a {
    position: relative;
    text-decoration: none;
    transition: color 0.3s ease;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-1, #ffb700), var(--primary-red, #ff0000));
    transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

nav a:hover::after {
    width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    nav a::after {
        height: 1.5px;
    }
}