/* SAPAMEFA V9.18 — Canonical Product Listing and Pagination System */
.sapamefa-listing{padding-block:var(--smf-section-compact) var(--smf-section-standard);background:var(--smf-color-surface)}
.sapamefa-listing__container{width:min(var(--smf-container-content),calc(100% - var(--smf-gutter)*2));margin-inline:auto}
.sapamefa-listing__toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--smf-space-5);margin-bottom:var(--smf-space-8);padding-bottom:var(--smf-space-5);border-bottom:var(--smf-border-width-hairline) solid var(--smf-color-border)}
.sapamefa-listing__count{margin:0;color:var(--smf-color-text-muted);font-size:var(--smf-font-size-md);line-height:var(--smf-line-compact)}
.sapamefa-listing__count strong{color:var(--smf-color-text-strong);font-weight:var(--smf-font-weight-semibold)}
.sapamefa-listing__sort{display:flex;align-items:center;gap:var(--smf-space-3)}
.sapamefa-listing__sort label{color:var(--smf-color-text-muted);font-size:var(--smf-type-eyebrow-size);font-weight:var(--smf-type-eyebrow-weight);line-height:var(--smf-type-eyebrow-line);letter-spacing:var(--smf-type-eyebrow-tracking);text-transform:var(--smf-type-eyebrow-transform)}
.sapamefa-listing__sort select{min-width:220px;height:var(--smf-height-control);padding-inline:var(--smf-space-4);border:var(--smf-border-width-hairline) solid var(--smf-color-border);border-radius:var(--smf-radius-control);background:var(--smf-color-surface);color:var(--smf-color-text);font:inherit}
.sapamefa-listing__sort select:hover{border-color:var(--smf-color-border-strong)}
.sapamefa-listing__sort select:focus-visible{border-color:var(--smf-color-teal);outline:var(--smf-border-width-emphasis) solid var(--smf-color-focus);outline-offset:var(--smf-focus-offset)}
.sapamefa-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.sapamefa-product-card{width:100%;min-width:0;max-width:none;height:100%;display:flex;flex-direction:column;overflow:hidden;border:var(--smf-border-width-hairline) solid var(--smf-color-border);border-radius:var(--smf-radius-card);background:var(--smf-color-surface-soft);text-align:center;transition:border-color var(--smf-motion-control) var(--smf-ease-standard),background-color var(--smf-motion-control) var(--smf-ease-standard)}
.sapamefa-product-card:hover,.sapamefa-product-card:focus-within{border-color:var(--smf-color-teal-52);background:var(--smf-color-surface)}
.sapamefa-product-card__media-wrap{padding:var(--smf-space-3) var(--smf-space-3) 0}
.sapamefa-product-card__media{position:relative;width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;border:var(--smf-border-width-hairline) solid var(--smf-color-border-soft);border-radius:var(--smf-radius-control);background:var(--smf-color-surface);color:inherit;cursor:pointer}
.sapamefa-product-card__media>img{display:block;max-width:100%;width:100%;height:100%;object-fit:contain;padding:var(--smf-space-3);transition:transform var(--smf-motion-image) var(--smf-ease-emphasized)}
.sapamefa-product-card:hover .sapamefa-product-card__media>img,.sapamefa-product-card:focus-within .sapamefa-product-card__media>img{transform:scale(1.03)}
.sapamefa-product-card__body{flex:1;display:flex;flex-direction:column;align-items:center;padding:var(--smf-space-4)}
.sapamefa-product-card__title{min-height:calc(var(--smf-type-product-card-title-size)*var(--smf-line-title)*var(--smf-card-title-lines));display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--smf-card-title-lines);overflow:hidden;margin:0;color:var(--smf-color-text-strong);font-size:var(--smf-type-product-card-title-size);font-weight:var(--smf-type-card-title-weight);line-height:var(--smf-line-title);letter-spacing:var(--smf-tracking-normal);text-transform:none}
.sapamefa-product-card__title a{color:inherit;text-decoration:none}.sapamefa-product-card__title a:hover,.sapamefa-product-card__title a:focus-visible{color:var(--smf-color-link-hover)}

.sapamefa-product-card__action{display:inline-flex;align-items:center;gap:var(--smf-space-2);margin-top:auto;padding-top:var(--smf-space-4);color:var(--smf-color-link);font-size:var(--smf-button-font-size);font-weight:var(--smf-button-font-weight);line-height:var(--smf-button-line-height);letter-spacing:var(--smf-button-tracking);text-decoration:none;text-transform:var(--smf-button-transform)}
.sapamefa-product-card__action:hover,.sapamefa-product-card__action:focus-visible{color:var(--smf-color-link-hover)}
.sapamefa-pagination{display:flex;align-items:center;justify-content:center;gap:var(--smf-space-3);margin-top:var(--smf-space-10)}
.sapamefa-pagination__pages{display:flex;align-items:center;gap:var(--smf-space-2);margin:0;padding:0;list-style:none}
.sapamefa-pagination__control,.sapamefa-pagination__pages>li>a,.sapamefa-pagination__pages>li>span{min-width:var(--smf-height-control);height:var(--smf-height-control);display:inline-flex;align-items:center;justify-content:center;padding-inline:var(--smf-space-3);border:var(--smf-border-width-hairline) solid var(--smf-color-border);border-radius:var(--smf-radius-control);background:var(--smf-color-surface);color:var(--smf-color-text);font-size:var(--smf-type-sm);font-weight:var(--smf-font-weight-semibold);line-height:var(--smf-line-control);letter-spacing:var(--smf-tracking-control);font-variant-numeric:tabular-nums lining-nums;text-decoration:none}
.sapamefa-pagination__control{min-width:auto;gap:var(--smf-space-2);padding-inline:var(--smf-space-4);white-space:nowrap}
.sapamefa-pagination__control>span,.sapamefa-pagination__control>i{width:auto;height:auto;min-width:0;display:inline;flex:0 0 auto;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit}
.sapamefa-pagination__control>i{line-height:1}
.sapamefa-pagination__control>span{line-height:var(--smf-line-control)}
.sapamefa-pagination__control:hover,.sapamefa-pagination__control:focus-visible,.sapamefa-pagination__pages>li>a:hover,.sapamefa-pagination__pages>li>a:focus-visible,.sapamefa-pagination__pages .is-current{border-color:var(--smf-color-teal);background:var(--smf-color-teal);color:var(--smf-color-white)}
.sapamefa-pagination a:hover,.sapamefa-pagination a:focus-visible{transform:none!important}
.sapamefa-pagination .is-disabled{opacity:.45;cursor:not-allowed}.sapamefa-pagination__pages .is-gap{border-color:transparent;background:transparent}
.sapamefa-listing-skeleton{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--smf-space-6)}
.sapamefa-listing-skeleton__card{aspect-ratio:3/4;border-radius:var(--smf-radius-card);background:var(--smf-color-surface-soft);animation:sapamefa-listing-pulse var(--smf-motion-slow) ease-in-out infinite alternate}
@keyframes sapamefa-listing-pulse{to{opacity:.5}}
/* Product grid contract — HIEU-CHINH-02: 4/3/2/2/1 columns at 1300/992/768/576px,
   gap 32/28/24/20/16px at 1600/1300/992/768px so four cards dàn đều as the
   shared inner grows to the Hero's actual width. Breakpoints are the locked
   contract values and intentionally do not reuse the T1 breakpoint registry. */
@media(max-width:1599px){.sapamefa-product-grid,.sapamefa-listing-skeleton{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}}
@media(max-width:1299px){.sapamefa-product-grid,.sapamefa-listing-skeleton{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
@media(max-width:991px){.sapamefa-product-grid,.sapamefa-listing-skeleton{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media(max-width:767px){.sapamefa-listing{padding-block:var(--smf-section-compact)}.sapamefa-listing__toolbar{align-items:stretch;flex-direction:column}.sapamefa-listing__sort{align-items:stretch;flex-direction:column}.sapamefa-listing__sort select{width:100%;min-width:0}.sapamefa-product-grid,.sapamefa-listing-skeleton{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.sapamefa-pagination__pages li:not(:first-child):not(:last-child):not(:has(.is-current)){display:none}.sapamefa-pagination__control span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media(max-width:575px){.sapamefa-product-grid,.sapamefa-listing-skeleton{grid-template-columns:1fr;gap:16px}}
@media(prefers-reduced-motion:reduce){.sapamefa-product-card,.sapamefa-product-card__media>img,.sapamefa-listing-skeleton__card{transition:none!important;animation:none!important}}

@media(max-width:389px){.sapamefa-pagination{gap:var(--smf-space-2)}.sapamefa-pagination__control,.sapamefa-pagination__pages>li>a,.sapamefa-pagination__pages>li>span{min-width:var(--smf-touch-target);padding-inline:var(--smf-space-2)}.sapamefa-pagination__control{min-width:var(--smf-touch-target)}.sapamefa-product-card__body{padding:var(--smf-space-3)}}

/* SAPAMEFA V10.7 — Canonical transparent rounded product-media frame.
   The frame remains structurally present but visually transparent. */
.sapamefa-product-card__media {
  border: var(--smf-border-width-hairline) solid var(--smf-color-transparent);
  border-radius: var(--smf-radius-control);
  background: var(--smf-color-transparent);
  overflow: hidden;
}
.sapamefa-product-card__media > img,
.sapamefa-product-card__media .sapamefa-media-placeholder {
  max-width: 100%;
  max-height: 100%;
  border-radius: inherit;
  object-fit: contain;
}
.sapamefa-product-card__media > img {
  box-sizing: border-box;
  clip-path: inset(0 round var(--smf-radius-control));
}


/* SAPAMEFA V10.9 — Canonical Product Card interaction. */
.sapamefa-product-card {
  position: relative;
  z-index: 0;
  cursor: pointer;
  will-change: transform;
  box-shadow: none;
  transition:
    transform var(--smf-motion-control) var(--smf-ease-emphasized),
    box-shadow var(--smf-motion-control) var(--smf-ease-standard),
    border-color var(--smf-motion-control) var(--smf-ease-standard),
    background-color var(--smf-motion-control) var(--smf-ease-standard);
}
.sapamefa-product-card:focus-within {
  z-index: 2;
  transform: translateY(-8px);
  box-shadow: 0 16px 36px var(--smf-color-teal-10);
}
@media (hover: hover) and (pointer: fine) {
  .sapamefa-product-card:hover {
    z-index: 2;
    transform: translateY(-8px);
    box-shadow: 0 16px 36px var(--smf-color-teal-10);
  }
}
.sapamefa-product-card__media {
  cursor: pointer;
}
.sapamefa-product-card__body {
  justify-content: flex-start;
}
.sapamefa-product-card__title a {
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: color var(--smf-motion-fast) var(--smf-ease-standard);
}
.sapamefa-product-card__title a:hover,
.sapamefa-product-card__title a:focus-visible {
  color: var(--smf-color-teal);
}
.sapamefa-product-card__action {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .sapamefa-product-card,
  .sapamefa-product-card:hover,
  .sapamefa-product-card:focus-within {
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
  }
}