/* TPS 1.0.34: homepage header vertical + horizontal spacing
 *
 * Top row: vertically center support / account|login / cart on header-main midline;
 * even flex gap among the three. Green bar: distribute nav links (space-evenly)
 * after danh mục; keep 1.0.29 opener/search align + 1240 frame.
 * Desktop only — do not touch mobile header chrome.
 */
@media (min-width: 850px) {
  /* --- Top utilities --- */
  .header-main .header-nav-main.nav-right {
    height: 77px !important;
    max-height: 77px !important;
    align-items: center !important;
    gap: 20px !important;
  }
  .header-main .header-nav-main.nav-right > li {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    line-height: normal !important;
    position: relative;
  }
  .header-main .header-nav-main.nav-right > li > a {
    line-height: 1.15 !important;
    height: auto !important;
    padding: 0 !important;
  }

  /* Support (phone): kill cake -17px hack; icon inside LI via padding */
  .header-main .html_topbar_left {
    margin-top: 0 !important;
    margin-right: 0 !important;
    padding-left: 56px !important;
    box-sizing: border-box;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  #masthead .header-main .html_topbar_left::before,
  .header-main .html_topbar_left::before {
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
  .header-main .html_topbar_left p {
    margin: 0 !important;
    line-height: 1.25 !important;
    width: auto !important;
  }

  /* Account / Đăng nhập + cart: icon above label, auto height */
  .header-main li.account-item .account-link,
  .header-main li.cart-item .header-cart-link {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    text-align: center !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.15 !important;
    padding: 0 !important;
    position: relative !important;
  }
  .header-main .header-account-title,
  .header-main .header-cart-title {
    height: auto !important;
    line-height: 1.15 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    position: static !important;
  }
  .header-main li.account-item .account-link i.icon-user {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    flex-shrink: 0;
  }
  .header-main .header-cart-icon,
  .header-main .image-icon.header-cart-icon {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    line-height: 0 !important;
    margin: 0 !important;
    display: block !important;
  }
  .header-main .cart-img-icon {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    object-fit: contain;
  }

  /* Danh mục opener title vertically centered */
  #wide-nav .header-vertical-menu__opener {
    display: flex !important;
    align-items: center !important;
  }
  #wide-nav .header-vertical-menu__title {
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Nav links: fill remaining green bar evenly (keep left col 262 from 1.0.29) */
  #wide-nav .flex-row.container > .flex-col.hide-for-medium.flex-center {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
  }
  #wide-nav .flex-row.container > .flex-col.hide-for-medium.flex-right.flex-grow {
    flex: 0 0 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #wide-nav .flex-col.hide-for-medium.flex-center .header-nav,
  #wide-nav .flex-col.hide-for-medium.flex-center > ul {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-evenly !important;
  }
  #wide-nav .flex-col.hide-for-medium.flex-center .header-nav > li {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Cart/account dropdowns: open below icon.
   * 1.0.33 set LI height:auto (~44px), so Flatsome vertically centers
   * .nav-dropdown (top/bottom ≈ -163px) and the panel clips off-screen.
   * Force top:100% + right-align under the icon; keep dark mini-cart styling. */
  .header-main .header-nav-main.nav-right {
    overflow: visible !important;
  }
  .header-main li.cart-item.has-dropdown > .nav-dropdown,
  .header-main li.account-item.has-dropdown > .nav-dropdown {
    top: 100% !important;
    bottom: auto !important;
    left: auto !important;
    right: -15px !important;
    margin-top: 8px !important;
    z-index: 10060 !important;
  }
  .header-main li.cart-item.has-dropdown.current-dropdown,
  .header-main li.cart-item.has-dropdown:hover,
  .header-main li.cart-item.has-dropdown.cart-active,
  .header-main li.account-item.has-dropdown.current-dropdown,
  .header-main li.account-item.has-dropdown:hover {
    z-index: 10060 !important;
  }
}