/* Trang công khai (phòng 7). Dùng biến ở tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body.site {
  margin: 0; font-family: var(--spa-font); font-size: 1rem; line-height: 1.6;
  color: var(--spa-text); background: var(--spa-bg);
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
.site main { flex: 1; }
.site h1, .site h2, .site h3 { line-height: 1.25; margin: 0 0 var(--spa-space-3); text-wrap: balance; }
.site h1 { font-size: clamp(1.75rem, 5.5vw, 2.75rem); font-weight: 700; letter-spacing: -.01em; }
.site h2 { font-size: clamp(1.375rem, 3.5vw, 1.75rem); font-weight: 650; }
.site h3 { font-size: 1.0625rem; font-weight: 650; color: var(--spa-primary); }
.site p { margin: 0 0 var(--spa-space-3); }
.site a { color: var(--spa-primary); text-underline-offset: 3px; }
.site a:hover { color: var(--spa-primary-strong); }
.site :focus-visible { outline: 3px solid var(--spa-primary); outline-offset: 2px; border-radius: 6px; }

.site-wrap { width: min(100% - 32px, 1040px); margin-inline: auto; }
.site-wrap--narrow { width: min(100% - 32px, 640px); }
.site-muted { color: var(--spa-text-muted); }
.site-lead { font-size: 1.125rem; color: var(--spa-text-muted); max-width: 60ch; }

.site-skip { position: absolute; left: -999px; top: 8px; background: var(--spa-surface); padding: 8px 12px; z-index: 10; }
.site-skip:focus { left: 8px; }

/* Đầu trang */
.site-header { background: var(--spa-surface); border-bottom: 1px solid var(--spa-border); position: sticky; top: 0; z-index: 5; }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: var(--spa-space-3); min-height: 64px; }
.site-header__actions { display: flex; align-items: center; gap: var(--spa-space-2); }
.site-brand { font-weight: 700; font-size: 1.0625rem; white-space: nowrap; color: var(--spa-text) !important; text-decoration: none; min-height: var(--spa-tap); display: inline-flex; align-items: center; }
.site-brand { gap: 10px; }
.site-brand__logo { height: 36px; width: auto; max-width: 120px; object-fit: contain; }
.site-header .spa-locale-switcher a { min-width: 44px !important; min-height: 44px !important; }

/* Nút */
.site-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--spa-tap); padding: 0 20px; border-radius: 999px; white-space: nowrap; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1.5px solid var(--spa-primary);
  background: transparent; color: var(--spa-primary); transition: background-color .18s, color .18s;
}
.site-btn:hover { background: var(--spa-primary-soft); }
.site-btn--primary { background: var(--spa-primary); color: var(--spa-on-primary) !important; }
.site-btn--primary:hover { background: var(--spa-primary-strong); color: var(--spa-on-primary) !important; }
.site-btn--lg { min-height: 52px; padding: 0 28px; font-size: 1.0625rem; }
.site-btn--block { width: 100%; }

@media (max-width: 480px) {
  .site-header .site-btn { padding: 0 14px; }
  .site-header__actions { gap: 0; }
  .site-header .spa-locale-switcher { margin-inline-end: 4px !important; gap: 0 !important; }
}

/* Hero */
.site-hero { padding: var(--spa-space-7) 0 var(--spa-space-6); background: linear-gradient(180deg, var(--spa-primary-soft), var(--spa-bg)); }
.site-eyebrow { color: var(--spa-primary-strong); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .8125rem; margin-bottom: var(--spa-space-2) !important; }
.site-hero__cta { margin-top: var(--spa-space-5); display: flex; flex-direction: column; gap: var(--spa-space-3); align-items: flex-start; }
.site-hero__cta p { margin: 0; }

.site-section { padding: var(--spa-space-6) 0; }
.site-section--tint { background: var(--spa-surface-2); border-block: 1px solid var(--spa-border); }

/* Bảng dịch vụ */
.site-group { margin-top: var(--spa-space-5); }
.site-services { list-style: none; margin: 0; padding: 0; background: var(--spa-surface); border: 1px solid var(--spa-border); border-radius: var(--spa-radius); box-shadow: var(--spa-shadow); }
.site-service { display: flex; justify-content: space-between; gap: var(--spa-space-4); padding: var(--spa-space-4); border-top: 1px solid var(--spa-border); }
.site-service:first-child { border-top: 0; }
.site-service p { margin: 0; }
.site-service__name { font-weight: 600; }
.site-service__meta { font-size: .875rem; color: var(--spa-text-muted); margin-top: 2px !important; }
.site-service__price { font-weight: 700; white-space: nowrap; color: var(--spa-text); font-variant-numeric: tabular-nums; }

.site-empty { background: var(--spa-surface); border: 1px dashed var(--spa-border); border-radius: var(--spa-radius); padding: var(--spa-space-6) var(--spa-space-4); text-align: center; }
.site-empty__title { font-weight: 650; font-size: 1.125rem; }

.site-steps { margin: 0 0 var(--spa-space-5); padding-left: 1.4rem; display: grid; gap: var(--spa-space-2); }
.site-steps li::marker { color: var(--spa-accent); font-weight: 700; }

/* Form */
.site-form { margin-top: var(--spa-space-5); display: grid; gap: var(--spa-space-4); background: var(--spa-surface); border: 1px solid var(--spa-border); border-radius: var(--spa-radius-lg); padding: var(--spa-space-4); box-shadow: var(--spa-shadow); }
.site-row { display: grid; gap: var(--spa-space-4); }
.site-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.site-opt { font-weight: 400; color: var(--spa-text-muted); font-size: .875rem; }
.site-field input, .site-field select, .site-field textarea {
  width: 100%; min-height: var(--spa-tap); padding: 10px 12px; font: inherit; font-size: 1rem; /* >=16px: iOS không phóng to */
  color: var(--spa-text); background: var(--spa-surface); border: 1.5px solid var(--spa-text-muted); border-radius: var(--spa-radius-sm);
}
.site-field textarea { resize: vertical; }
.site-field input:focus, .site-field select:focus, .site-field textarea:focus { border-color: var(--spa-primary); }
.site-hint { color: var(--spa-text-muted); font-size: .875rem; margin: 4px 0 0 !important; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--spa-danger); }
.site-error { color: var(--spa-danger); font-size: .9375rem; font-weight: 500; margin: 6px 0 0 !important; }
.site-alert { margin-top: var(--spa-space-4); padding: var(--spa-space-4); border: 1.5px solid var(--spa-danger); border-radius: var(--spa-radius); background: var(--spa-surface); color: var(--spa-text); }
.site-alert__title { font-weight: 650; color: var(--spa-danger); margin-bottom: var(--spa-space-2) !important; }
.site-alert ul { margin: 0; padding-left: 1.2rem; }
.site-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.site-done { background: var(--spa-surface); border: 1px solid var(--spa-border); border-top: 4px solid var(--spa-success); border-radius: var(--spa-radius); padding: var(--spa-space-5); box-shadow: var(--spa-shadow); }
.site-actions { display: flex; flex-wrap: wrap; gap: var(--spa-space-3); margin-top: var(--spa-space-4); }

/* Chân trang */
.site-footer { background: var(--spa-surface); border-top: 1px solid var(--spa-border); padding: var(--spa-space-5) 0; }
.site-footer__grid { display: grid; gap: var(--spa-space-4); }
.site-footer__brand { font-weight: 700; margin-bottom: 4px !important; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spa-space-1); }
.site-footer__list a { display: inline-flex; align-items: center; min-height: var(--spa-tap); }

@media (min-width: 720px) {
  .site-row { grid-template-columns: 1fr 1fr; }
  .site-form { padding: var(--spa-space-5); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-hero { padding: 88px 0 64px; }
  .site-hero__cta { flex-direction: row; align-items: center; }
  .site-service { padding: var(--spa-space-4) var(--spa-space-5); }
}