/* ============================================================
   HÒA CƯỜNG M&E — Header CRITICAL FIX
   Issue from Crys screenshot: category page header broken
   - 2 logos visible (Flatsome theme bug)
   - Search bar duplicated
   - Phone card floating
   - Mega-menu permanently expanded
   - Skip-link visible
   - Mobile off-canvas leaking on desktop
   ============================================================ */

/* ============================================================
   1. KILL Flatsome buggy rule that shows BOTH logos
   The theme has `.header-logo-dark{display:block!important}`
   in an unscoped selector — this is a bug
   ============================================================ */
.header-logo-dark,
img.header-logo-dark {
  display: none !important;
}
/* Re-enable header-logo-dark ONLY when actually in transparent/dark header mode */
.header-transparent .header-logo-dark,
.transparent .header-logo-dark {
  display: block !important;
}
/* Default state: show only header-logo (light) */
.header-logo,
img.header_logo,
img.header-logo {
  display: block !important;
}

/* ============================================================
   2. KILL duplicate search bar (Flatsome multi-position issue)
   Keep only the one in header-main (search-form-wrapper)
   ============================================================ */
/* Hide search if it appears outside main header */
.off-canvas .searchform,
.mfp-content .searchform:not(.header-search-form-wrapper *) {
  display: none !important;
}

/* ============================================================
   3. Mega-menu — show ONLY on hover, NEVER by default
   Override any rule that makes it visible permanently
   ============================================================ */
#mega_menu,
#mega-menu-wrap .mega_menu {
  display: none !important;
}
#mega-menu-wrap:hover #mega_menu,
#mega-menu-wrap:hover .mega_menu,
#mega-menu-wrap.is-open #mega_menu,
#mega-menu-wrap.is-open .mega_menu {
  display: block !important;
}
/* Reset Flatsome inline overriding */
#header.header #mega_menu.hover { display: block !important; }

/* ============================================================
   4. Skip-link — must be hidden by default (focus only)
   Force the screen-reader-text rule
   ============================================================ */
.skip-link.screen-reader-text,
a.skip-link {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus,
a.skip-link:focus {
  clip: auto !important;
  clip-path: none !important;
  height: auto !important;
  padding: 15px 23px !important;
  width: auto !important;
  display: block !important;
  top: 5px !important;
  left: 5px !important;
  background: #fff !important;
  color: #0d4d8c !important;
  font-weight: 700 !important;
  z-index: 100000 !important;
}

/* ============================================================
   5. Phone card position — anchor inside header-button container
   Don't let it float absolute
   ============================================================ */
.html_header_contact_2,
#header-contact {
  position: relative !important;
  float: none !important;
}

/* ============================================================
   6. OFF-CANVAS MOBILE MENU — ensure hidden by default on desktop
   ============================================================ */
@media (min-width: 850px) {
  .mfp-bg, .mfp-wrap,
  .off-canvas-left,
  .off-canvas-right,
  .off-canvas-center {
    display: none !important;
  }
  .mfp-bg.mfp-ready,
  .mfp-wrap.mfp-ready {
    /* When actively triggered, allow */
    display: block !important;
  }
}

/* ============================================================
   7. Header-bottom on category page — ensure visible (not hidden)
   ============================================================ */
.archive .header-bottom,
.tax-product_cat .header-bottom,
.single-product .header-bottom,
.blog-archive .header-bottom,
.blog-single .header-bottom,
.page-left-sidebar .header-bottom {
  display: flex !important;
}
@media (max-width: 849px) {
  .archive .header-bottom,
  .tax-product_cat .header-bottom,
  .single-product .header-bottom,
  .blog-archive .header-bottom,
  .blog-single .header-bottom,
  .page-left-sidebar .header-bottom {
    display: none !important; /* mobile uses hamburger only */
  }
}

/* ============================================================
   8. KILL the .stuck .header-bottom display:none on all archives
   (Flatsome inline force hides header-bottom on scroll for these pages)
   ============================================================ */
.stuck .header-bottom,
.archive .stuck .header-bottom,
.single-product .stuck .header-bottom,
.blog-archive .stuck .header-bottom,
.blog-single .stuck .header-bottom,
.page-left-sidebar .stuck .header-bottom,
.home .stuck .header-bottom {
  display: none !important; /* hide on scroll cho ALL pages, mobile + desktop */
}
/* Show again ONLY when explicit hover */
@media (min-width: 850px) {
  .stuck .header-main {
    display: flex !important;
  }
}

/* ============================================================
   9. Header layout — ensure flex working PC
   ============================================================ */
@media (min-width: 850px) {
  .header-main .header-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .header-main #logo {
    flex: 0 0 auto !important;
  }
  .header-main .nav-center {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }
  .header-main .nav-right {
    flex: 0 0 auto !important;
  }
}

/* ============================================================
   10. Fallback: ensure header-main visible on archive/single
   ============================================================ */
.header,
.header-wrapper,
.header-main {
  display: block !important;
  visibility: visible !important;
}

/* ============================================================
   11. Logo size lock — no distort, no oversize
   ============================================================ */
#logo {
  max-width: 280px !important;
  height: auto !important;
}
#logo img {
  max-height: 60px !important;
  width: auto !important;
  height: auto !important;
}
@media (max-width: 549px) {
  #logo { max-width: 180px !important; }
  #logo img { max-height: 44px !important; }
}
.stuck #logo img {
  max-height: 44px !important;
}

/* ============================================================
   12. Hide phone card on mobile (sticky CTA already covers)
   ============================================================ */
@media (max-width: 849px) {
  #header-contact,
  .html_header_contact_2,
  .header-block-block-2,
  .header-block-block-3 {
    display: none !important;
  }
}