.slot {
    height: 30px; /* 🔒 LOCK: 15min = 30px */
    padding: 0 12px;

    border-radius: var(--radius-lg);

    border: var(--border-default);
    background: var(--color-input-bg-focus);

    font-size: 13px; /* giữ nguyên */
    font-weight: 500; /* giữ nguyên */

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    /* ❗ fix kỹ thuật, không đổi feel */
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);

    /* giữ nguyên feel shadow */
    box-shadow:
        0 2px 6px rgba(0,0,0,0.06),
        0 10px 22px rgba(0,0,0,0.06);
}


/* hover */
.slot:hover {
    transform: translateY(-2px);

    border-color: #cbd5f5; /* giữ nguyên màu của bạn */

    box-shadow:
        0 4px 8px rgba(0,0,0,0.08),
        0 14px 28px rgba(0,0,0,0.08);
}


/* selected */
.slot.active {
    background: #e8eefc;  /* giữ nguyên */
    border-color: #d6e0fb; /* giữ nguyên */
    color: #1e3a8a; /* giữ nguyên */

    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.1);
}


/* disabled */
.slot.disabled {
    background: #f3f4f6; /* giữ nguyên */
    color: #9ca3af; /* giữ nguyên */

    cursor: not-allowed;
    box-shadow: none;
}


/* press */
.slot:active {
    transform: scale(0.96);
}