/* ===== Lavie Shop — bổ sung khối giao diện kiểu landing (giống Oichin) ===== */

/* ---- Strip cam kết dưới header ---- */
.trust-strip{background:var(--red-deep);color:#d6e8f5}
.trust-in{max-width:1160px;margin:0 auto;padding:12px 22px;display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:9px;font-size:13px;flex:1;min-width:160px;justify-content:center}
.trust-item .ti-ic{font-size:19px}
.trust-item b{color:#fff;font-weight:600}
.trust-item small{color:var(--gold-lt);display:block;font-size:11px;line-height:1.2}
@media(max-width:600px){
  .trust-in{padding:10px 12px;gap:6px}
  .trust-item{min-width:46%;font-size:11.5px;gap:6px;justify-content:flex-start}
  .trust-item .ti-ic{font-size:16px}
  .trust-item small{font-size:10px}
}

/* ---- Banner cửa hàng (thay ảnh oichin-store) ---- */
.storeband{position:relative;border-radius:var(--radius);overflow:hidden;margin:26px 0 6px;
  background:linear-gradient(115deg,var(--red-deep),var(--red) 60%,var(--red-soft));
  min-height:170px;display:grid;place-items:center;text-align:center;color:#fff;padding:30px 22px;
  box-shadow:var(--shadow)}
.storeband::before{content:"";position:absolute;inset:0;opacity:.12;
  background-image:radial-gradient(var(--gold-lt) 1.4px,transparent 1.5px);background-size:24px 24px}
.storeband .sb-in{position:relative;max-width:640px}
.storeband h2{font-size:30px;color:#fff;margin-bottom:8px;line-height:1.15}
.storeband h2 em{color:var(--gold-lt);font-style:italic}
.storeband p{color:#cfe0ee;font-size:14.5px}
@media(max-width:600px){ .storeband{min-height:140px;padding:24px 18px} .storeband h2{font-size:22px} }

/* ---- Lưới danh mục tròn (như 15 danh mục Oichin) ---- */
.catwheel{display:grid;grid-template-columns:repeat(8,1fr);gap:14px}
.cw-item{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 8px 13px;text-align:center;cursor:pointer;
  transition:.2s cubic-bezier(.25,.8,.3,1);display:flex;flex-direction:column;align-items:center;gap:8px}
.cw-item:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--gold)}
.cw-item:active{transform:translateY(-2px) scale(.98)}
.cw-ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:28px;
  background:radial-gradient(circle at 35% 30%,#f2f2f5,#e6e6ea);box-shadow:0 6px 14px -8px rgba(0,0,0,.4)}
.cw-item span{font-size:12px;font-weight:600;color:var(--red-deep);line-height:1.25}
@media(max-width:880px){ .catwheel{grid-template-columns:repeat(5,1fr)} }
@media(max-width:600px){
  .catwheel{grid-template-columns:repeat(4,1fr);gap:10px}
  .cw-item{padding:13px 5px 11px}
  .cw-ic{width:50px;height:50px;font-size:24px}
  .cw-item span{font-size:11px}
}
@media(max-width:360px){ .catwheel{grid-template-columns:repeat(3,1fr)} }

/* ---- Dải thương hiệu ---- */
.brands{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.brand-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 16px;transition:.2s}
.brand-card:hover{border-color:var(--gold);box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.brand-card .bc-name{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:800;color:var(--ink);margin-bottom:5px;text-transform:uppercase;letter-spacing:.03em}
.brand-card p{font-size:12.5px;color:var(--muted);line-height:1.55}
@media(max-width:880px){ .brands{grid-template-columns:repeat(3,1fr)} }
@media(max-width:600px){ .brands{grid-template-columns:repeat(2,1fr);gap:10px} .brand-card{padding:14px 13px} .brand-card .bc-name{font-size:16px} }

/* ---- Đánh giá khách hàng (review wall) ---- */
.reviews-wall{background:#f5f5f7}
.rw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rw-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px;
  box-shadow:var(--shadow-card)}
.rw-head{display:flex;align-items:center;gap:10px}
.rw-ava{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:20px;color:#fff;
  background:linear-gradient(135deg,var(--ink),var(--red-soft))}
.rw-who{font-weight:700;font-size:14px;color:var(--ink)}
.rw-stars{color:var(--gold);font-size:13px;letter-spacing:1px}
.rw-text{font-size:13.5px;color:var(--ink);line-height:1.6}
.rw-prod{font-size:12px;color:var(--red);font-weight:600;margin-top:auto}
@media(max-width:880px){ .rw-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .rw-grid{grid-template-columns:1fr} }

/* ---- SEO content cuối trang ---- */
.seo{background:#fff}
.seo-in{max-width:880px;margin:0 auto}
.seo-in h2{font-size:24px;color:var(--red-deep);margin:26px 0 10px}
.seo-in h3{font-size:18px;color:var(--red);margin:18px 0 8px;font-family:'Montserrat',sans-serif;font-weight:800}
.seo-in p{font-size:14.5px;color:var(--ink);line-height:1.85;margin-bottom:12px}
.seo-in ul{margin:0 0 14px 20px}
.seo-in li{font-size:14px;color:var(--ink);line-height:1.7;margin-bottom:4px}
@media(max-width:600px){ .seo-in h2{font-size:20px} .seo-in p{font-size:14px} }

/* ===== Bổ sung: hiển thị ảnh sản phẩm trên card ===== */
.card-top{position:relative;aspect-ratio:1/1;overflow:hidden;background:linear-gradient(135deg,#f2f2f5,#e6e6ea);
  display:grid;place-items:center;font-size:54px}
.card-top .card-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.card:hover .card-top .card-img{transform:scale(1.06)}
.card-top .card-emoji{font-size:62px;line-height:1}
.card-top.no-img::after{content:attr(data-emoji);font-size:62px}
.card-top .card-badge{position:absolute;top:10px;font-size:11px;font-weight:700;color:#fff;padding:4px 9px;border-radius:20px;z-index:2;box-shadow:0 3px 8px -3px rgba(0,0,0,.4)}
.card-top .b-hot{left:10px;background:linear-gradient(135deg,#ff5e7a,#e53958)}
.card-top .b-vip{left:10px;background:linear-gradient(135deg,#c79a3a,#a87c1f)}
.card-top .b-sale{right:10px;background:linear-gradient(135deg,#7b4bd9,#5e2da2)}
.card-top .b-out{right:10px;background:#777}

/* ===== Ảnh trong ô danh mục tròn (catwheel) ===== */
.cw-ic.has-img{padding:0;overflow:hidden;background:radial-gradient(circle at 35% 30%,#f2f2f5,#e6e6ea)}
.cw-ic .cw-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}