body{
    font-family: Arial;
    background-image: url("../asset/background.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    margin: 0;
    padding: 20px;
}

.container{
    width: 1000px;
    margin: 100px auto;
    background: white;
    padding: 50px;
    border-radius: 10px;
    text-align: center;
}

.menu-btn{
    display: block;
    background: #2563eb;
    color: white;
    padding: 12px;
    margin-top: 15px;
    text-decoration: none;
    border-radius: 6px;
}

.menu-btn:hover{
    background: #1e40af;
}

.badge{
    padding: 5px 10px;
    border-radius: 6px;
    color: white;
    font-size: 12px;
}

.success{
    background: green;
}

.warning{
    background: orange;
}

.danger{
    background: red;
}

table{
    border-collapse: collapse;
    margin-top: 20px;
    background: white;
}

th{
    background: #2563eb;
    color: white;
    padding: 10px;
}

td{
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

input, select{

    width: 100%;

    padding: 10px;

    margin-top: 10px;

    border-radius: 6px;

    border: 1px solid #ccc;

}

button{

    background: #2563eb;

    color: white;

    border: none;

    padding: 10px;

    margin-top: 10px;

    border-radius: 6px;

    cursor: pointer;

}

button:hover{

    background: #1e40af;

}

.tracking-card{

    background: white;

    padding: 20px;

    border-radius: 12px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    margin-top: 20px;

    animation: fadeIn 0.3s ease;

}

.status-badge{

    background: #2563eb;

    color: white;

    padding: 4px 10px;

    border-radius: 20px;

    font-size: 12px;

}

.timeline{

    margin-top: 20px;

    border-left: 3px solid #2563eb;

    padding-left: 20px;

}

.timeline li{

    list-style: none;

    margin-bottom: 20px;

    position: relative;

}

.timeline-dot{

    width: 12px;

    height: 12px;

    background: #2563eb;

    border-radius: 50%;

    position: absolute;

    left: -27px;

    top: 5px;

}

.timeline-time{

    font-size: 12px;

    color: gray;

}

.timeline-text{

    margin-top: 5px;

}

@keyframes fadeIn{

    from{

        opacity: 0;

        transform: translateY(10px);

    }

    to{

        opacity: 1;

        transform: translateY(0);

    }

}

.filter-bar{

    display: flex;

    gap: 10px;

    margin-bottom: 15px;

}

.filter-bar select{

    flex: 1;

}

.filter-bottom{

    display: flex;

    justify-content: space-between;

    align-items: center;

}