/* Trang chính sách (/dieu-khoan-su-dung, /chinh-sach-bao-mat, ...) - layout tài liệu riêng:
   hero gọn canh trái, cột trái danh sách chính sách + mục lục (dính khi cuộn), cột phải văn bản.
   Dùng biến màu của template (style.css) nên chế độ tối chạy theo. */

/* Bỏ dấu đầu dòng mặc định của trình duyệt (số và chấm tự vẽ bằng ::before) */
.policy-meta, .policy-menu-list, .policy-toc, .policy-content ul, .policy-content ol { list-style: none; margin-left: 0; }

/* ---------- Hero ---------- */
.policy-hero {
  background-color: var(--bg-surface);
  background-image: linear-gradient(var(--bg-subpage-overlay), var(--bg-subpage-overlay)), url('../../../images/v2/images/bg-sub-banner.webp');
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--bg-card-border);
  padding: 48px 0 40px;
}
.policy-title { font-size: 2.25rem; font-weight: 800; line-height: 1.2; color: var(--text-title); letter-spacing: -.01em; }
.policy-lead { margin-top: 12px; max-width: 760px; font-size: 1.0625rem; line-height: 1.65; color: var(--text-body); }
.policy-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.policy-meta li { padding: 5px 12px; border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid var(--bg-card-border); font-size: .8125rem; font-weight: 600; color: var(--text-muted); }

/* ---------- Bố cục 2 cột ---------- */
.policy-section { padding: 48px 0 96px; }
.policy-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 40px; align-items: start; }
.policy-aside { position: sticky; top: 96px; }

/* Danh sách chính sách */
.policy-menu { background: var(--bg-card); border: 1px solid var(--bg-card-border); border-radius: var(--radius-lg); padding: 18px 12px; box-shadow: var(--shadow-sm); }
/* Card cuộn bên trong khi danh sách + mục lục cao hơn màn hình; thanh cuộn mảnh, chỉ hiện khi rê chuột vào card */
.policy-menu { position: relative; max-height: calc(100vh - 116px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.policy-menu:hover, .policy-menu:focus-within { scrollbar-color: rgba(100, 116, 139, .45) transparent; }
.policy-menu::-webkit-scrollbar { width: 6px; }
.policy-menu::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
.policy-menu::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.policy-menu:hover::-webkit-scrollbar-thumb, .policy-menu:focus-within::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .45); }
.policy-menu-title { padding: 0 10px 10px; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.policy-menu-list > li > a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-md); font-size: .9375rem; font-weight: 600; color: var(--text-heading); transition: background var(--transition-fast), color var(--transition-fast); }
.policy-menu-list > li > a:hover { background: var(--bg-surface); color: var(--cz-blue-primary); }
.policy-menu-num { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--bg-surface); font-family: var(--font-mono); font-size: .75rem; color: var(--text-muted); }
.policy-menu-list > li.is-active > a { background: var(--cz-blue-soft); color: var(--cz-blue-primary); }
.policy-menu-list > li.is-active .policy-menu-num { background: var(--cz-blue-primary); color: #fff; }

/* Mục lục (dưới mục đang xem ở cột trái; trên mobile nằm trong khối thu gọn đầu văn bản) */
.policy-toc { margin: 6px 0 8px 23px; padding-left: 14px; border-left: 2px solid var(--bg-card-border); }
.policy-toc a { display: block; padding: 5px 8px; margin-left: -16px; padding-left: 14px; border-left: 2px solid transparent; font-size: .8125rem; line-height: 1.45; color: var(--text-muted); transition: color var(--transition-fast), border-color var(--transition-fast); }
.policy-toc a:hover { color: var(--cz-blue-primary); }
.policy-toc a.is-current { color: var(--cz-blue-primary); font-weight: 600; border-left-color: var(--cz-blue-primary); }

/* ---------- Văn bản ---------- */
/* Không đặt văn bản trong khung (nền, viền, padding 44/52px) để vùng đọc rộng hơn */
.policy-doc { min-width: 0; }
.policy-content { font-size: 1rem; line-height: 1.8; color: var(--text-body); }
.policy-content > * + * { margin-top: 14px; }
.policy-content h2 { display: flex; align-items: center; gap: 12px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--bg-card-border); font-size: 1.375rem; font-weight: 700; line-height: 1.35; color: var(--text-heading); scroll-margin-top: 100px; }
.policy-content > p:first-child + h2, .policy-content > h2:first-child { margin-top: 28px; }
.policy-num { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--cz-blue-soft); color: var(--cz-blue-primary); font-family: var(--font-mono); font-size: .9375rem; font-weight: 700; }
.policy-content h3 { margin-top: 24px; font-size: 1.0625rem; font-weight: 700; color: var(--text-heading); }
.policy-content h2 + * { margin-top: 16px; }
.policy-content strong { color: var(--text-heading); font-weight: 600; }
.policy-content a { color: var(--cz-blue-primary); font-weight: 600; }
.policy-content a:hover { text-decoration: underline; }
.policy-content code { font-family: var(--font-mono); font-size: .875em; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--bg-surface); }
.policy-content ul, .policy-content ol { padding-left: 0; }
.policy-content li + li { margin-top: 8px; }
.policy-content ul > li { position: relative; padding-left: 22px; }
.policy-content ul > li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--cz-blue-primary); opacity: .75; }
.policy-content ol { counter-reset: policy-step; }
.policy-content ol > li { position: relative; padding-left: 38px; counter-increment: policy-step; }
.policy-content ol > li::before { content: counter(policy-step); position: absolute; left: 0; top: .2em; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--bg-card-border); background: var(--bg-surface); font-family: var(--font-mono); font-size: .8125rem; font-weight: 700; line-height: 1; color: var(--cz-blue-primary); }

/* Bảng (cuộn ngang trên màn hẹp) */
.policy-table { overflow-x: auto; border: 1px solid var(--bg-card-border); border-radius: var(--radius-md); }
.policy-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9375rem; line-height: 1.6; }
.policy-table th { padding: 12px 16px; text-align: left; background: var(--bg-surface); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.policy-table td { padding: 12px 16px; border-top: 1px solid var(--bg-card-border); vertical-align: top; }
.policy-table td:first-child { font-weight: 600; color: var(--text-heading); white-space: nowrap; }

/* Khối liên hệ (_PolicyContact) */
.policy-contact { margin-top: 16px; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--bg-card-border); }
.policy-contact-name { font-weight: 700; color: var(--text-heading); }
.policy-contact dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-top: 12px; }
.policy-contact dt { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.policy-contact dd { margin: 2px 0 0; font-size: .9375rem; line-height: 1.55; color: var(--text-body); }

/* Trang trước / tiếp */
.policy-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--bg-card-border); }
.policy-pager-link { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid var(--bg-card-border); border-radius: var(--radius-md); font-weight: 700; color: var(--text-heading); transition: border-color var(--transition-fast), color var(--transition-fast); }
.policy-pager-link:hover { border-color: var(--cz-blue-primary); color: var(--cz-blue-primary); }
.policy-pager-link.is-next { text-align: right; grid-column: 2; }
.policy-pager-label { font-size: .75rem; font-weight: 600; color: var(--text-muted); }

/* Thanh màn hẹp (.policy-mbar): bám dưới header (cao 75px), 2 nút mở bảng xổ xuống. Desktop ẩn */
.policy-mbar { display: none; }
.policy-mbar [hidden], .policy-mbar-item[hidden] { display: none !important; }
/* Bảng xổ xuống canh theo cả thanh (.policy-mbar là khung định vị), không theo từng nút */
.policy-mbar-item { position: static; }
.policy-mbar-item.is-grow { flex: 1 1 auto; min-width: 0; }
.policy-mbar-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--bg-card-border); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-md); font-family: var(--font-body); font-size: .9375rem; font-weight: 700; color: var(--text-heading); white-space: nowrap; cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast); }
.policy-mbar-btn > svg:first-child { flex-shrink: 0; color: var(--text-muted); }
.policy-mbar-btn:hover, .policy-mbar-btn[aria-expanded="true"] { border-color: var(--cz-blue-primary); }
.policy-mbar-btn[aria-expanded="true"] > svg:first-child { color: var(--cz-blue-primary); }
.policy-mbar-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.policy-mbar-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform var(--transition-fast); }
.policy-mbar-btn[aria-expanded="true"] .policy-mbar-chevron { transform: rotate(180deg); }
.policy-mbar-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 5; width: 100%; max-height: min(60vh, 460px); overflow-y: auto; overscroll-behavior: contain; padding: 12px 8px; border: 1px solid var(--bg-card-border); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-lg); }
.policy-mbar-panel.is-right { left: auto; right: 0; width: min(320px, calc(100vw - 32px)); }
.policy-mbar-panel-title { padding: 2px 10px 8px; font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.policy-mbar-list { list-style: none; margin: 0; }
.policy-mbar-list a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-md); font-size: .9375rem; font-weight: 600; color: var(--text-heading); }
.policy-mbar-list a:hover { background: var(--bg-surface); color: var(--cz-blue-primary); }
.policy-mbar-list a.is-active { background: var(--cz-blue-soft); color: var(--cz-blue-primary); }
.policy-mbar-list a.is-active .policy-menu-num { background: var(--cz-blue-primary); color: #fff; }
.policy-mbar-panel .policy-toc { margin: 0 8px 4px 16px; }
.policy-mbar-panel .policy-toc a { font-size: .875rem; padding-top: 7px; padding-bottom: 7px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .policy-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .policy-aside { display: none; }
  .policy-mbar { position: sticky; top: 87px; z-index: 50; display: flex; gap: 10px; margin-bottom: 20px; }
  .policy-content h2 { scroll-margin-top: 160px; }
}
@media (max-width: 768px) {
  .policy-hero { padding: 32px 0 28px; }
  .policy-title { font-size: 1.875rem; }
  .policy-lead { font-size: 1rem; }
  .policy-section { padding: 24px 0 64px; }
  .policy-content { font-size: .9375rem; line-height: 1.75; }
  .policy-content h2 { font-size: 1.1875rem; margin-top: 32px; padding-top: 24px; }
  .policy-num { width: 30px; height: 30px; font-size: .875rem; }
  .policy-contact dl { grid-template-columns: minmax(0, 1fr); }
  /* Bảng thành từng thẻ, nhãn cột lấy từ data-label */
  .policy-table { overflow: visible; border: 0; }
  .policy-table table { min-width: 0; }
  .policy-table thead { display: none; }
  .policy-table tr { display: block; padding: 12px 14px; border: 1px solid var(--bg-card-border); border-radius: var(--radius-md); }
  .policy-table tr + tr { margin-top: 10px; }
  .policy-table td { display: block; padding: 3px 0; border: 0; white-space: normal !important; }
  .policy-table td:first-child::before { content: none; }
  .policy-table td::before { content: attr(data-label); display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
  .policy-pager { grid-template-columns: minmax(0, 1fr); }
  .policy-pager-link.is-next { grid-column: auto; }
}

@media print {
  .cz-header, .cz-footer, .policy-aside, .policy-mbar, .policy-pager, .cz-scroll-top { display: none !important; }
  .policy-hero { background: none; padding: 0 0 16px; }
  .policy-layout { display: block; }
}