/* Login gateway — bronze reference design, shared by both portals. */
.gateway {
  --gateway-gutter: clamp(24px, 5vw, 88px);
  --gateway-gap: clamp(40px, 5vw, 84px);
  --gateway-card-width: 468px;
  --ink: #f5eee6;
  --muted: #b2a69a;
  --hair: #49392b;
  --surface: #17130f;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  background: radial-gradient(ellipse at 18% 45%, #36231666, transparent 55%),
    radial-gradient(ellipse at 90% 80%, #36271940, transparent 45%), #0b0908;
  font-family: var(--sans);
}
.gateway-header {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--gateway-card-width); align-items: center; gap: var(--gateway-gap);
  min-height: 84px; padding: 20px var(--gateway-gutter);
  border-bottom: 1px solid #c59b6d24;
}
.gateway-header .brand .sub { display: inline; }
.gateway-header > span { color: #baa895; font-size: 11px; letter-spacing: .16em; padding-left: 0; justify-self: end; text-align: right; }
.gateway-content {
  width: 100%; margin: auto; padding: 76px var(--gateway-gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--gateway-card-width); align-items: center; gap: var(--gateway-gap);
}
.gateway-intro { position: relative; padding: 28px 0 28px 18px; }
.gateway-eyebrow {
  display: flex; align-items: center; gap: 12px; margin-bottom: 30px;
  color: #c59b6d; font-size: 11px; font-weight: 600; letter-spacing: .22em;
}
.gateway-eyebrow::before { content: ''; width: 32px; height: 1px; background: #c59b6d; }
.gateway-intro h1 {
  color: #f4eee8; font-family: var(--sans); font-size: clamp(28px, 3.1vw, 58px); white-space: nowrap;
  line-height: 1.12; font-weight: 500; letter-spacing: -.065em; margin: 0;
}
.gateway-intro h1 span { display: inline; }
.gateway-intro h1 span + span { margin-left: .18em; }
.gateway-intro h1 .gateway-accent {
  color: #d3ad82; background: linear-gradient(110deg, #ead4b9, #b48252);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.gateway-line { width: 74px; height: 1px; margin-top: 40px; background: #b4825270; }
.gateway-card {
  position: relative; width: 100%; padding: 32px;
  background: linear-gradient(145deg, #201a15e8, #13110ff2);
  border: 1px solid #c59b6d40; border-radius: 22px;
  box-shadow: 0 28px 80px #0005, inset 0 1px 0 #e8d3bc0a;
}
.gateway-card::before {
  content: ''; position: absolute; height: 1px; top: -1px; left: 18%; right: 18%;
  background: linear-gradient(90deg, transparent, #d4ad80, transparent);
}
.gateway-portals {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px;
  background: #0e0c0a; border: 1px solid #c59b6d1f; border-radius: 12px; margin-bottom: 30px;
}
.gateway-portals a {
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  color: #baafa3; font-size: 12px; font-weight: 600; text-decoration: none;
  padding: 10px 8px; border: 1px solid transparent; border-radius: 8px;
}
.gateway-portals a[aria-current="page"] {
  color: #e9d2b7; border-color: #c59b6d52; background: linear-gradient(120deg, #c59b6d29, #7a532c22);
}
.gateway-portals a:hover { color: #fff3e4; background-color: #c59b6d12; }
.gateway-card h2 { color: #f4eee8; font-family: var(--sans); font-size: 25px; font-weight: 600; margin-bottom: 28px; letter-spacing: -.035em; }
.gateway .gateway-mode { display: block; padding: 0; margin: 0 0 16px; border: 0; background: transparent; box-shadow: none; color: #dfb88d; font: 500 12px var(--sans); text-align: left; text-decoration: underline; text-underline-offset: 4px; }
.gateway-card .field { margin-bottom: 22px; }
.gateway-card label { display: block; color: #cec1b3; font-family: var(--sans); font-size: 12px; font-weight: 500; margin-bottom: 9px; }
.gateway-card input {
  width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 10px;
  border: 1px solid #65503b80; background: #100e0c; color: #fff5eb;
  font-family: var(--sans); font-size: 15px; box-shadow: none; color-scheme: dark;
}
.gateway-card input:focus { border-color: #d6b38a; outline: 3px solid #c59b6d24; outline-offset: 1px; }
.gateway-password { position: relative; }
.gateway-password input { padding-right: 76px; }
.gateway .gateway-password button {
  position: absolute; top: 4px; bottom: 4px; right: 4px; width: 64px;
  padding: 8px; color: #d1b391; background: transparent; border: 0; font: 500 11px var(--sans);
  box-shadow: none; border-radius: 7px;
}
.gateway .gateway-submit {
  width: 100%; min-height: 52px; margin-top: 8px; padding: 14px 18px; border-radius: 10px;
  border: 1px solid #ddb88c; background: linear-gradient(110deg, #dbb68c, #b58353);
  color: #21160d; font: 700 14px var(--sans); box-shadow: 0 6px 24px #b4825214;
}
.gateway .gateway-submit:hover { filter: brightness(1.08); }
.gateway .gateway-submit:disabled { opacity: .65; cursor: wait; }
.gateway a:focus-visible, .gateway button:focus-visible { outline: 2px solid #e8c6a1; outline-offset: 3px; }
.gateway .notice.err { margin-bottom: 20px; background: #421f1b; color: #ffc6bf; display: block; }
.gateway .notice.err .k { display: block; margin-bottom: 3px; }
.gateway-footer { padding: 24px; text-align: center; color: #a29384; font-size: 10px; letter-spacing: .18em; }
@media (min-width: 1051px) and (max-width: 1300px) {
  .gateway { --gateway-card-width: 400px; --gateway-gap: 40px; }
  .gateway-intro h1 { font-size: 32px; }
}
@media (max-width: 1050px) {
  .gateway-header { display: flex; min-height: 68px; padding: 18px 22px; }
  .gateway-header > span { display: none; }
  .gateway-content { grid-template-columns: 1fr; gap: 28px; max-width: 480px; padding: 34px 22px; }
  .gateway-intro { padding: 0 0 0 18px; }
  .gateway-eyebrow { margin-bottom: 16px; font-size: 10px; }
  .gateway-intro h1 { font-size: clamp(21px, 5.6vw, 30px); letter-spacing: -.04em; }
  .gateway-intro h1 span { display: inline; }
  .gateway-intro h1 .gateway-accent { display: inline; }
  .gateway-line { display: none; }
  .gateway-card { padding: 24px; border-radius: 18px; }
  .gateway-card input { font-size: 16px; }
  .gateway-footer { padding: 8px 20px 24px; }
}
@media print { .gateway { display: none !important; } }

/* Sales title: 20% larger at each existing breakpoint. */
html[lang="vi"] .gateway-intro h1 { font-size: clamp(33.6px, 3.72vw, 69.6px); }
@media (min-width: 1051px) and (max-width: 1300px) {
  html[lang="vi"] .gateway-intro h1 { font-size: 38.4px; }
}
@media (max-width: 1050px) {
  html[lang="vi"] .gateway-intro h1 { font-size: clamp(25.2px, 6.72vw, 36px); }
}