/* Product/order media: always show the whole uploaded artwork. */
:root{--product-purple:#9b87f5;--product-purple-bg:rgba(139,112,235,.12);--product-purple-border:rgba(155,135,245,.28)}

/* Every product card follows the tallest card in the grid. */
.sp-grid{
  grid-auto-rows:1fr!important;
  align-items:stretch!important;
}
.sp-card{
  width:100%!important;
  min-width:0!important;
  height:100%!important;
  align-self:stretch!important;
}
.sp-card-body{height:100%!important;min-width:0!important}

.sp-card-banner,
.pm-left-img,
.pd-hero,
.od-product-img,
.od2-hero-img,
.detail-logo,
.pm-mh-thumb{
  background:#0b0c10!important;
}

/* Khung tự lấy đúng tỷ lệ ảnh thay vì ép mọi ảnh vào banner 16:9. */
.sp-card-banner,
.pm-left-img,
.pd-hero{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
}
.sp-card-banner-placeholder{min-height:150px}.pm-left-img-placeholder{min-height:170px}.pd-hero-placeholder{min-height:240px}

.sp-card-banner-img,
.pm-left-img img,
.pd-hero-img{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  transform:none!important;
  filter:none!important;
  box-shadow:none!important;
}

.od-product-img img,
.od2-hero-img img,
.detail-logo img,
.pm-mh-thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:4px!important;
  transform:none!important;
  filter:none!important;
  box-shadow:none!important;
}

.sp-card:hover .sp-card-banner-img,
.pd-hero:hover .pd-hero-img{
  transform:none!important;
}

/* Keep the artwork clear instead of covering it with a dark gradient. */
.sp-card-banner-overlay,
.pm-left-img-overlay,
.pd-hero-overlay{
  background:linear-gradient(to bottom,transparent 72%,rgba(0,0,0,.24))!important;
  pointer-events:none;
}

/* Flat purple platform badges — no neon/glow. */
.sp-plat-badge,
.sp-plat-badge.plat-android,
.sp-plat-badge.plat-ios,
.sp-plat-badge.plat-macos,
.sp-plat-badge.plat-windows,
.sp-plat-badge.plat-pc,
.sp-plat-badge.plat-web,
.sp-plat-badge.plat-other,
.pd-plat-badge,
.pd-plat-badge.plat-android,
.pd-plat-badge.plat-ios,
.pd-plat-badge.plat-macos,
.pd-plat-badge.plat-windows,
.pd-plat-badge.plat-pc,
.pd-plat-badge.plat-web{
  color:var(--product-purple)!important;
  background:var(--product-purple-bg)!important;
  border:1px solid var(--product-purple-border)!important;
  box-shadow:none!important;
  text-shadow:none!important;
  filter:none!important;
  animation:none!important;
}

/* Warehouse, packages, sold and check icons. */
.sp-stat i,
.pd-stat>i,
.pm-section-label i,
.psc-row-lbl i,
.sp-feature-list li::before,
.pm-feature-list li::before,
.pd-feature-list li::before{
  color:var(--product-purple)!important;
  text-shadow:none!important;
  filter:none!important;
  box-shadow:none!important;
  animation:none!important;
}

.sp-stat i,.pd-stat>i{font-size:.76rem!important}

/* The detail-page check is an encoded SVG, so replace the SVG itself. */
.pd-feature-list li::before{
  content:''!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  border-radius:6px!important;
  margin-top:2px!important;
  background-color:var(--product-purple-bg)!important;
  border:1px solid var(--product-purple-border)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5L4.8 9.5L10 3.5' stroke='%239b87f5' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-size:12px!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

/* Package availability checks use a real icon rather than a pseudo element. */
.pd-pkg-stock.ok,
.pd-pkg-stock.ok i,
.pd-panel-title i,
.pd-section-label i{
  color:var(--product-purple)!important;
  text-shadow:none!important;
  filter:none!important;
  box-shadow:none!important;
}

@media(max-width:540px){
  .sp-card-banner-img,.pm-left-img img,.pd-hero-img{padding:0!important}
}