/* =====================================================
   VIBRANT DARK THEME - Giao diện tối, chữ sáng nổi bật
   ===================================================== */

/* ============ COLOR PALETTE ============ */
:root {
    /* Dark Background Colors */
    --dark-bg-primary: #0a0a0f;
    --dark-bg-secondary: #12121a;
    --dark-bg-tertiary: #1a1a28;
    --dark-bg-card: #1e1e2e;
    --dark-bg-hover: #252538;

    /* Vibrant Accent Colors */
    --vibrant-cyan: #00ffff;
    --vibrant-magenta: #ff00ff;
    --vibrant-yellow: #ffff00;
    --vibrant-orange: #ff8c00;
    --vibrant-green: #00ff88;
    --vibrant-purple: #bf5fff;
    --vibrant-pink: #ff6b9d;
    --vibrant-blue: #4da6ff;
    --vibrant-red: #ff4757;

    /* Text Colors - Xanh dương */
    --text-bright: #4da6ff;
    --text-light: #4da6ff;
    --text-secondary: #7ec8ff;

    /* Gradient Effects */
    --gradient-vibrant: linear-gradient(135deg, #ff00ff, #00ffff);
    --gradient-fire: linear-gradient(135deg, #ff4757, #ff8c00);
    --gradient-ocean: linear-gradient(135deg, #4da6ff, #00ffff);
    --gradient-nature: linear-gradient(135deg, #00ff88, #00ffff);
    --gradient-sunset: linear-gradient(135deg, #ff6b9d, #bf5fff);

    /* Shadows for glow effect */
    --glow-cyan: 0 0 20px rgba(0, 255, 255, 0.3);
    --glow-magenta: 0 0 20px rgba(255, 0, 255, 0.3);
    --glow-purple: 0 0 20px rgba(191, 95, 255, 0.3);

    /* Border Colors */
    --border-dark: #2a2a40;
    --border-accent: rgba(0, 255, 255, 0.3);
}

/* ============ BASE STYLES ============ */
body {
    background: var(--dark-bg-primary) !important;
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(0, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(255, 0, 255, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, var(--dark-bg-primary) 0%, var(--dark-bg-secondary) 100%) !important;
    background-attachment: fixed !important;
    color: #4da6ff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

/* ============ TYPOGRAPHY - Bold & Large ============ */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #4da6ff !important;
    font-weight: 800 !important;
    text-shadow: 0 0 20px rgba(77, 166, 255, 0.5);
    letter-spacing: 0.5px;
}

h1 {
    font-size: 2.8rem !important;
    color: #4da6ff !important;
}

h2 {
    font-size: 2.2rem !important;
    color: #4da6ff !important;
}

h3 {
    font-size: 1.8rem !important;
    color: #4da6ff !important;
}

h4 {
    font-size: 1.5rem !important;
    color: #4da6ff !important;
}

h5 {
    font-size: 1.3rem !important;
    color: #4da6ff !important;
}

h6 {
    font-size: 1.1rem !important;
    color: #4da6ff !important;
}

p,
span,
li,
td,
th,
label,
div {
    color: #4da6ff !important;
    font-weight: 600 !important;
}

/* Text trong modal và cards - đảm bảo hiển thị rõ */
.modal-body p,
.modal-body span,
.modal-body div,
.card-body p,
.card-body span,
.card-body div {
    color: #4da6ff !important;
    font-weight: 600 !important;
}

strong,
b {
    color: #4da6ff !important;
    font-weight: 800 !important;
}

/* ============ LINKS ============ */
a {
    color: #4da6ff !important;
    font-weight: 600 !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: #7ec8ff !important;
    text-shadow: 0 0 15px rgba(77, 166, 255, 0.5);
}

/* ============ CARDS & CONTAINERS ============ */
.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group-item,
.table,
.form-control,
.form-select,
.input-group-text {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--border-dark) !important;
    color: var(--text-bright) !important;
    box-shadow: var(--glow-purple);
}

.card {
    border-radius: 16px !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card:hover {
    border-color: var(--vibrant-cyan) !important;
    box-shadow: var(--glow-cyan);
    transform: translateY(-4px);
}

.card-header {
    background: linear-gradient(90deg, var(--dark-bg-tertiary), var(--dark-bg-card)) !important;
    border-bottom: 2px solid var(--vibrant-cyan) !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    color: var(--vibrant-cyan) !important;
}

.card-body {
    background: var(--dark-bg-card) !important;
    padding: 1.5rem !important;
}

.card-footer {
    background: var(--dark-bg-tertiary) !important;
    border-top: 1px solid var(--border-dark) !important;
}

.card-title {
    color: var(--vibrant-cyan) !important;
    font-weight: 800 !important;
    font-size: 1.4rem !important;
}

/* ============ NAVIGATION & NAVBAR ============ */
.navbar,
.app-header,
header,
nav {
    background: linear-gradient(180deg, var(--dark-bg-primary), var(--dark-bg-secondary)) !important;
    border-bottom: 2px solid var(--vibrant-magenta) !important;
    box-shadow: 0 4px 20px rgba(255, 0, 255, 0.2);
}

.nav-link,
.navbar-nav .nav-link {
    color: var(--text-bright) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease;
    padding: 0.7rem 1.2rem !important;
}

.nav-link:hover,
.navbar-nav .nav-link:hover {
    color: var(--vibrant-cyan) !important;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
    background: rgba(0, 255, 255, 0.1) !important;
    border-radius: 8px;
}

.nav-link.active,
.navbar-nav .nav-link.active {
    color: var(--vibrant-magenta) !important;
    background: rgba(255, 0, 255, 0.1) !important;
    border-radius: 8px;
}

/* ============ BUTTONS ============ */
.btn {
    font-weight: 700 !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
    padding: 0.8rem 1.5rem !important;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary {
    background: var(--gradient-ocean) !important;
    border: none !important;
    color: var(--dark-bg-primary) !important;
    box-shadow: var(--glow-cyan);
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
}

.btn-success {
    background: var(--gradient-nature) !important;
    border: none !important;
    color: var(--dark-bg-primary) !important;
}

.btn-danger {
    background: var(--gradient-fire) !important;
    border: none !important;
    color: var(--text-bright) !important;
}

.btn-warning {
    background: linear-gradient(135deg, var(--vibrant-yellow), var(--vibrant-orange)) !important;
    border: none !important;
    color: var(--dark-bg-primary) !important;
}

.btn-info {
    background: var(--gradient-sunset) !important;
    border: none !important;
    color: var(--text-bright) !important;
}

.btn-secondary,
.btn-light {
    background: var(--dark-bg-tertiary) !important;
    border: 2px solid var(--vibrant-purple) !important;
    color: var(--vibrant-purple) !important;
}

.btn-secondary:hover,
.btn-light:hover {
    background: var(--vibrant-purple) !important;
    color: var(--text-bright) !important;
}

.btn-outline-primary {
    border: 2px solid var(--vibrant-cyan) !important;
    color: var(--vibrant-cyan) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: var(--vibrant-cyan) !important;
    color: var(--dark-bg-primary) !important;
}

/* ============ FORMS ============ */
.form-control,
.form-select,
input,
textarea,
select {
    background: var(--dark-bg-tertiary) !important;
    border: 2px solid var(--border-dark) !important;
    color: var(--text-bright) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
    padding: 0.8rem 1rem !important;
    transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
    border-color: var(--vibrant-cyan) !important;
    box-shadow: var(--glow-cyan) !important;
    outline: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7;
}

.form-label,
label {
    color: var(--vibrant-purple) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
}

/* ============ TABLES ============ */
.table {
    background: var(--dark-bg-card) !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.table th {
    background: linear-gradient(90deg, var(--dark-bg-tertiary), var(--dark-bg-secondary)) !important;
    color: var(--vibrant-cyan) !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    border-bottom: 2px solid var(--vibrant-cyan) !important;
    padding: 1rem !important;
    text-transform: uppercase;
}

.table td {
    background: var(--dark-bg-card) !important;
    color: var(--text-light) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--border-dark) !important;
    padding: 1rem !important;
}

.table-striped tbody tr:nth-of-type(odd) td {
    background: var(--dark-bg-tertiary) !important;
}

.table-hover tbody tr:hover td {
    background: var(--dark-bg-hover) !important;
    color: var(--vibrant-cyan) !important;
}

/* ============ BADGES ============ */
.badge {
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 20px !important;
    text-transform: uppercase;
}

.badge.bg-primary,
.badge-primary {
    background: var(--gradient-ocean) !important;
    color: var(--dark-bg-primary) !important;
}

.badge.bg-success,
.badge-success {
    background: var(--gradient-nature) !important;
    color: var(--dark-bg-primary) !important;
}

.badge.bg-danger,
.badge-danger {
    background: var(--gradient-fire) !important;
    color: var(--text-bright) !important;
}

.badge.bg-warning,
.badge-warning {
    background: linear-gradient(135deg, var(--vibrant-yellow), var(--vibrant-orange)) !important;
    color: var(--dark-bg-primary) !important;
}

.badge.bg-info,
.badge-info {
    background: var(--gradient-sunset) !important;
    color: var(--text-bright) !important;
}

/* ============ ALERTS ============ */
.alert {
    background: var(--dark-bg-tertiary) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 1rem 1.5rem !important;
}

.alert-success {
    border-left: 4px solid var(--vibrant-green) !important;
    color: var(--vibrant-green) !important;
}

.alert-danger {
    border-left: 4px solid var(--vibrant-red) !important;
    color: var(--vibrant-red) !important;
}

.alert-warning {
    border-left: 4px solid var(--vibrant-yellow) !important;
    color: var(--vibrant-yellow) !important;
}

.alert-info {
    border-left: 4px solid var(--vibrant-cyan) !important;
    color: var(--vibrant-cyan) !important;
}

/* ============ MODALS ============ */
.modal-content {
    background: var(--dark-bg-card) !important;
    border: 2px solid var(--vibrant-purple) !important;
    border-radius: 16px !important;
    box-shadow: 0 0 50px rgba(191, 95, 255, 0.3);
}

.modal-header {
    background: linear-gradient(90deg, var(--dark-bg-tertiary), var(--dark-bg-card)) !important;
    border-bottom: 2px solid var(--vibrant-magenta) !important;
    padding: 1.5rem !important;
}

.modal-title {
    color: var(--vibrant-magenta) !important;
    font-weight: 800 !important;
    font-size: 1.5rem !important;
}

.modal-body {
    background: var(--dark-bg-card) !important;
    padding: 1.5rem !important;
}

.modal-footer {
    background: var(--dark-bg-tertiary) !important;
    border-top: 1px solid var(--border-dark) !important;
}

.btn-close {
    filter: invert(1) brightness(2);
}

/* ============ DROPDOWN ============ */
.dropdown-menu {
    background: var(--dark-bg-card) !important;
    border: 2px solid var(--vibrant-purple) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 0.5rem !important;
}

.dropdown-item {
    color: var(--text-light) !important;
    font-weight: 600 !important;
    padding: 0.8rem 1.2rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease;
}

.dropdown-item:hover {
    background: rgba(0, 255, 255, 0.1) !important;
    color: var(--vibrant-cyan) !important;
}

/* ============ SIDEBAR ============ */
.sidebar,
.offcanvas {
    background: var(--dark-bg-secondary) !important;
    border-right: 2px solid var(--vibrant-purple) !important;
}

.sidebar-item a,
.offcanvas a {
    color: var(--text-light) !important;
    font-weight: 600 !important;
}

.sidebar-item a:hover,
.offcanvas a:hover {
    color: var(--vibrant-cyan) !important;
    background: rgba(0, 255, 255, 0.1) !important;
}

/* ============ PAGINATION ============ */
.pagination .page-link {
    background: var(--dark-bg-tertiary) !important;
    border: 2px solid var(--border-dark) !important;
    color: var(--text-light) !important;
    font-weight: 700 !important;
    transition: all 0.3s ease;
}

.pagination .page-link:hover {
    background: var(--dark-bg-hover) !important;
    border-color: var(--vibrant-cyan) !important;
    color: var(--vibrant-cyan) !important;
}

.pagination .page-item.active .page-link {
    background: var(--gradient-vibrant) !important;
    border: none !important;
    color: var(--dark-bg-primary) !important;
}

/* ============ PROGRESS BARS ============ */
.progress {
    background: var(--dark-bg-tertiary) !important;
    border-radius: 10px !important;
    height: 12px !important;
    overflow: hidden;
}

.progress-bar {
    background: var(--gradient-vibrant) !important;
    font-weight: 700 !important;
}

/* ============ FOOTER ============ */
footer,
.footer {
    background: var(--dark-bg-primary) !important;
    border-top: 2px solid var(--vibrant-magenta) !important;
    color: var(--text-light) !important;
}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--dark-bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-vibrant);
    border-radius: 10px;
    border: 2px solid var(--dark-bg-primary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--vibrant-magenta);
}

/* ============ SPECIAL EFFECTS ============ */
/* Glow text animation */
.glow-text {
    animation: textGlow 2s ease-in-out infinite alternate;
}

@keyframes textGlow {
    0% {
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    }

    100% {
        text-shadow: 0 0 20px rgba(255, 0, 255, 0.8), 0 0 30px rgba(0, 255, 255, 0.5);
    }
}

/* Gradient border animation */
.gradient-border {
    position: relative;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--gradient-vibrant);
    border-radius: inherit;
    z-index: -1;
    animation: borderRotate 3s linear infinite;
}

@keyframes borderRotate {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

/* ============ OVERRIDE DEFAULT LIGHT BACKGROUNDS ============ */
.bg-white,
.bg-light {
    background: var(--dark-bg-card) !important;
}

.bg-secondary {
    background: var(--dark-bg-tertiary) !important;
}

.text-dark {
    color: var(--text-bright) !important;
}

.text-muted {
    color: var(--text-secondary) !important;
}

.text-primary {
    color: var(--vibrant-cyan) !important;
}

.text-success {
    color: var(--vibrant-green) !important;
}

.text-danger {
    color: var(--vibrant-red) !important;
}

.text-warning {
    color: var(--vibrant-yellow) !important;
}

.text-info {
    color: var(--vibrant-purple) !important;
}

/* ============ BORDER UTILITIES ============ */
.border,
.border-top,
.border-bottom,
.border-left,
.border-right {
    border-color: var(--border-dark) !important;
}

/* ============ LIST GROUP ============ */
.list-group-item {
    background: var(--dark-bg-card) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-light) !important;
    font-weight: 600 !important;
}

.list-group-item:hover {
    background: var(--dark-bg-hover) !important;
    color: var(--vibrant-cyan) !important;
}

/* ============ ACCORDION ============ */
.accordion-item {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--border-dark) !important;
}

.accordion-button {
    background: var(--dark-bg-tertiary) !important;
    color: var(--text-bright) !important;
    font-weight: 700 !important;
}

.accordion-button:not(.collapsed) {
    background: var(--dark-bg-hover) !important;
    color: var(--vibrant-cyan) !important;
}

.accordion-body {
    background: var(--dark-bg-card) !important;
    color: var(--text-light) !important;
}

/* ============ TOAST ============ */
.toast {
    background: var(--dark-bg-card) !important;
    border: 2px solid var(--vibrant-purple) !important;
    color: var(--text-bright) !important;
}

/* ============ BREADCRUMB ============ */
.breadcrumb {
    background: var(--dark-bg-tertiary) !important;
    border-radius: 8px !important;
    padding: 0.8rem 1rem !important;
}

.breadcrumb-item {
    color: var(--text-light) !important;
    font-weight: 600 !important;
}

.breadcrumb-item.active {
    color: var(--vibrant-cyan) !important;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--vibrant-purple) !important;
}

/* ============ FIX TEXT VISIBILITY ============ */
/* Đảm bảo tất cả text đều sáng và rõ ràng */
* {
    color: inherit;
}

/* Text mặc định - màu sáng */
body * {
    color: var(--text-light);
}

/* Headings - màu neon nổi bật */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--vibrant-cyan) !important;
    font-weight: 800 !important;
}

/* ============ PRICING CARDS FIX ============ */
/* Pricing/Package cards trong modal */
.pricing-card,
.package-card,
[class*="pricing"],
[class*="package"],
[class*="plan"] {
    background: var(--dark-bg-card) !important;
    border: 2px solid var(--vibrant-orange) !important;
    border-radius: 16px !important;
}

.pricing-card *,
.package-card *,
[class*="pricing"] *,
[class*="package"] *,
[class*="plan"] * {
    color: var(--text-bright) !important;
}

/* Giá tiền - nổi bật */
.price,
[class*="price"],
.amount,
[class*="amount"] {
    color: var(--vibrant-yellow) !important;
    font-weight: 800 !important;
    font-size: 2rem !important;
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
}

/* Mô tả sản phẩm */
.description,
.product-description,
[class*="description"] {
    color: var(--text-light) !important;
    font-weight: 500 !important;
}

/* ============ ALL MODAL TEXT FIX ============ */
.modal * {
    color: var(--text-bright) !important;
}

.modal h1,
.modal h2,
.modal h3,
.modal h4,
.modal h5,
.modal h6 {
    color: var(--vibrant-cyan) !important;
}

.modal .price,
.modal [class*="price"] {
    color: var(--vibrant-yellow) !important;
}

.modal .btn {
    color: var(--dark-bg-primary) !important;
}

.modal .btn-secondary,
.modal .btn-outline-primary,
.modal .btn-outline-secondary {
    color: var(--vibrant-cyan) !important;
}

/* ============ ENSURE ALL TEXT VISIBLE ============ */
/* Override cho tất cả các trường hợp text bị ẩn */
[style*="color: white"],
[style*="color:#fff"],
[style*="color: #fff"] {
    color: var(--text-bright) !important;
}

[style*="color: black"],
[style*="color:#000"],
[style*="color: #000"] {
    color: var(--text-bright) !important;
}

/* Small text */
small,
.small,
.text-sm {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

/* List items */
ul li,
ol li {
    color: var(--text-light) !important;
}

ul li::marker {
    color: var(--vibrant-cyan) !important;
}

/* ============ ICONS ============ */
i,
.fa,
.fas,
.far,
.fab,
.icon {
    color: var(--vibrant-cyan) !important;
}

/* ============ SPECIAL ELEMENTS ============ */
/* Countdown, timers */
.countdown,
.timer,
[class*="countdown"],
[class*="timer"] {
    color: var(--vibrant-yellow) !important;
    font-weight: 800 !important;
}

/* Status badges */
.status,
[class*="status"] {
    font-weight: 700 !important;
}

/* ============ FORCE DARK BACKGROUND ============ */
/* Override bất kỳ background sáng nào */
[style*="background: white"],
[style*="background:#fff"],
[style*="background-color: white"],
[style*="background-color:#fff"],
[style*="background: #fff"],
[style*="background-color: #fff"] {
    background: var(--dark-bg-card) !important;
}

/* Cards bên trong modal */
.modal .card,
.modal .card-body {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--vibrant-purple) !important;
}

/* ============ VIP/PREMIUM TAGS ============ */
.vip,
.premium,
.hot,
.new,
[class*="vip"],
[class*="premium"],
[class*="hot"],
[class*="new"] {
    background: var(--gradient-fire) !important;
    color: var(--text-bright) !important;
    font-weight: 700 !important;
    padding: 0.3rem 0.8rem !important;
    border-radius: 8px !important;
}

/* ============ FIX MODAL GÓI TÂN THỦ ============ */
/* Modal content background dark */
#firstPurchaseModal .modal-body,
#purchaseModal .modal-body,
#firstPurchaseReminderModal .modal-body {
    background: var(--dark-bg-card) !important;
}

/* Tất cả text trong modal = xanh */
#firstPurchaseModal *,
#purchaseModal *,
#firstPurchaseReminderModal *,
#giftcodeReminderModal * {
    color: #4da6ff !important;
}

/* Alert trong modal */
#firstPurchaseModal .alert,
#purchaseModal .alert {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid #4da6ff !important;
}

/* Package cards trong modal - nền tối */
#firstPurchaseModal .card,
#firstPurchaseModal [class*="package"],
#firstPurchaseModal [class*="pricing"],
#packages-container>div {
    background: var(--dark-bg-tertiary) !important;
    border: 2px solid #4da6ff !important;
    border-radius: 12px !important;
}

/* Price trong modal */
#firstPurchaseModal .price,
#firstPurchaseModal [class*="price"],
#purchaseModal .price,
#purchaseModal [class*="price"],
#modal-package-price {
    color: #ffff00 !important;
    font-weight: 800 !important;
    font-size: 1.8rem !important;
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
}

/* Buttons trong modal */
#firstPurchaseModal .btn,
#purchaseModal .btn {
    color: #ffffff !important;
}

/* Form inputs trong modal */
#purchaseModal .form-control,
#purchaseModal input {
    background: var(--dark-bg-tertiary) !important;
    border: 2px solid #4da6ff !important;
    color: #4da6ff !important;
}

/* Fix header modal gradient - cho text trắng */
#firstPurchaseModal .modal-header *,
#purchaseModal .modal-header *,
.modal-header.bg-gradient-warning * {
    color: #ffffff !important;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.6rem !important;
    }

    h3 {
        font-size: 1.4rem !important;
    }

    h4 {
        font-size: 1.2rem !important;
    }

    .btn {
        font-size: 0.9rem !important;
        padding: 0.6rem 1rem !important;
    }
}

/* ============ GLOBAL TEXT COLOR FIX ============ */
/* Force ALL text to blue - highest priority */
html body,
html body *:not(.btn):not(.badge):not(.alert):not([class*="btn-"]) {
    color: #4da6ff !important;
}

/* Ensure text is visible everywhere */
.text-dark,
.text-black,
.text-body,
.text-reset,
[class*="text-dark"],
[class*="text-black"] {
    color: #4da6ff !important;
}

/* Fix inline styles that set color to black/dark */
[style*="color: #000"],
[style*="color:#000"],
[style*="color: black"],
[style*="color:black"],
[style*="color: rgb(0"],
[style*="color:rgb(0"],
[style*="color: #333"],
[style*="color:#333"],
[style*="color: #212529"],
[style*="color:#212529"] {
    color: #4da6ff !important;
}

/* ============ SETTINGS/PROFILE PAGES FIX ============ */
/* Profile, Recharge, ChangePassword pages */
.page-wrapper *,
.container *,
.container-fluid *,
.container-sm *,
.main-wrapper *,
#main-wrapper * {
    color: #4da6ff !important;
}

/* Cards everywhere */
.card *,
.card-header *,
.card-body *,
.card-footer *,
.card-title,
.card-text {
    color: #4da6ff !important;
}

/* Form elements */
.form-group *,
.form-label,
.form-text,
.form-check-label,
input::placeholder,
textarea::placeholder,
.input-group-text {
    color: #4da6ff !important;
}

/* Tables */
table *,
.table *,
thead *,
tbody *,
th,
td {
    color: #4da6ff !important;
}

/* Lists */
ul *,
ol *,
li,
.list-group *,
.list-group-item * {
    color: #4da6ff !important;
}

/* Navigation */
.nav *,
.navbar *,
.nav-link,
.nav-item *,
.dropdown-menu *,
.dropdown-item {
    color: #4da6ff !important;
}

/* Sidebar/Offcanvas */
.sidebar *,
.offcanvas *,
.offcanvas-header *,
.offcanvas-body * {
    color: #4da6ff !important;
}

/* Footer */
footer *,
.footer * {
    color: #4da6ff !important;
}

/* Breadcrumb */
.breadcrumb *,
.breadcrumb-item {
    color: #4da6ff !important;
}

/* Tabs */
.nav-tabs *,
.nav-pills *,
.tab-content *,
.tab-pane * {
    color: #4da6ff !important;
}

/* Accordion */
.accordion *,
.accordion-item *,
.accordion-header *,
.accordion-body *,
.accordion-button {
    color: #4da6ff !important;
}

/* Alerts - keep readable */
.alert *,
.alert-info *,
.alert-success *,
.alert-warning *,
.alert-danger * {
    color: #4da6ff !important;
}

/* Code blocks */
code,
pre,
.code {
    color: #7ec8ff !important;
    background: var(--dark-bg-tertiary) !important;
}

/* Selection */
::selection {
    background: #4da6ff !important;
    color: #0a0a0f !important;
}

/* ============ BUTTONS TEXT - WHITE ============ */
.btn,
.btn *,
[class*="btn-"],
[class*="btn-"] *,
button,
button * {
    color: #ffffff !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info {
    color: #4da6ff !important;
    border-color: #4da6ff !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-info:hover {
    color: #ffffff !important;
    background: #4da6ff !important;
}

/* ============ BADGES - WHITE TEXT ============ */
.badge,
.badge *,
[class*="badge-"],
[class*="badge-"] * {
    color: #ffffff !important;
}

/* ============ SPECIFIC PAGE FIXES ============ */
/* Recharge/Nạp tiền page */
.recharge-card *,
.payment-method *,
.payment-info *,
[class*="recharge"] *,
[class*="payment"] * {
    color: #4da6ff !important;
}

/* Profile/Member page */
.profile-card *,
.member-info *,
.user-info *,
.account-info *,
[class*="profile"] *,
[class*="member"] *,
[class*="user-"] * {
    color: #4da6ff !important;
}

/* Change Password page */
.password-form *,
[class*="password"] * {
    color: #4da6ff !important;
}

/* Download page */
.download-card *,
[class*="download"] * {
    color: #4da6ff !important;
}

/* Top ranking pages */
.ranking-table *,
.leaderboard *,
[class*="ranking"] *,
[class*="leaderboard"] *,
[class*="top-"] * {
    color: #4da6ff !important;
}

/* ============ INPUTS ALWAYS BLUE TEXT ============ */
input,
textarea,
select,
.form-control,
.form-select {
    color: #4da6ff !important;
    background: var(--dark-bg-tertiary) !important;
    border-color: #4da6ff !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    color: #4da6ff !important;
    border-color: #7ec8ff !important;
    box-shadow: 0 0 10px rgba(77, 166, 255, 0.3) !important;
}

/* ============ FIX ANY REMAINING DARK TEXT ============ */
.fw-bold,
.fw-semibold,
.fw-normal,
.fw-light,
strong,
b,
em,
i:not(.fas):not(.far):not(.fab):not(.fa) {
    color: #4da6ff !important;
}

/* Helper classes */
.user-name,
.user-meta-info *,
.simplebar-content * {
    color: #4da6ff !important;
}