:root {
  --ink: #202b26;
  --muted: #4d5953;
  --wine: #851536;
  --wine-dark: #5f1029;
  --forest: #174635;
  --forest-dark: #10382a;
  --gold: #eac888;
  --line: #dce3dc;
  --surface: #fff;
  --paper: #f3f6f1;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(180deg, #e9f0e9 0, var(--paper) 24rem);
  color: var(--ink);
  font-family: system-ui, "Segoe UI", sans-serif;
}

.brand-header {
  background: var(--surface);
  border-top: .25rem solid var(--wine);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 .2rem .9rem #123b2b12;
}

.brand-inner { padding-block: clamp(.75rem, 2vw, 1.25rem); }

.brand-lockup {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: clamp(.55rem, 2vw, 1.35rem);
  color: var(--wine-dark);
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: clamp(7rem, 29vw, 15rem);
  height: auto;
  flex: 0 0 auto;
}

.brand-name {
  border-inline-start: 2px solid var(--gold);
  padding-inline-start: clamp(.55rem, 2vw, 1.35rem);
  font-size: clamp(.8rem, 2.55vw, 1.45rem);
  font-weight: 800;
  letter-spacing: .045em;
  line-height: 1.25;
}

.staff-bar {
  background: var(--forest-dark);
  color: #fff;
  border-bottom: 2px solid var(--gold);
}

.staff-inner, .staff-nav, .staff-session {
  display: flex;
  align-items: center;
  gap: .55rem .85rem;
}

.staff-inner { flex-wrap: wrap; justify-content: space-between; padding-block: .5rem; }
.staff-nav { flex-wrap: wrap; }
.staff-nav a {
  padding: .3rem .1rem;
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  text-underline-offset: .22em;
}
.staff-nav a:hover { color: #ffe6ad; }
.staff-session { margin-inline-start: auto; max-width: 100%; }
.staff-user { color: #e3ede7; font-size: .8rem; overflow-wrap: anywhere; }

.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.35rem;
  padding: .34rem .65rem;
  white-space: nowrap;
  font-size: .85rem;
  --bs-btn-color: var(--forest-dark);
  --bs-btn-bg: var(--gold);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: var(--forest-dark);
  --bs-btn-hover-bg: #ffe3ab;
  --bs-btn-hover-border-color: #ffe3ab;
  --bs-btn-active-color: var(--forest-dark);
  --bs-btn-active-bg: #ffefc8;
  --bs-btn-active-border-color: #ffefc8;
}

.app-main { flex: 1; padding-block: clamp(1.15rem, 3vw, 2.5rem); }
.app-main > h1, .form-card h1 {
  color: var(--wine-dark);
  font-size: clamp(1.35rem, 3.25vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
}

.form-card {
  margin-inline: auto;
  background: var(--surface);
  padding: clamp(.8rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 .6rem 2rem #13362912;
}
.public-card { max-width: 48rem; }
.auth-card { max-width: 30rem; border-top: .25rem solid var(--wine); }
.auth-card-wide { max-width: 38rem; }

.public-intro {
  margin-bottom: 1.2rem;
  padding: clamp(.75rem, 2.6vw, 1.5rem);
  border: 1px solid #b77469;
  border-block-start: .24rem solid var(--gold);
  border-radius: .72rem;
  text-align: center;
  background: linear-gradient(120deg, #5d1028, #861837 80%, #8a1e3d);
  color: #fff;
}

.section-kicker {
  display: inline-block;
  margin-bottom: .45rem;
  color: #ffe4ab;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.public-intro h1 {
  margin: 0 0 .5rem;
  color: #fff;
  font-size: clamp(1.12rem, 3.7vw, 2.05rem);
  font-weight: 800;
  letter-spacing: .025em;
  text-wrap: balance;
}
.public-note {
  margin: 0;
  white-space: nowrap;
  color: #fffaf1;
  font-size: clamp(.75rem, 2.9vw, 1rem);
  font-weight: 600;
}
.public-submit { min-height: 2.95rem; }
.receipt-panel { border-inline-start: .25rem solid var(--forest); }

.form-section {
  padding: 1rem;
  margin: 1rem 0;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: #fcfdfa;
}
.form-section legend {
  float: none;
  width: auto;
  margin: 0;
  padding-inline: .4rem;
  font-size: 1rem;
  font-weight: 750;
  color: var(--forest);
}
.form-label { font-weight: 650; }
.form-control, .form-select {
  min-height: 2.75rem;
  border-color: #b8c7bf;
  border-radius: .55rem;
}
.ten-dang-nhap { text-transform: uppercase; letter-spacing: .06em; }
.btn { border-radius: .55rem; font-weight: 650; }
.btn-primary {
  --bs-btn-bg: var(--wine); --bs-btn-border-color: var(--wine);
  --bs-btn-hover-bg: var(--wine-dark); --bs-btn-hover-border-color: var(--wine-dark);
  --bs-btn-active-bg: var(--wine-dark); --bs-btn-active-border-color: var(--wine-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--wine); --bs-btn-border-color: var(--wine);
  --bs-btn-hover-bg: var(--wine); --bs-btn-hover-border-color: var(--wine);
  --bs-btn-active-bg: var(--wine-dark); --bs-btn-active-border-color: var(--wine-dark);
}
a { color: var(--wine); }
a:hover { color: var(--wine-dark); }
:focus-visible { outline: 2px solid #206853; outline-offset: 3px; }
.staff-bar :focus-visible { outline-color: var(--gold); }
.form-control:focus, .form-select:focus {
  border-color: #206853;
  box-shadow: 0 0 0 .2rem #20685338;
}
.alert { border-radius: .65rem; overflow-wrap: anywhere; }
.table-responsive {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .8rem;
  margin-bottom: 1rem;
  box-shadow: 0 .25rem .85rem #1336290a;
}
.table { margin: 0; }
.table caption { padding-inline: .85rem; color: var(--muted); }
.table thead th { background: var(--forest); color: #fff; vertical-align: top; }
.table td, .table th { padding: .65rem .8rem; }
.table td code { overflow-wrap: anywhere; }

.app-footer {
  background: #eaf0eb;
  border-top: 2px solid #a97842;
  padding: 1rem 0;
  color: var(--forest-dark);
}
.app-footer-inner, .footer-ownership {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.app-footer-inner { justify-content: space-between; flex-wrap: wrap; }
.footer-mark {
  display: grid;
  flex: 0 0 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border: 1px solid #d3b17a;
  border-radius: 50%;
  background: #fff8e8;
  color: var(--wine);
  font-size: 1.15rem;
  font-weight: 750;
}
.footer-label {
  display: block;
  color: var(--muted);
  font-size: .78rem;
}
.footer-branch { display: block; font-size: .95rem; font-weight: 750; }
.footer-date {
  border-inline-start: 1px solid #bac9c0;
  padding-inline-start: .9rem;
  white-space: nowrap;
}
.footer-date time { font-size: .88rem; font-weight: 750; }
@media (max-width: 575px) {
  .app-footer-inner { justify-content: flex-start; }
  .footer-date { border-inline-start: 0; padding-inline-start: 3.15rem; }
}
.skip-link { position: absolute; z-index: 10; padding: .55rem; background: #fff; color: var(--wine-dark); }

@media (max-width: 575px) {
  .brand-inner, .staff-inner { padding-inline: .75rem; }
  .app-main { padding-inline: .55rem; }
  .form-section { padding: .7rem; }
  .staff-inner { gap: .35rem .65rem; }
  .staff-session { justify-content: flex-end; }
}

.don-vi-lien-he {
  margin-top: .6rem;
  padding: .65rem .85rem;
  border-inline-start: .2rem solid var(--forest);
  background: #edf4ee;
  overflow-wrap: anywhere;
}
.qr-page-tools { max-width: 48rem; }
.qr-choose { display: flex; flex-wrap: wrap; gap: .65rem; }
.qr-choose .form-select { flex: 1 1 15rem; }
.qr-contact-form { border-top: 1px solid var(--line); padding-top: 1rem; }
.qr-sheet {
  box-sizing: border-box;
  width: min(100%, 148mm);
  min-height: min(110vw, 210mm);
  margin: 1rem auto 0;
  padding: 8mm;
  border: 1px solid var(--line);
  background: #fff;
  color: #111;
  display: grid;
  place-items: center;
  text-align: center;
}
.qr-sheet-content { width: 100%; overflow-wrap: anywhere; }
.qr-sheet-logo { width: min(100%, 66mm); height: auto; margin-bottom: 4mm; }
.qr-sheet-brand { margin-bottom: 3mm; color: var(--wine-dark); font-weight: 800; font-size: 1rem; }
.qr-sheet h2 { margin: 0 0 3mm; font-weight: 800; font-size: 1.35rem; }
.qr-sheet-unit { margin: 0; font-weight: 700; }
.qr-sheet-code { display: block; width: min(100%, 78mm); height: auto; margin: 3mm auto; image-rendering: pixelated; }
.qr-sheet-hint { margin: 0; }

@page phieu-qr {
  size: A5 portrait;
  margin: 6mm;
}
@media print {
  body:has(.qr-sheet) { display: block; margin: 0; min-height: 0; background: #fff; }
  body:has(.qr-sheet) :is(.brand-header, .app-footer, .skip-link, .qr-page-tools) { display: none; }
  body:has(.qr-sheet) .app-main { page: phieu-qr; width: auto; max-width: none; margin: 0; padding: 0; }
  .qr-sheet {
    width: 100%;
    min-height: 197mm;
    padding: 10mm;
    margin: 0;
    border: 0;
    break-inside: avoid;
    print-color-adjust: exact;
  }
}