.blinking-text {
    animation: blink 1s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.chulon {
    font-size: 27px;
}

.no-border {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0px;
    margin: 0px;
    
}

/* Áp dụng cho các dropdown Chosen */
.chosen-container .chosen-single {
    height: 38px;
    padding: 0.375rem 0.75rem;  /*/giống Bootstrap /*/
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: #fff;
    font-size: 1rem;
    line-height: 1.5;
    box-shadow: none;
}

    /* Hover và focus */
    .chosen-container-active.chosen-with-drop .chosen-single,
    .chosen-container .chosen-single:hover {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }

/* Kết quả xổ xuống */
.chosen-container .chosen-results {
    font-size: 1rem;
}

/* Để .chosen giống .form-control về chiều rộng */
.chosen-container {
    width: 100% !important;
}


/* Căn lề và chiều rộng site con */
.Canlesite { 
    width: 2500px;  /*Đặt chiều rộng tùy ý */
    margin: 10px auto;  /*Để căn giữa nội dung */
    padding-left: 20px;  /*Thêm lề bên trái */
}

body {
    margin: 0;
    padding: 0;
}

/*Thứ tự của margin là margin: top right bottom left
*/
.site-container {
    width: 100%;
    overflow: auto;
    margin: 5px 0px 5px 0px;
}

.site-content {
    margin: 5px 0px 5px 20px;  /*Để căn lề bên trái cách mép màn hình 20px */
    width: calc(100% - 40px);  /*Trừ đi margin để cân nhắc cho thanh trượt */
}


#searchInput {
    border: 1px solid #2ECC71 !important;  /*Màu viền khi không hover và không focus */
}

    #searchInput:hover {
        border: 1px solid #2ECC71 !important;  /*Màu viền khi hover (đưa chuột vào) */
    }

    #searchInput:focus {
        border: 1px solid #2ECC71 !important;  /*Màu viền khi focus (ô input được chọn) */
        border-color: #2c3e50;
        outline: 0;
        box-shadow: none;  /*Loại bỏ box-shadow khi input được focus */
    }

    #searchInput:active {
        border: 1px solid #2c3e50 !important;  /*Màu viền khi active (đã click) */
    }


.div-class {
    margin: 10px 0px 10px 0px;
    height: 35px;
}

thead input {
    width: 100%;
}

.header-color {
    background-color: #2ECC71;
    color: white;
    vertical-align: central !important; /* Căn giữa theo chiều dọc */
    text-align: center;
}

/* Thu nhỏ kích thước của phần "Show entries" */
.dataTables_length {
    font-size: 14px;  
    margin-top: 5px
}
 /*Thu nhỏ kích thước và điều chỉnh vị trí của các phần chứa số trang và nút điều hướng */
.dataTables_paginate, .dataTables_info {
    font-size: 14px;  
    margin-top: 0px;  
    margin-bottom: 5px;  
}

     /*Thu nhỏ kích thước của ô vuông chứa số trang */
    .dataTables_paginate .paginate_button {
        padding: 2px 2px 2px 2px;  
        background-color: #2ECC71;  
    }

         /*Thu nhỏ kích thước của ô vuông khi hover hoặc được chọn */
        .dataTables_paginate .paginate_button.current, .dataTables_paginate .paginate_button:hover {
            padding: 5px;   
        }

         /*Thu nhỏ kích thước của ô vuông chứa số trang hiện tại */
        .dataTables_paginate .paginate_button.current {
            padding: 5px;  /*Điều chỉnh padding */
        }
.button-group {
    display: flex;
    gap: 10px; /* Khoảng cách giữa các button */
}


.table-active {
    background-color: #f5f5f5; /* Màu nền cho dòng được chọn */
    /* Tùy chỉnh các thuộc tính khác nếu cần thiết */
}

/*Highlight cho gridview*/
.highlight { 
    transition: background-color 0.3s ease;
}

/* Áp dụng kiểu cho link tô đậm */
.nav-link.active {
    font-weight: bold; /* Tô đậm chữ */
    /* Hoặc các kiểu tùy chọn khác để tô đậm, ví dụ: */
    /* color: #ff0000; */
    /* background-color: #f4f4f4; */
}

#loading {
    display: none; /* Ẩn khi không sử dụng */
    position: fixed; /* Sử dụng vị trí cố định trên màn hình */
    top: 50%; /* Đặt ở giữa chiều cao của màn hình */
    left: 50%; /* Đặt ở giữa chiều rộng của màn hình */
    transform: translate(-50%, -50%); /* Dịch chuyển để căn giữa hoàn hảo */
    z-index: 1500; /* Đảm bảo nó nằm trên các phần tử khác */
}