* {
    margin: 0;
    padding: 0;
}
/* Shopee top bar */
.top-bar {
    background: #f53d2d;
    color: white;
    font-size: 14px;
    padding: 6px 0;
}

    .top-bar a {
        color: white;
        text-decoration: none;
        margin-right: 15px;
    }

/* Main header */
.shopee-header {
    background: #f53d2d;
    padding: 15px 0;
}

.shopee-search input {
    border-radius: 0;
    border: none;
}

.shopee-search button {
    background: #fb5533;
    border: none;
    color: white;
}

    .shopee-search button:hover {
        opacity: .9;
    }

.btn-search {
    width: 110px;
}
/* Category bar */
.category-bar {
    background: white;
    font-size: 16px;
    border-bottom: 1px solid #eee;
}

    .category-bar a {
        padding: 12px 20px;
        display: inline-block;
        text-decoration: none;
        color: #333;
    }

        .category-bar a:hover {
            color: #f53d2d;
        }



/* Category Icon Grid */
.category-item {
    transition: all .2s;
    cursor: pointer;
}

    .category-item:hover {
        transform: translateY(-3px);
    }

    .category-item img {
        width: 70px;
        height: 70px;
        object-fit: cover;
    }

/* Shopee Product Card */
.product-card {
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .2s;
    cursor: pointer;
}

    .product-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,.1);
        transform: translateY(-3px);
    }

    .product-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1; /* vuông */
        object-fit: cover;
    }

.product-title {
    height: 38px;
    overflow: hidden;
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.price {
    font-size: 18px;
    color: #ee4d2d;
    font-weight: bold;
}

.sold {
    font-size: 12px;
    color: #999;
}

/* Flash sale */
.flash-item img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

@media (max-width: 576px) {
    .col-sm-6, .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-lg-2 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .col-md-3 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .col-lg-2 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-lg-2 {
        flex: 0 0 16.6667%;
        max-width: 16.6667%;
    }
}
/* =======================
   TOAST (PURE CSS)
   ======================= */
.cart-toast {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #333;
    color: white;
    padding: 12px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 99999;
}

    /* Khi hiện lên */
    .cart-toast.show {
        opacity: 1;
        transform: translateY(0);
    }

    /* Kiểu màu */
    .cart-toast.success {
        background-color: #28a745; /* xanh */
    }

    .cart-toast.info {
        background-color: #17a2b8; /* xanh nhạt */
    }

    .cart-toast.warning {
        background-color: #f0ad4e; /* vàng */
    }

    .cart-toast.danger {
        background-color: #dc3545; /* đỏ */
    }