:root {
  --blue-950: #061a3a;
  --blue-900: #0a3f82;
  --blue-800: #0b4f9f;
  --blue-700: #1a66cc;
  --blue-600: #2e7dde;
  --blue-100: #e9f2ff;
  --blue-50: #f3f8ff;

  --bg: #f5f7fb;
  --surface: #ffffff;
  --line: #e2e8f0;
  --line-soft: #eef2f8;
  --text: #0f172a;
  --muted: #64748b;
  --muted-2: #94a3b8;

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12);

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

.container { width: min(1180px, 94%); margin: 0 auto; }

.client-main { min-height: calc(100vh - 180px); padding: 28px 0 40px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.section { margin: 40px 0; }

.section-head { text-align: center; margin-bottom: 22px; }
.section-head h2 { font-size: 28px; font-weight: 700; color: var(--blue-900); margin-bottom: 6px; }
.section-head p { color: var(--muted); }

.page-head h1 { font-size: 28px; margin-bottom: 6px; color: var(--blue-900); font-weight: 700; }
.page-head p { color: var(--muted); margin-bottom: 18px; }

@media (max-width: 640px) {
  .client-main { padding: 18px 0 28px; }
  .section { margin: 28px 0; }
  .section-head h2 { font-size: 22px; }
  .page-head h1 { font-size: 22px; }
}