/*
 * Trang khách Shop Local (kế hoạch 04, Task 5). Màu theo spec mục 11.1, không màu kem.
 * Phần 1 là CSS .sl… của ba mockup chủ dự án duyệt ngày 20/10/2026 (spec mục 19.D: trang sản phẩm bản B, trang đầu bản A, trang
 * shop), giữ nguyên chữ, màu, cỡ, trừ hai chỗ sửa theo rà kế hoạch 04 (ghi tại chỗ); chỗ ba mockup khác nhau thì ghi
 * rõ trang nào. Phần 2 là phần mockup chưa có: trang danh mục, tìm, phân trang, riêng tư, "Hiện không hiển thị", bản xem trước,
 * máy tính (từ 900 px, 1200 px), và các luật thêm theo rà kế hoạch 04.
 */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
/* Nền bê tông cố định như trang chủ; #858585 khi ảnh chưa tải. */
body { min-height: 100vh; background: #858585; color: #1a1512; font-family: Inter, system-ui, sans-serif; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: #858585 url('/backgroundweb-small.webp') center / cover no-repeat; }

/* ---------- 1. Mockup đã duyệt ---------- */
.sl { --ink: #1a1512; --ink-mute: #5f5f5c; --c50: #f4f4f3; --c100: #ebebea; --c200: #d8d8d5; --line: rgba(26,21,18,.15);
  --rust: #b8442d; --shadow-soft: rgba(26,21,18,.06); position: relative; min-height: 100%; color: var(--ink); line-height: 1.5; font-family: Inter, sans-serif;
  max-width: 480px; margin: 0 auto; }
.sl a { color: inherit; }
.sl :focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.sl-wrap { padding: 10px 16px 24px; }

.sl-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.sl-over { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; pointer-events: none; z-index: 2; }
.sl-over > * { pointer-events: auto; }
.sl-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: #fff; border: 1px solid var(--ink); border-radius: 999px;
  font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.sl-pill.back::before { content: '←'; font-size: 14px; letter-spacing: 0; }
.sl-seg { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; background: #fff; }
/* Mockup 42 px; vùng bấm 44 px (spec mục 11.2; rà kế hoạch 04, CL-14). */
.sl-seg button { min-width: 44px; min-height: 44px; border: 0; background: #fff; color: var(--ink); font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing: .12em; }
.sl-seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
/* Bóng chỉ khi nổi trên ảnh (trang sản phẩm, trang shop có ảnh bìa); trang đầu không có. */
.sl-over .sl-pill, .sl-over .sl-seg { box-shadow: 0 2px 8px rgba(26,21,18,.18); }

/* Trang đầu */
.sl-head { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px 20px; box-shadow: 0 2px 6px var(--shadow-soft); }
.sl-tag { font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .28em; text-transform: uppercase; color: var(--rust); margin-bottom: 12px; }
.sl-title { font: 800 44px/.95 Fraunces, serif; letter-spacing: -.03em; }
.sl-title em { font-style: italic; font-weight: 400; color: var(--rust); }
.sl-intro { margin-top: 12px; font-size: 15px; color: #3a3a38; }
.sl-chips { display: flex; gap: 8px; overflow-x: auto; margin: 12px -16px 0; padding: 0 16px 2px; scrollbar-width: none; }
.sl-chips::-webkit-scrollbar { display: none; }
.sl-chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--ink);
  font: 600 13px Inter, sans-serif; text-decoration: none; white-space: nowrap; }
.sl-chip[aria-current="page"] { background: var(--ink); color: #fff !important; }
.sl-search { display: flex; margin-top: 10px; background: #fff; border: 1px solid var(--ink); border-radius: 12px; overflow: hidden; }
.sl-search input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 0; background: #fff; color: var(--ink); font: 400 16px Inter, sans-serif; }
.sl-search input::placeholder { color: var(--ink-mute); }
.sl-search button { flex: 0 0 52px; border: 0; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* Trang sản phẩm */
.sl-gallery { position: relative; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.sl-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sl-track::-webkit-scrollbar { display: none; }
.sl-track img { flex: 0 0 100%; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; scroll-snap-align: start; display: block; }
.sl-count { position: absolute; right: 10px; bottom: 10px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 4px 10px;
  font: 700 11px 'JetBrains Mono', monospace; }
/* Thẻ trắng: trang sản phẩm 12/14/14 px; trang shop 14/16/16 px (ở dưới). */
.sl-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px 14px; margin-top: 10px;
  box-shadow: 0 2px 6px var(--shadow-soft); text-decoration: none; }
.sl-name { font: 600 22px/1.15 Fraunces, serif; letter-spacing: -.01em; }
.sl-buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.sl-price { font-weight: 800; font-size: 27px; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; }
.sl-code { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--c100);
  color: var(--ink); cursor: pointer; font: 700 14px 'JetBrains Mono', monospace; white-space: nowrap; }
.sl-code svg { flex: 0 0 auto; }
.sl-variants { margin-top: 6px; color: var(--ink-mute); font-size: 14px; }
.sl-btn { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  font: 700 11px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.sl-btn-main { background: var(--ink); color: #fff !important; font-size: 12px; border: 1px solid var(--ink); }
.sl-btn-line { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.sl-btn-sm { min-height: 44px; font-size: 10px; }
/* Câu chép sẵn: trang sản phẩm cách 12 px; trang shop 4 px (ở dưới). */
.sl-msg { margin-top: 12px; background: var(--c50); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.sl-msg b { display: block; margin-bottom: 4px; font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.sl-facts { margin-top: 10px; font-size: 12px; color: var(--ink-mute); }
.sl-facts a { text-decoration: underline; text-underline-offset: 2px; }

/* Dòng shop (trang đầu) và thẻ shop thu gọn (trang sản phẩm: thêm .sl-card) */
.sl-shops { display: flex; flex-direction: column; gap: 10px; }
.sl-shop { display: flex; gap: 12px; align-items: center; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 2px 6px var(--shadow-soft); text-decoration: none; }
.sl-mono { flex: 0 0 52px; height: 52px; border-radius: 12px; background: var(--c100); display: flex; align-items: center; justify-content: center;
  font: 800 22px Fraunces, serif; }
.sl-shop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sl-shop-name { font-weight: 700; font-size: 16px; }
.sl-meta { font-size: 13px; color: var(--ink-mute); }
.sl-open::before, .sl-closed::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; box-sizing: border-box; }
.sl-open { color: var(--ink); font-weight: 600; }
.sl-open::before { background: var(--ink); }
.sl-closed::before { border: 1.5px solid var(--ink-mute); }
.sl-arrow { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--c100); border: 1px solid rgba(184,68,45,.2);
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--rust); }
.sl-h2 { font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.sl-card p { font-size: 15px; }

/* Danh sách sản phẩm: lưới 2 cột, hàng vuốt ngang */
.sl-sec { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .26em; text-transform: uppercase; }
.sl-sec::before { content: ''; width: 24px; height: 1px; background: var(--ink); }
/* Mockup chữ mờ: trên nền bê tông chỉ đạt 1,74:1; chữ đậm màu, nét thường để vẫn nhạt hơn tiêu đề (rà kế hoạch 04, CL-7). */
.sl-sec small { font: inherit; color: var(--ink); font-weight: 400; }
.sl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sl-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; }
.sl-row::-webkit-scrollbar { display: none; }
.sl-row .sl-pcard { flex: 0 0 44%; scroll-snap-align: start; }
.sl-pcard { position: relative; display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; }
.sl-pcard img, .sl-ph { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.sl-ph { background: var(--c100); display: flex; align-items: center; justify-content: center; font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .14em; color: var(--ink-mute); }
.sl-pcard > div { padding: 8px 10px 10px; }
.sl-pname { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-pprice { font-weight: 800; font-size: 14px; margin-top: 2px; }
.sl-pmeta { font-size: 12px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-sold { position: absolute; top: 8px; left: 8px; padding: 5px 9px; border-radius: 999px; background: var(--ink); color: #fff;
  font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.sl-pcard.is-sold img { opacity: .55; }

/* Trang shop */
.sl-p-shop .sl-card { padding: 14px 16px 16px; }
.sl-shophead { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 6px var(--shadow-soft); }
.sl-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.sl-sh-body { padding: 0 16px 16px; }
.sl-logo { position: relative; width: 72px; height: 72px; margin-top: -36px; border-radius: 16px; border: 3px solid #fff; background: var(--c100);
  box-shadow: 0 2px 8px rgba(26,21,18,.15); display: flex; align-items: center; justify-content: center;
  font: 700 9px 'JetBrains Mono', monospace; letter-spacing: .12em; color: var(--ink-mute); }
.sl-sh-name { font: 600 26px/1.1 Fraunces, serif; letter-spacing: -.01em; margin-top: 10px; }
.sl-sh-tag { margin-top: 4px; font-size: 14px; color: #3a3a38; }
.sl-sh-cats { margin-top: 8px; font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); }
.sl-sh-flat { display: flex; gap: 14px; align-items: center; padding: 16px; }
.sl-sh-flat .sl-sh-name { margin-top: 0; }
/* Ô chữ cái đầu ở đầu trang shop không có ảnh bìa: 64 px (dòng shop của trang đầu 52 px). */
.sl-sh-flat .sl-mono { flex: 0 0 64px; height: 64px; border-radius: 16px; font: 800 28px Fraunces, serif; }
.sl-irow { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.sl-irow:first-child { border-top: 0; padding-top: 0; }
.sl-ilabel { grid-column: 1 / -1; font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); }
.sl-ival { font-size: 15px; }
.sl-hours { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin-top: 4px; font-size: 14px; }
.sl-hours .is-today { font-weight: 700; }
.sl-p-shop .sl-msg { margin-top: 4px; }
.sl-more { min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .18em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }

.sl-foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center;
  font: 700 9px/1.9 'JetBrains Mono', monospace; letter-spacing: .2em; text-transform: uppercase; }
.sl-foot em { font: italic 400 11px Fraunces, serif; letter-spacing: 0; text-transform: none; }
.sl-foot a { display: inline-block; margin-top: 6px; min-height: 44px; line-height: 44px; font-size: 10px; }

/* Thanh nút nhắn dính đáy (trang sản phẩm bản B, trang shop) */
.sl-bar { z-index: 5; display: grid; grid-template-columns: 1fr; grid-auto-flow: column; grid-auto-columns: auto; gap: 8px; padding: 10px 16px;
  background: rgba(255,255,255,.96); border-top: 1px solid var(--line); }
.sl-toast { position: absolute; left: 16px; right: 16px; bottom: calc(100% + 8px); padding: 10px 12px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 13px; }

/* ---------- 2. Phần mockup chưa có ---------- */
/* Chữ dài không có dấu cách (link, mã, tên viết liền) xuống dòng được, không làm trang tràn ngang (rà kế hoạch 04, CL-5). */
.sl { overflow-wrap: anywhere; }
/*
 * Giá dài ("from 1,255,500 VND", "150,500 VND–250,500 VND", "Ask the shop") và ô mã không vừa một hàng ở 320–430 px: giá xuống dòng
 * (luật trên không có tác dụng với chữ nowrap), ô mã xuống hàng dưới; giá ngắn ("250k") vẫn chung hàng với ô mã như mockup (rà khi
 * thi công kế hoạch 04, Task 5).
 */
.sl-buy { flex-wrap: wrap; }
.sl-price { white-space: normal; }
/*
 * Thanh nút: mockup dùng sticky ở cuối trang. Trang thật đặt thanh ngay sau khối giá (để từ 900 px nó vào khối dính bên phải),
 * nên dưới 900 px thanh cố định ở đáy màn hình, trong cột 480 px; cuối trang chừa chỗ để thanh không che chân trang.
 */
.sl-bar { position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; }
.sl-has-bar .sl-wrap { padding-bottom: 100px; }
/* Đủ ba kênh trên màn 320–400 px: nút cuối cách mép từ 16 px, cả tiếng Việt và tiếng Anh (rà kế hoạch 04, CL-6). */
@media (max-width: 400px) { .sl-bar .sl-btn { padding: 0 8px; letter-spacing: .06em; } }
.sl-toast[hidden], .sl-more[hidden] { display: none; }
/* Giờ: không tách "09:00–" khỏi "21:00"; nhãn "Đang mở · đến …" do JavaScript điền, dòng shop có dấu cách sau nhãn. */
.sl-nw { white-space: nowrap; }
.sl-now-line:not(:empty)::after { content: ' · '; }
/* "Đã đóng cửa": chấm rỗng và chữ mờ (spec mục 11.1), cả ở trang shop, nơi nhãn nằm trong .sl-ival chữ đậm màu (rà khi thi công kế hoạch 04, Task 5). */
.sl-closed { color: var(--ink-mute); }
/*
 * Logo thật thay ô chữ cái đầu. File hỏng (không tải được) thì Chrome lấy 800 px của thuộc tính width làm cỡ tối thiểu của flex
 * item: dòng shop làm trang rộng 881 px, đầu trang shop đẩy tên shop khuất. min-width: 0 giữ đúng flex-basis 52 px (64 px ở đầu
 * trang shop) (rà khi thi công kế hoạch 04).
 */
img.sl-mono { object-fit: cover; min-width: 0; }
.sl-logo { overflow: hidden; }
.sl-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sl-logo span { font: 800 28px Fraunces, serif; color: var(--ink); letter-spacing: 0; }
/* Sản phẩm đã hết, ở trang sản phẩm. */
.sl-badge { display: inline-block; margin-bottom: 8px; padding: 5px 9px; border-radius: 999px; background: var(--ink); color: #fff;
  font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.sl-gallery .sl-ph { width: 100%; }
/*
 * Mô tả, giới thiệu: nhiều đoạn. Giới thiệu thu 3 dòng, có nút "Xem thêm", khi trình duyệt chạy JavaScript (scripting: enabled,
 * có hiệu lực ngay lần vẽ đầu, không xô trang); không có JavaScript thì hiện đủ, không có nút.
 */
.sl-card p + p { margin-top: 8px; }
.sl-about-text { font-size: 15px; }
.sl-more { display: none; }
@media (scripting: enabled) {
  .sl-about:not(.is-open) .sl-about-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .sl-more { display: inline-block; }
  /* Dòng "Đang mở · đến …" của trang shop do JavaScript điền: giữ chỗ trước để bảng giờ không bị đẩy xuống. */
  .sl-ival > .sl-now { display: block; min-height: 1.5em; }
}
/*
 * Chỉ cho trình đọc màn hình: ô role="status" ngay sau ô mã, JavaScript điền "Đã sao chép" khi bấm. Nút có aria-label nên chữ đổi
 * trong nút không được đọc (rà khi thi công kế hoạch 04, Task 6).
 */
.sl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/*
 * Ô mã, nút nhắn ở bản xem trước là <span> không bấm được (kế hoạch 04, Task 7): không hiện con trỏ bàn tay; nút nhắn của trang
 * khách là <a>, giữ con trỏ đó (rà lại khi thi công kế hoạch 04).
 */
span.sl-code, span.sl-btn { cursor: default; }
/*
 * Nút chỉ chạy bằng JavaScript (VI | EN, chép mã): ẩn khi tắt JavaScript; bản xem trước không có hai nút này (rà kế hoạch 04, CL-19).
 * Mã sản phẩm vẫn hiện dạng chữ: ô mã không bấm được (span.sl-code) trong <noscript> ngay trước nút (rà kế hoạch 04, Task 7;
 * kế hoạch 05, Task 8).
 */
@media (scripting: none) { .sl-lang, button.sl-code { display: none; } }
/* Danh mục: Mới nhất / Gần nhất; trang trống; phân trang. */
.sl-sort { margin: 10px 0; }
.sl-seg a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; text-decoration: none; font: 700 10px/1 'JetBrains Mono', monospace;
  letter-spacing: .12em; text-transform: uppercase; }
.sl-seg a[aria-current="page"] { background: var(--ink); color: #fff; }
.sl-empty { margin-top: 10px; padding: 18px 16px; text-align: center; color: var(--ink-mute); font-size: 15px; }
.sl-pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 16px;
  font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .18em; text-transform: uppercase; }
/* Trang riêng tư, "Hiện không hiển thị". */
.sl-prose .sl-h2 { margin-top: 18px; }
.sl-prose .sl-h2:first-child { margin-top: 0; }
.sl-prose a { text-decoration: underline; text-underline-offset: 2px; }
/*
 * Email, điện thoại: mỗi cái một dòng riêng, cả dòng là vùng bấm 44 px (rà kế hoạch 04, CL-14). Không gọi .sl-contact: mockup
 * dùng tên đó cho lưới hai nút nhắn (rà kế hoạch 04, CL-22).
 */
.sl-reach { display: block; min-height: 44px; padding: 10px 0; font-size: 15px; }
/*
 * Link danh mục ở trang sản phẩm (chữ 12 px, dòng 18 px): vùng bấm cao 44 px mà không đổi bố cục, đệm 13 px trên dưới, lề âm bằng
 * đó; position: relative để dòng sau (dòng này xuống hai dòng ở 320 px) không đè lên phần đệm dưới (spec mục 11.2, 19.D; rà khi thi
 * công kế hoạch 04, Task 5).
 */
.sl-facts a { position: relative; display: inline-block; padding: 13px 0; margin: -13px 0; }
.sl-head .sl-btn { margin-top: 16px; }
/* Bản xem trước trong quản trị (kế hoạch 04, Task 7). */
.sl-preview { margin-bottom: 10px; padding: 10px 14px; border-radius: 12px; background: var(--ink); color: #fff;
  font: 700 10px/1.5 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; }
/* Dòng nhắc bản sửa đang mở (kế hoạch 05, Task 7) là một câu dài, không phải nhãn (kế hoạch 05, Task 12: dòng nhắc bản sửa ở bản xem trước thành chữ thường 14 px như câu chép sẵn). */
.sl-preview-note { font: 400 14px/1.45 Inter, sans-serif; letter-spacing: 0; text-transform: none; }
/* Quantri không có ảnh nền của beton.coffee (404): bản xem trước dùng nền phẳng #858585 (rà kế hoạch 04, CL-19). */
body.is-preview::before { background-image: none; }

/* Máy tính (spec mục 6.1): trang đầu, riêng tư giữ 480 px; trang khác rộng tối đa 1040 px, lưới 3 cột, từ 1200 px 4 cột. */
@media (min-width: 900px) {
  .sl-wide { max-width: 1040px; }
  /* "Cùng shop", "Cùng danh mục" cũng thành lưới: hàng cuộn ngang, thanh cuộn ẩn chỉ cho thấy 3 trong 8 thẻ (rà khi thi công kế hoạch 04, Task 5). */
  .sl-wide .sl-grid, .sl-wide .sl-row { display: grid; grid-template-columns: repeat(3, 1fr); }
  /* Trang sản phẩm, trang shop: ảnh (ảnh bìa) bên trái; khối giá, mã, nút nhắn dính bên phải khi cuộn. */
  .sl-pgrid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); grid-template-rows: auto auto 1fr; column-gap: 24px; align-items: start; }
  .sl-pgrid > * { grid-column: 1; }
  .sl-pgrid > .sl-side { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 10px; }
  .sl-side > .sl-card:first-child { margin-top: 0; }
  .sl-bar { position: relative; max-width: none; margin: 10px 0 0; padding: 0; background: none; border: 0; }
  .sl-has-bar .sl-wrap { padding-bottom: 24px; }
  /* Ảnh sản phẩm xếp dọc: ảnh đầu cả cột, các ảnh sau hai cột (không có thanh vuốt trên máy tính). */
  .sl-track { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; overflow: visible; }
  .sl-track img:first-child, .sl-track .sl-ph { grid-column: 1 / -1; }
  .sl-count { display: none; }
}
@media (min-width: 1200px) {
  .sl-wide .sl-grid, .sl-wide .sl-row { grid-template-columns: repeat(4, 1fr); }
}