:root {
    --primary-color: #585858;
    --secondary-color: #4c4c4c;
}

/* Back Button with btn-outline-secondary class */
.btn.btn-outline-secondary.me-3 {
    margin-top: 20px;
}

/* Container for back button */
.d-flex.align-items-center.mb-3 {
    margin-top: 20px;
    padding-top: 10px;
}

/* Mobile responsive for back buttons */
@media (max-width: 768px) {
    .btn.btn-outline-secondary.me-3 {
        margin-top: 15px;
        padding: 8px 16px;
        font-size: 14px;
    }
    
    .d-flex.align-items-center.mb-3 {
        margin-top: 15px;
        padding-top: 8px;
    }
}

/* Hero Section - Dược liệu Theme */
.hero-section {
    background: linear-gradient(135deg, #f0f8f0 0%, #e8f5e8 30%, #ffffff 70%, #f8fffe 100%);
    padding: 10px 0;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="herbs" width="50" height="50" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%234a7c59" opacity="0.1"/><circle cx="10" cy="10" r="0.5" fill="%232d5016" opacity="0.05"/><circle cx="40" cy="40" r="0.8" fill="%234a7c59" opacity="0.08"/></pattern></defs><rect width="100" height="100" fill="url(%23herbs)"/></svg>');
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-block;
    background: linear-gradient(135deg, #4a7c59 0%, #2d5016 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(74, 124, 89, 0.3);
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    font-weight: 300;
    color: #2d5016;
    margin-bottom: 0.5rem;
    line-height: 1.1;
    letter-spacing: -1px;
}

.hero-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #4a7c59;
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
}

.hero-description {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    max-width: 500px;
}

.hero-features {
    margin-bottom: 1.5rem;
}

.hero-feature {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #4a7c59;
}

.hero-feature i {
    margin-right: 0.5rem;
    font-size: 0.8rem;
    color: #4a7c59;
}

.hero-price {
    font-size: 2.2rem;
    font-weight: 300;
    color: #2d5016;
    margin-bottom: 0.3rem;
    letter-spacing: -1px;
}

.hero-original-price {
    font-size: 1rem;
    color: #999;
    text-decoration: line-through;
    margin-bottom: 0.8rem;
    font-weight: 300;
}

.hero-expiry {
    font-size: 0.8rem;
    color: #4a7c59;
    margin-bottom: 1.5rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(74, 124, 89, 0.1);
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    display: inline-block;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.hero-btn-primary {
    background: #4a7c59;
    color: white;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-btn-primary:hover {
    background: #3a6b47;
    color: white !important;
    text-decoration: none;
}

.hero-btn-secondary {
    background: transparent !important;
    color: #4a7c59;
    padding: 0.8rem 1.5rem;
    border: 1px solid #4a7c59 !important;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-btn-secondary:hover {
    background: #4a7c59;
    color: white !important;
    text-decoration: none;
}

.hero-image-container {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(74, 124, 89, 0.15);
}

.hero-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

/* Section Styles */
.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    font-weight: 300;
    color: #2d5016;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #4a7c59;
    margin-bottom: 4rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.3px;
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.view-more-link {
    color: #4a7c59;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #4a7c59;
    padding-bottom: 2px;
}

.view-more-link:hover {
    color: #2d5016;
    border-bottom-color: #2d5016;
    text-decoration: none;
}

/* Product Card - Dược liệu Theme */
.product-card {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(74, 124, 89, 0.06);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid #e8f5e8;
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Ensure all product images are full width */
.product-card * {
    box-sizing: border-box;
}

.product-card img {
    width: 100% !important;
    height: 250px !important;
    max-width: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Fix Bootstrap grid issues */
.col-lg-3,
.col-md-6 {
    padding-left: 15px;
    padding-right: 15px;
}

.product-card {
    margin: 0;
    padding: 10px;
    width: 100%;
    max-width: 100%;
}

.product-link {
    width: 100%;
    max-width: 100%;
    display: block;
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(74, 124, 89, 0.12);
    border-color: #4a7c59;
}

/* Store Feature Cards */
.store-feature-card {
    background: white;
    border-radius: 0;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
}

.store-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff6b35, #f7931e);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.store-feature-card:hover::before {
    transform: scaleX(1);
}

.store-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.store-feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

.store-feature-card:hover .store-feature-icon {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    transform: scale(1.1);
}

.store-feature-icon i {
    font-size: 2rem;
    color: #666;
    transition: color 0.3s ease;
}

.store-feature-card:hover .store-feature-icon i {
    color: white;
}

.store-feature-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.store-feature-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.store-feature-link {
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

.store-feature-link:hover {
    color: #ff6b35;
    border-bottom-color: #ff6b35;
    text-decoration: none;
}

.product-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.product-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.product-link:hover {
    text-decoration: none;
    color: inherit;
}

.product-image {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: #f8f9fa;
    padding: 0;
    margin: 0;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
    margin: 0;
    padding: 0;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.discount-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #4a7c59 0%, #2d5016 100%);
    color: white;
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 1px 4px rgba(74, 124, 89, 0.3);
}

.product-info {
    padding: 1rem;
}

.product-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: #2d5016;
    margin-bottom: 0.6rem;
    line-height: 1.3;
    letter-spacing: 0.2px;
    font-family: 'Playfair Display', serif;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-price {
    margin-bottom: 0.5rem;
}

.current-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d5016;
    letter-spacing: -0.5px;
}

.original-price {
    font-size: 0.8rem;
    color: #999;
    text-decoration: line-through;
    margin-left: 0.6rem;
    font-weight: 400;
}

.product-sales {
    font-size: 0.7rem;
    color: #4a7c59;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* Add to Cart Button for Home Products */
.product-action {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f0f0f0;
}

.btn-add-cart-home {
    background: linear-gradient(135deg, #4a7c59, #2d5016);
    border: none;
    border-radius: 3px;
    color: white;
    padding: 0.4rem 0.8rem;
    font-size: 0.7rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    justify-content: center;
    width: 100%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(74, 124, 89, 0.2);
    position: relative;
    overflow: hidden;
}

.btn-add-cart-home:hover {
    background: linear-gradient(135deg, #2d5016, #1a3d0a);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3);
}

.btn-add-cart-home:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(74, 124, 89, 0.2);
}






/* Review Cards */
.review-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 25px rgba(74, 124, 89, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    border: none;
    position: relative;
}

.review-card::before {
    content: '"';
    position: absolute;
    top: 20px;
    left: 30px;
    font-size: 4rem;
    color: #e8f5e8;
    font-family: 'Playfair Display', serif;
    font-weight: 300;
    line-height: 1;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(74, 124, 89, 0.15);
}

.reviewer-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d5016;
    margin-bottom: 1rem;
    letter-spacing: 0.3px;
    font-family: 'Playfair Display', serif;
}

.review-text {
    font-size: 0.95rem;
    color: #4a7c59;
    line-height: 1.6;
    font-style: italic;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.2px;
}



/* Trust Badges */
.trust-badges {
    background: linear-gradient(135deg, #f8fffe 0%, #e8f5e8 100%);
    padding: 3rem 0;
    border-top: 1px solid #e8f5e8;
    border-bottom: 1px solid #e8f5e8;
}

.trust-badge {
    text-align: center;
    padding: 1rem;
}

.trust-badge i {
    font-size: 2.5rem;
    color: #4a7c59;
    margin-bottom: 1rem;
}

.trust-badge h6 {
    color: #2d5016;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.trust-badge p {
    color: #4a7c59;
    font-size: 0.8rem;
    margin: 0;
}

/* Mobile Trust Badges - Ultra Compact Design */
@media (max-width: 768px) {
    .trust-badges {
        padding: 0.6rem 0;
        background: linear-gradient(135deg, #f8fffe 0%, #e8f5e8 100%);
    }

    .trust-badges .container {
        padding: 0 0.05rem;
    }

    .trust-badges .row {
        margin: 0;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0.03rem;
    }

    .trust-badges .row::-webkit-scrollbar {
        display: none;
    }

    .trust-badges .col-6 {
        padding: 0.01rem;
        flex: 0 0 24%;
        max-width: 24%;
        min-width: 24%;
    }

    .trust-badge {
        border-radius: 2px;
        padding: 0.1rem 0.03rem;
        margin: 0;
        border: 1px solid rgba(74, 124, 89, 0.05);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 28px;
        white-space: nowrap;
        background: rgba(255, 255, 255, 0.8);
        box-sizing: border-box;
    }

    .trust-badge i {
        font-size: 0.35rem;
        color: #4a7c59;
        margin-bottom: 0.03rem;
    }

    .trust-badge h6 {
        color: #2d5016;
        font-weight: 600;
        margin-bottom: 0.01rem;
        font-size: 0.3rem;
        line-height: 1.0;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
    }

    .trust-badge p {
        color: #4a7c59;
        font-size: 0.22rem;
        margin: 0;
        line-height: 1.0;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
    }
}

/* Extra small mobile devices */
@media (max-width: 576px) {
    .trust-badges {
        padding: 0.4rem 0;
    }

    .trust-badges .container {
        padding: 0 0.02rem;
    }

    .trust-badges .row {
        gap: 0.01rem;
    }

    .trust-badges .col-6 {
        padding: 0.005rem;
        flex: 0 0 24%;
        max-width: 24%;
        min-width: 24%;
    }

    .trust-badge {
        padding: 0.08rem 0.02rem;
        min-height: 24px;
        border-radius: 2px;
    }

    .trust-badge i {
        font-size: 0.3rem;
        margin-bottom: 0.03rem;
    }

    .trust-badge h6 {
        font-size: 0.25rem;
        margin-bottom: 0.01rem;
    }

    .trust-badge p {
        font-size: 0.18rem;
    }
}

/* Very small mobile devices */
@media (max-width: 480px) {
    .trust-badges {
        padding: 0.3rem 0;
    }

    .trust-badges .container {
        padding: 0 0.01rem;
    }

    .trust-badges .row {
        gap: 0.005rem;
    }

    .trust-badges .col-6 {
        padding: 0.002rem;
        flex: 0 0 23.5%;
        max-width: 23.5%;
        min-width: 23.5%;
    }

    .trust-badge {
        padding: 0.06rem 0.015rem;
        min-height: 22px;
        border-radius: 1px;
    }

    .trust-badge i {
        font-size: 0.25rem;
        margin-bottom: 0.02rem;
    }

    .trust-badge h6 {
        font-size: 0.2rem;
        margin-bottom: 0.005rem;
    }

    .trust-badge p {
        font-size: 0.15rem;
    }
}

/* Category Cards */
.category-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 5px 25px rgba(74, 124, 89, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    border: none;
    position: relative;
    overflow: hidden;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4a7c59, #2d5016);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.category-card:hover::before {
    transform: scaleX(1);
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(74, 124, 89, 0.15);
}

.category-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f8fffe 0%, #e8f5e8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
    border: none;
}

.category-card:hover .category-icon {
    background: linear-gradient(135deg, #4a7c59 0%, #2d5016 100%);
    color: white;
    transform: scale(1.1);
    border-color: #4a7c59;
}

.category-icon i {
    font-size: 2rem;
    color: #4a7c59;
    transition: color 0.3s ease;
}

.category-card:hover .category-icon i {
    color: white;
}

.category-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #2d5016;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.category-subtitle {
    font-size: 0.9rem;
    color: #4a7c59;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.category-link {
    color: #4a7c59;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #4a7c59;
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

.category-link:hover {
    color: #2d5016;
    border-bottom-color: #2d5016;
    text-decoration: none;
}

/* Banner Section */
.banner-section {
    background: #f8f9fa;
    padding: 2rem 0;
    margin-bottom: 0;
    display: block !important;
    visibility: visible !important;
}

.banner-container {
    position: relative;
    height: 400px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Main Carousel Banner (3/4 width) */
.main-banner {
    position: relative;
    height: 100%;
    background: linear-gradient(135deg, #4a7c59 0%, #2d5016 100%);
    overflow: hidden;
}

.banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    background-size: cover;
    background-position: center;
}

.banner-slide.active {
    opacity: 1;
}

.banner-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
}

.banner-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

.banner-nav.prev {
    left: 20px;
}

.banner-nav.next {
    right: 20px;
}

.banner-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}

.banner-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.banner-dot.active {
    background: white;
}

/* Static Banners (1/4 width) */
.static-banners {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.static-banner {
    flex: 1;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.static-banner:hover {
    transform: scale(1.02);
}

/* Flash Deal Section - HerbelGreen Theme */
.flash-deal-section {
    background: linear-gradient(135deg, #f8fffe 0%, #f0f8f0 50%, #e8f5e8 100%);
    padding: 1.5rem 0;
    position: relative;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    border-top: 1px solid #d4e6d4;
    border-bottom: 1px solid #d4e6d4;
    overflow: hidden;
}

.flash-deal-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(74, 124, 89, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(74, 124, 89, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(74, 124, 89, 0.06) 0%, transparent 50%);
    z-index: 1;
}

.flash-deal-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(74, 124, 89, 0.03) 60deg,
            transparent 120deg,
            rgba(74, 124, 89, 0.02) 180deg,
            transparent 240deg,
            rgba(74, 124, 89, 0.03) 300deg,
            transparent 360deg);
    animation: rotate 20s linear infinite;
    z-index: 1;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.flash-deal-container {
    position: relative;
    z-index: 2;
}

.flash-deal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.flash-deal-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #2d5016;
}

.flash-deal-badge {
    background: linear-gradient(135deg, #4a7c59, #2d5016);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(74, 124, 89, 0.3);
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.flash-deal-badge::before {
    content: '⚡';
    margin-right: 0.4rem;
    font-size: 0.8rem;
}


.flash-deal-main-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #2d5016;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.3px;
    position: relative;
}

.flash-deal-main-title::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, #4a7c59, #6b9c7a);
    border-radius: 1px;
}

.flash-deal-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: #4a7c59;
    margin: 0;
    letter-spacing: 0.3px;
}

.flash-deal-timer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(74, 124, 89, 0.1);
    border: 1px solid #d4e6d4;
    position: relative;
}

.timer-label {
    color: #2d5016;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timer-display {
    display: flex;
    gap: 0.5rem;
}

.timer-unit {
    background: linear-gradient(135deg, #4a7c59, #2d5016);
    color: white;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 35px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(74, 124, 89, 0.3);
    position: relative;
}

.timer-separator {
    color: #4a7c59;
    font-weight: 700;
    font-size: 1rem;
    align-self: center;
}

.flash-deal-products {
    position: relative;
}

.flash-deal-carousel {
    display: flex;
    gap: 0.8rem;
    overflow-x: auto;
    padding: 0.3rem 0;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.flash-deal-carousel::-webkit-scrollbar {
    display: none;
}

.flash-deal-product {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(74, 124, 89, 0.08);
    transition: all 0.3s ease;
    min-width: 200px;
    max-width: 200px;
    position: relative;
    border: 1px solid #d4e6d4;
    cursor: pointer;
}

.flash-deal-product::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4a7c59, #2d5016, #4a7c59);
    z-index: 1;
    border-radius: 8px 8px 0 0;
}

.flash-deal-product::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(74, 124, 89, 0.02), transparent);
    z-index: 1;
    pointer-events: none;
}

.flash-deal-product:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(74, 124, 89, 0.15);
    border-color: #4a7c59;
}

.flash-deal-product:hover::after {
    background: linear-gradient(135deg, rgba(74, 124, 89, 0.05), transparent);
}

.flash-deal-product-image {
    position: relative;
    height: 120px;
    overflow: hidden;
    background: linear-gradient(135deg, #f0f8f0, #e8f5e8);
    border-radius: 6px 6px 0 0;
}

.flash-deal-product-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(74, 124, 89, 0.1), transparent);
    z-index: 1;
    pointer-events: none;
}

.flash-deal-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(1.05) contrast(1.1);
}

.flash-deal-product:hover .flash-deal-product-image img {
    transform: scale(1.08);
    filter: brightness(1.1) contrast(1.15);
}

.flash-deal-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    z-index: 3;
}

.flash-deal-discount {
    background: linear-gradient(135deg, #ff8c42, #ff6b35);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(255, 140, 66, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.flash-deal-exclusive {
    background: linear-gradient(135deg, #4a7c59, #2d5016);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(74, 124, 89, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}


.flash-deal-product-info {
    padding: 0.8rem;
    position: relative;
    z-index: 2;
}

.flash-deal-product-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2d5016;
    margin-bottom: 0.6rem;
    line-height: 1.3;
    height: 2.2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: 'Playfair Display', serif;
    position: relative;
}

.flash-deal-product-name::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #4a7c59, #6b9c7a);
    border-radius: 1px;
}

.flash-deal-pricing {
    margin-bottom: 0.6rem;
    position: relative;
}

.flash-deal-current-price {
    font-size: 1rem;
    font-weight: 700;
    color: #2d5016;
    letter-spacing: -0.3px;
    position: relative;
}


.flash-deal-original-price {
    font-size: 0.9rem;
    color: #999;
    text-decoration: line-through;
    margin-left: 0.6rem;
    font-weight: 400;
    position: relative;
}

.flash-deal-savings {
    font-size: 0.75rem;
    color: #ff6b35;
    font-weight: 700;
    margin-top: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #ff6b35, #ff8c42);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}


.flash-deal-cta {
    background: linear-gradient(135deg, #4a7c59, #2d5016);
    color: white;
    border: none;
    padding: 0.5rem 0.8rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100%;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(74, 124, 89, 0.3);
    position: relative;
}


.flash-deal-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.flash-deal-cta:hover {
    background: linear-gradient(135deg, #2d5016, #1a3d0a);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 124, 89, 0.4);
}

.flash-deal-cta:hover::after {
    left: 100%;
}


.flash-deal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    color: #4a7c59;
    border: 2px solid #e8f5e8;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
    box-shadow: 0 4px 15px rgba(74, 124, 89, 0.1);
}

.flash-deal-nav:hover {
    background: #4a7c59;
    color: white;
    border-color: #4a7c59;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(74, 124, 89, 0.2);
}

.flash-deal-nav.prev {
    left: -20px;
}

.flash-deal-nav.next {
    right: -20px;
}


/* Responsive */
@media (max-width: 768px) {
    .banner-section {
        display: block !important;
        visibility: visible !important;
        padding: 1rem 0;
    }

    .banner-container {
        height: 250px;
        display: block !important;
        visibility: visible !important;
    }

    .main-banner {
        display: block !important;
        visibility: visible !important;
    }

    .banner-slide {
        display: block !important;
        visibility: visible !important;
    }

    /* Static Banners Mobile - Hidden */
    .static-banners {
        display: none !important;
    }

    .static-banner {
        display: none !important;
    }

    /* Banner Section Mobile Layout */
    .banner-section .row {
        flex-direction: column;
        display: flex !important;
    }

    .banner-section .col-12:first-child {
        order: 1;
        display: block !important;
    }

    .banner-section .col-12:last-child {
        order: 2;
        display: block !important;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-price {
        font-size: 1.8rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 0.8rem;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* Mobile: Horizontal layout for pricing in hero section */
    .hero-pricing-mobile {
        display: flex;
        align-items: center;
        gap: 0.8rem;
    }

    .hero-price {
        margin-bottom: 0.3rem;
    }

    .hero-original-price {
        margin-bottom: 0.8rem;
        margin-left: 0;
    }

    .section-title {
        font-size: 2.2rem;
    }

    .hero-image {
        height: 300px;
    }

    .hero-badge {
        margin-top: 10px;
    }

    .hero-section {
        padding: 3rem 0;
    }

    .review-card {
        padding: 2rem 1.5rem;
    }

    .category-card {
        padding: 1.5rem;
    }

    .flash-deal-header {
        flex-direction: column;
        text-align: center;
    }

    .flash-deal-main-title {
        font-size: 1.5rem;
    }

    .flash-deal-subtitle {
        font-size: 0.9rem;
    }

    .flash-deal-timer {
        flex-direction: column;
        gap: 0.6rem;
    }

    .timer-display {
        gap: 0.3rem;
    }

    .timer-unit {
        min-width: 35px;
        font-size: 0.9rem;
        padding: 0.4rem 0.6rem;
    }

    .flash-deal-product {
        min-width: 200px;
        max-width: 200px;
    }

    .flash-deal-nav {
        display: none;
    }

    .flash-deal-section::after {
        animation: none;
    }
}

/* Extra small mobile devices */
@media (max-width: 576px) {
    .banner-section {
        display: block !important;
        visibility: visible !important;
        padding: 0.5rem 0;
    }

    .banner-container {
        height: 200px;
        display: block !important;
        visibility: visible !important;
    }

    .main-banner {
        display: block !important;
        visibility: visible !important;
    }

    .banner-slide {
        display: block !important;
        visibility: visible !important;
    }

    .banner-nav {
        display: none;
    }

    .banner-dots {
        display: flex !important;
    }
}

</style>< !-- Banner Section --><section class="banner-section"><div class="container"><div class="row"><div class="col-12 col-lg-9"><div class="banner-container"><div class="main-banner">< !-- Banner Slide 1 --><div class="banner-slide active"style="background-image: url('assets/images/home/home1.png');"></div>< !-- Banner Slide 2 --><div class="banner-slide"style="background-image: url('assets/images/home/home2.png');"></div>< !-- Banner Slide 3 --><div class="banner-slide"style="background-image: url('assets/images/home/home3.png');"></div>< !-- Banner Slide 4 --><div class="banner-slide"style="background-image: url('assets/images/home/home4.png');"></div>< !-- Navigation Arrows --><button class="banner-nav prev"onclick="changeSlide(-1)"><i class="fas fa-chevron-left"></i></button><button class="banner-nav next"onclick="changeSlide(1)"><i class="fas fa-chevron-right"></i></button>< !-- Dots Indicator --><div class="banner-dots"><button class="banner-dot active"onclick="currentSlide(1)"></button><button class="banner-dot"onclick="currentSlide(2)"></button><button class="banner-dot"onclick="currentSlide(3)"></button><button class="banner-dot"onclick="currentSlide(4)"></button></div></div></div></div><div class="col-12 col-lg-3"><div class="static-banners">< !-- Top Static Banner --><div class="static-banner"style="background-image: url('assets/images/home/home.png');"></div>< !-- Bottom Static Banner --><div class="static-banner"style="background-image: url('assets/images/home/home1.png');"></div></div></div></div></div></section>< !-- Flash Deal Section --><section class="flash-deal-section"><div class="container"><div class="flash-deal-container"><div class="flash-deal-header"><div class="flash-deal-title"><div><h2 class="flash-deal-main-title">Flash Sale Dược Phẩm</h2><p class="flash-deal-subtitle">HerbelGreen</p></div></div><div class="flash-deal-timer"><span class="timer-label">Kết thúc sau:</span><div class="timer-display"><div class="timer-unit"id="hours">23</div><span class="timer-separator">:</span><div class="timer-unit"id="minutes">59</div><span class="timer-separator">:</span><div class="timer-unit"id="seconds">59</div></div></div></div><div class="flash-deal-products"><button class="flash-deal-nav prev"onclick="scrollFlashDeal(-1)"><i class="fas fa-chevron-left"></i></button><button class="flash-deal-nav next"onclick="scrollFlashDeal(1)"><i class="fas fa-chevron-right"></i></button><div class="flash-deal-carousel"id="flashDealCarousel"><?php foreach($newProducts as $product): ?><div class="flash-deal-product"data-product-id="<?php echo $product['id']; ?>"><div class="flash-deal-product-image"><?php if ( !empty($product['gallery'])): ?><img src="<?php echo htmlspecialchars($product['gallery'][0]['image_path']); ?>"alt="<?php echo htmlspecialchars($product['name']); ?>"><?php else: ?><img src="assets/uploads/product-default.jpg"alt="No image"><?php endif;
?><div class="flash-deal-badges"><?php $discountPercent=$productModel->getDiscountPercent($product);
if($discountPercent > 0): ?><div class="flash-deal-discount">-<?php echo $discountPercent;
?>%</div><?php endif;
?><div class="flash-deal-exclusive">MỚI</div></div></div><div class="flash-deal-product-info"><h5 class="flash-deal-product-name"><?php echo htmlspecialchars($product['name']);
?></h5><div class="flash-deal-pricing"><span class="flash-deal-current-price"><?php echo number_format($productModel->getCurrentPrice($product));
?>₫</span><?php if($productModel->getDiscountPercent($product) > 0): ?><span class="flash-deal-original-price"><?php echo number_format($productModel->getOriginalPrice($product));
?>₫</span><div class="flash-deal-savings">Tiết kiệm <?php echo number_format($productModel->getOriginalPrice($product) - $productModel->getCurrentPrice($product));
?>₫</div><?php endif;
?></div><button class="flash-deal-cta"onclick="addToCart(<?php echo $product['id']; ?>)">SĂN NGAY </button></div></div><?php endforeach;
?></div></div></div></div></section>< !-- Best Sellers Section --><section class="py-3 best-sellers-section"><div class="container"><div class="row align-items-center mb-3"><div class="col-12 col-md-6"><h3 class="section-title">Bán chạy nhất</h3></div><div class="col-12 col-md-6 text-md-end text-center mt-2 mt-md-0"><a href="index.php?page=products&bestseller=1"class="view-more-link">Xem thêm <i class="fas fa-arrow-right ms-1"></i></a></div></div><div class="row g-3"><?php foreach($bestSellers as $product): ?><div class="col-6 col-sm-6 col-md-4 col-lg-3"><div class="product-card"data-product-id="<?php echo $product['id']; ?>"><a href="index.php?page=product&id=<?php echo $product['id']; ?>"class="product-link"><div class="product-image"><?php if ( !empty($product['gallery'])): ?><img src="<?php echo htmlspecialchars($product['gallery'][0]['image_path']); ?>"alt="<?php echo htmlspecialchars($product['name']); ?>"><?php else: ?><img src="assets/uploads/product-default.jpg"alt="No image"><?php endif;
?><?php $discountPercent=$productModel->getDiscountPercent($product);
if($discountPercent > 0): ?><div class="discount-badge">-<?php echo $discountPercent;
?>%</div><?php endif;
?></div><div class="product-info"><h5 class="product-name"><?php echo htmlspecialchars($product['name']);
?></h5><div class="product-price"><span class="current-price"><?php echo number_format($productModel->getCurrentPrice($product));
?>₫</span><?php if($productModel->getDiscountPercent($product) > 0): ?><span class="original-price"><?php echo number_format($productModel->getOriginalPrice($product));
?>₫</span><?php endif;
?></div><div class="product-sales">Đã bán <?php echo $product['sold_count'] ?? 0;
?></div><div class="product-action"><button class="btn-add-cart-home"onclick="addToCart(<?php echo $product['id']; ?>)"><i class="fas fa-shopping-cart"></i><span class="btn-text">Thêm vào giỏ</span></button></div></div></a></div></div><?php endforeach;
?></div></div></section><section class="hero-section"><div class="container"><div class="row align-items-center"><div class="col-12 col-lg-6 order-2 order-lg-1"><div class="hero-content"><?php if($featuredProduct): ?><div class="hero-badge">Sản phẩm nổi bật</div><h1 class="hero-title"><?php echo $featuredProduct['name'];
?></h1><h2 class="hero-subtitle"><?php echo $featuredProduct['category_name'];
?></h2><p class="hero-description"><?php echo substr(strip_tags($featuredProduct['description']), 0, 200) . '...';
?></p><div class="hero-pricing-mobile"><div class="hero-price"><?php echo number_format($productModel->getCurrentPrice($featuredProduct));
?>₫</div><?php if($productModel->getDiscountPercent($featuredProduct) > 0): ?><div class="hero-original-price"><?php echo number_format($productModel->getOriginalPrice($featuredProduct));
?>₫</div><?php endif;
?></div><?php if($productModel->getDiscountPercent($featuredProduct) > 0): ?><div class="hero-expiry">Tiết kiệm <?php echo $productModel->getDiscountPercent($featuredProduct);
?>%</div><?php endif;
?><div class="hero-buttons"><a href="index.php?page=product&id=<?php echo $featuredProduct['id']; ?>"class="hero-btn-primary"><i class="fas fa-shopping-cart"></i><span class="btn-text">Mua ngay</span></a><a href="index.php?page=about"class="hero-btn-secondary"><i class="fas fa-info-circle"></i><span class="btn-text">Tìm hiểu thêm</span></a></div><?php else: ?><div class="hero-badge">Tinh hoa dược liệu</div><h1 class="hero-title">HerbelGreen</h1><h2 class="hero-subtitle">Dược liệu thiên nhiên chất lượng cao</h2><p class="hero-description">Khám phá bộ sưu tập dược liệu quý hiếm,
thảo dược thiên nhiên và thực phẩm bảo vệ sức khỏe được chọn lọc kỹ lưỡng từ những nguồn nguyên liệu tốt nhất.</p><div class="hero-features"><div class="hero-feature"><i class="fas fa-leaf"></i><span>Dược liệu thiên nhiên 100%</span></div><div class="hero-feature"><i class="fas fa-award"></i><span>Chứng nhận quốc tế FDA,
GMP</span></div><div class="hero-feature"><i class="fas fa-user-md"></i><span>Tư vấn chuyên gia dược sĩ</span></div></div><div class="hero-buttons"><a href="index.php?page=products"class="hero-btn-primary"><i class="fas fa-leaf"></i><span class="btn-text">Khám phá ngay</span></a><a href="index.php?page=about"class="hero-btn-secondary"><i class="fas fa-info-circle"></i><span class="btn-text">Về chúng tôi</span></a></div><?php endif;
?></div></div><div class="col-12 col-lg-6 order-1 order-lg-2"><div class="hero-image-container"><?php if($featuredProduct): ?><?php if ( !empty($featuredProduct['gallery'])): ?><img src="<?php echo htmlspecialchars($featuredProduct['gallery'][0]['image_path']); ?>"alt="<?php echo htmlspecialchars($featuredProduct['name']); ?>"class="hero-image"><?php else: ?><img src="<?php echo $featuredProduct['image_'] ?: 'assets/uploads/hero-herbs.jpg'; ?>"alt="<?php echo htmlspecialchars($featuredProduct['name']); ?>"class="hero-image"><?php endif;
?><?php else: ?><img src="assets/uploads/hero-herbs.jpg"alt="HerbelGreen Dược liệu"class="hero-image"><?php endif;
?></div></div></div></div></section>< !-- Trust Badges --><section class="trust-badges"><div class="container"><div class="row"><div class="col-lg-3 col-md-6 col-6 mb-3"><div class="trust-badge"><i class="fas fa-certificate"></i><h6>Chứng nhận FDA</h6><p>Đạt tiêu chuẩn quốc tế</p></div></div><div class="col-lg-3 col-md-6 col-6 mb-3"><div class="trust-badge"><i class="fas fa-leaf"></i><h6>100% Thiên nhiên</h6><p>Không chất bảo quản</p></div></div><div class="col-lg-3 col-md-6 col-6 mb-3"><div class="trust-badge"><i class="fas fa-shipping-fast"></i><h6>Giao hàng nhanh</h6><p>Miễn phí từ 500k</p></div></div><div class="col-lg-3 col-md-6 col-6 mb-3"><div class="trust-badge"><i class="fas fa-shield-alt"></i><h6>Bảo hành chính hãng</h6><p>Cam kết chất lượng</p></div></div></div></div></section>< !-- New Products Section --><section class="py-3 best-sellers-section"style="background: #f8fffe;"><div class="container"><div class="row align-items-center mb-3"><div class="col-12 col-md-6"><h3 class="section-title">Sản phẩm mới</h3></div><div class="col-12 col-md-6 text-md-end text-center mt-2 mt-md-0"><a href="index.php?page=products&new=1"class="view-more-link">Xem thêm <i class="fas fa-arrow-right ms-1"></i></a></div></div><div class="row g-3"><?php foreach($newProducts as $product): ?><div class="col-6 col-sm-6 col-md-4 col-lg-3"><div class="product-card"data-product-id="<?php echo $product['id']; ?>"><a href="index.php?page=product&id=<?php echo $product['id']; ?>"class="product-link"><div class="product-image"><?php if ( !empty($product['gallery'])): ?><img src="<?php echo htmlspecialchars($product['gallery'][0]['image_path']); ?>"alt="<?php echo htmlspecialchars($product['name']); ?>"><?php else: ?><img src="assets/uploads/product-default.jpg"alt="No image"><?php endif;
?><?php $discountPercent=$productModel->getDiscountPercent($product);
if($discountPercent > 0): ?><div class="discount-badge">-<?php echo $discountPercent;
?>%</div><?php endif;
?></div><div class="product-info"><h5 class="product-name"><?php echo htmlspecialchars($product['name']);
?></h5><div class="product-price"><span class="current-price"><?php echo number_format($productModel->getCurrentPrice($product));
?>₫</span><?php if($productModel->getDiscountPercent($product) > 0): ?><span class="original-price"><?php echo number_format($productModel->getOriginalPrice($product));
?>₫</span><?php endif;
?></div><div class="product-sales">Đã bán <?php echo $product['sold_count'] ?? 0;
?></div><div class="product-action"><button class="btn-add-cart-home"onclick="addToCart(<?php echo $product['id']; ?>)"><i class="fas fa-shopping-cart"></i><span>Thêm vào giỏ</span></button></div></div></a></div></div><?php endforeach;
?></div></div></section>< !-- Store Introduction Section -->< !-- <section class="py-5"style="background: #f8f9fa;"><div class="container"><div class="section-header text-center mb-5"><h3 class="section-title">EMCwood Store</h3><p class="section-subtitle">Khám phá bộ sưu tập gỗ chất lượng cao với nhiều danh mục sản phẩm đa dạng</p></div><div class="row"><div class="col-lg-3 col-md-6 mb-4"><div class="store-feature-card"><div class="store-feature-icon"><i class="fas fa-fire"></i></div><h5 class="store-feature-title">Hot Deals</h5><p class="store-feature-subtitle">Giảm giá sốc hàng ngày</p><a href="index.php?page=store"class="store-feature-link">Xem ngay <i class="fas fa-arrow-right ms-1"></i></a></div></div><div class="col-lg-3 col-md-6 mb-4"><div class="store-feature-card"><div class="store-feature-icon"><i class="fas fa-star"></i></div><h5 class="store-feature-title">Bán chạy nhất</h5><p class="store-feature-subtitle">Sản phẩm được yêu thích</p><a href="index.php?page=store"class="store-feature-link">Xem ngay <i class="fas fa-arrow-right ms-1"></i></a></div></div><div class="col-lg-3 col-md-6 mb-4"><div class="store-feature-card"><div class="store-feature-icon"><i class="fas fa-lightbulb"></i></div><h5 class="store-feature-title">Gợi ý cho bạn</h5><p class="store-feature-subtitle">Phù hợp với sở thích</p><a href="index.php?page=store"class="store-feature-link">Xem ngay <i class="fas fa-arrow-right ms-1"></i></a></div></div><div class="col-lg-3 col-md-6 mb-4"><div class="store-feature-card"><div class="store-feature-icon"><i class="fas fa-plus-circle"></i></div><h5 class="store-feature-title">Sản phẩm mới</h5><p class="store-feature-subtitle">Cập nhật hàng ngày</p><a href="index.php?page=store"class="store-feature-link">Xem ngay <i class="fas fa-arrow-right ms-1"></i></a></div></div></div><div class="text-center mt-4"><a href="index.php?page=store"class="btn btn-primary btn-lg me-3"><i class="fas fa-store me-2"></i>Khám phá Store </a><a href="index.php?page=products"class="btn btn-outline-dark btn-lg"><i class="fas fa-shopping-cart me-2"></i>Xem tất cả sản phẩm </a></div></div></section>-->< !-- Customer Reviews Section --><section class="py-5"><div class="container"><div class="section-header text-center mb-5"><h3 class="section-title">Khách hàng nói gì</h3><p class="section-subtitle">Những đánh giá chân thực từ khách hàng đã sử dụng sản phẩm</p></div><div class="row g-3"><div class="col-12 col-md-6 col-lg-4"><div class="review-card">< !-- <img src="assets/uploads/review-1.jpg"alt="Review 1"class="review-image">--><h5 class="reviewer-name">Anh Nguyễn Nhật Hào</h5><p class="review-text">"Tôi đã dùng thử đông trùng hạ thảo và thấy sức khỏe cải thiện rõ rệt. Sản phẩm chất lượng, đóng gói cẩn thận. Tôi đã quay lại và mua thêm 2 hộp."</p></div></div><div class="col-12 col-md-6 col-lg-4"><div class="review-card">< !-- <img src="assets/uploads/review-2.jpg"alt="Review 2"class="review-image">--><h5 class="reviewer-name">Ông Trần Quốc Bảo</h5><p class="review-text">"Yến sào thơm ngon, dễ dùng, gia đình tôi rất thích. Giá cả hợp lý so với chất lượng mang lại."</p></div></div><div class="col-12 col-md-6 col-lg-4"><div class="review-card">< !-- <img src="assets/uploads/review-3.jpg"alt="Review 3"class="review-image">--><h5 class="reviewer-name">Anh Trần Minh Huy</h5><p class="review-text">"Hồng sâm rất tốt, giúp tôi ngủ ngon và khỏe khoắn hơn, cải thiện sinh lý rất tốt. Rất yên tâm khi mua tại HerberGreen."</p></div></div></div></div></section><script> // Banner Carousel JavaScript
let currentSlideIndex=0;
const slides=document.querySelectorAll('.banner-slide');
const dots=document.querySelectorAll('.banner-dot');
const totalSlides=slides.length;

function showSlide(index) {
    // Hide all slides
    slides.forEach(slide=> slide.classList.remove('active'));
    dots.forEach(dot=> dot.classList.remove('active'));

    // Show current slide
    if (slides[index]) {
        slides[index].classList.add('active');
    }

    if (dots[index]) {
        dots[index].classList.add('active');
    }
}

function changeSlide(direction) {
    currentSlideIndex+=direction;

    if (currentSlideIndex >=totalSlides) {
        currentSlideIndex=0;
    }

    else if (currentSlideIndex < 0) {
        currentSlideIndex=totalSlides - 1;
    }

    showSlide(currentSlideIndex);
}

function currentSlide(index) {
    currentSlideIndex=index - 1;
    showSlide(currentSlideIndex);
}

// Auto-play carousel
function autoPlay() {
    changeSlide(1);
}

// Start auto-play
let autoPlayInterval=setInterval(autoPlay, 5000); // Change slide every 5 seconds

// Pause auto-play on hover
const bannerContainer=document.querySelector('.banner-container');

if (bannerContainer) {
    bannerContainer.addEventListener('mouseenter', ()=> {
            clearInterval(autoPlayInterval);
        }

    );

    bannerContainer.addEventListener('mouseleave', ()=> {
            autoPlayInterval=setInterval(autoPlay, 5000);
        }

    );
}

// Initialize
showSlide(0);

// Flash Deal Countdown Timer
function startFlashDealTimer() {
    const hoursElement=document.getElementById('hours');
    const minutesElement=document.getElementById('minutes');
    const secondsElement=document.getElementById('seconds');

    if ( !hoursElement || !minutesElement || !secondsElement) return;

    // Set countdown to 24 hours from now
    let totalSeconds=24 * 60 * 60; // 24 hours in seconds

    function updateTimer() {
        const hours=Math.floor(totalSeconds / 3600);
        const minutes=Math.floor((totalSeconds % 3600) / 60);
        const seconds=totalSeconds % 60;

        hoursElement.textContent=hours.toString().padStart(2, '0');
        minutesElement.textContent=minutes.toString().padStart(2, '0');
        secondsElement.textContent=seconds.toString().padStart(2, '0');

        if (totalSeconds <=0) {
            // Reset timer when it reaches 0
            totalSeconds=24 * 60 * 60;
        }

        else {
            totalSeconds--;
        }
    }

    // Update immediately
    updateTimer();

    // Update every second
    setInterval(updateTimer, 1000);
}

// Flash Deal Carousel Navigation
function scrollFlashDeal(direction) {
    const carousel=document.getElementById('flashDealCarousel');
    if ( !carousel) return;

    const scrollAmount=300; // pixels to scroll
    const currentScroll=carousel.scrollLeft;
    const newScroll=currentScroll+(direction * scrollAmount);

    carousel.scrollTo( {
            left: newScroll,
            behavior: 'smooth'
        }

    );
}

// Initialize Flash Deal Timer when page loads
document.addEventListener('DOMContentLoaded', function() {
        startFlashDealTimer();
    }

);

// Flash Deal Product Click Handler
document.addEventListener('DOMContentLoaded', function() {
        const flashDealProducts=document.querySelectorAll('.flash-deal-product');

        flashDealProducts.forEach(product=> {
                product.addEventListener('click', function(e) {

                        // Prevent navigation if clicking on the CTA button
                        if (e.target.closest('.flash-deal-cta')) {
                            return;
                        }

                        const productId=this.getAttribute('data-product-id');

                        if (productId) {
                            window.location.href=`index.php?page=product&id=$ {
                                productId
                            }

                            `;
                        }
                    }

                );

                // Product is now clickable with CSS cursor pointer
            }

        );
    }

);

// Add to cart function - unified for all buttons
function addToCart(productId) {
    // Prevent event propagation to parent elements (like <a> tags)
    event.preventDefault();
    event.stopPropagation();

    const button=event.target.closest('.btn-add-cart-home, .btn-add-cart, .flash-deal-cta');
    const originalText=button.innerHTML;

    // Show loading state
    button.innerHTML='<i class="fas fa-spinner fa-spin"></i> Đang thêm...';
    button.disabled=true;

    // Add to cart API call
    fetch('index.php?page=api/cart/add', {

            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }

            ,
            body: JSON.stringify( {

                    product_id: productId,
                    quantity: 1,
                    selected_options: {}
                }

            )
        }

    ) .then(response=> response.json()) .then(data=> {
            if (data.success) {
                // Show success state
                button.innerHTML='<i class="fas fa-check"></i> Đã thêm!';
                button.style.background='#10b981';

                // Update cart count
                document.querySelectorAll('.cart-count').forEach(function(el) {
                        el.textContent=data.cart_count;
                    }

                );

                // Reset after 2 seconds
                setTimeout(()=> {
                        button.innerHTML=originalText;
                        button.style.background='#4a7c59';
                        button.disabled=false;
                    }

                    , 2000);
            }

            else {
                // Show error state
                button.innerHTML='<i class="fas fa-exclamation-triangle"></i> Lỗi!';
                button.style.background='#ef4444';

                // Reset after 2 seconds
                setTimeout(()=> {
                        button.innerHTML=originalText;
                        button.style.background='#4a7c59';
                        button.disabled=false;
                    }

                    , 2000);
            }
        }

    ) .catch(error=> {
            console.error('Error:', error);
            // Show error state
            button.innerHTML='<i class="fas fa-exclamation-triangle"></i> Lỗi!';
            button.style.background='#ef4444';

            // Reset after 2 seconds
            setTimeout(()=> {
                    button.innerHTML=originalText;
                    button.style.background='#4a7c59';
                    button.disabled=false;
                }

                , 2000);
        }

    );
}

</script>