/* --- KHAI BÁO CÁC FONT CHỮ CỦA BẠN (GIỮ NGUYÊN) --- */
@font-face {
    font-family: 'Sloop'; /* Đặt tên là Sloop */
    src: url('imagesthiepcuoi/UTM-Sloop-1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Azkia'; /* Đặt tên là Azkia */
    src: url('imagesthiepcuoi/UTM-Azkia.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BlackMango'; /* Đặt tên là BlackMango */
    src: url('imagesthiepcuoi/NVN BlackMango-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* --- PHẦN CSS CÒN LẠI --- */

/* Import font Quicksand từ Google để dùng cho các đoạn văn bản thường */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap');

body {
    font-family: 'Quicksand', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fdfdfd; /* Nền trắng cho body */
    color: #555;
    overflow-x: hidden; /* Ngăn cuộn ngang */
}

/* =================================================================== */
/* --- CÁC THAY ĐỔI CHÍNH NẰM Ở ĐÂY --- */
.wedding-invitation {
    position: relative; /* QUAN TRỌNG: Thêm dòng này vào */
    max-width: 490px;
    margin: 0px auto;
    text-align: center;
    
    background-image: url('imagesthiepcuoi/png.png');
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: center top;
    background-color: transparent;
    border: none;
    
    padding: 20px;
    box-sizing: border-box;

    border-radius: 8px;
}

.content-wrapper {
    position: relative; /* QUAN TRỌNG: Thêm dòng này */
    z-index: 10; /* QUAN TRỌNG: Đảm bảo nó nổi lên trên nền của wedding-invitation */
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    overflow: hidden;
}
/* --- KẾT THÚC CÁC THAY ĐỔI CHÍNH --- */
/* =================================================================== */


/* --- CÁC SECTION VÀ NỘI DUNG KHÁC BÊN TRONG --- */
/* (Điều chỉnh padding cho section để không bị quá sát viền sau khi thêm content-wrapper padding) */
.section {
    padding: 0px 5px;
}
.section:last-of-type {
    border-bottom: none;
}


.header h3 {
    font-family: 'Sloop', cursive;
    color: #670f16;
    font-size: 2.8em;
    margin: 0px 0;
    font-weight: normal;
}

.header p {
    margin: 5px 0;
    font-size: 1.5em;
    font-family: 'BlackMango', sans-serif;
}

.couple-photo img {
    width: 100%;
    height: auto;
    border: 5px solid #e0c568;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.family-info {
    display: flex; /* Kích hoạt Flexbox để sắp xếp 3 cột */
    justify-content: space-around; /* Phân bổ không gian giữa các mục */
    align-items: center; /* Căn giữa các mục theo chiều dọc */
    padding-top: 50px;
    padding-bottom: 40px;
}

.family-column {
    flex-basis: 40%; /* Mỗi cột gia đình chiếm 40% */
    /* Bạn có thể điều chỉnh flex-basis nếu muốn thay đổi độ rộng */
}

.family-column h2 {
    font-family: 'BlackMango', sans-serif;
    color: #333;
    font-size: 1.8em; /* Tăng kích thước H2 một chút */
    line-height: 1.2; /* Điều chỉnh khoảng cách dòng cho chữ "NHÀ<br>TRAI" */
    margin-bottom: 15px; /* Khoảng cách với tên cha mẹ */
    /* Bỏ border-bottom và display: inline-block vì giờ nó là tiêu đề riêng */
    /* border-bottom: 1px solid #e0c568; */
    /* padding-bottom: 5px; */
    /* display: inline-block; */
}

.family-column .parent-name {
    font-size: 0.9em;
    font-weight: 800; /* Tên cha mẹ in đậm hơn */
    margin: 5px 0;
    font-family: 'BlackMango', sans-serif;
}

.family-column .address {
    font-size: 0.8em;
    color: #666; /* Địa chỉ màu xám nhẹ hơn */
    line-height: 1.4;
    margin-top: 10px;
    
}

.center-decoration {
    flex-basis: 15%; /* Phần giữa chiếm 20% */
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-decoration .hy-icon {
    width: 80px; /* Điều chỉnh kích thước ảnh hy2.webp */
    height: auto;
    display: block; /* Đảm bảo nó là block để dễ căn giữa */
    transform: translate(0px,-50px);
}

/* HIHI */
.wedding-announcement {
    display: flex; /* Dùng Flexbox để ảnh và chữ có thể nằm cạnh nhau hoặc trên dưới */
    flex-direction: column; /* Mặc định xếp chữ rồi đến ảnh */
    align-items: center; /* Căn giữa các mục theo chiều ngang */
    padding: 40px 10px;
}

.announcement-text {
    text-align: center;
    margin-bottom: 30px; /* Khoảng cách giữa chữ và ảnh */
}

.announcement-text h2 {
    font-family: 'BlackMango', sans-serif;
    font-size: 1.1em; /* Kích thước phù hợp */
    color: #d35400; /* Màu đỏ cam */
    margin: 0 0 20px 0;
    font-weight: normal;
}

.announcement-text .bride-name,
.announcement-text .groom-name {
    font-family: 'Sloop', cursive; /* Dùng Sloop cho tên cô dâu chú rể */
    font-size: 3em; /* Kích thước lớn, nổi bật */
    color: #842215; /* Màu vàng gold */
    margin: 5px 0;
    font-weight: normal;
    line-height: 1.2;
}

.announcement-text .and-symbol {
    font-family: 'Sloop', cursive; /* Dùng Sloop cho tên cô dâu chú rể */
    font-size: 2.5em; /* Kích thước lớn, nổi bật */
    color: #5e170e; /* Màu vàng gold */
    margin: 5px 0;
    font-weight: normal;
    line-height: 1.2;
}

.announcement-photo {
    width: 100%; /* Chiếm 80% chiều rộng của khối cha */
    max-width: 450px; /* Giới hạn kích thước tối đa của ảnh */
    height: auto;
    border-radius: 8px;
    overflow: hidden; /* Đảm bảo ảnh không tràn ra khỏi bo góc */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.announcement-photo img {
    width: 100%;
    height: auto;
    display: block; /* Loại bỏ khoảng trắng dưới ảnh */
}






.ceremony-info h2, .album h2, .thank-you h2 {
    font-family: 'Azkia', cursive;
    font-size: 3em;
    color: #d35400;
    font-weight: normal;
}

.time-details .time {
    font-size: 1.8em;
    font-weight: 500;
    color: #333;
    margin: 15px 0;
}

.album {
    padding-top: 50px;
}

.gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.gallery img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

.thank-you {
    background-color: #555;
    color: #fff;
    padding: 40px 20px;
    border-bottom-left-radius: 8px; /* Bo góc cuối của thank-you */
    border-bottom-right-radius: 8px;
}

/* --- CSS CHO PHẦN NGÀY THÁNG BẠN MỚI THÊM --- */
.date-highlight-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0px 0;
}

.side-decoration {
    flex-basis: 25%;
}

.side-decoration img {
    width: 120px;
    height: auto;
}

.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-basis: 50%;
}

.center-content img {
    width: 120px;
    margin-bottom: 10px;
}

.center-content .time {
    margin: 4px 0;
    font-size: 1.1em;
    font-weight: 500;
}
.center-content .date {
    margin: 4px 0;
    font-size: 1.5em;
    font-weight: 600;
}



/* Responsive cho điện thoại */
@media (max-width: 430px) {
    .wedding-invitation {
        width: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none; /* Bỏ đổ bóng trên di động cho gọn */
    }
    .content-wrapper {
        border-radius: 0; /* Bỏ bo góc trên di động */
        padding: 5px; /* Giảm padding trên di động */
    }
    .header h3 {
        font-size: 2.5em;
    }
    .center-content img {
        width: 80px;
        margin-bottom: 5px;
    }
    .side-decoration img {
        width: 60px;
        height: auto;
    }
    .family-info {
        flex-direction: column;
        align-items: center;
    }
    .family {
        width: 100%;
        margin-bottom: 20px;
    }
    .gallery {
        grid-template-columns: 1fr; /* 1 cột trên điện thoại */
    }
    .ceremony-info h2, .album h2, .thank-you h2 {
        font-size: 2.5em;
    }
    .section {
        padding: 0px 0px; /* Giảm padding section trên di động */
    }
    .couple-photo img {
        width: 98%;
        height: auto;
        border: 2px solid #631313;
        margin: 20px 0;
        border-radius: 5px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .center-decoration .hy-icon {
        width: 50px; /* Điều chỉnh kích thước ảnh hy2.webp */
        height: auto;
        display: block; /* Đảm bảo nó là block để dễ căn giữa */
        transform: translate(0px,0px);
    }
    .announcement-text h2 {
        
        padding:  20px 0;
    }
}


.ceremony-info {
    text-align: center;
}

.title-decorator {
    width: 250px;
    height: 50px;
    margin-bottom: 0px;
}

.mini-gallery {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 25px 0;
}

.mini-gallery img {
    width: 30%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.mini-gallery #centergalery
{
    transform: translate(0px, -20px);
}

.invitation-heading {
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 30px;
}

.calendar-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    max-width: 450px;
}

.calendar-col {
    flex: 1;
    padding: 0 10px;
}

.calendar-col.main-date {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 10px;
}

.calendar-col.main-date span {
    display: block;
}

.calendar-col .day {
    font-size: 3.5em;
    font-weight: bold;
    color: #333;
    line-height: 1.1;
    margin: 5px 0;
}

.lunar-date {
    font-style: italic;
    font-size: 0.9em;
    color: #666;
    margin-top: -10px;
}

.location-heading {
    margin-top: 40px;
    font-weight: 500;
    letter-spacing: 1px;
}

.location-box {
    border: 2px solid #c33;
    border-radius: 20px;
    padding: 25px 20px;
    margin: 15px auto;
    max-width: 90%;
}

.location-box h3 {
    margin: 0 0 10px 0;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.5em;
    color: #333;
}

.location-box p {
    margin: 0;
    line-height: 1.6;
}

.map-button {
    display: inline-block;
    background-color: #a92026;
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    box-shadow: 0 4px 10px rgba(169, 32, 38, 0.4);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.map-button:hover {
    background-color: #c0392b;
    transform: translateY(-2px);
}


.thank-you-section {
    padding: 0; /* Bỏ padding ở đây, content-wrapper đã có padding chung */
    overflow: hidden; /* Đảm bảo ảnh không tràn ra ngoài */
}

.thank-you-background {
    position: relative; /* Cho phép các phần tử con được định vị tương đối với nó */
    width: 100%;
    height: 600px; /* Điều chỉnh chiều cao theo ý bạn */
    overflow: hidden; /* Đảm bảo ảnh nền bên trong không tràn */
    display: flex; /* Dùng flexbox để căn giữa overlay */
    justify-content: center;
    align-items: center;
}

.thank-you-background .full-width-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh phủ kín và không bị méo */
    filter: brightness(0.5) blur(0px); /* Làm mờ và tối ảnh nền một chút */
}

.thank-you-overlay {
    position: relative; /* Nổi lên trên ảnh nền */
    z-index: 999; /* Đảm bảo nằm trên ảnh nền */
    text-align: center;
    color: #fff; /* Chữ màu trắng */
    background-color: rgba(0, 0, 0, 0.3); /* Lớp phủ đen mờ cho chữ dễ đọc */
    padding: 20px 0; /* Padding trên dưới */
    width: 120%; /* Chiếm toàn bộ chiều rộng của cha */
}

.thank-you-overlay h2 {
    font-family: 'Azkia', cursive; /* Vẫn dùng font Azkia cho "Thank you" */
    font-size: 3.5em; /* Kích thước lớn hơn */
    color: #fff; /* Màu trắng cho chữ "Thank you" */
    margin: 0;
}

.thank-you-overlay p {
    font-family: 'Quicksand', sans-serif; /* Font Quicksand cho đoạn text */
    font-size: 1.2em;
    font-weight: 500;
    margin: 5px 0 0 0;
    color: #fff; /* Màu trắng */
}

/* Responsive cho điện thoại */
@media (max-width: 480px) {
    .thank-you-background {
        height: 490px; /* Giảm chiều cao trên điện thoại */
    }
    .thank-you-overlay h2 {
        font-size: 3em; /* Giảm kích thước chữ trên điện thoại */
    }
    .thank-you-overlay p {
        font-size: 1em;
    }
}







#curtain-container {
    position: absolute; /* Đổi thành 'fixed' để nó bám vào màn hình */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* SỬA THÀNH '100vh' ĐỂ CAO ĐÚNG BẰNG MÀN HÌNH */
    overflow: hidden;
    z-index: 100;
    pointer-events: none;
}

#curtain-left, #curtain-right {
    position: absolute;
    top: 0;
    left: 0; /* Cả hai đều bắt đầu từ bên trái */
    width: 100%; /* ĐÚNG YÊU CẦU: Chiếm 100% chiều rộng */
    height: 100%;
    /* Thời gian chuyển động của mỗi rèm */
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 0.5); 
}

/* Rèm trái (slide2.webp) nằm trên cùng */
#curtain-left {
    z-index: 102;
}
/* Rèm phải (slide.webp) nằm ngay dưới */
#curtain-right {
    z-index: 101;
}


#curtain-left img, #curtain-right img {
    /* --- BẮT ĐẦU THAY ĐỔI --- */
    height: 100%;   /* Ưu tiên chiều cao vừa khít 100% */
    width: auto;    /* Chiều rộng tự động để giữ đúng tỷ lệ, không bị méo */
    min-width: 100%; /* Đảm bảo trong mọi trường hợp, ảnh không bị hẹp hơn màn hình */

    /* Căn giữa ảnh theo chiều ngang sau khi nó tự điều chỉnh chiều rộng */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* --- KẾT THÚC THAY ĐỔI --- */
}

/* Trạng thái đã mở rèm */
#curtain-left.opened {
    transform: translateX(-100%); /* Rèm trái trượt sang trái */
}
#curtain-right.opened {
    transform: translateX(100%); /* Rèm phải trượt sang phải */
}


/* 2. HIỆU ỨNG KHI CUỘN (GIỮ NGUYÊN NHƯ CŨ) */

/* Trạng thái ban đầu của các phần tử sẽ được làm hiệu ứng */
.animate-up,
.animate-left,
.animate-right,
.animate-fade-in,
.animate-zoom {
    opacity: 0;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animate-up { transform: translateY(50px); }
.animate-left { transform: translateX(-50px); }
.animate-right { transform: translateX(50px); }
.animate-zoom { transform: scale(0.9); }

/* Trạng thái cuối cùng khi phần tử xuất hiện */
.animate-up.is-visible,
.animate-left.is-visible,
.animate-right.is-visible,
.animate-fade-in.is-visible,
.animate-zoom.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* =================================================================== */
/* --- PHẦN THÊM MỚI: CSS CHO HIỆU ỨNG MƯA TRÁI TIM --- */
/* =================================================================== */

#heart-rain-container {
    position: fixed; /* Nằm cố định trên màn hình */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* QUAN TRỌNG: Cho phép click xuyên qua lớp này */
    z-index: 9999; /* Nằm trên cùng để luôn thấy được */
    overflow: hidden; /* Ẩn các trái tim khi ra khỏi màn hình */
}

.heart {
    position: absolute;
    width: 500px;  /* Kích thước này sẽ được JS thay đổi ngẫu nhiên */
    height: 500px; /* Kích thước này sẽ được JS thay đổi ngẫu nhiên */
    opacity: 0.8; /* Có thể điều chỉnh độ trong suốt */
    
    /* THAY ĐỔI QUAN TRỌNG: Dùng ảnh của bạn làm nền */
    background-image: url('imagesthiepcuoi/hearts.png');
    background-size: contain; /* Đảm bảo ảnh luôn nằm trọn trong khung */
    background-repeat: no-repeat;
    
    /* Gọi animation rơi như cũ */
    animation: fall linear infinite;
}

/* Định nghĩa animation 'fall' */
@keyframes fall {
    0% {
        top: -10%; /* Bắt đầu từ bên trên màn hình */
        opacity: 1;
    }
    100% {
        top: 110%; /* Kết thúc ở dưới màn hình */
        opacity: 0; /* Mờ dần khi rơi xuống */
    }
}


/* --- PHẦN THÊM MỚI: CSS CHO SỔ LƯU BÚT --- */
/* =================================================================== */
.wishes-section {
    background-color: #f9f6f1; /* Một màu nền nhẹ nhàng */
    padding-top: 50px;
    padding-bottom: 50px;
}

#wish-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
    margin: 0 auto;
}

#wish-form input,
#wish-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: 'Quicksand', sans-serif;
    font-size: 1em;
    box-sizing: border-box; /* Quan trọng để padding không làm tăng width */
}

#wish-form textarea {
    resize: vertical; /* Cho phép người dùng kéo giãn chiều cao */
}

#wish-form button {
    display: inline-block;
    background-color: #a92026;
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    border: none;
    cursor: pointer;
    font-size: 1em;
    box-shadow: 0 4px 10px rgba(169, 32, 38, 0.4);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#wish-form button:hover {
    background-color: #c0392b;
    transform: translateY(-2px);
}

.wishes-display {
    margin-top: 50px;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.wishes-display h3 {
    text-align: center;
    margin-bottom: 20px;
    font-family: 'BlackMango', sans-serif;
    font-size: 1.5em;
    color: #333;
}
.wish-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 15px 15px 15px 15px; /* Tăng padding trái để chừa chỗ cho icon */
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); /* Đổ bóng mềm mại hơn */
    border: 1px solid #f0f0f0;
    position: relative; /* Rất quan trọng cho icon trích dẫn */
    overflow: hidden; /* Ẩn các phần thừa của icon */
    transition: transform 0.3s ease;
}

.wish-card:hover {
    transform: translateY(-5px); /* Hiệu ứng nhấc lên khi di chuột */
}

/* Icon trích dẫn " LỚN MỜ phía sau */
.wish-card::before {
    content: '“'; /* Ký tự trích dẫn đẹp */
    font-family: 'Sloop', serif; /* Dùng font Sloop nghệ thuật */
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 4.5em; /* Kích thước cực lớn */
    color: #f7f3e9;  /* Màu vàng nhạt, rất mờ */
    z-index: 0; /* Nằm dưới chữ */
}

/* Tên người gửi */
.wish-card strong {
    display: block;
    margin-bottom: 8px;
    color: #670f16; /* Màu đỏ sẫm của thiệp */
    font-family: 'BlackMango', sans-serif;
    font-size: 0.9em;
    position: relative; /* Nằm trên icon */
    z-index: 1;
}

/* Nội dung lời chúc */
.wish-card p {
    margin: 0;
    line-height: 1.7;
    color: #444; /* Màu chữ đậm hơn, dễ đọc */
    font-size: 0.85em;
    position: relative;
    z-index: 1;
}

/* Ngày tháng gửi */
.wish-card .wish-timestamp {
    display: block;
    text-align: right;
    margin-top: 15px;
    font-size: 0.8em;
    color: #aaa; /* Màu xám nhạt */
    font-style: italic;
    position: relative;
    z-index: 1;
}


/* =================================================================== */
/* --- PHẦN THÊM MỚI: CSS CHO KHU VỰC MÃ QR --- */
/* =================================================================== */
.qr-code-section h2 {
    font-family: 'Azkia', cursive;
    font-size: 3em;
    color: #d35400;
    font-weight: normal;
    margin-bottom: 30px;
}

.qr-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Căn các box theo lề trên */
    gap: 20px; /* Khoảng cách giữa 2 box */
}

.qr-box {
    /* flex: 1; ĐÃ BỎ DÒNG NÀY */
    max-width: 280px; /* Tăng kích thước tối đa cho nổi bật hơn */
    padding: 20px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s ease;
}

.qr-box:hover {
    transform: translateY(-5px);
}

.qr-box img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    margin-bottom: 15px;
}

.qr-box h3 {
    font-family: 'BlackMango', sans-serif;
    font-size: 1.3em;
    color: #333;
    margin: 0 0 10px 0;
}

.qr-box p {
    font-size: 0.85em;
    color: #666;
    line-height: 1.5;
    margin: 0 0 10px 0;
}

.qr-box span {
    font-size: 0.8em;
    font-weight: 500;
    color: #a92026; /* Màu đỏ sẫm */
    display: block; /* Hiển thị trên một dòng riêng */
}

/* Responsive cho điện thoại */
@media (max-width: 480px) {
    .qr-container {
        flex-direction: column; /* Xếp 2 box theo chiều dọc */
        align-items: center; /* Căn giữa các box */
    }

    .qr-box {
        max-width: 250px; /* Cho box rộng hơn trên điện thoại */
        width: 100%;
    }
}

/* =================================================================== */
/* --- PHẦN THÊM MỚI: CSS CHO NÚT ĐIỀU KHIỂN NHẠC --- */
/* =================================================================== */
#music-control {
    position: fixed; /* Nằm cố định trên màn hình */
    bottom: 20px;    /* Cách lề dưới 20px */
    left: 20px;      /* Cách lề trái 20px */
    z-index: 9998;   /* Nổi lên trên các nội dung khác */
    
    width: 45px;     /* Kích thước nút */
    height: 45px;
    background-color: rgba(255, 255, 255, 0.8); /* Nền trắng mờ */
    border-radius: 50%; /* Bo tròn thành hình tròn */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Đổ bóng cho đẹp */
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    cursor: pointer; /* Biến con trỏ thành hình bàn tay khi di chuột vào */
    transition: transform 0.2s ease;
}

#music-control:hover {
    transform: scale(1.1); /* Phóng to một chút khi di chuột vào */
}

#music-control img {
    width: 40px;   /* Kích thước ảnh loa bên trong */
    height: 40px;
}

/* Thêm animation xoay tròn cho icon khi nhạc đang phát */
#music-control.playing img {
    animation: spin 3s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}