/* ==========================================================================
   MR.VŨ — Header v3 (viết lại từ đầu, không patch chồng lên bản cũ)
   Class tiền tố mrvu-hd3-* — CỐ TÌNH đổi tên khác các bản cũ (mrvu-hdr-*)
   để không thể nhầm lẫn hay xung đột nếu CSS cũ còn sót lại đâu đó do
   cache. File này là NGUỒN DUY NHẤT quyết định giao diện header.

   MỌI thuộc tính quan trọng (display, background, color) đều có !important
   — rút kinh nghiệm nhiều lần trước: CSS gốc của theme luôn có rule mạnh
   hơn dự kiến, thiếu !important là gần như chắc chắn bị thua âm thầm.
   ========================================================================== */

#header{
  --hd-ox:#660000; --hd-ox-h:#7e1215; --hd-ink:#1f1b18; --hd-body:#4e463c;
  --hd-muted:#7a7166; --hd-faint:#a89f93; --hd-paper:#fff; --hd-sand:#efe9df;
  --hd-line:#e3ddd4; --hd-line-2:#c8c0b4; --hd-r-sm:8px; --hd-r-pill:999px;
  --hd-ez:cubic-bezier(.22,1,.36,1);
  font-family:"Be Vietnam Pro",Inter,"Segoe UI",Roboto,sans-serif;
}
#header *{box-sizing:border-box}

/* ══════════════════════════ THANH TIỆN ÍCH ══════════════════════════ */
#header .mrvu-hd3-util{background:var(--hd-ox) !important}
#header .mrvu-hd3-util-row{
  display:flex !important; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:6px; min-height:34px;
  padding:5px 14px !important;   /* .container gốc không có padding hai bên */
}

#header .mrvu-hd3-nav{flex:none}
#header .mrvu-hd3-nav > ul.menu{
  display:flex !important; flex-wrap:nowrap; align-items:center;
  gap:2px 4px; list-style:none; margin:0; padding:0;
}
#header .mrvu-hd3-nav > ul.menu > li{float:none !important; margin:0; padding:0; flex:none}
#header .mrvu-hd3-nav > ul.menu > li > a{
  display:block !important; padding:3px 7px !important; border-radius:6px;
  color:#f0d9d8 !important; background:transparent !important;
  font-size:12px !important; font-weight:500 !important; white-space:nowrap;
  transition:background .15s var(--hd-ez), color .15s var(--hd-ez);
}
#header .mrvu-hd3-nav > ul.menu > li > a:hover{background:rgba(255,255,255,.12) !important; color:#fff !important}

/* Ngôn ngữ — KHÔNG dùng position:absolute (từng gây hệ luỵ), chỉ đơn
   giản để flex-wrap tự đẩy xuống dòng riêng nếu không đủ chỗ. */
#header .mrvu-hd3-lang{flex:none; display:flex !important; align-items:center; gap:6px; padding-left:8px; border-left:1px solid rgba(255,255,255,.25)}
#header .mrvu-hd3-lang a{display:flex !important; align-items:center; gap:3px; font-size:10.5px !important; font-weight:700; color:#e2b8b6 !important; opacity:.85; white-space:nowrap; text-transform:uppercase; letter-spacing:.02em}
#header .mrvu-hd3-lang a:hover{opacity:1; color:#fff !important}
#header .mrvu-hd3-lang img{width:13px; height:9px; object-fit:cover; border-radius:2px}

/* ══════════════════════════ HEADER CHÍNH ══════════════════════════ */
#header .mrvu-hd3-main{background:var(--hd-paper) !important; border-bottom:1px solid var(--hd-line)}
#header .mrvu-hd3-main-row{
  display:flex !important; flex-wrap:wrap; align-items:center; gap:16px;
  min-height:72px; padding:10px 20px !important;
}

#header .mrvu-hd3-logo{flex:none; width:auto !important; display:flex !important; align-items:center; gap:10px}
#header .mrvu-hd3-logo img{max-height:68px; width:auto; display:block}
#header .mrvu-hd3-slogan{display:flex; flex-direction:column; line-height:1.15; white-space:nowrap}
#header .mrvu-hd3-slogan-main{font-size:16px; font-weight:800; color:var(--hd-ox); letter-spacing:.01em}
#header .mrvu-hd3-slogan-sub{font-size:12px; font-weight:600; color:var(--hd-ox); opacity:.85; margin-top:1px}
@media(max-width:520px){
  #header .mrvu-hd3-slogan{display:none}
}

#header .mrvu-hd3-search{flex:1; min-width:160px; width:auto !important; max-width:420px}

/* Đè lên plugin FiboSearch — dùng đúng class thật (dgwt-wcas-*) đã xác
   nhận có trong style3.css của theme. */
#header .mrvu-hd3-search .dgwt-wcas-sf-wrapp{width:100% !important; position:relative}
#header .mrvu-hd3-search input[type="search"].dgwt-wcas-search-input{
  width:100% !important; height:40px !important; border-radius:var(--hd-r-pill) !important;
  padding:0 44px 0 16px !important; font-size:13.5px !important;
  color:var(--hd-ink) !important; background:var(--hd-sand) !important;
  border:1.5px solid var(--hd-line-2) !important;
}
#header .mrvu-hd3-search input[type="search"].dgwt-wcas-search-input:focus{
  outline:none; border-color:var(--hd-ox) !important; background:var(--hd-paper) !important;
}
#header .mrvu-hd3-search .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit{
  width:32px !important; height:32px !important; min-width:32px !important;
  border-radius:50% !important; background:var(--hd-ox) !important;
  left:auto !important; right:4px !important; top:4px !important;
  display:flex !important; align-items:center; justify-content:center;
}
#header .mrvu-hd3-search .dgwt-wcas-ico-magnifier{color:#fff !important}

#header .mrvu-hd3-actions{flex:none; display:flex !important; align-items:center; gap:8px; margin-left:auto; width:auto !important}
#header .mrvu-hd3-hide{display:none !important}
#header .mrvu-hd3-ic{width:14px; height:14px; flex:none}

/* "Cửa hàng" — nền TRẮNG rõ ràng (không dựa vào kế thừa — nền đỏ đô gốc
   của .header_nav a từng đè lên, làm chữ tối trên nền tối gần như vô
   hình). white-space:nowrap + padding rộng để KHÔNG THỂ vỡ dòng. */
#header .mrvu-hd3-store{
  display:flex !important; align-items:center; gap:6px; height:40px; padding:0 16px !important;
  border-radius:var(--hd-r-pill); border:1.5px solid var(--hd-line-2);
  background:var(--hd-paper) !important; color:var(--hd-body) !important;
  font-size:13px !important; font-weight:600 !important; white-space:nowrap; flex:none;
  transition:border-color .15s var(--hd-ez), color .15s var(--hd-ez);
}
#header .mrvu-hd3-store:hover{border-color:var(--hd-ox); color:var(--hd-ox) !important}
#header .mrvu-hd3-store svg{stroke:var(--hd-body) !important}
#header .mrvu-hd3-store:hover svg{stroke:var(--hd-ox) !important}
#header .mrvu-hd3-store-txt{white-space:nowrap}

/* Hotline — LUÔN đỏ đô đặc (theme gốc có rule background:#CBA789 riêng
   cho .header_hotline — ghi đè bằng !important ở đây). "Hotline" và số
   nằm trong 1 span, cách nhau bằng margin — không thể dính liền. */
#header .mrvu-hd3-tel{
  display:flex !important; align-items:center; gap:7px; height:40px; padding:0 16px !important;
  border-radius:var(--hd-r-pill); background:var(--hd-ox) !important; color:#fff !important;
  white-space:nowrap; flex:none; font-size:13px !important; font-weight:700 !important;
  transition:background .15s var(--hd-ez);
}
#header .mrvu-hd3-tel:hover{background:var(--hd-ox-h) !important}
#header .mrvu-hd3-tel svg{stroke:#fff !important}
#header .mrvu-hd3-tel-txt{white-space:nowrap; color:#fff !important}
#header .mrvu-hd3-tel-lbl{font-weight:600; opacity:.9; margin-right:5px}

/* Giỏ hàng — icon tròn, không chữ nên không thể vỡ dòng */
#header .mrvu-hd3-cart{
  position:relative; width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--hd-line-2); display:flex !important; align-items:center; justify-content:center;
  background:var(--hd-paper) !important; color:var(--hd-body) !important; flex:none;
  transition:border-color .15s var(--hd-ez), color .15s var(--hd-ez);
}
#header .mrvu-hd3-cart:hover{border-color:var(--hd-ox); color:var(--hd-ox) !important}
/* Icon giỏ hàng từng biến mất dù đã set color+stroke ở mức <svg> — ép
   thêm ở mức <path> bên trong (fill VÀ stroke) để chắc chắn, dùng class
   riêng .mrvu-hd3-ic-cart có độ đặc hiệu cao hơn hẳn mọi rule chung
   chung của theme gốc. */
#header .mrvu-hd3-cart svg.mrvu-hd3-ic-cart{
  width:17px !important; height:17px !important; display:block !important;
  color:var(--hd-body) !important; stroke:var(--hd-body) !important; fill:none !important;
}
#header .mrvu-hd3-cart svg.mrvu-hd3-ic-cart path{
  stroke:var(--hd-body) !important; fill:none !important;
}
#header .mrvu-hd3-cart:hover svg.mrvu-hd3-ic-cart,
#header .mrvu-hd3-cart:hover svg.mrvu-hd3-ic-cart path{
  color:var(--hd-ox) !important; stroke:var(--hd-ox) !important;
}
#header .mrvu-hd3-cart-count{
  position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 3px;
  border-radius:999px; background:var(--hd-ox) !important; color:#fff !important;
  font-size:9.5px !important; font-weight:800 !important;
  display:flex !important; align-items:center; justify-content:center; border:2px solid var(--hd-paper);
}

@media(max-width:820px){
  #header .mrvu-hd3-store-txt{display:none}
  #header .mrvu-hd3-store{width:40px; padding:0 !important; justify-content:center}
}
@media(max-width:680px){
  #header .mrvu-hd3-main-row{min-height:0}
  #header .mrvu-hd3-search{order:3; flex:1 1 100% !important; max-width:none}
  #header .mrvu-hd3-tel-txt{display:none}
  #header .mrvu-hd3-tel{width:40px; padding:0 !important; justify-content:center}
}