body {  font-family: "Noto Sans Thai", sans-serif; background: var(--color-bg); color: var(--color-text); }


  h1, h2, h3, h4, h5, h6, .fh {  font-family: "Noto Sans Thai", sans-serif; }
  a { color: var(--color-accent); text-decoration: none; }
  a:hover { color: var(--color-accent-700); }
  .tnum { font-variant-numeric: tabular-nums; }

  :root { --brand: #EC9011; --brand-ink: #9c5c05; }
  a:hover { color: var(--brand-ink); }
  .btn-primary { color: var(--brand-ink); border-color: var(--brand-ink); }
  .btn-primary:hover, .btn-primary:active { color: var(--brand); border-color: var(--brand); }
  .btn-primary:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); }
  .btn-primary:active { background: color-mix(in srgb, var(--brand) 26%, transparent); }
  .btn-secondary:hover { color: var(--brand-ink); border-color: var(--brand-ink); }
  .btn-secondary:active { background: color-mix(in srgb, var(--brand) 16%, transparent); }
  :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .tag-outline { border-color: var(--brand-ink); color: var(--brand-ink); }
  .sx-rail { width: 100%; border-bottom: 1px solid var(--color-divider); }
  .sx-rail-inner { padding: 40px 0; }
  .sx-main { padding: 8px 0 0; }
  @media (min-width: 992px) {
    .sx-rail { width: 300px; flex: 0 0 300px; border-bottom: 0; border-right: 1px solid var(--color-divider); }
    .sx-rail-inner { padding: 44px 32px 44px 0; }
    .sx-main { padding: 0 0 0 36px; }
  }
  @media (min-width: 1400px) { .container { max-width: 1140px; } }
  @media (min-width: 992px) { .sx-side { height: 100vh; } }