/* =============================================================================
   Menu fix: on desktop only, allow main navigation to wrap to 2 rows cleanly
   and force the last 3 (long service) items onto their own row.
   Mobile uses a separate hamburger menu — leave it untouched.
   ========================================================================== */

@media only screen and (min-width: 992px) {

  /* Let header + menu containers grow vertically to fit wrapped items */
  .nova-header,
  .site-header,
  .header-type-default,
  .header-type-2,
  .header-type-3,
  .header-type-default .header-items,
  .header-type-2 .header-items,
  .header-type-3 .header-items,
  .header-type-default .header-left-items,
  .header-type-default .header-center-items,
  .main-navigation,
  .main-navigation .nav-menu {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Enable wrapping, center both rows, add breathing room */
  .main-navigation .nav-menu {
    flex-wrap: wrap;
    row-gap: 0.25rem;
    padding: 0.75rem 0;
    align-items: center;
    justify-content: center;
  }

  .main-navigation .nav-menu > li {
    height: auto !important;
    order: 1;
  }

  /* Force the last 3 items (the long service names) onto their own row,
     together, using a flex-wrap break hack. */
  .main-navigation .nav-menu > li:nth-last-child(-n+3) {
    order: 3;
  }

  .main-navigation .nav-menu::after {
    content: '';
    order: 2;
    flex-basis: 100%;
    width: 0;
    height: 0;
  }

  /* Tighten horizontal spacing so items are less likely to wrap unexpectedly */
  .nav-menu > li {
    padding: 0 12px;
  }

  /* Keep header background white behind both rows so text stays readable */
  .nova-header.header-static,
  .nova-header:not(.header-transparent) {
    background-color: #ffffff;
  }

}

/* =============================================================================
   Mobile menu reorder: move the 3 long service items (WP admin positions 7, 8, 9)
   to appear right after "Sản Phẩm" (position 2) in the off-canvas menu.
   Visual order on mobile:
     1. Trang Chủ
     2. Sản Phẩm
     3. Điện NLMT Gia Đình
     4. Điện NLMT Sản Xuất
     5. Dịch Vụ Chăm Sóc & Bảo Hành
     6. Giới Thiệu
     7. Hình Ảnh
     8. Tin Tức
     9. Liên Hệ
   ========================================================================== */

@media only screen and (max-width: 991px) {

  .header-mobiles-primary-menu .mobile-menu {
    display: flex;
    flex-direction: column;
  }

  .header-mobiles-primary-menu .mobile-menu > li:nth-child(1) { order: 1; }
  .header-mobiles-primary-menu .mobile-menu > li:nth-child(2) { order: 2; }
  .header-mobiles-primary-menu .mobile-menu > li:nth-child(7),
  .header-mobiles-primary-menu .mobile-menu > li:nth-child(8),
  .header-mobiles-primary-menu .mobile-menu > li:nth-child(9) { order: 3; }
  .header-mobiles-primary-menu .mobile-menu > li:nth-child(3),
  .header-mobiles-primary-menu .mobile-menu > li:nth-child(4),
  .header-mobiles-primary-menu .mobile-menu > li:nth-child(5),
  .header-mobiles-primary-menu .mobile-menu > li:nth-child(6) { order: 4; }

}