/* Chuẩn nhận diện STOWN Phượng Mao (claude/chuan-nhan-dien-stown-phuong-lieu.md) */
:root {
  --red: #d7192a;          /* tiêu đề, số lớn */
  --red-dark: #b01221;     /* hover nút (đậm hơn đỏ chủ đạo) */
  --red-orange: #e8461f;
  --orange: #f7861f;       /* chỉ làm nền / điểm cuối gradient, không làm chữ trên nền sáng */
  --ink: #3a0d08;          /* chữ nội dung */
  --ink-soft: #6b4a42;
  --cream: #fbf5ee;        /* nền trang */
  --beige: #ecd9c6;        /* viền thẻ, đường kẻ */
  --white: #fff;

  --grad: linear-gradient(90deg, #d7192a 0%, #e8461f 55%, #f7861f 100%);
  --grad-cover: linear-gradient(170deg, #d7192a 0%, #e0301f 38%, #ec5a1c 72%, #f7861f 100%);
  --shadow: 0 12px 34px rgba(120, 30, 10, .08);

  /* phân loại */
  --cat-kcn: #6a40a0; --cat-edu: #2e6bb6; --cat-health: #bf3a2b; --cat-shop: #2d8a56; --cat-admin: #14898f;
  --t-2pn: #6ea6dd; --t-3pn-s: #f4b04b; --t-3pn-l: #e06b6b; --t-2pn-goc: #a47fd4;

  /* kết quả check điều kiện: tái dùng màu phân loại của chuẩn */
  --ok-bg: #e4f3ea; --ok-ink: #1c5a39; --ok: #2d8a56;
  --warn-bg: #fdf0d6; --warn-ink: #7a4a00; --warn: #f4b04b;
  --bad-bg: #f9e3df; --bad-ink: #8a2418; --bad: #bf3a2b;

  --font-head: 'Montserrat', 'Be Vietnam Pro', system-ui, sans-serif;
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 20px;
  --max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; margin: 0; line-height: 1.25; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--red-orange); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* nhãn nhỏ viết hoa giãn chữ */
.eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--red);
}
/* tiêu đề mục: viết hoa giãn 0,06em + đường kẻ có đoạn nhấn gradient */
.h-section {
  font-size: clamp(14px, 4.5vw, 30px); text-transform: uppercase; letter-spacing: .06em; color: var(--red);
  padding-bottom: 14px; position: relative; margin: 6px 0 22px;
}
.h-section::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--beige); }
.h-section::before { content: ''; position: absolute; left: 0; bottom: -1px; width: 56px; height: 3px; background: var(--grad); z-index: 1; }

/* thẻ: trắng, viền be, bóng nhẹ, góc vuông */
.card { background: var(--white); border: 1px solid var(--beige); box-shadow: var(--shadow); }

/* nút */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border: 2px solid transparent; cursor: pointer;
  font: 600 15px/1.2 var(--font-body); letter-spacing: .02em; text-decoration: none;
  background: var(--red); color: #fff; transition: background .15s, transform .05s;
}
.btn:hover { background: var(--red-dark); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--red); border-color: var(--red); }
.btn-ghost:hover { background: var(--red); color: #fff; }
.btn-light { background: #fff; color: var(--red); }
.btn-light:hover { background: var(--cream); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .8); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .14); }
.btn-sm { min-height: 38px; padding: 8px 16px; font-size: 14px; }

/* form */
.field { margin-bottom: 18px; }
.field > label, .field > .label, legend.label {
  display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; padding: 0;
}
.field .hint { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.field .err { font-size: 13px; color: var(--bad-ink); margin-top: 6px; font-weight: 500; }
input[type=text], input[type=tel], input[type=number], input[type=password], input[type=search], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; background: #fff; color: var(--ink);
  border: 1px solid #cdb69f; border-radius: 0; font: 400 16px var(--font-body); /* 16px: iOS không tự zoom */
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(232, 70, 31, .35); border-color: var(--red-orange); }
.invalid { border-color: var(--bad) !important; background: #fffafa; }

.chip {
  display: inline-block; padding: 3px 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  border: 1px solid transparent; white-space: nowrap;
}
.chip-du { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok); }
.chip-gan_du { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn); }
.chip-chua_du { background: var(--bad-bg); color: var(--bad-ink); border-color: var(--bad); }
.chip-muted { background: #f3ebe2; color: var(--ink-soft); border-color: var(--beige); }

.bar-top { height: 3px; background: var(--grad); }