/* ==========================================================================
   Vatlieuso — legal.css
   Dùng chung cho: Chính sách bảo mật, Điều khoản, Disclaimer, Cookie
   ========================================================================== */

/* ------ Legal page header ---------------------------------- */
.vls-legal-head {
  background: linear-gradient(180deg, #0D1832 0%, #162848 100%);
  padding: 48px 0 44px;
  border-bottom: 2px solid rgba(255,255,255,.06);
}
.vls-legal-head__bc {
  font-size: var(--fs-12);
  color: rgba(255,255,255,.4);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vls-legal-head__bc a { color: rgba(255,255,255,.5); transition: color var(--dur-fast); }
.vls-legal-head__bc a:hover { color: #fff; }
.vls-legal-head__bc strong { color: rgba(255,255,255,.8); font-weight: 600; }
.vls-legal-head__bc span { color: rgba(255,255,255,.2); }

.vls-legal-head__top {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.vls-legal-head__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,193,7,.12);
  border: 1px solid rgba(255,193,7,.3);
  color: #FFC107;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.vls-legal-head__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 var(--sp-3);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.vls-legal-head__sub {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: rgba(255,255,255,.5);
  margin: 0;
  max-width: 600px;
  line-height: 1.65;
}
.vls-legal-head__updated {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: rgba(255,255,255,.35);
  margin-top: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.vls-legal-head__updated strong { color: rgba(255,255,255,.6); }

/* ------ Body layout ---------------------------------------- */
.vls-legal-body {
  padding: 64px 0 80px;
  background: var(--bg-body, #F7F7F5);
}
.vls-legal-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
}

/* ------ TOC sidebar ---------------------------------------- */
.vls-legal-toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  overflow: hidden;
}
.vls-legal-toc__head {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border-1);
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.vls-legal-toc__list {
  list-style: none;
  margin: 0;
  padding: var(--sp-2) 0;
}
.vls-legal-toc__list li { }
.vls-legal-toc__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--fg-2);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.vls-legal-toc__link:hover { color: var(--fg-1); background: var(--bg-sunken); }
.vls-legal-toc__link.is-active {
  color: #1F3355;
  border-left-color: #1F3355;
  background: #ECEFF4;
  font-weight: 600;
}
.vls-legal-toc__num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  width: 18px;
  flex-shrink: 0;
}

/* ------ Article / prose content ---------------------------- */
.vls-legal-article {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: var(--sp-10) var(--sp-10);
}

.vls-legal-section {
  padding-top: var(--sp-8);
  margin-bottom: var(--sp-8);
  border-bottom: 1px solid var(--border-1);
}
.vls-legal-section:first-child { padding-top: 0; }
.vls-legal-section:last-child { border-bottom: none; margin-bottom: 0; }

.vls-legal-section__num {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}
.vls-legal-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
  letter-spacing: -.01em;
  scroll-margin-top: calc(var(--header-h) + 32px);
}
.vls-legal-article h3 {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: 700;
  color: var(--fg-1);
  margin: var(--sp-6) 0 var(--sp-3);
}
.vls-legal-article p {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--fg-2);
  line-height: 1.75;
  margin: 0 0 var(--sp-4);
}
.vls-legal-article ul,
.vls-legal-article ol {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--fg-2);
  line-height: 1.75;
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-6);
}
.vls-legal-article li { margin-bottom: var(--sp-2); }
.vls-legal-article strong { color: var(--fg-1); font-weight: 600; }
.vls-legal-article a { color: var(--accent); text-decoration: underline; }
.vls-legal-article a:hover { color: var(--accent-hover); }

/* Highlight / callout boxes */
.vls-legal-box {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-3);
  margin: var(--sp-5) 0;
}
.vls-legal-box--info {
  background: #ECEFF4;
  border: 1px solid #D5DBE5;
}
.vls-legal-box--info i[data-lucide] { color: #1F3355; flex-shrink: 0; margin-top: 2px; }
.vls-legal-box--warn {
  background: #FFF4D9;
  border: 1px solid rgba(244,161,0,.25);
}
.vls-legal-box--warn i[data-lucide] { color: #F4A100; flex-shrink: 0; margin-top: 2px; }
.vls-legal-box--danger {
  background: #F8E5E1;
  border: 1px solid rgba(200,50,30,.2);
}
.vls-legal-box--danger i[data-lucide] { color: #C8321E; flex-shrink: 0; margin-top: 2px; }
.vls-legal-box__body {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  color: var(--fg-1);
  line-height: 1.6;
}
.vls-legal-box__body strong { font-weight: 700; }

/* Data table */
.vls-legal-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-13);
  margin: var(--sp-4) 0 var(--sp-6);
}
.vls-legal-table th {
  background: var(--bg-sunken);
  color: var(--fg-1);
  font-weight: 700;
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--border-1);
  font-size: var(--fs-12);
  letter-spacing: .04em;
}
.vls-legal-table td {
  padding: 10px 14px;
  border: 1px solid var(--border-1);
  color: var(--fg-2);
  vertical-align: top;
  line-height: 1.6;
}
.vls-legal-table tr:nth-child(even) td { background: var(--bg-sunken); }

/* Contact CTA strip */
.vls-legal-cta {
  background: linear-gradient(135deg, #0D1832 0%, #1F3355 100%);
  border-radius: var(--r-3);
  padding: var(--sp-8);
  margin-top: var(--sp-10);
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.vls-legal-cta__icon {
  width: 52px;
  height: 52px;
  background: rgba(255,193,7,.15);
  border-radius: var(--r-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFC107;
  flex-shrink: 0;
}
/* Box nền tối -> ép chữ sáng, tránh bị .vls-legal-article h3/p ghi đè màu tối */
.vls-legal-cta .vls-legal-cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 700;
  color: #fff !important;
  margin: 0 0 5px;
  line-height: 1.35;
}
.vls-legal-cta .vls-legal-cta__sub {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: rgba(255,255,255,.85) !important;
  line-height: 1.6;
  margin: 0;
}
.vls-legal-cta__btn {
  margin-left: auto;
  flex-shrink: 0;
}

/* ------ Responsive ----------------------------------------- */
@media (max-width: 1100px) {
  .vls-legal-layout { grid-template-columns: 200px 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  .vls-legal-layout { grid-template-columns: 1fr; }
  .vls-legal-toc { position: static; }
  .vls-legal-article { padding: var(--sp-6); }
  .vls-legal-cta { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
  .vls-legal-cta__btn { margin-left: 0; }
}
@media (max-width: 600px) {
  .vls-legal-body { padding: 40px 0 60px; }
  .vls-legal-article { padding: var(--sp-5); }
  .vls-legal-head { padding: 32px 0 28px; }
}