:root {
  --nau: #1f4d3f;
  --nau2: #ff7a5c;
  --nen: #f8f7f2;
  --the: #fffefa;
  --vien: #dfe6e2;
  --chu: #15231e;
  --mo: #66736e;
  --xanh: #0f765b;
  --do: #a73535;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--chu);
  background:
    radial-gradient(circle at 10% 0%, rgba(31,77,63,.1), transparent 27rem),
    radial-gradient(circle at 92% 8%, rgba(255,122,92,.12), transparent 25rem),
    var(--nen);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(100% - 36px, 600px); max-width: none; margin: 0 auto; padding: 32px 0 64px; }
.logo { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 27px; padding-bottom: 20px; border-bottom: 1px solid var(--vien); }
.logo .mark { width: min(100%, 330px); height: auto; max-height: 48px; border-radius: 0; object-fit: contain; object-position: left center; }
.logo .brand-back { color: var(--nau); font-size: 12px; font-weight: 750; text-decoration: none; white-space: nowrap; }
h1 { margin: 0 0 6px; color: var(--nau); font-size: clamp(28px, 7vw, 38px); font-weight: 850; letter-spacing: -.035em; line-height: 1.1; }
.sub { margin: 0 0 24px; color: var(--mo); font-size: 14px; }
.the { margin-bottom: 17px; padding: 25px; border: 1px solid var(--vien); border-radius: 22px; color: var(--chu); background: rgba(255,254,250,.96); box-shadow: 0 24px 68px rgba(20,60,48,.1); }
.gia { color: var(--nau); font-size: 36px; font-weight: 850; letter-spacing: -.035em; }
.gia .cu { color: #8a938f; font-size: 15px; }
.km { color: var(--xanh); border-color: rgba(15,118,91,.32); background: rgba(15,118,91,.07); font-weight: 750; }
label { margin: 16px 0 6px; color: var(--nau); font-size: 12px; font-weight: 800; letter-spacing: .03em; }
input { min-height: 49px; padding: 12px 14px; border: 1.5px solid var(--vien); border-radius: 11px; color: var(--chu); background: #f5f8f6; font-size: 15px; }
input:focus { border-color: var(--nau); outline: 3px solid rgba(31,77,63,.12); }
.hint, .step { color: var(--mo); }
.step b { color: var(--chu); }
button, .pack-action {
  min-height: 49px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--nau);
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
button:hover, .pack-action:hover { color: #fff; background: #143c30; transform: translateY(-1px); }
button:disabled { opacity: .5; transform: none; }
.copy { color: var(--nau); border: 1px solid var(--vien); background: #edf4f0; }
.copy:hover { color: var(--nau); background: #e2eee8; }
.err { color: var(--do); }
.qr img { width: min(100%, 250px); height: auto; aspect-ratio: 1; border: 1px solid var(--vien); border-radius: 16px; padding: 8px; }
.kv { border-color: var(--vien); }
.memo, .keybox { color: var(--nau); border-color: var(--nau2); background: #fff8f5; }
.ok h2 { color: var(--xanh); }
a { color: var(--nau); }
.product-note { margin: 17px 0 0; padding: 12px 14px; border: 1px solid rgba(255,122,92,.24); border-radius: 12px; color: #65524c; background: rgba(255,122,92,.08); font-size: 12px; }
.pack-footer { margin-top: 24px; color: var(--mo); font-size: 12px; text-align: center; }
.pack-footer a { font-weight: 700; text-decoration: none; }

@media (max-width: 520px) {
  .wrap { width: min(100% - 28px, 600px); padding-top: 20px; }
  .logo { align-items: flex-start; flex-direction: column; gap: 10px; }
  .logo .mark { width: min(100%, 292px); }
  .the { padding: 21px 18px; border-radius: 18px; }
}