/* ========== Theme tokens ========== */
:root{
  --bg: #fffdf6;
  --surface: #ffffff;
  --text: #1c1c1c;
  --muted: #6b7280;
  --primary: #d4a017;     /* vàng chùa */
  --primary-600:#b98712;
  --accent:#6b2b06;       /* nâu trầm */
  --ring: rgba(212,160,23,.35);
  --shadow: 0 10px 20px rgba(0,0,0,.06);

  --radius:16px;
  --space:16px;           /* padding hai bên trên mobile */
}

/* ========== Base ========== */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; }
html,body{ height:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,iframe{ max-width:100%; height:auto; display:block; }

/* Container */
.container{ width:min(1100px,92%); margin-inline:auto; padding-inline:var(--space); }

/* Links / small utils */
a{ color:inherit; }
.muted{ color:var(--muted); }

/* ========== Notice bar ========== */
.notice{
  background:linear-gradient(90deg,var(--primary),#f3ce59);
  color:#2a2000; font-weight:600; font-size:.95rem;
}
.notice__inner{ display:flex; gap:16px; align-items:center; padding:8px 0; }
.badge{ background:#2a2000; color:#f9e7a3; border-radius:999px; padding:4px 10px; font-size:.8rem; }
.notice__link{ color:#2a2000; text-decoration:underline; margin-left:auto; }
.marquee{ overflow:hidden; white-space:nowrap; flex:1; }
.marquee p{ display:inline-block; padding-left:100%; animation:slide-left 18s linear infinite; }
@keyframes slide-left { 100%{ transform:translateX(-100%) } }

/* ========== Header & Nav ========== */
.header{ position:sticky; top:0; inset-inline:0; z-index:50; background:var(--surface); transition:box-shadow .2s; }
.header.scrolled{ box-shadow:var(--shadow); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:16px; }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand__logo{ width:44px; height:44px; }
.brand__text strong{ display:block; line-height:1; font-weight:800; }
.brand__text small{ color:var(--muted); }

.nav{ display:flex; gap:18px; flex-wrap:wrap; }
.nav a{ text-decoration:none; color:#333; font-weight:600; }
.nav a:hover{ color:var(--primary-600); }

.menu-btn{ display:none; width:40px; height:40px; background:none; border:0; padding:0; cursor:pointer; }
.menu-btn span{ display:block; height:2px; background:#333; margin:7px 0; border-radius:2px; }

/* Mobile nav */
@media (max-width:960px){
  .nav{
    position:fixed; inset:60px 0 auto 0; background:var(--surface); padding:16px;
    border-bottom:1px solid #eee; transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:transform .2s, opacity .2s; gap:14px; flex-direction:column;
  }
  .nav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .menu-btn{ display:block; }
}

/* ========== Hero ========== */
.hero{
  position:relative; min-height:62vh; display:grid; align-items:center; color:#fff;
  background: radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.55), rgba(0,0,0,.55));
}
@media (max-width:600px){ .hero{ min-height:100svh; } } /* tránh nhảy viewport mobile */

.hero__bg{
  position:absolute; inset:0; z-index:-1;
  background-image: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)), url('assets/hero-fallback.jpg');
  background-size:cover; background-position:center; filter:saturate(1.05) contrast(1.05);
}
.hero__content{ padding:64px 0; }
.hero h1{
  font-family:"Noto Serif", Georgia, "Times New Roman", serif;
  font-size:clamp(2rem,5vw,3rem); margin:0 0 10px;
}
.lead{ max-width:62ch; font-size:1.05rem; opacity:.95; }

.actions{ display:flex; gap:12px; margin-top:18px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:999px; border:2px solid transparent; text-decoration:none;
  font-weight:700; cursor:pointer; transition:all .15s ease-in-out;
}
.btn--primary{ background:var(--primary); color:#2a2000; }
.btn--primary:hover{ background:var(--primary-600); }
.btn--ghost{ background:transparent; color:#fff; border-color:#fff; }
.btn--ghost:hover{ background:rgba(255,255,255,.12); }
.btn--sm{ padding:6px 10px; font-size:.9rem; }

/* ========== Sections ========== */
.section{ padding:56px 0; }
.section--alt{ background:#fffaf2; }
.section__header{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; }
.section h2{ margin:0 0 12px; font-family:"Noto Serif", Georgia, serif; font-size:clamp(22px,5vw,28px); }
.link{ color:var(--accent); font-weight:700; text-decoration:none; }
.link:hover{ text-decoration:underline; }

/* 2-column generic grid */
.grid-2{ display:grid; grid-template-columns:1.2fr 1fr; gap:28px; }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }

/* About panel */
.feature-list{ padding-left:1.1rem; margin:12px 0; }
.feature-list li{ margin:6px 0; }

.about-card{
  background:var(--surface); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
  border:1px solid #f0e6c8;
}

/* Schedule box */
.time-list{ list-style:none; padding:0; margin:0 0 8px; }
.time-list li{ padding:8px 0; display:flex; gap:10px; }
.time-list strong{ width:70px; color:#6b4506; }

/* ========== Cards (news) ========== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .cards{ grid-template-columns:1fr; } }             /* phone 1 cột */
@media (min-width:600px) and (max-width:900px){ .cards{ grid-template-columns:repeat(2,1fr); } } /* tablet 2 cột */

.card{
  background:var(--surface); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); border:1px solid #f1e7cc; display:flex; flex-direction:column;
}
.card__img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.card__body{ padding:14px; display:flex; flex-direction:column; gap:8px; }
.card time{ font-size:12px; opacity:.7; }

/* ========== Video ========== */
.video-wrap{ aspect-ratio:16 / 9; background:#000; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.video{ width:100%; height:100%; border:0; }

/* ========== Events (list) ========== */
.events{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.events li{
  background:var(--surface); border:1px solid #f1e7cc; border-radius:14px; padding:12px 14px;
  display:grid; grid-template-columns:130px 1fr auto; align-items:center; gap:14px;
}
.events time{
  font-weight:800; background:#fff5cf; border:1px dashed #f0dc9a; color:#5a3f05;
  padding:8px 10px; border-radius:10px; justify-self:start;
}
@media (max-width:700px){
  .events li{ grid-template-columns:1fr; }
  .events time{ justify-self:stretch; text-align:center; }
}

/* ========== Gallery ========== */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:480px){ .gallery{ grid-template-columns:repeat(2,1fr); gap:12px; } }
@media (min-width:768px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
.gallery img{ border-radius:12px; border:1px solid #eee5c7; box-shadow:var(--shadow); aspect-ratio:4/3; object-fit:cover; }

/* ========== Donate / Contact / Map ========== */
.donate-list{ margin:8px 0 16px; padding-left:1.1rem; }
.qr img{ width:min(240px,75%); height:auto; margin:0 auto; }

.donate-card{
  background:var(--surface); border:1px solid #f1e7cc; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
  align-self:start;
}

.contact-form{
  background:var(--surface); border:1px solid #f1e7cc; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
  display:grid; gap:10px;
}
.contact-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:600px){ .contact-form .row{ grid-template-columns:1fr; } }
.contact-form input,.contact-form textarea{
  border:1px solid #e8dcb5; border-radius:10px; padding:10px; font:inherit; background:#fffdf9; outline:none; box-shadow:none;
  min-height:44px; font-size:16px;
}
.contact-form input:focus,.contact-form textarea:focus{ border-color:var(--primary-600); box-shadow:0 0 0 4px var(--ring); }
.contact-form button{ width:max-content; }

.map-wrap{ border-radius:12px; overflow:hidden; box-shadow:var(--shadow); border:1px solid #f1e7cc; }
.map{ width:100%; height:320px; border:0; }
@media (max-width:480px){ .map{ height:280px; } }

/* ========== Footer ========== */
.footer{ background:#130f07; color:#eaddb2; }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
.footer a{ color:#f0d37b; text-decoration:none; }
.footer a:hover{ text-decoration:underline; }
.social{ display:flex; gap:12px; }

/* ========== Back to top ===*