body {
    font-family: 'Roboto', sans-serif; /* Gán font cho body */
}
/* ========================================================= */
/* === PHẦN 1: MÀU SẮC GIAO DIỆN (THEME XANH NAVY ĐẬM) === */
/* ========================================================= */

/* 1. NỀN CHÍNH SIDEBAR: Xanh Navy Đậm */
html body .main-sidebar, 
html body .left-side, 
html body .wrapper {
    background-color: #152e4d !important; 
    border-right: none !important; /* Bỏ viền phải của giao diện xám cũ */
}

/* Footer cố định đáy màn hình (desktop), mobile ẩn */
html body .main-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
}

/* 2. NỀN MENU CON (Cấp 2): Tối hơn một chút để tạo chiều sâu */
html body .sidebar-menu,
html body .sidebar-menu .treeview-menu {
    background-color: #122842 !important;
}

/* 3. CHỮ LINK CHÍNH (Cấp 1) */
html body .sidebar-menu > li > a {
    color: #ecf0f1 !important; /* Trắng đục */
    background-color: transparent !important;
    border-left: 3px solid transparent !important;
}

/* 4. CHỮ LINK CON (Cấp 2) */
html body .sidebar-menu .treeview-menu > li > a {
    color: #bdc3c7 !important; /* Xám bạc */
    background-color: transparent !important;
}

/* 5. HOVER (Di chuột vào) */
html body .sidebar-menu > li:hover > a,
html body .sidebar-menu .treeview-menu > li:hover > a {
    background-color: #1e3c63 !important; /* Xanh sáng hơn nền chút */
    color: #ffffff !important;
}

/* 6. ACTIVE (Đang chọn) */
html body .sidebar-menu > li.active > a,
html body .sidebar-menu .treeview-menu > li.active > a {
    background-color: #1e3c63 !important;
    color: #ffffff !important;
    border-left-color: #4facfe !important; /* Vạch sáng xanh dương nhấn */
    font-weight: 600 !important;
}

/* 7. TIÊU ĐỀ NHÓM (HEADER) */
html body .sidebar-menu .header {
    background-color: #0d1e33 !important; /* Rất tối */
    color: #8aa4af !important;
}

/* 8. LOGO (Đổi sang nền Xanh cho đồng bộ) */
.main-header .logo {
    background-color: #152e4d !important; /* Cùng màu sidebar */
    border-bottom: 1px solid #1e3c63 !important;
    border-right: none !important;
}

.main-header .logo .logo-lg,
.main-header .logo .logo-mini {
    color: #ffffff !important; /* Chữ logo màu trắng */
    font-weight: 700 !important;
}

.main-header .logo:hover {
    background-color: #1e3c63 !important;
}

/* Cố định header trên cùng khi cuộn trang */
html body .main-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
}

/* Đẩy nội dung xuống dưới header cố định (responsive) */
@media (min-width: 768px) {
    html body .content-wrapper {
        padding-top: 50px; /* Desktop: header */
        padding-bottom: 40px; /* Chừa chỗ cho footer cố định */
    }
}

@media (max-width: 767px) {
    html body .content-wrapper {
        padding-top: 100px; /* Mobile: dư 1 chút cho header cao hơn */
        padding-bottom: 50px; /* Mobile: chừa chỗ cho footer */
    }
    /* Mobile: ẩn footer cố định */
    html body .main-footer {
        display: none !important;
    }
}


/* ========================================================= */
/* === PHẦN 2: CẤU TRÚC CUỘN & CỐ ĐỊNH (GIỮ NGUYÊN)    === */
/* ========================================================= */

/* 1. Cố định Sidebar */
html body .main-sidebar {
    position: fixed !important; 
    height: 100vh !important;
    top: 0;
    left: 0;
    padding-top: 50px !important; /* Desktop: chừa chỗ cho Header */
}

/* 2. Khu vực chứa Menu (để cuộn dọc) */
html body .main-sidebar .sidebar {
    height: calc(100vh - 50px) !important; 
    overflow-y: auto !important;   
    overflow-x: hidden !important; 
    padding-bottom: 30px; /* Tránh bị che mất mục cuối cùng */
}

/* Mobile: đẩy sidebar xuống thấp hơn để không bị header che */
@media (max-width: 767px) {
    html body .main-sidebar {
        padding-top: 100px !important;
    }
    html body .main-sidebar .sidebar {
        height: calc(100vh - 100px) !important;
    }
}

/* ========================================================= */
/* === TINH CHỈNH THANH CUỘN: MỎNG & TỆP MÀU NỀN TỐI === */
/* ========================================================= */

/* 1. Kích thước siêu mỏng (3px) */
/* Giúp thanh cuộn không chiếm diện tích và trông tinh tế hơn */
html body .main-sidebar .sidebar::-webkit-scrollbar {
    width: 3px !important; 
}

/* 2. Rãnh cuộn (Track): TRONG SUỐT */
/* Để không hiện vệt sọc dọc làm chia cắt giao diện */
html body .main-sidebar .sidebar::-webkit-scrollbar-track {
    background: transparent !important; 
}

/* 3. Con trượt (Thumb): Màu Xanh Xám Tối */
/* Màu này (#3e5871) được pha từ màu nền #152e4d nhưng sáng hơn 1 chút
   để nó "đồng màu" nhưng vẫn nhìn thấy được. */
html body .main-sidebar .sidebar::-webkit-scrollbar-thumb {
    background-color: #3e5871 !important; 
    border-radius: 10px;
    opacity: 0.7;
}

/* 4. Hiệu ứng khi di chuột vào thanh cuộn */
/* Sáng lên một chút để người dùng biết đang trỏ vào nó */
html body .main-sidebar .sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #6ea0cc !important; 
}

/* --- Hỗ trợ Firefox (Nếu dùng) --- */
html body .main-sidebar .sidebar {
    scrollbar-width: thin !important; 
    scrollbar-color: #3e5871 transparent !important;
}


/* ========================================================= */
/* === PHẦN 3: CỐ ĐỊNH CONTENT (TAB & TABLE)           === */
/* ========================================================= */

body.fixed .content-wrapper {
  display: flex !important;
  flex-direction: column !important;
}

.content-wrapper .content-header {
  flex-shrink: 0 !important;
}

.content-wrapper .row.main-content-row { 
  flex-grow: 1 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.content-wrapper .row.main-content-row .col-md-12 {
  height: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.content-wrapper .box {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

.content-wrapper .box .box-header {
  flex-shrink: 0 !important;
}

/* Khu vực bảng dữ liệu cuộn */
#tableContainer {
  flex-grow: 1 !important; 
  overflow-y: auto !important; 
  overflow-x: auto !important; 
}

/* ========================================================= */
/* === TĂNG SIZE SIDEBAR (CÓ XỬ LÝ KHI THU GỌN) === */
/* ========================================================= */

@media (min-width: 768px) {

    /* --- TRƯỜNG HỢP 1: KHI MENU ĐANG MỞ (BÌNH THƯỜNG) --- */
    /* Dùng :not(.sidebar-collapse) để chỉ áp dụng khi chưa thu gọn */

    body:not(.sidebar-collapse) .main-sidebar, 
    body:not(.sidebar-collapse) .left-side {
        width: 280px !important; /* Độ rộng tùy chỉnh */
    }

    body:not(.sidebar-collapse) .main-header .logo {
        width: 280px !important; /* Logo rộng theo menu */
    }

    body:not(.sidebar-collapse) .main-header .navbar {
        margin-left: 280px !important; /* Đẩy nút 3 gạch sang phải */
    }

    body:not(.sidebar-collapse) .content-wrapper, 
    body:not(.sidebar-collapse) .main-footer {
        margin-left: 280px !important; /* Đẩy nội dung chính sang phải */
    }

    /* --- TRƯỜNG HỢP 2: KHI MENU THU GỌN (BẤM NÚT 3 GẠCH) --- */
    /* Ép về 50px chuẩn của AdminLTE để không bị vỡ giao diện */

    body.sidebar-collapse .main-sidebar {
        width: 50px !important;
    }

    body.sidebar-collapse .main-header .logo {
        width: 50px !important;
    }

    body.sidebar-collapse .main-header .navbar {
        margin-left: 50px !important;
    }

    body.sidebar-collapse .content-wrapper, 
    body.sidebar-collapse .main-footer {
        margin-left: 50px !important;
    }

    /* --- TRƯỜNG HỢP 3: HIỆU ỨNG HOVER KHI ĐANG THU GỌN --- */
    /* (Tùy chọn: Khi menu đang đóng mà di chuột vào thì bung ra) */
    body.sidebar-collapse .main-sidebar:hover {
        width: 280px !important; 
    }
    
    /* Ẩn chữ Logo lớn khi thu gọn để tránh bị lòi ra ngoài */
    body.sidebar-collapse .logo-lg {
        display: none !important;
    }
    body.sidebar-collapse .logo-mini {
        display: block !important;
    }
}