/**
 * Header / navigation styles — scoped to Flatsome header only.
 * Does not alter homepage Phase 2 sections.
 */
.header-wrapper,
#header,
.header {
  --sa-h-primary: #B5A269;
  --sa-h-dark: #E8D9B9;
  --sa-h-text: #E8D9B9;
  --sa-h-muted: #C8B994;
  --sa-h-border: rgba(181, 162, 105, 0.30);
  --sa-h-bg: #002722;
}

/* White premium main bar */
.header-wrapper .header-main {
  background: var(--sa-h-bg) !important;
  border-bottom: 1px solid var(--sa-h-border);
  box-shadow: 0 1px 0 rgba(8, 43, 87, 0.02);
}

.header-wrapper.stuck .header-main,
.has-sticky .header-wrapper.stuck .header-main {
  background: rgba(0, 39, 34, 0.94) !important;
  box-shadow: 0 8px 24px rgba(0, 39, 34, 0.28);
  backdrop-filter: saturate(140%) blur(8px);
}

/* Text logo (no fake image logo) */
.header-wrapper .logo a,
.header-wrapper .logo-text,
.header-wrapper .header-logo-text {
  color: var(--sa-h-dark) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.15rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.header-wrapper .logo img {
  /* Prefer text brand until real logo exists */
  max-height: 36px;
}

/* Primary nav */
.header-wrapper .header-nav > li > a {
  color: var(--sa-h-text) !important;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.header-wrapper .header-nav > li > a:hover,
.header-wrapper .header-nav > li.active > a,
.header-wrapper .header-nav > li.current-menu-item > a,
.header-wrapper .header-nav > li.current-menu-ancestor > a {
  color: var(--sa-h-primary) !important;
}

.header-wrapper .header-nav > li.menu-item-has-children > a {
  padding-right: 18px !important;
}

/* Dropdown */
.header-wrapper .nav-dropdown {
  border: 1px solid var(--sa-h-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 40px rgba(8, 43, 87, 0.12) !important;
  padding: 8px 0 !important;
  min-width: 220px;
}

.header-wrapper .nav-dropdown > li > a {
  color: var(--sa-h-text) !important;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 10px 16px !important;
}

.header-wrapper .nav-dropdown > li > a:hover {
  color: var(--sa-h-primary) !important;
  background: #f3f7fc !important;
}

/* Search icon */
.header-wrapper .header-search-form-wrapper,
.header-wrapper .header-search {
  color: var(--sa-h-text);
}

.header-wrapper .header-search .icon-search,
.header-wrapper .header-button .icon-search {
  font-size: 1.05rem;
}

/* CTA button */
.header-wrapper .header-button .button,
.header-wrapper .header-button-1 .button {
  background: var(--sa-h-primary) !important;
  border-color: var(--sa-h-primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 8px !important;
  padding: 0 16px !important;
  min-height: 40px;
  line-height: 40px !important;
  box-shadow: 0 6px 16px rgba(6, 78, 163, 0.25);
}

.header-wrapper .header-button .button:hover,
.header-wrapper .header-button-1 .button:hover {
  background: var(--sa-h-dark) !important;
  border-color: var(--sa-h-dark) !important;
  color: #fff !important;
}

/* Hide cart/account if any remnant markup appears */
.header-wrapper .cart-item,
.header-wrapper .header-cart-link,
.header-wrapper .account-item,
.header-wrapper .header-account-container {
  display: none !important;
}

/* Mobile header */
@media (max-width: 849px) {
  .header-wrapper .header-main {
    min-height: 64px;
  }

  .header-wrapper .logo a,
  .header-wrapper .logo-text,
  .header-wrapper .header-logo-text {
    font-size: 1rem;
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-wrapper .nav-icon span,
  .header-wrapper .icon-menu {
    color: var(--sa-h-dark);
  }
}

/* Off-canvas mobile nav */
.mfp-content .nav-sidebar > li > a,
.off-canvas .nav-sidebar > li > a,
#main-menu > .nav-sidebar > li > a {
  color: var(--sa-h-text);
  font-weight: 600;
}

.mfp-content .nav-sidebar .button,
.off-canvas .nav-sidebar .button,
#main-menu .button {
  background: var(--sa-h-primary) !important;
  border-color: var(--sa-h-primary) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 375px) {
  .header-wrapper .logo a,
  .header-wrapper .logo-text {
    font-size: 0.92rem;
    max-width: 46vw;
  }
}

@media (max-width: 320px) {
  .header-wrapper .logo a,
  .header-wrapper .logo-text {
    font-size: 0.85rem;
    max-width: 42vw;
  }
}

/* Phase 4B — Hotline (header scope only) */
.header-wrapper .sa-hotline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sa-h-dark) !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
  padding: 0 8px;
}

.header-wrapper .sa-hotline:hover {
  color: var(--sa-h-primary) !important;
}

.header-wrapper .sa-hotline__label {
  color: var(--sa-h-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.header-wrapper .sa-hotline__number {
  color: inherit;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 849px) {
  .header-wrapper .html_nav_position_text {
    display: none; /* hotline lives in off-canvas via mobile_sidebar html-5 */
  }

  .off-canvas .sa-hotline,
  .mfp-content .sa-hotline,
  #main-menu .sa-hotline {
    display: inline-flex;
    margin: 8px 0 16px;
    color: var(--sa-h-primary) !important;
    font-size: 1rem;
  }
}

/* Header — Dark Green bar */
.header-wrapper .header-main {
  background: #002722 !important;
  border-bottom: 1px solid rgba(181, 162, 105, 0.28);
}

.header-wrapper .logo a,
.header-wrapper .logo-text {
  font-size: 1.2rem;
  font-weight: 800;
  color: #E8D9B9 !important;
}

.header-wrapper .header-nav > li > a {
  font-size: 0.94rem;
  font-weight: 650;
  color: #E8D9B9 !important;
  opacity: 1 !important;
}

.header-wrapper .header-nav > li > a:hover,
.header-wrapper .header-nav > li.active > a,
.header-wrapper .header-nav > li.current-menu-item > a {
  color: #D2C08A !important;
}

.header-wrapper .sa-hotline {
  font-size: 0.9rem;
}

.header-wrapper .sa-hotline__number {
  color: #B5A269;
}

.header-wrapper .nav-dropdown {
  background: #002722 !important;
}

.header-wrapper .nav-dropdown > li > a:hover {
  color: #D2C08A !important;
  background: rgba(181, 162, 105, 0.12) !important;
}

.header-wrapper .header-button .button,
.header-wrapper .header-button-1 .button {
  background: #E8D9B9 !important;
  border-color: #E8D9B9 !important;
  color: #003C35 !important;
  box-shadow: none;
}

.header-wrapper .header-button .button:hover,
.header-wrapper .header-button-1 .button:hover {
  background: #D2C08A !important;
  border-color: #D2C08A !important;
  color: #003C35 !important;
}

/* Hotline removed from header. Keep hidden if markup is still cached. */
.header-wrapper .sa-hotline,
.header-wrapper .html_nav_position_text,
.off-canvas .sa-hotline,
.mfp-content .sa-hotline,
#main-menu .sa-hotline {
  display: none !important;
}

/*
 * Single desktop row: Logo → Menu → Search field → NHẬN TƯ VẤN.
 * Search is the native Flatsome search-form (always visible, not a hover dropdown).
 */
@media (min-width: 850px) {
  #header .header-wrapper .header-inner.flex-row {
    align-items: center;
    flex-wrap: nowrap;
    height: 100%;
  }

  #header #logo {
    width: auto !important;
    flex: 0 0 auto;
    align-self: center;
  }

  #header .header-wrapper .hide-for-medium.flex-left,
  #header .header-wrapper .hide-for-medium.flex-right {
    display: flex;
    align-items: center;
    align-self: center;
    min-width: 0;
    height: 100%;
  }

  #header .header-wrapper .hide-for-medium.flex-left {
    flex: 1 1 auto;
  }

  #header .header-wrapper .hide-for-medium.flex-right {
    flex: 0 0 auto;
  }

  #header .header-wrapper .header-nav.nav-left,
  #header .header-wrapper .header-nav.nav-right {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 100%;
    margin: 0;
  }

  #header .header-wrapper .header-nav.nav-left {
    justify-content: flex-start;
    width: 100%;
  }

  #header .header-wrapper .header-nav.nav-right {
    justify-content: flex-end;
    width: auto;
    gap: 12px;
  }

  #header .header-wrapper .header-nav.nav-left > li,
  #header .header-wrapper .header-nav.nav-right > li {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    float: none;
    margin: 0;
  }

  /* Parent item fills the header row so the dropdown starts at the bottom edge. */
  #header .header-wrapper .header-nav.nav-left {
    align-items: stretch;
  }

  #header .header-wrapper .header-nav.nav-left > li {
    align-self: stretch;
    height: 100%;
  }

  #header .header-wrapper,
  #header .header-main,
  #header .header-inner,
  #header .header-wrapper .header-nav.nav-left {
    overflow: visible;
  }

  #header .header-wrapper .header-nav.nav-left > li > .nav-dropdown {
    top: 100%;
    bottom: auto;
    margin-top: 0;
    transform: none;
    z-index: 40;
  }

  #header .header-wrapper .header-nav.nav-left > li.current-dropdown,
  #header .header-wrapper .header-nav.nav-left > li.has-dropdown:hover {
    z-index: 30;
  }

  #header .header-wrapper .header-nav > li > a.nav-top-link {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin: 0;
    padding: 0 8px !important;
    font-size: 0.84rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  #header .header-wrapper .header-nav > li.menu-item-has-children > a.nav-top-link {
    padding-right: 12px !important;
  }

  #header .header-wrapper .header-nav.nav-right > li.header-search-form {
    flex: 0 0 220px;
    width: 220px;
    max-width: 220px;
    height: 40px;
  }

  #header .header-wrapper .header-button,
  #header .header-wrapper .header-nav.nav-right > li.header-button-1 {
    height: 40px;
    margin: 0;
  }

  #header .header-wrapper .header-button .button,
  #header .header-wrapper .header-button-1 .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    margin: 0 !important;
    padding: 0 18px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }
}

@media (min-width: 850px) and (max-width: 1440px) {
  #header .header-wrapper .header-nav > li > a.nav-top-link {
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 0.82rem;
  }

  #header .header-wrapper .header-nav.nav-right > li.header-search-form {
    flex-basis: 220px;
    width: 220px;
    max-width: 220px;
    margin-left: 8px;
  }
}

@media (min-width: 850px) and (max-width: 1200px) {
  #header .header-wrapper .header-nav > li > a.nav-top-link {
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: 0.76rem;
  }

  #header .header-wrapper .header-nav.nav-right > li.header-search-form {
    flex-basis: 180px;
    width: 180px;
    max-width: 180px;
  }

  #header .header-wrapper .header-button .button,
  #header .header-wrapper .header-button-1 .button {
    padding: 0 12px !important;
    font-size: 0.72rem !important;
  }
}

/* Always-visible header search field */
#header .header-search-form {
  position: relative;
}

#header .header-search-form .header-search-form-wrapper,
#header .header-search-form .searchform-wrapper,
#header .header-search-form .searchform,
#header .header-search-form .searchform .flex-row {
  width: 100%;
  height: 40px;
  margin: 0;
}

#header .header-search-form .searchform .flex-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  box-sizing: border-box;
  height: 40px;
  padding: 0 12px 0 10px;
  border: 1px solid rgba(232, 217, 185, 0.55);
  border-radius: 10px;
  background: transparent;
}

#header .header-search-form .flex-col {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 100%;
}

#header .header-search-form .flex-col.flex-grow {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
}

#header .header-search-form .flex-col:last-child {
  order: 1;
  flex: 0 0 auto;
}

#header .header-search-form .search-field {
  width: 100%;
  height: 36px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #E8D9B9 !important;
  font-size: 0.84rem;
  line-height: 36px;
}

#header .header-search-form .search-field::placeholder {
  color: #C8B994;
  opacity: 1;
}

#header .header-search-form .ux-search-submit,
#header .header-search-form .submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  min-width: 22px;
  height: 36px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #E8D9B9 !important;
  line-height: 1;
}

#header .header-search-form .ux-search-submit i,
#header .header-search-form .submit-button i {
  font-size: 1rem;
  color: #E8D9B9;
}

#header .header-search-form .live-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  background: #002722;
  border: 1px solid rgba(181, 162, 105, 0.3);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 39, 34, 0.28);
  color: #E8D9B9;
}

/* Product menu: two labeled columns. Other header dropdowns stay a single list. */
@media (min-width: 850px) {
  #header #menu-item-19 > ul.nav-dropdown {
    display: table;
    width: auto;
    min-width: 0;
    padding: 8px 6px 12px !important;
  }

  #header #menu-item-19 > ul.nav-dropdown > li.nav-dropdown-col {
    display: table-cell;
    width: 280px;
    min-width: 280px;
    white-space: normal;
    vertical-align: top;
    padding: 6px 16px 4px;
  }

  #header #menu-item-19 > ul.nav-dropdown > li.nav-dropdown-col:not(:last-child) {
    border-right: 1px solid rgba(232, 217, 185, 0.18);
  }

  #header #menu-item-19 > ul.nav-dropdown > li.nav-dropdown-col > a {
    color: #D2C08A !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 8px 0 10px !important;
    margin: 0 0 4px;
    border: 0 !important;
    border-bottom: 1px solid rgba(210, 192, 138, 0.35) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #header #menu-item-19 .nav-column {
    position: static !important;
    display: block !important;
    left: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px 0 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #header #menu-item-19 .nav-column > li > a {
    color: #F5E9C8 !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    white-space: nowrap;
    padding: 7px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #header #menu-item-19 .nav-column > li > a:hover {
    color: #D2C08A !important;
    background: transparent !important;
  }

  #header #menu-item-19 .nav-column li > ul.sub-menu {
    position: static !important;
    display: block !important;
    left: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: none !important;
    margin: 0 0 4px !important;
    padding: 0 0 2px 14px !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #header #menu-item-19 .nav-column li > ul.sub-menu a {
    color: #E8D9B9 !important;
    font-size: 0.84rem !important;
    font-weight: 400 !important;
    text-transform: none !important;
    white-space: nowrap;
    padding: 4px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #header #menu-item-19 .nav-column li > ul.sub-menu a:hover {
    color: #D2C08A !important;
  }
}

@media (min-width: 850px) and (max-width: 1099px) {
  #header #menu-item-19 > ul.nav-dropdown {
    max-width: calc(100vw - 24px);
  }

  #header #menu-item-19 > ul.nav-dropdown > li.nav-dropdown-col {
    width: auto;
    min-width: 0;
  }

  #header #menu-item-19 .nav-column > li > a,
  #header #menu-item-19 .nav-column li > ul.sub-menu a {
    white-space: normal;
  }
}

/* Mobile drawer: solid panel, cream text. Parent fade must not wash the menu out. */
.mfp-wrap.off-canvas .mfp-content,
.mfp-wrap.off-canvas .mfp-content .sidebar-menu,
#main-menu.mobile-sidebar {
  background: #002722 !important;
  opacity: 1 !important;
  color: #F5E9C8;
}

.mfp-wrap.off-canvas .mfp-content {
  width: min(92vw, 420px);
  max-width: 100vw;
}

.mfp-wrap.off-canvas .nav-sidebar a,
.mfp-wrap.off-canvas .nav-sidebar .toggle,
.mfp-wrap.off-canvas .nav-sidebar .toggle i,
#main-menu .nav-sidebar a,
#main-menu .nav-sidebar .toggle,
#main-menu .nav-sidebar .toggle i {
  color: #F5E9C8 !important;
  opacity: 1 !important;
}

.mfp-wrap.off-canvas .nav-sidebar > li > a,
#main-menu .nav-sidebar > li > a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.mfp-wrap.off-canvas .nav-sidebar .toggle,
#main-menu .nav-sidebar .toggle {
  min-width: 44px;
  min-height: 44px;
}

/* Accordion: the desktop dropdown markup stays closed until its toggle. */
.mfp-wrap.off-canvas .nav-sidebar li > ul,
#main-menu.mobile-sidebar .nav-sidebar li > ul {
  display: none;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.mfp-wrap.off-canvas .nav-sidebar li.active > ul,
#main-menu.mobile-sidebar .nav-sidebar li.active > ul {
  display: block;
}

html.has-off-canvas body {
  overflow: hidden;
}

.mfp-wrap.off-canvas .mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  color: #F5E9C8 !important;
  opacity: 1 !important;
}

#main-menu .searchform,
.mfp-wrap.off-canvas .searchform,
#main-menu .searchform .flex-row,
.mfp-wrap.off-canvas .searchform .flex-row {
  width: 100%;
}

#main-menu .search-field,
.mfp-wrap.off-canvas .search-field {
  width: 100%;
  min-height: 44px;
  color: #002722 !important;
  background: #F5E9C8 !important;
  opacity: 1 !important;
}

#main-menu .search-field::placeholder,
.mfp-wrap.off-canvas .search-field::placeholder {
  color: #3E612A;
  opacity: 1;
}