* { box-sizing: border-box; }
:root { --orange:#f59e0b; --text:#18181b; --line:#e7eaf0; }
html { min-width:320px; }
body {
  min-height:100vh; margin:0; color:var(--text);
  background:
    radial-gradient(circle at 6% 13%,rgba(255,247,222,.95) 0 8%,transparent 25%),
    radial-gradient(circle at 94% 72%,rgba(237,241,246,.95) 0 12%,transparent 32%),
    #f8fafc;
  font-family:"Kanit","Noto Sans Thai",Arial,sans-serif;
}
.about-page { min-height:100vh; padding:28px 0 70px; }
.about-container { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
.about-topbar { display:flex; justify-content:flex-end; min-height:46px; }
.about-back {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  align-self:flex-start; padding:9px 17px; border:1px solid #e2e8f0;
  border-radius:999px; background:#fff; color:#334155;
  box-shadow:0 5px 16px rgba(15,23,42,.08);
  font-size:14px; font-weight:700; text-decoration:none; transition:.2s ease;
}
.about-back:hover { border-color:var(--orange); color:#d97706; transform:translateY(-2px); }
.about-heading { margin:-4px 0 52px; text-align:center; }
.about-kicker {
  margin-bottom:4px; color:var(--orange); font-size:14px;
  font-weight:700; letter-spacing:.35px; text-transform:uppercase;
}
.about-heading h1 { margin:0; font-size:clamp(34px,4.5vw,50px); font-weight:800; line-height:1.14; }
.about-heading-line {
  width:62px; height:4px; margin:15px auto 0; border-radius:99px;
  background:linear-gradient(90deg,#f59e0b,#f97316);
}
.about-error,.about-empty {
  padding:34px 20px; border:1px solid var(--line); border-radius:18px;
  background:rgba(255,255,255,.88); color:#64748b; text-align:center;
}
.about-error { color:#b91c1c; }

.vision-content { display:grid; gap:48px; }
.vision-section[hidden] { display:none; }
.vision-section h2 { margin:0 0 13px; font-size:clamp(24px,3vw,31px); font-weight:700; }
.vision-copy {
  margin:0; color:#363943; font-size:clamp(17px,2vw,21px);
  font-weight:400; line-height:1.65; white-space:pre-wrap;
}
.vision-section:first-child .vision-copy { text-align:center; }

.contact-panel { width:min(720px,100%); margin:0 auto; }
.contact-details {
  margin-bottom:28px; color:#343740;
  font-size:clamp(17px,2vw,21px); line-height:1.6;
}
.contact-row[hidden],.contact-social[hidden],.contact-map-wrap[hidden] { display:none; }
.contact-organization { margin-bottom:5px; font-size:clamp(20px,2.5vw,25px); font-weight:700; }
.contact-socials {
  display:flex; align-items:center; justify-content:center; gap:72px;
  min-height:76px; margin:23px 0 35px;
}
.contact-socials[hidden] { display:none; }
.contact-social {
  display:grid; place-items:center; width:68px; height:68px;
  border-radius:50%; color:#fff; box-shadow:0 9px 22px rgba(15,23,42,.12);
  font-size:39px; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease;
}
.contact-social:hover { transform:translateY(-4px) scale(1.03); box-shadow:0 14px 28px rgba(15,23,42,.17); }
.contact-facebook { background:#1877f2; }
.contact-line { background:#06c755; }
.contact-map-wrap { width:min(620px,100%); margin:0 auto; text-align:center; }
.contact-map { display:block; width:100%; height:385px; border:0; background:#e5e7eb; }
.contact-map-link {
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:14px; padding:9px 25px; border-radius:999px;
  background:#10c7c1; color:#062f32; font-size:18px; font-weight:500; text-decoration:none;
}
@media (max-width:700px) {
  .about-page { padding-top:18px; }
  .about-container { width:min(calc(100% - 28px),1180px); }
  .about-heading { margin-top:12px; margin-bottom:36px; }
  .vision-content { gap:34px; }
  .vision-section:first-child .vision-copy { text-align:left; }
  .contact-socials { gap:42px; }
  .contact-map { height:320px; }
}