.chart{
            
    padding: 20px 10px ;
    padding-bottom: 30px;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

.gantt-block {
height: 100%;
}
.used {
background-color: #3c9ae7; /* Màu sử dụng */
}
.unused {
background-color: rgb(226, 152, 15); /* Màu không sử dụng */
}
.unreceived {
background-color: red; /* Màu không nhận hàng*/
}
.mantainance {
background-color: gray; /* Màu không nhận hàng*/
}
.blue-square {
    width: 30px;
    height: 30px;
    background-color: #3c9ae7;
}
.orange-square {
    width: 30px;
    height: 30px;
    background-color: rgb(226, 152, 15);
}
.red-square {
    width: 30px;
    height: 30px;
    background-color: red;
}
.gray-square {
    width: 30px;
    height: 30px;
    background-color: gray;
}
.footnote p{
    font-size: 15px;
}
.statistic-chart{
    /* border: 2px solid  rgb(226, 224, 224); */
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 0.5em 1em -0.125em #0a0a0a2f, 0 0 0 1px #0a0a0a11;
    /* color: #4a4a4a; */

}
@media screen and (max-width:992px){

    .chart p{
        font-size: 12px !important;
    }
    .blue-square,.orange-square,.red-square{
        width: 20px ;
        height: 20px ; 
    }
    .footnote p{
        margin: 0;
    }
}