:root{
  --bg:#0E0D12;
  --bg-card:#1A1920;
  --bg-card-hover:#222128;
  --bg-sidebar:#121116;
  --border:rgba(255,255,255,.06);
  --border-light:rgba(255,255,255,.1);
  --text:#E8E6F0;
  --text-dim:rgba(232,230,240,.58);
  --text-muted:rgba(232,230,240,.34);
  --primary:#D0BCFF;
  --primary-dim:rgba(208,188,255,.10);
  --accent:#81C784;
  --danger:#F28B82;
  --warning:#FDD663;
  --radius:10px;
  --radius-lg:16px;
  --sidebar-w:220px;
  --topbar-h:56px;
  --font-body:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
}

html,body{min-height:100%;background:var(--bg)!important;color:var(--text)!important;font-family:var(--font-body)!important}
body{font-size:.875rem;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:hover{color:var(--primary);text-decoration:none}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:4px}

.wrapper{background:var(--bg)!important;min-height:100vh}
.left-side-menu{
  width:var(--sidebar-w)!important;
  background:var(--bg-sidebar)!important;
  border-right:1px solid var(--border)!important;
  box-shadow:none!important;
}
.left-side-menu .slimscroll-menu{height:100%;overflow-y:auto;padding:0 10px 14px}
.side-nav{padding:8px 0!important}
.side-nav-title{
  color:var(--text)!important;
  height:var(--topbar-h);
  line-height:var(--topbar-h)!important;
  padding:0 10px!important;
  margin:0 0 8px!important;
  border-bottom:1px solid var(--border);
  font-size:1rem!important;
  font-weight:700!important;
}
.side-nav-item{margin:1px 0!important}
.side-nav-link{
  display:flex!important;
  align-items:center;
  gap:10px;
  min-height:38px;
  padding:9px 12px!important;
  border-radius:var(--radius)!important;
  color:var(--text-dim)!important;
  font-size:.82rem!important;
  font-weight:500!important;
  transition:background .2s,color .2s!important;
}
.side-nav-link i{font-size:1.05rem!important;color:var(--text-dim)!important}
.side-nav-link:hover,
.side-nav-link:focus{
  background:var(--bg-card)!important;
  color:var(--text)!important;
}
.side-nav-link:hover i{color:var(--primary)!important}
.side-nav-second-level{
  padding:3px 0 7px 30px!important;
  background:transparent!important;
}
.side-nav-second-level li a{
  display:block;
  padding:7px 10px!important;
  border-radius:6px;
  color:var(--text-muted)!important;
  font-size:.78rem!important;
}
.side-nav-second-level li a:hover{
  background:var(--bg-card)!important;
  color:var(--text)!important;
}
.menu-arrow{color:var(--text-muted)!important}

.content-page{margin-left:var(--sidebar-w)!important;background:var(--bg)!important;min-height:100vh;max-width:100%;overflow-x:hidden}
.content{padding-top:var(--topbar-h)!important;background:var(--bg)!important;max-width:100%;overflow-x:hidden}
.navbar-custom{
  position:fixed;
  top:0;
  right:0;
  left:var(--sidebar-w);
  min-height:var(--topbar-h)!important;
  height:var(--topbar-h)!important;
  background:rgba(14,13,18,.92)!important;
  border-bottom:1px solid var(--border)!important;
  box-shadow:none!important;
  backdrop-filter:blur(14px);
  z-index:99;
}
.navbar-custom .nav-link,
.navbar-custom .button-menu-mobile{
  color:var(--text-dim)!important;
  background:transparent!important;
  border:0!important;
}
.navbar-custom .nav-link:hover,
.navbar-custom .button-menu-mobile:hover{color:var(--text)!important}
.navbar-custom .noti-icon{color:inherit!important}
.navbar-custom .nav-user{
  border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;
  padding:6px 10px!important;
  background:var(--bg-card)!important;
}
.navbar-custom .nav-user:hover,
.navbar-custom .nav-user:focus,
.navbar-custom .nav-user[aria-expanded="true"]{
  background:var(--bg-card-hover)!important;
  color:var(--text)!important;
}
.navbar-custom .nav-user:hover .account-user-name,
.navbar-custom .nav-user:focus .account-user-name,
.navbar-custom .nav-user[aria-expanded="true"] .account-user-name{color:var(--text)!important}
.navbar-custom .nav-user:hover .account-position,
.navbar-custom .nav-user:focus .account-position,
.navbar-custom .nav-user[aria-expanded="true"] .account-position{color:var(--text-dim)!important}
.account-user-name{color:var(--text)!important;font-weight:600!important;font-size:.78rem!important}
.account-position{color:var(--text-dim)!important;font-size:.68rem!important}
.account-user-avatar img{border:1px solid var(--border-light)!important}
.dropdown-menu{
  background:var(--bg-card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;
  box-shadow:0 12px 36px rgba(0,0,0,.38)!important;
}
.dropdown-header,.dropdown-item{color:var(--text-dim)!important}
.dropdown-item:hover{background:var(--bg-card-hover)!important;color:var(--text)!important}
.app-search .form-control{height:36px!important}
.app-search .btn{height:36px!important;padding:7px 14px!important}

.page-title-box{
  padding:18px 0 10px!important;
  margin:0!important;
}
.page-title{
  color:var(--text)!important;
  font-weight:700!important;
  font-size:1.15rem!important;
}
.breadcrumb{background:transparent!important}
.breadcrumb-item,.breadcrumb-item a{color:var(--text-dim)!important}
.breadcrumb-item.active{color:var(--text)!important}
.container-fluid,.content>.row{color:var(--text)!important}

.card,.layui-card,.list-group-item{
  background:var(--bg-card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--radius-lg)!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
.card-header,.card-footer,.layui-card-header{
  background:transparent!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
  font-weight:600!important;
}
.card-body,.layui-card-body{color:var(--text-dim)!important}
.card-title,.card h1,.card h2,.card h3,.card h4,.card h5,.card h6{color:var(--text)!important}
.text-muted{color:var(--text-dim)!important}
.list-group-item{border-radius:0!important;border-left:0!important;border-right:0!important}
.widget-flat .widget-icon{border-radius:10px!important}

label{color:var(--text)!important;font-weight:500!important}
small,.form-text{color:var(--text-dim)!important}
input.form-control,
textarea.form-control,
select.form-control,
.layui-input,
.layui-select,
.layui-textarea{
  background:var(--bg-card)!important;
  border:1.5px solid var(--border)!important;
  color:var(--text)!important;
  border-radius:var(--radius)!important;
  font-size:.85rem!important;
  box-shadow:none!important;
}
input.form-control,
select.form-control,
.layui-input,
.layui-select{height:42px!important}
textarea.form-control,.layui-textarea{min-height:96px}
input.form-control:hover,
textarea.form-control:hover,
select.form-control:hover,
.layui-input:hover,
.layui-textarea:hover{border-color:var(--border-light)!important;background:var(--bg-card-hover)!important}
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
.layui-input:focus,
.layui-textarea:focus{
  border-color:var(--primary)!important;
  box-shadow:0 0 0 3px rgba(208,188,255,.1)!important;
  outline:none!important;
}
.form-control::placeholder,
.layui-input::placeholder,
.layui-textarea::placeholder{color:rgba(232,230,240,.25)!important}
.input-group-text{
  background:var(--bg-card-hover)!important;
  border-color:var(--border)!important;
  color:var(--text-dim)!important;
}
select.form-control option{background:#1A1920!important;color:var(--text)!important}

.layui-form-select .layui-edge{display:none!important}
.layui-form-select .layui-select-title{position:relative!important}
.layui-form-select .layui-select-title:after{
  content:'';
  position:absolute;
  right:14px;
  top:50%;
  width:14px;
  height:14px;
  transform:translateY(-50%);
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23D0BCFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
}
.layui-form-select .layui-select-title .layui-input{padding-right:38px!important;cursor:pointer!important}
.layui-form-select dl{
  background:#1A1920!important;
  border:1px solid var(--border-light)!important;
  border-radius:var(--radius)!important;
  box-shadow:0 12px 36px rgba(0,0,0,.42)!important;
}
.layui-form-select dl dd,
.layui-form-select dl dt{
  background:#1A1920!important;
  color:var(--text-dim)!important;
  border-bottom:1px solid var(--border)!important;
}
.layui-form-select dl dd:hover{background:#24222B!important;color:var(--text)!important}
.layui-form-select dl dd.layui-this{background:#352D48!important;color:var(--primary)!important}

.btn,.layui-btn,button.layui-btn,span.layui-btn{
  border-radius:var(--radius)!important;
  border:1.5px solid var(--border-light)!important;
  background:var(--bg-card)!important;
  color:var(--text-dim)!important;
  box-shadow:none!important;
}
.btn:hover,.layui-btn:hover{background:var(--bg-card-hover)!important;color:var(--text)!important;border-color:var(--border-light)!important}
.btn-primary,.layui-btn-normal{background:rgba(208,188,255,.18)!important;border-color:var(--primary)!important;color:var(--primary)!important}
.btn-success{background:rgba(129,199,132,.16)!important;border-color:rgba(129,199,132,.45)!important;color:var(--accent)!important}
.btn-danger{background:rgba(242,139,130,.15)!important;border-color:rgba(242,139,130,.45)!important;color:var(--danger)!important}
.btn-warning{background:rgba(253,214,99,.15)!important;border-color:rgba(253,214,99,.45)!important;color:var(--warning)!important}
.btn-info{background:rgba(129,212,250,.15)!important;border-color:rgba(129,212,250,.45)!important;color:#81D4FA!important}
.btn-outline-primary,.btn-outline-success,.btn-outline-danger,.btn-outline-warning,.btn-outline-info,.btn-outline-secondary{background:transparent!important}

.table,.layui-table{
  background:var(--bg-card)!important;
  color:var(--text-dim)!important;
}
.table th,.table td,
.layui-table th,.layui-table td{
  border-color:var(--border)!important;
  color:var(--text-dim)!important;
  background:var(--bg-card)!important;
}
.table thead th,.layui-table th,.layui-table thead tr{
  color:var(--text)!important;
  background:#15141B!important;
}
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th,
.layui-table tr:hover td{background:#24222B!important;color:var(--text)!important}
.layui-table-box,
.layui-table-header,.layui-table-body,.layui-table-main,.layui-table-page,.layui-table-view,.layui-table-tool,
.layui-table-cell,.layui-table-init{background:var(--bg-card)!important;color:var(--text-dim)!important}
.layui-table img,
.table img,
.img-thumbnail,
.img-rounded,
.img-circle{
  background:var(--bg-card-hover)!important;
  border-color:var(--border-light)!important;
}
.layui-table img:hover,
.table img:hover,
.img-thumbnail:hover{
  background:var(--bg-card-hover)!important;
  border-color:var(--primary)!important;
  filter:none!important;
}
.table tbody tr,
.layui-table tbody tr,
.table tbody tr td,
.layui-table tbody tr td{
  transition:background .15s,color .15s,border-color .15s!important;
}
.table tbody tr:hover,
.layui-table tbody tr:hover,
.layui-table-hover{
  background:#24222B!important;
}
.table tbody tr:hover td,
.table tbody tr:hover th,
.layui-table tbody tr:hover td,
.layui-table tbody tr:hover th,
.layui-table-hover td,
.layui-table-hover th{
  background:#24222B!important;
  color:var(--text)!important;
}
.table tbody tr:hover a,
.layui-table tbody tr:hover a,
.table tbody tr:hover span:not(.layui-btn):not(.badge):not(.layui-badge):not(.layui-badge-dot),
.layui-table tbody tr:hover span:not(.layui-btn):not(.badge):not(.layui-badge):not(.layui-badge-dot){
  color:var(--text)!important;
}
.table tbody tr:hover img,
.layui-table tbody tr:hover img{
  background:#2A2831!important;
  filter:none!important;
  opacity:1!important;
}
.layui-table-cell{
  height:auto!important;
  min-height:28px!important;
  line-height:1.55!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.layui-table-cell .layui-btn,
.table .layui-btn,
.table .btn{
  margin:2px!important;
  white-space:nowrap!important;
}
.layui-table-page,
.layui-laypage,
.layui-laypage *{
  box-sizing:border-box!important;
}
.layui-laypage a,
.layui-laypage span,
.layui-laypage input,
.layui-laypage button{
  background:var(--bg-card)!important;
  border-color:var(--border)!important;
  color:var(--text-dim)!important;
}
.layui-laypage a:hover,
.layui-laypage button:hover{
  background:var(--bg-card-hover)!important;
  color:var(--text)!important;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em{
  background:#5E63E6!important;
}
.layui-laypage .layui-laypage-curr em{
  color:#fff!important;
}
.layui-laypage input:focus{
  border-color:var(--primary)!important;
}

.pagination,
.pagination ul{background:transparent!important}
.pagination li,
.pagination a,
.pagination span,
.page-link,
.page-item .page-link{
  background:var(--bg-card)!important;
  border-color:var(--border)!important;
  color:var(--text-dim)!important;
  box-shadow:none!important;
}
.pagination a:hover,
.pagination span:hover,
.page-link:hover,
.page-item .page-link:hover{
  background:var(--bg-card-hover)!important;
  border-color:var(--border-light)!important;
  color:var(--text)!important;
}
.pagination .active a,
.pagination .active span,
.page-item.active .page-link{
  background:#5E63E6!important;
  border-color:#5E63E6!important;
  color:#fff!important;
}
.pagination input,
.pagination .form-control{
  background:var(--bg-card)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}

.layui-layer{
  background:var(--bg-card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.46)!important;
}
.layui-layer-title{background:transparent!important;color:var(--text)!important;border-color:var(--border)!important}
.layui-layer-content{color:var(--text-dim)!important}
.layui-layer-btn{border-top:1px solid var(--border)!important}
.layui-layer-btn a{background:var(--bg-card)!important;border-color:var(--border-light)!important;color:var(--text-dim)!important;border-radius:var(--radius)!important}
.layui-layer-btn .layui-layer-btn0{background:rgba(208,188,255,.18)!important;color:var(--primary)!important;border-color:var(--primary)!important}
.layui-elem-quote{
  background:var(--bg-card)!important;
  border-color:var(--border)!important;
  border-left:3px solid var(--primary)!important;
  color:var(--text-dim)!important;
  border-radius:var(--radius)!important;
}
.layui-badge,.layui-badge-dot{background-color:var(--danger)!important}

.footer{
  background:transparent!important;
  color:var(--text-muted)!important;
  border-top:1px solid var(--border)!important;
}
.footer a{color:var(--text-dim)!important}

body.enlarged .sidebar,
.enlarged .wrapper .sidebar{
  width:var(--sidebar-w)!important;
}

.content > .row,
.content .row[style*="width: 98%"]{
  width:auto!important;
  margin-left:24px!important;
  margin-right:24px!important;
}
.content > .row + .row,
.content > .row:not([style*="width: 98%"]){
  margin-left:24px!important;
  margin-right:24px!important;
}
.content .col-xl-4,
.content .col-xl-8,
.content .col-xl-6,
.content .col-xl-12{
  min-width:0!important;
}
.content .row{
  min-width:0!important;
}
.content .card{
  min-width:0!important;
  max-width:100%!important;
}

.admin-dashboard{
  align-items:stretch!important;
}
.admin-dashboard > [class*="col-"],
.admin-dashboard .row > [class*="col-"]{
  min-width:0!important;
}
.admin-dashboard .card{
  overflow:hidden!important;
}
.admin-dashboard .card > .btn{
  max-width:100%;
  white-space:normal!important;
}
.admin-dashboard .widget-flat .card-body{
  min-height:94px;
}
.admin-dashboard .widget-icon{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:42px!important;
  height:42px!important;
  line-height:42px!important;
  box-shadow:none!important;
}
.admin-dashboard h5{
  overflow-wrap:anywhere;
}

@media(max-width:1199.98px){
  .admin-dashboard > .col-xl-4,
  .admin-dashboard > .col-xl-8{
    flex:0 0 100%!important;
    max-width:100%!important;
  }
  .content .col-xl-4,
  .content .col-xl-8,
  .content .col-xl-6{
    flex:0 0 100%!important;
    max-width:100%!important;
  }
  .content .col-lg-6[style*="width: 50%"],
  .content .col-md-6[style*="width: 50%"],
  .content .col-sm-6[style*="width: 50%"]{
    width:100%!important;
    flex:0 0 100%!important;
    max-width:100%!important;
  }
}

body.admin-login{
  min-height:100vh;
  background:#0E0D12!important;
}
body.admin-login #LAY-user-login{
  background:#0E0D12!important;
  min-height:100vh;
  display:flex!important;
  align-items:center;
  justify-content:center;
  padding:24px;
}
body.admin-login #LAY-user-login:before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 18% 20%, rgba(208,188,255,.16), transparent 28%),
    radial-gradient(circle at 82% 72%, rgba(129,199,132,.10), transparent 26%);
  pointer-events:none;
}
body.admin-login .layadmin-user-login-main{
  position:relative;
  background:var(--bg-card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.45)!important;
  opacity:1!important;
}
body.admin-login .FontColor{
  background:none!important;
  -webkit-text-fill-color:var(--text)!important;
  color:var(--text)!important;
  font-weight:700;
  letter-spacing:0;
}
body.admin-login .layadmin-user-login-header p,
body.admin-login .layadmin-user-login-other,
body.admin-login .layadmin-user-login-footer{color:var(--text-dim)!important}
body.admin-login .layadmin-user-login-icon{color:var(--primary)!important}
body.admin-login #submit_login{background:rgba(208,188,255,.18)!important;border-color:var(--primary)!important;color:var(--primary)!important}
body.admin-login .layadmin-link{color:var(--primary)!important}
body.admin-login .layadmin-user-login-codeimg{border-radius:var(--radius);border:1px solid var(--border)}

@media(max-width:900px){
  .content > .row,
  .content .row[style*="width: 98%"],
  .content > .row + .row,
  .content > .row:not([style*="width: 98%"]){
    margin-left:12px!important;
    margin-right:12px!important;
  }
  .app-search{
    display:none!important;
  }
  .navbar-custom .topbar-right-menu{
    position:absolute;
    right:8px;
    top:0;
  }
  .navbar-custom .nav-user{
    max-width:150px;
  }
  .account-user-name,
  .account-position{
    max-width:92px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .admin-dashboard .card{
    border-radius:12px!important;
  }
}

@media(max-width:560px){
  .content > .row,
  .content .row[style*="width: 98%"],
  .content > .row + .row,
  .content > .row:not([style*="width: 98%"]){
    margin-left:8px!important;
    margin-right:8px!important;
  }
  .page-title-right{
    display:none!important;
  }
  .admin-dashboard .card-body{
    padding:16px!important;
  }
  .admin-dashboard .card > .btn{
    display:block!important;
    width:100%;
  }
}