/* ======== 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;
  }
  
  
  * {
      margin: 0;
      padding: 0;
  }
  /* ... phần còn lại của CSS ... */

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f4f4f4;
}

/*
======================================================
    CSS CHO VIDEO INTRO (ĐÃ ĐIỀU CHỈNH RESPONSIVE)
======================================================
*/

/* Container bao bọc toàn bộ intro */
#video-intro-container {
    position: fixed; /* Nằm cố định trên cùng */
    top: 0;
    left: 0;
    width: 100vw;   /* Sử dụng vw và vh để đảm bảo chiếm đúng màn hình */
    height: 100vh;
    z-index: 9999; /* Luôn luôn nằm trên tất cả các phần tử khác */
    background-color: #000; /* Màu nền đen sẽ lấp đầy khoảng trống */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-out; /* Hiệu ứng mờ đi khi ẩn */
}

/* Thẻ video bên trong */
#intro-video {
    width: 100%;
    height: 100%;
    
    /* 
      THAY ĐỔI QUAN TRỌNG:
      - object-fit: contain;
      - Video sẽ luôn hiển thị đầy đủ, không bị cắt.
      - Tỷ lệ khung hình của video sẽ được giữ nguyên.
      - Các khoảng trống (nếu có) sẽ được lấp đầy bởi màu nền đen
        của #video-intro-container.
    */
    object-fit: contain; 
}


/* -- Nút Bỏ qua / Vào Website -- (Giữ nguyên hoặc chỉnh sửa nếu cần) */
#skip-intro-btn, #enter-button { /* Áp dụng cho cả hai loại nút nếu có */
    position: absolute; /* Nằm trên video */
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%); /* Căn giữa nút theo chiều ngang */

    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: 1px solid white;
    border-radius: 25px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    z-index: 10000; /* Nằm trên cả video */
    transition: background-color 0.3s ease;
}

#skip-intro-btn:hover, #enter-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Lớp "hidden" hoặc "fade-out" để ẩn intro */
#video-intro-container.hidden,
#video-intro-container.fade-out {
    opacity: 0;
    pointer-events: none; /* Không cho phép click vào lớp intro đã ẩn */
}


/* ======== RESPONSIVE CHO MÀN HÌNH NHỎ ======== */

/* 
  BẠN KHÔNG CẦN đoạn responsive cho #intro-video nữa
  vì 'object-fit: contain' đã tự xử lý việc co giãn.
  Đoạn mã này nên được XÓA ĐI.
*/
/*
@media (max-width: 480px) {
    #intro-video {
        width: 30%;
        height: 30%;
    }
}
*/

/* Responsive cho nút bấm trên màn hình nhỏ */
@media (max-width: 480px) {
    #skip-intro-btn, #enter-button {
        bottom: 20px;
        padding: 8px 16px;
        font-size: 12px;
    }
}

/* ======== MENU ======== */
/* (Giữ nguyên phần menu của bạn, nó đã tốt rồi) */
.main-header {
    position: fixed;
    top: 0;
    right: 0; /* Giữ right: 0 để đảm bảo nó luôn dính phải */
    left: 0; /* Thêm left: 0 để nó chiếm toàn bộ chiều rộng */
    width: 100%; /* Giữ nguyên hoặc có thể bỏ đi khi đã có left/right */
    padding: 40px 40px 0 40px; /* 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;
}


/* ======== PHẦN 1: LANDING SECTION (ĐÃ CẬP NHẬT) ======== */

#landing {
    /* THAY ĐỔI 1: Chuyển thành container tương đối */
    position: relative;
    width: 100%;
    /* BỎ ĐI: height, background-image, background-size, etc. */
    /* Chiều cao của section này sẽ tự động điều chỉnh theo chiều cao của ảnh nền */
}

/* THÊM MỚI: Định dạng cho ảnh nền */
.landing-background-image {
    width: 100%; /* Luôn rộng bằng 100% section */
    height: auto; /* Chiều cao tự động theo tỉ lệ ảnh */
    display: block; /* Loại bỏ khoảng trống thừa dưới ảnh */
}

/* THAY ĐỔI 2: Chuyển grid thành lớp phủ tuyệt đối */
.landing-grid-container {
    position: absolute; /* Đặt lớp grid nằm đè lên trên ảnh */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Luôn có kích thước bằng với section cha */

    display: grid;
    grid-template-rows: repeat(6, 1fr); 
    grid-template-columns: 1fr auto 1fr;
    z-index: 2; /* Đảm bảo grid nằm trên ảnh nền */
}

/* (Các class .grid-item bên trong giữ nguyên) */
.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.grid-item img {
    max-width: 100%;
    height: auto;
    display: block;
}

.grid-item.typo-1 { 
    padding-top: 250px;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-self: center;
    align-self: end;
    width: 65%
}
.grid-item.element-1 { 
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    justify-self: center;
    align-self: start;
    cursor: pointer;
    width: 40%
 }
.grid-item.typo-2 { 
    margin-top: -120px;
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    justify-self: center;
    align-self: end;
    width: 50%
}

@media (max-width: 768px) {
    .grid-item.element-1 { 
        margin-top: -30px; 
    }
    .grid-item.typo-1 { 
        margin-top: -60px; 
    }
    .grid-item.typo-2 { 
        margin-top: -40px; 
    }

} 

/* ======== TRANG CHỦ MỚI - CẤU TRÚC SECTION 2 & 3 MỚI ======== */

/* ĐIỀU CHỈNH Z-INDEX CHO SECTION 1 ĐỂ SECTION 2 CÓ THỂ NẰM DƯỚI */
.hero-section {
    position: relative; /* Bắt buộc phải có để z-index hoạt động */
    z-index: 2;
}

/* --- SECTION 2 MỚI: SÂN KHẤU TƠ THỦI --- */
.stage-section {
    position: relative;
    width: 100%;
    line-height: 0;
    
    /* YÊU CẦU: Nằm dưới Section 1 và lấn lên trên */
    margin-top: -50px;
    z-index: 1; /* Z-index thấp hơn .hero-section để nằm dưới */
}

.stage-background {
    width: 100%;
    height: auto;
}

.stage-content-wrapper {
    position: absolute;
    top: 0;
    left: 0; /* Thêm left: 0 để định vị rõ ràng */
    /* margin-left: -20px; */ /* <<< XÓA DÒNG NÀY ĐI */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    box-sizing: border-box; /* Thêm vào để đảm bảo padding không gây tràn */
}

.stage-content-wrapper img {
    width: 70%;
    max-width: 1200px; /* Giới hạn chiều rộng ảnh content */
}

/* --- BANNER CHUYỂN TIẾP GIỮA SECTION 2 VÀ 3 --- */
.full-width-overlay {
    position: relative;
    width: 100%;
    margin-top: -50px; /* Kéo lên để đè lên section 2, có thể điều chỉnh */
    z-index: 3;
    line-height: 0;
}

/* Khi màn hình nhỏ hơn hoặc bằng 768px (tablet trở xuống) */
@media (max-width: 768px) {
    .full-width-overlay {
      padding-top: 40px; /* Giảm khoảng kéo lên trên màn nhỏ */
    }
  }
    
.full-width-overlay img {
    width: 100%;
    height: auto;
}

/* --- SECTION 3 MỚI: HƯỚNG DẪN --- */
.tutorial-section {
    position: relative;
    width: 100%;
    line-height: 0;
    margin-top: -130px;
    background-color: #8e0909; /* Thêm màu nền dự phòng */
    padding-bottom: 100px; /* Tạo không gian cho overlay treo ở dưới */
}

.tutorial-background {
    width: 100%;
    height: auto;
    opacity: 0
}

.tutorial-content-wrapper {
    position: absolute;
    top: 0;
    left: 0; /* <<< SỬA TỪ -10px THÀNH 0 */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 50px; */
    box-sizing: border-box; /* Thêm vào để đảm bảo padding không gây tràn */
}
.tutorial-content-wrapper img {
    width: 95%; /* <-- Tăng từ 80% lên 90% */
    max-width: 1250px; /* <-- Tăng từ 1100px lên 1200px */
}
/* Responsive */
@media (max-width: 768px) {
    .tutorial-content-wrapper img {
        width: 100%;
        max-width: 1200px; /* <-- Đồng bộ giá trị max-width */
    }
}

/* --- LỚP PHỦ "TREO" Ở DƯỚI CÙNG SECTION 3 --- */
.hanging-overlay {
    position: absolute;
    width: 100%;
    left: 0;
    
    /* YÊU CẦU: Lấn xuống dưới 20px */
    bottom: -50px;
    
    z-index: 200; /* Nằm trên section 3 và section 4 tiếp theo */
    line-height: 0;
}
.hanging-overlay img {
    width: 100%;
    height: auto;
}
/* ======== RESPONSIVE CHO CÁC SECTION MỚI ======== */
@media (max-width: 768px) {
    .hanging-overlay {
     padding-top: -100px
    }
}

/* ======== RESPONSIVE CHO CÁC SECTION MỚI ======== */
@media (max-width: 768px) {
    .full-width-overlay {
        margin-top: -80px; /* Giảm độ lấn trên mobile */
    }
    .stage-content-wrapper,
    .tutorial-content-wrapper {
        padding: 20px; /* Giảm padding trên mobile */
    }
}

.warning-image {
    /* Đây là chìa khóa để ảnh responsive và không bị biến dạng */
    width: 100%;      /* Chiều ngang luôn bằng 100% container (tức 100% màn hình) */
    height: auto;     /* Chiều cao tự động điều chỉnh để giữ đúng tỉ lệ ảnh */
    display: block;   /* Loại bỏ khoảng trống thừa có thể xuất hiện bên dưới ảnh */
    vertical-align: middle; /* Đảm bảo căn chỉnh đúng, tránh lỗi pixel lẻ */
}

.warning-board-wrapper {
    position: relative; /* Rất quan trọng! Làm gốc để định vị cho .board-container */
    display: block;
    line-height: 0; /* Loại bỏ khoảng trống thừa nếu có */
}

/* 2. Ảnh Warning (giữ nguyên như cũ) */
.warning-image {
    width: 100%;
    height: auto;
    display: block;
}

/* 3. Container cho các tấm board */
.board-container {
    /* Định vị tuyệt đối so với .warning-board-wrapper */
    position: absolute;
    bottom: 0;        /* Đặt sát mép dưới của wrapper */
    left: 50%;        /* Đặt điểm bắt đầu ở giữa màn hình */
    transform: translateX(-50%); /* Kéo về bên trái 50% chiều rộng của chính nó để căn giữa hoàn hảo */

    width: 90%;       /* Chiếm 90% chiều rộng wrapper, tránh chạm sát mép màn hình */
    max-width: 1200px; /* Giới hạn chiều rộng tối đa trên màn hình lớn */
    
    /* Dùng Flexbox để dàn các board theo hàng ngang */
    display: flex;
    justify-content: center; /* Căn giữa các board trong container */
    align-items: flex-end;   /* Căn các board theo mép dưới của chúng */
}

/* 4. Kiểu cho từng tấm board */
.board-item {
    max-width: 30%; /* Mỗi board chiếm tối đa 1/4 không gian */
    height: auto;   /* Giữ đúng tỉ lệ */
    transition: transform 0.3s ease; /* Thêm hiệu ứng khi di chuột */
}

/* Kỹ thuật chồng chéo: Áp dụng cho mọi board TRỪ tấm ĐẦU TIÊN */
.board-item:not(:first-child) {
    margin-left: -40px; /* Kéo các tấm board về bên trái để tạo hiệu ứng chồng lên nhau */
}

/* Hiệu ứng khi di chuột lên board: nâng lên một chút và đưa lên trên cùng */
.board-item:hover {
    transform: translateY(-20px) scale(1.05);
    z-index: 10;
}

/* ======== ĐIỀU CHỈNH Z-INDEX CHO CÁC SECTION LIÊN QUAN ======== */
.warning-section {
    position: relative;
    z-index: 5; /* Nằm dưới countdown */
}

#lien-he { /* Footer */
    position: relative;
    z-index: 5; /* Nằm dưới countdown */
}

/* ======== ĐIỀU CHỈNH Z-INDEX CHO CÁC SECTION LIÊN QUAN ======== */
.warning-section {
    position: relative;
    z-index: 5; /* Nằm dưới countdown */
}

#lien-he { /* Footer */
    position: relative;
    z-index: 5; /* Nằm dưới countdown */
}

/* ======== PHẦN 5: COUNTDOWN SECTION (Cấu trúc mới & Responsive) ======== */
.countdown-wrapper {
    position: relative; /* Làm gốc để định vị timer và ảnh nền */
    
    /* YÊU CẦU: Lấn lên trên section Lưu ý */
    margin-top: -100px;
    
    /* YÊU CẦU: Đè lên mép dưới của Footer */
    margin-bottom: -50px;
    
    /* YÊU CẦU: Nằm trên tất cả */
    z-index: 10;
    
    line-height: 0;
}

.countdown-background-image {
    /* YÊU CẦU: Không bị xén, không sai tỉ lệ */
    width: 100%;
    height: auto;
    display: block;
}

.countdown-timer {
    position: absolute; /* Đặt timer đè lên trên ảnh nền */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Căn giữa timer một cách hoàn hảo */
    
    width: 80%; /* Chiếm 80% chiều rộng của ảnh nền */
    max-width: 600px; /* Giới hạn kích thước tối đa trên desktop */

    background-color: #D97930;
    border-radius: 25px;
    padding: 25px 40px;
    display: flex;
    justify-content: space-around; /* Phân bố đều các item */
    gap: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.2);
    border: 4px solid #F1B58A;
}

.timer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.time-value {
    background-color: #5C4A42;
    color: white;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.4);
    
    /* Kỹ thuật clamp() để co giãn mượt mà ban đầu */
    width: clamp(50px, 12vw, 100px);
    height: clamp(50px, 12vw, 100px);
    font-size: clamp(1.5rem, 4vw, 3rem);
}

.time-label {
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    font-size: clamp(0.75rem, 2vw, 1.25rem);
}


/* ======== RESPONSIVE CHO COUNTDOWN ======== */
@media (max-width: 768px) {
    .countdown-wrapper {
        /* Giảm độ lấn trên màn hình nhỏ để không bị quá gắt */
        margin-top: -80px;
        margin-bottom: -40px;
    }

    .countdown-timer {
        width: 90%; /* Cho phép hộp chiếm nhiều không gian hơn */
        padding: 15px;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .countdown-wrapper {
        margin-top: -60px;
        margin-bottom: -30px;
    }

    /* Ghi đè clamp() để thu nhỏ hơn nữa trên điện thoại */
    .time-value {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    .time-label {
        font-size: 0.7rem;
    }
}

/* ======== CÁC PHẦN PLACEHOLDER ======== */
/* Bỏ class .full-screen-section vì không phải section nào cũng full-screen nữa */
.content-section {
    margin-top: -100px;
    min-height: 100vh; /* Dùng min-height thay cho height để nội dung dài hơn có thể hiển thị */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    text-align: center;
}
#trang-chu { background-color: #A8DADC; }
#ve-to-thui { background-color: #457B9D; color: white; }
#dang-ky-ve { background-color: #F1FAEE; }
#lien-he { background-color: #1D3557; color: white; }

#ve-to-thui { background-color: #457B9D; color: white; }

/* ======== PHẦN 3: VỀ TƠ THỦI (CẬP NHẬT VỚI ẢNH NỀN) ======== */
#ve-to-thui {
    /* Thêm các thuộc tính cho ảnh nền */
    background-image: url('images/InfoBG.png');
    background-size: cover;          /* Phóng to/thu nhỏ ảnh để lấp đầy section, chấp nhận cắt xén */
    background-position: center;     /* Giữ cho phần trung tâm của ảnh luôn hiển thị */
    background-repeat: no-repeat;    /* Đảm bảo ảnh không bị lặp lại */

    /* Giữ lại màu nền cũ làm màu dự phòng (fallback) */
    background-color: #2a3d45; /* Một màu tối để chữ trắng dễ đọc khi ảnh chưa tải xong */
    
    /* Giữ lại màu chữ trắng để dễ đọc trên nền tối */
    color: white; 
}

/* ======== PHẦN "VỀ TƠ THỦI" - GRID THÔNG TIN (ĐÃ CẬP NHẬT) ======== */

/* Ghi đè lại padding của .content-section để grid chiếm toàn bộ không gian */
#ve-to-thui {
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Đảm bảo section đủ cao */
}

.info-grid-container {
    width: 100%;
    /* CẬP NHẬT 3: Giảm chiều rộng tối đa để vừa vặn hơn trong màn hình */
    max-width: 1200px; 
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows: auto 1fr;
    gap: 15px;
    grid-template-areas:
        "header header display"
        "thumb1 thumb2 display";
}

.info-item {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
   
}

.info-header { grid-area: header; }
.info-thumbnail.info-item:nth-of-type(1) { grid-area: thumb1; }
.info-thumbnail.info-item:nth-of-type(2) { grid-area: thumb2; }
.info-display { grid-area: display; }

.info-header img {
    width: 100%;
    height: auto;
}

/* --- Styling cho các thumbnail nhỏ --- */
.info-thumbnail {
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    min-height: 250px;
    display: flex; /* Dùng flex để căn chỉnh nội dung bên trong */
    align-items: flex-end; /* Đẩy nội dung xuống dưới */
    text-align: center;
    box-shadow: 5px 5px 0 #feefaa;

}
.info-thumbnail:hover {
    transform: scale(1.05);
}
.info-thumbnail::before {
    /* CẬP NHẬT 1: Thêm lớp phủ màu đen 30% opacity */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Màu đen, 30% opacity */
    border-radius: inherit; /* Kế thừa bo góc từ cha */
    z-index: 1; /* Nằm dưới text, trên ảnh nền */
}

/* Set ảnh nền riêng cho từng thumbnail */
.info-thumbnail[data-title^="Chương trình"] { background-image: url('images/img3.jpg'); }
.info-thumbnail[data-title^="Đêm diễn"] { background-image: url('images/img1.jpg'); }

.thumbnail-content {
    position: relative; /* Đổi thành relative để nằm trên lớp phủ */
    z-index: 2; /* Đảm bảo text luôn nằm trên lớp phủ */
    padding: 20px;
    color: white;
    text-align: center;
}

/* --- Styling cho khung hiển thị lớn --- */
.info-display {
    background-image: url('images/img2.jpg'); /* Ảnh nền mặc định */
    background-size: cover;
    background-position: center;
    display: flex;
    transition: background-image 0.5s ease-in-out;
    position: relative; /* ← Thêm dòng này */
    border-radius: 20px; /* ← Nên thêm nếu chưa có để bo đều */
}


.info-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Đen 50% */
    z-index: 1;
    border-radius: inherit;
}


.display-content {
    /* CẬP NHẬT 2: Căn lề trái cho toàn bộ khối text */
    text-align: left; 
    margin-top: auto; /* Đẩy khối nội dung xuống dưới cùng */
    padding: 40px;
    z-index: 2;
    position: relative;
}

.display-main-text {
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-size: 18px;
    line-height: 1.6;
    margin-top: 15px;
    max-width: 90%;
}

/* --- Styling chung cho Title và Subtitle --- */
.info-title, #display-title {
    font-family: 'Hangout', sans-serif;
    font-size: 5rem;
    color: white;
    line-height: 1.1;
    text-shadow: 
        3px 3px 0 #654435, -3px -3px 0 #654435, 
        3px -3px 0 #654435, -3px 3px 0 #654435,
        3px 0px 0 #654435, -3px 0px 0 #654435,
        0px 3px 0 #654435, 0px -3px 0 #654435;
}

.info-subtitle, #display-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: white;
    margin-top: 10px;
    text-shadow: 
        2px 2px 0 #654435, -2px -2px 0 #654435, 
        2px -2px 0 #654435, -2px 2px 0 #654435;
}
.thumbnail-content .info-title { font-size: 2.5rem; }
.thumbnail-content .info-subtitle { font-size: 1rem; }

/* ======== 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);
}

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

/* --- 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;
    }
}

/* ======== 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%;
    }
}