/* WCX Builder CSS */
.wcx-block { --gap:16px; --cols:4; --primary:#000099; --text:var(--text); --border:var(--border); margin-block:24px; }
.wcx-head { display:flex; align-items:center; gap:16px; justify-content:space-between; margin-bottom:12px; }
.wcx-title { font-size:1.25rem; font-weight:700; margin:0; }
.wcx-chips { display:flex; gap:8px; overflow:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; }
.wcx-chip { scroll-snap-align:start; white-space:nowrap; border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:.875rem; color:var(--text); background:#fff; text-decoration:none; }
.wcx-chip:hover { background:var(--text); color:#fff; }

.wcx-list { display:grid; gap:var(--gap); }
.wcx-grid .wcx-list { grid-template-columns: repeat(4, minmax(0,1fr)); }
.wcx-slider .wcx-list { display:flex; overflow:auto; scroll-snap-type:x mandatory; gap:var(--gap); padding-bottom:8px; }
.wcx-slider .wcx-item { min-width: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols)); scroll-snap-align:start; }

.wcx-item { background:#fff; border:1px solid var(--border); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.wcx-thumb img { width:100%; height:auto; border-radius:12px; display:block; }
.wcx-name { font-size:1rem; margin:4px 0; line-height:1.3; }
.wcx-price { font-weight:700; color:var(--primary); }
.wcx-actions { margin-top:auto; }
.wcx-btn { display:inline-flex; align-items:center; justify-content:center; border-radius:12px; padding:8px 12px; text-decoration:none; border:1px solid var(--text); }
.wcx-btn-cart { background:var(--text); color:#fff; }
.wcx-btn-view { background:#fff; color:var(--text); }

.wcx-nav { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.wcx-prev, .wcx-next { width:36px; height:36px; border-radius:999px; border:1px solid var(--border); background:#fff; }

.wcx-rating .star-rating { float:none; }
.wcx-excerpt { color:#6b7280; font-size:.9rem; }

/* Responsive */
@media (max-width: 767px) {
  .wcx-title { display:none; } /* Ẩn tiêu đề trên mobile theo yêu cầu */
  .wcx-grid .wcx-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wcx-slider .wcx-item { min-width: 75%; }
  .wcx-chip { scroll-snap-align:center; }
}

/* Star rating color */
.wcx-rating .star-rating:before,
.wcx-rating .star-rating span:before { color: #FFD700; }

/* Hide nav by default; will show when data-show-nav="1" */
.wcx-block .wcx-nav { display: none; }
.wcx-block[data-show-nav="1"] .wcx-nav { display: flex; }