/* v1.0.96 - redesign voucher trang chủ */
.sf-home-voucher-section{
  background:linear-gradient(180deg,#fff 0%,#fffafb 100%);
  border:1px solid #f3dfe7;
  border-radius:18px;
  padding:16px 18px 20px;
  box-shadow:0 10px 28px rgba(232,92,134,.06);
}

.sf-home-voucher-section .sectionhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.sf-home-voucher-section .sectionhead h2{
  font-size:19px;
  line-height:1.2;
  margin:0;
  color:#2d2332;
}

.sf-home-voucher-section .sectionhead span{
  color:#8c7a86;
  font-size:13px;
}

.sf-home-vouchers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}

.sf-home-vouchers .voucher-card{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:76px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  width:100%;
  min-height:136px;
  padding:18px 18px 18px 16px;
  border:1px solid #f2d9e3;
  border-radius:22px;
  background:linear-gradient(135deg,#fff 0%,#fff7fa 100%);
  box-shadow:0 16px 34px rgba(230,88,130,.08);
  text-align:left;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  overflow:hidden;
}

.sf-home-vouchers .voucher-card::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:linear-gradient(180deg,#ff6f9f 0%,#ea4b7c 100%);
  border-radius:22px 0 0 22px;
}

.sf-home-vouchers .voucher-card::after{
  content:'';
  position:absolute;
  right:-26px;
  top:-26px;
  width:124px;
  height:124px;
  border-radius:50%;
  background:radial-gradient(circle at center,rgba(255,146,184,.16) 0%,rgba(255,146,184,.08) 45%,rgba(255,146,184,0) 70%);
  z-index:-1;
}

.sf-home-vouchers .voucher-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(230,88,130,.12);
}

.sf-home-vouchers .voucher-card.voucher-tone-shipping{
  background:linear-gradient(135deg,#ffffff 0%,#f5fffb 100%);
  border-color:#caeee2;
  box-shadow:0 16px 34px rgba(54,165,129,.09);
}
.sf-home-vouchers .voucher-card.voucher-tone-shipping::before{
  background:linear-gradient(180deg,#35b88b 0%,#188c6b 100%);
}
.sf-home-vouchers .voucher-card.voucher-tone-shipping::after{
  background:radial-gradient(circle at center,rgba(91,214,176,.16) 0%,rgba(91,214,176,.08) 45%,rgba(91,214,176,0) 70%);
}

.sf-home-vouchers .voucher-visual{
  width:76px;
  height:76px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#fff 0%,#fff6f9 100%);
  border:1px solid #f3d7e2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(232,92,134,.10);
}
.sf-home-vouchers .voucher-tone-shipping .voucher-visual{
  background:linear-gradient(180deg,#fff 0%,#f4fffb 100%);
  border-color:#ccefe3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(54,165,129,.10);
}

.sf-home-vouchers .sf-voucher-symbol{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
}
.sf-home-vouchers .sf-voucher-symbol svg{
  width:30px;
  height:30px;
  stroke:#ea4b7c;
}
.sf-home-vouchers .voucher-tone-shipping .sf-voucher-symbol svg{
  stroke:#188c6b;
}

.sf-home-vouchers .voucher-copy{
  min-width:0;
  display:grid;
  gap:8px;
}

.sf-home-vouchers .sf-voucher-card-title{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.sf-home-vouchers .sf-voucher-card-title b{
  color:#241f2a;
  font-size:31px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.03em;
}
.sf-home-vouchers .voucher-tone-shipping .sf-voucher-card-title b{
  font-size:28px;
}
.sf-home-vouchers .voucher-code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  color:#fff;
  background:linear-gradient(135deg,#ff5b91 0%,#cc2d61 100%);
  box-shadow:0 8px 16px rgba(232,75,124,.20);
}
.sf-home-vouchers .voucher-tone-shipping .voucher-code{
  background:linear-gradient(135deg,#24b383 0%,#17795d 100%);
  box-shadow:0 8px 16px rgba(36,179,131,.20);
}

.sf-home-vouchers .voucher-copy small{
  color:#70616d;
  font-size:14px;
  line-height:1.45;
}

.sf-home-vouchers .sf-voucher-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.sf-home-vouchers .sf-voucher-card-meta > span,
.sf-home-vouchers .sf-voucher-timer.is-card{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid #f0dde5;
  color:#655864;
  font-size:12px;
  font-weight:600;
}

.sf-home-vouchers .voucher-tone-shipping .sf-voucher-card-meta > span,
.sf-home-vouchers .voucher-tone-shipping .sf-voucher-timer.is-card{
  border-color:#d4eee5;
  color:#4f6a62;
}

.sf-home-vouchers .sf-voucher-timer.is-card svg{
  width:14px;
  height:14px;
  stroke:currentColor;
}

.sf-home-vouchers .voucher-action{
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.sf-home-vouchers .voucher-action > span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid #f1dbe4;
  color:#d84074;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(232,92,134,.08);
}
.sf-home-vouchers .voucher-tone-shipping .voucher-action > span{
  color:#17795d;
  border-color:#d1ece3;
  box-shadow:0 8px 18px rgba(54,165,129,.08);
}
.sf-home-vouchers .voucher-action svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  stroke-width:2.2;
  fill:none;
}

.sf-home-vouchers .sf-home-voucher-extra{
  display:none;
}

.sf-home-vouchers .sf-home-voucher-toggle{
  grid-column:1/-1;
  justify-self:center;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid #ecd7e0;
  background:linear-gradient(180deg,#fff 0%,#fff8fa 100%);
  color:#6a5865;
  font-size:14px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(232,92,134,.06);
}
.sf-home-vouchers .sf-home-voucher-toggle svg{
  width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;
}

@media (max-width: 1100px){
  .sf-home-vouchers .voucher-card{
    grid-template-columns:68px minmax(0,1fr);
  }
  .sf-home-vouchers .voucher-action{
    grid-column:1/-1;
    justify-content:flex-start;
  }
}

@media (max-width: 768px){
  .sf-home-voucher-section{
    padding:14px 14px 18px;
    border-radius:16px;
  }
  .sf-home-voucher-section .sectionhead{
    flex-direction:column;
    gap:6px;
    margin-bottom:12px;
  }
  .sf-home-vouchers{
    grid-template-columns:1fr;
    gap:12px;
  }
  .sf-home-vouchers .voucher-card{
    grid-template-columns:60px minmax(0,1fr);
    min-height:0;
    padding:14px 14px 14px 14px;
    border-radius:18px;
    gap:12px;
  }
  .sf-home-vouchers .voucher-card::before{width:5px;border-radius:18px 0 0 18px}
  .sf-home-vouchers .voucher-visual{width:60px;height:60px;border-radius:16px}
  .sf-home-vouchers .sf-voucher-symbol svg{width:24px;height:24px}
  .sf-home-vouchers .sf-voucher-card-title b{font-size:25px}
  .sf-home-vouchers .voucher-tone-shipping .sf-voucher-card-title b{font-size:23px}
  .sf-home-vouchers .voucher-copy small{font-size:13px}
  .sf-home-vouchers .sf-voucher-card-meta{gap:6px}
  .sf-home-vouchers .sf-voucher-card-meta > span,
  .sf-home-vouchers .sf-voucher-timer.is-card{font-size:11px;min-height:28px;padding:0 9px}
  .sf-home-vouchers .voucher-action{grid-column:1/-1;justify-content:flex-start}
  .sf-home-vouchers .voucher-action > span{min-height:36px;padding:0 12px;font-size:12px}
  .sf-home-vouchers .sf-home-voucher-toggle{width:100%;justify-content:center}
}