/* ============================================
   RESET & GLOBAL
   ============================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
    --pink:#ffd1dc;
    --pink-deep:#e07a8b;
    --pink-bg:#fce4ec;
    --pink-light:#fff0f3;
    --cream:#fffaf5;
    --text:#333;
    --text-light:#666;
    --font-serif:'Playfair Display',serif;
    --font-cursive:'Great Vibes',cursive;
    --font-body:'Montserrat',sans-serif;
    --font-elegant:'Cormorant Garamond',serif;
}
html{scroll-behavior:smooth}
body{
    font-family:var(--font-body);
    color:var(--text);
    background:var(--cream);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

/* ============================================
   BÌA MỞ THIỆP (ENVELOPE) - HIỆN ĐẦU TIÊN
   ============================================ */
.envelope-container{
    position:fixed;
    top:0;left:0;
    width:100vw;height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:1000;
    overflow:hidden;
}
.envelope-bg{
    position:absolute;top:0;left:0;width:100%;height:100%;
    background:linear-gradient(135deg,#fffaf5 0%,#fce4ec 40%,#fff0f3 100%);
    z-index:0;
}
/* Hoa SVG ở góc */
.floral{position:absolute;z-index:1;pointer-events:none}
.floral-top-left{top:-10px;left:-10px;width:220px;height:220px;opacity:0.85}
.floral-bottom-right{bottom:-10px;right:-10px;width:220px;height:220px;opacity:0.85}

/* Card mở thiệp ở giữa */
.envelope-content{
    position:relative;z-index:10;
    text-align:center;
    background:rgba(255,255,255,0.88);
    padding:3rem 3.5rem;
    border-radius:20px;
    box-shadow:0 10px 40px rgba(224,122,139,0.12);
    backdrop-filter:blur(8px);
    max-width:90%;width:420px;
    animation:floatUp 1.2s ease-out;
}
@keyframes floatUp{
    0%{opacity:0;transform:translateY(50px)}
    100%{opacity:1;transform:translateY(0)}
}

.heart-icon-wrapper{margin-bottom:18px}
.heart-icon{
    display:inline-flex;justify-content:center;align-items:center;
    width:42px;height:42px;
    background:linear-gradient(135deg,#ffd1dc,#ffb6c1);
    border-radius:50%;color:#fff;font-size:1.1rem;
    box-shadow:0 4px 15px rgba(255,182,193,0.5);
    animation:pulse 2s infinite;
}
@keyframes pulse{
    0%{transform:scale(1);box-shadow:0 4px 15px rgba(255,182,193,0.5)}
    50%{transform:scale(1.12);box-shadow:0 4px 25px rgba(255,182,193,0.8)}
    100%{transform:scale(1);box-shadow:0 4px 15px rgba(255,182,193,0.5)}
}
.envelope-names{
    font-family:var(--font-serif);font-size:2rem;font-weight:400;
    line-height:1.4;color:#2c2c2c;margin-bottom:10px;letter-spacing:1px;
}
.envelope-names .amp{
    font-family:var(--font-cursive);font-size:2.4rem;color:var(--pink-deep);
}
.divider-line{display:flex;align-items:center;justify-content:center;margin:18px 0;opacity:0.5}
.dash-line{
    height:1px;width:55px;
    background:repeating-linear-gradient(to right,transparent,transparent 4px,#999 4px,#999 8px);
}
.divider-line i{margin:0 14px;font-size:0.85rem;color:var(--pink-deep)}
.envelope-date{font-family:var(--font-serif);font-size:1rem;margin-bottom:28px;letter-spacing:2px;color:#555}

/* NÚT MỞ THIỆP - LÀM NỔI BẬT */
.open-btn{
    display:inline-block;
    background:linear-gradient(135deg,#ffd1dc,#ffb6c1);
    color:#2c2c2c;border:none;
    padding:14px 42px;border-radius:30px;
    font-family:var(--font-body);font-size:1.05rem;font-weight:600;
    cursor:pointer;
    box-shadow:0 6px 20px rgba(255,182,193,0.4);
    transition:all 0.3s ease;
    position:relative;
    letter-spacing:1px;
    text-decoration:none;
    z-index:20;
}
.open-btn:hover{
    transform:translateY(-3px);
    background:linear-gradient(135deg,#ffc0cb,#ff9db5);
    box-shadow:0 8px 25px rgba(255,182,193,0.6);
}
.open-btn:active{
    transform:translateY(0);
}

/* ============================================
   NỘI DUNG CHÍNH - ẨN MẶC ĐỊNH
   ============================================ */
.main-content{
    display:none;  /* Ẩn mặc định, JS sẽ hiện */
    opacity:0;
}

.slide{
    min-height:100vh;width:100%;
    display:flex;justify-content:center;align-items:center;
    position:relative;overflow:hidden;
}

.section-title{text-align:center;margin-bottom:45px}
.section-title h2{font-family:var(--font-cursive);font-size:3.2rem;color:var(--pink-deep);font-weight:400;margin-bottom:8px}
.section-title p{font-size:0.85rem;text-transform:uppercase;letter-spacing:4px;color:var(--text-light)}

/* ============================================
   SLIDE 1: THE WEDDING OF
   ============================================ */
.slide-cover{
    background:linear-gradient(180deg,#fff 0%,#fff5f7 100%);
    flex-direction:column;padding:40px 20px;
}
.watercolor-blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.blob-top{
    top:-60px;right:-40px;width:350px;height:250px;
    background:radial-gradient(ellipse,rgba(252,228,236,0.6) 0%,transparent 70%);
}
.blob-bottom{
    bottom:-40px;left:-60px;width:300px;height:200px;
    background:radial-gradient(ellipse,rgba(252,228,236,0.5) 0%,transparent 70%);
}
.cover-floral{
    position:absolute;width:200px;height:200px;z-index:1;
    opacity:0.9;pointer-events:none;
}
.cover-floral-tl{
    top:20px;left:20px;
    background:radial-gradient(circle at 30% 30%,#f4c2c2 0%,transparent 50%),
               radial-gradient(circle at 60% 20%,#e8a0a0 0%,transparent 40%),
               radial-gradient(circle at 20% 60%,#8fbc8f 0%,transparent 45%),
               radial-gradient(circle at 50% 50%,#a8c8a0 0%,transparent 35%);
}
.cover-floral-br{
    bottom:20px;right:20px;
    background:radial-gradient(circle at 70% 70%,#f4c2c2 0%,transparent 50%),
               radial-gradient(circle at 40% 80%,#e8a0a0 0%,transparent 40%),
               radial-gradient(circle at 80% 40%,#8fbc8f 0%,transparent 45%),
               radial-gradient(circle at 50% 50%,#a8c8a0 0%,transparent 35%);
}
.cover-inner{position:relative;z-index:2;text-align:center}
.cover-subtitle{
    font-family:var(--font-body);font-size:0.75rem;
    letter-spacing:5px;text-transform:uppercase;
    color:#888;line-height:2;margin-bottom:30px;
}
.oval-frame{
    border:1.5px solid #bba0a0;
    border-radius:50% / 40%;
    padding:60px 70px;
    display:inline-block;
    background:rgba(255,245,247,0.4);
}
.cover-couple{font-family:var(--font-serif);font-size:3rem;font-weight:400;color:#2c2c2c;line-height:1.4}
.cover-amp{font-family:var(--font-cursive);font-size:3.5rem;color:var(--pink-deep)}

/* ============================================
   SLIDE 2: THÔNG TIN LỄ CƯỚI
   ============================================ */
.slide-ceremony{background:var(--pink-bg);flex-direction:column;padding:60px 20px}
.ceremony-content{max-width:650px;width:100%;text-align:center}
.ceremony-title{
    font-family:var(--font-elegant);font-size:1.6rem;font-weight:400;
    font-style:italic;color:#444;margin-bottom:40px;letter-spacing:2px;
}
.parents-row{
    display:flex;justify-content:space-between;gap:30px;
    margin-bottom:35px;flex-wrap:wrap;
}
.parent-col{flex:1;min-width:200px;text-align:center}
.parent-label{font-family:var(--font-elegant);font-size:1.1rem;font-style:italic;color:#555;margin-bottom:5px}
.parent-name{font-weight:500;font-size:0.95rem;margin-bottom:3px}
.parent-address{font-size:0.85rem;color:var(--text-light);font-style:italic}
.ceremony-announce{margin-bottom:30px}
.announce-text{
    font-family:var(--font-elegant);font-size:1rem;
    letter-spacing:2px;line-height:1.8;color:#555;font-style:italic;
}
.couple-names-ceremony{margin-bottom:35px}
.groom-name,.bride-name{
    font-family:var(--font-cursive);font-size:3.5rem;font-weight:400;
    color:#333;margin-bottom:2px;
}
.role-label{font-size:0.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--text-light);margin-bottom:10px}
.ceremony-amp{font-family:var(--font-cursive);font-size:2rem;color:var(--pink-deep);margin:5px 0}
.ceremony-info{margin-bottom:30px;line-height:2;font-size:0.9rem;letter-spacing:1px;color:#555}
.ceremony-info .venue-name{font-weight:600;font-size:1.1rem;color:#333}
.ceremony-info .ceremony-time{font-weight:600;font-size:1.3rem;color:var(--pink-deep)}
.ceremony-date-row,.party-date-row{
    display:flex;justify-content:center;align-items:center;gap:15px;
    font-size:1.1rem;letter-spacing:2px;margin-bottom:5px;
}
.date-part{font-weight:500;color:#333}
.date-highlight{color:var(--pink-deep);font-weight:600}
.date-sep{color:#bbb;font-weight:300}
.ceremony-year,.party-year{font-size:1.8rem;font-weight:300;letter-spacing:5px;color:#444;margin-bottom:10px}

/* ============================================
   SLIDE 3: THÔNG TIN TIỆC CƯỚI
   ============================================ */
.slide-party{background:var(--pink-bg);flex-direction:column;padding:60px 20px}
.party-content{max-width:650px;width:100%;text-align:center}
.party-title{
    font-family:var(--font-body);font-size:1rem;font-weight:600;
    letter-spacing:3px;text-transform:uppercase;
    color:var(--pink-deep);margin-bottom:8px;
}
.party-subtitle{font-size:0.9rem;color:#555;letter-spacing:1px;margin-bottom:5px}
.party-time{font-size:1.5rem;font-weight:600;color:var(--pink-deep);margin-bottom:25px}
.reception-row{display:flex;justify-content:center;gap:60px;margin:30px 0;flex-wrap:wrap}
.reception-col{text-align:center}
.reception-label{
    font-size:0.8rem;letter-spacing:2px;text-transform:uppercase;
    color:var(--pink-deep);font-weight:600;margin-bottom:5px;
}
.reception-time{font-size:1.3rem;font-weight:500;color:#333}

/* Calendar */
.calendar-wrapper{
    display:inline-block;margin:30px auto;
    border:1.5px solid var(--pink-deep);border-radius:10px;
    padding:20px 25px;background:rgba(255,255,255,0.6);
}
.calendar-title{
    font-size:1rem;font-weight:600;letter-spacing:2px;
    color:var(--pink-deep);margin-bottom:12px;
    text-decoration:underline;text-underline-offset:4px;
}
.mini-calendar{border-collapse:collapse;width:100%}
.mini-calendar th,.mini-calendar td{padding:6px 10px;text-align:center;font-size:0.85rem}
.mini-calendar th{font-weight:600;color:#555;border-bottom:1px solid #ddd;padding-bottom:10px}
.mini-calendar th.highlight,.mini-calendar td.highlight{color:var(--pink-deep);font-weight:600}
.mini-calendar td{color:#444}
.mini-calendar td.wedding-day{
    background:var(--pink-deep);color:#fff!important;
    border-radius:50%;font-weight:700;
    animation:pulse 2s infinite;
}
.venue-section{margin-top:40px}
.venue-label{font-size:0.9rem;letter-spacing:2px;color:#555;margin-bottom:8px}
.venue-name-party{font-family:var(--font-serif);font-size:1.5rem;font-weight:500;color:#333;margin-bottom:5px}
.venue-address{font-size:0.9rem;color:var(--text-light);margin-bottom:15px}
.map-btn{
    display:inline-block;padding:10px 28px;
    background:#333;color:#fff;text-decoration:none;
    border-radius:25px;font-size:0.85rem;transition:all 0.3s;
}
.map-btn:hover{background:var(--pink-deep)}
.map-btn i{margin-right:6px}

/* ============================================
   SLIDE 4: ALBUM ẢNH
   ============================================ */
.slide-gallery{background:var(--cream);padding:80px 20px;flex-direction:column}
.gallery-content{max-width:1000px;width:100%;margin:0 auto}
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:220px;gap:15px;
}
.gallery-item{border-radius:10px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,0.08)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease}
.gallery-item:hover img{transform:scale(1.08)}
.gi-tall{grid-row:span 2}

/* ============================================
   SLIDE 5: MỪNG CƯỚI
   ============================================ */
.slide-gift{background:var(--pink-light);padding:80px 20px;flex-direction:column}
.gift-content{max-width:800px;width:100%;margin:0 auto}
.gift-wrapper{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}
.gift-box{
    background:#fff;padding:35px 30px;border-radius:15px;text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,0.06);flex:1;min-width:260px;max-width:340px;
}
.gift-label{font-family:var(--font-serif);font-size:1.1rem;color:#333;margin-bottom:18px;line-height:1.5}
.qr-img{width:180px;height:180px;margin-bottom:18px;border:4px solid var(--pink-bg);border-radius:10px}
.bank-info{line-height:1.8;color:var(--text-light);font-size:0.9rem}

/* ============================================
   SLIDE 6: CẢM ƠN
   ============================================ */
.slide-thanks{
    background:linear-gradient(180deg,var(--pink-light) 0%,#fff 100%);
    padding:80px 20px;flex-direction:column;
}
.thanks-content{
    text-align:center;max-width:600px;position:relative;
    background:#fff;padding:60px 40px;border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,0.05);
}
.thanks-floral{
    position:absolute;width:120px;height:120px;
    background:radial-gradient(circle,#f4c2c2 0%,transparent 60%),
               radial-gradient(circle at 60% 30%,#8fbc8f 0%,transparent 50%);
    opacity:0.5;pointer-events:none;
}
.thanks-fl-tl{top:-30px;left:-30px}
.thanks-fl-br{bottom:-30px;right:-30px}
.thanks-subtitle{
    font-family:var(--font-body);font-size:0.85rem;
    text-transform:uppercase;letter-spacing:4px;color:#888;margin-bottom:10px;
}
.thanks-names{font-family:var(--font-cursive);font-size:3.5rem;font-weight:400;color:var(--pink-deep);margin-bottom:15px}
.thanks-divider{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px}
.thanks-divider span{width:50px;height:1px;background:#ddd}
.thanks-divider i{color:var(--pink-deep);font-size:0.9rem;animation:pulse 2s infinite}
.thanks-msg{font-size:1rem;color:var(--text-light);line-height:1.8;margin-bottom:20px}
.thanks-date{font-family:var(--font-serif);font-size:1.2rem;letter-spacing:3px;color:#aaa}

/* ============================================
   CANVAS CONFETTI
   ============================================ */
#confetti-canvas{
    position:fixed;top:0;left:0;width:100vw;height:100vh;
    pointer-events:none;z-index:9999;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:768px){
    .envelope-content{padding:2.5rem 1.8rem;width:92%}
    .envelope-names{font-size:1.7rem}
    .oval-frame{padding:40px 35px}
    .cover-couple{font-size:2.2rem}
    .cover-amp{font-size:2.8rem}
    .groom-name,.bride-name{font-size:2.5rem}
    .parents-row{flex-direction:column;gap:20px}
    .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
    .gi-tall{grid-row:span 1}
    .gift-wrapper{flex-direction:column;align-items:center}
    .thanks-names{font-size:2.5rem}
    .thanks-content{padding:40px 25px}
    .cover-floral{width:130px;height:130px}
    .floral-top-left{width:150px;height:150px}
    .floral-bottom-right{width:150px;height:150px}
}

@media(max-width:480px){
    .cover-couple{font-size:1.8rem}
    .oval-frame{padding:30px 25px}
    .groom-name,.bride-name{font-size:2rem}
    .gallery-grid{grid-template-columns:1fr;grid-auto-rows:200px}
    .mini-calendar th,.mini-calendar td{padding:5px 6px;font-size:0.75rem}
    .calendar-wrapper{padding:15px 15px}
}