/* XeroVN Showroom V8 — header treatment aligned with the publicly visible
   XeroVN homepage structure: logo • language selector • partner CTA.
   The official site's raw stylesheet/logo asset wasn't downloadable for
   verification; V7's blue reference token is intentionally unchanged. */
:root {
  --brand: #00498c;
  --brand2: #3a7bc2;
  --deep: #003a70;
  --xero-primary: #00498c;
  --xero-primary-hover: #003a70;
  --xero-surface: #f1f6fb;
  --xero-stroke: #dde9f5;
}
.xero-header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid #e8eef4;
  box-shadow: 0 2px 12px rgba(0,58,112,.055);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.xero-header .nav-wrap {
  height: 92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.xero-header .xero-identity {display:flex;align-items:center;min-width:0}
.xero-header .brand-logo-img {display:block;width:196px;max-height:60px;height:auto;object-fit:contain}
.xero-header .nav-links {display:none !important}
.xero-header .official-nav-actions {margin-left:auto;display:flex;align-items:center;gap:24px}
.xero-header .language-picker {display:flex;align-items:center;gap:14px;position:relative}
.xero-header .language-caption {font-size:13px;font-weight:500;color:#5d7184}
.xero-header .language-current {
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;min-height:42px;
  font-size:13px;font-weight:700;cursor:pointer;
  color:#22374a;background:#fff;
  border:1px solid transparent;border-radius:9px;
  transition:background .2s ease,border-color .2s ease;
}
.xero-header .language-current:hover,.xero-header .language-current[aria-expanded="true"] {background:#f5f9fc;border-color:#dde9f5}
.xero-header .flag-vn,.xero-header .flag-uk {width:23px;height:17px;display:block;flex:none;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px #001c4212}
.xero-header .language-chevron {width:16px;height:16px;fill:none;stroke:#698399;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.xero-header .language-options {
  display:grid;gap:5px;
  position:absolute;right:0;top:calc(100% + 10px);
  width:205px;padding:8px;
  border:1px solid #e0eaf4;border-radius:12px;background:#fff;
  box-shadow:0 12px 32px rgba(0,58,112,.13);
  z-index:110;
}
.xero-header .language-options[hidden] {display:none !important}
.xero-header .language-options a {display:flex;align-items:center;gap:10px;padding:12px 10px;color:#304b61;border-radius:8px;font-size:13px;font-weight:650}
.xero-header .language-options a:hover {background:#f1f6fb;color:var(--xero-primary)}
.xero-header .lang-selected {margin-left:auto;color:var(--xero-primary)}
.xero-header .header-contact.xero-partner {
  display:inline-flex !important;align-items:center;gap:12px;
  padding:14px 21px;
  background:var(--xero-primary);border:1px solid var(--xero-primary);
  color:#fff;border-radius:8px;
  font-size:13px;font-weight:700;letter-spacing:0;
  box-shadow:none;
}
.xero-header .header-contact.xero-partner:hover {background:var(--xero-primary-hover);border-color:var(--xero-primary-hover);box-shadow:0 6px 18px #00498c2a}
.xero-header .header-contact svg {width:16px;height:16px;stroke:currentColor}
.xero-header .menu-btn {display:none}
.xero-header .mobile-nav {display:none}
.xero-header .mobile-nav .mobile-partner {color:var(--xero-primary);font-weight:800}
/* Reconcile older inherited CTA and control colors to the same V7 palette,
   without changing the stage proportions, layout or motion. */
.btn-primary, .card-action.blue {background:var(--xero-primary);border-color:var(--xero-primary)}
.btn-primary:hover, .card-action.blue:hover {background:var(--xero-primary-hover);border-color:var(--xero-primary-hover)}
.viewer-tool.active {background:var(--xero-primary)}
.card-action, .filter-help a,.filter-head button,.footer-bottom a {color:var(--xero-primary)}
.check input,#maxPrice {accent-color:var(--xero-primary)}
.catalogue-toolbar select:focus,.catalog-search:focus-within {outline-color:var(--xero-primary)}
@media(max-width:900px) {
  .xero-header .nav-wrap {height:78px;padding-left:22px;padding-right:22px}
  .xero-header .brand-logo-img {width:176px}
  .xero-header .official-nav-actions {gap:13px}
  .xero-header .language-caption {display:none}
  .xero-header .header-contact.xero-partner{padding:12px 15px}
}
@media(max-width:680px) {
  .xero-header .nav-wrap {height:66px;padding-left:16px;padding-right:16px;gap:9px}
  .xero-header .brand-logo-img {width:134px;height:auto;max-height:44px}
  .xero-header .official-nav-actions {gap:4px}
  .xero-header .language-current {min-height:38px;padding:7px 5px;gap:5px;font-size:11px}
  .xero-header .language-current .language-chevron {width:13px;height:13px}
  .xero-header .flag-vn,.xero-header .flag-uk {width:21px;height:15px}
  .xero-header .header-contact.xero-partner {display:none !important}
  .xero-header .menu-btn {display:grid;place-items:center;flex:none;width:39px;height:39px;border-color:#e4ecf4;background:#fff;color:var(--xero-primary)}
  .xero-header .mobile-nav.open {display:flex;flex-direction:column;background:#fff;padding:10px 16px 19px;box-shadow:0 12px 25px #003a7014;border-top:1px solid #e8eef4}
  .xero-header .mobile-nav a {background:#fff;border-bottom:1px solid #edf1f5;color:#294c60;font-size:13px}
  .xero-header .mobile-nav a:hover {color:var(--xero-primary)}
  .xero-header .language-options {right:-42px;width:190px}
}
@media(max-width:380px) {
 .xero-header .brand-logo-img{width:116px}
 .xero-header .language-current span{font-size:10px}
 .xero-header .language-current{padding:5px 3px}
}