/* ===== HIGH CONTRAST & PREMIUM HEADER NAVIGATION ===== */
.navbar-before {
  position: relative !important;
  z-index: 99999 !important;
  overflow: visible !important;
  padding: 8px 0 !important;
}

.navbar-before .container,
.navbar-before .container>.row,
.navbar-before .col-md-2,
.navbar-before .col-md-6,
.navbar-before .col-md-4,
.navbar-before .col-md-3,
.navbar-before .navbar-right,
.navbar-before .navbar-nav,
.navbar-before .account-dropdown,
.navbar-before li.dropdown {
  overflow: visible !important;
}

@media (min-width: 992px) {
  .navbar-before .container>.row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }

  /* Logo: vertically centered and beautifully balanced in the header */
  .navbar-before .col-md-2 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    align-self: center !important;
    height: auto !important;
    margin: 0 !important;
  }

  .navbar-before .navbar-header {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }

  .navbar-before .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: auto !important;
    padding: 0 !important;
    float: none !important;
    margin: 0 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
  }

  .navbar-before .navbar-brand:hover {
    opacity: 0.92 !important;
    transform: scale(1.02) !important;
  }

  .navbar-before .navbar-brand>img {
    max-height: 52px !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .navbar-before .col-md-6,
  .navbar-before .col-md-7 {
    float: none !important;
    padding: 0 10px !important;
    align-self: flex-start !important;
    margin: 0 !important;
  }

  /* Account & Cart pills: aligned strictly on the same 44px axis as the search input */
  .navbar-before .col-md-4,
  .navbar-before .col-md-3 {
    display: flex !important;
    align-items: center !important;
    /* justify-content: flex-end !important; */
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    align-self: flex-start !important;
    height: 44px !important;
    margin: 0 !important;
  }

  .navbar-before .navbar-right,
  .navbar-before .navbar-nav.navbar-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 44px !important;
    float: none !important;
  }

  .navbar-before .navbar-right>li {
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: relative !important;
  }
}

.navbar-before .navbar-nav>li>a {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  text-decoration: none !important;
  height: 36px !important;
  box-sizing: border-box !important;
}

.navbar-before .navbar-nav>li>a:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   PREMIUM HIGH-CONTRAST HEADER CAPSULES (Desktop & PC)
   Buymed / Modern Pharmacy Style: Crisp Solid White Pills on Dark Green Header
   High contrast, crystal clear typography, vibrant badge & emerald accents
   ========================================================================== */

/* 1. USER ACCOUNT CAPSULE */
.navbar-before .navbar-nav>li>a.account-toggle,
.account-toggle,
#menu1.account-toggle {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  height: 38px !important;
  padding: 0 14px 0 6px !important;
  border-radius: 9999px !important;
  border: 1.5px solid #d1fae5 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.navbar-before .navbar-nav>li>a.account-toggle:hover,
.navbar-before .navbar-nav>li>a.account-toggle:focus,
.navbar-before .navbar-nav>li.account-dropdown.open>a.account-toggle,
.account-toggle:hover,
.account-toggle:focus,
.account-dropdown.open .account-toggle {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #16a34a !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

/* User Avatar Ring */
.account-avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  background-color: #dcfce7 !important;
  border: 2px solid #16a34a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.account-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.account-avatar i {
  color: #15803d !important;
  font-size: 13px !important;
}

/* User Display Name */
.navbar-before .navbar-nav>li>a.account-toggle .account-name,
.account-toggle .account-name,
.account-name {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  max-width: 110px !important;
  display: inline-block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

@media (max-width: 1200px) {
  .account-name {
    max-width: 75px !important;
  }
}

/* Caret Arrow */
.account-toggle .caret,
.navbar-before .navbar-nav>li>a.account-toggle .caret {
  color: #475569 !important;
  border-top-color: #475569 !important;
  border-bottom-color: #475569 !important;
  margin-left: 2px !important;
  transition: transform 0.2s ease !important;
}

.account-dropdown.open .account-toggle .caret,
.navbar-before .navbar-nav>li.account-dropdown.open>a.account-toggle .caret {
  transform: rotate(180deg) !important;
}

/* 2. SHOPPING CART CAPSULE */
.navbar-before .navbar-nav>li>a#sp-cart,
.navbar-before #sp-cart,
#sp-cart {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #d1fae5 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 16px !important;
  border-radius: 9999px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  height: 38px !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.navbar-before .navbar-nav>li>a#sp-cart:hover,
.navbar-before .navbar-nav>li>a#sp-cart:focus,
.navbar-before #sp-cart:hover,
.navbar-before #sp-cart:focus,
#sp-cart:hover,
#sp-cart:focus {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #16a34a !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

/* Crisp ultra-clear dark slate typography for cart text - NO pale green */
.navbar-before .navbar-nav>li>a#sp-cart,
.navbar-before .navbar-nav>li>a#sp-cart span,
#sp-cart,
#sp-cart span {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}

.navbar-before .navbar-nav>li>a#sp-cart .cart-text-label,
#sp-cart .cart-text-label {
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
}

#sp-cart:hover span,
.navbar-before .navbar-nav>li>a#sp-cart:hover span {
  color: #0f172a !important;
}

/* Bright brand emerald shopping cart icon */
#sp-cart i.fa-shopping-cart,
.navbar-before .navbar-nav>li>a#sp-cart i.fa-shopping-cart {
  color: #16a34a !important;
  font-size: 16px !important;
  margin: 0 3px 0 1px !important;
}

/* Vibrant Cart Quantity Badge */
#sp-cart #shoppingquantity,
.navbar-before .navbar-nav>li>a#sp-cart #shoppingquantity {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  background-color: #ef4444 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  padding: 2px 7.5px !important;
  border-radius: 9999px !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  display: inline-block !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.45) !important;
  margin: 0 2px !important;
}

/* 3. GUEST LOGIN CAPSULE */
.navbar-before .navbar-nav>li>a.popup-text,
.navbar-before .popup-text {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #d1fae5 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 15px !important;
  border-radius: 9999px !important;
  height: 38px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.navbar-before .navbar-nav>li>a.popup-text:hover,
.navbar-before .navbar-nav>li>a.popup-text:focus,
.navbar-before .popup-text:hover {
  background: #ffffff !important;
  border-color: #16a34a !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3) !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

.navbar-before .navbar-nav>li>a.popup-text i {
  color: #16a34a !important;
  font-size: 14px !important;
}

/* Fix text wrapping and enforce nowrap */
#sp-cart,
.account-toggle,
#dropdownAccount {
  white-space: nowrap !important;
}

/* Dropdown open state: retain solid crisp white capsule styling */
.navbar-before .navbar-nav>li.account-dropdown.open>a.account-toggle,
.navbar-before .navbar-nav>li.account-dropdown.open>a.account-toggle:hover,
.navbar-before .navbar-nav>li.account-dropdown.open>a.account-toggle:focus {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #16a34a !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.25) !important;
}

.navbar-before .navbar-nav>li.account-dropdown.open>a.account-toggle .account-name {
  color: #0f172a !important;
}

.navbar-before .navbar-nav>li.account-dropdown.open>a.account-toggle .account-avatar i {
  color: #15803d !important;
}

.account-dropdown .dropdown-menu,
.account-header-dropdown,
.navbar-before .account-dropdown .dropdown-menu,
.navbar-before .account-header-dropdown {
  background-color: #ffffff !important;
  border: 1px solid #e2f0e6 !important;
  border-radius: 12px !important;
  padding: 6px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  min-width: 245px !important;
  width: 245px !important;
  margin-top: 4px !important;
  z-index: 999999 !important;
  list-style: none !important;
}

.account-dropdown.open>.dropdown-menu,
.account-dropdown.open>.account-header-dropdown,
.open>.account-header-dropdown {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 999999 !important;
}

.account-header-dropdown::before {
  content: '' !important;
  position: absolute !important;
  top: -5px !important;
  right: 20px !important;
  width: 10px !important;
  height: 10px !important;
  background: #ffffff !important;
  border-left: 1px solid #e2f0e6 !important;
  border-top: 1px solid #e2f0e6 !important;
  transform: rotate(45deg) !important;
  z-index: 1000000 !important;
}

.account-dropdown .dropdown-menu>li {
  display: block !important;
  width: 100% !important;
}

.account-dropdown .dropdown-menu>li>a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 18px !important;
  color: #4a5568 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
}

.account-dropdown .dropdown-menu>li>a i {
  width: 18px !important;
  font-size: 14px !important;
  color: #718096 !important;
  transition: all 0.2s ease !important;
}

.account-dropdown .dropdown-menu>li>a:hover {
  background-color: #f4fbf7 !important;
  color: #27ae60 !important;
}

.account-dropdown .dropdown-menu>li>a:hover i {
  color: #27ae60 !important;
}

.account-dropdown .dropdown-menu .divider {
  height: 1px !important;
  margin: 6px 0 !important;
  overflow: hidden !important;
  background-color: #e8f5e9 !important;
}


/* ===== PREMIUM CATEGORY DROPDOWN MENU FOR DESKTOP ===== */
@media (min-width: 992px) {

  /* Category Navigation Bar Base */
  .navbar-default.navbar-main-white.yamm {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 100 !important;
  }

  .navbar-default.navbar-main-white.yamm #main-nav-collapse {
    background: transparent !important;
  }

  /* Parent Category Links */
  .navbar-default.navbar-main-white .navbar-nav>li>a.navbar-item-top {
    color: #4a5568 !important;
    font-size: 15.5px !important;
    /* Increased font-size for better readability */
    font-weight: 700 !important;
    /* Bold, solid typography */
    padding: 18px 12px !important;
    /* Reduced horizontal padding to prevent wrapping/overflow */
    transition: all 0.25s ease !important;
    background: transparent !important;
    border-bottom: 3px solid transparent !important;
  }

  .navbar-default.navbar-main-white .navbar-nav>li:hover>a.navbar-item-top,
  .navbar-default.navbar-main-white .navbar-nav>li.dropdown.open>a.navbar-item-top {
    color: #1a5740 !important;
    border-bottom-color: #27ae60 !important;
    background: rgba(39, 174, 96, 0.04) !important;
  }

  /* Retain and polish Quick Order accent */
  .navbar-default.navbar-main-white .navbar-nav>li>a.navbar-item-top[href="/quick-order"] {
    color: #27ae60 !important;
    font-weight: 700 !important;
  }

  .navbar-default.navbar-main-white .navbar-nav>li:hover>a.navbar-item-top[href="/quick-order"] {
    background: rgba(39, 174, 96, 0.08) !important;
  }

  /* Lock down Dropdown Positioning to prevent Popper.js from jumping */
  .navbar-default.navbar-main-white .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: 580px !important;
    /* Premium compact width */
    min-width: 580px !important;
    transform: none !important;
    /* Force block Popper.js transform */
    margin: 0 !important;
    padding: 22px 12px !important;
    /* Optimized tight padding for modern spacing closer to the left edge */
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-top: 3px solid #1a5740 !important;
    /* Elegant green accent border top */
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
    opacity: 0;
    visibility: hidden;
    display: block !important;
    /* Enforce block for CSS transition to work */
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform: translateY(10px) !important;
    z-index: 1000 !important;
  }

  /* Remove Bootstrap row and column default offsets/paddings within the dropdown to align items tightly to the left */
  .navbar-default.navbar-main-white .dropdown-menu .yamm-content,
  .navbar-default.navbar-main-white .dropdown-menu .col-md-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .navbar-default.navbar-main-white .dropdown-menu .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Stabilize parent class relative for clean absolute alignment */
  .navbar-default.navbar-main-white .navbar-nav>li.dropdown {
    position: relative !important;
  }

  /* Smooth hover entrance */
  .navbar-default.navbar-main-white .navbar-nav>li.dropdown:hover>.dropdown-menu,
  .navbar-default.navbar-main-white .navbar-nav>li.dropdown.open>.dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  /* Submenu Links Grid Layout - 2 Balanced Columns with extra breathing room & scrollbar */
  .dropdown-menu-items-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px 24px !important;
    /* Tightened horizontal gap for compact elegance */
    list-style: none !important;
    padding: 0 16px 0 0 !important;
    /* Right padding for scrollbar clearance */
    margin: 0 !important;
    max-height: 350px !important;
    /* Limit maximum height of dropdown card */
    overflow-y: auto !important;
    /* Enable scrolling for long lists like active ingredients */
    scrollbar-width: thin !important;
    /* Firefox support */
    scrollbar-color: #cbd5e1 #f1f5f9 !important;
    /* Firefox support */
  }

  /* Custom Premium Scrollbar for Desktop Webkit browsers */
  .dropdown-menu-items-list::-webkit-scrollbar {
    width: 6px !important;
  }

  .dropdown-menu-items-list::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 8px !important;
  }

  .dropdown-menu-items-list::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 8px !important;
  }

  .dropdown-menu-items-list::-webkit-scrollbar-thumb:hover {
    background: #1a5740 !important;
    /* Green highlight on hover */
  }

  .dropdown-menu-items-list>li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .dropdown-menu-items-list>li>a {
    display: block !important;
    padding: 8px 14px !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    border-left: 2px solid transparent !important;
    white-space: normal !important;
    /* Wrap long category names elegantly */
  }

  .dropdown-menu-items-list>li>a:hover {
    background-color: #f4fbf7 !important;
    color: #1a5740 !important;
    padding-left: 10px !important;
    /* Compact clean slide to the right on hover */
    border-left-color: #27ae60 !important;
  }

  /* Override standard Bootstrap caret to match our high specificity design */
  .navbar-default.navbar-main-white .navbar-nav>li.dropdown>a.navbar-item-top .fa-caret-down {
    transition: transform 0.25s ease !important;
  }

  .navbar-default.navbar-main-white .navbar-nav>li.dropdown:hover>a.navbar-item-top .fa-caret-down {
    transform: rotate(180deg) !important;
  }

  /* Stabilize general account dropdown on PC */
  .account-dropdown .dropdown-menu,
  .account-header-dropdown,
  .navbar-before .account-header-dropdown {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    z-index: 999999 !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }
}

/* Align menu items vertically to prevent misalignment from different baseline heights */
.navbar-default.navbar-main-white .navbar-nav>li {
  vertical-align: middle !important;
}

/* Responsive amendments for medium screens (992px - 1199px) to prevent wrapping */
@media (min-width: 992px) and (max-width: 1199px) {
  .navbar-default.navbar-main-white .navbar-nav>li>a.navbar-item-top {
    padding: 18px 8px !important;
    font-size: 13.5px !important;
  }
}

/* ===== BUYMED-STYLE CAPSULE SEARCH BAR & SUGGESTION TAGS ===== */
.header-search-container {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  margin: 0 0 2px 0 !important;
}

.header-search-bar {
  display: flex !important;
  align-items: center !important;
  background-color: #ffffff !important;
  border-radius: 9999px !important;
  height: 44px !important;
  padding: 0 12px 0 16px !important;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #dcf2e3 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.header-search-bar:focus-within {
  border-color: #22c55e !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12), 0 0 0 3px rgba(34, 197, 94, 0.25) !important;
}

.header-search-icon-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 4px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #6366f1 !important;
  font-size: 17px !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
  flex-shrink: 0 !important;
  width: 26px !important;
  height: 26px !important;
}

.header-search-icon-btn:hover {
  transform: scale(1.12);
  color: #16a34a !important;
}

.header-search-input-wrap {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
}

.header-search-input {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #047857 !important;
  padding: 0 8px !important;
  box-shadow: none !important;
  line-height: normal !important;
  font-family: inherit !important;
}

.header-search-input:focus {
  color: #065f46 !important;
}

.header-search-input::placeholder {
  color: #059669 !important;
  font-weight: 600 !important;
  opacity: 0.95 !important;
}

.header-search-input::-webkit-input-placeholder {
  color: #059669 !important;
  font-weight: 600 !important;
  opacity: 0.95 !important;
}

.header-search-input:-ms-input-placeholder {
  color: #059669 !important;
  font-weight: 600 !important;
  opacity: 0.95 !important;
}

.header-search-input::-moz-placeholder {
  color: #059669 !important;
  font-weight: 600 !important;
  opacity: 0.95 !important;
}

.header-search-divider {
  width: 1px !important;
  height: 22px !important;
  background-color: #e2e8f0 !important;
  flex-shrink: 0 !important;
  margin: 0 8px !important;
}

.header-search-category-wrap {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  flex-shrink: 0 !important;
  max-width: 165px !important;
  height: 100% !important;
}

.header-search-category-select {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  padding: 0 20px 0 6px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 155px !important;
  height: 100% !important;
}

.header-search-caret {
  position: absolute !important;
  right: 2px !important;
  pointer-events: none !important;
  color: #64748b !important;
  font-size: 11px !important;
}

/* Suggestion tags under search bar - Buymed style mint pills */
.header-search-suggestions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 6px !important;
  flex-wrap: wrap !important;
  overflow: hidden !important;
  max-height: 28px !important;
}

.header-search-tag {
  background: #dcfce7 !important;
  color: #065f46 !important;
  border-radius: 9999px !important;
  padding: 2.5px 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border: 1px solid rgba(187, 247, 208, 0.75) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
}

.header-search-tag:hover {
  background: #bbf7d0 !important;
  color: #047857 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
  text-decoration: none !important;
}

/* ===== BUYMED-STYLE SEARCH DROPDOWN POPUP ===== */
.header-search-container {
  position: relative !important;
}

.header-search-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #e2e8f0 !important;
  padding: 14px 16px !important;
  z-index: 1065 !important;
  box-sizing: border-box !important;
  display: none;
  animation: searchDropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes searchDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-dropdown-section {
  display: flex !important;
  flex-direction: column !important;
}

.search-dropdown-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

.search-dropdown-title {
  color: #64748b !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 8px !important;
}

.search-dropdown-header .search-dropdown-title {
  margin-bottom: 0 !important;
}

.search-dropdown-title i {
  font-size: 13px !important;
  color: #64748b !important;
}

.btn-clear-history {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  transition: color 0.15s ease !important;
}

.btn-clear-history:hover {
  color: #ef4444 !important;
}

/* History List items */
.search-history-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.search-history-empty {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-style: italic !important;
  padding: 4px 0 !important;
}

.search-history-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background 0.15s ease !important;
}

.search-history-item:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

.search-history-item-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.search-history-item-left i {
  color: #94a3b8 !important;
  font-size: 12px !important;
}

.btn-remove-history-item {
  background: transparent !important;
  border: none !important;
  color: #cbd5e1 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  padding: 0 4px !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}

.btn-remove-history-item:hover {
  color: #ef4444 !important;
}

/* Divider */
.search-dropdown-divider {
  width: 100% !important;
  height: 1px !important;
  background-color: #f1f5f9 !important;
  margin: 10px 0 !important;
}

/* Trending Pills matching image */
.search-trending-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
}

.search-trending-pill {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
}

.search-trending-pill .pill-dot {
  color: #94a3b8 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  margin-right: 2px !important;
}

.search-trending-pill:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* Desktop Navbar Alignment */
@media (min-width: 992px) {
  .navbar-before {
    padding: 8px 0 !important;
  }

  .navbar-before .row {
    display: flex !important;
    align-items: flex-start !important;
  }
}

/* Mobile Search Overrides */
@media (max-width: 991px) {
  .mobile-search-container {
    margin: 8px 0 10px 0 !important;
    width: 100% !important;
    clear: both !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }

  .mobile-search-container .header-search-bar {
    height: 42px !important;
    padding: 0 8px 0 12px !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    border: 1px solid #dcf2e3 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mobile-search-container .header-search-icon-btn {
    width: 24px !important;
    height: 24px !important;
    font-size: 15px !important;
    color: #6366f1 !important;
    flex-shrink: 0 !important;
    margin-right: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  .mobile-search-container .header-search-input-wrap {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  .mobile-search-container .header-search-input {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #047857 !important;
    padding: 0 4px !important;
    box-shadow: none !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .mobile-search-container .header-search-input::placeholder {
    color: #059669 !important;
    font-weight: 600 !important;
    opacity: 0.95 !important;
    font-size: 13px !important;
  }

  .mobile-search-container .header-search-divider {
    width: 1px !important;
    height: 20px !important;
    background-color: #e2e8f0 !important;
    flex-shrink: 0 !important;
    margin: 0 6px !important;
  }

  .mobile-search-container .header-search-category-wrap {
    max-width: 98px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
  }

  .mobile-search-container .header-search-category-select {
    max-width: 90px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    padding: 0 14px 0 2px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
  }

  .mobile-search-container .header-search-caret {
    position: absolute !important;
    right: 0 !important;
    font-size: 10px !important;
    color: #64748b !important;
    pointer-events: none !important;
  }

  .mobile-search-suggestions {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 5px 2px 2px 2px !important;
    margin-top: 4px !important;
    gap: 6px !important;
    scrollbar-width: none !important;
    max-height: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mobile-search-suggestions::-webkit-scrollbar {
    display: none !important;
  }

  .mobile-search-suggestions .header-search-tag {
    flex-shrink: 0 !important;
    background: #dcfce7 !important;
    color: #065f46 !important;
    border-radius: 9999px !important;
    padding: 3px 11px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border: 1px solid rgba(187, 247, 208, 0.75) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
  }
}

/* ===== RESPONSIVE AMENDMENTS FOR MOBILE & TABLET ===== */
/* ===== RESPONSIVE AMENDMENTS FOR MOBILE & TABLET ===== */
@media (max-width: 991px) {

  .navbar-default.navbar-main-white,
  .navbar-default.navbar-main-white.yamm {
    margin-bottom: 0 !important;
  }

  /* Header mobile: flex row [hamburger | logo (co gian) | nut hanh dong] + o tim kiem xuong dong.
     Dung flex thay cho absolute de logo khong bao gio de len cac nut ben phai. */
  nav.navbar-first {
    display: block !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 8px 0 0 !important;
    position: relative !important;
    z-index: 1050 !important;
  }

  nav.navbar-first .container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 6px !important;
    position: relative !important;
    height: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  nav.navbar-first .container::before,
  nav.navbar-first .container::after {
    display: none !important;
  }

  /* ul chi la khung chua: cac li cua no tro thanh flex item cua .container */
  nav.navbar-first .navbar-mob-item-left {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* 1. Hamburger ben trai */
  .navbar-mob-item-left>li.navbar-header {
    order: 1 !important;
    flex: 0 0 auto !important;
    position: static !important;
    transform: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* 2. Logo: chiem phan con lai o giua, co lai khi thieu cho */
  nav.navbar-first div.navbar-header {
    order: 2 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    position: static !important;
    transform: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .navbar-brand {
    padding: 0 !important;
    height: auto !important;
    margin: 0 !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 100% !important;
  }

  .navbar-brand img {
    max-height: 38px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  .navbar-mob-item-left .navbar-toggle {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    display: block !important;
    float: none !important;
  }

  .navbar-mob-item-left .navbar-toggle .icon-bar {
    background-color: #ffffff !important;
    width: 20px !important;
    height: 2px !important;
    display: block !important;
  }

  /* 3. Cac nut ben phai (Dang ky/Dang nhap hoac Tai khoan/Gio hang) */
  .navbar-mob-item-left>li.dropdown {
    order: 3 !important;
    flex: 0 0 auto !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 !important;
  }

  /* 4. O tim kiem chiem tron 1 dong ben duoi */
  nav.navbar-first .mobile-search-container {
    order: 4 !important;
    flex: 0 0 100% !important;
    margin: 8px 0 10px 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }

  .navbar-mob-item-left .dropdown-menu {
    max-width: calc(100vw - 20px) !important;
  }

  /* Target both anchor buttons and li anchors: High-Contrast Crisp White Pills */
  .navbar-mob-item-left a.btn,
  .navbar-mob-item-left #sp-cart,
  .navbar-mob-item-left #dropdownAccount,
  .navbar-mob-item-left .mobile-login-pill,
  .navbar-mob-item-left .mobile-register-pill,
  .navbar-mob-item-left>a.btn {
    height: 34px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    /* Capsule style */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    text-transform: none !important;
    box-sizing: border-box !important;
    border: 1.5px solid #d1fae5 !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease !important;
  }

  .navbar-mob-item-left a.btn:hover,
  .navbar-mob-item-left #sp-cart:hover,
  .navbar-mob-item-left #dropdownAccount:hover,
  .navbar-mob-item-left .mobile-login-pill:hover,
  .navbar-mob-item-left .mobile-register-pill:hover,
  .navbar-mob-item-left>a.btn:hover {
    background-color: #ffffff !important;
    border-color: #16a34a !important;
    color: #0f172a !important;
    box-shadow: 0 3px 10px rgba(22, 163, 74, 0.25) !important;
  }

  .navbar-mob-item-left .mobile-login-pill i,
  .navbar-mob-item-left .mobile-register-pill i {
    color: #16a34a !important;
    font-size: 13px !important;
  }

  /* Truncate Username & styling for mobile account pill */
  .navbar-mob-item-left #dropdownAccount {
    max-width: 105px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #0f172a !important;
    border-color: #d1fae5 !important;
  }

  .navbar-mob-item-left #dropdownAccount .account-name {
    max-width: 80px !important;
    height: auto !important;
    line-height: 1.5 !important;
    padding-top: 1px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
  }

  .navbar-mob-item-left #dropdownAccount .caret {
    border-top-color: #475569 !important;
    border-bottom-color: #475569 !important;
    margin-left: 2px !important;
  }

  /* Compact cart pill for mobile: hide text, show icon + badge */
  .navbar-mob-item-left #sp-cart {
    font-size: 0 !important;
    padding: 0 10px !important;
    background-color: #ffffff !important;
    border: 1.5px solid #d1fae5 !important;
    color: #0f172a !important;
  }

  .navbar-mob-item-left #sp-cart span,
  .navbar-mob-item-left #sp-cart .cart-text-label {
    display: none !important;
  }

  .navbar-mob-item-left #sp-cart i {
    font-size: 15px !important;
    color: #16a34a !important;
    margin: 0 !important;
  }

  .navbar-mob-item-left #sp-cart #shoppingquantity,
  .navbar-mob-item-left #sp-cart spanx {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    background-color: #ef4444 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
    padding: 2px 6px !important;
    line-height: 1 !important;
    margin-left: 4px !important;
    display: inline-block !important;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.4) !important;
  }

  /* Dropdown items for account */
  .navbar-mob-item-left .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    z-index: 999999 !important;
    min-width: 160px !important;
    padding: 5px 0 !important;
    margin-top: 5px !important;
  }

  .navbar-mob-item-left .dropdown-menu li {
    display: block !important;
    width: 100% !important;
  }

  /* Override white-on-white text issue from inline style="color:#fff;" */
  .navbar-mob-item-left .dropdown-menu li a {
    color: #333333 !important;
    /* Dark text */
    padding: 8px 15px !important;
    font-size: 13px !important;
    display: block !important;
    text-decoration: none !important;
    text-align: left !important;
    font-weight: 500 !important;
    background-color: transparent !important;
  }

  .navbar-mob-item-left .dropdown-menu li a:hover {
    background-color: #f5f5f5 !important;
    color: #1a5740 !important;
  }

  /* Hamburger menu dropdown links styling when expanded */
  #main-nav-collapse {
    border: none !important;
    box-shadow: none !important;
  }

  #main-nav-collapse .navbar-nav {
    margin: 5px 0 !important;
    padding: 0 !important;
    background-color: #f8f9fa !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  #main-nav-collapse .navbar-nav li a {
    color: #333333 !important;
    padding: 13px 20px !important;
    font-size: 15.5px !important;
    /* Increased for premium visibility on mobile */
    font-weight: 700 !important;
    /* Strong bold typeface */
    border-bottom: 1px solid #eeeeee !important;
  }

  /* Hide the duplicate inline down-caret icon next to category text on mobile/tablet */
  #main-nav-collapse .navbar-nav li a .fa-caret-down {
    display: none !important;
  }

  #main-nav-collapse .navbar-nav li a:hover {
    background-color: #e2f0e6 !important;
    color: #1a5740 !important;
  }


  /* Man hinh hep: thu nho logo + nut, van du cho 2 nut Dang ky/Dang nhap */
  @media (max-width: 400px) {
    nav.navbar-first .container {
      gap: 0 6px !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
    }

    .navbar-brand img {
      max-height: 32px !important;
    }

    .navbar-mob-item-left #dropdownAccount {
      max-width: 90px !important;
      padding: 0 8px !important;
    }

    .navbar-mob-item-left a.btn,
    .navbar-mob-item-left #sp-cart,
    .navbar-mob-item-left #dropdownAccount,
    .navbar-mob-item-left .mobile-login-pill,
    .navbar-mob-item-left .mobile-register-pill {
      height: 30px !important;
      font-size: 11.5px !important;
      padding: 0 9px !important;
      gap: 4px !important;
    }

    .navbar-mob-item-left #sp-cart {
      padding: 0 8px !important;
    }
  }

  @media (max-width: 350px) {
    nav.navbar-first .container {
      gap: 0 4px !important;
    }

    .navbar-mob-item-left .navbar-toggle {
      padding: 7px 8px !important;
    }

    .navbar-mob-item-left .mobile-login-pill i,
    .navbar-mob-item-left .mobile-register-pill i {
      display: none !important;
    }

    .navbar-mob-item-left .mobile-login-pill,
    .navbar-mob-item-left .mobile-register-pill {
      padding: 0 7px !important;
      font-size: 11px !important;
    }

    .navbar-mob-item-left #dropdownAccount {
      max-width: 70px !important;
    }
  }

  /* ===== MOBILE ACCORDION CATEGORY SUBMENU ===== */
  /* Scope to mobile hamburger nav-collapse */
  #main-nav-collapse .dropdown-menu {
    position: static !important;
    /* Nest inline */
    float: none !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    background-color: #fcfdfe !important;
    /* Extremely soft light grey/white background */
    padding: 8px 10px 8px 16px !important;
    /* Sleek nesting padding */
    margin: 0 !important;
    display: none !important;
    /* Hide by default, toggle via open class */
    transform: none !important;
  }

  /* Display nested submenu when the parent dropdown has open class */
  #main-nav-collapse .dropdown.open>.dropdown-menu {
    display: block !important;
  }

  /* Mobile submenu links */
  #main-nav-collapse .dropdown-menu-items-list>li>a {
    display: block !important;
    padding: 9px 12px !important;
    /* Compact yet touch-friendly padding */
    color: #4a5568 !important;
    /* High contrast dark grey links */
    font-size: 14.5px !important;
    /* Increased for mobile legibility */
    font-weight: 600 !important;
    /* Sightly bolder link text */
    border-bottom: 1px solid #f1f5f9 !important;
    /* Clean separator line */
    text-decoration: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
  }

  #main-nav-collapse .dropdown-menu-items-list>li:last-child>a {
    border-bottom: none !important;
  }

  #main-nav-collapse .dropdown-menu-items-list>li>a:hover,
  #main-nav-collapse .dropdown-menu-items-list>li>a:active {
    background-color: #e2f0e6 !important;
    color: #1a5740 !important;
  }

  /* Parent list items and caret positions on mobile */
  #main-nav-collapse .dropdown {
    position: relative !important;
  }

  /* Prevent long parent titles from colliding with round caret buttons */
  #main-nav-collapse .dropdown>a.navbar-item-top {
    padding-right: 60px !important;
  }

  /* Custom round toggle button on mobile */
  #main-nav-collapse .drop-caret {
    display: flex !important;
    /* Flex layout to center caret icon perfectly */
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 15px !important;
    width: 34px !important;
    height: 34px !important;
    background-color: #e2f0e6 !important;
    /* Light green tint button */
    color: #1a5740 !important;
    /* Deep brand green icon */
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  #main-nav-collapse .drop-caret::before {
    content: "\f107" !important;
    /* FontAwesome angle-down caret */
    font-family: "FontAwesome" !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    display: inline-block !important;
    line-height: 1 !important;
  }

  /* Interactive rotation and highlight when expanded */
  #main-nav-collapse .dropdown.open .drop-caret {
    background-color: #1a5740 !important;
    color: #ffffff !important;
    transform: translateY(-50%) rotate(180deg) !important;
  }
}

/* ===== SHARED MENU CUSTOM STYLES (Moved from _MenuPartial) ===== */
.dropdown-menu-items-list>li>a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight: normal !important;
}

.menu-cate-img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease-in-out !important;
}

.dropdown-menu-items-list>li>a:hover .menu-cate-img {
  transform: scale(1.15) !important;
}

.navbar-default.navbar-main-white .navbar-nav>li {
  vertical-align: middle !important;
}

.navbar-default.navbar-main-white .navbar-nav>li>a.navbar-item-top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: normal !important;
}

.menu-parent-img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease-in-out !important;
}

.navbar-default.navbar-main-white .navbar-nav>li:hover>a.navbar-item-top .menu-parent-img {
  transform: scale(1.15) !important;
}

.parent-title {
  font-size: inherit !important;
  font-weight: normal !important;
  color: inherit !important;
  opacity: 1 !important;
  display: inline-block !important;
  height: auto !important;
  margin: 0 !important;
}

.navbar-default.navbar-main-white .navbar-nav>li>a.navbar-item-top>i.fa {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* ===== FLOATING SIDE BANNERS ===== */
.side-ad-banner-anchor {
  position: relative !important;
  height: 0 !important;
}

.side-ad-banner {
  position: absolute !important;
  top: 210px !important;
  width: 220px !important;
  aspect-ratio: 300 / 950 !important;
  height: auto !important;
  z-index: 100 !important;
  transition: transform 0.3s ease !important;
  background: transparent !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15)) !important;
}

.side-ad-banner a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.side-ad-banner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 10px !important;
}

.side-ad-left {
  left: calc(50% - 915px) !important;
}

.side-ad-right {
  right: calc(50% - 915px) !important;
}

@media (max-width: 1849px) and (min-width: 1700px) {
  .side-ad-banner {
    width: 150px !important;
  }

  .side-ad-left {
    left: calc(50% - 845px) !important;
  }

  .side-ad-right {
    right: calc(50% - 845px) !important;
  }
}

.side-ad-banner:hover {
  transform: translateY(-5px) !important;
}

@media (max-width: 1699px) {
  .side-ad-banner {
    display: none !important;
  }
}

/* ===== DESKTOP GUEST ACTIONS (Đăng ký / Đăng nhập / Giỏ hàng) — cân đối chiều rộng ===== */
.navbar-before .login-pill-text {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

.navbar-before .login-pill-text b {
  font-weight: 700 !important;
  font-size: 13.5px !important;
}

.navbar-before .login-pill-sub {
  display: none !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #64748b !important;
}

@media (min-width: 992px) {
  .navbar-before .navbar-guest {
    gap: 8px !important;
  }

  .navbar-before .navbar-guest>li>a.popup-text {
    padding: 0 12px !important;
    gap: 6px !important;
  }

  /* Khách: gọn giỏ hàng còn "Giỏ hàng 🛒 0" để đủ chỗ cho 2 nút */
  .navbar-before .navbar-guest #sp-cart .cart-text-label {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .navbar-before .navbar-guest {
    gap: 12px !important;
  }

  .navbar-before .navbar-guest .login-pill-sub {
    display: block !important;
  }
}

/* ===== POPUP (Magnific) ĐĂNG NHẬP / ĐĂNG KÝ / QUÊN MẬT KHẨU ===== */
/* Header có z-index 99999 nên popup phải cao hơn để không bị che khuất */
.mfp-bg {
  z-index: 1000000 !important;
}

.mfp-wrap {
  z-index: 1000001 !important;
}

/* Hộp thoại không bao giờ cao quá màn hình: cuộn nội bộ thay vì tràn lên dưới header */
#formLoginDialog,
#formAccountDialog,
#formPwdDialog {
  max-height: calc(100vh - 40px) !important;
  overflow-y: auto !important;
  margin: 20px auto !important;
  border-radius: 12px !important;
  -webkit-overflow-scrolling: touch;
}

#formAccountDialog {
  max-width: 640px !important;
  padding: 18px 28px 20px !important;
}

#formAccountDialog .widget-title {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

#formAccountDialog hr {
  margin: 8px 0 12px !important;
}

#formAccountDialog #register-guide {
  margin-bottom: 4px !important;
}

/* Form đăng ký chia 2 cột: Tên | SĐT, Email (full), Mật khẩu | Nhập lại */
#formRegister {
  display: grid;
  /* không dùng !important: JS ẩn form bằng inline display:none sau khi đăng ký */
  grid-template-columns: 1fr 1fr !important;
  gap: 0 16px !important;
}

#formRegister .form-group {
  margin-bottom: 12px !important;
  min-width: 0 !important;
}

#formRegister .reg-full,
#formRegister .checkbox,
#formRegister .g-recaptcha,
#formRegister input[type="submit"] {
  grid-column: 1 / -1 !important;
}

#formRegister .checkbox {
  margin: 0 0 10px !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

#formRegister .g-recaptcha {
  margin-bottom: 12px !important;
  transform-origin: 0 0;
}

#formRegister input[type="submit"] {
  width: 100% !important;
}

@media (max-width: 575px) {
  #formAccountDialog {
    padding: 16px 16px 18px !important;
  }

  #formRegister {
    grid-template-columns: 1fr !important;
  }

  #formLoginDialog,
  #formPwdDialog {
    padding: 16px !important;
  }
}

/* Hàng "Đã có tài khoản? Đăng nhập" cuối form đăng ký */
#formAccountDialog .register-login-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px dashed #e2e8f0;
}

#formAccountDialog .register-login-row>li {
  padding: 0 !important;
}

#formAccountDialog .register-login-text {
  color: #64748b;
  font-size: 13.5px;
  font-weight: 500;
}

#formAccountDialog .register-login-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 38px !important;
  padding: 0 20px !important;
  border: 1.5px solid #1a5740 !important;
  border-radius: 9999px !important;
  background: #ffffff !important;
  color: #1a5740 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

#formAccountDialog .register-login-btn:hover,
#formAccountDialog .register-login-btn:focus {
  background: #1a5740 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(26, 87, 64, 0.28) !important;
  transform: translateY(-1px);
}