/* CheckPhone.vn — canonical light/dark theme
 * Loaded LAST. One source of truth: html[data-theme="light|dark"].
 */
:root{
  --cp-bg:#f6f8fb;
  --cp-surface:#ffffff;
  --cp-surface-2:#f8fafc;
  --cp-text:#182433;
  --cp-text-2:#475467;
  --cp-muted:#667085;
  --cp-border:#e5e7eb;
  --cp-input:#ffffff;
  --cp-primary:#206bc4;
  --cp-primary-hover:#1a5aa8;
  --cp-success:#16a34a;
  --cp-danger:#dc2626;
  --cp-warning:#b45309;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --cp-bg:#0b1220;
  --cp-surface:#111827;
  --cp-surface-2:#162033;
  --cp-text:#f8fafc;
  --cp-text-2:#cbd5e1;
  --cp-muted:#94a3b8;
  --cp-border:#273449;
  --cp-input:#0f172a;
  --cp-primary:#60a5fa;
  --cp-primary-hover:#93c5fd;
  --cp-success:#4ade80;
  --cp-danger:#f87171;
  --cp-warning:#fbbf24;
}
html[data-theme="light"]{color-scheme:light}

/* Root surfaces */
html,body{min-height:100%;background:var(--cp-bg)!important;color:var(--cp-text)!important}
body{color:var(--cp-text)!important}
.wrapper,.content-wrapper,.content,.container-fluid,.page-wrapper,.dashboard-area,
.cp-main,.layout-fixed,.layout-boxed{background:var(--cp-bg)!important;color:var(--cp-text)!important}

/* Common content surfaces. Do NOT touch colored/gradient buttons and hero panels. */
.card,.card-body,.card-header,.card-footer,
.box,.info-box,.cp-card,.cp-stat-card,.cp-history-card,.cp-check-card,
.cp-topup-card,.cp-account-card,.cp-security-card,.cp-2fa-box,.cp-statement-card,
.cp-filter-card,.cp-table-wrap,.cp-footer-card,.contact-card,.contact-box,.chatid-box,
.modal-content,.dropdown-menu,.list-group-item{
  background:var(--cp-surface)!important;
  color:var(--cp-text)!important;
  border-color:var(--cp-border)!important;
}
.card-header,.card-footer{background:var(--cp-surface-2)!important}

/* Generic text: explicit theme wins over legacy hard-coded page CSS */
html[data-theme="light"] h1,html[data-theme="light"] h2,html[data-theme="light"] h3,
html[data-theme="light"] h4,html[data-theme="light"] h5,html[data-theme="light"] h6,
html[data-theme="light"] p,html[data-theme="light"] label,
html[data-theme="light"] td,html[data-theme="light"] th,
html[data-theme="light"] .form-label,html[data-theme="light"] .card-title{
  color:var(--cp-text)!important
}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,
html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6,
html[data-theme="dark"] p,html[data-theme="dark"] label,
html[data-theme="dark"] td,html[data-theme="dark"] th,
html[data-theme="dark"] .form-label,html[data-theme="dark"] .card-title,
html[data-theme="dark"] .text-dark{color:var(--cp-text)!important}
.text-muted,.cp-muted,small,.card-subtitle{color:var(--cp-muted)!important}

/* Tables */
.table,table{color:var(--cp-text)!important}
.table td,.table th,table td,table th{border-color:var(--cp-border)!important}
html[data-theme="light"] .table thead th,html[data-theme="light"] table thead th{
  background:var(--cp-surface-2)!important;color:var(--cp-text)!important
}
html[data-theme="dark"] .table thead th,html[data-theme="dark"] table thead th{
  background:#162033!important;color:#f8fafc!important
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd){background:rgba(30,41,59,.42)!important}
html[data-theme="light"] .table-striped tbody tr:nth-of-type(odd){background:#f8fafc!important}
html[data-theme="dark"] .table-hover tbody tr:hover{background:#1e293b!important}
html[data-theme="light"] .table-hover tbody tr:hover{background:#f1f5f9!important}

/* Forms */
.form-control,.form-select,.custom-select,select,textarea,
input:not([type="checkbox"]):not([type="radio"]),.text_field,.otp-input{
  background:var(--cp-input)!important;
  color:var(--cp-text)!important;
  border-color:var(--cp-border)!important;
}
.form-control:focus,.form-select:focus,.custom-select:focus,select:focus,textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,.text_field:focus,.otp-input:focus{
  background:var(--cp-input)!important;color:var(--cp-text)!important;
  border-color:var(--cp-primary)!important;
  box-shadow:0 0 0 3px rgba(59,130,246,.15)!important
}
::placeholder{color:var(--cp-muted)!important;opacity:1}
.input-group-text{background:var(--cp-surface-2)!important;color:var(--cp-text-2)!important;border-color:var(--cp-border)!important}

/* Navbar / sidebar / footer */
.main-header,.cp-navbar,.main-sidebar,.cp-sidebar,.brand-link,.cp-brand,
.cp-footer,.main-footer,.footer{
  background:var(--cp-surface)!important;color:var(--cp-text)!important;border-color:var(--cp-border)!important
}
.navbar .nav-link,.main-header .nav-link,.nav-sidebar .nav-link{color:var(--cp-text-2)!important}
.nav-sidebar .nav-link:hover{background:var(--cp-surface-2)!important;color:var(--cp-text)!important}
.nav-sidebar .nav-link.active{background:var(--cp-primary)!important;color:#fff!important}
.nav-sidebar .nav-link.active .nav-icon{color:#fff!important}

/* Dropdowns, menus, pagination, select2 */
.dropdown-item{color:var(--cp-text-2)!important}
.dropdown-item:hover,.dropdown-item:focus{background:var(--cp-surface-2)!important;color:var(--cp-text)!important}
.page-link{background:var(--cp-surface)!important;color:var(--cp-text)!important;border-color:var(--cp-border)!important}
.page-item.active .page-link{background:var(--cp-primary)!important;border-color:var(--cp-primary)!important;color:#fff!important}
.list-group-item{background:var(--cp-surface)!important;color:var(--cp-text)!important}
.select2-dropdown{background:var(--cp-surface)!important;color:var(--cp-text)!important;border-color:var(--cp-border)!important}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  background:var(--cp-input)!important;border-color:var(--cp-border)!important;color:var(--cp-text)!important
}
.select2-container--default .select2-selection__rendered,
.select2-container--default .select2-selection__placeholder{color:var(--cp-text-2)!important}

/* Modal */
.modal-content{box-shadow:0 18px 50px rgba(15,23,42,.18)!important}
.modal-header,.modal-footer{background:var(--cp-surface-2)!important;color:var(--cp-text)!important;border-color:var(--cp-border)!important}
.modal-title,.modal-header h1,.modal-header h2,.modal-header h3,.modal-header h4,.modal-header h5{color:var(--cp-text)!important}
.close{color:var(--cp-text)!important}

/* Alerts and common light utility blocks */
html[data-theme="dark"] .bg-white{background:var(--cp-surface)!important}
html[data-theme="dark"] .bg-light{background:var(--cp-surface-2)!important}
html[data-theme="light"] .bg-dark{color:#fff!important}
html[data-theme="dark"] .alert-light{background:var(--cp-surface-2)!important;color:var(--cp-text-2)!important;border-color:var(--cp-border)!important}

/* Frontend header legacy inline styles */
html[data-theme="dark"] .cp-header,
html[data-theme="dark"] .cp-header-inner,
html[data-theme="dark"] .cp-nav,
html[data-theme="dark"] .cp-menu,
html[data-theme="dark"] .cp-menu-panel,
html[data-theme="dark"] .cp-user-menu,
html[data-theme="dark"] .cp-notification-menu{
  background:var(--cp-surface)!important;color:var(--cp-text)!important;border-color:var(--cp-border)!important
}

/* Standalone auth / OTP pages */
html[data-theme="dark"] .login-form,
html[data-theme="dark"] .otp-right{background:var(--cp-bg)!important;color:var(--cp-text)!important}
html[data-theme="light"] .login-form,
html[data-theme="light"] .otp-right{background:var(--cp-surface)!important;color:var(--cp-text)!important}
html[data-theme="dark"] .login-card h3,
html[data-theme="dark"] .otp-h1,
html[data-theme="dark"] .otp-title{color:var(--cp-text)!important}
html[data-theme="dark"] .otp-header,
html[data-theme="dark"] .otp-body{background:var(--cp-surface)!important;border-color:var(--cp-border)!important}
html[data-theme="dark"] .otp-subtitle,
html[data-theme="dark"] .otp-countdown,
html[data-theme="dark"] .otp-desc,
html[data-theme="dark"] .help-row,
html[data-theme="dark"] .note{color:var(--cp-muted)!important}
html[data-theme="dark"] .otp-input{background:var(--cp-input)!important;color:var(--cp-text)!important;border-color:var(--cp-border)!important}
html[data-theme="dark"] .btn-outline{background:var(--cp-surface)!important;color:var(--cp-text)!important;border-color:var(--cp-border)!important}
html[data-theme="dark"] .otp-alert{background:#172554!important;color:#bfdbfe!important;border-color:#1d4ed8!important}

/* Registration/login pages using old theme classes */
html[data-theme="dark"] .cardify,
html[data-theme="dark"] .login_area .login,
html[data-theme="dark"] .login--form,
html[data-theme="dark"] .login--header{
  background:var(--cp-surface)!important;color:var(--cp-text)!important;border-color:var(--cp-border)!important
}
html[data-theme="dark"] .login--form .text_field{background:var(--cp-input)!important;color:var(--cp-text)!important;border-color:var(--cp-border)!important}

/* Admin CMS */
html[data-theme="dark"] .topbar .navbar{background:var(--cp-surface)!important;border-color:var(--cp-border)!important}
html[data-theme="dark"] .left-sidebar{background:var(--cp-surface)!important;border-color:var(--cp-border)!important}
html[data-theme="dark"] .page-titles{background:var(--cp-surface)!important;color:var(--cp-text)!important}
html[data-theme="dark"] .jsgrid-grid-body,
html[data-theme="dark"] .jsgrid-grid-header{background:var(--cp-surface)!important;color:var(--cp-text)!important;border-color:var(--cp-border)!important}

/* Preserve semantic colored statuses in both themes */
.status-success,.text-success{color:var(--cp-success)!important}
.status-danger,.text-danger{color:var(--cp-danger)!important}
.text-primary,a.text-primary{color:var(--cp-primary)!important}
a{color:var(--cp-primary)}
html[data-theme="dark"] .btn-outline-dark{color:var(--cp-text)!important;border-color:var(--cp-border)!important}
html[data-theme="dark"] .btn-outline-dark:hover{background:var(--cp-surface-2)!important}

/* Scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar{width:10px;height:10px}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:#0b1220}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#334155;border-radius:10px}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}

/* ========================================================================
   STRICT THEME NORMALIZATION — 2026-09-02
   ------------------------------------------------------------------------
   The application contains older Blade pages with their own CSS variables
   and hard-coded light/dark fallbacks. This layer is intentionally LAST and
   uses the canonical html[data-theme] state as the only source of truth.
   ======================================================================== */

/* Legacy variable aliases used by older Blade templates. */
:root,
html[data-theme="light"]{
  --card-bg:var(--cp-surface);
  --input-bg:var(--cp-input);
  --text-color:var(--cp-text);
  --text-main:var(--cp-text);
  --text-primary:var(--cp-text);
  --text-secondary:var(--cp-text-2);
  --text-muted:var(--cp-muted);
  --bg-page:var(--cp-bg);
  --bg-main:var(--cp-bg);
  --bg-card:var(--cp-surface);
  --bg-card-2:var(--cp-surface-2);
  --bg-input:var(--cp-input);
  --bg-soft:var(--cp-surface-2);
  --border:var(--cp-border);
  --border-input:var(--cp-border);
  --border-focus:var(--cp-primary);
  --card:var(--cp-surface);
}
html[data-theme="dark"]{
  --card-bg:var(--cp-surface);
  --input-bg:var(--cp-input);
  --text-color:var(--cp-text);
  --text-main:var(--cp-text);
  --text-primary:var(--cp-text);
  --text-secondary:var(--cp-text-2);
  --text-muted:var(--cp-muted);
  --bg-page:var(--cp-bg);
  --bg-main:var(--cp-bg);
  --bg-card:var(--cp-surface);
  --bg-card-2:var(--cp-surface-2);
  --bg-input:var(--cp-input);
  --bg-soft:var(--cp-surface-2);
  --border:var(--cp-border);
  --border-input:var(--cp-border);
  --border-focus:var(--cp-primary);
  --card:var(--cp-surface);
}

/* Main application chrome: never inherit a stale AdminLTE/legacy surface. */
html[data-theme="light"] body,
html[data-theme="light"] .wrapper,
html[data-theme="light"] .content-wrapper,
html[data-theme="light"] .content,
html[data-theme="light"] .main-footer,
html[data-theme="light"] .main-header,
html[data-theme="light"] .main-sidebar{
  background-color:var(--cp-bg)!important;
  color:var(--cp-text)!important;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .content,
html[data-theme="dark"] .main-footer,
html[data-theme="dark"] .main-header,
html[data-theme="dark"] .main-sidebar{
  background-color:var(--cp-bg)!important;
  color:var(--cp-text)!important;
}

/* Every normal content surface follows the selected theme. */
html[data-theme="light"] .card,
html[data-theme="light"] .box,
html[data-theme="light"] .info-box,
html[data-theme="light"] .cp-card,
html[data-theme="light"] .cp-stat-card,
html[data-theme="light"] .cp-history-card,
html[data-theme="light"] .cp-check-card,
html[data-theme="light"] .cp-filter-card,
html[data-theme="light"] .cp-table-wrap,
html[data-theme="light"] .cp-chart-card,
html[data-theme="light"] .cp-account-card,
html[data-theme="light"] .cp-security-card,
html[data-theme="light"] .cp-2fa-box,
html[data-theme="light"] .cp-statement-card,
html[data-theme="light"] .cp-footer-card,
html[data-theme="light"] .cp-usdt-card,
html[data-theme="light"] .cp-usdt-payment,
html[data-theme="light"] .su-card,
html[data-theme="light"] .modal-content{
  background:var(--cp-surface)!important;
  color:var(--cp-text)!important;
  border-color:var(--cp-border)!important;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .box,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .cp-card,
html[data-theme="dark"] .cp-stat-card,
html[data-theme="dark"] .cp-history-card,
html[data-theme="dark"] .cp-check-card,
html[data-theme="dark"] .cp-filter-card,
html[data-theme="dark"] .cp-table-wrap,
html[data-theme="dark"] .cp-chart-card,
html[data-theme="dark"] .cp-account-card,
html[data-theme="dark"] .cp-security-card,
html[data-theme="dark"] .cp-2fa-box,
html[data-theme="dark"] .cp-statement-card,
html[data-theme="dark"] .cp-footer-card,
html[data-theme="dark"] .cp-usdt-card,
html[data-theme="dark"] .cp-usdt-payment,
html[data-theme="dark"] .su-card,
html[data-theme="dark"] .modal-content{
  background:var(--cp-surface)!important;
  color:var(--cp-text)!important;
  border-color:var(--cp-border)!important;
}

/* Dashboard and transaction history: no white-on-white text in either mode. */
html[data-theme="light"] .cp-stat-title,
html[data-theme="light"] .cp-card-title,
html[data-theme="light"] .cp-table td,
html[data-theme="light"] .cp-table th,
html[data-theme="light"] .cp-history-table td,
html[data-theme="light"] .cp-history-table th,
html[data-theme="light"] .cp-mobile-code,
html[data-theme="light"] .cp-mobile-value,
html[data-theme="light"] .cp-mobile-result,
html[data-theme="light"] .cp-chart-title,
html[data-theme="light"] .cp-action-card h3,
html[data-theme="light"] .su-title,
html[data-theme="light"] .su-service-name,
html[data-theme="light"] .su-section-title,
html[data-theme="light"] .su-form-label,
html[data-theme="light"] .su-dhru-info-head,
html[data-theme="light"] .su-dhru-info-content,
html[data-theme="light"] .cp-usdt-payment-title,
html[data-theme="light"] .cp-usdt-value{
  color:var(--cp-text)!important;
}
html[data-theme="dark"] .cp-stat-title,
html[data-theme="dark"] .cp-card-title,
html[data-theme="dark"] .cp-table td,
html[data-theme="dark"] .cp-table th,
html[data-theme="dark"] .cp-history-table td,
html[data-theme="dark"] .cp-history-table th,
html[data-theme="dark"] .cp-mobile-code,
html[data-theme="dark"] .cp-mobile-value,
html[data-theme="dark"] .cp-mobile-result,
html[data-theme="dark"] .cp-chart-title,
html[data-theme="dark"] .cp-action-card h3,
html[data-theme="dark"] .su-title,
html[data-theme="dark"] .su-service-name,
html[data-theme="dark"] .su-section-title,
html[data-theme="dark"] .su-form-label,
html[data-theme="dark"] .su-dhru-info-head,
html[data-theme="dark"] .su-dhru-info-content,
html[data-theme="dark"] .cp-usdt-payment-title,
html[data-theme="dark"] .cp-usdt-value{
  color:var(--cp-text)!important;
}

/* Legacy Server Service page. */
html[data-theme="light"] .su-header,
html[data-theme="light"] .su-service-info,
html[data-theme="light"] .su-body,
html[data-theme="light"] .su-footer{
  background:var(--cp-surface)!important;
  border-color:var(--cp-border)!important;
}
html[data-theme="dark"] .su-header,
html[data-theme="dark"] .su-service-info,
html[data-theme="dark"] .su-body,
html[data-theme="dark"] .su-footer{
  background:var(--cp-surface)!important;
  border-color:var(--cp-border)!important;
}
html[data-theme="light"] .su-subtitle,
html[data-theme="light"] .su-service-meta,
html[data-theme="light"] .su-field-desc,
html[data-theme="light"] .su-total,
html[data-theme="dark"] .su-subtitle,
html[data-theme="dark"] .su-service-meta,
html[data-theme="dark"] .su-field-desc,
html[data-theme="dark"] .su-total{
  color:var(--cp-muted)!important;
}
html[data-theme="light"] .su-input,
html[data-theme="light"] .su-select,
html[data-theme="light"] .su-textarea,
html[data-theme="dark"] .su-input,
html[data-theme="dark"] .su-select,
html[data-theme="dark"] .su-textarea{
  background:var(--cp-input)!important;
  color:var(--cp-text)!important;
  border-color:var(--cp-border)!important;
}

/* USDT top-up: payment panel follows theme; QR itself intentionally stays white. */
html[data-theme="light"] .cp-usdt-help,
html[data-theme="light"] .cp-usdt-warning{
  background:var(--cp-surface-2)!important;
  color:var(--cp-text-2)!important;
  border-color:var(--cp-border)!important;
}
html[data-theme="dark"] .cp-usdt-help,
html[data-theme="dark"] .cp-usdt-warning{
  background:var(--cp-surface-2)!important;
  color:var(--cp-text-2)!important;
  border-color:var(--cp-border)!important;
}
html[data-theme="light"] .cp-usdt-auto-status,
html[data-theme="dark"] .cp-usdt-auto-status{
  background:rgba(22,163,74,.10)!important;
  color:var(--cp-success)!important;
  border-color:rgba(22,163,74,.25)!important;
}
html[data-theme="light"] .cp-usdt-card hr,
html[data-theme="dark"] .cp-usdt-card hr{border-color:var(--cp-border)!important}
html[data-theme="dark"] .cp-usdt-qr-wrap{background:#fff!important;border-color:#e5edf7!important}

/* Tables/DataTables must not retain Bootstrap's light background in dark mode. */
html[data-theme="dark"] table,
html[data-theme="dark"] .table,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_scrollHead,
html[data-theme="dark"] .dataTables_scrollBody,
html[data-theme="dark"] .dataTables_scrollFoot{
  background:var(--cp-surface)!important;
  color:var(--cp-text)!important;
  border-color:var(--cp-border)!important;
}
html[data-theme="light"] table,
html[data-theme="light"] .table,
html[data-theme="light"] .table-responsive,
html[data-theme="light"] .dataTables_wrapper,
html[data-theme="light"] .dataTables_scrollHead,
html[data-theme="light"] .dataTables_scrollBody,
html[data-theme="light"] .dataTables_scrollFoot{
  background:var(--cp-surface)!important;
  color:var(--cp-text)!important;
  border-color:var(--cp-border)!important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper select,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select{
  background:var(--cp-input)!important;color:var(--cp-text)!important;border-color:var(--cp-border)!important;
}
html[data-theme="light"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="light"] .dataTables_wrapper select,
html[data-theme="light"] .dataTables_wrapper .dataTables_length select{
  background:var(--cp-input)!important;color:var(--cp-text)!important;border-color:var(--cp-border)!important;
}

/* Bootstrap utility classes that frequently leak the opposite theme. */
html[data-theme="dark"] .bg-white{background:var(--cp-surface)!important}
html[data-theme="dark"] .bg-light{background:var(--cp-surface-2)!important}
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-right,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left{border-color:var(--cp-border)!important}
html[data-theme="light"] .bg-dark:not(.btn):not(.badge){background:var(--cp-surface)!important;color:var(--cp-text)!important}

/* Inline white surfaces from legacy Blade CSS: convert them unless they are
   deliberate controls/branding/QR artwork. */
html[data-theme="dark"] [style*="background:#fff" i]:not(.btn):not(.badge):not(.cp-usdt-qr-wrap),
html[data-theme="dark"] [style*="background: #fff" i]:not(.btn):not(.badge):not(.cp-usdt-qr-wrap),
html[data-theme="dark"] [style*="background:#ffffff" i]:not(.btn):not(.badge):not(.cp-usdt-qr-wrap),
html[data-theme="dark"] [style*="background: #ffffff" i]:not(.btn):not(.badge):not(.cp-usdt-qr-wrap){
  background:var(--cp-surface)!important;
}

/* Keep text inside normal content readable while preserving white text on
   semantic colored buttons/hero components. */
html[data-theme="dark"] .content-wrapper .card p:not(.text-white),
html[data-theme="dark"] .content-wrapper .card span:not(.badge):not(.text-white),
html[data-theme="dark"] .content-wrapper .card div:not(.btn):not(.badge),
html[data-theme="dark"] .content-wrapper .box p,
html[data-theme="dark"] .content-wrapper .box span:not(.badge),
html[data-theme="dark"] .content-wrapper .info-box p,
html[data-theme="dark"] .content-wrapper .info-box span:not(.badge){
  color:inherit;
}

/* Explicitly fix common legacy white text on light surfaces. */
html[data-theme="light"] .su-title,
html[data-theme="light"] .su-service-name,
html[data-theme="light"] .su-section-title,
html[data-theme="light"] .su-form-label,
html[data-theme="light"] .su-dhru-info-head,
html[data-theme="light"] .su-dhru-info-content,
html[data-theme="light"] .cp-usdt-payment-title,
html[data-theme="light"] .cp-usdt-value,
html[data-theme="light"] .cp-card-title,
html[data-theme="light"] .cp-stat-title{color:var(--cp-text)!important}

/* Theme transition is limited to surfaces/text, avoiding animated controls. */
html[data-theme="light"] body *,
html[data-theme="dark"] body *{
  --cp-current-surface:var(--cp-surface);
}

/* API/IMEI result HTML may contain inline white styles from the provider.
   Normalize those nested result blocks without destroying semantic red/green
   status classes. */
html[data-theme="dark"] .cp-result-cell,
html[data-theme="dark"] .cp-result-cell > div,
html[data-theme="dark"] .cp-mobile-result,
html[data-theme="dark"] .cp-result-card{
  background:var(--cp-surface)!important;
  color:var(--cp-text)!important;
  border-color:var(--cp-border)!important;
}
html[data-theme="light"] .cp-result-cell,
html[data-theme="light"] .cp-result-cell > div,
html[data-theme="light"] .cp-mobile-result,
html[data-theme="light"] .cp-result-card{
  background:var(--cp-surface)!important;
  color:var(--cp-text)!important;
  border-color:var(--cp-border)!important;
}
html[data-theme="dark"] .cp-result-cell [style*="color:#fff" i],
html[data-theme="dark"] .cp-result-cell [style*="color: #fff" i],
html[data-theme="dark"] .cp-result-cell [style*="color:#ffffff" i],
html[data-theme="dark"] .cp-result-cell [style*="color: #ffffff" i],
html[data-theme="dark"] .cp-mobile-result [style*="color:#fff" i],
html[data-theme="dark"] .cp-mobile-result [style*="color: #fff" i],
html[data-theme="dark"] .cp-mobile-result [style*="color:#ffffff" i],
html[data-theme="dark"] .cp-mobile-result [style*="color: #ffffff" i]{
  color:var(--cp-text)!important;
}
html[data-theme="light"] .cp-result-cell [style*="color:#fff" i],
html[data-theme="light"] .cp-result-cell [style*="color: #fff" i],
html[data-theme="light"] .cp-result-cell [style*="color:#ffffff" i],
html[data-theme="light"] .cp-result-cell [style*="color: #ffffff" i],
html[data-theme="light"] .cp-mobile-result [style*="color:#fff" i],
html[data-theme="light"] .cp-mobile-result [style*="color: #fff" i],
html[data-theme="light"] .cp-mobile-result [style*="color:#ffffff" i],
html[data-theme="light"] .cp-mobile-result [style*="color: #ffffff" i]{
  color:var(--cp-text)!important;
}
html[data-theme="dark"] .cp-result-cell [style*="background:#fff" i],
html[data-theme="dark"] .cp-result-cell [style*="background: #fff" i],
html[data-theme="dark"] .cp-result-cell [style*="background:#ffffff" i],
html[data-theme="dark"] .cp-result-cell [style*="background: #ffffff" i],
html[data-theme="dark"] .cp-mobile-result [style*="background:#fff" i],
html[data-theme="dark"] .cp-mobile-result [style*="background: #fff" i],
html[data-theme="dark"] .cp-mobile-result [style*="background:#ffffff" i],
html[data-theme="dark"] .cp-mobile-result [style*="background: #ffffff" i]{
  background:var(--cp-surface)!important;
}

/* === V3: standalone login/auth page ===
   dang-nhap.blade.php has its own legacy color variables. Force every auth
   surface to follow the canonical theme so dark mode never leaves white cards
   with white text (and light mode never inherits dark controls). */
html[data-theme="light"] .auth-shell,
html[data-theme="dark"] .auth-shell{
  color:var(--cp-text)!important;
}
html[data-theme="light"] .hero-panel{
  background:linear-gradient(180deg,#f8fafc 0%,#eef4fb 100%)!important;
  color:var(--cp-text)!important;
  border-color:var(--cp-border)!important;
}
html[data-theme="dark"] .hero-panel{
  background:linear-gradient(180deg,#0b1220 0%,#0d1728 100%)!important;
  color:var(--cp-text)!important;
  border-color:var(--cp-border)!important;
}
html[data-theme="light"] .auth-card,
html[data-theme="dark"] .auth-card,
html[data-theme="light"] .feature-card,
html[data-theme="dark"] .feature-card,
html[data-theme="light"] .metric-card,
html[data-theme="dark"] .metric-card,
html[data-theme="light"] .stat-item,
html[data-theme="dark"] .stat-item{
  background:var(--cp-surface)!important;
  color:var(--cp-text)!important;
  border-color:var(--cp-border)!important;
}
html[data-theme="dark"] .metric-card{
  background:var(--cp-surface-2)!important;
}
html[data-theme="light"] .brand h1,
html[data-theme="light"] .hero-content h2,
html[data-theme="light"] .metric-card strong,
html[data-theme="light"] .feature-card h4,
html[data-theme="light"] .auth-card h3,
html[data-theme="light"] .stat-item,
html[data-theme="dark"] .brand h1,
html[data-theme="dark"] .hero-content h2,
html[data-theme="dark"] .metric-card strong,
html[data-theme="dark"] .feature-card h4,
html[data-theme="dark"] .auth-card h3,
html[data-theme="dark"] .stat-item{
  color:var(--cp-text)!important;
  text-shadow:none!important;
}
html[data-theme="light"] .brand span,
html[data-theme="light"] .hero-content p,
html[data-theme="light"] .metric-card span,
html[data-theme="light"] .feature-card p,
html[data-theme="light"] .form-sub,
html[data-theme="light"] .stat-item span,
html[data-theme="dark"] .brand span,
html[data-theme="dark"] .hero-content p,
html[data-theme="dark"] .metric-card span,
html[data-theme="dark"] .feature-card p,
html[data-theme="dark"] .form-sub,
html[data-theme="dark"] .stat-item span{
  color:var(--cp-muted)!important;
}
html[data-theme="light"] .hero-content h2 span,
html[data-theme="dark"] .hero-content h2 span{
  color:var(--cp-primary)!important;
}
html[data-theme="light"] .hero-badge,
html[data-theme="dark"] .hero-badge{
  background:color-mix(in srgb,var(--cp-primary) 12%,var(--cp-surface))!important;
  border-color:color-mix(in srgb,var(--cp-primary) 25%,var(--cp-border))!important;
  color:var(--cp-primary)!important;
}
html[data-theme="light"] .form-logo-wrap,
html[data-theme="dark"] .form-logo-wrap,
html[data-theme="light"] .hint-box,
html[data-theme="dark"] .hint-box{
  background:var(--cp-surface-2)!important;
  border-color:var(--cp-border)!important;
  color:var(--cp-text-2)!important;
}
html[data-theme="light"] .form-group label,
html[data-theme="dark"] .form-group label{
  color:var(--cp-text-2)!important;
}
html[data-theme="light"] .input-field,
html[data-theme="dark"] .input-field{
  background:var(--cp-input)!important;
  color:var(--cp-text)!important;
  border-color:var(--cp-border)!important;
}
html[data-theme="light"] .input-field:focus,
html[data-theme="dark"] .input-field:focus{
  background:var(--cp-input)!important;
  color:var(--cp-text)!important;
  border-color:var(--cp-primary)!important;
}
html[data-theme="light"] .auth-link.dark,
html[data-theme="dark"] .auth-link.dark{
  color:var(--cp-text-2)!important;
}
html[data-theme="light"] .divider,
html[data-theme="dark"] .divider{
  border-color:var(--cp-border)!important;
}
html[data-theme="dark"] .spinner-box{
  background:var(--cp-surface)!important;
  color:var(--cp-text)!important;
}

/* Language picker on standalone auth page: keep it readable and out of the
   document flow so it does not create the raw "VN VI us EN" strip. */
body > .cp-lang-switcher{
  position:fixed!important;
  top:14px!important;
  right:18px!important;
  left:auto!important;
  z-index:1000!important;
  padding:5px!important;
  border-radius:12px!important;
  background:var(--cp-surface)!important;
  border:1px solid var(--cp-border)!important;
  box-shadow:0 8px 22px rgba(15,23,42,.10)!important;
}
body > .cp-lang-switcher a{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  padding:7px 9px!important;
  border-radius:8px!important;
  color:var(--cp-text-2)!important;
  text-decoration:none!important;
  font:700 12px/1 Inter,system-ui,sans-serif!important;
}
body > .cp-lang-switcher a:hover,
body > .cp-lang-switcher a.active{
  background:var(--cp-surface-2)!important;
  color:var(--cp-primary)!important;
}

/* Auth top-right tools wrapper */
.cp-auth-tools{
  position:fixed;
  top:14px;
  right:18px;
  z-index:1000;
  display:flex;
  align-items:center;
  gap:8px;
}
.cp-auth-tools > .cp-lang-switcher{
  position:static!important;
  padding:5px!important;
  border-radius:12px!important;
  background:var(--cp-surface)!important;
  border:1px solid var(--cp-border)!important;
  box-shadow:0 8px 22px rgba(15,23,42,.10)!important;
}
.cp-auth-theme-toggle{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--cp-border)!important;
  border-radius:12px;
  background:var(--cp-surface)!important;
  color:var(--cp-text)!important;
  box-shadow:0 8px 22px rgba(15,23,42,.10)!important;
  cursor:pointer;
}
.cp-auth-theme-toggle:hover{background:var(--cp-surface-2)!important;color:var(--cp-primary)!important}
@media(max-width:720px){
  .cp-auth-tools{top:10px;right:10px;transform:scale(.92);transform-origin:top right}
}