*{
    padding: 0;
    margin: 0;
    font-family: "Roboto",sans;
}
.container{
    width: 1280px;
    margin: 0 auto;
}
header{
    width: 1280px;
    height: 100px;
    background: #CC0000;
    
}
header {
    width: 1280px;
    height: 100px;
    background: #CC0000;
    display: flex;               
    align-items: center;         
}
.nd {
    margin-left: auto; 
    margin-right: 250px;
}
.nd h1 {
    color: #DCAE31; 
    font-size: 40px; 
    margin: 0 ;
    
}
header img{
    padding-left:30px;
}
 
nav{
    height: 35px;
    background: #DBA931;
}
nav .menu ul{
    list-style: none;
    margin: 0;                
    padding: 0;            
    display: flex;          
    justify-content: center;
}
nav .menu ul li{
    float: left;
    line-height: 35px;
    padding: 0 15px;
    
}
nav .menu ul li {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}
nav .menu ul li a {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}
/* --- PHẦN GIỚI THIỆU KHÁI QUÁT --- */
/* Khung bọc toàn bộ phần giới thiệu */
.gioi-thieu-khai-quat {
    max-width: 1200px;        /* Giới hạn độ rộng tối đa để web không bị loãng */
    margin: 50px auto;        /* Căn giữa toàn bộ khối này trên trang web */
    padding: 0 20px;          /* Khoảng cách an toàn 2 bên mép màn hình */
    font-family: Arial, sans-serif;
}

/* Dòng 1: Tiêu đề ở giữa */
.tieu-de-giua {
    text-align: center;       /* Căn giữa chữ */
    font-size: 36px;          /* Kích thước chữ to */
    color: #CC0000;           /* Màu đỏ chuẩn của Tết */
    margin-bottom: 40px;      /* Khoảng cách từ tiêu đề đẩy xuống phần dưới */
    text-transform: uppercase;/* Tự động in hoa toàn bộ chữ */
    font-weight: bold;
}

/* Dòng 2: Khung chia 2 cột */
.noi-dung-2-cot {
    display: flex;            /* Kích hoạt Flexbox để xếp ngang */
    align-items: center;      /* Căn giữa hình và chữ theo chiều dọc */
    gap: 40px;                /* Tạo khoảng trống 40px giữa cột hình và cột chữ */
}

/* Cột trái: Định dạng cho hình ảnh */
.cot-trai-hinh {
    flex: 1;                  /* Chiếm 50% chiều rộng */
}

.cot-trai-hinh img {
    width: 100%;              /* Ảnh co giãn vừa khít 100% cột chứa nó */
    height: auto;             /* Giữ nguyên tỉ lệ ảnh, không bị méo */
    border-radius: 12px;      /* Bo tròn 4 góc của bức ảnh cho mềm mại */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Đổ bóng nhẹ cho ảnh nổi bật lên */
    display: block;
}

/* Cột phải: Định dạng cho chữ */
.cot-phai-chu {
    flex: 1;                  /* Chiếm 50% chiều rộng còn lại */
}

.cot-phai-chu p {
    font-size: 17px;          /* Kích thước chữ dễ đọc */
    line-height: 1.8;         /* Khoảng cách giữa các dòng chữ thưa ra */
    color: #333333;           /* Màu xám đen, đỡ chói mắt hơn màu đen tuyền */
    margin-bottom: 15px;      /* Khoảng cách giữa các đoạn văn */
    text-align: justify;      /* Căn đều lề chữ 2 bên (giống format trong sách/báo) */
}
/* --- PHẦN DANH SÁCH 3 THẺ --- */
.chuyen-muc-tet {
    max-width: 1200px;
    margin: 60px auto;        /* Căn giữa toàn bộ phần thẻ */
    padding: 0 20px;
    font-family: Arial, sans-serif;
}

/* Khung chứa 3 thẻ nằm ngang */
.danh-sach-the {
    display: flex;            /* Dàn hàng ngang */
    justify-content: space-between; 
    gap: 30px;                /* Khoảng cách giữa các thẻ là 30px */
}

/* Định dạng cơ bản cho mỗi tấm thẻ */
.the-item {
    flex: 1;                  /* Chia đều kích thước cho 3 thẻ (mỗi cái ~33%) */
    background-color: #ffffff;
    border-radius: 15px;      /* Bo tròn góc thẻ */
    overflow: hidden;         /* Giấu đi phần viền ảnh bị dư ra ngoài góc bo */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ mặc định */
    
    /* LỆNH QUAN TRỌNG NHẤT: Tạo độ mượt 0.3 giây cho mọi hiệu ứng */
    transition: all 0.3s ease; 
    
    cursor: pointer;          /* Đổi con trỏ chuột thành hình bàn tay khi chỉ vào */
    text-align: center;       /* Căn giữa chữ */
}

/* HIỆU ỨNG KHI RÊ CHUỘT VÀO THẺ (HOVER) */
.the-item:hover {
    transform: translateY(-15px); /* Kéo tấm thẻ bay lùi lên trên 15px */
    box-shadow: 0 15px 30px rgba(204, 0, 0, 0.2); /* Đổ bóng to hơn, có ánh đỏ nhẹ cho hợp không khí Tết */
}

/* Định dạng cho hình ảnh trong thẻ */
.the-item img {
    width: 100%;
    height: 250px;            /* Ép chiều cao ảnh bằng nhau để các thẻ không bị lệch */
    object-fit: cover;        /* Cắt cúp ảnh tự động để không bị méo tỉ lệ */
    display: block;
}

/* Định dạng cho tên chuyên mục dưới ảnh */
.the-item h3 {
    padding: 20px 10px;
    margin: 0;
    font-size: 24px;
    color: #CC0000;           /* Chữ màu đỏ */
    text-transform: uppercase;
    font-weight: bold;
}
/* --- BỐ CỤC TRANG ẨM THỰC --- */
.trang-am-thuc {
    max-width: 1000px;        /* Độ rộng vừa phải để nội dung tập trung */
    margin: 50px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
}

.tieu-de-am-thuc {
    text-align: center;
    font-size: 36px;
    color: #CC0000;
    margin-bottom: 40px;
    text-transform: uppercase;
}

/* --- ĐỊNH DẠNG TỪNG TẤM THẺ --- */
.the-mon-an {
    display: flex;            /* Dùng Flexbox để chia 2 cột trái - phải */
    align-items: center;      /* Căn giữa hình và chữ theo chiều dọc */
    background-color: #ffffff;
    border-radius: 15px;
    margin-bottom: 40px;      /* Khoảng cách giữa các thẻ khi cuộn xuống */
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Đổ bóng nhẹ ban đầu */
    
    /* Hiệu ứng chuyển động mượt 0.3s */
    transition: all 0.3s ease; 
}

/* Hiệu ứng khi rê chuột vào tấm thẻ */
.the-mon-an:hover {
    transform: translateY(-10px); /* Nổi lên 10px */
    box-shadow: 0 15px 25px rgba(204, 0, 0, 0.15); /* Đổ bóng to hơn, có sắc đỏ nhẹ */
}

/* --- CỘT BÊN TRÁI: HÌNH ẢNH --- */
.cot-hinh {
    flex: 0 0 40%;            /* Hình ảnh chiếm cố định 40% chiều rộng thẻ */
}

.cot-hinh img {
    width: 100%;
    height: 250px;            /* Cố định chiều cao để các thẻ đều nhau */
    object-fit: cover;        /* Cắt ảnh vừa vặn khung, không bị méo */
    display: block;
}

/* --- CỘT BÊN PHẢI: CHỮ --- */
.cot-chu {
    flex: 1;                  /* Chữ chiếm 60% phần còn lại */
    padding: 30px 40px;       /* Khoảng cách từ viền vào chữ cho thoáng */
}

.cot-chu h3 {
    font-size: 26px;
    color: #CC0000;           /* Màu đỏ chuẩn của Tết */
    margin-top: 0;
    margin-bottom: 15px;
}

.cot-chu p {
    font-size: 16px;
    color: #444444;
    line-height: 1.7;         /* Dãn dòng cho dễ đọc */
    text-align: justify;      /* Căn đều hai bên */
    margin: 0;
}
/* --- NÚT TRỞ VỀ TRANG CHỦ --- */
.khung-tro-ve {
    text-align: center;       /* Căn giữa nút bấm */
    margin: 40px 0 80px 0;    /* Tạo khoảng cách phía trên và dưới nút cho thoáng */
}

.nut-tro-ve {
    display: inline-block;
    background-color: #CC0000;    /* Nền màu đỏ */
    color: #ffffff;               /* Chữ màu trắng */
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;        /* Xóa gạch chân của link */
    padding: 12px 35px;           /* Độ rộng của nút */
    border-radius: 30px;          /* Bo tròn hai đầu thành hình viên thuốc */
    border: 2px solid #CC0000;    /* Viền màu đỏ */
    
    /* Hiệu ứng chuyển màu mượt 0.3 giây */
    transition: all 0.3s ease;    
}

/* Hiệu ứng khi rê chuột vào nút */
.nut-tro-ve:hover {
    background-color: #ffffff;    /* Nền đổi thành trắng */
    color: #CC0000;               /* Chữ đổi thành đỏ */
    box-shadow: 0 6px 15px rgba(204, 0, 0, 0.2); /* Đổ bóng màu đỏ nhạt */
    transform: translateY(-3px);  /* Nút hơi nảy lên một chút */
}
/* --- BỐ CỤC TRANG VĂN HÓA --- */
.trang-van-hoa {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
}

.tieu-de-van-hoa {
    text-align: center;
    font-size: 36px;
    color: #CC0000;
    margin-bottom: 40px;
    text-transform: uppercase;
}

/* Khung chứa 3 thẻ */
.danh-sach-van-hoa {
    display: flex;
    justify-content: space-between;
    gap: 30px; /* Khoảng cách giữa các thẻ */
}

/* --- ĐỊNH DẠNG TỪNG THẺ VĂN HÓA --- */
.the-van-hoa {
    flex: 1;
    background-color: #ffffff;
    border-radius: 15px;
    overflow: hidden; /* Cắt bỏ những phần lọt ra ngoài bo góc */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column; /* Xếp dọc: Tiêu đề -> Hình -> Chữ */
}

/* Hiệu ứng nảy thẻ lên một chút khi hover */
.the-van-hoa:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(204, 0, 0, 0.15);
}

/* Dòng 1: Tiêu đề */
.the-van-hoa h3 {
    text-align: center;
    font-size: 22px;
    color: #CC0000;
    margin: 0;
    padding: 20px 10px;
    background-color: #fdf6e3; /* Màu nền vàng kem nhẹ cho phần tiêu đề */
    text-transform: uppercase;
}

/* Dòng 2: Khung hình ảnh */
.khung-hinh {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.khung-hinh img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease; /* Phục vụ cho hiệu ứng zoom ảnh */
}

/* Zoom nhẹ bức ảnh khi rê chuột vào thẻ cho thêm phần sinh động */
.the-van-hoa:hover .khung-hinh img {
    transform: scale(1.08); 
}

/* --- DÒNG 3: NỘI DUNG ẨN / HIỆN --- */
.noidung-van-hoa {
    background-color: #ffffff;
    
    /* 3 lệnh này giúp ẨN nội dung ban đầu */
    max-height: 0;           /* Ép chiều cao về 0 */
    opacity: 0;              /* Làm mờ tịt (trong suốt) */
    padding: 0 20px;         /* Bỏ khoảng cách đệm */
    
    /* Hiệu ứng trượt mượt mà 0.5 giây */
    transition: all 0.5s ease;
}

.noidung-van-hoa p {
    font-size: 15px;
    color: #444444;
    line-height: 1.6;
    text-align: justify;
    margin: 0;               /* Xóa margin mặc định của thẻ p */
}

/* KHI RÊ CHUỘT VÀO THẺ -> HIỆN NỘI DUNG LÊN */
.the-van-hoa:hover .noidung-van-hoa {
    max-height: 300px;       /* Mở rộng chiều cao đủ để chứa chữ */
    opacity: 1;              /* Hiển thị rõ ràng */
    padding: 20px;           /* Tạo lại khoảng cách cho chữ dễ đọc */
}
/* --- BỐ CỤC TRANG PHONG TỤC --- */
.trang-phong-tuc {
    max-width: 1000px;         /* Giới hạn chiều rộng để dòng chữ không bị dài lê thê */
    margin: 50px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
}

.tieu-de-chinh {
    text-align: center;
    font-size: 38px;
    color: #CC0000;
    margin-bottom: 50px;
    text-transform: uppercase;
}

/* --- ĐỊNH DẠNG TỪNG NHÓM (TRƯỚC TẾT & TRONG TẾT) --- */
.nhom-phong-tuc {
    margin-bottom: 60px;
}

.tieu-de-nhom {
    font-size: 26px;
    color: #DCAE31;            /* Màu vàng gold cho tiêu đề phụ */
    border-bottom: 3px solid #CC0000; /* Kẻ gạch chân màu đỏ */
    padding-bottom: 10px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

/* --- ĐỊNH DẠNG TỪNG DÒNG PHONG TỤC --- */
.dong-phong-tuc {
    display: flex;             /* Chia ngang hình bên trái, chữ bên phải */
    align-items: center;       /* Căn giữa theo chiều dọc */
    padding: 25px 0;           /* Khoảng trống trên dưới của mỗi dòng */
    border-bottom: 1px dashed #cccccc; /* Đường kẻ đứt mờ phân cách giữa các phong tục */
}

/* Bỏ đường kẻ đứt ở dòng cuối cùng của mỗi nhóm */
.dong-phong-tuc:last-child {
    border-bottom: none;
}

/* --- CỘT TRÁI: HÌNH ẢNH --- */
.cot-hinh-pt {
    flex: 0 0 35%;             /* Cột hình chiếm 35% chiều rộng */
    overflow: hidden;          /* Ẩn phần ảnh thừa khi zoom */
    border-radius: 10px;       /* Bo tròn góc ảnh */
}

.cot-hinh-pt img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease; /* Hiệu ứng mượt khi hover */
}

/* Hover nhẹ vào dòng thì ảnh hơi phóng to lên một chút */
.dong-phong-tuc:hover .cot-hinh-pt img {
    transform: scale(1.05);
}

/* --- CỘT PHẢI: CHỮ --- */
.cot-chu-pt {
    flex: 1;                   /* Phần chữ chiếm 65% còn lại */
    padding-left: 40px;        /* Cách tấm ảnh ra 40px */
}

.cot-chu-pt h4 {
    font-size: 22px;
    color: #CC0000;
    margin-top: 0;
    margin-bottom: 12px;
}

.cot-chu-pt p {
    font-size: 16px;
    line-height: 1.7;
    color: #333333;
    text-align: justify;
    margin: 0;
}

/* Làm nổi bật các từ khóa trong thẻ in đậm */
.cot-chu-pt p strong {
    color: #CC0000; 
}
/* --- BỐ CỤC TRANG HÌNH ẢNH --- */
.trang-hinh-anh {
    max-width: 1200px;         /* Giới hạn độ rộng để lưới ảnh không bị dàn quá mỏng */
    margin: 50px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
}

.tieu-de-hinh-anh {
    text-align: center;
    font-size: 38px;
    color: #CC0000;
    margin-bottom: 50px;
    text-transform: uppercase;
}

/* --- LƯỚI 8 Ô THẺ --- */
.khung-bo-suu-tap {
    display: grid;             /* Sử dụng CSS Grid để tạo lưới */
    grid-template-columns: repeat(4, 1fr); /* Tạo 4 cột kích thước bằng nhau */
    gap: 30px;                 /* Khoảng trống giữa các ô ảnh */
}

/* Định dạng từng thẻ ảnh (Kiểu viền trắng Polaroid) */
.the-hinh-anh {
    background-color: #ffffff;
    padding: 15px;             /* Tạo viền trắng dày xung quanh bức ảnh */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hiệu ứng mượt */
    cursor: pointer;
}

/* Hiệu ứng khi rê chuột: Tấm ảnh nổi lên và hơi nghiêng 2 độ */
.the-hinh-anh:hover {
    transform: translateY(-10px) rotate(2deg); 
    box-shadow: 0 15px 25px rgba(204, 0, 0, 0.2);
}

/* --- VÙNG TRỐNG ĐỂ CHÈN ẢNH (PLACEHOLDER) --- */
.cho-trong-anh {
    width: 100%;
    aspect-ratio: 1 / 1;       /* Cố định khung ảnh luôn là hình vuông hoàn hảo */
    background-color: #f9f9f9; /* Màu nền xám nhạt */
    border: 2px dashed #cccccc;/* Viền đứt nét để dễ nhận biết chỗ chèn ảnh */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999999;
    font-size: 14px;
    overflow: hidden;          /* Ẩn phần ảnh thừa (nếu có) khi bạn chèn ảnh thật */
}

/* Mẹo: Khi bạn chèn thẻ <img> thật vào trong HTML, lệnh này giúp ảnh tự lấp đầy ô vuông */
.cho-trong-anh img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* Cắt ảnh vừa vặn khung vuông, không bị méo tỉ lệ */
    border: none;              /* Xóa viền đứt nét khi đã có ảnh */
}
/* --- BỐ CỤC TRANG LIÊN HỆ --- */
.trang-lien-he {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
}

.tieu-de-lien-he {
    text-align: center;
    font-size: 38px;
    color: #CC0000;
    margin-bottom: 50px;
    text-transform: uppercase;
}

/* --- KHUNG CHIA 2 CỘT TỶ LỆ 1:1 --- */
.khung-chia-cot {
    display: flex;
    gap: 50px;                 /* Khoảng trống giữa Form và Bản đồ */
    background-color: #ffffff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Đổ bóng nguyên cái bảng liên hệ */
}

.cot-form, .cot-ban-do {
    flex: 1;                   /* Chia đều mỗi bên chiếm 50% */
}

/* Tiêu đề nhỏ của từng cột */
.cot-form h3, .cot-ban-do h3 {
    font-size: 24px;
    color: #333333;
    margin-top: 0;
    margin-bottom: 10px;
}

.cot-form p {
    font-size: 15px;
    color: #666666;
    margin-bottom: 25px;
}

/* --- TRANG TRÍ FORM NHẬP LIỆU --- */
.nhom-nhap-lieu {
    margin-bottom: 20px;
}

/* Chữ nhãn (Label) phía trên ô nhập */
.nhom-nhap-lieu label {
    display: block;
    font-size: 15px;
    font-weight: bold;
    color: #444444;
    margin-bottom: 8px;
}

/* Các ô nhập chữ và vùng nhập văn bản */
.nhom-nhap-lieu input, 
.nhom-nhap-lieu textarea {
    width: 100%;               /* Kéo dài đầy khung */
    padding: 12px 15px;
    font-size: 15px;
    border: 1px solid #cccccc;
    border-radius: 8px;        /* Bo góc các ô nhập */
    background-color: #fcfcfc;
    font-family: inherit;      /* Kế thừa font chữ của trang web */
    transition: border-color 0.3s ease;
}

/* Hiệu ứng khi nhấp chuột vào ô nhập (viền đổi màu đỏ) */
.nhom-nhap-lieu input:focus, 
.nhom-nhap-lieu textarea:focus {
    outline: none;
    border-color: #CC0000;
    box-shadow: 0 0 5px rgba(204, 0, 0, 0.2);
}

/* Nút bấm Gửi Thông Tin */
.nut-gui {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background-color: #DCAE31; /* Màu vàng Gold đặc trưng của Tết */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Khi rê chuột vào nút Gửi */
.nut-gui:hover {
    background-color: #b89127; /* Chuyển sang vàng sậm hơn */
}

/* --- TRANG TRÍ BẢN ĐỒ GOOGLE MAP --- */
.khung-map {
    width: 100%;
    height: 100%;
    min-height: 400px;         /* Đảm bảo bản đồ không bị lùn */
    border-radius: 12px;       /* Bo góc cái khung bản đồ */
    overflow: hidden;
    border: 2px solid #eeeeee;
}