/* Shared application shell */
.trumbox-app-content {
    width: min(1500px, calc(100% - 48px));
    min-height: calc(100vh - 92px);
    margin: 0 auto;
    padding: 36px 0 80px;
}

.trumbox-page {
    width: 100%;
    color: var(--trumbox-text);
}

.trumbox-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.trumbox-page-header h1,
.trumbox-page-header h2,
.trumbox-page-title {
    margin: 0;
    color: #fff;
    font-weight: 900;
    letter-spacing: -1.4px;
}

.trumbox-page-header p {
    margin: 7px 0 0;
    color: var(--trumbox-muted);
    font-size: 12px;
}

.trumbox-panel,
.trumbox-app-content .table-container,
.trumbox-app-content .form-control:not(input):not(select):not(textarea) {
    border: 1px solid var(--trumbox-line);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 210, 26, 0.045), rgba(255, 255, 255, 0.025));
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22);
}

.trumbox-panel { padding: clamp(18px, 2.5vw, 32px); }

.trumbox-app-content h1,
.trumbox-app-content h2,
.trumbox-app-content h3,
.trumbox-app-content h4,
.trumbox-app-content h5,
.trumbox-app-content h6 { color: #fff; }

.trumbox-app-content hr {
    margin: 20px 0;
    border-color: rgba(255, 210, 26, 0.16);
    opacity: 1;
}

.trumbox-app-content a { color: var(--trumbox-gold); }
.trumbox-app-content .text-muted { color: var(--trumbox-muted) !important; }

/* Header navigation */
.trumbox-mobile-toggle {
    position: absolute;
    right: 18px;
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid rgba(255, 210, 26, 0.28);
    border-radius: 10px;
    background: rgba(255, 210, 26, 0.07);
}

.trumbox-mobile-toggle span {
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--trumbox-gold);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.trumbox-mobile-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.trumbox-mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.trumbox-mobile-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.trumbox-mobile-menu {
    position: absolute;
    z-index: 1100;
    top: calc(100% + 10px);
    right: 18px;
    display: none;
    width: min(310px, calc(100vw - 28px));
    padding: 10px;
    border: 1px solid rgba(255, 210, 26, 0.3);
    border-radius: 16px;
    background: rgba(10, 11, 8, 0.97);
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
}

.trumbox-mobile-menu.is-open { display: grid; }

.trumbox-mobile-menu a {
    padding: 12px 14px;
    border-radius: 9px;
    color: #d6d7cd;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
}

.trumbox-mobile-menu a:hover { background: rgba(255, 210, 26, 0.09); color: var(--trumbox-gold); }

.trumbox-theme .trumbox-user-actions .btn {
    min-height: 38px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
}

.trumbox-theme .trumbox-user-greeting { color: #aeb0a5; font-size: 11px; }
.trumbox-theme .trumbox-user-greeting strong { color: var(--trumbox-gold); }

/* Bootstrap forms */
.trumbox-app-content .form-label,
.trumbox-app-content label {
    color: #d5d6cc;
    font-size: 11px;
    font-weight: 700;
}

.trumbox-app-content input.form-control,
.trumbox-app-content select.form-control,
.trumbox-app-content textarea.form-control,
.trumbox-app-content .form-select,
.trumbox-app-content input[type="text"]:not([class*="bg-"]),
.trumbox-app-content input[type="number"]:not([class*="bg-"]),
.trumbox-app-content input[type="tel"]:not([class*="bg-"]),
.trumbox-app-content input[type="password"]:not([class*="bg-"]) {
    min-height: 44px;
    border-color: rgba(255, 255, 255, 0.11) !important;
    border-radius: 10px;
    background-color: #0b0d09 !important;
    color: #f5f5eb !important;
    box-shadow: none !important;
}

.trumbox-app-content textarea.form-control { min-height: 100px; }

.trumbox-app-content .form-control:focus,
.trumbox-app-content .form-select:focus {
    border-color: rgba(255, 210, 26, 0.75) !important;
    box-shadow: 0 0 0 4px rgba(255, 210, 26, 0.07) !important;
}

.trumbox-app-content .form-control:disabled,
.trumbox-app-content .form-control[readonly],
.trumbox-app-content .form-select:disabled {
    background-color: #151710 !important;
    color: #b4b7ac !important;
    opacity: 1;
}

.trumbox-app-content input::placeholder,
.trumbox-app-content textarea::placeholder { color: #aeb1a6 !important; opacity: 1; }

.trumbox-app-content .form-check-input {
    border-color: rgba(255, 210, 26, 0.35);
    background-color: #16180f;
}

.trumbox-app-content .form-check-input:checked {
    border-color: var(--trumbox-gold-deep);
    background-color: var(--trumbox-gold-deep);
}

/* Buttons */
.trumbox-app-content .btn,
.trumbox-theme .modal .btn {
    min-height: 40px;
    padding: 8px 15px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
    box-shadow: none;
}

.trumbox-app-content .btn-primary,
.trumbox-app-content .btn-success,
.trumbox-theme .modal .btn-primary,
.trumbox-theme .modal .btn-success {
    border-color: var(--trumbox-gold) !important;
    background: linear-gradient(180deg, #fff36c, var(--trumbox-gold-deep)) !important;
    color: #181200 !important;
}

.trumbox-app-content .btn-outline-primary {
    border-color: rgba(255, 210, 26, 0.42) !important;
    color: var(--trumbox-gold) !important;
}

.trumbox-app-content .btn-outline-primary:hover,
.trumbox-app-content .btn-outline-primary.active {
    background: rgba(255, 210, 26, 0.12) !important;
}

.trumbox-app-content .btn-secondary,
.trumbox-theme .modal .btn-secondary {
    border-color: rgba(255, 255, 255, 0.13) !important;
    background: #1b1d17 !important;
    color: #d9d9d0 !important;
}

.trumbox-app-content .btn-danger,
.trumbox-theme .modal .btn-danger {
    border-color: #d92e26 !important;
    background: linear-gradient(180deg, #f34a3f, #aa1712) !important;
    color: #fff !important;
}

.trumbox-app-content .btn-info {
    border-color: rgba(255, 210, 26, 0.32) !important;
    background: rgba(255, 210, 26, 0.09) !important;
    color: var(--trumbox-gold) !important;
}

/* Tables */
.trumbox-table-scroll,
.trumbox-app-content .table-container,
.trumbox-app-content .overflow-x-auto,
.trumbox-app-content .device-table-scroll {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: rgba(255, 210, 26, 0.35) #11130e;
}

.trumbox-app-content .table-container { padding: 0; }

.trumbox-app-content table {
    width: 100%;
    margin: 0 !important;
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #e2e3da;
    --bs-table-striped-bg: rgba(255, 210, 26, 0.025);
    --bs-table-active-color: #fffdf2;
    --bs-table-active-bg: rgba(255, 210, 26, 0.09);
    --bs-table-hover-color: #fffdf2;
    --bs-table-hover-bg: rgba(255, 210, 26, 0.07);
    border-color: rgba(255, 210, 26, 0.14) !important;
    color: #d6d7ce !important;
    font-size: 11px;
}

.trumbox-app-content table thead,
.trumbox-app-content table thead th {
    border-color: rgba(255, 210, 26, 0.18) !important;
    background: #14170f !important;
    color: var(--trumbox-gold) !important;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    vertical-align: middle;
}

.trumbox-app-content table td,
.trumbox-app-content table th {
    padding: 12px 13px !important;
    border-color: rgba(255, 210, 26, 0.11) !important;
    background-color: transparent !important;
    color: inherit;
    vertical-align: middle;
}

.trumbox-app-content .table > tbody > * > *,
.trumbox-app-content .table-striped > tbody > tr:nth-of-type(odd) > *,
.trumbox-app-content .table-striped > tbody > tr:nth-of-type(even) > * {
    color: #e2e3da !important;
}

.trumbox-app-content table tbody tr { background: rgba(255, 255, 255, 0.012); }
.trumbox-app-content table tbody tr:nth-child(even) { background: rgba(255, 210, 26, 0.025); }
.trumbox-app-content table tbody tr:hover { background: rgba(255, 210, 26, 0.07) !important; }
.trumbox-app-content table .btn { white-space: nowrap; }

/* Bootstrap modals and toast */
.trumbox-theme .modal { backdrop-filter: blur(7px); }
.trumbox-theme .modal-content {
    overflow: hidden;
    border: 1px solid rgba(255, 210, 26, 0.28);
    border-radius: 16px;
    background: #0d0f0b;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7);
    color: #d8d9d0;
}

.trumbox-theme .modal-header,
.trumbox-theme .modal-header.bg-primary,
.trumbox-theme .modal-header.bg-danger {
    border-bottom: 1px solid rgba(255, 210, 26, 0.16) !important;
    background: linear-gradient(120deg, rgba(255, 210, 26, 0.12), rgba(255, 255, 255, 0.02)) !important;
    color: #fff !important;
}

.trumbox-theme .modal-title { color: #fff; font-size: 15px; font-weight: 900; }
.trumbox-theme .modal-footer { border-top-color: rgba(255, 210, 26, 0.13); }
.trumbox-theme .btn-close { filter: invert(1) grayscale(1); opacity: 0.75; }
.trumbox-theme .toast { border: 1px solid rgba(255, 210, 26, 0.25); background: #11130e; color: #fff; }

/* Tailwind-based legacy screens */
.trumbox-page .bg-white,
.trumbox-page div[class*="bg-[#f9fafb]"],
.trumbox-page section[class*="bg-white"] {
    border-color: rgba(255, 210, 26, 0.15) !important;
    background-color: #10120d !important;
    color: #d9dad1 !important;
}

.trumbox-page .bg-gray-50,
.trumbox-page .bg-gray-100 { background-color: #151810 !important; }

.trumbox-page .text-gray-900,
.trumbox-page .text-gray-800,
.trumbox-page .text-gray-700,
.trumbox-page .text-black { color: #f5f5ec !important; }

.trumbox-page .text-gray-600,
.trumbox-page .text-gray-500,
.trumbox-page .text-gray-400 { color: var(--trumbox-muted) !important; }

.trumbox-page .text-blue-600,
.trumbox-page .text-blue-500,
.trumbox-page .text-orange-500,
.trumbox-page .text-orange-600 { color: var(--trumbox-gold) !important; }

.trumbox-page .border-gray-200,
.trumbox-page .border-gray-300,
.trumbox-page .border { border-color: rgba(255, 210, 26, 0.17) !important; }

.trumbox-page .bg-gradient-to-r.from-blue-500,
.trumbox-page .bg-gradient-to-r.from-blue-600 {
    background: linear-gradient(120deg, #342800, #171a10 62%, #4f2600) !important;
}

.trumbox-page .bg-blue-600,
.trumbox-page .bg-blue-500,
.trumbox-page .bg-orange-500 {
    background-color: var(--trumbox-gold-deep) !important;
    color: #181200 !important;
}

/* Admin and operational pages */
.trumbox-admin-page > h4,
.trumbox-config-page > h4 {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 900;
    text-align: left !important;
}

.trumbox-admin-page > .mb-2,
.trumbox-config-page > .text-center {
    gap: 12px;
    padding: 15px;
    border: 1px solid rgba(255, 210, 26, 0.13);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

.trumbox-warranty-page.container { max-width: 1500px !important; padding: 0 !important; }
.trumbox-warranty-page > .bg-white { overflow: visible !important; border: 1px solid var(--trumbox-line); border-radius: 18px; background: #0d0f0b !important; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.24); }
.trumbox-warranty-page > .bg-white > .bg-gradient-to-r { border-radius: 18px 18px 0 0; }
.trumbox-warranty-page .device-table-scroll thead th { top: 0; background: #14170f !important; }
.trumbox-warranty-page .device-table-scroll input,
.trumbox-warranty-page .device-table-scroll select { min-width: 120px; border-color: rgba(255, 210, 26, 0.18); background: #0b0d09; color: #fff; }

.trumbox-config-page .table-container,
.trumbox-admin-page .table-container { margin-top: 18px !important; }

.trumbox-data-page > .d-flex:first-child {
    padding: 20px;
    border: 1px solid var(--trumbox-line);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(255, 210, 26, 0.08), rgba(255, 255, 255, 0.02));
}

.trumbox-data-page > .d-flex:first-child h1 { font-size: clamp(25px, 3vw, 38px); font-weight: 900; }
.trumbox-data-page #pageBusyOverlay { background: rgba(3, 4, 2, 0.78) !important; backdrop-filter: blur(6px); }
.trumbox-data-page .pagination .page-link { border-color: rgba(255, 210, 26, 0.17); background: #11130e; color: var(--trumbox-gold); }
.trumbox-data-page .pagination .active .page-link { border-color: var(--trumbox-gold); background: var(--trumbox-gold); color: #181200; }

/* Product detail */
.trumbox-product-detail-page > a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(255, 210, 26, 0.24);
    border-radius: 10px;
    color: var(--trumbox-gold);
    font-size: 11px;
    font-weight: 800;
}

.trumbox-product-detail-page > .max-w-\[1200px\] {
    margin-top: 18px;
    padding: clamp(20px, 3vw, 38px) !important;
    border: 1px solid var(--trumbox-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 210, 26, 0.04), rgba(255, 255, 255, 0.018));
}

.trumbox-product-detail-page #productImageCarousel > div:first-child {
    border: 1px solid rgba(255, 210, 26, 0.14);
    border-radius: 18px;
    background: radial-gradient(circle, rgba(255, 210, 26, 0.1), transparent 58%), #090a07;
}

.trumbox-product-detail-page #mainProductImage { object-fit: contain !important; }
.trumbox-product-detail-page .thumbnail { border-color: rgba(255, 210, 26, 0.22) !important; background: #0b0d09; }
.trumbox-product-detail-page .option-btn,
.trumbox-product-detail-page .box-type-btn { border-color: rgba(255, 210, 26, 0.2) !important; background: #10120d; color: #d5d6cc !important; }
.trumbox-product-detail-page .option-btn:hover,
.trumbox-product-detail-page .box-type-btn:hover,
.trumbox-product-detail-page .option-btn.active,
.trumbox-product-detail-page .box-type-btn.active { border-color: var(--trumbox-gold) !important; background: rgba(255, 210, 26, 0.09); color: var(--trumbox-gold) !important; }
.trumbox-product-detail-page #totalPrice { color: var(--trumbox-gold) !important; }
.trumbox-product-detail-page div[class*="from-orange-300"] { border: 1px solid rgba(255, 210, 26, 0.28); background: linear-gradient(120deg, rgba(255, 210, 26, 0.16), rgba(255, 210, 26, 0.04)) !important; }
.trumbox-product-detail-page textarea,
.trumbox-product-detail-page input { border-color: rgba(255, 210, 26, 0.17) !important; background: #0a0c08 !important; color: #fff !important; }
.trumbox-product-detail-page #imageModal { z-index: 1200; backdrop-filter: blur(10px); }

/* Account utility and status screens */
.trumbox-account-card,
.trumbox-status-card,
.trumbox-home-card {
    width: min(580px, 100%);
    margin: 7vh auto 0;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid var(--trumbox-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 210, 26, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.trumbox-account-card { margin-top: 3vh; }
.trumbox-account-card form { max-width: none !important; }
.trumbox-status-card { text-align: center; }
.trumbox-status-icon { display: grid; width: 66px; height: 66px; margin: 0 auto 20px; place-items: center; border: 1px solid rgba(255, 210, 26, 0.28); border-radius: 18px; background: rgba(255, 210, 26, 0.08); color: var(--trumbox-gold); font-size: 28px; }

.trumbox-home-dashboard { display: grid; gap: 24px; }
.trumbox-home-hero { padding: clamp(26px, 5vw, 58px); border: 1px solid var(--trumbox-line); border-radius: 22px; background: radial-gradient(circle at 85% 20%, rgba(255, 210, 26, 0.16), transparent 18rem), linear-gradient(135deg, #10130c, #070806); }
.trumbox-home-hero h1 { max-width: 780px; margin: 0; font-size: clamp(34px, 5vw, 64px); font-weight: 900; letter-spacing: -3px; }
.trumbox-home-hero h1 span { color: var(--trumbox-gold); }
.trumbox-home-hero p { max-width: 680px; margin: 16px 0 0; color: var(--trumbox-muted); line-height: 1.7; }
.trumbox-home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.trumbox-home-action { display: flex; min-height: 180px; flex-direction: column; align-items: flex-start; padding: 24px; border: 1px solid rgba(255, 210, 26, 0.17); border-radius: 17px; background: rgba(255, 255, 255, 0.022); color: #fff !important; text-align: left; text-decoration: none; transition: 0.2s ease; }
.trumbox-home-action:hover { border-color: rgba(255, 210, 26, 0.55); background: rgba(255, 210, 26, 0.06); transform: translateY(-4px); }
.trumbox-home-action > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: var(--trumbox-gold); color: #181200; font-weight: 900; }
.trumbox-home-action strong { margin-top: 20px; font-size: 17px; }
.trumbox-home-action small { margin-top: 7px; color: var(--trumbox-muted); line-height: 1.6; }

/* Product software/download tabs */
body.trumbox-theme #phanMem,
body.trumbox-theme #downloadSW { width: min(1420px, calc(100% - 8vw)); margin: 30px auto 80px; color: #d9dad1; }
body.trumbox-theme #phanMem section,
body.trumbox-theme #downloadSW { border-color: rgba(255, 210, 26, 0.15) !important; background-color: #0c0e0a !important; }
body.trumbox-theme #phanMem h1,
body.trumbox-theme #phanMem h2,
body.trumbox-theme #phanMem h3,
body.trumbox-theme #downloadSW h2,
body.trumbox-theme #downloadSW h3 { color: #fff !important; }
body.trumbox-theme #phanMem .text-blue-600,
body.trumbox-theme #phanMem .text-blue-500,
body.trumbox-theme #downloadSW .text-blue-600 { color: var(--trumbox-gold) !important; }
body.trumbox-theme #phanMem .bg-blue-600,
body.trumbox-theme #phanMem .bg-blue-500,
body.trumbox-theme #downloadSW .bg-blue-600 { background-color: var(--trumbox-gold-deep) !important; color: #181200 !important; }
body.trumbox-theme #phanMem section.bg-blue-600 :is(h1, h2, h3, p),
body.trumbox-theme #phanMem section.bg-blue-500 :is(h1, h2, h3, p) { color: #181200 !important; }
body.trumbox-theme #downloadSW > div { border: 1px solid rgba(255, 210, 26, 0.16); background: #11130e !important; }

/* Make Money standalone page */
body.trumbox-money-page {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 5%, rgba(255, 210, 26, 0.09), transparent 28rem), #050604 !important;
    color: #d8d9cf !important;
    font-family: "Be Vietnam Pro", sans-serif !important;
}

.trumbox-money-page > header {
    position: sticky;
    z-index: 70;
    top: 0;
    min-height: 70px;
    border-color: rgba(255, 210, 26, 0.18) !important;
    background: rgba(6, 7, 5, 0.92);
    backdrop-filter: blur(18px);
}

.trumbox-money-page > header .text-\[\#0f4eff\] { color: var(--trumbox-gold) !important; }
.trumbox-money-page #moneySidebar { border-color: rgba(255, 210, 26, 0.15) !important; background: #090b07 !important; }
.trumbox-money-page #moneySidebar button { width: 100%; min-height: 42px; padding: 0 12px; border-radius: 9px; text-align: left; }
.trumbox-money-page #moneySidebar button:hover { background: rgba(255, 210, 26, 0.08); color: var(--trumbox-gold) !important; }
.trumbox-money-page #moneySidebar a { background: var(--trumbox-gold) !important; color: #181200 !important; }
.trumbox-money-page main > section,
.trumbox-money-page > div > aside:last-child { border: 1px solid rgba(255, 210, 26, 0.16); border-radius: 16px !important; background: linear-gradient(145deg, rgba(255, 210, 26, 0.045), rgba(255, 255, 255, 0.02)) !important; }
.trumbox-money-page table { border-color: rgba(255, 210, 26, 0.15) !important; color: #d9dad1 !important; }
.trumbox-money-page table thead { background: #13160e !important; color: var(--trumbox-gold); }
.trumbox-money-page table th,
.trumbox-money-page table td { border-color: rgba(255, 210, 26, 0.12) !important; }
.trumbox-money-page [id$="Popup"] { backdrop-filter: blur(7px); }
.trumbox-money-page [id$="Popup"] > div { border: 1px solid rgba(255, 210, 26, 0.26); background: #0d0f0b !important; color: #d9dad1 !important; }
.trumbox-money-page [id$="Popup"] h2 { color: var(--trumbox-gold) !important; }
.trumbox-money-page [id$="Popup"] input,
.trumbox-money-page [id$="Popup"] select,
.trumbox-money-page [id$="Popup"] textarea { border-color: rgba(255, 210, 26, 0.17) !important; background: #080a06 !important; color: #fff !important; }
.trumbox-money-page .bg-\[\#0f4eff\],
.trumbox-money-page .bg-blue-600,
.trumbox-money-page .bg-blue-500 { background-color: var(--trumbox-gold-deep) !important; color: #181200 !important; }
.trumbox-money-page .text-blue-500,
.trumbox-money-page .text-\[\#0f4eff\] { color: var(--trumbox-gold) !important; }
.trumbox-money-page .bg-white { background-color: #0d0f0b !important; }
.trumbox-money-page .text-black { color: #e8e8de !important; }

@media (max-width: 1180px) {
    .trumbox-admin-nav { display: none !important; }
    .trumbox-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .trumbox-app-content { width: calc(100% - 28px); min-height: calc(100vh - 78px); padding: 24px 0 60px; }
    .trumbox-primary-nav,
    .trumbox-admin-nav,
    .trumbox-user-actions,
    .trumbox-auth-actions { display: none !important; }
    .trumbox-mobile-toggle { display: flex; }
    .trumbox-theme .trumbox-header .container-fluid { padding-right: 56px; }
    body.trumbox-theme #phanMem,
    body.trumbox-theme #downloadSW { width: calc(100% - 40px); }
    .trumbox-money-page > div.flex { overflow: visible !important; }
    .trumbox-money-page #moneyMenuToggle { display: block !important; color: var(--trumbox-gold) !important; }
    .trumbox-money-page #moneySidebar {
        position: fixed;
        z-index: 65;
        top: 70px;
        bottom: 0;
        left: 0;
        display: flex !important;
        width: min(280px, 82vw);
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: 25px 0 55px rgba(0, 0, 0, 0.5);
    }
    .trumbox-money-page #moneySidebar.is-open { transform: translateX(0); }
    .trumbox-money-page main { padding: 16px !important; }
}

@media (max-width: 640px) {
    .trumbox-app-content { width: calc(100% - 20px); padding-top: 18px; }
    .trumbox-page-header { align-items: flex-start; flex-direction: column; }
    .trumbox-panel { padding: 16px; border-radius: 14px; }
    .trumbox-admin-page > .mb-2,
    .trumbox-data-page > .d-flex,
    .trumbox-config-page > .text-center { align-items: stretch !important; flex-direction: column; }
    .trumbox-app-content input[style*="min-width"] { width: 100% !important; min-width: 0 !important; }
    .trumbox-app-content table { min-width: 700px; }
    .trumbox-app-content table .btn { display: block; width: 100%; margin: 4px 0; }
    .trumbox-theme .modal-dialog { width: calc(100% - 18px); margin: 9px auto; }
    .trumbox-theme .modal-body > .d-flex.align-items-center { align-items: stretch !important; flex-direction: column; gap: 7px; }
    .trumbox-theme .modal-body > .d-flex.align-items-center > label { width: 100% !important; }
    .trumbox-warranty-page .p-6 { padding: 16px !important; }
    .trumbox-warranty-page form { gap: 14px !important; }
    .trumbox-product-detail-page > .max-w-\[1200px\] { padding: 16px !important; border-radius: 15px; }
    .trumbox-product-detail-page #productImageCarousel > div:first-child { height: 250px !important; gap: 7px !important; }
    .trumbox-product-detail-page #mainProductImage { width: calc(100% - 76px) !important; height: 210px !important; }
    .trumbox-product-detail-page #productImageCarousel .w-\[400px\] { width: 100% !important; }
    .trumbox-home-grid { grid-template-columns: 1fr; }
    .trumbox-home-hero { padding: 28px 22px; }
    .trumbox-home-hero h1 { font-size: 36px; letter-spacing: -2px; }
    body.trumbox-theme #phanMem,
    body.trumbox-theme #downloadSW { width: calc(100% - 24px); margin-top: 16px; }
    body.trumbox-theme #phanMem .container { padding-right: 12px !important; padding-left: 12px !important; }
    .trumbox-money-page > header { padding: 12px 14px !important; }
    .trumbox-money-page > header img { display: none; }
    .trumbox-money-page main > section { padding: 14px !important; }
    .trumbox-money-page [id$="Popup"] { padding: 10px; }
    .trumbox-money-page [id$="Popup"] > div { max-height: calc(100vh - 20px) !important; overflow-y: auto; padding: 18px !important; }
}

/* Accessibility contrast pass
   Keep legacy Bootstrap/Tailwind screens readable on the shared dark shell. */
.trumbox-theme {
    color-scheme: dark;
}

.trumbox-theme :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--trumbox-gold) !important;
    outline-offset: 3px;
}

.trumbox-app-content .form-text,
.trumbox-app-content .small,
.trumbox-app-content small,
.trumbox-app-content .text-secondary {
    color: var(--trumbox-muted) !important;
}

.trumbox-app-content .text-dark,
.trumbox-app-content .text-black,
.trumbox-theme .modal .text-dark,
.trumbox-theme .modal .text-black {
    color: #f5f5ec !important;
}

.trumbox-page :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900, .text-slate-800, .text-slate-700),
.trumbox-theme .modal :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900, .text-slate-800, .text-slate-700) {
    color: #f5f5ec !important;
}

.trumbox-page :is(.text-gray-600, .text-gray-500, .text-gray-400, .text-slate-600, .text-slate-500, .text-slate-400),
.trumbox-theme .modal :is(.text-gray-600, .text-gray-500, .text-gray-400, .text-slate-600, .text-slate-500, .text-slate-400) {
    color: var(--trumbox-muted) !important;
}

.trumbox-page :is(.text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700, .text-cyan-500, .text-cyan-600),
.trumbox-theme .modal :is(.text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700, .text-cyan-500, .text-cyan-600) {
    color: var(--trumbox-gold) !important;
}

.trumbox-page :is(.text-green-500, .text-green-600, .text-green-700),
.trumbox-app-content .text-success,
.trumbox-theme .modal .text-success {
    color: var(--trumbox-success) !important;
}

.trumbox-page :is(.text-red-500, .text-red-600, .text-red-700, .text-red-800),
.trumbox-app-content .text-danger,
.trumbox-app-content .invalid-feedback,
.trumbox-theme .modal :is(.text-danger, .invalid-feedback) {
    color: var(--trumbox-danger) !important;
}

.trumbox-page :is(.text-yellow-400, .text-yellow-500, .text-yellow-600, .text-orange-400, .text-orange-500, .text-orange-600),
.trumbox-app-content .text-warning {
    color: var(--trumbox-gold) !important;
}

.trumbox-page :is(.bg-green-500, .bg-green-600, .bg-green-700) {
    background: #148047 !important;
    color: #fff !important;
}

.trumbox-page :is(.bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800) {
    background: #c9322b !important;
    color: #fff !important;
}

.trumbox-page .bg-blue-300 {
    background: #555a46 !important;
    color: #f5f5ec !important;
}

.trumbox-app-content :is(.card, .list-group-item, .dropdown-menu, .bg-light),
.trumbox-theme .modal :is(.card, .list-group-item, .dropdown-menu, .bg-light) {
    border-color: rgba(255, 210, 26, 0.17) !important;
    background: #11130e !important;
    color: #e2e3da !important;
}

.trumbox-app-content .dropdown-item,
.trumbox-theme .modal .dropdown-item {
    color: #e2e3da !important;
}

.trumbox-app-content .dropdown-item:hover,
.trumbox-app-content .dropdown-item:focus,
.trumbox-theme .modal .dropdown-item:hover,
.trumbox-theme .modal .dropdown-item:focus {
    background: rgba(255, 210, 26, 0.1) !important;
    color: var(--trumbox-gold) !important;
}

.trumbox-app-content :is(.alert, .alert-info, .alert-primary),
.trumbox-theme .modal :is(.alert, .alert-info, .alert-primary) {
    border-color: rgba(125, 211, 252, 0.38) !important;
    background: rgba(14, 116, 144, 0.2) !important;
    color: #d9f4ff !important;
}

.trumbox-app-content .alert-success,
.trumbox-theme .modal .alert-success {
    border-color: rgba(121, 230, 166, 0.38) !important;
    background: rgba(22, 138, 77, 0.2) !important;
    color: #d9ffe8 !important;
}

.trumbox-app-content :is(.alert-danger, .alert-error),
.trumbox-theme .modal :is(.alert-danger, .alert-error) {
    border-color: rgba(255, 129, 120, 0.42) !important;
    background: rgba(201, 50, 43, 0.2) !important;
    color: #ffe2df !important;
}

.trumbox-app-content .alert-warning,
.trumbox-theme .modal .alert-warning {
    border-color: rgba(255, 216, 77, 0.4) !important;
    background: rgba(180, 125, 0, 0.18) !important;
    color: #fff1b8 !important;
}

.trumbox-app-content :is(select, .form-select) option,
.trumbox-theme .modal :is(select, .form-select) option {
    background: #0b0d09;
    color: #f5f5ec;
}

.trumbox-app-content :is(button, input, select, textarea):disabled,
.trumbox-theme .modal :is(button, input, select, textarea):disabled {
    color: #b4b7ac !important;
    opacity: 0.78 !important;
}

.trumbox-app-content code,
.trumbox-theme .modal code {
    color: #ffe680;
}

.trumbox-app-content .badge.bg-warning,
.trumbox-app-content .badge.bg-info,
.trumbox-theme .modal .badge.bg-warning,
.trumbox-theme .modal .badge.bg-info {
    color: #181200 !important;
}

.trumbox-app-content .badge.bg-success,
.trumbox-app-content .badge.bg-danger,
.trumbox-theme .modal .badge.bg-success,
.trumbox-theme .modal .badge.bg-danger {
    color: #fff !important;
}

/* Product marketing sections use old light-theme utility classes. */
body.trumbox-theme :is(.trumbox-product-page, #phanMem, #downloadSW) :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-blue-50, .bg-orange-50, .bg-orange-100, .bg-purple-100) {
    border-color: rgba(255, 210, 26, 0.16) !important;
    background: #11130e !important;
    color: #e2e3da !important;
}

body.trumbox-theme :is(.trumbox-product-page, #phanMem, #downloadSW) :is(.text-black, .text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900, .text-slate-800, .text-slate-700) {
    color: #f5f5ec !important;
}

body.trumbox-theme :is(.trumbox-product-page, #phanMem, #downloadSW) :is(.text-gray-600, .text-gray-500, .text-gray-400, .text-slate-600, .text-slate-500, .text-slate-400) {
    color: var(--trumbox-muted) !important;
}

body.trumbox-theme :is(.trumbox-product-page, #phanMem, #downloadSW) :is(.text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700, .text-cyan-500, .text-cyan-600, .text-orange-400, .text-orange-500, .text-orange-600, .text-yellow-400) {
    color: var(--trumbox-gold) !important;
}

body.trumbox-theme :is(.trumbox-product-page, #phanMem, #downloadSW) :is(.text-red-500, .text-red-600, .text-red-700, .text-red-800) { color: var(--trumbox-danger) !important; }
body.trumbox-theme :is(.trumbox-product-page, #phanMem, #downloadSW) :is(.text-green-500, .text-green-600, .text-green-700) { color: var(--trumbox-success) !important; }

body.trumbox-theme :is(.trumbox-product-page, #phanMem, #downloadSW) :is(.bg-blue-500, .bg-blue-600, .bg-orange-500),
body.trumbox-theme #uploadCustomerImageBtn {
    background: linear-gradient(180deg, #fff36c, var(--trumbox-gold-deep)) !important;
    color: #181200 !important;
}

body.trumbox-theme :is(.trumbox-product-page, #phanMem, #downloadSW) :is(.bg-green-500, .bg-green-600, .bg-green-700) {
    background: #148047 !important;
    color: #fff !important;
}

body.trumbox-theme :is(.trumbox-product-page, #phanMem, #downloadSW) :is(.bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800) {
    background: #c9322b !important;
    color: #fff !important;
}

body.trumbox-theme footer.text-ads {
    background: #080a06;
    color: var(--trumbox-text-secondary) !important;
}

body.trumbox-theme footer.text-ads .bg-white {
    border: 1px solid rgba(255, 210, 26, 0.18);
    background: #11130e !important;
    color: #f5f5ec !important;
}

body.trumbox-theme footer.text-ads :is(.text-black, .text-gray-900, .text-gray-800, .text-gray-700) { color: #f5f5ec !important; }
body.trumbox-theme footer.text-ads :is(.text-blue-500, .text-blue-600, .text-blue-700) { color: var(--trumbox-gold) !important; }
body.trumbox-theme footer.text-ads :is(.text-red-700, .text-red-800) { color: var(--trumbox-danger) !important; }

/* These two legacy Product popups intentionally stay light. */
body.trumbox-theme #exitPopup > div,
body.trumbox-theme #popup > div {
    background: #fff !important;
    color: #171910 !important;
}

body.trumbox-theme #exitPopup :is(h1, h2, h3, p, li, strong) { color: #171910 !important; }
body.trumbox-theme #popup :is(h1, h2, h3, p) { color: #171910 !important; }
body.trumbox-theme #popup .text-gray-500 { color: #4b5563 !important; }
body.trumbox-theme #popup :is(.text-blue-500, .text-blue-600, .text-blue-700) { color: #1d4ed8 !important; }
body.trumbox-theme #popup button.bg-blue-600 { background: #1d4ed8 !important; color: #fff !important; }

body.trumbox-theme .trumbox-app-content > .fixed.bottom-6 a.bg-blue-600 { background: #1d4ed8 !important; color: #fff !important; }
body.trumbox-theme .trumbox-app-content > .fixed.bottom-6 a.bg-cyan-600 { background: #0e7490 !important; color: #fff !important; }
body.trumbox-theme .trumbox-app-content > .fixed.bottom-6 a.bg-green-500 { background: #148047 !important; color: #fff !important; }

/* Make Money popups are dark, including rows injected later by JavaScript. */
body.trumbox-money-page :is(.text-black, .text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900, .text-slate-800, .text-slate-700) {
    color: #f5f5ec !important;
}

body.trumbox-money-page :is(.text-gray-600, .text-gray-500, .text-gray-400, .text-slate-600, .text-slate-500, .text-slate-400) {
    color: var(--trumbox-muted) !important;
}

body.trumbox-money-page :is(.text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700, .text-cyan-500, .text-cyan-600) {
    color: var(--trumbox-gold) !important;
}

body.trumbox-money-page :is(.text-green-500, .text-green-600, .text-green-700) { color: var(--trumbox-success) !important; }
body.trumbox-money-page :is(.text-red-500, .text-red-600, .text-red-700, .text-red-800) { color: var(--trumbox-danger) !important; }
body.trumbox-money-page :is(.text-yellow-400, .text-yellow-500, .text-yellow-600, .text-orange-400, .text-orange-500, .text-orange-600) { color: var(--trumbox-gold) !important; }

body.trumbox-money-page :is(input, textarea)::placeholder {
    color: #aeb1a6 !important;
    opacity: 1;
}

body.trumbox-money-page :is(input, select, textarea):disabled {
    color: #b4b7ac !important;
    opacity: 0.78 !important;
}

body.trumbox-money-page .bg-gray-300,
body.trumbox-money-page button.bg-gray-300 {
    border-color: #d7d9cf !important;
    background: #e7e8df !important;
    color: #171910 !important;
}

body.trumbox-money-page .bg-gray-300 * { color: #171910 !important; }
body.trumbox-money-page :is(.bg-gray-50, .bg-gray-100) { background: #151810 !important; color: #f5f5ec !important; }

body.trumbox-money-page :is(.bg-green-500, .bg-green-600) { background: #148047 !important; color: #fff !important; }
body.trumbox-money-page :is(.bg-red-500, .bg-red-600, .bg-red-700) { background: #c9322b !important; color: #fff !important; }
body.trumbox-money-page :is(.bg-blue-500, .bg-blue-600, .bg-cyan-600, .bg-\[\#0f4eff\]) { background: var(--trumbox-gold-deep) !important; color: #181200 !important; }

body.trumbox-money-page [id$="Popup"] a { color: var(--trumbox-gold); }
body.trumbox-money-page [id$="Popup"] option { background: #080a06; color: #f5f5ec; }
body.trumbox-money-page [id$="Popup"] input[type="file"]::file-selector-button { border: 0; border-radius: 6px; background: #272a20; color: #f5f5ec; }