/* Bảng giá /bang-gia theo thiết kế "Bàn làm việc" (ADR-0045, Đợt A Task 6; design-handoff/.../BangGia.dc.html). Trang do máy chủ dựng (backend/app/pricing.py),
   mọi con số đọc từ backend/app/pricing.json. Hai dạng: "Bảng giá sắp công bố" (published: false, mặc định) và bảng giá đầy đủ (bốn thẻ gói, dải Miễn phí, bảng
   so sánh). Nút "Sắp mở bán" luôn tắt tới khi có thanh toán thuê bao (Đợt C). Token ở tokens.css, nút/nhãn ở public-ui.css. */

.d-pricing-page { box-sizing: border-box; display: flex; flex-direction: column; gap: 56px; max-width: 1232px; margin: 0 auto; padding: 24px 16px 72px; color: var(--d-ink); font-family: var(--d-font-sans); }
.d-pricing-page h1, .d-pricing-page h2 { letter-spacing: 0; }  /* styles.css kéo sát chữ của mọi tiêu đề */
/* styles.css làm mờ mọi nút tắt (opacity .48): "Sắp mở bán" là lời báo, phải đọc rõ; viền đứt cho thấy nút chưa bấm được. */
.d-pricing-page .d-btn:disabled { border: 2px dashed var(--d-line-input); background: var(--d-surface); color: var(--d-ink-soft); cursor: not-allowed; opacity: 1; }

/* ---- Đầu trang và bốn thẻ gói ---- */
.d-pricing { display: flex; flex-direction: column; gap: 20px; }
.d-pricing__head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.d-pricing h1 { margin: 0; color: var(--d-ink); font: 700 calc(clamp(30px, 3.2vw, 38px) * var(--d-text-scale)) / 1.2 var(--d-font-display); }
.d-pricing__lead { max-width: 62ch; margin: 0; color: var(--d-ink-soft); font: 400 var(--d-fs-body) / var(--d-lh-body) var(--d-font-sans); }
.d-pricing__plans { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 12px; }
.d-plan { position: relative; display: flex; flex: 1 1 230px; flex-direction: column; gap: 12px; min-width: 0; padding: 22px 20px 20px; border: 2px solid var(--d-line); border-radius: var(--d-radius-xl);
  background: var(--d-surface); color: var(--d-ink); overflow-wrap: anywhere; }
.d-plan.is-featured { border-color: var(--d-brand); background: var(--d-brand); color: #fff; }
.d-plan__badge { position: absolute; top: -14px; left: 18px; margin: 0; padding: 4px 12px; border-radius: var(--d-radius-pill); background: var(--d-sun); color: var(--d-sun-ink); font: 700 var(--d-fs-badge) / 1.2 var(--d-font-sans); }
.d-plan__name { margin: 0; color: inherit; font: 700 var(--d-fs-label) / 1.3 var(--d-font-sans); }
.d-plan__price { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.d-plan__amount { font: 700 calc(32px * var(--d-text-scale)) / 1.1 var(--d-font-display); }
.d-plan__day { color: var(--d-muted); font: 400 var(--d-fs-caption) / 1.4 var(--d-font-sans); }
.d-plan__save { margin: 0; color: var(--d-brand-deep); font: 700 var(--d-fs-caption) / 1.4 var(--d-font-sans); }
.d-plan__fit { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--d-paper); font: 600 var(--d-fs-caption) / 1.45 var(--d-font-sans); }
.is-featured .d-plan__day, .is-featured .d-plan__save { color: #fff; }  /* chữ phụ nhạt của bản vẽ (#CDE8E0) chỉ 4,2:1 trên brand */
.is-featured .d-plan__fit { background: var(--d-brand-deep); }  /* bản vẽ: trắng 12% phủ lên brand, chữ trắng trên đó chỉ 4,3:1 */
.d-plan__features { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.d-plan__features li { display: flex; align-items: flex-start; gap: 10px; font: 400 var(--d-fs-caption) / 1.45 var(--d-font-sans); }
.d-plan__features li::before { content: "✓" / ""; display: flex; flex: 0 0 22px; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--d-brand-tint); color: var(--d-brand-deep); font: 700 13px / 1 var(--d-font-sans); }
.d-plan > .d-btn { margin-top: auto; }
.d-pricing__free { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 0; color: var(--d-ink-soft); font: 400 var(--d-fs-caption) / 1.5 var(--d-font-sans); }

/* ---- Bảng giá sắp công bố ---- */
.d-pricing--soon { align-items: center; gap: 16px; padding: 48px 0 24px; text-align: center; }
.d-pricing--soon .d-soon { margin: 0; }
.d-pricing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* ---- Bảng so sánh: <table> thật (scope col/row/rowgroup, ✓/— có tên cho trình đọc màn hình); cuộn ngang trong khung trên màn hẹp ---- */
.d-compare { display: flex; flex-direction: column; gap: 18px; }
.d-compare__title { margin: 0; text-align: center; color: var(--d-ink); font: 700 calc(clamp(28px, 3vw, 36px) * var(--d-text-scale)) / 1.2 var(--d-font-display); }
.d-compare__scroll { overflow-x: auto; padding: 10px 10px 0; border: 2px solid var(--d-line); border-radius: 26px; background: var(--d-surface); }
.d-compare__scroll:focus-visible { outline: 3px solid var(--d-brand); outline-offset: 3px; }
.d-compare__table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; color: var(--d-ink); }
.d-compare__table thead th { padding: 16px 10px; text-align: center; vertical-align: bottom; }
.d-compare__table thead .d-compare__what { width: 32%; padding: 16px 18px; text-align: left; color: var(--d-muted); font: 700 var(--d-fs-caption) / 1.3 var(--d-font-sans); }
.d-compare__plan { display: block; font: 700 var(--d-fs-line) / 1.3 var(--d-font-sans); }
.d-compare__price { display: block; font: 700 calc(22px * var(--d-text-scale)) / 1.2 var(--d-font-display); }
.d-compare__table thead th.is-featured { border-radius: 18px 18px 0 0; background: var(--d-brand); color: #fff; }
.d-compare__table td.is-featured { background: #F4FAF8; }  /* cột gói Nên chọn, theo bản vẽ */
.d-compare__table th[scope="rowgroup"] { padding: 14px 18px 8px; border-top: 2px solid var(--d-line); text-align: left; color: var(--d-brand); font: 700 calc(20px * var(--d-text-scale)) / 1.3 var(--d-font-display); }
.d-compare__table th[scope="row"] { padding: 12px 18px; text-align: left; font: 500 var(--d-fs-caption) / 1.4 var(--d-font-sans); }
.d-compare__table td { padding: 12px 10px; text-align: center; font: 600 var(--d-fs-caption) / 1.4 var(--d-font-sans); }
.d-has { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--d-brand-tint); color: var(--d-brand-deep); font-weight: 700; }
.d-lacks { color: var(--d-muted); }
.d-compare__actions td { padding: 14px 8px; }
.d-compare__actions td.is-featured { border-radius: 0 0 18px 18px; }
.d-compare__note { margin: 0; text-align: center; color: var(--d-muted); font: 400 var(--d-fs-caption) / 1.5 var(--d-font-sans); }

@media (max-width: 600px) {
  .d-pricing-page { gap: 40px; padding-top: 12px; }
  .d-pricing__actions > .d-btn { flex: 1 1 100%; }
}
@media (forced-colors: active) {
  .d-plan, .d-compare__scroll { border-color: CanvasText; }
  .d-plan__badge, .d-compare__table thead th.is-featured { border: 1px solid CanvasText; }
}