.header-top {
    /*background-color: #2A3335;*/
    color: white;
    font-size: 0.875rem;
    padding: 0.5rem 0;
}

    .header-top a {
        color: white;
        text-decoration: none;
    }

        .header-top a:hover {
            opacity: 0.8;
        }

/* 1. Tùy chỉnh Navbar chính */
.navbar-modern {
    background-color: #FBFBFB !important; /* Nền trắng sạch sẽ (quan trọng hơn bg-light) */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Bóng đổ nhẹ, hiện đại để "nổi" lên */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

    /* 2. Tùy chỉnh các liên kết (nav-link) */
    .navbar-modern .nav-link {
        color: #333; /* Màu chữ tối, mềm mại hơn màu đen tuyền */
        font-weight: 500; /* Hơi đậm, dễ đọc hơn */
        font-size: 1rem; /* 16px */
        padding: 0.8rem 1.2rem !important; /* Tăng khoảng cách đệm */
        margin: 0 0.25rem; /* Khoảng cách giữa các mục */
        border-radius: 8px; /* Bo góc hiện đại */
        transition: all 0.3s ease; /* Hiệu ứng chuyển động mượt mà */
    }

        /* 3. Hiệu ứng khi rê chuột (hover) vào liên kết */
        .navbar-modern .nav-link:hover,
        .navbar-modern .nav-link:focus {
            color: #0d6efd; /* Màu xanh dương (màu primary của Bootstrap) */
            background-color: rgba(13, 110, 253, 0.07); /* Nền mờ rất nhẹ */
        }

        /* 4. Trạng thái "active" của liên kết */
        .navbar-modern .nav-link.active {
            color: #0d6efd;
            font-weight: 600; /* Đậm hơn để nhấn mạnh */
            background-color: rgba(13, 110, 253, 0.1); /* Nền rõ hơn hover một chút */
        }

    /* 5. Tùy chỉnh Menu Dropdown */
    .navbar-modern .dropdown-menu {
        border: none; /* Bỏ viền mặc định */
        border-radius: 12px; /* Bo góc nhiều hơn cho menu */
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Đổ bóng rõ nét hơn */
        padding: 0.5rem; /* Thêm đệm xung quanh các mục */
        margin-top: 0.5rem !important; /* Khoảng cách với nút "Categories" */
    }

    /* 6. Tùy chỉnh các mục trong Dropdown (dropdown-item) */
    .navbar-modern .dropdown-item {
        color: #333;
        font-weight: 500;
        padding: 0.6rem 1rem;
        border-radius: 8px; /* Bo góc cho từng mục */
        transition: all 0.2s ease;
    }

        .navbar-modern .dropdown-item:hover,
        .navbar-modern .dropdown-item:focus {
            color: #0d6efd;
            background-color: rgba(13, 110, 253, 0.07); /* Đồng nhất hiệu ứng hover */
        }

        /* 7. Căn chỉnh các biểu tượng (icon) trong dropdown */
        .navbar-modern .dropdown-item i {
            width: 20px; /* Đặt chiều rộng cố định */
            text-align: center; /* Căn giữa icon */
            margin-right: 0.75rem; /* Khoảng cách với chữ */
            color: #555; /* Màu icon hơi nhạt hơn */
            transition: color 0.2s ease;
        }

        .navbar-modern .dropdown-item:hover i {
            color: #0d6efd; /* Đổi màu icon khi hover */
        }