/* ============================================================
   Hello Baby — trang phụ (điều khoản, quyền riêng tư, quy tắc
   cộng đồng, xoá tài khoản). Dùng chung token với styles.css.
   ============================================================ */

/* ---------- hero ---------- */
.legal-hero { padding: 40px 0 28px; }
.legal-hero__inner { max-width: 800px; margin: 0 auto; padding: 0 var(--gutter); }
.legal-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blush); color: var(--rose-dark);
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
}
.legal-hero h1 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(34px, 5vw, 50px); line-height: 1.12; color: var(--ink-deep); margin: 18px 0 14px;
}
.legal-hero .meta { font-size: 15px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.legal-hero .meta strong { color: var(--ink-soft); font-weight: 700; }
.legal-lead { font-size: 18px; line-height: 1.65; color: var(--ink-soft); margin: 18px 0 0; text-wrap: pretty; }

/* tab chuyển giữa các trang phụ */
.legal-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 30px;
}
.legal-tabs a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--line-2);
  color: var(--muted); font-size: 13.5px; font-weight: 800;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.legal-tabs a:hover { color: var(--rose); border-color: var(--pink-1); }
.legal-tabs a[aria-current="page"] { background: var(--rose); border-color: var(--rose); color: #fff; }

/* ---------- thân văn bản ---------- */
.legal { max-width: 800px; margin: 0 auto; padding: 8px var(--gutter) 96px; }
.legal h2 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.01em;
  font-size: 27px; line-height: 1.25; color: var(--ink-deep);
  margin: 52px 0 14px; padding-top: 6px; scroll-margin-top: 96px;
}
.legal h3 { font-size: 17.5px; font-weight: 800; color: var(--ink); margin: 28px 0 8px; scroll-margin-top: 96px; }
.legal p, .legal li { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.legal p { margin: 0 0 14px; }
.legal ul { list-style: disc; padding-left: 24px; margin: 6px 0 16px; }
.legal ol { padding-left: 24px; margin: 6px 0 16px; }
.legal li { margin: 5px 0; }
.legal li::marker { color: var(--rose); }
.legal strong { color: var(--ink); font-weight: 800; }
.legal em { color: var(--ink); }
.legal a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--pink-1); text-underline-offset: 3px; }
.legal a:hover { text-decoration-color: var(--rose); }
.legal code { font: 600 .92em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--sand); padding: 1px 6px; border-radius: 6px; color: var(--ink); }
.legal hr { border: 0; border-top: 1px solid var(--line-2); margin: 44px 0 28px; }
.legal hr + p { font-style: italic; color: var(--muted); }

.callout {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 24px 26px; margin: 26px 0 8px;
  box-shadow: 0 12px 32px -22px rgba(63,48,41,.28);
}
.callout--sand  { background: var(--sand); border-color: var(--sand-line); box-shadow: none; }
.callout--green { background: var(--green-bg); border-color: #DCE5D2; box-shadow: none; }
.callout--green li::marker { color: var(--green); }
.callout--blush { background: var(--blush); border-color: #F3D3D8; box-shadow: none; }
.callout h3, .callout h2 { margin-top: 0; }
.callout ul, .callout ol { margin-bottom: 0; }
.callout p:last-child { margin-bottom: 0; }

.toc { columns: 2; column-gap: 32px; padding-left: 0; list-style: none; margin: 0; }
.toc li { break-inside: avoid; margin: 0; padding: 5px 0; font-size: 15px; }
.toc a { text-decoration: none; color: var(--ink-soft); }
.toc a:hover { color: var(--rose); }
.toc .n { display: inline-block; min-width: 26px; color: var(--muted-3); font-weight: 800; }

.fill--todo { background: #FFF1B8; color: #6b5300; padding: 0 6px; border-radius: 6px; font-weight: 800; }
.legal-note { font-size: 13.5px; color: var(--muted); }

/* liên kết chéo cuối trang */
.legal .legal-related { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.legal-related li { margin: 0; }
.legal-related a { text-decoration: none; }

/* ---------- form xoá tài khoản ---------- */
.field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.field label { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.input {
  width: 100%; height: 52px; padding: 0 18px;
  font: inherit; font-size: 16.5px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line-2); border-radius: 16px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input::placeholder { color: var(--muted-3); }
.input:focus { outline: 0; border-color: var(--rose); box-shadow: 0 0 0 4px rgba(194,105,122,.16); }
.input[aria-invalid="true"] { border-color: #C0392B; }
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-actions .btn { height: 52px; padding: 0 28px; font-size: 15.5px; border: 0; cursor: pointer; }
.form-actions .btn[disabled] { opacity: .6; cursor: progress; }
.form-hint { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; }

.form-msg {
  margin: 18px 0 0; padding: 14px 18px; border-radius: 16px;
  font-size: 15.5px; line-height: 1.55; font-weight: 600;
}
.form-msg--ok  { background: var(--green-bg); color: #4d6140; border: 1px solid #DCE5D2; }
.form-msg--err { background: #FDECEC; color: #8f2f2f; border: 1px solid #F3C9C9; }

/* các bước */
.legal .steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li {
  position: relative; padding-left: 52px; margin: 0 0 18px; counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 2px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blush); color: var(--rose);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}
.steps li strong { display: block; margin-bottom: 2px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0 8px; }
.grid-2 .callout { margin: 0; }

/* ---------- nav / embed / responsive / print ---------- */
.nav__links a.is-current { color: var(--rose); }
body.is-embed .nav, body.is-embed .footer, body.is-embed .legal-tabs { display: none; }
body.is-embed .legal-hero { padding-top: 32px; }

@media (max-width: 720px) {
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .legal-hero { padding-top: 28px; }
  .toc { columns: 1; }
  .callout { padding: 20px; border-radius: 18px; }
  .legal h2 { font-size: 23px; margin-top: 40px; }
  .legal p, .legal li { font-size: 16px; }
  .legal-lead { font-size: 17px; }
  .form-actions .btn { width: 100%; }
}
@media print {
  .nav, .footer, .lang, .legal-tabs { display: none !important; }
  .legal-hero, .legal { padding-left: 0; padding-right: 0; }
  .callout { box-shadow: none; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}