/* --- Khối Chung (Global Styles & Variables) --- */
:root {
    /* Đặt màu chính là Xanh lá cây (Success color) */
    --primary-color: #28a745;      
    --secondary-color: #ffc107;    /* Vàng nổi bật (Hover, Gạch chân) */
    --success-color: #28a745;      /* Xanh lá cây (Nút) */
    --danger-color: #dc3545;       /* Đỏ (Giá Tour) */
    --background-main: #f4f4f4;    /* Nền chung của trang (Màu xám nhạt trong ảnh) */
    --background-light: #ffffff;   /* Nền trắng (Header, Card, Form) */
    --text-dark: #333;
    --text-muted: #6c757d;
    --shadow-light: 0 4px 8px rgba(0, 0, 0, 0.1);
    --header-height: 70px;
}

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-main); 
    color: var(--text-dark);
    line-height: 1.6;
    font-size: 16px;
}

/* --- Header & Navigation --- */
.main-header {
    background-color: var(--background-light); 
    color: var(--primary-color); 
    padding: 10px 5%; /* Đã sửa padding dọc để có chiều cao hợp lý */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    
    top: 0;
    width: 100%; 
    z-index: 100; 
    height: var(--header-height); 
    box-sizing: border-box; /* Đảm bảo padding không làm tăng chiều cao quá mức */
}

.video-background-container {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    z-index: 1;
    /* ĐÃ LOẠI BỎ padding-top: var(--header-height); vì nó gây ra khoảng trắng thừa */
}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: -3;
}
.video-overlay {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: -1; 
}

/* Nội dung Hero (Căn giữa) */
.hero-main-content {
    position: absolute;
    /* TỐI ƯU HÓA: Căn giữa xuống thấp hơn một chút để tránh Header cố định */
    top: calc(50% + 20px); 
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: white;
    text-align: center;
    max-width: 90%;
}
.hero-main-content h1 {
    font-size: 3.5em; /* Giảm nhẹ để gọn hơn */
    margin-bottom: 10px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
}

.hero-main-content h2 {
    font-size: 1.8em;
    margin-bottom: 25px;
}

.hero-cta-button {
    /* Giữ nguyên style nút */
    padding: 15px 35px;
    background-color: var(--success-color);
    border-radius: 50px;
}

/* ĐIỀU CHỈNH LỚN: MAIN CONTENT */
main#main-content {
   padding-top: var(--header-height); 
    
    /* Điều chỉnh lại khối main: loại bỏ transform và margin-top không cần thiết */
    padding: 30px 5%;
    max-width: 1200px;
    margin: 0 auto;
}


footer {
    margin-top: 20px; 
}

.logo-container {
    display: flex;
    align-items: center;
}
.main-footer a {
    color: #ccc; /* Màu xám nhạt */
    text-decoration: none;
    transition: color 0.3s;
}
.logo-container .logo {
    height: 40px; 
    width: auto;
    margin-right: 15px; 
}

.logo-container h1 {
    /* Thiết lập cơ bản */
    margin: 0;
    font-size: 2.2em; /* ĐÃ TĂNG KÍCH THƯỚC */
    font-weight: 800; /* ĐÃ TĂNG ĐỘ ĐẬM */
    letter-spacing: 0.8px; /* Tăng khoảng cách chữ */
    color: var(--primary-color); 
    text-shadow: 1px 1px 2px rgba(40, 167, 69, 0.3); /* ĐÃ THÊM SHADOW NHẸ */
    
    /* Thiết lập cho hiệu ứng gõ chữ */
    overflow: hidden; 
    white-space: nowrap; 
    width: 0; 
    border-right: 0.15em solid var(--secondary-color); /* Con trỏ nhấp nháy */
    
    /* Animation: Sửa thời gian để phù hợp với độ dài mới của tiêu đề */
    /* "Viet Nam Easy Go Tour" có 21 ký tự (bao gồm khoảng trắng) */
    animation: 
        typing 3s steps(21) 0.5s forwards, /* Chạy animation gõ chữ */
        blink-caret 0.75s step-end infinite; /* Chạy animation con trỏ nhấp nháy */
}

/* Keyframes cho hiệu ứng gõ chữ */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* Keyframes cho con trỏ nhấp nháy */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--secondary-color); }
}

.main-nav {
    display: flex;
    gap: 25px;
}

.main-nav a {
    /* Chữ Xanh lá cây */
    color: var(--primary-color); 
    padding: 5px 0; /* Đã bỏ padding ngang 10px để nav gọn hơn */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.main-nav a:hover {
    color: var(--secondary-color); /* Hover Vàng */
}

/* --- Khu Vực Chính (Main Content & Tours) --- */
main {
    padding: 30px 5%; /* Tăng padding ngang để dễ nhìn hơn */
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    color: var(--primary-color); /* Tiêu đề Xanh lá cây */
    margin-bottom: 40px;
    font-size: 2.2em;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--secondary-color); /* Gạch dưới Vàng */
    margin: 10px auto 0;
    border-radius: 2px;
}

#tours {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px;
    margin-top: 20px;
}

/* --- Tour Card --- */
.tour-card {
    background-color: var(--background-light); /* Nền trắng */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.tour-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.tour-card img {
    width: 100%;
    height: 220px; 
    object-fit: cover;
}

.tour-card-content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.tour-card h3 {
    color: var(--text-dark); /* Tiêu đề tour màu đen */
    margin: 0 0 5px 0;
    font-size: 1.3em;
}

.tour-card .duration {
    font-size: 0.9em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.tour-card .description {
    font-size: 0.95em;
    color: var(--text-dark);
    flex-grow: 1; 
    margin-bottom: 15px; 
}

.tour-card .price {
    font-weight: bold;
    color: var(--danger-color); /* Giá màu Đỏ */
    font-size: 1.4em;
    margin: 10px 0;
}

.tour-card button {
    background-color: var(--success-color); /* Nút Xanh lá cây */
    color: var(--background-light); /* Chữ trắng */
    border: none;
    padding: 12px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 15px;
    width: 100%;
    transition: background-color 0.3s;
}

.tour-card button:hover {
    background-color: #1e7e34;
}

/* --- Phần Liên hệ (Contact Form) --- */
#contact {
    background-color: var(--background-main); 
    padding: 60px 20px;
    text-align: center;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background-color: var(--background-light); 
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.contact-form label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-dark);
    font-size: 1em;
}

.contact-form input {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-size: 1em;
}

.contact-form input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); /* Box shadow xanh lá */
    outline: none;
}

.submit-button {
    width: 100%;
    background-color: var(--primary-color); /* Nút Xanh lá cây */
    color: white;
    padding: 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 25px;
    font-size: 1.15em;
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, transform 0.1s;
}

.submit-button:hover {
    background-color: #1e7e34;
}
/* Thêm style cho thẻ select */
.contact-form select {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-size: 1em;
    /* Đảm bảo chiều cao nhất quán với input */
    appearance: none; 
    -webkit-appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23333333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position-x: 98%;
    background-position-y: 50%;
}
/* Thêm style cho trường Ghi chú */
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-size: 1em;
    resize: vertical; /* Cho phép thay đổi chiều dọc */
    min-height: 100px; /* Chiều cao tối thiểu */
}

.contact-form textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    outline: none;
}
.date-group {
    display: flex;
    gap: 20px;
}

.date-group > div {
    flex: 1; /* Chia đều không gian cho 2 trường input */
}

/* Đảm bảo chúng hiển thị dạng 1 cột trên điện thoại */
@media (max-width: 768px) {
    .date-group {
        flex-direction: column;
        gap: 0;
    }
}
/* --- Footer --- */
footer {
    background-color: #343a40;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    font-size: 0.9em;
}


/* --- Responsive Media Queries --- */

@media (max-width: 992px) {
    .main-header {
        padding: 10px 20px;
    }
    .main-nav {
        gap: 10px;
    }
}

/* Áp dụng khi màn hình nhỏ hơn hoặc bằng 768px (Mobile & Tablet) */
@media (max-width: 768px) {
    /* Header Responsive */
    .main-header {
       height: auto; /* Bỏ cố định height để cho phép menu xuống dòng */
        flex-direction: column;
        padding: 15px 5%;
        position: relative;
    }

    main#main-content {
        padding-top: 30px; /* Bỏ padding-top: var(--header-height); */
    }
    .logo-container {
        width: 100%;
        justify-content: center; 
        margin-bottom: 15px; 
    }

    .logo-container h1 {
        font-size: 1.3em; 
    }

    .main-nav {
        flex-direction: column; 
        text-align: center;
        gap: 0;
    }

    .main-nav a {
        color: var(--primary-color); /* Chữ Xanh lá */
        padding: 10px 0;
        border-bottom: 1px solid rgba(40, 167, 69, 0.2); /* Gạch mờ màu xanh lá */
    }

    .main-nav a:last-child {
        border-bottom: none; 
    }
    
    /* Tour Card Responsive */
    #tours {
        grid-template-columns: 1fr; 
        gap: 20px; 
    }
    
    /* Contact Form Responsive */
    #contact {
        padding: 40px 10px;
    }

    .contact-form {
        padding: 20px;
    }
}