/* Final compatibility layer for legacy page-level styles. Loaded after page CSS. */
.az-app {
    background-color: var(--az-bg) !important;
    color: var(--az-text) !important;
}

.az-app [style*="color: #1e293b"],
.az-app [style*="color:#1e293b"],
.az-app [style*="color: #0f172a"],
.az-app [style*="color:#0f172a"],
.az-app [style*="color: #111827"],
.az-app [style*="color:#111827"] {
    color: var(--az-text) !important;
}

.az-app [style*="background: #fff"],
.az-app [style*="background:#fff"],
.az-app [style*="background: white"],
.az-app [style*="background-color: #fff"],
.az-app [style*="background-color:#fff"] {
    background: var(--az-surface) !important;
}

.az-app .user-dashboard-clean,
.az-app .zalo-page,
.az-app .zalo-accounts-page,
.az-app .deposit-page,
.az-app .buyplan-page,
.az-app .admin-page,
.az-app .admin-dashboard-wrap,
.az-app .user-admin-wrap,
.az-app .plan-admin-wrap,
.az-app .mail-page {
    width: min(100% - 2rem, 80rem);
    max-width: 80rem !important;
    margin-inline: auto;
    padding-top: 2rem !important;
    padding-bottom: 5rem !important;
}

.az-app .page-heading h3,
.az-app .buyplan-title,
.az-app .buyplan-hero-title,
.az-app .deposit-title,
.az-app .deposit-page h1,
.az-app .deposit-page h2,
.az-app .zalo-page h1,
.az-app .zalo-page h2 {
    color: var(--az-text) !important;
    letter-spacing: -.045em !important;
}

.az-app .dashboard-stat-card,
.az-app .dashboard-panel,
.az-app .account-card,
.az-app .zalo-panel,
.az-app .zalo-stat-card,
.az-app .plan-card,
.az-app .buyplan-card,
.az-app .deposit-card,
.az-app .admin-card,
.az-app .admin-panel-card,
.az-app .admin-stat-card,
.az-app .panel-card,
.az-app .stat-card,
.az-app .mini-card,
.az-app .detail-card,
.az-app .summary-card,
.az-app .metric-card {
    border: 1px solid var(--az-line) !important;
    background: rgba(10, 23, 40, .88) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 18px 50px rgba(0, 53, 90, .12) !important;
    color: var(--az-text) !important;
}

.az-app .form-block,
.az-app .custom-check-box,
.az-app .edit-row-clean,
.az-app .edit-box,
.az-app .zalo-group-box,
.az-app .zalo-empty,
.az-app .account-section,
.az-app .plan-features,
.az-app .buyplan-summary,
.az-app .buyplan-info,
.az-app .buyplan-note,
.az-app .trial-box,
.az-app .trial-help,
.az-app .empty-state-box,
.az-app .bank-box,
.az-app .bank-info-box,
.az-app .qr-box,
.az-app .admin-filter,
.az-app .filter-box,
.az-app .form-box,
.az-app .limit-box,
.az-app .empty-box,
.az-app .chart-box,
.az-app .table-card-empty,
.az-app .template-note,
.az-app .support-note {
    border-color: var(--az-line) !important;
    background: rgba(255,255,255,.025) !important;
    color: var(--az-text) !important;
}

.az-app .form-block-title,
.az-app .form-label-clean,
.az-app .stat-number,
.az-app .stat-text,
.az-app .stat-title,
.az-app .stat-value,
.az-app .zalo-stat-value,
.az-app .mini-value,
.az-app .mini-info-value,
.az-app .page-title,
.az-app .dashboard-heading,
.az-app .plan-name,
.az-app .plan-title,
.az-app .buyplan-plan-name,
.az-app .buyplan-price,
.az-app .deposit-value {
    color: var(--az-text) !important;
}

.az-app .stat-title,
.az-app .stat-subtext,
.az-app .stat-label,
.az-app .stat-note,
.az-app .zalo-stat-label,
.az-app .zalo-stat-note,
.az-app .page-subtitle,
.az-app .dashboard-subtitle,
.az-app .section-note,
.az-app .plan-desc,
.az-app .mini-info-label,
.az-app .buyplan-hero-desc,
.az-app .buyplan-plan-desc,
.az-app .buyplan-meta,
.az-app .deposit-subtitle {
    color: var(--az-muted) !important;
}

.az-app .form-control-clean {
    border-color: var(--az-line) !important;
    background: rgba(3, 13, 23, .72) !important;
    color: var(--az-text) !important;
}

.az-app .campaign-guide-btn,
.az-app .btn-clean,
.az-app .buyplan-button,
.az-app .zalo-btn-pill,
.az-app .zalo-guide-btn,
.az-app .plan-action-btn,
.az-app .quick-link {
    border-radius: .68rem !important;
}

.az-app .campaign-table-clean thead th,
.az-app .zalo-table thead th,
.az-app .deposit-table thead th,
.az-app .table thead th {
    background: rgba(255,255,255,.025) !important;
}

.az-app .buyplan-hero,
.az-app .deposit-hero,
.az-app .admin-hero,
.az-app .hero-box,
.az-app .contact-hero {
    border: 1px solid var(--az-line) !important;
    border-radius: 1.25rem .7rem 1.25rem 1.25rem !important;
    background:
        radial-gradient(circle at 90% 12%, rgba(36,167,255,.18), transparent 24rem),
        var(--az-surface-2) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.045), var(--az-shadow) !important;
}

.az-app .guide-page {
    max-width: 72rem !important;
}

.az-app .section-card,
.az-app .contact-card,
.az-app .contact-info-card {
    border: 1px solid var(--az-line) !important;
    background: var(--az-surface) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 18px 50px rgba(0,53,90,.1) !important;
    color: var(--az-text) !important;
}

.az-app .step-item {
    border-color: var(--az-line) !important;
}

.az-app .step-number {
    border: 1px solid var(--az-line-strong) !important;
    border-radius: .6rem !important;
    background: var(--az-accent-soft) !important;
    color: #89d2ff !important;
}

.az-app .code-box {
    border: 1px solid var(--az-line) !important;
    background: rgba(3,13,23,.82) !important;
    color: #a8dcff !important;
}

.az-app .note-box,
.az-app .tip-box {
    border-color: var(--az-line) !important;
    background: rgba(255,255,255,.025) !important;
    color: #c5d3de !important;
}

.az-app .toast {
    border: 1px solid var(--az-line);
    background: var(--az-surface-2);
    color: var(--az-text);
    box-shadow: var(--az-shadow);
}

.az-app .buyplan-card.selected,
.az-app .plan-card.selected,
.az-app .active-plan {
    border-color: var(--az-accent) !important;
    box-shadow: inset 0 0 0 1px var(--az-accent), 0 18px 50px rgba(2,136,222,.15) !important;
}

.az-app .admin-dashboard-wrap {
    min-height: calc(100dvh - 11rem) !important;
    border-radius: 1.1rem !important;
    background: transparent !important;
}

.az-app .zalo-input,
.az-app .zalo-textarea,
.az-app .zalo-inline-input,
.az-app .deposit-input {
    border-color: var(--az-line) !important;
    background: rgba(3,13,23,.72) !important;
    color: var(--az-text) !important;
}

.az-app .plan-feature-item,
.az-app .bank-row,
.az-app .qr-meta-item,
.az-app .mini-info {
    border-color: var(--az-line) !important;
    background: rgba(255,255,255,.022) !important;
    color: #c7d5df !important;
}

/* Deposit: preserve contrast and contain long bank transfer references. */
.az-app .bank-info-box,
.az-app .qr-meta {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--az-line) !important;
    background: rgba(255,255,255,.028) !important;
}

.az-app .qr-box,
.az-app .qr-image {
    min-width: 0;
    max-width: 100% !important;
}

.az-app .qr-image {
    width: min(100%, 18.75rem);
    height: auto;
}

.az-app .bank-row {
    display: grid !important;
    grid-template-columns: minmax(7.5rem, .7fr) minmax(0, 1.3fr);
    align-items: start !important;
    gap: .75rem;
}

.az-app .bank-label,
.az-app .qr-meta-label {
    color: #93a8bb !important;
    font-weight: 650 !important;
}

.az-app .bank-value,
.az-app .qr-meta-value {
    min-width: 0;
    color: #f2f8fc !important;
    font-weight: 750 !important;
    line-height: 1.45;
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.az-app .bank-row .badge,
.az-app .qr-meta .badge,
.az-app .deposit-table td {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.az-app .bank-row .badge,
.az-app .qr-meta .badge {
    justify-self: end;
    border-color: rgba(36,167,255,.24) !important;
    background: rgba(36,167,255,.1) !important;
    color: #c5e9ff !important;
    line-height: 1.45;
    text-align: left;
}

.az-app .deposit-label {
    color: #d9e5ee !important;
    font-weight: 700 !important;
}

.az-app .deposit-page .form-text,
.az-app .deposit-page .small.text-muted {
    color: #90a5b8 !important;
}

@media (max-width: 520px) {
    .az-app .bank-row {
        grid-template-columns: 1fr;
        gap: .25rem;
    }

    .az-app .bank-value,
    .az-app .bank-row .badge {
        justify-self: stretch;
        text-align: left;
    }
}

.az-app .contact-icon-wrapper,
.az-app .zalo-stat-icon,
.az-app .plan-feature-icon {
    border: 1px solid var(--az-line-strong) !important;
    background: var(--az-accent-soft) !important;
    color: #88d1ff !important;
}

.az-app .status-pill,
.az-app .plan-badge-custom {
    border: 1px solid var(--az-line) !important;
    border-radius: .45rem !important;
    background: rgba(255,255,255,.04) !important;
    color: var(--az-muted) !important;
}

.az-app .nav-tabs,
.az-app .nav-pills {
    border-color: var(--az-line);
}

.az-app .nav-tabs .nav-link,
.az-app .nav-pills .nav-link {
    border: 0;
    border-radius: .58rem;
    color: var(--az-muted) !important;
}

.az-app .nav-tabs .nav-link.active,
.az-app .nav-pills .nav-link.active {
    background: var(--az-accent-soft) !important;
    color: #8bd2ff !important;
}

.az-app hr {
    border-color: var(--az-line);
    opacity: 1;
}

.az-app code,
.az-app pre {
    color: #a7dcff;
    background: rgba(3,13,23,.75);
}

.az-app .accordion-item,
.az-app .accordion-button {
    border-color: var(--az-line);
    background: var(--az-surface);
    color: var(--az-text);
}

.az-app .accordion-button:not(.collapsed) {
    background: var(--az-accent-soft);
    color: #a8ddff;
}

.az-app .accordion-button::after {
    filter: invert(1);
}

@media (max-width: 600px) {
    .az-app .user-dashboard-clean,
    .az-app .zalo-page,
    .az-app .zalo-accounts-page,
    .az-app .deposit-page,
    .az-app .buyplan-page,
    .az-app .admin-page,
    .az-app .admin-dashboard-wrap,
    .az-app .user-admin-wrap,
    .az-app .plan-admin-wrap,
    .az-app .mail-page {
        width: min(100% - 1rem, 80rem);
        padding-top: 1.25rem !important;
    }

    .az-app .table-responsive {
        margin-inline: -.4rem;
    }
}