/*
 * Astro Việt Core – màn hình đăng ký gói / thanh toán (prefix av-co-).
 * Dùng lại token --av-* và các lớp chung trong av-app.css; không ghi đè lớp dùng chung.
 */
.av-co { max-width: 1080px; margin: 0 auto; scroll-margin-top: 90px; overflow-wrap: anywhere; }
.av-co-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.av-co-ico { flex: none; }
.av-co code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; padding: .08rem .4rem; border-radius: 6px; background: rgba(230, 194, 122, .14); color: var(--av-gold-2); letter-spacing: .04em; }
.av-co-demo { text-align: center; margin: 0 0 1rem !important; }

/* ---------- Thanh các bước ---------- */
.av-co-steps { display: flex; list-style: none; margin: 0 auto 2.2rem; padding: 0; max-width: 620px; }
.av-co-steps__item { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; font-size: .82rem; color: var(--av-muted); }
.av-co-steps__item::before { content: ''; position: absolute; top: 17px; right: 50%; width: 100%; height: 2px; background: var(--av-line-strong); }
.av-co-steps__item:first-child::before { display: none; }
.av-co-steps__item.is-done::before, .av-co-steps__item.is-current::before { background: var(--av-gold); }
.av-co-steps__dot { position: relative; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--av-line-strong); background: var(--av-surface); font-weight: 600; font-size: .9rem; color: var(--av-muted); }
.av-co-steps__item.is-done .av-co-steps__dot { border-color: var(--av-gold); color: var(--av-gold-2); }
.av-co-steps__item.is-current .av-co-steps__dot { border-color: transparent; background: linear-gradient(135deg, var(--av-gold-2), var(--av-gold) 45%, var(--av-gold-deep)); color: #1a1330; box-shadow: 0 0 0 4px rgba(230, 194, 122, .16); }
.av-co-steps__item.is-current { color: var(--av-text); font-weight: 500; }
.av-co-steps__item.is-done { color: var(--av-gold-2); }

/* ---------- Đầu mỗi bước ---------- */
.av-co-step__head { text-align: center; margin: 0 auto 1.8rem; max-width: 620px; }
.av-co-step__title { font-size: clamp(1.7rem, 4.2vw, 2.4rem) !important; margin-bottom: .3em !important; outline: none; }
.av-co-step__lead { color: var(--av-muted); margin: 0 !important; text-wrap: balance; }
.av-co-h3 { font-size: 1.4rem !important; margin-bottom: .8rem !important; }
.av-co-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: space-between; align-items: center; margin-top: 1.6rem; }
.av-co-actions--center { justify-content: center; }
.av-co-actions--start { justify-content: flex-start; gap: 1rem; margin-top: 1.4rem; }
.av-co-link { background: none; border: 0; padding: .3rem 0; font: inherit; font-size: .9rem; color: var(--av-gold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.av-co-link:hover { color: var(--av-gold-2); }
.av-co-link:focus-visible { outline: 2px solid var(--av-gold); outline-offset: 3px; border-radius: 4px; }

/* ---------- Bước 1: chọn gói ---------- */
.av-co-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1.2rem; padding-top: .9rem; }
.av-co-plan { display: block; position: relative; cursor: pointer; }
.av-co-plan__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.av-co-plan__box { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: 1.7rem 1.5rem 1.4rem; border: 1px solid var(--av-line-strong); border-radius: var(--av-radius); background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); transition: border-color .2s, box-shadow .2s, transform .2s, background .2s; position: relative; }
.av-co-plan:hover .av-co-plan__box { border-color: rgba(230, 194, 122, .6); transform: translateY(-2px); }
.av-co-plan.is-popular .av-co-plan__box { border-color: rgba(230, 194, 122, .5); background: radial-gradient(circle at 90% 0%, rgba(139, 124, 246, .2), transparent 55%), linear-gradient(180deg, rgba(230, 194, 122, .08), rgba(255, 255, 255, .02)); }
.av-co-plan.is-selected .av-co-plan__box { border-color: var(--av-gold); box-shadow: 0 0 0 1px var(--av-gold), 0 18px 40px -22px rgba(230, 194, 122, .55); }
.av-co-plan__input:focus-visible + .av-co-plan__box { outline: 2px solid var(--av-gold); outline-offset: 4px; }
.av-co-plan__flag { position: absolute; top: -.85rem; left: 1.4rem; background: linear-gradient(135deg, var(--av-gold-2), var(--av-gold)); color: #1a1330; }
.av-co-plan__radio { position: absolute; top: 1.3rem; right: 1.3rem; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--av-line-strong); transition: border-color .2s, background .2s; }
.av-co-plan.is-selected .av-co-plan__radio { border-color: var(--av-gold); background: radial-gradient(circle, var(--av-gold) 0 5px, transparent 6px); }
.av-co-plan__name { font-family: var(--av-font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.2; padding-right: 2rem; }
.av-co-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .4rem; margin-top: .4rem; }
.av-co-plan__price b { font-family: var(--av-font-display); font-size: 2.3rem; font-weight: 600; line-height: 1; color: var(--av-gold-2); }
.av-co-plan__price small { color: var(--av-muted); font-size: .9rem; }
.av-co-plan__per { display: block; height: 1.5rem; line-height: 1.5rem; font-size: .84rem; color: var(--av-teal); }
.av-co-plan__feat { display: block; margin: .8rem 0 1.2rem; padding-top: .9rem; border-top: 1px solid var(--av-line); }
.av-co-feat { display: block; position: relative; padding-left: 1.5rem; margin-bottom: .5rem; font-size: .92rem; line-height: 1.5; }
.av-co-feat::before { content: ''; position: absolute; left: .15rem; top: .3em; width: .55rem; height: .3rem; border-left: 2px solid var(--av-gold); border-bottom: 2px solid var(--av-gold); transform: rotate(-45deg); }
.av-co-plan__pick { margin-top: auto; display: block; text-align: center; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--av-line-strong); font-size: .9rem; font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
.av-co-pick--on { display: none; }
.av-co-plan.is-selected .av-co-pick--on { display: inline; }
.av-co-plan.is-selected .av-co-pick--off { display: none; }
.av-co-plan.is-selected .av-co-plan__pick { background: linear-gradient(135deg, var(--av-gold-2), var(--av-gold) 45%, var(--av-gold-deep)); color: #1a1330; border-color: transparent; font-weight: 600; }
.av-co-price-note { text-align: center; color: var(--av-muted); font-size: .8rem; margin: 1rem 0 0 !important; }

.av-co-assure { list-style: none; margin: 2rem 0 0; padding: 1.3rem 0; border-block: 1px solid var(--av-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.av-co-assure li { display: flex; gap: .8rem; align-items: flex-start; }
.av-co-assure .av-co-ico { color: var(--av-gold); margin-top: 2px; }
.av-co-assure strong { display: block; font-weight: 500; font-size: .95rem; }
.av-co-assure span { display: block; color: var(--av-muted); font-size: .86rem; line-height: 1.5; }
.av-co-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-top: 1.6rem; }
.av-co-bar__sel { margin: 0 !important; color: var(--av-muted); }
.av-co-bar__sel strong { color: var(--av-text); font-weight: 600; }

/* ---------- Bước 2: thông tin ---------- */
.av-co-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.av-co-sum { position: sticky; top: 90px; }
.av-co-sum__plan { display: flex; flex-direction: column; margin-bottom: .8rem; }
.av-co-sum__plan strong { font-family: var(--av-font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.25; }
.av-co-sum__plan span { font-size: .88rem; }
.av-co-sum__feat { list-style: none; margin: 0 0 1rem; padding: .9rem 0; border-block: 1px solid var(--av-line); font-size: .9rem; }
.av-co-sum__feat li { position: relative; padding-left: 1.4rem; margin-bottom: .4rem; }
.av-co-sum__feat li:last-child { margin-bottom: 0; }
.av-co-sum__feat li::before { content: ''; position: absolute; left: .1rem; top: .35em; width: .5rem; height: .28rem; border-left: 2px solid var(--av-gold); border-bottom: 2px solid var(--av-gold); transform: rotate(-45deg); }
.av-co-sum__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 .6rem; }
.av-co-sum__total dt { color: var(--av-muted); }
.av-co-sum__total dd { margin: 0; font-family: var(--av-font-display); font-size: 1.9rem; font-weight: 600; color: var(--av-gold-2); }
.av-co-sum .av-hint { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--av-line); }

.av-co-form .av-form__errors { margin-bottom: 1.4rem; }
.av-co .av-field .av-co-err, .av-co .av-co-agree .av-co-err { color: #f39aa4; font-weight: 500; }
.av-app .av-co input[aria-invalid="true"] { border-color: var(--av-rose); box-shadow: 0 0 0 3px rgba(232, 112, 125, .14); }
.av-co-agree { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--av-line); }
.av-co-agree__item { margin-bottom: .5rem; }
.av-co-agree .av-check { margin-top: 0; }
.av-co-agree .av-co-err { padding-left: 1.85rem; margin-top: .3rem; }
.av-co-ent { margin-top: 1rem !important; }

/* ---------- Bước 3: thanh toán ---------- */
.av-co-statusbar { display: flex; align-items: stretch; gap: .8rem; margin-bottom: 1.2rem; }
.av-co-status { flex: 1 1 auto; min-width: 0; display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.2rem; border: 1px solid var(--av-line-strong); border-radius: var(--av-radius-sm); background: rgba(139, 124, 246, .08); }
.av-co-status__body { min-width: 0; flex: 1; }
.av-co-status__body strong { display: block; font-weight: 600; }
.av-co-status__body p { margin: .35rem 0 0; color: var(--av-muted); font-size: .92rem; }
.av-co-status > .av-co-ico { margin-top: 1px; }
.av-co-status__btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.av-co-statusbar.is-wrong .av-co-status, .av-co-statusbar.is-error .av-co-status { border-color: rgba(232, 112, 125, .5); background: rgba(232, 112, 125, .08); color: var(--av-text); }
.av-co-statusbar.is-wrong .av-co-status > .av-co-ico, .av-co-statusbar.is-error .av-co-status > .av-co-ico { color: var(--av-rose); }
.av-co-statusbar.is-expired .av-co-status { border-color: rgba(230, 194, 122, .45); background: rgba(230, 194, 122, .08); }
.av-co-statusbar.is-expired .av-co-status > .av-co-ico { color: var(--av-gold); }
.av-co-pulse { flex: none; position: relative; width: 12px; height: 12px; margin: .45rem .5rem 0 .25rem; border-radius: 50%; background: var(--av-violet); }
.av-co-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--av-violet); animation: av-co-pulse 1.8s ease-out infinite; }
@keyframes av-co-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
.av-co-timer { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 130px; padding: .6rem 1rem; border: 1px solid var(--av-line-strong); border-radius: var(--av-radius-sm); background: rgba(255, 255, 255, .03); text-align: center; }
.av-co-timer__lbl { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--av-muted); }
.av-co-timer__val { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.7rem; font-weight: 600; color: var(--av-gold-2); line-height: 1.3; font-variant-numeric: tabular-nums; }
.av-co-statusbar.is-expired .av-co-timer__val { color: var(--av-muted); }

.av-co-pay { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1.5rem; align-items: start; transition: opacity .3s; }
.av-co-pay.is-dead { opacity: .5; }
.av-co-pay.is-dead .av-co-qr__frame { filter: grayscale(1); }
.av-co-qr { text-align: center; }
.av-co-qr__frame { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; margin: 0 auto 1rem; padding: 10px; border-radius: 14px; background: #fff; overflow: hidden; }
.av-co-qr__svg, .av-co-qr__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.av-co-qr__frame.is-loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, #eceaf6 30%, #f8f7fd 50%, #eceaf6 70%); background-size: 200% 100%; animation: av-co-shimmer 1.3s linear infinite; }
@keyframes av-co-shimmer { to { background-position: -200% 0; } }
.av-co .av-co-qr__note { margin: 0 0 1rem; text-align: left; font-size: .86rem; }
.av-co-qr__cap { margin: 0 !important; }
.av-co-qr__cap strong { display: block; font-weight: 600; }
.av-co-qr__cap span { display: block; color: var(--av-muted); font-size: .88rem; margin-top: .2rem; }

.av-co-rows { margin: 0 0 1.2rem; }
.av-co-row { padding: .8rem 0; border-bottom: 1px solid var(--av-line); }
.av-co-row:first-child { padding-top: 0; }
.av-co-row dt { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--av-muted); margin-bottom: .3rem; }
.av-co-row dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.av-co-val { min-width: 0; font-size: 1.08rem; font-weight: 500; }
.av-co-val.is-missing { color: var(--av-muted); font-style: italic; font-weight: 400; font-size: 1rem; }
.av-co-row.is-hl { margin: .3rem -.8rem; padding: .8rem; border: 1px solid rgba(230, 194, 122, .5); border-radius: var(--av-radius-sm); background: rgba(230, 194, 122, .07); }
.av-co-row.is-hl .av-co-val { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.3rem; letter-spacing: .1em; color: var(--av-gold-2); font-weight: 600; }
.av-co-copy { flex: none; min-width: 108px; }
.av-co-copy.is-copied { border-color: var(--av-teal); color: var(--av-teal) !important; background: rgba(111, 195, 192, .1); }
.av-co-warn { margin: 0 !important; }

.av-co-sim { margin-top: 1.5rem; padding: 1rem 1.2rem; border: 1px dashed rgba(230, 194, 122, .5); border-radius: var(--av-radius-sm); background: rgba(230, 194, 122, .03); }
.av-co-sim__title { margin: 0 0 .7rem !important; font-size: .88rem; color: var(--av-gold); font-weight: 500; }
.av-co-sim__btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.av-co-sim__btns .av-btn[aria-pressed="true"] { border-color: var(--av-gold); background: rgba(230, 194, 122, .16); color: var(--av-gold-2) !important; }
.av-co-keep { margin: 0 !important; }

/* ---------- Bước 4: hoàn tất ---------- */
.av-co-done { text-align: center; max-width: 620px; margin: 0 auto 1.6rem; }
.av-co-done__badge { width: 76px; height: 76px; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 50%; color: var(--av-teal); border: 1.5px solid rgba(111, 195, 192, .6); background: radial-gradient(circle, rgba(111, 195, 192, .22), rgba(111, 195, 192, .05)); box-shadow: 0 0 40px -6px rgba(111, 195, 192, .5); }
.av-co-done .av-co-step__lead { margin-bottom: 0 !important; }
.av-co-receipt { max-width: 680px; margin: 0 auto; }
.av-co-rec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 0 0 1.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--av-line); }
.av-co-rec dt { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--av-muted); margin-bottom: .2rem; }
.av-co-rec dd { margin: 0; font-weight: 500; }
.av-co-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; color: var(--av-gold-2); }
.av-co-mailnote { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1.4rem; }
.av-co-mailnote .av-co-ico { color: var(--av-teal); margin-top: 2px; }
.av-co-mailnote p { margin: 0; }
.av-co-resend { margin: 1.6rem 0 0; }
.av-co-resend p { font-size: .92rem; }
.av-co-receipt .av-toast { display: block; text-align: center; margin: 1rem auto 0 !important; }

/* ---------- Chân trang tin cậy ---------- */
.av-co-trust { margin: 2.6rem auto 0; max-width: 680px; padding-top: 1.4rem; border-top: 1px solid var(--av-line); text-align: center; font-size: .86rem; color: var(--av-muted); }
.av-co-trust p { margin: 0 0 .6rem; }
.av-co-trust__title { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--av-text); font-weight: 500; font-size: .95rem; }
.av-co-trust__title .av-co-ico { color: var(--av-gold); }
.av-co-trust__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.2rem; margin: 0 !important; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .av-co-assure { grid-template-columns: 1fr; gap: 1rem; }
  .av-co-split { grid-template-columns: 1fr; }
  .av-co-sum { position: static; order: -1; }
  .av-co-sum__feat { display: none; }
  .av-co-sum__plan { flex-direction: row; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .1rem .8rem; }
  .av-co-sum .av-hint { display: none; }
  .av-co-pay { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .av-co-steps { margin-bottom: 1.6rem; }
  .av-co-steps__item { font-size: .72rem; }
  .av-co-steps__dot { width: 32px; height: 32px; }
  .av-co-steps__item::before { top: 15px; }
  .av-co-step__head { margin-bottom: 1.4rem; }
  .av-co-plan__box { padding: 1.5rem 1.2rem 1.2rem; }
  .av-co-statusbar { flex-direction: column; }
  .av-co-timer { flex-direction: row; justify-content: space-between; gap: .8rem; min-width: 0; padding: .5rem 1rem; }
  .av-co-timer__val { font-size: 1.4rem; }
  .av-co-status { padding: .9rem 1rem; }
  .av-co-status__btns .av-btn { flex: 1 1 100%; }
  .av-co-row.is-hl { margin-inline: -.5rem; padding: .7rem .6rem; }
  .av-co-row.is-hl .av-co-val { font-size: 1.12rem; letter-spacing: .06em; }
  .av-co-copy { min-width: 96px; padding-inline: .8rem; }
  .av-co-actions { flex-direction: column-reverse; align-items: stretch; }
  .av-co-actions .av-btn { width: 100%; }
  .av-co-actions--center { flex-direction: column; }
  .av-co-actions--start { flex-direction: column; align-items: stretch; }
  .av-co-actions--start .av-co-keep { text-align: center; }
  .av-co-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .av-co-bar .av-btn { width: 100%; }
  .av-co-rec { grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
  .av-co-sim__btns .av-btn { flex: 1 1 calc(50% - .5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .av-co-pulse::after, .av-co-qr__frame.is-loading::after { animation: none; }
  .av-co-plan__box, .av-co-pay { transition: none; }
  .av-co-plan:hover .av-co-plan__box { transform: none; }
}