/* ======== KHAI BÁO FONT CHỮ TÙY CHỈNH ======== */
@font-face {
    font-family: 'Hangout'; /* Đặt tên cho font chữ để sử dụng sau này */
    src: url('fonts/DFVN-Hangout-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
/* ======== CÀI ĐẶT CHUNG & FONT ======== */

/* THÊM ĐOẠN NÀY VÀO ĐẦU FILE */
html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  /* KẾT THÚC ĐOẠN THÊM MỚI */
  
  * {
      margin: 0;
      padding: 0;
  }
  /* ... phần còn lại của CSS ... */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f4f4f4;
}

/* ======== MENU ======== */
.main-header {
    position: fixed;
    top: 0;
    left: 0;  /* Thêm left: 0 */
    right: 0; /* Giữ right: 0 */
    width: 100%;
    padding: 40px 40px 0 40px; /* Nên thêm padding-left để cân đối */
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box; /* <<< THÊM DÒNG NÀY */
}

.main-header nav ul {
    list-style: none;
    display: flex;
    gap: 35px;
}

.main-header nav a {
    text-decoration: none;
    color: white;
    font-size: 30px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    transition: color 0.3s ease;
}

.main-header nav a:hover {
    color: #ffd700;
}

/* ======== TRANG CHỦ MỚI - SECTION 1: HÀNH TRÌNH TƠ THỦI ======== */
.hero-section {
    position: relative; /* Làm gốc để định vị cho các lớp con */
    width: 100%;
    /* BỎ: height, background-image, và các thuộc tính background khác */
    /* Chiều cao của section giờ sẽ tự động theo chiều cao của ảnh nền */
    line-height: 0; /* Loại bỏ khoảng trắng thừa có thể xuất hiện */
}

/* Thẻ <img> làm nền */
.hero-background-image {
    width: 100%;  /* Luôn rộng bằng 100% section cha */
    height: auto; /* Chiều cao tự động theo tỉ lệ gốc của ảnh */
    display: block;
}

/* Lớp phủ chứa các ảnh collage */
.photo-collage-container {
    position: absolute; /* Đặt lớp phủ này nằm đè chính xác lên trên ảnh nền */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* overflow: hidden; đã được chuyển từ .hero-section sang đây */
    overflow: hidden; 
}

/* (Phần code cho .collage-item và các ảnh con bên trong giữ nguyên y hệt như cũ) */
.collage-item {
    position: absolute;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.collage-item img {
    width: 100%;
    height: auto;
    filter: drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.3));
}
.photo-2025 {
    width: 45vw;
    max-width: 650px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.photo-2023 {
    width: 25vw;
    max-width: 350px;
    top: 15%;
    left: 5%;
    transform: rotate(-8deg);
    z-index: 3;
}
.photo-2024 {
    width: 25vw;
    max-width: 350px;
    bottom: 10%;
    right: 5%;
    transform: rotate(7deg);
    z-index: 3;
}
.collage-item:hover {
    transform: scale(1.1) rotate(0);
    z-index: 10;
}
.photo-2025:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

/* ======== TRANG CHỦ MỚI - CSS BỔ SUNG CHO SECTION 1 ======== */

/* Thêm con trỏ chuột để người dùng biết là có thể click */
.photo-2023, .photo-2024 {
    cursor: pointer;
}

/* Animation: scale lên xuống nhẹ + flicker ánh sáng */
@keyframes flickerScale {
    0%, 100% {
        transform: scale(1) rotate(var(--rotate));
        opacity: 1;
    }
    50% {
        transform: scale(1.08) rotate(var(--rotate));
        opacity: 0.6;
    }
}

/* Apply animation cho .photo-2023 và .photo-2024 */
.photo-2023, .photo-2024 {
    cursor: pointer;
    animation: flickerScale 1.8s ease-in-out infinite;
}

/* Biến --rotate giúp giữ nguyên góc xoay gốc */
.photo-2023 {
    --rotate: -8deg;
}
.photo-2024 {
    --rotate: 7deg;
}

/* hover vào thì animation dừng lại để người dùng dễ click */
.photo-2023:hover,
.photo-2024:hover {
    animation-play-state: paused;
    transform: scale(1.1) rotate(var(--rotate));
}


/* ======== MODAL POP-UP CHO ẢNH COLLAGE ======== */
.collage-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 5000; /* z-index cao nhất */
    display: none; /* Ẩn mặc định */
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.collage-modal-overlay.active {
    display: flex; /* Hiện lên khi có class active */
}

.collage-modal-content {
    position: relative;
    max-width: 80%; /* Chiều rộng tối đa */
    max-height: 90%; /* Chiều cao tối đa */
    animation: zoomIn 0.3s ease-out;
}

.collage-modal-content img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Đảm bảo ảnh luôn vừa vặn, không bị méo */
    border-radius: 10px;
}

.close-collage-modal {
    position: absolute;
    top: -15px; right: -15px;
    background-color: white; color: #333;
    border: 2px solid #333; border-radius: 50%;
    width: 40px; height: 40px;
    font-size: 2rem; font-weight: bold;
    line-height: 1; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ======== TRANG CHỦ MỚI - BANNER CHUYỂN TIẾP VÀ SECTION 2 MỚI ======== */

/* 1. Banner chuyển tiếp */
.floating-banner {
    position: relative; /* Cần thiết để z-index hoạt động */
    width: 100%;
    
    /* Kéo banner lên trên để nó đè lên phần cuối của section 1 */
    /* Giá trị này có thể cần điều chỉnh tùy theo chiều cao của ảnh overlay */
    margin-top: -150px; 
    
    z-index: 10; /* Đảm bảo banner luôn nằm trên cùng */
    line-height: 0; /* Loại bỏ khoảng trắng thừa dưới ảnh */
}

.floating-banner img {
    width: 100%; /* Luôn rộng 100% màn hình */
    height: auto;
}
/* 2. Section 2 mới */
.story-section-new {
    position: relative;
    background-image: url('images/2BG2 (2).png');
    background-size: cover;
    background-position: center;
    padding-top: 120px;
    padding-bottom: 100px;
    z-index: 5;
    margin-top: -50px; 
  }
  
  /* 3. Container chứa ảnh nội dung */
  .story-content-new {
    max-width: 1400px;
    margin: 30px auto 0 auto; /* Căn giữa và thêm khoảng cách top */
    padding-left: 50px;
    padding-right: 50px;
    display: flex;
    justify-content: center; /* Căn giữa ảnh bên trong */
  }
  
  .story-content-new img {
    width: 80%;       /* hoặc 70% nếu muốn nhỏ hơn */
    max-width: 800px; /* Giới hạn ảnh không quá to trên màn lớn */
    height: auto;
    border-radius: 15px;
    display: block;
  }
  


/* ======== RESPONSIVE CHO SECTION 2 MỚI ======== */
@media (max-width: 768px) {
    .floating-banner {
        margin-top: -60px; /* Giảm độ lấn trên mobile */
    }

    .story-section-new {
        padding-top: 80px;
        padding-bottom: 60px;
    }

    .story-content-new {
        padding-left: 20px; /* Giảm padding ngang trên mobile */
        padding-right: 20px;
    }
}
  
/* ======== PHẦN 5: LIÊN HỆ / FOOTER ======== */

#lien-he {
    background-color: #274c61; /* Màu xanh đậm từ ảnh */
    color: white;
    padding: 80px 40px; /* Padding lớn cho desktop */
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6; /* Tăng khoảng cách dòng cho dễ đọc */
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    gap: 40px; /* Khoảng cách lớn giữa các cột trên desktop */
}

.footer-column {
    flex: 1;
}

/* --- Cột Trái --- */
.footer-left {
    flex-basis: 40%;
    text-align: left;
}
.footer-left h4 {
    font-size: 1.2rem; /* Cỡ chữ tiêu đề trên desktop */
    margin-bottom: 20px;
    text-transform: uppercase;
}
.info-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}
.info-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    font-size: 1rem; /* Cỡ chữ nội dung trên desktop */
}
.info-list i {
    font-size: 1.1rem;
    margin-right: 15px;
    width: 20px;
    margin-top: 5px;
}
.info-list a {
    color: white;
    text-decoration: none;
}
.info-list a:hover {
    text-decoration: underline;
}

/* --- Cột Giữa --- */
.footer-center {
    flex-basis: 20%;
    text-align: center;
}
.footer-logo {
    max-width: 300px; /* Kích thước logo trên desktop */
    height: auto;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
}

/* --- Cột Phải --- */
.footer-right {
    flex-basis: 40%;
    text-align: center;
}
.footer-right h4 {
    font-size: 1.2rem;
    margin-bottom: 25px;
    text-transform: uppercase;
}
.social-icons {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 30px;
}
.social-icons a {
    color: white;
    font-size: 2rem; /* Cỡ icon trên desktop */
    transition: transform 0.3s ease, color 0.3s ease;
}
.social-icons a:hover {
    transform: scale(1.2);
    color: #ffc107;
}
.footer-button {
    display: inline-block;
    background-color: white;
    color: #274c61;
    padding: 15px 40px; /* Padding nút trên desktop */
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem; /* Cỡ chữ nút trên desktop */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.footer-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}
/* 
/* ======== TRANG CHỦ MỚI - SECTION 3: CÂU CHUYỆN & SỨ MỆNH ======== */

.mission-section {
    margin-top: -30px;
    background-image: url('images/2BG3.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Tạo hiệu ứng parallax nhẹ */
    padding: 0 0 100px 0; /* Chỉ cần padding dưới */
    color: #333; /* Màu chữ mặc định cho section */
}

@media (max-width: 768px) {
    .mission-section {
        margin-top: 0px;
    }
}
  

.mission-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* ======== TRANG CHỦ MỚI - SECTION 3: MỤC TIÊU & SỨ MỆNH (Cấu trúc mới) ======== */

/* Banner chuyển tiếp */
.transition-overlay-2 {
    /* Bỏ position: relative vì không cần thiết ở đây */
    width: 100%; /* Đảm bảo div cha luôn rộng 100% */
    margin-top: -70px; 
    z-index: 15;
    line-height: 0; /* Rất quan trọng để loại bỏ khoảng trắng thừa dưới ảnh */
    position: relative; /* Giữ lại để z-index hoạt động đáng tin cậy */
}

.transition-overlay-2 img {
    width: 100%; /* Bắt buộc: Ảnh sẽ luôn dãn ra để vừa với div cha */
    height: auto; /* Giữ đúng tỉ lệ ảnh */
}
@media (max-width: 768px) {
    /* Banner chuyển tiếp */
    .transition-overlay-2 {
        width: 100%; /* Đảm bảo div cha luôn rộng 100% */
        margin-top: -40px; 
        z-index: 15;
        line-height: 0; /* Rất quan trọng để loại bỏ khoảng trắng thừa dưới ảnh */
        position: relative; /* Giữ lại để z-index hoạt động đáng tin cậy */
    }
    
}

/* Section 3 container chính */
.mission-section {
    position: relative; /* Rất quan trọng! Làm gốc định vị cho các nút */
    background-image: url('images/2BG3.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding-bottom: 100px;
    min-height: 800px; /* Đảm bảo section có đủ chiều cao cho các nút */
}

@media (max-width: 768px) {
    /* Banner chuyển tiếp */
    .mission-section {
        margin-top: -10px; 
    }
    
}
/* Header của section (toàn màn hình) */
.mission-header {
    width: 100%;
}
.mission-header img {
    width: 100%;
    height: auto;
}


/* Các nút bấm tương tác */
.mission-btn {
    position: absolute;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 300px; /* Kích thước tương đối */
    max-width: 500px; /* Giới hạn kích thước tối đa */
    transition: transform 0.3s ease, filter 0.3s ease;
}
.mission-btn img {
    width: 100%;
    height: auto;
}
.mission-btn:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6)); /* Hiệu ứng glow */
}

/* Định vị chính xác cho từng nút */
.muc-tieu-btn {
    top: 30px;
    left: 100px;
}
.su-menh-btn {
    top: 300px;
    margin-right: 100px;
}

/* ======== RESPONSIVE CHO CÁC NÚT BẤM SECTION 3 ======== */

@media (max-width: 768px) {
    .mission-btn {
        /* YÊU CẦU CHÍNH: Giảm kích thước tối đa của nút còn 50% */
        /* Kích thước gốc là 500px, 50% sẽ là 250px */
        max-width: 150px; 
    }

    .muc-tieu-btn {
        top: 20px;
        left: 5%; /* <<< SỬA: Dùng % thay vì px */
    }
    .su-menh-btn {
        top: 200px; /* Hoặc 300px tùy ý bạn */
        margin-right: -10px; /* <<< SỬA: Cũng nên cách lề phải một chút */
    }
    
}

/*
======================================================
    CSS CHO MODAL SECTION 3 (ĐÃ CẬP NHẬT ANIMATION)
======================================================
*/

/* --- 1. Định nghĩa các Keyframes cho Animation --- */

/* Animation trượt từ trái sang (cho modal Mục tiêu) */
@keyframes slideInFromLeft {
    from {
        /* Bắt đầu ở vị trí bên ngoài màn hình bên trái và trong suốt */
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        /* Kết thúc ở vị trí mặc định và hiện rõ */
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animation trượt từ phải sang (cho modal Sứ mệnh) */
@keyframes slideInFromRight {
    from {
        /* Bắt đầu ở vị trí bên ngoài màn hình bên phải và trong suốt */
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        /* Kết thúc ở vị trí mặc định và hiện rõ */
        transform: translateX(0);
        opacity: 1;
    }
}


/* --- 2. CSS chung cho các Modal --- */

.mission-content-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 3000;
    display: none; /* Sẽ đổi thành flex bằng JS */
    
    /* Yêu cầu của bạn: modal Mục tiêu căn trái, Sứ mệnh căn phải */
    /* Chúng ta sẽ dùng flexbox để làm điều này */
    justify-content: center; /* Tạm thời để center, sẽ ghi đè bên dưới */
    align-items: center;
    
    padding: 20px;
    overflow: hidden; /* Quan trọng: để nội dung không tràn ra ngoài khi đang animation */
}

/* Khi modal được kích hoạt, nó sẽ hiện ra */
.mission-content-modal.active {
    display: flex;
}

/* Nội dung bên trong modal (ảnh) */
.mission-modal-content {
    position: relative;
    width: 50%; /* Rộng 50% màn hình */
    max-width: 900px; /* Giới hạn kích thước tối đa */
    
    /* BỎ animation: zoomIn; khỏi đây vì chúng ta sẽ áp dụng riêng */
}

.mission-modal-content img {
    width: 100%;
    height: auto;
    display: block; /* Tránh khoảng trống thừa */
}


/* --- 3. Áp dụng Animation và Căn chỉnh riêng cho từng Modal --- */

/* ---- Modal Mục Tiêu (Trượt từ trái) ---- */
#muc-tieu-modal {
    /* Căn chỉnh khối modal về phía bên trái màn hình */
    justify-content: flex-start;
}
#muc-tieu-modal .mission-modal-content {
    /* Thêm margin-left âm theo yêu cầu */
    margin-left: -200px;
}
/* Responsive cho Section 3 mới */
@media (max-width: 480px) {
    #muc-tieu-modal .mission-modal-content {
        margin-left: -50px; /* Ghi đè khi ở màn hình nhỏ */
    }

    #muc-tieu-modal.active .mission-modal-content {
        animation: slideInFromLeft 0.6s;
    }
}

/* Chỉ áp dụng animation khi modal được kích hoạt */
#muc-tieu-modal.active .mission-modal-content {
    animation: slideInFromLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}


/* ---- Modal Sứ Mệnh (Trượt từ phải) ---- */
#su-menh-modal {
    /* Căn chỉnh khối modal về phía bên phải màn hình */
    justify-content: flex-end;
}
/* Chỉ áp dụng animation khi modal được kích hoạt */
#su-menh-modal.active .mission-modal-content {
    animation: slideInFromRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}


/* --- 4. Nút đóng (Giữ nguyên) --- */
.close-mission-modal {
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: white;
    color: #333;
    border: 2px solid #333;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Responsive cho Section 3 mới */
@media (max-width: 768px) {
    .mission-section { min-height: 600px; }
    .mission-btn { width: 50%; } /* Cho nút to hơn một chút trên mobile */
    .muc-tieu-btn { top: 20px; }
    .su-menh-btn { top: 200px; } /* Đẩy nút thứ 2 lên cao hơn */
    .mission-modal-content { width: 90%; } /* Cho modal to hơn trên mobile */
} */

/* 1. Header của section */
.mission-header {
    margin-top: 300px;
    width: 100%;
    /* Không cần padding-top 20px, vì nó nằm sát mép trên */
}
.mission-header img {
    width: 100%;
    height: auto;
}

/* 2. Đoạn giới thiệu */
.mission-intro {
    font-family: 'SVN-Dear Jane', cursive; /* Sử dụng font mới */
    text-align: center;
    padding: 0 30px;
    margin-top: 20px;
    color:#f4f4f4
}
.mission-intro img {
    max-width: 80%;
    margin: -50px auto 0 auto; /* Kéo lên 50px và căn giữa */
}
.mission-intro p {
    margin-top: 20px;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* 3. Layout Grid chung */
.mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia làm 2 cột bằng nhau */
    gap: 40px; /* Khoảng cách giữa 2 cột */
    align-items: center; /* Căn giữa các item theo chiều dọc */
    margin-top: 50px; /* Tăng khoảng cách giữa các grid */
    padding: 0 30px;
    color:#f4f4f4
}

.grid-text p {
    font-size: 1.1rem;
    line-height: 1.8;
}

.grid-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Các lớp tiện ích để căn chỉnh */
.text-align-left { text-align: left; }
.text-align-center { text-align: center; }
.image-align-left { justify-self: start; }
.image-align-right { justify-self: end; }


/* 4. Đảo ngược layout cho grid thứ hai */
.mission-grid.layout-reversed .grid-image {
    grid-column: 1;
    grid-row: 1;
}
.mission-grid.layout-reversed .grid-text {
    grid-column: 2;
    grid-row: 1;
    color:#f4f4f4
}

/* ======== RESPONSIVE CHO SECTION 3 ======== */
@media (max-width: 768px) {
    .mission-grid {
        grid-template-columns: 1fr; /* Chuyển thành 1 cột duy nhất */
        gap: 30px;
    }
    
    /* Reset lại layout đảo ngược trên mobile */
    .mission-grid.layout-reversed .grid-image,
    .mission-grid.layout-reversed .grid-text {
        grid-column: 1;
    }

    /* Đảm bảo ảnh luôn ở trên text trong layout đảo ngược */
    .mission-grid.layout-reversed .grid-image {
        grid-row: 1;
    }
    .mission-grid.layout-reversed .grid-text {
        grid-row: 2;
    }
    
    .grid-text {
        text-align: center; /* Căn giữa text trên mobile cho đẹp */
    }
}

/* ======== TRANG CHỦ MỚI - SECTION 4: Ý NGHĨA TÊN GỌI ======== */

.meaning-section {
    position: relative; /* Rất quan trọng để định vị các phần tử con */
    background-image: url('images/2BG4.png');
    background-size: cover;
    background-position: center;
    padding-top: 150px; /* Tạo không gian cho overlay và nội dung */
    display: flex;
    flex-direction: column; /* Xếp các phần tử con theo chiều dọc */
}

/* Lớp phủ chuyển tiếp */
.transition-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(-50%); /* Kéo lên 50% chiều cao của chính nó để nằm giữa 2 section */
    z-index: 6; /* Nằm trên section 3 */
    line-height: 0; /* Loại bỏ khoảng trắng thừa dưới ảnh */
}

.transition-overlay img {
    width: 100%;
    height: auto;
}

/* Container chứa nội dung chính */
.meaning-content-wrapper {
    max-width: 900px;
    width: 90%;
    margin: 0 auto; /* Căn giữa */
    text-align: center;
    flex-grow: 1; /* Đẩy footer xuống dưới */
}

.meaning-typo {
    margin-bottom: 40px;
}

.meaning-typo img,
.meaning-text {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.meaning-text p {
    font-family: 'SVN-Dear Jane', cursive; /* Sử dụng font mới */
    font-size: 30px;
    line-height: 1.6;
    color: #f4f4f4; /* Màu chữ nâu đậm */
    padding-bottom: 50px
}

/* Footer nhỏ của section */
.section-footer {
    width: 100%;
    background-color: #3A5F7E; /* Màu xanh từ ảnh */
    margin-top: auto; /* Đẩy footer xuống sát mép dưới của section */
    padding: 15px 0;
}

.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.footer-text {
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
}

.footer-social-icons {
    display: flex;
    gap: 15px;
}

.footer-social-icons img {
    height: 40px; /* Đặt chiều cao cố định cho các icon */
    width: auto;
    transition: transform 0.3s ease;
}
.footer-social-icons img:hover {
    transform: scale(1.1);
}

/* ======== RESPONSIVE CHO SECTION 4 ======== */

@media (max-width: 768px) {
    .meaning-section {
        padding-top: 100px;
    }
    .meaning-text p {
        font-size: 18px;
    }
    .footer-content {
        flex-direction: column; /* Xếp chồng text và icon trên mobile */
        gap: 15px;
    }
    .footer-text {
        font-size: 1rem;
        text-align: center;
    }
    .footer-social-icons img {
        height: 35px;
    }
}

/* ======== TRANG CHỦ MỚI - SECTION 5: THÔNG TIN GÂY QUỸ (Đã cập nhật vị trí nút) ======== */

.fundraising-section {
    position: relative;
    width: 100%;
    line-height: 0;
}

/* Thẻ <img> làm nền */
.background-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Container phủ lên trên */
.fundraising-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* BỎ: display: grid và các thuộc tính liên quan */
    /* Container này giờ chỉ là một lớp phủ định vị */
}

/* BỎ: .left-panel và .right-panel không còn cần thiết cho layout nữa */

/* Nhóm các nút bấm - Đây là phần thay đổi chính */
.info-buttons {
    position: absolute; /* "Giải phóng" khỏi luồng bình thường */
    top: 30px;          /* Cách mép trên 30px */
    right: 30px;         /* Cách mép phải 30px */
    
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 35%; /* Cho phép các nút co giãn theo chiều rộng màn hình */
    max-width: 450px; /* Giới hạn kích thước tối đa */
}

/* Nút bấm và ảnh bên trong */
.info-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.info-btn img {
    width: 100%; /* Chiều rộng của ảnh sẽ bằng 100% container .info-buttons */
    height: auto;
}

.info-btn:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px rgba(255, 223, 186, 0.7));
}

/* ======== MODAL POP-UP CHO SECTION 5 (Đã sửa lỗi canh giữa) ======== */

.info-modal {
    position: fixed;
    top: 0;
    left: 0;
    
    /* THAY ĐỔI: Phải là 100% để phủ toàn bộ màn hình */
    width: 100%; 
    height: 100%;
    
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 3000;
    display: none;
    justify-content: center;
    align-items: center;
    
    /* THÊM MỚI: Đảm bảo có khoảng đệm và tính toán kích thước đúng */
    padding: 20px;
    box-sizing: border-box;
}

.info-modal.active {
    display: flex;
}

.modal-content {
    position: relative;
    animation: zoomIn 0.3s ease-out;
}

.modal-content img {
    width: 100%;
    height: auto;
    display: block; /* Thêm để tránh khoảng trống thừa */
}

/* Kích thước mặc định cho modal (ảnh Mái Ấm) */
#mai-am-modal .modal-content {
    width: 50vw;
    max-width: 800px;
}
/* Kích thước nhỏ hơn cho modal Chi Tiết */
#chi-tiet-modal .modal-content {
    width: 30vw;
    max-width: 600px;
}

.close-info-modal {
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: white;
    color: #333;
    border: 2px solid #333;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: flex; /* Dùng flex để canh giữa dấu X */
    justify-content: center;
    align-items: center;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}


/* ======== RESPONSIVE CHO SECTION 5 ======== */
@media (max-width: 768px) {
    .info-buttons {
        /* Điều chỉnh vị trí trên mobile để không quá sát mép */
        top: 20px;
        right: 20px;
        gap: 15px;
    }
    .info-btn img {
        /* THAY ĐỔI: Giảm kích thước nút còn 50% */
        max-width: 200px; /* 50% của 450px */
    }
    
    /* Kích thước modal trên mobile */
    #mai-am-modal .modal-content,
    #chi-tiet-modal .modal-content {
        width: 90vw; /* Cho cả 2 modal to ra trên mobile để dễ đọc */
        max-width: none; /* Bỏ giới hạn max-width */
    }
}

/*
===============================================
    RESPONSIVE CHO FOOTER (TABLET VÀ MOBILE)
===============================================
*/

/* 
.story-section {
    -webkit-mask-image: url('images/Paper-Tear-Top.svg');
    mask-image: url('images/Paper-Tear-Top.svg');
    -webkit-mask-size: 100% 100px;
    mask-size: 100% 100px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    mask-position: top center;
}

.story-title-overlay {
    display: block !important;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.story-title-overlay img {
    width: 100%;
    height: auto;
}

.story-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 80px 20px;
}

.story-content img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
} 
*/


/* --- Cho Tablet và các thiết bị nhỏ hơn (dưới 992px) --- */
@media (max-width: 992px) {
    .footer-container {
        flex-direction: column; /* Xếp chồng các cột lên nhau */
        gap: 50px; /* Tăng khoảng cách dọc giữa các khối */
    }

    .footer-left, .footer-right, .footer-center {
        flex-basis: auto; /* Bỏ thiết lập chiều rộng cố định */
        width: 100%;
        max-width: 500px; /* Giới hạn chiều rộng để không quá dài trên tablet */
        text-align: center; /* Căn giữa tất cả */
    }
    
    .info-list li {
        text-align: left; /* Giữ chữ trong li căn trái cho dễ đọc */
        justify-content: center; /* Nhưng căn giữa cả khối li */
    }

    /* Sắp xếp lại thứ tự trên mobile: Logo -> Nút -> Thông tin */
    .footer-center { order: 1; }
    .footer-right { order: 2; }
    .footer-left { order: 3; }
}


/* --- Cho điện thoại (dưới 768px) --- */
@media (max-width: 768px) {
    #lien-he {
        /* Giảm padding tổng thể */
        padding: 60px 25px;
    }

    /* GIẢM CỠ CHỮ */
    .footer-left h4, .footer-right h4 {
        font-size: 1.1rem;
    }
    .info-list li {
        font-size: 0.95rem; /* <-- Thu nhỏ chữ thông tin */
    }
    .footer-button {
        padding: 14px 35px;
        font-size: 1rem; /* <-- Thu nhỏ chữ trên nút */
    }
    .social-icons a {
        font-size: 1.8rem; /* <-- Thu nhỏ icon social */
    }
}


/* --- Cho điện thoại rất nhỏ (dưới 480px) --- */
@media (max-width: 480px) {
    #lien-he {
        padding: 50px 20px;
    }
    
    .footer-container {
        gap: 40px; /* Giảm khoảng cách dọc hơn nữa */
    }

    /* GIẢM CỠ CHỮ THÊM NỮA */
    .footer-left h4, .footer-right h4 {
        font-size: 1rem;
    }
    .info-list li {
        font-size: 0.9rem; /* <-- Thu nhỏ chữ thông tin hơn nữa */
    }
    .footer-logo {
        max-width: 150px; /* Thu nhỏ logo */
    }
    .footer-button {
        width: 100%; /* Cho nút rộng hết cỡ để dễ bấm */
        padding: 15px 20px;
        font-size: 0.9rem;
    }
}

/* ======== RESPONSIVE CHO FOOTER ======== */
/* (Giữ nguyên phần responsive) */
/* ... */
@media (max-width: 992px) {
    .info-grid-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "header header"
            "thumb1 thumb2"
            "display display";
    }
    .info-display { min-height: 500px; }
    .info-title, #display-title { font-size: 4rem; }
    .info-subtitle, #display-subtitle { font-size: 1.2rem; }
}
@media (max-width: 600px) {
    .info-grid-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "thumb1"
            "thumb2"
            "display";
    }
    .info-title, #display-title { font-size: 3rem; }
    .info-subtitle, #display-subtitle { font-size: 1rem; }
    .display-main-text { font-size: 16px; }
}

/* ======== RESPONSIVE ======== */

/* Cho Tablet và các thiết bị nhỏ hơn */
@media (max-width: 1024px) {
    .main-header nav a {
        font-size: 24px;
    }
    .main-header nav ul {
        gap: 25px;
    }
}


/* Cho điện thoại */
@media (max-width: 768px) {
    .main-header {
        padding: 20px 20px 0 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent); /* Thêm nền mờ để menu dễ đọc hơn */
    }
    .main-header nav a {
        font-size: 16px;
    }
    .main-header nav ul {
        gap: 15px;
    }

    .landing-grid-container {
        /* Chuyển về 1 cột duy nhất trên mobile */
        grid-template-columns: 1fr;
        /* Điều chỉnh lại vị trí các phần tử */
        /* Cột, hàng, cột, hàng */
        grid-template-rows: 0.5fr 1fr 1fr 1fr 1fr 0.5fr; /* Sắp xếp lại chiều cao hàng */
    }

    /* Đưa hết nội dung vào cột 1 */
    .grid-item.typo-1 { grid-area: 2 / 1 / 3 / 2; }
    .grid-item.element-1 { grid-area: 3 / 1 / 4 / 2; }
    .grid-item.typo-2 { grid-area: 4 / 1 / 5 / 2; }
    .grid-item.address-text { 
        grid-area: 5 / 1 / 6 / 2;
        padding-top: 0;
        font-size: 14px;
        align-self: center;
    }

    /* Ẩn 2 đồng xu trên mobile để giao diện gọn gàng hơn */
    .grid-item.coin-left,
    .grid-item.coin-right {
        display: none;
    }

    /* Phóng to hình ảnh một chút để vừa màn hình mobile */
    .grid-item img {
        max-width: 85%;
    }
}


/* ======== MODAL MUA VÉ VÀ FORM ======== */

/* Lớp phủ nền */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: none; /* Sẽ đổi thành flex bằng JS */
    justify-content: center;
    align-items: center;
    z-index: 2000;
    padding: 20px;
    overflow-y: auto;
}
.modal-overlay.active {
    display: flex;
}

/* Nút đóng chung */
.close-modal-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    line-height: 1;
}

/* Bảng chọn vé */
.booking-panel {
    position: relative;
    width: 100%;
    max-width: 650px;
    background-color: #4B6541; /* Màu xanh lá từ ảnh */
/* background-image: url('images/Paper-Tear.png'); 
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center, bottom center; */
    border-radius: 30px;
    border: 10px solid #D1762F;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.panel-content {
    padding: 80px 40px 40px 40px;
    text-align: center;
}

.panel-header img {
    max-width: 80%;
    margin-bottom: 20px;
}

.panel-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: white;
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.ticket-cards-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.ticket-type {
    padding: 20px;
    border-radius: 15px;
    color: white;
    width: 160px;
    font-family: 'Hangout', sans-serif;
}
.khoanh-khac { background-color: #654435; border: 3px solid #E8B45B; }
.thuc-tai { background-color: #D45D24; border: 3px solid #FFE4B5; }
.xa-xam { background-color: #2A5172; border: 3px solid #A4C6E1; }

.ticket-title {
    font-size: 1.8rem;
    line-height: 1;
}
.ticket-price {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin: 10px 0;
}
.quantity-selector {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 5px;
}
.quantity-btn {
    background: #E8B45B;
    color: #654435;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.quantity-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
}

.total-price-container {
    background: #3B5034;
    max-width: 300px;
    margin: 30px auto;
    padding: 10px 20px;
    border-radius: 20px;
    color: #E8B45B;
    font-size: 1.5rem;
}
.total-label { font-family: 'Hangout', sans-serif; }
.total-value { font-family: 'Montserrat', sans-serif; font-weight: 700; margin-left: 10px;}

.proceed-btn {
    background: #A92E27;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    border: 3px solid #E8B45B;
    border-radius: 20px;
    padding: 15px 40px;
    cursor: pointer;
    box-shadow: 0 5px 0 #6A1D18;
    transition: all 0.1s ease-in-out;
}
.proceed-btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #6A1D18;
}
.proceed-btn:disabled {
    background: #777;
    cursor: not-allowed;
    box-shadow: 0 5px 0 #555;
}

/* Form điền thông tin */
.info-form-panel {
    position: relative;
    background: #4B6541;
    border: 10px solid #D1762F;
    border-radius: 30px;
    padding: 20px 40px 40px 40px;
    width: 100%;
    max-width: 550px;
    text-align: center;
    color: white;
}
.info-form-panel h3 {
    font-family: 'Montserrat', sans-serif;
    margin: 20px 0;
}
.ticket-summary {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: left;
}
.summary-title {
    font-weight: bold;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 5px;
}
.summary-item { margin-bottom: 5px; }
.summary-item .dot {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}
.summary-total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.3);
    font-weight: bold;
    font-size: 1.1rem;
}

.form-group {
    margin-bottom: 15px;
    text-align: left;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
}
.form-group input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 2px solid #E8B45B;
    background: #f0f0f0;
    font-size: 1rem;
    box-sizing: border-box;
}

#form-submission-status {
    margin-top: 15px;
    font-weight: bold;
}

/* ======================================================== */
/* CSS ĐIỀU CHỈNH RESPONSIVE CHO MÀN HÌNH NHỎ (TỐI ĐA 480px) */
/* ======================================================== */
@media (max-width: 480px) {

    /* Giảm padding chung của lớp phủ để modal có nhiều không gian hơn */
    .modal-overlay {
        padding: 10px;
        /* Canh lề trên cùng thay vì ở giữa, để dễ cuộn hơn trên màn hình ngắn */
        align-items: flex-start; 
    }

    /* Áp dụng cho cả 2 panel */
    .booking-panel, .info-form-panel {
        border-width: 8px; /* Giảm độ dày của viền */
        border-radius: 20px; /* Bo góc nhỏ lại cho cân đối */
        margin-top: 20px; /* Thêm khoảng cách với mép trên màn hình */
    }

    /* Giảm padding bên trong panel để tiết kiệm không gian dọc */
    .panel-content {
        /* Top: 50px (để không bị nút X đè lên), sides/bottom: 20px */
        padding: 50px 20px 20px;
    }

    /* Dời và thu nhỏ nút X */
    .close-modal-btn {
        top: 10px;
        right: 10px;
        font-size: 2rem;
    }

    /* Điều chỉnh header */
    .panel-header img {
        max-width: 75%; /* Hơi nhỏ lại một chút */
        margin-bottom: 15px;
    }

    /* Giảm cỡ chữ và lề của subtitle */
    .panel-subtitle {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    /* Điều chỉnh container chứa các thẻ vé */
    .ticket-cards-container {
        gap: 15px; /* Giảm khoảng cách giữa các thẻ */
        flex-direction: column; /* Chuyển thành cột để vừa màn hình dọc */
        align-items: center; /* Căn giữa các thẻ trong cột */
    }

    /* Điều chỉnh thẻ vé */
    .ticket-type {
        width: 80%; /* Chiếm phần lớn chiều rộng để dễ nhìn */
        max-width: 250px; /* Giới hạn chiều rộng tối đa */
        padding: 15px;
    }
    
    /* Ghi đè inline style của HTML để co chữ lại trên mobile */
    .ticket-title {
        font-size: 1.2rem !important; /* Quan trọng: Ghi đè inline style */
        margin-bottom: 8px;
    }

    .ticket-price {
        font-size: 1rem;
        margin: 8px 0;
    }

    /* Điều chỉnh bộ chọn số lượng */
    .quantity-btn {
        width: 28px;
        height: 28px;
        font-size: 1.4rem;
    }
    .quantity-value {
        font-size: 1.1rem;
    }

    /* Điều chỉnh khu vực tổng tiền */
    .total-price-container {
        margin: 25px auto;
        padding: 10px 15px;
        font-size: 1.3rem;
        width: 90%; /* Dùng % để linh hoạt */
        box-sizing: border-box;
    }

    /* Điều chỉnh nút bấm chính */
    .proceed-btn {
        font-size: 1.1rem;
        padding: 12px 25px;
        border-radius: 15px;
        width: 90%; /* Dùng % để linh hoạt */
        box-sizing: border-box;
    }

    /* ----- Tương tự, điều chỉnh cho Form điền thông tin ----- */
    .info-form-panel {
        padding: 50px 20px 20px;
    }

    .info-form-panel h3 {
        font-size: 1.1rem;
        margin: 10px 0 20px 0;
    }

    .form-group input {
        padding: 12px;
        font-size: 1rem;
    }
}

/* ======== RESPONSIVE CHO FOOTER ======== */
/* (Giữ nguyên phần responsive) */
/* ... */
@media (max-width: 992px) {
    .info-grid-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "header header"
            "thumb1 thumb2"
            "display display";
    }
    .info-display { min-height: 500px; }
    .info-title, #display-title { font-size: 4rem; }
    .info-subtitle, #display-subtitle { font-size: 1.2rem; }
}
@media (max-width: 600px) {
    .info-grid-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "thumb1"
            "thumb2"
            "display";
    }
    .info-title, #display-title { font-size: 3rem; }
    .info-subtitle, #display-subtitle { font-size: 1rem; }
    .display-main-text { font-size: 16px; }
}

/* ======== RESPONSIVE ======== */

/* Cho Tablet và các thiết bị nhỏ hơn */
@media (max-width: 1024px) {
    .main-header nav a {
        font-size: 24px;
    }
    .main-header nav ul {
        gap: 25px;
    }
}


/* Cho điện thoại */
@media (max-width: 768px) {
    .main-header {
        padding: 20px 20px 0 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent); /* Thêm nền mờ để menu dễ đọc hơn */
    }
    .main-header nav a {
        font-size: 16px;
    }
    .main-header nav ul {
        gap: 15px;
    }

    .landing-grid-container {
        /* Chuyển về 1 cột duy nhất trên mobile */
        grid-template-columns: 1fr;
        /* Điều chỉnh lại vị trí các phần tử */
        /* Cột, hàng, cột, hàng */
        grid-template-rows: 0.5fr 1fr 1fr 1fr 1fr 0.5fr; /* Sắp xếp lại chiều cao hàng */
    }

    /* Đưa hết nội dung vào cột 1 */
    .grid-item.typo-1 { grid-area: 2 / 1 / 3 / 2; }
    .grid-item.element-1 { grid-area: 3 / 1 / 4 / 2; }
    .grid-item.typo-2 { grid-area: 4 / 1 / 5 / 2; }
    .grid-item.address-text { 
        grid-area: 5 / 1 / 6 / 2;
        padding-top: 0;
        font-size: 14px;
        align-self: center;
    }

    /* Ẩn 2 đồng xu trên mobile để giao diện gọn gàng hơn */
    .grid-item.coin-left,
    .grid-item.coin-right {
        display: none;
    }

    /* Phóng to hình ảnh một chút để vừa màn hình mobile */
    .grid-item img {
        max-width: 85%;
    }
}

/*
======================================================
    RESPONSIVE BỔ SUNG CHO CÁC MÀN HÌNH RẤT NHỎ
======================================================
*/

/* Áp dụng cho các màn hình có chiều rộng tối đa là 480px */
@media (max-width: 480px) {
    .main-header {
        /* Giảm padding để menu không bị quá sát lề */
        padding: 15px 15px 0 0;
    }

    .main-header nav a {
        /* Giảm cỡ chữ menu xuống nhỏ hơn nữa */
        font-size: 13px;
    }

    .main-header nav ul {
        /* Giảm khoảng cách giữa các mục menu */
        gap: 10px;
    }
}
/* Speaker icon fixed at bottom right */
#speaker-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    width: 40px;
    height: 40px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
  }
  
  #speaker-toggle:hover {
    opacity: 1;
  }
  
  #speaker-icon {
    width: 100%;
    height: 100%;
  }

/* ================================================= */
/* === ANIMATION NHẤP NHÁY CHO CÁC NÚT BẤM (MỚI) === */
/* ================================================= */

/* 1. ĐỊNH NGHĨA ANIMATION "PULSE-GLOW" */
@keyframes pulse-glow {
    0% {
        /* Bắt đầu với không có hiệu ứng đổ bóng */
        filter: drop-shadow(0 0 0 rgba(255, 255, 180, 0));
    }
    50% {
        /* Tại điểm giữa, phát sáng mạnh nhất */
        filter: drop-shadow(0 0 15px rgba(255, 255, 180, 0.7));
    }
    100% {
        /* Quay trở lại trạng thái không có bóng đổ để tạo chu kỳ */
        filter: drop-shadow(0 0 0 rgba(255, 255, 180, 0));
    }
}


/* 2. ÁP DỤNG ANIMATION VÀO NÚT BẤM */
.mission-btn {
    position: absolute;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 300px;
    max-width: 500px;
    transition: transform 0.3s ease, filter 0.3s ease;
    
    /* === THÊM DÒNG NÀY === */
    /* Áp dụng animation: tên là "pulse-glow", kéo dài 2.5 giây, lặp lại vô hạn */
    animation: pulse-glow 2.5s ease-in-out infinite;
}

.mission-btn img {
    width: 100%;
    height: auto;
}


/* 3. DỪNG ANIMATION KHI NGƯỜI DÙNG HOVER */
.mission-btn:hover {
    /* === THÊM DÒNG NÀY === */
    /* Dừng animation nhấp nháy để ưu tiên cho hiệu ứng hover */
    animation: none; 

    /* Giữ lại hiệu ứng hover của bạn */
    transform: scale(1.05);
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6)); /* Hiệu ứng glow */
}

/* Các phần CSS khác của bạn giữ nguyên, không cần thay đổi */
.muc-tieu-btn {
    top: 30px;
    left: 100px;
}
.su-menh-btn {
    top: 300px;
    right: 0;
}
@media (max-width: 768px) {
    .mission-btn {
        max-width: 150px; 
    }
    .muc-tieu-btn {
        top: 20px;
        left: 5%;
    }
    .su-menh-btn {
        top: 200px;
        right: 5%;
    }
}