:root{
  --ink:#111827;--muted:#6b7280;--paper:#fff;--line:#e5e7eb;
  --brand:#059669;--brand-ink:#065f46;--soft:#ecfdf5;
  --r:14px;--sh:0 12px 26px rgba(17,24,39,.06)
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--ink);background:var(--paper);
  font-family:Inter,system-ui,Arial,sans-serif;line-height:1.75;
  -webkit-text-size-adjust:100%
}
img{max-width:100%;height:auto;display:block;border-radius:var(--r)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Header (mobile-first, đơn giản) */
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.topbar{width:min(1160px,94%);margin:0 auto;padding:.8rem 0;display:flex;justify-content:space-between;align-items:center;gap:.8rem}
.topbar nav a{margin-left:.6rem;padding:.45rem .8rem;border-radius:999px}
.topbar nav a:hover{background:var(--soft);text-decoration:none}

/* Layout với sidebar trái */
.layout{width:min(1160px,94%);margin:0 auto;display:grid;grid-template-columns:1fr;gap:1rem}
aside{
  border:1px solid var(--line);border-radius:var(--r);padding:1rem;background:#fff;box-shadow:var(--sh)
}
.side h3{margin:.2rem 0 .6rem;font-size:1.1rem}
.side a{display:block;padding:.55rem .7rem;border-radius:10px;color:var(--ink)}
.side a:hover{background:var(--soft);text-decoration:none}
.side .tag{display:inline-block;margin-top:.6rem;padding:.25rem .6rem;border-radius:999px;background:var(--soft);color:var(--brand-ink);font-size:.85rem}

/* Content */
main{display:grid;gap:1rem}
.section{padding:1rem 0}
h1{font-size:clamp(1.6rem,2.5vw,2.2rem);margin:.2rem 0 .6rem}
h2{font-size:clamp(1.2rem,1.9vw,1.6rem);margin:.2rem 0 .4rem}
.lead{color:var(--muted)}
.hero{
  border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--soft),#fff 70%);
  padding:1rem;display:grid;grid-template-columns:1fr;gap:1rem;align-items:center;box-shadow:var(--sh)
}
.hero img{border-radius:12px}
.cards{display:grid;grid-template-columns:1fr;gap:1rem}
.card{border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh);padding:1rem}
.feature{display:grid;grid-template-columns:120px 1fr;gap:1rem;align-items:center;border:1px dashed var(--line);border-radius:12px;padding:1rem}
.feature .thumb{width:120px;height:120px;object-fit:cover}

/* Timeline */
.timeline{list-style:none;margin:.6rem 0 0;padding:0}
.timeline li{position:relative;padding-left:1.3rem;margin:.5rem 0}
.timeline li::before{content:"";position:absolute;left:.25rem;top:.58rem;width:.5rem;height:.5rem;border-radius:999px;background:var(--brand)}

/* Footer (đồng nhất) */
footer{border-top:1px solid var(--line);background:#f9fafb;margin-top:1rem}
.footer-wrap{width:min(1160px,94%);margin:0 auto;padding:1.2rem 0}
.footer-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.footer-col .small{color:var(--muted)}
.footer-col a{color:var(--ink)}.footer-col a:hover{color:var(--brand-ink)}

/* Form liên hệ (mobile-first) */
button,input,textarea,select{font:inherit}
.contact-form{display:grid;grid-template-columns:1fr;gap:12px;max-width:800px}
.contact-form .row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-form input,.contact-form textarea{
  width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r);min-height:44px;background:#fff
}
.contact-form textarea{resize:vertical}
.contact-form button{width:auto;justify-self:start;padding:.9rem 1.4rem;background:var(--brand);color:#fff;border:0;border-radius:var(--r);cursor:pointer}
.contact-form button:hover{background:var(--brand-ink)}

/* ≥ 900px: bật layout 2 cột với sidebar trái cố định */
@media(min-width:900px){
  .layout{grid-template-columns:260px 1fr}
  .hero{grid-template-columns:1.1fr 1fr}
  .cards{grid-template-columns:repeat(3,1fr)}
}

/* ≤ 640px: form 1 cột */
@media(max-width:640px){
  .contact-form .row-2{grid-template-columns:1fr}
}