@font-face{font-family:"UTM Sloop";src:url("assets/utm-sloop.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Great Vibes";src:url("assets/great-vibes.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Ephesis";src:url("assets/ephesis.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Playfair";src:url("assets/playfair.woff2") format("woff2");font-display:swap}
:root{--red:#b50918;--bright-red:#ed1c24;--gold:#d4aa48;--ink:#151515;--paper:#fff}
*{box-sizing:border-box}
html{background:#f1f1f1;scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:Georgia,"Times New Roman",serif;background:#f1f1f1;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
.invitation{width:420px;max-width:100%;margin:0 auto;background:#fff;box-shadow:0 0 28px rgba(0,0,0,.12);overflow:hidden}
.panel{position:relative;width:420px;max-width:100%;background-color:#fff;background-image:url("assets/frame.webp");background-position:top center;background-size:420px 800px;background-repeat:repeat-y;overflow:hidden}
.hero{height:800px}.announcement{height:915px}.meal{height:174px}.ceremony{height:209px}.venue{height:216px}.save-date{height:344px}.rsvp{height:405px}.gallery-top{height:269px}.gallery-middle{height:273px}.gallery-bottom{height:287px}
.eyebrow,.couple-names,.hero-time,.hero-date,.guest-label,.guest-name,.announcement-title,.announcement-names,.parents,.meal-card,.ceremony p,.ceremony h2,.venue-heading,.venue-card,.save-title,.rsvp-title,.album-title{position:absolute;margin:0;text-align:center}
.eyebrow{top:39px;left:157px;width:110px;font:20px/30px Arial,sans-serif;letter-spacing:.2px}
.couple-names{top:75px;left:14px;width:393px;font:44px/55px "UTM Sloop","Great Vibes",cursive;font-weight:400;white-space:nowrap}
.wedding-symbol{position:absolute;top:146px;left:174px;width:72px;color:#c70013;text-align:center;font:700 64px/72px serif;transform:scaleX(.82)}
.knot{position:absolute;top:192px;color:#e79236;font:38px/1 "Great Vibes",cursive}.knot-left{left:61px}.knot-right{right:61px}
.hero-time{top:255px;left:115px;width:191px;font:16px/24px Arial,sans-serif}
.hero-line{position:absolute;top:285px;left:110px;width:200px;border-top:2px solid #000}
.hero-date{top:292px;left:105px;width:210px;font:700 27px/30px "UTM Sloop",Arial,sans-serif;letter-spacing:4px}
.hero-photo{position:absolute;top:346px;left:63px;width:294px;height:361px;margin:0;border:4px solid var(--red);overflow:hidden;background:#eee}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.guest-label{top:723px;left:105px;width:210px;font:17px/26px "Playfair",Georgia,serif}
.guest-name{top:748px;left:22px;width:376px;color:#e01b26;font:36px/45px "UTM Sloop","Great Vibes",cursive}
.guest-line{position:absolute;top:790px;left:151px;width:118px;border-top:1px dotted #000}
.lantern{position:absolute;border-radius:50%;background:#e62928;border:1px solid #f5a547;box-shadow:inset 5px 0 rgba(255,196,62,.22),inset -5px 0 rgba(130,0,0,.18)}
.lantern::after{content:"";position:absolute;left:50%;top:100%;height:20px;border-left:1px solid #d88b21}
.lantern-one{top:694px;right:48px;width:23px;height:33px}.lantern-two{top:724px;right:70px;width:31px;height:43px}
.seal{position:absolute;top:17px;left:174px;width:72px;height:103px;padding-top:18px;border:1px solid #e87579;border-radius:50%;color:#e61f2b;text-align:center;font:700 48px/54px serif}
.seal::after{content:"◇";position:absolute;top:77px;left:20px;font:34px/1 "Great Vibes"}
.announcement-title{top:144px;left:63px;width:295px;font:16px/26px "Playfair",Georgia,serif}
.announcement-names{top:178px;left:112px;width:196px;font:43px/39px "UTM Sloop","Great Vibes",cursive;font-weight:400}
.announcement-names span{font-size:30px}
.parents{top:343px;font-size:14px;line-height:21px;font-weight:700}.parents strong{text-decoration:underline;font-size:13px;letter-spacing:.3px}.parents-bride{left:16px;width:205px}.parents-groom{left:210px;width:191px}
.family-photo{position:absolute;top:426px;left:41px;width:339px;height:226px;object-fit:cover;border:4px solid var(--red)}
.gold-divider{position:absolute;top:653px;left:125px;width:170px;height:57px;object-fit:contain}
.portrait{position:absolute;width:115px;height:170px;object-fit:cover;border:2px solid var(--red)}
.portrait-left{top:726px;left:29px}.portrait-center{top:709px;left:153px}.portrait-right{top:726px;left:277px}
.meal-card{top:15px;left:24px;width:372px;height:143px;border:1px solid #7d0e18;border-radius:17px;background:#fffafa;padding-top:7px}
.meal-card h2{margin:0;font-size:20px;line-height:30px;font-style:italic;font-weight:700}.meal-card p{margin:1px 0 0;font-size:14px}.meal-card strong{display:block;margin-top:1px;font:700 26px/38px Arial,sans-serif;letter-spacing:5px}.meal-card em{display:block;margin-top:0;font-size:13px}
.ceremony-title{top:10px;left:65px;width:290px;font-size:19px;line-height:24px}.ceremony-title span{font-size:16px}
.ceremony-grid{position:absolute;inset:0}.ceremony-hour{top:106px;left:67px;width:88px;font:16px/24px Arial,sans-serif}.ceremony-weekday{top:69px;left:166px;width:89px;font:16px/24px Arial,sans-serif}.ceremony-day{top:82px;left:176px;width:68px;font:700 42px/60px Arial,sans-serif}.ceremony-month{top:143px;left:162px;width:96px;font:16px/24px Arial,sans-serif}.ceremony-year{top:106px;left:277px;width:104px;font:16px/24px Arial,sans-serif}
.ceremony-hour::after,.ceremony-year::before{content:"";position:absolute;top:-1px;height:77px;border-left:1px solid #555}.ceremony-hour::after{right:-9px}.ceremony-year::before{left:-14px}
.lunar-date{top:177px;left:29px;width:356px;font-size:14px;font-weight:700;font-style:italic;line-height:20px}
.venue-heading{top:0;left:52px;width:317px;font:16px/24px Arial,sans-serif}
.venue-card{top:37px;left:49px;width:322px;height:168px;border:2px solid #c90e1d;border-radius:20px;background:#fff;padding-top:9px}
.venue-card h2{margin:0;font-size:20px;line-height:32px}.venue-card p{margin:0;font-size:16px;line-height:24px}.venue-card a{display:inline-flex;align-items:center;justify-content:center;width:153px;height:38px;margin-top:10px;border-radius:22px;color:#fff;background:#f02534;box-shadow:0 4px 5px rgba(0,0,0,.25);text-decoration:none;font:italic 700 15px/1 Georgia,serif;animation:pulse 3s infinite}
.save-title{top:0;left:60px;width:300px;color:#ba121d;font:34px/39px Georgia,serif;font-weight:400}
.calendar{position:absolute;top:72px;left:52px;width:316px;height:255px;border:2px solid #b50d19;background:#fff;padding:6px 10px 8px;font-family:Arial,sans-serif}
.weekdays,.days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.weekdays{font-size:18px;line-height:28px}.days{grid-auto-rows:34px;padding-top:4px;font-size:14px}.days span{position:relative;display:flex;align-items:center;justify-content:center}.heart-date{z-index:1}.heart-date::before{content:"♡";position:absolute;z-index:-1;top:-7px;left:1px;color:#d81723;font:36px/34px Arial,sans-serif;transform:rotate(-8deg)}
.rsvp-title{top:0;left:80px;width:260px;font:31px/28px "UTM Sloop","Great Vibes",cursive;font-weight:400}.rsvp-title span{font-size:26px}
.rsvp-form{position:absolute;top:103px;left:57px;width:306px;height:232px;padding:21px 25px;border-radius:25px;background:#e3232a}
.rsvp-form label{display:block;margin:0 0 10px}.rsvp-form input,.rsvp-form select{width:255px;height:29px;border:1px solid #c7c7c7;border-radius:12px;background:#fff;padding:0 10px;color:#ed1c24;font:13px Arial,sans-serif;outline:none}.rsvp-form input::placeholder{color:#ed1c24;opacity:1}.rsvp-form select{appearance:auto}.rsvp-form button{position:absolute;left:77px;bottom:21px;width:151px;height:34px;border:0;border-radius:12px;background:#fff;color:#111;font:700 16px Arial,sans-serif;cursor:pointer}.rsvp-form button:active{transform:translateY(2px)}
.form-status{position:absolute;bottom:22px;left:45px;width:330px;margin:0;text-align:center;color:#a10d1a;font:700 13px Arial,sans-serif;opacity:0;transition:opacity .25s}.form-status.visible{opacity:1}
.album-title{top:1px;left:29px;width:185px;font:31px/40px "UTM Sloop","Great Vibes",cursive;font-weight:400;text-align:left}.album-divider{position:absolute;top:1px;left:202px;width:179px;height:42px;object-fit:contain}
.gallery-item{position:absolute;margin:0;padding:0;border:0;background:#eee;overflow:hidden;cursor:zoom-in}.gallery-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.gallery-item:hover img{transform:scale(1.035)}
.g1{top:66px;left:27px;width:112px;height:167px}.g2{top:66px;left:145px;width:131px;height:194px}.g3{top:93px;left:282px;width:112px;height:167px}
.g4{top:0;left:27px;width:178px;height:265px}.g5{top:0;left:215px;width:178px;height:265px}
.g6{top:0;left:27px;width:186px;height:125px}.g6 img{object-position:center 55%}.g7{top:132px;left:27px;width:186px;height:144px}.g7 img{object-position:center 45%}.g8{top:0;left:215px;width:178px;height:277px}
.closing{position:relative;width:420px;max-width:100%;height:534px;overflow:hidden;background:#fff}.closing-photo{position:absolute;top:0;left:0;width:420px;height:494px;object-fit:cover;object-position:center}.closing-overlay{position:absolute;top:271px;left:0;width:100%;height:146px;background:rgba(0,0,0,.44);color:#fff;text-align:center}.closing-overlay img{position:absolute;top:11px;left:17px;width:386px;height:75px;object-fit:contain;filter:brightness(0) invert(1)}.closing-overlay p{margin:86px 0 0;font:35px/52px "Ephesis","Great Vibes",cursive;font-weight:700}
.closing footer{position:absolute;left:0;bottom:0;width:100%;height:47px;border-top:1px solid #111;background:#fff;font:14px Arial,sans-serif}.closing footer strong{position:absolute;top:15px;left:163px;width:252px;white-space:nowrap}.social{position:absolute;top:9px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;text-decoration:none;font:700 22px Arial,sans-serif}.facebook{left:45px;color:#fff;background:#3c5a9a}.zalo{left:89px;color:#1671d9;border:2px solid #1671d9;font-size:9px;background:#fff}.tiktok{left:124px;color:#fff;background:#050505;text-shadow:2px 0 #00d7d7,-2px 0 #ff165d}
.music-toggle{position:fixed;z-index:20;left:max(14px,calc(50% - 196px));bottom:18px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25);overflow:hidden;cursor:pointer}.music-toggle img{width:100%;height:100%;object-fit:cover}.music-toggle.playing{animation:spin 8s linear infinite}
.lightbox{width:min(92vw,720px);max-width:none;padding:0;border:0;border-radius:12px;background:#111;box-shadow:0 20px 70px rgba(0,0,0,.5)}.lightbox::backdrop{background:rgba(0,0,0,.82)}.lightbox img{display:block;max-width:92vw;max-height:88vh;margin:auto;object-fit:contain}.lightbox-close{position:absolute;z-index:2;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font:30px/34px Arial;cursor:pointer}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}.reveal.in-view{opacity:1;transform:none}.hero .reveal{transition-duration:1.2s}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.music-toggle,.venue-card a{animation:none!important}.gallery-item img{transition:none}}
@media (max-width:419px){.invitation{transform-origin:top left;width:420px;max-width:none;transform:scale(calc(100vw / 420));margin-bottom:calc(4426px * (100vw / 420 - 1))}body{overflow-x:hidden}.music-toggle{left:14px}}