:root {
  --bg: #fbf8f3; --bg-2: #f4eee4; --ink: #3a2f2b; --muted: #7a6d65;
  --gold: #9c7843; --gold-2: #86632f; --rose: #c98f8a; --line: rgba(156, 120, 67, .3);
  --card: #fff; --shadow: 0 14px 44px rgba(70, 50, 40, .09);
  --script: 'Great Vibes', cursive; --serif: 'Cormorant Infant', Georgia, serif; --sans: 'Be Vietnam Pro', system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --sprig: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260'><path d='M22 252C34 172 74 100 164 18' stroke='black' stroke-width='2.4' fill='none'/><g fill='black'><ellipse cx='30' cy='214' rx='20' ry='8' transform='rotate(-30 30 214)'/><ellipse cx='46' cy='196' rx='20' ry='8' transform='rotate(-120 46 196)'/><ellipse cx='52' cy='160' rx='20' ry='8' transform='rotate(-38 52 160)'/><ellipse cx='72' cy='146' rx='20' ry='8' transform='rotate(-128 72 146)'/><ellipse cx='78' cy='116' rx='20' ry='8' transform='rotate(-46 78 116)'/><ellipse cx='102' cy='106' rx='20' ry='8' transform='rotate(-136 102 106)'/><ellipse cx='108' cy='80' rx='19' ry='7.5' transform='rotate(-52 108 80)'/><ellipse cx='132' cy='72' rx='19' ry='7.5' transform='rotate(-142 132 72)'/><ellipse cx='140' cy='48' rx='18' ry='7' transform='rotate(-58 140 48)'/><ellipse cx='160' cy='36' rx='17' ry='6.5' transform='rotate(-120 160 36)'/><circle cx='170' cy='14' r='7'/></g></svg>");   /* nhành lá trang trí */
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; touch-action: pan-x pan-y; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 300 1rem/1.75 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-weight: 600; margin: 0; }
.script { font-family: var(--script); font-weight: 400; line-height: 1.15; }
.eyebrow { margin: 0 0 .9rem; font: 500 .74rem/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); text-indent: .34em; }

/* ---------- Nút ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .8rem 2.2rem; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; text-indent: .16em;
  font: 500 .8rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #fff; background: linear-gradient(120deg, #8f6d3a, #aa8650);
  box-shadow: 0 10px 26px rgba(143, 109, 58, .3); transition: transform .3s var(--ease), box-shadow .3s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(143, 109, 58, .42); }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }
/* Nút đăng ký đầu trang: vòng sáng lan toả + vệt sáng quét ngang để thu hút chú ý */
#heroBtn, #submit { position: relative; overflow: hidden; isolation: isolate; animation: btnPulse 2s ease-out 1.2s infinite; }
#heroBtn::after, #submit::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: btnShine 3s ease-in-out 1.5s infinite; }
#heroBtn:hover, #submit:hover { animation-play-state: paused; }
#submit:disabled, #submit:disabled::after { animation: none; }
@keyframes btnPulse {
  0% { box-shadow: 0 0 0 0 rgba(156, 120, 67, .55), 0 10px 26px rgba(143, 109, 58, .35); }
  70%, 100% { box-shadow: 0 0 0 18px rgba(156, 120, 67, 0), 0 10px 26px rgba(143, 109, 58, .35); }
}
@keyframes btnShine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
.btn.full { width: 100%; }
.btn.ghost { background: transparent; color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { background: rgba(156, 120, 67, .08); box-shadow: inset 0 0 0 1px var(--gold); }

/* ---------- Đầu trang ---------- */
.hero { position: relative; overflow: hidden; padding: 3.5rem 1.25rem 4.5rem; text-align: center;
  background: radial-gradient(ellipse at 50% 0, #fffdf9, var(--bg) 62%); }
.hero::before, .hero::after { content: ''; position: absolute; width: clamp(120px, 28vw, 230px); aspect-ratio: 200 / 260; background: var(--gold); opacity: .38; pointer-events: none;
  -webkit-mask: var(--sprig) center / contain no-repeat; mask: var(--sprig) center / contain no-repeat; }
.hero::before { top: -1rem; left: -1rem; transform: rotate(-8deg); }
.hero::after { bottom: -1rem; right: -1rem; transform: rotate(172deg); }
.hero-in { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.arch { width: min(66vw, 300px); aspect-ratio: 3 / 4; margin: 0 auto 2rem; border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow), 0 0 0 8px #fff, 0 0 0 9px var(--line); }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.names { margin: 0; font-size: clamp(3.2rem, 13vw, 6.4rem); color: var(--ink); }
.names i { font-style: normal; color: var(--rose); padding: 0 .1em; }
.headline { margin: .9rem 0 .2rem; font: 600 clamp(1.5rem, 5vw, 2.1rem)/1.3 var(--serif); color: var(--gold-2); }
.sub { margin: 0 0 1.8rem; font: 400 .85rem var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }

/* ---------- Khối nội dung ---------- */
.block { max-width: 1040px; margin: 0 auto; padding: clamp(3.5rem, 10vw, 6rem) 1.25rem; }
.block.alt { max-width: none; background: var(--bg-2); }
.block.alt > * { max-width: 1040px; margin-left: auto; margin-right: auto; }
.sec-head { text-align: center; margin-bottom: 2.4rem; }
.sec-head h2, .greet h2 { font: 600 clamp(1.9rem, 6vw, 2.8rem)/1.2 var(--serif); color: var(--gold-2); }
.sec-head::after { content: ''; display: block; width: 64px; height: 1px; margin: 1.4rem auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.lead { max-width: 640px; margin: 1rem auto 0; color: var(--muted); }

/* Lời chào */
.greet { display: grid; gap: 2.2rem; align-items: center; }
.greet h2 { margin-bottom: 1.2rem; }
.greet-text { text-align: center; max-width: 640px; margin: 0 auto; }
.greet-text p { margin: 0 0 1rem; }
#greetBody p { font-size: 1.04rem; }
.sign { margin: 1.2rem 0 0 !important; font-size: 2.6rem; color: var(--gold-2); }
.people { display: flex; justify-content: center; gap: clamp(1.4rem, 8vw, 4rem); margin-top: 3rem; flex-wrap: wrap; }
.person { text-align: center; }
.person img { width: 132px; height: 132px; margin: 0 auto .8rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--gold), 0 0 0 9px var(--bg), 0 0 0 10px var(--line), var(--shadow); }
.person b { display: block; font: 600 1.4rem var(--serif); }
.person span { font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }

/* Lịch trình */
.facts { list-style: none; margin: 0 auto 2.4rem; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.facts li { padding: 1.1rem 1rem; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.facts small { display: block; font: 500 .68rem var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.facts b { display: block; margin-top: .3rem; font: 600 1.3rem/1.3 var(--serif); }
.days { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.day { position: relative; padding: 1.8rem 1.5rem 1.5rem; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); border-top: 3px solid var(--gold); }
.day .tag { display: inline-block; padding: .25rem .9rem; margin-bottom: .8rem; border-radius: 999px; background: rgba(156, 120, 67, .12); color: var(--gold-2); font: 500 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.day h3 { margin-bottom: .8rem; font: 600 1.5rem/1.25 var(--serif); }
.day ul { list-style: none; margin: 0; padding: 0; }
.day li { position: relative; padding: 0 0 .65rem 1.4rem; color: var(--muted); }
.day li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* Form */
.deadline { display: inline-block; margin: 1rem 0 0; padding: .35rem 1rem; border-radius: 999px; background: rgba(201, 143, 138, .15); color: #8a4a45; font-size: .85rem; }
.card { max-width: 520px; margin: 0 auto; padding: clamp(1.4rem, 5vw, 2.2rem); background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.fld { margin: 0 0 1.3rem; }
.fld label { display: block; margin: 0 0 .4rem; font: 500 .85rem var(--sans); color: var(--gold-2); }
input[type=text], input[type=number] { width: 100%; min-height: 50px; padding: .75rem 1rem; border: 1px solid #ddd2c3; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; transition: border-color .2s, box-shadow .2s; }
input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(156, 120, 67, .15); }
input.bad { border-color: #c0392b; box-shadow: 0 0 0 4px rgba(192, 57, 43, .12); }
.stepper { display: flex; align-items: stretch; width: 100%; }
.stepper button { flex: none; width: 52px; border: 1px solid #ddd2c3; background: var(--bg); color: var(--gold-2); font: 400 1.5rem var(--sans); cursor: pointer; transition: background .2s; }
.stepper button:hover { background: #efe5d3; }
.stepper button:first-child { border-radius: 12px 0 0 12px; } .stepper button:last-child { border-radius: 0 12px 12px 0; }
.stepper input { text-align: center; border-radius: 0; border-left: 0; border-right: 0; -moz-appearance: textfield; font-weight: 500; font-size: 1.1rem; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hint { margin: .45rem 0 0; font-size: .8rem; color: var(--muted); }
.total { margin: .5rem 0 0; font: 600 1.05rem var(--serif); color: var(--gold-2); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.err { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 10px; background: #fdecea; color: #a8281c; font-size: .9rem; }
.thanks { text-align: center; }
.thanks .check { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 1rem; border-radius: 50%; background: rgba(47, 125, 79, .12); color: #2f7d4f; }
.thanks h3 { font: 600 1.7rem var(--serif); color: var(--gold-2); }
.thanks .who { margin: .5rem 0 .8rem; font: 500 1.05rem var(--sans); color: var(--ink); }
.thanks p { color: var(--muted); }
.thanks .btn { margin-top: .8rem; }
.count { margin: 1.4rem 0 0; text-align: center; font-size: .9rem; color: var(--muted); }
.count b { color: var(--gold-2); font-size: 1.05rem; }

.foot { padding: 4rem 1.25rem calc(3rem + env(safe-area-inset-bottom)); text-align: center; color: var(--muted); border-top: 1px solid var(--line); }
.foot .big { margin: 0 0 .6rem; font-size: clamp(2.6rem, 9vw, 4rem); color: var(--gold-2); }
.foot p { margin: 0; }

/* Hiệu ứng xuất hiện khi cuộn */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } .btn { transition: none; } #heroBtn, #submit, #heroBtn::after, #submit::after { animation: none; } }