/* Trang văn bản: chính sách, điều khoản, dữ liệu. Tiêu đề nằm trên dải thương hiệu nối từ header,
   nội dung là một tờ giấy trắng, mục lục bám theo khi cuộn. Mẫu MasterClass Privacy và
   Codecademy trên Mobbin. */

.doc-hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--sp-6) var(--sp-8);
  color: var(--surface);
}

/* Nền xanh tràn hết bề ngang và kéo lên sau header 72px, để header và tiêu đề là một dải liền. */
.public:has(.doc-hero) > header {
  background: none;
}

.doc-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -72px calc(50% - 50vw) 0;
  background: var(--brand-band);
}

.public {
  overflow-x: clip;
}

.doc-hero h1 {
  max-width: 20ch;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.doc-hero__sub {
  max-width: 56ch;
  margin-top: var(--sp-3);
  font-size: var(--text-lg);
  color: var(--on-brand);
}

/* Bốn con số chính, một dải chia ô nằm đè mép dải xanh. */
.doc-facts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: calc(-1 * var(--sp-6)) 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

.doc-facts > div {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
}

.doc-facts > div + div {
  border-left: 1px solid var(--line);
}

.doc-facts dt {
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.doc-facts dd {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

@media (max-width: 760px) {
  .doc-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .doc-facts > div:nth-child(3) {
    border-left: 0;
  }

  .doc-facts > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .doc-facts > div {
    padding: var(--sp-3) var(--sp-4);
  }

  .doc-facts dd {
    font-size: var(--text-base);
  }
}

/* ---- Mục lục trái, tờ giấy phải ---- */
.doc {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 72ch);
  gap: var(--sp-6);
  justify-content: center;
  padding-block: var(--sp-6) var(--sp-8);
}

.doc-hero + .doc {
  margin-top: calc(-1 * var(--sp-6));
}

.toc {
  position: sticky;
  top: var(--sp-5);
  align-self: start;
  padding-top: var(--sp-5);
}

.doc-hero + .doc .toc {
  padding-top: calc(var(--sp-6) + var(--sp-5));
}

.toc > .label {
  margin-bottom: var(--sp-2);
}

.toc ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}

.toc a {
  display: block;
  margin-left: -1px;
  padding: var(--sp-1) var(--sp-3);
  border-left: 2px solid transparent;
  font-size: var(--text-sm);
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--duration-fast) linear, border-color var(--duration-fast) linear;
}

.toc a:hover {
  color: var(--ink);
}

.toc a[aria-current="true"] {
  border-left-color: var(--brand);
  color: var(--ink);
  font-weight: 600;
}

.prose {
  padding: var(--sp-6) clamp(var(--sp-5), 4vw, var(--sp-8));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-raise);
}

.prose h2 {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-size: var(--text-2xl);
  scroll-margin-top: var(--sp-5);
}

.prose h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose p {
  margin-top: var(--sp-3);
  max-width: 66ch;
  color: var(--ink-2);
}

.prose strong {
  font-weight: 600;
  color: var(--ink);
}

.prose ul {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-left: 1.1rem;
  color: var(--ink-2);
}

.prose ul li::marker {
  color: var(--ink-3);
}

.prose .table-wrap,
.prose table {
  margin-top: var(--sp-4);
}

.prose table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.prose .table-wrap table {
  margin-top: 0;
  border: 0;
}

/* Câu chốt quan trọng: nền xanh xác nhận nhạt, không viền trái dày. */
.callout {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  background: var(--confirmed-soft);
}

.callout p {
  margin-top: 0;
  color: oklch(32% 0.08 152);
}

@media (pointer: coarse) {
  .toc a {
    display: flex;
    align-items: center;
    min-height: var(--touch);
  }
}

@media (max-width: 900px) {
  .doc {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }

  .toc,
  .doc-hero + .doc .toc {
    position: static;
    padding-top: var(--sp-6);
  }

  .prose {
    padding: var(--sp-5) var(--sp-4);
  }
}