:root{
  --brand-gold:#b8860b;
  --brand-maroon:#800000;
  --brand-brown:#5c4033;
}
body{font-family:system-ui,"Noto Sans Thai",sans-serif;background:#fff;color:#333;}
.navbar .nav-link.active{color:var(--brand-maroon)!important;font-weight:600}
.hero{background:linear-gradient(180deg,rgba(184,134,11,0.15),transparent);}
.img-thumb{border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.15);margin-bottom:.5rem;padding:1rem;background:#fdfcf9}
.contact-icon{width:20px;height:20px;margin-right:8px}
.timeline{border-left:4px solid var(--brand-maroon);margin:2rem 0;padding-left:1.5rem}
.timeline-item{margin-bottom:1.5rem}
.timeline-item h4{color:var(--brand-maroon);font-size:1rem;margin:0}


/* === IBM Plex Sans Thai Looped + Brand Styles (auto) === */
:root{
  --brand-maroon:#5c2c2c;
  --brand-gold:#d4af37;
  --brand-ivory:#f7f2e7;
}
html, body {
  font-family: 'IBM Plex Sans Thai Looped', sans-serif !important;
  font-weight: 400;
  color: #222;
  background-color: var(--brand-ivory);
}
h1,h2,h3,h4,h5,h6,
.navbar, .navbar a, nav a, .menu, .navbar-nav .nav-link {
  font-family: 'IBM Plex Sans Thai Looped', sans-serif !important;
  font-weight: 700;
}
.navbar { background-color: var(--brand-maroon); }
.navbar .nav-link, .navbar .navbar-brand, .navbar .navbar-brand span { color: #fff !important; }
.navbar .nav-link.active { color: var(--brand-gold) !important; }
footer{ background:#fff; border-top:1px solid #eee; padding:24px 0; }
footer img.logo{ height:56px; opacity:.95; }