/* Mục menu nổi bật (đang dùng cho "Catalogue") — tách khỏi style.css vì file đó không có cache-bust
   mà nginx đặt expires max cho file tĩnh, sửa vào đó khách cũ sẽ không thấy. */

.nav-highlight { position: relative; }
/* Màu chữ/icon theo màu mục menu thường (đen); hover/active mới chuyển xanh như các mục khác */
.nav-highlight { --nh-c: var(--text); --nh-shine: #b5b5b5; }
.nav-highlight:hover, .nav-highlight.active { --nh-c: var(--primary); --nh-shine: #b8f5c9; }
.nav-highlight .nh-icon {
  width: 17px; height: 17px; flex: none; color: var(--nh-c);
  animation: nhBounce 3.2s ease-in-out infinite;
}
.nav-highlight .nh-text {
  background: linear-gradient(100deg, var(--nh-c) 0%, var(--nh-c) 40%, var(--nh-shine) 50%, var(--nh-c) 60%, var(--nh-c) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--nh-c);
  animation: nhShine 3.2s linear infinite;
}
.nav-highlight .nh-badge {
  font-size: .6rem; font-weight: 700; line-height: 1; letter-spacing: .03em;
  color: #fff; background: var(--accent); padding: 3px 5px; border-radius: 8px;
  position: relative; top: -7px; margin-left: 1px;
  animation: nhPulse 1.8s ease-out infinite;
}
.main-nav > ul > li > a.nav-highlight:hover .nh-icon { animation: nhWiggle .5s ease-in-out; }

@keyframes nhShine  { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@keyframes nhBounce { 0%, 80%, 100% { transform: translateY(0) rotate(0); } 86% { transform: translateY(-3px) rotate(-8deg); } 92% { transform: translateY(0) rotate(6deg); } }
@keyframes nhWiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); } }
@keyframes nhPulse  { 0% { box-shadow: 0 0 0 0 rgba(229,57,53,.55); } 70%, 100% { box-shadow: 0 0 0 6px rgba(229,57,53,0); } }

/* Menu mobile (drawer): chữ in hoa sẵn, chỉnh lại khoảng cách cho nhãn */
.drawer-menu .nav-highlight { gap: 8px; }
.drawer-menu .nav-highlight .nh-badge { top: 0; }

@media (prefers-reduced-motion: reduce) {
  .nav-highlight .nh-icon, .nav-highlight .nh-text, .nav-highlight .nh-badge { animation: none; }
}