:root{
  --brand-primary:      #4338CA;
  --brand-primary-dark: #342AA0;
  --brand-primary-light:#EEF0FF;
  --brand-accent:       #D4A954;
  --brand-rose:         #C0435D;

  --ink-900: #16181D;
  --ink-700: #3A3F4B;
  --ink-500: #6B7280;
  --ink-300: #C9CDD6;
  --ink-100: #F4F5F8;
  --surface: #FFFFFF;
  --bg-app:  #F6F7FB;

  --ok:    #16A34A;
  --warn:  #E8A400;
  --danger:#DC2626;
  --info:  #2563EB;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-md: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.06);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.14);
}

html, body{ background: var(--bg-app); }
body{
  font-family: 'Bai Jamjuree', sans-serif !important;
  color: var(--ink-900);
}
h1,h2,h3,h4,h5,h6{ font-weight: 700; color: var(--ink-900); letter-spacing: .1px; }
a{ color: var(--brand-primary); }
a:hover{ color: var(--brand-primary-dark); }
::selection{ background: var(--brand-primary-light); color: var(--brand-primary-dark); }

*{ scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
*::-webkit-scrollbar{ height: 8px; width: 8px; }
*::-webkit-scrollbar-thumb{ background: var(--ink-300); border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover{ background: var(--ink-500); }
.no-scrollbar::-webkit-scrollbar{ display:none; }

.btn{
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: .1px;
  padding: .5rem 1.05rem;
  transition: all .15s ease;
  box-shadow: none;
}
.btn:active{ transform: translateY(1px); }
.btn-sm{ border-radius: 7px; padding: .3rem .7rem; }

.btn-primary{
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}
.btn-outline-primary{ color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-outline-primary:hover{ background: var(--brand-primary); border-color: var(--brand-primary); }

.btn-success{ background: var(--ok); border-color: var(--ok); }
.btn-danger{ background: var(--danger); border-color: var(--danger); }
.btn-warning{ background: var(--warn); border-color: var(--warn); color:#fff; }
.btn-info{ background: var(--info); border-color: var(--info); color:#fff; }
.btn-secondary{ background: var(--ink-500); border-color: var(--ink-500); }

.btn-outline-secondary{ color: var(--ink-700); border-color: var(--ink-300); }
.btn-outline-secondary:hover{ background: var(--ink-100); color: var(--ink-900); border-color: var(--ink-300); }

.card{
  background-color: var(--surface);
  color: var(--ink-900);
  border: 1px solid rgba(16,24,40,.06);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card:not(.border-start):not(.border-4){ border-left: 1px solid rgba(16,24,40,.06); }
.card-header{
  background: var(--surface);
  border-bottom: 1px solid rgba(16,24,40,.06);
  font-weight: 700;
}
.card.shadow-sm{ box-shadow: var(--shadow-sm) !important; }
.card.shadow{ box-shadow: var(--shadow-md) !important; }
.card.shadow-lg{ box-shadow: var(--shadow-lg) !important; }

.form-control, .form-select{
  border-radius: var(--radius-sm);
  border-color: var(--ink-300);
  padding: .5rem .8rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .2rem rgba(67,56,202,.12);
}
.input-group-text{
  background: var(--ink-100);
  border-color: var(--ink-300);
  color: var(--ink-700);
}
label.small.fw-bold, label.fw-bold{ color: var(--ink-700); }

.badge{ font-weight: 600; border-radius: 999px; padding: .4em .75em; }
.nav-pills .nav-link{
  border-radius: 999px;
  font-weight: 600;
  color: var(--ink-700);
  margin: 0 .15rem;
}
.nav-pills .nav-link.active{
  background: var(--brand-primary) !important;
  color:#fff !important;
  box-shadow: var(--shadow-sm);
}
.nav-link-secondary.active{ background: var(--ink-700) !important; }
.nav-link-info.active{ background: var(--info) !important; }
.nav-link-primary.active{ background: var(--brand-primary) !important; }
.nav-link-success.active{ background: var(--ok) !important; }
.nav-link-warning.active{ background: var(--warn) !important; }
.nav-link-danger.active{ background: var(--danger) !important; }

.header-container{
  background: var(--surface);
  padding: .55rem 1rem;
  border-bottom: 1px solid rgba(16,24,40,.06);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
}
.header-container .nav-link{
  color: var(--ink-700);
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: .5rem .85rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.header-container .nav-link:hover{ background: var(--brand-primary-light); color: var(--brand-primary-dark); }
.header-container .nav-link i{ font-size: 1.05rem; }
.header-container .nav-link.active{
  background: var(--brand-primary-light);
  color: var(--brand-primary-dark);
}

table.table{
  --bs-table-hover-bg: var(--brand-primary-light);
}
.table thead th, table.dataTable thead th{
  background: var(--ink-100) !important;
  color: var(--ink-700);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--ink-300) !important;
  white-space: nowrap;
}
.table td{ vertical-align: middle; }
.table-hover tbody tr:hover{ background: var(--brand-primary-light); }

table.dataTable{ border-collapse: separate !important; border-spacing: 0; }
table.dataTable tbody td{ border-color: var(--ink-100); }
div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select{
  background-color: var(--surface);
  color: var(--ink-900);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink-300);
  padding: .3rem .6rem;
}
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current{
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color:#fff !important;
  border-radius: 7px;
}
div.dataTables_wrapper div.dataTables_paginate .paginate_button{
  border-radius: 7px;
  margin: 0 2px;
}

table.dataTable td.focus,
table.dataTable th.focus{
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--brand-primary) !important;
  background: var(--brand-primary-light) !important;
  position: relative;
  z-index: 2;
}
table.dataTable td.selected{
  background: rgba(67,56,202,.10) !important;
}

.modal-content{
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-header{
  border-bottom: 1px solid var(--ink-100);
}
.modal-header.bg-primary{ background: var(--brand-primary) !important; }
.modal-footer{ border-top: 1px solid var(--ink-100); }

.alert{ border: none; border-radius: var(--radius-sm); }
.alert-danger{ background: #FDE8E8; color: #9B1C1C; }
.alert-success{ background: #E7F8EE; color: #12603F; }

.text-primary{ color: var(--brand-primary) !important; }
.bg-primary{ background: var(--brand-primary) !important; }
.border-primary{ border-color: var(--brand-primary) !important; }

.border-secondary{ border-color: var(--ink-500) !important; }
.border-info{ border-color: var(--info) !important; }
.border-success{ border-color: var(--ok) !important; }
.border-warning{ border-color: var(--warn) !important; }
.border-danger{ border-color: var(--danger) !important; }

.auth-shell{
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(67,56,202,.10), transparent),
    radial-gradient(1000px 500px at 110% 110%, rgba(212,169,84,.14), transparent),
    var(--bg-app);
}
.auth-card{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.auth-brand-title{
  font-weight: 800;
  background: linear-gradient(97deg, var(--brand-primary) 10%, var(--brand-rose) 60%, var(--brand-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 768px){
  .header-container{ padding: .4rem .6rem; }
}

[data-bs-theme="dark"]{
  color-scheme: dark;

  --brand-primary:      #6C63FF;
  --brand-primary-dark: #857CFF;
  --brand-primary-light:#262A4A;
  --brand-accent:       #E0B96A;
  --brand-rose:         #E0708A;

  --ink-900: #F1F2F6;
  --ink-700: #C7CBD6;
  --ink-500: #9AA0AC;
  --ink-300: #3A3F4B;
  --ink-100: #23262E;
  --surface: #1C1E26;
  --bg-app:  #121319;

  --ok:    #22C55E;
  --warn:  #F0B429;
  --danger:#F87171;
  --info:  #60A5FA;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.45);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55);
}

[data-bs-theme="dark"] .text-dark{ color: var(--ink-900) !important; }
[data-bs-theme="dark"] .text-muted{ color: var(--ink-500) !important; }
[data-bs-theme="dark"] .bg-light{ background-color: var(--ink-100) !important; }
[data-bs-theme="dark"] .bg-white{ background-color: var(--surface) !important; }
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end{ border-color: var(--ink-300) !important; }
[data-bs-theme="dark"] hr{ border-color: var(--ink-300); opacity: .6; }

[data-bs-theme="dark"] .modal-content{
  background-color: var(--surface);
  color: var(--ink-900);
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select{
  background-color: var(--surface);
  color: var(--ink-900);
  border-color: var(--ink-300);
}
[data-bs-theme="dark"] .form-control::placeholder{ color: var(--ink-500); }
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled{ background-color: var(--ink-100); }
[data-bs-theme="dark"] .input-group-text{
  background: var(--ink-100);
  border-color: var(--ink-300);
  color: var(--ink-700);
}
[data-bs-theme="dark"] .dropdown-menu{
  background-color: var(--surface);
  border-color: var(--ink-300);
}
[data-bs-theme="dark"] .dropdown-item{ color: var(--ink-900); }
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus{
  background-color: var(--ink-100);
  color: var(--ink-900);
}
[data-bs-theme="dark"] .list-group-item{
  background-color: var(--surface);
  color: var(--ink-900);
  border-color: var(--ink-300);
}
[data-bs-theme="dark"] .alert-danger{ background: #4C1D1D; color: #FCA5A5; }
[data-bs-theme="dark"] .alert-success{ background: #14351F; color: #86EFAC; }
[data-bs-theme="dark"] table.dataTable tbody td{ border-color: var(--ink-100); }

/* Khung/hộp cứng màu trắng còn sót lại từ style.css cũ — cho theo biến để tự đổi tối */
.table-wrapper{ background: var(--surface); color: var(--ink-900); }
div.dataTables_wrapper{ color: var(--ink-900); }
div.dataTables_wrapper .dataTables_info,
div.dataTables_wrapper .dataTables_length label,
div.dataTables_wrapper .dataTables_filter label{ color: var(--ink-700); }
[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_paginate .paginate_button{
  color: var(--ink-700) !important;
  border-color: var(--ink-300) !important;
  background: transparent !important;
}
[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_paginate .paginate_button.disabled{
  color: var(--ink-500) !important;
}

.ref-bubble{ background: var(--surface); color: var(--ink-900); }

/* Khung tin nhắn (messenger pane) */
.messenger-pane{
  background-color: var(--surface);
  border-left: 1px solid var(--ink-300);
}
.pane-header{
  background-color: var(--ink-100);
  border-bottom: 1px solid var(--ink-300);
}
.pane-header h3{ color: var(--ink-900); }
.chat-item:hover{ background-color: var(--ink-100); }
.chat-name{ color: var(--ink-900); }
.last-message{ color: var(--ink-500); }

/* Icon nhỏ trên logo báo hiệu bấm để đổi chế độ sáng/tối */
#theme-toggle-logo{ position: relative; }
#theme-toggle-logo::after{
  content: '🌙';
  position: absolute;
  bottom: -2px;
  left: 24px;
  font-size: 10px;
  line-height: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-bs-theme="dark"] #theme-toggle-logo::after{ content: '☀️'; }

.center-toast-overlay{
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
}
.center-toast{
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 260px;
  max-width: min(90vw, 420px);
  padding: .9rem 1.25rem;
  background: var(--surface);
  color: var(--ink-900);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--ink-300);
  border-left: 5px solid var(--info);
  font-weight: 600;
  opacity: 0;
  transform: translateY(-10px) scale(.96);
  transition: opacity .2s ease, transform .2s ease;
}
.center-toast.show{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.center-toast .center-toast-icon{ font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.center-toast .center-toast-body{ flex: 1; word-break: break-word; }
.center-toast-success{ border-left-color: var(--ok); }
.center-toast-success .center-toast-icon{ color: var(--ok); }
.center-toast-danger{ border-left-color: var(--danger); }
.center-toast-danger .center-toast-icon{ color: var(--danger); }
.center-toast-warning{ border-left-color: var(--warn); }
.center-toast-warning .center-toast-icon{ color: var(--warn); }
.center-toast-info{ border-left-color: var(--info); }
.center-toast-info .center-toast-icon{ color: var(--info); }