/* Seluna design system — tokens + components (generated from the Seluna Design System).
   Scope: everything lives under .sl so the old theme (style.css) is untouched. Breakpoint 900px. */
:root {
  --sl-surface-0: #ffffff;
  --sl-surface-100: #fffcfa;
  --sl-surface-200: #fff5ef;
  --sl-surface-300: #ffebe0;
  --sl-line: #f8e9e0;
  --sl-ink: #2e211d;
  --sl-ink-muted: #6f5a52;
  --sl-brand: #ff7a5c;
  --sl-brand-hover: #f5664a;
  --sl-brand-soft: #ffebe3;
  --sl-accent: #b5402a;
  --sl-display: #a63c2a;
  --sl-price: #b5402a;
  --sl-sale: #e8002d;
  --sl-gold: #ffb59e;
  --sl-on-brand: #2e211d;
  --sl-on-dark: #ffffff;
  --sl-space-1: 4px;
  --sl-space-2: 8px;
  --sl-space-3: 12px;
  --sl-space-4: 16px;
  --sl-space-6: 24px;
  --sl-space-8: 32px;
  --sl-space-12: 48px;
  --sl-radius-sm: 8px;
  --sl-radius-md: 12px;
  --sl-radius-lg: 20px;
  --sl-radius-pill: 999px;
  --sl-shadow-card: 0 2px 12px rgba(150, 70, 50, 0.08);
  --sl-shadow-float: 0 8px 24px rgba(150, 70, 50, 0.18);
  --sl-font-display: "Playfair Display", Georgia, serif;
  --sl-font-sans: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
}

/* Seluna components — mobile-first. Breakpoint: 900px (desktop). Uses tokens.css variables only. */
.sl, .sl * { box-sizing: border-box; }
.sl { font-family: var(--sl-font-sans); color: var(--sl-ink); background: var(--sl-surface-100); font-size: 15px; line-height: 22px; -webkit-font-smoothing: antialiased; }
:where(.sl) a { color: inherit; text-decoration: none; }
.sl img { display: block; max-width: 100%; }
.sl-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--sl-space-4); }
.sl-ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Buttons */
.sl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sl-space-2); min-height: 44px; padding: 0 22px; border-radius: var(--sl-radius-pill); border: 1px solid transparent; font: 600 14px/20px var(--sl-font-sans); cursor: pointer; transition: background .15s; }
.sl-btn--primary { background: var(--sl-brand); color: var(--sl-on-brand); }
.sl-btn--primary:hover { background: var(--sl-brand-hover); }
.sl-btn--ghost { background: var(--sl-surface-0); color: var(--sl-accent); border-color: var(--sl-line); }
.sl-btn--ghost:hover { border-color: var(--sl-accent); }
.sl-btn--block { width: 100%; }
.sl-btn--sm { min-height: 36px; padding: 0 16px; font-size: 13px; }
.sl-btn .sl-ico { width: 18px; height: 18px; }

/* Announcement bar */
.sl-announce { background: var(--sl-ink); letter-spacing: .02em; color: var(--sl-on-dark); font-size: 12px; line-height: 16px; text-align: center; padding: 8px var(--sl-space-4); }
.sl-announce b { font-weight: 600; color: var(--sl-gold); }

/* Header */
.sl-header { position: sticky; top: 0; z-index: 20; background: var(--sl-surface-0); border-bottom: 1px solid var(--sl-line); }
.sl-header__bar { display: flex; align-items: center; gap: var(--sl-space-2); height: 56px; }
.sl-iconbtn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--sl-radius-pill); background: none; border: 0; color: var(--sl-ink); cursor: pointer; }
.sl-iconbtn:hover { background: var(--sl-surface-200); }
.sl-badge-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--sl-brand); color: var(--sl-on-brand); font: 600 11px/18px var(--sl-font-sans); text-align: center; }
.sl-logo { font: italic 500 26px/1 var(--sl-font-display); color: var(--sl-display); letter-spacing: .02em; }
.sl-header__logo { flex: 1; text-align: center; }
.sl-header__nav { display: none; }
.sl-header__actions { display: flex; }
.sl-header__search { padding: 0 0 10px; }
.sl-search { display: flex; align-items: center; gap: var(--sl-space-2); height: 42px; padding: 0 16px; border-radius: var(--sl-radius-pill); background: var(--sl-surface-100); border: 1px solid var(--sl-line); color: var(--sl-ink-muted); font-size: 14px; }
.sl-search .sl-ico { width: 18px; height: 18px; }
@media (max-width: 899px) { .sl-only-desk { display: none !important; } }

/* Hero */
.sl-hero { position: relative; margin: var(--sl-space-4) 0 0; border-radius: var(--sl-radius-lg); overflow: hidden; background: var(--sl-surface-300); min-height: 420px; display: flex; align-items: flex-end; }
.sl-hero__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl-hero__body { position: relative; padding: var(--sl-space-6); width: 100%; background: linear-gradient(to top, rgba(255,252,250,.96) 55%, rgba(255,252,250,0)); padding-top: 72px; }
.sl-eyebrow { font-size: 12px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--sl-accent); font-weight: 600; }
.sl-hero h1 { margin: var(--sl-space-2) 0; font: italic 500 36px/1.1 var(--sl-font-display); color: var(--sl-display); }
.sl-hero p { margin: 0 0 var(--sl-space-4); color: var(--sl-ink-muted); }
.sl-hero__dots { display: flex; gap: 6px; margin-top: var(--sl-space-4); }
.sl-hero__dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--sl-surface-0); }
.sl-hero__dots i.on { width: 20px; background: var(--sl-accent); }

/* Trust bar */
.sl-trust { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sl-space-2); margin-top: var(--sl-space-4); }
.sl-trust__item { display: flex; align-items: center; gap: var(--sl-space-2); padding: 10px 12px; background: var(--sl-surface-0); border: 1px solid var(--sl-line); border-radius: var(--sl-radius-md); }
.sl-trust__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 18px; background: var(--sl-brand-soft); color: var(--sl-accent); flex: none; }
.sl-trust__ico .sl-ico { width: 20px; height: 20px; stroke-width: 1.8; }
.sl-trust__item b { display: block; font-size: 13px; line-height: 17px; font-weight: 600; }
.sl-trust__item div span { display: block; font-size: 11px; line-height: 15px; color: var(--sl-ink-muted); }

/* Sections */
.sl-section { margin-top: var(--sl-space-8); }
.sl-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sl-space-3); margin-bottom: var(--sl-space-3); }
.sl-section__head h2 { margin: 0; font: 600 22px/1.3 var(--sl-font-display); }
.sl-more { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--sl-accent); white-space: nowrap; }
.sl-more .sl-ico { width: 16px; height: 16px; }

/* Category rail */
.sl-cats { display: flex; gap: var(--sl-space-3); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--sl-space-4)); padding: 0 var(--sl-space-4); }
.sl-cats::-webkit-scrollbar { display: none; }
.sl-cat { flex: none; width: 76px; text-align: center; font-size: 12px; line-height: 16px; font-weight: 500; }
.sl-cat__img { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 38px; background: var(--sl-surface-200); color: var(--sl-display); margin-bottom: 6px; border: 1px solid var(--sl-line); }
.sl-cat__img svg { width: 40px; height: 40px; stroke: currentColor; fill: none; stroke-width: 1.4; }

/* Chips */
.sl-chips { display: flex; gap: var(--sl-space-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--sl-space-4)) var(--sl-space-3); padding: 0 var(--sl-space-4); }
.sl-chips::-webkit-scrollbar { display: none; }
.sl-chip { flex: none; height: 34px; padding: 0 14px; border-radius: var(--sl-radius-pill); border: 1px solid var(--sl-line); background: var(--sl-surface-0); font: 500 13px/32px var(--sl-font-sans); color: var(--sl-ink); }
.sl-chip.on { background: var(--sl-brand); border-color: var(--sl-brand); color: var(--sl-on-brand); font-weight: 600; }

/* Product grid & card */
.sl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sl-space-3); }
.sl-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: var(--sl-space-3); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--sl-space-4)); padding: 0 var(--sl-space-4); scroll-snap-type: x mandatory; }
.sl-rail::-webkit-scrollbar { display: none; }
.sl-rail > * { scroll-snap-align: start; }
.sl-card { position: relative; display: flex; flex-direction: column; background: var(--sl-surface-0); border-radius: var(--sl-radius-md); overflow: hidden; border: 1px solid var(--sl-line); transition: box-shadow .2s; }
.sl-card:hover { box-shadow: var(--sl-shadow-card); }
.sl-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--sl-surface-200); color: var(--sl-display); display: grid; place-items: center; }
.sl-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sl-card__media > svg { width: 46%; height: 46%; stroke: currentColor; fill: none; stroke-width: 1.2; opacity: .75; }
.sl-card__badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: var(--sl-radius-sm); background: var(--sl-sale); color: var(--sl-on-dark); font: 700 12px/18px var(--sl-font-sans); }
.sl-card__badge--new { background: var(--sl-brand); color: var(--sl-on-brand); }
.sl-card__fav { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 16px; border: 0; background: rgba(255,255,255,.9); color: var(--sl-ink); display: grid; place-items: center; cursor: pointer; }
.sl-card__fav .sl-ico { width: 17px; height: 17px; }
.sl-card__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px; flex: 1; }
.sl-card__name { font-size: 13px; line-height: 18px; min-height: 36px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-card__meta { font-size: 11px; line-height: 15px; color: var(--sl-ink-muted); }
.sl-card__meta .star { color: var(--sl-gold); }
.sl-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; margin-top: auto; }
.sl-price { font: 700 15px/20px var(--sl-font-sans); color: var(--sl-price); }
.sl-price s { display: block; font-size: 11px; line-height: 14px; font-weight: 400; color: var(--sl-ink-muted); }

/* Promo banner */
.sl-promo { position: relative; display: grid; grid-template-columns: 1fr; border-radius: var(--sl-radius-lg); background: var(--sl-surface-200); overflow: hidden; }
.sl-promo__body { position: relative; padding: var(--sl-space-6); }
.sl-promo h3 { margin: 4px 0 6px; font: italic 500 26px/1.2 var(--sl-font-display); color: var(--sl-display); }
.sl-promo p { margin: 0 0 var(--sl-space-4); font-size: 14px; color: var(--sl-ink-muted); }
.sl-promo__art { position: absolute; right: -30px; top: -30px; width: 170px; height: 170px; opacity: .9; }
.sl-countdown { display: flex; gap: 6px; margin-bottom: var(--sl-space-4); }
.sl-countdown span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: var(--sl-radius-sm); background: var(--sl-surface-0); font: 700 16px/1 var(--sl-font-sans); color: var(--sl-display); }
.sl-countdown small { display: block; font-size: 9px; font-weight: 500; color: var(--sl-ink-muted); margin-top: 2px; }

/* Gift tiles */
.sl-gifts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sl-space-3); }
.sl-gift { position: relative; min-height: 132px; border-radius: var(--sl-radius-lg); background: var(--sl-surface-200); padding: var(--sl-space-4); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.sl-gift:nth-child(4) { background: var(--sl-ink); }
.sl-gift:nth-child(4) b { color: var(--sl-gold); }
.sl-gift:nth-child(4) span { color: var(--sl-surface-300); }
.sl-gift:nth-child(2), .sl-gift:nth-child(3) { background: var(--sl-brand-soft); }
.sl-gift:nth-child(4) svg { stroke: var(--sl-gold); }
.sl-gift b { font: italic 500 19px/1.2 var(--sl-font-display); color: var(--sl-display); }
.sl-gift span { font-size: 12px; line-height: 16px; color: var(--sl-ink-muted); margin-top: 2px; }
.sl-gift svg { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; stroke: var(--sl-display); fill: none; stroke-width: 1.3; opacity: .6; }

/* Newsletter */
.sl-news { background: var(--sl-ink); color: var(--sl-on-dark); border-radius: var(--sl-radius-lg); padding: var(--sl-space-6); }
.sl-news h3 { margin: 0 0 4px; font: italic 500 24px/1.2 var(--sl-font-display); color: var(--sl-gold); }
.sl-news p { margin: 0 0 var(--sl-space-4); font-size: 14px; opacity: .9; }
.sl-news form { display: flex; gap: var(--sl-space-2); }
.sl-news input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: var(--sl-radius-pill); border: 0; font: 14px var(--sl-font-sans); color: var(--sl-ink); }
.sl-news .sl-btn { background: var(--sl-gold); color: var(--sl-ink); }

/* Footer */
.sl-footer { margin-top: var(--sl-space-8); padding: var(--sl-space-8) 0 96px; background: var(--sl-surface-200); font-size: 14px; }
.sl-footer__grid { display: grid; gap: var(--sl-space-6); }
.sl-footer h4 { margin: 0 0 var(--sl-space-2); font: 600 14px/20px var(--sl-font-sans); }
.sl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--sl-ink-muted); }
.sl-footer p { margin: 8px 0 0; color: var(--sl-ink-muted); }
.sl-footer__copy { margin-top: var(--sl-space-6); padding-top: var(--sl-space-4); border-top: 1px solid var(--sl-line); font-size: 12px; color: var(--sl-ink-muted); }

/* Mobile bottom nav + chat */
.sl-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--sl-surface-0); border-top: 1px solid var(--sl-line); box-shadow: var(--sl-shadow-float); padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); }
.sl-tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; line-height: 14px; color: var(--sl-ink-muted); }
.sl-tabbar a.on { color: var(--sl-accent); font-weight: 600; }
.sl-tabbar .sl-badge-count { top: -4px; right: calc(50% - 20px); }
.sl-chat { position: fixed; right: 16px; bottom: 76px; z-index: 30; width: 52px; height: 52px; border-radius: 26px; background: var(--sl-brand); color: var(--sl-on-brand); display: grid; place-items: center; box-shadow: var(--sl-shadow-float); }

/* Desktop */
@media (min-width: 900px) {
  .sl-wrap { padding: 0 var(--sl-space-6); }
  .sl-only-mob { display: none !important; }
  .sl-header__bar { height: 72px; gap: var(--sl-space-6); }
  .sl-header__logo { flex: none; text-align: left; }
  .sl-logo { font-size: 32px; }
  .sl-header__nav { display: flex; gap: 28px; flex: 1; font-size: 14px; font-weight: 500; }
  .sl-header__nav a { padding: 6px 0; border-bottom: 2px solid transparent; }
  .sl-header__nav a.on, .sl-header__nav a:hover { color: var(--sl-accent); border-color: var(--sl-brand); }
  .sl-header__search { display: none; }
  .sl-search--desk { width: 240px; }
  .sl-hero { min-height: 480px; align-items: center; margin-top: var(--sl-space-6); }
  .sl-hero__art { left: auto; width: 58%; }
  .sl-hero__body { max-width: 560px; padding: var(--sl-space-12); background: none; }
  .sl-hero h1 { font-size: 56px; }
  .sl-trust { grid-template-columns: repeat(4, 1fr); gap: var(--sl-space-4); margin-top: var(--sl-space-6); }
  .sl-trust__item { padding: 16px; background: transparent; border: 0; }
  .sl-trust__item b { font-size: 14px; }
  .sl-trust__item div span { font-size: 12px; }
  .sl-section { margin-top: var(--sl-space-12); }
  .sl-section__head h2 { font-size: 28px; }
  .sl-cats { overflow: visible; margin: 0; padding: 0; justify-content: space-between; }
  .sl-cat { width: 150px; font-size: 14px; }
  .sl-cat__img { width: 150px; height: 150px; border-radius: var(--sl-radius-lg); }
  .sl-cat__img svg { width: 64px; height: 64px; }
  .sl-chips { margin: 0 0 var(--sl-space-4); padding: 0; }
  .sl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sl-space-6); }
  .sl-rail { grid-auto-columns: calc((100% - 3 * var(--sl-space-6)) / 4); gap: var(--sl-space-6); margin: 0; padding: 0; }
  .sl-card__body { padding: 12px 14px 14px; }
  .sl-card__name { font-size: 14px; line-height: 20px; min-height: 40px; }
  .sl-price { font-size: 16px; }
  .sl-promo__body { padding: var(--sl-space-12); max-width: 620px; }
  .sl-promo h3 { font-size: 36px; }
  .sl-promo__art { width: 380px; height: 380px; right: 20px; top: -60px; }
  .sl-gifts { grid-template-columns: repeat(4, 1fr); gap: var(--sl-space-6); }
  .sl-gift { min-height: 220px; padding: var(--sl-space-6); }
  .sl-gift b { font-size: 24px; }
  .sl-news { display: flex; align-items: center; justify-content: space-between; gap: var(--sl-space-6); padding: var(--sl-space-8) var(--sl-space-12); }
  .sl-news form { width: 420px; }
  .sl-footer { padding-bottom: var(--sl-space-8); }
  .sl-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
  .sl-tabbar { display: none; }
  .sl-chat { bottom: 24px; right: 24px; }
}

/* ============ Product detail page (product.html) ============ */
.sl-crumbs { display: none; font-size: 12px; color: var(--sl-ink-muted); padding: var(--sl-space-4) 0 0; }
.sl-crumbs a:hover { color: var(--sl-accent); }
.sl-pdp { display: grid; gap: var(--sl-space-4); }
/* gallery */
.sl-gallery { margin: 0 calc(-1 * var(--sl-space-4)); }
.sl-gallery__main { position: relative; aspect-ratio: 1 / 1; background: var(--sl-surface-200); color: var(--sl-display); display: grid; place-items: center; overflow: hidden; }
.sl-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.sl-gallery__main > svg { width: 52%; height: 52%; stroke: currentColor; fill: none; stroke-width: .9; opacity: .7; }
.sl-gallery__count { position: absolute; right: 12px; bottom: 12px; padding: 2px 10px; border-radius: var(--sl-radius-pill); background: rgba(46,33,29,.72); color: var(--sl-on-dark); font-size: 12px; line-height: 20px; }
.sl-gallery__badge { position: absolute; top: 12px; left: 12px; padding: 3px 10px; border-radius: var(--sl-radius-sm); background: var(--sl-sale); color: var(--sl-on-dark); font: 700 13px/18px var(--sl-font-sans); }
.sl-thumbs { display: flex; gap: var(--sl-space-2); overflow-x: auto; scrollbar-width: none; padding: var(--sl-space-2) var(--sl-space-4) 0; }
.sl-thumbs::-webkit-scrollbar { display: none; }
.sl-thumb { flex: none; width: 60px; height: 60px; border-radius: var(--sl-radius-sm); background: var(--sl-surface-200); border: 2px solid transparent; display: grid; place-items: center; color: var(--sl-display); }
.sl-thumb svg { width: 60%; height: 60%; stroke: currentColor; fill: none; stroke-width: 1.4; opacity: .7; }
.sl-thumb.on { border-color: var(--sl-brand); }
.sl-thumb--video { position: relative; }
.sl-thumb--video::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--sl-ink); }
/* info */
.sl-pdp__info { display: flex; flex-direction: column; gap: var(--sl-space-4); }
.sl-pdp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--sl-ink-muted); }
.sl-pdp__meta .star { color: var(--sl-brand); letter-spacing: 1px; }
.sl-pdp__meta b { color: var(--sl-ink); font-weight: 600; }
.sl-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--sl-radius-sm); background: var(--sl-brand-soft); color: var(--sl-accent); font: 600 12px/22px var(--sl-font-sans); }
.sl-pdp h1 { margin: 0; font: 600 24px/1.25 var(--sl-font-display); color: var(--sl-ink); }
.sl-pdp__price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: var(--sl-space-3) var(--sl-space-4); border-radius: var(--sl-radius-md); background: var(--sl-surface-200); }
.sl-pdp__price strong { font: 700 26px/32px var(--sl-font-sans); color: var(--sl-price); }
.sl-pdp__price s { font-size: 14px; color: var(--sl-ink-muted); }
.sl-pdp__price .off { padding: 0 8px; border-radius: var(--sl-radius-sm); background: var(--sl-sale); color: var(--sl-on-dark); font: 700 12px/22px var(--sl-font-sans); }
.sl-pdp__price small { flex-basis: 100%; font-size: 12px; color: var(--sl-accent); font-weight: 600; }
.sl-vouchers { display: flex; gap: var(--sl-space-2); overflow-x: auto; scrollbar-width: none; }
.sl-vouchers::-webkit-scrollbar { display: none; }
.sl-voucher { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px dashed var(--sl-brand); border-radius: var(--sl-radius-sm); background: var(--sl-surface-0); font-size: 12px; font-weight: 600; color: var(--sl-accent); }
.sl-voucher .sl-ico { width: 15px; height: 15px; }
.sl-field__label { display: flex; justify-content: space-between; margin-bottom: var(--sl-space-2); font-size: 14px; font-weight: 600; }
.sl-field__label span { font-weight: 400; color: var(--sl-ink-muted); }
.sl-options { display: flex; flex-wrap: wrap; gap: var(--sl-space-2); }
.sl-option { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 4px; border-radius: var(--sl-radius-md); border: 1px solid var(--sl-line); background: var(--sl-surface-0); font-size: 14px; cursor: pointer; }
.sl-option i { width: 34px; height: 34px; border-radius: var(--sl-radius-sm); background: var(--sl-surface-200); }
.sl-option.on { border: 2px solid var(--sl-ink); padding: 3px 13px 3px 3px; font-weight: 600; }
.sl-option.off { opacity: .45; text-decoration: line-through; }
.sl-qty-row { display: flex; align-items: center; gap: var(--sl-space-4); }
.sl-stepper { display: inline-flex; align-items: center; height: 44px; border: 1px solid var(--sl-line); border-radius: var(--sl-radius-pill); background: var(--sl-surface-0); }
.sl-stepper button { width: 44px; height: 42px; border: 0; background: none; font-size: 20px; color: var(--sl-ink); cursor: pointer; }
.sl-stepper output { min-width: 28px; text-align: center; font-weight: 600; }
.sl-stock { font-size: 13px; color: var(--sl-ink-muted); }
.sl-stock b { color: var(--sl-price); }
.sl-giftopt { display: flex; align-items: center; gap: var(--sl-space-3); padding: var(--sl-space-3); border: 1px solid var(--sl-line); border-radius: var(--sl-radius-md); background: var(--sl-surface-0); font-size: 14px; cursor: pointer; }
.sl-giftopt input { width: 20px; height: 20px; accent-color: var(--sl-accent); }
.sl-giftopt small { display: block; font-size: 12px; color: var(--sl-ink-muted); }
.sl-giftopt .free { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--sl-accent); }
.sl-pdp__cta { display: none; gap: var(--sl-space-3); }
.sl-btn--lg { min-height: 52px; font-size: 15px; }
.sl-btn--outline { background: var(--sl-surface-0); color: var(--sl-ink); border: 1.5px solid var(--sl-ink); }
.sl-btn--outline:hover { background: var(--sl-surface-200); }
.sl-perks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sl-space-2); }
.sl-perk { display: flex; gap: var(--sl-space-2); align-items: flex-start; font-size: 12px; line-height: 16px; color: var(--sl-ink-muted); }
.sl-perk .sl-ico { width: 20px; height: 20px; color: var(--sl-accent); }
.sl-perk b { display: block; color: var(--sl-ink); font-size: 13px; line-height: 18px; font-weight: 600; }
.sl-ship { display: flex; gap: var(--sl-space-3); align-items: center; padding: var(--sl-space-3) 0; border-top: 1px solid var(--sl-line); border-bottom: 1px solid var(--sl-line); font-size: 13px; }
.sl-ship .sl-ico { color: var(--sl-accent); }
.sl-ship b { font-weight: 600; }
/* accordions */
.sl-acc { border-bottom: 1px solid var(--sl-line); }
.sl-acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; font-weight: 600; font-size: 15px; cursor: pointer; }
.sl-acc summary::-webkit-details-marker { display: none; }
.sl-acc summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--sl-ink-muted); }
.sl-acc[open] summary::after { content: "–"; }
.sl-acc__body { padding-bottom: var(--sl-space-4); font-size: 14px; line-height: 22px; color: var(--sl-ink-muted); }
.sl-acc__body p { margin: 0 0 var(--sl-space-3); }
.sl-acc__body ul { margin: 0; padding-left: 18px; }
.sl-specs { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.sl-specs dt { color: var(--sl-ink-muted); }
.sl-specs dd { margin: 0; color: var(--sl-ink); font-weight: 500; }
/* story (long description images) */
.sl-story { display: grid; gap: var(--sl-space-3); max-width: 760px; margin: 0 auto; }
.sl-story__img { border-radius: var(--sl-radius-md); background: var(--sl-surface-200); aspect-ratio: 4 / 5; display: grid; place-items: center; color: var(--sl-display); font-size: 12px; text-align: center; }
.sl-story__img.wide { aspect-ratio: 16 / 9; }
.sl-story__img svg { width: 30%; height: 30%; stroke: currentColor; fill: none; stroke-width: .9; opacity: .6; }
.sl-story__lead { margin: 0; text-align: center; font: italic 500 22px/1.35 var(--sl-font-display); color: var(--sl-display); padding: var(--sl-space-4) var(--sl-space-2); }
/* reviews */
.sl-reviews__sum { display: flex; gap: var(--sl-space-6); align-items: center; padding: var(--sl-space-4); border-radius: var(--sl-radius-md); background: var(--sl-surface-200); }
.sl-reviews__score { text-align: center; }
.sl-reviews__score strong { display: block; font: 600 40px/1 var(--sl-font-display); }
.sl-reviews__score .star { color: var(--sl-brand); letter-spacing: 2px; }
.sl-reviews__score small { display: block; font-size: 12px; color: var(--sl-ink-muted); }
.sl-bars { flex: 1; display: grid; gap: 4px; font-size: 12px; color: var(--sl-ink-muted); }
.sl-bars div { display: grid; grid-template-columns: 24px 1fr 20px; gap: 8px; align-items: center; }
.sl-bars i { height: 6px; border-radius: 3px; background: var(--sl-line); overflow: hidden; }
.sl-bars i b { display: block; height: 100%; background: var(--sl-brand); }
.sl-reviews__filters { margin-top: var(--sl-space-3); }
.sl-review { padding: var(--sl-space-4) 0; border-bottom: 1px solid var(--sl-line); font-size: 14px; }
.sl-review__head { display: flex; align-items: center; gap: var(--sl-space-2); margin-bottom: 4px; }
.sl-avatar { width: 32px; height: 32px; border-radius: 16px; background: var(--sl-brand-soft); color: var(--sl-accent); display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.sl-review__head b { font-weight: 600; font-size: 13px; }
.sl-review__head small { display: block; font-size: 11px; color: var(--sl-ink-muted); }
.sl-review .star { color: var(--sl-brand); font-size: 12px; letter-spacing: 1px; }
.sl-review p { margin: 6px 0 8px; color: var(--sl-ink); }
.sl-review__pics { display: flex; gap: 6px; }
.sl-review__pics i { width: 64px; height: 64px; border-radius: var(--sl-radius-sm); background: var(--sl-surface-300); }
/* sticky buy bar (mobile) */
.sl-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: var(--sl-space-2); align-items: center; padding: 8px var(--sl-space-3) calc(8px + env(safe-area-inset-bottom)); background: var(--sl-surface-0); border-top: 1px solid var(--sl-line); box-shadow: var(--sl-shadow-float); }
.sl-buybar__chat { flex: none; display: flex; flex-direction: column; align-items: center; width: 48px; font-size: 10px; line-height: 12px; color: var(--sl-ink-muted); }
.sl-buybar .sl-btn { flex: 1; min-height: 48px; padding: 0 10px; }
.sl-buybar .sl-btn--primary { flex: 1.35; flex-direction: column; gap: 0; line-height: 17px; }
.sl-buybar .sl-btn--primary small { font-size: 11px; font-weight: 500; opacity: .85; }
.sl-page-pad { padding-bottom: 88px; }

@media (min-width: 900px) {
  .sl-crumbs { display: block; }
  .sl-pdp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sl-space-12); align-items: start; margin-top: var(--sl-space-4); }
  .sl-gallery { margin: 0; display: grid; grid-template-columns: 76px 1fr; gap: var(--sl-space-3); position: sticky; top: 96px; }
  .sl-gallery__main { grid-column: 2; grid-row: 1; border-radius: var(--sl-radius-lg); }
  .sl-thumbs { grid-column: 1; grid-row: 1; flex-direction: column; padding: 0; overflow: visible; }
  .sl-thumb { width: 76px; height: 76px; }
  .sl-pdp h1 { font-size: 32px; }
  .sl-pdp__price strong { font-size: 30px; line-height: 36px; }
  .sl-pdp__cta { display: grid; grid-template-columns: 1fr 1fr; }
  .sl-perks { grid-template-columns: repeat(4, 1fr); }
  .sl-story__lead { font-size: 28px; }
  .sl-pdp-lower { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sl-space-12); align-items: start; }
  .sl-buybar { display: none; }
  .sl-page-pad { padding-bottom: 0; }
}
/* long description: clamp on mobile, "Xem thêm" expands */
.sl-clamp { position: relative; max-height: 560px; overflow: hidden; }
.sl-clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, rgba(255,252,250,0), var(--sl-surface-100)); }
.sl-clamp.open { max-height: none; }
.sl-clamp.open::after { display: none; }
.sl-clamp + .sl-btn { margin-top: var(--sl-space-3); }
.sl-clamp.open + .sl-btn { display: none; }
@media (min-width: 900px) { .sl-clamp { max-height: 900px; } }
@media (min-width: 900px) { .sl-pdp-lower > section { position: sticky; top: 96px; } }

/* ============ Runtime additions for the AngularJS pages ============ */
.sl { font-size: 15px; }
.sl h1, .sl h2, .sl h3, .sl h4 { letter-spacing: normal; text-transform: none; }
.sl button { font-family: inherit; }
.sl [ng-cloak], .sl .ng-cloak { display: none !important; }

/* Gallery: native scroll-snap track (swipe on mobile, thumbs on desktop) */
.sl-gallery__track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sl-gallery__track::-webkit-scrollbar { display: none; }
.sl-gallery__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; }
.sl-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-gallery__nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 20px; border: 0; background: rgba(255,255,255,.92); color: var(--sl-ink); box-shadow: var(--sl-shadow-card); cursor: pointer; place-items: center; }
.sl-gallery__nav--prev { left: 12px; } .sl-gallery__nav--next { right: 12px; }
.sl-gallery__nav .sl-ico { width: 20px; height: 20px; }
.sl-gallery__nav--prev .sl-ico { transform: rotate(180deg); }
.sl-thumb { padding: 0; overflow: hidden; cursor: pointer; }
.sl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-gallery__dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.sl-gallery__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.75); transition: width .2s; }
.sl-gallery__dots i.on { width: 18px; background: var(--sl-surface-0); }

.sl-pdp__desc { margin: 0; font-size: 14px; line-height: 22px; color: var(--sl-ink-muted); white-space: pre-line; overflow-wrap: anywhere; } /* giữ xuống dòng của mô tả ngắn nhập trong CMS */
.sl-pdp__meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sl-option { font-family: inherit; color: var(--sl-ink); }
.sl-option i.dot { width: 22px; height: 22px; border-radius: 11px; border: 1px solid rgba(0,0,0,.12); margin-left: 8px; }
.sl-option.nodot { padding-left: 14px; }
.sl-option.on.nodot { padding-left: 13px; }
.sl-field.need .sl-field__label { color: var(--sl-price); }
.sl-field.need .sl-option { border-color: var(--sl-price); }
.sl-stepper output, .sl-stepper button { font-family: inherit; }

/* Long description (markdown from CMS) */
.sl-richtext { color: var(--sl-ink); font-size: 14px; line-height: 22px; }
.sl-richtext img { display: block; max-width: 100%; height: auto; margin: 0 auto 8px; border-radius: var(--sl-radius-md); }
.sl-richtext p { margin: 0 0 12px; }

/* Reviews */
.sl-review__head b { color: var(--sl-ink); }
.sl-review__title { font-weight: 600; margin-top: 6px; color: var(--sl-ink); }
.sl-review__pics img { width: 64px; height: 64px; border-radius: var(--sl-radius-sm); object-fit: cover; cursor: zoom-in; }
.sl-empty { padding: var(--sl-space-4) 0; color: var(--sl-ink-muted); font-size: 14px; }

/* Product card image (related products) */
.sl-card__media img { position: absolute; inset: 0; }
.sl-card__name { color: var(--sl-ink); }

/* Bottom sheet (choose options on mobile) */
.sl-sheet-overlay { position: fixed; inset: 0; z-index: 1040; background: rgba(46,33,29,.45); opacity: 0; visibility: hidden; transition: opacity .25s; }
.sl-sheet-overlay.open { opacity: 1; visibility: visible; }
.sl-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; max-height: 88vh; overflow-y: auto; background: var(--sl-surface-0); border-radius: 20px 20px 0 0; padding: 8px var(--sl-space-4) calc(16px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .28s ease; box-shadow: 0 -8px 24px rgba(46,33,29,.18); }
.sl-sheet.open { transform: translateY(0); }
.sl-sheet__grab { width: 40px; height: 4px; border-radius: 2px; background: var(--sl-line); margin: 0 auto 12px; }
.sl-sheet__close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 18px; border: 0; background: var(--sl-surface-200); color: var(--sl-ink); display: grid; place-items: center; }
.sl-sheet__close .sl-ico { width: 18px; height: 18px; }
.sl-sheet__head { display: flex; gap: var(--sl-space-3); padding: 0 44px var(--sl-space-4) 0; border-bottom: 1px solid var(--sl-line); }
.sl-sheet__thumb { width: 84px; height: 84px; border-radius: var(--sl-radius-md); overflow: hidden; flex: none; background: var(--sl-surface-200); }
.sl-sheet__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sl-sheet__price { font: 700 22px/28px var(--sl-font-sans); color: var(--sl-price); }
.sl-sheet__price s { font-size: 13px; font-weight: 400; color: var(--sl-ink-muted); margin-left: 6px; }
.sl-sheet__name { font-size: 13px; line-height: 18px; color: var(--sl-ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-sheet__body { display: grid; gap: var(--sl-space-4); padding: var(--sl-space-4) 0; }
.sl-sheet__foot { position: sticky; bottom: 0; background: var(--sl-surface-0); padding-top: 4px; }

/* Product page: hide old floating widgets on mobile (buy bar has Chat) */
@media (max-width: 899px) {
  .sl-pdp-page ~ .tap-cart, .sl-pdp-page ~ .call-now, .sl-pdp-page ~ .mes { display: none !important; }
  .sl-sheet { display: block; }
}
.sl-buybar { z-index: 1030; }
.sl-buybar .sl-btn--primary { color: var(--sl-on-brand); }
.sl-buybar__chat { color: var(--sl-ink-muted); }
@media (min-width: 900px) {
  .sl-gallery__nav { display: grid; }
  .sl-gallery__dots { display: none; }
  .sl-sheet, .sl-sheet-overlay { display: none; }
  .sl-pdp .sl-gallery { top: 110px; }
}
/* fixes */
.sl-pdp { grid-template-columns: minmax(0, 1fr); }
.sl-pdp > *, .sl-pdp-lower > * { min-width: 0; }
.sl-sheet { visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; }
.sl-sheet.open { visibility: visible; transition: transform .28s ease, visibility 0s; }
@media (min-width: 900px) { .sl-pdp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.sl section { padding: 0; }
.sl section.sl-section { margin-top: var(--sl-space-8); }
@media (min-width: 900px) { .sl-vouchers { flex-wrap: wrap; } .sl section.sl-section { margin-top: var(--sl-space-12); } }

/* ============ Header (components/header.html) ============ */
header[ng-include] { position: sticky; top: -32px; z-index: 1035; background: transparent; padding: 0; box-shadow: none; }
.sl-hd { background: transparent; }
.sl-hd__announce { height: 32px; overflow: hidden; background: var(--sl-ink); color: var(--sl-on-dark); font-size: 12px; line-height: 32px; white-space: nowrap; }
.sl-hd__announce b { color: var(--sl-gold); font-weight: 600; }
.sl-hd__marquee { display: inline-flex; gap: 48px; padding-left: 24px; animation: sl-marquee 32s linear infinite; }
.sl-hd__marquee span::before { content: "✦"; margin-right: 12px; color: var(--sl-gold); }
@keyframes sl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sl-hd__marquee { animation: none; } }
.sl-hd__main { background: var(--sl-surface-0); border-bottom: 1px solid var(--sl-line); }
.sl-hd__bar { display: flex; align-items: center; gap: var(--sl-space-2); height: 56px; }
.sl-hd__logo { flex: 1; display: flex; justify-content: center; }
.sl-hd__logo img { height: 30px; width: auto; display: block; }
.sl-hd__nav { display: none; }
.sl-hd__actions { display: flex; align-items: center; }
.sl-hd__actions .sl-iconbtn, .sl-hd__menu { color: var(--sl-ink); }
.sl-hd__track { display: none !important; }
.sl-hd__new { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--sl-radius-pill); background: var(--sl-brand); color: var(--sl-on-brand); font-size: 10px; line-height: 16px; font-weight: 700; vertical-align: 2px; }
/* left spacer so the logo stays centred on mobile: menu (40) vs search+cart (80) */
.sl-hd__menu { margin-right: 40px; }

.sl-drawer-overlay { position: fixed; inset: 0; z-index: 1060; background: rgba(46,33,29,.45); opacity: 0; visibility: hidden; transition: opacity .25s; }
.sl-drawer-overlay.open { opacity: 1; visibility: visible; }
.sl-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1070; width: min(320px, 86vw); display: flex; flex-direction: column; background: var(--sl-surface-0); transform: translateX(-105%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; }
.sl-drawer.open { transform: none; visibility: visible; transition: transform .28s ease, visibility 0s; }
.sl-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px var(--sl-space-4); border-bottom: 1px solid var(--sl-line); }
.sl-drawer__head img { height: 26px; }
.sl-drawer__nav { display: flex; flex-direction: column; padding: var(--sl-space-2) 0; overflow-y: auto; }
.sl-drawer__nav a { display: flex; align-items: center; min-height: 52px; padding: 0 var(--sl-space-4); font-size: 16px; font-weight: 500; color: var(--sl-ink); border-bottom: 1px solid var(--sl-surface-200); }
.sl-drawer__nav a:hover { background: var(--sl-surface-100); color: var(--sl-accent); }
.sl-drawer__contact { margin-top: auto; display: grid; gap: var(--sl-space-2); padding: var(--sl-space-4); border-top: 1px solid var(--sl-line); }
.sl-drawer__contact .sl-btn--primary { color: var(--sl-on-brand); }

@media (min-width: 900px) {
  .sl-hd__bar { height: 72px; gap: var(--sl-space-6); }
  .sl-hd__menu { display: none; }
  .sl-hd__logo { flex: none; }
  .sl-hd__logo img { height: 36px; }
  .sl-hd__nav { display: flex; flex: 1; justify-content: center; gap: 32px; font-size: 14px; font-weight: 500; }
  .sl-hd__nav a { padding: 6px 0; border-bottom: 2px solid transparent; color: var(--sl-ink); }
  .sl-hd__nav a:hover { color: var(--sl-accent); border-color: var(--sl-brand); }
  .sl-hd__track { display: inline-grid !important; }
  .sl-drawer, .sl-drawer-overlay { display: none; }
}

/* ============ Footer (components/footer.html) ============ */
footer.footer-light:has(> .sl-ft), footer[ng-include] { background: transparent; padding: 0; margin: 0; }
.sl-ft { margin-top: var(--sl-space-12); padding: var(--sl-space-8) 0 var(--sl-space-6); background: var(--sl-surface-200); font-size: 14px; }
.sl-ft__perks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sl-space-4); padding-bottom: var(--sl-space-6); margin-bottom: var(--sl-space-6); border-bottom: 1px solid var(--sl-line); }
.sl-ft .sl-footer__grid { display: grid; gap: var(--sl-space-6); }
.sl-ft h4 { margin: 0 0 var(--sl-space-2); font: 600 14px/20px var(--sl-font-sans); color: var(--sl-ink); text-transform: none; letter-spacing: 0; }
.sl-ft p { margin: var(--sl-space-3) 0 0; color: var(--sl-ink-muted); font-size: 13px; line-height: 20px; }
.sl-ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--sl-ink-muted); }
.sl-ft ul li { padding: 0; font-size: 14px; line-height: 20px; }
.sl-ft a { color: var(--sl-ink-muted); }
.sl-ft a:hover { color: var(--sl-accent); }
.sl-ft__logo img { height: 32px; width: auto; }
.sl-ft__bct img { height: 56px; width: auto; }
.sl-ft .sl-footer__copy { margin-top: var(--sl-space-6); padding-top: var(--sl-space-4); border-top: 1px solid var(--sl-line); font-size: 12px; color: var(--sl-ink-muted); }
.sl-pdp-page ~ footer .sl-ft, .sl-page-pad ~ footer .sl-ft { padding-bottom: calc(var(--sl-space-6) + 72px); }
@media (min-width: 900px) {
  .sl-ft__perks { grid-template-columns: repeat(4, 1fr); }
  .sl-ft .sl-footer__grid { grid-template-columns: 2fr 1.3fr 1.3fr 1fr; gap: var(--sl-space-8); }
  .sl-pdp-page ~ footer .sl-ft, .sl-page-pad ~ footer .sl-ft { padding-bottom: var(--sl-space-6); }
}
.sl-pdp-page.sl-page-pad { padding-bottom: 0; }
@media (min-width: 900px) { .sl-pdp .sl-gallery { top: 88px; } }
/* Thumbnail dưới ảnh chính (cả desktop) */
@media (min-width: 900px) {
  .sl-pdp .sl-gallery { display: flex; flex-direction: column; gap: var(--sl-space-3); }
  .sl-pdp .sl-thumbs { flex-direction: row; padding: 0; overflow-x: auto; scrollbar-width: thin; }
  .sl-pdp .sl-thumb { width: 80px; height: 80px; }
}

/* ===== Trang sản phẩm: chữ lớn hơn, khung rộng hơn, ảnh + thumbnail lớn hơn ===== */
.sl-wrap { max-width: 1360px; }
.sl-pdp-page { font-size: 16px; line-height: 24px; }
.sl-pdp-page .sl-crumbs { font-size: 13px; }
.sl-pdp-page .sl-pdp__meta { font-size: 14px; }
.sl-pdp-page .sl-tag { font-size: 13px; height: 24px; line-height: 24px; }
.sl-pdp-page .sl-pdp h1 { font-size: 26px; }
.sl-pdp-page .sl-pdp__price strong { font-size: 28px; line-height: 34px; }
.sl-pdp-page .sl-pdp__price s { font-size: 15px; }
.sl-pdp-page .sl-pdp__price .off { font-size: 13px; line-height: 24px; }
.sl-pdp-page .sl-pdp__price small { font-size: 13px; }
.sl-pdp-page .sl-voucher { font-size: 13px; height: 32px; }
.sl-pdp-page .sl-pdp__desc { font-size: 15px; line-height: 24px; }
.sl-pdp-page .sl-field__label { font-size: 15px; }
.sl-pdp-page .sl-option { font-size: 15px; min-height: 46px; }
.sl-pdp-page .sl-stock, .sl-pdp-page .sl-ship { font-size: 14px; }
.sl-pdp-page .sl-perk { font-size: 13px; line-height: 18px; }
.sl-pdp-page .sl-perk b { font-size: 14px; line-height: 20px; }
.sl-pdp-page .sl-acc summary { font-size: 17px; }
.sl-pdp-page .sl-acc__body, .sl-pdp-page .sl-richtext { font-size: 15px; line-height: 24px; }
.sl-pdp-page .sl-review { font-size: 15px; }
.sl-pdp-page .sl-review__head b { font-size: 14px; }
.sl-pdp-page .sl-card__name { font-size: 14px; line-height: 20px; min-height: 40px; }
.sl-pdp-page .sl-price { font-size: 16px; }
.sl-pdp-page .sl-thumb { width: 72px; height: 72px; }
@media (min-width: 900px) {
  .sl-pdp-page .sl-pdp { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sl-space-12); }
  .sl-pdp-page .sl-pdp h1 { font-size: 36px; line-height: 1.2; }
  .sl-pdp-page .sl-pdp__price strong { font-size: 34px; line-height: 40px; }
  .sl-pdp-page .sl-btn--lg { min-height: 56px; font-size: 16px; }
  .sl-pdp-page .sl-section__head h2 { font-size: 30px; }
  .sl-pdp-page .sl-thumb { width: 100px; height: 100px; }
  .sl-pdp-page .sl-thumbs { gap: var(--sl-space-3); }
}
/* mô tả ngắn dưới giá + mô tả chi tiết: chữ to hơn */
.sl-pdp-page .sl-pdp__desc { font-size: 17px; line-height: 27px; }
.sl-pdp-page .sl-acc__body, .sl-pdp-page .sl-richtext { font-size: 16px; line-height: 26px; }
/* Option đang chọn: nền giống nút "Mua ngay" (coral, chữ tối) */
.sl-option.on, .sl-option.on.nodot { background: var(--sl-brand); border: 1px solid var(--sl-brand); color: var(--sl-on-brand); font-weight: 600; padding: 4px 14px 4px 4px; }
.sl-option.on.nodot { padding-left: 14px; }
.sl-option.on i.dot { border-color: rgba(255,255,255,.9); box-shadow: 0 0 0 1px var(--sl-on-brand); }
.sl-option:not(.on):hover { border-color: var(--sl-brand); }
/* Cột đánh giá hiển thị đầy đủ -> bỏ ghim (sticky) để cuộn hết được trên desktop */
@media (min-width: 900px) { .sl-pdp-lower > section { position: static; } }

/* ============ Giỏ hàng (components/cart.html) ============ */
.offcanvas.sl-cart { --bs-offcanvas-width: 420px; display: flex; flex-direction: column; background: var(--sl-surface-100); border-left: 0; font-size: 15px; }
@media (max-width: 575px) { .offcanvas.sl-cart { --bs-offcanvas-width: 100%; } }
.sl-cart__head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 10px var(--sl-space-4); background: var(--sl-surface-0); border-bottom: 1px solid var(--sl-line); }
.sl-cart__head h3 { margin: 0; font: 600 22px/1.3 var(--sl-font-display); color: var(--sl-ink); text-transform: none; letter-spacing: 0; }
.sl-cart__head h3 span { font: 500 15px var(--sl-font-sans); color: var(--sl-ink-muted); }

.sl-cart__progress { flex: none; padding: 12px var(--sl-space-4) 14px; background: var(--sl-surface-0); border-bottom: 1px solid var(--sl-line); }
.sl-cart__progress p { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--sl-accent); }
.sl-cart__track { height: 6px; border-radius: 3px; background: var(--sl-surface-300); overflow: hidden; }
.sl-cart__fill { height: 100%; border-radius: 3px; background: var(--sl-brand); transition: width .35s ease; }
.sl-cart__steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--sl-ink-muted); text-align: center; }
.sl-cart__steps span { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.sl-cart__steps i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 8px; border: 1px solid var(--sl-line); background: var(--sl-surface-0); }
.sl-cart__steps i svg { width: 10px; height: 10px; fill: none; stroke: transparent; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sl-cart__steps .done { color: var(--sl-ink); }
.sl-cart__steps .done i { background: var(--sl-brand); border-color: var(--sl-brand); }
.sl-cart__steps .done i svg { stroke: var(--sl-on-brand); }

.sl-cart__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--sl-space-3) var(--sl-space-4); }
.sl-cart__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sl-space-3); }
.sl-cart__item { display: flex; gap: var(--sl-space-3); padding: var(--sl-space-3); background: var(--sl-surface-0); border: 1px solid var(--sl-line); border-radius: var(--sl-radius-md); }
.sl-cart__img { flex: none; width: 84px; height: 84px; border-radius: var(--sl-radius-sm); overflow: hidden; background: var(--sl-surface-200); }
.sl-cart__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-cart__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sl-cart__top { display: flex; align-items: flex-start; gap: 6px; }
.sl-cart__name { flex: 1; font-size: 14px; line-height: 20px; color: var(--sl-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-cart__name:hover { color: var(--sl-accent); }
.sl-cart__remove { flex: none; width: 30px; height: 30px; margin: -4px -4px 0 0; border: 0; border-radius: 15px; background: none; color: var(--sl-ink-muted); display: grid; place-items: center; cursor: pointer; }
.sl-cart__remove:hover { background: var(--sl-surface-200); color: var(--sl-price); }
.sl-cart__remove .sl-ico { width: 18px; height: 18px; }
.sl-cart__opt { align-self: flex-start; padding: 1px 8px; border-radius: var(--sl-radius-sm); background: var(--sl-surface-200); font-size: 12px; line-height: 18px; color: var(--sl-ink-muted); }
.sl-cart__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; }
.sl-cart__price { text-align: right; line-height: 1.2; }
.sl-cart__price strong { display: block; font-size: 16px; font-weight: 700; color: var(--sl-price); }
.sl-cart__price s { font-size: 12px; color: var(--sl-ink-muted); }
.sl-stepper--sm { height: 34px; }
.sl-stepper--sm button { width: 32px; height: 32px; font-size: 18px; }
.sl-stepper--sm button:disabled { opacity: .35; cursor: default; }
.sl-stepper--sm output { min-width: 24px; font-size: 14px; }

.sl-cart__empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 64px var(--sl-space-4); }
.sl-cart__empty-ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 36px; background: var(--sl-brand-soft); color: var(--sl-accent); margin-bottom: 6px; }
.sl-cart__empty-ico .sl-ico { width: 32px; height: 32px; }
.sl-cart__empty b { font-size: 16px; color: var(--sl-ink); }
.sl-cart__empty p { margin: 0 0 12px; font-size: 14px; color: var(--sl-ink-muted); }
.sl-cart__empty .sl-btn--primary { color: var(--sl-on-brand); }

.sl-cart__foot { flex: none; padding: var(--sl-space-3) var(--sl-space-4) calc(var(--sl-space-3) + env(safe-area-inset-bottom)); background: var(--sl-surface-0); border-top: 1px solid var(--sl-line); box-shadow: 0 -6px 18px rgba(46,33,29,.06); }
.sl-cart__rows { display: grid; gap: 6px; font-size: 14px; color: var(--sl-ink-muted); }
.sl-cart__rows > div { display: flex; justify-content: space-between; }
.sl-cart__rows > div span:last-child { color: var(--sl-ink); }
.sl-cart__rows .minus, .sl-cart__rows .free { color: var(--sl-accent) !important; font-weight: 600; }
.sl-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 12px; padding-top: 10px; border-top: 1px dashed var(--sl-line); }
.sl-cart__total span { font-size: 15px; font-weight: 600; color: var(--sl-ink); }
.sl-cart__total strong { font-size: 22px; font-weight: 700; color: var(--sl-price); }
.sl-cart__foot .sl-btn--primary { color: var(--sl-on-brand); }
.sl-cart__note { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--sl-ink-muted); }

/* ============ Thanh toán (checkout.html) ============ */
.sl-co-page { padding-bottom: 96px; }
.sl-co__title { margin: var(--sl-space-2) 0 var(--sl-space-4); font: 600 26px/1.25 var(--sl-font-display); color: var(--sl-ink); }
.sl-co { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sl-space-4); align-items: start; }
.sl-co__main { display: grid; gap: var(--sl-space-3); min-width: 0; }
.sl-co__side { min-width: 0; }
.sl-co__card { padding: var(--sl-space-4); background: var(--sl-surface-0); border: 1px solid var(--sl-line); border-radius: var(--sl-radius-md); display: grid; gap: var(--sl-space-3); }
.sl-co__card h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 17px/1.3 var(--sl-font-sans); color: var(--sl-ink); text-transform: none; letter-spacing: 0; }
.sl-co__num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 13px; background: var(--sl-brand); color: var(--sl-on-brand); font-size: 13px; font-weight: 700; }
.sl-co__grid { display: grid; gap: var(--sl-space-3); }

.sl-input { display: grid; gap: 6px; }
.sl-input label { margin: 0; font-size: 14px; font-weight: 600; color: var(--sl-ink); }
.sl-input label span { font-weight: 400; color: var(--sl-ink-muted); }
.sl-input input, .sl-input select, .sl-input textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--sl-line); border-radius: var(--sl-radius-md); background: var(--sl-surface-0); font: 400 16px/1.4 var(--sl-font-sans); color: var(--sl-ink); outline: none; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.sl-input select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f5a52' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.sl-input select:disabled { background-color: var(--sl-surface-100); color: var(--sl-ink-muted); }
.sl-input textarea { resize: vertical; min-height: 72px; }
.sl-input input::placeholder, .sl-input textarea::placeholder { color: #b4a39c; }
.sl-input input:focus, .sl-input select:focus, .sl-input textarea:focus { border-color: var(--sl-brand); box-shadow: 0 0 0 3px var(--sl-brand-soft); }
.sl-input.err input, .sl-input.err select { border-color: var(--sl-price); }
.sl-input.err small { color: var(--sl-price); font-size: 13px; }

/* Thanh toán */
.sl-pay { display: grid; gap: var(--sl-space-2); }
.sl-pay__opt { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px; border: 1px solid var(--sl-line); border-radius: var(--sl-radius-md); background: var(--sl-surface-0); cursor: pointer; transition: border-color .15s, background .15s; }
.sl-pay__opt input { position: absolute; opacity: 0; pointer-events: none; }
.sl-pay__dot { flex: none; width: 20px; height: 20px; border-radius: 10px; border: 2px solid var(--sl-line); background: var(--sl-surface-0); }
.sl-pay__opt b { display: block; font-size: 15px; font-weight: 600; color: var(--sl-ink); }
.sl-pay__opt small { display: block; font-size: 13px; color: var(--sl-ink-muted); }
.sl-pay__opt.on { border-color: var(--sl-brand); background: var(--sl-surface-200); }
.sl-pay__opt.on .sl-pay__dot { border: 6px solid var(--sl-brand); }
.sl-bank { display: flex; gap: var(--sl-space-4); align-items: flex-start; padding: var(--sl-space-3); border-radius: var(--sl-radius-md); background: var(--sl-surface-200); }
.sl-bank img { flex: none; width: 140px; height: auto; border-radius: var(--sl-radius-sm); background: #fff; } /* ảnh QR có tỉ lệ dọc hơn ô vuông - để height tự giãn cho mã đủ lớn mà không méo */
.sl-bank dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; }
.sl-bank dt { font-weight: 400; color: var(--sl-ink-muted); }
.sl-bank dd { margin: 0; color: var(--sl-ink); }
@media (max-width: 599px) { /* màn hẹp: xếp QR lên trên cho phần thông tin đủ chỗ, khỏi tràn ngang */
  .sl-bank { flex-direction: column; }
  .sl-bank img { width: 170px; align-self: center; }
}

/* Tóm tắt đơn */
.sl-co__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sl-space-3); }
.sl-co__items li { display: flex; align-items: center; gap: var(--sl-space-3); }
.sl-co__thumb { position: relative; flex: none; width: 60px; height: 60px; border-radius: var(--sl-radius-sm); background: var(--sl-surface-200); }
.sl-co__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--sl-radius-sm); display: block; }
.sl-co__thumb i { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--sl-ink); color: #fff; font: 600 11px/20px var(--sl-font-sans); font-style: normal; text-align: center; }
.sl-co__iname { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; color: var(--sl-ink); }
.sl-co__iname small { display: block; font-size: 12px; color: var(--sl-ink-muted); }
.sl-co__iprice { flex: none; font-size: 14px; font-weight: 600; color: var(--sl-ink); }
.sl-co__summary h2 { font-family: var(--sl-font-display); font-size: 20px; }
.sl-co__summary .sl-cart__total { margin: 0; }
.sl-co__terms { margin: 0; text-align: center; font-size: 12px; color: var(--sl-ink-muted); }
.sl-co__terms a { color: var(--sl-accent); text-decoration: underline; }
.sl-co__perks { margin-top: var(--sl-space-4); }
.sl-co__submit, .sl-co__bar .sl-btn--primary { color: var(--sl-on-brand); }
.sl-co__submit:disabled, .sl-co__bar .sl-btn:disabled { opacity: .7; cursor: wait; }
.sl-spin { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(46,33,29,.25); border-top-color: var(--sl-on-brand); animation: sl-spin .7s linear infinite; }
@keyframes sl-spin { to { transform: rotate(360deg); } }

/* Mobile: tóm tắt thu gọn ở đầu, ẩn cột phải chi tiết sản phẩm, thanh đặt hàng cố định */
.sl-co__mini { padding: 0; gap: 0; }
.sl-co__mini-head { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 52px; padding: 0 var(--sl-space-4); border: 0; background: none; font: 600 14px var(--sl-font-sans); color: var(--sl-ink); cursor: pointer; }
.sl-co__mini-total { display: inline-flex; align-items: center; gap: 4px; color: var(--sl-price); font-size: 16px; font-weight: 700; }
.sl-co__mini-total .sl-ico { width: 18px; height: 18px; color: var(--sl-ink-muted); transition: transform .2s; }
.sl-co__mini-total .sl-ico.up { transform: rotate(180deg); }
.sl-co__mini .sl-co__items { padding: 0 var(--sl-space-4) var(--sl-space-4); }
.sl-co__summary .sl-co__items, .sl-co__summary h2, .sl-co__summary .sl-co__submit { display: none; }
.sl-co__bar { justify-content: space-between; }
.sl-co__bar-total { display: flex; flex-direction: column; line-height: 1.2; }
.sl-co__bar-total small { font-size: 12px; color: var(--sl-ink-muted); }
.sl-co__bar-total strong { font-size: 20px; color: var(--sl-price); }
.sl-co__bar .sl-btn { flex: 0 0 55%; min-height: 50px; font-size: 16px; }
.sl-co__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 64px 0; text-align: center; }
.sl-co__empty b { font-size: 17px; color: var(--sl-ink); }
.sl-co__empty p { margin: 0 0 12px; color: var(--sl-ink-muted); }
.sl-co__empty .sl-btn--primary { color: var(--sl-on-brand); }
.sl-co-page ~ footer .sl-ft { padding-bottom: calc(var(--sl-space-6) + 72px); }
@media (max-width: 899px) { .sl-co-page ~ .tap-cart, .sl-co-page ~ .call-now, .sl-co-page ~ .mes { display: none !important; } }

@media (min-width: 900px) {
  .sl-co-page { padding-bottom: 0; }
  .sl-co__title { font-size: 34px; margin-bottom: var(--sl-space-6); }
  .sl-co { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sl-space-8); }
  .sl-co__card { padding: var(--sl-space-6); gap: var(--sl-space-4); }
  .sl-co__grid { grid-template-columns: 1fr 1fr; }
  .sl-co__grid--3 { grid-template-columns: 1fr 1fr 1fr; }
  .sl-pay { grid-template-columns: 1fr 1fr; }
  .sl-co__mini { display: none; }
  .sl-co__side { position: sticky; top: 96px; }
  .sl-co__summary .sl-co__items, .sl-co__summary h2 { display: grid; }
  .sl-co__summary h2 { display: flex; }
  .sl-co__summary .sl-co__submit { display: inline-flex; }
  .sl-co__summary .sl-co__items { max-height: 320px; overflow-y: auto; padding: 6px 6px 6px 0; }
  .sl-co__bar { display: none; }
  .sl-co__perks { grid-template-columns: 1fr 1fr; }
  .sl-co-page ~ footer .sl-ft { padding-bottom: var(--sl-space-6); }
}
/* card là <section>: tăng độ ưu tiên để thắng ".sl section { padding: 0 }" */
.sl .sl-co__card { padding: var(--sl-space-4); }
.sl .sl-co__card.sl-co__mini { padding: 0; }
@media (min-width: 900px) { .sl .sl-co__card { padding: var(--sl-space-6); } }

/* ============ Bộ sưu tập (category.html) ============ */
.sl-cat-page { padding-bottom: var(--sl-space-8); }
.sl-cat__hero { margin-top: var(--sl-space-3); border-radius: var(--sl-radius-lg); overflow: hidden; background: var(--sl-surface-300); aspect-ratio: 1372 / 356; }
.sl-cat__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-cat__intro { margin: var(--sl-space-4) 0 var(--sl-space-3); }
.sl-cat__intro h1 { margin: 0 0 4px; font: 600 26px/1.25 var(--sl-font-display); color: var(--sl-ink); }
.sl-cat__intro p { margin: 0; font-size: 14px; line-height: 22px; color: var(--sl-ink-muted); max-width: 720px; }
.sl-cat__bar { position: sticky; top: 56px; z-index: 20; margin: 0 calc(-1 * var(--sl-space-4)) var(--sl-space-3); padding: 10px var(--sl-space-4); background: rgba(255,252,250,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--sl-line); }
.sl-cat__cats { margin-bottom: 10px !important; }
.sl-cat__tools { display: flex; align-items: center; justify-content: space-between; gap: var(--sl-space-2); }
.sl-cat__count { font-size: 13px; color: var(--sl-ink-muted); white-space: nowrap; }
.sl-cat__count b { color: var(--sl-ink); }
.sl-cat__selects { display: flex; gap: var(--sl-space-2); min-width: 0; }
.sl-select { position: relative; margin: 0; min-width: 0; }
.sl-select select { height: 36px; max-width: 100%; padding: 0 30px 0 12px; border: 1px solid var(--sl-line); border-radius: var(--sl-radius-pill); background: var(--sl-surface-0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f5a52' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; font: 500 13px var(--sl-font-sans); color: var(--sl-ink); -webkit-appearance: none; appearance: none; cursor: pointer; }
.sl-select select:focus { outline: none; border-color: var(--sl-brand); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sl-cat__grid .sl-card__meta { display: block; min-height: 15px; }
.sl-cat__more { display: flex; margin: var(--sl-space-6) auto 0; min-width: 240px; }
.sl-cat__empty { text-align: center; padding: var(--sl-space-12) 0; }
.sl-cat__empty a { color: var(--sl-accent); text-decoration: underline; }
/* skeleton */
.sl-cat-skel { padding: var(--sl-space-4) 0 var(--sl-space-8); }
.sl-skel { border-radius: var(--sl-radius-md); background: linear-gradient(90deg, var(--sl-surface-200) 25%, var(--sl-surface-100) 50%, var(--sl-surface-200) 75%); background-size: 200% 100%; animation: sl-shimmer 1.2s infinite linear; }
.sl-skel--hero { aspect-ratio: 1372 / 356; border-radius: var(--sl-radius-lg); margin-bottom: var(--sl-space-6); }
.sl-skel--card { aspect-ratio: 3 / 4; }
@keyframes sl-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (min-width: 900px) {
  .sl-cat__intro h1 { font-size: 34px; }
  .sl-cat__intro p { font-size: 15px; }
  .sl-cat__bar { top: 72px; margin: 0 0 var(--sl-space-6); padding: 12px 0; display: flex; align-items: center; gap: var(--sl-space-4); }
  .sl-cat__cats { flex: 1; margin: 0 !important; flex-wrap: wrap; }
  .sl-cat__tools { flex: none; gap: var(--sl-space-4); }
  .sl-select select { height: 38px; font-size: 14px; }
}

/* ============ Toast "Đã thêm vào giỏ" & thông báo (apiService.toast) ============ */
.sl-toasts { position: fixed; z-index: 5000; top: 68px; left: 12px; right: 12px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; background: transparent; }
.sl-toast { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 40px 12px 12px; background: var(--sl-surface-0); border: 1px solid var(--sl-line); border-radius: var(--sl-radius-md); box-shadow: 0 12px 32px rgba(46,33,29,.18); font: 400 14px/1.4 var(--sl-font-sans); color: var(--sl-ink); pointer-events: auto; opacity: 0; transform: translateY(-10px); transition: opacity .22s ease, transform .22s ease; }
.sl-toast.show { opacity: 1; transform: none; }
.sl-toast__thumb { flex: none; width: 56px; height: 56px; border-radius: var(--sl-radius-sm); overflow: hidden; background: var(--sl-surface-200); }
.sl-toast__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-toast__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 16px; background: var(--sl-brand); }
.sl-toast__icon svg, .sl-toast__ok svg, .sl-toast__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sl-toast__icon { color: var(--sl-on-brand); }
.sl-toast--warn .sl-toast__icon { background: var(--sl-price); color: #fff; }
.sl-toast--warn { border-color: var(--sl-price); }
.sl-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sl-toast__title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--sl-ink); }
.sl-toast__ok { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 9px; background: var(--sl-brand); color: var(--sl-on-brand); }
.sl-toast__ok svg { width: 12px; height: 12px; stroke-width: 3; }
.sl-toast__text { font-size: 14px; color: var(--sl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-toast__title + .sl-toast__text { font-size: 13px; color: var(--sl-ink-muted); }
.sl-toast__sub { font-size: 12px; color: var(--sl-ink-muted); }
.sl-toast__action { align-self: flex-start; margin-top: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: var(--sl-radius-pill); background: var(--sl-brand); color: var(--sl-on-brand); font: 600 13px var(--sl-font-sans); cursor: pointer; }
.sl-toast__action:hover { background: var(--sl-brand-hover); }
.sl-toast__close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 14px; background: none; color: var(--sl-ink-muted); display: grid; place-items: center; cursor: pointer; }
.sl-toast__close:hover { background: var(--sl-surface-200); }
@media (min-width: 900px) {
  .sl-toasts { top: 88px; left: auto; right: 24px; width: 380px; }
}
@media (prefers-reduced-motion: reduce) { .sl-toast { transition: none; } }

/* ============ Nút giỏ hàng nổi (.tap-cart) — tròn, màu coral ============ */
.tap-cart { width: 60px !important; height: 60px !important; right: 24px !important; bottom: 32px !important; padding: 0 !important; border-radius: 50% !important; background: var(--sl-brand) !important; color: var(--sl-on-brand) !important; box-shadow: var(--sl-shadow-float); z-index: 1020 !important; transition: background .15s, transform .15s; }
.tap-cart:hover { background: var(--sl-brand-hover) !important; transform: translateY(-2px); }
.tap-cart > div { position: relative; width: 100%; height: 100%; display: grid; place-items: center; cursor: pointer; }
.sl-tapcart__ico { width: 26px; height: 26px; fill: none; stroke: var(--sl-on-brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-tapcart__count { position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--sl-ink); color: #fff; border: 2px solid var(--sl-surface-0); font: 700 11px/18px var(--sl-font-sans); text-align: center; box-sizing: border-box; }

/* ===== Nút "Mua ngay" (thanh mua mobile): vệt sáng chéo chạy trái -> phải + nhịp sáng viền ===== */
.sl-pdp-page ~ .sl .sl-buybar .sl-btn--primary,
.sl .sl-buybar .sl-btn--primary { position: relative; overflow: hidden; isolation: isolate; animation: sl-buy-pulse 3.2s ease-out infinite; }
.sl .sl-buybar .sl-btn--primary::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -75%; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-22deg);
  animation: sl-buy-shine 3.2s ease-in-out infinite;
}
@keyframes sl-buy-shine {
  0%   { left: -75%; }
  35%  { left: 135%; }
  100% { left: 135%; }
}
@keyframes sl-buy-pulse {
  0%, 30% { box-shadow: 0 0 0 0 rgba(255,122,92,.55); }
  65%     { box-shadow: 0 0 0 9px rgba(255,122,92,0); }
  100%    { box-shadow: 0 0 0 0 rgba(255,122,92,0); }
}
.sl .sl-buybar .sl-btn--primary:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .sl .sl-buybar .sl-btn--primary, .sl .sl-buybar .sl-btn--primary::after { animation: none; }
}

/* ============ Trang chủ (index.html) ============ */
.sl-home { padding-bottom: var(--sl-space-8); }
.sl-home__banner { display: block; margin-top: var(--sl-space-3); border-radius: var(--sl-radius-lg); overflow: hidden; background: var(--sl-surface-300); aspect-ratio: 5760 / 2079; }
.sl-home__banner img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sl-home__banner:hover img { transform: scale(1.015); }
.sl-home__trust { margin-top: var(--sl-space-4); }
.sl .sl-home__trust { padding: 0; }
.sl-home__cats .sl-cat__img { overflow: hidden; padding: 0; }
.sl-home__cats .sl-cat__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-home__cats .sl-cat { color: var(--sl-ink); }

/* Hàng sản phẩm: mobile cuộn ngang, desktop lưới 5 cột */
.sl-prow { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: var(--sl-space-3); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--sl-space-4)); padding: 0 var(--sl-space-4) 4px; }
.sl-prow::-webkit-scrollbar { display: none; }
.sl-prow > * { scroll-snap-align: start; }
.sl-swatches { display: flex; gap: 4px; margin-top: 2px; }
.sl-swatches i { width: 12px; height: 12px; border-radius: 6px; border: 1px solid rgba(0,0,0,.12); }

.sl-home__title { text-align: center; max-width: 640px; margin: 0 auto var(--sl-space-4); }
.sl-home__title h2 { margin: 0 0 6px; font: 600 22px/1.3 var(--sl-font-display); color: var(--sl-ink); }
.sl-home__title p { margin: 0; font-size: 14px; line-height: 22px; color: var(--sl-ink-muted); }

/* Quà tặng: ảnh + tiêu đề */
.sl-home .sl-gift { min-height: 0; padding: 0; justify-content: flex-start; background: var(--sl-surface-0); border: 1px solid var(--sl-line); }
.sl-home .sl-gift img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .4s ease; }
.sl-home .sl-gift:hover img { transform: scale(1.03); }
.sl-home .sl-gift b { padding: 12px 12px 2px; font-size: 18px; }
.sl-home .sl-gift span { padding: 0 12px 12px; }
.sl-home .sl-gift:nth-child(n) { background: var(--sl-surface-0); }
.sl-home .sl-gift:nth-child(4) b { color: var(--sl-display); }
.sl-home .sl-gift:nth-child(4) span { color: var(--sl-ink-muted); }

/* Hàng mới về · Deal · Bán chạy */
.sl-home__trio { display: grid; gap: var(--sl-space-4); }
.sl-home__list { display: grid; gap: var(--sl-space-3); align-content: start; padding: var(--sl-space-4); background: var(--sl-surface-0); border: 1px solid var(--sl-line); border-radius: var(--sl-radius-md); }
.sl-home__list h3 { margin: 0; font: 600 20px/1.3 var(--sl-font-display); color: var(--sl-ink); }
.sl-mini { display: flex; gap: var(--sl-space-3); align-items: center; color: var(--sl-ink); }
.sl-mini__img { flex: none; width: 80px; height: 80px; border-radius: var(--sl-radius-sm); overflow: hidden; background: var(--sl-surface-200); }
.sl-mini__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-mini__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sl-mini__name { font-size: 14px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-mini:hover .sl-mini__name { color: var(--sl-accent); }
.sl-mini .sl-price s { display: inline; margin-left: 6px; }
.sl-home__deal { display: block; border-radius: var(--sl-radius-lg); overflow: hidden; }
.sl-home__deal img { width: 100%; display: block; }

/* Instagram */
.sl-home__igrow { display: grid; grid-auto-flow: column; grid-auto-columns: 40%; gap: var(--sl-space-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--sl-space-4)); padding: 0 var(--sl-space-4); }
.sl-home__igrow::-webkit-scrollbar { display: none; }
.sl-home__igrow span { aspect-ratio: 1 / 1; border-radius: var(--sl-radius-md); overflow: hidden; background: var(--sl-surface-200); }
.sl-home__igrow img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 900px) {
  .sl-home__banner { margin-top: var(--sl-space-6); }
  .sl-home__cats { justify-content: space-between; }
  .sl-home__cats .sl-cat { width: calc((100% - 5 * var(--sl-space-6)) / 6); }
  .sl-home__cats .sl-cat__img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .sl-prow { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; gap: var(--sl-space-6); overflow: visible; margin: 0; padding: 0; }
  .sl-home__title h2 { font-size: 30px; }
  .sl-home__title p { font-size: 15px; }
  .sl-home__trio { grid-template-columns: 1fr 1fr 1fr; gap: var(--sl-space-6); align-items: stretch; }
  .sl-home__deal img { height: 100%; object-fit: cover; }
  .sl-home__igrow { grid-auto-flow: row; grid-template-columns: repeat(7, 1fr); overflow: visible; margin: 0; padding: 0; gap: var(--sl-space-3); }
}

/* Tên sản phẩm trên card: in đậm */
.sl .sl-card__name, .sl .sl-mini__name { font-weight: 600; }

/* ============ Nút nổi: lên đầu trang (.tap-top) & tìm kiếm (.tap-search) ============ */
/* Xếp thành cột tròn ở góc phải: giỏ hàng (coral, chính) dưới cùng, tìm kiếm & lên đầu trang (trắng) phía trên */
.tap-top, .tap-search { width: 48px !important; height: 48px !important; right: 30px !important; padding: 0 !important; border-radius: 50% !important; background: var(--sl-surface-0) !important; background-image: none !important; color: var(--sl-ink) !important; border: 1px solid var(--sl-line) !important; box-shadow: 0 6px 18px rgba(46,33,29,.14); z-index: 1020 !important; transition: transform .15s, border-color .15s, color .15s; }
.tap-search { bottom: 104px !important; }
.tap-top, .tap-top.top-cls { bottom: 164px !important; }
.tap-top:hover, .tap-search:hover { transform: translateY(-2px); border-color: var(--sl-brand) !important; color: var(--sl-accent) !important; }
.tap-top > div, .tap-search > div { width: 100%; height: 100%; display: grid; place-items: center; cursor: pointer; }
.sl-tap__ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tap-top i, .tap-search i { font-size: 22px; line-height: 1; color: inherit; }
@media (max-width: 899px) {
  .tap-cart { right: 16px !important; bottom: 20px !important; width: 54px !important; height: 54px !important; }
  .tap-top, .tap-search { right: 19px !important; width: 46px !important; height: 46px !important; }
  .tap-search { bottom: 86px !important; }
  .tap-top, .tap-top.top-cls { bottom: 142px !important; }
  /* trang có thanh mua / đặt hàng cố định: ẩn các nút nổi để không che nút chính */
  .sl-pdp-page ~ .tap-top, .sl-pdp-page ~ .tap-search, .sl-co-page ~ .tap-top, .sl-co-page ~ .tap-search { display: none !important; }
}
/* Mobile: script.js chỉ hiện nút giỏ & tìm kiếm khi màn hình > 900px, nên trên mobile chỉ còn nút lên đầu trang -> đặt sát góc dưới */
@media (max-width: 899px) {
  .tap-top, .tap-top.top-cls { right: 16px !important; bottom: 20px !important; }
}
/* Đã bỏ nút tìm kiếm nổi -> nút lên đầu trang nằm ngay trên nút giỏ hàng (desktop) */
@media (min-width: 900px) { .tap-top, .tap-top.top-cls { bottom: 104px !important; } }

/* ===== Banner chính trên mobile: hiện từng nửa ảnh, tự trượt phải -> trái rồi quay lại ===== */
.sl-home__dots { display: none; }
@media (max-width: 899px) {
  .sl-home__banner--hero { position: relative; aspect-ratio: 2880 / 2079; }           /* khung = 1/2 ảnh gốc 5760x2079 */
  .sl-home__banner--hero img { width: 200%; max-width: none; height: 100%; object-fit: cover; animation: sl-hero-pan 9s cubic-bezier(.65,0,.35,1) infinite; }
  .sl-home__banner--hero:hover img { transform: none; }
  .sl-home__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
  .sl-home__dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.7); box-shadow: 0 0 0 1px rgba(46,33,29,.08); }
  .sl-home__dots i:first-child { animation: sl-hero-dot-a 9s cubic-bezier(.65,0,.35,1) infinite; }
  .sl-home__dots i:last-child  { animation: sl-hero-dot-b 9s cubic-bezier(.65,0,.35,1) infinite; }
}
/* 0–3.6s nửa trái · trượt 0.9s · 3.6s nửa phải · trượt về 0.9s */
@keyframes sl-hero-pan {
  0%, 40%   { transform: translateX(0); }
  50%, 90%  { transform: translateX(-50%); }
  100%      { transform: translateX(0); }
}
@keyframes sl-hero-dot-a { 0%, 40% { width: 20px; background: #fff; } 50%, 90% { width: 7px; background: rgba(255,255,255,.7); } 100% { width: 20px; background: #fff; } }
@keyframes sl-hero-dot-b { 0%, 40% { width: 7px; background: rgba(255,255,255,.7); } 50%, 90% { width: 20px; background: #fff; } 100% { width: 7px; background: rgba(255,255,255,.7); } }
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .sl-home__banner--hero { aspect-ratio: 5760 / 2079; }
  .sl-home__banner--hero img { width: 100%; animation: none; }
  .sl-home__dots { display: none; }
}

/* Bộ sưu tập trang chủ: lưới 2 cột (mobile) / 4 cột (desktop), 8 SP + nút Xem thêm */
.sl-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-home__more { display: flex; justify-content: center; margin-top: var(--sl-space-4); }
.sl-home__more .sl-btn { min-width: 220px; }
.sl-home__more .sl-ico { width: 18px; height: 18px; }
@media (min-width: 900px) {
  .sl-home__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sl-home__more { margin-top: var(--sl-space-6); }
}

/* ===== Banner phụ (Đại tiệc săn sale) trên mobile: cùng hiệu ứng nửa trái -> nửa phải như banner chính ===== */
@media (max-width: 899px) {
  .sl-home__banner--pan { position: relative; aspect-ratio: 2880 / 2079; }
  .sl-home__banner--pan img { width: 200%; max-width: none; height: 100%; object-fit: cover; animation: sl-hero-pan 9s cubic-bezier(.65,0,.35,1) infinite; }
  .sl-home__banner--pan:hover img { transform: none; }
  .sl-home__banner--pan .sl-home__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
  .sl-home__banner--pan .sl-home__dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.7); box-shadow: 0 0 0 1px rgba(46,33,29,.08); }
  .sl-home__banner--pan .sl-home__dots i:first-child { animation: sl-hero-dot-a 9s cubic-bezier(.65,0,.35,1) infinite; }
  .sl-home__banner--pan .sl-home__dots i:last-child  { animation: sl-hero-dot-b 9s cubic-bezier(.65,0,.35,1) infinite; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .sl-home__banner--pan { aspect-ratio: 5760 / 2079; }
  .sl-home__banner--pan img { width: 100%; animation: none; }
  .sl-home__banner--pan .sl-home__dots { display: none; }
}

/* ===== Giỏ hàng trên mobile: ngăn bên phải rộng 4/5 màn hình (vẫn thấy một phần trang phía sau) ===== */
@media (max-width: 767px) {
  .offcanvas.sl-cart {
    --bs-offcanvas-width: 80vw;
    width: 80vw !important; min-width: 300px; max-width: 440px;
    border-radius: 20px 0 0 20px; overflow: hidden;
    box-shadow: -10px 0 30px rgba(46,33,29,.2);
  }
  .sl-cart__head h3 { font-size: 20px; }
  .sl-cart__item { gap: 10px; padding: 10px; }
  .sl-cart__img { width: 64px; height: 64px; }
  .sl-cart__bottom { flex-wrap: wrap; row-gap: 6px; }
  .sl-cart__price { margin-left: auto; }
  .sl-cart__steps { font-size: 10px; }
  .sl-cart__total strong { font-size: 20px; }
}
/* Cam kết nằm dưới bộ sưu tập Bán chạy -> giãn cách như một section */
.sl-home .sl-home__trust { margin-top: var(--sl-space-8); }
@media (min-width: 900px) { .sl-home .sl-home__trust { margin-top: var(--sl-space-12); } }

/* Danh mục trang chủ: lưới 3 cột (mobile), hiện toàn bộ — không cuộn ngang */
.sl-home__catgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sl-space-4) var(--sl-space-3); }
.sl-home__catgrid .sl-cat { width: auto; color: var(--sl-ink); font-size: 13px; font-weight: 600; }
.sl-home__catgrid .sl-cat__img { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--sl-radius-md); overflow: hidden; padding: 0; margin-bottom: 6px; }
.sl-home__catgrid .sl-cat__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.sl-home__catgrid .sl-cat:hover .sl-cat__img img { transform: scale(1.04); }
@media (min-width: 900px) {
  .sl-home__catgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sl-space-6); }
  .sl-home__catgrid .sl-cat { font-size: 15px; }
  .sl-home__catgrid .sl-cat__img { border-radius: var(--sl-radius-lg); }
}

/* Danh mục trang chủ: 1 dòng, tự chạy quay vòng liền mạch (dừng khi rê chuột / chạm giữ) */
.sl-home__marquee { overflow: hidden; margin: 0 calc(-1 * var(--sl-space-4)); padding: 2px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.sl-home__mtrack { display: flex; width: max-content; animation: sl-cat-marquee 28s linear infinite; will-change: transform; }
.sl-home__marquee:hover .sl-home__mtrack, .sl-home__marquee:active .sl-home__mtrack { animation-play-state: paused; }
.sl-home__mtrack .sl-cat { flex: none; width: 104px; margin-right: var(--sl-space-3); color: var(--sl-ink); font-size: 13px; font-weight: 600; text-align: center; }
.sl-home__mtrack .sl-cat__img { width: 104px; height: 104px; border-radius: var(--sl-radius-md); overflow: hidden; padding: 0; margin-bottom: 6px; }
.sl-home__mtrack .sl-cat__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.sl-home__mtrack .sl-cat:hover .sl-cat__img img { transform: scale(1.05); }
@keyframes sl-cat-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 900px) {
  .sl-home__marquee { margin: 0; }
  .sl-home__mtrack { animation-duration: 40s; }
  .sl-home__mtrack .sl-cat { width: 180px; margin-right: var(--sl-space-6); font-size: 15px; }
  .sl-home__mtrack .sl-cat__img { width: 180px; height: 180px; border-radius: var(--sl-radius-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .sl-home__marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .sl-home__mtrack { animation: none; }
  .sl-home__mtrack .sl-cat[aria-hidden="true"] { display: none; }
}
/* danh sách lặp 3 lần -> mỗi vòng dịch 1/3 */
@keyframes sl-cat-marquee3 { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
.sl-home__mtrack { animation-name: sl-cat-marquee3; }

/* Tên sản phẩm trên card: chữ to hơn */
.sl .sl-card__name { font-size: 15px; line-height: 21px; min-height: 42px; }
@media (min-width: 900px) { .sl .sl-card__name { font-size: 16px; line-height: 23px; min-height: 46px; } }
/* Tên sản phẩm trên card: to thêm một nấc */
.sl .sl-card__name { font-size: 16px; line-height: 22px; min-height: 44px; }
@media (min-width: 900px) { .sl .sl-card__name { font-size: 18px; line-height: 25px; min-height: 50px; } }

/* ===== Nhãn giảm giá trên card: hình bông hoa / sao 10 cánh (giống ribbon-round giao diện cũ), xoay chậm ===== */
.sl .sl-card__badge:not(.sl-card__badge--new) {
  top: 8px; left: 8px; z-index: 1;
  display: grid; place-content: center; aspect-ratio: 1; width: 52px; height: 52px; padding: 0;
  background: none; border-radius: 0; color: #fff;
  font: 700 13px/1 var(--sl-font-sans); letter-spacing: -.2px; text-align: center;
}
.sl .sl-card__badge:not(.sl-card__badge--new)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sl-sale);
  clip-path: polygon(100% 50%, 88.04% 62.36%, 90.45% 79.39%, 73.51% 82.36%, 65.45% 97.55%, 50% 90%, 34.55% 97.55%, 26.49% 82.36%, 9.55% 79.39%, 11.96% 62.36%, 0% 50%, 11.96% 37.64%, 9.55% 20.61%, 26.49% 17.64%, 34.55% 2.45%, 50% 10%, 65.45% 2.45%, 73.51% 17.64%, 90.45% 20.61%, 88.04% 37.64%);
  animation: sl-badge-spin 20s linear infinite;
}
@keyframes sl-badge-spin { to { transform: rotate(360deg); } }
@media (min-width: 900px) {
  .sl .sl-card__badge:not(.sl-card__badge--new) { width: 60px; height: 60px; font-size: 15px; top: 10px; left: 10px; }
}
@media (prefers-reduced-motion: reduce) { .sl .sl-card__badge::after { animation: none; } }
/* Nhãn bông hoa: nhỏ lại một chút */
.sl .sl-card__badge:not(.sl-card__badge--new) { width: 44px; height: 44px; font-size: 11px; }
@media (min-width: 900px) { .sl .sl-card__badge:not(.sl-card__badge--new) { width: 50px; height: 50px; font-size: 13px; } }
/* Trang sản phẩm: tên sản phẩm to hơn một chút */
.sl-pdp-page .sl-pdp h1 { font-size: 29px; line-height: 1.25; }
@media (min-width: 900px) { .sl-pdp-page .sl-pdp h1 { font-size: 40px; line-height: 1.2; } }

/* Nút "Mua ngay" trên PC (cột thông tin trang sản phẩm): cùng hiệu ứng vệt sáng chéo + nhịp sáng viền như mobile */
.sl .sl-pdp__cta .sl-btn--primary { position: relative; overflow: hidden; isolation: isolate; color: var(--sl-on-brand); animation: sl-buy-pulse 3.2s ease-out infinite; }
.sl .sl-pdp__cta .sl-btn--primary::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -75%; width: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-22deg);
  animation: sl-buy-shine 3.2s ease-in-out infinite;
}
.sl .sl-pdp__cta .sl-btn--primary:hover { background: var(--sl-brand-hover); }
.sl .sl-pdp__cta .sl-btn--primary:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .sl .sl-pdp__cta .sl-btn--primary, .sl .sl-pdp__cta .sl-btn--primary::after { animation: none; }
}
/* Thanh mua mobile: "Mua ngay" dài hơn, "Thêm vào giỏ" gọn lại */
.sl .sl-buybar .sl-btn--outline { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 13px; }
.sl .sl-buybar .sl-btn--primary { flex: 1.9 1 0; min-width: 0; }
/* Tiêu đề "Đánh giá (N)" cùng kiểu chữ với "Mô tả sản phẩm" */
.sl-pdp-page #reviews .sl-section__head h2 { font: 600 17px/1.3 var(--sl-font-sans); color: var(--sl-ink); letter-spacing: 0; }
@media (min-width: 900px) { .sl-pdp-page #reviews .sl-section__head h2 { font-size: 17px; } }
/* Khối điểm đánh giá (4.9 ★★★★★): cùng font với "Mô tả sản phẩm" */
.sl-pdp-page .sl-reviews__score strong { font: 600 24px/1.2 var(--sl-font-sans); color: var(--sl-ink); }
.sl-pdp-page .sl-reviews__score .star { font-family: var(--sl-font-sans); font-size: 15px; letter-spacing: 1px; }
.sl-pdp-page .sl-reviews__score small { font-family: var(--sl-font-sans); font-size: 13px; }
/* PC: "Thêm vào giỏ" ngắn hơn, "Mua ngay" dài hơn (tỉ lệ giống thanh mua mobile) */
@media (min-width: 900px) {
  .sl-pdp-page .sl-pdp__cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); }
  .sl-pdp-page .sl-pdp__cta .sl-btn--outline { padding: 0 12px; font-size: 15px; }
}

/* ============ Popup khuyến mãi trang chủ (components/popup-start.html) ============ */
.sl-promo-modal .modal-dialog { max-width: 380px; margin-left: auto; margin-right: auto; padding: 0 20px; }
.modal-content.sl-promo { position: relative; overflow: hidden; border: 0; border-radius: 24px; padding: 32px 24px 22px; text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, var(--sl-brand-soft) 0%, var(--sl-surface-0) 62%); box-shadow: 0 24px 60px rgba(46,33,29,.28); }
.sl-promo__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 18px; background: rgba(255,255,255,.85); color: var(--sl-ink); display: grid; place-items: center; cursor: pointer; }
.sl-promo__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.sl-promo__close:hover { background: var(--sl-surface-0); }
.sl-promo__deco { position: relative; width: 112px; height: 112px; margin: 0 auto 14px; }
.sl-promo__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--sl-brand); opacity: .6; animation: sl-badge-spin 30s linear infinite reverse; }
.sl-promo__star { position: absolute; inset: 12px; display: grid; place-content: center; color: #fff; z-index: 0; }
.sl-promo__star::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sl-sale);
  clip-path: polygon(100% 50%, 88.04% 62.36%, 90.45% 79.39%, 73.51% 82.36%, 65.45% 97.55%, 50% 90%, 34.55% 97.55%, 26.49% 82.36%, 9.55% 79.39%, 11.96% 62.36%, 0% 50%, 11.96% 37.64%, 9.55% 20.61%, 26.49% 17.64%, 34.55% 2.45%, 50% 10%, 65.45% 2.45%, 73.51% 17.64%, 90.45% 20.61%, 88.04% 37.64%);
  animation: sl-badge-spin 20s linear infinite; }
.sl-promo__star b { font: 800 24px/1 var(--sl-font-sans); letter-spacing: -.5px; }
.sl-promo__eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sl-accent); }
.sl-promo__title { margin: 0 0 16px; font: italic 600 40px/1.1 var(--sl-font-display); color: var(--sl-display); text-transform: none; letter-spacing: 0; }
.sl-promo__offers { display: flex; align-items: stretch; justify-content: center; gap: 8px; margin-bottom: 18px; }
.sl-promo__offers span { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-radius: var(--sl-radius-md); background: var(--sl-surface-0); border: 1px solid var(--sl-line); font-size: 12px; line-height: 16px; color: var(--sl-ink-muted); }
.sl-promo__offers b { font-size: 16px; line-height: 22px; font-weight: 700; color: var(--sl-price); text-transform: uppercase; }
.sl-promo__offers i { align-self: center; font-style: normal; font-weight: 700; color: var(--sl-accent); }
.sl-promo__cta { color: var(--sl-on-brand); position: relative; overflow: hidden; isolation: isolate; animation: sl-buy-pulse 3.2s ease-out infinite; }
.sl-promo__cta::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -75%; width: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 100%); transform: skewX(-22deg); animation: sl-buy-shine 3.2s ease-in-out infinite; }
.sl-promo__cta:hover { background: var(--sl-brand-hover); color: var(--sl-on-brand); }
.sl-promo__later { margin-top: 6px; padding: 8px 16px; border: 0; background: none; font: 500 14px var(--sl-font-sans); color: var(--sl-ink-muted); cursor: pointer; }
.sl-promo__later:hover { color: var(--sl-ink); text-decoration: underline; }
.sl-promo__brand { margin: 6px 0 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sl-ink-muted); }
@media (prefers-reduced-motion: reduce) { .sl-promo__ring, .sl-promo__star::before, .sl-promo__cta, .sl-promo__cta::after { animation: none; } }

/* Mobile: thêm nút "Mua ngay" ngay dưới ô số lượng (ngoài nút ở thanh mua cố định) */
@media (max-width: 899px) {
  .sl-pdp-page .sl-pdp__cta { display: grid; grid-template-columns: 1fr; }
  .sl-pdp-page .sl-pdp__cta .sl-btn--outline { display: none; }   /* "Thêm vào giỏ" đã có ở thanh dưới cùng */
  .sl-pdp-page .sl-pdp__cta .sl-btn--primary { min-height: 54px; font-size: 17px; }
}

/* ============ Tìm kiếm sản phẩm (components/search.html) ============ */
.sl-search-modal .modal-dialog { max-width: 720px; margin: 0 auto; }
@media (max-width: 767px) { .sl-search-modal .modal-dialog { max-width: none; height: 100%; margin: 0; } }
.modal-content.sl-srch { border: 0; border-radius: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--sl-surface-100); }
@media (min-width: 768px) {
  .sl-search-modal .modal-dialog { margin-top: 72px; }
  .modal-content.sl-srch { height: auto; max-height: calc(100dvh - 120px); border-radius: 20px; box-shadow: 0 24px 60px rgba(46,33,29,.25); overflow: hidden; }
}
.sl-srch__head { flex: none; display: flex; align-items: center; gap: var(--sl-space-2); padding: 12px var(--sl-space-4); background: var(--sl-surface-0); border-bottom: 1px solid var(--sl-line); }
.sl-srch__box { flex: 1; display: flex; align-items: center; gap: 8px; height: 46px; margin: 0; padding: 0 8px 0 14px; border: 1.5px solid var(--sl-line); border-radius: var(--sl-radius-pill); background: var(--sl-surface-100); transition: border-color .15s, box-shadow .15s; }
.sl-srch__box:focus-within { border-color: var(--sl-brand); box-shadow: 0 0 0 3px var(--sl-brand-soft); background: var(--sl-surface-0); }
.sl-srch__box .sl-ico { width: 20px; height: 20px; color: var(--sl-ink-muted); }
.sl-srch__box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font: 400 16px var(--sl-font-sans); color: var(--sl-ink); -webkit-appearance: none; appearance: none; }
.sl-srch__box input::-webkit-search-cancel-button { display: none; }
.sl-srch__box input::placeholder { color: #b4a39c; }
.sl-srch__clear { flex: none; width: 30px; height: 30px; border: 0; border-radius: 15px; background: var(--sl-surface-200); color: var(--sl-ink-muted); display: grid; place-items: center; cursor: pointer; }
.sl-srch__clear svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.sl-srch__cancel { flex: none; border: 0; background: none; padding: 8px 4px; font: 600 15px var(--sl-font-sans); color: var(--sl-accent); cursor: pointer; }
.sl-srch__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--sl-space-4); }
.sl-srch__block + .sl-srch__block { margin-top: var(--sl-space-6); }
.sl-srch__label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--sl-ink); }
.sl-srch__label button { border: 0; background: none; padding: 0; font: 500 13px var(--sl-font-sans); color: var(--sl-ink-muted); cursor: pointer; }
.sl-srch__label button:hover { color: var(--sl-accent); }
.sl-srch__chips { display: flex; flex-wrap: wrap; gap: var(--sl-space-2); }
.sl-srch__chips .sl-chip { cursor: pointer; }
.sl-srch__chips .sl-chip:hover { border-color: var(--sl-brand); color: var(--sl-accent); }
.sl-srch__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sl-space-3); }
.sl-srch__card { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--sl-surface-0); border: 1px solid var(--sl-line); border-radius: var(--sl-radius-md); color: var(--sl-ink); }
.sl-srch__card:hover { box-shadow: var(--sl-shadow-card); }
.sl-srch__cimg { position: relative; aspect-ratio: 1; border-radius: var(--sl-radius-sm); overflow: hidden; background: var(--sl-surface-200); }
.sl-srch__cimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-srch__cimg i { position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--sl-sale); color: #fff; font: 700 11px/16px var(--sl-font-sans); font-style: normal; }
.sl-srch__cname { font-size: 13px; line-height: 18px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
.sl-srch__card .sl-price { font-size: 14px; }
.sl-srch__row { display: flex; align-items: center; gap: var(--sl-space-3); padding: 10px 0; border-bottom: 1px solid var(--sl-surface-200); color: var(--sl-ink); }
.sl-srch__row:hover .sl-srch__rname { color: var(--sl-accent); }
.sl-srch__rimg { flex: none; width: 60px; height: 60px; border-radius: var(--sl-radius-sm); overflow: hidden; background: var(--sl-surface-200); }
.sl-srch__rimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-srch__rinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sl-srch__rname { font-size: 15px; line-height: 21px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-srch__rname mark { padding: 0; background: var(--sl-brand-soft); color: var(--sl-ink); font-weight: 700; border-radius: 3px; }
.sl-srch__rinfo .sl-price { font-size: 14px; }
.sl-srch__rinfo .sl-price s { display: inline; margin-left: 6px; }
.sl-srch__off { flex: none; padding: 2px 8px; border-radius: 8px; background: var(--sl-sale); color: #fff; font: 700 12px/18px var(--sl-font-sans); }
.sl-srch__loading { display: flex; align-items: center; gap: 10px; padding: var(--sl-space-6) 0; color: var(--sl-ink-muted); font-size: 14px; }
.sl-srch__loading .sl-spin { border-color: var(--sl-line); border-top-color: var(--sl-brand); }
.sl-srch__empty { padding: var(--sl-space-6) 0; text-align: center; }
.sl-srch__empty b { display: block; font-size: 16px; color: var(--sl-ink); }
.sl-srch__empty p { margin: 6px 0 14px; font-size: 14px; color: var(--sl-ink-muted); }
.sl-srch__empty .sl-srch__chips { justify-content: center; }
.sl-srch__all { margin-top: var(--sl-space-4); }
@media (min-width: 768px) {
  .sl-srch__head { padding: 16px var(--sl-space-6); }
  .sl-srch__body { padding: var(--sl-space-6); }
  .sl-srch__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sl-srch__box { min-width: 0; }

/* ============ Tra cứu đơn hàng / Đặt hàng thành công (order-tracking.html) ============ */
.sl-trk-page { padding-bottom: var(--sl-space-8); }
.sl-trk__title { margin: var(--sl-space-4) 0 var(--sl-space-3); font: 600 26px/1.25 var(--sl-font-display); color: var(--sl-ink); }
.sl .sl-trk__hero { display: grid; justify-items: center; gap: 8px; padding: var(--sl-space-6) 0 var(--sl-space-4); text-align: center; }
.sl-trk__hero h1 { margin: 6px 0 0; font: 600 26px/1.25 var(--sl-font-display); color: var(--sl-display); }
.sl-trk__hero p { max-width: 520px; margin: 0; font-size: 15px; line-height: 1.55; color: var(--sl-ink-muted); }
.sl-trk__hero p b { color: var(--sl-ink); font-weight: 600; }
.sl-trk__check { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--sl-brand-soft); animation: sl-trk-pop .45s cubic-bezier(.2,1.4,.5,1) both; }
.sl-trk__check svg { width: 52px; height: 52px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sl-trk__check circle { fill: var(--sl-brand); stroke: none; }
.sl-trk__check path { stroke: #fff; stroke-width: 4; stroke-dasharray: 40; stroke-dashoffset: 40; animation: sl-trk-draw .45s .3s ease-out forwards; }
@keyframes sl-trk-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes sl-trk-draw { to { stroke-dashoffset: 0; } }

.sl-trk__search { margin: 0 0 var(--sl-space-4); }
.sl-trk__box { display: flex; gap: var(--sl-space-2); }
.sl-trk__box input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .06em; }
.sl-trk__box input::placeholder { text-transform: none; letter-spacing: 0; }
.sl-trk__box .sl-btn { flex: none; min-height: 48px; min-width: 104px; color: var(--sl-on-brand); }
.sl-trk__hint { margin: 6px 2px 0; font-size: 13px; color: var(--sl-ink-muted); }
.sl-trk__search .sl-input.err input { border-color: var(--sl-price); }

.sl-trk__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sl-space-3); align-items: start; }
.sl-trk__main, .sl-trk__side { display: grid; gap: var(--sl-space-3); min-width: 0; }
.sl-trk__code { display: flex; align-items: center; justify-content: space-between; gap: var(--sl-space-3); }
.sl-trk__code small { display: block; font-size: 12px; color: var(--sl-ink-muted); }
.sl-trk__code b { font: 700 22px/1.2 var(--sl-font-sans); letter-spacing: .08em; color: var(--sl-price); }
.sl-trk__date { margin: -4px 0 0; font-size: 13px; color: var(--sl-ink-muted); }

.sl-trk__badge { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin: 0; padding: 6px 14px 6px 6px; border-radius: var(--sl-radius-pill); background: var(--sl-brand-soft); font-size: 14px; font-weight: 600; color: var(--sl-accent); }
.sl-trk__badge i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sl-brand); }
.sl-trk__badge svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sl-trk__gift { display: grid; place-items: center; width: 100%; height: 100%; color: var(--sl-accent); }
.sl-trk__gift .sl-ico { width: 26px; height: 26px; }
.sl-trk__info { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px 12px; font-size: 14px; line-height: 1.45; }
.sl-trk__info dt { font-weight: 400; color: var(--sl-ink-muted); }
.sl-trk__info dd { margin: 0; color: var(--sl-ink); word-break: break-word; }
.sl-trk__side .sl-cart__total { margin: 0; }
.sl-trk__cod { margin: 0; font-size: 13px; color: var(--sl-ink-muted); text-align: center; }
.sl-trk__help { display: grid; gap: var(--sl-space-2); padding: var(--sl-space-4); border-radius: var(--sl-radius-md); background: var(--sl-surface-200); }
.sl-trk__help b { font-size: 15px; color: var(--sl-ink); }
.sl-trk__help .sl-btn--primary { color: var(--sl-on-brand); }
.sl-trk__more { margin-top: 4px; text-align: center; font-size: 14px; font-weight: 600; color: var(--sl-accent); }
.sl-trk__empty { padding: 40px 0; }

@media (min-width: 900px) {
  .sl-trk-page { padding-bottom: var(--sl-space-12); }
  .sl-trk__title { font-size: 34px; margin: var(--sl-space-4) 0 var(--sl-space-6); }
  .sl .sl-trk__hero { padding: var(--sl-space-8) 0 var(--sl-space-6); }
  .sl-trk__hero h1 { font-size: 34px; }
  .sl-trk__hero p { font-size: 16px; }
  .sl-trk__search { max-width: 560px; margin: 0 auto var(--sl-space-6); }
  .sl-trk__title + .sl-trk__search { margin-left: 0; }
  .sl-trk__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sl-space-8); }
  .sl-trk__main, .sl-trk__side { gap: var(--sl-space-4); }
  .sl-trk__side { position: sticky; top: 96px; }
  .sl-trk__info { grid-template-columns: 120px minmax(0, 1fr); font-size: 15px; }
}