/* S2 Spa — Flatsome header (top bar + main bar + mega menu) styled like the reference's
   .spa-announcement / .spa-header (theme.css). */

/* ---------- Announcement bar (printed before #header) = .spa-announcement ---------- */
.spa-announcement {
  background-color: #1F1A17;
  color: #EFEAE1;
  border-bottom: 1px solid rgba(184, 149, 104, 0.2);
  padding: 0.55rem 0;
  font-family: var(--font-family-body);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
}
.spa-announcement__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--bed-gutter);
  padding-right: var(--bed-gutter);
}
.spa-announcement__item, .spa-announcement__item a { color: #EFEAE1; text-decoration: none; transition: color 0.3s ease; }
.spa-announcement__item a:hover { color: #B89568; }
.spa-announcement__item--center { color: #B89568; font-weight: 500; margin-inline: auto; }
@media (max-width: 1399px) { .spa-announcement .hide-desktop-sm { display: none; } }
@media (max-width: 1023px) {
  .spa-announcement .hide-mobile { display: none; }
  .spa-announcement__item--center { margin-inline: 0; text-align: center; flex: 1 1 100%; }
}
@media (max-width: 767px) {
  .spa-announcement { font-size: 0.68rem; letter-spacing: 0.1em; padding: 0.45rem 0; }
}

/* ---------- Main bar = .spa-header ---------- */
.header-main {
  background: rgba(250, 247, 242, 0.96);
  border-bottom: 1px solid rgba(226, 217, 204, 0.7);
  box-shadow: 0 10px 30px -10px rgba(31, 26, 23, 0.05);
}
.header-main .header-bg-color { background-color: transparent !important; }
.header-wrapper .header-inner,
.header-wrapper .container.header-inner {
  max-width: var(--container-max);
  padding-left: var(--bed-gutter);
  padding-right: var(--bed-gutter);
}
.header-main .header-inner { min-height: 76px; }
#logo { width: auto !important; margin-right: 1rem; }
#logo img { max-height: 48.4px; width: auto; height: 48.4px; }
.header-main .flex-left { flex: 1 1 auto; justify-content: center; }
.header-main .flex-left > .nav { gap: clamp(0.5rem, 0.9vw, 1.15rem); justify-content: center; }
.header-main .flex-left > .nav > li { margin: 0; }
.header-main .nav > li > a {
  font-family: var(--font-family-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1F1A17;
  padding: 0.5rem 0;
  gap: 0.35rem;
  white-space: nowrap;
}
.header-main .nav > li > a:hover, .header-main .nav > li.active > a { color: #8E4C35; }
.header-main .nav > li > a .icon-angle-down { font-size: 0.625rem; opacity: 0.9; margin-left: 0.15rem; }

/* Actions: search, account, cart, CTA */
.header-main .flex-right > .nav { gap: 0.5rem; align-items: center; }
.header-main .flex-right > .nav > li { margin: 0; }
.header-main .flex-right .header-search > a,
.header-main .flex-right .account-item > a,
.header-main .flex-right .cart-item > a {
  width: 2.25rem; height: 2.25rem; padding: 0.4rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: #1F1A17;
}
.header-main .flex-right .header-search > a:hover,
.header-main .flex-right .account-item > a:hover,
.header-main .flex-right .cart-item > a:hover { color: #8E4C35; background: rgba(142, 76, 53, 0.06); }
.s2-icon { width: 1.25rem; height: 1.25rem; display: block; fill: none; stroke: currentColor; }
.header-main .cart-item .s2-cart-count {
  position: absolute; top: 0.1rem; right: 0.1rem; background: #8E4C35; color: #fff;
  font-size: 0.625rem; font-weight: 700; width: 1.125rem; height: 1.125rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; line-height: 1; font-family: var(--font-family-body);
}
.header-main .cart-item > a { position: relative; }
.header-main .header-button-1 .button {
  background-color: #8E4C35; color: #fff; padding: 0 1rem; height: 2.375rem; min-height: 0; line-height: 1;
  font-family: var(--font-family-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; border: 1px solid #8E4C35; border-radius: 9999px; margin: 0 0 0 0.25rem;
  display: inline-flex; align-items: center; box-shadow: 0 4px 12px rgba(142, 76, 53, 0.15);
}
.header-main .header-button-1 .button:hover { background-color: #6d3825; border-color: #6d3825; }
@media (max-width: 1399px) { .header-main .header-button-1 { display: none; } }

/* Mobile header */
@media (max-width: 849px) {
  .header-main .header-inner { min-height: 64px; }
  #logo { margin: 0 auto; }
  #logo img { height: 40px; max-height: 40px; }
  .header-main .mobile-nav > li > a { color: #1F1A17; }
}

/* ---------- Dropdowns and the mega menu (UX Block "mega-lieu-trinh") ---------- */
.header-main .nav-dropdown {
  background: #FAF7F2;
  border: 0;
  border-top: 1px solid rgba(226, 217, 204, 0.8);
  border-bottom: 2px solid #B89568;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 24px 48px -12px rgba(31, 26, 23, 0.08);
  padding: 1rem 0;
  min-width: 260px;
}
.header-main .nav-dropdown li a {
  font-family: var(--font-family-body); font-size: 0.8125rem; color: #1F1A17; text-transform: none;
  letter-spacing: 0.02em; padding: 0.55rem 1.5rem; border: 0;
}
.header-main .nav-dropdown li a:hover { color: #8E4C35; background: rgba(142, 76, 53, 0.05); }
.header-main .nav-dropdown .nav-dropdown-col > a { font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; color: #8E4C35; }
.header-main .nav-dropdown ul { margin: 0; }
.header-main .menu-item-has-block > .nav-dropdown { padding: 0; width: min(1100px, calc(100vw - 4rem)); }
.s2-mega .row { max-width: none; padding: 2rem 2.25rem; margin: 0; }
.s2-mega .s2-mega__title a { font-family: var(--font-family-heading); font-size: 1.25rem; color: #8E4C35; text-transform: none; letter-spacing: 0; padding: 0 0 0.75rem; display: block; border-bottom: 1px solid rgba(226, 217, 204, 0.8); margin-bottom: 0.75rem; }
.s2-mega ul li { margin: 0; list-style: none; }
.s2-mega ul li a { display: block; padding: 0.4rem 0; font-size: 0.875rem; color: #1F1A17; }
.s2-mega ul li a:hover { color: #8E4C35; }
.s2-mega .s2-mega__featured img { border-radius: 14px; aspect-ratio: 9 / 7; object-fit: cover; }
.s2-mega .s2-mega__caption { font-family: var(--font-family-heading); font-size: 1.125rem; color: #1F1A17; margin-top: 0.75rem; }

/* Off-canvas mobile menu */
.mobile-sidebar, .off-canvas .sidebar-menu { background: #FAF7F2; }
.off-canvas .nav-sidebar > li > a { font-family: var(--font-family-body); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #1F1A17; }
.off-canvas .nav-sidebar .children li a { font-size: 0.875rem; color: #4b554e; }

/* Absolute footer of Flatsome is replaced by the footer block */
.absolute-footer { display: none; }

/* Line icons like the reference (Flatsome icon font glyphs replaced by masks) */
.header-main .icon-search::before,
.header-main .icon-user::before,
.header-main .icon-shopping-bag::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask: var(--s2-icon) center / contain no-repeat;
  mask: var(--s2-icon) center / contain no-repeat;
}
.header-main .icon-search { --s2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); }
.header-main .icon-user { --s2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c1.2-3.6 4-5.5 7.5-5.5s6.3 1.9 7.5 5.5'/%3E%3C/svg%3E"); }
.header-main .icon-shopping-bag { --s2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); }
.header-main .icon-search, .header-main .icon-user, .header-main .icon-shopping-bag { font-size: 1.25rem; line-height: 1; position: relative; display: block; }
.header-main .cart-item [data-icon-label]::after {
  content: attr(data-icon-label);
  position: absolute; top: -0.45rem; right: -0.45rem; left: auto;
  background: #8E4C35; color: #fff; font-family: var(--font-family-body);
  font-size: 0.625rem; font-weight: 700; width: 1.125rem; height: 1.125rem; min-width: 0;
  line-height: 1.125rem; border-radius: 50%; padding: 0; text-align: center; box-shadow: none; opacity: 1; transform: none;
}