/* =============================================================
   fmarket-header.css — Green site header (all pages)
   Style: matches homepage hero gradient
   ============================================================= */

/* Xóa khoảng trắng phía trên top-bar (html background lộ ra khi admin bar hiện) */
html {
  background-color: #0b2416 !important;
}

/* ── Variables ────────────────────────────────────────────────── */
:root {
  --fmhdr-dark:   #0b2416;
  --fmhdr-mid:    #1B4332;
  --fmhdr-light:  #2D6A4F;
  --fmhdr-accent: #95D5B2;
  --fmhdr-white:  rgba(255,255,255,.88);
  --fmhdr-muted:  rgba(255,255,255,.62);
}

/* ================================================================
   TOP BAR  — dải nhỏ phía trên cùng (Giới thiệu / Cart / Login)
   ================================================================ */
.top-bar {
  background: var(--fmhdr-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

/* Links trong top-bar */
.top-bar a,
.top-bar .top-nav a,
.top-bar .dokani-user-menu a,
.top-bar li > a {
  color: var(--fmhdr-white) !important;
}
.top-bar a:hover {
  color: var(--fmhdr-accent) !important;
  text-decoration: none;
}

/* Cart amount text */
.top-bar .dokan-cart-amount-top,
.top-bar .dokan-cart-amount,
.top-bar .woocommerce-Price-amount,
.top-bar .woocommerce-Price-currencySymbol {
  color: var(--fmhdr-white) !important;
}

/* ================================================================
   MASTHEAD  — header chính (logo + nav)
   ================================================================ */
#masthead.site-header {
  background: linear-gradient(135deg, #0d2818 0%, #1B4332 50%, #2D6A4F 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.28) !important;
}

/* Tất cả link trong masthead → trắng */
#masthead a,
.site-header a {
  color: var(--fmhdr-white) !important;
}
#masthead a:hover,
.site-header a:hover {
  color: var(--fmhdr-accent) !important;
  text-decoration: none;
}

/* ── Nav links chính ─────────────────────────────────────────── */
#masthead .main-nav > ul > li > a {
  color: var(--fmhdr-white) !important;
  font-weight: 600;
  letter-spacing: .01em;
}
#masthead .main-nav > ul > li > a:hover,
#masthead .main-nav > ul > li.sfHover > a {
  color: var(--fmhdr-accent) !important;
}

/* Menu item active / current */
#masthead .main-nav .current-menu-item > a,
#masthead .main-nav .current-menu-ancestor > a,
#masthead .main-nav .current_page_item > a,
#masthead .main-nav .current-menu-parent > a {
  color: var(--fmhdr-accent) !important;
  font-weight: 700;
}

/* ── Dropdown toggle arrow ────────────────────────────────────── */
#masthead .dropdown-menu-toggle {
  border-color: rgba(255,255,255,.35) !important;
  color: rgba(255,255,255,.7) !important;
}
#masthead .dropdown-menu-toggle:hover {
  border-color: var(--fmhdr-accent) !important;
  color: var(--fmhdr-accent) !important;
}

/* ── Sub-menu panels ─────────────────────────────────────────── */
#masthead .main-nav .sub-menu,
#masthead #primary-menu .sub-menu {
  background: #163829 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.38) !important;
  border-radius: 8px !important;
  overflow: hidden;
}
#masthead .main-nav .sub-menu li a {
  color: var(--fmhdr-white) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
#masthead .main-nav .sub-menu li:last-child a {
  border-bottom: none !important;
}
#masthead .main-nav .sub-menu li a:hover {
  background: rgba(82,183,136,.18) !important;
  color: var(--fmhdr-accent) !important;
}

/* ── User menu (cart icon + login) ───────────────────────────── */
#masthead .responsive-user-menu a,
#masthead .dokani-menu-cart,
#masthead .dokani-menu-login {
  color: var(--fmhdr-white) !important;
}
#masthead .responsive-user-menu a:hover {
  color: var(--fmhdr-accent) !important;
}

/* Cart count badge */
#masthead .dokan-cart-amount-top {
  background: var(--fmhdr-accent) !important;
  color: #0d2818 !important;
  border-radius: 100px !important;
  padding: 1px 7px !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
}

/* Flaticon cart icon */
#masthead .flaticon,
#masthead [class*="flaticon-"] {
  color: var(--fmhdr-white) !important;
}

/* ── Mobile toggle button ────────────────────────────────────── */
.site-header .menu-toggle {
  color: rgba(255,255,255,.9) !important;
  border-color: rgba(255,255,255,.25) !important;
  background: transparent !important;
}
.site-header .menu-toggle:hover,
.site-header .menu-toggle:focus {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.5) !important;
}

/* Hamburger lines (::before / ::after pseudo or SVG) */
.site-header .menu-toggle::before,
.site-header .menu-toggle::after,
.site-header .menu-toggle .mobile-menu {
  color: #fff !important;
}

/* ── Mobile nav panel ────────────────────────────────────────── */
@media (max-width: 768px) {
  #masthead #site-navigation .inside-navigation,
  #masthead #primary-menu,
  #masthead #responsive-menu {
    background: var(--fmhdr-mid) !important;
  }
  #masthead #primary-menu li a,
  #masthead #responsive-menu li a {
    color: var(--fmhdr-white) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
  }
  #masthead #primary-menu li a:hover,
  #masthead #responsive-menu li a:hover {
    color: var(--fmhdr-accent) !important;
    background: rgba(255,255,255,.06) !important;
  }
  /* Sub-menu mobile */
  #masthead .sub-menu {
    background: rgba(0,0,0,.15) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* ================================================================
   HOMEPAGE  — header hoà vào hero section bên dưới
   (header transparent → hero green = 1 khối liền mạch)
   ================================================================ */
.home.page-template-page-fullhtml .top-bar {
  background: rgba(11,36,22,.9) !important;
}
.home.page-template-page-fullhtml #masthead.site-header {
  background: linear-gradient(180deg, #0d2818 0%, rgba(13,40,24,.6) 100%) !important;
  box-shadow: none !important;
}
/* Hero bắt đầu ngay dưới header → kéo margin-top lên để không có khoảng trắng */
.home.page-template-page-fullhtml .fmh-hero {
  margin-top: 0;
  padding-top: 60px;
}