/* Định nghĩa các biến màu cơ bản */
:root {
    --color-primary: #007bff; /* Màu xanh dương chủ đạo */
    --color-secondary: #6c757d; /* Màu xám chủ đạo */
    --color-success: #28a745; /* Màu xanh lá thành công */
    --color-danger: #dc3545; /* Màu đỏ nguy hiểm */
    --color-warning: #ffc107; /* Màu vàng cảnh báo */
    --color-info: #17a2b8; /* Màu xanh dương thông tin */
    --color-light: #f8f9fa; /* Màu trắng sáng */
    --color-dark: #343a40; /* Màu đen tối */
    --color-white: #ffffff; /* Màu trắng */
    --color-black: #000000; /* Màu đen */
    --color-muted: #6c757d; /* Màu xám nhạt */
    --color-gray: #868e96; /* Màu xám */
    --color-gray-dark: #343a40; /* Màu xám đậm */
    /* Thêm các biến màu khung */
    --color-border-primary: #007bff; /* Màu khung xanh dương */
    --color-border-secondary: #6c757d; /* Màu khung xám */
    --color-border-success: #28a745; /* Màu khung xanh lá */
    --color-border-danger: #dc3545; /* Màu khung đỏ */
    --color-border-warning: #ffc107; /* Màu khung vàng */
    --color-border-info: #17a2b8; /* Màu khung xanh dương nhạt */
    --color-border-light: #f8f9fa; /* Màu khung trắng sáng */
    --color-border-dark: #343a40; /* Màu khung đen tối */
    /* Thêm các biến màu nền */
    --color-bg-primary: #007bff; /* Màu nền xanh dương */
    --color-bg-secondary: #6c757d; /* Màu nền xám */
    --color-bg-success: #28a745; /* Màu nền xanh lá */
    --color-bg-danger: #dc3545; /* Màu nền đỏ */
    --color-bg-warning: #ffc107; /* Màu nền vàng */
    --color-bg-info: #17a2b8; /* Màu nền xanh dương nhạt */
    --color-bg-light: #f8f9fa; /* Màu nền trắng sáng */
    --color-bg-dark: #343a40; /* Màu nền đen tối */
}

html {
    font-family: 'Roboto', 'Helvetica', 'Arial', 'lucida', 'grande', sans-serif;
    scroll-behavior: smooth;
    font-size: 14px;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    background: #f7f7f7;
}

/* Scroll page */
::-webkit-scrollbar {
    width: 5px; /* Chiều rộng của thanh cuộn dọc */
    height: 5px; /* Chiều cao của thanh cuộn ngang */
}

/* Track */
::-webkit-scrollbar-track {
    /* Track có thể được điều chỉnh ở đây */
}

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: #888;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* table canh đều trên dưới*/
table thead th {
    vertical-align: middle;
}

table tbody td {
    vertical-align: middle;
}

.actived {
    font-weight: bold;
    color: #007bff;
    background-color: rgba(0, 123, 255, 0.1);
}

.active-admin {
    background: red;
}

/* Sticky Footer */
html, body {
    height: 100%;
}

.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content-wrapper {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
    margin-top: auto;
}