/* =========================================================================
   DARK MODE SYSTEM - THUEMAIL24H.COM
   Tông màu: Nền #0b1120 / Card #1e293b / Border #334155 / Text #f8fafc & #94a3b8
   ========================================================================= */

/* Tránh giật flash trắng khi tải trang */
html[data-theme="dark"],
html[data-theme="dark"] body,
body[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="dark"] body,
body[data-theme="dark"] {
    background-color: #0b1120 !important;
    color: #e2e8f0 !important;
}

/* Nền khối Header & Navbar */
body[data-theme="dark"] .header-part,
body[data-theme="dark"] .navbar-part,
body[data-theme="dark"] .navbar-content {
    background: #0f172a !important;
    border-color: #1e293b !important;
}

body[data-theme="dark"] .header-part.active {
    background: #0f172a !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Header Top */
body[data-theme="dark"] .header-top {
    background-color: #060911 !important;
    border-bottom: 1px solid #1e293b !important;
}

/* Hệ thống Logo Dark / Light Mode tự động */
.logo-dark-img {
    display: none !important;
}
.logo-light-img {
    display: inline-block !important;
}

body[data-theme="dark"] .logo-light-img,
html[data-theme="dark"] .logo-light-img {
    display: none !important;
}
body[data-theme="dark"] .logo-dark-img,
html[data-theme="dark"] .logo-dark-img {
    display: inline-block !important;
}

body[data-theme="dark"] .header-logo img,
body[data-theme="dark"] .header-media-group a img,
body[data-theme="dark"] .nav-header a img,
body[data-theme="dark"] .modern-footer-brand a img {
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.25));
}

/* Logo & Form tìm kiếm trên Header */
body[data-theme="dark"] .header-form {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body[data-theme="dark"] .header-form input {
    background: transparent !important;
    color: #f8fafc !important;
}

body[data-theme="dark"] .header-form input::placeholder {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .header-form button {
    background: transparent !important;
    color: #94a3b8 !important;
}

body[data-theme="dark"] .header-form button i {
    color: #94a3b8 !important;
}

/* Header Widgets & Icons */
body[data-theme="dark"] .header-widget i {
    background: #1e293b !important;
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .header-widget:hover i {
    background: #2563eb !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .header-widget span {
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .header-widget span p.text-uppercase {
    color: #f8fafc !important;
}

body[data-theme="dark"] .header-media-group a[style*="background-color"],
body[data-theme="dark"] .header-media-group button {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
}

/* Navbar Links & Megamenu */
body[data-theme="dark"] .navbar-link {
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .navbar-link:hover,
body[data-theme="dark"] .navbar-link.active {
    color: #38bdf8 !important;
}

body[data-theme="dark"] .megamenu {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

body[data-theme="dark"] .megamenu-title {
    color: #f8fafc !important;
}

body[data-theme="dark"] .megamenu-item a {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .megamenu-item a:hover {
    color: #38bdf8 !important;
}

/* Cards & Khối Sản Phẩm Trang Chủ */
body[data-theme="dark"] .account-card,
body[data-theme="dark"] .card,
body[data-theme="dark"] .product-card,
body[data-theme="dark"] .product-box4,
body[data-theme="dark"] .details-content,
body[data-theme="dark"] .footer-part,
body[data-theme="dark"] .modal-content {
    background: #0f172a !important;
    border-color: #1e293b !important;
    color: #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

/* Box 4 & Product Cards */
body[data-theme="dark"] .product-head-box4 {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body[data-theme="dark"] .product-head-box4 h4 {
    color: #f8fafc !important;
}

body[data-theme="dark"] .product-body-box4,
body[data-theme="dark"] .product-footer-box4 {
    border-color: #1e293b !important;
}

body[data-theme="dark"] .product-body-box4 p {
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .border-end-box4 {
    border-right-color: #1e293b !important;
}

body[data-theme="dark"] .product-footer-box4 strong {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .more-btn-box4 {
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
    background: transparent !important;
}

body[data-theme="dark"] .more-btn-box4:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
}

/* Featured / Pinned Products Card in Dark Mode */
body[data-theme="dark"] .featured-product-card {
    background: linear-gradient(180deg, rgba(255, 75, 43, 0.08) 0%, #0f172a 100%) !important;
    border-color: #ff4b2b !important;
}

/* Tables (Bảng danh sách sản phẩm, bảng đơn hàng) */
body[data-theme="dark"] .table,
body[data-theme="dark"] table {
    color: #cbd5e1 !important;
    background-color: transparent !important;
}

body[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent !important;
    color: #cbd5e1 !important;
    border-bottom-color: #1e293b !important;
}

body[data-theme="dark"] .table-bordered-black,
body[data-theme="dark"] table.table-bordered-black,
body[data-theme="dark"] .table-custom-bordered,
body[data-theme="dark"] table.table-custom-bordered {
    border-color: #334155 !important;
}

body[data-theme="dark"] .table-bordered-black th, 
body[data-theme="dark"] .table-bordered-black td,
body[data-theme="dark"] .table-custom-bordered th,
body[data-theme="dark"] .table-custom-bordered td {
    border-color: #1e293b !important;
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .table-bordered-black thead th,
body[data-theme="dark"] .table-custom-bordered thead th {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-bottom-color: #334155 !important;
}

body[data-theme="dark"] .table-bordered-black tbody tr:nth-child(even),
body[data-theme="dark"] .table-custom-bordered tbody tr:nth-child(even) {
    background-color: rgba(30, 41, 59, 0.4) !important;
}

body[data-theme="dark"] .table-bordered-black tbody tr:hover,
body[data-theme="dark"] .table-custom-bordered tbody tr:hover {
    background-color: rgba(51, 65, 85, 0.5) !important;
}

/* Category Filter Buttons */
body[data-theme="dark"] .btn-category-home {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border: 1px solid #334155 !important;
}

body[data-theme="dark"] .btn-category-home:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .btn-category-home.active {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* Modals (Modal Mua hàng, Xem chi tiết, Nạp tiền) */
body[data-theme="dark"] .modal-header {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
    color: #f8fafc !important;
}

body[data-theme="dark"] .modal-title {
    color: #f8fafc !important;
}

body[data-theme="dark"] .modal-body {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .modal-footer {
    background: #1e293b !important;
    border-top-color: #334155 !important;
}

body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select,
body[data-theme="dark"] .form-control-view-product {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body[data-theme="dark"] .form-control:focus,
body[data-theme="dark"] .form-select:focus {
    background-color: #1e293b !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(56, 189, 248, 0.25) !important;
}

/* Inputs & Quantity Actions in Modal */
body[data-theme="dark"] .action-input,
body[data-theme="dark"] .crypto-input-field {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body[data-theme="dark"] .action-minus1,
body[data-theme="dark"] .action-plus1 {
    background: #334155 !important;
    color: #f8fafc !important;
}

/* SweetAlert2 / Dialogs in Dark Mode */
body[data-theme="dark"] .swal2-popup {
    background: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

body[data-theme="dark"] .swal2-title,
body[data-theme="dark"] .swal2-html-container {
    color: #cbd5e1 !important;
}

/* Dropdowns & Nice Select */
body[data-theme="dark"] .nice-select .list {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

body[data-theme="dark"] .nice-select .option {
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .nice-select .option:hover,
body[data-theme="dark"] .nice-select .option.focus,
body[data-theme="dark"] .nice-select .option.selected.focus {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
}

/* =========================================================================
   Nút chuyển đổi Dark/Light mode (Desktop Topbar & Mobile Header)
   ========================================================================= */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    user-select: none;
}

/* Nút trên Desktop Topbar (trong Chế độ Sáng) */
.theme-toggle-btn-desktop {
    height: 32px;
    padding: 0 13px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(56, 189, 248, 0.45) !important;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.theme-toggle-btn-desktop:hover {
    background: rgba(56, 189, 248, 0.2) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
    transform: translateY(-1px);
}
.theme-toggle-btn-desktop .theme-icon {
    color: #38bdf8 !important;
    filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.7));
    font-size: 14px;
    transition: all 0.25s ease;
}
.theme-toggle-btn-desktop .theme-text {
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Nút trên Mobile Header (trong Chế độ Sáng) */
.theme-toggle-btn-mobile {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #2563eb !important;
    padding: 0 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.theme-toggle-btn-mobile:hover {
    background: #e2e8f0 !important;
    transform: translateY(-1px);
}
.theme-toggle-btn-mobile .theme-icon {
    color: #2563eb !important;
    font-size: 16px !important;
    transition: all 0.25s ease;
}

/* Trạng thái trong Chế độ Tối (Dark Mode) */
body[data-theme="dark"] .theme-toggle-btn-desktop {
    background: #1e293b !important;
    color: #fbbf24 !important;
    border: 1px solid #f59e0b !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25) !important;
}
body[data-theme="dark"] .theme-toggle-btn-desktop:hover {
    background: #334155 !important;
    border-color: #fbbf24 !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.45) !important;
}
body[data-theme="dark"] .theme-toggle-btn-desktop .theme-icon {
    color: #f59e0b !important;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.85));
}
body[data-theme="dark"] .theme-toggle-btn-desktop .theme-text {
    color: #fbbf24 !important;
}

body[data-theme="dark"] .theme-toggle-btn-mobile {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f59e0b !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
body[data-theme="dark"] .theme-toggle-btn-mobile:hover {
    background: #334155 !important;
}
body[data-theme="dark"] .theme-toggle-btn-mobile .theme-icon {
    color: #f59e0b !important;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.85));
}

/* Feature Card (Sản phẩm trang chủ & tìm kiếm) */
body[data-theme="dark"] .feature-card {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

body[data-theme="dark"] .feature-card:hover {
    border-color: #2563eb !important;
    background: #131d35 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

body[data-theme="dark"] .feature-name,
body[data-theme="dark"] .feature-name a {
    color: #f8fafc !important;
}

body[data-theme="dark"] .feature-name a:hover {
    color: #38bdf8 !important;
}

body[data-theme="dark"] .feature-desc {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .card-price-product-list {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px dashed #ef4444 !important;
    border-radius: 6px;
}

body[data-theme="dark"] .feature-price span {
    color: #f87171 !important;
    font-weight: 700 !important;
}

body[data-theme="dark"] .label-text.feat {
    background: #831843 !important;
    color: #fbcfe8 !important;
}

body[data-theme="dark"] .label-text.order {
    background: #064e3b !important;
    color: #a7f3d0 !important;
}

/* Sidebar Ví & Số Dư Trang Chủ */
body[data-theme="dark"] .card-wallet-home {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
}

body[data-theme="dark"] .my-wallet {
    border-bottom: 1px solid #1e293b !important;
}

body[data-theme="dark"] .my-wallet p {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .my-wallet h3 {
    color: #38bdf8 !important;
}

body[data-theme="dark"] .wallet-card {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

body[data-theme="dark"] .wallet-card p {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .wallet-card h3 {
    color: #f8fafc !important;
}

/* Wallet Form, Referral Link & Social Buttons trong Dark Mode */
body[data-theme="dark"] .wallet-form input,
body[data-theme="dark"] .wallet-form select,
body[data-theme="dark"] .wallet-form textarea,
html[data-theme="dark"] .wallet-form input,
html[data-theme="dark"] .wallet-form select,
html[data-theme="dark"] .wallet-form textarea {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

body[data-theme="dark"] .wallet-form input:focus,
body[data-theme="dark"] .wallet-form select:focus,
body[data-theme="dark"] .wallet-form textarea:focus,
html[data-theme="dark"] .wallet-form input:focus,
html[data-theme="dark"] .wallet-form select:focus,
html[data-theme="dark"] .wallet-form textarea:focus {
    background-color: #0b1120 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .wallet-form input[readonly],
html[data-theme="dark"] .wallet-form input[readonly] {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #38bdf8 !important;
    font-weight: 600 !important;
}

body[data-theme="dark"] .wallet-form button,
body[data-theme="dark"] .wallet-form .copy,
html[data-theme="dark"] .wallet-form button,
html[data-theme="dark"] .wallet-form .copy {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
    transition: all 0.25s ease !important;
}

body[data-theme="dark"] .wallet-form button:hover,
body[data-theme="dark"] .wallet-form .copy:hover,
html[data-theme="dark"] .wallet-form button:hover,
html[data-theme="dark"] .wallet-form .copy:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.55) !important;
    transform: translateY(-2px) !important;
}

body[data-theme="dark"] .footer-social li a,
html[data-theme="dark"] .footer-social li a {
    background: #1e293b !important;
    color: #38bdf8 !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.25s ease !important;
}

body[data-theme="dark"] .footer-social li a:hover,
html[data-theme="dark"] .footer-social li a:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important;
}

/* Khung Sản Phẩm Tương Tự (Product Details) */
body[data-theme="dark"] .similar-card {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="dark"] .similar-card h5 {
    color: #f8fafc !important;
}

body[data-theme="dark"] .similar-card .border-bottom {
    border-color: #1e293b !important;
}

body[data-theme="dark"] .similar-item,
html[data-theme="dark"] .similar-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body[data-theme="dark"] .similar-item:hover,
html[data-theme="dark"] .similar-item:hover {
    background: #24344d !important;
    border-color: #38bdf8 !important;
}

body[data-theme="dark"] .similar-product-name,
html[data-theme="dark"] .similar-product-name {
    color: #f8fafc !important;
}

body[data-theme="dark"] .similar-product-name:hover,
html[data-theme="dark"] .similar-product-name:hover {
    color: #38bdf8 !important;
}

body[data-theme="dark"] .similar-product-price,
html[data-theme="dark"] .similar-product-price {
    color: #38bdf8 !important;
}

body[data-theme="dark"] .similar-product-stock,
html[data-theme="dark"] .similar-product-stock {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .similar-product-stock strong,
html[data-theme="dark"] .similar-product-stock strong {
    color: #e2e8f0 !important;
}

/* Tabs & Khung Nội Dung Chi Tiết Sản Phẩm */
body[data-theme="dark"] .nav.nav-tabs {
    background: #0f172a !important;
    border-bottom: 2px solid #1e293b !important;
}

body[data-theme="dark"] .nav-tabs .tab-link {
    color: #94a3b8 !important;
    background: transparent !important;
    border-color: transparent !important;
}

body[data-theme="dark"] .nav-tabs .tab-link:hover {
    color: #38bdf8 !important;
}

body[data-theme="dark"] .nav-tabs .tab-link.active {
    color: #38bdf8 !important;
    background: #1e293b !important;
    border-bottom: 2px solid #38bdf8 !important;
}

body[data-theme="dark"] .product-details-frame {
    background: #0f172a !important;
    color: #cbd5e1 !important;
    border: 1px solid #1e293b !important;
}

body[data-theme="dark"] .product-details-frame * {
    color: inherit;
}

body[data-theme="dark"] .product-details-frame table {
    border-color: #334155 !important;
}

body[data-theme="dark"] .product-details-frame table th,
body[data-theme="dark"] .product-details-frame table td {
    border-color: #334155 !important;
    background: #1e293b !important;
    color: #cbd5e1 !important;
}

/* Khung Chi Tiết Sản Phẩm Bên Trái */
body[data-theme="dark"] .details-content {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
}

body[data-theme="dark"] .details-name a,
body[data-theme="dark"] .details-name {
    color: #f8fafc !important;
}

body[data-theme="dark"] .details-desc,
body[data-theme="dark"] .details-meta {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .details-price {
    color: #38bdf8 !important;
}

/* Khung Thông Tin Nạp Ngân Hàng */
body[data-theme="dark"] .bank-card {
    background: #0f172a !important;
    border-color: #1e293b !important;
}

body[data-theme="dark"] .bank-qr-wrap {
    background: #1e293b !important;
}

body[data-theme="dark"] .transfer-content-box {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body[data-theme="dark"] .tc-label {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .tc-value {
    color: #38bdf8 !important;
}

body[data-theme="dark"] .bank-info-row {
    border-bottom-color: #1e293b !important;
}

body[data-theme="dark"] .bank-info-row .info-label {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .bank-info-row .info-value {
    color: #f8fafc !important;
}

body[data-theme="dark"] .bank-card-footer {
    background: #0f172a !important;
    border-top-color: #1e293b !important;
}

/* Sidebar & Navbar */
body[data-theme="dark"] .category-sidebar {
    background: #0f172a !important;
    border-right: 1px solid #1e293b !important;
}

body[data-theme="dark"] .category-header {
    background: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
}

body[data-theme="dark"] .category-title {
    color: #f8fafc !important;
}

body[data-theme="dark"] .category-item {
    border-bottom: 1px solid #1e293b !important;
}

body[data-theme="dark"] .category-link {
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .category-link:hover {
    color: #38bdf8 !important;
    background: #1e293b !important;
}

body[data-theme="dark"] .navbar-info {
    background-color: #1e293b !important;
}

body[data-theme="dark"] .navbar-info span {
    color: #f8fafc !important;
}

body[data-theme="dark"] .navbar-info small {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .dropdown-position-list {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

body[data-theme="dark"] .dropdown-position-list li a {
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .dropdown-position-list li a:hover {
    background: #1e293b !important;
    color: #38bdf8 !important;
}

/* Text colors & Highlights */
body[data-theme="dark"] h1, 
body[data-theme="dark"] h2, 
body[data-theme="dark"] h3, 
body[data-theme="dark"] h4, 
body[data-theme="dark"] h5, 
body[data-theme="dark"] h6 {
    color: #f8fafc !important;
}

body[data-theme="dark"] p,
body[data-theme="dark"] span:not(.badge) {
    color: inherit;
}

body[data-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .badge-api-id {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .badge-api-id:hover {
    background: #2563eb !important;
    color: #ffffff !important;
}

/* Footer in Dark Mode */
body[data-theme="dark"] .footer-part {
    background: #090d16 !important;
    border-top: 1px solid #1e293b !important;
}

/* =========================================================================
   Trang Đăng Nhập / Đăng Ký / Quên Mật Khẩu (Auth Pages) trong Dark Mode
   ========================================================================= */
body[data-theme="dark"] .inner-section,
body[data-theme="dark"] .profile-part,
body[data-theme="dark"] .user-form-part {
    background: transparent !important;
}

body[data-theme="dark"] .user-form-card {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

body[data-theme="dark"] .user-form-title h2 {
    color: #f8fafc !important;
}

body[data-theme="dark"] .user-form-title p {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .user-form .form-control {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

body[data-theme="dark"] .user-form .form-control:focus {
    background: #1e293b !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
}

body[data-theme="dark"] .user-form .form-control::placeholder {
    color: #64748b !important;
}

body[data-theme="dark"] .form-button p a {
    color: #38bdf8 !important;
    font-weight: 500;
}

body[data-theme="dark"] .form-button p a:hover {
    color: #7dd3fc !important;
}

body[data-theme="dark"] .user-form-remind {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    color: #94a3b8 !important;
}

body[data-theme="dark"] .user-form-remind p {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .user-form-remind p a {
    color: #38bdf8 !important;
    font-weight: 600;
}

body[data-theme="dark"] .user-form-remind p a:hover {
    color: #7dd3fc !important;
}

body[data-theme="dark"] .user-form a.btn-outline-danger {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

body[data-theme="dark"] .user-form a.btn-outline-danger:hover {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .user-form hr {
    border-color: #334155 !important;
    opacity: 0.5;
}

body[data-theme="dark"] .user-form .text-muted {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .agree-terms-label {
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .terms-link {
    color: #38bdf8 !important;
}

/* Auth Tabs & Policy Modal trong Dark Mode */
body[data-theme="dark"] .auth-tabs-nav,
html[data-theme="dark"] .auth-tabs-nav {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
}
body[data-theme="dark"] .auth-tab-btn,
html[data-theme="dark"] .auth-tab-btn {
    color: #94a3b8 !important;
}
body[data-theme="dark"] .auth-tab-btn:hover:not(.active),
html[data-theme="dark"] .auth-tab-btn:hover:not(.active) {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
body[data-theme="dark"] .auth-tab-btn.active,
html[data-theme="dark"] .auth-tab-btn.active {
    background: #334155 !important;
    color: #38bdf8 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
body[data-theme="dark"] .password-toggle,
html[data-theme="dark"] .password-toggle {
    color: #94a3b8 !important;
}
body[data-theme="dark"] .password-toggle:hover,
html[data-theme="dark"] .password-toggle:hover {
    color: #f8fafc !important;
}
body[data-theme="dark"] .btn-switch-tab,
html[data-theme="dark"] .btn-switch-tab {
    color: #38bdf8 !important;
}

body[data-theme="dark"] .policy-modal .policy-modal-dialog,
html[data-theme="dark"] .policy-modal .policy-modal-dialog {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}
body[data-theme="dark"] .policy-modal .policy-modal-header,
html[data-theme="dark"] .policy-modal .policy-modal-header {
    background: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
}
body[data-theme="dark"] .policy-modal .policy-modal-header h5,
html[data-theme="dark"] .policy-modal .policy-modal-header h5 {
    color: #f8fafc !important;
}
body[data-theme="dark"] .policy-modal .policy-modal-close,
html[data-theme="dark"] .policy-modal .policy-modal-close {
    color: #94a3b8 !important;
}
body[data-theme="dark"] .policy-modal .policy-modal-close:hover,
html[data-theme="dark"] .policy-modal .policy-modal-close:hover {
    color: #ffffff !important;
}
body[data-theme="dark"] .policy-modal .policy-content-scroll,
html[data-theme="dark"] .policy-modal .policy-content-scroll,
body[data-theme="dark"] .policy-modal .policy-content-scroll *,
html[data-theme="dark"] .policy-modal .policy-content-scroll * {
    color: #cbd5e1 !important;
}
body[data-theme="dark"] .policy-modal .policy-modal-footer,
html[data-theme="dark"] .policy-modal .policy-modal-footer {
    background: #1e293b !important;
    border-top: 1px solid #334155 !important;
}
body[data-theme="dark"] .policy-modal .btn-secondary,
html[data-theme="dark"] .policy-modal .btn-secondary {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}
body[data-theme="dark"] .policy-modal .btn-secondary:hover,
html[data-theme="dark"] .policy-modal .btn-secondary:hover {
    background: #475569 !important;
    color: #ffffff !important;
}

/* =========================================================================
   Nạp Tiền Crypto (Recharge Crypto & Invoice) trong Dark Mode
   ========================================================================= */
body[data-theme="dark"] .crypto-form-card {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
}

body[data-theme="dark"] .crypto-form-inner {
    background: #0f172a !important;
    border-radius: 10px;
    color: #f8fafc !important;
}

body[data-theme="dark"] .crypto-logo-box h4 {
    color: #f8fafc !important;
}

body[data-theme="dark"] .crypto-input-label {
    color: #e2e8f0 !important;
}

/* Thẻ chọn mạng (BSC, TRON, Binance Pay) */
body[data-theme="dark"] .crypto-network-card {
    background: #1e293b !important;
    border: 2px solid #334155 !important;
}

body[data-theme="dark"] .crypto-network-card:hover {
    border-color: #38bdf8 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(56, 189, 248, 0.15) !important;
}

body[data-theme="dark"] .crypto-network-card.active {
    border-color: #38bdf8 !important;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3) 0%, rgba(56, 189, 248, 0.2) 100%) !important;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.25) !important;
}

body[data-theme="dark"] .crypto-network-card.active::after {
    background: #38bdf8 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 6px rgba(56, 189, 248, 0.5) !important;
}

body[data-theme="dark"] .crypto-network-card .net-title {
    color: #f8fafc !important;
}

body[data-theme="dark"] .crypto-network-card.net-bsc .net-badge {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

body[data-theme="dark"] .crypto-network-card.net-tron .net-badge {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

body[data-theme="dark"] .crypto-network-card.net-binance .net-badge {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

/* Ô nhập số tiền */
body[data-theme="dark"] .crypto-input-field {
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 2px solid #334155 !important;
}

body[data-theme="dark"] .crypto-input-field:focus {
    background: #1e293b !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.25) !important;
}

body[data-theme="dark"] .crypto-input-field::placeholder {
    color: #64748b !important;
}

/* Khối ước tính tiền nhận được */
body[data-theme="dark"] .crypto-received-box {
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.25) 0%, rgba(217, 119, 6, 0.2) 100%) !important;
    border: 2px solid #b45309 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="dark"] .crypto-received-label {
    color: #fbbf24 !important;
}

body[data-theme="dark"] .crypto-received-amount {
    background: #1e293b !important;
    color: #38bdf8 !important;
    border: 1px solid #334155 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Khối lưu ý thông tin */
body[data-theme="dark"] .crypto-info-box {
    background: rgba(30, 58, 138, 0.35) !important;
    border-left: 4px solid #38bdf8 !important;
}

body[data-theme="dark"] .crypto-info-text {
    color: #93c5fd !important;
}

/* Invoice màn hình thanh toán */
body[data-theme="dark"] .crypto-deadline-card {
    background: rgba(22, 101, 52, 0.25) !important;
    border: 1px solid #166534 !important;
}
body[data-theme="dark"] .crypto-deadline-title {
    color: #4ade80 !important;
}
body[data-theme="dark"] .crypto-deadline-timer {
    color: #86efac !important;
}

body[data-theme="dark"] .crypto-waiting-banner {
    background: rgba(154, 52, 18, 0.25) !important;
    border: 1px solid #9a3412 !important;
    color: #fdba74 !important;
}

body[data-theme="dark"] .crypto-amount-box,
body[data-theme="dark"] .crypto-wallet-box {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body[data-theme="dark"] .crypto-amount-val {
    color: #38bdf8 !important;
}

body[data-theme="dark"] .crypto-wallet-input {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body[data-theme="dark"] .crypto-instructions-box {
    background: rgba(30, 58, 138, 0.25) !important;
    border: 1px solid #1e3a8a !important;
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .crypto-warning-banner {
    background: rgba(154, 52, 18, 0.25) !important;
    border: 1px solid #9a3412 !important;
    color: #fdba74 !important;
}

/* =========================================================================
   Modern Footer trong Dark Mode
   ========================================================================= */
body[data-theme="dark"] .modern-footer {
    background-color: #0b1120 !important;
    border-top: 1px solid #1e293b !important;
}

body[data-theme="dark"] .modern-footer-container {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

body[data-theme="dark"] .modern-footer-container .brand-title {
    color: #f8fafc !important;
}

body[data-theme="dark"] .modern-footer-container .brand-desc {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .modern-footer-container .brand-dotcom {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

body[data-theme="dark"] .modern-footer-container .brand-badge {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
}

body[data-theme="dark"] .modern-footer-actions .action-btn.btn-outline {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border: 1px solid #334155 !important;
}

body[data-theme="dark"] .modern-footer-actions .action-btn.btn-outline:hover {
    background: #334155 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

body[data-theme="dark"] .modern-footer-bottom {
    background-color: #060911 !important;
    border-top: 1px solid #1e293b !important;
}

/* =========================================================================
   API Documentation & Input Group Addons trong Dark Mode
   ========================================================================= */
body[data-theme="dark"] .input-group-text {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    font-weight: 700 !important;
}

body[data-theme="dark"] .badge-method-get,
body[data-theme="dark"] .input-group-text.badge-method-get {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #34d399 !important;
}

body[data-theme="dark"] .badge-method-post,
body[data-theme="dark"] .input-group-text.badge-method-post {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    color: #fbbf24 !important;
}

.badge-method-get {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #059669 !important;
    font-weight: 700 !important;
}

.badge-method-post {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #d97706 !important;
    font-weight: 700 !important;
}

/* =========================================================================
   Sidebar Profile Navigation Tabs trong Dark Mode (Profile / Settings)
   ========================================================================= */
body[data-theme="dark"] .sidebar_profile {
    background-color: #0f172a !important;
    border: 1px solid #1e293b !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    color: #cbd5e1 !important;
    transition: all 0.25s ease !important;
}

body[data-theme="dark"] .sidebar_profile h6,
body[data-theme="dark"] .sidebar_profile span {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

body[data-theme="dark"] .sidebar_profile i {
    color: #38bdf8 !important;
    margin-right: 10px !important;
    transition: color 0.2s ease !important;
}

/* Hover state */
body[data-theme="dark"] .sidebar_profile:hover {
    background-color: #1e293b !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
    transform: translateY(-1px);
}

body[data-theme="dark"] .sidebar_profile:hover h6,
body[data-theme="dark"] .sidebar_profile:hover span {
    color: #ffffff !important;
}

body[data-theme="dark"] .sidebar_profile:hover i {
    color: #60a5fa !important;
}

/* Active state (hỗ trợ cả class active và mobile-menu-active) */
body[data-theme="dark"] .sidebar_profile.active,
body[data-theme="dark"] .sidebar_profile.mobile-menu-active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3) 0%, #1e293b 100%) !important;
    border: 1px solid #2563eb !important;
    border-left: 4px solid #38bdf8 !important;
    box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2) !important;
}

body[data-theme="dark"] .sidebar_profile.active h6,
body[data-theme="dark"] .sidebar_profile.active span,
body[data-theme="dark"] .sidebar_profile.mobile-menu-active h6,
body[data-theme="dark"] .sidebar_profile.mobile-menu-active span {
    color: #ffffff !important;
    font-weight: 700 !important;
}

body[data-theme="dark"] .sidebar_profile.active i,
body[data-theme="dark"] .sidebar_profile.mobile-menu-active i {
    color: #38bdf8 !important;
}

/* Form readonly & disabled trong Profile Dark Mode */
body[data-theme="dark"] .form-control:disabled,
body[data-theme="dark"] .form-control[readonly] {
    background-color: #0b1329 !important;
    border-color: #1e293b !important;
    color: #94a3b8 !important;
}

/* VAT Alert warning / info trong Dark Mode */
body[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #fbbf24 !important;
}
body[data-theme="dark"] .alert-warning h5,
body[data-theme="dark"] .alert-warning p,
body[data-theme="dark"] .alert-warning strong,
body[data-theme="dark"] .alert-warning i {
    color: #fbbf24 !important;
}

body[data-theme="dark"] code.bg-white {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #38bdf8 !important;
}

/* =========================================================================
   CHAT SYSTEM & LIVE SUPPORT CONSOLE (DARK MODE)
   ========================================================================= */
body[data-theme="dark"] .chat-dashboard-card,
html[data-theme="dark"] .chat-dashboard-card {
    background: #1e293b !important;
    box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px #334155 !important;
}

body[data-theme="dark"] .chat-main-panel,
html[data-theme="dark"] .chat-main-panel {
    background: #0f172a !important;
}

body[data-theme="dark"] .chat-main-header,
html[data-theme="dark"] .chat-main-header {
    background: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
}

body[data-theme="dark"] .main-header-title h3,
html[data-theme="dark"] .main-header-title h3 {
    color: #f8fafc !important;
}

body[data-theme="dark"] .main-header-title p,
html[data-theme="dark"] .main-header-title p {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .chat-main-messages,
html[data-theme="dark"] .chat-main-messages {
    background: #0b1120 !important;
}

body[data-theme="dark"] .chat-main-messages::-webkit-scrollbar-thumb,
html[data-theme="dark"] .chat-main-messages::-webkit-scrollbar-thumb {
    background: #334155 !important;
}

body[data-theme="dark"] .message.admin,
html[data-theme="dark"] .message.admin {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

body[data-theme="dark"] .message.admin,
body[data-theme="dark"] .message.admin *,
html[data-theme="dark"] .message.admin,
html[data-theme="dark"] .message.admin * {
    color: #f8fafc !important;
}

body[data-theme="dark"] .message.admin .message-time,
html[data-theme="dark"] .message.admin .message-time {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .chat-main-input-area,
html[data-theme="dark"] .chat-main-input-area {
    background: #1e293b !important;
    border-top: 1px solid #334155 !important;
}

body[data-theme="dark"] .btn-upload-image,
html[data-theme="dark"] .btn-upload-image {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #94a3b8 !important;
}

body[data-theme="dark"] .btn-upload-image:hover,
html[data-theme="dark"] .btn-upload-image:hover {
    background: #334155 !important;
    color: #f8fafc !important;
}

body[data-theme="dark"] .chat-main-input-area input,
html[data-theme="dark"] .chat-main-input-area input {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

body[data-theme="dark"] .chat-main-input-area input::placeholder,
html[data-theme="dark"] .chat-main-input-area input::placeholder {
    color: #64748b !important;
}

body[data-theme="dark"] .chat-main-input-area input:focus,
html[data-theme="dark"] .chat-main-input-area input:focus {
    background: #0b1120 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
}

body[data-theme="dark"] #userImagePreview,
html[data-theme="dark"] #userImagePreview {
    background: #1e293b !important;
    border-top: 1px solid #334155 !important;
}

body[data-theme="dark"] .full-login-prompt,
html[data-theme="dark"] .full-login-prompt {
    background: #0f172a !important;
}

body[data-theme="dark"] .full-login-prompt .icon-box,
html[data-theme="dark"] .full-login-prompt .icon-box {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body[data-theme="dark"] .full-login-prompt h3,
html[data-theme="dark"] .full-login-prompt h3 {
    color: #f8fafc !important;
}

body[data-theme="dark"] .full-login-prompt p,
html[data-theme="dark"] .full-login-prompt p {
    color: #94a3b8 !important;
}

/* Floating Chat Widget in Dark Mode */
body[data-theme="dark"] .chat-container.widget-mode,
html[data-theme="dark"] .chat-container.widget-mode {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6), 0 0 0 1px #334155 !important;
}

body[data-theme="dark"] .chat-container.widget-mode .chat-messages,
html[data-theme="dark"] .chat-container.widget-mode .chat-messages {
    background: #0b1120 !important;
}

body[data-theme="dark"] .chat-container.widget-mode .chat-messages::-webkit-scrollbar-thumb,
html[data-theme="dark"] .chat-container.widget-mode .chat-messages::-webkit-scrollbar-thumb {
    background: #334155 !important;
}

body[data-theme="dark"] .chat-container.widget-mode .message.admin,
html[data-theme="dark"] .chat-container.widget-mode .message.admin {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

body[data-theme="dark"] .chat-container.widget-mode .message.admin,
body[data-theme="dark"] .chat-container.widget-mode .message.admin *,
html[data-theme="dark"] .chat-container.widget-mode .message.admin,
html[data-theme="dark"] .chat-container.widget-mode .message.admin * {
    color: #f8fafc !important;
}

body[data-theme="dark"] .chat-container.widget-mode .message.admin .message-time,
html[data-theme="dark"] .chat-container.widget-mode .message.admin .message-time {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .chat-container.widget-mode .chat-input-area,
html[data-theme="dark"] .chat-container.widget-mode .chat-input-area {
    background: #1e293b !important;
    border-top: 1px solid #334155 !important;
}

body[data-theme="dark"] .chat-container.widget-mode .btn-upload-image,
html[data-theme="dark"] .chat-container.widget-mode .btn-upload-image {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #94a3b8 !important;
}

body[data-theme="dark"] .chat-container.widget-mode .btn-upload-image:hover,
html[data-theme="dark"] .chat-container.widget-mode .btn-upload-image:hover {
    background: #334155 !important;
    color: #f8fafc !important;
}

body[data-theme="dark"] .chat-container.widget-mode .chat-input-area input,
html[data-theme="dark"] .chat-container.widget-mode .chat-input-area input {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

body[data-theme="dark"] .chat-container.widget-mode .chat-input-area input::placeholder,
html[data-theme="dark"] .chat-container.widget-mode .chat-input-area input::placeholder {
    color: #64748b !important;
}

body[data-theme="dark"] .chat-container.widget-mode .chat-input-area input:focus,
html[data-theme="dark"] .chat-container.widget-mode .chat-input-area input:focus {
    background: #0b1120 !important;
    border-color: #3b82f6 !important;
}

body[data-theme="dark"] .chat-container.widget-mode #userImagePreview,
html[data-theme="dark"] .chat-container.widget-mode #userImagePreview {
    background: #1e293b !important;
    border-top: 1px solid #334155 !important;
}

body[data-theme="dark"] .chat-container.widget-mode .widget-login-prompt,
html[data-theme="dark"] .chat-container.widget-mode .widget-login-prompt {
    background: #0f172a !important;
}

body[data-theme="dark"] .chat-container.widget-mode .widget-login-prompt .prompt-icon-wrapper,
html[data-theme="dark"] .chat-container.widget-mode .widget-login-prompt .prompt-icon-wrapper {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body[data-theme="dark"] .chat-container.widget-mode .widget-login-prompt h4,
html[data-theme="dark"] .chat-container.widget-mode .widget-login-prompt h4 {
    color: #f8fafc !important;
}

body[data-theme="dark"] .chat-container.widget-mode .widget-login-prompt p,
html[data-theme="dark"] .chat-container.widget-mode .widget-login-prompt p {
    color: #94a3b8 !important;
}

/* =========================================================================
   PRODUCT VIEW MODAL & PREVIEW UID MODAL (DARK MODE)
   ========================================================================= */
body[data-theme="dark"] #openModal .modal-content,
html[data-theme="dark"] #openModal .modal-content,
body[data-theme="dark"] .product-view,
html[data-theme="dark"] .product-view {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    color: #f8fafc !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px #334155 !important;
}

body[data-theme="dark"] .modal-close,
html[data-theme="dark"] .modal-close {
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

body[data-theme="dark"] .modal-close:hover,
html[data-theme="dark"] .modal-close:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

body[data-theme="dark"] .modal-close-mobile,
html[data-theme="dark"] .modal-close-mobile {
    background: #ef4444 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.45) !important;
}
body[data-theme="dark"] .modal-close-mobile:hover,
html[data-theme="dark"] .modal-close-mobile:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .view-name a,
html[data-theme="dark"] .view-name a {
    color: #f8fafc !important;
}

body[data-theme="dark"] .view-name a:hover,
html[data-theme="dark"] .view-name a:hover {
    color: #38bdf8 !important;
}

body[data-theme="dark"] .view-meta p,
html[data-theme="dark"] .view-meta p {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .view-price,
html[data-theme="dark"] .view-price {
    color: #38bdf8 !important;
}

body[data-theme="dark"] .view-price span,
html[data-theme="dark"] .view-price span {
    color: #38bdf8 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
}

body[data-theme="dark"] .view-price del,
html[data-theme="dark"] .view-price del {
    color: #64748b !important;
}

body[data-theme="dark"] .view-desc,
html[data-theme="dark"] .view-desc {
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .view-list-title,
html[data-theme="dark"] .view-list-title {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .view-share-list li a,
html[data-theme="dark"] .view-share-list li a {
    background: #1e293b !important;
    color: #38bdf8 !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
}

body[data-theme="dark"] .view-share-list li a:hover,
html[data-theme="dark"] .view-share-list li a:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

body[data-theme="dark"] .product-view .table,
html[data-theme="dark"] .product-view .table {
    color: #f8fafc !important;
    background: transparent !important;
}

body[data-theme="dark"] .product-view .table td,
html[data-theme="dark"] .product-view .table td {
    background: transparent !important;
    color: #cbd5e1 !important;
    border-color: #1e293b !important;
    padding: 10px 12px !important;
}

body[data-theme="dark"] .product-view .table td strong,
html[data-theme="dark"] .product-view .table td strong {
    color: #f8fafc !important;
}

body[data-theme="dark"] .product-view .table tr:first-child td strong,
html[data-theme="dark"] .product-view .table tr:first-child td strong {
    color: #38bdf8 !important;
    letter-spacing: 0.5px !important;
    font-size: 15px !important;
}

body[data-theme="dark"] .text-wallet,
html[data-theme="dark"] .text-wallet {
    color: #ef4444 !important;
    font-weight: 700 !important;
}

body[data-theme="dark"] .product-action,
html[data-theme="dark"] .product-action {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

body[data-theme="dark"] .action-minus1,
body[data-theme="dark"] .action-plus1,
html[data-theme="dark"] .action-minus1,
html[data-theme="dark"] .action-plus1 {
    background: #1e293b !important;
    color: #f8fafc !important;
    border: none !important;
}

body[data-theme="dark"] .action-minus1:hover,
body[data-theme="dark"] .action-plus1:hover,
html[data-theme="dark"] .action-minus1:hover,
html[data-theme="dark"] .action-plus1:hover {
    background: #334155 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .action-input,
html[data-theme="dark"] .action-input {
    background: #0f172a !important;
    color: #f8fafc !important;
    border: none !important;
    border-left: 1px solid #334155 !important;
    border-right: 1px solid #334155 !important;
    font-weight: 700 !important;
}

body[data-theme="dark"] .form-control-view-product,
html[data-theme="dark"] .form-control-view-product {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
    border-radius: 8px !important;
}

body[data-theme="dark"] .form-control-view-product::placeholder,
html[data-theme="dark"] .form-control-view-product::placeholder {
    color: #64748b !important;
}

body[data-theme="dark"] .form-control-view-product:focus,
html[data-theme="dark"] .form-control-view-product:focus {
    background: #0b1120 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

body[data-theme="dark"] #into_money,
html[data-theme="dark"] #into_money {
    color: #f8fafc !important;
    font-size: 15px !important;
}

body[data-theme="dark"] #into_pay,
html[data-theme="dark"] #into_pay {
    color: #38bdf8 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

body[data-theme="dark"] .btn-buy,
html[data-theme="dark"] .btn-buy {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4) !important;
}

body[data-theme="dark"] .btn-buy:hover,
html[data-theme="dark"] .btn-buy:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.55) !important;
    transform: translateY(-1px) !important;
}

body[data-theme="dark"] .label_favorite,
html[data-theme="dark"] .label_favorite {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

body[data-theme="dark"] .label_favorite svg,
html[data-theme="dark"] .label_favorite svg {
    stroke: #f8fafc !important;
}

body[data-theme="dark"] .label_favorite .action span,
html[data-theme="dark"] .label_favorite .action span {
    color: #f8fafc !important;
}

/* Modal Chọn UID Xem Trước (Preview UID) trong Dark Mode */
body[data-theme="dark"] .pv-container,
html[data-theme="dark"] .pv-container {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-radius: 16px !important;
    border: 1px solid #1e293b !important;
}

body[data-theme="dark"] .pv-close,
html[data-theme="dark"] .pv-close {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body[data-theme="dark"] .pv-close:hover,
html[data-theme="dark"] .pv-close:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

body[data-theme="dark"] .pv-header,
html[data-theme="dark"] .pv-header {
    border-bottom: 2px solid #1e293b !important;
}

body[data-theme="dark"] .pv-title,
html[data-theme="dark"] .pv-title {
    color: #f8fafc !important;
}

body[data-theme="dark"] .pv-toolbar,
html[data-theme="dark"] .pv-toolbar {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

body[data-theme="dark"] .pv-uid-list,
html[data-theme="dark"] .pv-uid-list {
    background: #0f172a !important;
    border-color: #1e293b !important;
}

body[data-theme="dark"] .pv-uid-list table th,
html[data-theme="dark"] .pv-uid-list table th {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body[data-theme="dark"] .pv-uid-list table td,
html[data-theme="dark"] .pv-uid-list table td {
    color: #cbd5e1 !important;
    border-color: #1e293b !important;
}

body[data-theme="dark"] .uid-row:hover,
html[data-theme="dark"] .uid-row:hover {
    background: #1e293b !important;
}

body[data-theme="dark"] .pv-payment,
html[data-theme="dark"] .pv-payment {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body[data-theme="dark"] .pv-payment-title,
html[data-theme="dark"] .pv-payment-title {
    color: #f8fafc !important;
    border-bottom-color: #334155 !important;
}

body[data-theme="dark"] .pv-coupon-input,
html[data-theme="dark"] .pv-coupon-input {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

body[data-theme="dark"] .pv-coupon-input:focus,
html[data-theme="dark"] .pv-coupon-input:focus {
    border-color: #38bdf8 !important;
}

body[data-theme="dark"] .pv-divider,
body[data-theme="dark"] .pv-divider-bold,
html[data-theme="dark"] .pv-divider,
html[data-theme="dark"] .pv-divider-bold {
    border-color: #334155 !important;
}

body[data-theme="dark"] #purchasedAccounts,
html[data-theme="dark"] #purchasedAccounts {
    background: #0b1120 !important;
    border-color: #334155 !important;
    color: #38bdf8 !important;
}

/* OAuth Error & Guide Box Dark Mode */
body[data-theme="dark"] .oauth-guide-box,
html[data-theme="dark"] .oauth-guide-box {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .oauth-guide-box h6,
html[data-theme="dark"] .oauth-guide-box h6 {
    color: #fbbf24 !important;
}

body[data-theme="dark"] .oauth-guide-box ul,
body[data-theme="dark"] .oauth-guide-box li,
html[data-theme="dark"] .oauth-guide-box ul,
html[data-theme="dark"] .oauth-guide-box li {
    color: #e2e8f0 !important;
}

body[data-theme="dark"] .oauth-guide-box code,
html[data-theme="dark"] .oauth-guide-box code {
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: #f472b6 !important;
}