*:focus {
    outline: none !important;
}
body {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
}
.form-control {
    font-size: 15px;
}
.form-control:focus {
    box-shadow: none;
    border-color: inherit;
}

a {
    text-decoration: none !important;
}

.v-center {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    transform: translateY(-50%);
    bottom: initial;
    z-index: 4;
}
.bg-login-image,
.bg-password-image {
    background-image: url(../img/bg-login-image.jpg);
}

.text-red {
    color: red!important;
}

.card-header h6 {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

.card-body iframe {
    width: 300px;
    height: 200px;
}

.card-body iframe.w_500 {
    width: 500px;
    height: 350px;
}

.card-body label {
    font-weight: 700;
    font-size: 15px;
}

.w_50 {width: 50px!important;}
.w_100 {width: 100px!important;}
.w_150 {width: 150px!important;}
.w_200 {width: 200px!important;}
.w_300 {width: 300px!important;}
.w_100_p {width: 100%!important;}

.h_80 {height: 80px!important;}
.h_100 {height: 100px!important;}
.h_150 {height: 150px!important;}
.h_200 {height: 200px!important;}

.bg_f3f3f3 {background: #f3f3f3!important;}

form.user .form-control-user,
form.user .btn-user {
    border-radius: .35rem;
}

.sidebar .nav-item .nav-link {
    padding-top: 0.6rem!important;
    padding-bottom: 0.6rem!important;
}
.sidebar .nav-item .nav-link i {
    width: 18px!important;
}

.dashboard-page .h4 {
    font-size: 16px!important;
}

.dashboard-page .h5 {
    font-size: 30px!important;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item {
    font-weight: 500!important;
}

.sidebar .nav-item .nav-link span {
    font-size: 14px!important;
    font-weight: 500!important;
}

.feature-item {
    text-align: center; /* Căn giữa nội dung */
}

.feature-item .icon img {
    width: 80px; /* Giới hạn kích thước icon */
    height: 80px;
    margin-bottom: 10px; /* Tạo khoảng cách với tiêu đề */
}

.feature-item h4 {
    font-size: 1.5rem; /* Điều chỉnh kích thước chữ */
    font-weight: bold;
    color: #333; /* Màu chữ đậm hơn */
    margin-bottom: 10px;
}

.custom-box {
    background-color: #f0f8ff; /* Màu nền */
    border: 2px solid #3498db; /* Viền màu xanh */
    border-radius: 10px; /* Bo góc */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Đổ bóng */
    padding: 10px; /* Khoảng cách bên trong */
    text-align: center; /* Căn giữa nội dung */
    font-weight: bold; /* Chữ đậm */
    color: #2c3e50; /* Màu chữ */
}
.schedule-box {
    border: 2px solid #3498db; /* Viền xanh */
    border-radius: 15px; /* Bo góc */
    background-color: #e3f2fd; /* Màu nền xanh nhạt */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hiệu ứng đổ bóng */
    transition: transform 0.3s, box-shadow 0.3s;
}

.schedule-box:hover {
    transform: scale(1.05); /* Hiệu ứng phóng to */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    background-color: #bbdefb; /* Đổi màu khi hover */
}

.schedule-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Căn giữa các khối */
    gap: 15px; /* Khoảng cách giữa các khối */
}

.schedule-box {
    width: 200px; /* Đảm bảo các khối có kích thước đồng đều */
    height: auto;
    border: 2px solid #3498db; 
    border-radius: 10px;
    background-color: #f9f9f9;
    padding: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.schedule-box {
    width: 200px; /* Giữ kích thước ổn định */
    min-height: 100px;
    margin: 10px auto;
    text-align: center;
    background-color: #f9f9f9;
    border: 2px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.schedule-box a {
    display: block;
    padding: 10px;
}

/* Container để giữ các ô lịch */
.schedule-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 20px;
}

/* Mỗi ô lịch */
.schedule-box {
    width: 180px;
    height: 120px;
    background: #f9f9f9;
    border: 2px solid #ddd;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
}

/* Khi hover vào ô */
.schedule-box:hover {
    transform: scale(1.05);
    border-color: #3498db;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Khi ô đang được chọn */
.schedule-box .nav-link.active {
    background: #3498db !important;
    color: white !important;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.5);
}

/* Hiển thị ngày */
.date {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #2c3e50;
    margin-bottom: 5px;
}

/* Hiển thị tên sự kiện */
.event-name {
    background: #e3f2fd;
    border-radius: 5px;
    padding: 8px;
    font-weight: bold;
    color: #2c3e50;
    transition: all 0.3s;
}

/* Hover làm nổi bật tên sự kiện */
.schedule-box:hover .event-name {
    background: #bbdefb;
    color: #fff;
}

/* Container giữ danh sách */
.container {
    max-width: 1200px;
    margin: auto;
}

/* Căn chỉnh các ô */
.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Mỗi ô */
.schedule-box {
    width: 100%;
    max-width: 200px;
    background: #f9f9f9;
    border: 2px solid #ddd;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
    padding: 15px;
}

/* Hover */
.schedule-box:hover {
    border-color: #3498db;
    box-shadow: 0 6px 12px rgba(52, 152, 219, 0.3);
    transform: scale(1.05);
}

/* Active */
.schedule-box .nav-link.active {
    background: #2ecc71 !important;
    color: white !important;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(46, 204, 113, 0.6);
}

/* Ngày tháng */
.date {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #2c3e50;
    margin-bottom: 5px;
}

/* Tên sự kiện */
.event-name {
    background: rgba(52, 152, 219, 0.2);
    border-radius: 5px;
    padding: 8px;
    font-weight: bold;
    color: #2c3e50;
}