/* Shared */
.wfs-badge,.wfs-badge-inline {
  background: #ef4444;
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1;
}
.wfs-badge-inline {
  margin-left: 6px;
  display: inline-block;
  vertical-align: middle;
}
.wfs-single-badge-wrap { margin: 8px 0; }

/* Loop badge positioning (best-effort, theme-dependent) */
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product { position: relative; }
.woocommerce ul.products li.product .wfs-badge,.woocommerce-page ul.products li.product .wfs-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

/* Shortcode wrapper */
.wfs-campaign {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 14px;
  margin: 16px 0;
  background: #fff;
}

.wfs-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.wfs-title { font-size: 18px; font-weight: 800; }
.wfs-countdown { font-size: 13px; opacity: .85; }

/* Grid */
.wfs-grid { display: grid; gap: 12px; }
.wfs-grid.cols-1 { grid-template-columns: 1fr; }
.wfs-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.wfs-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.wfs-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.wfs-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.wfs-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 900px) {
  .wfs-grid.cols-4, .wfs-grid.cols-5, .wfs-grid.cols-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .wfs-grid { grid-template-columns: 1fr !important; }
}

.wfs-card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow: hidden;
  padding: 10px;
}
.wfs-card-link { text-decoration: none; color: inherit; display: block; }
.wfs-thumb img { width: 100%; height: auto; display: block; border-radius: 10px; }
.wfs-name { margin-top: 8px; font-weight: 700; font-size: 14px; }
.wfs-price { margin-top: 6px; }

/* List shortcode */
.wfs-list { display: grid; gap: 10px; }
.wfs-list-item { border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 10px 12px; background: #fff; }
.wfs-list-title { font-weight: 800; }
.wfs-list-meta { font-size: 12px; opacity: .75; margin-top: 2px; }
.wfs-list-shortcode { margin-top: 6px; }

/* Top banner */
.wfs-topbar {
  position: sticky;
  top: 0;
  z-index: 99999;
  background: var(--wfs-bg, #111827);
  color: var(--wfs-fg, #fff);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wfs-topbar-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.wfs-topbar-text {
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wfs-topbar-countdown { font-size: 13px; opacity: .9; white-space: nowrap; }
.wfs-topbar-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  padding: 2px 8px;
  cursor: pointer;
}

/* Admin helpers */
.wfs-admin-flex { display: flex; gap: 12px; flex-wrap: wrap; }
.wfs-admin-box input[type="number"], .wfs-admin-box select, .wfs-admin-box textarea { max-width: 100%; }

/* ===== Tiki-like Flash Sale header ===== */
.wfs-head--tiki{
  align-items: center;
  background: #fff;
  border-radius: 14px;
}

/* Left: title + countdown */
.wfs-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

/* (giữ pill nếu chỗ khác vẫn dùng, nhưng shortcode mới không dùng pill nữa) */
.wfs-pill{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:#fee2e2;
  color:#b91c1c;
  white-space:nowrap;
}

.wfs-right{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.wfs-countdown-label{
  font-size:13px;
  opacity:.8;
  font-weight:600;
}

.wfs-countdown-boxes{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-variant-numeric: tabular-nums;
}
.wfs-time-box{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:22px;
  padding:0 6px;
  border-radius:6px;
  background:#ef4444;
  color:#fff;
  font-weight:800;
  font-size:12px;
  line-height:1;
}
.wfs-time-sep{
  font-weight:800;
  opacity:.6;
}

/* ===== Cards: add "Vừa mở bán" strip like Tiki ===== */
.wfs-card{
  position:relative;
  background:#fff;
}
.wfs-card .wfs-newbar{
  margin-top:10px;
  background:#fee2e2;
  border-radius:999px;
  height:18px;
  display:flex;
  align-items:center;
  padding:0 10px;
  color:#b91c1c;
  font-size:11px;
  font-weight:700;
}

/* ===== NEW: "Xem tất cả" link ===== */
.wfs-viewall{
  text-decoration:none;
  font-weight:800;
  color:#2563eb;
  white-space:nowrap;
}
.wfs-viewall:hover{ text-decoration: underline; }

/* ===== NEW: Slider ===== */
.wfs-slider{ position:relative; }
.wfs-track{
  display:flex;
  gap:12px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding: 4px 40px; /* chừa chỗ cho nav */
}
.wfs-slide{
  flex:0 0 auto;
  scroll-snap-align:start;
  width:220px;
}

.wfs-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  cursor:pointer;
  z-index:3;
}
.wfs-nav--prev{ left:6px; }
.wfs-nav--next{ right:6px; }

@media (max-width: 900px){
  .wfs-slide{ width: 180px; }
  .wfs-track{ padding-left: 36px; padding-right: 36px; }
  .wfs-title{ font-size:16px; }
}
@media (max-width: 520px){
  .wfs-slide{ width: 150px; }
}

.wfs-empty{
  padding:14px;
  border:1px dashed rgba(0,0,0,.18);
  border-radius:12px;
  opacity:.8;
}