:root{
  --neo-bg:#070b14;
  --neo-bg-2:#0d1424;
  --neo-bg-3:#111b31;
  --neo-surface:#101827;
  --neo-surface-2:#131f33;
  --neo-surface-3:#18263e;
  --neo-border:rgba(148,163,184,.18);
  --neo-text:#ecf3ff;
  --neo-text-2:#a8b6d3;
  --neo-text-3:#7f91b2;
  --neo-primary:#6d8cff;
  --neo-primary-2:#8f63ff;
  --neo-success:#22c55e;
  --neo-danger:#ef4444;
  --neo-warning:#f59e0b;
  --neo-shadow:0 18px 45px rgba(0,0,0,.28);
  --neo-radius:22px;
}
html,body{
  background:
    radial-gradient(circle at top left, rgba(109,140,255,.18), transparent 28%),
    radial-gradient(circle at top right, rgba(143,99,255,.12), transparent 22%),
    linear-gradient(180deg,var(--neo-bg) 0%,var(--neo-bg-2) 100%) fixed;
  color:var(--neo-text);
}
body{
  min-height:100vh;
  font-size:15px;
}
a{color:#b8c8ff;text-decoration:none}
a:hover{color:#d6e0ff}
#layout-wrapper,.main-content,.page-content,.container-fluid{background:transparent}
.main-content{min-height:calc(100vh - 70px)}
.page-content{padding:24px 0 82px}
.page-title-box{margin-bottom:18px}
.page-title-box h4,.page-title-box h5,.card-title,.text-dark,.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6,
label,.col-form-label,.form-label,.form-check-label,.breadcrumb-item.active{color:var(--neo-text)!important}
.text-muted,.text-muted *,.breadcrumb-item a,small,.small{color:var(--neo-text-2)!important}
.alert{color:var(--neo-text)!important;border:1px solid var(--neo-border)!important;background:linear-gradient(180deg,rgba(20,31,51,.98),rgba(15,24,39,.98))!important;box-shadow:var(--neo-shadow);border-radius:22px}
.card{
  background:linear-gradient(180deg,rgba(19,31,51,.96),rgba(15,24,39,.96));
  border:1px solid var(--neo-border);
  box-shadow:var(--neo-shadow);
  border-radius:var(--neo-radius);
  overflow:hidden;
}
.card .card-body{padding:1.15rem}
.card .card-header{background:rgba(255,255,255,.02);border-bottom:1px solid var(--neo-border)!important}
.card-h-100{height:100%}
.border,.border-top,.border-bottom,.border-start,.border-end{border-color:var(--neo-border)!important}
hr{border-color:var(--neo-border)!important;opacity:1}
.badge.bg-soft-success{background:rgba(34,197,94,.16)!important;color:#8af0b1!important}
.badge.bg-soft-danger{background:rgba(239,68,68,.16)!important;color:#ff9d9d!important}
.badge.bg-soft-primary,.badge.bg-primary-subtle{background:rgba(109,140,255,.16)!important;color:#c7d3ff!important}
.badge.bg-danger{background:rgba(239,68,68,.92)!important}
.footer{
  position:static!important;
  background:rgba(7,11,20,.82);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--neo-border);
  color:var(--neo-text-2);
  padding:14px 0;
}
.footer .text-sm-end,.footer .col-sm-6{color:var(--neo-text-2)!important}
#page-topbar,.navbar-header{
  background:rgba(7,11,20,.82)!important;
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--neo-border);
}
.navbar-brand-box{
  background:linear-gradient(180deg,rgba(16,24,39,.97),rgba(12,20,34,.97));
  border-right:1px solid var(--neo-border);
}
.navbar-brand-box .logo-dark,.navbar-brand-box .logo-light{display:flex;align-items:center}
.navbar-brand-box .logo-txt{font-weight:800;letter-spacing:.02em;color:#eef4ff}
.header-item,.header-item i,.header-item svg,.money-status,.noti-icon,.bx,.mdi{color:#dbe7ff!important}
.header-item:hover,.header-item:focus{background:rgba(255,255,255,.06)!important}
.money-status{display:flex;align-items:center;margin:0 10px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.06);font-weight:700;font-size:13px;border:1px solid var(--neo-border)}
.vertical-menu{
  background:linear-gradient(180deg,rgba(16,24,39,.97),rgba(12,20,34,.97));
  border-right:1px solid var(--neo-border);
  box-shadow:8px 0 30px rgba(0,0,0,.2);
}
#sidebar-menu{padding-top:8px}
.vertical-menu .menu-title{color:var(--neo-text-3)!important;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
#sidebar-menu ul li a{display:flex;align-items:center;gap:12px;margin:6px 12px;padding:13px 14px;border-radius:16px;color:#dbe7ff!important;font-weight:700;transition:.2s ease;border:1px solid transparent}
#sidebar-menu ul li a:hover,#sidebar-menu ul li.mm-active>a,#sidebar-menu ul li a.active{background:linear-gradient(135deg,rgba(109,140,255,.16),rgba(143,99,255,.14));color:#fff!important;border-color:rgba(130,150,255,.18)}
#sidebar-menu ul li a i,#sidebar-menu ul li a svg{color:#a8b6d3!important}
.sidebar-alert{background:linear-gradient(135deg,#1a2750,#2f3f7d)!important;color:#fff;box-shadow:none;border-radius:20px;border:1px solid rgba(255,255,255,.08)!important}
.sidebar-alert .alertcard-title,.sidebar-alert p{color:#fff!important}
.sidebar-alert .btn-primary{background:#fff;color:#1b2550;border-color:#fff}
.form-control,.form-select,textarea{
  background:rgba(255,255,255,.04)!important;
  border:1px solid var(--neo-border)!important;
  color:var(--neo-text)!important;
  border-radius:14px;
  min-height:46px;
}
.form-control::placeholder,textarea::placeholder{color:var(--neo-text-3)!important}
.form-control:focus,.form-select:focus,textarea:focus{border-color:#8ca2ff!important;box-shadow:0 0 0 .2rem rgba(109,140,255,.12)!important;background:rgba(255,255,255,.06)!important}
.form-check-input{background-color:transparent;border-color:rgba(168,182,211,.4)}
.input-group-text{background:rgba(255,255,255,.04)!important;border:1px solid var(--neo-border)!important;color:var(--neo-text-2)!important}
.btn{border-radius:14px;font-weight:700}
.btn-primary{background:linear-gradient(135deg,var(--neo-primary),var(--neo-primary-2));border:none;box-shadow:0 10px 24px rgba(91,124,255,.24)}
.btn-primary:hover{opacity:.95}
.btn-light,.btn-soft-light{background:rgba(255,255,255,.06)!important;border-color:var(--neo-border)!important;color:var(--neo-text)!important}
.btn-outline-secondary,.btn-secondary{border-color:var(--neo-border)!important}
.table,.table *{color:var(--neo-text)!important}
.table>:not(caption)>*>*{background:transparent!important;border-color:rgba(148,163,184,.14)!important;box-shadow:none!important}
.table-hover tbody tr:hover{background:rgba(255,255,255,.03)!important}
.table-light th,.table-light td,.thead-light th{background:rgba(255,255,255,.04)!important;color:var(--neo-text)!important}
.dropdown-menu,.swal2-popup{
  background:linear-gradient(180deg,rgba(19,31,51,.98),rgba(15,24,39,.98))!important;
  border:1px solid var(--neo-border)!important;
  box-shadow:var(--neo-shadow);
  border-radius:18px;
  overflow:hidden;
}
.dropdown-item,.swal2-title,.swal2-html-container{color:var(--neo-text)!important}
.dropdown-item:hover,.dropdown-item:focus{background:rgba(255,255,255,.05)!important}
.modal-content{background:linear-gradient(180deg,rgba(19,31,51,.98),rgba(15,24,39,.98))!important;border:1px solid var(--neo-border)!important;border-radius:20px}
.modal-header,.modal-footer{border-color:var(--neo-border)!important}
.auth-page{min-height:100vh;background:radial-gradient(circle at top left,rgba(109,140,255,.24),transparent 34%),linear-gradient(180deg,#070b14 0%,#101827 100%)}
.auth-full-page-content{background:transparent!important}
.auth-page .auth-content,.auth-page .w-100>.d-flex{background:linear-gradient(180deg,rgba(19,31,51,.98),rgba(15,24,39,.98));border:1px solid var(--neo-border);border-radius:28px;box-shadow:var(--neo-shadow);padding:22px}
.auth-page .auth-logo .logo-txt,.auth-page h5,.auth-page label,.auth-page p,.auth-page .text-muted,.auth-page h4{color:var(--neo-text)!important}
.auth-page .social-list-item{box-shadow:none;border-radius:14px}
.counter-value{color:#fff!important;font-weight:800}
.page-title-right,.breadcrumb-item,.breadcrumb-item a{color:var(--neo-text-2)!important}
.right-bar,.rightbar-overlay,.right-bar-toggle{display:none!important}
.simplebar-content-wrapper{overscroll-behavior:contain}
[data-feather]{stroke-width:1.8}
.noti-icon .badge{top:12px;right:8px}
.bg-soft-light{background:rgba(255,255,255,.05)!important}
.bg-white,.bg-light{background:rgba(255,255,255,.03)!important;color:var(--neo-text)!important}
.text-primary{color:#c7d3ff!important}.text-success{color:#9ae6b4!important}.text-danger{color:#ff9d9d!important}
.apexcharts-text,.apexcharts-legend-text,.apexcharts-xaxis-label,.apexcharts-yaxis-label{fill:#bfd0f4!important}
.apexcharts-gridline{stroke:rgba(148,163,184,.18)!important}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(148,163,184,.28);border-radius:999px}
::-webkit-scrollbar-track{background:transparent}
@media (max-width: 991.98px){
  .navbar-brand-box{width:64px!important;min-width:64px!important;display:flex;align-items:center;justify-content:center}
  .navbar-brand-box .logo-lg{display:none!important}
  .header-item{padding:0 10px}
  .page-content{padding:14px 0 72px}
  .card .card-body{padding:1rem}
  .money-status{display:flex}
  .page-title-box{padding:0 2px}
  .page-title-box h4{font-size:20px!important}
  .vertical-menu{box-shadow:10px 0 30px rgba(0,0,0,.35)}
}
@media (max-width: 767.98px){
  body{font-size:15px;overflow-x:hidden}
  .container-fluid{padding-left:12px!important;padding-right:12px!important}
  .main-content{margin-left:0!important;width:100%!important;max-width:100%!important}
  .page-title-right{display:none!important}
  .card{border-radius:20px}
  .card .card-body{overflow:hidden}
  #sidebar-menu ul li a{margin:4px 10px;padding:12px 12px}
  h1{font-size:28px!important} h2{font-size:24px!important} h3{font-size:20px!important}

  /* FIX mobile table bị cắt, lệch và không kéo ngang được */
  .table-responsive{
    border-radius:18px;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
  }
  .table-responsive > .table,
  .table-responsive > table,
  .table-responsive .dataTables_wrapper,
  .table-responsive .dataTables_scroll{
    min-width:100%;
  }
  .table,
  .table th,
  .table td{
    font-size:13px;
    vertical-align:top;
  }
  .table.nowrap th,
  .table.nowrap td,
  .datatable.nowrap th,
  .datatable.nowrap td,
  .table .nowrap,
  .datatable .nowrap{
    white-space:normal!important;
  }
  .table code,
  .table td,
  .table th{
    word-break:break-word;
    overflow-wrap:anywhere;
  }
  .dataTables_wrapper,
  .dataTables_scrollBody,
  .dataTables_scrollHead{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .dataTables_wrapper .row{
    row-gap:.75rem;
  }
  .dataTables_wrapper .dataTables_paginate,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_length{
    text-align:left!important;
  }
  .dataTables_wrapper .pagination{
    flex-wrap:wrap;
    gap:6px;
  }

  /* FIX header mobile gọn hơn để không bị lệch */
  .navbar-header{padding-right:8px}
  .header-item{height:56px}
  #page-header-user-dropdown{
    padding:0 10px;
    min-width:auto;
  }
  .footer .text-sm-end{
    text-align:left!important;
    margin-top:6px;
  }
}


/* mobile money visibility fix */
@media (max-width: 991.98px){
  .money-status{
    display:flex!important;
    align-items:center;
    margin:0 6px 0 0!important;
    padding:6px 10px!important;
    font-size:12px!important;
    white-space:nowrap;
  }
}
@media (max-width: 767.98px){
  .money-status{
    display:inline-flex!important;
    max-width:140px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}
