/* --- FILE: css/trangchu.css --- */
/* (CSS riêng cho Trang chủ) */

/* === Banner (Ảnh lớn đầu trang) === */
/* Banner Slideshow */
.banner {
  position: relative;
  width: 100%;
  height: 450px;
  overflow: hidden;
}

.slideshow-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.slide {
  display: none;
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(70%);
}

.fade {
  animation: fadeEffect 1.5s;
}

@keyframes fadeEffect {
  from {opacity: 0.4;}
  to {opacity: 1;}
}

/* Chữ trên banner */
.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}

.banner-text h2 {
  font-size: 36px;
  margin-bottom: 10px;
}

.banner-text p {
  font-size: 20px;
  opacity: 0.9;
}


.banner h2 {
  font-size: 40px;
  margin-bottom: 10px;
}

.banner p {
  font-size: 20px;
  margin: 0;
}

/* === Phần Giới thiệu (Về Cơm Quê 6 Xị) === */
.about {
  text-align: center;
  padding: 50px 80px;
  background-color: #fff5e1; /* Màu kem nhạt */
}

.about h3 {
  font-size: 28px;
  color: #7a4b21; /* Màu nâu chủ đạo */
  margin-top: 0;
}

.about p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  max-width: 800px; /* Giới hạn chiều rộng cho dễ đọc */
  margin: 15px auto 0 auto; /* Căn giữa */
}

/* === Phần Menu (Món ngon nổi bật) === */
.menu {
  padding: 50px 80px;
  text-align: center;
  
  /* LƯU Ý: Phần này đang dùng nền trong suốt (lấy nền body).
    Nếu thấy khó đọc, bạn có thể thêm nền trắng:
    background-color: #ffffff;
  */
}

.menu h3 {
  font-size: 28px;
  color: #7a4b21;
  margin-top: 0;
  margin-bottom: 30px;
}

/* Khung chứa các món ăn */
.menu-items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Tự động xuống hàng */
  gap: 30px; /* Khoảng cách giữa các món */
}

/* Từng món ăn (card) */
.dish {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 250px;
  padding: 15px;
  text-align: left; /* Chữ trong card căn trái */
}

.dish img {
  width: 100%;
  border-radius: 10px;
  aspect-ratio: 1 / 1; /* Giữ ảnh vuông */
  object-fit: cover; /* Đảm bảo ảnh lấp đầy khung */
}
/* === Hiệu ứng khi rê chuột vào món ăn === */
.dish {
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dish:hover {
  transform: scale(1.05); /* Phóng to nhẹ khi chạm */
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Ẩn đánh giá khi chưa hover */
.dish .rating {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Khi hover thì hiện đánh giá lên */
.dish:hover .rating {
  opacity: 1;
}

.dish h4 {
  color: #7a4b21;
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 18px;
}

.dish p {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin: 0;
}
/* Đây là file: css/style.css */

header {
  background-color: #7a4b21;  /* Tạo nền màu nâu */
  color: white;             /* Chữ màu trắng */
  display: flex;            /* Dùng Flexbox để căn chỉnh */
  align-items: center;      /* Căn các mục theo chiều dọc */
  justify-content: space-between; /* Đẩy h1 và nav về 2 phía */
  padding: 15px 50px;       /* Tạo khoảng cách bên trong */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Đổ bóng nhẹ */
}

header h1 {
  font-family: "Times New Roman", serif;
  font-size: 26px;
  letter-spacing: 1px;
  margin: 0; /* Xoá margin mặc định */
}

nav a {
  color: white;
  margin: 0 15px; /* Khoảng cách giữa các link */
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
}
/* ========== CSS CHO FOOTER ========== */

.site-footer {
  /* Bạn có thể đổi 'background-color' 
    thành màu nền bạn muốn, ví dụ: #7a4b21 
    và đổi 'color' thành #fff (màu trắng) 
  */
  background-color: #ffffff; /* Nền trắng như ảnh */
  color: #333; /* Màu chữ đen */
  padding: 40px 50px; /* Khoảng đệm trên/dưới và trái/phải */
  font-family: 'Times New Roman', Times, serif; /* Font chữ giống ảnh */
  border-top: 1px solid #e0e0e0; /* Đường kẻ mỏng bên trên */
}

.footer-container {
  display: flex; /* Dùng Flexbox để chia cột */
  justify-content: space-between; /* Dàn các cột đều ra */
  flex-wrap: wrap; /* Cho phép các cột xuống hàng trên màn hình nhỏ */
  gap: 30px; /* Khoảng cách giữa các cột */
}

.footer-column {
  flex: 1; /* Giúp các cột chia sẻ không gian */
  min-width: 200px; /* Độ rộng tối thiểu trước khi xuống hàng */
}

.footer-column h2 {
  font-size: 16px; /* Cỡ chữ cho tiêu đề */
  color: #000;
  margin-top: 0;
  margin-bottom: 15px;
  font-weight: bold;
  text-transform: uppercase; /* Viết hoa tiêu đề */
}

.footer-column p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 10px 0;
}

.footer-column ul {
  list-style-type: none; /* Bỏ dấu chấm đầu dòng */
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: 8px; /* Khoảng cách giữa các link */
}

.footer-column ul li a {
  font-size: 14px;
  color: #0000ee; /* Màu xanh của link */
  text-decoration: underline; /* Gạch chân link */
}

.footer-column ul li a:hover {
  color: #551a8b; /* Màu khi di chuột qua */
}

.footer-copyright {
  text-align: left; /* Căn lề trái */
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0; /* Đường kẻ trên dòng copyright */
  font-size: 13px;
  color: #555;
}
/* ================================== */
/* ĐỊNH DẠNG FOOTER (ĐÃ SỬA) */
/* ================================== */

footer {
  background-color: #7a4b21; /* Màu nền nâu sậm */
  
  /* SỬA 1: Đổi màu chữ mặc định thành màu trắng ngà.
    (Áp dụng cho "VỀ CHÚNG TÔI", "LIÊN HỆ", "© 2025...")
  */
  color: #f2e0c9; /* Bạn có thể đổi thành #FFFFFF nếu muốn trắng tinh */
  
  padding: 40px 50px;
  font-family: 'Times New Roman', Times, serif; /* Giữ font chữ như ảnh */
}

/* Giữ tiêu đề cột màu trắng tinh */
.footer-column h4 {
  color: #FFFFFF;
}

/* SỬA 2: Xóa các dấu chấm trắng
*/
.footer-column ul {
  list-style-type: none; /* <-- Dòng này sẽ xóa các dấu chấm */
  padding: 0;
  margin: 0;
}

/* SỬA 3: Đổi màu các link (Trang chủ, Giới thiệu...)
*/
.footer-column ul li a {
  color: #f2e0c9; /* <-- Đổi màu link giống màu chữ mặc định */
  text-decoration: none;
}

.footer-column ul li a:hover {
  text-decoration: underline;
}

/* Định dạng cho dòng Copyright */
.footer-copyright {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #9c6c40; /* Đường kẻ phân cách */
  font-size: 14px;
}