/* =====================================================================
   SOLATIC — Brand tokens & helpers
   Thương hiệu SocialLife · Chủ sở hữu: Công ty TNHH Viện Đại học Social Life
   Triết lý: Khoa học · Nhân bản · Khai phóng
   Dùng cho khaosat.sociallife.vn và lab.sociallife.vn
   Tất cả biến và lớp đều có tiền tố --sol- / .sol- để không đụng CSS sẵn có.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* --- Màu, lấy teal SocialLife làm chủ đạo --- */
  --sol-teal:        #2A9D8F;  /* màu chủ đạo, kế thừa logo mẹ */
  --sol-teal-deep:   #14655B;  /* nền khối, header tối */
  --sol-teal-darkest:#0E4A42;  /* chiều sâu, gradient */
  --sol-amber:       #E9A84C;  /* điểm sáng tri thức */
  --sol-coral:       #C75B3F;  /* riêng phân hệ định tính (Qual) */
  --sol-ink:         #13211E;  /* chữ trên nền sáng */
  --sol-paper:       #F2F5F3;  /* nền đọc */
  --sol-cloud:       #FFFFFF;  /* thẻ, mặt phẳng */
  --sol-mist:        #D4E0DC;  /* đường kẻ, viền */
  --sol-muted:       #51635E;  /* chữ phụ */
  --sol-light:       #EAF3F0;  /* chữ trên nền teal */

  /* --- Chữ --- */
  --sol-font-display: 'Be Vietnam Pro','Segoe UI',Helvetica,Arial,sans-serif;
  --sol-font-body:    'Be Vietnam Pro','Segoe UI',Helvetica,Arial,sans-serif;
  --sol-font-mono:    'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  /* --- Hình khối --- */
  --sol-radius:    14px;
  --sol-radius-sm: 10px;
  --sol-shadow:    0 1px 2px rgba(19,33,30,.06), 0 8px 24px rgba(19,33,30,.06);
}

/* ---- Lớp tiện ích (tùy chọn) ---- */
.sol-font-display{ font-family:var(--sol-font-display); }
.sol-font-mono   { font-family:var(--sol-font-mono); }

.sol-eyebrow{
  font-family:var(--sol-font-mono); font-size:12.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sol-teal-deep);
}

.sol-btn{
  font-family:var(--sol-font-display); font-weight:600; font-size:15px;
  color:#fff; background:var(--sol-teal); border:0;
  padding:11px 20px; border-radius:var(--sol-radius-sm); cursor:pointer;
}
.sol-btn:hover{ background:var(--sol-teal-deep); }
.sol-btn--ghost{ background:transparent; color:var(--sol-teal-deep); box-shadow:inset 0 0 0 1.5px var(--sol-teal); }

.sol-card{
  background:var(--sol-cloud); border:1px solid var(--sol-mist);
  border-radius:var(--sol-radius); box-shadow:var(--sol-shadow);
}

/* Dải nền teal chủ đạo cho hero/khối nhấn */
.sol-band{
  background:
    radial-gradient(120% 90% at 85% 5%, rgba(233,168,76,.22), transparent 55%),
    linear-gradient(160deg, var(--sol-teal-deep) 0%, var(--sol-teal-darkest) 100%);
  color:var(--sol-light);
}

:focus-visible{ outline:2.5px solid var(--sol-amber); outline-offset:3px; }