/* =====================================================================
   SOL · CSS BA TRANG PHÁP LÝ (Agent PHÁP LÝ)
   Dùng cho: /bao-mat/, /dieu-khoan/, /xoa-du-lieu/
   Trang đọc dài: cột chữ tối đa 780px, mục lục dính bên trái ở máy tính.
   Mọi lớp ở đây bắt đầu bằng "pl-".
   ===================================================================== */

/* ---------- đầu trang ---------- */
.pl-mo { padding-top: 26px; padding-bottom: 6px; }
.pl-mo__nho { font-size: 13px; letter-spacing: .34em; color: var(--vang-dam); margin: 24px 0 12px; text-transform: uppercase; }
.pl-mo h1 { font-family: var(--serif); font-weight: 600; font-size: 48px; line-height: 1.06; color: var(--muc); max-width: 860px; text-wrap: balance; }
.pl-mo__mo { font-size: 18px; color: var(--chu-2); line-height: 1.7; max-width: 780px; margin-top: 16px; }
.pl-tt { display: grid; gap: 6px; margin-top: 18px; max-width: 780px; font-size: 15.5px; line-height: 1.6; }
.pl-tt div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; }
.pl-tt dt { color: var(--chu-3); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding-top: 3px; }
.pl-tt dd { color: var(--muc); overflow-wrap: anywhere; }
.pl-tt a, .pl-than a { color: var(--vang-dam); text-decoration: underline; text-underline-offset: 3px; }
.pl-tt a:hover, .pl-than a:hover { color: var(--muc); }
.pl-sang-en { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 16px; padding: 9px 18px; border: 1px solid var(--vang); border-radius: 30px; background: #fff; color: var(--muc); font-size: 15.5px; font-weight: 600; }
.pl-sang-en:hover { background: var(--muc); border-color: var(--muc); color: var(--kem); }
.pl-sang-en .ic { width: 18px; height: 18px; color: var(--vang); }

/* ---------- hai khu: mục lục + thân ---------- */
.pl-2khu { display: grid; grid-template-columns: 270px minmax(0, 780px); gap: 52px; align-items: start; padding-top: 30px; padding-bottom: 32px; }
.pl-ml { position: sticky; top: 92px; max-height: calc(100vh - 112px); overflow-y: auto; background: #fff; border: 1px solid var(--vang-vien); border-radius: var(--bo); padding: 16px 10px 12px; }
.pl-ml__nhan { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--chu-3); padding: 0 10px 6px; }
.pl-ml ol { list-style: none; margin: 0; padding: 0; }
.pl-ml ol a { display: block; padding: 7px 10px; border-radius: 10px; color: var(--muc); font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.pl-ml ol a:hover { background: var(--kem); color: var(--vang-dam); }
.pl-ml__en { display: flex; align-items: center; min-height: 44px; margin: 8px 4px 0; padding: 8px 12px; border-top: 1px solid var(--vang-vien); color: var(--vang-dam); font-size: 15px; font-weight: 600; }
.pl-ml__en:hover { color: var(--muc); }

/* ---------- thân bài ---------- */
.pl-than { min-width: 0; }
.pl-muc { scroll-margin-top: 92px; padding-bottom: 6px; }
.pl-muc + .pl-muc { margin-top: 34px; }
.pl-muc h2, .pl-en > h2 { font-family: var(--serif); font-weight: 600; font-size: 31px; line-height: 1.15; color: var(--muc); margin-bottom: 12px; text-wrap: balance; }
.pl-en .pl-muc > h3 { font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.18; color: var(--muc); margin-bottom: 12px; text-wrap: balance; }
.pl-so { color: var(--vang); margin-right: 4px; }
.pl-muc h3, .pl-en .pl-muc h4 { font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--muc); margin: 18px 0 6px; line-height: 1.4; }
.pl-than p { font-size: 16.5px; color: var(--chu-2); line-height: 1.78; margin-bottom: 12px; }
.pl-than p b, .pl-than li b { color: var(--muc); font-weight: 600; }
.pl-cham, .pl-buoc { margin: 0 0 12px; padding: 0; list-style: none; }
.pl-cham li, .pl-buoc li { position: relative; padding-left: 24px; font-size: 16.5px; color: var(--chu-2); line-height: 1.72; margin-bottom: 8px; overflow-wrap: anywhere; }
.pl-cham li::before { content: ''; position: absolute; left: 6px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--vang); }
.pl-buoc { counter-reset: plb; }
.pl-buoc li { counter-increment: plb; padding-left: 44px; min-height: 30px; margin-bottom: 12px; }
.pl-buoc li::before { content: counter(plb); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--vang-nen); color: var(--vang-dam); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.pl-ghi { font-size: 15px !important; color: var(--chu-2); background: var(--kem-sang); border-left: 3px solid var(--vang); border-radius: 0 10px 10px 0; padding: 10px 14px; }

/* ---------- nút gửi yêu cầu ---------- */
.pl-nut { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 14px; }
.pl-than .pl-nut a { text-decoration: none; min-height: 48px; padding: 12px 20px; font-size: 15.5px; }
.pl-than .pl-nut .nut { color: #fff; }
.pl-than .pl-nut .nut-vien { color: var(--muc); background: #fff; }
.pl-than .pl-nut .nut-vien:hover { background: var(--muc); color: var(--kem); }
.pl-nut .ic { width: 18px; height: 18px; }

/* ---------- khối liên hệ ---------- */
.pl-lh { font-style: normal; background: #fff; border: 1px solid var(--vang-vien); border-radius: var(--bo); padding: 18px 22px 8px; margin: 6px 0 12px; }
.pl-than .pl-lh p { font-size: 16px; margin-bottom: 10px; overflow-wrap: anywhere; }

/* ---------- bảng tóm tắt ---------- */
.pl-bang-khung { background: #fff; border: 1px solid var(--vang-vien); border-radius: var(--bo); overflow: hidden; margin: 4px 0 14px; }
.pl-bang { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14.5px; line-height: 1.55; }
.pl-bang caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pl-bang thead th { background: var(--muc); color: var(--kem); text-align: left; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 12px 14px; }
.pl-bang tbody th, .pl-bang td { padding: 13px 14px; vertical-align: top; text-align: left; border-top: 1px solid var(--vang-vien); color: var(--chu-2); overflow-wrap: anywhere; }
.pl-bang tbody th { color: var(--muc); font-weight: 600; width: 30%; }
.pl-bang thead th:first-child { width: 30%; }

/* ---------- link chéo ---------- */
.pl-cheo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--vang-vien); }
.pl-than .pl-cheo a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px; border: 1px solid var(--vang-vien); border-radius: 30px; background: #fff; color: var(--muc); font-size: 15px; font-weight: 500; text-decoration: none; }
.pl-than .pl-cheo a:hover { border-color: var(--vang); color: var(--vang-dam); }
.pl-cheo .ic { width: 16px; height: 16px; color: var(--vang); }

/* ---------- bản tiếng Anh ---------- */
.pl-en { margin-top: 48px; padding-top: 6px; border-top: 2px solid var(--vang); scroll-margin-top: 84px; }
.pl-en .pl-mo__nho { margin-top: 22px; }
.pl-en > h2 { font-size: 36px; line-height: 1.08; margin-bottom: 0; }
.pl-en .pl-tt { margin-bottom: 16px; }
.pl-ml-en { background: #fff; border: 1px solid var(--vang-vien); border-radius: var(--bo); padding: 16px 12px 10px; margin: 16px 0 30px; }
.pl-ml-en ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 12px; }
.pl-than .pl-ml-en a { display: block; padding: 7px 10px; border-radius: 10px; color: var(--muc); font-size: 14.5px; font-weight: 500; line-height: 1.35; text-decoration: none; break-inside: avoid; }
.pl-than .pl-ml-en a:hover { background: var(--kem); color: var(--vang-dam); }

/* ---------- máy tính bảng ---------- */
@media (max-width: 1024px) {
  .pl-2khu { grid-template-columns: minmax(0, 780px); gap: 22px; }
  .pl-ml { position: static; max-height: none; overflow: visible; }
  .pl-ml ol { columns: 2; column-gap: 12px; }
  .pl-ml ol li { break-inside: avoid; }
}

/* ---------- điện thoại ---------- */
@media (max-width: 768px) {
  .pl-mo { padding-top: 18px; }
  .pl-mo h1 { font-size: 36px; }
  .pl-mo__mo { font-size: 16.5px; }
  .pl-tt div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pl-2khu { padding-top: 20px; padding-bottom: 28px; }
  .pl-ml ol, .pl-ml-en ol { columns: 1; }
  .pl-ml ol a, .pl-than .pl-ml-en a { font-size: 15.5px; padding: 11px 10px; }
  .pl-muc + .pl-muc { margin-top: 28px; }
  .pl-muc h2 { font-size: 26px; }
  .pl-en .pl-muc > h3 { font-size: 24px; }
  .pl-en { margin-top: 28px; }
  .pl-en > h2 { font-size: 32px; }
  .pl-than p, .pl-cham li, .pl-buoc li { font-size: 16px; }
  .pl-nut a { flex: 1 1 100%; }
  .pl-lh { padding: 16px 16px 6px; }

  /* bảng thành thẻ dọc */
  .pl-bang-khung { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .pl-bang, .pl-bang tbody, .pl-bang tr, .pl-bang tbody th, .pl-bang td { display: block; width: auto; }
  .pl-bang thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pl-bang { font-size: 16px; }
  .pl-bang tr { background: #fff; border: 1px solid var(--vang-vien); border-radius: var(--bo); padding: 14px 16px 6px; margin-bottom: 12px; }
  .pl-bang tbody th, .pl-bang td { border: 0; padding: 0 0 10px; width: auto; }
  .pl-bang tbody th::before, .pl-bang td::before { content: attr(data-nhan); display: block; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--vang-dam); margin-bottom: 2px; }
}