@font-face{font-family:'Arcittya Begatri';src:url('assets/fonts/arcittya-begatri.woff2') format('woff2'),url('assets/fonts/arcittya-begatri.woff') format('woff');font-display:swap}
@font-face{font-family:'BucThu';src:url('assets/fonts/bucthu.woff2') format('woff2'),url('assets/fonts/bucthu.woff') format('woff');font-display:swap}
:root{--wine:#590b22;--wine2:#6a102a;--paper:#fff;--ink:#241b20;--gold:#b28a4f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#e9e4e0;color:var(--ink);font:400 14px/1.55 'Cormorant Garamond',Georgia,serif}button,input,select,textarea{font:inherit}button{cursor:pointer}img{display:block;max-width:100%}.page{width:min(100%,430px);margin:auto;background:#fff;min-height:100vh;box-shadow:0 0 32px #31242729;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.flower{position:absolute;pointer-events:none;z-index:5;object-fit:contain}.music-toggle{position:fixed;top:14px;right:max(14px,calc((100vw - 430px)/2 + 14px));z-index:30;width:37px;height:37px;border:1.5px solid white;border-radius:50%;background:var(--wine);color:#fff;font-size:22px;line-height:1;box-shadow:0 2px 8px #421a2990}.music-toggle[aria-pressed="false"]::after{content:"";position:absolute;left:7px;top:17px;width:22px;border-top:1.5px solid white;transform:rotate(-45deg)}.cover{background:#fff;text-align:center;padding-top:28px}.envelope-scene{position:relative;height:605px;width:100%;max-width:430px;margin:auto}.envelope-photo{position:absolute;top:48px;left:18%;width:64%;height:315px;padding:7px;background:white;box-shadow:0 2px 12px #0003;z-index:2}.envelope-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}.envelope-back{position:absolute;top:225px;left:8%;width:84%;height:260px;background:#7c1430;clip-path:polygon(0 0,50% 48%,100% 0,100% 100%,0 100%);z-index:1}.envelope-front{position:absolute;top:241px;left:8%;width:84%;height:246px;background:linear-gradient(145deg,#6b0f29,#4e071c);clip-path:polygon(0 0,50% 49%,100% 0,100% 100%,0 100%);z-index:3;filter:drop-shadow(0 5px 8px #0004)}.envelope-front:before{content:"";position:absolute;inset:0;background:linear-gradient(30deg,transparent 49.7%,#a6556255 50%,transparent 50.3%)}.wax-seal{position:absolute;top:329px;left:50%;transform:translateX(-50%);z-index:6;width:53px;height:53px;display:grid;place-content:center;border-radius:50%;background:radial-gradient(circle,#d8b983,#aa7a39);border:4px double #fff1c7;box-shadow:0 2px 8px #330d1e80;font-size:17px;color:#5a1127}.wax-seal span{font-size:11px}.flower-cover-top{width:95px;height:145px;right:-20px;top:174px;transform:rotate(18deg)}.flower-cover-bottom{width:95px;height:145px;left:-20px;top:397px;transform:rotate(-145deg)}.name-plaque{position:absolute;z-index:7;right:7px;top:355px;width:190px;height:236px;padding:41px 17px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:47% 52% 48% 50% / 32% 30% 34% 33%;background:#faf7ea;border:7px double #eee8d7;outline:2px solid #ddd8c8;box-shadow:0 4px 8px #1a0b114f;color:#39242a;transform:rotate(6deg)}.name-plaque:before{content:"";position:absolute;inset:13px;border:1px solid #d2c9ab;border-radius:inherit}.name-plaque span,.name-plaque em{position:relative;font:500 21px/1.18 'Dancing Script',cursive}.name-plaque em{font-size:25px}.countdown-block{padding:0 23px 44px}.countdown-block>p{font-size:23px;line-height:1.13;margin:0 0 24px}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:302px;margin:auto}.countdown div{height:67px;border-radius:6px;background:var(--wine);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.countdown strong{font-size:20px;font-weight:500;line-height:1}.countdown span{font-size:14px;line-height:1.2}.opening-story{padding:30px 17px 35px;text-align:center}.photo-pair{position:relative;height:360px}.photo-paper{position:absolute;width:48%;height:277px;padding:8px 8px 30px;background:#fff;box-shadow:0 2px 12px #0004;margin:0}.photo-paper img{width:100%;height:100%;object-fit:cover}.paper-left{top:2px;left:0;transform:rotate(-2deg)}.paper-right{top:48px;right:0;transform:rotate(2deg)}.photo-paper figcaption{font:400 19px/1.05 'Dancing Script',cursive;color:#3b2a2f;text-align:center;margin-top:4px}.photo-paper figcaption b{font:500 8px/1 'Be Vietnam Pro',sans-serif;letter-spacing:.03em}.flower-photo-pair{width:87px;height:164px;left:50%;top:102px;transform:translateX(-50%) rotate(18deg)}.story-note{font-size:17px;line-height:1.36;margin:0 auto;max-width:380px}.married-photo{position:relative;height:350px;overflow:hidden}.married-photo>img{height:100%;width:100%;object-fit:cover;object-position:center 40%}.married-photo:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#3f18275e)}.married-words{position:absolute;z-index:1;bottom:22px;left:0;right:0;text-align:center;color:#fff;text-shadow:0 2px 10px #0007}.married-words em{display:block;font:400 55px/.65 'Dancing Script',cursive}.married-words strong{display:block;font:400 60px/1 'Cormorant Garamond',serif}.invitation-info{text-align:center;padding:44px 18px 70px}.invitation-info h2{font-size:18px;font-weight:600;line-height:1.2;margin:0 auto 42px}.family-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.family-columns h3{font-size:15px;margin:0 0 7px;font-weight:600}.family-columns p{font-size:14px;line-height:1.3;margin:0}.couple{display:flex;flex-direction:column;align-items:center;margin:37px 0 0}.couple span{font-size:11px;letter-spacing:.1em}.couple b{font:500 25px 'Dancing Script',cursive;color:var(--wine);margin-top:3px}.couple i{font:italic 25px 'Cormorant Garamond',serif;color:var(--gold);margin:5px}.ceremonies{padding:0 18px 85px}.ceremony-card{border-radius:15px;background:var(--wine);color:#fff;text-align:center;padding:38px 19px 32px;margin:0 0 32px;min-height:298px}.ceremony-card p{font-size:14px;line-height:1.25;margin:0 0 11px}.ceremony-card .ceremony-side{font-size:11px;letter-spacing:.11em;color:#e4c7cf;margin-bottom:6px}.ceremony-card h2{font-size:20px;line-height:1.1;margin:0 0 4px;font-weight:600}.ceremony-card time{display:block;width:max-content;margin:11px auto 7px;border-top:1px solid #fff9;border-bottom:1px solid #fff9;padding:1px 16px;font-size:32px;font-weight:600;line-height:1.1}.ceremony-card .lunar{font-size:13px;margin-bottom:13px}.ceremony-card strong{display:block;font-size:15px;font-weight:600;line-height:1.1}.ceremony-card address{font-size:14px;font-style:normal;margin:7px 0 18px}.ceremony-card a{display:inline-block;min-width:168px;border:1px solid white;border-radius:100px;padding:4px 12px;text-decoration:none;font-size:13px;line-height:1.2;color:white}.ceremony-card a:hover{background:#fff2}.our-love{text-align:center;padding:0 17px 70px}.our-love h2{font-size:53px;line-height:1;margin:0 0 24px;font-weight:500;letter-spacing:.03em}.love-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.love-strip button,.album-more button{padding:0;border:0;background:#eee;overflow:hidden}.love-strip img{height:158px;width:100%;object-fit:cover}.our-love>p{font-size:16px;line-height:1.36;margin:25px auto 36px;max-width:380px}.calendar-wrap{position:relative;padding:40px 30px 50px}.calendar-card{border-radius:15px;background:var(--wine);color:#fff;padding:28px 20px 32px;min-height:365px}.calendar-card>p{font-size:15px;line-height:1.12;margin:0 0 9px}.calendar-card>strong{display:block;font:400 42px/1 'Dancing Script',cursive}.calendar-year{font-size:13px;letter-spacing:.12em}.dates{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:18px}.dates span{height:31px;display:grid;place-items:center;font-size:12px}.dates span.marked{position:relative;color:#fff;font-weight:600;border:1px solid #e8bac5;border-radius:50%;width:30px;justify-self:center}.dates span.marked:after{content:"♥";font-size:6px;position:absolute;top:-5px;right:-4px;color:#f4c0cd}.flower-calendar-top{width:100px;height:154px;top:0;left:-18px;transform:rotate(-40deg)}.flower-calendar-bottom{width:95px;height:154px;right:-14px;bottom:0;transform:rotate(145deg)}.album-more{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 12px 25px}.album-more img{width:100%;height:210px;object-fit:cover}.rsvp{padding:15px 23px 62px}.rsvp-intro{text-align:center;font-size:17px;line-height:1.35;margin:0 0 25px}.rsvp form{padding:27px 15px 22px;box-shadow:0 1px 10px #0004;border-radius:3px;background:#fff}.rsvp h2{font-size:21px;text-align:center;margin:0 0 15px}.rsvp label,.rsvp legend{font-size:14px}.rsvp input[type=text],.rsvp select,.modal input,.modal textarea{display:block;width:100%;height:33px;border:1px solid #ddd;border-radius:4px;padding:5px 8px;background:#fff;outline-color:var(--wine)}.rsvp input::placeholder,.modal input::placeholder,.modal textarea::placeholder{color:#aaa}.rsvp fieldset{border:0;padding:0;margin:11px 0 5px}.rsvp legend{margin-bottom:4px}.rsvp fieldset label{display:block;margin:4px 0;font-size:13px}.rsvp input[type=radio]{accent-color:#ce4b68}.rsvp form>button,.modal form>button{display:block;width:100%;height:35px;background:var(--wine);color:#fff;border:0;border-radius:3px;margin-top:16px;font-size:14px}.bot-field{position:absolute;left:-9999px}.thank-you{position:relative;height:500px;color:#fff}.thank-you>img{width:100%;height:100%;object-fit:cover;object-position:center 45%}.thank-you:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#2f071dc9)}.thank-you>div{position:absolute;z-index:1;bottom:27px;left:22px;right:22px;text-align:center}.thank-you h2{font:400 57px/.9 'Dancing Script',cursive;margin:0 0 15px}.thank-you p{font-size:16px;line-height:1.3}.thank-you strong{font:500 28px 'Dancing Script',cursive}.thank-you em{color:#e7b5c1}.gift-inline{text-align:center;padding:55px 20px 105px}.gift-inline h2{font:500 36px 'Dancing Script',cursive;color:var(--wine);margin:0 0 4px}.gift-inline p{font-size:16px;margin:0 0 20px}.gift-inline button{background:var(--wine);color:#fff;border:0;border-radius:20px;padding:10px 20px;font-size:12px}.float-actions{position:fixed;z-index:25;bottom:14px;left:max(12px,calc((100vw - 430px)/2 + 12px));right:max(12px,calc((100vw - 430px)/2 + 12px));display:flex;align-items:center;gap:8px;pointer-events:none}.float-actions>*{pointer-events:auto}.rsvp-float{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--wine);box-shadow:0 1px 9px #0004;display:grid;place-items:center;text-decoration:none;font:600 10px 'Be Vietnam Pro',sans-serif}.wish-float{background:#4c4c4ce8;color:#fff;border:0;border-radius:22px;padding:8px 13px;font:italic 14px 'Cormorant Garamond',serif;box-shadow:0 1px 8px #0003}.wish-float span{font-style:normal;margin-left:8px}.gift-float{margin-left:auto;border:0;width:43px;height:43px;border-radius:50%;background:var(--wine);color:white;font-size:20px;box-shadow:0 1px 8px #0005}.modal{width:min(360px,calc(100vw - 30px));max-height:calc(100vh - 30px);overflow:auto;border:0;border-radius:13px;padding:25px 25px 20px;background:white;color:var(--ink);text-align:center;box-shadow:0 15px 50px #0007}.modal::backdrop,.photo-modal::backdrop{background:#210812c7}.modal-close{position:absolute;right:9px;top:7px;width:30px;height:30px;border:0;background:transparent;font-size:27px;color:var(--wine)}.modal h2{font:500 32px 'Dancing Script',cursive;color:var(--wine);margin:0 0 5px}.modal p{font-size:14px;margin:0 0 12px}.modal>img{width:min(240px,80%);margin:0 auto 12px}.modal>strong{display:block;font:600 13px 'Be Vietnam Pro',sans-serif}.modal>span{display:block;font-size:13px}.copy-button{border:1px solid var(--wine);background:white;color:var(--wine);border-radius:20px;padding:7px 15px;margin-top:13px}.modal #copy-feedback{min-height:15px;font-size:12px;margin-top:5px}.modal form{text-align:left}.modal form label{display:block;margin:10px 0 4px}.modal textarea{height:auto;resize:vertical}.photo-modal{padding:0;border:0;background:#210812;max-width:95vw;max-height:95vh}.photo-modal img{max-width:95vw;max-height:95vh;object-fit:contain}.photo-modal .modal-close{background:#420e20;color:#fff;border-radius:50%;z-index:2}.thank-you-page{min-height:100vh;padding:50px 25px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:var(--wine);color:white}.thank-you-page>span{color:#e8bb9f;font-size:40px}.thank-you-page h1{font:500 70px/1 'Cormorant Garamond',serif}.thank-you-page h1 em{display:block;font-size:.7em}.thank-you-page p{font-size:18px;max-width:360px}.thank-you-page .pill-button{color:var(--wine);background:white;border-radius:25px;text-decoration:none;padding:8px 20px}@media(max-width:430px){body{background:white}.page{box-shadow:none}.envelope-scene{height:605px}}@media(max-width:360px){.name-plaque{right:-5px;transform:rotate(6deg) scale(.9)}.photo-paper{width:49%}.countdown{gap:6px}.ceremony-card{padding-left:11px;padding-right:11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Match the mobile rhythm of the selected red invitation reference. */
.envelope-scene{height:565px}
.envelope-photo{top:50px;left:22%;width:56%;height:285px}
.envelope-back{top:190px;left:12%;width:76%;height:220px}
.envelope-front{top:205px;left:12%;width:76%;height:205px}
.wax-seal{top:295px;left:50%;width:50px;height:50px}
.flower-cover-top{width:140px;height:330px;right:-31px;top:0;transform:rotate(8deg)}
.flower-cover-bottom{width:116px;height:175px;left:-25px;top:330px;transform:rotate(-135deg)}
.name-plaque{top:305px;right:4px;width:180px;height:228px;padding:42px 24px 27px;border:0;outline:0;border-radius:0;background:url('assets/blank-ornate-plaque-v2.webp') center/contain no-repeat;box-shadow:none;transform:rotate(3deg)}
.name-plaque:before{display:none}
.name-plaque span,.name-plaque em{font:500 25px/1 'Dancing Script',cursive;color:#34272a;text-shadow:0 1px #fff8}
.name-plaque em{font-size:24px;margin:4px 0}
.paper-right{top:70px;height:277px;padding-bottom:8px}
.paper-right figcaption{position:absolute;top:-49px;left:0;right:0;margin:0;line-height:1}
.story-note{font-size:15px;line-height:1.31;max-width:370px}
.invitation-info{padding-bottom:34px}
.couple{margin-top:36px}
.couple span{display:none}
.couple b{font-size:42px;line-height:1.1;color:#211c20;margin-top:0}
.couple i{font-size:31px;line-height:1;margin:7px 0}
.ceremonies{padding-bottom:55px}
.love-banner{height:305px;overflow:hidden;margin:0 7px 0}
.love-banner img{width:100%;height:100%;object-fit:cover;object-position:center 43%}
.our-love{padding-top:68px;padding-bottom:15px}
.our-love>p{font-size:15px;line-height:1.31;margin-top:23px;margin-bottom:42px}
.calendar-wrap:before{content:"";position:absolute;left:50%;top:-26px;width:1px;height:80px;background:var(--wine);z-index:1}
.calendar-wrap:after{content:"";position:absolute;left:50%;top:19px;transform:translateX(-50%);width:46px;height:46px;z-index:7;border-radius:50%;background:radial-gradient(circle,#e5cd9b,#ad7c39);border:4px double #ffedbe;box-shadow:0 2px 7px #330817a6}
.album-more{display:block;padding:27px 9px 35px;text-align:center}
.album-more h2{font:500 51px/1 'Dancing Script',cursive;color:#241d21;margin:0 0 20px}
.album-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.album-grid button{display:block;width:100%;padding:0;border:0;background:#eee;overflow:hidden}
.album-grid img{display:block;width:100%;height:258px;object-fit:cover}
.album-grid button:nth-child(1) img{object-position:center 31%}
.album-grid button:nth-child(2) img{object-position:center 28%}
.album-grid button:nth-child(5) img{object-position:center 30%}
.rsvp{padding-top:21px}
.thank-you>img{object-position:center 42%}
.thank-you:after{background:linear-gradient(transparent 36%,#32101fad)}
@media(max-width:360px){.name-plaque{right:-1px;transform:rotate(3deg) scale(.93)}.flower-cover-top{right:-39px}.album-grid img{height:236px}}

.invitation-info h2{font-size:16px;line-height:1.24}
.flower-calendar-top{left:-32px;width:90px}

/* Phông chữ theo mẫu ZenLove 221: Lora (nội dung), BucThu (chữ thư pháp), Arcittya Begatri (Chú rể/Cô dâu), Brygada (OUR LOVE), High Spirited (Just) */
:root{--body:'Lora Regular','Lora',Georgia,serif;--script:'BucThu','Dancing Script',cursive}
body{font-family:var(--body)}
.countdown-block>p{font:400 18px/1.25 var(--body);text-transform:lowercase;letter-spacing:.02em}
.countdown strong,.countdown span{font-family:var(--body)}
.countdown strong{font-weight:400}
.name-plaque span,.name-plaque em{font:400 27px/1.05 var(--script)}
.photo-paper figcaption{font:400 21px/1.05 'Arcittya Begatri','Dancing Script',cursive}
.photo-paper figcaption b{font:400 9px/1.2 var(--body);letter-spacing:.04em}
.story-note,.our-love>p,.rsvp-intro{font-family:var(--body);font-size:13.5px;line-height:1.5}
.married-words em{font:400 70px/.7 'High Spirited','Dancing Script',cursive}
.married-words strong{font:400 50px/1.05 var(--body);text-transform:lowercase}
.invitation-info h2{font:700 15px/1.3 var(--body)}
.family-columns h3{font:700 13px/1.2 var(--body);text-transform:uppercase}
.family-columns p{font:400 12.5px/1.45 var(--body)}
.couple b{font:400 45px/1.1 var(--script)}
.couple i{font:400 27px/1 var(--script);color:#211c20}
.ceremony-card,.ceremony-card p,.ceremony-card address,.ceremony-card a{font-family:var(--body)}
.ceremony-card h2,.ceremony-card strong{font-family:var(--body);font-weight:700;text-transform:uppercase}
.ceremony-card time{font:700 23px/1.2 var(--body)}
.our-love h2{font:400 43px/1 'Brygada','Brygada 1918',Georgia,serif}
.calendar-card>p{font:400 14px/1.3 var(--body);text-transform:uppercase}
.calendar-card>strong{font:400 40px/1.1 var(--script)}
.album-more h2{font:400 56px/1 var(--script)}
.thank-you h2{font:400 46px/1 var(--script)}
.thank-you strong{font:400 30px var(--script)}
.thank-you p{font:400 14px/1.45 var(--body)}
.rsvp h2{font:700 20px var(--body)}
.rsvp label,.rsvp legend,.rsvp form>button{font-family:var(--body)}
.modal h2{font-family:var(--script);font-weight:400}
.wish-float{font-family:var(--body)}
.love-banner img{object-position:center 50%}
.married-photo{height:430px}
.married-photo>img{object-position:center 62%}
.thank-you>img{object-position:center 30%}
.envelope-photo img{object-position:center 30%}

/* Album: 7 ảnh nổi bật + nút xem thêm mở slide đủ 37 ảnh */
.album-grid button.wide{grid-column:1/-1}
.album-grid button.wide img{height:230px}
.album-grid button:nth-child(n) img{object-position:center 30%}
.album-more .album-more-btn{margin:22px auto 0;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--wine);background:var(--wine);color:#fff;border-radius:100px;padding:10px 26px;font:400 14px var(--body);letter-spacing:.04em;box-shadow:0 4px 14px #590b2240}
.album-more .album-more-btn:hover{background:#fff;color:var(--wine)}
.album-modal{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#1a0710;color:#fff;overflow:hidden}
.album-modal[open]{display:flex;flex-direction:column}
.album-modal::backdrop{background:#1a0710}
.album-modal .modal-close{position:absolute;top:10px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;background:#ffffff1f;color:#fff;font-size:26px;line-height:1}
.album-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:#ffffff26;color:#fff;font-size:32px;line-height:1;padding-bottom:4px;backdrop-filter:blur(4px)}
.album-nav.prev{left:12px}.album-nav.next{right:12px}
.album-nav:hover{background:#ffffff40}
.album-thumbs{display:flex;gap:6px;overflow-x:auto;padding:10px 12px 16px;scrollbar-width:none;justify-content:flex-start}
.album-thumbs::-webkit-scrollbar{display:none}
.album-thumbs button{flex:0 0 46px;height:62px;padding:0;border:2px solid transparent;border-radius:4px;overflow:hidden;background:#000;opacity:.5;transition:opacity .2s}
.album-thumbs button.active{border-color:#f1c6d1;opacity:1}
.album-thumbs img{width:100%;height:100%;object-fit:cover}
@media(max-width:600px){.album-nav{width:36px;height:36px;font-size:26px;background:#0004}}

/* Việt hoá chữ, hòm thư, nhạc quay, bản đồ */
.countdown-block>p{text-transform:none;font-size:18px}
.married-words em{font:400 52px/.9 var(--script)}
.our-love h2{font-family:'Brygada 1918','Brygada',Georgia,serif;letter-spacing:.06em}
.name-plaque span{font-size:24px;white-space:nowrap}
.name-plaque em{font-size:22px}
.rsvp-float svg{display:block}
.music-toggle.spin{animation:music-spin 4s linear infinite}
.music-toggle.spin::after{display:none}
@keyframes music-spin{to{transform:rotate(360deg)}}

.album-stage{flex:1;min-height:0;padding:58px 12px 6px;touch-action:pan-y}
.album-stage img{width:100%;height:100%;object-fit:contain;transition:opacity .25s;-webkit-user-select:none;user-select:none}
.album-stage img.fading{opacity:.25}

/* Nút sáp vàng 3D như mẫu (ảnh assets/wax-seal-gold.webp) */
.wax-seal{width:68px;height:68px;top:286px;border:0;border-radius:0;box-shadow:none;background:url('assets/wax-seal-gold.webp') center/contain no-repeat}
.calendar-wrap:after{top:5px;width:68px;height:68px;border:0;border-radius:0;box-shadow:none;background:url('assets/wax-seal-gold.webp') center/contain no-repeat}
.calendar-card{padding-top:48px}

/* ===== Hiệu ứng chuyển động nhẹ nhàng ===== */
/* Mở đầu: ảnh trồi lên khỏi phong bì, thẻ tên đong đưa, dấu sáp lấp lánh */
.fx .envelope-photo{animation:rise-out 1.6s cubic-bezier(.2,.7,.2,1) both .2s}
.fx .name-plaque{animation:plaque-in 1.3s cubic-bezier(.2,.8,.2,1.2) both .9s}
.fx .name-plaque span,.fx .name-plaque em{animation:write 1.4s ease-out both}
.fx .name-plaque span:first-child{animation-delay:1.6s}.fx .name-plaque em{animation-delay:2.2s}.fx .name-plaque span:last-child{animation-delay:2.5s}
.fx .wax-seal{animation:seal-in .9s cubic-bezier(.3,1.6,.5,1) both .6s,seal-glow 3.5s ease-in-out infinite 2s}
.fx .flower{animation:sway 6s ease-in-out infinite alternate;transform-origin:50% 90%}
.fx .flower-cover-bottom,.fx .flower-calendar-bottom{animation-duration:7.5s;animation-delay:-2s}
.fx .flower-photo-pair{animation-duration:5s}
/* Ảnh lớn zoom chậm (Ken Burns) */
.thank-you{overflow:hidden}
.fx .married-photo>img,.fx .love-banner img,.fx .thank-you>img{animation:ken-burns 16s ease-in-out infinite alternate}
.fx .love-banner img{animation-duration:19s;transform-origin:30% 50%}
/* Đếm ngược lật số */
.countdown strong.flip{animation:flip .5s ease-out}
/* Ngày cưới trên lịch đập như tim */
.fx .dates span.marked{animation:beat 1.8s ease-in-out infinite}
.fx .dates span.marked+span.marked{animation-delay:.3s}
/* Dấu sáp trên lịch đong đưa như treo dây */
.fx .calendar-wrap:after{transform-origin:50% -20px;animation:pendulum 4s ease-in-out infinite}
/* Hiện dần khi cuộn tới */
.fx .reveal{transition:opacity 1s ease,translate 1s cubic-bezier(.2,.7,.2,1),scale 1s cubic-bezier(.2,.7,.2,1),clip-path 1.5s ease;transition-delay:var(--d,0s)}
.fx .fx-fade-up{opacity:0;translate:0 34px}
.fx .fx-from-left{opacity:0;translate:-60px 0}
.fx .fx-from-right{opacity:0;translate:60px 0}
.fx .fx-zoom-in{opacity:0;scale:.86}
.fx .fx-pop{opacity:0;scale:.6}
.fx .fx-bloom{opacity:0;scale:.3}
.fx .fx-flip-up{opacity:0;translate:0 50px;scale:.94}
.fx .fx-write{opacity:0}
.fx .reveal.in{opacity:1;translate:0 0;scale:1}
.fx .fx-write.in{animation:write 1.6s ease-out both;animation-delay:var(--d,0s)}
.fx .fx-pop.in{transition-timing-function:ease,cubic-bezier(.3,1.6,.5,1),cubic-bezier(.3,1.6,.5,1)}
/* TÌNH YÊU: từng chữ rơi xuống */
.fx .fx-letters .letter{display:inline-block;opacity:0;translate:0 -40px;rotate:-12deg}
.fx .fx-letters.in .letter{animation:letter-drop .8s cubic-bezier(.3,1.5,.5,1) forwards;animation-delay:calc(var(--i)*.09s)}
/* Cánh hoa rơi */
.petals{position:fixed;inset:0 max(0px,calc((100vw - 430px)/2));pointer-events:none;z-index:20;overflow:hidden}
.petals i{position:absolute;top:-30px;left:var(--x);width:var(--s);height:calc(var(--s)*1.35);border-radius:80% 0 80% 0;opacity:.75;animation:petal-fall var(--t) linear infinite var(--delay)}
.petals .p1{background:linear-gradient(135deg,#9c1d3d,#5a0b22)}
.petals .p2{background:linear-gradient(135deg,#f6d7de,#e3a3b3)}
.petals .p3{background:linear-gradient(135deg,#fff,#f0e4d2)}
@keyframes rise-out{from{opacity:0;translate:0 110px;scale:.92}to{opacity:1;translate:0 0;scale:1}}
@keyframes plaque-in{from{opacity:0;translate:40px 30px;rotate:18deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes write{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -10% -20% 0)}}
@keyframes seal-in{from{opacity:0;scale:2.2}to{opacity:1;scale:1}}
@keyframes seal-glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18) drop-shadow(0 0 6px #ffe2a0aa)}}
@keyframes sway{from{rotate:-3deg}to{rotate:3deg}}
@keyframes ken-burns{from{scale:1}to{scale:1.09}}
@keyframes flip{from{opacity:.2;translate:0 -8px;rotate:x 80deg}to{opacity:1;translate:0 0;rotate:x 0deg}}
@keyframes beat{0%,100%{scale:1}15%{scale:1.15}30%{scale:1}45%{scale:1.1}}
@keyframes pendulum{0%,100%{rotate:-4deg}50%{rotate:4deg}}
@keyframes letter-drop{to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes petal-fall{0%{translate:0 0;rotate:0deg}25%{translate:var(--sway) 28vh;rotate:120deg}50%{translate:0 56vh;rotate:220deg}75%{translate:var(--sway) 84vh;rotate:300deg}100%{translate:0 112vh;rotate:400deg}}
@media(prefers-reduced-motion:reduce){.petals{display:none}}

/* Nút hộp quà kèm chữ nhỏ "Mừng cưới online" */
.gift-float{width:auto;height:43px;border-radius:24px;display:flex;align-items:center;gap:6px;padding:0 13px 0 5px}
.gift-float .gift-icon{width:33px;height:33px;display:grid;place-items:center;border-radius:50%;background:#ffffff1f;font-size:18px}
.gift-float small{font:500 10px/1.15 'Be Vietnam Pro',sans-serif;text-align:left;letter-spacing:.02em}
.fx .gift-float .gift-icon{animation:gift-wiggle 3s ease-in-out infinite}
@keyframes gift-wiggle{0%,80%,100%{rotate:0deg}85%{rotate:-12deg}90%{rotate:10deg}95%{rotate:-6deg}}

/* Màn "Chạm để mở thiệp" */
html.locked{overflow:hidden}
.intro{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#1c040d;transition:opacity .9s ease,visibility 0s .9s;cursor:pointer}
.intro::before{content:"";position:absolute;inset:0;margin:auto;width:min(100%,430px);background:linear-gradient(180deg,#3b0a1acc,#1c040d99 45%,#1c040df0),url('assets/album/anh-08.webp') center 22%/cover}
.intro-content{position:relative;text-align:center;color:#fff;padding:24px;transition:scale .9s ease,translate .9s ease}
.intro-kicker{margin:0 0 6px;font:400 12px var(--body);letter-spacing:.35em;text-transform:uppercase;color:#f1d9df}
.intro-names{margin:0;font:400 48px/1.15 var(--script);text-shadow:0 3px 14px #0009}
.intro-names em{display:block;font-size:34px;color:#f1c98a}
.intro-date{margin:12px 0 30px;font:400 16px var(--body);letter-spacing:.22em}
.intro-seal{display:block;width:104px;height:104px;margin:0 auto;border:0;padding:0;background:url('assets/wax-seal-gold.webp') center/contain no-repeat;cursor:pointer;animation:intro-pulse 1.8s ease-in-out infinite}
.intro-seal:focus-visible{outline:2px solid #f1c98a;outline-offset:6px;border-radius:50%}
.intro-hint{margin:12px 0 0;font:italic 400 15px var(--body);color:#f6e3c4;animation:intro-blink 1.8s ease-in-out infinite}
.intro.hide{opacity:0;visibility:hidden}
.intro.hide .intro-content{scale:1.15;translate:0 -20px}
@keyframes intro-pulse{0%,100%{scale:1;filter:brightness(1)}50%{scale:1.08;filter:brightness(1.15) drop-shadow(0 0 12px #ffd98a88)}}
@keyframes intro-blink{0%,100%{opacity:.55}50%{opacity:1}}
/* Hiệu ứng mở đầu chỉ chạy sau khi chạm mở thiệp */
html.fx:not(.opened) .envelope-photo,html.fx:not(.opened) .name-plaque,html.fx:not(.opened) .name-plaque span,html.fx:not(.opened) .name-plaque em,html.fx:not(.opened) .wax-seal{animation-play-state:paused}

/* ===== Form xác nhận, lời chúc, cảm ơn: giao diện mới ===== */
.rsvp{padding:30px 20px 70px}
.rsvp-intro{font:400 14px/1.6 var(--body);color:#4a3a3f;margin-bottom:46px}
.rsvp form,.modal{--field:#fffdfb;--line:#e6d5d1}
.rsvp form{position:relative;padding:52px 22px 26px;border-radius:18px;background:linear-gradient(#fffaf5,#fdf4ef);box-shadow:0 14px 40px #59102a1f,0 2px 6px #59102a14;border:1px solid #efdfd8}
.rsvp form::before{content:"";position:absolute;inset:8px;border:1px solid #e7cfc4;border-radius:12px;pointer-events:none}
.form-seal{position:absolute;left:50%;top:-34px;translate:-50% 0;width:68px;height:68px;background:url('assets/wax-seal-gold.webp') center/contain no-repeat}
.rsvp h2,.modal h2{font:400 40px/1.1 var(--script);color:var(--wine);text-align:center;margin:0 0 4px}
.form-sub,.modal>p{font:italic 400 13px/1.5 var(--body);color:#8a6d73;text-align:center;margin:0 0 20px}
.rsvp label,.rsvp legend,.modal form label{display:block;font:500 11px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#8a6d73;margin:16px 0 7px}
.rsvp input[type=text],.rsvp select,.modal input,.modal textarea{width:100%;height:46px;padding:0 15px;border:1px solid var(--line);border-radius:12px;background:var(--field);font:400 15px var(--body);color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s;letter-spacing:0;text-transform:none}
.modal textarea{height:auto;min-height:110px;padding:12px 15px;line-height:1.5}
.rsvp input[type=text]:focus,.rsvp select:focus,.modal input:focus,.modal textarea:focus{border-color:#b77a88;box-shadow:0 0 0 4px #59102a14}
.rsvp input::placeholder,.modal input::placeholder,.modal textarea::placeholder{color:#b9a6aa;font-style:italic}
.rsvp select{appearance:none;-webkit-appearance:none;background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23590b22' stroke-width='1.6'/%3E%3C/svg%3E") right 15px center no-repeat}
.rsvp select:disabled{opacity:.45}
.rsvp fieldset{margin:6px 0 0;padding:0;border:0}
.rsvp fieldset label{position:relative;display:flex;align-items:center;gap:10px;margin:8px 0 0;padding:12px 15px;border:1px solid var(--line);border-radius:12px;background:var(--field);font:400 14px/1.35 var(--body);letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer;transition:all .2s}
.rsvp fieldset input[type=radio]{appearance:none;-webkit-appearance:none;flex:0 0 18px;width:18px;height:18px;margin:0;border:1.5px solid #c9a9b0;border-radius:50%;display:grid;place-items:center}
.rsvp fieldset input[type=radio]:checked{border-color:var(--wine)}
.rsvp fieldset input[type=radio]:checked::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--wine)}
.rsvp fieldset label:has(input:checked){border-color:#b77a88;background:#fbeef0;box-shadow:0 0 0 3px #59102a10}
.rsvp form>button,.modal form>button,.thanks-back{display:block;width:100%;height:50px;margin-top:24px;border:0;border-radius:999px;background:linear-gradient(135deg,#7a1533,#4e081d);color:#fff;font:500 15px var(--body);letter-spacing:.08em;box-shadow:0 8px 20px #59102a40;transition:translate .2s,box-shadow .2s}
.rsvp form>button:hover,.modal form>button:hover,.thanks-back:hover{translate:0 -2px;box-shadow:0 12px 26px #59102a55}
.rsvp form>button:active,.modal form>button:active{translate:0 0}
.form-status{min-height:0;margin:10px 0 0;text-align:center;font:400 13px var(--body);color:#b0303f}
.form-status:empty{display:none}
/* Popup lời chúc & cảm ơn */
.modal{width:min(380px,calc(100vw - 32px));padding:50px 24px 26px;border-radius:20px;background:linear-gradient(#fffaf5,#fdf2ed);overflow:visible;box-shadow:0 24px 60px #1c040d80}
.modal::before{content:"";position:absolute;inset:8px;border:1px solid #e7cfc4;border-radius:14px;pointer-events:none}
.modal .form-seal{top:-34px}
.modal-close{z-index:2;font-family:var(--body);color:#8a6d73}
.modal form{position:relative}
.modal form label{text-align:left}
#gift-dialog{padding-top:34px}
.thanks-modal{text-align:center}
.thanks-modal h2{font-size:44px}
.thanks-modal #thanks-message{font:400 15px/1.65 var(--body);font-style:normal;color:#4a3a3f;margin:6px 0 18px}
.thanks-sign{display:block;font:400 30px var(--script);color:var(--wine)}
.thanks-sign em{color:var(--gold);font-style:normal}
.thanks-back{position:relative;margin-top:20px}
.thanks-modal[open]{animation:thanks-in .55s cubic-bezier(.2,.8,.2,1.15)}
.thanks-modal[open] .form-seal{animation:seal-in .8s cubic-bezier(.3,1.6,.5,1) both .15s}
@keyframes thanks-in{from{opacity:0;scale:.85;translate:0 30px}to{opacity:1;scale:1;translate:0 0}}
/* Trang cảm ơn riêng (khi trình duyệt không chạy JavaScript) */
.thank-you-page{background:radial-gradient(circle at 50% 20%,#7a1533,#3a0716 70%)}
.thank-you-page .thanks-card{position:relative;max-width:380px;padding:56px 26px 30px;border-radius:20px;background:linear-gradient(#fffaf5,#fdf2ed);color:var(--ink);box-shadow:0 24px 60px #0007}
.thank-you-page .thanks-card::before{content:"";position:absolute;inset:8px;border:1px solid #e7cfc4;border-radius:14px;pointer-events:none}
.thank-you-page h1{font:400 48px/1.1 var(--script);color:var(--wine);margin:0 0 10px}
.thank-you-page p{font:400 15px/1.65 var(--body);color:#4a3a3f;margin:0 0 18px}
.thank-you-page .pill-button{position:relative;display:inline-block;margin-top:18px;padding:13px 30px;border-radius:999px;background:linear-gradient(135deg,#7a1533,#4e081d);color:#fff;font:500 14px var(--body);letter-spacing:.08em;text-decoration:none}
.modal{overflow:auto;max-height:calc(100dvh - 40px)}
.thanks-modal{overflow:visible}
.modal .thanks-sign{display:block;font:400 30px var(--script);color:var(--wine)}

/* ===== Phong thư ở màn mở thiệp ===== */
.intro-kicker{margin-bottom:26px}
.envelope{position:relative;width:min(300px,78vw);aspect-ratio:3/2;margin:70px auto 0;perspective:900px}
.envelope>*{position:absolute}
.env-back{inset:0;border-radius:6px;background:linear-gradient(#4f0a1f,#3c0717);box-shadow:0 18px 40px #0009}
.env-letter{left:6%;right:6%;top:6%;height:88%;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px;border-radius:4px;background:linear-gradient(#fffaf4,#f6ebe1);color:var(--ink);box-shadow:0 2px 8px #0003;transition:translate .9s cubic-bezier(.2,.8,.2,1) .75s}
.env-letter::before{content:"";position:absolute;inset:6px;border:1px solid #e3cfc3;border-radius:3px}
.env-letter span{font:500 9px var(--body);letter-spacing:.25em;text-transform:uppercase;color:#8a6d73}
.env-letter strong{font:400 26px/1.1 var(--script);color:var(--wine);text-align:center}
.env-letter strong em{display:block;font-size:18px;color:var(--gold);font-style:normal}
.env-letter small{font:400 10px var(--body);letter-spacing:.2em;color:#8a6d73}
.env-front{inset:0;z-index:3;border-radius:6px;background:linear-gradient(160deg,#8d1b3c,#5a0b22);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:13%}
.env-front::before{content:"";position:absolute;inset:0;background:linear-gradient(30deg,transparent 49.6%,#ffffff1a 50%,transparent 50.4%),linear-gradient(-30deg,transparent 49.6%,#ffffff1a 50%,transparent 50.4%)}
.env-names{position:relative;font:400 24px var(--script);color:#f6dfb0;text-shadow:0 1px 3px #0006}
.env-names em{font-style:normal;color:#e8c27a}
.env-flap{left:0;right:0;top:0;height:58%;z-index:4;background:linear-gradient(#9a2246,#6a102b);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .7s cubic-bezier(.4,0,.2,1) .2s,z-index 0s .55s}
.envelope .intro-seal{left:50%;top:58%;z-index:5;width:76px;height:76px;margin:0;translate:-50% -50%;transition:scale .35s ease,opacity .35s ease}
.intro-date{margin:26px 0 8px}
.intro.opening{cursor:default}
.intro.opening .intro-seal{animation:none;scale:1.6;opacity:0}
.intro.opening .env-flap{transform:rotateX(180deg);z-index:1}
.intro.opening .env-letter{translate:0 -62%}
.intro.opening .intro-hint{animation:none;opacity:0;transition:opacity .3s}

/* ===== Phong thư nhỏ trong khung cảm ơn: thư gấp vào, nắp đóng, đóng dấu ===== */
.thanks-modal{padding-top:62px}
.mini-env{position:absolute;left:50%;top:-46px;translate:-50% 0;width:104px;height:70px;perspective:500px}
.mini-env i{position:absolute;display:block}
.me-back{inset:0;border-radius:4px;background:#4f0a1f;box-shadow:0 8px 18px #59102a55}
.me-letter{left:10%;right:10%;top:8%;height:84%;z-index:2;border-radius:2px;background:#fffaf4 repeating-linear-gradient(#fffaf4 0 7px,#ead9cf 7px 8px);background-clip:content-box;padding:10px 8px;box-shadow:0 1px 4px #0003;background-color:#fffaf4}
.me-front{inset:0;z-index:3;border-radius:4px;background:linear-gradient(160deg,#8d1b3c,#5a0b22);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%)}
.me-flap{left:0;right:0;top:0;height:58%;z-index:4;background:linear-gradient(#9a2246,#6a102b);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top}
.me-seal{left:50%;top:58%;z-index:5;width:30px;height:30px;translate:-50% -50%;background:url('assets/wax-seal-gold.webp') center/contain no-repeat}
.thanks-modal[open] .me-letter{animation:me-letter-in .7s cubic-bezier(.3,.7,.3,1) both .15s}
.thanks-modal[open] .me-flap{animation:me-flap-close .5s ease-in-out both .8s}
.thanks-modal[open] .me-seal{animation:me-stamp .45s cubic-bezier(.3,1.6,.5,1) both 1.25s}
@keyframes me-letter-in{from{translate:0 -95%}to{translate:0 0}}
@keyframes me-flap-close{0%{transform:rotateX(180deg);z-index:1}49%{z-index:1}50%{z-index:4}100%{transform:rotateX(0);z-index:4}}
@keyframes me-stamp{from{scale:2.4;opacity:0}to{scale:1;opacity:1}}
.intro::before{filter:blur(3px) brightness(.85);transform:scale(1.04)}
.env-front{background:linear-gradient(160deg,#7a1533,#4a071b);padding-bottom:6%}
.env-flap{background:linear-gradient(#86193a,#5a0b22)}
.envelope .intro-seal{width:66px;height:66px;top:56%}
.env-names{font-size:22px}

/* ===== Tạo link mời riêng ===== */
.invite-link-btn{position:fixed;top:14px;left:max(14px,calc((100vw - 430px)/2 + 14px));z-index:30;height:37px;padding:0 14px;border:1.5px solid #fff;border-radius:999px;background:var(--wine);color:#fff;font:500 12px var(--body);letter-spacing:.03em;box-shadow:0 2px 8px #421a2990}
.invite-link{min-height:46px;padding:12px 14px;border:1px dashed #c9a9b0;border-radius:12px;background:#fff;font:400 13px/1.45 var(--body);color:var(--wine);word-break:break-all;text-align:left}
.invite-actions{display:flex;gap:10px;margin-top:18px}
.invite-actions button{flex:1;height:46px;border-radius:999px;font:500 14px var(--body);letter-spacing:.04em}
#copy-invite{border:0;background:linear-gradient(135deg,#7a1533,#4e081d);color:#fff;box-shadow:0 8px 20px #59102a40}
#share-invite{border:1.5px solid var(--wine);background:#fff;color:var(--wine)}
.invite-status{margin:12px 0 0;text-align:center;font:400 13px var(--body);color:#4f7a53;min-height:1em}
.intro-guest{margin:-14px 0 20px;font:400 36px/1.15 var(--script);color:#f6dfb0;text-shadow:0 2px 10px #0008}
.invitation-info h2 .guest-name{display:block;margin:6px 0 8px;font:400 34px/1.2 var(--script);color:var(--wine);text-transform:none;letter-spacing:0}
/* Nút tạo link mời: chỉ còn cây viết nhỏ */
.invite-link-btn{width:30px;height:30px;padding:0;display:grid;place-items:center;border:1px solid #ffffffb3;background:#59102a8c;box-shadow:0 1px 5px #421a2966;opacity:.75}
.invite-link-btn:hover,.invite-link-btn:focus-visible{opacity:1}