/* ============================================================================
   DreamSoft ID — THEME "AURORA"
   Design system: Deep Purple Neutral + Warm Gold CTA
   ----------------------------------------------------------------------------
   File này PHẢI được nạp SAU @stack('styles') trong layouts/nap.blade.php,
   vì các trang (home.blade.php, nap/index.blade.php…) tự khai :root riêng
   trong @push('styles'). Nạp sau => token ở đây thắng, cả site đổi màu theo
   mà không phải sửa hàng nghìn dòng CSS cũ.

   Tương phản đã đo (WCAG 2.1 AA cần ≥ 4.5:1 cho chữ thường):
     #F1F5F9 trên #0F0A1E ....... 17.71:1
     #CBD5E1 trên #0F0A1E ....... 13.07:1
     #94A3B8 trên #0F0A1E ........ 7.57:1
     #F1F5F9 trên #1A1435 ....... 16.04:1
     #CBD5E1 trên #1A1435 ....... 11.83:1
     #2A1A02 trên #F59E0B ........ 7.84:1  <-- nhãn nút vàng
     #FFFFFF trên #F59E0B ........ 2.15:1  <-- TRƯỢT, tuyệt đối không dùng
============================================================================ */

/* ─────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
───────────────────────────────────────────────────────────── */
:root {
    /* ── Nền — tím đen trung tính ────────────────────────────────────────
       Số đo (L* = độ sáng CẢM NHẬN của mắt, 0-100):
         #050508 (nền cũ) ........ L* 1.4
         #0F0A1E ................. L* 3.7   -> chỉ +2.3 so với cũ, mắt hầu như
                                              không phân biệt được => "vẫn như cũ"
         #16112E (đang dùng) ..... L* 6.9   -> +5.5, thấy rõ rệt
         #1B1438 ................. L* 9.1   -> sáng hơn nữa nếu muốn
       Đổi nền thì phải đổi --au-surface theo, giữ chênh lệch card/nền >= 1.25:1
       thì card mới nổi khối; dưới ngưỡng đó cả trang đọc thành một mảng phẳng. */
    --au-bg:          #130E28;
    --au-bg-soft:     #191330;   /* dải section xen kẽ */
    --au-bg-deep:     #0D0920;   /* vùng chìm: ảnh, đáy modal */

    /* ── BA TẦNG ĐỘ SÂU ──────────────────────────────────────────────────
       Cảm giác "nổi khối" đến từ CHÊNH LỆCH giữa các tầng, không phải từ
       việc màu sáng hay tối. Mỗi tầng phải tách tầng dưới >= 1.25:1, dưới
       ngưỡng đó mắt gộp chúng thành một mảng phẳng.
         nền   #130E28  L* 5.5
         khối  #281E58  L* 15.9   tách nền  1.26:1
         card  #3E2F88  L* 26.3   tách khối 1.39:1  |  tách nền 1.75:1 */
    --au-panel:       #281E58;   /* khối bao ngoài (console) */
    --au-surface:     #3E2F88;   /* card nằm trong khối */
    --au-surface-2:   #4A3A9E;
    --au-surface-3:   #57459F;
    --au-glass:       rgba(40, 30, 88, .82);

    /* Viền tím nhạt */
    --au-border:      rgba(168, 85, 247, .20);
    --au-border-soft: rgba(168, 85, 247, .11);
    --au-border-str:  rgba(168, 85, 247, .42);

    /* Chữ */
    --au-text:        #F1F5F9;
    --au-text-2:      #CBD5E1;
    /* #94A3B8 chỉ còn 4.16:1 trên card #3E2F88 (trượt AA) sau khi nâng các tầng
       -> nâng chữ mờ lên #AFBACB, đạt 5.44:1 */
    --au-text-3:      #AFBACB;
    --au-text-4:      #8A93AD;

    /* Tím — hành động phụ, điều hướng */
    --au-purple:      #8B5CF6;
    --au-purple-l:    #A855F7;
    --au-purple-d:    #6D28D9;

    /* Vàng kim ấm — hành động chính (Nạp) */
    --au-gold:        #F59E0B;
    --au-gold-l:      #FBBF24;
    --au-gold-xl:     #FCD34D;
    --au-gold-d:      #D97706;
    --au-gold-ink:    #2A1A02;   /* nhãn trên nền vàng, KHÔNG dùng trắng */
    --au-gold-glow:   rgba(245, 158, 11, .40);
    --au-gold-glow-s: rgba(245, 158, 11, .62);

    /* Trạng thái */
    --au-success:     #34D399;
    --au-danger:      #F87171;
    --au-hot-a:       #B91C1C;
    --au-hot-b:       #E23A3A;   /* hạ sáng so với #EF4444 để không tranh nhìn với vàng */

    /* Thanh header — sáng hơn --au-surface một tầng để tách khỏi thân trang.
       L* ≈ 34 và 29, trong khi card là 26. Đổi ở đây là đổi cả site. */
    --au-header-a:    #5B4BB4;
    --au-header-b:    #4C3D96;

    --au-radius:      16px;
    --au-radius-sm:   11px;
    --au-radius-pill: 999px;

    --au-shadow:      0 8px 30px rgba(5, 2, 15, .55);
    --au-shadow-lift: 0 16px 42px rgba(5, 2, 15, .68);

    --au-ease:        cubic-bezier(.34, 1.16, .48, 1);

    /* ── Ghi đè token của theme cũ (layouts/nap.blade.php) ── */
    --bg:        var(--au-bg);
    --bg-card:   var(--au-surface);
    --bg-card2:  var(--au-surface-2);
    --border:    var(--au-border);
    --border-s:  var(--au-border-soft);
    --text:      var(--au-text);
    --text-sub:  var(--au-text-3);
    --text-dim:  var(--au-text-4);
    --gold:      var(--au-gold);

    /* ── Ghi đè token trang chủ (home.blade.php) ── */
    --df-bg:       var(--au-bg);
    --df-bg2:      var(--au-bg-soft);
    --df-card:     var(--au-surface);
    --df-card2:    var(--au-surface-2);
    --df-purple:   var(--au-purple);
    --df-purple-l: var(--au-purple-l);
    --df-gold:     var(--au-gold);
    --df-gold-l:   var(--au-gold-l);
    --df-text:     var(--au-text);
    --df-sub:      var(--au-text-3);
}

/* ─────────────────────────────────────────────────────────────
   2. NỀN & BỀ MẶT — vá các chỗ hardcode màu cũ
───────────────────────────────────────────────────────────── */
/* Ánh sáng môi trường phủ toàn trang. Nền phẳng tuyệt đối là lý do lớn nhất
   khiến giao diện "trông vẫn như cũ" dù đã đổi mã màu: mắt đọc màu phẳng diện
   rộng thành một mảng chết, không nhận ra sắc độ. Dùng longhand (không dùng
   shorthand `background`) để không xoá mất các layer khi trang khác ghi đè. */
body {
    background-color: var(--au-bg) !important;
    background-image:
        radial-gradient(ellipse 92% 46% at 50%   0%, rgba(139, 92, 246, .20), transparent 62%),
        radial-gradient(ellipse 58% 42% at 104% 26%, rgba(245, 158, 11, .07), transparent 58%),
        radial-gradient(ellipse 72% 48% at  -6% 72%, rgba(168, 85, 247, .12), transparent 62%) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: var(--au-text);
}
/* background-attachment:fixed giật và tốn pin trên iOS Safari */
@media (hover: none) {
    body { background-attachment: scroll !important; }
}

/* Cho ánh sáng nền xuyên qua các khối bọc đang tô màu đặc */
.df-hero,
#df-games,
[style*="min-height:100vh"] { background: transparent !important; }

/* Các trang khác hardcode màu nền cũ trong @push('styles') — không sửa từng file
   (còn ~58 chỗ hardcode rải rác), gom lại chặn ở đây cho cả site đồng bộ.
   Để trong suốt để ánh sáng nền của body phủ qua. */
.ni-wrap,          /* nap/index   */
.sec-wrap,         /* account/*   */
.acc-wrap,         /* account/profile */
.hist-wrap,        /* nap/history */
.ql-wrap,          /* partials/quick-links */
.page-wrap         /* nap/coin    */
{ background: transparent !important; }
.ni-card { background: var(--au-surface) !important; border-color: var(--au-border) !important; }
.ni-card-img { background: var(--au-bg-deep) !important; }

/* Card nổi khối rõ hơn nền chung */
.au-surface {
    background: var(--au-surface);
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius);
    box-shadow: var(--au-shadow);
}
.au-glass {
    background: var(--au-glass);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius);
    box-shadow: var(--au-shadow);
}

/* Badge HOT — giảm sáng để nhường điểm nhìn cho nút vàng */
.ni-hot, .gc-hot {
    background: linear-gradient(135deg, var(--au-hot-a), var(--au-hot-b)) !important;
    box-shadow: 0 2px 8px rgba(185, 28, 28, .42) !important;
}

/* ─────────────────────────────────────────────────────────────
   3. NÚT NẠP  (component x-button-recharge)
───────────────────────────────────────────────────────────── */
.btn-rc {
    /* Tự khai, KHÔNG dựa vào reset của layout: .btn-rc--block dùng width:100% cộng padding,
       thiếu border-box là nút tràn khỏi card. Component phải đứng vững ở mọi trang. */
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 28px;
    border: none;
    border-radius: 14px;
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    isolation: isolate;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: transform .22s var(--au-ease), box-shadow .22s ease, filter .22s ease;
}
.btn-rc:focus-visible {
    outline: 3px solid var(--au-gold-xl);
    outline-offset: 3px;
}
.btn-rc__icon { display: flex; flex-shrink: 0; }
.btn-rc__label { position: relative; z-index: 2; white-space: nowrap; }

/* ── Biến thể VÀNG ĐẶC — CTA chính ── */
.btn-rc--gold {
    background: linear-gradient(180deg, var(--au-gold-l) 0%, var(--au-gold) 62%, var(--au-gold-d) 100%);
    color: var(--au-gold-ink);
    /* viền highlight cạnh trên -> nổi khối 3D */
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .55),
        inset 0 -1.5px 0 rgba(120, 53, 15, .32),
        0 6px 18px rgba(0, 0, 0, .32),
        0 0 20px var(--au-gold-glow);
}
.btn-rc--gold .btn-rc__icon svg { stroke: var(--au-gold-ink); }
/* vệt sáng quét ngang khi hover */
.btn-rc--gold::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .48), transparent);
    transform: skewX(-18deg);
    z-index: 1;
    pointer-events: none;
    transition: left .55s ease;
}
.btn-rc--gold:hover {
    transform: scale(1.04);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .62),
        inset 0 -1.5px 0 rgba(120, 53, 15, .3),
        0 10px 26px rgba(0, 0, 0, .38),
        0 0 30px var(--au-gold-glow-s);
}
.btn-rc--gold:hover::after { left: 115%; }
.btn-rc--gold:active { transform: scale(.95); }

/* nhịp thở nhẹ để hút mắt — tắt khi hover/loading */
.btn-rc--gold.is-breathing { animation: auGoldBreath 3.4s ease-in-out infinite; }
.btn-rc--gold.is-breathing:hover,
.btn-rc--gold.is-loading { animation: none; }

/* ── Biến thể TÍM — hành động phụ ── */
.btn-rc--purple {
    background: linear-gradient(180deg, var(--au-purple-l), var(--au-purple-d));
    color: #fff;
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .24),
        0 5px 16px rgba(0, 0, 0, .3),
        0 0 16px rgba(139, 92, 246, .26);
}
.btn-rc--purple .btn-rc__icon svg { stroke: #fff; }
.btn-rc--purple:hover {
    transform: scale(1.03);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .3),
        0 8px 22px rgba(0, 0, 0, .36),
        0 0 24px rgba(139, 92, 246, .42);
}
.btn-rc--purple:active { transform: scale(.95); }

/* ── Biến thể GHOST — hành động nhẹ ── */
.btn-rc--ghost {
    background: rgba(168, 85, 247, .09);
    color: var(--au-purple-l);
    border: 1px solid var(--au-border);
    box-shadow: none;
}
.btn-rc--ghost .btn-rc__icon svg { stroke: currentColor; }
.btn-rc--ghost:hover {
    transform: scale(1.03);
    background: rgba(168, 85, 247, .16);
    border-color: var(--au-border-str);
    color: #C4B5FD;
}
.btn-rc--ghost:active { transform: scale(.95); }

/* ── Kích cỡ ── */
.btn-rc--lg { padding: 17px 38px; font-size: 16.5px; border-radius: 16px; }
.btn-rc--sm { padding: 10px 18px; font-size: 13px;   border-radius: 11px; }
.btn-rc--block { display: flex; width: 100%; }

/* ── Loading ── */
.btn-rc__spinner {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    background: inherit;
}
.btn-rc__spinner i {
    width: 19px; height: 19px;
    border-radius: 50%;
    border: 2.5px solid rgba(42, 26, 2, .25);
    border-top-color: var(--au-gold-ink);
    animation: auSpin .68s linear infinite;
}
.btn-rc--purple .btn-rc__spinner i,
.btn-rc--ghost  .btn-rc__spinner i {
    border-color: rgba(255, 255, 255, .25);
    border-top-color: #fff;
}
.btn-rc.is-loading { pointer-events: none; }
.btn-rc.is-loading .btn-rc__spinner { display: flex; }
.btn-rc.is-loading .btn-rc__label,
.btn-rc.is-loading .btn-rc__icon { opacity: 0; }

/* ── Disabled — chặn hoàn toàn ── */
.btn-rc[disabled],
.btn-rc.is-disabled {
    filter: grayscale(.55) brightness(.72);
    opacity: .6;
    cursor: not-allowed;
    pointer-events: none;
    animation: none;
}

/* ── Muted (bảo trì) — trông như tắt nhưng VẪN click được, để còn hiện thông báo
      bảo trì cho người dùng. Đừng thay bằng .is-disabled: pointer-events:none sẽ
      nuốt mất sự kiện click và người dùng không hiểu vì sao bấm không ăn. ── */
.btn-rc.is-muted {
    filter: grayscale(.5) brightness(.78);
    opacity: .62;
    cursor: not-allowed;
    animation: none;
}
.btn-rc.is-muted:hover  { transform: none; filter: grayscale(.4) brightness(.86); }
.btn-rc.is-muted:active { transform: scale(.97); }
.btn-rc.is-muted::after { display: none; }

/* ── Micro-copy dưới nút ── */
.rc-microcopy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 11px 0 0;
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--au-text-3);
    letter-spacing: .2px;
}
.rc-microcopy i {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--au-text-4);
    display: inline-block;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   4A. KHỐI CONSOLE — gom số dư + 2 card vào MỘT khối nổi
   Đây là thứ tạo cảm giác "nổi": một khối có viền sáng, quầng sáng ngoài và
   bóng đổ, đặt trên nền tối. Trước đây số dư và 2 card là các dải phẳng rời
   rạc chạy hết chiều ngang nên không có gì để mắt bám vào.
───────────────────────────────────────────────────────────── */
.au-console {
    position: relative;
    margin: 0 14px 18px;
    padding: 6px;
    border-radius: 22px;
    background: linear-gradient(160deg, var(--au-panel) 0%, #1E1642 100%);
    border: 1px solid rgba(168, 85, 247, .30);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 18px 46px rgba(4, 2, 12, .62),
        0 0 44px rgba(139, 92, 246, .20);
}
/* quầng sáng tím toả ra ngoài mép khối */
.au-console::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 22px;
    padding: 1px;
    background: linear-gradient(140deg, rgba(196, 181, 253, .5), transparent 42%, rgba(245, 158, 11, .26));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    pointer-events: none;
}
.au-console__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 4px;
}

/* ─────────────────────────────────────────────────────────────
   4B. CARD VÍ D XU — CTA phụ mạnh, nổi hơn card "Nạp Game"
───────────────────────────────────────────────────────────── */
.au-wallet {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 20px 14px 18px;
    border-radius: var(--au-radius);
    text-decoration: none;
    isolation: isolate;
    border: 1px solid rgba(245, 158, 11, .40);
    background:
        radial-gradient(ellipse 130% 80% at 50% -20%, rgba(245, 158, 11, .26) 0%, transparent 66%),
        linear-gradient(160deg, var(--au-surface-2) 0%, var(--au-surface) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 8px 24px rgba(4, 2, 12, .5),
        0 0 20px rgba(245, 158, 11, .16);
    transition: transform .25s var(--au-ease), box-shadow .25s ease, border-color .25s ease;
}
.au-wallet:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(245, 158, 11, .7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 16px 36px rgba(4, 2, 12, .6),
        0 0 32px rgba(245, 158, 11, .38);
}
.au-wallet:active { transform: translateY(-1px) scale(.985); }

.au-wallet__badge {
    position: absolute;
    top: 9px; right: 9px;
    z-index: 2;
    padding: 3.5px 9px;
    border-radius: var(--au-radius-pill);
    background: linear-gradient(135deg, var(--au-gold-l), var(--au-gold));
    color: var(--au-gold-ink);
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    box-shadow: 0 2px 9px rgba(245, 158, 11, .48);
    white-space: nowrap;
}

/* Icon to, có quầng sáng riêng -> tạo chiều sâu như ảnh mẫu.
   Quầng dùng ::after tách rời để glow toả ra NGOÀI khung icon. */
.au-wallet__icon {
    position: relative;
    width: 74px; height: 74px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    background: radial-gradient(circle at 34% 24%, rgba(252, 211, 77, .38), rgba(245, 158, 11, .10) 70%);
    border: 1px solid rgba(245, 158, 11, .38);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .26),
        0 6px 18px rgba(4, 2, 12, .45);
}
.au-wallet__icon::after {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, .34) 0%, transparent 68%);
    z-index: -1;
    pointer-events: none;
}
.au-wallet__icon img,
.au-wallet__icon svg {
    width: 46px; height: 46px; display: block;
    filter: drop-shadow(0 3px 8px rgba(120, 53, 15, .55));
}

.au-wallet__name {
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--au-gold-xl);
    letter-spacing: -.2px;
    text-shadow: 0 0 20px rgba(245, 158, 11, .45);
}
.au-wallet__sub {
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--au-text-2);
}
.au-wallet__micro {
    margin-top: 7px;
    padding-top: 8px;
    border-top: 1px dashed rgba(245, 158, 11, .2);
    width: 100%;
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--au-text-3);
    letter-spacing: .1px;
}

/* Card "Nạp Game" — cùng khối lượng thị giác nhưng tông tím, cố ý nhẹ hơn
   D Xu một bậc (quầng mờ hơn, viền nhạt hơn) để D Xu vẫn thắng điểm nhìn. */
.au-gamecard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 20px 14px 18px;
    border-radius: var(--au-radius);
    text-decoration: none;
    isolation: isolate;
    border: 1px solid rgba(168, 85, 247, .30);
    background:
        radial-gradient(ellipse 130% 80% at 50% -20%, rgba(139, 92, 246, .24) 0%, transparent 66%),
        linear-gradient(160deg, var(--au-surface-2) 0%, var(--au-surface) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        0 8px 24px rgba(4, 2, 12, .5);
    transition: transform .25s var(--au-ease), box-shadow .25s ease, border-color .25s ease;
}
.au-gamecard:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(168, 85, 247, .6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 16px 36px rgba(4, 2, 12, .6),
        0 0 28px rgba(139, 92, 246, .34);
}
.au-gamecard:active { transform: translateY(-1px) scale(.985); }
.au-gamecard__icon {
    position: relative;
    width: 74px; height: 74px;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 9px;
    background: radial-gradient(circle at 34% 24%, rgba(196, 181, 253, .32), rgba(139, 92, 246, .10) 70%);
    border: 1px solid rgba(168, 85, 247, .34);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .22),
        0 6px 18px rgba(4, 2, 12, .45);
}
.au-gamecard__icon::after {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, .30) 0%, transparent 68%);
    z-index: -1;
    pointer-events: none;
}
.au-gamecard__icon svg {
    width: 44px; height: 44px;
    filter: drop-shadow(0 3px 8px rgba(30, 12, 70, .6));
}
.au-gamecard__name {
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
    font-size: 20px; font-weight: 800; color: #C4B5FD;
    letter-spacing: -.2px;
    text-shadow: 0 0 20px rgba(139, 92, 246, .45);
}
.au-gamecard__sub {
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
    font-size: 12.5px; line-height: 1.5; color: var(--au-text-2);
}

/* ── Thanh số dư trong khối console ──
   Bỏ viền chạy hết chiều ngang, và cho MỌI chữ sáng bằng nhau. Bản gốc dùng
   rgba(168,162,158,.65) / .5 cho lời chào và nhãn nên chúng mờ hẳn so với con
   số — đọc ra thành "chỉ có số là sáng". */
.au-console .df-balance-bar {
    background: transparent !important;
    border: none !important;
    padding: 15px 17px 12px !important;
}
.au-console .df-bal-greet {
    color: var(--au-text) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
}
.au-console .df-bal-amount { color: #fff !important; }
/* hậu tố "D Xu": trước đây opacity .55 inline -> chuyển sang class và tô vàng
   cho khớp thương hiệu, không làm mờ nữa */
.df-bal-unit {
    font-size: 14px;
    font-weight: 700;
    margin-left: 4px;
    color: var(--au-gold-xl);
    text-shadow: 0 0 14px rgba(245, 158, 11, .4);
}
.au-console .df-bal-btn {
    color: #EDE9FE !important;
    border-color: rgba(168, 85, 247, .5) !important;
    background: rgba(139, 92, 246, .22) !important;
}
.au-console .df-bal-btn:hover {
    color: #fff !important;
    background: rgba(139, 92, 246, .34) !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, .38) !important;
}

/* ─────────────────────────────────────────────────────────────
   5. TOAST
───────────────────────────────────────────────────────────── */
.au-toast-host {
    position: fixed;
    left: 50%;
    bottom: 88px;                     /* né bottom-nav */
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(100% - 32px);
    max-width: 400px;
    pointer-events: none;
}
.au-toast {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border-radius: 14px;
    background: var(--au-glass);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid var(--au-border);
    box-shadow: var(--au-shadow-lift);
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
    pointer-events: auto;
    animation: auToastIn .38s var(--au-ease) both;
}
.au-toast.is-leaving { animation: auToastOut .26s ease both; }
.au-toast__icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.au-toast__title { font-size: 13.5px; font-weight: 700; color: var(--au-text); margin: 0; }
.au-toast__desc  { font-size: 11.5px; color: var(--au-text-3); margin: 2px 0 0; line-height: 1.5; }
.au-toast__close {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: var(--au-text-4); font-size: 19px; line-height: 1; padding: 0 2px;
}
.au-toast__close:hover { color: var(--au-text); }

.au-toast--success { border-color: rgba(52, 211, 153, .34); }
.au-toast--success .au-toast__icon { background: rgba(52, 211, 153, .16); }
.au-toast--error   { border-color: rgba(248, 113, 113, .34); }
.au-toast--error   .au-toast__icon { background: rgba(248, 113, 113, .16); }
.au-toast--gold    { border-color: rgba(245, 158, 11, .38); }
.au-toast--gold    .au-toast__icon { background: rgba(245, 158, 11, .18); }

/* ─────────────────────────────────────────────────────────────
   6. KEYFRAMES
───────────────────────────────────────────────────────────── */
@keyframes auGoldBreath {
    0%, 100% {
        box-shadow:
            inset 0 1.5px 0 rgba(255, 255, 255, .55),
            inset 0 -1.5px 0 rgba(120, 53, 15, .32),
            0 6px 18px rgba(0, 0, 0, .32),
            0 0 18px rgba(245, 158, 11, .32);
    }
    50% {
        box-shadow:
            inset 0 1.5px 0 rgba(255, 255, 255, .62),
            inset 0 -1.5px 0 rgba(120, 53, 15, .32),
            0 6px 18px rgba(0, 0, 0, .32),
            0 0 30px rgba(245, 158, 11, .56);
    }
}
@keyframes auSpin { to { transform: rotate(360deg); } }
@keyframes auToastIn {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes auToastOut {
    to { opacity: 0; transform: translateY(10px) scale(.97); }
}

/* ─────────────────────────────────────────────────────────────
   7. TÔN TRỌNG prefers-reduced-motion
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .btn-rc,
    .btn-rc--gold::after,
    .au-wallet,
    .au-gamecard,
    .au-toast {
        transition: none !important;
        animation: none !important;
    }
    .btn-rc:hover,
    .au-wallet:hover,
    .au-gamecard:hover { transform: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   8. MOBILE
───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .btn-rc      { padding: 13px 20px; font-size: 14px; }
    .btn-rc--lg  { padding: 15px 24px; font-size: 15px; }
    .rc-microcopy { font-size: 10.5px; gap: 6px; }
    .au-toast-host { bottom: 78px; }

    /* Hai card PHẢI co giãn cùng nhau. Trước đây khối này chỉ ghi đè .au-wallet
       nên trên mobile icon D Xu tụt về 46px còn icon Nạp Game vẫn 74px -> lệch hẳn.
       Thêm quy tắc mới cho một card thì luôn nhớ thêm cho card còn lại. */
    .au-wallet,
    .au-gamecard { padding: 16px 10px 14px; }

    .au-wallet__icon,
    .au-gamecard__icon { width: 62px; height: 62px; border-radius: 17px; margin-bottom: 7px; }

    .au-wallet__icon img,
    .au-wallet__icon svg,
    .au-gamecard__icon svg { width: 38px; height: 38px; }

    .au-wallet__name,
    .au-gamecard__name { font-size: 17px; }

    .au-wallet__sub,
    .au-gamecard__sub { font-size: 11.5px; }

    .au-console { margin: 0 12px 16px; border-radius: 20px; }
    .au-console::before { border-radius: 20px; }
}

/* ─────────────────────────────────────────────────────────────
   9. THANH HEADER

   Trước đây header dùng chung --bg-card (= --au-surface #3E2F88) nên
   cùng sắc độ với card bên dưới, cả dải trôi vào nhau. Tách token riêng,
   sáng hơn một tầng để header ra dáng thanh điều hướng và logo có chỗ đứng.
───────────────────────────────────────────────────────────── */
header#header,
.sc-1xynsm6-0,
.bjLtMi {
    background: linear-gradient(180deg, var(--au-header-a) 0%, var(--au-header-b) 100%) !important;
    border-bottom: 1px solid rgba(196, 181, 253, .28) !important;
    box-shadow: 0 2px 18px rgba(5, 2, 15, .45) !important;
}

/* ─────────────────────────────────────────────────────────────
   10. LOGO  (.ds-logo)

   assets/img_0.png là PNG nền trong suốt, chữ "DreamSoft" màu navy
   đậm (~#16266B) — logo vẽ cho nền SÁNG, đặt lên nền tím là chìm.

   Bản trước dùng một tấm nền trắng bo góc. Đọc thì rõ, nhưng logo khi
   đó trông y hệt một cái nút bấm -> sai tín hiệu UX. Nay bỏ hẳn nền và
   viền, chỉ thêm quầng sáng trắng bám sát nét chữ: logo vẫn là ảnh,
   vẫn bấm được, mà phần wordmark navy vẫn tách khỏi nền tím.

   Nếu sau này có bản logo chữ trắng thì bỏ luôn filter ở dưới.
───────────────────────────────────────────────────────────── */
.ds-logo {
    display: inline-flex;
    align-items: center;
    /* KHÔNG nền, KHÔNG viền, KHÔNG padding — mọi thứ khiến nó giống nút */
    background: none;
    border: 0;
    padding: 0;
    line-height: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .18s ease, filter .18s ease;
}

.ds-logo img {
    display: block;
    width: auto;
    object-fit: contain;
    /* Keyline trắng 1px: bốn drop-shadow lệch 1px theo 4 hướng, KHÔNG blur.
       Cách này vẽ ra đường viền sắc ôm sát nét chữ, đọc như logo có keyline
       trong bộ nhận diện. Đã thử phương án quầng mờ (blur 3–9px) nhưng nhìn
       thành hiệu ứng đèn neon, rẻ tiền hơn hẳn. Lớp cuối là bóng tối mảnh
       cho có chiều sâu — không phải màu trắng. */
    filter:
        drop-shadow( 1px 0 0 rgba(255, 255, 255, .92))
        drop-shadow(-1px 0 0 rgba(255, 255, 255, .92))
        drop-shadow(0  1px 0 rgba(255, 255, 255, .92))
        drop-shadow(0 -1px 0 rgba(255, 255, 255, .92))
        drop-shadow(0 1px 3px rgba(5, 2, 15, .40));
}

/* Phản hồi hover kiểu ảnh, không kiểu nút: sáng nhẹ lên, không nảy,
   không đổi nền. Con trỏ vẫn là pointer vì thẻ bọc là <a>. */
a.ds-logo:hover img {
    filter:
        drop-shadow( 1px 0 0 #fff)
        drop-shadow(-1px 0 0 #fff)
        drop-shadow(0  1px 0 #fff)
        drop-shadow(0 -1px 0 #fff)
        drop-shadow(0 0 7px rgba(255, 255, 255, .45))
        drop-shadow(0 1px 3px rgba(5, 2, 15, .40));
}
a.ds-logo:active { opacity: .82; }