/* Trang chính sách /chinh-sach/* (văn bản dài, đọc trên điện thoại). Dùng biến của he-thong.css, không thêm mã màu.
   HTML sinh bởi tools/dung-chinh-sach.mjs. Ghi chú: docs/50-trang-ban.md mục 10.
   Phông theo V2 (hợp đồng chung mục 2): mọi chữ là Hubot Sans; phông máy đơn cách (--f-may) CHỈ cho số mục, số đoạn
   (1., 3.2.). Nhãn (Chính sách, Mục lục, Tóm tắt, tên cột bảng, Bộ chính sách) dùng Hubot Sans 600 in hoa giãn chữ. */
.trang-cs .nhan, .bo-cs .nhan, .thanh-tren .chu-hieu span { font-family: var(--f-chu); font-weight: 600; letter-spacing: .08em; }

/* Dải bản nháp: chỉ hiện khi cau-hinh.js đặt lớp ban-nhap-cs lên <html> (trong <head>, nên không xô lệch). */
.dai-ban-nhap { display: none; background: var(--lua); color: var(--muc); border-bottom: 1px solid var(--vien-dam); }
.ban-nhap-cs .dai-ban-nhap { display: block; }
.dai-ban-nhap p { margin: 0; padding: 10px 0; font: 400 .875rem/1.55 var(--f-chu); }
.dai-ban-nhap strong { letter-spacing: .06em; }
.dau-ban-nhap { display: none; }
.ban-nhap-cs .dau-ban-nhap { display: inline-flex; }

/* Nhãn chờ chốt: gạch chân đứt cam đất (.cho-dien của he-thong.css), thêm nền vàng viền 40% để thấy ngay khi lướt (D51: vàng
   viền sáng hơn vàng mực V2 nên nâng độ đục từ .28 lên .4; chữ nâu trên nền này 10,59:1, gạch chân trên nền này 3,14:1). */
mark.nhan-cho {
  color: inherit;
  background: rgba(var(--vang-muc-rgb), .4);
  padding: 0 2px;
  border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Khung trang */
.trang-cs { padding: 28px 0 72px; }
.dau-cs { border-bottom: 1.5px solid var(--muc); padding-bottom: 20px; margin-bottom: 24px; }
.dau-cs-tren { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
/* em thay ch: từ D51 chữ số 0 lấy từ Bricolage nên đơn vị ch (bề rộng số 0) hẹp đi 8 tới 15%; số em giữ đúng bề rộng cũ đo theo số 0 của Hubot (400: .665em, 700: .696em) */
.dau-cs h1 { font-size: clamp(1.75rem, 1.25rem + 2.4vw, 2.75rem); letter-spacing: -.022em; margin: 10px 0 18px; max-width: 16.7em; }
.mo-dau p { font: 400 .9375rem/1.6 var(--f-chu); color: var(--muc-2); margin: 0 0 8px; max-width: 39.9em; }
.mo-dau p:last-child { margin-bottom: 0; }

/* Mục lục: điện thoại là ô gập ở đầu trang; máy tính là cột trái dính theo khi cuộn. */
.muc-luc { margin-bottom: 8px; scroll-margin-top: 12px; max-width: var(--doc); } /* bằng cột chữ: ở 700 tới 999px ô gập từng dài hơn văn bản bên dưới 48px (soát rs-khac) */
.muc-luc summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--tap); padding: 0 14px;
  font: 600 var(--c-nho)/1.3 var(--f-chu); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--vien-dam); border-radius: var(--bo);
  background: rgba(var(--muc-rgb), .03);
}
.muc-luc summary::-webkit-details-marker { display: none; }
.muc-luc summary .dem { margin-left: auto; color: var(--muc-2); letter-spacing: .04em; text-transform: none; }
.muc-luc summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--dong); }
.muc-luc details[open] summary::after { content: "\2212"; }
/* Điện thoại, máy tính bảng: mở mục lục thì danh sách trượt xuống 6px và rõ dần trong 220ms (V2 mục 9 hàng Accordion, HU10).
   Màn rộng mục lục luôn mở sẵn: không chạy gì. Giảm chuyển động: tắt. */
@media (max-width: 999px) and (prefers-reduced-motion: no-preference) {
  .muc-luc details[open] ol { animation: cs-mo-ra .22s ease-out both; }
  @keyframes cs-mo-ra { from { opacity: 0; transform: translateY(-6px); } }
}
.muc-luc ol { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1.5px solid var(--muc); }
.muc-luc li a {
  display: grid; grid-template-columns: 2.6em 1fr; gap: 6px;
  padding: 10px 0; min-height: 48px;
  border-bottom: 1px solid var(--vien);
  color: var(--muc); text-decoration: none; font-size: .9375rem; line-height: 1.4;
}
/* Dòng ngắn trong vùng chạm 48px: chữ và số mục nằm giữa dòng theo chiều dọc, số mục thẳng hàng chân chữ với tên mục. Trước
   đây chữ bám đỉnh ô, dưới chữ trống 20px rồi mới tới vạch kẻ (rõ nhất ở máy tính bảng ngang 1024, soát rs-khac). */
.muc-luc li a { align-items: baseline; align-content: center; }
.muc-luc li a:hover span:last-child { text-decoration: underline; }
.muc-luc .so-muc { font: 500 .8125rem/1.75 var(--f-may); color: var(--dong); }
.muc-luc a[aria-current="true"] { font-weight: 700; }
.muc-luc a[aria-current="true"] .so-muc { color: var(--muc); }

/* Văn bản */
.van-ban { max-width: var(--doc); overflow-wrap: break-word; }
.van-ban section { margin-top: 40px; scroll-margin-top: 12px; }
.van-ban h2 {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 1.375rem; line-height: 1.25;
  padding-top: 14px; margin: 0 0 16px;
  border-top: 1.5px solid var(--muc);
}
.van-ban h2 .so-muc { flex: 0 0 auto; font: 500 1rem/1 var(--f-may); color: var(--dong); }
.van-ban p, .van-ban li { line-height: 1.7; }
.van-ban p[id] { scroll-margin-top: 12px; }
.so-doan { font: 500 .875em/1 var(--f-may); color: var(--dong); }
.van-ban ul, .van-ban ol { margin: -4px 0 18px; padding-left: 1.35em; }
.van-ban li { margin: 0 0 8px; padding-left: 2px; }
.van-ban li::marker { color: var(--dong); }
.van-ban ol li::marker { font: 500 .875em var(--f-may); }

/* Tóm tắt: tờ giấy nổi, đọc trước phần điều khoản chi tiết */
.van-ban .tom-tat-cs { margin-top: 8px; padding: 4px 18px 6px; }
.van-ban .tom-tat-cs h2 { border-top: 0; font: 600 var(--c-nho)/1.4 var(--f-chu); letter-spacing: .08em; text-transform: uppercase; color: var(--muc-2); }
.van-ban .tom-tat-cs ul { margin-bottom: 8px; }
@media (min-width: 600px) { .van-ban .tom-tat-cs { padding: 8px 28px 10px; } }

/* Căn cứ: chữ nhỏ */
.van-ban .can-cu p, .van-ban .can-cu li { font-size: var(--c-phu); color: var(--muc-2); }

/* Bảng: máy tính là bảng; điện thoại xếp mỗi hàng thành một thẻ, ô nào cũng có nhãn cột (kể cả cột đầu) */
.bang-khung { margin: 4px 0 22px; }
.bang { width: 100%; border-collapse: collapse; font-size: var(--c-phu); line-height: 1.55; }
.bang th, .bang td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--vien); }
.bang thead th { font: 600 .75rem/1.4 var(--f-chu); letter-spacing: .07em; text-transform: uppercase; color: var(--muc-2); border-bottom: 1.5px solid var(--muc); }
.bang td:first-child { font-weight: 700; }
@media (max-width: 699px) {
  /* Ẩn hàng tiêu đề khỏi mắt (nhãn đã nằm trên từng ô), vẫn để trình đọc màn hình đọc được; không tràn ngang. */
  .bang thead, .bang thead tr, .bang thead th { display: block; }
  .bang thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bang, .bang tbody, .bang tr, .bang td { display: block; width: 100%; }
  /* Mỗi hàng thành một thẻ đọc như đoạn văn: chữ trong ô bằng chữ thân 16px (máy tính giữ 15px của bảng). Soát rs-khac. */
  .bang { border-top: 1.5px solid var(--muc); font-size: var(--c-than); }
  .bang tr { padding: 10px 0 12px; border-bottom: 1px solid var(--vien-dam); }
  /* Nhãn cột nổi bên trái (float trong phần lề trong), chữ của ô chảy liền một khối bên phải. Bản lưới cũ biến mỗi mẩu trong
     ô thành một ô lưới: ô có chữ xen nhãn chờ (mark) hay link thì mẩu sau rơi sang cột nhãn (soát rs-khac, khiếu nại mục 2). */
  .bang td { border: 0; padding: 3px 0 3px calc(7.5rem + 12px); display: flow-root; }
  .bang td::before { content: attr(data-nhan); float: left; width: 7.5rem; margin-left: calc(-7.5rem - 12px); font: 600 .6875rem/1.9 var(--f-chu); letter-spacing: .05em; text-transform: uppercase; color: var(--muc-2); overflow-wrap: break-word; }
}

/* Dưới 360px (máy 320): cột chữ cạnh nhãn chỉ còn khoảng 150px, email và câu dài bị bẻ vụn. Nhãn lên trên, chữ đủ khổ. */
@media (max-width: 359px) {
  .bang td { padding-left: 0; }
  .bang td::before { float: none; display: block; width: auto; margin: 0; line-height: 1.6; }
  .bang td + td { padding-top: 6px; }
}
/* Đầu trang ở 320px: "Đăng nhập" giữ một dòng, tên chương trình chia hai dòng cân nhau thay vì để "Chính" và "nhập" rơi lẻ. */
.thanh-tren .lk-dang-nhap { white-space: nowrap; flex: 0 0 auto; }
.thanh-tren .chu-hieu b { text-wrap: balance; }

/* Dưới 1000px đầu trang (tên chính sách, dấu BẢN NHÁP, vạch kẻ) bằng cột chữ như mục lục và văn bản bên dưới. Trước đây ở
   700 tới 999px nó rộng hơn 48px: dấu BẢN NHÁP và vạch kẻ thò ra ngoài mép phải của cột chữ (soát rs-khac). */
@media (max-width: 999px) { .dau-cs { max-width: var(--doc); } }

/* Về mục lục (chỉ điện thoại) */
.ve-muc-luc { margin: 4px 0 0; }
.ve-muc-luc a { display: inline-flex; align-items: center; min-height: 48px; font: 600 var(--c-nho)/1 var(--f-chu); letter-spacing: .04em; }

/* Bộ chính sách */
.bo-cs { margin-top: 56px; padding-top: 16px; border-top: 1.5px solid var(--muc); max-width: var(--doc); }
.bo-cs ol { list-style: none; margin: 12px 0 0; padding: 0; }
.bo-cs li a { display: flex; align-items: center; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--vien); text-decoration: none; }
.bo-cs li a:hover { text-decoration: underline; }
.bo-cs a[aria-current="page"] { color: var(--muc); font-weight: 700; }

/* Máy tính: mục lục cột trái, dính theo khi cuộn */
@media (min-width: 1000px) {
  .trang-cs { padding-top: 44px; }
  /* space-between: khung rộng hơn 250 + 64 + 42rem (từ khoảng 1100px) thì mục lục bám mép trái, văn bản bám mép phải của
     khung, cùng hai mép với tên chương trình và nút Đăng nhập ở đầu trang. Trước đây phần dư dồn hết sang phải, cả khối lệch
     trái 35px ở 1920 (soát rs-khac). Khung hẹp hơn thì như cũ (khe 64px). */
  .luoi-cs { display: grid; grid-template-columns: 250px minmax(0, var(--doc)); column-gap: 64px; justify-content: space-between; align-items: start; }
  .dau-cs { grid-column: 1 / -1; }
  .muc-luc { grid-column: 1; grid-row: 2 / span 2; align-self: stretch; margin: 0; }
  .muc-luc details { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; }
  .muc-luc summary { border: 0; background: none; padding: 0; min-height: 0; cursor: default; pointer-events: none; }
  .muc-luc summary::after { content: none; }
  .muc-luc li a { font-size: .875rem; padding: 7px 0; min-height: 0; }
  .van-ban, .bo-cs { grid-column: 2; }
  .van-ban section:first-child { margin-top: 0; }
  .ve-muc-luc { display: none; }
}
/* Máy tính bảng ngang (từ 1000px, con trỏ thô): mục lục cột trái vẫn là vùng chạm 48px (soát D38). Chuột thì giữ gọn. */
@media (min-width: 1000px) and (pointer: coarse) {
  .muc-luc li a { min-height: 48px; padding: 4px 0; }
}