/* Base & accessibility */
:root{--fg:#0f172a;--muted:#475569;--bg:#f8fafc;--card:#ffffff;--border:#e2e8f0;--accent:#0ea5e9}
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
@media (max-width:360px){html{font-size:15px}}
@media (min-width:900px){html{font-size:17px}}
body{margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  color:var(--fg);background:linear-gradient(to bottom,#fff,var(--bg));
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
a.underline{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
img.thumb{border-radius:14px;border:1px solid var(--border);overflow:hidden}

.container{max-width:1080px;margin:0 auto;padding:24px 16px}
@media (min-width:768px){.container{padding:40px 16px}}

.h1{font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.15;margin:12px 0 0}
.h2{font-size:clamp(1.25rem,3vw,1.75rem);margin:0}
.muted{color:var(--muted)}
.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}

/* Grids */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr}
@media (min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{grid-template-columns:1fr}
@media (min-width:700px){.grid-3{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.grid-3{grid-template-columns:1fr 1fr 1fr}}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
@media (min-width:768px){.card{padding:20px}}

.badge{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--border);border-radius:999px;font-size:.8rem;padding:6px 10px;color:#334155;background:white}

.btn{display:inline-block;background:var(--accent);color:#fff;border:none;border-radius:999px;padding:14px 18px;
  font-weight:700;cursor:pointer;min-height:44px;min-width:44px}
.btn:active{transform:translateY(1px)}

/* Forms */
input[type="text"], input[type="email"], textarea{
  width:100%;display:block;padding:12px;border:1px solid var(--border);border-radius:12px;
  font:inherit;min-height:44px;background:#fff
}
textarea{resize:vertical}

/* Hero */
.hero{padding:24px 0}
@media (min-width:900px){.hero{padding:48px 0}}
.hero-wrap{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--border)}
.hero-img{width:100%;height:220px;object-fit:cover;display:block}
@media (min-width:768px){.hero-img{height:320px}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,.0))}
.hero-text{position:absolute;left:16px;right:16px;bottom:16px;color:#fff;max-width:820px}

/* Key-value grid */
.kv{display:grid;grid-template-columns:1fr;gap:8px;color:#334155}
.kv strong{color:#0f172a}
@media (min-width:560px){.kv{grid-template-columns:150px 1fr}}

/* Footer */
.footer{border-top:1px solid var(--border);margin-top:32px}
.text-center{text-align:center}
.small{font-size:.9rem;color:#64748b}

/* ====== NAVBAR (Burger, CSS-only) ====== */
.nav{position:sticky;top:0;background:rgba(255,255,255,.97);backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--border);z-index:999}
.nav-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;gap:12px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700}
.logo{width:132px;height:auto}

.menu{display:flex;gap:12px;font-size:1rem;align-items:center}
.menu a{color:#334155;padding:10px 10px;border-radius:10px}
.menu a[data-active="true"]{color:#0f172a;font-weight:700;background:#eaf6fd}

/* A11y-friendly checkbox toggler (visually hidden but focusable) */
#nav-toggle{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;border:0;padding:0;margin:-1px}
.burger{display:none}
.menu-wrap{display:none}

@media (max-width:900px){
  .menu{display:none}
  .burger{display:inline-flex;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--border);background:#fff;cursor:pointer;z-index:1000}
  .burger span{display:block;width:22px;height:2px;background:#0f172a}
  /* collapsed panel with smooth transition */
  .menu-wrap{display:block;max-height:0;overflow:hidden;transition:max-height .25s ease;border-top:1px solid transparent;background:#fff}
  #nav-toggle:checked ~ .menu-wrap{max-height:320px;border-top:1px solid var(--border)}
  .menu-col{display:flex;flex-direction:column;padding:8px}
  .menu-col a{padding:14px 16px;border-radius:12px}
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .menu-wrap{transition:none}
  .btn:active{transform:none}
}

/* === Sticky & compact footer overrides === */
html, body { height: 100%; }
body { min-height: 100svh; display: flex; flex-direction: column; }

/* Make the first main container fill remaining space to push footer down */
body > .container { flex: 1 0 auto; }

/* Footer compact spacing */
.footer { 
  margin-top: clamp(12px, 2vw, 20px);
  padding: clamp(10px, 2vw, 16px) 0;
  background: linear-gradient(to bottom, #ffffff, #f8fafc);
  border-top: 1px solid var(--border);
}
/* Reduce vertical gaps only inside footer */
.footer .grid { gap: 12px; }
.footer .mt-2 { margin-top: 6px; }
.footer .small { font-size: .85rem; color: #6b7280; }
.footer .kv { gap: 6px; }
@media (min-width:560px){ .footer .kv { grid-template-columns: 130px 1fr; }}

/* Ensure sticky header doesn't overlap content top-when first container follows .nav */
.nav + .container { padding-top: clamp(16px, 3vw, 24px); }
/* Footer gọn gàng */
.footer {
  padding: 12px 0;                /* giảm padding trên/dưới */
  background: #f9fafb;            /* màu nền nhẹ, có thể để trắng */
  border-top: 1px solid #e5e7eb;
  font-size: 0.9rem;              /* chữ nhỏ hơn nhẹ */
  line-height: 1.4;               /* giảm khoảng cách dòng */
}

.footer .grid {
  display: flex;                  /* thay grid bằng flex cho gọn */
  flex-direction: column;
  gap: 6px;                       /* khoảng cách nhỏ giữa các block */
}

.footer .mt-2 {
  margin-top: 4px;                /* giảm margin */
}

.footer .small {
  font-size: 0.8rem;              /* chữ phụ nhỏ hơn */
  color: #6b7280;
}

.footer .kv {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;                  /* khoảng cách key-value nhỏ hơn */
}

.footer .kv strong {
  min-width: 120px;               /* giữ cột key gọn */
  font-weight: 500;
}

@media (min-width: 560px) {
  .footer .grid {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}



/* ==== Compact Footer (site-wide) ==== */
.footer{padding:10px 0;background:#f9fafb;border-top:1px solid #e5e7eb}
.footer-mini{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.mini-left{display:flex;gap:10px;align-items:center}
.mini-logo{width:80px;height:auto}
.footer .kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px}
.footer .small{font-size:.85rem;color:#6b7280}
@media (max-width:700px){
  .footer-mini{flex-direction:column;gap:10px}
  .mini-logo{width:72px}
  .footer .kv{grid-template-columns:1fr}
}


/* Tiny helper for the new address-change note */
.footer .small { line-height: 1.35; }