:root {
  --text-color: #000000;
  --text-secondary-color: #666666;
  --primary-color: #453828;
  --secondary-color: #dcaa80;
  --price-color: #f3283d;
  --topbar-bg: #fdd835;
  --topbar-color: #000000;
  --subheader-background: #e2b542;
  --subheader-color: #ffffff;
  --label-background: #fed632;
  --label-color: #ee4d2d;
  --footer-bg: #f3c122;
  --footer-color: #000000;
  --show-loadmore: none !important;
  --order-loadmore: -1 !important;
  --sale-pop-color: #d82e4d;
  --buynow-color: #453828;
  --addtocart-color: #453828;
  --cta-color: #e89024;
  --coupon-title-color: #453828;
  --coupon-button-color: #453828;
  --col-menu: 3;
}
.subheader {
  --subheader-padding: 0px;
  background: var(--subheader-background);
  color: var(--subheader-color);
  display: flex;
  align-items: center;
  padding-top: 10px;
}

.subheader .toogle-nav-wrapper {
  padding: 16px 0 20px;
  border-radius: 5px 5px 0px 0px;
  border: 1px;
  color: var(--subheader-background);
  background: var(--subheader-color);
  font-weight: 500;
  text-transform: uppercase;
}

.subheader .navigation-wrapper {
  font-weight: 400;
}

.subheader .toogle-nav-wrapper .icon-bar {
  width: 20px;
  height: 18px;
  margin-left: 15px;
}

.subheader .toogle-nav-wrapper .icon-bar .bar {
  background: var(--subheader-background);
  width: 20px;
}

.slick-banner,
.slick-banner .slick-track {
  width: 100%;
}

/* Hide bottom header when ACF checkbox is checked */
body.hide-bottom-header [data-row="bottom"],
body.hide-bottom-header .ct-header .ct-sticky-container {
  display: none !important;
}

/* 
 * Fix sticky header covering main header when scroll to top
 * Blocksy uses body[data-header] attribute to indicate scroll state:
 * - "type-1:sticky" = at top of page (sticky NOT active)
 * - "type-1:sticky:shrink" = scrolled (sticky IS active)
 * 
 * We hide the sticky wrapper when at top, and show it only when scrolled.
 */

/* Default: Hide sticky wrapper when at top of page */
header.ct-header .ct-sticky-container [data-sticky] {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* When at top of page (no :shrink in body data-header), hide the sticky element */
header.ct-header .ct-sticky-container [data-sticky="slide"] {
  /* Don't hide - this is the original menu */
}

/* When user has scrolled (body has :shrink), sticky header shows with fixed position */
/* The sticky mechanism handles this - we don't need to override */

/* Only when sticky is active (data-sticky="yes:slide") and we scroll back to top,
   the attribute changes to "slide" but position remains fixed briefly.
   We need to hide it only when it's NOT the original static menu.
   
   Solution: Hide when position is fixed AND data-sticky="slide" */
header.ct-header
  .ct-sticky-container
  [data-sticky="slide"][style*="position: fixed"],
header.ct-header
  .ct-sticky-container
  [data-sticky="slide"][style*="position:fixed"] {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide footer on pages with hide-bottom-header */
body.hide-bottom-header footer,
body.hide-bottom-header .ct-footer {
  display: none !important;
}

/* Hide header CTA button (Liên hệ) on pages with hide-bottom-header */
body.hide-bottom-header .ct-header-cta {
  display: none !important;
}