:root {
    --gold: #b8926a;
    --dark: #3a3a3a;
    --bg-light: #fffaf6;
}

body {
    margin: 0; font-family: 'Quicksand', sans-serif;
    background: #f0f0f0; color: var(--dark);
    overflow-x: hidden;
}

.wrapper {
    max-width: 480px; margin: 0 auto;
    background: white; box-shadow: 0 0 50px rgba(0,0,0,0.1);
}

section { padding: 60px 25px; text-align: center; }

/* Intro - img1 Background */
.intro-section {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('images/img1.jpg');
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
}

.intro-content {
    background: rgba(255, 255, 255, 0.9);
    padding: 40px 20px; width: 80%;
    border: 1px solid var(--gold);
}

.name-title {
    font-family: 'Playfair Display', serif; font-size: 2.8rem;
    color: var(--gold); font-style: italic; margin: 10px 0;
}

.and-txt { font-family: 'Dancing Script', cursive; font-size: 2.2rem; color: #555; }

/* Family Section */
.label { letter-spacing: 4px; font-size: 0.75rem; color: var(--gold); font-weight: 700; margin-bottom: 15px; }
.parent-name { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 700; margin: 5px 0; }
.address { font-size: 0.85rem; color: #777; font-style: italic; margin-bottom: 40px; }

/* QR Code - Chia Trái/Phải chuẩn */
.qr-container {
    display: flex; justify-content: space-between;
    gap: 20px; margin-top: 30px;
}
.qr-item { flex: 1; }
.qr-item p { font-size: 0.85rem; font-weight: 700; color: var(--gold); margin-bottom: 10px; }
.qr-item img { width: 100%; border-radius: 8px; border: 1px solid #eee; }

/* Music Button */
#music-control { position: fixed; bottom: 25px; left: 20px; z-index: 1000; }
#music-btn {
    width: 45px; height: 45px; border-radius: 50%;
    background: var(--gold); border: none; color: white;
    cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    font-size: 18px; display: flex; align-items: center; justify-content: center;
}
.rotate { animation: spinning 4s linear infinite; }
@keyframes spinning { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Gallery */
.gallery-container img { width: 100%; margin-bottom: 15px; border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

/* Event Details */
.event-card { border: 1px solid var(--gold); padding: 45px 20px; background: var(--bg-light); }
.date-large { font-family: 'Playfair Display', serif; font-size: 3.2rem; color: var(--gold); }
.btn-gold { 
    display: inline-block; margin-top: 25px; padding: 12px 35px; 
    background: var(--gold); color: white; text-decoration: none; border-radius: 40px; font-weight: 700;
}