/**
 * ============================================================
 * APP.CSS — Design System Thống nhất
 * Web Hiệp Khách Origin
 * Theme: Xanh lá nhẹ tươi sáng (Lime green)
 * ============================================================
 *
 * Cấu trúc:
 *  1. Design Tokens (variables)
 *  2. Reset & Base
 *  3. Typography
 *  4. Layout (auth-page, app-page với sidebar)
 *  5. Components (button, card, alert, form, table, modal)
 *  6. Page-specific shared (recharge, history, topup-coin, account, etc)
 *  7. Utilities
 *
 * Convention naming:
 *   - Layout:    .auth-*, .app-*
 *   - Component: .btn-*, .card-*, .alert-*, .form-*, .modal-*
 *   - Page:      .rc-* (recharge), .pw-* (password), .ce-* (change email),
 *                .ph-* (change phone), .topup-* (topup-coin), .qr-*, .ac-* (accumulat)
 *   - Utility:   .u-*, .text-*, .bg-*
 */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
    /* ---- Brand / Primary palette: Xanh lá mòn mướt RPG (Green) ---- */
    --brand-50:  #f0f9f0;
    --brand-100: #dcf0dc;
    --brand-200: #b8e2b8;
    --brand-300: #8ecf8e;
    --brand-400: #6cb96c;
    --brand-500: #43912d;   /* Primary — xanh lá mòn mướt RPG */
    --brand-600: #4a8838;
    --brand-700: #45593f;
    --brand-800: #325626;
    --brand-900: #2a4520;

    /* ---- Semantic ---- */
    --color-primary:       var(--brand-500);
    --color-primary-hover: var(--brand-600);
    --color-primary-soft:  var(--brand-50);
    --color-primary-text:  var(--brand-700);

    /* ---- Status colors ---- */
    --color-success:       #16a34a;
    --color-success-soft:  #dcfce7;
    --color-success-text:  #15803d;

    --color-warning:       #f59e0b;
    --color-warning-soft:  #fef3c7;
    --color-warning-text:  #92400e;

    --color-danger:        #dc2626;
    --color-danger-soft:   #fee2e2;
    --color-danger-text:   #991b1b;

    --color-info:          #0ea5e9;
    --color-info-soft:     #e0f2fe;
    --color-info-text:     #075985;

    /* ---- Neutral ---- */
    --neutral-0:   #ffffff;
    --neutral-50:  #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;

    /* ---- Surface ---- */
    --surface-bg:    var(--neutral-50);
    --surface-card:  var(--neutral-0);
    --surface-soft:  var(--neutral-100);
    --surface-dark:  var(--neutral-900);

    /* ---- Text ---- */
    --text-primary:   var(--neutral-800);
    --text-secondary: var(--neutral-500);
    --text-muted:     var(--neutral-400);
    --text-on-brand:  var(--neutral-0);

    /* ---- Border ---- */
    --border-light: var(--neutral-200);
    --border-base:  var(--neutral-300);
    --border-dark:  var(--neutral-400);

    /* ---- Shadow ---- */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 12px 28px rgba(0, 0, 0, 0.12);
    --shadow-xl:  0 20px 50px rgba(0, 0, 0, 0.18);

    /* ---- Radius ---- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ---- Spacing ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* ---- Typography ---- */
    --font-base:    'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
    --font-mono:    'SF Mono', Monaco, Consolas, monospace;

    --fs-xs:   0.75rem;    /* 12px */
    --fs-sm:   0.85rem;    /* 13.6px */
    --fs-base: 1rem;       /* 16px */
    --fs-lg:   1.125rem;   /* 18px */
    --fs-xl:   1.25rem;    /* 20px */
    --fs-2xl:  1.5rem;     /* 24px */

    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ---- Transition ---- */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;

    /* ============================================================
       BACKWARDS COMPAT — giữ tên biến cũ map về tokens mới
       (để các page chưa migrate vẫn hoạt động)
       ============================================================ */
    --rc-accent:       var(--brand-500);
    --rc-accent-hover: var(--brand-600);
    --rc-text:         var(--text-primary);
    --rc-muted:        var(--text-secondary);
    --rc-border:       var(--border-light);
    --rc-bg:           var(--surface-bg);

    --auth-accent:       var(--brand-500);
    --auth-accent-hover: var(--brand-600);
    --auth-dark:         var(--neutral-900);
    --auth-dark-soft:    var(--neutral-800);
    --auth-text:         var(--text-primary);
    --auth-text-muted:   var(--text-secondary);

    --app-accent:       var(--brand-500);
    --app-accent-hover: var(--brand-600);
    --app-bg:           var(--surface-bg);
    --app-card:         var(--surface-card);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-base);
    font-size: var(--fs-base);
    color: var(--text-primary);
    background: var(--surface-bg);
    line-height: 1.5;
}

body {
    min-height: 100vh;
}

/* Font Awesome — giữ nguyên font icon (tránh ghi đè bởi font-family chung) */
.fa, .fas, .far, .fab, .bi {
    font-family: 'FontAwesome', 'bootstrap-icons' !important;
}
.bi {
    font-family: 'bootstrap-icons' !important;
}

a {
    color: var(--color-primary-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--color-primary-hover);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    cursor: pointer;
    font-family: inherit;
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--surface-soft);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}

/* ============================================================
   3. TYPOGRAPHY UTILITIES
   ============================================================ */

.text-primary   { color: var(--color-primary-text) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-muted) !important; }
.text-success   { color: var(--color-success) !important; }
.text-warning   { color: var(--color-warning-text) !important; }
.text-danger    { color: var(--color-danger) !important; }
.text-info      { color: var(--color-info-text) !important; }

.fw-medium   { font-weight: var(--fw-medium) !important; }
.fw-semibold { font-weight: var(--fw-semibold) !important; }
.fw-bold     { font-weight: var(--fw-bold) !important; }

.fs-xs { font-size: var(--fs-xs) !important; }
.fs-sm { font-size: var(--fs-sm) !important; }
.fs-lg { font-size: var(--fs-lg) !important; }
.fs-xl { font-size: var(--fs-xl) !important; }

/* ============================================================
   4. LAYOUT — AUTH PAGE (login, forgot)
   ============================================================ */

.auth-page,
.auth-page html,
.auth-page body {
    height: 100%;
    background: var(--neutral-900);
    overflow-x: hidden;
}

.auth-page .auth-layout {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
}

.auth-page .auth-visual {
    flex: 1;
    min-height: 100vh;
    background: linear-gradient(160deg, var(--brand-900) 0%, var(--brand-700) 50%, var(--neutral-900) 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.auth-page .auth-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top right, rgba(91, 164, 70, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(74, 136, 56, 0.18) 0%, transparent 50%);
}

.auth-page .auth-form-panel {
    width: 480px;
    max-width: 100%;
    padding: 2.5rem;
    background: var(--neutral-0);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-page .auth-form-panel > * {
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.auth-page .form-header {
    text-align: center;
    margin-bottom: 1.75rem;
}
.auth-page .form-header h2 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    margin: 0 0 0.4rem;
}
.auth-page .form-header p {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin: 0;
}

.auth-page .form-floating-custom {
    position: relative;
    margin-bottom: 1rem;
}
.auth-page .form-floating-custom .input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
}
.auth-page .form-floating-custom .input-icon img {
    width: 18px;
    height: 18px;
    opacity: 0.6;
}
.auth-page .form-floating-custom input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    background: var(--surface-card);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    font-family: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.auth-page .form-floating-custom input:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(91, 164, 70, 0.18);
}
.auth-page .form-floating-custom .toggle-pw {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    cursor: pointer;
    z-index: 2;
}

.auth-page .form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.5rem 0 1.25rem;
    font-size: var(--fs-sm);
}

.auth-page .auth-link {
    color: var(--color-primary-text);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
.auth-page .auth-link:hover {
    text-decoration: underline;
}

.auth-page .btn-auth-primary {
    width: 100%;
    padding: 0.85rem;
    background: var(--color-primary);
    color: var(--text-on-brand);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
    font-family: inherit;
}
.auth-page .btn-auth-primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
}
.auth-page .btn-auth-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-page .auth-recaptcha {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

.auth-page .auth-back-link {
    text-align: center;
    margin-top: 1rem;
}

.auth-page .alert-auth {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border-left: 4px solid;
    font-size: var(--fs-sm);
    margin-bottom: 1rem;
    display: none;
}
.auth-page .alert-auth ul {
    margin: 0;
    padding-left: 1.25rem;
}
.auth-page .alert-auth-danger,
.auth-page .alert-app-danger {
    background: var(--color-danger-soft);
    border-left-color: var(--color-danger);
    color: var(--color-danger-text);
}
.auth-page .alert-auth-success,
.auth-page .alert-app-success {
    background: var(--color-success-soft);
    border-left-color: var(--color-success);
    color: var(--color-success-text);
}

@media (max-width: 768px) {
    .auth-page .auth-visual { display: none; }
    .auth-page .auth-form-panel { width: 100%; padding: 1.5rem; }
}

/* ============================================================
   4b. LAYOUT — APP PAGE (sidebar + content)
   ============================================================ */

.app-body {
    min-height: 100vh;
    background: var(--surface-bg);
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.app-logo img {
    height: 36px;
    width: auto;
}

.app-menu-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    font-size: 1.25rem;
    color: var(--text-secondary);
    transition: background var(--transition-fast);
}
.app-menu-btn:hover {
    background: var(--surface-soft);
}

.app-main {
    max-width: 480px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

@media (min-width: 992px) {
    .app-main {
        max-width: 720px;
    }
}

.app-main--wide {
    max-width: 960px;
}

@media (min-width: 1200px) {
    .app-main--wide {
        max-width: 1080px;
    }
}

/* ---- Sidebar (offcanvas) ---- */
.app-sidebar .offcanvas-header {
    border-bottom: 1px solid var(--border-light);
    padding: 1rem 1.25rem;
}

.app-sidebar .offcanvas-title {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

.app-sidebar-user {
    background: var(--surface-soft);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.app-sidebar-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-100);
    color: var(--brand-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.app-sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.app-sidebar-user-name {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-sidebar-user-money {
    font-size: var(--fs-xs);
    color: var(--color-primary-text);
    font-weight: var(--fw-semibold);
}

.app-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}

.app-sidebar-section-label {
    padding: 0.75rem 1.25rem 0.4rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.app-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.app-sidebar-link:hover {
    background: var(--brand-50);
    color: var(--color-primary-text);
}
.app-sidebar-link.active {
    background: var(--brand-100);
    color: var(--color-primary-text);
    font-weight: var(--fw-semibold);
}
.app-sidebar-link i {
    font-size: 1.1rem;
    width: 1.25rem;
    text-align: center;
}

/* ============================================================
   5. COMPONENTS
   ============================================================ */

/* ---- Card ---- */
.card-app {
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.card-app + .card-app {
    margin-top: 1rem;
}

.card-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 1.25rem;
}

.card-section-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

/* ---- Button ---- */
.btn-app {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    line-height: 1.2;
    font-family: inherit;
}

.btn-app:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-app-primary {
    background: var(--color-primary);
    color: var(--text-on-brand);
    border-color: var(--color-primary);
}
.btn-app-primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--text-on-brand);
}

.btn-app-outline {
    background: transparent;
    color: var(--color-primary-text);
    border-color: var(--color-primary);
}
.btn-app-outline:hover:not(:disabled) {
    background: var(--color-primary-soft);
}

.btn-app-ghost {
    background: var(--surface-soft);
    color: var(--text-primary);
    border-color: transparent;
}
.btn-app-ghost:hover:not(:disabled) {
    background: var(--neutral-200);
}

.btn-app-danger {
    background: var(--color-danger);
    color: var(--text-on-brand);
    border-color: var(--color-danger);
}
.btn-app-danger:hover:not(:disabled) {
    background: #b91c1c;
    border-color: #b91c1c;
}

.btn-app-block {
    width: 100%;
}

.btn-app-sm {
    padding: 0.4rem 0.85rem;
    font-size: var(--fs-xs);
}

.btn-app-lg {
    padding: 0.9rem 1.5rem;
    font-size: var(--fs-base);
    border-radius: var(--radius-lg);
}

.btn-app-pill {
    border-radius: var(--radius-full);
}

/* ---- Form ---- */
.form-app-field {
    margin-bottom: 1rem;
}

.form-app-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-app-input,
.form-app-select,
.form-app-textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    background: var(--surface-card);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    font-family: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-app-input:focus,
.form-app-select:focus,
.form-app-textarea:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(91, 164, 70, 0.18);
}
.form-app-input::placeholder {
    color: var(--text-muted);
}

.form-app-input-wrap {
    position: relative;
}
.form-app-input-icon {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    background: transparent;
    border: 0;
    padding: 0.25rem;
    cursor: pointer;
}

.form-app-help {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-top: 0.4rem;
}

.form-app-error {
    font-size: var(--fs-xs);
    color: var(--color-danger);
    margin-top: 0.4rem;
}

/* ---- Alert ---- */
.alert-app {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-md);
    border-left: 4px solid;
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.alert-app-success {
    background: var(--color-success-soft);
    border-left-color: var(--color-success);
    color: var(--color-success-text);
}
.alert-app-warning {
    background: var(--color-warning-soft);
    border-left-color: var(--color-warning);
    color: var(--color-warning-text);
}
.alert-app-danger {
    background: var(--color-danger-soft);
    border-left-color: var(--color-danger);
    color: var(--color-danger-text);
}
.alert-app-info {
    background: var(--color-info-soft);
    border-left-color: var(--color-info);
    color: var(--color-info-text);
}
.alert-app-primary {
    background: var(--color-primary-soft);
    border-left-color: var(--color-primary);
    color: var(--color-primary-text);
}

/* ---- Modal (custom, không phải Bootstrap) ---- */
.modal-app-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9000;
    align-items: center;
    justify-content: center;
}
.modal-app-overlay.active {
    display: flex;
}

.modal-app-box {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    width: 92%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: var(--shadow-xl);
}

.modal-app-box.lg { max-width: 720px; }

.modal-app-header {
    background: var(--color-primary);
    color: var(--text-on-brand);
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-app-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
}

.modal-app-close {
    background: transparent;
    border: 0;
    color: var(--text-on-brand);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.25rem;
}

.modal-app-body {
    padding: 1.25rem;
}

.modal-app-footer {
    border-top: 1px solid var(--border-light);
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.625rem;
}

/* ---- Table ---- */
.table-app {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table-app th,
.table-app td {
    padding: 0.7rem 0.875rem;
    text-align: left;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--border-light);
}

.table-app th {
    background: var(--surface-soft);
    color: var(--text-secondary);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.table-app tr:last-child td {
    border-bottom: 0;
}

.table-app tbody tr:hover {
    background: var(--brand-50);
}

/* ---- Status Chip ---- */
.chip {
    display: inline-block;
    padding: 0.15rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
}

.chip-pending   { background: var(--color-warning-soft); color: var(--color-warning-text); }
.chip-paid      { background: var(--color-success-soft); color: var(--color-success-text); }
.chip-cancelled,
.chip-expired,
.chip-failed    { background: var(--color-danger-soft); color: var(--color-danger-text); }

/* ============================================================
   6. PAGE-SPECIFIC SHARED
   ============================================================ */

/* ---- Recharge / TopUp page ---- */
.rc-page,
.rc-page * {
    font-family: var(--font-base);
}

.rc-card {
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.rc-card + .rc-card {
    margin-top: 1rem;
}

.rc-section-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 1rem;
}

.rc-info-box {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: var(--color-warning-soft);
    border-left: 4px solid var(--color-warning);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 0.7rem 1rem;
    margin-bottom: 1.25rem;
    font-size: var(--fs-sm);
    color: var(--color-warning-text);
    font-weight: var(--fw-medium);
}
.rc-info-box i,
.rc-info-box svg {
    flex-shrink: 0;
    color: var(--color-warning);
}

.rc-method-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.rc-method-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    background: var(--surface-card);
}
.rc-method-item:hover {
    border-color: var(--brand-300);
    background: var(--brand-50);
}
.rc-method-item.active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.rc-method-radio {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-base);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}
.rc-method-item.active .rc-method-radio {
    border-color: var(--color-primary);
}
.rc-method-item.active .rc-method-radio::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.rc-amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}
@media (max-width: 480px) {
    .rc-amount-grid { grid-template-columns: repeat(2, 1fr); }
}

.rc-amount-btn {
    padding: 0.65rem 0.5rem;
    background: var(--surface-card);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.rc-amount-btn:hover {
    border-color: var(--brand-300);
    background: var(--brand-50);
}
.rc-amount-btn.active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--text-on-brand);
}

.rc-summary {
    background: var(--brand-50);
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
}

.rc-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    font-size: var(--fs-sm);
}
.rc-summary-row.total {
    border-top: 1.5px dashed var(--brand-300);
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
    color: var(--color-primary-text);
}

/* ---- TopUp Coin (4 modal flow) ---- */
.topup-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.topup-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    margin-bottom: 1.125rem;
    color: var(--text-primary);
}

.topup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.125rem;
}
@media (max-width: 768px) { .topup-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .topup-grid { grid-template-columns: 1fr; } }

.topup-card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    border: 1px solid var(--border-light);
}
.topup-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(91, 164, 70, 0.20);
    border-color: var(--brand-300);
}

.topup-card-image {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-brand);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    position: relative;
}
.topup-card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.30) 0%, transparent 60%);
}
.topup-card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    z-index: 1;
}
.topup-card-image .coin-svg {
    width: 70%;
    height: 80%;
    z-index: 1;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.30));
}

.topup-card-body {
    padding: 1.125rem;
    text-align: center;
}

.topup-card-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.coin-original {
    color: var(--text-muted);
    text-decoration: line-through;
    font-size: var(--fs-xs);
    margin-right: 0.25rem;
}

.km-badge {
    position: absolute;
    top: 0.5rem; right: 0.5rem;
    background: var(--color-warning);
    color: var(--text-on-brand);
    padding: 0.15rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    z-index: 3;
    box-shadow: var(--shadow-sm);
}

.km-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: var(--text-on-brand);
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.125rem;
    box-shadow: 0 4px 12px rgba(91, 164, 70, 0.30);
    animation: km-pulse 2s ease-in-out infinite;
}
@keyframes km-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(91, 164, 70, 0.30); }
    50%      { box-shadow: 0 4px 24px rgba(91, 164, 70, 0.55); }
}
.km-banner-icon { font-size: 2rem; flex-shrink: 0; }
.km-banner-content { flex: 1; }
.km-banner-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.km-banner-title strong { color: #fef9c3; font-size: var(--fs-lg); }
.km-banner-sub { font-size: var(--fs-xs); opacity: 0.95; margin-top: 0.15rem; }

/* QR section in modal */
.qr-image {
    width: 280px;
    height: 280px;
    margin: 0 auto 0.875rem;
    background: var(--surface-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.qr-image img { width: 100%; height: 100%; object-fit: contain; }
.qr-image .loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: rgba(255,255,255,0.8);
}

.qr-info {
    text-align: left;
    background: var(--surface-bg);
    border-radius: var(--radius-md);
    padding: 0.875rem;
    margin-bottom: 0.75rem;
}
.qr-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    font-size: var(--fs-sm);
    border-bottom: 1px dashed var(--border-light);
}
.qr-info-row:last-child { border-bottom: 0; }
.qr-info-key { color: var(--text-secondary); flex: 0 0 110px; }
.qr-info-val {
    flex: 1;
    text-align: right;
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    font-family: var(--font-mono);
    word-break: break-all;
}
.btn-copy {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.625rem;
    font-size: 0.7rem;
    cursor: pointer;
    margin-left: 0.4rem;
    font-family: inherit;
}
.btn-copy:hover { background: var(--brand-100); }

.qr-status {
    text-align: center;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    font-weight: var(--fw-semibold);
    margin-bottom: 0.75rem;
}
.qr-status.pending  { background: var(--color-warning-soft); color: var(--color-warning-text); }
.qr-status.paid     { background: var(--color-success-soft); color: var(--color-success-text); }
.qr-status.expired,
.qr-status.cancelled { background: var(--color-danger-soft); color: var(--color-danger-text); }
.qr-countdown { font-family: var(--font-mono); font-size: var(--fs-sm); }

.qr-note {
    background: var(--color-warning-soft);
    border-left: 3px solid var(--color-warning);
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    color: var(--color-warning-text);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

/* Detail modal qty controls */
.qty-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.qty-btn {
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--border-base);
    background: var(--surface-card);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: var(--fw-bold);
    color: var(--color-primary-text);
}
.qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.qty-display {
    background: var(--brand-50);
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary-text);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.875rem;
    font-weight: var(--fw-bold);
    min-width: 40px;
    text-align: center;
}

.coin-badge {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.45);
    padding: 0.25rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    color: var(--text-on-brand);
    z-index: 2;
    white-space: nowrap;
}

/* ---- History page ---- */
.hs-tabs {
    display: flex;
    background: var(--surface-card);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-bottom: 1.5px solid var(--border-light);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.hs-tab {
    flex: 1;
    padding: 0.8rem 0.4rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.hs-tab.active {
    color: var(--color-primary-text);
    border-bottom-color: var(--color-primary);
}

.hs-list {
    background: var(--surface-card);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 0.5rem 0;
}

.hs-item {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}
.hs-item:last-child { border-bottom: 0; }

.hs-item-content { flex: 1; min-width: 0; }
.hs-item-title {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    margin-bottom: 0.15rem;
}
.hs-item-meta {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

.hs-item-amount {
    font-weight: var(--fw-bold);
    text-align: right;
    flex-shrink: 0;
}

.hs-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}

/* ---- Account page ---- */
.acc-info-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.acc-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--surface-bg);
    border-radius: var(--radius-md);
}

.acc-info-label {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.acc-info-value {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

/* ---- Form pages: changepass (pw-*), changeemail (ce-*), changephone (ph-*),
       updatephone, updateemail — dùng chung pattern .pw- vì là card + form
   ---- */
.pw-page,
.pw-page * {
    font-family: var(--font-base);
}

.pw-card,
.ce-card,
.ph-card {
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.pw-title,
.ce-title,
.ph-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 1.5rem;
}

.pw-field,
.ce-field,
.ph-field {
    margin-bottom: 1rem;
}

.pw-label,
.ce-label,
.ph-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.pw-input-wrap,
.ce-input-wrap,
.ph-input-wrap {
    position: relative;
}

.pw-input-wrap input,
.ce-input-wrap input,
.ph-input-wrap input,
.pw-page input[type="text"],
.pw-page input[type="password"],
.pw-page input[type="email"],
.pw-page input[type="tel"],
.ce-page input[type="text"],
.ce-page input[type="email"],
.ph-page input[type="text"],
.ph-page input[type="tel"] {
    width: 100%;
    padding: 0.75rem 0.95rem;
    padding-right: 2.5rem;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    background: var(--surface-card);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    font-family: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pw-input-wrap input:focus,
.ce-input-wrap input:focus,
.ph-input-wrap input:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(91, 164, 70, 0.18);
}

.pw-toggle,
.ce-toggle,
.ph-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
}

.pw-actions,
.ce-actions,
.ph-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    gap: 0.75rem;
}

.pw-back,
.ce-back,
.ph-back {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--fs-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.pw-back:hover,
.ce-back:hover,
.ph-back:hover {
    color: var(--color-primary-text);
}

.btn-pw-submit,
.btn-ce-submit,
.btn-ph-submit {
    padding: 0.7rem 1.75rem;
    background: var(--color-primary);
    color: var(--text-on-brand);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
    font-family: inherit;
}
.btn-pw-submit:hover:not(:disabled),
.btn-ce-submit:hover:not(:disabled),
.btn-ph-submit:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

/* Inline alerts (ct-alert-*) */
.ct-alert-success,
.pw-alert-success {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--color-success-soft);
    border-left: 4px solid var(--color-success);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    font-size: var(--fs-sm);
    color: var(--color-success-text);
}
.ct-alert-error,
.pw-alert-error {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--color-danger-soft);
    border-left: 4px solid var(--color-danger);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    font-size: var(--fs-sm);
    color: var(--color-danger-text);
}

/* ============================================================
   7. UTILITIES
   ============================================================ */

.u-text-center { text-align: center !important; }
.u-text-right  { text-align: right !important; }
.u-text-left   { text-align: left !important; }

.u-mt-0 { margin-top: 0 !important; }
.u-mt-2 { margin-top: var(--space-2) !important; }
.u-mt-4 { margin-top: var(--space-4) !important; }
.u-mt-6 { margin-top: var(--space-6) !important; }

.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-2 { margin-bottom: var(--space-2) !important; }
.u-mb-4 { margin-bottom: var(--space-4) !important; }
.u-mb-6 { margin-bottom: var(--space-6) !important; }

.u-flex      { display: flex !important; }
.u-flex-col  { flex-direction: column !important; }
.u-items-center { align-items: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-gap-2 { gap: var(--space-2) !important; }
.u-gap-4 { gap: var(--space-4) !important; }

.u-w-100 { width: 100% !important; }
.u-h-100 { height: 100% !important; }

.u-rounded { border-radius: var(--radius-md) !important; }
.u-rounded-lg { border-radius: var(--radius-lg) !important; }
.u-rounded-full { border-radius: var(--radius-full) !important; }

.u-shadow-sm { box-shadow: var(--shadow-sm) !important; }
.u-shadow-md { box-shadow: var(--shadow-md) !important; }

/* ============================================================
   END OF APP.CSS
   ============================================================ */



/* ============================================================
   IMPORTED FROM topup.blade.php — TopUp Banking / Momo / ZaloPay (.rc-*)
   ============================================================ */

.rc-page * {
            font-family: 'Be Vietnam Pro', sans-serif;
        }
        /* Card wrapper */
        
        .rc-card {
            background: #fff;
            border-radius: 16px;
            padding: 1.5rem;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
        }
        /* Section title */
        
        .rc-section-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--rc-text);
            text-align: center;
            margin-bottom: 1rem;
        }
        /* Info box (tỷ giá) */
        
        .rc-info-box {
            display: flex;
            align-items: center;
            gap: .65rem;
            background: #fef3c7;
            border-left: 4px solid var(--rc-accent);
            border-radius: 0 10px 10px 0;
            padding: .7rem 1rem;
            margin-bottom: 1.25rem;
            font-size: .875rem;
            color: #92400e;
            font-weight: 500;
        }
        
        .rc-info-box svg {
            flex-shrink: 0;
            color: var(--rc-accent);
        }
        /* Radio method list */
        
        .rc-method-list {
            display: flex;
            flex-direction: column;
            gap: .6rem;
            margin-bottom: 1.25rem;
        }
        
        .rc-method-item {
            border: 1.5px solid var(--rc-border);
            border-radius: 12px;
            padding: .85rem 1rem;
            cursor: pointer;
            transition: border-color .2s, box-shadow .2s, background .2s;
            display: flex;
            align-items: center;
            gap: .875rem;
        }
        
        .rc-method-item:hover {
            border-color: var(--rc-accent);
            background: #fffbeb;
        }
        
        .rc-method-item.selected {
            border-color: var(--rc-accent);
            background: #fffbeb;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, .15);
        }
        /* Custom radio dot */
        
        .rc-radio {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            border: 2px solid var(--rc-border);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color .2s;
        }
        
        .rc-method-item.selected .rc-radio {
            border-color: var(--rc-accent);
        }
        
        .rc-radio-dot {
            width: 10px;
            height: 10px;
            background: var(--rc-accent);
            border-radius: 50%;
            display: none;
        }
        
        .rc-method-item.selected .rc-radio-dot {
            display: block;
        }
        
        .rc-method-icon {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            background: rgba(245, 158, 11, .1);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .rc-method-icon svg {
            color: var(--rc-accent);
        }
        
        .rc-method-info {
            flex: 1;
            min-width: 0;
        }
        
        .rc-method-name {
            font-size: .88rem;
            font-weight: 600;
            color: var(--rc-text);
        }
        
        .rc-method-desc {
            font-size: .76rem;
            color: var(--rc-muted);
            line-height: 1.4;
            margin-top: .1rem;
        }
        
        .rc-method-note {
            font-size: .74rem;
            color: #ef4444;
            margin-top: .2rem;
        }
        /* Amount input */
        
        .rc-form-label {
            display: block;
            font-size: .875rem;
            font-weight: 500;
            color: var(--rc-text);
            margin-bottom: .5rem;
        }
        
        .rc-input-wrap {
            position: relative;
            margin-bottom: .25rem;
        }
        
        .rc-input-wrap input {
            width: 100%;
            box-sizing: border-box;
            padding: .9rem 3.5rem .9rem 1rem;
            border: 1.5px solid var(--rc-border);
            border-radius: 12px;
            font-size: .95rem;
            background: #fff;
            color: var(--rc-text);
            transition: border-color .2s, box-shadow .2s;
        }
        
        .rc-input-wrap input:focus {
            outline: none;
            border-color: var(--rc-accent);
            box-shadow: 0 0 0 3px rgba(245, 158, 11, .15);
        }
        
        .rc-input-suffix {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: .85rem;
            color: var(--rc-muted);
            pointer-events: none;
        }
        /* Primary button */
        
        .btn-rc-primary {
            width: 100%;
            padding: 1rem 1.5rem;
            margin-top: 1.25rem;
            background: linear-gradient(135deg, var(--rc-accent) 0%, var(--rc-accent-hover) 100%);
            border: none;
            border-radius: 12px;
            color: #fff;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform .2s, box-shadow .2s, opacity .2s;
            box-shadow: 0 4px 14px rgb(40 179 81 / 35%);
        }
        
        .btn-rc-primary:hover:not([disabled]) {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(40, 179, 81, .4);
        }
        
        .btn-rc-primary:active {
            transform: translateY(0);
        }
        
        .btn-rc-primary[disabled] {
            opacity: .5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        /* ─── Modal ─────────────────────────────────── */
        
        .rc-modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 1040;
            background: rgba(0, 0, 0, .5);
        }
        
        .rc-modal-wrap {
            position: fixed;
            inset: 0;
            z-index: 1050;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            overflow-y: auto;
        }
        
        .rc-modal {
            background: #fff;
            border-radius: 16px;
            width: 100%;
            max-width: 480px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
            overflow: hidden;
        }
        
        .rc-modal-header {
            padding: 1.1rem 1.5rem;
            border-bottom: 1px solid var(--rc-border);
        }
        
        .rc-modal-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--rc-text);
        }
        
        .rc-modal-body {
            padding: 1.25rem 1.5rem;
            display: flex;
            flex-direction: column;
            gap: .875rem;
        }
        
        .rc-modal-footer {
            padding: 1rem 1.5rem;
            background: var(--rc-bg);
            border-top: 1px solid var(--rc-border);
        }
        /* Info rows inside modal */
        
        .rc-info-row {
            background: var(--rc-bg);
            border-radius: 12px;
            padding: 1rem;
        }
        
        .rc-info-row-label {
            font-size: .78rem;
            color: var(--rc-muted);
            margin-bottom: .35rem;
        }
        
        .rc-info-row-value {
            font-size: 1rem;
            font-weight: 700;
            color: var(--rc-accent-hover);
        }
        
        .rc-info-row-sub {
            font-size: .78rem;
            color: var(--rc-muted);
        }
        
        .rc-info-row-flex {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .btn-rc-copy {
            width: 36px;
            height: 36px;
            flex-shrink: 0;
            background: rgba(245, 158, 11, .1);
            border: none;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background .2s;
        }
        
        .btn-rc-copy:hover {
            background: rgba(245, 158, 11, .2);
        }
        
        .btn-rc-copy svg {
            color: var(--rc-accent);
        }
        
        .rc-copied-msg {
            font-size: .78rem;
            color: #16a34a;
            margin-top: .35rem;
        }
        /* QR */
        
        .rc-qr-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .5rem;
        }
        
        .rc-qr-box {
            background: #fff;
            border: 1.5px solid var(--rc-border);
            border-radius: 12px;
            padding: 1rem;
            display: inline-block;
        }
        
        .rc-qr-box img {
            width: 180px;
            height: 180px;
            display: block;
        }
        
        .rc-qr-actions {
            display: flex;
            align-items: center;
            gap: .5rem;
            font-size: .78rem;
            color: var(--rc-muted);
        }
        
        .btn-rc-download {
            display: flex;
            align-items: center;
            gap: .25rem;
            font-size: .78rem;
            font-weight: 500;
            color: var(--rc-accent);
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
        }
        
        .btn-rc-download:hover {
            color: var(--rc-accent-hover);
        }
        /* Steps */
        
        .rc-steps {
            background: var(--rc-bg);
            border-radius: 12px;
            padding: 1rem;
        }
        
        .rc-steps-label {
            font-size: .8rem;
            font-weight: 600;
            color: var(--rc-text);
            margin-bottom: .5rem;
        }
        
        .rc-steps ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: .3rem;
        }
        
        .rc-steps ul li {
            font-size: .78rem;
            color: var(--rc-muted);
        }
        /* Warning */
        
        .rc-warn-box {
            background: #fffbeb;
            border-left: 4px solid var(--rc-accent);
            border-radius: 0 10px 10px 0;
            padding: .875rem 1rem;
            font-size: .78rem;
            color: #92400e;
            line-height: 1.65;
        }
        /* Close button */
        
        .btn-rc-close {
            width: 100%;
            padding: .8rem 1.5rem;
            background: linear-gradient(135deg, var(--rc-accent) 0%, var(--rc-accent-hover) 100%);
            border: none;
            border-radius: 10px;
            color: #fff;
            font-size: .9rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform .2s, box-shadow .2s;
            box-shadow: 0 3px 10px rgba(245, 158, 11, .3);
        }
        
        .btn-rc-close:hover {
            transform: translateY(-1px);
            box-shadow: 0 5px 16px rgba(245, 158, 11, .4);
        }
        /* ── Bank modal layout ── */
        
        .rc-bank-top {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 1rem;
            align-items: start;
        }
        
        .rc-bank-qr {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .5rem;
        }
        
        .rc-bank-qr .rc-qr-box {
            padding: .6rem;
        }
        
        .rc-bank-qr .rc-qr-box img {
            width: 120px;
            height: 120px;
            display: block;
        }
        
        .rc-bank-qr-dl {
            display: flex;
            align-items: center;
            gap: .3rem;
            font-size: .72rem;
            color: var(--rc-accent);
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            font-weight: 500;
        }
        
        .rc-bank-qr-dl:hover {
            color: var(--rc-accent-hover);
        }
        
        .rc-bank-info {
            display: flex;
            flex-direction: column;
            gap: .5rem;
        }
        
        .rc-bank-info-name {
            font-size: .72rem;
            color: var(--rc-muted);
            margin-bottom: .15rem;
        }
        
        .rc-bank-info-val {
            font-size: 1rem;
            font-weight: 700;
            color: var(--rc-text);
        }
        
        .rc-bank-info-sub {
            font-size: .76rem;
            color: var(--rc-muted);
            margin-top: .1rem;
        }
        
        .rc-bank-copy-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        /* ── Ewallet modal layout ── */
        
        .rc-ew-qr-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .6rem;
        }
        
        .rc-ew-qr-box {
            background: #fff;
            border: 1.5px solid var(--rc-border);
            border-radius: 14px;
            padding: 1rem;
            display: inline-block;
        }
        
        .rc-ew-qr-box img {
            width: 200px;
            height: auto;
            display: block;
        }
        
        .rc-ew-qr-hint {
            font-size: .78rem;
            color: var(--rc-muted);
        }
    

    table {
        border-collapse: collapse;
        margin: 20px auto;
        table-layout: fixed;
    }
    td, th {
        border: 1px solid #000;
        padding: 4px 6px;
        vertical-align: middle;
        font-size: 12px;
    }
    th {
        text-align: center;
        font-weight: bold;
    }
    .left {
        width: 100px;
        font-weight: bold;
    }
    .center {
        text-align: center;
    }
    .qr-box {
        padding: 15px;
    }
    .qr-box img {
        max-width: 300px;
    }
    .wallet {
        color: red;
        font-weight: bold;
        word-break: break-all;
    }
    .note {
        font-size: 13px;
        line-height: 1.5;
    }


/* ============================================================
   IMPORTED FROM topupvn.blade.php — TopUp Card (Viettel/Mobi/Vina) (.rc-*)
   ============================================================ */

.ct-page * {
            font-family: 'Be Vietnam Pro', sans-serif;
        }
        
        .ct-card {
            background: #fff;
            border-radius: 16px;
            padding: 1.5rem;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
            margin-bottom: 1rem;
        }
        
        .ct-section-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--rc-text);
            margin-bottom: 1.25rem;
        }
        /* Alert boxes */
        
        .ct-alert-error {
            display: flex;
            align-items: flex-start;
            gap: .6rem;
            background: #fef2f2;
            border-left: 4px solid #ef4444;
            border-radius: 0 10px 10px 0;
            padding: .875rem 1rem;
            margin-bottom: 1.25rem;
            font-size: .85rem;
            color: #b91c1c;
            line-height: 1.5;
        }
        
        .ct-alert-warn {
            display: flex;
            align-items: flex-start;
            gap: .6rem;
            background: #fffbeb;
            border-left: 4px solid var(--rc-accent);
            border-radius: 0 10px 10px 0;
            padding: .875rem 1rem;
            margin-bottom: 1.25rem;
            font-size: .82rem;
            color: #92400e;
            line-height: 1.55;
        }
        
        .ct-alert-warn svg,
        .ct-alert-error svg {
            flex-shrink: 0;
            margin-top: .05rem;
        }
        /* Form label */
        
        .ct-label {
            display: block;
            font-size: .82rem;
            font-weight: 600;
            color: var(--rc-text);
            margin-bottom: .6rem;
        }
        /* Card type list */
        
        .ct-cardtype-list {
            display: flex;
            flex-direction: column;
            gap: .5rem;
            margin-bottom: .35rem;
        }
        
        .ct-cardtype-item {
            border: 1.5px solid var(--rc-border);
            border-radius: 12px;
            padding: .75rem 1rem;
            cursor: pointer;
            transition: border-color .2s, box-shadow .2s, background .2s;
            display: flex;
            align-items: center;
            gap: .875rem;
        }
        
        .ct-cardtype-item:hover {
            border-color: var(--rc-accent);
            background: #fffbeb;
        }
        
        .ct-cardtype-item.selected {
            border-color: var(--rc-accent);
            background: #fffbeb;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, .15);
        }
        
        .ct-radio {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            border: 2px solid var(--rc-border);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color .2s;
        }
        
        .ct-cardtype-item.selected .ct-radio {
            border-color: var(--rc-accent);
        }
        
        .ct-radio-dot {
            width: 10px;
            height: 10px;
            background: var(--rc-accent);
            border-radius: 50%;
            display: none;
        }
        
        .ct-cardtype-item.selected .ct-radio-dot {
            display: block;
        }
        
        .ct-cardtype-item span {
            font-size: .88rem;
            font-weight: 600;
            color: var(--rc-text);
        }
        /* card_value list */
        
        .ct-denom-list {
            display: flex;
            flex-direction: column;
            gap: .5rem;
            margin-bottom: .35rem;
        }
        
        .ct-denom-item {
            border: 1.5px solid var(--rc-border);
            border-radius: 12px;
            padding: .75rem 1rem;
            cursor: pointer;
            transition: border-color .2s, box-shadow .2s, background .2s;
            display: flex;
            align-items: center;
            gap: .875rem;
        }
        
        .ct-denom-item:hover {
            border-color: var(--rc-accent);
            background: #fffbeb;
        }
        
        .ct-denom-item.selected {
            border-color: var(--rc-accent);
            background: #fffbeb;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, .15);
        }
        
        .ct-denom-item.selected .ct-radio {
            border-color: var(--rc-accent);
        }
        
        .ct-denom-item.selected .ct-radio-dot {
            display: block;
        }
        
        .ct-denom-name {
            font-size: .88rem;
            font-weight: 600;
            color: var(--rc-text);
            flex: 1;
        }
        
        .ct-denom-coin {
            font-size: .76rem;
            color: var(--rc-muted);
        }
        /* Input */
        
        .ct-input-wrap {
            position: relative;
            margin-bottom: .25rem;
        }
        
        .ct-input-wrap input {
            width: 100%;
            box-sizing: border-box;
            padding: .9rem 1rem;
            border: 1.5px solid var(--rc-border);
            border-radius: 12px;
            font-size: .95rem;
            background: #fff;
            color: var(--rc-text);
            transition: border-color .2s, box-shadow .2s;
        }
        
        .ct-input-wrap input:focus {
            outline: none;
            border-color: var(--rc-accent);
            box-shadow: 0 0 0 3px rgba(245, 158, 11, .15);
        }
        
        .ct-input-wrap input::placeholder {
            color: #a8a29e;
        }
        /* Field error */
        
        .ct-field-error {
            font-size: .76rem;
            color: #ef4444;
            margin-top: .3rem;
        }
        /* reCAPTCHA */
        
        .ct-recaptcha {
            display: flex;
            justify-content: center;
            margin-bottom: .25rem;
        }
        /* Submit button */
        
        .btn-ct-primary {
            width: 100%;
            padding: 1rem 1.5rem;
            margin-top: .5rem;
            background: linear-gradient(135deg, var(--rc-accent) 0%, var(--rc-accent-hover) 100%);
            border: none;
            border-radius: 12px;
            color: #fff;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform .2s, box-shadow .2s, opacity .2s;
            box-shadow: 0 4px 14px rgb(40 179 81 / 35%);
        }
        
        .btn-ct-primary:hover:not([disabled]) {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(40, 179, 81, .4);
        }
        
        .btn-ct-primary:active {
            transform: translateY(0);
        }
        
        .btn-ct-primary[disabled] {
            opacity: .5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        /* Instructions */
        
        .ct-steps {
            display: flex;
            flex-direction: column;
            gap: .55rem;
        }
        
        .ct-step {
            display: flex;
            align-items: flex-start;
            gap: .6rem;
            font-size: .82rem;
            color: var(--rc-muted);
        }
        
        .ct-step-num {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            background: rgba(245, 158, 11, .12);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .7rem;
            font-weight: 700;
            color: var(--rc-accent-hover);
        }
        
        .ct-step-text {
            line-height: 1.5;
            padding-top: .1rem;
        }
        
        .ct-step-text strong {
            color: var(--rc-text);
        }
        /* Form section spacing */
        
        .ct-field {
            margin-bottom: 1.1rem;
        }


/* ============================================================
   IMPORTED FROM history.blade.php — History page (.hs-*)
   ============================================================ */

.hs-page * {
        font-family: 'Be Vietnam Pro', sans-serif;
    }
    /* ── Tabs ── */
    
    .hs-tabs {
        display: flex;
        background: #fff;
        border-radius: 16px 16px 0 0;
        border-bottom: 1.5px solid var(--rc-border);
        overflow: hidden;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
    }
    
    .hs-tab {
        flex: 1;
        padding: .8rem .4rem;
        font-size: .78rem;
        font-weight: 600;
        color: var(--rc-muted);
        background: none;
        border: none;
        border-bottom: 2.5px solid transparent;
        cursor: pointer;
        transition: color .2s, border-color .2s;
        text-align: center;
        line-height: 1.3;
    }
    
    .hs-tab:hover {
        color: var(--rc-text);
    }
    
    .hs-tab.active {
        color: var(--rc-accent-hover);
        border-bottom-color: var(--rc-accent);
    }
    /* ── Tab panels ── */
    
    .hs-panel {
        background: #fff;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
        overflow: hidden;
        margin-bottom: 1rem;
    }
    /* ── History item card ── */
    
    .hs-list {
        display: flex;
        flex-direction: column;
    }
    
    .hs-item {
        padding: .875rem 1rem;
        border-bottom: 1px solid var(--rc-border);
        display: flex;
        flex-direction: column;
        gap: .3rem;
    }
    
    .hs-item:last-child {
        border-bottom: none;
    }
    
    .hs-item-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
    }
    
    .hs-item-time {
        font-size: .72rem;
        color: var(--rc-muted);
    }
    
    .hs-item-name {
        font-size: .88rem;
        font-weight: 600;
        color: var(--rc-text);
    }
    
    .hs-item-sub {
        font-size: .76rem;
        color: var(--rc-muted);
    }
    
    .hs-item-amount-pos {
        font-size: .88rem;
        font-weight: 700;
        color: #16a34a;
        white-space: nowrap;
    }
    
    .hs-item-amount-neg {
        font-size: .88rem;
        font-weight: 700;
        color: #dc2626;
        white-space: nowrap;
    }
    
    .hs-item-fee {
        font-size: .72rem;
        color: #ef4444;
        text-align: right;
    }
    
    .hs-item-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: .5rem;
    }
    
    .hs-item-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: .15rem;
    }
    
    .hs-item-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: .2rem;
        flex-shrink: 0;
    }
    /* ── Status badges ── */
    
    .hs-badge {
        display: inline-flex;
        align-items: center;
        padding: .15rem .55rem;
        border-radius: 99px;
        font-size: .7rem;
        font-weight: 600;
        white-space: nowrap;
    }
    
    .hs-badge-green {
        background: #dcfce7;
        color: #15803d;
    }
    
    .hs-badge-amber {
        background: #fef3c7;
        color: #b45309;
    }
    
    .hs-badge-red {
        background: #fee2e2;
        color: #b91c1c;
    }
    /* ── Pagination ── */
    
    .hs-pagination {
        padding: .75rem 1rem;
        background: var(--rc-bg);
        border-top: 1px solid var(--rc-border);
    }
    /* ── Empty state ── */
    
    .hs-empty {
        padding: 2.5rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .6rem;
        text-align: center;
    }
    
    .hs-empty-icon {
        color: #d1d5db;
    }
    
    .hs-empty-title {
        font-size: .95rem;
        font-weight: 600;
        color: var(--rc-text);
    }
    
    .hs-empty-desc {
        font-size: .82rem;
        color: var(--rc-muted);
    }
    
    .btn-hs-action {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        margin-top: .4rem;
        padding: .65rem 1.25rem;
        background: linear-gradient(135deg, var(--rc-accent) 0%, var(--rc-accent-hover) 100%);
        border: none;
        border-radius: 10px;
        color: #fff;
        font-size: .85rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 3px 10px rgba(245, 158, 11, .3);
        transition: transform .2s, box-shadow .2s;
    }
    
    .btn-hs-action:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 16px rgba(245, 158, 11, .4);
        color: #fff;
    }
    /* ── Info card ── */
    
    .hs-info-card {
        background: #fff;
        border-radius: 16px;
        padding: 1.25rem 1rem;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
    }
    
    .hs-info-title {
        font-size: .88rem;
        font-weight: 700;
        color: var(--rc-text);
        margin-bottom: .875rem;
    }
    
    .hs-info-list {
        display: flex;
        flex-direction: column;
        gap: .6rem;
    }
    
    .hs-info-item {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        font-size: .8rem;
        color: var(--rc-muted);
        line-height: 1.5;
    }
    
    .hs-info-dot {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        margin-top: .05rem;
        background: rgba(245, 158, 11, .12);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .65rem;
        font-weight: 700;
        color: var(--rc-accent-hover);
    }


/* ============================================================
   IMPORTED FROM accumulat.blade.php — Accumulation event (.ac-*)
   ============================================================ */

/* ── Banner ─────────────────────────────── */
        
        .ev-banner {
            background: linear-gradient(135deg, #1c1917 0%, #292524 55%, #1e1b4b 100%);
            border-radius: 16px;
            padding: 1.5rem 1.25rem;
            margin-bottom: 1rem;
            position: relative;
            overflow: hidden;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }
        
        .ev-banner::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 80% 60% at 50% 115%, rgba(167, 139, 250, .2) 0%, transparent 60%);
            pointer-events: none;
        }
        
        .ev-banner-eyebrow {
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: rgba(167, 139, 250, .8);
            margin-bottom: .3rem;
            position: relative;
        }
        
        .ev-banner-title {
            font-size: 1.1rem;
            font-weight: 800;
            color: #fff;
            margin-bottom: .2rem;
            position: relative;
        }
        
        .ev-banner-sub {
            font-size: .78rem;
            color: rgba(255, 255, 255, .45);
            margin-bottom: .875rem;
            position: relative;
        }
        
        .ev-countdown {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            background: rgba(167, 139, 250, .15);
            border: 1px solid rgba(167, 139, 250, .3);
            border-radius: 8px;
            padding: .35rem .875rem;
            font-size: .82rem;
            font-weight: 700;
            color: #c4b5fd;
            position: relative;
        }
        /* ── Progress bar ───────────────────────── */
        
        .ev-progress-wrap {
            background: #fff;
            border-radius: 12px;
            border: 1.5px solid #e9ecef;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
            padding: 1rem;
            margin-bottom: 1rem;
        }
        
        .ev-progress-label {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: .5rem;
        }
        
        .ev-progress-label-left {
            font-size: .78rem;
            color: #78716c;
        }
        
        .ev-progress-label-right {
            font-size: .9rem;
            font-weight: 700;
            color: #7c3aed;
        }
        
        .ev-progress-bar-bg {
            height: 8px;
            background: #f1f0ef;
            border-radius: 99px;
            overflow: hidden;
        }
        
        .ev-progress-bar-fill {
            height: 100%;
            border-radius: 99px;
            background: linear-gradient(90deg, #7c3aed, #a855f7);
            transition: width .5s ease;
        }
        
        .ev-progress-next {
            margin-top: .4rem;
            font-size: .75rem;
            color: #78716c;
        }
        
        .ev-progress-next strong {
            color: #7c3aed;
        }
        /* ── Cards ──────────────────────────────── */
        
        .ev-card {
            background: #fff;
            border-radius: 12px;
            border: 1.5px solid #e9ecef;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
            margin-bottom: 1rem;
            overflow: hidden;
        }
        
        .ev-card-header {
            display: flex;
            align-items: center;
            gap: .5rem;
            padding: .7rem 1rem;
            border-bottom: 1px solid #f1f3f5;
            font-weight: 700;
            font-size: .85rem;
            color: #292524;
        }
        
        .ev-card-header i {
            color: #7c3aed;
            font-size: 1rem;
        }
        
        .ev-card-body {
            padding: 1rem;
        }
        /* ── Alerts ─────────────────────────────── */
        
        .ev-alert {
            border-radius: 10px;
            padding: .7rem 1rem;
            margin-bottom: 1rem;
            font-size: .85rem;
            display: flex;
            align-items: flex-start;
            gap: .5rem;
        }
        
        .ev-alert-success {
            background: #f0fdf4;
            border: 1.5px solid #bbf7d0;
            color: #166534;
        }
        
        .ev-alert-error {
            background: #fff1f2;
            border: 1.5px solid #fecdd3;
            color: #be123c;
        }
        
        .ev-alert i {
            flex-shrink: 0;
            margin-top: .05rem;
        }
        /* ── Milestone cards ────────────────────── */
        
        .ev-ms {
            background: #fff;
            border-radius: 12px;
            border: 1.5px solid #e9ecef;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
            margin-bottom: .75rem;
            overflow: hidden;
            transition: border-color .2s, box-shadow .2s;
        }
        
        .ev-ms.ev-eligible {
            border-color: rgba(124, 58, 237, .35);
            box-shadow: 0 2px 12px rgba(124, 58, 237, .1);
        }
        
        .ev-ms.ev-done {
            border-color: #bbf7d0;
        }
        
        .ev-ms-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: .65rem 1rem;
            background: #f8f9fa;
            border-bottom: 1px solid #f1f3f5;
        }
        
        .ev-ms.ev-eligible .ev-ms-head {
            background: linear-gradient(135deg, #1c1917 0%, #1e1b4b 100%);
            border-bottom-color: rgba(124, 58, 237, .2);
        }
        
        .ev-ms.ev-done .ev-ms-head {
            background: linear-gradient(135deg, #14532d 0%, #166534 100%);
            border-bottom-color: rgba(187, 247, 208, .2);
        }
        
        .ev-ms-title {
            font-weight: 700;
            font-size: .9rem;
            color: #292524;
            display: flex;
            align-items: center;
            gap: .35rem;
        }
        
        .ev-ms.ev-eligible .ev-ms-title,
        .ev-ms.ev-done .ev-ms-title {
            color: #fff;
        }
        
        .ev-badge {
            font-size: .68rem;
            font-weight: 600;
            padding: .18rem .5rem;
            border-radius: 20px;
            white-space: nowrap;
        }
        
        .ev-badge-pending {
            background: #e9ecef;
            color: #6c757d;
        }
        
        .ev-badge-eligible {
            background: rgba(124, 58, 237, .2);
            color: #c4b5fd;
            border: 1px solid rgba(124, 58, 237, .3);
        }
        
        .ev-badge-done {
            background: rgba(134, 239, 172, .22);
            color: #4ade80;
            border: 1px solid rgba(134, 239, 172, .35);
        }
        
        .ev-ms-body {
            padding: .75rem 1rem;
        }
        /* ── Gift table ─────────────────────────── */
        
        .ev-gift-btn {
            background: none;
            border: none;
            padding: 0;
            font-size: .8rem;
            color: #7c3aed;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: .3rem;
            margin-bottom: .5rem;
            font-weight: 600;
        }
        
        .ev-gift-btn:hover {
            color: #6d28d9;
        }
        
        .ev-gift-box {
            background: #faf5ff;
            border: 1px solid #e9d5ff;
            border-radius: 8px;
            padding: .6rem .75rem;
            margin-bottom: .6rem;
            font-size: .78rem;
        }
        
        .ev-gift-box-title {
            font-weight: 700;
            color: #5b21b6;
            margin-bottom: .5rem;
            font-size: .78rem;
        }
        
        .ev-gift-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: .15rem 0;
            color: #78716c;
            border-bottom: 1px solid #f3e8ff;
        }
        
        .ev-gift-row:last-child {
            border-bottom: none;
        }
        
        .ev-gift-qty {
            font-weight: 700;
            color: #7c3aed;
        }
        /* ── Not-reached hint ───────────────────── */
        
        .ev-hint {
            display: flex;
            align-items: flex-start;
            gap: .3rem;
            background: #fff7ed;
            border: 1px solid #fed7aa;
            border-radius: 7px;
            padding: .4rem .625rem;
            font-size: .75rem;
            color: #9a3412;
            margin-bottom: .6rem;
        }
        
        .ev-hint i {
            flex-shrink: 0;
            margin-top: .05rem;
        }
        /* ── Buttons ────────────────────────────── */
        
        .ev-btn {
            width: 100%;
            padding: .6rem 1rem;
            border-radius: 8px;
            font-size: .85rem;
            font-weight: 600;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .4rem;
            transition: opacity .18s, transform .12s;
            text-decoration: none;
        }
        
        .ev-btn:active {
            transform: scale(.98);
        }
        
        .ev-btn-purple {
            background: linear-gradient(135deg, #7c3aed, #6d28d9);
            color: #fff;
            box-shadow: 0 2px 8px rgba(124, 58, 237, .3);
        }
        
        .ev-btn-purple:hover {
            opacity: .9;
            color: #fff;
        }
        
        .ev-btn-done {
            background: #e9ecef;
            color: #6c757d;
            cursor: not-allowed;
        }
        
        .ev-btn-recharge {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #fff;
            cursor: pointer;
            text-decoration: none;
            border: none;
            box-shadow: 0 2px 8px rgba(245, 158, 11, .35);
            animation: pulse-recharge 1.8s ease-in-out infinite;
        }
        
        .ev-btn-recharge:hover {
            opacity: .9;
            color: #fff;
        }
        
        @keyframes pulse-recharge {
            0%, 100% {
                box-shadow: 0 2px 8px rgba(245, 158, 11, .35);
            }
            50% {
                box-shadow: 0 4px 18px rgba(245, 158, 11, .7);
            }
        }
        /* ── Ended ──────────────────────────────── */
        
        .ev-ended {
            text-align: center;
            padding: 1.75rem 1rem;
        }
        
        .ev-ended .ev-ended-icon {
            font-size: 2.25rem;
            color: #a78bfa;
            display: block;
            margin-bottom: .5rem;
        }
        
        .ev-ended h5 {
            font-weight: 700;
            color: #292524;
            margin-bottom: .5rem;
            font-size: 1rem;
        }
        
        .ev-ended p {
            font-size: .85rem;
            color: #78716c;
            margin-bottom: 1rem;
        }
		
		.ct-card {
            background: #fff;
            border-radius: 16px;
            padding: 1.5rem;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
            margin-bottom: 1rem;
        }
        
        .ct-section-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--rc-text);
            margin-bottom: 1.25rem;
        }
		
		/* ── Info card ── */
        
        .hs-info-card {
            background: #fff;
            border-radius: 16px;
            padding: 1.25rem 1rem;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
        }
        
        .hs-info-title {
            font-size: .88rem;
            font-weight: 700;
            color: var(--rc-text);
            margin-bottom: .875rem;
        }
        
        .hs-info-list {
            display: flex;
            flex-direction: column;
            gap: .6rem;
        }
        
        .hs-info-item {
            display: flex;
            align-items: flex-start;
            gap: .6rem;
            font-size: .8rem;
            color: var(--rc-muted);
            line-height: 1.5;
        }
        
        .hs-info-dot {
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            margin-top: .05rem;
            background: rgba(245, 158, 11, .12);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .65rem;
            font-weight: 700;
            color: var(--rc-accent-hover);
        }
		/* Label */
        
        .ct-label {
            display: block;
            font-size: .82rem;
            font-weight: 600;
            color: var(--rc-text);
            margin-bottom: .5rem;
        }
        /* Field spacing */
        
        .ct-field {
            margin-bottom: 1.1rem;
        }
        /* Select */
        
        .ct-select-wrap {
            position: relative;
        }
        
        .ct-select-wrap select {
            width: 100%;
            box-sizing: border-box;
            padding: .9rem 2.5rem .9rem 1rem;
            border: 1.5px solid var(--rc-border);
            border-radius: 12px;
            font-size: .9rem;
            background: #fff;
            color: var(--rc-text);
            appearance: none;
            -webkit-appearance: none;
            transition: border-color .2s, box-shadow .2s;
            cursor: pointer;
        }
        
        .ct-select-wrap select:focus {
            outline: none;
            border-color: var(--rc-accent);
            box-shadow: 0 0 0 3px rgba(245, 158, 11, .15);
        }
        
        .ct-select-arrow {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: var(--rc-muted);
            font-size: .8rem;
        }
		
		#tb-award{
			border-collapse: separate;
			border-spacing: 0;
			border: 1px solid #dee2e6;
			border-radius: 12px;
			overflow: hidden;
		}
		
		#tb-award th,
		#tb-award td{
			border: 1px solid #dee2e6;
		}
		
		#tb-award thead tr:first-child th:first-child{
			border-top-left-radius: 12px;
		}
		
		#tb-award thead tr:first-child th:last-child{
			border-top-right-radius: 12px;
		}
		
		#tb-award tbody tr:last-child td:first-child{
			border-bottom-left-radius: 12px;
		}
		
		#tb-award tbody tr:last-child td:last-child{
			border-bottom-right-radius: 12px;
		}
		/* Actions row */
        
        .ct-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            margin-top: 1.25rem;
        }
        
        .ct-back {
            display: flex;
            align-items: center;
            gap: .3rem;
            font-size: .85rem;
            color: var(--rc-muted);
            text-decoration: none;
            transition: color .2s;
        }
        
        .ct-back:hover {
            color: var(--rc-text);
        }
        
        .btn-ct-submit {
            flex: 1;
            padding: .9rem 1.5rem;
            background: linear-gradient(135deg, var(--rc-accent) 0%, var(--rc-accent-hover) 100%);
            border: none;
            border-radius: 12px;
            color: #fff;
            font-size: .95rem;
            font-weight: 700;
            cursor: pointer;
            transition: transform .2s, box-shadow .2s, opacity .2s;
            box-shadow: 0 4px 14px rgb(40 179 81 / 35%);
        }
        
        .btn-ct-submit:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(40, 179, 81, .4);
        }
        
        .btn-ct-submit:disabled {
            opacity: .5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

/* ============================================================
   HOME (account.blade.php) — .home-* classes
   ============================================================ */

.home-page {
    padding: 0;
}

.home-balance {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: var(--text-on-brand);
    padding: 1.5rem 1.25rem;
    border-radius: var(--radius-xl);
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-md);
}

.home-balance-greeting {
    font-size: var(--fs-sm);
    opacity: 0.9;
    font-weight: var(--fw-medium);
}

.home-balance-label {
    font-size: var(--fs-xs);
    opacity: 0.85;
    margin-top: 0.5rem;
}

.home-balance-value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    margin-top: 0.25rem;
}
.home-balance-value span {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    margin-left: 0.4rem;
    opacity: 0.9;
}

.home-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.home-action {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--surface-card);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.home-action:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--color-primary-text);
}

.home-action-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--brand-50);
    color: var(--color-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.home-action-label {
    flex: 1;
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
}

.home-action-arrow {
    color: var(--text-muted);
    font-size: 1.1rem;
}


/* ============================================================
   HISTORY — Override padding & alignment cho desktop wider
   ============================================================ */

.hs-list .hs-item {
    padding: 1rem 1.5rem;
}

@media (min-width: 768px) {
    .hs-list .hs-item {
        padding: 1.125rem 2rem;
    }
}

/* Item info: căn giữa thông tin trên dòng đầu (time + status) */
.hs-item-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
    .hs-item-row {
        max-width: 720px;
        margin: 0 auto;
        width: 100%;
    }
}