/* ===== Nut yeu thich — dung chung cho moi template =====
   Tu mang kieu rieng, khong phu thuoc CSS cua tung theme, de mot lan sua
   la ca 16 template cung doi. Mau chu lay theo currentColor cua theme. */

.card, .prod, .ccard, .sf-card { position: relative; }

.sf-fav{
  position:absolute; top:10px; right:10px; z-index:6;
  width:36px; height:36px; padding:0; border:0; border-radius:999px;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.92); color:#6b6b6b;
  box-shadow:0 3px 10px rgba(0,0,0,.13);
  transition:transform .16s, color .16s, background .16s;
}
.sf-fav svg{ width:17px; height:17px; display:block; fill:none;
  stroke:currentColor; stroke-width:1.9; stroke-linejoin:round; }
.sf-fav:hover{ transform:scale(1.09); color:#e0355c; background:#fff; }
.sf-fav.on{ color:#e0355c; }
.sf-fav.on svg{ fill:#e0355c; stroke:#e0355c; }
.sf-fav:focus-visible{ outline:2px solid #e0355c; outline-offset:2px; }

/* nut yeu thich tren trang chi tiet san pham — nam canh nut them gio */
.sf-fav-pd{
  position:static; width:auto; height:auto; gap:9px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 20px; border-radius:999px;
  background:transparent; color:inherit; box-shadow:none;
  border:1.5px solid currentColor; font:inherit; font-size:13px; font-weight:700;
  opacity:.75;
}
.sf-fav-pd:hover{ transform:none; opacity:1; color:#e0355c; background:transparent; }
.sf-fav-pd.on{ color:#e0355c; opacity:1; }

/* bieu tuong trai tim tren thanh dieu huong */
.sf-fav-nav{ position:relative; display:inline-flex; }
.sf-fav-nav .sf-bub{
  position:absolute; top:-5px; right:-6px; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:#e0355c; color:#fff;
  font-size:10px; font-weight:800; line-height:17px; text-align:center;
}
.sf-fav-nav .sf-bub[hidden]{ display:none; }

/* ===== Trang danh sach yeu thich ===== */
.sf-fv-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:22px; }
.sf-fv-card{ position:relative; border:1px solid rgba(0,0,0,.09); border-radius:14px; overflow:hidden; }
.sf-fv-img{ display:block; width:100%; aspect-ratio:1/1; background-size:cover; background-position:center; }
.sf-fv-b{ padding:13px 14px 15px; }
.sf-fv-n{ font-size:13.5px; font-weight:600; line-height:1.45; margin-bottom:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sf-fv-n a{ color:inherit; text-decoration:none; }
.sf-fv-p{ font-size:14px; font-weight:800; margin-bottom:11px; }
.sf-fv-acts{ display:grid; gap:7px; }
.sf-fv-acts button{ font:inherit; font-size:12.5px; font-weight:700; padding:9px 12px;
  border-radius:999px; cursor:pointer; border:1.5px solid currentColor; background:transparent; color:inherit; }
.sf-fv-acts .sf-fv-add{ background:currentColor; border-color:currentColor; }
.sf-fv-acts .sf-fv-add span{ color:#fff; mix-blend-mode:normal; }
.sf-fv-empty{ text-align:center; padding:56px 20px; opacity:.72; font-size:14px; line-height:1.9; }
@media(max-width:640px){ .sf-fv-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; } }