<style>
    #isEmptyCart {display: flex; flex-direction: column;justify-content: center;align-items: center;padding: 32px 0; text-align: center;}
    .empty-header { font-size: calc(19px + (29 - 19) * ((100vw - 300px)/(1920 - 300))); text-transform: uppercase;}
    .empty-image { display: block;margin: 16px;}
    .empty-sub-header {font-size: calc(17px + (25 - 15) * ((100vw - 300px)/(1920 - 300))); font-weight: 500;margin-bottom: 16px;}
    .empty-sub-description {width: 94%;max-width: 700px; margin: 2px auto;font-size: calc(16px + (18 - 16) * ((100vw - 300px)/(1920 - 300)))}
    .return-to-shop { background-color: #0072bb; color: #fff; border-radius: 24px; cursor: pointer; user-select: none; display: block; width: fit-content; width: -moz-fit-content;padding: 12px 24px;font-weight: 500;user-select: none;margin-top: 16px;}
    .return-to-shop:hover {color: #fff; box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 50%);}
    @@media (max-width: 780px) { #isEmptyCart { border-top: 1px solid #f1f1f1;} }
</style>
<h1 class="empty-header">
    {{ __('Shopping Cart')}}
</h1>
<div class="empty-image">
    <img src="{{ asset('modules/cart/images/cart-empty.webp') }}" alt="cart-empty" class="cart-is-empty">
</div>
<div class="empty-sub-header">
    {{ __('Your Cart is currently empty!')}}
</div>
<div class="empty-sub-description">
    {{ __('Before proceed to checkout you must add some products to your shopping cart. You will find a lot of interesting products on our "shop" page') }}
</div>
<a href="{{ route('home') }}" class="return-to-shop">
    {{ __('Tiếp tục mua sắm') }}
</a>