500;600;700&display=swap");
:root{--accent:#B59A6A;--bg:#F7F3EC;--text:#332D28;--serif:var(--font-heading);--sans:var(--font-heading);--shadow:0 24px 70px rgba(51,45,40,.14)}
:root{--serif:var(--font-heading)!important;--sans:var(--font-heading)!important;}
:root{--accent:#7c6f55;--bg:#f8f4ec;--text:#332D28;--serif:var(--font-heading);--sans:var(--font-body);--shadow:0 24px 70px rgba(44,37,27,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6}body.no-scroll{overflow:hidden}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}.section{padding:100px 24px}.narrow{max-width:820px;margin:0 auto;text-align:center}.eyebrow{margin:0 0 16px;text-transform:uppercase;letter-spacing:.28em;font-size:12px;font-weight:700;color:rgba(255,255,255,.83)}.eyebrow.dark{color:var(--accent)}.ornament,.invite-ornament{font-family:var(--serif);font-size:34px;color:var(--accent);line-height:1}.section-heading{max-width:760px;margin:0 auto 54px;text-align:center}.section-heading h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(38px,5vw,64px);line-height:1.08}.section-heading p:last-child{max-width:620px;margin:18px auto 0;color:rgba(47,43,38,.68)}.section-heading.light h2,.section-heading.light p{color:white}.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}
.site-header{height:72px;position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,4vw,64px);color:white;border-bottom:1px solid rgba(255,255,255,.15)}.monogram{font-family:var(--serif);font-size:24px;letter-spacing:.06em}.monogram span{font-size:13px;margin:0 6px}.desktop-nav{display:flex;gap:28px;font-size:13px;letter-spacing:.08em}.desktop-nav a{opacity:.88;transition:.2s}.desktop-nav a:hover{opacity:1}.menu-btn{display:none;background:none;border:0;color:white;font-size:24px}.mobile-nav{display:none;position:absolute;z-index:19;top:72px;left:0;right:0;background:rgba(28,25,22,.94);backdrop-filter:blur(14px);padding:14px 24px 20px;color:white}.mobile-nav a{display:block;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.hero-section{min-height:100svh;position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#756957,#B59A6A)}.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.03)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(23,20,18,.28),rgba(23,20,18,.54))}.hero-content{position:relative;z-index:2;text-align:center;color:white;padding:110px 20px 90px;max-width:1000px}.guest-welcome{display:inline-block;margin:0 0 22px;padding:9px 15px;border:1px solid rgba(255,255,255,.4);border-radius:999px;font-size:13px;background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}.hero-content h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(64px,11vw,142px);line-height:.83;letter-spacing:-.04em}.hero-content h1 span{display:inline-block}.hero-content h1 i{font-size:.42em;font-weight:400;margin:0 .15em;font-style:italic}.hero-date{font-family:var(--serif);font-size:19px;letter-spacing:.22em;margin:30px 0 8px}.hero-subtitle{font-size:14px;letter-spacing:.08em;margin:0 0 28px}.ghost-btn,.primary-btn,.light-btn{display:inline-flex;justify-content:center;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.25s}.ghost-btn{border-color:rgba(255,255,255,.7);color:#fff;background:rgba(255,255,255,.06)}.ghost-btn:hover{background:white;color:#332D28}.primary-btn{background:var(--accent);color:white;box-shadow:0 10px 24px rgba(44,37,27,.16)}.primary-btn:hover{transform:translateY(-1px);filter:brightness(.96)}.primary-btn:disabled,.light-btn:disabled{opacity:.55;cursor:wait}.light-btn{background:white;color:#413b32}.scroll-hint{position:absolute;z-index:2;bottom:22px;left:50%;transform:translateX(-50%);font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.68);display:flex;flex-direction:column;align-items:center;gap:8px}.scroll-hint span{width:1px;height:30px;background:rgba(255,255,255,.52)}
.countdown-section{padding:48px 24px;background:#EDE4D7;text-align:center;border-bottom:1px solid rgba(124,111,85,.12)}.countdown{display:flex;justify-content:center;gap:clamp(12px,4vw,58px);margin-top:14px}.countdown div{min-width:70px}.countdown strong{display:block;font-family:var(--serif);font-size:clamp(34px,5vw,54px);font-weight:400;line-height:1}.countdown span{display:block;margin-top:8px;text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:rgba(47,43,38,.58)}
.intro-section{padding-top:118px;padding-bottom:118px}.lead-text{font-family:var(--serif);font-size:clamp(27px,4vw,43px);line-height:1.42;margin:28px 0 0;color:#3d382f}
.story-section{background:#fff}.story-grid{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);align-items:center;gap:clamp(38px,7vw,100px)}.story-photo{aspect-ratio:4/5;overflow:hidden;background:#e8e1d4;box-shadow:var(--shadow)}.story-photo img{width:100%;height:100%;object-fit:cover}.photo-placeholder{height:100%;display:grid;place-items:center;align-content:center;gap:10px;color:var(--accent);background:radial-gradient(circle at 30% 20%,#faf6ef,#e6ddcf)}.photo-placeholder span{font-size:50px}.photo-placeholder small{font-size:12px;letter-spacing:.12em;text-transform:uppercase}.story-copy{position:relative}.big-quote{display:block;font-family:var(--serif);font-size:100px;line-height:.6;color:rgba(124,111,85,.25)}.story-copy p{white-space:pre-line;margin:20px 0 30px;font-family:var(--serif);font-size:24px;line-height:1.6;color:#4b4439}.signature{font-family:var(--font-heading);font-size:36px;color:var(--accent)}
.gallery-section{background:var(--bg)}.gallery-grid{max-width:1220px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:100px;gap:14px}.gallery-item{border:0;padding:0;overflow:hidden;cursor:zoom-in;background:#ddd}.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.gallery-item:hover img{transform:scale(1.035)}.gallery-item:nth-child(6n+1){grid-column:span 7;grid-row:span 4}.gallery-item:nth-child(6n+2){grid-column:span 5;grid-row:span 2}.gallery-item:nth-child(6n+3){grid-column:span 5;grid-row:span 2}.gallery-item:nth-child(6n+4){grid-column:span 5;grid-row:span 3}.gallery-item:nth-child(6n+5){grid-column:span 7;grid-row:span 3}.gallery-item:nth-child(6n){grid-column:span 12;grid-row:span 4}.empty-public{max-width:680px;margin:0 auto;padding:60px;text-align:center;border:1px dashed rgba(124,111,85,.35);background:rgba(255,255,255,.35)}.empty-public span{font-size:30px;color:var(--accent)}
.schedule-section{background:#EDE4D7}.event-list{max-width:1050px;margin:0 auto;display:grid;gap:18px}.event-card{display:grid;grid-template-columns:68px 140px minmax(0,1fr);gap:28px;align-items:stretch;background:#fff;padding:28px;border:1px solid rgba(124,111,85,.12)}.event-number{font-family:var(--serif);font-size:20px;color:rgba(124,111,85,.45);padding-top:4px}.event-date-block{border-left:1px solid rgba(124,111,85,.22);border-right:1px solid rgba(124,111,85,.22);display:flex;flex-direction:column;justify-content:center;align-items:center;text-transform:uppercase;letter-spacing:.08em}.event-date-block strong{font-family:var(--serif);font-size:46px;font-weight:400;line-height:1}.event-date-block span,.event-date-block small{font-size:10px;margin-top:5px}.event-main{padding:4px 0}.event-time{margin:0;color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.1em}.event-main h3{margin:7px 0 8px;font-family:var(--serif);font-weight:400;font-size:31px}.venue{margin:0;font-weight:700}.address,.event-description{margin:5px 0;color:rgba(47,43,38,.68)}.event-description{font-size:14px;margin-top:12px}.event-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}.text-btn{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);border-bottom:1px solid rgba(124,111,85,.4);padding-bottom:2px}
.wishes-banner{padding:100px 24px;background:linear-gradient(145deg,#756957,#332D28);color:white}.wish-layout{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}.glass-form{padding:30px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);backdrop-filter:blur(12px)}.field{display:block;margin-bottom:18px;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.field span{opacity:.6;text-transform:none;letter-spacing:0}.field input,.field textarea{display:block;width:100%;margin-top:8px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:white;padding:13px 14px;outline:none;border-radius:0}.field textarea{resize:vertical}.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.5)}.field input:focus,.field textarea:focus{border-color:rgba(255,255,255,.68)}.muted-field{opacity:.5}.checkbox-line{display:flex;align-items:center;gap:9px;margin:-4px 0 18px;font-size:13px}.checkbox-line input{accent-color:var(--accent)}.form-status{min-height:24px;margin:14px 0 0;font-size:13px;color:#ffd2d2}.form-status.success{color:#dff9d8}.wish-stream{display:grid;gap:14px;max-height:500px;overflow:auto;padding-right:4px}.wish-card{margin:0;padding:24px;background:white;color:#443d33}.wish-card p{font-family:var(--serif);font-size:20px;line-height:1.5;margin:0}.wish-card footer{margin-top:12px;color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.wish-card.empty{opacity:.78}
.rsvp-section{padding-top:120px;padding-bottom:120px;background:radial-gradient(circle at 50% 10%,#fff,#eee6d8)}.rsvp-paper{max-width:760px;margin:0 auto;padding:60px clamp(24px,7vw,78px);background:#fff;text-align:center;box-shadow:var(--shadow);border:1px solid rgba(124,111,85,.12);position:relative}.rsvp-paper:before,.rsvp-paper:after{content:'✦';position:absolute;color:rgba(124,111,85,.35);font-size:20px}.rsvp-paper:before{top:24px;left:28px}.rsvp-paper:after{bottom:24px;right:28px}.rsvp-paper h2{font-family:var(--serif);font-size:clamp(40px,6vw,66px);font-weight:400;margin:4px 0 12px}.rsvp-paper>p{color:rgba(47,43,38,.68)}.rsvp-form{margin-top:34px;text-align:left}.personalized-line{text-align:center;margin:0 0 22px;font-family:var(--serif);font-size:19px}.dark-field{color:#4b4439}.dark-field input,.dark-field textarea{color:#342f29;border-color:rgba(124,111,85,.35);background:#fbfaf7}.dark-field input::placeholder,.dark-field textarea::placeholder{color:#9f968a}.attendance-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.attendance-options label{cursor:pointer}.attendance-options input{position:absolute;opacity:0;pointer-events:none}.attendance-options span{min-height:98px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid rgba(124,111,85,.3);background:#fbfaf7;color:#756a58;transition:.2s}.attendance-options span b{font-size:13px}.attendance-options input:checked+span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,white);box-shadow:inset 0 0 0 1px var(--accent)}.rsvp-form .primary-btn{width:100%;margin-top:6px}.dark-status{color:#a55252;text-align:center}.dark-status.success{color:#56774a}
.site-footer{text-align:center;padding:70px 24px;background:#302B25;color:white}.site-footer h2{font-family:var(--serif);font-weight:400;font-size:42px;margin:16px 0 10px}.site-footer h2 span{font-style:italic}.site-footer p{max-width:520px;margin:0 auto 22px;color:rgba(255,255,255,.68)}.site-footer small{letter-spacing:.12em;color:rgba(255,255,255,.42)}
.music-toggle{position:fixed;z-index:30;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(47,43,38,.84);color:white;box-shadow:0 8px 30px rgba(0,0,0,.22);backdrop-filter:blur(8px);cursor:pointer}.music-toggle.playing span{display:inline-block;animation:spin 5s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.lightbox{width:min(92vw,1100px);height:min(90vh,900px);border:0;padding:0;background:transparent;overflow:visible}.lightbox::backdrop{background:rgba(0,0,0,.86)}.lightbox img{width:100%;height:100%;object-fit:contain}.lightbox button{position:absolute;right:-4px;top:-44px;width:38px;height:38px;border:0;background:white;border-radius:50%;font-size:28px;line-height:1;cursor:pointer}
.invite-page{min-height:100svh;background:radial-gradient(circle at 50% 20%,#fff,var(--bg));display:grid;place-items:center;padding:24px}.invite-shell{width:min(100%,980px)}.invite-card{min-height:min(700px,90svh);display:grid;grid-template-columns:1fr 1fr;background:white;box-shadow:0 32px 90px rgba(44,37,27,.18);overflow:hidden}.invite-photo{background-size:cover;background-position:center;min-height:620px}.invite-copy{padding:clamp(38px,7vw,82px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid rgba(124,111,85,.13)}.invite-copy .eyebrow{color:var(--accent)}.invite-copy h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6vw,68px);line-height:1.04;margin:10px 0}.tiny-rule{width:55px;height:1px;background:rgba(124,111,85,.45);margin:18px 0}.couple-script{font-family:var(--font-heading);color:var(--accent);font-size:38px;margin:0}.couple-script span{font-family:var(--serif);font-size:22px;font-style:italic}.date-line{text-transform:capitalize;font-size:13px;letter-spacing:.08em;margin:16px 0}.invite-note{max-width:420px;color:rgba(47,43,38,.68);font-family:var(--serif);font-size:17px}.invite-copy .primary-btn{margin-top:14px;min-width:180px}.micro-note{margin:10px 0 0;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:rgba(47,43,38,.45)}.invite-card>.invite-ornament{display:grid;place-items:center;min-height:620px;background:linear-gradient(160deg,#d8cfbf,#f1eadf);font-size:86px;color:rgba(124,111,85,.55)}
.center-page{min-height:100svh;display:grid;place-items:center;background:var(--bg);padding:24px}.simple-card{width:min(100%,520px);background:white;padding:50px;text-align:center;box-shadow:var(--shadow)}.simple-card h1{font-family:var(--serif);font-weight:400;font-size:42px}.primary-btn.inline{display:inline-flex;margin-top:10px}
@media (max-width:900px){.desktop-nav{display:none}.menu-btn{display:block}.mobile-nav.open{display:block}.story-grid{grid-template-columns:1fr;max-width:660px}.story-copy{text-align:center}.wish-layout{grid-template-columns:1fr}.event-card{grid-template-columns:52px 112px minmax(0,1fr);gap:18px}.invite-card{grid-template-columns:1fr}.invite-photo,.invite-card>.invite-ornament{min-height:38svh}.invite-copy{min-height:52svh}.gallery-grid{grid-auto-rows:85px}}
@media (max-width:640px){.section{padding:76px 18px}.site-header{height:64px;padding:0 18px}.mobile-nav{top:64px}.hero-content{padding-top:90px}.hero-content h1{font-size:clamp(58px,19vw,92px);line-height:.9}.hero-content h1 span{display:block}.hero-content h1 i{display:block;margin:.12em 0}.hero-date{font-size:14px}.countdown-section{padding:36px 12px}.countdown{gap:4px}.countdown div{min-width:66px}.countdown strong{font-size:34px}.countdown span{font-size:8px}.lead-text{font-size:28px}.story-photo{aspect-ratio:4/5}.gallery-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:170px;gap:8px}.gallery-item:nth-child(n){grid-column:auto;grid-row:auto}.gallery-item:nth-child(3n+1){grid-column:span 2;grid-row:span 2}.event-card{grid-template-columns:1fr;padding:22px}.event-number{display:none}.event-date-block{border:0;border-bottom:1px solid rgba(124,111,85,.2);padding-bottom:16px;align-items:flex-start}.event-date-block strong{font-size:34px}.event-date-block span,.event-date-block small{display:inline-block}.event-main h3{font-size:28px}.wishes-banner{padding:78px 18px}.glass-form{padding:22px}.rsvp-section{padding-left:12px;padding-right:12px}.rsvp-paper{padding:48px 20px}.attendance-options{grid-template-columns:1fr}.attendance-options span{min-height:78px}.site-footer h2{font-size:34px}.invite-page{padding:0}.invite-shell{width:100%}.invite-card{min-height:100svh;box-shadow:none}.invite-photo,.invite-card>.invite-ornament{min-height:34svh}.invite-copy{min-height:66svh;padding:34px 22px}.invite-copy h1{font-size:48px}.couple-script{font-size:32px}.lightbox{width:96vw;height:82vh}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.music-toggle.playing span{animation:none}}

/* ===== PINK WEDDING THEME ===== */

:root {
    --accent: #E83E8C !important;
    --bg: #FFF5F8 !important;
    --text: #4A2030 !important;
    --serif: var(--font-heading) !important;
    --sans: var(--font-heading) !important;
    --shadow: 0 24px 70px rgba(194,24,91,.15) !important;
}

body {
    background: #FFF5F8 !important;
    color: #4A2030 !important;
}

/* Hero */
.hero-section {
    background: linear-gradient(145deg,#C2185B,#FF5C9D) !important;
}

.hero-overlay {
    background: linear-gradient(
        to bottom,
        rgba(90,10,48,.15),
        rgba(116,13,60,.50)
    ) !important;
}

/* Countdown */
.countdown-section {
    background: #FFE4EE !important;
    border-color: rgba(232,62,140,.18) !important;
}

/* Introduction */
.intro-section {
    background: #FFF5F8 !important;
}

/* Story */
.story-section {
    background: #FFFFFF !important;
}

/* Schedule */
.schedule-section {
    background: #FFEAF2 !important;
}

.event-card {
    border-color: #F6C2D6 !important;
    box-shadow: 0 12px 35px rgba(194,24,91,.08);
}

/* Wishes */
.wishes-banner {
    background: linear-gradient(
        135deg,
        #A91455 0%,
        #D92E78 48%,
        #FF6FAE 100%
    ) !important;
}

/* RSVP */
.rsvp-section {
    background: radial-gradient(
        circle at 50% 10%,
        #FFFFFF,
        #FFE4EE
    ) !important;
}

.rsvp-paper {
    border-color: #F5BED3 !important;
    box-shadow: 0 25px 65px rgba(194,24,91,.14) !important;
}

/* Buttons */
.primary-btn {
    background: linear-gradient(
        135deg,
        #C2185B,
        #F0448A
    ) !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 28px rgba(194,24,91,.25) !important;
}

.primary-btn:hover {
    background: linear-gradient(
        135deg,
        #AD1457,
        #E83E8C
    ) !important;
}

/* Decorative elements */
.ornament,
.invite-ornament,
.event-time,
.text-btn {
    color: #D62976 !important;
}

/* Invitation */
.invite-page {
    background: radial-gradient(
        circle at 50% 20%,
        #FFFFFF,
        #FFE4EE
    ) !important;
}

.invite-copy {
    background: #FFFDFE !important;
    border-color: #F4BBD1 !important;
}

/* Footer */
.site-footer {
    background: linear-gradient(
        135deg,
        #7F123F,
        #C2185B
    ) !important;
}

/* Handwriting font */
.signature,
.couple-script {
    font-family: var(--font-heading) !important;
    color: #D62976 !important;
}


/* ==================================================
   SOFT DUSTY ROSE WEDDING THEME - FINAL OVERRIDE
   ================================================== */

:root {
    --accent: #B97886 !important;
    --bg: #FFF9F6 !important;
    --text: #49383C !important;
}

/* Tổng thể */
body {
    background: #FFF9F6 !important;
    color: #49383C !important;
}

/* HERO */
.hero-section {
    background: linear-gradient(135deg,#8E5965,#D5A2AB) !important;
}

.hero-overlay {
    background: linear-gradient(
        to bottom,
        rgba(39,28,30,.18),
        rgba(55,35,40,.43)
    ) !important;
}

/* ===== TÊN CÔ DÂU CHÚ RỂ ===== */

.hero-content {
    max-width: 1500px !important;
    width: 100% !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.hero-content h1 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap !important;

    font-family:var(--font-heading) !important;
    font-size: clamp(34px,5vw,72px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;

    width: 100% !important;
}

/* DOM hiện tại: nữ - & - nam
   Đảo bằng CSS thành: NAM - & - NỮ */

.hero-content h1 span:first-child {
    order: 3 !important;
}

.hero-content h1 i {
    order: 2 !important;
    font-size: .55em !important;
    margin: 0 .30em !important;
}

.hero-content h1 span:last-child {
    order: 1 !important;
}

/* Countdown */
.countdown-section {
    background: #F3E3E5 !important;
    border-color: rgba(185,120,134,.16) !important;
}

/* Introduction */
.intro-section {
    background: #FFF9F6 !important;
}

/* Story */
.story-section {
    background: #FFFFFF !important;
}

/* Lịch cưới */
.schedule-section {
    background: #F7EBEC !important;
}

.event-card {
    background: #FFFCFA !important;
    border-color: #E8CDD2 !important;
    box-shadow: 0 10px 32px rgba(109,76,83,.07) !important;
}

/* Lời chúc */
.wishes-banner {
    background: linear-gradient(
        135deg,
        #79515A 0%,
        #9C6975 55%,
        #BD8792 100%
    ) !important;
}

/* RSVP */
.rsvp-section {
    background: radial-gradient(
        circle at 50% 10%,
        #FFFFFF,
        #F4E4E6
    ) !important;
}

.rsvp-paper {
    border-color: #E7CDD2 !important;
    box-shadow: 0 24px 60px rgba(114,75,85,.11) !important;
}

/* Buttons */
.primary-btn {
    background: #A96877 !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 26px rgba(142,89,101,.20) !important;
}

.primary-btn:hover {
    background: #925967 !important;
}

/* Accent */
.ornament,
.invite-ornament,
.event-time,
.text-btn {
    color: #A96877 !important;
}

/* Thiệp */
.invite-page {
    background: radial-gradient(
        circle at 50% 20%,
        #FFFFFF,
        #F3E3E5
    ) !important;
}

.invite-copy {
    background: #FFFCFA !important;
    border-color: #E8CDD2 !important;
}

/* Footer */
.site-footer {
    background: #60434A !important;
}

/* Font viết tay */
.signature,
.couple-script {
    font-family: var(--font-heading) !important;
    color: #A96877 !important;
}

/* ================================
   MOBILE
   ================================ */

@media (max-width: 700px) {

    .hero-content {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .hero-content h1 {
        font-size: clamp(24px,7vw,42px) !important;
        letter-spacing: -.03em !important;
    }

    .hero-content h1 i {
        margin: 0 .20em !important;
    }
}



/* ==================================================
   WEDDING ALBUM CAROUSEL
   ================================================== */

.gallery-section {
    background: #fff9f7 !important;
}

.wedding-carousel {
    max-width: 1220px;
    margin: 0 auto;
    padding: 20px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(185,120,134,.24);
    border-radius: 20px;
    box-shadow: 0 20px 55px rgba(120,72,82,.08);
}

.carousel-main {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}

.carousel-feature {
    position: relative;
    flex: 1;
    height: clamp(360px,52vw,650px);
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #eee;
    cursor: zoom-in;
}

.carousel-feature img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f2ece9;
    transition: opacity .28s ease, transform .4s ease;
}

.carousel-feature:hover img {
    transform: scale(1.01);
}

.carousel-counter {
    position: absolute;
    left: 20px;
    bottom: 18px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(40,28,31,.60);
    color: #fff;
    font-size: 13px;
    letter-spacing: .05em;
    backdrop-filter: blur(8px);
}

.carousel-zoom {
    position: absolute;
    right: 18px;
    bottom: 17px;
    padding: 8px 13px;
    border-radius: 8px;
    background: rgba(40,28,31,.68);
    color: #fff;
    font-size: 12px;
    backdrop-filter: blur(8px);
}

.carousel-arrow {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: #f3dde1;
    color: #8e5965;
    font-family: var(--font-body);
    font-size: 38px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: .2s ease;
}

.carousel-arrow:hover {
    background: #b97886;
    color: #fff;
    transform: scale(1.05);
}


/* Thumbnail strip */
.carousel-thumbs-wrap {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 36px minmax(0,1fr) 36px;
    align-items: center;
    gap: 8px;
}

.carousel-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 4px 2px;
}

.carousel-thumbs::-webkit-scrollbar {
    display: none;
}

.carousel-thumb {
    flex: 0 0 105px;
    height: 72px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 9px;
    overflow: hidden;
    background: #eee;
    opacity: .72;
    cursor: pointer;
    transition: .2s;
}

.carousel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-thumb:hover {
    opacity: 1;
}

.carousel-thumb.active {
    border-color: #b97886;
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(185,120,134,.15);
}

.thumb-scroll {
    width: 34px;
    height: 52px;
    border: 0;
    background: transparent;
    color: #9c6470;
    font-size: 34px;
    cursor: pointer;
}

.thumb-scroll:hover {
    color: #71424d;
}


/* Mobile */
@media (max-width: 700px) {

    .gallery-section {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .wedding-carousel {
        padding: 8px;
        border-radius: 13px;
    }

    .carousel-main {
        gap: 0;
    }

    .carousel-feature {
        height: 58vw;
        min-height: 240px;
        max-height: 420px;
        border-radius: 10px;
    }

    .carousel-arrow {
        position: absolute;
        z-index: 4;
        width: 40px;
        height: 40px;
        flex: none;
        background: rgba(255,255,255,.82);
        box-shadow: 0 3px 16px rgba(0,0,0,.12);
    }

    .carousel-prev {
        left: 8px;
    }

    .carousel-next {
        right: 8px;
    }

    .carousel-counter {
        left: 10px;
        bottom: 10px;
        font-size: 11px;
    }

    .carousel-zoom {
        right: 10px;
        bottom: 10px;
        font-size: 10px;
    }

    .carousel-thumb {
        flex-basis: 75px;
        height: 55px;
    }

    .carousel-thumbs-wrap {
        grid-template-columns: 26px minmax(0,1fr) 26px;
        gap: 3px;
    }

    .thumb-scroll {
        width: 26px;
        font-size: 28px;
    }
}



/* =========================================================
   LIGHTBOX PREV / NEXT
   ========================================================= */

#lightbox {
    position: relative;
    overflow: visible;
}

#lightbox img {
    transition: opacity .18s ease;
}

#lightbox img.lightbox-changing {
    opacity: .3;
}

.lightbox-nav {
    position: fixed;
    z-index: 10002;
    top: 50%;
    width: 58px;
    height: 58px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;

    background: rgba(40,28,31,.62);
    color: #fff;

    font-family: var(--font-body) !important;
    font-size: 46px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;
    backdrop-filter: blur(8px);
    transition:
        background .2s ease,
        transform .2s ease;
}

.lightbox-nav-prev {
    left: 28px;
}

.lightbox-nav-next {
    right: 28px;
}

.lightbox-nav:hover {
    background: rgba(185,120,134,.92);
    transform: translateY(-50%) scale(1.06);
}

.lightbox-counter {
    position: fixed;
    z-index: 10002;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);

    padding: 8px 15px;
    border-radius: 999px;

    background: rgba(40,28,31,.65);
    color: #fff;

    font-family:var(--font-heading) !important;
    font-size: 14px;
    letter-spacing: .08em;

    backdrop-filter: blur(8px);
}


/* Mobile */
@media (max-width: 700px) {

    .lightbox-nav {
        width: 44px;
        height: 44px;
        font-size: 35px;
        background: rgba(40,28,31,.55);
    }

    .lightbox-nav-prev {
        left: 8px;
    }

    .lightbox-nav-next {
        right: 8px;
    }

    .lightbox-counter {
        bottom: 14px;
        font-size: 12px;
        padding: 6px 11px;
    }
}


/* ===== FIX LIGHTBOX ARROWS - GIUA ANH ===== */

#lightbox .lightbox-nav {
    position: fixed !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;

    width: 54px !important;
    height: 54px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.55) !important;

    background: rgba(70,45,51,.72) !important;
    color: #fff !important;

    font-size: 42px !important;
    line-height: 1 !important;

    z-index: 999999 !important;
}

#lightbox .lightbox-nav-prev {
    left: max(18px, calc(50% - 620px)) !important;
}

#lightbox .lightbox-nav-next {
    right: max(18px, calc(50% - 620px)) !important;
}

#lightbox .lightbox-nav:hover {
    background: #B97886 !important;
    transform: translateY(-50%) scale(1.08) !important;
}


/* Dien thoai */
@media (max-width: 700px) {

    #lightbox .lightbox-nav {
        top: 50% !important;

        width: 46px !important;
        height: 46px !important;

        font-size: 36px !important;

        background: rgba(70,45,51,.72) !important;
    }

    #lightbox .lightbox-nav-prev {
        left: 10px !important;
    }

    #lightbox .lightbox-nav-next {
        right: 10px !important;
    }
}



/* =========================================================
   OPENING WEDDING INVITATION
   ========================================================= */

body.invite-locked {
    overflow: hidden !important;
}

.invite-gate {
    position: fixed;
    z-index: 9999999;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        radial-gradient(circle at 50% 20%, #fff9f7 0%, #f5e4e7 48%, #e8cdd2 100%);

    opacity: 1;
    visibility: visible;

    transition:
        opacity .8s ease,
        visibility .8s ease;
}

.invite-gate.fade-away {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.invite-gate-inner {
    width: min(100%, 760px);
    text-align: center;
}

.invite-gate-eyebrow {
    margin: 0 0 24px;

    font-family:var(--font-heading) !important;
    font-size: 12px;
    letter-spacing: .32em;
    text-transform: uppercase;

    color: #98636f;
}


/* Envelope */

.opening-envelope {
    position: relative;

    width: min(92vw, 650px);
    height: min(64vw, 430px);

    min-height: 330px;
    max-height: 430px;

    margin: 0 auto;

    perspective: 1400px;
}

.envelope-back {
    position: absolute;
    inset: 0;

    border-radius: 8px;

    background:
        linear-gradient(145deg, #d6a7b0, #bd7e8b);

    box-shadow:
        0 35px 90px rgba(95,54,65,.22);
}


/* Letter */

.opening-letter {
    position: absolute;

    z-index: 2;

    left: 7%;
    right: 7%;

    top: 9%;
    bottom: 7%;

    padding: 32px 38px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(180deg, #fffdfb, #fff8f6);

    border: 1px solid rgba(156,105,117,.20);

    box-shadow:
        0 14px 40px rgba(80,45,54,.12);

    transform: translateY(56px) scale(.94);

    transition:
        transform 1.05s cubic-bezier(.2,.8,.25,1),
        box-shadow .8s ease;
}


/* Front envelope pieces */

.envelope-front-left,
.envelope-front-right,
.envelope-front-bottom {
    position: absolute;
    z-index: 4;
    pointer-events: none;
}

.envelope-front-left {
    inset: 0;

    clip-path: polygon(
        0 0,
        52% 53%,
        0 100%
    );

    background: #cf98a4;
}

.envelope-front-right {
    inset: 0;

    clip-path: polygon(
        100% 0,
        48% 53%,
        100% 100%
    );

    background: #c68b98;
}

.envelope-front-bottom {
    inset: 0;

    clip-path: polygon(
        0 100%,
        50% 50%,
        100% 100%
    );

    background:
        linear-gradient(180deg, #c88d99, #b97886);
}


/* Flap */

.envelope-flap {
    position: absolute;

    z-index: 6;

    left: 0;
    right: 0;
    top: 0;

    height: 57%;

    transform-origin: top center;

    clip-path: polygon(
        0 0,
        100% 0,
        50% 100%
    );

    background:
        linear-gradient(160deg, #dfaeb7, #c68794);

    backface-visibility: hidden;

    transition:
        transform .9s cubic-bezier(.2,.75,.25,1),
        z-index 0s .4s;
}

.envelope-seal {
    position: absolute;

    left: 50%;
    top: 65%;

    width: 52px;
    height: 52px;

    transform: translate(-50%,-50%);

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #9f6471;
    color: #fff;

    border: 3px solid rgba(255,255,255,.55);

    box-shadow:
        0 6px 20px rgba(84,42,53,.22);

    font-size: 23px;
}


/* Letter content */

.letter-ornament {
    color: #b97886;

    font-size: 24px;
    line-height: 1;

    margin-bottom: 10px;
}

.letter-small {
    margin: 0;

    font-family:var(--font-heading) !important;

    font-size: 11px;
    letter-spacing: .23em;

    color: #825964;
}

.invited-guest-name {
    min-height: 44px;

    margin: 11px 0 4px;

    font-family: var(--font-heading) !important;

    font-size: clamp(25px,4vw,38px);
    font-weight: 600;

    color: #a15f70;
}

.invited-guest-empty {
    min-height: 44px;
}

.letter-rule {
    width: 62px;
    height: 1px;

    margin: 6px 0 12px;

    background: rgba(185,120,134,.55);
}

.letter-intro {
    margin: 0 0 8px;

    font-family:var(--font-heading) !important;

    font-size: 14px;

    color: #695459;
}

.letter-couple {
    margin: 5px 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: .28em;

    white-space: nowrap;

    font-family:var(--font-heading) !important;

    font-size: clamp(22px,4vw,36px);
    font-weight: 400;

    color: #4b383d;
}

.letter-couple i {
    font-family: var(--font-heading) !important;
    font-weight: 400;
    color: #b97886;
}

.letter-date {
    margin: 8px 0 17px;

    font-family:var(--font-heading) !important;

    font-size: 13px;
    letter-spacing: .16em;

    color: #8e6871;
}


/* Button */

.open-invite-button {
    min-width: 158px;
    min-height: 44px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 0;
    border-radius: 999px;

    background:
        linear-gradient(135deg, #aa6978, #c98a98);

    color: #fff;

    font-family:var(--font-heading) !important;
    font-size: 14px;

    cursor: pointer;

    box-shadow:
        0 8px 24px rgba(142,89,101,.23);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.open-invite-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(142,89,101,.28);
}

.invite-gate-note {
    margin: 20px 0 0;

    font-family:var(--font-heading) !important;

    font-size: 11px;
    letter-spacing: .1em;

    color: #9c7b82;
}


/* =========================================================
   OPEN ANIMATION
   ========================================================= */

.invite-gate.opening .envelope-flap {
    transform: rotateX(180deg);
    z-index: 1;
}

.invite-gate.opening .envelope-seal {
    opacity: 0;
}

.invite-gate.opening .opening-letter {
    transform:
        translateY(-105px)
        scale(1);

    box-shadow:
        0 25px 65px rgba(80,45,54,.18);

    transition-delay: .42s;
}

.invite-gate.opening .envelope-front-left,
.invite-gate.opening .envelope-front-right,
.invite-gate.opening .envelope-front-bottom {
    transition: opacity .5s ease 1s;
    opacity: .42;
}


/* Mobile */

@media (max-width:700px) {

    .invite-gate {
        padding: 12px;
    }

    .invite-gate-eyebrow {
        margin-bottom: 14px;
    }

    .opening-envelope {
        width: 96vw;
        height: 360px;
        min-height: 360px;
    }

    .opening-letter {
        left: 5%;
        right: 5%;

        padding: 24px 18px;
    }

    .letter-couple {
        font-size: clamp(19px,5.5vw,27px);
    }

    .invited-guest-name {
        font-size: clamp(24px,8vw,34px);
    }

    .invite-gate.opening .opening-letter {
        transform:
            translateY(-72px)
            scale(1);
    }

}


/* Reduce motion */

@media (prefers-reduced-motion: reduce) {

    .envelope-flap,
    .opening-letter,
    .invite-gate {
        transition-duration: .15s !important;
    }

}


/* =========================================================
   SMOOTH 120HZ-LIKE WEDDING CAROUSEL
   Browser tự đồng bộ theo refresh rate của màn hình
   ========================================================= */

.carousel-feature {
    overflow: hidden !important;
    position: relative !important;
    background: #f5eeee !important;
    contain: paint !important;
}

/* Ảnh chính */
#carouselMainImage {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;

    transform: translate3d(0,0,0);
    will-change: transform;
    backface-visibility: hidden;

    transition: none !important;
}

/* Không còn fade cũ */
.carousel-feature img {
    transition: none !important;
}

/* Lớp ảnh dùng trong lúc swipe */
.carousel-slide-layer {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    transform: translate3d(0,0,0);
    will-change: transform;
    backface-visibility: hidden;

    pointer-events: none;

    background: #f5eeee;
}

/* Thumbnail cũng trượt mượt */
.carousel-thumbs {
    scroll-behavior: smooth !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.carousel-thumb {
    scroll-snap-align: center;
    transform: translateZ(0);
    transition:
        opacity .18s ease,
        transform .18s ease,
        border-color .18s ease !important;
}

.carousel-thumb.active {
    transform: scale(1.035);
}

/* Nút chuyển nhẹ hơn */
.carousel-arrow {
    transition:
        transform .16s ease,
        background-color .16s ease,
        color .16s ease !important;
}

.carousel-arrow:active {
    transform: scale(.91) !important;
}


/* Lightbox chuyển ảnh cũng bỏ fade chậm */
#lightbox img {
    transition: none !important;
    will-change: transform;
    transform: translate3d(0,0,0);
}

#lightbox img.lightbox-changing {
    opacity: 1 !important;
}


/* Mobile: cho phép swipe ngang nhưng không phá cuộn dọc */
@media (max-width:700px) {
    .carousel-feature {
        touch-action: pan-y !important;
    }
}



/* =========================================================
   3D CIRCULAR WEDDING CAROUSEL
   ========================================================= */

.wedding-carousel {
    max-width: 1320px !important;
    overflow: hidden;
}

/* Khung ảnh chính */
.carousel-main {
    position: relative !important;
    display: block !important;

    height: clamp(430px, 52vw, 680px);

    perspective: 1600px;
    perspective-origin: 50% 46%;

    overflow: hidden;

    border-radius: 18px;

    background:
        radial-gradient(
            ellipse at center,
            #fff 0%,
            #fbf4f2 62%,
            #f3e5e5 100%
        );
}


/* Không dùng ảnh chính kiểu cũ nữa */
.carousel-feature.ring-feature {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    background: transparent !important;

    overflow: hidden !important;

    cursor: default !important;
}


/* Stage 3D */
.ring-stage {
    position: absolute;
    inset: 0;

    transform-style: preserve-3d;

    overflow: hidden;
}


/* Từng ảnh */
.ring-card {
    position: absolute;

    left: 50%;
    top: 50%;

    width: clamp(230px, 34%, 440px);
    height: 82%;

    padding: 0;

    border: 0;
    border-radius: 16px;

    overflow: hidden;

    background: #eee;

    transform-style: preserve-3d;
    backface-visibility: hidden;

    box-shadow:
        0 18px 45px rgba(67,40,46,.15);

    cursor: pointer;

    will-change:
        transform,
        opacity,
        filter;

    transition:
        transform 540ms cubic-bezier(.22,.61,.36,1),
        opacity 420ms ease,
        filter 420ms ease,
        box-shadow 420ms ease;

    transform-origin: center center;
}

.ring-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    pointer-events: none;

    user-select: none;

    transform: translateZ(0);
}


/* Trung tâm */
.ring-card[data-distance="0"] {
    z-index: 20;

    opacity: 1;

    transform:
        translate3d(-50%, -50%, 150px)
        rotateY(0deg)
        scale(1);

    filter:
        brightness(1)
        saturate(1);

    box-shadow:
        0 25px 60px rgba(67,40,46,.22);

    cursor: zoom-in;
}


/* Bên phải số 1 */
.ring-card[data-distance="1"] {
    z-index: 15;

    opacity: .94;

    transform:
        translate3d(18%, -50%, 10px)
        rotateY(-19deg)
        scale(.82);

    filter:
        brightness(.94)
        saturate(.92);
}


/* Bên trái số 1 */
.ring-card[data-distance="-1"] {
    z-index: 15;

    opacity: .94;

    transform:
        translate3d(-118%, -50%, 10px)
        rotateY(19deg)
        scale(.82);

    filter:
        brightness(.94)
        saturate(.92);
}


/* Bên phải số 2 */
.ring-card[data-distance="2"] {
    z-index: 10;

    opacity: .72;

    transform:
        translate3d(67%, -50%, -160px)
        rotateY(-30deg)
        scale(.67);

    filter:
        brightness(.86)
        saturate(.82);
}


/* Bên trái số 2 */
.ring-card[data-distance="-2"] {
    z-index: 10;

    opacity: .72;

    transform:
        translate3d(-167%, -50%, -160px)
        rotateY(30deg)
        scale(.67);

    filter:
        brightness(.86)
        saturate(.82);
}


/* Bên phải số 3 */
.ring-card[data-distance="3"] {
    z-index: 5;

    opacity: .42;

    transform:
        translate3d(103%, -50%, -300px)
        rotateY(-39deg)
        scale(.54);

    filter:
        brightness(.76)
        saturate(.70);
}


/* Bên trái số 3 */
.ring-card[data-distance="-3"] {
    z-index: 5;

    opacity: .42;

    transform:
        translate3d(-203%, -50%, -300px)
        rotateY(39deg)
        scale(.54);

    filter:
        brightness(.76)
        saturate(.70);
}


/* Các ảnh còn lại ẩn */
.ring-card[data-hidden="1"] {
    opacity: 0;

    pointer-events: none;

    transform:
        translate3d(-50%, -50%, -500px)
        scale(.4);

    transition:
        transform 480ms cubic-bezier(.22,.61,.36,1),
        opacity 250ms ease;
}


/* Counter */
.ring-counter {
    position: absolute;

    z-index: 50;

    left: 50%;
    bottom: 18px;

    transform: translateX(-50%);

    padding: 8px 16px;

    border-radius: 999px;

    background: rgba(58,38,43,.67);
    color: white;

    font-family:var(--font-heading) !important;

    font-size: 14px;
    letter-spacing: .08em;

    backdrop-filter: blur(10px);

    pointer-events: none;
}


/* Nút trái phải */
.carousel-main > .carousel-arrow {
    position: absolute !important;

    top: 50% !important;

    z-index: 60 !important;

    transform: translateY(-50%) !important;

    width: 52px !important;
    height: 52px !important;

    border-radius: 50% !important;

    background: rgba(255,255,255,.78) !important;

    color: #9b6570 !important;

    box-shadow:
        0 5px 22px rgba(80,45,54,.15);

    backdrop-filter: blur(10px);
}

.carousel-main > .carousel-prev {
    left: 16px !important;
}

.carousel-main > .carousel-next {
    right: 16px !important;
}

.carousel-main > .carousel-arrow:hover {
    background: #b97886 !important;
    color: white !important;

    transform:
        translateY(-50%)
        scale(1.08) !important;
}


/* Thumbnail hiện tại */
.carousel-thumb.active {
    border-color: #b97886 !important;

    transform: scale(1.05);

    box-shadow:
        0 0 0 3px rgba(185,120,134,.13);
}


/* Thêm cảm giác mặt sàn cong nhẹ */
.carousel-main::after {
    content: "";

    position: absolute;

    z-index: 1;

    left: 7%;
    right: 7%;
    bottom: 5%;

    height: 30%;

    border: 1px solid rgba(185,120,134,.14);

    border-radius: 50%;

    transform:
        perspective(700px)
        rotateX(72deg);

    pointer-events: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .carousel-main {
        height: 410px !important;
    }

    .ring-card {
        width: 62%;
        height: 78%;

        border-radius: 12px;
    }

    .ring-card[data-distance="1"] {
        transform:
            translate3d(0%, -50%, -40px)
            rotateY(-22deg)
            scale(.72);
    }

    .ring-card[data-distance="-1"] {
        transform:
            translate3d(-100%, -50%, -40px)
            rotateY(22deg)
            scale(.72);
    }

    .ring-card[data-distance="2"] {
        transform:
            translate3d(39%, -50%, -180px)
            rotateY(-34deg)
            scale(.54);

        opacity: .42;
    }

    .ring-card[data-distance="-2"] {
        transform:
            translate3d(-139%, -50%, -180px)
            rotateY(34deg)
            scale(.54);

        opacity: .42;
    }

    .ring-card[data-distance="3"],
    .ring-card[data-distance="-3"] {
        opacity: 0;
    }

    .carousel-main > .carousel-arrow {
        width: 44px !important;
        height: 44px !important;

        font-size: 34px !important;
    }

    .carousel-main > .carousel-prev {
        left: 5px !important;
    }

    .carousel-main > .carousel-next {
        right: 5px !important;
    }

    .ring-counter {
        bottom: 12px;

        font-size: 12px;

        padding: 6px 11px;
    }

}


/* Respect reduce motion */
@media (prefers-reduced-motion: reduce) {

    .ring-card {
        transition-duration: .12s !important;
    }

}


/* =========================================================
   3D RING - CHỈ KHI XEM ẢNH LỚN
   ========================================================= */

.ring-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000000;

    display: none;
    overflow: hidden;

    background:
      radial-gradient(circle at center,rgba(36,31,28,.86),rgba(5,5,5,.97));

    backdrop-filter: blur(12px);
    perspective: 1800px;
}

.ring-lightbox.open {
    display: block;
}

.ring-lb-stage {
    position: absolute;
    inset: 4% 0 22%;

    perspective: 1800px;
    transform-style: preserve-3d;
}

.ring-lb-card {
    position: absolute;

    left: 50%;
    top: 50%;

    width: min(38vw,570px);
    height: min(72vh,790px);

    padding: 0;
    border: 0;
    border-radius: 12px;

    overflow: hidden;

    background: #171717;

    transform-style: preserve-3d;
    backface-visibility: hidden;

    transition:
      transform .52s cubic-bezier(.22,.61,.36,1),
      opacity .40s ease,
      filter .40s ease;

    will-change: transform;
}

.ring-lb-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #111;
}

/* ảnh giữa */
.ring-lb-card[data-distance="0"] {
    z-index: 30;
    opacity: 1;

    transform:
      translate3d(-50%,-50%,230px)
      rotateY(0)
      scale(1);
}

/* sát trái */
.ring-lb-card[data-distance="-1"] {
    z-index: 20;
    opacity: .72;

    transform:
      translate3d(-128%,-50%,0)
      rotateY(26deg)
      scale(.75);

    filter: brightness(.72);
}

/* sát phải */
.ring-lb-card[data-distance="1"] {
    z-index: 20;
    opacity: .72;

    transform:
      translate3d(28%,-50%,0)
      rotateY(-26deg)
      scale(.75);

    filter: brightness(.72);
}

/* vòng ngoài */
.ring-lb-card[data-distance="-2"] {
    z-index: 12;
    opacity: .44;

    transform:
      translate3d(-179%,-50%,-210px)
      rotateY(39deg)
      scale(.59);

    filter: brightness(.58);
}

.ring-lb-card[data-distance="2"] {
    z-index: 12;
    opacity: .44;

    transform:
      translate3d(79%,-50%,-210px)
      rotateY(-39deg)
      scale(.59);

    filter: brightness(.58);
}

.ring-lb-card[data-distance="-3"] {
    z-index: 5;
    opacity: .20;

    transform:
      translate3d(-220%,-50%,-370px)
      rotateY(48deg)
      scale(.47);
}

.ring-lb-card[data-distance="3"] {
    z-index: 5;
    opacity: .20;

    transform:
      translate3d(120%,-50%,-370px)
      rotateY(-48deg)
      scale(.47);
}

.ring-lb-card[data-hidden="1"] {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%,-50%,-600px) scale(.3);
}

.ring-lb-close {
    position: absolute;
    z-index: 100;

    right: 24px;
    top: 20px;

    width: 46px;
    height: 46px;

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.65);

    background: rgba(20,20,20,.5);
    color: white;

    font-size: 30px;
    cursor: pointer;
}

.ring-lb-arrow {
    position: absolute;
    z-index: 100;
    top: 46%;

    width: 54px;
    height: 54px;

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.55);

    background: rgba(90,58,66,.52);
    color: #fff;

    font-size: 38px;
    cursor: pointer;
}

.ring-lb-prev { left: 22px; }
.ring-lb-next { right: 22px; }

.ring-lb-counter {
    position: absolute;

    left: 50%;
    bottom: 18%;

    transform: translateX(-50%);

    color: white;

    font-family:var(--font-heading);
    font-size: 18px;
    letter-spacing: .08em;
}

.ring-lb-thumbs-wrap {
    position: absolute;

    left: 8%;
    right: 8%;
    bottom: 6%;

    display: grid;
    grid-template-columns: 42px minmax(0,1fr) 42px;
    gap: 8px;
    align-items: center;
}

.ring-lb-thumbs {
    display: flex;
    gap: 8px;

    overflow-x: auto;
    scrollbar-width: none;

    scroll-behavior: smooth;
}

.ring-lb-thumbs::-webkit-scrollbar {
    display: none;
}

.ring-lb-thumb {
    flex: 0 0 72px;

    width: 72px;
    height: 56px;

    padding: 0;

    overflow: hidden;

    border: 2px solid transparent;
    border-radius: 7px;

    background: transparent;

    opacity: .65;
}

.ring-lb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ring-lb-thumb.active {
    border-color: #d2919f;
    opacity: 1;
}

.ring-thumb-arrow {
    border: 0;
    background: transparent;
    color: white;

    font-size: 32px;
}

.ring-lb-help {
    position: absolute;

    bottom: 1.5%;
    left: 50%;

    transform: translateX(-50%);

    color: rgba(255,255,255,.58);

    font-size: 12px;
}

@media(max-width:700px) {
    .ring-lb-stage {
        inset: 6% 0 25%;
    }

    .ring-lb-card {
        width: 72vw;
        height: 62vh;
    }

    .ring-lb-card[data-distance="-1"] {
        transform:
          translate3d(-101%,-50%,-70px)
          rotateY(24deg)
          scale(.68);
    }

    .ring-lb-card[data-distance="1"] {
        transform:
          translate3d(1%,-50%,-70px)
          rotateY(-24deg)
          scale(.68);
    }

    .ring-lb-card[data-distance="-2"],
    .ring-lb-card[data-distance="2"],
    .ring-lb-card[data-distance="-3"],
    .ring-lb-card[data-distance="3"] {
        opacity: 0;
    }

    .ring-lb-prev { left: 6px; }
    .ring-lb-next { right: 6px; }

    .ring-lb-thumbs-wrap {
        left: 4%;
        right: 4%;
        bottom: 7%;
    }

    .ring-lb-counter {
        bottom: 20%;
    }
}


/* =========================================================
   FINAL NAME + SIGNATURE + GALLERY ALIGNMENT FIX
   ========================================================= */

/* Hero: nam ♥ nữ, luôn cân giữa */
.hero-content h1 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: .22em !important;
    white-space: nowrap !important;

    width: 100% !important;
    max-width: 100% !important;

    font-family:var(--font-heading) !important;
    font-size: clamp(32px, 5.1vw, 72px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

.hero-content h1 span {
    display: inline-block !important;
    order: initial !important;
}

.hero-content h1 i {
    display: inline-block !important;
    order: initial !important;

    font-family:var(--font-heading) !important;
    font-style: normal !important;

    font-size: .52em !important;
    line-height: 1 !important;

    color: #f2c4cd !important;

    margin: 0 .08em !important;
    transform: translateY(-.03em);
}


/* Story signature: không xuống dòng */
.signature {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;

    white-space: nowrap !important;

    width: 100% !important;

    font-family: var(--font-heading) !important;
    font-size: clamp(28px,3.3vw,42px) !important;
    line-height: 1.2 !important;

    color: #b97886 !important;
}

.signature span {
    display: inline-block !important;

    margin: 0 .18em !important;

    font-family:var(--font-heading) !important;
    font-size: .65em !important;

    color: #c98b99 !important;
}


/* Footer đồng bộ */
.site-footer h2 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.site-footer h2 span {
    margin: 0 .2em !important;
    color: #d9a0ad !important;
    font-style: normal !important;
}


/* =========================================================
   GALLERY ALIGNMENT
   ========================================================= */

.gallery-section {
    overflow: hidden !important;
}

.wedding-carousel {
    width: min(100%, 1320px) !important;
    max-width: 1320px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 20px !important;

    box-sizing: border-box !important;
}

/* Khung chính luôn đúng giữa */
.carousel-main {
    position: relative !important;

    width: 100% !important;

    display: grid !important;
    grid-template-columns: 54px minmax(0,1fr) 54px !important;
    align-items: center !important;

    gap: 14px !important;

    overflow: visible !important;
}

/* Ảnh chính chiếm đúng cột giữa */
.carousel-feature {
    grid-column: 2 !important;

    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    height: clamp(420px, 48vw, 650px) !important;

    overflow: hidden !important;

    border-radius: 14px !important;
    background: #f3e8e8 !important;
}

.carousel-feature img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    margin: 0 auto !important;

    display: block !important;

    background: #f3e8e8 !important;
}

/* Nút trái phải đúng vị trí */
.carousel-main > .carousel-prev {
    grid-column: 1 !important;

    position: static !important;
    transform: none !important;

    margin: 0 auto !important;
}

.carousel-main > .carousel-next {
    grid-column: 3 !important;

    position: static !important;
    transform: none !important;

    margin: 0 auto !important;
}

/* Dải thumbnail khớp theo khung */
.carousel-thumbs-wrap {
    width: 100% !important;

    margin-top: 16px !important;

    display: grid !important;
    grid-template-columns: 36px minmax(0,1fr) 36px !important;
    align-items: center !important;

    gap: 8px !important;
}

.carousel-thumbs {
    min-width: 0 !important;
}


/* Mobile */
@media (max-width: 700px) {

    .hero-content h1 {
        font-size: clamp(22px,6.2vw,38px) !important;
        gap: .12em !important;
    }

    .signature {
        font-size: clamp(22px,6vw,32px) !important;
        justify-content: center !important;
    }

    .story-copy {
        text-align: center !important;
    }

    .wedding-carousel {
        padding: 8px !important;
    }

    .carousel-main {
        grid-template-columns: 0 minmax(0,1fr) 0 !important;
        gap: 0 !important;
    }

    .carousel-feature {
        height: 62vw !important;
        min-height: 250px !important;
        max-height: 420px !important;
    }

    .carousel-main > .carousel-prev,
    .carousel-main > .carousel-next {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        z-index: 10 !important;
    }

    .carousel-main > .carousel-prev {
        left: 8px !important;
    }

    .carousel-main > .carousel-next {
        right: 8px !important;
    }

}


/* =========================================================
   HERO NAME - FINAL FIX
   Tên cặp đôi
   ========================================================= */

.hero-content .couple-hero-name {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 1400px !important;

    margin: 0 auto !important;
    padding: 0 16px !important;

    white-space: nowrap !important;

    font-family:var(--font-heading) !important;
    font-size: clamp(34px, 5vw, 70px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
}

/* Xóa tác động order cũ */
.hero-content .couple-hero-name .groom-name {
    order: 1 !important;
}

.hero-content .couple-hero-name .couple-heart {
    order: 2 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 .28em !important;

    font-family:var(--font-heading) !important;
    font-style: normal !important;
    font-size: .43em !important;

    color: #efc0ca !important;

    transform: none !important;
}

.hero-content .couple-hero-name .bride-name {
    order: 3 !important;
}

.hero-content .couple-hero-name span {
    display: inline-block !important;
    flex: 0 0 auto !important;
}

/* PC nhỏ */
@media (max-width: 1100px) {
    .hero-content .couple-hero-name {
        font-size: clamp(30px, 4.6vw, 55px) !important;
    }
}

/* Điện thoại */
@media (max-width: 700px) {

    .hero-content .couple-hero-name {
        font-size: clamp(20px, 5.7vw, 33px) !important;
        padding: 0 8px !important;
    }

    .hero-content .couple-hero-name .couple-heart {
        margin: 0 .20em !important;
        font-size: .48em !important;
    }
}


/* ===== COUPLE HEART EVERYWHERE ===== */

.couple-heart,
.sign-heart,
.footer-couple i {
    font-style: normal !important;
    color: #d79aaa !important;
}

.signature,
.footer-couple {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: .22em !important;
}

.signature .sign-heart {
    font-family:var(--font-heading) !important;
    font-size: .65em !important;
}

.footer-couple i {
    font-family:var(--font-heading) !important;
    font-size: .65em !important;
}


/* ===== FIREWORKS CANVAS ===== */

#fireworksCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    pointer-events: none;
    opacity: 1;
    transition: opacity .8s ease;
}

#fireworksCanvas.fireworks-done {
    opacity: 0;
}


/* ===== HEADER COUPLE NAMES ===== */

.monogram {
    display: inline-flex !important;
    align-items: center !important;
    gap: .28em !important;

    font-family: var(--font-heading) !important;
    font-size: 25px !important;
    font-weight: 600 !important;

    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

.monogram span {
    margin: 0 .08em !important;

    font-family:var(--font-heading) !important;
    font-size: .62em !important;

    color: #f0bcc8 !important;
}

@media(max-width:700px) {
    .monogram {
        font-size: 22px !important;
    }
}


/* =========================================================
   COUPLE NAMES - HANDWRITING FONT
   ========================================================= */

/* Tên cô dâu chú rể ở HERO */
.hero-content .couple-hero-name,
.hero-content .couple-hero-name span {
    font-family: var(--font-heading) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* Trái tim giữa hai tên */
.hero-content .couple-hero-name .couple-heart {
    font-family:var(--font-heading) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: #efb0bf !important;
    font-size: .42em !important;
    margin: 0 .32em !important;
}


/* Tên cặp đôi ở góc trái */
.monogram,
.monogram > *:not(span) {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.monogram {
    font-size: 27px !important;
}

.monogram span {
    font-family:var(--font-heading) !important;
    font-style: normal !important;
    color: #efb0bf !important;
    font-size: .58em !important;
}


/* Chữ ký Tên cặp đôi */
.signature,
.signature > span:not(.sign-heart),
.groom-sign,
.bride-sign {
    font-family: var(--font-heading) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

.signature .sign-heart {
    font-family:var(--font-heading) !important;
    font-style: normal !important;
    color: #c98595 !important;
}


/* Tên cặp đôi ở Footer */
.footer-couple,
.footer-couple > span {
    font-family: var(--font-heading) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

.footer-couple > i {
    font-family:var(--font-heading) !important;
    font-style: normal !important;
    color: #e2a5b3 !important;
}


/* Desktop - hero mềm và thanh thoát hơn */
@media (min-width: 701px) {
    .hero-content .couple-hero-name {
        font-size: clamp(48px, 5.7vw, 82px) !important;
        line-height: 1.05 !important;
    }

    .signature {
        font-size: clamp(32px, 3.1vw, 46px) !important;
    }

    .footer-couple {
        font-size: clamp(32px, 3.2vw, 48px) !important;
    }
}


/* Mobile */
@media (max-width: 700px) {
    .hero-content .couple-hero-name {
        font-size: clamp(27px, 7.2vw, 40px) !important;
        line-height: 1.05 !important;
    }

    .hero-content .couple-hero-name .couple-heart {
        margin: 0 .20em !important;
    }

    .monogram {
        font-size: 23px !important;
    }

    .signature {
        font-size: clamp(25px, 6.5vw, 34px) !important;
    }

    .footer-couple {
        font-size: clamp(26px, 7vw, 36px) !important;
    }
}