/* ==========================================================================
   HOME TITLE CATEGORY & TAGS (M3 MATERIAL)
   ========================================================================== */
.home-top-slider {
    padding: 0 9.8px 16px !important;
}

@media (max-width: 769px) {
    .home-top-slider {
        padding: 0 9.8px !important;
    }
}

/* Khung bọc toàn bộ tiêu đề và thẻ tag */
.product-list-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.product-list-title .title {
    display: block;
    margin: 0;
    text-decoration: none;
}

.product-list-title .title h2 {
    font: var(--md-sys-typescale-title-medium);
    color: var(--md-sys-color-on-surface);
    text-transform: capitalize;
    margin: 0;
    transition: color var(--md-sys-duration-short) ease;
}

/* Khung bọc danh sách thẻ Tag */
.product-list-title .list-related-tag {
    display: flex;
    margin-left: auto;
    gap: 8px;
    align-items: center;
    padding-top: 1px;
    padding-left: 1px;
}

.product-list-title .list-related-tag .related-tag {
    white-space: nowrap;
}

/* ==========================================
   Responsive (Tối ưu Mobile & Tablet)
   ========================================== */
@media screen and (max-width: 1024px) {
    
    .product-list-title .more-product {
        display: inline-flex; /* Hiện link xem tất cả ở dòng trên cùng Title */
    }

    .product-list-title .tag-showmore {
        display: none; /* Ẩn nút "Xem tất cả" dư thừa bên dưới */
    }

    /* Vuốt ngang các thẻ Tag trên mobile */
    .product-list-title .list-related-tag {
        margin-left: 0;
        width: 100%;
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px; /* Chừa viền cho bóng đổ không bị lẹm */
    }
    
    .product-list-title .list-related-tag::-webkit-scrollbar {
        display: none;
    }
}

/* ==========================================================================
   9. FLASH SALE BOX (M3 MATERIAL)
   ========================================================================== */

/* Khung bọc toàn bộ khối Flash Sale */
.ctp-m3-flashsale-wrapper {
    background-color: var(--md-sys-color-error-container); /* Nền cam/đỏ nhạt tạo sự cấp bách */
    border-radius: var(--md-sys-shape-corner-lg); /* Bo góc 16px */
    padding: 0px;
    margin: 24px 0;
    box-shadow: var(--md-sys-elevation-level-1);
    border: 1px solid var(--md-sys-color-error);
}

/* Khu vực Header (Logo & Nút xem thêm) */
.ctp-m3-flashsale-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 16px;
}

.ctp-m3-flashsale-header .flashsale-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ctp-m3-flashsale-header .flashsale-title img {
    height: 32px;
    width: auto;
    object-fit: contain;
}

/* Reset khoảng cách của danh sách sản phẩm để vừa vặn trong Container */
.ctp-m3-flashsale-slider {
    margin: 0 !important;
}

/* Làm nổi bật nút điều hướng slider trên nền đỏ */
.ctp-m3-flashsale-wrapper .flickity-prev-next-button {
    background: var(--md-sys-color-surface) !important;
    box-shadow: var(--md-sys-elevation-level-2) !important;
}

@media (max-width: 768px) {
    .ctp-m3-flashsale-wrapper {
        margin: 16px 0;
        border-radius: var(--md-sys-shape-corner-md);
    }
    
    .ctp-m3-flashsale-header {
        /* Chuyển lại thành hàng ngang, dự phòng rớt dòng nếu màn hình quá hẹp */
        flex-direction: row; 
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        margin: 16px 12px;
    }

    /* Thu nhỏ khoảng cách giữa Logo và Badge trên mobile để tiết kiệm diện tích */
    .ctp-m3-flashsale-header .flashsale-title {
        gap: 8px; 
    }
    
    .ctp-m3-flashsale-header .flashsale-title img {
        height: 24px;
    }

    /* Thu nhỏ font chữ nút Xem tất cả một chút để cân đối trên 1 dòng */
    .m3-text-action {
        font: var(--md-sys-typescale-label-medium);
    }
}

/* Badge nhấp nháy (Pulse effect) thu hút mắt nhìn */
.m3-pulse-badge {
    background-color: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
    font: var(--md-sys-typescale-label-medium);
    padding: 4px 12px;
    border-radius: var(--md-sys-shape-corner-xs);
    animation: m3Pulse 2s infinite;
    text-transform: uppercase;
    white-space: nowrap;
}

@keyframes m3Pulse {
    0% { box-shadow: 0 0 0 0 rgba(235, 0, 41, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(235, 0, 41, 0); }
    100% { box-shadow: 0 0 0 0 rgba(235, 0, 41, 0); }
}

/* Nút Xem Tất Cả (M3 Text Button) */
.m3-text-action {
    font: var(--md-sys-typescale-label-medium);
    color: var(--md-sys-color-error);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all var(--md-sys-duration-short) ease;
    text-transform: uppercase;
    text-decoration: none;
}

.m3-text-action:hover {
    color: var(--md-sys-color-primary);
}

.m3-text-action .arrow {
    transition: transform var(--md-sys-duration-short) ease;
    font-size: 1.2em;
}

.m3-text-action:hover .arrow {
    transform: translateX(4px); /* Đẩy mũi tên trượt sang phải */
}