/* --- BỐ CỤC CẢNG BIỂN QUỐC TẾ --- */
.seaport-arena {
    height: 200px;
    background: linear-gradient(180deg, #64b5f6 0%, #1e88e5 40%, #0d47a1 100%);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
    border: 4px solid #1565c0;
    border-radius: 12px;
}

/* Cầu cảng (Bên trái) */
.dock-platform {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35%;
    height: 40px;
    background: linear-gradient(90deg, #757575, #616161);
    border-top: 5px solid #bdbdbd;
    border-right: 5px solid #424242;
    z-index: 2;
}

/* Container nằm trên cầu cảng */
.container-item {
    position: absolute;
    left: 10%;
    bottom: 40px;
    font-size: 3.5rem;
    z-index: 4;
    transition: all 0.3s ease;
}
.on-dock {
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
}

/* Tàu chở hàng (Bên phải) */
.cargo-ship {
    position: absolute;
    right: 5%;
    bottom: 10px;
    font-size: 6rem;
    z-index: 3;
    transition: all 0.5s ease;
    filter: drop-shadow(-5px 5px 10px rgba(0,0,0,0.6));
}

/* Tàu dập dềnh trên sóng */
.idle-float {
    animation: wave-float 2s infinite alternate ease-in-out;
}
@keyframes wave-float {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-5px) rotate(-2deg); }
}

/* Hoạt ảnh cẩu Container lên tàu (Bay vòng cung) */
.load-to-ship {
    animation: crane-lift 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes crane-lift {
    0% { left: 10%; bottom: 40px; transform: scale(1); }
    50% { left: 45%; bottom: 120px; transform: scale(1.1); }
    100% { left: 75%; bottom: 50px; transform: scale(0.6); opacity: 0; }
}

/* Tàu nhún nhẹ khi nhận được hàng */
.receive-cargo {
    animation: ship-bump 0.5s ease-out;
}
@keyframes ship-bump {
    0% { transform: translateY(0); }
    50% { transform: translateY(10px); }
    100% { transform: translateY(0); }
}

/* Hoạt ảnh rớt hàng xuống biển khi sai */
.fall-to-sea {
    animation: drop-water 0.8s ease-in forwards;
}
@keyframes drop-water {
    0% { left: 10%; bottom: 40px; transform: rotate(0); }
    40% { left: 40%; bottom: 40px; transform: rotate(20deg); } /* Bị trượt */
    100% { left: 45%; bottom: -30px; transform: rotate(90deg) scale(0.5); opacity: 0; filter: blur(2px); } /* Rơi tọt xuống nước */
}

/* Tàu rời bến khi thắng */
.ship-leave {
    animation: ship-sail 3s ease-in forwards;
}
@keyframes ship-sail {
    0% { right: 5%; opacity: 1; }
    100% { right: -100%; opacity: 0; }
}

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