/* LỚP HIỆU ỨNG — TRANG TRONG (kho.html). Nạp SAU styles.css. Sếp sửa biên độ ở đây.

   ⛔⛔ HAI BÀI HỌC ĐO ĐƯỢC, ĐỌC TRƯỚC KHI SỬA:

   1. BẢN CŨ TREO MỌI HIỆU ỨNG VÀO LỚP `.ja`. Mà `.ja` chỉ được gắn khi máy KHÔNG xin
      giảm chuyển động. macOS của Sếp bật Reduce Motion -> `.ja` không bao giờ có ->
      beam, lưới thở, quét sáng đều nằm im. Sếp báo «các animation chưa có». Nay phần
      trang trí treo vào `.dong` — lớp JS gắn LUÔN, không hỏi gì cả.

   2. BẢN CŨ CÒN CHỔI QUÉT `*{animation:none!important}` trong khối giảm-chuyển-động.
      Một dòng đó quét sạch cả con trỏ nhấp nháy và dải ảnh. Tắt phải ĐÍCH DANH.

   ⭐ Bốn lớp: NỀN LUÔN SỐNG · KHAY · Ô SẢN PHẨM · CHỮ.
*/

/* ══ LỚP 1 — NỀN LUÔN SỐNG ══════════════════════════════════════════ */

/* scanline CRT phủ toàn trang — TĨNH, thấy ngay */
.crt{background:repeating-linear-gradient(180deg,
  rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 3px 4px)}
.crt::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 56%,rgba(0,0,0,.55) 100%)}
/* ⛔ Ảnh hàng phải nằm TRÊN lớp CRT — khách nhìn ảnh để đánh giá chất liệu. */
.m .a,.m .a img,.chay-khay img,.xem .anh,.xem .anh img{position:relative;z-index:4}

/* beam quét dọc trang */
.beam{height:280px;
  background:linear-gradient(180deg,transparent,rgba(230,178,97,.14),
    rgba(230,178,97,.28),rgba(230,178,97,.14),transparent)}
.dong .beam{animation:beamQuet 6s linear infinite}
@keyframes beamQuet{0%{top:-280px}100%{top:100%}}

/* lưới nền thở */
.dong .nen-luoi{animation:luoiTho 4.2s steps(2) infinite}
@keyframes luoiTho{0%,100%{opacity:.42}50%{opacity:.78}}

/* ══ LỚP 2 — KHAY ═══════════════════════════════════════════════════ */

/* mặt khay: vệt sáng quét ngang khi rê chuột — như kéo tay qua mặt ngăn kéo */
.khay{overflow:hidden}
.khay .mat{position:relative;overflow:hidden}
.khay .mat::after{content:"";position:absolute;left:-40%;top:0;bottom:0;width:38%;
  background:linear-gradient(90deg,transparent,rgba(230,178,97,.16),transparent);
  pointer-events:none;opacity:0}
.dong .khay.co:hover .mat::after{opacity:1;animation:quetNgang .7s linear}
@keyframes quetNgang{0%{left:-40%}100%{left:110%}}

/* vạch vàng chạy dọc mép trái khay — dấu hiệu «khay này có hàng» */
.khay.co::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--diem),transparent);opacity:.5}
.dong .khay.co::before{animation:mepChay 3.4s ease-in-out infinite}
@keyframes mepChay{0%,100%{opacity:.28;transform:translateY(-18%)}
                   50%{opacity:.9;transform:translateY(18%)}}
.khay.mo.co::before{opacity:.95;animation:none;background:var(--kim)}

/* tay nắm: nhịp thở nhẹ để mời bấm */
.dong .khay.co .mat .tay{animation:tayTho 2.6s ease-in-out infinite}
@keyframes tayTho{0%,100%{border-color:var(--vien)}50%{border-color:rgba(230,178,97,.55)}}
.khay.mo .mat .tay{animation:none!important}

/* ══ LỚP 3 — Ô SẢN PHẨM ═════════════════════════════════════════════ */
.m{position:relative}
.m::after{content:"";position:absolute;left:0;right:0;height:40%;top:-42%;z-index:5;
  background:linear-gradient(180deg,transparent,rgba(230,178,97,.22),transparent);
  pointer-events:none}
.dong .m:hover::after{animation:quetDoc .6s linear}
@keyframes quetDoc{0%{top:-42%}100%{top:112%}}

/* ô sản phẩm trong dải chạy: phóng nhẹ khi rê */
.chay-khay img:hover{border-color:var(--diem)}

/* ══ LỚP 4 — CHỮ ════════════════════════════════════════════════════ */

/* đầu mục: gạch vàng chạy dài ra */
.dau-muc h2{position:relative;display:inline-block}
.dau-muc h2::after{content:"";position:absolute;left:0;bottom:-8px;height:2px;width:0;
  background:var(--kim)}
.dong .dau-muc h2::after{animation:gachChay 1.1s var(--may) .2s forwards}
@keyframes gachChay{to{width:100%}}

/* ô tra cứu: viền sáng lên khi đang gõ */
.go-tim:focus-within{border-color:var(--diem);
  box-shadow:0 0 0 1px rgba(230,178,97,.25),0 0 26px rgba(230,178,97,.12)}

/* nút: nháy chữ khi rê */
.dong .nut:hover{animation:nutNhay .26s steps(2) 3}
@keyframes nutNhay{0%,100%{filter:none}50%{filter:brightness(1.35) contrast(1.1)}}

/* thanh chỉ số: vệt trắng chạy trong lòng thanh */
.chi-so .thanh{position:relative;overflow:hidden}
.chi-so .thanh::after{content:"";position:absolute;top:0;bottom:0;width:28px;left:-28px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
.dong .chi-so .thanh::after{animation:vetChay 2.6s linear infinite}
@keyframes vetChay{0%{left:-28px}100%{left:100%}}

/* ══ TẮT CHUYỂN ĐỘNG — ĐÍCH DANH, KHÔNG QUÉT CHỔI ═══════════════════
   Giữ: beam, lưới thở, mép khay, radar, con trỏ, dải ảnh (JS lái).
   Bỏ: thứ nháy nhanh và thứ chỉ chạy khi rê chuột. */
@media(prefers-reduced-motion:reduce){
  .dong .nut:hover{animation:none}
  .dong .khay.co:hover .mat::after{animation:none;opacity:0}
  .dong .m:hover::after{animation:none}
  .khay.mo .luoi .m{animation:none;opacity:1;transform:none}
  .dong .nen-luoi{animation:none;opacity:.6}
  .dong .beam{animation-duration:11s}     /* vẫn quét, chỉ chậm hơn gấp đôi */
}