:root{
  --bg1:#0b1020;
  --bg2:#0a0620;
  --card: rgba(255,255,255,.08);
  --txt:#f5f7ff;
  --muted: rgba(245,247,255,.75);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 22px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--txt);
}

.bg{
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(255,120,200,.18), transparent 55%),
    radial-gradient(900px 700px at 80% 20%, rgba(120,180,255,.16), transparent 55%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  min-height:100%;
  overflow-x:hidden;
}

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  position:relative;
  z-index:2;
}

.card{
  width:min(900px, 100%);
  background: linear-gradient(180deg, var(--card), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 3.2vw, 28px);
  backdrop-filter: blur(10px);
}

.hero{ text-align:center; }

.title{
  font-size: clamp(22px, 3.2vw, 38px);
  margin: 10px 0 6px;
  line-height: 1.15;
}
.subtitle{
  color: var(--muted);
  margin: 0 0 18px;
  font-size: clamp(13px, 1.8vw, 16px);
}

.footer{
  margin-top:18px;
  display:flex;
  justify-content:center;
  color: rgba(245,247,255,.7);
  font-size: 12px;
}

/* ===== Gift ===== */
.gift-area{
  position:relative;
  height: 220px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 8px;
}

.gift{
  width: 150px;
  height: 150px;
  position:relative;
  transform: translateY(6px);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform: translateY(6px); }
  50%{ transform: translateY(-6px); }
}

.gift-box{
  position:absolute;
  inset: 38px 0 0 0;
  background: linear-gradient(180deg, rgba(255,80,140,.95), rgba(200,40,120,.95));
  border-radius: 14px;
  box-shadow: 0 18px 38px rgba(0,0,0,.25);
}
.gift-lid{
  position:absolute;
  left: -6px; right:-6px;
  top: 18px;
  height: 42px;
  background: linear-gradient(180deg, rgba(255,120,170,1), rgba(235,70,145,1));
  border-radius: 14px;
  transform-origin: 20% 100%;
  animation: lid 2.4s ease-in-out infinite;
}
@keyframes lid{
  0%,100%{ transform: rotate(0deg); }
  50%{ transform: rotate(-10deg); }
}

.gift-ribbon{
  position:absolute;
  top: 18px;
  left: 50%;
  width: 16px;
  height: 132px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,240,150,1), rgba(255,190,70,1));
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.gift-bow{
  position:absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  display:flex;
  gap:10px;
}
.gift-bow span{
  width: 34px;
  height: 22px;
  background: linear-gradient(180deg, rgba(255,240,150,1), rgba(255,190,70,1));
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
}
.gift-bow span:first-child{ transform: rotate(-18deg); }
.gift-bow span:last-child{ transform: rotate(18deg); }

/* tim cạnh hộp */
.heart-float{
  position:absolute;
  width: 56px;
  height: 56px;
  right: calc(50% - 120px);
  top: 18px;
  opacity:.95;
  animation: floaty 3.2s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{ transform: translateY(0) rotate(-8deg); }
  50%{ transform: translateY(-12px) rotate(8deg); }
}

/* sparkles khi mở quà */
.sparkles{
  position:absolute;
  inset: -20px;
  pointer-events:none;
  opacity: 0;
  transform: scale(.92);
}
.sparkles i{
  position:absolute;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 18px rgba(255,210,240,.45);
  animation: sparkle 700ms ease-in-out infinite;
}
.sparkles i:nth-child(1){ left: 20%; top: 10%; animation-delay: 0ms; }
.sparkles i:nth-child(2){ left: 55%; top: 0%;  animation-delay: 120ms; }
.sparkles i:nth-child(3){ left: 78%; top: 18%; animation-delay: 220ms; }
.sparkles i:nth-child(4){ left: 12%; top: 44%; animation-delay: 80ms; }
.sparkles i:nth-child(5){ left: 84%; top: 46%; animation-delay: 160ms; }
.sparkles i:nth-child(6){ left: 52%; top: 36%; animation-delay: 260ms; }
@keyframes sparkle{
  0%,100%{ transform: scale(.7); opacity:.55; }
  50%{ transform: scale(1.25); opacity:1; }
}

/* mở quà */
.gift.open{
  animation: none;
  transform: translateY(0);
}
.gift.open .gift-lid{
  animation: none;
  transform: rotate(-55deg) translate(-8px, -10px);
}
.gift.open .sparkles{
  opacity: 1;
  transform: scale(1);
  transition: opacity .25s ease, transform .25s ease;
}

/* lắc quà khi sai */
.gift.shake{
  animation: shakeGift .45s ease;
}
@keyframes shakeGift{
  0%,100%{ transform: translateY(6px) translateX(0) rotate(0deg); }
  20%{ transform: translateY(6px) translateX(-8px) rotate(-2deg); }
  40%{ transform: translateY(6px) translateX(8px) rotate(2deg); }
  60%{ transform: translateY(6px) translateX(-6px) rotate(-2deg); }
  80%{ transform: translateY(6px) translateX(6px) rotate(2deg); }
}

/* ===== Form ===== */
.pw-form{
  max-width: 520px;
  margin: 0 auto;
  text-align:left;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
}
.label{ display:block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.row{ display:flex; gap:10px; }
.input{
  flex:1;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: var(--txt);
  outline: none;
}
.input::placeholder{ color: rgba(245,247,255,.45); }
.hint{ margin: 10px 0 0; font-size: 12px; color: rgba(245,247,255,.68); }
.error{ margin: 8px 0 0; font-size: 13px; color: #ffb7d6; min-height: 18px; }

.btn{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.14);
  color: var(--txt);
  cursor:pointer;
  font-weight: 650;
  transition: transform .08s ease, background .2s ease;
  white-space: nowrap;
}
.btn:hover{ background: rgba(255,255,255,.18); }
.btn:active{ transform: translateY(1px) scale(.99); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

.pw-form.bad{ animation: shake .45s ease; }
.pw-form.ok{ animation: pop .35s ease; }
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-8px); }
  40%{ transform: translateX(8px); }
  60%{ transform: translateX(-6px); }
  80%{ transform: translateX(6px); }
}
@keyframes pop{
  0%{ transform: scale(.98); }
  70%{ transform: scale(1.02); }
  100%{ transform: scale(1); }
}

.wish-preview{ margin-top: 14px; text-align:center; }
.wish-line{ margin: 4px 0; }
.wish-line.small{ color: var(--muted); font-size: 13px; }

/* ===== Confetti ===== */
.confetti-layer{
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.confetti{
  position:absolute;
  background: var(--c, rgba(255,255,255,.95));
  transform: rotate(var(--rot, 0deg));
  animation: confettiFly 1.25s ease-out forwards;
  opacity: .98;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
@keyframes confettiFly{
  0%{
    transform: translate(0,0) rotate(var(--rot,0deg));
    opacity: 1;
  }
  100%{
    transform: translate(calc(var(--vx) * 18px), calc(var(--vy) * 18px))
      rotate(calc(var(--rot,0deg) + 220deg));
    opacity: 0;
  }
}

/* Responsive */
@media (max-width: 820px){
  .row{ flex-direction: column; }
  .btn{ width: 100%; }
  .heart-float{ right: 12px; top: 12px; }
}