/* ============================================================
   CATEGORY MOBILE — Shared layout cho các trang dùng .page-category
   Áp dụng: product/category.tpl, product/search.tpl,
   product/manufacturer_info.tpl (đã có class). Productall/special
   muốn dùng chung → thêm class "page-category" vào section wrapper.
   ------------------------------------------------------------
   Lý do tạo file riêng: style_mb.css KHÔNG được link trong
   header.tpl theme này, style.css chỉ load >=769px. Mobile (<769px)
   cần CSS độc lập, nhúng media="all" để guaranteed load.
   ============================================================ */

@media (max-width: 991px) {

    /* ============ 0. PAGE WRAPPER + FIX OVERFLOW NGANG ============ */
    html, body { overflow-x: hidden; }
    .page-category {
        overflow-x: hidden;
        padding: 8px 0 16px;
        background: #f4f4f4;
    }
    .page-category > .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
    }
    .page-category .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .page-category .row > [class*="col-"] {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* ============ 1. RESET LINK (style_mb.css không load) ============ */
    .page-category a,
    .page-category a:link,
    .page-category a:visited,
    .page-category a:hover,
    .page-category a:active,
    .box-breadcrumb-global a,
    .box-breadcrumb-global a:link,
    .box-breadcrumb-global a:visited,
    .box-breadcrumb-global a:hover {
        text-decoration: none !important;
        color: inherit;
    }

    /* ============ 2. BREADCRUMB ============ */
    .box-breadcrumb-global {
        padding: 8px 0 4px !important;
        background: #fff !important;
    }
    .box-breadcrumb-global .container.box-breadcrumb {
        padding: 0 12px !important;
    }
    .global-breadcrumb { width: 100%; }
    .global-breadcrumb ol {
        list-style: none !important;
        list-style-type: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 0;
        line-height: 18px;
        counter-reset: none !important;
    }
    .global-breadcrumb ol li {
        list-style: none !important;
        list-style-type: none !important;
        display: inline-flex !important;
        align-items: center;
    }
    .global-breadcrumb ol li::before,
    .global-breadcrumb ol li::marker {
        content: none !important;
        display: none !important;
    }
    .global-breadcrumb ol li a {
        text-decoration: none !important;
        color: #3a3a3a !important;
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center;
        gap: 0;
    }
    .global-breadcrumb ol li a:hover { color: #ed7b23 !important; }
    .global-breadcrumb ol li a span {
        margin: 0 4px 0 0 !important;
        font-size: 13px !important;
        color: #3a3a3a !important;
    }
    .global-breadcrumb ol li .gach-cheo {
        margin: 0 6px 0 0 !important;
        font-size: 10px !important;
        color: #999 !important;
    }
    .global-breadcrumb ol li:last-child .gach-cheo { display: none !important; }

    /* ============ 3. TÊN DANH MỤC ============ */
    .page-category .name-category {
        font-size: 20px !important;
        line-height: 26px !important;
        margin: 6px 0 12px !important;
        text-align: left !important;
        color: #222 !important;
        font-weight: 700 !important;
        padding: 0 4px !important;
    }

    /* ============ 4. TOP SẢN PHẨM NỔI BẬT (swiper) ============ */
    .page-category .box-top-product-categroy {
        padding: 12px 10px 16px !important;
        border-radius: 10px !important;
        min-height: auto !important;
        margin: 0 0 14px !important;
        background-size: cover !important;
        background-position: center !important;
    }
    .page-category .box-top-product-categroy .title {
        font-size: 16px !important;
        line-height: 22px !important;
        margin: 0 0 10px !important;
        text-align: left !important;
        letter-spacing: .3px;
    }
    .page-category .swiper-top-product-category {
        position: relative;
        overflow: hidden;
    }
    .page-category .swiper-top-product-category .swiper-slide {
        width: calc((100% - 8px) / 2.2);
        flex: 0 0 auto;
        height: auto;
    }
    .page-category .swiper-top-product-category.swiper-initialized .swiper-slide {
        width: auto;
    }
    .page-category .box-top-product-categroy .swiper-button-next,
    .page-category .box-top-product-categroy .swiper-button-prev {
        width: 30px !important;
        height: 30px !important;
        background: rgba(255, 255, 255, .95) !important;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
        margin-top: -15px;
    }
    .page-category .box-top-product-categroy .swiper-button-next::after,
    .page-category .box-top-product-categroy .swiper-button-prev::after {
        font-size: 12px !important;
        color: #333 !important;
        font-weight: 700;
    }

    /* ============ 5. BLOCK SẢN PHẨM (pi-card) — follow desktop ============ */
    .page-category .product-item.pi-card,
    .page-category .product-item {
        background: #fff !important;
        border: 1px solid #eee !important;
        border-radius: 8px !important;
        overflow: hidden;
        padding: 0 !important;
        box-shadow: 0 -1px 9px 0 rgba(164, 164, 164, .15);
        min-height: auto !important;
        height: 100%;
    }
    .page-category .product-item.pi-card .pi-image {
        position: relative;
        display: block;
        overflow: hidden;
        aspect-ratio: 1 / 1;
        background: #fafafa;
    }
    .page-category .product-item.pi-card .pi-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .page-category .product-item.pi-card .pi-tag-discount {
        position: absolute !important;
        top: 6px !important;
        left: 6px !important;
        background: #d70018 !important;
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 600;
        line-height: 1;
        padding: 3px 6px !important;
        border-radius: 3px !important;
        z-index: 2;
    }
    .page-category .product-item.pi-card .pi-body {
        padding: 8px 10px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    .page-category .product-item.pi-card .pi-name-link {
        text-decoration: none !important;
        color: #222 !important;
        display: block;
    }
    .page-category .product-item.pi-card .pi-name {
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        color: #222 !important;
        text-decoration: none !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        min-height: calc(1.4em * 2);
    }
    .page-category .product-item.pi-card .pi-name-link:hover .pi-name { color: #ed7b23 !important; }
    .page-category .product-item.pi-card .pi-price-wrap {
        margin-top: 2px;
        min-height: auto;
    }
    .page-category .product-item.pi-card .pi-price-row {
        display: flex !important;
        align-items: center;
        gap: 6px;
        margin-bottom: 2px;
        flex-wrap: wrap;
    }
    .page-category .product-item.pi-card .pi-price-old {
        color: #888 !important;
        font-size: 12px !important;
        text-decoration: line-through !important;
    }
    .page-category .product-item.pi-card .pi-price-pct {
        color: #d70018 !important;
        background: transparent;
        border: 1px solid #d70018 !important;
        font-size: 11px !important;
        font-weight: 600;
        padding: 0 5px !important;
        border-radius: 3px !important;
        line-height: 16px;
    }
    .page-category .product-item.pi-card .pi-price-now {
        color: #d70018 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }
    .page-category .product-item.pi-card .pi-gift {
        position: relative;
        background: #fff5ed !important;
        border: 1px dashed #ed7b23 !important;
        border-radius: 6px !important;
        padding: 5px 8px 5px 26px !important;
        margin-top: 2px;
    }
    .page-category .product-item.pi-card .pi-gift p {
        margin: 0;
        padding: 0;
        color: #333;
        font-size: 11.5px !important;
        line-height: 1.4 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .page-category .product-item.pi-card .pi-gift::before {
        content: '';
        position: absolute;
        left: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ed7b23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 12 20 22 4 22 4 12'/><rect x='2' y='7' width='20' height='5'/><line x1='12' y1='22' x2='12' y2='7'/><path d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/><path d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/></svg>");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .page-category .product-item.pi-card .pi-stock {
        display: flex !important;
        align-items: center;
        gap: 5px;
        font-size: 12px !important;
    }
    /* FIX TICK BỰ — ép kích thước icon */
    .page-category .product-item.pi-card .pi-stock-icon,
    .page-category .product-item .pi-stock-icon {
        width: 14px !important;
        height: 14px !important;
        flex: 0 0 14px !important;
        max-width: 14px !important;
        max-height: 14px !important;
    }
    .page-category .product-item.pi-card .pi-stock.is-in { color: #1aab3a !important; }
    .page-category .product-item.pi-card .pi-stock.is-out { color: #888 !important; }
    .page-category .product-item.pi-card .pi-stock span {
        text-decoration: none !important;
        font-size: 12px !important;
    }

    /* ============ 6. DANH MỤC CON (chips scroll ngang) ============ */
    .page-category .box-content-category { margin: 0 !important; }
    .page-category .box-content-category .category-child {
        padding: 12px 10px !important;
        margin: 0 0 12px !important;
        background: #fff !important;
        border-radius: 10px !important;
        gap: 14px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        justify-content: flex-start !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        list-style: none !important;
    }
    .page-category .box-content-category .category-child::-webkit-scrollbar { display: none; }
    .page-category .box-content-category .category-child li {
        width: auto !important;
        flex: 0 0 auto !important;
        min-width: 72px;
        list-style: none !important;
    }
    .page-category .box-content-category .category-child li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none !important;
        color: #222 !important;
    }
    .page-category .box-content-category .category-child .border-img {
        width: 54px !important;
        height: 54px !important;
        margin: 0 auto 6px !important;
        border-radius: 50%;
        background: #f0f0f0;
    }
    .page-category .box-content-category .category-child img {
        width: 30px !important;
        height: 30px !important;
        object-fit: contain;
    }
    .page-category .box-content-category .category-child li .txt {
        width: auto !important;
        white-space: normal !important;
        height: auto !important;
        font-size: 12px !important;
        line-height: 16px !important;
        text-align: center;
        padding: 0 4px !important;
        max-width: 90px;
    }

    /* ============ 7. BOX LIST PRODUCT (sort + grid) ============ */
    .page-category .box-content-category .box-list-product-category {
        padding: 10px !important;
        margin: 0 0 14px !important;
        background: #fff !important;
        border-radius: 10px !important;
    }
    .page-category .box-sort-category {
        flex-wrap: wrap !important;
        gap: 8px;
        padding: 4px 0 8px;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 10px;
    }
    .page-category .box-sort-category .product-sort {
        width: 100%;
        gap: 8px !important;
        align-items: center;
        flex-wrap: nowrap;
        display: flex !important;
    }
    .page-category .box-sort-category .product-sort p {
        margin: 0 !important;
        font-size: 13px !important;
        color: #444 !important;
        font-weight: 500;
        flex: 0 0 auto;
    }
    .page-category .box-sort-category .product-sort .sort-pro {
        flex: 1 1 auto;
        padding: 7px 10px !important;
        border: 1px solid #d6d6d6 !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        background: #fff !important;
        color: #222 !important;
        max-width: 240px;
    }
    .page-category .box-sort-category .sort-option {
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100%;
    }
    .page-category .box-sort-category .sort-option .item {
        padding: 6px 10px !important;
        font-size: 12px !important;
        line-height: 14px !important;
        border: 1px solid #ececec !important;
        border-radius: 16px !important;
        color: #3a3a3a !important;
        text-decoration: none !important;
        background: #f8f8f8 !important;
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
    }
    .page-category .box-sort-category .sort-option .item span { text-decoration: none !important; }
    .page-category .box-sort-category .sort-option .item:hover,
    .page-category .box-sort-category .sort-option .item.selected {
        color: #fff !important;
        background: #ed7b23 !important;
        border-color: #ed7b23 !important;
    }
    .page-category .box-sort-category .sort-option .item i { display: none !important; }

    /* ============ 8. GRID SẢN PHẨM 2 CỘT ============ */
    .page-category .list-product-category {
        margin: 8px 0 14px !important;
    }
    .page-category .list-product-category.grid,
    .page-category .list-product-category.grid--2-cols,
    .page-category .list-product-category.grid--5-cols {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .page-category .list-product-category .product-item {
        width: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
    }

    /* ============ 9. FILTER SIDEBAR (chip + accordion) ============ */
    .page-category .box-filter-category {
        background: #fff !important;
        padding: 10px !important;
        margin: 0 0 12px !important;
        border-radius: 10px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    }
    /* Force 1 column layout cho "title + content" (đang d-flex gap-10) */
    .page-category .box-filter-category .info-filter-category {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        position: static !important;
    }
    .page-category .box-filter-category .info-filter-category:first-child { padding-top: 2px !important; }
    .page-category .box-filter-category .info-filter-category:last-child {
        border-bottom: 0 !important;
        padding-bottom: 2px !important;
    }
    .page-category .box-filter-category .info-filter-category .title {
        width: 100% !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: #222 !important;
        margin: 0 0 4px !important;
        padding: 0 !important;
    }
    .page-category .box-filter-category .list-filter-category {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        overflow: visible !important;
        white-space: normal !important;
        flex: none !important;
    }
    .page-category .box-filter-category .list-filter-category .item {
        position: relative !important;
        background: #f8f8f8 !important;
        border: 1px solid #ececec !important;
        border-radius: 16px !important;
        padding: 5px 12px !important;
        font-size: 12.5px !important;
        color: #333 !important;
        cursor: pointer;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    .page-category .box-filter-category .list-filter-category .item > a,
    .page-category .box-filter-category .list-filter-category .item > div {
        color: inherit !important;
        text-decoration: none !important;
    }
    .page-category .box-filter-category .list-filter-category .item span,
    .page-category .box-filter-category .list-filter-category .item i {
        font-size: 12.5px !important;
        color: inherit !important;
        margin: 0 !important;
        line-height: 1 !important;
    }
    .page-category .box-filter-category .list-filter-category .item i.fa-sort-down {
        margin-bottom: 2px !important;
        margin-left: 4px !important;
        font-size: 10px !important;
    }
    /* Dropdown <ul>: từng option xếp dọc, không dính chùm */
    .page-category .box-filter-category .list-filter-category .item ul {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #fff !important;
        box-shadow: none !important;
        border: 1px solid #ececec !important;
        border-radius: 8px !important;
        padding: 6px 12px !important;
        margin: 6px 0 0 !important;
        display: none !important;
        list-style: none !important;
        flex-direction: column !important;
    }
    .page-category .box-filter-category .list-filter-category .item.active {
        background: #fff !important;
        border-color: #ed7b23 !important;
        color: #ed7b23 !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        border-radius: 8px !important;
    }
    .page-category .box-filter-category .list-filter-category .item.active ul,
    .page-category .box-filter-category .list-filter-category .item:focus-within ul {
        display: flex !important;
    }
    /* Force <li> dropdown thành block dọc, override d-flex gap-4 từ filter.tpl */
    .page-category .box-filter-category .list-filter-category .item ul li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        border-bottom: 1px solid #f5f5f5;
        gap: 0 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .page-category .box-filter-category .list-filter-category .item ul li:last-child {
        border-bottom: 0 !important;
    }
    .page-category .box-filter-category .list-filter-category .item ul li a {
        display: block !important;
        width: 100% !important;
        padding: 8px 0 !important;
        color: #444 !important;
        font-size: 12.5px !important;
        text-decoration: none !important;
        line-height: 18px !important;
        white-space: normal !important;
    }
    .page-category .box-filter-category .list-filter-category .item ul li a:hover,
    .page-category .box-filter-category .list-filter-category .item ul li a.active {
        color: #ed7b23 !important;
    }
    .page-category .box-filter-category .list-filter-category .item.current,
    .page-category .box-filter-category .list-filter-active .item {
        background: #ed7b23 !important;
        color: #fff !important;
        border-color: #ed7b23 !important;
    }
    .page-category .box-filter-category .list-filter-active .item i.fa-xmark {
        margin-left: 6px !important;
        font-size: 11px !important;
    }
    .page-category .box-filter-category .list-filter-active .delete-filter-all {
        background: #d70018 !important;
        color: #fff !important;
        border-color: #d70018 !important;
    }

    /* ============ 10. PAGINATION ============ */
    .page-category .pagination,
    .page-category .paging,
    .page-category .paging ul {
        list-style: none !important;
        list-style-type: none !important;
        margin: 16px 0 4px !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap;
        gap: 6px;
    }
    .page-category .pagination li,
    .page-category .paging li {
        list-style: none !important;
        list-style-type: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .page-category .pagination li::before,
    .page-category .pagination li::marker,
    .page-category .paging li::before,
    .page-category .paging li::marker {
        content: none !important;
        display: none !important;
    }
    .page-category .pagination a,
    .page-category .pagination span,
    .page-category .paging a,
    .page-category .paging span {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 32px;
        padding: 0 10px !important;
        margin: 0 !important;
        background: #fff !important;
        border: 1px solid #e1e1e1 !important;
        border-radius: 4px !important;
        color: #3a3a3a !important;
        font-size: 13px !important;
        font-weight: 500;
        line-height: 1 !important;
        text-decoration: none !important;
    }
    .page-category .pagination a.current,
    .page-category .pagination a:hover,
    .page-category .pagination .active a,
    .page-category .pagination .active span,
    .page-category .paging a.current,
    .page-category .paging a:hover,
    .page-category .paging .active a,
    .page-category .paging .active span {
        background: #ed7b23 !important;
        border-color: #ed7b23 !important;
        color: #fff !important;
        font-weight: 600;
    }

    /* ============ 11. KHỐI MÔ TẢ + FAQ ============ */
    .page-category .box-static-category {
        flex-wrap: wrap !important;
        margin: 14px 0 8px !important;
        gap: 12px !important;
    }
    .page-category .box-static-category .box-descreption-category { width: 100% !important; }
    .page-category .box-static-category .box-static-content-category {
        padding: 12px !important;
        border-radius: 10px !important;
        background: #fff !important;
        position: relative;
    }
    .page-category .box-static-category .info-descreption-category .static-html {
        max-height: 280px !important;
        font-size: 14px;
        line-height: 22px;
        overflow: hidden;
        position: relative;
    }
    .page-category .box-static-category .info-descreption-category .static-html.active {
        max-height: initial !important;
    }
    .page-category .box-static-category .btn-article-productList {
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 0 !important;
        font-size: 13px !important;
        padding: 10px 0 !important;
        border-radius: 8px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        background: #fff;
        border: 1px solid #e1e1e1;
        color: #444;
    }

    /* ============ 12. FAQ ============ */
    .page-category .box-question {
        background: #fff !important;
        padding: 14px 12px !important;
        border-radius: 10px !important;
        margin-top: 12px;
    }
    .page-category .box-question .title-question {
        font-size: 15px !important;
        font-weight: 700 !important;
        margin: 0 0 10px !important;
        color: #000 !important;
    }
    .page-category .box-question .item-question {
        background: #fafafa !important;
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
    }
    .page-category .box-question .item-question .title-item p {
        font-size: 13.5px !important;
        line-height: 18px !important;
        margin: 0 !important;
        flex: 1;
    }
    .page-category .box-question .item-question .content-question {
        margin: 8px 0 0 !important;
        padding-left: 16px !important;
        font-size: 13px !important;
        line-height: 20px !important;
        color: #444 !important;
        list-style: disc !important;
    }
}

@media (max-width: 480px) {
    .page-category .name-category { font-size: 18px !important; line-height: 24px !important; }
    .page-category .box-top-product-categroy .title { font-size: 15px !important; }
    .page-category .list-product-category.grid { gap: 8px !important; }
    .page-category .product-item.pi-card .pi-name { font-size: 12.5px !important; }
    .page-category .product-item.pi-card .pi-price-now { font-size: 15px !important; }
    .global-breadcrumb ol li a span,
    .global-breadcrumb ol li .gach-cheo { font-size: 12px !important; }
    .page-category .pagination a,
    .page-category .paging a { min-width: 28px; height: 28px; padding: 0 8px !important; font-size: 12px !important; }
}