/* ══════════════════════════════════════════════════════════════════════════════
   GIAO DIỆN CHUNG CHO 2 TRANG PHÁP LÝ: /privacy (Chính sách bảo mật) và
   /dieu-khoan (Điều khoản sử dụng).
   Tách ra file riêng để hai trang KHÔNG BAO GIỜ LỆCH NHAU - trước đây màu chữ
   ở nền sáng phải vá riêng từng trang, dễ vá chỗ này quên chỗ kia.
   ⚠️ Sửa file này phải BUMP ?v ở CẢ HAI trang.
   ══════════════════════════════════════════════════════════════════════════════ */
:root{--g:#3FD9A0;--b:#8FD2F7;--ink:#EAF1FB;--body:#BFD0E4;--muted:#8DA1BC;--bg:#0A1426;--surf:#122544;--surf2:#193458;--line:rgba(150,195,235,.16);--gold:#EAD08C;--grad:linear-gradient(135deg,#BCE6FC,#7FC8F2 38%,#6F9FE8 70%,#9A8FE6)}
/* Theme SÁNG - lấy đúng màu bạch kim của hệ thiết kế (style.css). Trước đây trang này CHỈ có bản Tối,
   nên người đang dùng nền sáng bấm vào Chính sách là như bước sang một website khác. */
/* Nền SÁNG: --b là màu chữ liên kết, chọn xanh đậm (#1A6BB0) để đọc rõ trên nền trắng. */
:root[data-theme="light"]{--b:#1A6BB0;--ink:#0C1D33;--body:#465A72;--muted:#5D6B80;--bg:#F6F8FB;
  --surf:#FFFFFF;--surf2:#F6F9FC;--line:rgba(22,52,96,.10);--gold:#8A6608;--g:#0A7A52;
  --grad:linear-gradient(135deg,#1E78C4,#2563EB 55%,#1A63B0);
  /* nút chính bản SÁNG: tím-lam đậm hơn để chữ trắng trên nút đạt chuẩn đọc (bản tối 4,26 - thiếu) */
  --cta:#1A63B0; --cta-hover:#2273C6;
  --nav-cta:#1A63B0; --nav-cta-fg:#FFFFFF;   /* nút trong thanh menu bản sáng: tím đậm hơn để chữ trắng đạt chuẩn */}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;color:var(--body);line-height:1.7;background:radial-gradient(720px 460px at 8% -6%,rgba(96,178,232,.09),transparent 60%),radial-gradient(680px 520px at 98% 108%,rgba(140,143,230,.07),transparent 60%),var(--bg)}
h1,h2,.brand{font-family:'Inter',sans-serif}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
a{color:var(--b);text-decoration:none;font-weight:600}
nav{position:sticky;top:0;z-index:5;background:#0C1A31;border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}   /* đầu trang sapphire ĐẶC #0C1A31 - khớp chính xác trang chủ */
:root[data-theme="light"] nav{background:#FFFFFF}
.th-btn{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:8px;
  width:32px;height:32px;font-size:15px;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.th-btn:hover{color:var(--ink);border-color:var(--b)}
nav .in .r{display:flex;align-items:center;gap:12px}
nav .in{max-width:820px;margin:0 auto;padding:0 clamp(24px,5vw,52px);height:60px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;font-size:18px}
/* Khung rộng ra 820 → 1180 (Thầy giao 27/07: "màn hình hẹp quá, chật, không đẹp").
   NHƯNG không kéo dòng chữ dài theo - văn bản pháp lý mà dòng 140 ký tự thì mắt lạc hàng,
   càng khó đọc hơn lúc hẹp. Học đúng cách Cửa 1 đã làm: MỞ RA rồi CHIA CỘT.
   Cột trái là mục lục dính theo cuộn (13 mục vốn đã có sẵn neo id), cột phải là nội dung -
   nhờ vậy dòng chữ vẫn giữ độ dài dễ đọc mà chữ thì lên được cỡ tử tế. */
.wrap{max-width:1180px;margin:0 auto;padding:34px clamp(24px,5vw,52px) 60px}
nav .in{max-width:1180px}
.note{background:rgba(244,206,94,.12);border:1px solid rgba(244,206,94,.32);color:#F6DD92;border-radius:12px;padding:13px 17px;font-size:15.5px;margin:14px 0 24px}
.note b{color:#FBE8B6}
/* ══ HAI TRANG, HAI SẮC (Thầy giao 27/07) ═══════════════════════════════════════════════
   Chính sách bảo mật và Điều khoản sử dụng trước đây giống hệt nhau về màu, mở ra là phải
   đọc tiêu đề mới biết đang ở trang nào. Nay mỗi trang mang một sắc riêng, lấy ngay trong
   bộ nhận diện chứ không bịa màu mới:
     · Bảo mật  → XANH LÁ (--g)  - sắc của che chở, giữ gìn
     · Điều khoản → XANH BĂNG (--b) - sắc của giao kèo, chuẩn mực
   Mọi chỗ dùng màu nhấn đều đọc qua --lg, nên đổi một dòng là cả trang đổi theo. */
body.lg-privacy{--lg:var(--g);  --lg-rgb:63,217,160}
body.lg-terms  {--lg:var(--b);  --lg-rgb:143,210,247}
:root[data-theme="light"] body.lg-privacy{--lg:#0A7A52; --lg-rgb:10,122,82}     /* nền sáng: hạ độ chói để chữ còn đọc được */
:root[data-theme="light"] body.lg-terms  {--lg:#1A6BB0; --lg-rgb:26,107,176}

/* ── Dải TIÊU ĐỀ dính dưới thanh đầu trang ──────────────────────────────────────────────
   Văn bản mười ba mục, cuộn sâu là quên mất mình đang đọc văn bản nào. Dải này ở lại,
   và khi đã dính thì tự thu gọn (ẩn dòng phụ, hạ cỡ tiêu đề) để không ăn chỗ đọc. */
.legal-head{position:sticky;top:60px;z-index:4;margin:0 -8px;padding:8px 8px 10px;
  background:var(--bg);transition:padding .22s var(--ease,ease),box-shadow .22s var(--ease,ease)}
.legal-head h1{margin-bottom:7px;transition:font-size .22s var(--ease,ease)}
.legal-head .sub{transition:opacity .18s ease,max-height .22s var(--ease,ease),margin .22s var(--ease,ease);overflow:hidden;max-height:90px}
.legal-head.is-stuck{padding-top:11px;padding-bottom:11px;
  box-shadow:0 14px 26px -20px rgba(0,0,0,.85),0 1px 0 rgba(var(--lg-rgb),.28)}
.legal-head.is-stuck h1{font-size:23px;letter-spacing:-.3px}
.legal-head.is-stuck .sub{opacity:0;max-height:0;margin:0}
@media (prefers-reduced-motion:reduce){ .legal-head,.legal-head h1,.legal-head .sub{transition:none} }

h1{font-size:38px;margin-bottom:7px;color:var(--ink);letter-spacing:-.7px;line-height:1.12;text-wrap:balance}
h1 .grad{color:var(--lg);-webkit-text-fill-color:currentColor;background:none}   /* tên trang mang đúng sắc của trang */
.sub{color:var(--muted);font-size:15.5px;margin-bottom:8px}
.card{background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:22px 26px;margin:16px 0;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.55);
  transition:background .2s var(--ease,ease),border-color .2s var(--ease,ease),box-shadow .2s var(--ease,ease)}
/* MỘT trạng thái active DUY NHẤT (Thầy chốt 27/07: "chỉ cho 1 mục có hover và active thôi").
   Trước đây có HAI lớp chồng nhau - .dang-doc (cuộn) và .dang-chon (bấm) - nằm trên hai mục
   khác nhau nên lúc nào cũng thấy hai mục sáng. Nay gộp làm một: dù tới bằng cuộn hay bằng
   bấm, mục đang xem là DUY NHẤT một mục, chuyển mục mới thì mục cũ tắt hẳn. */
.card.dang-doc{background:linear-gradient(180deg,rgba(var(--lg-rgb),.14),rgba(var(--lg-rgb),.04) 70%),var(--surf);
  border-color:rgba(var(--lg-rgb),.5);
  box-shadow:0 18px 44px -18px rgba(var(--lg-rgb),.44),inset 0 0 0 1px rgba(var(--lg-rgb),.14)}
.card.dang-doc h2 .n{color:var(--lg)}
/* Rê chuột lên thẻ nội dung → sáng nhẹ, cho thấy bấm vào được (bấm thì mục lục cũng chạy theo).
   KHÔNG đặt cursor:pointer - đây là văn bản để đọc và bôi đen, không phải cái nút. */
.card[id]:hover{border-color:rgba(var(--lg-rgb),.28);
  background:linear-gradient(180deg,rgba(var(--lg-rgb),.055),transparent 58%),var(--surf)}
.card[id].dang-doc:hover{background:linear-gradient(180deg,rgba(var(--lg-rgb),.18),rgba(var(--lg-rgb),.05) 70%),var(--surf);
  border-color:rgba(var(--lg-rgb),.58)}
@media (hover:none){ .card[id]:hover{border-color:var(--line);background:var(--surf)} }   /* cảm ứng: đừng dính hover sau khi chạm */
h2{font-size:21px;margin-bottom:10px;color:var(--ink)}
h2 .n{color:var(--lg);font-weight:800;margin-right:8px}
p,li{color:var(--body);font-size:16.5px;line-height:1.66}

/* ── Lưới THÂN TRANG: mục lục dính | nội dung ─────────────────────────────────────────── */
.legal-body{display:grid;grid-template-columns:minmax(0,258px) minmax(0,1fr);
  gap:clamp(24px,3vw,44px);align-items:start;margin-top:26px}
.legal-main{min-width:0}
.legal-main>.card:first-child{margin-top:0}
.legal-toc{position:sticky;top:var(--legal-top,124px);max-height:calc(100vh - var(--legal-top,124px) - 24px);overflow:auto;
  background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:16px 8px 16px 16px;
  scrollbar-width:thin}
.legal-toc-h{font-family:var(--head,'Inter',sans-serif);font-weight:800;font-size:12.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.legal-toc ol{list-style:none;margin:0;padding:0;counter-reset:muc}
.legal-toc li{margin:0}
.legal-toc a{display:flex;gap:9px;padding:7px 10px;border-radius:9px;text-decoration:none;
  color:var(--body);font-size:14.5px;line-height:1.45;transition:background .15s,color .15s}
.legal-toc a::before{counter-increment:muc;content:counter(muc) ".";flex:none;color:var(--muted);font-weight:700;min-width:21px;text-align:right}
/* Rê chuột → mảng mờ mang đúng sắc của trang (Thầy giao 27/07), không còn xám chung chung. */
.legal-toc a:hover{background:rgba(var(--lg-rgb),.14);color:var(--ink)}
/* MỘT mục active duy nhất (.now) - dù tới bằng cuộn hay bằng bấm. Chuyển mục mới thì mục cũ
   tắt hẳn, không bao giờ còn hai mục cùng sáng. Không vạch một cạnh (quy ước) - nền + viền đủ. */
.legal-toc a.now{background:rgba(var(--lg-rgb),.3);color:var(--ink);font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(var(--lg-rgb),.5)}
.legal-toc a.now::before{color:var(--lg)}
.legal-toc a.now:hover{background:rgba(var(--lg-rgb),.36)}   /* đang active mà rê vào thì vẫn phản hồi */
.legal-toc a:focus-visible{outline:2px solid var(--lg);outline-offset:1px}
/* Nhảy tới mục thì chừa chỗ cho thanh đầu trang dính, kẻo tiêu đề mục bị nó che mất. */
.card[id]{scroll-margin-top:var(--legal-top,124px)}

@media (max-width:900px){
  /* Hẹp lại thì mục lục thành một dải NGANG cuộn được, đặt trên nội dung - vẫn tra mục
     nhanh mà không ăn mất bề ngang vốn đã ít của phần chữ. */
  .legal-body{grid-template-columns:1fr;gap:18px}
  .legal-toc{position:static;max-height:none;padding:14px 16px}
  .legal-toc ol{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}
  .legal-toc ol::-webkit-scrollbar{display:none}
  .legal-toc a{white-space:nowrap;background:rgba(150,195,235,.06);border:1px solid var(--line)}
}
@media (max-width:480px){
  h1{font-size:31px}
  /* (cỡ thân bài mobile đặt ở khối cuối tệp - xem `.card p,.card li`) */
  h2{font-size:20px}
  .note,.sub{font-size:17px}
  .legal-toc a{font-size:16px}
}
.card b{color:var(--ink)}
ul{margin:6px 0 0 20px}
li{margin:4px 0}
.rights{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
@media(max-width:560px){.rights{grid-template-columns:1fr}}
.right{background:rgba(63,217,160,.1);border:1px solid rgba(63,217,160,.24);border-radius:10px;padding:9px 12px;font-size:14px;font-weight:600;color:#A6E6CC}
/* Nền SÁNG: màu mint nhạt trên trắng chỉ đạt 1,42:1 - dùng bản mint ĐẬM và số mục theo màu chữ chính. */
:root[data-theme="light"] .right{color:#0A6B4A;background:rgba(10,122,82,.07);border-color:rgba(10,122,82,.22)}
/* Nền SÁNG: khối ghi chú vốn dùng chữ vàng kem (đẹp trên nền tối) nhưng trên nền trắng thì
   chữ gần như trùng nền - đổi sang vàng đất đậm để đọc rõ (giống cách đã vá ở footer). */
:root[data-theme="light"] .note{color:#6E5106}
:root[data-theme="light"] .note b{color:#553F05}
:root[data-theme="light"] .n{color:var(--g)}
/* ── CHÂN TRANG = CHÂN TRANG TRANG CHỦ (Thầy chốt 26/07) ─────────────────────────────
   Trước: hai trang pháp lý chỉ có MỘT dòng chữ nhỏ canh giữa, khác hẳn mọi trang khác.
   Nay dùng đúng bộ ba cột chuẩn; câu "Dự thảo - chờ thẩm định pháp lý" vẫn giữ nguyên,
   chuyển thành dòng ghi chú .foot-note ngay trên dòng bản quyền.
   (Lưới .foot-* khai tại đây vì tokens.css chỉ lo MÀU chân trang, không lo bố cục.) */
footer{border-top:1px solid var(--line);color:var(--muted);font-size:14.5px;padding:46px 0 28px}
footer>.wrap{padding-top:0;padding-bottom:0}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:30px;margin-bottom:26px}
.foot-brand .brand{font-family:var(--head,'Inter',sans-serif);font-weight:800;font-size:20px;margin-bottom:10px}
.foot-brand p{font-size:14px;line-height:1.65;max-width:330px;text-align:justify;margin:0}
.foot-col h4{font-family:var(--head,'Inter',sans-serif);font-size:14px;font-weight:700;margin:0 0 13px;letter-spacing:.3px}
.foot-col a,.foot-col .fc-line{display:block;font-size:14px;line-height:1.5;margin-bottom:9px;font-weight:500;text-decoration:none}
.foot-note{font-size:13px;margin:0 0 16px;opacity:.85}
.foot-bottom{border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13.5px}
.foot-bottom a{font-weight:600;text-decoration:none}
@media(max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr;gap:24px} }
@media(max-width:480px){ .foot-grid{grid-template-columns:1fr;gap:24px}
  .foot-col a,.foot-col .fc-line,.foot-brand p{font-size:16px} .foot-bottom{font-size:15px} }
/* nền chân trang ĐỒNG BỘ trang chủ: gradient tối + hoa văn lưới chéo mờ (theme sáng: nền bạch kim) */
footer{position:relative;overflow:hidden;background:linear-gradient(180deg,#0E1B31,#0A1220 55%,#08111F)}
:root[data-theme="light"] footer{background:linear-gradient(180deg,#EEF3F9,#E6EEF7)}
footer::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:repeating-linear-gradient(60deg,var(--line) 0 1px,transparent 1px 27px),repeating-linear-gradient(-60deg,var(--line) 0 1px,transparent 1px 27px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 85%);mask-image:linear-gradient(180deg,transparent,#000 85%)}
footer .foot-in{position:relative}
/* - Đồng bộ Design System (ADR-0005) - */
.card{transition:transform .18s var(--ease-back),box-shadow .22s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.right{transition:transform .15s var(--ease-back)}
.right:hover{transform:translateY(-2px)}

/* ══ NHÃN DỰ THẢO ══ Văn bản pháp lý chưa qua thẩm định thì PHẢI nói rõ là dự thảo, không
   được tự nhận có hiệu lực. Dùng màu cảnh báo (không phải vàng như .note) để không ai đọc lướt
   qua. Viền đủ 4 cạnh theo quy ước UI của dự án. */
.draft{background:rgba(230,90,95,.10);border:1px solid rgba(230,90,95,.34);color:#F3B6B8;
  border-radius:12px;padding:12px 16px;font-size:14px;margin:14px 0 8px;font-weight:600}
.draft b{color:#FFD9DA}
:root[data-theme="light"] .draft{background:rgba(180,40,45,.07);border-color:rgba(180,40,45,.24);color:#8C2126}
:root[data-theme="light"] .draft b{color:#6B1418}
/* ══ Ô CHỜ ĐIỀN ══ Chỗ cần thông tin thật của doanh nghiệp mà AI KHÔNG được bịa (tên pháp lý,
   mã số doanh nghiệp, địa chỉ trụ sở). Để nổi bật để không bị công bố khi còn trống. */
.fill{background:rgba(244,206,94,.20);border:1px dashed rgba(244,206,94,.60);color:#F6DD92;
  border-radius:6px;padding:1px 7px;font-weight:700;font-size:.94em;white-space:nowrap}
:root[data-theme="light"] .fill{background:rgba(160,120,10,.10);border-color:rgba(160,120,10,.45);color:#6E5106}

/* ══ SÀN CỠ CHỮ TRÊN ĐIỆN THOẠI (chuẩn Thầy chốt 15/06/2026: mobile chữ TO hơn desktop) ══
 Đo thật ở 375px thấy nhiều chữ rơi xuống 10.5-13px - nhỏ hơn cả cỡ desktop. Khối này nâng
 SÀN cho chữ nhỏ nhất mà KHÔNG đảo diện mạo (chỉ +1.5 đến +2.5px mỗi bậc). */
@media (max-width:480px){
.foot-in{font-size:14px}
.card p,.card li{font-size:18px}   /* 27/07: 16 → 18 theo đúng thang mobile Thầy chốt (thân bài to hơn desktop).
   Luật này đứng ở khối mobile CŨ cuối tệp và có độ ưu tiên cao hơn `p,li` khai phía trên,
   nên phải sửa NGAY ĐÂY - thêm luật mới ở trên chỉ tổ bị nó đè, chữ vẫn 16px. */
/* Thanh đầu trang trên điện thoại: từ khi có thêm nút ngôn ngữ, 4 thứ (tên thương hiệu ·
   ngôn ngữ · sáng/tối · về trang chủ) chen nhau ở 375px làm chữ "Về trang chủ" gãy hai
   dòng chồng lên nhau. Thu gọn khoảng cách và cỡ chữ, giữ nút bấm đủ lớn để chạm. */
nav .in{padding:0 18px;gap:10px}
nav .in .r{gap:8px}
nav .in .r a{font-size:14px;white-space:nowrap}
.brand{font-size:16px}
.th-btn{width:30px;height:30px;font-size:14px}
.th-btn.lang-btn{padding:0 7px!important;font-size:11.5px!important}
}