/*
 * Landing "Săn SALE cuối năm 2026" (templates/page.sale-cuoi-nam.bwt). Mockup v2 bộ Xanh duyệt 06/11.
 * Màu riêng: thang --sale-* trong tokens.css. Giá, nút Mua giữ đỏ thương hiệu.
 * Mobile trước; máy tính từ 64em. Thẻ sản phẩm là .pcard (product-card.css), thêm class .sl-card--*.
 */

.tpl-page-sale-cuoi-nam { background: var(--sale-50); }
.sl-page { --card-bg: var(--color-surface); padding-bottom: var(--space-7); }
.sl-wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-gutter); }
.sl-page .icon { width: 24px; height: 24px; flex: none; }

/* ---------- Đầu trang đổi màu xanh (chỉ trang này) ---------- */
.tpl-page-sale-cuoi-nam .hdr { background: var(--sale-700); border-bottom-color: var(--sale-900); color: var(--color-on-action); }
.tpl-page-sale-cuoi-nam .hdr-strip { background: var(--sale-950); }
.tpl-page-sale-cuoi-nam .hdr-strip strong { color: var(--sale-accent); }
.tpl-page-sale-cuoi-nam .hdr-menu,
.tpl-page-sale-cuoi-nam .hdr-phone,
.tpl-page-sale-cuoi-nam .hdr-acct,
.tpl-page-sale-cuoi-nam .hdr-cart,
.tpl-page-sale-cuoi-nam .hdr.is-compact .hdr-menu,
.tpl-page-sale-cuoi-nam .hdr.is-compact .hdr-cart { color: var(--color-on-action); }
.tpl-page-sale-cuoi-nam .hdr-phone:hover,
.tpl-page-sale-cuoi-nam .hdr-acct:hover,
.tpl-page-sale-cuoi-nam .hdr-cart:hover { color: var(--sale-accent); }
.tpl-page-sale-cuoi-nam .hdr-logo { background: var(--color-surface); border-radius: var(--radius-md); padding: 4px 8px; justify-self: start; }
.tpl-page-sale-cuoi-nam .hdr-cart-count { background: var(--sale-accent); color: var(--gray-900); }
.tpl-page-sale-cuoi-nam .hdr-search { border-color: var(--sale-accent); border-width: 2px; }
.tpl-page-sale-cuoi-nam .hdr-pill { background: rgb(255 255 255 / 0.14); border-color: transparent; color: var(--color-on-action); }
.tpl-page-sale-cuoi-nam .hdr-pill.is-hot { background: var(--sale-accent); color: var(--gray-900); }
@media (min-width: 64em) {
  .tpl-page-sale-cuoi-nam .hdr-util a { color: inherit; }
  .tpl-page-sale-cuoi-nam .hdr-acct,
  .tpl-page-sale-cuoi-nam .hdr-cta,
  .tpl-page-sale-cuoi-nam .hdr-phone .hdr-two { color: var(--color-on-action); }
  .tpl-page-sale-cuoi-nam .hdr-cta:hover { color: var(--sale-accent); }
  .tpl-page-sale-cuoi-nam .hdr-cta.is-hot .icon { color: var(--sale-accent); }
  .tpl-page-sale-cuoi-nam .hdr-search-btn { background: var(--sale-accent); color: var(--gray-900); }
  .tpl-page-sale-cuoi-nam .hdr-search-btn:hover { background: var(--amber-300); }
  .tpl-page-sale-cuoi-nam .hdr-two,
  .tpl-page-sale-cuoi-nam .hdr-phone .hdr-two { color: inherit; }
  .tpl-page-sale-cuoi-nam .hdr-cart { background: rgb(255 255 255 / 0.14); color: var(--color-on-action); }
  .tpl-page-sale-cuoi-nam .hdr-cart:hover { background: rgb(255 255 255 / 0.22); color: var(--color-on-action); }
  .tpl-page-sale-cuoi-nam .hdr-cta.is-hot .icon:first-child + span::before { background: var(--sale-accent); box-shadow: 0 0 0 2px var(--sale-700); }
  .tpl-page-sale-cuoi-nam .hdr-cats { background: var(--sale-900); border-top-color: var(--sale-900); }
  .tpl-page-sale-cuoi-nam .hdr-cats-list { background: var(--sale-900); }
  .tpl-page-sale-cuoi-nam .hdr-cats-track::before { background: linear-gradient(to right, var(--sale-900), transparent); }
  .tpl-page-sale-cuoi-nam .hdr-cats-track::after { background: linear-gradient(to left, var(--sale-900), transparent); }
  .tpl-page-sale-cuoi-nam .hdr-cat { color: var(--color-on-action); }
  .tpl-page-sale-cuoi-nam .hdr .hdr-cat .icon { color: var(--sale-200); }
  .tpl-page-sale-cuoi-nam .hdr-cat:hover { color: var(--sale-accent); }
  .tpl-page-sale-cuoi-nam .hdr-cat.is-active { background: rgb(255 255 255 / 0.12); color: var(--color-on-action); box-shadow: inset 0 -2px 0 var(--sale-accent); }
  .tpl-page-sale-cuoi-nam .hdr-cats-nav { background: var(--sale-900); color: var(--color-on-action); border-color: rgb(255 255 255 / 0.3); }
  .tpl-page-sale-cuoi-nam .hdr-bar-cta { background: rgb(255 255 255 / 0.12); color: var(--color-on-action); }
  .tpl-page-sale-cuoi-nam .hdr-bar-cta.is-hot { background: var(--sale-accent); color: var(--gray-900); }
  .tpl-page-sale-cuoi-nam .hdr-bar-cta:hover { background: rgb(255 255 255 / 0.2); color: var(--color-on-action); }
  .tpl-page-sale-cuoi-nam .hdr-bar-cta.is-hot:hover { background: var(--amber-300); color: var(--gray-900); }
}

/* ---------- Chữ dùng chung ---------- */
.sl-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: .06em; text-transform: uppercase; color: var(--sale-700); }
.sl-kicker::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--sale-accent); }
.sl-ttl { margin: 4px 0 0; font-size: var(--text-2xl); line-height: 1.2; font-weight: var(--weight-strong); color: var(--sale-900); }
.sl-ttl u { text-decoration: none; background: linear-gradient(transparent 62%, var(--sale-accent) 62%); }
.sl-sub { margin: 4px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.sl-when { display: inline-block; margin-top: 6px; font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--sale-700); }
.sl-when.is-urgent { color: var(--red-700); }
.sl-all { font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--sale-700); text-decoration: none; white-space: nowrap; }
.sl-all:hover { color: var(--sale-900); text-decoration: underline; }
.sl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); }
.sl-sec { margin-top: var(--space-6); scroll-margin-top: 120px; }
.sl-sec[hidden] { display: none; }
.sl-empty { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Banner + đếm ngược ---------- */
.sl-hero { position: relative; overflow: hidden; color: var(--color-on-action); background: linear-gradient(160deg, var(--sale-600), var(--sale-900) 70%); }
.sl-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .18), transparent 70%); pointer-events: none; }
.sl-hero-in { position: relative; z-index: 1; padding-top: var(--space-3); padding-bottom: var(--space-7); display: grid; gap: var(--space-4); }
.sl-banner { position: relative; border-radius: var(--radius-md); overflow: hidden; }
.sl-banner img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
/* Có ảnh: chữ banner chỉ cho trình đọc màn hình; chưa có ảnh (ảnh lỗi): hiện banner chữ */
.sl-banner:not(.no-img) .sl-banner-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sl-banner.no-img picture { display: none; }
.sl-banner.no-img { padding: var(--space-5) var(--space-4); min-height: 220px; display: flex; align-items: flex-end; border: 1px solid rgb(255 255 255 / .25);
  background: repeating-linear-gradient(45deg, rgb(255 255 255 / .07) 0 12px, rgb(255 255 255 / .02) 12px 24px); }
.sl-eyebrow { margin: 0; font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: .06em; text-transform: uppercase; color: var(--sale-accent); }
.sl-banner-txt h1 { margin: 6px 0 0; font-size: 2rem; line-height: 1.15; font-weight: var(--weight-strong); }
.sl-banner-sub { margin: 6px 0 0; opacity: .9; }
.sl-hero-h { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-strong); }
.sl-hero-n { margin: 4px 0 0; font-size: var(--text-sm); opacity: .85; }
.sl-cd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.sl-cd-l { width: 100%; font-size: var(--text-sm); opacity: .9; }
.sl-cd-n { min-width: 56px; padding: 4px 6px; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--sale-900); text-align: center; line-height: 1.1; }
.sl-cd-n b { display: block; font-size: 1.375rem; font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
.sl-cd-n i { font-style: normal; font-size: 11px; color: var(--color-text-muted); }

/* ---------- Dải cam kết ---------- */
.sl-trust { list-style: none; margin: calc(-1 * var(--space-5)) 0 0; padding: 0; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.sl-trust li { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); font-size: var(--text-sm); }
.sl-trust .icon { color: var(--sale-600); }
.sl-trust p { margin: 0; min-width: 0; }
.sl-trust b { display: block; font-weight: var(--weight-strong); line-height: 1.25; }
.sl-trust span { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------- Thanh chương trình dính ---------- */
.sl-nav { position: sticky; top: var(--sl-top, 0px); z-index: var(--z-sticky); margin-top: var(--space-4); background: var(--sale-900); transition: top var(--duration-base) var(--ease-out); }
.sl-nav-in { display: flex; gap: var(--space-2); overflow-x: auto; padding-top: var(--space-2); padding-bottom: var(--space-2); scrollbar-width: none; }
.sl-nav-in::-webkit-scrollbar { display: none; }
.sl-chip { flex: none; min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-full); background: rgb(255 255 255 / .12); color: var(--color-on-action); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
.sl-chip:hover { background: rgb(255 255 255 / .22); color: var(--color-on-action); }
.sl-chip[aria-current="true"] { background: var(--color-surface); color: var(--sale-900); font-weight: var(--weight-strong); }
.sl-chip-n { padding: 0 6px; border-radius: var(--radius-full); background: var(--sale-accent); color: var(--gray-900); font-size: 10px; font-weight: var(--weight-strong); }

/* ---------- Thẻ sản phẩm trên landing ---------- */
.sl-card { border: 0; box-shadow: var(--shadow-sm); }
.sl-card .pcard-now { font-size: 1.0625rem; }
.sl-card .pcard-img { overflow: visible; }
.sl-card--deal .pcard-img img, .sl-card--best .pcard-img img { position: absolute; inset: 0; }

/* Vé quà */
.sl-tk { position: relative; display: flex; align-items: stretch; min-height: 52px; border-radius: var(--radius-md); overflow: hidden; background: var(--sale-accent); color: var(--gray-900); }
.sl-tk-v { position: relative; min-width: 92px; padding: 6px 12px; display: flex; flex-direction: column; justify-content: center; border-right: 2px dashed rgb(0 0 0 / .25); }
.sl-tk-v small { font-size: 10px; font-weight: var(--weight-strong); letter-spacing: .06em; }
.sl-tk-v b { font-size: 1.125rem; line-height: 1.15; font-weight: var(--weight-strong); white-space: nowrap; }
.sl-tk-t { flex: 1; padding: 6px 10px; display: flex; align-items: center; font-size: var(--text-xs); line-height: 1.35; background: var(--sale-ticket); }
.sl-tk::before, .sl-tk::after { content: ""; position: absolute; left: 92px; width: 14px; height: 14px; border-radius: 50%; background: var(--card-bg); transform: translateX(-50%); }
.sl-tk::before { top: -7px; } .sl-tk::after { bottom: -7px; }
.sl-tk.is-win { background: var(--sale-900); color: var(--color-on-action); }
.sl-tk.is-win .sl-tk-t { background: var(--sale-700); }
.sl-tk.is-win .sl-tk-v { border-color: rgb(255 255 255 / .3); }

/* ---------- Deal nổi bật ---------- */
.sl-deals { list-style: none; margin: var(--space-3) calc(-1 * var(--page-gutter)) 0; padding: 4px var(--page-gutter) 8px; display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--page-gutter); scrollbar-width: none; }
.sl-deals > li { scroll-snap-align: start; }
.sl-card--deal { padding: 0; overflow: hidden; gap: 8px; }
.sl-card--deal .pcard-link { gap: 8px; }
.sl-card--deal .pcard-img { aspect-ratio: 4 / 3; border-radius: 0; }
.sl-card--deal .pcard-name, .sl-card--deal .pcard-spec, .sl-card--deal .pcard-note, .sl-card--deal .pcard-price, .sl-card--deal .pcard-state { margin-left: var(--space-4); margin-right: var(--space-4); }
.sl-card--deal .pcard-name { font-size: var(--text-base); font-weight: var(--weight-strong); }
.sl-card--deal .pcard-now { font-size: 1.75rem; line-height: 1.1; }
.sl-card--deal .pcard-was { font-size: var(--text-sm); }
.sl-card--deal .sl-tk { margin: 0 var(--space-4); }
.sl-flag { position: absolute; top: 12px; left: 0; z-index: 1; padding: 4px 10px 4px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--sale-900); color: var(--color-on-action); font-size: var(--text-xs); font-weight: var(--weight-strong); }
.sl-flag b { color: var(--sale-accent); }
/* Khối deal nổi bật (07/11): nền xanh đậm bo góc, vệt sáng, thẻ trắng nổi lên */
.sl-deal { --card-bg: var(--color-surface); position: relative; margin-left: calc(-1 * var(--page-gutter)); margin-right: calc(-1 * var(--page-gutter)); padding: var(--space-5) var(--page-gutter) var(--space-4); background: radial-gradient(120% 80% at 100% 0, rgb(255 194 51 / .28), transparent 55%), radial-gradient(90% 70% at 0 100%, rgb(10 108 216 / .55), transparent 60%), linear-gradient(160deg, var(--sale-900), var(--sale-950)); color: var(--color-on-action); }
.sl-deal .sl-kicker { color: var(--sale-accent); }
.sl-deal .sl-kicker::before { display: none; }
.sl-deal .sl-kicker .icon { width: 14px; height: 14px; }
.sl-deal .sl-ttl { color: var(--color-on-action); }
.sl-deal .sl-ttl u { color: var(--gray-900); padding: 0 4px; background: var(--sale-accent); border-radius: var(--radius-sm); }
.sl-deal-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px var(--space-4); }
.sl-deal-sub { margin: 0; font-size: var(--text-sm); color: var(--sale-200); }
.sl-card--deal { border: 0; box-shadow: 0 10px 28px rgb(0 0 0 / .28); }
.sl-card--deal .pcard-hot, .sl-card--deal .pcard-flag:not(.is-flash) { display: none; }
.sl-card--deal .pcard-flag { left: auto; right: 8px; top: 10px; }
.sl-card--deal .pcard-spec > :nth-child(n+5) { display: none; }
.sl-rank { position: absolute; top: 0; left: 12px; z-index: 1; width: 40px; padding: 4px 0 8px; display: flex; flex-direction: column; align-items: center; line-height: 1; background: var(--sale-accent); color: var(--gray-900); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.sl-rank small { font-size: 9px; font-weight: var(--weight-strong); letter-spacing: .06em; }
.sl-rank b { font-size: 1.375rem; font-weight: var(--weight-strong); }
.sl-cut { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 6px var(--space-4); background: linear-gradient(90deg, var(--color-discount-bg), #F04A2A); color: var(--color-on-discount); font-size: var(--text-lg); font-weight: var(--weight-strong); line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; }
.sl-dsave { margin: 0 var(--space-4); padding: 8px 10px; border-radius: var(--radius-md); background: var(--red-50, #FDECEC); color: var(--color-discount-bg); font-size: var(--text-sm); display: flex; gap: 6px; align-items: center; }
.sl-dsave .icon { width: 16px; height: 16px; flex: none; }
.sl-dsave b { font-weight: var(--weight-strong); }
.sl-btns { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0 var(--space-4) var(--space-4); }
.sl-btns .btn { min-height: var(--tap-min); }

/* ---------- Quà build PC ---------- */
.sl-gift { --card-bg: var(--sale-950); position: relative; overflow: hidden; padding: var(--space-5) var(--space-4); border-radius: var(--radius-md); background: linear-gradient(170deg, var(--sale-900), var(--sale-950)); color: var(--color-on-action); }
.sl-gift::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgb(255 194 51 / .25), transparent 70%); pointer-events: none; }
.sl-gift .sl-kicker { color: var(--sale-accent); }
.sl-gift .sl-ttl { color: var(--color-on-action); }
.sl-gift .sl-sub { color: var(--sale-200); }
.sl-gift .sl-sub b { color: var(--color-on-action); }
.sl-how { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; counter-reset: s; }
.sl-how li { font-size: 11px; line-height: 1.35; color: var(--sale-100); text-align: center; }
.sl-how li::before { counter-increment: s; content: counter(s); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 auto 4px; border-radius: 50%; background: var(--sale-accent); color: var(--gray-900); font-size: 12px; font-weight: var(--weight-strong); }
.sl-ptag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--sale-200); }
.sl-ptag b { padding: 2px 10px; border-radius: var(--radius-full); background: var(--sale-accent); color: var(--gray-900); font-size: var(--text-sm); }
.sl-track { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 10px; }
.sl-track li { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; }
.sl-track li::before { content: ""; position: absolute; left: 37px; top: -10px; bottom: -10px; width: 2px; background: rgb(255 255 255 / .18); }
.sl-track li:first-child::before { top: 50%; } .sl-track li:last-child::before { bottom: 50%; }
.sl-at { position: relative; z-index: 1; padding: 4px 0; border: 2px solid var(--sale-accent); border-radius: var(--radius-full); background: var(--sale-950); color: var(--sale-accent); font-size: 11px; font-weight: var(--weight-strong); text-align: center; }
.sl-track li.is-top .sl-tk { box-shadow: 0 0 0 2px var(--color-on-action), 0 6px 18px rgb(255 194 51 / .35); }
.sl-or { display: flex; align-items: center; gap: 10px; margin: var(--space-4) 0 0; color: var(--sale-accent); font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: .1em; }
.sl-or::before, .sl-or::after { content: ""; flex: 1; height: 1px; background: rgb(255 255 255 / .2); }
.sl-alt { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sl-alt li { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid rgb(255 255 255 / .18); border-radius: var(--radius-md); background: rgb(255 255 255 / .08); font-size: var(--text-xs); line-height: 1.35; }
.sl-alt .icon { width: 32px; height: 32px; color: var(--sale-accent); }
.sl-alt p { margin: 0; }
.sl-alt b { display: block; font-size: var(--text-sm); }
.sl-foot2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--sale-200); }
.sl-foot2 a { color: var(--sale-accent); font-weight: var(--weight-strong); white-space: nowrap; }

/* ---------- Bộ lọc (tab, nút tầm giá, chọn gói) ---------- */
.sl-tabs, .sl-seg { display: flex; gap: 6px; margin-top: var(--space-3); overflow-x: auto; scrollbar-width: none; }
.sl-tabs::-webkit-scrollbar, .sl-seg::-webkit-scrollbar { display: none; }
.sl-tabs button, .sl-seg button { flex: none; min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--sale-200); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.sl-tabs button[aria-pressed="true"], .sl-seg button[aria-pressed="true"] { background: var(--sale-900); border-color: var(--sale-900); color: var(--color-on-action); font-weight: var(--weight-strong); }
.sl-more { display: flex; justify-content: center; margin-top: var(--space-3); }
.sl-more button { min-height: var(--tap-min); padding: 0 var(--space-5); border: 1px solid var(--sale-600); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--sale-700); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-strong); cursor: pointer; }
[data-sl-more] > li.is-more { display: none; }
[data-sl-more].is-open > li.is-more { display: block; }

/* ---------- Nút xem tất cả dưới lưới PC ---------- */
.sl-allbtn { display: flex; justify-content: center; margin: var(--space-3) 0 0; }
.sl-allbtn .btn { min-height: var(--tap-min); padding: 0 var(--space-5); border: 1px solid var(--sale-600); background: var(--color-surface); color: var(--sale-700); font-weight: var(--weight-strong); }
.sl-allbtn .btn:hover { background: var(--sale-50); color: var(--sale-900); }
.sl-dark .sl-allbtn .btn { border-color: var(--sale-accent); background: transparent; color: var(--sale-accent); }
.sl-dark .sl-allbtn .btn:hover { background: rgb(255 194 51 / .12); }

/* ---------- PC văn phòng kiểu cũ (1 máy lớn + hàng ngang), không dùng từ 07/11 ---------- */
.sl-cfg { display: grid; gap: 8px; margin-top: var(--space-3); }
.sl-rib { position: absolute; top: 8px; right: 8px; z-index: 1; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--sale-accent); color: var(--gray-900); font-size: 11px; font-weight: var(--weight-strong); }
.sl-card--best .pcard-img { aspect-ratio: 16 / 9; }
.sl-card--best .pcard-name { font-weight: var(--weight-strong); font-size: var(--text-base); }
.sl-card--best .pcard-now { font-size: 1.5rem; }
.sl-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sl-card--row { display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 12px; row-gap: 4px; align-items: start; }
.sl-card--row .pcard-link { display: contents; }
.sl-card--row { align-content: start; }
.sl-card--row .pcard-img { grid-column: 1; grid-row: 1 / span 4; width: 84px; }
.sl-card--row > *:not(.pcard-link), .sl-card--row .pcard-link > *:not(.pcard-img) { grid-column: 2; }
.sl-card--row .pcard-spec { display: none; }
.sl-card--row .pcard-name { min-height: 0; font-weight: var(--weight-strong); }
.sl-card--row .pcard-price { margin: 0; }
.sl-gl { margin: 0; display: flex; gap: 4px; align-items: center; font-size: 11px; color: var(--sale-900); }
.sl-page .sl-gl .icon { width: 13px; height: 13px; color: var(--sale-600); }

/* ---------- PC gaming: nền tối tràn màn hình ---------- */
.sl-dark { --card-bg: var(--sale-950); margin-left: calc(-1 * var(--page-gutter)); margin-right: calc(-1 * var(--page-gutter)); padding: var(--space-5) var(--page-gutter); background: var(--sale-950); color: var(--color-on-action); }
.sl-dark .sl-kicker, .sl-dark .sl-all { color: var(--sale-accent); }
.sl-dark .sl-ttl { color: var(--color-on-action); }
.sl-dark .sl-when { color: var(--sale-200); }
.sl-pack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: var(--space-3); }
.sl-pack button { padding: 10px; border: 1.5px solid rgb(255 255 255 / .25); border-radius: var(--radius-md); background: transparent; color: var(--sale-100); font: inherit; font-size: 11px; line-height: 1.35; text-align: left; cursor: pointer; }
.sl-pack button b { display: block; margin-bottom: 2px; font-size: var(--text-sm); color: var(--color-on-action); }
.sl-pack button[aria-pressed="true"] { border-color: var(--sale-accent); background: rgb(255 194 51 / .1); }
.sl-pack button[aria-pressed="true"] b::after { content: " ✓"; color: var(--sale-accent); }
.sl-hs { list-style: none; margin: var(--space-3) calc(-1 * var(--page-gutter)) 0; padding: 4px var(--page-gutter) 8px; display: grid; grid-auto-flow: column; grid-auto-columns: 64%; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--page-gutter); scrollbar-width: none; }
.sl-hs::-webkit-scrollbar { display: none; }
.sl-hs > li { scroll-snap-align: start; }
.sl-hs > li[hidden] { display: none; }
.sl-card--gm { --card-bg: var(--color-surface); }
.sl-card--gm .sl-tk { min-height: 44px; }
.sl-card--gm .sl-tk-v { min-width: 72px; padding: 6px 8px; }
.sl-card--gm .sl-tk-v b { font-size: 1rem; }
.sl-card--gm .sl-tk::before, .sl-card--gm .sl-tk::after { left: 72px; }
.sl-card--gm .sl-tk-t { font-size: 11px; padding: 6px 8px; }

/* ---------- Laptop, máy in: thẻ gọn (07/11) ---------- */
/* Thẻ trên landing chỉ giữ 1 dấu ưu đãi: bỏ nhãn nổi bật, nhãn quà của trang khác; thông số tối đa 2 mục */
.sl-card--lap .pcard-hot, .sl-pgrid .pcard-hot { display: none; }
.sl-card--lap .pcard-spec > :nth-child(n+3), .sl-pgrid .pcard-spec > :nth-child(n+3) { display: none; }
.sl-pgrid .pcard-spec { display: none; }
.sl-lap { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sl-lap > li { display: flex; }
.sl-lap .pcard { flex: 1; }
.sl-stamp { position: absolute; top: 4px; left: 4px; z-index: 1; padding: 2px 7px; border-radius: var(--radius-sm); background: var(--color-discount-bg); color: var(--color-on-discount); font-size: var(--text-xs); font-weight: var(--weight-strong); line-height: 1.4; white-space: nowrap; }
.sl-card--lap .pcard-flag { display: none; }
/* Ảnh laptop ngang: khung 4:3 cho thẻ thấp, đỡ khoảng trắng */
.sl-card--lap .pcard-img { aspect-ratio: 4 / 3; }
.sl-card--lap .pcard-img img { position: absolute; inset: 0; }
.sl-card--lap { gap: 6px; }
/* Thẻ lớn máy đầu: ảnh trái, chữ phải, viền đỏ */
.sl-lap > li.is-hero { grid-column: 1 / -1; }
.sl-card--lap.is-hero { display: grid; grid-template-columns: 46% minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 12px; row-gap: 6px; align-content: start; border: 2px solid var(--sale-600); box-shadow: 0 6px 18px rgb(212 26 26 / .14); }
.sl-card--lap.is-hero .pcard-link { display: contents; }
.sl-card--lap.is-hero .pcard-img { grid-column: 1; grid-row: 1 / span 8; align-self: center; }
.sl-card--lap.is-hero .pcard-link > :not(.pcard-img), .sl-card--lap.is-hero > :not(.pcard-link) { grid-column: 2; }
.sl-card--lap.is-hero { background: linear-gradient(135deg, var(--color-surface) 55%, var(--sale-50)); }
.sl-hero-tag { order: -1; justify-self: start; margin: 0; padding: 2px 8px 2px 6px; border-radius: var(--radius-sm); background: var(--sale-accent); color: var(--gray-900); font-size: var(--text-xs); font-weight: var(--weight-strong); display: inline-flex; gap: 3px; align-items: center; }
.sl-page .sl-hero-tag .icon { width: 12px; height: 12px; }
.sl-card--lap.is-hero .pcard-name { font-size: var(--text-sm); font-weight: var(--weight-strong); -webkit-line-clamp: 3; min-height: 0; }
.sl-card--lap.is-hero .pcard-spec > :nth-child(n+3) { display: flex; }
.sl-card--lap.is-hero .pcard-price { margin: 0; }
.sl-card--lap.is-hero .pcard-now { font-size: 1.25rem; }
.sl-card--lap.is-hero .sl-stamp { top: 2px; left: 2px; display: flex; flex-direction: column; align-items: center; padding: 5px 10px; border-radius: var(--radius-md); line-height: 1.05; transform: rotate(-6deg); box-shadow: 0 4px 10px rgb(212 26 26 / .3); }
.sl-card--lap.is-hero .sl-stamp small { font-size: 9px; letter-spacing: .08em; }
.sl-card--lap.is-hero .sl-stamp b { font-size: 1rem; }
.sl-save { margin: 0; font-size: var(--text-xs); color: var(--sale-700); }
.sl-save b { font-weight: var(--weight-strong); }
.sl-hero-btn { justify-self: start; min-height: 36px; padding: 0 var(--space-4); font-size: var(--text-sm); }
@media (max-width: 63.99em) { .sl-lap > li:nth-child(n+6) { display: none; } .sl-hero-btn { display: none; } }

/* ---------- Máy in, hộp mực ---------- */
.sl-grid { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sl-grid > li[hidden] { display: none; }
.sl-pgrid .pcard-hot { display: none; }
.sl-ink { --card-bg: var(--sale-50); }
.sl-coupons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: var(--space-3); }
.sl-coupon { margin: 0; padding: 12px; border: 2px dashed var(--sale-600); border-radius: var(--radius-md); background: var(--color-surface); text-align: center; }
.sl-coupon small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.sl-coupon b { display: block; font-size: 1.25rem; line-height: 1.2; color: var(--color-price); }
.sl-coupon s { font-size: 11px; color: var(--color-price-compare); }
.sl-ink-h { margin: var(--space-3) 0 0; font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--sale-900); }
.sl-ink-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.sl-ink-list a { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: var(--text-xs); line-height: 1.3; text-decoration: none; }
.sl-ink-list a:hover { color: var(--sale-700); }
.sl-ink-list img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.sl-ink-list span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-ink-all { display: block; margin-top: var(--space-2); text-align: center; }

/* ---------- Camera giá tốt: dải vàng ---------- */
.sl-flash { padding: var(--space-4); border-radius: var(--radius-md); background: var(--sale-accent); color: var(--gray-900); }
.sl-flash-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sl-flash-h { margin: 0; display: flex; gap: 6px; align-items: center; font-size: var(--text-lg); line-height: 1.2; }
.sl-left { flex: none; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--gray-900); color: var(--sale-accent); font-size: var(--text-xs); font-weight: var(--weight-strong); white-space: nowrap; }
.sl-flash-soon { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.sl-flash .sl-hs { grid-auto-columns: 44%; }

/* ---------- Combo camera ---------- */
.sl-eyes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: var(--space-3) 0; }
.sl-eyes[hidden] { display: none; }
.sl-eyes button { padding: 8px 4px; border: 1.5px solid var(--sale-200); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; line-height: 1.1; text-align: center; cursor: pointer; }
.sl-eyes button b { display: block; font-size: 1.75rem; color: var(--sale-900); }
.sl-eyes button small { font-size: 11px; color: var(--color-text-muted); }
.sl-eyes button[aria-pressed="true"] { background: var(--sale-900); border-color: var(--sale-900); }
.sl-eyes button[aria-pressed="true"] b { color: var(--sale-accent); }
.sl-eyes button[aria-pressed="true"] small { color: var(--sale-100); }
.sl-combo { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 8px; }
.sl-combo > li[hidden] { display: none; }
.sl-combo .sl-card--row { grid-template-columns: 96px 1fr; }
.sl-combo .sl-card--row .pcard-img { width: 96px; }
.sl-save { margin: 0; font-size: 11px; font-weight: var(--weight-strong); color: var(--sale-700); }
.sl-bar { display: block; height: 6px; margin: 2px 0 2px; border-radius: 3px; background: var(--sale-100); overflow: hidden; }
.sl-bar i { display: block; height: 100%; max-width: 100%; background: var(--sale-600); }

/* ---------- Sắp diễn ra ---------- */
.sl-soon { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); border: 1px dashed var(--sale-600); border-radius: var(--radius-md); background: var(--color-surface); }
.sl-dd { flex: none; width: 68px; margin: 0; padding: var(--space-2) 0; border-radius: var(--radius-md); background: var(--sale-900); color: var(--color-on-action); text-align: center; line-height: 1.1; }
.sl-dd b { display: block; font-size: 1.5rem; color: var(--sale-accent); }
.sl-dd small { font-size: var(--text-xs); color: var(--sale-100); }
.sl-soon-h { margin: 4px 0 0; font-size: var(--text-base); font-weight: var(--weight-strong); color: var(--sale-900); }
.sl-soon div p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Phụ kiện ---------- */
.sl-vnote { --card-bg: var(--color-surface); display: flex; gap: 10px; align-items: center; margin-top: var(--space-3); padding: 10px 12px; border: 1px solid var(--sale-200); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-sm); }
.sl-vnote p { margin: 0; }
.sl-vnote .sl-tk { flex: none; min-height: 40px; }
.sl-vnote .sl-tk-v { min-width: 0; padding: 4px 10px; border: 0; }
.sl-vnote .sl-tk-v b { font-size: 1rem; }
.sl-vnote .sl-tk::before, .sl-vnote .sl-tk::after { display: none; }
.sl-acc { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sl-acc a { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); color: var(--color-text); font-size: var(--text-sm); text-align: center; text-decoration: none; }
.sl-acc a:hover { color: var(--sale-700); }
.sl-pk-img { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--sale-50); color: var(--sale-600); }
.sl-pk-img img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Dịch vụ ---------- */
.sl-svc { padding: var(--space-5) var(--space-4); border-radius: var(--radius-md); background: linear-gradient(160deg, var(--sale-700), var(--sale-950)); color: var(--color-on-action); }
.sl-svc .sl-ttl { color: var(--color-on-action); }
.sl-svc .sl-sub { color: var(--sale-200); }
.sl-svc .sl-when { margin: 0; padding: 2px 8px; border-radius: var(--radius-sm); background: rgb(255 255 255 / .15); color: var(--color-on-action); }
.sl-ctas { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin-top: var(--space-4); }
.sl-ctas .btn { min-height: var(--tap-min); }
.sl-btn-y { background: var(--sale-accent); color: var(--gray-900); }
.sl-btn-y:hover { background: var(--amber-300); color: var(--gray-900); }
.sl-btn-w { background: var(--color-surface); color: var(--sale-900); }
.sl-btn-w:hover { background: var(--sale-50); color: var(--sale-900); }
.sl-sv { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.sl-sv li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 1px solid rgb(255 255 255 / .18); border-radius: var(--radius-md); background: rgb(255 255 255 / .08); }
.sl-sv .icon { width: 28px; height: 28px; color: var(--sale-accent); }
.sl-sv p { margin: 0; }
.sl-sv b { display: block; font-weight: var(--weight-strong); }
.sl-sv span { font-size: var(--text-sm); color: var(--sale-100); }

/* ---------- Thể lệ ---------- */
.sl-rules { margin-top: var(--space-6); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.sl-rules summary { min-height: var(--tap-min); display: flex; align-items: center; font-weight: var(--weight-strong); color: var(--sale-900); cursor: pointer; }
.sl-rules ul { margin: var(--space-2) 0 var(--space-2); padding-left: 1.2em; font-size: var(--text-sm); color: var(--color-text-muted); display: grid; gap: 6px; }

/* ---------- Máy tính bảng ---------- */
@media (min-width: 37.5em) {
  .sl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sl-hs { grid-auto-columns: 34%; }
  .sl-flash .sl-hs { grid-auto-columns: 28%; }
  .sl-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sl-ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Máy tính ---------- */
@media (min-width: 64em) {
  .sl-hero-in { grid-template-columns: 1.6fr 1fr; align-items: end; gap: var(--space-5); padding-top: var(--space-5); }
  .sl-banner img { aspect-ratio: 12 / 5; }
  .sl-banner.no-img { min-height: 0; aspect-ratio: 12 / 5; padding: var(--space-6); }
  .sl-banner-txt h1 { font-size: 2.5rem; }
  .sl-hero-h { font-size: 1.75rem; line-height: 1.2; }
  .sl-cd-n { min-width: 68px; }
  .sl-cd-n b { font-size: 1.75rem; }
  .sl-deals { margin: var(--space-3) 0 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .sl-gift { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0 var(--space-6); padding: var(--space-6); }
  .sl-gift-r { grid-column: 2; grid-row: 1 / span 2; }
  .sl-gift-r .sl-ptag { margin-top: 0; }
  .sl-track { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .sl-track li { grid-template-columns: 1fr; gap: 10px; }
  .sl-track li::before { left: -4px; right: -4px; top: 13px; bottom: auto; width: auto; height: 2px; }
  .sl-track li:first-child::before { left: 50%; top: 13px; }
  .sl-track li:last-child::before { right: 50%; bottom: auto; }
  .sl-at { width: max-content; padding: 4px 10px; justify-self: center; }
  .sl-track .sl-tk { flex-direction: column; }
  .sl-track .sl-tk-v { min-width: 0; padding: 12px; border-right: 0; border-bottom: 2px dashed rgb(0 0 0 / .25); }
  .sl-track .sl-tk.is-win .sl-tk-v { border-color: rgb(255 255 255 / .3); }
  .sl-track .sl-tk::before, .sl-track .sl-tk::after { display: none; }
  .sl-track .sl-tk-t { align-items: flex-start; }
  .sl-cfg { grid-template-columns: 1fr 1.3fr; gap: var(--space-3); align-items: start; }
  .sl-cfg .sl-empty { grid-column: 2; }
  .sl-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-cfg .sl-more { grid-column: 2; margin-top: 0; }
  .sl-dark { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; box-shadow: 0 0 0 100vmax var(--sale-950); clip-path: inset(0 -100vmax); }
  .sl-pack { max-width: 640px; }
  .sl-hs { margin: var(--space-3) 0 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; }
  .sl-flash .sl-hs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sl-lap { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
  .sl-lap.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sl-lap.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sl-lap > li.is-hero { grid-column: span 2; }
  .sl-card--lap.is-hero { grid-template-columns: 52% minmax(0, 1fr); padding: var(--space-3); }
  .sl-card--lap.is-hero .pcard-name { font-size: var(--text-base); }
  .sl-card--lap.is-hero .pcard-now { font-size: 1.625rem; }
  .sl-card--lap.is-hero .sl-stamp { padding: 6px 14px; }
  .sl-card--lap.is-hero .sl-stamp b { font-size: 1.25rem; }
  .sl-deal { margin-left: 0; margin-right: 0; padding: var(--space-6); border-radius: var(--radius-lg, 12px); }
  .sl-deal .sl-deals { margin-top: var(--space-4); }
  .sl-save { font-size: var(--text-sm); }
  .sl-lap .sl-stamp { font-size: var(--text-sm); padding: 3px 9px; }
  .sl-two.is-both { display: grid; grid-template-columns: 2.2fr 1fr; gap: var(--space-5); align-items: start; }
  .sl-pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sl-two:not(.is-both) .sl-pgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sl-flash { display: grid; grid-template-columns: 1fr 3fr; gap: var(--space-4); align-items: center; }
  .sl-flash-top { flex-direction: column; align-items: flex-start; }
  .sl-flash .sl-hs { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sl-flash .sl-hs > li:nth-child(n+5) { display: none; }
  .sl-cam { display: grid; grid-template-columns: 1fr 1.8fr; gap: var(--space-5); align-items: start; }
  .sl-combo { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-acc { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sl-svc { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-5); align-items: center; padding: var(--space-6); }
  .sl-sv { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sl-svc .sl-ctas { grid-template-columns: 1fr; }
  .sl-sv li { flex-direction: column; }
}
.sl-eyes button[data-n="0"] b { font-size: var(--text-base); line-height: 1.75rem; }

/* Thẻ không được rộng hơn ô lưới: tên sản phẩm dài không dấu cách (vd. "i5-13420H/16GB/512GB...") từng đẩy thẻ tràn sang ô bên cạnh (07/11) */
.sl-page li { min-width: 0; }
.sl-page .pcard { min-width: 0; max-width: 100%; }
.sl-page .pcard-name { overflow-wrap: anywhere; }

/* Giá 3 mức khi sản phẩm đang trong chương trình KM của Sapo (07/11): giá sale to + giá gốc gạch, dưới là 2 bậc "Giảm sẵn" + "Sale thêm" */
.sl-page .has-p3 .pcard-price { display: none; }
.sl-p3 { display: grid; gap: 4px; }
.sl-p3 p { margin: 0; }
.sl-page .has-p3 .sl-p3 { margin-top: auto; }
.sl-p3-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; line-height: 1.15; }
.sl-p3-now b { font-size: var(--text-lg); font-weight: var(--weight-strong); color: var(--color-price); }
.sl-p3-now s { font-size: var(--text-xs); color: var(--color-price-compare); }
.sl-p3-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font-size: 11px; font-weight: var(--weight-strong); line-height: 1.3; }
.sl-p3-steps .is-base { padding: 1px 6px; border: 1px solid var(--red-100, #FDE3E3); border-radius: var(--radius-sm); background: var(--red-50, #FEF2F2); color: var(--color-price); }
.sl-p3-steps .is-plus { color: var(--color-text-muted); }
.sl-p3-steps .is-ct { padding: 1px 6px 1px 4px; border-radius: var(--radius-sm); background: var(--color-discount-bg); color: var(--color-on-discount); display: inline-flex; align-items: center; gap: 2px; }
.sl-page .sl-p3-steps .icon { width: 11px; height: 11px; }
.sl-card--deal .sl-p3 { margin: 0 var(--space-4); }
.sl-card--deal .sl-p3-now b { font-size: 1.75rem; }
.sl-card--deal .sl-p3-now s, .sl-card--deal .sl-p3-steps { font-size: var(--text-sm); }
.sl-card--lap.is-hero .sl-p3 { margin-top: 0; }
.sl-card--lap.is-hero .sl-p3-now b { font-size: 1.25rem; }
.sl-card--lap.is-hero .sl-p3-steps { font-size: var(--text-xs); }
@media (min-width: 64em) { .sl-card--lap.is-hero .sl-p3-now b { font-size: 1.625rem; } }

/* Quà tặng (nhãn quà của bài khuyến mãi) trên landing: dải vàng nổi bật ngay trên nút mua (07/11) */
.sl-card--deal .pcard-promo, .sl-card--lap .pcard-promo, .sl-pgrid .pcard-promo { order: 1; }
.sl-card--deal .sl-btns, .sl-card--lap .sl-hero-btn { order: 2; }
.sl-card--deal .pcard-promo { margin: 0 var(--space-4); }
.sl-card--deal .pcard-gift, .sl-card--lap .pcard-gift, .sl-pgrid .pcard-gift { width: 100%; padding: 5px 8px; border: 0; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--sale-accent), var(--sale-ticket)); color: var(--gray-900); font-size: var(--text-xs); }
.sl-card--deal .pcard-gift { font-size: var(--text-sm); padding: 7px 10px; }
.sl-card--deal .pcard-gift .icon, .sl-card--lap .pcard-gift .icon, .sl-pgrid .pcard-gift .icon { color: var(--color-discount-bg); width: 16px; height: 16px; }
.sl-card--lap.is-hero .pcard-promo { justify-self: start; }
.sl-card--lap.is-hero .pcard-gift { width: auto; }

/* Ưu đãi kèm theo từ metafield Uu_dai (07/11): hộp vàng nhạt viền đứt, đứng cùng nhãn quà, trên nút mua */
.sl-uu { order: 1; margin: 0; padding: 6px 8px; border: 1px dashed var(--sale-accent); border-radius: var(--radius-md); background: #FFF8E1; color: var(--gray-900); font-size: var(--text-xs); line-height: 1.35; }
.sl-uu p, .sl-uu ul { margin: 0; }
.sl-uu-h { display: flex; align-items: center; gap: 4px; font-weight: var(--weight-strong); color: var(--color-discount-bg); }
.sl-page .sl-uu-h .icon { width: 14px; height: 14px; flex: none; }
.sl-uu ul { padding: 0; list-style: none; display: grid; gap: 2px; margin-top: 2px; }
.sl-uu li { position: relative; padding-left: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-uu li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 4px; height: 4px; border-radius: 50%; background: var(--color-discount-bg); }
.sl-uu-more { color: var(--color-text-muted); }
.sl-card--deal .sl-uu { margin: 0 var(--space-4); font-size: var(--text-sm); }
.sl-card--lap.is-hero .sl-uu { grid-column: 2; }
.sl-dark .sl-uu { color: var(--gray-900); }

/* Banner kéo hết chiều ngang (07/11): không khung, không bo góc, không khối bên cạnh */
.sl-hero { background: var(--sale-900); }
.sl-hero::after { display: none; }
.sl-hero .sl-banner { border-radius: 0; }
.sl-hero .sl-banner.no-img { border: 0; padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
.sl-hero + .sl-wrap .sl-trust { margin-top: var(--space-3); }
@media (min-width: 64em) {
  .sl-hero .sl-banner img { aspect-ratio: 12 / 5; }
  .sl-hero .sl-banner.no-img { aspect-ratio: auto; min-height: 320px; padding-left: max(var(--space-6), calc((100vw - 1200px) / 2)); }
}