/* ==========================================================================
   Shop — lưới sản phẩm (listing) + trang chi tiết (detail).
   ========================================================================== */

/* ---------- Lưới sản phẩm ---------- */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(var(--shop-cols, 3), 1fr);
    gap: 28px;
}
@media (max-width: 1024px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .shop-grid { grid-template-columns: 1fr; } }

.shop-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ffe0ec;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.shop-card:hover { box-shadow: 0 14px 34px rgba(0,202,146,.22); transform: translateY(-4px); border-color: #00ca92; }

.shop-card-media { display: block; aspect-ratio: 4/3; background: #fff0f6; overflow: hidden; }
.shop-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.shop-card:hover .shop-card-media img { transform: scale(1.05); }
.shop-card-noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: #bbb; font-size: 14px; }

.shop-card-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 20px; flex: 1; }
.shop-card-title { font-size: 17px; font-weight: 600; margin: 0; line-height: 1.35; }
.shop-card-title a:hover { color: #00ca92; }
.shop-card-price { font-size: 16px; font-weight: 700; color: #ff4d8d; }
.shop-card-btn {
    margin-top: auto;
    display: inline-block;
    text-align: center;
    padding: 10px 16px;
    border: 1px solid #e63c78;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
.shop-card-btn:hover { background: #00ca92; color: #fff; border-color: #00ca92; }

.shop-empty { color: #888; padding: 40px 0; text-align: center; }

/* ---------- Giá ---------- */
.shop-price-sale { color: #ff4d8d; font-weight: 700; }
.shop-price-old  { color: #999; margin-left: 6px; font-weight: 400; }
.shop-price-reg  { color: #ff4d8d; font-weight: 700; }

/* ---------- Header archive ---------- */
.shop-archive-head { margin: 0 0 32px; }
.shop-archive-head h1 { display: inline-block; font-size: clamp(28px, 4vw, 44px); margin: 0 0 10px; border-bottom: 4px solid #4ddeff; padding-bottom: 6px; }
.shop-archive-head p { color: #666; margin: 0; }
.shop-cat-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.shop-cat-filter a {
    padding: 7px 16px; border: 1px solid #4ddeff; color: #2b2b2b; border-radius: 999px; font-size: 14px;
}
.shop-cat-filter a.is-active { background: #e63c78; color: #fff; border-color: #e63c78; }
.shop-cat-filter a:hover { background: #00ca92; color: #fff; border-color: #00ca92; }

/* ---------- Trang chi tiết sản phẩm ---------- */
.shop-single { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; }
@media (max-width: 860px) { .shop-single { grid-template-columns: 1fr; gap: 28px; } }

.shop-single-gallery img { width: 100%; border-radius: 16px; background: #f5f5f5; }
.shop-single-thumbs { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.shop-single-thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; cursor: pointer; border: 2px solid transparent; }
.shop-single-thumbs img:hover { border-color: #00ca92; }

.shop-single-title { font-size: clamp(26px, 3.5vw, 40px); margin: 0 0 12px; }
.shop-single-sku { color: #999; font-size: 14px; margin: 0 0 14px; }
.shop-single-price { font-size: 26px; margin: 0 0 20px; }
.shop-single-cats { font-size: 14px; color: #666; margin: 0 0 20px; }
.shop-single-cats a:hover { color: #00ca92; }
.shop-single-desc { line-height: 1.75; color: #333; }
.shop-single-cta {
    display: inline-block; margin-top: 26px; padding: 14px 32px; border-radius: 999px;
    background: #ff4d8d; color: #fff; font-weight: 700;
}
.shop-single-cta:hover { background: #00ca92; color: #fff; }

.shop-related { margin-top: 72px; }
.shop-related h2 { font-size: 26px; margin: 0 0 24px; }

/* ==========================================================================
   Widget: Slider giới thiệu (shop-hero-slider)
   ========================================================================== */
.shop-hero{max-width:1280px;margin:0 auto}
.shop-hero-slider{position:relative;border-radius:28px;overflow:hidden;box-shadow:0 24px 60px rgba(255,77,141,.16)}
.shop-hero-track{display:flex;transition:transform .6s cubic-bezier(.6,.05,.2,1)}
.shop-hero-slide{min-width:100%;box-sizing:border-box;padding:clamp(34px,6vw,76px);min-height:clamp(320px,42vw,470px);display:flex;flex-direction:column;justify-content:center;color:#fff}
.shop-hero-slide h2{font-size:clamp(28px,4.4vw,52px);line-height:1.1;margin:0 0 16px;max-width:16ch;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.12)}
.shop-hero-slide p{font-size:clamp(15px,1.6vw,20px);margin:0 0 26px;max-width:44ch;opacity:.97}
.shop-hero-slide.is-dark,.shop-hero-slide.is-dark h2,.shop-hero-slide.is-dark p{color:#3b2a00;text-shadow:none}
.shop-hero-btn{display:inline-block;background:#fff;color:#1f2937;font-weight:800;padding:13px 28px;border-radius:999px;transition:background .2s,transform .2s;align-self:flex-start}
.shop-hero-btn:hover{background:#00ca92;color:#fff;transform:translateY(-2px)}
.shop-hero-dots{position:absolute;left:0;right:0;bottom:18px;display:flex;gap:10px;justify-content:center}
.shop-hero-dots button{width:12px;height:12px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0;transition:.2s}
.shop-hero-dots button.active{background:#fff;width:30px;border-radius:999px}
.shop-hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#1f2937;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;z-index:2}
.shop-hero-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.shop-hero-arrow.prev{left:16px}.shop-hero-arrow.next{right:16px}

/* ==========================================================================
   Widget: Sản phẩm nổi bật ảnh + thông số (shop-product-feature)
   ========================================================================== */
.shop-feat{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;background:#fff;border:1px solid #ffe0ec;border-radius:22px;padding:28px}
.shop-feat.img-right .shop-feat-media{order:2}
.shop-feat-img{width:100%;height:100%;object-fit:cover;border-radius:16px;aspect-ratio:4/3}
.shop-feat-ph{aspect-ratio:4/3;border-radius:16px;background:var(--tone,#fff0f6);display:flex;align-items:center;justify-content:center}
.shop-feat-ph span{font-size:clamp(70px,12vw,130px);line-height:1}
.shop-feat-body h3{font-size:clamp(22px,2.4vw,30px);margin:0 0 8px;color:#1f2937}
.shop-feat-price{font-size:24px;font-weight:800;color:#ff4d8d;margin:0 0 6px}
.shop-feat-desc{color:#4b5563;margin:0 0 16px;line-height:1.7}
.shop-feat-specs{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.shop-feat-specs li{display:flex;gap:10px;align-items:flex-start;color:#374151}
.shop-feat-specs li::before{content:"✓";color:#00ca92;font-weight:900;flex:0 0 auto}
.shop-feat-chip{display:inline-block;font-size:13px;font-weight:700;color:#0e7490;background:#e9fbff;border:1px solid #4ddeff;border-radius:999px;padding:4px 12px;margin:0 0 14px}
.shop-feat-btn{display:inline-flex;align-items:center;gap:8px;background:#ff4d8d;color:#fff;font-weight:800;padding:12px 26px;border-radius:999px;transition:background .2s,transform .2s}
.shop-feat-btn:hover{background:#00ca92;color:#fff;transform:translateY(-2px)}
@media(max-width:860px){.shop-feat{grid-template-columns:1fr;gap:22px}.shop-feat.img-right .shop-feat-media{order:0}}

/* ==========================================================================
   Widget: Slider ảnh / Banner (shop-banner-slider)
   ========================================================================== */
.shop-banner{position:relative;overflow:hidden;width:100%}
.shop-banner.is-boxed{max-width:1200px;margin-left:auto;margin-right:auto}
.shop-banner.is-full{max-width:none}
.shop-banner-viewport{overflow:hidden;width:100%}
.shop-banner-track{display:flex;will-change:transform}
.shop-banner-slide{position:relative;min-width:100%;flex:0 0 100%}
.shop-banner-slide img{display:block;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center}
.shop-banner.h-auto .shop-banner-slide{height:auto}
.shop-banner.h-auto .shop-banner-slide img{height:auto}
.shop-banner-link{display:block;width:100%;height:100%}

/* Fade */
.shop-banner.fx-fade .shop-banner-track{display:block;position:relative}
.shop-banner.fx-fade .shop-banner-slide{position:absolute;inset:0;opacity:0;transition:opacity var(--fx-speed,600ms) ease;pointer-events:none}
.shop-banner.fx-fade .shop-banner-slide:first-child{position:relative;opacity:1}
.shop-banner.fx-fade .shop-banner-slide.active{opacity:1;pointer-events:auto;position:relative;z-index:1}

/* Overlay chữ */
.shop-banner-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(24px,5vw,64px);color:#fff}
.shop-banner-ov.align-left{align-items:flex-start;text-align:left}
.shop-banner-ov.align-center{align-items:center;text-align:center}
.shop-banner-ov.align-right{align-items:flex-end;text-align:right}
.shop-banner-ov.has-shade{background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0) 60%)}
.shop-banner-ov.align-center.has-shade{background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,0) 70%)}
.shop-banner-ov h3{margin:0;font-size:clamp(22px,3.4vw,44px);line-height:1.12;color:inherit}
.shop-banner-ov p{margin:0;font-size:clamp(14px,1.5vw,19px);max-width:46ch;opacity:.96}
.shop-banner-ov .b{display:inline-block;margin-top:6px;background:#ff4d8d;color:#fff;font-weight:800;padding:11px 26px;border-radius:999px}

/* Mũi tên */
.shop-banner-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.85);color:#1f2937;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s;z-index:3;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.shop-banner-arrow:hover{transform:translateY(-50%) scale(1.08)}
.shop-banner-arrow.prev{left:14px}.shop-banner-arrow.next{right:14px}

/* Chấm */
.shop-banner-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:9px;justify-content:center;z-index:3}
.shop-banner-dots button{width:11px;height:11px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.7);cursor:pointer;transition:.2s}
.shop-banner-dots button.active{background:#ff4d8d;width:26px;border-radius:999px}

.shop-banner-fill{width:100%;height:100%;min-height:180px}

/* ==========================================================================
   Widget: Đăng ký nhận tin (shop-subscribe)
   ========================================================================== */
.shop-sub{background:#9ad9cb;border-radius:14px;padding:34px 40px}
.shop-sub-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.shop-sub-title{margin:0;color:#fff;font-size:clamp(22px,2.4vw,30px);font-weight:800;flex:0 0 auto}
.shop-sub-form{display:flex;align-items:stretch;gap:16px;flex:1;min-width:280px}
.shop-sub-form input{flex:1;min-width:0;border:0;outline:none;background:rgba(255,255,255,.18);color:#fff;border-radius:10px;padding:0 22px;height:60px;font-size:16px}
.shop-sub-form input::placeholder{color:#fff;opacity:.85}
.shop-sub-btn{display:inline-flex;align-items:center;border:0;cursor:pointer;background:#f7658b;color:#fff;border-radius:10px;overflow:hidden;font-weight:800;font-size:16px;transition:filter .2s}
.shop-sub-btn:hover{filter:brightness(.95)}
.shop-sub-btn:disabled{opacity:.6;cursor:default}
.shop-sub-btn-txt{padding:0 34px;line-height:60px}
.shop-sub-btn-arrow{display:inline-flex;align-items:center;justify-content:center;width:52px;align-self:stretch;background:rgba(0,0,0,.10)}
.shop-sub-msg{max-width:1200px;margin:12px auto 0;color:#fff;font-weight:600;min-height:1.2em}
.shop-sub-msg.ok{color:#0b6b52}
.shop-sub-msg.err{color:#7a1020}
@media(max-width:720px){
  .shop-sub{padding:26px 22px}
  .shop-sub-inner{flex-direction:column;align-items:stretch;gap:16px}
  .shop-sub-form{flex-direction:column}
  .shop-sub-btn{justify-content:center}
  .shop-sub-btn-txt{flex:1;text-align:center}
}

/* Bộ lọc danh mục trong widget Lưới sản phẩm (trang Sản phẩm) */
.shop-grid-filter .shop-cat-filter{justify-content:center;margin:0 0 30px}

/* ==========================================================================
   Widget: Shop Post (lưới SP + lọc danh mục + phân trang AJAX)
   ========================================================================== */
.shop-post-head{text-align:center;max-width:760px;margin:0 auto 26px}
.shop-post-title{font-size:clamp(26px,3.6vw,40px);margin:0 0 10px;color:#1f2937}
.shop-post-desc{margin:0;color:#6b7280;font-size:16px}
.shop-post-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 30px}
.shop-post-filter .shop-post-f{padding:8px 18px;border:1.6px solid #4ddeff;background:#fff;color:#2b2d42;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s}
.shop-post-filter .shop-post-f:hover{background:#00ca92;color:#fff;border-color:#00ca92}
.shop-post-filter .shop-post-f.is-active{background:#ff4d8d;color:#fff;border-color:#ff4d8d}
.shop-post-grid{transition:opacity .2s ease;min-height:120px}
.shop-post-grid[aria-busy="true"]{opacity:.45;pointer-events:none}

/* Phân trang */
.shop-pg{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:36px 0 0;padding:0}
.shop-pg li{margin:0}
.shop-pg .shop-pg-num,.shop-pg .shop-pg-arrow{min-width:42px;height:42px;padding:0 10px;border:1.6px solid #ffe0ec;background:#fff;color:#2b2d42;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s,transform .15s}
.shop-pg .shop-pg-num:hover,.shop-pg .shop-pg-arrow:hover{background:#00ca92;color:#fff;border-color:#00ca92;transform:translateY(-2px)}
.shop-pg .shop-pg-num.is-active{background:#ff4d8d;color:#fff;border-color:#ff4d8d;box-shadow:0 6px 16px rgba(255,77,141,.35)}
.shop-pg .shop-pg-arrow[disabled]{opacity:.4;cursor:default;transform:none;background:#fff;color:#bbb;border-color:#eee}
.shop-pg .shop-pg-dots{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:42px;color:#9aa0a6}