{{-- Renewal Button Component --}}
<div class="bg-gray-50 hover:bg-gray-100 rounded-lg p-4 text-center cursor-pointer transition-colors duration-200 border border-gray-200 hover:border-orange-300"
    @click="showNotification('{{ __('Chức năng đang phát triển') }}', 'info')">
    <div class="flex flex-col items-center">
        <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mb-3">
            <svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        </div>
        <span class="text-sm font-medium text-gray-700">{{ __('Đổi Port Remote') }}</span>
    </div>
</div>