/* Custom animations và styles cho favorite button, toast notifications và navigation */

/* Navigation - Hamburger animation */
.nav-toggle-btn.is-active .nav-toggle-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}
.nav-toggle-btn.is-active .nav-toggle-line:nth-child(2) {
  opacity: 0;
}
.nav-toggle-btn.is-active .nav-toggle-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Toast animations */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Multi-level menu hover - chỉ hiển thị menu con khi hover vào item mẹ */
@media (min-width: 768px) {
  /* Dropdown chỉ hiển thị khi hover vào nav-item (item mẹ) */
  .nav-item .nav-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .nav-item:hover .nav-dropdown,
  .nav-item .nav-dropdown:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Sub-dropdown chỉ hiển thị khi hover vào nav-sub-item (item con) */
  .nav-sub-item .nav-sub-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .nav-sub-item:hover .nav-sub-dropdown,
  .nav-sub-item .nav-sub-dropdown:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}