/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Cormorant Garamond', serif;
    background:#e9e4db;
    color:#333;
    overflow-x:hidden;
    padding:20px 0;
}

/* MAIN */

.container{
    max-width:430px;
    margin:30px auto;
    background:#faf8f3;
    border-radius:30px;
    overflow:hidden;
    box-shadow:
    0 10px 40px rgba(0,0,0,.12);
}
/* MUSIC */

.music-btn{
    position:fixed;
    right:20px;
    top:20px;
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:#f1d9a8;
    color:#222;
    font-size:24px;
    cursor:pointer;
    z-index:9999;
}

/* HERO */

.hero{
    position:relative;
    text-align:center;
    background:#faf8f3;
}

/* .flower-top{
    height:160px;
    overflow:hidden;
}

.flower-top img{
    width:100%;
    transform:scale(1.35);
    transform-origin:center top;
}

.flower-bottom{
    height:160px;
    overflow:hidden;
}

.flower-bottom img{
    width:100%;
    transform:scale(1.35);
    transform-origin:center bottom;
} */
.full-flower-top,
.full-flower-bottom{
    display:block;
    width:calc(100% + 60px);
    max-width:none;
    margin-left:-30px;
    margin-right:-30px;
    filter:brightness(1.02) contrast(1.05);
    mix-blend-mode:multiply;
}
.full-flower-top{
    display:block;
    width:calc(100% + 80px);
    max-width:none;
    margin:-35px -40px -15px -40px;
}

.full-flower-bottom{
    display:block;
    width:calc(100% + 80px);
    max-width:none;
    margin:-15px -40px -35px -40px;
}
.flower-top,
.flower-bottom{
    background:#f4f0e8;
}
.hero-content{
    padding:35px 25px;
}

.sub-title{
    letter-spacing:6px;
    color:#c4a25c;
    font-size:13px;
}

.sub-title2{
    margin-top:10px;
    letter-spacing:3px;
    color:#777;
}

.graduate-name{
    font-family:'Great Vibes', cursive;
    font-size:70px;
    margin:20px 0;
    color:#333;
}

.invite-text{
    letter-spacing:4px;
    color:#999;
}

.guest-name{
    color:#c49c50;
    font-weight:500;
    margin-top:10px;
}

.line{
    width:80%;
    height:1px;
    background:#d9c79f;
    margin:25px auto;
}

.event-info{
    display:flex;
    justify-content:space-between;
    gap:10px;
}

.event-info div{
    flex:1;
    text-align:center;
}

.event-info span{
    font-size:24px;
}

.event-info p{
    margin-top:10px;
    font-size:14px;
}

.graduate-image{
    padding:20px;
}

.graduate-image img{
    width:260px;
    max-width:90%;
}

/* SECTION */

section{
    padding:30px 20px;
}

.section-title,
h3{
    text-align:center;
    letter-spacing:4px;
    color:#9d8a61;
    margin-bottom:25px;
}

/* CALENDAR */

.calendar-section{
    background:#f0ebe2;
}

.calendar{
    background:white;
    border-radius:20px;
    padding:20px;
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:12px;
    text-align:center;
}

.calendar div{
    padding:8px;
}

.heart-day{
    background:#ffb7c9;
    color:white;
    border-radius:50%;
    width:40px;
    height:40px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
}

/* COUNTDOWN */

/* ========================== COUNTDOWN ========================== */ .countdown{ display:flex; justify-content:center; align-items:center; gap:18px; background:#e5d7b5; padding:15px; border-radius:25px; width:100%; max-width:100%; margin:auto; box-sizing:border-box; } .box{ position:relative; min-width:55px; padding:10px 6px; background:#222; border-radius:12px; text-align:center; } .box span{ display:block; font-size:28px; font-weight:700; color:#fff; line-height:1; } .box small{ display:block; margin-top:6px; font-size:10px; letter-spacing:1px; color:#ddd; } /* DẤU : */ .box:not(:last-child)::after{ content: ":"; position:absolute; right:-14px; top:42%; transform:translateY(-50%); font-size:28px; font-weight:700; color:#fff; width:12px; text-align:center; }
/* MAP */

.map-section iframe{
    width:100%;
    height:320px;
    border:none;
    border-radius:20px;
    overflow:hidden;
}

/* FORM */

.message-section{
    background:#faf8f3;
}

.message-section input,
.message-section textarea{
    width:100%;
    border:1px solid #e5d7b5;
    border-radius:14px;
    padding:15px;
    margin-bottom:15px;
    font-size:16px;
    background:white;
    outline:none;
}

.message-section textarea{
    height:120px;
    resize:none;
}

.message-section button{
    width:100%;
    border:none;
    background:#111;
    color:white;
    padding:18px;
    border-radius:40px;
    cursor:pointer;
    letter-spacing:2px;
}

/* WISH */

.wish-list{
    background:#f4f0e8;
}

.wish-item{
    background:white;
    border-radius:16px;
    padding:15px;
    margin-bottom:15px;
}

.wish-item p{
    font-size:18px;
}

.wish-item span{
    display:block;
    margin-top:10px;
    color:#888;
    text-align:right;
}

/* THANK */

.thank-section{
    background:#111;
    color:white;
    text-align:center;
    padding:70px 30px;
}

.thank-section h2{
    font-family:'Great Vibes', cursive;
    font-size:60px;
    color:#f3d9a0;
    margin-bottom:20px;
}

.thank-section p{
    line-height:1.8;
    margin-bottom:10px;
}

/* PETALS */

#petals-container{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    pointer-events:none;
    z-index:999;
}

.petal{
    position:absolute;
    top:-50px;
    opacity:.8;
    animation:fall linear forwards;
}

@keyframes fall{

    0%{
        transform:
        translateY(-50px)
        rotate(0deg);
    }

    100%{
        transform:
        translateY(120vh)
        translateX(120px)
        rotate(720deg);
    }

}

/* MOBILE */

@media(max-width:480px){

    .graduate-name{
        font-size:56px;
    }

    .countdown{
        gap:6px;
    }

    .box span{
        font-size:24px;
    }

    .event-info{
        flex-direction:column;
    }

}
.map-btn{ display:block; text-align:center; margin-top:20px; background:#111; color:#fff; text-decoration:none; padding:16px; border-radius:40px; font-weight:600; letter-spacing:2px; transition:.3s; } .map-btn:hover{ transform:translateY(-2px); }
/* ========================== OPENING SCREEN ========================== */ #opening-screen{ position:fixed; inset:0; background:#f4f0e8; display:flex; justify-content:center; align-items:center; z-index:99999; transition:.8s; } .opening-card{ width:90%; max-width:380px; background:#fff; padding:40px 30px; border-radius:30px; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.12); } .opening-avatar{ width:120px; height:120px; border-radius:50%; object-fit:cover; margin-bottom:20px; } .opening-card h1{ margin:15px 0; font-family:'Cormorant Garamond', serif; } #openInvitation{ margin-top:25px; padding:14px 40px; border:none; border-radius:40px; background:#111; color:#fff; cursor:pointer; font-size:16px; transition:.3s; } #openInvitation:hover{ transform:translateY(-2px); } .fade-out{ opacity:0; visibility:hidden; }
/* ===================================================
   CẤU HÌNH KHU VỰC CUỘN LỜI CHÚC (SCROLLBAR)
====================================================== */

/* Vùng chứa toàn bộ các ô lời chúc */
#messagesContainer {
    /* Giới hạn chiều cao tối đa (khoảng bằng kích thước của 2.5 đến 3 cái) */
    max-height: 380px; 
    
    /* Tự động hiện thanh cuộn dọc khi dữ liệu vượt quá chiều cao trên */
    overflow-y: auto; 
    
    /* Tạo khoảng cách đệm bên phải để thanh cuộn không đè lên chữ */
    padding-right: 10px; 
    
    /* Đảm bảo các thuộc tính hiển thị mượt mà */
    scroll-behavior: smooth;
}

/* Tùy chỉnh thanh cuộn (Scrollbar) cho đẹp và gọn hơn (Dành cho Chrome, Safari, Edge) */
#messagesContainer::-webkit-scrollbar {
    width: 6px; /* Độ rộng của thanh cuộn dọc */
}

/* Tùy chỉnh phần đường ray chạy của thanh cuộn */
#messagesContainer::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05); 
    border-radius: 10px;
}

/* Tùy chỉnh cục cuộn (Con chạy) */
#messagesContainer::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2); /* Màu của cục cuộn */
    border-radius: 10px;
}

/* Đổi màu đậm hơn một chút khi người dùng di chuột vào cục cuộn */
#messagesContainer::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35); 
}

/* Cấu hình thanh cuộn gọn nhẹ cho trình duyệt Firefox */
#messagesContainer {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
}

/* Đảm bảo khoảng cách giữa các ô lời chúc không bị dính vào nhau */
.wish-item {
    margin-bottom: 15px;
}
.wish-item:last-child {
    margin-bottom: 0;
}
/* ===================================================
   CẤU HÌNH KHU VỰC CUỘN LỜI CHÚC (ĐÃ CẬP NHẬT)
====================================================== */

#messagesContainer {
    /* Ép chiều cao cố định để chứa vừa vặn 3 cái (khoảng 300px đến 330px) */
    max-height: 320px !important; 
    
    /* Ép buộc phải sinh ra thanh cuộn dọc khi vượt quá kích thước */
    overflow-y: auto !important; 
    
    /* Giữ khối luôn hiển thị dạng block để thuộc tính chiều cao có tác dụng */
    display: block !important;
    
    padding-right: 10px; 
    scroll-behavior: smooth;
}

/* Đảm bảo mỗi ô lời chúc có kích thước ổn định, không bị phình to quá mức */
.wish-item {
    margin-bottom: 15px !important;
    padding: 12px !important; /* Độ rộng đệm bên trong ô */
    box-sizing: border-box;
}
#messagesContainer {
    max-height: 320px !important; 
    overflow-y: auto !important; 
    display: block !important;
    scroll-behavior: smooth;

    /* 1. Ẩn thanh cuộn trên trình duyệt Firefox */
    scrollbar-width: none !important; 
    
    /* 2. Ẩn thanh cuộn trên trình duyệt IE và Edge cũ */
    -ms-overflow-style: none !important; 
}

/* 3. Ẩn thanh cuộn trên các trình duyệt dùng lõi Webkit (Chrome, Safari, Edge mới, Cốc Cốc) */
#messagesContainer::-webkit-scrollbar {
    display: none !important; /* Triệt tiêu hoàn toàn không cho hiển thị */
    width: 0 !important;
    height: 0 !important;
}
/* ===================================================
   HIỆU ỨNG CUỘN TRANG (SCROLL REVEAL ANIMATION)
====================================================== */

/* Trạng thái mặc định khi chưa cuộn tới */
section {
    opacity: 0;
    transform: translateY(40px); /* Đẩy section dịch xuống dưới 40px */
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* Tạo độ trễ mượt mà */
    will-change: opacity, transform;
}

/* Trạng thái kích hoạt khi cuộn tới */
section.show {
    opacity: 1 !important;
    transform: translateY(0) !important; /* Đẩy về vị trí cũ */
}

/* Bạn có thể thêm hiệu ứng riêng cho ảnh cô dâu/chú rể/chủ tiệc cho sinh động */
.graduate-image img {
    opacity: 0;
    transform: scale(0.8); /* Ảnh hơi thu nhỏ lại */
    transition: all 1s ease-in-out !important;
}

section.show .graduate-image img {
    opacity: 1;
    transform: scale(1); /* Phóng to về kích thước thật khi cuộn tới */
}
/* ===================================================
   ÉP HIỂN THỊ ẢNH AVATAR TRÊN GIAO DIỆN ĐIỆN THOẠI
====================================================== */
@media (max-width: 768px) {
    /* Ép ảnh ở màn hình mở đầu hiển thị */
    .opening-avatar {
        display: block !important;
        width: 120px !important;
        height: 120px !important;
        object-fit: cover !important;
        border-radius: 50% !important;
        margin: 0 auto 15px auto !important;
    }

    /* Ép khung chứa ảnh ở thiệp mời chính hiển thị */
    .graduate-image {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 20px !important;
    }

    /* Ép ảnh đại diện chính hiển thị */
    .graduate-image img {
        display: inline-block !important;
        width: 180px !important; /* Độ rộng ảnh vừa vặn trên điện thoại */
        height: 180px !important;
        object-fit: cover !important;
        border-radius: 50% !important; /* Tạo hình tròn nếu muốn */
        box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    }
}