/* lp-banner-dong.css — Banner động kiểu B (FE 22/10/2026). Đi cặp lp-banner-dong.js. Nạp ở index / foods / product (sau lp.css) và admin.html (xem trước).
   Hiệu ứng lấy từ mẫu CMO banner/web/dong/mau_hieu_ung_kieu_B.html (khối .bd), viết lại bằng font + màu LùnPet.
   BỐ CỤC THEO HÌNH KHUNG, không theo màn hình: banner là container (size), khung giữ tỉ lệ bằng aspect-ratio của .lp-promo-ban (lp.css),
   nên cùng 1 CSS chạy đúng cả trên web lẫn khung xem trước trong admin:
     khung 2:1 (máy tính, trang chủ)     → chữ nửa trái, giữa theo chiều dọc
     khung dọc 5:6 (điện thoại, 750×900) → chữ ở 58% dưới, lớp tối chuyển dần từ trên xuống
     dải 4:1 (máy tính, 1600×400)        → 1 hàng ngang: chữ · ô giá · nút, nằm vùng tối bên trái (2–3 ô giá: xếp tầng)
     dải 3:1 (điện thoại)                 → 3 hàng gọn, chỉ 1 ô giá, ẩn phụ đề + dòng phụ; giữ trong 2/3 trái (ảnh combo ở 1/3 phải)
   Cỡ chữ theo bề rộng khung (cqw) nhân --bd-z (fit() hạ còn .9/.82 khi chữ tràn); có mức tối thiểu px để chữ nhỏ không dưới ~10,5–11px (dải: nhãn / nhãn giá / nút ≥11px, BUG-BD-04).
   QA 22/10 (BUG-BD-01/02): chữ chỉ nằm trong vùng padding của .lp-bd-chu; ô giá không co mà xuống hàng; fit() trong JS thu gọn khi vẫn tràn.
   Chuyển động chỉ transform/opacity, chỉ khi prefers-reduced-motion: no-preference và <html> không có .lp-no-motion. Trình duyệt cũ
   không có container query: khối @supports cuối file (chữ tĩnh ở dưới, cỡ px). */
.lp-bd{--bd-ink:#fff4e2;--bd-soft:#f1dcc2;--bd-gold:#efb444;--bd-dark:#1f0f08;--bd-shade:26,12,7;
  --bd-head:'Fraunces',Georgia,'Times New Roman',serif;--bd-body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bd-out:cubic-bezier(.22,1,.36,1);--bd-pop:cubic-bezier(.34,1.56,.64,1);--bd-io:cubic-bezier(.65,0,.35,1);
  position:relative;display:block;overflow:hidden;container:lpbd/size;background:#2a140d;color:var(--bd-ink);text-decoration:none;isolation:isolate;-webkit-tap-highlight-color:transparent}
a.lp-bd,a.lp-bd:hover{color:var(--bd-ink);text-decoration:none}
.lp-bd picture{position:absolute;inset:0;display:block}
.lp-bd picture img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:64% 50%}
.lp-bd-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lp-bd:focus-visible{outline:3px solid var(--bd-gold);outline-offset:3px}

/* ---------- khung 2:1 (mặc định) ----------
   Vùng an toàn của chữ = vùng trong padding của .lp-bd-chu (lớp tối vẫn phủ cả khung). lp-banner-dong.js fit() đo chữ trong vùng này;
   tràn thì lần lượt: chữ 90% → ẩn dòng phụ → ẩn phụ đề → chữ 82% (--bd-z) → ẩn nhãn → ẩn ô giá 2–3 (BUG-BD-01/02). Admin chặn lưu nếu tới bước ẩn ô giá. */
.lp-bd{--bd-z:1}
.lp-bd.bd-f3{--bd-z:.9}
.lp-bd.bd-f4{--bd-z:.82}
.lp-bd-chu{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:2.8cqw 44cqw 2.8cqw 5.5cqw;font-family:var(--bd-body);text-align:left}
.lp-bd-chu::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(var(--bd-shade),.74) 0%,rgba(var(--bd-shade),.5) 36%,rgba(var(--bd-shade),0) 60%)}
.lp-bd-chu>*{max-width:100%;min-width:0;margin:0}
.lp-bd .lp-bd-nhan{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;font:700 max(11px,calc(var(--bd-z)*1.15cqw))/1.15 var(--bd-body);letter-spacing:.08em;text-transform:uppercase;color:var(--bd-ink)}
.lp-bd-tag{padding:.55em 1.05em;border-radius:999px;background:var(--bd-gold);color:var(--bd-dark)}
.lp-bd-dem{padding:.55em .95em;border-radius:999px;background:rgba(var(--bd-shade),.62);color:var(--bd-gold);box-shadow:inset 0 0 0 1px rgba(239,180,68,.5);letter-spacing:.02em;text-transform:none;white-space:nowrap}
.lp-bd-dem[hidden]{display:none}
.lp-bd .lp-bd-h{max-width:47cqw;margin:calc(var(--bd-z)*1.5cqw) 0 0;font:700 calc(var(--bd-z)*4.3cqw)/1.04 var(--bd-head);font-optical-sizing:auto;letter-spacing:-.022em;color:var(--bd-ink);text-transform:none;text-wrap:balance;overflow-wrap:break-word;text-shadow:0 2px 18px rgba(var(--bd-shade),.35)}
.lp-bd .lp-bd-phu{max-width:47cqw;margin-top:calc(var(--bd-z)*1.2cqw);font:500 max(13px,calc(var(--bd-z)*1.5cqw))/1.42 var(--bd-body);color:var(--bd-soft);text-wrap:pretty}
/* ô giá: không co (co lại là chữ giá đè nhau, BUG-BD-02) — thiếu chỗ thì xuống hàng */
.lp-bd .lp-bd-gia{display:flex;flex-wrap:wrap;gap:1cqw;margin-top:calc(var(--bd-z)*1.9cqw)}
.lp-bd .lp-bd-o{flex:0 0 auto;display:grid;grid-template-columns:auto auto;justify-content:start;align-items:baseline;column-gap:.55em;margin:0;padding:calc(var(--bd-z)*.95cqw) 1.5cqw calc(var(--bd-z)*1.05cqw);border-radius:1.3cqw;background:rgba(255,240,214,.09);box-shadow:inset 0 0 0 1px rgba(239,180,68,.45),inset 0 1px 0 rgba(255,255,255,.1)}
.lp-bd-ol{grid-column:1/-1;font:600 max(11px,calc(var(--bd-z)*1.1cqw))/1.3 var(--bd-body);color:var(--bd-soft);white-space:nowrap}
.lp-bd-o b{font:700 max(17px,calc(var(--bd-z)*2.4cqw))/1.1 var(--bd-body);color:var(--bd-gold);letter-spacing:-.015em;font-variant-numeric:tabular-nums;white-space:nowrap}
.lp-bd-o s{font:500 max(11px,calc(var(--bd-z)*1.1cqw))/1.2 var(--bd-body);color:rgba(241,220,194,.72);text-decoration-thickness:1px;white-space:nowrap}
.lp-bd .lp-bd-qua{max-width:47cqw;margin-top:calc(var(--bd-z)*1.4cqw);font:500 max(12px,calc(var(--bd-z)*1.22cqw))/1.45 var(--bd-body);color:var(--bd-soft);text-wrap:pretty}
.lp-bd-nut{position:relative;display:inline-flex;margin-top:calc(var(--bd-z)*2.1cqw);border-radius:999px;isolation:isolate;font:700 max(13px,calc(var(--bd-z)*1.35cqw))/1.2 var(--bd-body);white-space:nowrap}
.lp-bd-nut::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--bd-gold);opacity:0;pointer-events:none}
.lp-bd-nut-in{position:relative;display:inline-flex;align-items:center;gap:.75em;padding:.42em .42em .42em 1.3em;border-radius:inherit;overflow:hidden;background:var(--bd-gold);color:var(--bd-dark);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 26px -14px rgba(239,180,68,.9);transition:transform .5s var(--bd-out)}
.lp-bd-nut-in::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.62) 50%,transparent 70%);transform:translateX(-130%);pointer-events:none}
.lp-bd-nut i{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:rgba(31,15,8,.12);transition:transform .5s var(--bd-out)}
.lp-bd-nut svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.lp-bd:hover .lp-bd-nut i{transform:translate(2px,-1px) scale(1.06)}}
.lp-bd:active .lp-bd-nut-in{transform:scale(.97)}
/* các bước thu gọn do fit() gắn (bd-f3/f4 = --bd-z ở trên) */
.lp-bd.bd-f1 .lp-bd-qua,.lp-bd.bd-f2 .lp-bd-phu,.lp-bd.bd-f5 .lp-bd-tag,.lp-bd.bd-f5n .lp-bd-nhan,.lp-bd.bd-f6 .lp-bd-o:nth-child(n+2){display:none}
/* fit() đang đo (QC 22/10, BUG-BD-06): bỏ mọi transform của hiệu ứng (chữ bay, giá bật, lớp sáng nút) để kết quả đo y hệt khi đứng yên.
   !important thắng giá trị của animation nhưng không khởi động lại animation; JS gỡ class ngay trong cùng khung hình nên mắt không thấy. */
.lp-bd.is-measuring .lp-bd-chu *,.lp-bd.is-measuring .lp-bd-chu ::before,.lp-bd.is-measuring .lp-bd-chu ::after{transform:none!important}

/* ---------- khung dọc 5:6 (điện thoại, trang chủ): chữ ở 58% dưới ---------- */
@container lpbd (aspect-ratio < 1){
  .lp-bd-chu{justify-content:flex-end;padding:5.5cqw}
  /* lớp tối theo chỗ chữ bắt đầu (--bd-top do fit() đặt, mặc định 45%): chữ dài lên cao thì lớp tối lên theo, không để chữ trắng trên nền ảnh sáng */
  .lp-bd-chu::before{background:linear-gradient(180deg,rgba(var(--bd-shade),0) calc(var(--bd-top,45%) - 15%),rgba(var(--bd-shade),.6) var(--bd-top,45%),rgba(var(--bd-shade),.86) calc(var(--bd-top,45%) + 15%),rgba(var(--bd-shade),.94) 100%)}
  .lp-bd .lp-bd-h,.lp-bd .lp-bd-phu,.lp-bd .lp-bd-qua{max-width:none}
  .lp-bd .lp-bd-nhan{font-size:max(10.5px,calc(var(--bd-z)*2.9cqw))}
  .lp-bd-tag,.lp-bd-dem{padding:.5em .95em}
  .lp-bd .lp-bd-h{margin-top:calc(var(--bd-z)*2cqw);font-size:calc(var(--bd-z)*6.8cqw);line-height:1.04}
  .lp-bd .lp-bd-phu{margin-top:calc(var(--bd-z)*1.4cqw);font-size:max(11.5px,calc(var(--bd-z)*3.4cqw));line-height:1.34}
  /* 3 ô giá (hoặc giá dài) thì xuống hàng, không tràn mép phải (BUG-BD-01) */
  .lp-bd .lp-bd-gia{gap:1.8cqw;margin-top:calc(var(--bd-z)*2.4cqw)}
  .lp-bd .lp-bd-o{padding:calc(var(--bd-z)*1.5cqw) 2.6cqw calc(var(--bd-z)*1.7cqw);border-radius:2.8cqw}
  .lp-bd-ol,.lp-bd-o s{font-size:max(10.5px,calc(var(--bd-z)*2.9cqw))}
  .lp-bd-o b{font-size:max(15px,calc(var(--bd-z)*4.9cqw))}
  .lp-bd .lp-bd-qua{margin-top:calc(var(--bd-z)*2cqw);font-size:max(11px,calc(var(--bd-z)*3.05cqw));line-height:1.34}
  .lp-bd-nut{margin-top:calc(var(--bd-z)*2.8cqw);font-size:max(12px,calc(var(--bd-z)*3.5cqw))}
  .lp-bd-nut-in{padding:.36em .36em .36em 1.15em}
  .lp-bd-nut i{width:1.9em;height:1.9em}
}

/* ---------- dải (4:1 máy tính, 3:1 điện thoại) ----------
   Vùng chữ dừng ở ~60% bề ngang (padding phải) vì ảnh nền dải đặt sản phẩm ở 40% phải. Tiêu đề được xuống dòng (không nowrap, BUG-BD-02).
   1 ô giá: 1 hàng ngang chữ · ô giá · nút. 2–3 ô giá (.is-g2/.is-g3): xếp tầng, hàng cuối "ô giá | nút", ô giá xuống hàng khi thiếu chỗ. */
@container lpbd (aspect-ratio >= 2.6){
  .lp-bd-chu{display:grid;grid-template-columns:minmax(0,max-content) auto auto;grid-template-areas:"nhan gia nut" "h gia nut" "phu gia nut" "qua gia nut";align-content:center;justify-content:start;justify-items:start;column-gap:2cqw;padding:6cqh 40cqw 6cqh 5cqw}
  .lp-bd-chu::before{background:linear-gradient(90deg,rgba(var(--bd-shade),.72) 0%,rgba(var(--bd-shade),.5) 40%,rgba(var(--bd-shade),0) 62%)}
  .lp-bd .lp-bd-nhan{grid-area:nhan;font-size:max(11px,calc(var(--bd-z)*.92cqw))}
  .lp-bd .lp-bd-h{grid-area:h;max-width:none;margin-top:calc(var(--bd-z)*.8cqw);font-size:calc(var(--bd-z)*2.5cqw);line-height:1.08}
  .lp-bd .lp-bd-phu{grid-area:phu;margin-top:calc(var(--bd-z)*.5cqw);font-size:max(11px,calc(var(--bd-z)*1cqw));max-width:27cqw}
  .lp-bd .lp-bd-qua{grid-area:qua;margin-top:calc(var(--bd-z)*.6cqw);font-size:max(11px,calc(var(--bd-z)*1cqw));max-width:27cqw}
  .lp-bd .lp-bd-gia{grid-area:gia;align-self:center;margin:0;gap:.8cqw;flex-wrap:nowrap}
  .lp-bd .lp-bd-o{padding:calc(var(--bd-z)*.65cqw) 1.1cqw calc(var(--bd-z)*.75cqw);border-radius:1cqw}
  .lp-bd-ol,.lp-bd-o s{font-size:max(11px,calc(var(--bd-z)*.9cqw))}
  .lp-bd-o b{font-size:max(14px,calc(var(--bd-z)*1.85cqw))}
  .lp-bd-nut{grid-area:nut;align-self:center;margin:0;font-size:max(11px,calc(var(--bd-z)*1.05cqw))}
  /* 2–3 ô giá: xếp tầng */
  .lp-bd:is(.is-g2,.is-g3) .lp-bd-chu{grid-template-columns:minmax(0,max-content) auto;grid-template-areas:"nhan nhan" "h h" "phu phu" "qua qua" "gia nut";align-items:end}
  .lp-bd:is(.is-g2,.is-g3) .lp-bd-phu,.lp-bd:is(.is-g2,.is-g3) .lp-bd-qua{max-width:none}
  .lp-bd:is(.is-g2,.is-g3) .lp-bd-gia{flex-wrap:wrap;align-self:end;margin-top:calc(var(--bd-z)*1.1cqw)}
  .lp-bd:is(.is-g2,.is-g3) .lp-bd-nut{align-self:end;margin-top:calc(var(--bd-z)*1.1cqw)}
}
/* dải máy tính hẹp (khung < 1000px, vd màn 768–1024): luôn xếp tầng để không lấn sang nửa phải ảnh */
@container lpbd (aspect-ratio >= 3.5) and (width < 1000px){
  .lp-bd-chu,.lp-bd:is(.is-g2,.is-g3) .lp-bd-chu{grid-template-columns:minmax(0,max-content) auto;grid-template-areas:"nhan nhan" "h h" "phu phu" "qua qua" "gia nut";align-items:end;column-gap:1.4cqw}
  .lp-bd .lp-bd-h{font-size:calc(var(--bd-z)*3.2cqw)}
  .lp-bd .lp-bd-phu,.lp-bd .lp-bd-qua{max-width:none}
  .lp-bd .lp-bd-gia{flex-wrap:wrap}
  .lp-bd .lp-bd-gia,.lp-bd-nut{margin-top:calc(var(--bd-z)*1.3cqw)}
}
/* dải điện thoại 3:1: 3 tầng gọn, chỉ 1 ô giá, ẩn phụ đề + dòng phụ; chữ trong ~66% trái (ảnh combo ở 1/3 phải) */
@container lpbd (2.6 <= aspect-ratio < 3.5){
  .lp-bd-chu,.lp-bd:is(.is-g2,.is-g3) .lp-bd-chu{grid-template-columns:minmax(0,max-content) auto;grid-template-areas:"nhan nhan" "h h" "gia nut";align-items:center;column-gap:1.8cqw;padding:4cqh 33cqw 4cqh 4.5cqw}
  .lp-bd-chu::before{background:linear-gradient(90deg,rgba(var(--bd-shade),.8) 0%,rgba(var(--bd-shade),.6) 48%,rgba(var(--bd-shade),0) 72%)}
  .lp-bd .lp-bd-phu,.lp-bd .lp-bd-qua,.lp-bd .lp-bd-o:nth-child(n+2),.lp-bd-o s{display:none}
  .lp-bd .lp-bd-nhan{font-size:max(11px,calc(var(--bd-z)*2.7cqw));letter-spacing:.04em}
  .lp-bd-tag,.lp-bd-dem{padding:.45em .85em}
  .lp-bd .lp-bd-h{margin-top:calc(var(--bd-z)*1.5cqw);font-size:calc(var(--bd-z)*5.2cqw);line-height:1.06}
  .lp-bd .lp-bd-gia,.lp-bd:is(.is-g2,.is-g3) .lp-bd-gia{flex-wrap:nowrap;align-self:center;margin-top:calc(var(--bd-z)*2cqw)}
  .lp-bd .lp-bd-o{grid-template-columns:auto auto;padding:calc(var(--bd-z)*.9cqw) 2cqw calc(var(--bd-z)*1cqw);border-radius:2cqw}
  .lp-bd-ol{grid-column:auto;font-size:max(11px,calc(var(--bd-z)*2.6cqw))}
  .lp-bd-o b{font-size:max(13px,calc(var(--bd-z)*3.9cqw))}
  .lp-bd-nut,.lp-bd:is(.is-g2,.is-g3) .lp-bd-nut{align-self:center;margin-top:calc(var(--bd-z)*2cqw);font-size:max(11px,calc(var(--bd-z)*3cqw))}
  .lp-bd-nut-in{padding:.32em .32em .32em 1em;gap:.5em}
  .lp-bd-nut i{width:1.8em;height:1.8em}
}

/* ---------- chuyển động ---------- */
@keyframes lp-bd-kb{from{transform:scale(1.08)}to{transform:none}}
@keyframes lp-bd-in{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes lp-bd-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes lp-bd-halo{0%{opacity:.55;transform:scale(1)}65%,100%{opacity:0;transform:scale(1.14,1.5)}}
@keyframes lp-bd-glint{0%{transform:translateX(-130%)}32%,100%{transform:translateX(130%)}}
@media (prefers-reduced-motion:no-preference){
  /* chờ chạy: chữ ẩn (chỉ khi JS đã gắn .is-wait) */
  html:not(.lp-no-motion) .lp-bd.is-wait .lp-bd-chu>*,html:not(.lp-no-motion) .lp-bd.is-wait .lp-bd-o{opacity:0}
  /* nền zoom chậm 1.08 → 1 */
  html:not(.lp-no-motion) .lp-bd.is-play picture img{animation:lp-bd-kb 9s var(--bd-out) both}
  /* từng dòng bay vào, lệch nhau 0,25 giây (--i do JS gắn theo thứ tự dòng có mặt) */
  html:not(.lp-no-motion) .lp-bd.is-play .lp-bd-chu>*{animation:lp-bd-in .75s var(--bd-out) both;animation-delay:calc(.15s + var(--i,0)*.25s)}
  html:not(.lp-no-motion) .lp-bd.is-play .lp-bd-chu>.lp-bd-gia{animation:none}
  /* ô giá bật lên */
  html:not(.lp-no-motion) .lp-bd.is-play .lp-bd-o{animation:lp-bd-pop .6s var(--bd-pop) both;animation-delay:calc(.15s + var(--i,0)*.25s + var(--k,0)*.18s)}
  /* nút: nhịp sáng toả ra + vệt sáng lướt, lặp lại nhẹ */
  html:not(.lp-no-motion) .lp-bd.is-play .lp-bd-nut::before{animation:lp-bd-halo 2.6s var(--bd-out) calc(.95s + var(--i,0)*.25s) infinite}
  html:not(.lp-no-motion) .lp-bd.is-play .lp-bd-nut-in::after{animation:lp-bd-glint 3.6s var(--bd-io) calc(1.25s + var(--i,0)*.25s) infinite}
  /* ngoài màn hình / tab ẩn: dừng vòng lặp */
  html:not(.lp-no-motion) .lp-bd:is(.is-off,.is-hid) :is(.lp-bd-nut,.lp-bd-nut-in)::before,html:not(.lp-no-motion) .lp-bd:is(.is-off,.is-hid) :is(.lp-bd-nut,.lp-bd-nut-in)::after,html:not(.lp-no-motion) .lp-bd:is(.is-off,.is-hid) picture img{animation-play-state:paused}
}

/* ---------- trình duyệt chưa có container query (iOS < 16…): chữ tĩnh cỡ px ---------- */
@supports not (container-type:size){
  .lp-bd-chu{justify-content:flex-end;padding:16px}
  .lp-bd-chu::before{background:linear-gradient(180deg,rgba(26,12,7,0) 25%,rgba(26,12,7,.88) 70%)}
  .lp-bd .lp-bd-nhan,.lp-bd .lp-bd-phu,.lp-bd .lp-bd-qua,.lp-bd-ol,.lp-bd-o s{font-size:12px}
  .lp-bd .lp-bd-h{margin-top:8px;font-size:22px}
  .lp-bd .lp-bd-phu,.lp-bd .lp-bd-qua{margin-top:6px}
  .lp-bd .lp-bd-gia{gap:8px;margin-top:10px}
  .lp-bd .lp-bd-o{padding:6px 10px;border-radius:10px}
  .lp-bd-o b{font-size:17px}
  .lp-bd-nut{margin-top:10px;font-size:13px}
  .lp-bd.is-strip .lp-bd-chu{padding:10px 14px}
  .lp-bd.is-strip :is(.lp-bd-nhan,.lp-bd-phu,.lp-bd-qua,.lp-bd-gia){display:none}
  .lp-bd.is-strip .lp-bd-h{font-size:18px;margin:0}
  .lp-bd.is-strip .lp-bd-nut{margin-top:6px}
}