/* ============================================================
   CBG.WORKS — kiểu trình bày cho các trang tài liệu
   (chính sách bảo mật, điều khoản, hồ sơ năng lực, dự án tiêu biểu)
   Dùng kèm site.css, lấy lại toàn bộ token màu và font từ :root.
   ============================================================ */

.doc { max-width: var(--measure); margin: 0 auto; padding: 40px 24px 64px; }

.doc__back {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none;
  font: 600 16px var(--font-sans); letter-spacing: .02em; margin-bottom: 36px;
}
.doc__back img { width: 34px; height: 34px; }

.doc h1 { font: 500 clamp(26px, 2vw + 16px, 34px)/1.25 var(--font-mono); color: var(--heading); margin: 0 0 10px; }
.doc__meta { margin: 0 0 32px; font-size: 13px; line-height: 22px; color: var(--fg-muted); }
.doc__lead { font-size: 17px; line-height: 28px; color: var(--fg); max-width: 70ch; }

.doc h2 {
  font: 500 clamp(19px, 1vw + 14px, 22px)/1.35 var(--font-mono);
  color: var(--heading); margin: 44px 0 14px; scroll-margin-top: 24px;
}
.doc h3 { font: 600 16px/1.4 var(--font-sans); color: #fff; margin: 26px 0 10px; }
.doc p { margin: 0 0 16px; max-width: 72ch; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; max-width: 72ch; }
.doc li { margin: 0 0 9px; }
.doc li::marker { color: rgb(var(--cyan)); }

/* Khối thông tin pháp nhân */
.doc__card {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-card); padding: 20px 22px; margin: 0 0 36px;
}
.doc__card dl { margin: 0; display: grid; grid-template-columns: 200px 1fr; gap: 10px 18px; font-size: 14px; line-height: 22px; }
.doc__card dt { color: var(--fg-muted); }
.doc__card dd { margin: 0; color: var(--fg); }

/* Bảng */
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; line-height: 21px; display: block; overflow-x: auto; }
.doc th, .doc td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.doc th { color: #fff; font-weight: 500; background: rgb(255 255 255 / .04); white-space: nowrap; }

/* Ghi chú */
.doc__note { border-left: 2px solid rgb(var(--gold)); padding: 4px 0 4px 16px; color: var(--fg-muted); margin: 0 0 20px; }

/* Dãy số liệu */
.stats { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.stats li { margin: 0; padding: 18px 20px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-card); }
.stat__num { display: block; font: 600 28px/1.1 var(--font-sans); color: #fff; }
.stat__label { display: block; margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--fg-muted); }

/* Thẻ công nghệ */
.tags { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  margin: 0; padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: rgb(255 255 255 / .04);
  font: 500 13px/1.3 var(--font-sans); color: var(--fg);
}

/* Danh sách dự án */
.proj { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.proj > li { margin: 0; }
.proj__card {
  display: block; height: 100%; padding: 20px; color: inherit; text-decoration: none;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-card);
  transition: transform .2s ease, border-color .2s ease;
}
a.proj__card:hover { color: inherit; transform: translateY(-3px); border-color: rgb(var(--neon) / .5); }
.proj__kicker { display: block; font: 500 11px/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--cyan)); margin-bottom: 10px; }
.proj__title { margin: 0 0 8px; font: 600 17px/1.35 var(--font-sans); color: #fff; }
.proj__desc { margin: 0 0 12px; font-size: 14px; line-height: 22px; color: var(--fg-muted); }
.proj__link { font-size: 13px; color: var(--link); word-break: break-all; }

@media (max-width: 599px) {
  .doc { padding: 32px 20px 56px; }
  .doc__card dl { grid-template-columns: 1fr; gap: 2px 0; }
  .doc__card dd { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .proj__card { transition: none; }
  a.proj__card:hover { transform: none; }
}