/* plans.css — giao diện chọn gói (Gói cơ bản / Gói trọn bộ) và hộp thanh toán.
   File riêng, không đụng vào style.css. Được nạp ở index.html, xem-truoc.html, tai-lieu.html. */

/* Thẻ chọn gói (trang sản phẩm) */
.plans{display:grid;gap:10px;margin:18px 0 26px}
.plan{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:#fff;border:1.5px solid var(--paper-line);border-radius:8px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.plan input[type=radio]{margin:4px 0 0;accent-color:#1B2340;flex-shrink:0;width:auto}
.plan.sel{border-color:var(--ink-navy);box-shadow:0 0 0 3px rgba(27,35,64,.08)}
.plan .pn{font-family:var(--font-card);font-weight:700;color:var(--ink-navy);font-size:15px;line-height:1.3}
.plan .ps{font-size:12.5px;color:var(--text-soft);margin-top:3px;line-height:1.45}
.plan .pp{margin-left:auto;align-self:center;font-family:var(--font-card);font-weight:700;color:var(--price);font-size:16px;white-space:nowrap;padding-left:8px}
.plan .tag{font-size:10.5px;font-weight:700;background:var(--amber);color:var(--ink-navy-deep);padding:2px 8px;border-radius:20px;margin-left:8px;vertical-align:2px;white-space:nowrap}
/* Hàng đầu trang sản phẩm khi bán 2 gói: tên bộ bên trái, nút Mua ngay bên phải cùng hàng */
.head-split{display:flex;align-items:center;justify-content:space-between;gap:20px}
.head-split .head-main{flex:1;min-width:0}
.head-split button.buy-big{flex-shrink:0;font-size:15px;white-space:nowrap}

/* Nhãn "Có trong gói" / "Chỉ có trong gói trọn bộ" ở từng tài liệu */
.doc-tag{display:table;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;margin:5px 0 0;white-space:nowrap}
.doc-tag.in{background:#E7F3E4;color:#2E6B2A}
.doc-tag.out{background:#EEE9DA;color:#7A6F55}

/* Chọn gói ngay trong hộp thanh toán (trang chủ, trang từng tài liệu) */
.plan-mini{display:grid;gap:8px;margin:2px 0 12px}
.plan-mini .plan{padding:10px 12px}
.plan-mini input[type=radio]{width:auto !important;padding:0 !important;margin:4px 0 0 !important}
.plan-mini .pn{font-size:13.5px}
.plan-mini .pp{font-size:13.5px}
.plan-mini .ps{font-size:12px}

@media (max-width:560px){
  .head-split{flex-direction:column;align-items:stretch;gap:12px}
  .head-split button.buy-big{width:100%}
}
@media (max-width:480px){
  .plan{padding:12px 12px;gap:10px}
  .plan .pp{font-size:14.5px}
  .plan .tag{display:inline-block;margin:4px 0 0}
}

/* Hộp thanh toán: tiêu đề căn giữa + cách đều phía dưới; bỏ khoảng trống thừa dưới ô email;
   giá nằm giữa cạnh trên và cạnh dưới của hộp tóm tắt; tên gói xuống dòng trong ngoặc */
.modal #modal-title{text-align:center;margin-bottom:18px}
.modal .order-sum{align-items:center}
.order-sum .os-plan{display:block;font-weight:600;font-size:12.5px;color:var(--text-soft);margin-top:2px}
.modal input#email-input{margin-bottom:0}
.modal .send-to{margin:8px 2px 0;min-height:0}
.modal .send-to:empty,.modal .hint:empty{display:none}
.modal .hint{min-height:0;margin-top:6px}
/* Khoảng cách vừa phải giữa ô email và hàng nút Huỷ / Thanh toán */
.modal .actions{margin-top:20px}
.modal .send-to:not(:empty) + .hint:empty + .actions,.modal .send-to:not(:empty) ~ .actions{margin-top:16px}
/* Dòng "Tài liệu số, giao qua email…" nằm giữa khoảng trống từ hàng nút đến mép dưới hộp (trên = dưới = 20px) */
.modal .policy-note{margin-top:20px;margin-bottom:0}
.modal:has(.policy-note){padding-bottom:20px}
/* Nút "Thanh toán": nền cam giống nút "Mua ngay" để nổi bật */
.modal .actions .confirm{background:var(--amber);color:var(--ink-navy-deep);box-shadow:0 2px 8px rgba(232,163,61,.45)}
.modal .actions .confirm:hover:not(:disabled){background:var(--amber-deep);color:#fff}

/* ===== Trang chính sách: bỏ font chữ đơn cách (mono) ở nhãn nhỏ, thu nhỏ tiêu đề =====
   Nhãn "Chính sách cửa hàng", "Mục lục", số thứ tự 01–05 và nhãn liên hệ dùng font Inter (cùng font nội dung) cho gần gũi hơn. */
.pol-eyebrow,.pol-toc-title,.pol-contact small{font-family:'Inter',system-ui,sans-serif;font-weight:600;letter-spacing:.08em}
.pol-eyebrow{font-size:12px}
.pol-toc-title{font-size:11.5px}
.pol-toc a em{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:0}
/* Tiêu đề nhỏ lại một chút */
.pol-hero h1{font-size:clamp(25px,3.7vw,34px)}
.pol-sec h2{font-size:20px}
@media (max-width:860px){ .pol-sec h2{font-size:18px} }

/* Nhãn "Trang N" của trang tài liệu dùng font Inter (nhãn "VÌ SAO CHỌN…", "CÂU HỎI THƯỜNG GẶP…" và dấu "+" ở trang chủ giữ font cũ) */
.page-num-badge{font-family:'Inter',system-ui,sans-serif;font-weight:600;letter-spacing:0;font-size:11px}