/* ===================== Root Variables ===================== */
:root {
  /* ===== COLORS ===== */
  --color-bg: #f6f8ff;
  --color-text: #0b1020;
  --color-text-secondary: #525a88;
  --color-border: #dce0ef;
  --color-title: #161a40;
  --color-link: #657bff;
  --color-link-hover: #4256c8;
  --color-section-bg: #ffffff;

  /* ===== TYPOGRAPHY ===== */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-base-size: 1rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ===== SPACING ===== */
  --space-xxl: 120px;
  --space-xl: 96px;
  --space-lg: 64px;
  --space-md: 48px;
  --space-sm: 24px;
  --space-xs: 12px;

  /* ===== RADII ===== */
  --radius-card: 40px;
  --radius-btn: 9999px;
}

/* ===================== GLOBAL BASE ===================== */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html {
  font-size: 100%;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-base-size);
  line-height: 1.65;
}

/* ===================== LAYOUT ===================== */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-sm) var(--space-xl);
}

/* ===================== HEADER (กลับไปแบบเริ่มต้น) ===================== */
.header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.logo {
  font-size: 2.35rem; /* ขนาดเหมือนเวอร์ชันแรก */
  letter-spacing: .14em;
  margin-bottom: var(--space-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.tagline {
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8a92c4;
  margin-bottom: var(--space-sm);
}

.header h1 {
  font-size: 2.0rem;
  line-height: 1.25;
  margin: 48px 0 18px;
  color: var(--color-title);
}

.header .intro {
  max-width: 760px;
  margin: 0 auto;
  font-size: .98rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
}

/* ===================== CATEGORY TITLE ===================== */
.category {
  margin-top: var(--space-xl);
}
.category-title {
  font-size: 1.25rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-title);
  text-align: center;
  margin-bottom: var(--space-lg);
}

/* ===================== SECTION CARDS ===================== */
.section {
  background: var(--color-section-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.section h2 {
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
  color: var(--color-title);
  line-height: 1.25;
}

.section p {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
  line-height: 1.65;
}

.section ul,
.section ol {
  margin: var(--space-md) 0 var(--space-md) 1.6rem;
  padding: 0;
}

.section li {
  margin-bottom: var(--space-sm);
  font-size: 1rem;
  color: var(--color-text-secondary);
}

.section li::marker {
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
}

/* ===================== LINKS (เบา) ===================== */
a {
  color: var(--color-link);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}
a:hover,
a:focus {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* ===================== FOOTER ===================== */
.footer {
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: .2em;
  color: #9aa0d0;
  margin-top: var(--space-xl);
  padding-bottom: var(--space-sm);
}

/* ===================== RESPONSIVE — มือถือ - จอใหญ่ ===================== */

/* ===== <=1024px ===== */
@media (max-width: 1024px) {
  .header h1 {
    font-size: 1.8rem;
  }
  .section h2 {
    font-size: 1.8rem;
  }
  .page {
    padding: var(--space-lg) var(--space-sm) var(--space-lg);
  }
}

/* ===== <=768px (มือถือ) ===== */
@media (max-width: 768px) {
  .logo {
    font-size: 2.8rem;
  }
  .tagline {
    font-size: .85rem;
  }
  .header h1 {
    font-size: 1.7rem;
    margin: var(--space-sm) 0;
  }
  .header .intro {
    font-size: 1rem;
    padding: 0 var(--space-xs);
  }

  .section h2 {
    font-size: 1.6rem;
    line-height: 1.3;
  }
  .section {
    padding: var(--space-md) var(--space-sm);
    margin-bottom: var(--space-md);
  }
  .page {
    padding: var(--space-md) var(--space-xs) var(--space-lg);
  }
}

/* ===== <=480px (มือถือเล็ก) ===== */
@media (max-width: 480px) {
  .header h1 {
    font-size: 1.6rem;
  }
  .section h2 {
    font-size: 1.48rem;
    line-height: 1.32;
  }
}