/* ================================================
   MỸ HẠNH & KIM QUI — Wedding Website Stylesheet
   ================================================ */

:root {
    --white: #FFFFFF;
    --cream: #FAF7F4;
    --pink: #F2B8A0;
    --pink-light: #F9EDE8;
    --gold: #C4956A;
    --green: #4A6741;
    --dark: #2C2C2C;
    --gray: #7A7A7A;
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-script: 'Great Vibes', cursive;
    --font-sans: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── RESET ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); color: var(--dark); background: var(--white); overflow-x: hidden; }
img { max-width: 100%; display: block; }

/* ── LOADING SCREEN ── */
#loader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--cream);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
#loader.hidden { opacity: 0; visibility: hidden; }
.loader-logo { font-family: var(--font-script); font-size: clamp(36px,5vw,52px); color: var(--dark); margin-bottom: 24px; }
.loader-bar { width: 160px; height: 1px; background: rgba(196,149,106,0.2); position: relative; overflow: hidden; }
.loader-bar::after {
    content: ''; position: absolute; left: -100%; top: 0; height: 100%;
    width: 100%; background: var(--gold); animation: loadBar 1.2s ease forwards;
}
@keyframes loadBar { to { left: 0; } }

/* ── NAVIGATION ── */
nav {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    padding: 20px 60px;
    display: flex; align-items: center; justify-content: space-between;
    transition: all 0.35s ease;
}
nav.scrolled {
    background: rgba(255,255,255,0.97);
    padding: 13px 60px;
    box-shadow: 0 2px 24px rgba(0,0,0,0.07);
}
.nav-logo {
    font-family: var(--font-script); font-size: 28px;
    color: var(--white); text-decoration: none; transition: color 0.3s;
}
nav.scrolled .nav-logo { color: var(--dark); }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,0.88); text-decoration: none; transition: color 0.3s;
}
nav.scrolled .nav-links a { color: var(--dark); }
.nav-links a:hover { color: #ED5A46; }
.hamburger {
    display: none; flex-direction: column; gap: 5px;
    cursor: pointer; background: none; border: none; padding: 4px;
}
.hamburger span { width: 24px; height: 2px; background: var(--white); transition: all 0.3s; }
nav.scrolled .hamburger span { background: var(--dark); }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── HERO ── */
#hero {
    height: 125vh; min-height: 700px; position: relative;
    display: flex; align-items: center; justify-content: center;
    text-align: center; overflow: hidden;
    background: linear-gradient(160deg, #3a1f14 0%, #5c3020 40%, #7a4030 70%, #3a2010 100%);
}
#hero::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 280px; pointer-events: none; z-index: 2;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 35%, rgba(255,255,255,0.72) 65%, rgba(255,255,255,0.94) 85%, #ffffff 100%);
}
#hero.has-bg-img { background: none; }
#hero.has-bg-img .hero-bg-img {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    transform: scale(1.05); transition: transform 8s ease; will-change: transform;
}
#hero.has-bg-img:hover .hero-bg-img { transform: scale(1); }
.hero-overlay {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(242,184,160,0.1) 0%, transparent 65%),
                linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.58) 100%);
}
#hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; will-change: transform; }
.hero-content { position: relative; z-index: 2; color: var(--white); padding: 0 20px; transform: translateY(-7vh); }
.hero-tag {
    font-family: var(--font-script); font-size: clamp(28px,5vw,40px); color: #ED5A46;
    display: block; margin-bottom: 16px;
    opacity: 0; animation: fadeInDown 1s 0.4s ease forwards;
}
.hero-names {
    font-family: var(--font-serif); font-size: clamp(46px, 8vw, 90px);
    font-weight: 300; letter-spacing: 8px; text-transform: uppercase; line-height: 1.1;
    margin-bottom: 20px; opacity: 0; animation: fadeInUp 1s 0.7s ease forwards;
}
.hero-names .amp {
    font-family: var(--font-script); font-size: 0.72em;
    text-transform: none; letter-spacing: 0; color: #ED5A46; margin: 0 14px 0 14px; padding-right: 10px;
}
.hero-date {
    font-size: 16px; letter-spacing: 5px; text-transform: uppercase;
    color: rgba(255,255,255,0.62); margin-bottom: 40px;
    opacity: 0; animation: fadeInUp 1s 1s ease forwards;
}
.hero-btns {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
    opacity: 0; animation: fadeInUp 1s 1.3s ease forwards;
}
.hero-badge {
    width: 110px; display: block; margin: 0 auto 20px;
    opacity: 0; animation: fadeInDown 1s 0.55s ease forwards;
    position: relative; z-index: 2;
    filter: brightness(1.6) saturate(0.5);
}

/* ── COUNTDOWN ── */
.hero-countdown {
    display: flex; gap: 32px; justify-content: center; margin-top: 40px;
    opacity: 0; animation: fadeInUp 1s 1.6s ease forwards, cd-breathe 4s 2.8s ease-in-out infinite;
}
@keyframes cd-breathe {
    0%, 100% { filter: brightness(1); }
    50%       { filter: brightness(1.18) drop-shadow(0 0 12px rgba(255,255,255,0.18)); }
}
.cd-unit { text-align: center; }
.cd-num {
    font-family: 'Inter', sans-serif; font-size: clamp(28px,4.5vw,44px); font-weight: 200;
    color: var(--white); line-height: 1; display: block;
    width: 64px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.cd-label {
    font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
    color: rgba(255,255,255,0.55); margin-top: 6px; display: block;
}
.cd-sep {
    font-family: var(--font-serif); font-size: clamp(24px,4vw,40px); font-weight: 300;
    color: rgba(255,255,255,0.3); line-height: 1; padding-top: 2px;
}

/* ── BUTTONS ── */
.btn {
    font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
    padding: 14px 34px; text-decoration: none; transition: all 0.3s;
    cursor: pointer; border: none; display: inline-block;
}
.btn-outline { border: 1px solid rgba(255,255,255,0.65); color: var(--white); background: transparent; }
.btn-outline:hover { background: rgba(255,255,255,0.1); }
.btn-pink { background: var(--pink); color: var(--white); border: 1px solid var(--pink); }
.btn-pink:hover { background: #e09880; border-color: #e09880; }
.btn-gold { background: var(--gold); color: var(--white); border: 1px solid var(--gold); }
.btn-gold:hover { background: #A67A52; border-color: #A67A52; color: var(--white); }
.btn-pulse { position: relative; overflow: hidden; }
.btn-pulse::after {
    content: '';
    position: absolute;
    top: -50%; left: -75%;
    width: 50%; height: 200%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    animation: btn-shimmer 4s ease-in-out infinite;
}
.btn-pulse:hover::after { animation: none; }
@keyframes btn-shimmer {
    0%     { left: -75%; }
    12.5%  { left: 175%; }
    12.6%  { left: -75%; }
    100%   { left: -75%; }
}

/* ── SHARED SECTION ── */
section { padding: 100px 60px; position: relative; }
.section-tag { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gray); text-align: center; margin-bottom: 12px; }
.section-title { font-family: var(--font-serif); font-size: clamp(26px, 4vw, 42px); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; text-align: center; color: var(--dark); margin-bottom: 8px; }
.section-script { font-family: var(--font-script); font-size: 28px; color: var(--dark); letter-spacing: 4px; text-align: center; }
.divider { width: 50px; height: 1px; background: var(--gold); margin: 14px auto 52px; }
.leaf { position: absolute; pointer-events: none; }

/* ── DECO LEAF (PNG watercolor — thay thế SVG leaf) ── */
.deco-leaf {
    position: absolute;
    pointer-events: none;
    user-select: none;
    will-change: transform;
    z-index: 0;
}

/* ── FADE IN ── */
.fade-in { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ── COUPLE ── */
#couple { background: var(--white); overflow: hidden; }
.couple-grid { display: grid; grid-template-columns: 1fr 480px 1fr; gap: 24px; align-items: center; max-width: 1400px; margin: 0 auto; }

/* Cột bên: tên + vai trò + illustration */
.couple-card {
    text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px 8px;
}
.couple-name { font-family: var(--font-serif); font-size: clamp(18px,2.2vw,26px); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 4px; }
.couple-role { font-family: var(--font-script); font-size: clamp(22px,3vw,32px); color: var(--gold); margin-bottom: 24px; }
.couple-illus {
    width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto;
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* Cột giữa: ảnh cưới + frame overlay */
.couple-photo-wrap {
    position: relative;
    width: 100%; max-width: 480px; margin: 0 auto;
}
.couple-main-photo {
    width: 100%;
    display: block;
}
.couple-frame { display: none; }

/* ── STORY TITLE WATERMARK ── */
.story-title-wrap { position: relative; text-align: center; padding: 60px 0 260px; }
.story-title-leaf {
    position: absolute; top: 140px; left: 50%;
    transform: translate(-50%, -50%);
    width: 560px; max-width: 85vw;
    opacity: 0.85; pointer-events: none; z-index: 0;
}
.story-title-text { display: inline-block; position: relative; z-index: 1; }
.title-line { display: block; transition-duration: 1.8s; transition-delay: 0.5s; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.title-line.fade-in { transform: translateY(20px); }
.title-line--delay { transition-delay: 1.5s; }
.story-title-wrap .section-title { text-align: left; }
.story-title-wrap .section-script { text-align: right; margin-top: 50px; }
.story-title-wrap--quote .section-title {
    font-family: var(--font-script);
    font-size: 36px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 4px;
}
.story-title-wrap--quote .section-script { font-size: 35px; font-weight: 400; letter-spacing: 2px; }
.lq-heart { display: inline-block; opacity: 0; font-size: 22px; vertical-align: middle; }
.bouquet-lottie { display: inline-block; width: 52px; height: 52px; vertical-align: middle; }
.lq-heart--active { animation: heart-pulse 2s ease-out 1 both; }
@keyframes heart-pulse {
    0%   { transform: scale(1);   opacity: 1; }
    20%  { transform: scale(1.5); opacity: 1; }
    40%  { transform: scale(1);   opacity: 1; }
    65%  { transform: scale(1.5); opacity: 1; }
    85%  { transform: scale(1);   opacity: 1; }
    100% { transform: scale(1);   opacity: 0.5; }
}
.story-title-wrap--quote .section-script + .section-script { margin-top: 0; }

/* ── HANDWRITE ANIMATION ── */
.handwrite {
    opacity: 0;
}
@keyframes handwrite {
    0%   { opacity: 1; clip-path: inset(0 100% 0 0); }
    100% { opacity: 1; clip-path: inset(0 0% 0 0); }
}

/* ── TIMELINE ── */
#story { background: var(--white); overflow: hidden; position: relative; }

/* ── STORY PARALLAX LEAVES ── */
.story-scroll-leaf {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
.story-scroll-leaf--right {
    top: 490px;
    right: 2%;
    width: 120px;
    opacity: 0.38;
}
.story-scroll-leaf--left {
    top: 840px;
    left: 1%;
    width: 200px;
    opacity: 0.32;
    transform: scaleX(-1);
}
.timeline { position: relative; max-width: 880px; margin: 0 auto; }
.timeline::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
    background: linear-gradient(to bottom, transparent, #ED5A46 10%, #ED5A46 90%, transparent);
    transform: translateX(-50%);
}
.tl-item { display: grid; grid-template-columns: 1fr 60px 1fr; margin-bottom: 64px; align-items: center; opacity: 0; transition: opacity 0.65s ease, transform 0.65s ease; }
.tl-item:nth-child(odd)  { transform: translateX(-24px); }
.tl-item:nth-child(even) { transform: translateX(24px); }
.tl-item.visible { opacity: 1; transform: translateX(0); }
.tl-dot { grid-column: 2; display: flex; align-items: center; justify-content: center; z-index: 1; }
.tl-dot-inner { width: 12px; height: 12px; border-radius: 50%; background: #ED5A46; border: 2px solid var(--white); box-shadow: 0 0 0 2px #ED5A46; }
.tl-photo {
    width: 348px; height: 348px; border-radius: 50%;
    overflow: hidden; justify-self: center;
    background: linear-gradient(135deg, #fce8dc, #f0c8b0);
    display: flex; align-items: center; justify-content: center; font-size: 44px;
}
.tl-photo img { width: 100%; height: 100%; object-fit: cover; }
.tl-item:nth-child(2) .tl-photo img { object-position: left center; }
.tl-item:nth-child(3) .tl-photo img { object-position: center 55%; }
.tl-content { padding: 0 32px; }
.tl-item:nth-child(odd) .tl-content  { text-align: right; }
.tl-item:nth-child(even) .tl-photo   { grid-column: 1; grid-row: 1; }
.tl-item:nth-child(even) .tl-dot     { grid-column: 2; grid-row: 1; }
.tl-item:nth-child(even) .tl-content { grid-column: 3; grid-row: 1; text-align: left; }
.tl-title { font-family: var(--font-serif); font-size: clamp(22px,2.75vw,30px); font-weight: 700; font-style: italic; color: var(--dark); margin-bottom: 8px; }
.tl-date  { font-family: var(--font-script); font-size: clamp(16px,2vw,22px); color: #ED5A46; margin-bottom: 30px; }
.tl-text  { font-size: 18px; color: var(--gray); line-height: 1.85; margin-bottom: 12px; text-align: justify; }
.read-more { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; transition: color 0.3s; }
.read-more:hover { color: var(--dark); }
/* ── TIMELINE DECO (all breakpoints) ── */
.tl-title { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.tl-mobile-deco { display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: visible; }
.tl-deco--vinyl { width: 116px; height: 116px; border-radius: 50%; overflow: hidden; background: #111; box-shadow: 0 2px 12px rgba(0,0,0,0.18); }
.tl-deco--vinyl img { width: 100%; height: 100%; object-fit: cover; animation: vinyl-spin 18s linear infinite; }
.tl-deco--hearts { position: relative; width: 68px; height: 64px; }
.tl-deco--hearts span { position: absolute; bottom: 6px; line-height: 1; animation: heart-float 2s ease-out infinite; }
.tl-deco--hearts span:nth-child(1) { left: 2px;  font-size: 12px; animation-delay: 0s;    animation-duration: 2s; }
.tl-deco--hearts span:nth-child(2) { left: 18px; font-size: 20px; animation-delay: 0.55s; animation-duration: 2.3s; }
.tl-deco--hearts span:nth-child(3) { left: 40px; font-size: 12px; animation-delay: 1.1s;  animation-duration: 1.8s; }
.tl-deco--hearts span:nth-child(4) { left: 10px; font-size: 16px; animation-delay: 1.6s;  animation-duration: 2.1s; }
.tl-deco--hearts span:nth-child(5) { left: 32px; font-size: 10px; animation-delay: 0.8s;  animation-duration: 1.9s; }
.tl-deco--couple span { font-size: 44px; line-height: 1; display: block; animation: couple-walk 1.3s ease-in-out infinite; }
.tl-deco--zodiac { flex-direction: column; gap: 0; align-items: center; }
.deco-tiger { font-size: 22px; line-height: 1.2; display: block; animation: tiger-sway 1.6s ease-in-out infinite; transform-origin: bottom center; }
.deco-dog   { font-size: 22px; line-height: 1.2; display: block; animation: dog-wag   0.7s ease-in-out infinite; transform-origin: bottom left; }

/* ── GALLERY ── */
#gallery { background: var(--pink-light); padding: 100px 40px; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 1200px; margin: 0 auto 44px; }
.g-item { overflow: hidden; position: relative; cursor: pointer; }
.g-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.g-item:nth-child(6) { grid-column: span 2; }
.g-ph { width: 100%; padding-top: 75%; position: relative; background: linear-gradient(135deg, #e8d5c4, #d4b8a0); }
.g-item:nth-child(1) .g-ph { padding-top: 50%; }
.g-item:nth-child(6) .g-ph { padding-top: 37.5%; }
.g-ph span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 36px; }
.g-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-overlay {
    position: absolute; inset: 0; background: rgba(242,184,160,0);
    display: flex; align-items: center; justify-content: center; transition: background 0.3s;
}
.g-item:hover .g-overlay { background: rgba(242,184,160,0.42); }
.g-overlay em { font-size: 26px; color: white; opacity: 0; transition: opacity 0.3s; font-style: normal; }
.g-item:hover .g-overlay em { opacity: 1; }
.gallery-cta { text-align: center; }

/* ── LIGHTBOX ── */
#lightbox {
    display: none; position: fixed; inset: 0; z-index: 5000;
    background: rgba(0,0,0,0.92); align-items: center; justify-content: center;
    padding: 20px;
}
#lightbox.open { display: flex; }
.lb-inner { position: relative; max-width: 900px; max-height: 85vh; width: 100%; }
.lb-img { width: 100%; max-height: 80vh; object-fit: contain; display: block; }
.lb-placeholder { width: 100%; height: 500px; background: #1a1a1a; display: flex; align-items: center; justify-content: center; font-size: 80px; }
.lb-close {
    position: absolute; top: -48px; right: 0;
    font-size: 28px; color: rgba(255,255,255,0.7); cursor: pointer; background: none; border: none;
    transition: color 0.2s; line-height: 1;
}
.lb-close:hover { color: #ED5A46; }
.lb-prev, .lb-next {
    position: fixed; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7); font-size: 20px; width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s; user-select: none;
}
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,0.18); color: var(--white); }
.lb-caption { text-align: center; color: rgba(255,255,255,0.55); font-size: 12px; letter-spacing: 1px; margin-top: 14px; }
.lb-counter { text-align: center; color: rgba(255,255,255,0.3); font-size: 11px; letter-spacing: 2px; margin-top: 6px; }

/* ── EVENTS ── */
#events { background: var(--white); padding-bottom: 160px; }
#events .section-script {
    font-family: var(--font-serif);
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; padding-top: 130px; }
.ev-card {
    border: 1px solid rgba(196,149,106,0.22);
    border-radius: 200px 200px 8px 8px;
    padding: 16px 32px 40px;
    text-align: center;
    background: var(--cream);
    display: flex; flex-direction: column; align-items: center;
    transition: all 0.3s; position: relative; overflow: visible;
}
.ev-card:hover { box-shadow: 0 10px 44px rgba(0,0,0,0.07); transform: translateY(-4px); }
.ev-icon { margin-top: -76px; margin-bottom: 22px; }
.ev-icon img { width: 96px; height: auto; display: block; margin: 0 auto; }
.ev-label { font-family: var(--font-serif); font-size: 25px; font-weight: 700; letter-spacing: 2px; color: var(--dark); margin-bottom: 10px; }
.ev-name { font-family: var(--font-sans); font-size: 20px; color: var(--gray); margin-bottom: 0; line-height: 2.1; }
.ev-info { font-size: 20px; color: var(--gray); line-height: 2.1; margin-bottom: 24px; flex: 1; width: 100%; }
.ev-info strong { color: var(--gray); font-weight: 400; }
.ev-map-link {
    display: inline-block; margin-top: 2px;
    font-size: 15px; letter-spacing: 1px;
    color: #ED5A46; text-decoration: none;
    border-bottom: 1px solid rgba(237,90,70,0.3);
    transition: color 0.2s, border-color 0.2s;
}
.ev-map-link:hover { color: #c94430; border-color: #c94430; }

/* ── EVENTS GUEST NOTE ── */
.ev-guest-note {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    max-width: 1200px; margin: 32px auto 0;
    background: rgba(196,149,106,0.08);
    border: 1px solid rgba(196,149,106,0.3);
    border-radius: 16px; padding: 14px 28px;
}
.ev-guest-title {
    font-family: var(--font-serif); font-size: 15px; font-weight: 700;
    letter-spacing: 1.5px; color: var(--dark);
    text-transform: uppercase; white-space: nowrap;
}
.ev-guest-arrow { color: var(--gold); font-size: 18px; line-height: 1; }
.ev-guest-link {
    font-family: var(--font-sans); font-size: 14px;
    color: #ED5A46; text-decoration: none;
    border-bottom: 1px solid rgba(237,90,70,0.3);
    transition: color 0.2s, border-color 0.2s; white-space: nowrap;
}
.ev-guest-link:hover { color: #c94430; border-color: #c94430; }

.ev-card--main {
    border: 1.5px solid rgba(196,149,106,0.55);
    background: #FDF0EA;
    box-shadow: 0 8px 32px rgba(196,149,106,0.15);
}
.ev-card--main:hover { transform: translateY(-4px); }
.ev-card-badge {
    position: absolute;
    top: 18px;
    font-family: var(--font-sans);
    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(196,149,106,0.1);
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid rgba(196,149,106,0.3);
}
@keyframes ev-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

/* ── THANK YOU ── */
#thankyou { background: var(--white); text-align: center; padding: 90px 60px; }
.ty-title { font-family: var(--font-serif); font-size: clamp(26px, 4vw, 42px); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; max-width: 680px; margin: 0 auto 12px; line-height: 1.55; }
.ty-sub { font-family: var(--font-script); font-size: 28px; color: var(--dark); letter-spacing: 4px; margin-bottom: 52px; }
.counters { display: flex; justify-content: center; gap: 80px; flex-wrap: wrap; }
.counter-num { font-family: var(--font-serif); font-size: clamp(40px,5vw,60px); font-weight: 300; color: var(--dark); line-height: 1; margin-bottom: 8px; }
.counter-lbl { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gray); }

/* ── FRIENDS ── */
#friends { background: var(--cream); text-align: center; }
.friends-row { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; max-width: 900px; margin: 0 auto; }
.friend { text-align: center; }
.friend-photo {
    width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 12px;
    border: 2px solid var(--gold); overflow: hidden;
    background: linear-gradient(135deg, #ece0d4, #d8c4b0);
    display: flex; align-items: center; justify-content: center; font-size: 46px;
    transition: transform 0.3s;
}
.friend-photo img { width: 100%; height: 100%; object-fit: cover; }
.friend:hover .friend-photo { transform: scale(1.07); }
.friend-name { font-family: var(--font-serif); font-size: 15px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; }
.friend-role { font-family: var(--font-script); font-size: 17px; color: var(--gold); }

/* ── MOMENTS SLIDER ── */
#moments {
    background: var(--white);
    padding: 100px 0 80px;
    text-align: center;
    overflow: hidden;
}
.moments-header {
    max-width: 720px;
    margin: 0 auto 56px;
    padding: 0 24px;
}
#moments .section-title { margin-bottom: 8px; }
.moments-sub {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 400;
    color: var(--gray);
    letter-spacing: 0;
    line-height: 1.75;
    text-align: center;
    margin-top: 8px;
}

.ms-rows { display: flex; flex-direction: column; gap: 14px; }
.ms-viewport { width: 100%; overflow: hidden; cursor: grab; }
.ms-viewport.is-grabbing { cursor: grabbing; }

.ms-track {
    display: flex;
    gap: 14px;
    will-change: transform;
    user-select: none;
}

.ms-slide { flex-shrink: 0; }

.ms-card-wrap {
    width: 320px;
    height: 213px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
}
.ms-img-rotated {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 213px !important;
    height: 320px !important;
    transform: translate(-50%, -50%) rotate(-90deg) !important;
}
.ms-card-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

@media (max-width: 1439px) and (min-width: 600px) {
    .ms-card-wrap { width: 260px; height: 173px; }
    .ms-img-rotated { width: 173px !important; height: 260px !important; }
    .ms-rows      { gap: 12px; }
    .ms-track     { gap: 12px; }
}
@media (max-width: 599px) {
    .ms-card-wrap { width: 150px; height: 120px; }
    .ms-img-rotated { width: 120px !important; height: 150px !important; }
    .ms-rows      { gap: 8px; }
    .ms-track     { gap: 8px; }
}

/* ── RSVP ── */
#rsvp { background: var(--white); }
.rsvp-wrap { max-width: 580px; margin: 0 auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.fg { margin-bottom: 22px; }
.fg label { display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; }
.fg input, .fg textarea {
    width: 100%; padding: 11px 0; border: none;
    border-bottom: 1px solid rgba(196,149,106,0.4); background: transparent;
    font-family: var(--font-sans); font-size: 14px; color: var(--dark); outline: none; transition: border-color 0.3s;
}
.fg input:focus, .fg textarea:focus { border-bottom-color: var(--gold); }
.fg textarea { resize: none; height: 80px; }
.fg input.error, .fg textarea.error { border-bottom-color: #e07070; }
.radio-row { display: flex; gap: 24px; margin-top: 8px; flex-wrap: wrap; }
.radio-opt { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; color: var(--gray); }
.radio-opt input { width: auto; padding: 0; border: none; accent-color: #ED5A46; }
.btn-submit {
    width: 100%; padding: 16px; background: var(--pink); color: var(--white);
    border: none; font-family: var(--font-sans); font-size: 11px; letter-spacing: 3px;
    text-transform: uppercase; cursor: pointer; transition: background 0.3s; margin-top: 8px;
}
.btn-submit:hover { background: #e09880; }
.btn-submit:disabled { background: #d4bab0; cursor: default; }
.form-ok { display: none; text-align: center; padding: 50px 20px; background: var(--pink-light); }
.form-ok h3 { font-family: var(--font-script); font-size: 38px; color: var(--gold); margin-bottom: 12px; }
.form-ok p { font-size: 14px; color: var(--gray); line-height: 1.8; }

/* ── INSTAGRAM ── */
#instagram { background: var(--cream); text-align: center; }
.ig-handle { font-size: 13px; letter-spacing: 2px; color: var(--gray); margin-bottom: 40px; }
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; max-width: 1000px; margin: 0 auto; }
.ig-item {
    aspect-ratio: 1; overflow: hidden; position: relative; cursor: pointer;
    background: linear-gradient(135deg, #f0dece, #dfc8b0);
    display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.ig-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ig-over { position: absolute; inset: 0; background: rgba(242,184,160,0); display: flex; align-items: center; justify-content: center; transition: background 0.3s; }
.ig-item:hover .ig-over { background: rgba(242,184,160,0.52); }
.ig-over em { font-size: 20px; opacity: 0; transition: opacity 0.3s; font-style: normal; }
.ig-item:hover .ig-over em { opacity: 1; }

/* ── GIFT BOX ── */
#gift-box {
    background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: fit-content; margin: 0 auto 12px; padding: 0;
}
.gift-icon {
    font-size: 66px; display: inline-block;
    animation: gift-float 2.4s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(196,149,106,0.35));
    transition: transform 0.15s;
}
.gift-hint {
    font-family: var(--font-sans); font-size: 17px; letter-spacing: 3px;
    text-transform: uppercase; color: rgba(196,149,106,0.8);
    animation: hint-blink 2.4s ease-in-out infinite;
}
@keyframes gift-float {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%       { transform: translateY(-8px) rotate(3deg); }
}
@keyframes hint-blink {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}
#gift-box.opened .gift-icon { animation: gift-explode 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
#gift-box.opened .gift-hint { opacity: 0; transition: opacity 0.2s; }
@keyframes gift-explode {
    0%   { transform: scale(1) rotate(0deg); }
    30%  { transform: scale(1.5) rotate(-15deg); }
    60%  { transform: scale(0.8) rotate(10deg); }
    100% { transform: scale(0) rotate(20deg); opacity: 0; }
}

/* ── GIFT TOOLTIP ── */
#gift-tip {
    opacity: 0; pointer-events: none;
    font-family: var(--font-sans); font-size: 10px; letter-spacing: 1.5px;
    color: rgba(255,255,255,0.82);
    background: rgba(0,0,0,0.32); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px; padding: 8px 18px;
    display: inline-block; margin-top: -18px;
    transform: translateY(10px) scale(0.92);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
#gift-tip.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── FLOWER PARTICLES ── */
.flower-particle {
    position: fixed; pointer-events: none; z-index: 9999;
    font-size: 22px; line-height: 1;
    animation: particle-fly var(--dur) ease-out forwards;
}
@keyframes particle-fly {
    0%   { transform: translate(0,0) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--tx),var(--ty)) scale(0.3) rotate(var(--rot)); opacity: 0; }
}

/* ── FOOTER ── */
footer { background: var(--dark); padding: 64px 60px 108px; text-align: center; position: relative; overflow: hidden; }
#footer-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; will-change: transform; }
footer > *:not(canvas) { position: relative; z-index: 1; }
.ft-logo { font-family: var(--font-script); font-size: clamp(32px,4vw,44px); color: var(--white); margin-bottom: 8px; text-decoration: none; display: block; }
.ft-internal-link { color: inherit; text-decoration: none; }
.ft-internal-link:hover { color: var(--white); }
.ft-date { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 36px; }
.ft-links { display: flex; justify-content: center; gap: 32px; list-style: none; margin-bottom: 36px; flex-wrap: wrap; }
.ft-links a { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.3s; }
.ft-links a:hover { color: #ED5A46; }
.ft-line { width: 40px; height: 1px; background: rgba(255,255,255,0.15); margin: 0 auto 24px; }
.ft-copy { font-size: 18px; color: rgba(255,255,255,0.28); line-height: 2; }
.ft-heart { color: #ED5A46; }
.ft-credit { font-size: 12px; opacity: 0.55; }
.ft-credit-link { color: var(--gold); text-decoration: underline; transition: opacity 0.3s; }
.ft-credit-link:hover { opacity: 0.75; }

/* ── MUSIC WIDGET ── */
.music-widget {
    position: fixed; bottom: 32px; right: 32px; z-index: 901;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
#like-tooltip {
    position: absolute; bottom: 72px; right: calc(100% + 12px);
    background: var(--white); border: 1.5px solid rgba(196,149,106,0.35);
    border-radius: 22px; padding: 10px 21px;
    font-family: var(--font-sans); font-size: 18px; color: var(--gray);
    white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(6px);
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}
#like-tooltip::after {
    content: ''; position: absolute; top: 50%; right: -7px;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: rgba(196,149,106,0.35);
}
#like-tooltip.show {
    opacity: 1; visibility: visible; transform: translateX(0);
}
#music-hint {
    position: absolute; bottom: 8px; right: calc(100% + 12px);
    background: var(--white); border: 1.5px solid rgba(196,149,106,0.35);
    border-radius: 22px; padding: 10px 21px;
    font-family: var(--font-sans); font-size: 18px; color: var(--gray);
    white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(6px);
    transition: opacity 0.4s, transform 0.4s, visibility 0.4s;
}
#music-hint::after {
    content: ''; position: absolute; top: 50%; right: -7px;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: rgba(196,149,106,0.35);
}
#music-hint.show {
    opacity: 1; visibility: visible; transform: translateX(0);
}

/* ── MUSIC BUTTON ── */
#music-btn {
    width: 66px; height: 66px; border-radius: 50%;
    background: var(--white); border: 1.5px solid rgba(196,149,106,0.45);
    cursor: pointer; font-size: 30px; color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(196,149,106,0.25);
    transition: background 0.3s;
    flex-shrink: 0;
}
#music-btn:hover { background: var(--cream); }
#music-btn.playing .music-icon { animation: music-spin 3s linear infinite; display: inline-block; }
#music-btn.paused .music-icon { animation: none; opacity: 0.5; }
#music-btn.btn-press { animation: btn-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes music-spin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(15deg) scale(1.15); }
    100% { transform: rotate(0deg) scale(1); }
}
@keyframes btn-bounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(0.85); }
    65%  { transform: scale(1.12); }
    85%  { transform: scale(0.96); }
    100% { transform: scale(1); }
}

/* ── MUSIC VOLUME PANEL ── */
#music-panel {
    background: var(--white); border: 1.5px solid rgba(196,149,106,0.35);
    border-radius: 32px; padding: 16px 14px 12px;
    width: 66px; height: 222px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    overflow: hidden;
    opacity: 0; visibility: hidden;
    transform: translateY(12px) scale(0.88);
    transform-origin: bottom center;
    transition: opacity 0.35s cubic-bezier(0.34,1.56,0.64,1),
                transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
                visibility 0.35s;
}
#music-panel.open {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
#vol-pct {
    font-family: var(--font-sans); font-size: 11px; letter-spacing: 1px;
    color: var(--gold); font-weight: 600; flex-shrink: 0;
}
#vol-slider {
    writing-mode: vertical-lr; direction: rtl;

    width: 4px; height: 90px; min-height: 90px; max-height: 90px;
    cursor: pointer; accent-color: var(--gold); flex-shrink: 0;
}
#like-btn {
    background: none; border: none; cursor: pointer; flex-shrink: 0;
    font-size: 27px; color: rgba(196,149,106,0.42);
    padding: 0; line-height: 1; margin-top: 16px;
    transition: color 0.2s, transform 0.2s;
}
#like-btn.liked { color: #ED5A46; }
#like-btn.like-pop { animation: like-bounce 0.45s cubic-bezier(0.34,1.56,0.64,1); }
#like-btn.like-pulse { animation: like-heartbeat 0.9s ease-in-out 5; }
@keyframes like-bounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(0.75); }
    60%  { transform: scale(1.45); }
    80%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}
@keyframes like-heartbeat {
    0%   { transform: scale(1); }
    18%  { transform: scale(1.35); }
    34%  { transform: scale(1.1); }
    52%  { transform: scale(1.38); }
    70%  { transform: scale(1); }
    100% { transform: scale(1); }
}

/* ── MOBILE MENU ── */
.m-menu {
    display: none; position: fixed; top: 0; right: 0;
    width: 280px; height: 100vh; background: var(--white); z-index: 999;
    padding: 80px 40px; box-shadow: -4px 0 30px rgba(0,0,0,0.1);
    transform: translateX(100%); transition: transform 0.3s ease;
}
.m-menu.open { transform: translateX(0); }
.m-menu ul { list-style: none; }
.m-menu ul li { margin-bottom: 24px; }
.m-menu ul a { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--dark); text-decoration: none; transition: color 0.3s; }
.m-menu ul a:hover { color: #ED5A46; }
.m-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 998; }

/* ── KEYFRAMES ── */
@keyframes fadeInDown { from { opacity:0; transform:translateY(-18px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInUp   { from { opacity:0; transform:translateY(18px);  } to { opacity:1; transform:translateY(0); } }
@keyframes bounce     { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }
@keyframes pulse        { 0%,100%{opacity:1} 50%{opacity:0.6} }
@keyframes vinyl-spin   { from { transform: scale(1.18) rotate(0deg); } to { transform: scale(1.18) rotate(360deg); } }
@keyframes heart-float  { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-54px) scale(0.3); opacity: 0; } }
@keyframes couple-walk  { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
@keyframes tiger-sway   { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes dog-wag      { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

/* ── THANK YOU ARCH ── */
#tya { background: var(--white); padding: 80px 60px; overflow-x: hidden; }
.tya-container { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; max-width: 1160px; margin: 0 auto; position: relative; }
.tya-left { display: flex; justify-content: center; position: relative; }
.tya-arch { position: relative; width: 460px; height: auto; border-radius: 230px 230px 8px 8px; overflow: hidden; background: transparent; flex-shrink: 0; }
.tya-img { position: relative; inset: unset; width: 100%; height: auto; object-fit: unset; display: block; }
.tya-badge-gif { position: absolute; top: -30px; left: 50%; transform: translateX(-50%) translateX(-160px); width: 300px; height: auto; z-index: 2; }
.tya-right { position: relative; padding-right: 20px; }
.tya-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 480px; opacity: 0.8; pointer-events: none; z-index: 1; }
.tya-title { font-family: var(--font-serif); font-size: clamp(20px, 2.2vw, 30px); font-weight: 700; color: var(--dark); line-height: 1.35; margin-bottom: 28px; position: relative; z-index: 1; }
.tw-cursor { display: inline; font-weight: 300; color: var(--gold); animation: tw-blink 0.75s step-end infinite; }
.tw-cursor--done { animation: none; opacity: 0; transition: opacity 0.6s; }
@keyframes tw-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.tya-desc { font-family: var(--font-sans); font-size: 18px; color: var(--gray); line-height: 1.9; margin-bottom: 44px; max-width: 500px; position: relative; z-index: 1; }
.tya-foot { display: flex; gap: 44px; align-items: center; position: relative; z-index: 1; }
.tya-fitem { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tya-fscript { font-family: var(--font-script); font-size: 26px; color: var(--gray); line-height: 1.2; }
.tya-flabel { font-family: var(--font-sans); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); text-align: center; line-height: 1.6; }
.tya-fheart { font-size: 22px; color: var(--gray); opacity: 0.55; line-height: 1.2; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    section { padding: 80px 40px; }
    nav, nav.scrolled { padding-left: 40px; padding-right: 40px; }
    .events-grid { grid-template-columns: 1fr 1fr; }
    .ig-grid { grid-template-columns: repeat(3, 1fr); }
    .couple-grid { grid-template-columns: 1fr 360px 1fr; gap: 20px; }
}

@media (max-width: 768px) {
    .story-scroll-leaf { display: none; }
    .music-widget { bottom: 20px; right: 20px; }
    #music-btn { width: 54px; height: 54px; font-size: 24px; }
    #music-panel { width: 45px; height: 145px; padding: 8px 8px 4px; gap: 6px; }
    #vol-slider { height: 62px; min-height: 62px; max-height: 62px; }
    #like-btn { font-size: 21px; margin-top: 2px; }
    section { padding: 70px 24px; }
    .tl-text, .tya-desc, .itin-card-loc, .ft-copy, .moments-sub { font-size: 15px; }
    nav { padding: 16px 24px; }
    nav.scrolled { padding: 10px 24px; }
    nav.scrolled .nav-logo { font-size: 20px; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .m-menu { display: block; }
    .hero-names { font-size: clamp(22px, 7vw, 50px); letter-spacing: 1px; }
    .hero-names .amp { margin: 0 6px; padding-right: 4px; }
    .hero-btns { flex-direction: column; align-items: center; }
    .story-title-wrap .section-title { font-size: clamp(20px, 5.5vw, 42px); letter-spacing: 1px; }
    .story-title-wrap .section-script { font-size: 22px; letter-spacing: 1px; }
    #events .section-title { font-size: clamp(20px, 5.5vw, 42px); letter-spacing: 1px; }
    #events .section-script { font-size: clamp(20px, 5.5vw, 42px); letter-spacing: 1px; }
    .story-title-wrap--quote .section-title { font-size: 25px; letter-spacing: 4px; }
    .story-title-wrap--quote .section-script { font-size: 24px; letter-spacing: 1px; }
    .hero-countdown { gap: 18px; }
    .cd-num { width: 48px; }
    .couple-grid { grid-template-columns: 1fr; text-align: center; }
    .couple-photo-wrap { max-width: 360px; }
    .timeline::before { left: 20px; }
    .tl-item { grid-template-columns: 40px 1fr; }
    .tl-item:nth-child(odd) .tl-content,
    .tl-item:nth-child(even) .tl-content { grid-column: 2; grid-row: 1; text-align: left; padding: 0 0 0 20px; }
    .tl-item:nth-child(odd) .tl-dot,
    .tl-item:nth-child(even) .tl-dot { grid-column: 1; grid-row: 1; }
    .tl-photo { display: none; }
    .tl-item:nth-child(odd), .tl-item:nth-child(even) { transform: translateX(0); }

    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .g-item:nth-child(6) { grid-column: span 1; }
    .events-grid { grid-template-columns: 1fr; gap: 80px; }
    .ev-guest-note { flex-direction: column; align-items: center; gap: 8px; }
    .ev-guest-arrow { display: none; }
    .counters { gap: 36px; }
    .form-row { grid-template-columns: 1fr; }
    .ig-grid { grid-template-columns: repeat(3, 1fr); }
    footer { padding: 48px 24px 90px; }
    .ft-links { gap: 16px; }
    #back-top { bottom: 20px; right: 20px; width: 40px; height: 40px; }
    .lb-prev { left: 8px; }
    .lb-next { right: 8px; }
    .tya-container { grid-template-columns: 1fr; gap: 80px; }
    .tya-arch { width: 280px; height: auto; border-radius: 140px 140px 8px 8px; overflow: hidden; }
    .tya-watermark { display: none; }
    #tya { padding: 60px 24px; }
    .tya-badge-gif { width: 180px; top: auto; bottom: -60px; left: auto; right: -20px; transform: none; }
    .tya-title { font-size: clamp(22px, 5.8vw, 28px); }
    .tya-title .lq-heart { font-size: 16px; }
    .tya-desc { font-size: 15px; }
    .tya-right { padding-right: 0; text-align: left; }
    .tya-foot { justify-content: center; }
}

@media (max-width: 480px) {
    .counters { gap: 24px; }
    .tya-foot { gap: 20px; flex-wrap: wrap; justify-content: center; }
    .ig-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ITINERARY — LỊCH TRÌNH KHÁCH QUÝ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#itinerary { background: var(--cream); overflow: hidden; }
.itin-title-leaf { width: 80px; height: auto; display: block; margin: 0 auto 12px; animation: leaf-float 4s ease-in-out infinite; }
@keyframes leaf-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

.itin-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1100px;
    margin: 48px auto 0;
    align-items: start;
}

/* Card base */
.itin-card {
    background: var(--white);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(0,0,0,0.06);
    transition: box-shadow 0.3s, transform 0.3s;
}
.itin-card:hover { box-shadow: 0 10px 48px rgba(0,0,0,0.1); transform: translateY(-4px); }

/* Image area */
.itin-card-img {
    position: relative;
    height: 220px;
    overflow: visible;
}
.itin-card-img-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 6px 6px 0 0;
}

/* Label badge — nổi tại ranh giới ảnh/body */
.itin-card-label {
    display: inline-block;
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 18px 66px;
    background: var(--white);
    border-radius: 4px;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(15px,1.8vw,21px);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--dark);
    white-space: nowrap;
}

/* Card body */
.itin-card-body { padding: 14px 0 50px; }

/* Date display — like pricing "$10" */
.itin-card-date-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    padding: 8px 20px 28px;
    color: var(--dark);
}
.itin-date-num {
    font-family: var(--font-serif);
    font-size: clamp(36px,5vw,58px);
    font-weight: 700;
    line-height: 1;
}
.itin-date-rest {
    font-family: var(--font-serif);
    font-size: clamp(15px,2vw,22px);
    font-weight: 600;
    align-self: center;
}

/* Description */
.itin-card-desc {
    margin: 0;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--gray);
    padding: 0 20px 18px;
    letter-spacing: 0.5px;
    line-height: 1.5;
}

/* Activity list */
.itin-card-list { list-style: none; margin: 0; padding: 0; }
.itin-card-item {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 12px;
    padding: 13px 22px;
    border-top: 1px solid rgba(44,44,44,0.07);
    transition: background 0.2s;
}
.itin-card-item:hover { background: var(--cream); }

.itin-card-time {
    font-family: var(--font-serif);
    font-size: clamp(18px,2.2vw,27px);
    font-weight: 600;
    color: var(--gold);
    line-height: 1.3;
    text-align: right;
    padding-top: 2px;
}
.itin-card-act {
    font-family: var(--font-serif);
    font-size: clamp(15px,1.8vw,20px);
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 3px;
    line-height: 1.4;
}
.itin-card-loc {
    font-family: var(--font-sans);
    font-size: 18px;
    color: var(--gray);
    line-height: 1.6;
}

/* Featured card — Chủ Nhật */
.itin-card--main {
    box-shadow: 0 8px 48px rgba(0,0,0,0.13);
}
.itin-card--main .itin-date-num,
.itin-card--main .itin-date-rest { color: var(--dark); }

/* Responsive */
@media (max-width: 900px) {
    .itin-cards { grid-template-columns: 1fr; max-width: 480px; }
    .itin-card--main { transform: none; order: -1; }
    .itin-card--main:hover { transform: translateY(-4px); }
}