/* Uses the same visual tokens as public/suite/style.css (the retail workspace). */
:root { --vp-ink:#20324b; --vp-muted:#61728a; --vp-line:#e1e7ef; --vp-blue:#3158d5; --vp-pale:#edf2ff; --vp-bg:#f4f6fa; }
.header {
  height: 72px;
  padding-inline: max(28px, calc((100vw - 1640px) / 2));
  gap: 22px;
  justify-content: flex-start;
  border-bottom: 1px solid var(--vp-line);
  background: #fff;
  box-shadow: 0 3px 16px #20324b05;
}
.header > .logo { flex: none; margin-right: 8px; color: var(--vp-ink); font-size: 21px; letter-spacing: -.8px; }
.header > .logo .logo-icon { width: 43px; height: 43px; border-radius: 13px; color:#fff; background:var(--vp-blue); font-size: 25px; box-shadow:0 5px 12px #3459d428; }
.header > .logo .logo-icon span { background:#fff; }
.header > .logo .logo-dot { color:var(--vp-blue); }
.header nav { display: flex; align-items: center; gap: 3px; flex: none; font-size: 13px; }
.header nav a {
  position: relative; padding: 9px 11px; border-radius: 9px; white-space: nowrap;
  color: var(--vp-muted); line-height: 1.2; transition: color .16s, background .16s;
}
.header nav a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  border-radius: 9px; background: var(--vp-blue); transform: scaleX(0); transition: transform .16s;
}
.header nav a:hover { color: var(--vp-blue); background: var(--vp-pale); }
.header nav a:hover::after { transform: scaleX(1); }
.header .industry-search { width: clamp(190px, 15vw, 255px); margin-left: auto; }
.header .industry-search-box { height: 40px; border-color: #dce3ee; border-radius: 8px; background: #fff; }
.header .industry-search:focus-within .industry-search-box {border-color:var(--vp-blue);box-shadow:0 0 0 3px #3158d51a}
.header .industry-search-icon { color: var(--vp-blue); }
.header-actions { flex: none; gap: 8px; }
.header-actions > * { white-space: nowrap; }
.header-actions .text-button {
  min-height: 38px; padding: 8px 11px; border-radius: 8px; color: var(--vp-ink);
  font-size: 12px; transition: color .16s, background .16s;
}
.header-actions .text-button:hover { color: var(--vp-blue); background: var(--vp-pale); }
.header-actions a.text-button { border: 1px solid var(--vp-line); background: #fff; }
.header-actions .button.small {
  min-height: 42px; padding: 10px 15px; gap: 10px; border-color:var(--vp-blue); border-radius: 8px;
  color:#fff; background:var(--vp-blue); font-size: 12px; box-shadow:0 2px 4px #3158d51a;
}
.header-actions .button.small:hover {background:#294dc2;border-color:#294dc2;box-shadow:0 4px 12px #3158d526}
.header-actions .button.small span { font-size: 16px; }
.mobile-menu-toggle {
  display: none; width: 40px; height: 40px; flex: none; padding: 10px;
  border: 1px solid var(--vp-line); border-radius: 8px; background: #fff;
}
.mobile-menu-toggle span { display: block; width: 100%; height: 2px; margin: 4px 0; border-radius: 2px; background: var(--vp-ink); transition: transform .18s, opacity .18s; }

@media (max-width: 1450px) {
  .header { padding-inline: 24px; gap: 12px; }
  .header > .logo { margin-right: 0; }
  .header nav a { padding-inline: 8px; }
  .header nav a:nth-last-child(-n+2) { display: none; }
  .header .industry-search { width: clamp(180px, 18vw, 235px); }
}

@media (max-width: 1180px) {
  .header nav { display: none; }
  .header .industry-search { width: min(310px, 28vw); }
}

@media (max-width: 760px) {
  .header {
    height: 126px !important; padding: 14px 16px 12px !important; gap: 9px;
    align-items: flex-start; flex-wrap: nowrap;
  }
  .header > .logo { margin-top: 2px; margin-right: auto; }
  .header .industry-search { position: absolute; left: 16px; right: 16px; bottom: 12px; width: auto; margin: 0; }
  .header .industry-search-box { height: 42px; }
  .header-actions { padding-top: 0; gap: 5px; }
  .header-actions .button.small { min-height: 40px; padding-inline: 12px; }
  .mobile-menu-toggle { display: block; }
  .header.menu-open nav {
    display: grid; position: absolute; top: 64px; left: 16px; right: 16px; z-index: 65;
    grid-template-columns: 1fr 1fr; gap: 5px; padding: 10px;
    border: 1px solid var(--vp-line); border-radius: 12px; background: #fff;
    box-shadow: 0 20px 50px #20324b22;
  }
  .header.menu-open nav a { display: block; padding: 11px 13px; }
  .header.menu-open .industry-search { visibility: hidden; }
  .header.menu-open .mobile-menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .header.menu-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; }
  .header.menu-open .mobile-menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

@media (max-width: 520px) {
  .header > .logo { font-size: 20px; gap: 7px; }
  .header > .logo .logo-icon { width: 31px; height: 31px; font-size: 21px; }
  .header-actions .text-button { min-height: 38px; padding-inline: 7px; font-size: 10px; }
  .header-actions .button.small { padding: 9px 10px; font-size: 10px; }
  .header-actions .button.small span { display: none; }
  .header-actions a.text-button { display: none; }
  .mobile-menu-toggle { width: 38px; height: 38px; }
}

@media (max-width: 390px) {
  .header-actions > .text-button { display: none; }
}

/* Unified VIETPOS brand */
.header > .logo{width:205px;height:48px;margin-right:8px;display:flex;align-items:center}
.header > .logo img{display:block;width:100%;height:auto;max-height:48px;object-fit:contain;object-position:left center}
.site-footer .logo img{display:block;width:183px;height:auto;max-height:40px;object-fit:contain;object-position:left center}
@media(max-width:760px){.header > .logo{width:154px;height:40px;margin-top:0}.header > .logo img{max-height:40px}}
@media(max-width:390px){.header > .logo{width:138px}}

/* Compact professional wordmark */
.header > .logo{width:206px;height:48px}.header > .logo img{width:206px;max-height:48px}.site-footer .logo img{width:171px;max-height:40px}
@media(max-width:760px){.header > .logo,.header > .logo img{width:159px;height:auto;max-height:38px}}
@media(max-width:390px){.header > .logo,.header > .logo img{width:145px}}