/* lp-quick.css — Dải "Mua nhanh" (QB, FE 22/10/2026). Đi cặp lp-quick.js. Nạp SAU lp.css / lp-home.css.
   Trang chủ: [data-lp-qb="mobile"] nằm trong lưới hero, ngay trước ô báo giá spa; chỉ hiện <768px (máy tính giữ bố cục cũ).
   /tiktok: hiện mọi cỡ màn, ngay sau "Chọn 1 để bắt đầu".
   Chống CLS: khung + 3 thẻ giữ chỗ có sẵn trong HTML, mọi phần của thẻ có chiều cao cố định → thẻ thật thay thẻ giữ chỗ không đẩy trang.
   Chuyển động chỉ khi khách không bật giảm chuyển động và trang không có .lp-no-motion (?motion=0). Chỉ transform/opacity. */
.lp-qb{--qb-card:min(156px,40vw);--qb-r:20px;--qb-pad:6px;--qb-ease:cubic-bezier(.32,.72,0,1);min-width:0}
.lp-qb[hidden]{display:none!important}
.lp-qb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 12px}
.lp-qb-head>div{min-width:0}
.lp-qb-eyebrow{display:inline-flex;align-items:center;gap:6px;margin:0 0 6px;padding:4px 10px;border-radius:999px;background:var(--lp-orange-l);color:var(--lp-orange-d);font:700 11px/1.2 var(--lp-f-body);letter-spacing:.08em;text-transform:uppercase}
.lp-qb-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lp-orange);flex:none}
.lp-main .lp-qb-head h2{font:700 24px/1.15 var(--lp-f-head);letter-spacing:-.015em;margin:0}
.lp-qb-more{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 2px;font:700 14px/1.2 var(--lp-f-body);color:var(--lp-orange-d)!important;text-decoration:none;white-space:nowrap}
.lp-qb-more:hover{text-decoration:underline}

/* Dải kéo ngang: tràn ra mép màn (bù lề 16px), dừng theo thẻ, luôn lộ mép thẻ kế tiếp để khách biết kéo được */
.lp-qb-list{list-style:none;margin:0 calc(-1*var(--lp-gutter));padding:4px var(--lp-gutter) 14px;display:grid;grid-auto-flow:column;grid-auto-columns:var(--qb-card);gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--lp-gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lp-qb-list::-webkit-scrollbar{display:none}
.lp-qb-list>li{min-width:0;scroll-snap-align:start}

/* Thẻ: vỏ trắng viền mảnh + bóng rất nhẹ, giếng ảnh kem bo đồng tâm bên trong */
.lp-qb-card{position:relative;display:flex;flex-direction:column;height:100%;padding:var(--qb-pad);border-radius:var(--qb-r);background:#fff;box-shadow:0 0 0 1px var(--lp-line),0 18px 32px -24px rgba(42,20,13,.32)}
.lp-qb-card.is-combo{box-shadow:0 0 0 1px var(--lp-line-2),0 18px 32px -24px rgba(42,20,13,.38)}
.lp-qb-media{position:relative;display:block;text-decoration:none;color:inherit;border-radius:calc(var(--qb-r) - var(--qb-pad));overflow:hidden}
.lp-qb-img{display:block;aspect-ratio:1;background:var(--lp-cream);border-radius:inherit}
.lp-qb-img>img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.lp-qb-img.is-mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;padding:10px}
.lp-qb-img.is-mosaic>img{width:100%;height:100%;object-fit:contain;border-radius:10px;background:#fff;mix-blend-mode:normal}
.lp-qb-img.is-mosaic>img:first-child{grid-row:1/3}
.lp-qb-img.is-ph{display:grid;place-items:center;padding:12px;text-align:center;font:700 15px/1.25 var(--lp-f-head);color:var(--lp-brown)}
.lp-qb-label{position:absolute;left:6px;top:6px;max-width:calc(100% - 12px);padding:4px 8px;border-radius:999px;background:var(--lp-brown);color:#fff;font:700 11px/1.2 var(--lp-f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 10px -4px rgba(42,20,13,.5)}
.lp-qb-media .lp-qb-promo{position:absolute;left:6px;bottom:6px;margin:0;max-width:calc(100% - 12px);font-size:11px}

.lp-qb-body{display:flex;flex-direction:column;flex:1;padding:10px 4px 2px}
.lp-main .lp-qb-name{height:calc(2*1.35em);margin:0 0 6px;font:600 13.5px/1.35 var(--lp-f-body);letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lp-qb-name a{color:var(--lp-ink);text-decoration:none}
.lp-qb-name a:hover{text-decoration:underline}
.lp-qb-price.lp-price{height:40px;gap:1px;justify-content:flex-start}
.lp-qb-price>strong{font-size:16px;line-height:1.25}
.lp-qb-price>strong small{font-size:12px;font-weight:600;color:var(--lp-muted)}
.lp-qb-price>del{font-size:12px}
.lp-qb-acts{display:grid;gap:6px;margin-top:auto;padding-top:8px}
.lp-qb-add,.lp-qb-zalo{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;border-radius:12px;font:700 14px/1.1 var(--lp-f-body);text-decoration:none;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.lp-qb-add{height:42px;padding:0 10px;border:0;background:var(--lp-orange);color:#fff}
.lp-qb-add:hover{background:var(--lp-orange-d)}
.lp-qb-add.is-added{background:var(--lp-ok)}
.lp-qb-add .lp-ic-svg{width:18px;height:18px}
.lp-qb-zalo{height:38px;padding:0 8px;border:1.5px solid #bcd3f5;background:#fff;color:var(--lp-zalo)!important;font-size:13px}
.lp-qb-zalo:hover{border-color:var(--lp-zalo);background:#f3f7fe}
.lp-qb-zalo .lp-ic-svg{width:18px;height:18px}
body.lp .lp-qb :is(.lp-qb-add,.lp-qb-zalo):focus-visible{outline:3px solid rgba(180,83,42,.35);outline-offset:2px}

/* Thẻ giữ chỗ: cùng khung với thẻ thật (chiều cao bằng nhau) */
.lp-qb-card.is-sk .lp-qb-name,.lp-qb-card.is-sk .lp-qb-price{border-radius:8px;background:var(--lp-cream)}
.lp-qb-card.is-sk .lp-qb-name{width:88%}
.lp-qb-card.is-sk .lp-qb-price{width:60%}
.lp-qb-sk-btn{display:block;height:42px;border-radius:12px;background:var(--lp-cream)}
.lp-qb-sk-btn+.lp-qb-sk-btn{height:38px;background:#f5f8fd}

/* Trang chủ: trong lưới hero (điện thoại); máy tính giữ bố cục cũ */
.lp-hero .lp-qb{margin-top:8px}
@media (min-width:768px){.lp-qb[data-lp-qb="mobile"]{display:none!important}}
/* /tiktok: khung 560px; từ 768px dải nằm gọn trong khung (giống .lp-tt-strip) */
.lp-tt .lp-qb-head h2{font-size:22px}
@media (min-width:768px){.lp-tt .lp-qb-list{margin:0;padding-inline:0;scroll-padding-inline:0;grid-auto-columns:168px}}

/* Chuyển động: nhấn nút lún nhẹ, "Đã thêm" bật nhẹ; thẻ giữ chỗ nhấp nháy. Tắt hẳn khi giảm chuyển động / .lp-no-motion */
@media (prefers-reduced-motion:no-preference){
  html:not(.lp-no-motion) .lp-qb-add,html:not(.lp-no-motion) .lp-qb-zalo{transition:transform .32s var(--qb-ease),background-color .2s var(--qb-ease),border-color .2s var(--qb-ease)}
  html:not(.lp-no-motion) .lp-qb-add:active,html:not(.lp-no-motion) .lp-qb-zalo:active{transform:scale(.96)}
  html:not(.lp-no-motion) .lp-qb-add.is-added .lp-ic-svg{animation:lp-qb-pop .42s var(--qb-ease) both}
  html:not(.lp-no-motion) .lp-qb-card.is-sk :is(.lp-qb-img,.lp-qb-name,.lp-qb-price,.lp-qb-sk-btn){animation:lp-qb-pulse 1.2s var(--qb-ease) infinite alternate}
}
@keyframes lp-qb-pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes lp-qb-pulse{0%{opacity:1}100%{opacity:.55}}