/* ==========================================================================
   Velamart /tai-khoan — Tài khoản khách trên website (app/Views/account/*, 2026-10-26)
   Màn chọn đăng nhập giống Cổng đăng nhập của app (thẻ khách: đỏ trên nền hồng nhạt; thẻ nhân viên:
   tím trên nền tím nhạt). Nút hành động: cam #D4430C (D-UI-1). Mọi selector scope dưới .vac.
   ========================================================================== */

.vac {
  --vac-ink: #171717;
  --vac-body: #404040;
  --vac-muted: #6B7280;
  --vac-line: #E8E8E8;
  --vac-soft: #F4F4F4;
  --vac-red: #EF1D25;
  --vac-red-soft: #FDECEC;
  --vac-violet: #7C3AED;
  --vac-violet-soft: #F1EBFE;
  --vac-navy: #0F2A5F;
  --vac-orange: #D4430C;
  --vac-orange-hover: #BC3B0A;
  --vac-orange-tint: #FFF1E8;
  --vac-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  display: flow-root;
  padding: 24px 0 96px; /* chừa chỗ thanh điều hướng đáy trên điện thoại */
  background: #fff;
  color: var(--vac-body);
  font-family: var(--vac-font);
  font-size: 15px;
  line-height: 1.55;
}
.vac *, .vac *::before, .vac *::after { box-sizing: border-box; }
.vac a { text-decoration: none; }
.vac a:focus-visible, .vac button:focus-visible, .vac input:focus-visible {
  outline: 3px solid rgba(212, 67, 12, .35); outline-offset: 2px;
}
.vac .vac-wrap { width: 100%; max-width: 440px; margin: 0 auto; padding: 0 16px; }
.vac .vac-wrap--wide { max-width: 560px; }

/* ── Màn chọn đăng nhập ─────────────────────────────────────────────────── */
.vac .vac-gw { display: flex; flex-direction: column; text-align: center; }
.vac .vac-logo { display: block; width: auto; height: 72px; margin: 4px auto 6px; object-fit: contain; }
.vac .vac-tagline { margin: 0; font-size: 15px; color: var(--vac-muted); }
.vac .vac-title {
  margin: 22px 0 22px; font-family: var(--vac-font); font-size: 22px; line-height: 1.3; font-weight: 600;
  color: var(--vac-ink); letter-spacing: -.01em; text-transform: none;
}

.vac .vac-option {
  display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 18px 14px 18px 16px;
  background: #fff; border: 1px solid var(--vac-line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04); text-align: left; color: var(--vac-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vac .vac-option:hover { border-color: #D6D6D6; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .25); color: var(--vac-ink); }
.vac .vac-option-ic {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.vac .vac-option-ic svg { width: 24px; height: 24px; fill: currentColor; }
.vac .vac-option-ic--customer { background: var(--vac-red-soft); color: var(--vac-red); }
.vac .vac-option-ic--staff { background: var(--vac-violet-soft); color: var(--vac-violet); }
.vac .vac-option-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vac .vac-option-text strong { font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--vac-ink); }
.vac .vac-option-text span { font-size: 13px; line-height: 1.45; color: var(--vac-muted); }
.vac .vac-chev { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: var(--vac-body); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.vac .vac-or { display: flex; align-items: center; gap: 12px; margin: 10px 0 16px; font-size: 13px; color: var(--vac-muted); }
.vac .vac-or::before, .vac .vac-or::after { content: ''; flex: 1 1 auto; height: 1px; background: #EDEDED; }

.vac .vac-soft {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border-radius: 12px;
  background: var(--vac-soft); color: var(--vac-ink); font-size: 16px; font-weight: 500;
  transition: background-color .15s ease;
}
.vac .vac-soft:hover { background: #ECECEC; color: var(--vac-ink); }
.vac .vac-soft svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.vac .vac-values { margin-top: 28px; }
.vac .vac-values p {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #525252;
}
.vac .vac-values ul { display: flex; justify-content: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.vac .vac-values li { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--vac-muted); }
.vac .vac-values svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Form đăng nhập / đăng ký ───────────────────────────────────────────── */
.vac .vac-back {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 14px; font-weight: 500; color: var(--vac-body);
}
.vac .vac-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vac .vac-back:hover { color: var(--vac-ink); }
.vac .vac-h1 {
  margin: 0 0 6px; font-family: var(--vac-font); font-size: 24px; line-height: 1.3; font-weight: 700;
  color: var(--vac-ink); letter-spacing: -.01em; text-transform: none;
}
.vac .vac-sub { margin: 0 0 20px; font-size: 14px; color: var(--vac-muted); }
.vac .vac-alert {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 12px;
  background: var(--vac-red-soft); color: #B91C1C; font-size: 14px; line-height: 1.45;
}
.vac .vac-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.vac .vac-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.vac .vac-field > span { font-size: 13px; font-weight: 600; color: var(--vac-ink); }
.vac .vac-field input {
  width: 100%; height: 48px; margin: 0; padding: 0 14px; border: 1px solid #E2E2E2; border-radius: 12px;
  background: #fff; box-shadow: none; font: inherit; font-size: 15px; color: var(--vac-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vac .vac-field input:focus { border-color: var(--vac-navy); box-shadow: 0 0 0 3px rgba(15, 42, 95, .10); outline: none; }
.vac .vac-hint { font-size: 12px; color: var(--vac-muted); }
.vac .vac-pass { position: relative; display: block; }
.vac .vac-pass input { padding-right: 48px; }
.vac .vac-eye {
  position: absolute; top: 0; right: 0; width: 48px; height: 48px; min-height: 0; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--vac-muted); cursor: pointer;
}
.vac .vac-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vac .vac-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; min-height: 0; margin: 6px 0 0;
  padding: 0 16px; border: 0; border-radius: 12px; background: var(--vac-orange); color: #fff;
  font: inherit; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer;
  transition: background-color .15s ease;
}
.vac .vac-btn:hover { background: var(--vac-orange-hover); color: #fff; }
.vac .vac-alt { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--vac-body); }
.vac .vac-alt a, .vac .vac-help a { color: var(--vac-orange); font-weight: 600; }
.vac .vac-help { margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--vac-muted); }

/* ── Trang tài khoản ────────────────────────────────────────────────────── */
.vac .vac-card {
  margin: 0 0 14px; padding: 18px 16px; background: #fff; border: 1px solid var(--vac-line); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.vac .vac-profile { display: flex; align-items: center; gap: 14px; }
.vac .vac-avatar {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 999px; background: var(--vac-navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; letter-spacing: .02em;
}
.vac .vac-profile > div { min-width: 0; }
.vac .vac-hello { margin: 0; font-size: 13px; color: var(--vac-muted); }
.vac .vac-name {
  margin: 0; font-family: var(--vac-font); font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--vac-ink);
  text-transform: none; letter-spacing: -.01em; overflow-wrap: anywhere;
}
.vac .vac-meta { margin: 2px 0 0; font-size: 13px; color: var(--vac-muted); overflow-wrap: anywhere; }
.vac .vac-card-title {
  margin: 0 0 10px; font-family: var(--vac-font); font-size: 17px; line-height: 1.35; font-weight: 700;
  color: var(--vac-ink); text-transform: none;
}
.vac .vac-orders { margin: 0; padding: 0; list-style: none; }
.vac .vac-orders li { margin: 0; border-top: 1px solid #F0F0F0; }
.vac .vac-orders li:first-child { border-top: 0; }
.vac .vac-order { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--vac-ink); }
.vac .vac-order:hover { color: var(--vac-ink); }
.vac .vac-order-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vac .vac-order-no { font-size: 14px; font-weight: 600; }
.vac .vac-order-date { font-size: 12px; color: var(--vac-muted); }
.vac .vac-order-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.vac .vac-order-total { font-size: 15px; font-weight: 700; color: var(--vac-orange); font-variant-numeric: tabular-nums; }
.vac .vac-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.6; }
.vac .vac-chip--pending { background: #FEF3C7; color: #92400E; }
.vac .vac-chip--confirmed { background: #DBEAFE; color: #1E40AF; }
.vac .vac-chip--processing { background: #E0E7FF; color: #3730A3; }
.vac .vac-chip--shipping { background: #CFFAFE; color: #155E75; }
.vac .vac-chip--completed { background: #DCFCE7; color: #166534; }
.vac .vac-chip--cancelled { background: #F3F4F6; color: #4B5563; }
.vac .vac-empty { margin: 4px 0 6px; font-size: 14px; color: var(--vac-muted); }
.vac .vac-link { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--vac-orange); }
.vac .vac-link:hover { color: var(--vac-orange-hover); }
.vac .vac-logout {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; min-height: 0; margin: 4px 0 0;
  border: 1px solid var(--vac-line); border-radius: 12px; background: #fff; color: #B91C1C;
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer;
}
.vac .vac-logout:hover { background: #FEF2F2; }

@media (min-width: 769px) {
  .vac { padding: 40px 0 64px; background: #FAFAFA; }
  .vac .vac-gw, .vac .vac-formbox {
    padding: 32px 28px; background: #fff; border: 1px solid var(--vac-line); border-radius: 24px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 16px 40px -28px rgba(0, 0, 0, .25);
  }
  .vac .vac-wrap { max-width: 480px; }
  .vac .vac-wrap--wide { max-width: 620px; }
}
@media (prefers-reduced-motion: reduce) {
  .vac .vac-option, .vac .vac-soft, .vac .vac-btn, .vac .vac-field input { transition: none; }
}