/* --- BỐ CỤC TRUNG TÂM ĐIỀU PHỐI GIAO HÀNG --- */
.hub-arena {
    height: 180px;
    background: linear-gradient(180deg, #cfd8dc 0%, #90a4ae 100%);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
    border: 4px solid #546e7a;
    border-radius: 12px;
}

/* Băng chuyền con lăn (Roller Conveyor) */
.roller-belt {
    position: absolute;
    bottom: 15%;
    left: -10%;
    width: 85%;
    height: 18px;
    background: repeating-radial-gradient(circle at 10px 9px, #607d8b 0, #607d8b 8px, transparent 8px, transparent 20px),
                linear-gradient(90deg, #b0bec5, #b0bec5);
    background-size: 20px 18px, 100% 100%;
    border-bottom: 4px solid #455a64;
    border-radius: 5px;
    z-index: 2;
    animation: roll-rollers 1s linear infinite;
}
@keyframes roll-rollers {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 20px 0, 0 0; }
}

/* Chân đỡ băng chuyền */
.roller-legs {
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 50%;
    height: 15%;
    border-left: 6px solid #455a64;
    border-right: 6px solid #455a64;
    z-index: 1;
}

/* Bưu kiện (Parcel) */
.parcel-item {
    position: absolute;
    left: 5%;
    bottom: calc(15% + 18px);
    font-size: 3.5rem;
    z-index: 3;
    transition: all 0.3s ease;
}
.on-roller {
    animation: parcel-bump 0.3s infinite alternate;
}
@keyframes parcel-bump {
    0% { transform: translateY(0); }
    100% { transform: translateY(-2px); }
}

/* Xe Van giao hàng */
.delivery-van {
    position: absolute;
    right: 5%;
    bottom: 5%;
    font-size: 5.5rem;
    z-index: 4;
    transition: all 1s ease;
    filter: drop-shadow(-3px 5px 5px rgba(0,0,0,0.5));
}
.idle {
    animation: van-vibrate 0.1s infinite;
}
@keyframes van-vibrate {
    0% { transform: translateY(0); }
    100% { transform: translateY(1px); }
}

/* Hoạt ảnh bưu kiện trượt vào xe tải */
.load-to-van {
    animation: parcel-slide 0.8s ease-in forwards;
}
@keyframes parcel-slide {
    0% { left: 5%; bottom: calc(15% + 18px); transform: rotate(0) scale(1); }
    70% { left: 70%; bottom: calc(15% + 18px); transform: rotate(0) scale(1); } /* Trượt dọc con lăn */
    100% { left: 80%; bottom: 10%; transform: rotate(20deg) scale(0.5); opacity: 0; } /* Rơi vào xe */
}

/* Xe Van nháy đèn nhận hàng */
.flash-van {
    filter: drop-shadow(0 0 15px #ffca28);
}

/* Hoạt ảnh rơi bưu kiện khi sai */
.drop-parcel {
    animation: parcel-fail 0.6s ease-in forwards;
}
@keyframes parcel-fail {
    0% { left: 5%; bottom: calc(15% + 18px); transform: rotate(0); }
    70% { left: 72%; bottom: calc(15% + 18px); transform: rotate(0); } /* Trượt tới mép */
    100% { left: 75%; bottom: -20px; transform: rotate(90deg); opacity: 0; } /* Rớt xuống đất */
}

/* Báo động nhà kho rung lắc */
.shake-error { animation: hub-alarm 0.4s infinite; filter: sepia(1) hue-rotate(-50deg) saturate(3); }
@keyframes hub-alarm {
    0% { transform: translate(0) rotate(0); }
    25% { transform: translate(-3px, 3px) rotate(-1deg); }
    50% { transform: translate(3px, -3px) rotate(1deg); }
    75% { transform: translate(-3px, -3px) rotate(-1deg); }
    100% { transform: translate(0) rotate(0); }
}

/* Xe chạy đi khi thắng game */
.drive-away {
    animation: van-leave 2s ease-in forwards;
}
@keyframes van-leave {
    0% { right: 5%; }
    100% { right: -100%; opacity: 0; }
}

.min-h-75 { min-height: 90px; }