/* ============================================================
   HÒA CƯỜNG M&E - Header polish v6 (subtle, professional)
   Color palette:  Navy #0d4d8c + Red #c41e2a (logo) + White
   Safe rules: chỉ đụng color, background, border, font-weight, radius
   KHÔNG đụng: display, height, padding structural
   ============================================================ */

/* ============================================
   1. TOP BAR — Xám nhạt + ✓ navy
   ============================================ */
#top-bar.header-top {
  background: #f8f9fa !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#top-bar .html_topbar_left {
  color: #4b5563 !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
}

#top-bar .html_topbar_left::before {
  content: "✓";
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: #0d4d8c;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  margin-right: 6px;
  vertical-align: middle;
}

/* Top right (Sản phẩm | Tài khoản | Giỏ hàng) */
#top-bar .top-bar-nav > li > a,
#top-bar .nav-right li > a {
  color: #4b5563 !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  transition: color 0.2s ease;
}

#top-bar .top-bar-nav > li > a:hover,
#top-bar .nav-right li > a:hover {
  color: #0d4d8c !important;
}

/* Icons cho 3 mục top right — SVG inline (consistent cross-OS) */
#top-bar .top-bar-nav > li > a::before {
  content: ""; display: inline-block; width: 14px; height: 14px;
  margin-right: 6px; vertical-align: -2px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
#top-bar .top-bar-nav > li:nth-child(1) > a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}
#top-bar .top-bar-nav > li:nth-child(2) > a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
#top-bar .top-bar-nav > li:nth-child(3) > a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
}

/* ============================================
   2. SEARCH BAR — Bo góc + navy focus
   ============================================ */
.ux-search-box,
.header-search-form-wrapper {
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: #fff;
}

.ux-search-box:focus-within,
.header-search-form-wrapper:focus-within {
  border-color: #0d4d8c !important;
  box-shadow: 0 0 0 3px rgba(13,77,140,0.1);
}

/* Search button: Xanh lá → Navy */
.ux-search-submit,
.searchform button[type="submit"],
button.ux-search-submit {
  background: #0d4d8c !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  transition: background 0.2s ease !important;
}

.ux-search-submit:hover,
.searchform button[type="submit"]:hover {
  background: #093663 !important;
}

.ux-search-submit i,
.searchform button[type="submit"] i {
  color: #fff !important;
}

/* ============================================
   3. PHONE NUMBERS — Bold navy
   ============================================ */
.header-contact strong,
.header-contact-wrapper strong,
.header-contact .nav-top-link strong,
.header-contact-wrapper .nav-top-link strong {
  color: #0d4d8c !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: -0.3px;
}

/* Label "Mua Hàng:" / "Tư Vấn Dự Án:" - xám nhạt hơn */
.header-contact li:not(:empty),
.header-contact-wrapper li:not(:empty) {
  color: #6b7280;
  font-size: 13px;
}

/* ============================================
   4. FIX ICON SAI: Mail → Phone
   ============================================ */
/* Ẩn icon mail sai */
.header-contact i.icon-email,
.header-contact-wrapper i.icon-email,
.header-main i.icon-email-1 {
  display: none !important;
}

/* Phone icon SVG trước "Mua Hàng" / "Tư Vấn" */
.header-contact-wrapper li.html:first-of-type::before,
.html_header_contact_2::before {
  content: ""; display: inline-block; width: 16px; height: 16px;
  margin-right: 6px; vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4d8c' stroke-width='2' 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;
}

/* Style icon phone đúng - đỏ */
.header-contact i.icon-phone,
.header-contact-wrapper i.icon-phone {
  color: #c41e2a !important;
  font-size: 20px;
  margin-right: 6px;
}

/* ============================================
   5. STICKY HEADER — Khi cuộn xuống
   ============================================ */
.header-main {
  position: sticky !important;
  top: 0;
  z-index: 100;
  background: #fff !important;
  transition: box-shadow 0.2s ease, padding 0.2s ease;
}

body.hc-scrolled .header-main {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* ============================================
   6. Body font (subtle improvement)
   ============================================ */
body {
  font-family: 'Inter', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}