/* Membership Flow — chrome tối giản, một membership với nhiều thời hạn. */

/* dvh thay vì vh ở mọi chỗ đo "1 màn hình": trên mobile thanh địa chỉ trình
   duyệt co giãn nên 100vh luôn lớn hơn vùng nhìn thấy thật lúc mới mở trang. */
body.bess-membership-page,
body.bess-membership-checkout-page {
  min-height: 100dvh;
  background: var(--page);
}

/* Semantic button adapters — keep membership layout, normalize all visual variants. */
.membership-choice-action.bess-button--brand {
  border-color: var(--teal-brand);
  color: var(--teal-brand-ink);
  background: var(--teal-brand);
}
.membership-choice-option:hover .membership-choice-action.bess-button--brand {
  border-color: var(--teal-brand-hover);
  color: var(--teal-brand-ink);
  background: var(--teal-brand-hover);
  box-shadow: 0 8px 24px rgb(0 170 161 / 0.28);
}
.membership-support-btn.bess-button--outline-muted,
.profile-avatar-button.bess-button--outline-muted {
  border-color: var(--button-gray-border);
  color: var(--white);
  background: transparent;
}
.membership-support-btn.bess-button--outline-muted:hover,
.profile-avatar-button.bess-button--outline-muted:hover {
  border-color: var(--button-gray-border-hover);
  color: var(--white);
  background: rgb(255 255 255 / 0.06);
}
.profile-save-button.bess-button--white,
.profile-order-payment.bess-button--white {
  border-color: var(--white);
  color: #101012;
  background: var(--white);
}
.profile-save-button.bess-button--white:hover,
.profile-order-payment.bess-button--white:hover {
  border-color: #e2e3e6;
  color: #101012;
  background: #e2e3e6;
}
.membership-cta-btn {
  color: var(--white);
  background: transparent;
}
.membership-cta-btn:hover { color: var(--white); }

.sepay-expired-back.bess-button--brand {
  min-height: var(--tap-min);
  padding: 0 20px;
  border: 2px solid var(--teal-brand);
  color: var(--white);
  background: var(--teal-brand);
}

.sepay-expired-back.bess-button--brand:hover,
.sepay-expired-back.bess-button--brand:focus-visible {
  border-color: var(--teal-brand-hover);
  color: var(--white);
  background: var(--teal-brand-hover);
}

.sepay-expired-back .material-symbols-outlined { font-size: 17px; }

.screen-reader-text {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---------- Flow chrome ---------- */

.membership-flow-header {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(300px, 430px) minmax(160px, 1fr);
  gap: 32px;
  align-items: start;
  min-height: 76px;
  padding: 13px 32px 0;
}

.membership-flow-brand {
  padding-top: 7px;
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.045em;
}

.membership-flow-account {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 5px;
  margin-top: 6px;
  color: var(--body);
  font-size: 12px;
  font-weight: 700;
  transition: color 180ms ease;
}

.membership-flow-account { min-height: 30px }
.member-menu--flow { grid-column: 3; justify-self: end; margin-top: 0; }
.member-menu--flow .member-menu-trigger { min-height: var(--tap-min); }

.membership-flow-account .material-symbols-outlined { font-size: 15px; }
.membership-flow-account:hover { color: var(--white); }
.membership-flow-user { color: var(--white); }
.membership-flow-user .material-symbols-outlined { color: var(--teal); }

.membership-flow-progress {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.membership-flow-progress li {
  display: grid;
  gap: 7px;
  color: rgb(255 255 255 / 0.38);
  font-size: var(--text-micro);
  font-weight: 700;
  text-align: center;
}

.membership-flow-progress-line {
  display: block;
  height: 0;
  border-top: 3px solid rgb(255 255 255 / 0.28);
  transition: border-color 180ms ease;
}

.membership-flow-progress li.is-current { color: var(--white); }
.membership-flow-progress li.is-current .membership-flow-progress-line,
.membership-flow-progress li.is-complete .membership-flow-progress-line { border-color: var(--teal); }

.membership-flow-footer {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 32px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}

.membership-flow-footer > span:last-child { display: inline-flex; align-items: center; gap: 5px; }
.membership-flow-footer .material-symbols-outlined { font-size: 14px; }

/* ---------- Duration selection ---------- */

.membership-main {
  min-height: calc(100dvh - 132px);
  padding: 4px 24px 36px;
}

.membership-choice-shell {
  width: min(100%, 760px);
  margin-inline: auto;
}

.membership-choice-heading { margin-bottom: 24px; text-align: center; }

.membership-choice-heading h1,
.membership-checkout-heading h1 {
  margin: 0;
  color: var(--white);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: var(--font-weight-display);
  line-height: 1.16;
  letter-spacing: -0.045em;
}

.membership-choice-heading p,
.membership-checkout-heading p {
  margin: 12px 0 0;
  color: var(--body);
  font-size: 13px;
  line-height: 1.65;
}

.membership-checkout-heading .membership-access-summary { margin-top: 9px; }
.membership-access-summary strong { color: var(--white); font-weight: 700; }
.membership-access-summary span { color: var(--muted); }

.membership-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.membership-choice-option {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding: 18px 17px;
  border: 2px solid var(--line);
  border-radius: 6px;
  color: var(--white);
  background: #121214;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 12px 34px rgb(0 0 0 / 0.16);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.membership-choice-option:hover {
  border-color: var(--teal);
  background: #19191c;
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.28);
  transform: translateY(-3px);
}

.membership-choice-option.is-featured { border-color: rgb(56 217 211 / 0.48); }

.membership-choice-badge {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.membership-choice-duration {
  margin-top: 0;
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.membership-choice-price-block {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
}

.membership-choice-original-price {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  text-decoration-thickness: 1px;
}

.membership-choice-discount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 22px;
  margin-bottom: 8px;
  padding: 4px 8px;
  border: 2px solid var(--teal);
  border-radius: 999px;
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.membership-choice-discount .material-symbols-outlined {
  color: var(--white);
  font-size: 14px;
  line-height: 1;
}

/* Giữ giá thẳng hàng giữa các gói khi gói tham chiếu không có tiết kiệm. */
.membership-choice-discount--placeholder {
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.membership-choice-option:only-child .membership-choice-discount--placeholder { display: none; }

/* Giá/tháng là hero — số quyết định nhanh nhất, giá tổng chỉ là caption phụ. */
.membership-choice-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  margin-top: 0;
  font-size: clamp(28px, 3.2vw, 34px);
  font-weight: var(--font-weight-display);
  letter-spacing: -0.045em;
}

.membership-choice-unit {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0;
}

.membership-choice-option > small { margin-top: 8px; color: var(--muted); font-size: var(--text-micro); }

.membership-choice-billing {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  margin-top: 18px;
  margin-bottom: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.membership-choice-billing > span {
  color: var(--muted);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.membership-choice-billing > strong {
  color: var(--body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.membership-choice-billing > del { color: var(--muted); font-size: 10px; font-weight: var(--font-weight-regular); }

.membership-choice-action {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 0 14px;
  border: 2px solid var(--teal-brand);
  border-radius: 6px;
  background: var(--teal-brand);
  color: var(--teal-brand-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.membership-choice-action .material-symbols-outlined { flex: 0 0 auto; font-size: 18px; transition: transform 180ms ease; }

.membership-choice-option:hover .membership-choice-action,
.membership-choice-option.is-featured .membership-choice-action {
  border-color: var(--teal-brand-hover);
  color: var(--teal-brand-ink);
  background: var(--teal-brand-hover);
}

.membership-choice-option:hover .membership-choice-action { box-shadow: 0 8px 24px rgb(0 170 161 / 0.28); }
.membership-choice-option:hover .membership-choice-action .material-symbols-outlined { transform: translateX(3px); }

.membership-shared-access {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--muted);
}

.membership-login-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--muted);
}

.membership-login-hint > p { margin: 0; font-size: var(--text-micro); }
.membership-login-hint .material-symbols-outlined { color: var(--muted); font-size: 13px; }

.membership-shared-access > p {
  margin: 0;
  color: var(--body);
  font-size: 12px;
  font-weight: 600;
}

.membership-shared-access .material-symbols-outlined { color: var(--teal); font-size: 15px; font-weight: 700; }

.membership-empty {
  padding: 56px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.membership-empty .material-symbols-outlined { color: var(--teal); font-size: 30px; }
.membership-empty h2 { margin: 14px 0 7px; font-size: 19px; }
.membership-empty p { margin: 0; color: var(--muted); font-size: 12px; }

/* ---------- SePay checkout — 1 card tóm tắt đơn hàng + 1 card thanh toán
   (2 cột bằng nhau QR/chuyển khoản + footer trạng thái), gọn trong 1 màn hình. ---------- */

.membership-checkout-main {
  min-height: calc(100dvh - 132px);
  padding: 4px 24px 28px;
}

.membership-checkout-shell {
  width: min(100%, 760px);
  margin-inline: auto;
}

.membership-checkout-heading { margin-bottom: 18px; text-align: center; }

/* Badge trang trọng — tên/email người được kích hoạt, kiểu thẻ thành viên. */
.membership-member-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 7px 16px;
  border: 2px solid var(--teal);
  border-radius: 999px;
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
}

.membership-member-badge .material-symbols-outlined { color: var(--teal); font-size: 15px; }

/* ---- Card: thanh toán ---- */

.membership-payment-card {
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

/* Reset nền/padding sáng mặc định của vendor (thiết kế gốc cho theme sáng) — không cần
   display:contents vì không còn phải tách nội dung ra 2 nơi khác nhau, chỉ xuôi 1 luồng. */
.membership-qr-panel .pmpro-sepay-container { max-width: none; margin: 0; padding: 0; }

.membership-qr-panel .sepay-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
  padding: 24px;
  border: 0;
  border-radius: 0;
  color: var(--white);
  background: transparent;
  box-shadow: none;
}

/* Line ngăn cách phải nằm đúng giữa khoảng trống — dùng padding bằng nhau ở cả 2 bên
   thay vì gap + border-right (line sẽ lệch sát cột 1 nếu làm vậy). */
.sepay-panel-qr,
.sepay-panel-manual {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.sepay-panel-qr { padding-right: 24px; border-right: 1px solid var(--line); }
.sepay-panel-manual { padding-left: 24px; }

.sepay-panel-heading { margin: 0 0 10px; color: var(--white); font-size: 13px; font-weight: 700; }
.sepay-panel-qr > p { margin: 0 0 14px; color: var(--muted); font-size: 10px; }

.membership-qr-panel .qr-image-box {
  padding: 10px;
  border: 0;
  border-radius: 7px;
  background: var(--white);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.28);
}

.membership-qr-panel .qr-image-box img { width: 180px; height: 180px; border-radius: 2px; }

/* Hai nút đối xứng chặt — cùng 1 khối style, không tách riêng cho từng cột. */
.membership-qr-panel .qr-download-btn,
.sepay-copy-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap-min);
  margin-top: 14px;
  padding: 0 16px;
  border: 2px solid var(--button-gray-border);
  border-radius: 6px;
  background: transparent;
  color: var(--white);
  font-family: inherit;
  font-size: var(--text-micro);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease;
}

.membership-qr-panel .qr-download-btn:hover,
.sepay-copy-all:hover { border-color: var(--button-gray-border-hover); color: var(--white); background: rgb(255 255 255 / 0.06); transform: none; }

.membership-qr-panel .qr-download-btn .material-symbols-outlined,
.sepay-copy-all .material-symbols-outlined { font-size: 14px; }

.sepay-receipt-heading {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sepay-receipt-bank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-bottom: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.sepay-receipt-bank strong { color: var(--white); font-size: 13px; font-weight: 700; }
.sepay-receipt-bank span { color: var(--body); font-size: 10px; }

.membership-qr-panel .bank-info-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-bottom: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.membership-qr-panel .bank-info-row:last-of-type { border-bottom: 0; }
.membership-qr-panel .bank-info-row span { color: var(--muted); font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

.membership-qr-panel .bank-info-row strong {
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.membership-qr-panel .copy-text {
  position: relative;
  display: inline-block;
  padding-right: 20px;
  outline-offset: 3px;
  cursor: pointer;
}

.membership-qr-panel .copy-text .dashicons { display: none; }
.membership-qr-panel .copy-text::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 13px;
  height: 13px;
  color: var(--white);
  background: currentColor;
  -webkit-mask: url("../icons/material-symbols/variants/content_copy--20.svg") center / contain no-repeat;
  mask: url("../icons/material-symbols/variants/content_copy--20.svg") center / contain no-repeat;
  transform: translateY(-50%);
}

/* ---- Footer trạng thái trong cùng card thanh toán ---- */

.membership-status-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 24px;
  border-top: 1px solid var(--line);
  background: var(--surface-hover);
  transition: padding 200ms ease;
}

/* Scope dưới .membership-status-footer: vendor (sepay-pmpro.css) vẫn được enqueue trên
   trang này và có sẵn rule .sepay-status-checker riêng (nền/viền sáng, theme sáng) — phải
   reset đủ background/border/color chứ không chỉ layout, vì CSS ăn theo từng thuộc tính chứ
   không theo cả rule: thiếu 1 thuộc tính là thuộc tính đó vẫn lọt từ vendor qua. */
.membership-status-footer .sepay-status-checker {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--body);
}

/* Wave 5 vạch — to, ngang, căn giữa phía trên text, dễ nhận ra hệ thống đang check
   liên tục hơn hẳn 1 chấm nhỏ. */
.sepay-status-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 26px;
  margin-bottom: 6px;
}

.sepay-status-wave span {
  width: 0;
  height: 100%;
  border-left: 4px solid var(--teal);
  animation: sepay-wave 1.1s ease-in-out infinite;
}

.sepay-status-wave span:nth-child(1) { animation-delay: 0ms; }
.sepay-status-wave span:nth-child(2) { animation-delay: 110ms; }
.sepay-status-wave span:nth-child(3) { animation-delay: 220ms; }
.sepay-status-wave span:nth-child(4) { animation-delay: 330ms; }
.sepay-status-wave span:nth-child(5) { animation-delay: 440ms; }

/* Quan trọng để thúc đẩy quyết định chuyển khoản — to hơn hẳn caption thường. */
.membership-status-footer .sepay-status-copy > span { display: block; color: var(--white); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.membership-status-footer .sepay-status-copy > p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

/* ---- Trạng thái thành công — card tự co theo nội dung, không giữ footprint QR. ---- */

.membership-status-footer.is-success {
  align-items: center;
  justify-content: center;
  padding: 100px 24px;
  border-top: 0;
}

/* Success overlay vẫn được mount sẵn để không chớp DOM, nhưng khi active nó
   tham gia normal flow: card co theo nội dung thành công thay vì giữ chiều cao QR. */
.membership-payment-card.is-success-overlay-active > .membership-qr-panel { display: none; }

.membership-payment-card.is-success-overlay-active > .membership-status-footer {
  gap: 0;
  padding: 0;
  border-top: 0;
}

.membership-payment-card.is-success-overlay-active .membership-status-footer .sepay-status-checker,
.membership-payment-card.is-success-overlay-active .membership-status-footer .membership-cta-slot { display: none; }

.membership-payment-card.is-success-overlay-active .membership-status-footer .sepay-success-overlay {
  position: relative;
  inset: auto;
  width: 100%;
  box-sizing: border-box;
  padding: 100px 24px;
}

.membership-status-footer .sepay-status-checker.is-success { width: 100%; }

.membership-status-footer .sepay-success { display: flex; flex-direction: column; align-items: center; text-align: center; }

.sepay-success-icon svg { width: 68px; height: 68px; overflow: visible; }
.sepay-success-ring {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: sepay-ring-draw 550ms ease-out forwards;
}
.sepay-success-check {
  fill: none;
  stroke: var(--teal);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: sepay-check-draw 350ms ease-out 480ms forwards;
}

.membership-status-footer .sepay-success h3 { margin: 16px 0 0; color: var(--white); font-family: var(--font-sans); font-size: 20px; font-weight: 700; }

.sepay-success-setup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.sepay-setup-dot {
  width: 7px;
  height: 7px;
  border: 2px solid var(--teal);
  border-radius: 50%;
  background: transparent;
  animation: sepay-dot-bounce 1.2s ease-in-out infinite;
}

.sepay-setup-dot:nth-child(2) { animation-delay: 0.15s; }
.sepay-setup-dot:nth-child(3) { animation-delay: 0.3s; }

.sepay-setup-label { margin-left: 2px; color: var(--muted); font-size: 12px; }

.membership-status-footer .sepay-success p {
  margin: 16px 0 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12px;
}

.sepay-countdown-number { color: var(--white); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

.membership-status-footer .sepay-success-progress {
  overflow: hidden;
  width: 200px;
  height: 4px;
  margin-top: 18px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.14);
}

.membership-status-footer .sepay-success-progress > span {
  display: block;
  width: 0%;
  height: 0;
  border-top: 4px solid var(--teal);
  transition: width 8s linear;
}

.membership-cta-btn {
  display: inline-flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
}

.membership-cta-btn:hover { color: var(--white); text-decoration: none; }
.membership-cta-btn:disabled { opacity: 0.55; cursor: default; text-decoration: none; }

/* ---- Hỗ trợ — trang trọng và rõ hơn vì đây có thể là bước cần tư vấn trước khi
   thanh toán một khoản lớn, không chỉ là footer phụ. ---- */

.membership-support-contact {
  margin-top: 22px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  text-align: center;
}

.membership-support-contact > span {
  display: block;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
}

.membership-support-contact > p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.membership-support-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.membership-support-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--tap-min);
  padding: 0 18px;
  border: 2px solid var(--button-gray-border);
  border-radius: 6px;
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  transition: border-color 180ms ease, color 180ms ease;
}

.membership-support-btn .material-symbols-outlined { font-size: 17px; }

.membership-support-icon { flex: 0 0 auto; width: 18px; height: 18px; stroke: var(--white); }
.membership-support-btn:hover { border-color: var(--button-gray-border-hover); color: var(--white); background: rgb(255 255 255 / 0.06); }

/* ---------- Member account popup content ---------- */

.profile-panel {
  border: 0;
  border-radius: 6px;
  background: var(--surface);
}

.profile-notice {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: 4px;
  color: var(--body);
  background: transparent;
  font-size: 11px;
}
.profile-notice.is-success { border-color: var(--teal); }
.profile-notice.is-success .material-symbols-outlined { color: var(--teal); }
.profile-notice.is-error { border-color: #f3a6a6; }
.profile-notice.is-error .material-symbols-outlined { color: #f3a6a6; }

.profile-panel { padding: 28px; }
.profile-panel__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.profile-panel__heading > div > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.profile-panel__heading h2 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.profile-panel__heading > p { max-width: 330px; margin: 2px 0 0; color: var(--muted); font-size: 10px; text-align: right; }
.profile-panel__count { color: var(--muted); font-size: var(--text-micro); }

.profile-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.profile-avatar-editor {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  text-align: left;
}
.profile-avatar-preview { width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; }
.profile-avatar-editor__copy {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title button"
    "note button"
    "file button";
  gap: 2px 18px;
  align-items: center;
}
.profile-avatar-editor__copy > strong { grid-area: title; font-size: 12px; }
.profile-avatar-editor__copy > p { grid-area: note; }
.profile-avatar-editor__copy > .profile-avatar-button { grid-area: button; }
.profile-avatar-editor__copy > .profile-avatar-file { grid-area: file; }
.profile-avatar-editor__copy > p { margin: 1px 0; color: var(--muted); font-size: var(--text-micro); }
.profile-avatar-button {
  display: inline-flex;
  min-height: var(--tap-min);
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 2px solid var(--button-gray-border);
  border-radius: 6px;
  color: var(--white);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}
.profile-avatar-button:hover { border-color: var(--button-gray-border-hover); color: var(--white); background: rgb(255 255 255 / 0.06); }
.profile-avatar-button .material-symbols-outlined { font-size: 17px; }
.profile-avatar-file { display: block; max-width: 100%; margin-top: 0; overflow: hidden; color: var(--muted); font-size: var(--text-micro); text-overflow: ellipsis; white-space: nowrap; }

.profile-fields { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.profile-field { display: grid; min-width: 0; gap: 7px; }
.profile-field > span { display: flex; align-items: baseline; gap: 4px; color: var(--body); font-size: 10px; font-weight: 700; }
.profile-field__readonly { color: var(--muted); font-size: var(--text-micro); font-weight: 600; }
.profile-field input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 13px;
  border: 2px solid var(--line);
  border-radius: 4px;
  outline: 0;
  color: var(--white);
  background: #121214;
  font: inherit;
  font-size: 12px;
  transition: border-color 180ms ease;
}
.profile-field input:focus { border-color: var(--teal); }
.profile-field input[readonly] { color: var(--muted); background: transparent; cursor: not-allowed; }
.profile-field small { margin-top: -3px; color: var(--muted); font-size: var(--text-micro); }

.profile-save-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border: 2px solid var(--white);
  border-radius: 6px;
  color: #101012;
  background: var(--white);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.profile-save-button { grid-column: 1 / -1; justify-self: start; margin-top: 0; }
.profile-save-button:hover { border-color: #e2e3e6; color: #101012; background: #e2e3e6; transform: translateY(-1px); }
.profile-save-button .material-symbols-outlined { font-size: 17px; }

.profile-membership-badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.profile-membership-badge.is-premium { border-color: var(--teal); color: var(--white); }
.profile-membership-badge.is-expired { border-color: rgb(255 255 255 / 0.42); color: var(--white); }
.profile-membership-summary {
  display: grid;
  grid-template-columns: minmax(190px, 0.7fr) minmax(0, 1.3fr);
  gap: 24px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 4px;
  background: #242429;
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.2);
}
.profile-membership-summary__intro > span { display: block; color: var(--muted); font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.profile-membership-summary__intro > strong { display: block; margin-top: 5px; font-size: 16px; }
.profile-membership-summary__intro > p { max-width: 390px; margin: 6px 0 0; color: var(--body); font-size: var(--text-micro); line-height: 1.55; }
.profile-membership-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding-left: 24px; border-left: 1px solid var(--line); }
.profile-membership-facts > div { min-width: 0; padding: 2px 18px; border-left: 1px solid var(--line); }
.profile-membership-facts > div:first-child { border-left: 0; }
.profile-membership-facts dt { color: var(--muted); font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.profile-membership-facts dd { overflow: hidden; margin: 6px 0 0; color: var(--white); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.profile-package-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin: 28px 0 16px;
}
.profile-package-heading > div > span { color: var(--muted); font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.profile-package-heading h3 { margin: 5px 0 0; font-size: 15px; }
.profile-package-heading p { max-width: 520px; margin: 0; color: var(--muted); font-size: var(--text-micro); line-height: 1.55; text-align: right; }
.profile-membership-choice-grid { margin-top: 0; }

.profile-panel__heading h2 + p { max-width: 560px; margin: 7px 0 0; color: var(--muted); font-size: var(--text-micro); line-height: 1.55; }
.profile-history { display: grid; gap: 14px; }
.profile-history-unassigned,
.profile-history-period { overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #121214; }
.profile-history-period.is-active { border-color: rgb(56 217 211 / 0.42); }
.profile-history-unassigned__head,
.profile-history-period__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 0.025); }
.profile-history-unassigned__head > div > span,
.profile-history-period__identity > span { display: block; color: var(--muted); font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.profile-history-unassigned__head > div > strong,
.profile-history-period__identity > strong { display: block; margin-top: 5px; color: var(--white); font-size: 12px; }
.profile-history-unassigned__head > span { color: #e7b96c; font-size: var(--text-micro); font-weight: 700; white-space: nowrap; }
.profile-history-period__identity > strong > span { margin-inline: 5px; color: var(--muted); font-size: 13px; }
.profile-history-period__meta { display: grid; gap: 5px; justify-items: end; color: var(--muted); font-size: var(--text-micro); white-space: nowrap; }
.profile-history-period__status { color: var(--body); font-size: var(--text-micro); font-weight: 700; }
.profile-history-period.is-active .profile-history-period__status { color: var(--teal); }
.profile-history-orders { display: grid; }
.profile-history-order { display: grid; grid-template-columns: minmax(190px, 1.45fr) minmax(74px, 0.5fr) minmax(104px, 0.65fr) minmax(145px, 0.8fr); gap: 16px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); }
.profile-history-orders > .profile-history-order:first-child { border-top: 0; }
.profile-history-order__identity { min-width: 0; }
.profile-history-order__identity > span { display: block; overflow: hidden; color: var(--muted); font-size: var(--text-micro); text-overflow: ellipsis; white-space: nowrap; }
.profile-history-order__identity > strong { display: block; overflow: hidden; margin-top: 5px; color: var(--white); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.profile-history-order__price { color: var(--white); font-size: 10px; white-space: nowrap; }
.profile-history-order__action { justify-self: end; text-align: right; }
.profile-history-period__legacy { margin: 0; padding: 16px 18px; color: var(--muted); font-size: var(--text-micro); line-height: 1.55; }
.profile-order-status { display: inline; padding: 0; border: 0; color: var(--body); background: transparent; font-size: var(--text-micro); font-weight: 700; white-space: nowrap; }
.profile-order-status.is-success { color: var(--body); }
.profile-order-status.is-pending { color: #e7b96c; }
.profile-order-status.is-refunded { color: var(--muted); }
.profile-order-completed-at { color: var(--body); font-size: var(--text-micro); white-space: nowrap; }
.profile-order-payment {
  display: inline-flex;
  min-height: var(--tap-min);
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  border: 2px solid var(--white);
  border-radius: 6px;
  color: #101012;
  background: var(--white);
  font-size: var(--text-micro);
  font-weight: 700;
  white-space: nowrap;
}
.profile-order-payment .material-symbols-outlined { font-size: 13px; }
.profile-order-payment:hover { border-color: #d7d7da; color: #000; background: #d7d7da; }
.profile-orders-empty { padding: 24px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 11px; text-align: center; }

@keyframes sepay-wave {
  0%, 100% { transform: scaleY(0.32); opacity: 0.6; }
  50% { transform: scaleY(1); opacity: 1; }
}

@keyframes sepay-ring-draw { to { stroke-dashoffset: 0; } }
@keyframes sepay-check-draw { to { stroke-dashoffset: 0; } }

@keyframes sepay-dot-bounce {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .membership-choice-option label,
  .membership-continue { transition: none; }
  .sepay-status-wave span { animation: none; transform: scaleY(0.6); opacity: 1; }
  .membership-status-footer .sepay-success-progress > span { transition: none; }
  .sepay-success-ring,
  .sepay-success-check { animation: none; stroke-dashoffset: 0; }
  .sepay-setup-dot { animation: none; opacity: 1; }
}

/* ==================================================
   Responsive — thang bậc 1279 / 1023 / 767 / 479 (tokens.css)
   ================================================== */

@media (max-width: 1023px) {
  .membership-flow-header { gap: 24px; padding-inline: var(--gutter); }
  .membership-flow-footer { margin-inline: var(--gutter); }
  .membership-main,
  .membership-checkout-main { padding-inline: var(--gutter); }
  .profile-membership-summary { grid-template-columns: 1fr; align-items: start; }
  .profile-membership-facts { width: 100%; padding: 16px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .profile-membership-facts > div:first-child { padding-left: 0; }
  .profile-history-order { grid-template-columns: minmax(180px, 1.4fr) minmax(70px, 0.5fr) minmax(100px, 0.7fr); }
  .profile-history-order__action { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .profile-package-heading { align-items: start; }
}

@media (max-width: 767px) {
  /*
   * Header flow về 2 cột (thương hiệu | tài khoản) và đẩy thanh tiến trình
   * xuống hàng riêng: 3 cột với cột giữa tối thiểu 300px cần ~750px mới đủ.
   */
  .membership-flow-header {
    grid-template-columns: 1fr auto;
    gap: 16px;
    min-height: 122px;
    padding: 16px var(--gutter) 0;
  }

  .membership-flow-progress { grid-column: 1 / -1; grid-row: 2; }
  .member-menu--flow { grid-column: 2; grid-row: 1; }
  .member-menu--flow .member-menu-trigger__name { max-width: 120px; }
  .membership-flow-footer { margin-inline: var(--gutter); }

  /* dvh: thanh địa chỉ trình duyệt mobile co giãn, 100vh sẽ đẩy footer flow
     xuống dưới mép màn hình lúc mới mở trang. */
  .membership-main,
  .membership-checkout-main { min-height: calc(100dvh - 190px); padding-top: 24px; }
  .profile-panel { padding: 22px; }
  .profile-panel__heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .profile-panel__heading > p { max-width: none; text-align: left; }
  .profile-fields { grid-template-columns: 1fr; }
  .profile-save-button { grid-column: 1; grid-row: 3; }
  .profile-package-heading { display: grid; gap: 8px; }
  .profile-package-heading p { text-align: left; }
  .profile-history-unassigned__head,
  .profile-history-period__head { align-items: flex-start; flex-direction: column; gap: 9px; }
  .profile-history-period__meta { justify-items: start; }
  .profile-history-order { grid-template-columns: minmax(0, 1fr) auto; gap: 9px 16px; }
  .profile-history-order__price { justify-self: end; }
  .profile-history-order > .profile-order-status { justify-self: start; }
  .profile-history-order__action { grid-column: 2; justify-self: end; text-align: right; }

  /*
   * 1 cột. Bản trước nhắm `.membership-choice-option label` — trong markup
   * không hề có <label> nào (mỗi lựa chọn là một thẻ <a>, xem
   * templates/page-membership.php), nên toàn bộ khối này chưa từng có tác
   * dụng: card vẫn giữ min-height 268px và canh giữa, xếp dọc thành 3 khối
   * cao lêu nghêu. Nhắm đúng chính .membership-choice-option.
   */
  .membership-choice-grid { grid-template-columns: 1fr; }
  .membership-choice-discount--placeholder { display: none; }

  .membership-choice-option {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(0, 1.25fr) minmax(112px, 0.75fr);
    grid-template-areas:
      "duration badge"
      "price billing"
      "action action";
    column-gap: 16px;
    row-gap: 0;
    align-items: start;
    padding: 16px 18px;
    text-align: left;
  }

  .membership-choice-badge { grid-area: badge; min-height: 0; justify-self: end; margin: 2px 0 0; text-align: right; }
  .membership-choice-duration { grid-area: duration; margin-top: 0; font-size: 16px; }
  .membership-choice-price-block { grid-area: price; min-height: 0; align-items: flex-start; justify-content: flex-start; margin-top: 12px; }
  .membership-choice-price { flex-wrap: wrap; justify-content: flex-start; margin-top: 0; font-size: clamp(26px, 7.4vw, 30px); }
  .membership-choice-unit { font-size: 10px; }
  .membership-choice-billing {
    grid-area: billing;
    min-height: 0;
    align-items: flex-start;
    align-self: stretch;
    justify-content: center;
    margin: 12px 0 0;
    padding: 4px 0 4px 14px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .membership-choice-billing > strong { font-size: 14px; }
  .membership-choice-option > small { grid-column: 1 / -1; align-self: flex-start; margin-top: 6px; }

  /* Nút hành động canh giữa + cao đúng ngưỡng chạm — ở 1 cột full width,
     space-between làm chữ và mũi tên bị kéo ra hai đầu rất xa nhau. */
  .membership-choice-action {
    grid-area: action;
    justify-content: center;
    gap: 8px;
    min-height: var(--tap-min);
    margin-top: 16px;
  }

  .membership-support-contact { padding: 20px var(--gutter); }
  .membership-support-btn { min-height: var(--tap-min); }

  /* Hai phương thức vẫn xếp thành một cột trên mobile. Phần nhập tay dùng bốn
     hàng label | value để giảm chiều cao mà không làm mất thứ tự đọc. */
  .membership-qr-panel .sepay-box { grid-template-columns: 1fr; row-gap: 16px; padding: 16px; }
  .sepay-panel-qr { padding-right: 0; padding-bottom: 16px; border-right: 0; border-bottom: 1px solid var(--line); }

  .sepay-panel-manual {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(104px, auto) minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    padding-left: 0;
    text-align: left;
  }

  .sepay-panel-manual .sepay-panel-heading {
    grid-column: 1 / -1;
    justify-self: center;
    margin-bottom: 7px;
    text-align: center;
  }

  .sepay-panel-manual .sepay-receipt-heading {
    align-self: stretch;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }

  .sepay-panel-manual .sepay-receipt-bank {
    align-self: stretch;
    flex-direction: row;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    text-align: right;
  }

  .membership-qr-panel .sepay-panel-manual .bank-info-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(104px, auto) minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    width: 100%;
    padding: 4px 0;
  }

  .membership-qr-panel .sepay-panel-manual .bank-info-row strong {
    justify-self: end;
    max-width: 100%;
    text-align: right;
    word-break: break-word;
  }

  .sepay-panel-manual .sepay-copy-all {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 10px;
  }
}

@media (max-width: 479px) {
  .member-menu--flow .member-menu-trigger { gap: 5px; }
  .member-menu--flow .member-menu-trigger__name { max-width: 78px; font-size: 10px; }
  .member-menu--flow .member-badge { min-height: 18px; padding-inline: 5px; font-size: var(--text-micro); }
  .membership-flow-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 5px; }
  .membership-choice-heading { margin-bottom: 22px; }
  .membership-qr-panel .qr-image-box img { width: min(200px, 62vw); height: auto; }

  /* 2 nút hỗ trợ (gọi / nhắn tin) xếp dọc, mỗi nút full width — đây là lối
     thoát khi người dùng vướng ở bước thanh toán, không nên để chúng chật. */
  .membership-support-actions { flex-direction: column; align-items: stretch; }
  .membership-support-btn { justify-content: center; }

  .profile-panel { padding: 18px; }
  .profile-avatar-editor { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .profile-avatar-preview { width: 44px; height: 44px; }
  .profile-avatar-editor__copy {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "note" "button" "file";
    gap: 5px;
  }
  .profile-avatar-editor__copy { width: 100%; }
  .profile-avatar-editor__copy > .profile-avatar-button { justify-self: start; }
  .profile-save-button { width: 100%; }
  .profile-membership-summary { gap: 16px; padding: 16px; }
  .profile-membership-facts { grid-template-columns: 1fr; gap: 0; }
  .profile-membership-facts > div,
  .profile-membership-facts > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); border-left: 0; }
  .profile-membership-facts > div:first-child { border-top: 0; }
  .profile-membership-facts dd { margin-top: 0; text-align: right; }
  .profile-history-order { padding: 13px 14px; }
  .profile-history-order__identity > span { white-space: normal; }
  .profile-history-order__action { grid-column: 1 / -1; justify-self: stretch; text-align: left; }
  .profile-history-order__action .profile-order-payment { justify-content: center; width: 100%; }
}

/* ==================================================
   Lớp cảm ứng — xem base.css để biết vì sao dùng (hover: none)
   ================================================== */

@media (hover: none) {
  .membership-choice-option:hover {
    transform: none;
    border-color: var(--line);
    background: #121214;
    box-shadow: 0 12px 34px rgb(0 0 0 / 0.16);
  }

  .membership-choice-option.is-featured:hover { border-color: rgb(56 217 211 / 0.48); }

  /* CTA chọn thời hạn giữ nguyên surface teal-brand trên thiết bị cảm ứng;
     chỉ tắt hiệu ứng dịch chuyển/đổ bóng vốn phụ thuộc hover. */
  .membership-choice-action { border-color: var(--teal-brand); color: var(--teal-brand-ink); background: var(--teal-brand); }
  .membership-choice-option:hover .membership-choice-action { box-shadow: none; }
  .membership-choice-option:hover .membership-choice-action .material-symbols-outlined { transform: none; }

  .membership-support-btn:hover,
  .profile-avatar-button:hover { border-color: var(--button-gray-border); color: var(--white); background: transparent; }
  .profile-save-button:hover { border-color: var(--white); color: #101012; background: var(--white); transform: none; }

  /*
   * Vendor pmpro-sepay (code-vendor/pmpro-sepay/assets/css/sepay-pmpro.css)
   * thiết kế cho chuột: nút 34px và số tài khoản là <strong class="copy-text">
   * chỉ cao bằng dòng chữ (~18px). Ở bước thanh toán, chạm trượt là hỏng cả
   * giao dịch nên nâng hết về ngưỡng 44px. Selector phải khớp đúng độ sâu
   * .membership-qr-panel ... như phần override phía trên để thắng vendor.
   */
  .membership-qr-panel .qr-download-btn,
  .sepay-copy-all { min-height: var(--tap-min); }

  .membership-qr-panel .qr-download-btn:hover,
  .sepay-copy-all:hover { border-color: var(--button-gray-border); color: var(--white); background: transparent; }

  .membership-qr-panel .copy-text { padding-block: 6px; }
  .membership-cta-btn { min-height: 0; }
}