/* ==============================
   CSS DÙNG CHUNG CHO TOÀN BỘ WEBSITE TẾT
   ============================== */

/* ===== 1. BIẾN MÀU & THIẾT LẬP CHUNG ===== */
:root{
  --red:#b11226;          /* Màu đỏ Tết chủ đạo */
  --gold:#d4af37;         /* Màu vàng nhấn */
  --cream:#fff8ee;        /* Nền sáng */
  --dark:#2b2b2b;         /* Màu chữ chính */
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'Be Vietnam Pro',sans-serif;
  background:var(--cream);
  color:var(--dark);
  line-height:1.7;


/* ===== 2. HEADER & TIÊU ĐỀ TRANG ===== */
header{
  color:#fff;
  text-align:center;
  padding:90px 20px 60px;
}
.link:hover{color:#ff8c00;}
.link:visited{color:#e9967a; }
header h1{
  font-family:'Playfair Display',serif;
  font-size:2.6rem;
  margin:0;
  letter-spacing:2px;
}

/* Header riêng cho từng trang */
.header-index{ background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url('image/tetnd.jpg') center/cover no-repeat; }
.header-hiendai{ background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url('image/chuctet.jpg') center/cover no-repeat; }
.header-phongtuc{ background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url('image/cachep.jpg') center/cover no-repeat; }
.header-form{ background:linear-gradient(rgba(255,248,238,.95),rgba(255,248,238,.95)),url('image/chuctet.jpg') center/cover fixed no-repeat; color:var(--dark); }

/* ===== 3. SLOGAN (3 KHỐI GIỚI THIỆU) ===== */
.slogan{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  max-width:1000px;
  margin:50px auto 0;
}

/* block: mỗi ô trong slogan (phần nhấn vào và có hiệu ứng) */
.block{
  background:rgba(255,255,255,.92);
  color:var(--dark);
  border-radius:16px;
  padding:25px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  transition:transform .3s ease;
}

.block:hover{ /* hiệu ứng hover */
  transform:translateY(-6px);
  color:#ff8c00;
}
.block h2{
  color:var(--red);
  margin-top:0;
}

/* ===== 4. KHU VỰC NỘI DUNG CHÍNH ===== */
main{
  max-width:1000px;
  margin:70px auto;
  padding:0 20px;
}

h2, h3{
  font-family:'Playfair Display',serif;
  color:var(--red);
  margin-top:60px;
}

/* ===== 5. SECTION 2 CỘT (trang hiendai) ===== */
.section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  margin-top:40px;
}
.section img{
  width:100%;
  border-radius:18px;
  box-shadow:0 15px 35px rgba(0,0,0,.2);
}

@media(max-width:768px){
  .section{ grid-template-columns:1fr; }
}

/* ===== 6. BẢNG (trang phong tục) ===== */
table{
  width:100%;
  border-spacing:30px;
  margin-top:40px;
}

td{
  background:#fff;
  padding:25px;
  border-radius:18px;
  vertical-align:top;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
}

/* Ảnh trong bảng */
.table-img{ overflow:hidden; }

.table-img img{
  width:100%;
  border-radius:14px;
  transition:transform .4s ease;
}

.table-img img:hover{
  transform:scale(1.08); /* phóng to khi đưa chuột vào */
}

/* ===== 7. FORM (trang đăng ký) ===== */
.container{
  max-width:900px;
  margin:80px auto;
  padding:0 20px;
}

.form-card{
  background:#fff;
  border-radius:22px;
  padding:40px;
  box-shadow:0 20px 40px rgba(0,0,0,.18);
}

input, textarea{
  width:100%;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #ccc;
  font-family:inherit;
}

button{
  background:var(--red);
  color:#fff;
  border:none;
  padding:12px 28px;
  border-radius:30px;
  cursor:pointer;
  transition:.3s;
}

button:hover{ background:#8f0f1f; }

/* ===== 8. FOOTER ===== */
footer{
  background:var(--dark);
  color:#eee;
  padding:50px 20px;
  margin-top:80px;
}

footer .row{
  max-width:1000px;
  margin:auto;
  display:flex;
  flex-wrap:wrap;
  gap:30px;
}

footer a{
  color:var(--gold);
  text-decoration:none;
}