/* ============================================================
   legal.css — trang văn bản dài (chinh-sach-bao-mat, dieu-khoan,
   so-do-trang)

   KHÁC hẳn nhịp các trang con khác: chữ ở đây CANH TRÁI, không canh giữa.
   Các trang giới thiệu/sản phẩm canh giữa được vì mỗi khối chỉ 2-3 câu;
   văn bản pháp lý dài hàng chục dòng, canh giữa thì mắt mất mốc mép trái
   và đọc rất mệt. Bề rộng khoá ~72ch — dài hơn thì mỗi lần xuống dòng mắt
   phải quét quá xa.
   ============================================================ */

.legal{padding-block:clamp(40px,5.5vw,80px) clamp(64px,9vw,120px);background:var(--bg);}
/* +18% (khách 2026-09-07: "tăng width những cụm text khoảng 15-20%") */
.legal__doc{max-width:85ch;margin-inline:auto;}

/* Ngày cập nhật: đứng ngay đầu văn bản vì với trang pháp lý, "bản này có
   từ bao giờ" là thông tin người đọc cần trước cả nội dung. */
/* (.legal__updated — dòng "Cập nhật lần cuối" — ĐÃ GỠ khỏi cả hai trang pháp
   lý ngày 2026-09-08 theo yêu cầu của khách. CSS giữ lại vì đây là dòng rất
   hay được gắn lại trên trang pháp lý; markup thì không còn chỗ nào dùng.
   ⚠️ Nó vốn gánh luôn cả KẺ NGANG và khoảng hở mở đầu tài liệu — gỡ nó là đoạn
   dẫn dính lên sát tiêu đề trang, nên khoảng hở đó nay chuyển sang
   .legal__doc > p:first-child ngay dưới đây. */
.legal__updated{
  font-family:var(--font-display);font-size:var(--fs-meta);font-weight:var(--fw-medium);
  letter-spacing:.1em;text-transform:uppercase;color:var(--gray-500);
  padding-bottom:clamp(16px,1.8vw,24px);margin-bottom:clamp(24px,3vw,40px);
  border-bottom:1px solid var(--gray-200);
}
/* Khoảng hở mở đầu tài liệu, thay phần margin mà .legal__updated từng gánh. */
.legal__doc > p:first-child{margin-top:clamp(8px,1.2vw,18px);}

.legal__doc h2{
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-heading);line-height:var(--lh-heading);color:var(--heading);
  margin:clamp(30px,3.6vw,52px) 0 clamp(10px,1.2vw,16px);
}
/* (`.legal__doc h2:first-of-type{margin-top:0}` ĐÃ GỠ 2026-09-08.
   Nó có từ hồi dòng "Cập nhật lần cuối" còn ở đầu tài liệu và tự mang theo
   24-40px margin dưới — tiêu đề đầu tiên vì thế không cần margin riêng. Gỡ
   dòng ngày tháng đi thì rule này biến thành lỗi: tiêu đề đầu dính sát đoạn
   dẫn ở trang Điều khoản (18px) và dính sát khối "Điểm chính" ở trang Bảo mật
   (khách báo "đang sát nhau quá").
   Nay mọi h2 dùng CÙNG một nhịp 30-52px, kể cả cái đầu tiên. */
.legal__doc h3{
  font-size:var(--fs-h4);color:var(--heading);
  margin:clamp(20px,2.2vw,30px) 0 8px;
}
.legal__doc p{
  font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--gray-700);
  margin:0 0 clamp(12px,1.4vw,18px);
}
.legal__doc ul{margin:0 0 clamp(12px,1.4vw,18px);padding:0;list-style:none;}
.legal__doc li{
  position:relative;padding-left:22px;margin-bottom:9px;
  font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--gray-700);
}
/* Dấu đầu dòng vẽ bằng ::before thay cho list-style: chấm mặc định của
   trình duyệt to và lệch baseline so với thang chữ của site. */
.legal__doc li::before{
  content:"";position:absolute;left:4px;top:.72em;
  width:5px;height:5px;background:var(--gold);
}
.legal__doc a{color:var(--gold-deep);text-decoration:underline;}
.legal__doc strong{color:var(--heading);font-weight:var(--fw-medium);}

/* Hộp lưu ý — ghi chú "bản thảo, cần rà soát pháp lý".
   Kẻ ngang MẢNH phía trên + nền xám nhạt, đúng thủ pháp đang dùng ở
   .m-story__steps, .pd-specs, .lh-place. (Bản đầu để một thanh navy dày
   bên trái — vừa lạc hệ, vừa là kiểu trang trí quen thuộc của giao diện
   máy sinh.) */
/* CÙNG KHUÔN với khối nhấn trong bài viết (khách chốt 2026-09-08: "giống phần
   highlight ở trang bài viết"). Số đo chép từ .na-prose blockquote trong
   news-article.css: gạch trái vàng 4px, nền kem, không bo góc, không kẻ trên.
   ⚠️ Sửa một bên thì sửa cả hai — đây là bản sao có chủ ý, vì trang pháp lý
   không nạp news-article.css. */
.legal__notice{
  margin:clamp(24px,3vw,40px) 0 0;
  padding:clamp(16px,1.8vw,24px) clamp(18px,2vw,28px);
  border-left:4px solid var(--gold);
  background:var(--gray-100);
}
/* Cỡ chữ theo blockquote của bài viết (--fs-lead) chứ không --fs-sm: khối nhấn
   phải ĐỌC TO HƠN dòng chảy quanh nó, đó là toàn bộ lý do nó tồn tại. */
.legal__notice p{margin:0;font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--heading);}
/* Nhãn "Lưu ý" dẫn dòng, thay cho việc dùng màu viền để báo hiệu. */
.legal__notice b{
  display:block;margin-bottom:6px;
  font-family:var(--font-display);font-size:var(--fs-micro);font-weight:var(--fw-medium);
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);
}

/* ---- Sơ đồ trang --------------------------------------------------- */
.legal__map{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3.4vw,52px);
  max-width:1000px;margin-inline:auto;
}
.legal__map section{border-top:1px solid var(--gray-200);padding-top:clamp(14px,1.6vw,22px);}
/* --fs-h3: đây là tiêu đề TỪNG NHÓM của sơ đồ trang, ngang vai .legal__doc h2.
   Trước để --fs-h4 nên một thẻ <h2> hiện ra nhỏ bằng <h3> ở trang khác.
   Tracking .08em GIỮ NGUYÊN — nhãn IN HOA giãn chữ là vai trò riêng, không
   đọc --ls-heading (âm) như tiêu đề chữ thường. */
.legal__map h2{
  font-size:var(--fs-h3);
  letter-spacing:.08em;color:var(--heading);margin:0 0 14px;
}
.legal__map ul{margin:0;padding:0;list-style:none;}
.legal__map li{padding-left:0;margin-bottom:10px;}
.legal__map li::before{content:none;}
.legal__map a{
  font-size:var(--fs-body);color:var(--gray-700);text-decoration:none;
  transition:color .25s var(--ease);
}
.legal__map a:hover{color:var(--gold-deep);}

@media (max-width:768px){
  .legal__map{grid-template-columns:1fr;gap:26px;}
}