.dashboard-content {
    display: flex;
    justify-content: center; /* Căn giữa theo chiều ngang */
    flex-wrap: wrap; /* Đảm bảo các ô xuống dòng khi không đủ không gian */
    padding: 20px; /* Thêm khoảng cách nếu cần */
}

.dashboard-item {
    margin: 10px; /* Khoảng cách giữa các ô */
    flex: 1 1 200px; /* Thiết lập kích thước tối thiểu cho các ô */
}
.dashboard-item {
    border-radius: 15px;
    /* padding: 20px 30px; */
    /* width: 300px; */
    text-align: center;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s, opacity 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    opacity: 0.8;
    position: relative;
    overflow: hidden;
    margin-bottom: 15px; /* Thêm khoảng cách dưới mỗi ô */
}
.dashboard-item:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
    opacity: 1;
}
.dashboard-content .col-xs-12:nth-child(1) .dashboard-item { background: rgba(255, 99, 132, 0.4); border: 2px solid rgba(255, 99, 132, 0.6); }/* Màu hồng đỏ nhạt */
.dashboard-content .col-xs-12:nth-child(2) .dashboard-item { background: rgba(54, 162, 235, 0.4); border: 2px solid rgba(54, 162, 235, 0.6); }/* Màu xanh da trời nhạt */
.dashboard-content .col-xs-12:nth-child(3) .dashboard-item { background: rgba(75, 192, 192, 0.4); border: 2px solid rgba(75, 192, 192, 0.6); }/* Màu xanh lam nhạt */
.dashboard-content .col-xs-12:nth-child(4) .dashboard-item { background: rgba(153, 102, 255, 0.4); border: 2px solid rgba(153, 102, 255, 0.6); }/* Màu tím nhạt */
.dashboard-content .col-xs-12:nth-child(5) .dashboard-item { background: rgba(255, 206, 86, 0.4); border: 2px solid rgba(255, 206, 86, 0.6); }/* Màu vàng nhạt */
.dashboard-content .col-xs-12:nth-child(6) .dashboard-item { background: rgba(231, 233, 237, 0.4); border: 2px solid rgba(231, 233, 237, 0.6); }/* Màu xám nhạt */
.dashboard-content .col-xs-12:nth-child(7) .dashboard-item { background: rgba(255, 99, 71, 0.4); border: 2px solid rgba(255, 99, 71, 0.6); } /* Màu đỏ cà chua */
.dashboard-content .col-xs-12:nth-child(8) .dashboard-item { background: rgba(100, 149, 237, 0.4); border: 2px solid rgba(100, 149, 237, 0.6); } /* Màu xanh ngô */
.dashboard-content .col-xs-12:nth-child(9) .dashboard-item { background: rgba(34, 139, 34, 0.4); border: 2px solid rgba(34, 139, 34, 0.6); } /* Màu xanh rừng */
.dashboard-content .col-xs-12:nth-child(10) .dashboard-item { background: rgba(255, 165, 0, 0.4); border: 2px solid rgba(255, 165, 0, 0.6); } /* Màu cam */
.dashboard-content .col-xs-12:nth-child(11) .dashboard-item { background: rgba(255, 20, 147, 0.4); border: 2px solid rgba(255, 20, 147, 0.6); } /* Màu hồng đậm */
.dashboard-content .col-xs-12:nth-child(12) .dashboard-item { background: rgba(75, 0, 130, 0.4); border: 2px solid rgba(75, 0, 130, 0.6); } /* Màu chàm */
.dashboard-content .col-xs-12:nth-child(13) .dashboard-item { background: rgba(255, 255, 0, 0.4); border: 2px solid rgba(255, 255, 0, 0.6); } /* Màu vàng */
.dashboard-content .col-xs-12:nth-child(14) .dashboard-item { background: rgba(128, 0, 128, 0.4); border: 2px solid rgba(128, 0, 128, 0.6); } /* Màu tím */
.dashboard-content .col-xs-12:nth-child(15) .dashboard-item { background: rgba(255, 0, 0, 0.4); border: 2px solid rgba(255, 0, 0, 0.6); } /* Màu đỏ */
.dashboard-content .col-xs-12:nth-child(16) .dashboard-item { background: rgba(0, 191, 255, 0.4); border: 2px solid rgba(0, 191, 255, 0.6); } /* Màu xanh trời đậm */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* z-index: -1; */
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* z-index: -1; */
}
#main-content{
    position: relative;
}