/* style.css - giao diện "pro" cho toàn site */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }

body {
  font-family: 'Montserrat', sans-serif;
  background: #f7fbff;
  color: #222;
  line-height: 1.7;
  -webkit-font-smoothing:antialiased;
}

/* NAV */
nav {
  position: sticky; top: 0;
  background: linear-gradient(90deg,#0d47a1,#1976d2);
  padding: 14px 20px;
  box-shadow: 0 6px 18px rgba(13,71,161,0.12);
  z-index: 999;
  display:flex;
  justify-content:center;
}
nav .nav-inner { max-width:1200px; width:100%; display:flex; gap:20px; justify-content:center; align-items:center; }
nav a{
  color:#fff; text-decoration:none; font-weight:600; padding:8px 12px; border-radius:8px;
  transition: all .25s ease;
}
nav a:hover{ background: rgba(255,255,255,0.08); transform: translateY(-2px); }

/* Container */
.container { max-width:1200px; margin:40px auto; padding:0 20px; }

/* HERO / header */
.hero {
  background: linear-gradient(180deg, rgba(9,30,66,0.15), rgba(9,30,66,0.05)),
              url('https://images.unsplash.com/photo-1503264116251-35a269479413?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=60') center/cover no-repeat;
  border-radius: 14px;
  color: #fff;
  padding: 70px 30px;
  box-shadow: 0 10px 30px rgba(13,71,161,0.08);
}
.hero h1 { font-size: 36px; letter-spacing: -0.5px; margin-bottom:12px; font-weight:700; text-shadow: 0 6px 20px rgba(0,0,0,0.35); }
.hero p { font-size:18px; opacity:0.95; max-width:900px; }

/* Section styles */
.section {
  margin: 40px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}
.section.alt { grid-template-columns: 1fr 1fr; }
.section .text { padding: 8px 6px; }
.section h2 { color: #0d47a1; font-size: 26px; margin-bottom:14px; }
.section p { color: #333; font-size: 16px; margin-bottom:12px; }

/* Full-width article style for long entries */
.article {
  background: #fff; border-radius: 14px; padding: 26px;
  box-shadow: 0 8px 24px rgba(13,71,161,0.06);
}
.article h3 { color:#0b57a3; margin-bottom:10px; font-size:22px; }
.article p { margin-bottom:12px; color:#444; }

/* Image style */
.img-card { border-radius: 12px; overflow: hidden; display:block; }
.img-card img { width:100%; height:auto; display:block; }

/* large image for full-width pieces */
.full-img { width:100%; border-radius:12px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); margin:18px 0; }

/* list of items */
.item {
  display:flex; gap:18px; align-items:flex-start; margin-bottom:20px;
}
.item img { width:240px; height:160px; object-fit:cover; border-radius:10px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.item .desc { flex:1; }

/* maps iframe responsive */
.map-wrap { border-radius:12px; overflow:hidden; margin-top:14px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.map-wrap iframe { width:100%; height:420px; border:0; display:block; }

/* responsive */
@media (max-width:980px){
  .section, .section.alt { grid-template-columns: 1fr; }
  .item img { width:140px; height:100px; }
  .hero { padding:40px 20px; }
  nav .nav-inner{ flex-wrap:wrap; gap:8px; }
}

/* Footer */
.footer {
  margin-top:40px; padding:28px 20px; background: linear-gradient(90deg,#0d47a1,#1976d2); color:#fff; border-radius:12px;
  text-align:center;
}
.footer p{ margin:0; opacity:0.95; }