/* ══════════════════════════════════════════════════════════
   membership.css — REQ-27 trang gói thành viên (vne-v3)
   ------------------------------------------------------------
   Component bespoke của luồng mua gói: stepper, thẻ gói, tabs
   nhóm chỉ số, thẻ chứng chỉ có ảnh, tooltip desktop, bottom
   sheet cho cảm ứng, thanh tổng kết.
   Layout/spacing/responsive dùng utility Tailwind trong view.
   Màu/khoảng cách lấy từ token DS (--brand-*, --space-*…).

   Nạp qua @section pageCss (SAU vne-v3.min.css).
   ══════════════════════════════════════════════════════════ */

/* ── Banner cảnh báo: DN đang có order Membership "treo" (chờ thanh toán / chờ duyệt) ── */
.ms-cart-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md, 10px);
    background: var(--warning-100);
    color: var(--warning-600);
    font-size: .9375rem;
    line-height: 1.5;
}
.ms-cart-warning svg,
.ms-cart-warning i {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 2px;
}

/* ── Stepper: Chọn gói → Chứng chỉ → Giỏ hàng ───────────────── */
.ms-steps {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ms-step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: .875rem;
    font-weight: var(--weight-medium);
    color: var(--text-tertiary);
    white-space: nowrap;
}

.ms-step__dot {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: .72rem;
    line-height: 1;
    background: var(--surface-card);
}

.ms-step--active { color: var(--text-primary); font-weight: var(--weight-semibold); }

.ms-step--active .ms-step__dot {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: var(--text-on-brand);
}

.ms-step--done .ms-step__dot {
    background: var(--brand-50);
    border-color: var(--brand-300);
    color: var(--brand-700);
}

.ms-steps__sep { width: 28px; height: 1px; background: var(--border-default); flex: none; }

@media (max-width: 640px) {
    .ms-steps__sep { width: 14px; }
    .ms-step__label { display: none; }
    .ms-step--active .ms-step__label { display: inline; }
}

/* ── Nhóm quyền lợi (trang Verified / Audited) ──────────────── */
.ms-grouplabel {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: var(--weight-semibold);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.ms-grouplabel::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }

.ms-benefit { display: flex; gap: var(--space-4); }

.ms-benefit__icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-50);
    color: var(--brand-600);
}

.ms-benefit__icon svg { width: 19px; height: 19px; }

.ms-benefit__title {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    line-height: 1.35;
}

.ms-benefit__desc { margin-top: 2px; font-size: .9375rem; line-height: 1.6; color: var(--text-secondary); }

.ms-accent .ms-benefit__icon { background: var(--accent-50); color: var(--accent-600); }

/* ── Thẻ giá (sticky) ───────────────────────────────────────── */
.ms-pricecard {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.ms-pricecard__head {
    padding: var(--space-6);
    background: linear-gradient(160deg, var(--brand-700) 0%, var(--brand-600) 55%, var(--brand-500) 100%);
    color: var(--text-inverse);
}

.ms-accent .ms-pricecard__head {
    background: linear-gradient(160deg, var(--accent-700) 0%, var(--accent-600) 55%, var(--accent-500) 100%);
}

.ms-pricecard__amount {
    font-family: var(--font-mono);
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.02em;
}

/* Dòng ưu đãi mua nhiều năm — nằm trong header tối màu của thẻ giá */
.ms-pricecard__save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .18);
    font-size: .8125rem;
    font-weight: var(--weight-semibold);
    line-height: 1.4;
}

.ms-pricecard__body { padding: var(--space-6); }

.ms-pricecard__list { display: grid; gap: var(--space-3); font-size: .9375rem; color: var(--text-secondary); }
.ms-pricecard__list li { display: flex; gap: var(--space-2); align-items: flex-start; line-height: 1.55; }
.ms-pricecard__list svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--success-600); }

/* ══════════════════════════════════════════════════════════
   PANEL GÓI (trang Trust Verified / Trust Audited)
   Bố cục 1 khối dọc: header + giá → khối "phù hợp với" →
   các nhóm quyền lợi → CTA. Đổi tông bằng .ms-plan--accent.
   ══════════════════════════════════════════════════════════ */
.ms-plan {
    --_c600: var(--brand-600);
    --_c700: var(--brand-700);
    --_c50: var(--brand-50);
    --_c300: var(--brand-300);

    max-width: 720px;
    margin-inline: auto;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.ms-plan--accent {
    --_c600: var(--accent-600);
    --_c700: var(--accent-700);
    --_c50: var(--accent-50);
    --_c300: var(--accent-300);
}

/* ── Header: tên gói + giá ───────────────────────────────────── */
.ms-plan__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-7) var(--space-7) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
}

.ms-plan__name {
    font-family: var(--font-display);
    font-weight: var(--weight-extra);
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.875rem);
    line-height: 1.15;
    letter-spacing: var(--tracking-tight);
    color: var(--_c700);
    margin: 0;
}

.ms-plan__sub {
    margin-top: var(--space-2);
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 34ch;
}

.ms-plan__price {
    flex: none;
    text-align: center;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--_c600);
    color: var(--text-inverse);
}

.ms-plan__amount {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.01em;
}

.ms-plan__per { display: block; font-size: .875rem; font-weight: var(--weight-semibold); opacity: .92; }
.ms-plan__vat { display: block; margin-top: 4px; font-size: .6875rem; opacity: .8; }

@media (max-width: 640px) {
    .ms-plan__head {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-6) var(--space-5) var(--space-5);
    }

    .ms-plan__sub { max-width: none; }
    .ms-plan__price { display: flex; align-items: baseline; justify-content: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
    .ms-plan__vat { width: 100%; margin-top: 0; }
}

/* ── Thân panel ─────────────────────────────────────────────── */
.ms-plan__body { padding: var(--space-6) var(--space-7) var(--space-7); }

@media (max-width: 640px) {
    .ms-plan__body { padding: var(--space-5); }
}

/* Khối "PHÙ HỢP VỚI" */
.ms-plan__fit {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--_c50);
    border: 1px solid var(--_c300);
}

.ms-plan__chip {
    display: inline-block;
    margin-bottom: var(--space-2);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--_c600);
    color: var(--text-inverse);
    font-family: var(--font-body);
    font-size: .625rem;
    font-weight: var(--weight-semibold);
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.4;
}

.ms-plan__fit p { font-size: .9375rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }
.ms-plan__fit strong { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* Tiêu đề nhóm quyền lợi */
.ms-plan__grouptitle {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: .8125rem;
    font-weight: var(--weight-bold);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--_c600);
    margin: 0;
}

.ms-plan__groupno { font-family: var(--font-mono); font-weight: 600; }

/* Item quyền lợi */
.ms-plan__item { display: flex; gap: var(--space-4); }

.ms-plan__icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--_c50);
    color: var(--_c600);
}

.ms-plan__icon svg { width: 18px; height: 18px; }

.ms-plan__itemtitle {
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    color: var(--text-primary);
}

.ms-plan__itemdesc { margin-top: 3px; font-size: .875rem; line-height: 1.6; color: var(--text-secondary); }

/* Danh sách tick (điều kiện triển khai) */
.ms-plan__checks { display: grid; gap: var(--space-3); }

.ms-plan__checks li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.ms-plan__checks svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--_c600); stroke-width: 2.5; }

/* CTA cuối panel */
.ms-plan__cta { display: grid; gap: var(--space-3); }
.ms-plan__cta--two { grid-template-columns: 1fr; }

@media (min-width: 560px) {
    .ms-plan__cta--two { grid-template-columns: 1fr 1fr; }
}

/* Nút chính là thẻ <a>, bị .vne-v3 a{color:inherit} (specificity cao hơn .vn-btn)
   ghi đè thành chữ đen → trả lại chữ trắng trên nền brand.
   Áp cho mọi nút chính dạng <a> trong trang membership (kể cả ngoài .ms-plan,
   ví dụ trang xác nhận yêu cầu tư vấn Audited). */
.vne-v3 a.vn-btn--primary { color: var(--text-on-brand); }
.ms-plan .vn-btn--primary { color: var(--text-on-brand); }

/* Nút tông accent cho trang Audited — chữ trắng trên nền terracotta */
.ms-plan--accent .vn-btn--primary { background: var(--accent-600); color: var(--text-inverse); }
.ms-plan--accent .vn-btn--primary:hover { background: var(--accent-700); color: var(--text-inverse); }

.ms-plan--accent .vn-btn--secondary {
    border-color: var(--accent-300);
    color: var(--accent-700);
}

.ms-plan--accent .vn-btn--secondary:hover { background: var(--accent-50); border-color: var(--accent-500); }

.ms-plan__foot {
    margin-top: var(--space-5);
    text-align: center;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ══════════════════════════════════════════════════════════
   BIẾN THỂ TRANG TRUST AUDITED™
   Header canh giữa (tên gói → giá → ghi chú chi phí đánh giá),
   hộp so sánh Verified vs Audited, danh sách tick có mô tả.
   ══════════════════════════════════════════════════════════ */

/* ── Header dọc, canh giữa: giá nằm dưới tên gói ─────────────── */
.ms-plan__head--stack {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

.ms-plan__head--stack .ms-plan__sub { max-width: none; }

.ms-plan__priceline {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.ms-plan__priceline strong {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--_c700);
}

.ms-plan__pricenote {
    margin-top: var(--space-2);
    font-size: .8125rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--text-tertiary);
}

/* ── Hộp so sánh Trust Verified™ vs Trust Audited™ ───────────── */
.ms-plan__compare {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    border: 1.5px solid var(--_c600);
    border-radius: var(--radius-md);
    background: var(--_c50);
    text-align: center;
}

@media (max-width: 640px) {
    .ms-plan__compare { padding: var(--space-4); text-align: left; }
}

.ms-plan__compare-name {
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    color: var(--_c700);
}

.ms-plan__compare p {
    margin-top: var(--space-1);
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.ms-plan__compare strong { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* ── Danh sách tick có tiêu đề + mô tả (quyền lợi Audited) ───── */
.ms-plan__checks--detail { gap: var(--space-5); }

/* ── Ghi chú in nghiêng cuối khối / cuối panel ───────────────── */
.ms-plan__note {
    margin-top: var(--space-5);
    font-size: .875rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--text-secondary);
}

.ms-plan__foot--italic { font-style: italic; }

/* ══════════════════════════════════════════════════════════
   MÀN BƯỚC 2 — THỜI HẠN GÓI + CHỨNG CHỈ BỔ SUNG
   ══════════════════════════════════════════════════════════ */

/* ── Chọn thời hạn: 1 / 2 / 3 năm ───────────────────────────── */
.ms-terms {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .ms-terms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Trạng thái chọn đi theo class .is-selected (JS đồng bộ từ radio), cùng
   quy ước với .ms-cert.is-selected — không phụ thuộc selector anh-em. */
.ms-term { position: relative; display: block; }

/* Radio thật (ẩn nhìn, giữ ngữ nghĩa + điều hướng bằng phím mũi tên) */
.ms-term__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ms-term__box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-5);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
}

.ms-term__box:hover { border-color: var(--border-strong); }

.ms-term.is-selected .ms-term__box {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 1px var(--brand-600);
    background: var(--brand-50);
}

.ms-term__radio:focus-visible + .ms-term__box {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.ms-term__top {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Chấm radio vẽ tay để khớp tông DS */
.ms-term__dot {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border-strong);
    background: var(--surface-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
}

.ms-term__dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--text-inverse);
    transform: scale(0);
    transition: transform var(--duration-fast) var(--ease-standard);
}

.ms-term.is-selected .ms-term__dot {
    border-color: var(--brand-600);
    background: var(--brand-600);
}

.ms-term.is-selected .ms-term__dot::after { transform: scale(1); }

.ms-term__label {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: var(--weight-bold);
    line-height: 1.2;
    color: var(--text-primary);
}

/* Badge góc phải: "−10%" hoặc "Mặc định" */
.ms-term__off,
.ms-term__tag {
    margin-left: auto;
    flex: none;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: .6875rem;
    font-weight: var(--weight-bold);
    letter-spacing: .02em;
    line-height: 1.4;
}

.ms-term__off { background: var(--success-100); color: var(--success-600); }
.ms-term__tag { background: var(--surface-muted); color: var(--text-tertiary); }

.ms-term__prices {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: 2px;
}

.ms-term__pay {
    font-family: var(--font-mono);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.015em;
    color: var(--text-primary);
}

.ms-term.is-selected .ms-term__pay { color: var(--brand-700); }

.ms-term__was {
    font-family: var(--font-mono);
    font-size: .8125rem;
    color: var(--text-tertiary);
    text-decoration: line-through;
}

.ms-term__note {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--text-tertiary);
}

.ms-term__note svg { width: 14px; height: 14px; flex: none; }
.ms-term__note--save { color: var(--success-600); font-weight: var(--weight-semibold); }

/* Ghi chú dưới nhóm thẻ thời hạn */
.ms-terms__hint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--text-tertiary);
}

.ms-terms__hint svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }

/* ── Khối mở rộng "chứng chỉ bổ sung" (mặc định thu gọn) ────── */
.ms-more { margin-top: var(--space-10); }

.ms-more__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    background: linear-gradient(115deg, var(--brand-50) 0%, var(--surface-card) 58%);
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
}

/* Bỏ mũi tên mặc định của <summary> */
.ms-more__head::-webkit-details-marker { display: none; }
.ms-more__head::marker { content: ""; }

.ms-more__head:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); }
.ms-more__head:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.ms-more__icon {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-600);
    color: var(--text-on-brand);
}

.ms-more__icon svg { width: 20px; height: 20px; }

.ms-more__text { min-width: 0; flex: 1; }

.ms-more__title {
    display: block;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: var(--weight-bold);
    line-height: 1.35;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

.ms-more__sub {
    display: block;
    margin-top: 3px;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.ms-more__cue {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    font-family: var(--font-body);
    font-size: .875rem;
    font-weight: var(--weight-semibold);
    color: var(--brand-600);
    white-space: nowrap;
}

.ms-more__picked {
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--success-100);
    color: var(--success-600);
    font-size: .6875rem;
    font-weight: var(--weight-bold);
    line-height: 1.4;
}

.ms-more__chev {
    width: 18px;
    height: 18px;
    transition: transform var(--duration-fast) var(--ease-standard);
}

.ms-more[open] .ms-more__chev { transform: rotate(180deg); }

.ms-more__cuetext--close { display: none; }
.ms-more[open] .ms-more__cuetext--open { display: none; }
.ms-more[open] .ms-more__cuetext--close { display: inline; }

.ms-more__body {
    padding-top: var(--space-10);
    animation: ms-more-in 240ms var(--ease-standard);
}

@keyframes ms-more-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.ms-more__h {
    font-family: var(--font-display);
    font-weight: var(--weight-extra);
    font-size: clamp(1.375rem, 1.1rem + .9vw, 1.625rem);
    line-height: 1.2;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .ms-more__head {
        flex-wrap: wrap;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-5);
    }

    .ms-more__text { flex: 1 1 100%; order: 2; }
    .ms-more__cue { order: 1; margin-left: auto; }
    .ms-more__icon { order: 0; }
    .ms-more__cuetext--open,
    .ms-more__cuetext--close { display: none; }
    .ms-more[open] .ms-more__cuetext--close { display: none; }
}

/* ══════════════════════════════════════════════════════════
   MÀN CHỌN CHỨNG CHỈ
   ══════════════════════════════════════════════════════════ */

/* ── Tabs lọc nhóm chỉ số ───────────────────────────────────── */
.ms-tabs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.ms-tabs::-webkit-scrollbar { display: none; }

.ms-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    padding: 9px 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: .875rem;
    font-weight: var(--weight-semibold);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.ms-tab:hover { border-color: var(--border-strong); color: var(--text-primary); }

.ms-tab[aria-selected="true"] {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: var(--text-inverse);
}

.ms-tab__logo { width: 20px; height: 20px; object-fit: contain; flex: none; }
.ms-tab[aria-selected="true"] .ms-tab__logo { filter: brightness(0) invert(1); }

.ms-tab__n {
    font-family: var(--font-mono);
    font-size: .6875rem;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    color: var(--text-tertiary);
}

.ms-tab[aria-selected="true"] .ms-tab__n { background: rgba(255, 255, 255, .22); color: #fff; }

/* Badge "đã chọn n" trên tab */
.ms-tab__picked {
    font-family: var(--font-mono);
    font-size: .6875rem;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: var(--success-100);
    color: var(--success-600);
}

.ms-tab[aria-selected="true"] .ms-tab__picked { background: rgba(255, 255, 255, .22); color: #fff; }

/* ── Header của 1 nhóm chỉ số ───────────────────────────────── */
.ms-group__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.ms-group__logo {
    width: 52px;
    height: 52px;
    flex: none;
    object-fit: contain;
}

.ms-group__name {
    font-family: var(--font-display);
    font-weight: var(--weight-extra);
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

.ms-group__tagline { font-size: .9375rem; color: var(--text-secondary); margin-top: 2px; }

.ms-group__count {
    margin-left: auto;
    font-size: .8125rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* ── Thẻ chứng chỉ ──────────────────────────────────────────── */
.ms-cert {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard);
}

.ms-cert:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.ms-cert.is-selected {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 1px var(--brand-600);
}

/* Doanh nghiệp đã sở hữu (hoặc đang chờ duyệt/chờ thanh toán) giải pháp này — không cho
   chọn mua trùng. Ảnh + tagline mờ đi, nút chọn khoá lại, có badge báo trạng thái. */
.ms-cert--owned { opacity: .6; }
.ms-cert--owned .ms-cert__pick,
.ms-cert--owned .ms-cert__state { cursor: not-allowed; pointer-events: none; }
.ms-cert--owned:hover { box-shadow: none; transform: none; }

.ms-cert__owned-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--neutral-900, #1a1815);
    color: #fff;
    font-size: .6875rem;
    font-weight: var(--weight-semibold);
}
.ms-cert__owned-badge svg { width: 12px; height: 12px; }

/* Vùng bấm chọn = ảnh + tagline + giá */
.ms-cert__pick {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex: 1;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ms-cert__pick:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }

.ms-cert__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    background: var(--surface-muted);
    overflow: hidden;
}

.ms-cert__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--duration-slow, 320ms) var(--ease-standard);
}

.ms-cert:hover .ms-cert__media img { transform: scale(1.03); }

/* Lớp phủ nhẹ khi đã chọn để thấy rõ trạng thái */
.ms-cert.is-selected .ms-cert__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(47, 83, 104, .16);
}

.ms-cert__tick {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-pill);
    border: 2px solid #fff;
    background: rgba(26, 24, 21, .32);
    backdrop-filter: blur(3px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background var(--duration-fast) var(--ease-standard);
}

.ms-cert__tick svg { width: 14px; height: 14px; stroke-width: 3; opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.ms-cert.is-selected .ms-cert__tick { background: var(--brand-600); border-color: #fff; }
.ms-cert.is-selected .ms-cert__tick svg { opacity: 1; }

.ms-cert__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    padding: var(--space-4) var(--space-5) var(--space-3);
}

/* Tên đầy đủ chỉ dành cho screen reader — tên đã có sẵn trong ảnh */
.ms-cert__srname {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ms-cert__tagline {
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: var(--weight-semibold);
    line-height: 1.45;
    color: var(--text-primary);
}

.ms-cert__price {
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: .9375rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.ms-cert.is-selected .ms-cert__price { color: var(--brand-700); }

/* Dòng hiệu lực nằm ngay dưới giá — là chữ thường, KHÔNG dùng font mono
   như số tiền (mono chỉ dành cho con số để các cột số thẳng hàng nhau). */
.ms-cert__term {
    margin-top: 2px;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--text-tertiary);
}

/* Chân thẻ: trạng thái chọn + nút xem module (chạy được trên mọi thiết bị) */
.ms-cert__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0 var(--space-5) var(--space-4);
}

.ms-cert__state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px 6px 2px;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: .8125rem;
    font-weight: var(--weight-semibold);
    color: var(--text-tertiary);
    cursor: pointer;
    line-height: 1;
    transition: color var(--duration-fast) var(--ease-standard);
}

.ms-cert__state:hover { color: var(--text-primary); }
.ms-cert__state svg { width: 14px; height: 14px; }
.ms-cert.is-selected .ms-cert__state { color: var(--success-600); }

.ms-cert__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    font-family: var(--font-body);
    font-size: .8125rem;
    font-weight: var(--weight-semibold);
    color: var(--brand-600);
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}

.ms-cert__more:hover { background: var(--brand-50); border-color: var(--brand-300); }
.ms-cert__more svg { width: 14px; height: 14px; }

/* ── Tooltip chi tiết (CHỈ máy có chuột — là phần thưởng thêm,
      mọi thiết bị vẫn xem được chi tiết qua nút "Xem module") ── */
.ms-tip {
    position: fixed;
    z-index: 70;
    width: 340px;
    max-width: calc(100vw - 32px);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-5);
    opacity: 0;
    transform: translateY(4px) scale(.98);
    pointer-events: none;
    transition: opacity 140ms var(--ease-standard), transform 140ms var(--ease-standard);
}

.ms-tip--open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.ms-tip__arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--surface-card);
    border-left: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
    transform: rotate(45deg);
}

.ms-tip[data-side="right"] .ms-tip__arrow { left: -7px; }
.ms-tip[data-side="left"]  .ms-tip__arrow { right: -7px; transform: rotate(225deg); }

/* Không có chuột → không bao giờ hiện tooltip */
@media not all and (hover: hover) {
    .ms-tip { display: none; }
}

/* ── Nội dung chi tiết (dùng chung tooltip + sheet) ─────────── */
.ms-detail__media {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    background: var(--surface-muted);
}

.ms-detail__name {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: var(--weight-bold);
    line-height: 1.3;
    color: var(--text-primary);
}

.ms-detail__tagline { margin-top: 4px; font-size: .875rem; font-weight: var(--weight-medium); color: var(--brand-600); }
.ms-detail__desc { margin-top: var(--space-3); font-size: .875rem; line-height: 1.65; color: var(--text-secondary); }

.ms-detail__label {
    margin-top: var(--space-5);
    font-size: .6875rem;
    font-weight: var(--weight-semibold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.ms-detail__list { margin-top: var(--space-3); display: grid; gap: var(--space-2); }

.ms-detail__list li {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.ms-detail__list svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--success-600); stroke-width: 2.5; }

.ms-detail__foot {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.ms-detail__pricebox { display: flex; flex-direction: column; min-width: 0; }

/* Số tiền không bao giờ được bẻ đôi ("5.000.000₫/" | "lượt cấp"). */
.ms-detail__price { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; }

/* Dòng hiệu lực nằm ngay dưới giá — chữ thường, KHÔNG dùng font mono như số
   tiền (cùng quy ước với .ms-cert__term ở thẻ giải pháp). */
.ms-detail__term {
    margin-top: 2px;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--text-tertiary);
}

/* Tooltip rộng cố định 340px — dòng giá "5.000.000₫/lượt cấp" cộng nút "Chọn giải
   pháp này" không đủ chỗ trên cùng một hàng, nên xếp dọc giống bottom sheet trên
   mobile thay vì để dòng giá bị bẻ đôi. Bottom sheet (460px) vẫn đủ chỗ nằm ngang. */
.ms-tip .ms-detail__foot { flex-direction: column; align-items: stretch; }
.ms-tip .ms-detail__foot .vn-btn { width: 100%; }

/* Trong tooltip thì bỏ ảnh cho gọn — ảnh đã thấy ngay trên thẻ */
.ms-tip .ms-detail__media { display: none; }

/* ── Bottom sheet (đường xem chi tiết cho MỌI thiết bị) ─────── */
.ms-sheet {
    border: none;
    padding: 0;
    background: transparent;
    max-width: min(460px, calc(100vw - 24px));
    width: 100%;
    max-height: 86vh;
    overflow: visible;
}

.ms-sheet::backdrop { background: var(--surface-overlay); }

.ms-sheet__panel {
    position: relative;
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-xl);
    max-height: 86vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ms-sheet__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    border: none;
    background: rgba(26, 24, 21, .48);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(3px);
}

.ms-sheet__close svg { width: 17px; height: 17px; }
.ms-sheet__grab { display: none; }

/* Mobile → dán đáy màn hình, trượt lên, tay kéo ở trên */
@media (max-width: 640px) {
    .ms-sheet {
        max-width: 100%;
        width: 100%;
        margin: 0;
        margin-top: auto;
        max-height: 88vh;
        border-radius: 0;
    }

    .ms-sheet[open] { animation: ms-sheet-up 240ms var(--ease-standard); }

    .ms-sheet__panel {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding: var(--space-4) var(--space-5) var(--space-6);
        max-height: 88vh;
    }

    .ms-sheet__grab {
        display: block;
        width: 40px;
        height: 4px;
        margin: 0 auto var(--space-4);
        border-radius: var(--radius-pill);
        background: var(--border-strong);
    }

    .ms-sheet__close { top: var(--space-3); right: var(--space-3); }
    .ms-detail__foot { flex-direction: column; align-items: stretch; }
    .ms-detail__foot .vn-btn { width: 100%; }
    /* Canh giữa cả cụm giá + hiệu lực, không chỉ riêng dòng giá */
    .ms-detail__pricebox { text-align: center; }
}

@keyframes ms-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ── Thanh tổng kết dính đáy ────────────────────────────────── */
/* Trang chứng chỉ dùng _FooterTailwind — footer position:fixed cao 56px, luôn
   che 56px cuối khung nhìn — nên thanh tổng kết phải nhấc lên đúng ngần ấy. */
:root { --ms-footer-h: 56px; }

.ms-summary {
    position: sticky;
    bottom: var(--ms-footer-h);
    z-index: 40;
    background: color-mix(in srgb, var(--surface-card) 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-default);
    box-shadow: 0 -6px 24px rgba(26, 24, 21, .07);
}

.ms-summary__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    flex-wrap: wrap;
}

.ms-summary__total { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; color: var(--text-primary); line-height: 1.1; }
.ms-summary__meta { font-size: .8125rem; color: var(--text-tertiary); }

/* Thanh tổng kết là sticky nên nó vẫn chiếm chỗ ở cuối luồng, nhưng vì bị nhấc
   lên 56px so với chỗ đó nên nó lấn ngược 56px vào phần nội dung phía trên —
   khối cuối cùng bị đè khi cuộn hết trang. Padding đáy phải bù đúng 56px đó,
   phần --space-12 còn lại mới thật sự là khoảng thở như thiết kế.
   Ghi đè .pb-12 của view (cùng specificity, membership.css nạp sau theme). */
[data-ms-certs] { padding-bottom: calc(var(--space-12) + var(--ms-footer-h)); }

@media (max-width: 640px) {
    .ms-summary__inner {
        gap: var(--space-2);
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
    }

    .ms-summary__inner > * { width: 100%; }
    .ms-summary__inner .vn-btn--lg { width: 100%; }
    .ms-summary__total { font-size: 1.0625rem; }
    .ms-summary__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ── Ghi chú dữ liệu demo ───────────────────────────────────── */
.ms-note {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    font-size: .875rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.ms-note svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--warning-600); }

@media (prefers-reduced-motion: reduce) {
    .ms-cert, .ms-tip, .ms-cert__media img,
    .ms-term__box, .ms-term__dot, .ms-term__dot::after,
    .ms-more__head, .ms-more__chev { transition: none; }
    .ms-cert:hover { transform: none; }
    .ms-cert:hover .ms-cert__media img { transform: none; }
    .ms-sheet[open] { animation: none; }
    .ms-more__body { animation: none; }
}