/* ─────────────────────────────────────────────────────────────────────────────
 * Trung tâm Pháp lý (/phap-ly) — Điều khoản & Chính sách.
 * Trang tĩnh, render phía server (chuẩn SEO). Dùng chung bảng màu với trang
 * hướng dẫn đối tác (AffiliateGuide.css) để đồng bộ nhận diện Startee.
 * Prefix class: .lg-
 * ────────────────────────────────────────────────────────────────────────── */

.lg-shell {
  /* html/body/#root bị khoá height:100% + overflow:hidden (App.css) cho công cụ
     canvas toàn màn — nên trang pháp lý phải TỰ cuộn trong shell của mình,
     giống .ag-shell của trang hướng dẫn. */
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(1100px 520px at 50% -8%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #f6f7f9 0%, #edeff3 100%);
  padding: 20px 16px 56px;
  font-family: 'Outfit', 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  color: #17171b;
  -webkit-font-smoothing: antialiased;
}
.lg-container { max-width: 780px; margin: 0 auto; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.lg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.lg-brand { display: inline-flex; align-items: baseline; gap: 9px; text-decoration: none; }
.lg-brand__logo { font-weight: 800; font-size: 20px; letter-spacing: .4px; color: #17171b; }
.lg-brand__tag {
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: #131316; background: rgba(19, 19, 22, .08); padding: 3px 9px; border-radius: 999px;
}
.lg-head__actions { display: inline-flex; align-items: center; gap: 12px; }
.lg-head__link { font-size: 12.5px; font-weight: 600; color: #62626b; text-decoration: none; white-space: nowrap; }
.lg-head__link:hover { color: #17171b; }

/* Nút đổi ngôn ngữ (cờ) */
.lg-lang {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #e3e4e9; background: #fff; color: #62626b;
  font-size: 12.5px; font-weight: 700; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  font-family: inherit; transition: background .15s;
}
.lg-lang:hover { background: #f6f6f8; }
.lg-lang svg { border-radius: 2px; flex-shrink: 0; display: block; }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.lg-crumbs { font-size: 12px; color: #8a8a93; margin: 14px 0 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lg-crumbs a { color: #62626b; text-decoration: none; }
.lg-crumbs a:hover { color: #131316; }
.lg-crumbs span[aria-hidden] { color: #c4c4cc; }
.lg-crumbs b { color: #55555e; font-weight: 600; }

/* ── Tiêu đề tài liệu ───────────────────────────────────────────────────── */
.lg-doc { margin-top: 18px; }
.lg-title { font-size: 30px; line-height: 1.18; font-weight: 800; letter-spacing: -.015em; margin: 0 0 12px; }
.lg-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 16px; }
.lg-updated {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  color: #1f9d55; background: #e7f7ec; padding: 5px 11px; border-radius: 999px;
}
.lg-updated svg { width: 13px; height: 13px; }
.lg-effective { font-size: 12px; color: #8a8a93; }
.lg-lead { font-size: 15px; line-height: 1.65; color: #55555e; margin: 0 0 8px; }
.lg-lead b { color: #17171b; }

/* ── Mục lục (TOC) ──────────────────────────────────────────────────────── */
.lg-toc {
  background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 16px;
  padding: 16px 18px; margin: 22px 0 8px; box-shadow: 0 10px 30px -22px rgba(20, 22, 40, .3);
}
.lg-toc__t { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #9a9aa2; margin-bottom: 10px; }
.lg-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; columns: 2; column-gap: 26px; }
.lg-toc li { page-break-inside: avoid; break-inside: avoid; margin-bottom: 7px; counter-increment: toc; }
.lg-toc a { font-size: 13.5px; line-height: 1.4; color: #44444c; text-decoration: none; display: inline-flex; gap: 8px; }
.lg-toc a:hover { color: #131316; }
.lg-toc a::before { content: counter(toc) '.'; color: #131316; font-weight: 700; flex-shrink: 0; }

/* ── Nội dung tài liệu (prose) ──────────────────────────────────────────── */
.lg-article { margin-top: 26px; }
.lg-article h2 {
  font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 38px 0 14px;
  padding-top: 14px; scroll-margin-top: 20px; border-top: 1px solid #e8e9ee;
}
.lg-article h2:first-child { border-top: none; padding-top: 0; margin-top: 8px; }
.lg-article h3 { font-size: 16px; font-weight: 700; margin: 24px 0 10px; color: #26262c; }
.lg-article p { font-size: 14.5px; line-height: 1.72; color: #44444c; margin: 0 0 14px; }
.lg-article ul, .lg-article ol { margin: 0 0 16px; padding-left: 22px; }
.lg-article li { font-size: 14.5px; line-height: 1.7; color: #44444c; margin-bottom: 8px; }
.lg-article li::marker { color: #131316; }
.lg-article strong { color: #17171b; font-weight: 700; }
.lg-article a { color: #131316; font-weight: 600; text-decoration: none; }
.lg-article a:hover { text-decoration: underline; }
.lg-article hr { border: none; border-top: 1px solid #e8e9ee; margin: 30px 0; }
.lg-article code {
  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace; font-size: 12.5px;
  background: #f2f3f6; border: 1px solid #e6e7ec; border-radius: 6px; padding: 1px 6px; color: #131316;
}

/* FAQ (details/summary) trong tài liệu */
.lg-faq {
  background: #fff; border: 1px solid rgba(0, 0, 0, .07); border-radius: 12px;
  padding: 2px 16px; box-shadow: 0 8px 24px -20px rgba(20, 22, 40, .3);
}
.lg-faq summary { list-style: none; position: relative; padding-right: 26px !important; }
.lg-faq summary::-webkit-details-marker { display: none; }
.lg-faq summary::after { content: '+'; position: absolute; right: 2px; top: 2px; font-size: 20px; color: #131316; font-weight: 400; line-height: 1; }
.lg-faq[open] summary::after { content: '−'; }
.lg-faq p { margin: 6px 0 14px; font-size: 14px; color: #55555e; }

/* Đoạn dẫn nhỏ dưới h2 */
.lg-sub { font-size: 13px; color: #8a8a93; margin: -6px 0 14px; }

/* ── Hộp chú ý (callout) ────────────────────────────────────────────────── */
.lg-note {
  border-radius: 14px; padding: 15px 18px; margin: 18px 0; font-size: 13.5px; line-height: 1.68;
  background: #f7f8fa; border: 1px solid #ececf1; color: #44444c;
}
.lg-note b { color: #17171b; }
.lg-note--info { background: #f0f6ff; border-color: #d8e6ff; color: #33455f; }
.lg-note--info b { color: #1c3a63; }
.lg-note--warn { background: linear-gradient(180deg, #fff, #f7f7f8); border-color: rgba(19, 19, 22, .22); }
.lg-note--warn b { color: #131316; }

/* ── Banner Beta (nổi bật) ──────────────────────────────────────────────── */
.lg-beta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #fff4e6 0%, #ffe9e6 100%);
  border: 1.5px solid #ffd0a6; border-radius: 18px; padding: 20px 22px; margin: 24px 0 6px;
  box-shadow: 0 16px 40px -26px rgba(180, 90, 20, .5);
}
.lg-beta__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lg-beta__badge {
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, #f0902f, #e2711a); padding: 4px 11px; border-radius: 999px;
  box-shadow: 0 6px 14px -6px rgba(226, 113, 26, .7);
}
.lg-beta__t { font-size: 16.5px; font-weight: 800; color: #8a3d00; }
.lg-beta p { font-size: 13.5px; line-height: 1.7; color: #6b4218; margin: 0 0 10px; }
.lg-beta p:last-child { margin-bottom: 0; }
.lg-beta ul { margin: 4px 0 12px; padding-left: 20px; }
.lg-beta li { font-size: 13.5px; line-height: 1.65; color: #6b4218; margin-bottom: 6px; }
.lg-beta li::marker { color: #e2711a; }
.lg-beta strong { color: #8a3d00; }

/* ── Bảng dữ liệu ───────────────────────────────────────────────────────── */
.lg-tablewrap { overflow-x: auto; margin: 16px 0 20px; border: 1px solid #ececf1; border-radius: 14px; }
.lg-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 460px; }
.lg-table th, .lg-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid #eef0f3; vertical-align: top; line-height: 1.55; }
.lg-table thead th { background: #f7f8fa; font-weight: 700; color: #33333b; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
.lg-table tbody tr:last-child td { border-bottom: none; }
.lg-table td:first-child { font-weight: 600; color: #26262c; white-space: nowrap; }

/* ── Hub (trang danh mục) ───────────────────────────────────────────────── */
.lg-hero { text-align: center; padding: 26px 8px 10px; }
.lg-hero h1 { font-size: 30px; line-height: 1.18; font-weight: 800; letter-spacing: -.015em; margin: 0 0 12px; }
.lg-hero p { font-size: 15px; line-height: 1.65; color: #55555e; max-width: 580px; margin: 0 auto; }
.lg-cards { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 14px; gap: 14px; margin: 28px 0 8px; }
.lg-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 16px; padding: 18px 18px 16px;
  box-shadow: 0 10px 30px -22px rgba(20, 22, 40, .3); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.lg-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(20, 22, 40, .45); border-color: rgba(19, 19, 22, .25); }
.lg-card__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(19, 19, 22, .08); color: #131316; margin-bottom: 6px; }
.lg-card__ic svg { width: 22px; height: 22px; }
.lg-card__t { font-size: 16px; font-weight: 800; color: #17171b; display: flex; align-items: center; gap: 8px; }
.lg-card__d { font-size: 13px; line-height: 1.6; color: #7a7a83; }
.lg-card__go { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: #131316; }
.lg-badge-beta { font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #e2711a; background: rgba(226, 113, 26, .12); padding: 2px 7px; border-radius: 999px; }

/* Khối thông tin công ty trên hub */
.lg-org { margin: 26px 0 0; background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 16px; padding: 20px 22px; box-shadow: 0 10px 30px -24px rgba(20, 22, 40, .3); }
.lg-org__t { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #9a9aa2; margin-bottom: 12px; }
.lg-org dl { display: grid; grid-template-columns: 160px 1fr; grid-gap: 9px 16px; gap: 9px 16px; margin: 0; }
.lg-org dt { font-size: 13px; color: #8a8a93; }
.lg-org dd { font-size: 13.5px; color: #26262c; margin: 0; font-weight: 500; }
.lg-org dd a { color: #131316; text-decoration: none; font-weight: 600; }
.lg-org__credit { font-size: 13px; line-height: 1.6; color: #55555c; margin: 0; }
.lg-org__credit a { color: #131316; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.lg-foot { margin-top: 44px; padding-top: 26px; border-top: 1px solid #e4e5ea; }
.lg-foot__nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 18px; }
.lg-foot__nav a { font-size: 13px; font-weight: 600; color: #55555e; text-decoration: none; }
.lg-foot__nav a:hover { color: #131316; }
.lg-foot__contact { font-size: 12.5px; line-height: 1.7; color: #8a8a93; margin-bottom: 12px; }
.lg-foot__contact a { color: #131316; text-decoration: none; font-weight: 600; }
.lg-foot__legal { font-size: 11.5px; line-height: 1.7; color: #a2a2ab; }
.lg-foot__legal b { color: #7a7a83; font-weight: 600; }

/* ── Back-to-top / liên hệ CTA cuối tài liệu ────────────────────────────── */
.lg-endcta {
  margin-top: 34px; text-align: center; background: #fff; border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 18px; padding: 26px 18px; box-shadow: 0 16px 40px -28px rgba(20, 22, 40, .3);
}
.lg-endcta h2 { font-size: 18px; font-weight: 800; margin: 0 0 8px; border: none; padding: 0; }
.lg-endcta p { font-size: 13.5px; color: #7a7a83; margin: 0 0 16px; }
.lg-endcta__btn {
  display: inline-block; text-decoration: none; background: linear-gradient(180deg, #131316 0%, #131316 100%);
  color: #fff; font-weight: 700; font-size: 14px; padding: 11px 26px; border-radius: 999px;
  box-shadow: 0 10px 24px -8px rgba(19, 19, 22, .55); transition: transform .15s, box-shadow .15s;
}
.lg-endcta__btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(19, 19, 22, .7); }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .lg-title, .lg-hero h1 { font-size: 24px; }
  .lg-toc ol { columns: 1; }
  .lg-cards { grid-template-columns: 1fr; }
  .lg-org dl { grid-template-columns: 1fr; gap: 3px 0; }
  .lg-org dt { margin-top: 8px; }
  .lg-head__actions .lg-head__link--tool { display: none; }
}