/* ============================================================
   HÒA CƯỜNG M&E — Visual polish (post-Phase 3)
   Mục tiêu: collapse header stack, remove dated UI, premium hero
   ============================================================ */

/* ============================================================
   1. HIDE "Website chính thức..." (redundant) + utility nav
      Lý do: bar 2 thừa, lặp branding, không phù hợp B2B
   ============================================================ */
#top-bar .html_topbar_left,
.html_topbar_left,
#top-bar .top-bar-nav.nav-right {
  display: none !important;
}

/* Top-bar collapse: chỉ giữ nếu còn nội dung thực sự */
#top-bar.header-top {
  min-height: 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}
#top-bar.header-top:empty,
#top-bar.header-top:not(:has(.flex-row > div > *:not(:empty))) {
  display: none !important;
}
/* Force collapse top-bar (safer fallback) */
.header-top .flex-row { min-height: 0 !important; }

/* ============================================================
   2. HOTLINE RIBBON — close button gọn lại, vertical align fix
   ============================================================ */
.hc-hotline-ribbon {
  padding: 9px 44px 9px 16px !important;
  font-size: 13.5px !important;
}
.hc-ribbon-close {
  width: 20px !important; height: 20px !important;
  font-size: 14px !important;
  right: 12px !important;
  opacity: 0.7;
}
.hc-ribbon-close:hover { opacity: 1; }

/* ============================================================
   3. HEADER MAIN — logo lớn hơn, search compact, phone block hợp nhất
   ============================================================ */

/* Logo upscale */
.header-main #logo img,
.header #logo img {
  max-height: 64px !important;
  padding: 0 !important;
}
.header-main { min-height: 88px !important; }
@media (max-width: 549px) {
  .header-main #logo img { max-height: 44px !important; }
  .header-main { min-height: 64px !important; }
}

/* Search bar compact — remove giant All dropdown, smaller padding */
.searchform-wrapper.ux-search-box {
  max-width: 480px !important;
  margin: 0 auto;
  border-radius: 999px !important;
  border: 1.5px solid var(--hc-gray-200) !important;
  overflow: hidden;
  background: var(--hc-gray-50) !important;
}
.searchform-wrapper.ux-search-box:focus-within {
  border-color: var(--hc-navy) !important;
  background: var(--hc-white) !important;
  box-shadow: 0 0 0 4px rgba(13,77,140,0.10) !important;
}
.searchform-wrapper input[type='search'],
.header-search-form-wrapper input[type='search'] {
  height: 44px !important;
  font-size: 14px !important;
  background: transparent !important;
  border: 0 !important;
  padding-left: 18px !important;
}

/* Search "All" category dropdown — hide (không cần marketplace style) */
.searchform .cat-wrap,
.searchform select[name="product_cat"],
.searchform .ux-search-submit-wrapper select {
  display: none !important;
}
.searchform .button.icon {
  height: 44px !important;
  width: 56px !important;
  border-radius: 0 999px 999px 0 !important;
  background: var(--hc-navy) !important;
  border: 0 !important;
}
.searchform .button.icon:hover { background: var(--hc-navy-dark) !important; }
.searchform .button.icon i { color: white !important; font-size: 16px; }

/* Right phone block — combine into one premium card */
#header-contact,
.html_header_contact_2 {
  background: linear-gradient(135deg, var(--hc-orange) 0%, var(--hc-orange-dark) 100%) !important;
  border-radius: var(--hc-r-md) !important;
  padding: 10px 16px !important;
  display: inline-block !important;
  position: relative;
  padding-left: 48px !important;
  box-shadow: 0 4px 12px rgba(255,106,0,0.25);
}
#header-contact::before,
.html_header_contact_2::before {
  content: "" !important;
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
  margin: 0 !important;
  display: block !important;
  vertical-align: initial !important;
}
#header-contact li,
.html_header_contact_2 li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
  background: none !important;
  float: none !important;
  color: white !important;
}
#header-contact li:first-child,
.html_header_contact_2 li:first-child {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px;
  opacity: 0.95;
  line-height: 1.2;
  font-weight: 600 !important;
  color: white !important;
}
#header-contact li:nth-child(2) a,
.html_header_contact_2 li:nth-child(2) a,
#header-contact li a,
.html_header_contact_2 li a {
  color: white !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.3px;
  padding: 0 !important;
  text-decoration: none !important;
}
/* Hide icons that came with email/phone (replaced by our SVG) */
#header-contact .icon-envelop,
#header-contact .icon-email,
#header-contact .icon-email-1,
.html_header_contact_2 .icon-envelop,
.html_header_contact_2 .icon-email {
  display: none !important;
}

/* ============================================================
   4. GREEN "DANH MỤC SẢN PHẨM" BAR — restyle navy + cleaner
   ============================================================ */
#mega-menu-wrap {
  background: var(--hc-navy) !important;
  border-radius: var(--hc-r-md) var(--hc-r-md) 0 0 !important;
}
#mega-menu-title {
  background: var(--hc-navy) !important;
  color: white;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  padding: 14px 18px !important;
  border-radius: var(--hc-r-md) var(--hc-r-md) 0 0 !important;
  letter-spacing: 0.3px;
}
#mega-menu-title i.icon-menu::before {
  font-size: 16px;
  margin-right: 8px;
}
#mega_menu {
  background: var(--hc-navy-dark) !important;
}
#mega_menu > li {
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
#mega_menu li a {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 10px 26px !important;
  color: rgba(255,255,255,0.92) !important;
  background-image: none !important;
}
#mega_menu li a:hover {
  background: var(--hc-orange) !important;
  background-image: none !important;
  color: white !important;
  padding: 10px 26px !important;
}

/* ============================================================
   5. NAV BAR — clean white + sentence case (override Flatsome UPPERCASE)
   ============================================================ */
.header-bottom .nav.nav-uppercase > li > a,
.header-bottom .nav > li > a {
  text-transform: none !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px !important;
  color: var(--hc-gray-900) !important;
  padding: 0 18px !important;
  line-height: 50px !important;
  border-right: 0 !important;
}
.header-bottom .container {
  background: white !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hc-gray-100) !important;
}
.header-bottom .nav > li.active > a {
  color: var(--hc-navy) !important;
  background: transparent !important;
  border-bottom: 3px solid var(--hc-orange);
  line-height: 47px !important;
}
.header-bottom .nav > li > a:hover {
  background: var(--hc-gray-50) !important;
  color: var(--hc-navy) !important;
}

/* ============================================================
   6. HERO OVERLAY V2 — premium dark + accent highlights + pattern
   ============================================================ */
.hc-hero-overlay {
  padding: var(--hc-sp-16) var(--hc-sp-4) !important;
  background:
    radial-gradient(ellipse at top right, rgba(255,106,0,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(13,77,140,0.6) 0%, transparent 60%),
    linear-gradient(135deg, #0a3a6e 0%, #0d4d8c 50%, #051f3d 100%) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Product silhouette pattern background */
.hc-hero-overlay::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' opacity='0.04'%3E%3C!-- shower head --%3E%3Cg fill='white' transform='translate(50 50)'%3E%3Ccircle cx='30' cy='15' r='14'/%3E%3Crect x='28' y='28' width='4' height='40'/%3E%3Ccircle cx='30' cy='75' r='3' opacity='0.5'/%3E%3Ccircle cx='25' cy='80' r='3' opacity='0.5'/%3E%3Ccircle cx='35' cy='80' r='3' opacity='0.5'/%3E%3C/g%3E%3C!-- pipe --%3E%3Cg fill='white' transform='translate(300 80)'%3E%3Crect x='0' y='0' width='80' height='10' rx='3'/%3E%3Crect x='35' y='10' width='10' height='40' rx='2'/%3E%3C/g%3E%3C!-- bulb --%3E%3Cg fill='white' transform='translate(150 280)'%3E%3Ccircle cx='25' cy='25' r='22'/%3E%3Crect x='18' y='42' width='14' height='10' rx='2'/%3E%3C/g%3E%3C!-- faucet --%3E%3Cg fill='white' transform='translate(320 280)'%3E%3Cpath d='M0 30 L0 0 L25 0 L25 15 L50 15 L50 30 Z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0L100 100M100 0L0 100' stroke='%23ffffff' stroke-opacity='0.025' stroke-width='1'/%3E%3C/svg%3E") !important;
  background-size: 400px, 60px !important;
  background-repeat: repeat !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.hc-hero-overlay > .hc-hero-inner {
  z-index: 2;
}
/* Headline */
.hc-hero-overlay .hc-hero-h1,
.hc-hero-overlay h1 {
  font-size: clamp(2rem, 5.5vw, 3.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 var(--hc-sp-4) !important;
  color: white !important;
}
.hc-accent {
  color: #ffb061 !important;
  position: relative;
  display: inline-block;
}
.hc-accent-underline {
  color: var(--hc-orange-light) !important;
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.hc-accent-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 3px;
  background: var(--hc-orange);
  border-radius: 2px;
  opacity: 0.85;
}
.hc-hero-sub {
  font-size: clamp(1rem, 2vw, 1.15rem) !important;
  color: rgba(255,255,255,0.86) !important;
  max-width: 680px !important;
  margin: 0 auto var(--hc-sp-6) !important;
  line-height: 1.6 !important;
}
.hc-hero-ctas {
  margin-top: var(--hc-sp-6) !important;
}

/* Hero badges row (stats inline mini) */
.hc-hero-badges {
  display: inline-flex; flex-wrap: wrap;
  justify-content: center; gap: var(--hc-sp-3) var(--hc-sp-6);
  margin-top: var(--hc-sp-6);
  padding-top: var(--hc-sp-4);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hc-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.92);
  font-size: 14px; font-weight: 500;
}
.hc-hero-badge strong {
  color: #ffb061;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.3px;
}
.hc-hero-badge svg {
  width: 18px; height: 18px;
  color: #ffb061;
  fill: none; stroke: currentColor; stroke-width: 2;
}

/* CTA refinements */
.hc-hero-ctas .hc-btn {
  padding: 16px 32px !important;
  font-size: 15px !important;
  border-radius: var(--hc-r-md) !important;
  min-height: 52px;
}
.hc-hero-ctas .hc-btn-primary {
  background: var(--hc-orange) !important;
  box-shadow: 0 8px 24px rgba(255,106,0,0.35);
}
.hc-hero-ctas .hc-btn-primary:hover {
  box-shadow: 0 12px 32px rgba(255,106,0,0.5);
}

/* ============================================================
   7. HIDE OLD FLATSOME SLIDER on homepage (duplicate hero)
   ============================================================ */
body.home .slider-style-shadow,
body.home .slider-wrapper.relative {
  display: none !important;
}

/* ============================================================
   8. TRUST STRIP — tăng visual weight, brand chips đẹp hơn
   ============================================================ */
.hc-trust-strip {
  padding: var(--hc-sp-12) var(--hc-sp-4) !important;
  background: white !important;
  border-bottom: 1px solid var(--hc-gray-100) !important;
}
.hc-stat-num {
  background: linear-gradient(135deg, var(--hc-navy) 0%, var(--hc-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem) !important;
}
.hc-brand-chip {
  font-size: 13px !important;
  padding: 10px 18px !important;
  letter-spacing: 0.3px !important;
  border-radius: var(--hc-r-full) !important;
}

/* ============================================================
   9. Mobile-specific polish
   ============================================================ */
@media (max-width: 549px) {
  .hc-hotline-ribbon { font-size: 12px !important; padding: 8px 36px 8px 12px !important; }
  .hc-hero-overlay { padding: var(--hc-sp-12) var(--hc-sp-4) var(--hc-sp-8) !important; }
  .hc-hero-overlay .hc-hero-h1 { font-size: clamp(1.5rem, 7vw, 2rem) !important; }
  .hc-hero-overlay .hc-hero-sub { font-size: 0.95rem !important; }
  .hc-hero-ctas { flex-direction: column; width: 100%; }
  .hc-hero-ctas .hc-btn { width: 100%; justify-content: center; }
  .hc-hero-badges { flex-direction: column; gap: 8px; }

  /* Header phone block: stack vertical on mobile, or hide secondary */
  #header-contact, .html_header_contact_2 { display: none !important; }
  /* Mobile already has sticky bottom CTA bar with Call button */
}

/* ============================================================
   10. Tweak vertical menu trigger trên homepage (visible chỉ desktop)
   ============================================================ */
@media (max-width: 850px) {
  #mega-menu-wrap { display: none !important; }
}