/* mmsp-filter-css */ /* Dải nút danh mục đã làm đúng việc của ô "Danh mục sản phẩm", giữ cả hai trên màn hình hẹp chỉ tổ đẩy sản phẩm xuống sâu. */ @media (max-width: 849px) { .widget_product_categories, .widget.woocommerce.widget_product_categories { display: none !important; } } /* Nút "Phân loại sản phẩm" mở ngăn lọc bên phải của theme. Phải ẩn cả KHUNG BỌC (.category-filtering / .category-filter-row) chứ không chỉ thẻ liên kết bên trong, nếu không khung rỗng vẫn chiếm một hàng. Chữ trên nút do Customizer đặt ở ô "Filter text", nên không thể tìm theo chữ, phải bắt theo lớp. */ .category-filtering, .category-filter-row, .filter-button, a[data-open="#shop-sidebar"] { display: none !important; } .mmsp-sortbar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; width: 100%; margin: 0 0 14px; padding: 0; } .mmsp-sortbar-icon { display: inline-flex; color: #71675C; margin-right: 2px; } .mmsp-sortbar-label { color: #342A22; font-size: 14.5px; font-weight: 600; margin-right: 6px; } .mmsp-sort-item { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; color: #60564C !important; font-size: 14.5px; line-height: 1.3; text-decoration: none !important; border-radius: 999px; cursor: pointer; list-style: none; white-space: nowrap; transition: background .15s ease, color .15s ease; } .mmsp-sort-item::-webkit-details-marker { display: none; } .mmsp-sort-item:hover { background: #F7F5F2; color: #342A22 !important; } .mmsp-sort-item.is-current, .mmsp-sort-drop.is-current > .mmsp-sort-item { color: var(--nhatdx-primary, #C67930) !important; font-weight: 600; } .mmsp-sort-drop { position: relative; } .mmsp-sort-caret { width: 0; height: 0; margin-left: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .18s ease; } .mmsp-sort-drop[open] .mmsp-sort-caret { transform: rotate(180deg); } .mmsp-sort-menu { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 190px; padding: 6px; background: #fff; border: 1px solid #EDEAE7; border-radius: 12px; box-shadow: 0 10px 30px rgba(53, 39, 28, .14); } .mmsp-sort-menu a { display: block; padding: 9px 12px; border-radius: 8px; color: #4E3F34 !important; font-size: 14.5px; text-decoration: none !important; white-space: nowrap; } .mmsp-sort-menu a:hover { background: #F7F5F2; } .mmsp-sort-menu a.is-current { color: var(--nhatdx-primary, #C67930) !important; font-weight: 600; } .mmsp-sortbar--header { margin: 0; justify-content: flex-end; } .mmsp-sortbar--header .mmsp-sort-menu { left: auto; right: 0; } /* Nút sắp xếp cuối hàng (thường là "Giá"): mở menu canh phải, không tràn khỏi màn hình điện thoại */ .mmsp-sort-drop:last-child .mmsp-sort-menu { left: auto; right: 0; } .page-title-inner .mmsp-sortbar { width: auto; } .mmsp-brandstrip { width: 100%; margin: 0 0 14px; } .mmsp-brandstrip.is-noarrow { padding: 0; } .mmsp-brandstrip .mmsp-catstrip-track { padding-right: 0 !important; } .mmsp-brandstrip-track { align-items: stretch; gap: 8px; } /* * Ô logo thương hiệu có kích thước CỐ ĐỊNH ở mọi nơi. * * min-width chỉ chặn mức nhỏ nhất, nên logo ngang dài đẩy ô rộng ra còn logo vuông * thì ô hẹp lại — hàng thương hiệu nhìn so le như xếp nhầm. Đặt width cố định thì * mọi ô bằng nhau, và ảnh tự co vừa bên trong chứ không kéo ô theo. * * Hai biến ở :root để chỗ nào gắn thêm về sau cũng lấy đúng một cỡ, khỏi đặt lại số. */ :root { --nx-brand-w: 108px; --nx-brand-h: 42px; } /* * Dùng !important cho kích thước ô. * * Flatsome đặt quy tắc riêng cho thẻ liên kết và ảnh trong nội dung sản phẩm, và * quy tắc của nó nạp sau nên thắng. Không ép ưu tiên thì ô vẫn nở theo logo — đúng * cái đã xảy ra ở bản trước. */ .mmsp-brand { flex: 0 0 auto !important; display: inline-flex !important; align-items: center; justify-content: center; width: var(--nx-brand-w) !important; height: var(--nx-brand-h) !important; min-width: var(--nx-brand-w) !important; max-width: var(--nx-brand-w) !important; padding: 5px 8px !important; box-sizing: border-box !important; overflow: hidden !important; background: #fff; border: 1.5px solid #CDC4BB; border-radius: 9px; text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease; } /* * Ảnh giới hạn theo CẢ hai chiều. * * Chỉ chặn chiều cao thì logo ngang dài vẫn tràn ngang và bị cắt mất hai đầu. * max-width 100% cộng object-fit contain giữ trọn logo trong ô, tỉ lệ không méo. */ .mmsp-brand img, .mmsp-brand picture, .mmsp-brand picture img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; object-fit: contain !important; display: block !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; } /* Chữ thay logo khi thương hiệu chưa có ảnh: cắt bớt thay vì kéo ô rộng ra */ .mmsp-brand .mmsp-brand-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .mmsp-brand-text { color: #4E3F34; font-size: 12.5px; font-weight: 600; white-space: nowrap; } .mmsp-brand:hover { border-color: #EFD9C2; box-shadow: 0 4px 14px rgba(52, 42, 34, .07); } .mmsp-brand.is-current { border-color: var(--nhatdx-primary, #C67930); box-shadow: inset 0 0 0 1px var(--nhatdx-primary, #C67930); } .mmsp-brand.is-current .mmsp-brand-text { color: var(--nhatdx-primary, #C67930); } .mmsp-brand-all { min-width: 0; } /* Điện thoại và iPad mini: bỏ biểu tượng phễu cùng chữ "Sắp xếp theo", chỉ còn một hàng gồm 4 mục căn giữa. */ .mmsp-catstrip-item.is-up { background: #fff !important; border-style: dashed !important; } .mmsp-catstrip-up { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); vertical-align: middle; position: relative; top: -1px; } /* Hàng Thương hiệu + Mã sản phẩm. Dùng flex có xuống dòng: màn hình rộng thì hai cụm nằm cùng hàng, màn hình hẹp thì cụm mã sản phẩm tự rơi xuống dòng dưới thay vì bị bóp méo. */ .mmsp-brand-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 14px; padding: 0; } .mmsp-brand-meta-part { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } /* Vạch ngăn dùng ::after của cụm ĐỨNG TRƯỚC. Trước đây tôi dùng ::before của cụm đứng sau, mà ::before đang là chấm tròn — nên chấm trước chữ "Mã sản phẩm" bị vạch ngăn ghi đè và biến mất. */ .mmsp-brand-meta-part:not(:last-child)::after { content: ''; display: inline-block; width: 1px; height: 16px; margin-left: 14px; background: #E9E5E0; vertical-align: middle; } .mmsp-brand-meta .nx-label-short { display: none; } .mmsp-sku-value { display: inline-block; padding: 4px 11px; background: #F8F6F3; border: 1px solid #EEEAE5; border-radius: 7px; color: #4E3F34; font-size: 13.5px; font-weight: 700; letter-spacing: .3px; } .mmsp-brand-meta-label { color: #342A22; font-size: 14px; font-weight: 700; } .mmsp-brand-meta-items { display: inline-flex; flex-wrap: wrap; gap: 8px; } /* Hàng dưới mã sản phẩm dùng cỡ nhỏ hơn một chút, nhưng vẫn là một cỡ cho mọi ô */ .mmsp-brand-meta-item { width: 96px !important; min-width: 96px !important; max-width: 96px !important; height: 38px !important; padding: 4px 8px !important; border-color: #C1B7AD; } .mmsp-brand-meta-item:hover { border-color: var(--nhatdx-primary, #C67930); } /* Màn hình hẹp: hàng Mã sản phẩm / Tình trạng / Sao / Thương hiệu rất dễ chật, thu nhỏ ô trạng thái và kéo chấm sát chữ để các trường không đè lên nhau. */ @media (max-width: 767px) { .nhatdx-product-meta .sku_wrapper::before, .custom-trang-thai-moi::before, .mmsp-brand-meta::before { margin-right: 3px !important; } /* Điện thoại: nhãn rút gọn thành "SKU:" và giữ cả hai cụm trên CÙNG MỘT HÀNG */ .mmsp-brand-meta { gap: 7px 12px; flex-wrap: nowrap; } .mmsp-brand-meta .nx-label-full { display: none; } .mmsp-brand-meta .nx-label-short { display: inline; } .mmsp-sku-value { padding: 3px 9px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mmsp-brand-meta-item { flex: 0 0 auto !important; } .custom-trang-thai-moi { font-size: 12px !important; } .custom-trang-thai-moi .value, .custom-trang-thai-moi .value.con-hang { margin-left: 3px !important; padding: 1px 5px 1px 17px !important; border-radius: 3px !important; font-size: 10.5px !important; background-size: 9px !important; background-position: 4px center !important; } .custom-trang-thai-moi .value.het-hang, .custom-trang-thai-moi .value.cho-hang, .custom-trang-thai-moi .value.tam-ngung { padding: 1px 6px !important; } .mmsp-brand-meta-label { font-size: 12.5px !important; } } /* Bản trong hàng tiêu đề chỉ dùng cho máy tính, bản trên danh sách sản phẩm chỉ dùng cho điện thoại — nhờ vậy trên điện thoại dải nút danh mục luôn đứng trước phần sắp xếp. */ .mmsp-sortbar--loop { display: none; } @media (max-width: 849px) { .mmsp-sortbar--header { display: none !important; } .mmsp-sortbar--loop { display: flex !important; } .mmsp-sortbar-icon, .mmsp-sortbar-label { display: none !important; } .mmsp-sortbar, .mmsp-sortbar--header { width: 100%; margin: 0 0 12px; justify-content: center; flex-wrap: nowrap; gap: 0; } } @media (max-width: 767px) { .mmsp-sortbar-label { font-size: 13.5px; } .mmsp-sort-item { padding: 5px 9px; font-size: 13.5px; } .mmsp-brand { height: 35px; min-width: 64px; padding: 4px 9px; } /* Màn hình hẹp: thu cả ô, không chỉ thu ảnh — ảnh nhỏ trong ô to nhìn trống trải */ .mmsp-brand { width: 92px !important; min-width: 92px !important; max-width: 92px !important; height: 38px !important; } .mmsp-brand-meta-item { width: 84px !important; min-width: 84px !important; max-width: 84px !important; height: 34px !important; } }