/* ===== Tông vàng - đen theo dbp.nguyentruongtuyen.com ===== */
:root{
  --bg:#0a0a0a; --bg2:#141414;
  --card:#161616; --card-warm:#17130a;
  --ink:#f5f3ee; --muted:rgba(245,243,238,.66); --muted2:rgba(245,243,238,.5);
  --gold:#f5c065; --gold-deep:#d1962f; --gold-soft:#f0cf8e;
  --line:rgba(209,150,47,.28); --line-soft:rgba(245,243,238,.10);
  --green:#16b07a; --green2:#0f8f62; --red:#f0455e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 50% -8%,rgba(209,150,47,.12) 0%,rgba(209,150,47,0) 60%),
    var(--bg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:620px;margin:0 auto;padding:36px 18px 60px;display:flex;flex-direction:column;align-items:center;text-align:center}
.view{animation:fade .45s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  margin:0 auto 22px;padding:8px 18px;border-radius:999px;
  background:rgba(245,192,101,.10);border:1px solid var(--line);
  color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.6px;
}
.headline{font-size:30px;line-height:1.3;font-weight:800;margin:2px 0 12px;letter-spacing:-.2px}
.headline .hl{color:var(--gold)}
.sub{color:var(--muted);max-width:470px;margin:0 auto 26px;font-size:15px;line-height:1.65}

/* ---------- Card ---------- */
.card{
  width:100%;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:22px;padding:26px 22px;text-align:left;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.card-title{text-align:center;color:var(--gold);font-weight:800;font-size:19px;letter-spacing:.5px;margin-bottom:18px}

.field{
  width:100%;border:1.5px solid var(--line-soft);border-radius:14px;
  padding:15px 16px;font-size:15px;margin-bottom:12px;color:var(--ink);
  background:rgba(255,255,255,.04);outline:none;transition:border-color .15s,box-shadow .15s;
}
.field:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,192,101,.16)}
.field::placeholder{color:var(--muted2)}

/* ---------- Tiers ---------- */
.tiers{margin:8px 0 4px;display:flex;flex-direction:column;gap:10px}
.tier{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  border:1.5px solid var(--line-soft);border-radius:14px;padding:15px 16px;
  transition:border-color .15s,background .15s;
}
.tier:hover{border-color:var(--line)}
.tier input{accent-color:var(--gold);width:18px;height:18px;margin:0}
.tier .tier-name{font-weight:600;flex:1;color:var(--ink)}
.tier .tier-price{font-weight:800;color:var(--gold)}
.tier.selected{border-color:var(--gold);background:rgba(245,192,101,.10)}

/* ---------- Buttons ---------- */
.btn-primary,.btn-confirm,.btn-gift{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;border:0;border-radius:16px;padding:17px 20px;margin-top:16px;
  font-size:17px;font-weight:800;cursor:pointer;text-decoration:none;
  transition:filter .15s,transform .05s;
}
/* CTA vàng - chữ đen (chữ ký thương hiệu) */
.btn-primary,.btn-gift{background:linear-gradient(180deg,var(--gold) 0%,var(--gold-deep) 100%);color:#17130a}
.btn-confirm{background:linear-gradient(180deg,var(--green) 0%,var(--green2) 100%);color:#fff;margin-top:18px}
.btn-gift{margin-top:6px}
.btn-primary:hover,.btn-confirm:hover,.btn-gift:hover{filter:brightness(1.06)}
.btn-primary:active,.btn-confirm:active{transform:translateY(1px)}
.btn-primary[disabled],.btn-confirm[disabled]{opacity:.7;cursor:default}
.btn-spin{width:18px;height:18px;border:3px solid rgba(0,0,0,.25);border-top-color:#17130a;border-radius:50%;animation:spin .7s linear infinite}
.btn-confirm .btn-spin{border:3px solid rgba(255,255,255,.5);border-top-color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
.foot-note{text-align:center;color:var(--muted);margin-top:14px;font-size:14px}
.form-error{color:var(--red);font-size:14px;min-height:18px;margin-top:4px;text-align:center;font-weight:600}

/* ---------- QR view ---------- */
.card-qr{text-align:center}
.cup{font-size:46px}.cup.big{font-size:54px}
.qr-lead{color:var(--muted);font-size:15px;margin:6px 0 16px}
.qr-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;display:inline-block;margin-bottom:16px}
#qr-img{display:block;max-width:100%;height:auto;border-radius:8px}
.bank-info{color:var(--ink);font-size:14px;line-height:1.9;margin-bottom:16px}
.bank-info b{color:var(--ink)}
.bank-info .amount,.bank-info .content{color:var(--gold);letter-spacing:.3px}

.status{border-radius:14px;padding:16px;margin-bottom:6px}
.status.waiting{background:rgba(245,192,101,.08);border:1px solid var(--line)}
.status.paid{background:rgba(22,176,122,.12);border:1px solid rgba(22,176,122,.4)}
.status-title{font-weight:800;color:var(--gold);margin-bottom:4px}
.status.paid .status-title{color:var(--green)}
.status-desc{color:var(--muted);font-size:13.5px;line-height:1.6}

/* ---------- Done view ---------- */
.card-done{text-align:center}
.done-title{font-size:23px;margin:8px 0 6px;color:var(--ink)}
.done-title span{color:var(--gold)}
.done-sub{color:var(--muted);margin-bottom:18px}
.gift-box{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:14px}
.gift-title{font-weight:800;font-size:17px;color:var(--gold)}
.gift-desc{color:var(--muted);margin:8px 0 4px;font-size:14.5px;line-height:1.6}
.done-mail{color:var(--muted2);font-size:14px}

/* ---------- Footer ---------- */
.site-foot{margin-top:30px;text-align:center;color:var(--muted2);font-size:13px;line-height:1.8}
.site-foot .muted{color:var(--muted2)}

@media (max-width:480px){
  .headline{font-size:25px}
  .card{padding:22px 16px;border-radius:18px}
}