/* deu-pricing.css — bảng giá NAVS Deutsch (public/deu/pricing.php): bảng so sánh thêm cột MIỄN PHÍ (5 cột).
   Khung .pp3 / .pp3-table lấy nguyên từ learn-hub.css của NAVS (4 cột); tệp này chỉ đổi lưới và tông cột miễn phí. Đợt 1 audit 16/10/2026. */
.pp3-table--free .pp3-tr { grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); }
.pp3-table--free .pp3-col--free { color: var(--color-muted); }
.pp3-table--free .pp3-tr--head .pp3-col--free { color: var(--color-ink); }
@media (max-width: 760px) {
  .pp3-table--free .pp3-tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pp3-table--free .pp3-tr > span { padding: 10px 8px; font-size: 12.5px; }
  .pp3-table--free .pp3-tr > [role="rowheader"] { grid-column: 1 / -1; padding: 12px 10px 2px; font-size: 13.5px; }
  .pp3-table--free .pp3-tr--head > span { font-size: 13px; }
  .pp3-table--free .pp3-tr--head small { font-size: 11px; }
}

/* Bảng so sánh #so-sanh — đích của link "Xem gói kèm khoá lẻ" ở Cửa hàng (/cua-hang): tiêu đề không nằm dưới thanh trên cố định. */
#so-sanh { scroll-margin-top: 88px; }

/* ═══ Giao diện 06/11/2026 (chủ: "quá xấu, thiếu hình minh hoạ") — làm theo ảnh mẫu vẽ bằng ShopAIKey. Lớp .dp-* chỉ có ở trang này;
   khung .pp3-* của learn-hub.css giữ nguyên để JS mua / nâng cấp chạy như cũ. Hình: public/assets/brand-deu/pricing/*.webp (nền trong suốt). */

/* Dải đầu: chữ trái, hình phải; hình ngồi sát mép dưới để thẻ gói đè lên vừa chân bàn */
.dp-band { --lv-band-pb: 96px; }
.dp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); align-items: end; gap: 28px; }
.dp-hero__copy { padding-bottom: 64px; }
.dp-hero .hb-title { font-size: 48px; }
.dp-hero .lv-band__context { max-width: 520px; font-size: 16px; line-height: 1.6; }
.dp-hero__art { position: relative; margin: 0 0 -34px; }
/* Quầng sáng vàng nhạt sau hình + bóng đổ dưới hình: hình nằm trên nền đỏ đô mà không như dán đè */
.dp-hero__art::before { content: ""; position: absolute; inset: 4% 6% 10%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-brand-gold) 24%, transparent), transparent); }
.dp-hero__art img { position: relative; display: block; width: 100%; height: auto;
  filter: drop-shadow(0 22px 26px color-mix(in srgb, var(--lv-shade) 55%, transparent)); }
.dp-now { display: inline-flex; flex-direction: column; gap: 2px; margin-top: 18px; padding: 12px 16px; border-radius: 14px; }
.dp-now span, .dp-now small { font-size: 13px; color: var(--lv-on-3); }
.dp-now b { font-size: 18px; font-weight: 750; letter-spacing: -.01em; color: var(--lv-on); }
.dp-body { margin-top: -64px; }

/* Thẻ gói (.dp-card*, .dp-status): xem khối "Thẻ gói" cuối tệp. */

/* Ba bước mua */
.dp-steps-sec { margin-top: 44px; }
.dp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.dp-step { display: flex; flex-direction: column; gap: 16px; padding: 22px 22px 24px; border-radius: 18px; }
.dp-step__art { display: flex; align-items: center; height: 96px; }
.dp-step__art img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.dp-step h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 750; letter-spacing: -.01em; color: var(--lv-ink); }
.dp-step__n { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lv-wash); color: var(--lv-brand-fg); font-size: 14px; font-weight: 800; }
.dp-step p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--lv-text); }

/* Bảng so sánh: cột gói căn giữa, dấu ✓ vẽ bằng CSS, cột Premium tô nhạt */
.dp-table .pp3-tr > [role="cell"], .dp-table .pp3-tr--head > [role="columnheader"]:not(:first-child) { align-items: center; text-align: center; }
.dp-table .pp3-tr--head > span { padding-top: 18px; padding-bottom: 16px; font-size: 16px; }
.dp-table .pp3-tr:not(.pp3-tr--head):hover > span { background: color-mix(in srgb, var(--lv-tint) 60%, transparent); }
.dp-table .pp3-tr:not(.pp3-tr--head):hover > .is-hi { background: var(--lv-wash); }
/* Hàng tên gói bám dưới thanh trên khi cuộn bảng (điện thoại cuộn xa là mất cột). html/body cả web để overflow-x:hidden ⇒ position:sticky
   không chạy, JS cuối pricing.php dời hàng bằng transform. --dp-stick = cao thanh trên: khách 68 / 58px, học viên --lv-top-h.
   Thẻ bảng bỏ overflow:hidden để hàng dời không bị cắt; ô tô màu không nằm ở góc nên không lòi khỏi bo góc. */
.dp { --dp-stick: 68px; }
.dp.is-member { --dp-stick: var(--lv-top-h, 64px); }
.dp-table { overflow: visible; }
.dp-table .pp3-tr--head { position: relative; z-index: 3; background: var(--lv-surface); border-top-left-radius: inherit; border-top-right-radius: inherit; }
.dp-table .pp3-tr--head.is-stuck { border-radius: 0; box-shadow: 0 1px 0 var(--lv-hair), 0 8px 16px -12px color-mix(in srgb, var(--lv-shade) 40%, transparent); }
.dp-yes { position: relative; display: inline-block; width: 24px; height: 24px; border-radius: 50%; background: var(--lv-wash); }
.dp-yes::after { content: ""; position: absolute; left: 8.5px; top: 5px; width: 5px; height: 10px; border: solid var(--lv-brand-fg); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.dp-no { color: var(--lv-faint); }

/* Dải học thử (khách / tài khoản chưa có gói) */
.dp-try { display: grid; grid-template-columns: 230px minmax(0, 1fr) auto; align-items: center; gap: 28px; margin-top: 44px; padding: 28px 36px; border-radius: 24px;
  background: var(--lv-card-grad); color: var(--lv-on); box-shadow: var(--lv-sh-2); }
.dp-try__art img { display: block; width: 100%; height: auto; }
.dp-try h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--lv-on); }
.dp-try p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--lv-on-2); }
.dp-try__btn { white-space: nowrap; }

/* Câu hỏi thường gặp + ô hỏi thêm */
.dp-faq-sec { margin-top: 44px; }
.dp-faq { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.dp-ask { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px; }
.dp-ask__art { display: flex; height: 92px; }
.dp-ask__art img { width: auto; height: 100%; object-fit: contain; }
.dp-ask h3 { font-size: 17px; font-weight: 750; color: var(--lv-ink); }
.dp-ask p { margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: var(--lv-text); }
.dp-ask p a { color: var(--lv-brand-fg); text-decoration: underline; }

@media (max-width: 1023px) {
  .dp:not(.is-member) { --dp-stick: 58px; }
  .dp-hero { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dp-hero__copy { padding-bottom: 0; }
  .dp-hero__art { width: min(100%, 440px); margin: 0 auto -26px; }
  .dp-body { margin-top: -52px; }
  .dp-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dp-step { flex-direction: row; align-items: center; gap: 16px; padding: 16px 18px; }
  .dp-step__art { flex: none; justify-content: center; width: 84px; height: 72px; }
  .dp-try { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 20px; text-align: left; }
  .dp-try__art { width: min(100%, 220px); }
  .dp-try__btn { width: 100%; justify-content: center; }
  .dp-faq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dp-hero .hb-title { font-size: 34px; }
  .dp-hero .lv-band__context { font-size: 15px; }
  .dp-steps-sec, .dp-faq-sec, .dp-try { margin-top: 32px; }
  .dp-step p { font-size: 14px; }
  .dp-try h2 { font-size: 21px; }
}

/* ═══ Thẻ gói — bản chốt (06/11/2026), dựng từ bản "faithful" theo ảnh mẫu ref_cards_v1 + góp ý ba giám khảo
   Khung hình cao bằng nhau ở mọi thẻ (kem; Premium hồng nhạt), nội dung căn trái. Máy tính: tên / giá + nút / quyền lợi
   thẳng hàng giữa ba thẻ nhờ subgrid; quyền lợi nằm trên dải nền nhạt chạy tới đáy thẻ nên danh sách ngắn (Trọn đời)
   không còn để lại khoảng trắng trống. Ô trạng thái phẳng, không bóng, không giống nút. Màu chỉ qua biến để chế độ tối chạy. */

.dp-tiers {
  --dp-r: 20px;                        /* bo góc thẻ */
  --dp-inset: 8px;                     /* khung hình cách mép thẻ */
  --dp-x: 18px;                        /* lề chữ tính từ mép trong thẻ (cộng --dp-inset + viền = 27px tới mép ngoài) */
  --dp-stage-h: 192px;
  --dp-floor: 22px;                    /* chân hình cách đáy khung hình */
  --dp-act-h: 54px;                    /* nút và ô trạng thái cao bằng nhau ⇒ đường hành động phẳng */
  --dp-cream: color-mix(in srgb, var(--color-brand-gold) 9%, var(--lv-tint));
  --dp-rose: var(--lv-wash);
  --dp-glow: color-mix(in srgb, var(--color-brand-gold) 11%, transparent);      /* quầng sau hình, khung kem */
  --dp-glow-rose: color-mix(in srgb, var(--lv-surface) 55%, transparent);       /* quầng sau hình, khung Premium */
  --dp-band: color-mix(in srgb, var(--lv-tint) 45%, var(--lv-surface));
  --dp-floor-shade: color-mix(in srgb, var(--lv-shade) 16%, transparent);
  --dp-line: color-mix(in srgb, var(--lv-brand) 55%, var(--lv-border));
  --dp-gold: color-mix(in srgb, var(--color-brand-gold) 88%, var(--lv-surface));
  --dp-gold-text: color-mix(in srgb, var(--color-brand-gold) 72%, var(--lv-on));
  gap: 16px 24px;
  margin-top: 0;
  align-items: stretch;
}
/* Chế độ tối: khung hình sáng hơn nền thẻ một bậc (pha nhiều vàng thì thành nâu đục), quầng nhạt hơn, bóng chân hình đậm hơn */
html[data-user-theme="dark"] .dp-tiers {
  --dp-cream: color-mix(in srgb, var(--color-brand-gold) 4%, var(--lv-wash));
  --dp-rose: color-mix(in srgb, var(--lv-brand) 18%, var(--lv-surface));
  --dp-glow: color-mix(in srgb, var(--color-brand-gold) 6%, transparent);
  --dp-glow-rose: color-mix(in srgb, var(--lv-on) 5%, transparent);
  --dp-floor-shade: color-mix(in srgb, var(--lv-night) 25%, var(--lv-surface));
}
@media (prefers-color-scheme: dark) {
  html[data-user-theme="system"] .dp-tiers {
    --dp-cream: color-mix(in srgb, var(--color-brand-gold) 4%, var(--lv-wash));
    --dp-rose: color-mix(in srgb, var(--lv-brand) 18%, var(--lv-surface));
    --dp-glow: color-mix(in srgb, var(--color-brand-gold) 6%, transparent);
    --dp-glow-rose: color-mix(in srgb, var(--lv-on) 5%, transparent);
    --dp-floor-shade: color-mix(in srgb, var(--lv-night) 25%, var(--lv-surface));
  }
}

/* ── Thẻ ── viền 2px (Premium, gói đang dùng) thì đệm bớt 1px để chữ ba thẻ vẫn thẳng hàng */
.dp-card {
  --dp-bw: 1px;
  --dp-in: calc(var(--dp-inset) + 1px - var(--dp-bw));
  position: relative;
  display: flex; flex-direction: column; gap: 0;
  min-width: 0;
  padding: var(--dp-in) var(--dp-in) 0;
  border: var(--dp-bw) solid var(--lv-hair);
  border-radius: var(--dp-r);
  background: var(--lv-surface);
  box-shadow: var(--lv-sh-2);
  text-align: left;
}
.dp-card.is-featured,
.dp-card.is-current { --dp-bw: 2px; }
.dp-card.is-featured { border-color: var(--lv-brand); box-shadow: var(--lv-sh-3); }
.dp-card.is-current {
  border-color: var(--dp-gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand-gold) 14%, transparent), var(--lv-sh-2);
}
/* Người đã có Trọn đời: Premium "đã có trong gói" thôi nổi bật ⇒ chỉ còn thẻ viền vàng là điểm nhấn */
.dp-card.is-featured:not(.is-current):has(.dp-status) {
  --dp-bw: 1px;
  border-color: var(--lv-hair);
  box-shadow: var(--lv-sh-2);
}
.dp-card.is-featured:not(.is-current):has(.dp-status) .dp-card__badge.is-hot {
  background: var(--lv-surface); color: var(--lv-text); box-shadow: 0 0 0 1px var(--lv-hair);
}

/* ── Khung hình ── cùng chiều cao, ba hình đứng chung một "mặt sàn", quầng sáng rất nhẹ sau hình */
.dp-card__stage {
  position: relative;
  display: grid; place-items: end center;
  height: var(--dp-stage-h);
  margin: 0;
  padding: 0 16px var(--dp-floor);
  border-radius: 14px;
  background: radial-gradient(52% 58% at 50% 58%, var(--dp-glow), transparent 72%), var(--dp-cream);
  overflow: hidden;
}
.dp-card.is-featured .dp-card__stage { background: radial-gradient(52% 58% at 50% 58%, var(--dp-glow-rose), transparent 72%), var(--dp-rose); }
.dp-card__stage::after {
  content: ""; position: absolute; left: 50%; bottom: calc(var(--dp-floor) - 7px);
  width: 72%; height: 18px; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--dp-floor-shade), transparent);
}
/* Xấp bìa lộ trình có trong gói, xếp xoè: bìa sau đè bìa trước ⇒ bìa trình độ cao nhất (B1 / B2) nằm trên cùng.
   --n = số bìa, --i = thứ tự; bề rộng và bước xoè co theo --n để 3 hay 4 bìa đều nằm gọn trong khung. */
.dp-deck { position: absolute; inset: 0; }
.dp-deck__c {
  --k: calc(var(--i) - (var(--n) - 1) / 2);          /* -1 0 1 (3 bìa) · -1.5 … 1.5 (4 bìa) */
  position: absolute; left: 50%; bottom: calc(var(--dp-floor) + 2px); z-index: calc(1 + var(--i));
  width: calc(56% - var(--n) * 3%); height: auto; aspect-ratio: 600 / 390;
  border-radius: 7px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--lv-shade) 18%, transparent), 0 12px 22px -10px color-mix(in srgb, var(--lv-shade) 45%, transparent);
  transform-origin: 50% 190%;
  transform: translateX(-50%) translateX(calc(var(--k) * (36% - var(--n) * 3%))) rotate(calc(var(--k) * 5deg));
}
/* Trọn đời: nền đỏ thẫm ánh vàng (cùng tông bìa gói Trọn đời ở giỏ hàng) */
.dp-card__stage--life { background: radial-gradient(60% 70% at 50% 40%, color-mix(in srgb, var(--color-brand-gold) 22%, transparent), transparent 70%), var(--lv-card-grad); }
.dp-card__stage--life::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--lv-night) 70%, transparent), transparent); }
.dp-card__stage--life .dp-card__badge:not(.is-mine) { background: color-mix(in srgb, var(--lv-on) 14%, transparent); color: var(--lv-on); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lv-on) 22%, transparent); }
.dp-card__stage--life .dp-card__badge.is-mine { background: var(--dp-gold); color: var(--lv-night); }

/* Nhãn góc phải khung hình */
.dp-card__badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  height: 26px; padding: 0 11px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 650; letter-spacing: 0;
  background: var(--lv-surface); color: var(--lv-text);
  box-shadow: 0 0 0 1px var(--lv-hair);
}
.dp-card__badge.is-hot { background: var(--lv-brand); color: var(--lv-on); box-shadow: none; }
.dp-card__badge.is-mine { background: var(--lv-deep); color: var(--dp-gold-text); box-shadow: none; }

/* ── Tên + mô tả ── */
.dp-card__head { padding: 20px var(--dp-x) 0; }
.dp-card__name { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 750; letter-spacing: -.015em; color: var(--lv-ink); }
.dp-tiers .dp-card__for { min-height: 0; margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--lv-muted); text-wrap: pretty; }

/* ── Giá + nút / ô trạng thái ── giá ở trên; nút hoặc ô trạng thái dồn xuống đáy hàng ⇒ ba thẻ chung một đường hành động */
.dp-card__buy { display: flex; flex-direction: column; padding: 18px var(--dp-x) 0; }
.dp-card__buy[hidden] { display: none; }
.dp-card__buy > * { order: 1; }
.dp-card__buy::before { content: ""; order: 2; flex: 1 0 16px; }
.dp-card__buy > :is(.pp3-up, .lv-btn, .dp-status) { order: 3; }
.dp-price { margin: 0; gap: 2px 6px; }
.dp-price b {
  font-size: 34px; font-size: clamp(30px, 3.05cqi, 36px);
  line-height: 1.12; font-weight: 800; letter-spacing: -.028em;
  font-variant-numeric: tabular-nums; color: var(--lv-ink);
}
.dp-price span { font-size: 15px; color: var(--lv-muted); }
.dp-card__note { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--lv-muted); font-variant-numeric: tabular-nums; text-wrap: balance; }

.dp-card .lv-btn--lg {
  height: auto; min-height: var(--dp-act-h); padding: 10px 18px; border-radius: 12px;
  font-size: 15px; font-weight: 650; line-height: 1.35; white-space: normal; text-align: center;   /* thẻ hẹp: chữ xuống dòng, không tràn */
}
.dp-card .lv-btn--primary { background: var(--lv-brand); }
.dp-card .lv-btn--primary:hover { background: color-mix(in srgb, var(--lv-brand) 78%, var(--lv-night)); }
.dp-card .lv-btn--outline { border: 1.5px solid var(--dp-line); background: var(--lv-surface); color: var(--lv-brand-fg); }
.dp-card .lv-btn--outline:hover { border-color: var(--lv-brand); background: var(--lv-tint); color: var(--lv-brand-fg); }

/* Báo giá nâng cấp: gọn, ngay trên nút; "Nâng cấp từ …" và số tiền chung dòng, thiếu chỗ thì tự xuống dòng */
.dp-card .pp3-up {
  display: flex; flex-flow: row wrap; align-items: baseline; justify-content: space-between; gap: 1px 10px;
  margin: 0 0 8px; padding: 9px 12px;
  border: 1px solid var(--lv-hair); border-radius: 12px;
  background: var(--lv-tint);
  font-size: 13px; line-height: 1.45; color: var(--lv-muted);
}
.dp-card .pp3-up > span { flex: 1 0 100%; text-wrap: balance; }
.dp-card .pp3-up > .pp3-up__from { flex: 0 1 auto; font-size: 13px; font-weight: 650; color: var(--lv-ink); white-space: nowrap; }
.dp-card .pp3-up b { font-size: 16px; line-height: 1.35; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--lv-brand-fg); }

/* Ô trạng thái (thay nút khi đã có gói): mảng nền phẳng, viền mảnh, không bóng ⇒ đọc là trạng thái, không phải nút */
.dp-status {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-height: var(--dp-act-h); padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--lv-brand) 16%, var(--lv-hair)); border-radius: 12px;
  background: var(--lv-tint);
  text-align: center;
  cursor: default;
}
.dp-status b { font-size: 15px; line-height: 1.3; font-weight: 700; color: var(--lv-brand-fg); text-wrap: balance; }
.dp-status span { font-size: 12.5px; line-height: 1.3; color: var(--lv-muted); font-variant-numeric: tabular-nums; text-wrap: balance; }
.dp-status.is-current {
  border-color: transparent;
  background: var(--lv-deep);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-gold) 32%, transparent);
}
.dp-status.is-current b { color: var(--dp-gold-text); }
.dp-status.is-current span { color: var(--lv-on-2); }

/* ── Quyền lợi ── dải nền nhạt sau một vạch mảnh, chạy hết bề ngang và tới đáy thẻ */
.dp-tiers .dp-card__feats {
  margin: 22px calc(-1 * var(--dp-in)) 0;
  padding: 20px calc(var(--dp-x) + var(--dp-in)) 24px;
  border-top: 1px solid var(--lv-hair);
  border-radius: 0 0 calc(var(--dp-r) - var(--dp-bw)) calc(var(--dp-r) - var(--dp-bw));
  background: var(--dp-band);
}
.dp-tiers .dp-card__feats:has(.dp-more) { padding-bottom: 12px; }
.dp-card .pp3-feats { gap: 8px; }
.dp-card .pp3-feats li { padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--lv-text); text-wrap: pretty; }
.dp-card .pp3-feats li::before { left: 2px; top: .58em; width: 6px; height: 6px; background: var(--lv-brand); }
/* Dòng "Mọi thứ của Plus" / "Toàn bộ quyền lợi Premium" là dòng gộp ⇒ đậm hơn một bậc, như tiêu đề nhỏ của danh sách */
.dp-card:not(:first-child) .dp-card__feats > .pp3-feats > li:first-child { font-weight: 650; color: var(--lv-ink); }

.dp-more { margin-top: 2px; }
.dp-more summary {
  display: inline-flex; align-items: center; min-height: 44px; padding-left: 18px;
  font-size: 14px; font-weight: 650; color: var(--lv-brand-fg);
  cursor: pointer; list-style: none;
}
.dp-more summary::-webkit-details-marker { display: none; }
.dp-more summary::after {
  content: ""; width: 6px; height: 6px; margin: -3px 0 0 9px;
  border: solid currentColor; border-width: 0 1.75px 1.75px 0;
  transform: rotate(45deg);
  transition: transform var(--lv-dur) var(--lv-ease), margin var(--lv-dur) var(--lv-ease);
}
.dp-more[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.dp-more summary:hover { color: var(--lv-ink); }
.dp-more summary:focus-visible { outline: none; box-shadow: var(--lv-focus); border-radius: 8px; }
.dp-more .pp3-feats { margin: 2px 0 12px; }

/* ── Bố cục theo bề ngang KHU THẺ (container query), không theo màn hình: học viên có thanh bên trái nên khu thẻ hẹp hơn
   khách ~250px ở cùng một màn hình. ≥ 1000px: ba thẻ, các hàng thẳng nhau (subgrid). 600–999px: hình bên trái cạnh
   tên + giá + nút, quyền lợi hai cột chạy hết bề ngang bên dưới. < 600px: thẻ dọc xếp chồng. ── */
@supports (container-type: inline-size) {
  .dp-tiers { container: dp-tiers / inline-size; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  .dp-card { grid-column: 1 / -1; }
  .dp-card + .dp-card { margin-top: 16px; }

  @container dp-tiers (min-width: 1000px) {
    .dp-card { grid-column: auto; }
    .dp-card + .dp-card { margin-top: 0; }
    @supports (grid-template-rows: subgrid) {
      .dp-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    }
  }

  @container dp-tiers (min-width: 600px) and (max-width: 999.98px) {
    .dp-card {
      display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); grid-template-rows: auto 1fr auto;
      grid-template-areas: "stage head" "stage buy" "feats feats"; column-gap: 12px;
    }
    .dp-card__stage { grid-area: stage; height: auto; min-height: 204px; place-items: center; padding: 20px 16px; }
    .dp-card__stage::after { display: none; }
    .dp-deck__c { width: calc(56% - var(--n) * 3%); bottom: 30px; }
    .dp-card__head { grid-area: head; padding-top: 14px; }
    .dp-card__buy { grid-area: buy; padding-top: 14px; }
    .dp-card__buy::before { flex-basis: 14px; }
    .dp-tiers .dp-card__feats { grid-area: feats; margin-top: var(--dp-in); }
    .dp-card__feats > .pp3-feats,
    .dp-more .pp3-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 8px 32px; }
  }
}
/* Trình duyệt chưa có container query: theo màn hình như learn-hub (một cột dưới 1024px) */
@supports not (container-type: inline-size) {
  @media (min-width: 1024px) {
    @supports (grid-template-rows: subgrid) {
      .dp-tiers { row-gap: 0; }
      .dp-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    }
  }
}

/* ── Điện thoại ── */
@media (max-width: 640px) {
  .dp-tiers { --dp-r: 18px; --dp-inset: 6px; --dp-x: 14px; --dp-stage-h: 160px; --dp-floor: 18px; }
  .dp-card + .dp-card { margin-top: 14px; }
  .dp-card__stage { border-radius: 13px; }
  .dp-card__badge { top: 10px; right: 10px; }
  .dp-card__head { padding-top: 16px; }
  .dp-card__name { font-size: 20px; }
  .dp-card__buy { padding-top: 14px; }
  .dp-price b { font-size: 30px; }
  .dp-tiers .dp-card__feats { margin-top: 20px; padding-top: 16px; padding-bottom: 20px; }
  .dp-tiers .dp-card__feats:has(.dp-more) { padding-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-more summary::after { transition: none; }
}