/* Lớp phủ giao diện kidsafe.com.vn v2 cho cổng hướng dẫn /guide/.
   Nội dung /guide/ là bản sao tự sinh từ kidsafe-agent/landing (sync-to-kidsafe.ps1) — KHÔNG sửa tay
   trong help-portal/. Muốn đổi giao diện /guide/ thì sửa file này; muốn đổi nội dung thì sửa nguồn
   rồi chạy lại sync. Lưu ý: CSS của guide đặt html { font-size: 62.5% } nên 1rem = 10px ở đây. */

:root {
  /* Màu thương hiệu KidSafe thay cho tím của KiddoShield */
  --primary: #3554e0;
  --primary-dark: #1b2c63;
  --primary-hover: #2440b8;
  --primary-light: #edf2ff;
  /* Chữ phụ của guide (#94A3B8) chỉ ~2.6:1 trên nền trắng — làm đậm để đạt ≥4.5:1 */
  --text-light: #5a6378;
  --text-med: #3b4463;
  --text-dark: #16203f;
}

body { font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* ---------- Header KidSafe (chèn bởi sync-to-kidsafe.ps1) ---------- */
.header.ksg-header { background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid #e5e9f3; }
.header.ksg-header.scrolled { border-bottom-color: #e5e9f3; box-shadow: 0 4px 16px rgba(29, 37, 64, 0.08); }
.ksg-inner { max-width: 124rem; margin: 0 auto; padding: 0 1.6rem; min-height: 6.4rem; display: flex; align-items: center; gap: 1.6rem; }
.ksg-logo { display: inline-flex; padding: 0.5rem 0; flex-shrink: 0; }
.ksg-logo img { display: block; height: 3rem; width: auto; }
.ksg-nav { display: none; gap: 2.4rem; flex-grow: 1; }
.ksg-nav a { color: #1d2540; font-size: 1.6rem; font-weight: 500; min-height: 4.4rem; display: inline-flex; align-items: center; }
.ksg-nav a:hover { color: #2a52d6; text-decoration: underline; text-underline-offset: 4px; }
.ksg-header .lang-selector { margin-left: auto; }
.ksg-header .lang-btn { border-radius: 999px; background: #fff; color: #4a5270; border-color: #dfe4f1; min-height: 4rem; }
.ksg-header .lang-btn:hover { color: #1f3473; border-color: #1f3473; }
.ksg-cta {
  display: inline-flex;
  align-items: center;
  min-height: 4.4rem;
  padding: 0 1.6rem;
  border-radius: 999px;
  background: #f2b924;
  color: #1a2445 !important;
  box-shadow: 0 10px 24px rgba(242, 185, 36, 0.35);
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
}
.ksg-cta:hover { background: #e5ac14; }
@media (min-width: 900px) {
  .ksg-inner { padding: 0 2.4rem; min-height: 7.6rem; gap: 2.8rem; }
  .ksg-logo img { height: 3.4rem; }
  .ksg-nav { display: flex; }
  .ksg-header .lang-selector { margin-left: 0; }
  .ksg-cta { font-size: 1.6rem; padding: 0 2rem; min-height: 4.6rem; }
}

/* ---------- Nội dung: liên kết + nút chính theo màu KidSafe ---------- */
a:focus-visible, button:focus-visible { outline: 3px solid #f5b820; outline-offset: 2px; }

/* ---------- Footer ---------- */
.footer { background: linear-gradient(140deg, #111c3f 0%, #1b2c63 60%, #22367a 100%); }
.footer-bottom { color: #c3cceb; border-top-color: rgba(255, 255, 255, 0.12); }
.footer-bottom a { color: #c3cceb; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: #fff; }