/* AFF Showcase – lưới sản phẩm. Đổi màu bằng các biến bên dưới (có thể ghi đè trong Giao diện → Tùy biến → CSS bổ sung). */
.affs{
  --affs-surface:#ffffff; --affs-ink:#141a26; --affs-muted:#5d6678; --affs-line:#dde2ea;
  --affs-soft:#f3f5f8; --affs-accent:#e5481f; --affs-accent-ink:#ffffff; --affs-sale:#d23a14;
  --affs-cols:3;
  font-family:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--affs-ink);
}
.affs *{box-sizing:border-box}
.affs-grid{display:grid;grid-template-columns:repeat(var(--affs-cols),minmax(0,1fr));gap:24px}
@media (max-width:960px){.affs-grid{grid-template-columns:repeat(min(var(--affs-cols),2),minmax(0,1fr))}}
@media (max-width:600px){.affs-grid{grid-template-columns:minmax(0,1fr)}}

.affs-card{background:var(--affs-surface);border:1px solid var(--affs-line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;min-width:0;margin:0}
.affs-card.affs-new{animation:affs-in .35s ease both}
@keyframes affs-in{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}

.affs-stage{position:relative;aspect-ratio:1/1;max-width:100%;background:var(--affs-soft)}
.affs-stage img,.affs-stage video{display:block;width:100%;height:100%;max-width:100%;object-fit:contain;margin:0;border:0;border-radius:0}
.affs-stage video{background:#000}
.affs-stage img{background:var(--affs-surface)}
.affs-badge{position:absolute;z-index:2;top:10px;left:10px;background:var(--affs-sale);color:#fff;font-weight:700;font-size:12px;line-height:1;
  padding:6px 8px;border-radius:6px}

.affs-thumbs{display:flex;gap:6px;padding:8px;overflow-x:auto;scrollbar-width:thin;border-bottom:1px solid var(--affs-line)}
.affs .affs-thumb{flex:0 0 52px;width:52px;height:52px;padding:0;margin:0;border:2px solid transparent;border-radius:8px;overflow:hidden;
  background:var(--affs-soft);cursor:pointer;position:relative;box-shadow:none;min-height:0;line-height:0}
.affs-thumb img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.affs .affs-thumb[aria-current="true"]{border-color:var(--affs-accent)}
.affs-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.35)}
.affs-play::before{content:"";border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}

.affs-info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.affs .affs-name{font-size:15px;font-weight:500;line-height:1.4;margin:0;padding:0;color:var(--affs-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em;text-transform:none;letter-spacing:0}
.affs-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.affs-now{font-weight:800;font-size:20px;line-height:1;color:var(--affs-sale)}
.affs-was{color:var(--affs-muted);text-decoration:line-through;font-size:13px}

.affs .affs-buy{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--affs-accent);color:var(--affs-accent-ink);text-decoration:none;font-weight:700;font-size:15px;line-height:1;
  padding:14px 16px;border-radius:10px;transition:filter .15s,transform .15s;border:0}
.affs .affs-buy:hover,.affs .affs-buy:focus{color:var(--affs-accent-ink);filter:brightness(1.07);transform:translateY(-1px);text-decoration:none}
.affs-buy svg{width:16px;height:16px;flex:none}

.affs-more-row{display:flex;justify-content:center;margin-top:36px}
.affs .affs-more{font-weight:700;font-size:15px;line-height:1;color:var(--affs-ink);background:transparent;border:2px solid var(--affs-ink);
  padding:14px 28px;border-radius:999px;cursor:pointer;text-transform:none;letter-spacing:0}
.affs .affs-more:hover{background:var(--affs-ink);color:var(--affs-surface)}
.affs .affs-more[disabled]{opacity:.6;cursor:wait}
.affs .affs-thumb:focus-visible,.affs .affs-buy:focus-visible,.affs .affs-more:focus-visible{outline:3px solid var(--affs-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.affs-buy{transition:none}.affs-card.affs-new{animation:none}}