/* ===================================================================
   TRANG PHÁP LÝ (chinh-sach.html)
   Tài liệu dài, đọc là chính — ưu tiên dòng ngắn, khoảng thở rộng,
   phân cấp tiêu đề rõ. Không dùng hiệu ứng động.
   =================================================================== */

/* ---------------------------------------------------------- thanh trên */

.legalTop {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.legalTop__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
}

.legalTop__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-blue);
  text-decoration: none;
}
.legalTop__back:hover { text-decoration: underline; }
.legalTop__logo { height: 26px; width: auto; }

/* ------------------------------------------------------------ khung bài */

.legal {
  padding-block: var(--s-12) var(--s-20);
  color: var(--ink-700);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.legal__eyebrow {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-blue);
}

.legal__h1 {
  margin: 0 0 var(--s-6);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
}

.legal__lead {
  font-size: var(--fs-lead);
  color: var(--ink-700);
}

.legal p { margin: 0 0 var(--s-4); }
.legal a { color: var(--brand-blue); }

/* ------------------------------------------------------- khối thông tin */

.legal__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3) var(--s-6);
  margin: 0 0 var(--s-8);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-soft);
}
.legal__meta dt {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.legal__meta dd {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
}

.legal__entity {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: var(--s-2) var(--s-5);
  margin: 0 0 var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--brand-blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-blue);
  font-size: var(--fs-sm);
}
.legal__entity dt { font-weight: 600; color: var(--ink-500); }
.legal__entity dd { margin: 0; color: var(--ink-900); }

/* ------------------------------------------------------------- mục lục */

.legal__toc {
  margin: 0 0 var(--s-10);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.legal__tocTitle {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-500);
}
/* display:grid trên <ol> làm mất marker số thứ tự, mà mục lục chia 2 cột thì
   cột trái là 1,3,5… — không có số thì người đọc không lần ra thứ tự. Dùng
   counter để số luôn hiện, độc lập với cách bày cột. */
.legal__toc ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-2) var(--s-6);
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: toc;
  font-size: var(--fs-sm);
}
.legal__toc li { margin: 0; counter-increment: toc; }
.legal__toc a {
  display: flex;
  gap: var(--s-2);
  text-decoration: none;
}
.legal__toc a::before {
  content: counter(toc) ".";
  flex: none;
  min-width: 1.4em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-400);
}
.legal__toc a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- mục */

.legal__sec {
  padding-top: var(--s-8);
  margin-bottom: var(--s-8);
  border-top: 1px solid var(--line);
  /* Chừa chỗ cho thanh sticky khi nhảy từ mục lục xuống */
  scroll-margin-top: 72px;
}

.legal__sec h2 {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}
.legal__sec h3 {
  margin: var(--s-6) 0 var(--s-3);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink-900);
}

/* ------------------------------------------------------------ danh sách */

.legal__list,
.legal__ol,
.legal__rights,
.legal__flow {
  margin: 0 0 var(--s-4);
  padding-left: var(--s-5);
}
.legal__list { list-style: disc; }
.legal__ol,
.legal__flow { list-style: decimal; }
.legal__rights { list-style: none; padding-left: 0; }

.legal__list li,
.legal__ol li,
.legal__flow li { margin-bottom: var(--s-2); }

.legal__flow li { margin-bottom: var(--s-3); }

.legal__rights li {
  position: relative;
  margin-bottom: var(--s-3);
  padding-left: var(--s-6);
}
.legal__rights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-blue);
}

/* Danh sách "KHÔNG thu thập" — dấu gạch thay vì chấm tròn */
.legal__list--no { list-style: none; padding-left: 0; }
.legal__list--no li {
  position: relative;
  padding-left: var(--s-6);
}
.legal__list--no li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 11px;
  height: 2px;
  border-radius: 1px;
  background: var(--success);
}

/* --------------------------------------------------------------- bảng */

.legal__table {
  width: 100%;
  margin: 0 0 var(--s-4);
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.legal__table th,
.legal__table td {
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.legal__table th {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: var(--surface-soft);
  border-bottom-color: var(--line-strong);
}
.legal__table td:first-child { font-weight: 600; color: var(--ink-900); }
.legal__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-micro);
  font-weight: 400;
  color: var(--ink-500);
}

/* ------------------------------------------------------------- callout */

.legal__callout {
  display: flex;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface-soft);
  font-size: var(--fs-sm);
}
.legal__callout svg { flex: none; margin-top: 2px; color: var(--ink-500); }

.legal__callout--good {
  border-color: var(--score-high-bar);
  background: var(--score-high-soft);
}
.legal__callout--good svg { color: var(--score-high-ink); }

.legal__callout--warn {
  border-color: var(--score-mid-bar);
  background: var(--score-mid-soft);
}
.legal__callout--warn svg { color: var(--score-mid-ink); }

.legal__note {
  padding-left: var(--s-4);
  border-left: 2px solid var(--line-strong);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

/* ------------------------------------------------------------- liên hệ */

.legal__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
}
.legal__contactItem {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  background: var(--surface);
  font-weight: 600;
  color: var(--ink-900);
  text-decoration: none;
}
.legal__contactItem:hover { border-color: var(--brand-blue); }
.legal__contactItem svg { flex: none; color: var(--brand-blue); }
.legal__contactLabel {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--ink-500);
}

.legal__back {
  padding-top: var(--s-8);
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------ chân trang */

.legalFoot {
  padding-block: var(--s-8);
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}
.legalFoot p { margin: 0 0 var(--s-3); }
.legalFoot strong { color: var(--ink-700); }
.legalFoot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: 0;
}
.legalFoot__links a { color: var(--brand-blue); }

/* ---------------------------------------------------------- điện thoại */

@media (max-width: 600px) {
  .legal__entity { grid-template-columns: 1fr; gap: 0; }
  .legal__entity dt { margin-top: var(--s-3); }
  .legal__entity dt:first-child { margin-top: 0; }

  /* Bảng hẹp thì cho cuộn ngang trong khung của chính nó, không đẩy cả trang */
  .legal__table { display: block; overflow-x: auto; white-space: nowrap; }
  .legal__table td,
  .legal__table th { white-space: normal; min-width: 110px; }

  .legal__contactItem { width: 100%; }
}