/* ============================================================
   THEME TOI (nen den / chu trang / tab CHA vang / tab CON trang)  +  BO CUC MOBILE
   Nap toan cuc trong _Root.cshtml / _AccountRoot.cshtml.

   Chia 2 tang:
     A) THEME MAU  -> AP DUNG MOI MAN HINH (ca may tinh) : chi doi MAU, khong doi bo cuc.
     B) BO CUC MOBILE (<=992px)             : xep doc, nut to cham de, an widget GPU, bang cuon ngang.

   Nguyen tac chong loi:
     - O nhap lieu GIU nen TRANG (chu den) -> luon de doc.
     - Dropdown (select2/chosen) nen trang -> chu TOI (tranh chu trang tren trang).
   ============================================================ */

:root {
    --m-bg: #0d0d0d;        /* nen den */
    --m-bg2: #1a1a1a;       /* nen the/box */
    --m-bg3: #232323;       /* nen phu (header bang...) */
    --m-line: #333;         /* duong vien */
    --m-text: #f2f2f2;      /* chu trang */
    --m-muted: #aaa;        /* chu phu */
    --m-yellow: #f57c00;    /* CAM (thay vang) - mau nhan dien duy nhat cua san pham */
    --m-yellow-d: #111;     /* chu tren nen cam (nut) */
}

/* =====================================================================
   ============  A) THEME MAU  -  AP DUNG MOI MAN HINH  =================
   ===================================================================== */

/* ---- 1) Nen + chu toan trang ---- */
body, .wrapper, .content-wrapper, .content {
    background: var(--m-bg) !important;
    color: var(--m-text) !important;
}
.content-header > h1 { color: var(--m-text) !important; }
.content-header > h1 > small { color: var(--m-muted) !important; }
.content-header .breadcrumb { background: transparent !important; }
.content-header .breadcrumb > li > a,
.content-header .breadcrumb > .active { color: var(--m-muted) !important; }

h1, h2, h3, h4, h5, h6, label, p, dt, dd,
.box-title, .control-label, .form-group > label {
    color: var(--m-text);
}
/* td/th/li: chu sang, NHUNG khong dung trong dropdown trang (xu ly rieng ben duoi) */
.content td, .content th, .box li, .content-wrapper > .content li { color: var(--m-text); }
a { color: #6cb2ff; }
hr { border-top-color: var(--m-line); }

/* Box / card: nen toi, vach vang nhan dien */
.box {
    background: var(--m-bg2) !important;
    border: 1px solid var(--m-line) !important;
    border-top-color: var(--m-yellow) !important;
    border-radius: 10px;
    box-shadow: none;
}
.box-header { color: var(--m-text) !important; border-bottom: 1px solid var(--m-line); }
.box-header .box-title { color: var(--m-text) !important; font-weight: 600; }
.box-body, .box-footer { background: transparent !important; color: var(--m-text) !important; }
.box-footer { border-top: 1px solid var(--m-line); }
.nav-tabs-custom, .info-box, .small-box, .well, .panel, .callout {
    background: var(--m-bg2) !important; color: var(--m-text) !important;
    border-color: var(--m-line) !important;
}
.panel-body, .panel-heading { background: transparent !important; color: var(--m-text) !important; }
.nav-tabs > li > a { color: var(--m-muted) !important; }
.nav-tabs > li.active > a { background: var(--m-bg2) !important; color: var(--m-yellow) !important; border-color: var(--m-line) var(--m-line) transparent !important; border-top: 3px solid var(--m-yellow) !important; }
.nav-tabs { border-bottom-color: var(--m-line) !important; }

/* DIỆT NỀN TRẮNG: AdminLTE .nav-tabs-custom > .tab-content trắng mặc định + mọi panel */
.nav-tabs-custom, .nav-tabs-custom > .tab-content, .tab-content,
.panel, .panel-default, .panel-primary, .panel-body, .panel-heading, .panel-footer,
.box-primary, .content-wrapper > .content, .tungTracklist {
    background: var(--m-bg2) !important; color: var(--m-text) !important; border-color: var(--m-line) !important;
}
.panel-heading, .panel-primary > .panel-heading { color: var(--m-text) !important; border-bottom: 1px solid var(--m-line) !important; }
.panel { box-shadow: none !important; }

/* GOM NÚT về 2 màu: hành động chính = CAM; phụ = tối; chỉ giữ ĐỎ cho Xoá/Trở lại (tín hiệu) */
.btn-warning, .btn-info, .btn-orange { background: var(--m-yellow) !important; border-color: var(--m-yellow) !important; color: #111 !important; font-weight: 600; }
.btn-warning:hover, .btn-info:hover { background: #d96f00 !important; border-color: #d96f00 !important; color: #111 !important; }
.label-warning, .badge-warning { background-color: var(--m-yellow) !important; color: #111 !important; }
.label-info, .badge-info { background-color: var(--m-yellow) !important; color: #111 !important; }
a { color: var(--m-yellow); }   /* link cam cho đồng bộ (thay xanh) */

/* ======================================================================
   ÉP GIAO DIỆN TỐI TOÀN DIỆN (đồng bộ 1 màu chữ, rà 1 lần dứt điểm)
   Áp cho vùng nội dung + modal. Chữ SÁNG, nền TỐI, ô nhập TRẮNG, link/nút CAM.
   ====================================================================== */
/* 1) Chữ SÁNG đồng bộ (diệt chữ đen chìm nền) */
.content-wrapper, .modal-content,
.content-wrapper p, .content-wrapper span, .content-wrapper div, .content-wrapper td, .content-wrapper th,
.content-wrapper label, .content-wrapper li, .content-wrapper h1, .content-wrapper h2, .content-wrapper h3,
.content-wrapper h4, .content-wrapper h5, .content-wrapper h6, .content-wrapper b, .content-wrapper strong,
.content-wrapper small, .content-wrapper dt, .content-wrapper dd, .content-wrapper caption, .content-wrapper legend,
.modal-content p, .modal-content span, .modal-content div, .modal-content td, .modal-content th,
.modal-content label, .modal-content li, .modal-content h1, .modal-content h2, .modal-content h3,
.modal-content h4, .modal-content b, .modal-content strong {
    color: var(--m-text) !important;
}
/* 2) Link = CAM */
.content-wrapper a, .modal-content a { color: var(--m-yellow) !important; }
/* 3) NÚT giữ màu riêng (specificity cao hơn + đặt sau -> thắng quy tắc chữ sáng) */
.content-wrapper .btn, .content-wrapper .btn span, .content-wrapper .btn b, .content-wrapper .btn i, .content-wrapper .btn small,
.modal-content .btn, .modal-content .btn span, .modal-content .btn i { color: inherit !important; }
.btn-primary, .btn-success, .btn-warning, .btn-info { color: #111 !important; }
.btn-default { color: var(--m-text) !important; }
.btn-danger { color: #fff !important; }
/* 4) Nhãn/badge trạng thái — PHỦ MỌI BIẾN THỂ Bootstrap (secondary/primary/info... trước đây lọt lưới -> ra khối xám/trắng).
   Mặc định nền tối; chỉ 3 tín hiệu giữ màu đặc: xanh=xong, đỏ=lỗi, cam=đang chờ/thông tin. */
.content-wrapper .badge, .content-wrapper .label,
.modal-content .badge, .modal-content .label {
    background-color: var(--m-bg3) !important; color: var(--m-text) !important;
    border: 1px solid var(--m-line) !important; font-weight: 600;
}
.badge-secondary, .label-default, .badge-default,
.content-wrapper .badge-secondary, .content-wrapper .badge-default {
    background-color: var(--m-bg3) !important; color: var(--m-text) !important; border-color: var(--m-line) !important;
}
.badge-warning, .label-warning, .badge-info, .label-info, .badge-primary, .label-primary,
.content-wrapper .badge-warning, .content-wrapper .badge-info, .content-wrapper .badge-primary {
    background-color: var(--m-yellow) !important; color: #111 !important; border-color: var(--m-yellow) !important;
}
.badge-success, .label-success, .content-wrapper .badge-success { background-color: #1f7a3d !important; color: #fff !important; border-color: #1f7a3d !important; }
.badge-danger,  .label-danger,  .content-wrapper .badge-danger  { background-color: #a12b2b !important; color: #fff !important; border-color: #a12b2b !important; }

/* Lớp helper bg-* của Bootstrap/AdminLTE (nút "Auto" dùng .bg-warning ra màu kem) */
.bg-warning, .bg-info, .bg-primary { background-color: var(--m-yellow) !important; color: #111 !important; }
.bg-success { background-color: #1f7a3d !important; color: #fff !important; }
.bg-danger  { background-color: #a12b2b !important; color: #fff !important; }
.bg-light, .bg-white, .bg-gray, .bg-gray-light { background-color: var(--m-bg2) !important; color: var(--m-text) !important; }
.badge-light { background-color: var(--m-bg3) !important; color: var(--m-text) !important; }  /* _Root dinh nghia badge-light=#f8f9fa trang */

/* ---- Bootstrap components con sinh khoi SANG (phu 1 lan cho moi trang) ---- */
.content-wrapper .alert, .modal-content .alert { background-color: var(--m-bg3) !important; color: var(--m-text) !important; border-color: var(--m-line) !important; }
.content-wrapper .alert-success { border-left: 4px solid #1f7a3d !important; }
.content-wrapper .alert-danger  { border-left: 4px solid #a12b2b !important; }
.content-wrapper .alert-warning, .content-wrapper .alert-info { border-left: 4px solid var(--m-yellow) !important; }
.content-wrapper .card, .content-wrapper .card-header, .content-wrapper .card-body, .content-wrapper .card-footer,
.content-wrapper .panel-default, .content-wrapper .panel-default > .panel-heading,
.content-wrapper .list-group-item, .content-wrapper .jumbotron, .content-wrapper .thumbnail {
    background-color: var(--m-bg2) !important; color: var(--m-text) !important; border-color: var(--m-line) !important;
}
.content-wrapper .progress, .content-wrapper .progress-bar { background-color: var(--m-bg3) !important; }
.content-wrapper .progress-bar { background-color: var(--m-yellow) !important; color: #111 !important; }
.popover, .popover-body, .popover-content { background-color: var(--m-bg2) !important; color: var(--m-text) !important; border-color: var(--m-line) !important; }
.input-group-addon { background-color: var(--m-bg3) !important; color: var(--m-text) !important; border-color: var(--m-line) !important; }

/* ---- Class RIENG cua tung trang (dinh nghia trong <style> view, khong the diet bang [style]) ---- */
.ag-card, .ag-job { background: var(--m-bg2) !important; border-color: var(--m-line) !important; color: var(--m-text) !important; }
.ag-note { background: var(--m-bg3) !important; border-color: var(--m-line) !important; color: var(--m-text) !important; }
.ag-bar { background: var(--m-bg3) !important; border-color: var(--m-line) !important; }
#ai_result { background: var(--m-bg2) !important; border-color: var(--m-line) !important; color: var(--m-text) !important; }
.box.active { background: var(--m-bg3) !important; }
.col_config_sub { background: var(--m-bg2) !important; color: var(--m-text) !important; border: 1px solid var(--m-line) !important; }

/* Header bảng: diệt nền sáng #f5f7fa (đặt inline trong 1 số view) — !important thắng vì view không có !important */
.content-wrapper table thead th, .content-wrapper .table thead th,
.content-wrapper .grid-cell, .content-wrapper thead .grid-cell {
    background-color: var(--m-bg3) !important; color: var(--m-text) !important; border-color: var(--m-line) !important;
}
/* icon thao tác trong bảng giữ màu riêng (xanh/đỏ) */
.content-wrapper td .fa, .content-wrapper td .glyphicon, .content-wrapper a .fa { color: inherit; }
/* 5) DIỆT nền trắng (kể cả inline style) */
.content-wrapper [style*="background:#fff"], .content-wrapper [style*="background: #fff"],
.content-wrapper [style*="background:#FFF"], .content-wrapper [style*="background: #FFF"],
.content-wrapper [style*="background-color:#fff"], .content-wrapper [style*="background-color: #fff"],
.content-wrapper [style*="background:white"], .content-wrapper [style*="background: white"],
.content-wrapper [style*="background-color:white"], .content-wrapper [style*="background-color: white"],
/* các hex sáng khác hay gặp trong view (ô info xanh nhạt, ô tổng vàng nhạt, cột disabled xám) */
.content-wrapper [style*="background:#f0f7ff"], .content-wrapper [style*="background: #f0f7ff"],
.content-wrapper [style*="background:#fffbea"], .content-wrapper [style*="background: #fffbea"],
.content-wrapper [style*="background:#fffbe6"], .content-wrapper [style*="background: #fffbe6"],
.content-wrapper [style*="background:#f5f5f5"], .content-wrapper [style*="background: #f5f5f5"],
.content-wrapper [style*="background:#f8f9fa"], .content-wrapper [style*="background: #f8f9fa"],
.content-wrapper [style*="background:#f5f7fa"], .content-wrapper [style*="background: #f5f7fa"],
.content-wrapper [bgcolor] {
    background-color: var(--m-bg2) !important;
}
/* 6) Chữ đen inline -> sáng */
.content-wrapper [style*="color:#000"], .content-wrapper [style*="color: #000"],
.content-wrapper [style*="color:#333"], .content-wrapper [style*="color: #333"],
.content-wrapper [style*="color:#222"], .content-wrapper [style*="color: #222"],
.content-wrapper [style*="color:black"], .content-wrapper [style*="color: black"] {
    color: var(--m-text) !important;
}
/* 4b) MODAL kho (nhạc/video/ảnh/2D): đầu modal hết TRẮNG, đồng bộ tối tinh tế */
.modal-content { background: var(--m-bg2) !important; color: var(--m-text) !important; border: 1px solid var(--m-line) !important; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.6) !important; }
.modal-header { background: var(--m-bg3) !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 12px 12px 0 0; padding: 14px 18px; }
.modal-header .modal-title, .modal-title, .modal-header h4 { color: var(--m-text) !important; font-weight: 600; }
.modal-header .close, .modal-header button.close { color: var(--m-text) !important; opacity: .8; text-shadow: none; font-size: 26px; }
.modal-header .close:hover { opacity: 1; color: var(--m-yellow) !important; }
.modal-body, .modal-footer { background: var(--m-bg2) !important; }
.modal-footer { border-top: 1px solid var(--m-line) !important; }
.modal .box, .modal .panel, .modal .panel-body, .modal .well { background: var(--m-bg3) !important; border-color: var(--m-line) !important; }
/* diệt nền/chữ trắng inline BÊN TRONG modal (modal nằm ngoài .content-wrapper) */
.modal [style*="background:#fff"], .modal [style*="background: #fff"],
.modal [style*="background-color:#fff"], .modal [style*="background-color: #fff"],
.modal [style*="background:white"], .modal [style*="background: white"], .modal [bgcolor] { background-color: var(--m-bg2) !important; }
.modal [style*="color:#000"], .modal [style*="color: #000"], .modal [style*="color:#333"], .modal [style*="color: #333"], .modal [style*="color:black"] { color: var(--m-text) !important; }

/* 7) Ô NHẬP / SELECT luôn nền TRẮNG chữ ĐEN (đặt CUỐI để thắng mọi rule trên -> luôn đọc được) */
.content-wrapper input, .content-wrapper textarea, .content-wrapper select,
.modal-content input, .modal-content textarea, .modal-content select {
    background-color: #2a2a2a !important; color: var(--m-text) !important; border-color: var(--m-line) !important;
}
.content-wrapper ::placeholder, .modal-content ::placeholder { color: #8a8a8a !important; opacity: 1; }
.content-wrapper input[type=checkbox], .content-wrapper input[type=radio],
.modal-content input[type=checkbox], .modal-content input[type=radio] { background: transparent !important; }
/* link trong NỘI DUNG = TRẮNG đồng bộ (cam chỉ dành cho nút + menu) */
.content-wrapper a, .modal-content a { color: var(--m-text) !important; }
.content-wrapper a:hover, .modal-content a:hover { color: var(--m-yellow) !important; }
.content-wrapper a.btn, .modal-content a.btn { color: inherit !important; }

/* ---- 2) HEADER mau den, chu sang (widget GPU van hien tren may tinh) ---- */
.main-header, .main-header .navbar { background: #000 !important; }
.main-header .logo { background: #000 !important; color: #fff !important; }
.main-header .logo:hover { background: #000 !important; }
.main-header .sidebar-toggle { color: #fff !important; }
.main-header .sidebar-toggle:hover { background: rgba(255,255,255,.08) !important; }
.navbar-notification .skin_config > a { color: #fff !important; }
.navbar-custom-menu .fa-gears, .navbar-custom-menu .fa-gear { color: #fff !important; }
/* Widget GPU tren header: chu sang de doc tren nen den (may tinh) */
.navbar_marquee, #div_gpu_info, #gpu_info { color: #fff !important; }
#div_gpu_info .btn_reload { background: var(--m-yellow) !important; color: #111 !important; border: none; border-radius: 6px; padding: 4px 10px; font-weight: 600; }
#div_gpu_info input#setup_time_reload { background: #fff !important; color: #222 !important; border: 1px solid var(--m-line); border-radius: 4px; width: 48px; }

/* ---- 3) SIDEBAR: nen den, tab CHA khoi VANG, tab CON chu TRANG ---- */
.main-sidebar, .sidebar, .left-side { background: #000 !important; }
.sidebar-menu { background: #000 !important; }
/* muc user (profile) giu toi, KHONG vang */
.sidebar-menu.sidebar-menu-user > li > a { background: #111 !important; color: #fff !important; }
.sidebar-menu.sidebar-menu-user .info > span,
.sidebar-menu.sidebar-menu-user .info { color: #fff !important; }
/* TAB CHA: CHỈ chữ CAM đậm, KHÔNG khối màu (theo yêu cầu: bỏ khối, nổi chữ) */
.sidebar-menu > li.treeview:not(#menu_profile) > a {
    background: transparent !important;
    color: var(--m-yellow) !important;
    font-weight: 700 !important;
    border-left: 3px solid transparent !important;
    margin: 0; border-radius: 0;
}
.sidebar-menu > li.treeview:not(#menu_profile) > a .fa,
.sidebar-menu > li.treeview:not(#menu_profile) > a > span,
.sidebar-menu > li.treeview:not(#menu_profile) > a .pull-right-container > .fa {
    color: var(--m-yellow) !important;
}
.sidebar-menu > li.treeview:not(#menu_profile) > a:hover { background: rgba(245,124,0,.08) !important; }
/* TAB CON: chữ xám sáng; ĐANG CHỌN = chữ CAM + vạch trái cam, KHÔNG khối nền */
.sidebar-menu .treeview-menu { background: #000 !important; padding-left: 0; }
.sidebar-menu .treeview-menu > li > a { color: #ddd !important; }
.sidebar-menu .treeview-menu > li > a > .fa { color: #888 !important; }
.sidebar-menu .treeview-menu > li > a:hover { background: transparent !important; color: var(--m-yellow) !important; }
.sidebar-menu .treeview-menu > li > a:hover > .fa { color: var(--m-yellow) !important; }
.sidebar-menu .treeview-menu > li.active > a {
    background: transparent !important;
    color: var(--m-yellow) !important;
    font-weight: 600;
    border-left: 3px solid var(--m-yellow) !important;
}
.sidebar-menu .treeview-menu > li.active > a > .fa { color: var(--m-yellow) !important; }
/* ÉP mọi nền li/submenu về ĐEN, XOÁ mọi khối màu (skin-blue lẫn khối cũ) */
.main-sidebar .sidebar-menu > li,
.main-sidebar .sidebar-menu > li.active,
.main-sidebar .sidebar-menu > li.menu-open,
.main-sidebar .sidebar-menu > li:hover,
.main-sidebar .sidebar-menu > li > a,
.main-sidebar .sidebar-menu > li > .treeview-menu,
.main-sidebar .sidebar-menu .treeview-menu,
.main-sidebar .sidebar-menu .treeview-menu > li,
.main-sidebar .sidebar-menu .treeview-menu > li.active,
.skin-blue .sidebar-menu .treeview-menu > li.active > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
    background-color: transparent !important;
}
.main-sidebar, .main-sidebar .sidebar, .main-sidebar .sidebar-menu { background-color: #000 !important; }
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a { border-left-color: transparent !important; }

/* ---- 4) BANG DU LIEU: mau toi ---- */
table.dataTable, .table { background: transparent !important; }
.table > thead > tr > th, .table > tbody > tr > th, table.dataTable thead th {
    background: var(--m-bg3) !important; color: var(--m-text) !important; border-color: var(--m-line) !important;
}
.table > tbody > tr > td, table.dataTable tbody td { color: var(--m-text) !important; border-color: var(--m-line) !important; }
.table > tbody > tr, table.dataTable tbody tr { background: transparent !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,.03) !important; }
.table-hover > tbody > tr:hover { background: rgba(245,197,24,.08) !important; }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th { border-color: var(--m-line) !important; }
.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate { color: var(--m-text) !important; }
.dataTables_filter label, .dataTables_length label { color: var(--m-text) !important; }
.pagination > li > a { background: var(--m-bg2); color: var(--m-text); border-color: var(--m-line); }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > span {
    background: var(--m-yellow) !important; color: #111 !important; border-color: var(--m-yellow) !important;
}
/* So trang (TRUOC / 1 / TIEP): chu CAM noi khoi nen den.
   Dung tien to 'body' de SPECIFICITY CAO HON CDN DataTables (.dataTables_wrapper .dataTables_paginate .paginate_button{color:#333!important}) -> thang chac, khong phu thuoc thu tu nap. */
/* THUC TE: dataTables.material render so trang bang <button class="mdl-button"> (KHONG phai .paginate_button).
   MDL button mac dinh chu den rgb(0,0,0) -> chim tren nen den. Ep CAM. (Giu them .paginate_button cho cac grid khac.) */
body .dataTables_paginate .pagination .mdl-button,
body .dataTables_paginate .mdl-button,
body .dataTables_wrapper .dataTables_paginate .paginate_button,
body .dataTables_paginate a { color: #ffa726 !important; }
/* trang hien tai (mdl-button--colored, nen xanh) -> giu chu trang cho de doc */
body .dataTables_paginate .mdl-button.mdl-button--colored,
body .dataTables_paginate .mdl-button.mdl-button--raised,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current { color: #fff !important; }
/* nut disabled (Truoc / …) -> cam mo */
body .dataTables_paginate .mdl-button.disabled,
body .dataTables_paginate .mdl-button[disabled] { color: #8a6a2a !important; }
/* hover so trang */
body .dataTables_paginate .mdl-button:hover { color: #fff !important; background: var(--m-bg3) !important; }

/* ---- 5) MODAL: nen toi ---- */
.modal-content { background: var(--m-bg2) !important; color: var(--m-text) !important; border: 1px solid var(--m-line); }
.modal-header { border-bottom-color: var(--m-line); }
.modal-header .modal-title { color: var(--m-text) !important; }
.modal-header .close { color: var(--m-text) !important; opacity: .9; text-shadow: none; }
.modal-footer { border-top-color: var(--m-line); }

/* ---- 6) FORM: o nhap NEN TOI chu SANG (theo yeu cau: khong con khoi trang) ---- */
.form-control, textarea, input[type="text"], input[type="number"], input[type="email"],
input[type="tel"], input[type="password"], input[type="search"], select {
    background: #2a2a2a !important; color: var(--m-text) !important; border: 1px solid var(--m-line) !important;
}
.form-control::placeholder, textarea::placeholder, input::placeholder { color: #8a8a8a !important; opacity: 1; }
.input-group-addon { background: var(--m-bg3) !important; color: var(--m-text) !important; border-color: var(--m-line) !important; }

/* select2/chosen: o chon NEN TOI, chu SANG */
.select2-container .select2-selection--multiple,
.select2-container .select2-selection--single { min-height: 36px; background: #2a2a2a !important; border-color: var(--m-line) !important; }
/* CHIP (tag) trong multi-select: nen toi + chu SANG (truoc trang de chu -> nuot ten danh muc) */
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: #3a4a5a !important; border: 1px solid var(--m-line) !important; color: #e8eef5 !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #bcd0e6 !important; margin-right: 5px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--m-text) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #999 transparent transparent transparent !important; }
.select2-selection__placeholder { color: #8a8a8a !important; }
.chosen-container-single .chosen-single { background: #2a2a2a !important; color: var(--m-text) !important; }

/* ---- 6b) DROPDOWN NEN TOI chu SANG, dong dang chon = CAM ---- */
.select2-dropdown, .select2-results, ul.select2-results__options,
.chosen-drop, .chosen-container .chosen-results, .dropdown-menu { background: #1e1e1e !important; border-color: var(--m-line) !important; }
.select2-results__option, .select2-search__field,
.chosen-results li, .dropdown-menu > li > a { color: var(--m-text) !important; }
.select2-search__field { background: #2a2a2a !important; }
.select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.chosen-container .chosen-results li.highlighted,
.dropdown-menu > .active > a, .dropdown-menu > li > a:hover {
    background-color: var(--m-yellow) !important; color: #111 !important;
}

/* ---- 7) NUT: chinh (primary/success) = VANG cho dong bo theme ---- */
.btn-primary, .btn-success {
    background: var(--m-yellow) !important; border-color: var(--m-yellow) !important; color: #111 !important; font-weight: 600;
}
.btn-primary:hover, .btn-success:hover { background: #e0b40f !important; border-color: #e0b40f !important; color: #111 !important; }
.btn-default { background: var(--m-bg3) !important; color: var(--m-text) !important; border-color: var(--m-line) !important; }
.btn-default:hover { background: #2e2e2e !important; color: #fff !important; }

/* ---- 8) Anh/video khong tran khung ---- */
img, video, canvas, iframe { max-width: 100%; }
.img-thumbnail, .thumbnail { background: var(--m-bg2); border-color: var(--m-line); }

/* ---- 9) Trang DANG NHAP ---- */
body.login-page { background: var(--m-bg) !important; }
.login-box-body, .register-box-body { background: var(--m-bg2) !important; color: var(--m-text) !important; border: 1px solid var(--m-line); border-radius: 10px; }
.login-logo a, .login-box-msg { color: var(--m-text) !important; }

/* =====================================================================
   ============  B) BO CUC MOBILE  -  CHI KICH HOAT <= 992px  ===========
   ===================================================================== */
@media (max-width: 992px) {
    body, .wrapper, .content-wrapper, .content { overflow-x: hidden; max-width: 100%; }
    .content { padding: 8px !important; }
    .content-header { padding: 10px 8px !important; }
    .content-header > h1 { font-size: 20px; }
    .box { margin-bottom: 10px; }
    .box-body, .box-footer { padding: 10px; }

    /* Header gon + AN widget GPU (gay tran/vo layout tren dien thoai) */
    .main-header, .main-header .navbar { min-height: 50px; }
    .main-header .logo { font-size: 16px !important; border-bottom: 1px solid var(--m-yellow); }
    .navbar_marquee, #div_gpu_info { display: none !important; }
    .main-header .sidebar-toggle { padding: 15px !important; font-size: 18px; }

    /* Sidebar: overlay muot */
    .main-sidebar, .sidebar { z-index: 1030; }
    .sidebar-menu > li.treeview:not(#menu_profile) > a { padding: 13px 12px !important; }
    .sidebar-menu .treeview-menu > li > a { font-size: 14px; padding: 12px 10px 12px 36px !important; }

    /* Bang: cuon NGANG thay vi vo layout */
    .box-body, .dataTables_wrapper, .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    table.dataTable, .table { min-width: 640px; }
    .dataTables_scrollBody { overflow-x: auto !important; }
    .dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
        float: none !important; text-align: left !important; margin: 4px 0 !important;
    }
    .dataTables_filter input { width: 100%; margin: 4px 0 0 !important; }
    .pagination > li > a { padding: 8px 12px; }

    /* Modal gan full man hinh */
    .modal-dialog { width: auto !important; margin: 8px !important; }
    .modal-body { max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .modal-body .row > [class*="col-"] { width: 100%; float: none; }
    .modal-footer .btn { margin-bottom: 4px; }

    /* Form: moi o vua khung, xep doc */
    .form-control, .select2-container, textarea, input[type="text"],
    input[type="number"], input[type="email"], input[type="tel"], select {
        width: 100% !important; max-width: 100%; box-sizing: border-box;
    }
    .form-group.row > [class*="col-"] { width: 100%; float: none; margin-bottom: 6px; }
    label.col-form-label, .col-sm-2.col-form-label, .col-sm-3.col-form-label {
        width: 100%; text-align: left !important; padding-bottom: 2px;
    }
    .form-inline .form-group { display: block; margin-bottom: 6px; }
    .select2-dropdown { max-width: 92vw; }
    .chosen-container { width: 100% !important; }

    /* Nut & vung cham: to vua ngon tay */
    .btn { padding: 9px 14px; font-size: 14px; min-height: 40px; }
    .btn-xs { padding: 6px 9px; min-height: 32px; }
    .btn_menu { margin: 4px 6px 4px 0; }
    .btn-group-vertical > .btn, .btn-block { width: 100%; }
    a.btn, button.btn { touch-action: manipulation; }
    td a .glyphicon, td a .fa { font-size: 18px; padding: 2px 4px; }

    /* Anh xem thu vua khung */
    img, video, canvas, iframe { height: auto; }

    /* Login vua man hinh */
    .login-box, .register-box { width: 94%; margin: 5vh auto; }
}

/* =====================================================================
   ============  C) TRAU CHUOT GIAO DIEN (20/08/2026)  ==================
   Chi lam DEP: bo goc, do bong, hieu ung chuyen, vien khi chon o nhap,
   thanh cuon toi. KHONG doi bo cuc, KHONG doi mau nhan dien.
   Mau nhan dien duy nhat: CAM #f57c00 (bien --m-yellow).
   ===================================================================== */

/* 1) Nut: chuyen muot + hover CAM DAM (truoc day hover ra VANG #e0b40f, lech mau nhan dien) */
.btn { transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary:hover, .btn-success:hover { background: #d96f00 !important; border-color: #d96f00 !important; color: #111 !important; }
.btn-primary:focus, .btn-success:focus, .btn-warning:focus, .btn-default:focus, .btn-danger:focus {
    outline: none !important; box-shadow: 0 0 0 3px rgba(245,124,0,.30) !important;
}

/* 2) O nhap: thay doi vien khi dang go (truoc day khong co dau hieu nao) */
.form-control:focus, textarea:focus, select:focus,
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, input[type="password"]:focus, input[type="search"]:focus {
    border-color: var(--m-yellow) !important;
    box-shadow: 0 0 0 3px rgba(245,124,0,.18) !important;
    outline: none !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--open .select2-selection--single {
    border-color: var(--m-yellow) !important; box-shadow: 0 0 0 3px rgba(245,124,0,.18) !important;
}

/* 3) Bang: dong dang tro chuot doi sang sac CAM cho dong bo (truoc day la vang #f5c518) */
.table-hover > tbody > tr:hover, table.dataTable tbody tr:hover { background: rgba(245,124,0,.10) !important; }
.table > thead > tr > th, table.dataTable thead th {
    font-weight: 600; letter-spacing: .2px; border-bottom: 2px solid var(--m-line) !important;
}

/* 4) The/khung: bo goc va do bong nhe cho co chieu sau */
.box, .nav-tabs-custom, .panel, .well { border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.35) !important; }
.box-header { padding: 12px 15px; }
.box-header .box-title { letter-spacing: .2px; }

/* 5) Tieu de trang */
.content-header > h1 { font-weight: 600; letter-spacing: .2px; }

/* 6) Thanh cuon hop nen toi (truoc day la thanh cuon sang mac dinh, choi mat) */
* { scrollbar-color: #4a4a4a #151515; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #151515; }
::-webkit-scrollbar-thumb { background: #3d3d3d; border-radius: 6px; border: 2px solid #151515; }
::-webkit-scrollbar-thumb:hover { background: #f57c00; }

/* 7) Boi den chu: nen cam mo */
::selection { background: rgba(245,124,0,.35); color: #fff; }

/* 8) Anh dai dien tren menu trai: chu cai dau trong vong tron CAM (truoc day la anh nguoi la tai san) */
.sidebar-menu-user .hg-avatar {
    width: 45px; height: 45px; border-radius: 50%;
    background: linear-gradient(135deg, #f57c00 0%, #c85f00 100%);
    color: #111 !important; font-weight: 700; font-size: 19px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,.18);
}

/* 9) Logo tren tieu de: khong bi bop meo khi thu gon menu */
.main-header .logo img { max-width: 100%; object-fit: contain; }

/* 10) CHAN TRANG: truoc day nen SANG (#f2f2f2 trong oze.css) -> mot vach trang chay ngang
   duoi cung giao dien toi, nhin lem nhem. Nay nen toi dong bo, hai dau ro rang. */
.main-footer {
    background: var(--m-bg2) !important;
    background-color: var(--m-bg2) !important;
    border-top: 1px solid var(--m-line) !important;
    border-left: 1px solid var(--m-line) !important;
    color: var(--m-muted) !important;
    padding: 12px 18px !important;
    font-size: 12.5px;
    text-align: left !important;
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.main-footer strong { color: #cfcfcf !important; font-weight: 600; }
.main-footer .hg-foot-brand {
    float: none !important; color: var(--m-yellow) !important;
    font-weight: 700; letter-spacing: .6px; font-size: 11.5px; text-transform: uppercase;
}
.main-footer a { color: var(--m-yellow) !important; }
@media (max-width: 992px) {
    .main-footer { justify-content: center; text-align: center !important; padding: 10px 12px !important; }
}


/* 11) NUT THAO TAC TRONG BANG (Xem / Sua / Xoa) — truoc day la glyphicon TRAN dinh sat nhau,
   moi cai mot mau, nhin tho. Nay: nut vuong cung co, co khoang cach, mau chi doi khi re chuot. */
.hg-act {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-right: 6px;
    border-radius: 7px; border: 1px solid var(--m-line);
    background: var(--m-bg3); color: #cfcfcf !important;
    font-size: 14px; text-decoration: none !important;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.hg-act:last-child { margin-right: 0; }
.hg-act > .fa { color: inherit !important; }
.hg-act:hover { background: rgba(245,124,0,.18); border-color: var(--m-yellow); color: var(--m-yellow) !important; }
.hg-act.hg-act-del:hover { background: rgba(200,50,50,.20); border-color: #c33; color: #ff7676 !important; }