/* XGBT_HEADER_UNIFIED_V1
 * One header language for the complete public site.
 */
:root {
  --xgbt-header-ink: #51392f;
  --xgbt-header-muted: #756860;
  --xgbt-header-brand: #a65436;
  --xgbt-header-soft: #f7eee8;
  --xgbt-header-line: #eaded6;
}

body #header,
body #header button,
body #header input {
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body #header .header-main {
  position: relative;
  z-index: 30;
  height: 82px !important;
  background: rgba(255, 252, 249, .98) !important;
  border-bottom: 1px solid var(--xgbt-header-line) !important;
  box-shadow: none !important;
}

body #header .header-inner,
body #header .header-bottom > .flex-row {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
}

body #header .header-main .header-logo,
body #header .header-main .header_logo {
  filter: brightness(0) saturate(100%) invert(25%) sepia(17%) saturate(1068%) hue-rotate(337deg) brightness(91%) contrast(90%);
}

body #header .header-main .nav > li > a,
body #header .header-main .icon-search,
body #header .header-main .cart-icon strong {
  color: var(--xgbt-header-ink) !important;
}

body #header .header-search-form,
body #header .header-search-form-wrapper,
body #header .header-search-form .searchform {
  position: relative;
  overflow: visible !important;
}

body #header .header-search-form .searchform {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body #header .header-search-form .searchform > .flex-row.relative {
  min-height: 52px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--xgbt-header-line);
  border-radius: 999px;
  box-shadow: 0 9px 26px rgba(80, 49, 34, .07);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

body #header .header-search-form .searchform:focus-within > .flex-row.relative {
  border-color: rgba(166, 84, 54, .55);
  box-shadow: 0 0 0 4px rgba(166, 84, 54, .10), 0 13px 30px rgba(80, 49, 34, .10);
}

body #header .header-search-form .search-field,
body #header .header-search-form .ux-search-submit {
  min-height: 50px;
  color: var(--xgbt-header-ink) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body #header .header-search-form .search-field {
  padding-left: 20px;
  font-size: 15px;
}

body #header .header-search-form .ux-search-submit {
  width: 56px;
  min-width: 56px;
}

body #header .header-search-form .live-search-results {
  position: absolute !important;
  z-index: 10020 !important;
  top: 100%;
  right: 0;
  left: 0;
  overflow: visible !important;
}

body #header .header-search-form .autocomplete-suggestions,
body #header .xgbt-search-discovery {
  margin-top: 10px;
  border-color: var(--xgbt-header-line);
  border-radius: 20px;
  background: rgba(255, 253, 251, .985);
  box-shadow: 0 24px 58px rgba(62, 39, 28, .20);
}

body #header .html_topbar_left .bao-gia,
body #header .html_topbar_left .bao-gia p {
  margin: 0 !important;
}

body #header .html_topbar_left .bao-gia {
  padding: 9px 16px;
  color: var(--xgbt-header-ink) !important;
  background: #fff !important;
  border: 1px solid var(--xgbt-header-line);
  border-radius: 999px;
  box-shadow: 0 7px 20px rgba(80, 49, 34, .055);
  font-size: 20px;
  font-weight: 750;
  line-height: 1.1;
}

body #header .cart-item .header-cart-link {
  min-height: 40px;
  padding-inline: 20px !important;
  color: #fff !important;
  background: var(--xgbt-header-brand) !important;
  border-color: var(--xgbt-header-brand) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

body #header .header-bottom {
  position: relative;
  z-index: 20;
  min-height: 54px;
  background: rgba(255, 255, 255, .98) !important;
  border-bottom: 1px solid rgba(126, 85, 65, .10) !important;
  box-shadow: 0 9px 28px rgba(80, 49, 34, .07) !important;
}

body #header .header-bottom .nav > li > a {
  min-height: 38px;
  margin: 7px 2px;
  padding: 0 14px;
  color: var(--xgbt-header-ink) !important;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

body #header .header-bottom .nav > li.active > a,
body #header .header-bottom .nav > li.current-menu-item > a,
body #header .header-bottom .nav > li > a:hover {
  color: var(--xgbt-header-brand) !important;
  background: var(--xgbt-header-soft) !important;
  transform: translateY(-1px);
}

body #header a:focus-visible,
body #header button:focus-visible,
body #header input:focus-visible {
  outline: 3px solid rgba(166, 84, 54, .26) !important;
  outline-offset: 3px;
}

/* Breadcrumbs belong to the header transition, so remove the old dark band. */
body #main > .page-title,
body #main .shop-page-title,
body .page-title.featured-title {
  color: var(--xgbt-header-muted) !important;
  background: #f8f2ed !important;
  border-bottom: 1px solid var(--xgbt-header-line);
  text-shadow: none !important;
}

body .page-title.featured-title .title-bg,
body .page-title.featured-title .title-overlay {
  display: none !important;
}

body .page-title .breadcrumbs,
body .page-title .breadcrumbs a {
  color: var(--xgbt-header-muted) !important;
  text-shadow: none !important;
}

body .page-title .breadcrumbs a:hover {
  color: var(--xgbt-header-brand) !important;
}

@media (max-width: 849px) {
  body #header .header-main {
    height: 68px !important;
    min-height: 68px;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 8px 24px rgba(80, 49, 34, .08) !important;
  }

  body #header .header-main .header-inner {
    min-height: 68px;
    padding-inline: 14px !important;
  }

  body #header .header-main .mobile-nav > li > a {
    color: var(--xgbt-header-ink) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body #header * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}