body{margin:0;font-family:Arial, sans-serif;color:#333;background:#f8f8f8}

/* ===== HERO BANNER MỚI ===== */
.hero{
  background:url("banner.jpg") center center/cover no-repeat;
  height:520px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.overlay{
  background:rgba(0,0,0,0.55);
  color:#fff;
  padding:40px 25px;
  text-align:center;
  border-radius:10px;
  max-width:90%;
}

.overlay h1{font-size:36px;margin-bottom:10px}
.overlay p{font-size:18px;margin-bottom:18px}

.cta{
  background:#e60000;
  color:#fff;
  padding:14px 26px;
  border-radius:6px;
  text-decoration:none;
  font-size:18px;
  font-weight:bold;
  display:inline-block;
}

.main-nav{background:#fff;text-align:center;padding:12px 0;box-shadow:0 2px 4px rgba(0,0,0,0.1)}
.main-nav a{margin:0 15px;color:#333;text-decoration:none;font-weight:500}

.container{max-width:1024px;margin:auto;padding:25px}

.grid-cards{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

.card{
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  flex:1;
  min-width:260px;
  max-width:320px;
  box-shadow:0 2px 4px rgba(0,0,0,0.1)
}

.card img{width:100%;height:180px;object-fit:cover}
.card h3{margin:12px 0 6px;padding:0 12px;font-size:20px}
.card p{padding:0 12px 12px}

table{width:100%;border-collapse:collapse;margin-top:12px}
table,td,th{border:1px solid #ccc;padding:10px;text-align:center}

footer{background:#222;color:#fff;text-align:center;padding:15px;margin-top:30px;font-size:14px}